@zentrades-ui/components 0.1.6 → 0.2.0

package/dist/index.js

@@ -1,3 +1,5 @@
+import './index.css';
+
 // src/atoms/Box.tsx
 import { forwardRef } from "react";
 
@@ -939,7 +941,9 @@ var isNativeInputElement = (node) => React3.isValidElement(node) && typeof node.
 var Input = forwardRef8(function Input2(props, ref) {
   const {
     label,
-    mandatory = false,
+    required = false,
+    mandatory,
+    // deprecated - kept for backwards compatibility
     helperText,
     error = false,
     errorMessage,
@@ -955,6 +959,7 @@ var Input = forwardRef8(function Input2(props, ref) {
     noOutline = false,
     ...inputProps
   } = props;
+  const isRequired = required || mandatory || false;
   const inputId = id || `input-${React3.useId()}`;
   const helperTextId = `${inputId}-helper`;
   const displayHelperText = error && errorMessage ? errorMessage : helperText;
@@ -992,7 +997,7 @@ var Input = forwardRef8(function Input2(props, ref) {
         children: label
       }
     ),
-    mandatory && /* @__PURE__ */ jsx8(Text2, { fontVariant: "text-m-regular", color: "contentTertiary", as: "span", children: "*" })
+    isRequired && /* @__PURE__ */ jsx8(Text2, { fontVariant: "text-m-regular", color: "contentTertiary", as: "span", children: "*" })
   ] });
   const inputElement2 = /* @__PURE__ */ jsxs3(Box2, { className: inputWrapper, children: [
     /* @__PURE__ */ jsxs3(
@@ -1148,13 +1153,20 @@ var Checkbox = React4.forwardRef(
     className,
     label,
     description,
+    // deprecated
+    helperText,
     disabled,
     checked,
     partialChecked,
     size = "md",
+    required,
+    error = false,
+    errorMessage,
     ...props
   }, forwardedRef) => {
     const boxSize = sizePxMap[size];
+    const checkboxId = props.id || `checkbox-${React4.useId()}`;
+    const displayHelperText = error && errorMessage ? errorMessage : helperText || description;
     const checkboxStyles = {
       display: "flex",
       justifyContent: "center",
@@ -1173,10 +1185,13 @@ var Checkbox = React4.forwardRef(
       CheckboxPrimitive.Root,
       {
         ref: forwardedRef,
+        id: checkboxId,
         style: checkboxStyles,
         className: cn(checkboxRoot, className),
         disabled,
         checked,
+        required,
+        "aria-invalid": error || void 0,
         ...props,
         children: /* @__PURE__ */ jsx9(
           CheckboxPrimitive.Indicator,
@@ -1188,35 +1203,47 @@ var Checkbox = React4.forwardRef(
         )
       }
     );
-    if (label || description) {
-      return /* @__PURE__ */ jsxs4(
-        Inline2,
-        {
-          gap: "sm",
-          alignItems: "flex-start",
-          opacity: disabled ? "50" : "100",
-          cursor: disabled ? "not-allowed" : "pointer",
-          children: [
-            checkbox,
-            /* @__PURE__ */ jsxs4(
-              Stack2,
-              {
-                gap: "xs",
-                onClick: (e) => {
-                  if (!disabled) {
-                    const button = e.currentTarget.parentElement?.querySelector("button");
-                    button?.click();
-                  }
-                },
-                children: [
-                  label && /* @__PURE__ */ jsx9(Text2, { as: "span", fontVariant: "text-s-medium", children: label }),
-                  description && /* @__PURE__ */ jsx9(Text2, { as: "span", color: "contentTertiary", fontVariant: "text-m-regular", children: description })
-                ]
-              }
-            )
-          ]
-        }
-      );
+    if (label || displayHelperText) {
+      return /* @__PURE__ */ jsxs4(Stack2, { gap: "xs", children: [
+        /* @__PURE__ */ jsxs4(
+          Inline2,
+          {
+            gap: "sm",
+            alignItems: "flex-start",
+            opacity: disabled ? "50" : "100",
+            cursor: disabled ? "not-allowed" : "pointer",
+            children: [
+              checkbox,
+              /* @__PURE__ */ jsx9(
+                Stack2,
+                {
+                  gap: "xs",
+                  onClick: (e) => {
+                    if (!disabled) {
+                      const button = e.currentTarget.parentElement?.querySelector("button");
+                      button?.click();
+                    }
+                  },
+                  children: label && /* @__PURE__ */ jsxs4(Inline2, { gap: "2xs", alignItems: "center", children: [
+                    /* @__PURE__ */ jsx9(Text2, { as: "label", fontVariant: "text-s-medium", htmlFor: checkboxId, children: label }),
+                    required && /* @__PURE__ */ jsx9(Text2, { as: "span", color: "contentTertiary", fontVariant: "text-s-medium", children: "*" })
+                  ] })
+                }
+              )
+            ]
+          }
+        ),
+        displayHelperText && /* @__PURE__ */ jsx9(
+          Text2,
+          {
+            fontVariant: "text-s-regular",
+            color: error ? "contentNegative" : "contentTertiary",
+            role: error ? "alert" : void 0,
+            style: { marginLeft: boxSize + 8 },
+            children: displayHelperText
+          }
+        )
+      ] });
     }
     return checkbox;
   }
@@ -1224,7 +1251,7 @@ var Checkbox = React4.forwardRef(
 Checkbox.displayName = "Checkbox";
 
 // src/components/Switch/Switch.tsx
-import { forwardRef as forwardRef10 } from "react";
+import React5, { forwardRef as forwardRef10 } from "react";
 import * as SwitchPrimitive from "@radix-ui/react-switch";
 
 // src/components/Switch/switch.css.ts
@@ -1233,30 +1260,86 @@ var switchRoot = _7a4684({ defaultClassName: "switch__1q0tj351 switch_baseSwitch
 var switchThumb = _7a4684({ defaultClassName: "switch__1q0tj356 switch_baseSwitchThumb__1q0tj355", variantClassNames: { size: { sm: "switch_switchThumb_size_sm__1q0tj357", md: "switch_switchThumb_size_md__1q0tj358", lg: "switch_switchThumb_size_lg__1q0tj359" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
 
 // src/components/Switch/Switch.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
-var Switch = forwardRef10(({ size = "md", className, ...props }, ref) => {
-  const rootClasses = switchRoot({ size });
-  const thumbClasses = switchThumb({ size });
-  return /* @__PURE__ */ jsx10(
-    SwitchPrimitive.Root,
-    {
-      ref,
-      className: cn(rootClasses, className),
-      ...props,
-      children: /* @__PURE__ */ jsx10(SwitchPrimitive.Thumb, { className: thumbClasses })
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+var Switch = forwardRef10(
+  ({
+    size = "md",
+    className,
+    label,
+    helperText,
+    required,
+    error = false,
+    errorMessage,
+    disabled,
+    ...props
+  }, ref) => {
+    const rootClasses = switchRoot({ size });
+    const thumbClasses = switchThumb({ size });
+    const switchId = props.id || `switch-${React5.useId()}`;
+    const displayHelperText = error && errorMessage ? errorMessage : helperText;
+    const switchElement = /* @__PURE__ */ jsx10(
+      SwitchPrimitive.Root,
+      {
+        ref,
+        id: switchId,
+        className: cn(rootClasses, className),
+        disabled,
+        "aria-invalid": error || void 0,
+        ...props,
+        children: /* @__PURE__ */ jsx10(SwitchPrimitive.Thumb, { className: thumbClasses })
+      }
+    );
+    if (label || displayHelperText) {
+      return /* @__PURE__ */ jsxs5(Stack2, { gap: "xs", children: [
+        /* @__PURE__ */ jsxs5(
+          Inline2,
+          {
+            gap: "sm",
+            alignItems: "center",
+            opacity: disabled ? "50" : "100",
+            cursor: disabled ? "not-allowed" : "pointer",
+            children: [
+              switchElement,
+              label && /* @__PURE__ */ jsxs5(Inline2, { gap: "2xs", alignItems: "center", children: [
+                /* @__PURE__ */ jsx10(
+                  Text2,
+                  {
+                    as: "label",
+                    fontVariant: "text-s-medium",
+                    htmlFor: switchId,
+                    style: { cursor: disabled ? "not-allowed" : "pointer" },
+                    children: label
+                  }
+                ),
+                required && /* @__PURE__ */ jsx10(Text2, { as: "span", color: "contentTertiary", fontVariant: "text-s-medium", children: "*" })
+              ] })
+            ]
+          }
+        ),
+        displayHelperText && /* @__PURE__ */ jsx10(
+          Text2,
+          {
+            fontVariant: "text-s-regular",
+            color: error ? "contentNegative" : "contentTertiary",
+            role: error ? "alert" : void 0,
+            children: displayHelperText
+          }
+        )
+      ] });
     }
-  );
-});
+    return switchElement;
+  }
+);
 Switch.displayName = "Switch";
 
 // src/components/Chip/Chip.tsx
 import React6, { forwardRef as forwardRef11 } from "react";
-import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var ChipComponent = forwardRef11(function Chip(props, ref) {
   const { icon, outline, variant, children, disabled, onClick, ...restProps } = props;
   const isValidIcon = icon && React6.isValidElement(icon);
   const isOnlyIcon = icon && React6.isValidElement(icon) && !children;
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     Inline2,
     {
       ref,
@@ -1302,7 +1385,7 @@ var tooltipArrow = "tooltip_tooltipArrow__jg1db35";
 var tooltipContent = "tooltip_tooltipContent__jg1db34";
 
 // src/components/Tooltip/Tooltip.tsx
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip = ({
   children,
@@ -1321,9 +1404,9 @@ var Tooltip = ({
       delayDuration,
       skipDelayDuration,
       disableHoverableContent,
-      children: /* @__PURE__ */ jsxs6(TooltipPrimitive.Root, { children: [
+      children: /* @__PURE__ */ jsxs7(TooltipPrimitive.Root, { children: [
         /* @__PURE__ */ jsx12(TooltipPrimitive.Trigger, { asChild: true, children }),
-        /* @__PURE__ */ jsx12(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs6(
+        /* @__PURE__ */ jsx12(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs7(
           TooltipPrimitive.Content,
           {
             className: tooltipContent,
@@ -1374,7 +1457,7 @@ var selectValue = "select_selectValue__ijj2cg8";
 var selectViewport = "select_selectViewport__ijj2cgb";
 
 // src/components/Select/Select.tsx
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 var ChevronDownIcon = ({ className }) => /* @__PURE__ */ jsx13(
   "svg",
   {
@@ -1393,7 +1476,7 @@ var ChevronDownIcon = ({ className }) => /* @__PURE__ */ jsx13(
 var SelectRoot = SelectPrimitive.Root;
 SelectRoot.displayName = "SelectRoot";
 var SelectTrigger = React7.forwardRef(({ children, error, ...props }, ref) => {
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     SelectPrimitive.Trigger,
     {
       ref,
@@ -1419,7 +1502,7 @@ var SelectContent = React7.forwardRef(
     ...props
   }, ref) => {
     const contentChildren = disableListWrapper ? children : /* @__PURE__ */ jsx13(Stack2, { as: "ul", gap: "xs", children });
-    return /* @__PURE__ */ jsx13(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs7(
+    return /* @__PURE__ */ jsx13(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs8(
       SelectPrimitive.Content,
       {
         ref,
@@ -1469,12 +1552,12 @@ var Select = React7.forwardRef(
   }, ref) => {
     const helperTextId = `${name}-helper`;
     const displayHelperText = error && Boolean(errorMessage) ? errorMessage : helperText;
-    return /* @__PURE__ */ jsxs7(Stack2, { gap: "sm", children: [
-      label && /* @__PURE__ */ jsxs7("label", { className: selectLabel, children: [
+    return /* @__PURE__ */ jsxs8(Stack2, { gap: "sm", children: [
+      label && /* @__PURE__ */ jsxs8("label", { className: selectLabel, children: [
         label,
         required && /* @__PURE__ */ jsx13(Text2, { as: "span", color: "contentTertiary", children: "*" })
       ] }),
-      /* @__PURE__ */ jsxs7(
+      /* @__PURE__ */ jsxs8(
         SelectRoot,
         {
           value,
@@ -1726,7 +1809,7 @@ var textareaElement = _7a4689({ defaultClassName: "textarea__o7hyjda textarea_ba
 var textareaField = _7a4689({ defaultClassName: "textarea__o7hyjd4 textarea_baseTextareaField__o7hyjd3", variantClassNames: { state: { "default": "textarea_textareaField_state_default__o7hyjd5", error: "textarea_textareaField_state_error__o7hyjd6", disabled: "textarea_textareaField_state_disabled__o7hyjd7", view: "textarea_textareaField_state_view__o7hyjd8" } }, defaultVariants: { state: "default" }, compoundVariants: [] });
 
 // src/components/TextArea/TextArea.tsx
-import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 var ResizeIcon = () => /* @__PURE__ */ jsx17(
   "svg",
   {
@@ -1751,7 +1834,9 @@ var TextArea = forwardRef15(
   function TextArea2(props, ref) {
     const {
       label,
-      mandatory = false,
+      required = false,
+      mandatory,
+      // deprecated - kept for backwards compatibility
       helperText,
       error = false,
       errorMessage,
@@ -1764,6 +1849,7 @@ var TextArea = forwardRef15(
       readOnly,
       ...textareaProps
     } = props;
+    const isRequired = required || mandatory || false;
     const textareaId = id || `textarea-${React10.useId()}`;
     const helperTextId = `${textareaId}-helper`;
     const displayHelperText = error && errorMessage ? errorMessage : helperText;
@@ -1773,7 +1859,7 @@ var TextArea = forwardRef15(
       if (error) return "error";
       return "default";
     };
-    const labelElement = label && /* @__PURE__ */ jsxs8(Inline2, { gap: "2xs", style: horizontal ? { padding: "9px 0px" } : void 0, children: [
+    const labelElement = label && /* @__PURE__ */ jsxs9(Inline2, { gap: "2xs", style: horizontal ? { padding: "9px 0px" } : void 0, children: [
       /* @__PURE__ */ jsx17(
         Text2,
         {
@@ -1784,11 +1870,11 @@ var TextArea = forwardRef15(
           children: label
         }
       ),
-      mandatory && /* @__PURE__ */ jsx17(Text2, { fontVariant: "text-m-regular", color: "contentTertiary", as: "span", children: "*" })
+      isRequired && /* @__PURE__ */ jsx17(Text2, { fontVariant: "text-m-regular", color: "contentTertiary", as: "span", children: "*" })
     ] });
     const state = getState();
-    const textareaElement2 = /* @__PURE__ */ jsxs8(Stack2, { gap: "sm", width: "full", children: [
-      /* @__PURE__ */ jsxs8(Box2, { className: textareaField({ state }), children: [
+    const textareaElement2 = /* @__PURE__ */ jsxs9(Stack2, { gap: "sm", width: "full", children: [
+      /* @__PURE__ */ jsxs9(Box2, { className: textareaField({ state }), children: [
         /* @__PURE__ */ jsx17(
           "textarea",
           {
@@ -1816,7 +1902,7 @@ var TextArea = forwardRef15(
         }
       )
     ] });
-    return /* @__PURE__ */ jsxs8(
+    return /* @__PURE__ */ jsxs9(
       Box2,
       {
         className: textareaContainer({
@@ -1847,7 +1933,7 @@ var iconWrapper3 = "accordion_iconWrapper__1m7j6g7a";
 var triggerTitle = "accordion_triggerTitle__1m7j6g79";
 
 // src/components/Accordion/Accordion.tsx
-import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 var ChevronDownIcon2 = () => /* @__PURE__ */ jsx18(
   "svg",
   {
@@ -1918,7 +2004,7 @@ var AccordionTrigger = React11.forwardRef(({ children, className, variant, ...pr
       ref,
       className: cn(accordionTrigger({ variant: resolvedVariant }), className),
       ...props,
-      children: /* @__PURE__ */ jsxs9(
+      children: /* @__PURE__ */ jsxs10(
         Inline2,
         {
           flex: "1",
@@ -1980,7 +2066,7 @@ var menuSubContent = "menu_menuSubContent__1b87dxfe";
 var menuSubTrigger = "menu_menuSubTrigger__1b87dxfd menu_menuItemBase__1b87dxfa";
 
 // src/components/Menu/Menu.tsx
-import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
 var ChevronRightIcon = () => /* @__PURE__ */ jsx19(
   "svg",
   {
@@ -2106,7 +2192,7 @@ var Menu = ({
     ...defaultOpen !== void 0 ? { defaultOpen } : {},
     ...onOpenChange ? { onOpenChange } : {}
   };
-  return /* @__PURE__ */ jsxs10(MenuRoot, { ...menuRootProps, children: [
+  return /* @__PURE__ */ jsxs11(MenuRoot, { ...menuRootProps, children: [
     /* @__PURE__ */ jsx19(MenuTrigger, { children: triggerWithHoverHandlers }),
     /* @__PURE__ */ jsx19(
       MenuContent,
@@ -2166,8 +2252,8 @@ var MenuSeparator = ({ className }) => {
 };
 MenuSeparator.displayName = "MenuSeparator";
 var MenuSub = ({ children, label, padding = "xs" }) => {
-  return /* @__PURE__ */ jsxs10(DropdownMenu.Sub, { children: [
-    /* @__PURE__ */ jsxs10(DropdownMenu.SubTrigger, { className: menuSubTrigger, children: [
+  return /* @__PURE__ */ jsxs11(DropdownMenu.Sub, { children: [
+    /* @__PURE__ */ jsxs11(DropdownMenu.SubTrigger, { className: menuSubTrigger, children: [
       label,
       /* @__PURE__ */ jsx19(ChevronRightIcon, {})
     ] }),
@@ -2200,8 +2286,8 @@ var dialogHeader = "dialog_dialogHeader__1934qpw8";
 var dialogOverlay = "dialog_dialogOverlay__1934qpw2";
 
 // src/components/Dialog/Dialog.tsx
-import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
-var CloseIcon = () => /* @__PURE__ */ jsxs11(
+import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
+var CloseIcon = () => /* @__PURE__ */ jsxs12(
   "svg",
   {
     width: "20",
@@ -2226,7 +2312,7 @@ var DialogRoot = ({
   children,
   modal = true
 }) => {
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     DialogPrimitive.Root,
     {
       open,
@@ -2256,9 +2342,9 @@ var DialogContent = React13.forwardRef(
   }, ref) => {
     const resolvedMaxHeight = typeof maxHeight === "number" ? `${maxHeight / 16}rem` : maxHeight;
     const resolvedHeight = typeof height === "number" ? `${height / 16}rem` : height;
-    return /* @__PURE__ */ jsxs11(DialogPrimitive.Portal, { children: [
+    return /* @__PURE__ */ jsxs12(DialogPrimitive.Portal, { children: [
       /* @__PURE__ */ jsx20(DialogPrimitive.Overlay, { className: dialogOverlay }),
-      /* @__PURE__ */ jsxs11(
+      /* @__PURE__ */ jsxs12(
         DialogPrimitive.Content,
         {
           ref,
@@ -2343,7 +2429,7 @@ var Dialog = Object.assign(DialogRoot, {
 
 // src/components/Dialog/AlertDialog.tsx
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
 var AlertDialog = ({
   layout = "medium",
   title,
@@ -2363,9 +2449,9 @@ var AlertDialog = ({
   const isMedium = layout === "medium";
   const isStacked = layout === "stacked";
   const maxWidthStyle = maxWidth ? `${maxWidth / 16}rem` : void 0;
-  return /* @__PURE__ */ jsxs12(AlertDialogPrimitive.Root, { open, onOpenChange, children: [
+  return /* @__PURE__ */ jsxs13(AlertDialogPrimitive.Root, { open, onOpenChange, children: [
     trigger && /* @__PURE__ */ jsx21(AlertDialogPrimitive.Trigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsxs12(AlertDialogPrimitive.Portal, { children: [
+    /* @__PURE__ */ jsxs13(AlertDialogPrimitive.Portal, { children: [
       /* @__PURE__ */ jsx21(
         AlertDialogPrimitive.Overlay,
         {
@@ -2378,7 +2464,7 @@ var AlertDialog = ({
         {
           className: cn(alertDialogContent({ layout })),
           style: maxWidthStyle ? { maxWidth: maxWidthStyle } : void 0,
-          children: /* @__PURE__ */ jsxs12(
+          children: /* @__PURE__ */ jsxs13(
             Stack2,
             {
               gap: "20",
@@ -2390,7 +2476,7 @@ var AlertDialog = ({
               padding: "xl",
               shadow: "L4",
               children: [
-                /* @__PURE__ */ jsxs12(
+                /* @__PURE__ */ jsxs13(
                   Stack2,
                   {
                     gap: "sm",
@@ -2402,7 +2488,7 @@ var AlertDialog = ({
                     ]
                   }
                 ),
-                isMedium ? /* @__PURE__ */ jsxs12(Inline2, { gap: "md", justifyContent: "end", children: [
+                isMedium ? /* @__PURE__ */ jsxs13(Inline2, { gap: "md", justifyContent: "end", children: [
                   /* @__PURE__ */ jsx21(AlertDialogPrimitive.Cancel, { asChild: true, children: /* @__PURE__ */ jsx21(
                     Button,
                     {
@@ -2429,7 +2515,7 @@ var AlertDialog = ({
                       children: continueText
                     }
                   ) })
-                ] }) : /* @__PURE__ */ jsxs12(Stack2, { gap: "md", children: [
+                ] }) : /* @__PURE__ */ jsxs13(Stack2, { gap: "md", children: [
                   preventCloseOnAction ? /* @__PURE__ */ jsx21(
                     Button,
                     {
@@ -2486,8 +2572,8 @@ var toastViewportPositions = { "top-left": "toast_toastViewportPositions_top-lef
 var toastViewportStyle = "toast_toastViewportStyle__1c9srd86";
 
 // src/components/Toast/Toast.tsx
-import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
-var CloseIcon2 = () => /* @__PURE__ */ jsxs13(
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+var CloseIcon2 = () => /* @__PURE__ */ jsxs14(
   "svg",
   {
     width: "16",
@@ -2504,7 +2590,7 @@ var CloseIcon2 = () => /* @__PURE__ */ jsxs13(
     ]
   }
 );
-var InfoIcon = () => /* @__PURE__ */ jsxs13(
+var InfoIcon = () => /* @__PURE__ */ jsxs14(
   "svg",
   {
     width: "20",
@@ -2522,7 +2608,7 @@ var InfoIcon = () => /* @__PURE__ */ jsxs13(
     ]
   }
 );
-var SuccessIcon = () => /* @__PURE__ */ jsxs13(
+var SuccessIcon = () => /* @__PURE__ */ jsxs14(
   "svg",
   {
     width: "20",
@@ -2539,7 +2625,7 @@ var SuccessIcon = () => /* @__PURE__ */ jsxs13(
     ]
   }
 );
-var WarningIcon = () => /* @__PURE__ */ jsxs13(
+var WarningIcon = () => /* @__PURE__ */ jsxs14(
   "svg",
   {
     width: "20",
@@ -2557,7 +2643,7 @@ var WarningIcon = () => /* @__PURE__ */ jsxs13(
     ]
   }
 );
-var ErrorIcon = () => /* @__PURE__ */ jsxs13(
+var ErrorIcon = () => /* @__PURE__ */ jsxs14(
   "svg",
   {
     width: "20",
@@ -2602,7 +2688,7 @@ var Toast = React14.forwardRef(
     showClose = true
   }, ref) => {
     const displayIcon = icon !== void 0 ? icon : getIconForVariant(variant);
-    return /* @__PURE__ */ jsxs13(
+    return /* @__PURE__ */ jsxs14(
       ToastPrimitive.Root,
       {
         ref,
@@ -2612,7 +2698,7 @@ var Toast = React14.forwardRef(
         className: cn(toastRoot({ variant }), className),
         children: [
           displayIcon && /* @__PURE__ */ jsx22("div", { className: toastIcon, children: displayIcon }),
-          /* @__PURE__ */ jsxs13("div", { className: toastContent, children: [
+          /* @__PURE__ */ jsxs14("div", { className: toastContent, children: [
             /* @__PURE__ */ jsx22(ToastPrimitive.Title, { className: toastTitle, children: title }),
             description && /* @__PURE__ */ jsx22(ToastPrimitive.Description, { className: toastDescription, children: description })
           ] }),
@@ -2696,8 +2782,8 @@ var popoverClose = "popover_popoverClose__qv1k3xa";
 var popoverContent = _7a46814({ defaultClassName: "popover_popoverContent__qv1k3x4", variantClassNames: { size: { sm: "popover_popoverContent_size_sm__qv1k3x5", md: "popover_popoverContent_size_md__qv1k3x6", lg: "popover_popoverContent_size_lg__qv1k3x7", auto: "popover_popoverContent_size_auto__qv1k3x8" } }, defaultVariants: { size: "md" }, compoundVariants: [] });
 
 // src/components/Popover/Popover.tsx
-import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
-var CloseIcon3 = () => /* @__PURE__ */ jsxs14(
+import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
+var CloseIcon3 = () => /* @__PURE__ */ jsxs15(
   "svg",
   {
     width: "16",
@@ -2733,7 +2819,7 @@ var PopoverContent = React15.forwardRef(
     onClose,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsx23(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsxs14(
+    return /* @__PURE__ */ jsx23(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsxs15(
       PopoverPrimitive.Content,
       {
         ref,
@@ -2775,7 +2861,7 @@ var Popover = ({
   showClose = false,
   modal = false
 }) => {
-  return /* @__PURE__ */ jsxs14(PopoverRoot, { open, defaultOpen, onOpenChange, modal, children: [
+  return /* @__PURE__ */ jsxs15(PopoverRoot, { open, defaultOpen, onOpenChange, modal, children: [
     /* @__PURE__ */ jsx23(PopoverTrigger, { children: trigger }),
     /* @__PURE__ */ jsx23(
       PopoverContent,
@@ -2818,7 +2904,7 @@ var tabItem = _7a46815({ defaultClassName: "tabs_tabItem__1c5op4v7", variantClas
 var tabsList = _7a46815({ defaultClassName: "tabs_tabsList__1c5op4v2", variantClassNames: { variant: { pills: "tabs_tabsList_variant_pills__1c5op4v3", underline: "tabs_tabsList_variant_underline__1c5op4v4" }, fullWidth: { true: "tabs_tabsList_fullWidth_true__1c5op4v5", false: "tabs_tabsList_fullWidth_false__1c5op4v6" } }, defaultVariants: { variant: "pills", fullWidth: false }, compoundVariants: [] });
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
 var TabsContext = createContext2({ variant: "pills" });
 var useTabsContext = () => useContext2(TabsContext);
 var TabsRoot = forwardRef21(({ variant = "pills", children, ...props }, ref) => {
@@ -2862,7 +2948,7 @@ var TabsTrigger = forwardRef21(({ value, icon, children, className, disabled, va
       ),
       "data-variant": resolvedVariant,
       ...props,
-      children: /* @__PURE__ */ jsxs15(Inline2, { gap: "sm", alignItems: "center", justifyContent: "center", children: [
+      children: /* @__PURE__ */ jsxs16(Inline2, { gap: "sm", alignItems: "center", justifyContent: "center", children: [
         icon && React16.cloneElement(icon, {
           size: "20",
           style: { color: "inherit" }
@@ -2921,8 +3007,8 @@ var sectionHeader = "drawer_sectionHeader__4fc39fl";
 var sectionText = "drawer_sectionText__4fc39fm";
 
 // src/components/Drawer/Drawer.tsx
-import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
-var CloseIcon4 = ({ size = "20" }) => /* @__PURE__ */ jsxs16(
+import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
+var CloseIcon4 = ({ size = "20" }) => /* @__PURE__ */ jsxs17(
   "svg",
   {
     width: size,
@@ -2974,7 +3060,7 @@ var DrawerHeader = forwardRef22(
     showCloseButton = true,
     closeLabel = "Close drawer",
     ...props
-  }, ref) => title || children ? /* @__PURE__ */ jsxs16("header", { ref, className: cn(drawerHeader, className), ...props, children: [
+  }, ref) => title || children ? /* @__PURE__ */ jsxs17("header", { ref, className: cn(drawerHeader, className), ...props, children: [
     typeof title === "string" ? /* @__PURE__ */ jsx25(Text2, { fontVariant: "text-xl-medium", color: "contentPrimary", children: title }) : title || children,
     showCloseButton && /* @__PURE__ */ jsx25(
       DialogPrimitive2.Close,
@@ -3025,8 +3111,8 @@ var DrawerFooter = forwardRef22(
 );
 DrawerFooter.displayName = "Drawer.Footer";
 var DrawerSection = forwardRef22(
-  ({ title, description, actions, children, className, ...props }, ref) => /* @__PURE__ */ jsxs16("section", { ref, className: cn(section, className), ...props, children: [
-    (title || description || actions) && /* @__PURE__ */ jsxs16(
+  ({ title, description, actions, children, className, ...props }, ref) => /* @__PURE__ */ jsxs17("section", { ref, className: cn(section, className), ...props, children: [
+    (title || description || actions) && /* @__PURE__ */ jsxs17(
       Inline2,
       {
         className: sectionHeader,
@@ -3034,7 +3120,7 @@ var DrawerSection = forwardRef22(
         alignItems: "flex-start",
         gap: "md",
         children: [
-          /* @__PURE__ */ jsxs16(Stack2, { className: sectionText, gap: "2xs", children: [
+          /* @__PURE__ */ jsxs17(Stack2, { className: sectionText, gap: "2xs", children: [
             title && /* @__PURE__ */ jsx25(Text2, { fontVariant: "text-m-medium", color: "contentPrimary", children: title }),
             description && /* @__PURE__ */ jsx25(Text2, { fontVariant: "text-s-regular", color: "contentSecondary", children: description })
           ] }),
@@ -3057,11 +3143,11 @@ var Drawer = ({
   size = "lg",
   showCloseButton = true
 }) => {
-  return /* @__PURE__ */ jsxs16(DrawerRoot, { open, onOpenChange, children: [
+  return /* @__PURE__ */ jsxs17(DrawerRoot, { open, onOpenChange, children: [
     trigger && /* @__PURE__ */ jsx25(DrawerTrigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsxs16(DrawerPortal, { children: [
+    /* @__PURE__ */ jsxs17(DrawerPortal, { children: [
       showOverlay && /* @__PURE__ */ jsx25(DrawerOverlay, {}),
-      /* @__PURE__ */ jsxs16(DrawerContent, { side, size, children: [
+      /* @__PURE__ */ jsxs17(DrawerContent, { side, size, children: [
         title && /* @__PURE__ */ jsx25(DrawerHeader, { title, showCloseButton }),
         children
       ] })
@@ -3094,7 +3180,7 @@ var rangeTextSecondary = "pagination_rangeTextSecondary__x6drlhd";
 var rangeWrapper = "pagination_rangeWrapper__x6drlhc";
 
 // src/components/Pagination/Pagination.tsx
-import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
 var ChevronLeftIcon = ({ size = "16" }) => /* @__PURE__ */ jsx26(
   "svg",
   {
@@ -3137,7 +3223,7 @@ var ChevronDownIcon3 = ({ size = "16" }) => /* @__PURE__ */ jsx26(
     children: /* @__PURE__ */ jsx26("path", { d: "M6 9l6 6 6-6" })
   }
 );
-var EllipsisIcon = ({ size = "16" }) => /* @__PURE__ */ jsxs17(
+var EllipsisIcon = ({ size = "16" }) => /* @__PURE__ */ jsxs18(
   "svg",
   {
     width: size,
@@ -3164,7 +3250,7 @@ var PaginationPrevious = ({
   children = "Previous",
   className
 }) => {
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     "button",
     {
       className: cn(paginationItem({ variant: "previous" }), className),
@@ -3185,7 +3271,7 @@ var PaginationNext = ({
   children = "Next",
   className
 }) => {
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     "button",
     {
       className: cn(paginationItem({ variant: "next" }), className),
@@ -3263,8 +3349,8 @@ var PaginationInfoRange = ({
   end,
   total
 }) => {
-  return /* @__PURE__ */ jsxs17("div", { className: rangeWrapper, children: [
-    /* @__PURE__ */ jsxs17("span", { className: rangeTextSecondary, children: [
+  return /* @__PURE__ */ jsxs18("div", { className: rangeWrapper, children: [
+    /* @__PURE__ */ jsxs18("span", { className: rangeTextSecondary, children: [
       start,
       "-",
       end
@@ -3285,12 +3371,12 @@ var PaginationInfoComplete = ({
 }) => {
   const start = Math.min((currentPage - 1) * pageSize + 1, totalItems);
   const end = Math.min(currentPage * pageSize, totalItems);
-  return /* @__PURE__ */ jsxs17(PaginationInfoRoot, { className, children: [
+  return /* @__PURE__ */ jsxs18(PaginationInfoRoot, { className, children: [
     /* @__PURE__ */ jsx26(PaginationInfoLabel, { children: label }),
     /* @__PURE__ */ jsx26(
       Menu,
       {
-        trigger: /* @__PURE__ */ jsxs17("button", { className: pickerButton({ disabled: false }), children: [
+        trigger: /* @__PURE__ */ jsxs18("button", { className: pickerButton({ disabled: false }), children: [
           pageSize,
           /* @__PURE__ */ jsx26(
             Inline2,
@@ -3499,7 +3585,7 @@ var imageStyles = _7a46819({ defaultClassName: "image_imageStyles__1hj4ov11", va
 var placeholderStyles = "image_placeholderStyles__1hj4ov19";
 
 // src/components/Image/Image.tsx
-import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
 var Image3 = forwardRef24(function Image4({
   src,
   alt,
@@ -3534,7 +3620,7 @@ var Image3 = forwardRef24(function Image4({
   const showPlaceholder = imageState === "loading" && placeholder;
   const showFallback = imageState === "error" && fallback;
   const showImage = imageState !== "error";
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     Box2,
     {
       ref,
@@ -3604,7 +3690,7 @@ var Image3 = forwardRef24(function Image4({
 Image3.displayName = "Image";
 
 // src/components/FileUpload/FileUpload.tsx
-import { useCallback as useCallback4, useId, useMemo as useMemo3, useRef as useRef2, useState as useState4 } from "react";
+import { useCallback as useCallback4, useId as useId2, useMemo as useMemo3, useRef as useRef2, useState as useState4 } from "react";
 
 // src/components/FileUpload/fileUpload.css.ts
 import { createRuntimeFn as _7a46820 } from "@vanilla-extract/recipes/createRuntimeFn";
@@ -3622,7 +3708,7 @@ var previewImage = "fileUpload_previewImage__1nxjf87h";
 var uploaderContainer = "fileUpload_uploaderContainer__1nxjf870";
 
 // src/components/FileUpload/FileUpload.tsx
-import { jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
 var UploadCloudIcon = ({ size = "24", color = "currentColor" }) => /* @__PURE__ */ jsx30(
   "svg",
   {
@@ -3701,7 +3787,7 @@ function FileUpload({
   onRemoveFile,
   className
 }) {
-  const inputId = useId();
+  const inputId = useId2();
   const inputRef = useRef2(null);
   const dragCounterRef = useRef2(0);
   const [isDragging, setIsDragging] = useState4(false);
@@ -3786,8 +3872,8 @@ function FileUpload({
     state: isDragging ? "dragging" : "default",
     disabled
   });
-  return /* @__PURE__ */ jsxs19(Stack2, { className: cn(uploaderContainer, className), gap: "sm", children: [
-    (title || description) && /* @__PURE__ */ jsxs19(Stack2, { gap: "2xs", children: [
+  return /* @__PURE__ */ jsxs20(Stack2, { className: cn(uploaderContainer, className), gap: "sm", children: [
+    (title || description) && /* @__PURE__ */ jsxs20(Stack2, { gap: "2xs", children: [
       title ? /* @__PURE__ */ jsx30(Heading2, { fontVariant: "heading-xs-medium", color: "contentPrimary", children: title }) : null,
       description ? /* @__PURE__ */ jsx30(Text2, { fontVariant: "text-s-regular", color: "contentQuaternary", children: description }) : null
     ] }),
@@ -3805,9 +3891,9 @@ function FileUpload({
         onDragLeave: handleDragLeave,
         onDragOver: handleDragOver,
         onDrop: handleDrop,
-        children: variant === "compact" ? /* @__PURE__ */ jsxs19(Inline2, { alignItems: "center", gap: "xs", wrap: true, children: [
+        children: variant === "compact" ? /* @__PURE__ */ jsxs20(Inline2, { alignItems: "center", gap: "xs", wrap: true, children: [
           /* @__PURE__ */ jsx30(UploadCloudIcon, { size: "24", color: "var(--zen-color-content-secondary)" }),
-          /* @__PURE__ */ jsxs19(Inline2, { alignItems: "center", gap: "xs", wrap: true, children: [
+          /* @__PURE__ */ jsxs20(Inline2, { alignItems: "center", gap: "xs", wrap: true, children: [
             /* @__PURE__ */ jsx30(Text2, { fontVariant: "text-s-medium", color: "contentSecondary", children: compactDragLabel }),
             /* @__PURE__ */ jsx30(
               "button",
@@ -3823,13 +3909,13 @@ function FileUpload({
               }
             )
           ] })
-        ] }) : /* @__PURE__ */ jsxs19(Stack2, { gap: "sm", alignItems: "center", children: [
+        ] }) : /* @__PURE__ */ jsxs20(Stack2, { gap: "sm", alignItems: "center", children: [
           /* @__PURE__ */ jsx30(UploadCloudIcon, { size: "24", color: "var(--zen-color-content-secondary)" }),
-          /* @__PURE__ */ jsxs19(Stack2, { gap: "2xs", alignItems: "center", children: [
+          /* @__PURE__ */ jsxs20(Stack2, { gap: "2xs", alignItems: "center", children: [
             /* @__PURE__ */ jsx30(Text2, { fontVariant: "text-s-medium", color: "contentSecondary", children: dragLabel }),
             supportedText ? /* @__PURE__ */ jsx30(Text2, { fontVariant: "text-xs-regular", color: "contentQuaternary", children: supportedText }) : null
           ] }),
-          /* @__PURE__ */ jsxs19(Stack2, { gap: "2xs", alignItems: "center", children: [
+          /* @__PURE__ */ jsxs20(Stack2, { gap: "2xs", alignItems: "center", children: [
             /* @__PURE__ */ jsx30(
               Button,
               {
@@ -3848,7 +3934,7 @@ function FileUpload({
         ] })
       }
     ),
-    variant === "compact" && (supportedText || maxSizeLabel) ? /* @__PURE__ */ jsxs19(
+    variant === "compact" && (supportedText || maxSizeLabel) ? /* @__PURE__ */ jsxs20(
       Inline2,
       {
         alignItems: "center",
@@ -3865,8 +3951,8 @@ function FileUpload({
     helperText ? /* @__PURE__ */ jsx30(Text2, { fontVariant: "text-s-regular", className: helperTextStyle, children: helperText }) : null,
     resolvedFiles.length ? /* @__PURE__ */ jsx30("div", { className: fileList, children: resolvedFiles.map((file) => {
       const previewLabel = getPreviewLabel(file);
-      return /* @__PURE__ */ jsxs19("div", { className: fileItem, children: [
-        /* @__PURE__ */ jsxs19("div", { className: fileMeta, children: [
+      return /* @__PURE__ */ jsxs20("div", { className: fileItem, children: [
+        /* @__PURE__ */ jsxs20("div", { className: fileMeta, children: [
           /* @__PURE__ */ jsx30("div", { className: previewBox, children: file.previewUrl ? /* @__PURE__ */ jsx30(
             "img",
             {
@@ -3875,7 +3961,7 @@ function FileUpload({
               className: previewImage
             }
           ) : /* @__PURE__ */ jsx30("span", { className: previewFallback, children: previewLabel }) }),
-          /* @__PURE__ */ jsxs19(Stack2, { gap: "2xs", flex: "1", minWidth: "none", children: [
+          /* @__PURE__ */ jsxs20(Stack2, { gap: "2xs", flex: "1", minWidth: "none", children: [
             /* @__PURE__ */ jsx30("span", { className: fileName, children: file.name }),
             file.sizeLabel ? /* @__PURE__ */ jsx30("span", { className: fileSize, children: file.sizeLabel }) : null
           ] })
@@ -3909,7 +3995,7 @@ function FileUpload({
 
 // src/components/Icon/Icon.tsx
 import { forwardRef as forwardRef25 } from "react";
-import { jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
 var Icon2 = forwardRef25(function Icon3({
   title,
   viewBox = "0 0 24 24",
@@ -3918,7 +4004,7 @@ var Icon2 = forwardRef25(function Icon3({
   className,
   ...restProps
 }, ref) {
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(
     "svg",
     {
       ref,
@@ -4016,7 +4102,7 @@ function MinusIcon2(props) {
   return /* @__PURE__ */ jsx31(Icon2, { viewBox: "0 0 12 12", ...props, children: /* @__PURE__ */ jsx31("path", { d: "M2.5 6H9.5", stroke: "currentColor", strokeLinecap: "round" }) });
 }
 function SearchIcon(props) {
-  return /* @__PURE__ */ jsxs20(Icon2, { viewBox: "0 0 12 12", ...props, children: [
+  return /* @__PURE__ */ jsxs21(Icon2, { viewBox: "0 0 12 12", ...props, children: [
     /* @__PURE__ */ jsx31(
       "path",
       {
@@ -4045,7 +4131,7 @@ function CalendarIcon(props) {
   ) });
 }
 function ClockIcon(props) {
-  return /* @__PURE__ */ jsxs20(Icon2, { viewBox: "0 0 20 20", ...props, children: [
+  return /* @__PURE__ */ jsxs21(Icon2, { viewBox: "0 0 20 20", ...props, children: [
     /* @__PURE__ */ jsx31(
       "path",
       {
@@ -4076,7 +4162,7 @@ function UploadCloudIcon2(props) {
   ) });
 }
 function MoreVerticalIcon(props) {
-  return /* @__PURE__ */ jsxs20(Icon2, { viewBox: "0 0 12 12", ...props, children: [
+  return /* @__PURE__ */ jsxs21(Icon2, { viewBox: "0 0 12 12", ...props, children: [
     /* @__PURE__ */ jsx31(
       "path",
       {
@@ -4107,7 +4193,7 @@ function MoreVerticalIcon(props) {
   ] });
 }
 function MoreHorizontalIcon(props) {
-  return /* @__PURE__ */ jsxs20(Icon2, { viewBox: "0 0 12 12", ...props, children: [
+  return /* @__PURE__ */ jsxs21(Icon2, { viewBox: "0 0 12 12", ...props, children: [
     /* @__PURE__ */ jsx31(
       "path",
       {
@@ -4160,7 +4246,7 @@ function ArrowRightIcon(props) {
   ) });
 }
 function InfoIcon2(props) {
-  return /* @__PURE__ */ jsxs20(Icon2, { viewBox: "0 0 20 20", ...props, children: [
+  return /* @__PURE__ */ jsxs21(Icon2, { viewBox: "0 0 20 20", ...props, children: [
     /* @__PURE__ */ jsx31(
       "path",
       {
@@ -4181,7 +4267,7 @@ function InfoIcon2(props) {
   ] });
 }
 function AlertCircleIcon(props) {
-  return /* @__PURE__ */ jsxs20(Icon2, { viewBox: "0 0 20 20", ...props, children: [
+  return /* @__PURE__ */ jsxs21(Icon2, { viewBox: "0 0 20 20", ...props, children: [
     /* @__PURE__ */ jsx31(
       "path",
       {
@@ -4202,7 +4288,7 @@ function AlertCircleIcon(props) {
   ] });
 }
 function CheckCircleIcon(props) {
-  return /* @__PURE__ */ jsxs20(Icon2, { viewBox: "0 0 20 20", ...props, children: [
+  return /* @__PURE__ */ jsxs21(Icon2, { viewBox: "0 0 20 20", ...props, children: [
     /* @__PURE__ */ jsx31(
       "path",
       {
@@ -4246,7 +4332,7 @@ function EditIcon(props) {
   ) });
 }
 function CopyIcon(props) {
-  return /* @__PURE__ */ jsxs20(Icon2, { viewBox: "0 0 12 12", ...props, children: [
+  return /* @__PURE__ */ jsxs21(Icon2, { viewBox: "0 0 12 12", ...props, children: [
     /* @__PURE__ */ jsx31(
       "path",
       {
@@ -4481,7 +4567,7 @@ var parseInputDate = (value) => {
 };
 
 // src/components/DatePicker/CalendarGrid.tsx
-import { Fragment, jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx34, jsxs as jsxs22 } from "react/jsx-runtime";
 var CALENDAR_ROWS = 5;
 var CALENDAR_CELLS = CALENDAR_ROWS * 7;
 var useCalendarDays = ({
@@ -4592,7 +4678,7 @@ var CalendarGrid = ({
     if (day.isDisabled || day.isUnavailable) return;
     onDateSelect?.(day.date);
   };
-  return /* @__PURE__ */ jsxs21(Fragment, { children: [
+  return /* @__PURE__ */ jsxs22(Fragment, { children: [
     /* @__PURE__ */ jsx34(Box2, { className: calendarWeekdaysRow, children: WEEKDAYS.map((day) => /* @__PURE__ */ jsx34(
       Text2,
       {
@@ -4663,7 +4749,7 @@ var CalendarGrid = ({
 CalendarGrid.displayName = "CalendarGrid";
 
 // src/components/DatePicker/Calendar.tsx
-import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs23 } from "react/jsx-runtime";
 var Calendar = ({
   month,
   year,
@@ -4682,8 +4768,8 @@ var Calendar = ({
   showOutsideDays = true,
   className
 }) => {
-  return /* @__PURE__ */ jsxs22(Box2, { className: cn(calendarContainer, className), children: [
-    /* @__PURE__ */ jsxs22(Box2, { className: calendarHeader, children: [
+  return /* @__PURE__ */ jsxs23(Box2, { className: cn(calendarContainer, className), children: [
+    /* @__PURE__ */ jsxs23(Box2, { className: calendarHeader, children: [
       /* @__PURE__ */ jsx35(
         CalendarArrowButton,
         {
@@ -4692,7 +4778,7 @@ var Calendar = ({
           disabled: previousMonthDisabled
         }
       ),
-      /* @__PURE__ */ jsxs22(
+      /* @__PURE__ */ jsxs23(
         Text2,
         {
           as: "span",
@@ -4765,7 +4851,7 @@ var timePickerHeader = "timePicker_timePickerHeader__1trbi7d1";
 var timeScrollContainer = "timePicker_timeScrollContainer__1trbi7d5";
 
 // src/components/TimePicker/TimePicker.tsx
-import { Fragment as Fragment2, jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx36, jsxs as jsxs24 } from "react/jsx-runtime";
 var DEFAULT_PRESETS = [
   { label: "Now", time: { hours: -1, minutes: -1 } },
   // Special marker for "now"
@@ -4993,7 +5079,7 @@ var TimePicker = forwardRef26(
     const renderTriggerElement = () => {
       if (renderTrigger) return renderTrigger(displayValue || placeholder);
       if (trigger) return trigger;
-      return /* @__PURE__ */ jsxs23(
+      return /* @__PURE__ */ jsxs24(
         Box2,
         {
           ref,
@@ -5013,15 +5099,15 @@ var TimePicker = forwardRef26(
       );
     };
     const selectedDisplayHours = selectedTime ? getDisplayHours(selectedTime.hours) : null;
-    return /* @__PURE__ */ jsxs23(MenuRoot, { open, onOpenChange: setOpen, children: [
+    return /* @__PURE__ */ jsxs24(MenuRoot, { open, onOpenChange: setOpen, children: [
       /* @__PURE__ */ jsx36(MenuTrigger, { disabled, children: renderTriggerElement() }),
-      /* @__PURE__ */ jsx36(MenuContent, { padding: "none", sideOffset: 8, align: "start", children: /* @__PURE__ */ jsxs23(Box2, { className: timePickerContainer, children: [
-        /* @__PURE__ */ jsxs23(Box2, { className: timePickerHeader, children: [
+      /* @__PURE__ */ jsx36(MenuContent, { padding: "none", sideOffset: 8, align: "start", children: /* @__PURE__ */ jsxs24(Box2, { className: timePickerContainer, children: [
+        /* @__PURE__ */ jsxs24(Box2, { className: timePickerHeader, children: [
           /* @__PURE__ */ jsx36(Text2, { fontVariant: "text-m-medium", color: "contentPrimary", children: "Select Time" }),
           selectedTime && /* @__PURE__ */ jsx36(Text2, { fontVariant: "text-s-regular", color: "contentBrand", children: displayValue })
         ] }),
-        /* @__PURE__ */ jsxs23(Inline2, { gap: "xs", alignItems: "center", children: [
-          /* @__PURE__ */ jsxs23(Box2, { className: timeColumn, children: [
+        /* @__PURE__ */ jsxs24(Inline2, { gap: "xs", alignItems: "center", children: [
+          /* @__PURE__ */ jsxs24(Box2, { className: timeColumn, children: [
             /* @__PURE__ */ jsx36("span", { className: columnLabel, children: "Hour" }),
             /* @__PURE__ */ jsx36(Box2, { ref: hoursRef, className: timeScrollContainer, children: hoursArray.map((hour) => {
               const isSelected = selectedDisplayHours === hour;
@@ -5050,7 +5136,7 @@ var TimePicker = forwardRef26(
             }) })
           ] }),
           /* @__PURE__ */ jsx36("span", { className: columnSeparator, children: ":" }),
-          /* @__PURE__ */ jsxs23(Box2, { className: timeColumn, children: [
+          /* @__PURE__ */ jsxs24(Box2, { className: timeColumn, children: [
             /* @__PURE__ */ jsx36("span", { className: columnLabel, children: "Min" }),
             /* @__PURE__ */ jsx36(Box2, { ref: minutesRef, className: timeScrollContainer, children: minutesArray.map((minute) => {
               const isSelected = selectedTime?.minutes === minute;
@@ -5080,9 +5166,9 @@ var TimePicker = forwardRef26(
               );
             }) })
           ] }),
-          showSeconds && /* @__PURE__ */ jsxs23(Fragment2, { children: [
+          showSeconds && /* @__PURE__ */ jsxs24(Fragment2, { children: [
             /* @__PURE__ */ jsx36("span", { className: columnSeparator, children: ":" }),
-            /* @__PURE__ */ jsxs23(Box2, { className: timeColumn, children: [
+            /* @__PURE__ */ jsxs24(Box2, { className: timeColumn, children: [
               /* @__PURE__ */ jsx36("span", { className: columnLabel, children: "Sec" }),
               /* @__PURE__ */ jsx36(
                 Box2,
@@ -5110,9 +5196,9 @@ var TimePicker = forwardRef26(
               )
             ] })
           ] }),
-          format === "12h" && /* @__PURE__ */ jsxs23(Box2, { className: periodColumn, children: [
+          format === "12h" && /* @__PURE__ */ jsxs24(Box2, { className: periodColumn, children: [
             /* @__PURE__ */ jsx36("span", { className: periodLabel, children: "Period" }),
-            /* @__PURE__ */ jsxs23(Stack2, { gap: "xs", children: [
+            /* @__PURE__ */ jsxs24(Stack2, { gap: "xs", children: [
               /* @__PURE__ */ jsx36(
                 "button",
                 {
@@ -5150,7 +5236,7 @@ var TimePicker = forwardRef26(
           },
           index
         )) }),
-        /* @__PURE__ */ jsxs23(Box2, { className: timePickerFooter, children: [
+        /* @__PURE__ */ jsxs24(Box2, { className: timePickerFooter, children: [
           /* @__PURE__ */ jsx36(
             Button,
             {
@@ -5185,7 +5271,7 @@ var segmentText = "dateTimeInput_segmentText__183d6eha";
 var singleInputSegment = "dateTimeInput_singleInputSegment__183d6ehe";
 
 // src/components/DateTimeInput/DateTimeInput.tsx
-import { Fragment as Fragment3, jsx as jsx37, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx37, jsxs as jsxs25 } from "react/jsx-runtime";
 var padZero2 = (num) => num.toString().padStart(2, "0");
 var formatTimeDisplay = (time, format, showSeconds) => {
   if (!time) return "";
@@ -5315,7 +5401,7 @@ var DateTimeInput = forwardRef27(
       return formatTimeDisplay(selectedTime, timeFormat, showSeconds);
     }, [selectedTime, timeFormat, showSeconds]);
     const hasValue = mode === "date" && selectedDate || mode === "time" && selectedTime || mode === "datetime" && (selectedDate || selectedTime);
-    const labelElement = label && /* @__PURE__ */ jsxs24(Inline2, { gap: "2xs", style: horizontal ? { padding: "9px 0px" } : void 0, children: [
+    const labelElement = label && /* @__PURE__ */ jsxs25(Inline2, { gap: "2xs", style: horizontal ? { padding: "9px 0px" } : void 0, children: [
       /* @__PURE__ */ jsx37(
         Text2,
         {
@@ -5328,8 +5414,8 @@ var DateTimeInput = forwardRef27(
       ),
       mandatory && /* @__PURE__ */ jsx37(Text2, { fontVariant: "text-m-regular", color: "contentTertiary", as: "span", children: "*" })
     ] });
-    const renderDateSegment = (withSeparator = false) => /* @__PURE__ */ jsxs24(MenuRoot, { open: dateOpen, onOpenChange: setDateOpen, children: [
-      /* @__PURE__ */ jsx37(MenuTrigger, { disabled, children: /* @__PURE__ */ jsxs24(
+    const renderDateSegment = (withSeparator = false) => /* @__PURE__ */ jsxs25(MenuRoot, { open: dateOpen, onOpenChange: setDateOpen, children: [
+      /* @__PURE__ */ jsx37(MenuTrigger, { disabled, children: /* @__PURE__ */ jsxs25(
         Box2,
         {
           className: withSeparator ? dateTimeSegmentWithSeparator : singleInputSegment,
@@ -5343,7 +5429,7 @@ var DateTimeInput = forwardRef27(
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx37(MenuContent, { padding: "none", sideOffset: 8, align: "start", children: /* @__PURE__ */ jsxs24(Stack2, { padding: "md", gap: "md", children: [
+      /* @__PURE__ */ jsx37(MenuContent, { padding: "none", sideOffset: 8, align: "start", children: /* @__PURE__ */ jsxs25(Stack2, { padding: "md", gap: "md", children: [
         /* @__PURE__ */ jsx37(Text2, { fontVariant: "text-m-medium", color: "contentPrimary", children: "Select Date" }),
         /* @__PURE__ */ jsx37(
           Calendar,
@@ -5361,8 +5447,8 @@ var DateTimeInput = forwardRef27(
         )
       ] }) })
     ] });
-    const renderTimeSegment = () => /* @__PURE__ */ jsxs24(MenuRoot, { open: timeOpen, onOpenChange: setTimeOpen, children: [
-      /* @__PURE__ */ jsx37(MenuTrigger, { disabled, children: /* @__PURE__ */ jsxs24(
+    const renderTimeSegment = () => /* @__PURE__ */ jsxs25(MenuRoot, { open: timeOpen, onOpenChange: setTimeOpen, children: [
+      /* @__PURE__ */ jsx37(MenuTrigger, { disabled, children: /* @__PURE__ */ jsxs25(
         Box2,
         {
           className: singleInputSegment,
@@ -5390,8 +5476,8 @@ var DateTimeInput = forwardRef27(
         }
       ) })
     ] });
-    const inputElement2 = /* @__PURE__ */ jsxs24(Box2, { className: inputWrapper2, children: [
-      /* @__PURE__ */ jsxs24(
+    const inputElement2 = /* @__PURE__ */ jsxs25(Box2, { className: inputWrapper2, children: [
+      /* @__PURE__ */ jsxs25(
         Box2,
         {
           ref,
@@ -5402,7 +5488,7 @@ var DateTimeInput = forwardRef27(
           children: [
             mode === "date" && renderDateSegment(false),
             mode === "time" && renderTimeSegment(),
-            mode === "datetime" && /* @__PURE__ */ jsxs24(Fragment3, { children: [
+            mode === "datetime" && /* @__PURE__ */ jsxs25(Fragment3, { children: [
               renderDateSegment(true),
               renderTimeSegment()
             ] }),
@@ -5430,7 +5516,7 @@ var DateTimeInput = forwardRef27(
         }
       )
     ] });
-    return /* @__PURE__ */ jsxs24(
+    return /* @__PURE__ */ jsxs25(
       Box2,
       {
         className: dateTimeInputContainer({
@@ -5513,10 +5599,10 @@ var TimePickerContent = ({
     }
   };
   const selectedDisplayHours = selectedTime ? getDisplayHours(selectedTime.hours) : null;
-  return /* @__PURE__ */ jsxs24(Box2, { className: timePickerContainer, children: [
+  return /* @__PURE__ */ jsxs25(Box2, { className: timePickerContainer, children: [
     /* @__PURE__ */ jsx37(Box2, { className: timePickerHeader, children: /* @__PURE__ */ jsx37(Text2, { fontVariant: "text-m-medium", color: "contentPrimary", children: "Select Time" }) }),
-    /* @__PURE__ */ jsxs24(Inline2, { gap: "xs", alignItems: "start", children: [
-      /* @__PURE__ */ jsxs24(Box2, { className: timeColumn, children: [
+    /* @__PURE__ */ jsxs25(Inline2, { gap: "xs", alignItems: "start", children: [
+      /* @__PURE__ */ jsxs25(Box2, { className: timeColumn, children: [
         /* @__PURE__ */ jsx37("span", { className: columnLabel, children: "Hour" }),
         /* @__PURE__ */ jsx37(Box2, { className: timeScrollContainer, children: hoursArray.map((hour) => /* @__PURE__ */ jsx37(
           "button",
@@ -5533,7 +5619,7 @@ var TimePickerContent = ({
         )) })
       ] }),
       /* @__PURE__ */ jsx37("span", { className: columnSeparator, children: ":" }),
-      /* @__PURE__ */ jsxs24(Box2, { className: timeColumn, children: [
+      /* @__PURE__ */ jsxs25(Box2, { className: timeColumn, children: [
         /* @__PURE__ */ jsx37("span", { className: columnLabel, children: "Min" }),
         /* @__PURE__ */ jsx37(Box2, { className: timeScrollContainer, children: minutesArray.map((minute) => /* @__PURE__ */ jsx37(
           "button",
@@ -5549,9 +5635,9 @@ var TimePickerContent = ({
           minute
         )) })
       ] }),
-      showSeconds && /* @__PURE__ */ jsxs24(Fragment3, { children: [
+      showSeconds && /* @__PURE__ */ jsxs25(Fragment3, { children: [
         /* @__PURE__ */ jsx37("span", { className: columnSeparator, children: ":" }),
-        /* @__PURE__ */ jsxs24(Box2, { className: timeColumn, children: [
+        /* @__PURE__ */ jsxs25(Box2, { className: timeColumn, children: [
           /* @__PURE__ */ jsx37("span", { className: columnLabel, children: "Sec" }),
           /* @__PURE__ */ jsx37(Box2, { className: timeScrollContainer, children: secondsArray.map((second) => /* @__PURE__ */ jsx37(
             "button",
@@ -5568,9 +5654,9 @@ var TimePickerContent = ({
           )) })
         ] })
       ] }),
-      format === "12h" && /* @__PURE__ */ jsxs24(Box2, { className: periodColumn, children: [
+      format === "12h" && /* @__PURE__ */ jsxs25(Box2, { className: periodColumn, children: [
         /* @__PURE__ */ jsx37("span", { className: periodLabel, children: "Period" }),
-        /* @__PURE__ */ jsxs24(Stack2, { gap: "xs", children: [
+        /* @__PURE__ */ jsxs25(Stack2, { gap: "xs", children: [
           /* @__PURE__ */ jsx37(
             "button",
             {
@@ -5592,7 +5678,7 @@ var TimePickerContent = ({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs24(Box2, { className: timePickerFooter, children: [
+    /* @__PURE__ */ jsxs25(Box2, { className: timePickerFooter, children: [
       /* @__PURE__ */ jsx37(Button, { variant: "ghost", destructive: true, size: "md", onClick: onClear, children: "Cancel" }),
       /* @__PURE__ */ jsx37(Button, { size: "md", onClick: () => onApply(selectedTime), disabled: !selectedTime, children: "Apply" })
     ] })