@keboola/design 2.0.1 → 2.1.0

package/dist/index.js

@@ -1,46 +1,44 @@
 import { Slot, Root as Root$1, Slottable } from '@radix-ui/react-slot';
 export { Slot } from '@radix-ui/react-slot';
-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 { ChevronLeft, ChevronDown, Plus, X, Minus, Loader2, Check, ArrowBigUpDash, EyeOff, Eye, ChevronUp, Calendar, Clock, Sparkles, Search, Copy, CircleCheck, AlertTriangle, Send, ChevronRight, FileText, Minimize2, Maximize2, Circle, Ellipsis, Pipette, 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, 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 { Root as Root$6, Trigger, Portal, Content, Provider } from '@radix-ui/react-tooltip';
 import { cva } from 'class-variance-authority';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { all, fas } from '@awesome.me/kit-be8bcf7e5e/icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { getDefaultClassNames, DayPicker } from 'react-day-picker';
 import 'react-day-picker/src/style.css';
-import { Root as Root$2, Trigger, Close, Portal as Portal$1, Content as Content$1 } from '@radix-ui/react-popover';
+import { Root as Root$2, Trigger as Trigger$1, Close, Portal as Portal$1, Content as Content$1 } from '@radix-ui/react-popover';
 import * as ScrollAreaPrimitive2 from '@radix-ui/react-scroll-area';
 import TextareaAutosize from 'react-textarea-autosize';
 import * as RLabel from '@radix-ui/react-label';
-import { Button as Button$1, cn as cn$1, Switch as Switch$1, Checkbox as Checkbox$1, Select as Select$1, FormGroup as FormGroup$1, PasswordInput as PasswordInput$1, Tooltip as Tooltip$1, Label as Label$1, TextInput as TextInput$1, Separator as Separator$1, ButtonGroup as ButtonGroup$1 } from '@keboola/design';
 import { Root as Root$3, Thumb } from '@radix-ui/react-switch';
-import { Root as Root$4, Trigger as Trigger$1, Portal as Portal$2, Content as Content$2 } from '@radix-ui/react-hover-card';
+import { Root as Root$7, Trigger as Trigger$2, Portal as Portal$2, Content as Content$2 } from '@radix-ui/react-hover-card';
 import * as RSeparator from '@radix-ui/react-separator';
 import * as RRadioGroup from '@radix-ui/react-radio-group';
 import { Item, Indicator as Indicator$2 } from '@radix-ui/react-radio-group';
-import { Root as Root$5, Track, Range, Thumb as Thumb$1 } from '@radix-ui/react-slider';
+import { Root as Root$8, Track, Range, Thumb as Thumb$1 } from '@radix-ui/react-slider';
 import * as SelectPrimitive from '@radix-ui/react-select';
-import { Root as Root$c } from '@radix-ui/react-select';
-import { Root as Root$6, Indicator } from '@radix-ui/react-checkbox';
+import { Root as Root$5 } from '@radix-ui/react-select';
+import { all, fas } from '@awesome.me/kit-be8bcf7e5e/icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Root as Root$4, Indicator } from '@radix-ui/react-checkbox';
 import * as DropdownMenuPrimitive3 from '@radix-ui/react-dropdown-menu';
 import { Root, Group, Trigger as Trigger$4 } from '@radix-ui/react-dropdown-menu';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { Root as Root$7, Close as Close$1, Trigger as Trigger$2, Portal as Portal$3, Content as Content$3, Overlay, Title } from '@radix-ui/react-dialog';
+import { Root as Root$9, Close as Close$1, Trigger as Trigger$3, Portal as Portal$3, Content as Content$3, Overlay, Title } from '@radix-ui/react-dialog';
 import { createPortal } from 'react-dom';
-import { ChevronDown, Search as Search$1, Pipette, Plus as Plus$1 } from '@keboola/design/icons';
-import { Root as Root$8, CollapsibleTrigger, Content as Content$4 } from '@radix-ui/react-collapsible';
+import { Root as Root$a, CollapsibleTrigger, Content as Content$4 } from '@radix-ui/react-collapsible';
 import { Command as Command$1, CommandInput as CommandInput$1, defaultFilter, useCommandState } from 'cmdk';
 export { defaultFilter, useCommandState } from 'cmdk';
 import { Combobox as Combobox$1 } from '@base-ui/react/combobox';
 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 { Root as Root$b } 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 { Root as Root$c, Indicator as Indicator$1 } from '@radix-ui/react-progress';
 import { diffLines, diffWords } from 'diff';
 import * as RadixTabs from '@radix-ui/react-tabs';
 import { completeAnyWord, autocompletion } from '@codemirror/autocomplete';
@@ -189,7 +187,7 @@ var TooltipContent = ({
   ) });
 };
 var DELAY_SHOW_TOOLTIP = 300;
-var TooltipRoot = ({ children, delayDuration = DELAY_SHOW_TOOLTIP, ...rest }) => /* @__PURE__ */ jsx(Root$b, { ...rest, delayDuration, children });
+var TooltipRoot = ({ children, delayDuration = DELAY_SHOW_TOOLTIP, ...rest }) => /* @__PURE__ */ jsx(Root$6, { ...rest, delayDuration, children });
 var TooltipTrigger = ({
   ref,
   children,
@@ -204,20 +202,28 @@ var TooltipTrigger = ({
     if (keepOpenOnClick) event.preventDefault();
     onClick?.(event);
   };
-  const handePointerDown = (event) => {
+  const handlePointerDown = (event) => {
     if (keepOpenOnClick) event.preventDefault();
     onPointerDown?.(event);
   };
   return /* @__PURE__ */ jsx(
-    Trigger$3,
+    Trigger,
     {
       ...rest,
       asChild: true,
       ref,
       className: cn("tailwindcss-preflight", className),
       onClick: handleClick,
-      onPointerDown: handePointerDown,
-      children: asChild ? children : /* @__PURE__ */ jsx("span", { children })
+      onPointerDown: handlePointerDown,
+      children: asChild ? children : (
+        // Default-mode trigger wraps children in a span so Radix has a
+        // single DOM element to attach handlers to. `tailwindcss-preflight`
+        // (merged in via Slot) activates Tailwind's preflight inside the
+        // span, which sets `svg { display: block }` — without an inline-flex
+        // container that would stack any bare Lucide icon onto its own
+        // line. `tw-inline-flex tw-items-center` keeps icon + text aligned.
+        /* @__PURE__ */ jsx("span", { className: "tw-inline-flex tw-items-center", children })
+      )
     }
   );
 };
@@ -335,29 +341,20 @@ var sha256 = async (text) => {
 var useSHA256 = (text) => {
   const [hash, setHash] = useState("");
   useEffect(() => {
-    if (text) {
-      sha256(text).then(setHash);
+    if (!text) {
+      setHash("");
+      return;
     }
+    let cancelled = false;
+    sha256(text).then((h) => {
+      if (!cancelled) setHash(h);
+    });
+    return () => {
+      cancelled = true;
+    };
   }, [text]);
   return hash;
 };
-var Icon = ({ ref, icon, ...rest }) => /* @__PURE__ */ jsx(FontAwesomeIcon, { ...rest, ref, icon });
-
-// src/components/Icon/index.ts
-var validIconNames;
-var getValidIconNames = () => {
-  if (validIconNames) return validIconNames;
-  validIconNames = new Set(
-    Object.values(fas).flatMap((def) => {
-      if (def !== null && typeof def === "object" && "iconName" in def && typeof def.iconName === "string") {
-        return [def.iconName];
-      }
-      return [];
-    })
-  );
-  return validIconNames;
-};
-var isIconName = (name) => getValidIconNames().has(name);
 var variants = cva(
   [
     "tailwindcss-preflight",
@@ -645,10 +642,10 @@ var Button = ({
   variant = "primary",
   size = "medium",
   block = false,
-  icon,
   ...buttonProps
 }) => {
   const Comp = asChild ? Root$1 : "button";
+  const isIconOnly = String(size).startsWith("icon");
   const classNames = argo ? argoVariants({ variant, size, block, className }) : variants({
     size,
     variant,
@@ -671,14 +668,13 @@ var Button = ({
       disabled,
       "aria-disabled": disabled,
       "data-variant": variant,
-      "data-icon-only": String(size).startsWith("icon"),
+      "data-icon-only": isIconOnly,
       type,
       onClick: handleClick,
       className: cn(classNames),
       children: [
         isLoading && /* @__PURE__ */ jsx(Loader2, { className: "tw-size-4 tw-shrink-0 tw-animate-spin" }),
-        !isLoading && icon && /* @__PURE__ */ jsx(Icon, { icon }),
-        /* @__PURE__ */ jsx(Slottable, { children })
+        /* @__PURE__ */ jsx(Slottable, { children: isLoading && isIconOnly ? null : children })
       ]
     }
   );
@@ -927,7 +923,7 @@ var PopoverContent = ({
 ) });
 var Popover = (props) => /* @__PURE__ */ jsx(Root$2, { ...props });
 Popover.Content = PopoverContent;
-Popover.Trigger = Trigger;
+Popover.Trigger = Trigger$1;
 Popover.Close = Close;
 var DatePicker = ({
   align = "end",
@@ -2076,21 +2072,21 @@ var Clipboard = ({
     return tooltip;
   })();
   const tooltipVariant = state === "ready" && !!text ? tooltipVariantProp : "action";
-  return /* @__PURE__ */ jsxs(Tooltip$1.Root, { open: isTooltipOpen, onOpenChange: handleOnOpenChange, children: [
+  return /* @__PURE__ */ jsxs(Tooltip.Root, { open: isTooltipOpen, onOpenChange: handleOnOpenChange, children: [
     /* @__PURE__ */ jsx(
-      Tooltip$1.Trigger,
+      Tooltip.Trigger,
       {
         ...restButtonProps,
         asChild,
         keepOpenOnClick: true,
         onClick: handleOnClick,
-        className: cn$1("tw-cursor-pointer", className),
+        className: cn("tw-cursor-pointer", className),
         ref,
         children: children ?? text
       }
     ),
     /* @__PURE__ */ jsx(
-      Tooltip$1.Content,
+      Tooltip.Content,
       {
         keepOpenOnPointerDownOutside: true,
         placement: tooltipPlacement,
@@ -2449,9 +2445,9 @@ var HoverCardContent = ({
     children
   }
 ) });
-var HoverCard = ({ openDelay = 200, closeDelay = 200, ...rest }) => /* @__PURE__ */ jsx(Root$4, { ...rest, openDelay, closeDelay });
+var HoverCard = ({ openDelay = 200, closeDelay = 200, ...rest }) => /* @__PURE__ */ jsx(Root$7, { ...rest, openDelay, closeDelay });
 HoverCard.Content = HoverCardContent;
-HoverCard.Trigger = Trigger$1;
+HoverCard.Trigger = Trigger$2;
 var separatorVariants = cva(
   [
     // position
@@ -2889,7 +2885,7 @@ var Slider = ({
     onValueChange?.(next);
   };
   const body = /* @__PURE__ */ jsxs(
-    Root$5,
+    Root$8,
     {
       ref,
       value: liveValues,
@@ -3089,39 +3085,53 @@ var Search2 = ({
     onChange?.("", event);
     onClear?.();
   };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        searchWrapperVariants({ variant }),
-        {
-          "tw-cursor-not-allowed tw-opacity-40": disabled
-        },
-        className
-      ),
-      "data-testid": testId.wrapper,
-      children: [
-        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",
+  const handleWrapperMouseDown = (event) => {
+    if (disabled || readOnly) return;
+    if (event.target.closest('button, a, input, textarea, [role="button"]')) {
+      return;
+    }
+    event.preventDefault();
+    event.currentTarget.querySelector("input")?.focus();
+  };
+  return (
+    // Mouse-only convenience: clicking the chrome focuses the input. The input itself is the
+    // real interactive/focusable target, so no extra role or key handler is needed here.
+    // oxlint-disable-next-line jsx-a11y/no-static-element-interactions
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          searchWrapperVariants({ variant }),
           {
-            ...rest,
-            ref,
-            placeholder,
-            "data-testid": testId.input,
-            type: "text",
-            value: internalValue ?? "",
-            onChange: handleChange,
-            onBlur: handleBlur,
-            className: searchInputClassnames,
-            disabled,
-            readOnly
-          }
+            "tw-cursor-not-allowed tw-opacity-40": disabled
+          },
+          className
         ),
-        isClearButtonVisible && /* @__PURE__ */ jsx(ClearButton, { onClick: handleClear, testId: testId.clearButton }),
-        suffix
-      ]
-    }
+        "data-testid": testId.wrapper,
+        onMouseDown: handleWrapperMouseDown,
+        children: [
+          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",
+            {
+              ...rest,
+              ref,
+              placeholder,
+              "data-testid": testId.input,
+              type: "text",
+              value: internalValue ?? "",
+              onChange: handleChange,
+              onBlur: handleBlur,
+              className: searchInputClassnames,
+              disabled,
+              readOnly
+            }
+          ),
+          isClearButtonVisible && /* @__PURE__ */ jsx(ClearButton, { onClick: handleClear, testId: testId.clearButton }),
+          suffix
+        ]
+      }
+    )
   );
 };
 var SearchForm = ({
@@ -3221,11 +3231,28 @@ var SelectContent = ({
           children
         }
       ),
-      /* @__PURE__ */ jsx(SelectPrimitive.ScrollDownButton, { className: scrollButtonStyles, children: /* @__PURE__ */ jsx(ChevronDown$1, {}) })
+      /* @__PURE__ */ jsx(SelectPrimitive.ScrollDownButton, { className: scrollButtonStyles, children: /* @__PURE__ */ jsx(ChevronDown, {}) })
     ]
   }
 ) });
 var SelectGroup = ({ className, ...props }) => /* @__PURE__ */ jsx(SelectPrimitive.Group, { ...props, className: cn("tw-flex tw-flex-col tw-gap-0.5", className) });
+var Icon = ({ ref, icon, ...rest }) => /* @__PURE__ */ jsx(FontAwesomeIcon, { ...rest, ref, icon });
+
+// src/components/Icon/index.ts
+var validIconNames;
+var getValidIconNames = () => {
+  if (validIconNames) return validIconNames;
+  validIconNames = new Set(
+    Object.values(fas).flatMap((def) => {
+      if (def !== null && typeof def === "object" && "iconName" in def && typeof def.iconName === "string") {
+        return [def.iconName];
+      }
+      return [];
+    })
+  );
+  return validIconNames;
+};
+var isIconName = (name) => getValidIconNames().has(name);
 var isFAIconValue = (value) => typeof value === "string" || Array.isArray(value) && value.length === 2 && typeof value[0] === "string" && typeof value[1] === "string";
 var renderLegacyIcon = (value) => isFAIconValue(value) ? /* @__PURE__ */ jsx(Icon, { icon: value }) : value;
 var SelectItem = ({
@@ -3305,7 +3332,7 @@ var SelectLabel = ({ className, ...props }) => /* @__PURE__ */ jsx(
     )
   }
 );
-var SelectRoot = (props) => /* @__PURE__ */ jsx(Root$c, { ...props });
+var SelectRoot = (props) => /* @__PURE__ */ jsx(Root$5, { ...props });
 var SelectSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx(
   SelectPrimitive.Separator,
   {
@@ -3452,7 +3479,7 @@ var SelectTrigger = ({
     ...props,
     children: [
       /* @__PURE__ */ jsx(SelectPrimitive.Value, { placeholder }),
-      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown$1, { className: "tw-size-5 tw-text-muted-foreground" }) })
+      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "tw-size-5 tw-text-muted-foreground" }) })
     ]
   }
 );
@@ -3617,7 +3644,7 @@ function Checkbox({
   const fallbackId = useId();
   const id = idProp?.toString() ?? fallbackId;
   const styleVariant = argo ? "argo" : "default";
-  const checkboxElement = /* @__PURE__ */ jsx(Root$6, { id, ...rest, className: cn(rootVariants({ variant: styleVariant, className })), children: /* @__PURE__ */ jsxs(Indicator, { className: cn(indicatorVariants({ variant: styleVariant })), children: [
+  const checkboxElement = /* @__PURE__ */ jsx(Root$4, { id, ...rest, className: cn(rootVariants({ variant: styleVariant, className })), children: /* @__PURE__ */ jsxs(Indicator, { className: cn(indicatorVariants({ variant: styleVariant })), children: [
     /* @__PURE__ */ jsx(Check, { className: "tw-hidden tw-size-3 tw-stroke-[4px] group-data-[state=checked]:tw-block" }),
     /* @__PURE__ */ jsx(Minus, { className: "tw-hidden tw-size-3 tw-stroke-[4px] group-data-[state=indeterminate]:tw-block" })
   ] }) });
@@ -4349,7 +4376,7 @@ var ModalIcon = (props) => {
                 '[&_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
+              children: renderLegacyIcon(props.icon)
             }
           )
         }
@@ -4357,9 +4384,9 @@ var ModalIcon = (props) => {
     }
   );
 };
-var Modal = (props) => /* @__PURE__ */ jsx(Root$7, { ...props });
+var Modal = (props) => /* @__PURE__ */ jsx(Root$9, { ...props });
 Modal.Close = Close$1;
-Modal.Trigger = Trigger$2;
+Modal.Trigger = Trigger$3;
 Modal.Content = ModalContent;
 Modal.Body = ModalBody;
 Modal.Icon = ModalIcon;
@@ -4390,7 +4417,7 @@ var Truncated = ({
   const isScrollableTarget = (e) => {
     return e.scrollHeight - OFFSET_TOLERANCE >= e.clientHeight;
   };
-  const truncatedClasses = cn$1(
+  const truncatedClasses = cn(
     className,
     "tw-overflow-hidden [word-break:break-all]",
     "[display:-webkit-box!important] [-webkit-box-orient:vertical]",
@@ -4400,7 +4427,7 @@ var Truncated = ({
     return /* @__PURE__ */ jsx("span", { ref, className: truncatedClasses, ...rest, children: text });
   }
   return /* @__PURE__ */ jsx(
-    Tooltip$1,
+    Tooltip,
     {
       placement: tooltipPlacement,
       variant: tooltipVariant,
@@ -4877,9 +4904,9 @@ var SheetHeader = ({
   ] });
 };
 var SheetTitle = ({ className, visuallyHidden = false, ...props }) => /* @__PURE__ */ jsx(Title, { className: cn({ "tw-sr-only": visuallyHidden }, className), ...props });
-var Sheet = ({ ...props }) => /* @__PURE__ */ jsx(Root$7, { ...props });
+var Sheet = ({ ...props }) => /* @__PURE__ */ jsx(Root$9, { ...props });
 Sheet.Close = Close$1;
-Sheet.Trigger = Trigger$2;
+Sheet.Trigger = Trigger$3;
 Sheet.Content = SheetContent;
 Sheet.Title = SheetTitle;
 Sheet.Header = SheetHeader;
@@ -5858,7 +5885,7 @@ var CollapsibleContent = ({
     children
   }
 );
-var Collapsible = (props) => /* @__PURE__ */ jsx(Root$8, { ...props });
+var Collapsible = (props) => /* @__PURE__ */ jsx(Root$a, { ...props });
 Collapsible.Trigger = CollapsibleTrigger;
 Collapsible.Content = CollapsibleContent;
 var SidebarMenuSub = ({
@@ -5937,7 +5964,7 @@ var SidebarMenuSub = ({
         ),
         children: [
           label,
-          /* @__PURE__ */ jsx(ChevronDown$1, { className: "tw-ml-auto tw-size-5 tw-transition-transform tw-duration-200 group-data-[state=open]:tw-rotate-180" })
+          /* @__PURE__ */ jsx(ChevronDown, { className: "tw-ml-auto tw-size-5 tw-transition-transform tw-duration-200 group-data-[state=open]:tw-rotate-180" })
         ]
       }
     ) }),
@@ -7354,7 +7381,7 @@ var Combobox = ({
               /* @__PURE__ */ jsx(ComboboxInput, { id, placeholder, disabled }),
               /* @__PURE__ */ jsxs(InputGroup.Addon, { align: "inline-end", children: [
                 allowClear && /* @__PURE__ */ jsx(InputGroup.Button, { asChild: true, "aria-label": "Clear", disabled, children: /* @__PURE__ */ jsx(Combobox$1.Clear, { children: /* @__PURE__ */ jsx(X, { className: "tw-size-4" }) }) }),
-                /* @__PURE__ */ jsx(InputGroup.Button, { disabled, asChild: true, "aria-label": "Open combobox", children: /* @__PURE__ */ jsx(Combobox$1.Trigger, { children: /* @__PURE__ */ jsx(ChevronDown$1, { className: "tw-size-4" }) }) })
+                /* @__PURE__ */ jsx(InputGroup.Button, { disabled, asChild: true, "aria-label": "Open combobox", children: /* @__PURE__ */ jsx(Combobox$1.Trigger, { children: /* @__PURE__ */ jsx(ChevronDown, { className: "tw-size-4" }) }) })
               ] })
             ]
           }
@@ -7577,7 +7604,7 @@ var NavbarMenuAvatar = ({
       ...rest,
       ref,
       type,
-      className: cn$1(
+      className: cn(
         "tw-flex",
         "tw-items-center",
         "tw-justify-center",
@@ -7752,7 +7779,7 @@ var NavbarMenuButton = ({
   const Comp = asChild ? Root$1 : "button";
   const isSearchVariant = variant === "search";
   const isEmphasizedVariant = variant === "emphasized";
-  const adornment = isSearchVariant ? /* @__PURE__ */ jsx(Search$1, {}) : renderLegacyIcon(icon);
+  const adornment = isSearchVariant ? /* @__PURE__ */ jsx(Search, {}) : renderLegacyIcon(icon);
   const adornmentVariant = (() => {
     if (isSearchVariant || variant === "icon") return "icon-button";
     if (isEmphasizedVariant) return "icon-accent-emphasized";
@@ -7765,7 +7792,7 @@ var NavbarMenuButton = ({
       ref,
       type,
       "data-variant": variant,
-      className: cn$1(variants7({ className, variant })),
+      className: cn(variants7({ className, variant })),
       children: [
         adornment && /* @__PURE__ */ jsx(NavbarMenuItemAdornment, { variant: adornmentVariant, children: adornment }),
         /* @__PURE__ */ jsx(Slottable, { children })
@@ -7962,7 +7989,7 @@ var Avatar = ({
       ...props,
       ref,
       style: styles.wrapper,
-      className: cn$1(
+      className: cn(
         variant === "circle" ? "tw-rounded-full" : "tw-rounded-md",
         "tw-overflow-hidden",
         "focus-visible:tw-outline-none",
@@ -8186,7 +8213,7 @@ var Toggle = ({
   const isAiVariant = variant === "ai";
   const isIconOnly = Boolean(icon && children == null);
   return /* @__PURE__ */ jsxs(
-    Root$9,
+    Root$b,
     {
       ...props,
       ref,
@@ -8593,7 +8620,7 @@ var Progress = ({
   variant,
   size,
   ...props
-}) => /* @__PURE__ */ jsx(Root$a, { ...props, ref, className: cn(variants8({ variant, size, className })), value, children: /* @__PURE__ */ jsx(
+}) => /* @__PURE__ */ jsx(Root$c, { ...props, ref, className: cn(variants8({ variant, size, className })), value, children: /* @__PURE__ */ jsx(
   Indicator$1,
   {
     "data-slot": "progress-indicator",
@@ -9112,7 +9139,7 @@ var MultiCombobox = ({
                   }
                 ),
                 allowClear && /* @__PURE__ */ jsx(InputGroup.Button, { asChild: true, "aria-label": "Clear", disabled, children: /* @__PURE__ */ jsx(Combobox$1.Clear, { children: /* @__PURE__ */ jsx(X, { className: "tw-size-4" }) }) }),
-                /* @__PURE__ */ jsx(InputGroup.Button, { disabled, asChild: true, "aria-label": "Open combobox", children: /* @__PURE__ */ jsx(Combobox$1.Trigger, { children: /* @__PURE__ */ jsx(ChevronDown$1, { className: "tw-size-4" }) }) })
+                /* @__PURE__ */ jsx(InputGroup.Button, { disabled, asChild: true, "aria-label": "Open combobox", children: /* @__PURE__ */ jsx(Combobox$1.Trigger, { children: /* @__PURE__ */ jsx(ChevronDown, { className: "tw-size-4" }) }) })
               ] })
             ] })
           }
@@ -9567,7 +9594,7 @@ var AlertAction = ({
   );
 };
 var AlertCollapsibleIcon = ({ open }) => /* @__PURE__ */ jsx(Tooltip, { placement: "top", tooltip: open ? "Collapse alert" : "Expand alert", triggerAsChild: true, children: /* @__PURE__ */ jsx(
-  ChevronDown$1,
+  ChevronDown,
   {
     className: cn(
       "tw-mt-px",
@@ -11590,7 +11617,7 @@ var CollapsiblePanel = ({
           },
           children: [
             /* @__PURE__ */ jsx("div", { className: "tw-flex tw-flex-1 tw-items-center tw-gap-2 tw-py-px tw-text-sm tw-font-medium tw-text-neutral-800", children: header }),
-            !isDisabled && /* @__PURE__ */ jsx("div", { className: "tw-ml-auto tw-shrink-0", children: /* @__PURE__ */ jsx(ChevronDown$1, { className: cn("tw-size-5 group-data-[state=open]:tw-rotate-180") }) })
+            !isDisabled && /* @__PURE__ */ jsx("div", { className: "tw-ml-auto tw-shrink-0", children: /* @__PURE__ */ jsx(ChevronDown, { className: cn("tw-size-5 group-data-[state=open]:tw-rotate-180") }) })
           ]
         }
       ),
@@ -11630,7 +11657,7 @@ var PanelWithDetails = ({
           onKeyUp: handleKeyUp,
           children: [
             /* @__PURE__ */ jsx("div", { className: "tw-mr-2 tw-flex tw-shrink-0 tw-items-center", children: /* @__PURE__ */ jsx(
-              ChevronDown$1,
+              ChevronDown,
               {
                 className: cn(
                   "tw-size-5",
@@ -12128,6 +12155,7 @@ var ToastRoot = ({
           "tw-inline-flex",
           "tw-items-center",
           "tw-justify-center",
+          "tw-self-center",
           // styles — container at 20px with no padding so the 20px Lucide
           // glyph fills the slot (previous tw-size-4 + tw-p-1 clipped a
           // 16px child into 8px of visible space)
@@ -12511,6 +12539,7 @@ var PageHeaderDetail = ({
   breadcrumbs,
   overflowActions,
   title,
+  titleIcon,
   badges,
   description,
   primaryAction,
@@ -12525,6 +12554,7 @@ var PageHeaderDetail = ({
   /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-w-full tw-items-start tw-justify-between tw-gap-4", children: [
     /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-min-w-0 tw-flex-1 tw-flex-col tw-gap-2 tw-pr-2", children: [
       /* @__PURE__ */ jsxs("div", { className: titleRowClass, children: [
+        titleIcon && /* @__PURE__ */ jsx("span", { className: "tw-flex tw-shrink-0 tw-items-center", children: titleIcon }),
         /* @__PURE__ */ jsx("h1", { className: titleClass, children: title }),
         badges && /* @__PURE__ */ jsx("div", { className: badgesClass, children: badges })
       ] }),
@@ -12611,7 +12641,7 @@ var PageToolbarToken = ({
           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(ChevronDown, { className: "tw-size-3" })
           ]
         }
       )
@@ -12628,7 +12658,7 @@ var Root30 = ({ ref, className, children, ...props }) => /* @__PURE__ */ jsx(
     children
   }
 );
-var Search4 = ({ ref, className, children, ...props }) => /* @__PURE__ */ jsx(
+var Search3 = ({ ref, className, children, ...props }) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -12686,7 +12716,7 @@ var AddFilter = ({ className, children, ...props }) => /* @__PURE__ */ jsxs(Butt
 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(Root30, {
   /** Left slot — typically a `SearchInput`. */
-  Search: Search4,
+  Search: Search3,
   /** Right cluster — host the four control groups below in the recommended order. */
   Right,
   /** Filter controls (`Combobox`, `Select`, `DatePicker`). */
@@ -12843,7 +12873,7 @@ var SearchInputWithNavigation = ({
     }
   };
   return /* @__PURE__ */ jsx(
-    TextInput$1,
+    TextInput,
     {
       ref,
       allowClear: true,
@@ -12859,7 +12889,7 @@ var SearchInputWithNavigation = ({
       leftSuffix: /* @__PURE__ */ jsxs(
         "div",
         {
-          className: cn$1("tw-flex tw-items-center tw-gap-3", {
+          className: cn("tw-flex tw-items-center tw-gap-3", {
             "tw-hidden": !withControls
           }),
           children: [
@@ -12868,10 +12898,10 @@ var SearchInputWithNavigation = ({
               "/",
               totalResults
             ] }),
-            /* @__PURE__ */ jsx(Separator$1, { orientation: "vertical", size: "3/4" }),
-            /* @__PURE__ */ jsxs(ButtonGroup$1, { children: [
+            /* @__PURE__ */ jsx(Separator, { orientation: "vertical", size: "3/4" }),
+            /* @__PURE__ */ jsxs(ButtonGroup, { children: [
               /* @__PURE__ */ jsx(
-                Button$1,
+                Button,
                 {
                   variant: "inline",
                   size: "icon-3xs",
@@ -12881,13 +12911,13 @@ var SearchInputWithNavigation = ({
                 }
               ),
               /* @__PURE__ */ jsx(
-                Button$1,
+                Button,
                 {
                   variant: "inline",
                   size: "icon-3xs",
                   onClick: onNavigateNext,
                   disabled: !totalResults,
-                  children: /* @__PURE__ */ jsx(ChevronDown$1, { className: "tw-size-4" })
+                  children: /* @__PURE__ */ jsx(ChevronDown, { className: "tw-size-4" })
                 }
               )
             ] })
@@ -12923,7 +12953,7 @@ var TagSelectCreateItem = ({ onCreate, value }) => {
       className: cn("[&_svg]:tw-text-primary-500", {
         "tw-hidden": !isCreateItemVisible
       }),
-      icon: /* @__PURE__ */ jsx(Plus$1, { className: "tw-size-4" }),
+      icon: /* @__PURE__ */ jsx(Plus, { className: "tw-size-4" }),
       children: [
         "Create",
         " ",
@@ -13158,7 +13188,7 @@ var CollapsibleStepHeader = ({
           /* @__PURE__ */ jsx("span", { children: label })
         ] }),
         /* @__PURE__ */ jsx(
-          ChevronDown$1,
+          ChevronDown,
           {
             className: cn("tw-size-4 tw-transition-transform", isExpanded && "tw-rotate-180")
           }
@@ -13297,7 +13327,7 @@ var ExpandToggle = ({
     children: [
       /* @__PURE__ */ jsx("span", { children: isExpanded ? showLessLabel : showMoreLabel }),
       /* @__PURE__ */ jsx(
-        ChevronDown$1,
+        ChevronDown,
         {
           className: cn("tw-size-5 tw-transition-transform", isExpanded && "tw-rotate-180")
         }
@@ -14478,7 +14508,7 @@ var FormBody = ({ children, className, ...formProps }) => {
     "form",
     {
       ...formProps,
-      className: cn$1("tw-flex tw-flex-col tw-gap-4", className),
+      className: cn("tw-flex tw-flex-col tw-gap-4", className),
       onSubmit: (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -14495,7 +14525,7 @@ var SubmitButton = ({ children = "Submit", ...buttonProps }) => {
     {
       selector: (state) => ({ isSubmitting: state.isSubmitting, canSubmit: state.canSubmit }),
       children: ({ isSubmitting, canSubmit }) => /* @__PURE__ */ jsx(
-        Button$1,
+        Button,
         {
           ...buttonProps,
           type: "submit",
@@ -14520,19 +14550,19 @@ var errorMessage = (field) => {
 var FieldShell = ({ field, label, required, help, className, children }) => {
   const error = errorMessage(field);
   const showError = field.state.meta.isTouched && !!error;
-  return /* @__PURE__ */ jsxs(FormGroup$1, { className, state: showError ? "error" : void 0, children: [
-    label && /* @__PURE__ */ jsxs(Label$1, { htmlFor: field.name, children: [
+  return /* @__PURE__ */ jsxs(FormGroup, { className, state: showError ? "error" : void 0, children: [
+    label && /* @__PURE__ */ jsxs(Label, { htmlFor: field.name, children: [
       label,
       required && /* @__PURE__ */ jsx("span", { className: "tw-ml-0.5 tw-text-secondary-500", children: "*" })
     ] }),
     children,
-    showError ? /* @__PURE__ */ jsx(FormGroup$1.Help, { children: error }) : help && /* @__PURE__ */ jsx(FormGroup$1.Help, { children: help })
+    showError ? /* @__PURE__ */ jsx(FormGroup.Help, { children: error }) : help && /* @__PURE__ */ jsx(FormGroup.Help, { children: help })
   ] });
 };
 var CheckboxField = ({ label, help, className, children, ...checkboxProps }) => {
   const field = useFieldContext();
   return /* @__PURE__ */ jsx(FieldShell, { field, help, className, children: /* @__PURE__ */ jsx(
-    Checkbox$1,
+    Checkbox,
     {
       id: field.name,
       name: field.name,
@@ -14549,7 +14579,7 @@ var CheckboxField = ({ label, help, className, children, ...checkboxProps }) =>
 var NumberField = ({ label, required, help, className, ...inputProps }) => {
   const field = useFieldContext();
   return /* @__PURE__ */ jsx(FieldShell, { field, label, required, help, className, children: /* @__PURE__ */ jsx(
-    FormGroup$1.NumberInput,
+    FormGroup.NumberInput,
     {
       id: field.name,
       name: field.name,
@@ -14566,7 +14596,7 @@ var PasswordField = ({ label, required, help, className, ...inputProps }) => {
   const field = useFieldContext();
   const showError = field.state.meta.isTouched && field.state.meta.errors.length > 0;
   return /* @__PURE__ */ jsx(FieldShell, { field, label, required, help, className, children: /* @__PURE__ */ jsx(
-    PasswordInput$1,
+    PasswordInput,
     {
       id: field.name,
       name: field.name,
@@ -14595,7 +14625,7 @@ var SelectField = ({
 }) => {
   const field = useFieldContext();
   return /* @__PURE__ */ jsx(FieldShell, { field, label, required, help, className, children: /* @__PURE__ */ jsxs(
-    Select$1.Root,
+    Select.Root,
     {
       value: field.state.value ?? "",
       onValueChange: (value) => {
@@ -14604,7 +14634,7 @@ var SelectField = ({
       ...rootProps,
       children: [
         /* @__PURE__ */ jsx(
-          Select$1.Trigger,
+          Select.Trigger,
           {
             id: field.name,
             className: triggerClassName ?? "tw-w-full",
@@ -14615,7 +14645,7 @@ var SelectField = ({
             onBlur: field.handleBlur
           }
         ),
-        /* @__PURE__ */ jsx(Select$1.Content, { variant: variant === "argo" ? "argo" : "default", children: options.map((option) => /* @__PURE__ */ jsx(Select$1.Item, { value: option.value, children: option.label }, option.value)) })
+        /* @__PURE__ */ jsx(Select.Content, { variant: variant === "argo" ? "argo" : "default", children: options.map((option) => /* @__PURE__ */ jsx(Select.Item, { value: option.value, children: option.label }, option.value)) })
       ]
     }
   ) });
@@ -14623,7 +14653,7 @@ var SelectField = ({
 var SwitchField = ({ label, help, className, children, ...switchProps }) => {
   const field = useFieldContext();
   return /* @__PURE__ */ jsx(FieldShell, { field, help, className, children: /* @__PURE__ */ jsx(
-    Switch$1,
+    Switch,
     {
       id: field.name,
       name: field.name,
@@ -14640,7 +14670,7 @@ var SwitchField = ({ label, help, className, children, ...switchProps }) => {
 var TextAreaField = ({ label, required, help, className, ...inputProps }) => {
   const field = useFieldContext();
   return /* @__PURE__ */ jsx(FieldShell, { field, label, required, help, className, children: /* @__PURE__ */ jsx(
-    FormGroup$1.Textarea,
+    FormGroup.Textarea,
     {
       id: field.name,
       name: field.name,
@@ -14656,7 +14686,7 @@ var TextAreaField = ({ label, required, help, className, ...inputProps }) => {
 var TextField = ({ label, required, help, className, ...inputProps }) => {
   const field = useFieldContext();
   return /* @__PURE__ */ jsx(FieldShell, { field, label, required, help, className, children: /* @__PURE__ */ jsx(
-    FormGroup$1.TextInput,
+    FormGroup.TextInput,
     {
       id: field.name,
       name: field.name,