design-zystem 1.0.253 → 1.0.254

package/dist/index.d.mts

@@ -249,6 +249,7 @@ interface IconProps {
     height?: string;
     backgroundColor?: string;
     isRound?: boolean;
+    shadow?: string;
     onClick?: () => void;
     className?: string;
     style?: CSSProperties;
@@ -296,6 +297,10 @@ interface LinkProps {
 }
 declare const Link: ({ children, url, newTab, download, size, variant, ...rest }: LinkProps) => react_jsx_runtime.JSX.Element;
 
+interface AvatarBadge {
+    name: string;
+    family?: 'solid' | 'regular' | 'light' | 'brands';
+}
 interface AvatarProps {
     name: string;
     src?: string | null;
@@ -303,8 +308,9 @@ interface AvatarProps {
     textColor?: string;
     size?: number;
     shape?: 'circle' | 'square';
+    badge?: AvatarBadge | null;
 }
-declare const Avatar: ({ name, src, backgroundColor, textColor, size, shape, }: AvatarProps) => react_jsx_runtime.JSX.Element;
+declare const Avatar: ({ name, src, backgroundColor, textColor, size, shape, badge, }: AvatarProps) => react_jsx_runtime.JSX.Element;
 
 interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
     label?: string;

package/dist/index.d.ts

@@ -249,6 +249,7 @@ interface IconProps {
     height?: string;
     backgroundColor?: string;
     isRound?: boolean;
+    shadow?: string;
     onClick?: () => void;
     className?: string;
     style?: CSSProperties;
@@ -296,6 +297,10 @@ interface LinkProps {
 }
 declare const Link: ({ children, url, newTab, download, size, variant, ...rest }: LinkProps) => react_jsx_runtime.JSX.Element;
 
+interface AvatarBadge {
+    name: string;
+    family?: 'solid' | 'regular' | 'light' | 'brands';
+}
 interface AvatarProps {
     name: string;
     src?: string | null;
@@ -303,8 +308,9 @@ interface AvatarProps {
     textColor?: string;
     size?: number;
     shape?: 'circle' | 'square';
+    badge?: AvatarBadge | null;
 }
-declare const Avatar: ({ name, src, backgroundColor, textColor, size, shape, }: AvatarProps) => react_jsx_runtime.JSX.Element;
+declare const Avatar: ({ name, src, backgroundColor, textColor, size, shape, badge, }: AvatarProps) => react_jsx_runtime.JSX.Element;
 
 interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
     label?: string;

package/dist/index.js

@@ -591,7 +591,8 @@ var shouldForwardProp3 = (prop) => ![
   "width",
   "height",
   "backgroundColor",
-  "isRound"
+  "isRound",
+  "shadow"
 ].includes(prop);
 var StyledIcon = import_styled_components6.default.i.withConfig({ shouldForwardProp: shouldForwardProp3 })`
   font-size: ${(props) => textSizes2[props.size] || props.size || "1em"};
@@ -609,6 +610,7 @@ var StyledIcon = import_styled_components6.default.i.withConfig({ shouldForwardP
   cursor: ${(props) => props.onClick ? "pointer" : "inherit"};
   background-color: ${(props) => colors[props.backgroundColor] || props.backgroundColor || "transparent"};
   border-radius: ${(props) => props.isRound ? "50%" : "0"};
+  text-shadow: ${(props) => props.shadow ? `0 0 6px ${colors[props.shadow] || props.shadow}` : "none"};
 `;
 var Icon = (props) => {
   const _a = props, {
@@ -1858,6 +1860,11 @@ var Image2 = (_a) => {
 
 // src/Components/Avatar/Avatar.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
+var Wrapper3 = import_styled_components16.default.div`
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+`;
 var Container = import_styled_components16.default.div`
   width: ${(props) => props.$size}px;
   height: ${(props) => props.$size}px;
@@ -1869,6 +1876,25 @@ var Container = import_styled_components16.default.div`
   flex-shrink: 0;
   overflow: hidden;
 `;
+var BadgeSlot = import_styled_components16.default.div`
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: ${(props) => Math.round(props.$size * 0.4)}px;
+  height: ${(props) => Math.round(props.$size * 0.4)}px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${colors.white};
+  border-radius: 50%;
+  box-shadow: 0 2px 6px ${colors.blue_950}66;
+  line-height: 0;
+`;
+var BadgeIcon = import_styled_components16.default.i`
+  color: ${colors.blue_950};
+  font-size: ${(props) => Math.round(props.$size * 0.2)}px;
+  line-height: 2;
+`;
 var Initials = import_styled_components16.default.span`
   color: ${(props) => props.$textColor};
   font-weight: 600;
@@ -1887,33 +1913,44 @@ var Avatar = ({
   backgroundColor,
   textColor,
   size = 56,
-  shape = "circle"
+  shape = "circle",
+  badge
 }) => {
+  var _a;
   const [hasImageError, setHasImageError] = (0, import_react7.useState)(false);
   const resolvedBackground = resolveColor(backgroundColor, colors.grey_300);
   const resolvedText = resolveColor(textColor, colors.dark);
   const initials = getInitials(name);
   const sizePx = `${size}px`;
   const borderRadius = shape === "circle" ? "50%" : "4px";
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    Container,
-    {
-      $size: size,
-      $shape: shape,
-      $backgroundColor: resolvedBackground,
-      children: src && !hasImageError ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        Image2,
-        {
-          src,
-          alt: name,
-          width: sizePx,
-          height: sizePx,
-          borderRadius,
-          onError: () => setHasImageError(true)
-        }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Initials, { $textColor: resolvedText, $size: size, children: initials })
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Wrapper3, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      Container,
+      {
+        $size: size,
+        $shape: shape,
+        $backgroundColor: resolvedBackground,
+        children: src && !hasImageError ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          Image2,
+          {
+            src,
+            alt: name,
+            width: sizePx,
+            height: sizePx,
+            borderRadius,
+            onError: () => setHasImageError(true)
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Initials, { $textColor: resolvedText, $size: size, children: initials })
+      }
+    ),
+    badge && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BadgeSlot, { $size: size, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      BadgeIcon,
+      {
+        $size: size,
+        className: `fa-${(_a = badge.family) != null ? _a : "regular"} fa-${badge.name}`
+      }
+    ) })
+  ] });
 };
 
 // src/Components/Select/Select.tsx
@@ -2751,7 +2788,7 @@ var Radio = ({
 var import_react11 = require("react");
 var import_styled_components21 = __toESM(require("styled-components"));
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var Wrapper3 = import_styled_components21.default.div`
+var Wrapper4 = import_styled_components21.default.div`
   width: 100%;
   border-radius: 8px;
   overflow: hidden;
@@ -2838,7 +2875,7 @@ var Accordion = ({
     [disabled, activeItemId, isMultiControlled, onItemToggle]
   );
   if (items) {
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Wrapper3, { children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(ItemWrapper, { $bordered: bordered, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Wrapper4, { children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(ItemWrapper, { $bordered: bordered, children: [
       /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
         Header,
         {
@@ -3791,7 +3828,7 @@ var Options = ({
 var import_react19 = require("react");
 var import_styled_components37 = __toESM(require("styled-components"));
 var import_jsx_runtime44 = require("react/jsx-runtime");
-var Wrapper4 = import_styled_components37.default.nav`
+var Wrapper5 = import_styled_components37.default.nav`
   width: 100%;
   display: flex;
   align-items: center;
@@ -3824,7 +3861,7 @@ var Stepper = ({
   size = 28,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Wrapper4, { "aria-label": "progression", className, children: Array.from({ length: numberOfSteps }, (_, i) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Wrapper5, { "aria-label": "progression", className, children: Array.from({ length: numberOfSteps }, (_, i) => {
     const isActive = i === current;
     const isCompleted = i < current;
     return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react19.Fragment, { children: [
@@ -5390,7 +5427,7 @@ var CountBadge = import_styled_components45.default.span`
 var import_styled_components46 = __toESM(require("styled-components"));
 var import_jsx_runtime57 = require("react/jsx-runtime");
 var clampPercent = (value) => Math.max(0, Math.min(100, value));
-var Wrapper5 = import_styled_components46.default.div`
+var Wrapper6 = import_styled_components46.default.div`
   display: flex;
   align-items: center;
   gap: 8px;
@@ -5419,7 +5456,7 @@ var ProgressBar = ({
   showLabel = false
 }) => {
   const percent = clampPercent(value);
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Wrapper5, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Wrapper6, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Track2, { $height: height, $trackColor: trackColor, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Fill, { $height: height, $color: color, $percent: percent }) }),
     showLabel && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Text, { size: "s", weight: "600", children: [
       Math.round(percent),

package/dist/index.mjs

@@ -492,7 +492,8 @@ var shouldForwardProp3 = (prop) => ![
   "width",
   "height",
   "backgroundColor",
-  "isRound"
+  "isRound",
+  "shadow"
 ].includes(prop);
 var StyledIcon = styled6.i.withConfig({ shouldForwardProp: shouldForwardProp3 })`
   font-size: ${(props) => textSizes2[props.size] || props.size || "1em"};
@@ -510,6 +511,7 @@ var StyledIcon = styled6.i.withConfig({ shouldForwardProp: shouldForwardProp3 })
   cursor: ${(props) => props.onClick ? "pointer" : "inherit"};
   background-color: ${(props) => colors[props.backgroundColor] || props.backgroundColor || "transparent"};
   border-radius: ${(props) => props.isRound ? "50%" : "0"};
+  text-shadow: ${(props) => props.shadow ? `0 0 6px ${colors[props.shadow] || props.shadow}` : "none"};
 `;
 var Icon = (props) => {
   const _a = props, {
@@ -1758,7 +1760,12 @@ var Image2 = (_a) => {
 };
 
 // src/Components/Avatar/Avatar.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs8 } from "react/jsx-runtime";
+var Wrapper3 = styled16.div`
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+`;
 var Container = styled16.div`
   width: ${(props) => props.$size}px;
   height: ${(props) => props.$size}px;
@@ -1770,6 +1777,25 @@ var Container = styled16.div`
   flex-shrink: 0;
   overflow: hidden;
 `;
+var BadgeSlot = styled16.div`
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: ${(props) => Math.round(props.$size * 0.4)}px;
+  height: ${(props) => Math.round(props.$size * 0.4)}px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${colors.white};
+  border-radius: 50%;
+  box-shadow: 0 2px 6px ${colors.blue_950}66;
+  line-height: 0;
+`;
+var BadgeIcon = styled16.i`
+  color: ${colors.blue_950};
+  font-size: ${(props) => Math.round(props.$size * 0.2)}px;
+  line-height: 2;
+`;
 var Initials = styled16.span`
   color: ${(props) => props.$textColor};
   font-weight: 600;
@@ -1788,40 +1814,51 @@ var Avatar = ({
   backgroundColor,
   textColor,
   size = 56,
-  shape = "circle"
+  shape = "circle",
+  badge
 }) => {
+  var _a;
   const [hasImageError, setHasImageError] = useState4(false);
   const resolvedBackground = resolveColor(backgroundColor, colors.grey_300);
   const resolvedText = resolveColor(textColor, colors.dark);
   const initials = getInitials(name);
   const sizePx = `${size}px`;
   const borderRadius = shape === "circle" ? "50%" : "4px";
-  return /* @__PURE__ */ jsx20(
-    Container,
-    {
-      $size: size,
-      $shape: shape,
-      $backgroundColor: resolvedBackground,
-      children: src && !hasImageError ? /* @__PURE__ */ jsx20(
-        Image2,
-        {
-          src,
-          alt: name,
-          width: sizePx,
-          height: sizePx,
-          borderRadius,
-          onError: () => setHasImageError(true)
-        }
-      ) : /* @__PURE__ */ jsx20(Initials, { $textColor: resolvedText, $size: size, children: initials })
-    }
-  );
+  return /* @__PURE__ */ jsxs8(Wrapper3, { children: [
+    /* @__PURE__ */ jsx20(
+      Container,
+      {
+        $size: size,
+        $shape: shape,
+        $backgroundColor: resolvedBackground,
+        children: src && !hasImageError ? /* @__PURE__ */ jsx20(
+          Image2,
+          {
+            src,
+            alt: name,
+            width: sizePx,
+            height: sizePx,
+            borderRadius,
+            onError: () => setHasImageError(true)
+          }
+        ) : /* @__PURE__ */ jsx20(Initials, { $textColor: resolvedText, $size: size, children: initials })
+      }
+    ),
+    badge && /* @__PURE__ */ jsx20(BadgeSlot, { $size: size, children: /* @__PURE__ */ jsx20(
+      BadgeIcon,
+      {
+        $size: size,
+        className: `fa-${(_a = badge.family) != null ? _a : "regular"} fa-${badge.name}`
+      }
+    ) })
+  ] });
 };
 
 // src/Components/Select/Select.tsx
 import { useState as useState5, useRef as useRef5, useEffect as useEffect5 } from "react";
 import ReactDOM from "react-dom";
 import styled17 from "styled-components";
-import { jsx as jsx21, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
 var StyledContainer = styled17.div.withConfig({
   shouldForwardProp: (prop) => !["width", "noFlex", "label"].includes(prop)
 })`
@@ -2022,14 +2059,14 @@ var Select = ({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [isOpen]);
-  return /* @__PURE__ */ jsxs8(StyledContainer, { width, noFlex, label, children: [
-    /* @__PURE__ */ jsxs8(Text, { size: "xs", children: [
+  return /* @__PURE__ */ jsxs9(StyledContainer, { width, noFlex, label, children: [
+    /* @__PURE__ */ jsxs9(Text, { size: "xs", children: [
       label,
       " ",
       required && /* @__PURE__ */ jsx21(Text, { style: { color: "red" }, children: "*" })
     ] }),
-    /* @__PURE__ */ jsxs8(SelectWrapper, { ref: containerRef, onKeyDown: handleKeyDown, tabIndex: 0, children: [
-      /* @__PURE__ */ jsxs8(
+    /* @__PURE__ */ jsxs9(SelectWrapper, { ref: containerRef, onKeyDown: handleKeyDown, tabIndex: 0, children: [
+      /* @__PURE__ */ jsxs9(
         SelectInput,
         {
           height,
@@ -2044,7 +2081,7 @@ var Select = ({
         }
       ),
       isOpen && ReactDOM.createPortal(
-        /* @__PURE__ */ jsxs8(
+        /* @__PURE__ */ jsxs9(
           Dropdown,
           {
             ref: dropdownRef,
@@ -2093,7 +2130,7 @@ import {
   useState as useState6
 } from "react";
 import styled18 from "styled-components";
-import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
 var shouldForwardProp8 = (prop) => ![
   "width",
   "fullWidth",
@@ -2424,20 +2461,20 @@ var Input = forwardRef2((props, ref) => {
       }
     }
   };
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     StyledContainer2,
     __spreadProps(__spreadValues({
       noFlex
     }, forwardProps), {
       children: [
-        label && /* @__PURE__ */ jsxs9(Text_default, { size: "xs", children: [
+        label && /* @__PURE__ */ jsxs10(Text_default, { size: "xs", children: [
           label,
           " ",
           required && /* @__PURE__ */ jsx22("span", { style: { color: "red" }, children: "*" })
         ] }),
-        /* @__PURE__ */ jsxs9(InputWrapper, { children: [
+        /* @__PURE__ */ jsxs10(InputWrapper, { children: [
           isSearch && /* @__PURE__ */ jsx22(SearchIconLeft, { children: /* @__PURE__ */ jsx22(Icon_default, { name: "magnifying-glass", size: "s", color: "grey_500" }) }),
-          isDate ? /* @__PURE__ */ jsxs9(Fragment3, { children: [
+          isDate ? /* @__PURE__ */ jsxs10(Fragment3, { children: [
             /* @__PURE__ */ jsx22(
               StyledInput,
               __spreadProps(__spreadValues({
@@ -2535,7 +2572,7 @@ Input.displayName = "Input";
 
 // src/Components/Checkbox/Checkbox.tsx
 import styled19 from "styled-components";
-import { jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
 var CheckboxContainer = styled19.div`
   display: flex;
   flex-direction: row;
@@ -2562,7 +2599,7 @@ var Checkbox = ({
   variant = "blue_700"
 }) => {
   const uniqueId = `checkbox-${Math.random().toString(36).substr(2, 9)}`;
-  return /* @__PURE__ */ jsxs10(CheckboxContainer, { children: [
+  return /* @__PURE__ */ jsxs11(CheckboxContainer, { children: [
     /* @__PURE__ */ jsx23(
       StyledCheckbox,
       {
@@ -2580,7 +2617,7 @@ var Checkbox = ({
 // src/Components/Radio/Radio.tsx
 import { useId } from "react";
 import styled20 from "styled-components";
-import { jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
 var RadioContainer = styled20.div`
   display: flex;
   flex-direction: row;
@@ -2637,7 +2674,7 @@ var Radio = ({
   const color = colors[variant] || colors.blue_950;
   const generatedId = useId();
   const uniqueId = `radio-${generatedId}`;
-  return /* @__PURE__ */ jsx24(RadioContainer, { children: /* @__PURE__ */ jsxs11(StyledLabel2, { htmlFor: uniqueId, disabled, children: [
+  return /* @__PURE__ */ jsx24(RadioContainer, { children: /* @__PURE__ */ jsxs12(StyledLabel2, { htmlFor: uniqueId, disabled, children: [
     /* @__PURE__ */ jsx24(
       HiddenRadio,
       {
@@ -2657,8 +2694,8 @@ var Radio = ({
 // src/Components/Accordion/Accordion.tsx
 import { useState as useState7, useCallback as useCallback2 } from "react";
 import styled21 from "styled-components";
-import { jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
-var Wrapper3 = styled21.div`
+import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
+var Wrapper4 = styled21.div`
   width: 100%;
   border-radius: 8px;
   overflow: hidden;
@@ -2745,8 +2782,8 @@ var Accordion = ({
     [disabled, activeItemId, isMultiControlled, onItemToggle]
   );
   if (items) {
-    return /* @__PURE__ */ jsx25(Wrapper3, { children: items.map((item) => /* @__PURE__ */ jsxs12(ItemWrapper, { $bordered: bordered, children: [
-      /* @__PURE__ */ jsxs12(
+    return /* @__PURE__ */ jsx25(Wrapper4, { children: items.map((item) => /* @__PURE__ */ jsxs13(ItemWrapper, { $bordered: bordered, children: [
+      /* @__PURE__ */ jsxs13(
         Header,
         {
           $disabled: disabled,
@@ -2770,8 +2807,8 @@ var Accordion = ({
       /* @__PURE__ */ jsx25(Collapse, { open: activeItemId === item.id, maxHeight, children: /* @__PURE__ */ jsx25(ContentPadding, { children: item.content }) })
     ] }, item.id)) });
   }
-  return /* @__PURE__ */ jsxs12(ItemWrapper, { $bordered: bordered, children: [
-    /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(ItemWrapper, { $bordered: bordered, children: [
+    /* @__PURE__ */ jsxs13(
       Header,
       {
         $disabled: disabled,
@@ -2801,7 +2838,7 @@ var Accordion = ({
 // src/Components/ColorPicker/ColorPicker.tsx
 import { forwardRef as forwardRef3, useState as useState8, useRef as useRef7, useEffect as useEffect7 } from "react";
 import styled22 from "styled-components";
-import { jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
 var SIZES = {
   s: { swatch: 28, fontSize: 12, inputPadding: "6px 10px" },
   m: { swatch: 36, fontSize: 14, inputPadding: "8px 12px" },
@@ -2904,9 +2941,9 @@ var ColorPicker = forwardRef3(
       }
       onChange == null ? void 0 : onChange(newColor);
     };
-    return /* @__PURE__ */ jsxs13(Container2, { $disabled: disabled, children: [
+    return /* @__PURE__ */ jsxs14(Container2, { $disabled: disabled, children: [
       label && /* @__PURE__ */ jsx26(Text, { size: TEXT_SIZE_MAP[size], weight: "600", children: label }),
-      /* @__PURE__ */ jsxs13(InputRow, { children: [
+      /* @__PURE__ */ jsxs14(InputRow, { children: [
         /* @__PURE__ */ jsx26(SwatchLabel, { $disabled: disabled, $size: dims.swatch, children: /* @__PURE__ */ jsx26(Swatch, { $color: currentColor, children: /* @__PURE__ */ jsx26(
           HiddenInput,
           {
@@ -2937,7 +2974,7 @@ ColorPicker.displayName = "ColorPicker";
 // src/Components/SliderInput/SliderInput.tsx
 import { forwardRef as forwardRef4 } from "react";
 import styled23 from "styled-components";
-import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
 var Container3 = styled23.label`
   display: flex;
   flex-direction: column;
@@ -3036,9 +3073,9 @@ var SliderInput = forwardRef4(
     const handleChange = (e) => {
       onChange == null ? void 0 : onChange(Number(e.target.value), e);
     };
-    return /* @__PURE__ */ jsxs14(Container3, { $disabled: disabled, htmlFor: id, children: [
+    return /* @__PURE__ */ jsxs15(Container3, { $disabled: disabled, htmlFor: id, children: [
       label && /* @__PURE__ */ jsx27(Text, { size: "xs", color: "grey_600", children: label }),
-      /* @__PURE__ */ jsxs14(TrackWrapper, { children: [
+      /* @__PURE__ */ jsxs15(TrackWrapper, { children: [
         showValue && /* @__PURE__ */ jsx27(ValueBubble, { $left: progress, children: /* @__PURE__ */ jsx27(Text, { size: "xs", weight: "600", children: display(current) }) }),
         /* @__PURE__ */ jsx27(
           TrackInput,
@@ -3056,7 +3093,7 @@ var SliderInput = forwardRef4(
           }
         )
       ] }),
-      showValue && /* @__PURE__ */ jsxs14(MinMaxRow, { children: [
+      showValue && /* @__PURE__ */ jsxs15(MinMaxRow, { children: [
         /* @__PURE__ */ jsx27(Text, { size: "xs", color: "grey_600", children: display(min) }),
         /* @__PURE__ */ jsx27(Text, { size: "xs", color: "grey_600", children: display(max) })
       ] })
@@ -3307,7 +3344,7 @@ var TableCell = (props) => {
 // src/Components/Table/TableHeaderCell/TableHeaderCell.tsx
 import { useState as useState9 } from "react";
 import styled31 from "styled-components";
-import { jsx as jsx35, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs16 } from "react/jsx-runtime";
 var shouldForwardPropTableHeaderCell = (prop) => !["useSort", "isSort", "flexGrow", "flexShrink", "width"].includes(prop);
 var StyledTableHeaderCell = styled31.div.withConfig({
   shouldForwardProp: shouldForwardPropTableHeaderCell
@@ -3360,7 +3397,7 @@ var TableHeaderCell = (props) => {
         if (useSort) setHovered(false);
         (_a2 = otherProps.onMouseLeave) == null ? void 0 : _a2.call(otherProps, e);
       },
-      children: useSort ? /* @__PURE__ */ jsxs15(SortingButton, { children: [
+      children: useSort ? /* @__PURE__ */ jsxs16(SortingButton, { children: [
         children,
         showArrow && /* @__PURE__ */ jsx35(SortArrow, { $opacity: arrowOpacity, children: arrowChar })
       ] }) : children
@@ -3464,7 +3501,7 @@ var TableFooterCell = (props) => {
 };
 
 // src/Components/Table/SkeletonRow/SkeletonRow.tsx
-import { Fragment as Fragment4, jsx as jsx40, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx40, jsxs as jsxs17 } from "react/jsx-runtime";
 var style = `
 .skeleton-loader {
   width: 100%;
@@ -3483,7 +3520,7 @@ var style = `
   }
 }
 `;
-var SkeletonRow = ({ columns = 9 }) => /* @__PURE__ */ jsxs16(Fragment4, { children: [
+var SkeletonRow = ({ columns = 9 }) => /* @__PURE__ */ jsxs17(Fragment4, { children: [
   /* @__PURE__ */ jsx40("style", { children: style }),
   /* @__PURE__ */ jsx40(TableRow, { children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ jsx40(TableCell, { children: /* @__PURE__ */ jsx40("div", { className: "skeleton-loader" }) }, index)) })
 ] });
@@ -3491,7 +3528,7 @@ var SkeletonRow = ({ columns = 9 }) => /* @__PURE__ */ jsxs16(Fragment4, { child
 // src/Components/Switch/Switch.tsx
 import { forwardRef as forwardRef7 } from "react";
 import styled36, { css } from "styled-components";
-import { jsx as jsx41, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs18 } from "react/jsx-runtime";
 var BASE = {
   s: { w: 36, h: 20, knob: 16, pad: 2 },
   m: { w: 48, h: 28, knob: 24, pad: 2 },
@@ -3592,7 +3629,7 @@ var Switch = forwardRef7(
       if (disabled) return;
       onChange == null ? void 0 : onChange(!!e.target.checked, e);
     };
-    return /* @__PURE__ */ jsxs17(Container4, { $disabled: disabled, htmlFor: id, children: [
+    return /* @__PURE__ */ jsxs18(Container4, { $disabled: disabled, htmlFor: id, children: [
       /* @__PURE__ */ jsx41(
         HiddenCheckbox,
         __spreadValues({
@@ -3627,7 +3664,7 @@ var CardSkeleton = () => {
 
 // src/Components/Options/Options.tsx
 import { useState as useState10, useEffect as useEffect8 } from "react";
-import { jsx as jsx43, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs19 } from "react/jsx-runtime";
 var Options = ({
   icon,
   options,
@@ -3686,7 +3723,7 @@ var Options = ({
           e.currentTarget.style.transform = "translateY(0px)";
         }
       },
-      children: /* @__PURE__ */ jsxs18(Row_default, { gap: "8", alignItems: "center", justifyContent: "center", children: [
+      children: /* @__PURE__ */ jsxs19(Row_default, { gap: "8", alignItems: "center", justifyContent: "center", children: [
         /* @__PURE__ */ jsx43(Col_default, { children: /* @__PURE__ */ jsx43(Icon_default, { name: icon, type: "regular", color: "#414652" }) }),
         /* @__PURE__ */ jsx43(Col_default, { children: label })
       ] })
@@ -3697,8 +3734,8 @@ var Options = ({
 // src/Components/Stepper/Stepper.tsx
 import { Fragment as Fragment5 } from "react";
 import styled37 from "styled-components";
-import { jsx as jsx44, jsxs as jsxs19 } from "react/jsx-runtime";
-var Wrapper4 = styled37.nav`
+import { jsx as jsx44, jsxs as jsxs20 } from "react/jsx-runtime";
+var Wrapper5 = styled37.nav`
   width: 100%;
   display: flex;
   align-items: center;
@@ -3731,10 +3768,10 @@ var Stepper = ({
   size = 28,
   className
 }) => {
-  return /* @__PURE__ */ jsx44(Wrapper4, { "aria-label": "progression", className, children: Array.from({ length: numberOfSteps }, (_, i) => {
+  return /* @__PURE__ */ jsx44(Wrapper5, { "aria-label": "progression", className, children: Array.from({ length: numberOfSteps }, (_, i) => {
     const isActive = i === current;
     const isCompleted = i < current;
-    return /* @__PURE__ */ jsxs19(Fragment5, { children: [
+    return /* @__PURE__ */ jsxs20(Fragment5, { children: [
       /* @__PURE__ */ jsx44(
         Circle,
         {
@@ -3762,7 +3799,7 @@ import {
   cloneElement
 } from "react";
 import styled38 from "styled-components";
-import { jsx as jsx45, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs21 } from "react/jsx-runtime";
 var TOKENS = {
   fontFamily: '"Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif'
 };
@@ -3953,7 +3990,7 @@ var Tabs = (_a) => {
   const isPillsFullWidth = variant === "pills" && align === "start";
   const rendered = useMemo(() => {
     if (items && items.length) {
-      return items.map((it) => /* @__PURE__ */ jsxs20(
+      return items.map((it) => /* @__PURE__ */ jsxs21(
         Tab,
         {
           id: it.id,
@@ -3985,7 +4022,7 @@ var Tabs = (_a) => {
       });
     });
   }, [items, children, value, variant, isPillsFullWidth, handleSelect]);
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(
     TabsRoot,
     __spreadProps(__spreadValues({
       ref: rootRef,
@@ -4006,7 +4043,7 @@ var Tabs = (_a) => {
 // src/Components/MultiSelect/MultiSelect.tsx
 import { useState as useState12, useRef as useRef9, useEffect as useEffect10 } from "react";
 import styled39 from "styled-components";
-import { jsx as jsx46, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs22 } from "react/jsx-runtime";
 var Container5 = styled39.div`
   position: relative;
   display: inline-block;
@@ -4067,7 +4104,7 @@ var MultiSelect = ({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  return /* @__PURE__ */ jsxs21(Container5, { ref: dropdownRef, children: [
+  return /* @__PURE__ */ jsxs22(Container5, { ref: dropdownRef, children: [
     /* @__PURE__ */ jsx46(
       Button,
       {
@@ -4078,10 +4115,10 @@ var MultiSelect = ({
         disabled
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs21(Dropdown2, { $width: width, $align: align, children: [
+    isOpen && /* @__PURE__ */ jsxs22(Dropdown2, { $width: width, $align: align, children: [
       options.map(({ label: optLabel, value }) => {
         const active = selectedValues.includes(value);
-        return /* @__PURE__ */ jsxs21(Item, { onClick: () => toggleOption(value), children: [
+        return /* @__PURE__ */ jsxs22(Item, { onClick: () => toggleOption(value), children: [
           /* @__PURE__ */ jsx46(
             Icon,
             {
@@ -4101,7 +4138,7 @@ var MultiSelect = ({
 
 // src/Components/DatePicker/DatePicker.tsx
 import { useState as useState13, useRef as useRef10, useEffect as useEffect11 } from "react";
-import { jsx as jsx47, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs23 } from "react/jsx-runtime";
 var DatePicker = ({ onChange, size = "s" }) => {
   const [isOpen, setIsOpen] = useState13(false);
   const [startDate, setStartDate] = useState13(null);
@@ -4192,7 +4229,7 @@ var DatePicker = ({ onChange, size = "s" }) => {
     "D\xE9cembre"
   ];
   const dayNames = ["Lun", "Mar", "Mer", "Jeu", "Ven", "Sam", "Dim"];
-  return /* @__PURE__ */ jsxs22("div", { className: "date-picker-container", ref, children: [
+  return /* @__PURE__ */ jsxs23("div", { className: "date-picker-container", ref, children: [
     /* @__PURE__ */ jsx47(Button, { onClick: toggleCalendar, size, iconLeft: "calendar" }),
     isFiltered && /* @__PURE__ */ jsx47(
       "span",
@@ -4215,8 +4252,8 @@ var DatePicker = ({ onChange, size = "s" }) => {
         children: /* @__PURE__ */ jsx47(Icon, { name: "xmark", size: "s", color: colors.white })
       }
     ),
-    isOpen && /* @__PURE__ */ jsx47("div", { className: "date-picker-popup", children: /* @__PURE__ */ jsx47("div", { className: "date-picker-content", children: /* @__PURE__ */ jsxs22("div", { className: "calendar-container", children: [
-      /* @__PURE__ */ jsxs22("div", { className: "calendar-header", children: [
+    isOpen && /* @__PURE__ */ jsx47("div", { className: "date-picker-popup", children: /* @__PURE__ */ jsx47("div", { className: "date-picker-content", children: /* @__PURE__ */ jsxs23("div", { className: "calendar-container", children: [
+      /* @__PURE__ */ jsxs23("div", { className: "calendar-header", children: [
         /* @__PURE__ */ jsx47(
           "button",
           {
@@ -4243,7 +4280,7 @@ var DatePicker = ({ onChange, size = "s" }) => {
             )
           }
         ),
-        /* @__PURE__ */ jsxs22("h3", { className: "calendar-month-title", children: [
+        /* @__PURE__ */ jsxs23("h3", { className: "calendar-month-title", children: [
           monthNames[currentMonth.getMonth()],
           " ",
           currentMonth.getFullYear()
@@ -4298,7 +4335,7 @@ var DatePicker = ({ onChange, size = "s" }) => {
           index
         );
       }) }),
-      startDate && /* @__PURE__ */ jsx47("div", { className: "selected-dates-display", children: /* @__PURE__ */ jsx47("div", { className: "selected-dates-text", children: endDate ? /* @__PURE__ */ jsxs22("span", { children: [
+      startDate && /* @__PURE__ */ jsx47("div", { className: "selected-dates-display", children: /* @__PURE__ */ jsx47("div", { className: "selected-dates-text", children: endDate ? /* @__PURE__ */ jsxs23("span", { children: [
         /* @__PURE__ */ jsx47("strong", { children: "Du:" }),
         " ",
         formatDate(startDate, "weekday", "fr"),
@@ -4306,7 +4343,7 @@ var DatePicker = ({ onChange, size = "s" }) => {
         /* @__PURE__ */ jsx47("strong", { children: "Au:" }),
         " ",
         formatDate(endDate, "weekday", "fr")
-      ] }) : /* @__PURE__ */ jsxs22("span", { children: [
+      ] }) : /* @__PURE__ */ jsxs23("span", { children: [
         /* @__PURE__ */ jsx47("strong", { children: "D\xE9but:" }),
         " ",
         formatDate(startDate, "weekday", "fr"),
@@ -4320,7 +4357,7 @@ var DatePicker = ({ onChange, size = "s" }) => {
 // src/Components/IconTabs/IconTabs.tsx
 import { useState as useState14, useEffect as useEffect12, useRef as useRef11 } from "react";
 import styled40, { css as css2 } from "styled-components";
-import { jsx as jsx48, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs24 } from "react/jsx-runtime";
 var TabsContainer = styled40.div`
   display: flex;
   flex-direction: column;
@@ -4403,8 +4440,8 @@ var IconTabs = ({
       sliderRef.current.style.backgroundColor = colors[selectedColor];
     }
   }, [selectedTab, selectedColor]);
-  return /* @__PURE__ */ jsxs23(TabsContainer, { children: [
-    /* @__PURE__ */ jsxs23(IconsRow, { children: [
+  return /* @__PURE__ */ jsxs24(TabsContainer, { children: [
+    /* @__PURE__ */ jsxs24(IconsRow, { children: [
       items.map((item, index) => /* @__PURE__ */ jsx48(
         Tab2,
         {
@@ -4441,7 +4478,7 @@ import {
 } from "react";
 import { createPortal } from "react-dom";
 import styled41 from "styled-components";
-import { jsx as jsx49, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs25 } from "react/jsx-runtime";
 var PopoverWrapper = styled41.div`
   position: relative;
   display: inline-block;
@@ -4549,7 +4586,7 @@ var Popover = ({
     left: menuPosition.left,
     transform: "translateX(-100%)"
   };
-  return /* @__PURE__ */ jsxs24(PopoverWrapper, { ref, children: [
+  return /* @__PURE__ */ jsxs25(PopoverWrapper, { ref, children: [
     /* @__PURE__ */ jsx49(PopoverTrigger, { onClick: () => setOpen((o) => !o), children }),
     open && createPortal(
       /* @__PURE__ */ jsx49(PopoverMenu, { ref: menuRef, style: menuStyle, children: items.map((item, idx) => /* @__PURE__ */ jsx49(
@@ -4571,7 +4608,7 @@ var Popover = ({
 };
 
 // src/Components/MetricCard/MetricCard.tsx
-import { jsx as jsx50, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs26 } from "react/jsx-runtime";
 var MetricCard = ({
   icon,
   title,
@@ -4595,7 +4632,7 @@ var MetricCard = ({
         cursor: onClick ? "pointer" : "default"
       },
       onClick,
-      children: /* @__PURE__ */ jsxs25(Row, { alignItems: "center", gap: "12", fullWidth: true, children: [
+      children: /* @__PURE__ */ jsxs26(Row, { alignItems: "center", gap: "12", fullWidth: true, children: [
         /* @__PURE__ */ jsx50(
           Box,
           {
@@ -4610,12 +4647,12 @@ var MetricCard = ({
             children: /* @__PURE__ */ jsx50(Icon, { name: icon, size: "m", color: iconColor, family: "regular" })
           }
         ),
-        contentLayout === "row" ? /* @__PURE__ */ jsxs25(Row, { gap: "6", alignItems: "center", children: [
+        contentLayout === "row" ? /* @__PURE__ */ jsxs26(Row, { gap: "6", alignItems: "center", children: [
           /* @__PURE__ */ jsx50(Text, { size: "s", weight: "bold", variant: valueColor || "grey_600", children: value }),
           /* @__PURE__ */ jsx50(Text, { size: "s", variant: "grey_600", children: title })
-        ] }) : /* @__PURE__ */ jsxs25(Col, { gap: "4", children: [
+        ] }) : /* @__PURE__ */ jsxs26(Col, { gap: "4", children: [
           /* @__PURE__ */ jsx50(Text, { size: "s", variant: "grey_600", children: title }),
-          /* @__PURE__ */ jsxs25(Row, { gap: "6", alignItems: "baseline", children: [
+          /* @__PURE__ */ jsxs26(Row, { gap: "6", alignItems: "baseline", children: [
             /* @__PURE__ */ jsx50(Text, { size: "s", weight: "bold", variant: valueColor || "grey_600", children: value }),
             subtitle && /* @__PURE__ */ jsx50(Text, { size: "xs", variant: "grey_600", children: subtitle })
           ] })
@@ -4628,7 +4665,7 @@ var MetricCard = ({
 // src/Components/Tooltip/Tooltip.tsx
 import { useState as useState16 } from "react";
 import styled42 from "styled-components";
-import { jsx as jsx51, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs27 } from "react/jsx-runtime";
 var StyledTooltipWrapper = styled42.div`
   position: relative;
   display: inline-block;
@@ -4733,7 +4770,7 @@ var Tooltip = ({
   const [isVisible, setIsVisible] = useState16(false);
   const handleMouseEnter = () => setIsVisible(true);
   const handleMouseLeave = () => setIsVisible(false);
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs27(
     StyledTooltipWrapper,
     {
       onMouseEnter: handleMouseEnter,
@@ -4758,7 +4795,7 @@ var Tooltip = ({
 
 // src/Components/Pagination/Pagination.tsx
 import { useMemo as useMemo2 } from "react";
-import { jsx as jsx52, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs28 } from "react/jsx-runtime";
 var getPageNumbers = (current, total) => {
   if (total <= 5) {
     return Array.from({ length: total }, (_, i) => i + 1);
@@ -4788,14 +4825,14 @@ var Pagination = ({
   const startItem = (currentPage - 1) * itemsPerPage + 1;
   const endItem = Math.min(currentPage * itemsPerPage, totalItems);
   const summary = summaryLabel || defaultSummary(startItem, endItem, totalItems);
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28(
     Row,
     {
       justifyContent: showSummary ? "space-between" : "flex-end",
       alignItems: "center",
       children: [
         showSummary && /* @__PURE__ */ jsx52(Text, { size: "s", color: colors.grey_500, children: summary }),
-        /* @__PURE__ */ jsxs27(Row, { gap: "4", alignItems: "center", style: { width: "fit-content" }, children: [
+        /* @__PURE__ */ jsxs28(Row, { gap: "4", alignItems: "center", style: { width: "fit-content" }, children: [
           /* @__PURE__ */ jsx52(
             Button,
             {
@@ -4837,7 +4874,7 @@ var Pagination = ({
 // src/Components/FileUploadZone/FileUploadZone.tsx
 import { useState as useState17, useRef as useRef13, useCallback as useCallback5 } from "react";
 import styled43 from "styled-components";
-import { jsx as jsx53, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs29 } from "react/jsx-runtime";
 var ACCEPT_MAP = {
   png: "image/png",
   jpg: "image/jpeg",
@@ -5035,7 +5072,7 @@ var FileUploadZone = ({
     onRemove == null ? void 0 : onRemove();
   };
   if (previewUrl) {
-    return /* @__PURE__ */ jsxs28(StyledPreview, { $fullWidth: fullWidth, children: [
+    return /* @__PURE__ */ jsxs29(StyledPreview, { $fullWidth: fullWidth, children: [
       fileType && isPdf(fileType) ? /* @__PURE__ */ jsx53(StyledEmbed, { src: previewUrl, type: "application/pdf" }) : /* @__PURE__ */ jsx53(StyledImage2, { src: previewUrl, alt: "Aper\xE7u du fichier" }),
       /* @__PURE__ */ jsx53(Row, { gap: "8", justifyContent: "center", children: /* @__PURE__ */ jsx53(
         Button,
@@ -5051,8 +5088,8 @@ var FileUploadZone = ({
   }
   const showIcon = icon !== false;
   const showBrowse = !compact && browseLabel !== false;
-  return /* @__PURE__ */ jsxs28(Col, { gap: "4", fullWidth, children: [
-    /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(Col, { gap: "4", fullWidth, children: [
+    /* @__PURE__ */ jsxs29(
       StyledDropZone,
       {
         $isDragging: isDragging,
@@ -5102,7 +5139,7 @@ var FileUploadZone = ({
         ]
       }
     ),
-    showFileName && fileName && /* @__PURE__ */ jsxs28(Row, { gap: "8", alignItems: "center", justifyContent: "center", children: [
+    showFileName && fileName && /* @__PURE__ */ jsxs29(Row, { gap: "8", alignItems: "center", justifyContent: "center", children: [
       /* @__PURE__ */ jsx53(Icon, { name: "file", size: "s", color: "green_700" }),
       /* @__PURE__ */ jsx53(Text, { size: "s", color: "green_700", children: fileName })
     ] }),
@@ -5147,7 +5184,7 @@ var Spinner = ({ size = "m", color = "primary" }) => {
 };
 
 // src/Components/EmptyState/EmptyState.tsx
-import { jsx as jsx55, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs30 } from "react/jsx-runtime";
 var EmptyState = ({
   icon = "inbox",
   title = "Aucun r\xE9sultat",
@@ -5155,7 +5192,7 @@ var EmptyState = ({
   actionLabel,
   onAction
 }) => {
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     Col,
     {
       fullWidth: true,
@@ -5165,7 +5202,7 @@ var EmptyState = ({
       padding: "24px 16px",
       children: [
         /* @__PURE__ */ jsx55(Icon, { name: icon, family: "solid", size: "xxl", color: "grey_300" }),
-        /* @__PURE__ */ jsxs29(Col, { alignItems: "center", gap: "4", style: { maxWidth: "360px" }, children: [
+        /* @__PURE__ */ jsxs30(Col, { alignItems: "center", gap: "4", style: { maxWidth: "360px" }, children: [
           /* @__PURE__ */ jsx55(Text, { size: "m", weight: "600", variant: "grey_600", align: "center", children: title }),
           description && /* @__PURE__ */ jsx55(Text, { size: "s", variant: "grey_500", align: "center", children: description })
         ] }),
@@ -5177,7 +5214,7 @@ var EmptyState = ({
 
 // src/Components/FloatingButton/FloatingButton.tsx
 import styled45 from "styled-components";
-import { jsx as jsx56, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs31 } from "react/jsx-runtime";
 var FloatingButton = ({
   isOpen,
   onToggle,
@@ -5189,10 +5226,10 @@ var FloatingButton = ({
   variant = "blue_700"
 }) => {
   const accent = colors[variant];
-  return /* @__PURE__ */ jsxs30(Container6, { children: [
+  return /* @__PURE__ */ jsxs31(Container6, { children: [
     actions.map((action, index) => {
       var _a;
-      return /* @__PURE__ */ jsxs30(
+      return /* @__PURE__ */ jsxs31(
         SubButton,
         {
           type: "button",
@@ -5208,7 +5245,7 @@ var FloatingButton = ({
         action.id
       );
     }),
-    /* @__PURE__ */ jsxs30(
+    /* @__PURE__ */ jsxs31(
       MainButton,
       {
         type: "button",
@@ -5309,9 +5346,9 @@ var CountBadge = styled45.span`
 
 // src/Components/ProgressBar/ProgressBar.tsx
 import styled46 from "styled-components";
-import { jsx as jsx57, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs32 } from "react/jsx-runtime";
 var clampPercent = (value) => Math.max(0, Math.min(100, value));
-var Wrapper5 = styled46.div`
+var Wrapper6 = styled46.div`
   display: flex;
   align-items: center;
   gap: 8px;
@@ -5340,9 +5377,9 @@ var ProgressBar = ({
   showLabel = false
 }) => {
   const percent = clampPercent(value);
-  return /* @__PURE__ */ jsxs31(Wrapper5, { children: [
+  return /* @__PURE__ */ jsxs32(Wrapper6, { children: [
     /* @__PURE__ */ jsx57(Track2, { $height: height, $trackColor: trackColor, children: /* @__PURE__ */ jsx57(Fill, { $height: height, $color: color, $percent: percent }) }),
-    showLabel && /* @__PURE__ */ jsxs31(Text, { size: "s", weight: "600", children: [
+    showLabel && /* @__PURE__ */ jsxs32(Text, { size: "s", weight: "600", children: [
       Math.round(percent),
       " %"
     ] })
@@ -5351,7 +5388,7 @@ var ProgressBar = ({
 
 // src/Components/Timeline/Timeline.tsx
 import styled47 from "styled-components";
-import { jsx as jsx58, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs33 } from "react/jsx-runtime";
 var List2 = styled47.div`
   display: flex;
   flex-direction: column;
@@ -5399,12 +5436,12 @@ var Timeline = ({
     var _a;
     const isLast = index === items.length - 1;
     const dotColor = (_a = item.color) != null ? _a : colors.blue_700;
-    return /* @__PURE__ */ jsxs32(Item2, { children: [
-      /* @__PURE__ */ jsxs32(Rail, { children: [
+    return /* @__PURE__ */ jsxs33(Item2, { children: [
+      /* @__PURE__ */ jsxs33(Rail, { children: [
         /* @__PURE__ */ jsx58(Dot2, { $color: dotColor }),
         !isLast && /* @__PURE__ */ jsx58(Line, { $color: lineColor })
       ] }),
-      /* @__PURE__ */ jsxs32(Content, { $last: isLast, children: [
+      /* @__PURE__ */ jsxs33(Content, { $last: isLast, children: [
         /* @__PURE__ */ jsx58(Text, { size: "s", weight: item.highlighted ? "700" : "600", children: item.title }),
         item.subtitle && /* @__PURE__ */ jsx58(Text, { size: "xs", color: colors.grey_600, children: item.subtitle }),
         item.description && /* @__PURE__ */ jsx58(Text, { size: "xs", fontStyle: "italic", children: item.description })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "design-zystem",
-  "version": "1.0.253",
+  "version": "1.0.254",
   "description": "A React design system of importable components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",