silicaui-react 0.1.0

package/dist/index.js

@@ -0,0 +1,4687 @@
+import * as React74 from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Accordion as Accordion$1 } from '@base-ui-components/react/accordion';
+import { Slider as Slider$1 } from '@base-ui-components/react/slider';
+import { Toast } from '@base-ui-components/react/toast';
+import { NumberField as NumberField$1 } from '@base-ui-components/react/number-field';
+import { Dialog as Dialog$1 } from '@base-ui-components/react/dialog';
+import { Meter as Meter$1 } from '@base-ui-components/react/meter';
+import { ScrollArea as ScrollArea$1 } from '@base-ui-components/react/scroll-area';
+import { PreviewCard as PreviewCard$1 } from '@base-ui-components/react/preview-card';
+import { Toolbar as Toolbar$1 } from '@base-ui-components/react/toolbar';
+import { NavigationMenu as NavigationMenu$1 } from '@base-ui-components/react/navigation-menu';
+import { Menubar as Menubar$1 } from '@base-ui-components/react/menubar';
+import { Menu as Menu$1 } from '@base-ui-components/react/menu';
+import { ContextMenu as ContextMenu$1 } from '@base-ui-components/react/context-menu';
+import { ToggleGroup as ToggleGroup$1 } from '@base-ui-components/react/toggle-group';
+import { Toggle as Toggle$1 } from '@base-ui-components/react/toggle';
+import { Field as Field$1 } from '@base-ui-components/react/field';
+import { Form as Form$1 } from '@base-ui-components/react/form';
+import { Switch as Switch$1 } from '@base-ui-components/react/switch';
+import { Collapsible as Collapsible$1 } from '@base-ui-components/react/collapsible';
+import { AlertDialog as AlertDialog$1 } from '@base-ui-components/react/alert-dialog';
+import { Select as Select$1 } from '@base-ui-components/react/select';
+import { Combobox as Combobox$1 } from '@base-ui-components/react/combobox';
+import { Autocomplete as Autocomplete$1 } from '@base-ui-components/react/autocomplete';
+import { Popover as Popover$1 } from '@base-ui-components/react/popover';
+import { Tooltip as Tooltip$1 } from '@base-ui-components/react/tooltip';
+import { Tabs as Tabs$1 } from '@base-ui-components/react/tabs';
+
+// src/button.tsx
+
+// src/lib/cx.ts
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+
+// src/lib/merge-props.ts
+function mergeProps(ours, theirs) {
+  const merged = { ...ours, ...theirs };
+  merged.className = cx(ours.className, theirs.className);
+  if (ours.style || theirs.style) {
+    merged.style = { ...ours.style, ...theirs.style };
+  }
+  if (ours.children != null) {
+    merged.children = ours.children;
+  }
+  for (const key of Object.keys(theirs)) {
+    if (/^on[A-Z]/.test(key) && typeof theirs[key] === "function" && typeof ours[key] === "function") {
+      const a = ours[key];
+      const b = theirs[key];
+      merged[key] = (...args) => {
+        a(...args);
+        b(...args);
+      };
+    }
+  }
+  return merged;
+}
+var DEFAULT_CONFIG = { prefix: "" };
+var SilicaConfigContext = React74.createContext(DEFAULT_CONFIG);
+function SilicaProvider({ prefix = "", children }) {
+  const value = React74.useMemo(() => ({ prefix }), [prefix]);
+  return /* @__PURE__ */ jsx(SilicaConfigContext.Provider, { value, children });
+}
+function useSilicaConfig() {
+  return React74.useContext(SilicaConfigContext);
+}
+function useSilicaClass() {
+  const { prefix } = React74.useContext(SilicaConfigContext);
+  return React74.useCallback(
+    (name) => name ? `${prefix}${name}` : name,
+    [prefix]
+  );
+}
+var Button = React74.forwardRef(
+  function Button2({
+    color,
+    variant = "solid",
+    size = "md",
+    shape,
+    block,
+    wide,
+    active,
+    loading,
+    disabled,
+    iconStart,
+    iconEnd,
+    render,
+    className,
+    children,
+    type,
+    ...rest
+  }, ref) {
+    const sc = useSilicaClass();
+    const classes = cx(
+      sc("btn"),
+      color && sc(`btn-${color}`),
+      variant !== "solid" && sc(`btn-${variant}`),
+      size !== "md" && sc(`btn-${size}`),
+      shape && sc(`btn-${shape}`),
+      block && sc("btn-block"),
+      wide && sc("btn-wide"),
+      active && sc("btn-active"),
+      className
+    );
+    const isDisabled = Boolean(disabled) || Boolean(loading);
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      iconStart,
+      children,
+      iconEnd
+    ] });
+    if (render) {
+      const ownProps = {
+        ...rest,
+        className: classes,
+        children: content,
+        ref,
+        "aria-busy": loading || void 0,
+        "aria-disabled": isDisabled || void 0,
+        "data-disabled": isDisabled ? "" : void 0
+      };
+      return React74.cloneElement(
+        render,
+        mergeProps(ownProps, render.props)
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: type ?? "button",
+        className: classes,
+        disabled: isDisabled,
+        "aria-busy": loading || void 0,
+        ...rest,
+        children: content
+      }
+    );
+  }
+);
+var Badge = React74.forwardRef(
+  function Badge2({ color, variant = "solid", size = "md", render, className, children, ...rest }, ref) {
+    const sc = useSilicaClass();
+    const classes = cx(
+      sc("badge"),
+      color && sc(`badge-${color}`),
+      variant !== "solid" && sc(`badge-${variant}`),
+      size !== "md" && sc(`badge-${size}`),
+      className
+    );
+    if (render) {
+      const ownProps = {
+        ...rest,
+        className: classes,
+        children,
+        ref
+      };
+      return React74.cloneElement(
+        render,
+        mergeProps(ownProps, render.props)
+      );
+    }
+    return /* @__PURE__ */ jsx("span", { ref, className: classes, ...rest, children });
+  }
+);
+var Input = React74.forwardRef(
+  function Input2({ color, size = "md", className, type, ...rest }, ref) {
+    const sc = useSilicaClass();
+    const classes = cx(
+      sc("input"),
+      color && sc(`input-${color}`),
+      size !== "md" && sc(`input-${size}`),
+      className
+    );
+    return /* @__PURE__ */ jsx("input", { ref, type: type ?? "text", className: classes, ...rest });
+  }
+);
+var NativeSelect = React74.forwardRef(function NativeSelect2({ color, size = "md", className, children, ...rest }, ref) {
+  const sc = useSilicaClass();
+  const classes = cx(
+    sc("select"),
+    color && sc(`select-${color}`),
+    size !== "md" && sc(`select-${size}`),
+    className
+  );
+  return /* @__PURE__ */ jsx("select", { ref, className: classes, ...rest, children });
+});
+var Textarea = React74.forwardRef(
+  function Textarea2({ color, size = "md", className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    const classes = cx(
+      sc("textarea"),
+      color && sc(`textarea-${color}`),
+      size !== "md" && sc(`textarea-${size}`),
+      className
+    );
+    return /* @__PURE__ */ jsx("textarea", { ref, className: classes, ...rest });
+  }
+);
+var Card = React74.forwardRef(
+  function Card2({ className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx("div", { ref, className: cx(sc("card"), className), ...rest });
+  }
+);
+var CardBody = React74.forwardRef(
+  function CardBody2({ className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx("div", { ref, className: cx(sc("card-body"), className), ...rest });
+  }
+);
+var CardTitle = React74.forwardRef(
+  function CardTitle2({ className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx("div", { ref, className: cx(sc("card-title"), className), ...rest });
+  }
+);
+var CardActions = React74.forwardRef(
+  function CardActions2({ className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx("div", { ref, className: cx(sc("card-actions"), className), ...rest });
+  }
+);
+var Alert = React74.forwardRef(
+  function Alert2({ color, variant = "solid", size = "md", className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    const classes = cx(
+      sc("alert"),
+      color && sc(`alert-${color}`),
+      variant !== "solid" && sc(`alert-${variant}`),
+      size !== "md" && sc(`alert-${size}`),
+      className
+    );
+    return /* @__PURE__ */ jsx("div", { ref, role: "alert", className: classes, ...rest });
+  }
+);
+var AlertContent = React74.forwardRef(function AlertContent2({ className, ...rest }, ref) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx("div", { ref, className: cx(sc("alert-content"), className), ...rest });
+});
+var AlertTitle = React74.forwardRef(function AlertTitle2({ className, ...rest }, ref) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx("div", { ref, className: cx(sc("alert-title"), className), ...rest });
+});
+var AlertDescription = React74.forwardRef(function AlertDescription2({ className, ...rest }, ref) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cx(sc("alert-description"), className),
+      ...rest
+    }
+  );
+});
+var AlertActions = React74.forwardRef(function AlertActions2({ className, ...rest }, ref) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx("div", { ref, className: cx(sc("alert-actions"), className), ...rest });
+});
+var Progress = React74.forwardRef(
+  function Progress2({ color, size = "md", value, max = 100, className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    const indeterminate = value == null;
+    const pct = indeterminate || max <= 0 ? 0 : Math.max(0, Math.min(100, value / max * 100));
+    const classes = cx(
+      sc("progress"),
+      color && sc(`progress-${color}`),
+      size !== "md" && sc(`progress-${size}`),
+      indeterminate && sc("progress-indeterminate"),
+      className
+    );
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "progressbar",
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-valuenow": indeterminate ? void 0 : value,
+        className: classes,
+        ...rest,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cx(sc("progress-bar")),
+            style: indeterminate ? void 0 : { width: `${pct}%` }
+          }
+        )
+      }
+    );
+  }
+);
+var Avatar = React74.forwardRef(
+  function Avatar2({ color, size = "md", shape = "circle", ring = false, status, src, alt, className, children, ...rest }, ref) {
+    const sc = useSilicaClass();
+    const [failed, setFailed] = React74.useState(false);
+    React74.useEffect(() => setFailed(false), [src]);
+    const showImg = Boolean(src) && !failed;
+    const classes = cx(
+      sc("avatar"),
+      color && sc(`avatar-${color}`),
+      size !== "md" && sc(`avatar-${size}`),
+      shape === "rounded" && sc("avatar-rounded"),
+      ring && sc("avatar-ring"),
+      status && sc(`avatar-${status}`),
+      className
+    );
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: classes,
+        role: !showImg && alt ? "img" : void 0,
+        "aria-label": !showImg ? alt : void 0,
+        ...rest,
+        children: showImg ? /* @__PURE__ */ jsx("img", { src, alt: alt ?? "", onError: () => setFailed(true) }) : children
+      }
+    );
+  }
+);
+var AvatarGroup = React74.forwardRef(function AvatarGroup2({ className, ...rest }, ref) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx("span", { ref, className: cx(sc("avatar-group"), className), ...rest });
+});
+var Skeleton = React74.forwardRef(
+  function Skeleton2({ shape = "block", className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    const classes = cx(
+      sc("skeleton"),
+      shape === "circle" && sc("skeleton-circle"),
+      shape === "text" && sc("skeleton-text"),
+      className
+    );
+    return /* @__PURE__ */ jsx("div", { ref, "aria-hidden": true, className: classes, ...rest });
+  }
+);
+var Table = React74.forwardRef(
+  function Table2({ zebra = false, hover = false, size = "md", className, wrapperClassName, ...rest }, ref) {
+    const sc = useSilicaClass();
+    const classes = cx(
+      sc("table"),
+      zebra && sc("table-zebra"),
+      hover && sc("table-hover"),
+      size !== "md" && sc(`table-${size}`),
+      className
+    );
+    return /* @__PURE__ */ jsx("div", { className: wrapperClassName, style: { overflowX: "auto" }, children: /* @__PURE__ */ jsx("table", { ref, className: classes, ...rest }) });
+  }
+);
+var Divider = React74.forwardRef(
+  function Divider2({ orientation = "horizontal", className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "separator",
+        className: cx(
+          sc("divider"),
+          orientation === "vertical" && sc("divider-vertical"),
+          className
+        ),
+        ...rest
+      }
+    );
+  }
+);
+var Kbd = React74.forwardRef(
+  function Kbd2({ size = "md", className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx(
+      "kbd",
+      {
+        ref,
+        className: cx(sc("kbd"), size !== "md" && sc(`kbd-${size}`), className),
+        ...rest
+      }
+    );
+  }
+);
+var Breadcrumb = React74.forwardRef(
+  function Breadcrumb2({ className, children, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx(
+      "nav",
+      {
+        ref,
+        "aria-label": "Breadcrumb",
+        className: cx(sc("breadcrumb"), className),
+        ...rest,
+        children: /* @__PURE__ */ jsx("ol", { children })
+      }
+    );
+  }
+);
+var Stats = React74.forwardRef(
+  function Stats2({ vertical = false, className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cx(sc("stats"), vertical && sc("stats-vertical"), className),
+        ...rest
+      }
+    );
+  }
+);
+var Stat = React74.forwardRef(
+  function Stat2({ className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx("div", { ref, className: cx(sc("stat"), className), ...rest });
+  }
+);
+var StatTitle = React74.forwardRef(function StatTitle2({ className, ...rest }, ref) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx("div", { ref, className: cx(sc("stat-title"), className), ...rest });
+});
+var StatValue = React74.forwardRef(function StatValue2({ className, ...rest }, ref) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx("div", { ref, className: cx(sc("stat-value"), className), ...rest });
+});
+var StatDesc = React74.forwardRef(function StatDesc2({ className, ...rest }, ref) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx("div", { ref, className: cx(sc("stat-desc"), className), ...rest });
+});
+var StatFigure = React74.forwardRef(function StatFigure2({ className, ...rest }, ref) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx("div", { ref, className: cx(sc("stat-figure"), className), ...rest });
+});
+var Steps = React74.forwardRef(
+  function Steps2({ className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx("ol", { ref, className: cx(sc("steps"), className), ...rest });
+  }
+);
+var Step = React74.forwardRef(
+  function Step2({ color, className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx(
+      "li",
+      {
+        ref,
+        className: cx(sc("step"), color && sc(`step-${color}`), className),
+        ...rest
+      }
+    );
+  }
+);
+var Join = React74.forwardRef(
+  function Join2({ orientation = "horizontal", className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cx(
+          sc("join"),
+          orientation === "vertical" && sc("join-vertical"),
+          className
+        ),
+        ...rest
+      }
+    );
+  }
+);
+var Menu = React74.forwardRef(
+  function Menu2({ className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx("ul", { ref, className: cx(sc("menu"), className), ...rest });
+  }
+);
+var MenuItem = React74.forwardRef(function MenuItem2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx("li", { ref, className, ...rest });
+});
+var MenuTitle = React74.forwardRef(function MenuTitle2({ className, ...rest }, ref) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx("li", { ref, className: cx(sc("menu-title"), className), ...rest });
+});
+var Collapse = React74.forwardRef(
+  function Collapse2({ ghost = false, className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx(
+      "details",
+      {
+        ref,
+        className: cx(sc("collapse"), ghost && sc("collapse-ghost"), className),
+        ...rest
+      }
+    );
+  }
+);
+var CollapseTitle = React74.forwardRef(function CollapseTitle2({ className, ...rest }, ref) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx("summary", { ref, className: cx(sc("collapse-title"), className), ...rest });
+});
+var CollapseContent = React74.forwardRef(function CollapseContent2({ className, ...rest }, ref) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx("div", { ref, className: cx(sc("collapse-content"), className), ...rest });
+});
+var Indicator = React74.forwardRef(
+  function Indicator2({ className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx("span", { ref, className: cx(sc("indicator"), className), ...rest });
+  }
+);
+var IndicatorItem = React74.forwardRef(function IndicatorItem2({ placement = "top-end", className, ...rest }, ref) {
+  const sc = useSilicaClass();
+  const start = placement === "top-start" || placement === "bottom-start";
+  const bottom = placement === "bottom-end" || placement === "bottom-start";
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: cx(
+        sc("indicator-item"),
+        start && sc("indicator-start"),
+        bottom && sc("indicator-bottom"),
+        className
+      ),
+      ...rest
+    }
+  );
+});
+var Loading = React74.forwardRef(
+  function Loading2({ size = "md", label = "Loading", className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        role: "status",
+        "aria-label": label,
+        className: cx(
+          sc("loading"),
+          size !== "md" && sc(`loading-${size}`),
+          className
+        ),
+        ...rest
+      }
+    );
+  }
+);
+var Prose = React74.forwardRef(
+  function Prose2({ size = "md", className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cx(
+          sc("prose"),
+          size !== "md" && sc(`prose-${size}`),
+          className
+        ),
+        ...rest
+      }
+    );
+  }
+);
+var Heading = React74.forwardRef(
+  function Heading2({ level = 2, size, className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    const Tag = `h${level}`;
+    const sizeClass = size !== void 0 && size !== level ? sc(size === "display" ? "display" : `h${size}`) : void 0;
+    return /* @__PURE__ */ jsx(Tag, { ref, className: cx(sizeClass, className), ...rest });
+  }
+);
+var Display = React74.forwardRef(
+  function Display2({ level = 1, className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    const Tag = `h${level}`;
+    return /* @__PURE__ */ jsx(Tag, { ref, className: cx(sc("display"), className), ...rest });
+  }
+);
+var Text = React74.forwardRef(
+  function Text2({ variant = "body", as, className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    const Tag = as ?? "p";
+    const variantClass = variant === "lead" ? sc("lead") : variant === "caption" ? sc("caption") : void 0;
+    return /* @__PURE__ */ jsx(Tag, { ref, className: cx(variantClass, className) || void 0, ...rest });
+  }
+);
+var Navbar = React74.forwardRef(
+  function Navbar2({ className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx("div", { ref, className: cx(sc("navbar"), className), ...rest });
+  }
+);
+var NavbarStart = React74.forwardRef(
+  function NavbarStart2({ className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx("div", { ref, className: cx(sc("navbar-start"), className), ...rest });
+  }
+);
+var NavbarCenter = React74.forwardRef(
+  function NavbarCenter2({ className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx("div", { ref, className: cx(sc("navbar-center"), className), ...rest });
+  }
+);
+var NavbarEnd = React74.forwardRef(
+  function NavbarEnd2({ className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx("div", { ref, className: cx(sc("navbar-end"), className), ...rest });
+  }
+);
+var Footer = React74.forwardRef(
+  function Footer2({ center, className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx(
+      "footer",
+      {
+        ref,
+        className: cx(sc("footer"), center && sc("footer-center"), className),
+        ...rest
+      }
+    );
+  }
+);
+var FooterTitle = React74.forwardRef(
+  function FooterTitle2({ className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx("h6", { ref, className: cx(sc("footer-title"), className), ...rest });
+  }
+);
+var Hero = React74.forwardRef(
+  function Hero2({ className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx("div", { ref, className: cx(sc("hero"), className), ...rest });
+  }
+);
+var HeroContent = React74.forwardRef(
+  function HeroContent2({ className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx("div", { ref, className: cx(sc("hero-content"), className), ...rest });
+  }
+);
+var HeroOverlay = React74.forwardRef(
+  function HeroOverlay2({ className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx("div", { ref, className: cx(sc("hero-overlay"), className), ...rest });
+  }
+);
+var Link = React74.forwardRef(
+  function Link2({ color, hover, className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        ref,
+        className: cx(
+          sc("link"),
+          hover && sc("link-hover"),
+          color && sc(`link-${color}`),
+          className
+        ),
+        ...rest
+      }
+    );
+  }
+);
+var MockupWindow = React74.forwardRef(
+  function MockupWindow2({ className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx("div", { ref, className: cx(sc("mockup-window"), className), ...rest });
+  }
+);
+var MockupBrowser = React74.forwardRef(
+  function MockupBrowser2({ url, toolbar, className, children, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsxs("div", { ref, className: cx(sc("mockup-browser"), className), ...rest, children: [
+      /* @__PURE__ */ jsx("div", { className: cx(sc("mockup-browser-toolbar")), children: toolbar ?? /* @__PURE__ */ jsx("div", { className: cx(sc("mockup-browser-input")), children: url }) }),
+      children
+    ] });
+  }
+);
+var MockupCode = React74.forwardRef(
+  function MockupCode2({ className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx("div", { ref, className: cx(sc("mockup-code"), className), ...rest });
+  }
+);
+var MockupCodeLine = React74.forwardRef(
+  function MockupCodeLine2({ prefix, className, ...rest }, ref) {
+    return /* @__PURE__ */ jsx("pre", { ref, "data-prefix": prefix, className, ...rest });
+  }
+);
+var MockupPhone = React74.forwardRef(
+  function MockupPhone2({ className, children, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx("div", { ref, className: cx(sc("mockup-phone"), className), ...rest, children: /* @__PURE__ */ jsx("div", { className: cx(sc("mockup-phone-display")), children }) });
+  }
+);
+var Timeline = React74.forwardRef(
+  function Timeline2({ orientation = "vertical", className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx(
+      "ul",
+      {
+        ref,
+        className: cx(
+          sc("timeline"),
+          orientation === "horizontal" && sc("timeline-horizontal"),
+          className
+        ),
+        ...rest
+      }
+    );
+  }
+);
+var TimelineItem = React74.forwardRef(
+  function TimelineItem2({ className, ...rest }, ref) {
+    return /* @__PURE__ */ jsx("li", { ref, className, ...rest });
+  }
+);
+var TimelineStart = React74.forwardRef(
+  function TimelineStart2({ className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx("div", { ref, className: cx(sc("timeline-start"), className), ...rest });
+  }
+);
+var TimelineMiddle = React74.forwardRef(
+  function TimelineMiddle2({ className, children, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx("div", { ref, className: cx(sc("timeline-middle"), className), ...rest, children: children ?? /* @__PURE__ */ jsx("span", { className: cx(sc("timeline-dot")) }) });
+  }
+);
+var TimelineEnd = React74.forwardRef(
+  function TimelineEnd2({ box, className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cx(sc("timeline-end"), box && sc("timeline-box"), className),
+        ...rest
+      }
+    );
+  }
+);
+var PrevIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var NextIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6", strokeLinecap: "round", strokeLinejoin: "round" }) });
+function Carousel({
+  snap = "start",
+  orientation = "horizontal",
+  controls = true,
+  indicators = true,
+  loop = false,
+  autoplay,
+  onChange,
+  className,
+  children,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  const scrollRef = React74.useRef(null);
+  const horizontal = orientation !== "vertical";
+  const count = React74.Children.count(children);
+  const [active, setActive] = React74.useState(0);
+  const [paused, setPaused] = React74.useState(false);
+  const goTo = React74.useCallback(
+    (i) => {
+      const container = scrollRef.current;
+      if (!container) return;
+      const last = container.children.length - 1;
+      const target = loop ? (i + container.children.length) % container.children.length : Math.max(0, Math.min(last, i));
+      const el = container.children[target];
+      if (!el) return;
+      container.scrollTo({
+        left: horizontal ? el.offsetLeft - container.offsetLeft : 0,
+        top: horizontal ? 0 : el.offsetTop - container.offsetTop,
+        behavior: "smooth"
+      });
+    },
+    [horizontal, loop]
+  );
+  const handleScroll = React74.useCallback(() => {
+    const container = scrollRef.current;
+    if (!container) return;
+    const kids = Array.from(container.children);
+    const pos = horizontal ? container.scrollLeft : container.scrollTop;
+    let nearest = 0;
+    let best = Infinity;
+    kids.forEach((k, i) => {
+      const off = horizontal ? k.offsetLeft - container.offsetLeft : k.offsetTop - container.offsetTop;
+      const d = Math.abs(off - pos);
+      if (d < best) {
+        best = d;
+        nearest = i;
+      }
+    });
+    setActive((prev) => prev === nearest ? prev : nearest);
+  }, [horizontal]);
+  React74.useEffect(() => {
+    onChange?.(active);
+  }, [active, onChange]);
+  React74.useEffect(() => {
+    if (!autoplay || paused || count <= 1) return;
+    const id = window.setInterval(() => {
+      const next = active + 1 > count - 1 ? loop ? 0 : active : active + 1;
+      if (next !== active) goTo(next);
+      else if (loop) goTo(0);
+    }, autoplay);
+    return () => window.clearInterval(id);
+  }, [autoplay, paused, active, count, loop, goTo]);
+  const atStart = active === 0;
+  const atEnd = active === count - 1;
+  const indi = indicators === true ? "dots" : indicators;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(sc("carousel-root")),
+      onMouseEnter: () => setPaused(true),
+      onMouseLeave: () => setPaused(false),
+      onFocusCapture: () => setPaused(true),
+      onBlurCapture: () => setPaused(false),
+      children: [
+        controls && count > 1 && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: cx(sc("carousel-control"), sc("carousel-prev")),
+            onClick: () => goTo(active - 1),
+            disabled: !loop && atStart,
+            "aria-label": "Previous slide",
+            children: /* @__PURE__ */ jsx(PrevIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: scrollRef,
+            className: cx(
+              sc("carousel"),
+              snap !== "start" && sc(`carousel-${snap}`),
+              orientation === "vertical" && sc("carousel-vertical"),
+              className
+            ),
+            onScroll: handleScroll,
+            ...rest,
+            children
+          }
+        ),
+        controls && count > 1 && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: cx(sc("carousel-control"), sc("carousel-next")),
+            onClick: () => goTo(active + 1),
+            disabled: !loop && atEnd,
+            "aria-label": "Next slide",
+            children: /* @__PURE__ */ jsx(NextIcon, {})
+          }
+        ),
+        indi && count > 1 && /* @__PURE__ */ jsx("div", { className: cx(sc("carousel-indicators")), children: Array.from(
+          { length: count },
+          (_, i) => indi === "numbers" ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: cx(sc("carousel-number"), i === active && sc("carousel-number-active")),
+              onClick: () => goTo(i),
+              "aria-label": `Go to slide ${i + 1}`,
+              "aria-current": i === active,
+              children: i + 1
+            },
+            i
+          ) : /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: cx(sc("carousel-dot"), i === active && sc("carousel-dot-active")),
+              onClick: () => goTo(i),
+              "aria-label": `Go to slide ${i + 1}`,
+              "aria-current": i === active
+            },
+            i
+          )
+        ) })
+      ]
+    }
+  );
+}
+var CarouselItem = React74.forwardRef(
+  function CarouselItem2({ className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx("div", { ref, className: cx(sc("carousel-item"), className), ...rest });
+  }
+);
+function Stack({
+  peek = "top",
+  interactive = false,
+  className,
+  children,
+  onClick,
+  onKeyDown,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  const items = React74.useMemo(() => React74.Children.toArray(children), [children]);
+  const [order, setOrder] = React74.useState(() => items.map((_, i) => i));
+  React74.useEffect(() => {
+    setOrder(items.map((_, i) => i));
+  }, [items.length]);
+  const cycle = React74.useCallback(() => {
+    setOrder((o) => o.length > 1 ? o.slice(1).concat(o.slice(0, 1)) : o);
+  }, []);
+  const ordered = order.map((i) => items[i]).filter(Boolean);
+  const interactiveProps = interactive ? {
+    role: "button",
+    tabIndex: 0,
+    "aria-label": "Cycle stack",
+    style: { cursor: "pointer", ...rest.style },
+    onClick: (e) => {
+      cycle();
+      onClick?.(e);
+    },
+    onKeyDown: (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        cycle();
+      }
+      onKeyDown?.(e);
+    }
+  } : { onClick, onKeyDown };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(sc("stack"), peek !== "top" && sc(`stack-${peek}`), className),
+      ...rest,
+      ...interactiveProps,
+      children: ordered
+    }
+  );
+}
+var StarIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" }) });
+function Rating({
+  value,
+  defaultValue = 0,
+  onChange,
+  max = 5,
+  color,
+  size,
+  readOnly,
+  icon,
+  label = "Rating",
+  className,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = React74.useState(defaultValue);
+  const current = isControlled ? value : internal;
+  const [hover, setHover] = React74.useState(null);
+  const shown = hover ?? current;
+  const refs = React74.useRef([]);
+  const setValue = (v) => {
+    if (readOnly) return;
+    const next = v === current ? 0 : v;
+    if (!isControlled) setInternal(next);
+    onChange?.(next);
+  };
+  const focusStar = (i) => {
+    const clamped = Math.max(1, Math.min(max, i));
+    refs.current[clamped - 1]?.focus();
+    if (!isControlled) setInternal(clamped);
+    onChange?.(clamped);
+  };
+  const onKeyDown = (e, i) => {
+    if (readOnly) return;
+    if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+      e.preventDefault();
+      focusStar(i + 1);
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+      e.preventDefault();
+      focusStar(i - 1);
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      focusStar(1);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      focusStar(max);
+    }
+  };
+  const activeIndex = current > 0 ? current - 1 : 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": label,
+      className: cx(
+        sc("rating"),
+        color && sc(`rating-${color}`),
+        size && sc(`rating-${size}`),
+        readOnly && sc("rating-readonly"),
+        className
+      ),
+      onMouseLeave: () => setHover(null),
+      ...rest,
+      children: Array.from({ length: max }, (_, idx) => {
+        const starValue = idx + 1;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            ref: (el) => {
+              refs.current[idx] = el;
+            },
+            type: "button",
+            role: "radio",
+            "aria-checked": current === starValue,
+            "aria-label": `${starValue} star${starValue === 1 ? "" : "s"}`,
+            tabIndex: readOnly ? -1 : idx === activeIndex ? 0 : -1,
+            disabled: readOnly,
+            "data-filled": starValue <= shown,
+            className: cx(sc("rating-item")),
+            onClick: () => setValue(starValue),
+            onMouseEnter: () => !readOnly && setHover(starValue),
+            onKeyDown: (e) => onKeyDown(e, starValue),
+            children: icon ?? /* @__PURE__ */ jsx(StarIcon, {})
+          },
+          starValue
+        );
+      })
+    }
+  );
+}
+var RadialProgress = React74.forwardRef(
+  function RadialProgress2({ value, size = "5rem", thickness = "0.5rem", color, className, children, style, ...rest }, ref) {
+    const sc = useSilicaClass();
+    const pct = Math.max(0, Math.min(100, value));
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "progressbar",
+        "aria-valuenow": Math.round(pct),
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        className: cx(sc("radial-progress"), className),
+        style: {
+          "--value": pct,
+          "--size": size,
+          "--thickness": thickness,
+          ...color ? { "--radial-accent": `var(--color-${color})` } : {},
+          ...style
+        },
+        ...rest,
+        children: /* @__PURE__ */ jsx("span", { children: children ?? `${Math.round(pct)}%` })
+      }
+    );
+  }
+);
+var range = (start, end) => Array.from({ length: Math.max(end - start + 1, 0) }, (_, i) => start + i);
+function paginationItems(page, count, siblingCount, boundaryCount) {
+  const startPages = range(1, Math.min(boundaryCount, count));
+  const endPages = range(Math.max(count - boundaryCount + 1, boundaryCount + 1), count);
+  const siblingsStart = Math.max(
+    Math.min(page - siblingCount, count - boundaryCount - siblingCount * 2 - 1),
+    boundaryCount + 2
+  );
+  const firstEndPage = endPages.length > 0 ? endPages[0] : count + 1;
+  const siblingsEnd = Math.min(
+    Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2),
+    endPages.length > 0 ? firstEndPage - 2 : count - 1
+  );
+  return [
+    ...startPages,
+    ...siblingsStart > boundaryCount + 2 ? ["ellipsis"] : boundaryCount + 1 < count - boundaryCount ? [boundaryCount + 1] : [],
+    ...range(siblingsStart, siblingsEnd),
+    ...siblingsEnd < count - boundaryCount - 1 ? ["ellipsis"] : count - boundaryCount > boundaryCount ? [count - boundaryCount] : [],
+    ...endPages
+  ];
+}
+var PrevIcon2 = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var NextIcon2 = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6", strokeLinecap: "round", strokeLinejoin: "round" }) });
+function Pagination({
+  page,
+  count,
+  onChange,
+  siblingCount = 1,
+  boundaryCount = 1,
+  controls = true,
+  color,
+  size,
+  className,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  const items = paginationItems(page, count, siblingCount, boundaryCount);
+  const go = (p) => {
+    const clamped = Math.max(1, Math.min(count, p));
+    if (clamped !== page) onChange?.(clamped);
+  };
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      "aria-label": "Pagination",
+      className: cx(
+        sc("pagination"),
+        color && sc(`pagination-${color}`),
+        size && sc(`pagination-${size}`),
+        className
+      ),
+      ...rest,
+      children: [
+        controls && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: cx(sc("pagination-item")),
+            onClick: () => go(page - 1),
+            disabled: page <= 1,
+            "aria-label": "Previous page",
+            children: /* @__PURE__ */ jsx(PrevIcon2, {})
+          }
+        ),
+        items.map(
+          (item, i) => item === "ellipsis" ? /* @__PURE__ */ jsx("span", { className: cx(sc("pagination-ellipsis")), "aria-hidden": "true", children: "\u2026" }, `e${i}`) : /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: cx(
+                sc("pagination-item"),
+                item === page && sc("pagination-item-active")
+              ),
+              onClick: () => go(item),
+              "aria-label": `Page ${item}`,
+              "aria-current": item === page ? "page" : void 0,
+              children: item
+            },
+            item
+          )
+        ),
+        controls && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: cx(sc("pagination-item")),
+            onClick: () => go(page + 1),
+            disabled: page >= count,
+            "aria-label": "Next page",
+            children: /* @__PURE__ */ jsx(NextIcon2, {})
+          }
+        )
+      ]
+    }
+  );
+}
+var ChevronIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6", strokeLinecap: "round", strokeLinejoin: "round" }) });
+function Accordion({ className, ...rest }) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(Accordion$1.Root, { className: cx(sc("accordion"), className), ...rest });
+}
+function AccordionItem({ className, ...rest }) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(Accordion$1.Item, { className: cx(sc("accordion-item"), className), ...rest });
+}
+function AccordionTrigger({
+  className,
+  children,
+  chevron = true,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(Accordion$1.Header, { className: cx(sc("accordion-header")), children: /* @__PURE__ */ jsxs(Accordion$1.Trigger, { className: cx(sc("accordion-trigger"), className), ...rest, children: [
+    /* @__PURE__ */ jsx("span", { children }),
+    chevron && /* @__PURE__ */ jsx(ChevronIcon, {})
+  ] }) });
+}
+function AccordionPanel({
+  className,
+  children,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(Accordion$1.Panel, { className: cx(sc("accordion-panel"), className), ...rest, children: /* @__PURE__ */ jsx("div", { className: cx(sc("accordion-content")), children }) });
+}
+var Chat = React74.forwardRef(
+  function Chat2({ side = "start", className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx("div", { ref, className: cx(sc("chat"), sc(`chat-${side}`), className), ...rest });
+  }
+);
+var ChatImage = React74.forwardRef(
+  function ChatImage2({ className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx("div", { ref, className: cx(sc("chat-image"), className), ...rest });
+  }
+);
+var ChatHeader = React74.forwardRef(
+  function ChatHeader2({ className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx("div", { ref, className: cx(sc("chat-header"), className), ...rest });
+  }
+);
+var ChatFooter = React74.forwardRef(
+  function ChatFooter2({ className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx("div", { ref, className: cx(sc("chat-footer"), className), ...rest });
+  }
+);
+var ChatBubble = React74.forwardRef(
+  function ChatBubble2({ color, className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cx(sc("chat-bubble"), color && sc(`chat-bubble-${color}`), className),
+        ...rest
+      }
+    );
+  }
+);
+function Range({ color, className, value, defaultValue, ...rest }) {
+  const sc = useSilicaClass();
+  const vals = value ?? defaultValue;
+  const thumbCount = Array.isArray(vals) ? vals.length : 1;
+  return /* @__PURE__ */ jsx(
+    Slider$1.Root,
+    {
+      value,
+      defaultValue,
+      className: cx(sc("range"), color && sc(`range-${color}`), className),
+      ...rest,
+      children: /* @__PURE__ */ jsx(Slider$1.Control, { className: cx(sc("range-control")), children: /* @__PURE__ */ jsxs(Slider$1.Track, { className: cx(sc("range-track")), children: [
+        /* @__PURE__ */ jsx(Slider$1.Indicator, { className: cx(sc("range-indicator")) }),
+        Array.from({ length: thumbCount }, (_, i) => /* @__PURE__ */ jsx(
+          Slider$1.Thumb,
+          {
+            index: thumbCount > 1 ? i : void 0,
+            className: cx(sc("range-thumb"))
+          },
+          i
+        ))
+      ] }) })
+    }
+  );
+}
+var CloseIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "m18 6-12 12M6 6l12 12", strokeLinecap: "round" }) });
+function ToastList() {
+  const { toasts } = Toast.useToastManager();
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(Toast.Portal, { children: /* @__PURE__ */ jsx(Toast.Viewport, { className: cx(sc("toast-viewport")), children: toasts.map((toast) => /* @__PURE__ */ jsxs(Toast.Root, { toast, className: cx(sc("toast")), children: [
+    /* @__PURE__ */ jsxs("div", { className: cx(sc("toast-content")), children: [
+      /* @__PURE__ */ jsx(Toast.Title, { className: cx(sc("toast-title")) }),
+      /* @__PURE__ */ jsx(Toast.Description, { className: cx(sc("toast-description")) })
+    ] }),
+    /* @__PURE__ */ jsx(Toast.Close, { className: cx(sc("toast-close")), "aria-label": "Close", children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+  ] }, toast.id)) }) });
+}
+function ToastProvider({ children, ...rest }) {
+  return /* @__PURE__ */ jsxs(Toast.Provider, { ...rest, children: [
+    children,
+    /* @__PURE__ */ jsx(ToastList, {})
+  ] });
+}
+function useToast() {
+  return Toast.useToastManager();
+}
+function Swap({
+  on,
+  off,
+  active,
+  defaultActive,
+  onActiveChange,
+  variant = "fade",
+  label,
+  className,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  const isControlled = active !== void 0;
+  const [internal, setInternal] = React74.useState(defaultActive ?? false);
+  const checked = isControlled ? active : internal;
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: cx(sc("swap"), variant !== "fade" && sc(`swap-${variant}`), className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked,
+            "aria-label": label,
+            onChange: (e) => {
+              if (!isControlled) setInternal(e.target.checked);
+              onActiveChange?.(e.target.checked);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: cx(sc("swap-on")), children: on }),
+        /* @__PURE__ */ jsx("span", { className: cx(sc("swap-off")), children: off })
+      ]
+    }
+  );
+}
+var Status = React74.forwardRef(
+  function Status2({ color, size, ping, label, className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        role: label ? "status" : void 0,
+        "aria-label": label,
+        className: cx(
+          sc("status"),
+          color && sc(`status-${color}`),
+          size && sc(`status-${size}`),
+          ping && sc("status-ping"),
+          className
+        ),
+        ...rest
+      }
+    );
+  }
+);
+var pad = (n) => String(n).padStart(2, "0");
+function Countdown({
+  to,
+  units = ["days", "hours", "minutes", "seconds"],
+  plain,
+  onComplete,
+  className,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  const target = typeof to === "number" ? to : to.getTime();
+  const [now, setNow] = React74.useState(() => Date.now());
+  React74.useEffect(() => {
+    const id = window.setInterval(() => setNow(Date.now()), 1e3);
+    return () => window.clearInterval(id);
+  }, []);
+  const remaining = Math.max(0, target - now);
+  const done = remaining === 0;
+  const completedRef = React74.useRef(false);
+  React74.useEffect(() => {
+    if (done && !completedRef.current) {
+      completedRef.current = true;
+      onComplete?.();
+    }
+    if (!done) completedRef.current = false;
+  }, [done, onComplete]);
+  const total = Math.floor(remaining / 1e3);
+  const values = {
+    days: Math.floor(total / 86400),
+    hours: Math.floor(total % 86400 / 3600),
+    minutes: Math.floor(total % 3600 / 60),
+    seconds: total % 60
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(sc("countdown"), plain && sc("countdown-plain"), className),
+      role: "timer",
+      ...rest,
+      children: units.map((u) => /* @__PURE__ */ jsxs("div", { className: cx(sc("countdown-unit")), children: [
+        /* @__PURE__ */ jsx("span", { className: cx(sc("countdown-value")), children: u === "days" ? values[u] : pad(values[u]) }),
+        /* @__PURE__ */ jsx("span", { className: cx(sc("countdown-label")), children: u })
+      ] }, u))
+    }
+  );
+}
+var MinusIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M5 12h14", strokeLinecap: "round" }) });
+var PlusIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14", strokeLinecap: "round" }) });
+function NumberField({ className, label, ...rest }) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(NumberField$1.Root, { className: cx(sc("number-field"), className), ...rest, children: /* @__PURE__ */ jsxs(NumberField$1.Group, { className: cx(sc("number-field-group")), children: [
+    /* @__PURE__ */ jsx(
+      NumberField$1.Decrement,
+      {
+        className: cx(sc("number-field-button"), sc("number-field-decrement")),
+        children: /* @__PURE__ */ jsx(MinusIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      NumberField$1.Input,
+      {
+        "aria-label": label,
+        className: cx(sc("number-field-input"))
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      NumberField$1.Increment,
+      {
+        className: cx(sc("number-field-button"), sc("number-field-increment")),
+        children: /* @__PURE__ */ jsx(PlusIcon, {})
+      }
+    )
+  ] }) });
+}
+var asRender = (el) => el;
+var Drawer = Dialog$1.Root;
+function DrawerTrigger({ children }) {
+  return /* @__PURE__ */ jsx(Dialog$1.Trigger, { render: asRender(children) });
+}
+function DrawerClose({ children }) {
+  return /* @__PURE__ */ jsx(Dialog$1.Close, { render: asRender(children) });
+}
+function DrawerContent({
+  side = "left",
+  className,
+  backdropClassName,
+  children,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsxs(Dialog$1.Portal, { children: [
+    /* @__PURE__ */ jsx(Dialog$1.Backdrop, { className: cx(sc("drawer-backdrop"), backdropClassName) }),
+    /* @__PURE__ */ jsx(
+      Dialog$1.Popup,
+      {
+        "data-side": side,
+        className: cx(sc("drawer-popup"), className),
+        ...rest,
+        children
+      }
+    )
+  ] });
+}
+function DrawerTitle({ className, ...rest }) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(Dialog$1.Title, { className: cx(sc("drawer-title"), className), ...rest });
+}
+function DrawerDescription({
+  className,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Description,
+    {
+      className: cx(sc("drawer-description"), className),
+      ...rest
+    }
+  );
+}
+var List = React74.forwardRef(
+  function List2({ hover, className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx("div", { ref, className: cx(sc("list"), hover && sc("list-hover"), className), ...rest });
+  }
+);
+var ListRow = React74.forwardRef(
+  function ListRow2({ className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx("div", { ref, className: cx(sc("list-row"), className), ...rest });
+  }
+);
+var ListColGrow = React74.forwardRef(
+  function ListColGrow2({ className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx("div", { ref, className: cx(sc("list-col-grow"), className), ...rest });
+  }
+);
+var ListTitle = React74.forwardRef(
+  function ListTitle2({ className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx("div", { ref, className: cx(sc("list-title"), className), ...rest });
+  }
+);
+var FileInput = React74.forwardRef(
+  function FileInput2({ size, className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "file",
+        className: cx(
+          sc("file-input"),
+          size && size !== "md" && sc(`file-input-${size}`),
+          className
+        ),
+        ...rest
+      }
+    );
+  }
+);
+var Dock = React74.forwardRef(
+  function Dock2({ color, className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx(
+      "nav",
+      {
+        ref,
+        className: cx(sc("dock"), color && sc(`dock-${color}`), className),
+        ...rest
+      }
+    );
+  }
+);
+var DockItem = React74.forwardRef(
+  function DockItem2({ active, className, type = "button", ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type,
+        "aria-current": active ? "page" : void 0,
+        className: cx(sc("dock-item"), active && sc("dock-item-active"), className),
+        ...rest
+      }
+    );
+  }
+);
+var DockLabel = React74.forwardRef(
+  function DockLabel2({ className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx("span", { ref, className: cx(sc("dock-label"), className), ...rest });
+  }
+);
+var Fieldset = React74.forwardRef(
+  function Fieldset2({ className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx("fieldset", { ref, className: cx(sc("fieldset"), className), ...rest });
+  }
+);
+var FieldsetLegend = React74.forwardRef(function FieldsetLegend2({ className, ...rest }, ref) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx("legend", { ref, className: cx(sc("fieldset-legend"), className), ...rest });
+});
+var FieldsetLabel = React74.forwardRef(function FieldsetLabel2({ className, ...rest }, ref) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx("span", { ref, className: cx(sc("fieldset-label"), className), ...rest });
+});
+var Label = React74.forwardRef(
+  function Label2({ className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx("label", { ref, className: cx(sc("label"), className), ...rest });
+  }
+);
+var FloatingLabel = React74.forwardRef(function FloatingLabel2({ label, children, className, ...rest }, ref) {
+  const sc = useSilicaClass();
+  const control = React74.isValidElement(children) ? React74.cloneElement(children, {
+    placeholder: children.props.placeholder ?? " "
+  }) : children;
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      ref,
+      className: cx(sc("floating-label"), className),
+      ...rest,
+      children: [
+        control,
+        /* @__PURE__ */ jsx("span", { children: label })
+      ]
+    }
+  );
+});
+function Validator({ children }) {
+  const sc = useSilicaClass();
+  if (!React74.isValidElement(children)) return /* @__PURE__ */ jsx(Fragment, { children });
+  return React74.cloneElement(children, {
+    className: cx(sc("validator"), children.props.className)
+  });
+}
+var ValidatorHint = React74.forwardRef(function ValidatorHint2({ className, ...rest }, ref) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx("p", { ref, className: cx(sc("validator-hint"), className), ...rest });
+});
+function DiffArrows() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "m9 7-5 5 5 5M15 7l5 5-5 5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+var clamp = (n) => Math.max(0, Math.min(100, n));
+var Diff = React74.forwardRef(function Diff2({
+  before,
+  after,
+  position,
+  defaultPosition = 50,
+  onPositionChange,
+  className,
+  style,
+  ...rest
+}, ref) {
+  const sc = useSilicaClass();
+  const [internal, setInternal] = React74.useState(clamp(defaultPosition));
+  const pos = position === void 0 ? internal : clamp(position);
+  const rootRef = React74.useRef(null);
+  const dragging = React74.useRef(false);
+  const setRefs = React74.useCallback(
+    (node) => {
+      rootRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref)
+        ref.current = node;
+    },
+    [ref]
+  );
+  const commit = (next) => {
+    const clamped = clamp(next);
+    if (position === void 0) setInternal(clamped);
+    onPositionChange?.(clamped);
+  };
+  const positionFromClientX = (clientX) => {
+    const el = rootRef.current;
+    if (!el) return pos;
+    const rect = el.getBoundingClientRect();
+    if (rect.width === 0) return pos;
+    return (clientX - rect.left) / rect.width * 100;
+  };
+  const onPointerDown = (e) => {
+    dragging.current = true;
+    e.currentTarget.setPointerCapture?.(e.pointerId);
+    commit(positionFromClientX(e.clientX));
+  };
+  const onPointerMove = (e) => {
+    if (!dragging.current) return;
+    commit(positionFromClientX(e.clientX));
+  };
+  const endDrag = (e) => {
+    dragging.current = false;
+    e.currentTarget.releasePointerCapture?.(e.pointerId);
+  };
+  const onKeyDown = (e) => {
+    const step = e.shiftKey ? 10 : 2;
+    if (e.key === "ArrowLeft") commit(pos - step);
+    else if (e.key === "ArrowRight") commit(pos + step);
+    else if (e.key === "Home") commit(0);
+    else if (e.key === "End") commit(100);
+    else return;
+    e.preventDefault();
+  };
+  const styleVars = {
+    ...style,
+    ["--diff-pos"]: `${pos}%`
+  };
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      ref: setRefs,
+      className: cx(sc("diff"), className),
+      style: styleVars,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp: endDrag,
+      onPointerCancel: endDrag,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: cx(sc("diff-item-1")), children: before }),
+        /* @__PURE__ */ jsx("div", { className: cx(sc("diff-item-2")), children: after }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cx(sc("diff-resizer")),
+            role: "slider",
+            tabIndex: 0,
+            "aria-label": "Comparison position",
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-valuenow": Math.round(pos),
+            onKeyDown,
+            children: /* @__PURE__ */ jsx("span", { className: cx(sc("diff-grip")), children: /* @__PURE__ */ jsx(DiffArrows, {}) })
+          }
+        )
+      ]
+    }
+  );
+});
+var Mask = React74.forwardRef(function Mask2({ variant, className, ...rest }, ref) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cx(sc("mask"), sc(`mask-${variant}`), className),
+      ...rest
+    }
+  );
+});
+var Meter = React74.forwardRef(function Meter2({
+  value,
+  min = 0,
+  max = 100,
+  color,
+  size = "md",
+  label,
+  showValue = false,
+  format,
+  className,
+  ...rest
+}, ref) {
+  const sc = useSilicaClass();
+  const showHeader = label != null || showValue;
+  return /* @__PURE__ */ jsxs(
+    Meter$1.Root,
+    {
+      ref,
+      value,
+      min,
+      max,
+      format,
+      className: cx(
+        sc("meter"),
+        color && sc(`meter-${color}`),
+        size !== "md" && sc(`meter-${size}`),
+        className
+      ),
+      ...rest,
+      children: [
+        showHeader && /* @__PURE__ */ jsxs("div", { className: cx(sc("meter-header")), children: [
+          label != null && /* @__PURE__ */ jsx(Meter$1.Label, { className: cx(sc("meter-label")), children: label }),
+          showValue && /* @__PURE__ */ jsx(Meter$1.Value, { className: cx(sc("meter-value")) })
+        ] }),
+        /* @__PURE__ */ jsx(Meter$1.Track, { className: cx(sc("meter-track")), children: /* @__PURE__ */ jsx(Meter$1.Indicator, { className: cx(sc("meter-indicator")) }) })
+      ]
+    }
+  );
+});
+var ScrollArea = React74.forwardRef(
+  function ScrollArea2({ orientation = "vertical", className, children, ...rest }, ref) {
+    const sc = useSilicaClass();
+    const showV = orientation === "vertical" || orientation === "both";
+    const showH = orientation === "horizontal" || orientation === "both";
+    return /* @__PURE__ */ jsxs(
+      ScrollArea$1.Root,
+      {
+        ref,
+        className: cx(sc("scroll-area"), className),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(ScrollArea$1.Viewport, { className: cx(sc("scroll-area-viewport")), children: /* @__PURE__ */ jsx(ScrollArea$1.Content, { className: cx(sc("scroll-area-content")), children }) }),
+          showV && /* @__PURE__ */ jsx(
+            ScrollArea$1.Scrollbar,
+            {
+              orientation: "vertical",
+              className: cx(sc("scroll-area-scrollbar")),
+              children: /* @__PURE__ */ jsx(ScrollArea$1.Thumb, { className: cx(sc("scroll-area-thumb")) })
+            }
+          ),
+          showH && /* @__PURE__ */ jsx(
+            ScrollArea$1.Scrollbar,
+            {
+              orientation: "horizontal",
+              className: cx(sc("scroll-area-scrollbar")),
+              children: /* @__PURE__ */ jsx(ScrollArea$1.Thumb, { className: cx(sc("scroll-area-thumb")) })
+            }
+          ),
+          orientation === "both" && /* @__PURE__ */ jsx(ScrollArea$1.Corner, { className: cx(sc("scroll-area-corner")) })
+        ]
+      }
+    );
+  }
+);
+function PreviewCard({
+  children,
+  content,
+  side = "bottom",
+  align = "center",
+  sideOffset = 8,
+  delay,
+  closeDelay,
+  open,
+  defaultOpen,
+  onOpenChange,
+  arrow = false,
+  className
+}) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsxs(
+    PreviewCard$1.Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange,
+      children: [
+        /* @__PURE__ */ jsx(
+          PreviewCard$1.Trigger,
+          {
+            render: children,
+            delay,
+            closeDelay
+          }
+        ),
+        /* @__PURE__ */ jsx(PreviewCard$1.Portal, { children: /* @__PURE__ */ jsx(
+          PreviewCard$1.Positioner,
+          {
+            side,
+            align,
+            sideOffset,
+            children: /* @__PURE__ */ jsxs(PreviewCard$1.Popup, { className: cx(sc("preview-card"), className), children: [
+              arrow && /* @__PURE__ */ jsx(PreviewCard$1.Arrow, { className: cx(sc("preview-card-arrow")) }),
+              content
+            ] })
+          }
+        ) })
+      ]
+    }
+  );
+}
+var Toolbar = React74.forwardRef(
+  function Toolbar2({ className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx(
+      Toolbar$1.Root,
+      {
+        ref,
+        className: cx(sc("toolbar"), className),
+        ...rest
+      }
+    );
+  }
+);
+var ToolbarButton = React74.forwardRef(function ToolbarButton2({ className, ...rest }, ref) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(
+    Toolbar$1.Button,
+    {
+      ref,
+      className: cx(sc("toolbar-button"), className),
+      ...rest
+    }
+  );
+});
+var ToolbarGroup = React74.forwardRef(
+  function ToolbarGroup2({ className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx(
+      Toolbar$1.Group,
+      {
+        ref,
+        className: cx(sc("toolbar-group"), className),
+        ...rest
+      }
+    );
+  }
+);
+var ToolbarLink = React74.forwardRef(
+  function ToolbarLink2({ className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx(
+      Toolbar$1.Link,
+      {
+        ref,
+        className: cx(sc("toolbar-link"), className),
+        ...rest
+      }
+    );
+  }
+);
+var ToolbarSeparator = React74.forwardRef(function ToolbarSeparator2({ className, ...rest }, ref) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(
+    Toolbar$1.Separator,
+    {
+      ref,
+      className: cx(sc("toolbar-separator"), className),
+      ...rest
+    }
+  );
+});
+function SunIcon() {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "4" }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4",
+        strokeLinecap: "round"
+      }
+    )
+  ] });
+}
+function MoonIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function PaletteIcon() {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "13.5", cy: "6.5", r: "1.5", fill: "currentColor", stroke: "none" }),
+    /* @__PURE__ */ jsx("circle", { cx: "17.5", cy: "10.5", r: "1.5", fill: "currentColor", stroke: "none" }),
+    /* @__PURE__ */ jsx("circle", { cx: "6.5", cy: "12.5", r: "1.5", fill: "currentColor", stroke: "none" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 2a10 10 0 1 0 0 20c1.1 0 2-.9 2-2 0-.5-.2-1-.5-1.3-.3-.4-.5-.8-.5-1.2 0-1 .8-1.5 1.8-1.5H16a6 6 0 0 0 6-6c0-4.4-4.5-8-10-8Z" })
+  ] });
+}
+function ThemeController({
+  themes = ["light", "dark"],
+  value,
+  defaultValue,
+  onChange,
+  target,
+  storageKey = "silica-theme",
+  labels = false,
+  variant = "ghost",
+  color = "neutral",
+  className,
+  "aria-label": ariaLabel
+}) {
+  const getTarget = React74.useCallback(() => {
+    if (typeof target === "function") return target();
+    if (target) return target;
+    return typeof document !== "undefined" ? document.documentElement : null;
+  }, [target]);
+  const resolveInitial = () => {
+    if (value) return value;
+    if (typeof window !== "undefined") {
+      if (storageKey) {
+        const stored = window.localStorage.getItem(storageKey);
+        if (stored && themes.includes(stored)) return stored;
+      }
+      const attr = getTarget()?.dataset.theme;
+      if (attr && themes.includes(attr)) return attr;
+    }
+    return defaultValue ?? themes[0] ?? "light";
+  };
+  const [internal, setInternal] = React74.useState(resolveInitial);
+  const current = value ?? internal;
+  React74.useEffect(() => {
+    const el = getTarget();
+    if (el) el.dataset.theme = current;
+  }, [current, getTarget]);
+  const apply = (next) => {
+    if (value === void 0) setInternal(next);
+    const el = getTarget();
+    if (el) el.dataset.theme = next;
+    if (storageKey && typeof window !== "undefined") {
+      window.localStorage.setItem(storageKey, next);
+    }
+    onChange?.(next);
+  };
+  const cycle = () => {
+    const i = themes.indexOf(current);
+    const next = themes[(i + 1) % themes.length] ?? themes[0] ?? current;
+    apply(next);
+  };
+  const isLightDarkPair = themes.length === 2 && themes.includes("light") && themes.includes("dark");
+  const icon = isLightDarkPair ? current === "dark" ? /* @__PURE__ */ jsx(SunIcon, {}) : /* @__PURE__ */ jsx(MoonIcon, {}) : /* @__PURE__ */ jsx(PaletteIcon, {});
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      type: "button",
+      variant,
+      color,
+      onClick: cycle,
+      className,
+      "aria-label": ariaLabel ?? `Switch theme (current: ${current})`,
+      title: `Theme: ${current}`,
+      children: [
+        icon,
+        labels && /* @__PURE__ */ jsx("span", { className: "capitalize", children: current })
+      ]
+    }
+  );
+}
+function ChevronDown() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function NavigationMenu({
+  children,
+  className,
+  side = "bottom",
+  align = "center",
+  sideOffset = 8,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsxs(NavigationMenu$1.Root, { className: cx(sc("navigation-menu"), className), ...rest, children: [
+    /* @__PURE__ */ jsx(NavigationMenu$1.List, { className: cx(sc("navigation-menu-list")), children }),
+    /* @__PURE__ */ jsx(NavigationMenu$1.Portal, { children: /* @__PURE__ */ jsx(
+      NavigationMenu$1.Positioner,
+      {
+        className: cx(sc("navigation-menu-positioner")),
+        side,
+        align,
+        sideOffset,
+        children: /* @__PURE__ */ jsx(NavigationMenu$1.Popup, { className: cx(sc("navigation-menu-popup")), children: /* @__PURE__ */ jsx(
+          NavigationMenu$1.Viewport,
+          {
+            className: cx(sc("navigation-menu-viewport"))
+          }
+        ) })
+      }
+    ) })
+  ] });
+}
+var NavigationMenuItem = React74.forwardRef(function NavigationMenuItem2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(NavigationMenu$1.Item, { ref, className, ...rest });
+});
+var NavigationMenuTrigger = React74.forwardRef(function NavigationMenuTrigger2({ className, children, ...rest }, ref) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsxs(
+    NavigationMenu$1.Trigger,
+    {
+      ref,
+      className: cx(sc("navigation-menu-trigger"), className),
+      ...rest,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(NavigationMenu$1.Icon, { className: cx(sc("navigation-menu-icon")), children: /* @__PURE__ */ jsx(ChevronDown, {}) })
+      ]
+    }
+  );
+});
+var NavigationMenuContent = React74.forwardRef(function NavigationMenuContent2({ className, ...rest }, ref) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(
+    NavigationMenu$1.Content,
+    {
+      ref,
+      className: cx(sc("navigation-menu-content"), className),
+      ...rest
+    }
+  );
+});
+var NavigationMenuLink = React74.forwardRef(function NavigationMenuLink2({ className, ...rest }, ref) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(
+    NavigationMenu$1.Link,
+    {
+      ref,
+      className: cx(sc("navigation-menu-link"), className),
+      ...rest
+    }
+  );
+});
+var Menubar = React74.forwardRef(
+  function Menubar2({ className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx(Menubar$1, { ref, className: cx(sc("menubar"), className), ...rest });
+  }
+);
+var MenubarMenu = Menu$1.Root;
+var MenubarTrigger = React74.forwardRef(function MenubarTrigger2({ className, ...rest }, ref) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(
+    Menu$1.Trigger,
+    {
+      ref,
+      className: cx(sc("menubar-trigger"), className),
+      ...rest
+    }
+  );
+});
+function MenubarContent({
+  className,
+  children,
+  side = "bottom",
+  align = "start",
+  sideOffset = 6,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(Menu$1.Portal, { children: /* @__PURE__ */ jsx(Menu$1.Positioner, { side, align, sideOffset, children: /* @__PURE__ */ jsx(Menu$1.Popup, { className: cx(sc("dropdown"), className), ...rest, children }) }) });
+}
+function MenubarItem({
+  className,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(Menu$1.Item, { className: cx(sc("dropdown-item"), className), ...rest });
+}
+function MenubarSeparator({
+  className,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(
+    Menu$1.Separator,
+    {
+      className: cx(sc("dropdown-separator"), className),
+      ...rest
+    }
+  );
+}
+function MenubarGroup(props) {
+  return /* @__PURE__ */ jsx(Menu$1.Group, { ...props });
+}
+function MenubarLabel({
+  className,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(
+    Menu$1.GroupLabel,
+    {
+      className: cx(sc("dropdown-label"), className),
+      ...rest
+    }
+  );
+}
+var ContextMenu = ContextMenu$1.Root;
+var ContextMenuTrigger = React74.forwardRef(function ContextMenuTrigger2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(ContextMenu$1.Trigger, { ref, className, ...rest });
+});
+function ContextMenuContent({
+  className,
+  children,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(ContextMenu$1.Portal, { children: /* @__PURE__ */ jsx(ContextMenu$1.Positioner, { children: /* @__PURE__ */ jsx(ContextMenu$1.Popup, { className: cx(sc("dropdown"), className), ...rest, children }) }) });
+}
+function ContextMenuItem({
+  className,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(
+    ContextMenu$1.Item,
+    {
+      className: cx(sc("dropdown-item"), className),
+      ...rest
+    }
+  );
+}
+function ContextMenuSeparator({
+  className,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(
+    ContextMenu$1.Separator,
+    {
+      className: cx(sc("dropdown-separator"), className),
+      ...rest
+    }
+  );
+}
+function ContextMenuGroup(props) {
+  return /* @__PURE__ */ jsx(ContextMenu$1.Group, { ...props });
+}
+function ContextMenuLabel({
+  className,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(
+    ContextMenu$1.GroupLabel,
+    {
+      className: cx(sc("dropdown-label"), className),
+      ...rest
+    }
+  );
+}
+var ToggleGroup = React74.forwardRef(
+  function ToggleGroup2({ className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx(
+      ToggleGroup$1,
+      {
+        ref,
+        className: cx(sc("toggle-group"), className),
+        ...rest
+      }
+    );
+  }
+);
+var ToggleGroupItem = React74.forwardRef(function ToggleGroupItem2({ className, ...rest }, ref) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(
+    Toggle$1,
+    {
+      ref,
+      className: cx(sc("toggle-group-item"), className),
+      ...rest
+    }
+  );
+});
+var Field = React74.forwardRef(function Field2({ className, ...rest }, ref) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(Field$1.Root, { ref, className: cx(sc("field"), className), ...rest });
+});
+var FieldLabel = React74.forwardRef(
+  function FieldLabel2({ className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx(
+      Field$1.Label,
+      {
+        ref,
+        className: cx(sc("field-label"), className),
+        ...rest
+      }
+    );
+  }
+);
+var FieldControl = React74.forwardRef(function FieldControl2({ className, render, ...rest }, ref) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(
+    Field$1.Control,
+    {
+      ref,
+      render,
+      className: cx(render ? void 0 : sc("input"), className),
+      ...rest
+    }
+  );
+});
+var FieldDescription = React74.forwardRef(function FieldDescription2({ className, ...rest }, ref) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(
+    Field$1.Description,
+    {
+      ref,
+      className: cx(sc("field-description"), className),
+      ...rest
+    }
+  );
+});
+var FieldError = React74.forwardRef(
+  function FieldError2({ className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsx(
+      Field$1.Error,
+      {
+        ref,
+        className: cx(sc("field-error"), className),
+        ...rest
+      }
+    );
+  }
+);
+var Form = React74.forwardRef(function Form2(props, ref) {
+  return /* @__PURE__ */ jsx(Form$1, { ref, ...props });
+});
+var RadioGroupContext = React74.createContext(
+  null
+);
+function RadioGroup({
+  value,
+  defaultValue,
+  onValueChange,
+  name,
+  orientation = "vertical",
+  disabled,
+  color,
+  size,
+  className,
+  children,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  const autoName = React74.useId();
+  const [internal, setInternal] = React74.useState(
+    defaultValue
+  );
+  const current = value !== void 0 ? value : internal;
+  const select = React74.useCallback(
+    (v) => {
+      if (value === void 0) setInternal(v);
+      onValueChange?.(v);
+    },
+    [value, onValueChange]
+  );
+  const ctx = React74.useMemo(
+    () => ({ name: name ?? autoName, value: current, select, disabled, color, size }),
+    [name, autoName, current, select, disabled, color, size]
+  );
+  return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "radiogroup",
+      "data-orientation": orientation,
+      className: cx(sc("radio-group"), className),
+      ...rest,
+      children
+    }
+  ) });
+}
+function RadioOption({
+  value,
+  disabled,
+  color,
+  size,
+  className,
+  children,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  const group = React74.useContext(RadioGroupContext);
+  const c = color ?? group?.color;
+  const s = size ?? group?.size ?? "md";
+  const isDisabled = disabled ?? group?.disabled;
+  const radioClasses = cx(
+    sc("radio"),
+    c && sc(`radio-${c}`),
+    s !== "md" && sc(`radio-${s}`)
+  );
+  return /* @__PURE__ */ jsxs("label", { className: cx(sc("radio-option"), className), ...rest, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "radio",
+        className: radioClasses,
+        name: group?.name,
+        value,
+        checked: group ? group.value === value : void 0,
+        onChange: group ? () => group.select(value) : void 0,
+        disabled: isDisabled
+      }
+    ),
+    children != null && /* @__PURE__ */ jsx("span", { children })
+  ] });
+}
+var CheckboxGroupContext = React74.createContext(null);
+function CheckboxGroup({
+  value,
+  defaultValue,
+  onValueChange,
+  orientation = "vertical",
+  disabled,
+  color,
+  size,
+  className,
+  children,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  const [internal, setInternal] = React74.useState(defaultValue ?? []);
+  const current = value !== void 0 ? value : internal;
+  const toggle = React74.useCallback(
+    (v, checked) => {
+      const next = checked ? [...current, v] : current.filter((x) => x !== v);
+      if (value === void 0) setInternal(next);
+      onValueChange?.(next);
+    },
+    [current, value, onValueChange]
+  );
+  const ctx = React74.useMemo(
+    () => ({ value: current, toggle, disabled, color, size }),
+    [current, toggle, disabled, color, size]
+  );
+  return /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "data-orientation": orientation,
+      className: cx(sc("checkbox-group"), className),
+      ...rest,
+      children
+    }
+  ) });
+}
+function CheckboxOption({
+  value,
+  disabled,
+  color,
+  size,
+  className,
+  children,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  const group = React74.useContext(CheckboxGroupContext);
+  const c = color ?? group?.color;
+  const s = size ?? group?.size ?? "md";
+  const isDisabled = disabled ?? group?.disabled;
+  const checkboxClasses = cx(
+    sc("checkbox"),
+    c && sc(`checkbox-${c}`),
+    s !== "md" && sc(`checkbox-${s}`)
+  );
+  return /* @__PURE__ */ jsxs("label", { className: cx(sc("checkbox-option"), className), ...rest, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "checkbox",
+        className: checkboxClasses,
+        value,
+        checked: group ? group.value.includes(value) : void 0,
+        onChange: group ? (e) => group.toggle(value, e.target.checked) : void 0,
+        disabled: isDisabled
+      }
+    ),
+    children != null && /* @__PURE__ */ jsx("span", { children })
+  ] });
+}
+var Slider = React74.forwardRef(function Slider2({ color, size = "md", showValue, className, value, defaultValue, ...rest }, ref) {
+  const sc = useSilicaClass();
+  const src = value ?? defaultValue;
+  const thumbCount = Array.isArray(src) ? Math.max(src.length, 1) : 1;
+  return /* @__PURE__ */ jsxs(
+    Slider$1.Root,
+    {
+      ref,
+      value,
+      defaultValue,
+      className: cx(
+        sc("slider"),
+        color && sc(`slider-${color}`),
+        size !== "md" && sc(`slider-${size}`),
+        className
+      ),
+      ...rest,
+      children: [
+        showValue && /* @__PURE__ */ jsx(Slider$1.Value, { className: cx(sc("slider-value")) }),
+        /* @__PURE__ */ jsx(Slider$1.Control, { className: cx(sc("slider-control")), children: /* @__PURE__ */ jsxs(Slider$1.Track, { className: cx(sc("slider-track")), children: [
+          /* @__PURE__ */ jsx(Slider$1.Indicator, { className: cx(sc("slider-indicator")) }),
+          Array.from({ length: thumbCount }, (_, i) => /* @__PURE__ */ jsx(Slider$1.Thumb, { className: cx(sc("slider-thumb")) }, i))
+        ] }) })
+      ]
+    }
+  );
+});
+var Switch = React74.forwardRef(function Switch2({ color, size = "md", className, ...rest }, ref) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(
+    Switch$1.Root,
+    {
+      ref,
+      className: cx(
+        sc("switch"),
+        color && sc(`switch-${color}`),
+        size !== "md" && sc(`switch-${size}`),
+        className
+      ),
+      ...rest,
+      children: /* @__PURE__ */ jsx(Switch$1.Thumb, { className: cx(sc("switch-thumb")) })
+    }
+  );
+});
+var ChevronIcon2 = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6", strokeLinecap: "round", strokeLinejoin: "round" })
+  }
+);
+function Collapsible({ className, ...rest }) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(Collapsible$1.Root, { className: cx(sc("collapsible"), className), ...rest });
+}
+function CollapsibleTrigger({
+  className,
+  children,
+  chevron = true,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsxs(
+    Collapsible$1.Trigger,
+    {
+      className: cx(sc("collapsible-trigger"), className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("span", { children }),
+        chevron && /* @__PURE__ */ jsx(ChevronIcon2, {})
+      ]
+    }
+  );
+}
+function CollapsiblePanel({
+  className,
+  children,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(
+    Collapsible$1.Panel,
+    {
+      className: cx(sc("collapsible-panel"), className),
+      ...rest,
+      children: /* @__PURE__ */ jsx("div", { className: cx(sc("collapsible-content")), children })
+    }
+  );
+}
+var asRender2 = (el) => el;
+var AlertDialog = AlertDialog$1.Root;
+function AlertDialogTrigger({
+  children
+}) {
+  return /* @__PURE__ */ jsx(AlertDialog$1.Trigger, { render: asRender2(children) });
+}
+function AlertDialogClose({
+  children
+}) {
+  return /* @__PURE__ */ jsx(AlertDialog$1.Close, { render: asRender2(children) });
+}
+function AlertDialogContent({
+  className,
+  backdropClassName,
+  children,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsxs(AlertDialog$1.Portal, { children: [
+    /* @__PURE__ */ jsx(
+      AlertDialog$1.Backdrop,
+      {
+        className: cx(sc("dialog-backdrop"), backdropClassName)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AlertDialog$1.Popup,
+      {
+        className: cx(sc("dialog-popup"), className),
+        ...rest,
+        children
+      }
+    )
+  ] });
+}
+function AlertDialogTitle({
+  className,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(
+    AlertDialog$1.Title,
+    {
+      className: cx(sc("dialog-title"), className),
+      ...rest
+    }
+  );
+}
+function AlertDialogDescription({
+  className,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(
+    AlertDialog$1.Description,
+    {
+      className: cx(sc("dialog-description"), className),
+      ...rest
+    }
+  );
+}
+var FilterContext = React74.createContext(null);
+var CloseIcon2 = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2.25",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12", strokeLinecap: "round" })
+  }
+);
+function Filter({
+  value,
+  defaultValue,
+  onValueChange,
+  color,
+  disabled,
+  showReset = true,
+  resetLabel = "Reset filter",
+  className,
+  children,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  const [internal, setInternal] = React74.useState(
+    defaultValue
+  );
+  const current = value !== void 0 ? value : internal;
+  const select = React74.useCallback(
+    (v) => {
+      if (value === void 0) setInternal(v);
+      onValueChange?.(v);
+    },
+    [value, onValueChange]
+  );
+  const ctx = React74.useMemo(
+    () => ({ value: current, select, disabled }),
+    [current, select, disabled]
+  );
+  return /* @__PURE__ */ jsx(FilterContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "radiogroup",
+      className: cx(sc("filter"), color && sc(`filter-${color}`), className),
+      ...rest,
+      children: [
+        showReset && current != null && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: cx(sc("filter-reset")),
+            "aria-label": resetLabel,
+            onClick: () => select(void 0),
+            disabled,
+            children: /* @__PURE__ */ jsx(CloseIcon2, {})
+          }
+        ),
+        children
+      ]
+    }
+  ) });
+}
+var FilterItem = React74.forwardRef(
+  function FilterItem2({ value, disabled, className, children, onClick, ...rest }, ref) {
+    const sc = useSilicaClass();
+    const group = React74.useContext(FilterContext);
+    const selected = group?.value === value;
+    const isDisabled = disabled ?? group?.disabled;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        role: "radio",
+        "aria-checked": selected,
+        "data-selected": selected ? "" : void 0,
+        disabled: isDisabled,
+        className: cx(sc("filter-item"), className),
+        onClick: (e) => {
+          onClick?.(e);
+          if (!e.defaultPrevented) group?.select(value);
+        },
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var ChevronDownIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var ChevronUpIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "m18 15-6-6-6 6", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var CheckIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+function SelectItem({ className, children, ...rest }) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsxs(Select$1.Item, { className: cx(sc("select-item"), className), ...rest, children: [
+    /* @__PURE__ */ jsx(Select$1.ItemIndicator, { className: cx(sc("select-item-indicator")), children: /* @__PURE__ */ jsx(CheckIcon, {}) }),
+    /* @__PURE__ */ jsx(Select$1.ItemText, { children })
+  ] });
+}
+function SelectGroup(props) {
+  return /* @__PURE__ */ jsx(Select$1.Group, { ...props });
+}
+function SelectGroupLabel({
+  className,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(
+    Select$1.GroupLabel,
+    {
+      className: cx(sc("select-group-label"), className),
+      ...rest
+    }
+  );
+}
+function SelectSeparator({
+  className,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(
+    Select$1.Separator,
+    {
+      className: cx(sc("select-separator"), className),
+      ...rest
+    }
+  );
+}
+function Select({
+  value,
+  defaultValue,
+  onValueChange,
+  multiple,
+  items,
+  name,
+  disabled,
+  required,
+  readOnly,
+  placeholder,
+  color,
+  size = "md",
+  side = "bottom",
+  align = "start",
+  sideOffset = 6,
+  alignItemWithTrigger = false,
+  className,
+  popupClassName,
+  id,
+  children,
+  ...aria
+}) {
+  const sc = useSilicaClass();
+  const autoItems = !children && items ? Array.isArray(items) ? items.map((it) => /* @__PURE__ */ jsx(SelectItem, { value: it.value, children: it.label }, String(it.value))) : Object.entries(items).map(([v, label]) => /* @__PURE__ */ jsx(SelectItem, { value: v, children: label }, v)) : null;
+  return /* @__PURE__ */ jsxs(
+    Select$1.Root,
+    {
+      value,
+      defaultValue,
+      onValueChange,
+      multiple,
+      items,
+      name,
+      disabled,
+      required,
+      readOnly,
+      children: [
+        /* @__PURE__ */ jsxs(
+          Select$1.Trigger,
+          {
+            id,
+            className: cx(
+              sc("select"),
+              color && sc(`select-${color}`),
+              size !== "md" && sc(`select-${size}`),
+              sc("select-trigger"),
+              className
+            ),
+            ...aria,
+            children: [
+              /* @__PURE__ */ jsx(Select$1.Value, { className: cx(sc("select-value")) }),
+              placeholder != null && /* @__PURE__ */ jsx("span", { className: cx(sc("select-placeholder")), children: placeholder }),
+              /* @__PURE__ */ jsx(Select$1.Icon, { className: cx(sc("select-icon")), children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(
+          Select$1.Positioner,
+          {
+            side,
+            align,
+            sideOffset,
+            alignItemWithTrigger,
+            children: /* @__PURE__ */ jsxs(Select$1.Popup, { className: cx(sc("select-popup"), popupClassName), children: [
+              /* @__PURE__ */ jsx(
+                Select$1.ScrollUpArrow,
+                {
+                  className: cx(sc("select-scroll-arrow")),
+                  "data-direction": "up",
+                  children: /* @__PURE__ */ jsx(ChevronUpIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(Select$1.List, { children: children ?? autoItems }),
+              /* @__PURE__ */ jsx(
+                Select$1.ScrollDownArrow,
+                {
+                  className: cx(sc("select-scroll-arrow")),
+                  "data-direction": "down",
+                  children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+                }
+              )
+            ] })
+          }
+        ) })
+      ]
+    }
+  );
+}
+var ChevronDownIcon2 = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var CheckIcon2 = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var XIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.25", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12", strokeLinecap: "round" }) });
+function defaultLabel(item) {
+  if (item != null && typeof item === "object" && "label" in item) {
+    return item.label;
+  }
+  return String(item);
+}
+function ComboboxItem({
+  className,
+  children,
+  indicator = true,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsxs(Combobox$1.Item, { className: cx(sc("select-item"), className), ...rest, children: [
+    indicator && /* @__PURE__ */ jsx(Combobox$1.ItemIndicator, { className: cx(sc("select-item-indicator")), children: /* @__PURE__ */ jsx(CheckIcon2, {}) }),
+    children
+  ] });
+}
+function Combobox({
+  items,
+  value,
+  defaultValue,
+  onValueChange,
+  name,
+  disabled,
+  required,
+  placeholder,
+  emptyMessage = "No results.",
+  color,
+  size = "md",
+  clearable = true,
+  side = "bottom",
+  align = "start",
+  sideOffset = 6,
+  className,
+  popupClassName,
+  itemToStringLabel,
+  renderItem,
+  id,
+  ...aria
+}) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsxs(
+    Combobox$1.Root,
+    {
+      items,
+      value,
+      defaultValue,
+      onValueChange,
+      name,
+      disabled,
+      required,
+      itemToStringLabel,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: cx(sc("combobox-control")), children: [
+          /* @__PURE__ */ jsx(
+            Combobox$1.Input,
+            {
+              id,
+              placeholder,
+              className: cx(
+                sc("input"),
+                color && sc(`input-${color}`),
+                size !== "md" && sc(`input-${size}`),
+                sc("combobox-input"),
+                className
+              ),
+              ...aria
+            }
+          ),
+          clearable && /* @__PURE__ */ jsx(
+            Combobox$1.Clear,
+            {
+              className: cx(sc("combobox-clear")),
+              "aria-label": "Clear",
+              children: /* @__PURE__ */ jsx(XIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Combobox$1.Trigger,
+            {
+              className: cx(sc("combobox-trigger")),
+              "aria-label": "Open",
+              children: /* @__PURE__ */ jsx(ChevronDownIcon2, {})
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(Combobox$1.Portal, { children: /* @__PURE__ */ jsx(Combobox$1.Positioner, { side, align, sideOffset, children: /* @__PURE__ */ jsxs(Combobox$1.Popup, { className: cx(sc("select-popup"), popupClassName), children: [
+          /* @__PURE__ */ jsx(Combobox$1.Empty, { className: cx(sc("combobox-empty")), children: emptyMessage }),
+          /* @__PURE__ */ jsx(Combobox$1.List, { children: (item, index) => renderItem ? renderItem(item, index) : /* @__PURE__ */ jsx(ComboboxItem, { value: item, children: defaultLabel(item) }, index) })
+        ] }) }) })
+      ]
+    }
+  );
+}
+var XIcon2 = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.25", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12", strokeLinecap: "round" }) });
+function AutocompleteItem({
+  className,
+  children,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(
+    Autocomplete$1.Item,
+    {
+      className: cx(sc("select-item"), sc("combobox-item"), className),
+      ...rest,
+      children
+    }
+  );
+}
+function Autocomplete({
+  items,
+  value,
+  defaultValue,
+  onValueChange,
+  mode = "list",
+  name,
+  disabled,
+  required,
+  placeholder,
+  emptyMessage = "No results.",
+  color,
+  size = "md",
+  clearable = true,
+  side = "bottom",
+  align = "start",
+  sideOffset = 6,
+  className,
+  popupClassName,
+  renderItem,
+  id,
+  ...aria
+}) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsxs(
+    Autocomplete$1.Root,
+    {
+      items,
+      value,
+      defaultValue,
+      onValueChange,
+      mode,
+      name,
+      disabled,
+      required,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: cx(sc("combobox-control")), children: [
+          /* @__PURE__ */ jsx(
+            Autocomplete$1.Input,
+            {
+              id,
+              placeholder,
+              className: cx(
+                sc("input"),
+                color && sc(`input-${color}`),
+                size !== "md" && sc(`input-${size}`),
+                sc("combobox-input"),
+                className
+              ),
+              ...aria
+            }
+          ),
+          clearable && /* @__PURE__ */ jsx(
+            Autocomplete$1.Clear,
+            {
+              className: cx(sc("combobox-clear")),
+              "aria-label": "Clear",
+              children: /* @__PURE__ */ jsx(XIcon2, {})
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(Autocomplete$1.Portal, { children: /* @__PURE__ */ jsx(
+          Autocomplete$1.Positioner,
+          {
+            side,
+            align,
+            sideOffset,
+            children: /* @__PURE__ */ jsxs(Autocomplete$1.Popup, { className: cx(sc("select-popup"), popupClassName), children: [
+              /* @__PURE__ */ jsx(Autocomplete$1.Empty, { className: cx(sc("combobox-empty")), children: emptyMessage }),
+              /* @__PURE__ */ jsx(Autocomplete$1.List, { children: (item, index) => renderItem ? renderItem(item, index) : /* @__PURE__ */ jsx(AutocompleteItem, { value: item, children: item }, index) })
+            ] })
+          }
+        ) })
+      ]
+    }
+  );
+}
+var REF_SUNDAY = new Date(2023, 0, 1);
+function startOfDay(d) {
+  const x = new Date(d);
+  x.setHours(0, 0, 0, 0);
+  return x;
+}
+function startOfMonth(d) {
+  const x = startOfDay(d);
+  x.setDate(1);
+  return x;
+}
+function addDays(d, n) {
+  const x = new Date(d);
+  x.setDate(x.getDate() + n);
+  return x;
+}
+function addMonths(d, n) {
+  const x = startOfMonth(d);
+  x.setMonth(x.getMonth() + n);
+  return x;
+}
+function isSameDay(a, b) {
+  return !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function isSameMonth(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+}
+function compareDay(a, b) {
+  const x = startOfDay(a).getTime();
+  const y = startOfDay(b).getTime();
+  return x < y ? -1 : x > y ? 1 : 0;
+}
+function clampDay(d, min, max) {
+  if (min && compareDay(d, min) < 0) return startOfDay(min);
+  if (max && compareDay(d, max) > 0) return startOfDay(max);
+  return startOfDay(d);
+}
+function isoDate(d) {
+  const p = (n) => String(n).padStart(2, "0");
+  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}`;
+}
+function asRange(v) {
+  if (v && v instanceof Date) return { start: v, end: null };
+  if (v && typeof v === "object") return v;
+  return { start: null, end: null };
+}
+function orderedRange(a, b) {
+  return compareDay(a, b) <= 0 ? { start: a, end: b } : { start: b, end: a };
+}
+var ChevronLeftIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var ChevronRightIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6", strokeLinecap: "round", strokeLinejoin: "round" }) });
+function Calendar({
+  mode = "single",
+  value,
+  defaultValue,
+  onValueChange,
+  month,
+  defaultMonth,
+  onMonthChange,
+  numberOfMonths = 1,
+  weekStartsOn = 0,
+  min,
+  max,
+  isDateDisabled,
+  locale,
+  color,
+  className,
+  ...aria
+}) {
+  const sc = useSilicaClass();
+  const rootRef = React74.useRef(null);
+  const shouldFocusRef = React74.useRef(false);
+  const today = React74.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
+  const [internalValue, setInternalValue] = React74.useState(
+    defaultValue ?? (mode === "range" ? { start: null, end: null } : null)
+  );
+  const current = value !== void 0 ? value : internalValue;
+  const range2 = asRange(current);
+  const initialMonth = defaultMonth ?? (range2.start ? startOfMonth(range2.start) : startOfMonth(today));
+  const [internalMonth, setInternalMonth] = React74.useState(initialMonth);
+  const viewMonth = month !== void 0 ? startOfMonth(month) : internalMonth;
+  const setView = React74.useCallback(
+    (m) => {
+      const next = startOfMonth(m);
+      if (month === void 0) setInternalMonth(next);
+      onMonthChange?.(next);
+    },
+    [month, onMonthChange]
+  );
+  const [focusedDate, setFocusedDate] = React74.useState(
+    () => clampDay(range2.start ?? today, min, max)
+  );
+  const [hoveredDate, setHoveredDate] = React74.useState(null);
+  React74.useEffect(() => {
+    if (!shouldFocusRef.current) return;
+    shouldFocusRef.current = false;
+    const el = rootRef.current?.querySelector(
+      `[data-date="${isoDate(focusedDate)}"][data-in-month]`
+    );
+    el?.focus();
+  }, [focusedDate]);
+  const weekdayLabels = React74.useMemo(() => {
+    const fmt = new Intl.DateTimeFormat(locale, { weekday: "short" });
+    return Array.from(
+      { length: 7 },
+      (_, i) => fmt.format(addDays(REF_SUNDAY, (weekStartsOn + i) % 7)).slice(0, 2)
+    );
+  }, [locale, weekStartsOn]);
+  const titleFmt = React74.useMemo(
+    () => new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }),
+    [locale]
+  );
+  function isDisabled(d) {
+    if (min && compareDay(d, min) < 0) return true;
+    if (max && compareDay(d, max) > 0) return true;
+    return isDateDisabled?.(d) ?? false;
+  }
+  function commit(next) {
+    if (value === void 0) setInternalValue(next);
+    onValueChange?.(next);
+  }
+  function selectDay(d) {
+    if (isDisabled(d)) return;
+    const day = startOfDay(d);
+    if (mode === "range") {
+      const r = range2;
+      if (!r.start || r.start && r.end) {
+        commit({ start: day, end: null });
+      } else {
+        commit(orderedRange(r.start, day));
+      }
+    } else {
+      commit(day);
+    }
+    setFocusedDate(day);
+    if (!isSameMonth(day, viewMonth)) setView(day);
+  }
+  function moveFocus(next) {
+    const clamped = clampDay(next, min, max);
+    shouldFocusRef.current = true;
+    setFocusedDate(clamped);
+    const firstVisible = viewMonth;
+    const lastVisible = addMonths(viewMonth, numberOfMonths - 1);
+    if (compareDay(clamped, firstVisible) < 0) setView(clamped);
+    else if (compareDay(clamped, addMonths(lastVisible, 1)) >= 0)
+      setView(addMonths(clamped, -(numberOfMonths - 1)));
+  }
+  function shiftView(delta) {
+    const nextView = addMonths(viewMonth, delta);
+    setView(nextView);
+    const dim = new Date(
+      nextView.getFullYear(),
+      nextView.getMonth() + 1,
+      0
+    ).getDate();
+    const target = new Date(
+      nextView.getFullYear(),
+      nextView.getMonth(),
+      Math.min(focusedDate.getDate(), dim)
+    );
+    setFocusedDate(clampDay(target, min, max));
+  }
+  function onKeyDown(e) {
+    const key = e.key;
+    let next = null;
+    if (key === "ArrowLeft") next = addDays(focusedDate, -1);
+    else if (key === "ArrowRight") next = addDays(focusedDate, 1);
+    else if (key === "ArrowUp") next = addDays(focusedDate, -7);
+    else if (key === "ArrowDown") next = addDays(focusedDate, 7);
+    else if (key === "PageUp") next = addMonths(focusedDate, -1);
+    else if (key === "PageDown") next = addMonths(focusedDate, 1);
+    else if (key === "Home") next = addDays(focusedDate, -((focusedDate.getDay() - weekStartsOn + 7) % 7));
+    else if (key === "End") next = addDays(focusedDate, 6 - (focusedDate.getDay() - weekStartsOn + 7) % 7);
+    else if (key === "Enter" || key === " ") {
+      e.preventDefault();
+      selectDay(focusedDate);
+      return;
+    } else {
+      return;
+    }
+    e.preventDefault();
+    moveFocus(next);
+  }
+  const paintRange = mode === "range" && range2.start && !range2.end && hoveredDate ? orderedRange(range2.start, hoveredDate) : range2;
+  function renderMonth(offset) {
+    const m = addMonths(viewMonth, offset);
+    const first = startOfMonth(m);
+    const lead = (first.getDay() - weekStartsOn + 7) % 7;
+    const gridStart = addDays(first, -lead);
+    const cells = Array.from({ length: 42 }, (_, i) => addDays(gridStart, i));
+    const showPrev = offset === 0;
+    const showNext = offset === numberOfMonths - 1;
+    const prevDisabled = !!min && compareDay(startOfMonth(m), startOfMonth(min)) <= 0;
+    const nextDisabled = !!max && compareDay(startOfMonth(m), startOfMonth(max)) >= 0;
+    return /* @__PURE__ */ jsxs("div", { className: cx(sc("calendar-month")), children: [
+      /* @__PURE__ */ jsxs("div", { className: cx(sc("calendar-header")), children: [
+        showPrev ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: cx(sc("calendar-nav")),
+            "aria-label": "Previous month",
+            disabled: prevDisabled,
+            onClick: () => shiftView(-1),
+            children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: cx(sc("calendar-nav")), "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("div", { className: cx(sc("calendar-title")), "aria-live": "polite", children: titleFmt.format(m) }),
+        showNext ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: cx(sc("calendar-nav")),
+            "aria-label": "Next month",
+            disabled: nextDisabled,
+            onClick: () => shiftView(1),
+            children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: cx(sc("calendar-nav")), "aria-hidden": "true" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: cx(sc("calendar-weekdays")), "aria-hidden": "true", children: weekdayLabels.map((w, i) => /* @__PURE__ */ jsx("div", { className: cx(sc("calendar-weekday")), children: w }, i)) }),
+      /* @__PURE__ */ jsx("div", { className: cx(sc("calendar-grid")), role: "grid", children: cells.map((cell) => {
+        const inMonth = isSameMonth(cell, m);
+        const disabled = isDisabled(cell);
+        const selected = mode === "single" && isSameDay(cell, range2.start);
+        const isStart = mode === "range" && isSameDay(cell, paintRange.start);
+        const isEnd = mode === "range" && isSameDay(cell, paintRange.end);
+        const inRange = mode === "range" && !!paintRange.start && !!paintRange.end && compareDay(cell, paintRange.start) > 0 && compareDay(cell, paintRange.end) < 0;
+        const isFocused = isSameDay(cell, focusedDate);
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: cx(sc("calendar-day")),
+            "data-date": isoDate(cell),
+            "data-in-month": inMonth ? "" : void 0,
+            "data-outside": !inMonth ? "" : void 0,
+            "data-today": isSameDay(cell, today) ? "" : void 0,
+            "data-selected": selected ? "" : void 0,
+            "data-range-start": isStart ? "" : void 0,
+            "data-range-end": isEnd ? "" : void 0,
+            "data-in-range": inRange ? "" : void 0,
+            "data-disabled": disabled ? "" : void 0,
+            "aria-disabled": disabled || void 0,
+            "aria-pressed": selected || isStart || isEnd || void 0,
+            tabIndex: inMonth && isFocused ? 0 : -1,
+            onClick: () => selectDay(cell),
+            onMouseEnter: mode === "range" ? () => setHoveredDate(cell) : void 0,
+            onFocus: () => setFocusedDate(startOfDay(cell)),
+            children: cell.getDate()
+          },
+          isoDate(cell) + (inMonth ? "" : "-o")
+        );
+      }) })
+    ] }, offset);
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: rootRef,
+      className: cx(
+        sc("calendar"),
+        color && sc(`calendar-${color}`),
+        className
+      ),
+      onKeyDown,
+      onMouseLeave: mode === "range" ? () => setHoveredDate(null) : void 0,
+      ...aria,
+      children: /* @__PURE__ */ jsx("div", { className: cx(sc("calendar-months")), children: Array.from(
+        { length: Math.max(1, numberOfMonths) },
+        (_, i) => renderMonth(i)
+      ) })
+    }
+  );
+}
+var CalendarIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }),
+  /* @__PURE__ */ jsx("path", { d: "M16 2v4M8 2v4M3 10h18", strokeLinecap: "round" })
+] });
+function DateTrigger({
+  color,
+  size = "md",
+  disabled,
+  placeholder,
+  label,
+  className,
+  id,
+  ariaLabel
+}) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsxs(
+    Popover$1.Trigger,
+    {
+      id,
+      disabled,
+      "aria-label": ariaLabel,
+      "data-placeholder": label == null ? "" : void 0,
+      className: cx(
+        sc("input"),
+        color && sc(`input-${color}`),
+        size !== "md" && sc(`input-${size}`),
+        sc("date-field"),
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: cx(sc("date-field-value")), children: label ?? placeholder }),
+        /* @__PURE__ */ jsx("span", { className: cx(sc("date-field-icon")), children: /* @__PURE__ */ jsx(CalendarIcon, {}) })
+      ]
+    }
+  );
+}
+function DatePopup({
+  side,
+  align,
+  sideOffset,
+  popupClassName,
+  children
+}) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, { side, align, sideOffset, children: /* @__PURE__ */ jsx(Popover$1.Popup, { className: cx(sc("calendar-popup"), popupClassName), children }) }) });
+}
+function DatePicker({
+  value,
+  defaultValue,
+  onValueChange,
+  placeholder = "Pick a date",
+  disabled,
+  weekStartsOn,
+  min,
+  max,
+  isDateDisabled,
+  locale,
+  formatOptions = { dateStyle: "medium" },
+  color,
+  size,
+  side = "bottom",
+  align = "start",
+  sideOffset = 6,
+  className,
+  popupClassName,
+  id,
+  "aria-label": ariaLabel
+}) {
+  const [open, setOpen] = React74.useState(false);
+  const [internal, setInternal] = React74.useState(
+    defaultValue ?? null
+  );
+  const current = value !== void 0 ? value : internal;
+  const fmt = React74.useMemo(
+    () => new Intl.DateTimeFormat(locale, formatOptions),
+    [locale, formatOptions]
+  );
+  const label = current ? fmt.format(current) : null;
+  function handleChange(v) {
+    const date = v ?? null;
+    if (value === void 0) setInternal(date);
+    onValueChange?.(date);
+    setOpen(false);
+  }
+  return /* @__PURE__ */ jsxs(Popover$1.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(
+      DateTrigger,
+      {
+        color,
+        size,
+        disabled,
+        placeholder,
+        label,
+        className,
+        id,
+        ariaLabel
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DatePopup,
+      {
+        side,
+        align,
+        sideOffset,
+        popupClassName,
+        children: /* @__PURE__ */ jsx(
+          Calendar,
+          {
+            mode: "single",
+            value: current,
+            onValueChange: handleChange,
+            weekStartsOn,
+            min,
+            max,
+            isDateDisabled,
+            locale,
+            color
+          }
+        )
+      }
+    )
+  ] });
+}
+var EMPTY_RANGE = { start: null, end: null };
+function DateRangePicker({
+  value,
+  defaultValue,
+  onValueChange,
+  placeholder = "Pick a range",
+  disabled,
+  numberOfMonths = 2,
+  weekStartsOn,
+  min,
+  max,
+  isDateDisabled,
+  locale,
+  formatOptions = { dateStyle: "medium" },
+  color,
+  size,
+  side = "bottom",
+  align = "start",
+  sideOffset = 6,
+  className,
+  popupClassName,
+  id,
+  "aria-label": ariaLabel
+}) {
+  const [open, setOpen] = React74.useState(false);
+  const [internal, setInternal] = React74.useState(
+    defaultValue ?? EMPTY_RANGE
+  );
+  const current = value !== void 0 ? value : internal;
+  const fmt = React74.useMemo(
+    () => new Intl.DateTimeFormat(locale, formatOptions),
+    [locale, formatOptions]
+  );
+  const label = current.start && current.end ? `${fmt.format(current.start)} \u2013 ${fmt.format(current.end)}` : current.start ? `${fmt.format(current.start)} \u2013 \u2026` : null;
+  function handleChange(v) {
+    const next = v ?? EMPTY_RANGE;
+    if (value === void 0) setInternal(next);
+    onValueChange?.(next);
+    if (next.start && next.end) setOpen(false);
+  }
+  return /* @__PURE__ */ jsxs(Popover$1.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(
+      DateTrigger,
+      {
+        color,
+        size,
+        disabled,
+        placeholder,
+        label,
+        className,
+        id,
+        ariaLabel
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DatePopup,
+      {
+        side,
+        align,
+        sideOffset,
+        popupClassName,
+        children: /* @__PURE__ */ jsx(
+          Calendar,
+          {
+            mode: "range",
+            numberOfMonths,
+            value: current,
+            onValueChange: handleChange,
+            weekStartsOn,
+            min,
+            max,
+            isDateDisabled,
+            locale,
+            color
+          }
+        )
+      }
+    )
+  ] });
+}
+function Tooltip({
+  content,
+  children,
+  side = "top",
+  align = "center",
+  sideOffset = 8,
+  delay,
+  closeDelay,
+  open,
+  defaultOpen,
+  onOpenChange,
+  disabled,
+  arrow = true,
+  className
+}) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsxs(
+    Tooltip$1.Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange,
+      disabled,
+      children: [
+        /* @__PURE__ */ jsx(
+          Tooltip$1.Trigger,
+          {
+            render: children,
+            delay,
+            closeDelay
+          }
+        ),
+        /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, { side, align, sideOffset, children: /* @__PURE__ */ jsxs(Tooltip$1.Popup, { className: cx(sc("tooltip"), className), children: [
+          arrow && /* @__PURE__ */ jsx(Tooltip$1.Arrow, { className: cx(sc("tooltip-arrow")) }),
+          content
+        ] }) }) })
+      ]
+    }
+  );
+}
+function TooltipProvider(props) {
+  return /* @__PURE__ */ jsx(Tooltip$1.Provider, { ...props });
+}
+var asRender3 = (el) => el;
+var Dialog = Dialog$1.Root;
+function DialogTrigger({ children }) {
+  return /* @__PURE__ */ jsx(Dialog$1.Trigger, { render: asRender3(children) });
+}
+function DialogClose({ children }) {
+  return /* @__PURE__ */ jsx(Dialog$1.Close, { render: asRender3(children) });
+}
+function DialogContent({
+  className,
+  backdropClassName,
+  children,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsxs(Dialog$1.Portal, { children: [
+    /* @__PURE__ */ jsx(
+      Dialog$1.Backdrop,
+      {
+        className: cx(sc("dialog-backdrop"), backdropClassName)
+      }
+    ),
+    /* @__PURE__ */ jsx(Dialog$1.Popup, { className: cx(sc("dialog-popup"), className), ...rest, children })
+  ] });
+}
+function DialogTitle({ className, ...rest }) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(Dialog$1.Title, { className: cx(sc("dialog-title"), className), ...rest });
+}
+function DialogDescription({
+  className,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(
+    Dialog$1.Description,
+    {
+      className: cx(sc("dialog-description"), className),
+      ...rest
+    }
+  );
+}
+var asRender4 = (el) => el;
+var Popover = Popover$1.Root;
+function PopoverTrigger({ children }) {
+  return /* @__PURE__ */ jsx(Popover$1.Trigger, { render: asRender4(children) });
+}
+function PopoverClose({ children }) {
+  return /* @__PURE__ */ jsx(Popover$1.Close, { render: asRender4(children) });
+}
+function PopoverContent({
+  className,
+  children,
+  side = "bottom",
+  align = "center",
+  sideOffset = 8,
+  arrow = false,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, { side, align, sideOffset, children: /* @__PURE__ */ jsxs(Popover$1.Popup, { className: cx(sc("popover"), className), ...rest, children: [
+    arrow && /* @__PURE__ */ jsx(Popover$1.Arrow, { className: cx(sc("popover-arrow")) }),
+    children
+  ] }) }) });
+}
+function PopoverTitle({ className, ...rest }) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(Popover$1.Title, { className: cx(sc("popover-title"), className), ...rest });
+}
+function PopoverDescription({
+  className,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(
+    Popover$1.Description,
+    {
+      className: cx(sc("popover-description"), className),
+      ...rest
+    }
+  );
+}
+var asRender5 = (el) => el;
+var DropdownMenu = Menu$1.Root;
+function DropdownMenuTrigger({ children }) {
+  return /* @__PURE__ */ jsx(Menu$1.Trigger, { render: asRender5(children) });
+}
+function DropdownMenuContent({
+  className,
+  children,
+  side = "bottom",
+  align = "start",
+  sideOffset = 6,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(Menu$1.Portal, { children: /* @__PURE__ */ jsx(Menu$1.Positioner, { side, align, sideOffset, children: /* @__PURE__ */ jsx(Menu$1.Popup, { className: cx(sc("dropdown"), className), ...rest, children }) }) });
+}
+function DropdownMenuItem({ className, ...rest }) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(Menu$1.Item, { className: cx(sc("dropdown-item"), className), ...rest });
+}
+function DropdownMenuSeparator({
+  className,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(
+    Menu$1.Separator,
+    {
+      className: cx(sc("dropdown-separator"), className),
+      ...rest
+    }
+  );
+}
+function DropdownMenuGroup(props) {
+  return /* @__PURE__ */ jsx(Menu$1.Group, { ...props });
+}
+function DropdownMenuLabel({
+  className,
+  ...rest
+}) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(Menu$1.GroupLabel, { className: cx(sc("dropdown-label"), className), ...rest });
+}
+function Tabs({ variant = "underline", color, className, ...rest }) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(
+    Tabs$1.Root,
+    {
+      className: cx(
+        sc("tabs"),
+        variant !== "underline" && sc(`tabs-${variant}`),
+        color && sc(`tabs-${color}`),
+        className
+      ),
+      ...rest
+    }
+  );
+}
+function TabsList({ className, children, indicator = true, ...rest }) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsxs(Tabs$1.List, { className: cx(sc("tabs-list"), className), ...rest, children: [
+    children,
+    indicator && /* @__PURE__ */ jsx(Tabs$1.Indicator, { className: cx(sc("tabs-indicator")) })
+  ] });
+}
+function TabsTab({ className, ...rest }) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(Tabs$1.Tab, { className: cx(sc("tabs-tab"), className), ...rest });
+}
+function TabsPanel({ className, ...rest }) {
+  const sc = useSilicaClass();
+  return /* @__PURE__ */ jsx(Tabs$1.Panel, { className: cx(sc("tabs-panel"), className), ...rest });
+}
+var Checkbox = React74.forwardRef(
+  function Checkbox2({ color, size = "md", className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    const classes = cx(
+      sc("checkbox"),
+      color && sc(`checkbox-${color}`),
+      size !== "md" && sc(`checkbox-${size}`),
+      className
+    );
+    return /* @__PURE__ */ jsx("input", { ref, type: "checkbox", className: classes, ...rest });
+  }
+);
+var Radio = React74.forwardRef(
+  function Radio2({ color, size = "md", className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    const classes = cx(
+      sc("radio"),
+      color && sc(`radio-${color}`),
+      size !== "md" && sc(`radio-${size}`),
+      className
+    );
+    return /* @__PURE__ */ jsx("input", { ref, type: "radio", className: classes, ...rest });
+  }
+);
+var Toggle = React74.forwardRef(
+  function Toggle2({ color, size = "md", className, ...rest }, ref) {
+    const sc = useSilicaClass();
+    const classes = cx(
+      sc("toggle"),
+      color && sc(`toggle-${color}`),
+      size !== "md" && sc(`toggle-${size}`),
+      className
+    );
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "checkbox",
+        role: "switch",
+        className: classes,
+        ...rest
+      }
+    );
+  }
+);
+var TagInput = React74.forwardRef(
+  function TagInput2({
+    value,
+    defaultValue,
+    onValueChange,
+    placeholder,
+    disabled,
+    color,
+    size = "md",
+    separators = ["Enter", ","],
+    dedupe = true,
+    max,
+    addOnBlur = true,
+    inputProps,
+    className,
+    ...rest
+  }, forwardedRef) {
+    const sc = useSilicaClass();
+    const isControlled = value !== void 0;
+    const [uncontrolled, setUncontrolled] = React74.useState(
+      defaultValue ?? []
+    );
+    const tags = isControlled ? value : uncontrolled;
+    const [text, setText] = React74.useState("");
+    const fieldRef = React74.useRef(null);
+    const commit = (next) => {
+      if (!isControlled) setUncontrolled(next);
+      onValueChange?.(next);
+    };
+    const addTag = (raw) => {
+      const t = raw.trim();
+      if (!t) return;
+      setText("");
+      if (dedupe && tags.includes(t)) return;
+      if (max != null && tags.length >= max) return;
+      commit([...tags, t]);
+    };
+    const removeAt = (index) => {
+      commit(tags.filter((_, i) => i !== index));
+    };
+    const handleKeyDown = (e) => {
+      if (separators.includes(e.key)) {
+        e.preventDefault();
+        addTag(text);
+      } else if (e.key === "Backspace" && text === "" && tags.length > 0) {
+        removeAt(tags.length - 1);
+      }
+      inputProps?.onKeyDown?.(e);
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: forwardedRef,
+        className: cx(
+          sc("tag-input"),
+          color && sc(`tag-input-${color}`),
+          size !== "md" && sc(`tag-input-${size}`),
+          className
+        ),
+        "data-disabled": disabled || void 0,
+        onMouseDown: (e) => {
+          if (e.target === e.currentTarget) {
+            e.preventDefault();
+            fieldRef.current?.focus();
+          }
+        },
+        ...rest,
+        children: [
+          tags.map((tag, i) => /* @__PURE__ */ jsxs("span", { className: cx(sc("tag-input-chip")), children: [
+            /* @__PURE__ */ jsx("span", { className: cx(sc("tag-input-chip-label")), children: tag }),
+            !disabled && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: cx(sc("tag-input-remove")),
+                "aria-label": `Remove ${tag}`,
+                onClick: (e) => {
+                  e.stopPropagation();
+                  removeAt(i);
+                },
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2.5",
+                    strokeLinecap: "round",
+                    children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6L6 18" })
+                  }
+                )
+              }
+            )
+          ] }, `${tag}-${i}`)),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: fieldRef,
+              type: "text",
+              className: cx(sc("tag-input-field")),
+              value: text,
+              placeholder: tags.length === 0 ? placeholder : void 0,
+              disabled,
+              ...inputProps,
+              onChange: (e) => {
+                setText(e.target.value);
+                inputProps?.onChange?.(e);
+              },
+              onKeyDown: handleKeyDown,
+              onBlur: (e) => {
+                if (addOnBlur) addTag(text);
+                inputProps?.onBlur?.(e);
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+var EmptyState = React74.forwardRef(
+  function EmptyState2({ icon, title, description, actions, size = "md", className, children, ...rest }, ref) {
+    const sc = useSilicaClass();
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cx(
+          sc("empty-state"),
+          size === "sm" && sc("empty-state-sm"),
+          className
+        ),
+        ...rest,
+        children: [
+          icon != null && /* @__PURE__ */ jsx("div", { className: cx(sc("empty-state-icon")), children: icon }),
+          title != null && /* @__PURE__ */ jsx("div", { className: cx(sc("empty-state-title")), children: title }),
+          description != null && /* @__PURE__ */ jsx("div", { className: cx(sc("empty-state-description")), children: description }),
+          children,
+          actions != null && /* @__PURE__ */ jsx("div", { className: cx(sc("empty-state-actions")), children: actions })
+        ]
+      }
+    );
+  }
+);
+
+// src/lib/oklch.ts
+var MAX_CHROMA = 0.37;
+var clamp01 = (x) => x < 0 ? 0 : x > 1 ? 1 : x;
+function gammaEncode(x) {
+  return x <= 31308e-7 ? 12.92 * x : 1.055 * Math.pow(x, 1 / 2.4) - 0.055;
+}
+function gammaDecode(x) {
+  return x <= 0.04045 ? x / 12.92 : Math.pow((x + 0.055) / 1.055, 2.4);
+}
+function oklchToLinear(l, c, h) {
+  const hr = h * Math.PI / 180;
+  const a = c * Math.cos(hr);
+  const b = c * Math.sin(hr);
+  const l_ = l + 0.3963377774 * a + 0.2158037573 * b;
+  const m_ = l - 0.1055613458 * a - 0.0638541728 * b;
+  const s_ = l - 0.0894841775 * a - 1.291485548 * b;
+  const L = l_ * l_ * l_;
+  const M = m_ * m_ * m_;
+  const S = s_ * s_ * s_;
+  return [
+    4.0767416621 * L - 3.3077115913 * M + 0.2309699292 * S,
+    -1.2684380046 * L + 2.6097574011 * M - 0.3413193965 * S,
+    -0.0041960863 * L - 0.7034186147 * M + 1.707614701 * S
+  ];
+}
+function inGamut(l, c, h) {
+  const [r, g, b] = oklchToLinear(l, c, h);
+  const eps = 1e-4;
+  return r >= -eps && r <= 1 + eps && g >= -eps && g <= 1 + eps && b >= -eps && b <= 1 + eps;
+}
+function oklchToRgb(l, c, h) {
+  const [r, g, b] = oklchToLinear(l, c, h);
+  return [
+    Math.round(clamp01(gammaEncode(r)) * 255),
+    Math.round(clamp01(gammaEncode(g)) * 255),
+    Math.round(clamp01(gammaEncode(b)) * 255)
+  ];
+}
+function oklchToHex(l, c, h) {
+  const [r, g, b] = oklchToRgb(l, c, h);
+  const hex = (n) => n.toString(16).padStart(2, "0");
+  return `#${hex(r)}${hex(g)}${hex(b)}`;
+}
+function hexToOklch(hex) {
+  const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m || !m[1]) return null;
+  let s = m[1];
+  if (s.length === 3) s = s.replace(/./g, (ch) => ch + ch);
+  const rn = parseInt(s.slice(0, 2), 16) / 255;
+  const gn = parseInt(s.slice(2, 4), 16) / 255;
+  const bn = parseInt(s.slice(4, 6), 16) / 255;
+  const r = gammaDecode(rn);
+  const g = gammaDecode(gn);
+  const b = gammaDecode(bn);
+  const l = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;
+  const m2 = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;
+  const s2 = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;
+  const l_ = Math.cbrt(l);
+  const m_ = Math.cbrt(m2);
+  const s_ = Math.cbrt(s2);
+  const L = 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_;
+  const a = 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_;
+  const bb = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_;
+  const c = Math.sqrt(a * a + bb * bb);
+  let hue = Math.atan2(bb, a) * 180 / Math.PI;
+  if (hue < 0) hue += 360;
+  return { l: L, c, h: hue };
+}
+function formatOklch(l, c, h) {
+  const r3 = (n) => Math.round(n * 1e3) / 1e3;
+  const r1 = (n) => Math.round(n * 10) / 10;
+  return `oklch(${r3(l)} ${r3(c)} ${r1(h)})`;
+}
+function parseOklch(input) {
+  const m = /oklch\(\s*([\d.]+%?)\s+([\d.]+%?)\s+([\d.]+)/i.exec(input);
+  if (!m) return null;
+  const [, ls, cs, hs] = m;
+  if (ls === void 0 || cs === void 0 || hs === void 0) return null;
+  const num = (s, scale) => s.endsWith("%") ? parseFloat(s) / 100 * scale : parseFloat(s);
+  return { l: num(ls, 1), c: num(cs, 1), h: parseFloat(hs) };
+}
+var DEFAULT = { l: 0.7, c: 0.15, h: 250 };
+var clamp2 = (x, lo, hi) => x < lo ? lo : x > hi ? hi : x;
+function parseInput(s) {
+  if (!s) return DEFAULT;
+  return parseOklch(s) ?? hexToOklch(s) ?? DEFAULT;
+}
+function ColorSlider({
+  label,
+  valueText,
+  min,
+  max,
+  step,
+  value,
+  trackStyle,
+  disabled,
+  onChange
+}) {
+  const sc = useSilicaClass();
+  const trackRef = React74.useRef(null);
+  const pct = (value - min) / (max - min) * 100;
+  const setFromClientX = (clientX) => {
+    const el = trackRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const ratio = clamp2((clientX - rect.left) / rect.width, 0, 1);
+    onChange(min + ratio * (max - min));
+  };
+  const onKeyDown = (e) => {
+    const big = step * 10;
+    let next = null;
+    if (e.key === "ArrowLeft" || e.key === "ArrowDown") next = value - step;
+    else if (e.key === "ArrowRight" || e.key === "ArrowUp") next = value + step;
+    else if (e.key === "PageDown") next = value - big;
+    else if (e.key === "PageUp") next = value + big;
+    else if (e.key === "Home") next = min;
+    else if (e.key === "End") next = max;
+    if (next !== null) {
+      e.preventDefault();
+      onChange(clamp2(next, min, max));
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: trackRef,
+      className: cx(sc("color-picker-track")),
+      style: trackStyle,
+      role: "slider",
+      "aria-label": label,
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      "aria-valuenow": value,
+      "aria-valuetext": valueText,
+      "aria-disabled": disabled || void 0,
+      tabIndex: disabled ? -1 : 0,
+      onKeyDown: disabled ? void 0 : onKeyDown,
+      onPointerDown: (e) => {
+        if (disabled) return;
+        e.currentTarget.setPointerCapture(e.pointerId);
+        setFromClientX(e.clientX);
+      },
+      onPointerMove: (e) => {
+        if (disabled || !e.currentTarget.hasPointerCapture(e.pointerId)) return;
+        setFromClientX(e.clientX);
+      },
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cx(sc("color-picker-thumb")),
+          style: { left: `${pct}%` }
+        }
+      )
+    }
+  );
+}
+var ColorPicker = React74.forwardRef(
+  function ColorPicker2({
+    value,
+    defaultValue,
+    onValueChange,
+    format = "oklch",
+    showHex = true,
+    disabled,
+    className,
+    ...rest
+  }, forwardedRef) {
+    const sc = useSilicaClass();
+    const isControlled = value !== void 0;
+    const [internal, setInternal] = React74.useState(
+      () => parseInput(value ?? defaultValue)
+    );
+    const [hexDraft, setHexDraft] = React74.useState(null);
+    React74.useEffect(() => {
+      if (isControlled) setInternal(parseInput(value));
+    }, [value, isControlled]);
+    const { l, c, h } = internal;
+    const commit = (next) => {
+      if (!isControlled) setInternal(next);
+      const out = format === "hex" ? oklchToHex(next.l, next.c, next.h) : formatOklch(next.l, next.c, next.h);
+      onValueChange?.(out, next);
+    };
+    const hex = oklchToHex(l, c, h);
+    const hexValue = hexDraft ?? hex;
+    const commitHex = () => {
+      if (hexDraft !== null) {
+        const parsed = hexToOklch(hexDraft);
+        if (parsed) commit(parsed);
+        setHexDraft(null);
+      }
+    };
+    const lTrack = `linear-gradient(to right in oklch, oklch(0 ${c} ${h}), oklch(1 ${c} ${h}))`;
+    const cTrack = `linear-gradient(to right in oklch, oklch(${l} 0 ${h}), oklch(${l} ${MAX_CHROMA} ${h}))`;
+    const hTrack = `linear-gradient(to right in oklch, oklch(${l} ${c} 0), oklch(${l} ${c} 60), oklch(${l} ${c} 120), oklch(${l} ${c} 180), oklch(${l} ${c} 240), oklch(${l} ${c} 300), oklch(${l} ${c} 360))`;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: forwardedRef,
+        className: cx(sc("color-picker"), className),
+        "data-disabled": disabled || void 0,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: cx(sc("color-picker-preview")), children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cx(sc("color-picker-swatch")),
+                style: { backgroundColor: `oklch(${l} ${c} ${h})` }
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: cx(sc("color-picker-values")), children: [
+              /* @__PURE__ */ jsx("span", { className: cx(sc("color-picker-value-oklch")), children: formatOklch(l, c, h) }),
+              /* @__PURE__ */ jsx("span", { className: cx(sc("color-picker-value-hex")), children: hex })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: cx(sc("color-picker-sliders")), children: [
+            /* @__PURE__ */ jsxs("div", { className: cx(sc("color-picker-slider")), children: [
+              /* @__PURE__ */ jsx("span", { className: cx(sc("color-picker-slider-label")), children: "L" }),
+              /* @__PURE__ */ jsx(
+                ColorSlider,
+                {
+                  label: "Lightness",
+                  valueText: l.toFixed(2),
+                  min: 0,
+                  max: 1,
+                  step: 0.01,
+                  value: l,
+                  trackStyle: { background: lTrack },
+                  disabled,
+                  onChange: (v) => commit({ l: v, c, h })
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: cx(sc("color-picker-slider-value")), children: l.toFixed(2) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: cx(sc("color-picker-slider")), children: [
+              /* @__PURE__ */ jsx("span", { className: cx(sc("color-picker-slider-label")), children: "C" }),
+              /* @__PURE__ */ jsx(
+                ColorSlider,
+                {
+                  label: "Chroma",
+                  valueText: c.toFixed(3),
+                  min: 0,
+                  max: MAX_CHROMA,
+                  step: 5e-3,
+                  value: c,
+                  trackStyle: { background: cTrack },
+                  disabled,
+                  onChange: (v) => commit({ l, c: v, h })
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: cx(sc("color-picker-slider-value")), children: c.toFixed(2) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: cx(sc("color-picker-slider")), children: [
+              /* @__PURE__ */ jsx("span", { className: cx(sc("color-picker-slider-label")), children: "H" }),
+              /* @__PURE__ */ jsx(
+                ColorSlider,
+                {
+                  label: "Hue",
+                  valueText: `${Math.round(h)}\xB0`,
+                  min: 0,
+                  max: 360,
+                  step: 1,
+                  value: h,
+                  trackStyle: { background: hTrack },
+                  disabled,
+                  onChange: (v) => commit({ l, c, h: v })
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: cx(sc("color-picker-slider-value")), children: [
+                Math.round(h),
+                "\xB0"
+              ] })
+            ] })
+          ] }),
+          showHex && /* @__PURE__ */ jsxs("div", { className: cx(sc("color-picker-hex")), children: [
+            /* @__PURE__ */ jsx("span", { className: cx(sc("color-picker-hex-label")), children: "HEX" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                className: cx(sc("color-picker-hex-input")),
+                value: hexValue,
+                disabled,
+                spellCheck: false,
+                onChange: (e) => setHexDraft(e.target.value),
+                onBlur: commitHex,
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    commitHex();
+                  }
+                }
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+var SearchIcon = /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
+  /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" })
+] });
+function CommandPalette({
+  items,
+  open,
+  defaultOpen,
+  onOpenChange,
+  placeholder = "Type a command or search\u2026",
+  emptyMessage = "No results found.",
+  hotkey = true,
+  className
+}) {
+  const sc = useSilicaClass();
+  const isControlled = open !== void 0;
+  const [internalOpen, setInternalOpen] = React74.useState(defaultOpen ?? false);
+  const isOpen = isControlled ? open : internalOpen;
+  const [query, setQuery] = React74.useState("");
+  const [activeIndex, setActiveIndex] = React74.useState(0);
+  const listRef = React74.useRef(null);
+  const setOpen = React74.useCallback(
+    (next) => {
+      if (!isControlled) setInternalOpen(next);
+      onOpenChange?.(next);
+      if (next) {
+        setQuery("");
+        setActiveIndex(0);
+      }
+    },
+    [isControlled, onOpenChange]
+  );
+  React74.useEffect(() => {
+    if (!hotkey) return;
+    const key = (typeof hotkey === "string" ? hotkey : "k").toLowerCase();
+    const onKey = (e) => {
+      if (e.key.toLowerCase() === key && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        setOpen(!isOpen);
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [hotkey, isOpen, setOpen]);
+  const filtered = React74.useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return items;
+    return items.filter((it) => {
+      const hay = [it.label, it.description, it.group, ...it.keywords ?? []].filter(Boolean).join(" ").toLowerCase();
+      return hay.includes(q);
+    });
+  }, [items, query]);
+  const groups = React74.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    filtered.forEach((item, index) => {
+      const bucket = map.get(item.group);
+      if (bucket) bucket.push({ item, index });
+      else map.set(item.group, [{ item, index }]);
+    });
+    return [...map.entries()];
+  }, [filtered]);
+  React74.useEffect(() => {
+    if (activeIndex >= filtered.length) setActiveIndex(0);
+  }, [filtered.length, activeIndex]);
+  React74.useEffect(() => {
+    listRef.current?.querySelector("[data-active]")?.scrollIntoView({ block: "nearest" });
+  }, [activeIndex, isOpen]);
+  const move = (dir) => {
+    const n = filtered.length;
+    if (n === 0) return;
+    let i = activeIndex;
+    for (let step = 0; step < n; step++) {
+      i = (i + dir + n) % n;
+      if (!filtered[i]?.disabled) break;
+    }
+    setActiveIndex(i);
+  };
+  const select = (index) => {
+    const it = filtered[index];
+    if (!it || it.disabled) return;
+    it.onSelect?.();
+    setOpen(false);
+  };
+  const onInputKeyDown = (e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      move(1);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      move(-1);
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      select(activeIndex);
+    }
+  };
+  return /* @__PURE__ */ jsx(Dialog$1.Root, { open: isOpen, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(Dialog$1.Portal, { children: [
+    /* @__PURE__ */ jsx(Dialog$1.Backdrop, { className: cx(sc("command-palette-backdrop")) }),
+    /* @__PURE__ */ jsxs(
+      Dialog$1.Popup,
+      {
+        className: cx(sc("command-palette-popup"), className),
+        "aria-label": "Command palette",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: cx(sc("command-palette-search")), children: [
+            /* @__PURE__ */ jsx("span", { className: cx(sc("command-palette-search-icon")), children: SearchIcon }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                autoFocus: true,
+                type: "text",
+                className: cx(sc("command-palette-input")),
+                placeholder,
+                value: query,
+                spellCheck: false,
+                "aria-label": "Search commands",
+                onChange: (e) => {
+                  setQuery(e.target.value);
+                  setActiveIndex(0);
+                },
+                onKeyDown: onInputKeyDown
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: cx(sc("command-palette-list")), ref: listRef, role: "listbox", children: filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: cx(sc("command-palette-empty")), children: emptyMessage }) : groups.map(([groupKey, entries]) => /* @__PURE__ */ jsxs("div", { className: cx(sc("command-palette-group")), children: [
+            groupKey && /* @__PURE__ */ jsx("div", { className: cx(sc("command-palette-group-label")), children: groupKey }),
+            entries.map(({ item, index }) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cx(sc("command-palette-item")),
+                role: "option",
+                "aria-selected": index === activeIndex,
+                "aria-disabled": item.disabled || void 0,
+                "data-active": index === activeIndex || void 0,
+                "data-disabled": item.disabled || void 0,
+                onPointerMove: () => setActiveIndex(index),
+                onClick: () => select(index),
+                children: [
+                  item.icon && /* @__PURE__ */ jsx("span", { className: cx(sc("command-palette-item-icon")), children: item.icon }),
+                  /* @__PURE__ */ jsxs("span", { className: cx(sc("command-palette-item-body")), children: [
+                    /* @__PURE__ */ jsx("span", { className: cx(sc("command-palette-item-label")), children: item.label }),
+                    item.description && /* @__PURE__ */ jsx("span", { className: cx(sc("command-palette-item-desc")), children: item.description })
+                  ] }),
+                  item.shortcut && /* @__PURE__ */ jsx("span", { className: cx(sc("command-palette-item-shortcut")), children: item.shortcut })
+                ]
+              },
+              item.id
+            ))
+          ] }, groupKey ?? "\0")) })
+        ]
+      }
+    )
+  ] }) });
+}
+function flatten(nodes, level, expandedSet, parentId, out) {
+  for (const node of nodes) {
+    const hasChildren = !!node.children?.length;
+    const isExpanded = expandedSet.has(node.id);
+    out.push({ node, level, hasChildren, expanded: isExpanded, parentId });
+    if (hasChildren && isExpanded) {
+      flatten(node.children, level + 1, expandedSet, node.id, out);
+    }
+  }
+  return out;
+}
+var Chevron = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m9 6 6 6-6 6" }) });
+var TreeView = React74.forwardRef(
+  function TreeView2({
+    items,
+    expanded,
+    defaultExpanded,
+    onExpandedChange,
+    selected,
+    defaultSelected,
+    onSelectedChange,
+    onSelect,
+    className,
+    ...rest
+  }, forwardedRef) {
+    const sc = useSilicaClass();
+    const expandedControlled = expanded !== void 0;
+    const [expandedInternal, setExpandedInternal] = React74.useState(
+      () => new Set(defaultExpanded ?? [])
+    );
+    const expandedSet = expandedControlled ? new Set(expanded) : expandedInternal;
+    const selectedControlled = selected !== void 0;
+    const [selectedInternal, setSelectedInternal] = React74.useState(defaultSelected);
+    const selectedId = selectedControlled ? selected : selectedInternal;
+    const flat = React74.useMemo(
+      () => flatten(items, 0, expandedSet, void 0, []),
+      [items, expandedSet]
+    );
+    const [focusedId, setFocusedId] = React74.useState();
+    const activeId = focusedId ?? flat[0]?.node.id;
+    const nodeRefs = React74.useRef(/* @__PURE__ */ new Map());
+    const commitExpanded = (next) => {
+      if (!expandedControlled) setExpandedInternal(next);
+      onExpandedChange?.([...next]);
+    };
+    const toggleExpand = (id) => {
+      const next = new Set(expandedSet);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      commitExpanded(next);
+    };
+    const setExpand = (id, open) => {
+      if (expandedSet.has(id) === open) return;
+      const next = new Set(expandedSet);
+      if (open) next.add(id);
+      else next.delete(id);
+      commitExpanded(next);
+    };
+    const selectNode = (node) => {
+      if (node.disabled) return;
+      if (!selectedControlled) setSelectedInternal(node.id);
+      onSelectedChange?.(node.id);
+      onSelect?.(node);
+    };
+    const focusId = (id) => {
+      setFocusedId(id);
+      nodeRefs.current.get(id)?.focus();
+    };
+    const onKeyDown = (e, id) => {
+      const idx = flat.findIndex((f) => f.node.id === id);
+      const entry = flat[idx];
+      if (!entry) return;
+      switch (e.key) {
+        case "ArrowDown": {
+          e.preventDefault();
+          const next = flat[idx + 1];
+          if (next) focusId(next.node.id);
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault();
+          const prev = flat[idx - 1];
+          if (prev) focusId(prev.node.id);
+          break;
+        }
+        case "Home": {
+          e.preventDefault();
+          if (flat[0]) focusId(flat[0].node.id);
+          break;
+        }
+        case "End": {
+          e.preventDefault();
+          const last = flat[flat.length - 1];
+          if (last) focusId(last.node.id);
+          break;
+        }
+        case "ArrowRight": {
+          e.preventDefault();
+          if (!entry.hasChildren) break;
+          if (!entry.expanded) setExpand(entry.node.id, true);
+          else {
+            const child = flat[idx + 1];
+            if (child && child.parentId === entry.node.id) focusId(child.node.id);
+          }
+          break;
+        }
+        case "ArrowLeft": {
+          e.preventDefault();
+          if (entry.hasChildren && entry.expanded) setExpand(entry.node.id, false);
+          else if (entry.parentId) focusId(entry.parentId);
+          break;
+        }
+        case "Enter": {
+          e.preventDefault();
+          selectNode(entry.node);
+          if (entry.hasChildren) toggleExpand(entry.node.id);
+          break;
+        }
+        case " ": {
+          e.preventDefault();
+          if (entry.hasChildren) toggleExpand(entry.node.id);
+          else selectNode(entry.node);
+          break;
+        }
+      }
+    };
+    const renderNodes = (nodes, level) => /* @__PURE__ */ jsx(Fragment, { children: nodes.map((node) => {
+      const hasChildren = !!node.children?.length;
+      const isExpanded = expandedSet.has(node.id);
+      return /* @__PURE__ */ jsxs(
+        "li",
+        {
+          className: cx(sc("tree-item")),
+          role: "treeitem",
+          "aria-expanded": hasChildren ? isExpanded : void 0,
+          "aria-selected": selectedId === node.id,
+          "aria-disabled": node.disabled || void 0,
+          tabIndex: activeId === node.id ? 0 : -1,
+          ref: (el) => {
+            if (el) nodeRefs.current.set(node.id, el);
+            else nodeRefs.current.delete(node.id);
+          },
+          onFocus: (e) => {
+            if (e.target === e.currentTarget) setFocusedId(node.id);
+          },
+          onKeyDown: (e) => onKeyDown(e, node.id),
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cx(sc("tree-node")),
+                style: { "--tree-depth": level },
+                "data-selected": selectedId === node.id || void 0,
+                "data-disabled": node.disabled || void 0,
+                onClick: () => {
+                  selectNode(node);
+                  if (hasChildren) toggleExpand(node.id);
+                  focusId(node.id);
+                },
+                children: [
+                  hasChildren ? /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: cx(sc("tree-toggle")),
+                      "data-expanded": isExpanded || void 0,
+                      "aria-hidden": "true",
+                      tabIndex: -1,
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        toggleExpand(node.id);
+                      },
+                      children: Chevron
+                    }
+                  ) : /* @__PURE__ */ jsx("span", { className: cx(sc("tree-toggle-spacer")) }),
+                  node.icon && /* @__PURE__ */ jsx("span", { className: cx(sc("tree-node-icon")), children: node.icon }),
+                  /* @__PURE__ */ jsx("span", { className: cx(sc("tree-node-label")), children: node.label })
+                ]
+              }
+            ),
+            hasChildren && isExpanded && /* @__PURE__ */ jsx("ul", { className: cx(sc("tree-group")), role: "group", children: renderNodes(node.children, level + 1) })
+          ]
+        },
+        node.id
+      );
+    }) });
+    return /* @__PURE__ */ jsx(
+      "ul",
+      {
+        ref: forwardedRef,
+        className: cx(sc("tree"), className),
+        role: "tree",
+        ...rest,
+        children: renderNodes(items, 0)
+      }
+    );
+  }
+);
+var UploadIcon = /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("path", { d: "M12 15V3" }),
+  /* @__PURE__ */ jsx("path", { d: "m7 8 5-5 5 5" }),
+  /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" })
+] });
+function matchesAccept(file, accept) {
+  if (!accept) return true;
+  const types = accept.split(",").map((s) => s.trim().toLowerCase()).filter(Boolean);
+  if (types.length === 0) return true;
+  const name = file.name.toLowerCase();
+  const mime = file.type.toLowerCase();
+  return types.some((t) => {
+    if (t.startsWith(".")) return name.endsWith(t);
+    if (t.endsWith("/*")) return mime.startsWith(t.slice(0, -1));
+    return mime === t;
+  });
+}
+var Dropzone = React74.forwardRef(
+  function Dropzone2({
+    onFiles,
+    onReject,
+    accept,
+    multiple = true,
+    maxSize,
+    disabled,
+    title = "Drop files here, or click to browse",
+    hint,
+    icon,
+    inputProps,
+    className,
+    children,
+    ...rest
+  }, forwardedRef) {
+    const sc = useSilicaClass();
+    const inputRef = React74.useRef(null);
+    const dragDepth = React74.useRef(0);
+    const [dragging, setDragging] = React74.useState(false);
+    const process = (fileList) => {
+      if (!fileList || disabled) return;
+      const accepted = [];
+      const rejected = [];
+      for (const file of Array.from(fileList)) {
+        if (!matchesAccept(file, accept)) {
+          rejected.push({ file, reason: "type" });
+        } else if (maxSize != null && file.size > maxSize) {
+          rejected.push({ file, reason: "size" });
+        } else {
+          accepted.push(file);
+        }
+      }
+      const finalAccepted = multiple ? accepted : accepted.slice(0, 1);
+      if (finalAccepted.length) onFiles?.(finalAccepted);
+      if (rejected.length) onReject?.(rejected);
+    };
+    const openPicker = () => {
+      if (!disabled) inputRef.current?.click();
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: forwardedRef,
+        className: cx(sc("dropzone"), className),
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        "aria-disabled": disabled || void 0,
+        "data-dragging": dragging || void 0,
+        "data-disabled": disabled || void 0,
+        onClick: (e) => {
+          if (e.target === inputRef.current) return;
+          openPicker();
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            openPicker();
+          }
+        },
+        onDragEnter: (e) => {
+          e.preventDefault();
+          if (disabled) return;
+          dragDepth.current += 1;
+          setDragging(true);
+        },
+        onDragOver: (e) => {
+          e.preventDefault();
+        },
+        onDragLeave: (e) => {
+          e.preventDefault();
+          if (disabled) return;
+          dragDepth.current -= 1;
+          if (dragDepth.current <= 0) {
+            dragDepth.current = 0;
+            setDragging(false);
+          }
+        },
+        onDrop: (e) => {
+          e.preventDefault();
+          if (disabled) return;
+          dragDepth.current = 0;
+          setDragging(false);
+          process(e.dataTransfer.files);
+        },
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "file",
+              className: cx(sc("dropzone-input")),
+              accept,
+              multiple,
+              disabled,
+              tabIndex: -1,
+              ...inputProps,
+              onChange: (e) => {
+                process(e.target.files);
+                e.target.value = "";
+                inputProps?.onChange?.(e);
+              }
+            }
+          ),
+          children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: cx(sc("dropzone-icon")), children: icon ?? UploadIcon }),
+            /* @__PURE__ */ jsx("span", { className: cx(sc("dropzone-title")), children: title }),
+            hint && /* @__PURE__ */ jsx("span", { className: cx(sc("dropzone-hint")), children: hint })
+          ] })
+        ]
+      }
+    );
+  }
+);
+var CheckIcon3 = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) });
+var Wizard = React74.forwardRef(
+  function Wizard2({
+    steps,
+    activeStep,
+    defaultStep = 0,
+    onStepChange,
+    color,
+    linear = true,
+    canGoNext = true,
+    onFinish,
+    backLabel = "Back",
+    nextLabel = "Next",
+    finishLabel = "Finish",
+    hideFooter,
+    children,
+    className,
+    ...rest
+  }, forwardedRef) {
+    const sc = useSilicaClass();
+    const isControlled = activeStep !== void 0;
+    const [internal, setInternal] = React74.useState(defaultStep);
+    const current = isControlled ? activeStep : internal;
+    const lastIndex = steps.length - 1;
+    const isLast = current >= lastIndex;
+    const goTo = (index) => {
+      const clamped = Math.max(0, Math.min(lastIndex, index));
+      if (clamped === current) return;
+      if (!isControlled) setInternal(clamped);
+      onStepChange?.(clamped);
+    };
+    const next = () => {
+      if (isLast) onFinish?.();
+      else goTo(current + 1);
+    };
+    const back = () => goTo(current - 1);
+    const activeContent = children ?? steps[current]?.content;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: forwardedRef,
+        className: cx(sc("wizard"), color && sc(`wizard-${color}`), className),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: cx(sc("wizard-steps")), role: "list", children: steps.map((step, i) => {
+            const state = i < current ? "complete" : i === current ? "active" : "upcoming";
+            const clickable = !step.disabled && i !== current && (!linear || i < current);
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: cx(sc("wizard-step")),
+                role: "listitem",
+                "data-state": state,
+                "data-clickable": clickable || void 0,
+                "data-disabled": step.disabled || void 0,
+                "aria-current": i === current ? "step" : void 0,
+                disabled: !clickable,
+                onClick: () => clickable && goTo(i),
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: cx(sc("wizard-step-marker")), children: state === "complete" ? CheckIcon3 : i + 1 }),
+                  /* @__PURE__ */ jsxs("span", { className: cx(sc("wizard-step-label")), children: [
+                    step.title,
+                    step.optional && /* @__PURE__ */ jsx("span", { className: cx(sc("wizard-step-optional")), children: "Optional" })
+                  ] })
+                ]
+              },
+              step.id
+            );
+          }) }),
+          /* @__PURE__ */ jsx("div", { className: cx(sc("wizard-content")), children: activeContent }),
+          !hideFooter && /* @__PURE__ */ jsxs("div", { className: cx(sc("wizard-footer")), children: [
+            /* @__PURE__ */ jsx(Button, { variant: "ghost", disabled: current === 0, onClick: back, children: backLabel }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                color,
+                disabled: !isLast && !canGoNext,
+                onClick: next,
+                children: isLast ? finishLabel : nextLabel
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+
+export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, Alert, AlertActions, AlertContent, AlertDescription, AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Autocomplete, AutocompleteItem, Avatar, AvatarGroup, Badge, Breadcrumb, Button, Calendar, Card, CardActions, CardBody, CardTitle, Carousel, CarouselItem, Chat, ChatBubble, ChatFooter, ChatHeader, ChatImage, Checkbox, CheckboxGroup, CheckboxOption, Collapse, CollapseContent, CollapseTitle, Collapsible, CollapsiblePanel, CollapsibleTrigger, ColorPicker, Combobox, ComboboxItem, CommandPalette, ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuTrigger, Countdown, DatePicker, DateRangePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle, DialogTrigger, Diff, Display, Divider, Dock, DockItem, DockLabel, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Dropzone, EmptyState, Field, FieldControl, FieldDescription, FieldError, FieldLabel, Fieldset, FieldsetLabel, FieldsetLegend, FileInput, Filter, FilterItem, FloatingLabel, Footer, FooterTitle, Form, Heading, Hero, HeroContent, HeroOverlay, Indicator, IndicatorItem, Input, Join, Kbd, Label, Link, List, ListColGrow, ListRow, ListTitle, Loading, MAX_CHROMA, Mask, Menu, MenuItem, MenuTitle, Menubar, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarSeparator, MenubarTrigger, Meter, MockupBrowser, MockupCode, MockupCodeLine, MockupPhone, MockupWindow, NativeSelect, Navbar, NavbarCenter, NavbarEnd, NavbarStart, NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuTrigger, NumberField, Pagination, Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger, PreviewCard, Progress, Prose, RadialProgress, Radio, RadioGroup, RadioOption, Range, Rating, ScrollArea, Select, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SilicaProvider, Skeleton, Slider, Stack, Stat, StatDesc, StatFigure, StatTitle, StatValue, Stats, Status, Step, Steps, Swap, Switch, Table, Tabs, TabsList, TabsPanel, TabsTab, TagInput, Text, Textarea, ThemeController, Timeline, TimelineEnd, TimelineItem, TimelineMiddle, TimelineStart, ToastProvider, Toggle, ToggleGroup, ToggleGroupItem, Toolbar, ToolbarButton, ToolbarGroup, ToolbarLink, ToolbarSeparator, Tooltip, TooltipProvider, TreeView, Validator, ValidatorHint, Wizard, cx, formatOklch, hexToOklch, inGamut, oklchToHex, oklchToRgb, parseOklch, useSilicaClass, useSilicaConfig, useToast };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map