@salesmind-ai/design-system 0.3.1 → 0.3.2

package/dist/chunk-5LGDEZWY.cjs

@@ -0,0 +1,2434 @@
+'use strict';
+
+var chunkW2WTP6HS_cjs = require('./chunk-W2WTP6HS.cjs');
+var chunkMDB2WCRQ_cjs = require('./chunk-MDB2WCRQ.cjs');
+var React20 = require('react');
+var clsx18 = require('clsx');
+var jsxRuntime = require('react/jsx-runtime');
+var _switch = require('@base-ui/react/switch');
+var ReactDOM = require('react-dom');
+var reactSlot = require('@radix-ui/react-slot');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React20__default = /*#__PURE__*/_interopDefault(React20);
+var clsx18__default = /*#__PURE__*/_interopDefault(clsx18);
+var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
+
+var Card = React20__default.default.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx18__default.default("ds-card", className), ...props })
+);
+Card.displayName = "Card";
+var CardHeader = React20__default.default.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx18__default.default("ds-card__header", className), ...props })
+);
+CardHeader.displayName = "CardHeader";
+var CardTitle = React20__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("h3", { ref, className: clsx18__default.default("ds-card__title", className), ...props }));
+CardTitle.displayName = "CardTitle";
+var CardDescription = React20__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("p", { ref, className: clsx18__default.default("ds-card__description", className), ...props }));
+CardDescription.displayName = "CardDescription";
+var CardContent = React20__default.default.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx18__default.default("ds-card__content", className), ...props })
+);
+CardContent.displayName = "CardContent";
+var CardFooter = React20__default.default.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx18__default.default("ds-card__footer", className), ...props })
+);
+CardFooter.displayName = "CardFooter";
+var ButtonGroup = React20__default.default.forwardRef(
+  ({ orientation = "horizontal", fullWidth = false, size = "md", className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        className: clsx18__default.default(
+          "ds-button-group",
+          `ds-button-group--${orientation}`,
+          fullWidth && "ds-button-group--full-width",
+          className
+        ),
+        "data-size": size,
+        ...props,
+        children
+      }
+    );
+  }
+);
+ButtonGroup.displayName = "ButtonGroup";
+var TextArea = React20.forwardRef(
+  ({ className, label, error, helperText, id, ...props }, ref) => {
+    const generatedId = React20.useId();
+    const inputId = id || generatedId;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx18__default.default("ds-textarea", className), children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: inputId, className: "ds-textarea__label", children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-textarea__input-wrapper", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          id: inputId,
+          ref,
+          className: clsx18__default.default("ds-textarea__input", error && "ds-textarea__input--error"),
+          ...props
+        }
+      ) }),
+      helperText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx18__default.default("ds-textarea__helper", error && "ds-textarea__helper--error"), children: helperText })
+    ] });
+  }
+);
+TextArea.displayName = "TextArea";
+var RadioGroupContext = React20.createContext(null);
+var RadioGroup = React20.forwardRef(
+  ({
+    className,
+    name,
+    value,
+    onValueChange,
+    orientation = "vertical",
+    children,
+    ...props
+  }, ref) => {
+    const generatedName = React20.useId();
+    const groupName = name || generatedName;
+    return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupContext.Provider, { value: { name: groupName, value, onChange: onValueChange }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "radiogroup",
+        className: clsx18__default.default(
+          "ds-radio-group",
+          orientation === "horizontal" && "ds-radio-group--horizontal",
+          className
+        ),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+var Radio = React20.forwardRef(
+  ({ className, label, value, disabled, id, onChange, ...props }, ref) => {
+    const context = React20.useContext(RadioGroupContext);
+    const generatedId = React20.useId();
+    const radioId = id || generatedId;
+    const name = context?.name || props.name;
+    const isChecked = context?.value !== void 0 ? context.value === value : props.checked;
+    const handleChange = (e) => {
+      onChange?.(e);
+      context?.onChange?.(value);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        className: clsx18__default.default("ds-radio-wrapper", disabled && "ds-radio-wrapper--disabled", className),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref,
+              type: "radio",
+              className: "ds-radio-input",
+              id: radioId,
+              name,
+              value,
+              checked: isChecked,
+              onChange: handleChange,
+              disabled,
+              ...props
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx18__default.default("ds-radio", isChecked && "ds-radio--checked"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-radio__indicator" }) }),
+          label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-radio__label", children: label })
+        ]
+      }
+    );
+  }
+);
+Radio.displayName = "Radio";
+var Switch = React20__default.default.forwardRef(
+  ({ className, label, id, ...props }, ref) => {
+    const generatedId = React20__default.default.useId();
+    const switchId = id || generatedId;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx18__default.default("ds-switch-wrapper", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(_switch.Switch.Root, { id: switchId, ref, className: "ds-switch", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(_switch.Switch.Thumb, { className: "ds-switch__thumb" }) }),
+      label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: switchId, className: "ds-switch__label", children: label })
+    ] });
+  }
+);
+Switch.displayName = "Switch";
+var AccordionContext = React20__default.default.createContext(null);
+function useAccordionContext() {
+  const ctx = React20__default.default.useContext(AccordionContext);
+  if (!ctx) {
+    throw new Error("Accordion compound components must be used within <Accordion>");
+  }
+  return ctx;
+}
+var AccordionItemContext = React20__default.default.createContext(null);
+function useAccordionItemContext() {
+  const ctx = React20__default.default.useContext(AccordionItemContext);
+  if (!ctx) {
+    throw new Error("AccordionTrigger/AccordionContent must be used within <AccordionItem>");
+  }
+  return ctx;
+}
+var Accordion = React20__default.default.forwardRef(
+  ({ className, type = "single", defaultValue = [], collapsible: _collapsible, children, ...props }, ref) => {
+    const [openItems, setOpenItems] = React20__default.default.useState(
+      () => new Set(defaultValue)
+    );
+    const toggle = React20__default.default.useCallback(
+      (value) => {
+        setOpenItems((prev) => {
+          const next = new Set(prev);
+          if (next.has(value)) {
+            next.delete(value);
+          } else {
+            if (type === "single") {
+              next.clear();
+            }
+            next.add(value);
+          }
+          return next;
+        });
+      },
+      [type]
+    );
+    const contextValue = React20__default.default.useMemo(
+      () => ({ openItems, toggle }),
+      [openItems, toggle]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(AccordionContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx18__default.default("ds-accordion", className), ...props, children }) });
+  }
+);
+Accordion.displayName = "Accordion";
+var AccordionItem = React20__default.default.forwardRef(
+  ({ className, value, children, ...props }, ref) => {
+    const { openItems } = useAccordionContext();
+    const isOpen = openItems.has(value);
+    const contextValue = React20__default.default.useMemo(
+      () => ({ value, isOpen }),
+      [value, isOpen]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(AccordionItemContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: clsx18__default.default("ds-accordion__item", className),
+        "data-state": isOpen ? "open" : "closed",
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+AccordionItem.displayName = "AccordionItem";
+var AccordionTrigger = React20__default.default.forwardRef(({ className, children, ...props }, ref) => {
+  const { toggle } = useAccordionContext();
+  const { value, isOpen } = useAccordionItemContext();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: clsx18__default.default("ds-accordion__trigger", className),
+      "aria-expanded": isOpen,
+      onClick: () => toggle(value),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-accordion__trigger-text", children }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            className: "ds-accordion__chevron",
+            width: "16",
+            height: "16",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" })
+          }
+        )
+      ]
+    }
+  );
+});
+AccordionTrigger.displayName = "AccordionTrigger";
+var AccordionContent = React20__default.default.forwardRef(({ className, children, ...props }, ref) => {
+  const { isOpen } = useAccordionItemContext();
+  const contentRef = React20__default.default.useRef(null);
+  const [height, setHeight] = React20__default.default.useState(
+    isOpen ? void 0 : 0
+  );
+  React20__default.default.useEffect(() => {
+    const el = contentRef.current;
+    if (!el) return;
+    if (isOpen) {
+      const scrollHeight = el.scrollHeight;
+      setHeight(scrollHeight);
+      const timer = setTimeout(() => setHeight(void 0), 200);
+      return () => clearTimeout(timer);
+    } else {
+      const scrollHeight = el.scrollHeight;
+      setHeight(scrollHeight);
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setHeight(0);
+        });
+      });
+    }
+  }, [isOpen]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: contentRef,
+      className: clsx18__default.default("ds-accordion__content", className),
+      style: {
+        height: height !== void 0 ? `${height}px` : "auto"
+      },
+      hidden: !isOpen && height === 0,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: "ds-accordion__content-inner", children })
+    }
+  );
+});
+AccordionContent.displayName = "AccordionContent";
+var Label = React20__default.default.forwardRef(
+  ({ className, disabled, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "label",
+      {
+        ref,
+        className: clsx18__default.default("ds-label", disabled && "ds-label--disabled", className),
+        "data-disabled": disabled || void 0,
+        ...props
+      }
+    );
+  }
+);
+Label.displayName = "Label";
+var Skeleton = React20__default.default.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: clsx18__default.default("ds-skeleton", className),
+        ...props
+      }
+    );
+  }
+);
+Skeleton.displayName = "Skeleton";
+var Separator = React20__default.default.forwardRef(
+  ({ className, orientation = "horizontal", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "separator",
+        "aria-orientation": orientation,
+        className: clsx18__default.default(
+          "ds-separator",
+          `ds-separator--${orientation}`,
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Separator.displayName = "Separator";
+var SheetContext = React20__default.default.createContext(void 0);
+function useSheetContext() {
+  const ctx = React20__default.default.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] = React20__default.default.useState(false);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+  const handleOpenChange = React20__default.default.useCallback(
+    (next) => {
+      if (!isControlled) {
+        setUncontrolledOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(SheetContext.Provider, { value: { open, onOpenChange: handleOpenChange }, children });
+};
+Sheet.displayName = "Sheet";
+var SheetTrigger = React20__default.default.forwardRef(
+  ({ onClick, asChild = false, ...props }, ref) => {
+    const { onOpenChange } = useSheetContext();
+    const handleClick = (e) => {
+      onOpenChange(true);
+      onClick?.(e);
+    };
+    const Comp = asChild ? reactSlot.Slot : "button";
+    return /* @__PURE__ */ jsxRuntime.jsx(Comp, { ref, type: "button", onClick: handleClick, ...props });
+  }
+);
+SheetTrigger.displayName = "SheetTrigger";
+var SheetClose = React20__default.default.forwardRef(
+  ({ onClick, asChild = false, ...props }, ref) => {
+    const { onOpenChange } = useSheetContext();
+    const handleClick = (e) => {
+      onOpenChange(false);
+      onClick?.(e);
+    };
+    const Comp = asChild ? reactSlot.Slot : "button";
+    return /* @__PURE__ */ jsxRuntime.jsx(Comp, { ref, type: "button", onClick: handleClick, ...props });
+  }
+);
+SheetClose.displayName = "SheetClose";
+var SheetContent = React20__default.default.forwardRef(
+  ({ side = "right", className, children, ...props }, ref) => {
+    const { open, onOpenChange } = useSheetContext();
+    if (!open) return null;
+    return ReactDOM.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "ds-sheet__backdrop",
+            onClick: () => onOpenChange(false),
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref,
+            role: "dialog",
+            className: clsx18__default.default("ds-sheet__content", `ds-sheet__content--${side}`, className),
+            ...props,
+            children
+          }
+        )
+      ] }),
+      document.body
+    );
+  }
+);
+SheetContent.displayName = "SheetContent";
+var SheetHeader = React20__default.default.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx18__default.default("ds-sheet__header", className), ...props })
+);
+SheetHeader.displayName = "SheetHeader";
+var SheetTitle = React20__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("h2", { ref, className: clsx18__default.default("ds-sheet__title", className), ...props }));
+SheetTitle.displayName = "SheetTitle";
+var SheetDescription = React20__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("p", { ref, className: clsx18__default.default("ds-sheet__description", className), ...props }));
+SheetDescription.displayName = "SheetDescription";
+var SheetFooter = React20__default.default.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx18__default.default("ds-sheet__footer", className), ...props })
+);
+SheetFooter.displayName = "SheetFooter";
+var PopoverContext = React20__default.default.createContext(null);
+function usePopoverContext() {
+  const context = React20__default.default.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] = React20__default.default.useState(false);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+  const setOpen = React20__default.default.useCallback(
+    (value) => {
+      if (!isControlled) {
+        setUncontrolledOpen(value);
+      }
+      onOpenChange?.(value);
+    },
+    [isControlled, onOpenChange]
+  );
+  const toggle = React20__default.default.useCallback(() => {
+    setOpen(!open);
+  }, [open, setOpen]);
+  const contextValue = React20__default.default.useMemo(
+    () => ({ open, setOpen, toggle }),
+    [open, setOpen, toggle]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(PopoverContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-popover", children }) });
+};
+Popover.displayName = "Popover";
+var PopoverTrigger = React20__default.default.forwardRef(
+  ({ className, onClick, asChild = false, ...props }, ref) => {
+    const { toggle } = usePopoverContext();
+    const handleClick = (e) => {
+      toggle();
+      onClick?.(e);
+    };
+    const Comp = asChild ? reactSlot.Slot : "button";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Comp,
+      {
+        ref,
+        type: "button",
+        className: clsx18__default.default("ds-popover__trigger", className),
+        onClick: handleClick,
+        ...props
+      }
+    );
+  }
+);
+PopoverTrigger.displayName = "PopoverTrigger";
+var PopoverContent = React20__default.default.forwardRef(
+  ({ className, side = "bottom", align = "center", ...props }, ref) => {
+    const { open } = usePopoverContext();
+    if (!open) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: clsx18__default.default(
+          "ds-popover__content",
+          `ds-popover__content--${side}`,
+          `ds-popover__content--align-${align}`,
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+PopoverContent.displayName = "PopoverContent";
+var PopoverClose = React20__default.default.forwardRef(({ className, onClick, ...props }, ref) => {
+  const { setOpen } = usePopoverContext();
+  const handleClick = (e) => {
+    setOpen(false);
+    onClick?.(e);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: clsx18__default.default("ds-popover__close", className),
+      onClick: handleClick,
+      ...props
+    }
+  );
+});
+PopoverClose.displayName = "PopoverClose";
+var Progress = React20__default.default.forwardRef(
+  ({ className, value = 0, max = 100, ...props }, ref) => {
+    const percentage = max > 0 ? Math.min(100, Math.max(0, value / max * 100)) : 0;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "progressbar",
+        "aria-valuenow": value,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        className: clsx18__default.default("ds-progress", className),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "ds-progress__indicator",
+            style: { width: `${percentage}%` }
+          }
+        )
+      }
+    );
+  }
+);
+Progress.displayName = "Progress";
+var ScrollArea = React20__default.default.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx18__default.default("ds-scroll-area", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-scroll-area__viewport", children }) });
+  }
+);
+ScrollArea.displayName = "ScrollArea";
+var ScrollBar = React20__default.default.forwardRef(
+  ({ className, orientation = "vertical", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: clsx18__default.default(
+          "ds-scroll-area__scrollbar",
+          `ds-scroll-area__scrollbar--${orientation}`,
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+ScrollBar.displayName = "ScrollBar";
+var Toggle = React20__default.default.forwardRef(
+  ({
+    className,
+    pressed: controlledPressed,
+    onPressedChange,
+    variant = "default",
+    size = "md",
+    onClick,
+    ...props
+  }, ref) => {
+    const [uncontrolledPressed, setUncontrolledPressed] = React20__default.default.useState(false);
+    const isControlled = controlledPressed !== void 0;
+    const pressed = isControlled ? controlledPressed : uncontrolledPressed;
+    const handleClick = (e) => {
+      const next = !pressed;
+      if (!isControlled) {
+        setUncontrolledPressed(next);
+      }
+      onPressedChange?.(next);
+      onClick?.(e);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: clsx18__default.default(
+          "ds-toggle",
+          `ds-toggle--${variant}`,
+          `ds-toggle--${size}`,
+          className
+        ),
+        "aria-pressed": pressed,
+        "data-state": pressed ? "on" : "off",
+        onClick: handleClick,
+        ...props
+      }
+    );
+  }
+);
+Toggle.displayName = "Toggle";
+var CollapsibleContext = React20__default.default.createContext(null);
+function useCollapsibleContext() {
+  const context = React20__default.default.useContext(CollapsibleContext);
+  if (!context) {
+    throw new Error("Collapsible compound components must be used within <Collapsible>");
+  }
+  return context;
+}
+var Collapsible = React20__default.default.forwardRef(
+  ({ className, open: controlledOpen, onOpenChange, children, ...props }, ref) => {
+    const [uncontrolledOpen, setUncontrolledOpen] = React20__default.default.useState(false);
+    const isControlled = controlledOpen !== void 0;
+    const open = isControlled ? controlledOpen : uncontrolledOpen;
+    const toggle = React20__default.default.useCallback(() => {
+      const next = !open;
+      if (!isControlled) {
+        setUncontrolledOpen(next);
+      }
+      onOpenChange?.(next);
+    }, [open, isControlled, onOpenChange]);
+    const contextValue = React20__default.default.useMemo(
+      () => ({ open, toggle }),
+      [open, toggle]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: clsx18__default.default("ds-collapsible", className),
+        "data-state": open ? "open" : "closed",
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+Collapsible.displayName = "Collapsible";
+var CollapsibleTrigger = React20__default.default.forwardRef(({ className, onClick, ...props }, ref) => {
+  const { toggle } = useCollapsibleContext();
+  const handleClick = (e) => {
+    toggle();
+    onClick?.(e);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: clsx18__default.default("ds-collapsible__trigger", className),
+      onClick: handleClick,
+      ...props
+    }
+  );
+});
+CollapsibleTrigger.displayName = "CollapsibleTrigger";
+var CollapsibleContent = React20__default.default.forwardRef(({ className, children, ...props }, ref) => {
+  const { open } = useCollapsibleContext();
+  const contentRef = React20__default.default.useRef(null);
+  const [maxHeight, setMaxHeight] = React20__default.default.useState(
+    open ? void 0 : 0
+  );
+  React20__default.default.useEffect(() => {
+    const el = contentRef.current;
+    if (!el) return;
+    if (open) {
+      const scrollHeight = el.scrollHeight;
+      setMaxHeight(scrollHeight);
+      const timer = setTimeout(() => setMaxHeight(void 0), 200);
+      return () => clearTimeout(timer);
+    } else {
+      const scrollHeight = el.scrollHeight;
+      setMaxHeight(scrollHeight);
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setMaxHeight(0);
+        });
+      });
+    }
+  }, [open]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: contentRef,
+      className: clsx18__default.default("ds-collapsible__content", className),
+      "data-state": open ? "open" : "closed",
+      style: {
+        maxHeight: maxHeight !== void 0 ? `${maxHeight}px` : "none"
+      },
+      hidden: !open && maxHeight === 0,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: "ds-collapsible__content-inner", children })
+    }
+  );
+});
+CollapsibleContent.displayName = "CollapsibleContent";
+var HoverCardContext = React20__default.default.createContext(null);
+function useHoverCardContext() {
+  const context = React20__default.default.useContext(HoverCardContext);
+  if (!context) {
+    throw new Error("HoverCard compound components must be used within <HoverCard>");
+  }
+  return context;
+}
+var HoverCard = ({
+  openDelay = 200,
+  closeDelay = 100,
+  children
+}) => {
+  const [open, setOpen] = React20__default.default.useState(false);
+  const openTimerRef = React20__default.default.useRef();
+  const closeTimerRef = React20__default.default.useRef();
+  const onOpen = React20__default.default.useCallback(() => {
+    clearTimeout(closeTimerRef.current);
+    openTimerRef.current = setTimeout(() => setOpen(true), openDelay);
+  }, [openDelay]);
+  const onClose = React20__default.default.useCallback(() => {
+    clearTimeout(openTimerRef.current);
+    closeTimerRef.current = setTimeout(() => setOpen(false), closeDelay);
+  }, [closeDelay]);
+  React20__default.default.useEffect(() => {
+    return () => {
+      clearTimeout(openTimerRef.current);
+      clearTimeout(closeTimerRef.current);
+    };
+  }, []);
+  const contextValue = React20__default.default.useMemo(
+    () => ({ open, onOpen, onClose }),
+    [open, onOpen, onClose]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(HoverCardContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-hover-card", children }) });
+};
+HoverCard.displayName = "HoverCard";
+var HoverCardTrigger = React20__default.default.forwardRef(({ className, onMouseEnter, onMouseLeave, ...props }, ref) => {
+  const { onOpen, onClose } = useHoverCardContext();
+  const handleMouseEnter = (e) => {
+    onOpen();
+    onMouseEnter?.(e);
+  };
+  const handleMouseLeave = (e) => {
+    onClose();
+    onMouseLeave?.(e);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ref,
+      className: clsx18__default.default("ds-hover-card__trigger", className),
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      ...props
+    }
+  );
+});
+HoverCardTrigger.displayName = "HoverCardTrigger";
+var HoverCardContent = React20__default.default.forwardRef(
+  ({ className, side = "bottom", align = "center", onMouseEnter, onMouseLeave, ...props }, ref) => {
+    const { open, onOpen, onClose } = useHoverCardContext();
+    const handleMouseEnter = (e) => {
+      onOpen();
+      onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+      onClose();
+      onMouseLeave?.(e);
+    };
+    if (!open) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: clsx18__default.default(
+          "ds-hover-card__content",
+          `ds-hover-card__content--${side}`,
+          `ds-hover-card__content--align-${align}`,
+          className
+        ),
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        ...props
+      }
+    );
+  }
+);
+HoverCardContent.displayName = "HoverCardContent";
+var AspectRatio = React20__default.default.forwardRef(
+  ({ className, ratio = 1, style, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: clsx18__default.default("ds-aspect-ratio", className),
+        style: { ...style, paddingBottom: `${1 / ratio * 100}%` },
+        ...props,
+        children
+      }
+    );
+  }
+);
+AspectRatio.displayName = "AspectRatio";
+var Pagination = React20__default.default.forwardRef(
+  ({ className, "aria-label": ariaLabel = "pagination", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "nav",
+      {
+        ref,
+        role: "navigation",
+        "aria-label": ariaLabel,
+        className: clsx18__default.default("ds-pagination", className),
+        ...props
+      }
+    );
+  }
+);
+Pagination.displayName = "Pagination";
+var PaginationContent = React20__default.default.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "ul",
+    {
+      ref,
+      className: clsx18__default.default("ds-pagination__content", className),
+      ...props
+    }
+  );
+});
+PaginationContent.displayName = "PaginationContent";
+var PaginationItem = React20__default.default.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "li",
+    {
+      ref,
+      className: clsx18__default.default("ds-pagination__item", className),
+      ...props
+    }
+  );
+});
+PaginationItem.displayName = "PaginationItem";
+var PaginationLink = React20__default.default.forwardRef(({ className, isActive = false, size = "md", asChild = false, ...props }, ref) => {
+  const Comp = asChild ? reactSlot.Slot : "button";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      ref,
+      "aria-current": isActive ? "page" : void 0,
+      className: clsx18__default.default(
+        "ds-pagination__link",
+        `ds-pagination__link--${size}`,
+        isActive && "ds-pagination__link--active",
+        className
+      ),
+      ...props
+    }
+  );
+});
+PaginationLink.displayName = "PaginationLink";
+var PaginationPrevious = React20__default.default.forwardRef(({ className, label = "Previous", "aria-label": ariaLabel = "Go to previous page", ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    PaginationLink,
+    {
+      ref,
+      "aria-label": ariaLabel,
+      className: clsx18__default.default("ds-pagination__prev", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.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",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m15 18-6-6 6-6" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
+      ]
+    }
+  );
+});
+PaginationPrevious.displayName = "PaginationPrevious";
+var PaginationNext = React20__default.default.forwardRef(({ className, label = "Next", "aria-label": ariaLabel = "Go to next page", ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    PaginationLink,
+    {
+      ref,
+      "aria-label": ariaLabel,
+      className: clsx18__default.default("ds-pagination__next", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
+        /* @__PURE__ */ jsxRuntime.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",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m9 18 6-6-6-6" })
+          }
+        )
+      ]
+    }
+  );
+});
+PaginationNext.displayName = "PaginationNext";
+var PaginationEllipsis = React20__default.default.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ref,
+      "aria-hidden": "true",
+      className: clsx18__default.default("ds-pagination__ellipsis", className),
+      ...props,
+      children: "..."
+    }
+  );
+});
+PaginationEllipsis.displayName = "PaginationEllipsis";
+var levelToElement = {
+  display: "h1",
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6"
+};
+var Heading = React20__default.default.forwardRef(
+  ({ className, level = "h2", as, children, ...props }, ref) => {
+    const Comp = as ?? levelToElement[level];
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Comp,
+      {
+        ref,
+        className: clsx18__default.default("ds-heading", `ds-heading--${level}`, className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Heading.displayName = "Heading";
+var Text = React20__default.default.forwardRef(
+  ({ className, variant = "body", as = "p", children, ...props }, ref) => {
+    const Comp = as;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Comp,
+      {
+        ref,
+        className: clsx18__default.default("ds-text", `ds-text--${variant}`, className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Text.displayName = "Text";
+var Prose = React20__default.default.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: clsx18__default.default("ds-prose", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Prose.displayName = "Prose";
+var CarouselContext = React20__default.default.createContext(void 0);
+function useCarouselContext() {
+  const ctx = React20__default.default.useContext(CarouselContext);
+  if (!ctx) {
+    throw new Error("Carousel compound components must be used within a <Carousel> parent.");
+  }
+  return ctx;
+}
+var Carousel = React20__default.default.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const scrollRef = React20__default.default.useRef(null);
+    return /* @__PURE__ */ jsxRuntime.jsx(CarouselContext.Provider, { value: { scrollRef }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx18__default.default("ds-carousel", className), ...props, children }) });
+  }
+);
+Carousel.displayName = "Carousel";
+var CarouselContent = React20__default.default.forwardRef(({ className, ...props }, ref) => {
+  const { scrollRef } = useCarouselContext();
+  const mergedRef = React20__default.default.useCallback(
+    (node) => {
+      scrollRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [ref, scrollRef]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: mergedRef, className: clsx18__default.default("ds-carousel__content", className), ...props });
+});
+CarouselContent.displayName = "CarouselContent";
+var CarouselItem = React20__default.default.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx18__default.default("ds-carousel__item", className), ...props })
+);
+CarouselItem.displayName = "CarouselItem";
+var CarouselPrevious = React20__default.default.forwardRef(({ className, onClick, children, "aria-label": ariaLabel = "Previous slide", ...props }, ref) => {
+  const { scrollRef } = useCarouselContext();
+  const handleClick = (e) => {
+    const container = scrollRef.current;
+    if (container) {
+      const firstItem = container.querySelector(".ds-carousel__item");
+      const scrollAmount = firstItem ? firstItem.clientWidth : container.clientWidth;
+      container.scrollBy({ left: -scrollAmount, behavior: "smooth" });
+    }
+    onClick?.(e);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: clsx18__default.default("ds-carousel__prev", className),
+      "aria-label": ariaLabel,
+      onClick: handleClick,
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M10 12L6 8L10 4",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ) })
+    }
+  );
+});
+CarouselPrevious.displayName = "CarouselPrevious";
+var CarouselNext = React20__default.default.forwardRef(({ className, onClick, children, "aria-label": ariaLabel = "Next slide", ...props }, ref) => {
+  const { scrollRef } = useCarouselContext();
+  const handleClick = (e) => {
+    const container = scrollRef.current;
+    if (container) {
+      const firstItem = container.querySelector(".ds-carousel__item");
+      const scrollAmount = firstItem ? firstItem.clientWidth : container.clientWidth;
+      container.scrollBy({ left: scrollAmount, behavior: "smooth" });
+    }
+    onClick?.(e);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: clsx18__default.default("ds-carousel__next", className),
+      "aria-label": ariaLabel,
+      onClick: handleClick,
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M6 4L10 8L6 12",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ) })
+    }
+  );
+});
+CarouselNext.displayName = "CarouselNext";
+function mergeRefs(...refs) {
+  return (node) => {
+    refs.forEach((ref) => {
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    });
+  };
+}
+var CommandContext = React20__default.default.createContext(void 0);
+function useCommandContext() {
+  const ctx = React20__default.default.useContext(CommandContext);
+  if (!ctx) {
+    throw new Error("Command compound components must be used within a <Command> parent.");
+  }
+  return ctx;
+}
+function getOptionElements(listEl) {
+  if (!listEl) return [];
+  return Array.from(listEl.querySelectorAll('[role="option"]'));
+}
+var Command = React20__default.default.forwardRef(
+  ({ className, value: controlledValue, onValueChange, onKeyDown, children, ...props }, ref) => {
+    const [uncontrolledValue, setUncontrolledValue] = React20__default.default.useState("");
+    const [activeId, setActiveId] = React20__default.default.useState(null);
+    const listRef = React20__default.default.useRef(null);
+    const isControlled = controlledValue !== void 0;
+    const search = isControlled ? controlledValue : uncontrolledValue;
+    const inputId = React20__default.default.useId();
+    const listId = React20__default.default.useId();
+    const setSearch = React20__default.default.useCallback(
+      (next) => {
+        if (!isControlled) {
+          setUncontrolledValue(next);
+        }
+        onValueChange?.(next);
+      },
+      [isControlled, onValueChange]
+    );
+    React20__default.default.useEffect(() => {
+      const frame = requestAnimationFrame(() => {
+        const items = getOptionElements(listRef.current);
+        if (items.length > 0) {
+          setActiveId(items[0].id);
+        } else {
+          setActiveId(null);
+        }
+      });
+      return () => cancelAnimationFrame(frame);
+    }, [search]);
+    const handleKeyDown = React20__default.default.useCallback(
+      (e) => {
+        const items = getOptionElements(listRef.current);
+        if (items.length === 0) {
+          onKeyDown?.(e);
+          return;
+        }
+        const currentIndex = items.findIndex((el) => el.id === activeId);
+        switch (e.key) {
+          case "ArrowDown": {
+            e.preventDefault();
+            const nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+            setActiveId(items[nextIndex].id);
+            items[nextIndex].scrollIntoView?.({ block: "nearest" });
+            break;
+          }
+          case "ArrowUp": {
+            e.preventDefault();
+            const prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+            setActiveId(items[prevIndex].id);
+            items[prevIndex].scrollIntoView?.({ block: "nearest" });
+            break;
+          }
+          case "Home": {
+            e.preventDefault();
+            setActiveId(items[0].id);
+            items[0].scrollIntoView?.({ block: "nearest" });
+            break;
+          }
+          case "End": {
+            e.preventDefault();
+            const lastItem = items[items.length - 1];
+            setActiveId(lastItem.id);
+            lastItem.scrollIntoView?.({ block: "nearest" });
+            break;
+          }
+          case "Enter": {
+            const target = e.target;
+            if (target.getAttribute("role") === "option") break;
+            const activeEl = activeId ? document.getElementById(activeId) : null;
+            if (activeEl) {
+              e.preventDefault();
+              activeEl.click();
+            }
+            break;
+          }
+        }
+        onKeyDown?.(e);
+      },
+      [activeId, onKeyDown]
+    );
+    const ctx = React20__default.default.useMemo(
+      () => ({ search, setSearch, activeId, setActiveId, listRef, inputId, listId }),
+      [search, setSearch, activeId, inputId, listId]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(CommandContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: clsx18__default.default("ds-command", className),
+        onKeyDown: handleKeyDown,
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+Command.displayName = "Command";
+var CommandInput = React20__default.default.forwardRef(({ className, onChange, ...props }, ref) => {
+  const { search, setSearch, activeId, inputId, listId } = useCommandContext();
+  const handleChange = (e) => {
+    setSearch(e.target.value);
+    onChange?.(e);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-command__input-wrapper", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "svg",
+      {
+        className: "ds-command__input-icon",
+        width: "16",
+        height: "16",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        "aria-hidden": "true",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "7", cy: "7", r: "5", stroke: "currentColor", strokeWidth: "1.5" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              d: "M11 11L14 14",
+              stroke: "currentColor",
+              strokeWidth: "1.5",
+              strokeLinecap: "round"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ref,
+        id: inputId,
+        type: "text",
+        role: "combobox",
+        "aria-expanded": "true",
+        "aria-controls": listId,
+        "aria-activedescendant": activeId ?? void 0,
+        "aria-autocomplete": "list",
+        autoComplete: "off",
+        className: clsx18__default.default("ds-command__input", className),
+        value: search,
+        onChange: handleChange,
+        ...props
+      }
+    )
+  ] });
+});
+CommandInput.displayName = "CommandInput";
+var CommandList = React20__default.default.forwardRef(
+  ({ className, ...props }, ref) => {
+    const { listRef, listId } = useCommandContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: mergeRefs(ref, listRef),
+        id: listId,
+        role: "listbox",
+        className: clsx18__default.default("ds-command__list", className),
+        ...props
+      }
+    );
+  }
+);
+CommandList.displayName = "CommandList";
+var CommandEmpty = React20__default.default.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx18__default.default("ds-command__empty", className), ...props })
+);
+CommandEmpty.displayName = "CommandEmpty";
+var CommandGroup = React20__default.default.forwardRef(
+  ({ className, heading, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx18__default.default("ds-command__group", className), ...props, children: [
+    heading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-command__group-heading", children: heading }),
+    children
+  ] })
+);
+CommandGroup.displayName = "CommandGroup";
+var CommandItem = React20__default.default.forwardRef(
+  ({ className, onSelect, onClick, onKeyDown, onPointerEnter, id: externalId, ...props }, ref) => {
+    const generatedId = React20__default.default.useId();
+    const { activeId, setActiveId } = useCommandContext();
+    const itemId = externalId || generatedId;
+    const isActive = activeId === itemId;
+    const handleClick = (e) => {
+      onSelect?.();
+      onClick?.(e);
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter") {
+        onSelect?.();
+      }
+      onKeyDown?.(e);
+    };
+    const handlePointerEnter = (e) => {
+      setActiveId(itemId);
+      onPointerEnter?.(e);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        id: itemId,
+        role: "option",
+        tabIndex: 0,
+        "aria-selected": isActive,
+        "data-active": isActive || void 0,
+        className: clsx18__default.default("ds-command__item", className),
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        onPointerEnter: handlePointerEnter,
+        ...props
+      }
+    );
+  }
+);
+CommandItem.displayName = "CommandItem";
+var CommandSeparator = React20__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx18__default.default("ds-command__separator", className), ...props }));
+CommandSeparator.displayName = "CommandSeparator";
+var SIZE_CLASSES = {
+  sm: "ds-dialog__content--sm",
+  lg: "ds-dialog__content--lg",
+  xl: "ds-dialog__content--xl"
+};
+var CommandDialog = ({
+  open,
+  onOpenChange,
+  title = "Search",
+  size = "lg",
+  className,
+  children
+}) => /* @__PURE__ */ jsxRuntime.jsx(chunkW2WTP6HS_cjs.Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  chunkW2WTP6HS_cjs.DialogContent,
+  {
+    className: clsx18__default.default("ds-command-dialog", SIZE_CLASSES[size], className),
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(chunkW2WTP6HS_cjs.DialogTitle, { className: "ds-command-dialog__sr-title", children: title }),
+      children
+    ]
+  }
+) });
+CommandDialog.displayName = "CommandDialog";
+var DrawerContext = React20__default.default.createContext(void 0);
+function useDrawerContext() {
+  const ctx = React20__default.default.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] = React20__default.default.useState(false);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+  const handleOpenChange = React20__default.default.useCallback(
+    (next) => {
+      if (!isControlled) {
+        setUncontrolledOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(DrawerContext.Provider, { value: { open, onOpenChange: handleOpenChange }, children });
+};
+Drawer.displayName = "Drawer";
+var DrawerTrigger = React20__default.default.forwardRef(({ onClick, ...props }, ref) => {
+  const { onOpenChange } = useDrawerContext();
+  const handleClick = (e) => {
+    onOpenChange(true);
+    onClick?.(e);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("button", { ref, type: "button", onClick: handleClick, ...props });
+});
+DrawerTrigger.displayName = "DrawerTrigger";
+var DrawerClose = React20__default.default.forwardRef(({ onClick, ...props }, ref) => {
+  const { onOpenChange } = useDrawerContext();
+  const handleClick = (e) => {
+    onOpenChange(false);
+    onClick?.(e);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("button", { ref, type: "button", onClick: handleClick, ...props });
+});
+DrawerClose.displayName = "DrawerClose";
+var DrawerContent = React20__default.default.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { open, onOpenChange } = useDrawerContext();
+    if (!open) return null;
+    return ReactDOM.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "ds-drawer__backdrop",
+            onClick: () => onOpenChange(false),
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref,
+            role: "dialog",
+            className: clsx18__default.default("ds-drawer__content", className),
+            ...props,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-drawer__handle", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-drawer__handle-bar" }) }),
+              children
+            ]
+          }
+        )
+      ] }),
+      document.body
+    );
+  }
+);
+DrawerContent.displayName = "DrawerContent";
+var DrawerHeader = React20__default.default.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx18__default.default("ds-drawer__header", className), ...props })
+);
+DrawerHeader.displayName = "DrawerHeader";
+var DrawerTitle = React20__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("h2", { ref, className: clsx18__default.default("ds-drawer__title", className), ...props }));
+DrawerTitle.displayName = "DrawerTitle";
+var DrawerDescription = React20__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("p", { ref, className: clsx18__default.default("ds-drawer__description", className), ...props }));
+DrawerDescription.displayName = "DrawerDescription";
+var DrawerFooter = React20__default.default.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx18__default.default("ds-drawer__footer", className), ...props })
+);
+DrawerFooter.displayName = "DrawerFooter";
+var DEFAULT_WEEKDAY_LABELS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+var DEFAULT_MONTH_NAMES = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function getDaysInMonth(year, month) {
+  return new Date(year, month + 1, 0).getDate();
+}
+function getCalendarGrid(year, month) {
+  const firstDay = new Date(year, month, 1).getDay();
+  const daysInMonth = getDaysInMonth(year, month);
+  const daysInPrevMonth = getDaysInMonth(year, month - 1);
+  const days = [];
+  for (let i = firstDay - 1; i >= 0; i--) {
+    days.push(new Date(year, month - 1, daysInPrevMonth - i));
+  }
+  for (let d = 1; d <= daysInMonth; d++) {
+    days.push(new Date(year, month, d));
+  }
+  const remaining = 7 - days.length % 7;
+  if (remaining < 7) {
+    for (let d = 1; d <= remaining; d++) {
+      days.push(new Date(year, month + 1, d));
+    }
+  }
+  const weeks = [];
+  for (let i = 0; i < days.length; i += 7) {
+    weeks.push(days.slice(i, i + 7));
+  }
+  return weeks;
+}
+var Calendar = React20__default.default.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] = React20__default.default.useState(
+      () => month ?? selected ?? /* @__PURE__ */ new Date()
+    );
+    const displayedMonth = month ?? internalMonth;
+    const displayYear = displayedMonth.getFullYear();
+    const displayMonthIndex = displayedMonth.getMonth();
+    const weeks = getCalendarGrid(displayYear, displayMonthIndex);
+    const navigateMonth = (delta) => {
+      const next = new Date(displayYear, displayMonthIndex + delta, 1);
+      if (onMonthChange) {
+        onMonthChange(next);
+      } else {
+        setInternalMonth(next);
+      }
+    };
+    const handleDayClick = (date) => {
+      onSelect?.(date);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx18__default.default("ds-calendar", className), ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-calendar__header", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "ds-calendar__nav-button",
+            onClick: () => navigateMonth(-1),
+            "aria-label": labels?.previousMonth ?? "Previous month",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "15 18 9 12 15 6" })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-calendar__title", children: [
+          monthNames[displayMonthIndex],
+          " ",
+          displayYear
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "ds-calendar__nav-button",
+            onClick: () => navigateMonth(1),
+            "aria-label": labels?.nextMonth ?? "Next month",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                width: "16",
+                height: "16",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "9 18 15 12 9 6" })
+              }
+            )
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-calendar__grid", role: "grid", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-calendar__head-row", role: "row", children: weekdayLabels.map((wdLabel) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-calendar__head-cell", role: "columnheader", children: wdLabel }, wdLabel)) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-calendar__body", children: weeks.map((week, wi) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-calendar__row", role: "row", children: week.map((date, di) => {
+          const isOutside = date.getMonth() !== displayMonthIndex;
+          const isSelected = selected ? isSameDay(date, selected) : false;
+          const isToday = isSameDay(date, today);
+          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-calendar__cell", role: "gridcell", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: clsx18__default.default(
+                "ds-calendar__day",
+                isSelected && "ds-calendar__day--selected",
+                isToday && "ds-calendar__day--today",
+                isOutside && "ds-calendar__day--outside"
+              ),
+              onClick: () => handleDayClick(date),
+              tabIndex: isOutside ? -1 : 0,
+              "aria-label": formatDayLabel(date),
+              children: date.getDate()
+            }
+          ) }, di);
+        }) }, wi)) })
+      ] })
+    ] });
+  }
+);
+Calendar.displayName = "Calendar";
+var InputOTPContext = React20__default.default.createContext({
+  value: "",
+  activeIndex: -1
+});
+var InputOTP = React20__default.default.forwardRef(
+  ({ className, length = 6, value = "", onChange, children, "aria-label": ariaLabel = "One-time password", ...props }, ref) => {
+    const inputRef = React20__default.default.useRef(null);
+    const [activeIndex, setActiveIndex] = React20__default.default.useState(-1);
+    const handleChange = (e) => {
+      const newValue = e.target.value.replace(/[^0-9]/g, "").slice(0, length);
+      onChange?.(newValue);
+    };
+    const handleFocus = () => {
+      setActiveIndex(Math.min(value.length, length - 1));
+    };
+    const handleBlur = () => {
+      setActiveIndex(-1);
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Backspace" && value.length > 0) {
+        onChange?.(value.slice(0, -1));
+      }
+    };
+    const handleContainerClick = () => {
+      inputRef.current?.focus();
+    };
+    const contextValue = React20__default.default.useMemo(
+      () => ({ value, activeIndex }),
+      [value, activeIndex]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(InputOTPContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: clsx18__default.default("ds-input-otp", className),
+        onClick: handleContainerClick,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              inputMode: "numeric",
+              autoComplete: "one-time-code",
+              pattern: "[0-9]*",
+              maxLength: length,
+              value,
+              onChange: handleChange,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              onKeyDown: handleKeyDown,
+              className: "ds-input-otp__hidden-input",
+              "aria-label": ariaLabel
+            }
+          ),
+          children
+        ]
+      }
+    ) });
+  }
+);
+InputOTP.displayName = "InputOTP";
+var InputOTPGroup = React20__default.default.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx18__default.default("ds-input-otp__group", className), ...props });
+});
+InputOTPGroup.displayName = "InputOTPGroup";
+var InputOTPSlot = React20__default.default.forwardRef(
+  ({ className, index, ...props }, ref) => {
+    const { value, activeIndex } = React20__default.default.useContext(InputOTPContext);
+    const char = value[index] ?? "";
+    const isActive = activeIndex === index;
+    const isFilled = char !== "";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: clsx18__default.default(
+          "ds-input-otp__slot",
+          isActive && "ds-input-otp__slot--active",
+          isFilled && "ds-input-otp__slot--filled",
+          className
+        ),
+        ...props,
+        children: char
+      }
+    );
+  }
+);
+InputOTPSlot.displayName = "InputOTPSlot";
+var InputOTPSeparator = React20__default.default.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx18__default.default("ds-input-otp__separator", className), role: "separator", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: "8",
+      height: "8",
+      viewBox: "0 0 8 8",
+      fill: "currentColor",
+      children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "4", cy: "4", r: "2" })
+    }
+  ) });
+});
+InputOTPSeparator.displayName = "InputOTPSeparator";
+var ContextMenuContext = React20__default.default.createContext({
+  open: false,
+  position: { x: 0, y: 0 },
+  onClose: () => {
+  }
+});
+function ContextMenu({ children }) {
+  const [open, setOpen] = React20__default.default.useState(false);
+  const [position, setPosition] = React20__default.default.useState({ x: 0, y: 0 });
+  const handleOpen = React20__default.default.useCallback((x, y) => {
+    setPosition({ x, y });
+    setOpen(true);
+  }, []);
+  const handleClose = React20__default.default.useCallback(() => {
+    setOpen(false);
+  }, []);
+  const contextValue = React20__default.default.useMemo(
+    () => ({ open, position, onClose: handleClose }),
+    [open, position, handleClose]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(ContextMenuInternalContext.Provider, { value: { onOpen: handleOpen }, children: /* @__PURE__ */ jsxRuntime.jsx(ContextMenuContext.Provider, { value: contextValue, children }) });
+}
+ContextMenu.displayName = "ContextMenu";
+var ContextMenuInternalContext = React20__default.default.createContext({ onOpen: () => {
+} });
+var ContextMenuTrigger = React20__default.default.forwardRef(({ className, onContextMenu, ...props }, ref) => {
+  const { onOpen } = React20__default.default.useContext(ContextMenuInternalContext);
+  const handleContextMenu = (e) => {
+    e.preventDefault();
+    onOpen(e.clientX, e.clientY);
+    onContextMenu?.(e);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: clsx18__default.default("ds-context-menu__trigger", className),
+      onContextMenu: handleContextMenu,
+      ...props
+    }
+  );
+});
+ContextMenuTrigger.displayName = "ContextMenuTrigger";
+var ContextMenuContent = React20__default.default.forwardRef(({ className, ...props }, ref) => {
+  const { open, position, onClose } = React20__default.default.useContext(ContextMenuContext);
+  const contentRef = React20__default.default.useRef(null);
+  const mergedRef = React20__default.default.useCallback(
+    (node) => {
+      contentRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
+  React20__default.default.useEffect(() => {
+    if (!open) return;
+    const handleClickOutside = (e) => {
+      if (contentRef.current && !contentRef.current.contains(e.target)) {
+        onClose();
+      }
+    };
+    const handleEscape = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    const timer = setTimeout(() => {
+      document.addEventListener("mousedown", handleClickOutside);
+    }, 0);
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      clearTimeout(timer);
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [open, onClose]);
+  if (!open) return null;
+  return ReactDOM__default.default.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: mergedRef,
+        role: "menu",
+        className: clsx18__default.default("ds-context-menu__content", className),
+        style: { top: position.y, left: position.x },
+        ...props
+      }
+    ),
+    document.body
+  );
+});
+ContextMenuContent.displayName = "ContextMenuContent";
+var ContextMenuItem = React20__default.default.forwardRef(
+  ({ className, onSelect, onClick, ...props }, ref) => {
+    const { onClose } = React20__default.default.useContext(ContextMenuContext);
+    const handleClick = (e) => {
+      onSelect?.();
+      onClose();
+      onClick?.(e);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "menuitem",
+        className: clsx18__default.default("ds-context-menu__item", className),
+        onClick: handleClick,
+        ...props
+      }
+    );
+  }
+);
+ContextMenuItem.displayName = "ContextMenuItem";
+var ContextMenuSeparator = React20__default.default.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      role: "separator",
+      className: clsx18__default.default("ds-context-menu__separator", className),
+      ...props
+    }
+  );
+});
+ContextMenuSeparator.displayName = "ContextMenuSeparator";
+var ContextMenuLabel = React20__default.default.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: clsx18__default.default("ds-context-menu__label", className),
+      ...props
+    }
+  );
+});
+ContextMenuLabel.displayName = "ContextMenuLabel";
+var FormFieldContext = React20__default.default.createContext(void 0);
+function useFormField() {
+  const ctx = React20__default.default.useContext(FormFieldContext);
+  if (!ctx) {
+    throw new Error("useFormField must be used within a <FormField>");
+  }
+  return ctx;
+}
+var FormItemContext = React20__default.default.createContext(void 0);
+function FormField({ name, children, value, onChange, onBlur, error }) {
+  const id = React20__default.default.useId();
+  const contextValue = React20__default.default.useMemo(
+    () => ({ id: `${id}-form-item`, name, error }),
+    [id, name, error]
+  );
+  const fieldProps = React20__default.default.useMemo(
+    () => ({
+      value: value ?? "",
+      onChange: onChange ?? (() => {
+      }),
+      onBlur: onBlur ?? (() => {
+      }),
+      error,
+      id: `${id}-form-item`
+    }),
+    [value, onChange, onBlur, error, id]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(FormFieldContext.Provider, { value: contextValue, children: children(fieldProps) });
+}
+FormField.displayName = "FormField";
+var FormItem = React20__default.default.forwardRef(
+  ({ className, ...props }, ref) => {
+    const id = React20__default.default.useId();
+    const contextValue = React20__default.default.useMemo(() => ({ id }), [id]);
+    return /* @__PURE__ */ jsxRuntime.jsx(FormItemContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx18__default.default("ds-form__item", className), ...props }) });
+  }
+);
+FormItem.displayName = "FormItem";
+var FormLabel = React20__default.default.forwardRef(({ className, ...props }, ref) => {
+  const fieldCtx = React20__default.default.useContext(FormFieldContext);
+  const hasError = !!fieldCtx?.error;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "label",
+    {
+      ref,
+      htmlFor: fieldCtx?.id,
+      className: clsx18__default.default("ds-form__label", hasError && "ds-form__label--error", className),
+      ...props
+    }
+  );
+});
+FormLabel.displayName = "FormLabel";
+var FormControl = React20__default.default.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const fieldCtx = React20__default.default.useContext(FormFieldContext);
+    const descriptionId = fieldCtx ? `${fieldCtx.id}-description` : void 0;
+    const messageId = fieldCtx ? `${fieldCtx.id}-message` : void 0;
+    const hasError = !!fieldCtx?.error;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx18__default.default("ds-form__control", className), ...props, children: React20__default.default.isValidElement(children) ? React20__default.default.cloneElement(children, {
+      id: fieldCtx?.id,
+      "aria-describedby": descriptionId,
+      "aria-invalid": hasError || void 0,
+      "aria-errormessage": hasError ? messageId : void 0
+    }) : children });
+  }
+);
+FormControl.displayName = "FormControl";
+var FormDescription = React20__default.default.forwardRef(({ className, ...props }, ref) => {
+  const fieldCtx = React20__default.default.useContext(FormFieldContext);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      ref,
+      id: fieldCtx ? `${fieldCtx.id}-description` : void 0,
+      className: clsx18__default.default("ds-form__description", className),
+      ...props
+    }
+  );
+});
+FormDescription.displayName = "FormDescription";
+var FormMessage = React20__default.default.forwardRef(({ className, children, ...props }, ref) => {
+  const fieldCtx = React20__default.default.useContext(FormFieldContext);
+  const message = children ?? fieldCtx?.error;
+  if (!message) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      ref,
+      id: fieldCtx ? `${fieldCtx.id}-message` : void 0,
+      role: "alert",
+      className: clsx18__default.default("ds-form__message", className),
+      ...props,
+      children: message
+    }
+  );
+});
+FormMessage.displayName = "FormMessage";
+var MAX_RESPONSIVE_COLS = 6;
+var Grid = React20.forwardRef(
+  ({ columns, rows, align, justify, fixed, className, style, ...props }, ref) => {
+    const useColClass = typeof columns === "number" && columns >= 1 && columns <= MAX_RESPONSIVE_COLS;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      chunkMDB2WCRQ_cjs.Box,
+      {
+        ref,
+        className: clsx18__default.default(
+          "ds-grid",
+          useColClass && `ds-grid--cols-${columns}`,
+          fixed && "ds-grid--fixed",
+          className
+        ),
+        style: {
+          gridTemplateColumns: useColClass ? void 0 : typeof columns === "number" ? `repeat(${columns}, 1fr)` : columns,
+          gridTemplateRows: typeof rows === "number" ? `repeat(${rows}, 1fr)` : rows,
+          alignItems: align,
+          justifyItems: justify,
+          ...style
+        },
+        ...props
+      }
+    );
+  }
+);
+Grid.displayName = "Grid";
+var Section = React20.forwardRef(
+  ({ padding = "md", className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "section",
+      {
+        ref,
+        className: clsx18__default.default("ds-section-block", `ds-section-block--${padding}`, className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Section.displayName = "Section";
+var VisuallyHidden = React20.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: clsx18__default.default("ds-visually-hidden", className), ...props });
+  }
+);
+VisuallyHidden.displayName = "VisuallyHidden";
+var StatusBadge = React20__default.default.forwardRef(
+  ({ variant = "default", size = "md", dot = false, className, children }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        ref,
+        className: clsx18__default.default(
+          "ds-status-badge",
+          `ds-status-badge--${variant}`,
+          `ds-status-badge--${size}`,
+          dot && "ds-status-badge--dot",
+          className
+        ),
+        children: [
+          dot && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-status-badge__dot" }),
+          children
+        ]
+      }
+    );
+  }
+);
+StatusBadge.displayName = "StatusBadge";
+var DefaultIcons = {
+  info: /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+      ]
+    }
+  ),
+  success: /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }),
+        /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "22 4 12 14.01 9 11.01" })
+      ]
+    }
+  ),
+  warning: /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+      ]
+    }
+  ),
+  error: /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
+      ]
+    }
+  )
+};
+var Alert = React20__default.default.forwardRef(
+  ({ className, variant = "info", title, icon, children, ...props }, ref) => {
+    const renderedIcon = icon || DefaultIcons[variant];
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        role: "alert",
+        className: clsx18__default.default("ds-alert", `ds-alert--${variant}`, className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-alert__icon", "aria-hidden": "true", children: renderedIcon }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-alert__content", children: [
+            title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-alert__title", children: title }),
+            children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-alert__description", children })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Alert.displayName = "Alert";
+var ToastContext = React20.createContext(void 0);
+var useToast = () => {
+  const context = React20.useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+};
+var ToastItem = ({
+  title,
+  description,
+  variant = "info",
+  action,
+  onDismiss,
+  dismissLabel = "Close"
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx18__default.default("ds-toast-root", `ds-toast--${variant}`), "data-state": "open", role: "alert", children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-toast-title", children: title }),
+    description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-toast-description", children: description }),
+    action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-toast-action", children: action }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: onDismiss,
+        style: {
+          background: "transparent",
+          border: "none",
+          color: "var(--text-tertiary)",
+          cursor: "pointer",
+          padding: "4px",
+          marginLeft: "auto",
+          gridColumn: "action",
+          alignSelf: "start"
+        },
+        "aria-label": dismissLabel,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            width: "14",
+            height: "14",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+};
+var ToastProvider = ({ children }) => {
+  const [toasts, setToasts] = React20.useState([]);
+  const [mounted, setMounted] = React20.useState(false);
+  const idCounter = React20.useRef(0);
+  React20.useEffect(() => setMounted(true), []);
+  const removeToast = React20.useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  const addToast = React20.useCallback(
+    ({ duration = 5e3, ...props }) => {
+      const id = `toast-${++idCounter.current}`;
+      const newToast = { ...props, id, duration };
+      setToasts((prev) => [...prev, newToast]);
+      if (duration !== Infinity) {
+        setTimeout(() => {
+          removeToast(id);
+        }, duration);
+      }
+    },
+    [removeToast]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value: { addToast, removeToast }, children: [
+    children,
+    mounted && ReactDOM.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-toast-viewport", children: toasts.map((toast) => /* @__PURE__ */ jsxRuntime.jsx(ToastItem, { ...toast, onDismiss: () => removeToast(toast.id) }, toast.id)) }),
+      document.body
+    )
+  ] });
+};
+var EmptyState = React20__default.default.forwardRef(
+  ({ icon, title, description, action, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: clsx18__default.default("ds-empty-state", className), ...props, children: [
+      icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-empty-state__icon", children: icon }),
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "ds-empty-state__title", children: title }),
+      description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ds-empty-state__description", children: description }),
+      action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-empty-state__action", children: action })
+    ] });
+  }
+);
+EmptyState.displayName = "EmptyState";
+
+// src/tokens/colors.ts
+var COLORS = {
+  text: {
+    primary: "var(--text-primary)",
+    secondary: "var(--text-secondary)",
+    tertiary: "var(--text-tertiary)",
+    disabled: "var(--text-disabled)"
+  },
+  glass: {
+    base: "var(--glass-base)",
+    baseHover: "var(--glass-base-hover)",
+    baseActive: "var(--glass-base-active)",
+    backdrop: "var(--glass-backdrop)"
+  },
+  rim: {
+    top: "var(--rim-light-top)",
+    bottom: "var(--rim-light-bottom)"
+  },
+  brand: {
+    pink: "var(--brand-pink)",
+    yellow: "var(--brand-yellow)",
+    pinkGlow: "var(--brand-pink-glow)"
+  },
+  status: {
+    success: "var(--status-success)",
+    warning: "var(--status-warning)",
+    error: "var(--status-error)",
+    info: "var(--status-info)"
+  },
+  button: {
+    primaryBg: "var(--btn-primary-bg)",
+    primaryBgHover: "var(--btn-primary-bg-hover)",
+    secondaryBg: "var(--btn-secondary-bg)",
+    secondaryBgHover: "var(--btn-secondary-bg-hover)"
+  }
+};
+
+// src/tokens/typography.ts
+var FONT_FAMILY = {
+  sans: "var(--font-family)",
+  mono: "var(--font-family-mono)"
+};
+var FONT_SIZE = {
+  xs: "var(--font-size-xs)",
+  sm: "var(--font-size-sm)",
+  base: "var(--font-size-base)",
+  lg: "var(--font-size-lg)",
+  xl: "var(--font-size-xl)",
+  "2xl": "var(--font-size-2xl)",
+  "3xl": "var(--font-size-3xl)"
+};
+var FONT_WEIGHT = {
+  normal: "var(--font-weight-normal)",
+  medium: "var(--font-weight-medium)",
+  semibold: "var(--font-weight-semibold)",
+  bold: "var(--font-weight-bold)"
+};
+var LINE_HEIGHT = {
+  tight: "var(--line-height-tight)",
+  normal: "var(--line-height-normal)",
+  relaxed: "var(--line-height-relaxed)"
+};
+
+// src/tokens/radius.ts
+var RADIUS = {
+  panel: "var(--radius-panel)",
+  card: "var(--radius-card)",
+  button: "var(--radius-button)",
+  badge: "var(--radius-badge)",
+  pill: "var(--radius-pill)"
+};
+
+// src/tokens/shadows.ts
+var SHADOWS = {
+  glass: {
+    outer: "var(--glass-shadow-outer)",
+    inner: "var(--glass-shadow-inner)",
+    combined: "var(--glass-shadow-combined)",
+    elevated: "var(--glass-shadow-elevated)",
+    elevatedCombined: "var(--glass-shadow-elevated-combined)"
+  },
+  interactive: {
+    rest: "var(--shadow-interactive-rest)",
+    restSubtle: "var(--shadow-interactive-rest-subtle)",
+    restLight: "var(--shadow-interactive-rest-light)",
+    hover: "var(--shadow-interactive-hover)",
+    hoverSubtle: "var(--shadow-interactive-hover-subtle)",
+    active: "var(--shadow-interactive-active)"
+  }
+};
+
+// src/tokens/z-index.ts
+var Z_INDEX = {
+  void: "var(--z-void)",
+  glassPanel: "var(--z-glass-panel)",
+  ornament: "var(--z-ornament)",
+  dropdown: "var(--z-dropdown)",
+  modalBackdrop: "var(--z-modal-backdrop)",
+  modal: "var(--z-modal)",
+  tooltip: "var(--z-tooltip)"
+};
+
+// src/tokens/breakpoints.ts
+var BREAKPOINTS = {
+  "3xs": 320,
+  "2xs": 375,
+  xs: 480,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536,
+  "3xl": 1920,
+  "4xl": 2560,
+  "5xl": 3840
+};
+var MEDIA_QUERIES = {
+  "3xs": `(min-width: ${BREAKPOINTS["3xs"]}px)`,
+  "2xs": `(min-width: ${BREAKPOINTS["2xs"]}px)`,
+  xs: `(min-width: ${BREAKPOINTS.xs}px)`,
+  sm: `(min-width: ${BREAKPOINTS.sm}px)`,
+  md: `(min-width: ${BREAKPOINTS.md}px)`,
+  lg: `(min-width: ${BREAKPOINTS.lg}px)`,
+  xl: `(min-width: ${BREAKPOINTS.xl}px)`,
+  "2xl": `(min-width: ${BREAKPOINTS["2xl"]}px)`,
+  "3xl": `(min-width: ${BREAKPOINTS["3xl"]}px)`,
+  "4xl": `(min-width: ${BREAKPOINTS["4xl"]}px)`,
+  "5xl": `(min-width: ${BREAKPOINTS["5xl"]}px)`
+};
+
+exports.Accordion = Accordion;
+exports.AccordionContent = AccordionContent;
+exports.AccordionItem = AccordionItem;
+exports.AccordionTrigger = AccordionTrigger;
+exports.Alert = Alert;
+exports.AspectRatio = AspectRatio;
+exports.BREAKPOINTS = BREAKPOINTS;
+exports.ButtonGroup = ButtonGroup;
+exports.COLORS = COLORS;
+exports.Calendar = Calendar;
+exports.Card = Card;
+exports.CardContent = CardContent;
+exports.CardDescription = CardDescription;
+exports.CardFooter = CardFooter;
+exports.CardHeader = CardHeader;
+exports.CardTitle = CardTitle;
+exports.Carousel = Carousel;
+exports.CarouselContent = CarouselContent;
+exports.CarouselItem = CarouselItem;
+exports.CarouselNext = CarouselNext;
+exports.CarouselPrevious = CarouselPrevious;
+exports.Collapsible = Collapsible;
+exports.CollapsibleContent = CollapsibleContent;
+exports.CollapsibleTrigger = CollapsibleTrigger;
+exports.Command = Command;
+exports.CommandDialog = CommandDialog;
+exports.CommandEmpty = CommandEmpty;
+exports.CommandGroup = CommandGroup;
+exports.CommandInput = CommandInput;
+exports.CommandItem = CommandItem;
+exports.CommandList = CommandList;
+exports.CommandSeparator = CommandSeparator;
+exports.ContextMenu = ContextMenu;
+exports.ContextMenuContent = ContextMenuContent;
+exports.ContextMenuItem = ContextMenuItem;
+exports.ContextMenuLabel = ContextMenuLabel;
+exports.ContextMenuSeparator = ContextMenuSeparator;
+exports.ContextMenuTrigger = ContextMenuTrigger;
+exports.Drawer = Drawer;
+exports.DrawerClose = DrawerClose;
+exports.DrawerContent = DrawerContent;
+exports.DrawerDescription = DrawerDescription;
+exports.DrawerFooter = DrawerFooter;
+exports.DrawerHeader = DrawerHeader;
+exports.DrawerTitle = DrawerTitle;
+exports.DrawerTrigger = DrawerTrigger;
+exports.EmptyState = EmptyState;
+exports.FONT_FAMILY = FONT_FAMILY;
+exports.FONT_SIZE = FONT_SIZE;
+exports.FONT_WEIGHT = FONT_WEIGHT;
+exports.FormControl = FormControl;
+exports.FormDescription = FormDescription;
+exports.FormField = FormField;
+exports.FormItem = FormItem;
+exports.FormLabel = FormLabel;
+exports.FormMessage = FormMessage;
+exports.Grid = Grid;
+exports.Heading = Heading;
+exports.HoverCard = HoverCard;
+exports.HoverCardContent = HoverCardContent;
+exports.HoverCardTrigger = HoverCardTrigger;
+exports.InputOTP = InputOTP;
+exports.InputOTPGroup = InputOTPGroup;
+exports.InputOTPSeparator = InputOTPSeparator;
+exports.InputOTPSlot = InputOTPSlot;
+exports.LINE_HEIGHT = LINE_HEIGHT;
+exports.Label = Label;
+exports.MEDIA_QUERIES = MEDIA_QUERIES;
+exports.Pagination = Pagination;
+exports.PaginationContent = PaginationContent;
+exports.PaginationEllipsis = PaginationEllipsis;
+exports.PaginationItem = PaginationItem;
+exports.PaginationLink = PaginationLink;
+exports.PaginationNext = PaginationNext;
+exports.PaginationPrevious = PaginationPrevious;
+exports.Popover = Popover;
+exports.PopoverClose = PopoverClose;
+exports.PopoverContent = PopoverContent;
+exports.PopoverTrigger = PopoverTrigger;
+exports.Progress = Progress;
+exports.Prose = Prose;
+exports.RADIUS = RADIUS;
+exports.Radio = Radio;
+exports.RadioGroup = RadioGroup;
+exports.SHADOWS = SHADOWS;
+exports.ScrollArea = ScrollArea;
+exports.ScrollBar = ScrollBar;
+exports.Section = Section;
+exports.Separator = Separator;
+exports.Sheet = Sheet;
+exports.SheetClose = SheetClose;
+exports.SheetContent = SheetContent;
+exports.SheetDescription = SheetDescription;
+exports.SheetFooter = SheetFooter;
+exports.SheetHeader = SheetHeader;
+exports.SheetTitle = SheetTitle;
+exports.SheetTrigger = SheetTrigger;
+exports.Skeleton = Skeleton;
+exports.StatusBadge = StatusBadge;
+exports.Switch = Switch;
+exports.Text = Text;
+exports.TextArea = TextArea;
+exports.ToastContext = ToastContext;
+exports.ToastItem = ToastItem;
+exports.ToastProvider = ToastProvider;
+exports.Toggle = Toggle;
+exports.VisuallyHidden = VisuallyHidden;
+exports.Z_INDEX = Z_INDEX;
+exports.useFormField = useFormField;
+exports.useToast = useToast;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-5LGDEZWY.cjs.map