design-zystem 1.0.292 → 1.0.294

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,7 +4249,7 @@ 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 = {
@@ -4463,13 +4465,13 @@ var Tabs = (_a) => {
     "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;
@@ -4477,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;
@@ -4485,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,
@@ -4524,12 +4526,12 @@ 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,
@@ -4577,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`
@@ -4620,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)) {
@@ -4631,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);
@@ -4673,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",
@@ -4744,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;
@@ -4773,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);
@@ -5057,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`
@@ -5119,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);
     }
@@ -5133,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();
@@ -5172,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");
@@ -5218,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) {
@@ -5255,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);
@@ -5420,6 +5422,13 @@ var PRESET_STYLES = {
     badgeBackground: "#FCDDDE",
     badgeColor: colors.red_950,
     accent: colors.red_950
+  },
+  purple: {
+    background: "rgba(237, 233, 254, 0.4)",
+    borderColor: "#DDD6FE",
+    badgeBackground: colors.purple_50,
+    badgeColor: colors.purple_700,
+    accent: colors.purple_700
   }
 };
 var resolveStyle = (variant, filled) => {
@@ -5583,7 +5592,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`
@@ -5687,7 +5696,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)(
@@ -5714,7 +5723,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) {
@@ -5738,7 +5747,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]
   );
@@ -5792,7 +5801,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 = {
@@ -5879,19 +5888,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);
@@ -5901,7 +5910,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." };
@@ -5916,7 +5925,7 @@ var FileUploadZone = ({
     },
     [mimeTypes, maxSizeMB]
   );
-  const processFile = (0, import_react30.useCallback)(
+  const processFile = (0, import_react31.useCallback)(
     (file) => {
       setInlineError(null);
       const result = validateFile(file);
@@ -5934,7 +5943,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) {
@@ -6702,6 +6711,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(
@@ -5301,6 +5303,13 @@ var PRESET_STYLES = {
     badgeBackground: "#FCDDDE",
     badgeColor: colors.red_950,
     accent: colors.red_950
+  },
+  purple: {
+    background: "rgba(237, 233, 254, 0.4)",
+    borderColor: "#DDD6FE",
+    badgeBackground: colors.purple_50,
+    badgeColor: colors.purple_700,
+    accent: colors.purple_700
   }
 };
 var resolveStyle = (variant, filled) => {
@@ -6583,6 +6592,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.292",
+  "version": "1.0.294",
   "description": "A React design system of importable components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",