@keboola/design 2.0.0 → 2.0.1

package/dist/icons.cjs

@@ -114,6 +114,10 @@ Object.defineProperty(exports, "BookOpen", {
   enumerable: true,
   get: function () { return lucideReact.BookOpen; }
 });
+Object.defineProperty(exports, "Box", {
+  enumerable: true,
+  get: function () { return lucideReact.Box; }
+});
 Object.defineProperty(exports, "Braces", {
   enumerable: true,
   get: function () { return lucideReact.Braces; }
@@ -674,6 +678,10 @@ Object.defineProperty(exports, "Table", {
   enumerable: true,
   get: function () { return lucideReact.Table; }
 });
+Object.defineProperty(exports, "TableProperties", {
+  enumerable: true,
+  get: function () { return lucideReact.TableProperties; }
+});
 Object.defineProperty(exports, "ThumbsDown", {
   enumerable: true,
   get: function () { return lucideReact.ThumbsDown; }

package/dist/icons.js

@@ -1,4 +1,4 @@
-export { AlertCircle, AlertTriangle, AlignCenter, AlignJustify, AlignLeft, AlignRight, ArrowBigUpDash, ArrowDown, ArrowDownToLine, ArrowLeft, ArrowLeftRight, ArrowLeftToLine, ArrowRight, ArrowRightLeft, ArrowUp, ArrowUpAZ, ArrowUpRight, Ban, Bell, BellRing, Bold, BookOpen, Braces, Bug, Calendar, Camera, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsLeft, ChevronsRight, ChevronsUpDown, Circle, CircleAlert, CircleArrowDown, CircleArrowRight, CircleArrowUp, CircleCheck, CircleChevronDown, CircleChevronUp, CircleHelp, CirclePause, CirclePlay, CirclePlus, CircleUser, CircleX, Clock, CloudDownload, Code, Cog, Columns2, Columns3, Copy, CreditCard, Crosshair, Database, Diamond, Download, Ellipsis, EllipsisVertical, Expand, ExternalLink, Eye, EyeOff, File, FileDown, FileInput, FileSpreadsheet, FileText, Flag, Folder, FolderOpen, FolderTree, FolderUp, Gauge, Gift, GitBranch, GitCompare, GitMerge, GitPullRequest, Globe, GripVertical, Heading1, Heading2, Heading3, History, Hourglass, Image, Info, Italic, KanbanSquare, Key, Keyboard, Layers, LayoutGrid, LineChart, Link, List, ListChecks, ListFilter, ListOrdered, Loader2, Lock, LogIn, Mail, Map, Maximize, Maximize2, Menu, MessageCircleQuestion, Minimize, Minimize2, Minus, Moon, MoveHorizontal, MoveVertical, OctagonAlert, PanelBottomClose, PanelBottomOpen, PanelLeft, PanelLeftClose, PanelLeftOpen, PartyPopper, Pause, Pencil, PencilLine, Pipette, Play, Plus, Quote, RefreshCw, Repeat, Repeat2, Reply, Rocket, RotateCcw, RotateCw, Rows3, ScanLine, Search, Send, Settings, Share, Share2, Slash, Sliders, SlidersHorizontal, Sparkle, Sparkles, Split, Square, SquareChevronRight, SquareCode, SquareKanban, SquarePen, SquareTerminal, Star, StickyNote, Strikethrough, Table, ThumbsDown, ThumbsUp, ToggleRight, Trash2, TriangleAlert, Type, Underline, Unlink, Upload, User, Users, Wand2, Warehouse, Webhook, Workflow, Wrench, X, XCircle, Zap } from 'lucide-react';
+export { AlertCircle, AlertTriangle, AlignCenter, AlignJustify, AlignLeft, AlignRight, ArrowBigUpDash, ArrowDown, ArrowDownToLine, ArrowLeft, ArrowLeftRight, ArrowLeftToLine, ArrowRight, ArrowRightLeft, ArrowUp, ArrowUpAZ, ArrowUpRight, Ban, Bell, BellRing, Bold, BookOpen, Box, Braces, Bug, Calendar, Camera, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsLeft, ChevronsRight, ChevronsUpDown, Circle, CircleAlert, CircleArrowDown, CircleArrowRight, CircleArrowUp, CircleCheck, CircleChevronDown, CircleChevronUp, CircleHelp, CirclePause, CirclePlay, CirclePlus, CircleUser, CircleX, Clock, CloudDownload, Code, Cog, Columns2, Columns3, Copy, CreditCard, Crosshair, Database, Diamond, Download, Ellipsis, EllipsisVertical, Expand, ExternalLink, Eye, EyeOff, File, FileDown, FileInput, FileSpreadsheet, FileText, Flag, Folder, FolderOpen, FolderTree, FolderUp, Gauge, Gift, GitBranch, GitCompare, GitMerge, GitPullRequest, Globe, GripVertical, Heading1, Heading2, Heading3, History, Hourglass, Image, Info, Italic, KanbanSquare, Key, Keyboard, Layers, LayoutGrid, LineChart, Link, List, ListChecks, ListFilter, ListOrdered, Loader2, Lock, LogIn, Mail, Map, Maximize, Maximize2, Menu, MessageCircleQuestion, Minimize, Minimize2, Minus, Moon, MoveHorizontal, MoveVertical, OctagonAlert, PanelBottomClose, PanelBottomOpen, PanelLeft, PanelLeftClose, PanelLeftOpen, PartyPopper, Pause, Pencil, PencilLine, Pipette, Play, Plus, Quote, RefreshCw, Repeat, Repeat2, Reply, Rocket, RotateCcw, RotateCw, Rows3, ScanLine, Search, Send, Settings, Share, Share2, Slash, Sliders, SlidersHorizontal, Sparkle, Sparkles, Split, Square, SquareChevronRight, SquareCode, SquareKanban, SquarePen, SquareTerminal, Star, StickyNote, Strikethrough, Table, TableProperties, ThumbsDown, ThumbsUp, ToggleRight, Trash2, TriangleAlert, Type, Underline, Unlink, Upload, User, Users, Wand2, Warehouse, Webhook, Workflow, Wrench, X, XCircle, Zap } from 'lucide-react';
 import { forwardRef } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/index.cjs

@@ -60,6 +60,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 }; }
@@ -511,15 +512,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']
       }
     }
   }
@@ -3162,7 +3186,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,
@@ -3658,7 +3682,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 +3690,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 +3708,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 +3756,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,7 +4377,7 @@ 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
@@ -5360,7 +5384,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 +5528,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 +5657,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 +6543,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 +6617,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 +6688,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 +7091,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 +7489,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 +7545,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
     ),
@@ -7625,7 +7649,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 +7681,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"]
       }
     }
@@ -7875,7 +7899,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,
@@ -8201,7 +8225,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 +8390,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",
@@ -9627,7 +9655,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 +12014,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",
@@ -12137,7 +12165,7 @@ var ToastRoot = ({
           "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 +12295,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 +12367,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: {
@@ -14314,6 +14357,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();
@@ -14792,6 +14980,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 +15041,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 +15122,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;