@keboola/design 1.2.0 → 1.3.0

package/dist/index.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var reactSlot = require('@radix-ui/react-slot');
+var lucideReact = require('lucide-react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var react = require('react');
@@ -26,6 +27,7 @@ var reactCheckbox = require('@radix-ui/react-checkbox');
 var DropdownMenuPrimitive3 = require('@radix-ui/react-dropdown-menu');
 var DialogPrimitive = require('@radix-ui/react-dialog');
 var reactDom = require('react-dom');
+var icons$1 = require('@keboola/design/icons');
 var reactCollapsible = require('@radix-ui/react-collapsible');
 var cmdk = require('cmdk');
 var combobox = require('@base-ui/react/combobox');
@@ -575,12 +577,10 @@ var argoVariants = classVarianceAuthority.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
@@ -643,7 +643,6 @@ var Button = ({
   disabled = false,
   className,
   type = "button",
-  icon: iconProp,
   isLoading = false,
   asChild = false,
   onClick,
@@ -651,10 +650,10 @@ var Button = ({
   variant = "primary",
   size = "medium",
   block = false,
+  icon,
   ...buttonProps
 }) => {
   const Comp = asChild ? reactSlot.Root : "button";
-  const icon = isLoading ? "spinner" : iconProp;
   const classNames = argo ? argoVariants({ variant, size, block, className }) : variants({
     size,
     variant,
@@ -677,12 +676,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__ */ jsxRuntime.jsx(Icon, { spin: isLoading, icon }),
+        isLoading && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "tw-size-4 tw-shrink-0 tw-animate-spin" }),
+        !isLoading && icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon }),
         /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slottable, { children })
       ]
     }
@@ -822,7 +822,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 = reactDayPicker.getDefaultClassNames();
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactDayPicker.DayPicker,
@@ -844,7 +844,7 @@ var Calendar = ({ className, classNames, ...props }) => {
     }
   );
 };
-Calendar.displayName = "Calendar";
+Calendar2.displayName = "Calendar";
 var variants2 = classVarianceAuthority.cva(
   [
     "tailwindcss-preflight",
@@ -946,7 +946,7 @@ var DatePicker = ({
       alignOffset,
       className: "tw-w-auto tw-p-0",
       sideOffset,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Calendar, { ...calendarProps })
+      children: /* @__PURE__ */ jsxRuntime.jsx(Calendar2, { ...calendarProps })
     }
   )
 ] });
@@ -1570,10 +1570,11 @@ var Input = ({
           allowClear && isClearButtonVisible && /* @__PURE__ */ jsxRuntime.jsx(
             InputGroup.Button,
             {
-              icon: "xmark",
+              "aria-label": "Clear",
               onMouseDown: (e) => e.preventDefault(),
               onClick: handleClear,
-              "data-testid": testId.clearButton
+              "data-testid": testId.clearButton,
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "tw-size-4" })
             }
           ),
           rightSuffix && /* @__PURE__ */ jsxRuntime.jsx(
@@ -1726,7 +1727,7 @@ var DateInput = ({
           open: isOpen,
           selected: currentValue ?? void 0,
           startMonth,
-          children: /* @__PURE__ */ jsxRuntime.jsx(Button, { "aria-label": "Select Date", icon: "calendar", variant: "inline", size: "icon-3xs" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(Button, { "aria-label": "Select Date", variant: "inline", size: "icon-3xs", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "tw-size-4" }) })
         }
       ) : void 0,
       type: "text"
@@ -1853,15 +1854,7 @@ var DateRangeInput = ({
           open: isOpen,
           startMonth,
           selected: currentValue ?? void 0,
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              "aria-label": "Select Date Range",
-              icon: "calendar",
-              variant: "inline",
-              size: "icon-3xs"
-            }
-          )
+          children: /* @__PURE__ */ jsxRuntime.jsx(Button, { "aria-label": "Select Date Range", variant: "inline", size: "icon-3xs", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "tw-size-4" }) })
         }
       ) : void 0,
       type: "text"
@@ -1970,7 +1963,7 @@ var TimeInput = ({
           onOpenChange: handleOpenChange,
           onSelect: handleTimePickerSelect,
           selected: currentValue,
-          children: /* @__PURE__ */ jsxRuntime.jsx(Button, { "aria-label": "Select Time", icon: "clock", variant: "inline", size: "icon-3xs" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(Button, { "aria-label": "Select Time", variant: "inline", size: "icon-3xs", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "tw-size-4" }) })
         }
       ) : void 0
     }
@@ -2563,21 +2556,7 @@ var Radio = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
       "focus-visible:tw-ring-secondary-200",
       className
     ),
-    children: /* @__PURE__ */ jsxRuntime.jsx(
-      RRadioGroup.Indicator,
-      {
-        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__ */ jsxRuntime.jsx(RRadioGroup.Indicator, { className: cn("tw-flex", "tw-items-center", "tw-justify-center"), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Circle, { className: "tw-size-2.5 tw-fill-current tw-text-primary" }) })
   }
 );
 var RadioGroupItemButton = ({
@@ -2935,7 +2914,7 @@ var ClearButton = ({ onClick, testId }) => {
         "hover:tw-text-neutral-800"
       ),
       "data-testid": testId,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "tw-size-4", icon: "xmark" })
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "tw-size-4" })
     }
   );
 };
@@ -3028,7 +3007,7 @@ var genSearchTestId = (prefix = "") => {
     clearButton: ps`search-clear-button`
   };
 };
-var Search = ({
+var Search2 = ({
   ref,
   suffix,
   className,
@@ -3087,7 +3066,7 @@ var Search = ({
       ),
       "data-testid": testId.wrapper,
       children: [
-        variant === "ai" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: ["far", "sparkles"], className: "[&_path]:tw-fill-aigradient-600" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "tw-text-base tw-text-neutral-400", icon: "magnifying-glass" }),
+        variant === "ai" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "tw-size-4 [&_*]:tw-stroke-aigradient-600" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "tw-size-4 tw-text-neutral-400" }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
@@ -3125,7 +3104,7 @@ var SearchForm = ({
     onSubmit("");
   };
   return /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit: handleSubmit, children: /* @__PURE__ */ jsxRuntime.jsx(
-    Search,
+    Search2,
     {
       ...props,
       ref,
@@ -3141,7 +3120,7 @@ var scrollButtonStyles = cn(
   "tw-justify-center",
   "tw-rounded-sm",
   "tw-p-1",
-  "[&_svg]:tw-size-3"
+  "[&_svg]:tw-size-5"
 );
 var SelectContent = ({
   ref,
@@ -3197,7 +3176,7 @@ var SelectContent = ({
       className
     ),
     children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ScrollUpButton, { className: scrollButtonStyles, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: "chevron-up" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ScrollUpButton, { className: scrollButtonStyles, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, {}) }),
       /* @__PURE__ */ jsxRuntime.jsx(
         SelectPrimitive__namespace.Viewport,
         {
@@ -3207,11 +3186,13 @@ var SelectContent = ({
           children
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ScrollDownButton, { className: scrollButtonStyles, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: "chevron-down" }) })
+      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ScrollDownButton, { className: scrollButtonStyles, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, {}) })
     ]
   }
 ) });
 var SelectGroup = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.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__ */ jsxRuntime.jsx(Icon, { icon: value }) : value;
 var SelectItem = ({
   ref,
   className,
@@ -3259,9 +3240,9 @@ var SelectItem = ({
       className
     ),
     children: [
-      icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon }),
+      renderLegacyIcon(icon),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-flex-1 tw-truncate", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemText, { children }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { className: "tw-pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: "check", className: "tw-size-4" }) })
+      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { className: "tw-pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "tw-size-4" }) })
     ]
   }
 );
@@ -3436,7 +3417,7 @@ var SelectTrigger = ({
     ...props,
     children: [
       /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Value, { placeholder }),
-      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: "chevron-down", className: "tw-size-3.5 tw-text-muted-foreground" }) })
+      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "tw-size-5 tw-text-muted-foreground" }) })
     ]
   }
 );
@@ -3602,14 +3583,8 @@ function Checkbox({
   const id = idProp?.toString() ?? fallbackId;
   const styleVariant = argo ? "argo" : "default";
   const checkboxElement = /* @__PURE__ */ jsxRuntime.jsx(reactCheckbox.Root, { id, ...rest, className: cn(rootVariants({ variant: styleVariant, className })), children: /* @__PURE__ */ jsxRuntime.jsxs(reactCheckbox.Indicator, { className: cn(indicatorVariants({ variant: styleVariant })), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: "check", className: "tw-hidden tw-size-3 group-data-[state=checked]:tw-block" }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Icon,
-      {
-        icon: "minus",
-        className: "tw-hidden tw-size-3 group-data-[state=indeterminate]:tw-block"
-      }
-    )
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "tw-hidden tw-size-3 tw-stroke-[4px] group-data-[state=checked]:tw-block" }),
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: "tw-hidden tw-size-3 tw-stroke-[4px] group-data-[state=indeterminate]:tw-block" })
   ] }) });
   const rendered = !children ? checkboxElement : /* @__PURE__ */ jsxRuntime.jsxs(FieldBox, { htmlFor: id, variant, position, control: checkboxElement, children: [
     /* @__PURE__ */ jsxRuntime.jsx(FieldBox.Title, { children }),
@@ -3643,6 +3618,9 @@ var variants4 = classVarianceAuthority.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"
         ],
@@ -3662,6 +3640,9 @@ var variants4 = classVarianceAuthority.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",
@@ -3677,10 +3658,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 lucideReact.ToggleRight;
+    if (variant === "radio") return lucideReact.Circle;
+    return lucideReact.Check;
   })();
   const forceMount = (() => {
     if (forceMountProp) return true;
@@ -3693,24 +3674,30 @@ var DropdownMenuItemIndicator = ({
       ...rest,
       forceMount,
       className: variants4({ variant, className }),
-      children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon })
+      children: /* @__PURE__ */ jsxRuntime.jsx(IconComp, {})
     }
   );
 };
-var ItemIcon = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-  Icon,
+var ItemIcon = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.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
   }
 );
 
@@ -3791,7 +3778,7 @@ var DropdownMenuCheckboxItem = ({
   ...props
 }) => {
   const isAtStart = indicatorAlign === "start";
-  const indicatorEle = isLoading ? /* @__PURE__ */ jsxRuntime.jsx(ItemIcon, { spin: true, icon: "spinner", className: isAtStart ? "" : "tw-ml-auto" }) : /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItemIndicator, { variant: indicator, className: isAtStart ? "" : "tw-ml-auto" });
+  const indicatorEle = isLoading ? /* @__PURE__ */ jsxRuntime.jsx(ItemIcon, { className: isAtStart ? "" : "tw-ml-auto", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "tw-animate-spin" }) }) : /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItemIndicator, { variant: indicator, className: isAtStart ? "" : "tw-ml-auto" });
   const handleSelect = (event) => {
     if (!closeOnSelect) event.preventDefault();
     onSelect?.(event);
@@ -3857,13 +3844,13 @@ var DropdownMenuItem = ({
   onPointerMove,
   children,
   asChild,
-  icon: iconProp,
+  icon,
   iconClassName,
   isLoading = false,
   ...props
 }) => {
   const Comp = asChild ? reactSlot.Root : "div";
-  const icon = isLoading ? "spinner" : iconProp;
+  const adornment = isLoading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "tw-animate-spin" }) : renderLegacyIcon(icon);
   const handleOnSelect = (event) => {
     if (asModalTrigger) event.preventDefault();
     onSelect?.(event);
@@ -3887,7 +3874,7 @@ var DropdownMenuItem = ({
       className: cn(itemVariants, className),
       asChild: true,
       children: /* @__PURE__ */ jsxRuntime.jsxs(Comp, { children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx(ItemIcon, { spin: isLoading, icon, className: iconClassName }),
+        adornment && /* @__PURE__ */ jsxRuntime.jsx(ItemIcon, { className: iconClassName, children: adornment }),
         /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slottable, { children })
       ] })
     }
@@ -3968,7 +3955,7 @@ var DropdownMenuRadioItem = ({
   ...props
 }) => {
   const isAtStart = indicatorAlign === "start";
-  const indicatorEle = isLoading ? /* @__PURE__ */ jsxRuntime.jsx(ItemIcon, { spin: true, icon: "spinner", className: iconClassName }) : /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItemIndicator, { variant: indicator });
+  const indicatorEle = isLoading ? /* @__PURE__ */ jsxRuntime.jsx(ItemIcon, { className: iconClassName, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "tw-animate-spin" }) }) : /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItemIndicator, { variant: indicator });
   const handleSelect = (event) => {
     if (!closeOnSelect) event.preventDefault();
     onSelect?.(event);
@@ -3989,7 +3976,7 @@ var DropdownMenuRadioItem = ({
       ...props,
       children: [
         isAtStart && indicatorEle,
-        icon && /* @__PURE__ */ jsxRuntime.jsx(ItemIcon, { icon, className: iconClassName }),
+        icon && /* @__PURE__ */ jsxRuntime.jsx(ItemIcon, { className: iconClassName, children: renderLegacyIcon(icon) }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-flex tw-min-w-0 tw-flex-1 tw-items-center tw-gap-2", children }),
         !isAtStart && indicatorEle
       ]
@@ -4035,7 +4022,7 @@ var DropdownMenuSubContent = ({ className, ...props }) => {
 var DropdownMenuSubTrigger = ({ className, children, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuPrimitive3__namespace.SubTrigger, { className: cn(itemVariants, className), ...props, children: [
     children,
-    /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: "chevron-right", className: "tw-ml-auto" })
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "tw-ml-auto tw-size-5" })
   ] });
 };
 var DropdownMenuTrigger = ({
@@ -4207,9 +4194,8 @@ var ModalCloseIcon = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsxs
     ),
     children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        Icon,
+        lucideReact.X,
         {
-          icon: "close",
           className: cn(
             "tw-size-4",
             "tw-text-neutral-400",
@@ -4276,7 +4262,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] = react.useState(false);
   if ("iconUrl" in props && hasImageError) {
     return null;
@@ -4297,14 +4283,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__ */ jsxRuntime.jsx(
             "span",
             {
@@ -4317,19 +4303,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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { icon: props.icon, spin: props.spin }) : props.icon
             }
           )
         }
@@ -4431,7 +4413,7 @@ var FullScreenModalHeader = ({
       ...props,
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("tw-flex tw-flex-1 tw-items-center", titleWrapperClassName), children: [
-          previousTitle && onClose && /* @__PURE__ */ jsxRuntime.jsx(Button, { icon: "angle-left", onClick: onClose, size: "icon", className: "tw-mr-6" }),
+          previousTitle && onClose && /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: onClose, size: "icon", className: "tw-mr-6", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "tw-size-4" }) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-w-full", children: /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
@@ -4691,9 +4673,14 @@ var SplitButtonBase = ({
   isActionsOpen,
   onActionsOpenChange,
   argo = false,
+  icon,
+  children,
   ...rest
 }) => /* @__PURE__ */ jsxRuntime.jsxs(ButtonGroup, { space: "compact", children: [
-  /* @__PURE__ */ jsxRuntime.jsx(Button, { ...rest, ref, disabled, variant, size, argo }),
+  /* @__PURE__ */ jsxRuntime.jsxs(Button, { ...rest, ref, disabled, variant, size, argo, children: [
+    !rest.isLoading && renderLegacyIcon(icon),
+    children
+  ] }),
   actions && /* @__PURE__ */ jsxRuntime.jsxs(
     DropdownMenu,
     {
@@ -4707,8 +4694,8 @@ var SplitButtonBase = ({
             argo,
             size: iconSizeMap[size],
             variant,
-            icon: "caret-down",
-            "aria-label": "Additional actions"
+            "aria-label": "Additional actions",
+            children: /* @__PURE__ */ jsxRuntime.jsx(icons$1.ChevronDown, { className: "tw-size-5" })
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Content, { align: "end", children: actions })
@@ -5305,7 +5292,7 @@ var SidebarGroupAction = ({
   ref,
   className,
   type = "button",
-  icon,
+  children,
   ...props
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   "button",
@@ -5327,6 +5314,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",
@@ -5335,7 +5326,7 @@ var SidebarGroupAction = ({
       "focus-visible:tw-outline-secondary-500",
       className
     ),
-    children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon, className: "tw-size-3 tw-text-neutral-400 hover:tw-text-secondary-600" })
+    children
   }
 );
 var SidebarGroupLabel = ({
@@ -5453,22 +5444,25 @@ var SidebarMenu = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
 var SidebarMenuIcon = ({
   ref,
   className,
-  icon,
+  children,
   ...rest
 }) => /* @__PURE__ */ jsxRuntime.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 = ({
@@ -5541,7 +5535,7 @@ var SidebarMenuButton = ({
       ),
       tabIndex: 0,
       children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx(SidebarMenuIcon, { icon }),
+        icon && /* @__PURE__ */ jsxRuntime.jsx(SidebarMenuIcon, { children: renderLegacyIcon(icon) }),
         /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slottable, { children })
       ]
     }
@@ -5643,15 +5637,13 @@ var SidebarSearchInput = ({
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(wrapperClassnames, className), children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      Icon,
+      lucideReact.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"
         )
@@ -5742,7 +5734,7 @@ var SidebarMenuCard = ({ children, className, icon, title, ...rest }) => {
         ),
         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(Title3, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SidebarMenuIcon, { className: "tw-p-px", icon }),
+            /* @__PURE__ */ jsxRuntime.jsx(SidebarMenuIcon, { className: "tw-p-px", children: renderLegacyIcon(icon) }),
             title
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(Content8, { className, children })
@@ -5907,13 +5899,7 @@ var SidebarMenuSub = ({
         ),
         children: [
           label,
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Icon,
-            {
-              icon: ["far", "angle-down"],
-              className: "tw-ml-auto tw-transition-transform tw-duration-200 group-data-[state=open]:tw-rotate-180"
-            }
-          )
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "tw-ml-auto tw-size-5 tw-transition-transform tw-duration-200 group-data-[state=open]:tw-rotate-180" })
         ]
       }
     ) }),
@@ -6368,9 +6354,8 @@ var CheckIndicator = ({ variant = "default" }) => {
   if (variant === "default") return null;
   if (variant === "argo") {
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Icon,
+      lucideReact.Check,
       {
-        icon: "check",
         className: cn(
           // visibility
           "tw-hidden",
@@ -6410,17 +6395,30 @@ var CheckIndicator = ({ variant = "default" }) => {
         "data-[variant=checkbox]:group-data-[checked=true]/command-item:tw-bg-secondary-500",
         "tw-shrink-0"
       ),
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        Icon,
+      children: variant === "checkbox" ? /* @__PURE__ */ jsxRuntime.jsx(
+        lucideReact.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__ */ jsxRuntime.jsx(
+        lucideReact.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"
+          )
         }
       )
     }
@@ -6476,7 +6474,7 @@ var CommandItem = ({
       ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(CheckIndicator, { variant }),
-        icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon, className: "tw-size-4 tw-shrink-0 tw-text-neutral-400" }),
+        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-inline-flex tw-size-4 tw-shrink-0 tw-items-center tw-justify-center tw-text-neutral-400 [&_svg]:tw-size-4", children: icon }),
         children
       ]
     }
@@ -6599,8 +6597,8 @@ var BadgeAddon = ({
 var BadgeButton = ({
   ref,
   className,
-  icon,
   type = "button",
+  children,
   ...rest
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   "button",
@@ -6618,9 +6616,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__ */ jsxRuntime.jsx(Icon, { icon })
+    children
   }
 );
 var BadgeLabel = ({
@@ -6834,7 +6836,7 @@ var ComboboxChips = ({
           /* @__PURE__ */ jsxRuntime.jsx(Badge.Addon, { variant: "inline", align: "inline-end", children: /* @__PURE__ */ jsxRuntime.jsx(
             combobox.Combobox.ChipRemove,
             {
-              render: /* @__PURE__ */ jsxRuntime.jsx(Badge.Button, { icon: "xmark", "aria-label": "Remove value" })
+              render: /* @__PURE__ */ jsxRuntime.jsx(Badge.Button, { "aria-label": "Remove value", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "tw-size-3" }) })
             }
           ) })
         ]
@@ -6994,12 +6996,12 @@ var ComboboxItemIndicator = ({
         ),
         ...props,
         children: /* @__PURE__ */ jsxRuntime.jsx(
-          Icon,
+          lucideReact.Check,
           {
-            icon: "check",
             className: cn(
               "tw-hidden",
               "tw-size-3",
+              "tw-stroke-[4px]",
               "!tw-text-white",
               "group-data-[selected]/combobox-item-indicator:tw-block"
             )
@@ -7018,12 +7020,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__ */ jsxRuntime.jsx(Icon, { icon: "check" })
+      render: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, {})
     }
   );
 };
@@ -7076,7 +7080,7 @@ var ComboboxItem = ({
     ),
     children: [
       /* @__PURE__ */ jsxRuntime.jsx(ComboboxItemIndicator, { variant }),
-      icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon }),
+      icon,
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-truncate", children })
     ]
   }
@@ -7311,17 +7315,8 @@ var Combobox = ({
               prefix && /* @__PURE__ */ jsxRuntime.jsx(InputGroup.Addon, { align: "inline-start", children: prefix }),
               /* @__PURE__ */ jsxRuntime.jsx(ComboboxInput, { id, placeholder, disabled }),
               /* @__PURE__ */ jsxRuntime.jsxs(InputGroup.Addon, { align: "inline-end", children: [
-                allowClear && /* @__PURE__ */ jsxRuntime.jsx(InputGroup.Button, { asChild: true, icon: "xmark", "aria-label": "Clear", disabled, children: /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Clear, {}) }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  InputGroup.Button,
-                  {
-                    disabled,
-                    asChild: true,
-                    icon: "chevron-down",
-                    "aria-label": "Open combobox",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Trigger, {})
-                  }
-                )
+                allowClear && /* @__PURE__ */ jsxRuntime.jsx(InputGroup.Button, { asChild: true, "aria-label": "Clear", disabled, children: /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Clear, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "tw-size-4" }) }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(InputGroup.Button, { disabled, asChild: true, "aria-label": "Open combobox", children: /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "tw-size-4" }) }) })
               ] })
             ]
           }
@@ -7330,11 +7325,11 @@ var Combobox = ({
           /* @__PURE__ */ jsxRuntime.jsx(ComboboxEmpty, { children: empty }),
           /* @__PURE__ */ jsxRuntime.jsx(ComboboxList, { children: (itemOrGroup) => {
             if (isCreatableItem(itemOrGroup))
-              return /* @__PURE__ */ jsxRuntime.jsx(Combobox.Item, { value: itemOrGroup, icon: "plus", children: queryToCreateLabel(itemOrGroup.value) });
+              return /* @__PURE__ */ jsxRuntime.jsx(Combobox.Item, { value: itemOrGroup, icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, {}), children: queryToCreateLabel(itemOrGroup.value) });
             if (isGroupItem(itemOrGroup)) {
               const maybeCreatable = itemOrGroup.items[0];
               if (isCreatableItem(maybeCreatable)) {
-                return /* @__PURE__ */ jsxRuntime.jsx(Combobox.Item, { value: maybeCreatable, icon: "plus", children: queryToCreateLabel(maybeCreatable.value) });
+                return /* @__PURE__ */ jsxRuntime.jsx(Combobox.Item, { value: maybeCreatable, icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, {}), children: queryToCreateLabel(maybeCreatable.value) });
               }
               const groupLabel = groupToLabel(itemOrGroup);
               return /* @__PURE__ */ jsxRuntime.jsxs(Combobox.Group, { items: itemOrGroup.items, children: [
@@ -7392,7 +7387,7 @@ var BreadcrumbEllipsis = ({
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: ["far", "ellipsis"], className: "tw-size-4" }),
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Ellipsis, { className: "tw-size-4" }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-sr-only", children: "More" })
     ]
   }
@@ -7486,7 +7481,7 @@ var BreadcrumbSeparator = ({ children, className, ...props }) => /* @__PURE__ */
       className
     ),
     ...props,
-    children: children ?? /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: "chevron-right" })
+    children: children ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "!tw-size-4" })
   }
 );
 var Breadcrumb = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "breadcrumb", className: cn("tailwindcss-preflight", className), ...props });
@@ -7711,7 +7706,7 @@ var NavbarMenuButton = ({
   className,
   type = "button",
   children,
-  icon: iconProp,
+  icon,
   asChild = false,
   variant = "default",
   ...rest
@@ -7719,7 +7714,7 @@ var NavbarMenuButton = ({
   const Comp = asChild ? reactSlot.Root : "button";
   const isSearchVariant = variant === "search";
   const isEmphasizedVariant = variant === "emphasized";
-  const icon = isSearchVariant ? "search" : iconProp;
+  const adornment = isSearchVariant ? /* @__PURE__ */ jsxRuntime.jsx(icons$1.Search, {}) : renderLegacyIcon(icon);
   const adornmentVariant = (() => {
     if (isSearchVariant || variant === "icon") return "icon-button";
     if (isEmphasizedVariant) return "icon-accent-emphasized";
@@ -7734,7 +7729,7 @@ var NavbarMenuButton = ({
       "data-variant": variant,
       className: design.cn(variants7({ className, variant })),
       children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx(NavbarMenuItemAdornment, { asChild: true, variant: adornmentVariant, children: /* @__PURE__ */ jsxRuntime.jsx(design.Icon, { icon }) }),
+        adornment && /* @__PURE__ */ jsxRuntime.jsx(NavbarMenuItemAdornment, { variant: adornmentVariant, children: adornment }),
         /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slottable, { children })
       ]
     }
@@ -7839,22 +7834,27 @@ var PaginationEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: ["far", "ellipsis"] })
+    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Ellipsis, {})
   }
 );
 var PaginationItem = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: cn("tw-list-none", className), ...props });
-var PaginationNext = ({ children, className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+var PaginationNext = ({ children, className, ...props }) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "tw-size-5" }),
+      children ?? "Next"
+    ]
   }
 );
-var PaginationPrevious = ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(PaginationButton, { ...props, size: "medium", "aria-label": "Go to previous page", icon: "chevron-left", children: children ?? "Previous" });
+var PaginationPrevious = ({ children, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(PaginationButton, { ...props, size: "medium", "aria-label": "Go to previous page", children: [
+  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "tw-size-5" }),
+  children ?? "Previous"
+] });
 var Pagination = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   "nav",
   {
@@ -8062,9 +8062,12 @@ var toggleVariants = classVarianceAuthority.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": [
@@ -8153,7 +8156,7 @@ var Toggle = ({
       disabled,
       children: [
         badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-absolute tw-right-0 tw-top-0 -tw-translate-y-1/2 tw-translate-x-1/4", children: badge }),
-        icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon, className: "tw-inline-block tw-size-4 tw-shrink-0 tw-align-middle" }),
+        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-inline-flex tw-size-4 tw-shrink-0 tw-items-center tw-justify-center tw-align-middle [&_svg]:tw-size-4", children: renderLegacyIcon(icon) }),
         isAiVariant ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-bg-gradient-to-br tw-from-secondary-700 tw-to-purple-700 tw-bg-clip-text tw-text-transparent", children }) : children
       ]
     }
@@ -8995,17 +8998,8 @@ var MultiCombobox = ({
                     className: "tw-w-auto tw-min-w-[120px] tw-flex-1"
                   }
                 ),
-                allowClear && /* @__PURE__ */ jsxRuntime.jsx(InputGroup.Button, { asChild: true, icon: "xmark", "aria-label": "Clear", disabled, children: /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Clear, {}) }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  InputGroup.Button,
-                  {
-                    disabled,
-                    asChild: true,
-                    icon: "chevron-down",
-                    "aria-label": "Open combobox",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Trigger, {})
-                  }
-                )
+                allowClear && /* @__PURE__ */ jsxRuntime.jsx(InputGroup.Button, { asChild: true, "aria-label": "Clear", disabled, children: /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Clear, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "tw-size-4" }) }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(InputGroup.Button, { disabled, asChild: true, "aria-label": "Open combobox", children: /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "tw-size-4" }) }) })
               ] })
             ] })
           }
@@ -9097,9 +9091,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__ */ jsxRuntime.jsx(icons$1.Pipette, { className: "tw-size-4" })
       }
     )
   ] });
@@ -9215,10 +9209,10 @@ var ColorInput = ({
           canClear && /* @__PURE__ */ jsxRuntime.jsx(
             InputGroup.Button,
             {
-              icon: "xmark",
               onMouseDown: (event) => event.preventDefault(),
               onClick: handleClear,
-              "aria-label": "Clear color"
+              "aria-label": "Clear color",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "tw-size-4" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -9326,7 +9320,7 @@ FormGroup.TextInput = FormGroupTextInput;
 FormGroup.NumberInput = FormGroupNumberInput;
 FormGroup.ColorInput = FormGroupColorInput;
 FormGroup.Textarea = FormGroupTextarea;
-var Link = ({
+var Link2 = ({
   ref,
   children,
   target = "_blank",
@@ -9411,14 +9405,14 @@ var Tabs = ({
                       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.X, { className: "tw-size-4" })
                         }
                       )
                     ] })
@@ -9460,12 +9454,11 @@ var AlertAction = ({
   );
 };
 var AlertCollapsibleIcon = ({ open }) => /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { placement: "top", tooltip: open ? "Collapse alert" : "Expand alert", triggerAsChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-  Icon,
+  lucideReact.ChevronDown,
   {
-    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",
@@ -9498,35 +9491,31 @@ var AlertDescription = ({
     children
   }
 );
-var ICONS = {
-  info: "circle-info",
-  warning: "triangle-exclamation",
-  error: "triangle-exclamation",
-  success: "circle-check"
+var VARIANT_ICONS = {
+  info: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, {}),
+  warning: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, {}),
+  error: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, {}),
+  success: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, {})
 };
-var AlertIcon = ({
-  ref,
-  variant,
-  icon,
-  className,
-  ...rest
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  Icon,
+var AlertIcon = ({ variant, icon, className, ...rest }) => /* @__PURE__ */ jsxRuntime.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 = ({
@@ -9651,7 +9640,7 @@ var Alert = ({
     actions && /* @__PURE__ */ jsxRuntime.jsx(AlertAction, { children: actions })
   ] });
 };
-var DEFAULT_ICON = "copy";
+var DEFAULT_ICON = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, {});
 var ClipboardButton = ({
   // clipboard props
   text,
@@ -9671,7 +9660,10 @@ var ClipboardButton = ({
     tooltipPlacement,
     tooltipVariant,
     text,
-    children: /* @__PURE__ */ jsxRuntime.jsx(Button, { ...rest, icon, variant, disabled: !text, children })
+    children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { ...rest, variant, disabled: !text, children: [
+      icon,
+      children
+    ] })
   }
 );
 var ClipboardInline = ({
@@ -9693,7 +9685,7 @@ var ClipboardInline = ({
     tooltipPlacement,
     tooltipVariant,
     children: /* @__PURE__ */ jsxRuntime.jsxs(ButtonInline, { ...rest, disabled: !text, children: [
-      !hideIcon && /* @__PURE__ */ jsxRuntime.jsx(design.Icon, { icon: "copy" }),
+      !hideIcon && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "tw-size-4" }),
       children
     ] })
   }
@@ -10456,26 +10448,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" ? lucideReact.ChevronsRight : lucideReact.ChevronsLeft;
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Chevron, { className: "tw-size-5" })
     }
   );
 };
-var AcceptControls = ({ conflicts, side, onAccept, onDismiss, contentRef }) => /* @__PURE__ */ jsxRuntime.jsx(
+var AcceptControls = ({
+  conflicts,
+  side,
+  onAccept,
+  onDismiss,
+  contentRef,
+  argo
+}) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-shrink-0", style: { height: `${PANE_HEADER_HEIGHT_PX}px` } }),
@@ -10488,16 +10489,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__ */ jsxRuntime.jsx(AcceptButton, { side, onAccept: () => onAccept(conflict) }),
+              /* @__PURE__ */ jsxRuntime.jsx(AcceptButton, { side, onAccept: () => onAccept(conflict), argo }),
               onDismiss && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.X, { className: "tw-size-4" })
                 }
               )
             ]
@@ -10600,14 +10602,18 @@ var MergePane = ({
           backgroundColor: colors__default.default.neutral[50],
           outline: "none"
         },
-        "&.cm-editor .cm-scroller": {
-          alignItems: "stretch !important"
-        },
         ".cm-gutters": {
           backgroundColor: colors__default.default.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.
+      view.EditorView.updateListener.of((update) => {
+        if (update.docChanged) {
+          requestAnimationFrame(() => update.view.dispatch({}));
+        }
       })
     ],
     []
@@ -10628,12 +10634,21 @@ var MergePane = ({
   react.useEffect(() => {
     return () => onScrollDOMReady?.(null);
   }, [onScrollDOMReady]);
+  react.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__ */ jsxRuntime.jsxs("div", { className: cn("tw-flex tw-min-w-0 tw-flex-1 tw-flex-col tw-overflow-hidden", className), children: [
     header && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("tw-bg-white tw-px-4 tw-py-3", headerClassName), children: header }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-flex tw-h-0 tw-flex-1 tw-flex-col [&_>div]:tw-h-full [&_>div]:tw-overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-flex tw-h-0 tw-flex-1 tw-flex-col [&_>div]:tw-h-full", children: /* @__PURE__ */ jsxRuntime.jsx(
       CodeMirror__default.default,
       {
         ref: editorRef,
+        height: "100%",
         value,
         onChange,
         extensions,
@@ -10725,7 +10740,8 @@ var MergeEditor = ({
   middleHeaderClassName,
   middleClassName,
   rightHeader,
-  className
+  className,
+  argo
 }) => {
   const { registerScroller, registerFollower } = useScrollSync();
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -10755,7 +10771,8 @@ var MergeEditor = ({
             side: "left",
             onAccept: acceptLeft,
             onDismiss: dismissLeft,
-            contentRef: registerFollower(0, "left-controls")
+            contentRef: registerFollower(0, "left-controls"),
+            argo
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -10778,7 +10795,8 @@ var MergeEditor = ({
             side: "right",
             onAccept: acceptRight,
             onDismiss: dismissRight,
-            contentRef: registerFollower(2, "right-controls")
+            contentRef: registerFollower(2, "right-controls"),
+            argo
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -10820,7 +10838,7 @@ var ConflictStatusIndicator = ({ remainingConflicts, remainingSafeChanges }) =>
         colorClass
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: allDone ? "circle-check" : "triangle-exclamation" }),
+        allDone ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, { className: "tw-size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: "tw-size-4" }),
         allDone ? "All changes resolved" : `${parts.join(", ")} remaining`
       ]
     }
@@ -11456,13 +11474,7 @@ var CollapsiblePanel = ({
           },
           children: [
             /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "tw-ml-auto tw-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-              Icon,
-              {
-                icon: "chevron-down",
-                className: cn("tw-text-xs group-data-[state=open]:tw-rotate-180")
-              }
-            ) })
+            !isDisabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-ml-auto tw-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: cn("tw-size-5 group-data-[state=open]:tw-rotate-180") }) })
           ]
         }
       ),
@@ -11502,11 +11514,10 @@ var PanelWithDetails = ({
           onKeyUp: handleKeyUp,
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-mr-2 tw-flex tw-shrink-0 tw-items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-              Icon,
+              lucideReact.ChevronDown,
               {
-                icon: "chevron-down",
                 className: cn(
-                  "tw-text-xs",
+                  "tw-size-5",
                   !isOpen ? "-tw-rotate-90" : placement === "bottom" ? "tw-rotate-180" : ""
                 )
               }
@@ -11549,7 +11560,14 @@ var ANIMATION_CLASS_NAME = cn(
 var Skeleton = ({ height = "md", className, count = 1 }) => {
   const prefixId = react.useId();
   const keys2 = Array.from({ length: count }, (_, i) => `${prefixId}-${i}`);
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: keys2.map((key) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(HEIGHT_CLASS_NAME[height], ANIMATION_CLASS_NAME, className) }, key)) });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: keys2.map((key) => /* @__PURE__ */ jsxRuntime.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();
@@ -11681,7 +11699,7 @@ var TableRow = ({
   className,
   ...props
 }) => /* @__PURE__ */ jsxRuntime.jsx("tr", { ref, className: cn("hover:tw-bg-neutral-100", className), ...props });
-var Table = ({
+var Table2 = ({
   borderCollapsed = true,
   bordered = false,
   containerClassName,
@@ -11710,12 +11728,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 = classVarianceAuthority.cva([
   // base styles
   "tw-bg-neutral-50",
@@ -11850,7 +11868,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
@@ -11858,7 +11876,7 @@ var ToastDismiss = ({
     type: "button",
     ...rest,
     children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: "times" }),
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-sr-only", children: "Dismiss" })
     ]
   }
@@ -11960,10 +11978,10 @@ var variants11 = classVarianceAuthority.cva(
   }
 );
 var DEFAULT_VARIANT_ICON = {
-  error: "exclamation-triangle",
-  info: "info-circle",
-  success: "check-circle",
-  warning: "exclamation-circle"
+  error: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, {}),
+  info: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, {}),
+  success: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, {}),
+  warning: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, {})
 };
 var ToastRoot = ({
   id,
@@ -11976,8 +11994,8 @@ var ToastRoot = ({
   icon: iconProp
 }) => {
   const icon = (() => {
-    if (loading) return "spinner";
-    if (iconProp) return iconProp;
+    if (loading) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "tw-animate-spin" });
+    if (iconProp) return renderLegacyIcon(iconProp);
     if (variant === "default" || variant === null) return null;
     return DEFAULT_VARIANT_ICON[variant];
   })();
@@ -11987,20 +12005,24 @@ var ToastRoot = ({
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-variant": variant, className: cn(variants11({ variant })), children: [
     icon && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ToastTitle, { children: title }),
@@ -12349,11 +12371,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
 });
 
@@ -12431,9 +12459,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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { ref, className: cn("tw-flex tw-items-center tw-gap-2", className), ...props, children });
+var ActiveFilters = ({ ref, className, children, ...props }) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Button, { argo: true, variant: "invisible", size: "small", className: cn("tw-gap-1.5", className), ...props, children: [
+  /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: "plus" }),
+  children ?? "Add filter"
+] });
+var Clear = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(Button, { argo: true, variant: "invisible", size: "small", className: cn("tw-ml-auto", className), ...props, children: children ?? "Clear all" });
+var PageToolbar = Object.assign(Root28, {
+  /** 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
@@ -12513,7 +12612,7 @@ var SearchInput = ({
       focusVariant,
       className,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(InputGroup.Addon, { align: "inline-start", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: "magnifying-glass", className: "tw-text-muted-foreground" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(InputGroup.Addon, { align: "inline-start", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "tw-size-4 tw-text-muted-foreground" }) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           InputGroup.Input,
           {
@@ -12529,10 +12628,10 @@ var SearchInput = ({
         canClear && /* @__PURE__ */ jsxRuntime.jsx(InputGroup.Addon, { align: "inline-end", children: /* @__PURE__ */ jsxRuntime.jsx(
           InputGroup.Button,
           {
-            icon: "xmark",
             "aria-label": "Clear search",
             onMouseDown: (event) => event.preventDefault(),
-            onClick: handleClear
+            onClick: handleClear,
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "tw-size-4" })
           }
         ) })
       ]
@@ -12569,7 +12668,7 @@ var SearchInputWithNavigation = ({
       placeholder,
       onValueChange,
       onClear,
-      prefix: /* @__PURE__ */ jsxRuntime.jsx(design.Icon, { className: "tw-text-neutral-400", icon: "magnifying-glass" }),
+      prefix: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "tw-size-4 tw-text-neutral-400" }),
       focusVariant,
       onKeyDown: handleKeyDown2,
       variant,
@@ -12595,7 +12694,7 @@ var SearchInputWithNavigation = ({
                   size: "icon-3xs",
                   onClick: onNavigatePrevious,
                   disabled: !totalResults,
-                  icon: "angle-up"
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "tw-size-4" })
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -12605,7 +12704,7 @@ var SearchInputWithNavigation = ({
                   size: "icon-3xs",
                   onClick: onNavigateNext,
                   disabled: !totalResults,
-                  icon: "angle-down"
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "tw-size-4" })
                 }
               )
             ] })
@@ -12622,7 +12721,7 @@ var TagItem = ({ tag, onRemove, disabled = false }) => {
   const isDisabled = disabled || !!tag.disabled;
   return /* @__PURE__ */ jsxRuntime.jsxs(Badge.Root, { variant: "tag", color: tag.color, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Badge.Label, { children: tag.name }),
-    onRemove && !isDisabled && /* @__PURE__ */ jsxRuntime.jsx(Badge.Addon, { variant: "floating", align: "inline-end", children: /* @__PURE__ */ jsxRuntime.jsx(Badge.Button, { onClick: handleRemove, icon: "xmark", "aria-label": "Remove Tag" }) })
+    onRemove && !isDisabled && /* @__PURE__ */ jsxRuntime.jsx(Badge.Addon, { variant: "floating", align: "inline-end", children: /* @__PURE__ */ jsxRuntime.jsx(Badge.Button, { onClick: handleRemove, "aria-label": "Remove Tag", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "tw-size-3" }) }) })
   ] });
 };
 var TagSelectCreateItem = ({ onCreate, value }) => {
@@ -12641,7 +12740,7 @@ var TagSelectCreateItem = ({ onCreate, value }) => {
       className: cn("[&_svg]:tw-text-primary-500", {
         "tw-hidden": !isCreateItemVisible
       }),
-      icon: "plus",
+      icon: /* @__PURE__ */ jsxRuntime.jsx(icons$1.Plus, { className: "tw-size-4" }),
       children: [
         "Create",
         " ",
@@ -12723,7 +12822,7 @@ var TagSelectList = ({ options = defaultOptions, onAdd, onCreate }) => {
         Command.Input,
         {
           variant: "secondary",
-          prefix: /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: "search", className: "tw-size-4 tw-text-neutral-400" }),
+          prefix: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "tw-size-4 tw-text-neutral-400" }),
           placeholder: "Search tags",
           allowClear: true
         }
@@ -12799,7 +12898,7 @@ var Tagger = ({
   return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(TagItem, { disabled, tag, onRemove: handleRemove }) }, tag.name)),
     !disabled && /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(TagSelectPopover, { options: tagsToAdd, onAdd: handleAdd, onCreate: handleCreate, children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { color: "gray-inverse", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "tw-flex tw-items-center tw-gap-1", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: "plus" }),
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "tw-size-4" }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "span",
         {
@@ -12825,13 +12924,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__ */ jsxRuntime.jsx(ButtonGroup, { className: cn("tw-text-nowrap", className), children });
@@ -12844,15 +12943,15 @@ var variantClasses = {
 };
 var renderVariantIcon = (variant) => {
   if (variant === "processing") {
-    return /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: "spinner", spin: true, className: "tw-size-4" });
+    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "tw-size-4 tw-animate-spin" });
   }
   if (variant === "error") {
-    return /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: "circle-xmark", className: "tw-size-4" });
+    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { className: "tw-size-4" });
   }
   if (variant === "dismissed") {
-    return /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: "circle-xmark", className: "tw-size-4 tw-text-neutral-500" });
+    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { className: "tw-size-4 tw-text-neutral-500" });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: "circle-check", className: "tw-size-4" });
+  return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, { className: "tw-size-4" });
 };
 var CollapsibleStepHeader = ({
   isExpanded,
@@ -12876,10 +12975,9 @@ var CollapsibleStepHeader = ({
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          Icon,
+          lucideReact.ChevronDown,
           {
-            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")
           }
         )
       ]
@@ -12889,19 +12987,19 @@ var CollapsibleStepHeader = ({
 var InlineStepDetail = ({ children }) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { icon: "spinner", spin: true, className: "tw-size-3 tw-text-neutral-200" });
+    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "tw-size-4 tw-animate-spin tw-text-neutral-200" });
   }
   if (variant === "error") {
-    return /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: "circle-xmark", className: "tw-size-3 tw-text-error-500" });
+    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { className: "tw-size-4 tw-text-error-500" });
   }
   if (variant === "dismissed") {
-    return /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: "circle-xmark", className: "tw-size-3 tw-text-neutral-200" });
+    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { className: "tw-size-4 tw-text-neutral-200" });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: "circle-check", className: "tw-size-3 tw-text-neutral-200" });
+  return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, { className: "tw-size-4 tw-text-neutral-200" });
 };
-var InlineStepLabel = ({ variant, children }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-1", children: [
+var InlineStepLabel = ({ variant, children }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-min-w-0 tw-items-center tw-gap-1", children: [
   /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-flex tw-size-5 tw-shrink-0 tw-items-center tw-justify-center", children: renderVariantIcon2(variant) }),
-  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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",
@@ -12955,7 +13053,7 @@ var contentClasses = classVarianceAuthority.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",
@@ -13016,10 +13114,9 @@ var ExpandToggle = ({
     children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: isExpanded ? showLessLabel : showMoreLabel }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        Icon,
+        lucideReact.ChevronDown,
         {
-          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")
         }
       )
     ]
@@ -13125,11 +13222,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__ */ jsxRuntime.jsx(lucideReact.X, { className: "tw-size-4" })
             }
           )
         ] }),
@@ -13173,11 +13270,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__ */ jsxRuntime.jsx(lucideReact.Send, { className: "tw-size-4" })
                 }
               )
             ] })
@@ -13253,7 +13350,7 @@ var PlanRewritingIndicator = ({
     role: "status",
     "data-testid": "plan-rewriting-indicator",
     children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: "spinner", spin: true, className: "tw-size-4 tw-text-secondary-500" }),
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "tw-size-4 tw-animate-spin tw-text-secondary-500" }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-text-sm tw-italic tw-text-secondary-500", children: label })
     ]
   }
@@ -13274,11 +13371,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__ */ jsxRuntime.jsx(lucideReact.CirclePause, { className: "tw-size-4" });
+    if (status === "interrupted") return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Play, { className: "tw-size-4" });
+    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { className: "tw-size-4" });
+  })();
   const getTooltipText = () => {
     if (status === "streaming") return "Stop";
     if (status === "interrupted") return "Continue";
@@ -13294,8 +13391,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__ */ jsxRuntime.jsx(Tooltip.Content, { placement: "top", variant: "action", children: getTooltipText() })
@@ -13545,10 +13642,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__ */ jsxRuntime.jsx(lucideReact.X, { className: "tw-size-4" })
             }
           )
         ] }),
@@ -13657,11 +13754,10 @@ var Question = ({
                       onClick: onPrevious,
                       "aria-label": "Previous step",
                       children: /* @__PURE__ */ jsxRuntime.jsx(
-                        Icon,
+                        lucideReact.ChevronLeft,
                         {
-                          icon: "chevron-left",
                           className: cn(
-                            "tw-size-4",
+                            "tw-size-5",
                             isFirstStep ? "tw-text-primary/25" : "tw-text-primary"
                           )
                         }
@@ -13682,11 +13778,10 @@ var Question = ({
                       onClick: onNext,
                       "aria-label": "Next step",
                       children: /* @__PURE__ */ jsxRuntime.jsx(
-                        Icon,
+                        lucideReact.ChevronRight,
                         {
-                          icon: "chevron-right",
                           className: cn(
-                            "tw-size-4",
+                            "tw-size-5",
                             currentStep === totalSteps ? "tw-text-primary/25" : "tw-text-primary"
                           )
                         }
@@ -13786,11 +13881,18 @@ var SuggestedPrompt = ({ label, disabled, onClick, icon, className }) => {
       onClick,
       children: [
         icon ?? /* @__PURE__ */ jsxRuntime.jsx(
-          Icon,
+          lucideReact.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__ */ jsxRuntime.jsx("div", { className: "tw-whitespace-normal tw-text-left", children: label })
@@ -13800,7 +13902,7 @@ var SuggestedPrompt = ({ label, disabled, onClick, icon, className }) => {
 };
 var ThinkingIndicator = ({ label = "Thinking..." }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-gap-2", "data-testid": "chat-thinking-indicator", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: "spinner", spin: true, className: "tw-size-4 tw-text-secondary-500" }),
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "tw-size-4 tw-animate-spin tw-text-secondary-500" }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-text-sm tw-italic tw-text-secondary-500", children: label })
   ] });
 };
@@ -13870,15 +13972,15 @@ var AutoSaveTextarea = ({
                 " / ",
                 maxLength
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "tw-text-neutral-400", children: [
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Icon, { spin: true, icon: "spinner", className: "tw-mr-1" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "tw-size-4 tw-animate-spin" }),
                   " Saving"
                 ] }),
                 !isOverLimit && value !== null && !isChanged && !isSaving && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: "check-circle", className: "tw-text-primary-500" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, { className: "tw-size-4 tw-text-primary-500" }),
                   " Saved"
                 ] })
               ] })
@@ -13987,30 +14089,23 @@ var PasswordInput = ({
           }
         ),
         (capsLock || canClear || allowPasswordToggle) && /* @__PURE__ */ jsxRuntime.jsxs(InputGroup.Addon, { align: "inline-end", children: [
-          capsLock && /* @__PURE__ */ jsxRuntime.jsx(
-            Icon,
-            {
-              icon: "up-from-line",
-              title: "Caps Lock is on",
-              className: "tw-size-4 tw-text-primary"
-            }
-          ),
+          capsLock && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowBigUpDash, { className: "tw-size-4 tw-text-primary", children: /* @__PURE__ */ jsxRuntime.jsx("title", { children: "Caps Lock is on" }) }),
           canClear && /* @__PURE__ */ jsxRuntime.jsx(
             InputGroup.Button,
             {
-              icon: "xmark",
               "aria-label": "Clear password",
               onMouseDown: (event) => event.preventDefault(),
-              onClick: handleClear
+              onClick: handleClear,
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "tw-size-4" })
             }
           ),
           allowPasswordToggle && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.EyeOff, { className: "tw-size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "tw-size-4" })
             }
           )
         ] })
@@ -14380,10 +14475,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__ */ jsxRuntime.jsx(lucideReact.Minimize2, { className: "tw-size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { className: "tw-size-4" })
                     }
                   )
                 }
@@ -14505,7 +14600,7 @@ exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
 exports.ButtonInline = ButtonInline;
-exports.Calendar = Calendar;
+exports.Calendar = Calendar2;
 exports.Card = Card;
 exports.Checkbox = Checkbox;
 exports.Clipboard = Clipboard;
@@ -14547,7 +14642,7 @@ exports.InlineStepLabel = InlineStepLabel;
 exports.InputGroup = InputGroup;
 exports.Kbd = Kbd;
 exports.Label = Label;
-exports.Link = Link;
+exports.Link = Link2;
 exports.MarkedText = MarkedText;
 exports.MergeEditor = MergeEditor;
 exports.MessageBubble = MessageBubble;
@@ -14558,6 +14653,7 @@ exports.Navbar = Navbar;
 exports.NumberInput = NumberInput;
 exports.PageHeader = PageHeader;
 exports.PageLayout = PageLayout;
+exports.PageToolbar = PageToolbar;
 exports.Pagination = Pagination;
 exports.PaneHeader = PaneHeader;
 exports.PanelWithDetails = PanelWithDetails;
@@ -14576,7 +14672,7 @@ exports.ResizablePanel = ResizablePanel;
 exports.ResizablePanelGroup = ResizablePanelGroup;
 exports.ScrollArea = ScrollArea;
 exports.ScrollBar = ScrollBar;
-exports.Search = Search;
+exports.Search = Search2;
 exports.SearchForm = SearchForm;
 exports.SearchInput = SearchInput;
 exports.SearchInputWithNavigation = SearchInputWithNavigation;
@@ -14592,7 +14688,7 @@ exports.SplitButton = SplitButton;
 exports.SqlEditor = SqlEditor;
 exports.SuggestedPrompt = SuggestedPrompt;
 exports.Switch = Switch;
-exports.Table = Table;
+exports.Table = Table2;
 exports.Tabs = Tabs;
 exports.TabsContent = TabsContent;
 exports.Tagger = Tagger;