@nextop-os/ui-system 0.0.25 → 0.0.27

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

@@ -1,15 +1,18 @@
 import {
+  AgentSessionsIcon,
   ArrowLeftIcon,
   ArrowRightIcon,
   CheckIcon,
   ChevronDownIcon,
-  ChevronRightIcon,
   ChevronUpIcon,
   CloseIcon,
   FailedFilledIcon,
+  FileIcon,
+  FolderFilledIcon,
+  IssueIcon,
   LoadingIcon,
   SuccessFilledIcon
-} from "./chunk-TYJPBTBR.js";
+} from "./chunk-UELLN5VR.js";
 import {
   cn
 } from "./chunk-DGPY4WP3.js";
@@ -23,8 +26,8 @@ var badgeVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-transparency-block text-[var(--text-secondary)] [a]:hover:bg-transparency-hover",
-        secondary: "bg-transparency-block text-[var(--text-secondary)] [a]:hover:bg-transparency-hover",
+        default: "bg-[var(--transparency-block)] text-[var(--text-secondary)] [a]:hover:bg-[var(--transparency-hover)]",
+        secondary: "bg-[var(--transparency-block)] text-[var(--text-secondary)] [a]:hover:bg-[var(--transparency-hover)]",
         destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/18",
         outline: "border-border bg-card/90 text-foreground [a]:hover:bg-muted [a]:hover:text-foreground",
         ghost: "hover:bg-accent/80 hover:text-accent-foreground dark:hover:bg-muted/50",
@@ -68,7 +71,7 @@ var buttonVariants = cva2(
         secondary: "bg-transparency-block text-[var(--text-primary)] hover:bg-transparency-hover aria-expanded:bg-transparency-hover aria-expanded:text-[var(--text-primary)]",
         ghost: "bg-transparent text-[var(--text-primary)] hover:bg-transparency-hover aria-expanded:bg-transparency-hover aria-expanded:text-[var(--text-primary)]",
         chrome: "border border-transparent bg-transparent text-[var(--text-tertiary)] shadow-none hover:border-transparent hover:bg-[var(--transparency-hover)] hover:text-[var(--text-primary)] active:bg-[var(--transparency-active)] active:text-[var(--text-primary)] aria-expanded:border-transparent aria-expanded:bg-[var(--transparency-block)] aria-expanded:text-[var(--text-primary)] disabled:pointer-events-auto disabled:cursor-not-allowed disabled:opacity-45",
-        destructive: "bg-[var(--state-danger)] text-[var(--text-inverted)] hover:bg-[var(--state-danger-hover)] focus-visible:border-[var(--state-danger)] focus-visible:ring-[color-mix(in_srgb,var(--state-danger)_25%,transparent)]",
+        destructive: "bg-[var(--state-danger)] text-[var(--white-stationary)] hover:bg-[var(--state-danger-hover)] focus-visible:border-[var(--state-danger)] focus-visible:ring-[color-mix(in_srgb,var(--state-danger)_25%,transparent)]",
         link: "text-primary underline-offset-4 hover:underline"
       },
       size: {
@@ -221,7 +224,7 @@ function Checkbox({
     {
       "data-slot": "checkbox",
       className: cn(
-        "peer inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-border/70 bg-[var(--workbench-field-bg)] text-[var(--text-inverted)] transition-[background-color,border-color,color,box-shadow] outline-none focus-visible:border-border focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:border-[var(--border-1)] disabled:bg-muted disabled:text-[var(--text-inverted)] disabled:opacity-100 data-disabled:border-[var(--border-1)] aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-[state=checked]:border-[var(--text-primary)] data-[state=checked]:bg-[var(--text-primary)] data-[state=unchecked]:hover:border-[color-mix(in_srgb,var(--text-primary)_40%,transparent)] disabled:data-[state=checked]:border-[var(--border-1)] disabled:data-[state=checked]:bg-[var(--text-disabled)] data-disabled:data-[state=checked]:border-[var(--border-1)]",
+        "peer inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-[var(--border-1)] bg-[var(--transparency-block)] text-[var(--text-inverted)] transition-[background-color,border-color,color,box-shadow] outline-none focus-visible:border-[var(--border-focus)] focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--border-focus)_30%,transparent)] disabled:cursor-not-allowed disabled:border-[var(--border-1)] disabled:bg-[var(--transparency-block)] disabled:text-[var(--text-inverted)] disabled:opacity-100 data-disabled:border-[var(--border-1)] aria-invalid:border-[var(--state-danger)] aria-invalid:ring-2 aria-invalid:ring-[color-mix(in_srgb,var(--state-danger)_20%,transparent)] data-[state=checked]:border-[var(--text-primary)] data-[state=checked]:bg-[var(--text-primary)] data-[state=unchecked]:hover:border-[color-mix(in_srgb,var(--text-primary)_40%,transparent)] disabled:data-[state=checked]:border-[var(--border-1)] disabled:data-[state=checked]:bg-[var(--text-disabled)] data-disabled:data-[state=checked]:border-[var(--border-1)]",
         className
       ),
       ...props,
@@ -427,7 +430,7 @@ function DialogDescription({
     {
       "data-slot": "dialog-description",
       className: cn(
-        "text-sm leading-[1.3] text-text-secondary *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        "text-sm font-[400] leading-[1.3] text-text-secondary *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
         className
       ),
       ...props
@@ -889,7 +892,7 @@ import * as React3 from "react";
 import { Slot as Slot3 } 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-sm text-[var(--text-primary)] shadow-panel outline-none";
-var menuItemClassName = "relative flex cursor-pointer items-center gap-1.5 rounded-sm px-2 py-1 text-sm text-[var(--text-primary)] outline-hidden transition-colors duration-200 select-none hover:bg-[var(--transparency-block)] hover:text-[var(--text-primary)] focus:bg-[var(--transparency-block)] focus:text-[var(--text-primary)] data-[highlighted]:bg-[var(--transparency-block)] data-[highlighted]:text-[var(--text-primary)] data-disabled:pointer-events-none data-disabled:text-[var(--text-disabled)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2";
+var menuItemClassName = "relative flex cursor-pointer items-center gap-1.5 rounded-sm px-2 py-1 text-sm text-[var(--text-primary)] outline-hidden transition-colors duration-200 select-none hover:bg-[var(--transparency-hover)] hover:text-[var(--text-primary)] focus:bg-[var(--transparency-hover)] focus:text-[var(--text-primary)] data-[highlighted]:bg-[var(--transparency-hover)] data-[highlighted]:text-[var(--text-primary)] data-disabled:pointer-events-none data-disabled:text-[var(--text-disabled)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2";
 var menuItemWithIndicatorClassName = `${menuItemClassName} pr-8`;
 var menuItemIndicatorClassName = "pointer-events-none absolute right-2 flex size-4 items-center justify-center";
 var MenuSurface = React3.forwardRef(
@@ -939,6 +942,7 @@ function DropdownMenuTrigger({
 }
 function DropdownMenuContent({
   className,
+  children,
   align = "start",
   sideOffset = 4,
   style,
@@ -960,7 +964,8 @@ function DropdownMenuContent({
             "z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto",
             className
           ),
-          style: { zIndex: "var(--z-popover)", ...style }
+          style: { zIndex: "var(--z-popover)", ...style },
+          children
         }
       )
     }
@@ -1149,13 +1154,14 @@ function DropdownMenuSubTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx9(ChevronRightIcon, { className: "ml-auto" })
+        /* @__PURE__ */ jsx9(ArrowRightIcon, { className: "ml-auto" })
       ]
     }
   );
 }
 function DropdownMenuSubContent({
   className,
+  children,
   style,
   ...props
 }) {
@@ -1173,7 +1179,8 @@ function DropdownMenuSubContent({
             "z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden",
             className
           ),
-          style: { zIndex: "var(--z-popover)", ...style }
+          style: { zIndex: "var(--z-popover)", ...style },
+          children
         }
       )
     }
@@ -1185,7 +1192,7 @@ import { jsx as jsx10 } from "react/jsx-runtime";
 var inputVariantClassNames = {
   default: "h-8 rounded-[6px] px-3 py-0 text-sm leading-[1.3]",
   lg: "h-12 rounded-[8px] px-4 py-3 text-base leading-[1.3]",
-  md: "h-10 rounded-[8px] px-3 py-0 text-sm leading-[1.3]",
+  md: "h-8 rounded-[6px] px-3 py-0 text-sm leading-[1.3]",
   sm: "h-8 rounded-[6px] px-3 py-0 text-sm leading-[1.3]",
   otp: "h-12 w-12 rounded-[4px] px-0 text-center text-xl font-medium sm:h-14 sm:w-14 sm:text-2xl"
 };
@@ -1215,28 +1222,121 @@ function Input({
   );
 }
 
+// src/components/mention-pill/mention-pill.tsx
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+var mentionPillTokenByKind = {
+  issue: "var(--rich-text-mention-issue)",
+  session: "var(--rich-text-mention-session)",
+  file: "var(--rich-text-mention-file)"
+};
+var mentionPillDataKindByKind = {
+  issue: "task",
+  session: "session",
+  file: "file"
+};
+function MentionPill({
+  className,
+  fileKind = "file",
+  kind,
+  label,
+  removable = kind === "file",
+  removeButtonProps,
+  style,
+  summary,
+  ...props
+}) {
+  const isFile = kind === "file";
+  const Icon = isFile ? fileKind === "folder" ? FolderFilledIcon : FileIcon : kind === "issue" ? IssueIcon : AgentSessionsIcon;
+  const color = isFile && fileKind === "folder" ? "var(--rich-text-folder)" : mentionPillTokenByKind[kind];
+  const dataKind = mentionPillDataKindByKind[kind];
+  const iconSizeClassName = isFile ? "size-3.5" : "size-4";
+  const iconShellClassName = isFile ? "size-3.5" : "size-[18px]";
+  return /* @__PURE__ */ jsxs5(
+    "span",
+    {
+      className: cn(
+        "group relative top-[3px] inline-flex max-w-full cursor-default items-center overflow-hidden rounded-[4px] border border-transparent bg-transparent py-0.5 align-baseline text-sm font-medium leading-5 no-underline transition-colors hover:border-transparent hover:bg-[color-mix(in_srgb,currentColor_12%,transparent)]",
+        isFile ? "gap-1.5 px-1.5" : "gap-1 px-1",
+        className
+      ),
+      "data-agent-file-mention": "true",
+      "data-agent-mention-kind": dataKind,
+      "data-slot": "mention-pill",
+      style: {
+        color,
+        ...style
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs5(
+          "span",
+          {
+            "aria-hidden": removable ? void 0 : true,
+            className: cn(
+              "relative grid shrink-0 place-items-center",
+              iconShellClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsx11(
+                Icon,
+                {
+                  className: cn(
+                    "text-current transition-opacity",
+                    removable && "group-hover:opacity-0 group-focus-within:opacity-0",
+                    iconSizeClassName
+                  )
+                }
+              ),
+              removable ? /* @__PURE__ */ jsx11(
+                "button",
+                {
+                  "aria-label": removeButtonProps?.["aria-label"],
+                  type: "button",
+                  ...removeButtonProps,
+                  className: cn(
+                    "absolute top-1/2 left-1/2 inline-flex size-5 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-sm text-[var(--text-secondary)] opacity-0 transition-opacity group-hover:opacity-100 hover:bg-transparency-block hover:text-[var(--text-primary)] focus-visible:opacity-100",
+                    removeButtonProps?.className
+                  ),
+                  children: /* @__PURE__ */ jsx11(CloseIcon, { className: "size-3.5" })
+                }
+              ) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs5("span", { className: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap", children: [
+          /* @__PURE__ */ jsx11("span", { children: label }),
+          summary ? /* @__PURE__ */ jsxs5("span", { className: "text-current", children: [
+            " ",
+            summary
+          ] }) : null
+        ] })
+      ]
+    }
+  );
+}
+
 // src/components/popover/popover.tsx
 import { Popover as PopoverPrimitive } from "radix-ui";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function Popover({
   ...props
 }) {
-  return /* @__PURE__ */ jsx11(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+  return /* @__PURE__ */ jsx12(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
 }
 function PopoverTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx11(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+  return /* @__PURE__ */ jsx12(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
 }
 function PopoverPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx11(PopoverPrimitive.Portal, { "data-slot": "popover-portal", ...props });
+  return /* @__PURE__ */ jsx12(PopoverPrimitive.Portal, { "data-slot": "popover-portal", ...props });
 }
 function PopoverClose({
   ...props
 }) {
-  return /* @__PURE__ */ jsx11(PopoverPrimitive.Close, { "data-slot": "popover-close", ...props });
+  return /* @__PURE__ */ jsx12(PopoverPrimitive.Close, { "data-slot": "popover-close", ...props });
 }
 function PopoverContent({
   className,
@@ -1244,7 +1344,7 @@ function PopoverContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ jsx11(PopoverPortal, { children: /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(PopoverPortal, { children: /* @__PURE__ */ jsx12(
     PopoverPrimitive.Content,
     {
       "data-slot": "popover-content",
@@ -1262,18 +1362,18 @@ function PopoverContent({
 function PopoverAnchor({
   ...props
 }) {
-  return /* @__PURE__ */ jsx11(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
+  return /* @__PURE__ */ jsx12(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
 }
 
 // src/components/resizable/resizable.tsx
 import * as ResizablePrimitive from "react-resizable-panels";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function ResizablePanelGroup({
   className,
   orientation = "horizontal",
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     ResizablePrimitive.Group,
     {
       "data-orientation": orientation,
@@ -1288,43 +1388,43 @@ function ResizablePanelGroup({
   );
 }
 function ResizablePanel(props) {
-  return /* @__PURE__ */ jsx12(ResizablePrimitive.Panel, { "data-slot": "resizable-panel", ...props });
+  return /* @__PURE__ */ jsx13(ResizablePrimitive.Panel, { "data-slot": "resizable-panel", ...props });
 }
 function ResizableHandle({
   className,
   withHandle,
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     ResizablePrimitive.Separator,
     {
       "data-slot": "resizable-handle",
       className: cn(
-        "group relative flex items-center justify-center bg-transparent outline-none after:absolute after:bg-border/70 after:transition-colors hover:after:bg-border focus-visible:after:bg-ring aria-[orientation=horizontal]:h-2 aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:cursor-row-resize aria-[orientation=horizontal]:after:inset-x-0 aria-[orientation=horizontal]:after:top-1/2 aria-[orientation=horizontal]:after:h-px aria-[orientation=horizontal]:after:-translate-y-1/2 aria-[orientation=vertical]:h-full aria-[orientation=vertical]:w-2 aria-[orientation=vertical]:cursor-col-resize aria-[orientation=vertical]:after:inset-y-0 aria-[orientation=vertical]:after:left-1/2 aria-[orientation=vertical]:after:w-px aria-[orientation=vertical]:after:-translate-x-1/2",
+        "group relative flex items-center justify-center bg-transparent outline-none after:absolute after:bg-border/70 after:transition-colors hover:after:bg-border focus-visible:after:bg-ring aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:cursor-row-resize aria-[orientation=horizontal]:after:inset-x-0 aria-[orientation=horizontal]:after:top-1/2 aria-[orientation=horizontal]:after:h-px aria-[orientation=horizontal]:after:-translate-y-1/2 aria-[orientation=vertical]:h-full aria-[orientation=vertical]:w-px aria-[orientation=vertical]:cursor-col-resize aria-[orientation=vertical]:after:inset-y-0 aria-[orientation=vertical]:after:left-1/2 aria-[orientation=vertical]:after:w-px aria-[orientation=vertical]:after:-translate-x-1/2",
         className
       ),
       ...props,
-      children: withHandle ? /* @__PURE__ */ jsx12("div", { className: "z-10 flex items-center justify-center rounded-full bg-border/85 transition-colors group-hover:bg-border 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__ */ jsx13("div", { className: "z-10 flex items-center justify-center rounded-full bg-border/85 opacity-0 transition-[background-color,opacity] group-hover:bg-border group-hover:opacity-100 group-focus-visible:bg-border group-focus-visible:opacity-100 group-aria-[orientation=horizontal]:h-[3px] group-aria-[orientation=horizontal]:w-10 group-aria-[orientation=vertical]:h-10 group-aria-[orientation=vertical]:w-[3px]" }) : null
     }
   );
 }
 
 // src/components/scroll-area/scroll-area.tsx
 import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
-import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
 function ScrollArea({
   className,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     ScrollAreaPrimitive.Root,
     {
       "data-slot": "scroll-area",
       className: cn("group/scroll-area relative", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(
           ScrollAreaPrimitive.Viewport,
           {
             "data-slot": "scroll-area-viewport",
@@ -1332,8 +1432,8 @@ function ScrollArea({
             children
           }
         ),
-        /* @__PURE__ */ jsx13(ScrollBar, {}),
-        /* @__PURE__ */ jsx13(ScrollAreaPrimitive.Corner, {})
+        /* @__PURE__ */ jsx14(ScrollBar, {}),
+        /* @__PURE__ */ jsx14(ScrollAreaPrimitive.Corner, {})
       ]
     }
   );
@@ -1343,7 +1443,7 @@ function ScrollBar({
   orientation = "vertical",
   ...props
 }) {
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     ScrollAreaPrimitive.ScrollAreaScrollbar,
     {
       "data-slot": "scroll-area-scrollbar",
@@ -1354,7 +1454,7 @@ function ScrollBar({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx13(
+      children: /* @__PURE__ */ jsx14(
         ScrollAreaPrimitive.ScrollAreaThumb,
         {
           "data-slot": "scroll-area-thumb",
@@ -1367,17 +1467,17 @@ function ScrollBar({
 
 // src/components/select/select.tsx
 import { Select as SelectPrimitive } from "radix-ui";
-import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
 function Select({
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(SelectPrimitive.Root, { "data-slot": "select", ...props });
+  return /* @__PURE__ */ jsx15(SelectPrimitive.Root, { "data-slot": "select", ...props });
 }
 function SelectGroup({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     SelectPrimitive.Group,
     {
       "data-slot": "select-group",
@@ -1389,7 +1489,7 @@ function SelectGroup({
 function SelectValue({
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+  return /* @__PURE__ */ jsx15(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
 }
 function SelectTrigger({
   className,
@@ -1397,7 +1497,7 @@ function SelectTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     SelectPrimitive.Trigger,
     {
       "data-slot": "select-trigger",
@@ -1409,7 +1509,7 @@ function SelectTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx14(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx14(ChevronDownIcon, { className: "pointer-events-none size-4 text-[var(--text-secondary)]" }) })
+        /* @__PURE__ */ jsx15(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx15(ChevronDownIcon, { className: "pointer-events-none size-4 text-[var(--text-secondary)]" }) })
       ]
     }
   );
@@ -1422,7 +1522,7 @@ function SelectContent({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx15(
     SelectPrimitive.Content,
     {
       asChild: true,
@@ -1431,7 +1531,7 @@ function SelectContent({
       position,
       align,
       ...props,
-      children: /* @__PURE__ */ jsxs6(
+      children: /* @__PURE__ */ jsxs7(
         MenuSurface,
         {
           "data-slot": "select-content",
@@ -1442,8 +1542,8 @@ function SelectContent({
           ),
           style: { zIndex: "var(--z-popover)", ...style },
           children: [
-            /* @__PURE__ */ jsx14(SelectScrollUpButton, {}),
-            /* @__PURE__ */ jsx14(
+            /* @__PURE__ */ jsx15(SelectScrollUpButton, {}),
+            /* @__PURE__ */ jsx15(
               SelectPrimitive.Viewport,
               {
                 "data-position": position,
@@ -1453,7 +1553,7 @@ function SelectContent({
                 children
               }
             ),
-            /* @__PURE__ */ jsx14(SelectScrollDownButton, {})
+            /* @__PURE__ */ jsx15(SelectScrollDownButton, {})
           ]
         }
       )
@@ -1464,7 +1564,7 @@ function SelectLabel({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     SelectPrimitive.Label,
     {
       "data-slot": "select-label",
@@ -1480,7 +1580,7 @@ function SelectSplitLayout({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     "div",
     {
       "data-slot": "select-split-layout",
@@ -1496,7 +1596,7 @@ function SelectSplitColumn({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     "div",
     {
       "data-slot": "select-split-column",
@@ -1509,7 +1609,7 @@ function SelectSplitColumnLabel({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     "div",
     {
       "data-slot": "select-split-column-label",
@@ -1525,7 +1625,7 @@ function SelectSplitColumnItems({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     "div",
     {
       "data-slot": "select-split-column-items",
@@ -1541,7 +1641,7 @@ function SelectSplitDivider({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     "div",
     {
       "aria-hidden": "true",
@@ -1559,15 +1659,15 @@ function SelectItem({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     SelectPrimitive.Item,
     {
       "data-slot": "select-item",
       className: cn("w-full", menuItemWithIndicatorClassName, className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx14("span", { className: menuItemIndicatorClassName, children: /* @__PURE__ */ jsx14(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx14(CheckIcon, { className: "pointer-events-none" }) }) }),
-        /* @__PURE__ */ jsx14(SelectPrimitive.ItemText, { children })
+        /* @__PURE__ */ jsx15("span", { className: menuItemIndicatorClassName, children: /* @__PURE__ */ jsx15(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx15(CheckIcon, { className: "pointer-events-none" }) }) }),
+        /* @__PURE__ */ jsx15(SelectPrimitive.ItemText, { children })
       ]
     }
   );
@@ -1576,7 +1676,7 @@ function SelectSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     SelectPrimitive.Separator,
     {
       "data-slot": "select-separator",
@@ -1592,7 +1692,7 @@ function SelectScrollUpButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     SelectPrimitive.ScrollUpButton,
     {
       "data-slot": "select-scroll-up-button",
@@ -1601,7 +1701,7 @@ function SelectScrollUpButton({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx14(ChevronUpIcon, {})
+      children: /* @__PURE__ */ jsx15(ChevronUpIcon, {})
     }
   );
 }
@@ -1609,7 +1709,7 @@ function SelectScrollDownButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     SelectPrimitive.ScrollDownButton,
     {
       "data-slot": "select-scroll-down-button",
@@ -1618,21 +1718,21 @@ function SelectScrollDownButton({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx14(ChevronDownIcon, {})
+      children: /* @__PURE__ */ jsx15(ChevronDownIcon, {})
     }
   );
 }
 
 // src/components/separator/separator.tsx
 import { Separator as SeparatorPrimitive } from "radix-ui";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function Separator2({
   className,
   orientation = "horizontal",
   decorative = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     SeparatorPrimitive.Root,
     {
       "data-slot": "separator",
@@ -1648,7 +1748,7 @@ function Separator2({
 }
 
 // src/components/spinner/spinner.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function Spinner({
   className,
   size = 16,
@@ -1657,7 +1757,7 @@ function Spinner({
   testId,
   trackColor
 }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     LoadingIcon,
     {
       "data-slot": "spinner",
@@ -1677,7 +1777,7 @@ function Spinner({
 
 // src/components/status-dot/status-dot.tsx
 import { cva as cva3 } from "class-variance-authority";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var statusDotVariants = cva3("inline-flex shrink-0 rounded-full", {
   variants: {
     tone: {
@@ -1711,7 +1811,7 @@ function StatusDot({
   title,
   className
 }) {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     "span",
     {
       "aria-hidden": ariaLabel ? void 0 : true,
@@ -1729,27 +1829,27 @@ function StatusDot({
 
 // src/components/switch/switch.tsx
 import { Switch as SwitchPrimitive } from "radix-ui";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function Switch({
   className,
   size = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     SwitchPrimitive.Root,
     {
       "data-slot": "switch",
       "data-size": size,
       className: cn(
-        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-[background-color,border-color,box-shadow] outline-none focus-visible:border-border focus-visible:ring-2 focus-visible:ring-ring/30 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 data-[size=default]:h-[18px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-100",
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-[background-color,border-color,box-shadow] outline-none focus-visible:border-[var(--border-focus)] focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--border-focus)_30%,transparent)] aria-invalid:border-[var(--state-danger)] aria-invalid:ring-2 aria-invalid:ring-[color-mix(in_srgb,var(--state-danger)_20%,transparent)] data-[size=default]:h-[18px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] data-[state=checked]:bg-[var(--accent)] data-[state=unchecked]:bg-[var(--text-disabled)] data-disabled:cursor-not-allowed data-disabled:opacity-100",
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx18(
+      children: /* @__PURE__ */ jsx19(
         SwitchPrimitive.Thumb,
         {
           "data-slot": "switch-thumb",
-          className: "pointer-events-none block 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-[1px] group-data-[size=sm]/switch:data-[state=unchecked]:translate-x-[1px]"
+          className: "pointer-events-none block 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"
         }
       )
     }
@@ -1757,9 +1857,9 @@ function Switch({
 }
 
 // src/components/textarea/textarea.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function Textarea({ className, ...props }) {
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     "textarea",
     {
       "data-slot": "textarea",
@@ -1776,7 +1876,7 @@ function Textarea({ className, ...props }) {
 import * as React4 from "react";
 import { Toast as ToastPrimitive } from "radix-ui";
 import { cva as cva4 } from "class-variance-authority";
-import { jsx as jsx20, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs8 } from "react/jsx-runtime";
 var ToastProvider = ToastPrimitive.Provider;
 var ToastVisualContext = React4.createContext(null);
 var toastStatusIconByVariant = {
@@ -1814,7 +1914,7 @@ var toastVariants = cva4(
     variants: {
       variant: {
         default: "border border-[var(--toast-neutral-border)] bg-[var(--toast-neutral-bg)] text-[var(--toast-neutral-fg)]",
-        destructive: "border-0 bg-[var(--state-danger)] text-[var(--text-inverted)]",
+        destructive: "border-0 bg-[var(--state-danger)] text-[var(--white-stationary)]",
         success: "border-0 bg-[var(--state-success)] text-[var(--text-inverted)]"
       }
     },
@@ -1834,7 +1934,7 @@ function ToastRoot({
   ...props
 }) {
   const isDestructive = variant === "destructive";
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     ToastPrimitive.Root,
     {
       "aria-busy": busy,
@@ -1851,7 +1951,7 @@ function ToastRoot({
         ...style
       },
       ...props,
-      children: /* @__PURE__ */ jsx20(ToastVisualContext.Provider, { value: { busy, variant }, children: /* @__PURE__ */ jsx20("span", { className: "flex min-w-0 max-w-full flex-col items-center justify-center whitespace-normal break-words text-center", children }) })
+      children: /* @__PURE__ */ jsx21(ToastVisualContext.Provider, { value: { busy, variant }, children: /* @__PURE__ */ jsx21("span", { className: "flex min-w-0 max-w-full flex-col items-center justify-center whitespace-normal break-words text-center", children }) })
     }
   );
 }
@@ -1862,7 +1962,7 @@ function ToastTitle({
 }) {
   const toastVisual = React4.useContext(ToastVisualContext);
   const StatusIcon = toastVisual?.variant && hasToastStatusIcon(toastVisual.variant) ? toastStatusIconByVariant[toastVisual.variant] : null;
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     ToastPrimitive.Title,
     {
       "data-slot": "toast-title",
@@ -1872,7 +1972,7 @@ function ToastTitle({
       ),
       ...props,
       children: [
-        toastVisual?.busy ? /* @__PURE__ */ jsx20(
+        toastVisual?.busy ? /* @__PURE__ */ jsx21(
           Spinner,
           {
             className: "shrink-0 text-current",
@@ -1880,8 +1980,8 @@ function ToastTitle({
             strokeWidth: 3,
             trackColor: "color-mix(in srgb, currentColor 28%, transparent)"
           }
-        ) : StatusIcon ? /* @__PURE__ */ jsx20(StatusIcon, { className: "size-4 shrink-0 text-current" }) : null,
-        /* @__PURE__ */ jsx20("span", { className: "min-w-0 break-words", children: formatToastText(children) })
+        ) : StatusIcon ? /* @__PURE__ */ jsx21(StatusIcon, { className: "size-4 shrink-0 text-current" }) : null,
+        /* @__PURE__ */ jsx21("span", { className: "min-w-0 break-words", children: formatToastText(children) })
       ]
     }
   );
@@ -1890,7 +1990,7 @@ function ToastDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     ToastPrimitive.Description,
     {
       "data-slot": "toast-description",
@@ -1906,7 +2006,7 @@ function ToastClose({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     ToastPrimitive.Close,
     {
       "data-slot": "toast-close",
@@ -1915,7 +2015,7 @@ function ToastClose({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx20(CloseIcon, { className: "size-4" })
+      children: /* @__PURE__ */ jsx21(CloseIcon, { className: "size-4" })
     }
   );
 }
@@ -1924,7 +2024,7 @@ function ToastViewport({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     ToastPrimitive.Viewport,
     {
       "data-slot": "toast-viewport",
@@ -1940,12 +2040,12 @@ function ToastViewport({
 
 // src/components/tooltip/tooltip.tsx
 import { Tooltip as TooltipPrimitive } from "radix-ui";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function TooltipProvider({
   delayDuration = 0,
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     TooltipPrimitive.Provider,
     {
       "data-slot": "tooltip-provider",
@@ -1957,25 +2057,25 @@ function TooltipProvider({
 function Tooltip({
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
+  return /* @__PURE__ */ jsx22(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
 }
 function TooltipTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+  return /* @__PURE__ */ jsx22(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
 function TooltipPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(TooltipPrimitive.Portal, { "data-slot": "tooltip-portal", ...props });
+  return /* @__PURE__ */ jsx22(TooltipPrimitive.Portal, { "data-slot": "tooltip-portal", ...props });
 }
 function TooltipContent({
   className,
-  sideOffset = 24,
+  sideOffset = 8,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx21(TooltipPortal, { children: /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(TooltipPortal, { children: /* @__PURE__ */ jsx22(
     TooltipPrimitive.Content,
     {
       "data-slot": "tooltip-content",
@@ -1993,7 +2093,7 @@ function TooltipContent({
 
 // src/components/underline-tabs/underline-tabs.tsx
 import { useEffect as useEffect3, useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState as useState3 } from "react";
-import { jsx as jsx22, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs9 } from "react/jsx-runtime";
 function UnderlineTabs({
   tabs,
   value,
@@ -2076,7 +2176,7 @@ function UnderlineTabs({
       behavior: "smooth"
     });
   };
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       "aria-label": ariaLabel,
@@ -2088,7 +2188,7 @@ function UnderlineTabs({
       "data-testid": testId,
       role: "tablist",
       children: [
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx23(
           "div",
           {
             ref: viewportRef,
@@ -2102,7 +2202,7 @@ function UnderlineTabs({
             "data-can-scroll-right": overflow.canScrollRight ? "true" : "false",
             "data-slot": "underline-tabs-viewport",
             "data-testid": viewportTestId,
-            children: /* @__PURE__ */ jsxs8(
+            children: /* @__PURE__ */ jsxs9(
               "div",
               {
                 ref: rowRef,
@@ -2110,7 +2210,7 @@ function UnderlineTabs({
                 children: [
                   tabs.map((tab) => {
                     const isActive = value === tab.value;
-                    return /* @__PURE__ */ jsxs8(
+                    return /* @__PURE__ */ jsxs9(
                       "button",
                       {
                         ref: (element) => {
@@ -2133,14 +2233,14 @@ function UnderlineTabs({
                         onClick: () => onValueChange(tab.value),
                         onMouseDown: preventMouseDownDefault ? (event) => event.preventDefault() : void 0,
                         children: [
-                          /* @__PURE__ */ jsx22("span", { children: tab.label }),
-                          tab.count !== void 0 ? /* @__PURE__ */ jsx22("span", { className: "text-xs font-semibold leading-6 text-[inherit] opacity-[0.58]", children: tab.count }) : null
+                          /* @__PURE__ */ jsx23("span", { children: tab.label }),
+                          tab.count !== void 0 ? /* @__PURE__ */ jsx23("span", { className: "text-xs font-semibold leading-6 text-[inherit] opacity-[0.58]", children: tab.count }) : null
                         ]
                       },
                       tab.value
                     );
                   }),
-                  /* @__PURE__ */ jsx22(
+                  /* @__PURE__ */ jsx23(
                     "div",
                     {
                       "aria-hidden": true,
@@ -2157,7 +2257,7 @@ function UnderlineTabs({
             )
           }
         ),
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx23(
           "button",
           {
             "aria-label": scrollLeftLabel,
@@ -2168,10 +2268,10 @@ function UnderlineTabs({
             disabled: !overflow.canScrollLeft,
             type: "button",
             onClick: () => scrollTabs("left"),
-            children: /* @__PURE__ */ jsx22(ArrowLeftIcon, { size: 16 })
+            children: /* @__PURE__ */ jsx23(ArrowLeftIcon, { size: 16 })
           }
         ),
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx23(
           "button",
           {
             "aria-label": scrollRightLabel,
@@ -2182,7 +2282,7 @@ function UnderlineTabs({
             disabled: !overflow.canScrollRight,
             type: "button",
             onClick: () => scrollTabs("right"),
-            children: /* @__PURE__ */ jsx22(ArrowRightIcon, { size: 16 })
+            children: /* @__PURE__ */ jsx23(ArrowRightIcon, { size: 16 })
           }
         )
       ]
@@ -2193,7 +2293,7 @@ function UnderlineTabs({
 // src/components/viewport-menu-surface/viewport-menu-surface.tsx
 import * as React5 from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var VIEWPORT_MENU_PADDING = 12;
 var MENU_BOUNDARY_PADDING = 8;
 function clampMenuCoordinate(origin, size, viewportExtent, padding) {
@@ -2440,7 +2540,7 @@ var ViewportMenuSurface = React5.forwardRef(function ViewportMenuSurface2({
     return null;
   }
   return createPortal2(
-    /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx24(
       MenuSurface,
       {
         ...rest,
@@ -2519,6 +2619,7 @@ export {
   DropdownMenuSubTrigger,
   DropdownMenuSubContent,
   Input,
+  MentionPill,
   Popover,
   PopoverTrigger,
   PopoverPortal,
@@ -2566,4 +2667,4 @@ export {
   UnderlineTabs,
   ViewportMenuSurface
 };
-//# sourceMappingURL=chunk-W4FQ2FEN.js.map
+//# sourceMappingURL=chunk-D5Y4OBKX.js.map