@tutti-os/ui-system 0.0.189 → 0.0.191

package/dist/{chunk-45TFBBVS.js → chunk-OW6744SQ.js}

@@ -314,12 +314,310 @@ function Checkbox({
   );
 }
 
-// src/components/dialog/dialog.tsx
+// src/components/combobox/combobox.tsx
+import * as React4 from "react";
+
+// src/components/input/input.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var inputVariantClassNames = {
+  default: "h-8 rounded-md 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-md px-3 py-0 text-[13px] leading-[1.3]",
+  sm: "h-8 rounded-md 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({
+  className,
+  size = "default",
+  type,
+  variant,
+  ...props
+}) {
+  const resolvedVariant = variant ?? (size === "sm" ? "sm" : "default");
+  return /* @__PURE__ */ jsx6(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      "data-size": size,
+      "data-variant": resolvedVariant,
+      className: cn(
+        "w-full min-w-0 appearance-none border-0 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-0 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-0 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-[11px]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/menu-surface/menu-surface.tsx
 import * as React3 from "react";
+import { Slot as Slot4 } from "radix-ui";
+import { jsx as jsx7 } 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-[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:min-w-0 *:[span]:last:flex-1 *:[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(--tutti-purple)]";
+var MenuSurface = React3.forwardRef(
+  ({
+    asChild = false,
+    className,
+    "data-state": dataState,
+    state = "open",
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot4.Root : "div";
+    return /* @__PURE__ */ jsx7(
+      Comp,
+      {
+        ...props,
+        ref,
+        className: cn(menuSurfaceClassName, className),
+        "data-state": dataState ?? state
+      }
+    );
+  }
+);
+MenuSurface.displayName = "MenuSurface";
+
+// src/components/popover/popover.tsx
+import { Popover as PopoverPrimitive } from "radix-ui";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function Popover({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx8(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx8(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx8(PopoverPrimitive.Portal, { "data-slot": "popover-portal", ...props });
+}
+function PopoverClose({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx8(PopoverPrimitive.Close, { "data-slot": "popover-close", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx8(PopoverPortal, { children: /* @__PURE__ */ jsx8(
+    PopoverPrimitive.Content,
+    {
+      "data-slot": "popover-content",
+      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-[13px] text-popover-foreground shadow-soft outline-hidden",
+        className
+      ),
+      style: { zIndex: "var(--z-popover)" },
+      ...props
+    }
+  ) });
+}
+function PopoverAnchor({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx8(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
+}
+
+// src/components/combobox/combobox.tsx
+import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+var comboboxItemClassName = "relative flex w-full cursor-pointer scroll-my-1 flex-col items-start gap-0.5 rounded-sm px-2 py-1 pr-8 text-left text-[13px] text-[var(--text-primary)] outline-hidden transition-colors duration-200 select-none data-[active=true]:bg-[var(--transparency-hover)] data-disabled:pointer-events-none data-disabled:text-[var(--text-disabled)]";
+function comboboxOptionMatches(option, query) {
+  if (!query) {
+    return true;
+  }
+  return [option.label, option.value, ...option.keywords ?? []].some(
+    (candidate) => candidate.toLocaleLowerCase().includes(query)
+  );
+}
+function Combobox({
+  align = "start",
+  allowCustomValue = false,
+  "aria-label": ariaLabel,
+  className,
+  contentClassName,
+  contentStyle,
+  customValueLabel,
+  disabled = false,
+  emptyMessage,
+  onValueChange,
+  options,
+  placeholder,
+  searchPlaceholder,
+  value
+}) {
+  const [open, setOpen] = React4.useState(false);
+  const [query, setQuery] = React4.useState("");
+  const [activeIndex, setActiveIndex] = React4.useState(0);
+  const listboxID = React4.useId();
+  const normalizedQuery = query.trim().toLocaleLowerCase();
+  const visibleOptions = options.filter(
+    (option) => comboboxOptionMatches(option, normalizedQuery)
+  );
+  const customValue = allowCustomValue && query.trim() && !options.some((option) => option.value === query.trim()) ? query.trim() : null;
+  const rows = customValue ? [...visibleOptions, { label: customValue, value: customValue }] : visibleOptions;
+  const clampedActiveIndex = Math.min(
+    activeIndex,
+    Math.max(rows.length - 1, 0)
+  );
+  const selectedOption = options.find((option) => option.value === value);
+  const triggerLabel = selectedOption?.label ?? value;
+  const commit = (row) => {
+    if (row.disabled) {
+      return;
+    }
+    onValueChange(row.value);
+    setOpen(false);
+  };
+  const onOpenChange = (nextOpen) => {
+    setOpen(nextOpen);
+    setQuery("");
+    setActiveIndex(0);
+  };
+  const onSearchKeyDown = (event) => {
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      if (rows.length === 0) {
+        return;
+      }
+      const delta = event.key === "ArrowDown" ? 1 : -1;
+      setActiveIndex((rows.length + clampedActiveIndex + delta) % rows.length);
+      return;
+    }
+    if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      setActiveIndex(event.key === "Home" ? 0 : Math.max(rows.length - 1, 0));
+      return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      const row = rows[clampedActiveIndex];
+      if (row) {
+        commit(row);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs2(Popover, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx9(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        "aria-label": ariaLabel,
+        className: cn(
+          "flex h-8 w-full min-w-0 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)] transition-colors outline-none select-none hover:bg-[var(--transparency-hover)] focus:bg-[var(--transparency-hover)] focus-visible:bg-[var(--transparency-hover)] disabled:cursor-not-allowed disabled:bg-[var(--transparency-block)] disabled:text-[var(--text-disabled)]",
+          "[&[data-state=open]>svg]:rotate-180 [&>svg]:transition-transform [&>svg]:duration-200",
+          className
+        ),
+        "data-slot": "combobox-trigger",
+        disabled,
+        type: "button",
+        children: [
+          /* @__PURE__ */ jsx9(
+            "span",
+            {
+              className: cn(
+                "min-w-0 flex-1 truncate text-left",
+                !triggerLabel && "text-[var(--text-placeholder)]"
+              ),
+              children: triggerLabel || placeholder
+            }
+          ),
+          /* @__PURE__ */ jsx9(ChevronDownIcon, { className: "pointer-events-none size-4 shrink-0 text-current" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs2(
+      PopoverContent,
+      {
+        align,
+        className: cn(
+          "w-[var(--radix-popover-trigger-width)] min-w-44 gap-0 p-1",
+          contentClassName
+        ),
+        "data-slot": "combobox-content",
+        style: contentStyle,
+        onOpenAutoFocus: (event) => {
+          event.preventDefault();
+        },
+        children: [
+          /* @__PURE__ */ jsx9(
+            Input,
+            {
+              "aria-activedescendant": rows[clampedActiveIndex] ? `${listboxID}-${clampedActiveIndex}` : void 0,
+              "aria-autocomplete": "list",
+              "aria-controls": listboxID,
+              "aria-expanded": true,
+              autoFocus: true,
+              className: "shrink-0",
+              "data-slot": "combobox-search",
+              placeholder: searchPlaceholder,
+              role: "combobox",
+              value: query,
+              onChange: (event) => {
+                setQuery(event.currentTarget.value);
+                setActiveIndex(0);
+              },
+              onKeyDown: onSearchKeyDown
+            }
+          ),
+          /* @__PURE__ */ jsx9(
+            "div",
+            {
+              className: "mt-1 flex max-h-56 flex-col gap-0.5 overflow-y-auto overscroll-contain",
+              "data-slot": "combobox-listbox",
+              id: listboxID,
+              role: "listbox",
+              children: rows.length === 0 ? /* @__PURE__ */ jsx9("span", { className: "px-2 py-1.5 text-[12px] text-[var(--text-tertiary)]", children: emptyMessage }) : rows.map((row, index) => {
+                const isCustomRow = customValue !== null && index === rows.length - 1;
+                return /* @__PURE__ */ jsxs2(
+                  "button",
+                  {
+                    "aria-selected": row.value === value,
+                    className: comboboxItemClassName,
+                    "data-active": index === clampedActiveIndex,
+                    "data-disabled": row.disabled ? "" : void 0,
+                    "data-slot": "combobox-item",
+                    id: `${listboxID}-${index}`,
+                    role: "option",
+                    tabIndex: -1,
+                    type: "button",
+                    onClick: () => commit(row),
+                    onPointerMove: () => setActiveIndex(index),
+                    children: [
+                      /* @__PURE__ */ jsx9("span", { className: "w-full truncate pr-2", children: isCustomRow ? customValueLabel?.(row.value) ?? row.label : row.label }),
+                      row.description ? /* @__PURE__ */ jsx9("span", { className: "w-full truncate pr-2 text-[11px] text-[var(--text-tertiary)]", children: row.description }) : null,
+                      row.value === value ? /* @__PURE__ */ jsx9("span", { className: menuItemIndicatorClassName, children: /* @__PURE__ */ jsx9(CheckIcon, { className: "pointer-events-none" }) }) : null
+                    ]
+                  },
+                  `${row.value}:${isCustomRow ? "custom" : "option"}`
+                );
+              })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/dialog/dialog.tsx
+import * as React5 from "react";
 import { Dialog as DialogPrimitive } from "radix-ui";
-import { Fragment, jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
 var dialogCloseDurationMs = 150;
-var DialogMotionContext = React3.createContext({
+var DialogMotionContext = React5.createContext({
   open: false
 });
 function Dialog({
@@ -328,11 +626,11 @@ function Dialog({
   open,
   ...props
 }) {
-  const [uncontrolledOpen, setUncontrolledOpen] = React3.useState(
+  const [uncontrolledOpen, setUncontrolledOpen] = React5.useState(
     defaultOpen ?? false
   );
   const currentOpen = open ?? uncontrolledOpen;
-  const handleOpenChange = React3.useCallback(
+  const handleOpenChange = React5.useCallback(
     (nextOpen) => {
       if (open === void 0) {
         setUncontrolledOpen(nextOpen);
@@ -341,7 +639,7 @@ function Dialog({
     },
     [onOpenChange, open]
   );
-  return /* @__PURE__ */ jsx6(DialogMotionContext.Provider, { value: { open: currentOpen }, children: /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx10(DialogMotionContext.Provider, { value: { open: currentOpen }, children: /* @__PURE__ */ jsx10(
     DialogPrimitive.Root,
     {
       "data-slot": "dialog",
@@ -354,24 +652,24 @@ function Dialog({
 function DialogTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx6(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+  return /* @__PURE__ */ jsx10(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
 }
 function DialogPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx6(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+  return /* @__PURE__ */ jsx10(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
 }
 function DialogClose({
   ...props
 }) {
-  return /* @__PURE__ */ jsx6(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+  return /* @__PURE__ */ jsx10(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
 }
 function DialogOverlay({
   className,
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx10(
     DialogPrimitive.Overlay,
     {
       "data-slot": "dialog-overlay",
@@ -393,9 +691,9 @@ function DialogContent({
   style,
   ...props
 }) {
-  const { open } = React3.useContext(DialogMotionContext);
-  const [mounted, setMounted] = React3.useState(open);
-  React3.useEffect(() => {
+  const { open } = React5.useContext(DialogMotionContext);
+  const [mounted, setMounted] = React5.useState(open);
+  React5.useEffect(() => {
     if (open) {
       setMounted(true);
       return void 0;
@@ -410,9 +708,9 @@ function DialogContent({
   if (!mounted) {
     return null;
   }
-  const content = /* @__PURE__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsx6(DialogOverlay, { className: overlayClassName, forceMount: true }),
-    /* @__PURE__ */ jsxs2(
+  const content = /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx10(DialogOverlay, { className: overlayClassName, forceMount: true }),
+    /* @__PURE__ */ jsxs3(
       DialogPrimitive.Content,
       {
         "data-slot": "dialog-content",
@@ -426,15 +724,15 @@ function DialogContent({
         ...props,
         children: [
           children,
-          showCloseButton && /* @__PURE__ */ jsx6(DialogPrimitive.Close, { "data-slot": "dialog-close", asChild: true, children: /* @__PURE__ */ jsxs2(
+          showCloseButton && /* @__PURE__ */ jsx10(DialogPrimitive.Close, { "data-slot": "dialog-close", asChild: true, children: /* @__PURE__ */ jsxs3(
             Button,
             {
               variant: "ghost",
               className: "absolute top-3 right-3",
               size: "icon-sm",
               children: [
-                /* @__PURE__ */ jsx6(CloseIcon, {}),
-                /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Close" })
+                /* @__PURE__ */ jsx10(CloseIcon, {}),
+                /* @__PURE__ */ jsx10("span", { className: "sr-only", children: "Close" })
               ]
             }
           ) })
@@ -445,10 +743,10 @@ function DialogContent({
   if (!portaled) {
     return content;
   }
-  return /* @__PURE__ */ jsx6(DialogPortal, { forceMount: true, children: content });
+  return /* @__PURE__ */ jsx10(DialogPortal, { forceMount: true, children: content });
 }
 function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx10(
     "div",
     {
       "data-slot": "dialog-header",
@@ -463,7 +761,7 @@ function DialogFooter({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       "data-slot": "dialog-footer",
@@ -474,7 +772,7 @@ function DialogFooter({
       ...props,
       children: [
         children,
-        showCloseButton && /* @__PURE__ */ jsx6(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx6(Button, { variant: "ghost", size: "dialog", children: "Close" }) })
+        showCloseButton && /* @__PURE__ */ jsx10(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx10(Button, { variant: "ghost", size: "dialog", children: "Close" }) })
       ]
     }
   );
@@ -483,7 +781,7 @@ function DialogTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx10(
     DialogPrimitive.Title,
     {
       "data-slot": "dialog-title",
@@ -499,7 +797,7 @@ function DialogDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx10(
     DialogPrimitive.Description,
     {
       "data-slot": "dialog-description",
@@ -513,7 +811,7 @@ function DialogDescription({
 }
 
 // src/components/confirmation-dialog/confirmation-dialog.tsx
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
 function confirmToneClassName(tone) {
   if (tone === "destructive") {
     return "shadow-none";
@@ -541,7 +839,7 @@ function ConfirmationDialog({
   title
 }) {
   const isCloseDisabled = disableCloseWhileBusy && confirmBusy;
-  return /* @__PURE__ */ jsx7(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsx11(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs4(
     DialogContent,
     {
       className: cn(
@@ -562,13 +860,13 @@ function ConfirmationDialog({
         }
       },
       children: [
-        /* @__PURE__ */ jsxs3(DialogHeader, { children: [
-          /* @__PURE__ */ jsx7(DialogTitle, { children: title }),
-          description ? /* @__PURE__ */ jsx7(DialogDescription, { children: description }) : null
+        /* @__PURE__ */ jsxs4(DialogHeader, { children: [
+          /* @__PURE__ */ jsx11(DialogTitle, { children: title }),
+          description ? /* @__PURE__ */ jsx11(DialogDescription, { children: description }) : null
         ] }),
-        children ? /* @__PURE__ */ jsx7("div", { className: "text-[13px] leading-[1.3] text-text-secondary", children }) : null,
-        footer ?? /* @__PURE__ */ jsxs3(DialogFooter, { children: [
-          /* @__PURE__ */ jsx7(
+        children ? /* @__PURE__ */ jsx11("div", { className: "text-[13px] leading-[1.3] text-text-secondary", children }) : null,
+        footer ?? /* @__PURE__ */ jsxs4(DialogFooter, { children: [
+          /* @__PURE__ */ jsx11(
             Button,
             {
               disabled: confirmBusy,
@@ -582,7 +880,7 @@ function ConfirmationDialog({
               children: cancelLabel
             }
           ),
-          hideConfirmButton ? null : /* @__PURE__ */ jsx7(
+          hideConfirmButton ? null : /* @__PURE__ */ jsx11(
             Button,
             {
               disabled: confirmBusy || confirmDisabled,
@@ -604,48 +902,16 @@ function ConfirmationDialog({
 
 // src/components/context-menu/context-menu.tsx
 import { ContextMenu as ContextMenuPrimitive } from "radix-ui";
-
-// src/components/menu-surface/menu-surface.tsx
-import * as React4 from "react";
-import { Slot as Slot4 } from "radix-ui";
-import { jsx as jsx8 } 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-[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:min-w-0 *:[span]:last:flex-1 *:[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(--tutti-purple)]";
-var MenuSurface = React4.forwardRef(
-  ({
-    asChild = false,
-    className,
-    "data-state": dataState,
-    state = "open",
-    ...props
-  }, ref) => {
-    const Comp = asChild ? Slot4.Root : "div";
-    return /* @__PURE__ */ jsx8(
-      Comp,
-      {
-        ...props,
-        ref,
-        className: cn(menuSurfaceClassName, className),
-        "data-state": dataState ?? state
-      }
-    );
-  }
-);
-MenuSurface.displayName = "MenuSurface";
-
-// src/components/context-menu/context-menu.tsx
-import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
 function ContextMenu({
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(ContextMenuPrimitive.Root, { "data-slot": "context-menu", ...props });
+  return /* @__PURE__ */ jsx12(ContextMenuPrimitive.Root, { "data-slot": "context-menu", ...props });
 }
 function ContextMenuTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(ContextMenuPrimitive.Trigger, { "data-slot": "context-menu-trigger", ...props });
+  return /* @__PURE__ */ jsx12(ContextMenuPrimitive.Trigger, { "data-slot": "context-menu-trigger", ...props });
 }
 function ContextMenuContent({
   className,
@@ -653,13 +919,13 @@ function ContextMenuContent({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx12(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx12(
     ContextMenuPrimitive.Content,
     {
       asChild: true,
       "data-slot": "context-menu-content",
       ...props,
-      children: /* @__PURE__ */ jsx9(
+      children: /* @__PURE__ */ jsx12(
         MenuSurface,
         {
           "data-slot": "context-menu-content",
@@ -680,7 +946,7 @@ function ContextMenuItem({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx12(
     ContextMenuPrimitive.Item,
     {
       "data-inset": inset,
@@ -700,7 +966,7 @@ function ContextMenuSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx12(
     ContextMenuPrimitive.Separator,
     {
       "data-slot": "context-menu-separator",
@@ -712,14 +978,14 @@ function ContextMenuSeparator({
 function ContextMenuSub({
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(ContextMenuPrimitive.Sub, { "data-slot": "context-menu-sub", ...props });
+  return /* @__PURE__ */ jsx12(ContextMenuPrimitive.Sub, { "data-slot": "context-menu-sub", ...props });
 }
 function ContextMenuSubTrigger({
   className,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     ContextMenuPrimitive.SubTrigger,
     {
       "data-slot": "context-menu-sub-trigger",
@@ -731,7 +997,7 @@ function ContextMenuSubTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx9(ArrowRightIcon, { className: "ml-auto text-[var(--text-tertiary)]" })
+        /* @__PURE__ */ jsx12(ArrowRightIcon, { className: "ml-auto text-[var(--text-tertiary)]" })
       ]
     }
   );
@@ -742,13 +1008,13 @@ function ContextMenuSubContent({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx12(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx12(
     ContextMenuPrimitive.SubContent,
     {
       asChild: true,
       "data-slot": "context-menu-sub-content",
       ...props,
-      children: /* @__PURE__ */ jsx9(
+      children: /* @__PURE__ */ jsx12(
         MenuSurface,
         {
           "data-slot": "context-menu-sub-content",
@@ -762,9 +1028,9 @@ function ContextMenuSubContent({
 }
 
 // src/components/date-picker/date-picker.tsx
-import * as React5 from "react";
+import * as React6 from "react";
 import { createPortal } from "react-dom";
-import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
 var defaultLabels = {
   placeholder: "Year / Month / Day",
   previousMonth: "Previous month",
@@ -852,7 +1118,7 @@ function subscribeScrollableAncestors(trigger, onScrollLike) {
   }
   return () => cleanups.forEach((dispose) => dispose());
 }
-var DatePicker = React5.forwardRef(
+var DatePicker = React6.forwardRef(
   ({
     className,
     value,
@@ -869,20 +1135,20 @@ var DatePicker = React5.forwardRef(
       ...labels,
       weekdayLabels: labels?.weekdayLabels ?? defaultLabels.weekdayLabels
     };
-    const triggerRef = React5.useRef(null);
-    const popoverRef = React5.useRef(null);
-    const selectedDate = React5.useMemo(() => parseDateValue(value), [value]);
-    const [isOpen, setIsOpen] = React5.useState(false);
-    const [visibleMonth, setVisibleMonth] = React5.useState(
+    const triggerRef = React6.useRef(null);
+    const popoverRef = React6.useRef(null);
+    const selectedDate = React6.useMemo(() => parseDateValue(value), [value]);
+    const [isOpen, setIsOpen] = React6.useState(false);
+    const [visibleMonth, setVisibleMonth] = React6.useState(
       () => selectedDate ?? /* @__PURE__ */ new Date()
     );
-    const [popoverPosition, setPopoverPosition] = React5.useState(null);
-    React5.useEffect(() => {
+    const [popoverPosition, setPopoverPosition] = React6.useState(null);
+    React6.useEffect(() => {
       if (selectedDate) {
         setVisibleMonth(selectedDate);
       }
     }, [selectedDate]);
-    const openPopover = React5.useCallback(() => {
+    const openPopover = React6.useCallback(() => {
       const trigger = triggerRef.current;
       if (!trigger) {
         return;
@@ -892,7 +1158,7 @@ var DatePicker = React5.forwardRef(
       );
       setIsOpen(true);
     }, []);
-    React5.useLayoutEffect(() => {
+    React6.useLayoutEffect(() => {
       if (!isOpen) {
         return;
       }
@@ -909,7 +1175,7 @@ var DatePicker = React5.forwardRef(
       const rafId = window.requestAnimationFrame(sync);
       return () => window.cancelAnimationFrame(rafId);
     }, [isOpen]);
-    React5.useEffect(() => {
+    React6.useEffect(() => {
       if (!isOpen) {
         return void 0;
       }
@@ -956,8 +1222,8 @@ var DatePicker = React5.forwardRef(
         unsubAncestors();
       };
     }, [isOpen]);
-    const today = React5.useMemo(() => /* @__PURE__ */ new Date(), []);
-    const monthGrid = React5.useMemo(
+    const today = React6.useMemo(() => /* @__PURE__ */ new Date(), []);
+    const monthGrid = React6.useMemo(
       () => buildMonthGrid(visibleMonth),
       [visibleMonth]
     );
@@ -967,8 +1233,8 @@ var DatePicker = React5.forwardRef(
       setIsOpen(false);
       triggerRef.current?.focus();
     };
-    return /* @__PURE__ */ jsxs5(Fragment2, { children: [
-      /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+      /* @__PURE__ */ jsx13(
         "button",
         {
           ref: (node) => {
@@ -999,11 +1265,11 @@ var DatePicker = React5.forwardRef(
             }
           },
           ...props,
-          children: /* @__PURE__ */ jsx10("span", { className: "min-w-0 truncate", children: displayValue })
+          children: /* @__PURE__ */ jsx13("span", { className: "min-w-0 truncate", children: displayValue })
         }
       ),
       isOpen && popoverPosition ? createPortal(
-        /* @__PURE__ */ jsxs5(
+        /* @__PURE__ */ jsxs6(
           "div",
           {
             ref: popoverRef,
@@ -1016,10 +1282,10 @@ var DatePicker = React5.forwardRef(
               zIndex: "var(--z-popover)"
             },
             children: [
-              /* @__PURE__ */ jsxs5("div", { className: "mb-3 flex items-center justify-between gap-2", children: [
-                /* @__PURE__ */ jsx10("div", { className: "text-[13px] font-semibold text-foreground", children: formatMonthLabel(visibleMonth) }),
-                /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1", children: [
-                  /* @__PURE__ */ jsx10(
+              /* @__PURE__ */ jsxs6("div", { className: "mb-3 flex items-center justify-between gap-2", children: [
+                /* @__PURE__ */ jsx13("div", { className: "text-[13px] font-semibold text-foreground", children: formatMonthLabel(visibleMonth) }),
+                /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1", children: [
+                  /* @__PURE__ */ jsx13(
                     "button",
                     {
                       "aria-label": resolvedLabels.previousMonth,
@@ -1032,10 +1298,10 @@ var DatePicker = React5.forwardRef(
                           1
                         )
                       ),
-                      children: /* @__PURE__ */ jsx10(ArrowLeftIcon, { size: 16 })
+                      children: /* @__PURE__ */ jsx13(ArrowLeftIcon, { size: 16 })
                     }
                   ),
-                  /* @__PURE__ */ jsx10(
+                  /* @__PURE__ */ jsx13(
                     "button",
                     {
                       "aria-label": resolvedLabels.nextMonth,
@@ -1048,13 +1314,13 @@ var DatePicker = React5.forwardRef(
                           1
                         )
                       ),
-                      children: /* @__PURE__ */ jsx10(ArrowRightIcon, { size: 16 })
+                      children: /* @__PURE__ */ jsx13(ArrowRightIcon, { size: 16 })
                     }
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ jsx10("div", { className: "grid grid-cols-7 gap-1 text-center text-[11px] font-semibold text-muted-foreground", children: resolvedLabels.weekdayLabels.map((day) => /* @__PURE__ */ jsx10("div", { className: "py-1", children: day }, day)) }),
-              /* @__PURE__ */ jsx10(
+              /* @__PURE__ */ jsx13("div", { className: "grid grid-cols-7 gap-1 text-center text-[11px] font-semibold text-muted-foreground", children: resolvedLabels.weekdayLabels.map((day) => /* @__PURE__ */ jsx13("div", { className: "py-1", children: day }, day)) }),
+              /* @__PURE__ */ jsx13(
                 "div",
                 {
                   className: "mt-1 grid grid-cols-7 justify-items-center gap-1",
@@ -1063,7 +1329,7 @@ var DatePicker = React5.forwardRef(
                     const isSelected = isSameDate(date, selectedDate);
                     const isToday = isSameDate(date, today);
                     const inCurrentMonth = date.getMonth() === visibleMonth.getMonth();
-                    return /* @__PURE__ */ jsx10(
+                    return /* @__PURE__ */ jsx13(
                       "button",
                       {
                         "aria-pressed": isSelected,
@@ -1083,8 +1349,8 @@ var DatePicker = React5.forwardRef(
                   })
                 }
               ),
-              /* @__PURE__ */ jsxs5("div", { className: "mt-3 flex items-center justify-between gap-2 border-t border-border/70 pt-3", children: [
-                /* @__PURE__ */ jsx10(
+              /* @__PURE__ */ jsxs6("div", { className: "mt-3 flex items-center justify-between gap-2 border-t border-border/70 pt-3", children: [
+                /* @__PURE__ */ jsx13(
                   "button",
                   {
                     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",
@@ -1097,7 +1363,7 @@ var DatePicker = React5.forwardRef(
                     children: resolvedLabels.clear
                   }
                 ),
-                /* @__PURE__ */ jsx10(
+                /* @__PURE__ */ jsx13(
                   "button",
                   {
                     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",
@@ -1119,33 +1385,33 @@ DatePicker.displayName = "DatePicker";
 
 // src/components/drawer/drawer.tsx
 import { Drawer as DrawerPrimitive } from "vaul";
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
 function Drawer({
   ...props
 }) {
-  return /* @__PURE__ */ jsx11(DrawerPrimitive.Root, { "data-slot": "drawer", ...props });
+  return /* @__PURE__ */ jsx14(DrawerPrimitive.Root, { "data-slot": "drawer", ...props });
 }
 function DrawerTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx11(DrawerPrimitive.Trigger, { "data-slot": "drawer-trigger", ...props });
+  return /* @__PURE__ */ jsx14(DrawerPrimitive.Trigger, { "data-slot": "drawer-trigger", ...props });
 }
 function DrawerPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx11(DrawerPrimitive.Portal, { "data-slot": "drawer-portal", ...props });
+  return /* @__PURE__ */ jsx14(DrawerPrimitive.Portal, { "data-slot": "drawer-portal", ...props });
 }
 function DrawerClose({
   ...props
 }) {
-  return /* @__PURE__ */ jsx11(DrawerPrimitive.Close, { "data-slot": "drawer-close", ...props });
+  return /* @__PURE__ */ jsx14(DrawerPrimitive.Close, { "data-slot": "drawer-close", ...props });
 }
 function DrawerOverlay({
   className,
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx14(
     DrawerPrimitive.Overlay,
     {
       "data-slot": "drawer-overlay",
@@ -1166,9 +1432,9 @@ function DrawerContent({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs6(DrawerPortal, { "data-slot": "drawer-portal", container: portalContainer, children: [
-    showOverlay ? /* @__PURE__ */ jsx11(DrawerOverlay, {}) : null,
-    /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(DrawerPortal, { "data-slot": "drawer-portal", container: portalContainer, children: [
+    showOverlay ? /* @__PURE__ */ jsx14(DrawerOverlay, {}) : null,
+    /* @__PURE__ */ jsxs7(
       DrawerPrimitive.Content,
       {
         "data-slot": "drawer-content",
@@ -1183,7 +1449,7 @@ function DrawerContent({
         style: { zIndex: "var(--z-dialog)", ...style },
         ...props,
         children: [
-          /* @__PURE__ */ jsx11("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__ */ jsx14("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
         ]
       }
@@ -1191,7 +1457,7 @@ function DrawerContent({
   ] });
 }
 function DrawerHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx14(
     "div",
     {
       "data-slot": "drawer-header",
@@ -1204,7 +1470,7 @@ function DrawerHeader({ className, ...props }) {
   );
 }
 function DrawerFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx14(
     "div",
     {
       "data-slot": "drawer-footer",
@@ -1217,7 +1483,7 @@ function DrawerTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx14(
     DrawerPrimitive.Title,
     {
       "data-slot": "drawer-title",
@@ -1233,7 +1499,7 @@ function DrawerDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx14(
     DrawerPrimitive.Description,
     {
       "data-slot": "drawer-description",
@@ -1245,21 +1511,21 @@ function DrawerDescription({
 
 // src/components/dropdown-menu/dropdown-menu.tsx
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
 function DropdownMenu({
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+  return /* @__PURE__ */ jsx15(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
 }
 function DropdownMenuPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
+  return /* @__PURE__ */ jsx15(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
 }
 function DropdownMenuTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx15(
     DropdownMenuPrimitive.Trigger,
     {
       "data-slot": "dropdown-menu-trigger",
@@ -1275,7 +1541,7 @@ function DropdownMenuContent({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx15(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx15(
     DropdownMenuPrimitive.Content,
     {
       asChild: true,
@@ -1283,7 +1549,7 @@ function DropdownMenuContent({
       align,
       sideOffset,
       ...props,
-      children: /* @__PURE__ */ jsx12(
+      children: /* @__PURE__ */ jsx15(
         MenuSurface,
         {
           "data-slot": "dropdown-menu-content",
@@ -1302,7 +1568,7 @@ function DropdownMenuGroup({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx15(
     DropdownMenuPrimitive.Group,
     {
       "data-slot": "dropdown-menu-group",
@@ -1317,7 +1583,7 @@ function DropdownMenuItem({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx15(
     DropdownMenuPrimitive.Item,
     {
       "data-inset": inset,
@@ -1340,7 +1606,7 @@ function DropdownMenuCheckboxItem({
   inset,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     DropdownMenuPrimitive.CheckboxItem,
     {
       checked,
@@ -1348,17 +1614,27 @@ function DropdownMenuCheckboxItem({
       "data-slot": "dropdown-menu-checkbox-item",
       className: cn(
         menuItemWithIndicatorClassName,
-        "data-inset:pl-7",
+        "data-inset:pl-7 data-[state=checked]:[&_[data-slot=dropdown-menu-checkbox-item-indeterminate]]:hidden data-[state=indeterminate]:[&_[data-slot=dropdown-menu-checkbox-item-check]]:hidden",
         className
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx15(
           "span",
           {
             className: menuItemIndicatorClassName,
             "data-slot": "dropdown-menu-checkbox-item-indicator",
-            children: /* @__PURE__ */ jsx12(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx12(CheckIcon, { className: "text-[var(--tutti-purple)]" }) })
+            children: /* @__PURE__ */ jsxs8(DropdownMenuPrimitive.ItemIndicator, { className: "grid place-content-center text-[var(--tutti-purple)]", children: [
+              /* @__PURE__ */ jsx15(CheckIcon, { "data-slot": "dropdown-menu-checkbox-item-check" }),
+              /* @__PURE__ */ jsx15(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "h-0.5 w-2.5 rounded-full bg-current",
+                  "data-slot": "dropdown-menu-checkbox-item-indeterminate"
+                }
+              )
+            ] })
           }
         ),
         children
@@ -1370,7 +1646,7 @@ function DropdownMenuRadioGroup({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx15(
     DropdownMenuPrimitive.RadioGroup,
     {
       "data-slot": "dropdown-menu-radio-group",
@@ -1385,7 +1661,7 @@ function DropdownMenuRadioItem({
   inset,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     DropdownMenuPrimitive.RadioItem,
     {
       "data-inset": inset,
@@ -1397,12 +1673,12 @@ function DropdownMenuRadioItem({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx15(
           "span",
           {
             className: menuItemIndicatorClassName,
             "data-slot": "dropdown-menu-radio-item-indicator",
-            children: /* @__PURE__ */ jsx12(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx12(CheckIcon, { className: "text-[var(--tutti-purple)]" }) })
+            children: /* @__PURE__ */ jsx15(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx15(CheckIcon, { className: "text-[var(--tutti-purple)]" }) })
           }
         ),
         children
@@ -1415,7 +1691,7 @@ function DropdownMenuLabel({
   inset,
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx15(
     DropdownMenuPrimitive.Label,
     {
       "data-inset": inset,
@@ -1432,7 +1708,7 @@ function DropdownMenuSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx15(
     DropdownMenuPrimitive.Separator,
     {
       "data-slot": "dropdown-menu-separator",
@@ -1445,7 +1721,7 @@ function DropdownMenuShortcut({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx15(
     "span",
     {
       "data-slot": "dropdown-menu-shortcut",
@@ -1460,7 +1736,7 @@ function DropdownMenuShortcut({
 function DropdownMenuSub({
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+  return /* @__PURE__ */ jsx15(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
 }
 function DropdownMenuSubTrigger({
   className,
@@ -1468,7 +1744,7 @@ function DropdownMenuSubTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     DropdownMenuPrimitive.SubTrigger,
     {
       "data-inset": inset,
@@ -1481,7 +1757,7 @@ function DropdownMenuSubTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx12(ArrowRightIcon, { className: "ml-auto text-[var(--text-tertiary)]" })
+        /* @__PURE__ */ jsx15(ArrowRightIcon, { className: "ml-auto text-[var(--text-tertiary)]" })
       ]
     }
   );
@@ -1492,13 +1768,13 @@ function DropdownMenuSubContent({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx15(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx15(
     DropdownMenuPrimitive.SubContent,
     {
       asChild: true,
       "data-slot": "dropdown-menu-sub-content",
       ...props,
-      children: /* @__PURE__ */ jsx12(
+      children: /* @__PURE__ */ jsx15(
         MenuSurface,
         {
           "data-slot": "dropdown-menu-sub-content",
@@ -1514,55 +1790,20 @@ function DropdownMenuSubContent({
   ) });
 }
 
-// src/components/input/input.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
-var inputVariantClassNames = {
-  default: "h-8 rounded-md 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-md px-3 py-0 text-[13px] leading-[1.3]",
-  sm: "h-8 rounded-md 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({
-  className,
-  size = "default",
-  type,
-  variant,
-  ...props
-}) {
-  const resolvedVariant = variant ?? (size === "sm" ? "sm" : "default");
-  return /* @__PURE__ */ jsx13(
-    "input",
-    {
-      type,
-      "data-slot": "input",
-      "data-size": size,
-      "data-variant": resolvedVariant,
-      className: cn(
-        "w-full min-w-0 appearance-none border-0 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-0 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-0 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-[11px]",
-        className
-      ),
-      ...props
-    }
-  );
-}
-
 // src/components/mention-pill/mention-pill.tsx
-import * as React7 from "react";
+import * as React8 from "react";
 
 // src/components/mention-pill/truncating-pill-label.tsx
-import * as React6 from "react";
+import * as React7 from "react";
 
 // src/components/tooltip/tooltip.tsx
 import { Tooltip as TooltipPrimitive } from "radix-ui";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function TooltipProvider({
   delayDuration = 0,
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx16(
     TooltipPrimitive.Provider,
     {
       "data-slot": "tooltip-provider",
@@ -1574,17 +1815,17 @@ function TooltipProvider({
 function Tooltip({
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
+  return /* @__PURE__ */ jsx16(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
 }
 function TooltipTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+  return /* @__PURE__ */ jsx16(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
 function TooltipPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(TooltipPrimitive.Portal, { "data-slot": "tooltip-portal", ...props });
+  return /* @__PURE__ */ jsx16(TooltipPrimitive.Portal, { "data-slot": "tooltip-portal", ...props });
 }
 function TooltipContent({
   className,
@@ -1593,7 +1834,7 @@ function TooltipContent({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(TooltipPortal, { children: /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx16(TooltipPortal, { children: /* @__PURE__ */ jsx16(
     TooltipPrimitive.Content,
     {
       "data-slot": "tooltip-content",
@@ -1610,11 +1851,11 @@ function TooltipContent({
 }
 
 // src/components/mention-pill/truncating-pill-label.tsx
-import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 function useTextOverflow(watch, descendantSelector) {
-  const ref = React6.useRef(null);
-  const [overflowing, setOverflowing] = React6.useState(false);
-  React6.useEffect(() => {
+  const ref = React7.useRef(null);
+  const [overflowing, setOverflowing] = React7.useState(false);
+  React7.useEffect(() => {
     const element = ref.current;
     if (!element) {
       return;
@@ -1647,7 +1888,7 @@ function TruncatingPillLabel({
   withTooltipProvider = true
 }) {
   const { ref: labelRef, overflowing } = useTextOverflow(tooltip);
-  const label = /* @__PURE__ */ jsx15(
+  const label = /* @__PURE__ */ jsx17(
     "span",
     {
       ref: labelRef,
@@ -1661,15 +1902,15 @@ function TruncatingPillLabel({
   if (!tooltip) {
     return label;
   }
-  const tooltipElement = /* @__PURE__ */ jsxs8(Tooltip, { children: [
-    /* @__PURE__ */ jsx15(TooltipTrigger, { asChild: true, children: label }),
-    overflowing ? /* @__PURE__ */ jsx15(TooltipContent, { className: "max-w-[min(420px,calc(100vw-32px))] whitespace-normal text-left [overflow-wrap:anywhere]", children: tooltip }) : null
+  const tooltipElement = /* @__PURE__ */ jsxs9(Tooltip, { children: [
+    /* @__PURE__ */ jsx17(TooltipTrigger, { asChild: true, children: label }),
+    overflowing ? /* @__PURE__ */ jsx17(TooltipContent, { className: "max-w-[min(420px,calc(100vw-32px))] whitespace-normal text-left [overflow-wrap:anywhere]", children: tooltip }) : null
   ] });
-  return withTooltipProvider ? /* @__PURE__ */ jsx15(TooltipProvider, { delayDuration: 200, children: tooltipElement }) : tooltipElement;
+  return withTooltipProvider ? /* @__PURE__ */ jsx17(TooltipProvider, { delayDuration: 200, children: tooltipElement }) : tooltipElement;
 }
 
 // src/components/mention-pill/mention-pill.tsx
-import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 var mentionPillTokenByKind = {
   app: "var(--rich-text-folder)",
   issue: "var(--rich-text-mention-issue)",
@@ -1703,13 +1944,13 @@ function MentionPill({
   const color = isFile && fileKind === "folder" ? "var(--folder)" : mentionPillTokenByKind[kind];
   const dataKind = mentionPillDataKindByKind[kind];
   const normalizedIconUrl = iconUrl?.trim() ?? "";
-  const [failedIconUrl, setFailedIconUrl] = React7.useState(null);
+  const [failedIconUrl, setFailedIconUrl] = React8.useState(null);
   const iconSizeClassName = "size-4";
   const iconShellClassName = isFile || kind === "session" ? "size-4" : "size-[18px]";
   const tooltipText = [label, summary].filter(
     (part) => typeof part === "string" && part.trim() !== ""
   ).join(" ");
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     "span",
     {
       className: cn(
@@ -1726,7 +1967,7 @@ function MentionPill({
       },
       ...props,
       children: [
-        /* @__PURE__ */ jsxs9(
+        /* @__PURE__ */ jsxs10(
           "span",
           {
             ...iconContainerProps,
@@ -1737,7 +1978,7 @@ function MentionPill({
               iconContainerProps?.className
             ),
             children: [
-              normalizedIconUrl && failedIconUrl !== normalizedIconUrl ? /* @__PURE__ */ jsx16(
+              normalizedIconUrl && failedIconUrl !== normalizedIconUrl ? /* @__PURE__ */ jsx18(
                 "img",
                 {
                   src: normalizedIconUrl,
@@ -1753,7 +1994,7 @@ function MentionPill({
                     setFailedIconUrl(normalizedIconUrl);
                   }
                 }
-              ) : /* @__PURE__ */ jsx16(
+              ) : /* @__PURE__ */ jsx18(
                 Icon,
                 {
                   ...fallbackIconProps,
@@ -1766,7 +2007,7 @@ function MentionPill({
                   "data-mention-pill-fallback-icon": "true"
                 }
               ),
-              removable ? /* @__PURE__ */ jsx16(
+              removable ? /* @__PURE__ */ jsx18(
                 "button",
                 {
                   "aria-label": removeButtonProps?.["aria-label"],
@@ -1776,20 +2017,20 @@ 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 text-[var(--text-secondary)] opacity-0 transition-opacity group-hover:opacity-100 hover:text-[var(--text-primary)] focus-visible:opacity-100",
                     removeButtonProps?.className
                   ),
-                  children: /* @__PURE__ */ jsx16(CloseIcon, { className: "size-3.5" })
+                  children: /* @__PURE__ */ jsx18(CloseIcon, { className: "size-3.5" })
                 }
               ) : null
             ]
           }
         ),
-        /* @__PURE__ */ jsxs9(
+        /* @__PURE__ */ jsxs10(
           TruncatingPillLabel,
           {
             tooltip: tooltipEnabled ? tooltipText : "",
             withTooltipProvider,
             children: [
-              /* @__PURE__ */ jsx16("span", { children: label }),
-              summary ? /* @__PURE__ */ jsxs9("span", { className: "text-current", children: [
+              /* @__PURE__ */ jsx18("span", { children: label }),
+              summary ? /* @__PURE__ */ jsxs10("span", { className: "text-current", children: [
                 " ",
                 summary
               ] }) : null
@@ -1801,65 +2042,15 @@ function MentionPill({
   );
 }
 
-// src/components/popover/popover.tsx
-import { Popover as PopoverPrimitive } from "radix-ui";
-import { jsx as jsx17 } from "react/jsx-runtime";
-function Popover({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx17(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
-}
-function PopoverTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx17(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
-}
-function PopoverPortal({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx17(PopoverPrimitive.Portal, { "data-slot": "popover-portal", ...props });
-}
-function PopoverClose({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx17(PopoverPrimitive.Close, { "data-slot": "popover-close", ...props });
-}
-function PopoverContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx17(PopoverPortal, { children: /* @__PURE__ */ jsx17(
-    PopoverPrimitive.Content,
-    {
-      "data-slot": "popover-content",
-      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-[13px] text-popover-foreground shadow-soft outline-hidden",
-        className
-      ),
-      style: { zIndex: "var(--z-popover)" },
-      ...props
-    }
-  ) });
-}
-function PopoverAnchor({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx17(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
-}
-
 // src/components/radio-indicator/radio-indicator.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function RadioIndicator({
   checked = false,
   disabled = false,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     "span",
     {
       ...props,
@@ -1872,7 +2063,7 @@ function RadioIndicator({
         "inline-flex size-4 shrink-0 items-center justify-center rounded-full border-2 border-[var(--border-1)] bg-transparent transition-[border-color,background-color,box-shadow] data-[state=checked]:border-[var(--tutti-purple)] data-[state=unchecked]:hover:border-[color-mix(in_srgb,var(--text-primary)_40%,transparent)] data-disabled:cursor-not-allowed data-disabled:opacity-60",
         className
       ),
-      children: checked ? /* @__PURE__ */ jsx18(
+      children: checked ? /* @__PURE__ */ jsx19(
         "span",
         {
           "aria-hidden": "true",
@@ -1885,13 +2076,13 @@ function RadioIndicator({
 
 // src/components/resizable/resizable.tsx
 import * as ResizablePrimitive from "react-resizable-panels";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function ResizablePanelGroup({
   className,
   orientation = "horizontal",
   ...props
 }) {
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     ResizablePrimitive.Group,
     {
       "data-orientation": orientation,
@@ -1906,14 +2097,14 @@ function ResizablePanelGroup({
   );
 }
 function ResizablePanel(props) {
-  return /* @__PURE__ */ jsx19(ResizablePrimitive.Panel, { "data-slot": "resizable-panel", ...props });
+  return /* @__PURE__ */ jsx20(ResizablePrimitive.Panel, { "data-slot": "resizable-panel", ...props });
 }
 function ResizableHandle({
   className,
   withHandle,
   ...props
 }) {
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     ResizablePrimitive.Separator,
     {
       "data-slot": "resizable-handle",
@@ -1922,14 +2113,14 @@ function ResizableHandle({
         className
       ),
       ...props,
-      children: withHandle ? /* @__PURE__ */ jsx19("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__ */ jsx20("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 React8 from "react";
-import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
+import * as React9 from "react";
+import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
 var MIN_THUMB_SIZE_PX = 24;
 function ScrollArea({
   className,
@@ -1966,9 +2157,9 @@ function ScrollArea({
     ...props
   };
   if (scrollbarMode === "native") {
-    return /* @__PURE__ */ jsx20(NativeScrollArea, { ...implementationProps, children });
+    return /* @__PURE__ */ jsx21(NativeScrollArea, { ...implementationProps, children });
   }
-  return /* @__PURE__ */ jsx20(CustomScrollArea, { ...implementationProps, children });
+  return /* @__PURE__ */ jsx21(CustomScrollArea, { ...implementationProps, children });
 }
 function NativeScrollArea({
   className,
@@ -1988,7 +2179,7 @@ function NativeScrollArea({
   ...props
 }) {
   const alwaysVisible = type === "always" || type === "scroll" || hasAlwaysVisibleScrollbarSelector(className);
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     ScrollAreaFrame,
     {
       ...props,
@@ -2029,11 +2220,11 @@ function CustomScrollArea({
   viewportTestId,
   ...props
 }) {
-  const localViewportRef = React8.useRef(null);
-  const contentRef = React8.useRef(null);
-  const [active, setActive] = React8.useState(false);
+  const localViewportRef = React9.useRef(null);
+  const contentRef = React9.useRef(null);
+  const [active, setActive] = React9.useState(false);
   const alwaysVisible = type === "always" || type === "scroll" || hasAlwaysVisibleScrollbarSelector(className);
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     ScrollAreaFrame,
     {
       ...props,
@@ -2069,7 +2260,7 @@ function CustomScrollArea({
       viewportTestId,
       children: [
         children,
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx21(
           ScrollAreaScrollbar,
           {
             active: active || alwaysVisible,
@@ -2094,7 +2285,7 @@ function ScrollAreaFrame({
   viewportTestId,
   ...props
 }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "div",
     {
       "data-slot": "scroll-area",
@@ -2104,7 +2295,7 @@ function ScrollAreaFrame({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx20(
+      children: /* @__PURE__ */ jsx21(
         "div",
         {
           ...viewportProps,
@@ -2115,7 +2306,7 @@ function ScrollAreaFrame({
             "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__ */ jsx20(
+          children: /* @__PURE__ */ jsx21(
             "div",
             {
               ref: contentRef,
@@ -2139,15 +2330,15 @@ function ScrollAreaScrollbar({
   orientation,
   viewportRef
 }) {
-  const trackRef = React8.useRef(null);
-  const thumbRef = React8.useRef(null);
-  const dragStateRef = React8.useRef(null);
-  const frameRef = React8.useRef(null);
-  const scrollableRef = React8.useRef(false);
-  const [dragging, setDragging] = React8.useState(false);
-  const [scrollable, setScrollable] = React8.useState(false);
-  const [trackActive, setTrackActive] = React8.useState(false);
-  const syncScrollbarState = React8.useCallback(() => {
+  const trackRef = React9.useRef(null);
+  const thumbRef = React9.useRef(null);
+  const dragStateRef = React9.useRef(null);
+  const frameRef = React9.useRef(null);
+  const scrollableRef = React9.useRef(false);
+  const [dragging, setDragging] = React9.useState(false);
+  const [scrollable, setScrollable] = React9.useState(false);
+  const [trackActive, setTrackActive] = React9.useState(false);
+  const syncScrollbarState = React9.useCallback(() => {
     const viewport = viewportRef.current;
     const track = trackRef.current;
     const thumb = thumbRef.current;
@@ -2186,7 +2377,7 @@ function ScrollAreaScrollbar({
     }
     updateScrollable(true, scrollableRef, setScrollable);
   }, [orientation, viewportRef]);
-  const scheduleSync = React8.useCallback(() => {
+  const scheduleSync = React9.useCallback(() => {
     if (frameRef.current !== null) {
       return;
     }
@@ -2195,7 +2386,7 @@ function ScrollAreaScrollbar({
       syncScrollbarState();
     });
   }, [syncScrollbarState]);
-  const scrollViewportToThumbOffset = React8.useCallback(
+  const scrollViewportToThumbOffset = React9.useCallback(
     (thumbOffset) => {
       const viewport = viewportRef.current;
       const track = trackRef.current;
@@ -2222,7 +2413,7 @@ function ScrollAreaScrollbar({
     },
     [orientation, syncScrollbarState, viewportRef]
   );
-  const handleTrackPointerDown = React8.useCallback(
+  const handleTrackPointerDown = React9.useCallback(
     (event) => {
       if (event.button !== 0 || !scrollableRef.current) {
         return;
@@ -2242,7 +2433,7 @@ function ScrollAreaScrollbar({
     },
     [orientation, scrollViewportToThumbOffset]
   );
-  const handleThumbPointerDown = React8.useCallback(
+  const handleThumbPointerDown = React9.useCallback(
     (event) => {
       if (event.button !== 0 || !scrollableRef.current) {
         return;
@@ -2274,7 +2465,7 @@ function ScrollAreaScrollbar({
     },
     [orientation, viewportRef]
   );
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     if (!dragging) {
       return;
     }
@@ -2305,7 +2496,7 @@ function ScrollAreaScrollbar({
       window.removeEventListener("pointerup", handlePointerUp);
     };
   }, [dragging, orientation, syncScrollbarState, viewportRef]);
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     const viewport = viewportRef.current;
     if (!viewport) {
       updateScrollable(false, scrollableRef, setScrollable);
@@ -2327,10 +2518,10 @@ function ScrollAreaScrollbar({
       resizeObserver?.disconnect();
     };
   }, [contentRef, scheduleSync, syncScrollbarState, viewportRef]);
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     scheduleSync();
   });
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "div",
     {
       ref: trackRef,
@@ -2348,7 +2539,7 @@ function ScrollAreaScrollbar({
       onPointerEnter: () => setTrackActive(true),
       onPointerLeave: () => setTrackActive(false),
       onPointerDown: handleTrackPointerDown,
-      children: /* @__PURE__ */ jsx20(
+      children: /* @__PURE__ */ jsx21(
         "div",
         {
           ref: thumbRef,
@@ -2367,7 +2558,7 @@ function ScrollBar({
   orientation = "vertical",
   ...props
 }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "div",
     {
       "data-slot": "scroll-area-scrollbar",
@@ -2375,7 +2566,7 @@ function ScrollBar({
       className: cn(scrollbarClassName(orientation), className),
       style: scrollbarStyle({ active: false, orientation, scrollable: true }),
       ...props,
-      children: /* @__PURE__ */ jsx20(
+      children: /* @__PURE__ */ jsx21(
         "div",
         {
           "data-slot": "scroll-area-thumb",
@@ -2496,17 +2687,17 @@ function clamp(value, min, max) {
 
 // src/components/select/select.tsx
 import { Select as SelectPrimitive } from "radix-ui";
-import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
 function Select({
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(SelectPrimitive.Root, { "data-slot": "select", ...props });
+  return /* @__PURE__ */ jsx22(SelectPrimitive.Root, { "data-slot": "select", ...props });
 }
 function SelectGroup({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     SelectPrimitive.Group,
     {
       "data-slot": "select-group",
@@ -2518,7 +2709,7 @@ function SelectGroup({
 function SelectValue({
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+  return /* @__PURE__ */ jsx22(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
 }
 function SelectTrigger({
   className,
@@ -2527,7 +2718,7 @@ function SelectTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     SelectPrimitive.Trigger,
     {
       "data-slot": "select-trigger",
@@ -2541,7 +2732,7 @@ function SelectTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx21(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx22(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx22(
           ChevronDownIcon,
           {
             className: cn("pointer-events-none size-4", "text-current")
@@ -2559,7 +2750,7 @@ function SelectContent({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx22(
     SelectPrimitive.Content,
     {
       asChild: true,
@@ -2568,7 +2759,7 @@ function SelectContent({
       position,
       align,
       ...props,
-      children: /* @__PURE__ */ jsxs11(
+      children: /* @__PURE__ */ jsxs12(
         MenuSurface,
         {
           "data-slot": "select-content",
@@ -2579,8 +2770,8 @@ function SelectContent({
           ),
           style: { zIndex: "var(--z-popover)", ...style },
           children: [
-            /* @__PURE__ */ jsx21(SelectScrollUpButton, {}),
-            /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx22(SelectScrollUpButton, {}),
+            /* @__PURE__ */ jsx22(
               SelectPrimitive.Viewport,
               {
                 "data-position": position,
@@ -2590,7 +2781,7 @@ function SelectContent({
                 children
               }
             ),
-            /* @__PURE__ */ jsx21(SelectScrollDownButton, {})
+            /* @__PURE__ */ jsx22(SelectScrollDownButton, {})
           ]
         }
       )
@@ -2601,7 +2792,7 @@ function SelectLabel({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     SelectPrimitive.Label,
     {
       "data-slot": "select-label",
@@ -2617,7 +2808,7 @@ function SelectSplitLayout({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     "div",
     {
       "data-slot": "select-split-layout",
@@ -2633,7 +2824,7 @@ function SelectSplitColumn({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     "div",
     {
       "data-slot": "select-split-column",
@@ -2646,7 +2837,7 @@ function SelectSplitColumnLabel({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     "div",
     {
       "data-slot": "select-split-column-label",
@@ -2662,7 +2853,7 @@ function SelectSplitColumnItems({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     "div",
     {
       "data-slot": "select-split-column-items",
@@ -2678,7 +2869,7 @@ function SelectSplitDivider({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     "div",
     {
       "aria-hidden": "true",
@@ -2697,21 +2888,21 @@ function SelectItem({
   forceSelectedIndicator = false,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     SelectPrimitive.Item,
     {
       "data-slot": "select-item",
       className: cn("w-full", menuItemWithIndicatorClassName, className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx21("span", { className: menuItemIndicatorClassName, children: forceSelectedIndicator ? /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx22("span", { className: menuItemIndicatorClassName, children: forceSelectedIndicator ? /* @__PURE__ */ jsx22(
           CheckIcon,
           {
             className: "pointer-events-none text-[var(--tutti-purple)]",
             "data-slot": "select-item-forced-indicator"
           }
-        ) : /* @__PURE__ */ jsx21(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx21(CheckIcon, { className: "pointer-events-none text-[var(--tutti-purple)]" }) }) }),
-        /* @__PURE__ */ jsx21(SelectPrimitive.ItemText, { children })
+        ) : /* @__PURE__ */ jsx22(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx22(CheckIcon, { className: "pointer-events-none text-[var(--tutti-purple)]" }) }) }),
+        /* @__PURE__ */ jsx22(SelectPrimitive.ItemText, { children })
       ]
     }
   );
@@ -2720,7 +2911,7 @@ function SelectSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     SelectPrimitive.Separator,
     {
       "data-slot": "select-separator",
@@ -2736,7 +2927,7 @@ function SelectScrollUpButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     SelectPrimitive.ScrollUpButton,
     {
       "data-slot": "select-scroll-up-button",
@@ -2745,7 +2936,7 @@ function SelectScrollUpButton({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx21(ChevronUpIcon, {})
+      children: /* @__PURE__ */ jsx22(ChevronUpIcon, {})
     }
   );
 }
@@ -2753,7 +2944,7 @@ function SelectScrollDownButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     SelectPrimitive.ScrollDownButton,
     {
       "data-slot": "select-scroll-down-button",
@@ -2762,21 +2953,21 @@ function SelectScrollDownButton({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx21(ChevronDownIcon, {})
+      children: /* @__PURE__ */ jsx22(ChevronDownIcon, {})
     }
   );
 }
 
 // src/components/separator/separator.tsx
 import { Separator as SeparatorPrimitive } from "radix-ui";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function Separator2({
   className,
   orientation = "horizontal",
   decorative = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     SeparatorPrimitive.Root,
     {
       "data-slot": "separator",
@@ -2792,7 +2983,7 @@ function Separator2({
 }
 
 // src/components/section-tabs/section-tabs.tsx
-import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
 function SectionTabs({
   tabs,
   value,
@@ -2801,7 +2992,7 @@ function SectionTabs({
   className,
   testId
 }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     "div",
     {
       "aria-label": ariaLabel,
@@ -2811,7 +3002,7 @@ function SectionTabs({
       role: "tablist",
       children: tabs.map((tab) => {
         const isActive = value === tab.value;
-        return /* @__PURE__ */ jsxs12(
+        return /* @__PURE__ */ jsxs13(
           "button",
           {
             "aria-selected": isActive,
@@ -2826,8 +3017,8 @@ function SectionTabs({
             type: "button",
             onClick: () => onValueChange(tab.value),
             children: [
-              /* @__PURE__ */ jsx23("span", { className: "min-w-0 truncate", children: tab.label }),
-              tab.count !== void 0 ? /* @__PURE__ */ jsx23("span", { className: "text-[15px] font-semibold leading-5 text-[inherit]", children: tab.count }) : null
+              /* @__PURE__ */ jsx24("span", { className: "min-w-0 truncate", children: tab.label }),
+              tab.count !== void 0 ? /* @__PURE__ */ jsx24("span", { className: "text-[15px] font-semibold leading-5 text-[inherit]", children: tab.count }) : null
             ]
           },
           tab.value
@@ -2838,9 +3029,9 @@ function SectionTabs({
 }
 
 // src/components/shortcut-badge/shortcut-badge.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function ShortcutBadge({ className, ...props }) {
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     "kbd",
     {
       "data-slot": "shortcut-badge",
@@ -2853,14 +3044,77 @@ function ShortcutBadge({ className, ...props }) {
   );
 }
 
+// src/components/slider/slider.tsx
+import * as React10 from "react";
+import { Slider as SliderPrimitive } from "radix-ui";
+import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
+function Slider({
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  thumbAriaLabels,
+  ...props
+}) {
+  const values = React10.useMemo(
+    () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min],
+    [defaultValue, min, value]
+  );
+  return /* @__PURE__ */ jsxs14(
+    SliderPrimitive.Root,
+    {
+      "data-slot": "slider",
+      defaultValue,
+      value,
+      min,
+      max,
+      className: cn(
+        "relative flex w-full touch-none items-center select-none outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx26(
+          SliderPrimitive.Track,
+          {
+            "data-slot": "slider-track",
+            className: "relative grow overflow-hidden rounded-full bg-[var(--transparency-block)] data-[orientation=horizontal]:h-1 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1",
+            children: /* @__PURE__ */ jsx26(
+              SliderPrimitive.Range,
+              {
+                "data-slot": "slider-range",
+                className: "absolute bg-[var(--tutti-purple)] select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+              }
+            )
+          }
+        ),
+        Array.from({ length: values.length }, (_, index) => /* @__PURE__ */ jsx26(
+          SliderPrimitive.Thumb,
+          {
+            "aria-disabled": props.disabled || void 0,
+            "aria-label": thumbAriaLabels?.[index] ?? (values.length === 1 ? ariaLabel : void 0),
+            "aria-labelledby": values.length === 1 ? ariaLabelledBy : void 0,
+            "data-slot": "slider-thumb",
+            className: "relative block size-3 shrink-0 rounded-full border border-[var(--tutti-purple)] bg-[var(--background-fronted)] shadow-none transition-[box-shadow] outline-none select-none after:absolute after:-inset-2 hover:ring-3 hover:ring-[color-mix(in_srgb,var(--tutti-purple)_20%,transparent)] focus-visible:ring-3 focus-visible:ring-[color-mix(in_srgb,var(--border-focus)_30%,transparent)] data-disabled:pointer-events-none data-disabled:hover:ring-0"
+          },
+          index
+        ))
+      ]
+    }
+  );
+}
+
 // src/components/sonner/sonner.tsx
 import {
   Toaster as SonnerToaster,
   toast
 } from "sonner";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function Toaster({ toastOptions, style, ...props }) {
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx27(
     SonnerToaster,
     {
       closeButton: true,
@@ -2869,11 +3123,11 @@ function Toaster({ toastOptions, style, ...props }) {
       position: "top-right",
       visibleToasts: 4,
       icons: {
-        error: /* @__PURE__ */ jsx25(FailedFilledIcon, { className: "size-4" }),
-        info: /* @__PURE__ */ jsx25(WarningLinedIcon, { className: "size-4" }),
-        loading: /* @__PURE__ */ jsx25(LoadingIcon, { className: "size-4 animate-spin" }),
-        success: /* @__PURE__ */ jsx25(SuccessFilledIcon, { className: "size-4" }),
-        warning: /* @__PURE__ */ jsx25(WarningFilledIcon, { className: "size-4" })
+        error: /* @__PURE__ */ jsx27(FailedFilledIcon, { className: "size-4" }),
+        info: /* @__PURE__ */ jsx27(WarningLinedIcon, { className: "size-4" }),
+        loading: /* @__PURE__ */ jsx27(LoadingIcon, { className: "size-4 animate-spin" }),
+        success: /* @__PURE__ */ jsx27(SuccessFilledIcon, { className: "size-4" }),
+        warning: /* @__PURE__ */ jsx27(WarningFilledIcon, { className: "size-4" })
       },
       style: {
         "--normal-bg": "var(--background-fronted)",
@@ -2902,7 +3156,7 @@ function Toaster({ toastOptions, style, ...props }) {
 }
 
 // src/components/spinner/spinner.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 function Spinner({
   className,
   size = 16,
@@ -2911,7 +3165,7 @@ function Spinner({
   testId,
   trackColor
 }) {
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx28(
     LoadingIcon,
     {
       "data-slot": "spinner",
@@ -2957,11 +3211,11 @@ import {
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { Slot as SlotPrimitive } from "radix-ui";
-import * as React10 from "react";
+import * as React12 from "react";
 import * as ReactDOM from "react-dom";
 
 // src/lib/compose-refs.ts
-import * as React9 from "react";
+import * as React11 from "react";
 function setRef(ref, value) {
   if (typeof ref === "function") {
     return ref(value);
@@ -2995,11 +3249,11 @@ function composeRefs(...refs) {
   };
 }
 function useComposedRefs(...refs) {
-  return React9.useCallback(composeRefs(...refs), refs);
+  return React11.useCallback(composeRefs(...refs), refs);
 }
 
 // src/components/sortable/sortable.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var orientationConfig = {
   vertical: {
     modifiers: [restrictToVerticalAxis, restrictToParentElement],
@@ -3022,9 +3276,9 @@ var CONTENT_NAME = "SortableContent";
 var ITEM_NAME = "SortableItem";
 var ITEM_HANDLE_NAME = "SortableItemHandle";
 var OVERLAY_NAME = "SortableOverlay";
-var SortableRootContext = React10.createContext(null);
+var SortableRootContext = React12.createContext(null);
 function useSortableContext(consumerName) {
-  const context = React10.useContext(SortableRootContext);
+  const context = React12.useContext(SortableRootContext);
   if (!context) {
     throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
   }
@@ -3044,8 +3298,8 @@ function Sortable(props) {
     accessibility,
     ...sortableProps
   } = props;
-  const id = React10.useId();
-  const [activeId, setActiveId] = React10.useState(null);
+  const id = React12.useId();
+  const [activeId, setActiveId] = React12.useState(null);
   const sensors = useSensors(
     useSensor(MouseSensor, {
       activationConstraint: { distance: 6 }
@@ -3057,11 +3311,11 @@ function Sortable(props) {
       coordinateGetter: sortableKeyboardCoordinates
     })
   );
-  const config = React10.useMemo(
+  const config = React12.useMemo(
     () => orientationConfig[orientation],
     [orientation]
   );
-  const getItemValue = React10.useCallback(
+  const getItemValue = React12.useCallback(
     (item) => {
       if (typeof item === "object" && !getItemValueProp) {
         throw new Error(
@@ -3072,17 +3326,17 @@ function Sortable(props) {
     },
     [getItemValueProp]
   );
-  const items = React10.useMemo(() => {
+  const items = React12.useMemo(() => {
     return value.map((item) => getItemValue(item));
   }, [value, getItemValue]);
-  const onDragStart = React10.useCallback(
+  const onDragStart = React12.useCallback(
     (event) => {
       sortableProps.onDragStart?.(event);
       setActiveId(event.active.id);
     },
     [sortableProps.onDragStart]
   );
-  const onDragEnd = React10.useCallback(
+  const onDragEnd = React12.useCallback(
     (event) => {
       sortableProps.onDragEnd?.(event);
       const { active, over } = event;
@@ -3107,14 +3361,14 @@ function Sortable(props) {
     },
     [value, onValueChange, onMove, getItemValue, sortableProps.onDragEnd]
   );
-  const onDragCancel = React10.useCallback(
+  const onDragCancel = React12.useCallback(
     (event) => {
       sortableProps.onDragCancel?.(event);
       setActiveId(null);
     },
     [sortableProps.onDragCancel]
   );
-  const contextValue = React10.useMemo(
+  const contextValue = React12.useMemo(
     () => ({
       id,
       items,
@@ -3137,11 +3391,11 @@ function Sortable(props) {
       flatCursor
     ]
   );
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx29(
     SortableRootContext.Provider,
     {
       value: contextValue,
-      children: /* @__PURE__ */ jsx27(
+      children: /* @__PURE__ */ jsx29(
         DndContext,
         {
           collisionDetection: collisionDetection ?? config.collisionDetection,
@@ -3158,7 +3412,7 @@ function Sortable(props) {
     }
   );
 }
-var SortableContentContext = React10.createContext(false);
+var SortableContentContext = React12.createContext(false);
 function SortableContent(props) {
   const {
     strategy: strategyProp,
@@ -3170,12 +3424,12 @@ function SortableContent(props) {
   } = props;
   const context = useSortableContext(CONTENT_NAME);
   const ContentPrimitive = asChild ? SlotPrimitive.Slot : "div";
-  return /* @__PURE__ */ jsx27(SortableContentContext.Provider, { value: true, children: /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx29(SortableContentContext.Provider, { value: true, children: /* @__PURE__ */ jsx29(
     SortableContext,
     {
       items: context.items,
       strategy: strategyProp ?? context.strategy,
-      children: withoutSlot ? children : /* @__PURE__ */ jsx27(
+      children: withoutSlot ? children : /* @__PURE__ */ jsx29(
         ContentPrimitive,
         {
           "data-slot": "sortable-content",
@@ -3187,9 +3441,9 @@ function SortableContent(props) {
     }
   ) });
 }
-var SortableItemContext = React10.createContext(null);
+var SortableItemContext = React12.createContext(null);
 function useSortableItemContext(consumerName) {
-  const context = React10.useContext(SortableItemContext);
+  const context = React12.useContext(SortableItemContext);
   if (!context) {
     throw new Error(`\`${consumerName}\` must be used within \`${ITEM_NAME}\``);
   }
@@ -3206,8 +3460,8 @@ function SortableItem(props) {
     ref,
     ...itemProps
   } = props;
-  const inSortableContent = React10.useContext(SortableContentContext);
-  const inSortableOverlay = React10.useContext(SortableOverlayContext);
+  const inSortableContent = React12.useContext(SortableContentContext);
+  const inSortableOverlay = React12.useContext(SortableOverlayContext);
   if (!inSortableContent && !inSortableOverlay) {
     throw new Error(
       `\`${ITEM_NAME}\` must be used within \`${CONTENT_NAME}\` or \`${OVERLAY_NAME}\``
@@ -3217,7 +3471,7 @@ function SortableItem(props) {
     throw new Error(`\`${ITEM_NAME}\` value cannot be an empty string`);
   }
   const context = useSortableContext(ITEM_NAME);
-  const id = React10.useId();
+  const id = React12.useId();
   const {
     attributes,
     listeners,
@@ -3233,14 +3487,14 @@ function SortableItem(props) {
     setNodeRef(node);
     if (asHandle) setActivatorNodeRef(node);
   });
-  const composedStyle = React10.useMemo(() => {
+  const composedStyle = React12.useMemo(() => {
     return {
       transform: CSS.Translate.toString(transform),
       transition: prefersReducedMotion ? void 0 : transition,
       ...style
     };
   }, [prefersReducedMotion, transform, transition, style]);
-  const itemContext = React10.useMemo(
+  const itemContext = React12.useMemo(
     () => ({
       id,
       attributes,
@@ -3252,7 +3506,7 @@ function SortableItem(props) {
     [id, attributes, listeners, setActivatorNodeRef, isDragging, disabled]
   );
   const ItemPrimitive = asChild ? SlotPrimitive.Slot : "div";
-  return /* @__PURE__ */ jsx27(SortableItemContext.Provider, { value: itemContext, children: /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx29(SortableItemContext.Provider, { value: itemContext, children: /* @__PURE__ */ jsx29(
     ItemPrimitive,
     {
       id,
@@ -3289,7 +3543,7 @@ function SortableItemHandle(props) {
     itemContext.setActivatorNodeRef(node);
   });
   const HandlePrimitive = asChild ? SlotPrimitive.Slot : "button";
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx29(
     HandlePrimitive,
     {
       type: "button",
@@ -3311,10 +3565,10 @@ function SortableItemHandle(props) {
   );
 }
 function usePrefersReducedMotion() {
-  const [reduced, setReduced] = React10.useState(
+  const [reduced, setReduced] = React12.useState(
     () => globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false
   );
-  React10.useEffect(() => {
+  React12.useEffect(() => {
     const query = globalThis.matchMedia?.("(prefers-reduced-motion: reduce)");
     if (!query) return;
     const update = () => setReduced(query.matches);
@@ -3324,7 +3578,7 @@ function usePrefersReducedMotion() {
   }, []);
   return reduced;
 }
-var SortableOverlayContext = React10.createContext(false);
+var SortableOverlayContext = React12.createContext(false);
 var defaultDropAnimation = {
   sideEffects: defaultDropAnimationSideEffects({
     styles: {
@@ -3343,19 +3597,19 @@ function SortableOverlay(props) {
   } = props;
   const context = useSortableContext(OVERLAY_NAME);
   const prefersReducedMotion = usePrefersReducedMotion();
-  const [mounted, setMounted] = React10.useState(false);
-  React10.useLayoutEffect(() => setMounted(true), []);
+  const [mounted, setMounted] = React12.useState(false);
+  React12.useLayoutEffect(() => setMounted(true), []);
   const container = containerProp ?? (mounted ? globalThis.document?.body : null);
   if (!container) return null;
   return ReactDOM.createPortal(
-    /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsx29(
       DragOverlay,
       {
         modifiers: context.modifiers,
         className: cn(!context.flatCursor && "cursor-grabbing"),
         ...overlayProps,
         dropAnimation: prefersReducedMotion ? null : callerDropAnimation === void 0 ? defaultDropAnimation : callerDropAnimation,
-        children: /* @__PURE__ */ jsx27(SortableOverlayContext.Provider, { value: true, children: context.activeId ? typeof children === "function" ? children({ value: context.activeId }) : children : null })
+        children: /* @__PURE__ */ jsx29(SortableOverlayContext.Provider, { value: true, children: context.activeId ? typeof children === "function" ? children({ value: context.activeId }) : children : null })
       }
     ),
     container
@@ -3364,7 +3618,7 @@ function SortableOverlay(props) {
 
 // src/components/status-dot/status-dot.tsx
 import { cva as cva4 } from "class-variance-authority";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var statusDotVariants = cva4("inline-flex shrink-0 rounded-full", {
   variants: {
     tone: {
@@ -3398,7 +3652,7 @@ function StatusDot({
   title,
   className
 }) {
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx30(
     "span",
     {
       "aria-hidden": ariaLabel ? void 0 : true,
@@ -3416,7 +3670,7 @@ function StatusDot({
 
 // src/components/switch/switch.tsx
 import { Switch as SwitchPrimitive } from "radix-ui";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function Switch({
   className,
   disabled,
@@ -3424,7 +3678,7 @@ function Switch({
   size = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx31(
     SwitchPrimitive.Root,
     {
       "data-slot": "switch",
@@ -3437,12 +3691,12 @@ function Switch({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx29(
+      children: /* @__PURE__ */ jsx31(
         SwitchPrimitive.Thumb,
         {
           "data-slot": "switch-thumb",
           className: "pointer-events-none inline-flex items-center justify-center rounded-full bg-[var(--white-stationary)] ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-[state=checked]:translate-x-[14px] group-data-[size=sm]/switch:data-[state=checked]:translate-x-[10px] group-data-[size=default]/switch:data-[state=unchecked]:translate-x-0 group-data-[size=sm]/switch:data-[state=unchecked]:translate-x-0",
-          children: loading ? /* @__PURE__ */ jsx29(
+          children: loading ? /* @__PURE__ */ jsx31(
             LoadingIcon,
             {
               "aria-hidden": "true",
@@ -3456,9 +3710,9 @@ function Switch({
 }
 
 // src/components/textarea/textarea.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function Textarea({ className, ...props }) {
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx32(
     "textarea",
     {
       "data-slot": "textarea",
@@ -3472,18 +3726,18 @@ function Textarea({ className, ...props }) {
 }
 
 // src/components/toast/toast.tsx
-import * as React11 from "react";
+import * as React13 from "react";
 import { Toast as ToastPrimitive } from "radix-ui";
 import { cva as cva5 } from "class-variance-authority";
-import { jsx as jsx31, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs15 } from "react/jsx-runtime";
 var toastDefaultDurationMs = 3e3;
 function ToastProvider({
   duration = toastDefaultDurationMs,
   ...props
 }) {
-  return /* @__PURE__ */ jsx31(ToastPrimitive.Provider, { duration, ...props });
+  return /* @__PURE__ */ jsx33(ToastPrimitive.Provider, { duration, ...props });
 }
-var ToastVisualContext = React11.createContext(null);
+var ToastVisualContext = React13.createContext(null);
 var toastStatusIconByVariant = {
   destructive: FailedFilledIcon,
   success: SuccessFilledIcon
@@ -3507,7 +3761,7 @@ function formatToastText(children) {
   if (typeof children === "string") {
     return stripToastTrailingSentencePunctuation(children);
   }
-  const flatChildren = React11.Children.toArray(children);
+  const flatChildren = React13.Children.toArray(children);
   if (flatChildren.length === 1 && typeof flatChildren[0] === "string") {
     return stripToastTrailingSentencePunctuation(flatChildren[0]);
   }
@@ -3539,7 +3793,7 @@ function ToastRoot({
   ...props
 }) {
   const isDestructive = variant === "destructive";
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx33(
     ToastPrimitive.Root,
     {
       "aria-busy": busy,
@@ -3556,7 +3810,7 @@ function ToastRoot({
         ...style
       },
       ...props,
-      children: /* @__PURE__ */ jsx31(ToastVisualContext.Provider, { value: { busy, variant }, children: /* @__PURE__ */ jsx31("span", { className: "flex min-w-0 max-w-full flex-col items-center justify-center whitespace-normal break-words text-center", children }) })
+      children: /* @__PURE__ */ jsx33(ToastVisualContext.Provider, { value: { busy, variant }, children: /* @__PURE__ */ jsx33("span", { className: "flex min-w-0 max-w-full flex-col items-center justify-center whitespace-normal break-words text-center", children }) })
     }
   );
 }
@@ -3565,9 +3819,9 @@ function ToastTitle({
   children,
   ...props
 }) {
-  const toastVisual = React11.useContext(ToastVisualContext);
+  const toastVisual = React13.useContext(ToastVisualContext);
   const StatusIcon = toastVisual?.variant && hasToastStatusIcon(toastVisual.variant) ? toastStatusIconByVariant[toastVisual.variant] : null;
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs15(
     ToastPrimitive.Title,
     {
       "data-slot": "toast-title",
@@ -3577,7 +3831,7 @@ function ToastTitle({
       ),
       ...props,
       children: [
-        toastVisual?.busy ? /* @__PURE__ */ jsx31(
+        toastVisual?.busy ? /* @__PURE__ */ jsx33(
           Spinner,
           {
             className: "shrink-0 text-current",
@@ -3585,8 +3839,8 @@ function ToastTitle({
             strokeWidth: 2,
             trackColor: "color-mix(in srgb, currentColor 28%, transparent)"
           }
-        ) : StatusIcon ? /* @__PURE__ */ jsx31(StatusIcon, { className: "size-4 shrink-0 text-current" }) : null,
-        /* @__PURE__ */ jsx31("span", { className: "min-w-0 break-words", children: formatToastText(children) })
+        ) : StatusIcon ? /* @__PURE__ */ jsx33(StatusIcon, { className: "size-4 shrink-0 text-current" }) : null,
+        /* @__PURE__ */ jsx33("span", { className: "min-w-0 break-words", children: formatToastText(children) })
       ]
     }
   );
@@ -3595,7 +3849,7 @@ function ToastDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx33(
     ToastPrimitive.Description,
     {
       "data-slot": "toast-description",
@@ -3611,7 +3865,7 @@ function ToastClose({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx33(
     ToastPrimitive.Close,
     {
       "data-slot": "toast-close",
@@ -3620,7 +3874,7 @@ function ToastClose({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx31(CloseIcon, { className: "size-4" })
+      children: /* @__PURE__ */ jsx33(CloseIcon, { className: "size-4" })
     }
   );
 }
@@ -3629,7 +3883,7 @@ function ToastViewport({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx33(
     ToastPrimitive.Viewport,
     {
       "data-slot": "toast-viewport",
@@ -3644,8 +3898,8 @@ function ToastViewport({
 }
 
 // src/components/underline-tabs/underline-tabs.tsx
-import { useEffect as useEffect6, useLayoutEffect as useLayoutEffect3, useRef as useRef4, useState as useState7 } from "react";
-import { jsx as jsx32, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useEffect as useEffect6, useLayoutEffect as useLayoutEffect3, useRef as useRef4, useState as useState8 } from "react";
+import { jsx as jsx34, jsxs as jsxs16 } from "react/jsx-runtime";
 function UnderlineTabs({
   tabs,
   value,
@@ -3663,8 +3917,8 @@ function UnderlineTabs({
   const viewportRef = useRef4(null);
   const rowRef = useRef4(null);
   const buttonRefs = useRef4({});
-  const [indicatorStyle, setIndicatorStyle] = useState7({ left: 0, width: 0 });
-  const [overflow, setOverflow] = useState7({
+  const [indicatorStyle, setIndicatorStyle] = useState8({ left: 0, width: 0 });
+  const [overflow, setOverflow] = useState8({
     canScrollLeft: false,
     canScrollRight: false
   });
@@ -3728,7 +3982,7 @@ function UnderlineTabs({
       behavior: "smooth"
     });
   };
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       "aria-label": ariaLabel,
@@ -3740,7 +3994,7 @@ function UnderlineTabs({
       "data-testid": testId,
       role: "tablist",
       children: [
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx34(
           "div",
           {
             ref: viewportRef,
@@ -3754,7 +4008,7 @@ function UnderlineTabs({
             "data-can-scroll-right": overflow.canScrollRight ? "true" : "false",
             "data-slot": "underline-tabs-viewport",
             "data-testid": viewportTestId,
-            children: /* @__PURE__ */ jsxs14(
+            children: /* @__PURE__ */ jsxs16(
               "div",
               {
                 ref: rowRef,
@@ -3762,7 +4016,7 @@ function UnderlineTabs({
                 children: [
                   tabs.map((tab) => {
                     const isActive = value === tab.value;
-                    return /* @__PURE__ */ jsxs14(
+                    return /* @__PURE__ */ jsxs16(
                       "button",
                       {
                         ref: (element) => {
@@ -3785,14 +4039,14 @@ function UnderlineTabs({
                         onClick: () => onValueChange(tab.value),
                         onMouseDown: preventMouseDownDefault ? (event) => event.preventDefault() : void 0,
                         children: [
-                          /* @__PURE__ */ jsx32("span", { children: tab.label }),
-                          tab.count !== void 0 ? /* @__PURE__ */ jsx32("span", { className: "text-[11px] font-medium leading-6 text-[inherit]", children: tab.count }) : null
+                          /* @__PURE__ */ jsx34("span", { children: tab.label }),
+                          tab.count !== void 0 ? /* @__PURE__ */ jsx34("span", { className: "text-[11px] font-medium leading-6 text-[inherit]", children: tab.count }) : null
                         ]
                       },
                       tab.value
                     );
                   }),
-                  /* @__PURE__ */ jsx32(
+                  /* @__PURE__ */ jsx34(
                     "div",
                     {
                       "aria-hidden": true,
@@ -3809,7 +4063,7 @@ function UnderlineTabs({
             )
           }
         ),
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx34(
           "button",
           {
             "aria-label": scrollLeftLabel,
@@ -3820,10 +4074,10 @@ function UnderlineTabs({
             disabled: !overflow.canScrollLeft,
             type: "button",
             onClick: () => scrollTabs("left"),
-            children: /* @__PURE__ */ jsx32(ArrowLeftIcon, { size: 16 })
+            children: /* @__PURE__ */ jsx34(ArrowLeftIcon, { size: 16 })
           }
         ),
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx34(
           "button",
           {
             "aria-label": scrollRightLabel,
@@ -3834,7 +4088,7 @@ function UnderlineTabs({
             disabled: !overflow.canScrollRight,
             type: "button",
             onClick: () => scrollTabs("right"),
-            children: /* @__PURE__ */ jsx32(ArrowRightIcon, { size: 16 })
+            children: /* @__PURE__ */ jsx34(ArrowRightIcon, { size: 16 })
           }
         )
       ]
@@ -3843,9 +4097,9 @@ function UnderlineTabs({
 }
 
 // src/components/viewport-menu-surface/viewport-menu-surface.tsx
-import * as React12 from "react";
+import * as React14 from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var VIEWPORT_MENU_PADDING = 12;
 var MENU_BOUNDARY_PADDING = 8;
 function clampMenuCoordinate(origin, size, viewportExtent, padding) {
@@ -3957,7 +4211,7 @@ function assignRef(ref, value) {
 function callHandler(handler, event) {
   handler?.(event);
 }
-var ViewportMenuSurface = React12.forwardRef(function ViewportMenuSurface2({
+var ViewportMenuSurface = React14.forwardRef(function ViewportMenuSurface2({
   open,
   placement,
   children,
@@ -3973,16 +4227,16 @@ var ViewportMenuSurface = React12.forwardRef(function ViewportMenuSurface2({
   className,
   ...rest
 }, forwardedRef) {
-  const surfaceRef = React12.useRef(null);
-  const [measuredSize, setMeasuredSize] = React12.useState(null);
-  const setRefs2 = React12.useCallback(
+  const surfaceRef = React14.useRef(null);
+  const [measuredSize, setMeasuredSize] = React14.useState(null);
+  const setRefs2 = React14.useCallback(
     (node) => {
       surfaceRef.current = node;
       assignRef(forwardedRef, node);
     },
     [forwardedRef]
   );
-  React12.useLayoutEffect(() => {
+  React14.useLayoutEffect(() => {
     if (!open) {
       setMeasuredSize(null);
       return;
@@ -4006,7 +4260,7 @@ var ViewportMenuSurface = React12.forwardRef(function ViewportMenuSurface2({
     observer.observe(element);
     return () => observer.disconnect();
   }, [open, placement]);
-  React12.useEffect(() => {
+  React14.useEffect(() => {
     if (!open) {
       return;
     }
@@ -4063,7 +4317,7 @@ var ViewportMenuSurface = React12.forwardRef(function ViewportMenuSurface2({
     onDismiss,
     open
   ]);
-  const resolvedPlacement = React12.useMemo(() => {
+  const resolvedPlacement = React14.useMemo(() => {
     if (placement.type === "absolute") {
       const boundary2 = resolveMenuBoundaryFromPoint(
         placement.boundaryPoint ?? {
@@ -4115,7 +4369,7 @@ var ViewportMenuSurface = React12.forwardRef(function ViewportMenuSurface2({
   }
   const portalTarget = resolvedPlacement.portalTarget ?? document.body;
   return createPortal3(
-    /* @__PURE__ */ jsx33(
+    /* @__PURE__ */ jsx35(
       MenuSurface,
       {
         ...rest,
@@ -4162,6 +4416,19 @@ export {
   CardContent,
   CardFooter,
   Checkbox,
+  Input,
+  menuSurfaceClassName,
+  menuItemClassName,
+  menuItemWithIndicatorClassName,
+  menuItemIndicatorClassName,
+  MenuSurface,
+  Popover,
+  PopoverTrigger,
+  PopoverPortal,
+  PopoverClose,
+  PopoverContent,
+  PopoverAnchor,
+  Combobox,
   Dialog,
   DialogTrigger,
   DialogPortal,
@@ -4173,11 +4440,6 @@ export {
   DialogTitle,
   DialogDescription,
   ConfirmationDialog,
-  menuSurfaceClassName,
-  menuItemClassName,
-  menuItemWithIndicatorClassName,
-  menuItemIndicatorClassName,
-  MenuSurface,
   ContextMenu,
   ContextMenuTrigger,
   ContextMenuContent,
@@ -4212,7 +4474,6 @@ export {
   DropdownMenuSub,
   DropdownMenuSubTrigger,
   DropdownMenuSubContent,
-  Input,
   TooltipProvider,
   Tooltip,
   TooltipTrigger,
@@ -4221,12 +4482,6 @@ export {
   useTextOverflow,
   TruncatingPillLabel,
   MentionPill,
-  Popover,
-  PopoverTrigger,
-  PopoverPortal,
-  PopoverClose,
-  PopoverContent,
-  PopoverAnchor,
   RadioIndicator,
   ResizablePanelGroup,
   ResizablePanel,
@@ -4251,6 +4506,7 @@ export {
   Separator2 as Separator,
   SectionTabs,
   ShortcutBadge,
+  Slider,
   toast,
   Toaster,
   Spinner,
@@ -4273,4 +4529,4 @@ export {
   UnderlineTabs,
   ViewportMenuSurface
 };
-//# sourceMappingURL=chunk-45TFBBVS.js.map
+//# sourceMappingURL=chunk-OW6744SQ.js.map