design-zystem 1.0.282 → 1.0.283

package/dist/index.d.mts

@@ -87,7 +87,7 @@ interface ColProps extends HTMLAttributes<HTMLDivElement> {
     style?: CSSProperties;
     className?: string;
 }
-declare const Col: (props: ColProps) => react_jsx_runtime.JSX.Element;
+declare const Col: react.ForwardRefExoticComponent<ColProps & react.RefAttributes<HTMLDivElement>>;
 
 interface BulkSection {
     title: string;

package/dist/index.d.ts

@@ -87,7 +87,7 @@ interface ColProps extends HTMLAttributes<HTMLDivElement> {
     style?: CSSProperties;
     className?: string;
 }
-declare const Col: (props: ColProps) => react_jsx_runtime.JSX.Element;
+declare const Col: react.ForwardRefExoticComponent<ColProps & react.RefAttributes<HTMLDivElement>>;
 
 interface BulkSection {
     title: string;

package/dist/index.js

@@ -493,6 +493,7 @@ Row.displayName = "Row";
 var Row_default = Row;
 
 // src/Components/Col/Col.tsx
+var import_react2 = require("react");
 var import_styled_components5 = __toESM(require("styled-components"));
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var shouldForwardPropCol = (prop) => ![
@@ -528,10 +529,11 @@ var StyledCol = import_styled_components5.default.div.withConfig({
   align-items: ${(props) => props.alignItems || "flex-start"};
   box-sizing: border-box;
 `;
-var Col = (props) => {
+var Col = (0, import_react2.forwardRef)((props, ref) => {
   const _a = props, { children } = _a, otherProps = __objRest(_a, ["children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledCol, __spreadProps(__spreadValues({}, otherProps), { children }));
-};
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(StyledCol, __spreadProps(__spreadValues({ ref }, otherProps), { children }));
+});
+Col.displayName = "Col";
 var Col_default = Col;
 
 // src/Components/Text/Text.tsx
@@ -826,7 +828,7 @@ var Bulk = ({
 };
 
 // src/Components/Collapse/Collapse.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_styled_components8 = __toESM(require("styled-components"));
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var Wrapper = import_styled_components8.default.div`
@@ -839,9 +841,9 @@ var Inner = import_styled_components8.default.div`
   overflow-y: ${(p) => p.$maxHeight ? "auto" : "visible"};
 `;
 var Collapse = ({ open, children, maxHeight }) => {
-  const innerRef = (0, import_react2.useRef)(null);
-  const [height, setHeight] = (0, import_react2.useState)(0);
-  const recalc = (0, import_react2.useCallback)(() => {
+  const innerRef = (0, import_react3.useRef)(null);
+  const [height, setHeight] = (0, import_react3.useState)(0);
+  const recalc = (0, import_react3.useCallback)(() => {
     if (open && innerRef.current) {
       const full = innerRef.current.scrollHeight;
       setHeight(maxHeight ? Math.min(full, maxHeight) : full);
@@ -849,8 +851,8 @@ var Collapse = ({ open, children, maxHeight }) => {
       setHeight(0);
     }
   }, [open, maxHeight]);
-  (0, import_react2.useEffect)(recalc, [recalc]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(recalc, [recalc]);
+  (0, import_react3.useEffect)(() => {
     if (!open || !innerRef.current) return;
     const observer = new ResizeObserver(recalc);
     observer.observe(innerRef.current);
@@ -860,7 +862,7 @@ var Collapse = ({ open, children, maxHeight }) => {
 };
 
 // src/Components/Button/Button.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_styled_components9 = __toESM(require("styled-components"));
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var defaultSizes = {
@@ -1031,7 +1033,7 @@ var Button = (_a) => {
     "disabled",
     "noHover"
   ]);
-  const ref = (0, import_react3.useRef)(null);
+  const ref = (0, import_react4.useRef)(null);
   const sizeConfig = defaultSizes[size];
   const renderIconSlot = (icon) => typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     Icon,
@@ -1080,7 +1082,7 @@ var Button = (_a) => {
 };
 
 // src/Components/Modal/Modal.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_styled_components10 = __toESM(require("styled-components"));
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var shouldForwardProp5 = (prop) => !["width", "height", "minHeight", "padding", "backgroundColor"].includes(prop);
@@ -1156,7 +1158,7 @@ var Modal = (props) => {
   const hideModal = () => {
     closeModal == null ? void 0 : closeModal();
   };
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (showModal) {
       document.body.classList.add("modal-open");
     } else {
@@ -1203,7 +1205,7 @@ var ModalConfirmation = (props) => {
 };
 
 // src/Components/NewModal/NewModal.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/Components/Bubble/Bubble.tsx
 var import_styled_components11 = __toESM(require("styled-components"));
@@ -1286,11 +1288,11 @@ var NewModal = ({
 }) => {
   const mainColor = colors[variant] || colors.blue_700;
   const showHeader = Boolean(title || showCloseButton);
-  const [isDragging, setIsDragging] = (0, import_react5.useState)(false);
-  const [offset, setOffset] = (0, import_react5.useState)({ x: 0, y: 0 });
-  const lastPointRef = (0, import_react5.useRef)({ x: 0, y: 0 });
-  const headerRef = (0, import_react5.useRef)(null);
-  (0, import_react5.useEffect)(() => {
+  const [isDragging, setIsDragging] = (0, import_react6.useState)(false);
+  const [offset, setOffset] = (0, import_react6.useState)({ x: 0, y: 0 });
+  const lastPointRef = (0, import_react6.useRef)({ x: 0, y: 0 });
+  const headerRef = (0, import_react6.useRef)(null);
+  (0, import_react6.useEffect)(() => {
     if (!isDraggable) return;
     const onPointerMove = (e) => {
       if (!isDragging) return;
@@ -1326,7 +1328,7 @@ var NewModal = ({
     if (isDragging) return;
     closeModal == null ? void 0 : closeModal(e);
   };
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (showModal === true) setOffset({ x: 0, y: 0 });
   }, [showModal]);
   if (!showModal) return null;
@@ -1509,7 +1511,7 @@ var NewModal = ({
 };
 
 // src/Components/Drawer/Drawer.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_styled_components12 = __toESM(require("styled-components"));
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var StyledOverlay = import_styled_components12.default.div`
@@ -1567,10 +1569,10 @@ var Drawer = ({
   rightOutline = false,
   footer
 }) => {
-  const [isRendered, setIsRendered] = (0, import_react6.useState)(showDrawer);
-  const [isVisible, setIsVisible] = (0, import_react6.useState)(false);
-  const panelRef = (0, import_react6.useRef)(null);
-  (0, import_react6.useEffect)(() => {
+  const [isRendered, setIsRendered] = (0, import_react7.useState)(showDrawer);
+  const [isVisible, setIsVisible] = (0, import_react7.useState)(false);
+  const panelRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useEffect)(() => {
     if (showDrawer) {
       setIsRendered(true);
       requestAnimationFrame(() => setIsVisible(true));
@@ -1639,12 +1641,12 @@ var Drawer = ({
 };
 
 // src/Components/Toast/Toaster.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_react_dom = require("react-dom");
 var import_styled_components14 = __toESM(require("styled-components"));
 
 // src/Components/Toast/ToastCard.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_styled_components13 = __toESM(require("styled-components"));
 
 // src/Components/Toast/toastStore.ts
@@ -1692,12 +1694,12 @@ var dismissToast = (id) => {
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var EXIT_DURATION = 180;
 var ToastCard = ({ toastItem }) => {
-  const [isExiting, setIsExiting] = (0, import_react7.useState)(false);
-  const handleDismiss = (0, import_react7.useCallback)(() => {
+  const [isExiting, setIsExiting] = (0, import_react8.useState)(false);
+  const handleDismiss = (0, import_react8.useCallback)(() => {
     setIsExiting(true);
     setTimeout(() => dismissToast(toastItem.id), EXIT_DURATION);
   }, [toastItem.id]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const dismissTimer = setTimeout(handleDismiss, toastItem.timeOut);
     return () => clearTimeout(dismissTimer);
   }, [handleDismiss, toastItem.timeOut]);
@@ -1814,7 +1816,7 @@ var ProgressBar = import_styled_components13.default.div`
 // src/Components/Toast/Toaster.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var Toaster = () => {
-  const toasts2 = (0, import_react8.useSyncExternalStore)(subscribeToasts, getToastsSnapshot);
+  const toasts2 = (0, import_react9.useSyncExternalStore)(subscribeToasts, getToastsSnapshot);
   if (toasts2.length === 0) return null;
   return (0, import_react_dom.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Stack, { "aria-live": "polite", children: toasts2.map((toastItem) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToastCard, { toastItem }, toastItem.id)) }),
@@ -2050,7 +2052,7 @@ var Link = (_a) => {
 };
 
 // src/Components/Avatar/Avatar.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_styled_components18 = __toESM(require("styled-components"));
 
 // src/Components/Image/Image.tsx
@@ -2158,7 +2160,7 @@ var Avatar = ({
   badge
 }) => {
   var _a, _b, _c;
-  const [hasImageError, setHasImageError] = (0, import_react9.useState)(false);
+  const [hasImageError, setHasImageError] = (0, import_react10.useState)(false);
   const resolvedBackground = resolveColor2(backgroundColor, colors.grey_300);
   const resolvedText = resolveColor2(textColor, colors.dark);
   const initials = getInitials(name);
@@ -2196,7 +2198,7 @@ var Avatar = ({
 };
 
 // src/Components/Select/Select.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_react_dom2 = __toESM(require("react-dom"));
 var import_styled_components19 = __toESM(require("styled-components"));
 var import_jsx_runtime23 = require("react/jsx-runtime");
@@ -2309,13 +2311,13 @@ var Select = ({
   hideSearchBar,
   noFlex
 }) => {
-  const [isOpen, setIsOpen] = (0, import_react10.useState)(false);
-  const [searchTerm, setSearchTerm] = (0, import_react10.useState)("");
-  const [dropdownPosition, setDropdownPosition] = (0, import_react10.useState)({});
-  const [activeIndex, setActiveIndex] = (0, import_react10.useState)(0);
-  const containerRef = (0, import_react10.useRef)(null);
-  const dropdownRef = (0, import_react10.useRef)(null);
-  const searchInputRef = (0, import_react10.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react11.useState)(false);
+  const [searchTerm, setSearchTerm] = (0, import_react11.useState)("");
+  const [dropdownPosition, setDropdownPosition] = (0, import_react11.useState)({});
+  const [activeIndex, setActiveIndex] = (0, import_react11.useState)(0);
+  const containerRef = (0, import_react11.useRef)(null);
+  const dropdownRef = (0, import_react11.useRef)(null);
+  const searchInputRef = (0, import_react11.useRef)(null);
   const selectedOption = options.find((option) => option.value === value);
   const handleSelect = (option) => {
     onChange == null ? void 0 : onChange(option.value);
@@ -2368,7 +2370,7 @@ var Select = ({
       }
     }
   };
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (containerRef.current && !containerRef.current.contains(event.target) && dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setSearchTerm("");
@@ -2463,7 +2465,7 @@ var Select = ({
 };
 
 // src/Components/Input/Input.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_styled_components20 = __toESM(require("styled-components"));
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var shouldForwardProp8 = (prop) => ![
@@ -2669,7 +2671,7 @@ var displayToIso = (displayValue) => {
   const isoDay = String(day).padStart(2, "0");
   return `${yearStr}-${isoMonth}-${isoDay}`;
 };
-var Input = (0, import_react11.forwardRef)((props, ref) => {
+var Input = (0, import_react12.forwardRef)((props, ref) => {
   const _a = props, {
     label,
     value,
@@ -2708,11 +2710,11 @@ var Input = (0, import_react11.forwardRef)((props, ref) => {
   const inputName = otherProps == null ? void 0 : otherProps.name;
   const { min, max, step } = otherProps || {};
   const _b = otherProps || {}, { name } = _b, forwardProps = __objRest(_b, ["name"]);
-  const [showPassword, setShowPassword] = (0, import_react11.useState)(false);
-  const [displayDateValue, setDisplayDateValue] = (0, import_react11.useState)("");
-  const nativeDateRef = (0, import_react11.useRef)(null);
-  const innerRef = (0, import_react11.useRef)(null);
-  (0, import_react11.useImperativeHandle)(
+  const [showPassword, setShowPassword] = (0, import_react12.useState)(false);
+  const [displayDateValue, setDisplayDateValue] = (0, import_react12.useState)("");
+  const nativeDateRef = (0, import_react12.useRef)(null);
+  const innerRef = (0, import_react12.useRef)(null);
+  (0, import_react12.useImperativeHandle)(
     ref,
     () => innerRef.current
   );
@@ -2730,7 +2732,7 @@ var Input = (0, import_react11.forwardRef)((props, ref) => {
   const computedStyle = isSearch ? __spreadValues(__spreadValues({
     paddingLeft: "34px"
   }, hasSearchValue && onClear ? { paddingRight: "34px" } : {}), style2) : style2;
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (isDate) {
       const formatted = formatIsoToDisplay(isoValue);
       setDisplayDateValue((prev) => formatted !== prev ? formatted : prev);
@@ -2950,7 +2952,7 @@ var Checkbox = ({
 };
 
 // src/Components/Radio/Radio.tsx
-var import_react12 = require("react");
+var import_react13 = 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`
@@ -3007,7 +3009,7 @@ var Radio = ({
   value
 }) => {
   const color = colors[variant] || colors.blue_950;
-  const generatedId = (0, import_react12.useId)();
+  const generatedId = (0, import_react13.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)(
@@ -3027,7 +3029,7 @@ var Radio = ({
 };
 
 // src/Components/Accordion/Accordion.tsx
-var import_react13 = require("react");
+var import_react14 = 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`
@@ -3088,8 +3090,8 @@ var Accordion = ({
   backgroundHeader = colors.white
 }) => {
   const resolvedBackgroundHeader = typeof backgroundHeader === "string" && backgroundHeader in colors ? colors[backgroundHeader] : backgroundHeader;
-  const [internalOpen, setInternalOpen] = (0, import_react13.useState)(defaultOpen);
-  const [internalOpenId, setInternalOpenId] = (0, import_react13.useState)(
+  const [internalOpen, setInternalOpen] = (0, import_react14.useState)(defaultOpen);
+  const [internalOpenId, setInternalOpenId] = (0, import_react14.useState)(
     null
   );
   const isControlled = controlledOpen !== void 0;
@@ -3104,7 +3106,7 @@ var Accordion = ({
       setInternalOpen((prev) => !prev);
     }
   };
-  const toggleItem = (0, import_react13.useCallback)(
+  const toggleItem = (0, import_react14.useCallback)(
     (id) => {
       if (disabled) return;
       const nextId2 = activeItemId === id ? null : id;
@@ -3171,7 +3173,7 @@ var Accordion = ({
 };
 
 // src/Components/ColorPicker/ColorPicker.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_styled_components24 = __toESM(require("styled-components"));
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var SIZES = {
@@ -3248,7 +3250,7 @@ var TEXT_SIZE_MAP = {
   m: "xs",
   l: "s"
 };
-var ColorPicker = (0, import_react14.forwardRef)(
+var ColorPicker = (0, import_react15.forwardRef)(
   ({
     label,
     value,
@@ -3257,11 +3259,11 @@ var ColorPicker = (0, import_react14.forwardRef)(
     disabled = false,
     size = "m"
   }, ref) => {
-    const innerRef = (0, import_react14.useRef)(null);
-    const [internalColor, setInternalColor] = (0, import_react14.useState)(defaultValue);
+    const innerRef = (0, import_react15.useRef)(null);
+    const [internalColor, setInternalColor] = (0, import_react15.useState)(defaultValue);
     const currentColor = value !== void 0 ? value : internalColor;
     const dims = SIZES[size];
-    (0, import_react14.useEffect)(() => {
+    (0, import_react15.useEffect)(() => {
       if (!ref) return;
       if (typeof ref === "function") {
         ref(innerRef.current);
@@ -3307,7 +3309,7 @@ var ColorPicker = (0, import_react14.forwardRef)(
 ColorPicker.displayName = "ColorPicker";
 
 // src/Components/SliderInput/SliderInput.tsx
-var import_react15 = require("react");
+var import_react16 = 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`
@@ -3389,7 +3391,7 @@ var MinMaxRow = import_styled_components25.default.span`
   justify-content: space-between;
   align-items: center;
 `;
-var SliderInput = (0, import_react15.forwardRef)(
+var SliderInput = (0, import_react16.forwardRef)(
   ({
     value,
     onChange,
@@ -3524,7 +3526,7 @@ var ListItem = (props) => {
 };
 
 // src/Components/Table/Table.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_styled_components28 = __toESM(require("styled-components"));
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var shouldForwardPropTable = (prop) => ![
@@ -3560,7 +3562,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_react16.forwardRef)((props, ref) => {
+var Table = (0, import_react17.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 })) }));
@@ -3590,7 +3592,7 @@ var TableHeader = (props) => {
 };
 
 // src/Components/Table/TableBody/TableBody.tsx
-var import_react17 = require("react");
+var import_react18 = 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(
@@ -3609,7 +3611,7 @@ var StyledTableBody = import_styled_components30.default.div.withConfig({
     background-color: ${(props) => props.useEvenBackground ? "#f2f2f2" : ""};
   }
 `;
-var TableBody = (0, import_react17.forwardRef)(
+var TableBody = (0, import_react18.forwardRef)(
   (props, ref) => {
     const _a = props, { children } = _a, otherProps = __objRest(_a, ["children"]);
     const safeChildren = children;
@@ -3684,7 +3686,7 @@ var TableCell = (props) => {
 };
 
 // src/Components/Table/TableHeaderCell/TableHeaderCell.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_styled_components33 = __toESM(require("styled-components"));
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var shouldForwardPropTableHeaderCell = (prop) => !["useSort", "isSort", "flexGrow", "flexShrink", "width"].includes(prop);
@@ -3720,7 +3722,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_react18.useState)(false);
+  const [hovered, setHovered] = (0, import_react19.useState)(false);
   const showArrow = useSort && (isSort || hovered);
   const arrowChar = isSort && sortOrder === "asc" ? "\u2191" : "\u2193";
   const arrowOpacity = isSort ? 1 : 0.35;
@@ -3868,7 +3870,7 @@ var SkeletonRow = ({ columns = 9 }) => /* @__PURE__ */ (0, import_jsx_runtime42.
 ] });
 
 // src/Components/Switch/Switch.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_styled_components38 = __toESM(require("styled-components"));
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var BASE = {
@@ -3949,7 +3951,7 @@ var Knob = import_styled_components38.default.span`
     transform: translateY(-50%) scale(0.96);
   }
 `;
-var Switch = (0, import_react19.forwardRef)(
+var Switch = (0, import_react20.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       checked,
@@ -4005,7 +4007,7 @@ var CardSkeleton = () => {
 };
 
 // src/Components/Options/Options.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var Options = ({
   icon,
@@ -4015,8 +4017,8 @@ var Options = ({
   onChange,
   disabled = false
 }) => {
-  const [state, setState] = (0, import_react20.useState)(0);
-  (0, import_react20.useEffect)(() => {
+  const [state, setState] = (0, import_react21.useState)(0);
+  (0, import_react21.useEffect)(() => {
     if (defaultId) {
       const defaultIndex = options.findIndex(
         (option) => option.id === defaultId
@@ -4074,7 +4076,7 @@ var Options = ({
 };
 
 // src/Components/Stepper/Stepper.tsx
-var import_react21 = require("react");
+var import_react22 = 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`
@@ -4113,7 +4115,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_react21.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_react22.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
         Circle,
         {
@@ -4130,7 +4132,7 @@ var Stepper = ({
 };
 
 // src/Components/Tabs/Tabs.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_styled_components40 = __toESM(require("styled-components"));
 var import_jsx_runtime47 = require("react/jsx-runtime");
 var TOKENS = {
@@ -4301,13 +4303,13 @@ var Tabs = (_a) => {
     "baselineColor",
     "children"
   ]);
-  const rootRef = (0, import_react22.useRef)(null);
-  const refsMap = (0, import_react22.useRef)(/* @__PURE__ */ new Map());
-  const [bar, setBar] = (0, import_react22.useState)({ left: 0, width: 0 });
+  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 setTabRef = (id) => (el) => {
     if (el) refsMap.current.set(id, el);
   };
-  const updateBar = (0, import_react22.useCallback)(() => {
+  const updateBar = (0, import_react23.useCallback)(() => {
     const root = rootRef.current;
     const activeEl = value !== void 0 ? refsMap.current.get(value) : void 0;
     if (!root || !activeEl) return;
@@ -4315,7 +4317,7 @@ var Tabs = (_a) => {
     const box = activeEl.getBoundingClientRect();
     setBar({ left: box.left - rootBox.left, width: box.width });
   }, [value]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     updateBar();
     const ro = new ResizeObserver(updateBar);
     const activeEl = value !== void 0 ? refsMap.current.get(value) : void 0;
@@ -4323,14 +4325,14 @@ var Tabs = (_a) => {
     if (activeEl) ro.observe(activeEl);
     return () => ro.disconnect();
   }, [value, updateBar]);
-  const handleSelect = (0, import_react22.useCallback)(
+  const handleSelect = (0, import_react23.useCallback)(
     (id) => {
       if (id !== value && onChange) onChange(id);
     },
     [onChange, value]
   );
   const isPillsFullWidth = variant === "pills" && align === "start";
-  const rendered = (0, import_react22.useMemo)(() => {
+  const rendered = (0, import_react23.useMemo)(() => {
     if (items && items.length) {
       return items.map((it) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
         Tab,
@@ -4360,12 +4362,12 @@ var Tabs = (_a) => {
         it.id
       ));
     }
-    return import_react22.Children.map(children, (child) => {
+    return import_react23.Children.map(children, (child) => {
       var _a2;
-      if (!(0, import_react22.isValidElement)(child)) return child;
+      if (!(0, import_react23.isValidElement)(child)) return child;
       const id = (_a2 = child.props.id) != null ? _a2 : child.key;
       const active = id === value;
-      return (0, import_react22.cloneElement)(child, {
+      return (0, import_react23.cloneElement)(child, {
         active,
         variant,
         fullWidth: isPillsFullWidth,
@@ -4393,7 +4395,7 @@ var Tabs = (_a) => {
 };
 
 // src/Components/MultiSelect/MultiSelect.tsx
-var import_react23 = require("react");
+var import_react24 = 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`
@@ -4436,8 +4438,8 @@ var MultiSelect = ({
   width,
   align = "left"
 }) => {
-  const [isOpen, setIsOpen] = (0, import_react23.useState)(false);
-  const dropdownRef = (0, import_react23.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react24.useState)(false);
+  const dropdownRef = (0, import_react24.useRef)(null);
   const toggleOption = (value) => {
     if (!onChange) return;
     if (selectedValues.includes(value)) {
@@ -4447,7 +4449,7 @@ var MultiSelect = ({
       onChange([...selectedValues, value]);
     }
   };
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     const handleClickOutside = (e) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
         setIsOpen(false);
@@ -4489,7 +4491,7 @@ var MultiSelect = ({
 };
 
 // src/Components/DatePicker/DatePicker.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_jsx_runtime49 = require("react/jsx-runtime");
 var LOCALE_MAP = {
   fr: "fr-FR",
@@ -4560,28 +4562,28 @@ var DatePicker = (props) => {
   const resolvedLocale = resolveLocale(locale);
   const monthNames = getMonthNames(resolvedLocale);
   const dayNames = getDayNames(resolvedLocale);
-  const [isOpen, setIsOpen] = (0, import_react24.useState)(defaultOpen);
-  const [currentMonth, setCurrentMonth] = (0, import_react24.useState)(/* @__PURE__ */ new Date());
-  const [isSelectingEnd, setIsSelectingEnd] = (0, import_react24.useState)(false);
-  const [singleDate, setSingleDate] = (0, import_react24.useState)(
+  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)(
     isSingle ? (_a = props.value) != null ? _a : null : null
   );
-  const [startDate, setStartDate] = (0, import_react24.useState)(
+  const [startDate, setStartDate] = (0, import_react25.useState)(
     !isSingle ? (_c = (_b = props.value) == null ? void 0 : _b.start) != null ? _c : null : null
   );
-  const [endDate, setEndDate] = (0, import_react24.useState)(
+  const [endDate, setEndDate] = (0, import_react25.useState)(
     !isSingle ? (_e = (_d = props.value) == null ? void 0 : _d.end) != null ? _e : null : null
   );
-  const ref = (0, import_react24.useRef)(null);
+  const ref = (0, import_react25.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_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!isSingle) return;
     const v = props.value;
     if (v !== void 0) setSingleDate(v);
   }, [singleValueMs]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     var _a2, _b2;
     if (isSingle) return;
     const v = props.value;
@@ -4589,7 +4591,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_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     const handleClickOutside = (e) => {
       if (ref.current && !ref.current.contains(e.target)) {
         setIsOpen(false);
@@ -4873,7 +4875,7 @@ var DatePicker = (props) => {
 };
 
 // src/Components/IconTabs/IconTabs.tsx
-var import_react25 = require("react");
+var import_react26 = 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`
@@ -4935,10 +4937,10 @@ var IconTabs = ({
   defaultTabIndex = 0
 }) => {
   var _a;
-  const [selectedTab, setSelectedTab] = (0, import_react25.useState)(defaultTabIndex);
-  const sliderRef = (0, import_react25.useRef)(null);
-  const tabRefs = (0, import_react25.useRef)([]);
-  (0, import_react25.useEffect)(() => {
+  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)(() => {
     if (defaultTabIndex >= 0 && defaultTabIndex !== selectedTab) {
       setSelectedTab(defaultTabIndex);
     }
@@ -4949,7 +4951,7 @@ var IconTabs = ({
       onTabChange(index);
     }
   };
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     if (sliderRef.current && tabRefs.current[selectedTab]) {
       const selectedTabRect = tabRefs.current[selectedTab].getBoundingClientRect();
       const parentRect = tabRefs.current[selectedTab].parentElement.getBoundingClientRect();
@@ -4988,7 +4990,7 @@ var IconTabs = ({
 };
 
 // src/Components/Popover/Popover.tsx
-var import_react26 = require("react");
+var import_react27 = 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");
@@ -5034,15 +5036,15 @@ var Popover = ({
   align = "right",
   fullWidth = false
 }) => {
-  const [open, setOpen] = (0, import_react26.useState)(false);
-  const ref = (0, import_react26.useRef)(null);
-  const menuRef = (0, import_react26.useRef)(null);
-  const [menuPosition, setMenuPosition] = (0, import_react26.useState)({
+  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)({
     mode: "default",
     top: 0,
     left: 0
   });
-  const updatePosition = (0, import_react26.useCallback)(() => {
+  const updatePosition = (0, import_react27.useCallback)(() => {
     var _a;
     if (!ref.current) return;
     if (anchorRef == null ? void 0 : anchorRef.current) {
@@ -5071,7 +5073,7 @@ var Popover = ({
       });
     }
   }, [items.length, anchorRef, offsetY, align]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     const handleClickOutside = (event) => {
       var _a, _b;
       const isInTrigger = (_a = ref.current) == null ? void 0 : _a.contains(event.target);
@@ -5396,7 +5398,7 @@ var Banner = ({
 };
 
 // src/Components/Tooltip/Tooltip.tsx
-var import_react27 = require("react");
+var import_react28 = 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`
@@ -5500,7 +5502,7 @@ var Tooltip = ({
   direction = "top",
   children
 }) => {
-  const [isVisible, setIsVisible] = (0, import_react27.useState)(false);
+  const [isVisible, setIsVisible] = (0, import_react28.useState)(false);
   const handleMouseEnter = () => setIsVisible(true);
   const handleMouseLeave = () => setIsVisible(false);
   return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
@@ -5527,7 +5529,7 @@ var Tooltip = ({
 };
 
 // src/Components/Pagination/Pagination.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_jsx_runtime56 = require("react/jsx-runtime");
 var getPageNumbers = (current, total) => {
   if (total <= 5) {
@@ -5551,7 +5553,7 @@ var Pagination = ({
   summaryLabel
 }) => {
   const totalPages = Math.max(1, Math.ceil(totalItems / itemsPerPage));
-  const pages = (0, import_react28.useMemo)(
+  const pages = (0, import_react29.useMemo)(
     () => getPageNumbers(currentPage, totalPages),
     [currentPage, totalPages]
   );
@@ -5605,7 +5607,7 @@ var Pagination = ({
 };
 
 // src/Components/FileUploadZone/FileUploadZone.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_styled_components47 = __toESM(require("styled-components"));
 var import_jsx_runtime57 = require("react/jsx-runtime");
 var ACCEPT_MAP = {
@@ -5692,19 +5694,19 @@ var FileUploadZone = ({
   icon = "cloud-arrow-up",
   showFileName = false
 }) => {
-  const [isDragging, setIsDragging] = (0, import_react29.useState)(false);
-  const [internalPreviewUrl, setInternalPreviewUrl] = (0, import_react29.useState)(
+  const [isDragging, setIsDragging] = (0, import_react30.useState)(false);
+  const [internalPreviewUrl, setInternalPreviewUrl] = (0, import_react30.useState)(
     null
   );
-  const [fileType, setFileType] = (0, import_react29.useState)(null);
-  const [fileName, setFileName] = (0, import_react29.useState)(null);
-  const [inlineError, setInlineError] = (0, import_react29.useState)(null);
-  const inputRef = (0, import_react29.useRef)(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 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_react29.useCallback)(
+  const emitError = (0, import_react30.useCallback)(
     (message) => {
       if (onError) {
         onError(message);
@@ -5714,7 +5716,7 @@ var FileUploadZone = ({
     },
     [onError]
   );
-  const validateFile = (0, import_react29.useCallback)(
+  const validateFile = (0, import_react30.useCallback)(
     (file) => {
       if (!mimeTypes.includes(file.type)) {
         return { ok: false, error: "Format de fichier non accept\xE9." };
@@ -5729,7 +5731,7 @@ var FileUploadZone = ({
     },
     [mimeTypes, maxSizeMB]
   );
-  const processFile = (0, import_react29.useCallback)(
+  const processFile = (0, import_react30.useCallback)(
     (file) => {
       setInlineError(null);
       const result = validateFile(file);
@@ -5747,7 +5749,7 @@ var FileUploadZone = ({
     },
     [validateFile, onSave, showPreview, emitError]
   );
-  const processFiles = (0, import_react29.useCallback)(
+  const processFiles = (0, import_react30.useCallback)(
     (files) => {
       setInlineError(null);
       for (const file of files) {

package/dist/index.mjs

@@ -354,6 +354,7 @@ Row.displayName = "Row";
 var Row_default = Row;
 
 // src/Components/Col/Col.tsx
+import { forwardRef as forwardRef2 } from "react";
 import styled5 from "styled-components";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var shouldForwardPropCol = (prop) => ![
@@ -389,10 +390,11 @@ var StyledCol = styled5.div.withConfig({
   align-items: ${(props) => props.alignItems || "flex-start"};
   box-sizing: border-box;
 `;
-var Col = (props) => {
+var Col = forwardRef2((props, ref) => {
   const _a = props, { children } = _a, otherProps = __objRest(_a, ["children"]);
-  return /* @__PURE__ */ jsx5(StyledCol, __spreadProps(__spreadValues({}, otherProps), { children }));
-};
+  return /* @__PURE__ */ jsx5(StyledCol, __spreadProps(__spreadValues({ ref }, otherProps), { children }));
+});
+Col.displayName = "Col";
 var Col_default = Col;
 
 // src/Components/Text/Text.tsx
@@ -2325,7 +2327,7 @@ var Select = ({
 
 // src/Components/Input/Input.tsx
 import {
-  forwardRef as forwardRef2,
+  forwardRef as forwardRef3,
   useEffect as useEffect7,
   useImperativeHandle,
   useRef as useRef6,
@@ -2536,7 +2538,7 @@ var displayToIso = (displayValue) => {
   const isoDay = String(day).padStart(2, "0");
   return `${yearStr}-${isoMonth}-${isoDay}`;
 };
-var Input = forwardRef2((props, ref) => {
+var Input = forwardRef3((props, ref) => {
   const _a = props, {
     label,
     value,
@@ -3038,7 +3040,7 @@ var Accordion = ({
 };
 
 // src/Components/ColorPicker/ColorPicker.tsx
-import { forwardRef as forwardRef3, useState as useState9, useRef as useRef7, useEffect as useEffect8 } from "react";
+import { forwardRef as forwardRef4, useState as useState9, useRef as useRef7, useEffect as useEffect8 } from "react";
 import styled24 from "styled-components";
 import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
 var SIZES = {
@@ -3115,7 +3117,7 @@ var TEXT_SIZE_MAP = {
   m: "xs",
   l: "s"
 };
-var ColorPicker = forwardRef3(
+var ColorPicker = forwardRef4(
   ({
     label,
     value,
@@ -3174,7 +3176,7 @@ var ColorPicker = forwardRef3(
 ColorPicker.displayName = "ColorPicker";
 
 // src/Components/SliderInput/SliderInput.tsx
-import { forwardRef as forwardRef4 } from "react";
+import { forwardRef as forwardRef5 } from "react";
 import styled25 from "styled-components";
 import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
 var Container3 = styled25.label`
@@ -3256,7 +3258,7 @@ var MinMaxRow = styled25.span`
   justify-content: space-between;
   align-items: center;
 `;
-var SliderInput = forwardRef4(
+var SliderInput = forwardRef5(
   ({
     value,
     onChange,
@@ -3391,7 +3393,7 @@ var ListItem = (props) => {
 };
 
 // src/Components/Table/Table.tsx
-import { forwardRef as forwardRef5 } from "react";
+import { forwardRef as forwardRef6 } from "react";
 import styled28 from "styled-components";
 import { jsx as jsx32 } from "react/jsx-runtime";
 var shouldForwardPropTable = (prop) => ![
@@ -3427,7 +3429,7 @@ var StyledContainer3 = styled28.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 = forwardRef5((props, ref) => {
+var Table = forwardRef6((props, ref) => {
   const _a = props, { children } = _a, otherProps = __objRest(_a, ["children"]);
   const safeChildren = children;
   return /* @__PURE__ */ jsx32(StyledContainer3, __spreadProps(__spreadValues({}, otherProps), { ref, children: /* @__PURE__ */ jsx32(StyledTable, __spreadProps(__spreadValues({}, otherProps), { children: safeChildren })) }));
@@ -3457,7 +3459,7 @@ var TableHeader = (props) => {
 };
 
 // src/Components/Table/TableBody/TableBody.tsx
-import { forwardRef as forwardRef6 } from "react";
+import { forwardRef as forwardRef7 } from "react";
 import styled30 from "styled-components";
 import { jsx as jsx34 } from "react/jsx-runtime";
 var shouldForwardPropTableBody = (prop) => !["backgroundColor", "useEvenBackground", "fixedHeight", "color"].includes(
@@ -3476,7 +3478,7 @@ var StyledTableBody = styled30.div.withConfig({
     background-color: ${(props) => props.useEvenBackground ? "#f2f2f2" : ""};
   }
 `;
-var TableBody = forwardRef6(
+var TableBody = forwardRef7(
   (props, ref) => {
     const _a = props, { children } = _a, otherProps = __objRest(_a, ["children"]);
     const safeChildren = children;
@@ -3735,7 +3737,7 @@ var SkeletonRow = ({ columns = 9 }) => /* @__PURE__ */ jsxs18(Fragment4, { child
 ] });
 
 // src/Components/Switch/Switch.tsx
-import { forwardRef as forwardRef7 } from "react";
+import { forwardRef as forwardRef8 } from "react";
 import styled38, { css } from "styled-components";
 import { jsx as jsx43, jsxs as jsxs19 } from "react/jsx-runtime";
 var BASE = {
@@ -3816,7 +3818,7 @@ var Knob = styled38.span`
     transform: translateY(-50%) scale(0.96);
   }
 `;
-var Switch = forwardRef7(
+var Switch = forwardRef8(
   (_a, ref) => {
     var _b = _a, {
       checked,

package/package.json

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