@caqophony/ui 0.3.0 → 0.4.0

package/dist/index.js

@@ -1,226 +1,45 @@
 'use client';
 import {
-  MarkdownRenderer,
-  cn
-} from "./chunk-4YA6BZDJ.js";
-
-// src/button.tsx
-import { Slot } from "@radix-ui/react-slot";
-import { cva } from "class-variance-authority";
-import * as React from "react";
-
-// src/icon.tsx
+  MarkdownRenderer
+} from "./chunk-ODRGJV46.js";
 import {
-  ArrowLeft,
-  ArrowRight,
-  Bell,
-  Calendar,
-  Check,
-  ChevronDown,
-  ChevronLeft,
-  ChevronRight,
-  ChevronUp,
-  CircleAlert,
-  CircleCheck,
-  ClipboardList,
-  Clock,
-  Database,
-  Download,
-  Ellipsis,
-  ExternalLink,
-  Eye,
-  EyeOff,
-  FileText,
-  Filter,
-  Folder,
-  Heart,
-  House,
-  Inbox,
-  Info,
-  LayoutGrid,
-  Link,
-  List,
-  LoaderCircle,
-  Lock,
-  LogOut,
-  Mail,
-  MapPin,
-  Menu,
-  Package,
-  Pencil,
-  Phone,
-  Plus,
-  RefreshCw,
-  Rocket,
-  Search,
-  Settings,
-  Star,
-  Tag,
-  Trash2,
-  TriangleAlert,
-  Upload,
-  User,
-  Users,
-  X
-} from "lucide-react";
-import { jsx } from "react/jsx-runtime";
-var ICONS = {
-  "arrow-left": ArrowLeft,
-  "arrow-right": ArrowRight,
-  bell: Bell,
-  calendar: Calendar,
-  check: Check,
-  "chevron-down": ChevronDown,
-  "chevron-left": ChevronLeft,
-  "chevron-right": ChevronRight,
-  "chevron-up": ChevronUp,
-  "circle-alert": CircleAlert,
-  "circle-check": CircleCheck,
-  "clipboard-list": ClipboardList,
-  clock: Clock,
-  database: Database,
-  download: Download,
-  ellipsis: Ellipsis,
-  "external-link": ExternalLink,
-  eye: Eye,
-  "eye-off": EyeOff,
-  "file-text": FileText,
-  filter: Filter,
-  folder: Folder,
-  heart: Heart,
-  house: House,
-  inbox: Inbox,
-  info: Info,
-  "layout-grid": LayoutGrid,
-  link: Link,
-  list: List,
-  loader: LoaderCircle,
-  lock: Lock,
-  "log-out": LogOut,
-  mail: Mail,
-  "map-pin": MapPin,
-  menu: Menu,
-  package: Package,
-  pencil: Pencil,
-  phone: Phone,
-  plus: Plus,
-  "refresh-cw": RefreshCw,
-  rocket: Rocket,
-  search: Search,
-  settings: Settings,
-  star: Star,
-  tag: Tag,
-  trash: Trash2,
-  "triangle-alert": TriangleAlert,
-  upload: Upload,
-  user: User,
-  users: Users,
-  x: X
-};
-var ICON_SIZES = {
-  xs: "size-3",
-  sm: "size-4",
-  md: "size-5",
-  lg: "size-6",
-  xl: "size-8"
-};
-function Icon({ name, size, className }) {
-  const Glyph = ICONS[name];
-  return /* @__PURE__ */ jsx(Glyph, { className: cn(ICON_SIZES[size], className), "aria-hidden": "true" });
-}
-
-// src/spinner.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-function Spinner(props) {
-  const { size = "md", className } = props;
-  const glyph = /* @__PURE__ */ jsx2(Icon, { name: "loader", size, className: "animate-spin" });
-  if (props.decorative)
-    return /* @__PURE__ */ jsx2(
-      "span",
-      {
-        "aria-hidden": "true",
-        className: cn("inline-flex shrink-0 text-current", className),
-        children: glyph
-      }
-    );
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      role: "status",
-      className: cn("inline-flex shrink-0 text-current", className),
-      children: [
-        glyph,
-        /* @__PURE__ */ jsx2("span", { className: "sr-only", children: props.label })
-      ]
-    }
-  );
-}
-
-// src/button.tsx
-import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary-solid dark:bg-primary-solid text-primary-foreground dark:text-primary-foreground shadow hover:bg-primary-solid/90 dark:hover:bg-primary-solid/90",
-        destructive: "bg-intent-error-solid dark:bg-intent-error-solid text-intent-error-solid-fg dark:text-intent-error-solid-fg shadow-sm hover:bg-intent-error-solid/90 dark:hover:bg-intent-error-solid/90",
-        outline: "border border-border dark:border-border bg-background dark:bg-background text-foreground dark:text-foreground shadow-sm hover:bg-muted dark:hover:bg-muted hover:text-foreground dark:hover:text-foreground",
-        secondary: "bg-muted dark:bg-muted text-muted-foreground dark:text-muted-foreground shadow-sm hover:bg-muted/80 dark:hover:bg-muted/80",
-        ghost: "hover:bg-muted dark:hover:bg-muted hover:text-foreground dark:hover:text-foreground",
-        link: "text-primary-text dark:text-primary-text underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "size-10"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-var Button = React.forwardRef(
-  ({
-    className,
-    variant,
-    size,
-    asChild = false,
-    loading = false,
-    loadingText,
-    children,
-    disabled,
-    ...props
-  }, ref) => {
-    const Comp = asChild && !loading ? Slot : "button";
-    const isDisabled = disabled || loading;
-    return /* @__PURE__ */ jsx3(
-      Comp,
-      {
-        className: cn(buttonVariants({ variant, size, className })),
-        ref,
-        disabled: isDisabled,
-        "aria-busy": loading,
-        ...props,
-        children: loading ? /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsx3(Spinner, { decorative: true, size: "sm" }),
-          /* @__PURE__ */ jsx3("span", { children: loadingText || children })
-        ] }) : children
-      }
-    );
-  }
-);
-Button.displayName = "Button";
+  Button,
+  CONTENT_GUTTER,
+  Container,
+  NavDrawer,
+  NavbarMenu,
+  Spinner,
+  buttonVariants,
+  useModalSurface,
+  usePanelRef
+} from "./chunk-PKP3ZIRB.js";
+import {
+  Alert,
+  EMPTY_VALUE_GLYPH,
+  EmptyValue,
+  INTENT_SUBTLE_STYLES,
+  IntentBadge,
+  isEmptyValue
+} from "./chunk-Y6LCXEXZ.js";
+import {
+  ICONS,
+  ICON_SIZES,
+  Icon,
+  SCROLL_HINT_X,
+  SCROLL_HINT_Y,
+  SCROLL_HINT_Y_MARK,
+  ScrollHintXMark
+} from "./chunk-BAW3RIMF.js";
+import {
+  cn
+} from "./chunk-DP5WQAPO.js";
 
 // src/input.tsx
-import * as React2 from "react";
+import * as React from "react";
 
 // src/field.ts
-import { cva as cva2 } from "class-variance-authority";
-var fieldVariants = cva2(
+import { cva } from "class-variance-authority";
+var fieldVariants = cva(
   "w-full min-w-0 rounded-md border bg-background text-foreground ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
@@ -250,10 +69,10 @@ function fieldAria(error, errorMessageId) {
 }
 
 // src/input.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-var Input = React2.forwardRef(
+import { jsx } from "react/jsx-runtime";
+var Input = React.forwardRef(
   ({ className, type, error, errorMessageId, size = "md", ...props }, ref) => {
-    return /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsx(
       "input",
       {
         type,
@@ -274,9 +93,9 @@ var Input = React2.forwardRef(
 Input.displayName = "Input";
 
 // src/card.tsx
-import * as React3 from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var Card = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+import * as React2 from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Card = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
   "div",
   {
     ref,
@@ -290,7 +109,7 @@ var Card = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ j
   }
 ));
 Card.displayName = "Card";
-var CardHeader = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+var CardHeader = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
   "div",
   {
     ref,
@@ -299,7 +118,7 @@ var CardHeader = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+var CardTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
   "h3",
   {
     ref,
@@ -311,7 +130,7 @@ var CardTitle = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+var CardDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
   "p",
   {
     ref,
@@ -320,9 +139,9 @@ var CardDescription = React3.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 CardDescription.displayName = "CardDescription";
-var CardContent = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+var CardContent = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2("div", { ref, className: cn("p-6 pt-0", className), ...props }));
 CardContent.displayName = "CardContent";
-var CardFooter = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
+var CardFooter = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
   "div",
   {
     ref,
@@ -334,12 +153,12 @@ CardFooter.displayName = "CardFooter";
 
 // src/switch.tsx
 import * as SwitchPrimitives from "@radix-ui/react-switch";
-import * as React4 from "react";
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
-var Switch = React4.forwardRef(({ className, label, description, id, ...props }, ref) => {
-  const generatedId = React4.useId();
+import * as React3 from "react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var Switch = React3.forwardRef(({ className, label, description, id, ...props }, ref) => {
+  const generatedId = React3.useId();
   const switchId = id || generatedId;
-  const switchElement = /* @__PURE__ */ jsx6(
+  const switchElement = /* @__PURE__ */ jsx3(
     SwitchPrimitives.Root,
     {
       className: cn(
@@ -353,7 +172,7 @@ var Switch = React4.forwardRef(({ className, label, description, id, ...props },
       id: switchId,
       ref,
       ...props,
-      children: /* @__PURE__ */ jsx6(
+      children: /* @__PURE__ */ jsx3(
         SwitchPrimitives.Thumb,
         {
           className: cn(
@@ -368,10 +187,10 @@ var Switch = React4.forwardRef(({ className, label, description, id, ...props },
   if (!label) {
     return switchElement;
   }
-  return /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
     switchElement,
-    /* @__PURE__ */ jsxs3("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsx3(
         "label",
         {
           htmlFor: switchId,
@@ -379,26 +198,26 @@ var Switch = React4.forwardRef(({ className, label, description, id, ...props },
           children: label
         }
       ),
-      description && /* @__PURE__ */ jsx6("span", { className: "text-xs text-muted-foreground dark:text-muted-foreground", children: description })
+      description && /* @__PURE__ */ jsx3("span", { className: "text-xs text-muted-foreground dark:text-muted-foreground", children: description })
     ] })
   ] });
 });
 Switch.displayName = "Switch";
 
 // src/tooltip.tsx
-import * as React5 from "react";
+import * as React4 from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React5.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx7(
+var TooltipContent = React4.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx4(
   TooltipPrimitive.Content,
   {
     ref,
     sideOffset,
     className: cn(
-      "z-50 overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-tooltip overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     ...props
@@ -407,9 +226,9 @@ var TooltipContent = React5.forwardRef(({ className, sideOffset = 4, ...props },
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 // src/label.tsx
-import * as React6 from "react";
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
-var Label = React6.forwardRef(
+import * as React5 from "react";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var Label = React5.forwardRef(
   ({
     className,
     required = false,
@@ -419,7 +238,7 @@ var Label = React6.forwardRef(
     size = "md",
     children,
     ...props
-  }, ref) => /* @__PURE__ */ jsxs4(
+  }, ref) => /* @__PURE__ */ jsxs2(
     "label",
     {
       ref,
@@ -433,8 +252,8 @@ var Label = React6.forwardRef(
       ...props,
       children: [
         children,
-        required && /* @__PURE__ */ jsx8("span", { className: "text-intent-error-foreground ml-1", "aria-hidden": "true", children: "*" }),
-        optional && /* @__PURE__ */ jsx8("span", { className: "ml-1 font-normal text-muted-foreground", children: "(optional)" })
+        required && /* @__PURE__ */ jsx5("span", { className: "text-intent-error-foreground ml-1", "aria-hidden": "true", children: "*" }),
+        optional && /* @__PURE__ */ jsx5("span", { className: "ml-1 font-normal text-muted-foreground", children: "(optional)" })
       ]
     }
   )
@@ -442,7 +261,7 @@ var Label = React6.forwardRef(
 Label.displayName = "Label";
 
 // src/form-field.tsx
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 function FormField({
   label,
   name,
@@ -454,7 +273,7 @@ function FormField({
   className
 }) {
   const hasError = Boolean(error);
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       "aria-disabled": disabled || void 0,
@@ -464,9 +283,9 @@ function FormField({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx9(Label, { htmlFor: name, required, error: hasError, children: label }),
-        description && !hasError && /* @__PURE__ */ jsx9("p", { className: "text-xs text-muted-foreground dark:text-muted-foreground", children: description }),
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx6(Label, { htmlFor: name, required, error: hasError, children: label }),
+        description && !hasError && /* @__PURE__ */ jsx6("p", { className: "text-xs text-muted-foreground dark:text-muted-foreground", children: description }),
+        /* @__PURE__ */ jsx6(
           "div",
           {
             className: cn(
@@ -478,15 +297,15 @@ function FormField({
             children
           }
         ),
-        hasError && /* @__PURE__ */ jsxs5(
+        hasError && /* @__PURE__ */ jsxs3(
           "p",
           {
             className: "text-intent-error-foreground dark:text-intent-error-foreground flex items-center gap-1 text-sm",
             role: "alert",
             "aria-live": "polite",
             children: [
-              /* @__PURE__ */ jsx9(ErrorIcon, { className: "size-4 shrink-0" }),
-              /* @__PURE__ */ jsx9("span", { children: error })
+              /* @__PURE__ */ jsx6(ErrorIcon, { className: "size-4 shrink-0" }),
+              /* @__PURE__ */ jsx6("span", { children: error })
             ]
           }
         )
@@ -495,7 +314,7 @@ function FormField({
   );
 }
 function ErrorIcon({ className }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx6(
     "svg",
     {
       className,
@@ -503,7 +322,7 @@ function ErrorIcon({ className }) {
       viewBox: "0 0 24 24",
       stroke: "currentColor",
       strokeWidth: 2,
-      children: /* @__PURE__ */ jsx9(
+      children: /* @__PURE__ */ jsx6(
         "path",
         {
           strokeLinecap: "round",
@@ -515,7 +334,7 @@ function ErrorIcon({ className }) {
   );
 }
 function FormFieldGroup({ children, className }) {
-  return /* @__PURE__ */ jsx9("div", { className: cn("grid gap-4", "grid-cols-1 sm:grid-cols-2", className), children });
+  return /* @__PURE__ */ jsx6("div", { className: cn("grid gap-4", "grid-cols-1 sm:grid-cols-2", className), children });
 }
 function FormSection({
   title,
@@ -523,17 +342,17 @@ function FormSection({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsxs5("fieldset", { className: cn("space-y-4", className), children: [
-    (title || description) && /* @__PURE__ */ jsxs5("div", { className: "space-y-1", children: [
-      title && /* @__PURE__ */ jsx9("legend", { className: "text-base font-medium text-foreground dark:text-foreground", children: title }),
-      description && /* @__PURE__ */ jsx9("p", { className: "text-sm text-muted-foreground dark:text-muted-foreground", children: description })
+  return /* @__PURE__ */ jsxs3("fieldset", { className: cn("space-y-4", className), children: [
+    (title || description) && /* @__PURE__ */ jsxs3("div", { className: "space-y-1", children: [
+      title && /* @__PURE__ */ jsx6("legend", { className: "text-base font-medium text-foreground dark:text-foreground", children: title }),
+      description && /* @__PURE__ */ jsx6("p", { className: "text-sm text-muted-foreground dark:text-muted-foreground", children: description })
     ] }),
-    /* @__PURE__ */ jsx9("div", { className: "space-y-4", children })
+    /* @__PURE__ */ jsx6("div", { className: "space-y-4", children })
   ] });
 }
 function FormError({ error, className }) {
   if (!error) return null;
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       className: cn(
@@ -542,16 +361,16 @@ function FormError({ error, className }) {
         className
       ),
       role: "alert",
-      children: /* @__PURE__ */ jsxs5("div", { className: "flex gap-3", children: [
-        /* @__PURE__ */ jsx9(ErrorIcon, { className: "text-intent-error dark:text-intent-error size-5 shrink-0" }),
-        /* @__PURE__ */ jsx9("p", { className: "text-intent-error-foreground dark:text-intent-error-foreground text-sm", children: error })
+      children: /* @__PURE__ */ jsxs3("div", { className: "flex gap-3", children: [
+        /* @__PURE__ */ jsx6(ErrorIcon, { className: "text-intent-error dark:text-intent-error size-5 shrink-0" }),
+        /* @__PURE__ */ jsx6("p", { className: "text-intent-error-foreground dark:text-intent-error-foreground text-sm", children: error })
       ] })
     }
   );
 }
 function FormSuccess({ message, className }) {
   if (!message) return null;
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       className: cn(
@@ -560,15 +379,15 @@ function FormSuccess({ message, className }) {
         className
       ),
       role: "status",
-      children: /* @__PURE__ */ jsxs5("div", { className: "flex gap-3", children: [
-        /* @__PURE__ */ jsx9(SuccessIcon, { className: "text-intent-success dark:text-intent-success size-5 shrink-0" }),
-        /* @__PURE__ */ jsx9("p", { className: "text-intent-success-foreground dark:text-intent-success-foreground text-sm", children: message })
+      children: /* @__PURE__ */ jsxs3("div", { className: "flex gap-3", children: [
+        /* @__PURE__ */ jsx6(SuccessIcon, { className: "text-intent-success dark:text-intent-success size-5 shrink-0" }),
+        /* @__PURE__ */ jsx6("p", { className: "text-intent-success-foreground dark:text-intent-success-foreground text-sm", children: message })
       ] })
     }
   );
 }
 function SuccessIcon({ className }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx6(
     "svg",
     {
       className,
@@ -576,7 +395,7 @@ function SuccessIcon({ className }) {
       viewBox: "0 0 24 24",
       stroke: "currentColor",
       strokeWidth: 2,
-      children: /* @__PURE__ */ jsx9(
+      children: /* @__PURE__ */ jsx6(
         "path",
         {
           strokeLinecap: "round",
@@ -589,7 +408,7 @@ function SuccessIcon({ className }) {
 }
 
 // src/global-error-content.tsx
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 function GlobalErrorContent({
   error,
   reset,
@@ -605,7 +424,7 @@ function GlobalErrorContent({
       window.location.href = "/";
     }
   };
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       style: {
@@ -619,7 +438,7 @@ function GlobalErrorContent({
         // gossamer-ignore
         fontFamily: "system-ui, sans-serif"
       },
-      children: /* @__PURE__ */ jsxs6(
+      children: /* @__PURE__ */ jsxs4(
         "div",
         {
           style: {
@@ -628,7 +447,7 @@ function GlobalErrorContent({
             textAlign: "center"
           },
           children: [
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx7(
               "div",
               {
                 style: {
@@ -642,7 +461,7 @@ function GlobalErrorContent({
                   alignItems: "center",
                   justifyContent: "center"
                 },
-                children: /* @__PURE__ */ jsxs6(
+                children: /* @__PURE__ */ jsxs4(
                   "svg",
                   {
                     width: "32",
@@ -654,15 +473,15 @@ function GlobalErrorContent({
                     strokeLinecap: "round",
                     strokeLinejoin: "round",
                     children: [
-                      /* @__PURE__ */ jsx10("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
-                      /* @__PURE__ */ jsx10("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
-                      /* @__PURE__ */ jsx10("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+                      /* @__PURE__ */ jsx7("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
+                      /* @__PURE__ */ jsx7("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+                      /* @__PURE__ */ jsx7("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
                     ]
                   }
                 )
               }
             ),
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx7(
               "h1",
               {
                 style: {
@@ -675,7 +494,7 @@ function GlobalErrorContent({
                 children: "Critical Application Error"
               }
             ),
-            /* @__PURE__ */ jsxs6(
+            /* @__PURE__ */ jsxs4(
               "p",
               {
                 style: {
@@ -691,7 +510,7 @@ function GlobalErrorContent({
                 ]
               }
             ),
-            error.digest && /* @__PURE__ */ jsxs6(
+            error.digest && /* @__PURE__ */ jsxs4(
               "div",
               {
                 style: {
@@ -702,7 +521,7 @@ function GlobalErrorContent({
                   marginBottom: "1.5rem"
                 },
                 children: [
-                  /* @__PURE__ */ jsx10(
+                  /* @__PURE__ */ jsx7(
                     "p",
                     {
                       style: {
@@ -714,7 +533,7 @@ function GlobalErrorContent({
                       children: "Error Reference"
                     }
                   ),
-                  /* @__PURE__ */ jsx10(
+                  /* @__PURE__ */ jsx7(
                     "code",
                     {
                       style: {
@@ -729,7 +548,7 @@ function GlobalErrorContent({
                 ]
               }
             ),
-            customActions ?? /* @__PURE__ */ jsxs6(
+            customActions ?? /* @__PURE__ */ jsxs4(
               "div",
               {
                 style: {
@@ -738,7 +557,7 @@ function GlobalErrorContent({
                   gap: "0.75rem"
                 },
                 children: [
-                  /* @__PURE__ */ jsxs6(
+                  /* @__PURE__ */ jsxs4(
                     "button",
                     {
                       onClick: handleRetry,
@@ -759,7 +578,7 @@ function GlobalErrorContent({
                         gap: "0.5rem"
                       },
                       children: [
-                        /* @__PURE__ */ jsx10(
+                        /* @__PURE__ */ jsx7(
                           "svg",
                           {
                             width: "16",
@@ -768,14 +587,14 @@ function GlobalErrorContent({
                             fill: "none",
                             stroke: "currentColor",
                             strokeWidth: "2",
-                            children: /* @__PURE__ */ jsx10("path", { d: "M23 4v6h-6M1 20v-6h6M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15" })
+                            children: /* @__PURE__ */ jsx7("path", { d: "M23 4v6h-6M1 20v-6h6M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15" })
                           }
                         ),
                         "Try Again"
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsxs6(
+                  /* @__PURE__ */ jsxs4(
                     "button",
                     {
                       onClick: handleGoHome,
@@ -797,7 +616,7 @@ function GlobalErrorContent({
                         gap: "0.5rem"
                       },
                       children: [
-                        /* @__PURE__ */ jsxs6(
+                        /* @__PURE__ */ jsxs4(
                           "svg",
                           {
                             width: "16",
@@ -807,8 +626,8 @@ function GlobalErrorContent({
                             stroke: "currentColor",
                             strokeWidth: "2",
                             children: [
-                              /* @__PURE__ */ jsx10("path", { d: "M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" }),
-                              /* @__PURE__ */ jsx10("polyline", { points: "9,22 9,12 15,12 15,22" })
+                              /* @__PURE__ */ jsx7("path", { d: "M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" }),
+                              /* @__PURE__ */ jsx7("polyline", { points: "9,22 9,12 15,12 15,22" })
                             ]
                           }
                         ),
@@ -819,7 +638,7 @@ function GlobalErrorContent({
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs6(
+            /* @__PURE__ */ jsxs4(
               "p",
               {
                 style: {
@@ -831,7 +650,7 @@ function GlobalErrorContent({
                 children: [
                   "If this problem persists, please",
                   " ",
-                  supportEmail ? /* @__PURE__ */ jsx10(
+                  supportEmail ? /* @__PURE__ */ jsx7(
                     "a",
                     {
                       href: `mailto:${supportEmail}`,
@@ -852,96 +671,14 @@ function GlobalErrorContent({
 
 // src/collapsible-sidebar.tsx
 import {
-  useState as useState2,
-  useEffect as useEffect2,
+  useState,
+  useEffect,
   useCallback,
   createContext,
   useContext
 } from "react";
-import { ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight2 } from "lucide-react";
-
-// src/nav-drawer.tsx
-import * as React7 from "react";
-import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
-function NavDrawer({
-  label,
-  side,
-  defaultOpen,
-  children
-}) {
-  const [open, setOpen] = React7.useState(defaultOpen);
-  const id = React7.useId();
-  React7.useEffect(() => {
-    if (!open) return;
-    const onKey = (e) => {
-      if (e.key === "Escape") setOpen(false);
-    };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [open]);
-  const left = side === "left";
-  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
-    /* @__PURE__ */ jsx11(
-      Button,
-      {
-        variant: "ghost",
-        size: "icon",
-        "aria-label": label,
-        "aria-expanded": open,
-        "aria-controls": open ? id : void 0,
-        onClick: () => setOpen(!open),
-        children: /* @__PURE__ */ jsx11(Icon, { name: "menu", size: "sm" })
-      }
-    ),
-    open && /* @__PURE__ */ jsxs7("div", { className: "z-overlay fixed inset-0", children: [
-      /* @__PURE__ */ jsx11(
-        "div",
-        {
-          "aria-hidden": "true",
-          className: "absolute inset-0 bg-foreground/40",
-          onClick: () => setOpen(false)
-        }
-      ),
-      /* @__PURE__ */ jsxs7(
-        "aside",
-        {
-          id,
-          "aria-label": label,
-          className: cn(
-            "absolute inset-y-0 flex w-72 max-w-[calc(100%-3rem)] flex-col overflow-y-auto bg-card shadow-lg",
-            left ? "left-0 border-r" : "right-0 border-l",
-            "border-border"
-          ),
-          children: [
-            /* @__PURE__ */ jsx11(
-              "div",
-              {
-                className: cn(
-                  "flex px-2 py-2",
-                  left ? "justify-end" : "justify-start"
-                ),
-                children: /* @__PURE__ */ jsx11(
-                  Button,
-                  {
-                    variant: "ghost",
-                    size: "icon",
-                    "aria-label": "Close",
-                    onClick: () => setOpen(false),
-                    children: /* @__PURE__ */ jsx11(Icon, { name: "x", size: "sm" })
-                  }
-                )
-              }
-            ),
-            children
-          ]
-        }
-      )
-    ] })
-  ] });
-}
-
-// src/collapsible-sidebar.tsx
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var SidebarContext = createContext(null);
 function useSidebar() {
   const context = useContext(SidebarContext);
@@ -956,7 +693,7 @@ var DefaultLink = ({
   href,
   className,
   children
-}) => /* @__PURE__ */ jsx12("a", { href: String(href), className, children });
+}) => /* @__PURE__ */ jsx8("a", { href: String(href), className, children });
 function CollapsibleSidebar({
   storageKey = "sidebar-collapsed",
   defaultCollapsed = false,
@@ -973,8 +710,8 @@ function CollapsibleSidebar({
   navLabel = "Navigation",
   defaultNavOpen = false
 }) {
-  const [isCollapsed, setIsCollapsed] = useState2(defaultCollapsed);
-  useEffect2(() => {
+  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
+  useEffect(() => {
     const stored = localStorage.getItem(storageKey);
     if (stored !== null) {
       setIsCollapsed(stored === "true");
@@ -990,7 +727,7 @@ function CollapsibleSidebar({
   const renderItem = (item, collapsed) => {
     const Icon2 = item.icon;
     const active = isActive?.(item.href) ?? false;
-    const linkContent = /* @__PURE__ */ jsxs8(
+    const linkContent = /* @__PURE__ */ jsxs5(
       LinkComponent,
       {
         href: item.href,
@@ -1000,10 +737,10 @@ function CollapsibleSidebar({
           active ? "bg-primary-solid text-primary-foreground" : "text-muted-foreground hover:bg-muted hover:text-foreground"
         ),
         children: [
-          /* @__PURE__ */ jsx12(Icon2, { className: cn("size-5 shrink-0", collapsed && "size-5") }),
-          !collapsed && /* @__PURE__ */ jsxs8("div", { className: "min-w-0 flex-1 overflow-hidden", children: [
-            /* @__PURE__ */ jsx12("div", { className: "truncate text-sm font-medium", children: item.name }),
-            item.description && /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx8(Icon2, { className: cn("size-5 shrink-0", collapsed && "size-5") }),
+          !collapsed && /* @__PURE__ */ jsxs5("div", { className: "min-w-0 flex-1 overflow-hidden", children: [
+            /* @__PURE__ */ jsx8("div", { className: "truncate text-sm font-medium", children: item.name }),
+            item.description && /* @__PURE__ */ jsx8(
               "div",
               {
                 className: cn(
@@ -1020,32 +757,41 @@ function CollapsibleSidebar({
       }
     );
     if (collapsed) {
-      return /* @__PURE__ */ jsxs8(Tooltip, { children: [
-        /* @__PURE__ */ jsx12(TooltipTrigger, { asChild: true, children: linkContent }),
-        /* @__PURE__ */ jsxs8(TooltipContent, { side: "right", className: "flex flex-col", children: [
-          /* @__PURE__ */ jsx12("span", { className: "font-medium", children: item.name }),
-          item.description && /* @__PURE__ */ jsx12("span", { className: "text-xs text-muted-foreground", children: item.description })
+      return /* @__PURE__ */ jsxs5(Tooltip, { children: [
+        /* @__PURE__ */ jsx8(TooltipTrigger, { asChild: true, children: linkContent }),
+        /* @__PURE__ */ jsxs5(TooltipContent, { side: "right", className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx8("span", { className: "font-medium", children: item.name }),
+          item.description && /* @__PURE__ */ jsx8("span", { className: "text-xs text-muted-foreground", children: item.description })
         ] })
       ] }, item.href);
     }
-    return /* @__PURE__ */ jsx12("div", { children: linkContent }, item.href);
+    return /* @__PURE__ */ jsx8("div", { children: linkContent }, item.href);
   };
-  return /* @__PURE__ */ jsx12(SidebarContext.Provider, { value: { isCollapsed, toggle }, children: /* @__PURE__ */ jsxs8(TooltipProvider, { delayDuration: 100, children: [
-    /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx8(SidebarContext.Provider, { value: { isCollapsed, toggle }, children: /* @__PURE__ */ jsxs5(TooltipProvider, { delayDuration: 100, children: [
+    /* @__PURE__ */ jsx8(
       "div",
       {
         className: cn(
           "flex min-h-screen w-14 flex-shrink-0 flex-col items-center border-r border-border bg-card py-2 lg:hidden",
           className
         ),
-        children: /* @__PURE__ */ jsxs8(NavDrawer, { label: navLabel, side: "left", defaultOpen: defaultNavOpen, children: [
-          header && /* @__PURE__ */ jsx12("div", { className: "border-b border-border px-4 pb-4", children: header }),
-          /* @__PURE__ */ jsx12("div", { className: "flex-1 space-y-1 p-2", children: items.map((item) => renderItem(item, false)) }),
-          footer && /* @__PURE__ */ jsx12("div", { className: "mt-auto border-t border-border p-2", children: footer })
-        ] })
+        children: /* @__PURE__ */ jsxs5(
+          NavDrawer,
+          {
+            label: navLabel,
+            side: "left",
+            closedFrom: "lg",
+            defaultOpen: defaultNavOpen,
+            children: [
+              header && /* @__PURE__ */ jsx8("div", { className: "border-b border-border px-4 pb-4", children: header }),
+              /* @__PURE__ */ jsx8("div", { className: "flex-1 space-y-1 p-2", children: items.map((item) => renderItem(item, false)) }),
+              footer && /* @__PURE__ */ jsx8("div", { className: "mt-auto border-t border-border p-2", children: footer })
+            ]
+          }
+        )
       }
     ),
-    /* @__PURE__ */ jsxs8(
+    /* @__PURE__ */ jsxs5(
       "nav",
       {
         className: cn(
@@ -1054,7 +800,7 @@ function CollapsibleSidebar({
         ),
         style: { width: isCollapsed ? collapsedWidth : expandedWidth },
         children: [
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx8(
             "button",
             {
               onClick: toggle,
@@ -1062,10 +808,10 @@ function CollapsibleSidebar({
                 "absolute -right-3 top-6 z-10 flex size-6 items-center justify-center rounded-full border border-border bg-card shadow-sm transition-colors hover:bg-muted"
               ),
               "aria-label": isCollapsed ? "Expand sidebar" : "Collapse sidebar",
-              children: isCollapsed ? /* @__PURE__ */ jsx12(ChevronRight2, { className: "size-4" }) : /* @__PURE__ */ jsx12(ChevronLeft2, { className: "size-4" })
+              children: isCollapsed ? /* @__PURE__ */ jsx8(ChevronRight, { className: "size-4" }) : /* @__PURE__ */ jsx8(ChevronLeft, { className: "size-4" })
             }
           ),
-          (header || collapsedHeader) && /* @__PURE__ */ jsx12(
+          (header || collapsedHeader) && /* @__PURE__ */ jsx8(
             "div",
             {
               className: cn(
@@ -1075,8 +821,8 @@ function CollapsibleSidebar({
               children: isCollapsed ? collapsedHeader || null : header
             }
           ),
-          /* @__PURE__ */ jsx12("div", { className: "flex-1 space-y-1 overflow-y-auto p-2", children: items.map((item) => renderItem(item, isCollapsed)) }),
-          (footer || collapsedFooter) && /* @__PURE__ */ jsx12("div", { className: "mt-auto border-t border-border p-2", children: isCollapsed ? collapsedFooter || null : footer })
+          /* @__PURE__ */ jsx8("div", { className: "flex-1 space-y-1 overflow-y-auto p-2", children: items.map((item) => renderItem(item, isCollapsed)) }),
+          (footer || collapsedFooter) && /* @__PURE__ */ jsx8("div", { className: "mt-auto border-t border-border p-2", children: isCollapsed ? collapsedFooter || null : footer })
         ]
       }
     )
@@ -1084,9 +830,9 @@ function CollapsibleSidebar({
 }
 
 // src/accordion.tsx
-import { createContext as createContext2, useContext as useContext2, useState as useState3, useCallback as useCallback2, useId as useId3 } from "react";
-import { ChevronDown as ChevronDown2 } from "lucide-react";
-import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+import { createContext as createContext2, useContext as useContext2, useState as useState2, useCallback as useCallback2, useId as useId2 } from "react";
+import { ChevronDown } from "lucide-react";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var AccordionContext = createContext2(null);
 var AccordionItemContext = createContext2(
   null
@@ -1115,7 +861,7 @@ function AccordionSingle({
   children,
   className
 }) {
-  const [uncontrolledValue, setUncontrolledValue] = useState3(defaultValue);
+  const [uncontrolledValue, setUncontrolledValue] = useState2(defaultValue);
   const isControlled = controlledValue !== void 0;
   const value = isControlled ? controlledValue : uncontrolledValue;
   const handleValueChange = useCallback2(
@@ -1128,7 +874,7 @@ function AccordionSingle({
     },
     [value, collapsible, isControlled, onValueChange]
   );
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx9(
     AccordionContext.Provider,
     {
       value: {
@@ -1136,7 +882,7 @@ function AccordionSingle({
         value,
         onValueChange: handleValueChange
       },
-      children: /* @__PURE__ */ jsx13("div", { className: cn("space-y-2", className), "data-accordion-root": "", children })
+      children: /* @__PURE__ */ jsx9("div", { className: cn("space-y-2", className), "data-accordion-root": "", children })
     }
   );
 }
@@ -1147,7 +893,7 @@ function AccordionMultiple({
   children,
   className
 }) {
-  const [uncontrolledValue, setUncontrolledValue] = useState3(defaultValue);
+  const [uncontrolledValue, setUncontrolledValue] = useState2(defaultValue);
   const isControlled = controlledValue !== void 0;
   const value = isControlled ? controlledValue : uncontrolledValue;
   const handleValueChange = useCallback2(
@@ -1160,7 +906,7 @@ function AccordionMultiple({
     },
     [value, isControlled, onValueChange]
   );
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx9(
     AccordionContext.Provider,
     {
       value: {
@@ -1168,15 +914,15 @@ function AccordionMultiple({
         value,
         onValueChange: handleValueChange
       },
-      children: /* @__PURE__ */ jsx13("div", { className: cn("space-y-2", className), "data-accordion-root": "", children })
+      children: /* @__PURE__ */ jsx9("div", { className: cn("space-y-2", className), "data-accordion-root": "", children })
     }
   );
 }
 function Accordion(props) {
   if (props.type === "multiple") {
-    return /* @__PURE__ */ jsx13(AccordionMultiple, { ...props });
+    return /* @__PURE__ */ jsx9(AccordionMultiple, { ...props });
   }
-  return /* @__PURE__ */ jsx13(AccordionSingle, { ...props });
+  return /* @__PURE__ */ jsx9(AccordionSingle, { ...props });
 }
 function AccordionItem({
   value,
@@ -1186,15 +932,15 @@ function AccordionItem({
   testId
 }) {
   const { value: accordionValue, type } = useAccordion();
-  const uniqueId = useId3();
+  const uniqueId = useId2();
   const triggerId = `accordion-trigger-${uniqueId}`;
   const contentId = `accordion-content-${uniqueId}`;
   const isOpen = type === "single" ? accordionValue === value : accordionValue.includes(value);
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx9(
     AccordionItemContext.Provider,
     {
       value: { value, isOpen, triggerId, contentId, disabled },
-      children: /* @__PURE__ */ jsx13(
+      children: /* @__PURE__ */ jsx9(
         "div",
         {
           className: cn(
@@ -1220,7 +966,7 @@ function AccordionTrigger({
 }) {
   const { onValueChange } = useAccordion();
   const { value, isOpen, triggerId, contentId, disabled } = useAccordionItem();
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs6(
     "button",
     {
       id: triggerId,
@@ -1239,14 +985,14 @@ function AccordionTrigger({
       "data-state": isOpen ? "open" : "closed",
       "data-testid": testId,
       children: [
-        /* @__PURE__ */ jsxs9("span", { className: "flex items-center gap-3", children: [
-          icon && /* @__PURE__ */ jsx13("span", { className: "shrink-0", children: icon }),
-          /* @__PURE__ */ jsx13("span", { children })
+        /* @__PURE__ */ jsxs6("span", { className: "flex items-center gap-3", children: [
+          icon && /* @__PURE__ */ jsx9("span", { className: "shrink-0", children: icon }),
+          /* @__PURE__ */ jsx9("span", { children })
         ] }),
-        /* @__PURE__ */ jsxs9("span", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs6("span", { className: "flex items-center gap-2", children: [
           rightContent,
-          /* @__PURE__ */ jsx13(
-            ChevronDown2,
+          /* @__PURE__ */ jsx9(
+            ChevronDown,
             {
               className: cn(
                 "size-5 shrink-0 text-muted-foreground transition-transform duration-300 [transition-timing-function:cubic-bezier(0.32,0.72,0,1)]",
@@ -1266,7 +1012,7 @@ function AccordionContent({
   testId
 }) {
   const { isOpen, contentId, triggerId } = useAccordionItem();
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx9(
     "div",
     {
       id: contentId,
@@ -1280,7 +1026,7 @@ function AccordionContent({
         "grid transition-all duration-300 [transition-timing-function:cubic-bezier(0.32,0.72,0,1)]",
         isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
       ),
-      children: /* @__PURE__ */ jsx13("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx13("div", { className: cn("px-4 pb-4", className), children }) })
+      children: /* @__PURE__ */ jsx9("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx9("div", { className: cn("px-4 pb-4", className), children }) })
     }
   );
 }
@@ -1298,10 +1044,10 @@ function SimpleAccordion({
   triggerTestId,
   contentTestId
 }) {
-  const [uncontrolledOpen, setUncontrolledOpen] = useState3(defaultOpen);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState2(defaultOpen);
   const isControlled = controlledOpen !== void 0;
   const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
-  const uniqueId = useId3();
+  const uniqueId = useId2();
   const triggerId = `simple-accordion-trigger-${uniqueId}`;
   const contentId = `simple-accordion-content-${uniqueId}`;
   const toggle = useCallback2(() => {
@@ -1311,7 +1057,7 @@ function SimpleAccordion({
     }
     onOpenChange?.(newValue);
   }, [isOpen, isControlled, onOpenChange]);
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       className: cn(
@@ -1320,7 +1066,7 @@ function SimpleAccordion({
       ),
       "data-state": isOpen ? "open" : "closed",
       children: [
-        /* @__PURE__ */ jsxs9(
+        /* @__PURE__ */ jsxs6(
           "button",
           {
             id: triggerId,
@@ -1338,14 +1084,14 @@ function SimpleAccordion({
             "data-state": isOpen ? "open" : "closed",
             "data-testid": triggerTestId,
             children: [
-              /* @__PURE__ */ jsxs9("span", { className: "flex items-center gap-3", children: [
-                icon && /* @__PURE__ */ jsx13("span", { className: "shrink-0", children: icon }),
-                /* @__PURE__ */ jsx13("span", { children: title })
+              /* @__PURE__ */ jsxs6("span", { className: "flex items-center gap-3", children: [
+                icon && /* @__PURE__ */ jsx9("span", { className: "shrink-0", children: icon }),
+                /* @__PURE__ */ jsx9("span", { children: title })
               ] }),
-              /* @__PURE__ */ jsxs9("span", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxs6("span", { className: "flex items-center gap-2", children: [
                 rightContent,
-                /* @__PURE__ */ jsx13(
-                  ChevronDown2,
+                /* @__PURE__ */ jsx9(
+                  ChevronDown,
                   {
                     className: cn(
                       "size-5 shrink-0 text-muted-foreground transition-transform duration-300 [transition-timing-function:cubic-bezier(0.32,0.72,0,1)]",
@@ -1358,7 +1104,7 @@ function SimpleAccordion({
             ]
           }
         ),
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx9(
           "div",
           {
             id: contentId,
@@ -1371,7 +1117,7 @@ function SimpleAccordion({
               "grid transition-all duration-300 [transition-timing-function:cubic-bezier(0.32,0.72,0,1)]",
               isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
             ),
-            children: /* @__PURE__ */ jsx13("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx13("div", { className: cn("px-4 pb-4", contentClassName), children }) })
+            children: /* @__PURE__ */ jsx9("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx9("div", { className: cn("px-4 pb-4", contentClassName), children }) })
           }
         )
       ]
@@ -1380,9 +1126,9 @@ function SimpleAccordion({
 }
 
 // src/confirm-dialog.tsx
-import * as React8 from "react";
+import * as React6 from "react";
 import { Loader2 } from "lucide-react";
-import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function ConfirmDialog({
   title,
   message,
@@ -1397,25 +1143,19 @@ function ConfirmDialog({
   confirmVariant = "default",
   className
 }) {
-  React8.useEffect(() => {
-    function handleKeyDown(e) {
-      if (e.key === "Escape" && !isLoading) {
-        onCancel();
-      }
-    }
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [onCancel, isLoading]);
-  return /* @__PURE__ */ jsx14(
+  const panel = React6.useRef(null);
+  useModalSurface(true, panel, isLoading ? void 0 : onCancel);
+  return /* @__PURE__ */ jsx10(
     "div",
     {
-      className: "fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm dark:bg-background/80",
+      ref: panel,
+      className: "z-modal fixed inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm dark:bg-background/80",
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": "confirm-dialog-title",
       "aria-describedby": "confirm-dialog-description",
       "data-testid": dialogTestId,
-      children: /* @__PURE__ */ jsxs10(
+      children: /* @__PURE__ */ jsxs7(
         "div",
         {
           className: cn(
@@ -1424,7 +1164,7 @@ function ConfirmDialog({
             className
           ),
           children: [
-            /* @__PURE__ */ jsx14(
+            /* @__PURE__ */ jsx10(
               "h3",
               {
                 id: "confirm-dialog-title",
@@ -1432,7 +1172,7 @@ function ConfirmDialog({
                 children: title
               }
             ),
-            /* @__PURE__ */ jsx14(
+            /* @__PURE__ */ jsx10(
               "p",
               {
                 id: "confirm-dialog-description",
@@ -1440,8 +1180,8 @@ function ConfirmDialog({
                 children: message
               }
             ),
-            /* @__PURE__ */ jsxs10("div", { className: "mt-6 flex justify-end gap-3", children: [
-              /* @__PURE__ */ jsx14(
+            /* @__PURE__ */ jsxs7("div", { className: "mt-6 flex justify-end gap-3", children: [
+              /* @__PURE__ */ jsx10(
                 Button,
                 {
                   variant: "ghost",
@@ -1451,15 +1191,15 @@ function ConfirmDialog({
                   children: cancelLabel
                 }
               ),
-              /* @__PURE__ */ jsx14(
+              /* @__PURE__ */ jsx10(
                 Button,
                 {
                   variant: confirmVariant,
                   onClick: onConfirm,
                   disabled: isLoading,
                   "data-testid": confirmTestId,
-                  children: isLoading ? /* @__PURE__ */ jsxs10(Fragment3, { children: [
-                    /* @__PURE__ */ jsx14(Loader2, { className: "mr-2 size-4 animate-spin" }),
+                  children: isLoading ? /* @__PURE__ */ jsxs7(Fragment, { children: [
+                    /* @__PURE__ */ jsx10(Loader2, { className: "mr-2 size-4 animate-spin" }),
                     confirmLabel,
                     "..."
                   ] }) : confirmLabel
@@ -1474,10 +1214,10 @@ function ConfirmDialog({
 }
 
 // src/dicebear-avatar.tsx
-import * as React9 from "react";
-import { cva as cva3 } from "class-variance-authority";
-import { jsx as jsx15 } from "react/jsx-runtime";
-var avatarVariants = cva3(
+import * as React7 from "react";
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var avatarVariants = cva2(
   "relative inline-flex shrink-0 overflow-hidden rounded-full bg-muted dark:bg-muted",
   {
     variants: {
@@ -1500,7 +1240,7 @@ function buildDiceBearUrl(seed, style = "adventurer-neutral") {
   const encodedSeed = encodeURIComponent(seed);
   return `${DICEBEAR_BASE_URL}/${style}/svg?seed=${encodedSeed}`;
 }
-var DiceBearAvatar = React9.forwardRef(
+var DiceBearAvatar = React7.forwardRef(
   ({
     seed,
     avatarStyle = "adventurer-neutral",
@@ -1510,18 +1250,18 @@ var DiceBearAvatar = React9.forwardRef(
     className,
     ...props
   }, ref) => {
-    const [hasError, setHasError] = React9.useState(false);
+    const [hasError, setHasError] = React7.useState(false);
     const url = buildDiceBearUrl(seed, avatarStyle);
-    React9.useEffect(() => {
+    React7.useEffect(() => {
       setHasError(false);
     }, [seed, avatarStyle]);
-    return /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsx11(
       "div",
       {
         ref,
         className: cn(avatarVariants({ size }), className),
         ...props,
-        children: hasError ? fallback ? /* @__PURE__ */ jsx15("div", { className: "flex h-full w-full items-center justify-center text-xs font-medium text-muted-foreground dark:text-muted-foreground", children: fallback }) : /* @__PURE__ */ jsx15("div", { className: "text-primary-text dark:text-primary-text flex h-full w-full items-center justify-center bg-primary/10 text-xs font-medium dark:bg-primary/10", children: seed.charAt(0).toUpperCase() }) : /* @__PURE__ */ jsx15(
+        children: hasError ? fallback ? /* @__PURE__ */ jsx11("div", { className: "flex h-full w-full items-center justify-center text-xs font-medium text-muted-foreground dark:text-muted-foreground", children: fallback }) : /* @__PURE__ */ jsx11("div", { className: "text-primary-text dark:text-primary-text flex h-full w-full items-center justify-center bg-primary/10 text-xs font-medium dark:bg-primary/10", children: seed.charAt(0).toUpperCase() }) : /* @__PURE__ */ jsx11(
           "img",
           {
             src: url,
@@ -1537,14 +1277,14 @@ var DiceBearAvatar = React9.forwardRef(
 DiceBearAvatar.displayName = "DiceBearAvatar";
 
 // src/intent-icon.tsx
-import { Check as Check2, AlertTriangle, X as X2, Info as Info2 } from "lucide-react";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { Check, AlertTriangle, X, Info } from "lucide-react";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var intentConfig = {
   success: {
     outerBg: "bg-[rgba(33,196,93,0.10)] dark:bg-[rgba(33,196,93,0.10)]",
     innerBg: "bg-[rgba(33,196,93,0.20)] dark:bg-[rgba(33,196,93,0.20)]",
     iconColor: "text-[#21c45d] dark:text-[#21c45d]",
-    Icon: Check2
+    Icon: Check
   },
   warning: {
     outerBg: "bg-[rgba(245,159,10,0.10)] dark:bg-[rgba(245,159,10,0.10)]",
@@ -1556,13 +1296,13 @@ var intentConfig = {
     outerBg: "bg-[rgba(239,67,67,0.10)] dark:bg-[rgba(239,67,67,0.10)]",
     innerBg: "bg-[rgba(239,67,67,0.20)] dark:bg-[rgba(239,67,67,0.20)]",
     iconColor: "text-[#ef4343] dark:text-[#ef4343]",
-    Icon: X2
+    Icon: X
   },
   info: {
     outerBg: "bg-[rgba(60,131,246,0.10)] dark:bg-[rgba(60,131,246,0.10)]",
     innerBg: "bg-[rgba(60,131,246,0.20)] dark:bg-[rgba(60,131,246,0.20)]",
     iconColor: "text-[#3c83f6] dark:text-[#3c83f6]",
-    Icon: Info2
+    Icon: Info
   }
 };
 var sizeConfig = {
@@ -1583,18 +1323,18 @@ function IntentIcon({
 }) {
   const { outerBg, innerBg, iconColor, Icon: Icon2 } = intentConfig[intent];
   const { outer, inner, iconSize } = sizeConfig[size];
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx12(
     "div",
     {
       "data-testid": "intent-icon",
       className: `${outer} ${outerBg} flex items-center justify-center`,
-      children: /* @__PURE__ */ jsx16("div", { className: `${inner} ${innerBg} flex items-center justify-center`, children: /* @__PURE__ */ jsx16(Icon2, { className: iconColor, size: iconSize }) })
+      children: /* @__PURE__ */ jsx12("div", { className: `${inner} ${innerBg} flex items-center justify-center`, children: /* @__PURE__ */ jsx12(Icon2, { className: iconColor, size: iconSize }) })
     }
   );
 }
 
 // src/section-heading.tsx
-import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 var sizeConfig2 = {
   display: {
     className: "text-4xl font-bold leading-10",
@@ -1619,26 +1359,26 @@ function SectionHeading({
   align = "center",
   size = "h1"
 }) {
-  const { className: sizeClass, tag: Tag2 } = sizeConfig2[size];
-  return /* @__PURE__ */ jsxs11(
+  const { className: sizeClass, tag: Tag } = sizeConfig2[size];
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       "data-testid": "section-heading",
       className: cn(
-        "flex max-w-[480px] flex-col gap-2",
-        align === "center" && "items-center text-center",
+        "flex flex-col gap-2",
+        align === "center" && "mx-auto items-center text-center",
         align === "left" && "items-start text-left"
       ),
       children: [
-        /* @__PURE__ */ jsx17(Tag2, { className: cn("text-foreground dark:text-foreground", sizeClass), children: title }),
-        description && /* @__PURE__ */ jsx17("p", { className: "text-sm font-normal leading-[21px] text-muted-foreground dark:text-muted-foreground", children: description })
+        /* @__PURE__ */ jsx13(Tag, { className: cn("text-foreground dark:text-foreground", sizeClass), children: title }),
+        description && /* @__PURE__ */ jsx13("p", { className: "max-w-[480px] text-sm font-normal leading-[21px] text-muted-foreground dark:text-muted-foreground", children: description })
       ]
     }
   );
 }
 
 // src/filter-chip.tsx
-import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 function FilterChip({
   label,
   active = false,
@@ -1646,7 +1386,7 @@ function FilterChip({
   size = "md",
   onClick
 }) {
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs9(
     "button",
     {
       type: "button",
@@ -1662,21 +1402,21 @@ function FilterChip({
         // State — inactive
         !active && "border-border bg-background text-muted-foreground dark:border-border dark:bg-background dark:text-muted-foreground",
         // State — active
-        active && "border-foreground bg-foreground text-background dark:border-foreground dark:bg-foreground dark:text-background",
+        active && "bg-primary-solid dark:bg-primary-solid border-transparent text-primary-foreground dark:border-transparent dark:text-primary-foreground",
         // Hover
         !active && "hover:bg-muted dark:hover:bg-muted",
-        active && "hover:bg-foreground/90 dark:hover:bg-foreground/90"
+        active && "hover:bg-[color-mix(in_oklab,hsl(var(--primary-solid))_85%,black)] dark:hover:bg-[color-mix(in_oklab,hsl(var(--primary-solid))_85%,black)]"
       ),
       children: [
         label,
-        count != null && /* @__PURE__ */ jsx18(
+        count != null && /* @__PURE__ */ jsx14(
           "span",
           {
             className: cn(
               "inline-flex items-center justify-center rounded-full px-[5px] text-[11px] font-semibold",
               "h-[18px] min-w-[18px]",
               !active && "bg-muted text-muted-foreground dark:bg-muted dark:text-muted-foreground",
-              active && "bg-background/30 text-background dark:bg-background/30 dark:text-background"
+              active && "text-primary-solid dark:text-primary-solid bg-primary-foreground dark:bg-primary-foreground"
             ),
             children: count
           }
@@ -1687,35 +1427,35 @@ function FilterChip({
 }
 
 // src/distribution-chip.tsx
-import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 function DistributionChip({
   count,
   label,
   dotClass,
   testId
 }) {
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs10(
     "span",
     {
       "data-testid": testId,
       className: "inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-3 py-1 text-sm font-medium text-foreground",
       children: [
-        /* @__PURE__ */ jsx19("span", { className: `size-2 rounded-full ${dotClass}` }),
-        /* @__PURE__ */ jsx19("span", { className: "tabular-nums", children: count }),
-        /* @__PURE__ */ jsx19("span", { className: "text-muted-foreground", children: label })
+        /* @__PURE__ */ jsx15("span", { className: `size-2 rounded-full ${dotClass}` }),
+        /* @__PURE__ */ jsx15("span", { className: "tabular-nums", children: count }),
+        /* @__PURE__ */ jsx15("span", { className: "text-muted-foreground", children: label })
       ]
     }
   );
 }
 
 // src/skeleton-bar.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function SkeletonBar({
   width = "full",
   height = 14,
   className = ""
 }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx16(
     "div",
     {
       "data-testid": "skeleton-bar",
@@ -1733,9 +1473,9 @@ function SkeletonBar({
 }
 
 // src/skeleton-card.tsx
-import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 function SkeletonCard({ className = "" }) {
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       "data-testid": "skeleton-card",
@@ -1744,18 +1484,18 @@ function SkeletonCard({ className = "" }) {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx21(SkeletonBar, { width: 80, height: 10 }),
-        /* @__PURE__ */ jsx21(SkeletonBar, { width: 60, height: 24 }),
-        /* @__PURE__ */ jsx21(SkeletonBar, { width: 100, height: 10 })
+        /* @__PURE__ */ jsx17(SkeletonBar, { width: 80, height: 10 }),
+        /* @__PURE__ */ jsx17(SkeletonBar, { width: 60, height: 24 }),
+        /* @__PURE__ */ jsx17(SkeletonBar, { width: 100, height: 10 })
       ]
     }
   );
 }
 
 // src/skeleton-row.tsx
-import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 function SkeletonRow({ className = "" }) {
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       "data-testid": "skeleton-row",
@@ -1764,10 +1504,10 @@ function SkeletonRow({ className = "" }) {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx22("div", { className: "h-9 w-9 flex-shrink-0 animate-pulse rounded-full bg-muted dark:bg-muted" }),
-        /* @__PURE__ */ jsxs15("div", { className: "flex flex-1 flex-col gap-1.5", children: [
-          /* @__PURE__ */ jsx22(SkeletonBar, { width: 200, height: 12 }),
-          /* @__PURE__ */ jsx22(SkeletonBar, { width: 140, height: 10 })
+        /* @__PURE__ */ jsx18("div", { className: "h-9 w-9 flex-shrink-0 animate-pulse rounded-full bg-muted dark:bg-muted" }),
+        /* @__PURE__ */ jsxs12("div", { className: "flex flex-1 flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsx18(SkeletonBar, { width: 200, height: 12 }),
+          /* @__PURE__ */ jsx18(SkeletonBar, { width: 140, height: 10 })
         ] })
       ]
     }
@@ -1775,10 +1515,10 @@ function SkeletonRow({ className = "" }) {
 }
 
 // src/stacked-list.tsx
-import * as React10 from "react";
-import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
-var StackedList = React10.forwardRef(
-  ({ className, divided = true, density = "default", ...props }, ref) => /* @__PURE__ */ jsx23(
+import * as React8 from "react";
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+var StackedList = React8.forwardRef(
+  ({ className, divided = true, density = "default", ...props }, ref) => /* @__PURE__ */ jsx19(
     "ul",
     {
       ref,
@@ -1790,7 +1530,7 @@ var StackedList = React10.forwardRef(
   )
 );
 StackedList.displayName = "StackedList";
-var StackedListItem = React10.forwardRef(
+var StackedListItem = React8.forwardRef(
   ({
     className,
     avatar,
@@ -1800,7 +1540,7 @@ var StackedListItem = React10.forwardRef(
     action,
     density = "default",
     ...props
-  }, ref) => /* @__PURE__ */ jsxs16(
+  }, ref) => /* @__PURE__ */ jsxs13(
     "li",
     {
       ref,
@@ -1811,9 +1551,9 @@ var StackedListItem = React10.forwardRef(
       ),
       ...props,
       children: [
-        avatar && /* @__PURE__ */ jsx23("div", { className: "flex-shrink-0", children: avatar }),
-        /* @__PURE__ */ jsxs16("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx23(
+        avatar && /* @__PURE__ */ jsx19("div", { className: "flex-shrink-0", children: avatar }),
+        /* @__PURE__ */ jsxs13("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx19(
             "p",
             {
               className: cn(
@@ -1823,7 +1563,7 @@ var StackedListItem = React10.forwardRef(
               children: title
             }
           ),
-          description && /* @__PURE__ */ jsx23(
+          description && /* @__PURE__ */ jsx19(
             "p",
             {
               className: cn(
@@ -1834,8 +1574,8 @@ var StackedListItem = React10.forwardRef(
             }
           )
         ] }),
-        meta && /* @__PURE__ */ jsx23("span", { className: "flex-shrink-0 text-sm text-muted-foreground", children: meta }),
-        action && /* @__PURE__ */ jsx23("div", { className: "flex-shrink-0", children: action })
+        meta && /* @__PURE__ */ jsx19("span", { className: "flex-shrink-0 text-sm text-muted-foreground", children: meta }),
+        action && /* @__PURE__ */ jsx19("div", { className: "flex-shrink-0", children: action })
       ]
     }
   )
@@ -1843,8 +1583,8 @@ var StackedListItem = React10.forwardRef(
 StackedListItem.displayName = "StackedListItem";
 
 // src/grid-list.tsx
-import * as React11 from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import * as React9 from "react";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var COLUMN_CLASSES = {
   2: "grid-cols-1 sm:grid-cols-2",
   3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
@@ -1855,8 +1595,8 @@ var GAP_CLASSES = {
   md: "gap-4",
   lg: "gap-6"
 };
-var GridList = React11.forwardRef(
-  ({ className, columns = 3, gap = "md", ...props }, ref) => /* @__PURE__ */ jsx24(
+var GridList = React9.forwardRef(
+  ({ className, columns = 3, gap = "md", ...props }, ref) => /* @__PURE__ */ jsx20(
     "div",
     {
       ref,
@@ -1871,8 +1611,8 @@ var GridList = React11.forwardRef(
   )
 );
 GridList.displayName = "GridList";
-var GridListItem = React11.forwardRef(
-  ({ className, hoverable = false, ...props }, ref) => /* @__PURE__ */ jsx24(
+var GridListItem = React9.forwardRef(
+  ({ className, hoverable = false, ...props }, ref) => /* @__PURE__ */ jsx20(
     "div",
     {
       ref,
@@ -1888,8 +1628,8 @@ var GridListItem = React11.forwardRef(
 GridListItem.displayName = "GridListItem";
 
 // src/pagination.tsx
-import * as React12 from "react";
-import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
+import * as React10 from "react";
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
 function getPageRange(current, total, siblings) {
   const range = [];
   const left = Math.max(2, current - siblings);
@@ -1901,7 +1641,7 @@ function getPageRange(current, total, siblings) {
   if (total > 1) range.push(total);
   return range;
 }
-var PaginationButton = React12.forwardRef(({ className, active, disabled, ...props }, ref) => /* @__PURE__ */ jsx25(
+var PaginationButton = React10.forwardRef(({ className, active, disabled, ...props }, ref) => /* @__PURE__ */ jsx21(
   "button",
   {
     ref,
@@ -1918,7 +1658,7 @@ var PaginationButton = React12.forwardRef(({ className, active, disabled, ...pro
   }
 ));
 PaginationButton.displayName = "PaginationButton";
-var Pagination = React12.forwardRef(
+var Pagination = React10.forwardRef(
   ({
     className,
     currentPage,
@@ -1934,7 +1674,7 @@ var Pagination = React12.forwardRef(
       }
     };
     if (variant === "simple") {
-      return /* @__PURE__ */ jsxs17(
+      return /* @__PURE__ */ jsxs14(
         "nav",
         {
           ref,
@@ -1942,7 +1682,7 @@ var Pagination = React12.forwardRef(
           className: cn("flex items-center justify-between", className),
           ...props,
           children: [
-            /* @__PURE__ */ jsx25(
+            /* @__PURE__ */ jsx21(
               PaginationButton,
               {
                 onClick: () => handleChange(currentPage - 1),
@@ -1950,13 +1690,13 @@ var Pagination = React12.forwardRef(
                 children: "Previous"
               }
             ),
-            /* @__PURE__ */ jsxs17("span", { className: "text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs14("span", { className: "text-sm text-muted-foreground", children: [
               "Page ",
               currentPage,
               " of ",
               totalPages
             ] }),
-            /* @__PURE__ */ jsx25(
+            /* @__PURE__ */ jsx21(
               PaginationButton,
               {
                 onClick: () => handleChange(currentPage + 1),
@@ -1969,7 +1709,7 @@ var Pagination = React12.forwardRef(
       );
     }
     const pages = getPageRange(currentPage, totalPages, siblingCount);
-    return /* @__PURE__ */ jsxs17(
+    return /* @__PURE__ */ jsxs14(
       "nav",
       {
         ref,
@@ -1981,7 +1721,7 @@ var Pagination = React12.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsx21(
             PaginationButton,
             {
               onClick: () => handleChange(currentPage - 1),
@@ -1990,14 +1730,14 @@ var Pagination = React12.forwardRef(
             }
           ),
           pages.map(
-            (page, i) => page === "ellipsis" ? /* @__PURE__ */ jsx25(
+            (page, i) => page === "ellipsis" ? /* @__PURE__ */ jsx21(
               "span",
               {
                 className: "inline-flex h-9 min-w-9 items-center justify-center text-sm text-muted-foreground",
                 children: "..."
               },
               `ellipsis-${i}`
-            ) : /* @__PURE__ */ jsx25(
+            ) : /* @__PURE__ */ jsx21(
               PaginationButton,
               {
                 active: page === currentPage,
@@ -2007,7 +1747,7 @@ var Pagination = React12.forwardRef(
               page
             )
           ),
-          /* @__PURE__ */ jsx25(
+          /* @__PURE__ */ jsx21(
             PaginationButton,
             {
               onClick: () => handleChange(currentPage + 1),
@@ -2023,106 +1763,9 @@ var Pagination = React12.forwardRef(
 Pagination.displayName = "Pagination";
 
 // src/stepper.tsx
-import * as React14 from "react";
-
-// src/scroll-hint-mark.tsx
-import * as React13 from "react";
-
-// src/scroll-hint.ts
-var SCROLL_HINT_X = "";
-var SCROLL_HINT_X_MARK = "pointer-events-none sticky right-0 z-10 ml-2 flex w-6 shrink-0 items-center justify-end self-stretch data-[scroll-hint-state=end]:invisible data-[scroll-hint-state=none]:hidden";
-var SCROLL_HINT_X_PILL = "flex h-full max-h-6 w-6 items-center justify-center rounded-full border border-border bg-card text-muted-foreground shadow-sm";
-var SCROLL_HINT_Y = "[container-type:scroll-state]";
-var SCROLL_HINT_Y_MARK = "pointer-events-none sticky bottom-1 -mt-7 flex h-6 justify-center supports-[container-type:scroll-state]:[@container_not_scroll-state(scrollable:bottom)]:hidden";
-
-// src/scroll-hint-watch.ts
-function scrollHintXState(box, slotWidth) {
-  if (box.scrollWidth - slotWidth <= box.clientWidth + 1) return "none";
-  return Math.abs(box.scrollLeft) + box.clientWidth >= box.scrollWidth - 1 ? "end" : "more";
-}
-function scrollHintXSlotWidth(mark, scroller) {
-  const own = getComputedStyle(mark);
-  if (own.display === "none") return 0;
-  const px = (v, what) => {
-    if (v === "normal") return 0;
-    const n = Number.parseFloat(v);
-    if (!Number.isFinite(n)) {
-      throw new Error(
-        `scrollHintXSlotWidth: ${what} is "${v}", not a length in px`
-      );
-    }
-    return n;
-  };
-  const gap = mark.previousElementSibling === null ? 0 : px(getComputedStyle(scroller).columnGap, "the scroller's column-gap");
-  return mark.getBoundingClientRect().width + px(own.marginLeft, "the mark's margin-left") + px(own.marginRight, "the mark's margin-right") + gap;
-}
-function watchScrollHintX(mark, write) {
-  const scroller = mark.parentElement;
-  if (scroller === null) {
-    throw new Error(
-      "watchScrollHintX: the mark has no parent element; it must be the last child of the box that scrolls on x"
-    );
-  }
-  let last;
-  const update = () => {
-    const state = scrollHintXState(
-      scroller,
-      scrollHintXSlotWidth(mark, scroller)
-    );
-    if (state === last) return;
-    last = state;
-    write(state);
-  };
-  const resize = new ResizeObserver(update);
-  const observeChildren = () => {
-    for (const child of Array.from(scroller.children)) resize.observe(child);
-  };
-  resize.observe(scroller);
-  observeChildren();
-  const added = new MutationObserver(() => {
-    observeChildren();
-    update();
-  });
-  added.observe(scroller, { childList: true });
-  scroller.addEventListener("scroll", update, { passive: true });
-  update();
-  return () => {
-    scroller.removeEventListener("scroll", update);
-    resize.disconnect();
-    added.disconnect();
-  };
-}
-
-// src/scroll-hint-mark.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
-function ScrollHintXMark() {
-  const ref = React13.useRef(null);
-  React13.useEffect(() => {
-    const mark = ref.current;
-    if (mark === null) {
-      throw new Error(
-        "ScrollHintXMark: the effect ran with no mounted mark (ref.current is null)"
-      );
-    }
-    return watchScrollHintX(mark, (state) => {
-      mark.dataset.scrollHintState = state;
-    });
-  }, []);
-  return /* @__PURE__ */ jsx26(
-    "div",
-    {
-      ref,
-      "aria-hidden": "true",
-      "data-scroll-hint": "x",
-      className: SCROLL_HINT_X_MARK,
-      children: /* @__PURE__ */ jsx26("span", { className: SCROLL_HINT_X_PILL, children: /* @__PURE__ */ jsx26(Icon, { name: "chevron-right", size: "sm" }) })
-    }
-  );
-}
-
-// src/stepper.tsx
-import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
-var StepContext = React14.createContext({
+import * as React11 from "react";
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+var StepContext = React11.createContext({
   index: 0,
   activeStep: 0,
   isLast: false,
@@ -2139,7 +1782,7 @@ var LABEL_SIZE = {
   md: "text-sm",
   lg: "text-base"
 };
-var StepperStep = React14.forwardRef(
+var StepperStep = React11.forwardRef(
   ({
     className,
     label,
@@ -2151,10 +1794,10 @@ var StepperStep = React14.forwardRef(
     href,
     ...props
   }, ref) => {
-    const { index, activeStep, isLast, variant, size } = React14.useContext(StepContext);
+    const { index, activeStep, isLast, variant, size } = React11.useContext(StepContext);
     const status = error ? "error" : disabled ? "disabled" : index < activeStep || completed ? "complete" : index === activeStep ? "current" : "upcoming";
     const isCurrent = index === activeStep && !error && !disabled;
-    const indicator = /* @__PURE__ */ jsx27(
+    const indicator = /* @__PURE__ */ jsx22(
       "div",
       {
         className: cn(
@@ -2172,7 +1815,7 @@ var StepperStep = React14.forwardRef(
       }
     );
     if (variant === "vertical") {
-      return /* @__PURE__ */ jsxs18(
+      return /* @__PURE__ */ jsxs15(
         "div",
         {
           ref,
@@ -2182,9 +1825,9 @@ var StepperStep = React14.forwardRef(
           className: cn("flex gap-3", disabled && "opacity-50", className),
           ...props,
           children: [
-            /* @__PURE__ */ jsxs18("div", { className: "flex flex-col items-center", children: [
+            /* @__PURE__ */ jsxs15("div", { className: "flex flex-col items-center", children: [
               indicator,
-              !isLast && /* @__PURE__ */ jsx27(
+              !isLast && /* @__PURE__ */ jsx22(
                 "div",
                 {
                   className: cn(
@@ -2196,8 +1839,8 @@ var StepperStep = React14.forwardRef(
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs18("div", { className: "pb-6", children: [
-              /* @__PURE__ */ jsx27(
+            /* @__PURE__ */ jsxs15("div", { className: "pb-6", children: [
+              /* @__PURE__ */ jsx22(
                 "p",
                 {
                   className: cn(
@@ -2208,15 +1851,15 @@ var StepperStep = React14.forwardRef(
                   children: label
                 }
               ),
-              description && /* @__PURE__ */ jsx27("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description })
+              description && /* @__PURE__ */ jsx22("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description })
             ] })
           ]
         }
       );
     }
-    const stepContent = /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
+    const stepContent = /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2", children: [
       indicator,
-      /* @__PURE__ */ jsx27(
+      /* @__PURE__ */ jsx22(
         "span",
         {
           className: cn(
@@ -2228,7 +1871,7 @@ var StepperStep = React14.forwardRef(
         }
       )
     ] });
-    return /* @__PURE__ */ jsxs18(
+    return /* @__PURE__ */ jsxs15(
       "div",
       {
         ref,
@@ -2238,7 +1881,7 @@ var StepperStep = React14.forwardRef(
         className: cn("flex items-center", className),
         ...props,
         children: [
-          href && !disabled ? /* @__PURE__ */ jsx27(
+          href && !disabled ? /* @__PURE__ */ jsx22(
             "a",
             {
               href,
@@ -2247,7 +1890,7 @@ var StepperStep = React14.forwardRef(
               children: stepContent
             }
           ) : stepContent,
-          !isLast && /* @__PURE__ */ jsx27(
+          !isLast && /* @__PURE__ */ jsx22(
             "div",
             {
               className: cn(
@@ -2262,7 +1905,7 @@ var StepperStep = React14.forwardRef(
   }
 );
 StepperStep.displayName = "StepperStep";
-var Stepper = React14.forwardRef(
+var Stepper = React11.forwardRef(
   ({
     className,
     variant = "horizontal",
@@ -2271,8 +1914,8 @@ var Stepper = React14.forwardRef(
     children,
     ...props
   }, ref) => {
-    const steps = React14.Children.toArray(children);
-    return /* @__PURE__ */ jsxs18(
+    const steps = React11.Children.toArray(children);
+    return /* @__PURE__ */ jsxs15(
       "div",
       {
         ref,
@@ -2284,7 +1927,7 @@ var Stepper = React14.forwardRef(
         ),
         ...props,
         children: [
-          steps.map((child, i) => /* @__PURE__ */ jsx27(
+          steps.map((child, i) => /* @__PURE__ */ jsx22(
             StepContext.Provider,
             {
               value: {
@@ -2298,7 +1941,7 @@ var Stepper = React14.forwardRef(
             },
             i
           )),
-          variant === "horizontal" && /* @__PURE__ */ jsx27(ScrollHintXMark, {})
+          variant === "horizontal" && /* @__PURE__ */ jsx22(ScrollHintXMark, {})
         ]
       }
     );
@@ -2307,14 +1950,14 @@ var Stepper = React14.forwardRef(
 Stepper.displayName = "Stepper";
 
 // src/command-palette.tsx
-import * as React15 from "react";
-import { Fragment as Fragment4, jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
+import * as React12 from "react";
+import { Fragment as Fragment2, jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 var SIZE_CLASSES = {
   sm: "max-w-sm",
   md: "max-w-lg",
   lg: "max-w-2xl"
 };
-var CommandPalette = React15.forwardRef(
+var CommandPalette = React12.forwardRef(
   ({
     className,
     open,
@@ -2325,9 +1968,9 @@ var CommandPalette = React15.forwardRef(
     size = "md",
     ...props
   }, ref) => {
-    const [query, setQuery] = React15.useState("");
-    const [activeIndex, setActiveIndex] = React15.useState(0);
-    React15.useEffect(() => {
+    const [query, setQuery] = React12.useState("");
+    const [activeIndex, setActiveIndex] = React12.useState(0);
+    React12.useEffect(() => {
       if (!open) return;
       const handler = (e) => {
         if (e.key === "Escape") onClose?.();
@@ -2347,7 +1990,7 @@ var CommandPalette = React15.forwardRef(
       document.addEventListener("keydown", handler);
       return () => document.removeEventListener("keydown", handler);
     }, [open, onClose, results, activeIndex]);
-    React15.useEffect(() => {
+    React12.useEffect(() => {
       setActiveIndex(0);
     }, [query]);
     if (!open) return null;
@@ -2360,15 +2003,15 @@ var CommandPalette = React15.forwardRef(
       },
       {}
     );
-    return /* @__PURE__ */ jsxs19(Fragment4, { children: [
-      /* @__PURE__ */ jsx28(
+    return /* @__PURE__ */ jsxs16(Fragment2, { children: [
+      /* @__PURE__ */ jsx23(
         "div",
         {
           className: "z-modal fixed inset-0 bg-foreground/60",
           onClick: onClose
         }
       ),
-      /* @__PURE__ */ jsx28("div", { className: "z-modal fixed inset-0 flex items-start justify-center pt-[15vh]", children: /* @__PURE__ */ jsxs19(
+      /* @__PURE__ */ jsx23("div", { className: "z-modal fixed inset-0 flex items-start justify-center pt-[15vh]", children: /* @__PURE__ */ jsxs16(
         "div",
         {
           ref,
@@ -2379,9 +2022,9 @@ var CommandPalette = React15.forwardRef(
           ),
           ...props,
           children: [
-            /* @__PURE__ */ jsxs19("div", { className: "flex items-center border-b border-border px-4", children: [
-              /* @__PURE__ */ jsx28("span", { className: "mr-2 text-muted-foreground", children: "\u2318" }),
-              /* @__PURE__ */ jsx28(
+            /* @__PURE__ */ jsxs16("div", { className: "flex items-center border-b border-border px-4", children: [
+              /* @__PURE__ */ jsx23("span", { className: "mr-2 text-muted-foreground", children: "\u2318" }),
+              /* @__PURE__ */ jsx23(
                 "input",
                 {
                   type: "text",
@@ -2395,13 +2038,13 @@ var CommandPalette = React15.forwardRef(
                   autoFocus: true
                 }
               ),
-              /* @__PURE__ */ jsx28("kbd", { className: "rounded border border-border px-1.5 py-0.5 text-xs text-muted-foreground", children: "Esc" })
+              /* @__PURE__ */ jsx23("kbd", { className: "rounded border border-border px-1.5 py-0.5 text-xs text-muted-foreground", children: "Esc" })
             ] }),
-            /* @__PURE__ */ jsx28("div", { className: "max-h-80 overflow-y-auto p-2", children: Object.entries(grouped).length === 0 ? /* @__PURE__ */ jsx28("p", { className: "py-6 text-center text-sm text-muted-foreground", children: "No results found" }) : Object.entries(grouped).map(([group, items]) => /* @__PURE__ */ jsxs19("div", { children: [
-              /* @__PURE__ */ jsx28("p", { className: "px-2 py-1.5 text-xs font-medium text-muted-foreground", children: group }),
+            /* @__PURE__ */ jsx23("div", { className: "max-h-80 overflow-y-auto p-2", children: Object.entries(grouped).length === 0 ? /* @__PURE__ */ jsx23("p", { className: "py-6 text-center text-sm text-muted-foreground", children: "No results found" }) : Object.entries(grouped).map(([group, items]) => /* @__PURE__ */ jsxs16("div", { children: [
+              /* @__PURE__ */ jsx23("p", { className: "px-2 py-1.5 text-xs font-medium text-muted-foreground", children: group }),
               items.map((item) => {
                 const idx = results.indexOf(item);
-                return /* @__PURE__ */ jsxs19(
+                return /* @__PURE__ */ jsxs16(
                   "button",
                   {
                     type: "button",
@@ -2415,9 +2058,9 @@ var CommandPalette = React15.forwardRef(
                     },
                     onMouseEnter: () => setActiveIndex(idx),
                     children: [
-                      item.icon && /* @__PURE__ */ jsx28("span", { className: "flex-shrink-0 text-muted-foreground", children: item.icon }),
-                      /* @__PURE__ */ jsx28("span", { className: "flex-1", children: item.label }),
-                      item.shortcut && /* @__PURE__ */ jsx28("kbd", { className: "rounded border border-border px-1.5 py-0.5 text-xs text-muted-foreground", children: item.shortcut })
+                      item.icon && /* @__PURE__ */ jsx23("span", { className: "flex-shrink-0 text-muted-foreground", children: item.icon }),
+                      /* @__PURE__ */ jsx23("span", { className: "flex-1", children: item.label }),
+                      item.shortcut && /* @__PURE__ */ jsx23("kbd", { className: "rounded border border-border px-1.5 py-0.5 text-xs text-muted-foreground", children: item.shortcut })
                     ]
                   },
                   item.id
@@ -2433,9 +2076,9 @@ var CommandPalette = React15.forwardRef(
 CommandPalette.displayName = "CommandPalette";
 
 // src/app-shell.tsx
-import * as React16 from "react";
-import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
-var AppShell = React16.forwardRef(
+import * as React13 from "react";
+import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+var AppShell = React13.forwardRef(
   ({
     className,
     variant = "stacked",
@@ -2450,7 +2093,7 @@ var AppShell = React16.forwardRef(
     ...props
   }, ref) => {
     if (variant === "stacked") {
-      return /* @__PURE__ */ jsxs20(
+      return /* @__PURE__ */ jsxs17(
         "div",
         {
           ref,
@@ -2458,13 +2101,13 @@ var AppShell = React16.forwardRef(
           ...props,
           children: [
             header,
-            /* @__PURE__ */ jsx29("main", { className: "flex-1", children })
+            /* @__PURE__ */ jsx24("main", { className: "flex-1", children })
           ]
         }
       );
     }
     if (variant === "multi-column") {
-      return /* @__PURE__ */ jsxs20(
+      return /* @__PURE__ */ jsxs17(
         "div",
         {
           ref,
@@ -2474,7 +2117,7 @@ var AppShell = React16.forwardRef(
           ),
           ...props,
           children: [
-            sidebar && /* @__PURE__ */ jsx29(
+            sidebar && /* @__PURE__ */ jsx24(
               "aside",
               {
                 className: cn(
@@ -2484,11 +2127,11 @@ var AppShell = React16.forwardRef(
                 children: sidebar
               }
             ),
-            /* @__PURE__ */ jsxs20("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+            /* @__PURE__ */ jsxs17("div", { className: "flex min-w-0 flex-1 flex-col", children: [
               header,
-              /* @__PURE__ */ jsxs20("div", { className: "flex flex-1 flex-col lg:flex-row", children: [
-                /* @__PURE__ */ jsx29("main", { className: "min-w-0 flex-1 overflow-y-auto", children }),
-                detailPanel && /* @__PURE__ */ jsx29("aside", { className: "flex-shrink-0 border-t border-border bg-card lg:w-80 lg:border-l lg:border-t-0", children: detailPanel })
+              /* @__PURE__ */ jsxs17("div", { className: "flex flex-1 flex-col lg:flex-row", children: [
+                /* @__PURE__ */ jsx24("main", { className: "min-w-0 flex-1 overflow-y-auto", children }),
+                detailPanel && /* @__PURE__ */ jsx24("aside", { className: "flex-shrink-0 border-t border-border bg-card lg:w-80 lg:border-l lg:border-t-0", children: detailPanel })
               ] })
             ] })
           ]
@@ -2496,7 +2139,7 @@ var AppShell = React16.forwardRef(
       );
     }
     const left = sidebarPosition === "left";
-    const column = sidebar && /* @__PURE__ */ jsx29(
+    const column = sidebar && /* @__PURE__ */ jsx24(
       "aside",
       {
         className: cn(
@@ -2507,7 +2150,7 @@ var AppShell = React16.forwardRef(
         children: sidebar
       }
     );
-    return /* @__PURE__ */ jsxs20(
+    return /* @__PURE__ */ jsxs17(
       "div",
       {
         ref,
@@ -2515,19 +2158,20 @@ var AppShell = React16.forwardRef(
         ...props,
         children: [
           left && column,
-          /* @__PURE__ */ jsxs20("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-            sidebar && /* @__PURE__ */ jsx29(
+          /* @__PURE__ */ jsxs17("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+            sidebar && /* @__PURE__ */ jsx24(
               "div",
               {
                 className: cn(
                   "flex items-center border-b border-border bg-card px-2 py-2 md:hidden",
                   !left && "justify-end"
                 ),
-                children: /* @__PURE__ */ jsx29(
+                children: /* @__PURE__ */ jsx24(
                   NavDrawer,
                   {
                     label: navLabel,
                     side: left ? "left" : "right",
+                    closedFrom: "md",
                     defaultOpen: defaultNavOpen,
                     children: sidebar
                   }
@@ -2535,7 +2179,7 @@ var AppShell = React16.forwardRef(
               }
             ),
             header,
-            /* @__PURE__ */ jsx29("main", { className: "min-w-0 flex-1 overflow-y-auto", children })
+            /* @__PURE__ */ jsx24("main", { className: "min-w-0 flex-1 overflow-y-auto", children })
           ] }),
           !left && column
         ]
@@ -2546,8 +2190,8 @@ var AppShell = React16.forwardRef(
 AppShell.displayName = "AppShell";
 
 // src/popover.tsx
-import * as React17 from "react";
-import { Fragment as Fragment5, jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
+import * as React14 from "react";
+import { Fragment as Fragment3, jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
 var SIDE_CLASSES = {
   top: "bottom-full mb-2",
   bottom: "top-full mt-2",
@@ -2559,7 +2203,7 @@ var ALIGN_CLASSES = {
   center: "left-1/2 -translate-x-1/2",
   end: "right-0"
 };
-var Popover = React17.forwardRef(
+var Popover = React14.forwardRef(
   ({
     className,
     open,
@@ -2570,10 +2214,10 @@ var Popover = React17.forwardRef(
     children,
     ...props
   }, ref) => {
-    const [internalOpen, setInternalOpen] = React17.useState(false);
+    const [internalOpen, setInternalOpen] = React14.useState(false);
     const isOpen = open ?? internalOpen;
     const setOpen = onOpenChange ?? setInternalOpen;
-    React17.useEffect(() => {
+    React14.useEffect(() => {
       if (!isOpen) return;
       const handler = (e) => {
         if (e.key === "Escape") setOpen(false);
@@ -2581,23 +2225,23 @@ var Popover = React17.forwardRef(
       document.addEventListener("keydown", handler);
       return () => document.removeEventListener("keydown", handler);
     }, [isOpen, setOpen]);
-    return /* @__PURE__ */ jsxs21(
+    return /* @__PURE__ */ jsxs18(
       "div",
       {
         ref,
         className: cn("relative inline-block", className),
         ...props,
         children: [
-          /* @__PURE__ */ jsx30("div", { onClick: () => setOpen(!isOpen), children: trigger }),
-          isOpen && /* @__PURE__ */ jsxs21(Fragment5, { children: [
-            /* @__PURE__ */ jsx30(
+          /* @__PURE__ */ jsx25("div", { onClick: () => setOpen(!isOpen), children: trigger }),
+          isOpen && /* @__PURE__ */ jsxs18(Fragment3, { children: [
+            /* @__PURE__ */ jsx25(
               "div",
               {
                 className: "z-popover fixed inset-0",
                 onClick: () => setOpen(false)
               }
             ),
-            /* @__PURE__ */ jsx30(
+            /* @__PURE__ */ jsx25(
               "div",
               {
                 className: cn(
@@ -2615,7 +2259,7 @@ var Popover = React17.forwardRef(
   }
 );
 Popover.displayName = "Popover";
-var HoverCard = React17.forwardRef(
+var HoverCard = React14.forwardRef(
   ({
     className,
     trigger,
@@ -2625,8 +2269,8 @@ var HoverCard = React17.forwardRef(
     children,
     ...props
   }, ref) => {
-    const [open, setOpen] = React17.useState(false);
-    const timeoutRef = React17.useRef();
+    const [open, setOpen] = React14.useState(false);
+    const timeoutRef = React14.useRef();
     const handleEnter = () => {
       clearTimeout(timeoutRef.current);
       timeoutRef.current = setTimeout(() => setOpen(true), delay);
@@ -2635,10 +2279,10 @@ var HoverCard = React17.forwardRef(
       clearTimeout(timeoutRef.current);
       timeoutRef.current = setTimeout(() => setOpen(false), 150);
     };
-    React17.useEffect(() => {
+    React14.useEffect(() => {
       return () => clearTimeout(timeoutRef.current);
     }, []);
-    return /* @__PURE__ */ jsxs21(
+    return /* @__PURE__ */ jsxs18(
       "div",
       {
         ref,
@@ -2648,7 +2292,7 @@ var HoverCard = React17.forwardRef(
         ...props,
         children: [
           trigger,
-          open && /* @__PURE__ */ jsx30(
+          open && /* @__PURE__ */ jsx25(
             "div",
             {
               className: cn(
@@ -2669,8 +2313,8 @@ var HoverCard = React17.forwardRef(
 HoverCard.displayName = "HoverCard";
 
 // src/calendar.tsx
-import * as React18 from "react";
-import { Fragment as Fragment6, jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
+import * as React15 from "react";
+import { Fragment as Fragment4, jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
 function getDaysInMonth(year, month) {
   return new Date(year, month + 1, 0).getDate();
 }
@@ -2708,7 +2352,7 @@ var SIZE_CONFIG = {
     dot: "h-1.5 w-1.5"
   }
 };
-var Calendar2 = React18.forwardRef(
+var Calendar = React15.forwardRef(
   ({
     className,
     value,
@@ -2724,16 +2368,16 @@ var Calendar2 = React18.forwardRef(
     size = "md",
     ...props
   }, ref) => {
-    const today = React18.useMemo(() => {
+    const today = React15.useMemo(() => {
       if (todayProp) return todayProp;
       const now = Date.now();
       const d = new Date(now);
       return new Date(d.getFullYear(), d.getMonth(), d.getDate());
     }, [todayProp]);
     const initialDate = value ?? rangeStart ?? today;
-    const [viewYear, setViewYear] = React18.useState(initialDate.getFullYear());
-    const [viewMonth, setViewMonth] = React18.useState(initialDate.getMonth());
-    const [focusedDay, setFocusedDay] = React18.useState(null);
+    const [viewYear, setViewYear] = React15.useState(initialDate.getFullYear());
+    const [viewMonth, setViewMonth] = React15.useState(initialDate.getMonth());
+    const [focusedDay, setFocusedDay] = React15.useState(null);
     const daysInMonth = getDaysInMonth(viewYear, viewMonth);
     const startDay = getStartDayOfWeek(viewYear, viewMonth);
     const config = SIZE_CONFIG[size];
@@ -2867,7 +2511,7 @@ var Calendar2 = React18.forwardRef(
     const cells = [];
     for (let i = 0; i < startDay; i++) cells.push(null);
     for (let d = 1; d <= daysInMonth; d++) cells.push(d);
-    return /* @__PURE__ */ jsxs22(
+    return /* @__PURE__ */ jsxs19(
       "div",
       {
         ref,
@@ -2882,8 +2526,8 @@ var Calendar2 = React18.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsxs22("div", { className: "mb-2 flex items-center justify-between", children: [
-            /* @__PURE__ */ jsx31(
+          /* @__PURE__ */ jsxs19("div", { className: "mb-2 flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx26(
               "button",
               {
                 type: "button",
@@ -2894,7 +2538,7 @@ var Calendar2 = React18.forwardRef(
                 children: "\u2039"
               }
             ),
-            /* @__PURE__ */ jsx31(
+            /* @__PURE__ */ jsx26(
               "span",
               {
                 className: "text-sm font-medium text-foreground",
@@ -2902,7 +2546,7 @@ var Calendar2 = React18.forwardRef(
                 children: formatMonth(viewYear, viewMonth)
               }
             ),
-            /* @__PURE__ */ jsx31(
+            /* @__PURE__ */ jsx26(
               "button",
               {
                 type: "button",
@@ -2914,7 +2558,7 @@ var Calendar2 = React18.forwardRef(
               }
             )
           ] }),
-          /* @__PURE__ */ jsx31("div", { role: "row", className: cn("grid grid-cols-7", config.gap), children: WEEKDAYS.map((day) => /* @__PURE__ */ jsx31(
+          /* @__PURE__ */ jsx26("div", { role: "row", className: cn("grid grid-cols-7", config.gap), children: WEEKDAYS.map((day) => /* @__PURE__ */ jsx26(
             "div",
             {
               role: "columnheader",
@@ -2926,9 +2570,9 @@ var Calendar2 = React18.forwardRef(
             },
             day
           )) }),
-          /* @__PURE__ */ jsx31("div", { className: cn("grid grid-cols-7", config.gap), children: cells.map((day, i) => {
+          /* @__PURE__ */ jsx26("div", { className: cn("grid grid-cols-7", config.gap), children: cells.map((day, i) => {
             if (day === null) {
-              return /* @__PURE__ */ jsx31("div", { className: config.cell }, `empty-${i}`);
+              return /* @__PURE__ */ jsx26("div", { className: config.cell }, `empty-${i}`);
             }
             const date = new Date(viewYear, viewMonth, day);
             const disabled = isDisabled(day);
@@ -2951,7 +2595,7 @@ var Calendar2 = React18.forwardRef(
             }
             const isToday = isSameDay(date, today);
             const eventDot = hasEvent(day);
-            return /* @__PURE__ */ jsxs22(
+            return /* @__PURE__ */ jsxs19(
               "button",
               {
                 type: "button",
@@ -2970,7 +2614,7 @@ var Calendar2 = React18.forwardRef(
                 ),
                 children: [
                   day,
-                  eventDot && /* @__PURE__ */ jsx31(
+                  eventDot && /* @__PURE__ */ jsx26(
                     "span",
                     {
                       className: cn(
@@ -2989,8 +2633,8 @@ var Calendar2 = React18.forwardRef(
     );
   }
 );
-Calendar2.displayName = "Calendar";
-var DatePicker = React18.forwardRef(
+Calendar.displayName = "Calendar";
+var DatePicker = React15.forwardRef(
   ({
     className,
     variant = "single",
@@ -3009,7 +2653,7 @@ var DatePicker = React18.forwardRef(
     disabled,
     ...props
   }, ref) => {
-    const [internalOpen, setInternalOpen] = React18.useState(false);
+    const [internalOpen, setInternalOpen] = React15.useState(false);
     const isOpen = controlledOpen ?? internalOpen;
     const setOpen = onOpenChange ?? setInternalOpen;
     const defaultPlaceholder = variant === "range" ? "Pick a date range" : "Pick a date";
@@ -3033,7 +2677,7 @@ var DatePicker = React18.forwardRef(
     } else if (variant === "range" && rangeStart) {
       displayText = rangeEnd ? `${formatDateForInput(rangeStart)} \u2013 ${formatDateForInput(rangeEnd)}` : formatDateForInput(rangeStart);
     }
-    return /* @__PURE__ */ jsxs22(
+    return /* @__PURE__ */ jsxs19(
       "div",
       {
         ref,
@@ -3041,7 +2685,7 @@ var DatePicker = React18.forwardRef(
         onKeyDown: handleKeyDown,
         ...props,
         children: [
-          /* @__PURE__ */ jsxs22(
+          /* @__PURE__ */ jsxs19(
             "button",
             {
               type: "button",
@@ -3054,22 +2698,22 @@ var DatePicker = React18.forwardRef(
                 displayText ? "text-foreground" : "text-muted-foreground"
               ),
               children: [
-                /* @__PURE__ */ jsx31("span", { className: "text-muted-foreground", "aria-hidden": "true", children: "\u{1F4C5}" }),
-                /* @__PURE__ */ jsx31("span", { className: "flex-1 text-left", children: displayText ?? placeholder ?? defaultPlaceholder }),
-                /* @__PURE__ */ jsx31("span", { className: "text-muted-foreground", "aria-hidden": "true", children: "\u25BE" })
+                /* @__PURE__ */ jsx26("span", { className: "text-muted-foreground", "aria-hidden": "true", children: "\u{1F4C5}" }),
+                /* @__PURE__ */ jsx26("span", { className: "flex-1 text-left", children: displayText ?? placeholder ?? defaultPlaceholder }),
+                /* @__PURE__ */ jsx26("span", { className: "text-muted-foreground", "aria-hidden": "true", children: "\u25BE" })
               ]
             }
           ),
-          isOpen && /* @__PURE__ */ jsxs22(Fragment6, { children: [
-            /* @__PURE__ */ jsx31(
+          isOpen && /* @__PURE__ */ jsxs19(Fragment4, { children: [
+            /* @__PURE__ */ jsx26(
               "div",
               {
                 className: "z-popover fixed inset-0",
                 onClick: () => setOpen(false)
               }
             ),
-            /* @__PURE__ */ jsx31("div", { className: "z-popover absolute left-0 top-full mt-1", children: /* @__PURE__ */ jsx31(
-              Calendar2,
+            /* @__PURE__ */ jsx26("div", { className: "z-popover absolute left-0 top-full mt-1", children: /* @__PURE__ */ jsx26(
+              Calendar,
               {
                 selectionMode: variant,
                 value: variant === "single" ? value : void 0,
@@ -3092,9 +2736,9 @@ var DatePicker = React18.forwardRef(
 DatePicker.displayName = "DatePicker";
 
 // src/navbar.tsx
-import * as React19 from "react";
-import { jsx as jsx32, jsxs as jsxs23 } from "react/jsx-runtime";
-var Navbar = React19.forwardRef(
+import * as React16 from "react";
+import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
+var Navbar = React16.forwardRef(
   ({
     className,
     variant = "simple",
@@ -3105,46 +2749,117 @@ var Navbar = React19.forwardRef(
     secondaryNav,
     children,
     ...props
-  }, ref) => /* @__PURE__ */ jsxs23(
-    "header",
-    {
-      ref,
-      className: cn(
-        "border-b border-border",
-        transparent ? "bg-transparent" : "bg-card",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxs23("div", { className: "mx-auto flex h-14 max-w-content-xl items-center gap-4 px-4 sm:px-6", children: [
-          logo && /* @__PURE__ */ jsx32("div", { className: "flex-shrink-0", children: logo }),
-          /* @__PURE__ */ jsxs23(
-            "nav",
+  }, ref) => {
+    const hasLinks = React16.Children.toArray(children).length > 0;
+    const hasSearch = variant === "withSearch" && Boolean(search);
+    const folds = Boolean(actions) && (hasLinks || hasSearch);
+    const filled = hasSearch || variant === "centered" && hasLinks;
+    return /* @__PURE__ */ jsxs20(
+      "header",
+      {
+        ref,
+        className: cn(
+          "border-b",
+          transparent ? "border-transparent bg-transparent" : "border-border bg-card",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs20(
+            "div",
             {
               className: cn(
-                // W0 (#5823): the links scroll on a narrow screen, never push
-                // the bar off the page
-                "flex min-w-0 items-center gap-4 overflow-x-auto",
-                variant === "centered" && "flex-1 [&>:first-child]:ml-auto [&>:nth-last-child(2)]:mr-auto"
+                "mx-auto flex min-h-14 max-w-content-xl items-center gap-x-4 gap-y-2 py-2 md:h-14 md:py-0",
+                CONTENT_GUTTER,
+                // nothing here can scroll or fold: the actions take their own row
+                !hasLinks && !folds && "flex-wrap md:flex-nowrap"
               ),
               children: [
-                children,
-                /* @__PURE__ */ jsx32(ScrollHintXMark, {})
+                logo && /* @__PURE__ */ jsx27(
+                  "div",
+                  {
+                    className: cn(
+                      hasLinks && !folds ? "flex-shrink-0" : "min-w-0 md:flex-shrink-0"
+                    ),
+                    children: logo
+                  }
+                ),
+                hasLinks && /* @__PURE__ */ jsxs20(
+                  "nav",
+                  {
+                    className: cn(
+                      // W0 (#5823): the links scroll on a narrow screen, never push
+                      // the bar off the page
+                      folds ? "hidden md:flex" : "flex",
+                      "min-w-0 items-center gap-4 overflow-x-auto",
+                      variant === "centered" && "flex-1 [&>:first-child]:ml-auto [&>:nth-last-child(2)]:mr-auto"
+                    ),
+                    children: [
+                      children,
+                      /* @__PURE__ */ jsx27(ScrollHintXMark, {})
+                    ]
+                  }
+                ),
+                hasSearch && /* @__PURE__ */ jsx27(
+                  "div",
+                  {
+                    className: cn(
+                      // space from its neighbours, never from the row's own edge
+                      "min-w-0 flex-1 px-4 first:pl-0 last:pr-0 md:min-w-48",
+                      folds && "hidden md:block"
+                    ),
+                    children: search
+                  }
+                ),
+                !filled && hasLinks && /* @__PURE__ */ jsx27("div", { className: "flex-1" }),
+                actions && /* @__PURE__ */ jsx27(
+                  "div",
+                  {
+                    className: cn(
+                      folds ? "hidden md:flex" : "flex",
+                      "ml-auto min-w-0 flex-wrap items-center justify-end gap-2 md:shrink-0 md:flex-nowrap"
+                    ),
+                    children: actions
+                  }
+                ),
+                folds && /* @__PURE__ */ jsx27(
+                  NavbarMenu,
+                  {
+                    search: hasSearch ? search : void 0,
+                    links: hasLinks ? children : void 0,
+                    actions
+                  }
+                )
               ]
             }
           ),
-          variant === "withSearch" && search && /* @__PURE__ */ jsx32("div", { className: "min-w-0 flex-1 px-4", children: search }),
-          variant !== "centered" && variant !== "withSearch" && /* @__PURE__ */ jsx32("div", { className: "flex-1" }),
-          actions && /* @__PURE__ */ jsx32("div", { className: "flex shrink-0 items-center gap-2", children: actions })
-        ] }),
-        variant === "twoLevel" && secondaryNav && /* @__PURE__ */ jsx32("div", { className: "border-t border-border", children: /* @__PURE__ */ jsx32("div", { className: "mx-auto flex max-w-content-xl items-center gap-4 px-4 py-2 sm:px-6", children: secondaryNav }) })
-      ]
-    }
-  )
+          variant === "twoLevel" && secondaryNav && /* @__PURE__ */ jsx27(
+            "div",
+            {
+              className: cn(
+                "border-t",
+                transparent ? "border-transparent" : "border-border"
+              ),
+              children: /* @__PURE__ */ jsx27(
+                "div",
+                {
+                  className: cn("mx-auto max-w-content-xl py-2", CONTENT_GUTTER),
+                  children: /* @__PURE__ */ jsxs20("div", { className: "flex min-w-0 items-center gap-4 overflow-x-auto", children: [
+                    secondaryNav,
+                    /* @__PURE__ */ jsx27(ScrollHintXMark, {})
+                  ] })
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
 );
 Navbar.displayName = "Navbar";
-var NavbarLink = React19.forwardRef(
-  ({ className, active, ...props }, ref) => /* @__PURE__ */ jsx32(
+var NavbarLink = React16.forwardRef(
+  ({ className, active, ...props }, ref) => /* @__PURE__ */ jsx27(
     "a",
     {
       ref,
@@ -3160,25 +2875,10 @@ var NavbarLink = React19.forwardRef(
 NavbarLink.displayName = "NavbarLink";
 
 // src/card-variants.tsx
-import * as React20 from "react";
-
-// src/empty-value.tsx
-import { jsx as jsx33, jsxs as jsxs24 } from "react/jsx-runtime";
-var EMPTY_VALUE_GLYPH = "\u2014";
-function isEmptyValue(value) {
-  return value === null || value === void 0 || value === false || typeof value === "string" && value.trim() === "";
-}
-function EmptyValue({ className }) {
-  return /* @__PURE__ */ jsxs24("span", { "data-empty-value": true, className: cn("text-muted-foreground", className), children: [
-    /* @__PURE__ */ jsx33("span", { "aria-hidden": "true", children: EMPTY_VALUE_GLYPH }),
-    /* @__PURE__ */ jsx33("span", { className: "sr-only", children: "Not set" })
-  ] });
-}
-
-// src/card-variants.tsx
-import { jsx as jsx34, jsxs as jsxs25 } from "react/jsx-runtime";
-var HorizontalCard = React20.forwardRef(
-  ({ className, media, hoverable, children, ...props }, ref) => /* @__PURE__ */ jsxs25(
+import * as React17 from "react";
+import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
+var HorizontalCard = React17.forwardRef(
+  ({ className, media, hoverable, children, ...props }, ref) => /* @__PURE__ */ jsxs21(
     "div",
     {
       ref,
@@ -3189,15 +2889,15 @@ var HorizontalCard = React20.forwardRef(
       ),
       ...props,
       children: [
-        media && /* @__PURE__ */ jsx34("div", { className: "flex-shrink-0", children: media }),
-        /* @__PURE__ */ jsx34("div", { className: "flex-1 p-4", children })
+        media && /* @__PURE__ */ jsx28("div", { className: "flex-shrink-0", children: media }),
+        /* @__PURE__ */ jsx28("div", { className: "flex-1 p-4", children })
       ]
     }
   )
 );
 HorizontalCard.displayName = "HorizontalCard";
-var ImageCard = React20.forwardRef(
-  ({ className, imageSrc, imageAlt, hoverable, children, ...props }, ref) => /* @__PURE__ */ jsxs25(
+var ImageCard = React17.forwardRef(
+  ({ className, imageSrc, imageAlt, hoverable, children, ...props }, ref) => /* @__PURE__ */ jsxs21(
     "div",
     {
       ref,
@@ -3208,7 +2908,7 @@ var ImageCard = React20.forwardRef(
       ),
       ...props,
       children: [
-        imageSrc && /* @__PURE__ */ jsx34("div", { className: "aspect-video w-full bg-muted", children: /* @__PURE__ */ jsx34(
+        imageSrc && /* @__PURE__ */ jsx28("div", { className: "aspect-video w-full bg-muted", children: /* @__PURE__ */ jsx28(
           "img",
           {
             src: imageSrc,
@@ -3216,13 +2916,13 @@ var ImageCard = React20.forwardRef(
             className: "h-full w-full object-cover"
           }
         ) }),
-        /* @__PURE__ */ jsx34("div", { className: "p-4", children })
+        /* @__PURE__ */ jsx28("div", { className: "p-4", children })
       ]
     }
   )
 );
 ImageCard.displayName = "ImageCard";
-var StatCardExtended = React20.forwardRef(({ className, label, value, trend, icon, ...props }, ref) => /* @__PURE__ */ jsxs25(
+var StatCardExtended = React17.forwardRef(({ className, label, value, trend, icon, ...props }, ref) => /* @__PURE__ */ jsxs21(
   "div",
   {
     ref,
@@ -3232,12 +2932,12 @@ var StatCardExtended = React20.forwardRef(({ className, label, value, trend, ico
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsxs25("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx34("span", { className: "text-sm text-muted-foreground", children: label }),
-        icon && /* @__PURE__ */ jsx34("div", { className: "text-muted-foreground", children: icon })
+      /* @__PURE__ */ jsxs21("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx28("span", { className: "text-sm text-muted-foreground", children: label }),
+        icon && /* @__PURE__ */ jsx28("div", { className: "text-muted-foreground", children: icon })
       ] }),
-      /* @__PURE__ */ jsx34("p", { className: "mt-2 text-3xl font-bold text-foreground", children: isEmptyValue(value) ? /* @__PURE__ */ jsx34(EmptyValue, {}) : value }),
-      trend && /* @__PURE__ */ jsxs25(
+      /* @__PURE__ */ jsx28("p", { className: "mt-2 text-3xl font-bold text-foreground", children: isEmptyValue(value) ? /* @__PURE__ */ jsx28(EmptyValue, {}) : value }),
+      trend && /* @__PURE__ */ jsxs21(
         "p",
         {
           className: cn(
@@ -3257,8 +2957,8 @@ var StatCardExtended = React20.forwardRef(({ className, label, value, trend, ico
   }
 ));
 StatCardExtended.displayName = "StatCardExtended";
-var ActionCard = React20.forwardRef(
-  ({ className, title, description, actions, children, ...props }, ref) => /* @__PURE__ */ jsxs25(
+var ActionCard = React17.forwardRef(
+  ({ className, title, description, actions, children, ...props }, ref) => /* @__PURE__ */ jsxs21(
     "div",
     {
       ref,
@@ -3268,12 +2968,12 @@ var ActionCard = React20.forwardRef(
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs25("div", { className: "p-6", children: [
-          /* @__PURE__ */ jsx34("h3", { className: "font-semibold text-foreground", children: title }),
-          description && /* @__PURE__ */ jsx34("p", { className: "mt-1 text-sm text-muted-foreground", children: description }),
+        /* @__PURE__ */ jsxs21("div", { className: "p-6", children: [
+          /* @__PURE__ */ jsx28("h3", { className: "font-semibold text-foreground", children: title }),
+          description && /* @__PURE__ */ jsx28("p", { className: "mt-1 text-sm text-muted-foreground", children: description }),
           children
         ] }),
-        actions && /* @__PURE__ */ jsx34("div", { className: "flex items-center gap-2 border-t border-border px-6 py-4", children: actions })
+        actions && /* @__PURE__ */ jsx28("div", { className: "flex items-center gap-2 border-t border-border px-6 py-4", children: actions })
       ]
     }
   )
@@ -3281,9 +2981,8 @@ var ActionCard = React20.forwardRef(
 ActionCard.displayName = "ActionCard";
 
 // src/modal-dialog.tsx
-import * as React21 from "react";
-import { createPortal } from "react-dom";
-import { Fragment as Fragment7, jsx as jsx35, jsxs as jsxs26 } from "react/jsx-runtime";
+import * as React18 from "react";
+import { Fragment as Fragment5, jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
 var SIZE_CLASSES2 = {
   sm: "max-w-sm",
   md: "max-w-md",
@@ -3291,20 +2990,14 @@ var SIZE_CLASSES2 = {
   xl: "max-w-xl",
   fullscreen: "max-w-full mx-4 my-4 h-[calc(100vh-2rem)]"
 };
-var ModalDialog = React21.forwardRef(
+var ModalDialog = React18.forwardRef(
   ({ className, open, onClose, size = "md", children, ...props }, ref) => {
-    React21.useEffect(() => {
-      if (!open) return;
-      const handler = (e) => {
-        if (e.key === "Escape") onClose?.();
-      };
-      document.addEventListener("keydown", handler);
-      return () => document.removeEventListener("keydown", handler);
-    }, [open, onClose]);
+    const [panel, setPanel] = usePanelRef(ref);
+    const place = useModalSurface(Boolean(open), panel, onClose);
     if (!open) return null;
-    return createPortal(
-      /* @__PURE__ */ jsxs26(Fragment7, { children: [
-        /* @__PURE__ */ jsx35(
+    return place(
+      /* @__PURE__ */ jsxs22(Fragment5, { children: [
+        /* @__PURE__ */ jsx29(
           "div",
           {
             className: "z-overlay fixed inset-0 bg-foreground/60 transition-opacity",
@@ -3312,10 +3005,10 @@ var ModalDialog = React21.forwardRef(
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ jsx35("div", { className: "z-modal fixed inset-0 flex items-center justify-center p-4", children: /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx29("div", { className: "z-modal fixed inset-0 flex items-center justify-center p-4", children: /* @__PURE__ */ jsx29(
           "div",
           {
-            ref,
+            ref: setPanel,
             role: "dialog",
             "aria-modal": "true",
             className: cn(
@@ -3328,13 +3021,12 @@ var ModalDialog = React21.forwardRef(
             children
           }
         ) })
-      ] }),
-      document.body
+      ] })
     );
   }
 );
 ModalDialog.displayName = "ModalDialog";
-var ModalHeader = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx35(
+var ModalHeader = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx29(
   "div",
   {
     ref,
@@ -3343,9 +3035,9 @@ var ModalHeader = React21.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 ModalHeader.displayName = "ModalHeader";
-var ModalBody = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx35("div", { ref, className: cn("px-6 py-4", className), ...props }));
+var ModalBody = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx29("div", { ref, className: cn("px-6 py-4", className), ...props }));
 ModalBody.displayName = "ModalBody";
-var ModalFooter = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx35(
+var ModalFooter = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx29(
   "div",
   {
     ref,
@@ -3359,9 +3051,8 @@ var ModalFooter = React21.forwardRef(({ className, ...props }, ref) => /* @__PUR
 ModalFooter.displayName = "ModalFooter";
 
 // src/drawer.tsx
-import * as React22 from "react";
-import { createPortal as createPortal2 } from "react-dom";
-import { Fragment as Fragment8, jsx as jsx36, jsxs as jsxs27 } from "react/jsx-runtime";
+import * as React19 from "react";
+import { Fragment as Fragment6, jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
 var SIZE_CLASSES3 = {
   left: { sm: "w-64", md: "w-80", lg: "w-96" },
   right: { sm: "w-64", md: "w-80", lg: "w-96" },
@@ -3372,7 +3063,7 @@ var POSITION_CLASSES = {
   right: "inset-y-0 right-0",
   bottom: "inset-x-0 bottom-0"
 };
-var Drawer = React22.forwardRef(
+var Drawer = React19.forwardRef(
   ({
     className,
     open,
@@ -3382,18 +3073,12 @@ var Drawer = React22.forwardRef(
     children,
     ...props
   }, ref) => {
-    React22.useEffect(() => {
-      if (!open) return;
-      const handler = (e) => {
-        if (e.key === "Escape") onClose?.();
-      };
-      document.addEventListener("keydown", handler);
-      return () => document.removeEventListener("keydown", handler);
-    }, [open, onClose]);
+    const [panel, setPanel] = usePanelRef(ref);
+    const place = useModalSurface(Boolean(open), panel, onClose);
     if (!open) return null;
-    return createPortal2(
-      /* @__PURE__ */ jsxs27(Fragment8, { children: [
-        /* @__PURE__ */ jsx36(
+    return place(
+      /* @__PURE__ */ jsxs23(Fragment6, { children: [
+        /* @__PURE__ */ jsx30(
           "div",
           {
             className: "z-overlay fixed inset-0 bg-foreground/60 transition-opacity",
@@ -3401,10 +3086,10 @@ var Drawer = React22.forwardRef(
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx30(
           "div",
           {
-            ref,
+            ref: setPanel,
             role: "dialog",
             "aria-modal": "true",
             className: cn(
@@ -3420,13 +3105,12 @@ var Drawer = React22.forwardRef(
             children
           }
         )
-      ] }),
-      document.body
+      ] })
     );
   }
 );
 Drawer.displayName = "Drawer";
-var DrawerHeader = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx36(
+var DrawerHeader = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx30(
   "div",
   {
     ref,
@@ -3435,7 +3119,7 @@ var DrawerHeader = React22.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 DrawerHeader.displayName = "DrawerHeader";
-var DrawerBody = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx36(
+var DrawerBody = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx30(
   "div",
   {
     ref,
@@ -3444,7 +3128,7 @@ var DrawerBody = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 DrawerBody.displayName = "DrawerBody";
-var DrawerFooter = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx36(
+var DrawerFooter = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx30(
   "div",
   {
     ref,
@@ -3458,10 +3142,10 @@ var DrawerFooter = React22.forwardRef(({ className, ...props }, ref) => /* @__PU
 DrawerFooter.displayName = "DrawerFooter";
 
 // src/form-layout.tsx
-import * as React23 from "react";
-import { jsx as jsx37, jsxs as jsxs28 } from "react/jsx-runtime";
-var FormLayout = React23.forwardRef(
-  ({ className, layout = "stacked", ...props }, ref) => /* @__PURE__ */ jsx37(
+import * as React20 from "react";
+import { jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
+var FormLayout = React20.forwardRef(
+  ({ className, layout = "stacked", ...props }, ref) => /* @__PURE__ */ jsx31(
     "form",
     {
       ref,
@@ -3476,27 +3160,27 @@ var FormLayout = React23.forwardRef(
   )
 );
 FormLayout.displayName = "FormLayout";
-var FormLayoutSection = React23.forwardRef(({ className, title, description, children, ...props }, ref) => /* @__PURE__ */ jsxs28(
+var FormLayoutSection = React20.forwardRef(({ className, title, description, children, ...props }, ref) => /* @__PURE__ */ jsxs24(
   "div",
   {
     ref,
     className: cn("border-b border-border pb-6", className),
     ...props,
     children: [
-      (title || description) && /* @__PURE__ */ jsxs28("div", { className: "mb-4", children: [
-        title && /* @__PURE__ */ jsx37("h3", { className: "text-base font-semibold text-foreground", children: title }),
-        description && /* @__PURE__ */ jsx37("p", { className: "mt-1 text-sm text-muted-foreground", children: description })
+      (title || description) && /* @__PURE__ */ jsxs24("div", { className: "mb-4", children: [
+        title && /* @__PURE__ */ jsx31("h3", { className: "text-base font-semibold text-foreground", children: title }),
+        description && /* @__PURE__ */ jsx31("p", { className: "mt-1 text-sm text-muted-foreground", children: description })
       ] }),
-      /* @__PURE__ */ jsx37("div", { className: "space-y-4", children })
+      /* @__PURE__ */ jsx31("div", { className: "space-y-4", children })
     ]
   }
 ));
 FormLayoutSection.displayName = "FormLayoutSection";
 
 // src/input-group.tsx
-import * as React24 from "react";
-import { jsx as jsx38, jsxs as jsxs29 } from "react/jsx-runtime";
-var InputGroup = React24.forwardRef(
+import * as React21 from "react";
+import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
+var InputGroup = React21.forwardRef(
   ({
     className,
     addon = "prefix",
@@ -3504,15 +3188,15 @@ var InputGroup = React24.forwardRef(
     suffixContent,
     children,
     ...props
-  }, ref) => /* @__PURE__ */ jsxs29(
+  }, ref) => /* @__PURE__ */ jsxs25(
     "div",
     {
       ref,
       className: cn("flex rounded-md shadow-sm", className),
       ...props,
       children: [
-        (addon === "prefix" || addon === "both") && addonContent && /* @__PURE__ */ jsx38("span", { className: "inline-flex items-center rounded-l-md border border-r-0 border-input bg-muted px-3 text-sm text-muted-foreground", children: addonContent }),
-        /* @__PURE__ */ jsx38(
+        (addon === "prefix" || addon === "both") && addonContent && /* @__PURE__ */ jsx32("span", { className: "inline-flex items-center rounded-l-md border border-r-0 border-input bg-muted px-3 text-sm text-muted-foreground", children: addonContent }),
+        /* @__PURE__ */ jsx32(
           "div",
           {
             className: cn(
@@ -3522,7 +3206,7 @@ var InputGroup = React24.forwardRef(
             children
           }
         ),
-        (addon === "suffix" || addon === "both") && (suffixContent || addonContent) && /* @__PURE__ */ jsx38("span", { className: "inline-flex items-center rounded-r-md border border-l-0 border-input bg-muted px-3 text-sm text-muted-foreground", children: suffixContent || addonContent })
+        (addon === "suffix" || addon === "both") && (suffixContent || addonContent) && /* @__PURE__ */ jsx32("span", { className: "inline-flex items-center rounded-r-md border border-l-0 border-input bg-muted px-3 text-sm text-muted-foreground", children: suffixContent || addonContent })
       ]
     }
   )
@@ -3530,9 +3214,9 @@ var InputGroup = React24.forwardRef(
 InputGroup.displayName = "InputGroup";
 
 // src/radio-group.tsx
-import * as React25 from "react";
-import { jsx as jsx39, jsxs as jsxs30 } from "react/jsx-runtime";
-var RadioGroup = React25.forwardRef(
+import * as React22 from "react";
+import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
+var RadioGroup = React22.forwardRef(
   ({
     className,
     options,
@@ -3542,9 +3226,9 @@ var RadioGroup = React25.forwardRef(
     name,
     label,
     ...props
-  }, ref) => /* @__PURE__ */ jsxs30("fieldset", { ref, className: cn("space-y-2", className), ...props, children: [
-    label && /* @__PURE__ */ jsx39("legend", { className: "mb-2 text-sm font-medium text-foreground", children: label }),
-    /* @__PURE__ */ jsx39(
+  }, ref) => /* @__PURE__ */ jsxs26("fieldset", { ref, className: cn("space-y-2", className), ...props, children: [
+    label && /* @__PURE__ */ jsx33("legend", { className: "mb-2 text-sm font-medium text-foreground", children: label }),
+    /* @__PURE__ */ jsx33(
       "div",
       {
         className: cn(
@@ -3555,7 +3239,7 @@ var RadioGroup = React25.forwardRef(
         children: options.map((option) => {
           const isSelected = value === option.value;
           if (variant === "card") {
-            return /* @__PURE__ */ jsxs30(
+            return /* @__PURE__ */ jsxs26(
               "label",
               {
                 className: cn(
@@ -3563,7 +3247,7 @@ var RadioGroup = React25.forwardRef(
                   isSelected ? "border-primary bg-primary/5" : "border-border bg-card hover:bg-muted/50"
                 ),
                 children: [
-                  /* @__PURE__ */ jsx39(
+                  /* @__PURE__ */ jsx33(
                     "input",
                     {
                       type: "radio",
@@ -3574,16 +3258,16 @@ var RadioGroup = React25.forwardRef(
                       className: "mt-0.5 h-4 w-4 accent-primary"
                     }
                   ),
-                  /* @__PURE__ */ jsxs30("div", { children: [
-                    /* @__PURE__ */ jsx39("span", { className: "text-sm font-medium text-foreground", children: option.label }),
-                    option.description && /* @__PURE__ */ jsx39("p", { className: "mt-0.5 text-xs text-muted-foreground", children: option.description })
+                  /* @__PURE__ */ jsxs26("div", { children: [
+                    /* @__PURE__ */ jsx33("span", { className: "text-sm font-medium text-foreground", children: option.label }),
+                    option.description && /* @__PURE__ */ jsx33("p", { className: "mt-0.5 text-xs text-muted-foreground", children: option.description })
                   ] })
                 ]
               },
               option.value
             );
           }
-          return /* @__PURE__ */ jsxs30(
+          return /* @__PURE__ */ jsxs26(
             "label",
             {
               className: cn(
@@ -3592,7 +3276,7 @@ var RadioGroup = React25.forwardRef(
                 variant === "stacked" && isSelected && "border-primary bg-primary/5"
               ),
               children: [
-                /* @__PURE__ */ jsx39(
+                /* @__PURE__ */ jsx33(
                   "input",
                   {
                     type: "radio",
@@ -3603,8 +3287,8 @@ var RadioGroup = React25.forwardRef(
                     className: "h-4 w-4 accent-primary"
                   }
                 ),
-                /* @__PURE__ */ jsx39("span", { className: "text-sm text-foreground", children: option.label }),
-                option.description && variant === "stacked" && /* @__PURE__ */ jsx39("span", { className: "ml-auto text-xs text-muted-foreground", children: option.description })
+                /* @__PURE__ */ jsx33("span", { className: "text-sm text-foreground", children: option.label }),
+                option.description && variant === "stacked" && /* @__PURE__ */ jsx33("span", { className: "ml-auto text-xs text-muted-foreground", children: option.description })
               ]
             },
             option.value
@@ -3617,9 +3301,9 @@ var RadioGroup = React25.forwardRef(
 RadioGroup.displayName = "RadioGroup";
 
 // src/combobox.tsx
-import * as React26 from "react";
-import { jsx as jsx40, jsxs as jsxs31 } from "react/jsx-runtime";
-var Combobox = React26.forwardRef(
+import * as React23 from "react";
+import { jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
+var Combobox = React23.forwardRef(
   ({
     className,
     options,
@@ -3630,8 +3314,8 @@ var Combobox = React26.forwardRef(
     filterable = true,
     ...props
   }, ref) => {
-    const [open, setOpen] = React26.useState(false);
-    const [search, setSearch] = React26.useState("");
+    const [open, setOpen] = React23.useState(false);
+    const [search, setSearch] = React23.useState("");
     const selected = multi ? Array.isArray(value) ? value : [] : typeof value === "string" ? value : "";
     const filtered = filterable ? options.filter(
       (o) => o.label.toLowerCase().includes(search.toLowerCase())
@@ -3650,20 +3334,20 @@ var Combobox = React26.forwardRef(
       }
     };
     const displayValue = multi ? null : options.find((o) => o.value === selected)?.label;
-    return /* @__PURE__ */ jsxs31("div", { ref, className: cn("relative", className), ...props, children: [
-      /* @__PURE__ */ jsxs31(
+    return /* @__PURE__ */ jsxs27("div", { ref, className: cn("relative", className), ...props, children: [
+      /* @__PURE__ */ jsxs27(
         "div",
         {
           className: "flex min-h-9 cursor-pointer items-center gap-1 rounded-md border border-input bg-background px-3 py-1.5",
           onClick: () => setOpen(!open),
           children: [
-            multi && Array.isArray(selected) && selected.length > 0 ? /* @__PURE__ */ jsx40("div", { className: "flex flex-wrap gap-1", children: selected.map((v) => /* @__PURE__ */ jsxs31(
+            multi && Array.isArray(selected) && selected.length > 0 ? /* @__PURE__ */ jsx34("div", { className: "flex flex-wrap gap-1", children: selected.map((v) => /* @__PURE__ */ jsxs27(
               "span",
               {
                 className: "text-primary-text inline-flex items-center gap-1 rounded bg-primary/10 px-2 py-0.5 text-xs font-medium",
                 children: [
                   options.find((o) => o.value === v)?.label,
-                  /* @__PURE__ */ jsx40(
+                  /* @__PURE__ */ jsx34(
                     "button",
                     {
                       type: "button",
@@ -3678,7 +3362,7 @@ var Combobox = React26.forwardRef(
                 ]
               },
               v
-            )) }) : /* @__PURE__ */ jsx40(
+            )) }) : /* @__PURE__ */ jsx34(
               "span",
               {
                 className: cn(
@@ -3688,12 +3372,12 @@ var Combobox = React26.forwardRef(
                 children: displayValue || placeholder
               }
             ),
-            /* @__PURE__ */ jsx40("span", { className: "ml-auto text-muted-foreground", children: "\u25BE" })
+            /* @__PURE__ */ jsx34("span", { className: "ml-auto text-muted-foreground", children: "\u25BE" })
           ]
         }
       ),
-      open && /* @__PURE__ */ jsxs31("div", { className: "z-dropdown absolute mt-1 w-full rounded-md border border-border bg-card shadow-lg", children: [
-        filterable && /* @__PURE__ */ jsx40("div", { className: "border-b border-border p-2", children: /* @__PURE__ */ jsx40(
+      open && /* @__PURE__ */ jsxs27("div", { className: "z-dropdown absolute mt-1 w-full rounded-md border border-border bg-card shadow-lg", children: [
+        filterable && /* @__PURE__ */ jsx34("div", { className: "border-b border-border p-2", children: /* @__PURE__ */ jsx34(
           "input",
           {
             type: "text",
@@ -3704,9 +3388,9 @@ var Combobox = React26.forwardRef(
             autoFocus: true
           }
         ) }),
-        /* @__PURE__ */ jsx40("div", { className: "max-h-60 overflow-y-auto p-1", children: filtered.length === 0 ? /* @__PURE__ */ jsx40("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: "No results" }) : filtered.map((option) => {
+        /* @__PURE__ */ jsx34("div", { className: "max-h-60 overflow-y-auto p-1", children: filtered.length === 0 ? /* @__PURE__ */ jsx34("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: "No results" }) : filtered.map((option) => {
           const isSelected = multi ? Array.isArray(selected) && selected.includes(option.value) : selected === option.value;
-          return /* @__PURE__ */ jsxs31(
+          return /* @__PURE__ */ jsxs27(
             "button",
             {
               type: "button",
@@ -3716,9 +3400,9 @@ var Combobox = React26.forwardRef(
               ),
               onClick: () => handleSelect(option.value),
               children: [
-                multi && /* @__PURE__ */ jsx40("span", { className: "mr-2", children: isSelected ? "\u2611" : "\u2610" }),
+                multi && /* @__PURE__ */ jsx34("span", { className: "mr-2", children: isSelected ? "\u2611" : "\u2610" }),
                 option.label,
-                !multi && isSelected && /* @__PURE__ */ jsx40("span", { className: "text-primary-text ml-auto", children: "\u2713" })
+                !multi && isSelected && /* @__PURE__ */ jsx34("span", { className: "text-primary-text ml-auto", children: "\u2713" })
               ]
             },
             option.value
@@ -3731,8 +3415,8 @@ var Combobox = React26.forwardRef(
 Combobox.displayName = "Combobox";
 
 // src/notification-banner.tsx
-import * as React27 from "react";
-import { jsx as jsx41, jsxs as jsxs32 } from "react/jsx-runtime";
+import * as React24 from "react";
+import { jsx as jsx35, jsxs as jsxs28 } from "react/jsx-runtime";
 var INTENT_STYLES = {
   success: {
     subtle: "bg-intent-success/10 text-intent-success-foreground border-intent-success/20",
@@ -3761,7 +3445,7 @@ var ICON_MAP = {
   error: "circle-alert",
   info: "info"
 };
-var NotificationBanner = React27.forwardRef(
+var NotificationBanner = React24.forwardRef(
   ({
     className,
     intent = "info",
@@ -3773,13 +3457,13 @@ var NotificationBanner = React27.forwardRef(
     children,
     ...props
   }, ref) => {
-    const [dismissed, setDismissed] = React27.useState(false);
+    const [dismissed, setDismissed] = React24.useState(false);
     if (dismissed) return null;
     const handleDismiss = () => {
       setDismissed(true);
       onDismiss?.();
     };
-    return /* @__PURE__ */ jsxs32(
+    return /* @__PURE__ */ jsxs28(
       "div",
       {
         ref,
@@ -3791,13 +3475,13 @@ var NotificationBanner = React27.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx41("span", { className: "flex-shrink-0 pt-0.5", "aria-hidden": "true", children: /* @__PURE__ */ jsx41(Icon, { name: ICON_MAP[intent], size: "md" }) }),
-          /* @__PURE__ */ jsxs32("div", { className: "min-w-0 flex-1", children: [
-            title && /* @__PURE__ */ jsx41("p", { className: "font-semibold", children: title }),
-            children && /* @__PURE__ */ jsx41("div", { className: cn(title && "mt-1", "text-sm"), children })
+          /* @__PURE__ */ jsx35("span", { className: "flex-shrink-0 pt-0.5", "aria-hidden": "true", children: /* @__PURE__ */ jsx35(Icon, { name: ICON_MAP[intent], size: "md" }) }),
+          /* @__PURE__ */ jsxs28("div", { className: "min-w-0 flex-1", children: [
+            title && /* @__PURE__ */ jsx35("p", { className: "font-semibold", children: title }),
+            children && /* @__PURE__ */ jsx35("div", { className: cn(title && "mt-1", "text-sm"), children })
           ] }),
-          action && /* @__PURE__ */ jsx41("div", { className: "flex-shrink-0", children: action }),
-          dismissible && /* @__PURE__ */ jsx41(
+          action && /* @__PURE__ */ jsx35("div", { className: "flex-shrink-0", children: action }),
+          dismissible && /* @__PURE__ */ jsx35(
             "button",
             {
               type: "button",
@@ -3815,9 +3499,9 @@ var NotificationBanner = React27.forwardRef(
 NotificationBanner.displayName = "NotificationBanner";
 
 // src/notification-panel.tsx
-import * as React28 from "react";
-import { jsx as jsx42, jsxs as jsxs33 } from "react/jsx-runtime";
-var NotificationPanel = React28.forwardRef(({ className, unreadCount = 0, onMarkAllRead, children, ...props }, ref) => /* @__PURE__ */ jsxs33(
+import * as React25 from "react";
+import { jsx as jsx36, jsxs as jsxs29 } from "react/jsx-runtime";
+var NotificationPanel = React25.forwardRef(({ className, unreadCount = 0, onMarkAllRead, children, ...props }, ref) => /* @__PURE__ */ jsxs29(
   "div",
   {
     ref,
@@ -3827,12 +3511,12 @@ var NotificationPanel = React28.forwardRef(({ className, unreadCount = 0, onMark
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsxs33("div", { className: "flex items-center justify-between border-b border-border px-4 py-3", children: [
-        /* @__PURE__ */ jsxs33("h3", { className: "text-sm font-semibold text-foreground", children: [
+      /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-between border-b border-border px-4 py-3", children: [
+        /* @__PURE__ */ jsxs29("h3", { className: "text-sm font-semibold text-foreground", children: [
           "Notifications",
-          unreadCount > 0 && /* @__PURE__ */ jsx42("span", { className: "bg-primary-solid ml-2 inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs text-primary-foreground", children: unreadCount })
+          unreadCount > 0 && /* @__PURE__ */ jsx36("span", { className: "bg-primary-solid ml-2 inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs text-primary-foreground", children: unreadCount })
         ] }),
-        onMarkAllRead && unreadCount > 0 && /* @__PURE__ */ jsx42(
+        onMarkAllRead && unreadCount > 0 && /* @__PURE__ */ jsx36(
           "button",
           {
             type: "button",
@@ -3842,12 +3526,12 @@ var NotificationPanel = React28.forwardRef(({ className, unreadCount = 0, onMark
           }
         )
       ] }),
-      /* @__PURE__ */ jsx42("div", { className: "max-h-80 divide-y divide-border overflow-y-auto", children })
+      /* @__PURE__ */ jsx36("div", { className: "max-h-80 divide-y divide-border overflow-y-auto", children })
     ]
   }
 ));
 NotificationPanel.displayName = "NotificationPanel";
-var NotificationPanelItem = React28.forwardRef(({ className, title, description, time, unread, icon, ...props }, ref) => /* @__PURE__ */ jsxs33(
+var NotificationPanelItem = React25.forwardRef(({ className, title, description, time, unread, icon, ...props }, ref) => /* @__PURE__ */ jsxs29(
   "div",
   {
     ref,
@@ -3858,9 +3542,9 @@ var NotificationPanelItem = React28.forwardRef(({ className, title, description,
     ),
     ...props,
     children: [
-      icon && /* @__PURE__ */ jsx42("div", { className: "flex-shrink-0 pt-0.5", children: icon }),
-      /* @__PURE__ */ jsxs33("div", { className: "min-w-0 flex-1", children: [
-        /* @__PURE__ */ jsx42(
+      icon && /* @__PURE__ */ jsx36("div", { className: "flex-shrink-0 pt-0.5", children: icon }),
+      /* @__PURE__ */ jsxs29("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx36(
           "p",
           {
             className: cn(
@@ -3870,22 +3554,22 @@ var NotificationPanelItem = React28.forwardRef(({ className, title, description,
             children: title
           }
         ),
-        description && /* @__PURE__ */ jsx42("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description }),
-        time && /* @__PURE__ */ jsx42("p", { className: "mt-1 text-xs text-muted-foreground", children: time })
+        description && /* @__PURE__ */ jsx36("p", { className: "mt-0.5 text-xs text-muted-foreground", children: description }),
+        time && /* @__PURE__ */ jsx36("p", { className: "mt-1 text-xs text-muted-foreground", children: time })
       ] }),
-      unread && /* @__PURE__ */ jsx42("div", { className: "flex-shrink-0 pt-1.5", children: /* @__PURE__ */ jsx42("div", { className: "h-2 w-2 rounded-full bg-primary" }) })
+      unread && /* @__PURE__ */ jsx36("div", { className: "flex-shrink-0 pt-1.5", children: /* @__PURE__ */ jsx36("div", { className: "h-2 w-2 rounded-full bg-primary" }) })
     ]
   }
 ));
 NotificationPanelItem.displayName = "NotificationPanelItem";
 
 // src/skeleton-patterns.tsx
-import { jsx as jsx43, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs30 } from "react/jsx-runtime";
 function SkeletonBar2({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx37(
     "div",
     {
       className: cn("animate-pulse rounded-md bg-muted", className),
@@ -3899,7 +3583,7 @@ function SkeletonTable({
   columns = 4,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs30(
     "div",
     {
       className: cn(
@@ -3908,15 +3592,15 @@ function SkeletonTable({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx43("div", { className: "flex gap-4 border-b border-border bg-muted/50 px-4 py-3", children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ jsx43(SkeletonBar2, { className: "h-4 flex-1" }, `h-${i}`)) }),
-        Array.from({ length: rows }).map((_, row) => /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx37("div", { className: "flex gap-4 border-b border-border bg-muted/50 px-4 py-3", children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-4 flex-1" }, `h-${i}`)) }),
+        Array.from({ length: rows }).map((_, row) => /* @__PURE__ */ jsx37(
           "div",
           {
             className: cn(
               "flex gap-4 px-4 py-3",
               row < rows - 1 && "border-b border-border"
             ),
-            children: Array.from({ length: columns }).map((_2, col) => /* @__PURE__ */ jsx43(
+            children: Array.from({ length: columns }).map((_2, col) => /* @__PURE__ */ jsx37(
               SkeletonBar2,
               {
                 className: cn("h-4 flex-1", col === 0 && "max-w-[140px]")
@@ -3938,17 +3622,17 @@ function SkeletonCardGrid({
   ...props
 }) {
   const colClass = columns === 2 ? "grid-cols-1 sm:grid-cols-2" : "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3";
-  return /* @__PURE__ */ jsx43("div", { className: cn("grid gap-4", colClass, className), ...props, children: Array.from({ length: cards }).map((_, i) => /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsx37("div", { className: cn("grid gap-4", colClass, className), ...props, children: Array.from({ length: cards }).map((_, i) => /* @__PURE__ */ jsxs30(
     "div",
     {
       className: "space-y-3 rounded-lg border border-border p-4",
       children: [
-        /* @__PURE__ */ jsx43(SkeletonBar2, { className: "h-4 w-3/4" }),
-        /* @__PURE__ */ jsx43(SkeletonBar2, { className: "h-3 w-full" }),
-        /* @__PURE__ */ jsx43(SkeletonBar2, { className: "h-3 w-5/6" }),
-        /* @__PURE__ */ jsxs34("div", { className: "flex gap-2 pt-2", children: [
-          /* @__PURE__ */ jsx43(SkeletonBar2, { className: "h-6 w-6 rounded-full" }),
-          /* @__PURE__ */ jsx43(SkeletonBar2, { className: "h-4 w-20" })
+        /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-4 w-3/4" }),
+        /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-3 w-full" }),
+        /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-3 w-5/6" }),
+        /* @__PURE__ */ jsxs30("div", { className: "flex gap-2 pt-2", children: [
+          /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-6 w-6 rounded-full" }),
+          /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-4 w-20" })
         ] })
       ]
     },
@@ -3957,34 +3641,34 @@ function SkeletonCardGrid({
 }
 SkeletonCardGrid.displayName = "SkeletonCardGrid";
 function SkeletonDetail({ className, ...props }) {
-  return /* @__PURE__ */ jsxs34("div", { className: cn("space-y-6", className), ...props, children: [
-    /* @__PURE__ */ jsxs34("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx43(SkeletonBar2, { className: "h-8 w-1/3" }),
-      /* @__PURE__ */ jsx43(SkeletonBar2, { className: "h-4 w-2/3" })
+  return /* @__PURE__ */ jsxs30("div", { className: cn("space-y-6", className), ...props, children: [
+    /* @__PURE__ */ jsxs30("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-8 w-1/3" }),
+      /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-4 w-2/3" })
     ] }),
-    /* @__PURE__ */ jsx43("div", { className: "space-y-4", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsxs34("div", { className: "flex justify-between", children: [
-      /* @__PURE__ */ jsx43(SkeletonBar2, { className: "h-4 w-24" }),
-      /* @__PURE__ */ jsx43(SkeletonBar2, { className: "h-4 w-40" })
+    /* @__PURE__ */ jsx37("div", { className: "space-y-4", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsxs30("div", { className: "flex justify-between", children: [
+      /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-4 w-24" }),
+      /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-4 w-40" })
     ] }, `dl-${i}`)) }),
-    /* @__PURE__ */ jsxs34("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx43(SkeletonBar2, { className: "h-4 w-full" }),
-      /* @__PURE__ */ jsx43(SkeletonBar2, { className: "h-4 w-full" }),
-      /* @__PURE__ */ jsx43(SkeletonBar2, { className: "h-4 w-3/4" })
+    /* @__PURE__ */ jsxs30("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-4 w-full" }),
+      /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-4 w-full" }),
+      /* @__PURE__ */ jsx37(SkeletonBar2, { className: "h-4 w-3/4" })
     ] })
   ] });
 }
 SkeletonDetail.displayName = "SkeletonDetail";
 
 // src/toggle.tsx
-import * as React29 from "react";
-import { jsx as jsx44 } from "react/jsx-runtime";
+import * as React26 from "react";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var SIZE_CLASSES4 = {
   sm: "h-8 px-2 text-xs",
   md: "h-9 px-3 text-sm",
   lg: "h-10 px-4 text-base"
 };
-var Toggle = React29.forwardRef(
-  ({ className, pressed, variant = "default", size = "md", ...props }, ref) => /* @__PURE__ */ jsx44(
+var Toggle = React26.forwardRef(
+  ({ className, pressed, variant = "default", size = "md", ...props }, ref) => /* @__PURE__ */ jsx38(
     "button",
     {
       ref,
@@ -4003,7 +3687,7 @@ var Toggle = React29.forwardRef(
   )
 );
 Toggle.displayName = "Toggle";
-var ToggleGroup = React29.forwardRef(
+var ToggleGroup = React26.forwardRef(
   ({
     className,
     type = "single",
@@ -4030,18 +3714,18 @@ var ToggleGroup = React29.forwardRef(
         );
       }
     };
-    return /* @__PURE__ */ jsx44(
+    return /* @__PURE__ */ jsx38(
       "div",
       {
         ref,
         role: "group",
         className: cn("inline-flex items-center gap-1", className),
         ...props,
-        children: React29.Children.map(children, (child) => {
-          if (!React29.isValidElement(child)) return child;
+        children: React26.Children.map(children, (child) => {
+          if (!React26.isValidElement(child)) return child;
           const childProps = child.props;
           const itemValue = childProps.value ?? "";
-          return React29.cloneElement(child, {
+          return React26.cloneElement(child, {
             pressed: isPressed(itemValue),
             variant,
             size,
@@ -4058,8 +3742,8 @@ var ToggleGroup = React29.forwardRef(
 ToggleGroup.displayName = "ToggleGroup";
 
 // src/avatar-group.tsx
-import * as React30 from "react";
-import { jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
+import * as React27 from "react";
+import { jsx as jsx39, jsxs as jsxs31 } from "react/jsx-runtime";
 var SIZE_MAP = {
   xs: { avatar: "h-6 w-6", ring: "ring-1", text: "text-[10px]" },
   sm: { avatar: "h-8 w-8", ring: "ring-2", text: "text-xs" },
@@ -4072,14 +3756,14 @@ var OVERLAP_MAP = {
   md: "-ml-3",
   lg: "-ml-3"
 };
-var AvatarGroup = React30.forwardRef(
+var AvatarGroup = React27.forwardRef(
   ({ className, max = 5, size = "md", children, ...props }, ref) => {
-    const items = React30.Children.toArray(children);
+    const items = React27.Children.toArray(children);
     const visible = items.slice(0, max);
     const overflow = items.length - max;
     const sizeConfig3 = SIZE_MAP[size];
-    return /* @__PURE__ */ jsxs35("div", { ref, className: cn("flex items-center", className), ...props, children: [
-      visible.map((child, i) => /* @__PURE__ */ jsx45(
+    return /* @__PURE__ */ jsxs31("div", { ref, className: cn("flex items-center", className), ...props, children: [
+      visible.map((child, i) => /* @__PURE__ */ jsx39(
         "div",
         {
           className: cn(
@@ -4091,7 +3775,7 @@ var AvatarGroup = React30.forwardRef(
         },
         i
       )),
-      overflow > 0 && /* @__PURE__ */ jsx45(
+      overflow > 0 && /* @__PURE__ */ jsx39(
         "div",
         {
           className: cn(
@@ -4100,7 +3784,7 @@ var AvatarGroup = React30.forwardRef(
             sizeConfig3.ring,
             OVERLAP_MAP[size]
           ),
-          children: /* @__PURE__ */ jsxs35(
+          children: /* @__PURE__ */ jsxs31(
             "span",
             {
               className: cn(
@@ -4119,10 +3803,10 @@ var AvatarGroup = React30.forwardRef(
   }
 );
 AvatarGroup.displayName = "AvatarGroup";
-var AvatarGroupItem = React30.forwardRef(({ className, fallback, size = "md", alt, src, ...props }, ref) => {
+var AvatarGroupItem = React27.forwardRef(({ className, fallback, size = "md", alt, src, ...props }, ref) => {
   const sizeConfig3 = SIZE_MAP[size];
   if (!src && fallback) {
-    return /* @__PURE__ */ jsx45(
+    return /* @__PURE__ */ jsx39(
       "div",
       {
         className: cn(
@@ -4136,7 +3820,7 @@ var AvatarGroupItem = React30.forwardRef(({ className, fallback, size = "md", al
       }
     );
   }
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx39(
     "img",
     {
       ref,
@@ -4150,10 +3834,10 @@ var AvatarGroupItem = React30.forwardRef(({ className, fallback, size = "md", al
 AvatarGroupItem.displayName = "AvatarGroupItem";
 
 // src/tab-bar.tsx
-import * as React31 from "react";
-import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
-var TabBar = React31.forwardRef(
-  ({ className, variant = "underline", children, ...props }, ref) => /* @__PURE__ */ jsxs36(
+import * as React28 from "react";
+import { jsx as jsx40, jsxs as jsxs32 } from "react/jsx-runtime";
+var TabBar = React28.forwardRef(
+  ({ className, variant = "underline", children, ...props }, ref) => /* @__PURE__ */ jsxs32(
     "div",
     {
       ref,
@@ -4173,21 +3857,21 @@ var TabBar = React31.forwardRef(
       "data-variant": variant,
       ...props,
       children: [
-        React31.Children.map(children, (child) => {
-          if (!React31.isValidElement(child)) return child;
-          return React31.cloneElement(
+        React28.Children.map(children, (child) => {
+          if (!React28.isValidElement(child)) return child;
+          return React28.cloneElement(
             child,
             { _variant: variant }
           );
         }),
-        /* @__PURE__ */ jsx46(ScrollHintXMark, {})
+        /* @__PURE__ */ jsx40(ScrollHintXMark, {})
       ]
     }
   )
 );
 TabBar.displayName = "TabBar";
-var TabBarItem = React31.forwardRef(
-  ({ className, active, disabled, _variant: variant = "underline", ...props }, ref) => /* @__PURE__ */ jsx46(
+var TabBarItem = React28.forwardRef(
+  ({ className, active, disabled, _variant: variant = "underline", ...props }, ref) => /* @__PURE__ */ jsx40(
     "button",
     {
       ref,
@@ -4223,7 +3907,7 @@ var TabBarItem = React31.forwardRef(
 TabBarItem.displayName = "TabBarItem";
 
 // src/sticky-action-bar.tsx
-import { jsx as jsx47, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs33 } from "react/jsx-runtime";
 function StickyActionBar({
   context,
   actions,
@@ -4231,7 +3915,7 @@ function StickyActionBar({
   className,
   testId = "sticky-action-bar"
 }) {
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx41(
     "div",
     {
       "data-testid": testId,
@@ -4242,24 +3926,24 @@ function StickyActionBar({
         topClassName,
         className
       ),
-      children: /* @__PURE__ */ jsxs37("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
-        context != null ? /* @__PURE__ */ jsx47("div", { className: "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1.5", children: context }) : /* @__PURE__ */ jsx47("span", {}),
-        /* @__PURE__ */ jsx47("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+      children: /* @__PURE__ */ jsxs33("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
+        context != null ? /* @__PURE__ */ jsx41("div", { className: "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1.5", children: context }) : /* @__PURE__ */ jsx41("span", {}),
+        /* @__PURE__ */ jsx41("div", { className: "flex shrink-0 items-center gap-2", children: actions })
       ] })
     }
   );
 }
 
 // src/button-group.tsx
-import * as React32 from "react";
-import { jsx as jsx48 } from "react/jsx-runtime";
+import * as React29 from "react";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var SIZE_CLASSES5 = {
   sm: "h-8 px-3 text-xs",
   md: "h-9 px-4 text-sm",
   lg: "h-10 px-5 text-base"
 };
-var ButtonGroup = React32.forwardRef(
-  ({ className, variant = "default", size = "md", children, ...props }, ref) => /* @__PURE__ */ jsx48(
+var ButtonGroup = React29.forwardRef(
+  ({ className, variant = "default", size = "md", children, ...props }, ref) => /* @__PURE__ */ jsx42(
     "div",
     {
       ref,
@@ -4272,9 +3956,9 @@ var ButtonGroup = React32.forwardRef(
       "data-variant": variant,
       "data-size": size,
       ...props,
-      children: React32.Children.map(children, (child) => {
-        if (!React32.isValidElement(child)) return child;
-        return React32.cloneElement(
+      children: React29.Children.map(children, (child) => {
+        if (!React29.isValidElement(child)) return child;
+        return React29.cloneElement(
           child,
           { _variant: variant, _size: size }
         );
@@ -4283,14 +3967,14 @@ var ButtonGroup = React32.forwardRef(
   )
 );
 ButtonGroup.displayName = "ButtonGroup";
-var ButtonGroupItem = React32.forwardRef(
+var ButtonGroupItem = React29.forwardRef(
   ({
     className,
     active,
     _variant: variant = "default",
     _size: size = "md",
     ...props
-  }, ref) => /* @__PURE__ */ jsx48(
+  }, ref) => /* @__PURE__ */ jsx42(
     "button",
     {
       ref,
@@ -4331,9 +4015,9 @@ var ButtonGroupItem = React32.forwardRef(
 ButtonGroupItem.displayName = "ButtonGroupItem";
 
 // src/data-table.tsx
-import * as React33 from "react";
-import { jsx as jsx49, jsxs as jsxs38 } from "react/jsx-runtime";
-var DataTable = React33.forwardRef(
+import * as React30 from "react";
+import { jsx as jsx43, jsxs as jsxs34 } from "react/jsx-runtime";
+var DataTable = React30.forwardRef(
   ({
     className,
     density = "default",
@@ -4343,8 +4027,8 @@ var DataTable = React33.forwardRef(
   }, ref) => (
     // W1.5 Batch 0 (#5823): a flex row, so the x mark (`ScrollHintXMark`,
     // last child) sits beside the table, not under it
-    /* @__PURE__ */ jsxs38("div", { className: "flex w-full overflow-x-auto", children: [
-      /* @__PURE__ */ jsx49(
+    /* @__PURE__ */ jsxs34("div", { className: "flex w-full overflow-x-auto", children: [
+      /* @__PURE__ */ jsx43(
         "table",
         {
           ref,
@@ -4358,12 +4042,12 @@ var DataTable = React33.forwardRef(
           ...props
         }
       ),
-      /* @__PURE__ */ jsx49(ScrollHintXMark, {})
+      /* @__PURE__ */ jsx43(ScrollHintXMark, {})
     ] })
   )
 );
 DataTable.displayName = "DataTable";
-var TableHeader = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx49(
+var TableHeader = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx43(
   "thead",
   {
     ref,
@@ -4372,7 +4056,7 @@ var TableHeader = React33.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TableHeader.displayName = "TableHeader";
-var TableBody = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx49(
+var TableBody = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx43(
   "tbody",
   {
     ref,
@@ -4381,8 +4065,8 @@ var TableBody = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableBody.displayName = "TableBody";
-var TableRow = React33.forwardRef(
-  ({ className, selected, ...props }, ref) => /* @__PURE__ */ jsx49(
+var TableRow = React30.forwardRef(
+  ({ className, selected, ...props }, ref) => /* @__PURE__ */ jsx43(
     "tr",
     {
       ref,
@@ -4405,12 +4089,12 @@ var DENSITY_CELL = {
   default: "px-4 py-2",
   relaxed: "px-4 py-3"
 };
-var TableCell = React33.forwardRef(
+var TableCell = React30.forwardRef(
   ({ className, header, sortDirection, onSort, children, ...props }, ref) => {
-    const Tag2 = header ? "th" : "td";
+    const Tag = header ? "th" : "td";
     const sortIndicator = sortDirection === "asc" ? " \u2191" : sortDirection === "desc" ? " \u2193" : "";
-    return /* @__PURE__ */ jsxs38(
-      Tag2,
+    return /* @__PURE__ */ jsxs34(
+      Tag,
       {
         ref,
         className: cn(
@@ -4424,14 +4108,14 @@ var TableCell = React33.forwardRef(
         ...props,
         children: [
           children,
-          header && sortIndicator && /* @__PURE__ */ jsx49("span", { className: "text-primary-text ml-1", children: sortIndicator })
+          header && sortIndicator && /* @__PURE__ */ jsx43("span", { className: "text-primary-text ml-1", children: sortIndicator })
         ]
       }
     );
   }
 );
 TableCell.displayName = "TableCell";
-var TableCaption = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx49(
+var TableCaption = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx43(
   "caption",
   {
     ref,
@@ -4442,15 +4126,15 @@ var TableCaption = React33.forwardRef(({ className, ...props }, ref) => /* @__PU
 TableCaption.displayName = "TableCaption";
 
 // src/stat-group.tsx
-import * as React34 from "react";
-import { jsx as jsx50 } from "react/jsx-runtime";
+import * as React31 from "react";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var COL_CLASSES = {
   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 StatGroup = React34.forwardRef(
-  ({ className, columns = 3, variant = "card", children, ...props }, ref) => /* @__PURE__ */ jsx50(
+var StatGroup = React31.forwardRef(
+  ({ className, columns = 3, variant = "card", children, ...props }, ref) => /* @__PURE__ */ jsx44(
     "div",
     {
       ref,
@@ -4468,10 +4152,10 @@ var StatGroup = React34.forwardRef(
 StatGroup.displayName = "StatGroup";
 
 // src/description-list.tsx
-import * as React35 from "react";
-import { jsx as jsx51, jsxs as jsxs39 } from "react/jsx-runtime";
-var DescriptionLayoutContext = React35.createContext("stacked");
-var DescriptionList = React35.forwardRef(({ className, layout = "stacked", ...props }, ref) => /* @__PURE__ */ jsx51(DescriptionLayoutContext.Provider, { value: layout, children: /* @__PURE__ */ jsx51(
+import * as React32 from "react";
+import { jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
+var DescriptionLayoutContext = React32.createContext("stacked");
+var DescriptionList = React32.forwardRef(({ className, layout = "stacked", ...props }, ref) => /* @__PURE__ */ jsx45(DescriptionLayoutContext.Provider, { value: layout, children: /* @__PURE__ */ jsx45(
   "dl",
   {
     ref,
@@ -4485,10 +4169,10 @@ var DescriptionList = React35.forwardRef(({ className, layout = "stacked", ...pr
   }
 ) }));
 DescriptionList.displayName = "DescriptionList";
-var DescriptionItem = React35.forwardRef(
+var DescriptionItem = React32.forwardRef(
   ({ className, label, value, ...props }, ref) => {
-    const layout = React35.useContext(DescriptionLayoutContext);
-    return /* @__PURE__ */ jsxs39(
+    const layout = React32.useContext(DescriptionLayoutContext);
+    return /* @__PURE__ */ jsxs35(
       "div",
       {
         ref,
@@ -4500,7 +4184,7 @@ var DescriptionItem = React35.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx51(
+          /* @__PURE__ */ jsx45(
             "dt",
             {
               className: cn(
@@ -4510,7 +4194,7 @@ var DescriptionItem = React35.forwardRef(
               children: label
             }
           ),
-          /* @__PURE__ */ jsx51(
+          /* @__PURE__ */ jsx45(
             "dd",
             {
               className: cn(
@@ -4518,7 +4202,7 @@ var DescriptionItem = React35.forwardRef(
                 layout !== "side-by-side" && "mt-1",
                 layout === "side-by-side" && "text-right"
               ),
-              children: isEmptyValue(value) ? /* @__PURE__ */ jsx51(EmptyValue, {}) : value
+              children: isEmptyValue(value) ? /* @__PURE__ */ jsx45(EmptyValue, {}) : value
             }
           )
         ]
@@ -4529,10 +4213,10 @@ var DescriptionItem = React35.forwardRef(
 DescriptionItem.displayName = "DescriptionItem";
 
 // src/activity-feed.tsx
-import * as React36 from "react";
-import { jsx as jsx52, jsxs as jsxs40 } from "react/jsx-runtime";
-var ActivityFeed = React36.forwardRef(
-  ({ className, variant = "simple", ...props }, ref) => /* @__PURE__ */ jsx52(
+import * as React33 from "react";
+import { jsx as jsx46, jsxs as jsxs36 } from "react/jsx-runtime";
+var ActivityFeed = React33.forwardRef(
+  ({ className, variant = "simple", ...props }, ref) => /* @__PURE__ */ jsx46(
     "div",
     {
       ref,
@@ -4543,19 +4227,19 @@ var ActivityFeed = React36.forwardRef(
   )
 );
 ActivityFeed.displayName = "ActivityFeed";
-var ActivityFeedItem = React36.forwardRef(
-  ({ className, avatar, eventDescription, timestamp, isLast, ...props }, ref) => /* @__PURE__ */ jsxs40(
+var ActivityFeedItem = React33.forwardRef(
+  ({ className, avatar, eventDescription, timestamp, isLast, ...props }, ref) => /* @__PURE__ */ jsxs36(
     "div",
     {
       ref,
       className: cn("relative flex gap-3 pb-6", className),
       ...props,
       children: [
-        !isLast && /* @__PURE__ */ jsx52("div", { className: "absolute left-5 top-10 -ml-px h-full w-0.5 bg-muted" }),
-        /* @__PURE__ */ jsx52("div", { className: "relative flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-muted", children: avatar }),
-        /* @__PURE__ */ jsxs40("div", { className: "min-w-0 flex-1 pt-1", children: [
-          /* @__PURE__ */ jsx52("div", { className: "text-sm text-foreground", children: eventDescription }),
-          timestamp && /* @__PURE__ */ jsx52("p", { className: "mt-0.5 text-xs text-muted-foreground", children: timestamp })
+        !isLast && /* @__PURE__ */ jsx46("div", { className: "absolute left-5 top-10 -ml-px h-full w-0.5 bg-muted" }),
+        /* @__PURE__ */ jsx46("div", { className: "relative flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-muted", children: avatar }),
+        /* @__PURE__ */ jsxs36("div", { className: "min-w-0 flex-1 pt-1", children: [
+          /* @__PURE__ */ jsx46("div", { className: "text-sm text-foreground", children: eventDescription }),
+          timestamp && /* @__PURE__ */ jsx46("p", { className: "mt-0.5 text-xs text-muted-foreground", children: timestamp })
         ] })
       ]
     }
@@ -4563,77 +4247,8 @@ var ActivityFeedItem = React36.forwardRef(
 );
 ActivityFeedItem.displayName = "ActivityFeedItem";
 
-// src/alert.tsx
-import * as React37 from "react";
-import { jsx as jsx53, jsxs as jsxs41 } from "react/jsx-runtime";
-var INTENT_SUBTLE_STYLES = {
-  success: "bg-intent-success/10 text-intent-success-foreground border-intent-success/20",
-  warning: "bg-intent-warning/10 text-intent-warning-foreground border-intent-warning/20",
-  error: "bg-intent-error/10 text-intent-error-foreground border-intent-error/20",
-  info: "bg-intent-info/10 text-intent-info-foreground border-intent-info/20"
-};
-var SOLID_STYLES = {
-  success: "border-transparent bg-intent-success-solid text-intent-success-solid-fg",
-  warning: "border-transparent bg-intent-warning-solid text-intent-warning-solid-fg",
-  error: "border-transparent bg-intent-error-solid text-intent-error-solid-fg",
-  info: "border-transparent bg-intent-info-solid text-intent-info-solid-fg"
-};
-var OUTLINE_STYLES = {
-  success: "border-intent-success-border text-intent-success-foreground bg-background",
-  warning: "border-intent-warning-border text-intent-warning-foreground bg-background",
-  error: "border-intent-error-border text-intent-error-foreground bg-background",
-  info: "border-intent-info-border text-intent-info-foreground bg-background"
-};
-var ICON_MAP2 = {
-  success: "circle-check",
-  warning: "triangle-alert",
-  error: "circle-alert",
-  info: "info"
-};
-var Alert = React37.forwardRef(
-  ({
-    className,
-    intent = "info",
-    variant = "subtle",
-    title,
-    dismissible,
-    onDismiss,
-    children,
-    ...props
-  }, ref) => {
-    const styles = variant === "solid" ? SOLID_STYLES[intent] : variant === "outline" ? OUTLINE_STYLES[intent] : INTENT_SUBTLE_STYLES[intent];
-    return /* @__PURE__ */ jsxs41(
-      "div",
-      {
-        ref,
-        role: "alert",
-        className: cn("flex gap-3 rounded-lg border p-4", styles, className),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx53("span", { className: "flex-shrink-0 pt-0.5", "aria-hidden": "true", children: /* @__PURE__ */ jsx53(Icon, { name: ICON_MAP2[intent], size: "md" }) }),
-          /* @__PURE__ */ jsxs41("div", { className: "min-w-0 flex-1", children: [
-            title && /* @__PURE__ */ jsx53("p", { className: "font-semibold", children: title }),
-            children && /* @__PURE__ */ jsx53("div", { className: cn(title && "mt-1", "text-sm"), children })
-          ] }),
-          dismissible && /* @__PURE__ */ jsx53(
-            "button",
-            {
-              type: "button",
-              onClick: onDismiss,
-              className: "flex-shrink-0 hover:opacity-80",
-              "aria-label": "Dismiss",
-              children: "\u2715"
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-Alert.displayName = "Alert";
-
 // src/empty-state.tsx
-import { jsx as jsx54, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs37 } from "react/jsx-runtime";
 function EmptyState({
   icon: Icon2,
   title,
@@ -4644,7 +4259,7 @@ function EmptyState({
   className
 }) {
   const compact = size === "compact";
-  return /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsxs37(
     "div",
     {
       "data-testid": testId,
@@ -4654,7 +4269,7 @@ function EmptyState({
         className
       ),
       children: [
-        Icon2 && /* @__PURE__ */ jsx54(
+        Icon2 && /* @__PURE__ */ jsx47(
           "div",
           {
             "aria-hidden": "true",
@@ -4662,10 +4277,10 @@ function EmptyState({
               "flex items-center justify-center rounded-full bg-primary/10 text-primary",
               compact ? "mb-3 size-12" : "mb-5 size-16"
             ),
-            children: /* @__PURE__ */ jsx54(Icon2, { className: compact ? "size-6" : "size-8" })
+            children: /* @__PURE__ */ jsx47(Icon2, { className: compact ? "size-6" : "size-8" })
           }
         ),
-        /* @__PURE__ */ jsx54(
+        /* @__PURE__ */ jsx47(
           "h2",
           {
             className: cn(
@@ -4675,7 +4290,7 @@ function EmptyState({
             children: title
           }
         ),
-        description && /* @__PURE__ */ jsx54(
+        description && /* @__PURE__ */ jsx47(
           "p",
           {
             className: cn(
@@ -4685,21 +4300,21 @@ function EmptyState({
             children: description
           }
         ),
-        action && /* @__PURE__ */ jsx54("div", { className: compact ? "mt-4" : "mt-6", children: action })
+        action && /* @__PURE__ */ jsx47("div", { className: compact ? "mt-4" : "mt-6", children: action })
       ]
     }
   );
 }
 
 // src/action-panel.tsx
-import * as React38 from "react";
-import { Fragment as Fragment9, jsx as jsx55, jsxs as jsxs43 } from "react/jsx-runtime";
+import * as React34 from "react";
+import { Fragment as Fragment7, jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
 var BORDER_INTENT = {
   default: "border-l-primary",
   warning: "border-l-intent-warning",
   destructive: "border-l-intent-error"
 };
-var ActionPanel = React38.forwardRef(
+var ActionPanel = React34.forwardRef(
   ({
     className,
     title,
@@ -4708,7 +4323,7 @@ var ActionPanel = React38.forwardRef(
     variant = "simple",
     intent = "default",
     ...props
-  }, ref) => /* @__PURE__ */ jsx55(
+  }, ref) => /* @__PURE__ */ jsx48(
     "div",
     {
       ref,
@@ -4719,16 +4334,16 @@ var ActionPanel = React38.forwardRef(
         className
       ),
       ...props,
-      children: variant === "split" ? /* @__PURE__ */ jsxs43(Fragment9, { children: [
-        /* @__PURE__ */ jsxs43("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsx55("h3", { className: "font-semibold text-foreground", children: title }),
-          description && /* @__PURE__ */ jsx55("p", { className: "mt-1 text-sm text-muted-foreground", children: description })
+      children: variant === "split" ? /* @__PURE__ */ jsxs38(Fragment7, { children: [
+        /* @__PURE__ */ jsxs38("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx48("h3", { className: "font-semibold text-foreground", children: title }),
+          description && /* @__PURE__ */ jsx48("p", { className: "mt-1 text-sm text-muted-foreground", children: description })
         ] }),
-        action && /* @__PURE__ */ jsx55("div", { className: "flex-shrink-0", children: action })
-      ] }) : /* @__PURE__ */ jsxs43(Fragment9, { children: [
-        /* @__PURE__ */ jsx55("h3", { className: "font-semibold text-foreground", children: title }),
-        description && /* @__PURE__ */ jsx55("p", { className: "mt-1 text-sm text-muted-foreground", children: description }),
-        action && /* @__PURE__ */ jsx55("div", { className: "mt-4", children: action })
+        action && /* @__PURE__ */ jsx48("div", { className: "flex-shrink-0", children: action })
+      ] }) : /* @__PURE__ */ jsxs38(Fragment7, { children: [
+        /* @__PURE__ */ jsx48("h3", { className: "font-semibold text-foreground", children: title }),
+        description && /* @__PURE__ */ jsx48("p", { className: "mt-1 text-sm text-muted-foreground", children: description }),
+        action && /* @__PURE__ */ jsx48("div", { className: "mt-4", children: action })
       ] })
     }
   )
@@ -4736,14 +4351,14 @@ var ActionPanel = React38.forwardRef(
 ActionPanel.displayName = "ActionPanel";
 
 // src/divider.tsx
-import * as React39 from "react";
-import { jsx as jsx56, jsxs as jsxs44 } from "react/jsx-runtime";
+import * as React35 from "react";
+import { jsx as jsx49, jsxs as jsxs39 } from "react/jsx-runtime";
 var VARIANT_CLASSES = {
   solid: "border-solid",
   dashed: "border-dashed",
   dotted: "border-dotted"
 };
-var Divider = React39.forwardRef(
+var Divider = React35.forwardRef(
   ({
     className,
     label,
@@ -4753,7 +4368,7 @@ var Divider = React39.forwardRef(
     ...props
   }, ref) => {
     if (orientation === "vertical") {
-      return /* @__PURE__ */ jsx56(
+      return /* @__PURE__ */ jsx49(
         "div",
         {
           ref,
@@ -4770,7 +4385,7 @@ var Divider = React39.forwardRef(
       );
     }
     if (!label) {
-      return /* @__PURE__ */ jsx56(
+      return /* @__PURE__ */ jsx49(
         "div",
         {
           ref,
@@ -4784,7 +4399,7 @@ var Divider = React39.forwardRef(
         }
       );
     }
-    return /* @__PURE__ */ jsxs44(
+    return /* @__PURE__ */ jsxs39(
       "div",
       {
         ref,
@@ -4792,7 +4407,7 @@ var Divider = React39.forwardRef(
         role: "separator",
         ...props,
         children: [
-          labelPosition !== "left" && /* @__PURE__ */ jsx56(
+          labelPosition !== "left" && /* @__PURE__ */ jsx49(
             "div",
             {
               className: cn(
@@ -4801,7 +4416,7 @@ var Divider = React39.forwardRef(
               )
             }
           ),
-          /* @__PURE__ */ jsx56(
+          /* @__PURE__ */ jsx49(
             "span",
             {
               className: cn(
@@ -4811,7 +4426,7 @@ var Divider = React39.forwardRef(
               children: label
             }
           ),
-          labelPosition !== "right" && /* @__PURE__ */ jsx56(
+          labelPosition !== "right" && /* @__PURE__ */ jsx49(
             "div",
             {
               className: cn(
@@ -4827,44 +4442,17 @@ var Divider = React39.forwardRef(
 );
 Divider.displayName = "Divider";
 
-// src/container.tsx
-import * as React40 from "react";
-import { jsx as jsx57 } from "react/jsx-runtime";
-var SIZE_CLASSES6 = {
-  sm: "max-w-content-sm",
-  md: "max-w-content-md",
-  lg: "max-w-content-lg",
-  xl: "max-w-content-xl",
-  full: "max-w-full"
-};
-var Container = React40.forwardRef(
-  ({ className, size = "xl", padded = true, ...props }, ref) => /* @__PURE__ */ jsx57(
-    "div",
-    {
-      ref,
-      className: cn(
-        "mx-auto w-full",
-        SIZE_CLASSES6[size],
-        padded && "px-4 sm:px-6 lg:px-8",
-        className
-      ),
-      ...props
-    }
-  )
-);
-Container.displayName = "Container";
-
 // src/page-content.tsx
-import * as React41 from "react";
-import { jsx as jsx58 } from "react/jsx-runtime";
+import * as React36 from "react";
+import { jsx as jsx50 } from "react/jsx-runtime";
 var GAP_CLASSES2 = {
   sm: "space-y-4",
   md: "space-y-6",
   lg: "space-y-8",
   none: ""
 };
-var PageContent = React41.forwardRef(
-  ({ className, gap = "md", padded = true, children, ...props }, ref) => /* @__PURE__ */ jsx58(
+var PageContent = React36.forwardRef(
+  ({ className, gap = "md", padded = true, children, ...props }, ref) => /* @__PURE__ */ jsx50(
     "div",
     {
       ref,
@@ -4877,14 +4465,14 @@ var PageContent = React41.forwardRef(
 PageContent.displayName = "PageContent";
 
 // src/media-object.tsx
-import * as React42 from "react";
-import { jsx as jsx59, jsxs as jsxs45 } from "react/jsx-runtime";
+import * as React37 from "react";
+import { jsx as jsx51, jsxs as jsxs40 } from "react/jsx-runtime";
 var MEDIA_SIZE = {
   sm: "h-8 w-8",
   md: "h-10 w-10",
   lg: "h-12 w-12"
 };
-var MediaObject = React42.forwardRef(
+var MediaObject = React37.forwardRef(
   ({
     className,
     media,
@@ -4897,7 +4485,7 @@ var MediaObject = React42.forwardRef(
     ...props
   }, ref) => {
     if (stacked) {
-      return /* @__PURE__ */ jsxs45(
+      return /* @__PURE__ */ jsxs40(
         "div",
         {
           ref,
@@ -4907,17 +4495,17 @@ var MediaObject = React42.forwardRef(
           ),
           ...props,
           children: [
-            /* @__PURE__ */ jsx59("div", { className: cn("flex-shrink-0", MEDIA_SIZE[mediaSize]), children: media }),
-            /* @__PURE__ */ jsxs45("div", { className: "min-w-0", children: [
-              title && /* @__PURE__ */ jsx59("p", { className: "font-medium text-foreground", children: title }),
-              description && /* @__PURE__ */ jsx59("p", { className: "text-sm text-muted-foreground", children: description })
+            /* @__PURE__ */ jsx51("div", { className: cn("flex-shrink-0", MEDIA_SIZE[mediaSize]), children: media }),
+            /* @__PURE__ */ jsxs40("div", { className: "min-w-0", children: [
+              title && /* @__PURE__ */ jsx51("p", { className: "font-medium text-foreground", children: title }),
+              description && /* @__PURE__ */ jsx51("p", { className: "text-sm text-muted-foreground", children: description })
             ] }),
-            action && /* @__PURE__ */ jsx59("div", { children: action })
+            action && /* @__PURE__ */ jsx51("div", { children: action })
           ]
         }
       );
     }
-    return /* @__PURE__ */ jsxs45(
+    return /* @__PURE__ */ jsxs40(
       "div",
       {
         ref,
@@ -4928,12 +4516,12 @@ var MediaObject = React42.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsx59("div", { className: cn("flex-shrink-0", MEDIA_SIZE[mediaSize]), children: media }),
-          /* @__PURE__ */ jsxs45("div", { className: "min-w-0 flex-1", children: [
-            title && /* @__PURE__ */ jsx59("p", { className: "font-medium text-foreground", children: title }),
-            description && /* @__PURE__ */ jsx59("p", { className: "text-sm text-muted-foreground", children: description })
+          /* @__PURE__ */ jsx51("div", { className: cn("flex-shrink-0", MEDIA_SIZE[mediaSize]), children: media }),
+          /* @__PURE__ */ jsxs40("div", { className: "min-w-0 flex-1", children: [
+            title && /* @__PURE__ */ jsx51("p", { className: "font-medium text-foreground", children: title }),
+            description && /* @__PURE__ */ jsx51("p", { className: "text-sm text-muted-foreground", children: description })
           ] }),
-          action && /* @__PURE__ */ jsx59("div", { className: "flex-shrink-0", children: action })
+          action && /* @__PURE__ */ jsx51("div", { className: "flex-shrink-0", children: action })
         ]
       }
     );
@@ -4942,16 +4530,16 @@ var MediaObject = React42.forwardRef(
 MediaObject.displayName = "MediaObject";
 
 // src/page-patterns.tsx
-import * as React43 from "react";
-import { jsx as jsx60, jsxs as jsxs46 } from "react/jsx-runtime";
+import * as React38 from "react";
+import { jsx as jsx52, jsxs as jsxs41 } from "react/jsx-runtime";
 var GUTTER_WIDTHS = {
   /** A single column of reading or a short list. */
   narrow: "max-w-content-md",
   /** A detail or list page with a side panel. */
   default: "max-w-content-xl"
 };
-var PageGutter = React43.forwardRef(
-  ({ className, width = "default", ...props }, ref) => /* @__PURE__ */ jsx60(
+var PageGutter = React38.forwardRef(
+  ({ className, width = "default", ...props }, ref) => /* @__PURE__ */ jsx52(
     "div",
     {
       ref,
@@ -4965,29 +4553,29 @@ var PageGutter = React43.forwardRef(
   )
 );
 PageGutter.displayName = "PageGutter";
-var PageHeading = React43.forwardRef(
-  ({ className, title, description, meta, actions, ...props }, ref) => /* @__PURE__ */ jsxs46(
+var PageHeading = React38.forwardRef(
+  ({ className, title, description, meta, actions, ...props }, ref) => /* @__PURE__ */ jsxs41(
     "header",
     {
       ref,
       className: cn(
-        "flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between",
+        "flex flex-col gap-4 sm:flex-row sm:flex-wrap sm:items-start sm:justify-between",
         className
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs46("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
-          /* @__PURE__ */ jsx60("h1", { className: "break-words text-2xl font-semibold tracking-tight text-foreground sm:text-3xl", children: title }),
-          description && /* @__PURE__ */ jsx60("p", { className: "break-words text-sm text-muted-foreground sm:text-base", children: description }),
-          meta && /* @__PURE__ */ jsx60("div", { className: "mt-2 flex flex-wrap gap-2", children: meta })
+        /* @__PURE__ */ jsxs41("div", { className: "flex min-w-0 flex-1 flex-col gap-1 sm:basis-80", children: [
+          /* @__PURE__ */ jsx52("h1", { className: "break-words text-2xl font-semibold tracking-tight text-foreground sm:text-3xl", children: title }),
+          description && /* @__PURE__ */ jsx52("p", { className: "break-words text-sm text-muted-foreground sm:text-base", children: description }),
+          meta && /* @__PURE__ */ jsx52("div", { className: "mt-2 flex flex-wrap gap-2", children: meta })
         ] }),
-        actions && /* @__PURE__ */ jsx60("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: actions })
+        actions && /* @__PURE__ */ jsx52("div", { className: "flex max-w-full shrink-0 flex-wrap items-center gap-2", children: actions })
       ]
     }
   )
 );
 PageHeading.displayName = "PageHeading";
-var SectionCard = React43.forwardRef(
+var SectionCard = React38.forwardRef(
   ({
     className,
     title,
@@ -5000,14 +4588,14 @@ var SectionCard = React43.forwardRef(
   }, ref) => {
     const pad = size === "compact" ? "p-4" : "p-4 sm:p-6";
     const hasHead = Boolean(title || description || actions);
-    return /* @__PURE__ */ jsxs46(
+    return /* @__PURE__ */ jsxs41(
       Card,
       {
         ref,
         className: cn("min-w-0 overflow-hidden", className),
         ...props,
         children: [
-          hasHead && /* @__PURE__ */ jsxs46(
+          hasHead && /* @__PURE__ */ jsxs41(
             "div",
             {
               className: cn(
@@ -5017,8 +4605,8 @@ var SectionCard = React43.forwardRef(
                 flush && children ? "border-b border-border" : ""
               ),
               children: [
-                /* @__PURE__ */ jsxs46("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
-                  title && /* @__PURE__ */ jsx60(
+                /* @__PURE__ */ jsxs41("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+                  title && /* @__PURE__ */ jsx52(
                     "h2",
                     {
                       className: cn(
@@ -5028,36 +4616,36 @@ var SectionCard = React43.forwardRef(
                       children: title
                     }
                   ),
-                  description && /* @__PURE__ */ jsx60("p", { className: "text-sm text-muted-foreground", children: description })
+                  description && /* @__PURE__ */ jsx52("p", { className: "text-sm text-muted-foreground", children: description })
                 ] }),
-                actions && /* @__PURE__ */ jsx60("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: actions })
+                actions && /* @__PURE__ */ jsx52("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: actions })
               ]
             }
           ),
-          children !== void 0 && children !== null && /* @__PURE__ */ jsx60("div", { className: cn("min-w-0", !flush && pad), children })
+          children !== void 0 && children !== null && /* @__PURE__ */ jsx52("div", { className: cn("min-w-0", !flush && pad), children })
         ]
       }
     );
   }
 );
 SectionCard.displayName = "SectionCard";
-var TabbedCard = React43.forwardRef(
-  ({ className, tabs, tabsLabel, children, ...props }, ref) => /* @__PURE__ */ jsxs46(
+var TabbedCard = React38.forwardRef(
+  ({ className, tabs, tabsLabel, children, ...props }, ref) => /* @__PURE__ */ jsxs41(
     Card,
     {
       ref,
       className: cn("min-w-0 overflow-hidden", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx60("div", { className: "px-4 pt-3 sm:px-6", children: /* @__PURE__ */ jsx60(TabBar, { variant: "underline", "aria-label": tabsLabel, children: tabs }) }),
-        /* @__PURE__ */ jsx60("div", { className: "min-w-0 p-4 sm:p-6", children })
+        /* @__PURE__ */ jsx52("div", { className: "px-4 pt-3 sm:px-6", children: /* @__PURE__ */ jsx52(TabBar, { variant: "underline", "aria-label": tabsLabel, children: tabs }) }),
+        /* @__PURE__ */ jsx52("div", { className: "min-w-0 p-4 sm:p-6", children })
       ]
     }
   )
 );
 TabbedCard.displayName = "TabbedCard";
-var SidePanelLayout = React43.forwardRef(
-  ({ className, aside, asideLabel, children, ...props }, ref) => /* @__PURE__ */ jsxs46(
+var SidePanelLayout = React38.forwardRef(
+  ({ className, aside, asideLabel, children, ...props }, ref) => /* @__PURE__ */ jsxs41(
     "div",
     {
       ref,
@@ -5067,8 +4655,8 @@ var SidePanelLayout = React43.forwardRef(
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx60("div", { className: "flex min-w-0 flex-col gap-6 lg:col-span-2", children }),
-        /* @__PURE__ */ jsx60(
+        /* @__PURE__ */ jsx52("div", { className: "flex min-w-0 flex-col gap-6 lg:col-span-2", children }),
+        /* @__PURE__ */ jsx52(
           "aside",
           {
             "aria-label": asideLabel,
@@ -5082,46 +4670,18 @@ var SidePanelLayout = React43.forwardRef(
 );
 SidePanelLayout.displayName = "SidePanelLayout";
 
-// src/intent-badge.tsx
-import * as React44 from "react";
-import { jsx as jsx61 } from "react/jsx-runtime";
-var INTENT_CLASSES = {
-  neutral: "bg-muted text-muted-foreground border-border",
-  // the primary tint is lighter than the intents': `primary-text` on a 10%
-  // tint over the page grey drew 4.46:1 (W1 sheet), under AA
-  primary: "bg-primary/5 text-primary-text border-primary/30",
-  ...INTENT_SUBTLE_STYLES
-};
-var IntentBadge = React44.forwardRef(
-  ({ className, intent = "neutral", children, ...props }, ref) => /* @__PURE__ */ jsx61(
-    "span",
-    {
-      ref,
-      title: typeof children === "string" ? children : void 0,
-      className: cn(
-        "inline-flex max-w-full items-center rounded-full border px-2.5 py-0.5 text-xs font-medium",
-        INTENT_CLASSES[intent],
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsx61("span", { className: "truncate", children: isEmptyValue(children) ? /* @__PURE__ */ jsx61(EmptyValue, {}) : children })
-    }
-  )
-);
-IntentBadge.displayName = "IntentBadge";
-
 // src/overflow-menu.tsx
-import * as React45 from "react";
-import { Fragment as Fragment10, jsx as jsx62, jsxs as jsxs47 } from "react/jsx-runtime";
+import * as React39 from "react";
+import { Fragment as Fragment8, jsx as jsx53, jsxs as jsxs42 } from "react/jsx-runtime";
 function OverflowMenu({
   label,
   items,
   defaultOpen = false,
   className
 }) {
-  const [open, setOpen] = React45.useState(defaultOpen);
-  const menuId = React45.useId();
-  React45.useEffect(() => {
+  const [open, setOpen] = React39.useState(defaultOpen);
+  const menuId = React39.useId();
+  React39.useEffect(() => {
     if (!open) return;
     const onKey = (e) => {
       if (e.key === "Escape") setOpen(false);
@@ -5129,8 +4689,8 @@ function OverflowMenu({
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
   }, [open]);
-  return /* @__PURE__ */ jsxs47("div", { className: cn("relative inline-block", className), children: [
-    /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsxs42("div", { className: cn("relative inline-block", className), children: [
+    /* @__PURE__ */ jsx53(
       Button,
       {
         variant: "outline",
@@ -5140,11 +4700,11 @@ function OverflowMenu({
         "aria-expanded": open,
         "aria-controls": open ? menuId : void 0,
         onClick: () => setOpen(!open),
-        children: /* @__PURE__ */ jsx62(Icon, { name: "ellipsis", size: "sm" })
+        children: /* @__PURE__ */ jsx53(Icon, { name: "ellipsis", size: "sm" })
       }
     ),
-    open && /* @__PURE__ */ jsxs47(Fragment10, { children: [
-      /* @__PURE__ */ jsx62(
+    open && /* @__PURE__ */ jsxs42(Fragment8, { children: [
+      /* @__PURE__ */ jsx53(
         "div",
         {
           "aria-hidden": "true",
@@ -5152,14 +4712,14 @@ function OverflowMenu({
           onClick: () => setOpen(false)
         }
       ),
-      /* @__PURE__ */ jsx62(
+      /* @__PURE__ */ jsx53(
         "div",
         {
           id: menuId,
           role: "menu",
           "aria-label": label,
           className: "z-dropdown absolute right-0 top-full mt-2 flex w-56 max-w-[calc(100vw-2rem)] flex-col rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-lg",
-          children: items.map((item) => /* @__PURE__ */ jsxs47(
+          children: items.map((item) => /* @__PURE__ */ jsxs42(
             "button",
             {
               type: "button",
@@ -5174,8 +4734,8 @@ function OverflowMenu({
                 item.destructive ? "text-intent-error-foreground" : "text-popover-foreground"
               ),
               children: [
-                item.icon && /* @__PURE__ */ jsx62(Icon, { name: item.icon, size: "sm" }),
-                /* @__PURE__ */ jsx62("span", { className: "min-w-0 truncate", children: item.label })
+                item.icon && /* @__PURE__ */ jsx53(Icon, { name: item.icon, size: "sm" }),
+                /* @__PURE__ */ jsx53("span", { className: "min-w-0 truncate", children: item.label })
               ]
             },
             item.label
@@ -5187,9 +4747,9 @@ function OverflowMenu({
 }
 
 // src/stage-list.tsx
-import * as React46 from "react";
-import { jsx as jsx63, jsxs as jsxs48 } from "react/jsx-runtime";
-var StageList = React46.forwardRef(
+import * as React40 from "react";
+import { jsx as jsx54, jsxs as jsxs43 } from "react/jsx-runtime";
+var StageList = React40.forwardRef(
   ({ stages, outcomes = [], current, ...props }, ref) => {
     const at = stages.findIndex((s) => s.value === current);
     const outcome = outcomes.find((s) => s.value === current);
@@ -5197,7 +4757,7 @@ var StageList = React46.forwardRef(
       throw new Error(
         `StageList: current "${current}" is not one of the stages (${stages.map((s) => s.value).join(", ")}) or outcomes (${outcomes.map((s) => s.value).join(", ") || "none"})`
       );
-    return /* @__PURE__ */ jsxs48(
+    return /* @__PURE__ */ jsxs43(
       Stepper,
       {
         ref,
@@ -5206,7 +4766,7 @@ var StageList = React46.forwardRef(
         activeStep: outcome ? stages.length : at,
         ...props,
         children: [
-          stages.map((s) => /* @__PURE__ */ jsx63(
+          stages.map((s) => /* @__PURE__ */ jsx54(
             StepperStep,
             {
               label: s.label,
@@ -5214,7 +4774,7 @@ var StageList = React46.forwardRef(
             },
             s.value
           )),
-          outcome && /* @__PURE__ */ jsx63(StepperStep, { label: outcome.label, error: true }, outcome.value)
+          outcome && /* @__PURE__ */ jsx54(StepperStep, { label: outcome.label, error: true }, outcome.value)
         ]
       }
     );
@@ -5223,15 +4783,15 @@ var StageList = React46.forwardRef(
 StageList.displayName = "StageList";
 
 // src/clamped-list.tsx
-import * as React47 from "react";
-import { jsx as jsx64, jsxs as jsxs49 } from "react/jsx-runtime";
+import * as React41 from "react";
+import { jsx as jsx55, jsxs as jsxs44 } from "react/jsx-runtime";
 var MAX_HEIGHTS = {
   sm: "max-h-48",
   md: "max-h-72",
   lg: "max-h-96"
 };
-var ClampedList = React47.forwardRef(
-  ({ className, label, maxHeight = "md", children, ...props }, ref) => /* @__PURE__ */ jsxs49(
+var ClampedList = React41.forwardRef(
+  ({ className, label, maxHeight = "md", children, ...props }, ref) => /* @__PURE__ */ jsxs44(
     "div",
     {
       ref,
@@ -5247,13 +4807,13 @@ var ClampedList = React47.forwardRef(
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx64(
+        /* @__PURE__ */ jsx55(
           "div",
           {
             "aria-hidden": "true",
             "data-scroll-hint": "y",
             className: SCROLL_HINT_Y_MARK,
-            children: /* @__PURE__ */ jsx64("span", { className: "flex items-center rounded-full border border-border bg-card px-2 text-muted-foreground shadow-sm", children: /* @__PURE__ */ jsx64(Icon, { name: "chevron-down", size: "sm" }) })
+            children: /* @__PURE__ */ jsx55("span", { className: "flex items-center rounded-full border border-border bg-card px-2 text-muted-foreground shadow-sm", children: /* @__PURE__ */ jsx55(Icon, { name: "chevron-down", size: "sm" }) })
           }
         )
       ]
@@ -5263,10 +4823,10 @@ var ClampedList = React47.forwardRef(
 ClampedList.displayName = "ClampedList";
 
 // src/textarea.tsx
-import * as React48 from "react";
-import { jsx as jsx65, jsxs as jsxs50 } from "react/jsx-runtime";
+import * as React42 from "react";
+import { jsx as jsx56, jsxs as jsxs45 } from "react/jsx-runtime";
 var lengthOf = (v) => v === void 0 ? 0 : Array.isArray(v) ? v.join(",").length : String(v).length;
-var Textarea = React48.forwardRef(
+var Textarea = React42.forwardRef(
   ({
     className,
     error,
@@ -5281,11 +4841,11 @@ var Textarea = React48.forwardRef(
     onChange,
     ...props
   }, ref) => {
-    const countId = React48.useId();
-    const [typed, setTyped] = React48.useState(() => lengthOf(defaultValue));
+    const countId = React42.useId();
+    const [typed, setTyped] = React42.useState(() => lengthOf(defaultValue));
     const count = value === void 0 ? typed : lengthOf(value);
     const aria = fieldAria(error, errorMessageId);
-    const field = /* @__PURE__ */ jsx65(
+    const field = /* @__PURE__ */ jsx56(
       "textarea",
       {
         ref,
@@ -5310,9 +4870,9 @@ var Textarea = React48.forwardRef(
     );
     if (!showCount) return field;
     const atLimit = maxLength !== void 0 && count >= maxLength;
-    return /* @__PURE__ */ jsxs50("div", { className: "w-full min-w-0 space-y-1", children: [
+    return /* @__PURE__ */ jsxs45("div", { className: "w-full min-w-0 space-y-1", children: [
       field,
-      /* @__PURE__ */ jsx65(
+      /* @__PURE__ */ jsx56(
         "p",
         {
           id: countId,
@@ -5329,8 +4889,8 @@ var Textarea = React48.forwardRef(
 Textarea.displayName = "Textarea";
 
 // src/select.tsx
-import * as React49 from "react";
-import { jsx as jsx66, jsxs as jsxs51 } from "react/jsx-runtime";
+import * as React43 from "react";
+import { jsx as jsx57, jsxs as jsxs46 } from "react/jsx-runtime";
 var CHEVRON_END = {
   sm: "right-2.5",
   md: "right-3",
@@ -5341,7 +4901,7 @@ var END_PADDING = {
   md: "pr-9",
   lg: "pr-10"
 };
-var Select = React49.forwardRef(
+var Select = React43.forwardRef(
   ({
     className,
     options,
@@ -5359,8 +4919,8 @@ var Select = React49.forwardRef(
         "Select: pass `options` or `<option>` children, not both"
       );
     const showsPlaceholder = placeholder !== void 0 && value === void 0 && defaultValue === void 0;
-    return /* @__PURE__ */ jsxs51("div", { className: "relative w-full min-w-0", children: [
-      /* @__PURE__ */ jsxs51(
+    return /* @__PURE__ */ jsxs46("div", { className: "relative w-full min-w-0", children: [
+      /* @__PURE__ */ jsxs46(
         "select",
         {
           ref,
@@ -5377,13 +4937,13 @@ var Select = React49.forwardRef(
           ),
           ...props,
           children: [
-            placeholder !== void 0 && /* @__PURE__ */ jsx66("option", { value: "", disabled: true, hidden: true, children: placeholder }),
-            options?.map((o) => /* @__PURE__ */ jsx66("option", { value: o.value, disabled: o.disabled, children: o.label }, o.value)),
+            placeholder !== void 0 && /* @__PURE__ */ jsx57("option", { value: "", disabled: true, hidden: true, children: placeholder }),
+            options?.map((o) => /* @__PURE__ */ jsx57("option", { value: o.value, disabled: o.disabled, children: o.label }, o.value)),
             children
           ]
         }
       ),
-      /* @__PURE__ */ jsx66(
+      /* @__PURE__ */ jsx57(
         Icon,
         {
           name: "chevron-down",
@@ -5400,13 +4960,13 @@ var Select = React49.forwardRef(
 Select.displayName = "Select";
 
 // src/checkbox.tsx
-import * as React50 from "react";
-import { jsx as jsx67, jsxs as jsxs52 } from "react/jsx-runtime";
+import * as React44 from "react";
+import { jsx as jsx58, jsxs as jsxs47 } from "react/jsx-runtime";
 var BOX = {
   sm: "size-4",
   md: "size-5"
 };
-var Checkbox = React50.forwardRef(
+var Checkbox = React44.forwardRef(
   ({
     className,
     indeterminate = false,
@@ -5420,23 +4980,23 @@ var Checkbox = React50.forwardRef(
     id,
     ...props
   }, ref) => {
-    const autoId = React50.useId();
+    const autoId = React44.useId();
     const inputId = id ?? autoId;
     const descId = `${inputId}-description`;
     const errorId = `${inputId}-error`;
-    const inner = React50.useRef(null);
-    React50.useImperativeHandle(ref, () => {
+    const inner = React44.useRef(null);
+    React44.useImperativeHandle(ref, () => {
       if (!inner.current) throw new Error("Checkbox: the input is not mounted");
       return inner.current;
     });
-    React50.useEffect(() => {
+    React44.useEffect(() => {
       if (inner.current) inner.current.indeterminate = indeterminate;
     }, [indeterminate]);
     const hasError = Boolean(error);
     const message = typeof error === "string" ? error : void 0;
     const describedBy = [description ? descId : void 0, message ? errorId : void 0].filter(Boolean).join(" ") || void 0;
-    return /* @__PURE__ */ jsxs52("div", { className: cn("flex items-start gap-2", className), children: [
-      /* @__PURE__ */ jsxs52(
+    return /* @__PURE__ */ jsxs47("div", { className: cn("flex items-start gap-2", className), children: [
+      /* @__PURE__ */ jsxs47(
         "span",
         {
           className: cn(
@@ -5444,7 +5004,7 @@ var Checkbox = React50.forwardRef(
             size === "sm" ? "mt-0.5" : "mt-px"
           ),
           children: [
-            /* @__PURE__ */ jsx67(
+            /* @__PURE__ */ jsx58(
               "input",
               {
                 ref: inner,
@@ -5471,13 +5031,13 @@ var Checkbox = React50.forwardRef(
                 ...props
               }
             ),
-            indeterminate ? /* @__PURE__ */ jsx67(
+            indeterminate ? /* @__PURE__ */ jsx58(
               "span",
               {
                 "aria-hidden": "true",
                 className: "pointer-events-none absolute h-0.5 w-1/2 rounded-full bg-primary-foreground"
               }
-            ) : /* @__PURE__ */ jsx67(
+            ) : /* @__PURE__ */ jsx58(
               Icon,
               {
                 name: "check",
@@ -5488,8 +5048,8 @@ var Checkbox = React50.forwardRef(
           ]
         }
       ),
-      (label || description || message) && /* @__PURE__ */ jsxs52("div", { className: "min-w-0 space-y-0.5", children: [
-        label && /* @__PURE__ */ jsx67(
+      (label || description || message) && /* @__PURE__ */ jsxs47("div", { className: "min-w-0 space-y-0.5", children: [
+        label && /* @__PURE__ */ jsx58(
           Label,
           {
             htmlFor: inputId,
@@ -5502,14 +5062,14 @@ var Checkbox = React50.forwardRef(
             children: label
           }
         ),
-        description && /* @__PURE__ */ jsx67("p", { id: descId, className: "text-xs text-muted-foreground", children: description }),
-        message && /* @__PURE__ */ jsx67("p", { id: errorId, className: "text-intent-error-foreground text-xs", children: message })
+        description && /* @__PURE__ */ jsx58("p", { id: descId, className: "text-xs text-muted-foreground", children: description }),
+        message && /* @__PURE__ */ jsx58("p", { id: errorId, className: "text-intent-error-foreground text-xs", children: message })
       ] })
     ] });
   }
 );
 Checkbox.displayName = "Checkbox";
-var CheckboxGroup = React50.forwardRef(
+var CheckboxGroup = React44.forwardRef(
   ({
     className,
     legend,
@@ -5522,8 +5082,8 @@ var CheckboxGroup = React50.forwardRef(
     size = "md",
     ...props
   }, ref) => {
-    const errorId = React50.useId();
-    return /* @__PURE__ */ jsxs52(
+    const errorId = React44.useId();
+    return /* @__PURE__ */ jsxs47(
       "fieldset",
       {
         ref,
@@ -5532,14 +5092,14 @@ var CheckboxGroup = React50.forwardRef(
         className: cn("min-w-0 space-y-2", className),
         ...props,
         children: [
-          /* @__PURE__ */ jsx67("legend", { className: "mb-2 text-sm font-medium text-foreground", children: legend }),
-          /* @__PURE__ */ jsx67(
+          /* @__PURE__ */ jsx58("legend", { className: "mb-2 text-sm font-medium text-foreground", children: legend }),
+          /* @__PURE__ */ jsx58(
             "div",
             {
               className: cn(
                 orientation === "horizontal" ? "flex flex-wrap gap-x-6 gap-y-2" : "space-y-2"
               ),
-              children: options.map((o) => /* @__PURE__ */ jsx67(
+              children: options.map((o) => /* @__PURE__ */ jsx58(
                 Checkbox,
                 {
                   name,
@@ -5559,7 +5119,7 @@ var CheckboxGroup = React50.forwardRef(
               ))
             }
           ),
-          error && /* @__PURE__ */ jsx67("p", { id: errorId, className: "text-intent-error-foreground text-sm", children: error })
+          error && /* @__PURE__ */ jsx58("p", { id: errorId, className: "text-intent-error-foreground text-sm", children: error })
         ]
       }
     );
@@ -5568,15 +5128,15 @@ var CheckboxGroup = React50.forwardRef(
 CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/progress.tsx
-import * as React51 from "react";
-import { jsx as jsx68, jsxs as jsxs53 } from "react/jsx-runtime";
+import * as React45 from "react";
+import { jsx as jsx59, jsxs as jsxs48 } from "react/jsx-runtime";
 var FILL = {
   primary: "bg-primary-solid dark:bg-primary",
   success: "bg-intent-success-solid dark:bg-intent-success",
   warning: "bg-intent-warning-solid dark:bg-intent-warning",
   error: "bg-intent-error-solid dark:bg-intent-error"
 };
-var Progress = React51.forwardRef(
+var Progress = React45.forwardRef(
   ({
     className,
     value,
@@ -5588,11 +5148,11 @@ var Progress = React51.forwardRef(
   }, ref) => {
     if (value !== void 0 && !(value >= 0 && value <= 100))
       throw new Error(`Progress: value must be within 0\u2013100, got ${value}`);
-    const labelId = React51.useId();
+    const labelId = React45.useId();
     const shown = Math.round(value ?? 0);
-    return /* @__PURE__ */ jsxs53("div", { ref, className: cn("w-full min-w-0 space-y-1.5", className), children: [
-      (label || showValue && value !== void 0) && /* @__PURE__ */ jsxs53("div", { className: "flex items-baseline justify-between gap-3 text-sm", children: [
-        label && /* @__PURE__ */ jsx68(
+    return /* @__PURE__ */ jsxs48("div", { ref, className: cn("w-full min-w-0 space-y-1.5", className), children: [
+      (label || showValue && value !== void 0) && /* @__PURE__ */ jsxs48("div", { className: "flex items-baseline justify-between gap-3 text-sm", children: [
+        label && /* @__PURE__ */ jsx59(
           "span",
           {
             id: labelId,
@@ -5600,12 +5160,12 @@ var Progress = React51.forwardRef(
             children: label
           }
         ),
-        showValue && value !== void 0 && /* @__PURE__ */ jsxs53("span", { className: "ml-auto shrink-0 tabular-nums text-muted-foreground", children: [
+        showValue && value !== void 0 && /* @__PURE__ */ jsxs48("span", { className: "ml-auto shrink-0 tabular-nums text-muted-foreground", children: [
           shown,
           "%"
         ] })
       ] }),
-      /* @__PURE__ */ jsx68(
+      /* @__PURE__ */ jsx59(
         "div",
         {
           role: "progressbar",
@@ -5619,7 +5179,7 @@ var Progress = React51.forwardRef(
             size === "sm" ? "h-1.5" : "h-2.5"
           ),
           ...props,
-          children: /* @__PURE__ */ jsx68(
+          children: /* @__PURE__ */ jsx59(
             "div",
             {
               "data-ui-boundary": "",
@@ -5639,10 +5199,10 @@ var Progress = React51.forwardRef(
 Progress.displayName = "Progress";
 
 // src/hooks/use-debounce.ts
-import { useEffect as useEffect12, useState as useState12 } from "react";
+import { useEffect as useEffect7, useState as useState11 } from "react";
 function useDebounce(value, ms) {
-  const [debounced, setDebounced] = useState12(value);
-  useEffect12(() => {
+  const [debounced, setDebounced] = useState11(value);
+  useEffect7(() => {
     const handle = setTimeout(() => setDebounced(value), ms);
     return () => clearTimeout(handle);
   }, [value, ms]);
@@ -5664,7 +5224,7 @@ export {
   Button,
   ButtonGroup,
   ButtonGroupItem,
-  Calendar2 as Calendar,
+  Calendar,
   Card,
   CardContent,
   CardDescription,