@keboola/design 2.0.0 → 2.1.0

package/dist/index.js

@@ -1,46 +1,44 @@
 import { Slot, Root as Root$1, Slottable } from '@radix-ui/react-slot';
 export { Slot } from '@radix-ui/react-slot';
-import { ChevronLeft, Plus, ChevronDown as ChevronDown$1, X, Loader2, Calendar, Clock, Sparkles, Search, Check, Minus, Copy, CircleCheck, AlertTriangle, ChevronUp, Send, ChevronRight, FileText, ArrowBigUpDash, EyeOff, Eye, Minimize2, Maximize2, Circle, Ellipsis, XCircle, Info, ChevronsRight, ChevronsLeft, CirclePause, Play, AlertCircle, ToggleRight } from 'lucide-react';
+import { ChevronLeft, ChevronDown, Plus, X, Minus, Loader2, Check, ArrowBigUpDash, EyeOff, Eye, ChevronUp, Calendar, Clock, Sparkles, Search, Copy, CircleCheck, AlertTriangle, Send, ChevronRight, FileText, Minimize2, Maximize2, Circle, Ellipsis, Pipette, XCircle, Info, ChevronsRight, ChevronsLeft, CirclePause, Play, AlertCircle, ToggleRight } from 'lucide-react';
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
-import { createContext, useRef, useEffect, useMemo, useState, useId, use, useCallback, Fragment as Fragment$1, useLayoutEffect, useReducer, Children } from 'react';
-import { Provider, Root as Root$b, Trigger as Trigger$3, Portal, Content } from '@radix-ui/react-tooltip';
+import { createContext, useRef, useEffect, useMemo, useState, use, useId, useCallback, Fragment as Fragment$1, useLayoutEffect, useReducer, Children } from 'react';
+import { Root as Root$6, Trigger, Portal, Content, Provider } from '@radix-ui/react-tooltip';
 import { cva } from 'class-variance-authority';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { all, fas } from '@awesome.me/kit-be8bcf7e5e/icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { getDefaultClassNames, DayPicker } from 'react-day-picker';
 import 'react-day-picker/src/style.css';
-import { Root as Root$2, Trigger, Close, Portal as Portal$1, Content as Content$1 } from '@radix-ui/react-popover';
+import { Root as Root$2, Trigger as Trigger$1, Close, Portal as Portal$1, Content as Content$1 } from '@radix-ui/react-popover';
 import * as ScrollAreaPrimitive2 from '@radix-ui/react-scroll-area';
 import TextareaAutosize from 'react-textarea-autosize';
 import * as RLabel from '@radix-ui/react-label';
-import { Button as Button$1, cn as cn$1, Switch as Switch$1, Checkbox as Checkbox$1, Select as Select$1, FormGroup as FormGroup$1, PasswordInput as PasswordInput$1, Tooltip as Tooltip$1, Label as Label$1, TextInput as TextInput$1, Separator as Separator$1, ButtonGroup as ButtonGroup$1 } from '@keboola/design';
 import { Root as Root$3, Thumb } from '@radix-ui/react-switch';
-import { Root as Root$4, Trigger as Trigger$1, Portal as Portal$2, Content as Content$2 } from '@radix-ui/react-hover-card';
+import { Root as Root$7, Trigger as Trigger$2, Portal as Portal$2, Content as Content$2 } from '@radix-ui/react-hover-card';
 import * as RSeparator from '@radix-ui/react-separator';
 import * as RRadioGroup from '@radix-ui/react-radio-group';
 import { Item, Indicator as Indicator$2 } from '@radix-ui/react-radio-group';
-import { Root as Root$5, Track, Range, Thumb as Thumb$1 } from '@radix-ui/react-slider';
+import { Root as Root$8, Track, Range, Thumb as Thumb$1 } from '@radix-ui/react-slider';
 import * as SelectPrimitive from '@radix-ui/react-select';
-import { Root as Root$c } from '@radix-ui/react-select';
-import { Root as Root$6, Indicator } from '@radix-ui/react-checkbox';
+import { Root as Root$5 } from '@radix-ui/react-select';
+import { all, fas } from '@awesome.me/kit-be8bcf7e5e/icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Root as Root$4, Indicator } from '@radix-ui/react-checkbox';
 import * as DropdownMenuPrimitive3 from '@radix-ui/react-dropdown-menu';
 import { Root, Group, Trigger as Trigger$4 } from '@radix-ui/react-dropdown-menu';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { Root as Root$7, Close as Close$1, Trigger as Trigger$2, Portal as Portal$3, Content as Content$3, Overlay, Title } from '@radix-ui/react-dialog';
+import { Root as Root$9, Close as Close$1, Trigger as Trigger$3, Portal as Portal$3, Content as Content$3, Overlay, Title } from '@radix-ui/react-dialog';
 import { createPortal } from 'react-dom';
-import { ChevronDown, Search as Search$1, Pipette, Plus as Plus$1 } from '@keboola/design/icons';
-import { Root as Root$8, CollapsibleTrigger, Content as Content$4 } from '@radix-ui/react-collapsible';
+import { Root as Root$a, CollapsibleTrigger, Content as Content$4 } from '@radix-ui/react-collapsible';
 import { Command as Command$1, CommandInput as CommandInput$1, defaultFilter, useCommandState } from 'cmdk';
 export { defaultFilter, useCommandState } from 'cmdk';
 import { Combobox as Combobox$1 } from '@base-ui/react/combobox';
 import * as RadixAvatar from '@radix-ui/react-avatar';
 import BoringAvatar from 'boring-avatars';
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { Root as Root$9 } from '@radix-ui/react-toggle';
+import { Root as Root$b } from '@radix-ui/react-toggle';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
-import { Root as Root$a, Indicator as Indicator$1 } from '@radix-ui/react-progress';
+import { Root as Root$c, Indicator as Indicator$1 } from '@radix-ui/react-progress';
 import { diffLines, diffWords } from 'diff';
 import * as RadixTabs from '@radix-ui/react-tabs';
 import { completeAnyWord, autocompletion } from '@codemirror/autocomplete';
@@ -64,6 +62,8 @@ import { StateEffect, StateField, RangeSet, RangeSetBuilder } from '@codemirror/
 import { diff3Merge } from 'node-diff3';
 import * as ResizablePrimitive from 'react-resizable-panels';
 import { toast as toast$1, Toaster as Toaster$1 } from 'sonner';
+import { OTPInput, REGEXP_ONLY_DIGITS, OTPInputContext } from 'input-otp';
+export { REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from 'input-otp';
 import { createFormHookContexts, createFormHook } from '@tanstack/react-form';
 
 // src/components/Button/Button.tsx
@@ -187,7 +187,7 @@ var TooltipContent = ({
   ) });
 };
 var DELAY_SHOW_TOOLTIP = 300;
-var TooltipRoot = ({ children, delayDuration = DELAY_SHOW_TOOLTIP, ...rest }) => /* @__PURE__ */ jsx(Root$b, { ...rest, delayDuration, children });
+var TooltipRoot = ({ children, delayDuration = DELAY_SHOW_TOOLTIP, ...rest }) => /* @__PURE__ */ jsx(Root$6, { ...rest, delayDuration, children });
 var TooltipTrigger = ({
   ref,
   children,
@@ -202,20 +202,28 @@ var TooltipTrigger = ({
     if (keepOpenOnClick) event.preventDefault();
     onClick?.(event);
   };
-  const handePointerDown = (event) => {
+  const handlePointerDown = (event) => {
     if (keepOpenOnClick) event.preventDefault();
     onPointerDown?.(event);
   };
   return /* @__PURE__ */ jsx(
-    Trigger$3,
+    Trigger,
     {
       ...rest,
       asChild: true,
       ref,
       className: cn("tailwindcss-preflight", className),
       onClick: handleClick,
-      onPointerDown: handePointerDown,
-      children: asChild ? children : /* @__PURE__ */ jsx("span", { children })
+      onPointerDown: handlePointerDown,
+      children: asChild ? children : (
+        // Default-mode trigger wraps children in a span so Radix has a
+        // single DOM element to attach handlers to. `tailwindcss-preflight`
+        // (merged in via Slot) activates Tailwind's preflight inside the
+        // span, which sets `svg { display: block }` — without an inline-flex
+        // container that would stack any bare Lucide icon onto its own
+        // line. `tw-inline-flex tw-items-center` keeps icon + text aligned.
+        /* @__PURE__ */ jsx("span", { className: "tw-inline-flex tw-items-center", children })
+      )
     }
   );
 };
@@ -333,29 +341,20 @@ var sha256 = async (text) => {
 var useSHA256 = (text) => {
   const [hash, setHash] = useState("");
   useEffect(() => {
-    if (text) {
-      sha256(text).then(setHash);
+    if (!text) {
+      setHash("");
+      return;
     }
+    let cancelled = false;
+    sha256(text).then((h) => {
+      if (!cancelled) setHash(h);
+    });
+    return () => {
+      cancelled = true;
+    };
   }, [text]);
   return hash;
 };
-var Icon = ({ ref, icon, ...rest }) => /* @__PURE__ */ jsx(FontAwesomeIcon, { ...rest, ref, icon });
-
-// src/components/Icon/index.ts
-var validIconNames;
-var getValidIconNames = () => {
-  if (validIconNames) return validIconNames;
-  validIconNames = new Set(
-    Object.values(fas).flatMap((def) => {
-      if (def !== null && typeof def === "object" && "iconName" in def && typeof def.iconName === "string") {
-        return [def.iconName];
-      }
-      return [];
-    })
-  );
-  return validIconNames;
-};
-var isIconName = (name) => getValidIconNames().has(name);
 var variants = cva(
   [
     "tailwindcss-preflight",
@@ -479,15 +478,38 @@ var variants = cva(
         ]
       },
       size: {
-        medium: ["tw-max-h-10", "tw-min-h-10", "tw-px-4", "tw-py-2.5", "[&_svg]:tw-size-4"],
-        small: ["tw-max-h-8", "tw-min-h-8", "tw-px-4", "tw-py-1.5", "[&_svg]:tw-size-4"],
-        large: ["tw-max-h-12", "tw-min-h-12", "tw-px-4", "tw-py-3.5", "[&_svg]:tw-size-4"],
-        "icon-lg": ["tw-size-12", "tw-p-0", "[&_svg]:tw-size-6"],
-        icon: ["tw-size-10", "tw-p-0", "[&_svg]:tw-size-4"],
-        "icon-sm": ["tw-size-8", "tw-p-0", "[&_svg]:tw-size-4"],
-        "icon-xs": ["tw-size-6", "tw-p-0", "[&_svg]:tw-size-4"],
-        "icon-2xs": ["!tw-inline-flex", "tw-size-5", "tw-max-h-5", "[&_svg]:tw-size-3"],
-        "icon-3xs": ["tw-h-fit", "tw-w-fit", "[&_svg]:tw-size-4"]
+        medium: [
+          "tw-max-h-10",
+          "tw-min-h-10",
+          "tw-px-4",
+          "tw-py-2.5",
+          '[&_svg:not([class*="tw-size-"])]:tw-size-4'
+        ],
+        small: [
+          "tw-max-h-8",
+          "tw-min-h-8",
+          "tw-px-4",
+          "tw-py-1.5",
+          '[&_svg:not([class*="tw-size-"])]:tw-size-4'
+        ],
+        large: [
+          "tw-max-h-12",
+          "tw-min-h-12",
+          "tw-px-4",
+          "tw-py-3.5",
+          '[&_svg:not([class*="tw-size-"])]:tw-size-4'
+        ],
+        "icon-lg": ["tw-size-12", "tw-p-0", '[&_svg:not([class*="tw-size-"])]:tw-size-6'],
+        icon: ["tw-size-10", "tw-p-0", '[&_svg:not([class*="tw-size-"])]:tw-size-4'],
+        "icon-sm": ["tw-size-8", "tw-p-0", '[&_svg:not([class*="tw-size-"])]:tw-size-4'],
+        "icon-xs": ["tw-size-6", "tw-p-0", '[&_svg:not([class*="tw-size-"])]:tw-size-4'],
+        "icon-2xs": [
+          "!tw-inline-flex",
+          "tw-size-5",
+          "tw-max-h-5",
+          '[&_svg:not([class*="tw-size-"])]:tw-size-3'
+        ],
+        "icon-3xs": ["tw-h-fit", "tw-w-fit", '[&_svg:not([class*="tw-size-"])]:tw-size-4']
       }
     }
   }
@@ -620,10 +642,10 @@ var Button = ({
   variant = "primary",
   size = "medium",
   block = false,
-  icon,
   ...buttonProps
 }) => {
   const Comp = asChild ? Root$1 : "button";
+  const isIconOnly = String(size).startsWith("icon");
   const classNames = argo ? argoVariants({ variant, size, block, className }) : variants({
     size,
     variant,
@@ -646,14 +668,13 @@ var Button = ({
       disabled,
       "aria-disabled": disabled,
       "data-variant": variant,
-      "data-icon-only": String(size).startsWith("icon"),
+      "data-icon-only": isIconOnly,
       type,
       onClick: handleClick,
       className: cn(classNames),
       children: [
         isLoading && /* @__PURE__ */ jsx(Loader2, { className: "tw-size-4 tw-shrink-0 tw-animate-spin" }),
-        !isLoading && icon && /* @__PURE__ */ jsx(Icon, { icon }),
-        /* @__PURE__ */ jsx(Slottable, { children })
+        /* @__PURE__ */ jsx(Slottable, { children: isLoading && isIconOnly ? null : children })
       ]
     }
   );
@@ -902,7 +923,7 @@ var PopoverContent = ({
 ) });
 var Popover = (props) => /* @__PURE__ */ jsx(Root$2, { ...props });
 Popover.Content = PopoverContent;
-Popover.Trigger = Trigger;
+Popover.Trigger = Trigger$1;
 Popover.Close = Close;
 var DatePicker = ({
   align = "end",
@@ -2051,21 +2072,21 @@ var Clipboard = ({
     return tooltip;
   })();
   const tooltipVariant = state === "ready" && !!text ? tooltipVariantProp : "action";
-  return /* @__PURE__ */ jsxs(Tooltip$1.Root, { open: isTooltipOpen, onOpenChange: handleOnOpenChange, children: [
+  return /* @__PURE__ */ jsxs(Tooltip.Root, { open: isTooltipOpen, onOpenChange: handleOnOpenChange, children: [
     /* @__PURE__ */ jsx(
-      Tooltip$1.Trigger,
+      Tooltip.Trigger,
       {
         ...restButtonProps,
         asChild,
         keepOpenOnClick: true,
         onClick: handleOnClick,
-        className: cn$1("tw-cursor-pointer", className),
+        className: cn("tw-cursor-pointer", className),
         ref,
         children: children ?? text
       }
     ),
     /* @__PURE__ */ jsx(
-      Tooltip$1.Content,
+      Tooltip.Content,
       {
         keepOpenOnPointerDownOutside: true,
         placement: tooltipPlacement,
@@ -2424,9 +2445,9 @@ var HoverCardContent = ({
     children
   }
 ) });
-var HoverCard = ({ openDelay = 200, closeDelay = 200, ...rest }) => /* @__PURE__ */ jsx(Root$4, { ...rest, openDelay, closeDelay });
+var HoverCard = ({ openDelay = 200, closeDelay = 200, ...rest }) => /* @__PURE__ */ jsx(Root$7, { ...rest, openDelay, closeDelay });
 HoverCard.Content = HoverCardContent;
-HoverCard.Trigger = Trigger$1;
+HoverCard.Trigger = Trigger$2;
 var separatorVariants = cva(
   [
     // position
@@ -2864,7 +2885,7 @@ var Slider = ({
     onValueChange?.(next);
   };
   const body = /* @__PURE__ */ jsxs(
-    Root$5,
+    Root$8,
     {
       ref,
       value: liveValues,
@@ -3064,39 +3085,53 @@ var Search2 = ({
     onChange?.("", event);
     onClear?.();
   };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        searchWrapperVariants({ variant }),
-        {
-          "tw-cursor-not-allowed tw-opacity-40": disabled
-        },
-        className
-      ),
-      "data-testid": testId.wrapper,
-      children: [
-        variant === "ai" ? /* @__PURE__ */ jsx(Sparkles, { className: "tw-size-4 tw-shrink-0 [&_*]:tw-stroke-aigradient-600" }) : /* @__PURE__ */ jsx(Search, { className: "tw-size-4 tw-shrink-0 tw-text-neutral-400" }),
-        /* @__PURE__ */ jsx(
-          "input",
+  const handleWrapperMouseDown = (event) => {
+    if (disabled || readOnly) return;
+    if (event.target.closest('button, a, input, textarea, [role="button"]')) {
+      return;
+    }
+    event.preventDefault();
+    event.currentTarget.querySelector("input")?.focus();
+  };
+  return (
+    // Mouse-only convenience: clicking the chrome focuses the input. The input itself is the
+    // real interactive/focusable target, so no extra role or key handler is needed here.
+    // oxlint-disable-next-line jsx-a11y/no-static-element-interactions
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          searchWrapperVariants({ variant }),
           {
-            ...rest,
-            ref,
-            placeholder,
-            "data-testid": testId.input,
-            type: "text",
-            value: internalValue ?? "",
-            onChange: handleChange,
-            onBlur: handleBlur,
-            className: searchInputClassnames,
-            disabled,
-            readOnly
-          }
+            "tw-cursor-not-allowed tw-opacity-40": disabled
+          },
+          className
         ),
-        isClearButtonVisible && /* @__PURE__ */ jsx(ClearButton, { onClick: handleClear, testId: testId.clearButton }),
-        suffix
-      ]
-    }
+        "data-testid": testId.wrapper,
+        onMouseDown: handleWrapperMouseDown,
+        children: [
+          variant === "ai" ? /* @__PURE__ */ jsx(Sparkles, { className: "tw-size-4 tw-shrink-0 [&_*]:tw-stroke-aigradient-600" }) : /* @__PURE__ */ jsx(Search, { className: "tw-size-4 tw-shrink-0 tw-text-neutral-400" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...rest,
+              ref,
+              placeholder,
+              "data-testid": testId.input,
+              type: "text",
+              value: internalValue ?? "",
+              onChange: handleChange,
+              onBlur: handleBlur,
+              className: searchInputClassnames,
+              disabled,
+              readOnly
+            }
+          ),
+          isClearButtonVisible && /* @__PURE__ */ jsx(ClearButton, { onClick: handleClear, testId: testId.clearButton }),
+          suffix
+        ]
+      }
+    )
   );
 };
 var SearchForm = ({
@@ -3130,7 +3165,7 @@ var scrollButtonStyles = cn(
   "tw-justify-center",
   "tw-rounded-sm",
   "tw-p-1",
-  "[&_svg]:tw-size-5"
+  '[&_svg:not([class*="tw-size-"])]:tw-size-5'
 );
 var SelectContent = ({
   ref,
@@ -3196,11 +3231,28 @@ var SelectContent = ({
           children
         }
       ),
-      /* @__PURE__ */ jsx(SelectPrimitive.ScrollDownButton, { className: scrollButtonStyles, children: /* @__PURE__ */ jsx(ChevronDown$1, {}) })
+      /* @__PURE__ */ jsx(SelectPrimitive.ScrollDownButton, { className: scrollButtonStyles, children: /* @__PURE__ */ jsx(ChevronDown, {}) })
     ]
   }
 ) });
 var SelectGroup = ({ className, ...props }) => /* @__PURE__ */ jsx(SelectPrimitive.Group, { ...props, className: cn("tw-flex tw-flex-col tw-gap-0.5", className) });
+var Icon = ({ ref, icon, ...rest }) => /* @__PURE__ */ jsx(FontAwesomeIcon, { ...rest, ref, icon });
+
+// src/components/Icon/index.ts
+var validIconNames;
+var getValidIconNames = () => {
+  if (validIconNames) return validIconNames;
+  validIconNames = new Set(
+    Object.values(fas).flatMap((def) => {
+      if (def !== null && typeof def === "object" && "iconName" in def && typeof def.iconName === "string") {
+        return [def.iconName];
+      }
+      return [];
+    })
+  );
+  return validIconNames;
+};
+var isIconName = (name) => getValidIconNames().has(name);
 var isFAIconValue = (value) => typeof value === "string" || Array.isArray(value) && value.length === 2 && typeof value[0] === "string" && typeof value[1] === "string";
 var renderLegacyIcon = (value) => isFAIconValue(value) ? /* @__PURE__ */ jsx(Icon, { icon: value }) : value;
 var SelectItem = ({
@@ -3280,7 +3332,7 @@ var SelectLabel = ({ className, ...props }) => /* @__PURE__ */ jsx(
     )
   }
 );
-var SelectRoot = (props) => /* @__PURE__ */ jsx(Root$c, { ...props });
+var SelectRoot = (props) => /* @__PURE__ */ jsx(Root$5, { ...props });
 var SelectSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx(
   SelectPrimitive.Separator,
   {
@@ -3427,7 +3479,7 @@ var SelectTrigger = ({
     ...props,
     children: [
       /* @__PURE__ */ jsx(SelectPrimitive.Value, { placeholder }),
-      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown$1, { className: "tw-size-5 tw-text-muted-foreground" }) })
+      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "tw-size-5 tw-text-muted-foreground" }) })
     ]
   }
 );
@@ -3592,7 +3644,7 @@ function Checkbox({
   const fallbackId = useId();
   const id = idProp?.toString() ?? fallbackId;
   const styleVariant = argo ? "argo" : "default";
-  const checkboxElement = /* @__PURE__ */ jsx(Root$6, { id, ...rest, className: cn(rootVariants({ variant: styleVariant, className })), children: /* @__PURE__ */ jsxs(Indicator, { className: cn(indicatorVariants({ variant: styleVariant })), children: [
+  const checkboxElement = /* @__PURE__ */ jsx(Root$4, { id, ...rest, className: cn(rootVariants({ variant: styleVariant, className })), children: /* @__PURE__ */ jsxs(Indicator, { className: cn(indicatorVariants({ variant: styleVariant })), children: [
     /* @__PURE__ */ jsx(Check, { className: "tw-hidden tw-size-3 tw-stroke-[4px] group-data-[state=checked]:tw-block" }),
     /* @__PURE__ */ jsx(Minus, { className: "tw-hidden tw-size-3 tw-stroke-[4px] group-data-[state=indeterminate]:tw-block" })
   ] }) });
@@ -3626,7 +3678,7 @@ var variants4 = cva(
           "tw-border-border",
           "tw-rounded-full",
           "tw-bg-white",
-          "[&_svg]:tw-size-2",
+          '[&_svg:not([class*="tw-size-"])]:tw-size-2',
           "[&_svg]:data-[state=unchecked]:tw-hidden",
           // Lucide Circle is stroke-only — force fill to match the stroke
           // (currentColor) so the indicator reads as a solid dot.
@@ -3634,14 +3686,14 @@ var variants4 = cva(
           "group-data-[variant=argo]/dropdown-menu-content:[&_svg]:tw-text-primary",
           "group-data-[variant=default]/dropdown-menu-content:[&_svg]:tw-text-secondary-500"
         ],
-        check: ["[&_svg]:tw-size-3.5", "[&_svg]:tw-text-primary"],
+        check: ['[&_svg:not([class*="tw-size-"])]:tw-size-3.5', "[&_svg]:tw-text-primary"],
         checkbox: [
           "[&_svg]:tw-text-white",
           "tw-border",
           "tw-border-solid",
           "tw-border-neutral-200",
           "tw-rounded",
-          "[&_svg]:tw-size-3",
+          '[&_svg:not([class*="tw-size-"])]:tw-size-3',
           "[&_svg]:data-[state=unchecked]:tw-hidden",
           "group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:tw-border-primary",
           "group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:tw-bg-primary",
@@ -3652,7 +3704,7 @@ var variants4 = cva(
           "tw-size-5",
           // Lucide SVGs default to 24×24 — constrain the rendered ToggleRight
           // to the indicator slot so it doesn't overflow.
-          "[&_svg]:tw-size-5",
+          '[&_svg:not([class*="tw-size-"])]:tw-size-5',
           "tw-text-neutral-400",
           "data-[state=unchecked]:tw-rotate-180",
           "group-data-[variant=default]/dropdown-menu-content:data-[state=checked]:tw-text-secondary-500",
@@ -3700,7 +3752,7 @@ var ItemIcon = ({ className, children, ...props }) => /* @__PURE__ */ jsx(
       // 20px container fits the 16px Lucide glyph plus 2px breathing room
       // each side — the previous tw-size-4 + tw-p-0.5 clipped the 16px child.
       "tw-size-5",
-      "[&_svg]:tw-size-4",
+      '[&_svg:not([class*="tw-size-"])]:tw-size-4',
       "group-data-[variant=default]/dropdown-menu-content:tw-text-neutral-400",
       "group-data-[variant=argo]/dropdown-menu-content:tw-text-primary",
       "group-data-[variant=argo]/dropdown-menu-content:group-aria-disabled:tw-text-muted-foreground",
@@ -4321,10 +4373,10 @@ var ModalIcon = (props) => {
                   "tw-text-white": props.color !== "violet",
                   "tw-text-purple-500": props.color === "violet"
                 },
-                "[&_svg]:tw-size-6",
+                '[&_svg:not([class*="tw-size-"])]:tw-size-6',
                 "[&_svg]:tw-aspect-square"
               ),
-              children: isFAIconValue(props.icon) ? /* @__PURE__ */ jsx(Icon, { icon: props.icon, spin: props.spin }) : props.icon
+              children: renderLegacyIcon(props.icon)
             }
           )
         }
@@ -4332,9 +4384,9 @@ var ModalIcon = (props) => {
     }
   );
 };
-var Modal = (props) => /* @__PURE__ */ jsx(Root$7, { ...props });
+var Modal = (props) => /* @__PURE__ */ jsx(Root$9, { ...props });
 Modal.Close = Close$1;
-Modal.Trigger = Trigger$2;
+Modal.Trigger = Trigger$3;
 Modal.Content = ModalContent;
 Modal.Body = ModalBody;
 Modal.Icon = ModalIcon;
@@ -4365,7 +4417,7 @@ var Truncated = ({
   const isScrollableTarget = (e) => {
     return e.scrollHeight - OFFSET_TOLERANCE >= e.clientHeight;
   };
-  const truncatedClasses = cn$1(
+  const truncatedClasses = cn(
     className,
     "tw-overflow-hidden [word-break:break-all]",
     "[display:-webkit-box!important] [-webkit-box-orient:vertical]",
@@ -4375,7 +4427,7 @@ var Truncated = ({
     return /* @__PURE__ */ jsx("span", { ref, className: truncatedClasses, ...rest, children: text });
   }
   return /* @__PURE__ */ jsx(
-    Tooltip$1,
+    Tooltip,
     {
       placement: tooltipPlacement,
       variant: tooltipVariant,
@@ -4852,9 +4904,9 @@ var SheetHeader = ({
   ] });
 };
 var SheetTitle = ({ className, visuallyHidden = false, ...props }) => /* @__PURE__ */ jsx(Title, { className: cn({ "tw-sr-only": visuallyHidden }, className), ...props });
-var Sheet = ({ ...props }) => /* @__PURE__ */ jsx(Root$7, { ...props });
+var Sheet = ({ ...props }) => /* @__PURE__ */ jsx(Root$9, { ...props });
 Sheet.Close = Close$1;
-Sheet.Trigger = Trigger$2;
+Sheet.Trigger = Trigger$3;
 Sheet.Content = SheetContent;
 Sheet.Title = SheetTitle;
 Sheet.Header = SheetHeader;
@@ -5328,7 +5380,7 @@ var SidebarGroupAction = ({
       "tw-text-neutral-800",
       "tw-rounded-full",
       // svg defaults: size + colour
-      "[&_svg]:tw-size-3",
+      '[&_svg:not([class*="tw-size-"])]:tw-size-3',
       "[&_svg]:tw-text-neutral-400",
       "hover:[&_svg]:tw-text-secondary-600",
       "hover:tw-bg-neutral-100",
@@ -5472,7 +5524,7 @@ var SidebarMenuIcon = ({
       "tw-shrink-0",
       "tw-p-0.5",
       "tw-text-sidebar-primary",
-      "[&_svg]:tw-size-4",
+      '[&_svg:not([class*="tw-size-"])]:tw-size-4',
       className
     ),
     children
@@ -5601,7 +5653,7 @@ var SidebarMenuAction = ({
         "tw-rounded",
         // icon styling
         "[&_svg]:tw-shrink-0",
-        "[&_svg]:tw-size-3.5",
+        '[&_svg:not([class*="tw-size-"])]:tw-size-3.5',
         "[&_svg]:tw-text-sidebar-accent-foreground",
         // focus visible
         "focus-visible:tw-outline-none",
@@ -5833,7 +5885,7 @@ var CollapsibleContent = ({
     children
   }
 );
-var Collapsible = (props) => /* @__PURE__ */ jsx(Root$8, { ...props });
+var Collapsible = (props) => /* @__PURE__ */ jsx(Root$a, { ...props });
 Collapsible.Trigger = CollapsibleTrigger;
 Collapsible.Content = CollapsibleContent;
 var SidebarMenuSub = ({
@@ -5912,7 +5964,7 @@ var SidebarMenuSub = ({
         ),
         children: [
           label,
-          /* @__PURE__ */ jsx(ChevronDown$1, { className: "tw-ml-auto tw-size-5 tw-transition-transform tw-duration-200 group-data-[state=open]:tw-rotate-180" })
+          /* @__PURE__ */ jsx(ChevronDown, { className: "tw-ml-auto tw-size-5 tw-transition-transform tw-duration-200 group-data-[state=open]:tw-rotate-180" })
         ]
       }
     ) }),
@@ -6487,7 +6539,7 @@ var CommandItem = ({
       ),
       children: [
         /* @__PURE__ */ jsx(CheckIndicator, { variant }),
-        icon && /* @__PURE__ */ jsx("span", { className: "tw-inline-flex tw-size-4 tw-shrink-0 tw-items-center tw-justify-center tw-text-neutral-400 [&_svg]:tw-size-4", children: icon }),
+        icon && /* @__PURE__ */ jsx("span", { className: "tw-inline-flex tw-size-4 tw-shrink-0 tw-items-center tw-justify-center tw-text-neutral-400 [&_svg:not([class*='tw-size-'])]:tw-size-4", children: icon }),
         children
       ]
     }
@@ -6561,7 +6613,7 @@ var addonVariants2 = cva(
     "tw-self-stretch",
     "tw-px-1",
     "has-[button]:tw-px-0",
-    "[&_svg]:tw-size-3"
+    '[&_svg:not([class*="tw-size-"])]:tw-size-3'
   ],
   {
     defaultVariants: {
@@ -6632,7 +6684,7 @@ var BadgeButton = ({
       // Default sizing for Lucide-icon children (which ship at 24×24); keeps
       // the visual baseline aligned with the previous FA-icon API and other
       // icon-wrapper components (ItemIcon, SidebarMenuIcon).
-      "[&_svg]:tw-size-3",
+      '[&_svg:not([class*="tw-size-"])]:tw-size-3',
       className
     ),
     children
@@ -7035,7 +7087,7 @@ var ComboboxItemIndicator = ({
         "group-data-[variant=default]/combobox-content:tw-right-4",
         // Lucide SVGs default to 24×24 — constrain the rendered child so the
         // 16px indicator slot owns the actual size.
-        "[&_svg]:tw-size-4",
+        '[&_svg:not([class*="tw-size-"])]:tw-size-4',
         "group-data-[highlighted]/combobox-item:tw-text-accent-foreground",
         "group-data-[variant=default]/combobox-content:group-data-[highlighted]/combobox-item:tw-text-foreground",
         className
@@ -7329,7 +7381,7 @@ var Combobox = ({
               /* @__PURE__ */ jsx(ComboboxInput, { id, placeholder, disabled }),
               /* @__PURE__ */ jsxs(InputGroup.Addon, { align: "inline-end", children: [
                 allowClear && /* @__PURE__ */ jsx(InputGroup.Button, { asChild: true, "aria-label": "Clear", disabled, children: /* @__PURE__ */ jsx(Combobox$1.Clear, { children: /* @__PURE__ */ jsx(X, { className: "tw-size-4" }) }) }),
-                /* @__PURE__ */ jsx(InputGroup.Button, { disabled, asChild: true, "aria-label": "Open combobox", children: /* @__PURE__ */ jsx(Combobox$1.Trigger, { children: /* @__PURE__ */ jsx(ChevronDown$1, { className: "tw-size-4" }) }) })
+                /* @__PURE__ */ jsx(InputGroup.Button, { disabled, asChild: true, "aria-label": "Open combobox", children: /* @__PURE__ */ jsx(Combobox$1.Trigger, { children: /* @__PURE__ */ jsx(ChevronDown, { className: "tw-size-4" }) }) })
               ] })
             ]
           }
@@ -7433,7 +7485,7 @@ var BreadcrumbLink = ({
         "focus-visible:tw-ring-secondary-500/50",
         "focus-visible:tw-rounded-sm",
         // Icon
-        "[&_svg]:tw-size-3.5",
+        '[&_svg:not([class*="tw-size-"])]:tw-size-3.5',
         // transition
         "tw-transition-colors",
         className
@@ -7489,7 +7541,7 @@ var BreadcrumbSeparator = ({ children, className, ...props }) => /* @__PURE__ */
       "tw-justify-center",
       "tw-aspect-square",
       "tw-size-[15px]",
-      "[&_svg]:tw-size-2.5",
+      '[&_svg:not([class*="tw-size-"])]:tw-size-2.5',
       "tw-text-muted-foreground",
       className
     ),
@@ -7552,7 +7604,7 @@ var NavbarMenuAvatar = ({
       ...rest,
       ref,
       type,
-      className: cn$1(
+      className: cn(
         "tw-flex",
         "tw-items-center",
         "tw-justify-center",
@@ -7593,7 +7645,7 @@ var variants6 = cva(
     "tw-flex",
     "tw-justify-center",
     "tw-items-center",
-    "[&_svg]:tw-size-3",
+    '[&_svg:not([class*="tw-size-"])]:tw-size-3',
     "[&:not(svg)]:tw-h-5",
     "[&:not(svg)]:tw-min-w-5",
     "tw-p-1",
@@ -7625,7 +7677,7 @@ var variants6 = cva(
           "group-data-[accent=orange]/navbar:tw-bg-warning-500",
           "group-data-[accent=green]/navbar:tw-bg-primary-500"
         ],
-        "icon-button": ["tw-size-4", "tw-max-h-9", "tw-leading-9", "tw-p-0"],
+        "icon-button": ["tw-size-4", "!tw-p-0", '[&_svg:not([class*="tw-size-"])]:tw-size-4'],
         shortcut: ["tw-bg-muted", "tw-text-sidebar-foreground", "tw-ml-auto"]
       }
     }
@@ -7727,7 +7779,7 @@ var NavbarMenuButton = ({
   const Comp = asChild ? Root$1 : "button";
   const isSearchVariant = variant === "search";
   const isEmphasizedVariant = variant === "emphasized";
-  const adornment = isSearchVariant ? /* @__PURE__ */ jsx(Search$1, {}) : renderLegacyIcon(icon);
+  const adornment = isSearchVariant ? /* @__PURE__ */ jsx(Search, {}) : renderLegacyIcon(icon);
   const adornmentVariant = (() => {
     if (isSearchVariant || variant === "icon") return "icon-button";
     if (isEmphasizedVariant) return "icon-accent-emphasized";
@@ -7740,7 +7792,7 @@ var NavbarMenuButton = ({
       ref,
       type,
       "data-variant": variant,
-      className: cn$1(variants7({ className, variant })),
+      className: cn(variants7({ className, variant })),
       children: [
         adornment && /* @__PURE__ */ jsx(NavbarMenuItemAdornment, { variant: adornmentVariant, children: adornment }),
         /* @__PURE__ */ jsx(Slottable, { children })
@@ -7843,7 +7895,7 @@ var PaginationEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsx(
       "tw-items-center",
       "tw-justify-center",
       "tw-text-foreground",
-      "[&_svg]:tw-size-4",
+      '[&_svg:not([class*="tw-size-"])]:tw-size-4',
       className
     ),
     ...props,
@@ -7937,7 +7989,7 @@ var Avatar = ({
       ...props,
       ref,
       style: styles.wrapper,
-      className: cn$1(
+      className: cn(
         variant === "circle" ? "tw-rounded-full" : "tw-rounded-md",
         "tw-overflow-hidden",
         "focus-visible:tw-outline-none",
@@ -8161,7 +8213,7 @@ var Toggle = ({
   const isAiVariant = variant === "ai";
   const isIconOnly = Boolean(icon && children == null);
   return /* @__PURE__ */ jsxs(
-    Root$9,
+    Root$b,
     {
       ...props,
       ref,
@@ -8169,7 +8221,7 @@ var Toggle = ({
       disabled,
       children: [
         badge && /* @__PURE__ */ jsx("span", { className: "tw-absolute tw-right-0 tw-top-0 -tw-translate-y-1/2 tw-translate-x-1/4", children: badge }),
-        icon && /* @__PURE__ */ jsx("span", { className: "tw-inline-flex tw-size-4 tw-shrink-0 tw-items-center tw-justify-center tw-align-middle [&_svg]:tw-size-4", children: renderLegacyIcon(icon) }),
+        icon && /* @__PURE__ */ jsx("span", { className: "tw-inline-flex tw-size-4 tw-shrink-0 tw-items-center tw-justify-center tw-align-middle [&_svg:not([class*='tw-size-'])]:tw-size-4", children: renderLegacyIcon(icon) }),
         isAiVariant ? /* @__PURE__ */ jsx("div", { className: "tw-bg-gradient-to-br tw-from-secondary-700 tw-to-purple-700 tw-bg-clip-text tw-text-transparent", children }) : children
       ]
     }
@@ -8334,7 +8386,11 @@ var connector = cva(
           "tw-text-nowrap",
           "tw-text-xs"
         ],
-        icon: ["tw-bg-white", "[&_svg]:tw-size-4", "[&_svg]:tw-text-neutral-300"],
+        icon: [
+          "tw-bg-white",
+          '[&_svg:not([class*="tw-size-"])]:tw-size-4',
+          "[&_svg]:tw-text-neutral-300"
+        ],
         line: [
           "tw-min-w-8",
           "tw-overflow-hidden",
@@ -8564,7 +8620,7 @@ var Progress = ({
   variant,
   size,
   ...props
-}) => /* @__PURE__ */ jsx(Root$a, { ...props, ref, className: cn(variants8({ variant, size, className })), value, children: /* @__PURE__ */ jsx(
+}) => /* @__PURE__ */ jsx(Root$c, { ...props, ref, className: cn(variants8({ variant, size, className })), value, children: /* @__PURE__ */ jsx(
   Indicator$1,
   {
     "data-slot": "progress-indicator",
@@ -9083,7 +9139,7 @@ var MultiCombobox = ({
                   }
                 ),
                 allowClear && /* @__PURE__ */ jsx(InputGroup.Button, { asChild: true, "aria-label": "Clear", disabled, children: /* @__PURE__ */ jsx(Combobox$1.Clear, { children: /* @__PURE__ */ jsx(X, { className: "tw-size-4" }) }) }),
-                /* @__PURE__ */ jsx(InputGroup.Button, { disabled, asChild: true, "aria-label": "Open combobox", children: /* @__PURE__ */ jsx(Combobox$1.Trigger, { children: /* @__PURE__ */ jsx(ChevronDown$1, { className: "tw-size-4" }) }) })
+                /* @__PURE__ */ jsx(InputGroup.Button, { disabled, asChild: true, "aria-label": "Open combobox", children: /* @__PURE__ */ jsx(Combobox$1.Trigger, { children: /* @__PURE__ */ jsx(ChevronDown, { className: "tw-size-4" }) }) })
               ] })
             ] })
           }
@@ -9538,7 +9594,7 @@ var AlertAction = ({
   );
 };
 var AlertCollapsibleIcon = ({ open }) => /* @__PURE__ */ jsx(Tooltip, { placement: "top", tooltip: open ? "Collapse alert" : "Expand alert", triggerAsChild: true, children: /* @__PURE__ */ jsx(
-  ChevronDown$1,
+  ChevronDown,
   {
     className: cn(
       "tw-mt-px",
@@ -9595,7 +9651,7 @@ var AlertIcon = ({ variant, icon, className, ...rest }) => /* @__PURE__ */ jsx(
       "tw-justify-center",
       "tw-self-start",
       "tw-p-0.5",
-      "[&_svg]:tw-size-4",
+      '[&_svg:not([class*="tw-size-"])]:tw-size-4',
       "group-data-[variant=info]/alert:tw-text-secondary-500",
       "group-data-[variant=warning]/alert:tw-text-warning-500",
       "group-data-[variant=error]/alert:tw-text-error-500",
@@ -11561,7 +11617,7 @@ var CollapsiblePanel = ({
           },
           children: [
             /* @__PURE__ */ jsx("div", { className: "tw-flex tw-flex-1 tw-items-center tw-gap-2 tw-py-px tw-text-sm tw-font-medium tw-text-neutral-800", children: header }),
-            !isDisabled && /* @__PURE__ */ jsx("div", { className: "tw-ml-auto tw-shrink-0", children: /* @__PURE__ */ jsx(ChevronDown$1, { className: cn("tw-size-5 group-data-[state=open]:tw-rotate-180") }) })
+            !isDisabled && /* @__PURE__ */ jsx("div", { className: "tw-ml-auto tw-shrink-0", children: /* @__PURE__ */ jsx(ChevronDown, { className: cn("tw-size-5 group-data-[state=open]:tw-rotate-180") }) })
           ]
         }
       ),
@@ -11601,7 +11657,7 @@ var PanelWithDetails = ({
           onKeyUp: handleKeyUp,
           children: [
             /* @__PURE__ */ jsx("div", { className: "tw-mr-2 tw-flex tw-shrink-0 tw-items-center", children: /* @__PURE__ */ jsx(
-              ChevronDown$1,
+              ChevronDown,
               {
                 className: cn(
                   "tw-size-5",
@@ -11954,7 +12010,7 @@ var ToastDismiss = ({
       "tw-row-start-1",
       "tailwindcss-preflight",
       "[&_svg]:tw-aspect-square",
-      "[&_svg]:tw-size-4",
+      '[&_svg:not([class*="tw-size-"])]:tw-size-4',
       "[&_svg]:tw-m-1",
       "tw-text-white",
       "group-data-[variant=default]/toast:[&_svg]:tw-text-popover-foreground",
@@ -12099,13 +12155,14 @@ var ToastRoot = ({
           "tw-inline-flex",
           "tw-items-center",
           "tw-justify-center",
+          "tw-self-center",
           // styles — container at 20px with no padding so the 20px Lucide
           // glyph fills the slot (previous tw-size-4 + tw-p-1 clipped a
           // 16px child into 8px of visible space)
           "tw-aspect-square",
           "tw-size-5",
           "tw-shrink-0",
-          "[&_svg]:tw-size-5",
+          '[&_svg:not([class*="tw-size-"])]:tw-size-5',
           "tw-text-white",
           "group-data-[variant=default]/toast:tw-text-popover-foreground"
         ),
@@ -12235,8 +12292,8 @@ var emptyStateIconClassnames = cva(
   {
     variants: {
       variant: {
-        default: ["tw-size-16", "tw-text-4xl", "[&_svg]:tw-size-10"],
-        compact: ["tw-size-10", "tw-text-2xl", "[&_svg]:tw-size-6"]
+        default: ["tw-size-16", "tw-text-4xl", '[&_svg:not([class*="tw-size-"])]:tw-size-10'],
+        compact: ["tw-size-10", "tw-text-2xl", '[&_svg:not([class*="tw-size-"])]:tw-size-6']
       }
     },
     defaultVariants: {
@@ -12307,9 +12364,24 @@ var errorStateClassnames = cva(["tw-flex", "tw-flex-col", "tw-items-center", "tw
 var errorStateIconClassnames = cva(["tw-flex", "tw-items-center", "tw-justify-center"], {
   variants: {
     variant: {
-      default: ["tw-size-16", "tw-text-4xl", "[&_svg]:tw-size-10", "tw-text-warning-500"],
-      compact: ["tw-size-10", "tw-text-2xl", "[&_svg]:tw-size-6", "tw-text-warning-500"],
-      destructive: ["tw-size-16", "tw-text-4xl", "[&_svg]:tw-size-10", "tw-text-error-500"]
+      default: [
+        "tw-size-16",
+        "tw-text-4xl",
+        '[&_svg:not([class*="tw-size-"])]:tw-size-10',
+        "tw-text-warning-500"
+      ],
+      compact: [
+        "tw-size-10",
+        "tw-text-2xl",
+        '[&_svg:not([class*="tw-size-"])]:tw-size-6',
+        "tw-text-warning-500"
+      ],
+      destructive: [
+        "tw-size-16",
+        "tw-text-4xl",
+        '[&_svg:not([class*="tw-size-"])]:tw-size-10',
+        "tw-text-error-500"
+      ]
     }
   },
   defaultVariants: {
@@ -12467,6 +12539,7 @@ var PageHeaderDetail = ({
   breadcrumbs,
   overflowActions,
   title,
+  titleIcon,
   badges,
   description,
   primaryAction,
@@ -12481,6 +12554,7 @@ var PageHeaderDetail = ({
   /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-w-full tw-items-start tw-justify-between tw-gap-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-min-w-0 tw-flex-1 tw-flex-col tw-gap-2 tw-pr-2", children: [
       /* @__PURE__ */ jsxs("div", { className: titleRowClass, children: [
+        titleIcon && /* @__PURE__ */ jsx("span", { className: "tw-flex tw-shrink-0 tw-items-center", children: titleIcon }),
         /* @__PURE__ */ jsx("h1", { className: titleClass, children: title }),
         badges && /* @__PURE__ */ jsx("div", { className: badgesClass, children: badges })
       ] }),
@@ -12567,7 +12641,7 @@ var PageToolbarToken = ({
           className: "tailwindcss-preflight tw-inline-flex tw-cursor-pointer tw-items-center tw-gap-1 tw-bg-inherit tw-text-inherit",
           children: [
             children,
-            /* @__PURE__ */ jsx(ChevronDown$1, { className: "tw-size-3" })
+            /* @__PURE__ */ jsx(ChevronDown, { className: "tw-size-3" })
           ]
         }
       )
@@ -12584,7 +12658,7 @@ var Root30 = ({ ref, className, children, ...props }) => /* @__PURE__ */ jsx(
     children
   }
 );
-var Search4 = ({ ref, className, children, ...props }) => /* @__PURE__ */ jsx(
+var Search3 = ({ ref, className, children, ...props }) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -12642,7 +12716,7 @@ var AddFilter = ({ className, children, ...props }) => /* @__PURE__ */ jsxs(Butt
 var Clear = ({ className, children, ...props }) => /* @__PURE__ */ jsx(Button, { argo: true, variant: "invisible", size: "small", className: cn("tw-ml-auto", className), ...props, children: children ?? "Clear all" });
 var PageToolbar = Object.assign(Root30, {
   /** Left slot — typically a `SearchInput`. */
-  Search: Search4,
+  Search: Search3,
   /** Right cluster — host the four control groups below in the recommended order. */
   Right,
   /** Filter controls (`Combobox`, `Select`, `DatePicker`). */
@@ -12799,7 +12873,7 @@ var SearchInputWithNavigation = ({
     }
   };
   return /* @__PURE__ */ jsx(
-    TextInput$1,
+    TextInput,
     {
       ref,
       allowClear: true,
@@ -12815,7 +12889,7 @@ var SearchInputWithNavigation = ({
       leftSuffix: /* @__PURE__ */ jsxs(
         "div",
         {
-          className: cn$1("tw-flex tw-items-center tw-gap-3", {
+          className: cn("tw-flex tw-items-center tw-gap-3", {
             "tw-hidden": !withControls
           }),
           children: [
@@ -12824,10 +12898,10 @@ var SearchInputWithNavigation = ({
               "/",
               totalResults
             ] }),
-            /* @__PURE__ */ jsx(Separator$1, { orientation: "vertical", size: "3/4" }),
-            /* @__PURE__ */ jsxs(ButtonGroup$1, { children: [
+            /* @__PURE__ */ jsx(Separator, { orientation: "vertical", size: "3/4" }),
+            /* @__PURE__ */ jsxs(ButtonGroup, { children: [
               /* @__PURE__ */ jsx(
-                Button$1,
+                Button,
                 {
                   variant: "inline",
                   size: "icon-3xs",
@@ -12837,13 +12911,13 @@ var SearchInputWithNavigation = ({
                 }
               ),
               /* @__PURE__ */ jsx(
-                Button$1,
+                Button,
                 {
                   variant: "inline",
                   size: "icon-3xs",
                   onClick: onNavigateNext,
                   disabled: !totalResults,
-                  children: /* @__PURE__ */ jsx(ChevronDown$1, { className: "tw-size-4" })
+                  children: /* @__PURE__ */ jsx(ChevronDown, { className: "tw-size-4" })
                 }
               )
             ] })
@@ -12879,7 +12953,7 @@ var TagSelectCreateItem = ({ onCreate, value }) => {
       className: cn("[&_svg]:tw-text-primary-500", {
         "tw-hidden": !isCreateItemVisible
       }),
-      icon: /* @__PURE__ */ jsx(Plus$1, { className: "tw-size-4" }),
+      icon: /* @__PURE__ */ jsx(Plus, { className: "tw-size-4" }),
       children: [
         "Create",
         " ",
@@ -13114,7 +13188,7 @@ var CollapsibleStepHeader = ({
           /* @__PURE__ */ jsx("span", { children: label })
         ] }),
         /* @__PURE__ */ jsx(
-          ChevronDown$1,
+          ChevronDown,
           {
             className: cn("tw-size-4 tw-transition-transform", isExpanded && "tw-rotate-180")
           }
@@ -13253,7 +13327,7 @@ var ExpandToggle = ({
     children: [
       /* @__PURE__ */ jsx("span", { children: isExpanded ? showLessLabel : showMoreLabel }),
       /* @__PURE__ */ jsx(
-        ChevronDown$1,
+        ChevronDown,
         {
           className: cn("tw-size-5 tw-transition-transform", isExpanded && "tw-rotate-180")
         }
@@ -14282,6 +14356,151 @@ var PasswordInput = ({
     }
   );
 };
+var InputOtpVariantContext = createContext({
+  sizing: "md",
+  state: "default"
+});
+var useInputOtpVariant = () => use(InputOtpVariantContext);
+var useInputOtpRenderContext = () => use(OTPInputContext);
+var InputOtpGroup = ({
+  ref,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { ref, className: cn("tw-flex tw-items-center tw-gap-2", className), ...props });
+var InputOtpSeparator = ({
+  ref,
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    role: "separator",
+    "aria-orientation": "vertical",
+    className: cn("tw-flex tw-items-center tw-text-muted-foreground", className),
+    ...props,
+    children: children ?? /* @__PURE__ */ jsx(Minus, { className: "tw-size-4" })
+  }
+);
+var slotVariants = cva(
+  [
+    "tw-relative",
+    "tw-flex",
+    "tw-items-center",
+    "tw-justify-center",
+    "tw-border",
+    "tw-border-input",
+    "tw-bg-background",
+    "tw-text-foreground",
+    "tw-font-medium",
+    "tw-tabular-nums",
+    "tw-rounded-lg",
+    "tw-transition",
+    "tw-outline-none",
+    // active slot sits above its neighbours so its ring isn't clipped
+    "data-[active=true]:tw-z-10",
+    "data-[active=true]:tw-border-primary",
+    "data-[active=true]:tw-ring-2",
+    "data-[active=true]:tw-ring-primary/50"
+  ],
+  {
+    defaultVariants: {
+      sizing: "md",
+      state: "default"
+    },
+    variants: {
+      sizing: {
+        sm: ["tw-h-8", "tw-w-8", "tw-text-sm"],
+        md: ["tw-h-9", "tw-w-9", "tw-text-base"],
+        lg: ["tw-h-10", "tw-w-10", "tw-text-lg"]
+      },
+      // `!` forces the border colour over the base `tw-border-input` once tailwind-merge dedupes.
+      // Matches the pattern InputGroup uses for its argo error state.
+      state: {
+        default: [],
+        error: [
+          "!tw-border-destructive",
+          "tw-bg-destructive/5",
+          "data-[active=true]:!tw-border-destructive",
+          "data-[active=true]:tw-ring-destructive/40"
+        ]
+      }
+    }
+  }
+);
+var InputOtpSlot = ({
+  ref,
+  index,
+  className,
+  ...props
+}) => {
+  const { slots } = useInputOtpRenderContext();
+  const { sizing, state } = useInputOtpVariant();
+  const slot = slots[index];
+  const char = slot?.char ?? null;
+  const isActive = slot?.isActive ?? false;
+  const hasFakeCaret = slot?.hasFakeCaret ?? false;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-active": isActive || void 0,
+      "data-slot-index": index,
+      className: cn(slotVariants({ sizing, state }), className),
+      ...props,
+      children: [
+        char,
+        hasFakeCaret && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "tw-pointer-events-none tw-absolute tw-inset-0 tw-flex tw-items-center tw-justify-center",
+            children: /* @__PURE__ */ jsx("div", { className: "tw-h-1/2 tw-w-px tw-animate-caret-blink tw-bg-foreground" })
+          }
+        )
+      ]
+    }
+  );
+};
+var Root31 = ({
+  ref,
+  sizing = "md",
+  state = "default",
+  pattern = REGEXP_ONLY_DIGITS,
+  containerClassName,
+  className,
+  children,
+  ...rest
+}) => /* @__PURE__ */ jsx(InputOtpVariantContext, { value: { sizing, state }, children: /* @__PURE__ */ jsx(
+  OTPInput,
+  {
+    ...rest,
+    ref,
+    pattern,
+    "aria-invalid": state === "error" || void 0,
+    containerClassName: cn(
+      "tw-flex tw-items-center tw-gap-2 has-[:disabled]:tw-opacity-50",
+      containerClassName
+    ),
+    className: cn("disabled:tw-cursor-not-allowed", className),
+    children
+  }
+) });
+var InputOtp = Object.assign(Root31, {
+  Group: InputOtpGroup,
+  Slot: InputOtpSlot,
+  Separator: InputOtpSeparator
+});
+
+// src/blocks/InputOtp/index.ts
+var useInputOtpContext = () => {
+  const ctx = use(OTPInputContext);
+  if (!ctx.slots) {
+    throw new Error("useInputOtpContext must be used inside <InputOtp>.");
+  }
+  return ctx;
+};
 var { fieldContext, useFieldContext, formContext, useFormContext } = createFormHookContexts();
 var FormBody = ({ children, className, ...formProps }) => {
   const form = useFormContext();
@@ -14289,7 +14508,7 @@ var FormBody = ({ children, className, ...formProps }) => {
     "form",
     {
       ...formProps,
-      className: cn$1("tw-flex tw-flex-col tw-gap-4", className),
+      className: cn("tw-flex tw-flex-col tw-gap-4", className),
       onSubmit: (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -14306,7 +14525,7 @@ var SubmitButton = ({ children = "Submit", ...buttonProps }) => {
     {
       selector: (state) => ({ isSubmitting: state.isSubmitting, canSubmit: state.canSubmit }),
       children: ({ isSubmitting, canSubmit }) => /* @__PURE__ */ jsx(
-        Button$1,
+        Button,
         {
           ...buttonProps,
           type: "submit",
@@ -14331,19 +14550,19 @@ var errorMessage = (field) => {
 var FieldShell = ({ field, label, required, help, className, children }) => {
   const error = errorMessage(field);
   const showError = field.state.meta.isTouched && !!error;
-  return /* @__PURE__ */ jsxs(FormGroup$1, { className, state: showError ? "error" : void 0, children: [
-    label && /* @__PURE__ */ jsxs(Label$1, { htmlFor: field.name, children: [
+  return /* @__PURE__ */ jsxs(FormGroup, { className, state: showError ? "error" : void 0, children: [
+    label && /* @__PURE__ */ jsxs(Label, { htmlFor: field.name, children: [
       label,
       required && /* @__PURE__ */ jsx("span", { className: "tw-ml-0.5 tw-text-secondary-500", children: "*" })
     ] }),
     children,
-    showError ? /* @__PURE__ */ jsx(FormGroup$1.Help, { children: error }) : help && /* @__PURE__ */ jsx(FormGroup$1.Help, { children: help })
+    showError ? /* @__PURE__ */ jsx(FormGroup.Help, { children: error }) : help && /* @__PURE__ */ jsx(FormGroup.Help, { children: help })
   ] });
 };
 var CheckboxField = ({ label, help, className, children, ...checkboxProps }) => {
   const field = useFieldContext();
   return /* @__PURE__ */ jsx(FieldShell, { field, help, className, children: /* @__PURE__ */ jsx(
-    Checkbox$1,
+    Checkbox,
     {
       id: field.name,
       name: field.name,
@@ -14360,7 +14579,7 @@ var CheckboxField = ({ label, help, className, children, ...checkboxProps }) =>
 var NumberField = ({ label, required, help, className, ...inputProps }) => {
   const field = useFieldContext();
   return /* @__PURE__ */ jsx(FieldShell, { field, label, required, help, className, children: /* @__PURE__ */ jsx(
-    FormGroup$1.NumberInput,
+    FormGroup.NumberInput,
     {
       id: field.name,
       name: field.name,
@@ -14377,7 +14596,7 @@ var PasswordField = ({ label, required, help, className, ...inputProps }) => {
   const field = useFieldContext();
   const showError = field.state.meta.isTouched && field.state.meta.errors.length > 0;
   return /* @__PURE__ */ jsx(FieldShell, { field, label, required, help, className, children: /* @__PURE__ */ jsx(
-    PasswordInput$1,
+    PasswordInput,
     {
       id: field.name,
       name: field.name,
@@ -14406,7 +14625,7 @@ var SelectField = ({
 }) => {
   const field = useFieldContext();
   return /* @__PURE__ */ jsx(FieldShell, { field, label, required, help, className, children: /* @__PURE__ */ jsxs(
-    Select$1.Root,
+    Select.Root,
     {
       value: field.state.value ?? "",
       onValueChange: (value) => {
@@ -14415,7 +14634,7 @@ var SelectField = ({
       ...rootProps,
       children: [
         /* @__PURE__ */ jsx(
-          Select$1.Trigger,
+          Select.Trigger,
           {
             id: field.name,
             className: triggerClassName ?? "tw-w-full",
@@ -14426,7 +14645,7 @@ var SelectField = ({
             onBlur: field.handleBlur
           }
         ),
-        /* @__PURE__ */ jsx(Select$1.Content, { variant: variant === "argo" ? "argo" : "default", children: options.map((option) => /* @__PURE__ */ jsx(Select$1.Item, { value: option.value, children: option.label }, option.value)) })
+        /* @__PURE__ */ jsx(Select.Content, { variant: variant === "argo" ? "argo" : "default", children: options.map((option) => /* @__PURE__ */ jsx(Select.Item, { value: option.value, children: option.label }, option.value)) })
       ]
     }
   ) });
@@ -14434,7 +14653,7 @@ var SelectField = ({
 var SwitchField = ({ label, help, className, children, ...switchProps }) => {
   const field = useFieldContext();
   return /* @__PURE__ */ jsx(FieldShell, { field, help, className, children: /* @__PURE__ */ jsx(
-    Switch$1,
+    Switch,
     {
       id: field.name,
       name: field.name,
@@ -14451,7 +14670,7 @@ var SwitchField = ({ label, help, className, children, ...switchProps }) => {
 var TextAreaField = ({ label, required, help, className, ...inputProps }) => {
   const field = useFieldContext();
   return /* @__PURE__ */ jsx(FieldShell, { field, label, required, help, className, children: /* @__PURE__ */ jsx(
-    FormGroup$1.Textarea,
+    FormGroup.Textarea,
     {
       id: field.name,
       name: field.name,
@@ -14467,7 +14686,7 @@ var TextAreaField = ({ label, required, help, className, ...inputProps }) => {
 var TextField = ({ label, required, help, className, ...inputProps }) => {
   const field = useFieldContext();
   return /* @__PURE__ */ jsx(FieldShell, { field, label, required, help, className, children: /* @__PURE__ */ jsx(
-    FormGroup$1.TextInput,
+    FormGroup.TextInput,
     {
       id: field.name,
       name: field.name,
@@ -14748,6 +14967,6 @@ function useAutosizeInput({
   return { inputRef, inputStyle, sizerElement };
 }
 
-export { Alert, AnswerSummary, AutoSaveTextarea, Avatar, Badge, Breadcrumb, Button, ButtonGroup, ButtonInline, Calendar2 as Calendar, Card, Checkbox, Clipboard, ClipboardButton, ClipboardInline, CodeEditor, Collapse, Collapsible, CollapsiblePanel, CollapsibleStepHeader, ColorInput, Combobox, Command, CommandGroup, CommandInput, CommandItem, CommandList, ConflictStatusIndicator, DateInput, DatePicker, DateRangeInput, DiffType, DiffView, DotsLoader, DropdownMenu, EmptyConfigurationActionCard, EmptySearchContent, EmptyState, ErrorState, FormGroup, FullScreenModal, FullScreenModalBody, FullScreenModalHeader, HelpBlock, HoverCard, Icon, InlineStepDetail, InlineStepLabel, InputGroup, Kbd, Label, Link2 as Link, MarkedText, MergeEditor, MessageBubble, Modal, MultiActionButtonGroup, MultiCombobox, Navbar, NumberInput, PageHeader, PageLayout, PageToolbar, Pagination, PaneHeader, PanelWithDetails, PasswordInput, PlanApproval, PlanRewritingIndicator, Popconfirm, Popover, Progress, PromptInput, Question, QuestionBlock, RadioGroup, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Search2 as Search, SearchForm, SearchInput, SearchInputWithNavigation, Select, Separator, Sheet, Sidebar, SidebarProvider, Skeleton, SkeletonList, Slider, SplitButton, SqlEditor, SuggestedPrompt, Switch, Table2 as Table, Tabs, TabsContent, Tagger, TextInput, Textarea, ThemeProvider, ThinkingIndicator, TimeInput, TimePicker, Timeline, Toaster, Toggle, ToggleGroup, Tooltip, TooltipProvider, Truncated, ZoomableSvg, argoVariants, cn, computeDiffRows, computeLineInformation, copyToClipboard, isIconName, isMac, kbdVariants, keys, mergeRefs, setServerFieldErrors, toast, useAppForm, useAutosizeInput, useMergeDiff, useNotification, useScrollbarPosition, useSidebar, withForm };
+export { Alert, AnswerSummary, AutoSaveTextarea, Avatar, Badge, Breadcrumb, Button, ButtonGroup, ButtonInline, Calendar2 as Calendar, Card, Checkbox, Clipboard, ClipboardButton, ClipboardInline, CodeEditor, Collapse, Collapsible, CollapsiblePanel, CollapsibleStepHeader, ColorInput, Combobox, Command, CommandGroup, CommandInput, CommandItem, CommandList, ConflictStatusIndicator, DateInput, DatePicker, DateRangeInput, DiffType, DiffView, DotsLoader, DropdownMenu, EmptyConfigurationActionCard, EmptySearchContent, EmptyState, ErrorState, FormGroup, FullScreenModal, FullScreenModalBody, FullScreenModalHeader, HelpBlock, HoverCard, Icon, InlineStepDetail, InlineStepLabel, InputGroup, InputOtp, Kbd, Label, Link2 as Link, MarkedText, MergeEditor, MessageBubble, Modal, MultiActionButtonGroup, MultiCombobox, Navbar, NumberInput, PageHeader, PageLayout, PageToolbar, Pagination, PaneHeader, PanelWithDetails, PasswordInput, PlanApproval, PlanRewritingIndicator, Popconfirm, Popover, Progress, PromptInput, Question, QuestionBlock, RadioGroup, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Search2 as Search, SearchForm, SearchInput, SearchInputWithNavigation, Select, Separator, Sheet, Sidebar, SidebarProvider, Skeleton, SkeletonList, Slider, SplitButton, SqlEditor, SuggestedPrompt, Switch, Table2 as Table, Tabs, TabsContent, Tagger, TextInput, Textarea, ThemeProvider, ThinkingIndicator, TimeInput, TimePicker, Timeline, Toaster, Toggle, ToggleGroup, Tooltip, TooltipProvider, Truncated, ZoomableSvg, argoVariants, cn, computeDiffRows, computeLineInformation, copyToClipboard, isIconName, isMac, kbdVariants, keys, mergeRefs, setServerFieldErrors, toast, useAppForm, useAutosizeInput, useInputOtpContext, useMergeDiff, useNotification, useScrollbarPosition, useSidebar, withForm };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map