@hilum/ui 0.1.1

package/dist/index.js

@@ -0,0 +1,4433 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import * as React15 from 'react';
+import { Accordion, AlertDialog, AspectRatio, Avatar as Avatar$1, Checkbox, Collapsible, Dialog, ContextMenu, Popover, DropdownMenu, Label as Label$1, HoverCard, Menubar, NavigationMenu, Progress, RadioGroup, ScrollArea, Select, Separator, Tooltip, Slider, Switch, Tabs, Toggle, ToggleGroup, Slot } from 'radix-ui';
+import { ChevronDown, Minus, Check, X, Search, Circle, ChevronRight, AlertCircle, ChevronUp, MoreHorizontal, ChevronLeft, ArrowLeft, ArrowRight, ChevronsUpDown, CalendarIcon, Info, AlertTriangle, CheckCircle, GripVertical, PanelLeft, TrendingDown, TrendingUp } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import { DayPicker } from 'react-day-picker';
+import useEmblaCarousel from 'embla-carousel-react';
+import { ResponsiveContainer } from 'recharts';
+export { Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, Legend, Line, LineChart, Pie, PieChart, Tooltip as RechartsTooltip, XAxis, YAxis } from 'recharts';
+import { useReactTable, getPaginationRowModel, getFilteredRowModel, getSortedRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
+export { createColumnHelper } from '@tanstack/react-table';
+import { Drawer } from 'vaul';
+import { OTPInput, OTPInputContext } from 'input-otp';
+import { Panel, Group, Separator as Separator$1 } from 'react-resizable-panels';
+import { Toaster as Toaster$1 } from 'sonner';
+
+// src/lib/utils.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var AccordionRoot = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Accordion.Root, { ref, className: cn("divide-y divide-taupe-100", className), ...props }));
+AccordionRoot.displayName = "Accordion";
+var AccordionItem = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Accordion.Item, { ref, className: cn("", className), ...props }));
+AccordionItem.displayName = "AccordionItem";
+var AccordionTrigger = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(Accordion.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+  Accordion.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex w-full items-center justify-between py-4",
+      "body font-medium text-taupe-900 transition-colors hover:text-taupe-700",
+      "[&[data-state=open]>svg]:rotate-180",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-taupe-900/15",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(
+        ChevronDown,
+        {
+          size: 16,
+          className: "text-taupe-400 transition-transform duration-200 shrink-0"
+        }
+      )
+    ]
+  }
+) }));
+AccordionTrigger.displayName = "AccordionTrigger";
+var AccordionContent = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  Accordion.Content,
+  {
+    ref,
+    className: cn(
+      "overflow-hidden body text-taupe-500",
+      "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx("div", { className: "pb-4", children })
+  }
+));
+AccordionContent.displayName = "AccordionContent";
+var buttonVariants = cva(
+  [
+    "inline-flex shrink-0 items-center justify-center gap-2",
+    "body font-medium whitespace-nowrap",
+    "transition-all duration-150 outline-none",
+    "focus-visible:ring-2 focus-visible:ring-brand-primary/30 focus-visible:ring-offset-1",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "bg-brand-primary text-white hover:bg-brand-primary/90 active:bg-brand-primary/80",
+        destructive: "bg-red-600 text-white hover:bg-red-700 active:bg-red-800",
+        outline: "bg-white text-taupe-700 shadow-natural hover:bg-taupe-50 rounded-xl",
+        secondary: "bg-taupe-100 text-taupe-700 hover:bg-taupe-200",
+        brand: "bg-brand-secondary text-taupe-900 hover:bg-brand-secondary/90 active:bg-brand-secondary/80",
+        ghost: "text-taupe-600 hover:bg-taupe-100 hover:text-taupe-900",
+        link: "text-taupe-900 underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 rounded-md",
+        xs: "h-6 gap-1 px-2 caption rounded-md",
+        sm: "h-8 gap-1.5 px-3 rounded-md",
+        lg: "h-10 px-6 rounded-md",
+        icon: "size-9 rounded-md",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8 rounded-md",
+        "icon-lg": "size-10 rounded-md"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({ className, variant, size, asChild = false, ...props }) {
+  const Comp = asChild ? Slot.Root : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+function ActionPanel({
+  title,
+  description,
+  action,
+  actions,
+  link,
+  variant = "default",
+  layout = "stacked",
+  children,
+  className
+}) {
+  const allActions = actions ?? (action ? [action] : []);
+  const renderActions = () => {
+    if (allActions.length === 0 && !link) return null;
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      link && (link.href ? /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: link.href,
+          className: "body font-medium text-taupe-600 hover:text-taupe-900 transition-colors inline-flex items-center gap-1",
+          children: [
+            link.label,
+            " ",
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\u2192" })
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: link.onClick,
+          className: "body font-medium text-taupe-600 hover:text-taupe-900 transition-colors inline-flex items-center gap-1",
+          children: [
+            link.label,
+            " ",
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\u2192" })
+          ]
+        }
+      )),
+      allActions.map(
+        (a, i) => a.href ? /* @__PURE__ */ jsx(Button, { size: "sm", variant: a.variant ?? "default", asChild: true, children: /* @__PURE__ */ jsx("a", { href: a.href, children: a.label }) }, i) : /* @__PURE__ */ jsx(Button, { size: "sm", variant: a.variant ?? "default", onClick: a.onClick, children: a.label }, i)
+      )
+    ] });
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-xl border px-5 py-5",
+        variant === "muted" ? "border-taupe-100 bg-taupe-50" : "border-taupe-100 bg-white shadow-natural",
+        layout === "inline" && "flex items-center justify-between gap-6",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("min-w-0", layout === "inline" ? "flex-1" : ""), children: [
+          /* @__PURE__ */ jsx("p", { className: "body font-semibold text-taupe-900", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: cn("body text-taupe-400", layout === "stacked" ? "mt-1" : ""), children: description }),
+          children && layout === "stacked" && /* @__PURE__ */ jsx("div", { className: "mt-4", children })
+        ] }),
+        layout === "stacked" ? (allActions.length > 0 || link) && /* @__PURE__ */ jsx("div", { className: "mt-4", children: renderActions() }) : /* @__PURE__ */ jsxs("div", { className: "shrink-0 flex items-center gap-3", children: [
+          children,
+          renderActions()
+        ] })
+      ]
+    }
+  );
+}
+function ActivityFeed({ events, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flow-root", className), children: /* @__PURE__ */ jsx("ul", { role: "list", className: "-mb-8", children: events.map((event, i) => {
+    const isLast = i === events.length - 1;
+    return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "relative pb-8", children: [
+      !isLast && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "absolute top-4 left-4 -ml-px h-full w-0.5 bg-taupe-100",
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "relative flex gap-3", children: [
+        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "flex size-8 items-center justify-center rounded-full ring-8 ring-white",
+              event.iconBgClass ?? "bg-taupe-100 text-taupe-500"
+            ),
+            children: event.icon
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-baseline justify-between gap-4 pt-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "body text-taupe-600", children: event.content }),
+          event.date && /* @__PURE__ */ jsx(
+            "time",
+            {
+              dateTime: event.datetime ?? event.date,
+              className: "caption whitespace-nowrap text-taupe-400",
+              children: event.date
+            }
+          )
+        ] })
+      ] })
+    ] }) }, event.id ?? i);
+  }) }) });
+}
+var AlertDialogRoot = AlertDialog.Root;
+var AlertDialogTrigger = AlertDialog.Trigger;
+var AlertDialogPortal = AlertDialog.Portal;
+var AlertDialogOverlay = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AlertDialog.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-black/30 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 = "AlertDialogOverlay";
+var AlertDialogContent = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialog.Portal, { children: [
+  /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
+  /* @__PURE__ */ jsx(
+    AlertDialog.Content,
+    {
+      ref,
+      className: cn(
+        "fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%]",
+        "w-full max-w-md bg-white rounded-2xl shadow-elevated p-6",
+        "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",
+        className
+      ),
+      ...props,
+      children
+    }
+  )
+] }));
+AlertDialogContent.displayName = "AlertDialogContent";
+function AlertDialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-1.5 mb-5", className), ...props });
+}
+AlertDialogHeader.displayName = "AlertDialogHeader";
+function AlertDialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-end gap-2 mt-6", className), ...props });
+}
+AlertDialogFooter.displayName = "AlertDialogFooter";
+var AlertDialogTitle = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AlertDialog.Title,
+  {
+    ref,
+    className: cn("body-lg font-semibold text-taupe-900", className),
+    ...props
+  }
+));
+AlertDialogTitle.displayName = "AlertDialogTitle";
+var AlertDialogDescription = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialog.Description, { ref, className: cn("body text-taupe-500", className), ...props }));
+AlertDialogDescription.displayName = "AlertDialogDescription";
+var AlertDialogAction = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AlertDialog.Action,
+  {
+    ref,
+    className: cn(
+      "inline-flex h-9 items-center justify-center rounded-md px-4",
+      "body font-medium whitespace-nowrap transition-all duration-150",
+      "bg-brand-primary text-white hover:bg-brand-primary/90 active:bg-brand-primary/80",
+      "focus-visible:ring-2 focus-visible:ring-brand-primary/30 focus-visible:ring-offset-1 outline-none",
+      "disabled:pointer-events-none disabled:opacity-50",
+      className
+    ),
+    ...props
+  }
+));
+AlertDialogAction.displayName = "AlertDialogAction";
+var AlertDialogCancel = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AlertDialog.Cancel,
+  {
+    ref,
+    className: cn(
+      "inline-flex h-9 items-center justify-center rounded-md px-4",
+      "body font-medium whitespace-nowrap transition-all duration-150",
+      "bg-white text-taupe-700 shadow-natural hover:bg-taupe-50 rounded-xl",
+      "focus-visible:ring-2 focus-visible:ring-brand-primary/30 focus-visible:ring-offset-1 outline-none",
+      "disabled:pointer-events-none disabled:opacity-50",
+      className
+    ),
+    ...props
+  }
+));
+AlertDialogCancel.displayName = "AlertDialogCancel";
+var alertVariants = cva(
+  "relative w-full rounded-xl px-4 py-3.5 body [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-3.5 [&>svg~*]:pl-6",
+  {
+    variants: {
+      variant: {
+        default: "bg-taupe-50 text-taupe-800 [&>svg]:text-taupe-500",
+        info: "bg-brand-secondary/40 text-taupe-700 [&>svg]:text-taupe-500",
+        success: "bg-brand-secondary/15 text-taupe-800 [&>svg]:text-taupe-600",
+        warning: "bg-brand-secondary/70 text-taupe-800 [&>svg]:text-taupe-600",
+        destructive: "bg-red-50 text-red-800 [&>svg]:text-red-500"
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+);
+var Alert = React15.forwardRef(
+  ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, role: "alert", className: cn(alertVariants({ variant }), className), ...props })
+);
+Alert.displayName = "Alert";
+var AlertTitle = React15.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn("mb-0.5 body font-semibold leading-tight", className), ...props })
+);
+AlertTitle.displayName = "AlertTitle";
+var AlertDescription = React15.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn("body opacity-90", className), ...props })
+);
+AlertDescription.displayName = "AlertDescription";
+var AspectRatioRoot = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AspectRatio.Root,
+  {
+    ref,
+    className: cn("relative w-full overflow-hidden", className),
+    ...props
+  }
+));
+AspectRatioRoot.displayName = "AspectRatio";
+var sizeMap = {
+  sm: { wrapper: "size-6 ring-[1.5px]", text: "caption-xs" },
+  md: { wrapper: "size-8 ring-2", text: "caption" },
+  lg: { wrapper: "size-10 ring-2", text: "body" }
+};
+function AvatarStack({ avatars, max, size = "md", className }) {
+  const shown = max ? avatars.slice(0, max) : avatars;
+  const overflow = max && avatars.length > max ? avatars.length - max : 0;
+  const s = sizeMap[size];
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex -space-x-2", className), children: [
+    shown.map((avatar, i) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        title: avatar.name,
+        className: cn(
+          "relative inline-flex shrink-0 overflow-hidden rounded-full ring-white",
+          s.wrapper
+        ),
+        children: avatar.src ? /* @__PURE__ */ jsx("img", { src: avatar.src, alt: avatar.name, className: "size-full object-cover" }) : /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "flex size-full items-center justify-center font-medium",
+              s.text,
+              avatar.colorClass ?? "bg-taupe-200 text-taupe-700"
+            ),
+            children: avatar.fallback ?? avatar.name.slice(0, 2).toUpperCase()
+          }
+        )
+      },
+      i
+    )),
+    overflow > 0 && /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          "relative inline-flex shrink-0 items-center justify-center rounded-full ring-white bg-taupe-100 font-medium text-taupe-600",
+          s.wrapper,
+          s.text
+        ),
+        children: [
+          "+",
+          overflow
+        ]
+      }
+    )
+  ] });
+}
+var sizeMap2 = {
+  xs: "size-5 caption-xs",
+  sm: "size-7 caption",
+  md: "size-8 body",
+  lg: "size-10 body-lg",
+  xl: "size-12 subheading"
+};
+var Avatar = React15.forwardRef(
+  ({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx(
+    Avatar$1.Root,
+    {
+      ref,
+      className: cn(
+        "relative flex shrink-0 overflow-hidden rounded-full",
+        sizeMap2[size],
+        className
+      ),
+      ...props
+    }
+  )
+);
+Avatar.displayName = "Avatar";
+var AvatarImage = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Avatar$1.Image,
+  {
+    ref,
+    className: cn("aspect-square h-full w-full object-cover", className),
+    ...props
+  }
+));
+AvatarImage.displayName = "AvatarImage";
+var AvatarFallback = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Avatar$1.Fallback,
+  {
+    ref,
+    className: cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-taupe-100 body font-semibold text-taupe-600",
+      className
+    ),
+    ...props
+  }
+));
+AvatarFallback.displayName = "AvatarFallback";
+var statusColorMap = {
+  online: "bg-brand-secondary",
+  offline: "bg-taupe-300",
+  busy: "bg-red-500",
+  away: "bg-brand-secondary"
+};
+var statusSizeMap = {
+  xs: "size-1.5 ring-1",
+  sm: "size-2 ring-1",
+  md: "size-2.5 ring-[1.5px]",
+  lg: "size-3 ring-2",
+  xl: "size-3.5 ring-2"
+};
+var AvatarWithStatus = React15.forwardRef(({ status, size = "md", className, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "relative inline-flex shrink-0", children: [
+  /* @__PURE__ */ jsx(Avatar, { ref, size, className, ...props, children }),
+  status && /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "absolute bottom-0 right-0 rounded-full ring-white",
+        statusColorMap[status],
+        statusSizeMap[size]
+      )
+    }
+  )
+] }));
+AvatarWithStatus.displayName = "AvatarWithStatus";
+var badgeVariants = cva(
+  "inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 caption font-medium transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "bg-taupe-900 text-white",
+        secondary: "bg-taupe-100 text-taupe-700",
+        outline: "border border-taupe-200 text-taupe-600 bg-transparent",
+        brand: "bg-brand-primary text-white",
+        success: "bg-brand-secondary/20 text-taupe-800 border border-brand-secondary/50",
+        warning: "bg-brand-secondary/70 text-taupe-700 border border-brand-secondary",
+        destructive: "bg-red-50 text-red-700 border border-red-200"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsx("span", { "data-slot": "badge", className: cn(badgeVariants({ variant, className })), ...props });
+}
+var Breadcrumb = React15.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", { ref, "aria-label": "breadcrumb", ...props }));
+Breadcrumb.displayName = "Breadcrumb";
+var BreadcrumbList = React15.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "ol",
+    {
+      ref,
+      className: cn("flex flex-wrap items-center gap-1.5 body text-taupe-500", className),
+      ...props
+    }
+  )
+);
+BreadcrumbList.displayName = "BreadcrumbList";
+var BreadcrumbItem = React15.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", { ref, className: cn("inline-flex items-center gap-1.5", className), ...props })
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
+var BreadcrumbLink = React15.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("a", { ref, className: cn("transition-colors hover:text-taupe-900", className), ...props })
+);
+BreadcrumbLink.displayName = "BreadcrumbLink";
+var BreadcrumbPage = React15.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      role: "link",
+      "aria-current": "page",
+      className: cn("body font-medium text-taupe-900", className),
+      ...props
+    }
+  )
+);
+BreadcrumbPage.displayName = "BreadcrumbPage";
+var BreadcrumbSeparator = ({ children, className, ...props }) => /* @__PURE__ */ jsx("li", { role: "presentation", "aria-hidden": "true", className: cn("text-taupe-300", className), ...props, children: children ?? /* @__PURE__ */ jsx(ChevronRight, { size: 14 }) });
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+var BreadcrumbEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    role: "presentation",
+    "aria-hidden": "true",
+    className: cn("flex size-5 items-center justify-center", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(MoreHorizontal, { size: 14, className: "text-taupe-400" })
+  }
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
+function ButtonGroup({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "inline-flex divide-x divide-taupe-200 overflow-hidden rounded-lg border border-taupe-200 bg-white shadow-natural",
+        className
+      ),
+      children
+    }
+  );
+}
+function ButtonGroupItem({ active, className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "relative inline-flex items-center gap-1.5 px-3.5 py-2 body font-medium transition-colors",
+        "focus:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-taupe-400/40 focus-visible:ring-inset",
+        active ? "bg-taupe-900 text-white" : "text-taupe-600 hover:bg-taupe-50 hover:text-taupe-900",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+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 gap-4",
+        month: "flex flex-col gap-4",
+        month_caption: "flex justify-center pt-1 relative items-center px-10",
+        caption_label: "body font-semibold text-taupe-900",
+        nav: "flex items-center justify-between absolute inset-x-0 top-1",
+        button_previous: cn(
+          "absolute left-0 h-7 w-7 flex items-center justify-center rounded-md",
+          "text-taupe-400 hover:bg-taupe-100 hover:text-taupe-700 transition-colors"
+        ),
+        button_next: cn(
+          "absolute right-0 h-7 w-7 flex items-center justify-center rounded-md",
+          "text-taupe-400 hover:bg-taupe-100 hover:text-taupe-700 transition-colors"
+        ),
+        month_grid: "w-full border-collapse mt-1",
+        weekdays: "flex",
+        weekday: "w-9 h-9 flex items-center justify-center label text-taupe-400 font-normal",
+        week: "flex w-full mt-1",
+        day: "relative p-0 text-center",
+        day_button: cn(
+          "h-9 w-9 flex items-center justify-center rounded-full body font-normal",
+          "text-taupe-900 hover:bg-taupe-100 transition-colors",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30"
+        ),
+        selected: "[&>button]:bg-brand-primary [&>button]:text-white [&>button]:hover:bg-brand-primary/90",
+        today: "[&>button]:font-semibold [&>button]:text-brand-primary",
+        outside: "opacity-40 [&>button]:text-taupe-400",
+        disabled: "opacity-30 [&>button]:cursor-not-allowed",
+        range_start: "[&>button]:bg-brand-primary [&>button]:text-white [&>button]:rounded-full",
+        range_end: "[&>button]:bg-brand-primary [&>button]:text-white [&>button]:rounded-full",
+        range_middle: "[&>button]:bg-brand-primary/15 [&>button]:text-taupe-900 [&>button]:rounded-none",
+        hidden: "invisible",
+        ...classNames
+      },
+      components: {
+        Chevron: ({ orientation }) => orientation === "left" ? /* @__PURE__ */ jsx(ChevronLeft, { size: 14 }) : /* @__PURE__ */ jsx(ChevronRight, { size: 14 })
+      },
+      ...props
+    }
+  );
+}
+Calendar.displayName = "Calendar";
+function CardHeading({ title, description, actions, children, className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-start justify-between gap-4 border-b border-taupe-100 px-5 py-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [
+          children,
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "body font-semibold text-taupe-900 truncate", children: title }),
+            description && /* @__PURE__ */ jsx("p", { className: "caption text-taupe-400 mt-0.5", children: description })
+          ] })
+        ] }),
+        actions && actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions.map(
+          (action, i) => action.href ? /* @__PURE__ */ jsx(Button, { size: "sm", variant: action.variant ?? "default", asChild: true, children: /* @__PURE__ */ jsx("a", { href: action.href, children: action.label }) }, i) : /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "sm",
+              variant: action.variant ?? "default",
+              onClick: action.onClick,
+              children: action.label
+            },
+            i
+          )
+        ) })
+      ]
+    }
+  );
+}
+var cardVariants = cva("rounded-xl", {
+  variants: {
+    variant: {
+      default: "bg-white shadow-natural",
+      muted: "bg-taupe-50",
+      ghost: "bg-transparent"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var Card = React15.forwardRef(
+  ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "card",
+      className: cn(cardVariants({ variant }), className),
+      ...props
+    }
+  )
+);
+Card.displayName = "Card";
+var CardHeader = React15.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "card-header",
+      className: cn("flex flex-col gap-1.5 p-5", className),
+      ...props
+    }
+  )
+);
+CardHeader.displayName = "CardHeader";
+var CardTitle = React15.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "h3",
+    {
+      ref,
+      "data-slot": "card-title",
+      className: cn("subheading text-taupe-900", className),
+      ...props
+    }
+  )
+);
+CardTitle.displayName = "CardTitle";
+var CardDescription = React15.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      "data-slot": "card-description",
+      className: cn("caption text-taupe-500", className),
+      ...props
+    }
+  )
+);
+CardDescription.displayName = "CardDescription";
+var CardContent = React15.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, "data-slot": "card-content", className: cn("p-5 pt-0", className), ...props })
+);
+CardContent.displayName = "CardContent";
+var CardFooter = React15.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "card-footer",
+      className: cn("flex items-center p-5 pt-0", className),
+      ...props
+    }
+  )
+);
+CardFooter.displayName = "CardFooter";
+var CardMedia = React15.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "card-media",
+      className: cn("relative overflow-hidden", className),
+      ...props
+    }
+  )
+);
+CardMedia.displayName = "CardMedia";
+var CarouselContext = React15.createContext(null);
+function useCarousel() {
+  const context = React15.useContext(CarouselContext);
+  if (!context) throw new Error("useCarousel must be used within a <Carousel />");
+  return context;
+}
+function Carousel({
+  opts,
+  plugins,
+  orientation = "horizontal",
+  setApi,
+  className,
+  children,
+  ...props
+}) {
+  const [carouselRef, emblaApi] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "vertical" ? "y" : "x"
+    },
+    plugins
+  );
+  const [canScrollPrev, setCanScrollPrev] = React15.useState(false);
+  const [canScrollNext, setCanScrollNext] = React15.useState(false);
+  const onSelect = React15.useCallback((api) => {
+    if (!api) return;
+    setCanScrollPrev(api.canScrollPrev());
+    setCanScrollNext(api.canScrollNext());
+  }, []);
+  const scrollPrev = React15.useCallback(() => {
+    emblaApi?.scrollPrev();
+  }, [emblaApi]);
+  const scrollNext = React15.useCallback(() => {
+    emblaApi?.scrollNext();
+  }, [emblaApi]);
+  const handleKeyDown = React15.useCallback(
+    (event) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        scrollPrev();
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        scrollNext();
+      }
+    },
+    [scrollPrev, scrollNext]
+  );
+  React15.useEffect(() => {
+    if (!emblaApi) return;
+    onSelect(emblaApi);
+    emblaApi.on("reInit", onSelect);
+    emblaApi.on("select", onSelect);
+    return () => {
+      emblaApi.off("reInit", onSelect);
+      emblaApi.off("select", onSelect);
+    };
+  }, [emblaApi, onSelect]);
+  React15.useEffect(() => {
+    if (!emblaApi || !setApi) return;
+    setApi(emblaApi);
+  }, [emblaApi, setApi]);
+  return /* @__PURE__ */ jsx(
+    CarouselContext.Provider,
+    {
+      value: {
+        carouselRef,
+        api: emblaApi,
+        opts,
+        orientation,
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          onKeyDownCapture: handleKeyDown,
+          className: cn("relative", className),
+          role: "region",
+          "aria-roledescription": "carousel",
+          ...props,
+          children
+        }
+      )
+    }
+  );
+}
+function CarouselContent({ className, ...props }) {
+  const { carouselRef, orientation } = useCarousel();
+  return /* @__PURE__ */ jsx("div", { ref: carouselRef, className: "overflow-hidden", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex", orientation === "vertical" ? "-mt-4 flex-col" : "-ml-4", className),
+      ...props
+    }
+  ) });
+}
+function CarouselItem({ className, ...props }) {
+  const { orientation } = useCarousel();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "aria-roledescription": "slide",
+      className: cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "vertical" ? "pt-4" : "pl-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CarouselPrevious({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant,
+      size,
+      className: cn(
+        "absolute h-9 w-9 rounded-full",
+        orientation === "vertical" ? "-top-12 left-1/2 -translate-x-1/2 rotate-90" : "-left-12 top-1/2 -translate-y-1/2",
+        className
+      ),
+      disabled: !canScrollPrev,
+      onClick: scrollPrev,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ArrowLeft, { className: "size-4" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Previous slide" })
+      ]
+    }
+  );
+}
+function CarouselNext({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant,
+      size,
+      className: cn(
+        "absolute h-9 w-9 rounded-full",
+        orientation === "vertical" ? "-bottom-12 left-1/2 -translate-x-1/2 rotate-90" : "-right-12 top-1/2 -translate-y-1/2",
+        className
+      ),
+      disabled: !canScrollNext,
+      onClick: scrollNext,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ArrowRight, { className: "size-4" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Next slide" })
+      ]
+    }
+  );
+}
+var CHART_COLORS = {
+  primary: "#FF4D01",
+  // brand-primary
+  secondary: "#CDEA19",
+  // brand-secondary
+  tertiary: "#FDE086",
+  // brand-secondary
+  muted: "#a8978a",
+  // taupe-400
+  subtle: "#e3dcd4",
+  // taupe-200
+  dark: "#26181a"
+  // taupe-900
+};
+function ChartContainer({ children, className, height = 300 }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children }) });
+}
+ChartContainer.displayName = "ChartContainer";
+function ChartTooltip({ active, payload, label, labelClassName }) {
+  if (!active || !payload?.length) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-taupe-100 bg-white px-3 py-2 shadow-elevated", children: [
+    label && /* @__PURE__ */ jsx("p", { className: cn("mb-1 label text-taupe-400", labelClassName), children: label }),
+    payload.map((entry, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "inline-block h-2 w-2 rounded-full",
+          style: { backgroundColor: entry.color }
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "caption text-taupe-500", children: [
+        entry.name,
+        ":"
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "caption font-medium text-taupe-900", children: entry.value })
+    ] }, i))
+  ] });
+}
+ChartTooltip.displayName = "ChartTooltip";
+var CheckboxRoot = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Checkbox.Root,
+  {
+    ref,
+    className: cn(
+      "peer size-4 shrink-0 rounded border border-taupe-300 bg-white transition-colors",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "data-[state=checked]:bg-brand-primary data-[state=checked]:border-brand-primary",
+      "data-[state=indeterminate]:bg-brand-primary data-[state=indeterminate]:border-brand-primary",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(Checkbox.Indicator, { className: "flex items-center justify-center text-white", children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx(Minus, { size: 11, strokeWidth: 3 }) : /* @__PURE__ */ jsx(Check, { size: 11, strokeWidth: 3 }) })
+  }
+));
+CheckboxRoot.displayName = "Checkbox";
+var CollapsibleRoot = Collapsible.Root;
+var CollapsibleTrigger = Collapsible.Trigger;
+var CollapsibleContent = Collapsible.Content;
+function isValidHex(s) {
+  return /^#([0-9a-fA-F]{3}){1,2}$/.test(s);
+}
+function ColorPicker({
+  value,
+  onChange,
+  className,
+  disabled,
+  presets,
+  ariaLabel = "Color"
+}) {
+  const [hex, setHex] = React15.useState(value);
+  React15.useEffect(() => {
+    setHex(value);
+  }, [value]);
+  const commit = (next) => {
+    if (isValidHex(next)) onChange(next);
+  };
+  return /* @__PURE__ */ jsxs(Popover.Root, { children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        disabled,
+        "aria-label": ariaLabel,
+        className: cn(
+          "inline-flex h-8 w-8 items-center justify-center rounded-md border border-taupe-200 bg-white",
+          "transition-colors hover:border-taupe-300",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/20 focus-visible:border-brand-primary",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "h-5 w-5 rounded-sm border border-black/5",
+            style: { backgroundColor: value }
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(
+      Popover.Content,
+      {
+        align: "start",
+        sideOffset: 6,
+        className: "z-50 w-56 rounded-xl bg-white p-3 shadow-natural outline-none",
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "color",
+              value: isValidHex(hex) ? hex : "#000000",
+              onChange: (e) => {
+                setHex(e.target.value);
+                onChange(e.target.value);
+              },
+              className: "h-10 w-full cursor-pointer rounded-md border border-taupe-200 bg-white p-0.5"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "caption text-taupe-500", children: "Hex" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                value: hex,
+                onChange: (e) => setHex(e.target.value),
+                onBlur: (e) => commit(e.target.value),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") commit(e.target.value);
+                },
+                className: "flex-1 h-7 rounded-md border border-taupe-200 bg-white px-2 caption text-taupe-900 focus:outline-none focus:border-brand-primary"
+              }
+            )
+          ] }),
+          presets && presets.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-3 grid grid-cols-8 gap-1.5", children: presets.map((p) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onChange(p),
+              "aria-label": p,
+              className: "h-5 w-5 rounded-sm border border-black/10 transition-transform hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
+              style: { backgroundColor: p }
+            },
+            p
+          )) })
+        ]
+      }
+    ) })
+  ] });
+}
+function ColorInput({
+  value,
+  onChange,
+  opacity,
+  onOpacityChange,
+  className,
+  disabled,
+  presets
+}) {
+  const [hex, setHex] = React15.useState(value);
+  React15.useEffect(() => {
+    setHex(value);
+  }, [value]);
+  const commitHex = (next) => {
+    if (/^#([0-9a-fA-F]{3}){1,2}$/.test(next)) onChange(next);
+    else setHex(value);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "inline-flex h-8 items-stretch gap-0 rounded-md border border-taupe-200 bg-white overflow-hidden",
+        "focus-within:ring-2 focus-within:ring-brand-primary/20 focus-within:border-brand-primary",
+        disabled && "opacity-50 pointer-events-none",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          ColorPicker,
+          {
+            value,
+            onChange,
+            presets,
+            disabled,
+            className: "h-full w-8 border-0 rounded-none focus-visible:ring-0"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            value: hex.replace(/^#/, ""),
+            onChange: (e) => setHex("#" + e.target.value.replace(/^#/, "")),
+            onBlur: (e) => commitHex("#" + e.target.value.replace(/^#/, "")),
+            onKeyDown: (e) => {
+              if (e.key === "Enter")
+                commitHex("#" + e.target.value.replace(/^#/, ""));
+            },
+            spellCheck: false,
+            className: "w-[5.5rem] caption text-taupe-900 px-2 bg-transparent border-l border-taupe-100 focus:outline-none uppercase"
+          }
+        ),
+        typeof opacity === "number" && onOpacityChange && /* @__PURE__ */ jsxs("div", { className: "relative flex items-center border-l border-taupe-100", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "number",
+              min: 0,
+              max: 100,
+              value: Math.round(opacity),
+              onChange: (e) => onOpacityChange(Number(e.target.value)),
+              className: "w-12 caption text-taupe-900 px-2 bg-transparent focus:outline-none text-right [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "caption-xs text-taupe-400 pr-2", children: "%" })
+        ] })
+      ]
+    }
+  );
+}
+function Combobox({
+  options,
+  value,
+  onValueChange,
+  placeholder = "Select...",
+  searchPlaceholder = "Search...",
+  emptyText = "No results found.",
+  className
+}) {
+  const [open, setOpen] = React15.useState(false);
+  const [query, setQuery] = React15.useState("");
+  const containerRef = React15.useRef(null);
+  const inputRef = React15.useRef(null);
+  const selectedOption = options.find((o) => o.value === value);
+  const filtered = query === "" ? options : options.filter(
+    (o) => o.label.toLowerCase().includes(query.toLowerCase()) || o.description?.toLowerCase().includes(query.toLowerCase())
+  );
+  React15.useEffect(() => {
+    function onMouseDown(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+        setQuery("");
+      }
+    }
+    document.addEventListener("mousedown", onMouseDown);
+    return () => document.removeEventListener("mousedown", onMouseDown);
+  }, []);
+  React15.useEffect(() => {
+    if (!open) return;
+    function onKey(e) {
+      if (e.key === "Escape") {
+        setOpen(false);
+        setQuery("");
+      }
+    }
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open]);
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("relative", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
+      selectedOption?.avatar && !open && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute left-2.5 flex size-5 items-center justify-center rounded-full bg-taupe-200 caption-xs font-semibold text-taupe-700 shrink-0", children: selectedOption.avatar }),
+      selectedOption?.statusColor && !open && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "pointer-events-none absolute left-3 size-2 rounded-full shrink-0",
+          style: { backgroundColor: selectedOption.statusColor }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "text",
+          role: "combobox",
+          "aria-expanded": open,
+          className: cn(
+            "flex h-9 w-full rounded-lg border border-taupe-200 bg-white pr-8 body text-taupe-900",
+            "placeholder:text-taupe-400",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-taupe-400/30 focus-visible:border-taupe-400",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            selectedOption?.avatar && !open ? "pl-8" : selectedOption?.statusColor && !open ? "pl-7" : "pl-3"
+          ),
+          placeholder: open ? searchPlaceholder : selectedOption?.label ?? placeholder,
+          value: open ? query : selectedOption?.label ?? "",
+          onChange: (e) => {
+            setQuery(e.target.value);
+            if (!open) setOpen(true);
+          },
+          onFocus: () => {
+            setOpen(true);
+            setQuery("");
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          tabIndex: -1,
+          className: "absolute inset-y-0 right-0 flex items-center px-2 text-taupe-400 hover:text-taupe-700 transition-colors",
+          onClick: () => {
+            if (open) {
+              setOpen(false);
+              setQuery("");
+            } else {
+              setOpen(true);
+              inputRef.current?.focus();
+            }
+          },
+          children: /* @__PURE__ */ jsx(ChevronsUpDown, { size: 14 })
+        }
+      )
+    ] }),
+    open && /* @__PURE__ */ jsx("div", { className: "absolute z-50 mt-1 w-full overflow-hidden rounded-lg border border-taupe-200 bg-white shadow-elevated", children: /* @__PURE__ */ jsx("ul", { role: "listbox", className: "max-h-60 overflow-auto py-1", children: filtered.length === 0 ? /* @__PURE__ */ jsx("li", { className: "px-3 py-2 body text-taupe-400", children: emptyText }) : filtered.map((option) => {
+      const isSelected = option.value === value;
+      return /* @__PURE__ */ jsxs(
+        "li",
+        {
+          role: "option",
+          "aria-selected": isSelected,
+          className: cn(
+            "flex cursor-pointer select-none items-center gap-2.5 px-3 py-2 body transition-colors",
+            isSelected ? "bg-brand-primary text-white" : "text-taupe-900 hover:bg-taupe-50"
+          ),
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => {
+            onValueChange?.(option.value);
+            setQuery("");
+            setOpen(false);
+          },
+          children: [
+            option.avatar && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "flex size-6 shrink-0 items-center justify-center rounded-full caption-xs font-semibold",
+                  isSelected ? "bg-white/20 text-white" : "bg-taupe-200 text-taupe-700"
+                ),
+                children: option.avatar
+              }
+            ),
+            option.statusColor && !option.avatar && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "size-2 shrink-0 rounded-full",
+                style: { backgroundColor: option.statusColor }
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx("p", { className: cn("truncate", isSelected && "font-semibold"), children: option.label }),
+              option.description && /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "caption truncate",
+                    isSelected ? "text-white/70" : "text-taupe-400"
+                  ),
+                  children: option.description
+                }
+              )
+            ] }),
+            isSelected && /* @__PURE__ */ jsx(Check, { size: 14, className: "shrink-0" })
+          ]
+        },
+        option.value
+      );
+    }) }) })
+  ] });
+}
+var DialogRoot = Dialog.Root;
+var DialogTrigger = Dialog.Trigger;
+var DialogClose = Dialog.Close;
+var DialogOverlay = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Dialog.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-black/30 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 = "DialogOverlay";
+var DialogContent = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
+  /* @__PURE__ */ jsx(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    Dialog.Content,
+    {
+      ref,
+      className: cn(
+        "fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%]",
+        "w-full max-w-lg bg-white rounded-2xl shadow-elevated p-6",
+        "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",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs(Dialog.Close, { className: "absolute right-4 top-4 rounded-md p-1 text-taupe-400 opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-taupe-900/20", children: [
+          /* @__PURE__ */ jsx(X, { size: 16 }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+DialogContent.displayName = "DialogContent";
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-1.5 mb-4", className), ...props });
+}
+DialogHeader.displayName = "DialogHeader";
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-end gap-2 mt-6", className), ...props });
+}
+DialogFooter.displayName = "DialogFooter";
+var DialogTitle = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Dialog.Title,
+  {
+    ref,
+    className: cn("body-lg font-semibold text-taupe-900", className),
+    ...props
+  }
+));
+DialogTitle.displayName = "DialogTitle";
+var DialogDescription = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Dialog.Description, { ref, className: cn("body text-taupe-500", className), ...props }));
+DialogDescription.displayName = "DialogDescription";
+function CommandPalette({
+  open,
+  onClose,
+  items,
+  placeholder = "Search...",
+  emptyText = "No results found."
+}) {
+  const [query, setQuery] = React15.useState("");
+  const inputRef = React15.useRef(null);
+  React15.useEffect(() => {
+    if (open) {
+      setTimeout(() => inputRef.current?.focus(), 50);
+      setQuery("");
+    }
+  }, [open]);
+  const filtered = query === "" ? items : items.filter(
+    (item) => item.label.toLowerCase().includes(query.toLowerCase()) || item.description?.toLowerCase().includes(query.toLowerCase()) || item.category?.toLowerCase().includes(query.toLowerCase())
+  );
+  const grouped = filtered.reduce((acc, item) => {
+    const cat = item.category ?? "";
+    if (!acc[cat]) acc[cat] = [];
+    acc[cat].push(item);
+    return acc;
+  }, {});
+  const categories = Object.keys(grouped);
+  function handleSelect(item) {
+    if (item.href) {
+      window.location.href = item.href;
+    } else {
+      item.onSelect?.();
+    }
+    onClose();
+  }
+  return /* @__PURE__ */ jsx(DialogRoot, { open, onOpenChange: (v) => !v && onClose(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "gap-0 overflow-hidden p-0 sm:max-w-xl", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 border-b border-taupe-100 px-4", children: [
+      /* @__PURE__ */ jsx(Search, { size: 16, className: "shrink-0 text-taupe-400" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "text",
+          className: "h-12 flex-1 bg-transparent body text-taupe-900 placeholder:text-taupe-400 focus:outline-none",
+          placeholder,
+          value: query,
+          onChange: (e) => setQuery(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Escape") onClose();
+            if (e.key === "Enter" && filtered.length > 0) handleSelect(filtered[0]);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx("kbd", { className: "hidden items-center gap-0.5 sm:flex", children: /* @__PURE__ */ jsx("span", { className: "caption-xs font-medium text-taupe-400 rounded border border-taupe-200 px-1.5 py-0.5", children: "esc" }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "max-h-80 overflow-y-auto", children: filtered.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-4 py-8 text-center body text-taupe-400", children: emptyText }) : /* @__PURE__ */ jsx("ul", { role: "list", className: "py-2", children: categories.map((cat) => /* @__PURE__ */ jsxs("li", { children: [
+      cat && /* @__PURE__ */ jsx("p", { className: "label px-4 py-2 text-taupe-400", children: cat }),
+      grouped[cat].map((item, i) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "flex w-full items-center gap-3 px-4 py-2.5 body text-left transition-colors hover:bg-taupe-50 focus-visible:bg-taupe-50 focus-visible:outline-none",
+          onClick: () => handleSelect(item),
+          children: [
+            item.icon && /* @__PURE__ */ jsx("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-lg border border-taupe-200 bg-white text-taupe-500", children: item.icon }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx("p", { className: "font-medium text-taupe-900 truncate", children: item.label }),
+              item.description && /* @__PURE__ */ jsx("p", { className: "caption text-taupe-400 truncate", children: item.description })
+            ] }),
+            /* @__PURE__ */ jsx(ArrowRight, { size: 13, className: "shrink-0 text-taupe-300" })
+          ]
+        },
+        item.id ?? i
+      ))
+    ] }, cat)) }) })
+  ] }) });
+}
+var CommandCtx = React15.createContext({
+  query: "",
+  setQuery: () => {
+  },
+  reportVisible: () => {
+  }
+});
+var CommandVisibleCtx = React15.createContext(0);
+function Command({ className, children, onSelect, ...props }) {
+  const [query, setQuery] = React15.useState("");
+  const visibleIds = React15.useRef(/* @__PURE__ */ new Set());
+  const [visibleCount, setVisibleCount] = React15.useState(0);
+  const reportVisible = React15.useCallback((id, visible) => {
+    const had = visibleIds.current.has(id);
+    if (visible && !had) {
+      visibleIds.current.add(id);
+      setVisibleCount(visibleIds.current.size);
+    } else if (!visible && had) {
+      visibleIds.current.delete(id);
+      setVisibleCount(visibleIds.current.size);
+    }
+  }, []);
+  return /* @__PURE__ */ jsx(CommandCtx.Provider, { value: { query, setQuery, onSelect, reportVisible }, children: /* @__PURE__ */ jsx(CommandVisibleCtx.Provider, { value: visibleCount, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex flex-col overflow-hidden rounded-xl border border-taupe-200 bg-white",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) }) });
+}
+var CommandInput = React15.forwardRef(({ className, ...props }, ref) => {
+  const { query, setQuery } = React15.useContext(CommandCtx);
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-taupe-100 px-3", children: [
+    /* @__PURE__ */ jsx(Search, { size: 14, className: "shrink-0 text-taupe-400" }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "text",
+        autoComplete: "off",
+        autoCorrect: "off",
+        spellCheck: false,
+        className: cn(
+          "flex h-10 w-full bg-transparent body text-taupe-900",
+          "placeholder:text-taupe-400 focus:outline-none",
+          className
+        ),
+        value: query,
+        onChange: (e) => setQuery(e.target.value),
+        ...props
+      }
+    )
+  ] });
+});
+CommandInput.displayName = "CommandInput";
+var CommandList = React15.forwardRef(
+  ({ className, ...props }, ref) => {
+    const listRef = React15.useRef(null);
+    const combinedRef = React15.useCallback(
+      (el) => {
+        listRef.current = el;
+        if (typeof ref === "function") ref(el);
+        else if (ref) ref.current = el;
+      },
+      [ref]
+    );
+    const handleKeyDown = (e) => {
+      if (!["ArrowDown", "ArrowUp"].includes(e.key)) return;
+      e.preventDefault();
+      const el = listRef.current;
+      if (!el) return;
+      const items = Array.from(
+        el.querySelectorAll("[data-cmd-item]:not([aria-disabled='true'])")
+      );
+      if (!items.length) return;
+      const focused = el.querySelector("[data-cmd-item]:focus");
+      const idx = focused ? items.indexOf(focused) : -1;
+      const next = e.key === "ArrowDown" ? items[Math.min(idx + 1, items.length - 1)] : items[Math.max(idx - 1, 0)];
+      next?.focus();
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: combinedRef,
+        role: "listbox",
+        onKeyDown: handleKeyDown,
+        className: cn("max-h-[300px] overflow-y-auto py-1", className),
+        ...props
+      }
+    );
+  }
+);
+CommandList.displayName = "CommandList";
+var CommandEmpty = React15.forwardRef(
+  ({ className, children = "No results found.", ...props }, ref) => {
+    const visibleCount = React15.useContext(CommandVisibleCtx);
+    if (visibleCount > 0) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("py-6 text-center caption text-taupe-400", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+CommandEmpty.displayName = "CommandEmpty";
+var CommandGroup = React15.forwardRef(
+  ({ className, heading, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, role: "group", className: cn("py-1", className), ...props, children: [
+    heading && /* @__PURE__ */ jsx("p", { className: "px-3 pb-1 pt-0.5 label text-taupe-400", children: heading }),
+    children
+  ] })
+);
+CommandGroup.displayName = "CommandGroup";
+var CommandItem = React15.forwardRef(
+  ({ className, value = "", keywords, disabled, onSelect, children, ...props }, ref) => {
+    const { query, onSelect: ctxOnSelect, reportVisible } = React15.useContext(CommandCtx);
+    const id = React15.useId();
+    const searchText = (keywords ?? [value]).join(" ").toLowerCase();
+    const isVisible = !query || searchText.includes(query.toLowerCase());
+    React15.useLayoutEffect(() => {
+      reportVisible(id, isVisible && !disabled);
+      return () => reportVisible(id, false);
+    }, [id, isVisible, disabled, reportVisible]);
+    if (!isVisible) return null;
+    const handleSelect = () => {
+      if (disabled) return;
+      onSelect?.(value);
+      ctxOnSelect?.(value);
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "option",
+        "aria-selected": false,
+        "aria-disabled": disabled || void 0,
+        "data-cmd-item": true,
+        tabIndex: disabled ? void 0 : 0,
+        className: cn(
+          "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5 mx-1",
+          "body text-taupe-700 outline-none transition-colors",
+          "hover:bg-taupe-50 hover:text-taupe-900",
+          "focus:bg-taupe-50 focus:text-taupe-900",
+          disabled && "pointer-events-none opacity-40",
+          className
+        ),
+        onClick: handleSelect,
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            handleSelect();
+          }
+        },
+        ...props,
+        children
+      }
+    );
+  }
+);
+CommandItem.displayName = "CommandItem";
+var CommandSeparator = React15.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("my-1 h-px bg-taupe-100", className), ...props })
+);
+CommandSeparator.displayName = "CommandSeparator";
+function CommandShortcut({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("ml-auto caption text-taupe-300 tracking-widest font-medium", className),
+      ...props
+    }
+  );
+}
+CommandShortcut.displayName = "CommandShortcut";
+var ContextMenuRoot = ContextMenu.Root;
+var ContextMenuTrigger = ContextMenu.Trigger;
+var ContextMenuGroup = ContextMenu.Group;
+var ContextMenuPortal = ContextMenu.Portal;
+var ContextMenuSub = ContextMenu.Sub;
+var ContextMenuRadioGroup = ContextMenu.RadioGroup;
+var ContextMenuContent = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenu.Portal, { children: /* @__PURE__ */ jsx(
+  ContextMenu.Content,
+  {
+    ref,
+    className: cn(
+      "z-50 min-w-[8rem] bg-white rounded-xl shadow-natural p-1",
+      "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=top]:slide-in-from-bottom-2",
+      "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+      className
+    ),
+    ...props
+  }
+) }));
+ContextMenuContent.displayName = "ContextMenuContent";
+var ContextMenuItem = React15.forwardRef(({ className, inset, destructive, ...props }, ref) => /* @__PURE__ */ jsx(
+  ContextMenu.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
+      "body outline-none transition-colors",
+      destructive ? "text-red-600 focus:bg-red-50 focus:text-red-700" : "text-taupe-700 focus:bg-taupe-50 focus:text-taupe-900",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+ContextMenuItem.displayName = "ContextMenuItem";
+var ContextMenuCheckboxItem = React15.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+  ContextMenu.CheckboxItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-md pl-8 pr-2.5 py-1.5",
+      "body text-taupe-700 outline-none transition-colors",
+      "focus:bg-taupe-50 focus:text-taupe-900",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    checked,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: 13, className: "text-taupe-900" }) }) }),
+      children
+    ]
+  }
+));
+ContextMenuCheckboxItem.displayName = "ContextMenuCheckboxItem";
+var ContextMenuRadioItem = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  ContextMenu.RadioItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-md pl-8 pr-2.5 py-1.5",
+      "body text-taupe-700 outline-none transition-colors",
+      "focus:bg-taupe-50 focus:text-taupe-900",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { size: 8, className: "fill-taupe-900 text-taupe-900" }) }) }),
+      children
+    ]
+  }
+));
+ContextMenuRadioItem.displayName = "ContextMenuRadioItem";
+var ContextMenuLabel = React15.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  ContextMenu.Label,
+  {
+    ref,
+    className: cn("px-2.5 py-1 label text-taupe-400", inset && "pl-8", className),
+    ...props
+  }
+));
+ContextMenuLabel.displayName = "ContextMenuLabel";
+var ContextMenuSeparator = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ContextMenu.Separator,
+  {
+    ref,
+    className: cn("mx-1 my-1 h-px bg-taupe-100", className),
+    ...props
+  }
+));
+ContextMenuSeparator.displayName = "ContextMenuSeparator";
+var ContextMenuSubTrigger = React15.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  ContextMenu.SubTrigger,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
+      "body text-taupe-700 outline-none transition-colors",
+      "focus:bg-taupe-50 focus:text-taupe-900 data-[state=open]:bg-taupe-50",
+      inset && "pl-8",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(ChevronRight, { size: 14, className: "ml-auto text-taupe-400" })
+    ]
+  }
+));
+ContextMenuSubTrigger.displayName = "ContextMenuSubTrigger";
+var ContextMenuSubContent = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ContextMenu.SubContent,
+  {
+    ref,
+    className: cn(
+      "z-50 min-w-[8rem] bg-white rounded-xl border border-taupe-100 shadow-natural p-1",
+      "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=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+      className
+    ),
+    ...props
+  }
+));
+ContextMenuSubContent.displayName = "ContextMenuSubContent";
+function ContextMenuShortcut({ className, ...props }) {
+  return /* @__PURE__ */ jsx("span", { className: cn("ml-auto caption text-taupe-400", className), ...props });
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
+var Table = React15.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "w-full overflow-hidden rounded-xl border border-taupe-100 bg-white",
+      containerClassName
+    ),
+    children: /* @__PURE__ */ jsx(
+      "table",
+      {
+        ref,
+        className: cn("min-w-full caption-bottom divide-y divide-taupe-200", className),
+        ...props
+      }
+    )
+  }
+));
+Table.displayName = "Table";
+var TableHeader = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("bg-taupe-50", className), ...props }));
+TableHeader.displayName = "TableHeader";
+var TableBody = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tbody", { ref, className: cn("divide-y divide-taupe-100 bg-white", className), ...props }));
+TableBody.displayName = "TableBody";
+var TableFooter = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("tfoot", { ref, className: cn("bg-taupe-50 font-medium", className), ...props }));
+TableFooter.displayName = "TableFooter";
+var TableRow = React15.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "tr",
+    {
+      ref,
+      className: cn(
+        "transition-colors hover:bg-taupe-50/50 data-[state=selected]:bg-taupe-50",
+        className
+      ),
+      ...props
+    }
+  )
+);
+TableRow.displayName = "TableRow";
+var TableHead = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "th",
+  {
+    ref,
+    className: cn(
+      "px-6 py-3 text-left align-middle label text-taupe-400",
+      "[&:has([role=checkbox])]:pr-0",
+      className
+    ),
+    ...props
+  }
+));
+TableHead.displayName = "TableHead";
+var TableCell = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "td",
+  {
+    ref,
+    className: cn(
+      "px-6 py-4 align-middle body text-taupe-500",
+      "[&:has([role=checkbox])]:pr-0",
+      className
+    ),
+    ...props
+  }
+));
+TableCell.displayName = "TableCell";
+var TableCaption = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("caption", { ref, className: cn("mt-4 caption text-taupe-400", className), ...props }));
+TableCaption.displayName = "TableCaption";
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "flex h-9 w-full rounded-md border border-taupe-200 bg-white px-3 py-1",
+        "body text-taupe-900 placeholder:text-taupe-400",
+        "transition-colors duration-150",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/20 focus-visible:border-brand-primary",
+        "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-taupe-50",
+        "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-taupe-900",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DataTable({
+  columns,
+  data,
+  searchKey,
+  searchPlaceholder = "Search...",
+  pageSize = 10,
+  showPagination = true
+}) {
+  const [sorting, setSorting] = React15.useState([]);
+  const [columnFilters, setColumnFilters] = React15.useState([]);
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    state: { sorting, columnFilters },
+    initialState: { pagination: { pageSize } }
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    searchKey && /* @__PURE__ */ jsx(
+      Input,
+      {
+        placeholder: searchPlaceholder,
+        value: table.getColumn(searchKey)?.getFilterValue() ?? "",
+        onChange: (e) => table.getColumn(searchKey)?.setFilterValue(e.target.value),
+        className: "max-w-sm"
+      }
+    ),
+    /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(TableHead, { children: header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: cn(
+            "flex items-center gap-1 transition-colors hover:text-taupe-700",
+            header.column.getIsSorted() && "text-taupe-900"
+          ),
+          onClick: header.column.getToggleSortingHandler(),
+          children: [
+            flexRender(header.column.columnDef.header, header.getContext()),
+            header.column.getIsSorted() === "asc" ? /* @__PURE__ */ jsx(ChevronUp, { size: 12, className: "text-brand-primary" }) : header.column.getIsSorted() === "desc" ? /* @__PURE__ */ jsx(ChevronDown, { size: 12, className: "text-brand-primary" }) : /* @__PURE__ */ jsx(ChevronsUpDown, { size: 12, className: "text-taupe-300" })
+          ]
+        }
+      ) : flexRender(header.column.columnDef.header, header.getContext()) }, header.id)) }, headerGroup.id)) }),
+      /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(TableRow, { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: columns.length, className: "h-24 text-center text-taupe-400", children: "No results." }) }) })
+    ] }),
+    showPagination && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("p", { className: "caption text-taupe-400", children: [
+        table.getFilteredRowModel().rows.length,
+        " result",
+        table.getFilteredRowModel().rows.length !== 1 ? "s" : ""
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs("span", { className: "caption text-taupe-400", children: [
+          "Page ",
+          table.getState().pagination.pageIndex + 1,
+          " of ",
+          table.getPageCount()
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: () => table.previousPage(),
+            disabled: !table.getCanPreviousPage(),
+            children: "Previous"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: () => table.nextPage(),
+            disabled: !table.getCanNextPage(),
+            children: "Next"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+var PopoverRoot = Popover.Root;
+var PopoverTrigger = Popover.Trigger;
+var PopoverClose = Popover.Close;
+var PopoverContent = React15.forwardRef(({ className, align = "center", sideOffset = 6, ...props }, ref) => /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
+  Popover.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-72 rounded-xl bg-white p-4 shadow-natural 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=top]:slide-in-from-bottom-2",
+      "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+      className
+    ),
+    ...props
+  }
+) }));
+PopoverContent.displayName = "PopoverContent";
+var formatDate = (date) => date.toLocaleDateString("en-US", {
+  month: "long",
+  day: "numeric",
+  year: "numeric"
+});
+function DatePicker({
+  value,
+  onChange,
+  placeholder = "Pick a date",
+  disabled,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(PopoverRoot, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        className: cn(
+          "w-[240px] justify-start gap-2 text-left font-normal",
+          !value && "text-taupe-400",
+          className
+        ),
+        disabled,
+        children: [
+          /* @__PURE__ */ jsx(CalendarIcon, { size: 14, className: "text-taupe-400 shrink-0" }),
+          value ? formatDate(value) : /* @__PURE__ */ jsx("span", { children: placeholder })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0 shadow-elevated", align: "start", children: /* @__PURE__ */ jsx(Calendar, { mode: "single", selected: value, onSelect: onChange, autoFocus: true }) })
+  ] });
+}
+DatePicker.displayName = "DatePicker";
+function DescriptionList({
+  title,
+  description,
+  items,
+  columns = 1,
+  striped = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    (title || description) && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+      title && /* @__PURE__ */ jsx("p", { className: "body font-semibold text-taupe-900", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "mt-1 caption text-taupe-400", children: description })
+    ] }),
+    /* @__PURE__ */ jsx("dl", { className: cn("border-t border-taupe-100", columns === 2 && "sm:grid sm:grid-cols-2"), children: items.map((item, i) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "py-3.5",
+          columns === 1 ? "grid grid-cols-3 gap-4 items-baseline" : "flex flex-col gap-1 border-b border-taupe-100",
+          columns === 1 && i !== items.length - 1 && "border-b border-taupe-100",
+          striped && i % 2 === 0 && "bg-taupe-50 -mx-4 px-4 rounded"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("dt", { className: "caption font-semibold text-taupe-500 uppercase tracking-wide", children: item.term }),
+          /* @__PURE__ */ jsx("dd", { className: cn("body text-taupe-900", columns === 1 ? "col-span-2" : ""), children: item.action ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+            /* @__PURE__ */ jsx("span", { children: item.details }),
+            item.action
+          ] }) : item.details })
+        ]
+      },
+      i
+    )) })
+  ] });
+}
+var DrawerRoot = Drawer.Root;
+var DrawerTrigger = Drawer.Trigger;
+var DrawerPortal = Drawer.Portal;
+var DrawerClose = Drawer.Close;
+var DrawerOverlay = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Drawer.Overlay,
+  {
+    ref,
+    className: cn("fixed inset-0 z-50 bg-taupe-950/40 backdrop-blur-[1px]", className),
+    ...props
+  }
+));
+DrawerOverlay.displayName = "DrawerOverlay";
+var DrawerContent = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DrawerPortal, { children: [
+  /* @__PURE__ */ jsx(DrawerOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    Drawer.Content,
+    {
+      ref,
+      className: cn(
+        "fixed inset-x-0 bottom-0 z-50 flex flex-col rounded-t-2xl border border-taupe-100 bg-white",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "mx-auto mt-4 h-1 w-12 rounded-full bg-taupe-200" }),
+        children
+      ]
+    }
+  )
+] }));
+DrawerContent.displayName = "DrawerContent";
+var DrawerHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("grid gap-1 px-6 py-4 text-center sm:text-left", className), ...props });
+DrawerHeader.displayName = "DrawerHeader";
+var DrawerFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("mt-auto flex flex-col gap-2 px-6 pb-6", className), ...props });
+DrawerFooter.displayName = "DrawerFooter";
+var DrawerTitle = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Drawer.Title,
+  {
+    ref,
+    className: cn("subheading text-taupe-900", className),
+    ...props
+  }
+));
+DrawerTitle.displayName = "DrawerTitle";
+var DrawerDescription = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Drawer.Description,
+  {
+    ref,
+    className: cn("body text-taupe-500", className),
+    ...props
+  }
+));
+DrawerDescription.displayName = "DrawerDescription";
+var DropdownMenuRoot = DropdownMenu.Root;
+var DropdownMenuTrigger = DropdownMenu.Trigger;
+var DropdownMenuGroup = DropdownMenu.Group;
+var DropdownMenuPortal = DropdownMenu.Portal;
+var DropdownMenuSub = DropdownMenu.Sub;
+var DropdownMenuRadioGroup = DropdownMenu.RadioGroup;
+var DropdownMenuContent = React15.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(
+  DropdownMenu.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 min-w-[8rem] bg-white rounded-xl shadow-natural p-1",
+      "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=top]:slide-in-from-bottom-2",
+      "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+      className
+    ),
+    ...props
+  }
+) }));
+DropdownMenuContent.displayName = "DropdownMenuContent";
+var DropdownMenuItem = React15.forwardRef(({ className, inset, destructive, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenu.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
+      "body outline-none transition-colors",
+      destructive ? "text-red-600 focus:bg-red-50 focus:text-red-700" : "text-taupe-700 focus:bg-taupe-50 focus:text-taupe-900",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuItem.displayName = "DropdownMenuItem";
+var DropdownMenuCheckboxItem = React15.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+  DropdownMenu.CheckboxItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-md pl-8 pr-2.5 py-1.5",
+      "body text-taupe-700 outline-none transition-colors",
+      "focus:bg-taupe-50 focus:text-taupe-900",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    checked,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: 13, className: "text-taupe-900" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
+var DropdownMenuRadioItem = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  DropdownMenu.RadioItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-md pl-8 pr-2.5 py-1.5",
+      "body text-taupe-700 outline-none transition-colors",
+      "focus:bg-taupe-50 focus:text-taupe-900",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { size: 8, className: "fill-taupe-900 text-taupe-900" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
+var DropdownMenuLabel = React15.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenu.Label,
+  {
+    ref,
+    className: cn("px-2.5 py-1 label text-taupe-400", inset && "pl-8", className),
+    ...props
+  }
+));
+DropdownMenuLabel.displayName = "DropdownMenuLabel";
+var DropdownMenuSeparator = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenu.Separator,
+  {
+    ref,
+    className: cn("mx-1 my-1 h-px bg-taupe-100", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+var DropdownMenuSubTrigger = React15.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  DropdownMenu.SubTrigger,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
+      "body text-taupe-700 outline-none transition-colors",
+      "focus:bg-taupe-50 focus:text-taupe-900 data-[state=open]:bg-taupe-50",
+      inset && "pl-8",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(ChevronRight, { size: 14, className: "ml-auto text-taupe-400" })
+    ]
+  }
+));
+DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
+var DropdownMenuSubContent = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenu.SubContent,
+  {
+    ref,
+    className: cn(
+      "z-50 min-w-[8rem] bg-white rounded-xl border border-taupe-100 shadow-natural p-1",
+      "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=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
+function DropdownMenuShortcut({ className, ...props }) {
+  return /* @__PURE__ */ jsx("span", { className: cn("ml-auto caption text-taupe-400", className), ...props });
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+function EmptyState({ icon, title, description, action, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center gap-4 px-6 py-14 text-center", className), children: [
+    icon && /* @__PURE__ */ jsx("div", { className: "flex size-12 items-center justify-center rounded-xl bg-brand-secondary/20 text-taupe-700", children: icon }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx("p", { className: "body font-semibold text-taupe-900", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "body max-w-xs text-taupe-400", children: description })
+    ] }),
+    action && (action.href ? /* @__PURE__ */ jsx(Button, { size: "sm", asChild: true, children: /* @__PURE__ */ jsx("a", { href: action.href, children: action.label }) }) : /* @__PURE__ */ jsx(Button, { size: "sm", onClick: action.onClick, children: action.label }))
+  ] });
+}
+var Label = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Label$1.Root,
+  {
+    ref,
+    className: cn(
+      "body font-medium leading-none text-taupe-700",
+      "peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+      className
+    ),
+    ...props
+  }
+));
+Label.displayName = "Label";
+function Field({
+  label,
+  htmlFor,
+  hint,
+  error,
+  required,
+  cornerHint,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsxs(Label, { htmlFor, children: [
+        label,
+        required && /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-red-600", children: "*" })
+      ] }),
+      cornerHint && /* @__PURE__ */ jsx("span", { className: "caption text-taupe-400", children: cornerHint })
+    ] }),
+    children,
+    error ? /* @__PURE__ */ jsx("p", { className: "caption text-red-600", children: error }) : hint ? /* @__PURE__ */ jsx("p", { className: "caption text-taupe-400", children: hint }) : null
+  ] });
+}
+var colMap = {
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
+};
+var gapMap = {
+  sm: "gap-3",
+  md: "gap-4",
+  lg: "gap-6"
+};
+function GridList({ children, columns = 3, gap = "md", className }) {
+  return /* @__PURE__ */ jsx("ul", { role: "list", className: cn("grid", colMap[columns], gapMap[gap], className), children });
+}
+function GridListCard({
+  title,
+  description,
+  meta,
+  href,
+  accent,
+  trailing,
+  className
+}) {
+  const inner = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex h-full flex-col gap-1 rounded-xl border border-taupe-100 bg-white p-4 shadow-natural transition-shadow",
+        href && "hover:shadow-elevated",
+        className
+      ),
+      children: [
+        accent && /* @__PURE__ */ jsx("div", { className: "mb-2", children: accent }),
+        /* @__PURE__ */ jsx("p", { className: "body font-semibold text-taupe-900", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "caption text-taupe-400", children: description }),
+        (meta || trailing) && /* @__PURE__ */ jsxs("div", { className: "mt-auto flex items-center justify-between pt-3", children: [
+          meta && /* @__PURE__ */ jsx("span", { className: "caption text-taupe-400", children: meta }),
+          trailing && /* @__PURE__ */ jsx("span", { className: "caption text-taupe-400", children: trailing })
+        ] })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx("li", { children: href ? /* @__PURE__ */ jsx(
+    "a",
+    {
+      href,
+      className: "block h-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-taupe-400/40 rounded-xl",
+      children: inner
+    }
+  ) : inner });
+}
+function GridListAccentCard({
+  title,
+  meta,
+  href,
+  accentClass = "bg-taupe-900",
+  initials,
+  trailing,
+  className
+}) {
+  const inner = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex overflow-hidden rounded-xl border border-taupe-100 bg-white shadow-natural transition-shadow",
+        href && "hover:shadow-elevated",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex w-14 shrink-0 items-center justify-center body font-semibold text-white",
+              accentClass
+            ),
+            children: initials
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center justify-between truncate border-l border-taupe-100 px-4 py-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "body font-semibold text-taupe-900 truncate", children: title }),
+            meta && /* @__PURE__ */ jsx("p", { className: "caption text-taupe-400", children: meta })
+          ] }),
+          trailing && /* @__PURE__ */ jsx("div", { className: "shrink-0 pl-2", children: trailing })
+        ] })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx("li", { children: href ? /* @__PURE__ */ jsx(
+    "a",
+    {
+      href,
+      className: "block focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-taupe-400/40 rounded-xl",
+      children: inner
+    }
+  ) : inner });
+}
+var HoverCardRoot = HoverCard.Root;
+var HoverCardTrigger = HoverCard.Trigger;
+var HoverCardContent = React15.forwardRef(({ className, align = "center", sideOffset = 6, ...props }, ref) => /* @__PURE__ */ jsx(HoverCard.Portal, { children: /* @__PURE__ */ jsx(
+  HoverCard.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-64 rounded-xl border border-taupe-100 bg-white p-4 shadow-elevated 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=top]:slide-in-from-bottom-2",
+      "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+      className
+    ),
+    ...props
+  }
+) }));
+HoverCardContent.displayName = "HoverCardContent";
+var InputGroup = React15.forwardRef(
+  ({
+    leadingAddon,
+    trailingAddon,
+    leadingIcon,
+    trailingIcon,
+    trailingButton,
+    error,
+    pill,
+    className,
+    wrapperClassName,
+    ...props
+  }, ref) => {
+    const radius = pill ? "rounded-full" : "rounded-lg";
+    const hasLeading = leadingAddon || leadingIcon;
+    const hasTrailing = trailingAddon || trailingIcon || trailingButton || error;
+    const baseInput = cn(
+      "flex h-9 w-full border bg-white body text-taupe-900 placeholder:text-taupe-400",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:disabled:cursor-not-allowed disabled:opacity-50",
+      error ? "border-red-400 focus-visible:ring-red-200 focus-visible:border-red-500" : "border-taupe-200 focus-visible:ring-brand-primary/20 focus-visible:border-brand-primary"
+    );
+    if (!hasLeading && !hasTrailing) {
+      return /* @__PURE__ */ jsx("input", { ref, className: cn(baseInput, radius, "px-3", className), ...props });
+    }
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex", wrapperClassName), children: [
+      leadingAddon && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "inline-flex items-center border border-r-0 bg-taupe-50 px-3 body text-taupe-500 select-none",
+            error ? "border-red-400" : "border-taupe-200",
+            pill ? "rounded-l-full" : "rounded-l-lg"
+          ),
+          children: leadingAddon
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
+        leadingIcon && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-taupe-400", children: leadingIcon }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            className: cn(
+              baseInput,
+              // Border radius
+              leadingAddon ? trailingAddon || trailingButton ? "rounded-none px-3" : pill ? "rounded-none rounded-r-full px-3" : "rounded-none rounded-r-lg px-3" : leadingIcon ? trailingAddon ? pill ? "rounded-l-full rounded-r-none pl-9 pr-3" : "rounded-l-lg rounded-r-none pl-9 pr-3" : trailingIcon || error ? cn(radius, "pl-9 pr-9") : cn(radius, "pl-9 pr-3") : trailingAddon ? pill ? "rounded-l-full rounded-r-none px-3" : "rounded-l-lg rounded-r-none px-3" : trailingIcon || error || trailingButton ? cn(radius, "pl-3 pr-9") : cn(radius, "px-3"),
+              className
+            ),
+            ...props
+          }
+        ),
+        (trailingIcon || error) && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3", children: error ? /* @__PURE__ */ jsx(AlertCircle, { size: 15, className: "text-red-500" }) : /* @__PURE__ */ jsx("span", { className: "text-taupe-400", children: trailingIcon }) })
+      ] }),
+      trailingAddon && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "inline-flex items-center border border-l-0 bg-taupe-50 px-3 body text-taupe-500 select-none",
+            error ? "border-red-400" : "border-taupe-200",
+            pill ? "rounded-r-full" : "rounded-r-lg"
+          ),
+          children: trailingAddon
+        }
+      ),
+      trailingButton && /* @__PURE__ */ jsx("div", { className: "flex", children: trailingButton })
+    ] });
+  }
+);
+InputGroup.displayName = "InputGroup";
+var InputNumber = React15.forwardRef(
+  ({
+    value,
+    onChange,
+    min = -Infinity,
+    max = Infinity,
+    step = 1,
+    unit,
+    precision = 0,
+    hideSteppers = false,
+    className,
+    disabled,
+    ...rest
+  }, ref) => {
+    const [text, setText] = React15.useState(value.toFixed(precision));
+    React15.useEffect(() => {
+      setText(value.toFixed(precision));
+    }, [value, precision]);
+    const clamp = React15.useCallback((n) => Math.min(max, Math.max(min, n)), [min, max]);
+    const commit = (raw) => {
+      const n = parseFloat(raw);
+      if (Number.isFinite(n)) {
+        const next = clamp(n);
+        onChange(next);
+        setText(next.toFixed(precision));
+      } else {
+        setText(value.toFixed(precision));
+      }
+    };
+    const bump = (delta) => {
+      const next = clamp(value + delta);
+      onChange(next);
+      setText(next.toFixed(precision));
+    };
+    const onKeyDown = (e) => {
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        bump(step * (e.shiftKey ? 10 : 1));
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        bump(-step * (e.shiftKey ? 10 : 1));
+      } else if (e.key === "Enter") {
+        commit(e.target.value);
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "inline-flex h-8 items-stretch rounded-md border border-taupe-200 bg-white overflow-hidden",
+          "focus-within:ring-2 focus-within:ring-brand-primary/20 focus-within:border-brand-primary",
+          disabled && "opacity-50 pointer-events-none",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              type: "text",
+              inputMode: "decimal",
+              spellCheck: false,
+              value: text,
+              onChange: (e) => setText(e.target.value),
+              onBlur: (e) => commit(e.target.value),
+              onKeyDown,
+              disabled,
+              className: "w-full caption text-taupe-900 px-2 bg-transparent focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none text-right",
+              ...rest
+            }
+          ),
+          unit && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "caption-xs text-taupe-400 self-center pr-1.5 select-none", children: unit }),
+          !hideSteppers && /* @__PURE__ */ jsxs("div", { className: "flex flex-col border-l border-taupe-100", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                tabIndex: -1,
+                onClick: () => bump(step),
+                "aria-label": "Increment",
+                className: "flex-1 px-1 hover:bg-taupe-50 active:bg-taupe-100 transition-colors text-taupe-500",
+                children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 8 5", width: "8", height: "5", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M0 5 L4 0 L8 5 Z" }) })
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "border-t border-taupe-100" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                tabIndex: -1,
+                onClick: () => bump(-step),
+                "aria-label": "Decrement",
+                className: "flex-1 px-1 hover:bg-taupe-50 active:bg-taupe-100 transition-colors text-taupe-500",
+                children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 8 5", width: "8", height: "5", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M0 0 L4 5 L8 0 Z" }) })
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+InputNumber.displayName = "InputNumber";
+var InputOTP = React15.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx(
+  OTPInput,
+  {
+    ref,
+    containerClassName: cn("flex items-center gap-2 has-disabled:opacity-50", containerClassName),
+    className: cn("disabled:cursor-not-allowed", className),
+    ...props
+  }
+));
+InputOTP.displayName = "InputOTP";
+var InputOTPGroup = React15.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center", className), ...props })
+);
+InputOTPGroup.displayName = "InputOTPGroup";
+var InputOTPSlot = React15.forwardRef(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React15.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "relative flex h-12 w-11 items-center justify-center",
+        "border-y border-r border-taupe-200 body font-medium text-taupe-900",
+        "first:rounded-l-xl first:border-l last:rounded-r-xl",
+        "transition-all",
+        isActive && "z-10 ring-2 ring-brand-primary/40 border-brand-primary",
+        className
+      ),
+      ...props,
+      children: [
+        char,
+        hasFakeCaret && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "h-5 w-px animate-caret-blink bg-taupe-900 duration-1000" }) })
+      ]
+    }
+  );
+});
+InputOTPSlot.displayName = "InputOTPSlot";
+var InputOTPSeparator = React15.forwardRef(
+  ({ ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ jsx(Minus, { size: 14, className: "text-taupe-300" }) })
+);
+InputOTPSeparator.displayName = "InputOTPSeparator";
+var Kbd = React15.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "kbd",
+    {
+      ref,
+      className: cn(
+        "inline-flex h-5 min-w-5 items-center justify-center rounded border border-taupe-200 bg-taupe-50 px-1.5 font-mono caption-xs font-medium text-taupe-500",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Kbd.displayName = "Kbd";
+var alignMap = {
+  top: "items-start",
+  center: "items-center",
+  bottom: "items-end"
+};
+var gapMap2 = {
+  sm: "gap-3",
+  md: "gap-4",
+  lg: "gap-6"
+};
+function MediaObject({
+  media,
+  children,
+  mediaPosition = "left",
+  align = "top",
+  gap = "md",
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex",
+        mediaPosition === "right" && "flex-row-reverse",
+        alignMap[align],
+        gapMap2[gap],
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "shrink-0", children: media }),
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children })
+      ]
+    }
+  );
+}
+var MenubarRoot = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Menubar.Root,
+  {
+    ref,
+    className: cn(
+      "flex h-9 items-center gap-0.5 rounded-lg border border-taupe-100 bg-white px-1",
+      className
+    ),
+    ...props
+  }
+));
+MenubarRoot.displayName = "Menubar";
+var MenubarMenu = Menubar.Menu;
+var MenubarGroup = Menubar.Group;
+var MenubarSub = Menubar.Sub;
+var MenubarRadioGroup = Menubar.RadioGroup;
+var MenubarTrigger = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Menubar.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center rounded-md px-3 py-1 body font-medium text-taupe-700 select-none outline-none",
+      "hover:bg-taupe-50",
+      "data-[state=open]:bg-taupe-100 data-[state=open]:text-taupe-900",
+      "focus:bg-taupe-50",
+      className
+    ),
+    ...props
+  }
+));
+MenubarTrigger.displayName = "MenubarTrigger";
+var MenubarContent = React15.forwardRef(({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => /* @__PURE__ */ jsx(Menubar.Portal, { children: /* @__PURE__ */ jsx(
+  Menubar.Content,
+  {
+    ref,
+    align,
+    alignOffset,
+    sideOffset,
+    className: cn(
+      "z-50 min-w-[12rem] bg-white rounded-xl shadow-natural p-1",
+      "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=top]:slide-in-from-bottom-2",
+      "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+      className
+    ),
+    ...props
+  }
+) }));
+MenubarContent.displayName = "MenubarContent";
+var MenubarItem = React15.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  Menubar.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
+      "body text-taupe-700 outline-none transition-colors",
+      "focus:bg-taupe-50 focus:text-taupe-900",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+MenubarItem.displayName = "MenubarItem";
+var MenubarCheckboxItem = React15.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+  Menubar.CheckboxItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-md pl-8 pr-2.5 py-1.5",
+      "body text-taupe-700 outline-none transition-colors",
+      "focus:bg-taupe-50 focus:text-taupe-900",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    checked,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(Menubar.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: 13, className: "text-taupe-900" }) }) }),
+      children
+    ]
+  }
+));
+MenubarCheckboxItem.displayName = "MenubarCheckboxItem";
+var MenubarRadioItem = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  Menubar.RadioItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-md pl-8 pr-2.5 py-1.5",
+      "body text-taupe-700 outline-none transition-colors",
+      "focus:bg-taupe-50 focus:text-taupe-900",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(Menubar.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { size: 8, className: "fill-taupe-900 text-taupe-900" }) }) }),
+      children
+    ]
+  }
+));
+MenubarRadioItem.displayName = "MenubarRadioItem";
+var MenubarLabel = React15.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  Menubar.Label,
+  {
+    ref,
+    className: cn("px-2.5 py-1 label text-taupe-400", inset && "pl-8", className),
+    ...props
+  }
+));
+MenubarLabel.displayName = "MenubarLabel";
+var MenubarSeparator = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Menubar.Separator,
+  {
+    ref,
+    className: cn("mx-1 my-1 h-px bg-taupe-100", className),
+    ...props
+  }
+));
+MenubarSeparator.displayName = "MenubarSeparator";
+var MenubarSubTrigger = React15.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  Menubar.SubTrigger,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-md px-2.5 py-1.5",
+      "body text-taupe-700 outline-none transition-colors",
+      "focus:bg-taupe-50 focus:text-taupe-900 data-[state=open]:bg-taupe-50",
+      inset && "pl-8",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(ChevronRight, { size: 14, className: "ml-auto text-taupe-400" })
+    ]
+  }
+));
+MenubarSubTrigger.displayName = "MenubarSubTrigger";
+var MenubarSubContent = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Menubar.SubContent,
+  {
+    ref,
+    className: cn(
+      "z-50 min-w-[8rem] bg-white rounded-xl border border-taupe-100 shadow-natural p-1",
+      "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=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+      className
+    ),
+    ...props
+  }
+));
+MenubarSubContent.displayName = "MenubarSubContent";
+function MenubarShortcut({ className, ...props }) {
+  return /* @__PURE__ */ jsx("span", { className: cn("ml-auto caption text-taupe-400", className), ...props });
+}
+MenubarShortcut.displayName = "MenubarShortcut";
+var NativeSelect = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+  /* @__PURE__ */ jsx(
+    "select",
+    {
+      ref,
+      className: cn(
+        "peer h-9 w-full appearance-none rounded-lg border border-taupe-200 bg-white pl-3 pr-8",
+        "body text-taupe-900",
+        "focus:outline-none focus:ring-2 focus:ring-taupe-400/30 focus:border-taupe-400",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "aria-[invalid=true]:border-red-500 aria-[invalid=true]:focus:ring-red-500/20",
+        className
+      ),
+      ...props,
+      children
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    ChevronDown,
+    {
+      size: 14,
+      className: "pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-taupe-400 peer-disabled:opacity-50"
+    }
+  )
+] }));
+NativeSelect.displayName = "NativeSelect";
+var NativeSelectOption = React15.forwardRef((props, ref) => /* @__PURE__ */ jsx("option", { ref, ...props }));
+NativeSelectOption.displayName = "NativeSelectOption";
+var NativeSelectOptGroup = React15.forwardRef((props, ref) => /* @__PURE__ */ jsx("optgroup", { ref, ...props }));
+NativeSelectOptGroup.displayName = "NativeSelectOptGroup";
+var NavigationMenuRoot = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  NavigationMenu.Root,
+  {
+    ref,
+    className: cn("relative z-10 flex max-w-max flex-1 items-center justify-center", className),
+    ...props,
+    children
+  }
+));
+NavigationMenuRoot.displayName = "NavigationMenu";
+var NavigationMenuList = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  NavigationMenu.List,
+  {
+    ref,
+    className: cn("group flex flex-1 list-none items-center justify-center gap-1", className),
+    ...props
+  }
+));
+NavigationMenuList.displayName = "NavigationMenuList";
+var NavigationMenuItem = NavigationMenu.Item;
+var NavigationMenuTrigger = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  NavigationMenu.Trigger,
+  {
+    ref,
+    className: cn(
+      "group inline-flex h-9 w-max items-center justify-center gap-1 rounded-md px-3 py-2",
+      "body font-medium text-taupe-700",
+      "hover:bg-taupe-100 hover:text-taupe-900",
+      "data-[active]:bg-taupe-100 data-[state=open]:bg-taupe-100",
+      "outline-none transition-colors",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(
+        ChevronDown,
+        {
+          size: 12,
+          className: "transition-transform duration-200 group-data-[state=open]:rotate-180",
+          "aria-hidden": "true"
+        }
+      )
+    ]
+  }
+));
+NavigationMenuTrigger.displayName = "NavigationMenuTrigger";
+var NavigationMenuContent = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  NavigationMenu.Content,
+  {
+    ref,
+    className: cn(
+      "left-0 top-0 w-full",
+      "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out",
+      "data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out",
+      "data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52",
+      "data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52",
+      "md:absolute md:w-auto",
+      className
+    ),
+    ...props
+  }
+));
+NavigationMenuContent.displayName = "NavigationMenuContent";
+var NavigationMenuLink = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  NavigationMenu.Link,
+  {
+    ref,
+    className: cn(
+      "block select-none rounded-md px-3 py-2 body text-taupe-700",
+      "hover:bg-taupe-50 hover:text-taupe-900",
+      "outline-none transition-colors",
+      className
+    ),
+    ...props
+  }
+));
+NavigationMenuLink.displayName = "NavigationMenuLink";
+var NavigationMenuViewport = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "absolute left-0 top-full flex justify-center", children: /* @__PURE__ */ jsx(
+  NavigationMenu.Viewport,
+  {
+    ref,
+    className: cn(
+      "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-xl border border-taupe-100 bg-white shadow-elevated",
+      "md:w-[var(--radix-navigation-menu-viewport-width)]",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out",
+      "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90",
+      className
+    ),
+    ...props
+  }
+) }));
+NavigationMenuViewport.displayName = "NavigationMenuViewport";
+var NavigationMenuIndicator = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  NavigationMenu.Indicator,
+  {
+    ref,
+    className: cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+      "data-[state=visible]:animate-in data-[state=hidden]:animate-out",
+      "data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-taupe-100 shadow-elevated" })
+  }
+));
+NavigationMenuIndicator.displayName = "NavigationMenuIndicator";
+function navigationMenuTriggerStyle() {
+  return cn(
+    "group inline-flex h-9 w-max items-center justify-center gap-1 rounded-md px-3 py-2",
+    "body font-medium text-taupe-700",
+    "hover:bg-taupe-100 hover:text-taupe-900",
+    "data-[active]:bg-taupe-100 data-[state=open]:bg-taupe-100",
+    "outline-none transition-colors"
+  );
+}
+var variantConfig = {
+  default: { icon: null, iconClass: "text-taupe-400" },
+  success: {
+    icon: CheckCircle,
+    iconClass: "bg-brand-secondary/25 text-taupe-700 rounded-full p-1"
+  },
+  error: { icon: AlertCircle, iconClass: "text-red-500" },
+  warning: {
+    icon: AlertTriangle,
+    iconClass: "bg-brand-secondary/80 text-taupe-700 rounded-full p-1"
+  },
+  info: { icon: Info, iconClass: "text-taupe-400" }
+};
+function Notification({
+  title,
+  description,
+  icon,
+  variant = "default",
+  actions,
+  onClose,
+  className
+}) {
+  const config = variantConfig[variant];
+  const DefaultIcon = config.icon;
+  const resolvedIcon = icon ?? (DefaultIcon ? /* @__PURE__ */ jsx(DefaultIcon, { size: 20 }) : null);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "pointer-events-auto w-full max-w-sm overflow-hidden rounded-xl border border-taupe-100 bg-white shadow-elevated",
+        className
+      ),
+      children: /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+        resolvedIcon && /* @__PURE__ */ jsx("div", { className: cn("shrink-0 mt-0.5", config.iconClass), children: resolvedIcon }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "body font-semibold text-taupe-900", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 body text-taupe-500", children: description }),
+          actions && actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-3 flex gap-3", children: actions.map((action, i) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: action.onClick,
+              className: cn(
+                "body font-semibold transition-colors",
+                action.variant === "ghost" ? "text-taupe-400 hover:text-taupe-700" : "text-taupe-900 hover:text-taupe-600"
+              ),
+              children: action.label
+            },
+            i
+          )) })
+        ] }),
+        onClose && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            className: "rounded-md text-taupe-400 hover:text-taupe-600 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-taupe-400/40",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" }),
+              /* @__PURE__ */ jsx(X, { size: 16 })
+            ]
+          }
+        ) })
+      ] }) })
+    }
+  );
+}
+function PageHeading({
+  title,
+  description,
+  breadcrumbs,
+  actions,
+  meta,
+  badge,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("border-b border-taupe-100 pb-6", className), children: [
+    breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx("nav", { className: "mb-3 flex items-center gap-1.5", "aria-label": "Breadcrumb", children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxs(React15.Fragment, { children: [
+      i > 0 && /* @__PURE__ */ jsx(ChevronRight, { size: 12, className: "text-taupe-300 shrink-0" }),
+      crumb.href ? /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: crumb.href,
+          className: "caption text-taupe-400 hover:text-taupe-700 transition-colors",
+          children: crumb.label
+        }
+      ) : /* @__PURE__ */ jsx("span", { className: "caption font-semibold text-taupe-700", children: crumb.label })
+    ] }, i)) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx("h1", { className: "display text-taupe-900 truncate", children: title }),
+          badge && (typeof badge === "string" ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: badge }) : /* @__PURE__ */ jsx(Badge, { variant: badge.variant ?? "secondary", children: badge.label }))
+        ] }),
+        description && /* @__PURE__ */ jsx("p", { className: "mt-1.5 body text-taupe-400 max-w-2xl", children: description }),
+        meta && meta.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap items-center gap-4", children: meta.map((m, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 caption text-taupe-400", children: [
+          m.icon && /* @__PURE__ */ jsx("span", { className: "text-taupe-400", children: m.icon }),
+          /* @__PURE__ */ jsx("span", { children: m.text })
+        ] }, i)) })
+      ] }),
+      actions && actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions.map(
+        (action, i) => action.href ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "sm",
+            variant: action.primary ? "default" : action.variant ?? "outline",
+            asChild: true,
+            children: /* @__PURE__ */ jsx("a", { href: action.href, children: action.label })
+          },
+          i
+        ) : /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "sm",
+            variant: action.primary ? "default" : action.variant ?? "outline",
+            onClick: action.onClick,
+            children: action.label
+          },
+          i
+        )
+      ) })
+    ] })
+  ] });
+}
+var Pagination = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "nav",
+  {
+    role: "navigation",
+    "aria-label": "pagination",
+    className: cn("mx-auto flex w-full justify-center", className),
+    ...props
+  }
+);
+Pagination.displayName = "Pagination";
+var PaginationContent = React15.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("ul", { ref, className: cn("flex flex-row items-center gap-1", className), ...props })
+);
+PaginationContent.displayName = "PaginationContent";
+var PaginationItem = React15.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", { ref, className: cn("", className), ...props })
+);
+PaginationItem.displayName = "PaginationItem";
+var PaginationLink = ({ className, isActive, ...props }) => /* @__PURE__ */ jsx(
+  "a",
+  {
+    "aria-current": isActive ? "page" : void 0,
+    className: cn(
+      buttonVariants({ variant: isActive ? "default" : "ghost", size: "icon" }),
+      "size-8 rounded-md body",
+      className
+    ),
+    ...props
+  }
+);
+PaginationLink.displayName = "PaginationLink";
+var PaginationPrevious = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  PaginationLink,
+  {
+    "aria-label": "Go to previous page",
+    className: cn("gap-1 px-3 w-auto", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(ChevronLeft, { size: 14 }),
+      /* @__PURE__ */ jsx("span", { className: "body", children: "Prev" })
+    ]
+  }
+);
+PaginationPrevious.displayName = "PaginationPrevious";
+var PaginationNext = ({ className, ...props }) => /* @__PURE__ */ jsxs(
+  PaginationLink,
+  {
+    "aria-label": "Go to next page",
+    className: cn("gap-1 px-3 w-auto", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "body", children: "Next" }),
+      /* @__PURE__ */ jsx(ChevronRight, { size: 14 })
+    ]
+  }
+);
+PaginationNext.displayName = "PaginationNext";
+var PaginationEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    "aria-hidden": true,
+    className: cn("flex size-8 items-center justify-center text-taupe-400", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(MoreHorizontal, { size: 14 })
+  }
+);
+PaginationEllipsis.displayName = "PaginationEllipsis";
+var ProgressRoot = React15.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ jsx(
+  Progress.Root,
+  {
+    ref,
+    className: cn("relative h-2 w-full overflow-hidden rounded-full bg-taupe-100", className),
+    value,
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      Progress.Indicator,
+      {
+        className: "h-full w-full flex-1 bg-brand-primary transition-all",
+        style: { transform: `translateX(-${100 - (value ?? 0)}%)` }
+      }
+    )
+  }
+));
+ProgressRoot.displayName = "Progress";
+function PropertyRow({
+  label,
+  labelWidth = 96,
+  labelAlign = "center",
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex w-full gap-3 py-1",
+        labelAlign === "center" ? "items-center" : "items-start",
+        className
+      ),
+      ...rest,
+      children: [
+        label !== void 0 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "caption text-taupe-500 shrink-0 select-none",
+            style: { width: typeof labelWidth === "number" ? `${labelWidth}px` : labelWidth },
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center gap-2 min-w-0", children })
+      ]
+    }
+  );
+}
+function RadioCards({ options, value, onValueChange, columns = 3, className }) {
+  const colMap2 = {
+    1: "grid-cols-1",
+    2: "grid-cols-1 sm:grid-cols-2",
+    3: "grid-cols-1 sm:grid-cols-3",
+    4: "grid-cols-2 sm:grid-cols-4"
+  };
+  return /* @__PURE__ */ jsx("div", { className: cn("grid gap-3", colMap2[columns], className), children: options.map((option) => {
+    const isSelected = option.value === value;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        role: "radio",
+        "aria-checked": isSelected,
+        disabled: option.disabled,
+        onClick: () => !option.disabled && onValueChange?.(option.value),
+        className: cn(
+          "relative flex cursor-pointer flex-col gap-1 rounded-xl border p-4 text-left transition-all",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          isSelected ? "border-brand-primary bg-white shadow-natural" : "border-taupe-200 bg-white hover:border-taupe-400"
+        ),
+        children: [
+          isSelected && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "pointer-events-none absolute inset-0 rounded-xl ring-2 ring-brand-primary",
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              option.icon && /* @__PURE__ */ jsx("div", { className: "mb-2 text-taupe-500", children: option.icon }),
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "body font-semibold",
+                    isSelected ? "text-taupe-900" : "text-taupe-800"
+                  ),
+                  children: option.label
+                }
+              ),
+              option.description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 caption text-taupe-400", children: option.description })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "flex size-5 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
+                  isSelected ? "border-brand-primary bg-brand-primary" : "border-taupe-300 bg-white"
+                ),
+                children: isSelected && /* @__PURE__ */ jsx(Check, { size: 10, className: "text-white", strokeWidth: 3 })
+              }
+            )
+          ] }),
+          option.meta && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "caption font-semibold mt-2",
+                isSelected ? "text-taupe-900" : "text-taupe-400"
+              ),
+              children: option.meta
+            }
+          )
+        ]
+      },
+      option.value
+    );
+  }) });
+}
+var RadioGroupRoot = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadioGroup.Root, { ref, className: cn("grid gap-2", className), ...props }));
+RadioGroupRoot.displayName = "RadioGroup";
+var RadioGroupItem = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  RadioGroup.Item,
+  {
+    ref,
+    className: cn(
+      "aspect-square size-4 rounded-full border border-taupe-300 text-taupe-900",
+      "shadow-none transition-colors",
+      "focus:outline-none focus-visible:ring-2 focus-visible:ring-taupe-900/20",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "data-[state=checked]:bg-taupe-900 data-[state=checked]:border-taupe-900",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(RadioGroup.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "size-2 rounded-full bg-white" }) })
+  }
+));
+RadioGroupItem.displayName = "RadioGroupItem";
+function ResizablePanelGroup({
+  className,
+  direction,
+  orientation,
+  ...props
+}) {
+  const resolvedOrientation = orientation ?? direction ?? "horizontal";
+  return /* @__PURE__ */ jsx(
+    Group,
+    {
+      orientation: resolvedOrientation,
+      className: cn(
+        "flex h-full w-full",
+        resolvedOrientation === "vertical" && "flex-col",
+        className
+      ),
+      ...props
+    }
+  );
+}
+ResizablePanelGroup.displayName = "ResizablePanelGroup";
+var ResizablePanel = Panel;
+function ResizableHandle({ className, withHandle = true, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Separator$1,
+    {
+      className: cn(
+        "relative flex shrink-0 items-center justify-center bg-taupe-100",
+        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-brand-primary/50",
+        // Horizontal (default): vertical bar
+        "[&:not([aria-orientation=vertical])]:h-full [&:not([aria-orientation=vertical])]:w-px",
+        // Vertical: horizontal bar
+        "[aria-orientation=vertical]:h-px [aria-orientation=vertical]:w-full",
+        // Wider hit target via pseudo-element
+        "after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2",
+        "[aria-orientation=vertical]:after:left-0 [aria-orientation=vertical]:after:h-1 [aria-orientation=vertical]:after:w-full [aria-orientation=vertical]:after:translate-x-0 [aria-orientation=vertical]:after:-translate-y-1/2",
+        // Active drag state
+        "active:bg-brand-primary/30",
+        className
+      ),
+      ...props,
+      children: withHandle && /* @__PURE__ */ jsx("div", { className: "z-10 flex h-5 w-3 items-center justify-center rounded-sm border border-taupe-100 bg-white shadow-natural", children: /* @__PURE__ */ jsx(GripVertical, { size: 10, className: "text-taupe-400" }) })
+    }
+  );
+}
+ResizableHandle.displayName = "ResizableHandle";
+var ScrollAreaRoot = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(ScrollArea.Root, { ref, className: cn("relative overflow-hidden", className), ...props, children: [
+  /* @__PURE__ */ jsx(ScrollArea.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
+  /* @__PURE__ */ jsx(ScrollAreaScrollbar, { orientation: "vertical" }),
+  /* @__PURE__ */ jsx(ScrollAreaScrollbar, { orientation: "horizontal" }),
+  /* @__PURE__ */ jsx(ScrollArea.Corner, {})
+] }));
+ScrollAreaRoot.displayName = "ScrollArea";
+var ScrollAreaScrollbar = React15.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
+  ScrollArea.Scrollbar,
+  {
+    ref,
+    orientation,
+    className: cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2 border-l border-l-transparent p-px",
+      orientation === "horizontal" && "h-2 flex-col border-t border-t-transparent p-px",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(ScrollArea.Thumb, { className: "relative flex-1 rounded-full bg-taupe-200 hover:bg-taupe-300 transition-colors" })
+  }
+));
+ScrollAreaScrollbar.displayName = "ScrollAreaScrollbar";
+function SectionHeading({
+  title,
+  description,
+  actions,
+  border = true,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col gap-1 pb-4 sm:flex-row sm:items-start sm:justify-between",
+        border && "border-b border-taupe-100",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("h2", { className: "heading text-taupe-900 truncate", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "mt-1 body text-taupe-400", children: description })
+        ] }),
+        actions && actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2 pt-1", children: actions.map(
+          (action, i) => action.href ? /* @__PURE__ */ jsx(Button, { size: "sm", variant: action.variant ?? "default", asChild: true, children: /* @__PURE__ */ jsx("a", { href: action.href, children: action.label }) }, i) : /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "sm",
+              variant: action.variant ?? "default",
+              onClick: action.onClick,
+              children: action.label
+            },
+            i
+          )
+        ) })
+      ]
+    }
+  );
+}
+var SelectRoot = Select.Root;
+var SelectGroup = Select.Group;
+var SelectValue = Select.Value;
+var SelectTrigger = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  Select.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex h-9 w-full items-center justify-between rounded-xl bg-white px-3 py-2",
+      "body text-taupe-900 shadow-natural",
+      "focus:outline-none focus:ring-2 focus:ring-taupe-900/15",
+      "disabled:opacity-50 disabled:cursor-not-allowed",
+      "data-[placeholder]:text-taupe-400",
+      "[&>span]:line-clamp-1",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(Select.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { size: 15, className: "text-taupe-400 shrink-0" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = "SelectTrigger";
+var SelectContent = React15.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsxs(
+  Select.Content,
+  {
+    ref,
+    className: cn(
+      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden",
+      "bg-white rounded-xl shadow-natural p-1",
+      "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=top]:slide-in-from-bottom-2",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(Select.ScrollUpButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ jsx(ChevronUp, { size: 14, className: "text-taupe-400" }) }),
+      /* @__PURE__ */ jsx(
+        Select.Viewport,
+        {
+          className: cn(
+            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx(Select.ScrollDownButton, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ jsx(ChevronDown, { size: 14, className: "text-taupe-400" }) })
+    ]
+  }
+) }));
+SelectContent.displayName = "SelectContent";
+var SelectItem = React15.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  Select.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-default select-none items-center rounded-md px-2.5 py-1.5",
+      "body text-taupe-700 outline-none",
+      "focus:bg-taupe-50 focus:text-taupe-900",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(Select.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { size: 13, className: "text-taupe-900" }) }) }),
+      /* @__PURE__ */ jsx(Select.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = "SelectItem";
+var SelectLabel = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Select.Label,
+  {
+    ref,
+    className: cn("px-2.5 py-1 label text-taupe-400", className),
+    ...props
+  }
+));
+SelectLabel.displayName = "SelectLabel";
+var SelectSeparator = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Select.Separator, { ref, className: cn("mx-1 my-1 h-px bg-taupe-100", className), ...props }));
+SelectSeparator.displayName = "SelectSeparator";
+var Separator2 = React15.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(
+  Separator.Root,
+  {
+    ref,
+    decorative,
+    orientation,
+    className: cn(
+      "shrink-0 bg-taupe-100",
+      orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+      className
+    ),
+    ...props
+  }
+));
+Separator2.displayName = "Separator";
+var SheetRoot = Dialog.Root;
+var SheetTrigger = Dialog.Trigger;
+var SheetClose = Dialog.Close;
+var SheetOverlay = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Dialog.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-black/30 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
+  }
+));
+SheetOverlay.displayName = "SheetOverlay";
+var sheetContentVariants = cva(
+  [
+    "fixed z-50 bg-white shadow-elevated p-6",
+    "data-[state=open]:animate-in data-[state=closed]:animate-out",
+    "transition ease-in-out duration-300"
+  ],
+  {
+    variants: {
+      side: {
+        right: "right-0 top-0 h-full w-full max-w-sm data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
+        left: "left-0 top-0 h-full w-full max-w-sm data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
+        top: "top-0 inset-x-0 h-auto data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom: "bottom-0 inset-x-0 h-auto data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom"
+      }
+    },
+    defaultVariants: {
+      side: "right"
+    }
+  }
+);
+var SheetContent = React15.forwardRef(
+  ({ className, children, side = "right", ...props }, ref) => /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
+    /* @__PURE__ */ jsx(SheetOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      Dialog.Content,
+      {
+        ref,
+        className: cn(sheetContentVariants({ side }), className),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsxs(Dialog.Close, { className: "absolute right-4 top-4 rounded-md p-1 text-taupe-400 opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-taupe-900/20", children: [
+            /* @__PURE__ */ jsx(X, { size: 16 }),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+          ] })
+        ]
+      }
+    )
+  ] })
+);
+SheetContent.displayName = "SheetContent";
+function SheetHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-1.5 mb-4", className), ...props });
+}
+SheetHeader.displayName = "SheetHeader";
+function SheetFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-end gap-2 mt-6", className), ...props });
+}
+SheetFooter.displayName = "SheetFooter";
+var SheetTitle = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Dialog.Title,
+  {
+    ref,
+    className: cn("body-lg font-semibold text-taupe-900", className),
+    ...props
+  }
+));
+SheetTitle.displayName = "SheetTitle";
+var SheetDescription = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Dialog.Description, { ref, className: cn("body text-taupe-500", className), ...props }));
+SheetDescription.displayName = "SheetDescription";
+function TooltipProvider({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Tooltip.Provider, { delayDuration: 300, ...props, children });
+}
+var TooltipRoot = Tooltip.Root;
+var TooltipTrigger = Tooltip.Trigger;
+var TooltipContent = React15.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(
+  Tooltip.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 rounded-lg bg-taupe-900 px-2.5 py-1.5 caption text-white",
+      "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-1 data-[side=top]:slide-in-from-bottom-1",
+      "data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1",
+      className
+    ),
+    ...props
+  }
+) }));
+TooltipContent.displayName = "TooltipContent";
+var SIDEBAR_COOKIE_NAME = "sidebar:state";
+var SIDEBAR_WIDTH = "16rem";
+var SIDEBAR_WIDTH_ICON = "3.5rem";
+var SidebarContext = React15.createContext(null);
+function useSidebar() {
+  const ctx = React15.useContext(SidebarContext);
+  if (!ctx) throw new Error("useSidebar must be used inside SidebarProvider");
+  return ctx;
+}
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange,
+  className,
+  style,
+  children,
+  ...props
+}) {
+  const [_open, _setOpen] = React15.useState(defaultOpen);
+  const open = openProp !== void 0 ? openProp : _open;
+  const setOpen = React15.useCallback(
+    (value) => {
+      if (onOpenChange) {
+        onOpenChange(value);
+      } else {
+        _setOpen(value);
+      }
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${value}; path=/; max-age=${60 * 60 * 24 * 7}`;
+    },
+    [onOpenChange]
+  );
+  const toggleSidebar = React15.useCallback(() => {
+    setOpen(!open);
+  }, [open, setOpen]);
+  const state = open ? "expanded" : "collapsed";
+  const contextValue = React15.useMemo(
+    () => ({ state, open, setOpen, toggleSidebar }),
+    [state, open, setOpen, toggleSidebar]
+  );
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-sidebar": "provider",
+      "data-state": state,
+      className: cn("group/sidebar-wrapper flex min-h-svh w-full", className),
+      style: {
+        "--sidebar-width": SIDEBAR_WIDTH,
+        "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+        ...style
+      },
+      ...props,
+      children
+    }
+  ) }) });
+}
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "icon",
+  className,
+  children,
+  ...props
+}) {
+  const { state } = useSidebar();
+  if (collapsible === "none") {
+    return /* @__PURE__ */ jsx(
+      "aside",
+      {
+        "data-side": side,
+        "data-variant": variant,
+        "data-collapsible": "none",
+        className: cn(
+          "flex flex-col h-svh bg-white border-r border-taupe-100 w-[--sidebar-width]",
+          side === "right" && "border-r-0 border-l",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+  if (collapsible === "offcanvas") {
+    return /* @__PURE__ */ jsx(
+      "aside",
+      {
+        "data-state": state,
+        "data-side": side,
+        "data-variant": variant,
+        "data-collapsible": "offcanvas",
+        className: cn(
+          "group peer flex flex-col h-svh bg-white border-r border-taupe-100",
+          "transition-[width,transform] duration-200 ease-linear",
+          "data-[state=expanded]:w-[--sidebar-width] data-[state=collapsed]:w-0 data-[state=collapsed]:-translate-x-full",
+          side === "right" && "border-r-0 border-l data-[state=collapsed]:translate-x-full",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "aside",
+    {
+      "data-state": state,
+      "data-side": side,
+      "data-variant": variant,
+      "data-collapsible": "icon",
+      className: cn(
+        "group peer hidden md:flex flex-col h-svh bg-white border-r border-taupe-100",
+        "transition-[width] duration-200 ease-linear overflow-hidden",
+        "data-[state=expanded]:w-[--sidebar-width] data-[state=collapsed]:w-[--sidebar-width-icon]",
+        side === "right" && "border-r-0 border-l",
+        variant === "floating" && "m-2 h-[calc(100svh-1rem)] rounded-xl border shadow-natural",
+        variant === "inset" && "border-r-0",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function SidebarTrigger({ className, onClick, ...props }) {
+  const { toggleSidebar } = useSidebar();
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      "data-sidebar": "trigger",
+      variant: "ghost",
+      size: "sm",
+      className: cn("h-7 w-7", className),
+      onClick: (e) => {
+        onClick?.(e);
+        toggleSidebar();
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(PanelLeft, { size: 16 }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle sidebar" })
+      ]
+    }
+  );
+}
+function SidebarRail({ className, ...props }) {
+  const { toggleSidebar } = useSidebar();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "data-sidebar": "rail",
+      "aria-label": "Toggle sidebar",
+      tabIndex: -1,
+      onClick: toggleSidebar,
+      title: "Toggle sidebar",
+      className: cn(
+        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 cursor-col-resize transition-all ease-linear",
+        "after:absolute after:inset-y-0 after:left-1/2 after:w-[2px]",
+        "hover:after:bg-brand-primary/30",
+        "group-data-[side=left]:-right-4 group-data-[side=right]:left-0",
+        "sm:flex",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarInset({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "main",
+    {
+      "data-sidebar": "inset",
+      className: cn("relative flex min-h-svh flex-1 flex-col bg-white overflow-hidden", className),
+      ...props
+    }
+  );
+}
+function SidebarHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-sidebar": "header",
+      className: cn("flex flex-col gap-2 p-3 border-b border-taupe-100", className),
+      ...props
+    }
+  );
+}
+function SidebarContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-sidebar": "content",
+      className: cn("flex min-h-0 flex-1 flex-col gap-2 overflow-auto p-3", className),
+      ...props
+    }
+  );
+}
+function SidebarFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-sidebar": "footer",
+      className: cn("flex flex-col gap-2 p-3 border-t border-taupe-100", className),
+      ...props
+    }
+  );
+}
+function SidebarSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Separator2,
+    {
+      "data-sidebar": "separator",
+      className: cn("mx-2 my-1 bg-taupe-100", className),
+      ...props
+    }
+  );
+}
+function SidebarGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-sidebar": "group",
+      className: cn("relative flex w-full min-w-0 flex-col p-2", className),
+      ...props
+    }
+  );
+}
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-sidebar": "group-label",
+      className: cn(
+        "flex h-8 shrink-0 items-center rounded-md px-2 label text-taupe-400",
+        "outline-none ring-taupe-900 transition-[margin,opacity] duration-200 ease-linear",
+        "group-data-[state=collapsed]/sidebar-wrapper:opacity-0",
+        "group-data-[state=collapsed]/sidebar-wrapper:h-0",
+        "group-data-[state=collapsed]/sidebar-wrapper:m-0",
+        "group-data-[state=collapsed]/sidebar-wrapper:p-0",
+        "group-data-[state=collapsed]/sidebar-wrapper:overflow-hidden",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarGroupContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-sidebar": "group-content", className: cn("w-full text-sm", className), ...props });
+}
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-sidebar": "group-action",
+      className: cn(
+        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center",
+        "rounded-md text-taupe-400 hover:bg-taupe-100 hover:text-taupe-900",
+        "outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarMenu({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      "data-sidebar": "menu",
+      className: cn("flex w-full min-w-0 flex-col gap-1", className),
+      ...props
+    }
+  );
+}
+function SidebarMenuItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx("li", { "data-sidebar": "menu-item", className: cn("group/menu-item relative", className), ...props });
+}
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  tooltip,
+  size = "default",
+  className,
+  children,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "button";
+  const button = /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-sidebar": "menu-button",
+      "data-active": isActive,
+      "data-size": size,
+      className: cn(
+        // Base
+        "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 body text-left",
+        "outline-none ring-taupe-900",
+        "transition-[width,height,padding] duration-150",
+        "hover:bg-taupe-100 hover:text-taupe-900",
+        "focus-visible:ring-2 focus-visible:ring-brand-primary/30",
+        "active:bg-taupe-100",
+        "disabled:pointer-events-none disabled:opacity-50",
+        "[&>svg]:size-4 [&>svg]:shrink-0",
+        // Size variants
+        size === "sm" && "h-7 text-xs",
+        size === "lg" && "h-10",
+        // Active state
+        isActive && [
+          "bg-brand-primary/10 text-brand-primary",
+          "hover:bg-brand-primary/15 hover:text-brand-primary"
+        ],
+        // Collapsed state
+        "group-data-[state=collapsed]/sidebar-wrapper:justify-center",
+        "group-data-[state=collapsed]/sidebar-wrapper:size-9",
+        "group-data-[state=collapsed]/sidebar-wrapper:p-0",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+  if (!tooltip) {
+    return button;
+  }
+  return /* @__PURE__ */ jsxs(TooltipRoot, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: button }),
+    /* @__PURE__ */ jsx(
+      TooltipContent,
+      {
+        side: "right",
+        className: cn(
+          // Only visible when collapsed
+          "hidden group-data-[state=collapsed]/sidebar-wrapper:block"
+        ),
+        children: tooltip
+      }
+    )
+  ] });
+}
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-sidebar": "menu-action",
+      className: cn(
+        "absolute right-1 top-1/2 -translate-y-1/2 flex aspect-square w-5 items-center justify-center",
+        "rounded-md text-taupe-400 hover:bg-taupe-100 hover:text-taupe-900",
+        "outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
+        showOnHover && [
+          "opacity-0 transition-opacity",
+          "group-hover/menu-item:opacity-100",
+          "peer-data-[active=true]/menu-button:opacity-100"
+        ],
+        "group-data-[state=collapsed]/sidebar-wrapper:hidden",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarMenuBadge({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-sidebar": "menu-badge",
+      className: cn(
+        "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-full",
+        "caption font-medium bg-taupe-100 text-taupe-700 px-1",
+        "group-data-[state=collapsed]/sidebar-wrapper:hidden",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}) {
+  const width = React15.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-sidebar": "menu-skeleton",
+      className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
+      ...props,
+      children: [
+        showIcon && /* @__PURE__ */ jsx("div", { className: "size-4 shrink-0 rounded-md bg-taupe-200 animate-pulse" }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "h-4 max-w-[--skeleton-width] flex-1 rounded-md bg-taupe-200 animate-pulse",
+            style: { "--skeleton-width": width }
+          }
+        )
+      ]
+    }
+  );
+}
+function SidebarMenuSub({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      "data-sidebar": "menu-sub",
+      className: cn(
+        "mx-3.5 flex min-w-0 flex-col gap-1 border-l border-taupe-100 pl-3",
+        "group-data-[state=collapsed]/sidebar-wrapper:hidden",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarMenuSubItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      "data-sidebar": "menu-sub-item",
+      className: cn("group/menu-sub-item relative", className),
+      ...props
+    }
+  );
+}
+function SidebarMenuSubButton({
+  asChild = false,
+  isActive = false,
+  className,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "a";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-sidebar": "menu-sub-button",
+      "data-active": isActive,
+      className: cn(
+        "flex h-7 min-w-0 items-center gap-2 overflow-hidden rounded-md px-2",
+        "body text-taupe-500 outline-none",
+        "transition-colors duration-150",
+        "hover:text-taupe-900 hover:bg-taupe-100",
+        "focus-visible:ring-2 focus-visible:ring-brand-primary/30",
+        "disabled:pointer-events-none disabled:opacity-50",
+        "[&>svg]:size-3.5 [&>svg]:shrink-0",
+        isActive && "text-brand-primary hover:text-brand-primary",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "skeleton",
+      className: cn("animate-pulse rounded-md bg-taupe-100", className),
+      ...props
+    }
+  );
+}
+var SliderRoot = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(
+  Slider.Root,
+  {
+    ref,
+    className: cn("relative flex w-full touch-none select-none items-center", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(Slider.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-taupe-100", children: /* @__PURE__ */ jsx(Slider.Range, { className: "absolute h-full bg-brand-primary" }) }),
+      /* @__PURE__ */ jsx(Slider.Thumb, { className: "block size-4 rounded-full border-2 border-brand-primary bg-white shadow-natural transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30 disabled:pointer-events-none disabled:opacity-50" })
+    ]
+  }
+));
+SliderRoot.displayName = "Slider";
+function Toaster({ ...props }) {
+  return /* @__PURE__ */ jsx(
+    Toaster$1,
+    {
+      theme: "light",
+      className: "toaster group",
+      toastOptions: {
+        classNames: {
+          toast: "group toast font-sans text-sm group-[.toaster]:bg-white group-[.toaster]:text-taupe-900 group-[.toaster]:border group-[.toaster]:border-taupe-100 group-[.toaster]:shadow-elevated group-[.toaster]:rounded-xl",
+          description: "group-[.toast]:text-taupe-500 group-[.toast]:text-xs",
+          actionButton: "group-[.toast]:bg-brand-primary group-[.toast]:text-white group-[.toast]:rounded-md group-[.toast]:text-xs group-[.toast]:font-medium",
+          cancelButton: "group-[.toast]:bg-taupe-100 group-[.toast]:text-taupe-600 group-[.toast]:rounded-md group-[.toast]:text-xs group-[.toast]:font-medium",
+          success: "group-[.toaster]:border-brand-secondary/40 group-[.toaster]:text-taupe-900",
+          error: "group-[.toaster]:bg-red-50 group-[.toaster]:text-red-700 group-[.toaster]:border-red-200",
+          warning: "group-[.toaster]:bg-yellow-50 group-[.toaster]:text-yellow-800 group-[.toaster]:border-yellow-200",
+          info: "group-[.toaster]:border-taupe-200"
+        }
+      },
+      ...props
+    }
+  );
+}
+var spinnerVariants = cva(
+  "inline-block animate-spin rounded-full border-2 border-current border-t-transparent",
+  {
+    variants: {
+      size: {
+        xs: "size-3",
+        sm: "size-4",
+        default: "size-5",
+        lg: "size-6",
+        xl: "size-8"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+function Spinner({ className, size, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "status",
+      "aria-label": "Loading",
+      className: cn(spinnerVariants({ size }), className),
+      ...props
+    }
+  );
+}
+function StackedList({ children, divided = true, bordered = true, className }) {
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      role: "list",
+      className: cn(
+        "overflow-hidden rounded-xl bg-white",
+        bordered && "border border-taupe-100 shadow-natural",
+        divided && "divide-y divide-taupe-100",
+        className
+      ),
+      children
+    }
+  );
+}
+function StackedListItem({ children, href, onClick, className }) {
+  const inner = /* @__PURE__ */ jsx("div", { className: cn("px-4 py-3.5", className), children });
+  if (href) {
+    return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", { href, className: "block hover:bg-taupe-50 transition-colors", children: inner }) });
+  }
+  if (onClick) {
+    return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "w-full text-left hover:bg-taupe-50 transition-colors",
+        onClick,
+        children: inner
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx("li", { children: inner });
+}
+function StatCard({ label, value, trend, icon, className }) {
+  const trendColor = {
+    up: "text-taupe-800 bg-brand-secondary/30 rounded-full px-2 py-0.5 w-fit",
+    down: "text-red-600",
+    neutral: "text-taupe-400"
+  };
+  const TrendIcon = {
+    up: TrendingUp,
+    down: TrendingDown,
+    neutral: Minus
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("rounded-xl border border-taupe-100 bg-white p-5", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsx("p", { className: "label text-taupe-400", children: label }),
+      icon && /* @__PURE__ */ jsx("div", { className: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-taupe-50 text-taupe-400", children: icon })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "heading-xl mt-2 text-taupe-900", children: value }),
+    trend && (() => {
+      const Icon = TrendIcon[trend.direction];
+      return /* @__PURE__ */ jsxs("div", { className: cn("mt-2 flex items-center gap-1", trendColor[trend.direction]), children: [
+        /* @__PURE__ */ jsx(Icon, { size: 12 }),
+        /* @__PURE__ */ jsx("span", { className: "caption font-medium", children: trend.value })
+      ] });
+    })()
+  ] });
+}
+function CirclesSteps({ steps, className }) {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Progress", className, children: /* @__PURE__ */ jsx("ol", { role: "list", className: "flex items-center", children: steps.map((step, i) => {
+    const isLast = i === steps.length - 1;
+    return /* @__PURE__ */ jsxs("li", { className: cn("relative", !isLast && "flex-1"), children: [
+      !isLast && /* @__PURE__ */ jsx("div", { className: "absolute top-4 left-8 -right-px h-0.5", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "h-full",
+            step.status === "complete" ? "bg-brand-primary" : "bg-taupe-200"
+          )
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: step.href ?? "#",
+          onClick: !step.href ? (e) => e.preventDefault() : void 0,
+          className: "group relative flex flex-col items-center gap-2",
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "relative z-10 flex size-8 items-center justify-center rounded-full transition-colors",
+                  step.status === "complete" && "bg-brand-primary group-hover:bg-brand-primary/80",
+                  step.status === "current" && "border-2 border-brand-primary bg-white",
+                  step.status === "upcoming" && "border-2 border-taupe-300 bg-white group-hover:border-taupe-400"
+                ),
+                children: step.status === "complete" ? /* @__PURE__ */ jsx(Check, { size: 14, className: "text-white", strokeWidth: 2.5 }) : step.status === "current" ? /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-brand-primary" }) : /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-transparent group-hover:bg-taupe-300" })
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "flex flex-col items-center", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "caption font-semibold",
+                    step.status === "upcoming" ? "text-taupe-400" : "text-taupe-900"
+                  ),
+                  children: step.name
+                }
+              ),
+              step.description && /* @__PURE__ */ jsx("span", { className: "caption text-taupe-400", children: step.description })
+            ] })
+          ]
+        }
+      )
+    ] }, step.id ?? i);
+  }) }) });
+}
+function BulletsSteps({ steps, className }) {
+  const currentIdx = steps.findIndex((s) => s.status === "current");
+  return /* @__PURE__ */ jsxs("nav", { className: cn("flex items-center gap-4", className), "aria-label": "Progress", children: [
+    /* @__PURE__ */ jsxs("p", { className: "body font-medium text-taupe-700", children: [
+      "Step ",
+      currentIdx + 1,
+      " of ",
+      steps.length
+    ] }),
+    /* @__PURE__ */ jsx("ol", { role: "list", className: "flex items-center gap-2", children: steps.map((step, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: step.href ?? "#",
+        onClick: !step.href ? (e) => e.preventDefault() : void 0,
+        className: "block",
+        children: step.status === "complete" ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "block size-2.5 rounded-full bg-brand-primary hover:bg-brand-primary/80 transition-colors",
+            title: step.name
+          }
+        ) : step.status === "current" ? /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "relative flex size-4 items-center justify-center",
+            "aria-current": "step",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "absolute size-4 rounded-full bg-brand-primary/20" }),
+              /* @__PURE__ */ jsx("span", { className: "relative size-2.5 rounded-full bg-brand-primary" }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: step.name })
+            ]
+          }
+        ) : /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "block size-2.5 rounded-full bg-taupe-200 hover:bg-taupe-300 transition-colors",
+            title: step.name
+          }
+        )
+      }
+    ) }, step.id ?? i)) })
+  ] });
+}
+function ProgressSteps({ steps, className }) {
+  const completeCount = steps.filter((s) => s.status === "complete").length;
+  const currentIdx = steps.findIndex((s) => s.status === "current");
+  const progress = (completeCount + (currentIdx >= 0 ? 0.5 : 0)) / steps.length * 100;
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "h-1.5 w-full overflow-hidden rounded-full bg-taupe-100", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "h-full rounded-full bg-brand-primary transition-all duration-500",
+        style: { width: `${progress}%` }
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "mt-4 grid", style: { gridTemplateColumns: `repeat(${steps.length}, 1fr)` }, children: steps.map((step, i) => {
+      const isLast = i === steps.length - 1;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "caption font-medium",
+            i === 0 ? "text-left" : isLast ? "text-right" : "text-center",
+            step.status === "upcoming" ? "text-taupe-400" : "text-taupe-900"
+          ),
+          children: step.name
+        },
+        step.id ?? i
+      );
+    }) })
+  ] });
+}
+function Steps({ steps, variant = "circles", className }) {
+  if (variant === "bullets") return /* @__PURE__ */ jsx(BulletsSteps, { steps, className });
+  if (variant === "progress") return /* @__PURE__ */ jsx(ProgressSteps, { steps, className });
+  return /* @__PURE__ */ jsx(CirclesSteps, { steps, className });
+}
+var SwitchRoot = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Switch.Root,
+  {
+    ref,
+    className: cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full",
+      "border-2 border-transparent transition-colors",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "data-[state=unchecked]:bg-taupe-200 data-[state=checked]:bg-brand-primary",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      Switch.Thumb,
+      {
+        className: cn(
+          "pointer-events-none block size-4 rounded-full bg-white shadow-natural",
+          "transition-transform data-[state=unchecked]:translate-x-0 data-[state=checked]:translate-x-4"
+        )
+      }
+    )
+  }
+));
+SwitchRoot.displayName = "Switch";
+var TabsRoot = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Tabs.Root, { ref, className: cn("w-full", className), ...props }));
+TabsRoot.displayName = "Tabs";
+var TabsList = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Tabs.List,
+  {
+    ref,
+    className: cn("inline-flex items-center gap-1 border-b border-taupe-100 w-full", className),
+    ...props
+  }
+));
+TabsList.displayName = "TabsList";
+var TabsTrigger = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Tabs.Trigger,
+  {
+    ref,
+    className: cn(
+      "px-0 pb-2.5 body font-medium text-taupe-400",
+      "border-b-2 border-transparent -mb-px",
+      "transition-colors cursor-pointer",
+      "data-[state=active]:text-brand-primary data-[state=active]:border-brand-primary",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/20",
+      "disabled:pointer-events-none disabled:opacity-50",
+      className
+    ),
+    ...props
+  }
+));
+TabsTrigger.displayName = "TabsTrigger";
+var TabsContent = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Tabs.Content, { ref, className: cn("mt-4", className), ...props }));
+TabsContent.displayName = "TabsContent";
+function Textarea({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      "data-slot": "textarea",
+      className: cn(
+        "flex min-h-[80px] w-full rounded-md border border-taupe-200 bg-white px-3 py-2",
+        "body text-taupe-900 placeholder:text-taupe-400",
+        "resize-none transition-colors duration-150",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-taupe-900/15 focus-visible:border-taupe-400",
+        "disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-taupe-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var toggleVariants = cva(
+  [
+    "inline-flex shrink-0 items-center justify-center gap-2",
+    "body font-medium whitespace-nowrap rounded-md",
+    "transition-all duration-150 outline-none",
+    "focus-visible:ring-2 focus-visible:ring-brand-primary/30 focus-visible:ring-offset-1",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+  ],
+  {
+    variants: {
+      variant: {
+        default: [
+          "bg-transparent text-taupe-600",
+          "hover:bg-taupe-100 hover:text-taupe-900",
+          "data-[state=on]:bg-taupe-100 data-[state=on]:text-taupe-900"
+        ],
+        outline: [
+          "border border-taupe-200 bg-white text-taupe-600 shadow-natural",
+          "hover:bg-taupe-50 hover:text-taupe-900",
+          "data-[state=on]:bg-taupe-100 data-[state=on]:text-taupe-900 data-[state=on]:border-taupe-300"
+        ],
+        brand: [
+          "bg-transparent text-taupe-600",
+          "hover:bg-taupe-100 hover:text-taupe-900",
+          "data-[state=on]:bg-brand-primary data-[state=on]:text-white"
+        ]
+      },
+      size: {
+        sm: "h-8 gap-1.5 px-3",
+        default: "h-9 px-3",
+        lg: "h-10 px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var ToggleRoot = React15.forwardRef(
+  ({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx(
+    Toggle.Root,
+    {
+      ref,
+      className: cn(toggleVariants({ variant, size }), className),
+      ...props
+    }
+  )
+);
+ToggleRoot.displayName = "Toggle";
+var ToggleGroupContext = React15.createContext({
+  size: "default",
+  variant: "default"
+});
+var ToggleGroupRoot = React15.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToggleGroup.Root,
+  {
+    ref,
+    className: cn("inline-flex items-center gap-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: { variant, size }, children })
+  }
+));
+ToggleGroupRoot.displayName = "ToggleGroup";
+var ToggleGroupItem = React15.forwardRef(({ className, variant, size, ...props }, ref) => {
+  const context = React15.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx(
+    ToggleGroup.Item,
+    {
+      ref,
+      className: cn(
+        toggleVariants({
+          variant: variant ?? context.variant,
+          size: size ?? context.size
+        }),
+        className
+      ),
+      ...props
+    }
+  );
+});
+ToggleGroupItem.displayName = "ToggleGroupItem";
+
+export { AccordionRoot as Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActionPanel, ActivityFeed, Alert, AlertDescription, AlertDialogRoot as AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatioRoot as AspectRatio, Avatar, AvatarFallback, AvatarImage, AvatarStack, AvatarWithStatus, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupItem, CHART_COLORS, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardHeading, CardMedia, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartTooltip, CheckboxRoot as Checkbox, CollapsibleRoot as Collapsible, CollapsibleContent, CollapsibleTrigger, ColorInput, ColorPicker, Combobox, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandPalette, CommandSeparator, CommandShortcut, ContextMenuRoot as ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DatePicker, DescriptionList, DialogRoot as Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger, DrawerRoot as Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenuRoot as DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, Field, GridList, GridListAccentCard, GridListCard, HoverCardRoot as HoverCard, HoverCardContent, HoverCardTrigger, Input, InputGroup, InputNumber, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, Label, MediaObject, MenubarRoot as Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavigationMenuRoot as NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Notification, PageHeading, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PopoverRoot as Popover, PopoverClose, PopoverContent, PopoverTrigger, ProgressRoot as Progress, PropertyRow, RadioCards, RadioGroupRoot as RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollAreaRoot as ScrollArea, SectionHeading, SelectRoot as Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator2 as Separator, SheetRoot as Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, SliderRoot as Slider, Spinner, StackedList, StackedListItem, StatCard, Steps, SwitchRoot as Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TabsRoot as Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, ToggleRoot as Toggle, ToggleGroupRoot as ToggleGroup, ToggleGroupItem, TooltipRoot as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cardVariants, cn, formatDate, navigationMenuTriggerStyle, spinnerVariants, toggleVariants, useSidebar };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map