@keboola/design 1.2.0 → 1.3.0

package/dist/index.js

@@ -1,5 +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 { 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';
@@ -14,7 +15,7 @@ import { Root as Root$2, Trigger, Close, Portal as Portal$1, Content as Content$
 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, Icon as Icon$1, TextInput as TextInput$1, Separator as Separator$1, ButtonGroup as ButtonGroup$1 } from '@keboola/design';
+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 * as RSeparator from '@radix-ui/react-separator';
@@ -29,6 +30,7 @@ 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 { 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 { Command as Command$1, CommandInput as CommandInput$1, defaultFilter, useCommandState } from 'cmdk';
 export { defaultFilter, useCommandState } from 'cmdk';
@@ -544,12 +546,10 @@ var argoVariants = cva(
           "focus-visible:tw-ring-primary/50"
         ],
         secondary: [
-          "tw-bg-secondary",
-          "tw-text-secondary-foreground",
-          "hover:tw-bg-secondary/80",
-          "hover:tw-text-secondary-foreground",
-          "focus:tw-text-secondary-foreground",
-          "focus-visible:tw-border-secondary",
+          "tw-bg-primary/10",
+          "tw-text-primary",
+          "hover:not-disabled:tw-bg-primary/20",
+          "focus-visible:tw-border-primary",
           "focus-visible:tw-ring-primary/50"
         ],
         // should be called "destructive" by Figma
@@ -612,7 +612,6 @@ var Button = ({
   disabled = false,
   className,
   type = "button",
-  icon: iconProp,
   isLoading = false,
   asChild = false,
   onClick,
@@ -620,10 +619,10 @@ var Button = ({
   variant = "primary",
   size = "medium",
   block = false,
+  icon,
   ...buttonProps
 }) => {
   const Comp = asChild ? Root$1 : "button";
-  const icon = isLoading ? "spinner" : iconProp;
   const classNames = argo ? argoVariants({ variant, size, block, className }) : variants({
     size,
     variant,
@@ -646,12 +645,13 @@ var Button = ({
       disabled,
       "aria-disabled": disabled,
       "data-variant": variant,
-      "data-icon-only": !children,
+      "data-icon-only": String(size).startsWith("icon"),
       type,
       onClick: handleClick,
       className: cn(classNames),
       children: [
-        icon && /* @__PURE__ */ jsx(Icon, { spin: isLoading, icon }),
+        isLoading && /* @__PURE__ */ jsx(Loader2, { className: "tw-size-4 tw-shrink-0 tw-animate-spin" }),
+        !isLoading && icon && /* @__PURE__ */ jsx(Icon, { icon }),
         /* @__PURE__ */ jsx(Slottable, { children })
       ]
     }
@@ -791,7 +791,7 @@ var rangePickerClassNames = {
   selected: `tw-font-medium tw-rounded`,
   range_middle: `tw-bg-secondary-300 tw-border-secondary-300 tw-rounded-none tw-font-medium`
 };
-var Calendar = ({ className, classNames, ...props }) => {
+var Calendar2 = ({ className, classNames, ...props }) => {
   const defaultClassNames = getDefaultClassNames();
   return /* @__PURE__ */ jsx(
     DayPicker,
@@ -813,7 +813,7 @@ var Calendar = ({ className, classNames, ...props }) => {
     }
   );
 };
-Calendar.displayName = "Calendar";
+Calendar2.displayName = "Calendar";
 var variants2 = cva(
   [
     "tailwindcss-preflight",
@@ -915,7 +915,7 @@ var DatePicker = ({
       alignOffset,
       className: "tw-w-auto tw-p-0",
       sideOffset,
-      children: /* @__PURE__ */ jsx(Calendar, { ...calendarProps })
+      children: /* @__PURE__ */ jsx(Calendar2, { ...calendarProps })
     }
   )
 ] });
@@ -1539,10 +1539,11 @@ var Input = ({
           allowClear && isClearButtonVisible && /* @__PURE__ */ jsx(
             InputGroup.Button,
             {
-              icon: "xmark",
+              "aria-label": "Clear",
               onMouseDown: (e) => e.preventDefault(),
               onClick: handleClear,
-              "data-testid": testId.clearButton
+              "data-testid": testId.clearButton,
+              children: /* @__PURE__ */ jsx(X, { className: "tw-size-4" })
             }
           ),
           rightSuffix && /* @__PURE__ */ jsx(
@@ -1695,7 +1696,7 @@ var DateInput = ({
           open: isOpen,
           selected: currentValue ?? void 0,
           startMonth,
-          children: /* @__PURE__ */ jsx(Button, { "aria-label": "Select Date", icon: "calendar", variant: "inline", size: "icon-3xs" })
+          children: /* @__PURE__ */ jsx(Button, { "aria-label": "Select Date", variant: "inline", size: "icon-3xs", children: /* @__PURE__ */ jsx(Calendar, { className: "tw-size-4" }) })
         }
       ) : void 0,
       type: "text"
@@ -1822,15 +1823,7 @@ var DateRangeInput = ({
           open: isOpen,
           startMonth,
           selected: currentValue ?? void 0,
-          children: /* @__PURE__ */ jsx(
-            Button,
-            {
-              "aria-label": "Select Date Range",
-              icon: "calendar",
-              variant: "inline",
-              size: "icon-3xs"
-            }
-          )
+          children: /* @__PURE__ */ jsx(Button, { "aria-label": "Select Date Range", variant: "inline", size: "icon-3xs", children: /* @__PURE__ */ jsx(Calendar, { className: "tw-size-4" }) })
         }
       ) : void 0,
       type: "text"
@@ -1939,7 +1932,7 @@ var TimeInput = ({
           onOpenChange: handleOpenChange,
           onSelect: handleTimePickerSelect,
           selected: currentValue,
-          children: /* @__PURE__ */ jsx(Button, { "aria-label": "Select Time", icon: "clock", variant: "inline", size: "icon-3xs" })
+          children: /* @__PURE__ */ jsx(Button, { "aria-label": "Select Time", variant: "inline", size: "icon-3xs", children: /* @__PURE__ */ jsx(Clock, { className: "tw-size-4" }) })
         }
       ) : void 0
     }
@@ -2532,21 +2525,7 @@ var Radio = ({ className, ...props }) => /* @__PURE__ */ jsx(
       "focus-visible:tw-ring-secondary-200",
       className
     ),
-    children: /* @__PURE__ */ jsx(
-      Indicator$2,
-      {
-        className: cn(
-          "tw-flex",
-          "tw-items-center",
-          "tw-justify-center",
-          'after:tw-content-[""]',
-          "after:tw-block",
-          "after:tw-size-2.5",
-          "after:tw-rounded-full",
-          "after:tw-bg-primary"
-        )
-      }
-    )
+    children: /* @__PURE__ */ jsx(Indicator$2, { className: cn("tw-flex", "tw-items-center", "tw-justify-center"), children: /* @__PURE__ */ jsx(Circle, { className: "tw-size-2.5 tw-fill-current tw-text-primary" }) })
   }
 );
 var RadioGroupItemButton = ({
@@ -2904,7 +2883,7 @@ var ClearButton = ({ onClick, testId }) => {
         "hover:tw-text-neutral-800"
       ),
       "data-testid": testId,
-      children: /* @__PURE__ */ jsx(Icon, { className: "tw-size-4", icon: "xmark" })
+      children: /* @__PURE__ */ jsx(X, { className: "tw-size-4" })
     }
   );
 };
@@ -2997,7 +2976,7 @@ var genSearchTestId = (prefix = "") => {
     clearButton: ps`search-clear-button`
   };
 };
-var Search = ({
+var Search2 = ({
   ref,
   suffix,
   className,
@@ -3056,7 +3035,7 @@ var Search = ({
       ),
       "data-testid": testId.wrapper,
       children: [
-        variant === "ai" ? /* @__PURE__ */ jsx(Icon, { icon: ["far", "sparkles"], className: "[&_path]:tw-fill-aigradient-600" }) : /* @__PURE__ */ jsx(Icon, { className: "tw-text-base tw-text-neutral-400", icon: "magnifying-glass" }),
+        variant === "ai" ? /* @__PURE__ */ jsx(Sparkles, { className: "tw-size-4 [&_*]:tw-stroke-aigradient-600" }) : /* @__PURE__ */ jsx(Search, { className: "tw-size-4 tw-text-neutral-400" }),
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -3094,7 +3073,7 @@ var SearchForm = ({
     onSubmit("");
   };
   return /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, children: /* @__PURE__ */ jsx(
-    Search,
+    Search2,
     {
       ...props,
       ref,
@@ -3110,7 +3089,7 @@ var scrollButtonStyles = cn(
   "tw-justify-center",
   "tw-rounded-sm",
   "tw-p-1",
-  "[&_svg]:tw-size-3"
+  "[&_svg]:tw-size-5"
 );
 var SelectContent = ({
   ref,
@@ -3166,7 +3145,7 @@ var SelectContent = ({
       className
     ),
     children: [
-      /* @__PURE__ */ jsx(SelectPrimitive.ScrollUpButton, { className: scrollButtonStyles, children: /* @__PURE__ */ jsx(Icon, { icon: "chevron-up" }) }),
+      /* @__PURE__ */ jsx(SelectPrimitive.ScrollUpButton, { className: scrollButtonStyles, children: /* @__PURE__ */ jsx(ChevronUp, {}) }),
       /* @__PURE__ */ jsx(
         SelectPrimitive.Viewport,
         {
@@ -3176,11 +3155,13 @@ var SelectContent = ({
           children
         }
       ),
-      /* @__PURE__ */ jsx(SelectPrimitive.ScrollDownButton, { className: scrollButtonStyles, children: /* @__PURE__ */ jsx(Icon, { icon: "chevron-down" }) })
+      /* @__PURE__ */ jsx(SelectPrimitive.ScrollDownButton, { className: scrollButtonStyles, children: /* @__PURE__ */ jsx(ChevronDown$1, {}) })
     ]
   }
 ) });
 var SelectGroup = ({ className, ...props }) => /* @__PURE__ */ jsx(SelectPrimitive.Group, { ...props, className: cn("tw-flex tw-flex-col tw-gap-0.5", className) });
+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 = ({
   ref,
   className,
@@ -3228,9 +3209,9 @@ var SelectItem = ({
       className
     ),
     children: [
-      icon && /* @__PURE__ */ jsx(Icon, { icon }),
+      renderLegacyIcon(icon),
       /* @__PURE__ */ jsx("span", { className: "tw-flex-1 tw-truncate", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children }) }),
-      /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { className: "tw-pointer-events-none", children: /* @__PURE__ */ jsx(Icon, { icon: "check", className: "tw-size-4" }) })
+      /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { className: "tw-pointer-events-none", children: /* @__PURE__ */ jsx(Check, { className: "tw-size-4" }) })
     ]
   }
 );
@@ -3405,7 +3386,7 @@ var SelectTrigger = ({
     ...props,
     children: [
       /* @__PURE__ */ jsx(SelectPrimitive.Value, { placeholder }),
-      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(Icon, { icon: "chevron-down", className: "tw-size-3.5 tw-text-muted-foreground" }) })
+      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown$1, { className: "tw-size-5 tw-text-muted-foreground" }) })
     ]
   }
 );
@@ -3571,14 +3552,8 @@ function Checkbox({
   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: [
-    /* @__PURE__ */ jsx(Icon, { icon: "check", className: "tw-hidden tw-size-3 group-data-[state=checked]:tw-block" }),
-    /* @__PURE__ */ jsx(
-      Icon,
-      {
-        icon: "minus",
-        className: "tw-hidden tw-size-3 group-data-[state=indeterminate]:tw-block"
-      }
-    )
+    /* @__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" })
   ] }) });
   const rendered = !children ? checkboxElement : /* @__PURE__ */ jsxs(FieldBox, { htmlFor: id, variant, position, control: checkboxElement, children: [
     /* @__PURE__ */ jsx(FieldBox.Title, { children }),
@@ -3612,6 +3587,9 @@ var variants4 = cva(
           "tw-bg-white",
           "[&_svg]: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.
+          "[&_svg]:tw-fill-current",
           "group-data-[variant=argo]/dropdown-menu-content:[&_svg]:tw-text-primary",
           "group-data-[variant=default]/dropdown-menu-content:[&_svg]:tw-text-secondary-500"
         ],
@@ -3631,6 +3609,9 @@ var variants4 = cva(
         ],
         switch: [
           "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",
           "tw-text-neutral-400",
           "data-[state=unchecked]:tw-rotate-180",
           "group-data-[variant=default]/dropdown-menu-content:data-[state=checked]:tw-text-secondary-500",
@@ -3646,10 +3627,10 @@ var DropdownMenuItemIndicator = ({
   forceMount: forceMountProp,
   ...rest
 }) => {
-  const icon = (() => {
-    if (variant === "switch") return "toggle-large-on";
-    if (variant === "radio") return "circle";
-    return "check";
+  const IconComp = (() => {
+    if (variant === "switch") return ToggleRight;
+    if (variant === "radio") return Circle;
+    return Check;
   })();
   const forceMount = (() => {
     if (forceMountProp) return true;
@@ -3662,24 +3643,30 @@ var DropdownMenuItemIndicator = ({
       ...rest,
       forceMount,
       className: variants4({ variant, className }),
-      children: /* @__PURE__ */ jsx(Icon, { icon })
+      children: /* @__PURE__ */ jsx(IconComp, {})
     }
   );
 };
-var ItemIcon = ({ className, ...props }) => /* @__PURE__ */ jsx(
-  Icon,
+var ItemIcon = ({ className, children, ...props }) => /* @__PURE__ */ jsx(
+  "span",
   {
     ...props,
     className: cn(
+      "tw-inline-flex",
+      "tw-items-center",
+      "tw-justify-center",
       "tw-aspect-square",
-      "tw-p-0.5",
-      "tw-size-4",
+      // 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",
       "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",
       "group-data-[variant=default]/dropdown-menu-content:group-hover:tw-text-secondary-500",
       className
-    )
+    ),
+    children
   }
 );
 
@@ -3760,7 +3747,7 @@ var DropdownMenuCheckboxItem = ({
   ...props
 }) => {
   const isAtStart = indicatorAlign === "start";
-  const indicatorEle = isLoading ? /* @__PURE__ */ jsx(ItemIcon, { spin: true, icon: "spinner", className: isAtStart ? "" : "tw-ml-auto" }) : /* @__PURE__ */ jsx(DropdownMenuItemIndicator, { variant: indicator, className: isAtStart ? "" : "tw-ml-auto" });
+  const indicatorEle = isLoading ? /* @__PURE__ */ jsx(ItemIcon, { className: isAtStart ? "" : "tw-ml-auto", children: /* @__PURE__ */ jsx(Loader2, { className: "tw-animate-spin" }) }) : /* @__PURE__ */ jsx(DropdownMenuItemIndicator, { variant: indicator, className: isAtStart ? "" : "tw-ml-auto" });
   const handleSelect = (event) => {
     if (!closeOnSelect) event.preventDefault();
     onSelect?.(event);
@@ -3826,13 +3813,13 @@ var DropdownMenuItem = ({
   onPointerMove,
   children,
   asChild,
-  icon: iconProp,
+  icon,
   iconClassName,
   isLoading = false,
   ...props
 }) => {
   const Comp = asChild ? Root$1 : "div";
-  const icon = isLoading ? "spinner" : iconProp;
+  const adornment = isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "tw-animate-spin" }) : renderLegacyIcon(icon);
   const handleOnSelect = (event) => {
     if (asModalTrigger) event.preventDefault();
     onSelect?.(event);
@@ -3856,7 +3843,7 @@ var DropdownMenuItem = ({
       className: cn(itemVariants, className),
       asChild: true,
       children: /* @__PURE__ */ jsxs(Comp, { children: [
-        icon && /* @__PURE__ */ jsx(ItemIcon, { spin: isLoading, icon, className: iconClassName }),
+        adornment && /* @__PURE__ */ jsx(ItemIcon, { className: iconClassName, children: adornment }),
         /* @__PURE__ */ jsx(Slottable, { children })
       ] })
     }
@@ -3937,7 +3924,7 @@ var DropdownMenuRadioItem = ({
   ...props
 }) => {
   const isAtStart = indicatorAlign === "start";
-  const indicatorEle = isLoading ? /* @__PURE__ */ jsx(ItemIcon, { spin: true, icon: "spinner", className: iconClassName }) : /* @__PURE__ */ jsx(DropdownMenuItemIndicator, { variant: indicator });
+  const indicatorEle = isLoading ? /* @__PURE__ */ jsx(ItemIcon, { className: iconClassName, children: /* @__PURE__ */ jsx(Loader2, { className: "tw-animate-spin" }) }) : /* @__PURE__ */ jsx(DropdownMenuItemIndicator, { variant: indicator });
   const handleSelect = (event) => {
     if (!closeOnSelect) event.preventDefault();
     onSelect?.(event);
@@ -3958,7 +3945,7 @@ var DropdownMenuRadioItem = ({
       ...props,
       children: [
         isAtStart && indicatorEle,
-        icon && /* @__PURE__ */ jsx(ItemIcon, { icon, className: iconClassName }),
+        icon && /* @__PURE__ */ jsx(ItemIcon, { className: iconClassName, children: renderLegacyIcon(icon) }),
         /* @__PURE__ */ jsx("span", { className: "tw-flex tw-min-w-0 tw-flex-1 tw-items-center tw-gap-2", children }),
         !isAtStart && indicatorEle
       ]
@@ -4004,7 +3991,7 @@ var DropdownMenuSubContent = ({ className, ...props }) => {
 var DropdownMenuSubTrigger = ({ className, children, ...props }) => {
   return /* @__PURE__ */ jsxs(DropdownMenuPrimitive3.SubTrigger, { className: cn(itemVariants, className), ...props, children: [
     children,
-    /* @__PURE__ */ jsx(Icon, { icon: "chevron-right", className: "tw-ml-auto" })
+    /* @__PURE__ */ jsx(ChevronRight, { className: "tw-ml-auto tw-size-5" })
   ] });
 };
 var DropdownMenuTrigger = ({
@@ -4176,9 +4163,8 @@ var ModalCloseIcon = ({ className, ...rest }) => /* @__PURE__ */ jsxs(
     ),
     children: [
       /* @__PURE__ */ jsx(
-        Icon,
+        X,
         {
-          icon: "close",
           className: cn(
             "tw-size-4",
             "tw-text-neutral-400",
@@ -4245,7 +4231,7 @@ var ModalHeader = ({
   }
 );
 var NAMED_COLORS = /* @__PURE__ */ new Set(["orange", "blue", "red", "green", "gray", "violet"]);
-var ModalIcon = ({ color, ...props }) => {
+var ModalIcon = (props) => {
   const [hasImageError, setHasImageError] = useState(false);
   if ("iconUrl" in props && hasImageError) {
     return null;
@@ -4266,14 +4252,14 @@ var ModalIcon = ({ color, ...props }) => {
         "div",
         {
           className: cn("tw-relative", "tw-rounded-full", "tw-size-12", {
-            "tw-bg-warning-500": color === "orange",
-            "tw-bg-secondary-500": color === "blue",
-            "tw-bg-primary-500": color === "green",
-            "tw-bg-error-500": color === "red",
-            "tw-bg-neutral-150": color === "gray",
-            "tw-bg-purple-100": color === "violet"
+            "tw-bg-warning-500": props.color === "orange",
+            "tw-bg-secondary-500": props.color === "blue",
+            "tw-bg-primary-500": props.color === "green",
+            "tw-bg-error-500": props.color === "red",
+            "tw-bg-neutral-150": props.color === "gray",
+            "tw-bg-purple-100": props.color === "violet"
           }),
-          style: color && !NAMED_COLORS.has(color) ? { backgroundColor: color } : void 0,
+          style: props.color && !NAMED_COLORS.has(props.color) ? { backgroundColor: props.color } : void 0,
           children: /* @__PURE__ */ jsx(
             "span",
             {
@@ -4286,19 +4272,15 @@ var ModalIcon = ({ color, ...props }) => {
                 "tw-top-1/2",
                 "tw-left-1/2",
                 "-tw-translate-x-1/2",
-                "-tw-translate-y-1/2"
-              ),
-              children: /* @__PURE__ */ jsx(
-                Icon,
+                "-tw-translate-y-1/2",
                 {
-                  className: cn(
-                    { "tw-text-white": color !== "violet", "tw-text-purple-500": color === "violet" },
-                    "tw-size-6",
-                    "tw-aspect-square"
-                  ),
-                  ...props
-                }
-              )
+                  "tw-text-white": props.color !== "violet",
+                  "tw-text-purple-500": props.color === "violet"
+                },
+                "[&_svg]:tw-size-6",
+                "[&_svg]:tw-aspect-square"
+              ),
+              children: isFAIconValue(props.icon) ? /* @__PURE__ */ jsx(Icon, { icon: props.icon, spin: props.spin }) : props.icon
             }
           )
         }
@@ -4400,7 +4382,7 @@ var FullScreenModalHeader = ({
       ...props,
       children: [
         /* @__PURE__ */ jsxs("div", { className: cn("tw-flex tw-flex-1 tw-items-center", titleWrapperClassName), children: [
-          previousTitle && onClose && /* @__PURE__ */ jsx(Button, { icon: "angle-left", onClick: onClose, size: "icon", className: "tw-mr-6" }),
+          previousTitle && onClose && /* @__PURE__ */ jsx(Button, { onClick: onClose, size: "icon", className: "tw-mr-6", children: /* @__PURE__ */ jsx(ChevronLeft, { className: "tw-size-4" }) }),
           /* @__PURE__ */ jsx("div", { className: "tw-w-full", children: /* @__PURE__ */ jsxs(
             "div",
             {
@@ -4660,9 +4642,14 @@ var SplitButtonBase = ({
   isActionsOpen,
   onActionsOpenChange,
   argo = false,
+  icon,
+  children,
   ...rest
 }) => /* @__PURE__ */ jsxs(ButtonGroup, { space: "compact", children: [
-  /* @__PURE__ */ jsx(Button, { ...rest, ref, disabled, variant, size, argo }),
+  /* @__PURE__ */ jsxs(Button, { ...rest, ref, disabled, variant, size, argo, children: [
+    !rest.isLoading && renderLegacyIcon(icon),
+    children
+  ] }),
   actions && /* @__PURE__ */ jsxs(
     DropdownMenu,
     {
@@ -4676,8 +4663,8 @@ var SplitButtonBase = ({
             argo,
             size: iconSizeMap[size],
             variant,
-            icon: "caret-down",
-            "aria-label": "Additional actions"
+            "aria-label": "Additional actions",
+            children: /* @__PURE__ */ jsx(ChevronDown, { className: "tw-size-5" })
           }
         ) }),
         /* @__PURE__ */ jsx(DropdownMenu.Content, { align: "end", children: actions })
@@ -5274,7 +5261,7 @@ var SidebarGroupAction = ({
   ref,
   className,
   type = "button",
-  icon,
+  children,
   ...props
 }) => /* @__PURE__ */ jsx(
   "button",
@@ -5296,6 +5283,10 @@ var SidebarGroupAction = ({
       // styles
       "tw-text-neutral-800",
       "tw-rounded-full",
+      // svg defaults: size + colour
+      "[&_svg]:tw-size-3",
+      "[&_svg]:tw-text-neutral-400",
+      "hover:[&_svg]:tw-text-secondary-600",
       "hover:tw-bg-neutral-100",
       "focus-visible:tw-ring-4",
       "focus-visible:tw-ring-secondary-200",
@@ -5304,7 +5295,7 @@ var SidebarGroupAction = ({
       "focus-visible:tw-outline-secondary-500",
       className
     ),
-    children: /* @__PURE__ */ jsx(Icon, { icon, className: "tw-size-3 tw-text-neutral-400 hover:tw-text-secondary-600" })
+    children
   }
 );
 var SidebarGroupLabel = ({
@@ -5422,22 +5413,25 @@ var SidebarMenu = ({ className, ...props }) => /* @__PURE__ */ jsx(
 var SidebarMenuIcon = ({
   ref,
   className,
-  icon,
+  children,
   ...rest
 }) => /* @__PURE__ */ jsx(
-  Icon,
+  "span",
   {
     ...rest,
     ref,
-    icon,
     className: cn(
-      "tw-size-4",
+      "tw-inline-flex",
+      "tw-items-center",
+      "tw-justify-center",
       "tw-aspect-square",
-      "tw-text-sidebar-primary",
       "tw-shrink-0",
       "tw-p-0.5",
+      "tw-text-sidebar-primary",
+      "[&_svg]:tw-size-4",
       className
-    )
+    ),
+    children
   }
 );
 var SidebarMenuButton = ({
@@ -5510,7 +5504,7 @@ var SidebarMenuButton = ({
       ),
       tabIndex: 0,
       children: [
-        icon && /* @__PURE__ */ jsx(SidebarMenuIcon, { icon }),
+        icon && /* @__PURE__ */ jsx(SidebarMenuIcon, { children: renderLegacyIcon(icon) }),
         /* @__PURE__ */ jsx(Slottable, { children })
       ]
     }
@@ -5612,15 +5606,13 @@ var SidebarSearchInput = ({
   };
   return /* @__PURE__ */ jsxs("div", { className: cn(wrapperClassnames, className), children: [
     /* @__PURE__ */ jsx(
-      Icon,
+      Search,
       {
-        icon: "search",
-        fixedWidth: true,
         className: cn(
           "tw-pointer-events-none",
           "tw-absolute",
           "tw-left-2",
-          "tw-h-4",
+          "tw-size-4",
           "tw-text-sidebar-primary",
           "group-data-[state=expanded]/sidebar:tw-text-neutral-400"
         )
@@ -5711,7 +5703,7 @@ var SidebarMenuCard = ({ children, className, icon, title, ...rest }) => {
         ),
         children: /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-flex-col tw-gap-2", children: [
           /* @__PURE__ */ jsxs(Title3, { children: [
-            /* @__PURE__ */ jsx(SidebarMenuIcon, { className: "tw-p-px", icon }),
+            /* @__PURE__ */ jsx(SidebarMenuIcon, { className: "tw-p-px", children: renderLegacyIcon(icon) }),
             title
           ] }),
           /* @__PURE__ */ jsx(Content8, { className, children })
@@ -5876,13 +5868,7 @@ var SidebarMenuSub = ({
         ),
         children: [
           label,
-          /* @__PURE__ */ jsx(
-            Icon,
-            {
-              icon: ["far", "angle-down"],
-              className: "tw-ml-auto tw-transition-transform tw-duration-200 group-data-[state=open]:tw-rotate-180"
-            }
-          )
+          /* @__PURE__ */ jsx(ChevronDown$1, { className: "tw-ml-auto tw-size-5 tw-transition-transform tw-duration-200 group-data-[state=open]:tw-rotate-180" })
         ]
       }
     ) }),
@@ -6337,9 +6323,8 @@ var CheckIndicator = ({ variant = "default" }) => {
   if (variant === "default") return null;
   if (variant === "argo") {
     return /* @__PURE__ */ jsx(
-      Icon,
+      Check,
       {
-        icon: "check",
         className: cn(
           // visibility
           "tw-hidden",
@@ -6379,17 +6364,30 @@ var CheckIndicator = ({ variant = "default" }) => {
         "data-[variant=checkbox]:group-data-[checked=true]/command-item:tw-bg-secondary-500",
         "tw-shrink-0"
       ),
-      children: /* @__PURE__ */ jsx(
-        Icon,
+      children: variant === "checkbox" ? /* @__PURE__ */ jsx(
+        Check,
         {
           className: cn(
             "tw-hidden",
+            // Lucide SVGs default to 24×24; constrain to the 16px indicator slot.
+            "tw-size-3",
+            "tw-stroke-[4px]",
             "group-data-[checked=true]/command-item:tw-block",
-            "group-data-[variant=checkbox]/check-indicator:tw-text-white",
-            "group-data-[variant=radio]/check-indicator:tw-text-secondary-500",
-            "group-data-[variant=radio]/check-indicator:tw-size-3"
-          ),
-          icon: variant === "checkbox" ? "check" : "circle"
+            "group-data-[variant=checkbox]/check-indicator:tw-text-white"
+          )
+        }
+      ) : /* @__PURE__ */ jsx(
+        Circle,
+        {
+          className: cn(
+            "tw-hidden",
+            // Lucide Circle is stroke-only — force fill to match the stroke so
+            // the indicator reads as a solid dot.
+            "tw-size-3",
+            "tw-fill-current",
+            "group-data-[checked=true]/command-item:tw-block",
+            "group-data-[variant=radio]/check-indicator:tw-text-secondary-500"
+          )
         }
       )
     }
@@ -6445,7 +6443,7 @@ var CommandItem = ({
       ),
       children: [
         /* @__PURE__ */ jsx(CheckIndicator, { variant }),
-        icon && /* @__PURE__ */ jsx(Icon, { icon, className: "tw-size-4 tw-shrink-0 tw-text-neutral-400" }),
+        icon && /* @__PURE__ */ jsx("span", { className: "tw-inline-flex tw-size-4 tw-shrink-0 tw-items-center tw-justify-center tw-text-neutral-400 [&_svg]:tw-size-4", children: icon }),
         children
       ]
     }
@@ -6568,8 +6566,8 @@ var BadgeAddon = ({
 var BadgeButton = ({
   ref,
   className,
-  icon,
   type = "button",
+  children,
   ...rest
 }) => /* @__PURE__ */ jsx(
   "button",
@@ -6587,9 +6585,13 @@ var BadgeButton = ({
       "tw-text-inherit",
       "hover:tw-brightness-95",
       "tw-px-1",
+      // 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",
       className
     ),
-    children: /* @__PURE__ */ jsx(Icon, { icon })
+    children
   }
 );
 var BadgeLabel = ({
@@ -6803,7 +6805,7 @@ var ComboboxChips = ({
           /* @__PURE__ */ jsx(Badge.Addon, { variant: "inline", align: "inline-end", children: /* @__PURE__ */ jsx(
             Combobox$1.ChipRemove,
             {
-              render: /* @__PURE__ */ jsx(Badge.Button, { icon: "xmark", "aria-label": "Remove value" })
+              render: /* @__PURE__ */ jsx(Badge.Button, { "aria-label": "Remove value", children: /* @__PURE__ */ jsx(X, { className: "tw-size-3" }) })
             }
           ) })
         ]
@@ -6963,12 +6965,12 @@ var ComboboxItemIndicator = ({
         ),
         ...props,
         children: /* @__PURE__ */ jsx(
-          Icon,
+          Check,
           {
-            icon: "check",
             className: cn(
               "tw-hidden",
               "tw-size-3",
+              "tw-stroke-[4px]",
               "!tw-text-white",
               "group-data-[selected]/combobox-item-indicator:tw-block"
             )
@@ -6987,12 +6989,14 @@ var ComboboxItemIndicator = ({
         "tw-absolute",
         "tw-right-2",
         "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",
         "group-data-[highlighted]/combobox-item:tw-text-accent-foreground",
         "group-data-[variant=default]/combobox-content:group-data-[highlighted]/combobox-item:tw-text-foreground",
         className
       ),
-      render: /* @__PURE__ */ jsx(Icon, { icon: "check" })
+      render: /* @__PURE__ */ jsx(Check, {})
     }
   );
 };
@@ -7045,7 +7049,7 @@ var ComboboxItem = ({
     ),
     children: [
       /* @__PURE__ */ jsx(ComboboxItemIndicator, { variant }),
-      icon && /* @__PURE__ */ jsx(Icon, { icon }),
+      icon,
       /* @__PURE__ */ jsx("span", { className: "tw-truncate", children })
     ]
   }
@@ -7280,17 +7284,8 @@ var Combobox = ({
               prefix && /* @__PURE__ */ jsx(InputGroup.Addon, { align: "inline-start", children: prefix }),
               /* @__PURE__ */ jsx(ComboboxInput, { id, placeholder, disabled }),
               /* @__PURE__ */ jsxs(InputGroup.Addon, { align: "inline-end", children: [
-                allowClear && /* @__PURE__ */ jsx(InputGroup.Button, { asChild: true, icon: "xmark", "aria-label": "Clear", disabled, children: /* @__PURE__ */ jsx(Combobox$1.Clear, {}) }),
-                /* @__PURE__ */ jsx(
-                  InputGroup.Button,
-                  {
-                    disabled,
-                    asChild: true,
-                    icon: "chevron-down",
-                    "aria-label": "Open combobox",
-                    children: /* @__PURE__ */ jsx(Combobox$1.Trigger, {})
-                  }
-                )
+                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" }) }) })
               ] })
             ]
           }
@@ -7299,11 +7294,11 @@ var Combobox = ({
           /* @__PURE__ */ jsx(ComboboxEmpty, { children: empty }),
           /* @__PURE__ */ jsx(ComboboxList, { children: (itemOrGroup) => {
             if (isCreatableItem(itemOrGroup))
-              return /* @__PURE__ */ jsx(Combobox.Item, { value: itemOrGroup, icon: "plus", children: queryToCreateLabel(itemOrGroup.value) });
+              return /* @__PURE__ */ jsx(Combobox.Item, { value: itemOrGroup, icon: /* @__PURE__ */ jsx(Plus, {}), children: queryToCreateLabel(itemOrGroup.value) });
             if (isGroupItem(itemOrGroup)) {
               const maybeCreatable = itemOrGroup.items[0];
               if (isCreatableItem(maybeCreatable)) {
-                return /* @__PURE__ */ jsx(Combobox.Item, { value: maybeCreatable, icon: "plus", children: queryToCreateLabel(maybeCreatable.value) });
+                return /* @__PURE__ */ jsx(Combobox.Item, { value: maybeCreatable, icon: /* @__PURE__ */ jsx(Plus, {}), children: queryToCreateLabel(maybeCreatable.value) });
               }
               const groupLabel = groupToLabel(itemOrGroup);
               return /* @__PURE__ */ jsxs(Combobox.Group, { items: itemOrGroup.items, children: [
@@ -7361,7 +7356,7 @@ var BreadcrumbEllipsis = ({
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx(Icon, { icon: ["far", "ellipsis"], className: "tw-size-4" }),
+      /* @__PURE__ */ jsx(Ellipsis, { className: "tw-size-4" }),
       /* @__PURE__ */ jsx("span", { className: "tw-sr-only", children: "More" })
     ]
   }
@@ -7455,7 +7450,7 @@ var BreadcrumbSeparator = ({ children, className, ...props }) => /* @__PURE__ */
       className
     ),
     ...props,
-    children: children ?? /* @__PURE__ */ jsx(Icon, { icon: "chevron-right" })
+    children: children ?? /* @__PURE__ */ jsx(ChevronRight, { className: "!tw-size-4" })
   }
 );
 var Breadcrumb = ({ className, ...props }) => /* @__PURE__ */ jsx("nav", { "aria-label": "breadcrumb", className: cn("tailwindcss-preflight", className), ...props });
@@ -7680,7 +7675,7 @@ var NavbarMenuButton = ({
   className,
   type = "button",
   children,
-  icon: iconProp,
+  icon,
   asChild = false,
   variant = "default",
   ...rest
@@ -7688,7 +7683,7 @@ var NavbarMenuButton = ({
   const Comp = asChild ? Root$1 : "button";
   const isSearchVariant = variant === "search";
   const isEmphasizedVariant = variant === "emphasized";
-  const icon = isSearchVariant ? "search" : iconProp;
+  const adornment = isSearchVariant ? /* @__PURE__ */ jsx(Search$1, {}) : renderLegacyIcon(icon);
   const adornmentVariant = (() => {
     if (isSearchVariant || variant === "icon") return "icon-button";
     if (isEmphasizedVariant) return "icon-accent-emphasized";
@@ -7703,7 +7698,7 @@ var NavbarMenuButton = ({
       "data-variant": variant,
       className: cn$1(variants7({ className, variant })),
       children: [
-        icon && /* @__PURE__ */ jsx(NavbarMenuItemAdornment, { asChild: true, variant: adornmentVariant, children: /* @__PURE__ */ jsx(Icon$1, { icon }) }),
+        adornment && /* @__PURE__ */ jsx(NavbarMenuItemAdornment, { variant: adornmentVariant, children: adornment }),
         /* @__PURE__ */ jsx(Slottable, { children })
       ]
     }
@@ -7808,22 +7803,27 @@ var PaginationEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsx(
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx(Icon, { icon: ["far", "ellipsis"] })
+    children: /* @__PURE__ */ jsx(Ellipsis, {})
   }
 );
 var PaginationItem = ({ className, ...props }) => /* @__PURE__ */ jsx("li", { className: cn("tw-list-none", className), ...props });
-var PaginationNext = ({ children, className, ...props }) => /* @__PURE__ */ jsx(
+var PaginationNext = ({ children, className, ...props }) => /* @__PURE__ */ jsxs(
   PaginationButton,
   {
     ...props,
     "aria-label": "Go to next page",
-    icon: "chevron-right",
     size: "medium",
     className: cn("tw-flex-row-reverse", className),
-    children: children ?? "Next"
+    children: [
+      /* @__PURE__ */ jsx(ChevronRight, { className: "tw-size-5" }),
+      children ?? "Next"
+    ]
   }
 );
-var PaginationPrevious = ({ children, ...props }) => /* @__PURE__ */ jsx(PaginationButton, { ...props, size: "medium", "aria-label": "Go to previous page", icon: "chevron-left", children: children ?? "Previous" });
+var PaginationPrevious = ({ children, ...props }) => /* @__PURE__ */ jsxs(PaginationButton, { ...props, size: "medium", "aria-label": "Go to previous page", children: [
+  /* @__PURE__ */ jsx(ChevronLeft, { className: "tw-size-5" }),
+  children ?? "Previous"
+] });
 var Pagination = ({ className, ...props }) => /* @__PURE__ */ jsx(
   "nav",
   {
@@ -8031,9 +8031,12 @@ var toggleVariants = cva(
           "aria-pressed:tw-to-purple-600",
           "hover:aria-pressed:tw-from-secondary-700",
           "hover:aria-pressed:tw-to-purple-700",
-          // icon color - gradient when off, white when on
-          "[&_path]:tw-fill-aigradient-600",
-          "[&_path]:aria-pressed:tw-fill-white",
+          // icon color - gradient stroke when off, white stroke when on.
+          // Lucide icons are stroke-based; targeting every shape (`*`)
+          // catches paths, circles, and other non-path sub-shapes so the
+          // whole glyph picks up the gradient.
+          "[&_*]:tw-stroke-aigradient-600",
+          "[&_*]:aria-pressed:tw-stroke-white",
           "*:aria-pressed:tw-text-white"
         ],
         "ai-vivid": [
@@ -8122,7 +8125,7 @@ var Toggle = ({
       disabled,
       children: [
         badge && /* @__PURE__ */ jsx("span", { className: "tw-absolute tw-right-0 tw-top-0 -tw-translate-y-1/2 tw-translate-x-1/4", children: badge }),
-        icon && /* @__PURE__ */ jsx(Icon, { icon, className: "tw-inline-block tw-size-4 tw-shrink-0 tw-align-middle" }),
+        icon && /* @__PURE__ */ jsx("span", { className: "tw-inline-flex tw-size-4 tw-shrink-0 tw-items-center tw-justify-center tw-align-middle [&_svg]:tw-size-4", children: renderLegacyIcon(icon) }),
         isAiVariant ? /* @__PURE__ */ jsx("div", { className: "tw-bg-gradient-to-br tw-from-secondary-700 tw-to-purple-700 tw-bg-clip-text tw-text-transparent", children }) : children
       ]
     }
@@ -8964,17 +8967,8 @@ var MultiCombobox = ({
                     className: "tw-w-auto tw-min-w-[120px] tw-flex-1"
                   }
                 ),
-                allowClear && /* @__PURE__ */ jsx(InputGroup.Button, { asChild: true, icon: "xmark", "aria-label": "Clear", disabled, children: /* @__PURE__ */ jsx(Combobox$1.Clear, {}) }),
-                /* @__PURE__ */ jsx(
-                  InputGroup.Button,
-                  {
-                    disabled,
-                    asChild: true,
-                    icon: "chevron-down",
-                    "aria-label": "Open combobox",
-                    children: /* @__PURE__ */ jsx(Combobox$1.Trigger, {})
-                  }
-                )
+                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" }) }) })
               ] })
             ] })
           }
@@ -9066,9 +9060,9 @@ var ColorPicker = ({ value, disabled, readOnly, ...props }) => {
       {
         onMouseDown: (event) => event.preventDefault(),
         disabled: disabled || readOnly,
-        icon: "eye-dropper",
         onClick: handleOpenPicker,
-        "aria-label": "Pick color"
+        "aria-label": "Pick color",
+        children: /* @__PURE__ */ jsx(Pipette, { className: "tw-size-4" })
       }
     )
   ] });
@@ -9184,10 +9178,10 @@ var ColorInput = ({
           canClear && /* @__PURE__ */ jsx(
             InputGroup.Button,
             {
-              icon: "xmark",
               onMouseDown: (event) => event.preventDefault(),
               onClick: handleClear,
-              "aria-label": "Clear color"
+              "aria-label": "Clear color",
+              children: /* @__PURE__ */ jsx(X, { className: "tw-size-4" })
             }
           ),
           /* @__PURE__ */ jsx(
@@ -9295,7 +9289,7 @@ FormGroup.TextInput = FormGroupTextInput;
 FormGroup.NumberInput = FormGroupNumberInput;
 FormGroup.ColorInput = FormGroupColorInput;
 FormGroup.Textarea = FormGroupTextarea;
-var Link = ({
+var Link2 = ({
   ref,
   children,
   target = "_blank",
@@ -9380,14 +9374,14 @@ var Tabs = ({
                       /* @__PURE__ */ jsx(
                         Button,
                         {
-                          icon: "xmark",
                           variant: "inline",
                           size: "icon-3xs",
                           disabled: rest2.disabled,
                           onClick: () => onClose(value),
                           onMouseDown: (e) => e.preventDefault(),
                           className: "!tw-size-8 tw-opacity-0 tw-duration-200 group-hover/tab-trigger:tw-opacity-100",
-                          "aria-label": "Close tab"
+                          "aria-label": "Close tab",
+                          children: /* @__PURE__ */ jsx(X, { className: "tw-size-4" })
                         }
                       )
                     ] })
@@ -9429,12 +9423,11 @@ var AlertAction = ({
   );
 };
 var AlertCollapsibleIcon = ({ open }) => /* @__PURE__ */ jsx(Tooltip, { placement: "top", tooltip: open ? "Collapse alert" : "Expand alert", triggerAsChild: true, children: /* @__PURE__ */ jsx(
-  Icon,
+  ChevronDown$1,
   {
-    icon: "chevron-down",
     className: cn(
       "tw-mt-px",
-      "tw-size-4",
+      "tw-size-5",
       "tw-text-neutral-400",
       "group-data-[state=open]/alert:tw-rotate-180",
       "group-data-[variant=info]/alert:group-hover:tw-text-secondary-600",
@@ -9467,35 +9460,31 @@ var AlertDescription = ({
     children
   }
 );
-var ICONS = {
-  info: "circle-info",
-  warning: "triangle-exclamation",
-  error: "triangle-exclamation",
-  success: "circle-check"
+var VARIANT_ICONS = {
+  info: /* @__PURE__ */ jsx(Info, {}),
+  warning: /* @__PURE__ */ jsx(AlertTriangle, {}),
+  error: /* @__PURE__ */ jsx(AlertTriangle, {}),
+  success: /* @__PURE__ */ jsx(CircleCheck, {})
 };
-var AlertIcon = ({
-  ref,
-  variant,
-  icon,
-  className,
-  ...rest
-}) => /* @__PURE__ */ jsx(
-  Icon,
+var AlertIcon = ({ variant, icon, className, ...rest }) => /* @__PURE__ */ jsx(
+  "span",
   {
     ...rest,
-    ref,
     "data-slot": "alert-icon",
-    icon: icon ?? ICONS[variant],
     className: cn(
+      "tw-inline-flex",
+      "tw-items-center",
+      "tw-justify-center",
       "tw-self-start",
       "tw-p-0.5",
-      "tw-text-base",
+      "[&_svg]: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",
       "group-data-[variant=success]/alert:tw-text-primary-500",
       className
-    )
+    ),
+    children: icon ?? VARIANT_ICONS[variant]
   }
 );
 var AlertRoot = ({
@@ -9620,7 +9609,7 @@ var Alert = ({
     actions && /* @__PURE__ */ jsx(AlertAction, { children: actions })
   ] });
 };
-var DEFAULT_ICON = "copy";
+var DEFAULT_ICON = /* @__PURE__ */ jsx(Copy, {});
 var ClipboardButton = ({
   // clipboard props
   text,
@@ -9640,7 +9629,10 @@ var ClipboardButton = ({
     tooltipPlacement,
     tooltipVariant,
     text,
-    children: /* @__PURE__ */ jsx(Button, { ...rest, icon, variant, disabled: !text, children })
+    children: /* @__PURE__ */ jsxs(Button, { ...rest, variant, disabled: !text, children: [
+      icon,
+      children
+    ] })
   }
 );
 var ClipboardInline = ({
@@ -9662,7 +9654,7 @@ var ClipboardInline = ({
     tooltipPlacement,
     tooltipVariant,
     children: /* @__PURE__ */ jsxs(ButtonInline, { ...rest, disabled: !text, children: [
-      !hideIcon && /* @__PURE__ */ jsx(Icon$1, { icon: "copy" }),
+      !hideIcon && /* @__PURE__ */ jsx(Copy, { className: "tw-size-4" }),
       children
     ] })
   }
@@ -10425,26 +10417,35 @@ var CHANGE_CLASS = {
 };
 var LINE_HEIGHT_PX = 20;
 var PANE_HEADER_HEIGHT_PX = 58;
-var AcceptButton = ({ side, onAccept }) => {
+var AcceptButton = ({ side, onAccept, argo }) => {
   const label = `Accept ${side === "left" ? "production" : "branch"} version`;
+  const Chevron = side === "left" ? ChevronsRight : ChevronsLeft;
   return /* @__PURE__ */ jsx(
     Button,
     {
-      icon: side === "left" ? ["far", "chevrons-right"] : ["far", "chevrons-left"],
       onClick: onAccept,
       variant: "outline",
-      size: "icon",
+      size: "icon-sm",
       title: label,
-      "aria-label": label
+      "aria-label": label,
+      argo,
+      children: /* @__PURE__ */ jsx(Chevron, { className: "tw-size-5" })
     }
   );
 };
-var AcceptControls = ({ conflicts, side, onAccept, onDismiss, contentRef }) => /* @__PURE__ */ jsx(
+var AcceptControls = ({
+  conflicts,
+  side,
+  onAccept,
+  onDismiss,
+  contentRef,
+  argo
+}) => /* @__PURE__ */ jsx(
   "div",
   {
     className: cn(
       "tw-z-10 tw-flex tw-shrink-0 tw-flex-col tw-items-center",
-      conflicts.length > 0 ? "tw-w-10" : "tw-w-0"
+      conflicts.length > 0 ? "tw-w-7" : "tw-w-0"
     ),
     children: conflicts.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("div", { className: "tw-shrink-0", style: { height: `${PANE_HEADER_HEIGHT_PX}px` } }),
@@ -10457,16 +10458,17 @@ var AcceptControls = ({ conflicts, side, onAccept, onDismiss, contentRef }) => /
             className: "tw-absolute tw-inset-x-0 tw-flex tw-flex-col tw-items-center tw-gap-0.5",
             style: { top: `${topOffset}px` },
             children: [
-              /* @__PURE__ */ jsx(AcceptButton, { side, onAccept: () => onAccept(conflict) }),
+              /* @__PURE__ */ jsx(AcceptButton, { side, onAccept: () => onAccept(conflict), argo }),
               onDismiss && /* @__PURE__ */ jsx(
                 Button,
                 {
-                  icon: "xmark",
                   onClick: () => onDismiss(conflict),
                   variant: "outline",
-                  size: "icon",
+                  size: "icon-sm",
                   title: "Dismiss",
-                  "aria-label": `Dismiss ${side === "left" ? "production" : "branch"} change`
+                  "aria-label": `Dismiss ${side === "left" ? "production" : "branch"} change`,
+                  argo,
+                  children: /* @__PURE__ */ jsx(X, { className: "tw-size-4" })
                 }
               )
             ]
@@ -10569,14 +10571,18 @@ var MergePane = ({
           backgroundColor: colors.neutral[50],
           outline: "none"
         },
-        "&.cm-editor .cm-scroller": {
-          alignItems: "stretch !important"
-        },
         ".cm-gutters": {
           backgroundColor: colors.neutral[100]
         },
         "*": { lineHeight: `${LINE_HEIGHT_PX}px` },
         ".cm-lineNumbers .cm-gutterElement": { padding: "0 0 0 25px" }
+      }),
+      // Recalc viewport after every doc change so late-settling layouts (alerts
+      // appearing above the editor) don't leave trailing lines blank.
+      EditorView.updateListener.of((update) => {
+        if (update.docChanged) {
+          requestAnimationFrame(() => update.view.dispatch({}));
+        }
       })
     ],
     []
@@ -10597,12 +10603,21 @@ var MergePane = ({
   useEffect(() => {
     return () => onScrollDOMReady?.(null);
   }, [onScrollDOMReady]);
+  useEffect(() => {
+    const view = editorRef.current?.view;
+    const wrapper = view?.dom.parentElement;
+    if (!view || !wrapper) return;
+    const observer = new ResizeObserver(() => view.dispatch({}));
+    observer.observe(wrapper);
+    return () => observer.disconnect();
+  }, []);
   return /* @__PURE__ */ jsxs("div", { className: cn("tw-flex tw-min-w-0 tw-flex-1 tw-flex-col tw-overflow-hidden", className), children: [
     header && /* @__PURE__ */ jsx("div", { className: cn("tw-bg-white tw-px-4 tw-py-3", headerClassName), children: header }),
-    /* @__PURE__ */ jsx("div", { className: "tw-flex tw-h-0 tw-flex-1 tw-flex-col [&_>div]:tw-h-full [&_>div]:tw-overflow-auto", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "tw-flex tw-h-0 tw-flex-1 tw-flex-col [&_>div]:tw-h-full", children: /* @__PURE__ */ jsx(
       CodeMirror,
       {
         ref: editorRef,
+        height: "100%",
         value,
         onChange,
         extensions,
@@ -10694,7 +10709,8 @@ var MergeEditor = ({
   middleHeaderClassName,
   middleClassName,
   rightHeader,
-  className
+  className,
+  argo
 }) => {
   const { registerScroller, registerFollower } = useScrollSync();
   return /* @__PURE__ */ jsxs(
@@ -10724,7 +10740,8 @@ var MergeEditor = ({
             side: "left",
             onAccept: acceptLeft,
             onDismiss: dismissLeft,
-            contentRef: registerFollower(0, "left-controls")
+            contentRef: registerFollower(0, "left-controls"),
+            argo
           }
         ),
         /* @__PURE__ */ jsx(
@@ -10747,7 +10764,8 @@ var MergeEditor = ({
             side: "right",
             onAccept: acceptRight,
             onDismiss: dismissRight,
-            contentRef: registerFollower(2, "right-controls")
+            contentRef: registerFollower(2, "right-controls"),
+            argo
           }
         ),
         /* @__PURE__ */ jsx(
@@ -10789,7 +10807,7 @@ var ConflictStatusIndicator = ({ remainingConflicts, remainingSafeChanges }) =>
         colorClass
       ),
       children: [
-        /* @__PURE__ */ jsx(Icon, { icon: allDone ? "circle-check" : "triangle-exclamation" }),
+        allDone ? /* @__PURE__ */ jsx(CircleCheck, { className: "tw-size-4" }) : /* @__PURE__ */ jsx(AlertTriangle, { className: "tw-size-4" }),
         allDone ? "All changes resolved" : `${parts.join(", ")} remaining`
       ]
     }
@@ -11425,13 +11443,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(
-              Icon,
-              {
-                icon: "chevron-down",
-                className: cn("tw-text-xs group-data-[state=open]:tw-rotate-180")
-              }
-            ) })
+            !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") }) })
           ]
         }
       ),
@@ -11471,11 +11483,10 @@ var PanelWithDetails = ({
           onKeyUp: handleKeyUp,
           children: [
             /* @__PURE__ */ jsx("div", { className: "tw-mr-2 tw-flex tw-shrink-0 tw-items-center", children: /* @__PURE__ */ jsx(
-              Icon,
+              ChevronDown$1,
               {
-                icon: "chevron-down",
                 className: cn(
-                  "tw-text-xs",
+                  "tw-size-5",
                   !isOpen ? "-tw-rotate-90" : placement === "bottom" ? "tw-rotate-180" : ""
                 )
               }
@@ -11518,7 +11529,14 @@ var ANIMATION_CLASS_NAME = cn(
 var Skeleton = ({ height = "md", className, count = 1 }) => {
   const prefixId = useId();
   const keys2 = Array.from({ length: count }, (_, i) => `${prefixId}-${i}`);
-  return /* @__PURE__ */ jsx(Fragment, { children: keys2.map((key) => /* @__PURE__ */ jsx("div", { className: cn(HEIGHT_CLASS_NAME[height], ANIMATION_CLASS_NAME, className) }, key)) });
+  return /* @__PURE__ */ jsx(Fragment, { children: keys2.map((key) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-skeleton": "true",
+      className: cn(HEIGHT_CLASS_NAME[height], ANIMATION_CLASS_NAME, className)
+    },
+    key
+  )) });
 };
 var duplicateArray = (arr, times) => {
   return Array(times).fill(arr).flat();
@@ -11650,7 +11668,7 @@ var TableRow = ({
   className,
   ...props
 }) => /* @__PURE__ */ jsx("tr", { ref, className: cn("hover:tw-bg-neutral-100", className), ...props });
-var Table = ({
+var Table2 = ({
   borderCollapsed = true,
   bordered = false,
   containerClassName,
@@ -11679,12 +11697,12 @@ var Table = ({
     }
   );
 };
-Table.Header = TableHeader;
-Table.Head = TableHead;
-Table.Body = TableBody;
-Table.Row = TableRow;
-Table.Cell = TableCell;
-Table.Footer = TableFooter;
+Table2.Header = TableHeader;
+Table2.Head = TableHead;
+Table2.Body = TableBody;
+Table2.Row = TableRow;
+Table2.Cell = TableCell;
+Table2.Footer = TableFooter;
 var resizableHandleVariants = cva([
   // base styles
   "tw-bg-neutral-50",
@@ -11819,7 +11837,7 @@ var ToastDismiss = ({
       "tailwindcss-preflight",
       "[&_svg]:tw-aspect-square",
       "[&_svg]:tw-size-4",
-      "[&_svg]:tw-p-1",
+      "[&_svg]:tw-m-1",
       "tw-text-white",
       "group-data-[variant=default]/toast:[&_svg]:tw-text-popover-foreground",
       className
@@ -11827,7 +11845,7 @@ var ToastDismiss = ({
     type: "button",
     ...rest,
     children: [
-      /* @__PURE__ */ jsx(Icon, { icon: "times" }),
+      /* @__PURE__ */ jsx(X, {}),
       /* @__PURE__ */ jsx("span", { className: "tw-sr-only", children: "Dismiss" })
     ]
   }
@@ -11929,10 +11947,10 @@ var variants11 = cva(
   }
 );
 var DEFAULT_VARIANT_ICON = {
-  error: "exclamation-triangle",
-  info: "info-circle",
-  success: "check-circle",
-  warning: "exclamation-circle"
+  error: /* @__PURE__ */ jsx(AlertTriangle, {}),
+  info: /* @__PURE__ */ jsx(Info, {}),
+  success: /* @__PURE__ */ jsx(CircleCheck, {}),
+  warning: /* @__PURE__ */ jsx(AlertCircle, {})
 };
 var ToastRoot = ({
   id,
@@ -11945,8 +11963,8 @@ var ToastRoot = ({
   icon: iconProp
 }) => {
   const icon = (() => {
-    if (loading) return "spinner";
-    if (iconProp) return iconProp;
+    if (loading) return /* @__PURE__ */ jsx(Loader2, { className: "tw-animate-spin" });
+    if (iconProp) return renderLegacyIcon(iconProp);
     if (variant === "default" || variant === null) return null;
     return DEFAULT_VARIANT_ICON[variant];
   })();
@@ -11956,20 +11974,24 @@ var ToastRoot = ({
   };
   return /* @__PURE__ */ jsxs("div", { "data-variant": variant, className: cn(variants11({ variant })), children: [
     icon && /* @__PURE__ */ jsx(
-      Icon,
+      "span",
       {
         "data-slot": "toast-icon",
-        spin: loading,
         className: cn(
-          // styles
+          "tw-inline-flex",
+          "tw-items-center",
+          "tw-justify-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)
           "tw-aspect-square",
-          "tw-size-4",
+          "tw-size-5",
           "tw-shrink-0",
-          "tw-p-1",
+          "[&_svg]:tw-size-5",
           "tw-text-white",
           "group-data-[variant=default]/toast:tw-text-popover-foreground"
         ),
-        icon
+        children: icon
       }
     ),
     /* @__PURE__ */ jsx(ToastTitle, { children: title }),
@@ -12318,11 +12340,17 @@ var Footer = ({
   }
 );
 var PageLayout = Object.assign(Root27, {
+  /** 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. */
   Footer
 });
 
@@ -12400,9 +12428,80 @@ var PageHeaderIndex = ({
 
 // src/blocks/PageHeader/PageHeader.tsx
 var PageHeader = {
+  /** Index variant — top-level list / collection pages. No breadcrumbs; `metadata` wins over `description`. */
   Index: PageHeaderIndex,
+  /** 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(
+  "div",
+  {
+    ref,
+    className: cn("tw-flex tw-flex-wrap tw-items-center tw-gap-3 tw-w-full", className),
+    ...props,
+    children
+  }
+);
+var Search4 = ({ ref, className, children, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "tw-mr-auto tw-flex tw-items-center tw-gap-2 tw-w-full sm:tw-w-auto sm:tw-min-w-64 sm:tw-max-w-md",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var Right = ({ ref, className, children, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("tw-flex tw-flex-wrap tw-items-center tw-gap-2", className),
+    ...props,
+    children
+  }
+);
+var ControlGroup = ({ ref, className, children, ...props }) => /* @__PURE__ */ jsx("div", { ref, className: cn("tw-flex tw-items-center tw-gap-2", className), ...props, children });
+var ActiveFilters = ({ ref, className, children, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("tw-flex tw-flex-wrap tw-items-center tw-gap-2 tw-basis-full", className),
+    ...props,
+    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" }),
+  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, {
+  /** Left slot — typically a `SearchInput`. */
+  Search: Search4,
+  /** Right cluster — host the four control groups below in the recommended order. */
+  Right,
+  /** Filter controls (`Combobox`, `Select`, `DatePicker`). */
+  Filters: ControlGroup,
+  /** Sort control. */
+  Sort: ControlGroup,
+  /** Utility actions (Export, Refresh, …). */
+  Actions: ControlGroup,
+  /** View toggle (List / Grid). Always render last in the right cluster. */
+  View: ControlGroup,
+  /**
+   * Active filters row. Render only when one or more filters are active. Pass filter chips
+   * (Standard variant) or tokens (Query Builder variant) as children, optionally followed
+   * by `AddFilter` / `Clear`.
+   */
+  ActiveFilters,
+  /** "+ Add filter" action — typically rendered after the chips/tokens in `ActiveFilters`. */
+  AddFilter,
+  /** "Clear all" action — self-aligns to the far right of `ActiveFilters`. */
+  Clear
+});
 var SearchInput = ({
   ref,
   // group props
@@ -12482,7 +12581,7 @@ var SearchInput = ({
       focusVariant,
       className,
       children: [
-        /* @__PURE__ */ jsx(InputGroup.Addon, { align: "inline-start", children: /* @__PURE__ */ jsx(Icon, { icon: "magnifying-glass", className: "tw-text-muted-foreground" }) }),
+        /* @__PURE__ */ jsx(InputGroup.Addon, { align: "inline-start", children: /* @__PURE__ */ jsx(Search, { className: "tw-size-4 tw-text-muted-foreground" }) }),
         /* @__PURE__ */ jsx(
           InputGroup.Input,
           {
@@ -12498,10 +12597,10 @@ var SearchInput = ({
         canClear && /* @__PURE__ */ jsx(InputGroup.Addon, { align: "inline-end", children: /* @__PURE__ */ jsx(
           InputGroup.Button,
           {
-            icon: "xmark",
             "aria-label": "Clear search",
             onMouseDown: (event) => event.preventDefault(),
-            onClick: handleClear
+            onClick: handleClear,
+            children: /* @__PURE__ */ jsx(X, { className: "tw-size-4" })
           }
         ) })
       ]
@@ -12538,7 +12637,7 @@ var SearchInputWithNavigation = ({
       placeholder,
       onValueChange,
       onClear,
-      prefix: /* @__PURE__ */ jsx(Icon$1, { className: "tw-text-neutral-400", icon: "magnifying-glass" }),
+      prefix: /* @__PURE__ */ jsx(Search, { className: "tw-size-4 tw-text-neutral-400" }),
       focusVariant,
       onKeyDown: handleKeyDown2,
       variant,
@@ -12564,7 +12663,7 @@ var SearchInputWithNavigation = ({
                   size: "icon-3xs",
                   onClick: onNavigatePrevious,
                   disabled: !totalResults,
-                  icon: "angle-up"
+                  children: /* @__PURE__ */ jsx(ChevronUp, { className: "tw-size-4" })
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -12574,7 +12673,7 @@ var SearchInputWithNavigation = ({
                   size: "icon-3xs",
                   onClick: onNavigateNext,
                   disabled: !totalResults,
-                  icon: "angle-down"
+                  children: /* @__PURE__ */ jsx(ChevronDown$1, { className: "tw-size-4" })
                 }
               )
             ] })
@@ -12591,7 +12690,7 @@ var TagItem = ({ tag, onRemove, disabled = false }) => {
   const isDisabled = disabled || !!tag.disabled;
   return /* @__PURE__ */ jsxs(Badge.Root, { variant: "tag", color: tag.color, children: [
     /* @__PURE__ */ jsx(Badge.Label, { children: tag.name }),
-    onRemove && !isDisabled && /* @__PURE__ */ jsx(Badge.Addon, { variant: "floating", align: "inline-end", children: /* @__PURE__ */ jsx(Badge.Button, { onClick: handleRemove, icon: "xmark", "aria-label": "Remove Tag" }) })
+    onRemove && !isDisabled && /* @__PURE__ */ jsx(Badge.Addon, { variant: "floating", align: "inline-end", children: /* @__PURE__ */ jsx(Badge.Button, { onClick: handleRemove, "aria-label": "Remove Tag", children: /* @__PURE__ */ jsx(X, { className: "tw-size-3" }) }) })
   ] });
 };
 var TagSelectCreateItem = ({ onCreate, value }) => {
@@ -12610,7 +12709,7 @@ var TagSelectCreateItem = ({ onCreate, value }) => {
       className: cn("[&_svg]:tw-text-primary-500", {
         "tw-hidden": !isCreateItemVisible
       }),
-      icon: "plus",
+      icon: /* @__PURE__ */ jsx(Plus$1, { className: "tw-size-4" }),
       children: [
         "Create",
         " ",
@@ -12692,7 +12791,7 @@ var TagSelectList = ({ options = defaultOptions, onAdd, onCreate }) => {
         Command.Input,
         {
           variant: "secondary",
-          prefix: /* @__PURE__ */ jsx(Icon, { icon: "search", className: "tw-size-4 tw-text-neutral-400" }),
+          prefix: /* @__PURE__ */ jsx(Search, { className: "tw-size-4 tw-text-neutral-400" }),
           placeholder: "Search tags",
           allowClear: true
         }
@@ -12768,7 +12867,7 @@ var Tagger = ({
   return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs("ul", { className: "tailwindcss-preflight tw-flex tw-min-h-6 tw-flex-wrap tw-items-center tw-gap-2", children: [
     value.map((tag) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(TagItem, { disabled, tag, onRemove: handleRemove }) }, tag.name)),
     !disabled && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(TagSelectPopover, { options: tagsToAdd, onAdd: handleAdd, onCreate: handleCreate, children: /* @__PURE__ */ jsx(Badge, { color: "gray-inverse", asChild: true, children: /* @__PURE__ */ jsxs("button", { type: "button", className: "tw-flex tw-items-center tw-gap-1", children: [
-      /* @__PURE__ */ jsx(Icon, { icon: "plus" }),
+      /* @__PURE__ */ jsx(Plus, { className: "tw-size-4" }),
       /* @__PURE__ */ jsx(
         "span",
         {
@@ -12794,13 +12893,13 @@ var MultiActionButton = ({
   Button,
   {
     disabled,
-    icon,
     isLoading,
     "aria-label": label,
     onClick,
     variant: "invisible",
     size: "icon",
-    "data-testid": dataTestId
+    "data-testid": dataTestId,
+    children: !isLoading && icon
   }
 ) });
 var MultiActionButtonGroup = ({ children, className }) => /* @__PURE__ */ jsx(ButtonGroup, { className: cn("tw-text-nowrap", className), children });
@@ -12813,15 +12912,15 @@ var variantClasses = {
 };
 var renderVariantIcon = (variant) => {
   if (variant === "processing") {
-    return /* @__PURE__ */ jsx(Icon, { icon: "spinner", spin: true, className: "tw-size-4" });
+    return /* @__PURE__ */ jsx(Loader2, { className: "tw-size-4 tw-animate-spin" });
   }
   if (variant === "error") {
-    return /* @__PURE__ */ jsx(Icon, { icon: "circle-xmark", className: "tw-size-4" });
+    return /* @__PURE__ */ jsx(XCircle, { className: "tw-size-4" });
   }
   if (variant === "dismissed") {
-    return /* @__PURE__ */ jsx(Icon, { icon: "circle-xmark", className: "tw-size-4 tw-text-neutral-500" });
+    return /* @__PURE__ */ jsx(XCircle, { className: "tw-size-4 tw-text-neutral-500" });
   }
-  return /* @__PURE__ */ jsx(Icon, { icon: "circle-check", className: "tw-size-4" });
+  return /* @__PURE__ */ jsx(CircleCheck, { className: "tw-size-4" });
 };
 var CollapsibleStepHeader = ({
   isExpanded,
@@ -12845,10 +12944,9 @@ var CollapsibleStepHeader = ({
           /* @__PURE__ */ jsx("span", { children: label })
         ] }),
         /* @__PURE__ */ jsx(
-          Icon,
+          ChevronDown$1,
           {
-            icon: "chevron-down",
-            className: cn("tw-size-3 tw-transition-transform", isExpanded && "tw-rotate-180")
+            className: cn("tw-size-4 tw-transition-transform", isExpanded && "tw-rotate-180")
           }
         )
       ]
@@ -12858,19 +12956,19 @@ var CollapsibleStepHeader = ({
 var InlineStepDetail = ({ children }) => /* @__PURE__ */ jsx("div", { className: "tw-ml-2.5 tw-whitespace-pre-wrap tw-border-l tw-border-neutral-200 tw-pl-3 tw-text-xs tw-text-neutral-400", children });
 var renderVariantIcon2 = (variant) => {
   if (variant === "processing") {
-    return /* @__PURE__ */ jsx(Icon, { icon: "spinner", spin: true, className: "tw-size-3 tw-text-neutral-200" });
+    return /* @__PURE__ */ jsx(Loader2, { className: "tw-size-4 tw-animate-spin tw-text-neutral-200" });
   }
   if (variant === "error") {
-    return /* @__PURE__ */ jsx(Icon, { icon: "circle-xmark", className: "tw-size-3 tw-text-error-500" });
+    return /* @__PURE__ */ jsx(XCircle, { className: "tw-size-4 tw-text-error-500" });
   }
   if (variant === "dismissed") {
-    return /* @__PURE__ */ jsx(Icon, { icon: "circle-xmark", className: "tw-size-3 tw-text-neutral-200" });
+    return /* @__PURE__ */ jsx(XCircle, { className: "tw-size-4 tw-text-neutral-200" });
   }
-  return /* @__PURE__ */ jsx(Icon, { icon: "circle-check", className: "tw-size-3 tw-text-neutral-200" });
+  return /* @__PURE__ */ jsx(CircleCheck, { className: "tw-size-4 tw-text-neutral-200" });
 };
-var InlineStepLabel = ({ variant, children }) => /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [
+var InlineStepLabel = ({ variant, children }) => /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-min-w-0 tw-items-center tw-gap-1", children: [
   /* @__PURE__ */ jsx("div", { className: "tw-flex tw-size-5 tw-shrink-0 tw-items-center tw-justify-center", children: renderVariantIcon2(variant) }),
-  /* @__PURE__ */ jsx("div", { className: "tw-flex tw-flex-wrap tw-items-center tw-gap-x-1.5 tw-gap-y-1 tw-text-sm tw-font-medium tw-italic tw-text-neutral-800", children })
+  /* @__PURE__ */ jsx("div", { className: "tw-flex tw-min-w-0 tw-flex-wrap tw-items-center tw-gap-x-1.5 tw-gap-y-1 tw-text-sm tw-font-medium tw-italic tw-text-neutral-800", children })
 ] });
 var SECTION_LABELS = {
   success: "Answered questions",
@@ -12924,7 +13022,7 @@ var contentClasses = cva(
   {
     variants: {
       variant: {
-        assistant: ["tw-flex-1", "tw-w-full", "tw-min-w-0"],
+        assistant: ["tw-flex-1", "tw-w-full", "tw-min-w-0", "[&>*]:tw-min-w-0"],
         user: [
           "tw-max-w-screen-sm",
           "tw-w-fit",
@@ -12985,10 +13083,9 @@ var ExpandToggle = ({
     children: [
       /* @__PURE__ */ jsx("span", { children: isExpanded ? showLessLabel : showMoreLabel }),
       /* @__PURE__ */ jsx(
-        Icon,
+        ChevronDown$1,
         {
-          icon: "chevron-down",
-          className: cn("tw-size-3 tw-transition-transform", isExpanded && "tw-rotate-180")
+          className: cn("tw-size-5 tw-transition-transform", isExpanded && "tw-rotate-180")
         }
       )
     ]
@@ -13094,11 +13191,11 @@ var PlanApproval = ({
               argo: true,
               variant: "outline",
               size: "icon-sm",
-              icon: ["far", "xmark"],
               "aria-label": closeLabel,
               onClick: onClose,
               disabled: isSubmitting,
-              "data-testid": "plan-close-button"
+              "data-testid": "plan-close-button",
+              children: /* @__PURE__ */ jsx(X, { className: "tw-size-4" })
             }
           )
         ] }),
@@ -13142,11 +13239,11 @@ var PlanApproval = ({
                   type: "submit",
                   variant: "invisible",
                   size: "icon-sm",
-                  icon: "paper-plane-top",
                   "aria-label": changeRequestSubmitLabel,
                   disabled: !canSubmitChangeRequest,
                   className: "tw-absolute tw-right-2 tw-top-1/2 tw--translate-y-1/2 [&_svg]:tw-text-secondary-500 not-disabled:hover:[&_svg]:tw-text-secondary-600",
-                  "data-testid": "plan-change-request-submit"
+                  "data-testid": "plan-change-request-submit",
+                  children: /* @__PURE__ */ jsx(Send, { className: "tw-size-4" })
                 }
               )
             ] })
@@ -13222,7 +13319,7 @@ var PlanRewritingIndicator = ({
     role: "status",
     "data-testid": "plan-rewriting-indicator",
     children: [
-      /* @__PURE__ */ jsx(Icon, { icon: "spinner", spin: true, className: "tw-size-4 tw-text-secondary-500" }),
+      /* @__PURE__ */ jsx(Loader2, { className: "tw-size-4 tw-animate-spin tw-text-secondary-500" }),
       /* @__PURE__ */ jsx("span", { className: "tw-text-sm tw-italic tw-text-secondary-500", children: label })
     ]
   }
@@ -13243,11 +13340,11 @@ var PromptInputSubmit = ({
   disabled,
   status = "ready"
 }) => {
-  const getIcon = () => {
-    if (status === "streaming") return "stop-circle";
-    if (status === "interrupted") return "play";
-    return "paper-plane-top";
-  };
+  const icon = (() => {
+    if (status === "streaming") return /* @__PURE__ */ jsx(CirclePause, { className: "tw-size-4" });
+    if (status === "interrupted") return /* @__PURE__ */ jsx(Play, { className: "tw-size-4" });
+    return /* @__PURE__ */ jsx(Send, { className: "tw-size-4" });
+  })();
   const getTooltipText = () => {
     if (status === "streaming") return "Stop";
     if (status === "interrupted") return "Continue";
@@ -13263,8 +13360,8 @@ var PromptInputSubmit = ({
         size: "icon-sm",
         variant: "invisible",
         isLoading: status === "submitted",
-        icon: getIcon(),
-        className: "tw-ml-auto tw-flex tw-items-center tw-rounded-lg [&_svg]:tw-text-secondary-500 not-disabled:hover:[&_svg]:tw-text-secondary-600"
+        className: "tw-ml-auto tw-flex tw-items-center tw-rounded-lg [&_svg]:tw-text-secondary-500 not-disabled:hover:[&_svg]:tw-text-secondary-600",
+        children: status !== "submitted" && icon
       }
     ) }) }),
     getTooltipText() && /* @__PURE__ */ jsx(Tooltip.Content, { placement: "top", variant: "action", children: getTooltipText() })
@@ -13514,10 +13611,10 @@ var Question = ({
               argo: true,
               variant: "outline",
               size: "icon-sm",
-              icon: ["far", "xmark"],
               "aria-label": "Close",
               onClick: onClose,
-              "data-testid": "question-close-button"
+              "data-testid": "question-close-button",
+              children: /* @__PURE__ */ jsx(X, { className: "tw-size-4" })
             }
           )
         ] }),
@@ -13626,11 +13723,10 @@ var Question = ({
                       onClick: onPrevious,
                       "aria-label": "Previous step",
                       children: /* @__PURE__ */ jsx(
-                        Icon,
+                        ChevronLeft,
                         {
-                          icon: "chevron-left",
                           className: cn(
-                            "tw-size-4",
+                            "tw-size-5",
                             isFirstStep ? "tw-text-primary/25" : "tw-text-primary"
                           )
                         }
@@ -13651,11 +13747,10 @@ var Question = ({
                       onClick: onNext,
                       "aria-label": "Next step",
                       children: /* @__PURE__ */ jsx(
-                        Icon,
+                        ChevronRight,
                         {
-                          icon: "chevron-right",
                           className: cn(
-                            "tw-size-4",
+                            "tw-size-5",
                             currentStep === totalSteps ? "tw-text-primary/25" : "tw-text-primary"
                           )
                         }
@@ -13755,11 +13850,18 @@ var SuggestedPrompt = ({ label, disabled, onClick, icon, className }) => {
       onClick,
       children: [
         icon ?? /* @__PURE__ */ jsx(
-          Icon,
+          FileText,
           {
-            className: "group-not-disabled:group-hover:[&_path]:tw-fill-secondary-600 tw-size-4 tw-shrink-0 tw-basis-4 [&_path]:tw-fill-aigradient-600",
-            fixedWidth: true,
-            icon: ["far", "file-lines"]
+            className: cn(
+              "tw-size-4 tw-shrink-0 tw-basis-4",
+              // Lucide icons are stroke-based — paint the visible line with the
+              // AI gradient (no fill, so the glyph keeps its outline silhouette
+              // instead of becoming a solid block). The `*` selector catches
+              // every shape element (path, circle, polyline, …) so multi-part
+              // icons don't lose sub-shapes the way `path`-only selectors do.
+              "[&_*]:tw-stroke-aigradient-600",
+              "group-not-disabled:group-hover:[&_*]:tw-stroke-secondary-600"
+            )
           }
         ),
         /* @__PURE__ */ jsx("div", { className: "tw-whitespace-normal tw-text-left", children: label })
@@ -13769,7 +13871,7 @@ var SuggestedPrompt = ({ label, disabled, onClick, icon, className }) => {
 };
 var ThinkingIndicator = ({ label = "Thinking..." }) => {
   return /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-items-center tw-gap-2", "data-testid": "chat-thinking-indicator", children: [
-    /* @__PURE__ */ jsx(Icon, { icon: "spinner", spin: true, className: "tw-size-4 tw-text-secondary-500" }),
+    /* @__PURE__ */ jsx(Loader2, { className: "tw-size-4 tw-animate-spin tw-text-secondary-500" }),
     /* @__PURE__ */ jsx("span", { className: "tw-text-sm tw-italic tw-text-secondary-500", children: label })
   ] });
 };
@@ -13839,15 +13941,15 @@ var AutoSaveTextarea = ({
                 " / ",
                 maxLength
               ] }),
-              /* @__PURE__ */ jsxs("span", { className: "tw-text-neutral-400", children: [
+              /* @__PURE__ */ jsxs("span", { className: "tw-flex tw-items-center tw-gap-1 tw-text-neutral-400", children: [
                 isOverLimit && "Character limit exceeded",
                 !isOverLimit && isChanged && !isSaving && "Unsaved",
                 !isOverLimit && isChanged && isSaving && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(Icon, { spin: true, icon: "spinner", className: "tw-mr-1" }),
+                  /* @__PURE__ */ jsx(Loader2, { className: "tw-size-4 tw-animate-spin" }),
                   " Saving"
                 ] }),
                 !isOverLimit && value !== null && !isChanged && !isSaving && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(Icon, { icon: "check-circle", className: "tw-text-primary-500" }),
+                  /* @__PURE__ */ jsx(CircleCheck, { className: "tw-size-4 tw-text-primary-500" }),
                   " Saved"
                 ] })
               ] })
@@ -13956,30 +14058,23 @@ var PasswordInput = ({
           }
         ),
         (capsLock || canClear || allowPasswordToggle) && /* @__PURE__ */ jsxs(InputGroup.Addon, { align: "inline-end", children: [
-          capsLock && /* @__PURE__ */ jsx(
-            Icon,
-            {
-              icon: "up-from-line",
-              title: "Caps Lock is on",
-              className: "tw-size-4 tw-text-primary"
-            }
-          ),
+          capsLock && /* @__PURE__ */ jsx(ArrowBigUpDash, { className: "tw-size-4 tw-text-primary", children: /* @__PURE__ */ jsx("title", { children: "Caps Lock is on" }) }),
           canClear && /* @__PURE__ */ jsx(
             InputGroup.Button,
             {
-              icon: "xmark",
               "aria-label": "Clear password",
               onMouseDown: (event) => event.preventDefault(),
-              onClick: handleClear
+              onClick: handleClear,
+              children: /* @__PURE__ */ jsx(X, { className: "tw-size-4" })
             }
           ),
           allowPasswordToggle && /* @__PURE__ */ jsx(
             InputGroup.Button,
             {
-              icon: isPasswordVisible ? "eye-slash" : "eye",
               "aria-label": isPasswordVisible ? "Hide password" : "Show password",
               onMouseDown: (event) => event.preventDefault(),
-              onClick: handleTogglePasswordVisibility
+              onClick: handleTogglePasswordVisibility,
+              children: isPasswordVisible ? /* @__PURE__ */ jsx(EyeOff, { className: "tw-size-4" }) : /* @__PURE__ */ jsx(Eye, { className: "tw-size-4" })
             }
           )
         ] })
@@ -14349,10 +14444,10 @@ var ZoomableSvg = ({ html, copyText, className }) => {
                     {
                       size: "icon-sm",
                       variant: "outline",
-                      icon: isFullscreen ? "down-left-and-up-right-to-center" : "up-right-and-down-left-from-center",
                       "aria-label": isFullscreen ? "Exit fullscreen" : "Fullscreen",
                       onClick: () => setIsFullscreen((f) => !f),
-                      argo: true
+                      argo: true,
+                      children: isFullscreen ? /* @__PURE__ */ jsx(Minimize2, { className: "tw-size-4" }) : /* @__PURE__ */ jsx(Maximize2, { className: "tw-size-4" })
                     }
                   )
                 }
@@ -14453,6 +14548,6 @@ function useAutosizeInput({
   return { inputRef, inputStyle, sizerElement };
 }
 
-export { Alert, AnswerSummary, AutoSaveTextarea, Avatar, Badge, Breadcrumb, Button, ButtonGroup, ButtonInline, 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, Link, MarkedText, MergeEditor, MessageBubble, Modal, MultiActionButtonGroup, MultiCombobox, Navbar, NumberInput, PageHeader, PageLayout, Pagination, PaneHeader, PanelWithDetails, PasswordInput, PlanApproval, PlanRewritingIndicator, Popconfirm, Popover, Progress, PromptInput, Question, QuestionBlock, RadioGroup, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Search, SearchForm, SearchInput, SearchInputWithNavigation, Select, Separator, Sheet, Sidebar, SidebarProvider, Skeleton, SkeletonList, Slider, SplitButton, SqlEditor, SuggestedPrompt, Switch, 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, 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