@nextop-os/ui-system 0.0.27 → 0.0.29

package/dist/{chunk-D5Y4OBKX.js → chunk-YSWPZLZ4.js}

@@ -11,8 +11,10 @@ import {
   FolderFilledIcon,
   IssueIcon,
   LoadingIcon,
-  SuccessFilledIcon
-} from "./chunk-UELLN5VR.js";
+  SuccessFilledIcon,
+  WarningFilledIcon,
+  WarningLinedIcon
+} from "./chunk-45BNCYIU.js";
 import {
   cn
 } from "./chunk-DGPY4WP3.js";
@@ -22,11 +24,12 @@ import { cva } from "class-variance-authority";
 import { Slot } from "radix-ui";
 import { jsx } from "react/jsx-runtime";
 var badgeVariants = cva(
-  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-[4px] border border-transparent px-2 py-0.5 text-[0.72rem] font-normal whitespace-nowrap transition-[background-color,border-color,color,box-shadow] focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/35 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-[4px] border border-transparent px-1 py-0.5 text-[0.72rem] font-normal whitespace-nowrap transition-[background-color,border-color,color,box-shadow] focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/35 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
   {
     variants: {
       variant: {
         default: "bg-[var(--transparency-block)] text-[var(--text-secondary)] [a]:hover:bg-[var(--transparency-hover)]",
+        accent: "bg-[var(--accent-bg)] text-[var(--accent)] [a]:hover:bg-[var(--accent-bg)]",
         secondary: "bg-[var(--transparency-block)] text-[var(--text-secondary)] [a]:hover:bg-[var(--transparency-hover)]",
         destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/18",
         outline: "border-border bg-card/90 text-foreground [a]:hover:bg-muted [a]:hover:text-foreground",
@@ -57,11 +60,49 @@ function Badge({
   );
 }
 
-// src/components/button/button.tsx
+// src/components/bare-icon-button/bare-icon-button.tsx
 import { cva as cva2 } from "class-variance-authority";
 import { Slot as Slot2 } from "radix-ui";
 import { jsx as jsx2 } from "react/jsx-runtime";
-var buttonVariants = cva2(
+var bareIconButtonVariants = cva2(
+  "inline-flex shrink-0 cursor-pointer items-center justify-center border border-transparent bg-transparent p-0 text-[var(--text-tertiary)] transition-[color,opacity,box-shadow] duration-150 outline-none select-none hover:border-transparent hover:bg-transparent hover:text-[var(--text-primary)] active:bg-transparent active:text-[var(--text-primary)] aria-expanded:bg-transparent aria-expanded:text-[var(--text-primary)] focus-visible:border-transparent focus-visible:bg-transparent focus-visible:text-[var(--text-primary)] focus-visible:ring-2 focus-visible:ring-[var(--border-focus)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-transparent disabled:text-[var(--text-disabled)] disabled:opacity-100 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      size: {
+        md: "size-6 rounded-[4px] [&_svg:not([class*='size-'])]:size-4",
+        sm: "size-5 rounded-[3px] [&_svg:not([class*='size-'])]:size-3.5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+function BareIconButton({
+  className,
+  size = "md",
+  asChild = false,
+  type = "button",
+  ...props
+}) {
+  const Comp = asChild ? Slot2.Root : "button";
+  return /* @__PURE__ */ jsx2(
+    Comp,
+    {
+      "data-slot": "bare-icon-button",
+      "data-size": size,
+      type,
+      className: cn(bareIconButtonVariants({ size, className })),
+      ...props
+    }
+  );
+}
+
+// src/components/button/button.tsx
+import { cva as cva3 } from "class-variance-authority";
+import { Slot as Slot3 } from "radix-ui";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var buttonVariants = cva3(
   "group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-normal whitespace-nowrap transition-[background-color,border-color,color,box-shadow,transform] outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/35 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
@@ -106,8 +147,8 @@ function Button({
   asChild = false,
   ...props
 }) {
-  const Comp = asChild ? Slot2.Root : "button";
-  return /* @__PURE__ */ jsx2(
+  const Comp = asChild ? Slot3.Root : "button";
+  return /* @__PURE__ */ jsx3(
     Comp,
     {
       "data-slot": "button",
@@ -120,13 +161,13 @@ function Button({
 }
 
 // src/components/card/card.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function Card({
   className,
   size = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       "data-slot": "card",
@@ -140,7 +181,7 @@ function Card({
   );
 }
 function CardHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       "data-slot": "card-header",
@@ -153,7 +194,7 @@ function CardHeader({ className, ...props }) {
   );
 }
 function CardTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       "data-slot": "card-title",
@@ -166,7 +207,7 @@ function CardTitle({ className, ...props }) {
   );
 }
 function CardDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       "data-slot": "card-description",
@@ -176,7 +217,7 @@ function CardDescription({ className, ...props }) {
   );
 }
 function CardAction({ className, ...props }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       "data-slot": "card-action",
@@ -189,7 +230,7 @@ function CardAction({ className, ...props }) {
   );
 }
 function CardContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       "data-slot": "card-content",
@@ -199,7 +240,7 @@ function CardContent({ className, ...props }) {
   );
 }
 function CardFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       "data-slot": "card-footer",
@@ -214,12 +255,12 @@ function CardFooter({ className, ...props }) {
 
 // src/components/checkbox/checkbox.tsx
 import { Checkbox as CheckboxPrimitive } from "radix-ui";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function Checkbox({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     CheckboxPrimitive.Root,
     {
       "data-slot": "checkbox",
@@ -228,12 +269,12 @@ function Checkbox({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx4(
+      children: /* @__PURE__ */ jsx5(
         CheckboxPrimitive.Indicator,
         {
           "data-slot": "checkbox-indicator",
           className: "grid place-content-center text-current transition-none [&>svg]:size-3",
-          children: /* @__PURE__ */ jsx4(CheckIcon, { size: 14 })
+          children: /* @__PURE__ */ jsx5(CheckIcon, { size: 14 })
         }
       )
     }
@@ -243,7 +284,7 @@ function Checkbox({
 // src/components/dialog/dialog.tsx
 import * as React from "react";
 import { Dialog as DialogPrimitive } from "radix-ui";
-import { Fragment, jsx as jsx5, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6, jsxs } from "react/jsx-runtime";
 var dialogCloseDurationMs = 150;
 var DialogMotionContext = React.createContext({
   open: false
@@ -267,7 +308,7 @@ function Dialog({
     },
     [onOpenChange, open]
   );
-  return /* @__PURE__ */ jsx5(DialogMotionContext.Provider, { value: { open: currentOpen }, children: /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(DialogMotionContext.Provider, { value: { open: currentOpen }, children: /* @__PURE__ */ jsx6(
     DialogPrimitive.Root,
     {
       "data-slot": "dialog",
@@ -280,24 +321,24 @@ function Dialog({
 function DialogTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+  return /* @__PURE__ */ jsx6(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
 }
 function DialogPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ jsx6(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogClose({
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+  return /* @__PURE__ */ jsx6(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
 }
 function DialogOverlay({
   className,
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     DialogPrimitive.Overlay,
     {
       "data-slot": "dialog-overlay",
@@ -337,7 +378,7 @@ function DialogContent({
     return null;
   }
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx5(DialogOverlay, { className: overlayClassName, forceMount: true }),
+    /* @__PURE__ */ jsx6(DialogOverlay, { className: overlayClassName, forceMount: true }),
     /* @__PURE__ */ jsxs(
       DialogPrimitive.Content,
       {
@@ -345,22 +386,22 @@ function DialogContent({
         forceMount: true,
         className: cn(
           portaled ? "fixed" : "absolute",
-          "pointer-events-none top-1/2 left-1/2 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 origin-center gap-3 rounded-[16px] border border-border-1 bg-background-fronted p-[18px] text-sm text-foreground shadow-panel outline-none ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[transform,opacity] sm:max-w-[360px] data-[state=closed]:!pointer-events-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-[0.96] data-[state=closed]:duration-[150ms] data-[state=open]:pointer-events-auto data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-[0.96] data-[state=open]:duration-[250ms] motion-reduce:animate-none",
+          "pointer-events-none top-1/2 left-1/2 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 origin-center gap-3 rounded-[16px] border border-border-1 bg-[var(--background-panel)] p-[18px] text-sm text-foreground shadow-panel outline-none ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[transform,opacity] sm:max-w-[360px] data-[state=closed]:!pointer-events-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-[0.96] data-[state=closed]:duration-[150ms] data-[state=open]:pointer-events-auto data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-[0.96] data-[state=open]:duration-[250ms] motion-reduce:animate-none",
           className
         ),
         style: { zIndex: "var(--z-dialog)", ...style },
         ...props,
         children: [
           children,
-          showCloseButton && /* @__PURE__ */ jsx5(DialogPrimitive.Close, { "data-slot": "dialog-close", asChild: true, children: /* @__PURE__ */ jsxs(
+          showCloseButton && /* @__PURE__ */ jsx6(DialogPrimitive.Close, { "data-slot": "dialog-close", asChild: true, children: /* @__PURE__ */ jsxs(
             Button,
             {
               variant: "ghost",
               className: "absolute top-3 right-3",
               size: "icon-sm",
               children: [
-                /* @__PURE__ */ jsx5(CloseIcon, {}),
-                /* @__PURE__ */ jsx5("span", { className: "sr-only", children: "Close" })
+                /* @__PURE__ */ jsx6(CloseIcon, {}),
+                /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Close" })
               ]
             }
           ) })
@@ -371,10 +412,10 @@ function DialogContent({
   if (!portaled) {
     return content;
   }
-  return /* @__PURE__ */ jsx5(DialogPortal, { forceMount: true, children: content });
+  return /* @__PURE__ */ jsx6(DialogPortal, { forceMount: true, children: content });
 }
 function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       "data-slot": "dialog-header",
@@ -400,7 +441,7 @@ function DialogFooter({
       ...props,
       children: [
         children,
-        showCloseButton && /* @__PURE__ */ jsx5(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx5(Button, { variant: "ghost", size: "dialog", children: "Close" }) })
+        showCloseButton && /* @__PURE__ */ jsx6(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx6(Button, { variant: "ghost", size: "dialog", children: "Close" }) })
       ]
     }
   );
@@ -409,7 +450,7 @@ function DialogTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     DialogPrimitive.Title,
     {
       "data-slot": "dialog-title",
@@ -425,7 +466,7 @@ function DialogDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     DialogPrimitive.Description,
     {
       "data-slot": "dialog-description",
@@ -439,7 +480,7 @@ function DialogDescription({
 }
 
 // src/components/confirmation-dialog/confirmation-dialog.tsx
-import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
 function confirmToneClassName(tone) {
   if (tone === "destructive") {
     return "shadow-none";
@@ -467,7 +508,7 @@ function ConfirmationDialog({
   title
 }) {
   const isCloseDisabled = disableCloseWhileBusy && confirmBusy;
-  return /* @__PURE__ */ jsx6(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsx7(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs2(
     DialogContent,
     {
       className: cn(
@@ -489,12 +530,12 @@ function ConfirmationDialog({
       },
       children: [
         /* @__PURE__ */ jsxs2(DialogHeader, { children: [
-          /* @__PURE__ */ jsx6(DialogTitle, { children: title }),
-          description ? /* @__PURE__ */ jsx6(DialogDescription, { children: description }) : null
+          /* @__PURE__ */ jsx7(DialogTitle, { children: title }),
+          description ? /* @__PURE__ */ jsx7(DialogDescription, { children: description }) : null
         ] }),
-        children ? /* @__PURE__ */ jsx6("div", { className: "text-sm leading-[1.3] text-text-secondary", children }) : null,
+        children ? /* @__PURE__ */ jsx7("div", { className: "text-sm leading-[1.3] text-text-secondary", children }) : null,
         footer ?? /* @__PURE__ */ jsxs2(DialogFooter, { children: [
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(
             Button,
             {
               disabled: confirmBusy,
@@ -508,7 +549,7 @@ function ConfirmationDialog({
               children: cancelLabel
             }
           ),
-          hideConfirmButton ? null : /* @__PURE__ */ jsx6(
+          hideConfirmButton ? null : /* @__PURE__ */ jsx7(
             Button,
             {
               disabled: confirmBusy || confirmDisabled,
@@ -531,7 +572,7 @@ function ConfirmationDialog({
 // src/components/date-picker/date-picker.tsx
 import * as React2 from "react";
 import { createPortal } from "react-dom";
-import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 var defaultLabels = {
   placeholder: "Year / Month / Day",
   previousMonth: "Previous month",
@@ -735,7 +776,7 @@ var DatePicker = React2.forwardRef(
       triggerRef.current?.focus();
     };
     return /* @__PURE__ */ jsxs3(Fragment2, { children: [
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(
         "button",
         {
           ref: (node) => {
@@ -766,7 +807,7 @@ var DatePicker = React2.forwardRef(
             }
           },
           ...props,
-          children: /* @__PURE__ */ jsx7("span", { className: "min-w-0 truncate", children: displayValue })
+          children: /* @__PURE__ */ jsx8("span", { className: "min-w-0 truncate", children: displayValue })
         }
       ),
       isOpen && popoverPosition ? createPortal(
@@ -784,9 +825,9 @@ var DatePicker = React2.forwardRef(
             },
             children: [
               /* @__PURE__ */ jsxs3("div", { className: "mb-3 flex items-center justify-between gap-2", children: [
-                /* @__PURE__ */ jsx7("div", { className: "text-sm font-semibold text-foreground", children: formatMonthLabel(visibleMonth) }),
+                /* @__PURE__ */ jsx8("div", { className: "text-sm font-semibold text-foreground", children: formatMonthLabel(visibleMonth) }),
                 /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1", children: [
-                  /* @__PURE__ */ jsx7(
+                  /* @__PURE__ */ jsx8(
                     "button",
                     {
                       "aria-label": resolvedLabels.previousMonth,
@@ -799,10 +840,10 @@ var DatePicker = React2.forwardRef(
                           1
                         )
                       ),
-                      children: /* @__PURE__ */ jsx7(ArrowLeftIcon, { size: 16 })
+                      children: /* @__PURE__ */ jsx8(ArrowLeftIcon, { size: 16 })
                     }
                   ),
-                  /* @__PURE__ */ jsx7(
+                  /* @__PURE__ */ jsx8(
                     "button",
                     {
                       "aria-label": resolvedLabels.nextMonth,
@@ -815,13 +856,13 @@ var DatePicker = React2.forwardRef(
                           1
                         )
                       ),
-                      children: /* @__PURE__ */ jsx7(ArrowRightIcon, { size: 16 })
+                      children: /* @__PURE__ */ jsx8(ArrowRightIcon, { size: 16 })
                     }
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ jsx7("div", { className: "grid grid-cols-7 gap-1 text-center text-xs font-semibold text-muted-foreground", children: resolvedLabels.weekdayLabels.map((day) => /* @__PURE__ */ jsx7("div", { className: "py-1", children: day }, day)) }),
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx8("div", { className: "grid grid-cols-7 gap-1 text-center text-xs font-semibold text-muted-foreground", children: resolvedLabels.weekdayLabels.map((day) => /* @__PURE__ */ jsx8("div", { className: "py-1", children: day }, day)) }),
+              /* @__PURE__ */ jsx8(
                 "div",
                 {
                   className: "mt-1 grid grid-cols-7 justify-items-center gap-1",
@@ -830,7 +871,7 @@ var DatePicker = React2.forwardRef(
                     const isSelected = isSameDate(date, selectedDate);
                     const isToday = isSameDate(date, today);
                     const inCurrentMonth = date.getMonth() === visibleMonth.getMonth();
-                    return /* @__PURE__ */ jsx7(
+                    return /* @__PURE__ */ jsx8(
                       "button",
                       {
                         "aria-pressed": isSelected,
@@ -851,7 +892,7 @@ var DatePicker = React2.forwardRef(
                 }
               ),
               /* @__PURE__ */ jsxs3("div", { className: "mt-3 flex items-center justify-between gap-2 border-t border-border/70 pt-3", children: [
-                /* @__PURE__ */ jsx7(
+                /* @__PURE__ */ jsx8(
                   "button",
                   {
                     className: "inline-flex min-h-8 items-center justify-center rounded-sm px-3 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
@@ -864,7 +905,7 @@ var DatePicker = React2.forwardRef(
                     children: resolvedLabels.clear
                   }
                 ),
-                /* @__PURE__ */ jsx7(
+                /* @__PURE__ */ jsx8(
                   "button",
                   {
                     className: "inline-flex min-h-8 items-center justify-center rounded-sm bg-primary px-3 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90",
@@ -884,17 +925,143 @@ var DatePicker = React2.forwardRef(
 );
 DatePicker.displayName = "DatePicker";
 
+// src/components/drawer/drawer.tsx
+import { Drawer as DrawerPrimitive } from "vaul";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+function Drawer({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx9(DrawerPrimitive.Root, { "data-slot": "drawer", ...props });
+}
+function DrawerTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx9(DrawerPrimitive.Trigger, { "data-slot": "drawer-trigger", ...props });
+}
+function DrawerPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx9(DrawerPrimitive.Portal, { "data-slot": "drawer-portal", ...props });
+}
+function DrawerClose({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx9(DrawerPrimitive.Close, { "data-slot": "drawer-close", ...props });
+}
+function DrawerOverlay({
+  className,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx9(
+    DrawerPrimitive.Overlay,
+    {
+      "data-slot": "drawer-overlay",
+      className: cn(
+        "fixed inset-0 isolate bg-[var(--backdrop)] duration-150 supports-backdrop-filter:backdrop-blur-sm data-closed:animate-out data-closed:fade-out-0 data-open:animate-in data-open:fade-in-0",
+        className
+      ),
+      style: { zIndex: "var(--z-dialog-overlay)", ...style },
+      ...props
+    }
+  );
+}
+function DrawerContent({
+  className,
+  children,
+  portalContainer,
+  showOverlay = true,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs4(DrawerPortal, { "data-slot": "drawer-portal", container: portalContainer, children: [
+    showOverlay ? /* @__PURE__ */ jsx9(DrawerOverlay, {}) : null,
+    /* @__PURE__ */ jsxs4(
+      DrawerPrimitive.Content,
+      {
+        "data-slot": "drawer-content",
+        className: cn(
+          "group/drawer-content fixed flex h-auto flex-col border-[var(--border-1)] bg-background-fronted text-sm text-foreground shadow-panel outline-none",
+          "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-xl data-[vaul-drawer-direction=bottom]:border-t",
+          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+          "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]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "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-xl data-[vaul-drawer-direction=top]:border-b",
+          className
+        ),
+        style: { zIndex: "var(--z-dialog)", ...style },
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx9("div", { className: "mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }),
+          children
+        ]
+      }
+    )
+  ] });
+}
+function DrawerHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      "data-slot": "drawer-header",
+      className: cn(
+        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DrawerFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      "data-slot": "drawer-footer",
+      className: cn("mt-auto flex flex-col gap-2 p-4", className),
+      ...props
+    }
+  );
+}
+function DrawerTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx9(
+    DrawerPrimitive.Title,
+    {
+      "data-slot": "drawer-title",
+      className: cn(
+        "text-base font-medium leading-[1.35] text-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DrawerDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx9(
+    DrawerPrimitive.Description,
+    {
+      "data-slot": "drawer-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+
 // src/components/dropdown-menu/dropdown-menu.tsx
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
 
 // src/components/menu-surface/menu-surface.tsx
 import * as React3 from "react";
-import { Slot as Slot3 } from "radix-ui";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { Slot as Slot4 } from "radix-ui";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var menuSurfaceClassName = "t-dropdown flex flex-col gap-0.5 rounded-[8px] border border-[var(--border-1)] bg-[var(--background-fronted)] p-1 text-sm text-[var(--text-primary)] shadow-panel outline-none";
 var menuItemClassName = "relative flex cursor-pointer items-center gap-1.5 rounded-sm px-2 py-1 text-sm text-[var(--text-primary)] outline-hidden transition-colors duration-200 select-none hover:bg-[var(--transparency-hover)] hover:text-[var(--text-primary)] focus:bg-[var(--transparency-hover)] focus:text-[var(--text-primary)] data-[highlighted]:bg-[var(--transparency-hover)] data-[highlighted]:text-[var(--text-primary)] data-disabled:pointer-events-none data-disabled:text-[var(--text-disabled)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2";
 var menuItemWithIndicatorClassName = `${menuItemClassName} pr-8`;
-var menuItemIndicatorClassName = "pointer-events-none absolute right-2 flex size-4 items-center justify-center";
+var menuItemIndicatorClassName = "pointer-events-none absolute right-2 flex size-4 items-center justify-center text-[var(--accent)]";
 var MenuSurface = React3.forwardRef(
   ({
     asChild = false,
@@ -903,8 +1070,8 @@ var MenuSurface = React3.forwardRef(
     state = "open",
     ...props
   }, ref) => {
-    const Comp = asChild ? Slot3.Root : "div";
-    return /* @__PURE__ */ jsx8(
+    const Comp = asChild ? Slot4.Root : "div";
+    return /* @__PURE__ */ jsx10(
       Comp,
       {
         ...props,
@@ -918,21 +1085,21 @@ var MenuSurface = React3.forwardRef(
 MenuSurface.displayName = "MenuSurface";
 
 // src/components/dropdown-menu/dropdown-menu.tsx
-import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
 function DropdownMenu({
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+  return /* @__PURE__ */ jsx11(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
 }
 function DropdownMenuPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
+  return /* @__PURE__ */ jsx11(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
 }
 function DropdownMenuTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx11(
     DropdownMenuPrimitive.Trigger,
     {
       "data-slot": "dropdown-menu-trigger",
@@ -948,7 +1115,7 @@ function DropdownMenuContent({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx11(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx11(
     DropdownMenuPrimitive.Content,
     {
       asChild: true,
@@ -956,7 +1123,7 @@ function DropdownMenuContent({
       align,
       sideOffset,
       ...props,
-      children: /* @__PURE__ */ jsx9(
+      children: /* @__PURE__ */ jsx11(
         MenuSurface,
         {
           "data-slot": "dropdown-menu-content",
@@ -975,7 +1142,7 @@ function DropdownMenuGroup({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx11(
     DropdownMenuPrimitive.Group,
     {
       "data-slot": "dropdown-menu-group",
@@ -990,7 +1157,7 @@ function DropdownMenuItem({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx11(
     DropdownMenuPrimitive.Item,
     {
       "data-inset": inset,
@@ -1013,7 +1180,7 @@ function DropdownMenuCheckboxItem({
   inset,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     DropdownMenuPrimitive.CheckboxItem,
     {
       checked,
@@ -1026,12 +1193,12 @@ function DropdownMenuCheckboxItem({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx11(
           "span",
           {
             className: menuItemIndicatorClassName,
             "data-slot": "dropdown-menu-checkbox-item-indicator",
-            children: /* @__PURE__ */ jsx9(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx9(CheckIcon, {}) })
+            children: /* @__PURE__ */ jsx11(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx11(CheckIcon, {}) })
           }
         ),
         children
@@ -1043,7 +1210,7 @@ function DropdownMenuRadioGroup({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx11(
     DropdownMenuPrimitive.RadioGroup,
     {
       "data-slot": "dropdown-menu-radio-group",
@@ -1058,7 +1225,7 @@ function DropdownMenuRadioItem({
   inset,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     DropdownMenuPrimitive.RadioItem,
     {
       "data-inset": inset,
@@ -1070,12 +1237,12 @@ function DropdownMenuRadioItem({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx11(
           "span",
           {
             className: menuItemIndicatorClassName,
             "data-slot": "dropdown-menu-radio-item-indicator",
-            children: /* @__PURE__ */ jsx9(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx9(CheckIcon, {}) })
+            children: /* @__PURE__ */ jsx11(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx11(CheckIcon, {}) })
           }
         ),
         children
@@ -1088,7 +1255,7 @@ function DropdownMenuLabel({
   inset,
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx11(
     DropdownMenuPrimitive.Label,
     {
       "data-inset": inset,
@@ -1105,7 +1272,7 @@ function DropdownMenuSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx11(
     DropdownMenuPrimitive.Separator,
     {
       "data-slot": "dropdown-menu-separator",
@@ -1118,7 +1285,7 @@ function DropdownMenuShortcut({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx11(
     "span",
     {
       "data-slot": "dropdown-menu-shortcut",
@@ -1133,7 +1300,7 @@ function DropdownMenuShortcut({
 function DropdownMenuSub({
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+  return /* @__PURE__ */ jsx11(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
 }
 function DropdownMenuSubTrigger({
   className,
@@ -1141,7 +1308,7 @@ function DropdownMenuSubTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     DropdownMenuPrimitive.SubTrigger,
     {
       "data-inset": inset,
@@ -1154,7 +1321,7 @@ function DropdownMenuSubTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx9(ArrowRightIcon, { className: "ml-auto" })
+        /* @__PURE__ */ jsx11(ArrowRightIcon, { className: "ml-auto" })
       ]
     }
   );
@@ -1165,13 +1332,13 @@ function DropdownMenuSubContent({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx11(
     DropdownMenuPrimitive.SubContent,
     {
       asChild: true,
       "data-slot": "dropdown-menu-sub-content",
       ...props,
-      children: /* @__PURE__ */ jsx9(
+      children: /* @__PURE__ */ jsx11(
         MenuSurface,
         {
           "data-slot": "dropdown-menu-sub-content",
@@ -1188,7 +1355,7 @@ function DropdownMenuSubContent({
 }
 
 // src/components/input/input.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var inputVariantClassNames = {
   default: "h-8 rounded-[6px] px-3 py-0 text-sm leading-[1.3]",
   lg: "h-12 rounded-[8px] px-4 py-3 text-base leading-[1.3]",
@@ -1204,7 +1371,7 @@ function Input({
   ...props
 }) {
   const resolvedVariant = variant ?? (size === "sm" ? "sm" : "default");
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx12(
     "input",
     {
       type,
@@ -1223,7 +1390,7 @@ function Input({
 }
 
 // src/components/mention-pill/mention-pill.tsx
-import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
 var mentionPillTokenByKind = {
   issue: "var(--rich-text-mention-issue)",
   session: "var(--rich-text-mention-session)",
@@ -1251,7 +1418,7 @@ function MentionPill({
   const dataKind = mentionPillDataKindByKind[kind];
   const iconSizeClassName = isFile ? "size-3.5" : "size-4";
   const iconShellClassName = isFile ? "size-3.5" : "size-[18px]";
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "span",
     {
       className: cn(
@@ -1268,7 +1435,7 @@ function MentionPill({
       },
       ...props,
       children: [
-        /* @__PURE__ */ jsxs5(
+        /* @__PURE__ */ jsxs6(
           "span",
           {
             "aria-hidden": removable ? void 0 : true,
@@ -1277,7 +1444,7 @@ function MentionPill({
               iconShellClassName
             ),
             children: [
-              /* @__PURE__ */ jsx11(
+              /* @__PURE__ */ jsx13(
                 Icon,
                 {
                   className: cn(
@@ -1287,7 +1454,7 @@ function MentionPill({
                   )
                 }
               ),
-              removable ? /* @__PURE__ */ jsx11(
+              removable ? /* @__PURE__ */ jsx13(
                 "button",
                 {
                   "aria-label": removeButtonProps?.["aria-label"],
@@ -1297,15 +1464,15 @@ function MentionPill({
                     "absolute top-1/2 left-1/2 inline-flex size-5 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-sm text-[var(--text-secondary)] opacity-0 transition-opacity group-hover:opacity-100 hover:bg-transparency-block hover:text-[var(--text-primary)] focus-visible:opacity-100",
                     removeButtonProps?.className
                   ),
-                  children: /* @__PURE__ */ jsx11(CloseIcon, { className: "size-3.5" })
+                  children: /* @__PURE__ */ jsx13(CloseIcon, { className: "size-3.5" })
                 }
               ) : null
             ]
           }
         ),
-        /* @__PURE__ */ jsxs5("span", { className: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap", children: [
-          /* @__PURE__ */ jsx11("span", { children: label }),
-          summary ? /* @__PURE__ */ jsxs5("span", { className: "text-current", children: [
+        /* @__PURE__ */ jsxs6("span", { className: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap", children: [
+          /* @__PURE__ */ jsx13("span", { children: label }),
+          summary ? /* @__PURE__ */ jsxs6("span", { className: "text-current", children: [
             " ",
             summary
           ] }) : null
@@ -1317,26 +1484,26 @@ function MentionPill({
 
 // src/components/popover/popover.tsx
 import { Popover as PopoverPrimitive } from "radix-ui";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function Popover({
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+  return /* @__PURE__ */ jsx14(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
 }
 function PopoverTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+  return /* @__PURE__ */ jsx14(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
 }
 function PopoverPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(PopoverPrimitive.Portal, { "data-slot": "popover-portal", ...props });
+  return /* @__PURE__ */ jsx14(PopoverPrimitive.Portal, { "data-slot": "popover-portal", ...props });
 }
 function PopoverClose({
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(PopoverPrimitive.Close, { "data-slot": "popover-close", ...props });
+  return /* @__PURE__ */ jsx14(PopoverPrimitive.Close, { "data-slot": "popover-close", ...props });
 }
 function PopoverContent({
   className,
@@ -1344,7 +1511,7 @@ function PopoverContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(PopoverPortal, { children: /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx14(PopoverPortal, { children: /* @__PURE__ */ jsx14(
     PopoverPrimitive.Content,
     {
       "data-slot": "popover-content",
@@ -1362,18 +1529,18 @@ function PopoverContent({
 function PopoverAnchor({
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
+  return /* @__PURE__ */ jsx14(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
 }
 
 // src/components/resizable/resizable.tsx
 import * as ResizablePrimitive from "react-resizable-panels";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function ResizablePanelGroup({
   className,
   orientation = "horizontal",
   ...props
 }) {
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx15(
     ResizablePrimitive.Group,
     {
       "data-orientation": orientation,
@@ -1388,14 +1555,14 @@ function ResizablePanelGroup({
   );
 }
 function ResizablePanel(props) {
-  return /* @__PURE__ */ jsx13(ResizablePrimitive.Panel, { "data-slot": "resizable-panel", ...props });
+  return /* @__PURE__ */ jsx15(ResizablePrimitive.Panel, { "data-slot": "resizable-panel", ...props });
 }
 function ResizableHandle({
   className,
   withHandle,
   ...props
 }) {
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx15(
     ResizablePrimitive.Separator,
     {
       "data-slot": "resizable-handle",
@@ -1404,57 +1571,113 @@ function ResizableHandle({
         className
       ),
       ...props,
-      children: withHandle ? /* @__PURE__ */ jsx13("div", { className: "z-10 flex items-center justify-center rounded-full bg-border/85 opacity-0 transition-[background-color,opacity] group-hover:bg-border group-hover:opacity-100 group-focus-visible:bg-border group-focus-visible:opacity-100 group-aria-[orientation=horizontal]:h-[3px] group-aria-[orientation=horizontal]:w-10 group-aria-[orientation=vertical]:h-10 group-aria-[orientation=vertical]:w-[3px]" }) : null
+      children: withHandle ? /* @__PURE__ */ jsx15("div", { className: "z-10 flex items-center justify-center rounded-full bg-border/85 opacity-0 transition-[background-color,opacity] group-hover:bg-border group-hover:opacity-100 group-focus-visible:bg-border group-focus-visible:opacity-100 group-aria-[orientation=horizontal]:h-[3px] group-aria-[orientation=horizontal]:w-10 group-aria-[orientation=vertical]:h-10 group-aria-[orientation=vertical]:w-[3px]" }) : null
     }
   );
 }
 
 // src/components/scroll-area/scroll-area.tsx
+import * as React4 from "react";
 import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
-import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 function ScrollArea({
   className,
   children,
+  viewportClassName,
+  viewportContentStyle,
+  viewportProps,
+  viewportRef,
+  viewportTestId,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     ScrollAreaPrimitive.Root,
     {
       "data-slot": "scroll-area",
       className: cn("group/scroll-area relative", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsxs7(
           ScrollAreaPrimitive.Viewport,
           {
+            ...viewportProps,
             "data-slot": "scroll-area-viewport",
-            className: "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1",
-            children
+            "data-testid": viewportTestId,
+            ref: viewportRef,
+            className: cn(
+              "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1",
+              viewportClassName
+            ),
+            children: [
+              viewportContentStyle ? /* @__PURE__ */ jsx16(ScrollAreaViewportContentStyleBridge, { style: viewportContentStyle }) : null,
+              children
+            ]
           }
         ),
-        /* @__PURE__ */ jsx14(ScrollBar, {}),
-        /* @__PURE__ */ jsx14(ScrollAreaPrimitive.Corner, {})
+        /* @__PURE__ */ jsx16(ScrollBar, {}),
+        /* @__PURE__ */ jsx16(ScrollAreaPrimitive.Corner, {})
       ]
     }
   );
 }
+function ScrollAreaViewportContentStyleBridge({
+  style
+}) {
+  const markerRef = React4.useRef(null);
+  React4.useLayoutEffect(() => {
+    const contentElement = markerRef.current?.parentElement;
+    if (!contentElement) {
+      return;
+    }
+    const previousValues = /* @__PURE__ */ new Map();
+    for (const [property, value] of Object.entries(style)) {
+      const cssProperty = toCssPropertyName(property);
+      previousValues.set(cssProperty, {
+        value: contentElement.style.getPropertyValue(cssProperty),
+        priority: contentElement.style.getPropertyPriority(cssProperty)
+      });
+      if (value === void 0 || value === null) {
+        contentElement.style.removeProperty(cssProperty);
+      } else {
+        contentElement.style.setProperty(cssProperty, String(value));
+      }
+    }
+    return () => {
+      for (const [cssProperty, previous] of previousValues) {
+        if (previous.value) {
+          contentElement.style.setProperty(
+            cssProperty,
+            previous.value,
+            previous.priority
+          );
+        } else {
+          contentElement.style.removeProperty(cssProperty);
+        }
+      }
+    };
+  }, [style]);
+  return /* @__PURE__ */ jsx16("span", { ref: markerRef, "data-slot": "scroll-area-content-style-bridge", hidden: true });
+}
+function toCssPropertyName(property) {
+  return property.startsWith("--") ? property : property.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+}
 function ScrollBar({
   className,
   orientation = "vertical",
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx16(
     ScrollAreaPrimitive.ScrollAreaScrollbar,
     {
       "data-slot": "scroll-area-scrollbar",
       "data-orientation": orientation,
       orientation,
       className: cn(
-        "group/scrollbar absolute flex touch-none p-0 opacity-0 transition-opacity duration-150 select-none group-hover/scroll-area:opacity-100 group-focus-within/scroll-area:opacity-100 data-horizontal:right-2 data-horizontal:bottom-2 data-horizontal:left-2 data-horizontal:h-1 data-horizontal:flex-col data-vertical:top-2 data-vertical:right-2 data-vertical:bottom-2 data-vertical:w-1",
+        "group/scrollbar absolute z-10 flex touch-none p-[2px] opacity-0 transition-opacity duration-150 select-none group-hover/scroll-area:opacity-100 group-focus-within/scroll-area:opacity-100 data-[orientation=horizontal]:right-0 data-[orientation=horizontal]:bottom-0 data-[orientation=horizontal]:left-0 data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:top-0 data-[orientation=vertical]:right-0 data-[orientation=vertical]:bottom-0 data-[orientation=vertical]:w-2",
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx14(
+      children: /* @__PURE__ */ jsx16(
         ScrollAreaPrimitive.ScrollAreaThumb,
         {
           "data-slot": "scroll-area-thumb",
@@ -1467,17 +1690,17 @@ function ScrollBar({
 
 // src/components/select/select.tsx
 import { Select as SelectPrimitive } from "radix-ui";
-import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
 function Select({
   ...props
 }) {
-  return /* @__PURE__ */ jsx15(SelectPrimitive.Root, { "data-slot": "select", ...props });
+  return /* @__PURE__ */ jsx17(SelectPrimitive.Root, { "data-slot": "select", ...props });
 }
 function SelectGroup({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx17(
     SelectPrimitive.Group,
     {
       "data-slot": "select-group",
@@ -1489,27 +1712,38 @@ function SelectGroup({
 function SelectValue({
   ...props
 }) {
-  return /* @__PURE__ */ jsx15(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+  return /* @__PURE__ */ jsx17(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
 }
 function SelectTrigger({
   className,
   size = "default",
+  variant = "default",
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     SelectPrimitive.Trigger,
     {
       "data-slot": "select-trigger",
       "data-size": size,
+      "data-variant": variant,
       className: cn(
-        "flex w-fit cursor-pointer items-center justify-between gap-1.5 rounded-lg border border-transparent bg-[var(--transparency-block)] py-2 pr-2 pl-2.5 text-sm text-[var(--text-primary)] whitespace-nowrap transition-colors outline-none select-none hover:bg-[var(--transparency-hover)] focus:bg-[var(--transparency-hover)] focus-visible:border-transparent focus-visible:bg-[var(--transparency-hover)] focus-visible:ring-0 disabled:cursor-not-allowed disabled:bg-[var(--transparency-block)] disabled:text-[var(--text-disabled)] disabled:opacity-100 aria-invalid:border-[var(--state-danger)] aria-invalid:bg-[var(--transparency-block)] aria-invalid:hover:bg-[var(--transparency-hover)] aria-invalid:focus:bg-[var(--transparency-hover)] aria-invalid:focus-visible:bg-[var(--transparency-hover)] aria-invalid:ring-0 aria-invalid:shadow-none data-placeholder:text-[var(--text-placeholder)] data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&[data-state=open]>svg]:rotate-180 [&>svg]:transition-transform [&>svg]:duration-200 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        variant === "button" ? buttonVariants({ variant: "default", size }) : "flex w-fit cursor-pointer items-center justify-between gap-1.5 rounded-lg border border-transparent bg-[var(--transparency-block)] py-2 pr-2 pl-2.5 text-sm text-[var(--text-primary)] whitespace-nowrap transition-colors outline-none select-none hover:bg-[var(--transparency-hover)] focus:bg-[var(--transparency-hover)] focus-visible:border-transparent focus-visible:bg-[var(--transparency-hover)] focus-visible:ring-0 disabled:cursor-not-allowed disabled:bg-[var(--transparency-block)] disabled:text-[var(--text-disabled)] disabled:opacity-100 aria-invalid:border-[var(--state-danger)] aria-invalid:bg-[var(--transparency-block)] aria-invalid:hover:bg-[var(--transparency-hover)] aria-invalid:focus:bg-[var(--transparency-hover)] aria-invalid:focus-visible:bg-[var(--transparency-hover)] aria-invalid:ring-0 aria-invalid:shadow-none data-placeholder:text-[var(--text-placeholder)] data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "[&[data-state=open]>svg]:rotate-180 [&>svg]:transition-transform [&>svg]:duration-200",
         className
       ),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx15(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx15(ChevronDownIcon, { className: "pointer-events-none size-4 text-[var(--text-secondary)]" }) })
+        /* @__PURE__ */ jsx17(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx17(
+          ChevronDownIcon,
+          {
+            className: cn(
+              "pointer-events-none size-4",
+              variant === "button" ? "text-current" : "text-[var(--text-secondary)]"
+            )
+          }
+        ) })
       ]
     }
   );
@@ -1522,7 +1756,7 @@ function SelectContent({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx15(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx17(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx17(
     SelectPrimitive.Content,
     {
       asChild: true,
@@ -1531,7 +1765,7 @@ function SelectContent({
       position,
       align,
       ...props,
-      children: /* @__PURE__ */ jsxs7(
+      children: /* @__PURE__ */ jsxs8(
         MenuSurface,
         {
           "data-slot": "select-content",
@@ -1542,8 +1776,8 @@ function SelectContent({
           ),
           style: { zIndex: "var(--z-popover)", ...style },
           children: [
-            /* @__PURE__ */ jsx15(SelectScrollUpButton, {}),
-            /* @__PURE__ */ jsx15(
+            /* @__PURE__ */ jsx17(SelectScrollUpButton, {}),
+            /* @__PURE__ */ jsx17(
               SelectPrimitive.Viewport,
               {
                 "data-position": position,
@@ -1553,7 +1787,7 @@ function SelectContent({
                 children
               }
             ),
-            /* @__PURE__ */ jsx15(SelectScrollDownButton, {})
+            /* @__PURE__ */ jsx17(SelectScrollDownButton, {})
           ]
         }
       )
@@ -1564,7 +1798,7 @@ function SelectLabel({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx17(
     SelectPrimitive.Label,
     {
       "data-slot": "select-label",
@@ -1580,7 +1814,7 @@ function SelectSplitLayout({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx17(
     "div",
     {
       "data-slot": "select-split-layout",
@@ -1596,7 +1830,7 @@ function SelectSplitColumn({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx17(
     "div",
     {
       "data-slot": "select-split-column",
@@ -1609,7 +1843,7 @@ function SelectSplitColumnLabel({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx17(
     "div",
     {
       "data-slot": "select-split-column-label",
@@ -1625,7 +1859,7 @@ function SelectSplitColumnItems({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx17(
     "div",
     {
       "data-slot": "select-split-column-items",
@@ -1641,7 +1875,7 @@ function SelectSplitDivider({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx17(
     "div",
     {
       "aria-hidden": "true",
@@ -1657,17 +1891,24 @@ function SelectSplitDivider({
 function SelectItem({
   className,
   children,
+  forceSelectedIndicator = false,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     SelectPrimitive.Item,
     {
       "data-slot": "select-item",
       className: cn("w-full", menuItemWithIndicatorClassName, className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx15("span", { className: menuItemIndicatorClassName, children: /* @__PURE__ */ jsx15(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx15(CheckIcon, { className: "pointer-events-none" }) }) }),
-        /* @__PURE__ */ jsx15(SelectPrimitive.ItemText, { children })
+        /* @__PURE__ */ jsx17("span", { className: menuItemIndicatorClassName, children: forceSelectedIndicator ? /* @__PURE__ */ jsx17(
+          CheckIcon,
+          {
+            className: "pointer-events-none",
+            "data-slot": "select-item-forced-indicator"
+          }
+        ) : /* @__PURE__ */ jsx17(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx17(CheckIcon, { className: "pointer-events-none" }) }) }),
+        /* @__PURE__ */ jsx17(SelectPrimitive.ItemText, { children })
       ]
     }
   );
@@ -1676,7 +1917,7 @@ function SelectSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx17(
     SelectPrimitive.Separator,
     {
       "data-slot": "select-separator",
@@ -1692,7 +1933,7 @@ function SelectScrollUpButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx17(
     SelectPrimitive.ScrollUpButton,
     {
       "data-slot": "select-scroll-up-button",
@@ -1701,7 +1942,7 @@ function SelectScrollUpButton({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx15(ChevronUpIcon, {})
+      children: /* @__PURE__ */ jsx17(ChevronUpIcon, {})
     }
   );
 }
@@ -1709,7 +1950,7 @@ function SelectScrollDownButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx17(
     SelectPrimitive.ScrollDownButton,
     {
       "data-slot": "select-scroll-down-button",
@@ -1718,21 +1959,21 @@ function SelectScrollDownButton({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx15(ChevronDownIcon, {})
+      children: /* @__PURE__ */ jsx17(ChevronDownIcon, {})
     }
   );
 }
 
 // src/components/separator/separator.tsx
 import { Separator as SeparatorPrimitive } from "radix-ui";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function Separator2({
   className,
   orientation = "horizontal",
   decorative = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx18(
     SeparatorPrimitive.Root,
     {
       "data-slot": "separator",
@@ -1747,17 +1988,127 @@ function Separator2({
   );
 }
 
+// src/components/section-tabs/section-tabs.tsx
+import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+function SectionTabs({
+  tabs,
+  value,
+  onValueChange,
+  ariaLabel,
+  className,
+  testId
+}) {
+  return /* @__PURE__ */ jsx19(
+    "div",
+    {
+      "aria-label": ariaLabel,
+      className: cn("flex min-w-0 items-center gap-5", className),
+      "data-slot": "section-tabs",
+      "data-testid": testId,
+      role: "tablist",
+      children: tabs.map((tab) => {
+        const isActive = value === tab.value;
+        return /* @__PURE__ */ jsxs9(
+          "button",
+          {
+            "aria-selected": isActive,
+            className: cn(
+              "relative inline-flex h-5 shrink-0 items-center gap-1.5 whitespace-nowrap border-0 bg-transparent p-0 text-[15px] font-semibold leading-5 tracking-[0] text-[var(--text-secondary)] transition-colors duration-150 hover:text-[var(--text-primary)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--border-focus)]",
+              isActive && "text-[var(--text-primary)]"
+            ),
+            "data-active": isActive ? "true" : "false",
+            "data-slot": "section-tabs-tab",
+            "data-testid": tab.testId,
+            role: "tab",
+            type: "button",
+            onClick: () => onValueChange(tab.value),
+            children: [
+              /* @__PURE__ */ jsx19("span", { className: "min-w-0 truncate", children: tab.label }),
+              tab.count !== void 0 ? /* @__PURE__ */ jsx19("span", { className: "text-[15px] font-semibold leading-5 text-[inherit]", children: tab.count }) : null
+            ]
+          },
+          tab.value
+        );
+      })
+    }
+  );
+}
+
+// src/components/shortcut-badge/shortcut-badge.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+function ShortcutBadge({ className, ...props }) {
+  return /* @__PURE__ */ jsx20(
+    "kbd",
+    {
+      "data-slot": "shortcut-badge",
+      className: cn(
+        "inline-flex h-5 min-w-0 max-w-full shrink-0 items-center justify-center overflow-hidden rounded-[4px] bg-[color-mix(in_srgb,var(--transparency-block)_72%,transparent)] px-1.5 py-1 font-[inherit] text-[11px] leading-none font-semibold whitespace-nowrap text-[var(--text-tertiary)] not-italic [font-variant:normal] [text-overflow:ellipsis]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/sonner/sonner.tsx
+import {
+  Toaster as SonnerToaster,
+  toast
+} from "sonner";
+import { jsx as jsx21 } from "react/jsx-runtime";
+function Toaster({ toastOptions, style, ...props }) {
+  return /* @__PURE__ */ jsx21(
+    SonnerToaster,
+    {
+      closeButton: true,
+      expand: false,
+      gap: 8,
+      position: "top-right",
+      visibleToasts: 4,
+      icons: {
+        error: /* @__PURE__ */ jsx21(FailedFilledIcon, { className: "size-4" }),
+        info: /* @__PURE__ */ jsx21(WarningLinedIcon, { className: "size-4" }),
+        loading: /* @__PURE__ */ jsx21(LoadingIcon, { className: "size-4 animate-spin" }),
+        success: /* @__PURE__ */ jsx21(SuccessFilledIcon, { className: "size-4" }),
+        warning: /* @__PURE__ */ jsx21(WarningFilledIcon, { className: "size-4" })
+      },
+      style: {
+        "--normal-bg": "var(--background-fronted)",
+        "--normal-border": "var(--line-2)",
+        "--normal-text": "var(--text-primary)",
+        "--border-radius": "8px",
+        zIndex: "var(--z-toast)",
+        ...style
+      },
+      toastOptions: {
+        ...toastOptions,
+        classNames: {
+          toast: "group pointer-events-auto min-h-14 rounded-[8px] border border-[var(--line-2)] bg-[var(--background-fronted)] px-3.5 py-3 text-[var(--text-primary)] shadow-[0_14px_40px_var(--shadow-elevated)]",
+          title: "text-sm font-semibold leading-5 text-[var(--text-primary)]",
+          description: "mt-0.5 text-xs leading-5 text-[var(--text-secondary)]",
+          actionButton: "h-7 rounded-[6px] bg-[var(--text-primary)] px-2.5 text-xs font-normal text-[var(--text-inverted)] transition-colors hover:bg-[var(--text-primary-hover)]",
+          cancelButton: "h-7 rounded-[6px] bg-[var(--transparency-block)] px-2.5 text-xs font-normal text-[var(--text-primary)] transition-colors hover:bg-[var(--transparency-hover)]",
+          closeButton: "border-[var(--line-2)] bg-[var(--background-fronted)] text-[var(--text-secondary)] hover:bg-[var(--transparency-hover)] hover:text-[var(--text-primary)]",
+          icon: "text-[var(--accent)]",
+          ...toastOptions?.classNames
+        }
+      },
+      ...props
+    }
+  );
+}
+
 // src/components/spinner/spinner.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function Spinner({
   className,
   size = 16,
-  strokeWidth = 3,
+  strokeWidth = 2,
   style,
   testId,
   trackColor
 }) {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx22(
     LoadingIcon,
     {
       "data-slot": "spinner",
@@ -1776,9 +2127,9 @@ function Spinner({
 }
 
 // src/components/status-dot/status-dot.tsx
-import { cva as cva3 } from "class-variance-authority";
-import { jsx as jsx18 } from "react/jsx-runtime";
-var statusDotVariants = cva3("inline-flex shrink-0 rounded-full", {
+import { cva as cva4 } from "class-variance-authority";
+import { jsx as jsx23 } from "react/jsx-runtime";
+var statusDotVariants = cva4("inline-flex shrink-0 rounded-full", {
   variants: {
     tone: {
       neutral: "bg-muted-foreground/70",
@@ -1811,7 +2162,7 @@ function StatusDot({
   title,
   className
 }) {
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx23(
     "span",
     {
       "aria-hidden": ariaLabel ? void 0 : true,
@@ -1829,13 +2180,13 @@ function StatusDot({
 
 // src/components/switch/switch.tsx
 import { Switch as SwitchPrimitive } from "radix-ui";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function Switch({
   className,
   size = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx24(
     SwitchPrimitive.Root,
     {
       "data-slot": "switch",
@@ -1845,7 +2196,7 @@ function Switch({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx19(
+      children: /* @__PURE__ */ jsx24(
         SwitchPrimitive.Thumb,
         {
           "data-slot": "switch-thumb",
@@ -1857,9 +2208,9 @@ function Switch({
 }
 
 // src/components/textarea/textarea.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function Textarea({ className, ...props }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx25(
     "textarea",
     {
       "data-slot": "textarea",
@@ -1873,12 +2224,18 @@ function Textarea({ className, ...props }) {
 }
 
 // src/components/toast/toast.tsx
-import * as React4 from "react";
+import * as React5 from "react";
 import { Toast as ToastPrimitive } from "radix-ui";
-import { cva as cva4 } from "class-variance-authority";
-import { jsx as jsx21, jsxs as jsxs8 } from "react/jsx-runtime";
-var ToastProvider = ToastPrimitive.Provider;
-var ToastVisualContext = React4.createContext(null);
+import { cva as cva5 } from "class-variance-authority";
+import { jsx as jsx26, jsxs as jsxs10 } from "react/jsx-runtime";
+var toastDefaultDurationMs = 3e3;
+function ToastProvider({
+  duration = toastDefaultDurationMs,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx26(ToastPrimitive.Provider, { duration, ...props });
+}
+var ToastVisualContext = React5.createContext(null);
 var toastStatusIconByVariant = {
   destructive: FailedFilledIcon,
   success: SuccessFilledIcon
@@ -1902,13 +2259,13 @@ function formatToastText(children) {
   if (typeof children === "string") {
     return stripToastTrailingSentencePunctuation(children);
   }
-  const flatChildren = React4.Children.toArray(children);
+  const flatChildren = React5.Children.toArray(children);
   if (flatChildren.length === 1 && typeof flatChildren[0] === "string") {
     return stripToastTrailingSentencePunctuation(flatChildren[0]);
   }
   return children;
 }
-var toastVariants = cva4(
+var toastVariants = cva5(
   "group pointer-events-auto relative flex min-h-8 min-w-0 max-w-[min(92vw,420px)] items-center justify-center rounded-[8px] px-3 py-1.5 text-center text-sm font-normal leading-normal shadow-none transition-all data-closed:fade-out-80 data-closed:slide-out-to-top-full data-open:slide-in-from-top-full data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none",
   {
     variants: {
@@ -1934,7 +2291,7 @@ function ToastRoot({
   ...props
 }) {
   const isDestructive = variant === "destructive";
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx26(
     ToastPrimitive.Root,
     {
       "aria-busy": busy,
@@ -1951,7 +2308,7 @@ function ToastRoot({
         ...style
       },
       ...props,
-      children: /* @__PURE__ */ jsx21(ToastVisualContext.Provider, { value: { busy, variant }, children: /* @__PURE__ */ jsx21("span", { className: "flex min-w-0 max-w-full flex-col items-center justify-center whitespace-normal break-words text-center", children }) })
+      children: /* @__PURE__ */ jsx26(ToastVisualContext.Provider, { value: { busy, variant }, children: /* @__PURE__ */ jsx26("span", { className: "flex min-w-0 max-w-full flex-col items-center justify-center whitespace-normal break-words text-center", children }) })
     }
   );
 }
@@ -1960,9 +2317,9 @@ function ToastTitle({
   children,
   ...props
 }) {
-  const toastVisual = React4.useContext(ToastVisualContext);
+  const toastVisual = React5.useContext(ToastVisualContext);
   const StatusIcon = toastVisual?.variant && hasToastStatusIcon(toastVisual.variant) ? toastStatusIconByVariant[toastVisual.variant] : null;
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs10(
     ToastPrimitive.Title,
     {
       "data-slot": "toast-title",
@@ -1972,16 +2329,16 @@ function ToastTitle({
       ),
       ...props,
       children: [
-        toastVisual?.busy ? /* @__PURE__ */ jsx21(
+        toastVisual?.busy ? /* @__PURE__ */ jsx26(
           Spinner,
           {
             className: "shrink-0 text-current",
             size: 16,
-            strokeWidth: 3,
+            strokeWidth: 2,
             trackColor: "color-mix(in srgb, currentColor 28%, transparent)"
           }
-        ) : StatusIcon ? /* @__PURE__ */ jsx21(StatusIcon, { className: "size-4 shrink-0 text-current" }) : null,
-        /* @__PURE__ */ jsx21("span", { className: "min-w-0 break-words", children: formatToastText(children) })
+        ) : StatusIcon ? /* @__PURE__ */ jsx26(StatusIcon, { className: "size-4 shrink-0 text-current" }) : null,
+        /* @__PURE__ */ jsx26("span", { className: "min-w-0 break-words", children: formatToastText(children) })
       ]
     }
   );
@@ -1990,7 +2347,7 @@ function ToastDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx26(
     ToastPrimitive.Description,
     {
       "data-slot": "toast-description",
@@ -2006,7 +2363,7 @@ function ToastClose({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx26(
     ToastPrimitive.Close,
     {
       "data-slot": "toast-close",
@@ -2015,7 +2372,7 @@ function ToastClose({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx21(CloseIcon, { className: "size-4" })
+      children: /* @__PURE__ */ jsx26(CloseIcon, { className: "size-4" })
     }
   );
 }
@@ -2024,7 +2381,7 @@ function ToastViewport({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx26(
     ToastPrimitive.Viewport,
     {
       "data-slot": "toast-viewport",
@@ -2040,12 +2397,12 @@ function ToastViewport({
 
 // src/components/tooltip/tooltip.tsx
 import { Tooltip as TooltipPrimitive } from "radix-ui";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function TooltipProvider({
   delayDuration = 0,
   ...props
 }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx27(
     TooltipPrimitive.Provider,
     {
       "data-slot": "tooltip-provider",
@@ -2057,25 +2414,26 @@ function TooltipProvider({
 function Tooltip({
   ...props
 }) {
-  return /* @__PURE__ */ jsx22(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
+  return /* @__PURE__ */ jsx27(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
 }
 function TooltipTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx22(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+  return /* @__PURE__ */ jsx27(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
 function TooltipPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx22(TooltipPrimitive.Portal, { "data-slot": "tooltip-portal", ...props });
+  return /* @__PURE__ */ jsx27(TooltipPrimitive.Portal, { "data-slot": "tooltip-portal", ...props });
 }
 function TooltipContent({
   className,
   sideOffset = 8,
   children,
+  style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx22(TooltipPortal, { children: /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx27(TooltipPortal, { children: /* @__PURE__ */ jsx27(
     TooltipPrimitive.Content,
     {
       "data-slot": "tooltip-content",
@@ -2084,7 +2442,7 @@ function TooltipContent({
         "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-2 rounded-md border border-[var(--border-1)] bg-[var(--background-fronted)] px-2 py-1 text-sm leading-[1.3] text-popover-foreground shadow-soft outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 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
       ),
-      style: { zIndex: "var(--z-popover)" },
+      style: { zIndex: "var(--z-tooltip)", ...style },
       ...props,
       children
     }
@@ -2092,8 +2450,8 @@ function TooltipContent({
 }
 
 // src/components/underline-tabs/underline-tabs.tsx
-import { useEffect as useEffect3, useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState as useState3 } from "react";
-import { jsx as jsx23, jsxs as jsxs9 } from "react/jsx-runtime";
+import { useEffect as useEffect3, useLayoutEffect as useLayoutEffect3, useRef as useRef3, useState as useState3 } from "react";
+import { jsx as jsx28, jsxs as jsxs11 } from "react/jsx-runtime";
 function UnderlineTabs({
   tabs,
   value,
@@ -2108,15 +2466,15 @@ function UnderlineTabs({
   scrollRightTestId,
   preventMouseDownDefault = false
 }) {
-  const viewportRef = useRef2(null);
-  const rowRef = useRef2(null);
-  const buttonRefs = useRef2({});
+  const viewportRef = useRef3(null);
+  const rowRef = useRef3(null);
+  const buttonRefs = useRef3({});
   const [indicatorStyle, setIndicatorStyle] = useState3({ left: 0, width: 0 });
   const [overflow, setOverflow] = useState3({
     canScrollLeft: false,
     canScrollRight: false
   });
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     const row = rowRef.current;
     const button = buttonRefs.current[value];
     if (!row || !button) {
@@ -2176,7 +2534,7 @@ function UnderlineTabs({
       behavior: "smooth"
     });
   };
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       "aria-label": ariaLabel,
@@ -2188,7 +2546,7 @@ function UnderlineTabs({
       "data-testid": testId,
       role: "tablist",
       children: [
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx28(
           "div",
           {
             ref: viewportRef,
@@ -2202,7 +2560,7 @@ function UnderlineTabs({
             "data-can-scroll-right": overflow.canScrollRight ? "true" : "false",
             "data-slot": "underline-tabs-viewport",
             "data-testid": viewportTestId,
-            children: /* @__PURE__ */ jsxs9(
+            children: /* @__PURE__ */ jsxs11(
               "div",
               {
                 ref: rowRef,
@@ -2210,7 +2568,7 @@ function UnderlineTabs({
                 children: [
                   tabs.map((tab) => {
                     const isActive = value === tab.value;
-                    return /* @__PURE__ */ jsxs9(
+                    return /* @__PURE__ */ jsxs11(
                       "button",
                       {
                         ref: (element) => {
@@ -2223,7 +2581,7 @@ function UnderlineTabs({
                         "aria-selected": isActive,
                         className: cn(
                           "relative inline-flex h-6 shrink-0 items-center gap-1.5 whitespace-nowrap border-0 bg-transparent p-0 text-[13px] font-semibold leading-6 text-[var(--text-secondary)] transition-colors hover:text-[var(--text-primary)] focus-visible:outline-none",
-                          isActive && "text-primary"
+                          isActive && "text-[var(--accent)]"
                         ),
                         "data-active": isActive ? "true" : "false",
                         "data-slot": "underline-tabs-tab",
@@ -2233,18 +2591,18 @@ function UnderlineTabs({
                         onClick: () => onValueChange(tab.value),
                         onMouseDown: preventMouseDownDefault ? (event) => event.preventDefault() : void 0,
                         children: [
-                          /* @__PURE__ */ jsx23("span", { children: tab.label }),
-                          tab.count !== void 0 ? /* @__PURE__ */ jsx23("span", { className: "text-xs font-semibold leading-6 text-[inherit] opacity-[0.58]", children: tab.count }) : null
+                          /* @__PURE__ */ jsx28("span", { children: tab.label }),
+                          tab.count !== void 0 ? /* @__PURE__ */ jsx28("span", { className: "text-xs font-semibold leading-6 text-[inherit]", children: tab.count }) : null
                         ]
                       },
                       tab.value
                     );
                   }),
-                  /* @__PURE__ */ jsx23(
+                  /* @__PURE__ */ jsx28(
                     "div",
                     {
                       "aria-hidden": true,
-                      className: "absolute bottom-0 left-0 z-[1] h-0.5 rounded-[1px] bg-primary transition-[transform,width] duration-[220ms] ease-[cubic-bezier(0.4,0,0.2,1)] motion-reduce:transition-none",
+                      className: "absolute bottom-0 left-0 z-[1] h-0.5 rounded-[1px] bg-[var(--accent)] transition-[transform,width] duration-[220ms] ease-[cubic-bezier(0.4,0,0.2,1)] motion-reduce:transition-none",
                       "data-slot": "underline-tabs-indicator",
                       style: {
                         transform: `translateX(${indicatorStyle.left}px)`,
@@ -2257,7 +2615,7 @@ function UnderlineTabs({
             )
           }
         ),
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx28(
           "button",
           {
             "aria-label": scrollLeftLabel,
@@ -2268,10 +2626,10 @@ function UnderlineTabs({
             disabled: !overflow.canScrollLeft,
             type: "button",
             onClick: () => scrollTabs("left"),
-            children: /* @__PURE__ */ jsx23(ArrowLeftIcon, { size: 16 })
+            children: /* @__PURE__ */ jsx28(ArrowLeftIcon, { size: 16 })
           }
         ),
-        /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx28(
           "button",
           {
             "aria-label": scrollRightLabel,
@@ -2282,7 +2640,7 @@ function UnderlineTabs({
             disabled: !overflow.canScrollRight,
             type: "button",
             onClick: () => scrollTabs("right"),
-            children: /* @__PURE__ */ jsx23(ArrowRightIcon, { size: 16 })
+            children: /* @__PURE__ */ jsx28(ArrowRightIcon, { size: 16 })
           }
         )
       ]
@@ -2291,9 +2649,9 @@ function UnderlineTabs({
 }
 
 // src/components/viewport-menu-surface/viewport-menu-surface.tsx
-import * as React5 from "react";
+import * as React6 from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var VIEWPORT_MENU_PADDING = 12;
 var MENU_BOUNDARY_PADDING = 8;
 function clampMenuCoordinate(origin, size, viewportExtent, padding) {
@@ -2396,7 +2754,7 @@ function assignRef(ref, value) {
 function callHandler(handler, event) {
   handler?.(event);
 }
-var ViewportMenuSurface = React5.forwardRef(function ViewportMenuSurface2({
+var ViewportMenuSurface = React6.forwardRef(function ViewportMenuSurface2({
   open,
   placement,
   children,
@@ -2412,16 +2770,16 @@ var ViewportMenuSurface = React5.forwardRef(function ViewportMenuSurface2({
   className,
   ...rest
 }, forwardedRef) {
-  const surfaceRef = React5.useRef(null);
-  const [measuredSize, setMeasuredSize] = React5.useState(null);
-  const setRefs = React5.useCallback(
+  const surfaceRef = React6.useRef(null);
+  const [measuredSize, setMeasuredSize] = React6.useState(null);
+  const setRefs = React6.useCallback(
     (node) => {
       surfaceRef.current = node;
       assignRef(forwardedRef, node);
     },
     [forwardedRef]
   );
-  React5.useLayoutEffect(() => {
+  React6.useLayoutEffect(() => {
     if (!open) {
       setMeasuredSize(null);
       return;
@@ -2445,7 +2803,7 @@ var ViewportMenuSurface = React5.forwardRef(function ViewportMenuSurface2({
     observer.observe(element);
     return () => observer.disconnect();
   }, [open, placement]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (!open) {
       return;
     }
@@ -2502,7 +2860,7 @@ var ViewportMenuSurface = React5.forwardRef(function ViewportMenuSurface2({
     onDismiss,
     open
   ]);
-  const resolvedPosition = React5.useMemo(() => {
+  const resolvedPosition = React6.useMemo(() => {
     if (placement.type === "absolute") {
       const boundary2 = resolveMenuBoundaryFromPoint({
         x: placement.left,
@@ -2540,7 +2898,7 @@ var ViewportMenuSurface = React5.forwardRef(function ViewportMenuSurface2({
     return null;
   }
   return createPortal2(
-    /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsx29(
       MenuSurface,
       {
         ...rest,
@@ -2576,6 +2934,7 @@ var ViewportMenuSurface = React5.forwardRef(function ViewportMenuSurface2({
 export {
   badgeVariants,
   Badge,
+  BareIconButton,
   buttonVariants,
   Button,
   Card,
@@ -2598,6 +2957,16 @@ export {
   DialogDescription,
   ConfirmationDialog,
   DatePicker,
+  Drawer,
+  DrawerTrigger,
+  DrawerPortal,
+  DrawerClose,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
   menuSurfaceClassName,
   menuItemClassName,
   menuItemWithIndicatorClassName,
@@ -2647,6 +3016,10 @@ export {
   SelectScrollUpButton,
   SelectScrollDownButton,
   Separator2 as Separator,
+  SectionTabs,
+  ShortcutBadge,
+  toast,
+  Toaster,
   Spinner,
   statusDotVariants,
   StatusDot,
@@ -2667,4 +3040,4 @@ export {
   UnderlineTabs,
   ViewportMenuSurface
 };
-//# sourceMappingURL=chunk-D5Y4OBKX.js.map
+//# sourceMappingURL=chunk-YSWPZLZ4.js.map