design-zystem 1.0.291 → 1.0.293

package/dist/index.d.mts

@@ -866,8 +866,10 @@ interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     showBaseline?: boolean;
     baselineColor?: string;
     children?: ReactNode;
+    size?: 'xs' | 'm';
+    activeColor?: string;
 }
-declare const Tabs: ({ value, onChange, items, variant, align, showBaseline, baselineColor, children, ...rest }: TabsProps) => react_jsx_runtime.JSX.Element;
+declare const Tabs: ({ value, onChange, items, variant, align, showBaseline, baselineColor, children, size, activeColor, ...rest }: TabsProps) => react_jsx_runtime.JSX.Element;
 
 interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
     src?: string;

package/dist/index.d.ts

@@ -866,8 +866,10 @@ interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     showBaseline?: boolean;
     baselineColor?: string;
     children?: ReactNode;
+    size?: 'xs' | 'm';
+    activeColor?: string;
 }
-declare const Tabs: ({ value, onChange, items, variant, align, showBaseline, baselineColor, children, ...rest }: TabsProps) => react_jsx_runtime.JSX.Element;
+declare const Tabs: ({ value, onChange, items, variant, align, showBaseline, baselineColor, children, size, activeColor, ...rest }: TabsProps) => react_jsx_runtime.JSX.Element;
 
 interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
     src?: string;

package/dist/index.js

@@ -3015,6 +3015,7 @@ var Input = (0, import_react12.forwardRef)((props, ref) => {
 Input.displayName = "Input";
 
 // src/Components/Checkbox/Checkbox.tsx
+var import_react13 = require("react");
 var import_styled_components21 = __toESM(require("styled-components"));
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var CheckboxContainer = import_styled_components21.default.div`
@@ -3042,7 +3043,8 @@ var Checkbox = ({
   size = "m",
   variant = "blue_700"
 }) => {
-  const uniqueId = `checkbox-${Math.random().toString(36).substr(2, 9)}`;
+  const generatedId = (0, import_react13.useId)();
+  const uniqueId = `checkbox-${generatedId}`;
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(CheckboxContainer, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       StyledCheckbox,
@@ -3059,7 +3061,7 @@ var Checkbox = ({
 };
 
 // src/Components/Radio/Radio.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_styled_components22 = __toESM(require("styled-components"));
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var RadioContainer = import_styled_components22.default.div`
@@ -3116,7 +3118,7 @@ var Radio = ({
   value
 }) => {
   const color = colors[variant] || colors.blue_950;
-  const generatedId = (0, import_react13.useId)();
+  const generatedId = (0, import_react14.useId)();
   const uniqueId = `radio-${generatedId}`;
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(RadioContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(StyledLabel2, { htmlFor: uniqueId, disabled, children: [
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
@@ -3136,7 +3138,7 @@ var Radio = ({
 };
 
 // src/Components/Accordion/Accordion.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_styled_components23 = __toESM(require("styled-components"));
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var Wrapper4 = import_styled_components23.default.div`
@@ -3197,8 +3199,8 @@ var Accordion = ({
   backgroundHeader = colors.white
 }) => {
   const resolvedBackgroundHeader = typeof backgroundHeader === "string" && backgroundHeader in colors ? colors[backgroundHeader] : backgroundHeader;
-  const [internalOpen, setInternalOpen] = (0, import_react14.useState)(defaultOpen);
-  const [internalOpenId, setInternalOpenId] = (0, import_react14.useState)(
+  const [internalOpen, setInternalOpen] = (0, import_react15.useState)(defaultOpen);
+  const [internalOpenId, setInternalOpenId] = (0, import_react15.useState)(
     null
   );
   const isControlled = controlledOpen !== void 0;
@@ -3213,7 +3215,7 @@ var Accordion = ({
       setInternalOpen((prev) => !prev);
     }
   };
-  const toggleItem = (0, import_react14.useCallback)(
+  const toggleItem = (0, import_react15.useCallback)(
     (id) => {
       if (disabled) return;
       const nextId2 = activeItemId === id ? null : id;
@@ -3280,7 +3282,7 @@ var Accordion = ({
 };
 
 // src/Components/ColorPicker/ColorPicker.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_styled_components24 = __toESM(require("styled-components"));
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var SIZES = {
@@ -3357,7 +3359,7 @@ var TEXT_SIZE_MAP = {
   m: "xs",
   l: "s"
 };
-var ColorPicker = (0, import_react15.forwardRef)(
+var ColorPicker = (0, import_react16.forwardRef)(
   ({
     label,
     value,
@@ -3366,11 +3368,11 @@ var ColorPicker = (0, import_react15.forwardRef)(
     disabled = false,
     size = "m"
   }, ref) => {
-    const innerRef = (0, import_react15.useRef)(null);
-    const [internalColor, setInternalColor] = (0, import_react15.useState)(defaultValue);
+    const innerRef = (0, import_react16.useRef)(null);
+    const [internalColor, setInternalColor] = (0, import_react16.useState)(defaultValue);
     const currentColor = value !== void 0 ? value : internalColor;
     const dims = SIZES[size];
-    (0, import_react15.useEffect)(() => {
+    (0, import_react16.useEffect)(() => {
       if (!ref) return;
       if (typeof ref === "function") {
         ref(innerRef.current);
@@ -3416,7 +3418,7 @@ var ColorPicker = (0, import_react15.forwardRef)(
 ColorPicker.displayName = "ColorPicker";
 
 // src/Components/SliderInput/SliderInput.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_styled_components25 = __toESM(require("styled-components"));
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var Container3 = import_styled_components25.default.label`
@@ -3498,7 +3500,7 @@ var MinMaxRow = import_styled_components25.default.span`
   justify-content: space-between;
   align-items: center;
 `;
-var SliderInput = (0, import_react16.forwardRef)(
+var SliderInput = (0, import_react17.forwardRef)(
   ({
     value,
     onChange,
@@ -3633,7 +3635,7 @@ var ListItem = (props) => {
 };
 
 // src/Components/Table/Table.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_styled_components28 = __toESM(require("styled-components"));
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var shouldForwardPropTable = (prop) => ![
@@ -3669,7 +3671,7 @@ var StyledContainer3 = import_styled_components28.default.div.withConfig({
   border: 1.4px solid ${colors.grey_200};
   box-shadow: ${(props) => props.hasShadow ? "0 2px 12px 0 rgba(198, 198, 198, 0.25)" : "none"};
 `;
-var Table = (0, import_react17.forwardRef)((props, ref) => {
+var Table = (0, import_react18.forwardRef)((props, ref) => {
   const _a = props, { children } = _a, otherProps = __objRest(_a, ["children"]);
   const safeChildren = children;
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(StyledContainer3, __spreadProps(__spreadValues({}, otherProps), { ref, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(StyledTable, __spreadProps(__spreadValues({}, otherProps), { children: safeChildren })) }));
@@ -3699,7 +3701,7 @@ var TableHeader = (props) => {
 };
 
 // src/Components/Table/TableBody/TableBody.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_styled_components30 = __toESM(require("styled-components"));
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var shouldForwardPropTableBody = (prop) => !["backgroundColor", "useEvenBackground", "fixedHeight", "color"].includes(
@@ -3718,7 +3720,7 @@ var StyledTableBody = import_styled_components30.default.div.withConfig({
     background-color: ${(props) => props.useEvenBackground ? "#f2f2f2" : ""};
   }
 `;
-var TableBody = (0, import_react18.forwardRef)(
+var TableBody = (0, import_react19.forwardRef)(
   (props, ref) => {
     const _a = props, { children } = _a, otherProps = __objRest(_a, ["children"]);
     const safeChildren = children;
@@ -3793,7 +3795,7 @@ var TableCell = (props) => {
 };
 
 // src/Components/Table/TableHeaderCell/TableHeaderCell.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_styled_components33 = __toESM(require("styled-components"));
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var shouldForwardPropTableHeaderCell = (prop) => ![
@@ -3837,7 +3839,7 @@ var SortArrow = import_styled_components33.default.span`
 `;
 var TableHeaderCell = (props) => {
   const _a = props, { children, useSort, isSort, sortOrder } = _a, otherProps = __objRest(_a, ["children", "useSort", "isSort", "sortOrder"]);
-  const [hovered, setHovered] = (0, import_react19.useState)(false);
+  const [hovered, setHovered] = (0, import_react20.useState)(false);
   const showArrow = useSort && (isSort || hovered);
   const arrowChar = isSort && sortOrder === "asc" ? "\u2191" : "\u2193";
   const arrowOpacity = isSort ? 1 : 0.35;
@@ -3985,7 +3987,7 @@ var SkeletonRow = ({ columns = 9 }) => /* @__PURE__ */ (0, import_jsx_runtime42.
 ] });
 
 // src/Components/Switch/Switch.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_styled_components38 = __toESM(require("styled-components"));
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var BASE = {
@@ -4066,7 +4068,7 @@ var Knob = import_styled_components38.default.span`
     transform: translateY(-50%) scale(0.96);
   }
 `;
-var Switch = (0, import_react20.forwardRef)(
+var Switch = (0, import_react21.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       checked,
@@ -4122,7 +4124,7 @@ var CardSkeleton = () => {
 };
 
 // src/Components/Options/Options.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var Options = ({
   icon,
@@ -4132,8 +4134,8 @@ var Options = ({
   onChange,
   disabled = false
 }) => {
-  const [state, setState] = (0, import_react21.useState)(0);
-  (0, import_react21.useEffect)(() => {
+  const [state, setState] = (0, import_react22.useState)(0);
+  (0, import_react22.useEffect)(() => {
     if (defaultId) {
       const defaultIndex = options.findIndex(
         (option) => option.id === defaultId
@@ -4191,7 +4193,7 @@ var Options = ({
 };
 
 // src/Components/Stepper/Stepper.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_styled_components39 = __toESM(require("styled-components"));
 var import_jsx_runtime46 = require("react/jsx-runtime");
 var Wrapper5 = import_styled_components39.default.nav`
@@ -4230,7 +4232,7 @@ var Stepper = ({
   return /* @__PURE__ */ (0, import_jsx_runtime46.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_runtime46.jsxs)(import_react22.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_react23.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
         Circle,
         {
@@ -4247,16 +4249,29 @@ var Stepper = ({
 };
 
 // src/Components/Tabs/Tabs.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_styled_components40 = __toESM(require("styled-components"));
 var import_jsx_runtime47 = require("react/jsx-runtime");
 var TOKENS = {
   fontFamily: '"Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif'
 };
-var shouldForwardTabs = (p) => !["align", "showBaseline", "baselineColor", "variant", "fullWidth"].includes(
-  p
-);
-var shouldForwardTab = (p) => !["$active", "$disabled", "$variant", "$fullWidth"].includes(p);
+var shouldForwardTabs = (p) => ![
+  "align",
+  "showBaseline",
+  "baselineColor",
+  "variant",
+  "fullWidth",
+  "size",
+  "activeColor"
+].includes(p);
+var shouldForwardTab = (p) => ![
+  "$active",
+  "$disabled",
+  "$variant",
+  "$fullWidth",
+  "$size",
+  "$activeColor"
+].includes(p);
 var TabsRoot = import_styled_components40.default.div.withConfig({
   shouldForwardProp: shouldForwardTabs
 })`
@@ -4285,11 +4300,20 @@ var TabsList = import_styled_components40.default.div.withConfig({
 })`
   display: flex;
   align-items: center;
-  gap: ${(p) => p.variant === "pills" ? "0" : "24px"};
+  gap: ${(p) => {
+  if (p.variant !== "pills") return "24px";
+  return p.size === "xs" ? "4px" : "0";
+}};
   min-height: ${(p) => p.variant === "pills" ? "auto" : "48px"};
-  padding: ${(p) => p.variant === "pills" ? "4px" : "12px 0"};
+  padding: ${(p) => {
+  if (p.variant !== "pills") return "12px 0";
+  return p.size === "xs" ? "6px 8px" : "4px";
+}};
   background: ${(p) => p.variant === "pills" ? colors.grey_200 : "transparent"};
-  border-radius: ${(p) => p.variant === "pills" ? "8px" : "0"};
+  border-radius: ${(p) => {
+  if (p.variant !== "pills") return "0";
+  return p.size === "xs" ? "6px" : "8px";
+}};
   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"};
 `;
@@ -4306,27 +4330,40 @@ var TabButton = import_styled_components40.default.button.withConfig({
   if (p.$variant !== "pills") return "transparent";
   return p.$active ? colors.white : "transparent";
 }};
-  padding: ${(p) => p.$variant === "pills" ? "8px 16px" : "0"};
+  padding: ${(p) => {
+  if (p.$variant !== "pills") return "0";
+  if (p.$size === "xs") return p.$active ? "4px 12px" : "4px 8px";
+  return "8px 16px";
+}};
   margin: 0;
   border-radius: ${(p) => p.$variant === "pills" ? "6px" : "0"};
   flex: ${(p) => p.$variant === "pills" && p.$fullWidth ? "1" : "initial"};
   position: relative;
   cursor: ${(p) => p.$disabled ? "not-allowed" : "pointer"};
   color: ${(p) => {
-  if (p.$variant === "pills") return colors.dark;
+  if (p.$variant === "pills") {
+    if (p.$active && p.$activeColor) return p.$activeColor;
+    return colors.dark;
+  }
   return p.$active ? colors.blue_700 : colors.grey_400;
 }};
   font-family: ${TOKENS.fontFamily};
-  font-size: ${(p) => p.$variant === "pills" ? "14px" : "16px"};
+  font-size: ${(p) => {
+  if (p.$variant === "pills") return p.$size === "xs" ? "12px" : "14px";
+  return "16px";
+}};
   font-weight: ${(p) => {
-  if (p.$variant === "pills") return p.$active ? 700 : 500;
+  if (p.$variant === "pills") {
+    if (p.$active) return 700;
+    return p.$size === "xs" ? 600 : 500;
+  }
   return p.$active ? 700 : 600;
 }};
   line-height: 1.2;
   white-space: nowrap;
   outline: none;
   text-align: center;
-  box-shadow: none;
+  box-shadow: ${(p) => p.$variant === "pills" && p.$size === "xs" && p.$active ? "0px 2px 7.5px rgba(198, 198, 198, 0.25)" : "none"};
   transition:
     background-color 150ms ease,
     color 150ms ease;
@@ -4368,7 +4405,9 @@ var Tab = (_a) => {
     onClick,
     innerRef,
     variant = "line",
-    fullWidth = false
+    fullWidth = false,
+    size = "m",
+    activeColor
   } = _b, rest = __objRest(_b, [
     "id",
     "children",
@@ -4377,7 +4416,9 @@ var Tab = (_a) => {
     "onClick",
     "innerRef",
     "variant",
-    "fullWidth"
+    "fullWidth",
+    "size",
+    "activeColor"
   ]);
   return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     TabButton,
@@ -4392,6 +4433,8 @@ var Tab = (_a) => {
       $disabled: disabled,
       $variant: variant,
       $fullWidth: fullWidth,
+      $size: size,
+      $activeColor: activeColor,
       onClick: disabled ? void 0 : onClick
     }, rest), {
       children
@@ -4407,7 +4450,9 @@ var Tabs = (_a) => {
     align = "start",
     showBaseline = true,
     baselineColor = colors.grey_300,
-    children
+    children,
+    size,
+    activeColor
   } = _b, rest = __objRest(_b, [
     "value",
     "onChange",
@@ -4416,15 +4461,17 @@ var Tabs = (_a) => {
     "align",
     "showBaseline",
     "baselineColor",
-    "children"
+    "children",
+    "size",
+    "activeColor"
   ]);
-  const rootRef = (0, import_react23.useRef)(null);
-  const refsMap = (0, import_react23.useRef)(/* @__PURE__ */ new Map());
-  const [bar, setBar] = (0, import_react23.useState)({ left: 0, width: 0 });
+  const rootRef = (0, import_react24.useRef)(null);
+  const refsMap = (0, import_react24.useRef)(/* @__PURE__ */ new Map());
+  const [bar, setBar] = (0, import_react24.useState)({ left: 0, width: 0 });
   const setTabRef = (id) => (el) => {
     if (el) refsMap.current.set(id, el);
   };
-  const updateBar = (0, import_react23.useCallback)(() => {
+  const updateBar = (0, import_react24.useCallback)(() => {
     const root = rootRef.current;
     const activeEl = value !== void 0 ? refsMap.current.get(value) : void 0;
     if (!root || !activeEl) return;
@@ -4432,7 +4479,7 @@ var Tabs = (_a) => {
     const box = activeEl.getBoundingClientRect();
     setBar({ left: box.left - rootBox.left, width: box.width });
   }, [value]);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     updateBar();
     const ro = new ResizeObserver(updateBar);
     const activeEl = value !== void 0 ? refsMap.current.get(value) : void 0;
@@ -4440,14 +4487,14 @@ var Tabs = (_a) => {
     if (activeEl) ro.observe(activeEl);
     return () => ro.disconnect();
   }, [value, updateBar]);
-  const handleSelect = (0, import_react23.useCallback)(
+  const handleSelect = (0, import_react24.useCallback)(
     (id) => {
       if (id !== value && onChange) onChange(id);
     },
     [onChange, value]
   );
   const isPillsFullWidth = variant === "pills" && align === "start";
-  const rendered = (0, import_react23.useMemo)(() => {
+  const rendered = (0, import_react24.useMemo)(() => {
     if (items && items.length) {
       return items.map((it) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
         Tab,
@@ -4459,6 +4506,8 @@ var Tabs = (_a) => {
           fullWidth: isPillsFullWidth,
           onClick: () => handleSelect(it.id),
           innerRef: setTabRef(it.id),
+          size,
+          activeColor,
           children: [
             it.label,
             it.dot && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TabDot, { $color: it.dotColor }),
@@ -4477,20 +4526,31 @@ var Tabs = (_a) => {
         it.id
       ));
     }
-    return import_react23.Children.map(children, (child) => {
+    return import_react24.Children.map(children, (child) => {
       var _a2;
-      if (!(0, import_react23.isValidElement)(child)) return child;
+      if (!(0, import_react24.isValidElement)(child)) return child;
       const id = (_a2 = child.props.id) != null ? _a2 : child.key;
       const active = id === value;
-      return (0, import_react23.cloneElement)(child, {
+      return (0, import_react24.cloneElement)(child, {
         active,
         variant,
         fullWidth: isPillsFullWidth,
         onClick: () => handleSelect(id),
-        innerRef: setTabRef(id)
+        innerRef: setTabRef(id),
+        size,
+        activeColor
       });
     });
-  }, [items, children, value, variant, isPillsFullWidth, handleSelect]);
+  }, [
+    items,
+    children,
+    value,
+    variant,
+    isPillsFullWidth,
+    handleSelect,
+    size,
+    activeColor
+  ]);
   return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
     TabsRoot,
     __spreadProps(__spreadValues({
@@ -4502,7 +4562,16 @@ var Tabs = (_a) => {
       variant
     }, rest), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TabsList, { align, variant, fullWidth: isPillsFullWidth, children: rendered }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          TabsList,
+          {
+            align,
+            variant,
+            fullWidth: isPillsFullWidth,
+            size,
+            children: rendered
+          }
+        ),
         variant === "line" && showBaseline && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ActiveBar, { style: { left: bar.left, width: bar.width } })
       ]
     })
@@ -4510,7 +4579,7 @@ var Tabs = (_a) => {
 };
 
 // src/Components/MultiSelect/MultiSelect.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_styled_components41 = __toESM(require("styled-components"));
 var import_jsx_runtime48 = require("react/jsx-runtime");
 var Container5 = import_styled_components41.default.div`
@@ -4553,8 +4622,8 @@ var MultiSelect = ({
   width,
   align = "left"
 }) => {
-  const [isOpen, setIsOpen] = (0, import_react24.useState)(false);
-  const dropdownRef = (0, import_react24.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react25.useState)(false);
+  const dropdownRef = (0, import_react25.useRef)(null);
   const toggleOption = (value) => {
     if (!onChange) return;
     if (selectedValues.includes(value)) {
@@ -4564,7 +4633,7 @@ var MultiSelect = ({
       onChange([...selectedValues, value]);
     }
   };
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     const handleClickOutside = (e) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
         setIsOpen(false);
@@ -4606,7 +4675,7 @@ var MultiSelect = ({
 };
 
 // src/Components/DatePicker/DatePicker.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_jsx_runtime49 = require("react/jsx-runtime");
 var LOCALE_MAP = {
   fr: "fr-FR",
@@ -4677,28 +4746,28 @@ var DatePicker = (props) => {
   const resolvedLocale = resolveLocale(locale);
   const monthNames = getMonthNames(resolvedLocale);
   const dayNames = getDayNames(resolvedLocale);
-  const [isOpen, setIsOpen] = (0, import_react25.useState)(defaultOpen);
-  const [currentMonth, setCurrentMonth] = (0, import_react25.useState)(/* @__PURE__ */ new Date());
-  const [isSelectingEnd, setIsSelectingEnd] = (0, import_react25.useState)(false);
-  const [singleDate, setSingleDate] = (0, import_react25.useState)(
+  const [isOpen, setIsOpen] = (0, import_react26.useState)(defaultOpen);
+  const [currentMonth, setCurrentMonth] = (0, import_react26.useState)(/* @__PURE__ */ new Date());
+  const [isSelectingEnd, setIsSelectingEnd] = (0, import_react26.useState)(false);
+  const [singleDate, setSingleDate] = (0, import_react26.useState)(
     isSingle ? (_a = props.value) != null ? _a : null : null
   );
-  const [startDate, setStartDate] = (0, import_react25.useState)(
+  const [startDate, setStartDate] = (0, import_react26.useState)(
     !isSingle ? (_c = (_b = props.value) == null ? void 0 : _b.start) != null ? _c : null : null
   );
-  const [endDate, setEndDate] = (0, import_react25.useState)(
+  const [endDate, setEndDate] = (0, import_react26.useState)(
     !isSingle ? (_e = (_d = props.value) == null ? void 0 : _d.end) != null ? _e : null : null
   );
-  const ref = (0, import_react25.useRef)(null);
+  const ref = (0, import_react26.useRef)(null);
   const singleValueMs = isSingle ? (_f = props.value) == null ? void 0 : _f.getTime() : void 0;
   const rangeStartMs = !isSingle ? (_h = (_g = props.value) == null ? void 0 : _g.start) == null ? void 0 : _h.getTime() : void 0;
   const rangeEndMs = !isSingle ? (_j = (_i = props.value) == null ? void 0 : _i.end) == null ? void 0 : _j.getTime() : void 0;
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (!isSingle) return;
     const v = props.value;
     if (v !== void 0) setSingleDate(v);
   }, [singleValueMs]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     var _a2, _b2;
     if (isSingle) return;
     const v = props.value;
@@ -4706,7 +4775,7 @@ var DatePicker = (props) => {
     setStartDate((_a2 = v == null ? void 0 : v.start) != null ? _a2 : null);
     setEndDate((_b2 = v == null ? void 0 : v.end) != null ? _b2 : null);
   }, [rangeStartMs, rangeEndMs]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     const handleClickOutside = (e) => {
       if (ref.current && !ref.current.contains(e.target)) {
         setIsOpen(false);
@@ -4990,7 +5059,7 @@ var DatePicker = (props) => {
 };
 
 // src/Components/IconTabs/IconTabs.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_styled_components42 = __toESM(require("styled-components"));
 var import_jsx_runtime50 = require("react/jsx-runtime");
 var TabsContainer = import_styled_components42.default.div`
@@ -5052,10 +5121,10 @@ var IconTabs = ({
   defaultTabIndex = 0
 }) => {
   var _a;
-  const [selectedTab, setSelectedTab] = (0, import_react26.useState)(defaultTabIndex);
-  const sliderRef = (0, import_react26.useRef)(null);
-  const tabRefs = (0, import_react26.useRef)([]);
-  (0, import_react26.useEffect)(() => {
+  const [selectedTab, setSelectedTab] = (0, import_react27.useState)(defaultTabIndex);
+  const sliderRef = (0, import_react27.useRef)(null);
+  const tabRefs = (0, import_react27.useRef)([]);
+  (0, import_react27.useEffect)(() => {
     if (defaultTabIndex >= 0 && defaultTabIndex !== selectedTab) {
       setSelectedTab(defaultTabIndex);
     }
@@ -5066,7 +5135,7 @@ var IconTabs = ({
       onTabChange(index);
     }
   };
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (sliderRef.current && tabRefs.current[selectedTab]) {
       const selectedTabRect = tabRefs.current[selectedTab].getBoundingClientRect();
       const parentRect = tabRefs.current[selectedTab].parentElement.getBoundingClientRect();
@@ -5105,7 +5174,7 @@ var IconTabs = ({
 };
 
 // src/Components/Popover/Popover.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_react_dom3 = require("react-dom");
 var import_styled_components43 = __toESM(require("styled-components"));
 var import_jsx_runtime51 = require("react/jsx-runtime");
@@ -5151,15 +5220,15 @@ var Popover = ({
   align = "right",
   fullWidth = false
 }) => {
-  const [open, setOpen] = (0, import_react27.useState)(false);
-  const ref = (0, import_react27.useRef)(null);
-  const menuRef = (0, import_react27.useRef)(null);
-  const [menuPosition, setMenuPosition] = (0, import_react27.useState)({
+  const [open, setOpen] = (0, import_react28.useState)(false);
+  const ref = (0, import_react28.useRef)(null);
+  const menuRef = (0, import_react28.useRef)(null);
+  const [menuPosition, setMenuPosition] = (0, import_react28.useState)({
     mode: "default",
     top: 0,
     left: 0
   });
-  const updatePosition = (0, import_react27.useCallback)(() => {
+  const updatePosition = (0, import_react28.useCallback)(() => {
     var _a;
     if (!ref.current) return;
     if (anchorRef == null ? void 0 : anchorRef.current) {
@@ -5188,7 +5257,7 @@ var Popover = ({
       });
     }
   }, [items.length, anchorRef, offsetY, align]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     const handleClickOutside = (event) => {
       var _a, _b;
       const isInTrigger = (_a = ref.current) == null ? void 0 : _a.contains(event.target);
@@ -5516,7 +5585,7 @@ var Banner = ({
 };
 
 // src/Components/Tooltip/Tooltip.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_styled_components46 = __toESM(require("styled-components"));
 var import_jsx_runtime55 = require("react/jsx-runtime");
 var StyledTooltipWrapper = import_styled_components46.default.div`
@@ -5620,7 +5689,7 @@ var Tooltip = ({
   direction = "top",
   children
 }) => {
-  const [isVisible, setIsVisible] = (0, import_react28.useState)(false);
+  const [isVisible, setIsVisible] = (0, import_react29.useState)(false);
   const handleMouseEnter = () => setIsVisible(true);
   const handleMouseLeave = () => setIsVisible(false);
   return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
@@ -5647,7 +5716,7 @@ var Tooltip = ({
 };
 
 // src/Components/Pagination/Pagination.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_jsx_runtime56 = require("react/jsx-runtime");
 var getPageNumbers = (current, total) => {
   if (total <= 5) {
@@ -5671,7 +5740,7 @@ var Pagination = ({
   summaryLabel
 }) => {
   const totalPages = Math.max(1, Math.ceil(totalItems / itemsPerPage));
-  const pages = (0, import_react29.useMemo)(
+  const pages = (0, import_react30.useMemo)(
     () => getPageNumbers(currentPage, totalPages),
     [currentPage, totalPages]
   );
@@ -5725,7 +5794,7 @@ var Pagination = ({
 };
 
 // src/Components/FileUploadZone/FileUploadZone.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 var import_styled_components47 = __toESM(require("styled-components"));
 var import_jsx_runtime57 = require("react/jsx-runtime");
 var ACCEPT_MAP = {
@@ -5812,19 +5881,19 @@ var FileUploadZone = ({
   icon = "cloud-arrow-up",
   showFileName = false
 }) => {
-  const [isDragging, setIsDragging] = (0, import_react30.useState)(false);
-  const [internalPreviewUrl, setInternalPreviewUrl] = (0, import_react30.useState)(
+  const [isDragging, setIsDragging] = (0, import_react31.useState)(false);
+  const [internalPreviewUrl, setInternalPreviewUrl] = (0, import_react31.useState)(
     null
   );
-  const [fileType, setFileType] = (0, import_react30.useState)(null);
-  const [fileName, setFileName] = (0, import_react30.useState)(null);
-  const [inlineError, setInlineError] = (0, import_react30.useState)(null);
-  const inputRef = (0, import_react30.useRef)(null);
+  const [fileType, setFileType] = (0, import_react31.useState)(null);
+  const [fileName, setFileName] = (0, import_react31.useState)(null);
+  const [inlineError, setInlineError] = (0, import_react31.useState)(null);
+  const inputRef = (0, import_react31.useRef)(null);
   const resolvedAccept = acceptOnlyPdf ? PDF_ONLY : accept;
   const mimeTypes = getMimeTypes(resolvedAccept);
   const acceptString = mimeTypes.join(",");
   const previewUrl = multiple ? null : controlledPreviewUrl || (showPreview ? internalPreviewUrl : null);
-  const emitError = (0, import_react30.useCallback)(
+  const emitError = (0, import_react31.useCallback)(
     (message) => {
       if (onError) {
         onError(message);
@@ -5834,7 +5903,7 @@ var FileUploadZone = ({
     },
     [onError]
   );
-  const validateFile = (0, import_react30.useCallback)(
+  const validateFile = (0, import_react31.useCallback)(
     (file) => {
       if (!mimeTypes.includes(file.type)) {
         return { ok: false, error: "Format de fichier non accept\xE9." };
@@ -5849,7 +5918,7 @@ var FileUploadZone = ({
     },
     [mimeTypes, maxSizeMB]
   );
-  const processFile = (0, import_react30.useCallback)(
+  const processFile = (0, import_react31.useCallback)(
     (file) => {
       setInlineError(null);
       const result = validateFile(file);
@@ -5867,7 +5936,7 @@ var FileUploadZone = ({
     },
     [validateFile, onSave, showPreview, emitError]
   );
-  const processFiles = (0, import_react30.useCallback)(
+  const processFiles = (0, import_react31.useCallback)(
     (files) => {
       setInlineError(null);
       for (const file of files) {
@@ -6635,6 +6704,8 @@ var formatDate = (dateString, type = "date", language = "en") => {
     }
     case "longDate":
       return format({ day: "numeric", month: "long", year: "numeric" });
+    case "monthYear":
+      return format({ month: "long", year: "numeric" });
     default:
       return format({ day: "2-digit", month: "2-digit", year: "numeric" });
   }

package/dist/index.mjs

@@ -2882,6 +2882,7 @@ var Input = forwardRef3((props, ref) => {
 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`
@@ -2909,7 +2910,8 @@ var Checkbox = ({
   size = "m",
   variant = "blue_700"
 }) => {
-  const uniqueId = `checkbox-${Math.random().toString(36).substr(2, 9)}`;
+  const generatedId = useId();
+  const uniqueId = `checkbox-${generatedId}`;
   return /* @__PURE__ */ jsxs12(CheckboxContainer, { children: [
     /* @__PURE__ */ jsx25(
       StyledCheckbox,
@@ -2926,7 +2928,7 @@ var Checkbox = ({
 };
 
 // src/Components/Radio/Radio.tsx
-import { useId } from "react";
+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`
@@ -2983,7 +2985,7 @@ var Radio = ({
   value
 }) => {
   const color = colors[variant] || colors.blue_950;
-  const generatedId = useId();
+  const generatedId = useId2();
   const uniqueId = `radio-${generatedId}`;
   return /* @__PURE__ */ jsx26(RadioContainer, { children: /* @__PURE__ */ jsxs13(StyledLabel2, { htmlFor: uniqueId, disabled, children: [
     /* @__PURE__ */ jsx26(
@@ -4129,10 +4131,23 @@ import { jsx as jsx47, jsxs as jsxs22 } from "react/jsx-runtime";
 var TOKENS = {
   fontFamily: '"Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif'
 };
-var shouldForwardTabs = (p) => !["align", "showBaseline", "baselineColor", "variant", "fullWidth"].includes(
-  p
-);
-var shouldForwardTab = (p) => !["$active", "$disabled", "$variant", "$fullWidth"].includes(p);
+var shouldForwardTabs = (p) => ![
+  "align",
+  "showBaseline",
+  "baselineColor",
+  "variant",
+  "fullWidth",
+  "size",
+  "activeColor"
+].includes(p);
+var shouldForwardTab = (p) => ![
+  "$active",
+  "$disabled",
+  "$variant",
+  "$fullWidth",
+  "$size",
+  "$activeColor"
+].includes(p);
 var TabsRoot = styled40.div.withConfig({
   shouldForwardProp: shouldForwardTabs
 })`
@@ -4161,11 +4176,20 @@ var TabsList = styled40.div.withConfig({
 })`
   display: flex;
   align-items: center;
-  gap: ${(p) => p.variant === "pills" ? "0" : "24px"};
+  gap: ${(p) => {
+  if (p.variant !== "pills") return "24px";
+  return p.size === "xs" ? "4px" : "0";
+}};
   min-height: ${(p) => p.variant === "pills" ? "auto" : "48px"};
-  padding: ${(p) => p.variant === "pills" ? "4px" : "12px 0"};
+  padding: ${(p) => {
+  if (p.variant !== "pills") return "12px 0";
+  return p.size === "xs" ? "6px 8px" : "4px";
+}};
   background: ${(p) => p.variant === "pills" ? colors.grey_200 : "transparent"};
-  border-radius: ${(p) => p.variant === "pills" ? "8px" : "0"};
+  border-radius: ${(p) => {
+  if (p.variant !== "pills") return "0";
+  return p.size === "xs" ? "6px" : "8px";
+}};
   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"};
 `;
@@ -4182,27 +4206,40 @@ var TabButton = styled40.button.withConfig({
   if (p.$variant !== "pills") return "transparent";
   return p.$active ? colors.white : "transparent";
 }};
-  padding: ${(p) => p.$variant === "pills" ? "8px 16px" : "0"};
+  padding: ${(p) => {
+  if (p.$variant !== "pills") return "0";
+  if (p.$size === "xs") return p.$active ? "4px 12px" : "4px 8px";
+  return "8px 16px";
+}};
   margin: 0;
   border-radius: ${(p) => p.$variant === "pills" ? "6px" : "0"};
   flex: ${(p) => p.$variant === "pills" && p.$fullWidth ? "1" : "initial"};
   position: relative;
   cursor: ${(p) => p.$disabled ? "not-allowed" : "pointer"};
   color: ${(p) => {
-  if (p.$variant === "pills") return colors.dark;
+  if (p.$variant === "pills") {
+    if (p.$active && p.$activeColor) return p.$activeColor;
+    return colors.dark;
+  }
   return p.$active ? colors.blue_700 : colors.grey_400;
 }};
   font-family: ${TOKENS.fontFamily};
-  font-size: ${(p) => p.$variant === "pills" ? "14px" : "16px"};
+  font-size: ${(p) => {
+  if (p.$variant === "pills") return p.$size === "xs" ? "12px" : "14px";
+  return "16px";
+}};
   font-weight: ${(p) => {
-  if (p.$variant === "pills") return p.$active ? 700 : 500;
+  if (p.$variant === "pills") {
+    if (p.$active) return 700;
+    return p.$size === "xs" ? 600 : 500;
+  }
   return p.$active ? 700 : 600;
 }};
   line-height: 1.2;
   white-space: nowrap;
   outline: none;
   text-align: center;
-  box-shadow: none;
+  box-shadow: ${(p) => p.$variant === "pills" && p.$size === "xs" && p.$active ? "0px 2px 7.5px rgba(198, 198, 198, 0.25)" : "none"};
   transition:
     background-color 150ms ease,
     color 150ms ease;
@@ -4244,7 +4281,9 @@ var Tab = (_a) => {
     onClick,
     innerRef,
     variant = "line",
-    fullWidth = false
+    fullWidth = false,
+    size = "m",
+    activeColor
   } = _b, rest = __objRest(_b, [
     "id",
     "children",
@@ -4253,7 +4292,9 @@ var Tab = (_a) => {
     "onClick",
     "innerRef",
     "variant",
-    "fullWidth"
+    "fullWidth",
+    "size",
+    "activeColor"
   ]);
   return /* @__PURE__ */ jsx47(
     TabButton,
@@ -4268,6 +4309,8 @@ var Tab = (_a) => {
       $disabled: disabled,
       $variant: variant,
       $fullWidth: fullWidth,
+      $size: size,
+      $activeColor: activeColor,
       onClick: disabled ? void 0 : onClick
     }, rest), {
       children
@@ -4283,7 +4326,9 @@ var Tabs = (_a) => {
     align = "start",
     showBaseline = true,
     baselineColor = colors.grey_300,
-    children
+    children,
+    size,
+    activeColor
   } = _b, rest = __objRest(_b, [
     "value",
     "onChange",
@@ -4292,7 +4337,9 @@ var Tabs = (_a) => {
     "align",
     "showBaseline",
     "baselineColor",
-    "children"
+    "children",
+    "size",
+    "activeColor"
   ]);
   const rootRef = useRef8(null);
   const refsMap = useRef8(/* @__PURE__ */ new Map());
@@ -4335,6 +4382,8 @@ var Tabs = (_a) => {
           fullWidth: isPillsFullWidth,
           onClick: () => handleSelect(it.id),
           innerRef: setTabRef(it.id),
+          size,
+          activeColor,
           children: [
             it.label,
             it.dot && /* @__PURE__ */ jsx47(TabDot, { $color: it.dotColor }),
@@ -4363,10 +4412,21 @@ var Tabs = (_a) => {
         variant,
         fullWidth: isPillsFullWidth,
         onClick: () => handleSelect(id),
-        innerRef: setTabRef(id)
+        innerRef: setTabRef(id),
+        size,
+        activeColor
       });
     });
-  }, [items, children, value, variant, isPillsFullWidth, handleSelect]);
+  }, [
+    items,
+    children,
+    value,
+    variant,
+    isPillsFullWidth,
+    handleSelect,
+    size,
+    activeColor
+  ]);
   return /* @__PURE__ */ jsxs22(
     TabsRoot,
     __spreadProps(__spreadValues({
@@ -4378,7 +4438,16 @@ var Tabs = (_a) => {
       variant
     }, rest), {
       children: [
-        /* @__PURE__ */ jsx47(TabsList, { align, variant, fullWidth: isPillsFullWidth, children: rendered }),
+        /* @__PURE__ */ jsx47(
+          TabsList,
+          {
+            align,
+            variant,
+            fullWidth: isPillsFullWidth,
+            size,
+            children: rendered
+          }
+        ),
         variant === "line" && showBaseline && /* @__PURE__ */ jsx47(ActiveBar, { style: { left: bar.left, width: bar.width } })
       ]
     })
@@ -6516,6 +6585,8 @@ var formatDate = (dateString, type = "date", language = "en") => {
     }
     case "longDate":
       return format({ day: "numeric", month: "long", year: "numeric" });
+    case "monthYear":
+      return format({ month: "long", year: "numeric" });
     default:
       return format({ day: "2-digit", month: "2-digit", year: "numeric" });
   }

package/package.json

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