@keboola/design 1.3.1 → 2.0.1

package/dist/index.cjs

@@ -35,6 +35,7 @@ var RadixAvatar = require('@radix-ui/react-avatar');
 var BoringAvatar = require('boring-avatars');
 var fontawesomeSvgCore = require('@fortawesome/fontawesome-svg-core');
 var reactToggle = require('@radix-ui/react-toggle');
+var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
 var reactProgress = require('@radix-ui/react-progress');
 var diff = require('diff');
 var RadixTabs = require('@radix-ui/react-tabs');
@@ -59,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 }; }
@@ -91,6 +93,7 @@ var DropdownMenuPrimitive3__namespace = /*#__PURE__*/_interopNamespace(DropdownM
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
 var RadixAvatar__namespace = /*#__PURE__*/_interopNamespace(RadixAvatar);
 var BoringAvatar__default = /*#__PURE__*/_interopDefault(BoringAvatar);
+var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroupPrimitive);
 var RadixTabs__namespace = /*#__PURE__*/_interopNamespace(RadixTabs);
 var CodeMirror__default = /*#__PURE__*/_interopDefault(CodeMirror);
 var colors__default = /*#__PURE__*/_interopDefault(colors);
@@ -509,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']
       }
     }
   }
@@ -699,7 +725,10 @@ var buttonInlineVariants = classVarianceAuthority.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: {
@@ -880,7 +909,10 @@ var variants2 = classVarianceAuthority.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: {
@@ -1134,32 +1166,42 @@ var TimePicker = ({
     )
   ] });
 };
-var addonVariants = classVarianceAuthority.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 = classVarianceAuthority.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",
@@ -1318,7 +1360,7 @@ var inputGroupVariants = classVarianceAuthority.cva(
     defaultVariants: {
       variant: "primary",
       state: "default",
-      sizing: "default",
+      sizing: "medium",
       focusVariant: "default"
     },
     compoundVariants: [
@@ -2429,6 +2471,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,
@@ -2447,7 +2492,7 @@ var separatorVariants = classVarianceAuthority.cva(
     "tw-self-stretch",
     // before
     "before:tw-content-['']",
-    "before:tw-bg-neutral-150"
+    "before:tw-bg-border"
   ],
   {
     defaultVariants: {
@@ -2503,16 +2548,37 @@ var Separator = ({
   className,
   orientation = "vertical",
   size = "full",
+  label,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  RSeparator__namespace.Root,
-  {
-    ...props,
-    decorative: true,
-    orientation,
-    className: separatorVariants({ size, orientation, className })
+}) => {
+  if (label != null && label !== false) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      RSeparator__namespace.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__ */ jsxRuntime.jsx(
+    RSeparator__namespace.Root,
+    {
+      ...props,
+      decorative: true,
+      orientation,
+      className: separatorVariants({ size, orientation, className })
+    }
+  );
+};
 var RadioGroupContext = react.createContext({
   variant: "radio",
   orientation: "horizontal"
@@ -3120,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,
@@ -3316,7 +3382,7 @@ var variants3 = classVarianceAuthority.cva(
     defaultVariants: {
       variant: "primary",
       state: "default",
-      sizing: "default"
+      sizing: "medium"
     },
     compoundVariants: [
       {
@@ -3616,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.
@@ -3624,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",
@@ -3642,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",
@@ -3690,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",
@@ -4071,6 +4137,9 @@ var ModalBody = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.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
@@ -4308,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
@@ -5315,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",
@@ -5459,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
@@ -5588,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",
@@ -6474,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
       ]
     }
@@ -6548,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: {
@@ -6619,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
@@ -7022,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
@@ -7420,7 +7489,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
@@ -7476,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
     ),
@@ -7580,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",
@@ -7612,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"]
       }
     }
@@ -7830,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,
@@ -8156,12 +8225,83 @@ 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
       ]
     }
   );
 };
+var rootVariants2 = classVarianceAuthority.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__ */ jsxRuntime.jsx(
+  ToggleGroupPrimitive__namespace.Root,
+  {
+    ref,
+    ...props,
+    className: cn(rootVariants2({ size, className }))
+  }
+);
+var Item6 = ({ ref, className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupPrimitive__namespace.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();
@@ -8250,7 +8390,11 @@ var connector = classVarianceAuthority.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",
@@ -9486,6 +9630,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
@@ -9508,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",
@@ -11572,7 +11719,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",
@@ -11599,7 +11746,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__ */ jsxRuntime.jsx(
-          Item5,
+          Item7,
           {
             iconHeight,
             rowHeight,
@@ -11867,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",
@@ -12018,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"
         ),
@@ -12148,8 +12295,8 @@ var emptyStateIconClassnames = classVarianceAuthority.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: {
@@ -12220,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", "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: {
@@ -12286,7 +12448,7 @@ var maxWidthClass = {
   wide: "tw-max-w-[1600px]",
   full: "tw-max-w-full"
 };
-var Root27 = ({
+var Root29 = ({
   ref,
   className,
   maxWidth = "full",
@@ -12331,20 +12493,6 @@ var Tabs2 = ({
     children
   }
 );
-var Toolbar = ({
-  ref,
-  className,
-  children,
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.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,
@@ -12370,15 +12518,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. */
@@ -12464,7 +12610,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__ */ jsxRuntime.jsx(
+var PageToolbarToken = ({
+  children,
+  popover,
+  onRemove,
+  removeAriaLabel,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
+  /* @__PURE__ */ jsxRuntime.jsx(
+    Badge,
+    {
+      ...props,
+      asChild: true,
+      variant: "pill",
+      color: "blue-inverse",
+      suffix: /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          type: "button",
+          variant: "inline",
+          size: "icon-2xs",
+          "aria-label": removeAriaLabel,
+          onClick: onRemove,
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "tw-size-3" })
+        }
+      ),
+      children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "tw-size-3" })
+          ]
+        }
+      )
+    }
+  ),
+  /* @__PURE__ */ jsxRuntime.jsx(Popover.Content, { variant: "argo", align: "start", children: popover })
+] });
+var Root30 = ({ ref, className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -12504,12 +12690,32 @@ var ActiveFilters = ({ ref, className, children, ...props }) => /* @__PURE__ */
     children
   }
 );
+var Chip = ({ children, onRemove, removeAriaLabel, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+  Badge,
+  {
+    ...props,
+    variant: "pill",
+    color: "blue-inverse",
+    suffix: /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        type: "button",
+        variant: "inline",
+        size: "icon-2xs",
+        "aria-label": removeAriaLabel,
+        onClick: onRemove,
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "tw-size-3" })
+      }
+    ),
+    children
+  }
+);
 var AddFilter = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(Button, { argo: true, variant: "invisible", size: "small", className: cn("tw-gap-1.5", className), ...props, children: [
-  /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: "plus" }),
+  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "tw-size-4" }),
   children ?? "Add filter"
 ] });
 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(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. */
@@ -12528,6 +12734,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`. */
@@ -13135,6 +13349,7 @@ var PlanApproval = ({
   onRequestChanges,
   onClose,
   isSubmitting = false,
+  approveTooltip,
   pendingPillLabel = "Ready for approval",
   approvedPillLabel = "Approved",
   dismissedPillLabel = "Dismissed",
@@ -13321,7 +13536,7 @@ var PlanApproval = ({
                     children: requestChangesLabel
                   }
                 ),
-                onApprove && /* @__PURE__ */ jsxRuntime.jsx(
+                onApprove && (approveTooltip ? /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { tooltip: approveTooltip, placement: "top", triggerAsChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
                   Button,
                   {
                     argo: true,
@@ -13332,7 +13547,18 @@ var PlanApproval = ({
                     "data-testid": "plan-approve-button",
                     children: approveLabel
                   }
-                )
+                ) }) : /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    argo: true,
+                    variant: "primary",
+                    size: "small",
+                    onClick: onApprove,
+                    disabled: isSubmitting || isRequestingChanges,
+                    "data-testid": "plan-approve-button",
+                    children: approveLabel
+                  }
+                ))
               ] })
             ]
           }
@@ -13483,7 +13709,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) => {
@@ -13567,12 +13793,14 @@ var Question = ({
   onSelectionChange,
   customAnswer = "",
   onCustomAnswerChange,
+  onCustomAnswerConfirm,
   showCustomAnswer = true,
   customAnswerPlaceholder = "Type your answer\u2026",
   showSkip = true,
   onSkip,
   onClose,
   onNext,
+  submitTooltip,
   onPrevious,
   currentStep,
   totalSteps,
@@ -13727,6 +13955,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"
@@ -13800,7 +14034,7 @@ var Question = ({
                     children: "Skip"
                   }
                 ),
-                (multiSelect || isCustomSelected) && /* @__PURE__ */ jsxRuntime.jsx(
+                (multiSelect || isCustomSelected) && (submitTooltip ? /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { tooltip: submitTooltip, placement: "top", triggerAsChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
                   Button,
                   {
                     argo: true,
@@ -13810,7 +14044,17 @@ var Question = ({
                     "data-testid": "question-next-button",
                     children: isLastStep ? "Submit" : "Next"
                   }
-                )
+                ) }) : /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    argo: true,
+                    variant: "primary",
+                    size: "small",
+                    onClick: onNext,
+                    "data-testid": "question-next-button",
+                    children: isLastStep ? "Submit" : "Next"
+                  }
+                ))
               ]
             }
           )
@@ -14113,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();
@@ -14591,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;
@@ -14640,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;
@@ -14701,6 +15103,7 @@ exports.TimePicker = TimePicker;
 exports.Timeline = Timeline;
 exports.Toaster = Toaster;
 exports.Toggle = Toggle;
+exports.ToggleGroup = ToggleGroup;
 exports.Tooltip = Tooltip;
 exports.TooltipProvider = TooltipProvider;
 exports.Truncated = Truncated;
@@ -14719,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;