@keboola/design 3.0.0 → 3.1.0

package/dist/index.cjs

@@ -7,6 +7,7 @@ var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var reactTooltip = require('@radix-ui/react-tooltip');
 var classVarianceAuthority = require('class-variance-authority');
+var brandRegistry = require('@keboola/brand-registry');
 var jsxRuntime = require('react/jsx-runtime');
 var DropdownMenuPrimitive3 = require('@radix-ui/react-dropdown-menu');
 var ScrollAreaPrimitive2 = require('@radix-ui/react-scroll-area');
@@ -34,7 +35,6 @@ var BoringAvatar = require('boring-avatars');
 var reactProgress = require('@radix-ui/react-progress');
 var reactCollapsible = require('@radix-ui/react-collapsible');
 var sonner = require('sonner');
-var brandRegistry = require('@keboola/brand-registry');
 var ResizablePrimitive = require('react-resizable-panels');
 var RadixAvatar = require('@radix-ui/react-avatar');
 var RadixTabs = require('@radix-ui/react-tabs');
@@ -45,6 +45,7 @@ var colors3 = require('@keboola/tailwind-config/colors');
 var state = require('@codemirror/state');
 var nodeDiff3 = require('node-diff3');
 var reactForm = require('@tanstack/react-form');
+var DOMPurify = require('dompurify');
 var autocomplete = require('@codemirror/autocomplete');
 var langJson = require('@codemirror/lang-json');
 var lint = require('@codemirror/lint');
@@ -96,6 +97,7 @@ var RadixAvatar__namespace = /*#__PURE__*/_interopNamespace(RadixAvatar);
 var RadixTabs__namespace = /*#__PURE__*/_interopNamespace(RadixTabs);
 var CodeMirror__default = /*#__PURE__*/_interopDefault(CodeMirror);
 var colors3__default = /*#__PURE__*/_interopDefault(colors3);
+var DOMPurify__default = /*#__PURE__*/_interopDefault(DOMPurify);
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -169,17 +171,49 @@ var keyCodes = {
   ESCAPE: "Escape",
   SPACE: " "
 };
+var ThemeContext = react.createContext(null);
+
+// src/components/internal/useIsLegacyBrand.ts
+var useIsLegacyBrand = () => {
+  const context = react.use(ThemeContext);
+  return context === null || context.brand.id === brandRegistry.keboolaLegacy.id;
+};
 var tooltipVariants = classVarianceAuthority.cva(
   [
     "tailwindcss-preflight",
     "tw-inline-block",
-    "tw-rounded",
-    "tw-bg-neutral-800",
-    "tw-text-white",
     "tw-break-anywhere",
     "tw-max-h-96",
     "tw-overflow-y-auto",
-    "tw-z-[1060]"
+    "tw-z-[1060]",
+    // legacy (dark) chrome — default
+    "tw-rounded",
+    "tw-bg-neutral-800",
+    "tw-text-white",
+    // argo chrome overrides — semantic floating-panel tokens
+    "data-[argo=true]:tw-rounded-2xl",
+    "data-[argo=true]:tw-border",
+    "data-[argo=true]:tw-border-solid",
+    "data-[argo=true]:tw-border-border",
+    "data-[argo=true]:tw-bg-popover",
+    "data-[argo=true]:tw-text-popover-foreground",
+    "data-[argo=true]:tw-shadow-md",
+    // argo open animation
+    "data-[argo=true]:data-[state=delayed-open]:tw-animate-in",
+    "data-[argo=true]:data-[state=instant-open]:tw-animate-in",
+    "data-[argo=true]:data-[state=delayed-open]:tw-fade-in-0",
+    "data-[argo=true]:data-[state=instant-open]:tw-fade-in-0",
+    "data-[argo=true]:data-[state=delayed-open]:tw-zoom-in-95",
+    "data-[argo=true]:data-[state=instant-open]:tw-zoom-in-95",
+    // argo closed animation
+    "data-[argo=true]:data-[state=closed]:tw-animate-out",
+    "data-[argo=true]:data-[state=closed]:tw-fade-out-0",
+    "data-[argo=true]:data-[state=closed]:tw-zoom-out-95",
+    // argo position animation
+    "data-[argo=true]:data-[side=bottom]:tw-slide-in-from-top-2",
+    "data-[argo=true]:data-[side=left]:tw-slide-in-from-right-2",
+    "data-[argo=true]:data-[side=right]:tw-slide-in-from-left-2",
+    "data-[argo=true]:data-[side=top]:tw-slide-in-from-bottom-2"
   ],
   {
     defaultVariants: {
@@ -212,6 +246,7 @@ var tooltipVariants = classVarianceAuthority.cva(
 var TooltipContent = ({
   className,
   variant,
+  argo,
   keepOpenOnPointerDownOutside = false,
   children,
   onPointerDownOutside,
@@ -221,6 +256,8 @@ var TooltipContent = ({
   placement = "right",
   ...rest
 }) => {
+  const isLegacy = useIsLegacyBrand();
+  const renderArgo = !isLegacy || argo === true;
   const handlePointerDownOutside = (event) => {
     if (keepOpenOnPointerDownOutside) event.preventDefault();
     onPointerDownOutside?.(event);
@@ -229,7 +266,8 @@ var TooltipContent = ({
     reactTooltip.Content,
     {
       ...rest,
-      "data-tooltip-content": true,
+      "data-tooltip-content": renderArgo ? void 0 : true,
+      "data-argo": renderArgo,
       sideOffset,
       collisionPadding,
       onPointerDownOutside: handlePointerDownOutside,
@@ -289,6 +327,7 @@ var Tooltip = ({
   className,
   keepOpenOnTriggerClick = false,
   variant,
+  argo,
   placement = "right",
   forceHide = false,
   forceShow = false,
@@ -327,6 +366,7 @@ var Tooltip = ({
           {
             className,
             variant: resolvedVariant,
+            argo,
             placement,
             keepOpenOnPointerDownOutside: keepOpenOnTriggerClick,
             children: tooltip
@@ -386,26 +426,6 @@ var getIsMac = () => {
   return false;
 };
 var isMac = getIsMac();
-
-// src/utils/legacyIcon.tsx
-var isFAIconValue = (value) => typeof value === "string" || Array.isArray(value) && value.length === 2 && typeof value[0] === "string" && typeof value[1] === "string";
-var registeredRenderer = null;
-var setLegacyIconRenderer = (renderer) => {
-  registeredRenderer = renderer;
-};
-var warnedOnce = false;
-var renderLegacyIcon = (value) => {
-  if (!isFAIconValue(value)) return value;
-  if (registeredRenderer) return registeredRenderer(value);
-  if (!warnedOnce) {
-    warnedOnce = true;
-    console.warn(
-      "[@keboola/design] renderLegacyIcon received a legacy FontAwesome icon value but no renderer is registered. Call setLegacyIconRenderer at app boot. Returning null.",
-      value
-    );
-  }
-  return null;
-};
 var sha256 = async (text) => {
   const msgUint8 = new TextEncoder().encode(text);
   const hashBuffer = await crypto.subtle.digest("SHA-256", msgUint8);
@@ -415,10 +435,7 @@ var sha256 = async (text) => {
 var useSHA256 = (text) => {
   const [hash, setHash] = react.useState("");
   react.useEffect(() => {
-    if (!text) {
-      setHash("");
-      return;
-    }
+    if (!text) return;
     let cancelled = false;
     sha256(text).then((h) => {
       if (!cancelled) setHash(h);
@@ -427,7 +444,7 @@ var useSHA256 = (text) => {
       cancelled = true;
     };
   }, [text]);
-  return hash;
+  return text ? hash : "";
 };
 var Keboola = react.forwardRef(
   ({ size = 24, color = "currentColor", className, children, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -636,6 +653,8 @@ var argoVariants = classVarianceAuthority.cva(
     "tw-bg-clip-padding",
     // anchor support
     "!tw-no-underline",
+    "aria-disabled:tw-cursor-not-allowed",
+    "aria-disabled:tw-opacity-50",
     // icon
     "tw-shrink-0",
     "[&_svg]:tw-pointer-events-none",
@@ -738,14 +757,11 @@ var Button = ({
   block = false,
   ...buttonProps
 }) => {
+  const isLegacy = useIsLegacyBrand();
+  const renderArgo = !isLegacy || argo;
   const Comp = asChild ? reactSlot.Root : "button";
   const isIconOnly = String(size).startsWith("icon");
-  const classNames = argo ? argoVariants({ variant, size, block, className }) : variants({
-    size,
-    variant,
-    block,
-    className
-  });
+  const classNames = renderArgo ? argoVariants({ variant, size, block, className }) : variants({ size, variant, block, className });
   const handleClick = (event) => {
     const isAnchor = event.currentTarget.tagName === "A";
     if (isAnchor && disabled) {
@@ -796,11 +812,7 @@ var buttonInlineVariants = classVarianceAuthority.cva(
     },
     variants: {
       color: {
-        link: [
-          "tw-text-secondary-500",
-          "hover:tw-text-secondary-600",
-          "[&_svg]:tw-text-secondary-500"
-        ],
+        link: ["tw-text-primary", "hover:tw-text-primary/90", "[&_svg]:tw-text-primary"],
         dark: ["tw-text-neutral-800 [&_svg]:tw-text-neutral-400"],
         danger: ["tw-text-error-500 [&_svg]:tw-text-error-500"],
         muted: ["tw-text-muted-foreground [&_svg]:tw-text-muted-foreground"],
@@ -1039,17 +1051,16 @@ var itemVariants = cn(
   "group-data-[variant=default]/dropdown-menu-content:hover:tw-bg-neutral-100",
   "group-data-[variant=default]/dropdown-menu-content:hover:tw-text-neutral-900",
   "group-data-[variant=argo]/dropdown-menu-content:tw-rounded-md",
-  "group-data-[variant=argo]/dropdown-menu-content:tw-text-slate-800",
-  "group-data-[variant=argo]/dropdown-menu-content:focus:tw-text-slate-800",
-  "group-data-[variant=argo]/dropdown-menu-content:focus:tw-bg-sky-100",
-  "group-data-[variant=argo]/dropdown-menu-content:hover:tw-text-slate-800",
-  "group-data-[variant=argo]/dropdown-menu-content:hover:tw-bg-sky-100"
+  "group-data-[variant=argo]/dropdown-menu-content:tw-text-popover-foreground",
+  "group-data-[variant=argo]/dropdown-menu-content:focus:tw-text-accent-foreground",
+  "group-data-[variant=argo]/dropdown-menu-content:focus:tw-bg-accent",
+  "group-data-[variant=argo]/dropdown-menu-content:hover:tw-text-accent-foreground",
+  "group-data-[variant=argo]/dropdown-menu-content:hover:tw-bg-accent"
 );
 var contentVariants = cn(
   "tailwindcss-preflight",
   "tw-group/dropdown-menu-content",
   "tw-z-[1040]",
-  "tw-bg-white",
   // positioning
   "tw-flex",
   "tw-flex-col",
@@ -1060,8 +1071,16 @@ var contentVariants = cn(
   // border
   "tw-border",
   "tw-shadow-md",
+  // Legacy surface — fixed white panel.
   "data-[variant=default]:tw-rounded-md",
+  "data-[variant=default]:tw-bg-white",
+  "data-[variant=default]:tw-border-neutral-100",
+  "data-[variant=default]:tw-text-neutral-800",
+  // Argo surface — semantic popover tokens (brand + dark aware).
   "data-[variant=argo]:tw-rounded-2xl",
+  "data-[variant=argo]:tw-bg-popover",
+  "data-[variant=argo]:tw-text-popover-foreground",
+  "data-[variant=argo]:tw-border-border",
   // animations
   "data-[state=open]:tw-animate-in",
   "data-[state=open]:tw-fade-in-0",
@@ -1112,7 +1131,6 @@ var ScrollBar = ({ className, orientation = "vertical", ...props }) => /* @__PUR
     orientation,
     className: cn(
       "tw-flex tw-touch-none tw-select-none tw-transition-color",
-      '[data-state="hidden"]:tw-bg-pink-500',
       {
         "tw-h-full tw-w-2.5 tw-p-px": orientation === "vertical",
         "tw-h-2.5 tw-flex-col tw-p-px": orientation === "horizontal"
@@ -1127,8 +1145,8 @@ var ScrollBar = ({ className, orientation = "vertical", ...props }) => /* @__PUR
           "tw-relative",
           "tw-flex-1",
           "tw-rounded-full",
-          "tw-bg-neutral-200",
-          "hover:tw-bg-neutral-400"
+          "tw-bg-border",
+          "hover:tw-bg-muted-foreground"
         )
       }
     )
@@ -1223,7 +1241,7 @@ var DropdownMenuItem = ({
   ...props
 }) => {
   const Comp = asChild ? reactSlot.Root : "div";
-  const adornment = isLoading ? /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Loader2, { className: "tw-animate-spin" }) : renderLegacyIcon(icon);
+  const adornment = isLoading ? /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Loader2, { className: "tw-animate-spin" }) : icon;
   const handleOnSelect = (event) => {
     if (asModalTrigger) event.preventDefault();
     onSelect?.(event);
@@ -1349,7 +1367,7 @@ var DropdownMenuRadioItem = ({
       ...props,
       children: [
         isAtStart && indicatorEle,
-        icon && /* @__PURE__ */ jsxRuntime.jsx(ItemIcon, { className: iconClassName, children: renderLegacyIcon(icon) }),
+        icon && /* @__PURE__ */ jsxRuntime.jsx(ItemIcon, { className: iconClassName, children: icon }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-flex tw-min-w-0 tw-flex-1 tw-items-center tw-gap-2", children }),
         !isAtStart && indicatorEle
       ]
@@ -1414,10 +1432,12 @@ var DropdownMenuTrigger = ({
 var DropdownMenu = ({
   // change a default value to false, for modal property, as it is not used in most cases
   modal = false,
-  variant = "default",
+  variant,
   ...props
 }) => {
-  const contextValue = react.useMemo(() => ({ variant }), [variant]);
+  const isLegacy = useIsLegacyBrand();
+  const effectiveVariant = !isLegacy || variant === "argo" ? "argo" : "default";
+  const contextValue = react.useMemo(() => ({ variant: effectiveVariant }), [effectiveVariant]);
   return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContext, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive3.Root, { ...props, modal }) });
 };
 DropdownMenu.Trigger = DropdownMenuTrigger;
@@ -1450,33 +1470,37 @@ var SplitButtonBase = ({
   icon,
   children,
   ...rest
-}) => /* @__PURE__ */ jsxRuntime.jsxs(ButtonGroup, { space: "compact", children: [
-  /* @__PURE__ */ jsxRuntime.jsxs(Button, { ...rest, ref, disabled, variant, size, argo, children: [
-    !rest.isLoading && renderLegacyIcon(icon),
-    children
-  ] }),
-  actions && /* @__PURE__ */ jsxRuntime.jsxs(
-    DropdownMenu,
-    {
-      open: isActionsOpen,
-      onOpenChange: onActionsOpenChange,
-      variant: argo ? "argo" : "default",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            argo,
-            size: iconSizeMap[size],
-            variant,
-            "aria-label": "Additional actions",
-            children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.ChevronDown, { className: "tw-size-5" })
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Content, { align: "end", children: actions })
-      ]
-    }
-  )
-] });
+}) => {
+  const isLegacy = useIsLegacyBrand();
+  const renderArgo = !isLegacy || argo;
+  return /* @__PURE__ */ jsxRuntime.jsxs(ButtonGroup, { space: "compact", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Button, { ...rest, ref, disabled, variant, size, argo, children: [
+      !rest.isLoading && icon,
+      children
+    ] }),
+    actions && /* @__PURE__ */ jsxRuntime.jsxs(
+      DropdownMenu,
+      {
+        open: isActionsOpen,
+        onOpenChange: onActionsOpenChange,
+        variant: renderArgo ? "argo" : "default",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              argo,
+              size: iconSizeMap[size],
+              variant,
+              "aria-label": "Additional actions",
+              children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.ChevronDown, { className: "tw-size-5" })
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Content, { align: "end", children: actions })
+        ]
+      }
+    )
+  ] });
+};
 var SplitButton = Object.assign(SplitButtonBase, {
   Action: DropdownMenu.Item,
   Actions: DropdownMenu.Group
@@ -1500,7 +1524,7 @@ var MultiActionButton = ({
     variant: "invisible",
     size: "icon",
     "data-testid": dataTestId,
-    children: !isLoading && renderLegacyIcon(icon)
+    children: !isLoading && icon
   }
 ) });
 var MultiActionButtonGroup = ({ children, className }) => /* @__PURE__ */ jsxRuntime.jsx(ButtonGroup, { className: cn("tw-text-nowrap", className), children });
@@ -1609,6 +1633,33 @@ var toggleVariants = classVarianceAuthority.cva(
           // hover on pressed state
           "not-disabled:hover:aria-pressed:tw-bg-secondary-200",
           "[&_svg]:not-disabled:hover:aria-pressed:tw-text-secondary-600"
+        ],
+        argo: [
+          // chrome — semantic tokens, opt-in via variant="argo"
+          "tw-border-border",
+          "tw-rounded-lg",
+          "tw-text-foreground",
+          // typography — override base uppercase / tw-text-xs / tracking from outer class list
+          // so argo matches `Button argo` (sentence case, sm text)
+          "tw-normal-case",
+          "tw-tracking-normal",
+          "tw-text-sm",
+          // default state - transparent background
+          "tw-bg-transparent",
+          "[&_svg]:tw-text-muted-foreground",
+          // hover state (off only — explicit so pressed doesn't double-up) — muted bg
+          // is visibly subtler than the accent pressed bg, so hover and active read distinct.
+          "not-disabled:hover:tw-border-border",
+          "data-[state=off]:not-disabled:hover:tw-bg-muted",
+          "data-[state=off]:not-disabled:hover:[&_svg]:tw-text-primary",
+          // pressed state — stronger accent bg; hover-on keeps the same colour to avoid flicker
+          "data-[state=on]:tw-bg-accent",
+          "data-[state=on]:[&_svg]:tw-text-primary",
+          // focus-visible ring (overrides base outline + shadow)
+          "!tw-outline-none",
+          "focus-visible:!tw-shadow-none",
+          "focus-visible:tw-ring-2",
+          "focus-visible:tw-ring-primary/50"
         ]
       },
       size: {
@@ -1624,7 +1675,27 @@ var toggleVariants = classVarianceAuthority.cva(
     compoundVariants: [
       { iconOnly: true, size: "small", className: "tw-size-8" },
       { iconOnly: true, size: "medium", className: "tw-size-10" },
-      { iconOnly: true, size: "large", className: "tw-size-12" }
+      { iconOnly: true, size: "large", className: "tw-size-12" },
+      // argo sizes match `Button argo` (small 32px / medium 36px / large 40px)
+      // and `InputGroup argo` heights so argo Toggle aligns vertically next to them.
+      {
+        variant: "argo",
+        size: "small",
+        className: "tw-max-h-8 tw-min-h-8 tw-px-3 tw-py-2"
+      },
+      {
+        variant: "argo",
+        size: "medium",
+        className: "tw-max-h-9 tw-min-h-9 tw-px-4 tw-py-2"
+      },
+      {
+        variant: "argo",
+        size: "large",
+        className: "tw-max-h-10 tw-min-h-10 tw-px-6 tw-py-2.5"
+      },
+      { variant: "argo", iconOnly: true, size: "small", className: "tw-size-8" },
+      { variant: "argo", iconOnly: true, size: "medium", className: "tw-size-9" },
+      { variant: "argo", iconOnly: true, size: "large", className: "tw-size-10" }
     ],
     defaultVariants: {
       variant: "ai",
@@ -1655,7 +1726,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("span", { className: "tw-inline-flex tw-size-4 tw-shrink-0 tw-items-center tw-justify-center tw-align-middle [&_svg:not([class*='tw-size-'])]:tw-size-4", children: renderLegacyIcon(icon) }),
+        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:not([class*='tw-size-'])]:tw-size-4", children: 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
       ]
     }
@@ -1869,7 +1940,7 @@ var Link = ({
         rel,
         onClick: handleOnClick,
         className: cn(
-          "tw-text-secondary-500 tw-underline hover:tw-text-secondary-600 hover:tw-no-underline",
+          "tw-text-primary tw-underline hover:tw-text-primary/90 hover:tw-no-underline",
           className
         ),
         children
@@ -1896,6 +1967,8 @@ var ModalBody = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
     ...props
   }
 );
+var ModalArgoContext = react.createContext(false);
+var useModalArgo = () => react.use(ModalArgoContext);
 var ModalOverlay = ({
   ref,
   className,
@@ -1932,8 +2005,11 @@ var ModalContent = ({
   className,
   children,
   onEscapeKeyDown,
+  argo,
   ...props
 }) => {
+  const isLegacy = useIsLegacyBrand();
+  const renderArgo = !isLegacy || argo === true;
   const handleEscapeKeyDown = (event) => {
     event.stopPropagation();
     onEscapeKeyDown?.(event);
@@ -1942,6 +2018,7 @@ var ModalContent = ({
     DialogPrimitive.Content,
     {
       "aria-describedby": void 0,
+      "data-argo": renderArgo,
       className: cn(
         // reset
         "tailwindcss-preflight",
@@ -1960,7 +2037,7 @@ var ModalContent = ({
         "tw-flex-col",
         "tw-gap-4",
         "tw-rounded-lg",
-        "tw-bg-white",
+        "tw-bg-surface",
         "tw-px-7",
         // 4 px less padding to prevent input focus rings/outlines from being clipped by overflow
         "tw-py-8",
@@ -1985,7 +2062,7 @@ var ModalContent = ({
       ),
       onEscapeKeyDown: handleEscapeKeyDown,
       ...props,
-      children
+      children: /* @__PURE__ */ jsxRuntime.jsx(ModalArgoContext, { value: renderArgo, children })
     }
   ) }) });
 };
@@ -2000,34 +2077,37 @@ var ModalFooter = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
     ...props
   }
 );
-var ModalCloseIcon = ({ className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsxs(
-  DialogPrimitive.Close,
-  {
-    ...rest,
-    className: cn(
-      "tw-group/modal-close-icon",
-      "tw-flex",
-      "tw-items-center",
-      "tw-justify-center",
-      "focus:tw-outline-none",
-      className
-    ),
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        icons_exports.X,
-        {
-          className: cn(
-            "tw-size-4",
-            "tw-text-neutral-400",
-            "group-focus/modal-close-icon:tw-text-neutral-500",
-            "group-hover/modal-close-icon:tw-text-neutral-500"
-          )
-        }
+var ModalCloseIcon = ({ className, ...rest }) => {
+  const argo = useModalArgo();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    DialogPrimitive.Close,
+    {
+      ...rest,
+      className: cn(
+        "tw-group/modal-close-icon",
+        "tw-flex",
+        "tw-items-center",
+        "tw-justify-center",
+        "focus:tw-outline-none",
+        className
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-sr-only", children: "Close" })
-    ]
-  }
-);
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          icons_exports.X,
+          {
+            className: cn(
+              "tw-size-4",
+              argo ? "tw-text-muted-foreground" : "tw-text-neutral-400",
+              argo ? "group-focus/modal-close-icon:tw-text-foreground" : "group-focus/modal-close-icon:tw-text-neutral-500",
+              argo ? "group-hover/modal-close-icon:tw-text-foreground" : "group-hover/modal-close-icon:tw-text-neutral-500"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-sr-only", children: "Close" })
+      ]
+    }
+  );
+};
 var ModalDescription = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   DialogPrimitive__namespace.Description,
   {
@@ -2050,37 +2130,40 @@ var ModalHeader = ({
   hideCloseIcon = false,
   children,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsxs(
-  "div",
-  {
-    className: cn(
-      "tw-flex",
-      "tw-flex-col",
-      "tw-gap-3",
-      "tw-pb-5",
-      // Show border separator only if body is visible
-      "[&:has(~[data-slot=modal-body])]:tw-border-b",
-      // Tabs render their own bottom border — drop header border + padding to avoid the double-line look
-      "[&:has(~[data-slot=modal-body]_[data-slot=tabs-root])]:!tw-border-b-0",
-      "[&:has(~[data-slot=modal-body]_[data-slot=tabs-root])]:!tw-pb-0",
-      "tw-border-neutral-150",
-      "tw-px-1",
-      // 4 px to complement ModalContent and still keep input focus outline visible
-      className
-    ),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-justify-end tw-gap-2", children: [
-          title && /* @__PURE__ */ jsxRuntime.jsx(ModalTitle, { children: title }),
-          !hideCloseIcon && /* @__PURE__ */ jsxRuntime.jsx(ModalCloseIcon, {})
+}) => {
+  const argo = useModalArgo();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "tw-flex",
+        "tw-flex-col",
+        "tw-gap-3",
+        "tw-pb-5",
+        // Show border separator only if body is visible
+        "[&:has(~[data-slot=modal-body])]:tw-border-b",
+        // Tabs render their own bottom border — drop header border + padding to avoid the double-line look
+        "[&:has(~[data-slot=modal-body]_[data-slot=tabs-root])]:!tw-border-b-0",
+        "[&:has(~[data-slot=modal-body]_[data-slot=tabs-root])]:!tw-pb-0",
+        argo ? "tw-border-border" : "tw-border-neutral-150",
+        "tw-px-1",
+        // 4 px to complement ModalContent and still keep input focus outline visible
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-justify-end tw-gap-2", children: [
+            title && /* @__PURE__ */ jsxRuntime.jsx(ModalTitle, { children: title }),
+            !hideCloseIcon && /* @__PURE__ */ jsxRuntime.jsx(ModalCloseIcon, {})
+          ] }),
+          description && /* @__PURE__ */ jsxRuntime.jsx(ModalDescription, { children: description })
         ] }),
-        description && /* @__PURE__ */ jsxRuntime.jsx(ModalDescription, { children: description })
-      ] }),
-      children
-    ]
-  }
-);
+        children
+      ]
+    }
+  );
+};
 var NAMED_COLORS = /* @__PURE__ */ new Set(["orange", "blue", "red", "green", "gray", "violet"]);
 var ModalIcon = (props) => {
   const [hasImageError, setHasImageError] = react.useState(false);
@@ -2131,7 +2214,7 @@ var ModalIcon = (props) => {
                 '[&_svg:not([class*="tw-size-"])]:tw-size-6',
                 "[&_svg]:tw-aspect-square"
               ),
-              children: renderLegacyIcon(props.icon)
+              children: props.icon
             }
           )
         }
@@ -2284,10 +2367,13 @@ var FullScreenModalRoot = ({
   className,
   lockBodyScroll = true,
   onEscapeKeyDown,
-  argo = false,
+  onKeyDown,
+  argo,
   ...props
 }) => {
   const modalRef = react.useRef(null);
+  const isLegacy = useIsLegacyBrand();
+  const renderArgo = !isLegacy || argo === true;
   react.useEffect(() => {
     const modalElement = modalRef.current;
     if (lockBodyScroll) {
@@ -2303,6 +2389,7 @@ var FullScreenModalRoot = ({
     };
   }, [lockBodyScroll]);
   const handleKeyDown2 = (event) => {
+    onKeyDown?.(event);
     if (event.key === "Escape" && !event.defaultPrevented) {
       onEscapeKeyDown?.(event);
     }
@@ -2311,12 +2398,13 @@ var FullScreenModalRoot = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
+        ...props,
         ref: modalRef,
         role: "dialog",
         "aria-modal": "true",
         tabIndex: -1,
         "data-fullscreen-modal": true,
-        "data-argo": argo,
+        "data-argo": renderArgo,
         onKeyDown: handleKeyDown2,
         className: cn(
           "tailwindcss-preflight",
@@ -2330,7 +2418,6 @@ var FullScreenModalRoot = ({
           "focus-visible:tw-outline-none",
           className
         ),
-        ...props,
         children
       }
     ),
@@ -2364,8 +2451,14 @@ var sheetContentVariants = classVarianceAuthority.cva(
     "tw-z-[1051]",
     "tw-flex",
     "tw-flex-col",
-    "tw-bg-white",
+    "tw-bg-surface",
     "tw-shadow-lg",
+    // argo chrome overrides
+    "data-[argo=true]:tw-border",
+    "data-[argo=true]:tw-border-border",
+    "data-[argo=true]:focus-visible:tw-outline-none",
+    "data-[argo=true]:focus-visible:tw-ring-2",
+    "data-[argo=true]:focus-visible:tw-ring-primary/50",
     "tw-ease-in-out",
     // opening animation
     "data-[state=open]:tw-duration-200",
@@ -2388,14 +2481,16 @@ var sheetContentVariants = classVarianceAuthority.cva(
           "tw-top-0",
           "tw-h-auto",
           "data-[state=closed]:tw-slide-out-to-top",
-          "data-[state=open]:tw-slide-in-from-top"
+          "data-[state=open]:tw-slide-in-from-top",
+          "data-[argo=true]:tw-rounded-b-lg"
         ],
         right: [
           "tw-inset-y-0",
           "tw-right-0",
           "tw-h-full",
           "data-[state=closed]:tw-slide-out-to-right",
-          "data-[state=open]:tw-slide-in-from-right"
+          "data-[state=open]:tw-slide-in-from-right",
+          "data-[argo=true]:tw-rounded-l-lg"
         ],
         bottom: [
           "tw-inset-x-0",
@@ -2403,15 +2498,17 @@ var sheetContentVariants = classVarianceAuthority.cva(
           "tw-h-auto",
           "data-[state=closed]:tw-slide-out-to-bottom",
           "data-[state=open]:tw-slide-in-from-bottom",
-          "tw-drop-shadow-2xl"
+          "tw-drop-shadow-2xl",
           // standard tailwindcss shadow is invisible for a bottom sheet because of positioning
+          "data-[argo=true]:tw-rounded-t-lg"
         ],
         left: [
           "tw-inset-y-0",
           "tw-left-0",
           "tw-h-full",
           "data-[state=closed]:tw-slide-out-to-left",
-          "data-[state=open]:tw-slide-in-from-left"
+          "data-[state=open]:tw-slide-in-from-left",
+          "data-[argo=true]:tw-rounded-r-lg"
         ]
       }
     }
@@ -2427,8 +2524,11 @@ var SheetContent = ({
   onPointerDownOutside,
   onInteractOutside,
   container,
+  argo,
   ...props
 }) => {
+  const isLegacy = useIsLegacyBrand();
+  const renderArgo = !isLegacy || argo === true;
   const handleOnPointerDownOutside = (event) => {
     if (keepOpenOnPointerDownOutside) event.preventDefault();
     onPointerDownOutside?.(event);
@@ -2448,6 +2548,7 @@ var SheetContent = ({
         onPointerDownOutside: handleOnPointerDownOutside,
         onInteractOutside: handleOnInteractOutside,
         "data-side": side,
+        "data-argo": renderArgo,
         children
       }
     )
@@ -2475,7 +2576,7 @@ var SheetHeader = ({
   ] });
 };
 var SheetTitle = ({ className, visuallyHidden = false, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive.Title, { className: cn({ "tw-sr-only": visuallyHidden }, className), ...props });
-var Sheet = ({ ...props }) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive.Root, { ...props });
+var Sheet = (props) => /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive.Root, { ...props });
 Sheet.Close = DialogPrimitive.Close;
 Sheet.Trigger = DialogPrimitive.Trigger;
 Sheet.Content = SheetContent;
@@ -2501,11 +2602,7 @@ var variants3 = classVarianceAuthority.cva(
     "tw-box-border",
     "tw-border",
     "tw-border-solid",
-    "tw-border-neutral-100",
     "tw-shadow-lg",
-    // colors
-    "tw-bg-white",
-    "tw-text-neutral-800",
     // open animation
     "data-[state=open]:tw-animate-in",
     "data-[state=open]:tw-fade-in-0",
@@ -2530,8 +2627,10 @@ var variants3 = classVarianceAuthority.cva(
     },
     variants: {
       variant: {
-        default: ["tw-rounded-md"],
-        argo: ["tw-rounded-2xl"]
+        // Legacy surface — fixed white panel.
+        default: ["tw-rounded-md", "tw-border-neutral-100", "tw-bg-white", "tw-text-neutral-800"],
+        // Argo surface — semantic popover tokens (brand + dark aware).
+        argo: ["tw-rounded-2xl", "tw-border-border", "tw-bg-popover", "tw-text-popover-foreground"]
       },
       matchTriggerWidth: {
         true: ["tw-w-[var(--radix-popover-trigger-width)]"],
@@ -2550,21 +2649,25 @@ var PopoverContent = ({
   variant,
   onEscapeKeyDown,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(reactPopover.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-  reactPopover.Content,
-  {
-    ref,
-    align: matchTriggerWidth ? "start" : align,
-    sideOffset,
-    className: cn(variants3({ className, matchTriggerWidth, variant })),
-    onEscapeKeyDown: (event) => {
-      event.stopPropagation();
-      onEscapeKeyDown?.(event);
-    },
-    ...props,
-    children
-  }
-) });
+}) => {
+  const isLegacy = useIsLegacyBrand();
+  const effectiveVariant = !isLegacy || variant === "argo" ? "argo" : "default";
+  return /* @__PURE__ */ jsxRuntime.jsx(reactPopover.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    reactPopover.Content,
+    {
+      ref,
+      align: matchTriggerWidth ? "start" : align,
+      sideOffset,
+      className: cn(variants3({ className, matchTriggerWidth, variant: effectiveVariant })),
+      onEscapeKeyDown: (event) => {
+        event.stopPropagation();
+        onEscapeKeyDown?.(event);
+      },
+      ...props,
+      children
+    }
+  ) });
+};
 var Popover = (props) => /* @__PURE__ */ jsxRuntime.jsx(reactPopover.Root, { ...props });
 Popover.Content = PopoverContent;
 Popover.Trigger = reactPopover.Trigger;
@@ -2633,15 +2736,7 @@ var PopconfirmContent = ({ className, onInteractOutside, ...props }) => {
     {
       ...props,
       onInteractOutside: handleOnInteractOutside,
-      className: cn(
-        "tw-flex",
-        "tw-flex-col",
-        "tw-gap-2",
-        "tw-gap-3",
-        "tw-px-4 ",
-        "tw-py-3",
-        className
-      )
+      className: cn("tw-flex", "tw-flex-col", "tw-gap-3", "tw-px-4", "tw-py-3", className)
     }
   );
 };
@@ -2713,53 +2808,61 @@ var HoverCardContent = ({
   className,
   align = "center",
   sideOffset = 4,
+  argo,
   children,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(reactHoverCard.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-  reactHoverCard.Content,
-  {
-    ref,
-    align,
-    sideOffset,
-    "data-slot": "hover-card-content",
-    className: cn(
-      "tailwindcss-preflight",
-      "tw-group/hover-card-content",
-      "tw-z-50",
-      // border
-      "tw-box-border",
-      "tw-border",
-      "tw-border-neutral-150",
-      "tw-rounded-2xl",
-      // sizing
-      "tw-min-w-32",
-      "tw-origin-[--radix-hover-card-content-transform-origin]",
-      "tw-max-h-[var(--radix-hover-card-content-available-height)]",
-      // styles
-      "tw-bg-white",
-      "tw-p-4",
-      "tw-shadow-md",
-      // directional animations
-      "data-[side=bottom]:tw-slide-in-from-top-2",
-      "data-[side=left]:tw-slide-in-from-right-2",
-      "data-[side=right]:tw-slide-in-from-left-2",
-      "data-[side=top]:tw-slide-in-from-bottom-2",
-      // animations
-      "data-[state=open]:tw-animate-in",
-      "data-[state=open]:tw-fade-in-0",
-      "data-[state=open]:tw-zoom-in-95",
-      "data-[state=closed]:tw-animate-out",
-      "data-[state=closed]:tw-fade-out-0",
-      "data-[state=closed]:tw-zoom-out-95",
-      // Default size for nested Lucide icons; callers can override on the icon.
-      "[&_svg.lucide:not([class*='tw-size-'])]:tw-size-4",
-      "[&_svg]:tw-shrink-0",
-      className
-    ),
-    ...props,
-    children
-  }
-) });
+}) => {
+  const isLegacy = useIsLegacyBrand();
+  const renderArgo = !isLegacy || argo === true;
+  return /* @__PURE__ */ jsxRuntime.jsx(reactHoverCard.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    reactHoverCard.Content,
+    {
+      ref,
+      align,
+      sideOffset,
+      "data-slot": "hover-card-content",
+      "data-argo": renderArgo,
+      className: cn(
+        "tailwindcss-preflight",
+        "tw-group/hover-card-content",
+        "tw-z-50",
+        // border
+        "tw-box-border",
+        "tw-border",
+        "tw-rounded-2xl",
+        // sizing
+        "tw-min-w-32",
+        "tw-origin-[--radix-hover-card-content-transform-origin]",
+        "tw-max-h-[var(--radix-hover-card-content-available-height)]",
+        // padding + shared shadow
+        "tw-p-4",
+        "tw-shadow-md",
+        // legacy chrome — default
+        "tw-border-neutral-150 tw-bg-white",
+        // argo chrome overrides — semantic floating-panel tokens
+        "data-[argo=true]:tw-border-solid data-[argo=true]:tw-border-border data-[argo=true]:tw-bg-popover data-[argo=true]:tw-text-popover-foreground",
+        // directional animations
+        "data-[side=bottom]:tw-slide-in-from-top-2",
+        "data-[side=left]:tw-slide-in-from-right-2",
+        "data-[side=right]:tw-slide-in-from-left-2",
+        "data-[side=top]:tw-slide-in-from-bottom-2",
+        // animations
+        "data-[state=open]:tw-animate-in",
+        "data-[state=open]:tw-fade-in-0",
+        "data-[state=open]:tw-zoom-in-95",
+        "data-[state=closed]:tw-animate-out",
+        "data-[state=closed]:tw-fade-out-0",
+        "data-[state=closed]:tw-zoom-out-95",
+        // Default size for nested Lucide icons; callers can override on the icon.
+        "[&_svg.lucide:not([class*='tw-size-'])]:tw-size-4",
+        "[&_svg]:tw-shrink-0",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) });
+};
 var HoverCard = ({ openDelay = 200, closeDelay = 200, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(reactHoverCard.Root, { ...rest, openDelay, closeDelay });
 HoverCard.Content = HoverCardContent;
 HoverCard.Trigger = reactHoverCard.Trigger;
@@ -2788,10 +2891,10 @@ var CommandGroup = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
       "[&_[cmdk-group-heading]]:tw-py-0.5",
       "[&_[cmdk-group-heading]]:tw-uppercase",
       "[&_[cmdk-group-heading]]:tw-text-[11px]",
-      "[&_[cmdk-group-heading]]:tw-text-neutral-400",
+      "[&_[cmdk-group-heading]]:tw-text-muted-foreground",
       "[&_[cmdk-group-heading]]:tw-tracking-[1px]",
       "[&_[cmdk-group-heading]]:tw-border-b",
-      "[&_[cmdk-group-heading]]:tw-border-neutral-150",
+      "[&_[cmdk-group-heading]]:tw-border-border",
       "[&_[cmdk-group-heading]]:tw-my-2",
       className
     ),
@@ -2799,13 +2902,13 @@ var CommandGroup = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   }
 );
 var dayPickerClassNames = {
-  selected: `tw-bg-secondary-500 tw-border-secondary-500 tw-font-medium hover:tw-bg-secondary-600 hover:tw-border-secondary-600 tw-text-white tw-rounded`
+  selected: `tw-bg-primary tw-border-primary tw-font-medium hover:tw-bg-primary/90 hover:tw-border-primary/90 tw-text-primary-foreground tw-rounded`
 };
 var rangePickerClassNames = {
-  range_start: `tw-bg-secondary-500 tw-rounded-r-none tw-font-medium tw-border-secondary-500 hover:tw-bg-secondary-600 hover:tw-border-secondary-600 tw-text-white`,
-  range_end: `tw-bg-secondary-500 tw-rounded-l-none tw-font-medium tw-border-secondary-500 hover:tw-bg-secondary-600 hover:tw-border-secondary-600 tw-text-white`,
+  range_start: `tw-bg-primary tw-rounded-r-none tw-font-medium tw-border-primary hover:tw-bg-primary/90 hover:tw-border-primary/90 tw-text-primary-foreground`,
+  range_end: `tw-bg-primary tw-rounded-l-none tw-font-medium tw-border-primary hover:tw-bg-primary/90 hover:tw-border-primary/90 tw-text-primary-foreground`,
   selected: `tw-font-medium tw-rounded`,
-  range_middle: `tw-bg-secondary-300 tw-border-secondary-300 tw-rounded-none tw-font-medium`
+  range_middle: `tw-bg-accent tw-border-accent tw-text-accent-foreground tw-rounded-none tw-font-medium`
 };
 var Calendar = ({ className, classNames, ...props }) => {
   const defaultClassNames = reactDayPicker.getDefaultClassNames();
@@ -2816,10 +2919,10 @@ var Calendar = ({ className, classNames, ...props }) => {
       captionLayout: "dropdown",
       className: cn(className, "tw-p-3"),
       classNames: {
-        chevron: `${defaultClassNames.chevron} tw-fill-secondary-500`,
-        day: `${defaultClassNames.day} hover:tw-bg-secondary-200 tw-rounded`,
+        chevron: `${defaultClassNames.chevron} tw-fill-foreground`,
+        day: `${defaultClassNames.day} hover:tw-bg-accent tw-rounded`,
         day_button: `${defaultClassNames.day_button} tw-rounded`,
-        today: `tw-bg-secondary-100 tw-font-medium`,
+        today: `tw-bg-accent tw-text-accent-foreground tw-font-medium`,
         ...dayPickerClassNames,
         ...rangePickerClassNames,
         selected: `${props.mode === "range" ? rangePickerClassNames.selected : dayPickerClassNames.selected}`,
@@ -2833,27 +2936,31 @@ Calendar.displayName = "Calendar";
 var DatePicker = ({
   align = "end",
   alignOffset = -18,
-  argo = false,
+  argo,
   children,
   defaultOpen,
   onOpenChange,
   open,
   sideOffset = 12,
   ...calendarProps
-}) => /* @__PURE__ */ jsxRuntime.jsxs(Popover, { defaultOpen, open, onOpenChange, children: [
-  /* @__PURE__ */ jsxRuntime.jsx(Popover.Trigger, { asChild: true, children }),
-  /* @__PURE__ */ jsxRuntime.jsx(
-    Popover.Content,
-    {
-      align,
-      alignOffset,
-      className: "tw-w-auto tw-p-0",
-      sideOffset,
-      variant: argo ? "argo" : "default",
-      children: /* @__PURE__ */ jsxRuntime.jsx(Calendar, { ...calendarProps })
-    }
-  )
-] });
+}) => {
+  const isLegacy = useIsLegacyBrand();
+  const renderArgo = !isLegacy || argo === true;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { defaultOpen, open, onOpenChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Popover.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Popover.Content,
+      {
+        align,
+        alignOffset,
+        className: "tw-w-auto tw-p-0",
+        sideOffset,
+        variant: renderArgo ? "argo" : "default",
+        children: /* @__PURE__ */ jsxRuntime.jsx(Calendar, { ...calendarProps })
+      }
+    )
+  ] });
+};
 DatePicker.displayName = "DatePicker";
 var addonVariants = classVarianceAuthority.cva(
   [
@@ -3137,7 +3244,8 @@ var inputGroupVariants = classVarianceAuthority.cva(
           "has-[:is(input,textarea):disabled]:tw-opacity-40"
         ],
         argo: [
-          "tw-bg-background",
+          // muted filled input surface — gray, distinct from white containers; not the app-background token
+          "tw-bg-muted",
           "tw-border-input",
           "tw-rounded-lg",
           "tw-text-foreground",
@@ -3191,15 +3299,28 @@ var InputGroupRoot = ({
   focusVariant,
   className,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
-  {
-    ...props,
-    ref,
-    className: cn(inputGroupVariants({ state, variant, sizing, focusVariant, className })),
-    children
-  }
-);
+}) => {
+  const isLegacy = useIsLegacyBrand();
+  const effectiveVariant = !isLegacy || variant === "argo" ? "argo" : variant;
+  const effectiveSizing = effectiveVariant === "argo" ? "medium" : sizing;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      ref,
+      className: cn(
+        inputGroupVariants({
+          state,
+          variant: effectiveVariant,
+          sizing: effectiveSizing,
+          focusVariant,
+          className
+        })
+      ),
+      children
+    }
+  );
+};
 var InputGroup = InputGroupRoot;
 InputGroup.Input = InputGroupInput;
 InputGroup.Addon = InputGroupAddon;
@@ -3312,7 +3433,7 @@ var Input = ({
             "div",
             {
               className: cn({
-                "tw-whitespace-nowrap tw-bg-neutral-200 tw-px-4 -tw-mr-4 tw-py-2.5": rightSuffixVariant === "addon"
+                "tw-whitespace-nowrap tw-bg-muted tw-px-4 -tw-mr-4 tw-py-2.5": rightSuffixVariant === "addon"
               }),
               children: rightSuffix
             }
@@ -3376,6 +3497,7 @@ var DateInput = ({
   readOnly,
   startMonth,
   value,
+  variant,
   ...props
 }) => {
   const [inputValue, setInputValue] = react.useState("");
@@ -3445,6 +3567,7 @@ var DateInput = ({
       readOnly,
       ref,
       value: displayValue,
+      variant,
       rightSuffix: !disabled && !readOnly ? /* @__PURE__ */ jsxRuntime.jsx(
         DatePicker,
         {
@@ -3601,6 +3724,7 @@ var TextInput = ({
   value,
   defaultValue,
   type = "text",
+  variant,
   onValueChange,
   onChange,
   onValueBlur,
@@ -3623,6 +3747,7 @@ var TextInput = ({
       onChange: handleChange,
       onBlur: handleBlur,
       type,
+      variant,
       value: sanitizeTextInputValue(value),
       defaultValue: sanitizeTextInputValue(defaultValue)
     }
@@ -3648,12 +3773,12 @@ var TimePickerButton = ({
       "tw-rounded",
       "tw-transition-colors",
       "tw-select-none",
-      "hover:tw-bg-secondary-200",
+      "hover:tw-bg-accent",
       "focus-visible:tw-outline",
       "focus-visible:tw-outline-2",
-      "focus-visible:tw-outline-secondary-500",
-      "aria-selected:tw-bg-secondary-500",
-      "aria-selected:tw-text-white",
+      "focus-visible:tw-outline-primary",
+      "aria-selected:tw-bg-primary",
+      "aria-selected:tw-text-primary-foreground",
       className
     ),
     children
@@ -3684,7 +3809,7 @@ var MINUTES = Array.from({ length: 60 }, (_, i) => i);
 var TimePicker = ({
   align = "end",
   alignOffset = -18,
-  argo = false,
+  argo,
   children,
   defaultOpen,
   defaultSelected,
@@ -3694,6 +3819,8 @@ var TimePicker = ({
   selected,
   sideOffset = 12
 }) => {
+  const isLegacy = useIsLegacyBrand();
+  const renderArgo = !isLegacy || argo;
   const [internalSelected, setInternalSelected] = react.useState(defaultSelected ?? null);
   const isControlled = selected !== void 0;
   const currentValue = isControlled ? selected : internalSelected;
@@ -3723,7 +3850,7 @@ var TimePicker = ({
         alignOffset,
         sideOffset,
         className: "tw-flex tw-flex-row",
-        variant: argo ? "argo" : "default",
+        variant: renderArgo ? "argo" : "default",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { type: "always", ref: scrollToSelected, viewPortClassName: "tw-h-60 tw-px-3", children: HOURS.map((value) => /* @__PURE__ */ jsxRuntime.jsx(
             TimePickerButton,
@@ -3759,6 +3886,7 @@ var TimeInput = ({
   placeholder = "Select time",
   readOnly,
   value,
+  variant,
   className,
   ...props
 }) => {
@@ -3804,6 +3932,7 @@ var TimeInput = ({
       placeholder,
       className: cn("[&_input::-webkit-calendar-picker-indicator]:tw-hidden", className),
       value: currentValue,
+      variant,
       onChange: handleChange,
       onBlur: handleBlur,
       onClear: currentValue ? handleClear : void 0,
@@ -3962,7 +4091,7 @@ var CommandItem = ({
       ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(CheckIndicator, { variant }),
-        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:not([class*='tw-size-'])]:tw-size-4", children: icon }),
+        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-inline-flex tw-size-4 tw-shrink-0 tw-items-center tw-justify-center tw-text-muted-foreground [&_svg:not([class*='tw-size-'])]:tw-size-4", children: icon }),
         children
       ]
     }
@@ -4012,14 +4141,18 @@ var CommandSeparator = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.j
     ...props
   }
 );
-var Command = ({ className, variant = "default", ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
-  cmdk.Command,
-  {
-    "data-variant": variant,
-    className: cn("tw-group/command", "tailwindcss-preflight", className),
-    ...rest
-  }
-);
+var Command = ({ className, variant, ...rest }) => {
+  const isLegacy = useIsLegacyBrand();
+  const effectiveVariant = !isLegacy || variant === "argo" ? "argo" : "default";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    cmdk.Command,
+    {
+      "data-variant": effectiveVariant,
+      className: cn("tw-group/command", "tailwindcss-preflight", className),
+      ...rest
+    }
+  );
+};
 Command.Content = CommandContent;
 Command.Separator = CommandSeparator;
 Command.List = CommandList;
@@ -4064,7 +4197,7 @@ var DateRangePicker = ({
     }
   ) }),
   /* @__PURE__ */ jsxRuntime.jsx(Popover.Content, { variant: "argo", align: "start", className: "tw-w-auto tw-p-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex", children: [
-    presets && presets.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-flex tw-flex-col tw-gap-1 tw-border-r tw-border-solid tw-border-neutral-100 tw-p-2", children: presets.map((preset) => /* @__PURE__ */ jsxRuntime.jsx(
+    presets && presets.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-flex tw-flex-col tw-gap-1 tw-border-r tw-border-solid tw-border-border tw-p-2", children: presets.map((preset) => /* @__PURE__ */ jsxRuntime.jsx(
       Button,
       {
         argo: true,
@@ -4095,7 +4228,7 @@ var DateRangePicker = ({
   ] }) })
 ] });
 DateRangePicker.displayName = "DateRangePicker";
-var Optional = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("tw-text-neutral-400", className), children: "(optional)" });
+var Optional = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("tw-text-muted-foreground", className), children: "(optional)" });
 var Label2 = ({ className, children, id, htmlFor, ...rest }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     RLabel__namespace.Root,
@@ -4104,7 +4237,7 @@ var Label2 = ({ className, children, id, htmlFor, ...rest }) => {
       id: id?.toString(),
       htmlFor: htmlFor?.toString(),
       className: cn(
-        "tw-m-0 tw-text-neutral-800 tw-font-normal peer-disabled:tw-opacity-50",
+        "tw-m-0 tw-text-foreground tw-font-normal peer-disabled:tw-opacity-50",
         className
       ),
       children
@@ -4375,7 +4508,8 @@ var Switch = ({
 }) => {
   const fallbackId = react.useId();
   const id = idProp?.toString() ?? fallbackId;
-  const switchVariant = argo ? "argo" : "default";
+  const isLegacy = useIsLegacyBrand();
+  const switchVariant = !isLegacy || argo ? "argo" : "default";
   const switchElement = /* @__PURE__ */ jsxRuntime.jsx(
     reactSwitch.Root,
     {
@@ -4395,110 +4529,163 @@ var Switch = ({
 };
 var RadioGroupContext = react.createContext({
   variant: "radio",
-  orientation: "horizontal"
+  orientation: "horizontal",
+  groupArgo: false
 });
 var RadioGroupProvider = RadioGroupContext;
 var useRadioGroupContext = () => react.use(RadioGroupContext);
-var Radio = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-  RRadioGroup.Item,
+var radioVariants = classVarianceAuthority.cva(
+  [
+    // reset
+    "tw-bg-transparent",
+    "tw-p-0",
+    "tw-peer",
+    "tw-cursor-pointer",
+    "tw-whitespace-nowrap",
+    "tw-shrink-0",
+    // position
+    "tw-flex",
+    "tw-items-center",
+    "tw-justify-center",
+    "disabled:tw-cursor-not-allowed",
+    "tw-size-4",
+    // border
+    "tw-rounded-full",
+    "tw-border",
+    "tw-border-solid"
+  ],
   {
-    ...props,
-    className: cn(
-      // reset
-      "tw-bg-transparent",
-      "tw-p-0",
-      "tw-peer",
-      "tw-cursor-pointer",
-      "tw-whitespace-nowrap",
-      "tw-shrink-0",
-      // position
-      "tw-flex",
-      "tw-items-center",
-      "tw-justify-center",
-      // disabled
-      "disabled:tw-opacity-40",
-      "disabled:tw-cursor-not-allowed",
-      "tw-size-4",
-      // border
-      "tw-rounded-full",
-      "tw-border",
-      "tw-border-solid",
-      // checked state - border only
-      "data-[state=checked]:tw-border-primary",
-      // unchecked state
-      "data-[state=unchecked]:tw-border-neutral-200",
-      // unchecked:hover state
-      "data-[state=unchecked]:hover:tw-border-primary",
-      // unchecked:hover:disabled state
-      "data-[state=unchecked]:disabled:hover:tw-border-neutral-200",
-      // focus-visible ring
-      "focus-visible:tw-ring-2",
-      "focus-visible:tw-ring-secondary-200",
-      className
-    ),
-    children: /* @__PURE__ */ jsxRuntime.jsx(RRadioGroup.Indicator, { className: cn("tw-flex", "tw-items-center", "tw-justify-center"), children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Circle, { className: "tw-size-2.5 tw-fill-current tw-text-primary" }) })
+    defaultVariants: {
+      variant: "default"
+    },
+    variants: {
+      variant: {
+        default: [
+          "disabled:tw-opacity-40",
+          "data-[state=checked]:tw-border-primary",
+          "data-[state=unchecked]:tw-border-neutral-200",
+          "data-[state=unchecked]:hover:tw-border-primary",
+          "data-[state=unchecked]:disabled:hover:tw-border-neutral-200",
+          "focus-visible:tw-ring-2",
+          "focus-visible:tw-ring-secondary-200"
+        ],
+        argo: [
+          "disabled:tw-opacity-50",
+          "tw-border-input",
+          "tw-transition-colors",
+          "data-[state=checked]:tw-bg-primary",
+          "data-[state=checked]:tw-border-primary",
+          "data-[state=unchecked]:not-disabled:hover:tw-bg-accent",
+          "data-[state=checked]:not-disabled:hover:tw-bg-primary",
+          "focus-visible:tw-outline-none",
+          "focus-visible:tw-border-primary",
+          "focus-visible:tw-ring-2",
+          "focus-visible:tw-ring-primary/50"
+        ]
+      }
+    }
+  }
+);
+var radioIndicatorVariants = classVarianceAuthority.cva(["tw-size-2.5", "tw-fill-current"], {
+  defaultVariants: {
+    variant: "default"
+  },
+  variants: {
+    variant: {
+      default: ["tw-text-primary"],
+      argo: ["tw-text-primary-foreground"]
+    }
+  }
+});
+var radioItemButtonVariants = classVarianceAuthority.cva(
+  [
+    // reset
+    "tw-bg-transparent",
+    "tw-p-0",
+    "tw-peer",
+    "tw-cursor-pointer",
+    "tw-whitespace-nowrap",
+    // position
+    "tw-flex",
+    "tw-items-center",
+    "tw-justify-center",
+    "disabled:tw-cursor-not-allowed",
+    // layouts
+    "tw-w-full",
+    "tw-px-2",
+    "tw-py-1.5",
+    // fonts
+    "tw-uppercase",
+    "tw-font-semibold",
+    "tw-font-sans",
+    "tw-text-[11px]",
+    "tw-whitespace-nowrap",
+    "tw-tracking-widest",
+    "tw-leading-[18px]",
+    // border
+    "tw-border",
+    "tw-border-solid",
+    "tw-rounded"
+  ],
+  {
+    defaultVariants: {
+      variant: "default"
+    },
+    variants: {
+      variant: {
+        default: [
+          "disabled:tw-opacity-40",
+          "tw-text-secondary-600",
+          "tw-border-secondary-500",
+          "data-[state=unchecked]:hover:tw-bg-secondary-500",
+          "data-[state=unchecked]:hover:tw-text-white",
+          "data-[state=unchecked]:disabled:hover:tw-bg-white",
+          "data-[state=unchecked]:disabled:hover:tw-text-secondary-500",
+          "data-[state=checked]:disabled:tw-cursor-not-allowed",
+          "data-[state=unchecked]:tw-bg-white",
+          "data-[state=checked]:tw-bg-secondary-500",
+          "data-[state=checked]:tw-text-white",
+          "data-[state=checked]:tw-cursor-default",
+          "focus-visible:tw-outline",
+          "focus-visible:tw-outline-secondary-500",
+          "focus-visible:tw-ring-4",
+          "focus-visible:tw-ring-secondary-200"
+        ],
+        argo: [
+          "disabled:tw-opacity-50",
+          "tw-text-foreground",
+          "tw-border-input",
+          "tw-transition-colors",
+          // muted filled control surface — gray, distinct from white containers; not the app-background token
+          "data-[state=unchecked]:tw-bg-muted",
+          "data-[state=unchecked]:not-disabled:hover:tw-bg-accent",
+          "data-[state=unchecked]:not-disabled:hover:tw-text-accent-foreground",
+          "data-[state=checked]:tw-bg-primary",
+          "data-[state=checked]:tw-border-primary",
+          "data-[state=checked]:tw-text-primary-foreground",
+          "data-[state=checked]:not-disabled:tw-cursor-default",
+          "focus-visible:tw-outline-none",
+          "focus-visible:tw-border-primary",
+          "focus-visible:tw-ring-2",
+          "focus-visible:tw-ring-primary/50"
+        ]
+      }
+    }
   }
 );
+var Radio = ({ className, styleVariant = "default", ...props }) => /* @__PURE__ */ jsxRuntime.jsx(RRadioGroup.Item, { ...props, className: cn(radioVariants({ variant: styleVariant }), className), children: /* @__PURE__ */ jsxRuntime.jsx(RRadioGroup.Indicator, { className: cn("tw-flex", "tw-items-center", "tw-justify-center"), children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Circle, { className: radioIndicatorVariants({ variant: styleVariant }) }) }) });
 var RadioGroupItemButton = ({
   ref,
   className,
   children,
+  styleVariant = "default",
   ...props
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   RRadioGroup.Item,
   {
     ref,
     ...props,
-    className: cn(
-      // reset
-      "tw-bg-transparent",
-      "tw-p-0",
-      "tw-peer",
-      "tw-cursor-pointer",
-      "tw-whitespace-nowrap",
-      // position
-      "tw-flex",
-      "tw-items-center",
-      "tw-justify-center",
-      // disabled
-      "disabled:tw-opacity-40",
-      "disabled:tw-cursor-not-allowed",
-      // layouts
-      "tw-w-full",
-      "tw-px-2",
-      "tw-py-1.5",
-      // fonts
-      "tw-text-secondary-600",
-      "tw-uppercase",
-      "tw-font-semibold",
-      "tw-font-sans",
-      "tw-text-[11px]",
-      "tw-whitespace-nowrap",
-      "tw-tracking-widest",
-      "tw-leading-[18px]",
-      // border
-      "tw-border",
-      "tw-border-solid",
-      "tw-border-secondary-500",
-      "tw-rounded",
-      // hover
-      "data-[state=unchecked]:hover:tw-bg-secondary-500",
-      "data-[state=unchecked]:hover:tw-text-white",
-      // disabled
-      "data-[state=unchecked]:disabled:hover:tw-bg-white",
-      "data-[state=unchecked]:disabled:hover:tw-text-secondary-500",
-      "data-[state=checked]:disabled:tw-cursor-not-allowed",
-      // states
-      "data-[state=unchecked]:tw-bg-white",
-      "data-[state=checked]:tw-bg-secondary-500",
-      "data-[state=checked]:tw-text-white",
-      "data-[state=checked]:tw-cursor-default",
-      "focus-visible:tw-outline",
-      "focus-visible:tw-outline-secondary-500",
-      "focus-visible:tw-ring-4",
-      "focus-visible:tw-ring-secondary-200",
-      className
-    ),
+    className: cn(radioItemButtonVariants({ variant: styleVariant }), className),
     children
   }
 );
@@ -4508,19 +4695,22 @@ var RadioGroupItem = ({
   tooltipVariant,
   tooltipPlacement,
   description,
+  argo,
   ...props
 }) => {
-  const { variant } = useRadioGroupContext();
+  const { variant, groupArgo } = useRadioGroupContext();
+  const isLegacy = useIsLegacyBrand();
+  const styleVariant = argo === true || groupArgo || !isLegacy ? "argo" : "default";
   const id = react.useId();
   const item = (() => {
     if (variant === "button")
-      return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItemButton, { ...props, children });
+      return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItemButton, { styleVariant, ...props, children });
     return /* @__PURE__ */ jsxRuntime.jsxs(
       FieldBox,
       {
         variant: variant === "radio-block" ? "boxed" : "default",
         htmlFor: id,
-        control: /* @__PURE__ */ jsxRuntime.jsx(Radio, { ...props, id }),
+        control: /* @__PURE__ */ jsxRuntime.jsx(Radio, { styleVariant, ...props, id }),
         className: variant === "radio-block" ? "tw-flex-1" : void 0,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(FieldBox.Title, { children }),
@@ -4655,12 +4845,15 @@ var RadioGroup2 = ({
   className,
   disabled = false,
   orientation = "horizontal",
+  argo,
   onValueChange,
   children,
   value,
   defaultValue,
   ...props
 }) => {
+  const isLegacy = useIsLegacyBrand();
+  const groupArgo = !isLegacy || argo === true;
   return /* @__PURE__ */ jsxRuntime.jsx(
     RRadioGroup__namespace.Root,
     {
@@ -4671,7 +4864,7 @@ var RadioGroup2 = ({
       disabled,
       value: value ?? void 0,
       defaultValue: defaultValue ?? void 0,
-      children: /* @__PURE__ */ jsxRuntime.jsx(RadioGroupProvider, { value: { variant, orientation }, children })
+      children: /* @__PURE__ */ jsxRuntime.jsx(RadioGroupProvider, { value: { variant, orientation, groupArgo }, children })
     }
   );
 };
@@ -5119,67 +5312,72 @@ var SelectContent = ({
   container,
   position = "popper",
   sideOffset = 4,
-  variant = "default",
+  variant,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { container, children: /* @__PURE__ */ jsxRuntime.jsxs(
-  SelectPrimitive__namespace.Content,
-  {
-    ...props,
-    ref,
-    position,
-    sideOffset,
-    "data-variant": variant,
-    className: cn(
-      "tailwindcss-preflight",
-      "tw-group/select-content",
-      "tw-z-[1040]",
-      // layout
-      "tw-flex tw-flex-col",
-      "tw-p-1",
-      "data-[variant=default]:tw-p-0",
-      "tw-overflow-hidden",
-      "tw-origin-[--radix-select-content-transform-origin]",
-      // sizing
-      "tw-max-h-[var(--radix-select-content-available-height)]",
-      "tw-min-w-[var(--radix-select-trigger-width)]",
-      // appearance
-      "tw-bg-popover",
-      "tw-text-popover-foreground",
-      "tw-shadow-md",
-      "tw-ring-1",
-      "tw-ring-foreground/10",
-      "tw-rounded-lg",
-      "data-[variant=default]:tw-rounded",
-      // open animation
-      "data-[state=open]:tw-animate-in",
-      "data-[state=open]:tw-fade-in-0",
-      "data-[state=open]:tw-zoom-in-95",
-      // closed animation
-      "data-[state=closed]:tw-animate-out",
-      "data-[state=closed]:tw-fade-out-0",
-      "data-[state=closed]:tw-zoom-out-95",
-      // position animations
-      "data-[side=bottom]:tw-slide-in-from-top-2",
-      "data-[side=left]:tw-slide-in-from-right-2",
-      "data-[side=right]:tw-slide-in-from-left-2",
-      "data-[side=top]:tw-slide-in-from-bottom-2",
-      className
-    ),
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ScrollUpButton, { className: scrollButtonStyles, children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.ChevronUp, {}) }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        SelectPrimitive__namespace.Viewport,
-        {
-          className: cn({
-            "tw-h-[var(--radix-select-trigger-height)] tw-w-full tw-min-w-[var(--radix-select-trigger-width)]": position === "popper"
-          }),
-          children
-        }
+}) => {
+  const isLegacy = useIsLegacyBrand();
+  const effectiveVariant = !isLegacy || variant === "argo" ? "argo" : "default";
+  return /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { container, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    SelectPrimitive__namespace.Content,
+    {
+      ...props,
+      ref,
+      position,
+      sideOffset,
+      "data-variant": effectiveVariant,
+      className: cn(
+        "tailwindcss-preflight",
+        "tw-group/select-content",
+        // Floating tier above Modal (1051): Tooltip 1060 / Combobox·Popover·Select 1055 / Modal 1051 / DropdownMenu.SubContent 1041 / FullScreenModal 1039
+        "tw-z-[1055]",
+        // layout
+        "tw-flex tw-flex-col",
+        "tw-p-1",
+        "data-[variant=default]:tw-p-0",
+        "tw-overflow-hidden",
+        "tw-origin-[--radix-select-content-transform-origin]",
+        // sizing
+        "tw-max-h-[var(--radix-select-content-available-height)]",
+        "tw-min-w-[var(--radix-select-trigger-width)]",
+        // appearance
+        "tw-bg-popover",
+        "tw-text-popover-foreground",
+        "tw-shadow-md",
+        "tw-ring-1",
+        "tw-ring-foreground/10",
+        "tw-rounded-lg",
+        "data-[variant=default]:tw-rounded",
+        // open animation
+        "data-[state=open]:tw-animate-in",
+        "data-[state=open]:tw-fade-in-0",
+        "data-[state=open]:tw-zoom-in-95",
+        // closed animation
+        "data-[state=closed]:tw-animate-out",
+        "data-[state=closed]:tw-fade-out-0",
+        "data-[state=closed]:tw-zoom-out-95",
+        // position animations
+        "data-[side=bottom]:tw-slide-in-from-top-2",
+        "data-[side=left]:tw-slide-in-from-right-2",
+        "data-[side=right]:tw-slide-in-from-left-2",
+        "data-[side=top]:tw-slide-in-from-bottom-2",
+        className
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ScrollDownButton, { className: scrollButtonStyles, children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.ChevronDown, {}) })
-    ]
-  }
-) });
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ScrollUpButton, { className: scrollButtonStyles, children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.ChevronUp, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SelectPrimitive__namespace.Viewport,
+          {
+            className: cn({
+              "tw-h-[var(--radix-select-trigger-height)] tw-w-full tw-min-w-[var(--radix-select-trigger-width)]": position === "popper"
+            }),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ScrollDownButton, { className: scrollButtonStyles, children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.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 SelectItem = ({
   ref,
@@ -5228,7 +5426,7 @@ var SelectItem = ({
       className
     ),
     children: [
-      renderLegacyIcon(icon),
+      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(icons_exports.Check, { className: "tw-size-4" }) })
     ]
@@ -5245,7 +5443,7 @@ var SelectLabel = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
       "tw-text-xs",
       "tw-font-medium",
       "tw-leading-none",
-      "tw-text-neutral-500",
+      "tw-text-muted-foreground",
       // Default variant — uppercase tracked label, matches Combobox default
       "group-data-[variant=default]/select-content:tw-uppercase",
       "group-data-[variant=default]/select-content:tw-font-semibold",
@@ -5263,7 +5461,7 @@ var SelectSeparator = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.js
   SelectPrimitive__namespace.Separator,
   {
     ...props,
-    className: cn("tw-mx-2 tw-my-1 tw-h-px tw-bg-neutral-100", className)
+    className: cn("tw-mx-2 tw-my-1 tw-h-px tw-bg-border", className)
   }
 );
 var variants4 = classVarianceAuthority.cva(
@@ -5350,7 +5548,8 @@ var variants4 = classVarianceAuthority.cva(
           "aria-disabled:tw-opacity-40"
         ],
         argo: [
-          "tw-bg-background",
+          // muted filled input surface — gray, distinct from white containers; not the app-background token
+          "tw-bg-muted",
           "tw-border-input",
           "tw-rounded-lg",
           "tw-text-foreground",
@@ -5397,18 +5596,22 @@ var SelectTrigger = ({
   sizing,
   placeholder,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsxs(
-  SelectPrimitive__namespace.Trigger,
-  {
-    ref,
-    className: cn(variants4({ variant, state, sizing }), className),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Value, { placeholder }),
-      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.ChevronDown, { className: "tw-size-5 tw-text-muted-foreground" }) })
-    ]
-  }
-);
+}) => {
+  const isLegacy = useIsLegacyBrand();
+  const effectiveVariant = !isLegacy || variant === "argo" ? "argo" : variant;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    SelectPrimitive__namespace.Trigger,
+    {
+      ref,
+      className: cn(variants4({ variant: effectiveVariant, state, sizing }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Value, { placeholder }),
+        /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.ChevronDown, { className: "tw-size-5 tw-text-muted-foreground" }) })
+      ]
+    }
+  );
+};
 var isGroup = (itemOrGroup) => "items" in itemOrGroup;
 var Select = ({
   // root
@@ -5569,7 +5772,8 @@ function Checkbox({
 }) {
   const fallbackId = react.useId();
   const id = idProp?.toString() ?? fallbackId;
-  const styleVariant = argo ? "argo" : "default";
+  const isLegacy = useIsLegacyBrand();
+  const styleVariant = !isLegacy || argo ? "argo" : "default";
   const checkboxElement = /* @__PURE__ */ jsxRuntime.jsx(reactCheckbox.Root, { id, ...rest, className: cn(rootVariants2({ variant: styleVariant, className })), children: /* @__PURE__ */ jsxRuntime.jsxs(reactCheckbox.Indicator, { className: cn(indicatorVariants({ variant: styleVariant })), children: [
     /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Check, { className: "tw-hidden tw-size-3 tw-stroke-[4px] group-data-[state=checked]:tw-block" }),
     /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Minus, { className: "tw-hidden tw-size-3 tw-stroke-[4px] group-data-[state=indeterminate]:tw-block" })
@@ -5901,66 +6105,70 @@ var ComboboxContent = ({
   container,
   className,
   children,
-  variant = "default",
+  variant,
   ...popupProps
-}) => /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Portal, { container, children: /* @__PURE__ */ jsxRuntime.jsx(
-  combobox.Combobox.Positioner,
-  {
-    align,
-    side,
-    sideOffset,
-    alignOffset,
-    anchor,
-    className: "tailwindcss-preflight tw-isolate tw-z-[1055]",
-    children: /* @__PURE__ */ jsxRuntime.jsx(
-      combobox.Combobox.Popup,
-      {
-        ref,
-        "data-chips": !!anchor,
-        "data-variant": variant,
-        className: cn(
-          "!tw-pointer-events-auto",
-          "tw-group/combobox-content",
-          "tw-relative",
-          "tw-flex tw-flex-col tw-overflow-hidden",
-          // sizing
-          "tw-max-h-[var(--available-height)]",
-          "tw-w-[var(--anchor-width)]",
-          "tw-max-w-[var(--available-width)]",
-          "tw-origin-[var(--transform-origin)]",
-          "data-[chips=true]:tw-min-w-[var(--anchor-width)]",
-          // appearance
-          "tw-rounded-lg",
-          "data-[variant=default]:tw-rounded",
-          "tw-bg-popover",
-          "tw-text-popover-foreground",
-          "tw-shadow-md",
-          "tw-ring-1",
-          "tw-ring-foreground/10",
-          "tw-duration-100",
-          // open animation
-          "data-open:animate-in",
-          "data-open:fade-in-0",
-          "data-open:zoom-in-95",
-          // closed animation
-          "data-closed:animate-out",
-          "data-closed:fade-out-0",
-          "data-closed:zoom-out-95",
-          // position animations
-          "data-[side=bottom]:tw-slide-in-from-top-2",
-          "data-[side=top]:tw-slide-in-from-bottom-2",
-          "data-[side=left]:tw-slide-in-from-right-2",
-          "data-[side=right]:tw-slide-in-from-left-2",
-          "data-[side=inline-start]:tw-slide-in-from-right-2",
-          "data-[side=inline-end]:tw-slide-in-from-left-2",
-          className
-        ),
-        ...popupProps,
-        children
-      }
-    )
-  }
-) });
+}) => {
+  const isLegacy = useIsLegacyBrand();
+  const effectiveVariant = !isLegacy || variant === "argo" ? "argo" : "default";
+  return /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Portal, { container, children: /* @__PURE__ */ jsxRuntime.jsx(
+    combobox.Combobox.Positioner,
+    {
+      align,
+      side,
+      sideOffset,
+      alignOffset,
+      anchor,
+      className: "tailwindcss-preflight tw-isolate tw-z-[1055]",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        combobox.Combobox.Popup,
+        {
+          ref,
+          "data-chips": !!anchor,
+          "data-variant": effectiveVariant,
+          className: cn(
+            "!tw-pointer-events-auto",
+            "tw-group/combobox-content",
+            "tw-relative",
+            "tw-flex tw-flex-col tw-overflow-hidden",
+            // sizing
+            "tw-max-h-[var(--available-height)]",
+            "tw-w-[var(--anchor-width)]",
+            "tw-max-w-[var(--available-width)]",
+            "tw-origin-[var(--transform-origin)]",
+            "data-[chips=true]:tw-min-w-[var(--anchor-width)]",
+            // appearance
+            "tw-rounded-lg",
+            "data-[variant=default]:tw-rounded",
+            "tw-bg-popover",
+            "tw-text-popover-foreground",
+            "tw-shadow-md",
+            "tw-ring-1",
+            "tw-ring-foreground/10",
+            "tw-duration-100",
+            // open animation
+            "data-open:animate-in",
+            "data-open:fade-in-0",
+            "data-open:zoom-in-95",
+            // closed animation
+            "data-closed:animate-out",
+            "data-closed:fade-out-0",
+            "data-closed:zoom-out-95",
+            // position animations
+            "data-[side=bottom]:tw-slide-in-from-top-2",
+            "data-[side=top]:tw-slide-in-from-bottom-2",
+            "data-[side=left]:tw-slide-in-from-right-2",
+            "data-[side=right]:tw-slide-in-from-left-2",
+            "data-[side=inline-start]:tw-slide-in-from-right-2",
+            "data-[side=inline-end]:tw-slide-in-from-left-2",
+            className
+          ),
+          ...popupProps,
+          children
+        }
+      )
+    }
+  ) });
+};
 var ComboboxEmpty = ({
   ref,
   className,
@@ -6159,7 +6367,7 @@ var ComboboxSeparator = ({
   combobox.Combobox.Separator,
   {
     ref,
-    className: cn("tw-mx-2 tw-my-1 tw-h-px tw-bg-neutral-100", className),
+    className: cn("tw-mx-2 tw-my-1 tw-h-px tw-bg-border", className),
     ...props
   }
 );
@@ -6193,7 +6401,7 @@ var ComboboxGroupLabel = ({
       "tw-text-xs",
       "tw-font-medium",
       "tw-leading-none",
-      "tw-text-neutral-500",
+      "tw-text-muted-foreground",
       "group-data-[variant=default]/combobox-content:tw-uppercase",
       "group-data-[variant=default]/combobox-content:tw-font-semibold",
       "group-data-[variant=default]/combobox-content:tw-tracking-wider",
@@ -6437,10 +6645,12 @@ var MultiCombobox = ({
   itemToChipColor,
   maxVisible = 3
 }) => {
+  const isLegacy = useIsLegacyBrand();
   const itemsProp = _itemsProp ?? [];
   const valueProp = _valueProp ?? [];
-  const contentVariant = variant === "argo" ? "argo" : "default";
-  const chipVariant = variant === "argo" ? "pill" : "default";
+  const renderArgo = !isLegacy || variant === "argo";
+  const contentVariant = renderArgo ? "argo" : "default";
+  const chipVariant = renderArgo ? "pill" : "default";
   const allFlatItems = itemsProp.flatMap((item) => isGroupItem(item) ? item.items : item);
   const isAllSelected = allFlatItems.length === (valueProp?.length ?? 0);
   const defaultFilter3 = combobox.Combobox.useFilter({
@@ -6555,7 +6765,7 @@ var Textarea = ({
   containerClassName,
   // group props
   state = "default",
-  variant = "primary",
+  variant,
   sizing,
   focusVariant,
   ...rest
@@ -7068,7 +7278,8 @@ var slotVariants = classVarianceAuthority.cva(
     "tw-justify-center",
     "tw-border",
     "tw-border-input",
-    "tw-bg-background",
+    // muted filled input surface — gray, distinct from white containers; not the app-background token
+    "tw-bg-muted",
     "tw-text-foreground",
     "tw-font-medium",
     "tw-tabular-nums",
@@ -7763,8 +7974,8 @@ var helpVariants = classVarianceAuthority.cva(["tw-m-0", "tw-text-xs"], {
   },
   variants: {
     state: {
-      default: ["tw-text-neutral-500"],
-      error: ["tw-text-error-500"],
+      default: ["tw-text-muted-foreground"],
+      error: ["tw-text-destructive"],
       warning: ["tw-text-warning-500"]
     }
   }
@@ -7881,6 +8092,8 @@ var AnswerSummary = ({
   const [isExpanded, setIsExpanded] = react.useState(false);
   const toggle = () => setIsExpanded((prev) => !prev);
   const count = items.length;
+  const [firstItem] = items;
+  const label = count === 1 && firstItem ? firstItem.question : `${count} questions`;
   return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "tw-mt-4 tw-flex tw-flex-col tw-gap-4", "aria-label": SECTION_LABELS[variant], children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       CollapsibleStepHeader,
@@ -7888,7 +8101,7 @@ var AnswerSummary = ({
         isExpanded,
         onToggle: toggle,
         variant,
-        label: `${count} question${count !== 1 ? "s" : ""}`
+        label
       }
     ),
     isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-flex tw-flex-col tw-gap-4 tw-pl-5", children: items.map(({ question, answer }, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-gap-1", children: [
@@ -8392,6 +8605,7 @@ var PromptInputSubmit = ({
     getTooltipText() && /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Content, { placement: "top", variant: "action", children: getTooltipText() })
   ] });
 };
+var CMDK_HIJACKED_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "Home", "End", "Enter"]);
 var promptInputVariants = classVarianceAuthority.cva(
   [
     "tailwindcss-preflight",
@@ -8463,15 +8677,11 @@ var PromptInput = ({
   const textareaId = react.useId();
   const textareaRef = react.useRef(null);
   const [dismissedValue, setDismissedValue] = react.useState(null);
+  if (dismissedValue !== null && value !== dismissedValue) setDismissedValue(null);
   const hasCommands = !!commands && commands.length > 0;
   const valueLooksLikeSlashCommand = value.startsWith("/") && !/\s/.test(value);
   const commandsOpen = hasCommands && valueLooksLikeSlashCommand && value !== dismissedValue;
   const slashFilter = commandsOpen ? value.slice(1) : "";
-  react.useEffect(() => {
-    if (dismissedValue !== null && value !== dismissedValue) {
-      setDismissedValue(null);
-    }
-  }, [value, dismissedValue]);
   const handleSubmit = () => {
     if (isDisabled) return;
     if (status === "streaming") onAbort?.();
@@ -8499,6 +8709,8 @@ var PromptInput = ({
       if (event.key === "ArrowUp" || event.key === "ArrowDown" || event.key === "Enter") {
         return;
       }
+    } else if (hasCommands && CMDK_HIJACKED_KEYS.has(event.key)) {
+      event.stopPropagation();
     }
     if (event.key === "Enter" && !event.shiftKey && !event.ctrlKey && !event.metaKey) {
       event.preventDefault();
@@ -9106,44 +9318,48 @@ var AlertRoot = ({
   variant,
   argo = false,
   ...rest
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
-  {
-    ...rest,
-    ref,
-    "data-variant": variant,
-    "data-argo": argo,
-    className: cn(
-      "tw-group/alert",
-      // layout
-      "tw-grid",
-      "tw-grid-cols-[0_1fr_auto]",
-      "has-[[data-slot=alert-icon]]:tw-grid-cols-[auto_1fr_auto]",
-      "has-[[data-slot=alert-icon]]:tw-gap-x-2",
-      // fonts
-      "tw-text-sm",
-      "tw-text-neutral-800",
-      "tw-text-left",
-      "tw-p-4",
-      // border
-      "tw-rounded",
-      "data-[argo=true]:tw-rounded-lg",
-      "tw-border",
-      "tw-border-solid",
-      // border variants
-      "data-[variant=info]:tw-bg-secondary-100",
-      "data-[variant=info]:tw-border-secondary-200",
-      "data-[variant=warning]:tw-bg-warning-100",
-      "data-[variant=warning]:tw-border-warning-300",
-      "data-[variant=error]:tw-bg-error-100",
-      "data-[variant=error]:tw-border-error-200",
-      "data-[variant=success]:tw-bg-primary-100",
-      "data-[variant=success]:tw-border-primary-200",
-      className
-    ),
-    children
-  }
-);
+}) => {
+  const isLegacy = useIsLegacyBrand();
+  const renderArgo = !isLegacy || argo;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...rest,
+      ref,
+      "data-variant": variant,
+      "data-argo": renderArgo,
+      className: cn(
+        "tw-group/alert",
+        // layout
+        "tw-grid",
+        "tw-grid-cols-[0_1fr_auto]",
+        "has-[[data-slot=alert-icon]]:tw-grid-cols-[auto_1fr_auto]",
+        "has-[[data-slot=alert-icon]]:tw-gap-x-2",
+        // fonts
+        "tw-text-sm",
+        "tw-text-neutral-800",
+        "tw-text-left",
+        "tw-p-4",
+        // border
+        "tw-rounded",
+        "data-[argo=true]:tw-rounded-lg",
+        "tw-border",
+        "tw-border-solid",
+        // border variants
+        "data-[variant=info]:tw-bg-secondary-100",
+        "data-[variant=info]:tw-border-secondary-200",
+        "data-[variant=warning]:tw-bg-warning-100",
+        "data-[variant=warning]:tw-border-warning-300",
+        "data-[variant=error]:tw-bg-error-100",
+        "data-[variant=error]:tw-border-error-200",
+        "data-[variant=success]:tw-bg-primary-100",
+        "data-[variant=success]:tw-border-primary-200",
+        className
+      ),
+      children
+    }
+  );
+};
 var AlertTitle = ({
   ref,
   className,
@@ -9295,6 +9511,7 @@ var ToastDismiss = ({
       "[&_svg]:tw-m-1",
       "tw-text-white",
       "group-data-[variant=default]/toast:[&_svg]:tw-text-popover-foreground",
+      "group-data-[variant=default]/toast:group-data-[argo=true]/toast:[&_svg]:tw-text-foreground",
       className
     ),
     type: "button",
@@ -9319,6 +9536,7 @@ var ToastDuration = ({
     className: cn(
       "tw-bg-white/30",
       "group-data-[variant=default]/toast:tw-bg-popover-foreground/20",
+      "group-data-[variant=default]/toast:group-data-[argo=true]/toast:tw-bg-foreground/20",
       "tw-rounded-bl-lg",
       "tw-mx-px",
       // positioning
@@ -9356,6 +9574,7 @@ var ToastTitle = ({
       "tw-self-center",
       "tw-text-white",
       "group-data-[variant=default]/toast:tw-text-popover-foreground",
+      "group-data-[variant=default]/toast:group-data-[argo=true]/toast:tw-text-foreground",
       "tw-break-words",
       "tw-font-medium",
       className
@@ -9415,11 +9634,14 @@ var ToastRoot = ({
   duration = Infinity,
   variant = "info",
   loading = false,
-  icon: iconProp
+  icon: iconProp,
+  argo
 }) => {
+  const isLegacy = useIsLegacyBrand();
+  const renderArgo = !isLegacy || argo;
   const icon = (() => {
     if (loading) return /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Loader2, { className: "tw-animate-spin" });
-    if (iconProp) return renderLegacyIcon(iconProp);
+    if (iconProp) return iconProp;
     if (variant === "default" || variant === null) return null;
     return DEFAULT_VARIANT_ICON[variant];
   })();
@@ -9427,35 +9649,44 @@ var ToastRoot = ({
     sonner.toast.dismiss(id);
     action?.onClick(event);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-variant": variant, className: cn(variants6({ variant })), children: [
-    icon && /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        "data-slot": "toast-icon",
-        className: cn(
-          "tw-inline-flex",
-          "tw-items-center",
-          "tw-justify-center",
-          "tw-self-center",
-          // styles — container at 20px with no padding so the 20px Lucide
-          // glyph fills the slot (previous tw-size-4 + tw-p-1 clipped a
-          // 16px child into 8px of visible space)
-          "tw-aspect-square",
-          "tw-size-5",
-          "tw-shrink-0",
-          '[&_svg:not([class*="tw-size-"])]:tw-size-5',
-          "tw-text-white",
-          "group-data-[variant=default]/toast:tw-text-popover-foreground"
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-variant": variant,
+      "data-argo": renderArgo,
+      className: cn(
+        variants6({ variant }),
+        "data-[variant=default]:data-[argo=true]:tw-bg-background"
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-slot": "toast-icon",
+            className: cn(
+              "tw-inline-flex",
+              "tw-items-center",
+              "tw-justify-center",
+              "tw-self-center",
+              "tw-aspect-square",
+              "tw-size-5",
+              "tw-shrink-0",
+              '[&_svg:not([class*="tw-size-"])]:tw-size-5',
+              "tw-text-white",
+              "group-data-[variant=default]/toast:tw-text-popover-foreground",
+              "group-data-[variant=default]/toast:group-data-[argo=true]/toast:tw-text-foreground"
+            ),
+            children: icon
+          }
         ),
-        children: icon
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(ToastTitle, { children: title }),
-    description && /* @__PURE__ */ jsxRuntime.jsx(ToastDescription, { children: description }),
-    action && /* @__PURE__ */ jsxRuntime.jsx(ToastAction, { style: action?.actionButtonStyle, onClick: handleActionClick, children: action.label }),
-    /* @__PURE__ */ jsxRuntime.jsx(ToastDismiss, { onClick: () => sonner.toast.dismiss(id) }),
-    duration !== Infinity && /* @__PURE__ */ jsxRuntime.jsx(ToastDuration, { duration })
-  ] });
+        /* @__PURE__ */ jsxRuntime.jsx(ToastTitle, { children: title }),
+        description && /* @__PURE__ */ jsxRuntime.jsx(ToastDescription, { children: description }),
+        action && /* @__PURE__ */ jsxRuntime.jsx(ToastAction, { style: action?.actionButtonStyle, onClick: handleActionClick, children: action.label }),
+        /* @__PURE__ */ jsxRuntime.jsx(ToastDismiss, { onClick: () => sonner.toast.dismiss(id) }),
+        duration !== Infinity && /* @__PURE__ */ jsxRuntime.jsx(ToastDuration, { duration })
+      ]
+    }
+  );
 };
 var toast = ({
   onAutoClose,
@@ -9552,20 +9783,20 @@ var Toaster = ({ gap = 12, visibleToasts = 5, ...props }) => (
   ) })
 );
 var EmptySearchContent = ({ children = "No results found." }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-px-0 tw-py-[30px] tw-text-center tw-text-sm tw-text-neutral-400", children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-px-0 tw-py-[30px] tw-text-center tw-text-sm tw-text-muted-foreground", children });
 };
 var CardContent = ({ children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, children });
 var CardHeader = ({ children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, children });
 var cardClassnames = classVarianceAuthority.cva(
-  ["tw-bg-white", "tw-flex", "tw-flex-col", "tw-rounded-lg", "tw-gap-4"],
+  ["tw-flex", "tw-flex-col", "tw-rounded-lg", "tw-gap-4", "tw-bg-surface"],
   {
     defaultVariants: {
       padding: "small"
     },
     variants: {
       bordered: {
-        true: "tw-border tw-border-solid tw-border-neutral-200",
-        false: "tw-shadow-[0_2px_6px_0_rgba(100,135,153,0.13)]"
+        true: "tw-border tw-border-solid tw-border-neutral-200 data-[argo=true]:tw-border-border",
+        false: "tw-shadow-[0_2px_6px_0_rgba(100,135,153,0.13)] data-[argo=true]:tw-shadow-sm"
       },
       padding: {
         none: "tw-p-0",
@@ -9581,7 +9812,7 @@ var cardTitleClassnames = cn(
   "tw-leading-6",
   "tw-font-medium",
   "tw-text-base",
-  "tw-neutral-800"
+  "tw-text-foreground"
 );
 var CardTitle = ({ children, className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn(cardTitleClassnames, className), ...rest, children });
 var Card = ({
@@ -9589,8 +9820,21 @@ var Card = ({
   className,
   bordered = false,
   padding = "small",
+  argo = false,
   ...rest
-}) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cardClassnames({ className, bordered, padding }), ...rest, children });
+}) => {
+  const isLegacy = useIsLegacyBrand();
+  const renderArgo = !isLegacy || argo;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...rest,
+      "data-argo": renderArgo,
+      className: cardClassnames({ className, bordered, padding }),
+      children
+    }
+  );
+};
 Card.Header = CardHeader;
 Card.Content = CardContent;
 Card.Title = CardTitle;
@@ -9777,7 +10021,7 @@ var ANIMATION_CLASS_NAME = cn(
   "tw-relative",
   "tw-overflow-hidden",
   "tw-pointer-events-none",
-  "tw-bg-neutral-150",
+  "tw-bg-muted",
   // before
   'before:tw-content-[""]',
   "before:tw-opacity-100",
@@ -9845,7 +10089,7 @@ var SkeletonList = ({
     }
   )
 ] });
-var DOT_CLASS_NAME = cn("tw-h-1.5", "tw-w-1.5", "tw-rounded-full", "tw-bg-neutral-700");
+var DOT_CLASS_NAME = cn("tw-h-1.5", "tw-w-1.5", "tw-rounded-full", "tw-bg-muted-foreground");
 var DotsLoader = ({ className }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -9909,11 +10153,13 @@ var Collapse = ({
   );
 };
 var headerVariants = classVarianceAuthority.cva(
-  "tw-flex tw-flex-1 tw-items-center tw-gap-2 tw-rounded tw-px-4 tw-py-2.5 tw-text-sm tw-text-neutral-400",
+  "tw-flex tw-flex-1 tw-items-center tw-gap-2 tw-rounded tw-px-4 tw-py-2.5 tw-text-sm tw-text-muted-foreground",
   {
     variants: {
       variant: {
-        default: "tw-bg-neutral-100",
+        default: "tw-bg-muted",
+        // White surface kept literal until a `card` token exists (UT-4396);
+        // `background` is the page base, not an elevated panel surface.
         white: "tw-bg-white"
       },
       isDisabled: {
@@ -9929,7 +10175,7 @@ var headerVariants = classVarianceAuthority.cva(
       {
         isDisabled: false,
         hasEnforcedState: false,
-        class: "tw-cursor-pointer hover:tw-text-secondary-500"
+        class: "tw-cursor-pointer hover:tw-text-primary"
       }
     ],
     defaultVariants: {
@@ -9979,7 +10225,7 @@ var CollapsiblePanel = ({
     {
       open,
       className: cn(
-        "tw-rounded !tw-border !tw-border-solid !tw-border-neutral-200 tw-bg-white",
+        "tw-rounded !tw-border !tw-border-solid !tw-border-border tw-bg-white",
         className
       ),
       header: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -9993,7 +10239,7 @@ var CollapsiblePanel = ({
             onKeyUp: handleKeyUp
           },
           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 }),
+            /* @__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-foreground", children: header }),
             !isDisabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-ml-auto tw-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.ChevronDown, { className: cn("tw-size-5 group-data-[state=open]:tw-rotate-180") }) })
           ]
         }
@@ -10027,8 +10273,8 @@ var PanelWithDetails = ({
           role: "button",
           tabIndex: 0,
           className: cn(
-            "tw-flex tw-cursor-pointer tw-items-center tw-rounded-sm tw-bg-neutral-100 tw-px-4 tw-py-3 tw-text-sm tw-text-neutral-400",
-            "hover:tw-text-secondary-500"
+            "tw-flex tw-cursor-pointer tw-items-center tw-rounded-sm tw-bg-muted tw-px-4 tw-py-3 tw-text-sm tw-text-muted-foreground",
+            "hover:tw-text-primary"
           ),
           onClick: () => setIsOpen(!isOpen),
           onKeyUp: handleKeyUp,
@@ -10063,35 +10309,18 @@ var AIGradientsSvg = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "0", h
 ] }) });
 
 // src/components/ThemeProvider/brandToCssVars.ts
-var hexToRgbTriplet = (hex) => {
-  const match = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
-  if (!match) return null;
-  let body = match[1];
-  if (body.length === 3) {
-    body = body.split("").map((c) => c + c).join("");
-  }
-  const r2 = parseInt(body.slice(0, 2), 16);
-  const g = parseInt(body.slice(2, 4), 16);
-  const b = parseInt(body.slice(4, 6), 16);
-  return `${r2} ${g} ${b}`;
-};
 var brandToCssVars = (brand) => {
-  const vars = {};
-  const colorMap = [
-    ["--color-background", brand.colors.background],
-    ["--color-foreground", brand.colors.foreground],
-    ["--color-muted", brand.colors.muted],
-    ["--color-muted-foreground", brand.colors.mutedForeground],
-    ["--color-border", brand.colors.border],
-    ["--color-primary", brand.colors.primary],
-    ["--color-primary-foreground", brand.colors.primaryForeground],
-    ["--color-destructive", brand.colors.destructive],
-    ["--color-destructive-foreground", brand.colors.destructiveForeground]
-  ];
-  for (const [name, hex] of colorMap) {
-    const triplet = hexToRgbTriplet(hex);
-    if (triplet !== null) vars[name] = triplet;
-  }
+  const vars = {
+    "--color-background": brand.colors.background,
+    "--color-foreground": brand.colors.foreground,
+    "--color-muted": brand.colors.muted,
+    "--color-muted-foreground": brand.colors.mutedForeground,
+    "--color-border": brand.colors.border,
+    "--color-primary": brand.colors.primary,
+    "--color-primary-foreground": brand.colors.primaryForeground,
+    "--color-destructive": brand.colors.destructive,
+    "--color-destructive-foreground": brand.colors.destructiveForeground
+  };
   if (brand.radii) {
     vars["--radius-sm"] = brand.radii.sm;
     vars["--radius-md"] = brand.radii.md;
@@ -10099,7 +10328,6 @@ var brandToCssVars = (brand) => {
   }
   return vars;
 };
-var ThemeContext = react.createContext(null);
 var ThemeProvider = ({ brand = brandRegistry.keboola, setBrand, children }) => {
   react.useEffect(() => {
     if (typeof document === "undefined") return;
@@ -10327,7 +10555,7 @@ var Root25 = ({
   {
     ref,
     className: cn(
-      "tw-flex tw-flex-col tw-gap-4 tw-w-full tw-mx-auto tw-px-6 tw-py-4",
+      "tw-flex tw-flex-col tw-gap-4 tw-w-full tw-mx-auto",
       maxWidthClass[maxWidth],
       className
     ),
@@ -10619,14 +10847,14 @@ var PageToolbar = Object.assign(Root26, {
 });
 var resizableHandleVariants = classVarianceAuthority.cva([
   // base styles
-  "tw-bg-neutral-50",
+  "tw-bg-border",
   "tw-relative",
   "tw-flex",
   "tw-w-px",
   "tw-items-center",
   "tw-justify-center",
   // focus styles
-  "focus-visible:tw-ring-ring",
+  "focus-visible:tw-ring-primary",
   "focus-visible:tw-ring-1",
   "focus-visible:tw-ring-offset-1",
   "focus-visible:tw-outline-hidden",
@@ -10795,8 +11023,8 @@ var SidebarContent = ({
         "group-last/sidebar-content:after:tw-hidden",
         "!tw-box-border",
         {
-          'before:tw-absolute before:tw-top-0 before:tw-left-0 before:tw-right-0 before:tw-h-px before:tw-bg-neutral-100 before:tw-z-10 before:tw-content-[""]': isBottom || isMiddle,
-          'after:tw-absolute after:tw-bottom-0 after:tw-left-0 after:tw-right-0 after:tw-h-px after:tw-bg-neutral-100 after:tw-z-10 after:tw-content-[""]': isTop || isMiddle
+          'before:tw-absolute before:tw-top-0 before:tw-left-0 before:tw-right-0 before:tw-h-px before:tw-bg-sidebar-border before:tw-z-10 before:tw-content-[""]': isBottom || isMiddle,
+          'after:tw-absolute after:tw-bottom-0 after:tw-left-0 after:tw-right-0 after:tw-h-px after:tw-bg-sidebar-border after:tw-z-10 after:tw-content-[""]': isTop || isMiddle
         }
       ),
       children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -10982,12 +11210,8 @@ var SidebarProvider = ({
   const [isRightDragging, setIsRightDragging] = react.useState(false);
   const [leftDragWidth, setLeftDragWidth] = react.useState(null);
   const [rightDragWidth, setRightDragWidth] = react.useState(null);
-  react.useEffect(() => {
-    if (leftDragWidth !== null && leftWidth === leftDragWidth) setLeftDragWidth(null);
-  }, [leftWidth, leftDragWidth]);
-  react.useEffect(() => {
-    if (rightDragWidth !== null && rightWidth === rightDragWidth) setRightDragWidth(null);
-  }, [rightWidth, rightDragWidth]);
+  if (leftDragWidth !== null && leftWidth === leftDragWidth) setLeftDragWidth(null);
+  if (rightDragWidth !== null && rightWidth === rightDragWidth) setRightDragWidth(null);
   const leftState = useSidebarState({
     defaultMode: defaultLeftMode,
     mode: leftMode,
@@ -11218,7 +11442,7 @@ var SidebarGroupLabel = ({
             "group-data-[state=collapsed]/sidebar:tw-opacity-0",
             "tw-items-center",
             "tw-flex-1",
-            "tw-text-neutral-400",
+            "tw-text-muted-foreground",
             "tw-whitespace-nowrap",
             // transition
             "tw-transition-opacity",
@@ -11368,7 +11592,7 @@ var SidebarMenuButton = ({
       ),
       tabIndex: 0,
       children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx(SidebarMenuIcon, { children: renderLegacyIcon(icon) }),
+        icon && /* @__PURE__ */ jsxRuntime.jsx(SidebarMenuIcon, { children: icon }),
         /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slottable, { children })
       ]
     }
@@ -11567,7 +11791,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", children: renderLegacyIcon(icon) }),
+            /* @__PURE__ */ jsxRuntime.jsx(SidebarMenuIcon, { className: "tw-p-px", children: icon }),
             title
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(Content10, { className, children })
@@ -12332,7 +12556,7 @@ var NavbarMenuButton = ({
   const Comp = asChild ? reactSlot.Root : "button";
   const isSearchVariant = variant === "search";
   const isEmphasizedVariant = variant === "emphasized";
-  const adornment = isSearchVariant ? /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Search, {}) : renderLegacyIcon(icon);
+  const adornment = isSearchVariant ? /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Search, {}) : icon;
   const adornmentVariant = (() => {
     if (isSearchVariant || variant === "icon") return "icon-button";
     if (isEmphasizedVariant) return "icon-accent-emphasized";
@@ -12537,15 +12761,22 @@ Breadcrumb.Link = BreadcrumbLink;
 Breadcrumb.Page = BreadcrumbPage;
 Breadcrumb.Separator = BreadcrumbSeparator;
 Breadcrumb.Ellipsis = BreadcrumbEllipsis;
-var TRIGGER_COMMON = {
-  main: "tw-flex tw-justify-center tw-items-center tw-gap-1.5 tw-bg-transparent tw-group/tab-trigger tw-shrink-0",
-  border: "tw-border-0 tw-border-b-[3px] tw-border-solid tw-border-transparent",
-  spacing: "tw-pt-2.5 tw-pb-5 tw-px-0 tw-m-0",
-  font: "tw-font-medium tw-leading-5 tw-text-neutral-400 tw-text-base",
-  active: "data-[state=active]:tw-text-secondary-500 data-[state=active]:tw-border-secondary-500",
-  disabled: "data-[disabled]:tw-text-neutral-400 data-[disabled]:tw-opacity-50 data-[disabled]:tw-cursor-not-allowed",
-  hover: "hover:enabled:tw-text-secondary-500 hover:enabled:tw-border-secondary-500 hover:enabled:tw-cursor-pointer"
-};
+
+// src/components/Tabs/styles.ts
+var tabsListWrapperClass = "tw-shrink-0 tw-border-0 tw-border-b tw-border-solid tw-border-border";
+var tabsListClass = "tw-flex tw-gap-8 tw-shrink-0 tw-w-max";
+var tabsTriggerGroupClass = "tw-group/tab-trigger-group tw-flex tw-shrink-0 tw-items-center";
+var tabsTriggerClass = "tw-flex tw-justify-center tw-items-center tw-gap-1.5 tw-bg-transparent tw-shrink-0 tw-border-0 tw-border-b-[3px] tw-border-solid tw-border-transparent tw-pt-2.5 tw-pb-5 tw-px-0 tw-m-0 tw-font-medium tw-leading-5 tw-text-muted-foreground tw-text-base data-[state=active]:tw-text-primary data-[state=active]:tw-border-primary data-[disabled]:tw-text-muted-foreground data-[disabled]:tw-opacity-50 data-[disabled]:tw-cursor-not-allowed group-hover/tab-trigger-group:enabled:tw-text-primary group-hover/tab-trigger-group:enabled:tw-border-primary group-hover/tab-trigger-group:enabled:tw-cursor-pointer";
+var tabsTriggerCompactClass = "tw-text-sm tw-pb-4";
+var TabsList = ({ className, children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { orientation: "horizontal", className: tabsListWrapperClass, children: /* @__PURE__ */ jsxRuntime.jsx(RadixTabs__namespace.List, { ...rest, "data-slot": "tabs-list", className: cn(tabsListClass, className), children }) });
+var TabsTrigger = ({ className, compact = false, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
+  RadixTabs__namespace.Trigger,
+  {
+    "data-slot": "tabs-trigger",
+    ...rest,
+    className: cn(tabsTriggerClass, compact && tabsTriggerCompactClass, className)
+  }
+);
 var Tabs2 = ({
   triggers,
   compact = false,
@@ -12555,66 +12786,56 @@ var Tabs2 = ({
   rootClassName,
   listClassName,
   triggerClassName,
+  triggerGroupClassName,
   ...rest
-}) => {
-  const triggerClasses = cn(
-    ...Object.values(TRIGGER_COMMON),
-    { "tw-text-sm tw-pb-4": compact },
-    triggerClassName
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    RadixTabs__namespace.Root,
-    {
-      ...rest,
-      "data-slot": "tabs-root",
-      className: cn("tw-flex tw-flex-col tw-gap-6", rootClassName),
-      defaultValue: defaultValue || triggers[0]?.value,
-      onValueChange,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ScrollArea,
-          {
-            orientation: "horizontal",
-            className: "tw-shrink-0 tw-border-0 tw-border-b tw-border-solid tw-border-neutral-200",
-            children: /* @__PURE__ */ jsxRuntime.jsx(RadixTabs__namespace.List, { className: cn("tw-flex tw-gap-8 tw-shrink-0", listClassName), children: triggers.map(({ value, title, onClose, ...rest2 }) => {
-              if (onClose) {
-                return /* @__PURE__ */ jsxRuntime.jsx(
-                  RadixTabs__namespace.Trigger,
-                  {
-                    asChild: true,
-                    value,
-                    className: triggerClasses,
-                    ...rest2,
-                    children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                      title,
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        Button,
-                        {
-                          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",
-                          children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.X, { className: "tw-size-4" })
-                        }
-                      )
-                    ] })
-                  },
-                  value
-                );
+}) => /* @__PURE__ */ jsxRuntime.jsxs(
+  RadixTabs__namespace.Root,
+  {
+    ...rest,
+    "data-slot": "tabs-root",
+    className: cn("tw-flex tw-flex-col tw-gap-6", rootClassName),
+    defaultValue: defaultValue ?? triggers[0]?.value,
+    onValueChange,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: listClassName, children: triggers.map(({ value, title, onClose, className: callerClassName, ...triggerRest }) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(tabsTriggerGroupClass, triggerGroupClassName),
+          "data-slot": "tabs-trigger-group",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              TabsTrigger,
+              {
+                value,
+                compact,
+                ...triggerRest,
+                className: cn(triggerClassName, callerClassName),
+                children: title
               }
-              return /* @__PURE__ */ jsxRuntime.jsx(RadixTabs__namespace.Trigger, { value, className: triggerClasses, ...rest2, children: title }, value);
-            }) })
-          }
-        ),
-        children
-      ]
-    }
-  );
-};
-var TabsContent = (props) => /* @__PURE__ */ jsxRuntime.jsx(RadixTabs__namespace.Content, { tabIndex: -1, ...props });
+            ),
+            onClose && /* @__PURE__ */ jsxRuntime.jsx(
+              Button,
+              {
+                type: "button",
+                variant: "inline",
+                size: "icon-3xs",
+                disabled: triggerRest.disabled,
+                onClick: () => onClose(value),
+                onMouseDown: (e) => e.preventDefault(),
+                className: "!tw-size-8 tw-opacity-0 tw-duration-200 focus-visible:tw-opacity-100 group-hover/tab-trigger-group:tw-opacity-100 group-focus-within/tab-trigger-group:tw-opacity-100",
+                "aria-label": typeof title === "string" ? `Close ${title}` : "Close tab",
+                children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.X, { className: "tw-size-4" })
+              }
+            )
+          ]
+        },
+        value
+      )) }),
+      children
+    ]
+  }
+);
+var TabsContent = (props) => /* @__PURE__ */ jsxRuntime.jsx(RadixTabs__namespace.Content, { "data-slot": "tabs-content", tabIndex: -1, ...props });
 var StepperContext = react.createContext({
   orientation: "horizontal"
 });
@@ -12869,7 +13090,7 @@ var TableBody = ({
     {
       className: cn(
         {
-          "[&_tr]:tw-border-0 [&_tr]:tw-border-b-neutral-150 [&_tr]:tw-border-b [&_tr]:tw-border-solid [&_tr:last-child]:tw-border-0": withBorderSeparator
+          "[&_tr]:tw-border-0 [&_tr]:tw-border-b-border [&_tr]:tw-border-b [&_tr]:tw-border-solid [&_tr:last-child]:tw-border-0": withBorderSeparator
         },
         className
       ),
@@ -12913,7 +13134,7 @@ var TableHeader = ({
     "thead",
     {
       className: cn(
-        "tw-sticky tw-top-0 tw-z-10 [&_tr]:tw-bg-neutral-100 [&_tr]:tw-border-b [&_tr]:tw-border-neutral-150",
+        "tw-sticky tw-top-0 tw-z-10 [&_tr]:tw-bg-muted [&_tr]:tw-border-b [&_tr]:tw-border-border",
         { "tw-shadow-table": withShadow },
         className
       ),
@@ -12925,7 +13146,7 @@ var TableRow = ({
   ref,
   className,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx("tr", { ref, className: cn("hover:tw-bg-neutral-100", className), ...props });
+}) => /* @__PURE__ */ jsxRuntime.jsx("tr", { ref, className: cn("hover:tw-bg-muted/50", className), ...props });
 var Table = ({
   borderCollapsed = true,
   bordered = false,
@@ -12938,7 +13159,7 @@ var Table = ({
     {
       className: cn(
         "tw-relative tw-w-full",
-        bordered && "tw-overflow-auto tw-rounded-[10px] tw-border tw-border-solid tw-border-neutral-150",
+        bordered && "tw-overflow-auto tw-rounded-[10px] tw-border tw-border-solid tw-border-border",
         containerClassName
       ),
       children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -13005,10 +13226,10 @@ var connectorWrapper = classVarianceAuthority.cva(
     "before:tw-h-full",
     "before:group-last/timeline-item:tw-h-[--connector-line-height]",
     // Solid line
-    "before:group-data-[variant=solid]/timeline:tw-bg-neutral-200",
+    "before:group-data-[variant=solid]/timeline:tw-bg-border",
     // Dashed line using gradient
     "before:group-data-[variant=dashed]/timeline:tw-bg-gradient-to-b",
-    "before:group-data-[variant=dashed]/timeline:tw-from-neutral-200",
+    "before:group-data-[variant=dashed]/timeline:tw-from-border",
     "before:group-data-[variant=dashed]/timeline:tw-from-50%",
     "before:group-data-[variant=dashed]/timeline:tw-to-transparent",
     "before:group-data-[variant=dashed]/timeline:tw-to-50%",
@@ -13042,17 +13263,17 @@ var connector = classVarianceAuthority.cva(
       variant: {
         none: [],
         label: [
-          "tw-bg-neutral-100",
-          "tw-text-neutral-300",
+          "tw-bg-muted",
+          "tw-text-muted-foreground",
           "tw-rounded",
           "tw-p-1.5",
           "tw-text-nowrap",
           "tw-text-xs"
         ],
         icon: [
-          "tw-bg-white",
+          "tw-bg-background",
           '[&_svg:not([class*="tw-size-"])]:tw-size-4',
-          "[&_svg]:tw-text-neutral-300"
+          "[&_svg]:tw-text-muted-foreground"
         ],
         line: [
           "tw-min-w-8",
@@ -13073,7 +13294,7 @@ var connector = classVarianceAuthority.cva(
           // l-shape
           "before:tw-border-l",
           "before:tw-border-b",
-          "before:tw-border-neutral-200",
+          "before:tw-border-border",
           "before:tw-rounded-bl",
           // Solid or dashed
           "before:group-data-[variant=dashed]/timeline:tw-border-dashed",
@@ -13393,7 +13614,7 @@ var variants11 = classVarianceAuthority.cva(
       {
         variant: "gutter",
         diff: "default",
-        className: ["tw-bg-neutral-100", "tw-text-neutral-400"]
+        className: ["tw-bg-muted", "tw-text-muted-foreground"]
       },
       {
         variant: "gutter",
@@ -13408,7 +13629,7 @@ var variants11 = classVarianceAuthority.cva(
       {
         variant: "code",
         diff: "default",
-        className: ["tw-bg-neutral-50", "tw-text-neutral-800"]
+        className: ["tw-bg-background", "tw-text-foreground"]
       },
       {
         variant: "code",
@@ -13432,7 +13653,7 @@ var DiffViewTh = ({ variant = "default", children, className, ...props }) => /*
   {
     ...props,
     className: cn(
-      "tw-bg-white",
+      "tw-bg-background",
       "tw-py-3",
       "tw-border-b",
       { "tw-w-14": variant === "gutter" },
@@ -13653,13 +13874,13 @@ var DiffView = ({
     {
       className: cn(
         "tailwindcss-preflight",
-        "tw-bg-neutral-100",
+        "tw-bg-muted",
         "tw-border",
         "tw-rounded-2xl",
         "tw-overflow-auto",
         className
       ),
-      children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "tw-w-full tw-table-fixed tw-bg-neutral-50", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "tw-w-full tw-table-fixed tw-bg-background", children: [
         /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "tw-sticky tw-top-0 tw-z-10  tw-shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
           /* @__PURE__ */ jsxRuntime.jsx(DiffViewTh, { variant: "gutter", children: leftTitleGutter }),
           /* @__PURE__ */ jsxRuntime.jsx(DiffViewTh, { children: leftTitle }),
@@ -13676,8 +13897,8 @@ var DiffView = ({
                 className: cn(
                   "tw-w-full",
                   "tw-text-center",
-                  "tw-bg-secondary-100",
-                  "hover:tw-bg-secondary-200",
+                  "tw-bg-muted",
+                  "hover:tw-bg-accent",
                   "tw-underline",
                   "tw-p-2"
                 ),
@@ -13857,6 +14078,8 @@ var createDiffHighlightExtension = () => {
 var updateHighlightedLines = (view, lines, classification) => {
   view.dispatch({ effects: setHighlightedLines.of({ lines, classification }) });
 };
+var EMPTY_LINES = /* @__PURE__ */ new Set();
+var EMPTY_CLASSIFICATION = /* @__PURE__ */ new Map();
 var MergePane = ({
   value,
   highlightedLines,
@@ -13866,7 +14089,8 @@ var MergePane = ({
   header,
   headerClassName,
   className,
-  onScrollDOMReady
+  onScrollDOMReady,
+  deleted = false
 }) => {
   const editorRef = react.useRef(null);
   const extensions = react.useMemo(
@@ -13875,11 +14099,11 @@ var MergePane = ({
       view.EditorView.theme({
         "&.cm-editor": {
           height: "100%",
-          backgroundColor: colors3__default.default.neutral[50],
+          backgroundColor: deleted ? colors3__default.default.error[100] : colors3__default.default.neutral[50],
           outline: "none"
         },
         ".cm-gutters": {
-          backgroundColor: colors3__default.default.neutral[100]
+          backgroundColor: deleted ? colors3__default.default.error[200] : colors3__default.default.neutral[100]
         },
         "*": { lineHeight: `${LINE_HEIGHT_PX}px` },
         ".cm-lineNumbers .cm-gutterElement": { padding: "0 0 0 25px" }
@@ -13892,20 +14116,27 @@ var MergePane = ({
         }
       })
     ],
-    []
+    [deleted]
   );
   react.useEffect(() => {
     const view = editorRef.current?.view;
-    if (view) {
-      updateHighlightedLines(view, highlightedLines, lineClassification);
-    }
-  }, [highlightedLines, lineClassification]);
+    if (!view) return;
+    updateHighlightedLines(
+      view,
+      deleted ? EMPTY_LINES : highlightedLines,
+      deleted ? EMPTY_CLASSIFICATION : lineClassification
+    );
+  }, [highlightedLines, lineClassification, deleted]);
   const handleCreateEditor = react.useCallback(
     (view) => {
-      updateHighlightedLines(view, highlightedLines, lineClassification);
+      updateHighlightedLines(
+        view,
+        deleted ? EMPTY_LINES : highlightedLines,
+        deleted ? EMPTY_CLASSIFICATION : lineClassification
+      );
       onScrollDOMReady?.(view.scrollDOM);
     },
-    [highlightedLines, lineClassification, onScrollDOMReady]
+    [highlightedLines, lineClassification, onScrollDOMReady, deleted]
   );
   react.useEffect(() => {
     return () => onScrollDOMReady?.(null);
@@ -13918,22 +14149,42 @@ var MergePane = ({
     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", children: /* @__PURE__ */ jsxRuntime.jsx(
-      CodeMirror__default.default,
-      {
-        ref: editorRef,
-        height: "100%",
-        value,
-        onChange,
-        extensions,
-        readOnly,
-        onCreateEditor: handleCreateEditor,
-        basicSetup: { lineNumbers: true, drawSelection: false }
-      }
-    ) })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "tw-flex tw-min-w-0 tw-flex-1 tw-flex-col tw-overflow-hidden",
+        className,
+        deleted && "tw-border-error-300"
+      ),
+      children: [
+        header && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "tw-px-4 tw-py-3",
+              deleted ? "tw-border-b tw-border-error-200 tw-bg-error-100" : "tw-bg-background",
+              headerClassName
+            ),
+            children: header
+          }
+        ),
+        /* @__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,
+            readOnly,
+            onCreateEditor: handleCreateEditor,
+            basicSetup: { lineNumbers: true, drawSelection: false }
+          }
+        ) })
+      ]
+    }
+  );
 };
 var useScrollSync = () => {
   const scrollersRef = react.useRef([]);
@@ -13994,6 +14245,8 @@ var useScrollSync = () => {
   }, []);
   return { registerScroller, registerFollower };
 };
+var EMPTY_LINES2 = /* @__PURE__ */ new Set();
+var EMPTY_CLASSIFICATION2 = /* @__PURE__ */ new Map();
 var MergeEditor = ({
   mergeValue,
   handleMergeChange,
@@ -14017,14 +14270,17 @@ var MergeEditor = ({
   middleClassName,
   rightHeader,
   className,
-  argo
+  argo,
+  leftDeleted = false,
+  rightDeleted = false
 }) => {
   const { registerScroller, registerFollower } = useScrollSync();
+  const anySideDeleted = leftDeleted || rightDeleted;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: cn(
-        "tw-flex tw-h-full tw-min-h-0 tw-overflow-hidden tw-bg-white tw-gap-3",
+        "tw-flex tw-h-full tw-min-h-0 tw-overflow-hidden tw-bg-background tw-gap-3",
         className
       ),
       children: [
@@ -14036,14 +14292,15 @@ var MergeEditor = ({
             lineClassification: leftClassification,
             readOnly: true,
             header: leftHeader,
-            className: "tw-rounded-r-lg tw-border tw-border-neutral-200",
-            onScrollDOMReady: registerScroller(0)
+            className: "tw-rounded-r-lg tw-border tw-border-border",
+            onScrollDOMReady: registerScroller(0),
+            deleted: leftDeleted
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
           AcceptControls,
           {
-            conflicts: leftConflicts,
+            conflicts: leftDeleted ? [] : leftConflicts,
             side: "left",
             onAccept: acceptLeft,
             onDismiss: dismissLeft,
@@ -14055,19 +14312,19 @@ var MergeEditor = ({
           MergePane,
           {
             value: mergeValue,
-            highlightedLines: mergeHighlightedLines,
-            lineClassification: mergeClassification,
+            highlightedLines: anySideDeleted ? EMPTY_LINES2 : mergeHighlightedLines,
+            lineClassification: anySideDeleted ? EMPTY_CLASSIFICATION2 : mergeClassification,
             onChange: handleMergeChange,
             header: middleHeader,
             headerClassName: middleHeaderClassName,
-            className: cn("tw-border tw-border-neutral-200 tw-rounded-lg", middleClassName),
+            className: cn("tw-border tw-border-border tw-rounded-lg", middleClassName),
             onScrollDOMReady: registerScroller(1)
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
           AcceptControls,
           {
-            conflicts: rightConflicts,
+            conflicts: rightDeleted ? [] : rightConflicts,
             side: "right",
             onAccept: acceptRight,
             onDismiss: dismissRight,
@@ -14083,8 +14340,9 @@ var MergeEditor = ({
             lineClassification: rightClassification,
             readOnly: true,
             header: rightHeader,
-            className: "tw-rounded-l-lg tw-border tw-border-neutral-200",
-            onScrollDOMReady: registerScroller(2)
+            className: "tw-rounded-l-lg tw-border tw-border-border",
+            onScrollDOMReady: registerScroller(2),
+            deleted: rightDeleted
           }
         )
       ]
@@ -14092,13 +14350,13 @@ var MergeEditor = ({
   );
 };
 var PaneHeader = ({ label, sublabel }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "tw-m-0 tw-text-sm tw-font-medium tw-text-neutral-900", children: label }),
-  sublabel && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "tw-m-0 tw-text-xs tw-text-neutral-400", children: sublabel })
+  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "tw-m-0 tw-text-sm tw-font-medium tw-text-foreground", children: label }),
+  sublabel && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "tw-m-0 tw-text-xs tw-text-muted-foreground", children: sublabel })
 ] });
 var ConflictStatusIndicator = ({ remainingConflicts, remainingSafeChanges }) => {
   const hasConflicts = remainingConflicts > 0;
   const allDone = !hasConflicts && remainingSafeChanges === 0;
-  const colorClass = hasConflicts ? "tw-text-warning-500" : allDone ? "tw-text-primary-500" : "tw-text-neutral-400";
+  const colorClass = hasConflicts ? "tw-text-warning-500" : allDone ? "tw-text-primary-500" : "tw-text-muted-foreground";
   const parts = [];
   if (hasConflicts) {
     parts.push(`${remainingConflicts} conflict${remainingConflicts !== 1 ? "s" : ""}`);
@@ -14918,6 +15176,10 @@ var MIN_SCALE = 0.5;
 var MAX_SCALE = 3;
 var ZOOM_STEP = 0.1;
 var ZoomableSvg = ({ html, copyText, className }) => {
+  const safeHtml = react.useMemo(
+    () => DOMPurify__default.default.sanitize(html, { USE_PROFILES: { svg: true, svgFilters: true } }),
+    [html]
+  );
   const containerRef = react.useRef(null);
   const [scale, setScale] = react.useState(1);
   const [translate, setTranslate] = react.useState({ x: 0, y: 0 });
@@ -15013,7 +15275,7 @@ var ZoomableSvg = ({ html, copyText, className }) => {
                   isFullscreen && "tw-h-full [&>svg]:tw-h-full"
                 ),
                 style: { transform: `translate(${translate.x}px, ${translate.y}px) scale(${scale})` },
-                dangerouslySetInnerHTML: { __html: html }
+                dangerouslySetInnerHTML: { __html: safeHtml }
               }
             )
           }
@@ -15066,7 +15328,7 @@ var ZoomableSvg = ({ html, copyText, className }) => {
       "div",
       {
         role: "presentation",
-        className: "tw-fixed tw-inset-0 tw-z-[1060] tw-bg-neutral-50 tw-p-4",
+        className: "tw-fixed tw-inset-0 tw-z-[1060] tw-bg-muted tw-p-4",
         onClick: stopPropagation2,
         children: diagramContent
       }
@@ -15076,7 +15338,7 @@ var ZoomableSvg = ({ html, copyText, className }) => {
     "div",
     {
       className: cn(
-        "tw-overflow-hidden tw-rounded-md tw-border tw-border-neutral-150 tw-bg-neutral-50",
+        "tw-overflow-hidden tw-rounded-md tw-border tw-border-border tw-bg-muted",
         className
       ),
       children: diagramContent
@@ -15085,7 +15347,7 @@ var ZoomableSvg = ({ html, copyText, className }) => {
 };
 var ButtonToolbar = ({ value, children }) => {
   if (!value && !children) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-pointer-events-auto tw-ml-auto tw-mr-4 tw-flex tw-w-fit tw-gap-1 tw-overflow-visible tw-rounded-lg tw-border tw-border-solid tw-border-neutral-150 !tw-bg-white tw-p-[3px] tw-shadow", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-pointer-events-auto tw-ml-auto tw-mr-4 tw-flex tw-w-fit tw-gap-1 tw-overflow-visible tw-rounded-lg tw-border tw-border-solid tw-border-border !tw-bg-background tw-p-[3px] tw-shadow", children: [
     !!value && /* @__PURE__ */ jsxRuntime.jsx(ClipboardButton, { size: "icon-sm", variant: "invisible", text: value }),
     children
   ] });
@@ -15239,7 +15501,7 @@ var CodeEditor = ({
       "div",
       {
         className: cn(
-          "tw-relative tw-flex tw-min-h-0 tw-flex-col [&_.cm-mergeViewEditor]:tw-overflow-visible [&_.cm-mergeViewEditors]:tw-h-full [&_.cm-mergeView]:tw-h-full [&_>div]:tw-h-full [&_>div]:tw-overflow-auto [&_>div]:tw-bg-neutral-50",
+          "tw-relative tw-flex tw-min-h-0 tw-flex-col [&_.cm-mergeViewEditor]:tw-overflow-visible [&_.cm-mergeViewEditors]:tw-h-full [&_.cm-mergeView]:tw-h-full [&_>div]:tw-h-full [&_>div]:tw-overflow-auto [&_>div]:tw-bg-background",
           { "tw-mt-5": !!renderAdditionalButtons },
           className
         ),
@@ -15833,26 +16095,6 @@ Object.defineProperty(exports, "Slot", {
   enumerable: true,
   get: function () { return reactSlot.Slot; }
 });
-Object.defineProperty(exports, "defaultFilter", {
-  enumerable: true,
-  get: function () { return cmdk.defaultFilter; }
-});
-Object.defineProperty(exports, "useCommandState", {
-  enumerable: true,
-  get: function () { return cmdk.useCommandState; }
-});
-Object.defineProperty(exports, "REGEXP_ONLY_CHARS", {
-  enumerable: true,
-  get: function () { return inputOtp.REGEXP_ONLY_CHARS; }
-});
-Object.defineProperty(exports, "REGEXP_ONLY_DIGITS", {
-  enumerable: true,
-  get: function () { return inputOtp.REGEXP_ONLY_DIGITS; }
-});
-Object.defineProperty(exports, "REGEXP_ONLY_DIGITS_AND_CHARS", {
-  enumerable: true,
-  get: function () { return inputOtp.REGEXP_ONLY_DIGITS_AND_CHARS; }
-});
 Object.defineProperty(exports, "brandSchema", {
   enumerable: true,
   get: function () { return brandRegistry.brandSchema; }
@@ -15877,6 +16119,26 @@ Object.defineProperty(exports, "keboolaLegacy", {
   enumerable: true,
   get: function () { return brandRegistry.keboolaLegacy; }
 });
+Object.defineProperty(exports, "defaultFilter", {
+  enumerable: true,
+  get: function () { return cmdk.defaultFilter; }
+});
+Object.defineProperty(exports, "useCommandState", {
+  enumerable: true,
+  get: function () { return cmdk.useCommandState; }
+});
+Object.defineProperty(exports, "REGEXP_ONLY_CHARS", {
+  enumerable: true,
+  get: function () { return inputOtp.REGEXP_ONLY_CHARS; }
+});
+Object.defineProperty(exports, "REGEXP_ONLY_DIGITS", {
+  enumerable: true,
+  get: function () { return inputOtp.REGEXP_ONLY_DIGITS; }
+});
+Object.defineProperty(exports, "REGEXP_ONLY_DIGITS_AND_CHARS", {
+  enumerable: true,
+  get: function () { return inputOtp.REGEXP_ONLY_DIGITS_AND_CHARS; }
+});
 exports.Alert = Alert;
 exports.AnswerSummary = AnswerSummary;
 exports.AppShell = AppShell;
@@ -16007,13 +16269,13 @@ exports.kbdVariants = kbdVariants;
 exports.keys = keys;
 exports.mergeRefs = mergeRefs;
 exports.resolveStorybookBrand = resolveStorybookBrand;
-exports.setLegacyIconRenderer = setLegacyIconRenderer;
 exports.setServerFieldErrors = setServerFieldErrors;
 exports.themeToolbarBrands = themeToolbarBrands;
 exports.toast = toast;
 exports.useAppForm = useAppForm;
 exports.useAutosizeInput = useAutosizeInput;
 exports.useInputOtpContext = useInputOtpContext;
+exports.useIsLegacyBrand = useIsLegacyBrand;
 exports.useMergeDiff = useMergeDiff;
 exports.useNotification = useNotification;
 exports.useScrollbarPosition = useScrollbarPosition;