@pactor-app/ui 1.2.0 → 1.7.0

package/dist/ui/index.cjs

@@ -49,6 +49,15 @@ __export(ui_exports, {
   AlertDialogTrigger: () => AlertDialogTrigger,
   AlertTitle: () => AlertTitle,
   AspectRatio: () => AspectRatio,
+  Attachment: () => Attachment,
+  AttachmentAction: () => AttachmentAction,
+  AttachmentActions: () => AttachmentActions,
+  AttachmentContent: () => AttachmentContent,
+  AttachmentDescription: () => AttachmentDescription,
+  AttachmentGroup: () => AttachmentGroup,
+  AttachmentMedia: () => AttachmentMedia,
+  AttachmentTitle: () => AttachmentTitle,
+  AttachmentTrigger: () => AttachmentTrigger,
   Avatar: () => Avatar,
   AvatarFallback: () => AvatarFallback,
   AvatarImage: () => AvatarImage,
@@ -60,6 +69,10 @@ __export(ui_exports, {
   BreadcrumbList: () => BreadcrumbList,
   BreadcrumbPage: () => BreadcrumbPage,
   BreadcrumbSeparator: () => BreadcrumbSeparator,
+  Bubble: () => Bubble,
+  BubbleContent: () => BubbleContent,
+  BubbleGroup: () => BubbleGroup,
+  BubbleReactions: () => BubbleReactions,
   Button: () => Button,
   ButtonGroup: () => ButtonGroup,
   CHART_TOKEN_COLORS: () => CHART_TOKEN_COLORS,
@@ -157,6 +170,12 @@ __export(ui_exports, {
   MenubarMenu: () => MenubarMenu,
   MenubarSeparator: () => MenubarSeparator,
   MenubarTrigger: () => MenubarTrigger,
+  Message: () => Message,
+  MessageAvatar: () => MessageAvatar,
+  MessageContent: () => MessageContent,
+  MessageFooter: () => MessageFooter,
+  MessageGroup: () => MessageGroup,
+  MessageHeader: () => MessageHeader,
   NavigationMenu: () => NavigationMenu,
   NavigationMenuContent: () => NavigationMenuContent,
   NavigationMenuItem: () => NavigationMenuItem,
@@ -205,6 +224,29 @@ __export(ui_exports, {
   SheetPortal: () => SheetPortal,
   SheetTitle: () => SheetTitle,
   SheetTrigger: () => SheetTrigger,
+  SidebarContentArea: () => SidebarContent,
+  SidebarFooterArea: () => SidebarFooter,
+  SidebarGroup: () => SidebarGroup,
+  SidebarGroupAction: () => SidebarGroupAction,
+  SidebarGroupContent: () => SidebarGroupContent,
+  SidebarGroupLabel: () => SidebarGroupLabel,
+  SidebarHeaderArea: () => SidebarHeader,
+  SidebarInput: () => SidebarInput,
+  SidebarInset: () => SidebarInset,
+  SidebarMenu: () => SidebarMenu,
+  SidebarMenuAction: () => SidebarMenuAction,
+  SidebarMenuBadge: () => SidebarMenuBadge,
+  SidebarMenuButton: () => SidebarMenuButton,
+  SidebarMenuItem: () => SidebarMenuItem,
+  SidebarMenuSkeleton: () => SidebarMenuSkeleton,
+  SidebarMenuSub: () => SidebarMenuSub,
+  SidebarMenuSubButton: () => SidebarMenuSubButton,
+  SidebarMenuSubItem: () => SidebarMenuSubItem,
+  SidebarProvider: () => SidebarProvider,
+  SidebarRail: () => SidebarRail,
+  SidebarRoot: () => SidebarRoot,
+  SidebarSeparator: () => SidebarSeparator,
+  SidebarTrigger: () => SidebarTrigger,
   Skeleton: () => Skeleton,
   Slider: () => Slider,
   SliderControl: () => SliderControl,
@@ -243,7 +285,8 @@ __export(ui_exports, {
   toastManager: () => toastManager,
   toggleVariants: () => toggleVariants,
   typographyVariants: () => typographyVariants,
-  useCarousel: () => useCarousel
+  useCarousel: () => useCarousel,
+  useSidebar: () => useSidebar
 });
 module.exports = __toCommonJS(ui_exports);
 
@@ -400,8 +443,9 @@ function AlertDescription({
   );
 }
 
-// src/ui/alert-dialog.tsx
-var import_alert_dialog = require("@base-ui/react/alert-dialog");
+// src/ui/attachment.tsx
+var import_class_variance_authority3 = require("class-variance-authority");
+var React2 = __toESM(require("react"), 1);
 
 // src/ui/button.tsx
 var import_button = require("@base-ui/react/button");
@@ -415,16 +459,20 @@ var buttonVariants = (0, import_class_variance_authority2.cva)(
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20",
-        outline: "border border-border bg-background hover:bg-accent hover:text-accent-foreground",
+        outline: "border border-border bg-card hover:bg-accent hover:text-accent-foreground",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline"
       },
       size: {
         default: "h-9 px-4 py-2",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
         sm: "h-8 gap-1.5 rounded-md px-3 text-xs",
         lg: "h-10 rounded-md px-6",
-        icon: "size-9"
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
       }
     },
     defaultVariants: {
@@ -463,33 +511,225 @@ function Button({
   );
 }
 
-// src/ui/alert-dialog.tsx
+// src/ui/attachment.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
+var attachmentVariants = (0, import_class_variance_authority3.cva)(
+  "group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-xl border bg-card text-card-foreground transition-colors focus-within:ring-1 focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed",
+  {
+    variants: {
+      size: {
+        default: "gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2",
+        sm: "gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5",
+        xs: "gap-1.5 rounded-lg text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1"
+      },
+      orientation: {
+        horizontal: "min-w-40 items-center",
+        vertical: "w-24 flex-col has-data-[slot=attachment-content]:w-30"
+      }
+    }
+  }
+);
+function Attachment({
+  className,
+  state = "done",
+  size = "default",
+  orientation = "horizontal",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      "data-slot": "attachment",
+      "data-state": state,
+      "data-size": size,
+      "data-orientation": orientation,
+      className: cn(attachmentVariants({ size, orientation }), className),
+      ...props
+    }
+  );
+}
+var attachmentMediaVariants = (0, import_class_variance_authority3.cva)(
+  "relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5",
+  {
+    variants: {
+      variant: {
+        icon: "",
+        image: "opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover"
+      }
+    },
+    defaultVariants: {
+      variant: "icon"
+    }
+  }
+);
+function AttachmentMedia({
+  className,
+  variant = "icon",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      "data-slot": "attachment-media",
+      "data-variant": variant,
+      className: cn(attachmentMediaVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function AttachmentContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      "data-slot": "attachment-content",
+      className: cn(
+        "max-w-full min-w-0 flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-1",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AttachmentTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "span",
+    {
+      "data-slot": "attachment-title",
+      className: cn(
+        "block max-w-full min-w-0 truncate font-medium group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AttachmentDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "span",
+    {
+      "data-slot": "attachment-description",
+      className: cn(
+        "mt-0.5 block min-w-0 truncate text-xs text-muted-foreground group-data-[state=error]/attachment:text-destructive/80",
+        "max-w-full",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AttachmentActions({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      "data-slot": "attachment-actions",
+      className: cn(
+        "relative z-20 flex shrink-0 items-center group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:right-3 group-data-[orientation=vertical]/attachment:gap-1",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AttachmentAction({
+  className,
+  variant,
+  size = "icon-xs",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    Button,
+    {
+      "data-slot": "attachment-action",
+      variant: variant ?? "ghost",
+      size,
+      className: cn(className),
+      ...props
+    }
+  );
+}
+function AttachmentTrigger({
+  className,
+  asChild = false,
+  type,
+  children,
+  ...props
+}) {
+  if (asChild && React2.isValidElement(children)) {
+    return React2.cloneElement(children, {
+      "data-slot": "attachment-trigger",
+      className: cn(
+        "absolute inset-0 z-10 outline-none",
+        children.props.className,
+        className
+      ),
+      ...props
+    });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "button",
+    {
+      "data-slot": "attachment-trigger",
+      type: type ?? "button",
+      className: cn("absolute inset-0 z-10 outline-none", className),
+      ...props,
+      children
+    }
+  );
+}
+function AttachmentGroup({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      "data-slot": "attachment-group",
+      className: cn(
+        "flex min-w-0 scroll-fade-x snap-x snap-mandatory scroll-px-1 scrollbar-none gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/ui/alert-dialog.tsx
+var import_alert_dialog = require("@base-ui/react/alert-dialog");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function AlertDialog({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_alert_dialog.AlertDialog.Root, { "data-slot": "alert-dialog", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_alert_dialog.AlertDialog.Root, { "data-slot": "alert-dialog", ...props });
 }
 function AlertDialogTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_alert_dialog.AlertDialog.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_alert_dialog.AlertDialog.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
 }
 function AlertDialogPortal({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_alert_dialog.AlertDialog.Portal, { "data-slot": "alert-dialog-portal", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_alert_dialog.AlertDialog.Portal, { "data-slot": "alert-dialog-portal", ...props });
 }
 function AlertDialogOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_alert_dialog.AlertDialog.Backdrop,
     {
       "data-slot": "alert-dialog-overlay",
       className: cn(
-        "fixed inset-0 z-50 bg-black/50 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 z-50 bg-(--overlay-background) data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className
       ),
       ...props
@@ -500,14 +740,14 @@ function AlertDialogContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(AlertDialogPortal, { "data-slot": "alert-dialog-portal", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AlertDialogOverlay, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(AlertDialogPortal, { "data-slot": "alert-dialog-portal", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AlertDialogOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       import_alert_dialog.AlertDialog.Popup,
       {
         "data-slot": "alert-dialog-content",
         className: cn(
-          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-border bg-background p-6 shadow-lg duration-200 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 sm:max-w-lg",
+          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-border bg-popover p-6 shadow-lg shadow-(color:--shadow-color) duration-200 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 sm:max-w-lg",
           className
         ),
         ...props
@@ -519,7 +759,7 @@ function AlertDialogHeader({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
       "data-slot": "alert-dialog-header",
@@ -532,7 +772,7 @@ function AlertDialogFooter({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
       "data-slot": "alert-dialog-footer",
@@ -548,7 +788,7 @@ function AlertDialogTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_alert_dialog.AlertDialog.Title,
     {
       "data-slot": "alert-dialog-title",
@@ -561,7 +801,7 @@ function AlertDialogDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_alert_dialog.AlertDialog.Description,
     {
       "data-slot": "alert-dialog-description",
@@ -575,7 +815,7 @@ function AlertDialogAction({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_alert_dialog.AlertDialog.Close,
     {
       "data-slot": "alert-dialog-action",
@@ -589,7 +829,7 @@ function AlertDialogCancel({
   variant = "outline",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_alert_dialog.AlertDialog.Close,
     {
       "data-slot": "alert-dialog-cancel",
@@ -600,14 +840,14 @@ function AlertDialogCancel({
 }
 
 // src/ui/aspect-ratio.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function AspectRatio({
   ratio = 1,
   className,
   style,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
       "data-slot": "aspect-ratio",
@@ -620,9 +860,9 @@ function AspectRatio({
 
 // src/ui/avatar.tsx
 var import_avatar = require("@base-ui/react/avatar");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function Avatar({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     import_avatar.Avatar.Root,
     {
       "data-slot": "avatar",
@@ -635,7 +875,7 @@ function Avatar({ className, ...props }) {
   );
 }
 function AvatarImage({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     import_avatar.Avatar.Image,
     {
       "data-slot": "avatar-image",
@@ -645,7 +885,7 @@ function AvatarImage({ className, ...props }) {
   );
 }
 function AvatarFallback({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     import_avatar.Avatar.Fallback,
     {
       "data-slot": "avatar-fallback",
@@ -659,9 +899,9 @@ function AvatarFallback({ className, ...props }) {
 }
 
 // src/ui/badge.tsx
-var import_class_variance_authority3 = require("class-variance-authority");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var badgeVariants = (0, import_class_variance_authority3.cva)(
+var import_class_variance_authority4 = require("class-variance-authority");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var badgeVariants = (0, import_class_variance_authority4.cva)(
   "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-md border px-2 py-0.5 text-xs font-medium whitespace-nowrap [&>svg]:pointer-events-none [&>svg]:size-3",
   {
     variants: {
@@ -682,7 +922,7 @@ function Badge({
   variant,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "span",
     {
       "data-slot": "badge",
@@ -694,12 +934,12 @@ function Badge({
 
 // src/ui/breadcrumb.tsx
 var import_lucide_react2 = require("lucide-react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function Breadcrumb({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...props });
 }
 function BreadcrumbList({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "ol",
     {
       "data-slot": "breadcrumb-list",
@@ -712,7 +952,7 @@ function BreadcrumbList({ className, ...props }) {
   );
 }
 function BreadcrumbItem({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "li",
     {
       "data-slot": "breadcrumb-item",
@@ -722,7 +962,7 @@ function BreadcrumbItem({ className, ...props }) {
   );
 }
 function BreadcrumbLink({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "a",
     {
       "data-slot": "breadcrumb-link",
@@ -732,7 +972,7 @@ function BreadcrumbLink({ className, ...props }) {
   );
 }
 function BreadcrumbPage({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "span",
     {
       "data-slot": "breadcrumb-page",
@@ -749,7 +989,7 @@ function BreadcrumbSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "li",
     {
       "data-slot": "breadcrumb-separator",
@@ -757,12 +997,12 @@ function BreadcrumbSeparator({
       "aria-hidden": "true",
       className: cn("[&>svg]:size-3.5", className),
       ...props,
-      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.ChevronRightIcon, {})
+      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react2.ChevronRightIcon, {})
     }
   );
 }
 function BreadcrumbEllipsis({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "span",
     {
       "data-slot": "breadcrumb-ellipsis",
@@ -771,17 +1011,17 @@ function BreadcrumbEllipsis({ className, ...props }) {
       className: cn("flex size-9 items-center justify-center", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.MoreHorizontalIcon, { className: "size-4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "sr-only", children: "More" })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react2.MoreHorizontalIcon, { className: "size-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "sr-only", children: "More" })
       ]
     }
   );
 }
 
 // src/ui/button-group.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function ButtonGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "div",
     {
       role: "group",
@@ -795,63 +1035,177 @@ function ButtonGroup({ className, ...props }) {
   );
 }
 
-// src/ui/calendar.tsx
-var import_lucide_react3 = require("lucide-react");
-var import_react_day_picker = require("react-day-picker");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-function Calendar({
+// src/ui/bubble.tsx
+var React3 = __toESM(require("react"), 1);
+var import_class_variance_authority5 = require("class-variance-authority");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function BubbleGroup({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "div",
+    {
+      "data-slot": "bubble-group",
+      className: cn("flex min-w-0 flex-col gap-2", className),
+      ...props
+    }
+  );
+}
+var bubbleVariants = (0, import_class_variance_authority5.cva)(
+  "group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full",
+  {
+    variants: {
+      variant: {
+        default: "*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80",
+        secondary: "*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]",
+        muted: "*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]",
+        tinted: "*:data-[slot=bubble-content]:bg-(--bubble-background) *:data-[slot=bubble-content]:text-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-(--bubble-hover-background)",
+        outline: "*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-card [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30",
+        ghost: "border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50",
+        destructive: "*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Bubble({
+  variant = "default",
+  align = "start",
   className,
-  classNames,
-  showOutsideDays = true,
   ...props
 }) {
-  const defaultClassNames = (0, import_react_day_picker.getDefaultClassNames)();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_react_day_picker.DayPicker,
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "div",
     {
-      showOutsideDays,
-      className: cn("bg-background p-3", className),
-      classNames: {
-        root: cn("w-fit", defaultClassNames.root),
-        months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
-        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
-        nav: cn(
-          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
-          defaultClassNames.nav
-        ),
-        button_previous: cn(
-          buttonVariants({ variant: "outline" }),
-          "size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
-          defaultClassNames.button_previous
-        ),
-        button_next: cn(
-          buttonVariants({ variant: "outline" }),
-          "size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
-          defaultClassNames.button_next
-        ),
-        month_caption: cn(
-          "flex h-7 w-full items-center justify-center px-7",
-          defaultClassNames.month_caption
-        ),
-        caption_label: cn("text-sm font-medium", defaultClassNames.caption_label),
-        month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
-        weekdays: cn("flex", defaultClassNames.weekdays),
-        weekday: cn(
-          "w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground",
-          defaultClassNames.weekday
-        ),
-        week: cn("mt-2 flex w-full", defaultClassNames.week),
-        day: cn("h-8 w-8 p-0 text-center text-sm", defaultClassNames.day),
-        day_button: cn(
-          "size-8 cursor-pointer rounded-md p-0 font-normal hover:bg-accent hover:text-accent-foreground aria-selected:opacity-100",
+      "data-slot": "bubble",
+      "data-variant": variant,
+      "data-align": align,
+      className: cn(bubbleVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function BubbleContent({
+  asChild = false,
+  className,
+  children,
+  ...props
+}) {
+  const cls = cn(
+    "w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring/50",
+    className
+  );
+  if (asChild && React3.isValidElement(children)) {
+    return React3.cloneElement(children, {
+      "data-slot": "bubble-content",
+      className: cn(cls, children.props.className),
+      ...props
+    });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "div",
+    {
+      "data-slot": "bubble-content",
+      className: cls,
+      ...props,
+      children
+    }
+  );
+}
+var bubbleReactionsVariants = (0, import_class_variance_authority5.cva)(
+  "absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0",
+  {
+    variants: {
+      side: {
+        top: "top-0 -translate-y-3/4",
+        bottom: "bottom-0 translate-y-3/4"
+      },
+      align: {
+        start: "left-3",
+        end: "right-3"
+      }
+    },
+    defaultVariants: {
+      side: "bottom",
+      align: "end"
+    }
+  }
+);
+function BubbleReactions({
+  side = "bottom",
+  align = "end",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "div",
+    {
+      "data-slot": "bubble-reactions",
+      "data-align": align,
+      "data-side": side,
+      className: cn(bubbleReactionsVariants({ side, align }), className),
+      ...props
+    }
+  );
+}
+
+// src/ui/calendar.tsx
+var import_lucide_react3 = require("lucide-react");
+var import_react_day_picker = require("react-day-picker");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}) {
+  const defaultClassNames = (0, import_react_day_picker.getDefaultClassNames)();
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    import_react_day_picker.DayPicker,
+    {
+      showOutsideDays,
+      className: cn("bg-card p-3", className),
+      classNames: {
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: "outline" }),
+          "size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: "outline" }),
+          "size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex h-7 w-full items-center justify-center px-7",
+          defaultClassNames.month_caption
+        ),
+        caption_label: cn("text-sm font-medium", defaultClassNames.caption_label),
+        month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground",
+          defaultClassNames.weekday
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        day: cn("h-8 w-8 p-0 text-center text-sm", defaultClassNames.day),
+        day_button: cn(
+          "size-8 cursor-pointer rounded-md p-0 font-normal hover:bg-(--calendar-day-hover-background) hover:text-(--calendar-day-hover-foreground) aria-selected:opacity-100",
           defaultClassNames.day_button
         ),
         selected: cn(
-          "[&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary",
+          "[&>button]:bg-(--calendar-selected-background) [&>button]:text-(--calendar-selected-foreground) [&>button]:hover:bg-(--calendar-selected-background) [&>button]:hover:text-(--calendar-selected-foreground)",
           defaultClassNames.selected
         ),
         today: cn(
-          "[&>button]:bg-accent [&>button]:text-accent-foreground",
+          "[&>button]:bg-(--calendar-today-background) [&>button]:text-(--calendar-today-foreground) [&>button]:hover:bg-(--calendar-today-background) [&>button]:hover:text-(--calendar-today-foreground) [&>button]:border [&>button]:border-(--calendar-today-border)",
           defaultClassNames.today
         ),
         outside: cn(
@@ -863,7 +1217,7 @@ function Calendar({
         ...classNames
       },
       components: {
-        Chevron: ({ orientation }) => orientation === "left" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.ChevronLeftIcon, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.ChevronRightIcon, { className: "size-4" })
+        Chevron: ({ orientation }) => orientation === "left" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react3.ChevronLeftIcon, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react3.ChevronRightIcon, { className: "size-4" })
       },
       ...props
     }
@@ -872,13 +1226,13 @@ function Calendar({
 
 // src/ui/chart.tsx
 var import_recharts = require("recharts");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var CHART_TOKEN_COLORS = [
-  "hsl(var(--chart-1))",
-  "hsl(var(--chart-2))",
-  "hsl(var(--chart-3))",
-  "hsl(var(--chart-4))",
-  "hsl(var(--chart-5))"
+  "var(--chart-1)",
+  "var(--chart-2)",
+  "var(--chart-3)",
+  "var(--chart-4)",
+  "var(--chart-5)"
 ];
 function chartColor(index, colors) {
   if (colors && colors.length > 0) {
@@ -891,13 +1245,13 @@ function ChartContainer({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "div",
     {
       "data-slot": "chart-container",
       className: cn("h-64 w-full", className),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", children })
     }
   );
 }
@@ -905,11 +1259,11 @@ function ChartContainer({
 // src/ui/carousel.tsx
 var import_embla_carousel_react = __toESM(require("embla-carousel-react"), 1);
 var import_lucide_react4 = require("lucide-react");
-var React2 = __toESM(require("react"), 1);
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var CarouselContext = React2.createContext(null);
+var React4 = __toESM(require("react"), 1);
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var CarouselContext = React4.createContext(null);
 function useCarousel() {
-  const context = React2.useContext(CarouselContext);
+  const context = React4.useContext(CarouselContext);
   if (!context) {
     throw new Error("useCarousel must be used within a <Carousel />");
   }
@@ -928,16 +1282,16 @@ function Carousel({
     { ...opts, axis: orientation === "horizontal" ? "x" : "y" },
     plugins
   );
-  const [canScrollPrev, setCanScrollPrev] = React2.useState(false);
-  const [canScrollNext, setCanScrollNext] = React2.useState(false);
-  const onSelect = React2.useCallback((carouselApi) => {
+  const [canScrollPrev, setCanScrollPrev] = React4.useState(false);
+  const [canScrollNext, setCanScrollNext] = React4.useState(false);
+  const onSelect = React4.useCallback((carouselApi) => {
     if (!carouselApi) return;
     setCanScrollPrev(carouselApi.canScrollPrev());
     setCanScrollNext(carouselApi.canScrollNext());
   }, []);
-  const scrollPrev = React2.useCallback(() => api?.scrollPrev(), [api]);
-  const scrollNext = React2.useCallback(() => api?.scrollNext(), [api]);
-  const handleKeyDown = React2.useCallback(
+  const scrollPrev = React4.useCallback(() => api?.scrollPrev(), [api]);
+  const scrollNext = React4.useCallback(() => api?.scrollNext(), [api]);
+  const handleKeyDown = React4.useCallback(
     (event) => {
       if (event.key === "ArrowLeft") {
         event.preventDefault();
@@ -949,10 +1303,10 @@ function Carousel({
     },
     [scrollPrev, scrollNext]
   );
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (api && setApi) setApi(api);
   }, [api, setApi]);
-  React2.useEffect(() => {
+  React4.useEffect(() => {
     if (!api) return;
     onSelect(api);
     api.on("reInit", onSelect);
@@ -961,7 +1315,7 @@ function Carousel({
       api.off("select", onSelect);
     };
   }, [api, onSelect]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     CarouselContext.Provider,
     {
       value: {
@@ -974,7 +1328,7 @@ function Carousel({
         canScrollPrev,
         canScrollNext
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         "div",
         {
           onKeyDownCapture: handleKeyDown,
@@ -991,7 +1345,7 @@ function Carousel({
 }
 function CarouselContent({ className, ...props }) {
   const { carouselRef, orientation } = useCarousel();
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref: carouselRef, className: "overflow-hidden", "data-slot": "carousel-viewport", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref: carouselRef, className: "overflow-hidden", "data-slot": "carousel-viewport", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "div",
     {
       className: cn(
@@ -1005,7 +1359,7 @@ function CarouselContent({ className, ...props }) {
 }
 function CarouselItem({ className, ...props }) {
   const { orientation } = useCarousel();
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "div",
     {
       role: "group",
@@ -1027,7 +1381,7 @@ function CarouselPrevious({
   ...props
 }) {
   const { orientation, scrollPrev, canScrollPrev } = useCarousel();
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     Button,
     {
       "data-slot": "carousel-previous",
@@ -1042,8 +1396,8 @@ function CarouselPrevious({
       onClick: scrollPrev,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.ChevronLeftIcon, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "sr-only", children: "Previous slide" })
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react4.ChevronLeftIcon, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sr-only", children: "Previous slide" })
       ]
     }
   );
@@ -1055,7 +1409,7 @@ function CarouselNext({
   ...props
 }) {
   const { orientation, scrollNext, canScrollNext } = useCarousel();
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     Button,
     {
       "data-slot": "carousel-next",
@@ -1070,8 +1424,8 @@ function CarouselNext({
       onClick: scrollNext,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.ChevronRightIcon, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "sr-only", children: "Next slide" })
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react4.ChevronRightIcon, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sr-only", children: "Next slide" })
       ]
     }
   );
@@ -1080,9 +1434,9 @@ function CarouselNext({
 // src/ui/checkbox.tsx
 var import_checkbox = require("@base-ui/react/checkbox");
 var import_lucide_react5 = require("lucide-react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function Checkbox({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     import_checkbox.Checkbox.Root,
     {
       "data-slot": "checkbox",
@@ -1091,12 +1445,12 @@ function Checkbox({ className, ...props }) {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         import_checkbox.Checkbox.Indicator,
         {
           "data-slot": "checkbox-indicator",
           className: "flex items-center justify-center text-current",
-          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react5.CheckIcon, { className: "size-3.5" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react5.CheckIcon, { className: "size-3.5" })
         }
       )
     }
@@ -1106,18 +1460,18 @@ function Checkbox({ className, ...props }) {
 // src/ui/collapsible.tsx
 var import_collapsible = require("@base-ui/react/collapsible");
 var import_lucide_react6 = require("lucide-react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function Collapsible({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_collapsible.Collapsible.Root, { "data-slot": "collapsible", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_collapsible.Collapsible.Root, { "data-slot": "collapsible", ...props });
 }
 function CollapsibleTrigger({
   className,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     import_collapsible.Collapsible.Trigger,
     {
       "data-slot": "collapsible-trigger",
@@ -1128,7 +1482,7 @@ function CollapsibleTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react6.ChevronDownIcon, { className: "pointer-events-none size-4 shrink-0 text-muted-foreground transition-transform duration-200" })
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react6.ChevronDownIcon, { className: "pointer-events-none size-4 shrink-0 text-muted-foreground transition-transform duration-200" })
       ]
     }
   );
@@ -1137,7 +1491,7 @@ function CollapsibleContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     import_collapsible.Collapsible.Panel,
     {
       "data-slot": "collapsible-content",
@@ -1155,16 +1509,16 @@ var import_lucide_react7 = require("lucide-react");
 
 // src/ui/popover.tsx
 var import_popover = require("@base-ui/react/popover");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function Popover({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_popover.Popover.Root, { "data-slot": "popover", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_popover.Popover.Root, { "data-slot": "popover", ...props });
 }
 function PopoverTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_popover.Popover.Trigger, { "data-slot": "popover-trigger", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_popover.Popover.Trigger, { "data-slot": "popover-trigger", ...props });
 }
 function PopoverContent({
   className,
@@ -1174,7 +1528,7 @@ function PopoverContent({
   anchor,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_popover.Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_popover.Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     import_popover.Popover.Positioner,
     {
       align,
@@ -1182,12 +1536,12 @@ function PopoverContent({
       sideOffset,
       anchor,
       className: "isolate z-50",
-      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         import_popover.Popover.Popup,
         {
           "data-slot": "popover-content",
           className: cn(
-            "z-50 w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none duration-200 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            "z-50 w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md shadow-(color:--shadow-color) outline-none duration-200 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           ),
           ...props
@@ -1198,20 +1552,20 @@ function PopoverContent({
 }
 
 // src/ui/combobox.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function Combobox({
   open,
   onOpenChange,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Popover, { open, onOpenChange: (next) => onOpenChange?.(next), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Popover, { open, onOpenChange: (next) => onOpenChange?.(next), children });
 }
 function ComboboxTrigger({
   className,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     PopoverTrigger,
     {
       "data-slot": "combobox-trigger",
@@ -1221,8 +1575,8 @@ function ComboboxTrigger({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "min-w-0 flex-1 truncate text-left", children }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react7.ChevronsUpDownIcon, { className: "size-4 shrink-0 opacity-50" })
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "min-w-0 flex-1 truncate text-left", children }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react7.ChevronsUpDownIcon, { className: "size-4 shrink-0 opacity-50" })
       ]
     }
   );
@@ -1232,7 +1586,7 @@ function ComboboxContent({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     PopoverContent,
     {
       "data-slot": "combobox-content",
@@ -1246,12 +1600,12 @@ function ComboboxContent({
 // src/ui/command.tsx
 var import_cmdk = require("cmdk");
 var import_lucide_react8 = require("lucide-react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function Command({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     import_cmdk.Command,
     {
       "data-slot": "command",
@@ -1267,14 +1621,14 @@ function CommandInput({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "div",
     {
       "data-slot": "command-input-wrapper",
       className: "flex items-center gap-2 border-b border-border px-3",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react8.SearchIcon, { className: "size-4 shrink-0 opacity-50" }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react8.SearchIcon, { className: "size-4 shrink-0 opacity-50" }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           import_cmdk.Command.Input,
           {
             "data-slot": "command-input",
@@ -1293,7 +1647,7 @@ function CommandList({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     import_cmdk.Command.List,
     {
       "data-slot": "command-list",
@@ -1308,7 +1662,7 @@ function CommandList({
 function CommandEmpty({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     import_cmdk.Command.Empty,
     {
       "data-slot": "command-empty",
@@ -1321,7 +1675,7 @@ function CommandGroup({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     import_cmdk.Command.Group,
     {
       "data-slot": "command-group",
@@ -1337,12 +1691,12 @@ function CommandItem({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     import_cmdk.Command.Item,
     {
       "data-slot": "command-item",
       className: cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-(--menu-active-background) data-[selected=true]:text-(--menu-active-foreground) [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props
@@ -1352,27 +1706,27 @@ function CommandItem({
 
 // src/ui/context-menu.tsx
 var import_context_menu = require("@base-ui/react/context-menu");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function ContextMenu({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_context_menu.ContextMenu.Root, { "data-slot": "context-menu", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_context_menu.ContextMenu.Root, { "data-slot": "context-menu", ...props });
 }
 function ContextMenuTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_context_menu.ContextMenu.Trigger, { "data-slot": "context-menu-trigger", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_context_menu.ContextMenu.Trigger, { "data-slot": "context-menu-trigger", ...props });
 }
 function ContextMenuContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_context_menu.ContextMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_context_menu.ContextMenu.Positioner, { className: "isolate z-50", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_context_menu.ContextMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_context_menu.ContextMenu.Positioner, { className: "isolate z-50", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     import_context_menu.ContextMenu.Popup,
     {
       "data-slot": "context-menu-content",
       className: cn(
-        "z-50 max-h-(--available-height) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md duration-200 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        "z-50 max-h-(--available-height) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md shadow-(color:--shadow-color) duration-200 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
         className
       ),
       ...props
@@ -1384,13 +1738,13 @@ function ContextMenuItem({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     import_context_menu.ContextMenu.Item,
     {
       "data-slot": "context-menu-item",
       "data-variant": variant,
       className: cn(
-        "relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-(--menu-hover-background) focus:text-(--menu-hover-foreground) data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props
@@ -1401,7 +1755,7 @@ function ContextMenuSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     import_context_menu.ContextMenu.Separator,
     {
       "data-slot": "context-menu-separator",
@@ -1413,36 +1767,36 @@ function ContextMenuSeparator({
 
 // src/ui/drawer.tsx
 var import_vaul = require("vaul");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function Drawer({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_vaul.Drawer.Root, { "data-slot": "drawer", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_vaul.Drawer.Root, { "data-slot": "drawer", ...props });
 }
 function DrawerTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_vaul.Drawer.Trigger, { "data-slot": "drawer-trigger", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_vaul.Drawer.Trigger, { "data-slot": "drawer-trigger", ...props });
 }
 function DrawerPortal({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_vaul.Drawer.Portal, { "data-slot": "drawer-portal", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_vaul.Drawer.Portal, { "data-slot": "drawer-portal", ...props });
 }
 function DrawerClose({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_vaul.Drawer.Close, { "data-slot": "drawer-close", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_vaul.Drawer.Close, { "data-slot": "drawer-close", ...props });
 }
 function DrawerOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     import_vaul.Drawer.Overlay,
     {
       "data-slot": "drawer-overlay",
-      className: cn("fixed inset-0 z-50 bg-black/50", className),
+      className: cn("fixed inset-0 z-50 bg-(--overlay-background)", className),
       ...props
     }
   );
@@ -1452,14 +1806,14 @@ function DrawerContent({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(DrawerPortal, { "data-slot": "drawer-portal", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DrawerOverlay, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DrawerPortal, { "data-slot": "drawer-portal", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DrawerOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
       import_vaul.Drawer.Content,
       {
         "data-slot": "drawer-content",
         className: cn(
-          "group/drawer-content fixed z-50 flex h-auto flex-col border-border bg-background",
+          "group/drawer-content fixed z-50 flex h-auto flex-col border-border bg-popover",
           "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
           "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
           "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
@@ -1468,7 +1822,7 @@ function DrawerContent({
         ),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }),
           children
         ]
       }
@@ -1476,7 +1830,7 @@ function DrawerContent({
   ] });
 }
 function DrawerHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "div",
     {
       "data-slot": "drawer-header",
@@ -1486,7 +1840,7 @@ function DrawerHeader({ className, ...props }) {
   );
 }
 function DrawerFooter({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "div",
     {
       "data-slot": "drawer-footer",
@@ -1499,7 +1853,7 @@ function DrawerTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     import_vaul.Drawer.Title,
     {
       "data-slot": "drawer-title",
@@ -1512,7 +1866,7 @@ function DrawerDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     import_vaul.Drawer.Description,
     {
       "data-slot": "drawer-description",
@@ -1525,16 +1879,16 @@ function DrawerDescription({
 // src/ui/dropdown-menu.tsx
 var import_menu = require("@base-ui/react/menu");
 var import_lucide_react9 = require("lucide-react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function DropdownMenu({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_menu.Menu.Root, { "data-slot": "dropdown-menu", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_menu.Menu.Root, { "data-slot": "dropdown-menu", ...props });
 }
 function DropdownMenuTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_menu.Menu.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_menu.Menu.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
 }
 function DropdownMenuContent({
   className,
@@ -1543,19 +1897,19 @@ function DropdownMenuContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_menu.Menu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_menu.Menu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     import_menu.Menu.Positioner,
     {
       align,
       side,
       sideOffset,
       className: "isolate z-50",
-      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         import_menu.Menu.Popup,
         {
           "data-slot": "dropdown-menu-content",
           className: cn(
-            "z-50 max-h-(--available-height) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md duration-200 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            "z-50 max-h-(--available-height) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md shadow-(color:--shadow-color) duration-200 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           ),
           ...props
@@ -1569,13 +1923,13 @@ function DropdownMenuItem({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     import_menu.Menu.Item,
     {
       "data-slot": "dropdown-menu-item",
       "data-variant": variant,
       className: cn(
-        "relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-(--menu-hover-background) focus:text-(--menu-hover-foreground) data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props
@@ -1586,7 +1940,7 @@ function DropdownMenuSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     import_menu.Menu.Separator,
     {
       "data-slot": "dropdown-menu-separator",
@@ -1598,25 +1952,25 @@ function DropdownMenuSeparator({
 function DropdownMenuSub({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_menu.Menu.SubmenuRoot, { "data-slot": "dropdown-menu-sub", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_menu.Menu.SubmenuRoot, { "data-slot": "dropdown-menu-sub", ...props });
 }
 function DropdownMenuSubTrigger({
   className,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     import_menu.Menu.SubmenuTrigger,
     {
       "data-slot": "dropdown-menu-sub-trigger",
       className: cn(
-        "flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-(--menu-hover-background) focus:text-(--menu-hover-foreground) data-open:bg-(--menu-active-background) data-open:text-(--menu-active-foreground) [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react9.ChevronRightIcon, { className: "ml-auto" })
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.ChevronRightIcon, { className: "ml-auto" })
       ]
     }
   );
@@ -1626,12 +1980,12 @@ function DropdownMenuSubContent({
   sideOffset = 2,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_menu.Menu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_menu.Menu.Positioner, { sideOffset, className: "isolate z-50", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_menu.Menu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_menu.Menu.Positioner, { sideOffset, className: "isolate z-50", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     import_menu.Menu.Popup,
     {
       "data-slot": "dropdown-menu-sub-content",
       className: cn(
-        "z-50 min-w-32 origin-(--transform-origin) overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md duration-200 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        "z-50 min-w-32 origin-(--transform-origin) overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md shadow-(color:--shadow-color) duration-200 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
         className
       ),
       ...props
@@ -1641,16 +1995,16 @@ function DropdownMenuSubContent({
 
 // src/ui/hover-card.tsx
 var import_preview_card = require("@base-ui/react/preview-card");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function HoverCard({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_preview_card.PreviewCard.Root, { "data-slot": "hover-card", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_preview_card.PreviewCard.Root, { "data-slot": "hover-card", ...props });
 }
 function HoverCardTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_preview_card.PreviewCard.Trigger, { "data-slot": "hover-card-trigger", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_preview_card.PreviewCard.Trigger, { "data-slot": "hover-card-trigger", ...props });
 }
 function HoverCardContent({
   className,
@@ -1659,19 +2013,19 @@ function HoverCardContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_preview_card.PreviewCard.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_preview_card.PreviewCard.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     import_preview_card.PreviewCard.Positioner,
     {
       align,
       side,
       sideOffset,
       className: "isolate z-50",
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         import_preview_card.PreviewCard.Popup,
         {
           "data-slot": "hover-card-content",
           className: cn(
-            "z-50 w-64 origin-(--transform-origin) rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-hidden duration-200 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            "z-50 w-64 origin-(--transform-origin) rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md shadow-(color:--shadow-color) outline-hidden duration-200 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           ),
           ...props
@@ -1684,17 +2038,17 @@ function HoverCardContent({
 // src/ui/menubar.tsx
 var import_menu2 = require("@base-ui/react/menu");
 var import_menubar = require("@base-ui/react/menubar");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function Menubar({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     import_menubar.Menubar,
     {
       "data-slot": "menubar",
       className: cn(
-        "flex h-9 items-center gap-1 rounded-md border border-border bg-background p-1 shadow-xs",
+        "flex h-9 items-center gap-1 rounded-md border border-border bg-card p-1 shadow-xs",
         className
       ),
       ...props
@@ -1704,18 +2058,18 @@ function Menubar({
 function MenubarMenu({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_menu2.Menu.Root, { "data-slot": "menubar-menu", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_menu2.Menu.Root, { "data-slot": "menubar-menu", ...props });
 }
 function MenubarTrigger({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     import_menu2.Menu.Trigger,
     {
       "data-slot": "menubar-trigger",
       className: cn(
-        "flex cursor-pointer items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground",
+        "flex cursor-pointer items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none hover:bg-(--menu-hover-background) hover:text-(--menu-hover-foreground) focus:bg-(--menu-hover-background) focus:text-(--menu-hover-foreground) data-open:bg-(--menu-active-background) data-open:text-(--menu-active-foreground)",
         className
       ),
       ...props
@@ -1729,19 +2083,19 @@ function MenubarContent({
   sideOffset = 8,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_menu2.Menu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_menu2.Menu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     import_menu2.Menu.Positioner,
     {
       align,
       side,
       sideOffset,
       className: "isolate z-50",
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         import_menu2.Menu.Popup,
         {
           "data-slot": "menubar-content",
           className: cn(
-            "z-50 min-w-36 origin-(--transform-origin) overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md duration-200 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            "z-50 min-w-36 origin-(--transform-origin) overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md shadow-(color:--shadow-color) duration-200 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           ),
           ...props
@@ -1755,13 +2109,13 @@ function MenubarItem({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     import_menu2.Menu.Item,
     {
       "data-slot": "menubar-item",
       "data-variant": variant,
       className: cn(
-        "relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-(--menu-hover-background) focus:text-(--menu-hover-foreground) data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props
@@ -1772,7 +2126,7 @@ function MenubarSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     import_menu2.Menu.Separator,
     {
       "data-slot": "menubar-separator",
@@ -1785,14 +2139,14 @@ function MenubarSeparator({
 // src/ui/navigation-menu.tsx
 var import_navigation_menu = require("@base-ui/react/navigation-menu");
 var import_lucide_react10 = require("lucide-react");
-var import_class_variance_authority4 = require("class-variance-authority");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_class_variance_authority6 = require("class-variance-authority");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function NavigationMenu({
   className,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     import_navigation_menu.NavigationMenu.Root,
     {
       "data-slot": "navigation-menu",
@@ -1800,7 +2154,7 @@ function NavigationMenu({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(NavigationMenuViewport, {})
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(NavigationMenuViewport, {})
       ]
     }
   );
@@ -1809,7 +2163,7 @@ function NavigationMenuList({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     import_navigation_menu.NavigationMenu.List,
     {
       "data-slot": "navigation-menu-list",
@@ -1822,7 +2176,7 @@ function NavigationMenuItem({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     import_navigation_menu.NavigationMenu.Item,
     {
       "data-slot": "navigation-menu-item",
@@ -1831,15 +2185,15 @@ function NavigationMenuItem({
     }
   );
 }
-var navigationMenuTriggerStyle = (0, import_class_variance_authority4.cva)(
-  "group/navigation-menu-trigger 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-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-open:bg-accent/50 data-open:text-accent-foreground"
+var navigationMenuTriggerStyle = (0, import_class_variance_authority6.cva)(
+  "group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-md bg-transparent px-4 py-2 text-sm font-medium transition-colors hover:bg-(--menu-hover-background) hover:text-(--menu-hover-foreground) focus:bg-(--menu-hover-background) focus:text-(--menu-hover-foreground) focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-open:bg-(--menu-active-background)/50 data-open:text-(--menu-active-foreground)"
 );
 function NavigationMenuTrigger({
   className,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     import_navigation_menu.NavigationMenu.Trigger,
     {
       "data-slot": "navigation-menu-trigger",
@@ -1847,7 +2201,7 @@ function NavigationMenuTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           import_lucide_react10.ChevronDownIcon,
           {
             className: "relative top-px ml-1 size-3 transition-transform duration-200 group-data-open/navigation-menu-trigger:rotate-180",
@@ -1862,7 +2216,7 @@ function NavigationMenuContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     import_navigation_menu.NavigationMenu.Content,
     {
       "data-slot": "navigation-menu-content",
@@ -1875,21 +2229,21 @@ function NavigationMenuContent({
   );
 }
 function NavigationMenuViewport({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_navigation_menu.NavigationMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_navigation_menu.NavigationMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     import_navigation_menu.NavigationMenu.Positioner,
     {
       side: "bottom",
       align: "start",
       className: "isolate z-50",
-      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         import_navigation_menu.NavigationMenu.Popup,
         {
           "data-slot": "navigation-menu-popup",
           className: cn(
-            "origin-(--transform-origin) overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md duration-200 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            "origin-(--transform-origin) overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md shadow-(color:--shadow-color) duration-200 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_navigation_menu.NavigationMenu.Viewport, { "data-slot": "navigation-menu-viewport" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_navigation_menu.NavigationMenu.Viewport, { "data-slot": "navigation-menu-viewport" })
         }
       )
     }
@@ -1899,12 +2253,12 @@ function NavigationMenuLink({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     import_navigation_menu.NavigationMenu.Link,
     {
       "data-slot": "navigation-menu-link",
       className: cn(
-        "flex flex-col gap-1 rounded-md p-2 text-sm transition-colors outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 data-active:bg-accent/50 data-active:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
+        "flex flex-col gap-1 rounded-md p-2 text-sm transition-colors outline-none hover:bg-(--menu-hover-background) hover:text-(--menu-hover-foreground) focus:bg-(--menu-hover-background) focus:text-(--menu-hover-foreground) focus-visible:ring-[3px] focus-visible:ring-ring/50 data-active:bg-(--menu-active-background)/50 data-active:text-(--menu-active-foreground) [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props
@@ -1914,9 +2268,9 @@ function NavigationMenuLink({
 
 // src/ui/pagination.tsx
 var import_lucide_react11 = require("lucide-react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function Pagination({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "nav",
     {
       role: "navigation",
@@ -1928,7 +2282,7 @@ function Pagination({ className, ...props }) {
   );
 }
 function PaginationContent({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "ul",
     {
       "data-slot": "pagination-content",
@@ -1938,7 +2292,7 @@ function PaginationContent({ className, ...props }) {
   );
 }
 function PaginationItem({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", { "data-slot": "pagination-item", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("li", { "data-slot": "pagination-item", ...props });
 }
 function PaginationLink({
   className,
@@ -1946,7 +2300,7 @@ function PaginationLink({
   disabled,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "a",
     {
       "aria-current": isActive ? "page" : void 0,
@@ -1958,6 +2312,7 @@ function PaginationLink({
         buttonVariants({
           variant: isActive ? "outline" : "ghost"
         }),
+        isActive && "border-(color:--pagination-active-border) bg-(--pagination-active-background) rounded-(--pagination-active-radius)",
         disabled && "pointer-events-none opacity-50",
         className
       ),
@@ -1969,15 +2324,15 @@ function PaginationPrevious({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     PaginationLink,
     {
       "aria-label": "Go to previous page",
       className: cn("gap-1 px-2.5 sm:pl-2.5", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.ChevronLeftIcon, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "hidden sm:block", children: "Previous" })
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react11.ChevronLeftIcon, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "hidden sm:block", children: "Previous" })
       ]
     }
   );
@@ -1986,21 +2341,21 @@ function PaginationNext({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     PaginationLink,
     {
       "aria-label": "Go to next page",
       className: cn("gap-1 px-2.5 sm:pr-2.5", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "hidden sm:block", children: "Next" }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.ChevronRightIcon, {})
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "hidden sm:block", children: "Next" }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react11.ChevronRightIcon, {})
       ]
     }
   );
 }
 function PaginationEllipsis({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "span",
     {
       "aria-hidden": true,
@@ -2008,8 +2363,8 @@ function PaginationEllipsis({ className, ...props }) {
       className: cn("flex size-9 items-center justify-center", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.MoreHorizontalIcon, { className: "size-4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "sr-only", children: "More pages" })
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react11.MoreHorizontalIcon, { className: "size-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "sr-only", children: "More pages" })
       ]
     }
   );
@@ -2018,46 +2373,46 @@ function PaginationEllipsis({ className, ...props }) {
 // src/ui/sheet.tsx
 var import_dialog = require("@base-ui/react/dialog");
 var import_lucide_react12 = require("lucide-react");
-var import_class_variance_authority5 = require("class-variance-authority");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_class_variance_authority7 = require("class-variance-authority");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function Sheet({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_dialog.Dialog.Root, { "data-slot": "sheet", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_dialog.Dialog.Root, { "data-slot": "sheet", ...props });
 }
 function SheetTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_dialog.Dialog.Trigger, { "data-slot": "sheet-trigger", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_dialog.Dialog.Trigger, { "data-slot": "sheet-trigger", ...props });
 }
 function SheetClose({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_dialog.Dialog.Close, { "data-slot": "sheet-close", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_dialog.Dialog.Close, { "data-slot": "sheet-close", ...props });
 }
 function SheetPortal({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_dialog.Dialog.Portal, { "data-slot": "sheet-portal", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_dialog.Dialog.Portal, { "data-slot": "sheet-portal", ...props });
 }
 function SheetOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     import_dialog.Dialog.Backdrop,
     {
       "data-slot": "sheet-overlay",
       className: cn(
-        "fixed inset-0 z-50 bg-black/50 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 z-50 bg-(--overlay-background) data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className
       ),
       ...props
     }
   );
 }
-var sheetVariants = (0, import_class_variance_authority5.cva)(
-  "fixed z-50 flex flex-col gap-4 border-border bg-background shadow-lg transition ease-in-out data-open:animate-in data-open:duration-300 data-closed:animate-out data-closed:duration-200",
+var sheetVariants = (0, import_class_variance_authority7.cva)(
+  "fixed z-50 flex flex-col gap-4 border-border bg-popover shadow-lg shadow-(color:--shadow-color) transition ease-in-out data-open:animate-in data-open:duration-300 data-closed:animate-out data-closed:duration-200",
   {
     variants: {
       side: {
@@ -2078,9 +2433,9 @@ function SheetContent({
   side = "right",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(SheetPortal, { "data-slot": "sheet-portal", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SheetOverlay, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(SheetPortal, { "data-slot": "sheet-portal", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SheetOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
       import_dialog.Dialog.Popup,
       {
         "data-slot": "sheet-content",
@@ -2088,11 +2443,11 @@ function SheetContent({
         ...props,
         children: [
           children,
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
             import_dialog.Dialog.Close,
             {
               "data-slot": "sheet-close",
-              render: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              render: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 "button",
                 {
                   type: "button",
@@ -2100,8 +2455,8 @@ function SheetContent({
                 }
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.XIcon, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "sr-only", children: "Close" })
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react12.XIcon, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "sr-only", children: "Close" })
               ]
             }
           )
@@ -2111,7 +2466,7 @@ function SheetContent({
   ] });
 }
 function SheetHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "div",
     {
       "data-slot": "sheet-header",
@@ -2121,7 +2476,7 @@ function SheetHeader({ className, ...props }) {
   );
 }
 function SheetFooter({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "div",
     {
       "data-slot": "sheet-footer",
@@ -2134,7 +2489,7 @@ function SheetTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     import_dialog.Dialog.Title,
     {
       "data-slot": "sheet-title",
@@ -2147,7 +2502,7 @@ function SheetDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     import_dialog.Dialog.Description,
     {
       "data-slot": "sheet-description",
@@ -2160,7 +2515,7 @@ function SheetDescription({
 // src/ui/toast.tsx
 var import_toast = require("@base-ui/react/toast");
 var import_lucide_react13 = require("lucide-react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var toastManager = import_toast.Toast.createToastManager();
 function toast(message, options = {}) {
   return toastManager.add({
@@ -2176,7 +2531,7 @@ var toastVariantClass = {
 };
 function ToasterViewport({ className }) {
   const { toasts } = import_toast.Toast.useToastManager();
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_toast.Toast.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_toast.Toast.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     import_toast.Toast.Viewport,
     {
       "data-slot": "toast-viewport",
@@ -2184,26 +2539,26 @@ function ToasterViewport({ className }) {
         "fixed top-4 right-4 z-[100] flex w-80 flex-col gap-2 outline-none",
         className
       ),
-      children: toasts.map((item) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      children: toasts.map((item) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         import_toast.Toast.Root,
         {
           toast: item,
           "data-slot": "toast",
           "data-type": item.type ?? "info",
           className: cn(
-            "rounded-md border border-border bg-popover px-4 py-3 text-sm text-popover-foreground shadow-md transition-[opacity,transform] duration-200 data-ending-style:animate-toast-out data-starting-style:animate-toast-in",
+            "rounded-md border border-border bg-popover px-4 py-3 text-sm text-popover-foreground shadow-md shadow-(color:--shadow-color) transition-[opacity,transform] duration-200 data-ending-style:animate-toast-out data-starting-style:animate-toast-in",
             toastVariantClass[item.type ?? "info"] ?? toastVariantClass.info
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_toast.Toast.Content, { className: "flex items-start justify-between gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "grid gap-0.5", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_toast.Toast.Content, { className: "flex items-start justify-between gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "grid gap-0.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                 import_toast.Toast.Title,
                 {
                   "data-slot": "toast-title",
                   className: "font-medium"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                 import_toast.Toast.Description,
                 {
                   "data-slot": "toast-description",
@@ -2211,13 +2566,13 @@ function ToasterViewport({ className }) {
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
               import_toast.Toast.Close,
               {
                 "data-slot": "toast-close",
                 "aria-label": "Close",
                 className: "cursor-pointer rounded-xs opacity-70 transition-opacity hover:opacity-100 focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none [&_svg]:size-3.5",
-                children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react13.XIcon, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react13.XIcon, {})
               }
             )
           ] })
@@ -2228,17 +2583,17 @@ function ToasterViewport({ className }) {
   ) });
 }
 function Toaster({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_toast.Toast.Provider, { toastManager, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ToasterViewport, { className }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_toast.Toast.Provider, { toastManager, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ToasterViewport, { className }) });
 }
 
 // src/ui/tooltip.tsx
 var import_tooltip = require("@base-ui/react/tooltip");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function TooltipProvider({
   delay = 0,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     import_tooltip.Tooltip.Provider,
     {
       "data-slot": "tooltip-provider",
@@ -2250,12 +2605,12 @@ function TooltipProvider({
 function Tooltip({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_tooltip.Tooltip.Root, { "data-slot": "tooltip", ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tooltip.Tooltip.Root, { "data-slot": "tooltip", ...props }) });
 }
 function TooltipTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_tooltip.Tooltip.Trigger, { "data-slot": "tooltip-trigger", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tooltip.Tooltip.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
 function TooltipContent({
   className,
@@ -2265,14 +2620,14 @@ function TooltipContent({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_tooltip.Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tooltip.Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     import_tooltip.Tooltip.Positioner,
     {
       align,
       side,
       sideOffset,
       className: "isolate z-50",
-      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
         import_tooltip.Tooltip.Popup,
         {
           "data-slot": "tooltip-content",
@@ -2283,7 +2638,7 @@ function TooltipContent({
           ...props,
           children: [
             children,
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_tooltip.Tooltip.Arrow, { className: "z-50 size-2.5 rotate-45 rounded-[2px] bg-primary fill-primary data-[side=top]:-bottom-1 data-[side=bottom]:-top-1 data-[side=left]:-right-1 data-[side=right]:-left-1" })
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_tooltip.Tooltip.Arrow, { className: "z-50 size-2.5 rotate-45 rounded-[2px] bg-primary fill-primary data-[side=top]:-bottom-1 data-[side=bottom]:-top-1 data-[side=left]:-right-1 data-[side=right]:-left-1" })
           ]
         }
       )
@@ -2292,14 +2647,14 @@ function TooltipContent({
 }
 
 // src/ui/card.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function Card({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "div",
     {
       "data-slot": "card",
       className: cn(
-        "flex flex-col gap-6 rounded-xl border border-border bg-card py-6 text-card-foreground shadow-sm",
+        "flex flex-col gap-6 rounded-xl border border-border bg-card py-6 text-card-foreground shadow-(--card-shadow)",
         className
       ),
       ...props
@@ -2307,7 +2662,7 @@ function Card({ className, ...props }) {
   );
 }
 function CardHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "div",
     {
       "data-slot": "card-header",
@@ -2320,7 +2675,7 @@ function CardHeader({ className, ...props }) {
   );
 }
 function CardTitle({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "div",
     {
       "data-slot": "card-title",
@@ -2330,7 +2685,7 @@ function CardTitle({ className, ...props }) {
   );
 }
 function CardDescription({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "div",
     {
       "data-slot": "card-description",
@@ -2340,7 +2695,7 @@ function CardDescription({ className, ...props }) {
   );
 }
 function CardAction({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "div",
     {
       "data-slot": "card-action",
@@ -2353,7 +2708,7 @@ function CardAction({ className, ...props }) {
   );
 }
 function CardContent({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "div",
     {
       "data-slot": "card-content",
@@ -2363,7 +2718,7 @@ function CardContent({ className, ...props }) {
   );
 }
 function CardFooter({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "div",
     {
       "data-slot": "card-footer",
@@ -2376,37 +2731,37 @@ function CardFooter({ className, ...props }) {
 // src/ui/dialog.tsx
 var import_dialog2 = require("@base-ui/react/dialog");
 var import_lucide_react14 = require("lucide-react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function Dialog({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_dialog2.Dialog.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_dialog2.Dialog.Root, { "data-slot": "dialog", ...props });
 }
 function DialogTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_dialog2.Dialog.Trigger, { "data-slot": "dialog-trigger", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_dialog2.Dialog.Trigger, { "data-slot": "dialog-trigger", ...props });
 }
 function DialogPortal({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_dialog2.Dialog.Portal, { "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_dialog2.Dialog.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogClose({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_dialog2.Dialog.Close, { "data-slot": "dialog-close", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_dialog2.Dialog.Close, { "data-slot": "dialog-close", ...props });
 }
 function DialogOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     import_dialog2.Dialog.Backdrop,
     {
       "data-slot": "dialog-overlay",
       className: cn(
-        "fixed inset-0 z-50 bg-black/50 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "fixed inset-0 z-50 bg-(--overlay-background) data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className
       ),
       ...props
@@ -2419,24 +2774,24 @@ function DialogContent({
   showCloseButton = true,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(DialogPortal, { "data-slot": "dialog-portal", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DialogOverlay, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DialogOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
       import_dialog2.Dialog.Popup,
       {
         "data-slot": "dialog-content",
         className: cn(
-          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-border bg-background p-6 shadow-lg duration-200 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 sm:max-w-lg",
+          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-border bg-popover p-6 shadow-lg shadow-(color:--shadow-color) duration-200 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 sm:max-w-lg",
           className
         ),
         ...props,
         children: [
           children,
-          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
             import_dialog2.Dialog.Close,
             {
               "data-slot": "dialog-close",
-              render: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              render: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                 "button",
                 {
                   type: "button",
@@ -2444,8 +2799,8 @@ function DialogContent({
                 }
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react14.XIcon, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "sr-only", children: "Close" })
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react14.XIcon, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "sr-only", children: "Close" })
               ]
             }
           )
@@ -2455,7 +2810,7 @@ function DialogContent({
   ] });
 }
 function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "div",
     {
       "data-slot": "dialog-header",
@@ -2465,7 +2820,7 @@ function DialogHeader({ className, ...props }) {
   );
 }
 function DialogFooter({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "div",
     {
       "data-slot": "dialog-footer",
@@ -2481,7 +2836,7 @@ function DialogTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     import_dialog2.Dialog.Title,
     {
       "data-slot": "dialog-title",
@@ -2494,7 +2849,7 @@ function DialogDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     import_dialog2.Dialog.Description,
     {
       "data-slot": "dialog-description",
@@ -2505,9 +2860,9 @@ function DialogDescription({
 }
 
 // src/ui/empty.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function Empty({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "div",
     {
       "data-slot": "empty",
@@ -2520,7 +2875,7 @@ function Empty({ className, ...props }) {
   );
 }
 function EmptyHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "div",
     {
       "data-slot": "empty-header",
@@ -2530,7 +2885,7 @@ function EmptyHeader({ className, ...props }) {
   );
 }
 function EmptyTitle({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "div",
     {
       "data-slot": "empty-title",
@@ -2540,7 +2895,7 @@ function EmptyTitle({ className, ...props }) {
   );
 }
 function EmptyDescription({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "p",
     {
       "data-slot": "empty-description",
@@ -2550,7 +2905,7 @@ function EmptyDescription({ className, ...props }) {
   );
 }
 function EmptyContent({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "div",
     {
       "data-slot": "empty-content",
@@ -2565,9 +2920,9 @@ function EmptyContent({ className, ...props }) {
 
 // src/ui/field.tsx
 var import_field = require("@base-ui/react/field");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function Field({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     import_field.Field.Root,
     {
       "data-slot": "field",
@@ -2577,7 +2932,7 @@ function Field({ className, ...props }) {
   );
 }
 function FieldLabel({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     import_field.Field.Label,
     {
       "data-slot": "field-label",
@@ -2587,7 +2942,7 @@ function FieldLabel({ className, ...props }) {
   );
 }
 function FieldDescription({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     import_field.Field.Description,
     {
       "data-slot": "field-description",
@@ -2597,7 +2952,7 @@ function FieldDescription({ className, ...props }) {
   );
 }
 function FieldError({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     import_field.Field.Error,
     {
       "data-slot": "field-error",
@@ -2608,9 +2963,9 @@ function FieldError({ className, ...props }) {
 }
 
 // src/ui/input.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function Input({ className, type, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "input",
     {
       type,
@@ -2625,9 +2980,9 @@ function Input({ className, type, ...props }) {
 }
 
 // src/ui/input-group.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function InputGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     "div",
     {
       "data-slot": "input-group",
@@ -2649,7 +3004,7 @@ function InputGroupAddon({
   align = "inline-start",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     "div",
     {
       role: "group",
@@ -2668,7 +3023,7 @@ function InputGroupInput({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     "input",
     {
       "data-slot": "input-group-input",
@@ -2684,14 +3039,14 @@ function InputGroupInput({
 // src/ui/input-otp.tsx
 var import_input_otp = require("input-otp");
 var import_lucide_react15 = require("lucide-react");
-var React3 = __toESM(require("react"), 1);
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var React5 = __toESM(require("react"), 1);
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function InputOTP({
   className,
   containerClassName,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     import_input_otp.OTPInput,
     {
       "data-slot": "input-otp",
@@ -2705,7 +3060,7 @@ function InputOTP({
   );
 }
 function InputOTPGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "div",
     {
       "data-slot": "input-otp-group",
@@ -2719,9 +3074,9 @@ function InputOTPSlot({
   className,
   ...props
 }) {
-  const inputOTPContext = React3.useContext(import_input_otp.OTPInputContext);
+  const inputOTPContext = React5.useContext(import_input_otp.OTPInputContext);
   const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
     "div",
     {
       "data-slot": "input-otp-slot",
@@ -2733,19 +3088,19 @@ function InputOTPSlot({
       ...props,
       children: [
         char,
-        hasFakeCaret ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" }) }) : null
+        hasFakeCaret ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" }) }) : null
       ]
     }
   );
 }
 function InputOTPSeparator({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { "data-slot": "input-otp-separator", role: "separator", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react15.MinusIcon, {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { "data-slot": "input-otp-separator", role: "separator", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react15.MinusIcon, {}) });
 }
 
 // src/ui/item.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function Item({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "div",
     {
       "data-slot": "item",
@@ -2758,7 +3113,7 @@ function Item({ className, ...props }) {
   );
 }
 function ItemMedia({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "div",
     {
       "data-slot": "item-media",
@@ -2771,7 +3126,7 @@ function ItemMedia({ className, ...props }) {
   );
 }
 function ItemContent({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "div",
     {
       "data-slot": "item-content",
@@ -2781,7 +3136,7 @@ function ItemContent({ className, ...props }) {
   );
 }
 function ItemTitle({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "div",
     {
       "data-slot": "item-title",
@@ -2791,7 +3146,7 @@ function ItemTitle({ className, ...props }) {
   );
 }
 function ItemDescription({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "p",
     {
       "data-slot": "item-description",
@@ -2801,7 +3156,7 @@ function ItemDescription({ className, ...props }) {
   );
 }
 function ItemActions({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "div",
     {
       "data-slot": "item-actions",
@@ -2812,9 +3167,9 @@ function ItemActions({ className, ...props }) {
 }
 
 // src/ui/kbd.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function Kbd({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "kbd",
     {
       "data-slot": "kbd",
@@ -2828,12 +3183,12 @@ function Kbd({ className, ...props }) {
 }
 
 // src/ui/label.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function Label({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "label",
     {
       "data-slot": "label",
@@ -2846,11 +3201,94 @@ function Label({
   );
 }
 
+// src/ui/message.tsx
+var import_jsx_runtime40 = require("react/jsx-runtime");
+function MessageGroup({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    "div",
+    {
+      "data-slot": "message-group",
+      className: cn("flex min-w-0 flex-col gap-2", className),
+      ...props
+    }
+  );
+}
+function Message({
+  className,
+  align = "start",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    "div",
+    {
+      "data-slot": "message",
+      "data-align": align,
+      className: cn(
+        "group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MessageAvatar({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    "div",
+    {
+      "data-slot": "message-avatar",
+      className: cn(
+        "flex w-fit min-w-8 shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-muted group-has-data-[slot=message-footer]/message:-translate-y-8",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MessageContent({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    "div",
+    {
+      "data-slot": "message-content",
+      className: cn(
+        "flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:*:data-slot:self-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MessageHeader({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    "div",
+    {
+      "data-slot": "message-header",
+      className: cn(
+        "flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MessageFooter({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    "div",
+    {
+      "data-slot": "message-footer",
+      className: cn(
+        "flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
 // src/ui/progress.tsx
 var import_progress = require("@base-ui/react/progress");
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function Progress({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     import_progress.Progress.Root,
     {
       "data-slot": "progress",
@@ -2860,11 +3298,11 @@ function Progress({ className, ...props }) {
   );
 }
 function ProgressTrack({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     import_progress.Progress.Track,
     {
       "data-slot": "progress-track",
-      className: cn("h-2 w-full overflow-hidden rounded-full bg-muted", className),
+      className: cn("h-2 w-full overflow-hidden rounded-full bg-(--progress-track)", className),
       ...props
     }
   );
@@ -2873,12 +3311,12 @@ function ProgressIndicator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     import_progress.Progress.Indicator,
     {
       "data-slot": "progress-indicator",
       className: cn(
-        "h-full bg-primary transition-[width] duration-300 ease-in-out",
+        "h-full bg-(--progress-indicator) transition-[width] duration-300 ease-in-out",
         className
       ),
       ...props
@@ -2889,9 +3327,9 @@ function ProgressIndicator({
 // src/ui/radio-group.tsx
 var import_radio = require("@base-ui/react/radio");
 var import_radio_group = require("@base-ui/react/radio-group");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function RadioGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     import_radio_group.RadioGroup,
     {
       "data-slot": "radio-group",
@@ -2901,21 +3339,21 @@ function RadioGroup({ className, ...props }) {
   );
 }
 function RadioGroupItem({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     import_radio.Radio.Root,
     {
       "data-slot": "radio-group-item",
       className: cn(
-        "aspect-square size-4 shrink-0 cursor-pointer rounded-full border border-input shadow-xs transition-colors outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-checked:border-primary",
+        "aspect-square size-4 shrink-0 cursor-pointer inline-flex items-center justify-center rounded-full border border-(color:--radio-border) shadow-xs transition-colors outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-checked:border-(color:--radio-checked)",
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         import_radio.Radio.Indicator,
         {
           "data-slot": "radio-group-indicator",
           className: "flex items-center justify-center",
-          children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "size-2 rounded-full bg-primary" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "size-2 rounded-full bg-(--radio-checked)" })
         }
       )
     }
@@ -2925,12 +3363,12 @@ function RadioGroupItem({ className, ...props }) {
 // src/ui/resizable.tsx
 var import_lucide_react16 = require("lucide-react");
 var import_react_resizable_panels = require("react-resizable-panels");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function PanelGroup({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     import_react_resizable_panels.Group,
     {
       "data-slot": "resizable-panel-group",
@@ -2943,14 +3381,14 @@ function PanelGroup({
   );
 }
 function Panel({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_resizable_panels.Panel, { "data-slot": "resizable-panel", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_resizable_panels.Panel, { "data-slot": "resizable-panel", ...props });
 }
 function ResizableHandle({
   withHandle,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     import_react_resizable_panels.Separator,
     {
       "data-slot": "resizable-handle",
@@ -2959,27 +3397,27 @@ function ResizableHandle({
         className
       ),
       ...props,
-      children: withHandle ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-xs border border-border bg-border", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react16.GripVerticalIcon, { className: "size-2.5" }) }) : null
+      children: withHandle ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-xs border border-border bg-border", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react16.GripVerticalIcon, { className: "size-2.5" }) }) : null
     }
   );
 }
 
 // src/ui/scroll-area.tsx
 var import_scroll_area = require("@base-ui/react/scroll-area");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function ScrollArea({
   className,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     import_scroll_area.ScrollArea.Root,
     {
       "data-slot": "scroll-area",
       className: cn("relative overflow-hidden", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           import_scroll_area.ScrollArea.Viewport,
           {
             "data-slot": "scroll-area-viewport",
@@ -2987,8 +3425,8 @@ function ScrollArea({
             children
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ScrollBar, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_scroll_area.ScrollArea.Corner, {})
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ScrollBar, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_scroll_area.ScrollArea.Corner, {})
       ]
     }
   );
@@ -2998,7 +3436,7 @@ function ScrollBar({
   orientation = "vertical",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     import_scroll_area.ScrollArea.Scrollbar,
     {
       "data-slot": "scroll-area-scrollbar",
@@ -3010,7 +3448,7 @@ function ScrollBar({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         import_scroll_area.ScrollArea.Thumb,
         {
           "data-slot": "scroll-area-thumb",
@@ -3024,205 +3462,879 @@ function ScrollBar({
 // src/ui/select.tsx
 var import_select = require("@base-ui/react/select");
 var import_lucide_react17 = require("lucide-react");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var Select = import_select.Select.Root;
 function SelectGroup({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_select.Select.Group, { "data-slot": "select-group", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_select.Select.Group, { "data-slot": "select-group", ...props });
 }
 function SelectValue({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_select.Select.Value, { "data-slot": "select-value", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_select.Select.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    import_select.Select.Trigger,
+    {
+      "data-slot": "select-trigger",
+      "data-size": size,
+      className: cn(
+        "flex w-fit cursor-pointer items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-colors outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 data-[placeholder]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          import_select.Select.Icon,
+          {
+            render: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react17.ChevronDownIcon, { className: "size-4 opacity-50" })
+          }
+        )
+      ]
+    }
+  );
+}
+function SelectContent({
+  className,
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  align = "center",
+  alignItemWithTrigger = false,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_select.Select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    import_select.Select.Positioner,
+    {
+      side,
+      sideOffset,
+      align,
+      alignItemWithTrigger,
+      className: "isolate z-50",
+      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+        import_select.Select.Popup,
+        {
+          "data-slot": "select-content",
+          className: cn(
+            "relative z-50 max-h-96 min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border border-border bg-popover text-popover-foreground shadow-md shadow-(color:--shadow-color) duration-200 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          ),
+          ...props,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SelectScrollUpButton, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_select.Select.List, { className: "p-1", children }),
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SelectScrollDownButton, {})
+          ]
+        }
+      )
+    }
+  ) });
+}
+function SelectLabel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    import_select.Select.GroupLabel,
+    {
+      "data-slot": "select-label",
+      className: cn("px-2 py-1.5 text-xs text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function SelectItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    import_select.Select.Item,
+    {
+      "data-slot": "select-item",
+      className: cn(
+        "relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none focus:bg-(--menu-hover-background) focus:text-(--menu-hover-foreground) data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_select.Select.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react17.CheckIcon, { className: "size-4" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_select.Select.ItemText, { children })
+      ]
+    }
+  );
+}
+function SelectSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    import_select.Select.Separator,
+    {
+      "data-slot": "select-separator",
+      className: cn("pointer-events-none -mx-1 my-1 h-px bg-border", className),
+      ...props
+    }
+  );
+}
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    import_select.Select.ScrollUpArrow,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react17.ChevronUpIcon, { className: "size-4" })
+    }
+  );
+}
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    import_select.Select.ScrollDownArrow,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react17.ChevronDownIcon, { className: "size-4" })
+    }
+  );
+}
+
+// src/ui/separator.tsx
+var import_separator = require("@base-ui/react/separator");
+var import_jsx_runtime46 = require("react/jsx-runtime");
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative: _decorative,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    import_separator.Separator,
+    {
+      "data-slot": "separator",
+      orientation,
+      className: cn(
+        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/ui/sidebar.tsx
+var React6 = __toESM(require("react"), 1);
+var import_class_variance_authority8 = require("class-variance-authority");
+var import_lucide_react18 = require("lucide-react");
+
+// src/hooks/use-mobile.ts
+var import_react = require("react");
+var MOBILE_MEDIA_QUERY = "(max-width: 767px)";
+function useIsMobile() {
+  const [isMobile, setIsMobile] = (0, import_react.useState)(
+    () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(MOBILE_MEDIA_QUERY).matches
+  );
+  (0, import_react.useEffect)(() => {
+    if (typeof window.matchMedia !== "function") {
+      return;
+    }
+    const media = window.matchMedia(MOBILE_MEDIA_QUERY);
+    const onChange = (event) => {
+      setIsMobile(event.matches);
+    };
+    setIsMobile(media.matches);
+    media.addEventListener("change", onChange);
+    return () => media.removeEventListener("change", onChange);
+  }, []);
+  return isMobile;
+}
+
+// src/ui/skeleton.tsx
+var import_jsx_runtime47 = require("react/jsx-runtime");
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    "div",
+    {
+      "data-slot": "skeleton",
+      className: cn("animate-pulse rounded-md bg-muted", className),
+      ...props
+    }
+  );
+}
+
+// src/ui/sidebar.tsx
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var SIDEBAR_COOKIE_NAME = "sidebar_state";
+var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+var SIDEBAR_WIDTH = "16rem";
+var SIDEBAR_WIDTH_MOBILE = "18rem";
+var SIDEBAR_WIDTH_ICON = "3rem";
+var SIDEBAR_KEYBOARD_SHORTCUT = "b";
+var SidebarContext = React6.createContext(null);
+function useSidebar() {
+  const context = React6.useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.");
+  }
+  return context;
+}
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}) {
+  const isMobile = useIsMobile();
+  const [openMobile, setOpenMobile] = React6.useState(false);
+  const [_open, _setOpen] = React6.useState(defaultOpen);
+  const open = openProp ?? _open;
+  const setOpen = React6.useCallback(
+    (value) => {
+      const openState = typeof value === "function" ? value(open) : value;
+      if (setOpenProp) {
+        setOpenProp(openState);
+      } else {
+        _setOpen(openState);
+      }
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+    },
+    [setOpenProp, open]
+  );
+  const toggleSidebar = React6.useCallback(() => {
+    return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
+  }, [isMobile, setOpen, setOpenMobile]);
+  React6.useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        toggleSidebar();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [toggleSidebar]);
+  const state = open ? "expanded" : "collapsed";
+  const contextValue = React6.useMemo(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TooltipProvider, { delay: 0, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    "div",
+    {
+      "data-slot": "sidebar-wrapper",
+      style: {
+        "--sidebar-width": SIDEBAR_WIDTH,
+        "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+        ...style
+      },
+      className: cn(
+        "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) }) });
+}
+function SidebarRoot({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  ...props
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+  if (collapsible === "none") {
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      "div",
+      {
+        "data-slot": "sidebar",
+        className: cn(
+          "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+  if (isMobile) {
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+      SheetContent,
+      {
+        "data-sidebar": "sidebar",
+        "data-slot": "sidebar",
+        "data-mobile": "true",
+        className: "w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
+        style: {
+          "--sidebar-width": SIDEBAR_WIDTH_MOBILE
+        },
+        side,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(SheetHeader, { className: "sr-only", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SheetTitle, { children: "Sidebar" }),
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SheetDescription, { children: "Displays the mobile sidebar." })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex h-full w-full flex-col", children })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+    "div",
+    {
+      className: "group peer hidden text-sidebar-foreground md:block",
+      "data-state": state,
+      "data-collapsible": state === "collapsed" ? collapsible : "",
+      "data-variant": variant,
+      "data-side": side,
+      "data-slot": "sidebar",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          "div",
+          {
+            "data-slot": "sidebar-gap",
+            className: cn(
+              "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+              "group-data-[collapsible=offcanvas]:w-0",
+              "group-data-[side=right]:rotate-180",
+              variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          "div",
+          {
+            "data-slot": "sidebar-container",
+            className: cn(
+              "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 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)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+              className
+            ),
+            ...props,
+            children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              "div",
+              {
+                "data-sidebar": "sidebar",
+                "data-slot": "sidebar-inner",
+                className: "flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm",
+                children
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}) {
+  const { toggleSidebar } = useSidebar();
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+    Button,
+    {
+      "data-sidebar": "trigger",
+      "data-slot": "sidebar-trigger",
+      variant: "ghost",
+      size: "icon",
+      className: cn("size-7", className),
+      onClick: (event) => {
+        onClick?.(event);
+        toggleSidebar();
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react18.PanelLeftIcon, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "sr-only", children: "Toggle Sidebar" })
+      ]
+    }
+  );
+}
+function SidebarRail({ className, ...props }) {
+  const { toggleSidebar } = useSidebar();
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    "button",
+    {
+      "data-sidebar": "rail",
+      "data-slot": "sidebar-rail",
+      "aria-label": "Toggle Sidebar",
+      tabIndex: -1,
+      onClick: toggleSidebar,
+      title: "Toggle Sidebar",
+      className: cn(
+        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarInset({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    "main",
+    {
+      "data-slot": "sidebar-inset",
+      className: cn(
+        "relative flex w-full flex-1 flex-col bg-background",
+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarInput({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    Input,
+    {
+      "data-slot": "sidebar-input",
+      "data-sidebar": "input",
+      className: cn("h-8 w-full bg-sidebar shadow-none", className),
+      ...props
+    }
+  );
+}
+function SidebarHeader({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    "div",
+    {
+      "data-slot": "sidebar-header",
+      "data-sidebar": "header",
+      className: cn("flex flex-col gap-2 p-2", className),
+      ...props
+    }
+  );
+}
+function SidebarFooter({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    "div",
+    {
+      "data-slot": "sidebar-footer",
+      "data-sidebar": "footer",
+      className: cn("flex flex-col gap-2 p-2", className),
+      ...props
+    }
+  );
+}
+function SidebarSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    Separator,
+    {
+      "data-slot": "sidebar-separator",
+      "data-sidebar": "separator",
+      className: cn("mx-2 w-auto bg-sidebar-border", className),
+      ...props
+    }
+  );
+}
+function SidebarContent({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    "div",
+    {
+      "data-slot": "sidebar-content",
+      "data-sidebar": "content",
+      className: cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SidebarGroup({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    "div",
+    {
+      "data-slot": "sidebar-group",
+      "data-sidebar": "group",
+      className: cn("relative flex w-full min-w-0 flex-col p-2", className),
+      ...props
+    }
+  );
+}
+function renderAsChild(children, dataSlot, className, rest) {
+  if (!React6.isValidElement(children)) {
+    return null;
+  }
+  return React6.cloneElement(children, {
+    "data-slot": dataSlot,
+    className: cn(
+      className,
+      children.props.className
+    ),
+    ...rest
+  });
 }
-function SelectTrigger({
+function SidebarGroupLabel({
   className,
-  size = "default",
+  asChild = false,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
-    import_select.Select.Trigger,
+  const cls = cn(
+    "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden 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",
+    className
+  );
+  if (asChild) {
+    return renderAsChild(children, "sidebar-group-label", cls, props);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    "div",
     {
-      "data-slot": "select-trigger",
-      "data-size": size,
-      className: cn(
-        "flex w-fit cursor-pointer items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-colors outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 data-[placeholder]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      ),
+      "data-slot": "sidebar-group-label",
+      "data-sidebar": "group-label",
+      className: cls,
       ...props,
-      children: [
-        children,
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-          import_select.Select.Icon,
-          {
-            render: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react17.ChevronDownIcon, { className: "size-4 opacity-50" })
-          }
-        )
-      ]
+      children
     }
   );
 }
-function SelectContent({
+function SidebarGroupAction({
   className,
+  asChild = false,
   children,
-  side = "bottom",
-  sideOffset = 4,
-  align = "center",
-  alignItemWithTrigger = false,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_select.Select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-    import_select.Select.Positioner,
+  const cls = cn(
+    "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+    "after:absolute after:-inset-2 md:after:hidden",
+    "group-data-[collapsible=icon]:hidden",
+    className
+  );
+  if (asChild) {
+    return renderAsChild(children, "sidebar-group-action", cls, props);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    "button",
     {
-      side,
-      sideOffset,
-      align,
-      alignItemWithTrigger,
-      className: "isolate z-50",
-      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
-        import_select.Select.Popup,
-        {
-          "data-slot": "select-content",
-          className: cn(
-            "relative z-50 max-h-96 min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border border-border bg-popover text-popover-foreground shadow-md duration-200 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-            className
-          ),
-          ...props,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SelectScrollUpButton, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_select.Select.List, { className: "p-1", children }),
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SelectScrollDownButton, {})
-          ]
-        }
-      )
+      "data-slot": "sidebar-group-action",
+      "data-sidebar": "group-action",
+      className: cls,
+      ...props,
+      children
     }
-  ) });
+  );
 }
-function SelectLabel({
+function SidebarGroupContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-    import_select.Select.GroupLabel,
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    "div",
     {
-      "data-slot": "select-label",
-      className: cn("px-2 py-1.5 text-xs text-muted-foreground", className),
+      "data-slot": "sidebar-group-content",
+      "data-sidebar": "group-content",
+      className: cn("w-full text-sm", className),
       ...props
     }
   );
 }
-function SelectItem({
+function SidebarMenu({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    "ul",
+    {
+      "data-slot": "sidebar-menu",
+      "data-sidebar": "menu",
+      className: cn("flex w-full min-w-0 flex-col gap-1", className),
+      ...props
+    }
+  );
+}
+function SidebarMenuItem({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    "li",
+    {
+      "data-slot": "sidebar-menu-item",
+      "data-sidebar": "menu-item",
+      className: cn("group/menu-item relative", className),
+      ...props
+    }
+  );
+}
+var sidebarMenuButtonVariants = (0, import_class_variance_authority8.cva)(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! 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 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 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline: "bg-sidebar shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]"
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
   className,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
-    import_select.Select.Item,
+  const { isMobile, state } = useSidebar();
+  const cls = cn(sidebarMenuButtonVariants({ variant, size }), className);
+  const button = asChild ? renderAsChild(children, "sidebar-menu-button", cls, {
+    "data-sidebar": "menu-button",
+    "data-size": size,
+    "data-active": isActive,
+    ...props
+  }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    "button",
     {
-      "data-slot": "select-item",
-      className: cn(
-        "relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      ),
+      "data-slot": "sidebar-menu-button",
+      "data-sidebar": "menu-button",
+      "data-size": size,
+      "data-active": isActive,
+      className: cls,
       ...props,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_select.Select.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react17.CheckIcon, { className: "size-4" }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_select.Select.ItemText, { children })
-      ]
+      children
     }
   );
+  if (!tooltip) {
+    return button;
+  }
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip
+    };
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(TooltipTrigger, { render: button }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      TooltipContent,
+      {
+        side: "right",
+        align: "center",
+        hidden: state !== "collapsed" || isMobile,
+        ...tooltip
+      }
+    )
+  ] });
 }
-function SelectSeparator({
+function SidebarMenuAction({
   className,
+  asChild = false,
+  showOnHover = false,
+  children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-    import_select.Select.Separator,
+  const cls = cn(
+    "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+    "after:absolute after:-inset-2 md:after:hidden",
+    "peer-data-[size=sm]/menu-button:top-1",
+    "peer-data-[size=default]/menu-button:top-1.5",
+    "peer-data-[size=lg]/menu-button:top-2.5",
+    "group-data-[collapsible=icon]:hidden",
+    showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground data-[state=open]:opacity-100 md:opacity-0",
+    className
+  );
+  if (asChild) {
+    return renderAsChild(children, "sidebar-menu-action", cls, props);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    "button",
     {
-      "data-slot": "select-separator",
-      className: cn("pointer-events-none -mx-1 my-1 h-px bg-border", className),
-      ...props
+      "data-slot": "sidebar-menu-action",
+      "data-sidebar": "menu-action",
+      className: cls,
+      ...props,
+      children
     }
   );
 }
-function SelectScrollUpButton({
+function SidebarMenuBadge({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-    import_select.Select.ScrollUpArrow,
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    "div",
     {
-      "data-slot": "select-scroll-up-button",
+      "data-slot": "sidebar-menu-badge",
+      "data-sidebar": "menu-badge",
       className: cn(
-        "flex cursor-default items-center justify-center py-1",
+        "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none",
+        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
         className
       ),
-      ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react17.ChevronUpIcon, { className: "size-4" })
+      ...props
     }
   );
 }
-function SelectScrollDownButton({
+function SidebarMenuSkeleton({
   className,
+  showIcon = false,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-    import_select.Select.ScrollDownArrow,
+  const width = React6.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+    "div",
     {
-      "data-slot": "select-scroll-down-button",
-      className: cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      ),
+      "data-slot": "sidebar-menu-skeleton",
+      "data-sidebar": "menu-skeleton",
+      className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react17.ChevronDownIcon, { className: "size-4" })
+      children: [
+        showIcon && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          Skeleton,
+          {
+            className: "size-4 rounded-md",
+            "data-sidebar": "menu-skeleton-icon"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          Skeleton,
+          {
+            className: "h-4 max-w-(--skeleton-width) flex-1",
+            "data-sidebar": "menu-skeleton-text",
+            style: {
+              "--skeleton-width": width
+            }
+          }
+        )
+      ]
     }
   );
 }
-
-// src/ui/separator.tsx
-var import_separator = require("@base-ui/react/separator");
-var import_jsx_runtime43 = require("react/jsx-runtime");
-function Separator({
-  className,
-  orientation = "horizontal",
-  decorative: _decorative,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-    import_separator.Separator,
+function SidebarMenuSub({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    "ul",
     {
-      "data-slot": "separator",
-      orientation,
+      "data-slot": "sidebar-menu-sub",
+      "data-sidebar": "menu-sub",
       className: cn(
-        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
         className
       ),
       ...props
     }
   );
 }
-
-// src/ui/skeleton.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
-function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-    "div",
+function SidebarMenuSubItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    "li",
     {
-      "data-slot": "skeleton",
-      className: cn("animate-pulse rounded-md bg-muted", className),
+      "data-slot": "sidebar-menu-sub-item",
+      "data-sidebar": "menu-sub-item",
+      className: cn("group/menu-sub-item relative", className),
       ...props
     }
   );
 }
+function SidebarMenuSubButton({
+  asChild = false,
+  size = "md",
+  isActive = false,
+  className,
+  children,
+  ...props
+}) {
+  const cls = cn(
+    "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden 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 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+    "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+    size === "sm" && "text-xs",
+    size === "md" && "text-sm",
+    "group-data-[collapsible=icon]:hidden",
+    className
+  );
+  if (asChild) {
+    return renderAsChild(children, "sidebar-menu-sub-button", cls, {
+      "data-sidebar": "menu-sub-button",
+      "data-size": size,
+      "data-active": isActive,
+      ...props
+    });
+  }
+  return (
+    // eslint-disable-next-line jsx-a11y/anchor-has-content
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      "a",
+      {
+        "data-slot": "sidebar-menu-sub-button",
+        "data-sidebar": "menu-sub-button",
+        "data-size": size,
+        "data-active": isActive,
+        className: cls,
+        ...props,
+        children
+      }
+    )
+  );
+}
 
 // src/ui/slider.tsx
 var import_slider = require("@base-ui/react/slider");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function Slider({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     import_slider.Slider.Root,
     {
       "data-slot": "slider",
@@ -3235,7 +4347,7 @@ function Slider({ className, ...props }) {
   );
 }
 function SliderControl({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     import_slider.Slider.Control,
     {
       "data-slot": "slider-control",
@@ -3245,12 +4357,12 @@ function SliderControl({ className, ...props }) {
   );
 }
 function SliderTrack({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     import_slider.Slider.Track,
     {
       "data-slot": "slider-track",
       className: cn(
-        "relative h-1.5 w-full grow overflow-hidden rounded-full bg-muted",
+        "relative h-1.5 w-full grow overflow-hidden rounded-full bg-(--slider-track)",
         className
       ),
       ...props
@@ -3258,22 +4370,22 @@ function SliderTrack({ className, ...props }) {
   );
 }
 function SliderIndicator({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     import_slider.Slider.Indicator,
     {
       "data-slot": "slider-indicator",
-      className: cn("absolute h-full bg-primary", className),
+      className: cn("absolute h-full bg-(--slider-range)", className),
       ...props
     }
   );
 }
 function SliderThumb({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     import_slider.Slider.Thumb,
     {
       "data-slot": "slider-thumb",
       className: cn(
-        "block size-4 shrink-0 cursor-grab rounded-full border border-primary bg-background shadow-sm transition-colors focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none active:cursor-grabbing disabled:pointer-events-none disabled:opacity-50",
+        "block size-4 shrink-0 cursor-grab rounded-full border border-primary bg-(--slider-thumb) shadow-sm transition-colors focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none active:cursor-grabbing disabled:pointer-events-none disabled:opacity-50",
         className
       ),
       ...props
@@ -3282,11 +4394,11 @@ function SliderThumb({ className, ...props }) {
 }
 
 // src/ui/spinner.tsx
-var import_lucide_react18 = require("lucide-react");
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_lucide_react19 = require("lucide-react");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function Spinner({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-    import_lucide_react18.Loader2Icon,
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    import_lucide_react19.Loader2Icon,
     {
       role: "status",
       "aria-label": "Loading",
@@ -3299,22 +4411,22 @@ function Spinner({ className, ...props }) {
 
 // src/ui/switch.tsx
 var import_switch = require("@base-ui/react/switch");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function Switch({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     import_switch.Switch.Root,
     {
       "data-slot": "switch",
       className: cn(
-        "inline-flex h-[1.15rem] w-8 shrink-0 cursor-pointer items-center rounded-full border border-transparent shadow-xs transition-colors outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-checked:bg-primary data-unchecked:bg-input",
+        "inline-flex h-[1.15rem] w-8 shrink-0 cursor-pointer items-center rounded-full border border-transparent shadow-xs transition-colors outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-checked:bg-(--switch-track-checked) data-unchecked:bg-(--switch-track)",
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         import_switch.Switch.Thumb,
         {
           "data-slot": "switch-thumb",
-          className: "pointer-events-none block size-4 rounded-full bg-background transition-transform data-checked:translate-x-[calc(100%-2px)] data-unchecked:translate-x-0"
+          className: "pointer-events-none block size-4 rounded-full bg-(--switch-thumb) transition-transform data-checked:translate-x-[calc(100%-2px)] data-unchecked:translate-x-0"
         }
       )
     }
@@ -3322,14 +4434,14 @@ function Switch({ className, ...props }) {
 }
 
 // src/ui/table.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function Table({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     "div",
     {
       "data-slot": "table-container",
       className: "relative w-full overflow-x-auto",
-      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
         "table",
         {
           "data-slot": "table",
@@ -3341,7 +4453,7 @@ function Table({ className, ...props }) {
   );
 }
 function TableHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     "thead",
     {
       "data-slot": "table-header",
@@ -3351,7 +4463,7 @@ function TableHeader({ className, ...props }) {
   );
 }
 function TableBody({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     "tbody",
     {
       "data-slot": "table-body",
@@ -3361,7 +4473,7 @@ function TableBody({ className, ...props }) {
   );
 }
 function TableFooter({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     "tfoot",
     {
       "data-slot": "table-footer",
@@ -3374,7 +4486,7 @@ function TableFooter({ className, ...props }) {
   );
 }
 function TableRow({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     "tr",
     {
       "data-slot": "table-row",
@@ -3387,7 +4499,7 @@ function TableRow({ className, ...props }) {
   );
 }
 function TableHead({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     "th",
     {
       "data-slot": "table-head",
@@ -3400,7 +4512,7 @@ function TableHead({ className, ...props }) {
   );
 }
 function TableCell({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     "td",
     {
       "data-slot": "table-cell",
@@ -3416,7 +4528,7 @@ function TableCaption({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     "caption",
     {
       "data-slot": "table-caption",
@@ -3428,12 +4540,12 @@ function TableCaption({
 
 // src/ui/tabs.tsx
 var import_tabs = require("@base-ui/react/tabs");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function Tabs({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     import_tabs.Tabs.Root,
     {
       "data-slot": "tabs",
@@ -3446,7 +4558,7 @@ function TabsList({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     import_tabs.Tabs.List,
     {
       "data-slot": "tabs-list",
@@ -3462,12 +4574,12 @@ function TabsTrigger({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     import_tabs.Tabs.Tab,
     {
       "data-slot": "tabs-trigger",
       className: cn(
-        "inline-flex h-[calc(100%-1px)] flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground transition-colors focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-active:border-border data-active:bg-background data-active:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "inline-flex h-[calc(100%-1px)] flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground transition-colors focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-active:border-border data-active:bg-card data-active:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props
@@ -3478,7 +4590,7 @@ function TabsContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     import_tabs.Tabs.Panel,
     {
       "data-slot": "tabs-content",
@@ -3489,12 +4601,12 @@ function TabsContent({
 }
 
 // src/ui/textarea.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function Textarea({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     "textarea",
     {
       "data-slot": "textarea",
@@ -3509,9 +4621,9 @@ function Textarea({
 
 // src/ui/toggle.tsx
 var import_toggle = require("@base-ui/react/toggle");
-var import_class_variance_authority6 = require("class-variance-authority");
-var import_jsx_runtime51 = require("react/jsx-runtime");
-var toggleVariants = (0, import_class_variance_authority6.cva)(
+var import_class_variance_authority9 = require("class-variance-authority");
+var import_jsx_runtime55 = require("react/jsx-runtime");
+var toggleVariants = (0, import_class_variance_authority9.cva)(
   "inline-flex cursor-pointer items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-colors outline-none hover:bg-muted hover:text-muted-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-pressed:bg-accent data-pressed:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
@@ -3537,7 +4649,7 @@ function Toggle({
   size,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     import_toggle.Toggle,
     {
       "data-slot": "toggle",
@@ -3550,9 +4662,9 @@ function Toggle({
 // src/ui/toggle-group.tsx
 var import_toggle2 = require("@base-ui/react/toggle");
 var import_toggle_group = require("@base-ui/react/toggle-group");
-var React4 = __toESM(require("react"), 1);
-var import_jsx_runtime52 = require("react/jsx-runtime");
-var ToggleGroupContext = React4.createContext({
+var React7 = __toESM(require("react"), 1);
+var import_jsx_runtime56 = require("react/jsx-runtime");
+var ToggleGroupContext = React7.createContext({
   size: "default",
   variant: "default"
 });
@@ -3563,18 +4675,18 @@ function ToggleGroup({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     import_toggle_group.ToggleGroup,
     {
       "data-slot": "toggle-group",
       "data-variant": variant,
       "data-size": size,
       className: cn(
-        "group/toggle-group flex w-fit items-center rounded-md [&>[data-slot=toggle]]:rounded-none [&>[data-slot=toggle]]:first:rounded-l-md [&>[data-slot=toggle]]:last:rounded-r-md",
+        "group/toggle-group flex w-fit items-center gap-1 rounded-md",
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ToggleGroupContext.Provider, { value: { variant, size }, children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ToggleGroupContext.Provider, { value: { variant, size }, children })
     }
   );
 }
@@ -3585,8 +4697,8 @@ function ToggleGroupItem({
   size,
   ...props
 }) {
-  const context = React4.useContext(ToggleGroupContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  const context = React7.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     import_toggle2.Toggle,
     {
       "data-slot": "toggle-group-item",
@@ -3607,9 +4719,9 @@ function ToggleGroupItem({
 }
 
 // src/ui/typography.tsx
-var import_class_variance_authority7 = require("class-variance-authority");
-var import_jsx_runtime53 = require("react/jsx-runtime");
-var typographyVariants = (0, import_class_variance_authority7.cva)("", {
+var import_class_variance_authority10 = require("class-variance-authority");
+var import_jsx_runtime57 = require("react/jsx-runtime");
+var typographyVariants = (0, import_class_variance_authority10.cva)("", {
   variants: {
     variant: {
       h1: "scroll-m-20 text-4xl font-extrabold tracking-tight text-balance",
@@ -3644,7 +4756,7 @@ var variantTagMap = {
 };
 function Typography({ className, variant = "p", ...props }) {
   const Tag = variantTagMap[variant ?? "p"];
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     Tag,
     {
       "data-slot": "typography",
@@ -3675,6 +4787,15 @@ function Typography({ className, variant = "p", ...props }) {
   AlertDialogTrigger,
   AlertTitle,
   AspectRatio,
+  Attachment,
+  AttachmentAction,
+  AttachmentActions,
+  AttachmentContent,
+  AttachmentDescription,
+  AttachmentGroup,
+  AttachmentMedia,
+  AttachmentTitle,
+  AttachmentTrigger,
   Avatar,
   AvatarFallback,
   AvatarImage,
@@ -3686,6 +4807,10 @@ function Typography({ className, variant = "p", ...props }) {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
+  Bubble,
+  BubbleContent,
+  BubbleGroup,
+  BubbleReactions,
   Button,
   ButtonGroup,
   CHART_TOKEN_COLORS,
@@ -3783,6 +4908,12 @@ function Typography({ className, variant = "p", ...props }) {
   MenubarMenu,
   MenubarSeparator,
   MenubarTrigger,
+  Message,
+  MessageAvatar,
+  MessageContent,
+  MessageFooter,
+  MessageGroup,
+  MessageHeader,
   NavigationMenu,
   NavigationMenuContent,
   NavigationMenuItem,
@@ -3831,6 +4962,29 @@ function Typography({ className, variant = "p", ...props }) {
   SheetPortal,
   SheetTitle,
   SheetTrigger,
+  SidebarContentArea,
+  SidebarFooterArea,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeaderArea,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarRoot,
+  SidebarSeparator,
+  SidebarTrigger,
   Skeleton,
   Slider,
   SliderControl,
@@ -3869,5 +5023,6 @@ function Typography({ className, variant = "p", ...props }) {
   toastManager,
   toggleVariants,
   typographyVariants,
-  useCarousel
+  useCarousel,
+  useSidebar
 });