@keboola/design 1.3.0 → 2.0.0

package/dist/index.js

@@ -1,6 +1,6 @@
 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, Loader2, Calendar, Clock, Sparkles, Search, Check, Minus, Copy, CircleCheck, AlertTriangle, ChevronUp, Send, ChevronRight, FileText, ArrowBigUpDash, EyeOff, Eye, Minimize2, Maximize2, Circle, Ellipsis, XCircle, Info, ChevronsRight, ChevronsLeft, CirclePause, Play, AlertCircle, ToggleRight } from 'lucide-react';
 import { 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';
@@ -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';
@@ -668,7 +669,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 +853,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 +1110,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 +1304,7 @@ var inputGroupVariants = cva(
     defaultVariants: {
       variant: "primary",
       state: "default",
-      sizing: "default",
+      sizing: "medium",
       focusVariant: "default"
     },
     compoundVariants: [
@@ -2398,6 +2415,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 +2436,7 @@ var separatorVariants = cva(
     "tw-self-stretch",
     // before
     "before:tw-content-['']",
-    "before:tw-bg-neutral-150"
+    "before:tw-bg-border"
   ],
   {
     defaultVariants: {
@@ -2472,16 +2492,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"
@@ -3035,7 +3076,7 @@ var Search2 = ({
       ),
       "data-testid": testId.wrapper,
       children: [
-        variant === "ai" ? /* @__PURE__ */ jsx(Sparkles, { className: "tw-size-4 [&_*]:tw-stroke-aigradient-600" }) : /* @__PURE__ */ jsx(Search, { className: "tw-size-4 tw-text-neutral-400" }),
+        variant === "ai" ? /* @__PURE__ */ jsx(Sparkles, { className: "tw-size-4 tw-shrink-0 [&_*]:tw-stroke-aigradient-600" }) : /* @__PURE__ */ jsx(Search, { className: "tw-size-4 tw-shrink-0 tw-text-neutral-400" }),
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -3285,7 +3326,7 @@ var variants3 = cva(
     defaultVariants: {
       variant: "primary",
       state: "default",
-      sizing: "default"
+      sizing: "medium"
     },
     compoundVariants: [
       {
@@ -4040,6 +4081,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
@@ -7389,7 +7433,7 @@ var BreadcrumbLink = ({
         "focus-visible:tw-ring-secondary-500/50",
         "focus-visible:tw-rounded-sm",
         // Icon
-        "[&_svg]:tw-size-2.5",
+        "[&_svg]:tw-size-3.5",
         // transition
         "tw-transition-colors",
         className
@@ -8131,6 +8175,77 @@ var Toggle = ({
     }
   );
 };
+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 +8334,7 @@ var connector = cva(
           "tw-text-nowrap",
           "tw-text-xs"
         ],
-        icon: ["tw-bg-white", "[&_svg]:tw-text-neutral-300"],
+        icon: ["tw-bg-white", "[&_svg]:tw-size-4", "[&_svg]:tw-text-neutral-300"],
         line: [
           "tw-min-w-8",
           "tw-overflow-hidden",
@@ -9455,6 +9570,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
@@ -11541,7 +11659,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 +11686,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,
@@ -12117,8 +12235,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]:tw-size-10"],
+        compact: ["tw-size-10", "tw-text-2xl", "[&_svg]:tw-size-6"]
       }
     },
     defaultVariants: {
@@ -12189,9 +12307,9 @@ 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]: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"]
     }
   },
   defaultVariants: {
@@ -12255,7 +12373,7 @@ var maxWidthClass = {
   wide: "tw-max-w-[1600px]",
   full: "tw-max-w-full"
 };
-var Root27 = ({
+var Root29 = ({
   ref,
   className,
   maxWidth = "full",
@@ -12300,20 +12418,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 +12443,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 +12535,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 +12615,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 +12659,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`. */
@@ -12581,7 +12751,7 @@ var SearchInput = ({
       focusVariant,
       className,
       children: [
-        /* @__PURE__ */ jsx(InputGroup.Addon, { align: "inline-start", children: /* @__PURE__ */ jsx(Search, { className: "tw-size-4 tw-text-muted-foreground" }) }),
+        /* @__PURE__ */ jsx(InputGroup.Addon, { align: "inline-start", children: /* @__PURE__ */ jsx(Search, { className: "tw-size-4 tw-shrink-0 tw-text-muted-foreground" }) }),
         /* @__PURE__ */ jsx(
           InputGroup.Input,
           {
@@ -12637,7 +12807,7 @@ var SearchInputWithNavigation = ({
       placeholder,
       onValueChange,
       onClear,
-      prefix: /* @__PURE__ */ jsx(Search, { className: "tw-size-4 tw-text-neutral-400" }),
+      prefix: /* @__PURE__ */ jsx(Search, { className: "tw-size-4 tw-shrink-0 tw-text-neutral-400" }),
       focusVariant,
       onKeyDown: handleKeyDown2,
       variant,
@@ -12899,7 +13069,7 @@ var MultiActionButton = ({
     variant: "invisible",
     size: "icon",
     "data-testid": dataTestId,
-    children: !isLoading && icon
+    children: !isLoading && renderLegacyIcon(icon)
   }
 ) });
 var MultiActionButtonGroup = ({ children, className }) => /* @__PURE__ */ jsx(ButtonGroup, { className: cn("tw-text-nowrap", className), children });
@@ -13104,6 +13274,7 @@ var PlanApproval = ({
   onRequestChanges,
   onClose,
   isSubmitting = false,
+  approveTooltip,
   pendingPillLabel = "Ready for approval",
   approvedPillLabel = "Approved",
   dismissedPillLabel = "Dismissed",
@@ -13290,7 +13461,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 +13472,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 +13634,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 +13718,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 +13880,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 +13959,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 +13969,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"
+                  }
+                ))
               ]
             }
           )
@@ -14548,6 +14748,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, Kbd, Label, Link2 as Link, MarkedText, MergeEditor, MessageBubble, Modal, MultiActionButtonGroup, MultiCombobox, Navbar, NumberInput, PageHeader, PageLayout, PageToolbar, Pagination, PaneHeader, PanelWithDetails, PasswordInput, PlanApproval, PlanRewritingIndicator, Popconfirm, Popover, Progress, PromptInput, Question, QuestionBlock, RadioGroup, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Search2 as Search, SearchForm, SearchInput, SearchInputWithNavigation, Select, Separator, Sheet, Sidebar, SidebarProvider, Skeleton, SkeletonList, Slider, SplitButton, SqlEditor, SuggestedPrompt, Switch, Table2 as Table, Tabs, TabsContent, Tagger, TextInput, Textarea, ThemeProvider, ThinkingIndicator, TimeInput, TimePicker, Timeline, Toaster, Toggle, ToggleGroup, Tooltip, TooltipProvider, Truncated, ZoomableSvg, argoVariants, cn, computeDiffRows, computeLineInformation, copyToClipboard, isIconName, isMac, kbdVariants, keys, mergeRefs, setServerFieldErrors, toast, useAppForm, useAutosizeInput, useMergeDiff, useNotification, useScrollbarPosition, useSidebar, withForm };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map