npm - design-zystem - Versions diffs - 1.0.308 → 1.0.310 - Mend

design-zystem 1.0.308 → 1.0.310

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/index.mjs CHANGED Viewed

@@ -1149,7 +1149,7 @@ var ModalConfirmation = (props) => {
 };
 // src/Components/NewModal/NewModal.tsx
-import { useEffect as useEffect3, useRef as useRef3, useState as useState2 } from "react";
+import { useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
 // src/Components/Bubble/Bubble.tsx
 import styled11, { css, keyframes } from "styled-components";
@@ -1236,8 +1236,139 @@ var Bubble = (_a) => {
   return /* @__PURE__ */ jsx14(StyledBubble, __spreadProps(__spreadValues({}, otherProps), { children }));
 };
+// src/Components/Tooltip/Tooltip.tsx
+import { useState as useState2 } from "react";
+import styled12 from "styled-components";
+import { jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
+var StyledTooltipWrapper = styled12.div`
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+`;
+var StyledTooltipContent = styled12.div`
+  visibility: ${(props) => props.$isVisible ? "visible" : "hidden"};
+  background-color: ${(props) => props.$backgroundColor || colors.black};
+  color: ${colors.white};
+  text-align: center;
+  padding: 8px;
+  border-radius: 4px;
+  position: absolute;
+  width: ${(props) => props.$width || "200px"};
+  height: ${(props) => props.$height || "auto"};
+  opacity: ${(props) => props.$isVisible ? 1 : 0};
+  transition: opacity 0.3s;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  ${(props) => {
+  switch (props.$direction) {
+    case "top":
+      return `
+          bottom: 125%;
+          left: 50%;
+          transform: translateX(-50%);
+          &::after {
+            content: "";
+            position: absolute;
+            top: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            border-width: 5px;
+            border-style: solid;
+            border-color: ${props.$backgroundColor || colors.black} transparent transparent transparent;
+          }
+        `;
+    case "bottom":
+      return `
+          top: 125%;
+          left: 50%;
+          transform: translateX(-50%);
+          &::after {
+            content: "";
+            position: absolute;
+            bottom: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            border-width: 5px;
+            border-style: solid;
+            border-color: transparent transparent ${props.$backgroundColor || colors.black} transparent;
+          }
+        `;
+    case "left":
+      return `
+          top: 50%;
+          right: 125%;
+          transform: translateY(-50%);
+          &::after {
+            content: "";
+            position: absolute;
+            top: 50%;
+            left: 100%;
+            transform: translateY(-50%);
+            border-width: 5px;
+            border-style: solid;
+            border-color: transparent transparent transparent ${props.$backgroundColor || colors.black};
+          }
+        `;
+    case "right":
+    default:
+      return `
+          top: 50%;
+          left: 125%;
+          transform: translateY(-50%);
+          &::after {
+            content: "";
+            position: absolute;
+            top: 50%;
+            right: 100%;
+            transform: translateY(-50%);
+            border-width: 5px;
+            border-style: solid;
+            border-color: transparent ${props.$backgroundColor || colors.black} transparent transparent;
+          }
+        `;
+  }
+}}
+`;
+var Tooltip = ({
+  backgroundColor,
+  data = [],
+  width,
+  height,
+  direction = "top",
+  children
+}) => {
+  const [isVisible, setIsVisible] = useState2(false);
+  const handleMouseEnter = () => setIsVisible(true);
+  const handleMouseLeave = () => setIsVisible(false);
+  return /* @__PURE__ */ jsxs5(
+    StyledTooltipWrapper,
+    {
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: [
+        children,
+        /* @__PURE__ */ jsx15(
+          StyledTooltipContent,
+          {
+            $isVisible: isVisible,
+            $backgroundColor: backgroundColor,
+            $width: width,
+            $height: height,
+            $direction: direction,
+            children: data.length > 0 ? data.map((item, index) => /* @__PURE__ */ jsx15(Text, { size: "s", color: "white", children: item }, index)) : /* @__PURE__ */ jsx15(Text, { size: "s", color: "white", children: "Aucune donn\xE9e" })
+          }
+        )
+      ]
+    }
+  );
+};
 // src/Components/NewModal/NewModal.tsx
-import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
 var NewModal = ({
   showModal,
   closeModal,
@@ -1251,6 +1382,7 @@ var NewModal = ({
   leftButtonAction,
   rightButtonLabel,
   rightButtonAction,
+  rightButtonDisabledTooltip,
   isLoading,
   isOutline,
   variant = "blue_700",
@@ -1263,8 +1395,8 @@ var NewModal = ({
 }) => {
   const mainColor = colors[variant] || colors.blue_700;
   const showHeader = Boolean(title || showCloseButton);
-  const [isDragging, setIsDragging] = useState2(false);
-  const [offset, setOffset] = useState2({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = useState3(false);
+  const [offset, setOffset] = useState3({ x: 0, y: 0 });
   const lastPointRef = useRef3({ x: 0, y: 0 });
   const headerRef = useRef3(null);
   useEffect3(() => {
@@ -1307,7 +1439,7 @@ var NewModal = ({
     if (showModal === true) setOffset({ x: 0, y: 0 });
   }, [showModal]);
   if (!showModal) return null;
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     Box,
     {
       style: {
@@ -1330,7 +1462,7 @@ var NewModal = ({
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": title ? "modal-title" : void 0,
-      children: /* @__PURE__ */ jsxs5(
+      children: /* @__PURE__ */ jsxs6(
         Col,
         {
           onClick: (e) => e.stopPropagation(),
@@ -1349,7 +1481,7 @@ var NewModal = ({
             maxHeight: "90vh"
           },
           children: [
-            showHeader && /* @__PURE__ */ jsxs5(
+            showHeader && /* @__PURE__ */ jsxs6(
               Row,
               {
                 ref: headerRef,
@@ -1365,15 +1497,15 @@ var NewModal = ({
                 onPointerDown: startDrag,
                 "aria-grabbed": isDraggable ? isDragging : void 0,
                 children: [
-                  showHeaderIcon && showCloseButton && /* @__PURE__ */ jsx15("div", { style: { height: 38, width: 38 } }),
-                  /* @__PURE__ */ jsxs5(
+                  showHeaderIcon && showCloseButton && /* @__PURE__ */ jsx16("div", { style: { height: 38, width: 38 } }),
+                  /* @__PURE__ */ jsxs6(
                     Col,
                     {
                       gap: "8",
                       alignItems: showHeaderIcon ? "center" : "flex-start",
                       justifyContent: "center",
                       children: [
-                        showHeaderIcon && /* @__PURE__ */ jsx15(
+                        showHeaderIcon && /* @__PURE__ */ jsx16(
                           Icon,
                           {
                             name: icon,
@@ -1385,8 +1517,8 @@ var NewModal = ({
                             color: mainColor
                           }
                         ),
-                        title && /* @__PURE__ */ jsx15(Fragment2, { children: tag ? /* @__PURE__ */ jsxs5(Row, { alignItems: "center", gap: "8", children: [
-                          /* @__PURE__ */ jsx15(
+                        title && /* @__PURE__ */ jsx16(Fragment2, { children: tag ? /* @__PURE__ */ jsxs6(Row, { alignItems: "center", gap: "8", children: [
+                          /* @__PURE__ */ jsx16(
                             Text,
                             {
                               id: "modal-title",
@@ -1397,17 +1529,17 @@ var NewModal = ({
                               children: title
                             }
                           ),
-                          /* @__PURE__ */ jsx15(
+                          /* @__PURE__ */ jsx16(
                             Bubble,
                             {
                               size: "xs",
                               backgroundColor: tag.backgroundColor,
                               color: tag.color,
                               borderRadius: tag.borderRadius || "8px",
-                              children: /* @__PURE__ */ jsx15(Text, { size: "11px", variant: tag.color || void 0, children: tag.label })
+                              children: /* @__PURE__ */ jsx16(Text, { size: "11px", variant: tag.color || void 0, children: tag.label })
                             }
                           )
-                        ] }) : /* @__PURE__ */ jsx15(
+                        ] }) : /* @__PURE__ */ jsx16(
                           Text,
                           {
                             id: "modal-title",
@@ -1418,11 +1550,11 @@ var NewModal = ({
                             children: title
                           }
                         ) }),
-                        subTitle && /* @__PURE__ */ jsx15(Text, { align: "center", size: "s", weight: "400", children: subTitle })
+                        subTitle && /* @__PURE__ */ jsx16(Text, { align: "center", size: "s", weight: "400", children: subTitle })
                       ]
                     }
                   ),
-                  showCloseButton && /* @__PURE__ */ jsx15(
+                  showCloseButton && /* @__PURE__ */ jsx16(
                     Icon,
                     {
                       name: "xmark",
@@ -1436,7 +1568,7 @@ var NewModal = ({
                 ]
               }
             ),
-            children && /* @__PURE__ */ jsx15(
+            children && /* @__PURE__ */ jsx16(
               Col,
               {
                 fullWidth: true,
@@ -1448,8 +1580,8 @@ var NewModal = ({
                 children
               }
             ),
-            (leftButtonLabel || rightButtonLabel) && /* @__PURE__ */ jsxs5(Row, { gap: "16", fullWidth: true, children: [
-              leftButtonLabel && /* @__PURE__ */ jsx15(
+            (leftButtonLabel || rightButtonLabel) && /* @__PURE__ */ jsxs6(Row, { gap: "16", fullWidth: true, children: [
+              leftButtonLabel && /* @__PURE__ */ jsx16(Row, { flex: "1", children: /* @__PURE__ */ jsx16(
                 Button,
                 {
                   outline: true,
@@ -1461,8 +1593,22 @@ var NewModal = ({
                   },
                   children: leftButtonLabel
                 }
-              ),
-              rightButtonLabel && /* @__PURE__ */ jsx15(
+              ) }),
+              rightButtonLabel && /* @__PURE__ */ jsx16(Row, { flex: "1", children: confirmDisabled && rightButtonDisabledTooltip ? /* @__PURE__ */ jsx16(Tooltip, { data: [rightButtonDisabledTooltip], children: /* @__PURE__ */ jsx16(
+                Button,
+                {
+                  outline: isOutline,
+                  onClick: rightButtonAction,
+                  style: {
+                    width: "100%",
+                    backgroundColor: "lightgray",
+                    border: "1px solid lightgray"
+                  },
+                  isLoading,
+                  disabled: true,
+                  children: rightButtonLabel
+                }
+              ) }) : /* @__PURE__ */ jsx16(
                 Button,
                 {
                   outline: isOutline,
@@ -1476,7 +1622,7 @@ var NewModal = ({
                   disabled: confirmDisabled,
                   children: rightButtonLabel
                 }
-              )
+              ) })
             ] })
           ]
         }
@@ -1486,10 +1632,10 @@ var NewModal = ({
 };
 // src/Components/Drawer/Drawer.tsx
-import { useEffect as useEffect4, useRef as useRef4, useState as useState3 } from "react";
-import styled12 from "styled-components";
-import { jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
-var StyledOverlay = styled12.div`
+import { useEffect as useEffect4, useRef as useRef4, useState as useState4 } from "react";
+import styled13 from "styled-components";
+import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
+var StyledOverlay = styled13.div`
   position: fixed;
   inset: 0;
   z-index: 1000;
@@ -1499,7 +1645,7 @@ var StyledOverlay = styled12.div`
   transition: background 220ms ease-out;
   pointer-events: ${({ $visible }) => $visible ? "auto" : "none"};
 `;
-var StyledPanel = styled12.div`
+var StyledPanel = styled13.div`
   width: ${({ $width }) => $width};
   max-width: 90vw;
   height: 100%;
@@ -1515,7 +1661,7 @@ var StyledPanel = styled12.div`
   transition: transform 220ms ease-out;
   border-radius: 8px 0 0 8px;
 `;
-var ScrollableContent = styled12.div`
+var ScrollableContent = styled13.div`
   flex: 1 1 auto;
   overflow-y: auto;
   min-height: 0;
@@ -1545,8 +1691,8 @@ var Drawer = ({
   footer,
   stretchContent = false
 }) => {
-  const [isRendered, setIsRendered] = useState3(showDrawer);
-  const [isVisible, setIsVisible] = useState3(false);
+  const [isRendered, setIsRendered] = useState4(showDrawer);
+  const [isVisible, setIsVisible] = useState4(false);
   const panelRef = useRef4(null);
   useEffect4(() => {
     if (showDrawer) {
@@ -1560,7 +1706,7 @@ var Drawer = ({
     if (!showDrawer) setIsRendered(false);
   };
   if (!isRendered) return null;
-  return /* @__PURE__ */ jsx16(StyledOverlay, { role: "dialog", onClick: closeDrawer, $visible: isVisible, children: /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsx17(StyledOverlay, { role: "dialog", onClick: closeDrawer, $visible: isVisible, children: /* @__PURE__ */ jsxs7(
     StyledPanel,
     {
       ref: panelRef,
@@ -1569,9 +1715,9 @@ var Drawer = ({
       $width: width,
       $visible: isVisible,
       children: [
-        /* @__PURE__ */ jsxs6(Row, { alignItems: "center", justifyContent: "space-between", children: [
-          /* @__PURE__ */ jsx16(Text, { weight: "bold", size: "m", color: "black", children: title }),
-          /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsxs7(Row, { alignItems: "center", justifyContent: "space-between", children: [
+          /* @__PURE__ */ jsx17(Text, { weight: "bold", size: "m", color: "black", children: title }),
+          /* @__PURE__ */ jsx17(
             Icon,
             {
               name: "xmark",
@@ -1582,12 +1728,12 @@ var Drawer = ({
             }
           )
         ] }),
-        title && /* @__PURE__ */ jsx16(Divider, { orientation: "horizontal", thickness: "1px" }),
-        /* @__PURE__ */ jsx16(ScrollableContent, { children: children && /* @__PURE__ */ jsx16(Col, { fullWidth: true, fullHeight: stretchContent, children }) }),
-        /* @__PURE__ */ jsx16(Divider, { orientation: "horizontal", thickness: "1px" }),
+        title && /* @__PURE__ */ jsx17(Divider, { orientation: "horizontal", thickness: "1px" }),
+        /* @__PURE__ */ jsx17(ScrollableContent, { children: children && /* @__PURE__ */ jsx17(Col, { fullWidth: true, fullHeight: stretchContent, children }) }),
+        /* @__PURE__ */ jsx17(Divider, { orientation: "horizontal", thickness: "1px" }),
         footer,
-        (leftButtonLabel || rightButtonLabel) && /* @__PURE__ */ jsxs6(Row, { gap: "12", fullWidth: true, children: [
-          leftButtonLabel && /* @__PURE__ */ jsx16(
+        (leftButtonLabel || rightButtonLabel) && /* @__PURE__ */ jsxs7(Row, { gap: "12", fullWidth: true, children: [
+          leftButtonLabel && /* @__PURE__ */ jsx17(
             Button,
             {
               outline: leftOutline,
@@ -1598,7 +1744,7 @@ var Drawer = ({
               children: leftButtonLabel
             }
           ),
-          rightButtonLabel && /* @__PURE__ */ jsx16(
+          rightButtonLabel && /* @__PURE__ */ jsx17(
             Button,
             {
               outline: rightOutline,
@@ -1619,11 +1765,11 @@ var Drawer = ({
 // src/Components/Toast/Toaster.tsx
 import { useSyncExternalStore } from "react";
 import { createPortal } from "react-dom";
-import styled14 from "styled-components";
+import styled15 from "styled-components";
 // src/Components/Toast/ToastCard.tsx
-import { useCallback as useCallback2, useEffect as useEffect5, useState as useState4 } from "react";
-import styled13, { keyframes as keyframes2 } from "styled-components";
+import { useCallback as useCallback2, useEffect as useEffect5, useState as useState5 } from "react";
+import styled14, { keyframes as keyframes2 } from "styled-components";
 // src/Components/Toast/toastStore.ts
 var DEFAULT_TIMEOUT_BY_TYPE = {
@@ -1668,10 +1814,10 @@ var dismissToast = (id) => {
 };
 // src/Components/Toast/ToastCard.tsx
-import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
 var EXIT_DURATION = 180;
 var ToastCard = ({ toastItem }) => {
-  const [isExiting, setIsExiting] = useState4(false);
+  const [isExiting, setIsExiting] = useState5(false);
   const handleDismiss = useCallback2(() => {
     setIsExiting(true);
     setTimeout(() => dismissToast(toastItem.id), EXIT_DURATION);
@@ -1681,7 +1827,7 @@ var ToastCard = ({ toastItem }) => {
     return () => clearTimeout(dismissTimer);
   }, [handleDismiss, toastItem.timeOut]);
   const { icon, accent, background } = TOAST[toastItem.type];
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     Card,
     {
       $accent: accent,
@@ -1690,19 +1836,19 @@ var ToastCard = ({ toastItem }) => {
       role: "status",
       onClick: toastItem.onClick,
       children: [
-        /* @__PURE__ */ jsx17(IconBadge, { $background: background, children: /* @__PURE__ */ jsx17(Icon, { name: icon, family: "regular", size: "m", color: accent }) }),
-        /* @__PURE__ */ jsxs7(Content, { children: [
-          toastItem.title && /* @__PURE__ */ jsx17(Text, { size: "s", weight: "700", children: toastItem.title }),
-          /* @__PURE__ */ jsx17(Text, { size: "s", children: toastItem.message })
+        /* @__PURE__ */ jsx18(IconBadge, { $background: background, children: /* @__PURE__ */ jsx18(Icon, { name: icon, family: "regular", size: "m", color: accent }) }),
+        /* @__PURE__ */ jsxs8(Content, { children: [
+          toastItem.title && /* @__PURE__ */ jsx18(Text, { size: "s", weight: "700", children: toastItem.title }),
+          /* @__PURE__ */ jsx18(Text, { size: "s", children: toastItem.message })
         ] }),
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18(
           DismissButton,
           {
             onClick: (event) => {
               event.stopPropagation();
               handleDismiss();
             },
-            children: /* @__PURE__ */ jsx17(
+            children: /* @__PURE__ */ jsx18(
               Icon,
               {
                 name: "xmark",
@@ -1714,7 +1860,7 @@ var ToastCard = ({ toastItem }) => {
             )
           }
         ),
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18(
           ProgressBar,
           {
             $accent: accent,
@@ -1760,7 +1906,7 @@ var shrink = keyframes2`
   from { transform: scaleX(1); }
   to { transform: scaleX(0); }
 `;
-var Card = styled13.div`
+var Card = styled14.div`
   position: relative;
   display: flex;
   align-items: flex-start;
@@ -1777,13 +1923,13 @@ var Card = styled13.div`
   animation: ${({ $isExiting }) => $isExiting ? slideOut : slideIn} 180ms
     ease-out forwards;
 `;
-var DismissButton = styled13.span`
+var DismissButton = styled14.span`
   position: absolute;
   top: 10px;
   right: 10px;
   cursor: pointer;
 `;
-var IconBadge = styled13.div`
+var IconBadge = styled14.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1793,7 +1939,7 @@ var IconBadge = styled13.div`
   background: ${({ $background }) => $background};
   flex-shrink: 0;
 `;
-var Content = styled13.div`
+var Content = styled14.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -1802,7 +1948,7 @@ var Content = styled13.div`
   min-width: 0;
   min-height: 28px;
 `;
-var ProgressBar = styled13.div`
+var ProgressBar = styled14.div`
   position: absolute;
   left: 0;
   bottom: 0;
@@ -1815,16 +1961,16 @@ var ProgressBar = styled13.div`
 `;
 // src/Components/Toast/Toaster.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var Toaster = () => {
   const toasts2 = useSyncExternalStore(subscribeToasts, getToastsSnapshot);
   if (toasts2.length === 0) return null;
   return createPortal(
-    /* @__PURE__ */ jsx18(Stack, { "aria-live": "polite", children: toasts2.map((toastItem) => /* @__PURE__ */ jsx18(ToastCard, { toastItem }, toastItem.id)) }),
+    /* @__PURE__ */ jsx19(Stack, { "aria-live": "polite", children: toasts2.map((toastItem) => /* @__PURE__ */ jsx19(ToastCard, { toastItem }, toastItem.id)) }),
     document.body
   );
 };
-var Stack = styled14.div`
+var Stack = styled15.div`
   position: fixed;
   right: 24px;
   bottom: 24px;
@@ -1844,8 +1990,8 @@ var toast = {
 };
 // src/Components/TagBubble/TagBubble.tsx
-import styled15 from "styled-components";
-import { jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
+import styled16 from "styled-components";
+import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
 var sizeToPx = {
   xxs: 10,
   xs: 12,
@@ -1855,7 +2001,7 @@ var sizeToPx = {
   xl: 20,
   xxl: 22
 };
-var Wrapper2 = styled15.div`
+var Wrapper2 = styled16.div`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1870,20 +2016,20 @@ var Wrapper2 = styled15.div`
   box-shadow: ${(p) => p.$hasShadow ? "0 2px 15px 0 rgba(198, 198, 198, 0.25)" : "none"};
 `;
-var Dot = styled15.span`
+var Dot = styled16.span`
   width: ${(p) => p.$size}px;
   height: ${(p) => p.$size}px;
   border-radius: 999px;
   background: ${(p) => colors[p.$color] || p.$color || colors.grey_400};
   flex: 0 0 auto;
 `;
-var Label = styled15.span`
+var Label = styled16.span`
   font-size: ${(p) => p.$fontSize};
   font-weight: ${(p) => p.$weight};
   color: ${(p) => colors[p.$color] || p.$color || colors.text};
   white-space: nowrap;
 `;
-var Count = styled15.span`
+var Count = styled16.span`
   padding: ${(p) => p.$countPadding};
   border-radius: 999px;
@@ -1948,7 +2094,7 @@ var TagBubble = (_a) => {
   const showCircle = !hideCircle;
   const showCount = !hideCount && count !== void 0 && count !== null;
   const dotColor = isActive ? circleColorActive : circleColorInactive;
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     Wrapper2,
     __spreadProps(__spreadValues({
       onClick,
@@ -1961,8 +2107,8 @@ var TagBubble = (_a) => {
       style: { cursor: onClick ? "pointer" : "default" }
     }, rest), {
       children: [
-        showCircle && /* @__PURE__ */ jsx19(Dot, { $size: circleSize, $color: dotColor }),
-        /* @__PURE__ */ jsx19(
+        showCircle && /* @__PURE__ */ jsx20(Dot, { $size: circleSize, $color: dotColor }),
+        /* @__PURE__ */ jsx20(
           Label,
           {
             $fontSize: resolveFontSize(labelSize),
@@ -1971,7 +2117,7 @@ var TagBubble = (_a) => {
             children: label
           }
         ),
-        showCount && /* @__PURE__ */ jsx19(
+        showCount && /* @__PURE__ */ jsx20(
           Count,
           {
             $bg: countBg,
@@ -1987,8 +2133,8 @@ var TagBubble = (_a) => {
 };
 // src/Components/Link/Link.tsx
-import styled16 from "styled-components";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import styled17 from "styled-components";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var textSizes4 = {
   xxs: ".4em",
   xs: ".6em",
@@ -2008,7 +2154,7 @@ var shouldForwardProp7 = (prop) => ![
   "align",
   "underline"
 ].includes(prop);
-var StyledLink = styled16.a.withConfig({ shouldForwardProp: shouldForwardProp7 })`
+var StyledLink = styled17.a.withConfig({ shouldForwardProp: shouldForwardProp7 })`
   font-size: ${(props) => textSizes4[props.size] || props.size || "1em"};
   font-weight: ${(props) => props.fontWeight || "700"};
   color: ${(props) => colors[props.variant] || props.color || colors.primary};
@@ -2038,7 +2184,7 @@ var Link = (_a) => {
     "size",
     "variant"
   ]);
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     StyledLink,
     __spreadProps(__spreadValues({
       href: url,
@@ -2054,13 +2200,13 @@ var Link = (_a) => {
 };
 // src/Components/Avatar/Avatar.tsx
-import { useState as useState5 } from "react";
-import styled18 from "styled-components";
+import { useState as useState6 } from "react";
+import styled19 from "styled-components";
 // src/Components/Image/Image.tsx
-import styled17 from "styled-components";
-import { jsx as jsx21 } from "react/jsx-runtime";
-var StyledImage = styled17.img`
+import styled18 from "styled-components";
+import { jsx as jsx22 } from "react/jsx-runtime";
+var StyledImage = styled18.img`
   object-fit: ${(props) => props.$objectFit || "cover"};
   align-self: ${(props) => props.$alignSelf || "center"};
   border-radius: ${(props) => props.$borderRadius || "5px"};
@@ -2088,7 +2234,7 @@ var Image2 = (_a) => {
     "alignSelf",
     "style"
   ]);
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     StyledImage,
     __spreadValues({
       src,
@@ -2104,13 +2250,13 @@ var Image2 = (_a) => {
 };
 // src/Components/Avatar/Avatar.tsx
-import { jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
-var Wrapper3 = styled18.div`
+import { jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
+var Wrapper3 = styled19.div`
   position: relative;
   display: inline-flex;
   flex-shrink: 0;
 `;
-var Container = styled18.div`
+var Container = styled19.div`
   width: ${(props) => props.$size}px;
   height: ${(props) => props.$size}px;
   border-radius: ${(props) => props.$shape === "circle" ? "50%" : "4px"};
@@ -2121,7 +2267,7 @@ var Container = styled18.div`
   flex-shrink: 0;
   overflow: hidden;
 `;
-var BadgeSlot = styled18.div`
+var BadgeSlot = styled19.div`
   position: absolute;
   right: 0;
   bottom: 0;
@@ -2135,12 +2281,12 @@ var BadgeSlot = styled18.div`
   box-shadow: 0 2px 6px ${colors.blue_950}66;
   line-height: 0;
 `;
-var BadgeIcon = styled18.i`
+var BadgeIcon = styled19.i`
   color: ${(props) => colors[props.$color] || props.$color};
   font-size: ${(props) => Math.round(props.$size * 0.2)}px;
   line-height: 2;
 `;
-var AvatarBadgeSlot = styled18.div`
+var AvatarBadgeSlot = styled19.div`
   position: absolute;
   right: 0;
   bottom: 0;
@@ -2150,12 +2296,12 @@ var AvatarBadgeSlot = styled18.div`
   box-shadow: 0 2px 6px ${colors.blue_950}66;
   line-height: 0;
 `;
-var MainIcon = styled18.i`
+var MainIcon = styled19.i`
   color: ${(props) => props.$color};
   font-size: ${(props) => Math.round(props.$size * 0.45)}px;
   line-height: 1;
 `;
-var Initials = styled18.span`
+var Initials = styled19.span`
   color: ${(props) => props.$textColor};
   font-weight: 600;
   font-size: ${(props) => Math.round(props.$size * 0.4)}px;
@@ -2180,20 +2326,20 @@ var Avatar = ({
   avatarBadge
 }) => {
   var _a, _b, _c, _d;
-  const [hasImageError, setHasImageError] = useState5(false);
+  const [hasImageError, setHasImageError] = useState6(false);
   const resolvedBackground = resolveColor3(backgroundColor, colors.grey_300);
   const resolvedText = resolveColor3(textColor, colors.dark);
   const initials = getInitials(name);
   const sizePx = `${size}px`;
   const borderRadius = shape === "circle" ? "50%" : "4px";
-  return /* @__PURE__ */ jsxs9(Wrapper3, { children: [
-    /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs10(Wrapper3, { children: [
+    /* @__PURE__ */ jsx23(
       Container,
       {
         $size: size,
         $shape: shape,
         $backgroundColor: resolvedBackground,
-        children: src && !hasImageError ? /* @__PURE__ */ jsx22(
+        children: src && !hasImageError ? /* @__PURE__ */ jsx23(
           Image2,
           {
             src,
@@ -2204,7 +2350,7 @@ var Avatar = ({
             objectFit,
             onError: () => setHasImageError(true)
           }
-        ) : icon ? /* @__PURE__ */ jsx22(
+        ) : icon ? /* @__PURE__ */ jsx23(
           MainIcon,
           {
             $size: size,
@@ -2213,10 +2359,10 @@ var Avatar = ({
             role: "img",
             "aria-label": name
           }
-        ) : /* @__PURE__ */ jsx22(Initials, { $textColor: resolvedText, $size: size, children: initials })
+        ) : /* @__PURE__ */ jsx23(Initials, { $textColor: resolvedText, $size: size, children: initials })
       }
     ),
-    avatarBadge ? /* @__PURE__ */ jsx22(AvatarBadgeSlot, { $size: size, children: /* @__PURE__ */ jsx22(
+    avatarBadge ? /* @__PURE__ */ jsx23(AvatarBadgeSlot, { $size: size, children: /* @__PURE__ */ jsx23(
       Avatar,
       {
         name: avatarBadge.name,
@@ -2225,14 +2371,14 @@ var Avatar = ({
         textColor: avatarBadge.textColor,
         size: Math.round(size * 0.4)
       }
-    ) }) : badge && /* @__PURE__ */ jsx22(
+    ) }) : badge && /* @__PURE__ */ jsx23(
       BadgeSlot,
       {
         $size: size,
         $bg: (_b = badge.backgroundColor) != null ? _b : colors.white,
         title: badge.label,
         "aria-label": badge.label,
-        children: /* @__PURE__ */ jsx22(
+        children: /* @__PURE__ */ jsx23(
           BadgeIcon,
           {
             $size: size,
@@ -2246,11 +2392,11 @@ var Avatar = ({
 };
 // src/Components/Select/Select.tsx
-import { useState as useState6, useRef as useRef5, useEffect as useEffect6 } from "react";
+import { useState as useState7, useRef as useRef5, useEffect as useEffect6 } from "react";
 import ReactDOM from "react-dom";
-import styled19 from "styled-components";
-import { jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
-var StyledContainer = styled19.div.withConfig({
+import styled20 from "styled-components";
+import { jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
+var StyledContainer = styled20.div.withConfig({
   shouldForwardProp: (prop) => !["width", "noFlex", "label"].includes(prop)
 })`
   display: flex;
@@ -2261,11 +2407,11 @@ var StyledContainer = styled19.div.withConfig({
   min-width: 100px;
   gap: ${(props) => props.label ? "6px" : "0"};
 `;
-var SelectWrapper = styled19.div`
+var SelectWrapper = styled20.div`
   position: relative;
   width: 100%;
 `;
-var SelectInput = styled19.div`
+var SelectInput = styled20.div`
   width: 100%;
   border-radius: 5px;
   cursor: ${(props) => props.disabled ? "not-allowed" : "pointer"};
@@ -2299,13 +2445,13 @@ var SelectInput = styled19.div`
     flex-shrink: 0;
   }
 `;
-var ChevronIcon = styled19(Icon).withConfig({
+var ChevronIcon = styled20(Icon).withConfig({
   shouldForwardProp: (prop) => prop !== "isOpen"
 })`
   transition: transform 0.3s ease;
   transform: ${(props) => props.isOpen ? "rotate(180deg)" : "rotate(0deg)"};
 `;
-var Dropdown = styled19.div`
+var Dropdown = styled20.div`
   position: absolute;
   border: 1px solid ${colors.grey_200};
   border-radius: 5px;
@@ -2317,10 +2463,10 @@ var Dropdown = styled19.div`
   flex-direction: column;
   font-size: 12px;
 `;
-var DropdownList = styled19.div`
+var DropdownList = styled20.div`
   overflow-y: scroll;
 `;
-var SearchInput = styled19.input`
+var SearchInput = styled20.input`
   position: relative;
   width: 100%;
   padding: 8px;
@@ -2335,7 +2481,7 @@ var SearchInput = styled19.input`
       0 0 10px rgba(24, 49, 75, 0.188);
   }
 `;
-var Option = styled19.div`
+var Option = styled20.div`
   padding: 8px;
   cursor: pointer;
   background-color: ${(props) => props.$isActive ? colors.grey_100 : "transparent"};
@@ -2359,10 +2505,10 @@ var Select = ({
   hideSearchBar,
   noFlex
 }) => {
-  const [isOpen, setIsOpen] = useState6(false);
-  const [searchTerm, setSearchTerm] = useState6("");
-  const [dropdownPosition, setDropdownPosition] = useState6({});
-  const [activeIndex, setActiveIndex] = useState6(0);
+  const [isOpen, setIsOpen] = useState7(false);
+  const [searchTerm, setSearchTerm] = useState7("");
+  const [dropdownPosition, setDropdownPosition] = useState7({});
+  const [activeIndex, setActiveIndex] = useState7(0);
   const containerRef = useRef5(null);
   const dropdownRef = useRef5(null);
   const searchInputRef = useRef5(null);
@@ -2450,14 +2596,14 @@ var Select = ({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [isOpen]);
-  return /* @__PURE__ */ jsxs10(StyledContainer, { width, noFlex, label, children: [
-    /* @__PURE__ */ jsxs10(Text, { size: "xs", children: [
+  return /* @__PURE__ */ jsxs11(StyledContainer, { width, noFlex, label, children: [
+    /* @__PURE__ */ jsxs11(Text, { size: "xs", children: [
       label,
       " ",
-      required && /* @__PURE__ */ jsx23(Text, { style: { color: "red" }, children: "*" })
+      required && /* @__PURE__ */ jsx24(Text, { style: { color: "red" }, children: "*" })
     ] }),
-    /* @__PURE__ */ jsxs10(SelectWrapper, { ref: containerRef, onKeyDown: handleKeyDown, tabIndex: 0, children: [
-      /* @__PURE__ */ jsxs10(
+    /* @__PURE__ */ jsxs11(SelectWrapper, { ref: containerRef, onKeyDown: handleKeyDown, tabIndex: 0, children: [
+      /* @__PURE__ */ jsxs11(
         SelectInput,
         {
           height,
@@ -2466,13 +2612,13 @@ var Select = ({
           onClick: handleToggle,
           disabled,
           children: [
-            /* @__PURE__ */ jsx23("span", { children: selectedOption ? selectedOption.label : placeholder }),
-            /* @__PURE__ */ jsx23(ChevronIcon, { name: "chevron-down", isOpen })
+            /* @__PURE__ */ jsx24("span", { children: selectedOption ? selectedOption.label : placeholder }),
+            /* @__PURE__ */ jsx24(ChevronIcon, { name: "chevron-down", isOpen })
           ]
         }
       ),
       isOpen && ReactDOM.createPortal(
-        /* @__PURE__ */ jsxs10(
+        /* @__PURE__ */ jsxs11(
           Dropdown,
           {
             ref: dropdownRef,
@@ -2482,7 +2628,7 @@ var Select = ({
               width: dropdownPosition.width
             },
             children: [
-              !hideSearchBar && /* @__PURE__ */ jsx23(
+              !hideSearchBar && /* @__PURE__ */ jsx24(
                 SearchInput,
                 {
                   ref: searchInputRef,
@@ -2492,7 +2638,7 @@ var Select = ({
                   onChange: handleSearch
                 }
               ),
-              /* @__PURE__ */ jsx23(DropdownList, { children: filteredOptions.map((option, index) => /* @__PURE__ */ jsx23(
+              /* @__PURE__ */ jsx24(DropdownList, { children: filteredOptions.map((option, index) => /* @__PURE__ */ jsx24(
                 Option,
                 {
                   $isActive: index === activeIndex,
@@ -2518,10 +2664,10 @@ import {
   useEffect as useEffect7,
   useImperativeHandle,
   useRef as useRef6,
-  useState as useState7
+  useState as useState8
 } from "react";
-import styled20 from "styled-components";
-import { Fragment as Fragment3, jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
+import styled21 from "styled-components";
+import { Fragment as Fragment3, jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
 var shouldForwardProp8 = (prop) => ![
   "width",
   "fullWidth",
@@ -2534,7 +2680,7 @@ var shouldForwardProp8 = (prop) => ![
   "asTextArea",
   "fontSize"
 ].includes(prop);
-var StyledContainer2 = styled20.div.withConfig({
+var StyledContainer2 = styled21.div.withConfig({
   shouldForwardProp: shouldForwardProp8
 })`
   display: flex;
@@ -2544,7 +2690,7 @@ var StyledContainer2 = styled20.div.withConfig({
   max-width: ${(props) => props.width || "100%"};
   gap: 6px;
 `;
-var StyledInput = styled20.input.withConfig({
+var StyledInput = styled21.input.withConfig({
   shouldForwardProp: shouldForwardProp8
 })`
   max-width: ${(props) => props.width || "100%"};
@@ -2572,7 +2718,7 @@ var StyledInput = styled20.input.withConfig({
     color: ${colors.grey_500};
   }
 `;
-var StyledTextarea = styled20.textarea.withConfig({
+var StyledTextarea = styled21.textarea.withConfig({
   shouldForwardProp: shouldForwardProp8
 })`
   max-width: ${(props) => props.width || "100%"};
@@ -2599,7 +2745,7 @@ var StyledTextarea = styled20.textarea.withConfig({
     color: ${colors.grey_500};
   }
 `;
-var EyeButton = styled20.button`
+var EyeButton = styled21.button`
   background: none;
   border: none;
   position: absolute;
@@ -2611,11 +2757,11 @@ var EyeButton = styled20.button`
   display: flex;
   align-items: center;
 `;
-var InputWrapper = styled20.div`
+var InputWrapper = styled21.div`
   position: relative;
   width: 100%;
 `;
-var CalendarButton = styled20(EyeButton)`
+var CalendarButton = styled21(EyeButton)`
   color: ${colors.grey_500};
   &:disabled {
@@ -2623,7 +2769,7 @@ var CalendarButton = styled20(EyeButton)`
     opacity: 0.5;
   }
 `;
-var HiddenDateInput = styled20.input`
+var HiddenDateInput = styled21.input`
   position: absolute;
   inset: 0;
   opacity: 0;
@@ -2631,7 +2777,7 @@ var HiddenDateInput = styled20.input`
   height: 100%;
   width: 100%;
 `;
-var SearchIconLeft = styled20.span`
+var SearchIconLeft = styled21.span`
   position: absolute;
   left: 10px;
   top: 0;
@@ -2642,7 +2788,7 @@ var SearchIconLeft = styled20.span`
   pointer-events: none;
   z-index: 1;
 `;
-var SearchIconRight = styled20.span`
+var SearchIconRight = styled21.span`
   position: absolute;
   right: 10px;
   top: 0;
@@ -2759,8 +2905,8 @@ var Input = forwardRef3((props, ref) => {
   const inputName = otherProps == null ? void 0 : otherProps.name;
   const { min, max, step } = otherProps || {};
   const _b = otherProps || {}, { name } = _b, forwardProps = __objRest(_b, ["name"]);
-  const [showPassword, setShowPassword] = useState7(false);
-  const [displayDateValue, setDisplayDateValue] = useState7("");
+  const [showPassword, setShowPassword] = useState8(false);
+  const [displayDateValue, setDisplayDateValue] = useState8("");
   const nativeDateRef = useRef6(null);
   const innerRef = useRef6(null);
   useImperativeHandle(
@@ -2847,21 +2993,21 @@ var Input = forwardRef3((props, ref) => {
       }
     }
   };
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     StyledContainer2,
     __spreadProps(__spreadValues({
       noFlex
     }, forwardProps), {
       children: [
-        label && /* @__PURE__ */ jsxs11(Text_default, { size: "xs", children: [
+        label && /* @__PURE__ */ jsxs12(Text_default, { size: "xs", children: [
           label,
           " ",
-          required && /* @__PURE__ */ jsx24("span", { style: { color: "red" }, children: "*" })
+          required && /* @__PURE__ */ jsx25("span", { style: { color: "red" }, children: "*" })
         ] }),
-        /* @__PURE__ */ jsxs11(InputWrapper, { children: [
-          isSearch && /* @__PURE__ */ jsx24(SearchIconLeft, { children: /* @__PURE__ */ jsx24(Icon_default, { name: "magnifying-glass", size: "s", color: "grey_500" }) }),
-          isDate ? /* @__PURE__ */ jsxs11(Fragment3, { children: [
-            /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsxs12(InputWrapper, { children: [
+          isSearch && /* @__PURE__ */ jsx25(SearchIconLeft, { children: /* @__PURE__ */ jsx25(Icon_default, { name: "magnifying-glass", size: "s", color: "grey_500" }) }),
+          isDate ? /* @__PURE__ */ jsxs12(Fragment3, { children: [
+            /* @__PURE__ */ jsx25(
               StyledInput,
               __spreadProps(__spreadValues({
                 id: inputId,
@@ -2885,7 +3031,7 @@ var Input = forwardRef3((props, ref) => {
                 step: void 0
               })
             ),
-            /* @__PURE__ */ jsx24(
+            /* @__PURE__ */ jsx25(
               HiddenDateInput,
               {
                 ref: nativeDateRef,
@@ -2902,14 +3048,14 @@ var Input = forwardRef3((props, ref) => {
                 name: inputName
               }
             ),
-            /* @__PURE__ */ jsx24(
+            /* @__PURE__ */ jsx25(
               CalendarButton,
               {
                 type: "button",
                 onClick: openNativePicker,
                 "aria-label": "Ouvrir le calendrier",
                 disabled,
-                children: /* @__PURE__ */ jsx24(
+                children: /* @__PURE__ */ jsx25(
                   Icon_default,
                   {
                     family: "regular",
@@ -2920,7 +3066,7 @@ var Input = forwardRef3((props, ref) => {
                 )
               }
             )
-          ] }) : /* @__PURE__ */ jsx24(
+          ] }) : /* @__PURE__ */ jsx25(
             Component,
             __spreadValues({
               id: inputId,
@@ -2936,17 +3082,17 @@ var Input = forwardRef3((props, ref) => {
               style: computedStyle
             }, forwardProps)
           ),
-          isPassword && /* @__PURE__ */ jsx24(
+          isPassword && /* @__PURE__ */ jsx25(
             EyeButton,
             {
               type: "button",
               tabIndex: -1,
               onClick: () => setShowPassword((v) => !v),
               "aria-label": showPassword ? "Masquer le mot de passe" : "Afficher le mot de passe",
-              children: showPassword ? /* @__PURE__ */ jsx24(Icon_default, { name: "eye-slash", size: "m", color: "grey_500" }) : /* @__PURE__ */ jsx24(Icon_default, { name: "eye", size: "m", color: "grey_500" })
+              children: showPassword ? /* @__PURE__ */ jsx25(Icon_default, { name: "eye-slash", size: "m", color: "grey_500" }) : /* @__PURE__ */ jsx25(Icon_default, { name: "eye", size: "m", color: "grey_500" })
             }
           ),
-          isSearch && hasSearchValue && onClear && /* @__PURE__ */ jsx24(SearchIconRight, { onClick: onClear, children: /* @__PURE__ */ jsx24(Icon_default, { name: "xmark", size: "s", color: "grey_500" }) })
+          isSearch && hasSearchValue && onClear && /* @__PURE__ */ jsx25(SearchIconRight, { onClick: onClear, children: /* @__PURE__ */ jsx25(Icon_default, { name: "xmark", size: "s", color: "grey_500" }) })
         ] })
       ]
     })
@@ -2956,9 +3102,9 @@ Input.displayName = "Input";
 // src/Components/Checkbox/Checkbox.tsx
 import { useId } from "react";
-import styled21 from "styled-components";
-import { jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
-var CheckboxContainer = styled21.div`
+import styled22 from "styled-components";
+import { jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
+var CheckboxContainer = styled22.div`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -2966,12 +3112,12 @@ var CheckboxContainer = styled21.div`
   gap: 8px;
   margin: ${(props) => props.margin || "0"};
 `;
-var StyledCheckbox = styled21.input.attrs({ type: "checkbox" })`
+var StyledCheckbox = styled22.input.attrs({ type: "checkbox" })`
   width: 14px;
   height: 14px;
   accent-color: ${(props) => colors[props.$variant || ""] || colors.secondary};
 `;
-var StyledLabel = styled21.label`
+var StyledLabel = styled22.label`
   cursor: ${(props) => props.disabled ? "not-allowed" : "pointer"};
 `;
 var Checkbox = ({
@@ -2985,8 +3131,8 @@ var Checkbox = ({
 }) => {
   const generatedId = useId();
   const uniqueId = `checkbox-${generatedId}`;
-  return /* @__PURE__ */ jsxs12(CheckboxContainer, { children: [
-    /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsxs13(CheckboxContainer, { children: [
+    /* @__PURE__ */ jsx26(
       StyledCheckbox,
       {
         id: uniqueId,
@@ -2996,28 +3142,28 @@ var Checkbox = ({
         $variant: variant
       }
     ),
-    /* @__PURE__ */ jsx25(StyledLabel, { htmlFor: uniqueId, disabled, children: /* @__PURE__ */ jsx25(Text_default, { size, children: label || children }) })
+    /* @__PURE__ */ jsx26(StyledLabel, { htmlFor: uniqueId, disabled, children: /* @__PURE__ */ jsx26(Text_default, { size, children: label || children }) })
   ] });
 };
 // src/Components/Radio/Radio.tsx
 import { useId as useId2 } from "react";
-import styled22 from "styled-components";
-import { jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
-var RadioContainer = styled22.div`
+import styled23 from "styled-components";
+import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
+var RadioContainer = styled23.div`
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 8px;
   margin: ${(props) => props.margin || "0"};
 `;
-var HiddenRadio = styled22.input.attrs({ type: "radio" })`
+var HiddenRadio = styled23.input.attrs({ type: "radio" })`
   opacity: 0;
   width: 0;
   height: 0;
   position: absolute;
 `;
-var CustomRadio = styled22.span`
+var CustomRadio = styled23.span`
   display: inline-block;
   vertical-align: middle;
   width: 22px;
@@ -3043,7 +3189,7 @@ var CustomRadio = styled22.span`
     transform: translate(-50%, -50%);
   }
 `;
-var StyledLabel2 = styled22.label`
+var StyledLabel2 = styled23.label`
   cursor: ${(props) => props.disabled ? "not-allowed" : "pointer"};
 `;
 var Radio = ({
@@ -3060,8 +3206,8 @@ var Radio = ({
   const color = colors[variant] || colors.blue_950;
   const generatedId = useId2();
   const uniqueId = `radio-${generatedId}`;
-  return /* @__PURE__ */ jsx26(RadioContainer, { children: /* @__PURE__ */ jsxs13(StyledLabel2, { htmlFor: uniqueId, disabled, children: [
-    /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(RadioContainer, { children: /* @__PURE__ */ jsxs14(StyledLabel2, { htmlFor: uniqueId, disabled, children: [
+    /* @__PURE__ */ jsx27(
       HiddenRadio,
       {
         id: uniqueId,
@@ -3072,21 +3218,21 @@ var Radio = ({
         value
       }
     ),
-    /* @__PURE__ */ jsx26(CustomRadio, { color, checked, disabled }),
-    /* @__PURE__ */ jsx26(Text_default, { size, children: label || children })
+    /* @__PURE__ */ jsx27(CustomRadio, { color, checked, disabled }),
+    /* @__PURE__ */ jsx27(Text_default, { size, children: label || children })
   ] }) });
 };
 // src/Components/Accordion/Accordion.tsx
-import { useState as useState8, useCallback as useCallback3 } from "react";
-import styled23 from "styled-components";
-import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
-var Wrapper4 = styled23.div`
+import { useState as useState9, useCallback as useCallback3 } from "react";
+import styled24 from "styled-components";
+import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
+var Wrapper4 = styled24.div`
   width: 100%;
   border-radius: 8px;
   overflow: hidden;
 `;
-var ItemWrapper = styled23.div`
+var ItemWrapper = styled24.div`
   width: 100%;
   border-bottom: 1px solid ${colors.grey_300};
   background-color: ${colors.white};
@@ -3097,7 +3243,7 @@ var ItemWrapper = styled23.div`
     border-bottom: none;
   }
 `;
-var Header = styled23.div`
+var Header = styled24.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -3111,13 +3257,13 @@ var Header = styled23.div`
     background-color: ${(p) => p.$disabled ? "transparent" : colors.grey_100};
   }
 `;
-var TriggerRow = styled23.div`
+var TriggerRow = styled24.div`
   display: flex;
   align-items: center;
   gap: 8px;
   flex: 1;
 `;
-var ContentPadding = styled23.div`
+var ContentPadding = styled24.div`
   padding: 8px;
 `;
 var Accordion = ({
@@ -3139,8 +3285,8 @@ var Accordion = ({
   backgroundHeader = colors.white
 }) => {
   const resolvedBackgroundHeader = typeof backgroundHeader === "string" && backgroundHeader in colors ? colors[backgroundHeader] : backgroundHeader;
-  const [internalOpen, setInternalOpen] = useState8(defaultOpen);
-  const [internalOpenId, setInternalOpenId] = useState8(
+  const [internalOpen, setInternalOpen] = useState9(defaultOpen);
+  const [internalOpenId, setInternalOpenId] = useState9(
     null
   );
   const isControlled = controlledOpen !== void 0;
@@ -3168,8 +3314,8 @@ var Accordion = ({
     [disabled, activeItemId, isMultiControlled, onItemToggle]
   );
   if (items) {
-    return /* @__PURE__ */ jsx27(Wrapper4, { children: items.map((item) => /* @__PURE__ */ jsxs14(ItemWrapper, { $bordered: bordered, children: [
-      /* @__PURE__ */ jsxs14(
+    return /* @__PURE__ */ jsx28(Wrapper4, { children: items.map((item) => /* @__PURE__ */ jsxs15(ItemWrapper, { $bordered: bordered, children: [
+      /* @__PURE__ */ jsxs15(
         Header,
         {
           $disabled: disabled,
@@ -3178,9 +3324,9 @@ var Accordion = ({
           "aria-expanded": activeItemId === item.id,
           onClick: () => toggleItem(item.id),
           children: [
-            /* @__PURE__ */ jsx27(TriggerRow, { children: /* @__PURE__ */ jsx27(Text, { size: "s", weight: "600", children: item.title }) }),
+            /* @__PURE__ */ jsx28(TriggerRow, { children: /* @__PURE__ */ jsx28(Text, { size: "s", weight: "600", children: item.title }) }),
             titleEnd,
-            /* @__PURE__ */ jsx27(
+            /* @__PURE__ */ jsx28(
               Icon,
               {
                 name: activeItemId === item.id ? "chevron-up" : "chevron-down",
@@ -3190,11 +3336,11 @@ var Accordion = ({
           ]
         }
       ),
-      /* @__PURE__ */ jsx27(Collapse, { open: activeItemId === item.id, maxHeight, children: /* @__PURE__ */ jsx27(ContentPadding, { children: item.content }) })
+      /* @__PURE__ */ jsx28(Collapse, { open: activeItemId === item.id, maxHeight, children: /* @__PURE__ */ jsx28(ContentPadding, { children: item.content }) })
     ] }, item.id)) });
   }
-  return /* @__PURE__ */ jsxs14(ItemWrapper, { $bordered: bordered, children: [
-    /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(ItemWrapper, { $bordered: bordered, children: [
+    /* @__PURE__ */ jsxs15(
       Header,
       {
         $disabled: disabled,
@@ -3203,7 +3349,7 @@ var Accordion = ({
         "aria-expanded": isOpen,
         onClick: handleToggle,
         children: [
-          needCheckbox && /* @__PURE__ */ jsx27(
+          needCheckbox && /* @__PURE__ */ jsx28(
             Checkbox,
             {
               value: checkboxValue,
@@ -3211,46 +3357,46 @@ var Accordion = ({
               disabled
             }
           ),
-          /* @__PURE__ */ jsx27(TriggerRow, { children: /* @__PURE__ */ jsx27(Text, { size: "s", weight: "600", children: title }) }),
+          /* @__PURE__ */ jsx28(TriggerRow, { children: /* @__PURE__ */ jsx28(Text, { size: "s", weight: "600", children: title }) }),
           titleEnd,
-          /* @__PURE__ */ jsx27(Icon, { name: isOpen ? "chevron-up" : "chevron-down", size: "m" })
+          /* @__PURE__ */ jsx28(Icon, { name: isOpen ? "chevron-up" : "chevron-down", size: "m" })
         ]
       }
     ),
-    /* @__PURE__ */ jsx27(Collapse, { open: isOpen, maxHeight, children: /* @__PURE__ */ jsx27(ContentPadding, { children }) })
+    /* @__PURE__ */ jsx28(Collapse, { open: isOpen, maxHeight, children: /* @__PURE__ */ jsx28(ContentPadding, { children }) })
   ] });
 };
 // src/Components/ColorPicker/ColorPicker.tsx
-import { forwardRef as forwardRef4, useState as useState9, useRef as useRef7, useEffect as useEffect8 } from "react";
-import styled24 from "styled-components";
-import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
+import { forwardRef as forwardRef4, useState as useState10, useRef as useRef7, useEffect as useEffect8 } from "react";
+import styled25 from "styled-components";
+import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
 var SIZES = {
   s: { swatch: 28, fontSize: 12, inputPadding: "6px 10px" },
   m: { swatch: 36, fontSize: 14, inputPadding: "8px 12px" },
   l: { swatch: 44, fontSize: 16, inputPadding: "10px 14px" }
 };
-var Container2 = styled24.div`
+var Container2 = styled25.div`
   display: flex;
   flex-direction: column;
   gap: 6px;
   width: 100%;
   opacity: ${(p) => p.$disabled ? 0.6 : 1};
 `;
-var InputRow = styled24.div`
+var InputRow = styled25.div`
   display: flex;
   align-items: stretch;
   gap: 8px;
   width: 100%;
 `;
-var SwatchLabel = styled24.label`
+var SwatchLabel = styled25.label`
   display: inline-flex;
   cursor: ${(p) => p.$disabled ? "not-allowed" : "pointer"};
   width: ${(p) => p.$size}px;
   height: ${(p) => p.$size}px;
   flex-shrink: 0;
 `;
-var Swatch = styled24.span`
+var Swatch = styled25.span`
   display: inline-block;
   width: 100%;
   height: 100%;
@@ -3260,7 +3406,7 @@ var Swatch = styled24.span`
   position: relative;
   overflow: hidden;
 `;
-var HiddenInput = styled24.input`
+var HiddenInput = styled25.input`
   position: absolute;
   top: 0;
   left: 0;
@@ -3271,7 +3417,7 @@ var HiddenInput = styled24.input`
   border: none;
   padding: 0;
 `;
-var HexInput = styled24.input`
+var HexInput = styled25.input`
   flex: 1;
   font-family: inherit;
   font-size: ${(p) => p.$fontSize}px;
@@ -3309,7 +3455,7 @@ var ColorPicker = forwardRef4(
     size = "m"
   }, ref) => {
     const innerRef = useRef7(null);
-    const [internalColor, setInternalColor] = useState9(defaultValue);
+    const [internalColor, setInternalColor] = useState10(defaultValue);
     const currentColor = value !== void 0 ? value : internalColor;
     const dims = SIZES[size];
     useEffect8(() => {
@@ -3327,10 +3473,10 @@ var ColorPicker = forwardRef4(
       }
       onChange == null ? void 0 : onChange(newColor);
     };
-    return /* @__PURE__ */ jsxs15(Container2, { $disabled: disabled, children: [
-      label && /* @__PURE__ */ jsx28(Text, { size: TEXT_SIZE_MAP[size], weight: "600", children: label }),
-      /* @__PURE__ */ jsxs15(InputRow, { children: [
-        /* @__PURE__ */ jsx28(SwatchLabel, { $disabled: disabled, $size: dims.swatch, children: /* @__PURE__ */ jsx28(Swatch, { $color: currentColor, children: /* @__PURE__ */ jsx28(
+    return /* @__PURE__ */ jsxs16(Container2, { $disabled: disabled, children: [
+      label && /* @__PURE__ */ jsx29(Text, { size: TEXT_SIZE_MAP[size], weight: "600", children: label }),
+      /* @__PURE__ */ jsxs16(InputRow, { children: [
+        /* @__PURE__ */ jsx29(SwatchLabel, { $disabled: disabled, $size: dims.swatch, children: /* @__PURE__ */ jsx29(Swatch, { $color: currentColor, children: /* @__PURE__ */ jsx29(
           HiddenInput,
           {
             ref: innerRef,
@@ -3340,7 +3486,7 @@ var ColorPicker = forwardRef4(
             disabled
           }
         ) }) }),
-        /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx29(
           HexInput,
           {
             type: "text",
@@ -3359,9 +3505,9 @@ ColorPicker.displayName = "ColorPicker";
 // src/Components/SliderInput/SliderInput.tsx
 import { forwardRef as forwardRef5 } from "react";
-import styled25 from "styled-components";
-import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
-var Container3 = styled25.label`
+import styled26 from "styled-components";
+import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
+var Container3 = styled26.label`
   display: flex;
   flex-direction: column;
   gap: 4px;
@@ -3380,19 +3526,19 @@ var THUMB = `
   cursor: inherit;
   transition: transform 160ms ease;
 `;
-var TrackWrapper = styled25.span`
+var TrackWrapper = styled26.span`
   position: relative;
   width: 100%;
   padding-top: 24px;
 `;
-var ValueBubble = styled25.span`
+var ValueBubble = styled26.span`
   position: absolute;
   top: 0;
   left: ${(p) => p.$left}%;
   transform: translateX(-50%);
   pointer-events: none;
 `;
-var TrackInput = styled25.input`
+var TrackInput = styled26.input`
   -webkit-appearance: none;
   appearance: none;
   width: 100%;
@@ -3435,7 +3581,7 @@ var TrackInput = styled25.input`
     outline-offset: 2px;
   }
 `;
-var MinMaxRow = styled25.span`
+var MinMaxRow = styled26.span`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -3459,11 +3605,11 @@ var SliderInput = forwardRef5(
     const handleChange = (e) => {
       onChange == null ? void 0 : onChange(Number(e.target.value), e);
     };
-    return /* @__PURE__ */ jsxs16(Container3, { $disabled: disabled, htmlFor: id, children: [
-      label && /* @__PURE__ */ jsx29(Text, { size: "xs", color: "grey_600", children: label }),
-      /* @__PURE__ */ jsxs16(TrackWrapper, { children: [
-        showValue && /* @__PURE__ */ jsx29(ValueBubble, { $left: progress, children: /* @__PURE__ */ jsx29(Text, { size: "xs", weight: "600", children: display(current) }) }),
-        /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsxs17(Container3, { $disabled: disabled, htmlFor: id, children: [
+      label && /* @__PURE__ */ jsx30(Text, { size: "xs", color: "grey_600", children: label }),
+      /* @__PURE__ */ jsxs17(TrackWrapper, { children: [
+        showValue && /* @__PURE__ */ jsx30(ValueBubble, { $left: progress, children: /* @__PURE__ */ jsx30(Text, { size: "xs", weight: "600", children: display(current) }) }),
+        /* @__PURE__ */ jsx30(
           TrackInput,
           {
             id,
@@ -3479,9 +3625,9 @@ var SliderInput = forwardRef5(
           }
         )
       ] }),
-      showValue && /* @__PURE__ */ jsxs16(MinMaxRow, { children: [
-        /* @__PURE__ */ jsx29(Text, { size: "xs", color: "grey_600", children: display(min) }),
-        /* @__PURE__ */ jsx29(Text, { size: "xs", color: "grey_600", children: display(max) })
+      showValue && /* @__PURE__ */ jsxs17(MinMaxRow, { children: [
+        /* @__PURE__ */ jsx30(Text, { size: "xs", color: "grey_600", children: display(min) }),
+        /* @__PURE__ */ jsx30(Text, { size: "xs", color: "grey_600", children: display(max) })
       ] })
     ] });
   }
@@ -3489,8 +3635,8 @@ var SliderInput = forwardRef5(
 SliderInput.displayName = "SliderInput";
 // src/Components/List/List.tsx
-import styled26 from "styled-components";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import styled27 from "styled-components";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var shouldForwardProp9 = (prop) => ![
   "width",
   "height",
@@ -3502,7 +3648,7 @@ var shouldForwardProp9 = (prop) => ![
   "justifyContent",
   "isScrollable"
 ].includes(prop);
-var StyledList = styled26.div.withConfig({
+var StyledList = styled27.div.withConfig({
   shouldForwardProp: shouldForwardProp9
 })`
   display: flex;
@@ -3519,7 +3665,7 @@ var StyledList = styled26.div.withConfig({
 `;
 var List = (props) => {
   const _a = props, { children, onClick } = _a, rest = __objRest(_a, ["children", "onClick"]);
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     StyledList,
     __spreadProps(__spreadValues({
       onClick
@@ -3530,8 +3676,8 @@ var List = (props) => {
 };
 // src/Components/List/ListItem/ListItem.tsx
-import styled27 from "styled-components";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import styled28 from "styled-components";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var shouldForwardProp10 = (prop) => ![
   "width",
   "height",
@@ -3543,7 +3689,7 @@ var shouldForwardProp10 = (prop) => ![
   "justifyContent",
   "isScrollable"
 ].includes(prop);
-var StyledListItem = styled27.div.withConfig({
+var StyledListItem = styled28.div.withConfig({
   shouldForwardProp: shouldForwardProp10
 })`
   display: flex;
@@ -3564,7 +3710,7 @@ var StyledListItem = styled27.div.withConfig({
 `;
 var ListItem = (props) => {
   const _a = props, { children, onClick } = _a, rest = __objRest(_a, ["children", "onClick"]);
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     StyledListItem,
     __spreadProps(__spreadValues({
       onClick
@@ -3576,8 +3722,8 @@ var ListItem = (props) => {
 // src/Components/Table/Table.tsx
 import { forwardRef as forwardRef6 } from "react";
-import styled28 from "styled-components";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import styled29 from "styled-components";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var shouldForwardPropTable = (prop) => ![
   "backgroundColor",
   "height",
@@ -3586,7 +3732,7 @@ var shouldForwardPropTable = (prop) => ![
   "borderRadius",
   "hasShadow"
 ].includes(prop);
-var StyledTable = styled28.div.withConfig({
+var StyledTable = styled29.div.withConfig({
   shouldForwardProp: shouldForwardPropTable
 })`
   display: table;
@@ -3598,7 +3744,7 @@ var StyledTable = styled28.div.withConfig({
   color: white;
   z-index: 1;
 `;
-var StyledContainer3 = styled28.div.withConfig({
+var StyledContainer3 = styled29.div.withConfig({
   shouldForwardProp: shouldForwardPropTable
 })`
   width: ${(props) => props.fullWidth === false ? "auto" : "100%"};
@@ -3614,15 +3760,15 @@ var StyledContainer3 = styled28.div.withConfig({
 var Table = forwardRef6((props, ref) => {
   const _a = props, { children } = _a, otherProps = __objRest(_a, ["children"]);
   const safeChildren = children;
-  return /* @__PURE__ */ jsx32(StyledContainer3, __spreadProps(__spreadValues({}, otherProps), { ref, children: /* @__PURE__ */ jsx32(StyledTable, __spreadProps(__spreadValues({}, otherProps), { children: safeChildren })) }));
+  return /* @__PURE__ */ jsx33(StyledContainer3, __spreadProps(__spreadValues({}, otherProps), { ref, children: /* @__PURE__ */ jsx33(StyledTable, __spreadProps(__spreadValues({}, otherProps), { children: safeChildren })) }));
 });
 Table.displayName = "Table";
 // src/Components/Table/TableHeader/TableHeader.tsx
-import styled29 from "styled-components";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import styled30 from "styled-components";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var shouldForwardPropTableHeader = (prop) => !["backgroundColor"].includes(prop);
-var StyledTableHeader = styled29.div.withConfig({
+var StyledTableHeader = styled30.div.withConfig({
   shouldForwardProp: shouldForwardPropTableHeader
 })`
   display: table;
@@ -3637,17 +3783,17 @@ var StyledTableHeader = styled29.div.withConfig({
 `;
 var TableHeader = (props) => {
   const _a = props, { children } = _a, otherProps = __objRest(_a, ["children"]);
-  return /* @__PURE__ */ jsx33(StyledTableHeader, __spreadProps(__spreadValues({}, otherProps), { children }));
+  return /* @__PURE__ */ jsx34(StyledTableHeader, __spreadProps(__spreadValues({}, otherProps), { children }));
 };
 // src/Components/Table/TableBody/TableBody.tsx
 import { forwardRef as forwardRef7 } from "react";
-import styled30 from "styled-components";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import styled31 from "styled-components";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var shouldForwardPropTableBody = (prop) => !["backgroundColor", "useEvenBackground", "fixedHeight", "color"].includes(
   prop
 );
-var StyledTableBody = styled30.div.withConfig({
+var StyledTableBody = styled31.div.withConfig({
   shouldForwardProp: shouldForwardPropTableBody
 })`
   display: block;
@@ -3664,14 +3810,14 @@ var TableBody = forwardRef7(
   (props, ref) => {
     const _a = props, { children } = _a, otherProps = __objRest(_a, ["children"]);
     const safeChildren = children;
-    return /* @__PURE__ */ jsx34(StyledTableBody, __spreadProps(__spreadValues({ ref }, otherProps), { children: safeChildren }));
+    return /* @__PURE__ */ jsx35(StyledTableBody, __spreadProps(__spreadValues({ ref }, otherProps), { children: safeChildren }));
   }
 );
 TableBody.displayName = "TableBody";
 // src/Components/Table/TableRow/TableRow.tsx
-import styled31 from "styled-components";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import styled32 from "styled-components";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var shouldForwardPropTableRow = (prop) => ![
   "backgroundColor",
   "borderTop",
@@ -3679,7 +3825,7 @@ var shouldForwardPropTableRow = (prop) => ![
   "isClickable",
   "hoverable"
 ].includes(prop);
-var StyledTableRow = styled31.div.withConfig({
+var StyledTableRow = styled32.div.withConfig({
   shouldForwardProp: shouldForwardPropTableRow
 })`
   display: flex;
@@ -3697,12 +3843,12 @@ var StyledTableRow = styled31.div.withConfig({
 `;
 var TableRow = (props) => {
   const _a = props, { children } = _a, otherProps = __objRest(_a, ["children"]);
-  return /* @__PURE__ */ jsx35(StyledTableRow, __spreadProps(__spreadValues({}, otherProps), { children }));
+  return /* @__PURE__ */ jsx36(StyledTableRow, __spreadProps(__spreadValues({}, otherProps), { children }));
 };
 // src/Components/Table/TableCell/TableCell.tsx
-import styled32 from "styled-components";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import styled33 from "styled-components";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var shouldForwardPropTableCell = (prop) => ![
   "backgroundColor",
   "flexGrow",
@@ -3712,7 +3858,7 @@ var shouldForwardPropTableCell = (prop) => ![
   "colSpan",
   "padding"
 ].includes(prop);
-var StyledTableCell = styled32.div.withConfig({
+var StyledTableCell = styled33.div.withConfig({
   shouldForwardProp: shouldForwardPropTableCell
 })`
   flex-grow: ${(props) => props.flexGrow || "1"};
@@ -3731,13 +3877,13 @@ var StyledTableCell = styled32.div.withConfig({
 `;
 var TableCell = (props) => {
   const _a = props, { centerContent, children } = _a, otherProps = __objRest(_a, ["centerContent", "children"]);
-  return /* @__PURE__ */ jsx36(StyledTableCell, __spreadProps(__spreadValues({}, otherProps), { children: centerContent ? /* @__PURE__ */ jsx36("div", { style: { display: "flex", justifyContent: "center" }, children }) : children }));
+  return /* @__PURE__ */ jsx37(StyledTableCell, __spreadProps(__spreadValues({}, otherProps), { children: centerContent ? /* @__PURE__ */ jsx37("div", { style: { display: "flex", justifyContent: "center" }, children }) : children }));
 };
 // src/Components/Table/TableHeaderCell/TableHeaderCell.tsx
-import { useState as useState10 } from "react";
-import styled33 from "styled-components";
-import { jsx as jsx37, jsxs as jsxs17 } from "react/jsx-runtime";
+import { useState as useState11 } from "react";
+import styled34 from "styled-components";
+import { jsx as jsx38, jsxs as jsxs18 } from "react/jsx-runtime";
 var shouldForwardPropTableHeaderCell = (prop) => ![
   "useSort",
   "isSort",
@@ -3746,7 +3892,7 @@ var shouldForwardPropTableHeaderCell = (prop) => ![
   "width",
   "borderLeft"
 ].includes(prop);
-var StyledTableHeaderCell = styled33.div.withConfig({
+var StyledTableHeaderCell = styled34.div.withConfig({
   shouldForwardProp: shouldForwardPropTableHeaderCell
 })`
   flex-grow: ${(props) => props.flexGrow || "1"};
@@ -3764,13 +3910,13 @@ var StyledTableHeaderCell = styled33.div.withConfig({
   min-width: ${(props) => props.width || "auto"};
   ${(props) => props.borderLeft ? `border-left: ${props.borderLeft};` : ""}
 `;
-var SortingButton = styled33.span`
+var SortingButton = styled34.span`
   display: inline-flex;
   align-items: center;
   gap: 8px;
   cursor: pointer;
 `;
-var SortArrow = styled33.span`
+var SortArrow = styled34.span`
   font-style: normal;
   font-size: 0.9em;
   line-height: 1;
@@ -3779,11 +3925,11 @@ var SortArrow = styled33.span`
 `;
 var TableHeaderCell = (props) => {
   const _a = props, { children, useSort, isSort, sortOrder } = _a, otherProps = __objRest(_a, ["children", "useSort", "isSort", "sortOrder"]);
-  const [hovered, setHovered] = useState10(false);
+  const [hovered, setHovered] = useState11(false);
   const showArrow = useSort && (isSort || hovered);
   const arrowChar = isSort && sortOrder === "asc" ? "\u2191" : "\u2193";
   const arrowOpacity = isSort ? 1 : 0.35;
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     StyledTableHeaderCell,
     __spreadProps(__spreadValues({}, otherProps), {
       useSort,
@@ -3798,19 +3944,19 @@ var TableHeaderCell = (props) => {
         if (useSort) setHovered(false);
         (_a2 = otherProps.onMouseLeave) == null ? void 0 : _a2.call(otherProps, e);
       },
-      children: useSort ? /* @__PURE__ */ jsxs17(SortingButton, { children: [
+      children: useSort ? /* @__PURE__ */ jsxs18(SortingButton, { children: [
         children,
-        showArrow && /* @__PURE__ */ jsx37(SortArrow, { $opacity: arrowOpacity, children: arrowChar })
+        showArrow && /* @__PURE__ */ jsx38(SortArrow, { $opacity: arrowOpacity, children: arrowChar })
       ] }) : children
     })
   );
 };
 // src/Components/Table/TableHeaderRow/TableHeaderRow.tsx
-import styled34 from "styled-components";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import styled35 from "styled-components";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var shouldForwardPropTableHeaderRow = (prop) => !["backgroundColor"].includes(prop);
-var StyledTableHeaderRow = styled34.div.withConfig({
+var StyledTableHeaderRow = styled35.div.withConfig({
   shouldForwardProp: shouldForwardPropTableHeaderRow
 })`
   display: flex;
@@ -3820,14 +3966,14 @@ var StyledTableHeaderRow = styled34.div.withConfig({
 `;
 var TableHeaderRow = (props) => {
   const _a = props, { children } = _a, otherProps = __objRest(_a, ["children"]);
-  return /* @__PURE__ */ jsx38(StyledTableHeaderRow, __spreadProps(__spreadValues({}, otherProps), { children }));
+  return /* @__PURE__ */ jsx39(StyledTableHeaderRow, __spreadProps(__spreadValues({}, otherProps), { children }));
 };
 // src/Components/Table/TableFooter/TableFooter.tsx
-import styled35 from "styled-components";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import styled36 from "styled-components";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var shouldForwardPropTableFooter = (prop) => !["backgroundColor"].includes(prop);
-var StyledTableFooter = styled35.div.withConfig({
+var StyledTableFooter = styled36.div.withConfig({
   shouldForwardProp: shouldForwardPropTableFooter
 })`
   display: table;
@@ -3842,14 +3988,14 @@ var StyledTableFooter = styled35.div.withConfig({
 `;
 var TableFooter = (props) => {
   const _a = props, { children } = _a, otherProps = __objRest(_a, ["children"]);
-  return /* @__PURE__ */ jsx39(StyledTableFooter, __spreadProps(__spreadValues({}, otherProps), { children }));
+  return /* @__PURE__ */ jsx40(StyledTableFooter, __spreadProps(__spreadValues({}, otherProps), { children }));
 };
 // src/Components/Table/TableFooterRow/TableFooterRow.tsx
-import styled36 from "styled-components";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import styled37 from "styled-components";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var shouldForwardPropTableFooterRow = (prop) => !["backgroundColor"].includes(prop);
-var StyledTableFooterRow = styled36.div.withConfig({
+var StyledTableFooterRow = styled37.div.withConfig({
   shouldForwardProp: shouldForwardPropTableFooterRow
 })`
   display: flex;
@@ -3859,14 +4005,14 @@ var StyledTableFooterRow = styled36.div.withConfig({
 `;
 var TableFooterRow = (props) => {
   const _a = props, { children } = _a, otherProps = __objRest(_a, ["children"]);
-  return /* @__PURE__ */ jsx40(StyledTableFooterRow, __spreadProps(__spreadValues({}, otherProps), { children }));
+  return /* @__PURE__ */ jsx41(StyledTableFooterRow, __spreadProps(__spreadValues({}, otherProps), { children }));
 };
 // src/Components/Table/TableFooterCell/TableFooterCell.tsx
-import styled37 from "styled-components";
-import { jsx as jsx41 } from "react/jsx-runtime";
+import styled38 from "styled-components";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var shouldForwardPropTableFooterCell = (prop) => !["useSort", "flexGrow", "flexShrink", "width"].includes(prop);
-var StyledTableFooterCell = styled37.div.withConfig({
+var StyledTableFooterCell = styled38.div.withConfig({
   shouldForwardProp: shouldForwardPropTableFooterCell
 })`
   flex-grow: ${(props) => props.flexGrow || "1"};
@@ -3892,17 +4038,17 @@ var StyledTableFooterCell = styled37.div.withConfig({
 `;
 var TableFooterCell = (props) => {
   const _a = props, { children, useSort } = _a, otherProps = __objRest(_a, ["children", "useSort"]);
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     StyledTableFooterCell,
     __spreadProps(__spreadValues({}, otherProps), {
       useSort,
-      children: useSort ? /* @__PURE__ */ jsx41("div", { className: "sortingButton", children }) : children
+      children: useSort ? /* @__PURE__ */ jsx42("div", { className: "sortingButton", children }) : children
     })
   );
 };
 // src/Components/Table/SkeletonRow/SkeletonRow.tsx
-import { Fragment as Fragment4, jsx as jsx42, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx43, jsxs as jsxs19 } from "react/jsx-runtime";
 var style = `
 .skeleton-loader {
   width: 100%;
@@ -3921,15 +4067,15 @@ var style = `
   }
 }
 `;
-var SkeletonRow = ({ columns = 9 }) => /* @__PURE__ */ jsxs18(Fragment4, { children: [
-  /* @__PURE__ */ jsx42("style", { children: style }),
-  /* @__PURE__ */ jsx42(TableRow, { children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ jsx42(TableCell, { children: /* @__PURE__ */ jsx42("div", { className: "skeleton-loader" }) }, index)) })
+var SkeletonRow = ({ columns = 9 }) => /* @__PURE__ */ jsxs19(Fragment4, { children: [
+  /* @__PURE__ */ jsx43("style", { children: style }),
+  /* @__PURE__ */ jsx43(TableRow, { children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ jsx43(TableCell, { children: /* @__PURE__ */ jsx43("div", { className: "skeleton-loader" }) }, index)) })
 ] });
 // src/Components/Switch/Switch.tsx
 import { forwardRef as forwardRef8 } from "react";
-import styled38, { css as css2 } from "styled-components";
-import { jsx as jsx43, jsxs as jsxs19 } from "react/jsx-runtime";
+import styled39, { css as css2 } from "styled-components";
+import { jsx as jsx44, jsxs as jsxs20 } from "react/jsx-runtime";
 var BASE = {
   s: { w: 36, h: 20, knob: 16, pad: 2 },
   m: { w: 48, h: 28, knob: 24, pad: 2 },
@@ -3940,7 +4086,7 @@ var SIZES2 = __spreadProps(__spreadValues({}, BASE), {
   md: BASE.m,
   lg: BASE.l
 });
-var Container4 = styled38.label`
+var Container4 = styled39.label`
   display: inline-flex;
   align-items: center;
   gap: 10px;
@@ -3948,14 +4094,14 @@ var Container4 = styled38.label`
   cursor: ${(p) => p.$disabled ? "not-allowed" : "pointer"};
   opacity: ${(p) => p.$disabled ? 0.6 : 1};
 `;
-var HiddenCheckbox = styled38.input.attrs({ type: "checkbox" })`
+var HiddenCheckbox = styled39.input.attrs({ type: "checkbox" })`
   position: absolute;
   opacity: 0;
   pointer-events: none;
   width: 1px;
   height: 1px;
 `;
-var Track = styled38.span`
+var Track = styled39.span`
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -3983,7 +4129,7 @@ var Track = styled38.span`
       inset 0 0 0 1px rgba(0, 0, 0, 0.08);
   }
 `;
-var Knob = styled38.span`
+var Knob = styled39.span`
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
@@ -4030,8 +4176,8 @@ var Switch = forwardRef8(
       if (disabled) return;
       onChange == null ? void 0 : onChange(!!e.target.checked, e);
     };
-    return /* @__PURE__ */ jsxs19(Container4, { $disabled: disabled, htmlFor: id, children: [
-      /* @__PURE__ */ jsx43(
+    return /* @__PURE__ */ jsxs20(Container4, { $disabled: disabled, htmlFor: id, children: [
+      /* @__PURE__ */ jsx44(
         HiddenCheckbox,
         __spreadValues({
           id,
@@ -4044,16 +4190,16 @@ var Switch = forwardRef8(
           ref
         }, rest)
       ),
-      /* @__PURE__ */ jsx43(Track, { $checked: !!checked, $size: size, $color: color, children: /* @__PURE__ */ jsx43(Knob, { $checked: !!checked, $size: size }) })
+      /* @__PURE__ */ jsx44(Track, { $checked: !!checked, $size: size, $color: color, children: /* @__PURE__ */ jsx44(Knob, { $checked: !!checked, $size: size }) })
     ] });
   }
 );
 Switch.displayName = "Switch";
 // src/Components/CardSkeleton/CardSkeleton.tsx
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
 var CardSkeleton = () => {
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(
     Box,
     {
       fullWidth: true,
@@ -4064,8 +4210,8 @@ var CardSkeleton = () => {
 };
 // src/Components/Options/Options.tsx
-import { useState as useState11, useEffect as useEffect9 } from "react";
-import { jsx as jsx45, jsxs as jsxs20 } from "react/jsx-runtime";
+import { useState as useState12, useEffect as useEffect9 } from "react";
+import { jsx as jsx46, jsxs as jsxs21 } from "react/jsx-runtime";
 var Options = ({
   icon,
   options,
@@ -4074,7 +4220,7 @@ var Options = ({
   onChange,
   disabled = false
 }) => {
-  const [state, setState] = useState11(0);
+  const [state, setState] = useState12(0);
   useEffect9(() => {
     if (defaultId) {
       const defaultIndex = options.findIndex(
@@ -4096,7 +4242,7 @@ var Options = ({
     }
   };
   const { label, color } = options[state] || options[0];
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx46(
     "div",
     {
       onClick: disabled ? void 0 : handleClick,
@@ -4124,9 +4270,9 @@ var Options = ({
           e.currentTarget.style.transform = "translateY(0px)";
         }
       },
-      children: /* @__PURE__ */ jsxs20(Row_default, { gap: "8", alignItems: "center", justifyContent: "center", children: [
-        /* @__PURE__ */ jsx45(Col_default, { children: /* @__PURE__ */ jsx45(Icon_default, { name: icon, type: "regular", color: "#414652" }) }),
-        /* @__PURE__ */ jsx45(Col_default, { children: label })
+      children: /* @__PURE__ */ jsxs21(Row_default, { gap: "8", alignItems: "center", justifyContent: "center", children: [
+        /* @__PURE__ */ jsx46(Col_default, { children: /* @__PURE__ */ jsx46(Icon_default, { name: icon, type: "regular", color: "#414652" }) }),
+        /* @__PURE__ */ jsx46(Col_default, { children: label })
       ] })
     }
   );
@@ -4134,22 +4280,22 @@ var Options = ({
 // src/Components/Stepper/Stepper.tsx
 import { Fragment as Fragment5 } from "react";
-import styled39 from "styled-components";
-import { jsx as jsx46, jsxs as jsxs21 } from "react/jsx-runtime";
-var Wrapper5 = styled39.nav`
+import styled40 from "styled-components";
+import { jsx as jsx47, jsxs as jsxs22 } from "react/jsx-runtime";
+var Wrapper5 = styled40.nav`
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 5px;
 `;
-var Connector = styled39.div`
+var Connector = styled40.div`
   height: 1px;
   background: ${colors.grey_300};
   flex: 1;
   min-width: 8px;
 `;
-var Circle = styled39.div`
+var Circle = styled40.div`
   width: ${({ size }) => `${size}px`};
   height: ${({ size }) => `${size}px`};
   border-radius: 9999px;
@@ -4169,21 +4315,21 @@ var Stepper = ({
   size = 28,
   className
 }) => {
-  return /* @__PURE__ */ jsx46(Wrapper5, { "aria-label": "progression", className, children: Array.from({ length: numberOfSteps }, (_, i) => {
+  return /* @__PURE__ */ jsx47(Wrapper5, { "aria-label": "progression", className, children: Array.from({ length: numberOfSteps }, (_, i) => {
     const isActive = i === current;
     const isCompleted = i < current;
-    return /* @__PURE__ */ jsxs21(Fragment5, { children: [
-      /* @__PURE__ */ jsx46(
+    return /* @__PURE__ */ jsxs22(Fragment5, { children: [
+      /* @__PURE__ */ jsx47(
         Circle,
         {
           size,
           active: isActive,
           completed: isCompleted,
           "aria-hidden": true,
-          children: isCompleted ? /* @__PURE__ */ jsx46(Icon, { name: "check", size: "xs", color: "white" }) : i + 1
+          children: isCompleted ? /* @__PURE__ */ jsx47(Icon, { name: "check", size: "xs", color: "white" }) : i + 1
         }
       ),
-      i < numberOfSteps - 1 && /* @__PURE__ */ jsx46(Connector, {})
+      i < numberOfSteps - 1 && /* @__PURE__ */ jsx47(Connector, {})
     ] }, i);
   }) });
 };
@@ -4194,13 +4340,13 @@ import {
   useEffect as useEffect10,
   useMemo,
   useRef as useRef8,
-  useState as useState12,
+  useState as useState13,
   Children,
   isValidElement,
   cloneElement
 } from "react";
-import styled40 from "styled-components";
-import { jsx as jsx47, jsxs as jsxs22 } from "react/jsx-runtime";
+import styled41 from "styled-components";
+import { jsx as jsx48, jsxs as jsxs23 } from "react/jsx-runtime";
 var TOKENS = {
   fontFamily: '"Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif'
 };
@@ -4221,7 +4367,7 @@ var shouldForwardTab = (p) => ![
   "$size",
   "$activeColor"
 ].includes(p);
-var TabsRoot = styled40.div.withConfig({
+var TabsRoot = styled41.div.withConfig({
   shouldForwardProp: shouldForwardTabs
 })`
   width: 100%;
@@ -4232,7 +4378,7 @@ var TabsRoot = styled40.div.withConfig({
   border-bottom: ${(p) => p.variant === "pills" || p.showBaseline === false ? "0" : `1px solid ${p.baselineColor || colors.grey_300}`};
 `;
-var ActiveBar = styled40.div`
+var ActiveBar = styled41.div`
   position: absolute;
   left: 0;
   bottom: -1px;
@@ -4244,7 +4390,7 @@ var ActiveBar = styled40.div`
     left 180ms ease,
     width 180ms ease;
 `;
-var TabsList = styled40.div.withConfig({
+var TabsList = styled41.div.withConfig({
   shouldForwardProp: shouldForwardTabs
 })`
   display: flex;
@@ -4266,7 +4412,7 @@ var TabsList = styled40.div.withConfig({
   width: ${(p) => p.fullWidth ? "100%" : "auto"};
   justify-content: ${(p) => p.align === "center" ? "center" : p.align === "end" ? "flex-end" : p.align === "between" ? "space-between" : "flex-start"};
 `;
-var TabButton = styled40.button.withConfig({
+var TabButton = styled41.button.withConfig({
   shouldForwardProp: shouldForwardTab
 })`
   appearance: none;
@@ -4328,7 +4474,7 @@ var TabButton = styled40.button.withConfig({
     opacity: 0.6;
   }
 `;
-var TabDot = styled40.span`
+var TabDot = styled41.span`
   display: inline-block;
   width: 8px;
   height: 8px;
@@ -4336,7 +4482,7 @@ var TabDot = styled40.span`
   flex: none;
   background: ${(p) => p.$color || colors.red_950};
 `;
-var TabBubble = styled40(Bubble)`
+var TabBubble = styled41(Bubble)`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -4369,7 +4515,7 @@ var Tab = (_a) => {
     "size",
     "activeColor"
   ]);
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(
     TabButton,
     __spreadProps(__spreadValues({
       ref: innerRef,
@@ -4416,7 +4562,7 @@ var Tabs = (_a) => {
   ]);
   const rootRef = useRef8(null);
   const refsMap = useRef8(/* @__PURE__ */ new Map());
-  const [bar, setBar] = useState12({ left: 0, width: 0 });
+  const [bar, setBar] = useState13({ left: 0, width: 0 });
   const setTabRef = (id) => (el) => {
     if (el) refsMap.current.set(id, el);
   };
@@ -4445,7 +4591,7 @@ var Tabs = (_a) => {
   const isPillsFullWidth = variant === "pills" && align === "start";
   const rendered = useMemo(() => {
     if (items && items.length) {
-      return items.map((it) => /* @__PURE__ */ jsxs22(
+      return items.map((it) => /* @__PURE__ */ jsxs23(
         Tab,
         {
           id: it.id,
@@ -4459,8 +4605,8 @@ var Tabs = (_a) => {
           activeColor,
           children: [
             it.label,
-            it.dot && /* @__PURE__ */ jsx47(TabDot, { $color: it.dotColor }),
-            Boolean(it.bubbleActive || it.bubbleNumber) && /* @__PURE__ */ jsx47(
+            it.dot && /* @__PURE__ */ jsx48(TabDot, { $color: it.dotColor }),
+            Boolean(it.bubbleActive || it.bubbleNumber) && /* @__PURE__ */ jsx48(
               TabBubble,
               {
                 size: "xs",
@@ -4500,7 +4646,7 @@ var Tabs = (_a) => {
     size,
     activeColor
   ]);
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     TabsRoot,
     __spreadProps(__spreadValues({
       ref: rootRef,
@@ -4511,7 +4657,7 @@ var Tabs = (_a) => {
       variant
     }, rest), {
       children: [
-        /* @__PURE__ */ jsx47(
+        /* @__PURE__ */ jsx48(
           TabsList,
           {
             align,
@@ -4521,21 +4667,21 @@ var Tabs = (_a) => {
             children: rendered
           }
         ),
-        variant === "line" && showBaseline && /* @__PURE__ */ jsx47(ActiveBar, { style: { left: bar.left, width: bar.width } })
+        variant === "line" && showBaseline && /* @__PURE__ */ jsx48(ActiveBar, { style: { left: bar.left, width: bar.width } })
       ]
     })
   );
 };
 // src/Components/MultiSelect/MultiSelect.tsx
-import { useState as useState13, useRef as useRef9, useEffect as useEffect11 } from "react";
-import styled41 from "styled-components";
-import { jsx as jsx48, jsxs as jsxs23 } from "react/jsx-runtime";
-var Container5 = styled41.div`
+import { useState as useState14, useRef as useRef9, useEffect as useEffect11 } from "react";
+import styled42 from "styled-components";
+import { jsx as jsx49, jsxs as jsxs24 } from "react/jsx-runtime";
+var Container5 = styled42.div`
   position: relative;
   display: inline-block;
 `;
-var Dropdown2 = styled41.div`
+var Dropdown2 = styled42.div`
   position: absolute;
   top: calc(100% + 6px);
   ${(p) => p.$align === "right" ? "right: 0;" : "left: 0;"}
@@ -4548,7 +4694,7 @@ var Dropdown2 = styled41.div`
   overflow-y: auto;
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
 `;
-var Item = styled41.div`
+var Item = styled42.div`
   padding: 8px 12px;
   cursor: pointer;
   display: flex;
@@ -4571,7 +4717,7 @@ var MultiSelect = ({
   width,
   align = "left"
 }) => {
-  const [isOpen, setIsOpen] = useState13(false);
+  const [isOpen, setIsOpen] = useState14(false);
   const dropdownRef = useRef9(null);
   const toggleOption = (value) => {
     if (!onChange) return;
@@ -4591,8 +4737,8 @@ var MultiSelect = ({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  return /* @__PURE__ */ jsxs23(Container5, { ref: dropdownRef, children: [
-    /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsxs24(Container5, { ref: dropdownRef, children: [
+    /* @__PURE__ */ jsx49(
       Button,
       {
         onClick: () => setIsOpen((p) => !p),
@@ -4602,11 +4748,11 @@ var MultiSelect = ({
         disabled
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs23(Dropdown2, { $width: width, $align: align, children: [
+    isOpen && /* @__PURE__ */ jsxs24(Dropdown2, { $width: width, $align: align, children: [
       options.map(({ label: optLabel, value }) => {
         const active = selectedValues.includes(value);
-        return /* @__PURE__ */ jsxs23(Item, { onClick: () => toggleOption(value), children: [
-          /* @__PURE__ */ jsx48(
+        return /* @__PURE__ */ jsxs24(Item, { onClick: () => toggleOption(value), children: [
+          /* @__PURE__ */ jsx49(
             Icon,
             {
               name: "check",
@@ -4615,17 +4761,17 @@ var MultiSelect = ({
               color: active ? colors.blue_700 : colors.transparent
             }
           ),
-          /* @__PURE__ */ jsx48(Text, { size: "xs", color: active ? "blue_700" : "grey_700", children: optLabel })
+          /* @__PURE__ */ jsx49(Text, { size: "xs", color: active ? "blue_700" : "grey_700", children: optLabel })
         ] }, String(value));
       }),
-      options.length === 0 && /* @__PURE__ */ jsx48(Item, { as: "div", style: { cursor: "default" }, children: /* @__PURE__ */ jsx48(Text, { size: "xs", color: "grey_500", children: "Aucune option" }) })
+      options.length === 0 && /* @__PURE__ */ jsx49(Item, { as: "div", style: { cursor: "default" }, children: /* @__PURE__ */ jsx49(Text, { size: "xs", color: "grey_500", children: "Aucune option" }) })
     ] })
   ] });
 };
 // src/Components/DatePicker/DatePicker.tsx
-import { useState as useState14, useRef as useRef10, useEffect as useEffect12 } from "react";
-import { Fragment as Fragment6, jsx as jsx49, jsxs as jsxs24 } from "react/jsx-runtime";
+import { useState as useState15, useRef as useRef10, useEffect as useEffect12 } from "react";
+import { Fragment as Fragment6, jsx as jsx50, jsxs as jsxs25 } from "react/jsx-runtime";
 var LOCALE_MAP = {
   fr: "fr-FR",
   en: "en-GB",
@@ -4695,16 +4841,16 @@ var DatePicker = (props) => {
   const resolvedLocale = resolveLocale(locale);
   const monthNames = getMonthNames(resolvedLocale);
   const dayNames = getDayNames(resolvedLocale);
-  const [isOpen, setIsOpen] = useState14(defaultOpen);
-  const [currentMonth, setCurrentMonth] = useState14(/* @__PURE__ */ new Date());
-  const [isSelectingEnd, setIsSelectingEnd] = useState14(false);
-  const [singleDate, setSingleDate] = useState14(
+  const [isOpen, setIsOpen] = useState15(defaultOpen);
+  const [currentMonth, setCurrentMonth] = useState15(/* @__PURE__ */ new Date());
+  const [isSelectingEnd, setIsSelectingEnd] = useState15(false);
+  const [singleDate, setSingleDate] = useState15(
     isSingle ? (_a = props.value) != null ? _a : null : null
   );
-  const [startDate, setStartDate] = useState14(
+  const [startDate, setStartDate] = useState15(
     !isSingle ? (_c = (_b = props.value) == null ? void 0 : _b.start) != null ? _c : null : null
   );
-  const [endDate, setEndDate] = useState14(
+  const [endDate, setEndDate] = useState15(
     !isSingle ? (_e = (_d = props.value) == null ? void 0 : _d.end) != null ? _e : null : null
   );
   const ref = useRef10(null);
@@ -4813,28 +4959,28 @@ var DatePicker = (props) => {
   }).format(date);
   const inputLabel = isSingle ? singleDate ? formatShort(singleDate) : "S\xE9lectionner une date" : startDate && endDate ? `${formatShort(startDate)} \u2014 ${formatShort(endDate)}` : "S\xE9lectionner une p\xE9riode";
   const inputHasValue = isSingle ? !!singleDate : !!startDate && !!endDate;
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     "div",
     {
       className: "date-picker-container",
       ref,
       style: width ? { width } : void 0,
       children: [
-        variant === "input" ? /* @__PURE__ */ jsxs24(
+        variant === "input" ? /* @__PURE__ */ jsxs25(
           "button",
           {
             className: `date-picker-input-trigger${inputHasValue ? " date-picker-input-trigger--filled" : ""}`,
             onClick: () => setIsOpen((prev) => !prev),
             disabled,
             children: [
-              /* @__PURE__ */ jsx49(
+              /* @__PURE__ */ jsx50(
                 "span",
                 {
                   className: inputHasValue ? "" : "date-picker-input-placeholder",
                   children: inputLabel
                 }
               ),
-              inputHasValue && /* @__PURE__ */ jsx49(
+              inputHasValue && /* @__PURE__ */ jsx50(
                 "span",
                 {
                   className: "date-picker-input-clear",
@@ -4842,13 +4988,13 @@ var DatePicker = (props) => {
                     e.stopPropagation();
                     reset();
                   },
-                  children: /* @__PURE__ */ jsx49(Icon, { name: "xmark", size: "s", color: colors.grey_400 })
+                  children: /* @__PURE__ */ jsx50(Icon, { name: "xmark", size: "s", color: colors.grey_400 })
                 }
               )
             ]
           }
-        ) : /* @__PURE__ */ jsxs24(Fragment6, { children: [
-          /* @__PURE__ */ jsx49(
+        ) : /* @__PURE__ */ jsxs25(Fragment6, { children: [
+          /* @__PURE__ */ jsx50(
             Button,
             {
               onClick: () => setIsOpen((prev) => !prev),
@@ -4857,7 +5003,7 @@ var DatePicker = (props) => {
               disabled
             }
           ),
-          isFiltered && /* @__PURE__ */ jsx49(
+          isFiltered && /* @__PURE__ */ jsx50(
             "span",
             {
               style: {
@@ -4875,17 +5021,17 @@ var DatePicker = (props) => {
                 cursor: "pointer"
               },
               onClick: reset,
-              children: /* @__PURE__ */ jsx49(Icon, { name: "xmark", size: "s", color: colors.white })
+              children: /* @__PURE__ */ jsx50(Icon, { name: "xmark", size: "s", color: colors.white })
             }
           )
         ] }),
-        isOpen && /* @__PURE__ */ jsx49(
+        isOpen && /* @__PURE__ */ jsx50(
           "div",
           {
             className: "date-picker-popup",
             style: align === "right" ? { left: "auto", right: 0 } : void 0,
-            children: /* @__PURE__ */ jsxs24("div", { className: "date-picker-content", children: [
-              hasPresets && /* @__PURE__ */ jsx49("div", { className: "date-picker-presets", children: rangeProps.presets.map((preset) => /* @__PURE__ */ jsx49(
+            children: /* @__PURE__ */ jsxs25("div", { className: "date-picker-content", children: [
+              hasPresets && /* @__PURE__ */ jsx50("div", { className: "date-picker-presets", children: rangeProps.presets.map((preset) => /* @__PURE__ */ jsx50(
                 "button",
                 {
                   onClick: () => handlePreset(preset),
@@ -4894,21 +5040,21 @@ var DatePicker = (props) => {
                 },
                 preset.label
               )) }),
-              /* @__PURE__ */ jsxs24("div", { className: "calendar-container", children: [
-                /* @__PURE__ */ jsxs24("div", { className: "calendar-header", children: [
-                  /* @__PURE__ */ jsx49(
+              /* @__PURE__ */ jsxs25("div", { className: "calendar-container", children: [
+                /* @__PURE__ */ jsxs25("div", { className: "calendar-header", children: [
+                  /* @__PURE__ */ jsx50(
                     "button",
                     {
                       onClick: () => navigateMonth(-1),
                       className: "calendar-nav-button",
-                      children: /* @__PURE__ */ jsx49(
+                      children: /* @__PURE__ */ jsx50(
                         "svg",
                         {
                           className: "calendar-nav-icon",
                           fill: "none",
                           stroke: "currentColor",
                           viewBox: "0 0 24 24",
-                          children: /* @__PURE__ */ jsx49(
+                          children: /* @__PURE__ */ jsx50(
                             "path",
                             {
                               strokeLinecap: "round",
@@ -4921,24 +5067,24 @@ var DatePicker = (props) => {
                       )
                     }
                   ),
-                  /* @__PURE__ */ jsxs24("h3", { className: "calendar-month-title", children: [
+                  /* @__PURE__ */ jsxs25("h3", { className: "calendar-month-title", children: [
                     monthNames[currentMonth.getMonth()],
                     " ",
                     currentMonth.getFullYear()
                   ] }),
-                  /* @__PURE__ */ jsx49(
+                  /* @__PURE__ */ jsx50(
                     "button",
                     {
                       onClick: () => navigateMonth(1),
                       className: "calendar-nav-button",
-                      children: /* @__PURE__ */ jsx49(
+                      children: /* @__PURE__ */ jsx50(
                         "svg",
                         {
                           className: "calendar-nav-icon",
                           fill: "none",
                           stroke: "currentColor",
                           viewBox: "0 0 24 24",
-                          children: /* @__PURE__ */ jsx49(
+                          children: /* @__PURE__ */ jsx50(
                             "path",
                             {
                               strokeLinecap: "round",
@@ -4952,8 +5098,8 @@ var DatePicker = (props) => {
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsx49("div", { className: "calendar-days-header", children: dayNames.map((day) => /* @__PURE__ */ jsx49("div", { className: "calendar-day-name", children: day }, day)) }),
-                /* @__PURE__ */ jsx49("div", { className: "calendar-days-grid", children: getDaysInMonth(currentMonth).map((day, index) => {
+                /* @__PURE__ */ jsx50("div", { className: "calendar-days-header", children: dayNames.map((day) => /* @__PURE__ */ jsx50("div", { className: "calendar-day-name", children: day }, day)) }),
+                /* @__PURE__ */ jsx50("div", { className: "calendar-days-grid", children: getDaysInMonth(currentMonth).map((day, index) => {
                   const disabled2 = !day.isCurrentMonth || isDateDisabled(day.date);
                   const isToday = sameDay(day.date, today);
                   const isStart = isSingle ? false : !!startDate && sameDay(day.date, startDate);
@@ -4975,28 +5121,28 @@ var DatePicker = (props) => {
                     if (isToday && !isStart && !isEnd && !isSingleSelected)
                       classes.push("calendar-day-today");
                   }
-                  return /* @__PURE__ */ jsx49(
+                  return /* @__PURE__ */ jsx50(
                     "button",
                     {
                       onClick: () => !disabled2 && handleDateSelect(day.date),
                       className: classes.join(" "),
                       disabled: disabled2,
-                      children: /* @__PURE__ */ jsx49("span", { children: day.date.getDate() })
+                      children: /* @__PURE__ */ jsx50("span", { children: day.date.getDate() })
                     },
                     index
                   );
                 }) }),
-                !isSingle && /* @__PURE__ */ jsxs24("div", { className: "calendar-footer", children: [
-                  /* @__PURE__ */ jsx49("div", { className: "calendar-footer-dates", children: startDate && endDate ? /* @__PURE__ */ jsxs24(Fragment6, { children: [
-                    /* @__PURE__ */ jsx49("strong", { children: "Du" }),
+                !isSingle && /* @__PURE__ */ jsxs25("div", { className: "calendar-footer", children: [
+                  /* @__PURE__ */ jsx50("div", { className: "calendar-footer-dates", children: startDate && endDate ? /* @__PURE__ */ jsxs25(Fragment6, { children: [
+                    /* @__PURE__ */ jsx50("strong", { children: "Du" }),
                     " ",
                     formatDate(startDate, "weekday", "fr"),
                     " ",
-                    /* @__PURE__ */ jsx49("strong", { children: "au" }),
+                    /* @__PURE__ */ jsx50("strong", { children: "au" }),
                     " ",
                     formatDate(endDate, "weekday", "fr")
-                  ] }) : startDate ? /* @__PURE__ */ jsx49("span", { className: "calendar-footer-hint", children: "S\xE9lectionnez la date de fin" }) : null }),
-                  /* @__PURE__ */ jsx49("button", { onClick: reset, className: "calendar-reset-button", children: "R\xE9initialiser" })
+                  ] }) : startDate ? /* @__PURE__ */ jsx50("span", { className: "calendar-footer-hint", children: "S\xE9lectionnez la date de fin" }) : null }),
+                  /* @__PURE__ */ jsx50("button", { onClick: reset, className: "calendar-reset-button", children: "R\xE9initialiser" })
                 ] })
               ] })
             ] })
@@ -5008,15 +5154,15 @@ var DatePicker = (props) => {
 };
 // src/Components/IconTabs/IconTabs.tsx
-import { useState as useState15, useEffect as useEffect13, useRef as useRef11 } from "react";
-import styled42, { css as css3 } from "styled-components";
-import { jsx as jsx50, jsxs as jsxs25 } from "react/jsx-runtime";
-var TabsContainer = styled42.div`
+import { useState as useState16, useEffect as useEffect13, useRef as useRef11 } from "react";
+import styled43, { css as css3 } from "styled-components";
+import { jsx as jsx51, jsxs as jsxs26 } from "react/jsx-runtime";
+var TabsContainer = styled43.div`
   display: flex;
   flex-direction: column;
   align-items: stretch;
 `;
-var IconsRow = styled42.div`
+var IconsRow = styled43.div`
   display: flex;
   justify-content: space-around;
   align-items: center;
@@ -5027,7 +5173,7 @@ var IconsRow = styled42.div`
   border-radius: 5px;
   font-size: 0.8em;
 `;
-var Tab2 = styled42.div`
+var Tab2 = styled43.div`
   margin: 5px;
   cursor: pointer;
   transition:
@@ -5050,7 +5196,7 @@ var Tab2 = styled42.div`
       cursor: not-allowed;
     `}
 `;
-var TabSlider = styled42.div`
+var TabSlider = styled43.div`
   margin: 5px 0;
   position: absolute;
   height: calc(100% - 10px);
@@ -5071,7 +5217,7 @@ var IconTabs = ({
   defaultTabIndex = 0
 }) => {
   var _a;
-  const [selectedTab, setSelectedTab] = useState15(defaultTabIndex);
+  const [selectedTab, setSelectedTab] = useState16(defaultTabIndex);
   const sliderRef = useRef11(null);
   const tabRefs = useRef11([]);
   useEffect13(() => {
@@ -5094,9 +5240,9 @@ var IconTabs = ({
       sliderRef.current.style.backgroundColor = colors[selectedColor];
     }
   }, [selectedTab, selectedColor]);
-  return /* @__PURE__ */ jsxs25(TabsContainer, { children: [
-    /* @__PURE__ */ jsxs25(IconsRow, { children: [
-      items.map((item, index) => /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsxs26(TabsContainer, { children: [
+    /* @__PURE__ */ jsxs26(IconsRow, { children: [
+      items.map((item, index) => /* @__PURE__ */ jsx51(
         Tab2,
         {
           selected: selectedTab === index,
@@ -5105,7 +5251,7 @@ var IconTabs = ({
           ref: (el) => {
             tabRefs.current[index] = el;
           },
-          children: item.icon && /* @__PURE__ */ jsx50(
+          children: item.icon && /* @__PURE__ */ jsx51(
             Icon,
             {
               name: item.icon,
@@ -5117,43 +5263,45 @@ var IconTabs = ({
         },
         index
       )),
-      /* @__PURE__ */ jsx50(TabSlider, { ref: sliderRef })
+      /* @__PURE__ */ jsx51(TabSlider, { ref: sliderRef })
     ] }),
-    /* @__PURE__ */ jsx50(Text, { align: "center", size: "xs", children: (_a = items[selectedTab]) == null ? void 0 : _a.label })
+    /* @__PURE__ */ jsx51(Text, { align: "center", size: "xs", children: (_a = items[selectedTab]) == null ? void 0 : _a.label })
   ] });
 };
 // src/Components/Popover/Popover.tsx
 import {
-  useState as useState16,
+  useState as useState17,
   useRef as useRef12,
   useEffect as useEffect14,
   useCallback as useCallback5
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import styled43 from "styled-components";
-import { jsx as jsx51, jsxs as jsxs26 } from "react/jsx-runtime";
-var PopoverWrapper = styled43.div`
+import styled44 from "styled-components";
+import { jsx as jsx52, jsxs as jsxs27 } from "react/jsx-runtime";
+var PopoverWrapper = styled44.div`
   position: relative;
   display: ${({ $fullWidth }) => $fullWidth ? "block" : "inline-block"};
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
 `;
-var PopoverTrigger = styled43.span`
+var PopoverTrigger = styled44.span`
   cursor: pointer;
   display: ${({ $fullWidth }) => $fullWidth ? "block" : "inline"};
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
 `;
-var PopoverMenu = styled43.div`
+var PopoverMenu = styled44.div`
   position: fixed;
   background: #fff;
   border: 1px solid #eee;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   border-radius: 6px;
   z-index: 99999;
-  min-width: 140px;
+  display: ${({ $horizontal }) => $horizontal ? "flex" : "block"};
+  align-items: center;
+  min-width: ${({ $horizontal }) => $horizontal ? "auto" : "140px"};
   padding: 4px;
 `;
-var PopoverItem = styled43.div`
+var PopoverItem = styled44.div`
   padding: 8px 12px;
   cursor: pointer;
   border-radius: 4px;
@@ -5161,7 +5309,9 @@ var PopoverItem = styled43.div`
   font-weight: 500;
   color: #222;
   transition: background 0.15s;
-  border-bottom: ${({ isLast }) => isLast ? "none" : "1px solid #f0f0f0"};
+  white-space: ${({ $horizontal }) => $horizontal ? "nowrap" : "normal"};
+  border-bottom: ${({ isLast, $horizontal }) => isLast || $horizontal ? "none" : "1px solid #f0f0f0"};
+  border-right: ${({ isLast, $horizontal }) => $horizontal && !isLast ? "1px solid #f0f0f0" : "none"};
   &:hover {
     background: #f5f5f5;
@@ -5173,12 +5323,14 @@ var Popover = ({
   anchorRef,
   offsetY = 8,
   align = "right",
+  direction = "vertical",
   fullWidth = false
 }) => {
-  const [open, setOpen] = useState16(false);
+  const isHorizontal = direction === "horizontal";
+  const [open, setOpen] = useState17(false);
   const ref = useRef12(null);
   const menuRef = useRef12(null);
-  const [menuPosition, setMenuPosition] = useState16({
+  const [menuPosition, setMenuPosition] = useState17({
     mode: "default",
     top: 0,
     left: 0
@@ -5196,7 +5348,7 @@ var Popover = ({
       });
     } else {
       const rect = ref.current.getBoundingClientRect();
-      const estimatedMenuHeight = items.length * 42 + 8;
+      const estimatedMenuHeight = isHorizontal ? 50 : items.length * 42 + 8;
       const menuHeight = ((_a = menuRef.current) == null ? void 0 : _a.getBoundingClientRect().height) ? menuRef.current.getBoundingClientRect().height : estimatedMenuHeight;
       const viewportPadding = 8;
       const spaceBelow = window.innerHeight - rect.bottom;
@@ -5212,7 +5364,7 @@ var Popover = ({
         width: fullWidth ? rect.width : void 0
       });
     }
-  }, [items.length, anchorRef, offsetY, align, fullWidth]);
+  }, [items.length, anchorRef, offsetY, align, fullWidth, isHorizontal]);
   useEffect14(() => {
     const handleClickOutside = (event) => {
       var _a, _b;
@@ -5247,13 +5399,14 @@ var Popover = ({
     minWidth: menuPosition.width,
     transform: align === "left" ? "none" : "translateX(-100%)"
   };
-  return /* @__PURE__ */ jsxs26(PopoverWrapper, { ref, $fullWidth: fullWidth, children: [
-    /* @__PURE__ */ jsx51(PopoverTrigger, { $fullWidth: fullWidth, onClick: () => setOpen((o) => !o), children }),
+  return /* @__PURE__ */ jsxs27(PopoverWrapper, { ref, $fullWidth: fullWidth, children: [
+    /* @__PURE__ */ jsx52(PopoverTrigger, { $fullWidth: fullWidth, onClick: () => setOpen((o) => !o), children }),
     open && createPortal2(
-      /* @__PURE__ */ jsx51(PopoverMenu, { ref: menuRef, style: menuStyle, children: items.map((item, idx) => /* @__PURE__ */ jsx51(
+      /* @__PURE__ */ jsx52(PopoverMenu, { ref: menuRef, style: menuStyle, $horizontal: isHorizontal, children: items.map((item, idx) => /* @__PURE__ */ jsx52(
         PopoverItem,
         {
           isLast: idx === items.length - 1,
+          $horizontal: isHorizontal,
           onClick: () => {
             setOpen(false);
             item.action();
@@ -5269,7 +5422,7 @@ var Popover = ({
 };
 // src/Components/MetricCard/MetricCard.tsx
-import { jsx as jsx52, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs28 } from "react/jsx-runtime";
 var MetricCard = ({
   icon,
   title,
@@ -5284,7 +5437,7 @@ var MetricCard = ({
   checked = false,
   children
 }) => {
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx53(
     Box,
     {
       padding: "16px",
@@ -5297,8 +5450,8 @@ var MetricCard = ({
         cursor: onClick ? "pointer" : "default"
       },
       onClick,
-      children: /* @__PURE__ */ jsxs27(Row, { alignItems: "center", gap: "12", fullWidth: true, children: [
-        /* @__PURE__ */ jsx52(
+      children: /* @__PURE__ */ jsxs28(Row, { alignItems: "center", gap: "12", fullWidth: true, children: [
+        /* @__PURE__ */ jsx53(
           Box,
           {
             alignItems: "center",
@@ -5309,17 +5462,17 @@ var MetricCard = ({
               height: 40,
               borderRadius: 50
             },
-            children: /* @__PURE__ */ jsx52(Icon, { name: icon, size: "m", color: iconColor, family: "regular" })
+            children: /* @__PURE__ */ jsx53(Icon, { name: icon, size: "m", color: iconColor, family: "regular" })
           }
         ),
-        children ? children : contentLayout === "row" ? /* @__PURE__ */ jsxs27(Row, { gap: "6", alignItems: "center", children: [
-          /* @__PURE__ */ jsx52(Text, { size: "s", weight: "bold", variant: valueColor || "grey_600", children: value }),
-          /* @__PURE__ */ jsx52(Text, { size: "s", variant: "grey_600", children: title })
-        ] }) : /* @__PURE__ */ jsxs27(Col, { gap: "4", children: [
-          /* @__PURE__ */ jsx52(Text, { size: "s", variant: "grey_600", children: title }),
-          /* @__PURE__ */ jsxs27(Row, { gap: "6", alignItems: "baseline", children: [
-            /* @__PURE__ */ jsx52(Text, { size: "s", weight: "bold", variant: valueColor || "grey_600", children: value }),
-            subtitle && /* @__PURE__ */ jsx52(Text, { size: "xs", variant: "grey_600", children: subtitle })
+        children ? children : contentLayout === "row" ? /* @__PURE__ */ jsxs28(Row, { gap: "6", alignItems: "center", children: [
+          /* @__PURE__ */ jsx53(Text, { size: "s", weight: "bold", variant: valueColor || "grey_600", children: value }),
+          /* @__PURE__ */ jsx53(Text, { size: "s", variant: "grey_600", children: title })
+        ] }) : /* @__PURE__ */ jsxs28(Col, { gap: "4", children: [
+          /* @__PURE__ */ jsx53(Text, { size: "s", variant: "grey_600", children: title }),
+          /* @__PURE__ */ jsxs28(Row, { gap: "6", alignItems: "baseline", children: [
+            /* @__PURE__ */ jsx53(Text, { size: "s", weight: "bold", variant: valueColor || "grey_600", children: value }),
+            subtitle && /* @__PURE__ */ jsx53(Text, { size: "xs", variant: "grey_600", children: subtitle })
           ] })
         ] })
       ] })
@@ -5328,9 +5481,9 @@ var MetricCard = ({
 };
 // src/Components/Card/Card.tsx
-import styled44 from "styled-components";
-import { jsx as jsx53 } from "react/jsx-runtime";
-var StyledCard = styled44.div`
+import styled45 from "styled-components";
+import { jsx as jsx54 } from "react/jsx-runtime";
+var StyledCard = styled45.div`
   overflow: hidden;
   transition: box-shadow 0.15s ease;
   ${(p) => p.$flexShrink !== void 0 ? `flex-shrink: ${p.$flexShrink};` : ""}
@@ -5340,7 +5493,7 @@ var StyledCard = styled44.div`
   ${(p) => p.$clickable ? "cursor: pointer;" : ""}
   ${(p) => p.$clickable ? "&:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }" : ""}
 `;
-var StyledCardInner = styled44.div`
+var StyledCardInner = styled45.div`
   width: 100%;
   padding: ${(p) => p.$padding};
 `;
@@ -5352,7 +5505,7 @@ var Card2 = ({
   padding = "10px 12px",
   borderRadius = "8px",
   flexShrink
-}) => /* @__PURE__ */ jsx53(
+}) => /* @__PURE__ */ jsx54(
   StyledCard,
   {
     $clickable: !!onClick,
@@ -5361,13 +5514,13 @@ var Card2 = ({
     $accentColor: accentColor,
     $flexShrink: flexShrink,
     onClick,
-    children: /* @__PURE__ */ jsx53(StyledCardInner, { $padding: padding, children })
+    children: /* @__PURE__ */ jsx54(StyledCardInner, { $padding: padding, children })
   }
 );
 // src/Components/Banner/Banner.tsx
-import styled45, { css as css4, keyframes as keyframes3 } from "styled-components";
-import { Fragment as Fragment7, jsx as jsx54, jsxs as jsxs28 } from "react/jsx-runtime";
+import styled46, { css as css4, keyframes as keyframes3 } from "styled-components";
+import { Fragment as Fragment7, jsx as jsx55, jsxs as jsxs29 } from "react/jsx-runtime";
 var PRESET_STYLES = {
   blue: {
     background: "rgba(219, 233, 254, 0.4)",
@@ -5447,7 +5600,7 @@ var shimmerStyle = css4`
     }
   }
 `;
-var StyledBanner = styled45.div`
+var StyledBanner = styled46.div`
   box-sizing: border-box;
   width: 100%;
   display: flex;
@@ -5460,13 +5613,13 @@ var StyledBanner = styled45.div`
   background: ${(p) => p.$background};
   ${(p) => p.$shimmer && shimmerStyle}
 `;
-var Content2 = styled45.div`
+var Content2 = styled46.div`
   display: flex;
   flex-direction: column;
   gap: 4px;
   align-items: flex-start;
 `;
-var Heading = styled45.div`
+var Heading = styled46.div`
   display: flex;
   align-items: center;
   gap: 8px;
@@ -5485,7 +5638,7 @@ var Banner = ({
 }) => {
   const style2 = resolveStyle(variant, filled);
   if (children) {
-    return /* @__PURE__ */ jsx54(
+    return /* @__PURE__ */ jsx55(
       StyledBanner,
       {
         $background: style2.background,
@@ -5495,16 +5648,16 @@ var Banner = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(
     StyledBanner,
     {
       $background: style2.background,
       $borderColor: style2.borderColor,
       $shimmer: shimmer,
       children: [
-        /* @__PURE__ */ jsx54(Content2, { children: message ? /* @__PURE__ */ jsx54(Text, { size: "s", children: message }) : /* @__PURE__ */ jsxs28(Fragment7, { children: [
-          /* @__PURE__ */ jsxs28(Heading, { children: [
-            badge && /* @__PURE__ */ jsx54(
+        /* @__PURE__ */ jsx55(Content2, { children: message ? /* @__PURE__ */ jsx55(Text, { size: "s", children: message }) : /* @__PURE__ */ jsxs29(Fragment7, { children: [
+          /* @__PURE__ */ jsxs29(Heading, { children: [
+            badge && /* @__PURE__ */ jsx55(
               Bubble,
               {
                 backgroundColor: style2.badgeBackground,
@@ -5515,7 +5668,7 @@ var Banner = ({
                 children: badge
               }
             ),
-            title && /* @__PURE__ */ jsx54(
+            title && /* @__PURE__ */ jsx55(
               Text,
               {
                 size: "s",
@@ -5525,9 +5678,9 @@ var Banner = ({
               }
             )
           ] }),
-          subtitle && /* @__PURE__ */ jsx54(Text, { size: "xs", color: toggle ? style2.accent : void 0, children: subtitle })
+          subtitle && /* @__PURE__ */ jsx55(Text, { size: "xs", color: toggle ? style2.accent : void 0, children: subtitle })
         ] }) }),
-        toggle ? /* @__PURE__ */ jsx54(
+        toggle ? /* @__PURE__ */ jsx55(
           Switch,
           {
             checked: toggle.checked,
@@ -5535,7 +5688,7 @@ var Banner = ({
             disabled: toggle.disabled,
             color: style2.accent
           }
-        ) : action && /* @__PURE__ */ jsx54(
+        ) : action && /* @__PURE__ */ jsx55(
           Button,
           {
             outline: true,
@@ -5551,137 +5704,6 @@ var Banner = ({
   );
 };
-// src/Components/Tooltip/Tooltip.tsx
-import { useState as useState17 } from "react";
-import styled46 from "styled-components";
-import { jsx as jsx55, jsxs as jsxs29 } from "react/jsx-runtime";
-var StyledTooltipWrapper = styled46.div`
-  position: relative;
-  display: inline-block;
-  cursor: pointer;
-`;
-var StyledTooltipContent = styled46.div`
-  visibility: ${(props) => props.$isVisible ? "visible" : "hidden"};
-  background-color: ${(props) => props.$backgroundColor || colors.black};
-  color: ${colors.white};
-  text-align: center;
-  padding: 8px;
-  border-radius: 4px;
-  position: absolute;
-  width: ${(props) => props.$width || "200px"};
-  height: ${(props) => props.$height || "auto"};
-  opacity: ${(props) => props.$isVisible ? 1 : 0};
-  transition: opacity 0.3s;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-  ${(props) => {
-  switch (props.$direction) {
-    case "top":
-      return `
-          bottom: 125%;
-          left: 50%;
-          transform: translateX(-50%);
-          &::after {
-            content: "";
-            position: absolute;
-            top: 100%;
-            left: 50%;
-            transform: translateX(-50%);
-            border-width: 5px;
-            border-style: solid;
-            border-color: ${props.$backgroundColor || colors.black} transparent transparent transparent;
-          }
-        `;
-    case "bottom":
-      return `
-          top: 125%;
-          left: 50%;
-          transform: translateX(-50%);
-          &::after {
-            content: "";
-            position: absolute;
-            bottom: 100%;
-            left: 50%;
-            transform: translateX(-50%);
-            border-width: 5px;
-            border-style: solid;
-            border-color: transparent transparent ${props.$backgroundColor || colors.black} transparent;
-          }
-        `;
-    case "left":
-      return `
-          top: 50%;
-          right: 125%;
-          transform: translateY(-50%);
-          &::after {
-            content: "";
-            position: absolute;
-            top: 50%;
-            left: 100%;
-            transform: translateY(-50%);
-            border-width: 5px;
-            border-style: solid;
-            border-color: transparent transparent transparent ${props.$backgroundColor || colors.black};
-          }
-        `;
-    case "right":
-    default:
-      return `
-          top: 50%;
-          left: 125%;
-          transform: translateY(-50%);
-          &::after {
-            content: "";
-            position: absolute;
-            top: 50%;
-            right: 100%;
-            transform: translateY(-50%);
-            border-width: 5px;
-            border-style: solid;
-            border-color: transparent ${props.$backgroundColor || colors.black} transparent transparent;
-          }
-        `;
-  }
-}}
-`;
-var Tooltip = ({
-  backgroundColor,
-  data = [],
-  width,
-  height,
-  direction = "top",
-  children
-}) => {
-  const [isVisible, setIsVisible] = useState17(false);
-  const handleMouseEnter = () => setIsVisible(true);
-  const handleMouseLeave = () => setIsVisible(false);
-  return /* @__PURE__ */ jsxs29(
-    StyledTooltipWrapper,
-    {
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      children: [
-        children,
-        /* @__PURE__ */ jsx55(
-          StyledTooltipContent,
-          {
-            $isVisible: isVisible,
-            $backgroundColor: backgroundColor,
-            $width: width,
-            $height: height,
-            $direction: direction,
-            children: data.length > 0 ? data.map((item, index) => /* @__PURE__ */ jsx55(Text, { size: "s", color: "white", children: item }, index)) : /* @__PURE__ */ jsx55(Text, { size: "s", color: "white", children: "Aucune donn\xE9e" })
-          }
-        )
-      ]
-    }
-  );
-};
 // src/Components/Pagination/Pagination.tsx
 import { useMemo as useMemo2 } from "react";
 import { jsx as jsx56, jsxs as jsxs30 } from "react/jsx-runtime";