@keboola/design 3.0.0 → 3.1.0

package/dist/markdown-editor.js

@@ -1,11 +1,13 @@
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
+import { createContext, lazy, Suspense, use, useId, useState, useRef, useEffect, forwardRef, useCallback, useMemo } from 'react';
+import { keboolaLegacy } from '@keboola/brand-registry';
 import { Portal, Content, Root, Trigger } from '@radix-ui/react-tooltip';
 import { cva } from 'class-variance-authority';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { createContext, lazy, Suspense, use, useId, useState, useRef, useEffect, forwardRef, useCallback, useMemo } from 'react';
 import * as lucide_react_star from 'lucide-react';
 import { Root as Root$2, Slottable } from '@radix-ui/react-slot';
+import DOMPurify from 'dompurify';
 import { renderMermaidSVG } from 'beautiful-mermaid';
 import colors from '@keboola/tailwind-config/colors';
 import { CodeNode, $isCodeNode, $createCodeNode } from '@lexical/code';
@@ -126,20 +128,62 @@ var init_keyCodes = __esm({
     };
   }
 });
+var ThemeContext;
+var init_themeContext = __esm({
+  "src/components/ThemeProvider/themeContext.ts"() {
+    ThemeContext = createContext(null);
+  }
+});
+var useIsLegacyBrand;
+var init_useIsLegacyBrand = __esm({
+  "src/components/internal/useIsLegacyBrand.ts"() {
+    init_themeContext();
+    useIsLegacyBrand = () => {
+      const context = use(ThemeContext);
+      return context === null || context.brand.id === keboolaLegacy.id;
+    };
+  }
+});
 var tooltipVariants, TooltipContent;
 var init_TooltipContent = __esm({
   "src/components/Tooltip/TooltipContent.tsx"() {
+    init_useIsLegacyBrand();
     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: {
@@ -172,6 +216,7 @@ var init_TooltipContent = __esm({
     TooltipContent = ({
       className,
       variant,
+      argo,
       keepOpenOnPointerDownOutside = false,
       children,
       onPointerDownOutside,
@@ -181,6 +226,8 @@ var init_TooltipContent = __esm({
       placement = "right",
       ...rest
     }) => {
+      const isLegacy = useIsLegacyBrand();
+      const renderArgo = !isLegacy || argo === true;
       const handlePointerDownOutside = (event) => {
         if (keepOpenOnPointerDownOutside) event.preventDefault();
         onPointerDownOutside?.(event);
@@ -189,7 +236,8 @@ var init_TooltipContent = __esm({
         Content,
         {
           ...rest,
-          "data-tooltip-content": true,
+          "data-tooltip-content": renderArgo ? void 0 : true,
+          "data-argo": renderArgo,
           sideOffset,
           collisionPadding,
           onPointerDownOutside: handlePointerDownOutside,
@@ -268,6 +316,7 @@ var init_Tooltip = __esm({
       className,
       keepOpenOnTriggerClick = false,
       variant,
+      argo,
       placement = "right",
       forceHide = false,
       forceShow = false,
@@ -306,6 +355,7 @@ var init_Tooltip = __esm({
               {
                 className,
                 variant: resolvedVariant,
+                argo,
                 placement,
                 keepOpenOnPointerDownOutside: keepOpenOnTriggerClick,
                 children: tooltip
@@ -394,28 +444,6 @@ var init_isMac = __esm({
     getIsMac();
   }
 });
-
-// src/utils/legacyIcon.tsx
-var isFAIconValue, registeredRenderer, warnedOnce, renderLegacyIcon;
-var init_legacyIcon = __esm({
-  "src/utils/legacyIcon.tsx"() {
-    isFAIconValue = (value) => typeof value === "string" || Array.isArray(value) && value.length === 2 && typeof value[0] === "string" && typeof value[1] === "string";
-    registeredRenderer = null;
-    warnedOnce = false;
-    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 init_useSHA256 = __esm({
   "src/utils/useSHA256.ts"() {
   }
@@ -455,7 +483,7 @@ var init_Skeleton = __esm({
       "tw-relative",
       "tw-overflow-hidden",
       "tw-pointer-events-none",
-      "tw-bg-neutral-150",
+      "tw-bg-muted",
       // before
       'before:tw-content-[""]',
       "before:tw-opacity-100",
@@ -710,6 +738,8 @@ var init_styles = __esm({
         "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",
@@ -804,6 +834,7 @@ var init_Button = __esm({
   "src/components/Button/Button.tsx"() {
     init_icons();
     init_utils();
+    init_useIsLegacyBrand();
     init_styles();
     Button = ({
       ref,
@@ -820,14 +851,11 @@ var init_Button = __esm({
       block = false,
       ...buttonProps
     }) => {
+      const isLegacy = useIsLegacyBrand();
+      const renderArgo = !isLegacy || argo;
       const Comp = asChild ? Root$2 : "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) {
@@ -882,11 +910,7 @@ var init_ButtonInline = __esm({
         },
         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"],
@@ -1040,6 +1064,10 @@ var init_ZoomableSvg = __esm({
     MAX_SCALE = 3;
     ZOOM_STEP = 0.1;
     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 });
@@ -1135,7 +1163,7 @@ var init_ZoomableSvg = __esm({
                       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 }
                   }
                 )
               }
@@ -1188,7 +1216,7 @@ var init_ZoomableSvg = __esm({
           "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: stopPropagation,
             children: diagramContent
           }
@@ -1198,7 +1226,7 @@ var init_ZoomableSvg = __esm({
         "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
@@ -1220,12 +1248,17 @@ var MermaidDiagram_exports = {};
 __export(MermaidDiagram_exports, {
   MermaidDiagram: () => MermaidDiagram
 });
-var mermaidPromise, getMermaid, stripFontImports, tryFastRender, makeResponsive, RENDER_DEBOUNCE_MS, svgCache, MermaidDiagram;
+var PRIMARY_FALLBACK_CHANNELS, resolvePrimary, mermaidPromise, getMermaid, stripFontImports, tryFastRender, makeResponsive, RENDER_DEBOUNCE_MS, svgCache, resolveSyncSvg, MermaidDiagram;
 var init_MermaidDiagram = __esm({
   "src/blocks/MermaidDiagram/MermaidDiagram.tsx"() {
     init_Skeleton();
     init_ZoomableSvg2();
     init_utils();
+    PRIMARY_FALLBACK_CHANNELS = "31 143 255";
+    resolvePrimary = () => {
+      const channels = typeof document === "undefined" ? PRIMARY_FALLBACK_CHANNELS : getComputedStyle(document.documentElement).getPropertyValue("--color-primary").trim() || PRIMARY_FALLBACK_CHANNELS;
+      return `rgb(${channels})`;
+    };
     mermaidPromise = null;
     getMermaid = () => {
       if (!mermaidPromise) {
@@ -1274,7 +1307,7 @@ var init_MermaidDiagram = __esm({
               taskTextColor: colors.neutral[800],
               taskTextDarkColor: colors.neutral[800],
               taskTextLightColor: colors.neutral[800],
-              activeTaskBorderColor: colors.primary.DEFAULT,
+              activeTaskBorderColor: resolvePrimary(),
               activeTaskBkgColor: colors.secondary[200],
               doneTaskBorderColor: colors.primary[600],
               doneTaskBkgColor: colors.primary[100],
@@ -1326,46 +1359,28 @@ var init_MermaidDiagram = __esm({
     };
     RENDER_DEBOUNCE_MS = 300;
     svgCache = /* @__PURE__ */ new Map();
+    resolveSyncSvg = (code) => {
+      const cached = svgCache.get(code);
+      if (cached) return cached;
+      const fast = tryFastRender(code);
+      if (fast) svgCache.set(code, fast);
+      return fast;
+    };
     MermaidDiagram = ({ code }) => {
       const id = useId();
-      const [svg, setSvg] = useState(() => {
-        const cached = svgCache.get(code);
-        if (cached) return cached;
-        const fast = tryFastRender(code);
-        if (fast) {
-          svgCache.set(code, fast);
-          return fast;
-        }
-        return null;
-      });
+      const [svg, setSvg] = useState(() => resolveSyncSvg(code));
       const [renderFailed, setRenderFailed] = useState(false);
       const debounceRef = useRef(null);
       const renderIdRef = useRef(0);
       const [prevCode, setPrevCode] = useState(code);
       if (code !== prevCode) {
         setPrevCode(code);
-        const cached = svgCache.get(code);
-        const fast = cached ?? tryFastRender(code);
-        if (fast && !cached) svgCache.set(code, fast);
-        setSvg(fast);
+        setSvg(resolveSyncSvg(code));
         setRenderFailed(false);
       }
       useEffect(() => {
-        if (svgCache.has(code)) {
-          setSvg(svgCache.get(code));
-          setRenderFailed(false);
-          return;
-        }
-        const fastResult = tryFastRender(code);
-        if (fastResult) {
-          svgCache.set(code, fastResult);
-          setSvg(fastResult);
-          setRenderFailed(false);
-          return;
-        }
-        setSvg(null);
+        if (svgCache.has(code)) return;
         const currentRenderId = ++renderIdRef.current;
-        setRenderFailed(false);
         if (debounceRef.current) {
           clearTimeout(debounceRef.current);
         }
@@ -1615,7 +1630,7 @@ init_utils();
 // src/components/Toast/ToastRoot.tsx
 init_icons();
 init_utils();
-init_legacyIcon();
+init_useIsLegacyBrand();
 
 // src/components/Toast/ToastAction.tsx
 init_utils();
@@ -1700,6 +1715,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",
@@ -1727,6 +1743,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
@@ -1767,6 +1784,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
@@ -1826,11 +1844,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];
   })();
@@ -1838,35 +1859,44 @@ var ToastRoot = ({
     toast$1.dismiss(id);
     action?.onClick(event);
   };
-  return /* @__PURE__ */ jsxs("div", { "data-variant": variant, className: cn(variants2({ 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(
+        variants2({ 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,
@@ -2257,6 +2287,9 @@ init_icons();
 init_icons();
 init_utils();
 
+// src/components/DropdownMenu/DropdownMenu.tsx
+init_useIsLegacyBrand();
+
 // src/components/DropdownMenu/DropdownMenuCheckboxItem.tsx
 init_icons();
 init_utils();
@@ -2405,17 +2438,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",
@@ -2426,8 +2458,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",
@@ -2487,7 +2527,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"
@@ -2502,8 +2541,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"
         )
       }
     )
@@ -2587,7 +2626,6 @@ var DropdownMenuContent = ({
 // src/components/DropdownMenu/DropdownMenuItem.tsx
 init_icons();
 init_utils();
-init_legacyIcon();
 var DropdownMenuItem = ({
   ref,
   className,
@@ -2603,7 +2641,7 @@ var DropdownMenuItem = ({
   ...props
 }) => {
   const Comp = asChild ? Root$2 : "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);
@@ -2705,7 +2743,6 @@ var DropdownMenuRadioGroup = ({
 // src/components/DropdownMenu/DropdownMenuRadioGroup/DropdownMenuRadioItem.tsx
 init_icons();
 init_utils();
-init_legacyIcon();
 var DropdownMenuRadioItem = ({
   className,
   children,
@@ -2740,7 +2777,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
       ]
@@ -2818,10 +2855,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$1, { ...props, modal }) });
 };
 DropdownMenu.Trigger = DropdownMenuTrigger;
@@ -3070,6 +3109,7 @@ var useFormGroupContext = () => use(FormGroupContext);
 
 // src/components/InputGroup/InputGroup.tsx
 init_utils();
+init_useIsLegacyBrand();
 
 // src/components/InputGroup/InputGroupAddon.tsx
 init_utils();
@@ -3368,7 +3408,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",
@@ -3422,15 +3463,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;
@@ -3655,8 +3709,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"]
     }
   }
@@ -3735,7 +3789,7 @@ var Textarea = ({
   containerClassName,
   // group props
   state = "default",
-  variant = "primary",
+  variant,
   sizing,
   focusVariant,
   ...rest
@@ -3867,7 +3921,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
             }
@@ -3886,6 +3940,7 @@ var TextInput = ({
   value,
   defaultValue,
   type = "text",
+  variant,
   onValueChange,
   onChange,
   onValueBlur,
@@ -3908,6 +3963,7 @@ var TextInput = ({
       onChange: handleChange,
       onBlur: handleBlur,
       type,
+      variant,
       value: sanitizeTextInputValue(value),
       defaultValue: sanitizeTextInputValue(defaultValue)
     }
@@ -3931,7 +3987,7 @@ FormGroup.Textarea = FormGroupTextarea;
 
 // src/components/Label/Label.tsx
 init_utils();
-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,
@@ -3940,7 +3996,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
@@ -4331,25 +4387,25 @@ var ToolbarPlugin = () => {
 
 // src/components/MarkdownEditor/theme.ts
 var editorTheme = {
-  link: "tw-cursor-pointer !tw-text-secondary-500 tw-underline",
+  link: "tw-cursor-pointer !tw-text-primary tw-underline",
   text: {
     bold: "tw-font-bold",
     italic: "tw-italic",
     strikethrough: "tw-line-through",
     underline: "tw-underline",
-    code: "tw-rounded tw-bg-neutral-100 tw-px-1 tw-py-0.5 tw-font-mono tw-text-[0.85em]"
+    code: "tw-rounded tw-bg-muted tw-px-1 tw-py-0.5 tw-font-mono tw-text-[0.85em]"
   },
   list: {
     ol: "!tw-list-decimal",
     ul: "!tw-list-disc",
     checklist: "!tw-list-none !tw-pl-0",
     listitemChecked: [
-      "tw-relative !tw-pl-6 tw-list-none tw-outline-none tw-line-through tw-text-neutral-400",
+      "tw-relative !tw-pl-6 tw-list-none tw-outline-none tw-line-through tw-text-muted-foreground",
       'before:tw-content-[""] before:tw-absolute before:tw-left-0 before:tw-top-[3px]',
       "before:tw-size-4 before:tw-rounded before:tw-border before:tw-border-solid",
-      "before:tw-bg-secondary-500 before:tw-border-secondary-500 before:tw-cursor-pointer",
+      "before:tw-bg-primary before:tw-border-primary before:tw-cursor-pointer",
       'after:tw-content-[""] after:tw-absolute after:tw-left-[5.5px] after:tw-top-[5.5px]',
-      "after:tw-w-1 after:tw-h-2 after:tw-border-white after:tw-border-solid",
+      "after:tw-w-1 after:tw-h-2 after:tw-border-primary-foreground after:tw-border-solid",
       "after:tw-border-r-[1.5px] after:tw-border-b-[1.5px] after:tw-border-t-0 after:tw-border-l-0",
       "after:tw-rotate-45"
     ].join(" "),
@@ -4357,7 +4413,7 @@ var editorTheme = {
       "tw-relative !tw-pl-6 tw-list-none tw-outline-none",
       'before:tw-content-[""] before:tw-absolute before:tw-left-0 before:tw-top-[3px]',
       "before:tw-size-4 before:tw-rounded before:tw-border before:tw-border-solid",
-      "before:tw-border-neutral-200 before:tw-bg-white before:tw-cursor-pointer"
+      "before:tw-border-input before:tw-bg-background before:tw-cursor-pointer"
     ].join(" ")
   }
 };
@@ -4445,7 +4501,7 @@ var MarkdownEditor = ({
               // but a matching negative margin shifts the wrapper outward so the text itself stays
               // aligned with the parent's content edge (i.e. with where static text would render).
               compact ? "tw-px-1.5 tw-py-0.5 -tw-mx-1.5 -tw-my-0.5" : "tw-p-2",
-              editable && "tw-cursor-text hover:tw-bg-neutral-50 focus-within:tw-ring-2 focus-within:tw-ring-secondary-500/40"
+              editable && "tw-cursor-text hover:tw-bg-muted focus-within:tw-ring-2 focus-within:tw-ring-primary/40"
             ),
             children: /* @__PURE__ */ jsx(
               RichTextPlugin,
@@ -4460,7 +4516,7 @@ var MarkdownEditor = ({
                       "div",
                       {
                         className: cn(
-                          "tw-pointer-events-none tw-absolute tw-select-none tw-text-neutral-400",
+                          "tw-pointer-events-none tw-absolute tw-select-none tw-text-muted-foreground",
                           compact ? "tw-left-1.5 tw-top-0.5" : "tw-left-2 tw-top-[calc(0.5rem+0.35em)]"
                         ),
                         children: placeholder