@keboola/design 1.3.0 → 2.0.0

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');
@@ -91,6 +92,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);
@@ -699,7 +701,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 +885,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 +1142,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 +1336,7 @@ var inputGroupVariants = classVarianceAuthority.cva(
     defaultVariants: {
       variant: "primary",
       state: "default",
-      sizing: "default",
+      sizing: "medium",
       focusVariant: "default"
     },
     compoundVariants: [
@@ -2429,6 +2447,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 +2468,7 @@ var separatorVariants = classVarianceAuthority.cva(
     "tw-self-stretch",
     // before
     "before:tw-content-['']",
-    "before:tw-bg-neutral-150"
+    "before:tw-bg-border"
   ],
   {
     defaultVariants: {
@@ -2503,16 +2524,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"
@@ -3066,7 +3108,7 @@ var Search2 = ({
       ),
       "data-testid": testId.wrapper,
       children: [
-        variant === "ai" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "tw-size-4 [&_*]:tw-stroke-aigradient-600" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "tw-size-4 tw-text-neutral-400" }),
+        variant === "ai" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "tw-size-4 tw-shrink-0 [&_*]:tw-stroke-aigradient-600" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "tw-size-4 tw-shrink-0 tw-text-neutral-400" }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -3316,7 +3358,7 @@ var variants3 = classVarianceAuthority.cva(
     defaultVariants: {
       variant: "primary",
       state: "default",
-      sizing: "default"
+      sizing: "medium"
     },
     compoundVariants: [
       {
@@ -4071,6 +4113,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
@@ -7420,7 +7465,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
@@ -8162,6 +8207,77 @@ var Toggle = ({
     }
   );
 };
+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 +8366,7 @@ var connector = classVarianceAuthority.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",
@@ -9486,6 +9602,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
@@ -11572,7 +11691,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 +11718,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,
@@ -12148,8 +12267,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]:tw-size-10"],
+        compact: ["tw-size-10", "tw-text-2xl", "[&_svg]:tw-size-6"]
       }
     },
     defaultVariants: {
@@ -12220,9 +12339,9 @@ 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]: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: {
@@ -12286,7 +12405,7 @@ var maxWidthClass = {
   wide: "tw-max-w-[1600px]",
   full: "tw-max-w-full"
 };
-var Root27 = ({
+var Root29 = ({
   ref,
   className,
   maxWidth = "full",
@@ -12331,20 +12450,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 +12475,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 +12567,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 +12647,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 +12691,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`. */
@@ -12612,7 +12783,7 @@ var SearchInput = ({
       focusVariant,
       className,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(InputGroup.Addon, { align: "inline-start", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "tw-size-4 tw-text-muted-foreground" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(InputGroup.Addon, { align: "inline-start", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "tw-size-4 tw-shrink-0 tw-text-muted-foreground" }) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           InputGroup.Input,
           {
@@ -12668,7 +12839,7 @@ var SearchInputWithNavigation = ({
       placeholder,
       onValueChange,
       onClear,
-      prefix: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "tw-size-4 tw-text-neutral-400" }),
+      prefix: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "tw-size-4 tw-shrink-0 tw-text-neutral-400" }),
       focusVariant,
       onKeyDown: handleKeyDown2,
       variant,
@@ -12930,7 +13101,7 @@ var MultiActionButton = ({
     variant: "invisible",
     size: "icon",
     "data-testid": dataTestId,
-    children: !isLoading && icon
+    children: !isLoading && renderLegacyIcon(icon)
   }
 ) });
 var MultiActionButtonGroup = ({ children, className }) => /* @__PURE__ */ jsxRuntime.jsx(ButtonGroup, { className: cn("tw-text-nowrap", className), children });
@@ -13135,6 +13306,7 @@ var PlanApproval = ({
   onRequestChanges,
   onClose,
   isSubmitting = false,
+  approveTooltip,
   pendingPillLabel = "Ready for approval",
   approvedPillLabel = "Approved",
   dismissedPillLabel = "Dismissed",
@@ -13321,7 +13493,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 +13504,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 +13666,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 +13750,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 +13912,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 +13991,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 +14001,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"
+                  }
+                ))
               ]
             }
           )
@@ -14701,6 +14902,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;