♻️(frontend) refact HorizontalSeparator to be more flexible

We need HorizontalSeparator to be more flexible,
so we can use it in more places. We change the
props to be more generic, we updated the components
that use it.

src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx

@@ -1,4 +1,3 @@
-import { HorizontalSeparator } from '@gouvfr-lasuite/ui-kit';
 import {
   Fragment,
   PropsWithChildren,
@@ -10,7 +9,15 @@ import {
 } from 'react';
 import { css } from 'styled-components';
 
-import { Box, BoxButton, BoxProps, DropButton, Icon, Text } from '@/components';
+import {
+  Box,
+  BoxButton,
+  BoxProps,
+  DropButton,
+  HorizontalSeparator,
+  Icon,
+  Text,
+} from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import { useKeyboardAction } from '@/hooks';
 
@@ -266,9 +273,7 @@ export const DropdownMenu = ({
                   />
                 )}
               </BoxButton>
-              {option.showSeparator && (
-                <HorizontalSeparator withPadding={false} />
-              )}
+              {option.showSeparator && <HorizontalSeparator $margin="none" />}
             </Fragment>
           );
         })}

src/frontend/apps/impress/src/components/separators/HorizontalSeparator.tsx

@@ -1,27 +1,14 @@
-import { Spacings } from '@/utils';
-
-import { Box } from '../Box';
-
-type Props = {
-  $withPadding?: boolean;
-  customPadding?: Spacings;
-};
-
-export const HorizontalSeparator = ({
-  $withPadding = true,
-  customPadding,
-}: Props) => {
-  const padding = $withPadding
-    ? (customPadding ?? 'base')
-    : ('none' as Spacings);
+import { Box, BoxType } from '../Box';
 
+export const HorizontalSeparator = (props: BoxType) => {
   return (
     <Box
       $height="1px"
       $width="100%"
-      $margin={{ vertical: padding }}
+      $margin={{ vertical: 'base' }}
       $background="var(--c--contextuals--border--surface--primary)"
       className="--docs--horizontal-separator"
+      {...props}
     />
   );
 };

src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx

@@ -76,7 +76,7 @@ export const DocHeader = ({ doc }: DocHeaderProps) => {
             )}
           </Box>
         </Box>
-        <HorizontalSeparator $withPadding={false} />
+        <HorizontalSeparator $margin="none" />
       </Box>
     </>
   );

src/frontend/apps/impress/src/features/docs/doc-share/components/DocInheritedShareContent.tsx

@@ -33,7 +33,7 @@ export const DocInheritedShareContent = ({
       $padding={{ top: spacingsTokens.sm }}
       className="--docs--doc-inherited-share-content"
     >
-      <HorizontalSeparator $withPadding={false} />
+      <HorizontalSeparator $margin="none" />
       <Box
         $gap={spacingsTokens.sm}
         $padding={{

src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx

@@ -250,7 +250,9 @@ export const DocShareModal = ({ doc, onClose, isRootDoc = true }: Props) => {
                   />
                 </Box>
               )}
-              {!canViewAccesses && <HorizontalSeparator customPadding="12px" />}
+              {!canViewAccesses && (
+                <HorizontalSeparator $margin={{ vertical: 'sm' }} />
+              )}
             </Box>
 
             <Box data-testid="doc-share-quick-search">

src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalFooter.tsx

@@ -25,10 +25,10 @@ export const DocShareModalFooter = ({
       `}
       className="--docs--doc-share-modal-footer"
     >
-      <HorizontalSeparator $withPadding={true} customPadding="12px" />
+      <HorizontalSeparator $margin={{ vertical: 'sm' }} />
 
       <DocVisibility doc={doc} />
-      <HorizontalSeparator customPadding="12px" />
+      <HorizontalSeparator $margin={{ vertical: 'sm' }} />
 
       <Box
         $direction="row"

src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavorites.tsx

@@ -27,7 +27,7 @@ export const LeftPanelFavorites = () => {
       aria-labelledby="pinned-docs-title"
       className="--docs--left-panel-favorites"
     >
-      <HorizontalSeparator $withPadding={false} />
+      <HorizontalSeparator $margin="none" />
       <Box
         $justify="center"
         $padding={{ horizontal: 'sm', top: 'sm' }}