@nextop-os/ui-system 0.0.28 → 0.0.29

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

@@ -14,7 +14,7 @@ import {
   SuccessFilledIcon,
   WarningFilledIcon,
   WarningLinedIcon
-} from "./chunk-3BPTHQCX.js";
+} from "./chunk-45BNCYIU.js";
 import {
   cn
 } from "./chunk-DGPY4WP3.js";
@@ -60,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: {
@@ -109,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",
@@ -123,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",
@@ -143,7 +181,7 @@ function Card({
   );
 }
 function CardHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       "data-slot": "card-header",
@@ -156,7 +194,7 @@ function CardHeader({ className, ...props }) {
   );
 }
 function CardTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       "data-slot": "card-title",
@@ -169,7 +207,7 @@ function CardTitle({ className, ...props }) {
   );
 }
 function CardDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       "data-slot": "card-description",
@@ -179,7 +217,7 @@ function CardDescription({ className, ...props }) {
   );
 }
 function CardAction({ className, ...props }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       "data-slot": "card-action",
@@ -192,7 +230,7 @@ function CardAction({ className, ...props }) {
   );
 }
 function CardContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       "data-slot": "card-content",
@@ -202,7 +240,7 @@ function CardContent({ className, ...props }) {
   );
 }
 function CardFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       "data-slot": "card-footer",
@@ -217,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",
@@ -231,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 })
         }
       )
     }
@@ -246,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
@@ -270,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",
@@ -283,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",
@@ -340,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,
       {
@@ -348,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" })
               ]
             }
           ) })
@@ -374,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",
@@ -403,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" }) })
       ]
     }
   );
@@ -412,7 +450,7 @@ function DialogTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     DialogPrimitive.Title,
     {
       "data-slot": "dialog-title",
@@ -428,7 +466,7 @@ function DialogDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     DialogPrimitive.Description,
     {
       "data-slot": "dialog-description",
@@ -442,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";
@@ -470,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(
@@ -492,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,
@@ -511,7 +549,7 @@ function ConfirmationDialog({
               children: cancelLabel
             }
           ),
-          hideConfirmButton ? null : /* @__PURE__ */ jsx6(
+          hideConfirmButton ? null : /* @__PURE__ */ jsx7(
             Button,
             {
               disabled: confirmBusy || confirmDisabled,
@@ -534,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",
@@ -738,7 +776,7 @@ var DatePicker = React2.forwardRef(
       triggerRef.current?.focus();
     };
     return /* @__PURE__ */ jsxs3(Fragment2, { children: [
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(
         "button",
         {
           ref: (node) => {
@@ -769,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(
@@ -787,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,
@@ -802,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,
@@ -818,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",
@@ -833,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,
@@ -854,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",
@@ -867,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",
@@ -889,33 +927,33 @@ DatePicker.displayName = "DatePicker";
 
 // src/components/drawer/drawer.tsx
 import { Drawer as DrawerPrimitive } from "vaul";
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 function Drawer({
   ...props
 }) {
-  return /* @__PURE__ */ jsx8(DrawerPrimitive.Root, { "data-slot": "drawer", ...props });
+  return /* @__PURE__ */ jsx9(DrawerPrimitive.Root, { "data-slot": "drawer", ...props });
 }
 function DrawerTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx8(DrawerPrimitive.Trigger, { "data-slot": "drawer-trigger", ...props });
+  return /* @__PURE__ */ jsx9(DrawerPrimitive.Trigger, { "data-slot": "drawer-trigger", ...props });
 }
 function DrawerPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx8(DrawerPrimitive.Portal, { "data-slot": "drawer-portal", ...props });
+  return /* @__PURE__ */ jsx9(DrawerPrimitive.Portal, { "data-slot": "drawer-portal", ...props });
 }
 function DrawerClose({
   ...props
 }) {
-  return /* @__PURE__ */ jsx8(DrawerPrimitive.Close, { "data-slot": "drawer-close", ...props });
+  return /* @__PURE__ */ jsx9(DrawerPrimitive.Close, { "data-slot": "drawer-close", ...props });
 }
 function DrawerOverlay({
   className,
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     DrawerPrimitive.Overlay,
     {
       "data-slot": "drawer-overlay",
@@ -937,7 +975,7 @@ function DrawerContent({
   ...props
 }) {
   return /* @__PURE__ */ jsxs4(DrawerPortal, { "data-slot": "drawer-portal", container: portalContainer, children: [
-    showOverlay ? /* @__PURE__ */ jsx8(DrawerOverlay, {}) : null,
+    showOverlay ? /* @__PURE__ */ jsx9(DrawerOverlay, {}) : null,
     /* @__PURE__ */ jsxs4(
       DrawerPrimitive.Content,
       {
@@ -953,7 +991,7 @@ function DrawerContent({
         style: { zIndex: "var(--z-dialog)", ...style },
         ...props,
         children: [
-          /* @__PURE__ */ jsx8("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" }),
+          /* @__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
         ]
       }
@@ -961,7 +999,7 @@ function DrawerContent({
   ] });
 }
 function DrawerHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "div",
     {
       "data-slot": "drawer-header",
@@ -974,7 +1012,7 @@ function DrawerHeader({ className, ...props }) {
   );
 }
 function DrawerFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "div",
     {
       "data-slot": "drawer-footer",
@@ -987,7 +1025,7 @@ function DrawerTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     DrawerPrimitive.Title,
     {
       "data-slot": "drawer-title",
@@ -1003,7 +1041,7 @@ function DrawerDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     DrawerPrimitive.Description,
     {
       "data-slot": "drawer-description",
@@ -1018,12 +1056,12 @@ 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 jsx9 } 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,
@@ -1032,8 +1070,8 @@ var MenuSurface = React3.forwardRef(
     state = "open",
     ...props
   }, ref) => {
-    const Comp = asChild ? Slot3.Root : "div";
-    return /* @__PURE__ */ jsx9(
+    const Comp = asChild ? Slot4.Root : "div";
+    return /* @__PURE__ */ jsx10(
       Comp,
       {
         ...props,
@@ -1047,21 +1085,21 @@ var MenuSurface = React3.forwardRef(
 MenuSurface.displayName = "MenuSurface";
 
 // src/components/dropdown-menu/dropdown-menu.tsx
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
 function DropdownMenu({
   ...props
 }) {
-  return /* @__PURE__ */ jsx10(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+  return /* @__PURE__ */ jsx11(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
 }
 function DropdownMenuPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx10(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
+  return /* @__PURE__ */ jsx11(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
 }
 function DropdownMenuTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     DropdownMenuPrimitive.Trigger,
     {
       "data-slot": "dropdown-menu-trigger",
@@ -1077,7 +1115,7 @@ function DropdownMenuContent({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx10(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx11(
     DropdownMenuPrimitive.Content,
     {
       asChild: true,
@@ -1085,7 +1123,7 @@ function DropdownMenuContent({
       align,
       sideOffset,
       ...props,
-      children: /* @__PURE__ */ jsx10(
+      children: /* @__PURE__ */ jsx11(
         MenuSurface,
         {
           "data-slot": "dropdown-menu-content",
@@ -1104,7 +1142,7 @@ function DropdownMenuGroup({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     DropdownMenuPrimitive.Group,
     {
       "data-slot": "dropdown-menu-group",
@@ -1119,7 +1157,7 @@ function DropdownMenuItem({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     DropdownMenuPrimitive.Item,
     {
       "data-inset": inset,
@@ -1155,12 +1193,12 @@ function DropdownMenuCheckboxItem({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx11(
           "span",
           {
             className: menuItemIndicatorClassName,
             "data-slot": "dropdown-menu-checkbox-item-indicator",
-            children: /* @__PURE__ */ jsx10(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx10(CheckIcon, {}) })
+            children: /* @__PURE__ */ jsx11(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx11(CheckIcon, {}) })
           }
         ),
         children
@@ -1172,7 +1210,7 @@ function DropdownMenuRadioGroup({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     DropdownMenuPrimitive.RadioGroup,
     {
       "data-slot": "dropdown-menu-radio-group",
@@ -1199,12 +1237,12 @@ function DropdownMenuRadioItem({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx11(
           "span",
           {
             className: menuItemIndicatorClassName,
             "data-slot": "dropdown-menu-radio-item-indicator",
-            children: /* @__PURE__ */ jsx10(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx10(CheckIcon, {}) })
+            children: /* @__PURE__ */ jsx11(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx11(CheckIcon, {}) })
           }
         ),
         children
@@ -1217,7 +1255,7 @@ function DropdownMenuLabel({
   inset,
   ...props
 }) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     DropdownMenuPrimitive.Label,
     {
       "data-inset": inset,
@@ -1234,7 +1272,7 @@ function DropdownMenuSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     DropdownMenuPrimitive.Separator,
     {
       "data-slot": "dropdown-menu-separator",
@@ -1247,7 +1285,7 @@ function DropdownMenuShortcut({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     "span",
     {
       "data-slot": "dropdown-menu-shortcut",
@@ -1262,7 +1300,7 @@ function DropdownMenuShortcut({
 function DropdownMenuSub({
   ...props
 }) {
-  return /* @__PURE__ */ jsx10(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+  return /* @__PURE__ */ jsx11(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
 }
 function DropdownMenuSubTrigger({
   className,
@@ -1283,7 +1321,7 @@ function DropdownMenuSubTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx10(ArrowRightIcon, { className: "ml-auto" })
+        /* @__PURE__ */ jsx11(ArrowRightIcon, { className: "ml-auto" })
       ]
     }
   );
@@ -1294,13 +1332,13 @@ function DropdownMenuSubContent({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     DropdownMenuPrimitive.SubContent,
     {
       asChild: true,
       "data-slot": "dropdown-menu-sub-content",
       ...props,
-      children: /* @__PURE__ */ jsx10(
+      children: /* @__PURE__ */ jsx11(
         MenuSurface,
         {
           "data-slot": "dropdown-menu-sub-content",
@@ -1317,7 +1355,7 @@ function DropdownMenuSubContent({
 }
 
 // src/components/input/input.tsx
-import { jsx as jsx11 } 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]",
@@ -1333,7 +1371,7 @@ function Input({
   ...props
 }) {
   const resolvedVariant = variant ?? (size === "sm" ? "sm" : "default");
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     "input",
     {
       type,
@@ -1352,7 +1390,7 @@ function Input({
 }
 
 // src/components/mention-pill/mention-pill.tsx
-import { jsx as jsx12, jsxs as jsxs6 } 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)",
@@ -1406,7 +1444,7 @@ function MentionPill({
               iconShellClassName
             ),
             children: [
-              /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx13(
                 Icon,
                 {
                   className: cn(
@@ -1416,7 +1454,7 @@ function MentionPill({
                   )
                 }
               ),
-              removable ? /* @__PURE__ */ jsx12(
+              removable ? /* @__PURE__ */ jsx13(
                 "button",
                 {
                   "aria-label": removeButtonProps?.["aria-label"],
@@ -1426,14 +1464,14 @@ 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__ */ jsx12(CloseIcon, { className: "size-3.5" })
+                  children: /* @__PURE__ */ jsx13(CloseIcon, { className: "size-3.5" })
                 }
               ) : null
             ]
           }
         ),
         /* @__PURE__ */ jsxs6("span", { className: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap", children: [
-          /* @__PURE__ */ jsx12("span", { children: label }),
+          /* @__PURE__ */ jsx13("span", { children: label }),
           summary ? /* @__PURE__ */ jsxs6("span", { className: "text-current", children: [
             " ",
             summary
@@ -1446,26 +1484,26 @@ function MentionPill({
 
 // src/components/popover/popover.tsx
 import { Popover as PopoverPrimitive } from "radix-ui";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function Popover({
   ...props
 }) {
-  return /* @__PURE__ */ jsx13(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+  return /* @__PURE__ */ jsx14(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
 }
 function PopoverTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx13(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+  return /* @__PURE__ */ jsx14(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
 }
 function PopoverPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx13(PopoverPrimitive.Portal, { "data-slot": "popover-portal", ...props });
+  return /* @__PURE__ */ jsx14(PopoverPrimitive.Portal, { "data-slot": "popover-portal", ...props });
 }
 function PopoverClose({
   ...props
 }) {
-  return /* @__PURE__ */ jsx13(PopoverPrimitive.Close, { "data-slot": "popover-close", ...props });
+  return /* @__PURE__ */ jsx14(PopoverPrimitive.Close, { "data-slot": "popover-close", ...props });
 }
 function PopoverContent({
   className,
@@ -1473,7 +1511,7 @@ function PopoverContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ jsx13(PopoverPortal, { children: /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(PopoverPortal, { children: /* @__PURE__ */ jsx14(
     PopoverPrimitive.Content,
     {
       "data-slot": "popover-content",
@@ -1491,18 +1529,18 @@ function PopoverContent({
 function PopoverAnchor({
   ...props
 }) {
-  return /* @__PURE__ */ jsx13(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 jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function ResizablePanelGroup({
   className,
   orientation = "horizontal",
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     ResizablePrimitive.Group,
     {
       "data-orientation": orientation,
@@ -1517,14 +1555,14 @@ function ResizablePanelGroup({
   );
 }
 function ResizablePanel(props) {
-  return /* @__PURE__ */ jsx14(ResizablePrimitive.Panel, { "data-slot": "resizable-panel", ...props });
+  return /* @__PURE__ */ jsx15(ResizablePrimitive.Panel, { "data-slot": "resizable-panel", ...props });
 }
 function ResizableHandle({
   className,
   withHandle,
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     ResizablePrimitive.Separator,
     {
       "data-slot": "resizable-handle",
@@ -1533,17 +1571,23 @@ function ResizableHandle({
         className
       ),
       ...props,
-      children: withHandle ? /* @__PURE__ */ jsx14("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 jsx15, jsxs as jsxs7 } 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__ */ jsxs7(
@@ -1553,37 +1597,87 @@ function ScrollArea({
       className: cn("group/scroll-area relative", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx15(
+        /* @__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__ */ jsx15(ScrollBar, {}),
-        /* @__PURE__ */ jsx15(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__ */ jsx15(
+  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__ */ jsx15(
+      children: /* @__PURE__ */ jsx16(
         ScrollAreaPrimitive.ScrollAreaThumb,
         {
           "data-slot": "scroll-area-thumb",
@@ -1596,17 +1690,17 @@ function ScrollBar({
 
 // src/components/select/select.tsx
 import { Select as SelectPrimitive } from "radix-ui";
-import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
 function Select({
   ...props
 }) {
-  return /* @__PURE__ */ jsx16(SelectPrimitive.Root, { "data-slot": "select", ...props });
+  return /* @__PURE__ */ jsx17(SelectPrimitive.Root, { "data-slot": "select", ...props });
 }
 function SelectGroup({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     SelectPrimitive.Group,
     {
       "data-slot": "select-group",
@@ -1618,7 +1712,7 @@ function SelectGroup({
 function SelectValue({
   ...props
 }) {
-  return /* @__PURE__ */ jsx16(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+  return /* @__PURE__ */ jsx17(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
 }
 function SelectTrigger({
   className,
@@ -1641,7 +1735,7 @@ function SelectTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx16(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx17(
           ChevronDownIcon,
           {
             className: cn(
@@ -1662,7 +1756,7 @@ function SelectContent({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx16(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx17(
     SelectPrimitive.Content,
     {
       asChild: true,
@@ -1682,8 +1776,8 @@ function SelectContent({
           ),
           style: { zIndex: "var(--z-popover)", ...style },
           children: [
-            /* @__PURE__ */ jsx16(SelectScrollUpButton, {}),
-            /* @__PURE__ */ jsx16(
+            /* @__PURE__ */ jsx17(SelectScrollUpButton, {}),
+            /* @__PURE__ */ jsx17(
               SelectPrimitive.Viewport,
               {
                 "data-position": position,
@@ -1693,7 +1787,7 @@ function SelectContent({
                 children
               }
             ),
-            /* @__PURE__ */ jsx16(SelectScrollDownButton, {})
+            /* @__PURE__ */ jsx17(SelectScrollDownButton, {})
           ]
         }
       )
@@ -1704,7 +1798,7 @@ function SelectLabel({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     SelectPrimitive.Label,
     {
       "data-slot": "select-label",
@@ -1720,7 +1814,7 @@ function SelectSplitLayout({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     "div",
     {
       "data-slot": "select-split-layout",
@@ -1736,7 +1830,7 @@ function SelectSplitColumn({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     "div",
     {
       "data-slot": "select-split-column",
@@ -1749,7 +1843,7 @@ function SelectSplitColumnLabel({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     "div",
     {
       "data-slot": "select-split-column-label",
@@ -1765,7 +1859,7 @@ function SelectSplitColumnItems({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     "div",
     {
       "data-slot": "select-split-column-items",
@@ -1781,7 +1875,7 @@ function SelectSplitDivider({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     "div",
     {
       "aria-hidden": "true",
@@ -1807,14 +1901,14 @@ function SelectItem({
       className: cn("w-full", menuItemWithIndicatorClassName, className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx16("span", { className: menuItemIndicatorClassName, children: forceSelectedIndicator ? /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx17("span", { className: menuItemIndicatorClassName, children: forceSelectedIndicator ? /* @__PURE__ */ jsx17(
           CheckIcon,
           {
             className: "pointer-events-none",
             "data-slot": "select-item-forced-indicator"
           }
-        ) : /* @__PURE__ */ jsx16(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx16(CheckIcon, { className: "pointer-events-none" }) }) }),
-        /* @__PURE__ */ jsx16(SelectPrimitive.ItemText, { children })
+        ) : /* @__PURE__ */ jsx17(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx17(CheckIcon, { className: "pointer-events-none" }) }) }),
+        /* @__PURE__ */ jsx17(SelectPrimitive.ItemText, { children })
       ]
     }
   );
@@ -1823,7 +1917,7 @@ function SelectSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     SelectPrimitive.Separator,
     {
       "data-slot": "select-separator",
@@ -1839,7 +1933,7 @@ function SelectScrollUpButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     SelectPrimitive.ScrollUpButton,
     {
       "data-slot": "select-scroll-up-button",
@@ -1848,7 +1942,7 @@ function SelectScrollUpButton({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx16(ChevronUpIcon, {})
+      children: /* @__PURE__ */ jsx17(ChevronUpIcon, {})
     }
   );
 }
@@ -1856,7 +1950,7 @@ function SelectScrollDownButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     SelectPrimitive.ScrollDownButton,
     {
       "data-slot": "select-scroll-down-button",
@@ -1865,21 +1959,21 @@ function SelectScrollDownButton({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx16(ChevronDownIcon, {})
+      children: /* @__PURE__ */ jsx17(ChevronDownIcon, {})
     }
   );
 }
 
 // src/components/separator/separator.tsx
 import { Separator as SeparatorPrimitive } from "radix-ui";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function Separator2({
   className,
   orientation = "horizontal",
   decorative = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     SeparatorPrimitive.Root,
     {
       "data-slot": "separator",
@@ -1894,14 +1988,76 @@ 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 jsx18 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function Toaster({ toastOptions, style, ...props }) {
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx21(
     SonnerToaster,
     {
       closeButton: true,
@@ -1910,11 +2066,11 @@ function Toaster({ toastOptions, style, ...props }) {
       position: "top-right",
       visibleToasts: 4,
       icons: {
-        error: /* @__PURE__ */ jsx18(FailedFilledIcon, { className: "size-4" }),
-        info: /* @__PURE__ */ jsx18(WarningLinedIcon, { className: "size-4" }),
-        loading: /* @__PURE__ */ jsx18(LoadingIcon, { className: "size-4 animate-spin" }),
-        success: /* @__PURE__ */ jsx18(SuccessFilledIcon, { className: "size-4" }),
-        warning: /* @__PURE__ */ jsx18(WarningFilledIcon, { className: "size-4" })
+        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)",
@@ -1943,7 +2099,7 @@ function Toaster({ toastOptions, style, ...props }) {
 }
 
 // src/components/spinner/spinner.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function Spinner({
   className,
   size = 16,
@@ -1952,7 +2108,7 @@ function Spinner({
   testId,
   trackColor
 }) {
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx22(
     LoadingIcon,
     {
       "data-slot": "spinner",
@@ -1971,9 +2127,9 @@ function Spinner({
 }
 
 // src/components/status-dot/status-dot.tsx
-import { cva as cva3 } from "class-variance-authority";
-import { jsx as jsx20 } 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",
@@ -2006,7 +2162,7 @@ function StatusDot({
   title,
   className
 }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx23(
     "span",
     {
       "aria-hidden": ariaLabel ? void 0 : true,
@@ -2024,13 +2180,13 @@ function StatusDot({
 
 // src/components/switch/switch.tsx
 import { Switch as SwitchPrimitive } from "radix-ui";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function Switch({
   className,
   size = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx24(
     SwitchPrimitive.Root,
     {
       "data-slot": "switch",
@@ -2040,7 +2196,7 @@ function Switch({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx21(
+      children: /* @__PURE__ */ jsx24(
         SwitchPrimitive.Thumb,
         {
           "data-slot": "switch-thumb",
@@ -2052,9 +2208,9 @@ function Switch({
 }
 
 // src/components/textarea/textarea.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function Textarea({ className, ...props }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx25(
     "textarea",
     {
       "data-slot": "textarea",
@@ -2068,18 +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 jsx23, jsxs as jsxs9 } from "react/jsx-runtime";
+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__ */ jsx23(ToastPrimitive.Provider, { duration, ...props });
+  return /* @__PURE__ */ jsx26(ToastPrimitive.Provider, { duration, ...props });
 }
-var ToastVisualContext = React4.createContext(null);
+var ToastVisualContext = React5.createContext(null);
 var toastStatusIconByVariant = {
   destructive: FailedFilledIcon,
   success: SuccessFilledIcon
@@ -2103,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: {
@@ -2135,7 +2291,7 @@ function ToastRoot({
   ...props
 }) {
   const isDestructive = variant === "destructive";
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx26(
     ToastPrimitive.Root,
     {
       "aria-busy": busy,
@@ -2152,7 +2308,7 @@ function ToastRoot({
         ...style
       },
       ...props,
-      children: /* @__PURE__ */ jsx23(ToastVisualContext.Provider, { value: { busy, variant }, children: /* @__PURE__ */ jsx23("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 }) })
     }
   );
 }
@@ -2161,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__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     ToastPrimitive.Title,
     {
       "data-slot": "toast-title",
@@ -2173,7 +2329,7 @@ function ToastTitle({
       ),
       ...props,
       children: [
-        toastVisual?.busy ? /* @__PURE__ */ jsx23(
+        toastVisual?.busy ? /* @__PURE__ */ jsx26(
           Spinner,
           {
             className: "shrink-0 text-current",
@@ -2181,8 +2337,8 @@ function ToastTitle({
             strokeWidth: 2,
             trackColor: "color-mix(in srgb, currentColor 28%, transparent)"
           }
-        ) : StatusIcon ? /* @__PURE__ */ jsx23(StatusIcon, { className: "size-4 shrink-0 text-current" }) : null,
-        /* @__PURE__ */ jsx23("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) })
       ]
     }
   );
@@ -2191,7 +2347,7 @@ function ToastDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx26(
     ToastPrimitive.Description,
     {
       "data-slot": "toast-description",
@@ -2207,7 +2363,7 @@ function ToastClose({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx26(
     ToastPrimitive.Close,
     {
       "data-slot": "toast-close",
@@ -2216,7 +2372,7 @@ function ToastClose({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx23(CloseIcon, { className: "size-4" })
+      children: /* @__PURE__ */ jsx26(CloseIcon, { className: "size-4" })
     }
   );
 }
@@ -2225,7 +2381,7 @@ function ToastViewport({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx26(
     ToastPrimitive.Viewport,
     {
       "data-slot": "toast-viewport",
@@ -2241,12 +2397,12 @@ function ToastViewport({
 
 // src/components/tooltip/tooltip.tsx
 import { Tooltip as TooltipPrimitive } from "radix-ui";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function TooltipProvider({
   delayDuration = 0,
   ...props
 }) {
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx27(
     TooltipPrimitive.Provider,
     {
       "data-slot": "tooltip-provider",
@@ -2258,17 +2414,17 @@ function TooltipProvider({
 function Tooltip({
   ...props
 }) {
-  return /* @__PURE__ */ jsx24(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
+  return /* @__PURE__ */ jsx27(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
 }
 function TooltipTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx24(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+  return /* @__PURE__ */ jsx27(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
 function TooltipPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx24(TooltipPrimitive.Portal, { "data-slot": "tooltip-portal", ...props });
+  return /* @__PURE__ */ jsx27(TooltipPrimitive.Portal, { "data-slot": "tooltip-portal", ...props });
 }
 function TooltipContent({
   className,
@@ -2277,7 +2433,7 @@ function TooltipContent({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx24(TooltipPortal, { children: /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx27(TooltipPortal, { children: /* @__PURE__ */ jsx27(
     TooltipPrimitive.Content,
     {
       "data-slot": "tooltip-content",
@@ -2294,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 jsx25, jsxs as jsxs10 } 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,
@@ -2310,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) {
@@ -2378,7 +2534,7 @@ function UnderlineTabs({
       behavior: "smooth"
     });
   };
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       "aria-label": ariaLabel,
@@ -2390,7 +2546,7 @@ function UnderlineTabs({
       "data-testid": testId,
       role: "tablist",
       children: [
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx28(
           "div",
           {
             ref: viewportRef,
@@ -2404,7 +2560,7 @@ function UnderlineTabs({
             "data-can-scroll-right": overflow.canScrollRight ? "true" : "false",
             "data-slot": "underline-tabs-viewport",
             "data-testid": viewportTestId,
-            children: /* @__PURE__ */ jsxs10(
+            children: /* @__PURE__ */ jsxs11(
               "div",
               {
                 ref: rowRef,
@@ -2412,7 +2568,7 @@ function UnderlineTabs({
                 children: [
                   tabs.map((tab) => {
                     const isActive = value === tab.value;
-                    return /* @__PURE__ */ jsxs10(
+                    return /* @__PURE__ */ jsxs11(
                       "button",
                       {
                         ref: (element) => {
@@ -2435,14 +2591,14 @@ function UnderlineTabs({
                         onClick: () => onValueChange(tab.value),
                         onMouseDown: preventMouseDownDefault ? (event) => event.preventDefault() : void 0,
                         children: [
-                          /* @__PURE__ */ jsx25("span", { children: tab.label }),
-                          tab.count !== void 0 ? /* @__PURE__ */ jsx25("span", { className: "text-xs font-semibold leading-6 text-[inherit]", 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__ */ jsx25(
+                  /* @__PURE__ */ jsx28(
                     "div",
                     {
                       "aria-hidden": true,
@@ -2459,7 +2615,7 @@ function UnderlineTabs({
             )
           }
         ),
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx28(
           "button",
           {
             "aria-label": scrollLeftLabel,
@@ -2470,10 +2626,10 @@ function UnderlineTabs({
             disabled: !overflow.canScrollLeft,
             type: "button",
             onClick: () => scrollTabs("left"),
-            children: /* @__PURE__ */ jsx25(ArrowLeftIcon, { size: 16 })
+            children: /* @__PURE__ */ jsx28(ArrowLeftIcon, { size: 16 })
           }
         ),
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx28(
           "button",
           {
             "aria-label": scrollRightLabel,
@@ -2484,7 +2640,7 @@ function UnderlineTabs({
             disabled: !overflow.canScrollRight,
             type: "button",
             onClick: () => scrollTabs("right"),
-            children: /* @__PURE__ */ jsx25(ArrowRightIcon, { size: 16 })
+            children: /* @__PURE__ */ jsx28(ArrowRightIcon, { size: 16 })
           }
         )
       ]
@@ -2493,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 jsx26 } 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) {
@@ -2598,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,
@@ -2614,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;
@@ -2647,7 +2803,7 @@ var ViewportMenuSurface = React5.forwardRef(function ViewportMenuSurface2({
     observer.observe(element);
     return () => observer.disconnect();
   }, [open, placement]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (!open) {
       return;
     }
@@ -2704,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,
@@ -2742,7 +2898,7 @@ var ViewportMenuSurface = React5.forwardRef(function ViewportMenuSurface2({
     return null;
   }
   return createPortal2(
-    /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx29(
       MenuSurface,
       {
         ...rest,
@@ -2778,6 +2934,7 @@ var ViewportMenuSurface = React5.forwardRef(function ViewportMenuSurface2({
 export {
   badgeVariants,
   Badge,
+  BareIconButton,
   buttonVariants,
   Button,
   Card,
@@ -2859,6 +3016,8 @@ export {
   SelectScrollUpButton,
   SelectScrollDownButton,
   Separator2 as Separator,
+  SectionTabs,
+  ShortcutBadge,
   toast,
   Toaster,
   Spinner,
@@ -2881,4 +3040,4 @@ export {
   UnderlineTabs,
   ViewportMenuSurface
 };
-//# sourceMappingURL=chunk-CBMNQQWH.js.map
+//# sourceMappingURL=chunk-YSWPZLZ4.js.map