@salesmind-ai/design-system 0.2.0 → 0.3.0

package/dist/core/index.js

@@ -1,10 +1,11 @@
-import React38, { createContext, useId, forwardRef, useContext, useState, useEffect, useCallback, useRef } from 'react';
+import React39, { createContext, useId, forwardRef, useContext, useState, useEffect, useCallback, useRef } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import clsx27 from 'clsx';
+import clsx28 from 'clsx';
 import { Slot } from '@radix-ui/react-slot';
 import { Input } from '@base-ui/react/input';
 import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
 import { Switch as Switch$1 } from '@base-ui/react/switch';
+import { Select as Select$1 } from '@base-ui/react/select';
 import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
 import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
 import ReactDOM, { createPortal } from 'react-dom';
@@ -441,7 +442,7 @@ function initializeAppearance(settings) {
   const merged = { ...loaded, ...settings };
   applySettings(merged);
 }
-var AppearancePanel = React38.forwardRef(
+var AppearancePanel = React39.forwardRef(
   ({ className, labels: l }, ref) => {
     const {
       theme,
@@ -483,14 +484,14 @@ var AppearancePanel = React38.forwardRef(
       { value: "playful", label: l?.radiusPlayful ?? "Playful", description: l?.radiusPlayfulDescription ?? "Rounded corners" },
       { value: "sharp", label: l?.radiusSharp ?? "Sharp", description: l?.radiusSharpDescription ?? "Technical feel" }
     ];
-    return /* @__PURE__ */ jsxs("div", { ref, className: clsx27("ds-appearance-panel", className), children: [
+    return /* @__PURE__ */ jsxs("div", { ref, className: clsx28("ds-appearance-panel", className), children: [
       /* @__PURE__ */ jsx("h3", { className: "ds-appearance-panel__title", children: l?.title ?? "Appearance Settings" }),
       /* @__PURE__ */ jsxs("fieldset", { className: "ds-appearance-panel__section", children: [
         /* @__PURE__ */ jsx("legend", { className: "ds-appearance-panel__legend", children: l?.themeHeading ?? "Theme" }),
         /* @__PURE__ */ jsx("div", { className: "ds-appearance-panel__options", children: themeOptions.map((option) => /* @__PURE__ */ jsxs(
           "label",
           {
-            className: clsx27(
+            className: clsx28(
               "ds-appearance-panel__option",
               theme === option.value && "ds-appearance-panel__option--active"
             ),
@@ -517,7 +518,7 @@ var AppearancePanel = React38.forwardRef(
         /* @__PURE__ */ jsx("div", { className: "ds-appearance-panel__options", children: brandOptions.map((option) => /* @__PURE__ */ jsxs(
           "label",
           {
-            className: clsx27(
+            className: clsx28(
               "ds-appearance-panel__option",
               brand === option.value && "ds-appearance-panel__option--active"
             ),
@@ -563,7 +564,7 @@ var AppearancePanel = React38.forwardRef(
         /* @__PURE__ */ jsx("div", { className: "ds-appearance-panel__options ds-appearance-panel__options--row", children: densityOptions.map((option) => /* @__PURE__ */ jsxs(
           "label",
           {
-            className: clsx27(
+            className: clsx28(
               "ds-appearance-panel__option",
               "ds-appearance-panel__option--toggle",
               density === option.value && "ds-appearance-panel__option--active"
@@ -594,7 +595,7 @@ var AppearancePanel = React38.forwardRef(
         /* @__PURE__ */ jsx("div", { className: "ds-appearance-panel__options ds-appearance-panel__options--row", children: radiusOptions.map((option) => /* @__PURE__ */ jsxs(
           "label",
           {
-            className: clsx27(
+            className: clsx28(
               "ds-appearance-panel__option",
               "ds-appearance-panel__option--toggle",
               radius === option.value && "ds-appearance-panel__option--active"
@@ -625,7 +626,7 @@ var AppearancePanel = React38.forwardRef(
         /* @__PURE__ */ jsx("div", { className: "ds-appearance-panel__options", children: navOptions.map((option) => /* @__PURE__ */ jsxs(
           "label",
           {
-            className: clsx27(
+            className: clsx28(
               "ds-appearance-panel__option",
               navPlacement === option.value && "ds-appearance-panel__option--active"
             ),
@@ -652,9 +653,9 @@ var AppearancePanel = React38.forwardRef(
   }
 );
 AppearancePanel.displayName = "AppearancePanel";
-var Button = React38.forwardRef(
+var Button = React39.forwardRef(
   ({ className, variant = "primary", size = "md", asChild = false, isLoading = false, children, disabled, ...props }, ref) => {
-    const buttonClass = clsx27(
+    const buttonClass = clsx28(
       "ds-button",
       `ds-button--${variant}`,
       size === "icon" ? "ds-button--icon ds-button--md" : `ds-button--${size}`,
@@ -697,21 +698,21 @@ var Button = React38.forwardRef(
               children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
             }
           ),
-          /* @__PURE__ */ jsx("span", { className: clsx27("ds-button__content", isLoading && "ds-button__content--hidden"), children })
+          /* @__PURE__ */ jsx("span", { className: clsx28("ds-button__content", isLoading && "ds-button__content--hidden"), children })
         ]
       }
     );
   }
 );
 Button.displayName = "Button";
-var ButtonGroup = React38.forwardRef(
+var ButtonGroup = React39.forwardRef(
   ({ orientation = "horizontal", fullWidth = false, size = "md", className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         role: "group",
-        className: clsx27(
+        className: clsx28(
           "ds-button-group",
           `ds-button-group--${orientation}`,
           fullWidth && "ds-button-group--full-width",
@@ -725,11 +726,11 @@ var ButtonGroup = React38.forwardRef(
   }
 );
 ButtonGroup.displayName = "ButtonGroup";
-var TextField = React38.forwardRef(
+var TextField = React39.forwardRef(
   ({ className, label, error, helperText, endAdornment, id, ...props }, ref) => {
-    const generatedId = React38.useId();
+    const generatedId = React39.useId();
     const inputId = id || generatedId;
-    return /* @__PURE__ */ jsxs("div", { className: clsx27("ds-textfield", className), children: [
+    return /* @__PURE__ */ jsxs("div", { className: clsx28("ds-textfield", className), children: [
       label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "ds-textfield__label", children: label }),
       /* @__PURE__ */ jsxs("div", { className: "ds-textfield__input-wrapper", children: [
         /* @__PURE__ */ jsx(
@@ -737,7 +738,7 @@ var TextField = React38.forwardRef(
           {
             id: inputId,
             ref,
-            className: clsx27(
+            className: clsx28(
               "ds-textfield__input",
               error && "ds-textfield__input--error",
               endAdornment && "ds-textfield__input--adorned"
@@ -747,7 +748,7 @@ var TextField = React38.forwardRef(
         ),
         endAdornment && /* @__PURE__ */ jsx("div", { className: "ds-textfield__adornment", children: endAdornment })
       ] }),
-      helperText && /* @__PURE__ */ jsx("span", { className: clsx27("ds-textfield__helper", error && "ds-textfield__helper--error"), children: helperText })
+      helperText && /* @__PURE__ */ jsx("span", { className: clsx28("ds-textfield__helper", error && "ds-textfield__helper--error"), children: helperText })
     ] });
   }
 );
@@ -756,27 +757,27 @@ var TextArea = forwardRef(
   ({ className, label, error, helperText, id, ...props }, ref) => {
     const generatedId = useId();
     const inputId = id || generatedId;
-    return /* @__PURE__ */ jsxs("div", { className: clsx27("ds-textarea", className), children: [
+    return /* @__PURE__ */ jsxs("div", { className: clsx28("ds-textarea", className), children: [
       label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "ds-textarea__label", children: label }),
       /* @__PURE__ */ jsx("div", { className: "ds-textarea__input-wrapper", children: /* @__PURE__ */ jsx(
         "textarea",
         {
           id: inputId,
           ref,
-          className: clsx27("ds-textarea__input", error && "ds-textarea__input--error"),
+          className: clsx28("ds-textarea__input", error && "ds-textarea__input--error"),
           ...props
         }
       ) }),
-      helperText && /* @__PURE__ */ jsx("span", { className: clsx27("ds-textarea__helper", error && "ds-textarea__helper--error"), children: helperText })
+      helperText && /* @__PURE__ */ jsx("span", { className: clsx28("ds-textarea__helper", error && "ds-textarea__helper--error"), children: helperText })
     ] });
   }
 );
 TextArea.displayName = "TextArea";
-var Checkbox = React38.forwardRef(
+var Checkbox = React39.forwardRef(
   ({ className, label, id, ...props }, ref) => {
-    const generatedId = React38.useId();
+    const generatedId = React39.useId();
     const checkboxId = id || generatedId;
-    return /* @__PURE__ */ jsxs("div", { className: clsx27("ds-checkbox-wrapper", className), children: [
+    return /* @__PURE__ */ jsxs("div", { className: clsx28("ds-checkbox-wrapper", className), children: [
       /* @__PURE__ */ jsx(Checkbox$1.Root, { id: checkboxId, ref, className: "ds-checkbox", ...props, children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, { className: "ds-checkbox__indicator", children: /* @__PURE__ */ jsx(
         "svg",
         {
@@ -819,7 +820,7 @@ var RadioGroup = forwardRef(
       {
         ref,
         role: "radiogroup",
-        className: clsx27(
+        className: clsx28(
           "ds-radio-group",
           orientation === "horizontal" && "ds-radio-group--horizontal",
           className
@@ -845,7 +846,7 @@ var Radio = forwardRef(
     return /* @__PURE__ */ jsxs(
       "label",
       {
-        className: clsx27("ds-radio-wrapper", disabled && "ds-radio-wrapper--disabled", className),
+        className: clsx28("ds-radio-wrapper", disabled && "ds-radio-wrapper--disabled", className),
         children: [
           /* @__PURE__ */ jsx(
             "input",
@@ -862,7 +863,7 @@ var Radio = forwardRef(
               ...props
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: clsx27("ds-radio", isChecked && "ds-radio--checked"), children: /* @__PURE__ */ jsx("div", { className: "ds-radio__indicator" }) }),
+          /* @__PURE__ */ jsx("div", { className: clsx28("ds-radio", isChecked && "ds-radio--checked"), children: /* @__PURE__ */ jsx("div", { className: "ds-radio__indicator" }) }),
           label && /* @__PURE__ */ jsx("span", { className: "ds-radio__label", children: label })
         ]
       }
@@ -870,50 +871,174 @@ var Radio = forwardRef(
   }
 );
 Radio.displayName = "Radio";
-var Switch = React38.forwardRef(
+var Switch = React39.forwardRef(
   ({ className, label, id, ...props }, ref) => {
-    const generatedId = React38.useId();
+    const generatedId = React39.useId();
     const switchId = id || generatedId;
-    return /* @__PURE__ */ jsxs("div", { className: clsx27("ds-switch-wrapper", className), children: [
+    return /* @__PURE__ */ jsxs("div", { className: clsx28("ds-switch-wrapper", className), children: [
       /* @__PURE__ */ jsx(Switch$1.Root, { id: switchId, ref, className: "ds-switch", ...props, children: /* @__PURE__ */ jsx(Switch$1.Thumb, { className: "ds-switch__thumb" }) }),
       label && /* @__PURE__ */ jsx("label", { htmlFor: switchId, className: "ds-switch__label", children: label })
     ] });
   }
 );
 Switch.displayName = "Switch";
+function Select({
+  value,
+  defaultValue,
+  onValueChange,
+  disabled,
+  required,
+  name,
+  items,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    Select$1.Root,
+    {
+      value,
+      defaultValue,
+      onValueChange: onValueChange ? (val) => onValueChange(val) : void 0,
+      disabled,
+      required,
+      name,
+      items,
+      children
+    }
+  );
+}
+Select.displayName = "Select";
+var SelectTrigger = React39.forwardRef(
+  ({ className, placeholder = "Select...", size = "md", ...props }, ref) => {
+    return /* @__PURE__ */ jsx("div", { className: "ds-select__trigger-wrapper", children: /* @__PURE__ */ jsxs(
+      Select$1.Trigger,
+      {
+        ref,
+        className: clsx28("ds-select__trigger", `ds-select__trigger--${size}`, className),
+        "aria-label": props["aria-label"] || (typeof placeholder === "string" ? placeholder : "Select"),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(Select$1.Value, { className: "ds-select__value", placeholder }),
+          /* @__PURE__ */ jsx(Select$1.Icon, { className: "ds-select__icon", "aria-hidden": true, children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) })
+        ]
+      }
+    ) });
+  }
+);
+SelectTrigger.displayName = "SelectTrigger";
+var SelectContent = React39.forwardRef(
+  ({ className, side = "bottom", sideOffset = 4, align = "start", children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(
+      Select$1.Positioner,
+      {
+        side,
+        sideOffset,
+        align,
+        alignItemWithTrigger: false,
+        children: /* @__PURE__ */ jsx(Select$1.Popup, { ref, className: clsx28("ds-select__content", className), ...props, children: /* @__PURE__ */ jsx(Select$1.List, { className: "ds-select__list", children }) })
+      }
+    ) });
+  }
+);
+SelectContent.displayName = "SelectContent";
+var SelectItem = React39.forwardRef(
+  ({ className, value, children, disabled, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      Select$1.Item,
+      {
+        ref,
+        value,
+        disabled,
+        className: clsx28("ds-select__item", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(Select$1.ItemIndicator, { className: "ds-select__item-indicator", children: /* @__PURE__ */ jsx(CheckIcon, {}) }),
+          /* @__PURE__ */ jsx(Select$1.ItemText, { children })
+        ]
+      }
+    );
+  }
+);
+SelectItem.displayName = "SelectItem";
+var SelectGroup = React39.forwardRef(
+  ({ className, label, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(Select$1.Group, { ref, className: clsx28("ds-select__group", className), ...props, children: [
+      label && /* @__PURE__ */ jsx(Select$1.GroupLabel, { className: "ds-select__group-label", children: label }),
+      children
+    ] });
+  }
+);
+SelectGroup.displayName = "SelectGroup";
+var SelectSeparator = React39.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-select__separator", className), ...props });
+});
+SelectSeparator.displayName = "SelectSeparator";
+function ChevronDownIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+    }
+  );
+}
+function CheckIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+    }
+  );
+}
 var Dialog = Dialog$1.Root;
 var DialogTrigger = Dialog$1.Trigger;
 var DialogClose = Dialog$1.Close;
-var DialogTitle = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Dialog$1.Title, { ref, className: clsx27("ds-dialog__title", className), ...props }));
+var DialogTitle = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Dialog$1.Title, { ref, className: clsx28("ds-dialog__title", className), ...props }));
 DialogTitle.displayName = "DialogTitle";
-var DialogDescription = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogDescription = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Dialog$1.Description,
   {
     ref,
-    className: clsx27("ds-dialog__description", className),
+    className: clsx28("ds-dialog__description", className),
     ...props
   }
 ));
 DialogDescription.displayName = "DialogDescription";
-var DialogContent = React38.forwardRef(
+var DialogContent = React39.forwardRef(
   ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(Dialog$1.Portal, { children: [
     /* @__PURE__ */ jsx(Dialog$1.Backdrop, { className: "ds-dialog__backdrop" }),
-    /* @__PURE__ */ jsx(Dialog$1.Popup, { ref, className: clsx27("ds-dialog__content", className), ...props, children })
+    /* @__PURE__ */ jsx(Dialog$1.Popup, { ref, className: clsx28("ds-dialog__content", className), ...props, children })
   ] })
 );
 DialogContent.displayName = "DialogContent";
-var DialogHeader = React38.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx27("ds-dialog__header", className), ...props })
+var DialogHeader = React39.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-dialog__header", className), ...props })
 );
 DialogHeader.displayName = "DialogHeader";
-var DialogFooter = React38.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx27("ds-dialog__footer", className), ...props })
+var DialogFooter = React39.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-dialog__footer", className), ...props })
 );
 DialogFooter.displayName = "DialogFooter";
 var TooltipProvider = Tooltip$1.Provider;
 var TooltipRoot = Tooltip$1.Root;
 var TooltipTrigger = Tooltip$1.Trigger;
-var TooltipContent = React38.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, { sideOffset: 5, children: /* @__PURE__ */ jsxs(Tooltip$1.Popup, { ref, className: clsx27("ds-tooltip__content", className), ...props, children: [
+var TooltipContent = React39.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, { sideOffset: 5, children: /* @__PURE__ */ jsxs(Tooltip$1.Popup, { ref, className: clsx28("ds-tooltip__content", className), ...props, children: [
   children,
   /* @__PURE__ */ jsx(Tooltip$1.Arrow, { className: "ds-tooltip__arrow" })
 ] }) }) }));
@@ -924,26 +1049,26 @@ var Tooltip = ({ content, children, delay = 200 }) => {
     /* @__PURE__ */ jsx(TooltipContent, { children: content })
   ] }) });
 };
-var Badge = React38.forwardRef(
+var Badge = React39.forwardRef(
   ({ className, variant = "default", ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "span",
       {
         ref,
-        className: clsx27("ds-badge", `ds-badge--${variant}`, className),
+        className: clsx28("ds-badge", `ds-badge--${variant}`, className),
         ...props
       }
     );
   }
 );
 Badge.displayName = "Badge";
-var StatusBadge = React38.forwardRef(
+var StatusBadge = React39.forwardRef(
   ({ variant = "default", size = "md", dot = false, className, children }, ref) => {
     return /* @__PURE__ */ jsxs(
       "span",
       {
         ref,
-        className: clsx27(
+        className: clsx28(
           "ds-status-badge",
           `ds-status-badge--${variant}`,
           `ds-status-badge--${size}`,
@@ -1032,7 +1157,7 @@ var DefaultIcons = {
     }
   )
 };
-var Alert = React38.forwardRef(
+var Alert = React39.forwardRef(
   ({ className, variant = "info", title, icon, children, ...props }, ref) => {
     const renderedIcon = icon || DefaultIcons[variant];
     return /* @__PURE__ */ jsxs(
@@ -1040,7 +1165,7 @@ var Alert = React38.forwardRef(
       {
         ref,
         role: "alert",
-        className: clsx27("ds-alert", `ds-alert--${variant}`, className),
+        className: clsx28("ds-alert", `ds-alert--${variant}`, className),
         ...props,
         children: [
           /* @__PURE__ */ jsx("div", { className: "ds-alert__icon", "aria-hidden": "true", children: renderedIcon }),
@@ -1070,7 +1195,7 @@ var ToastItem = ({
   onDismiss,
   dismissLabel = "Close"
 }) => {
-  return /* @__PURE__ */ jsxs("div", { className: clsx27("ds-toast-root", `ds-toast--${variant}`), "data-state": "open", role: "alert", children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx28("ds-toast-root", `ds-toast--${variant}`), "data-state": "open", role: "alert", children: [
     title && /* @__PURE__ */ jsx("div", { className: "ds-toast-title", children: title }),
     description && /* @__PURE__ */ jsx("div", { className: "ds-toast-description", children: description }),
     action && /* @__PURE__ */ jsx("div", { className: "ds-toast-action", children: action }),
@@ -1140,18 +1265,18 @@ var ToastProvider = ({ children }) => {
   ] });
 };
 var DropdownMenu = Menu.Root;
-var DropdownMenuTrigger = React38.forwardRef(({ className, ...props }, ref) => {
+var DropdownMenuTrigger = React39.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     Menu.Trigger,
     {
       ref,
-      className: clsx27("ds-dropdown-menu__trigger", className),
+      className: clsx28("ds-dropdown-menu__trigger", className),
       ...props
     }
   );
 });
 DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
-var DropdownMenuContent = React38.forwardRef(
+var DropdownMenuContent = React39.forwardRef(
   ({ className, side = "bottom", align = "start", sideOffset = 4, alignOffset = 0, ...props }, ref) => {
     return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(
       Menu.Positioner,
@@ -1164,7 +1289,7 @@ var DropdownMenuContent = React38.forwardRef(
           Menu.Popup,
           {
             ref,
-            className: clsx27("ds-dropdown-menu__content", className),
+            className: clsx28("ds-dropdown-menu__content", className),
             ...props
           }
         )
@@ -1173,23 +1298,23 @@ var DropdownMenuContent = React38.forwardRef(
   }
 );
 DropdownMenuContent.displayName = "DropdownMenuContent";
-var DropdownMenuItem = React38.forwardRef(
+var DropdownMenuItem = React39.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Menu.Item, { ref, className: clsx27("ds-dropdown-menu__item", className), ...props });
+    return /* @__PURE__ */ jsx(Menu.Item, { ref, className: clsx28("ds-dropdown-menu__item", className), ...props });
   }
 );
 DropdownMenuItem.displayName = "DropdownMenuItem";
-var DropdownMenuSeparator = React38.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx("div", { ref, className: clsx27("ds-dropdown-menu__separator", className), ...props });
+var DropdownMenuSeparator = React39.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-dropdown-menu__separator", className), ...props });
 });
 DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
-var DropdownMenuLabel = React38.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx("div", { ref, className: clsx27("ds-dropdown-menu__label", className), ...props });
+var DropdownMenuLabel = React39.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-dropdown-menu__label", className), ...props });
 });
 DropdownMenuLabel.displayName = "DropdownMenuLabel";
-var EmptyState = React38.forwardRef(
+var EmptyState = React39.forwardRef(
   ({ icon, title, description, action, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs("div", { ref, className: clsx27("ds-empty-state", className), ...props, children: [
+    return /* @__PURE__ */ jsxs("div", { ref, className: clsx28("ds-empty-state", className), ...props, children: [
       icon && /* @__PURE__ */ jsx("div", { className: "ds-empty-state__icon", children: icon }),
       /* @__PURE__ */ jsx("h3", { className: "ds-empty-state__title", children: title }),
       description && /* @__PURE__ */ jsx("p", { className: "ds-empty-state__description", children: description }),
@@ -1198,48 +1323,48 @@ var EmptyState = React38.forwardRef(
   }
 );
 EmptyState.displayName = "EmptyState";
-var Card = React38.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx27("ds-card", className), ...props })
+var Card = React39.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-card", className), ...props })
 );
 Card.displayName = "Card";
-var CardHeader = React38.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx27("ds-card__header", className), ...props })
+var CardHeader = React39.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-card__header", className), ...props })
 );
 CardHeader.displayName = "CardHeader";
-var CardTitle = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("h3", { ref, className: clsx27("ds-card__title", className), ...props }));
+var CardTitle = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("h3", { ref, className: clsx28("ds-card__title", className), ...props }));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: clsx27("ds-card__description", className), ...props }));
+var CardDescription = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: clsx28("ds-card__description", className), ...props }));
 CardDescription.displayName = "CardDescription";
-var CardContent = React38.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx27("ds-card__content", className), ...props })
+var CardContent = React39.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-card__content", className), ...props })
 );
 CardContent.displayName = "CardContent";
-var CardFooter = React38.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx27("ds-card__footer", className), ...props })
+var CardFooter = React39.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-card__footer", className), ...props })
 );
 CardFooter.displayName = "CardFooter";
-var AccordionContext = React38.createContext(null);
+var AccordionContext = React39.createContext(null);
 function useAccordionContext() {
-  const ctx = React38.useContext(AccordionContext);
+  const ctx = React39.useContext(AccordionContext);
   if (!ctx) {
     throw new Error("Accordion compound components must be used within <Accordion>");
   }
   return ctx;
 }
-var AccordionItemContext = React38.createContext(null);
+var AccordionItemContext = React39.createContext(null);
 function useAccordionItemContext() {
-  const ctx = React38.useContext(AccordionItemContext);
+  const ctx = React39.useContext(AccordionItemContext);
   if (!ctx) {
     throw new Error("AccordionTrigger/AccordionContent must be used within <AccordionItem>");
   }
   return ctx;
 }
-var Accordion = React38.forwardRef(
+var Accordion = React39.forwardRef(
   ({ className, type = "single", defaultValue = [], collapsible: _collapsible, children, ...props }, ref) => {
-    const [openItems, setOpenItems] = React38.useState(
+    const [openItems, setOpenItems] = React39.useState(
       () => new Set(defaultValue)
     );
-    const toggle = React38.useCallback(
+    const toggle = React39.useCallback(
       (value) => {
         setOpenItems((prev) => {
           const next = new Set(prev);
@@ -1256,19 +1381,19 @@ var Accordion = React38.forwardRef(
       },
       [type]
     );
-    const contextValue = React38.useMemo(
+    const contextValue = React39.useMemo(
       () => ({ openItems, toggle }),
       [openItems, toggle]
     );
-    return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { ref, className: clsx27("ds-accordion", className), ...props, children }) });
+    return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-accordion", className), ...props, children }) });
   }
 );
 Accordion.displayName = "Accordion";
-var AccordionItem = React38.forwardRef(
+var AccordionItem = React39.forwardRef(
   ({ className, value, children, ...props }, ref) => {
     const { openItems } = useAccordionContext();
     const isOpen = openItems.has(value);
-    const contextValue = React38.useMemo(
+    const contextValue = React39.useMemo(
       () => ({ value, isOpen }),
       [value, isOpen]
     );
@@ -1276,7 +1401,7 @@ var AccordionItem = React38.forwardRef(
       "div",
       {
         ref,
-        className: clsx27("ds-accordion__item", className),
+        className: clsx28("ds-accordion__item", className),
         "data-state": isOpen ? "open" : "closed",
         ...props,
         children
@@ -1285,7 +1410,7 @@ var AccordionItem = React38.forwardRef(
   }
 );
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React38.forwardRef(({ className, children, ...props }, ref) => {
+var AccordionTrigger = React39.forwardRef(({ className, children, ...props }, ref) => {
   const { toggle } = useAccordionContext();
   const { value, isOpen } = useAccordionItemContext();
   return /* @__PURE__ */ jsxs(
@@ -1293,7 +1418,7 @@ var AccordionTrigger = React38.forwardRef(({ className, children, ...props }, re
     {
       ref,
       type: "button",
-      className: clsx27("ds-accordion__trigger", className),
+      className: clsx28("ds-accordion__trigger", className),
       "aria-expanded": isOpen,
       onClick: () => toggle(value),
       ...props,
@@ -1320,13 +1445,13 @@ var AccordionTrigger = React38.forwardRef(({ className, children, ...props }, re
   );
 });
 AccordionTrigger.displayName = "AccordionTrigger";
-var AccordionContent = React38.forwardRef(({ className, children, ...props }, ref) => {
+var AccordionContent = React39.forwardRef(({ className, children, ...props }, ref) => {
   const { isOpen } = useAccordionItemContext();
-  const contentRef = React38.useRef(null);
-  const [height, setHeight] = React38.useState(
+  const contentRef = React39.useRef(null);
+  const [height, setHeight] = React39.useState(
     isOpen ? void 0 : 0
   );
-  React38.useEffect(() => {
+  React39.useEffect(() => {
     const el = contentRef.current;
     if (!el) return;
     if (isOpen) {
@@ -1348,7 +1473,7 @@ var AccordionContent = React38.forwardRef(({ className, children, ...props }, re
     "div",
     {
       ref: contentRef,
-      className: clsx27("ds-accordion__content", className),
+      className: clsx28("ds-accordion__content", className),
       style: {
         height: height !== void 0 ? `${height}px` : "auto"
       },
@@ -1359,13 +1484,13 @@ var AccordionContent = React38.forwardRef(({ className, children, ...props }, re
   );
 });
 AccordionContent.displayName = "AccordionContent";
-var Label = React38.forwardRef(
+var Label = React39.forwardRef(
   ({ className, disabled, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "label",
       {
         ref,
-        className: clsx27("ds-label", disabled && "ds-label--disabled", className),
+        className: clsx28("ds-label", disabled && "ds-label--disabled", className),
         "data-disabled": disabled || void 0,
         ...props
       }
@@ -1373,20 +1498,20 @@ var Label = React38.forwardRef(
   }
 );
 Label.displayName = "Label";
-var Skeleton = React38.forwardRef(
+var Skeleton = React39.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
-        className: clsx27("ds-skeleton", className),
+        className: clsx28("ds-skeleton", className),
         ...props
       }
     );
   }
 );
 Skeleton.displayName = "Skeleton";
-var Separator = React38.forwardRef(
+var Separator = React39.forwardRef(
   ({ className, orientation = "horizontal", ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
@@ -1394,7 +1519,7 @@ var Separator = React38.forwardRef(
         ref,
         role: "separator",
         "aria-orientation": orientation,
-        className: clsx27(
+        className: clsx28(
           "ds-separator",
           `ds-separator--${orientation}`,
           className
@@ -1405,19 +1530,19 @@ var Separator = React38.forwardRef(
   }
 );
 Separator.displayName = "Separator";
-var SheetContext = React38.createContext(void 0);
+var SheetContext = React39.createContext(void 0);
 function useSheetContext() {
-  const ctx = React38.useContext(SheetContext);
+  const ctx = React39.useContext(SheetContext);
   if (!ctx) {
     throw new Error("Sheet compound components must be used within a <Sheet> parent.");
   }
   return ctx;
 }
 var Sheet = ({ open: controlledOpen, onOpenChange, children }) => {
-  const [uncontrolledOpen, setUncontrolledOpen] = React38.useState(false);
+  const [uncontrolledOpen, setUncontrolledOpen] = React39.useState(false);
   const isControlled = controlledOpen !== void 0;
   const open = isControlled ? controlledOpen : uncontrolledOpen;
-  const handleOpenChange = React38.useCallback(
+  const handleOpenChange = React39.useCallback(
     (next) => {
       if (!isControlled) {
         setUncontrolledOpen(next);
@@ -1429,7 +1554,7 @@ var Sheet = ({ open: controlledOpen, onOpenChange, children }) => {
   return /* @__PURE__ */ jsx(SheetContext.Provider, { value: { open, onOpenChange: handleOpenChange }, children });
 };
 Sheet.displayName = "Sheet";
-var SheetTrigger = React38.forwardRef(
+var SheetTrigger = React39.forwardRef(
   ({ onClick, asChild = false, ...props }, ref) => {
     const { onOpenChange } = useSheetContext();
     const handleClick = (e) => {
@@ -1441,7 +1566,7 @@ var SheetTrigger = React38.forwardRef(
   }
 );
 SheetTrigger.displayName = "SheetTrigger";
-var SheetClose = React38.forwardRef(
+var SheetClose = React39.forwardRef(
   ({ onClick, asChild = false, ...props }, ref) => {
     const { onOpenChange } = useSheetContext();
     const handleClick = (e) => {
@@ -1453,7 +1578,7 @@ var SheetClose = React38.forwardRef(
   }
 );
 SheetClose.displayName = "SheetClose";
-var SheetContent = React38.forwardRef(
+var SheetContent = React39.forwardRef(
   ({ side = "right", className, children, ...props }, ref) => {
     const { open, onOpenChange } = useSheetContext();
     if (!open) return null;
@@ -1472,7 +1597,7 @@ var SheetContent = React38.forwardRef(
           {
             ref,
             role: "dialog",
-            className: clsx27("ds-sheet__content", `ds-sheet__content--${side}`, className),
+            className: clsx28("ds-sheet__content", `ds-sheet__content--${side}`, className),
             ...props,
             children
           }
@@ -1483,45 +1608,45 @@ var SheetContent = React38.forwardRef(
   }
 );
 SheetContent.displayName = "SheetContent";
-var SheetHeader = React38.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx27("ds-sheet__header", className), ...props })
+var SheetHeader = React39.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-sheet__header", className), ...props })
 );
 SheetHeader.displayName = "SheetHeader";
-var SheetTitle = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("h2", { ref, className: clsx27("ds-sheet__title", className), ...props }));
+var SheetTitle = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("h2", { ref, className: clsx28("ds-sheet__title", className), ...props }));
 SheetTitle.displayName = "SheetTitle";
-var SheetDescription = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: clsx27("ds-sheet__description", className), ...props }));
+var SheetDescription = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: clsx28("ds-sheet__description", className), ...props }));
 SheetDescription.displayName = "SheetDescription";
-var SheetFooter = React38.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx27("ds-sheet__footer", className), ...props })
+var SheetFooter = React39.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-sheet__footer", className), ...props })
 );
 SheetFooter.displayName = "SheetFooter";
-var AvatarContext = React38.createContext({
+var AvatarContext = React39.createContext({
   hasImage: false,
   imageError: false,
   onImageError: () => {
   }
 });
-var Avatar = React38.forwardRef(
+var Avatar = React39.forwardRef(
   ({ size = "md", className, children, ...props }, ref) => {
-    const [imageError, setImageError] = React38.useState(false);
-    const [hasImage, setHasImage] = React38.useState(false);
-    React38.useEffect(() => {
+    const [imageError, setImageError] = React39.useState(false);
+    const [hasImage, setHasImage] = React39.useState(false);
+    React39.useEffect(() => {
       let found = false;
-      React38.Children.forEach(children, (child) => {
-        if (React38.isValidElement(child) && child.type === AvatarImage) {
+      React39.Children.forEach(children, (child) => {
+        if (React39.isValidElement(child) && child.type === AvatarImage) {
           found = true;
         }
       });
       setHasImage(found);
     }, [children]);
-    const onImageError = React38.useCallback(() => {
+    const onImageError = React39.useCallback(() => {
       setImageError(true);
     }, []);
     return /* @__PURE__ */ jsx(AvatarContext.Provider, { value: { hasImage, imageError, onImageError }, children: /* @__PURE__ */ jsx(
       "span",
       {
         ref,
-        className: clsx27("ds-avatar", `ds-avatar--${size}`, className),
+        className: clsx28("ds-avatar", `ds-avatar--${size}`, className),
         ...props,
         children
       }
@@ -1529,8 +1654,8 @@ var Avatar = React38.forwardRef(
   }
 );
 Avatar.displayName = "Avatar";
-var AvatarImage = React38.forwardRef(({ className, onError, ...props }, ref) => {
-  const { imageError, onImageError } = React38.useContext(AvatarContext);
+var AvatarImage = React39.forwardRef(({ className, onError, ...props }, ref) => {
+  const { imageError, onImageError } = React39.useContext(AvatarContext);
   const handleError = (e) => {
     onImageError();
     onError?.(e);
@@ -1540,32 +1665,32 @@ var AvatarImage = React38.forwardRef(({ className, onError, ...props }, ref) =>
     "img",
     {
       ref,
-      className: clsx27("ds-avatar__image", className),
+      className: clsx28("ds-avatar__image", className),
       onError: handleError,
       ...props
     }
   );
 });
 AvatarImage.displayName = "AvatarImage";
-var AvatarFallback = React38.forwardRef(({ className, ...props }, ref) => {
-  const { hasImage, imageError } = React38.useContext(AvatarContext);
+var AvatarFallback = React39.forwardRef(({ className, ...props }, ref) => {
+  const { hasImage, imageError } = React39.useContext(AvatarContext);
   if (hasImage && !imageError) return null;
-  return /* @__PURE__ */ jsx("span", { ref, className: clsx27("ds-avatar__fallback", className), ...props });
+  return /* @__PURE__ */ jsx("span", { ref, className: clsx28("ds-avatar__fallback", className), ...props });
 });
 AvatarFallback.displayName = "AvatarFallback";
-var PopoverContext = React38.createContext(null);
+var PopoverContext = React39.createContext(null);
 function usePopoverContext() {
-  const context = React38.useContext(PopoverContext);
+  const context = React39.useContext(PopoverContext);
   if (!context) {
     throw new Error("Popover compound components must be used within <Popover>");
   }
   return context;
 }
 var Popover = ({ open: controlledOpen, onOpenChange, children }) => {
-  const [uncontrolledOpen, setUncontrolledOpen] = React38.useState(false);
+  const [uncontrolledOpen, setUncontrolledOpen] = React39.useState(false);
   const isControlled = controlledOpen !== void 0;
   const open = isControlled ? controlledOpen : uncontrolledOpen;
-  const setOpen = React38.useCallback(
+  const setOpen = React39.useCallback(
     (value) => {
       if (!isControlled) {
         setUncontrolledOpen(value);
@@ -1574,17 +1699,17 @@ var Popover = ({ open: controlledOpen, onOpenChange, children }) => {
     },
     [isControlled, onOpenChange]
   );
-  const toggle = React38.useCallback(() => {
+  const toggle = React39.useCallback(() => {
     setOpen(!open);
   }, [open, setOpen]);
-  const contextValue = React38.useMemo(
+  const contextValue = React39.useMemo(
     () => ({ open, setOpen, toggle }),
     [open, setOpen, toggle]
   );
   return /* @__PURE__ */ jsx(PopoverContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: "ds-popover", children }) });
 };
 Popover.displayName = "Popover";
-var PopoverTrigger = React38.forwardRef(
+var PopoverTrigger = React39.forwardRef(
   ({ className, onClick, asChild = false, ...props }, ref) => {
     const { toggle } = usePopoverContext();
     const handleClick = (e) => {
@@ -1597,7 +1722,7 @@ var PopoverTrigger = React38.forwardRef(
       {
         ref,
         type: "button",
-        className: clsx27("ds-popover__trigger", className),
+        className: clsx28("ds-popover__trigger", className),
         onClick: handleClick,
         ...props
       }
@@ -1605,7 +1730,7 @@ var PopoverTrigger = React38.forwardRef(
   }
 );
 PopoverTrigger.displayName = "PopoverTrigger";
-var PopoverContent = React38.forwardRef(
+var PopoverContent = React39.forwardRef(
   ({ className, side = "bottom", align = "center", ...props }, ref) => {
     const { open } = usePopoverContext();
     if (!open) return null;
@@ -1613,7 +1738,7 @@ var PopoverContent = React38.forwardRef(
       "div",
       {
         ref,
-        className: clsx27(
+        className: clsx28(
           "ds-popover__content",
           `ds-popover__content--${side}`,
           `ds-popover__content--align-${align}`,
@@ -1625,7 +1750,7 @@ var PopoverContent = React38.forwardRef(
   }
 );
 PopoverContent.displayName = "PopoverContent";
-var PopoverClose = React38.forwardRef(({ className, onClick, ...props }, ref) => {
+var PopoverClose = React39.forwardRef(({ className, onClick, ...props }, ref) => {
   const { setOpen } = usePopoverContext();
   const handleClick = (e) => {
     setOpen(false);
@@ -1636,14 +1761,14 @@ var PopoverClose = React38.forwardRef(({ className, onClick, ...props }, ref) =>
     {
       ref,
       type: "button",
-      className: clsx27("ds-popover__close", className),
+      className: clsx28("ds-popover__close", className),
       onClick: handleClick,
       ...props
     }
   );
 });
 PopoverClose.displayName = "PopoverClose";
-var Progress = React38.forwardRef(
+var Progress = React39.forwardRef(
   ({ className, value = 0, max = 100, ...props }, ref) => {
     const percentage = max > 0 ? Math.min(100, Math.max(0, value / max * 100)) : 0;
     return /* @__PURE__ */ jsx(
@@ -1654,7 +1779,7 @@ var Progress = React38.forwardRef(
         "aria-valuenow": value,
         "aria-valuemin": 0,
         "aria-valuemax": max,
-        className: clsx27("ds-progress", className),
+        className: clsx28("ds-progress", className),
         ...props,
         children: /* @__PURE__ */ jsx(
           "div",
@@ -1668,19 +1793,19 @@ var Progress = React38.forwardRef(
   }
 );
 Progress.displayName = "Progress";
-var ScrollArea = React38.forwardRef(
+var ScrollArea = React39.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx("div", { ref, className: clsx27("ds-scroll-area", className), ...props, children: /* @__PURE__ */ jsx("div", { className: "ds-scroll-area__viewport", children }) });
+    return /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-scroll-area", className), ...props, children: /* @__PURE__ */ jsx("div", { className: "ds-scroll-area__viewport", children }) });
   }
 );
 ScrollArea.displayName = "ScrollArea";
-var ScrollBar = React38.forwardRef(
+var ScrollBar = React39.forwardRef(
   ({ className, orientation = "vertical", ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
-        className: clsx27(
+        className: clsx28(
           "ds-scroll-area__scrollbar",
           `ds-scroll-area__scrollbar--${orientation}`,
           className
@@ -1691,55 +1816,55 @@ var ScrollBar = React38.forwardRef(
   }
 );
 ScrollBar.displayName = "ScrollBar";
-var Breadcrumb = React38.forwardRef(
+var Breadcrumb = React39.forwardRef(
   ({ className, "aria-label": ariaLabel = "Breadcrumb", ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "nav",
       {
         ref,
         "aria-label": ariaLabel,
-        className: clsx27("ds-breadcrumb", className),
+        className: clsx28("ds-breadcrumb", className),
         ...props
       }
     );
   }
 );
 Breadcrumb.displayName = "Breadcrumb";
-var BreadcrumbList = React38.forwardRef(({ className, ...props }, ref) => {
+var BreadcrumbList = React39.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     "ol",
     {
       ref,
-      className: clsx27("ds-breadcrumb__list", className),
+      className: clsx28("ds-breadcrumb__list", className),
       ...props
     }
   );
 });
 BreadcrumbList.displayName = "BreadcrumbList";
-var BreadcrumbItem = React38.forwardRef(({ className, ...props }, ref) => {
+var BreadcrumbItem = React39.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     "li",
     {
       ref,
-      className: clsx27("ds-breadcrumb__item", className),
+      className: clsx28("ds-breadcrumb__item", className),
       ...props
     }
   );
 });
 BreadcrumbItem.displayName = "BreadcrumbItem";
-var BreadcrumbLink = React38.forwardRef(({ className, asChild = false, ...props }, ref) => {
+var BreadcrumbLink = React39.forwardRef(({ className, asChild = false, ...props }, ref) => {
   const Comp = asChild ? Slot : "a";
   return /* @__PURE__ */ jsx(
     Comp,
     {
       ref,
-      className: clsx27("ds-breadcrumb__link", className),
+      className: clsx28("ds-breadcrumb__link", className),
       ...props
     }
   );
 });
 BreadcrumbLink.displayName = "BreadcrumbLink";
-var BreadcrumbPage = React38.forwardRef(({ className, ...props }, ref) => {
+var BreadcrumbPage = React39.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     "span",
     {
@@ -1747,39 +1872,39 @@ var BreadcrumbPage = React38.forwardRef(({ className, ...props }, ref) => {
       role: "link",
       "aria-current": "page",
       "aria-disabled": "true",
-      className: clsx27("ds-breadcrumb__page", className),
+      className: clsx28("ds-breadcrumb__page", className),
       ...props
     }
   );
 });
 BreadcrumbPage.displayName = "BreadcrumbPage";
-var BreadcrumbSeparator = React38.forwardRef(({ className, children, ...props }, ref) => {
+var BreadcrumbSeparator = React39.forwardRef(({ className, children, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     "li",
     {
       ref,
       role: "presentation",
       "aria-hidden": "true",
-      className: clsx27("ds-breadcrumb__separator", className),
+      className: clsx28("ds-breadcrumb__separator", className),
       ...props,
       children: children ?? "/"
     }
   );
 });
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
-var BreadcrumbEllipsis = React38.forwardRef(({ className, ...props }, ref) => {
+var BreadcrumbEllipsis = React39.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     "span",
     {
       ref,
-      className: clsx27("ds-breadcrumb__ellipsis", className),
+      className: clsx28("ds-breadcrumb__ellipsis", className),
       ...props,
       children: "\u2026"
     }
   );
 });
 BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
-var Toggle = React38.forwardRef(
+var Toggle = React39.forwardRef(
   ({
     className,
     pressed: controlledPressed,
@@ -1789,7 +1914,7 @@ var Toggle = React38.forwardRef(
     onClick,
     ...props
   }, ref) => {
-    const [uncontrolledPressed, setUncontrolledPressed] = React38.useState(false);
+    const [uncontrolledPressed, setUncontrolledPressed] = React39.useState(false);
     const isControlled = controlledPressed !== void 0;
     const pressed = isControlled ? controlledPressed : uncontrolledPressed;
     const handleClick = (e) => {
@@ -1805,7 +1930,7 @@ var Toggle = React38.forwardRef(
       {
         ref,
         type: "button",
-        className: clsx27(
+        className: clsx28(
           "ds-toggle",
           `ds-toggle--${variant}`,
           `ds-toggle--${size}`,
@@ -1820,19 +1945,19 @@ var Toggle = React38.forwardRef(
   }
 );
 Toggle.displayName = "Toggle";
-var ToggleGroupContext = React38.createContext({
+var ToggleGroupContext = React39.createContext({
   type: "single",
   value: [],
   onItemToggle: () => {
   }
 });
-var ToggleGroup = React38.forwardRef(
+var ToggleGroup = React39.forwardRef(
   ({ className, type, value, onValueChange, children, ...props }, ref) => {
-    const normalizedValue = React38.useMemo(() => {
+    const normalizedValue = React39.useMemo(() => {
       if (value === void 0) return [];
       return Array.isArray(value) ? value : [value];
     }, [value]);
-    const onItemToggle = React38.useCallback(
+    const onItemToggle = React39.useCallback(
       (itemValue) => {
         if (type === "single") {
           const next = normalizedValue.includes(itemValue) ? "" : itemValue;
@@ -1844,7 +1969,7 @@ var ToggleGroup = React38.forwardRef(
       },
       [type, normalizedValue, onValueChange]
     );
-    const ctx = React38.useMemo(
+    const ctx = React39.useMemo(
       () => ({ type, value: normalizedValue, onItemToggle }),
       [type, normalizedValue, onItemToggle]
     );
@@ -1853,7 +1978,7 @@ var ToggleGroup = React38.forwardRef(
       {
         ref,
         role: "group",
-        className: clsx27("ds-toggle-group", className),
+        className: clsx28("ds-toggle-group", className),
         ...props,
         children
       }
@@ -1861,8 +1986,8 @@ var ToggleGroup = React38.forwardRef(
   }
 );
 ToggleGroup.displayName = "ToggleGroup";
-var ToggleGroupItem = React38.forwardRef(({ className, value, children, onClick, ...props }, ref) => {
-  const ctx = React38.useContext(ToggleGroupContext);
+var ToggleGroupItem = React39.forwardRef(({ className, value, children, onClick, ...props }, ref) => {
+  const ctx = React39.useContext(ToggleGroupContext);
   const pressed = ctx.value.includes(value);
   const handleClick = (e) => {
     ctx.onItemToggle(value);
@@ -1874,7 +1999,7 @@ var ToggleGroupItem = React38.forwardRef(({ className, value, children, onClick,
       ref,
       type: "button",
       "aria-pressed": pressed,
-      className: clsx27(
+      className: clsx28(
         "ds-toggle-group__item",
         pressed && "ds-toggle-group__item--pressed",
         className
@@ -1886,7 +2011,7 @@ var ToggleGroupItem = React38.forwardRef(({ className, value, children, onClick,
   );
 });
 ToggleGroupItem.displayName = "ToggleGroupItem";
-var Slider = React38.forwardRef(
+var Slider = React39.forwardRef(
   ({
     className,
     value: controlledValue,
@@ -1898,7 +2023,7 @@ var Slider = React38.forwardRef(
     disabled = false,
     ...props
   }, ref) => {
-    const [uncontrolledValue, setUncontrolledValue] = React38.useState(defaultValue);
+    const [uncontrolledValue, setUncontrolledValue] = React39.useState(defaultValue);
     const isControlled = controlledValue !== void 0;
     const value = isControlled ? controlledValue : uncontrolledValue;
     const handleChange = (e) => {
@@ -1913,7 +2038,7 @@ var Slider = React38.forwardRef(
       "div",
       {
         ref,
-        className: clsx27("ds-slider", disabled && "ds-slider--disabled", className),
+        className: clsx28("ds-slider", disabled && "ds-slider--disabled", className),
         ...props,
         children: [
           /* @__PURE__ */ jsx("div", { className: "ds-slider__track", children: /* @__PURE__ */ jsx(
@@ -1946,27 +2071,27 @@ var Slider = React38.forwardRef(
   }
 );
 Slider.displayName = "Slider";
-var CollapsibleContext = React38.createContext(null);
+var CollapsibleContext = React39.createContext(null);
 function useCollapsibleContext() {
-  const context = React38.useContext(CollapsibleContext);
+  const context = React39.useContext(CollapsibleContext);
   if (!context) {
     throw new Error("Collapsible compound components must be used within <Collapsible>");
   }
   return context;
 }
-var Collapsible = React38.forwardRef(
+var Collapsible = React39.forwardRef(
   ({ className, open: controlledOpen, onOpenChange, children, ...props }, ref) => {
-    const [uncontrolledOpen, setUncontrolledOpen] = React38.useState(false);
+    const [uncontrolledOpen, setUncontrolledOpen] = React39.useState(false);
     const isControlled = controlledOpen !== void 0;
     const open = isControlled ? controlledOpen : uncontrolledOpen;
-    const toggle = React38.useCallback(() => {
+    const toggle = React39.useCallback(() => {
       const next = !open;
       if (!isControlled) {
         setUncontrolledOpen(next);
       }
       onOpenChange?.(next);
     }, [open, isControlled, onOpenChange]);
-    const contextValue = React38.useMemo(
+    const contextValue = React39.useMemo(
       () => ({ open, toggle }),
       [open, toggle]
     );
@@ -1974,7 +2099,7 @@ var Collapsible = React38.forwardRef(
       "div",
       {
         ref,
-        className: clsx27("ds-collapsible", className),
+        className: clsx28("ds-collapsible", className),
         "data-state": open ? "open" : "closed",
         ...props,
         children
@@ -1983,7 +2108,7 @@ var Collapsible = React38.forwardRef(
   }
 );
 Collapsible.displayName = "Collapsible";
-var CollapsibleTrigger = React38.forwardRef(({ className, onClick, ...props }, ref) => {
+var CollapsibleTrigger = React39.forwardRef(({ className, onClick, ...props }, ref) => {
   const { toggle } = useCollapsibleContext();
   const handleClick = (e) => {
     toggle();
@@ -1994,20 +2119,20 @@ var CollapsibleTrigger = React38.forwardRef(({ className, onClick, ...props }, r
     {
       ref,
       type: "button",
-      className: clsx27("ds-collapsible__trigger", className),
+      className: clsx28("ds-collapsible__trigger", className),
       onClick: handleClick,
       ...props
     }
   );
 });
 CollapsibleTrigger.displayName = "CollapsibleTrigger";
-var CollapsibleContent = React38.forwardRef(({ className, children, ...props }, ref) => {
+var CollapsibleContent = React39.forwardRef(({ className, children, ...props }, ref) => {
   const { open } = useCollapsibleContext();
-  const contentRef = React38.useRef(null);
-  const [maxHeight, setMaxHeight] = React38.useState(
+  const contentRef = React39.useRef(null);
+  const [maxHeight, setMaxHeight] = React39.useState(
     open ? void 0 : 0
   );
-  React38.useEffect(() => {
+  React39.useEffect(() => {
     const el = contentRef.current;
     if (!el) return;
     if (open) {
@@ -2029,7 +2154,7 @@ var CollapsibleContent = React38.forwardRef(({ className, children, ...props },
     "div",
     {
       ref: contentRef,
-      className: clsx27("ds-collapsible__content", className),
+      className: clsx28("ds-collapsible__content", className),
       "data-state": open ? "open" : "closed",
       style: {
         maxHeight: maxHeight !== void 0 ? `${maxHeight}px` : "none"
@@ -2041,9 +2166,9 @@ var CollapsibleContent = React38.forwardRef(({ className, children, ...props },
   );
 });
 CollapsibleContent.displayName = "CollapsibleContent";
-var HoverCardContext = React38.createContext(null);
+var HoverCardContext = React39.createContext(null);
 function useHoverCardContext() {
-  const context = React38.useContext(HoverCardContext);
+  const context = React39.useContext(HoverCardContext);
   if (!context) {
     throw new Error("HoverCard compound components must be used within <HoverCard>");
   }
@@ -2054,31 +2179,31 @@ var HoverCard = ({
   closeDelay = 100,
   children
 }) => {
-  const [open, setOpen] = React38.useState(false);
-  const openTimerRef = React38.useRef();
-  const closeTimerRef = React38.useRef();
-  const onOpen = React38.useCallback(() => {
+  const [open, setOpen] = React39.useState(false);
+  const openTimerRef = React39.useRef();
+  const closeTimerRef = React39.useRef();
+  const onOpen = React39.useCallback(() => {
     clearTimeout(closeTimerRef.current);
     openTimerRef.current = setTimeout(() => setOpen(true), openDelay);
   }, [openDelay]);
-  const onClose = React38.useCallback(() => {
+  const onClose = React39.useCallback(() => {
     clearTimeout(openTimerRef.current);
     closeTimerRef.current = setTimeout(() => setOpen(false), closeDelay);
   }, [closeDelay]);
-  React38.useEffect(() => {
+  React39.useEffect(() => {
     return () => {
       clearTimeout(openTimerRef.current);
       clearTimeout(closeTimerRef.current);
     };
   }, []);
-  const contextValue = React38.useMemo(
+  const contextValue = React39.useMemo(
     () => ({ open, onOpen, onClose }),
     [open, onOpen, onClose]
   );
   return /* @__PURE__ */ jsx(HoverCardContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: "ds-hover-card", children }) });
 };
 HoverCard.displayName = "HoverCard";
-var HoverCardTrigger = React38.forwardRef(({ className, onMouseEnter, onMouseLeave, ...props }, ref) => {
+var HoverCardTrigger = React39.forwardRef(({ className, onMouseEnter, onMouseLeave, ...props }, ref) => {
   const { onOpen, onClose } = useHoverCardContext();
   const handleMouseEnter = (e) => {
     onOpen();
@@ -2092,7 +2217,7 @@ var HoverCardTrigger = React38.forwardRef(({ className, onMouseEnter, onMouseLea
     "span",
     {
       ref,
-      className: clsx27("ds-hover-card__trigger", className),
+      className: clsx28("ds-hover-card__trigger", className),
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       ...props
@@ -2100,7 +2225,7 @@ var HoverCardTrigger = React38.forwardRef(({ className, onMouseEnter, onMouseLea
   );
 });
 HoverCardTrigger.displayName = "HoverCardTrigger";
-var HoverCardContent = React38.forwardRef(
+var HoverCardContent = React39.forwardRef(
   ({ className, side = "bottom", align = "center", onMouseEnter, onMouseLeave, ...props }, ref) => {
     const { open, onOpen, onClose } = useHoverCardContext();
     const handleMouseEnter = (e) => {
@@ -2116,7 +2241,7 @@ var HoverCardContent = React38.forwardRef(
       "div",
       {
         ref,
-        className: clsx27(
+        className: clsx28(
           "ds-hover-card__content",
           `ds-hover-card__content--${side}`,
           `ds-hover-card__content--align-${align}`,
@@ -2130,13 +2255,13 @@ var HoverCardContent = React38.forwardRef(
   }
 );
 HoverCardContent.displayName = "HoverCardContent";
-var AspectRatio = React38.forwardRef(
+var AspectRatio = React39.forwardRef(
   ({ className, ratio = 1, style, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
-        className: clsx27("ds-aspect-ratio", className),
+        className: clsx28("ds-aspect-ratio", className),
         style: { ...style, paddingBottom: `${1 / ratio * 100}%` },
         ...props,
         children
@@ -2145,7 +2270,7 @@ var AspectRatio = React38.forwardRef(
   }
 );
 AspectRatio.displayName = "AspectRatio";
-var Pagination = React38.forwardRef(
+var Pagination = React39.forwardRef(
   ({ className, "aria-label": ariaLabel = "pagination", ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "nav",
@@ -2153,43 +2278,43 @@ var Pagination = React38.forwardRef(
         ref,
         role: "navigation",
         "aria-label": ariaLabel,
-        className: clsx27("ds-pagination", className),
+        className: clsx28("ds-pagination", className),
         ...props
       }
     );
   }
 );
 Pagination.displayName = "Pagination";
-var PaginationContent = React38.forwardRef(({ className, ...props }, ref) => {
+var PaginationContent = React39.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     "ul",
     {
       ref,
-      className: clsx27("ds-pagination__content", className),
+      className: clsx28("ds-pagination__content", className),
       ...props
     }
   );
 });
 PaginationContent.displayName = "PaginationContent";
-var PaginationItem = React38.forwardRef(({ className, ...props }, ref) => {
+var PaginationItem = React39.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     "li",
     {
       ref,
-      className: clsx27("ds-pagination__item", className),
+      className: clsx28("ds-pagination__item", className),
       ...props
     }
   );
 });
 PaginationItem.displayName = "PaginationItem";
-var PaginationLink = React38.forwardRef(({ className, isActive = false, size = "md", asChild = false, ...props }, ref) => {
+var PaginationLink = React39.forwardRef(({ className, isActive = false, size = "md", asChild = false, ...props }, ref) => {
   const Comp = asChild ? Slot : "button";
   return /* @__PURE__ */ jsx(
     Comp,
     {
       ref,
       "aria-current": isActive ? "page" : void 0,
-      className: clsx27(
+      className: clsx28(
         "ds-pagination__link",
         `ds-pagination__link--${size}`,
         isActive && "ds-pagination__link--active",
@@ -2200,13 +2325,13 @@ var PaginationLink = React38.forwardRef(({ className, isActive = false, size = "
   );
 });
 PaginationLink.displayName = "PaginationLink";
-var PaginationPrevious = React38.forwardRef(({ className, label = "Previous", "aria-label": ariaLabel = "Go to previous page", ...props }, ref) => {
+var PaginationPrevious = React39.forwardRef(({ className, label = "Previous", "aria-label": ariaLabel = "Go to previous page", ...props }, ref) => {
   return /* @__PURE__ */ jsxs(
     PaginationLink,
     {
       ref,
       "aria-label": ariaLabel,
-      className: clsx27("ds-pagination__prev", className),
+      className: clsx28("ds-pagination__prev", className),
       ...props,
       children: [
         /* @__PURE__ */ jsx(
@@ -2231,13 +2356,13 @@ var PaginationPrevious = React38.forwardRef(({ className, label = "Previous", "a
   );
 });
 PaginationPrevious.displayName = "PaginationPrevious";
-var PaginationNext = React38.forwardRef(({ className, label = "Next", "aria-label": ariaLabel = "Go to next page", ...props }, ref) => {
+var PaginationNext = React39.forwardRef(({ className, label = "Next", "aria-label": ariaLabel = "Go to next page", ...props }, ref) => {
   return /* @__PURE__ */ jsxs(
     PaginationLink,
     {
       ref,
       "aria-label": ariaLabel,
-      className: clsx27("ds-pagination__next", className),
+      className: clsx28("ds-pagination__next", className),
       ...props,
       children: [
         /* @__PURE__ */ jsx("span", { children: label }),
@@ -2262,13 +2387,13 @@ var PaginationNext = React38.forwardRef(({ className, label = "Next", "aria-labe
   );
 });
 PaginationNext.displayName = "PaginationNext";
-var PaginationEllipsis = React38.forwardRef(({ className, ...props }, ref) => {
+var PaginationEllipsis = React39.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     "span",
     {
       ref,
       "aria-hidden": "true",
-      className: clsx27("ds-pagination__ellipsis", className),
+      className: clsx28("ds-pagination__ellipsis", className),
       ...props,
       children: "..."
     }
@@ -2284,14 +2409,14 @@ var levelToElement = {
   h5: "h5",
   h6: "h6"
 };
-var Heading = React38.forwardRef(
+var Heading = React39.forwardRef(
   ({ className, level = "h2", as, children, ...props }, ref) => {
     const Comp = as ?? levelToElement[level];
     return /* @__PURE__ */ jsx(
       Comp,
       {
         ref,
-        className: clsx27("ds-heading", `ds-heading--${level}`, className),
+        className: clsx28("ds-heading", `ds-heading--${level}`, className),
         ...props,
         children
       }
@@ -2299,14 +2424,14 @@ var Heading = React38.forwardRef(
   }
 );
 Heading.displayName = "Heading";
-var Text = React38.forwardRef(
+var Text = React39.forwardRef(
   ({ className, variant = "body", as = "p", children, ...props }, ref) => {
     const Comp = as;
     return /* @__PURE__ */ jsx(
       Comp,
       {
         ref,
-        className: clsx27("ds-text", `ds-text--${variant}`, className),
+        className: clsx28("ds-text", `ds-text--${variant}`, className),
         ...props,
         children
       }
@@ -2314,13 +2439,13 @@ var Text = React38.forwardRef(
   }
 );
 Text.displayName = "Text";
-var Prose = React38.forwardRef(
+var Prose = React39.forwardRef(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
-        className: clsx27("ds-prose", className),
+        className: clsx28("ds-prose", className),
         ...props,
         children
       }
@@ -2328,24 +2453,24 @@ var Prose = React38.forwardRef(
   }
 );
 Prose.displayName = "Prose";
-var CarouselContext = React38.createContext(void 0);
+var CarouselContext = React39.createContext(void 0);
 function useCarouselContext() {
-  const ctx = React38.useContext(CarouselContext);
+  const ctx = React39.useContext(CarouselContext);
   if (!ctx) {
     throw new Error("Carousel compound components must be used within a <Carousel> parent.");
   }
   return ctx;
 }
-var Carousel = React38.forwardRef(
+var Carousel = React39.forwardRef(
   ({ className, children, ...props }, ref) => {
-    const scrollRef = React38.useRef(null);
-    return /* @__PURE__ */ jsx(CarouselContext.Provider, { value: { scrollRef }, children: /* @__PURE__ */ jsx("div", { ref, className: clsx27("ds-carousel", className), ...props, children }) });
+    const scrollRef = React39.useRef(null);
+    return /* @__PURE__ */ jsx(CarouselContext.Provider, { value: { scrollRef }, children: /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-carousel", className), ...props, children }) });
   }
 );
 Carousel.displayName = "Carousel";
-var CarouselContent = React38.forwardRef(({ className, ...props }, ref) => {
+var CarouselContent = React39.forwardRef(({ className, ...props }, ref) => {
   const { scrollRef } = useCarouselContext();
-  const mergedRef = React38.useCallback(
+  const mergedRef = React39.useCallback(
     (node) => {
       scrollRef.current = node;
       if (typeof ref === "function") {
@@ -2356,14 +2481,14 @@ var CarouselContent = React38.forwardRef(({ className, ...props }, ref) => {
     },
     [ref, scrollRef]
   );
-  return /* @__PURE__ */ jsx("div", { ref: mergedRef, className: clsx27("ds-carousel__content", className), ...props });
+  return /* @__PURE__ */ jsx("div", { ref: mergedRef, className: clsx28("ds-carousel__content", className), ...props });
 });
 CarouselContent.displayName = "CarouselContent";
-var CarouselItem = React38.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx27("ds-carousel__item", className), ...props })
+var CarouselItem = React39.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-carousel__item", className), ...props })
 );
 CarouselItem.displayName = "CarouselItem";
-var CarouselPrevious = React38.forwardRef(({ className, onClick, children, "aria-label": ariaLabel = "Previous slide", ...props }, ref) => {
+var CarouselPrevious = React39.forwardRef(({ className, onClick, children, "aria-label": ariaLabel = "Previous slide", ...props }, ref) => {
   const { scrollRef } = useCarouselContext();
   const handleClick = (e) => {
     const container = scrollRef.current;
@@ -2379,7 +2504,7 @@ var CarouselPrevious = React38.forwardRef(({ className, onClick, children, "aria
     {
       ref,
       type: "button",
-      className: clsx27("ds-carousel__prev", className),
+      className: clsx28("ds-carousel__prev", className),
       "aria-label": ariaLabel,
       onClick: handleClick,
       ...props,
@@ -2397,7 +2522,7 @@ var CarouselPrevious = React38.forwardRef(({ className, onClick, children, "aria
   );
 });
 CarouselPrevious.displayName = "CarouselPrevious";
-var CarouselNext = React38.forwardRef(({ className, onClick, children, "aria-label": ariaLabel = "Next slide", ...props }, ref) => {
+var CarouselNext = React39.forwardRef(({ className, onClick, children, "aria-label": ariaLabel = "Next slide", ...props }, ref) => {
   const { scrollRef } = useCarouselContext();
   const handleClick = (e) => {
     const container = scrollRef.current;
@@ -2413,7 +2538,7 @@ var CarouselNext = React38.forwardRef(({ className, onClick, children, "aria-lab
     {
       ref,
       type: "button",
-      className: clsx27("ds-carousel__next", className),
+      className: clsx28("ds-carousel__next", className),
       "aria-label": ariaLabel,
       onClick: handleClick,
       ...props,
@@ -2439,9 +2564,9 @@ function mergeRefs(...refs) {
     });
   };
 }
-var CommandContext = React38.createContext(void 0);
+var CommandContext = React39.createContext(void 0);
 function useCommandContext() {
-  const ctx = React38.useContext(CommandContext);
+  const ctx = React39.useContext(CommandContext);
   if (!ctx) {
     throw new Error("Command compound components must be used within a <Command> parent.");
   }
@@ -2451,16 +2576,16 @@ function getOptionElements(listEl) {
   if (!listEl) return [];
   return Array.from(listEl.querySelectorAll('[role="option"]'));
 }
-var Command = React38.forwardRef(
+var Command = React39.forwardRef(
   ({ className, value: controlledValue, onValueChange, onKeyDown, children, ...props }, ref) => {
-    const [uncontrolledValue, setUncontrolledValue] = React38.useState("");
-    const [activeId, setActiveId] = React38.useState(null);
-    const listRef = React38.useRef(null);
+    const [uncontrolledValue, setUncontrolledValue] = React39.useState("");
+    const [activeId, setActiveId] = React39.useState(null);
+    const listRef = React39.useRef(null);
     const isControlled = controlledValue !== void 0;
     const search = isControlled ? controlledValue : uncontrolledValue;
-    const inputId = React38.useId();
-    const listId = React38.useId();
-    const setSearch = React38.useCallback(
+    const inputId = React39.useId();
+    const listId = React39.useId();
+    const setSearch = React39.useCallback(
       (next) => {
         if (!isControlled) {
           setUncontrolledValue(next);
@@ -2469,7 +2594,7 @@ var Command = React38.forwardRef(
       },
       [isControlled, onValueChange]
     );
-    React38.useEffect(() => {
+    React39.useEffect(() => {
       const frame = requestAnimationFrame(() => {
         const items = getOptionElements(listRef.current);
         if (items.length > 0) {
@@ -2480,7 +2605,7 @@ var Command = React38.forwardRef(
       });
       return () => cancelAnimationFrame(frame);
     }, [search]);
-    const handleKeyDown = React38.useCallback(
+    const handleKeyDown = React39.useCallback(
       (e) => {
         const items = getOptionElements(listRef.current);
         if (items.length === 0) {
@@ -2531,7 +2656,7 @@ var Command = React38.forwardRef(
       },
       [activeId, onKeyDown]
     );
-    const ctx = React38.useMemo(
+    const ctx = React39.useMemo(
       () => ({ search, setSearch, activeId, setActiveId, listRef, inputId, listId }),
       [search, setSearch, activeId, inputId, listId]
     );
@@ -2539,7 +2664,7 @@ var Command = React38.forwardRef(
       "div",
       {
         ref,
-        className: clsx27("ds-command", className),
+        className: clsx28("ds-command", className),
         onKeyDown: handleKeyDown,
         ...props,
         children
@@ -2548,7 +2673,7 @@ var Command = React38.forwardRef(
   }
 );
 Command.displayName = "Command";
-var CommandInput = React38.forwardRef(({ className, onChange, ...props }, ref) => {
+var CommandInput = React39.forwardRef(({ className, onChange, ...props }, ref) => {
   const { search, setSearch, activeId, inputId, listId } = useCommandContext();
   const handleChange = (e) => {
     setSearch(e.target.value);
@@ -2590,7 +2715,7 @@ var CommandInput = React38.forwardRef(({ className, onChange, ...props }, ref) =
         "aria-activedescendant": activeId ?? void 0,
         "aria-autocomplete": "list",
         autoComplete: "off",
-        className: clsx27("ds-command__input", className),
+        className: clsx28("ds-command__input", className),
         value: search,
         onChange: handleChange,
         ...props
@@ -2599,7 +2724,7 @@ var CommandInput = React38.forwardRef(({ className, onChange, ...props }, ref) =
   ] });
 });
 CommandInput.displayName = "CommandInput";
-var CommandList = React38.forwardRef(
+var CommandList = React39.forwardRef(
   ({ className, ...props }, ref) => {
     const { listRef, listId } = useCommandContext();
     return /* @__PURE__ */ jsx(
@@ -2608,27 +2733,27 @@ var CommandList = React38.forwardRef(
         ref: mergeRefs(ref, listRef),
         id: listId,
         role: "listbox",
-        className: clsx27("ds-command__list", className),
+        className: clsx28("ds-command__list", className),
         ...props
       }
     );
   }
 );
 CommandList.displayName = "CommandList";
-var CommandEmpty = React38.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx27("ds-command__empty", className), ...props })
+var CommandEmpty = React39.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-command__empty", className), ...props })
 );
 CommandEmpty.displayName = "CommandEmpty";
-var CommandGroup = React38.forwardRef(
-  ({ className, heading, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, className: clsx27("ds-command__group", className), ...props, children: [
+var CommandGroup = React39.forwardRef(
+  ({ className, heading, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, className: clsx28("ds-command__group", className), ...props, children: [
     heading && /* @__PURE__ */ jsx("div", { className: "ds-command__group-heading", children: heading }),
     children
   ] })
 );
 CommandGroup.displayName = "CommandGroup";
-var CommandItem = React38.forwardRef(
+var CommandItem = React39.forwardRef(
   ({ className, onSelect, onClick, onKeyDown, onPointerEnter, id: externalId, ...props }, ref) => {
-    const generatedId = React38.useId();
+    const generatedId = React39.useId();
     const { activeId, setActiveId } = useCommandContext();
     const itemId = externalId || generatedId;
     const isActive = activeId === itemId;
@@ -2655,7 +2780,7 @@ var CommandItem = React38.forwardRef(
         tabIndex: 0,
         "aria-selected": isActive,
         "data-active": isActive || void 0,
-        className: clsx27("ds-command__item", className),
+        className: clsx28("ds-command__item", className),
         onClick: handleClick,
         onKeyDown: handleKeyDown,
         onPointerEnter: handlePointerEnter,
@@ -2665,7 +2790,7 @@ var CommandItem = React38.forwardRef(
   }
 );
 CommandItem.displayName = "CommandItem";
-var CommandSeparator = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx27("ds-command__separator", className), ...props }));
+var CommandSeparator = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-command__separator", className), ...props }));
 CommandSeparator.displayName = "CommandSeparator";
 var SIZE_CLASSES = {
   sm: "ds-dialog__content--sm",
@@ -2682,7 +2807,7 @@ var CommandDialog = ({
 }) => /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
   DialogContent,
   {
-    className: clsx27("ds-command-dialog", SIZE_CLASSES[size], className),
+    className: clsx28("ds-command-dialog", SIZE_CLASSES[size], className),
     children: [
       /* @__PURE__ */ jsx(DialogTitle, { className: "ds-command-dialog__sr-title", children: title }),
       children
@@ -2690,19 +2815,19 @@ var CommandDialog = ({
   }
 ) });
 CommandDialog.displayName = "CommandDialog";
-var DrawerContext = React38.createContext(void 0);
+var DrawerContext = React39.createContext(void 0);
 function useDrawerContext() {
-  const ctx = React38.useContext(DrawerContext);
+  const ctx = React39.useContext(DrawerContext);
   if (!ctx) {
     throw new Error("Drawer compound components must be used within a <Drawer> parent.");
   }
   return ctx;
 }
 var Drawer = ({ open: controlledOpen, onOpenChange, children }) => {
-  const [uncontrolledOpen, setUncontrolledOpen] = React38.useState(false);
+  const [uncontrolledOpen, setUncontrolledOpen] = React39.useState(false);
   const isControlled = controlledOpen !== void 0;
   const open = isControlled ? controlledOpen : uncontrolledOpen;
-  const handleOpenChange = React38.useCallback(
+  const handleOpenChange = React39.useCallback(
     (next) => {
       if (!isControlled) {
         setUncontrolledOpen(next);
@@ -2714,7 +2839,7 @@ var Drawer = ({ open: controlledOpen, onOpenChange, children }) => {
   return /* @__PURE__ */ jsx(DrawerContext.Provider, { value: { open, onOpenChange: handleOpenChange }, children });
 };
 Drawer.displayName = "Drawer";
-var DrawerTrigger = React38.forwardRef(({ onClick, ...props }, ref) => {
+var DrawerTrigger = React39.forwardRef(({ onClick, ...props }, ref) => {
   const { onOpenChange } = useDrawerContext();
   const handleClick = (e) => {
     onOpenChange(true);
@@ -2723,7 +2848,7 @@ var DrawerTrigger = React38.forwardRef(({ onClick, ...props }, ref) => {
   return /* @__PURE__ */ jsx("button", { ref, type: "button", onClick: handleClick, ...props });
 });
 DrawerTrigger.displayName = "DrawerTrigger";
-var DrawerClose = React38.forwardRef(({ onClick, ...props }, ref) => {
+var DrawerClose = React39.forwardRef(({ onClick, ...props }, ref) => {
   const { onOpenChange } = useDrawerContext();
   const handleClick = (e) => {
     onOpenChange(false);
@@ -2732,7 +2857,7 @@ var DrawerClose = React38.forwardRef(({ onClick, ...props }, ref) => {
   return /* @__PURE__ */ jsx("button", { ref, type: "button", onClick: handleClick, ...props });
 });
 DrawerClose.displayName = "DrawerClose";
-var DrawerContent = React38.forwardRef(
+var DrawerContent = React39.forwardRef(
   ({ className, children, ...props }, ref) => {
     const { open, onOpenChange } = useDrawerContext();
     if (!open) return null;
@@ -2751,7 +2876,7 @@ var DrawerContent = React38.forwardRef(
           {
             ref,
             role: "dialog",
-            className: clsx27("ds-drawer__content", className),
+            className: clsx28("ds-drawer__content", className),
             ...props,
             children: [
               /* @__PURE__ */ jsx("div", { className: "ds-drawer__handle", "aria-hidden": "true", children: /* @__PURE__ */ jsx("div", { className: "ds-drawer__handle-bar" }) }),
@@ -2765,16 +2890,16 @@ var DrawerContent = React38.forwardRef(
   }
 );
 DrawerContent.displayName = "DrawerContent";
-var DrawerHeader = React38.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx27("ds-drawer__header", className), ...props })
+var DrawerHeader = React39.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-drawer__header", className), ...props })
 );
 DrawerHeader.displayName = "DrawerHeader";
-var DrawerTitle = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("h2", { ref, className: clsx27("ds-drawer__title", className), ...props }));
+var DrawerTitle = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("h2", { ref, className: clsx28("ds-drawer__title", className), ...props }));
 DrawerTitle.displayName = "DrawerTitle";
-var DrawerDescription = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: clsx27("ds-drawer__description", className), ...props }));
+var DrawerDescription = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: clsx28("ds-drawer__description", className), ...props }));
 DrawerDescription.displayName = "DrawerDescription";
-var DrawerFooter = React38.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx27("ds-drawer__footer", className), ...props })
+var DrawerFooter = React39.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-drawer__footer", className), ...props })
 );
 DrawerFooter.displayName = "DrawerFooter";
 var DEFAULT_WEEKDAY_LABELS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
@@ -2821,13 +2946,13 @@ function getCalendarGrid(year, month) {
   }
   return weeks;
 }
-var Calendar = React38.forwardRef(
+var Calendar = React39.forwardRef(
   ({ className, selected, onSelect, month, onMonthChange, labels, ...props }, ref) => {
     const weekdayLabels = labels?.weekdays ?? DEFAULT_WEEKDAY_LABELS;
     const monthNames = labels?.months ?? DEFAULT_MONTH_NAMES;
     const formatDayLabel = labels?.formatDayLabel ?? ((d) => d.toDateString());
     const today = /* @__PURE__ */ new Date();
-    const [internalMonth, setInternalMonth] = React38.useState(
+    const [internalMonth, setInternalMonth] = React39.useState(
       () => month ?? selected ?? /* @__PURE__ */ new Date()
     );
     const displayedMonth = month ?? internalMonth;
@@ -2845,7 +2970,7 @@ var Calendar = React38.forwardRef(
     const handleDayClick = (date) => {
       onSelect?.(date);
     };
-    return /* @__PURE__ */ jsxs("div", { ref, className: clsx27("ds-calendar", className), ...props, children: [
+    return /* @__PURE__ */ jsxs("div", { ref, className: clsx28("ds-calendar", className), ...props, children: [
       /* @__PURE__ */ jsxs("div", { className: "ds-calendar__header", children: [
         /* @__PURE__ */ jsx(
           "button",
@@ -2909,7 +3034,7 @@ var Calendar = React38.forwardRef(
             "button",
             {
               type: "button",
-              className: clsx27(
+              className: clsx28(
                 "ds-calendar__day",
                 isSelected && "ds-calendar__day--selected",
                 isToday && "ds-calendar__day--today",
@@ -2927,14 +3052,14 @@ var Calendar = React38.forwardRef(
   }
 );
 Calendar.displayName = "Calendar";
-var InputOTPContext = React38.createContext({
+var InputOTPContext = React39.createContext({
   value: "",
   activeIndex: -1
 });
-var InputOTP = React38.forwardRef(
+var InputOTP = React39.forwardRef(
   ({ className, length = 6, value = "", onChange, children, "aria-label": ariaLabel = "One-time password", ...props }, ref) => {
-    const inputRef = React38.useRef(null);
-    const [activeIndex, setActiveIndex] = React38.useState(-1);
+    const inputRef = React39.useRef(null);
+    const [activeIndex, setActiveIndex] = React39.useState(-1);
     const handleChange = (e) => {
       const newValue = e.target.value.replace(/[^0-9]/g, "").slice(0, length);
       onChange?.(newValue);
@@ -2953,7 +3078,7 @@ var InputOTP = React38.forwardRef(
     const handleContainerClick = () => {
       inputRef.current?.focus();
     };
-    const contextValue = React38.useMemo(
+    const contextValue = React39.useMemo(
       () => ({ value, activeIndex }),
       [value, activeIndex]
     );
@@ -2961,7 +3086,7 @@ var InputOTP = React38.forwardRef(
       "div",
       {
         ref,
-        className: clsx27("ds-input-otp", className),
+        className: clsx28("ds-input-otp", className),
         onClick: handleContainerClick,
         ...props,
         children: [
@@ -2990,13 +3115,13 @@ var InputOTP = React38.forwardRef(
   }
 );
 InputOTP.displayName = "InputOTP";
-var InputOTPGroup = React38.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx("div", { ref, className: clsx27("ds-input-otp__group", className), ...props });
+var InputOTPGroup = React39.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-input-otp__group", className), ...props });
 });
 InputOTPGroup.displayName = "InputOTPGroup";
-var InputOTPSlot = React38.forwardRef(
+var InputOTPSlot = React39.forwardRef(
   ({ className, index, ...props }, ref) => {
-    const { value, activeIndex } = React38.useContext(InputOTPContext);
+    const { value, activeIndex } = React39.useContext(InputOTPContext);
     const char = value[index] ?? "";
     const isActive = activeIndex === index;
     const isFilled = char !== "";
@@ -3004,7 +3129,7 @@ var InputOTPSlot = React38.forwardRef(
       "div",
       {
         ref,
-        className: clsx27(
+        className: clsx28(
           "ds-input-otp__slot",
           isActive && "ds-input-otp__slot--active",
           isFilled && "ds-input-otp__slot--filled",
@@ -3017,8 +3142,8 @@ var InputOTPSlot = React38.forwardRef(
   }
 );
 InputOTPSlot.displayName = "InputOTPSlot";
-var InputOTPSeparator = React38.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx("div", { ref, className: clsx27("ds-input-otp__separator", className), role: "separator", ...props, children: /* @__PURE__ */ jsx(
+var InputOTPSeparator = React39.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-input-otp__separator", className), role: "separator", ...props, children: /* @__PURE__ */ jsx(
     "svg",
     {
       width: "8",
@@ -3030,33 +3155,33 @@ var InputOTPSeparator = React38.forwardRef(({ className, ...props }, ref) => {
   ) });
 });
 InputOTPSeparator.displayName = "InputOTPSeparator";
-var ContextMenuContext = React38.createContext({
+var ContextMenuContext = React39.createContext({
   open: false,
   position: { x: 0, y: 0 },
   onClose: () => {
   }
 });
 function ContextMenu({ children }) {
-  const [open, setOpen] = React38.useState(false);
-  const [position, setPosition] = React38.useState({ x: 0, y: 0 });
-  const handleOpen = React38.useCallback((x, y) => {
+  const [open, setOpen] = React39.useState(false);
+  const [position, setPosition] = React39.useState({ x: 0, y: 0 });
+  const handleOpen = React39.useCallback((x, y) => {
     setPosition({ x, y });
     setOpen(true);
   }, []);
-  const handleClose = React38.useCallback(() => {
+  const handleClose = React39.useCallback(() => {
     setOpen(false);
   }, []);
-  const contextValue = React38.useMemo(
+  const contextValue = React39.useMemo(
     () => ({ open, position, onClose: handleClose }),
     [open, position, handleClose]
   );
   return /* @__PURE__ */ jsx(ContextMenuInternalContext.Provider, { value: { onOpen: handleOpen }, children: /* @__PURE__ */ jsx(ContextMenuContext.Provider, { value: contextValue, children }) });
 }
 ContextMenu.displayName = "ContextMenu";
-var ContextMenuInternalContext = React38.createContext({ onOpen: () => {
+var ContextMenuInternalContext = React39.createContext({ onOpen: () => {
 } });
-var ContextMenuTrigger = React38.forwardRef(({ className, onContextMenu, ...props }, ref) => {
-  const { onOpen } = React38.useContext(ContextMenuInternalContext);
+var ContextMenuTrigger = React39.forwardRef(({ className, onContextMenu, ...props }, ref) => {
+  const { onOpen } = React39.useContext(ContextMenuInternalContext);
   const handleContextMenu = (e) => {
     e.preventDefault();
     onOpen(e.clientX, e.clientY);
@@ -3066,17 +3191,17 @@ var ContextMenuTrigger = React38.forwardRef(({ className, onContextMenu, ...prop
     "div",
     {
       ref,
-      className: clsx27("ds-context-menu__trigger", className),
+      className: clsx28("ds-context-menu__trigger", className),
       onContextMenu: handleContextMenu,
       ...props
     }
   );
 });
 ContextMenuTrigger.displayName = "ContextMenuTrigger";
-var ContextMenuContent = React38.forwardRef(({ className, ...props }, ref) => {
-  const { open, position, onClose } = React38.useContext(ContextMenuContext);
-  const contentRef = React38.useRef(null);
-  const mergedRef = React38.useCallback(
+var ContextMenuContent = React39.forwardRef(({ className, ...props }, ref) => {
+  const { open, position, onClose } = React39.useContext(ContextMenuContext);
+  const contentRef = React39.useRef(null);
+  const mergedRef = React39.useCallback(
     (node) => {
       contentRef.current = node;
       if (typeof ref === "function") ref(node);
@@ -3084,7 +3209,7 @@ var ContextMenuContent = React38.forwardRef(({ className, ...props }, ref) => {
     },
     [ref]
   );
-  React38.useEffect(() => {
+  React39.useEffect(() => {
     if (!open) return;
     const handleClickOutside = (e) => {
       if (contentRef.current && !contentRef.current.contains(e.target)) {
@@ -3113,7 +3238,7 @@ var ContextMenuContent = React38.forwardRef(({ className, ...props }, ref) => {
       {
         ref: mergedRef,
         role: "menu",
-        className: clsx27("ds-context-menu__content", className),
+        className: clsx28("ds-context-menu__content", className),
         style: { top: position.y, left: position.x },
         ...props
       }
@@ -3122,9 +3247,9 @@ var ContextMenuContent = React38.forwardRef(({ className, ...props }, ref) => {
   );
 });
 ContextMenuContent.displayName = "ContextMenuContent";
-var ContextMenuItem = React38.forwardRef(
+var ContextMenuItem = React39.forwardRef(
   ({ className, onSelect, onClick, ...props }, ref) => {
-    const { onClose } = React38.useContext(ContextMenuContext);
+    const { onClose } = React39.useContext(ContextMenuContext);
     const handleClick = (e) => {
       onSelect?.();
       onClose();
@@ -3135,7 +3260,7 @@ var ContextMenuItem = React38.forwardRef(
       {
         ref,
         role: "menuitem",
-        className: clsx27("ds-context-menu__item", className),
+        className: clsx28("ds-context-menu__item", className),
         onClick: handleClick,
         ...props
       }
@@ -3143,45 +3268,45 @@ var ContextMenuItem = React38.forwardRef(
   }
 );
 ContextMenuItem.displayName = "ContextMenuItem";
-var ContextMenuSeparator = React38.forwardRef(({ className, ...props }, ref) => {
+var ContextMenuSeparator = React39.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
       ref,
       role: "separator",
-      className: clsx27("ds-context-menu__separator", className),
+      className: clsx28("ds-context-menu__separator", className),
       ...props
     }
   );
 });
 ContextMenuSeparator.displayName = "ContextMenuSeparator";
-var ContextMenuLabel = React38.forwardRef(({ className, ...props }, ref) => {
+var ContextMenuLabel = React39.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
       ref,
-      className: clsx27("ds-context-menu__label", className),
+      className: clsx28("ds-context-menu__label", className),
       ...props
     }
   );
 });
 ContextMenuLabel.displayName = "ContextMenuLabel";
-var FormFieldContext = React38.createContext(void 0);
+var FormFieldContext = React39.createContext(void 0);
 function useFormField() {
-  const ctx = React38.useContext(FormFieldContext);
+  const ctx = React39.useContext(FormFieldContext);
   if (!ctx) {
     throw new Error("useFormField must be used within a <FormField>");
   }
   return ctx;
 }
-var FormItemContext = React38.createContext(void 0);
+var FormItemContext = React39.createContext(void 0);
 function FormField({ name, children, value, onChange, onBlur, error }) {
-  const id = React38.useId();
-  const contextValue = React38.useMemo(
+  const id = React39.useId();
+  const contextValue = React39.useMemo(
     () => ({ id: `${id}-form-item`, name, error }),
     [id, name, error]
   );
-  const fieldProps = React38.useMemo(
+  const fieldProps = React39.useMemo(
     () => ({
       value: value ?? "",
       onChange: onChange ?? (() => {
@@ -3196,35 +3321,35 @@ function FormField({ name, children, value, onChange, onBlur, error }) {
   return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: contextValue, children: children(fieldProps) });
 }
 FormField.displayName = "FormField";
-var FormItem = React38.forwardRef(
+var FormItem = React39.forwardRef(
   ({ className, ...props }, ref) => {
-    const id = React38.useId();
-    const contextValue = React38.useMemo(() => ({ id }), [id]);
-    return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { ref, className: clsx27("ds-form__item", className), ...props }) });
+    const id = React39.useId();
+    const contextValue = React39.useMemo(() => ({ id }), [id]);
+    return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-form__item", className), ...props }) });
   }
 );
 FormItem.displayName = "FormItem";
-var FormLabel = React38.forwardRef(({ className, ...props }, ref) => {
-  const fieldCtx = React38.useContext(FormFieldContext);
+var FormLabel = React39.forwardRef(({ className, ...props }, ref) => {
+  const fieldCtx = React39.useContext(FormFieldContext);
   const hasError = !!fieldCtx?.error;
   return /* @__PURE__ */ jsx(
     "label",
     {
       ref,
       htmlFor: fieldCtx?.id,
-      className: clsx27("ds-form__label", hasError && "ds-form__label--error", className),
+      className: clsx28("ds-form__label", hasError && "ds-form__label--error", className),
       ...props
     }
   );
 });
 FormLabel.displayName = "FormLabel";
-var FormControl = React38.forwardRef(
+var FormControl = React39.forwardRef(
   ({ className, children, ...props }, ref) => {
-    const fieldCtx = React38.useContext(FormFieldContext);
+    const fieldCtx = React39.useContext(FormFieldContext);
     const descriptionId = fieldCtx ? `${fieldCtx.id}-description` : void 0;
     const messageId = fieldCtx ? `${fieldCtx.id}-message` : void 0;
     const hasError = !!fieldCtx?.error;
-    return /* @__PURE__ */ jsx("div", { ref, className: clsx27("ds-form__control", className), ...props, children: React38.isValidElement(children) ? React38.cloneElement(children, {
+    return /* @__PURE__ */ jsx("div", { ref, className: clsx28("ds-form__control", className), ...props, children: React39.isValidElement(children) ? React39.cloneElement(children, {
       id: fieldCtx?.id,
       "aria-describedby": descriptionId,
       "aria-invalid": hasError || void 0,
@@ -3233,21 +3358,21 @@ var FormControl = React38.forwardRef(
   }
 );
 FormControl.displayName = "FormControl";
-var FormDescription = React38.forwardRef(({ className, ...props }, ref) => {
-  const fieldCtx = React38.useContext(FormFieldContext);
+var FormDescription = React39.forwardRef(({ className, ...props }, ref) => {
+  const fieldCtx = React39.useContext(FormFieldContext);
   return /* @__PURE__ */ jsx(
     "p",
     {
       ref,
       id: fieldCtx ? `${fieldCtx.id}-description` : void 0,
-      className: clsx27("ds-form__description", className),
+      className: clsx28("ds-form__description", className),
       ...props
     }
   );
 });
 FormDescription.displayName = "FormDescription";
-var FormMessage = React38.forwardRef(({ className, children, ...props }, ref) => {
-  const fieldCtx = React38.useContext(FormFieldContext);
+var FormMessage = React39.forwardRef(({ className, children, ...props }, ref) => {
+  const fieldCtx = React39.useContext(FormFieldContext);
   const message = children ?? fieldCtx?.error;
   if (!message) return null;
   return /* @__PURE__ */ jsx(
@@ -3256,7 +3381,7 @@ var FormMessage = React38.forwardRef(({ className, children, ...props }, ref) =>
       ref,
       id: fieldCtx ? `${fieldCtx.id}-message` : void 0,
       role: "alert",
-      className: clsx27("ds-form__message", className),
+      className: clsx28("ds-form__message", className),
       ...props,
       children: message
     }
@@ -3322,7 +3447,7 @@ var Box = forwardRef(
       Component,
       {
         ref,
-        className: clsx27("ds-box", className),
+        className: clsx28("ds-box", className),
         style: { ...spacingStyles, ...style },
         ...domProps,
         children
@@ -3337,7 +3462,7 @@ var Stack = forwardRef(
       Box,
       {
         ref,
-        className: clsx27("ds-stack", direction === "row" && "ds-stack--horizontal", className),
+        className: clsx28("ds-stack", direction === "row" && "ds-stack--horizontal", className),
         style: {
           alignItems: align,
           justifyContent: justify === "between" ? "space-between" : justify,
@@ -3358,7 +3483,7 @@ var Grid = forwardRef(
       Box,
       {
         ref,
-        className: clsx27(
+        className: clsx28(
           "ds-grid",
           useColClass && `ds-grid--cols-${columns}`,
           fixed && "ds-grid--fixed",
@@ -3402,7 +3527,7 @@ var Container = forwardRef(
       Box,
       {
         ref,
-        className: clsx27("ds-container", className),
+        className: clsx28("ds-container", className),
         style: {
           maxWidth: resolvedMaxWidth,
           ...style
@@ -3419,7 +3544,7 @@ var Section = forwardRef(
       "section",
       {
         ref,
-        className: clsx27("ds-section-block", `ds-section-block--${padding}`, className),
+        className: clsx28("ds-section-block", `ds-section-block--${padding}`, className),
         ...props,
         children
       }
@@ -3429,17 +3554,17 @@ var Section = forwardRef(
 Section.displayName = "Section";
 var VisuallyHidden = forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx("span", { ref, className: clsx27("ds-visually-hidden", className), ...props });
+    return /* @__PURE__ */ jsx("span", { ref, className: clsx28("ds-visually-hidden", className), ...props });
   }
 );
 VisuallyHidden.displayName = "VisuallyHidden";
-var Tabs = React38.forwardRef(
+var Tabs = React39.forwardRef(
   ({ className, orientation = "horizontal", ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       Tabs$1.Root,
       {
         ref,
-        className: clsx27("ds-tabs", `ds-tabs--${orientation}`, className),
+        className: clsx28("ds-tabs", `ds-tabs--${orientation}`, className),
         orientation,
         ...props
       }
@@ -3447,21 +3572,21 @@ var Tabs = React38.forwardRef(
   }
 );
 Tabs.displayName = "Tabs";
-var TabsList = React38.forwardRef(
+var TabsList = React39.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Tabs$1.List, { ref, className: clsx27("ds-tabs__list", className), ...props });
+    return /* @__PURE__ */ jsx(Tabs$1.List, { ref, className: clsx28("ds-tabs__list", className), ...props });
   }
 );
 TabsList.displayName = "TabsList";
-var TabsTrigger = React38.forwardRef(
+var TabsTrigger = React39.forwardRef(
   ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Tabs$1.Tab, { ref, className: clsx27("ds-tabs__trigger", className), ...props, children });
+    return /* @__PURE__ */ jsx(Tabs$1.Tab, { ref, className: clsx28("ds-tabs__trigger", className), ...props, children });
   }
 );
 TabsTrigger.displayName = "TabsTrigger";
-var TabsContent = React38.forwardRef(
+var TabsContent = React39.forwardRef(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Tabs$1.Panel, { ref, className: clsx27("ds-tabs__content", className), ...props });
+    return /* @__PURE__ */ jsx(Tabs$1.Panel, { ref, className: clsx28("ds-tabs__content", className), ...props });
   }
 );
 TabsContent.displayName = "TabsContent";
@@ -4002,6 +4127,6 @@ var allMessages = {
   ...methodologyMessages
 };
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AppearancePanel, AppearanceProvider, AspectRatio, Avatar, AvatarFallback, AvatarImage, BREAKPOINTS, Badge, Box, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, COLORS, CONTAINER_SIZE_MAP, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, Container, ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuTrigger, DISTANCE, DSIntlProvider, DURATION, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, EASING, EmptyState, FONT_FAMILY, FONT_SIZE, FONT_WEIGHT, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Grid, Heading, HoverCard, HoverCardContent, HoverCardTrigger, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, LINE_HEIGHT, Label, MEDIA_QUERIES, MOTION, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverClose, PopoverContent, PopoverTrigger, Progress, Prose, RADIUS, Radio, RadioGroup, SHADOWS, SPACING, ScrollArea, ScrollBar, Section, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Skeleton, Slider, Stack, StatusBadge, Switch, TRANSITION, Tabs, TabsContent, TabsList, TabsTrigger, Text, TextArea, TextField, ToastContext, ToastItem, ToastProvider, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger, VARIANTS, VisuallyHidden, Z_INDEX, alertMessages, allMessages, appearanceMessages, authMessages, calendarMessages, carouselMessages, commonMessages, dialogMessages, extractSpacingStyles, formMessages, hexToRgb, initializeAppearance, methodologyMessages, navigationMessages, paginationMessages, prefersReducedMotion, reportMessages, resolveSpacing, toastMessages, useAppearance, useDateFormat, useFormField, useIsRTL, useLocale, useMessage, useNumberFormat, useRelativeTime, useTextDirection, useToast };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AppearancePanel, AppearanceProvider, AspectRatio, Avatar, AvatarFallback, AvatarImage, BREAKPOINTS, Badge, Box, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, COLORS, CONTAINER_SIZE_MAP, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, Container, ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuTrigger, DISTANCE, DSIntlProvider, DURATION, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, EASING, EmptyState, FONT_FAMILY, FONT_SIZE, FONT_WEIGHT, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Grid, Heading, HoverCard, HoverCardContent, HoverCardTrigger, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, LINE_HEIGHT, Label, MEDIA_QUERIES, MOTION, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverClose, PopoverContent, PopoverTrigger, Progress, Prose, RADIUS, Radio, RadioGroup, SHADOWS, SPACING, ScrollArea, ScrollBar, Section, Select, SelectContent, SelectGroup, SelectItem, SelectSeparator, SelectTrigger, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Skeleton, Slider, Stack, StatusBadge, Switch, TRANSITION, Tabs, TabsContent, TabsList, TabsTrigger, Text, TextArea, TextField, ToastContext, ToastItem, ToastProvider, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger, VARIANTS, VisuallyHidden, Z_INDEX, alertMessages, allMessages, appearanceMessages, authMessages, calendarMessages, carouselMessages, commonMessages, dialogMessages, extractSpacingStyles, formMessages, hexToRgb, initializeAppearance, methodologyMessages, navigationMessages, paginationMessages, prefersReducedMotion, reportMessages, resolveSpacing, toastMessages, useAppearance, useDateFormat, useFormField, useIsRTL, useLocale, useMessage, useNumberFormat, useRelativeTime, useTextDirection, useToast };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map