@tutti-os/ui-system 0.0.2 → 0.0.4

package/dist/{chunk-2AUYRRDG.js → chunk-HJ43LQHW.js}

@@ -15,7 +15,7 @@ import {
   SuccessFilledIcon,
   WarningFilledIcon,
   WarningLinedIcon
-} from "./chunk-UTUVPSKL.js";
+} from "./chunk-FVHI3UMS.js";
 import {
   cn
 } from "./chunk-DGPY4WP3.js";
@@ -108,7 +108,7 @@ 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",
+  "group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent bg-clip-padding text-[13px] 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: {
       variant: {
@@ -121,13 +121,13 @@ var buttonVariants = cva3(
         link: "text-primary underline-offset-4 hover:underline"
       },
       size: {
-        default: "h-8 gap-[6px] px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-        dialog: "h-8 gap-[6px] rounded-md px-3 text-sm font-normal leading-5 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
-        xs: "h-6 gap-1 rounded-sm px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-7 gap-1 rounded-sm px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-        lg: "h-9 gap-2 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
+        default: "h-8 gap-[6px] px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg[data-icon=inline-start]:not([class*='size-'])]:size-3.5 [&_[data-icon=inline-start]_svg:not([class*='size-'])]:size-3.5",
+        dialog: "h-8 gap-[6px] rounded-md px-3 text-[13px] font-normal leading-5 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5 [&_svg[data-icon=inline-start]:not([class*='size-'])]:size-3.5 [&_[data-icon=inline-start]_svg:not([class*='size-'])]:size-3.5",
+        xs: "h-6 gap-1 rounded-sm px-2 text-[11px] in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3 [&_svg[data-icon=inline-start]:not([class*='size-'])]:size-2.5 [&_[data-icon=inline-start]_svg:not([class*='size-'])]:size-2.5",
+        sm: "h-7 gap-1 rounded-sm px-2.5 text-[13px] in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 [&_svg[data-icon=inline-start]:not([class*='size-'])]:size-3 [&_[data-icon=inline-start]_svg:not([class*='size-'])]:size-3",
+        lg: "h-9 gap-2 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5 [&_svg[data-icon=inline-start]:not([class*='size-'])]:size-3.5 [&_[data-icon=inline-start]_svg:not([class*='size-'])]:size-3.5",
         icon: "size-8",
-        "icon-xs": "size-6 rounded-sm in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-xs": "size-6 rounded-sm in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3 [&_svg[data-icon=inline-start]:not([class*='size-'])]:size-2.5 [&_[data-icon=inline-start]_svg:not([class*='size-'])]:size-2.5",
         "icon-sm": "size-7 rounded-sm in-data-[slot=button-group]:rounded-md",
         "icon-lg": "size-9"
       }
@@ -178,7 +178,7 @@ function Card({
       "data-slot": "card",
       "data-size": size,
       className: cn(
-        "group/card flex flex-col gap-4 overflow-hidden rounded-lg border border-border/70 bg-card py-4 text-sm text-card-foreground shadow-none has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg",
+        "group/card flex flex-col gap-4 overflow-hidden rounded-lg border border-border/70 bg-card py-4 text-[13px] text-card-foreground shadow-none has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg",
         className
       ),
       ...props
@@ -204,7 +204,7 @@ function CardTitle({ className, ...props }) {
     {
       "data-slot": "card-title",
       className: cn(
-        "text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        "text-[15px] leading-snug font-medium group-data-[size=sm]/card:text-[13px]",
         className
       ),
       ...props
@@ -216,7 +216,10 @@ function CardDescription({ className, ...props }) {
     "div",
     {
       "data-slot": "card-description",
-      className: cn("text-sm leading-[1.3] text-muted-foreground", className),
+      className: cn(
+        "text-[13px] leading-[1.3] text-muted-foreground",
+        className
+      ),
       ...props
     }
   );
@@ -391,7 +394,7 @@ 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-[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",
+          "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-[13px] 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 },
@@ -460,7 +463,7 @@ function DialogTitle({
     {
       "data-slot": "dialog-title",
       className: cn(
-        "text-base leading-[1.35] font-semibold tracking-normal text-foreground",
+        "text-[15px] leading-[1.35] font-semibold tracking-normal text-foreground",
         className
       ),
       ...props
@@ -476,7 +479,7 @@ function DialogDescription({
     {
       "data-slot": "dialog-description",
       className: cn(
-        "text-sm font-[400] leading-[1.3] text-text-secondary *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        "text-[13px] font-[400] leading-[1.3] text-text-secondary *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
         className
       ),
       ...props
@@ -538,7 +541,7 @@ function ConfirmationDialog({
           /* @__PURE__ */ jsx7(DialogTitle, { children: title }),
           description ? /* @__PURE__ */ jsx7(DialogDescription, { children: description }) : null
         ] }),
-        children ? /* @__PURE__ */ jsx7("div", { className: "text-sm leading-[1.3] text-text-secondary", children }) : null,
+        children ? /* @__PURE__ */ jsx7("div", { className: "text-[13px] leading-[1.3] text-text-secondary", children }) : null,
         footer ?? /* @__PURE__ */ jsxs2(DialogFooter, { children: [
           /* @__PURE__ */ jsx7(
             Button,
@@ -796,7 +799,7 @@ var DatePicker = React2.forwardRef(
           disabled,
           type: "button",
           className: cn(
-            "inline-flex h-8 min-h-8 w-full items-center justify-start rounded-md border border-transparent bg-[var(--workbench-field-bg)] px-3 text-left text-sm text-foreground transition-[background-color,border-color,box-shadow,color] outline-none hover:bg-muted/60 focus-visible:border-border focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground disabled:opacity-100",
+            "inline-flex h-8 min-h-8 w-full items-center justify-start rounded-md border border-transparent bg-[var(--workbench-field-bg)] px-3 text-left text-[13px] text-foreground transition-[background-color,border-color,box-shadow,color] outline-none hover:bg-muted/60 focus-visible:border-border focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground disabled:opacity-100",
             !selectedDate && "text-muted-foreground",
             className
           ),
@@ -830,7 +833,7 @@ var DatePicker = React2.forwardRef(
             },
             children: [
               /* @__PURE__ */ jsxs3("div", { className: "mb-3 flex items-center justify-between gap-2", children: [
-                /* @__PURE__ */ jsx8("div", { className: "text-sm font-semibold text-foreground", children: formatMonthLabel(visibleMonth) }),
+                /* @__PURE__ */ jsx8("div", { className: "text-[13px] font-semibold text-foreground", children: formatMonthLabel(visibleMonth) }),
                 /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1", children: [
                   /* @__PURE__ */ jsx8(
                     "button",
@@ -866,7 +869,7 @@ var DatePicker = React2.forwardRef(
                   )
                 ] })
               ] }),
-              /* @__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: "grid grid-cols-7 gap-1 text-center text-[11px] font-semibold text-muted-foreground", children: resolvedLabels.weekdayLabels.map((day) => /* @__PURE__ */ jsx8("div", { className: "py-1", children: day }, day)) }),
               /* @__PURE__ */ jsx8(
                 "div",
                 {
@@ -881,7 +884,7 @@ var DatePicker = React2.forwardRef(
                       {
                         "aria-pressed": isSelected,
                         className: cn(
-                          "inline-flex h-8 w-8 items-center justify-center rounded-sm text-sm transition-[background-color,color,box-shadow] hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30",
+                          "inline-flex h-8 w-8 items-center justify-center rounded-sm text-[13px] transition-[background-color,color,box-shadow] hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30",
                           inCurrentMonth ? "text-foreground" : "text-muted-foreground",
                           isToday && "bg-primary/10 text-primary shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--color-primary)_20%,transparent)]",
                           isSelected && "bg-primary text-primary-foreground hover:bg-primary"
@@ -900,7 +903,7 @@ var DatePicker = React2.forwardRef(
                 /* @__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",
+                    className: "inline-flex min-h-8 items-center justify-center rounded-sm px-3 text-[13px] font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
                     type: "button",
                     onClick: () => {
                       onValueChange?.("");
@@ -913,7 +916,7 @@ var DatePicker = React2.forwardRef(
                 /* @__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",
+                    className: "inline-flex min-h-8 items-center justify-center rounded-sm bg-primary px-3 text-[13px] font-medium text-primary-foreground transition-opacity hover:opacity-90",
                     type: "button",
                     onClick: () => selectDate(today),
                     children: resolvedLabels.today
@@ -986,7 +989,7 @@ function DrawerContent({
       {
         "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",
+          "group/drawer-content fixed flex h-auto flex-col border-[var(--border-1)] bg-background-fronted text-[13px] 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",
@@ -1035,7 +1038,7 @@ function DrawerTitle({
     {
       "data-slot": "drawer-title",
       className: cn(
-        "text-base font-medium leading-[1.35] text-foreground",
+        "text-[15px] font-medium leading-[1.35] text-foreground",
         className
       ),
       ...props
@@ -1050,7 +1053,7 @@ function DrawerDescription({
     DrawerPrimitive.Description,
     {
       "data-slot": "drawer-description",
-      className: cn("text-sm text-muted-foreground", className),
+      className: cn("text-[13px] text-muted-foreground", className),
       ...props
     }
   );
@@ -1063,10 +1066,10 @@ import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
 import * as React3 from "react";
 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 menuSurfaceClassName = "t-dropdown flex flex-col gap-0.5 rounded-[8px] border border-[var(--border-1)] bg-[var(--background-fronted)] p-1 text-[13px] 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-[13px] 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 text-[var(--accent)]";
+var menuItemIndicatorClassName = "pointer-events-none absolute right-2 flex size-4 items-center justify-center text-[var(--tutti-purple)]";
 var MenuSurface = React3.forwardRef(
   ({
     asChild = false,
@@ -1203,7 +1206,7 @@ function DropdownMenuCheckboxItem({
           {
             className: menuItemIndicatorClassName,
             "data-slot": "dropdown-menu-checkbox-item-indicator",
-            children: /* @__PURE__ */ jsx11(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx11(CheckIcon, {}) })
+            children: /* @__PURE__ */ jsx11(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx11(CheckIcon, { className: "text-[var(--tutti-purple)]" }) })
           }
         ),
         children
@@ -1247,7 +1250,7 @@ function DropdownMenuRadioItem({
           {
             className: menuItemIndicatorClassName,
             "data-slot": "dropdown-menu-radio-item-indicator",
-            children: /* @__PURE__ */ jsx11(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx11(CheckIcon, {}) })
+            children: /* @__PURE__ */ jsx11(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx11(CheckIcon, { className: "text-[var(--tutti-purple)]" }) })
           }
         ),
         children
@@ -1266,7 +1269,7 @@ function DropdownMenuLabel({
       "data-inset": inset,
       "data-slot": "dropdown-menu-label",
       className: cn(
-        "px-1.5 py-1 text-xs font-medium text-[var(--text-secondary)] data-inset:pl-7",
+        "px-1.5 py-1 text-[11px] font-medium text-[var(--text-secondary)] data-inset:pl-7",
         className
       ),
       ...props
@@ -1295,7 +1298,7 @@ function DropdownMenuShortcut({
     {
       "data-slot": "dropdown-menu-shortcut",
       className: cn(
-        "ml-auto text-xs tracking-widest text-[var(--text-secondary)] group-focus/dropdown-menu-item:text-[var(--text-primary)]",
+        "ml-auto text-[11px] tracking-widest text-[var(--text-secondary)] group-focus/dropdown-menu-item:text-[var(--text-primary)]",
         className
       ),
       ...props
@@ -1362,10 +1365,10 @@ function DropdownMenuSubContent({
 // src/components/input/input.tsx
 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]",
-  md: "h-8 rounded-[6px] px-3 py-0 text-sm leading-[1.3]",
-  sm: "h-8 rounded-[6px] px-3 py-0 text-sm leading-[1.3]",
+  default: "h-8 rounded-[6px] px-3 py-0 text-[13px] leading-[1.3]",
+  lg: "h-12 rounded-[8px] px-4 py-3 text-[15px] leading-[1.3]",
+  md: "h-8 rounded-[6px] px-3 py-0 text-[13px] leading-[1.3]",
+  sm: "h-8 rounded-[6px] px-3 py-0 text-[13px] leading-[1.3]",
   otp: "h-12 w-12 rounded-[4px] px-0 text-center text-xl font-medium sm:h-14 sm:w-14 sm:text-2xl"
 };
 function Input({
@@ -1384,9 +1387,9 @@ function Input({
       "data-size": size,
       "data-variant": resolvedVariant,
       className: cn(
-        "w-full min-w-0 border border-transparent bg-[var(--transparency-block)] font-normal text-[var(--text-primary)] shadow-none transition-colors duration-200 outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-[var(--text-primary)] placeholder:text-[var(--text-placeholder)] 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:pointer-events-none 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",
+        "w-full min-w-0 border border-transparent bg-[var(--transparency-block)] font-normal text-[var(--text-primary)] shadow-none transition-colors duration-200 outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-[13px] file:font-medium file:text-[var(--text-primary)] placeholder:text-[var(--text-placeholder)] 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:pointer-events-none 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",
         inputVariantClassNames[resolvedVariant],
-        !variant && size === "sm" && "h-7 rounded-[4px] px-2 text-xs",
+        !variant && size === "sm" && "h-7 rounded-[4px] px-2 text-[11px]",
         className
       ),
       ...props
@@ -1431,7 +1434,7 @@ function MentionPill({
     "span",
     {
       className: cn(
-        "group relative top-[3px] inline-flex max-w-full cursor-default items-center overflow-hidden rounded-[4px] border border-transparent bg-transparent py-0.5 align-baseline text-sm font-medium leading-5 no-underline transition-colors hover:border-transparent hover:bg-[color-mix(in_srgb,currentColor_12%,transparent)]",
+        "group relative top-[3px] inline-flex max-w-full cursor-default items-center overflow-hidden rounded-[4px] border border-transparent bg-transparent py-0.5 align-baseline text-[13px] font-medium leading-5 no-underline transition-colors hover:border-transparent hover:bg-[color-mix(in_srgb,currentColor_12%,transparent)]",
         isFile ? "gap-1.5 px-1.5" : "gap-1 px-1",
         className
       ),
@@ -1540,7 +1543,7 @@ function PopoverContent({
       align,
       sideOffset,
       className: cn(
-        "t-dropdown z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-lg border border-[var(--border-1)] bg-[var(--background-fronted)] p-3 text-sm text-popover-foreground shadow-soft outline-hidden",
+        "t-dropdown z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-lg border border-[var(--border-1)] bg-[var(--background-fronted)] p-3 text-[13px] text-popover-foreground shadow-soft outline-hidden",
         className
       ),
       style: { zIndex: "var(--z-popover)" },
@@ -1600,11 +1603,94 @@ function ResizableHandle({
 
 // src/components/scroll-area/scroll-area.tsx
 import * as React4 from "react";
-import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
 import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+var MIN_THUMB_SIZE_PX = 24;
 function ScrollArea({
   className,
   children,
+  onBlur,
+  onFocus,
+  onMouseEnter,
+  onMouseLeave,
+  scrollbarMode = "custom",
+  scrollHideDelay: _scrollHideDelay,
+  type,
+  viewportClassName,
+  viewportContentStyle,
+  viewportProps,
+  viewportRef,
+  viewportTestId,
+  ...props
+}) {
+  const implementationProps = {
+    className,
+    onBlur,
+    onFocus,
+    onMouseEnter,
+    onMouseLeave,
+    scrollbarMode,
+    type,
+    viewportClassName,
+    viewportContentStyle,
+    viewportProps,
+    viewportRef,
+    viewportTestId,
+    ...props
+  };
+  if (scrollbarMode === "native") {
+    return /* @__PURE__ */ jsx16(NativeScrollArea, { ...implementationProps, children });
+  }
+  return /* @__PURE__ */ jsx16(CustomScrollArea, { ...implementationProps, children });
+}
+function NativeScrollArea({
+  className,
+  children,
+  onBlur,
+  onFocus,
+  onMouseEnter,
+  onMouseLeave,
+  scrollbarMode,
+  type,
+  viewportClassName,
+  viewportContentStyle,
+  viewportProps,
+  viewportRef,
+  viewportTestId,
+  ...props
+}) {
+  const alwaysVisible = type === "always" || type === "scroll" || hasAlwaysVisibleScrollbarSelector(className);
+  return /* @__PURE__ */ jsx16(
+    ScrollAreaFrame,
+    {
+      ...props,
+      className,
+      "data-scrollbar-mode": scrollbarMode,
+      onBlur,
+      onFocus,
+      onMouseEnter,
+      onMouseLeave,
+      alwaysVisible: false,
+      viewportClassName: cn(
+        nativeScrollbarClassName(alwaysVisible),
+        viewportClassName
+      ),
+      viewportContentStyle,
+      viewportProps,
+      viewportRef,
+      viewportTestId,
+      children
+    }
+  );
+}
+function CustomScrollArea({
+  className,
+  children,
+  onBlur,
+  onFocus,
+  onMouseEnter,
+  onMouseLeave,
+  scrollbarMode,
+  type,
   viewportClassName,
   viewportContentStyle,
   viewportProps,
@@ -1612,103 +1698,470 @@ function ScrollArea({
   viewportTestId,
   ...props
 }) {
+  const localViewportRef = React4.useRef(null);
+  const contentRef = React4.useRef(null);
+  const [active, setActive] = React4.useState(false);
+  const alwaysVisible = type === "always" || type === "scroll" || hasAlwaysVisibleScrollbarSelector(className);
   return /* @__PURE__ */ jsxs7(
-    ScrollAreaPrimitive.Root,
+    ScrollAreaFrame,
     {
-      "data-slot": "scroll-area",
-      className: cn("group/scroll-area relative", className),
       ...props,
+      className,
+      contentRef,
+      "data-scrollbar-mode": scrollbarMode,
+      onBlur: (event) => {
+        onBlur?.(event);
+        if (!event.currentTarget.contains(event.relatedTarget)) {
+          setActive(false);
+        }
+      },
+      onFocus: (event) => {
+        onFocus?.(event);
+        setActive(true);
+      },
+      onMouseEnter: (event) => {
+        onMouseEnter?.(event);
+        setActive(true);
+      },
+      onMouseLeave: (event) => {
+        onMouseLeave?.(event);
+        setActive(false);
+      },
+      alwaysVisible,
+      viewportClassName: cn(
+        "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+        viewportClassName
+      ),
+      viewportContentStyle,
+      viewportProps,
+      viewportRef: setRefs(localViewportRef, viewportRef),
+      viewportTestId,
       children: [
-        /* @__PURE__ */ jsxs7(
-          ScrollAreaPrimitive.Viewport,
+        children,
+        /* @__PURE__ */ jsx16(
+          ScrollAreaScrollbar,
           {
-            ...viewportProps,
-            "data-slot": "scroll-area-viewport",
-            "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
-            ]
+            active: active || alwaysVisible,
+            contentRef,
+            orientation: "vertical",
+            viewportRef: localViewportRef
           }
-        ),
-        /* @__PURE__ */ jsx16(ScrollBar, {}),
-        /* @__PURE__ */ jsx16(ScrollAreaPrimitive.Corner, {})
+        )
       ]
     }
   );
 }
-function ScrollAreaViewportContentStyleBridge({
-  style
+function ScrollAreaFrame({
+  alwaysVisible,
+  children,
+  className,
+  contentRef,
+  viewportClassName,
+  viewportContentStyle,
+  viewportProps,
+  viewportRef,
+  viewportTestId,
+  ...props
 }) {
-  const markerRef = React4.useRef(null);
-  React4.useLayoutEffect(() => {
-    const contentElement = markerRef.current?.parentElement;
-    if (!contentElement) {
+  return /* @__PURE__ */ jsx16(
+    "div",
+    {
+      "data-slot": "scroll-area",
+      className: cn(
+        "group/scroll-area relative",
+        alwaysVisible ? "[&_[data-slot=scroll-area-scrollbar]]:opacity-100" : null,
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx16(
+        "div",
+        {
+          ...viewportProps,
+          "data-slot": "scroll-area-viewport",
+          "data-testid": viewportTestId,
+          ref: viewportRef,
+          className: cn(
+            "size-full overflow-auto rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1",
+            viewportClassName
+          ),
+          children: /* @__PURE__ */ jsx16(
+            "div",
+            {
+              ref: contentRef,
+              "data-slot": "scroll-area-content",
+              style: {
+                minWidth: "100%",
+                display: "table",
+                ...viewportContentStyle
+              },
+              children
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function ScrollAreaScrollbar({
+  active,
+  contentRef,
+  orientation,
+  viewportRef
+}) {
+  const trackRef = React4.useRef(null);
+  const thumbRef = React4.useRef(null);
+  const dragStateRef = React4.useRef(null);
+  const frameRef = React4.useRef(null);
+  const scrollableRef = React4.useRef(false);
+  const [dragging, setDragging] = React4.useState(false);
+  const [scrollable, setScrollable] = React4.useState(false);
+  const [trackActive, setTrackActive] = React4.useState(false);
+  const syncScrollbarState = React4.useCallback(() => {
+    const viewport = viewportRef.current;
+    const track = trackRef.current;
+    const thumb = thumbRef.current;
+    if (!viewport || !track || !thumb) {
+      updateScrollable(false, scrollableRef, setScrollable);
       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);
+    const viewportSize = orientation === "vertical" ? viewport.clientHeight : viewport.clientWidth;
+    const scrollSize = orientation === "vertical" ? viewport.scrollHeight : viewport.scrollWidth;
+    const scrollOffset = orientation === "vertical" ? viewport.scrollTop : viewport.scrollLeft;
+    const trackSize = orientation === "vertical" ? track.clientHeight : track.clientWidth;
+    const maxScrollOffset = Math.max(0, scrollSize - viewportSize);
+    if (viewportSize <= 0 || trackSize <= 0 || maxScrollOffset <= 0) {
+      updateScrollable(false, scrollableRef, setScrollable);
+      return;
+    }
+    const thumbSize = Math.min(
+      trackSize,
+      Math.max(
+        MIN_THUMB_SIZE_PX,
+        Math.round(viewportSize / scrollSize * trackSize)
+      )
+    );
+    const maxThumbOffset = Math.max(0, trackSize - thumbSize);
+    const thumbOffset = Math.round(
+      scrollOffset / maxScrollOffset * maxThumbOffset
+    );
+    if (orientation === "vertical") {
+      thumb.style.height = `${thumbSize}px`;
+      thumb.style.width = "";
+      thumb.style.transform = `translateY(${thumbOffset}px)`;
+    } else {
+      thumb.style.width = `${thumbSize}px`;
+      thumb.style.height = "";
+      thumb.style.transform = `translateX(${thumbOffset}px)`;
+    }
+    updateScrollable(true, scrollableRef, setScrollable);
+  }, [orientation, viewportRef]);
+  const scheduleSync = React4.useCallback(() => {
+    if (frameRef.current !== null) {
+      return;
+    }
+    frameRef.current = requestAnimationFrameSafely(() => {
+      frameRef.current = null;
+      syncScrollbarState();
+    });
+  }, [syncScrollbarState]);
+  const scrollViewportToThumbOffset = React4.useCallback(
+    (thumbOffset) => {
+      const viewport = viewportRef.current;
+      const track = trackRef.current;
+      const thumb = thumbRef.current;
+      if (!viewport || !track || !thumb) {
+        return;
+      }
+      const viewportSize = orientation === "vertical" ? viewport.clientHeight : viewport.clientWidth;
+      const scrollSize = orientation === "vertical" ? viewport.scrollHeight : viewport.scrollWidth;
+      const trackSize = orientation === "vertical" ? track.clientHeight : track.clientWidth;
+      const thumbSize = orientation === "vertical" ? thumb.offsetHeight : thumb.offsetWidth;
+      const maxScrollOffset = Math.max(0, scrollSize - viewportSize);
+      const maxThumbOffset = Math.max(0, trackSize - thumbSize);
+      if (maxScrollOffset <= 0 || maxThumbOffset <= 0) {
+        return;
+      }
+      const nextScrollOffset = clamp(thumbOffset, 0, maxThumbOffset) / maxThumbOffset * maxScrollOffset;
+      if (orientation === "vertical") {
+        viewport.scrollTop = nextScrollOffset;
+      } else {
+        viewport.scrollLeft = nextScrollOffset;
+      }
+      syncScrollbarState();
+    },
+    [orientation, syncScrollbarState, viewportRef]
+  );
+  const handleTrackPointerDown = React4.useCallback(
+    (event) => {
+      if (event.button !== 0 || !scrollableRef.current) {
+        return;
+      }
+      const track = trackRef.current;
+      const thumb = thumbRef.current;
+      if (!track || !thumb || event.target === thumb) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      const trackRect = track.getBoundingClientRect();
+      const clientOffset = orientation === "vertical" ? event.clientY : event.clientX;
+      const trackStart = orientation === "vertical" ? trackRect.top : trackRect.left;
+      const thumbSize = orientation === "vertical" ? thumb.offsetHeight : thumb.offsetWidth;
+      scrollViewportToThumbOffset(clientOffset - trackStart - thumbSize / 2);
+    },
+    [orientation, scrollViewportToThumbOffset]
+  );
+  const handleThumbPointerDown = React4.useCallback(
+    (event) => {
+      if (event.button !== 0 || !scrollableRef.current) {
+        return;
+      }
+      const viewport = viewportRef.current;
+      const track = trackRef.current;
+      const thumb = thumbRef.current;
+      if (!viewport || !track || !thumb) {
+        return;
+      }
+      const viewportSize = orientation === "vertical" ? viewport.clientHeight : viewport.clientWidth;
+      const scrollSize = orientation === "vertical" ? viewport.scrollHeight : viewport.scrollWidth;
+      const trackSize = orientation === "vertical" ? track.clientHeight : track.clientWidth;
+      const thumbSize = orientation === "vertical" ? thumb.offsetHeight : thumb.offsetWidth;
+      const maxScrollOffset = Math.max(0, scrollSize - viewportSize);
+      const maxThumbOffset = Math.max(0, trackSize - thumbSize);
+      if (maxScrollOffset <= 0 || maxThumbOffset <= 0) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      dragStateRef.current = {
+        maxScrollOffset,
+        maxThumbOffset,
+        startClientOffset: orientation === "vertical" ? event.clientY : event.clientX,
+        startScrollOffset: orientation === "vertical" ? viewport.scrollTop : viewport.scrollLeft
+      };
+      setDragging(true);
+    },
+    [orientation, viewportRef]
+  );
+  React4.useEffect(() => {
+    if (!dragging) {
+      return;
+    }
+    const handlePointerMove = (event) => {
+      const dragState = dragStateRef.current;
+      const viewport = viewportRef.current;
+      if (!dragState || !viewport) {
+        return;
+      }
+      const clientOffset = orientation === "vertical" ? event.clientY : event.clientX;
+      const nextThumbOffset = dragState.startScrollOffset / dragState.maxScrollOffset * dragState.maxThumbOffset + (clientOffset - dragState.startClientOffset);
+      const nextScrollOffset = clamp(nextThumbOffset, 0, dragState.maxThumbOffset) / dragState.maxThumbOffset * dragState.maxScrollOffset;
+      if (orientation === "vertical") {
+        viewport.scrollTop = nextScrollOffset;
       } else {
-        contentElement.style.setProperty(cssProperty, String(value));
+        viewport.scrollLeft = nextScrollOffset;
       }
+      syncScrollbarState();
+    };
+    const handlePointerUp = () => {
+      dragStateRef.current = null;
+      setDragging(false);
+    };
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", handlePointerUp);
+    return () => {
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", handlePointerUp);
+    };
+  }, [dragging, orientation, syncScrollbarState, viewportRef]);
+  React4.useEffect(() => {
+    const viewport = viewportRef.current;
+    if (!viewport) {
+      updateScrollable(false, scrollableRef, setScrollable);
+      return;
+    }
+    syncScrollbarState();
+    viewport.addEventListener("scroll", scheduleSync, { passive: true });
+    const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver(scheduleSync) : null;
+    resizeObserver?.observe(viewport);
+    if (contentRef.current) {
+      resizeObserver?.observe(contentRef.current);
     }
     return () => {
-      for (const [cssProperty, previous] of previousValues) {
-        if (previous.value) {
-          contentElement.style.setProperty(
-            cssProperty,
-            previous.value,
-            previous.priority
-          );
-        } else {
-          contentElement.style.removeProperty(cssProperty);
-        }
+      if (frameRef.current !== null) {
+        cancelAnimationFrameSafely(frameRef.current);
+        frameRef.current = null;
       }
+      viewport.removeEventListener("scroll", scheduleSync);
+      resizeObserver?.disconnect();
     };
-  }, [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()}`);
+  }, [contentRef, scheduleSync, syncScrollbarState, viewportRef]);
+  React4.useEffect(() => {
+    scheduleSync();
+  });
+  return /* @__PURE__ */ jsx16(
+    "div",
+    {
+      ref: trackRef,
+      "data-dragging": dragging ? "true" : "false",
+      "data-orientation": orientation,
+      "data-scrollable": scrollable ? "true" : "false",
+      "data-slot": "scroll-area-scrollbar",
+      "aria-hidden": "true",
+      className: scrollbarClassName(orientation),
+      style: scrollbarStyle({
+        active: active || dragging,
+        orientation,
+        scrollable
+      }),
+      onPointerEnter: () => setTrackActive(true),
+      onPointerLeave: () => setTrackActive(false),
+      onPointerDown: handleTrackPointerDown,
+      children: /* @__PURE__ */ jsx16(
+        "div",
+        {
+          ref: thumbRef,
+          "data-slot": "scroll-area-thumb",
+          className: thumbClassName(orientation),
+          style: thumbStyle({ active: trackActive || dragging, orientation }),
+          onPointerDown: handleThumbPointerDown
+        }
+      )
+    }
+  );
 }
 function ScrollBar({
   className,
+  forceMount: _forceMount,
   orientation = "vertical",
   ...props
 }) {
   return /* @__PURE__ */ jsx16(
-    ScrollAreaPrimitive.ScrollAreaScrollbar,
+    "div",
     {
       "data-slot": "scroll-area-scrollbar",
       "data-orientation": orientation,
-      orientation,
-      className: cn(
-        "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
-      ),
+      className: cn(scrollbarClassName(orientation), className),
+      style: scrollbarStyle({ active: false, orientation, scrollable: true }),
       ...props,
       children: /* @__PURE__ */ jsx16(
-        ScrollAreaPrimitive.ScrollAreaThumb,
+        "div",
         {
           "data-slot": "scroll-area-thumb",
-          className: "relative flex-1 rounded-full bg-[var(--transparency-block)] transition-colors duration-150 group-hover/scrollbar:bg-[var(--transparency-hover)]"
+          className: thumbClassName(orientation),
+          style: thumbStyle({ active: false, orientation })
         }
       )
     }
   );
 }
+function scrollbarClassName(orientation) {
+  return cn(
+    orientation === "horizontal" ? "data-[orientation=horizontal]:h-2" : "data-[orientation=vertical]:w-2"
+  );
+}
+function thumbClassName(orientation) {
+  return cn(
+    "rounded-full",
+    orientation === "horizontal" ? "top-[2px] bottom-[2px]" : "right-[2px] left-[2px]"
+  );
+}
+function nativeScrollbarClassName(alwaysVisible) {
+  return cn(
+    "[scrollbar-width:thin] [scrollbar-color:transparent_transparent]",
+    "[&::-webkit-scrollbar]:block [&::-webkit-scrollbar]:h-2 [&::-webkit-scrollbar]:w-2",
+    "[&::-webkit-scrollbar-corner]:bg-transparent [&::-webkit-scrollbar-track]:bg-transparent",
+    "[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-2 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-transparent [&::-webkit-scrollbar-thumb]:bg-clip-content",
+    alwaysVisible ? "[scrollbar-color:var(--transparency-block)_transparent] [&::-webkit-scrollbar-thumb]:bg-[var(--transparency-block)] hover:[&::-webkit-scrollbar-thumb]:bg-[var(--transparency-hover)]" : "hover:[scrollbar-color:var(--transparency-block)_transparent] focus-within:[scrollbar-color:var(--transparency-block)_transparent] hover:[&::-webkit-scrollbar-thumb]:bg-[var(--transparency-block)] focus-within:[&::-webkit-scrollbar-thumb]:bg-[var(--transparency-block)]"
+  );
+}
+function scrollbarStyle({
+  active,
+  orientation,
+  scrollable
+}) {
+  return {
+    position: "absolute",
+    zIndex: 10,
+    display: "flex",
+    touchAction: "none",
+    padding: 2,
+    opacity: active && scrollable ? 1 : 0,
+    pointerEvents: scrollable ? "auto" : "none",
+    userSelect: "none",
+    transition: "opacity 150ms ease-in-out",
+    cursor: "pointer",
+    ...orientation === "horizontal" ? {
+      right: 0,
+      bottom: 0,
+      left: 0,
+      height: 8,
+      flexDirection: "column"
+    } : {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      width: 8
+    }
+  };
+}
+function thumbStyle({
+  active,
+  orientation
+}) {
+  return {
+    position: "absolute",
+    minHeight: orientation === "vertical" ? MIN_THUMB_SIZE_PX : void 0,
+    minWidth: orientation === "horizontal" ? MIN_THUMB_SIZE_PX : void 0,
+    borderRadius: 999,
+    background: active ? "var(--transparency-hover)" : "var(--transparency-block)",
+    cursor: active ? "grabbing" : "grab",
+    transition: "background-color 150ms ease-in-out",
+    ...orientation === "horizontal" ? {
+      top: 2,
+      bottom: 2
+    } : {
+      right: 2,
+      left: 2
+    }
+  };
+}
+function hasAlwaysVisibleScrollbarSelector(className) {
+  return typeof className === "string" && className.includes("scroll-area-scrollbar") && className.includes("opacity-100");
+}
+function setRefs(localRef, forwardedRef) {
+  return (node) => {
+    localRef.current = node;
+    if (typeof forwardedRef === "function") {
+      forwardedRef(node);
+    } else if (forwardedRef) {
+      forwardedRef.current = node;
+    }
+  };
+}
+function updateScrollable(nextScrollable, scrollableRef, setScrollable) {
+  if (scrollableRef.current === nextScrollable) {
+    return;
+  }
+  scrollableRef.current = nextScrollable;
+  setScrollable(nextScrollable);
+}
+function requestAnimationFrameSafely(callback) {
+  if (typeof window.requestAnimationFrame === "function") {
+    return window.requestAnimationFrame(callback);
+  }
+  return window.setTimeout(() => callback(performance.now()), 16);
+}
+function cancelAnimationFrameSafely(frameId) {
+  if (typeof window.cancelAnimationFrame === "function") {
+    window.cancelAnimationFrame(frameId);
+    return;
+  }
+  window.clearTimeout(frameId);
+}
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
 
 // src/components/select/select.tsx
 import { Select as SelectPrimitive } from "radix-ui";
@@ -1750,7 +2203,7 @@ function SelectTrigger({
       "data-size": size,
       "data-variant": variant,
       className: cn(
-        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",
+        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-[13px] 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
       ),
@@ -1822,7 +2275,7 @@ function SelectLabel({
     {
       "data-slot": "select-label",
       className: cn(
-        "px-1.5 py-1 text-xs font-normal text-[var(--text-secondary)]",
+        "px-1.5 py-1 text-[11px] font-normal text-[var(--text-secondary)]",
         className
       ),
       ...props
@@ -1867,7 +2320,7 @@ function SelectSplitColumnLabel({
     {
       "data-slot": "select-split-column-label",
       className: cn(
-        "shrink-0 px-2 pt-1 pb-2 text-xs font-normal leading-[18px] text-[var(--text-secondary)]",
+        "shrink-0 px-2 pt-1 pb-2 text-[11px] font-normal leading-[18px] text-[var(--text-secondary)]",
         className
       ),
       ...props
@@ -1923,10 +2376,10 @@ function SelectItem({
         /* @__PURE__ */ jsx17("span", { className: menuItemIndicatorClassName, children: forceSelectedIndicator ? /* @__PURE__ */ jsx17(
           CheckIcon,
           {
-            className: "pointer-events-none",
+            className: "pointer-events-none text-[var(--tutti-purple)]",
             "data-slot": "select-item-forced-indicator"
           }
-        ) : /* @__PURE__ */ jsx17(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx17(CheckIcon, { className: "pointer-events-none" }) }) }),
+        ) : /* @__PURE__ */ jsx17(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx17(CheckIcon, { className: "pointer-events-none text-[var(--tutti-purple)]" }) }) }),
         /* @__PURE__ */ jsx17(SelectPrimitive.ItemText, { children })
       ]
     }
@@ -2103,10 +2556,10 @@ function Toaster({ toastOptions, style, ...props }) {
         ...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)]",
+          title: "text-[13px] font-semibold leading-5 text-[var(--text-primary)]",
+          description: "mt-0.5 text-[11px] leading-5 text-[var(--text-secondary)]",
+          actionButton: "h-7 rounded-[6px] bg-[var(--text-primary)] px-2.5 text-[11px] 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-[11px] 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
@@ -2211,7 +2664,7 @@ function Switch({
       "data-slot": "switch",
       "data-size": size,
       className: cn(
-        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-[background-color,border-color,box-shadow] outline-none focus-visible:border-[var(--border-focus)] focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--border-focus)_30%,transparent)] aria-invalid:border-[var(--state-danger)] aria-invalid:ring-2 aria-invalid:ring-[color-mix(in_srgb,var(--state-danger)_20%,transparent)] data-[size=default]:h-[18px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] data-[state=checked]:bg-[var(--accent)] data-[state=unchecked]:bg-[var(--text-disabled)] data-disabled:cursor-not-allowed data-disabled:opacity-100",
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-[background-color,border-color,box-shadow] outline-none focus-visible:border-[var(--border-focus)] focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--border-focus)_30%,transparent)] aria-invalid:border-[var(--state-danger)] aria-invalid:ring-2 aria-invalid:ring-[color-mix(in_srgb,var(--state-danger)_20%,transparent)] data-[size=default]:h-[18px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] data-[state=checked]:bg-[var(--tutti-purple)] data-[state=unchecked]:bg-[var(--text-disabled)] data-disabled:cursor-not-allowed data-disabled:opacity-100",
         className
       ),
       ...props,
@@ -2234,7 +2687,7 @@ function Textarea({ className, ...props }) {
     {
       "data-slot": "textarea",
       className: cn(
-        "flex field-sizing-content min-h-20 w-full rounded-[6px] border border-transparent bg-[var(--transparency-block)] px-3 py-3 text-sm font-normal leading-[1.3] text-[var(--text-primary)] transition-[background-color,border-color,color] outline-none shadow-none placeholder:text-[var(--text-placeholder)] 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",
+        "flex field-sizing-content min-h-20 w-full rounded-[6px] border border-transparent bg-[var(--transparency-block)] px-3 py-3 text-[13px] font-normal leading-[1.3] text-[var(--text-primary)] transition-[background-color,border-color,color] outline-none shadow-none placeholder:text-[var(--text-placeholder)] 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",
         className
       ),
       ...props
@@ -2285,7 +2738,7 @@ function formatToastText(children) {
   return children;
 }
 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",
+  "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-[13px] 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: {
       variant: {
@@ -2343,7 +2796,7 @@ function ToastTitle({
     {
       "data-slot": "toast-title",
       className: cn(
-        "inline-flex max-w-full items-center justify-center gap-[6px] text-center text-sm font-normal leading-normal",
+        "inline-flex max-w-full items-center justify-center gap-[6px] text-center text-[13px] font-normal leading-normal",
         className
       ),
       ...props,
@@ -2371,7 +2824,7 @@ function ToastDescription({
     {
       "data-slot": "toast-description",
       className: cn(
-        "box-border w-full px-2 text-xs font-normal leading-[1.3] text-current opacity-75 [overflow-wrap:anywhere]",
+        "box-border w-full px-2 text-[11px] font-normal leading-[1.3] text-current opacity-75 [overflow-wrap:anywhere]",
         className
       ),
       ...props
@@ -2458,7 +2911,7 @@ function TooltipContent({
       "data-slot": "tooltip-content",
       sideOffset,
       className: cn(
-        "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",
+        "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-[13px] 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-tooltip, 100700)", ...style },
@@ -2469,7 +2922,7 @@ function TooltipContent({
 }
 
 // src/components/underline-tabs/underline-tabs.tsx
-import { useEffect as useEffect3, useLayoutEffect as useLayoutEffect3, useRef as useRef3, useState as useState3 } from "react";
+import { useEffect as useEffect4, useLayoutEffect as useLayoutEffect2, useRef as useRef3, useState as useState4 } from "react";
 import { jsx as jsx28, jsxs as jsxs11 } from "react/jsx-runtime";
 function UnderlineTabs({
   tabs,
@@ -2488,12 +2941,12 @@ function UnderlineTabs({
   const viewportRef = useRef3(null);
   const rowRef = useRef3(null);
   const buttonRefs = useRef3({});
-  const [indicatorStyle, setIndicatorStyle] = useState3({ left: 0, width: 0 });
-  const [overflow, setOverflow] = useState3({
+  const [indicatorStyle, setIndicatorStyle] = useState4({ left: 0, width: 0 });
+  const [overflow, setOverflow] = useState4({
     canScrollLeft: false,
     canScrollRight: false
   });
-  useLayoutEffect3(() => {
+  useLayoutEffect2(() => {
     const row = rowRef.current;
     const button = buttonRefs.current[value];
     if (!row || !button) {
@@ -2510,7 +2963,7 @@ function UnderlineTabs({
       (current) => current.left === nextStyle.left && current.width === nextStyle.width ? current : nextStyle
     );
   }, [tabs, value]);
-  useEffect3(() => {
+  useEffect4(() => {
     const viewport = viewportRef.current;
     if (!viewport) {
       return;
@@ -2600,7 +3053,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-[var(--accent)]"
+                          isActive && "text-[var(--tutti-purple)]"
                         ),
                         "data-active": isActive ? "true" : "false",
                         "data-slot": "underline-tabs-tab",
@@ -2611,7 +3064,7 @@ function UnderlineTabs({
                         onMouseDown: preventMouseDownDefault ? (event) => event.preventDefault() : void 0,
                         children: [
                           /* @__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.count !== void 0 ? /* @__PURE__ */ jsx28("span", { className: "text-[11px] font-semibold leading-6 text-[inherit]", children: tab.count }) : null
                         ]
                       },
                       tab.value
@@ -2621,7 +3074,7 @@ function UnderlineTabs({
                     "div",
                     {
                       "aria-hidden": true,
-                      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",
+                      className: "absolute bottom-0 left-0 z-[1] h-0.5 rounded-[1px] bg-[var(--tutti-purple)] 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)`,
@@ -2800,7 +3253,7 @@ var ViewportMenuSurface = React6.forwardRef(function ViewportMenuSurface2({
 }, forwardedRef) {
   const surfaceRef = React6.useRef(null);
   const [measuredSize, setMeasuredSize] = React6.useState(null);
-  const setRefs = React6.useCallback(
+  const setRefs2 = React6.useCallback(
     (node) => {
       surfaceRef.current = node;
       assignRef(forwardedRef, node);
@@ -2937,7 +3390,7 @@ var ViewportMenuSurface = React6.forwardRef(function ViewportMenuSurface2({
       MenuSurface,
       {
         ...rest,
-        ref: setRefs,
+        ref: setRefs2,
         className,
         "data-slot": "viewport-menu-surface",
         style: {
@@ -3075,4 +3528,4 @@ export {
   UnderlineTabs,
   ViewportMenuSurface
 };
-//# sourceMappingURL=chunk-2AUYRRDG.js.map
+//# sourceMappingURL=chunk-HJ43LQHW.js.map