@keboola/design 1.3.1 → 2.0.1

package/dist/index.js

@@ -1,9 +1,9 @@
 import { Slot, Root as Root$1, Slottable } from '@radix-ui/react-slot';
 export { Slot } from '@radix-ui/react-slot';
-import { ChevronLeft, Loader2, Calendar, Clock, Sparkles, Search, Check, Minus, X, ChevronDown as ChevronDown$1, Plus, 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, Plus, ChevronDown as ChevronDown$1, X, Minus, Loader2, Calendar, Clock, Sparkles, Search, Check, 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 { 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 { createContext, useRef, useEffect, useMemo, useState, use, useId, 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 { cva } from 'class-variance-authority';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -39,6 +39,7 @@ 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 * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import { Root as Root$a, Indicator as Indicator$1 } from '@radix-ui/react-progress';
 import { diffLines, diffWords } from 'diff';
 import * as RadixTabs from '@radix-ui/react-tabs';
@@ -63,6 +64,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
@@ -478,15 +481,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']
       }
     }
   }
@@ -668,7 +694,10 @@ var buttonInlineVariants = cva(
     "disabled:tw-cursor-not-allowed",
     "disabled:tw-text-neutral-500",
     "disabled:tw-no-underline",
-    "[&_svg]:disabled:tw-text-neutral-400"
+    "[&_svg]:disabled:tw-text-neutral-400",
+    // Default size for nested Lucide icons; callers can override on the icon.
+    "[&_svg:not([class*='tw-size-'])]:tw-size-4",
+    "[&_svg]:tw-shrink-0"
   ],
   {
     defaultVariants: {
@@ -849,7 +878,10 @@ var variants2 = cva(
     "data-[side=bottom]:tw-slide-in-from-top-2",
     "data-[side=left]:tw-slide-in-from-right-2",
     "data-[side=right]:tw-slide-in-from-left-2",
-    "data-[side=top]:tw-slide-in-from-bottom-2"
+    "data-[side=top]:tw-slide-in-from-bottom-2",
+    // Default size for nested Lucide icons; callers can override on the icon.
+    "[&_svg:not([class*='tw-size-'])]:tw-size-4",
+    "[&_svg]:tw-shrink-0"
   ],
   {
     defaultVariants: {
@@ -1103,32 +1135,42 @@ var TimePicker = ({
     )
   ] });
 };
-var addonVariants = cva(["tw-flex", "tw-items-center", "tw-gap-1"], {
-  defaultVariants: {
-    align: "inline-start"
-  },
-  variants: {
-    align: {
-      "inline-start": ["tw-order-first", "[&:not(:empty)]:tw-pl-4"],
-      "inline-end": ["tw-order-last", "[&:not(:empty)]:tw-pr-4"],
-      "block-start": [
-        "tw-order-first",
-        // `tw-w-full` needs to be empty-conditional too — when the addon
-        // has no content the root stays in flex-row, and a 100%-wide
-        // empty addon would claim half of the input row beside the input.
-        "[&:not(:empty)]:tw-w-full",
-        "[&:not(:empty)]:tw-px-4",
-        "[&:not(:empty)]:tw-py-1.5"
-      ],
-      "block-end": [
-        "tw-order-last",
-        "[&:not(:empty)]:tw-w-full",
-        "[&:not(:empty)]:tw-px-4",
-        "[&:not(:empty)]:tw-py-1.5"
-      ]
+var addonVariants = cva(
+  [
+    "tw-flex",
+    "tw-items-center",
+    "tw-gap-1",
+    // Default size for nested Lucide icons in prefix/suffix slots; callers can override on the icon.
+    "[&_svg:not([class*='tw-size-'])]:tw-size-4",
+    "[&_svg]:tw-shrink-0"
+  ],
+  {
+    defaultVariants: {
+      align: "inline-start"
+    },
+    variants: {
+      align: {
+        "inline-start": ["tw-order-first", "[&:not(:empty)]:tw-pl-4"],
+        "inline-end": ["tw-order-last", "[&:not(:empty)]:tw-pr-4"],
+        "block-start": [
+          "tw-order-first",
+          // `tw-w-full` needs to be empty-conditional too — when the addon
+          // has no content the root stays in flex-row, and a 100%-wide
+          // empty addon would claim half of the input row beside the input.
+          "[&:not(:empty)]:tw-w-full",
+          "[&:not(:empty)]:tw-px-4",
+          "[&:not(:empty)]:tw-py-1.5"
+        ],
+        "block-end": [
+          "tw-order-last",
+          "[&:not(:empty)]:tw-w-full",
+          "[&:not(:empty)]:tw-px-4",
+          "[&:not(:empty)]:tw-py-1.5"
+        ]
+      }
     }
   }
-});
+);
 var InputGroupAddon = ({
   children,
   align = "inline-start",
@@ -1287,7 +1329,7 @@ var inputGroupVariants = cva(
     defaultVariants: {
       variant: "primary",
       state: "default",
-      sizing: "default",
+      sizing: "medium",
       focusVariant: "default"
     },
     compoundVariants: [
@@ -2398,6 +2440,9 @@ var HoverCardContent = ({
       "data-[state=closed]:tw-animate-out",
       "data-[state=closed]:tw-fade-out-0",
       "data-[state=closed]:tw-zoom-out-95",
+      // Default size for nested Lucide icons; callers can override on the icon.
+      "[&_svg:not([class*='tw-size-'])]:tw-size-4",
+      "[&_svg]:tw-shrink-0",
       className
     ),
     ...props,
@@ -2416,7 +2461,7 @@ var separatorVariants = cva(
     "tw-self-stretch",
     // before
     "before:tw-content-['']",
-    "before:tw-bg-neutral-150"
+    "before:tw-bg-border"
   ],
   {
     defaultVariants: {
@@ -2472,16 +2517,37 @@ var Separator = ({
   className,
   orientation = "vertical",
   size = "full",
+  label,
   ...props
-}) => /* @__PURE__ */ jsx(
-  RSeparator.Root,
-  {
-    ...props,
-    decorative: true,
-    orientation,
-    className: separatorVariants({ size, orientation, className })
+}) => {
+  if (label != null && label !== false) {
+    return /* @__PURE__ */ jsx(
+      RSeparator.Root,
+      {
+        ...props,
+        decorative: true,
+        orientation: "horizontal",
+        className: cn(
+          "tw-flex tw-w-full tw-items-center tw-gap-3 tw-self-stretch",
+          "tw-text-xs tw-font-medium tw-text-muted-foreground",
+          "before:tw-content-[''] before:tw-h-px before:tw-flex-1 before:tw-bg-border",
+          "after:tw-content-[''] after:tw-h-px after:tw-flex-1 after:tw-bg-border",
+          className
+        ),
+        children: label
+      }
+    );
   }
-);
+  return /* @__PURE__ */ jsx(
+    RSeparator.Root,
+    {
+      ...props,
+      decorative: true,
+      orientation,
+      className: separatorVariants({ size, orientation, className })
+    }
+  );
+};
 var RadioGroupContext = createContext({
   variant: "radio",
   orientation: "horizontal"
@@ -3089,7 +3155,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,
@@ -3285,7 +3351,7 @@ var variants3 = cva(
     defaultVariants: {
       variant: "primary",
       state: "default",
-      sizing: "default"
+      sizing: "medium"
     },
     compoundVariants: [
       {
@@ -3585,7 +3651,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.
@@ -3593,14 +3659,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",
@@ -3611,7 +3677,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",
@@ -3659,7 +3725,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",
@@ -4040,6 +4106,9 @@ var ModalBody = ({ className, ...props }) => /* @__PURE__ */ jsx(
       "tw-px-1",
       // 4 px to complement ModalContent and still keep input focus outline visible
       "tw-py-1",
+      // Default size for nested Lucide icons; callers can override on the icon.
+      "[&_svg:not([class*='tw-size-'])]:tw-size-4",
+      "[&_svg]:tw-shrink-0",
       className
     ),
     ...props
@@ -4277,7 +4346,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__ */ jsx(Icon, { icon: props.icon, spin: props.spin }) : props.icon
@@ -5284,7 +5353,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",
@@ -5428,7 +5497,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
@@ -5557,7 +5626,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",
@@ -6443,7 +6512,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
       ]
     }
@@ -6517,7 +6586,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: {
@@ -6588,7 +6657,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
@@ -6991,7 +7060,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
@@ -7389,7 +7458,7 @@ var BreadcrumbLink = ({
         "focus-visible:tw-ring-secondary-500/50",
         "focus-visible:tw-rounded-sm",
         // Icon
-        "[&_svg]:tw-size-2.5",
+        '[&_svg:not([class*="tw-size-"])]:tw-size-3.5',
         // transition
         "tw-transition-colors",
         className
@@ -7445,7 +7514,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
     ),
@@ -7549,7 +7618,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",
@@ -7581,7 +7650,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"]
       }
     }
@@ -7799,7 +7868,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,
@@ -8125,12 +8194,83 @@ 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
       ]
     }
   );
 };
+var rootVariants2 = cva(
+  [
+    "tailwindcss-preflight",
+    "tw-inline-flex",
+    "tw-items-center",
+    "tw-shrink-0",
+    "tw-bg-muted",
+    "tw-rounded-lg",
+    "tw-p-[3px]",
+    "tw-gap-0"
+  ],
+  {
+    defaultVariants: { size: "medium" },
+    variants: {
+      size: {
+        small: ["tw-h-8"],
+        medium: ["tw-h-9"],
+        large: ["tw-h-10"]
+      }
+    }
+  }
+);
+var itemClasses = cn(
+  "tailwindcss-preflight",
+  "tw-inline-flex",
+  "tw-items-center",
+  "tw-justify-center",
+  "tw-gap-2",
+  "tw-shrink-0",
+  "tw-whitespace-nowrap",
+  "tw-h-full",
+  "tw-rounded-md",
+  "tw-px-2",
+  "tw-py-1",
+  "tw-bg-transparent",
+  "tw-text-foreground",
+  "tw-text-sm",
+  "tw-font-medium",
+  "tw-transition-colors",
+  "disabled:tw-cursor-not-allowed",
+  "disabled:tw-opacity-50",
+  "!tw-outline-none",
+  "focus-visible:tw-ring-2",
+  "focus-visible:tw-ring-primary/50",
+  // hover on non-pressed
+  "not-disabled:[&[data-state=off]]:hover:tw-bg-background/60",
+  // pressed
+  "data-[state=on]:tw-bg-background",
+  "data-[state=on]:tw-shadow-[0_1px_2px_rgba(0,0,0,0.05),0_1px_1px_rgba(0,0,0,0.1)]",
+  "[&_svg]:tw-shrink-0",
+  "[&_svg]:tw-pointer-events-none",
+  "[&_svg:not([class*='tw-size-'])]:tw-size-4"
+);
+var Root25 = ({
+  ref,
+  className,
+  size = "medium",
+  ...props
+}) => /* @__PURE__ */ jsx(
+  ToggleGroupPrimitive.Root,
+  {
+    ref,
+    ...props,
+    className: cn(rootVariants2({ size, className }))
+  }
+);
+var Item6 = ({ ref, className, ...props }) => /* @__PURE__ */ jsx(ToggleGroupPrimitive.Item, { ref, ...props, className: cn(itemClasses, className) });
+var ToggleGroup = Object.assign(Root25, {
+  /** Individual segment inside a `ToggleGroup`. `value` is required and must be unique within the group. */
+  Item: Item6
+});
 var CONNECTOR_MARGIN_TOP = 8;
 var useLastLineHeight = () => {
   const [wrapper, setWrapper] = useElement();
@@ -8219,7 +8359,11 @@ var connector = cva(
           "tw-text-nowrap",
           "tw-text-xs"
         ],
-        icon: ["tw-bg-white", "[&_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",
@@ -9455,6 +9599,9 @@ var AlertDescription = ({
       "group-has-[[data-slot=alert-title]]/alert:before:tw-h-4",
       "group-has-[[data-slot=alert-title]]/alert:before:tw-content-['']",
       "tw-break-anywhere",
+      // Default size for nested Lucide icons; callers can override on the icon.
+      "[&_svg:not([class*='tw-size-'])]:tw-size-4",
+      "[&_svg]:tw-shrink-0",
       className
     ),
     children
@@ -9477,7 +9624,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",
@@ -11541,7 +11688,7 @@ var Skeleton = ({ height = "md", className, count = 1 }) => {
 var duplicateArray = (arr, times) => {
   return Array(times).fill(arr).flat();
 };
-var Item5 = ({
+var Item7 = ({
   className,
   iconHeight = "md",
   rowHeight = "sm",
@@ -11568,7 +11715,7 @@ var SkeletonList = ({
       ),
       children: duplicateArray(["tw-w-5/6", "tw-w-3/4", "tw-w-4/5", "tw-w-2/3"], groups).map(
         (className2, index) => /* @__PURE__ */ jsx(
-          Item5,
+          Item7,
           {
             iconHeight,
             rowHeight,
@@ -11836,7 +11983,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",
@@ -11987,7 +12134,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"
         ),
@@ -12117,8 +12264,8 @@ var emptyStateIconClassnames = cva(
   {
     variants: {
       variant: {
-        default: ["tw-size-16", "tw-text-4xl"],
-        compact: ["tw-size-10", "tw-text-2xl"]
+        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: {
@@ -12189,9 +12336,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", "tw-text-warning-500"],
-      compact: ["tw-size-10", "tw-text-2xl", "tw-text-warning-500"],
-      destructive: ["tw-size-16", "tw-text-4xl", "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: {
@@ -12255,7 +12417,7 @@ var maxWidthClass = {
   wide: "tw-max-w-[1600px]",
   full: "tw-max-w-full"
 };
-var Root27 = ({
+var Root29 = ({
   ref,
   className,
   maxWidth = "full",
@@ -12300,20 +12462,6 @@ var Tabs2 = ({
     children
   }
 );
-var Toolbar = ({
-  ref,
-  className,
-  children,
-  ...props
-}) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ref,
-    className: cn("tw-flex tw-w-full tw-flex-wrap tw-items-center tw-gap-3", className),
-    ...props,
-    children
-  }
-);
 var Content11 = ({
   ref,
   className,
@@ -12339,15 +12487,13 @@ var Footer = ({
     children
   }
 );
-var PageLayout = Object.assign(Root27, {
+var PageLayout = Object.assign(Root29, {
   /** Detail-pattern breadcrumb row. Usually composed automatically by `PageHeader.Detail` — slot exists for layouts that don't fit either `PageHeader` variant. */
   Breadcrumbs,
   /** Host slot for `PageHeader.Index` / `PageHeader.Detail`, or custom header JSX when neither variant fits. */
   Header,
   /** Escape hatch for routing-based tab rows. Use `Tabs` / `TabsContent` core components inside, never a raw `<button>`. */
   Tabs: Tabs2,
-  /** Search / filter pill row. Belongs here, NOT in the header per the page-header patterns. */
-  Toolbar,
   /** Main content slot. Lists, cards, tables. */
   Content: Content11,
   /** Bottom action bar — form submit + cancel. Pass `sticky` for a footer that pins to the viewport. */
@@ -12433,7 +12579,47 @@ var PageHeader = {
   /** Detail variant — single-entity pages with required breadcrumbs and an overflow-actions slot. Max 2 visible actions. */
   Detail: PageHeaderDetail
 };
-var Root28 = ({ ref, className, children, ...props }) => /* @__PURE__ */ jsx(
+var PageToolbarToken = ({
+  children,
+  popover,
+  onRemove,
+  removeAriaLabel,
+  ...props
+}) => /* @__PURE__ */ jsxs(Popover, { children: [
+  /* @__PURE__ */ jsx(
+    Badge,
+    {
+      ...props,
+      asChild: true,
+      variant: "pill",
+      color: "blue-inverse",
+      suffix: /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "inline",
+          size: "icon-2xs",
+          "aria-label": removeAriaLabel,
+          onClick: onRemove,
+          children: /* @__PURE__ */ jsx(X, { className: "tw-size-3" })
+        }
+      ),
+      children: /* @__PURE__ */ jsxs(
+        Popover.Trigger,
+        {
+          type: "button",
+          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(Popover.Content, { variant: "argo", align: "start", children: popover })
+] });
+var Root30 = ({ ref, className, children, ...props }) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -12473,12 +12659,32 @@ var ActiveFilters = ({ ref, className, children, ...props }) => /* @__PURE__ */
     children
   }
 );
+var Chip = ({ children, onRemove, removeAriaLabel, ...props }) => /* @__PURE__ */ jsx(
+  Badge,
+  {
+    ...props,
+    variant: "pill",
+    color: "blue-inverse",
+    suffix: /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "inline",
+        size: "icon-2xs",
+        "aria-label": removeAriaLabel,
+        onClick: onRemove,
+        children: /* @__PURE__ */ jsx(X, { className: "tw-size-3" })
+      }
+    ),
+    children
+  }
+);
 var AddFilter = ({ className, children, ...props }) => /* @__PURE__ */ jsxs(Button, { argo: true, variant: "invisible", size: "small", className: cn("tw-gap-1.5", className), ...props, children: [
-  /* @__PURE__ */ jsx(Icon, { icon: "plus" }),
+  /* @__PURE__ */ jsx(Plus, { className: "tw-size-4" }),
   children ?? "Add filter"
 ] });
 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(Root28, {
+var PageToolbar = Object.assign(Root30, {
   /** Left slot — typically a `SearchInput`. */
   Search: Search4,
   /** Right cluster — host the four control groups below in the recommended order. */
@@ -12497,6 +12703,14 @@ var PageToolbar = Object.assign(Root28, {
    * by `AddFilter` / `Clear`.
    */
   ActiveFilters,
+  /** Non-editable filter chip (Standard variant) — `Badge` pill with a dismiss button. */
+  Chip,
+  /**
+   * Editable filter token (Query Builder variant) — `Badge` pill with a `chevron-down`
+   * popover trigger for editing values and an `×` dismiss button. The popover content
+   * is supplied by the caller via the `popover` slot (typically a `Combobox` or option list).
+   */
+  Token: PageToolbarToken,
   /** "+ Add filter" action — typically rendered after the chips/tokens in `ActiveFilters`. */
   AddFilter,
   /** "Clear all" action — self-aligns to the far right of `ActiveFilters`. */
@@ -13104,6 +13318,7 @@ var PlanApproval = ({
   onRequestChanges,
   onClose,
   isSubmitting = false,
+  approveTooltip,
   pendingPillLabel = "Ready for approval",
   approvedPillLabel = "Approved",
   dismissedPillLabel = "Dismissed",
@@ -13290,7 +13505,7 @@ var PlanApproval = ({
                     children: requestChangesLabel
                   }
                 ),
-                onApprove && /* @__PURE__ */ jsx(
+                onApprove && (approveTooltip ? /* @__PURE__ */ jsx(Tooltip, { tooltip: approveTooltip, placement: "top", triggerAsChild: true, children: /* @__PURE__ */ jsx(
                   Button,
                   {
                     argo: true,
@@ -13301,7 +13516,18 @@ var PlanApproval = ({
                     "data-testid": "plan-approve-button",
                     children: approveLabel
                   }
-                )
+                ) }) : /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    argo: true,
+                    variant: "primary",
+                    size: "small",
+                    onClick: onApprove,
+                    disabled: isSubmitting || isRequestingChanges,
+                    "data-testid": "plan-approve-button",
+                    children: approveLabel
+                  }
+                ))
               ] })
             ]
           }
@@ -13452,7 +13678,7 @@ var PromptInput = ({
   const handleOnKeyDown = (event) => {
     if (event.key === "Enter" && !event.shiftKey && !event.ctrlKey && !event.metaKey) {
       event.preventDefault();
-      handleSubmit();
+      if (status !== "streaming") handleSubmit();
     }
   };
   const handleOnMouseDown = (event) => {
@@ -13536,12 +13762,14 @@ var Question = ({
   onSelectionChange,
   customAnswer = "",
   onCustomAnswerChange,
+  onCustomAnswerConfirm,
   showCustomAnswer = true,
   customAnswerPlaceholder = "Type your answer\u2026",
   showSkip = true,
   onSkip,
   onClose,
   onNext,
+  submitTooltip,
   onPrevious,
   currentStep,
   totalSteps,
@@ -13696,6 +13924,12 @@ var Question = ({
                 value: customAnswer,
                 onValueChange: (value) => onCustomAnswerChange?.(value),
                 onFocus: handleCustomFocus,
+                onKeyDown: onCustomAnswerConfirm ? (e) => {
+                  if (e.key === "Enter" && !e.shiftKey && !(e.metaKey || e.ctrlKey)) {
+                    e.preventDefault();
+                    onCustomAnswerConfirm();
+                  }
+                } : void 0,
                 placeholder: customAnswerPlaceholder,
                 sizing: "small",
                 testId: "question-custom"
@@ -13769,7 +14003,7 @@ var Question = ({
                     children: "Skip"
                   }
                 ),
-                (multiSelect || isCustomSelected) && /* @__PURE__ */ jsx(
+                (multiSelect || isCustomSelected) && (submitTooltip ? /* @__PURE__ */ jsx(Tooltip, { tooltip: submitTooltip, placement: "top", triggerAsChild: true, children: /* @__PURE__ */ jsx(
                   Button,
                   {
                     argo: true,
@@ -13779,7 +14013,17 @@ var Question = ({
                     "data-testid": "question-next-button",
                     children: isLastStep ? "Submit" : "Next"
                   }
-                )
+                ) }) : /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    argo: true,
+                    variant: "primary",
+                    size: "small",
+                    onClick: onNext,
+                    "data-testid": "question-next-button",
+                    children: isLastStep ? "Submit" : "Next"
+                  }
+                ))
               ]
             }
           )
@@ -14082,6 +14326,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();
@@ -14548,6 +14937,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, 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