@keboola/design 3.0.0 → 3.1.0

package/dist/index.js

@@ -1,11 +1,13 @@
 import { Slot, Root as Root$1, Slottable } from '@radix-ui/react-slot';
 export { Slot } from '@radix-ui/react-slot';
 import * as lucide_react_star from 'lucide-react';
-import { forwardRef, createContext, useMemo, useRef, useEffect, useState, use, useId, Fragment as Fragment$1, useCallback, Children, useLayoutEffect, useReducer, isValidElement } from 'react';
+import { createContext, forwardRef, useMemo, useRef, useEffect, use, useState, useId, Fragment as Fragment$1, useCallback, Children, useLayoutEffect, useReducer, isValidElement } from 'react';
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 import { Root as Root$6, Trigger, Portal, Content, Provider } from '@radix-ui/react-tooltip';
 import { cva } from 'class-variance-authority';
+import { keboolaLegacy, keboola, exampleCustomer, getBrand } from '@keboola/brand-registry';
+export { brandSchema, brands, exampleCustomer, getBrand, keboola, keboolaLegacy } from '@keboola/brand-registry';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as DropdownMenuPrimitive3 from '@radix-ui/react-dropdown-menu';
 import { Root, Group, Trigger as Trigger$4 } from '@radix-ui/react-dropdown-menu';
@@ -39,8 +41,6 @@ import BoringAvatar from 'boring-avatars';
 import { Root as Root$b, Indicator as Indicator$1 } from '@radix-ui/react-progress';
 import { Root as Root$c, CollapsibleTrigger, Content as Content$4 } from '@radix-ui/react-collapsible';
 import { toast as toast$1, Toaster as Toaster$1 } from 'sonner';
-import { keboola, keboolaLegacy, exampleCustomer, getBrand } from '@keboola/brand-registry';
-export { brandSchema, brands, exampleCustomer, getBrand, keboola, keboolaLegacy } from '@keboola/brand-registry';
 import * as ResizablePrimitive from 'react-resizable-panels';
 import * as RadixAvatar from '@radix-ui/react-avatar';
 import * as RadixTabs from '@radix-ui/react-tabs';
@@ -51,6 +51,7 @@ import colors3 from '@keboola/tailwind-config/colors';
 import { StateEffect, StateField, RangeSet, RangeSetBuilder } from '@codemirror/state';
 import { diff3Merge } from 'node-diff3';
 import { createFormHookContexts, createFormHook } from '@tanstack/react-form';
+import DOMPurify from 'dompurify';
 import { completeAnyWord, autocompletion } from '@codemirror/autocomplete';
 import { jsonParseLinter, json } from '@codemirror/lang-json';
 import { linter } from '@codemirror/lint';
@@ -138,17 +139,49 @@ var keyCodes = {
   ESCAPE: "Escape",
   SPACE: " "
 };
+var ThemeContext = createContext(null);
+
+// src/components/internal/useIsLegacyBrand.ts
+var useIsLegacyBrand = () => {
+  const context = use(ThemeContext);
+  return context === null || context.brand.id === keboolaLegacy.id;
+};
 var tooltipVariants = 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: {
@@ -181,6 +214,7 @@ var tooltipVariants = cva(
 var TooltipContent = ({
   className,
   variant,
+  argo,
   keepOpenOnPointerDownOutside = false,
   children,
   onPointerDownOutside,
@@ -190,6 +224,8 @@ var TooltipContent = ({
   placement = "right",
   ...rest
 }) => {
+  const isLegacy = useIsLegacyBrand();
+  const renderArgo = !isLegacy || argo === true;
   const handlePointerDownOutside = (event) => {
     if (keepOpenOnPointerDownOutside) event.preventDefault();
     onPointerDownOutside?.(event);
@@ -198,7 +234,8 @@ var TooltipContent = ({
     Content,
     {
       ...rest,
-      "data-tooltip-content": true,
+      "data-tooltip-content": renderArgo ? void 0 : true,
+      "data-argo": renderArgo,
       sideOffset,
       collisionPadding,
       onPointerDownOutside: handlePointerDownOutside,
@@ -258,6 +295,7 @@ var Tooltip = ({
   className,
   keepOpenOnTriggerClick = false,
   variant,
+  argo,
   placement = "right",
   forceHide = false,
   forceShow = false,
@@ -296,6 +334,7 @@ var Tooltip = ({
           {
             className,
             variant: resolvedVariant,
+            argo,
             placement,
             keepOpenOnPointerDownOutside: keepOpenOnTriggerClick,
             children: tooltip
@@ -355,26 +394,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);
@@ -384,10 +403,7 @@ var sha256 = async (text) => {
 var useSHA256 = (text) => {
   const [hash, setHash] = useState("");
   useEffect(() => {
-    if (!text) {
-      setHash("");
-      return;
-    }
+    if (!text) return;
     let cancelled = false;
     sha256(text).then((h) => {
       if (!cancelled) setHash(h);
@@ -396,7 +412,7 @@ var useSHA256 = (text) => {
       cancelled = true;
     };
   }, [text]);
-  return hash;
+  return text ? hash : "";
 };
 var Keboola = forwardRef(
   ({ size = 24, color = "currentColor", className, children, ...rest }, ref) => /* @__PURE__ */ jsxs(
@@ -605,6 +621,8 @@ var argoVariants = 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",
@@ -707,14 +725,11 @@ var Button = ({
   block = false,
   ...buttonProps
 }) => {
+  const isLegacy = useIsLegacyBrand();
+  const renderArgo = !isLegacy || argo;
   const Comp = asChild ? Root$1 : "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) {
@@ -765,11 +780,7 @@ var buttonInlineVariants = 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"],
@@ -1008,17 +1019,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",
@@ -1029,8 +1039,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",
@@ -1081,7 +1099,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"
@@ -1096,8 +1113,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"
         )
       }
     )
@@ -1192,7 +1209,7 @@ var DropdownMenuItem = ({
   ...props
 }) => {
   const Comp = asChild ? Root$1 : "div";
-  const adornment = isLoading ? /* @__PURE__ */ jsx(icons_exports.Loader2, { className: "tw-animate-spin" }) : renderLegacyIcon(icon);
+  const adornment = isLoading ? /* @__PURE__ */ jsx(icons_exports.Loader2, { className: "tw-animate-spin" }) : icon;
   const handleOnSelect = (event) => {
     if (asModalTrigger) event.preventDefault();
     onSelect?.(event);
@@ -1318,7 +1335,7 @@ var DropdownMenuRadioItem = ({
       ...props,
       children: [
         isAtStart && indicatorEle,
-        icon && /* @__PURE__ */ jsx(ItemIcon, { className: iconClassName, children: renderLegacyIcon(icon) }),
+        icon && /* @__PURE__ */ jsx(ItemIcon, { className: iconClassName, children: icon }),
         /* @__PURE__ */ jsx("span", { className: "tw-flex tw-min-w-0 tw-flex-1 tw-items-center tw-gap-2", children }),
         !isAtStart && indicatorEle
       ]
@@ -1383,10 +1400,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 = useMemo(() => ({ variant }), [variant]);
+  const isLegacy = useIsLegacyBrand();
+  const effectiveVariant = !isLegacy || variant === "argo" ? "argo" : "default";
+  const contextValue = useMemo(() => ({ variant: effectiveVariant }), [effectiveVariant]);
   return /* @__PURE__ */ jsx(DropdownMenuContext, { value: contextValue, children: /* @__PURE__ */ jsx(Root, { ...props, modal }) });
 };
 DropdownMenu.Trigger = DropdownMenuTrigger;
@@ -1419,33 +1438,37 @@ var SplitButtonBase = ({
   icon,
   children,
   ...rest
-}) => /* @__PURE__ */ jsxs(ButtonGroup, { space: "compact", children: [
-  /* @__PURE__ */ jsxs(Button, { ...rest, ref, disabled, variant, size, argo, children: [
-    !rest.isLoading && renderLegacyIcon(icon),
-    children
-  ] }),
-  actions && /* @__PURE__ */ jsxs(
-    DropdownMenu,
-    {
-      open: isActionsOpen,
-      onOpenChange: onActionsOpenChange,
-      variant: argo ? "argo" : "default",
-      children: [
-        /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            argo,
-            size: iconSizeMap[size],
-            variant,
-            "aria-label": "Additional actions",
-            children: /* @__PURE__ */ jsx(icons_exports.ChevronDown, { className: "tw-size-5" })
-          }
-        ) }),
-        /* @__PURE__ */ jsx(DropdownMenu.Content, { align: "end", children: actions })
-      ]
-    }
-  )
-] });
+}) => {
+  const isLegacy = useIsLegacyBrand();
+  const renderArgo = !isLegacy || argo;
+  return /* @__PURE__ */ jsxs(ButtonGroup, { space: "compact", children: [
+    /* @__PURE__ */ jsxs(Button, { ...rest, ref, disabled, variant, size, argo, children: [
+      !rest.isLoading && icon,
+      children
+    ] }),
+    actions && /* @__PURE__ */ jsxs(
+      DropdownMenu,
+      {
+        open: isActionsOpen,
+        onOpenChange: onActionsOpenChange,
+        variant: renderArgo ? "argo" : "default",
+        children: [
+          /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              argo,
+              size: iconSizeMap[size],
+              variant,
+              "aria-label": "Additional actions",
+              children: /* @__PURE__ */ jsx(icons_exports.ChevronDown, { className: "tw-size-5" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(DropdownMenu.Content, { align: "end", children: actions })
+        ]
+      }
+    )
+  ] });
+};
 var SplitButton = Object.assign(SplitButtonBase, {
   Action: DropdownMenu.Item,
   Actions: DropdownMenu.Group
@@ -1469,7 +1492,7 @@ var MultiActionButton = ({
     variant: "invisible",
     size: "icon",
     "data-testid": dataTestId,
-    children: !isLoading && renderLegacyIcon(icon)
+    children: !isLoading && icon
   }
 ) });
 var MultiActionButtonGroup = ({ children, className }) => /* @__PURE__ */ jsx(ButtonGroup, { className: cn("tw-text-nowrap", className), children });
@@ -1578,6 +1601,33 @@ var toggleVariants = 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: {
@@ -1593,7 +1643,27 @@ var toggleVariants = 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",
@@ -1624,7 +1694,7 @@ var Toggle = ({
       disabled,
       children: [
         badge && /* @__PURE__ */ jsx("span", { className: "tw-absolute tw-right-0 tw-top-0 -tw-translate-y-1/2 tw-translate-x-1/4", children: badge }),
-        icon && /* @__PURE__ */ jsx("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__ */ 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__ */ 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
       ]
     }
@@ -1838,7 +1908,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
@@ -1865,6 +1935,8 @@ var ModalBody = ({ className, ...props }) => /* @__PURE__ */ jsx(
     ...props
   }
 );
+var ModalArgoContext = createContext(false);
+var useModalArgo = () => use(ModalArgoContext);
 var ModalOverlay = ({
   ref,
   className,
@@ -1901,8 +1973,11 @@ var ModalContent = ({
   className,
   children,
   onEscapeKeyDown,
+  argo,
   ...props
 }) => {
+  const isLegacy = useIsLegacyBrand();
+  const renderArgo = !isLegacy || argo === true;
   const handleEscapeKeyDown = (event) => {
     event.stopPropagation();
     onEscapeKeyDown?.(event);
@@ -1911,6 +1986,7 @@ var ModalContent = ({
     Content$1,
     {
       "aria-describedby": void 0,
+      "data-argo": renderArgo,
       className: cn(
         // reset
         "tailwindcss-preflight",
@@ -1929,7 +2005,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",
@@ -1954,7 +2030,7 @@ var ModalContent = ({
       ),
       onEscapeKeyDown: handleEscapeKeyDown,
       ...props,
-      children
+      children: /* @__PURE__ */ jsx(ModalArgoContext, { value: renderArgo, children })
     }
   ) }) });
 };
@@ -1969,34 +2045,37 @@ var ModalFooter = ({ className, ...props }) => /* @__PURE__ */ jsx(
     ...props
   }
 );
-var ModalCloseIcon = ({ className, ...rest }) => /* @__PURE__ */ jsxs(
-  Close,
-  {
-    ...rest,
-    className: cn(
-      "tw-group/modal-close-icon",
-      "tw-flex",
-      "tw-items-center",
-      "tw-justify-center",
-      "focus:tw-outline-none",
-      className
-    ),
-    children: [
-      /* @__PURE__ */ 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__ */ jsxs(
+    Close,
+    {
+      ...rest,
+      className: cn(
+        "tw-group/modal-close-icon",
+        "tw-flex",
+        "tw-items-center",
+        "tw-justify-center",
+        "focus:tw-outline-none",
+        className
       ),
-      /* @__PURE__ */ jsx("span", { className: "tw-sr-only", children: "Close" })
-    ]
-  }
-);
+      children: [
+        /* @__PURE__ */ 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__ */ jsx("span", { className: "tw-sr-only", children: "Close" })
+      ]
+    }
+  );
+};
 var ModalDescription = ({ className, ...props }) => /* @__PURE__ */ jsx(
   DialogPrimitive.Description,
   {
@@ -2019,37 +2098,40 @@ var ModalHeader = ({
   hideCloseIcon = false,
   children,
   ...props
-}) => /* @__PURE__ */ 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__ */ jsxs("div", { className: "tw-flex tw-flex-col", children: [
-        /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-justify-end tw-gap-2", children: [
-          title && /* @__PURE__ */ jsx(ModalTitle, { children: title }),
-          !hideCloseIcon && /* @__PURE__ */ jsx(ModalCloseIcon, {})
+}) => {
+  const argo = useModalArgo();
+  return /* @__PURE__ */ 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__ */ jsxs("div", { className: "tw-flex tw-flex-col", children: [
+          /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-justify-end tw-gap-2", children: [
+            title && /* @__PURE__ */ jsx(ModalTitle, { children: title }),
+            !hideCloseIcon && /* @__PURE__ */ jsx(ModalCloseIcon, {})
+          ] }),
+          description && /* @__PURE__ */ jsx(ModalDescription, { children: description })
         ] }),
-        description && /* @__PURE__ */ jsx(ModalDescription, { children: description })
-      ] }),
-      children
-    ]
-  }
-);
+        children
+      ]
+    }
+  );
+};
 var NAMED_COLORS = /* @__PURE__ */ new Set(["orange", "blue", "red", "green", "gray", "violet"]);
 var ModalIcon = (props) => {
   const [hasImageError, setHasImageError] = useState(false);
@@ -2100,7 +2182,7 @@ var ModalIcon = (props) => {
                 '[&_svg:not([class*="tw-size-"])]:tw-size-6',
                 "[&_svg]:tw-aspect-square"
               ),
-              children: renderLegacyIcon(props.icon)
+              children: props.icon
             }
           )
         }
@@ -2253,10 +2335,13 @@ var FullScreenModalRoot = ({
   className,
   lockBodyScroll = true,
   onEscapeKeyDown,
-  argo = false,
+  onKeyDown,
+  argo,
   ...props
 }) => {
   const modalRef = useRef(null);
+  const isLegacy = useIsLegacyBrand();
+  const renderArgo = !isLegacy || argo === true;
   useEffect(() => {
     const modalElement = modalRef.current;
     if (lockBodyScroll) {
@@ -2272,6 +2357,7 @@ var FullScreenModalRoot = ({
     };
   }, [lockBodyScroll]);
   const handleKeyDown2 = (event) => {
+    onKeyDown?.(event);
     if (event.key === "Escape" && !event.defaultPrevented) {
       onEscapeKeyDown?.(event);
     }
@@ -2280,12 +2366,13 @@ var FullScreenModalRoot = ({
     /* @__PURE__ */ 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",
@@ -2299,7 +2386,6 @@ var FullScreenModalRoot = ({
           "focus-visible:tw-outline-none",
           className
         ),
-        ...props,
         children
       }
     ),
@@ -2333,8 +2419,14 @@ var sheetContentVariants = 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",
@@ -2357,14 +2449,16 @@ var sheetContentVariants = 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",
@@ -2372,15 +2466,17 @@ var sheetContentVariants = 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"
         ]
       }
     }
@@ -2396,8 +2492,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);
@@ -2417,6 +2516,7 @@ var SheetContent = ({
         onPointerDownOutside: handleOnPointerDownOutside,
         onInteractOutside: handleOnInteractOutside,
         "data-side": side,
+        "data-argo": renderArgo,
         children
       }
     )
@@ -2444,7 +2544,7 @@ var SheetHeader = ({
   ] });
 };
 var SheetTitle = ({ className, visuallyHidden = false, ...props }) => /* @__PURE__ */ jsx(Title, { className: cn({ "tw-sr-only": visuallyHidden }, className), ...props });
-var Sheet = ({ ...props }) => /* @__PURE__ */ jsx(Root$8, { ...props });
+var Sheet = (props) => /* @__PURE__ */ jsx(Root$8, { ...props });
 Sheet.Close = Close;
 Sheet.Trigger = Trigger$1;
 Sheet.Content = SheetContent;
@@ -2470,11 +2570,7 @@ var variants3 = 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",
@@ -2499,8 +2595,10 @@ var variants3 = 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)]"],
@@ -2519,21 +2617,25 @@ var PopoverContent = ({
   variant,
   onEscapeKeyDown,
   ...props
-}) => /* @__PURE__ */ jsx(Portal$2, { children: /* @__PURE__ */ jsx(
-  Content$2,
-  {
-    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__ */ jsx(Portal$2, { children: /* @__PURE__ */ jsx(
+    Content$2,
+    {
+      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__ */ jsx(Root$2, { ...props });
 Popover.Content = PopoverContent;
 Popover.Trigger = Trigger$2;
@@ -2602,15 +2704,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)
     }
   );
 };
@@ -2682,53 +2776,61 @@ var HoverCardContent = ({
   className,
   align = "center",
   sideOffset = 4,
+  argo,
   children,
   ...props
-}) => /* @__PURE__ */ jsx(Portal$3, { children: /* @__PURE__ */ jsx(
-  Content$3,
-  {
-    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__ */ jsx(Portal$3, { children: /* @__PURE__ */ jsx(
+    Content$3,
+    {
+      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__ */ jsx(Root$9, { ...rest, openDelay, closeDelay });
 HoverCard.Content = HoverCardContent;
 HoverCard.Trigger = Trigger$3;
@@ -2757,10 +2859,10 @@ var CommandGroup = ({ className, ...props }) => /* @__PURE__ */ 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
     ),
@@ -2768,13 +2870,13 @@ var CommandGroup = ({ className, ...props }) => /* @__PURE__ */ 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 = getDefaultClassNames();
@@ -2785,10 +2887,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}`,
@@ -2802,27 +2904,31 @@ Calendar.displayName = "Calendar";
 var DatePicker = ({
   align = "end",
   alignOffset = -18,
-  argo = false,
+  argo,
   children,
   defaultOpen,
   onOpenChange,
   open,
   sideOffset = 12,
   ...calendarProps
-}) => /* @__PURE__ */ jsxs(Popover, { defaultOpen, open, onOpenChange, children: [
-  /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children }),
-  /* @__PURE__ */ jsx(
-    Popover.Content,
-    {
-      align,
-      alignOffset,
-      className: "tw-w-auto tw-p-0",
-      sideOffset,
-      variant: argo ? "argo" : "default",
-      children: /* @__PURE__ */ jsx(Calendar, { ...calendarProps })
-    }
-  )
-] });
+}) => {
+  const isLegacy = useIsLegacyBrand();
+  const renderArgo = !isLegacy || argo === true;
+  return /* @__PURE__ */ jsxs(Popover, { defaultOpen, open, onOpenChange, children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx(
+      Popover.Content,
+      {
+        align,
+        alignOffset,
+        className: "tw-w-auto tw-p-0",
+        sideOffset,
+        variant: renderArgo ? "argo" : "default",
+        children: /* @__PURE__ */ jsx(Calendar, { ...calendarProps })
+      }
+    )
+  ] });
+};
 DatePicker.displayName = "DatePicker";
 var addonVariants = cva(
   [
@@ -3106,7 +3212,8 @@ var inputGroupVariants = 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",
@@ -3160,15 +3267,28 @@ var InputGroupRoot = ({
   focusVariant,
   className,
   ...props
-}) => /* @__PURE__ */ 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__ */ jsx(
+    "div",
+    {
+      ...props,
+      ref,
+      className: cn(
+        inputGroupVariants({
+          state,
+          variant: effectiveVariant,
+          sizing: effectiveSizing,
+          focusVariant,
+          className
+        })
+      ),
+      children
+    }
+  );
+};
 var InputGroup = InputGroupRoot;
 InputGroup.Input = InputGroupInput;
 InputGroup.Addon = InputGroupAddon;
@@ -3281,7 +3401,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
             }
@@ -3345,6 +3465,7 @@ var DateInput = ({
   readOnly,
   startMonth,
   value,
+  variant,
   ...props
 }) => {
   const [inputValue, setInputValue] = useState("");
@@ -3414,6 +3535,7 @@ var DateInput = ({
       readOnly,
       ref,
       value: displayValue,
+      variant,
       rightSuffix: !disabled && !readOnly ? /* @__PURE__ */ jsx(
         DatePicker,
         {
@@ -3570,6 +3692,7 @@ var TextInput = ({
   value,
   defaultValue,
   type = "text",
+  variant,
   onValueChange,
   onChange,
   onValueBlur,
@@ -3592,6 +3715,7 @@ var TextInput = ({
       onChange: handleChange,
       onBlur: handleBlur,
       type,
+      variant,
       value: sanitizeTextInputValue(value),
       defaultValue: sanitizeTextInputValue(defaultValue)
     }
@@ -3617,12 +3741,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
@@ -3653,7 +3777,7 @@ var MINUTES = Array.from({ length: 60 }, (_, i) => i);
 var TimePicker = ({
   align = "end",
   alignOffset = -18,
-  argo = false,
+  argo,
   children,
   defaultOpen,
   defaultSelected,
@@ -3663,6 +3787,8 @@ var TimePicker = ({
   selected,
   sideOffset = 12
 }) => {
+  const isLegacy = useIsLegacyBrand();
+  const renderArgo = !isLegacy || argo;
   const [internalSelected, setInternalSelected] = useState(defaultSelected ?? null);
   const isControlled = selected !== void 0;
   const currentValue = isControlled ? selected : internalSelected;
@@ -3692,7 +3818,7 @@ var TimePicker = ({
         alignOffset,
         sideOffset,
         className: "tw-flex tw-flex-row",
-        variant: argo ? "argo" : "default",
+        variant: renderArgo ? "argo" : "default",
         children: [
           /* @__PURE__ */ jsx(ScrollArea, { type: "always", ref: scrollToSelected, viewPortClassName: "tw-h-60 tw-px-3", children: HOURS.map((value) => /* @__PURE__ */ jsx(
             TimePickerButton,
@@ -3728,6 +3854,7 @@ var TimeInput = ({
   placeholder = "Select time",
   readOnly,
   value,
+  variant,
   className,
   ...props
 }) => {
@@ -3773,6 +3900,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,
@@ -3931,7 +4059,7 @@ var CommandItem = ({
       ),
       children: [
         /* @__PURE__ */ jsx(CheckIndicator, { variant }),
-        icon && /* @__PURE__ */ jsx("span", { className: "tw-inline-flex tw-size-4 tw-shrink-0 tw-items-center tw-justify-center tw-text-neutral-400 [&_svg:not([class*='tw-size-'])]:tw-size-4", children: icon }),
+        icon && /* @__PURE__ */ 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
       ]
     }
@@ -3981,14 +4109,18 @@ var CommandSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx(
     ...props
   }
 );
-var Command = ({ className, variant = "default", ...rest }) => /* @__PURE__ */ jsx(
-  Command$1,
-  {
-    "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__ */ jsx(
+    Command$1,
+    {
+      "data-variant": effectiveVariant,
+      className: cn("tw-group/command", "tailwindcss-preflight", className),
+      ...rest
+    }
+  );
+};
 Command.Content = CommandContent;
 Command.Separator = CommandSeparator;
 Command.List = CommandList;
@@ -4033,7 +4165,7 @@ var DateRangePicker = ({
     }
   ) }),
   /* @__PURE__ */ jsx(Popover.Content, { variant: "argo", align: "start", className: "tw-w-auto tw-p-0", children: /* @__PURE__ */ jsxs("div", { className: "tw-flex", children: [
-    presets && presets.length > 0 ? /* @__PURE__ */ 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__ */ jsx(
+    presets && presets.length > 0 ? /* @__PURE__ */ 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__ */ jsx(
       Button,
       {
         argo: true,
@@ -4064,7 +4196,7 @@ var DateRangePicker = ({
   ] }) })
 ] });
 DateRangePicker.displayName = "DateRangePicker";
-var Optional = ({ className }) => /* @__PURE__ */ jsx("span", { className: cn("tw-text-neutral-400", className), children: "(optional)" });
+var Optional = ({ className }) => /* @__PURE__ */ jsx("span", { className: cn("tw-text-muted-foreground", className), children: "(optional)" });
 var Label2 = ({ className, children, id, htmlFor, ...rest }) => {
   return /* @__PURE__ */ jsx(
     RLabel.Root,
@@ -4073,7 +4205,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
@@ -4344,7 +4476,8 @@ var Switch = ({
 }) => {
   const fallbackId = useId();
   const id = idProp?.toString() ?? fallbackId;
-  const switchVariant = argo ? "argo" : "default";
+  const isLegacy = useIsLegacyBrand();
+  const switchVariant = !isLegacy || argo ? "argo" : "default";
   const switchElement = /* @__PURE__ */ jsx(
     Root$3,
     {
@@ -4364,110 +4497,163 @@ var Switch = ({
 };
 var RadioGroupContext = createContext({
   variant: "radio",
-  orientation: "horizontal"
+  orientation: "horizontal",
+  groupArgo: false
 });
 var RadioGroupProvider = RadioGroupContext;
 var useRadioGroupContext = () => use(RadioGroupContext);
-var Radio = ({ className, ...props }) => /* @__PURE__ */ jsx(
-  Item,
+var radioVariants = 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__ */ jsx(Indicator$2, { className: cn("tw-flex", "tw-items-center", "tw-justify-center"), children: /* @__PURE__ */ 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 = cva(["tw-size-2.5", "tw-fill-current"], {
+  defaultVariants: {
+    variant: "default"
+  },
+  variants: {
+    variant: {
+      default: ["tw-text-primary"],
+      argo: ["tw-text-primary-foreground"]
+    }
+  }
+});
+var radioItemButtonVariants = 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__ */ jsx(Item, { ...props, className: cn(radioVariants({ variant: styleVariant }), className), children: /* @__PURE__ */ jsx(Indicator$2, { className: cn("tw-flex", "tw-items-center", "tw-justify-center"), children: /* @__PURE__ */ jsx(icons_exports.Circle, { className: radioIndicatorVariants({ variant: styleVariant }) }) }) });
 var RadioGroupItemButton = ({
   ref,
   className,
   children,
+  styleVariant = "default",
   ...props
 }) => /* @__PURE__ */ jsx(
   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
   }
 );
@@ -4477,19 +4663,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 = useId();
   const item = (() => {
     if (variant === "button")
-      return /* @__PURE__ */ jsx(RadioGroupItemButton, { ...props, children });
+      return /* @__PURE__ */ jsx(RadioGroupItemButton, { styleVariant, ...props, children });
     return /* @__PURE__ */ jsxs(
       FieldBox,
       {
         variant: variant === "radio-block" ? "boxed" : "default",
         htmlFor: id,
-        control: /* @__PURE__ */ jsx(Radio, { ...props, id }),
+        control: /* @__PURE__ */ jsx(Radio, { styleVariant, ...props, id }),
         className: variant === "radio-block" ? "tw-flex-1" : void 0,
         children: [
           /* @__PURE__ */ jsx(FieldBox.Title, { children }),
@@ -4624,12 +4813,15 @@ var RadioGroup2 = ({
   className,
   disabled = false,
   orientation = "horizontal",
+  argo,
   onValueChange,
   children,
   value,
   defaultValue,
   ...props
 }) => {
+  const isLegacy = useIsLegacyBrand();
+  const groupArgo = !isLegacy || argo === true;
   return /* @__PURE__ */ jsx(
     RRadioGroup.Root,
     {
@@ -4640,7 +4832,7 @@ var RadioGroup2 = ({
       disabled,
       value: value ?? void 0,
       defaultValue: defaultValue ?? void 0,
-      children: /* @__PURE__ */ jsx(RadioGroupProvider, { value: { variant, orientation }, children })
+      children: /* @__PURE__ */ jsx(RadioGroupProvider, { value: { variant, orientation, groupArgo }, children })
     }
   );
 };
@@ -5088,67 +5280,72 @@ var SelectContent = ({
   container,
   position = "popper",
   sideOffset = 4,
-  variant = "default",
+  variant,
   ...props
-}) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { container, children: /* @__PURE__ */ jsxs(
-  SelectPrimitive.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__ */ jsx(SelectPrimitive.ScrollUpButton, { className: scrollButtonStyles, children: /* @__PURE__ */ jsx(icons_exports.ChevronUp, {}) }),
-      /* @__PURE__ */ jsx(
-        SelectPrimitive.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__ */ jsx(SelectPrimitive.Portal, { container, children: /* @__PURE__ */ jsxs(
+    SelectPrimitive.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__ */ jsx(SelectPrimitive.ScrollDownButton, { className: scrollButtonStyles, children: /* @__PURE__ */ jsx(icons_exports.ChevronDown, {}) })
-    ]
-  }
-) });
+      children: [
+        /* @__PURE__ */ jsx(SelectPrimitive.ScrollUpButton, { className: scrollButtonStyles, children: /* @__PURE__ */ jsx(icons_exports.ChevronUp, {}) }),
+        /* @__PURE__ */ jsx(
+          SelectPrimitive.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__ */ jsx(SelectPrimitive.ScrollDownButton, { className: scrollButtonStyles, children: /* @__PURE__ */ jsx(icons_exports.ChevronDown, {}) })
+      ]
+    }
+  ) });
+};
 var SelectGroup = ({ className, ...props }) => /* @__PURE__ */ jsx(SelectPrimitive.Group, { ...props, className: cn("tw-flex tw-flex-col tw-gap-0.5", className) });
 var SelectItem = ({
   ref,
@@ -5197,7 +5394,7 @@ var SelectItem = ({
       className
     ),
     children: [
-      renderLegacyIcon(icon),
+      icon,
       /* @__PURE__ */ jsx("span", { className: "tw-flex-1 tw-truncate", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children }) }),
       /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { className: "tw-pointer-events-none", children: /* @__PURE__ */ jsx(icons_exports.Check, { className: "tw-size-4" }) })
     ]
@@ -5214,7 +5411,7 @@ var SelectLabel = ({ className, ...props }) => /* @__PURE__ */ 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",
@@ -5232,7 +5429,7 @@ var SelectSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx(
   SelectPrimitive.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 = cva(
@@ -5319,7 +5516,8 @@ var variants4 = 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",
@@ -5366,18 +5564,22 @@ var SelectTrigger = ({
   sizing,
   placeholder,
   ...props
-}) => /* @__PURE__ */ jsxs(
-  SelectPrimitive.Trigger,
-  {
-    ref,
-    className: cn(variants4({ variant, state, sizing }), className),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx(SelectPrimitive.Value, { placeholder }),
-      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(icons_exports.ChevronDown, { className: "tw-size-5 tw-text-muted-foreground" }) })
-    ]
-  }
-);
+}) => {
+  const isLegacy = useIsLegacyBrand();
+  const effectiveVariant = !isLegacy || variant === "argo" ? "argo" : variant;
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Trigger,
+    {
+      ref,
+      className: cn(variants4({ variant: effectiveVariant, state, sizing }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(SelectPrimitive.Value, { placeholder }),
+        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(icons_exports.ChevronDown, { className: "tw-size-5 tw-text-muted-foreground" }) })
+      ]
+    }
+  );
+};
 var isGroup = (itemOrGroup) => "items" in itemOrGroup;
 var Select = ({
   // root
@@ -5538,7 +5740,8 @@ function Checkbox({
 }) {
   const fallbackId = useId();
   const id = idProp?.toString() ?? fallbackId;
-  const styleVariant = argo ? "argo" : "default";
+  const isLegacy = useIsLegacyBrand();
+  const styleVariant = !isLegacy || argo ? "argo" : "default";
   const checkboxElement = /* @__PURE__ */ jsx(Root$4, { id, ...rest, className: cn(rootVariants2({ variant: styleVariant, className })), children: /* @__PURE__ */ jsxs(Indicator, { className: cn(indicatorVariants({ variant: styleVariant })), children: [
     /* @__PURE__ */ jsx(icons_exports.Check, { className: "tw-hidden tw-size-3 tw-stroke-[4px] group-data-[state=checked]:tw-block" }),
     /* @__PURE__ */ jsx(icons_exports.Minus, { className: "tw-hidden tw-size-3 tw-stroke-[4px] group-data-[state=indeterminate]:tw-block" })
@@ -5870,66 +6073,70 @@ var ComboboxContent = ({
   container,
   className,
   children,
-  variant = "default",
+  variant,
   ...popupProps
-}) => /* @__PURE__ */ jsx(Combobox$1.Portal, { container, children: /* @__PURE__ */ jsx(
-  Combobox$1.Positioner,
-  {
-    align,
-    side,
-    sideOffset,
-    alignOffset,
-    anchor,
-    className: "tailwindcss-preflight tw-isolate tw-z-[1055]",
-    children: /* @__PURE__ */ jsx(
-      Combobox$1.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__ */ jsx(Combobox$1.Portal, { container, children: /* @__PURE__ */ jsx(
+    Combobox$1.Positioner,
+    {
+      align,
+      side,
+      sideOffset,
+      alignOffset,
+      anchor,
+      className: "tailwindcss-preflight tw-isolate tw-z-[1055]",
+      children: /* @__PURE__ */ jsx(
+        Combobox$1.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,
@@ -6128,7 +6335,7 @@ var ComboboxSeparator = ({
   Combobox$1.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
   }
 );
@@ -6162,7 +6369,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",
@@ -6406,10 +6613,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$1.useFilter({
@@ -6524,7 +6733,7 @@ var Textarea = ({
   containerClassName,
   // group props
   state = "default",
-  variant = "primary",
+  variant,
   sizing,
   focusVariant,
   ...rest
@@ -7037,7 +7246,8 @@ var slotVariants = 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",
@@ -7732,8 +7942,8 @@ var helpVariants = 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"]
     }
   }
@@ -7850,6 +8060,8 @@ var AnswerSummary = ({
   const [isExpanded, setIsExpanded] = 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__ */ jsxs("section", { className: "tw-mt-4 tw-flex tw-flex-col tw-gap-4", "aria-label": SECTION_LABELS[variant], children: [
     /* @__PURE__ */ jsx(
       CollapsibleStepHeader,
@@ -7857,7 +8069,7 @@ var AnswerSummary = ({
         isExpanded,
         onToggle: toggle,
         variant,
-        label: `${count} question${count !== 1 ? "s" : ""}`
+        label
       }
     ),
     isExpanded && /* @__PURE__ */ jsx("div", { className: "tw-flex tw-flex-col tw-gap-4 tw-pl-5", children: items.map(({ question, answer }, index) => /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-flex-col tw-gap-1", children: [
@@ -8361,6 +8573,7 @@ var PromptInputSubmit = ({
     getTooltipText() && /* @__PURE__ */ jsx(Tooltip.Content, { placement: "top", variant: "action", children: getTooltipText() })
   ] });
 };
+var CMDK_HIJACKED_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "Home", "End", "Enter"]);
 var promptInputVariants = cva(
   [
     "tailwindcss-preflight",
@@ -8432,15 +8645,11 @@ var PromptInput = ({
   const textareaId = useId();
   const textareaRef = useRef(null);
   const [dismissedValue, setDismissedValue] = 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) : "";
-  useEffect(() => {
-    if (dismissedValue !== null && value !== dismissedValue) {
-      setDismissedValue(null);
-    }
-  }, [value, dismissedValue]);
   const handleSubmit = () => {
     if (isDisabled) return;
     if (status === "streaming") onAbort?.();
@@ -8468,6 +8677,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();
@@ -9075,44 +9286,48 @@ var AlertRoot = ({
   variant,
   argo = false,
   ...rest
-}) => /* @__PURE__ */ 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__ */ 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,
@@ -9264,6 +9479,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",
@@ -9288,6 +9504,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
@@ -9325,6 +9542,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
@@ -9384,11 +9602,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__ */ 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];
   })();
@@ -9396,35 +9617,44 @@ var ToastRoot = ({
     toast$1.dismiss(id);
     action?.onClick(event);
   };
-  return /* @__PURE__ */ jsxs("div", { "data-variant": variant, className: cn(variants6({ variant })), children: [
-    icon && /* @__PURE__ */ 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__ */ jsxs(
+    "div",
+    {
+      "data-variant": variant,
+      "data-argo": renderArgo,
+      className: cn(
+        variants6({ variant }),
+        "data-[variant=default]:data-[argo=true]:tw-bg-background"
+      ),
+      children: [
+        icon && /* @__PURE__ */ 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__ */ jsx(ToastTitle, { children: title }),
-    description && /* @__PURE__ */ jsx(ToastDescription, { children: description }),
-    action && /* @__PURE__ */ jsx(ToastAction, { style: action?.actionButtonStyle, onClick: handleActionClick, children: action.label }),
-    /* @__PURE__ */ jsx(ToastDismiss, { onClick: () => toast$1.dismiss(id) }),
-    duration !== Infinity && /* @__PURE__ */ jsx(ToastDuration, { duration })
-  ] });
+        /* @__PURE__ */ jsx(ToastTitle, { children: title }),
+        description && /* @__PURE__ */ jsx(ToastDescription, { children: description }),
+        action && /* @__PURE__ */ jsx(ToastAction, { style: action?.actionButtonStyle, onClick: handleActionClick, children: action.label }),
+        /* @__PURE__ */ jsx(ToastDismiss, { onClick: () => toast$1.dismiss(id) }),
+        duration !== Infinity && /* @__PURE__ */ jsx(ToastDuration, { duration })
+      ]
+    }
+  );
 };
 var toast = ({
   onAutoClose,
@@ -9521,20 +9751,20 @@ var Toaster = ({ gap = 12, visibleToasts = 5, ...props }) => (
   ) })
 );
 var EmptySearchContent = ({ children = "No results found." }) => {
-  return /* @__PURE__ */ jsx("div", { className: "tw-px-0 tw-py-[30px] tw-text-center tw-text-sm tw-text-neutral-400", children });
+  return /* @__PURE__ */ 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__ */ jsx("div", { ...rest, children });
 var CardHeader = ({ children, ...rest }) => /* @__PURE__ */ jsx("div", { ...rest, children });
 var cardClassnames = 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",
@@ -9550,7 +9780,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__ */ jsx("h3", { className: cn(cardTitleClassnames, className), ...rest, children });
 var Card = ({
@@ -9558,8 +9788,21 @@ var Card = ({
   className,
   bordered = false,
   padding = "small",
+  argo = false,
   ...rest
-}) => /* @__PURE__ */ jsx("div", { className: cardClassnames({ className, bordered, padding }), ...rest, children });
+}) => {
+  const isLegacy = useIsLegacyBrand();
+  const renderArgo = !isLegacy || argo;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      "data-argo": renderArgo,
+      className: cardClassnames({ className, bordered, padding }),
+      children
+    }
+  );
+};
 Card.Header = CardHeader;
 Card.Content = CardContent;
 Card.Title = CardTitle;
@@ -9746,7 +9989,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",
@@ -9814,7 +10057,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__ */ jsxs(
     "div",
@@ -9878,11 +10121,13 @@ var Collapse = ({
   );
 };
 var headerVariants = 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: {
@@ -9898,7 +10143,7 @@ var headerVariants = cva(
       {
         isDisabled: false,
         hasEnforcedState: false,
-        class: "tw-cursor-pointer hover:tw-text-secondary-500"
+        class: "tw-cursor-pointer hover:tw-text-primary"
       }
     ],
     defaultVariants: {
@@ -9948,7 +10193,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__ */ jsxs(
@@ -9962,7 +10207,7 @@ var CollapsiblePanel = ({
             onKeyUp: handleKeyUp
           },
           children: [
-            /* @__PURE__ */ jsx("div", { className: "tw-flex tw-flex-1 tw-items-center tw-gap-2 tw-py-px tw-text-sm tw-font-medium tw-text-neutral-800", children: header }),
+            /* @__PURE__ */ jsx("div", { className: "tw-flex tw-flex-1 tw-items-center tw-gap-2 tw-py-px tw-text-sm tw-font-medium tw-text-foreground", children: header }),
             !isDisabled && /* @__PURE__ */ jsx("div", { className: "tw-ml-auto tw-shrink-0", children: /* @__PURE__ */ jsx(icons_exports.ChevronDown, { className: cn("tw-size-5 group-data-[state=open]:tw-rotate-180") }) })
           ]
         }
@@ -9996,8 +10241,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,
@@ -10032,35 +10277,18 @@ var AIGradientsSvg = () => /* @__PURE__ */ jsx("svg", { width: "0", height: "0",
 ] }) });
 
 // 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;
@@ -10068,7 +10296,6 @@ var brandToCssVars = (brand) => {
   }
   return vars;
 };
-var ThemeContext = createContext(null);
 var ThemeProvider = ({ brand = keboola, setBrand, children }) => {
   useEffect(() => {
     if (typeof document === "undefined") return;
@@ -10296,7 +10523,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
     ),
@@ -10588,14 +10815,14 @@ var PageToolbar = Object.assign(Root26, {
 });
 var resizableHandleVariants = 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",
@@ -10764,8 +10991,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__ */ jsx(
@@ -10951,12 +11178,8 @@ var SidebarProvider = ({
   const [isRightDragging, setIsRightDragging] = useState(false);
   const [leftDragWidth, setLeftDragWidth] = useState(null);
   const [rightDragWidth, setRightDragWidth] = useState(null);
-  useEffect(() => {
-    if (leftDragWidth !== null && leftWidth === leftDragWidth) setLeftDragWidth(null);
-  }, [leftWidth, leftDragWidth]);
-  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,
@@ -11187,7 +11410,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",
@@ -11337,7 +11560,7 @@ var SidebarMenuButton = ({
       ),
       tabIndex: 0,
       children: [
-        icon && /* @__PURE__ */ jsx(SidebarMenuIcon, { children: renderLegacyIcon(icon) }),
+        icon && /* @__PURE__ */ jsx(SidebarMenuIcon, { children: icon }),
         /* @__PURE__ */ jsx(Slottable, { children })
       ]
     }
@@ -11536,7 +11759,7 @@ var SidebarMenuCard = ({ children, className, icon, title, ...rest }) => {
         ),
         children: /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-flex-col tw-gap-2", children: [
           /* @__PURE__ */ jsxs(Title3, { children: [
-            /* @__PURE__ */ jsx(SidebarMenuIcon, { className: "tw-p-px", children: renderLegacyIcon(icon) }),
+            /* @__PURE__ */ jsx(SidebarMenuIcon, { className: "tw-p-px", children: icon }),
             title
           ] }),
           /* @__PURE__ */ jsx(Content10, { className, children })
@@ -12301,7 +12524,7 @@ var NavbarMenuButton = ({
   const Comp = asChild ? Root$1 : "button";
   const isSearchVariant = variant === "search";
   const isEmphasizedVariant = variant === "emphasized";
-  const adornment = isSearchVariant ? /* @__PURE__ */ jsx(icons_exports.Search, {}) : renderLegacyIcon(icon);
+  const adornment = isSearchVariant ? /* @__PURE__ */ jsx(icons_exports.Search, {}) : icon;
   const adornmentVariant = (() => {
     if (isSearchVariant || variant === "icon") return "icon-button";
     if (isEmphasizedVariant) return "icon-accent-emphasized";
@@ -12506,15 +12729,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__ */ jsx(ScrollArea, { orientation: "horizontal", className: tabsListWrapperClass, children: /* @__PURE__ */ jsx(RadixTabs.List, { ...rest, "data-slot": "tabs-list", className: cn(tabsListClass, className), children }) });
+var TabsTrigger = ({ className, compact = false, ...rest }) => /* @__PURE__ */ jsx(
+  RadixTabs.Trigger,
+  {
+    "data-slot": "tabs-trigger",
+    ...rest,
+    className: cn(tabsTriggerClass, compact && tabsTriggerCompactClass, className)
+  }
+);
 var Tabs2 = ({
   triggers,
   compact = false,
@@ -12524,66 +12754,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__ */ jsxs(
-    RadixTabs.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__ */ jsx(
-          ScrollArea,
-          {
-            orientation: "horizontal",
-            className: "tw-shrink-0 tw-border-0 tw-border-b tw-border-solid tw-border-neutral-200",
-            children: /* @__PURE__ */ jsx(RadixTabs.List, { className: cn("tw-flex tw-gap-8 tw-shrink-0", listClassName), children: triggers.map(({ value, title, onClose, ...rest2 }) => {
-              if (onClose) {
-                return /* @__PURE__ */ jsx(
-                  RadixTabs.Trigger,
-                  {
-                    asChild: true,
-                    value,
-                    className: triggerClasses,
-                    ...rest2,
-                    children: /* @__PURE__ */ jsxs("div", { children: [
-                      title,
-                      /* @__PURE__ */ 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__ */ jsx(icons_exports.X, { className: "tw-size-4" })
-                        }
-                      )
-                    ] })
-                  },
-                  value
-                );
+}) => /* @__PURE__ */ jsxs(
+  RadixTabs.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__ */ jsx(TabsList, { className: listClassName, children: triggers.map(({ value, title, onClose, className: callerClassName, ...triggerRest }) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(tabsTriggerGroupClass, triggerGroupClassName),
+          "data-slot": "tabs-trigger-group",
+          children: [
+            /* @__PURE__ */ jsx(
+              TabsTrigger,
+              {
+                value,
+                compact,
+                ...triggerRest,
+                className: cn(triggerClassName, callerClassName),
+                children: title
               }
-              return /* @__PURE__ */ jsx(RadixTabs.Trigger, { value, className: triggerClasses, ...rest2, children: title }, value);
-            }) })
-          }
-        ),
-        children
-      ]
-    }
-  );
-};
-var TabsContent = (props) => /* @__PURE__ */ jsx(RadixTabs.Content, { tabIndex: -1, ...props });
+            ),
+            onClose && /* @__PURE__ */ 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__ */ jsx(icons_exports.X, { className: "tw-size-4" })
+              }
+            )
+          ]
+        },
+        value
+      )) }),
+      children
+    ]
+  }
+);
+var TabsContent = (props) => /* @__PURE__ */ jsx(RadixTabs.Content, { "data-slot": "tabs-content", tabIndex: -1, ...props });
 var StepperContext = createContext({
   orientation: "horizontal"
 });
@@ -12838,7 +13058,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
       ),
@@ -12882,7 +13102,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
       ),
@@ -12894,7 +13114,7 @@ var TableRow = ({
   ref,
   className,
   ...props
-}) => /* @__PURE__ */ jsx("tr", { ref, className: cn("hover:tw-bg-neutral-100", className), ...props });
+}) => /* @__PURE__ */ jsx("tr", { ref, className: cn("hover:tw-bg-muted/50", className), ...props });
 var Table = ({
   borderCollapsed = true,
   bordered = false,
@@ -12907,7 +13127,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__ */ jsx(
@@ -12974,10 +13194,10 @@ var connectorWrapper = 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%",
@@ -13011,17 +13231,17 @@ var connector = 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",
@@ -13042,7 +13262,7 @@ var connector = 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",
@@ -13362,7 +13582,7 @@ var variants11 = cva(
       {
         variant: "gutter",
         diff: "default",
-        className: ["tw-bg-neutral-100", "tw-text-neutral-400"]
+        className: ["tw-bg-muted", "tw-text-muted-foreground"]
       },
       {
         variant: "gutter",
@@ -13377,7 +13597,7 @@ var variants11 = cva(
       {
         variant: "code",
         diff: "default",
-        className: ["tw-bg-neutral-50", "tw-text-neutral-800"]
+        className: ["tw-bg-background", "tw-text-foreground"]
       },
       {
         variant: "code",
@@ -13401,7 +13621,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" },
@@ -13622,13 +13842,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__ */ jsxs("table", { className: "tw-w-full tw-table-fixed tw-bg-neutral-50", children: [
+      children: /* @__PURE__ */ jsxs("table", { className: "tw-w-full tw-table-fixed tw-bg-background", children: [
         /* @__PURE__ */ jsx("thead", { className: "tw-sticky tw-top-0 tw-z-10  tw-shadow-sm", children: /* @__PURE__ */ jsxs("tr", { children: [
           /* @__PURE__ */ jsx(DiffViewTh, { variant: "gutter", children: leftTitleGutter }),
           /* @__PURE__ */ jsx(DiffViewTh, { children: leftTitle }),
@@ -13645,8 +13865,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"
                 ),
@@ -13826,6 +14046,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,
@@ -13835,7 +14057,8 @@ var MergePane = ({
   header,
   headerClassName,
   className,
-  onScrollDOMReady
+  onScrollDOMReady,
+  deleted = false
 }) => {
   const editorRef = useRef(null);
   const extensions = useMemo(
@@ -13844,11 +14067,11 @@ var MergePane = ({
       EditorView.theme({
         "&.cm-editor": {
           height: "100%",
-          backgroundColor: colors3.neutral[50],
+          backgroundColor: deleted ? colors3.error[100] : colors3.neutral[50],
           outline: "none"
         },
         ".cm-gutters": {
-          backgroundColor: colors3.neutral[100]
+          backgroundColor: deleted ? colors3.error[200] : colors3.neutral[100]
         },
         "*": { lineHeight: `${LINE_HEIGHT_PX}px` },
         ".cm-lineNumbers .cm-gutterElement": { padding: "0 0 0 25px" }
@@ -13861,20 +14084,27 @@ var MergePane = ({
         }
       })
     ],
-    []
+    [deleted]
   );
   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 = 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]
   );
   useEffect(() => {
     return () => onScrollDOMReady?.(null);
@@ -13887,22 +14117,42 @@ var MergePane = ({
     observer.observe(wrapper);
     return () => observer.disconnect();
   }, []);
-  return /* @__PURE__ */ jsxs("div", { className: cn("tw-flex tw-min-w-0 tw-flex-1 tw-flex-col tw-overflow-hidden", className), children: [
-    header && /* @__PURE__ */ jsx("div", { className: cn("tw-bg-white tw-px-4 tw-py-3", headerClassName), children: header }),
-    /* @__PURE__ */ jsx("div", { className: "tw-flex tw-h-0 tw-flex-1 tw-flex-col [&_>div]:tw-h-full", children: /* @__PURE__ */ jsx(
-      CodeMirror,
-      {
-        ref: editorRef,
-        height: "100%",
-        value,
-        onChange,
-        extensions,
-        readOnly,
-        onCreateEditor: handleCreateEditor,
-        basicSetup: { lineNumbers: true, drawSelection: false }
-      }
-    ) })
-  ] });
+  return /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "tw-flex tw-h-0 tw-flex-1 tw-flex-col [&_>div]:tw-h-full", children: /* @__PURE__ */ jsx(
+          CodeMirror,
+          {
+            ref: editorRef,
+            height: "100%",
+            value,
+            onChange,
+            extensions,
+            readOnly,
+            onCreateEditor: handleCreateEditor,
+            basicSetup: { lineNumbers: true, drawSelection: false }
+          }
+        ) })
+      ]
+    }
+  );
 };
 var useScrollSync = () => {
   const scrollersRef = useRef([]);
@@ -13963,6 +14213,8 @@ var useScrollSync = () => {
   }, []);
   return { registerScroller, registerFollower };
 };
+var EMPTY_LINES2 = /* @__PURE__ */ new Set();
+var EMPTY_CLASSIFICATION2 = /* @__PURE__ */ new Map();
 var MergeEditor = ({
   mergeValue,
   handleMergeChange,
@@ -13986,14 +14238,17 @@ var MergeEditor = ({
   middleClassName,
   rightHeader,
   className,
-  argo
+  argo,
+  leftDeleted = false,
+  rightDeleted = false
 }) => {
   const { registerScroller, registerFollower } = useScrollSync();
+  const anySideDeleted = leftDeleted || rightDeleted;
   return /* @__PURE__ */ 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: [
@@ -14005,14 +14260,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__ */ jsx(
           AcceptControls,
           {
-            conflicts: leftConflicts,
+            conflicts: leftDeleted ? [] : leftConflicts,
             side: "left",
             onAccept: acceptLeft,
             onDismiss: dismissLeft,
@@ -14024,19 +14280,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__ */ jsx(
           AcceptControls,
           {
-            conflicts: rightConflicts,
+            conflicts: rightDeleted ? [] : rightConflicts,
             side: "right",
             onAccept: acceptRight,
             onDismiss: dismissRight,
@@ -14052,8 +14308,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
           }
         )
       ]
@@ -14061,13 +14318,13 @@ var MergeEditor = ({
   );
 };
 var PaneHeader = ({ label, sublabel }) => /* @__PURE__ */ jsxs("div", { children: [
-  /* @__PURE__ */ jsx("p", { className: "tw-m-0 tw-text-sm tw-font-medium tw-text-neutral-900", children: label }),
-  sublabel && /* @__PURE__ */ jsx("p", { className: "tw-m-0 tw-text-xs tw-text-neutral-400", children: sublabel })
+  /* @__PURE__ */ jsx("p", { className: "tw-m-0 tw-text-sm tw-font-medium tw-text-foreground", children: label }),
+  sublabel && /* @__PURE__ */ 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" : ""}`);
@@ -14887,6 +15144,10 @@ var MIN_SCALE = 0.5;
 var MAX_SCALE = 3;
 var ZOOM_STEP = 0.1;
 var ZoomableSvg = ({ html, copyText, className }) => {
+  const safeHtml = useMemo(
+    () => DOMPurify.sanitize(html, { USE_PROFILES: { svg: true, svgFilters: true } }),
+    [html]
+  );
   const containerRef = useRef(null);
   const [scale, setScale] = useState(1);
   const [translate, setTranslate] = useState({ x: 0, y: 0 });
@@ -14982,7 +15243,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 }
               }
             )
           }
@@ -15035,7 +15296,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
       }
@@ -15045,7 +15306,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
@@ -15054,7 +15315,7 @@ var ZoomableSvg = ({ html, copyText, className }) => {
 };
 var ButtonToolbar = ({ value, children }) => {
   if (!value && !children) return null;
-  return /* @__PURE__ */ 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__ */ 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__ */ jsx(ClipboardButton, { size: "icon-sm", variant: "invisible", text: value }),
     children
   ] });
@@ -15208,7 +15469,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
         ),
@@ -15798,6 +16059,6 @@ var SqlEditor = ({
   );
 };
 
-export { Alert, AnswerSummary, AppShell, AutoSaveTextarea, Avatar, Badge, Breadcrumb, Button, ButtonGroup, ButtonInline, Calendar, Card, Checkbox, Clipboard, ClipboardButton, ClipboardInline, CodeEditor, Collapse, Collapsible, CollapsiblePanel, CollapsibleStepHeader, ColorInput, Combobox, Command, CommandGroup, CommandInput, CommandItem, CommandList, ConflictStatusIndicator, DateInput, DatePicker, DateRangeInput, DateRangePicker, DiffType, DiffView, DotsLoader, DropdownMenu, EmptyConfigurationActionCard, EmptySearchContent, EmptyState, ErrorState, FileUpload, FormGroup, FullScreenModal, FullScreenModalBody, FullScreenModalHeader, HelpBlock, HoverCard, InlineStepDetail, InlineStepLabel, InputGroup, InputOtp, Kbd, Label2 as Label, Link, MarkedText, MergeEditor, MessageBubble, Modal, MultiActionButtonGroup, MultiCombobox, Navbar, NumberInput, PageHeader, PageLayout, PageToolbar, Pagination, PaneHeader, PanelWithDetails, PasswordInput, PlanApproval, PlanRewritingIndicator, Popconfirm, Popover, Progress, PromptInput, Question, QuestionBlock, RadioGroup2 as RadioGroup, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Search, SearchForm, SearchInput, SearchInputWithNavigation, Select, Separator2 as Separator, Sheet, Sidebar, SidebarProvider, Skeleton, SkeletonList, Slider, SplitButton, SqlEditor, Stepper, SuggestedPrompt, Switch, Table, Tabs2 as Tabs, TabsContent, Tagger, TextInput, Textarea, ThemeDecorator, ThemeProvider, ThinkingIndicator, TimeInput, TimePicker, Timeline, Toaster, Toggle, ToggleGroup, Tooltip, TooltipProvider, Truncated, ZoomableSvg, argoVariants, cn, computeDiffRows, computeLineInformation, copyToClipboard, isMac, kbdVariants, keys, mergeRefs, resolveStorybookBrand, setLegacyIconRenderer, setServerFieldErrors, themeToolbarBrands, toast, useAppForm, useAutosizeInput, useInputOtpContext, useMergeDiff, useNotification, useScrollbarPosition, useSidebar, useTheme, withForm };
+export { Alert, AnswerSummary, AppShell, AutoSaveTextarea, Avatar, Badge, Breadcrumb, Button, ButtonGroup, ButtonInline, Calendar, Card, Checkbox, Clipboard, ClipboardButton, ClipboardInline, CodeEditor, Collapse, Collapsible, CollapsiblePanel, CollapsibleStepHeader, ColorInput, Combobox, Command, CommandGroup, CommandInput, CommandItem, CommandList, ConflictStatusIndicator, DateInput, DatePicker, DateRangeInput, DateRangePicker, DiffType, DiffView, DotsLoader, DropdownMenu, EmptyConfigurationActionCard, EmptySearchContent, EmptyState, ErrorState, FileUpload, FormGroup, FullScreenModal, FullScreenModalBody, FullScreenModalHeader, HelpBlock, HoverCard, InlineStepDetail, InlineStepLabel, InputGroup, InputOtp, Kbd, Label2 as Label, Link, MarkedText, MergeEditor, MessageBubble, Modal, MultiActionButtonGroup, MultiCombobox, Navbar, NumberInput, PageHeader, PageLayout, PageToolbar, Pagination, PaneHeader, PanelWithDetails, PasswordInput, PlanApproval, PlanRewritingIndicator, Popconfirm, Popover, Progress, PromptInput, Question, QuestionBlock, RadioGroup2 as RadioGroup, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Search, SearchForm, SearchInput, SearchInputWithNavigation, Select, Separator2 as Separator, Sheet, Sidebar, SidebarProvider, Skeleton, SkeletonList, Slider, SplitButton, SqlEditor, Stepper, SuggestedPrompt, Switch, Table, Tabs2 as Tabs, TabsContent, Tagger, TextInput, Textarea, ThemeDecorator, ThemeProvider, ThinkingIndicator, TimeInput, TimePicker, Timeline, Toaster, Toggle, ToggleGroup, Tooltip, TooltipProvider, Truncated, ZoomableSvg, argoVariants, cn, computeDiffRows, computeLineInformation, copyToClipboard, isMac, kbdVariants, keys, mergeRefs, resolveStorybookBrand, setServerFieldErrors, themeToolbarBrands, toast, useAppForm, useAutosizeInput, useInputOtpContext, useIsLegacyBrand, useMergeDiff, useNotification, useScrollbarPosition, useSidebar, useTheme, withForm };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map