@cocliny/ui-library 0.1.0

package/dist/index.js

@@ -0,0 +1,3611 @@
+import { clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+import * as React5 from 'react';
+import { createContext, forwardRef, useState, useContext, useEffect, useCallback, useMemo, useId, useRef, Fragment as Fragment$1 } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as ToastPrimitives from '@radix-ui/react-toast';
+import { useControllableState } from '@cocliny/util-library/react';
+import { DayPicker } from 'react-day-picker';
+import { format } from 'date-fns';
+import { Slot } from '@radix-ui/react-slot';
+import { useFormContext, FormProvider, Controller } from 'react-hook-form';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import { Command as Command$1 } from 'cmdk';
+import { pageRange, PAGE_ELLIPSIS } from '@cocliny/util-library';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { useReactTable, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
+import { ResponsiveContainer, LineChart as LineChart$1, Line, BarChart as BarChart$1, Bar, AreaChart as AreaChart$1, Area, CartesianGrid, XAxis, YAxis, Tooltip as Tooltip$1, Legend } from 'recharts';
+
+// src/foundation/cn.ts
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "focus-ring": ["focus-ring"]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/foundation/variants.ts
+function defineVariants(config) {
+  const { base, variants, compoundVariants = [], defaultVariants = {} } = config;
+  const variantKeys = Object.keys(variants);
+  return (selection = {}) => {
+    const resolved = { ...defaultVariants };
+    for (const key of variantKeys) {
+      const value = selection[key];
+      if (value !== void 0) {
+        resolved[key] = value;
+      }
+    }
+    const classes = [base];
+    for (const key of variantKeys) {
+      const value = resolved[key];
+      if (value !== void 0) classes.push(variants[key]?.[String(value)]);
+    }
+    for (const compound of compoundVariants) {
+      let matches = true;
+      for (const key of variantKeys) {
+        const condition = compound[key];
+        if (condition !== void 0 && String(resolved[key]) !== String(condition)) {
+          matches = false;
+          break;
+        }
+      }
+      if (matches) classes.push(compound.className);
+    }
+    classes.push(selection.className);
+    return cn(...classes);
+  };
+}
+
+// src/foundation/theme/tokens.ts
+var TOKEN_CSS_VARS = {
+  background: "--ml-background",
+  surface: "--ml-surface",
+  surfaceRaised: "--ml-surface-raised",
+  surfaceSunken: "--ml-surface-sunken",
+  overlay: "--ml-overlay",
+  border: "--ml-border",
+  borderStrong: "--ml-border-strong",
+  fg: "--ml-fg",
+  fgMuted: "--ml-fg-muted",
+  fgSubtle: "--ml-fg-subtle",
+  fgDisabled: "--ml-fg-disabled",
+  fgInverted: "--ml-fg-inverted",
+  primary: "--ml-primary",
+  primaryHover: "--ml-primary-hover",
+  primaryActive: "--ml-primary-active",
+  primaryFg: "--ml-primary-fg",
+  primarySubtle: "--ml-primary-subtle",
+  primarySubtleFg: "--ml-primary-subtle-fg",
+  success: "--ml-success",
+  successFg: "--ml-success-fg",
+  successSubtle: "--ml-success-subtle",
+  successSubtleFg: "--ml-success-subtle-fg",
+  warning: "--ml-warning",
+  warningFg: "--ml-warning-fg",
+  warningSubtle: "--ml-warning-subtle",
+  warningSubtleFg: "--ml-warning-subtle-fg",
+  danger: "--ml-danger",
+  dangerFg: "--ml-danger-fg",
+  dangerSubtle: "--ml-danger-subtle",
+  dangerSubtleFg: "--ml-danger-subtle-fg",
+  info: "--ml-info",
+  infoFg: "--ml-info-fg",
+  infoSubtle: "--ml-info-subtle",
+  infoSubtleFg: "--ml-info-subtle-fg",
+  focusRing: "--ml-focus-ring",
+  focusRingWidth: "--ml-focus-ring-width",
+  focusRingOffset: "--ml-focus-ring-offset",
+  durationFast: "--ml-duration-fast",
+  durationNormal: "--ml-duration-normal",
+  durationSlow: "--ml-duration-slow"
+};
+
+// src/foundation/theme/cssVars.ts
+function declarations(values) {
+  return Object.keys(values).map((token) => {
+    const value = values[token];
+    return value === void 0 ? null : `${TOKEN_CSS_VARS[token]}: ${value};`;
+  }).filter((d) => d !== null).join(" ");
+}
+function themeOverridesToCss(overrides, scope = ":root") {
+  const rules = [];
+  const light = { ...overrides.common, ...overrides.light };
+  const dark = { ...overrides.common, ...overrides.dark };
+  const lightDecls = declarations(light);
+  if (lightDecls) rules.push(`${scope} { ${lightDecls} }`);
+  const darkDecls = declarations(dark);
+  if (darkDecls) {
+    const darkScope = scope === ":root" ? `[data-theme="dark"]` : `[data-theme="dark"] ${scope}, ${scope}[data-theme="dark"]`;
+    rules.push(`${darkScope} { ${darkDecls} }`);
+  }
+  return rules.join("\n");
+}
+var DEFAULT_STORAGE_KEY = "ml-color-scheme";
+var ThemeContext = createContext(null);
+function systemScheme() {
+  if (typeof window === "undefined") return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function readStoredScheme(storageKey) {
+  if (storageKey === null || typeof window === "undefined") return null;
+  try {
+    const raw = window.localStorage.getItem(storageKey);
+    return raw === "light" || raw === "dark" || raw === "system" ? raw : null;
+  } catch {
+    return null;
+  }
+}
+function ThemeProvider({
+  children,
+  defaultColorScheme = "system",
+  defaultDensity = "comfortable",
+  overrides,
+  storageKey = DEFAULT_STORAGE_KEY
+}) {
+  const [colorScheme, setColorSchemeState] = useState(defaultColorScheme);
+  const [resolvedColorScheme, setResolvedColorScheme] = useState(
+    defaultColorScheme === "dark" ? "dark" : "light"
+  );
+  const [density, setDensityState] = useState(defaultDensity);
+  useEffect(() => {
+    const stored = readStoredScheme(storageKey);
+    if (stored !== null) setColorSchemeState(stored);
+  }, []);
+  useEffect(() => {
+    const apply = () => {
+      const resolved = colorScheme === "system" ? systemScheme() : colorScheme;
+      setResolvedColorScheme(resolved);
+      document.documentElement.setAttribute("data-theme", resolved);
+    };
+    apply();
+    if (colorScheme !== "system") return;
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    media.addEventListener("change", apply);
+    return () => {
+      media.removeEventListener("change", apply);
+    };
+  }, [colorScheme]);
+  useEffect(() => {
+    document.documentElement.setAttribute("data-density", density);
+  }, [density]);
+  const setColorScheme = useCallback(
+    (scheme) => {
+      setColorSchemeState(scheme);
+      if (storageKey !== null) {
+        try {
+          window.localStorage.setItem(storageKey, scheme);
+        } catch {
+        }
+      }
+    },
+    [storageKey]
+  );
+  const setDensity = useCallback((next) => {
+    setDensityState(next);
+  }, []);
+  const value = useMemo(
+    () => ({ colorScheme, resolvedColorScheme, setColorScheme, density, setDensity }),
+    [colorScheme, resolvedColorScheme, setColorScheme, density, setDensity]
+  );
+  const overrideCss = useMemo(
+    () => overrides ? themeOverridesToCss(overrides) : "",
+    [overrides]
+  );
+  return /* @__PURE__ */ jsxs(ThemeContext.Provider, { value, children: [
+    overrideCss ? /* @__PURE__ */ jsx("style", { "data-ml-theme-overrides": "", children: overrideCss }) : null,
+    children
+  ] });
+}
+function useTheme() {
+  const ctx = useContext(ThemeContext);
+  if (ctx === null) {
+    throw new Error("useTheme must be used within a <ThemeProvider>.");
+  }
+  return ctx;
+}
+function getThemeInitScript(storageKey = DEFAULT_STORAGE_KEY) {
+  return `(function(){try{var k=${JSON.stringify(storageKey)};var s=localStorage.getItem(k);if(s!=="light"&&s!=="dark")s=window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light";document.documentElement.setAttribute("data-theme",s);}catch(e){}})();`;
+}
+var text = defineVariants({
+  variants: {
+    size: {
+      xs: "text-xs",
+      sm: "text-sm",
+      md: "text-base",
+      lg: "text-lg",
+      xl: "text-xl"
+    },
+    weight: {
+      regular: "font-normal",
+      medium: "font-medium",
+      semibold: "font-semibold",
+      bold: "font-bold"
+    },
+    tone: {
+      default: "text-fg",
+      muted: "text-fg-muted",
+      subtle: "text-fg-subtle",
+      disabled: "text-fg-disabled",
+      danger: "text-danger-subtle-fg",
+      success: "text-success-subtle-fg",
+      inverted: "text-fg-inverted"
+    },
+    align: {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right"
+    },
+    truncate: {
+      true: "block max-w-full truncate",
+      false: ""
+    }
+  },
+  defaultVariants: { size: "md", weight: "regular", tone: "default", align: "left", truncate: false }
+});
+function Text(props) {
+  const { as, size, weight, tone, align, truncate, className, ...rest } = props;
+  const Component = as ?? "span";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: text({ size, weight, tone, align, truncate, className }),
+      ...rest
+    }
+  );
+}
+var heading = defineVariants({
+  base: "text-fg font-bold tracking-tight",
+  variants: {
+    size: {
+      xs: "text-sm",
+      sm: "text-base",
+      md: "text-lg",
+      lg: "text-xl",
+      xl: "text-2xl",
+      "2xl": "text-3xl"
+    }
+  },
+  defaultVariants: { size: "lg" }
+});
+function Heading(props) {
+  const { as, level = 2, size, className, ...rest } = props;
+  const Component = as ?? `h${String(level)}`;
+  return /* @__PURE__ */ jsx(Component, { className: heading({ size, className }), ...rest });
+}
+function Label({ required = false, className, children, ...rest }) {
+  return /* @__PURE__ */ jsxs("label", { className: cn("inline-flex items-center gap-1 text-sm font-medium text-fg", className), ...rest, children: [
+    children,
+    required && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-danger-subtle-fg", children: "*" }),
+    required && /* @__PURE__ */ jsx("span", { className: "sr-only", children: "(required)" })
+  ] });
+}
+function Code({ block = false, className, children, ...rest }) {
+  if (block) {
+    return /* @__PURE__ */ jsx("pre", { className: cn("overflow-x-auto rounded-md border border-line bg-surface-sunken p-3 font-mono text-sm text-fg", className), children: /* @__PURE__ */ jsx("code", { ...rest, children }) });
+  }
+  return /* @__PURE__ */ jsx(
+    "code",
+    {
+      className: cn("rounded-xs border border-line bg-surface-sunken px-1 py-0.5 font-mono text-[0.85em] text-fg", className),
+      ...rest,
+      children
+    }
+  );
+}
+var link = defineVariants({
+  base: "focus-ring rounded-xs font-medium underline-offset-2 transition-colors duration-(--ml-duration-fast)",
+  variants: {
+    variant: {
+      /** Colored, underline on hover — default for inline links. */
+      default: "text-primary-subtle-fg hover:underline",
+      /** Always underlined — for body copy where color alone is insufficient. */
+      underline: "text-primary-subtle-fg underline hover:text-primary",
+      /** Inherits color — for links inside already-colored contexts. */
+      inherit: "text-inherit underline hover:no-underline"
+    }
+  },
+  defaultVariants: { variant: "default" }
+});
+function Link(props) {
+  const { as, variant, className, ...rest } = props;
+  const Component = as ?? "a";
+  return /* @__PURE__ */ jsx(Component, { className: link({ variant, className }), ...rest });
+}
+var spinner = defineVariants({
+  base: "inline-block animate-spin rounded-full border-2 border-current border-t-transparent",
+  variants: {
+    size: {
+      xs: "size-3",
+      sm: "size-4",
+      md: "size-5",
+      lg: "size-8"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+function Spinner({ size, label = "Loading", className }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      role: label === null ? void 0 : "status",
+      "aria-hidden": label === null ? true : void 0,
+      className: cn("inline-flex", className),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: spinner({ size }) }),
+        label !== null && /* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
+      ]
+    }
+  );
+}
+var button = defineVariants({
+  base: "focus-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-semibold transition-colors duration-(--ml-duration-fast) disabled:cursor-not-allowed disabled:opacity-55 aria-busy:cursor-wait",
+  variants: {
+    variant: {
+      solid: "",
+      outline: "border bg-transparent",
+      ghost: "bg-transparent",
+      subtle: ""
+    },
+    intent: {
+      primary: "",
+      neutral: "",
+      success: "",
+      warning: "",
+      danger: ""
+    },
+    size: {
+      sm: "h-(--ml-control-h-sm) px-3 text-sm",
+      md: "h-(--ml-control-h-md) px-(--ml-control-px) text-sm",
+      lg: "h-(--ml-control-h-lg) px-5 text-base"
+    },
+    fullWidth: { true: "w-full", false: "" }
+  },
+  compoundVariants: [
+    // solid
+    { variant: "solid", intent: "primary", className: "bg-primary text-primary-fg hover:bg-primary-hover active:bg-primary-active" },
+    { variant: "solid", intent: "neutral", className: "bg-surface-sunken text-fg hover:bg-line" },
+    { variant: "solid", intent: "success", className: "bg-success text-success-fg hover:opacity-90" },
+    { variant: "solid", intent: "warning", className: "bg-warning text-warning-fg hover:opacity-90" },
+    { variant: "solid", intent: "danger", className: "bg-danger text-danger-fg hover:opacity-90" },
+    // outline
+    { variant: "outline", intent: "primary", className: "border-line-strong text-primary-subtle-fg hover:bg-primary-subtle" },
+    { variant: "outline", intent: "neutral", className: "border-line-strong text-fg hover:bg-surface-sunken" },
+    { variant: "outline", intent: "success", className: "border-line-strong text-success-subtle-fg hover:bg-success-subtle" },
+    { variant: "outline", intent: "warning", className: "border-line-strong text-warning-subtle-fg hover:bg-warning-subtle" },
+    { variant: "outline", intent: "danger", className: "border-line-strong text-danger-subtle-fg hover:bg-danger-subtle" },
+    // ghost
+    { variant: "ghost", intent: "primary", className: "text-primary-subtle-fg hover:bg-primary-subtle" },
+    { variant: "ghost", intent: "neutral", className: "text-fg-muted hover:bg-surface-sunken hover:text-fg" },
+    { variant: "ghost", intent: "success", className: "text-success-subtle-fg hover:bg-success-subtle" },
+    { variant: "ghost", intent: "warning", className: "text-warning-subtle-fg hover:bg-warning-subtle" },
+    { variant: "ghost", intent: "danger", className: "text-danger-subtle-fg hover:bg-danger-subtle" },
+    // subtle (tinted fill)
+    { variant: "subtle", intent: "primary", className: "bg-primary-subtle text-primary-subtle-fg hover:bg-primary-subtle/80" },
+    { variant: "subtle", intent: "neutral", className: "bg-surface-sunken text-fg hover:bg-line" },
+    { variant: "subtle", intent: "success", className: "bg-success-subtle text-success-subtle-fg hover:bg-success-subtle/80" },
+    { variant: "subtle", intent: "warning", className: "bg-warning-subtle text-warning-subtle-fg hover:bg-warning-subtle/80" },
+    { variant: "subtle", intent: "danger", className: "bg-danger-subtle text-danger-subtle-fg hover:bg-danger-subtle/80" }
+  ],
+  defaultVariants: { variant: "solid", intent: "primary", size: "md", fullWidth: false }
+});
+var Button = forwardRef(function Button2({
+  variant,
+  intent,
+  size,
+  loading = false,
+  startIcon,
+  endIcon,
+  fullWidth,
+  disabled = false,
+  type = "button",
+  className,
+  children,
+  onClick,
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type,
+      disabled: disabled || loading,
+      "aria-busy": loading || void 0,
+      onClick: loading ? void 0 : onClick,
+      className: button({ variant, intent, size, fullWidth, className }),
+      ...rest,
+      children: [
+        loading ? /* @__PURE__ */ jsx(Spinner, { size: "sm", label: null }) : startIcon,
+        children,
+        !loading && endIcon
+      ]
+    }
+  );
+});
+var SQUARE_BY_SIZE = {
+  sm: "w-(--ml-control-h-sm) px-0",
+  md: "w-(--ml-control-h-md) px-0",
+  lg: "w-(--ml-control-h-lg) px-0"
+};
+var IconButton = forwardRef(function IconButton2({ icon, size = "md", className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(Button, { ref, size, className: cn(SQUARE_BY_SIZE[size], className), ...rest, children: icon });
+});
+function ButtonGroup({ className, children, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      className: cn(
+        "inline-flex items-stretch",
+        "[&>*]:rounded-none [&>*:first-child]:rounded-l-md [&>*:last-child]:rounded-r-md",
+        "[&>*:not(:first-child)]:-ml-px",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+function Skeleton({ variant = "rect", className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": true,
+      className: cn(
+        "animate-pulse bg-surface-sunken motion-reduce:animate-none",
+        variant === "circle" ? "rounded-full" : "rounded-md",
+        variant === "text" && "h-[1em] w-full",
+        className
+      ),
+      ...rest
+    }
+  );
+}
+var alert = defineVariants({
+  base: "rounded-md border px-4 py-3",
+  variants: {
+    intent: {
+      info: "border-info-subtle bg-info-subtle text-info-subtle-fg",
+      success: "border-success-subtle bg-success-subtle text-success-subtle-fg",
+      warning: "border-warning-subtle bg-warning-subtle text-warning-subtle-fg",
+      danger: "border-danger-subtle bg-danger-subtle text-danger-subtle-fg"
+    }
+  },
+  defaultVariants: { intent: "info" }
+});
+function Alert({ intent = "info", title, icon, actions, className, children, ...rest }) {
+  const assertive = intent === "danger" || intent === "warning";
+  return /* @__PURE__ */ jsx("div", { role: assertive ? "alert" : "status", className: alert({ intent, className }), ...rest, children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+    icon && /* @__PURE__ */ jsx("span", { className: "mt-0.5 shrink-0", children: icon }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 text-sm", children: [
+      title !== void 0 && /* @__PURE__ */ jsx("p", { className: "m-0 font-semibold", children: title }),
+      children !== void 0 && /* @__PURE__ */ jsx("div", { className: title !== void 0 ? "mt-1" : "", children })
+    ] }),
+    actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+  ] }) });
+}
+function Progress({ value, max = 100, size = "md", className, ...rest }) {
+  const indeterminate = value === void 0;
+  const fraction = indeterminate ? 0 : Math.min(Math.max(value / max, 0), 1);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      "aria-valuenow": indeterminate ? void 0 : Math.round(fraction * max),
+      className: cn(
+        "w-full overflow-hidden rounded-pill bg-surface-sunken",
+        size === "sm" ? "h-1.5" : "h-2.5",
+        className
+      ),
+      ...rest,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "h-full rounded-pill bg-primary transition-[width] duration-(--ml-duration-normal)",
+            indeterminate && "w-1/3 animate-pulse motion-reduce:animate-none"
+          ),
+          style: indeterminate ? void 0 : { width: `${String(fraction * 100)}%` }
+        }
+      )
+    }
+  );
+}
+var statusBadge = defineVariants({
+  base: "inline-flex items-center gap-1.5 whitespace-nowrap rounded-pill border px-2.5 py-0.5 text-xs font-semibold",
+  variants: {
+    intent: {
+      neutral: "border-line bg-surface-sunken text-fg-muted",
+      primary: "border-primary-subtle bg-primary-subtle text-primary-subtle-fg",
+      success: "border-success-subtle bg-success-subtle text-success-subtle-fg",
+      warning: "border-warning-subtle bg-warning-subtle text-warning-subtle-fg",
+      danger: "border-danger-subtle bg-danger-subtle text-danger-subtle-fg",
+      info: "border-info-subtle bg-info-subtle text-info-subtle-fg"
+    }
+  },
+  defaultVariants: { intent: "neutral" }
+});
+function StatusIndicator({
+  intent = "neutral",
+  withDot = true,
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs("span", { className: statusBadge({ intent, className }), ...rest, children: [
+    withDot && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "size-1.5 rounded-full bg-current" }),
+    children
+  ] });
+}
+function EmptyState({ title, description, icon, actions, className, ...rest }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-3 px-6 py-12 text-center", className), ...rest, children: [
+    icon && /* @__PURE__ */ jsx("div", { className: "text-fg-subtle [&_svg]:size-10", children: icon }),
+    /* @__PURE__ */ jsx("p", { className: "m-0 text-base font-semibold text-fg", children: title }),
+    description !== void 0 && /* @__PURE__ */ jsx("p", { className: "m-0 max-w-md text-sm text-fg-muted", children: description }),
+    actions && /* @__PURE__ */ jsx("div", { className: "mt-2 flex items-center gap-2", children: actions })
+  ] });
+}
+function ErrorState(props) {
+  return /* @__PURE__ */ jsx(EmptyState, { role: "alert", ...props });
+}
+function SuccessState(props) {
+  return /* @__PURE__ */ jsx(EmptyState, { role: "status", ...props });
+}
+function LoadingOverlay({ visible, label = "Loading", className, ...rest }) {
+  if (!visible) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      className: cn(
+        "absolute inset-0 z-10 flex flex-col items-center justify-center gap-2",
+        "bg-surface/70 backdrop-blur-[1px]",
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(Spinner, { size: "lg", label: null }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-fg-muted", children: label })
+      ]
+    }
+  );
+}
+var Dialog = DialogPrimitive.Root;
+var DialogTrigger = DialogPrimitive.Trigger;
+var DialogPortal = DialogPrimitive.Portal;
+var DialogClose = DialogPrimitive.Close;
+var DialogOverlay = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-(--ml-z-modal) bg-overlay backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+var DialogContent = forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+  /* @__PURE__ */ jsx(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    DialogPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "fixed left-[50%] top-[50%] z-(--ml-z-modal) grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-line bg-surface p-6 shadow-modal duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-xl",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-ring disabled:pointer-events-none data-[state=open]:bg-surface-sunken data-[state=open]:text-fg-muted", children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              width: "16",
+              height: "16",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              className: "h-4 w-4",
+              children: [
+                /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+var DialogHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className),
+    ...props
+  }
+);
+DialogHeader.displayName = "DialogHeader";
+var DialogFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    ),
+    ...props
+  }
+);
+DialogFooter.displayName = "DialogFooter";
+var DialogTitle = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold leading-none tracking-tight text-fg-strong", className),
+    ...props
+  }
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+var DialogDescription = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn("text-sm text-fg-muted", className),
+    ...props
+  }
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+var Drawer = DialogPrimitive.Root;
+var DrawerTrigger = DialogPrimitive.Trigger;
+var DrawerPortal = DialogPrimitive.Portal;
+var DrawerClose = DialogPrimitive.Close;
+var DrawerOverlay = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-(--ml-z-drawer) bg-overlay backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+));
+DrawerOverlay.displayName = "DrawerOverlay";
+var drawerContent = defineVariants({
+  base: "fixed z-(--ml-z-drawer) flex flex-col gap-4 overflow-y-auto bg-surface p-6 shadow-modal transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-200 data-[state=open]:duration-300",
+  variants: {
+    side: {
+      left: "inset-y-0 left-0 h-full w-3/4 max-w-sm border-r border-line data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
+      right: "inset-y-0 right-0 h-full w-3/4 max-w-sm border-l border-line data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
+      top: "inset-x-0 top-0 border-b border-line data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+      bottom: "inset-x-0 bottom-0 border-t border-line data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom"
+    }
+  },
+  defaultVariants: { side: "left" }
+});
+var DrawerContent = forwardRef(({ className, children, side, hideCloseButton = false, ...props }, ref) => /* @__PURE__ */ jsxs(DrawerPortal, { children: [
+  /* @__PURE__ */ jsx(DrawerOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    DialogPrimitive.Content,
+    {
+      ref,
+      className: drawerContent({ side, className }),
+      ...props,
+      children: [
+        children,
+        !hideCloseButton && /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-ring disabled:pointer-events-none", children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              width: "16",
+              height: "16",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              className: "h-4 w-4",
+              children: [
+                /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+DrawerContent.displayName = "DrawerContent";
+var DrawerHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col space-y-1.5", className), ...props });
+DrawerHeader.displayName = "DrawerHeader";
+var DrawerFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("mt-auto flex flex-col gap-2", className), ...props });
+DrawerFooter.displayName = "DrawerFooter";
+var DrawerTitle = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold leading-none tracking-tight text-fg", className),
+    ...props
+  }
+));
+DrawerTitle.displayName = "DrawerTitle";
+var DrawerDescription = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn("text-sm text-fg-muted", className),
+    ...props
+  }
+));
+DrawerDescription.displayName = "DrawerDescription";
+var AlertDialog = AlertDialogPrimitive.Root;
+var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+var AlertDialogPortal = AlertDialogPrimitive.Portal;
+var AlertDialogOverlay = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AlertDialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-(--ml-z-modal) bg-overlay backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+var AlertDialogContent = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
+  /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
+  /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "fixed left-[50%] top-[50%] z-(--ml-z-modal) grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-line bg-surface p-6 shadow-modal duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-xl",
+        className
+      ),
+      ...props
+    }
+  )
+] }));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+var AlertDialogHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("flex flex-col space-y-2 text-center sm:text-left", className),
+    ...props
+  }
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+var AlertDialogFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    ),
+    ...props
+  }
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+var AlertDialogTitle = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AlertDialogPrimitive.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold text-fg-strong", className),
+    ...props
+  }
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+var AlertDialogDescription = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AlertDialogPrimitive.Description,
+  {
+    ref,
+    className: cn("text-sm text-fg-muted", className),
+    ...props
+  }
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+var AlertDialogAction = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, { ref, className, ...props }));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+var AlertDialogCancel = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, { ref, className, ...props }));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverAnchor = PopoverPrimitive.Anchor;
+var PopoverContent = forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-(--ml-z-popover) w-72 rounded-md border border-line bg-surface p-4 text-fg shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-(--ml-z-tooltip) overflow-hidden rounded-md bg-fg px-3 py-1.5 text-xs text-fg-inverted shadow-sm animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+var ToastProvider = ToastPrimitives.Provider;
+var ToastViewport = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitives.Viewport,
+  {
+    ref,
+    className: cn(
+      "fixed top-0 z-(--ml-z-toast) flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className
+    ),
+    ...props
+  }
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+var Toast = React5.forwardRef(({ className, variant = "default", ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    ToastPrimitives.Root,
+    {
+      ref,
+      className: cn(
+        "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+        {
+          "border-line bg-surface text-fg": variant === "default",
+          "border-success-subtle bg-success-subtle text-success-subtle-fg": variant === "success",
+          "border-danger-subtle bg-danger-subtle text-danger-subtle-fg": variant === "danger",
+          "border-warning-subtle bg-warning-subtle text-warning-subtle-fg": variant === "warning"
+        },
+        className
+      ),
+      ...props
+    }
+  );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+var ToastAction = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitives.Action,
+  {
+    ref,
+    className: cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-surface-sunken focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.border-danger-subtle]:border-danger/30 group-[.border-danger-subtle]:hover:border-danger/30 group-[.border-danger-subtle]:hover:bg-danger group-[.border-danger-subtle]:hover:text-danger-fg group-[.border-danger-subtle]:focus:ring-danger",
+      className
+    ),
+    ...props
+  }
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+var ToastClose = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitives.Close,
+  {
+    ref,
+    className: cn(
+      "absolute right-2 top-2 rounded-md p-1 text-fg/50 opacity-0 transition-opacity hover:text-fg focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.border-danger-subtle]:text-danger-subtle-fg group-[.border-danger-subtle]:hover:text-danger-subtle-fg",
+      className
+    ),
+    "toast-close": "",
+    ...props,
+    children: /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        className: "h-4 w-4",
+        children: [
+          /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+          /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+        ]
+      }
+    )
+  }
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+var ToastTitle = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitives.Title,
+  {
+    ref,
+    className: cn("text-sm font-semibold", className),
+    ...props
+  }
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+var ToastDescription = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitives.Description,
+  {
+    ref,
+    className: cn("text-sm opacity-90", className),
+    ...props
+  }
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+var FieldContext = createContext(null);
+var FieldProvider = FieldContext.Provider;
+function useFieldContext() {
+  return useContext(FieldContext);
+}
+function useFieldInputProps(own) {
+  const field = useFieldContext();
+  const describedBy = own["aria-describedby"] ?? ([field?.errorId, field?.descriptionId].filter(Boolean).join(" ") || void 0);
+  const invalid = own["aria-invalid"] ?? (field?.invalid ? true : void 0);
+  return {
+    id: own.id ?? field?.inputId,
+    "aria-describedby": describedBy,
+    // Any truthy aria-invalid form (true/"true"/"grammar"/"spelling") marks invalid.
+    "aria-invalid": invalid !== void 0 && invalid !== false && invalid !== "false" ? true : void 0,
+    disabled: own.disabled ?? (field?.disabled ? true : void 0),
+    required: own.required ?? (field?.required ? true : void 0)
+  };
+}
+function Field({
+  label,
+  description,
+  error,
+  required = false,
+  disabled = false,
+  className,
+  children,
+  ...rest
+}) {
+  const baseId = useId();
+  const inputId = `${baseId}-input`;
+  const descriptionId = description !== void 0 ? `${baseId}-description` : void 0;
+  const errorId = error !== void 0 && error !== null ? `${baseId}-error` : void 0;
+  const invalid = errorId !== void 0;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", className), ...rest, children: [
+    /* @__PURE__ */ jsx(Label, { htmlFor: inputId, required, className: disabled ? "text-fg-disabled" : void 0, children: label }),
+    /* @__PURE__ */ jsx(FieldProvider, { value: { inputId, descriptionId, errorId, invalid, required, disabled }, children }),
+    invalid ? /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "m-0 text-sm text-danger-subtle-fg", children: error }) : description !== void 0 && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "m-0 text-sm text-fg-subtle", children: description })
+  ] });
+}
+var inputClassName = (invalid, className) => cn(
+  "focus-ring h-(--ml-control-h-md) w-full rounded-md border bg-surface px-(--ml-control-px) text-sm text-fg",
+  "placeholder:text-fg-subtle",
+  "disabled:cursor-not-allowed disabled:bg-surface-sunken disabled:text-fg-disabled",
+  invalid ? "border-danger" : "border-line-strong",
+  className
+);
+var TextInput = forwardRef(function TextInput2({ startAdornment, endAdornment, className, ...rest }, ref) {
+  const field = useFieldInputProps(rest);
+  const invalid = field["aria-invalid"] === true;
+  if (startAdornment === void 0 && endAdornment === void 0) {
+    return /* @__PURE__ */ jsx("input", { ref, type: "text", ...rest, ...field, className: inputClassName(invalid, className) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
+    startAdornment !== void 0 && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-3 text-fg-subtle [&_svg]:size-(--size-icon-sm)", children: startAdornment }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "text",
+        ...rest,
+        ...field,
+        className: cn(
+          inputClassName(invalid, className),
+          startAdornment !== void 0 && "pl-9",
+          endAdornment !== void 0 && "pr-9"
+        )
+      }
+    ),
+    endAdornment !== void 0 && /* @__PURE__ */ jsx("span", { className: "absolute right-3 text-fg-subtle [&_svg]:size-(--size-icon-sm)", children: endAdornment })
+  ] });
+});
+var PasswordInput = forwardRef(function PasswordInput2(props, ref) {
+  const [visible, setVisible] = useState(false);
+  return /* @__PURE__ */ jsx(
+    TextInput,
+    {
+      ref,
+      ...props,
+      type: visible ? "text" : "password",
+      endAdornment: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": visible ? "Hide password" : "Show password",
+          "aria-pressed": visible,
+          onClick: () => {
+            setVisible((v) => !v);
+          },
+          className: "focus-ring pointer-events-auto -m-1 rounded-xs p-1 text-fg-subtle hover:text-fg",
+          children: /* @__PURE__ */ jsx(EyeIcon, { crossed: visible })
+        }
+      )
+    }
+  );
+});
+function EyeIcon({ crossed }) {
+  return /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx("path", { d: "M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" }),
+    crossed && /* @__PURE__ */ jsx("line", { x1: "3", y1: "21", x2: "21", y2: "3" })
+  ] });
+}
+var SearchInput = forwardRef(function SearchInput2(props, ref) {
+  return /* @__PURE__ */ jsx(TextInput, { ref, ...props, type: "search", startAdornment: /* @__PURE__ */ jsx(SearchIcon, {}) });
+});
+function SearchIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+    /* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+  ] });
+}
+var Textarea = forwardRef(function Textarea2({ className, rows = 3, ...rest }, ref) {
+  const field = useFieldInputProps(rest);
+  const invalid = field["aria-invalid"] === true;
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ref,
+      rows,
+      ...rest,
+      ...field,
+      className: cn(
+        "focus-ring w-full resize-y rounded-md border bg-surface px-(--ml-control-px) py-2 text-sm text-fg",
+        "placeholder:text-fg-subtle",
+        "disabled:cursor-not-allowed disabled:bg-surface-sunken disabled:text-fg-disabled",
+        invalid ? "border-danger" : "border-line-strong",
+        className
+      )
+    }
+  );
+});
+var Checkbox = forwardRef(function Checkbox2({ label, description, className, disabled, ...rest }, ref) {
+  const box = /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref,
+      type: "checkbox",
+      disabled,
+      className: cn(
+        "focus-ring size-4 shrink-0 cursor-pointer rounded-xs border-line-strong accent-(--ml-primary)",
+        "disabled:cursor-not-allowed",
+        label === void 0 && className
+      ),
+      ...rest
+    }
+  );
+  if (label === void 0) return box;
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: cn(
+        "flex cursor-pointer items-start gap-2.5",
+        disabled && "cursor-not-allowed opacity-60",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "flex h-5 items-center", children: box }),
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-fg", children: label }),
+          description !== void 0 && /* @__PURE__ */ jsx("span", { className: "text-sm text-fg-muted", children: description })
+        ] })
+      ]
+    }
+  );
+});
+var CodeInput = React5.forwardRef(
+  ({
+    length = 6,
+    value: valueProp,
+    defaultValue = "",
+    onChange,
+    onComplete,
+    disabled = false,
+    error = false,
+    autoFocus = false,
+    "aria-label": ariaLabel = "Verification code",
+    name,
+    className
+  }, ref) => {
+    const [value, setValue] = useControllableState({
+      value: valueProp,
+      defaultValue,
+      onChange
+    });
+    const inputsRef = React5.useRef([]);
+    const focusCell = (index) => {
+      inputsRef.current[Math.max(0, Math.min(index, length - 1))]?.focus();
+    };
+    const commit = (next) => {
+      const clean = next.replace(/\D/g, "").slice(0, length);
+      setValue(clean);
+      if (clean.length === length) onComplete?.(clean);
+    };
+    const handleChange = (index, raw) => {
+      const digit = raw.replace(/\D/g, "").slice(-1);
+      if (!digit) return;
+      const chars = value.padEnd(index, " ").split("");
+      chars[index] = digit;
+      commit(chars.join("").trimEnd());
+      focusCell(index + 1);
+    };
+    const handleKeyDown = (index, event) => {
+      if (event.key === "Backspace") {
+        event.preventDefault();
+        if (value[index]) {
+          commit(value.slice(0, index) + value.slice(index + 1));
+        } else {
+          commit(value.slice(0, Math.max(0, index - 1)));
+          focusCell(index - 1);
+        }
+      } else if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        focusCell(index - 1);
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        focusCell(index + 1);
+      }
+    };
+    const handlePaste = (event) => {
+      event.preventDefault();
+      const pasted = event.clipboardData.getData("text");
+      commit(pasted);
+      focusCell(Math.min(pasted.replace(/\D/g, "").length, length - 1));
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "group",
+        "aria-label": ariaLabel,
+        className: cn("flex items-center justify-center gap-2", className),
+        children: [
+          Array.from({ length }, (_, index) => /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: (el) => {
+                inputsRef.current[index] = el;
+              },
+              type: "text",
+              inputMode: "numeric",
+              autoComplete: index === 0 ? "one-time-code" : "off",
+              autoFocus: autoFocus && index === 0,
+              "aria-label": `Digit ${String(index + 1)} of ${String(length)}`,
+              "aria-invalid": error || void 0,
+              disabled,
+              maxLength: 1,
+              value: value[index] ?? "",
+              onChange: (e) => {
+                handleChange(index, e.target.value);
+              },
+              onKeyDown: (e) => {
+                handleKeyDown(index, e);
+              },
+              onPaste: handlePaste,
+              className: cn(
+                "h-12 w-10 rounded-md border bg-surface text-center text-lg font-semibold text-fg transition-colors duration-(--ml-duration-fast) focus-ring disabled:cursor-not-allowed disabled:bg-surface-sunken disabled:text-fg-disabled",
+                error ? "border-danger" : "border-line hover:border-line-strong"
+              )
+            },
+            index
+          )),
+          name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value })
+        ]
+      }
+    );
+  }
+);
+CodeInput.displayName = "CodeInput";
+var Switch = forwardRef(function Switch2({ label, className, disabled, ...rest }, ref) {
+  const control = /* @__PURE__ */ jsxs("span", { className: "relative inline-flex", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "checkbox",
+        role: "switch",
+        disabled,
+        className: "peer absolute inset-0 cursor-pointer opacity-0 disabled:cursor-not-allowed",
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: cn(
+          "h-5 w-9 rounded-pill bg-line-strong transition-colors duration-(--ml-duration-fast)",
+          "peer-checked:bg-primary",
+          "peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-(--ml-focus-ring)",
+          "after:absolute after:left-0.5 after:top-0.5 after:size-4 after:rounded-full after:bg-white after:shadow-raised",
+          "after:transition-transform after:duration-(--ml-duration-fast) peer-checked:after:translate-x-4"
+        )
+      }
+    )
+  ] });
+  if (label === void 0) return control;
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      className: cn(
+        "inline-flex cursor-pointer items-center gap-2.5",
+        disabled && "cursor-not-allowed opacity-60",
+        className
+      ),
+      children: [
+        control,
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-fg", children: label })
+      ]
+    }
+  );
+});
+function RadioGroup({
+  options,
+  value,
+  defaultValue,
+  onChange,
+  name,
+  orientation = "vertical",
+  disabled = false,
+  className,
+  ...rest
+}) {
+  const generatedName = useId();
+  const groupName = name ?? generatedName;
+  const [current, setCurrent] = useControllableState({
+    value,
+    defaultValue,
+    onChange
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "radiogroup",
+      className: cn("flex gap-3", orientation === "vertical" ? "flex-col" : "flex-row flex-wrap", className),
+      ...rest,
+      children: options.map((option) => {
+        const isDisabled = disabled || option.disabled === true;
+        return /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: cn(
+              "flex cursor-pointer items-start gap-2.5",
+              isDisabled && "cursor-not-allowed opacity-60"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "flex h-5 items-center", children: /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "radio",
+                  name: groupName,
+                  value: option.value,
+                  checked: current === option.value,
+                  disabled: isDisabled,
+                  onChange: () => {
+                    setCurrent(option.value);
+                  },
+                  className: "focus-ring size-4 cursor-pointer border-line-strong accent-(--ml-primary) disabled:cursor-not-allowed"
+                }
+              ) }),
+              /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-fg", children: option.label }),
+                option.description !== void 0 && /* @__PURE__ */ jsx("span", { className: "text-sm text-fg-muted", children: option.description })
+              ] })
+            ]
+          },
+          option.value
+        );
+      })
+    }
+  );
+}
+var Select = forwardRef(function Select2({ options, placeholder, className, children, ...rest }, ref) {
+  const field = useFieldInputProps(rest);
+  const invalid = field["aria-invalid"] === true;
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        ref,
+        ...rest,
+        ...field,
+        className: cn(
+          "focus-ring h-(--ml-control-h-md) w-full cursor-pointer appearance-none rounded-md border bg-surface pl-(--ml-control-px) pr-9 text-sm text-fg",
+          "disabled:cursor-not-allowed disabled:bg-surface-sunken disabled:text-fg-disabled",
+          invalid ? "border-danger" : "border-line-strong",
+          className
+        ),
+        children: [
+          placeholder !== void 0 && /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }),
+          options?.map((o) => /* @__PURE__ */ jsx("option", { value: o.value, disabled: o.disabled, children: o.label }, o.value)),
+          children
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        "aria-hidden": true,
+        className: "pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-fg-subtle",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
+      }
+    )
+  ] });
+});
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DayPicker,
+    {
+      showOutsideDays,
+      className: cn("p-3", className),
+      classNames: {
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 flex items-center justify-center rounded-md hover:bg-surface-sunken"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell: "text-fg-muted rounded-md w-9 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-surface-sunken/50 [&:has([aria-selected])]:bg-surface-sunken first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        day: cn(
+          "h-9 w-9 p-0 font-normal aria-selected:opacity-100 flex items-center justify-center rounded-md hover:bg-surface-sunken hover:text-fg"
+        ),
+        day_range_end: "day-range-end",
+        day_selected: "bg-primary text-primary-fg hover:bg-primary hover:text-primary-fg focus:bg-primary focus:text-primary-fg",
+        day_today: "bg-surface-sunken text-fg",
+        day_outside: "day-outside text-fg-muted opacity-50 aria-selected:bg-surface-sunken/50 aria-selected:text-fg-muted aria-selected:opacity-30",
+        day_disabled: "text-fg-muted opacity-50",
+        day_range_middle: "aria-selected:bg-surface-sunken aria-selected:text-fg",
+        day_hidden: "invisible",
+        ...classNames
+      },
+      components: {
+        IconLeft: () => /* @__PURE__ */ jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4", children: /* @__PURE__ */ jsx("path", { d: "M8.84182 3.13514C9.04327 3.32401 9.05348 3.64042 8.86462 3.84188L5.43521 7.49991L8.86462 11.1579C9.05348 11.3594 9.04327 11.6758 8.84182 11.8647C8.64036 12.0535 8.32394 12.0433 8.13508 11.8419L4.38508 7.84188C4.20477 7.64955 4.20477 7.35027 4.38508 7.15794L8.13508 3.15794C8.32394 2.95648 8.64036 2.94628 8.84182 3.13514Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" }) }),
+        IconRight: () => /* @__PURE__ */ jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4", children: /* @__PURE__ */ jsx("path", { d: "M6.1584 3.13508C5.95698 3.32401 5.9468 3.64042 6.13573 3.84184L9.56496 7.49991L6.13573 11.158C5.9468 11.3594 5.95698 11.6758 6.1584 11.8647C6.35983 12.0537 6.67625 12.0435 6.86518 11.8421L10.6152 7.84206C10.7955 7.64974 10.7955 7.35008 10.6152 7.15777L6.86518 3.15777C6.67625 2.95634 6.35983 2.94614 6.1584 3.13508Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" }) })
+      },
+      ...props
+    }
+  );
+}
+function DatePicker({
+  value,
+  onChange,
+  placeholder = "Pick a date",
+  disabled,
+  className
+}) {
+  const [open, setOpen] = React5.useState(false);
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        disabled,
+        className: cn(
+          "flex h-9 w-full items-center justify-between rounded-md border border-line bg-surface px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-fg-muted focus:outline-none focus:ring-1 focus:ring-primary disabled:cursor-not-allowed disabled:opacity-50",
+          !value && "text-fg-muted",
+          className
+        ),
+        children: [
+          value ? format(value, "PPP") : /* @__PURE__ */ jsx("span", { children: placeholder }),
+          /* @__PURE__ */ jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4 opacity-50", children: /* @__PURE__ */ jsx("path", { d: "M4.125 1.5C4.125 1.29289 3.95711 1.125 3.75 1.125C3.54289 1.125 3.375 1.29289 3.375 1.5V2.25H1.5C0.671573 2.25 0 2.92157 0 3.75V13.5C0 14.3284 0.671573 15 1.5 15H13.5C14.3284 15 15 14.3284 15 13.5V3.75C15 2.92157 14.3284 2.25 13.5 2.25H11.625V1.5C11.625 1.29289 11.4571 1.125 11.25 1.125C11.0429 1.125 10.875 1.29289 10.875 1.5V2.25H4.125V1.5ZM1.5 3.375H3.375V4.125C3.375 4.33211 3.54289 4.5 3.75 4.5C3.95711 4.5 4.125 4.33211 4.125 4.125V3.375H10.875V4.125C10.875 4.33211 11.0429 4.5 11.25 4.5C11.4571 4.5 11.625 4.33211 11.625 4.125V3.375H13.5C13.7071 3.375 13.875 3.54289 13.875 3.75V5.25H1.125V3.75C1.125 3.54289 1.29289 3.375 1.5 3.375ZM1.125 6.375V13.5C1.125 13.7071 1.29289 13.875 1.5 13.875H13.5C13.7071 13.875 13.875 13.7071 13.875 13.5V6.375H1.125Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx(
+      Calendar,
+      {
+        mode: "single",
+        selected: value,
+        onSelect: (date) => {
+          onChange?.(date);
+          setOpen(false);
+        },
+        initialFocus: true
+      }
+    ) })
+  ] });
+}
+var Form = FormProvider;
+var FormFieldContext = React5.createContext(null);
+var FormField = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
+};
+var FormItemContext = React5.createContext(
+  {}
+);
+var FormItem = React5.forwardRef(({ className, ...props }, ref) => {
+  const id = React5.useId();
+  return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { ref, className: cn("space-y-2", className), ...props }) });
+});
+FormItem.displayName = "FormItem";
+var useFormField = () => {
+  const fieldContext = React5.useContext(FormFieldContext);
+  const itemContext = React5.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+  const fieldState = getFieldState(fieldContext.name, formState);
+  const { id } = itemContext;
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState
+  };
+};
+var FormLabel = ({
+  className,
+  required,
+  ...props
+}) => {
+  const { formItemId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Label,
+    {
+      htmlFor: formItemId,
+      required,
+      className,
+      ...props
+    }
+  );
+};
+FormLabel.displayName = "FormLabel";
+var FormControl = React5.forwardRef(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Slot,
+    {
+      ref,
+      id: formItemId,
+      "aria-describedby": !error ? formDescriptionId : `${formDescriptionId} ${formMessageId}`,
+      "aria-invalid": !!error,
+      "data-error": !!error,
+      ...props
+    }
+  );
+});
+FormControl.displayName = "FormControl";
+var FormDescription = React5.forwardRef(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      id: formDescriptionId,
+      className: cn("text-[0.8rem] text-fg-muted", className),
+      ...props
+    }
+  );
+});
+FormDescription.displayName = "FormDescription";
+var FormMessage = React5.forwardRef(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error.message) : children;
+  if (!body) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      id: formMessageId,
+      className: cn("text-[0.8rem] font-medium text-danger", className),
+      ...props,
+      children: body
+    }
+  );
+});
+FormMessage.displayName = "FormMessage";
+var ToggleGroup = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToggleGroupPrimitive.Root,
+  {
+    ref,
+    className: cn("flex items-center gap-1", className),
+    ...props
+  }
+));
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+var ToggleGroupItem = React5.forwardRef(({ className, children, badge, ...props }, ref) => /* @__PURE__ */ jsxs(
+  ToggleGroupPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "focus-ring inline-flex h-8 items-center justify-center rounded-full px-4 text-sm font-medium transition-colors hover:bg-surface-sunken hover:text-fg disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-primary data-[state=on]:text-primary-fg text-fg-muted",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      badge && /* @__PURE__ */ jsx("span", { className: "ml-1.5 inline-flex items-center justify-center rounded-full bg-fg-muted/20 px-1.5 py-0.5 text-[10px] leading-none group-data-[state=on]:bg-white/20", children: badge })
+    ]
+  }
+));
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+var Command = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1,
+  {
+    ref,
+    className: cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-surface text-fg",
+      className
+    ),
+    ...props
+  }
+));
+Command.displayName = Command$1.displayName;
+var CommandDialog = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx(Dialog, { ...props, children: /* @__PURE__ */ jsx(DialogContent, { className: "overflow-hidden p-0 shadow-lg", children: /* @__PURE__ */ jsx(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-fg-muted [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children }) }) });
+};
+var CommandInput = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b border-line px-3", "cmdk-input-wrapper": "", children: [
+  /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "15",
+      height: "15",
+      viewBox: "0 0 15 15",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: "mr-2 h-4 w-4 shrink-0 opacity-50",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M10 6.5C10 8.433 8.433 10 6.5 10C4.567 10 3 8.433 3 6.5C3 4.567 4.567 3 6.5 3C8.433 3 10 4.567 10 6.5ZM9.30884 10.0159C8.53901 10.6318 7.56251 11 6.5 11C4.01472 11 2 8.98528 2 6.5C2 4.01472 4.01472 2 6.5 2C8.98528 2 11 4.01472 11 6.5C11 7.56251 10.6318 8.53901 10.0159 9.30884L12.8536 12.1464C13.0488 12.3417 13.0488 12.6583 12.8536 12.8536C12.6583 13.0488 12.3417 13.0488 12.1464 12.8536L9.30884 10.0159Z",
+          fill: "currentColor",
+          fillRule: "evenodd",
+          clipRule: "evenodd"
+        }
+      )
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    Command$1.Input,
+    {
+      ref,
+      className: cn(
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-fg-muted disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  )
+] }));
+CommandInput.displayName = Command$1.Input.displayName;
+var CommandList = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.List,
+  {
+    ref,
+    className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
+    ...props
+  }
+));
+CommandList.displayName = Command$1.List.displayName;
+var CommandEmpty = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.Empty,
+  {
+    ref,
+    className: cn("py-6 text-center text-sm", className),
+    ...props
+  }
+));
+CommandEmpty.displayName = Command$1.Empty.displayName;
+var CommandGroup = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.Group,
+  {
+    ref,
+    className: cn(
+      "overflow-hidden p-1 text-fg [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-fg-muted",
+      className
+    ),
+    ...props
+  }
+));
+CommandGroup.displayName = Command$1.Group.displayName;
+var CommandSeparator = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.Separator,
+  {
+    ref,
+    className: cn("-mx-1 h-px bg-line", className),
+    ...props
+  }
+));
+CommandSeparator.displayName = Command$1.Separator.displayName;
+var CommandItem = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-surface-sunken aria-selected:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props
+  }
+));
+CommandItem.displayName = Command$1.Item.displayName;
+var CommandShortcut = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "ml-auto text-xs tracking-widest text-fg-muted",
+        className
+      ),
+      ...props
+    }
+  );
+};
+CommandShortcut.displayName = "CommandShortcut";
+function Combobox({
+  options,
+  value,
+  onChange,
+  placeholder = "Select option...",
+  emptyText = "No results found.",
+  className,
+  disabled = false
+}) {
+  const [open, setOpen] = React5.useState(false);
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        role: "combobox",
+        "aria-expanded": open,
+        className: cn("w-full justify-between font-normal", className),
+        disabled,
+        children: [
+          value ? options.find((option) => option.value === value)?.label : /* @__PURE__ */ jsx("span", { className: "text-fg-muted", children: placeholder }),
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              width: "15",
+              height: "15",
+              viewBox: "0 0 15 15",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              className: "ml-2 h-4 w-4 shrink-0 opacity-50",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.05001 7.49999 3.05001C7.38064 3.05001 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75605 9.60753 8.75605 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75605 5.10753 8.75605 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.26618 11.9026 7.38064 11.95 7.49999 11.95C7.61933 11.95 7.73379 11.9026 7.81819 11.8182L10.0682 9.56819Z",
+                  fill: "currentColor",
+                  fillRule: "evenodd",
+                  clipRule: "evenodd"
+                }
+              )
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-[--radix-popover-trigger-width] p-0", children: /* @__PURE__ */ jsxs(Command, { children: [
+      /* @__PURE__ */ jsx(CommandInput, { placeholder: "Search..." }),
+      /* @__PURE__ */ jsxs(CommandList, { children: [
+        /* @__PURE__ */ jsx(CommandEmpty, { children: emptyText }),
+        /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxs(
+          CommandItem,
+          {
+            value: option.label,
+            onSelect: () => {
+              onChange?.(option.value === value ? "" : option.value);
+              setOpen(false);
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  width: "15",
+                  height: "15",
+                  viewBox: "0 0 15 15",
+                  fill: "none",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  className: cn(
+                    "mr-2 h-4 w-4",
+                    value === option.value ? "opacity-100" : "opacity-0"
+                  ),
+                  children: /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: "M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z",
+                      fill: "currentColor",
+                      fillRule: "evenodd",
+                      clipRule: "evenodd"
+                    }
+                  )
+                }
+              ),
+              option.label
+            ]
+          },
+          option.value
+        )) })
+      ] })
+    ] }) })
+  ] });
+}
+var variantStyles = {
+  default: "bg-primary text-primary-fg hover:bg-primary-hover border-transparent",
+  secondary: "bg-surface-sunken text-fg hover:bg-surface-sunken/80 border-transparent",
+  success: "bg-success text-success-fg hover:bg-success/80 border-transparent",
+  warning: "bg-warning text-warning-fg hover:bg-warning/80 border-transparent",
+  danger: "bg-danger text-danger-fg hover:bg-danger/80 border-transparent",
+  info: "bg-info text-info-fg hover:bg-info/80 border-transparent",
+  outline: "text-fg border-line hover:bg-surface-sunken",
+  "primary-subtle": "bg-primary-subtle text-primary-subtle-fg hover:bg-primary-subtle/80 border-transparent",
+  "success-subtle": "bg-success-subtle text-success-subtle-fg hover:bg-success-subtle/80 border-transparent",
+  "warning-subtle": "bg-warning-subtle text-warning-subtle-fg hover:bg-warning-subtle/80 border-transparent",
+  "danger-subtle": "bg-danger-subtle text-danger-subtle-fg hover:bg-danger-subtle/80 border-transparent",
+  "info-subtle": "bg-info-subtle text-info-subtle-fg hover:bg-info-subtle/80 border-transparent"
+};
+var dotStyles = {
+  default: "bg-primary-fg",
+  secondary: "bg-fg-muted",
+  success: "bg-success-fg",
+  warning: "bg-warning-fg",
+  danger: "bg-danger-fg",
+  info: "bg-info-fg",
+  outline: "bg-fg-muted",
+  "primary-subtle": "bg-primary",
+  "success-subtle": "bg-success",
+  "warning-subtle": "bg-warning",
+  "danger-subtle": "bg-danger",
+  "info-subtle": "bg-info"
+};
+var Badge = forwardRef(function Badge2({ className, variant = "default", dot = false, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus-ring",
+        variantStyles[variant],
+        className
+      ),
+      ...props,
+      children: [
+        dot && /* @__PURE__ */ jsx("span", { className: cn("h-1.5 w-1.5 rounded-full", dotStyles[variant]), "aria-hidden": "true" }),
+        children
+      ]
+    }
+  );
+});
+var MultiSelect = React5.forwardRef(
+  ({ options, value, onChange, placeholder = "Select...", disabled, className, ...props }, ref) => {
+    const field = useFieldInputProps({});
+    const invalid = field["aria-invalid"] === true;
+    const [isOpen, setIsOpen] = React5.useState(false);
+    const containerRef = React5.useRef(null);
+    React5.useImperativeHandle(ref, () => containerRef.current);
+    const handleSelect = (optionValue) => {
+      if (disabled) return;
+      if (value.includes(optionValue)) {
+        onChange(value.filter((v) => v !== optionValue));
+      } else {
+        onChange([...value, optionValue]);
+      }
+    };
+    const handleRemove = (e, optionValue) => {
+      e.stopPropagation();
+      if (disabled) return;
+      onChange(value.filter((v) => v !== optionValue));
+    };
+    React5.useEffect(() => {
+      const handleClickOutside = (event) => {
+        if (containerRef.current && !containerRef.current.contains(event.target)) {
+          setIsOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+    const selectedOptions = options.filter((o) => value.includes(o.value));
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: containerRef,
+        className: cn("relative w-full", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex min-h-[--ml-control-h-md] w-full cursor-pointer flex-wrap items-center gap-1.5 rounded-md border bg-surface p-1.5 text-sm text-fg transition-colors",
+                disabled && "cursor-not-allowed bg-surface-sunken text-fg-disabled",
+                invalid ? "border-danger" : "border-line-strong",
+                isOpen && !invalid && "border-primary ring-1 ring-primary/20"
+              ),
+              onClick: () => !disabled && setIsOpen(!isOpen),
+              ...field,
+              children: [
+                selectedOptions.length === 0 && /* @__PURE__ */ jsx("span", { className: "px-2 text-fg-subtle", children: placeholder }),
+                selectedOptions.map((option) => /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "gap-1 px-1.5 py-0.5", children: [
+                  option.label,
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: "hover:text-danger rounded-full focus:outline-none",
+                      onClick: (e) => handleRemove(e, option.value),
+                      children: /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                        /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+                        /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+                      ] })
+                    }
+                  )
+                ] }, option.value)),
+                /* @__PURE__ */ jsx("div", { className: "ml-auto px-2", children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    className: "size-4 text-fg-subtle",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
+                  }
+                ) })
+              ]
+            }
+          ),
+          isOpen && /* @__PURE__ */ jsx("div", { className: "absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md border border-line bg-surface p-1 shadow-lg", children: options.map((option) => {
+            const isSelected = value.includes(option.value);
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex cursor-pointer items-center justify-between rounded-sm px-2 py-1.5 text-sm text-fg hover:bg-surface-sunken",
+                  isSelected && "bg-primary/10 text-primary font-medium"
+                ),
+                onClick: () => handleSelect(option.value),
+                children: [
+                  /* @__PURE__ */ jsx("span", { children: option.label }),
+                  isSelected && /* @__PURE__ */ jsx("svg", { className: "size-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) })
+                ]
+              },
+              option.value
+            );
+          }) })
+        ]
+      }
+    );
+  }
+);
+MultiSelect.displayName = "MultiSelect";
+var FileUpload = React5.forwardRef(
+  ({ onChange, accept, multiple = false, disabled = false, maxSize, className, ...props }, ref) => {
+    const field = useFieldInputProps({});
+    const invalid = field["aria-invalid"] === true;
+    const inputRef = React5.useRef(null);
+    const [isDragging, setIsDragging] = React5.useState(false);
+    const [selectedFiles, setSelectedFiles] = React5.useState([]);
+    React5.useImperativeHandle(ref, () => inputRef.current);
+    const handleFiles = (newFiles) => {
+      if (!newFiles || disabled) return;
+      const validFiles = Array.from(newFiles).filter((file) => {
+        if (maxSize && file.size > maxSize) return false;
+        return true;
+      });
+      const updatedFiles = multiple ? [...selectedFiles, ...validFiles] : validFiles.slice(0, 1);
+      setSelectedFiles(updatedFiles);
+      onChange?.(updatedFiles);
+    };
+    const handleDragEnter = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!disabled) setIsDragging(true);
+    };
+    const handleDragLeave = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragging(false);
+    };
+    const handleDragOver = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!disabled) setIsDragging(true);
+    };
+    const handleDrop = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragging(false);
+      handleFiles(e.dataTransfer.files);
+    };
+    const handleRemove = (index) => {
+      const updatedFiles = [...selectedFiles];
+      updatedFiles.splice(index, 1);
+      setSelectedFiles(updatedFiles);
+      onChange?.(updatedFiles);
+      if (inputRef.current) inputRef.current.value = "";
+    };
+    return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), ...props, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "relative flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed p-6 transition-colors",
+            isDragging ? "border-primary bg-primary/5" : "border-line-strong bg-surface hover:bg-surface-sunken",
+            disabled && "cursor-not-allowed bg-surface-sunken opacity-60 hover:bg-surface-sunken",
+            invalid && !isDragging && "border-danger bg-danger/5"
+          ),
+          onClick: () => !disabled && inputRef.current?.click(),
+          onDragEnter: handleDragEnter,
+          onDragLeave: handleDragLeave,
+          onDragOver: handleDragOver,
+          onDrop: handleDrop,
+          ...field,
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                type: "file",
+                accept,
+                multiple,
+                disabled,
+                className: "hidden",
+                onChange: (e) => handleFiles(e.target.files)
+              }
+            ),
+            /* @__PURE__ */ jsxs("svg", { className: "mb-3 size-8 text-fg-subtle", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+              /* @__PURE__ */ jsx("polyline", { points: "17 8 12 3 7 8" }),
+              /* @__PURE__ */ jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-fg", children: "Click to upload or drag and drop" }),
+              /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs text-fg-muted", children: [
+                accept ? `Supported: ${accept}` : "All files supported",
+                maxSize && ` (Max: ${Math.round(maxSize / 1024 / 1024)}MB)`
+              ] })
+            ] })
+          ]
+        }
+      ),
+      selectedFiles.length > 0 && /* @__PURE__ */ jsx("ul", { className: "mt-4 flex flex-col gap-2", children: selectedFiles.map((file, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between rounded-md border border-line bg-surface p-3 shadow-sm", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 overflow-hidden", children: [
+          /* @__PURE__ */ jsxs("svg", { className: "size-5 shrink-0 text-primary", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ jsx("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
+            /* @__PURE__ */ jsx("polyline", { points: "13 2 13 9 20 9" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col truncate", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-fg", children: file.name }),
+            /* @__PURE__ */ jsxs("span", { className: "text-xs text-fg-muted", children: [
+              (file.size / 1024).toFixed(1),
+              " KB"
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "ml-4 rounded p-1 text-fg-subtle hover:bg-surface-sunken hover:text-danger focus:outline-none",
+            onClick: () => handleRemove(i),
+            disabled,
+            children: /* @__PURE__ */ jsxs("svg", { className: "size-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+              /* @__PURE__ */ jsx("polyline", { points: "3 6 5 6 21 6" }),
+              /* @__PURE__ */ jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" }),
+              /* @__PURE__ */ jsx("line", { x1: "10", y1: "11", x2: "10", y2: "17" }),
+              /* @__PURE__ */ jsx("line", { x1: "14", y1: "11", x2: "14", y2: "17" })
+            ] })
+          }
+        )
+      ] }, `${file.name}-${i}`)) })
+    ] });
+  }
+);
+FileUpload.displayName = "FileUpload";
+function DateRangePicker({
+  value,
+  onChange,
+  placeholder = "Pick a date range",
+  disabled,
+  className
+}) {
+  const [open, setOpen] = React5.useState(false);
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        disabled,
+        className: cn(
+          "flex h-9 w-full items-center justify-between rounded-md border border-line bg-surface px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-fg-muted focus:outline-none focus:ring-1 focus:ring-primary disabled:cursor-not-allowed disabled:opacity-50",
+          !value?.from && "text-fg-muted",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { children: value?.from ? value.to ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            format(value.from, "LLL dd, y"),
+            " - ",
+            format(value.to, "LLL dd, y")
+          ] }) : format(value.from, "LLL dd, y") : placeholder }),
+          /* @__PURE__ */ jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "h-4 w-4 opacity-50", children: /* @__PURE__ */ jsx("path", { d: "M4.125 1.5C4.125 1.29289 3.95711 1.125 3.75 1.125C3.54289 1.125 3.375 1.29289 3.375 1.5V2.25H1.5C0.671573 2.25 0 2.92157 0 3.75V13.5C0 14.3284 0.671573 15 1.5 15H13.5C14.3284 15 15 14.3284 15 13.5V3.75C15 2.92157 14.3284 2.25 13.5 2.25H11.625V1.5C11.625 1.29289 11.4571 1.125 11.25 1.125C11.0429 1.125 10.875 1.29289 10.875 1.5V2.25H4.125V1.5ZM1.5 3.375H3.375V4.125C3.375 4.33211 3.54289 4.5 3.75 4.5C3.95711 4.5 4.125 4.33211 4.125 4.125V3.375H10.875V4.125C10.875 4.33211 11.0429 4.5 11.25 4.5C11.4571 4.5 11.625 4.33211 11.625 4.125V3.375H13.5C13.7071 3.375 13.875 3.54289 13.875 3.75V5.25H1.125V3.75C1.125 3.54289 1.29289 3.375 1.5 3.375ZM1.125 6.375V13.5C1.125 13.7071 1.29289 13.875 1.5 13.875H13.5C13.7071 13.875 13.875 13.7071 13.875 13.5V6.375H1.125Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx(
+      Calendar,
+      {
+        initialFocus: true,
+        mode: "range",
+        defaultMonth: value?.from,
+        selected: value,
+        onSelect: onChange,
+        numberOfMonths: 2
+      }
+    ) })
+  ] });
+}
+var Slider = React5.forwardRef(
+  ({
+    value,
+    defaultValue,
+    min = 0,
+    max = 100,
+    step = 1,
+    onChange,
+    showTicks = false,
+    className,
+    disabled,
+    ...props
+  }, ref) => {
+    const field = useFieldInputProps({});
+    const invalid = field["aria-invalid"] === true;
+    const [internalValue, setInternalValue] = React5.useState(
+      value ?? defaultValue ?? min
+    );
+    const isControlled = value !== void 0;
+    const currentValue = isControlled ? value : internalValue;
+    const handleChange = (e) => {
+      const val = Number(e.target.value);
+      if (!isControlled) {
+        setInternalValue(val);
+      }
+      onChange?.(val);
+    };
+    const percentage = (currentValue - min) / (max - min) * 100;
+    return /* @__PURE__ */ jsxs("div", { className: cn("relative w-full", className), children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative flex h-6 w-full items-center", children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute h-1.5 w-full overflow-hidden rounded-full bg-surface-sunken", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "h-full bg-primary",
+              disabled && "bg-fg-muted",
+              invalid && "bg-danger"
+            ),
+            style: { width: `${percentage}%` }
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            type: "range",
+            min,
+            max,
+            step,
+            value: currentValue,
+            onChange: handleChange,
+            ...field,
+            ...props,
+            disabled: disabled || field.disabled,
+            className: cn(
+              "absolute h-full w-full cursor-pointer appearance-none bg-transparent outline-none",
+              "[&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-primary [&::-webkit-slider-thumb]:bg-surface [&::-webkit-slider-thumb]:shadow-md [&::-webkit-slider-thumb]:transition-colors",
+              "[&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-primary [&::-moz-range-thumb]:bg-surface [&::-moz-range-thumb]:shadow-md [&::-moz-range-thumb]:transition-colors",
+              "focus-visible:[&::-webkit-slider-thumb]:ring-2 focus-visible:[&::-webkit-slider-thumb]:ring-primary focus-visible:[&::-webkit-slider-thumb]:ring-offset-2",
+              "focus-visible:[&::-moz-range-thumb]:ring-2 focus-visible:[&::-moz-range-thumb]:ring-primary focus-visible:[&::-moz-range-thumb]:ring-offset-2",
+              disabled && "cursor-not-allowed [&::-webkit-slider-thumb]:border-fg-muted [&::-webkit-slider-thumb]:bg-surface-sunken [&::-moz-range-thumb]:border-fg-muted [&::-moz-range-thumb]:bg-surface-sunken",
+              invalid && "[&::-webkit-slider-thumb]:border-danger [&::-moz-range-thumb]:border-danger"
+            )
+          }
+        )
+      ] }),
+      showTicks && /* @__PURE__ */ jsxs("div", { className: "mt-2 flex justify-between text-xs text-fg-muted px-1", children: [
+        /* @__PURE__ */ jsx("span", { children: min }),
+        /* @__PURE__ */ jsx("span", { children: max })
+      ] })
+    ] });
+  }
+);
+Slider.displayName = "Slider";
+var SignatureInput = React5.forwardRef(
+  ({ onChange, disabled, className, ...props }, ref) => {
+    const field = useFieldInputProps({});
+    const invalid = field["aria-invalid"] === true;
+    const canvasRef = React5.useRef(null);
+    const [isDrawing, setIsDrawing] = React5.useState(false);
+    const [hasSignature, setHasSignature] = React5.useState(false);
+    const getCoordinates = (e) => {
+      if (!canvasRef.current) return;
+      const canvas = canvasRef.current;
+      const rect = canvas.getBoundingClientRect();
+      let clientX, clientY;
+      if ("touches" in e) {
+        const touch = e.touches[0];
+        if (!touch) return;
+        clientX = touch.clientX;
+        clientY = touch.clientY;
+      } else {
+        clientX = e.clientX;
+        clientY = e.clientY;
+      }
+      return {
+        x: clientX - rect.left,
+        y: clientY - rect.top
+      };
+    };
+    const startDrawing = (e) => {
+      if (disabled || !canvasRef.current) return;
+      const coords = getCoordinates(e);
+      if (!coords) return;
+      const ctx = canvasRef.current.getContext("2d");
+      if (!ctx) return;
+      ctx.beginPath();
+      ctx.moveTo(coords.x, coords.y);
+      setIsDrawing(true);
+    };
+    const draw = (e) => {
+      if (!isDrawing || disabled || !canvasRef.current) return;
+      const coords = getCoordinates(e);
+      if (!coords) return;
+      const ctx = canvasRef.current.getContext("2d");
+      if (!ctx) return;
+      ctx.lineTo(coords.x, coords.y);
+      ctx.stroke();
+      setHasSignature(true);
+    };
+    const stopDrawing = () => {
+      if (isDrawing && canvasRef.current) {
+        setIsDrawing(false);
+        const dataUrl = canvasRef.current.toDataURL("image/png");
+        onChange?.(dataUrl);
+      }
+    };
+    const clearSignature = () => {
+      if (disabled || !canvasRef.current) return;
+      const ctx = canvasRef.current.getContext("2d");
+      if (ctx) {
+        ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
+        setHasSignature(false);
+        onChange?.(null);
+      }
+    };
+    React5.useEffect(() => {
+      const canvas = canvasRef.current;
+      if (canvas) {
+        const ctx = canvas.getContext("2d");
+        if (ctx) {
+          ctx.strokeStyle = "#000";
+          ctx.lineWidth = 2;
+          ctx.lineCap = "round";
+          ctx.lineJoin = "round";
+        }
+      }
+    }, []);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("flex flex-col gap-2 w-full", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "relative w-full rounded-md border bg-surface overflow-hidden",
+                invalid ? "border-danger" : "border-line-strong",
+                disabled ? "opacity-50 cursor-not-allowed bg-surface-sunken" : "cursor-crosshair",
+                "h-[150px]"
+                // Fixed height for signature pad
+              ),
+              ...field,
+              children: [
+                !hasSignature && !disabled && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none text-fg-muted opacity-50 text-sm", children: "Sign here" }),
+                /* @__PURE__ */ jsx(
+                  "canvas",
+                  {
+                    ref: canvasRef,
+                    width: 400,
+                    height: 150,
+                    className: "w-full h-full block",
+                    onMouseDown: startDrawing,
+                    onMouseMove: draw,
+                    onMouseUp: stopDrawing,
+                    onMouseOut: stopDrawing,
+                    onTouchStart: (e) => {
+                      if (e.target === canvasRef.current) e.preventDefault();
+                      startDrawing(e);
+                    },
+                    onTouchMove: (e) => {
+                      if (e.target === canvasRef.current) e.preventDefault();
+                      draw(e);
+                    },
+                    onTouchEnd: stopDrawing
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 left-4 text-xs text-fg-subtle border-t border-line-strong w-[calc(100%-2rem)] pt-1", children: "X" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: clearSignature,
+              disabled: disabled || !hasSignature,
+              className: "text-xs font-medium text-primary hover:text-primary-hover disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none",
+              children: "Clear signature"
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+SignatureInput.displayName = "SignatureInput";
+var stack = defineVariants({
+  base: "flex",
+  variants: {
+    direction: {
+      column: "flex-col",
+      row: "flex-row"
+    },
+    gap: {
+      none: "gap-0",
+      xs: "gap-1",
+      sm: "gap-2",
+      md: "gap-4",
+      lg: "gap-6",
+      xl: "gap-10"
+    },
+    align: {
+      stretch: "items-stretch",
+      start: "items-start",
+      center: "items-center",
+      end: "items-end"
+    },
+    wrap: { true: "flex-wrap", false: "" }
+  },
+  defaultVariants: { direction: "column", gap: "md", align: "stretch", wrap: false }
+});
+function Stack(props) {
+  const { as, direction, gap, align, wrap, className, ...rest } = props;
+  const Component = as ?? "div";
+  return /* @__PURE__ */ jsx(Component, { className: stack({ direction, gap, align, wrap, className }), ...rest });
+}
+var flex = defineVariants({
+  base: "flex",
+  variants: {
+    align: {
+      stretch: "items-stretch",
+      start: "items-start",
+      center: "items-center",
+      end: "items-end",
+      baseline: "items-baseline"
+    },
+    justify: {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end",
+      between: "justify-between",
+      around: "justify-around"
+    },
+    gap: {
+      none: "gap-0",
+      xs: "gap-1",
+      sm: "gap-2",
+      md: "gap-4",
+      lg: "gap-6",
+      xl: "gap-10"
+    },
+    wrap: { true: "flex-wrap", false: "" }
+  },
+  defaultVariants: { align: "center", justify: "start", gap: "sm", wrap: false }
+});
+function Flex(props) {
+  const { as, align, justify, gap, wrap, className, ...rest } = props;
+  const Component = as ?? "div";
+  return /* @__PURE__ */ jsx(Component, { className: flex({ align, justify, gap, wrap, className }), ...rest });
+}
+var grid = defineVariants({
+  base: "grid",
+  variants: {
+    gap: {
+      none: "gap-0",
+      xs: "gap-1",
+      sm: "gap-2",
+      md: "gap-4",
+      lg: "gap-6",
+      xl: "gap-10"
+    }
+  },
+  defaultVariants: { gap: "md" }
+});
+function Grid(props) {
+  const { as, columns = 2, gap, className, style, ...rest } = props;
+  const Component = as ?? "div";
+  const gridTemplateColumns = typeof columns === "number" ? `repeat(${String(columns)}, minmax(0, 1fr))` : `repeat(auto-fit, minmax(min(${columns.min}, 100%), 1fr))`;
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: grid({ gap, className }),
+      style: { gridTemplateColumns, ...style },
+      ...rest
+    }
+  );
+}
+var container = defineVariants({
+  base: "mx-auto w-full px-4 sm:px-6",
+  variants: {
+    size: {
+      sm: "max-w-screen-sm",
+      md: "max-w-screen-md",
+      lg: "max-w-screen-lg",
+      xl: "max-w-screen-xl",
+      /** Edge-to-edge with side padding only. */
+      full: "max-w-none"
+    }
+  },
+  defaultVariants: { size: "xl" }
+});
+function Container(props) {
+  const { as, size, className, ...rest } = props;
+  const Component = as ?? "div";
+  return /* @__PURE__ */ jsx(Component, { className: container({ size, className }), ...rest });
+}
+var panel = defineVariants({
+  base: "rounded-lg border border-line bg-surface",
+  variants: {
+    padding: {
+      none: "p-0",
+      sm: "p-3",
+      md: "p-4",
+      lg: "p-6"
+    },
+    elevation: {
+      flat: "",
+      raised: "shadow-raised",
+      overlay: "shadow-overlay"
+    }
+  },
+  defaultVariants: { padding: "md", elevation: "raised" }
+});
+function Panel(props) {
+  const { as, padding, elevation, className, ...rest } = props;
+  const Component = as ?? "div";
+  return /* @__PURE__ */ jsx(Component, { className: panel({ padding, elevation, className }), ...rest });
+}
+function Divider({ orientation = "horizontal", label, className, ...rest }) {
+  if (orientation === "vertical") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "separator",
+        "aria-orientation": "vertical",
+        className: cn("h-full w-px self-stretch bg-line", className),
+        ...rest
+      }
+    );
+  }
+  if (label !== void 0) {
+    return /* @__PURE__ */ jsxs("div", { role: "separator", className: cn("flex items-center gap-3", className), ...rest, children: [
+      /* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-line" }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-fg-subtle", children: label }),
+      /* @__PURE__ */ jsx("span", { className: "h-px flex-1 bg-line" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { role: "separator", className: cn("h-px w-full bg-line", className), ...rest });
+}
+var PageHeader = forwardRef(function PageHeader2({ title, description, actions, breadcrumbs, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      ref,
+      className: cn("flex flex-col gap-4 pb-6 pt-4", className),
+      ...props,
+      children: [
+        breadcrumbs && /* @__PURE__ */ jsx("div", { className: "mb-2", children: breadcrumbs }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold tracking-tight text-fg", children: title }),
+            description && /* @__PURE__ */ jsx("p", { className: "text-sm text-fg-muted", children: description })
+          ] }),
+          actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: actions })
+        ] })
+      ]
+    }
+  );
+});
+function Tabs({
+  tabs,
+  value,
+  defaultValue,
+  onChange,
+  renderPanel,
+  className,
+  ...rest
+}) {
+  const firstEnabled = tabs.find((t) => t.disabled !== true)?.key;
+  const [active, setActive] = useControllableState({
+    value,
+    defaultValue: defaultValue ?? firstEnabled,
+    onChange
+  });
+  const refs = useRef(/* @__PURE__ */ new Map());
+  const enabled = tabs.filter((t) => t.disabled !== true);
+  const onKeyDown = (event, key) => {
+    const index = enabled.findIndex((t) => t.key === key);
+    if (index === -1) return;
+    let next;
+    if (event.key === "ArrowRight") next = enabled[(index + 1) % enabled.length]?.key;
+    else if (event.key === "ArrowLeft") next = enabled[(index - 1 + enabled.length) % enabled.length]?.key;
+    else if (event.key === "Home") next = enabled[0]?.key;
+    else if (event.key === "End") next = enabled[enabled.length - 1]?.key;
+    if (next !== void 0) {
+      event.preventDefault();
+      setActive(next);
+      refs.current.get(next)?.focus();
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx("div", { role: "tablist", className: "flex items-stretch gap-1 overflow-x-auto overflow-y-hidden border-b border-line", ...rest, children: tabs.map((tab) => {
+      const selected = active === tab.key;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref: (el) => {
+            if (el) refs.current.set(tab.key, el);
+            else refs.current.delete(tab.key);
+          },
+          role: "tab",
+          type: "button",
+          "aria-selected": selected,
+          "aria-controls": renderPanel ? `panel-${tab.key}` : void 0,
+          tabIndex: selected ? 0 : -1,
+          disabled: tab.disabled,
+          onClick: () => {
+            setActive(tab.key);
+          },
+          onKeyDown: (e) => {
+            onKeyDown(e, tab.key);
+          },
+          className: cn(
+            "focus-ring -mb-px inline-flex items-center gap-2 whitespace-nowrap border-b-2 px-3.5 py-2.5 text-sm font-semibold",
+            "transition-colors duration-(--ml-duration-fast)",
+            "disabled:cursor-not-allowed disabled:text-fg-disabled",
+            selected ? "border-primary text-primary-subtle-fg" : "border-transparent text-fg-muted hover:text-fg"
+          ),
+          children: [
+            tab.icon && /* @__PURE__ */ jsx("span", { className: "[&_svg]:size-(--size-icon-sm)", children: tab.icon }),
+            tab.label,
+            tab.badge
+          ]
+        },
+        tab.key
+      );
+    }) }),
+    renderPanel && active !== void 0 && /* @__PURE__ */ jsx("div", { role: "tabpanel", id: `panel-${active}`, tabIndex: 0, className: "focus-ring pt-4", children: renderPanel(active) })
+  ] });
+}
+function Breadcrumbs({
+  items,
+  linkComponent: LinkComponent = "a",
+  separator = "/",
+  className
+}) {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className, children: /* @__PURE__ */ jsx("ol", { className: "m-0 flex list-none flex-wrap items-center gap-1.5 p-0 text-sm", children: items.map((item, index) => {
+    const isLast = index === items.length - 1;
+    return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      index > 0 && /* @__PURE__ */ jsx("li", { "aria-hidden": true, className: "text-fg-subtle", children: separator }),
+      /* @__PURE__ */ jsx("li", { className: cn("min-w-0", isLast && "truncate"), children: item.href !== void 0 && !isLast ? /* @__PURE__ */ jsx(
+        LinkComponent,
+        {
+          href: item.href,
+          className: "focus-ring rounded-xs font-medium text-fg-muted no-underline hover:text-fg hover:underline",
+          children: item.label
+        }
+      ) : /* @__PURE__ */ jsx("span", { "aria-current": isLast ? "page" : void 0, className: "font-semibold text-fg", children: item.label }) })
+    ] }, index);
+  }) }) });
+}
+function Pagination({ page, pageCount, onPageChange, siblingCount = 1, className }) {
+  if (pageCount <= 1) return null;
+  const items = pageRange(page, pageCount, siblingCount);
+  const pageButton = (target) => {
+    const isCurrent = target === page;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-current": isCurrent ? "page" : void 0,
+        "aria-label": `Page ${String(target)}`,
+        onClick: () => {
+          if (!isCurrent) onPageChange(target);
+        },
+        className: cn(
+          "focus-ring inline-flex h-(--ml-control-h-sm) min-w-(--ml-control-h-sm) items-center justify-center rounded-md px-2 text-sm font-semibold tabular-nums",
+          "transition-colors duration-(--ml-duration-fast)",
+          isCurrent ? "bg-primary text-primary-fg" : "text-fg-muted hover:bg-surface-sunken hover:text-fg"
+        ),
+        children: target
+      },
+      target
+    );
+  };
+  return /* @__PURE__ */ jsxs("nav", { "aria-label": "Pagination", className: cn("flex items-center gap-1", className), children: [
+    /* @__PURE__ */ jsx(
+      ArrowButton,
+      {
+        label: "Previous page",
+        disabled: page <= 1,
+        onClick: () => {
+          onPageChange(page - 1);
+        },
+        direction: "left"
+      }
+    ),
+    items.map(
+      (item, index) => item === PAGE_ELLIPSIS ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "px-1 text-fg-subtle", children: "\u2026" }, `e-${String(index)}`) : pageButton(item)
+    ),
+    /* @__PURE__ */ jsx(
+      ArrowButton,
+      {
+        label: "Next page",
+        disabled: page >= pageCount,
+        onClick: () => {
+          onPageChange(page + 1);
+        },
+        direction: "right"
+      }
+    )
+  ] });
+}
+function ArrowButton({
+  label,
+  disabled,
+  onClick,
+  direction
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      disabled,
+      onClick,
+      className: cn(
+        "focus-ring inline-flex h-(--ml-control-h-sm) w-(--ml-control-h-sm) items-center justify-center rounded-md text-fg-muted",
+        "transition-colors duration-(--ml-duration-fast) hover:bg-surface-sunken hover:text-fg",
+        "disabled:cursor-not-allowed disabled:text-fg-disabled disabled:hover:bg-transparent"
+      ),
+      children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          "aria-hidden": true,
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          className: cn("size-4", direction === "left" && "rotate-180"),
+          children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" })
+        }
+      )
+    }
+  );
+}
+var DropdownMenu = DropdownMenuPrimitive.Root;
+var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+var DropdownMenuGroup = DropdownMenuPrimitive.Group;
+var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+var DropdownMenuSub = DropdownMenuPrimitive.Sub;
+var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+var DropdownMenuSubTrigger = forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  DropdownMenuPrimitive.SubTrigger,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-surface-sunken data-[state=open]:bg-surface-sunken",
+      inset && "pl-8",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "ml-auto h-4 w-4",
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: "0 0 24 24",
+          strokeWidth: 2,
+          children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" })
+        }
+      )
+    ]
+  }
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+var DropdownMenuSubContent = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.SubContent,
+  {
+    ref,
+    className: cn(
+      "z-(--ml-z-popover) min-w-[8rem] overflow-hidden rounded-md border border-line bg-surface p-1 text-fg shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+var DropdownMenuContent = forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-(--ml-z-popover) min-w-[8rem] overflow-hidden rounded-md border border-line bg-surface p-1 text-fg shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+var DropdownMenuItem = forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-surface-sunken focus:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+var DropdownMenuCheckboxItem = forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+  DropdownMenuPrimitive.CheckboxItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-surface-sunken focus:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    checked,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          width: "15",
+          height: "15",
+          viewBox: "0 0 15 15",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          className: "h-4 w-4 fill-current",
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z",
+              fill: "currentColor",
+              fillRule: "evenodd",
+              clipRule: "evenodd"
+            }
+          )
+        }
+      ) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+var DropdownMenuRadioItem = forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  DropdownMenuPrimitive.RadioItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-surface-sunken focus:text-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-current" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+var DropdownMenuLabel = forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Label,
+  {
+    ref,
+    className: cn(
+      "px-2 py-1.5 text-sm font-semibold text-fg",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+var DropdownMenuSeparator = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-line", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+var DropdownMenuShortcut = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("ml-auto text-xs tracking-widest text-fg-muted", className),
+      ...props
+    }
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+var Accordion = AccordionPrimitive.Root;
+var AccordionItem = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AccordionPrimitive.Item,
+  {
+    ref,
+    className: cn("border-b border-line", className),
+    ...props
+  }
+));
+AccordionItem.displayName = "AccordionItem";
+var AccordionTrigger = forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+  AccordionPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline focus-ring [&[data-state=open]>svg]:rotate-180",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(
+        "svg",
+        {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          className: "h-4 w-4 shrink-0 transition-transform duration-200",
+          "aria-hidden": true,
+          children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
+        }
+      )
+    ]
+  }
+) }));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+var AccordionContent = forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  AccordionPrimitive.Content,
+  {
+    ref,
+    className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+    ...props,
+    children: /* @__PURE__ */ jsx("div", { className: cn("pb-4 pt-0", className), children })
+  }
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+var Avatar = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    ),
+    ...props
+  }
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+var AvatarImage = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Image,
+  {
+    ref,
+    className: cn("aspect-square h-full w-full", className),
+    ...props
+  }
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+var AvatarFallback = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Fallback,
+  {
+    ref,
+    className: cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-surface-sunken text-fg-muted",
+      className
+    ),
+    ...props
+  }
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+var Card = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "rounded-xl border border-line bg-surface text-fg shadow-sm",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Card.displayName = "Card";
+var CardHeader = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-col space-y-1.5 p-6", className),
+      ...props
+    }
+  )
+);
+CardHeader.displayName = "CardHeader";
+var CardTitle = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "h3",
+    {
+      ref,
+      className: cn(
+        "font-semibold leading-none tracking-tight text-fg",
+        className
+      ),
+      ...props
+    }
+  )
+);
+CardTitle.displayName = "CardTitle";
+var CardDescription = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      className: cn("text-sm text-fg-muted", className),
+      ...props
+    }
+  )
+);
+CardDescription.displayName = "CardDescription";
+var CardContent = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props })
+);
+CardContent.displayName = "CardContent";
+var CardFooter = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("flex items-center p-6 pt-0", className),
+      ...props
+    }
+  )
+);
+CardFooter.displayName = "CardFooter";
+function DataTable({
+  columns,
+  data,
+  className
+}) {
+  const [sorting, setSorting] = useState([]);
+  const table = useReactTable({
+    data,
+    columns,
+    state: {
+      sorting
+    },
+    onSortingChange: setSorting,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel()
+  });
+  return /* @__PURE__ */ jsx("div", { className: cn("rounded-md border border-line overflow-hidden", className), children: /* @__PURE__ */ jsxs("table", { className: "w-full caption-bottom text-sm", children: [
+    /* @__PURE__ */ jsx("thead", { className: "[&_tr]:border-b [&_tr]:border-line bg-surface-sunken", children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(
+      "tr",
+      {
+        className: "border-b border-line transition-colors hover:bg-surface-sunken/50 data-[state=selected]:bg-surface-sunken",
+        children: headerGroup.headers.map((header) => {
+          return /* @__PURE__ */ jsx(
+            "th",
+            {
+              className: "h-10 px-4 text-left align-middle font-medium text-fg-muted [&:has([role=checkbox])]:pr-0",
+              children: header.isPlaceholder ? null : flexRender(
+                header.column.columnDef.header,
+                header.getContext()
+              )
+            },
+            header.id
+          );
+        })
+      },
+      headerGroup.id
+    )) }),
+    /* @__PURE__ */ jsx("tbody", { className: "[&_tr:last-child]:border-0 bg-surface text-fg", children: table.getRowModel().rows.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(
+      "tr",
+      {
+        "data-state": row.getIsSelected() && "selected",
+        className: "border-b border-line transition-colors hover:bg-surface-sunken/50 data-[state=selected]:bg-surface-sunken",
+        children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(
+          "td",
+          {
+            className: "p-4 align-middle [&:has([role=checkbox])]:pr-0",
+            children: flexRender(cell.column.columnDef.cell, cell.getContext())
+          },
+          cell.id
+        ))
+      },
+      row.id
+    )) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+      "td",
+      {
+        colSpan: columns.length,
+        className: "h-24 text-center text-fg-muted",
+        children: "No results."
+      }
+    ) }) })
+  ] }) });
+}
+var Timeline = React5.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "ol",
+      {
+        ref,
+        className: cn("relative border-l border-line ml-3.5 space-y-6", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+Timeline.displayName = "Timeline";
+var TimelineItem = React5.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "li",
+      {
+        ref,
+        className: cn("relative ml-6", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+TimelineItem.displayName = "TimelineItem";
+var TimelineDot = React5.forwardRef(
+  ({ className, intent = "default", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "absolute -left-[1.8125rem] mt-0.5 flex h-6 w-6 items-center justify-center rounded-full bg-surface ring-4 ring-surface",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("h-2.5 w-2.5 rounded-full border shadow-sm", {
+              "border-line-strong bg-surface-sunken": intent === "default",
+              "border-primary bg-primary": intent === "primary",
+              "border-success bg-success": intent === "success",
+              "border-warning bg-warning": intent === "warning",
+              "border-danger bg-danger": intent === "danger",
+              "border-info bg-info": intent === "info"
+            })
+          }
+        )
+      }
+    );
+  }
+);
+TimelineDot.displayName = "TimelineDot";
+var TimelineContent = React5.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("flex flex-col space-y-1", className),
+        ...props
+      }
+    );
+  }
+);
+TimelineContent.displayName = "TimelineContent";
+var TimelineTime = React5.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "time",
+      {
+        ref,
+        className: cn("text-xs font-medium tracking-wide text-fg-subtle uppercase", className),
+        ...props
+      }
+    );
+  }
+);
+TimelineTime.displayName = "TimelineTime";
+var TimelineTitle = React5.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "h3",
+      {
+        ref,
+        className: cn("text-base font-medium text-fg", className),
+        ...props
+      }
+    );
+  }
+);
+TimelineTitle.displayName = "TimelineTitle";
+var TimelineDescription = React5.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        ref,
+        className: cn("text-sm text-fg-muted", className),
+        ...props
+      }
+    );
+  }
+);
+TimelineDescription.displayName = "TimelineDescription";
+var Steps = React5.forwardRef(
+  ({ className, steps, activeStep = 0, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("flex w-full items-center", className),
+        ...props,
+        children: steps.map((step, index) => {
+          const isCompleted = index < activeStep;
+          const isActive = index === activeStep;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "relative flex flex-1 flex-col items-center text-center",
+                index !== steps.length - 1 ? "after:absolute after:left-[50%] after:top-[9px] after:h-[2px] after:w-full after:bg-line" : "",
+                isCompleted && index !== steps.length - 1 ? "after:bg-primary" : ""
+              ),
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "relative z-10 flex h-5 w-5 items-center justify-center rounded-full border-2 bg-surface transition-all duration-200",
+                      isCompleted ? "border-primary bg-primary" : isActive ? "border-primary ring-4 ring-primary/20" : "border-line-strong bg-surface-sunken"
+                    ),
+                    children: [
+                      isActive && /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-primary" }),
+                      isCompleted && /* @__PURE__ */ jsx("svg", { className: "h-3 w-3 text-primary-fg", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-col items-center", children: [
+                  /* @__PURE__ */ jsx("span", { className: cn("text-sm font-semibold", isActive || isCompleted ? "text-fg" : "text-fg-muted"), children: step.label }),
+                  step.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-fg-subtle mt-0.5", children: step.description })
+                ] })
+              ]
+            },
+            index
+          );
+        })
+      }
+    );
+  }
+);
+Steps.displayName = "Steps";
+var StatCard = React5.forwardRef(
+  ({ className, title, value, trend, icon, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(Card, { ref, className: cn("p-6", className), ...props, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-fg-muted", children: title }),
+        icon && /* @__PURE__ */ jsx("div", { className: "text-fg-subtle [&_svg]:h-4 [&_svg]:w-4", children: icon })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-baseline gap-2", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight text-fg", children: value }),
+        trend && /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: cn(
+              "inline-flex items-center text-sm font-medium",
+              trend.isPositive === true ? "text-success" : trend.isPositive === false ? "text-danger" : "text-fg-muted"
+            ),
+            children: [
+              trend.isPositive === true && /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: "mr-1 h-3 w-3",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  strokeWidth: 3,
+                  children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 15l7-7 7 7" })
+                }
+              ),
+              trend.isPositive === false && /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: "mr-1 h-3 w-3",
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  strokeWidth: 3,
+                  children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+                }
+              ),
+              trend.value
+            ]
+          }
+        )
+      ] }),
+      trend?.label && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-fg-subtle", children: trend.label })
+    ] });
+  }
+);
+StatCard.displayName = "StatCard";
+
+// src/components/data-display/Chart/Chart.utils.ts
+var CHART_PALETTE_SIZE = 8;
+function chartColor(position) {
+  return `var(--ml-chart-${String(position % CHART_PALETTE_SIZE + 1)})`;
+}
+function resolveSeries(series) {
+  return series.map((entry, position) => {
+    const config = typeof entry === "string" ? { dataKey: entry } : entry;
+    return {
+      dataKey: config.dataKey,
+      label: config.label ?? config.dataKey,
+      color: config.color ?? chartColor(position)
+    };
+  });
+}
+function ChartTooltipContent({
+  active,
+  label,
+  payload,
+  valueFormatter,
+  indexFormatter,
+  className
+}) {
+  if (!active || !payload || payload.length === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "min-w-32 rounded-md border border-line bg-surface-raised px-3 py-2 text-xs shadow-overlay",
+        className
+      ),
+      children: [
+        label !== void 0 && /* @__PURE__ */ jsx("p", { className: "mb-1.5 font-medium text-fg", children: indexFormatter ? indexFormatter(label) : label }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: payload.map((entry) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex items-center justify-between gap-4",
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-fg-muted", children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": true,
+                    className: "size-2 shrink-0 rounded-[2px]",
+                    style: { backgroundColor: entry.color }
+                  }
+                ),
+                entry.name
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "font-medium tabular-nums text-fg", children: typeof entry.value === "number" && valueFormatter ? valueFormatter(entry.value) : String(entry.value) })
+            ]
+          },
+          String(entry.dataKey ?? entry.name)
+        )) })
+      ]
+    }
+  );
+}
+function ChartLegendContent({ payload, className }) {
+  if (!payload || payload.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap items-center justify-center gap-x-4 gap-y-1 pt-3", className), children: payload.map((entry) => /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "flex items-center gap-1.5 text-xs text-fg-muted",
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "size-2 shrink-0 rounded-[2px]",
+            style: { backgroundColor: entry.color }
+          }
+        ),
+        entry.value
+      ]
+    },
+    String(entry.dataKey ?? entry.value)
+  )) });
+}
+var DEFAULT_CHART_HEIGHT = 300;
+var ChartRoot = React5.forwardRef(({ className, height, style, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    role: "img",
+    className: cn("w-full text-xs", className),
+    style: { height, ...style },
+    ...props,
+    children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children })
+  }
+));
+ChartRoot.displayName = "ChartRoot";
+function renderCartesianScaffold(props, options = {}) {
+  const {
+    index,
+    series,
+    valueFormatter,
+    indexFormatter,
+    showGrid = true,
+    showTooltip = true,
+    showLegend = series.length > 1,
+    showXAxis = true,
+    showYAxis = true
+  } = props;
+  const children = [];
+  if (showGrid) {
+    children.push(
+      /* @__PURE__ */ jsx(
+        CartesianGrid,
+        {
+          stroke: "var(--ml-chart-grid)",
+          strokeDasharray: "4 4",
+          vertical: false
+        },
+        "grid"
+      )
+    );
+  }
+  if (showXAxis) {
+    children.push(
+      /* @__PURE__ */ jsx(
+        XAxis,
+        {
+          dataKey: index,
+          stroke: "var(--ml-chart-label)",
+          tick: { fill: "var(--ml-chart-label)", fontSize: 12 },
+          tickLine: false,
+          axisLine: false,
+          tickMargin: 8,
+          tickFormatter: indexFormatter
+        },
+        "x"
+      )
+    );
+  }
+  if (showYAxis) {
+    children.push(
+      /* @__PURE__ */ jsx(
+        YAxis,
+        {
+          width: 48,
+          stroke: "var(--ml-chart-label)",
+          tick: { fill: "var(--ml-chart-label)", fontSize: 12 },
+          tickLine: false,
+          axisLine: false,
+          tickFormatter: valueFormatter
+        },
+        "y"
+      )
+    );
+  }
+  if (showTooltip) {
+    children.push(
+      /* @__PURE__ */ jsx(
+        Tooltip$1,
+        {
+          cursor: options.tooltipCursor ?? { stroke: "var(--ml-chart-grid)" },
+          content: /* @__PURE__ */ jsx(
+            ChartTooltipContent,
+            {
+              valueFormatter,
+              indexFormatter
+            }
+          )
+        },
+        "tooltip"
+      )
+    );
+  }
+  if (showLegend) {
+    children.push(/* @__PURE__ */ jsx(Legend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }, "legend"));
+  }
+  return children;
+}
+function LineChart({
+  data,
+  index,
+  series,
+  height = DEFAULT_CHART_HEIGHT,
+  valueFormatter,
+  indexFormatter,
+  showGrid,
+  showTooltip,
+  showLegend,
+  showXAxis,
+  showYAxis,
+  curve = "monotone",
+  showDots = false,
+  ...rootProps
+}) {
+  const resolved = resolveSeries(series);
+  return /* @__PURE__ */ jsx(ChartRoot, { height, ...rootProps, children: /* @__PURE__ */ jsxs(
+    LineChart$1,
+    {
+      data: data.slice(),
+      margin: { top: 8, right: 8, left: 0, bottom: 0 },
+      accessibilityLayer: true,
+      children: [
+        renderCartesianScaffold({
+          index,
+          series,
+          valueFormatter,
+          indexFormatter,
+          showGrid,
+          showTooltip,
+          showLegend,
+          showXAxis,
+          showYAxis
+        }),
+        resolved.map((s) => /* @__PURE__ */ jsx(
+          Line,
+          {
+            type: curve,
+            dataKey: s.dataKey,
+            name: s.label,
+            stroke: s.color,
+            strokeWidth: 2,
+            dot: showDots ? { r: 3, fill: s.color, strokeWidth: 0 } : false,
+            activeDot: { r: 4 }
+          },
+          s.dataKey
+        ))
+      ]
+    }
+  ) });
+}
+function BarChart({
+  data,
+  index,
+  series,
+  height = DEFAULT_CHART_HEIGHT,
+  valueFormatter,
+  indexFormatter,
+  showGrid,
+  showTooltip,
+  showLegend,
+  showXAxis,
+  showYAxis,
+  stacked = false,
+  ...rootProps
+}) {
+  const resolved = resolveSeries(series);
+  const isLast = (position) => position === resolved.length - 1;
+  return /* @__PURE__ */ jsx(ChartRoot, { height, ...rootProps, children: /* @__PURE__ */ jsxs(
+    BarChart$1,
+    {
+      data: data.slice(),
+      margin: { top: 8, right: 8, left: 0, bottom: 0 },
+      accessibilityLayer: true,
+      children: [
+        renderCartesianScaffold(
+          {
+            index,
+            series,
+            valueFormatter,
+            indexFormatter,
+            showGrid,
+            showTooltip,
+            showLegend,
+            showXAxis,
+            showYAxis
+          },
+          { tooltipCursor: { fill: "var(--ml-surface-sunken)", opacity: 0.6 } }
+        ),
+        resolved.map((s, position) => /* @__PURE__ */ jsx(
+          Bar,
+          {
+            dataKey: s.dataKey,
+            name: s.label,
+            fill: s.color,
+            stackId: stacked ? "stack" : void 0,
+            radius: !stacked || isLast(position) ? [4, 4, 0, 0] : [0, 0, 0, 0],
+            maxBarSize: 48
+          },
+          s.dataKey
+        ))
+      ]
+    }
+  ) });
+}
+function AreaChart({
+  data,
+  index,
+  series,
+  height = DEFAULT_CHART_HEIGHT,
+  valueFormatter,
+  indexFormatter,
+  showGrid,
+  showTooltip,
+  showLegend,
+  showXAxis,
+  showYAxis,
+  curve = "monotone",
+  stacked = false,
+  ...rootProps
+}) {
+  const resolved = resolveSeries(series);
+  const gradientPrefix = React5.useId().replace(/[^a-zA-Z0-9]/g, "");
+  return /* @__PURE__ */ jsx(ChartRoot, { height, ...rootProps, children: /* @__PURE__ */ jsxs(
+    AreaChart$1,
+    {
+      data: data.slice(),
+      margin: { top: 8, right: 8, left: 0, bottom: 0 },
+      accessibilityLayer: true,
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: resolved.map((s) => /* @__PURE__ */ jsxs(
+          "linearGradient",
+          {
+            id: `${gradientPrefix}-${s.dataKey}`,
+            x1: "0",
+            y1: "0",
+            x2: "0",
+            y2: "1",
+            children: [
+              /* @__PURE__ */ jsx("stop", { offset: "5%", stopColor: s.color, stopOpacity: 0.32 }),
+              /* @__PURE__ */ jsx("stop", { offset: "95%", stopColor: s.color, stopOpacity: 0.04 })
+            ]
+          },
+          s.dataKey
+        )) }),
+        renderCartesianScaffold({
+          index,
+          series,
+          valueFormatter,
+          indexFormatter,
+          showGrid,
+          showTooltip,
+          showLegend,
+          showXAxis,
+          showYAxis
+        }),
+        resolved.map((s) => /* @__PURE__ */ jsx(
+          Area,
+          {
+            type: curve,
+            dataKey: s.dataKey,
+            name: s.label,
+            stroke: s.color,
+            strokeWidth: 2,
+            fill: `url(#${gradientPrefix}-${s.dataKey})`,
+            stackId: stacked ? "stack" : void 0,
+            dot: false,
+            activeDot: { r: 4 }
+          },
+          s.dataKey
+        ))
+      ]
+    }
+  ) });
+}
+
+// src/index.ts
+var UI_LIBRARY_VERSION = "0.0.0";
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AreaChart, Avatar, AvatarFallback, AvatarImage, Badge, BarChart, Breadcrumbs, Button, ButtonGroup, CHART_PALETTE_SIZE, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChartLegendContent, ChartTooltipContent, Checkbox, Code, CodeInput, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Container, DataTable, DatePicker, DateRangePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ErrorState, Field, FileUpload, Flex, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Grid, Heading, IconButton, Label, LineChart, Link, LoadingOverlay, MultiSelect, PageHeader, Pagination, Panel, PasswordInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, SearchInput, Select, SignatureInput, Skeleton, Slider, Spinner, Stack, StatCard, StatusIndicator, Steps, SuccessState, Switch, TOKEN_CSS_VARS, Tabs, Text, TextInput, Textarea, ThemeProvider, Timeline, TimelineContent, TimelineDescription, TimelineDot, TimelineItem, TimelineTime, TimelineTitle, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UI_LIBRARY_VERSION, chartColor, cn, defineVariants, getThemeInitScript, inputClassName, resolveSeries, themeOverridesToCss, useFieldContext, useFieldInputProps, useFormField, useTheme };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map