@keboola/design 2.0.0 → 2.1.0

package/dist/index.cjs

@@ -8,26 +8,24 @@ var react = require('react');
 var reactTooltip = require('@radix-ui/react-tooltip');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
-var icons = require('@awesome.me/kit-be8bcf7e5e/icons');
-var reactFontawesome = require('@fortawesome/react-fontawesome');
 var reactDayPicker = require('react-day-picker');
 require('react-day-picker/src/style.css');
 var reactPopover = require('@radix-ui/react-popover');
 var ScrollAreaPrimitive2 = require('@radix-ui/react-scroll-area');
 var TextareaAutosize = require('react-textarea-autosize');
 var RLabel = require('@radix-ui/react-label');
-var design = require('@keboola/design');
 var reactSwitch = require('@radix-ui/react-switch');
 var reactHoverCard = require('@radix-ui/react-hover-card');
 var RSeparator = require('@radix-ui/react-separator');
 var RRadioGroup = require('@radix-ui/react-radio-group');
 var reactSlider = require('@radix-ui/react-slider');
 var SelectPrimitive = require('@radix-ui/react-select');
+var icons = require('@awesome.me/kit-be8bcf7e5e/icons');
+var reactFontawesome = require('@fortawesome/react-fontawesome');
 var reactCheckbox = require('@radix-ui/react-checkbox');
 var DropdownMenuPrimitive3 = require('@radix-ui/react-dropdown-menu');
 var DialogPrimitive = require('@radix-ui/react-dialog');
 var reactDom = require('react-dom');
-var icons$1 = require('@keboola/design/icons');
 var reactCollapsible = require('@radix-ui/react-collapsible');
 var cmdk = require('cmdk');
 var combobox = require('@base-ui/react/combobox');
@@ -60,6 +58,7 @@ var state = require('@codemirror/state');
 var nodeDiff3 = require('node-diff3');
 var ResizablePrimitive = require('react-resizable-panels');
 var sonner = require('sonner');
+var inputOtp = require('input-otp');
 var reactForm = require('@tanstack/react-form');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -234,7 +233,7 @@ var TooltipTrigger = ({
     if (keepOpenOnClick) event.preventDefault();
     onClick?.(event);
   };
-  const handePointerDown = (event) => {
+  const handlePointerDown = (event) => {
     if (keepOpenOnClick) event.preventDefault();
     onPointerDown?.(event);
   };
@@ -246,8 +245,16 @@ var TooltipTrigger = ({
       ref,
       className: cn("tailwindcss-preflight", className),
       onClick: handleClick,
-      onPointerDown: handePointerDown,
-      children: asChild ? children : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "tw-inline-flex tw-items-center", children })
+      )
     }
   );
 };
@@ -365,29 +372,20 @@ var sha256 = async (text) => {
 var useSHA256 = (text) => {
   const [hash, setHash] = react.useState("");
   react.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__ */ jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { ...rest, ref, icon });
-
-// src/components/Icon/index.ts
-var validIconNames;
-var getValidIconNames = () => {
-  if (validIconNames) return validIconNames;
-  validIconNames = new Set(
-    Object.values(icons.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 = classVarianceAuthority.cva(
   [
     "tailwindcss-preflight",
@@ -511,15 +509,38 @@ var variants = classVarianceAuthority.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']
       }
     }
   }
@@ -652,10 +673,10 @@ var Button = ({
   variant = "primary",
   size = "medium",
   block = false,
-  icon,
   ...buttonProps
 }) => {
   const Comp = asChild ? reactSlot.Root : "button";
+  const isIconOnly = String(size).startsWith("icon");
   const classNames = argo ? argoVariants({ variant, size, block, className }) : variants({
     size,
     variant,
@@ -678,14 +699,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__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "tw-size-4 tw-shrink-0 tw-animate-spin" }),
-        !isLoading && icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon }),
-        /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slottable, { children })
+        /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slottable, { children: isLoading && isIconOnly ? null : children })
       ]
     }
   );
@@ -2083,21 +2103,21 @@ var Clipboard = ({
     return tooltip;
   })();
   const tooltipVariant = state === "ready" && !!text ? tooltipVariantProp : "action";
-  return /* @__PURE__ */ jsxRuntime.jsxs(design.Tooltip.Root, { open: isTooltipOpen, onOpenChange: handleOnOpenChange, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip.Root, { open: isTooltipOpen, onOpenChange: handleOnOpenChange, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      design.Tooltip.Trigger,
+      Tooltip.Trigger,
       {
         ...restButtonProps,
         asChild,
         keepOpenOnClick: true,
         onClick: handleOnClick,
-        className: design.cn("tw-cursor-pointer", className),
+        className: cn("tw-cursor-pointer", className),
         ref,
         children: children ?? text
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      design.Tooltip.Content,
+      Tooltip.Content,
       {
         keepOpenOnPointerDownOutside: true,
         placement: tooltipPlacement,
@@ -3096,39 +3116,53 @@ var Search2 = ({
     onChange?.("", event);
     onClear?.();
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn(
-        searchWrapperVariants({ variant }),
-        {
-          "tw-cursor-not-allowed tw-opacity-40": disabled
-        },
-        className
-      ),
-      "data-testid": testId.wrapper,
-      children: [
-        variant === "ai" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "tw-size-4 tw-shrink-0 [&_*]:tw-stroke-aigradient-600" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "tw-size-4 tw-shrink-0 tw-text-neutral-400" }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ClearButton, { onClick: handleClear, testId: testId.clearButton }),
-        suffix
-      ]
-    }
+        "data-testid": testId.wrapper,
+        onMouseDown: handleWrapperMouseDown,
+        children: [
+          variant === "ai" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "tw-size-4 tw-shrink-0 [&_*]:tw-stroke-aigradient-600" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "tw-size-4 tw-shrink-0 tw-text-neutral-400" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ...rest,
+              ref,
+              placeholder,
+              "data-testid": testId.input,
+              type: "text",
+              value: internalValue ?? "",
+              onChange: handleChange,
+              onBlur: handleBlur,
+              className: searchInputClassnames,
+              disabled,
+              readOnly
+            }
+          ),
+          isClearButtonVisible && /* @__PURE__ */ jsxRuntime.jsx(ClearButton, { onClick: handleClear, testId: testId.clearButton }),
+          suffix
+        ]
+      }
+    )
   );
 };
 var SearchForm = ({
@@ -3162,7 +3196,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,
@@ -3233,6 +3267,23 @@ var SelectContent = ({
   }
 ) });
 var SelectGroup = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Group, { ...props, className: cn("tw-flex tw-flex-col tw-gap-0.5", className) });
+var Icon = ({ ref, icon, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { ...rest, ref, icon });
+
+// src/components/Icon/index.ts
+var validIconNames;
+var getValidIconNames = () => {
+  if (validIconNames) return validIconNames;
+  validIconNames = new Set(
+    Object.values(icons.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__ */ jsxRuntime.jsx(Icon, { icon: value }) : value;
 var SelectItem = ({
@@ -3658,7 +3709,7 @@ var variants4 = classVarianceAuthority.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.
@@ -3666,14 +3717,14 @@ var variants4 = classVarianceAuthority.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",
@@ -3684,7 +3735,7 @@ var variants4 = classVarianceAuthority.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",
@@ -3732,7 +3783,7 @@ var ItemIcon = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime
       // 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",
@@ -4353,10 +4404,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__ */ jsxRuntime.jsx(Icon, { icon: props.icon, spin: props.spin }) : props.icon
+              children: renderLegacyIcon(props.icon)
             }
           )
         }
@@ -4397,7 +4448,7 @@ var Truncated = ({
   const isScrollableTarget = (e) => {
     return e.scrollHeight - OFFSET_TOLERANCE >= e.clientHeight;
   };
-  const truncatedClasses = design.cn(
+  const truncatedClasses = cn(
     className,
     "tw-overflow-hidden [word-break:break-all]",
     "[display:-webkit-box!important] [-webkit-box-orient:vertical]",
@@ -4407,7 +4458,7 @@ var Truncated = ({
     return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: truncatedClasses, ...rest, children: text });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
-    design.Tooltip,
+    Tooltip,
     {
       placement: tooltipPlacement,
       variant: tooltipVariant,
@@ -4740,7 +4791,7 @@ var SplitButtonBase = ({
             size: iconSizeMap[size],
             variant,
             "aria-label": "Additional actions",
-            children: /* @__PURE__ */ jsxRuntime.jsx(icons$1.ChevronDown, { className: "tw-size-5" })
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "tw-size-5" })
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Content, { align: "end", children: actions })
@@ -5360,7 +5411,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",
@@ -5504,7 +5555,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
@@ -5633,7 +5684,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",
@@ -6519,7 +6570,7 @@ var CommandItem = ({
       ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(CheckIndicator, { variant }),
-        icon && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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
       ]
     }
@@ -6593,7 +6644,7 @@ var addonVariants2 = classVarianceAuthority.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: {
@@ -6664,7 +6715,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
@@ -7067,7 +7118,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
@@ -7465,7 +7516,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
@@ -7521,7 +7572,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
     ),
@@ -7584,7 +7635,7 @@ var NavbarMenuAvatar = ({
       ...rest,
       ref,
       type,
-      className: design.cn(
+      className: cn(
         "tw-flex",
         "tw-items-center",
         "tw-justify-center",
@@ -7625,7 +7676,7 @@ var variants6 = classVarianceAuthority.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",
@@ -7657,7 +7708,7 @@ var variants6 = classVarianceAuthority.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"]
       }
     }
@@ -7759,7 +7810,7 @@ var NavbarMenuButton = ({
   const Comp = asChild ? reactSlot.Root : "button";
   const isSearchVariant = variant === "search";
   const isEmphasizedVariant = variant === "emphasized";
-  const adornment = isSearchVariant ? /* @__PURE__ */ jsxRuntime.jsx(icons$1.Search, {}) : renderLegacyIcon(icon);
+  const adornment = isSearchVariant ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, {}) : renderLegacyIcon(icon);
   const adornmentVariant = (() => {
     if (isSearchVariant || variant === "icon") return "icon-button";
     if (isEmphasizedVariant) return "icon-accent-emphasized";
@@ -7772,7 +7823,7 @@ var NavbarMenuButton = ({
       ref,
       type,
       "data-variant": variant,
-      className: design.cn(variants7({ className, variant })),
+      className: cn(variants7({ className, variant })),
       children: [
         adornment && /* @__PURE__ */ jsxRuntime.jsx(NavbarMenuItemAdornment, { variant: adornmentVariant, children: adornment }),
         /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slottable, { children })
@@ -7875,7 +7926,7 @@ var PaginationEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime
       "tw-items-center",
       "tw-justify-center",
       "tw-text-foreground",
-      "[&_svg]:tw-size-4",
+      '[&_svg:not([class*="tw-size-"])]:tw-size-4',
       className
     ),
     ...props,
@@ -7969,7 +8020,7 @@ var Avatar = ({
       ...props,
       ref,
       style: styles.wrapper,
-      className: design.cn(
+      className: cn(
         variant === "circle" ? "tw-rounded-full" : "tw-rounded-md",
         "tw-overflow-hidden",
         "focus-visible:tw-outline-none",
@@ -8201,7 +8252,7 @@ var Toggle = ({
       disabled,
       children: [
         badge && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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
       ]
     }
@@ -8366,7 +8417,11 @@ var connector = classVarianceAuthority.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",
@@ -9209,7 +9264,7 @@ var ColorPicker = ({ value, disabled, readOnly, ...props }) => {
         disabled: disabled || readOnly,
         onClick: handleOpenPicker,
         "aria-label": "Pick color",
-        children: /* @__PURE__ */ jsxRuntime.jsx(icons$1.Pipette, { className: "tw-size-4" })
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pipette, { className: "tw-size-4" })
       }
     )
   ] });
@@ -9627,7 +9682,7 @@ var AlertIcon = ({ variant, icon, className, ...rest }) => /* @__PURE__ */ jsxRu
       "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",
@@ -11986,7 +12041,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",
@@ -12131,13 +12186,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"
         ),
@@ -12267,8 +12323,8 @@ var emptyStateIconClassnames = classVarianceAuthority.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: {
@@ -12339,9 +12395,24 @@ var errorStateClassnames = classVarianceAuthority.cva(["tw-flex", "tw-flex-col",
 var errorStateIconClassnames = classVarianceAuthority.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: {
@@ -12499,6 +12570,7 @@ var PageHeaderDetail = ({
   breadcrumbs,
   overflowActions,
   title,
+  titleIcon,
   badges,
   description,
   primaryAction,
@@ -12513,6 +12585,7 @@ var PageHeaderDetail = ({
   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-w-full tw-items-start tw-justify-between tw-gap-4", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-min-w-0 tw-flex-1 tw-flex-col tw-gap-2 tw-pr-2", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: titleRowClass, children: [
+        titleIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-flex tw-shrink-0 tw-items-center", children: titleIcon }),
         /* @__PURE__ */ jsxRuntime.jsx("h1", { className: titleClass, children: title }),
         badges && /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgesClass, children: badges })
       ] }),
@@ -12616,7 +12689,7 @@ var Root30 = ({ ref, className, children, ...props }) => /* @__PURE__ */ jsxRunt
     children
   }
 );
-var Search4 = ({ ref, className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+var Search3 = ({ ref, className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -12674,7 +12747,7 @@ var AddFilter = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntim
 var Clear = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.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`). */
@@ -12831,7 +12904,7 @@ var SearchInputWithNavigation = ({
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    design.TextInput,
+    TextInput,
     {
       ref,
       allowClear: true,
@@ -12847,7 +12920,7 @@ var SearchInputWithNavigation = ({
       leftSuffix: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: design.cn("tw-flex tw-items-center tw-gap-3", {
+          className: cn("tw-flex tw-items-center tw-gap-3", {
             "tw-hidden": !withControls
           }),
           children: [
@@ -12856,10 +12929,10 @@ var SearchInputWithNavigation = ({
               "/",
               totalResults
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(design.Separator, { orientation: "vertical", size: "3/4" }),
-            /* @__PURE__ */ jsxRuntime.jsxs(design.ButtonGroup, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "vertical", size: "3/4" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ButtonGroup, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(
-                design.Button,
+                Button,
                 {
                   variant: "inline",
                   size: "icon-3xs",
@@ -12869,7 +12942,7 @@ var SearchInputWithNavigation = ({
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
-                design.Button,
+                Button,
                 {
                   variant: "inline",
                   size: "icon-3xs",
@@ -12911,7 +12984,7 @@ var TagSelectCreateItem = ({ onCreate, value }) => {
       className: cn("[&_svg]:tw-text-primary-500", {
         "tw-hidden": !isCreateItemVisible
       }),
-      icon: /* @__PURE__ */ jsxRuntime.jsx(icons$1.Plus, { className: "tw-size-4" }),
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "tw-size-4" }),
       children: [
         "Create",
         " ",
@@ -14314,6 +14387,151 @@ var PasswordInput = ({
     }
   );
 };
+var InputOtpVariantContext = react.createContext({
+  sizing: "md",
+  state: "default"
+});
+var useInputOtpVariant = () => react.use(InputOtpVariantContext);
+var useInputOtpRenderContext = () => react.use(inputOtp.OTPInputContext);
+var InputOtpGroup = ({
+  ref,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("tw-flex tw-items-center tw-gap-2", className), ...props });
+var InputOtpSeparator = ({
+  ref,
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    ref,
+    role: "separator",
+    "aria-orientation": "vertical",
+    className: cn("tw-flex tw-items-center tw-text-muted-foreground", className),
+    ...props,
+    children: children ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: "tw-size-4" })
+  }
+);
+var slotVariants = classVarianceAuthority.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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref,
+      "data-active": isActive || void 0,
+      "data-slot-index": index,
+      className: cn(slotVariants({ sizing, state }), className),
+      ...props,
+      children: [
+        char,
+        hasFakeCaret && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 = inputOtp.REGEXP_ONLY_DIGITS,
+  containerClassName,
+  className,
+  children,
+  ...rest
+}) => /* @__PURE__ */ jsxRuntime.jsx(InputOtpVariantContext, { value: { sizing, state }, children: /* @__PURE__ */ jsxRuntime.jsx(
+  inputOtp.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 = react.use(inputOtp.OTPInputContext);
+  if (!ctx.slots) {
+    throw new Error("useInputOtpContext must be used inside <InputOtp>.");
+  }
+  return ctx;
+};
 var { fieldContext, useFieldContext, formContext, useFormContext } = reactForm.createFormHookContexts();
 var FormBody = ({ children, className, ...formProps }) => {
   const form = useFormContext();
@@ -14321,7 +14539,7 @@ var FormBody = ({ children, className, ...formProps }) => {
     "form",
     {
       ...formProps,
-      className: design.cn("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();
@@ -14338,7 +14556,7 @@ var SubmitButton = ({ children = "Submit", ...buttonProps }) => {
     {
       selector: (state) => ({ isSubmitting: state.isSubmitting, canSubmit: state.canSubmit }),
       children: ({ isSubmitting, canSubmit }) => /* @__PURE__ */ jsxRuntime.jsx(
-        design.Button,
+        Button,
         {
           ...buttonProps,
           type: "submit",
@@ -14363,19 +14581,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__ */ jsxRuntime.jsxs(design.FormGroup, { className, state: showError ? "error" : void 0, children: [
-    label && /* @__PURE__ */ jsxRuntime.jsxs(design.Label, { htmlFor: field.name, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(FormGroup, { className, state: showError ? "error" : void 0, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsxs(Label, { htmlFor: field.name, children: [
       label,
       required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-ml-0.5 tw-text-secondary-500", children: "*" })
     ] }),
     children,
-    showError ? /* @__PURE__ */ jsxRuntime.jsx(design.FormGroup.Help, { children: error }) : help && /* @__PURE__ */ jsxRuntime.jsx(design.FormGroup.Help, { children: help })
+    showError ? /* @__PURE__ */ jsxRuntime.jsx(FormGroup.Help, { children: error }) : help && /* @__PURE__ */ jsxRuntime.jsx(FormGroup.Help, { children: help })
   ] });
 };
 var CheckboxField = ({ label, help, className, children, ...checkboxProps }) => {
   const field = useFieldContext();
   return /* @__PURE__ */ jsxRuntime.jsx(FieldShell, { field, help, className, children: /* @__PURE__ */ jsxRuntime.jsx(
-    design.Checkbox,
+    Checkbox,
     {
       id: field.name,
       name: field.name,
@@ -14392,7 +14610,7 @@ var CheckboxField = ({ label, help, className, children, ...checkboxProps }) =>
 var NumberField = ({ label, required, help, className, ...inputProps }) => {
   const field = useFieldContext();
   return /* @__PURE__ */ jsxRuntime.jsx(FieldShell, { field, label, required, help, className, children: /* @__PURE__ */ jsxRuntime.jsx(
-    design.FormGroup.NumberInput,
+    FormGroup.NumberInput,
     {
       id: field.name,
       name: field.name,
@@ -14409,7 +14627,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__ */ jsxRuntime.jsx(FieldShell, { field, label, required, help, className, children: /* @__PURE__ */ jsxRuntime.jsx(
-    design.PasswordInput,
+    PasswordInput,
     {
       id: field.name,
       name: field.name,
@@ -14438,7 +14656,7 @@ var SelectField = ({
 }) => {
   const field = useFieldContext();
   return /* @__PURE__ */ jsxRuntime.jsx(FieldShell, { field, label, required, help, className, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    design.Select.Root,
+    Select.Root,
     {
       value: field.state.value ?? "",
       onValueChange: (value) => {
@@ -14447,7 +14665,7 @@ var SelectField = ({
       ...rootProps,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          design.Select.Trigger,
+          Select.Trigger,
           {
             id: field.name,
             className: triggerClassName ?? "tw-w-full",
@@ -14458,7 +14676,7 @@ var SelectField = ({
             onBlur: field.handleBlur
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(design.Select.Content, { variant: variant === "argo" ? "argo" : "default", children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(design.Select.Item, { value: option.value, children: option.label }, option.value)) })
+        /* @__PURE__ */ jsxRuntime.jsx(Select.Content, { variant: variant === "argo" ? "argo" : "default", children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(Select.Item, { value: option.value, children: option.label }, option.value)) })
       ]
     }
   ) });
@@ -14466,7 +14684,7 @@ var SelectField = ({
 var SwitchField = ({ label, help, className, children, ...switchProps }) => {
   const field = useFieldContext();
   return /* @__PURE__ */ jsxRuntime.jsx(FieldShell, { field, help, className, children: /* @__PURE__ */ jsxRuntime.jsx(
-    design.Switch,
+    Switch,
     {
       id: field.name,
       name: field.name,
@@ -14483,7 +14701,7 @@ var SwitchField = ({ label, help, className, children, ...switchProps }) => {
 var TextAreaField = ({ label, required, help, className, ...inputProps }) => {
   const field = useFieldContext();
   return /* @__PURE__ */ jsxRuntime.jsx(FieldShell, { field, label, required, help, className, children: /* @__PURE__ */ jsxRuntime.jsx(
-    design.FormGroup.Textarea,
+    FormGroup.Textarea,
     {
       id: field.name,
       name: field.name,
@@ -14499,7 +14717,7 @@ var TextAreaField = ({ label, required, help, className, ...inputProps }) => {
 var TextField = ({ label, required, help, className, ...inputProps }) => {
   const field = useFieldContext();
   return /* @__PURE__ */ jsxRuntime.jsx(FieldShell, { field, label, required, help, className, children: /* @__PURE__ */ jsxRuntime.jsx(
-    design.FormGroup.TextInput,
+    FormGroup.TextInput,
     {
       id: field.name,
       name: field.name,
@@ -14792,6 +15010,18 @@ Object.defineProperty(exports, "useCommandState", {
   enumerable: true,
   get: function () { return cmdk.useCommandState; }
 });
+Object.defineProperty(exports, "REGEXP_ONLY_CHARS", {
+  enumerable: true,
+  get: function () { return inputOtp.REGEXP_ONLY_CHARS; }
+});
+Object.defineProperty(exports, "REGEXP_ONLY_DIGITS", {
+  enumerable: true,
+  get: function () { return inputOtp.REGEXP_ONLY_DIGITS; }
+});
+Object.defineProperty(exports, "REGEXP_ONLY_DIGITS_AND_CHARS", {
+  enumerable: true,
+  get: function () { return inputOtp.REGEXP_ONLY_DIGITS_AND_CHARS; }
+});
 exports.Alert = Alert;
 exports.AnswerSummary = AnswerSummary;
 exports.AutoSaveTextarea = AutoSaveTextarea;
@@ -14841,6 +15071,7 @@ exports.Icon = Icon;
 exports.InlineStepDetail = InlineStepDetail;
 exports.InlineStepLabel = InlineStepLabel;
 exports.InputGroup = InputGroup;
+exports.InputOtp = InputOtp;
 exports.Kbd = Kbd;
 exports.Label = Label;
 exports.Link = Link2;
@@ -14921,6 +15152,7 @@ exports.setServerFieldErrors = setServerFieldErrors;
 exports.toast = toast;
 exports.useAppForm = useAppForm;
 exports.useAutosizeInput = useAutosizeInput;
+exports.useInputOtpContext = useInputOtpContext;
 exports.useMergeDiff = useMergeDiff;
 exports.useNotification = useNotification;
 exports.useScrollbarPosition = useScrollbarPosition;