@kinetixui/ui 0.6.4 → 0.7.0

package/dist/index.js

@@ -20,7 +20,7 @@ var buttonVariants = cva(
     "font-sans font-medium whitespace-nowrap select-none",
     "rounded-md transition-colors outline-none",
     "focus-visible:shadow-focus",
-    "disabled:pointer-events-none disabled:opacity-50",
+    "disabled:pointer-events-none disabled:opacity-disabled",
     "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-[18px]"
   ],
   {
@@ -59,7 +59,7 @@ var buttonVariants = cva(
         Hover: "",
         Focus: "shadow-focus",
         Active: "",
-        Disabled: "pointer-events-none opacity-50"
+        Disabled: "pointer-events-none opacity-disabled"
       },
       /** corner style — matches the design source's Corners property */
       corners: {
@@ -114,7 +114,7 @@ var inputVariants = cva2(
     "placeholder:text-muted-foreground",
     "outline-none transition-colors",
     "focus-visible:border-primary focus-visible:shadow-focus",
-    "disabled:cursor-not-allowed disabled:opacity-50",
+    "disabled:cursor-not-allowed disabled:opacity-disabled",
     "aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:border-destructive aria-[invalid=true]:focus-visible:shadow-focus-destructive"
   ],
   {
@@ -123,7 +123,7 @@ var inputVariants = cva2(
         Default: "",
         Focus: "border-primary shadow-focus",
         Error: "border-destructive",
-        Disabled: "opacity-50 pointer-events-none"
+        Disabled: "opacity-disabled pointer-events-none"
       },
       /** corner style — matches the design source's Corners property */
       corners: {
@@ -164,7 +164,7 @@ var textareaVariants = cva3(
     "placeholder:text-muted-foreground",
     "outline-none transition-colors",
     "focus-visible:border-primary focus-visible:shadow-focus",
-    "disabled:cursor-not-allowed disabled:opacity-50",
+    "disabled:cursor-not-allowed disabled:opacity-disabled",
     "aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-visible:border-destructive aria-[invalid=true]:focus-visible:shadow-focus-destructive"
   ],
   {
@@ -173,7 +173,7 @@ var textareaVariants = cva3(
         Default: "",
         Focus: "border-primary shadow-focus",
         Error: "border-destructive",
-        Disabled: "opacity-50 pointer-events-none resize-none"
+        Disabled: "opacity-disabled pointer-events-none resize-none"
       }
     },
     defaultVariants: { state: "Default" }
@@ -214,7 +214,7 @@ var AccordionTrigger = React4.forwardRef(({ className, children, ...props }, ref
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx4(ChevronDown, { className: "size-4 shrink-0 text-muted-foreground transition-transform duration-200" })
+      /* @__PURE__ */ jsx4(ChevronDown, { className: "size-4 shrink-0 text-muted-foreground transition-transform duration-fast" })
     ]
   }
 ) }));
@@ -270,7 +270,7 @@ var AlertDialogOverlay = React6.forwardRef(({ className, ...props }, ref) => /*
   {
     ref,
     className: cn(
-      "fixed inset-0 z-50 bg-foreground/40 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-overlay bg-foreground/40 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     ),
     ...props
@@ -284,7 +284,7 @@ var AlertDialogContent = React6.forwardRef(({ className, ...props }, ref) => /*
     {
       ref,
       className: cn(
-        "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg sm:rounded-xl font-sans",
+        "fixed left-1/2 top-1/2 z-overlay grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg sm:rounded-xl font-sans",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
         className
       ),
@@ -381,6 +381,8 @@ var AvatarGroup = React7.forwardRef(
 AvatarGroup.displayName = "AvatarGroup";
 
 // src/components/badge.tsx
+import * as React8 from "react";
+import { Slot as Slot2 } from "@radix-ui/react-slot";
 import { cva as cva5 } from "class-variance-authority";
 import { jsx as jsx8 } from "react/jsx-runtime";
 var badgeVariants = cva5(
@@ -398,20 +400,24 @@ var badgeVariants = cva5(
     defaultVariants: { variant: "default" }
   }
 );
-function Badge({ className, variant, ...props }) {
-  return /* @__PURE__ */ jsx8("div", { className: cn(badgeVariants({ variant }), className), ...props });
-}
+var Badge = React8.forwardRef(
+  ({ className, variant, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot2 : "div";
+    return /* @__PURE__ */ jsx8(Comp, { ref, className: cn(badgeVariants({ variant }), className), ...props });
+  }
+);
+Badge.displayName = "Badge";
 
 // src/components/breadcrumb.tsx
-import * as React8 from "react";
-import { Slot as Slot2 } from "@radix-ui/react-slot";
+import * as React9 from "react";
+import { Slot as Slot3 } from "@radix-ui/react-slot";
 import { ChevronRight, MoreHorizontal } from "lucide-react";
 import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
-var Breadcrumb = React8.forwardRef(
+var Breadcrumb = React9.forwardRef(
   ({ ...props }, ref) => /* @__PURE__ */ jsx9("nav", { ref, "aria-label": "breadcrumb", className: "font-sans", ...props })
 );
 Breadcrumb.displayName = "Breadcrumb";
-var BreadcrumbList = React8.forwardRef(
+var BreadcrumbList = React9.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
     "ol",
     {
@@ -422,16 +428,16 @@ var BreadcrumbList = React8.forwardRef(
   )
 );
 BreadcrumbList.displayName = "BreadcrumbList";
-var BreadcrumbItem = React8.forwardRef(
+var BreadcrumbItem = React9.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx9("li", { ref, className: cn("inline-flex items-center gap-1.5", className), ...props })
 );
 BreadcrumbItem.displayName = "BreadcrumbItem";
-var BreadcrumbLink = React8.forwardRef(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? Slot2 : "a";
+var BreadcrumbLink = React9.forwardRef(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot3 : "a";
   return /* @__PURE__ */ jsx9(Comp, { ref, className: cn("transition-colors hover:text-foreground", className), ...props });
 });
 BreadcrumbLink.displayName = "BreadcrumbLink";
-var BreadcrumbPage = React8.forwardRef(
+var BreadcrumbPage = React9.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
     "span",
     {
@@ -454,9 +460,9 @@ var BreadcrumbEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsxs4("spa
 BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
 
 // src/components/card.tsx
-import * as React9 from "react";
+import * as React10 from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
-var Card = React9.forwardRef(
+var Card = React10.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
     "div",
     {
@@ -467,40 +473,40 @@ var Card = React9.forwardRef(
   )
 );
 Card.displayName = "Card";
-var CardHeader = React9.forwardRef(
+var CardHeader = React10.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx10("div", { ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })
 );
 CardHeader.displayName = "CardHeader";
-var CardTitle = React9.forwardRef(
+var CardTitle = React10.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx10("div", { ref, className: cn("font-semibold leading-none tracking-tight", className), ...props })
 );
 CardTitle.displayName = "CardTitle";
-var CardDescription = React9.forwardRef(
+var CardDescription = React10.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx10("div", { ref, className: cn("text-sm text-muted-foreground", className), ...props })
 );
 CardDescription.displayName = "CardDescription";
-var CardContent = React9.forwardRef(
+var CardContent = React10.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx10("div", { ref, className: cn("p-6 pt-0", className), ...props })
 );
 CardContent.displayName = "CardContent";
-var CardFooter = React9.forwardRef(
+var CardFooter = React10.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx10("div", { ref, className: cn("flex items-center p-6 pt-0", className), ...props })
 );
 CardFooter.displayName = "CardFooter";
 
 // src/components/checkbox.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Check, Minus } from "lucide-react";
 import { jsx as jsx11 } from "react/jsx-runtime";
-var Checkbox = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
+var Checkbox = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
   CheckboxPrimitive.Root,
   {
     ref,
     className: cn(
       "peer size-[18px] shrink-0 rounded-sm border-2 border-input outline-none transition-colors",
       "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-      "disabled:cursor-not-allowed disabled:opacity-50",
+      "disabled:cursor-not-allowed disabled:opacity-disabled",
       "data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
       "data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground",
       "aria-invalid:border-destructive aria-invalid:data-[state=checked]:border-destructive aria-invalid:data-[state=checked]:bg-destructive",
@@ -519,7 +525,7 @@ var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
 var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
 
 // src/components/dialog.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
 import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
@@ -527,33 +533,33 @@ var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
 var DialogPortal = DialogPrimitive.Portal;
 var DialogClose = DialogPrimitive.Close;
-var DialogOverlay = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
+var DialogOverlay = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
   DialogPrimitive.Overlay,
   {
     ref,
     className: cn(
-      "fixed inset-0 z-50 bg-foreground/40 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-overlay bg-foreground/40 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     ),
     ...props
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React11.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(DialogPortal, { children: [
+var DialogContent = React12.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs5(DialogPortal, { children: [
   /* @__PURE__ */ jsx12(DialogOverlay, {}),
   /* @__PURE__ */ jsxs5(
     DialogPrimitive.Content,
     {
       ref,
       className: cn(
-        "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg sm:rounded-xl font-sans",
+        "fixed left-1/2 top-1/2 z-overlay grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg sm:rounded-xl font-sans",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
         className
       ),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxs5(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring disabled:pointer-events-none", children: [
+        /* @__PURE__ */ jsxs5(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-muted transition-opacity hover:opacity-visible focus:outline-none focus:ring-2 focus:ring-ring disabled:pointer-events-none", children: [
           /* @__PURE__ */ jsx12(X, { className: "size-4" }),
           /* @__PURE__ */ jsx12("span", { className: "sr-only", children: "Close" })
         ] })
@@ -572,7 +578,7 @@ var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx12(
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
+var DialogTitle = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
   DialogPrimitive.Title,
   {
     ref,
@@ -581,7 +587,7 @@ var DialogTitle = React11.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
+var DialogDescription = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
   DialogPrimitive.Description,
   {
     ref,
@@ -592,7 +598,7 @@ var DialogDescription = React11.forwardRef(({ className, ...props }, ref) => /*
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // src/components/dropdown-menu.tsx
-import * as React12 from "react";
+import * as React13 from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { Check as Check2, ChevronRight as ChevronRight2, Circle } from "lucide-react";
 import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
@@ -602,23 +608,23 @@ var DropdownMenuGroup = DropdownMenuPrimitive.Group;
 var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 var DropdownMenuSub = DropdownMenuPrimitive.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-var contentCls = "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md font-sans data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95";
-var itemCls = "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground focus:ring-1 focus:ring-inset focus:ring-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
-var DropdownMenuContent = React12.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx13(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx13(DropdownMenuPrimitive.Content, { ref, sideOffset, className: cn(contentCls, className), ...props }) }));
+var contentCls = "z-overlay min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md font-sans data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95";
+var itemCls = "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground focus:ring-1 focus:ring-inset focus:ring-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-disabled";
+var DropdownMenuContent = React13.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx13(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx13(DropdownMenuPrimitive.Content, { ref, sideOffset, className: cn(contentCls, className), ...props }) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React12.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx13(DropdownMenuPrimitive.Item, { ref, className: cn(itemCls, inset && "pl-8", className), ...props }));
+var DropdownMenuItem = React13.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx13(DropdownMenuPrimitive.Item, { ref, className: cn(itemCls, inset && "pl-8", className), ...props }));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React12.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs6(DropdownMenuPrimitive.CheckboxItem, { ref, className: cn(itemCls, "pl-8", className), checked, ...props, children: [
+var DropdownMenuCheckboxItem = React13.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs6(DropdownMenuPrimitive.CheckboxItem, { ref, className: cn(itemCls, "pl-8", className), checked, ...props, children: [
   /* @__PURE__ */ jsx13("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx13(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx13(Check2, { className: "size-4" }) }) }),
   children
 ] }));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React12.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs6(DropdownMenuPrimitive.RadioItem, { ref, className: cn(itemCls, "pl-8", className), ...props, children: [
+var DropdownMenuRadioItem = React13.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs6(DropdownMenuPrimitive.RadioItem, { ref, className: cn(itemCls, "pl-8", className), ...props, children: [
   /* @__PURE__ */ jsx13("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx13(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx13(Circle, { className: "size-2 fill-current" }) }) }),
   children
 ] }));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React12.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx13(
+var DropdownMenuLabel = React13.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx13(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -627,11 +633,11 @@ var DropdownMenuLabel = React12.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(DropdownMenuPrimitive.Separator, { ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props }));
+var DropdownMenuSeparator = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(DropdownMenuPrimitive.Separator, { ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props }));
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 var DropdownMenuShortcut = ({ className, ...props }) => /* @__PURE__ */ jsx13("span", { className: cn("ml-auto text-xs tracking-widest opacity-60", className), ...props });
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
-var DropdownMenuSubTrigger = React12.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs6(
+var DropdownMenuSubTrigger = React13.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs6(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
@@ -644,23 +650,23 @@ var DropdownMenuSubTrigger = React12.forwardRef(({ className, inset, children, .
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(DropdownMenuPrimitive.SubContent, { ref, className: cn(contentCls, className), ...props }));
+var DropdownMenuSubContent = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(DropdownMenuPrimitive.SubContent, { ref, className: cn(contentCls, className), ...props }));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
 
 // src/components/hover-card.tsx
-import * as React13 from "react";
+import * as React14 from "react";
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
 import { jsx as jsx14 } from "react/jsx-runtime";
 var HoverCard = HoverCardPrimitive.Root;
 var HoverCardTrigger = HoverCardPrimitive.Trigger;
-var HoverCardContent = React13.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx14(
+var HoverCardContent = React14.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx14(
   HoverCardPrimitive.Content,
   {
     ref,
     align,
     sideOffset,
     className: cn(
-      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none font-sans",
+      "z-overlay w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none font-sans",
       "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
       className
     ),
@@ -670,18 +676,18 @@ var HoverCardContent = React13.forwardRef(({ className, align = "center", sideOf
 HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 
 // src/components/label.tsx
-import * as React14 from "react";
+import * as React15 from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { cva as cva6 } from "class-variance-authority";
 import { jsx as jsx15 } from "react/jsx-runtime";
 var labelVariants = cva6(
-  "text-sm font-medium leading-none font-sans peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+  "text-sm font-medium leading-none font-sans peer-disabled:cursor-not-allowed peer-disabled:opacity-muted"
 );
-var Label2 = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props }));
+var Label2 = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props }));
 Label2.displayName = LabelPrimitive.Root.displayName;
 
 // src/components/pagination.tsx
-import * as React15 from "react";
+import * as React16 from "react";
 import { ChevronLeft, ChevronRight as ChevronRight3, MoreHorizontal as MoreHorizontal2 } from "lucide-react";
 import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 var Pagination = ({ className, ...props }) => /* @__PURE__ */ jsx16(
@@ -694,11 +700,11 @@ var Pagination = ({ className, ...props }) => /* @__PURE__ */ jsx16(
   }
 );
 Pagination.displayName = "Pagination";
-var PaginationContent = React15.forwardRef(
+var PaginationContent = React16.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx16("ul", { ref, className: cn("flex flex-row items-center gap-1", className), ...props })
 );
 PaginationContent.displayName = "PaginationContent";
-var PaginationItem = React15.forwardRef(
+var PaginationItem = React16.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx16("li", { ref, className: cn("", className), ...props })
 );
 PaginationItem.displayName = "PaginationItem";
@@ -732,20 +738,20 @@ var PaginationEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsxs7("spa
 PaginationEllipsis.displayName = "PaginationEllipsis";
 
 // src/components/popover.tsx
-import * as React16 from "react";
+import * as React17 from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { jsx as jsx17 } from "react/jsx-runtime";
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
 var PopoverAnchor = PopoverPrimitive.Anchor;
-var PopoverContent = React16.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx17(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx17(
+var PopoverContent = React17.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx17(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx17(
   PopoverPrimitive.Content,
   {
     ref,
     align,
     sideOffset,
     className: cn(
-      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none font-sans",
+      "z-overlay w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none font-sans",
       "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
       "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
@@ -756,10 +762,10 @@ var PopoverContent = React16.forwardRef(({ className, align = "center", sideOffs
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 // src/components/progress.tsx
-import * as React17 from "react";
+import * as React18 from "react";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
 import { jsx as jsx18 } from "react/jsx-runtime";
-var Progress = React17.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ jsx18(
+var Progress = React18.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ jsx18(
   ProgressPrimitive.Root,
   {
     ref,
@@ -777,20 +783,20 @@ var Progress = React17.forwardRef(({ className, value, ...props }, ref) => /* @_
 Progress.displayName = ProgressPrimitive.Root.displayName;
 
 // src/components/radio-group.tsx
-import * as React18 from "react";
+import * as React19 from "react";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { Circle as Circle2 } from "lucide-react";
 import { jsx as jsx19 } from "react/jsx-runtime";
-var RadioGroup2 = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(RadioGroupPrimitive.Root, { ref, className: cn("grid gap-3", className), ...props }));
+var RadioGroup2 = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(RadioGroupPrimitive.Root, { ref, className: cn("grid gap-3", className), ...props }));
 RadioGroup2.displayName = RadioGroupPrimitive.Root.displayName;
-var RadioGroupItem = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
+var RadioGroupItem = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
   RadioGroupPrimitive.Item,
   {
     ref,
     className: cn(
       "aspect-square size-[18px] rounded-full border-2 border-input text-primary outline-none transition-colors",
       "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-      "disabled:cursor-not-allowed disabled:opacity-50",
+      "disabled:cursor-not-allowed disabled:opacity-disabled",
       "data-[state=checked]:border-primary",
       "aria-invalid:border-destructive",
       className
@@ -802,16 +808,16 @@ var RadioGroupItem = React18.forwardRef(({ className, ...props }, ref) => /* @__
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 
 // src/components/scroll-area.tsx
-import * as React19 from "react";
+import * as React20 from "react";
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 import { jsx as jsx20, jsxs as jsxs8 } from "react/jsx-runtime";
-var ScrollArea = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs8(ScrollAreaPrimitive.Root, { ref, className: cn("relative overflow-hidden", className), ...props, children: [
+var ScrollArea = React20.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs8(ScrollAreaPrimitive.Root, { ref, className: cn("relative overflow-hidden", className), ...props, children: [
   /* @__PURE__ */ jsx20(ScrollAreaPrimitive.Viewport, { className: "size-full rounded-[inherit]", children }),
   /* @__PURE__ */ jsx20(ScrollBar, {}),
   /* @__PURE__ */ jsx20(ScrollAreaPrimitive.Corner, {})
 ] }));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React19.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx20(
+var ScrollBar = React20.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx20(
   ScrollAreaPrimitive.ScrollAreaScrollbar,
   {
     ref,
@@ -829,14 +835,14 @@ var ScrollBar = React19.forwardRef(({ className, orientation = "vertical", ...pr
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
 // src/components/select.tsx
-import * as React20 from "react";
+import * as React21 from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check as Check3, ChevronDown as ChevronDown2, ChevronUp } from "lucide-react";
 import { jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React20.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs9(
+var SelectTrigger = React21.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs9(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -848,7 +854,7 @@ var SelectTrigger = React20.forwardRef(({ className, children, ...props }, ref)
       "focus:border-primary focus:shadow-focus",
       "data-[state=open]:border-primary",
       "aria-[invalid=true]:border-destructive aria-[invalid=true]:focus:border-destructive aria-[invalid=true]:focus:shadow-focus-destructive",
-      "disabled:cursor-not-allowed disabled:opacity-50",
+      "disabled:cursor-not-allowed disabled:opacity-disabled",
       className
     ),
     ...props,
@@ -859,13 +865,13 @@ var SelectTrigger = React20.forwardRef(({ className, children, ...props }, ref)
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectContent = React20.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx21(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs9(
+var SelectContent = React21.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx21(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs9(
   SelectPrimitive.Content,
   {
     ref,
     position,
     className: cn(
-      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md font-sans",
+      "relative z-overlay max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md font-sans",
       "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
       position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1",
       className
@@ -885,15 +891,15 @@ var SelectContent = React20.forwardRef(({ className, children, position = "poppe
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx21(SelectPrimitive.Label, { ref, className: cn("px-2 py-1.5 text-sm font-semibold", className), ...props }));
+var SelectLabel = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx21(SelectPrimitive.Label, { ref, className: cn("px-2 py-1.5 text-sm font-semibold", className), ...props }));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React20.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs9(
+var SelectItem = React21.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs9(
   SelectPrimitive.Item,
   {
     ref,
     className: cn(
       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
-      "focus:bg-accent focus:text-accent-foreground focus:ring-1 focus:ring-inset focus:ring-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "focus:bg-accent focus:text-accent-foreground focus:ring-1 focus:ring-inset focus:ring-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-disabled",
       className
     ),
     ...props,
@@ -904,14 +910,14 @@ var SelectItem = React20.forwardRef(({ className, children, ...props }, ref) =>
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx21(SelectPrimitive.Separator, { ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props }));
+var SelectSeparator = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx21(SelectPrimitive.Separator, { ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props }));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 // src/components/separator.tsx
-import * as React21 from "react";
+import * as React22 from "react";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import { jsx as jsx22 } from "react/jsx-runtime";
-var Separator3 = React21.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx22(
+var Separator3 = React22.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx22(
   SeparatorPrimitive.Root,
   {
     ref,
@@ -928,7 +934,7 @@ var Separator3 = React21.forwardRef(({ className, orientation = "horizontal", de
 Separator3.displayName = SeparatorPrimitive.Root.displayName;
 
 // src/components/sheet.tsx
-import * as React22 from "react";
+import * as React23 from "react";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { cva as cva7 } from "class-variance-authority";
 import { X as X2 } from "lucide-react";
@@ -937,12 +943,12 @@ var Sheet = SheetPrimitive.Root;
 var SheetTrigger = SheetPrimitive.Trigger;
 var SheetClose = SheetPrimitive.Close;
 var SheetPortal = SheetPrimitive.Portal;
-var SheetOverlay = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx23(
+var SheetOverlay = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx23(
   SheetPrimitive.Overlay,
   {
     ref,
     className: cn(
-      "fixed inset-0 z-50 bg-foreground/40 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-overlay bg-foreground/40 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     ),
     ...props
@@ -950,7 +956,7 @@ var SheetOverlay = React22.forwardRef(({ className, ...props }, ref) => /* @__PU
 ));
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 var sheetVariants = cva7(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 font-sans",
+  "fixed z-overlay gap-4 bg-background p-6 shadow-lg transition ease-standard data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-base data-[state=open]:duration-slow font-sans",
   {
     variants: {
       side: {
@@ -963,11 +969,11 @@ var sheetVariants = cva7(
     defaultVariants: { side: "right" }
   }
 );
-var SheetContent = React22.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsxs10(SheetPortal, { children: [
+var SheetContent = React23.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsxs10(SheetPortal, { children: [
   /* @__PURE__ */ jsx23(SheetOverlay, {}),
   /* @__PURE__ */ jsxs10(SheetPrimitive.Content, { ref, className: cn(sheetVariants({ side }), className), ...props, children: [
     children,
-    /* @__PURE__ */ jsxs10(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring", children: [
+    /* @__PURE__ */ jsxs10(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-muted transition-opacity hover:opacity-visible focus:outline-none focus:ring-2 focus:ring-ring", children: [
       /* @__PURE__ */ jsx23(X2, { className: "size-4" }),
       /* @__PURE__ */ jsx23("span", { className: "sr-only", children: "Close" })
     ] })
@@ -978,9 +984,9 @@ var SheetHeader = ({ className, ...props }) => /* @__PURE__ */ jsx23("div", { cl
 SheetHeader.displayName = "SheetHeader";
 var SheetFooter = ({ className, ...props }) => /* @__PURE__ */ jsx23("div", { className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className), ...props });
 SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx23(SheetPrimitive.Title, { ref, className: cn("text-lg font-semibold text-foreground", className), ...props }));
+var SheetTitle = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx23(SheetPrimitive.Title, { ref, className: cn("text-lg font-semibold text-foreground", className), ...props }));
 SheetTitle.displayName = SheetPrimitive.Title.displayName;
-var SheetDescription = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx23(SheetPrimitive.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+var SheetDescription = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx23(SheetPrimitive.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
 SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
 // src/components/modal.tsx
@@ -1017,7 +1023,7 @@ function Modal({
         DialogPrimitive2.Content,
         {
           className: cn(
-            "fixed left-1/2 top-1/2 z-50 flex w-full max-w-[480px] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-xl bg-background font-sans",
+            "fixed left-1/2 top-1/2 z-overlay flex w-full max-w-[480px] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-xl bg-background font-sans",
             "shadow-[0_4px_24px_rgba(0,0,0,0.12)]",
             "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
             className
@@ -1028,7 +1034,7 @@ function Modal({
               /* @__PURE__ */ jsx24(
                 DialogPrimitive2.Close,
                 {
-                  className: "rounded-sm opacity-70 outline-none transition-opacity hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring",
+                  className: "rounded-sm opacity-muted outline-none transition-opacity hover:opacity-visible focus-visible:ring-2 focus-visible:ring-ring",
                   "aria-label": "Close",
                   children: /* @__PURE__ */ jsx24(X3, { className: "size-5" })
                 }
@@ -1066,10 +1072,10 @@ function Skeleton({ className, ...props }) {
 }
 
 // src/components/slider.tsx
-import * as React23 from "react";
+import * as React24 from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
 import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
-var Slider = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs12(
+var Slider = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs12(
   SliderPrimitive.Root,
   {
     ref,
@@ -1077,7 +1083,7 @@ var Slider = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
     ...props,
     children: [
       /* @__PURE__ */ jsx26(SliderPrimitive.Track, { className: "relative h-1.5 w-full grow overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx26(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }),
-      /* @__PURE__ */ jsx26(SliderPrimitive.Thumb, { className: "block size-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" })
+      /* @__PURE__ */ jsx26(SliderPrimitive.Thumb, { className: "block size-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-disabled" })
     ]
   }
 ));
@@ -1106,17 +1112,17 @@ function Toaster({ theme = "system", ...props }) {
 }
 
 // src/components/switch.tsx
-import * as React24 from "react";
+import * as React25 from "react";
 import * as SwitchPrimitive from "@radix-ui/react-switch";
 import { jsx as jsx28 } from "react/jsx-runtime";
-var Switch = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx28(
+var Switch = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx28(
   SwitchPrimitive.Root,
   {
     ref,
     className: cn(
       "peer inline-flex h-6 w-12 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-      "disabled:cursor-not-allowed disabled:opacity-50",
+      "disabled:cursor-not-allowed disabled:opacity-disabled",
       "data-[state=checked]:bg-primary data-[state=unchecked]:bg-tertiary",
       className
     ),
@@ -1135,7 +1141,8 @@ var Switch = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
 Switch.displayName = SwitchPrimitive.Root.displayName;
 
 // src/components/tag.tsx
-import * as React25 from "react";
+import * as React26 from "react";
+import { Slot as Slot4, Slottable } from "@radix-ui/react-slot";
 import { cva as cva8 } from "class-variance-authority";
 import { X as X4 } from "lucide-react";
 import { jsx as jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
@@ -1154,43 +1161,47 @@ var tagVariants = cva8(
     defaultVariants: { variant: "default" }
   }
 );
-var Tag = React25.forwardRef(
-  ({ className, variant, onRemove, children, ...props }, ref) => /* @__PURE__ */ jsxs13("span", { ref, className: cn(tagVariants({ variant }), className), ...props, children: [
-    children,
-    onRemove && /* @__PURE__ */ jsx29(
+var Tag = React26.forwardRef(
+  ({ className, variant, onRemove, children, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot4 : "span";
+    const removeButton = onRemove && /* @__PURE__ */ jsx29(
       "button",
       {
         type: "button",
         onClick: onRemove,
         "aria-label": "Remove",
-        className: "-mr-0.5 ml-0.5 rounded-[2px] opacity-70 outline-none transition-opacity hover:opacity-100 focus-visible:ring-1 focus-visible:ring-current",
+        className: "-mr-0.5 ml-0.5 rounded-[2px] opacity-muted outline-none transition-opacity hover:opacity-visible focus-visible:ring-1 focus-visible:ring-current",
         children: /* @__PURE__ */ jsx29(X4, { className: "size-3.5" })
       }
-    )
-  ] })
+    );
+    return /* @__PURE__ */ jsxs13(Comp, { ref, className: cn(tagVariants({ variant }), className), ...props, children: [
+      asChild ? /* @__PURE__ */ jsx29(Slottable, { children }) : children,
+      removeButton
+    ] });
+  }
 );
 Tag.displayName = "Tag";
 
 // src/components/table.tsx
-import * as React26 from "react";
+import * as React27 from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
-var Table = React26.forwardRef(
+var Table = React27.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx30("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx30("table", { ref, className: cn("w-full caption-bottom text-sm font-sans", className), ...props }) })
 );
 Table.displayName = "Table";
-var TableHeader = React26.forwardRef(
+var TableHeader = React27.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx30("thead", { ref, className: cn("[&_tr]:border-b", className), ...props })
 );
 TableHeader.displayName = "TableHeader";
-var TableBody = React26.forwardRef(
+var TableBody = React27.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx30("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props })
 );
 TableBody.displayName = "TableBody";
-var TableFooter = React26.forwardRef(
+var TableFooter = React27.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx30("tfoot", { ref, className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className), ...props })
 );
 TableFooter.displayName = "TableFooter";
-var TableRow = React26.forwardRef(
+var TableRow = React27.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx30(
     "tr",
     {
@@ -1201,7 +1212,7 @@ var TableRow = React26.forwardRef(
   )
 );
 TableRow.displayName = "TableRow";
-var TableHead = React26.forwardRef(
+var TableHead = React27.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx30(
     "th",
     {
@@ -1212,21 +1223,21 @@ var TableHead = React26.forwardRef(
   )
 );
 TableHead.displayName = "TableHead";
-var TableCell = React26.forwardRef(
+var TableCell = React27.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx30("td", { ref, className: cn("p-2 align-middle [&:has([role=checkbox])]:pr-0", className), ...props })
 );
 TableCell.displayName = "TableCell";
-var TableCaption = React26.forwardRef(
+var TableCaption = React27.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx30("caption", { ref, className: cn("mt-4 text-sm text-muted-foreground", className), ...props })
 );
 TableCaption.displayName = "TableCaption";
 
 // src/components/tabs.tsx
-import * as React27 from "react";
+import * as React28 from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { jsx as jsx31 } from "react/jsx-runtime";
 var Tabs = TabsPrimitive.Root;
-var TabsList = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
+var TabsList = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
   TabsPrimitive.List,
   {
     ref,
@@ -1238,14 +1249,14 @@ var TabsList = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
+var TabsTrigger = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
   TabsPrimitive.Trigger,
   {
     ref,
     className: cn(
       "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-      "disabled:pointer-events-none disabled:opacity-50",
+      "disabled:pointer-events-none disabled:opacity-disabled",
       "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
       className
     ),
@@ -1253,7 +1264,7 @@ var TabsTrigger = React27.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
+var TabsContent = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx31(
   TabsPrimitive.Content,
   {
     ref,
@@ -1264,12 +1275,12 @@ var TabsContent = React27.forwardRef(({ className, ...props }, ref) => /* @__PUR
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
 // src/components/toggle.tsx
-import * as React28 from "react";
+import * as React29 from "react";
 import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { cva as cva9 } from "class-variance-authority";
 import { jsx as jsx32 } from "react/jsx-runtime";
 var toggleVariants = cva9(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium font-sans transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground data-[state=on]:ring-1 data-[state=on]:ring-inset data-[state=on]:ring-ring [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium font-sans transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-disabled data-[state=on]:bg-accent data-[state=on]:text-accent-foreground data-[state=on]:ring-1 data-[state=on]:ring-inset data-[state=on]:ring-ring [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -1285,21 +1296,21 @@ var toggleVariants = cva9(
     defaultVariants: { variant: "default", size: "default" }
   }
 );
-var Toggle = React28.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx32(TogglePrimitive.Root, { ref, className: cn(toggleVariants({ variant, size }), className), ...props }));
+var Toggle = React29.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx32(TogglePrimitive.Root, { ref, className: cn(toggleVariants({ variant, size }), className), ...props }));
 Toggle.displayName = TogglePrimitive.Root.displayName;
 
 // src/components/toggle-group.tsx
-import * as React29 from "react";
+import * as React30 from "react";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import { jsx as jsx33 } from "react/jsx-runtime";
-var ToggleGroupContext = React29.createContext({
+var ToggleGroupContext = React30.createContext({
   size: "default",
   variant: "default"
 });
-var ToggleGroup = React29.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx33(ToggleGroupPrimitive.Root, { ref, className: cn("flex items-center gap-1", className), ...props, children: /* @__PURE__ */ jsx33(ToggleGroupContext.Provider, { value: { variant, size }, children }) }));
+var ToggleGroup = React30.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx33(ToggleGroupPrimitive.Root, { ref, className: cn("flex items-center gap-1", className), ...props, children: /* @__PURE__ */ jsx33(ToggleGroupContext.Provider, { value: { variant, size }, children }) }));
 ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-var ToggleGroupItem = React29.forwardRef(({ className, children, variant, size, ...props }, ref) => {
-  const ctx = React29.useContext(ToggleGroupContext);
+var ToggleGroupItem = React30.forwardRef(({ className, children, variant, size, ...props }, ref) => {
+  const ctx = React30.useContext(ToggleGroupContext);
   return /* @__PURE__ */ jsx33(
     ToggleGroupPrimitive.Item,
     {
@@ -1313,19 +1324,19 @@ var ToggleGroupItem = React29.forwardRef(({ className, children, variant, size,
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
 // src/components/tooltip.tsx
-import * as React30 from "react";
+import * as React31 from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { jsx as jsx34 } from "react/jsx-runtime";
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React30.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx34(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx34(
+var TooltipContent = React31.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx34(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx34(
   TooltipPrimitive.Content,
   {
     ref,
     sideOffset,
     className: cn(
-      "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground font-sans",
+      "z-overlay overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground font-sans",
       "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
@@ -1351,13 +1362,17 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
         month_caption: "flex justify-center pt-1 relative items-center w-full",
         caption_label: "text-sm font-medium",
         nav: "flex items-center gap-1",
+        // Resting-dim/hover-brighten nav icons — numerically the disabled
+        // value (0.5) but not a disabled state, so left as a literal rather
+        // than forced into --opacity-disabled or --opacity-muted (0.7, which
+        // would change the rendered value).
         button_previous: cn(
           buttonVariants({ variant: "Outline", size: "icon" }),
-          "absolute left-1 size-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+          "absolute left-1 size-7 bg-transparent p-0 opacity-50 hover:opacity-visible"
         ),
         button_next: cn(
           buttonVariants({ variant: "Outline", size: "icon" }),
-          "absolute right-1 size-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+          "absolute right-1 size-7 bg-transparent p-0 opacity-50 hover:opacity-visible"
         ),
         month_grid: "w-full border-collapse space-x-1",
         weekdays: "flex",
@@ -1368,19 +1383,19 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
         // accent background + corner rounding and hands the primary-colored
         // "selected" circle down to `day_button` via a `group` class.
         day: cn(
-          "group relative p-0 text-center text-sm focus-within:relative focus-within:z-20 aria-selected:bg-accent",
+          "group relative p-0 text-center text-sm focus-within:relative focus-within:z-focus aria-selected:bg-accent",
           props.mode === "range" ? "" : "aria-selected:rounded-md"
         ),
         day_button: cn(
           buttonVariants({ variant: "Ghost", size: "icon" }),
-          "size-8 p-0 font-normal group-aria-selected:opacity-100 group-data-[selected=true]:bg-primary group-data-[selected=true]:text-primary-foreground group-data-[selected=true]:hover:bg-primary group-data-[selected=true]:hover:text-primary-foreground group-data-[selected=true]:focus:bg-primary group-data-[selected=true]:focus:text-primary-foreground"
+          "size-8 p-0 font-normal group-aria-selected:opacity-visible group-data-[selected=true]:bg-primary group-data-[selected=true]:text-primary-foreground group-data-[selected=true]:hover:bg-primary group-data-[selected=true]:hover:text-primary-foreground group-data-[selected=true]:focus:bg-primary group-data-[selected=true]:focus:text-primary-foreground"
         ),
         range_start: "day-range-start rounded-l-md",
         range_end: "day-range-end rounded-r-md",
         range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
         today: "bg-accent text-accent-foreground",
         outside: "day-outside text-muted-foreground aria-selected:text-muted-foreground",
-        disabled: "text-muted-foreground opacity-50",
+        disabled: "text-muted-foreground opacity-disabled",
         hidden: "invisible",
         ...classNames
       },
@@ -1394,34 +1409,34 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
 Calendar.displayName = "Calendar";
 
 // src/components/carousel.tsx
-import * as React31 from "react";
+import * as React32 from "react";
 import useEmblaCarousel from "embla-carousel-react";
 import { ArrowLeft, ArrowRight } from "lucide-react";
 import { jsx as jsx36, jsxs as jsxs14 } from "react/jsx-runtime";
-var CarouselContext = React31.createContext(null);
+var CarouselContext = React32.createContext(null);
 function useCarousel() {
-  const context = React31.useContext(CarouselContext);
+  const context = React32.useContext(CarouselContext);
   if (!context) throw new Error("useCarousel must be used within a <Carousel />");
   return context;
 }
-var Carousel = React31.forwardRef(({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref) => {
+var Carousel = React32.forwardRef(({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref) => {
   const [carouselRef, api] = useEmblaCarousel(
     { ...opts, axis: orientation === "horizontal" ? "x" : "y" },
     plugins
   );
-  const [canScrollPrev, setCanScrollPrev] = React31.useState(false);
-  const [canScrollNext, setCanScrollNext] = React31.useState(false);
-  const onSelect = React31.useCallback((a) => {
+  const [canScrollPrev, setCanScrollPrev] = React32.useState(false);
+  const [canScrollNext, setCanScrollNext] = React32.useState(false);
+  const onSelect = React32.useCallback((a) => {
     if (!a) return;
     setCanScrollPrev(a.canScrollPrev());
     setCanScrollNext(a.canScrollNext());
   }, []);
-  const scrollPrev = React31.useCallback(() => api?.scrollPrev(), [api]);
-  const scrollNext = React31.useCallback(() => api?.scrollNext(), [api]);
-  React31.useEffect(() => {
+  const scrollPrev = React32.useCallback(() => api?.scrollPrev(), [api]);
+  const scrollNext = React32.useCallback(() => api?.scrollNext(), [api]);
+  React32.useEffect(() => {
     if (api && setApi) setApi(api);
   }, [api, setApi]);
-  React31.useEffect(() => {
+  React32.useEffect(() => {
     if (!api) return;
     onSelect(api);
     api.on("reInit", onSelect);
@@ -1458,7 +1473,7 @@ var Carousel = React31.forwardRef(({ orientation = "horizontal", opts, setApi, p
   );
 });
 Carousel.displayName = "Carousel";
-var CarouselContent = React31.forwardRef(
+var CarouselContent = React32.forwardRef(
   ({ className, ...props }, ref) => {
     const { carouselRef, orientation } = useCarousel();
     return /* @__PURE__ */ jsx36("div", { ref: carouselRef, className: "overflow-hidden", children: /* @__PURE__ */ jsx36(
@@ -1472,7 +1487,7 @@ var CarouselContent = React31.forwardRef(
   }
 );
 CarouselContent.displayName = "CarouselContent";
-var CarouselItem = React31.forwardRef(
+var CarouselItem = React32.forwardRef(
   ({ className, ...props }, ref) => {
     const { orientation } = useCarousel();
     return /* @__PURE__ */ jsx36(
@@ -1488,7 +1503,7 @@ var CarouselItem = React31.forwardRef(
   }
 );
 CarouselItem.displayName = "CarouselItem";
-var CarouselPrevious = React31.forwardRef(
+var CarouselPrevious = React32.forwardRef(
   ({ className, variant = "Outline", ...props }, ref) => {
     const { orientation, scrollPrev, canScrollPrev } = useCarousel();
     return /* @__PURE__ */ jsxs14(
@@ -1514,7 +1529,7 @@ var CarouselPrevious = React31.forwardRef(
   }
 );
 CarouselPrevious.displayName = "CarouselPrevious";
-var CarouselNext = React31.forwardRef(
+var CarouselNext = React32.forwardRef(
   ({ className, variant = "Outline", ...props }, ref) => {
     const { orientation, scrollNext, canScrollNext } = useCarousel();
     return /* @__PURE__ */ jsxs14(
@@ -1542,17 +1557,17 @@ var CarouselNext = React31.forwardRef(
 CarouselNext.displayName = "CarouselNext";
 
 // src/components/chart.tsx
-import * as React32 from "react";
+import * as React33 from "react";
 import * as RechartsPrimitive from "recharts";
 import { jsx as jsx37, jsxs as jsxs15 } from "react/jsx-runtime";
 var THEMES = { light: "", dark: ".dark" };
-var ChartContext = React32.createContext(null);
+var ChartContext = React33.createContext(null);
 function useChart() {
-  const context = React32.useContext(ChartContext);
+  const context = React33.useContext(ChartContext);
   if (!context) throw new Error("useChart must be used within a <ChartContainer />");
   return context;
 }
-var ChartContainer = React32.forwardRef(({
+var ChartContainer = React33.forwardRef(({
   id,
   className,
   children,
@@ -1565,11 +1580,11 @@ var ChartContainer = React32.forwardRef(({
   "aria-label": ariaLabel,
   ...props
 }, ref) => {
-  const uniqueId = React32.useId();
+  const uniqueId = React33.useId();
   const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
   const name = ariaLabel ?? label ?? "Chart";
-  const innerRef = React32.useRef(null);
-  const setRef = React32.useCallback(
+  const innerRef = React33.useRef(null);
+  const setRef = React33.useCallback(
     (node) => {
       innerRef.current = node;
       if (typeof ref === "function") ref(node);
@@ -1577,7 +1592,7 @@ var ChartContainer = React32.forwardRef(({
     },
     [ref]
   );
-  React32.useEffect(() => {
+  React33.useEffect(() => {
     const el = innerRef.current;
     if (!el) return;
     const scrub = () => {
@@ -1676,7 +1691,7 @@ ${colorConfig.map(([key, itemConfig]) => {
   );
 };
 var ChartTooltip = RechartsPrimitive.Tooltip;
-var ChartTooltipContent = React32.forwardRef(
+var ChartTooltipContent = React33.forwardRef(
   ({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, formatter }, ref) => {
     const { config } = useChart();
     if (!active || !payload?.length) return null;
@@ -1719,7 +1734,7 @@ var ChartTooltipContent = React32.forwardRef(
 );
 ChartTooltipContent.displayName = "ChartTooltipContent";
 var ChartLegend = RechartsPrimitive.Legend;
-var ChartLegendContent = React32.forwardRef(({ className, payload, verticalAlign = "bottom" }, ref) => {
+var ChartLegendContent = React33.forwardRef(({ className, payload, verticalAlign = "bottom" }, ref) => {
   const { config } = useChart();
   if (!payload?.length) return null;
   return /* @__PURE__ */ jsx37(
@@ -1741,11 +1756,11 @@ var ChartLegendContent = React32.forwardRef(({ className, payload, verticalAlign
 ChartLegendContent.displayName = "ChartLegendContent";
 
 // src/components/command.tsx
-import * as React33 from "react";
+import * as React34 from "react";
 import { Command as CommandPrimitive } from "cmdk";
 import { Search } from "lucide-react";
 import { jsx as jsx38, jsxs as jsxs16 } from "react/jsx-runtime";
-var Command = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
+var Command = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
   CommandPrimitive,
   {
     ref,
@@ -1758,14 +1773,14 @@ var Command = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__
 ));
 Command.displayName = CommandPrimitive.displayName;
 var CommandDialog = ({ children, ...props }) => /* @__PURE__ */ jsx38(Dialog, { ...props, children: /* @__PURE__ */ jsx38(DialogContent, { className: "overflow-hidden p-0", children: /* @__PURE__ */ jsx38(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5", children }) }) });
-var CommandInput = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs16("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
+var CommandInput = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs16("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
   /* @__PURE__ */ jsx38(Search, { className: "mr-2 size-4 shrink-0 opacity-50" }),
   /* @__PURE__ */ jsx38(
     CommandPrimitive.Input,
     {
       ref,
       className: cn(
-        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-disabled",
         className
       ),
       ...props
@@ -1773,7 +1788,7 @@ var CommandInput = React33.forwardRef(({ className, ...props }, ref) => /* @__PU
   )
 ] }));
 CommandInput.displayName = CommandPrimitive.Input.displayName;
-var CommandList = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
+var CommandList = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
   CommandPrimitive.List,
   {
     ref,
@@ -1782,9 +1797,9 @@ var CommandList = React33.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CommandList.displayName = CommandPrimitive.List.displayName;
-var CommandEmpty = React33.forwardRef((props, ref) => /* @__PURE__ */ jsx38(CommandPrimitive.Empty, { ref, className: "py-6 text-center text-sm", ...props }));
+var CommandEmpty = React34.forwardRef((props, ref) => /* @__PURE__ */ jsx38(CommandPrimitive.Empty, { ref, className: "py-6 text-center text-sm", ...props }));
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
-var CommandGroup = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
+var CommandGroup = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
   CommandPrimitive.Group,
   {
     ref,
@@ -1796,14 +1811,14 @@ var CommandGroup = React33.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 CommandGroup.displayName = CommandPrimitive.Group.displayName;
-var CommandSeparator = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx38(CommandPrimitive.Separator, { ref, className: cn("-mx-1 h-px bg-border", className), ...props }));
+var CommandSeparator = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx38(CommandPrimitive.Separator, { ref, className: cn("-mx-1 h-px bg-border", className), ...props }));
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
-var CommandItem = React33.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
+var CommandItem = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
   CommandPrimitive.Item,
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-disabled [&_svg]:size-4 [&_svg]:shrink-0",
       className
     ),
     ...props
@@ -1814,7 +1829,7 @@ var CommandShortcut = ({ className, ...props }) => /* @__PURE__ */ jsx38("span",
 CommandShortcut.displayName = "CommandShortcut";
 
 // src/components/context-menu.tsx
-import * as React34 from "react";
+import * as React35 from "react";
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 import { Check as Check4, ChevronRight as ChevronRight5, Circle as Circle3 } from "lucide-react";
 import { jsx as jsx39, jsxs as jsxs17 } from "react/jsx-runtime";
@@ -1824,9 +1839,9 @@ var ContextMenuGroup = ContextMenuPrimitive.Group;
 var ContextMenuPortal = ContextMenuPrimitive.Portal;
 var ContextMenuSub = ContextMenuPrimitive.Sub;
 var ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
-var itemCls2 = "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground focus:ring-1 focus:ring-inset focus:ring-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
-var contentCls2 = "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md font-sans data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95";
-var ContextMenuSubTrigger = React34.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs17(
+var itemCls2 = "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground focus:ring-1 focus:ring-inset focus:ring-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-disabled";
+var contentCls2 = "z-overlay min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md font-sans data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95";
+var ContextMenuSubTrigger = React35.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs17(
   ContextMenuPrimitive.SubTrigger,
   {
     ref,
@@ -1839,23 +1854,23 @@ var ContextMenuSubTrigger = React34.forwardRef(({ className, inset, children, ..
   }
 ));
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
-var ContextMenuSubContent = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx39(ContextMenuPrimitive.SubContent, { ref, className: cn(contentCls2, className), ...props }));
+var ContextMenuSubContent = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx39(ContextMenuPrimitive.SubContent, { ref, className: cn(contentCls2, className), ...props }));
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
-var ContextMenuContent = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx39(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx39(ContextMenuPrimitive.Content, { ref, className: cn(contentCls2, className), ...props }) }));
+var ContextMenuContent = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx39(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx39(ContextMenuPrimitive.Content, { ref, className: cn(contentCls2, className), ...props }) }));
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
-var ContextMenuItem = React34.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx39(ContextMenuPrimitive.Item, { ref, className: cn(itemCls2, inset && "pl-8", className), ...props }));
+var ContextMenuItem = React35.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx39(ContextMenuPrimitive.Item, { ref, className: cn(itemCls2, inset && "pl-8", className), ...props }));
 ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
-var ContextMenuCheckboxItem = React34.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs17(ContextMenuPrimitive.CheckboxItem, { ref, className: cn(itemCls2, "pl-8", className), checked, ...props, children: [
+var ContextMenuCheckboxItem = React35.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs17(ContextMenuPrimitive.CheckboxItem, { ref, className: cn(itemCls2, "pl-8", className), checked, ...props, children: [
   /* @__PURE__ */ jsx39("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx39(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx39(Check4, { className: "size-4" }) }) }),
   children
 ] }));
 ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
-var ContextMenuRadioItem = React34.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs17(ContextMenuPrimitive.RadioItem, { ref, className: cn(itemCls2, "pl-8", className), ...props, children: [
+var ContextMenuRadioItem = React35.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs17(ContextMenuPrimitive.RadioItem, { ref, className: cn(itemCls2, "pl-8", className), ...props, children: [
   /* @__PURE__ */ jsx39("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx39(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx39(Circle3, { className: "size-2 fill-current" }) }) }),
   children
 ] }));
 ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
-var ContextMenuLabel = React34.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx39(
+var ContextMenuLabel = React35.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx39(
   ContextMenuPrimitive.Label,
   {
     ref,
@@ -1864,13 +1879,13 @@ var ContextMenuLabel = React34.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
-var ContextMenuSeparator = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx39(ContextMenuPrimitive.Separator, { ref, className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
+var ContextMenuSeparator = React35.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx39(ContextMenuPrimitive.Separator, { ref, className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
 ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
 var ContextMenuShortcut = ({ className, ...props }) => /* @__PURE__ */ jsx39("span", { className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className), ...props });
 ContextMenuShortcut.displayName = "ContextMenuShortcut";
 
 // src/components/data-table.tsx
-import * as React35 from "react";
+import * as React36 from "react";
 import {
   createPaginatedRowModel,
   createSortedRowModel,
@@ -1895,7 +1910,7 @@ function DataTable({
   className,
   pageSize = 10
 }) {
-  const [sorting, setSorting] = React35.useState([]);
+  const [sorting, setSorting] = React36.useState([]);
   const table = useTable({
     features,
     data,
@@ -1917,7 +1932,7 @@ function DataTable({
 }
 
 // src/components/drawer.tsx
-import * as React36 from "react";
+import * as React37 from "react";
 import { Drawer as DrawerPrimitive } from "vaul";
 import { jsx as jsx41, jsxs as jsxs19 } from "react/jsx-runtime";
 var Drawer = ({ shouldScaleBackground = true, ...props }) => /* @__PURE__ */ jsx41(DrawerPrimitive.Root, { shouldScaleBackground, ...props });
@@ -1925,16 +1940,16 @@ Drawer.displayName = "Drawer";
 var DrawerTrigger = DrawerPrimitive.Trigger;
 var DrawerPortal = DrawerPrimitive.Portal;
 var DrawerClose = DrawerPrimitive.Close;
-var DrawerOverlay = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx41(DrawerPrimitive.Overlay, { ref, className: cn("fixed inset-0 z-50 bg-foreground/40", className), ...props }));
+var DrawerOverlay = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx41(DrawerPrimitive.Overlay, { ref, className: cn("fixed inset-0 z-overlay bg-foreground/40", className), ...props }));
 DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
-var DrawerContent = React36.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs19(DrawerPortal, { children: [
+var DrawerContent = React37.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs19(DrawerPortal, { children: [
   /* @__PURE__ */ jsx41(DrawerOverlay, {}),
   /* @__PURE__ */ jsxs19(
     DrawerPrimitive.Content,
     {
       ref,
       className: cn(
-        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background font-sans",
+        "fixed inset-x-0 bottom-0 z-overlay mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background font-sans",
         className
       ),
       ...props,
@@ -1950,27 +1965,27 @@ var DrawerHeader = ({ className, ...props }) => /* @__PURE__ */ jsx41("div", { c
 DrawerHeader.displayName = "DrawerHeader";
 var DrawerFooter = ({ className, ...props }) => /* @__PURE__ */ jsx41("div", { className: cn("mt-auto flex flex-col gap-2 p-4", className), ...props });
 DrawerFooter.displayName = "DrawerFooter";
-var DrawerTitle = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx41(DrawerPrimitive.Title, { ref, className: cn("text-lg font-semibold leading-none tracking-tight", className), ...props }));
+var DrawerTitle = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx41(DrawerPrimitive.Title, { ref, className: cn("text-lg font-semibold leading-none tracking-tight", className), ...props }));
 DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
-var DrawerDescription = React36.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx41(DrawerPrimitive.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+var DrawerDescription = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx41(DrawerPrimitive.Description, { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
 DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
 
 // src/components/field.tsx
-import * as React37 from "react";
-import { Slot as Slot3 } from "@radix-ui/react-slot";
+import * as React38 from "react";
+import { Slot as Slot5 } from "@radix-ui/react-slot";
 import { CircleAlert, CircleCheck, Info, TriangleAlert } from "lucide-react";
 import { cva as cva10 } from "class-variance-authority";
 import { jsx as jsx42, jsxs as jsxs20 } from "react/jsx-runtime";
-var FieldContext = React37.createContext(null);
+var FieldContext = React38.createContext(null);
 function useField() {
-  const ctx = React37.useContext(FieldContext);
+  const ctx = React38.useContext(FieldContext);
   if (!ctx) throw new Error("Field parts must be used within <Field>");
   return ctx;
 }
-var Field = React37.forwardRef(
+var Field = React38.forwardRef(
   ({ className, invalid = false, ...props }, ref) => {
-    const id = React37.useId();
-    const value = React37.useMemo(
+    const id = React38.useId();
+    const value = React38.useMemo(
       () => ({ id: `${id}-control`, descriptionId: `${id}-description`, messageId: `${id}-message`, invalid }),
       [id, invalid]
     );
@@ -1978,16 +1993,16 @@ var Field = React37.forwardRef(
   }
 );
 Field.displayName = "Field";
-var FieldLabel = React37.forwardRef(({ className, ...props }, ref) => {
+var FieldLabel = React38.forwardRef(({ className, ...props }, ref) => {
   const { id, invalid } = useField();
   return /* @__PURE__ */ jsx42(Label2, { ref, htmlFor: id, className: cn(invalid && "text-destructive", className), ...props });
 });
 FieldLabel.displayName = "FieldLabel";
-var FieldControl = React37.forwardRef(
+var FieldControl = React38.forwardRef(
   ({ ...props }, ref) => {
     const { id, descriptionId, messageId, invalid } = useField();
     return /* @__PURE__ */ jsx42(
-      Slot3,
+      Slot5,
       {
         ref,
         id,
@@ -1999,7 +2014,7 @@ var FieldControl = React37.forwardRef(
   }
 );
 FieldControl.displayName = "FieldControl";
-var FieldDescription = React37.forwardRef(
+var FieldDescription = React38.forwardRef(
   ({ className, ...props }, ref) => {
     const { descriptionId } = useField();
     return /* @__PURE__ */ jsx42("p", { ref, id: descriptionId, className: cn("text-body-sm text-muted-foreground", className), ...props });
@@ -2023,7 +2038,7 @@ var INTENT_ICON = {
   success: CircleCheck,
   info: Info
 };
-var FieldMessage = React37.forwardRef(
+var FieldMessage = React38.forwardRef(
   ({ className, intent = "error", hideIcon, children, ...props }, ref) => {
     const { messageId } = useField();
     const Icon2 = INTENT_ICON[intent ?? "error"];
@@ -2037,8 +2052,8 @@ var FieldMessage = React37.forwardRef(
 FieldMessage.displayName = "FieldMessage";
 
 // src/components/form.tsx
-import * as React38 from "react";
-import { Slot as Slot4 } from "@radix-ui/react-slot";
+import * as React39 from "react";
+import { Slot as Slot6 } from "@radix-ui/react-slot";
 import {
   Controller,
   FormProvider,
@@ -2047,13 +2062,13 @@ import {
 } from "react-hook-form";
 import { jsx as jsx43 } from "react/jsx-runtime";
 var Form = FormProvider;
-var FormFieldContext = React38.createContext({});
+var FormFieldContext = React39.createContext({});
 var FormField = ({
   ...props
 }) => /* @__PURE__ */ jsx43(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx43(Controller, { ...props }) });
 var useFormField = () => {
-  const fieldContext = React38.useContext(FormFieldContext);
-  const itemContext = React38.useContext(FormItemContext);
+  const fieldContext = React39.useContext(FormFieldContext);
+  const itemContext = React39.useContext(FormItemContext);
   const { getFieldState } = useFormContext();
   const formState = useFormState({ name: fieldContext.name });
   const fieldState = getFieldState(fieldContext.name, formState);
@@ -2068,23 +2083,23 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React38.createContext({});
-var FormItem = React38.forwardRef(
+var FormItemContext = React39.createContext({});
+var FormItem = React39.forwardRef(
   ({ className, ...props }, ref) => {
-    const id = React38.useId();
+    const id = React39.useId();
     return /* @__PURE__ */ jsx43(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx43("div", { ref, className: cn("grid gap-2", className), ...props }) });
   }
 );
 FormItem.displayName = "FormItem";
-var FormLabel = React38.forwardRef(({ className, ...props }, ref) => {
+var FormLabel = React39.forwardRef(({ className, ...props }, ref) => {
   const { error, formItemId } = useFormField();
   return /* @__PURE__ */ jsx43(Label2, { ref, className: cn(error && "text-destructive", className), htmlFor: formItemId, ...props });
 });
 FormLabel.displayName = "FormLabel";
-var FormControl = React38.forwardRef(({ ...props }, ref) => {
+var FormControl = React39.forwardRef(({ ...props }, ref) => {
   const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
   return /* @__PURE__ */ jsx43(
-    Slot4,
+    Slot6,
     {
       ref,
       id: formItemId,
@@ -2095,14 +2110,14 @@ var FormControl = React38.forwardRef(({ ...props }, ref) => {
   );
 });
 FormControl.displayName = "FormControl";
-var FormDescription = React38.forwardRef(
+var FormDescription = React39.forwardRef(
   ({ className, ...props }, ref) => {
     const { formDescriptionId } = useFormField();
     return /* @__PURE__ */ jsx43("p", { ref, id: formDescriptionId, className: cn("text-sm text-muted-foreground", className), ...props });
   }
 );
 FormDescription.displayName = "FormDescription";
-var FormMessage = React38.forwardRef(
+var FormMessage = React39.forwardRef(
   ({ className, children, ...props }, ref) => {
     const { error, formMessageId } = useFormField();
     const body = error ? String(error?.message ?? "") : children;
@@ -2113,10 +2128,10 @@ var FormMessage = React38.forwardRef(
 FormMessage.displayName = "FormMessage";
 
 // src/components/input-group.tsx
-import * as React39 from "react";
+import * as React40 from "react";
 import { cva as cva11 } from "class-variance-authority";
 import { jsx as jsx44 } from "react/jsx-runtime";
-var InputGroup = React39.forwardRef(
+var InputGroup = React40.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx44(
     "div",
     {
@@ -2126,7 +2141,7 @@ var InputGroup = React39.forwardRef(
         "flex w-full items-center overflow-hidden rounded-sm border border-input bg-background font-sans transition-colors",
         "focus-within:border-primary focus-within:shadow-focus",
         "has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:focus-within:shadow-focus-destructive",
-        "has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50",
+        "has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-disabled",
         className
       ),
       ...props
@@ -2134,7 +2149,7 @@ var InputGroup = React39.forwardRef(
   )
 );
 InputGroup.displayName = "InputGroup";
-var InputGroupInput = React39.forwardRef(({ className, type = "text", ...props }, ref) => /* @__PURE__ */ jsx44(
+var InputGroupInput = React40.forwardRef(({ className, type = "text", ...props }, ref) => /* @__PURE__ */ jsx44(
   "input",
   {
     ref,
@@ -2153,9 +2168,9 @@ var addonVariants = cva11("flex shrink-0 items-center gap-2 text-muted-foregroun
   variants: { align: { start: "pl-3", end: "pr-3" } },
   defaultVariants: { align: "start" }
 });
-var InputGroupAddon = React39.forwardRef(({ className, align, ...props }, ref) => /* @__PURE__ */ jsx44("div", { ref, "data-slot": "input-group-addon", className: cn(addonVariants({ align }), className), ...props }));
+var InputGroupAddon = React40.forwardRef(({ className, align, ...props }, ref) => /* @__PURE__ */ jsx44("div", { ref, "data-slot": "input-group-addon", className: cn(addonVariants({ align }), className), ...props }));
 InputGroupAddon.displayName = "InputGroupAddon";
-var InputGroupText = React39.forwardRef(
+var InputGroupText = React40.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx44(
     "span",
     {
@@ -2166,7 +2181,7 @@ var InputGroupText = React39.forwardRef(
   )
 );
 InputGroupText.displayName = "InputGroupText";
-var InputGroupButton = React39.forwardRef(({ className, type = "button", ...props }, ref) => /* @__PURE__ */ jsx44(
+var InputGroupButton = React40.forwardRef(({ className, type = "button", ...props }, ref) => /* @__PURE__ */ jsx44(
   "button",
   {
     ref,
@@ -2174,7 +2189,7 @@ var InputGroupButton = React39.forwardRef(({ className, type = "button", ...prop
     className: cn(
       "flex h-full shrink-0 items-center gap-1.5 self-stretch border-l border-input bg-muted px-3 text-label-md text-foreground",
       // base is bg-muted and muted==accent on dark, so the fill is a no-op there — the ring carries it
-      "outline-none transition-colors hover:bg-accent hover:ring-1 hover:ring-inset hover:ring-ring focus-visible:bg-accent focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+      "outline-none transition-colors hover:bg-accent hover:ring-1 hover:ring-inset hover:ring-ring focus-visible:bg-accent focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-disabled",
       "[&_svg]:size-4 [&_svg]:shrink-0",
       className
     ),
@@ -2184,26 +2199,26 @@ var InputGroupButton = React39.forwardRef(({ className, type = "button", ...prop
 InputGroupButton.displayName = "InputGroupButton";
 
 // src/components/input-otp.tsx
-import * as React40 from "react";
+import * as React41 from "react";
 import { OTPInput, OTPInputContext } from "input-otp";
 import { Minus as Minus2 } from "lucide-react";
 import { jsx as jsx45, jsxs as jsxs21 } from "react/jsx-runtime";
-var InputOTP = React40.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx45(
+var InputOTP = React41.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx45(
   OTPInput,
   {
     ref,
-    containerClassName: cn("flex items-center gap-2 has-[:disabled]:opacity-50", containerClassName),
+    containerClassName: cn("flex items-center gap-2 has-[:disabled]:opacity-disabled", containerClassName),
     className: cn("disabled:cursor-not-allowed", className),
     ...props
   }
 ));
 InputOTP.displayName = "InputOTP";
-var InputOTPGroup = React40.forwardRef(
+var InputOTPGroup = React41.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx45("div", { ref, className: cn("flex items-center", className), ...props })
 );
 InputOTPGroup.displayName = "InputOTPGroup";
-var InputOTPSlot = React40.forwardRef(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React40.useContext(OTPInputContext);
+var InputOTPSlot = React41.forwardRef(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React41.useContext(OTPInputContext);
   const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index] ?? {};
   return /* @__PURE__ */ jsxs21(
     "div",
@@ -2211,29 +2226,29 @@ var InputOTPSlot = React40.forwardRef(({ index, className, ...props }, ref) => {
       ref,
       className: cn(
         "relative flex size-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
-        isActive && "z-10 ring-1 ring-ring",
+        isActive && "z-docked ring-1 ring-ring",
         className
       ),
       ...props,
       children: [
         char,
-        hasFakeCaret && /* @__PURE__ */ jsx45("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx45("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" }) })
+        hasFakeCaret && /* @__PURE__ */ jsx45("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx45("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-slower" }) })
       ]
     }
   );
 });
 InputOTPSlot.displayName = "InputOTPSlot";
-var InputOTPSeparator = React40.forwardRef(
+var InputOTPSeparator = React41.forwardRef(
   ({ ...props }, ref) => /* @__PURE__ */ jsx45("div", { ref, role: "separator", ...props, children: /* @__PURE__ */ jsx45(Minus2, { className: "size-4" }) })
 );
 InputOTPSeparator.displayName = "InputOTPSeparator";
 
 // src/components/password-input.tsx
-import * as React41 from "react";
+import * as React42 from "react";
 import { Eye, EyeOff } from "lucide-react";
 import { jsx as jsx46, jsxs as jsxs22 } from "react/jsx-runtime";
-var PasswordInput = React41.forwardRef(({ className, ...props }, ref) => {
-  const [visible, setVisible] = React41.useState(false);
+var PasswordInput = React42.forwardRef(({ className, ...props }, ref) => {
+  const [visible, setVisible] = React42.useState(false);
   return /* @__PURE__ */ jsxs22(InputGroup, { className, children: [
     /* @__PURE__ */ jsx46(InputGroupInput, { ref, type: visible ? "text" : "password", ...props }),
     /* @__PURE__ */ jsx46(InputGroupAddon, { align: "end", children: /* @__PURE__ */ jsx46(
@@ -2252,7 +2267,7 @@ var PasswordInput = React41.forwardRef(({ className, ...props }, ref) => {
 PasswordInput.displayName = "PasswordInput";
 
 // src/components/menubar.tsx
-import * as React42 from "react";
+import * as React43 from "react";
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
 import { Check as Check5, ChevronRight as ChevronRight6, Circle as Circle4 } from "lucide-react";
 import { jsx as jsx47, jsxs as jsxs23 } from "react/jsx-runtime";
@@ -2261,9 +2276,9 @@ var MenubarGroup = (props) => /* @__PURE__ */ jsx47(MenubarPrimitive.Group, { ..
 var MenubarPortal = (props) => /* @__PURE__ */ jsx47(MenubarPrimitive.Portal, { ...props });
 var MenubarSub = (props) => /* @__PURE__ */ jsx47(MenubarPrimitive.Sub, { ...props });
 var MenubarRadioGroup = (props) => /* @__PURE__ */ jsx47(MenubarPrimitive.RadioGroup, { ...props });
-var itemCls3 = "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground focus:ring-1 focus:ring-inset focus:ring-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
-var contentCls3 = "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md font-sans data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95";
-var Menubar = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx47(
+var itemCls3 = "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground focus:ring-1 focus:ring-inset focus:ring-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-disabled";
+var contentCls3 = "z-overlay min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md font-sans data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95";
+var Menubar = React43.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx47(
   MenubarPrimitive.Root,
   {
     ref,
@@ -2272,7 +2287,7 @@ var Menubar = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 Menubar.displayName = MenubarPrimitive.Root.displayName;
-var MenubarTrigger = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx47(
+var MenubarTrigger = React43.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx47(
   MenubarPrimitive.Trigger,
   {
     ref,
@@ -2284,14 +2299,14 @@ var MenubarTrigger = React42.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
-var MenubarSubTrigger = React42.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs23(MenubarPrimitive.SubTrigger, { ref, className: cn(itemCls3, "data-[state=open]:bg-accent", inset && "pl-8", className), ...props, children: [
+var MenubarSubTrigger = React43.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs23(MenubarPrimitive.SubTrigger, { ref, className: cn(itemCls3, "data-[state=open]:bg-accent", inset && "pl-8", className), ...props, children: [
   children,
   /* @__PURE__ */ jsx47(ChevronRight6, { className: "ml-auto size-4" })
 ] }));
 MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
-var MenubarSubContent = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx47(MenubarPrimitive.SubContent, { ref, className: cn(contentCls3, className), ...props }));
+var MenubarSubContent = React43.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx47(MenubarPrimitive.SubContent, { ref, className: cn(contentCls3, className), ...props }));
 MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
-var MenubarContent = React42.forwardRef(({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => /* @__PURE__ */ jsx47(MenubarPrimitive.Portal, { children: /* @__PURE__ */ jsx47(
+var MenubarContent = React43.forwardRef(({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => /* @__PURE__ */ jsx47(MenubarPrimitive.Portal, { children: /* @__PURE__ */ jsx47(
   MenubarPrimitive.Content,
   {
     ref,
@@ -2303,36 +2318,36 @@ var MenubarContent = React42.forwardRef(({ className, align = "start", alignOffs
   }
 ) }));
 MenubarContent.displayName = MenubarPrimitive.Content.displayName;
-var MenubarItem = React42.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx47(MenubarPrimitive.Item, { ref, className: cn(itemCls3, inset && "pl-8", className), ...props }));
+var MenubarItem = React43.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx47(MenubarPrimitive.Item, { ref, className: cn(itemCls3, inset && "pl-8", className), ...props }));
 MenubarItem.displayName = MenubarPrimitive.Item.displayName;
-var MenubarCheckboxItem = React42.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs23(MenubarPrimitive.CheckboxItem, { ref, className: cn(itemCls3, "pl-8", className), checked, ...props, children: [
+var MenubarCheckboxItem = React43.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs23(MenubarPrimitive.CheckboxItem, { ref, className: cn(itemCls3, "pl-8", className), checked, ...props, children: [
   /* @__PURE__ */ jsx47("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx47(MenubarPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx47(Check5, { className: "size-4" }) }) }),
   children
 ] }));
 MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
-var MenubarRadioItem = React42.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs23(MenubarPrimitive.RadioItem, { ref, className: cn(itemCls3, "pl-8", className), ...props, children: [
+var MenubarRadioItem = React43.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs23(MenubarPrimitive.RadioItem, { ref, className: cn(itemCls3, "pl-8", className), ...props, children: [
   /* @__PURE__ */ jsx47("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx47(MenubarPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx47(Circle4, { className: "size-2 fill-current" }) }) }),
   children
 ] }));
 MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
-var MenubarLabel = React42.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx47(MenubarPrimitive.Label, { ref, className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className), ...props }));
+var MenubarLabel = React43.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx47(MenubarPrimitive.Label, { ref, className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className), ...props }));
 MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
-var MenubarSeparator = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx47(MenubarPrimitive.Separator, { ref, className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
+var MenubarSeparator = React43.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx47(MenubarPrimitive.Separator, { ref, className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));
 MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
 var MenubarShortcut = ({ className, ...props }) => /* @__PURE__ */ jsx47("span", { className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className), ...props });
 MenubarShortcut.displayName = "MenubarShortcut";
 
 // src/components/navigation-menu.tsx
-import * as React43 from "react";
+import * as React44 from "react";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import { cva as cva12 } from "class-variance-authority";
 import { ChevronDown as ChevronDown3 } from "lucide-react";
 import { jsx as jsx48, jsxs as jsxs24 } from "react/jsx-runtime";
-var NavigationMenu = React43.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs24(
+var NavigationMenu = React44.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs24(
   NavigationMenuPrimitive.Root,
   {
     ref,
-    className: cn("relative z-10 flex max-w-max flex-1 items-center justify-center font-sans", className),
+    className: cn("relative z-docked flex max-w-max flex-1 items-center justify-center font-sans", className),
     ...props,
     children: [
       children,
@@ -2341,7 +2356,7 @@ var NavigationMenu = React43.forwardRef(({ className, children, ...props }, ref)
   }
 ));
 NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
-var NavigationMenuList = React43.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx48(
+var NavigationMenuList = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx48(
   NavigationMenuPrimitive.List,
   {
     ref,
@@ -2352,20 +2367,20 @@ var NavigationMenuList = React43.forwardRef(({ className, ...props }, ref) => /*
 NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 var NavigationMenuItem = NavigationMenuPrimitive.Item;
 var navigationMenuTriggerStyle = cva12(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent/50"
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-disabled data-[state=open]:bg-accent/50"
 );
-var NavigationMenuTrigger = React43.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs24(NavigationMenuPrimitive.Trigger, { ref, className: cn(navigationMenuTriggerStyle(), "group", className), ...props, children: [
+var NavigationMenuTrigger = React44.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs24(NavigationMenuPrimitive.Trigger, { ref, className: cn(navigationMenuTriggerStyle(), "group", className), ...props, children: [
   children,
   /* @__PURE__ */ jsx48(
     ChevronDown3,
     {
-      className: "relative top-px ml-1 size-3 transition-transform duration-200 group-data-[state=open]:rotate-180",
+      className: "relative top-px ml-1 size-3 transition-transform duration-fast group-data-[state=open]:rotate-180",
       "aria-hidden": true
     }
   )
 ] }));
 NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
-var NavigationMenuContent = React43.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx48(
+var NavigationMenuContent = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx48(
   NavigationMenuPrimitive.Content,
   {
     ref,
@@ -2378,7 +2393,7 @@ var NavigationMenuContent = React43.forwardRef(({ className, ...props }, ref) =>
 ));
 NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
 var NavigationMenuLink = NavigationMenuPrimitive.Link;
-var NavigationMenuViewport = React43.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx48("div", { className: "absolute left-0 top-full flex justify-center", children: /* @__PURE__ */ jsx48(
+var NavigationMenuViewport = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx48("div", { className: "absolute left-0 top-full flex justify-center", children: /* @__PURE__ */ jsx48(
   NavigationMenuPrimitive.Viewport,
   {
     ref,
@@ -2390,12 +2405,12 @@ var NavigationMenuViewport = React43.forwardRef(({ className, ...props }, ref) =
   }
 ) }));
 NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
-var NavigationMenuIndicator = React43.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx48(
+var NavigationMenuIndicator = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx48(
   NavigationMenuPrimitive.Indicator,
   {
     ref,
     className: cn(
-      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      "top-full z-raised flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
       className
     ),
     ...props,
@@ -2436,13 +2451,13 @@ var ResizableHandle = ({
       className
     ),
     ...props,
-    children: withHandle && /* @__PURE__ */ jsx49("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border", children: /* @__PURE__ */ jsx49(GripVertical, { className: "size-2.5" }) })
+    children: withHandle && /* @__PURE__ */ jsx49("div", { className: "z-docked flex h-4 w-3 items-center justify-center rounded-sm border bg-border", children: /* @__PURE__ */ jsx49(GripVertical, { className: "size-2.5" }) })
   }
 );
 
 // src/components/sidebar.tsx
-import * as React44 from "react";
-import { Slot as Slot5 } from "@radix-ui/react-slot";
+import * as React45 from "react";
+import { Slot as Slot7 } from "@radix-ui/react-slot";
 import { cva as cva13 } from "class-variance-authority";
 import { PanelLeft } from "lucide-react";
 import { jsx as jsx50, jsxs as jsxs25 } from "react/jsx-runtime";
@@ -2451,15 +2466,15 @@ var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React44.createContext(null);
+var SidebarContext = React45.createContext(null);
 function useSidebar() {
-  const context = React44.useContext(SidebarContext);
+  const context = React45.useContext(SidebarContext);
   if (!context) throw new Error("useSidebar must be used within a SidebarProvider.");
   return context;
 }
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React44.useState(false);
-  React44.useEffect(() => {
+  const [isMobile, setIsMobile] = React45.useState(false);
+  React45.useEffect(() => {
     const mql = window.matchMedia("(max-width: 767px)");
     const onChange = () => setIsMobile(window.innerWidth < 768);
     mql.addEventListener("change", onChange);
@@ -2468,12 +2483,12 @@ function useIsMobile() {
   }, []);
   return isMobile;
 }
-var SidebarProvider = React44.forwardRef(({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }, ref) => {
+var SidebarProvider = React45.forwardRef(({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }, ref) => {
   const isMobile = useIsMobile();
-  const [openMobile, setOpenMobile] = React44.useState(false);
-  const [_open, _setOpen] = React44.useState(defaultOpen);
+  const [openMobile, setOpenMobile] = React45.useState(false);
+  const [_open, _setOpen] = React45.useState(defaultOpen);
   const open = openProp ?? _open;
-  const setOpen = React44.useCallback(
+  const setOpen = React45.useCallback(
     (value) => {
       const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) setOpenProp(openState);
@@ -2482,10 +2497,10 @@ var SidebarProvider = React44.forwardRef(({ defaultOpen = true, open: openProp,
     },
     [setOpenProp, open]
   );
-  const toggleSidebar = React44.useCallback(() => {
+  const toggleSidebar = React45.useCallback(() => {
     return isMobile ? setOpenMobile((o) => !o) : setOpen((o) => !o);
   }, [isMobile, setOpen]);
-  React44.useEffect(() => {
+  React45.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
@@ -2496,7 +2511,7 @@ var SidebarProvider = React44.forwardRef(({ defaultOpen = true, open: openProp,
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const contextValue = React44.useMemo(
+  const contextValue = React45.useMemo(
     () => ({ state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar }),
     [state, open, setOpen, isMobile, openMobile, toggleSidebar]
   );
@@ -2512,7 +2527,7 @@ var SidebarProvider = React44.forwardRef(({ defaultOpen = true, open: openProp,
   ) }) });
 });
 SidebarProvider.displayName = "SidebarProvider";
-var Sidebar = React44.forwardRef(({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }, ref) => {
+var Sidebar = React45.forwardRef(({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }, ref) => {
   const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
   if (collapsible === "none") {
     return /* @__PURE__ */ jsx50("div", { ref, className: cn("flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground", className), ...props, children });
@@ -2550,7 +2565,7 @@ var Sidebar = React44.forwardRef(({ side = "left", variant = "sidebar", collapsi
           "div",
           {
             className: cn(
-              "relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+              "relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-fast ease-linear",
               "group-data-[collapsible=offcanvas]:w-0",
               variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+theme(spacing.4))]" : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
             )
@@ -2560,7 +2575,7 @@ var Sidebar = React44.forwardRef(({ side = "left", variant = "sidebar", collapsi
           "div",
           {
             className: cn(
-              "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+              "fixed inset-y-0 z-docked hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-fast ease-linear md:flex",
               side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
               variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+theme(spacing.4)+2px)]" : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
               className
@@ -2581,7 +2596,7 @@ var Sidebar = React44.forwardRef(({ side = "left", variant = "sidebar", collapsi
   );
 });
 Sidebar.displayName = "Sidebar";
-var SidebarTrigger = React44.forwardRef(
+var SidebarTrigger = React45.forwardRef(
   ({ className, onClick, ...props }, ref) => {
     const { toggleSidebar } = useSidebar();
     return /* @__PURE__ */ jsxs25(
@@ -2605,7 +2620,7 @@ var SidebarTrigger = React44.forwardRef(
   }
 );
 SidebarTrigger.displayName = "SidebarTrigger";
-var SidebarInset = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx50(
+var SidebarInset = React45.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx50(
   "main",
   {
     ref,
@@ -2618,15 +2633,15 @@ var SidebarInset = React44.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 SidebarInset.displayName = "SidebarInset";
-var SidebarHeader = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx50("div", { ref, "data-sidebar": "header", className: cn("flex flex-col gap-2 p-2", className), ...props }));
+var SidebarHeader = React45.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx50("div", { ref, "data-sidebar": "header", className: cn("flex flex-col gap-2 p-2", className), ...props }));
 SidebarHeader.displayName = "SidebarHeader";
-var SidebarFooter = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx50("div", { ref, "data-sidebar": "footer", className: cn("flex flex-col gap-2 p-2", className), ...props }));
+var SidebarFooter = React45.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx50("div", { ref, "data-sidebar": "footer", className: cn("flex flex-col gap-2 p-2", className), ...props }));
 SidebarFooter.displayName = "SidebarFooter";
-var SidebarSeparator = React44.forwardRef(
+var SidebarSeparator = React45.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx50(Separator3, { ref, "data-sidebar": "separator", className: cn("mx-2 w-auto bg-sidebar-border", className), ...props })
 );
 SidebarSeparator.displayName = "SidebarSeparator";
-var SidebarContent = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx50(
+var SidebarContent = React45.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx50(
   "div",
   {
     ref,
@@ -2636,18 +2651,18 @@ var SidebarContent = React44.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 SidebarContent.displayName = "SidebarContent";
-var SidebarGroup = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx50("div", { ref, "data-sidebar": "group", className: cn("relative flex w-full min-w-0 flex-col p-2", className), ...props }));
+var SidebarGroup = React45.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx50("div", { ref, "data-sidebar": "group", className: cn("relative flex w-full min-w-0 flex-col p-2", className), ...props }));
 SidebarGroup.displayName = "SidebarGroup";
-var SidebarGroupLabel = React44.forwardRef(({ className, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot5 : "div";
+var SidebarGroupLabel = React45.forwardRef(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot7 : "div";
   return /* @__PURE__ */ jsx50(
     Comp,
     {
       ref,
       "data-sidebar": "group-label",
       className: cn(
-        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none transition-[margin,opacity] duration-fast ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-hidden",
         className
       ),
       ...props
@@ -2655,16 +2670,16 @@ var SidebarGroupLabel = React44.forwardRef(({ className, asChild = false, ...pro
   );
 });
 SidebarGroupLabel.displayName = "SidebarGroupLabel";
-var SidebarGroupContent = React44.forwardRef(
+var SidebarGroupContent = React45.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx50("div", { ref, "data-sidebar": "group-content", className: cn("w-full text-sm", className), ...props })
 );
 SidebarGroupContent.displayName = "SidebarGroupContent";
-var SidebarMenu = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx50("ul", { ref, "data-sidebar": "menu", className: cn("flex w-full min-w-0 flex-col gap-1", className), ...props }));
+var SidebarMenu = React45.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx50("ul", { ref, "data-sidebar": "menu", className: cn("flex w-full min-w-0 flex-col gap-1", className), ...props }));
 SidebarMenu.displayName = "SidebarMenu";
-var SidebarMenuItem = React44.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx50("li", { ref, "data-sidebar": "menu-item", className: cn("group/menu-item relative", className), ...props }));
+var SidebarMenuItem = React45.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx50("li", { ref, "data-sidebar": "menu-item", className: cn("group/menu-item relative", className), ...props }));
 SidebarMenuItem.displayName = "SidebarMenuItem";
 var sidebarMenuButtonVariants = cva13(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-disabled group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-disabled data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -2680,8 +2695,8 @@ var sidebarMenuButtonVariants = cva13(
     defaultVariants: { variant: "default", size: "default" }
   }
 );
-var SidebarMenuButton = React44.forwardRef(({ asChild = false, isActive = false, variant = "default", size = "default", tooltip, className, ...props }, ref) => {
-  const Comp = asChild ? Slot5 : "button";
+var SidebarMenuButton = React45.forwardRef(({ asChild = false, isActive = false, variant = "default", size = "default", tooltip, className, ...props }, ref) => {
+  const Comp = asChild ? Slot7 : "button";
   const { isMobile, state } = useSidebar();
   const button = /* @__PURE__ */ jsx50(
     Comp,
@@ -2702,21 +2717,21 @@ var SidebarMenuButton = React44.forwardRef(({ asChild = false, isActive = false,
   ] });
 });
 SidebarMenuButton.displayName = "SidebarMenuButton";
-var SidebarMenuSkeleton = React44.forwardRef(({ className, showIcon = false, ...props }, ref) => {
-  const width = React44.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
+var SidebarMenuSkeleton = React45.forwardRef(({ className, showIcon = false, ...props }, ref) => {
+  const width = React45.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
   return /* @__PURE__ */ jsxs25("div", { ref, "data-sidebar": "menu-skeleton", className: cn("flex h-8 items-center gap-2 rounded-md px-2", className), ...props, children: [
     showIcon && /* @__PURE__ */ jsx50(Skeleton, { className: "size-4 rounded-md" }),
     /* @__PURE__ */ jsx50(Skeleton, { className: "h-4 max-w-[--skeleton-width] flex-1", style: { "--skeleton-width": width } })
   ] });
 });
 SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
-var SidebarInput = React44.forwardRef(
+var SidebarInput = React45.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx50(Input, { ref, "data-sidebar": "input", className: cn("h-8 w-full bg-background shadow-none", className), ...props })
 );
 SidebarInput.displayName = "SidebarInput";
 
 // src/components/audio-player.tsx
-import * as React45 from "react";
+import * as React46 from "react";
 import { Pause, Play, SkipBack, SkipForward } from "lucide-react";
 import { jsx as jsx51, jsxs as jsxs26 } from "react/jsx-runtime";
 function fmt(t) {
@@ -2725,12 +2740,12 @@ function fmt(t) {
   const s = Math.floor(t % 60);
   return `${m}:${s.toString().padStart(2, "0")}`;
 }
-var AudioPlayer = React45.forwardRef(
+var AudioPlayer = React46.forwardRef(
   ({ src, variant = "full", title, artist, coverSrc, skipBy = 10, onPrev, onNext, className, ...props }, ref) => {
-    const audioRef = React45.useRef(null);
-    const [playing, setPlaying] = React45.useState(false);
-    const [current, setCurrent] = React45.useState(0);
-    const [duration, setDuration] = React45.useState(0);
+    const audioRef = React46.useRef(null);
+    const [playing, setPlaying] = React46.useState(false);
+    const [current, setCurrent] = React46.useState(0);
+    const [duration, setDuration] = React46.useState(0);
     const toggle = () => {
       const a = audioRef.current;
       if (!a) return;
@@ -2829,9 +2844,9 @@ var AudioPlayer = React45.forwardRef(
 AudioPlayer.displayName = "AudioPlayer";
 
 // src/components/circular-progress.tsx
-import * as React46 from "react";
+import * as React47 from "react";
 import { jsx as jsx52, jsxs as jsxs27 } from "react/jsx-runtime";
-var CircularProgress = React46.forwardRef(
+var CircularProgress = React47.forwardRef(
   ({ value = 0, size = 48, strokeWidth = 4, showValue = false, label, className, ...props }, ref) => {
     const v = Math.max(0, Math.min(100, value));
     const r = (size - strokeWidth) / 2;
@@ -2871,7 +2886,7 @@ var CircularProgress = React46.forwardRef(
                 strokeLinecap: "round",
                 strokeDasharray: c,
                 strokeDashoffset: c - v / 100 * c,
-                className: "stroke-primary transition-[stroke-dashoffset] duration-300"
+                className: "stroke-primary transition-[stroke-dashoffset] duration-base"
               }
             )
           ] }),
@@ -2884,7 +2899,7 @@ var CircularProgress = React46.forwardRef(
 CircularProgress.displayName = "CircularProgress";
 
 // src/components/image.tsx
-import * as React47 from "react";
+import * as React48 from "react";
 import { ImageOff } from "lucide-react";
 import { jsx as jsx53 } from "react/jsx-runtime";
 var RATIOS = {
@@ -2895,11 +2910,11 @@ var RATIOS = {
   "3:1": 3,
   "16:9": 16 / 9
 };
-var Image2 = React47.forwardRef(
+var Image2 = React48.forwardRef(
   ({ ratio = "1:1", rounded = true, fallback, className, alt = "", onLoad, onError, ...props }, forwardedRef) => {
-    const [status, setStatus] = React47.useState("loading");
-    const innerRef = React47.useRef(null);
-    const setRef = React47.useCallback(
+    const [status, setStatus] = React48.useState("loading");
+    const innerRef = React48.useRef(null);
+    const setRef = React48.useCallback(
       (node) => {
         innerRef.current = node;
         if (typeof forwardedRef === "function") forwardedRef(node);
@@ -2908,7 +2923,7 @@ var Image2 = React47.forwardRef(
       [forwardedRef]
     );
     const r = typeof ratio === "number" ? ratio : RATIOS[ratio] ?? 1;
-    React47.useEffect(() => {
+    React48.useEffect(() => {
       const img = innerRef.current;
       if (!img) return;
       if (img.complete) setStatus(img.naturalWidth > 0 ? "loaded" : "error");
@@ -2928,8 +2943,8 @@ var Image2 = React47.forwardRef(
             ref: setRef,
             alt,
             className: cn(
-              "size-full object-cover transition-opacity duration-300",
-              status === "loaded" ? "opacity-100" : "opacity-0"
+              "size-full object-cover transition-opacity duration-base",
+              status === "loaded" ? "opacity-visible" : "opacity-hidden"
             ),
             onLoad: (e) => {
               setStatus("loaded");
@@ -2949,7 +2964,7 @@ var Image2 = React47.forwardRef(
 Image2.displayName = "Image";
 
 // src/components/inform.tsx
-import * as React48 from "react";
+import * as React49 from "react";
 import { cva as cva14 } from "class-variance-authority";
 import { CircleAlert as CircleAlert2, CircleCheck as CircleCheck2, Info as Info2, TriangleAlert as TriangleAlert2, X as X5 } from "lucide-react";
 import { jsx as jsx54, jsxs as jsxs28 } from "react/jsx-runtime";
@@ -2975,7 +2990,7 @@ var ICON = {
   error: CircleAlert2,
   action: Info2
 };
-var Inform = React48.forwardRef(
+var Inform = React49.forwardRef(
   ({ className, variant = "information", hideIcon, onDismiss, action, children, ...props }, ref) => {
     const Icon2 = ICON[variant ?? "information"];
     return /* @__PURE__ */ jsxs28("div", { ref, role: "status", className: cn(informVariants({ variant }), className), ...props, children: [
@@ -3001,7 +3016,7 @@ var Inform = React48.forwardRef(
           type: "button",
           onClick: onDismiss,
           "aria-label": "Dismiss",
-          className: "-m-0.5 shrink-0 rounded-[2px] p-0.5 opacity-70 outline-none transition-opacity hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-1 focus-visible:ring-current",
+          className: "-m-0.5 shrink-0 rounded-[2px] p-0.5 opacity-muted outline-none transition-opacity hover:opacity-visible focus-visible:opacity-visible focus-visible:ring-1 focus-visible:ring-current",
           children: /* @__PURE__ */ jsx54(X5, { className: "size-3.5" })
         }
       )
@@ -3011,7 +3026,7 @@ var Inform = React48.forwardRef(
 Inform.displayName = "Inform";
 
 // src/components/rating.tsx
-import * as React49 from "react";
+import * as React50 from "react";
 import { Star } from "lucide-react";
 import { cva as cva15 } from "class-variance-authority";
 import { jsx as jsx55 } from "react/jsx-runtime";
@@ -3025,10 +3040,10 @@ var starVariants = cva15("transition-colors", {
   },
   defaultVariants: { size: "md" }
 });
-var Rating = React49.forwardRef(
+var Rating = React50.forwardRef(
   ({ className, value, defaultValue = 0, max = 5, size, readOnly = false, onChange, ...props }, ref) => {
-    const [internal, setInternal] = React49.useState(defaultValue);
-    const [hovered, setHovered] = React49.useState(null);
+    const [internal, setInternal] = React50.useState(defaultValue);
+    const [hovered, setHovered] = React50.useState(null);
     const current = value ?? internal;
     const display = hovered ?? current;
     const set = (n) => {
@@ -3081,7 +3096,7 @@ var Rating = React49.forwardRef(
 Rating.displayName = "Rating";
 
 // src/components/spinner.tsx
-import * as React50 from "react";
+import * as React51 from "react";
 import { cva as cva16 } from "class-variance-authority";
 import { jsx as jsx56 } from "react/jsx-runtime";
 var spinnerVariants = cva16("inline-block animate-spin rounded-full border-2 border-current border-t-transparent", {
@@ -3099,19 +3114,19 @@ var spinnerVariants = cva16("inline-block animate-spin rounded-full border-2 bor
   },
   defaultVariants: { size: "md", variant: "default" }
 });
-var Spinner = React50.forwardRef(
+var Spinner = React51.forwardRef(
   ({ className, size, variant, label = "Loading\u2026", ...props }, ref) => /* @__PURE__ */ jsx56("span", { ref, role: "status", "aria-label": label, className: cn(spinnerVariants({ size, variant }), className), ...props, children: /* @__PURE__ */ jsx56("span", { className: "sr-only", children: label }) })
 );
 Spinner.displayName = "Spinner";
 
 // src/components/list.tsx
-import * as React51 from "react";
+import * as React52 from "react";
 import { jsx as jsx57, jsxs as jsxs29 } from "react/jsx-runtime";
-var List3 = React51.forwardRef(
+var List3 = React52.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx57("div", { ref, role: "list", className: cn("flex flex-col divide-y divide-border", className), ...props })
 );
 List3.displayName = "List";
-var ListItem = React51.forwardRef(
+var ListItem = React52.forwardRef(
   ({ className, leading, title, description, trailing, disabled, onSelect, ...props }, ref) => {
     const interactive = !!onSelect && !disabled;
     return /* @__PURE__ */ jsxs29(
@@ -3132,7 +3147,7 @@ var ListItem = React51.forwardRef(
           "flex items-center gap-3 px-3 py-3 font-sans outline-none",
           // ring keeps the highlighted row perceptible where the accent fill is <3:1 (dark)
           interactive && "cursor-pointer hover:bg-accent hover:ring-1 hover:ring-inset hover:ring-ring focus-visible:bg-accent focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
-          disabled && "pointer-events-none opacity-50",
+          disabled && "pointer-events-none opacity-disabled",
           className
         ),
         ...props,
@@ -3151,10 +3166,10 @@ var ListItem = React51.forwardRef(
 ListItem.displayName = "ListItem";
 
 // src/components/stepper.tsx
-import * as React52 from "react";
+import * as React53 from "react";
 import { Check as Check6 } from "lucide-react";
 import { jsx as jsx58, jsxs as jsxs30 } from "react/jsx-runtime";
-var Stepper = React52.forwardRef(
+var Stepper = React53.forwardRef(
   ({ className, steps, current, orientation = "horizontal", ...props }, ref) => {
     const vertical = orientation === "vertical";
     return /* @__PURE__ */ jsx58("ol", { ref, className: cn("flex font-sans", vertical ? "flex-col" : "w-full items-start", className), ...props, children: steps.map((step, i) => {
@@ -3205,15 +3220,15 @@ var Stepper = React52.forwardRef(
 Stepper.displayName = "Stepper";
 
 // src/components/fab.tsx
-import * as React53 from "react";
-import { Slot as Slot6 } from "@radix-ui/react-slot";
+import * as React54 from "react";
+import { Slot as Slot8 } from "@radix-ui/react-slot";
 import { cva as cva17 } from "class-variance-authority";
 import { jsx as jsx59 } from "react/jsx-runtime";
 var fabVariants = cva17(
   [
     "inline-flex shrink-0 items-center justify-center gap-2 rounded-full font-sans font-medium",
     "shadow-lg outline-none transition-colors",
-    "focus-visible:shadow-focus disabled:pointer-events-none disabled:opacity-50",
+    "focus-visible:shadow-focus disabled:pointer-events-none disabled:opacity-disabled",
     "[&_svg]:pointer-events-none [&_svg]:shrink-0"
   ],
   {
@@ -3234,9 +3249,9 @@ var fabVariants = cva17(
     defaultVariants: { variant: "Primary", size: "default", extended: false }
   }
 );
-var Fab = React53.forwardRef(
+var Fab = React54.forwardRef(
   ({ className, variant, size, extended, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot6 : "button";
+    const Comp = asChild ? Slot8 : "button";
     return /* @__PURE__ */ jsx59(
       Comp,
       {
@@ -3251,9 +3266,9 @@ var Fab = React53.forwardRef(
 Fab.displayName = "Fab";
 
 // src/components/tab-bar.tsx
-import * as React54 from "react";
+import * as React55 from "react";
 import { jsx as jsx60, jsxs as jsxs31 } from "react/jsx-runtime";
-var TabBar = React54.forwardRef(
+var TabBar = React55.forwardRef(
   ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx60(
     "nav",
     {
@@ -3265,7 +3280,7 @@ var TabBar = React54.forwardRef(
   )
 );
 TabBar.displayName = "TabBar";
-var TabBarItem = React54.forwardRef(
+var TabBarItem = React55.forwardRef(
   ({ className, icon, label, active, badge, ...props }, ref) => /* @__PURE__ */ jsxs31(
     "button",
     {
@@ -3292,10 +3307,10 @@ var TabBarItem = React54.forwardRef(
 TabBarItem.displayName = "TabBarItem";
 
 // src/components/navigation-bar.tsx
-import * as React55 from "react";
+import * as React56 from "react";
 import { ChevronLeft as ChevronLeft3 } from "lucide-react";
 import { jsx as jsx61, jsxs as jsxs32 } from "react/jsx-runtime";
-var NavigationBar = React55.forwardRef(
+var NavigationBar = React56.forwardRef(
   ({ className, title, infoText, onBack, leading, actions, ...props }, ref) => /* @__PURE__ */ jsxs32(
     "header",
     {
@@ -3325,28 +3340,28 @@ var NavigationBar = React55.forwardRef(
 NavigationBar.displayName = "NavigationBar";
 
 // src/components/app-bar.tsx
-import * as React56 from "react";
-import { Slot as Slot7 } from "@radix-ui/react-slot";
+import * as React57 from "react";
+import { Slot as Slot9 } from "@radix-ui/react-slot";
 import { Menu as Menu2, X as X6 } from "lucide-react";
 import { jsx as jsx62, jsxs as jsxs33 } from "react/jsx-runtime";
-var Ctx = React56.createContext(null);
+var Ctx = React57.createContext(null);
 var useAppBar = () => {
-  const ctx = React56.useContext(Ctx);
+  const ctx = React57.useContext(Ctx);
   if (!ctx) throw new Error("AppBar parts must be used within <AppBar>");
   return ctx;
 };
-var AppBar = React56.forwardRef(
+var AppBar = React57.forwardRef(
   ({ className, children, ...props }, ref) => {
-    const [open, setOpen] = React56.useState(false);
-    const nav = React56.Children.toArray(children).find(
-      (c) => React56.isValidElement(c) && c.type === AppBarNav
+    const [open, setOpen] = React57.useState(false);
+    const nav = React57.Children.toArray(children).find(
+      (c) => React57.isValidElement(c) && c.type === AppBarNav
     );
     return /* @__PURE__ */ jsx62(Ctx.Provider, { value: { open, setOpen }, children: /* @__PURE__ */ jsxs33(
       "header",
       {
         ref,
         className: cn(
-          "sticky top-0 z-40 w-full border-b border-border bg-background/95 font-sans",
+          "sticky top-0 z-sticky w-full border-b border-border bg-background/95 font-sans",
           "backdrop-blur supports-[backdrop-filter]:bg-background/75",
           className
         ),
@@ -3376,7 +3391,7 @@ var AppBar = React56.forwardRef(
   }
 );
 AppBar.displayName = "AppBar";
-var AppBarBrand = React56.forwardRef(
+var AppBarBrand = React57.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx62(
     "div",
     {
@@ -3387,13 +3402,13 @@ var AppBarBrand = React56.forwardRef(
   )
 );
 AppBarBrand.displayName = "AppBarBrand";
-var AppBarNav = React56.forwardRef(
+var AppBarNav = React57.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx62("nav", { ref, className: cn("hidden items-center gap-1 md:flex", className), ...props })
 );
 AppBarNav.displayName = "AppBarNav";
-var AppBarLink = React56.forwardRef(
+var AppBarLink = React57.forwardRef(
   ({ className, active, asChild, ...props }, ref) => {
-    const Comp = asChild ? Slot7 : "a";
+    const Comp = asChild ? Slot9 : "a";
     return /* @__PURE__ */ jsx62(
       Comp,
       {
@@ -3412,13 +3427,13 @@ var AppBarLink = React56.forwardRef(
   }
 );
 AppBarLink.displayName = "AppBarLink";
-var AppBarActions = React56.forwardRef(
+var AppBarActions = React57.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx62("div", { ref, className: cn("ml-auto flex shrink-0 items-center gap-2", className), ...props })
 );
 AppBarActions.displayName = "AppBarActions";
 
 // src/components/file-upload.tsx
-import * as React57 from "react";
+import * as React58 from "react";
 import { File, Loader2, TriangleAlert as TriangleAlert3, Upload, X as X7 } from "lucide-react";
 import { jsx as jsx63, jsxs as jsxs34 } from "react/jsx-runtime";
 function formatBytes(bytes) {
@@ -3432,10 +3447,10 @@ function formatBytes(bytes) {
   }
   return `${v.toFixed(v < 10 && i > 0 ? 1 : 0)} ${units[i]}`;
 }
-var FileUpload = React57.forwardRef(
+var FileUpload = React58.forwardRef(
   ({ className, multiple, accept, disabled, helperText, buttonLabel = "Browse files", files = [], onFilesSelected, onRemove, onRetry, ...props }, ref) => {
-    const inputRef = React57.useRef(null);
-    const [dragging, setDragging] = React57.useState(false);
+    const inputRef = React58.useRef(null);
+    const [dragging, setDragging] = React58.useState(false);
     const pick = (list) => {
       if (!list || !list.length) return;
       onFilesSelected?.(Array.from(list));
@@ -3468,7 +3483,7 @@ var FileUpload = React57.forwardRef(
             "flex flex-col items-center gap-2 rounded-md border border-dashed border-input p-6 text-center outline-none transition-colors",
             !disabled && "cursor-pointer hover:bg-accent/50 focus-visible:shadow-focus",
             dragging && "border-primary bg-accent",
-            disabled && "pointer-events-none opacity-50"
+            disabled && "pointer-events-none opacity-disabled"
           ),
           children: [
             /* @__PURE__ */ jsx63(Upload, { className: "size-6 text-muted-foreground", "aria-hidden": true }),
@@ -3549,13 +3564,13 @@ function FileUploadItem({ file, onRemove, onRetry }) {
 FileUploadItem.displayName = "FileUploadItem";
 
 // src/components/date-picker.tsx
-import * as React58 from "react";
+import * as React59 from "react";
 import { CalendarIcon } from "lucide-react";
 import { format } from "date-fns";
 import { jsx as jsx64, jsxs as jsxs35 } from "react/jsx-runtime";
-var DatePicker = React58.forwardRef(
+var DatePicker = React59.forwardRef(
   ({ value, onChange, placeholder = "Select date", label, helperText, error, disabled, className, formatStr = "PP", calendarProps }, ref) => {
-    const [open, setOpen] = React58.useState(false);
+    const [open, setOpen] = React59.useState(false);
     return /* @__PURE__ */ jsxs35("div", { className: cn("flex flex-col gap-1.5 font-sans", className), children: [
       label && /* @__PURE__ */ jsx64("label", { className: "text-label-md font-medium text-foreground", children: label }),
       /* @__PURE__ */ jsxs35(Popover, { open, onOpenChange: setOpen, children: [
@@ -3593,14 +3608,14 @@ var DatePicker = React58.forwardRef(
 DatePicker.displayName = "DatePicker";
 
 // src/components/code-block.tsx
-import * as React59 from "react";
+import * as React60 from "react";
 import { Check as Check7, Copy } from "lucide-react";
 import { jsx as jsx65, jsxs as jsxs36 } from "react/jsx-runtime";
-var CodeBlock = React59.forwardRef(
+var CodeBlock = React60.forwardRef(
   ({ className, code, language, filename, files, hideCopy, ...props }, ref) => {
     const tabs = files && files.length > 0 ? files : [{ name: filename ?? language ?? "", code: code ?? "" }];
-    const [active, setActive] = React59.useState(0);
-    const [copied, setCopied] = React59.useState(false);
+    const [active, setActive] = React60.useState(0);
+    const [copied, setCopied] = React60.useState(false);
     const current = tabs[active] ?? tabs[0];
     const hasHeader = tabs.length > 1 || !!current.name;
     const copy = async () => {
@@ -3656,10 +3671,10 @@ var CodeBlock = React59.forwardRef(
 CodeBlock.displayName = "CodeBlock";
 
 // src/components/metric.tsx
-import * as React60 from "react";
+import * as React61 from "react";
 import { ArrowDown, ArrowUp } from "lucide-react";
 import { jsx as jsx66, jsxs as jsxs37 } from "react/jsx-runtime";
-var Metric = React60.forwardRef(
+var Metric = React61.forwardRef(
   ({ className, label, value, trend, change, icon, chart, ...props }, ref) => /* @__PURE__ */ jsxs37("div", { ref, className: cn("flex flex-col gap-2 rounded-md border border-input p-4 font-sans", className), ...props, children: [
     /* @__PURE__ */ jsxs37("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsx66("p", { className: "text-body-sm text-muted-foreground", children: label }),
@@ -3690,12 +3705,12 @@ var Metric = React60.forwardRef(
 Metric.displayName = "Metric";
 
 // src/components/number-input.tsx
-import * as React61 from "react";
+import * as React62 from "react";
 import { Minus as Minus3, Plus } from "lucide-react";
 import { jsx as jsx67, jsxs as jsxs38 } from "react/jsx-runtime";
-var NumberInput = React61.forwardRef(
+var NumberInput = React62.forwardRef(
   ({ className, value, defaultValue = 0, min, max, step = 1, onChange, disabled, ...props }, ref) => {
-    const [internal, setInternal] = React61.useState(defaultValue);
+    const [internal, setInternal] = React62.useState(defaultValue);
     const current = value ?? internal;
     const clamp = (n) => {
       let v = n;
@@ -3713,7 +3728,7 @@ var NumberInput = React61.forwardRef(
       {
         className: cn(
           "flex h-10 items-stretch overflow-hidden rounded-md border border-input font-sans focus-within:shadow-focus",
-          disabled && "pointer-events-none opacity-50",
+          disabled && "pointer-events-none opacity-disabled",
           className
         ),
         children: [
@@ -3724,7 +3739,7 @@ var NumberInput = React61.forwardRef(
               "aria-label": "Decrease",
               disabled: disabled || min != null && current <= min,
               onClick: () => set(current - step),
-              className: "flex w-9 shrink-0 items-center justify-center text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-foreground focus-visible:bg-accent focus-visible:text-foreground focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+              className: "flex w-9 shrink-0 items-center justify-center text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-foreground focus-visible:bg-accent focus-visible:text-foreground focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-disabled",
               children: /* @__PURE__ */ jsx67(Minus3, { className: "size-4" })
             }
           ),
@@ -3754,7 +3769,7 @@ var NumberInput = React61.forwardRef(
               "aria-label": "Increase",
               disabled: disabled || max != null && current >= max,
               onClick: () => set(current + step),
-              className: "flex w-9 shrink-0 items-center justify-center text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-foreground focus-visible:bg-accent focus-visible:text-foreground focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+              className: "flex w-9 shrink-0 items-center justify-center text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-foreground focus-visible:bg-accent focus-visible:text-foreground focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-disabled",
               children: /* @__PURE__ */ jsx67(Plus, { className: "size-4" })
             }
           )
@@ -3766,9 +3781,9 @@ var NumberInput = React61.forwardRef(
 NumberInput.displayName = "NumberInput";
 
 // src/components/quote.tsx
-import * as React62 from "react";
+import * as React63 from "react";
 import { jsx as jsx68, jsxs as jsxs39 } from "react/jsx-runtime";
-var Quote = React62.forwardRef(
+var Quote = React63.forwardRef(
   ({ className, author, authorTitle, avatar, children, ...props }, ref) => /* @__PURE__ */ jsxs39("figure", { ref, className: cn("flex flex-col gap-4 font-sans", className), ...props, children: [
     /* @__PURE__ */ jsxs39("blockquote", { className: "text-title-md font-medium text-foreground", children: [
       "\u201C",
@@ -3787,20 +3802,20 @@ var Quote = React62.forwardRef(
 Quote.displayName = "Quote";
 
 // src/components/footer.tsx
-import * as React63 from "react";
+import * as React64 from "react";
 import { jsx as jsx69, jsxs as jsxs40 } from "react/jsx-runtime";
-var Footer = React63.forwardRef(
+var Footer = React64.forwardRef(
   ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx69("footer", { ref, className: cn("w-full border-t border-border bg-background px-6 py-10 font-sans", className), ...props, children })
 );
 Footer.displayName = "Footer";
-var FooterColumn = React63.forwardRef(
+var FooterColumn = React64.forwardRef(
   ({ className, title, children, ...props }, ref) => /* @__PURE__ */ jsxs40("div", { ref, className: cn("flex flex-col gap-3", className), ...props, children: [
     /* @__PURE__ */ jsx69("p", { className: "text-label-md font-medium text-foreground", children: title }),
     /* @__PURE__ */ jsx69("div", { className: "flex flex-col gap-2", children })
   ] })
 );
 FooterColumn.displayName = "FooterColumn";
-var FooterLink = React63.forwardRef(
+var FooterLink = React64.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx69(
     "a",
     {
@@ -3814,7 +3829,7 @@ var FooterLink = React63.forwardRef(
   )
 );
 FooterLink.displayName = "FooterLink";
-var FooterBottom = React63.forwardRef(
+var FooterBottom = React64.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx69(
     "div",
     {
@@ -3830,9 +3845,9 @@ var FooterBottom = React63.forwardRef(
 FooterBottom.displayName = "FooterBottom";
 
 // src/components/table-of-contents.tsx
-import * as React64 from "react";
+import * as React65 from "react";
 import { jsx as jsx70 } from "react/jsx-runtime";
-var TableOfContents = React64.forwardRef(
+var TableOfContents = React65.forwardRef(
   ({ className, items, active, ...props }, ref) => /* @__PURE__ */ jsx70("nav", { ref, "aria-label": "Table of contents", className: cn("flex flex-col gap-0.5 font-sans", className), ...props, children: items.map((item) => {
     const isActive = item.id === active;
     return /* @__PURE__ */ jsx70(