@keboola/design 4.3.2 → 5.0.0

package/dist/markdown-editor.js

@@ -1,7 +1,7 @@
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
+import { keboolaLegacySidebar, keboolaLegacyTopnav } from '@keboola/brand-registry';
 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';
@@ -128,26 +128,58 @@ var init_keyCodes = __esm({
     };
   }
 });
-var ThemeContext;
-var init_themeContext = __esm({
-  "src/components/ThemeProvider/themeContext.ts"() {
-    ThemeContext = createContext(null);
+
+// src/components/ThemeProvider/utils.ts
+var createTheme;
+var init_utils = __esm({
+  "src/components/ThemeProvider/utils.ts"() {
+    createTheme = (brand) => ({
+      id: brand.id,
+      name: brand.name,
+      shell: brand.shell,
+      logo: brand.logo
+    });
   }
 });
-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 DEFAULT_COLOR_SCHEME, DEFAULT_BRAND_ID, defaultBrand, defaultTheme;
+var init_defaults = __esm({
+  "src/components/ThemeProvider/defaults.ts"() {
+    init_utils();
+    [keboolaLegacySidebar.id, keboolaLegacyTopnav.id];
+    DEFAULT_COLOR_SCHEME = "light";
+    DEFAULT_BRAND_ID = "design-system";
+    defaultBrand = {
+      id: DEFAULT_BRAND_ID,
+      name: "Design System",
+      shell: "sidebar",
+      theme: {}
     };
+    defaultTheme = createTheme(defaultBrand);
+  }
+});
+var noop, defaultContext, ArgoDesignContext, useArgoDesign;
+var init_context = __esm({
+  "src/components/ThemeProvider/context.tsx"() {
+    init_defaults();
+    noop = () => void 0;
+    defaultContext = {
+      scheme: DEFAULT_COLOR_SCHEME,
+      resolvedScheme: DEFAULT_COLOR_SCHEME,
+      setScheme: noop,
+      brandId: defaultTheme.id,
+      setBrand: noop,
+      themes: [defaultTheme],
+      currentTheme: defaultTheme
+    };
+    createContext(defaultContext);
+    ArgoDesignContext = createContext(true);
+    useArgoDesign = () => use(ArgoDesignContext);
   }
 });
 var tooltipVariants, TooltipContent;
 var init_TooltipContent = __esm({
   "src/components/Tooltip/TooltipContent.tsx"() {
-    init_useIsLegacyBrand();
+    init_context();
     tooltipVariants = cva(
       [
         "tailwindcss-preflight",
@@ -225,8 +257,7 @@ var init_TooltipContent = __esm({
       placement = "right",
       ...rest
     }) => {
-      const isLegacy = useIsLegacyBrand();
-      const renderArgo = !isLegacy;
+      const renderArgo = useArgoDesign();
       const handlePointerDownOutside = (event) => {
         if (keepOpenOnPointerDownOutside) event.preventDefault();
         onPointerDownOutside?.(event);
@@ -259,7 +290,7 @@ var init_TooltipRoot = __esm({
 var TooltipTrigger;
 var init_TooltipTrigger = __esm({
   "src/components/Tooltip/TooltipTrigger.tsx"() {
-    init_utils();
+    init_utils2();
     TooltipTrigger = ({
       ref,
       children,
@@ -447,7 +478,7 @@ var init_useSHA256 = __esm({
 });
 
 // src/utils/index.ts
-var init_utils = __esm({
+var init_utils2 = __esm({
   "src/utils/index.ts"() {
     init_classNames();
     init_copyToClipboard();
@@ -465,7 +496,7 @@ var init_utils = __esm({
 var HEIGHT_CLASS_NAME, ANIMATION_CLASS_NAME, Skeleton;
 var init_Skeleton = __esm({
   "src/components/Skeleton/Skeleton.tsx"() {
-    init_utils();
+    init_utils2();
     HEIGHT_CLASS_NAME = {
       xxs: "tw-h-3 tw-rounded",
       xs: "tw-h-4 tw-rounded",
@@ -491,7 +522,7 @@ var init_Skeleton = __esm({
       "before:tw-bg-gradient-to-r",
       "before:tw-from-transparent",
       "before:tw-to-transparent",
-      "before:tw-via-neutral-50"
+      "before:tw-via-white/40"
     );
     Skeleton = ({ height = "md", className, count = 1 }) => {
       const prefixId = useId();
@@ -510,7 +541,7 @@ var init_Skeleton = __esm({
 var Keboola;
 var init_Keboola = __esm({
   "src/icons/Keboola.tsx"() {
-    init_utils();
+    init_utils2();
     Keboola = forwardRef(
       ({ size = 24, color = "currentColor", className, children, ...rest }, ref) => /* @__PURE__ */ jsxs(
         "svg",
@@ -565,8 +596,8 @@ var init_styles = __esm({
         "tw-font-medium",
         "tw-tracking-[1px]",
         "tw-uppercase",
-        // border
-        "tw-rounded-[var(--radius-lg,0.25rem)]",
+        // border — legacy (non-argo) chrome uses a fixed radius, not the brand token.
+        "tw-rounded",
         "tw-border",
         "tw-border-transparent",
         // styling
@@ -761,14 +792,14 @@ var init_styles = __esm({
               "hover:tw-text-primary-foreground",
               "focus:tw-text-primary-foreground",
               "focus-visible:tw-border-primary",
-              "focus-visible:tw-ring-primary/50"
+              "focus-visible:tw-ring-ring/50"
             ],
             secondary: [
               "tw-bg-primary/10",
               "tw-text-primary",
               "hover:not-disabled:tw-bg-primary/20",
               "focus-visible:tw-border-primary",
-              "focus-visible:tw-ring-primary/50"
+              "focus-visible:tw-ring-ring/50"
             ],
             // should be called "destructive" by Figma
             danger: [
@@ -785,20 +816,22 @@ var init_styles = __esm({
               // Semantic base text color so the label/icon flips in dark mode
               // (matches `invisible`); previously unset → inherited a fixed dark color.
               "tw-text-foreground",
-              "hover:not-disabled:tw-bg-accent",
-              "hover:not-disabled:tw-text-accent-foreground",
+              // Hover follows the brand primary (translucent tint), matching the
+              // `secondary` variant — not the fixed `accent` blue.
+              "hover:not-disabled:tw-bg-primary/10",
+              "hover:not-disabled:tw-text-primary",
               "hover:active:tw-bg-background",
               "focus-visible:!tw-border-primary",
-              "focus-visible:tw-ring-primary/50"
+              "focus-visible:tw-ring-ring/50"
             ],
             // should be called "ghost" by Figma
             invisible: [
               "tw-bg-transparent",
               "tw-text-foreground",
-              "hover:not-disabled:tw-bg-accent",
-              "hover:not-disabled:tw-text-accent-foreground",
-              "hover:not-disabled:tw-border-accent",
-              "focus-visible:tw-ring-primary/50"
+              "hover:not-disabled:tw-bg-primary/10",
+              "hover:not-disabled:tw-text-primary",
+              "hover:not-disabled:tw-border-primary/10",
+              "focus-visible:tw-ring-ring/50"
             ],
             // should be called "link" by Figma
             inline: [
@@ -806,7 +839,7 @@ var init_styles = __esm({
               "tw-text-primary",
               "hover:tw-underline",
               "hover:active:tw-bg-transparent",
-              "focus-visible:tw-ring-primary/50"
+              "focus-visible:tw-ring-ring/50"
             ]
           },
           size: {
@@ -833,8 +866,8 @@ var Button;
 var init_Button = __esm({
   "src/components/Button/Button.tsx"() {
     init_icons();
-    init_utils();
-    init_useIsLegacyBrand();
+    init_utils2();
+    init_context();
     init_styles();
     Button = ({
       ref,
@@ -850,8 +883,7 @@ var init_Button = __esm({
       block = false,
       ...buttonProps
     }) => {
-      const isLegacy = useIsLegacyBrand();
-      const renderArgo = !isLegacy;
+      const renderArgo = useArgoDesign();
       const Comp = asChild ? Root$2 : "button";
       const isIconOnly = String(size).startsWith("icon");
       const classNames = renderArgo ? argoVariants({ variant, size, block, className }) : variants({ size, variant, block, className });
@@ -936,7 +968,7 @@ var init_Button2 = __esm({
 var Clipboard;
 var init_Clipboard = __esm({
   "src/components/Clipboard/Clipboard.tsx"() {
-    init_utils();
+    init_utils2();
     init_Tooltip2();
     Clipboard = ({
       ref,
@@ -1056,7 +1088,7 @@ var init_ZoomableSvg = __esm({
   "src/components/ZoomableSvg/ZoomableSvg.tsx"() {
     init_ClipboardButton2();
     init_icons();
-    init_utils();
+    init_utils2();
     init_Button2();
     init_Tooltip2();
     MIN_SCALE = 0.5;
@@ -1242,7 +1274,7 @@ var init_MermaidDiagram = __esm({
   "src/blocks/MermaidDiagram/MermaidDiagram.tsx"() {
     init_Skeleton();
     init_ZoomableSvg2();
-    init_utils();
+    init_utils2();
     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;
@@ -1257,9 +1289,9 @@ var init_MermaidDiagram = __esm({
             securityLevel: "strict",
             theme: "base",
             themeVariables: {
-              primaryColor: colors.secondary[100],
+              primaryColor: colors.blue[100],
               primaryTextColor: colors.neutral[800],
-              primaryBorderColor: colors.secondary[700],
+              primaryBorderColor: colors.blue[700],
               secondaryColor: colors.white,
               secondaryTextColor: colors.neutral[800],
               secondaryBorderColor: colors.neutral[150],
@@ -1268,38 +1300,38 @@ var init_MermaidDiagram = __esm({
               tertiaryBorderColor: colors.warning[500],
               lineColor: colors.neutral[300],
               textColor: colors.neutral[800],
-              mainBkg: colors.secondary[100],
-              nodeBorder: colors.secondary[700],
+              mainBkg: colors.blue[100],
+              nodeBorder: colors.blue[700],
               clusterBkg: colors.white,
               clusterBorder: colors.neutral[150],
               titleColor: colors.neutral[800],
               edgeLabelBackground: colors.white,
               nodeTextColor: colors.neutral[800],
-              actorBorder: colors.secondary[700],
-              actorBkg: colors.secondary[100],
+              actorBorder: colors.blue[700],
+              actorBkg: colors.blue[100],
               actorTextColor: colors.neutral[800],
               actorLineColor: colors.neutral[300],
               signalColor: colors.neutral[800],
               signalTextColor: colors.neutral[800],
-              labelBoxBkgColor: colors.secondary[100],
-              labelBoxBorderColor: colors.secondary[700],
+              labelBoxBkgColor: colors.blue[100],
+              labelBoxBorderColor: colors.blue[700],
               labelTextColor: colors.neutral[800],
               loopTextColor: colors.neutral[800],
               noteBorderColor: colors.warning[500],
               noteBkgColor: colors.warning[100],
               noteTextColor: colors.neutral[800],
-              sectionBkgColor: colors.secondary[100],
+              sectionBkgColor: colors.blue[100],
               altSectionBkgColor: colors.white,
               sectionBkgColor2: colors.neutral[100],
-              taskBorderColor: colors.secondary[700],
-              taskBkgColor: colors.secondary[100],
+              taskBorderColor: colors.blue[700],
+              taskBkgColor: colors.blue[100],
               taskTextColor: colors.neutral[800],
               taskTextDarkColor: colors.neutral[800],
               taskTextLightColor: colors.neutral[800],
               activeTaskBorderColor: resolvePrimary(),
-              activeTaskBkgColor: colors.secondary[200],
-              doneTaskBorderColor: colors.primary[600],
-              doneTaskBkgColor: colors.primary[100],
+              activeTaskBkgColor: colors.blue[200],
+              doneTaskBorderColor: colors.green[600],
+              doneTaskBkgColor: colors.green[100],
               critBorderColor: colors.error[500],
               critBkgColor: colors.error[100],
               fontFamily: "Inter, system-ui, sans-serif",
@@ -1445,7 +1477,7 @@ ${code}
 });
 
 // src/components/MarkdownEditor/MarkdownEditor.tsx
-init_utils();
+init_utils2();
 var ImageRendererContext = createContext(null);
 var ImageRendererProvider = ImageRendererContext;
 var useImageRenderer = () => use(ImageRendererContext);
@@ -1614,15 +1646,15 @@ var $isMermaidNode = (node) => {
 };
 
 // src/components/Toast/toast.tsx
-init_utils();
+init_utils2();
 
 // src/components/Toast/ToastRoot.tsx
 init_icons();
-init_utils();
-init_useIsLegacyBrand();
+init_utils2();
+init_context();
 
 // src/components/Toast/ToastAction.tsx
-init_utils();
+init_utils2();
 var ToastAction = ({
   ref,
   className,
@@ -1657,7 +1689,7 @@ var ToastAction = ({
 );
 
 // src/components/Toast/ToastDescription.tsx
-init_utils();
+init_utils2();
 var ToastDescription = ({
   ref,
   className,
@@ -1683,7 +1715,7 @@ var ToastDescription = ({
 
 // src/components/Toast/ToastDismiss.tsx
 init_icons();
-init_utils();
+init_utils2();
 var ToastDismiss = ({
   ref,
   className,
@@ -1717,7 +1749,7 @@ var ToastDismiss = ({
 );
 
 // src/components/Toast/ToastDuration.tsx
-init_utils();
+init_utils2();
 var ToastDuration = ({
   ref,
   duration,
@@ -1754,7 +1786,7 @@ var ToastDuration = ({
 );
 
 // src/components/Toast/ToastTitle.tsx
-init_utils();
+init_utils2();
 var ToastTitle = ({
   ref,
   className,
@@ -1835,8 +1867,7 @@ var ToastRoot = ({
   loading = false,
   icon: iconProp
 }) => {
-  const isLegacy = useIsLegacyBrand();
-  const renderArgo = !isLegacy;
+  const renderArgo = useArgoDesign();
   const icon = (() => {
     if (loading) return /* @__PURE__ */ jsx(icons_exports.Loader2, { className: "tw-animate-spin" });
     if (iconProp) return iconProp;
@@ -1917,8 +1948,8 @@ var toast = ({
     toasterId,
     dismissible,
     duration,
-    // override defult focus-visible styles to match our design
-    className: cn("tw-rounded-lg", "focus-visible:!tw-ring-4", "focus-visible:!tw-ring-primary/50")
+    // override default focus-visible styles to match our design
+    className: cn("tw-rounded-lg", "focus-visible:!tw-ring-4", "focus-visible:!tw-ring-ring/50")
   });
 };
 toast.success = (title, options) => toast({
@@ -2275,14 +2306,14 @@ init_icons();
 
 // src/components/MarkdownEditor/plugins/toolbar/AlignmentDropdown.tsx
 init_icons();
-init_utils();
+init_utils2();
 
 // src/components/DropdownMenu/DropdownMenu.tsx
-init_useIsLegacyBrand();
+init_context();
 
 // src/components/DropdownMenu/DropdownMenuCheckboxItem.tsx
 init_icons();
-init_utils();
+init_utils2();
 
 // src/components/DropdownMenu/DropdownMenuItemIndicator.tsx
 init_icons();
@@ -2308,28 +2339,30 @@ var variants3 = cva(
           "tw-border-solid",
           "tw-border-border",
           "tw-rounded-full",
-          "tw-bg-white",
+          "group-data-[variant=default]/dropdown-menu-content:tw-bg-white",
+          "group-data-[variant=argo]/dropdown-menu-content:tw-bg-background",
           '[&_svg:not([class*="tw-size-"])]:tw-size-2',
           "[&_svg]:data-[state=unchecked]:tw-hidden",
           // Lucide Circle is stroke-only — force fill to match the stroke
           // (currentColor) so the indicator reads as a solid dot.
           "[&_svg]:tw-fill-current",
           "group-data-[variant=argo]/dropdown-menu-content:[&_svg]:tw-text-primary",
-          "group-data-[variant=default]/dropdown-menu-content:[&_svg]:tw-text-secondary-500"
+          "group-data-[variant=default]/dropdown-menu-content:[&_svg]:tw-text-primary"
         ],
         check: ['[&_svg:not([class*="tw-size-"])]:tw-size-3.5', "[&_svg]:tw-text-primary"],
         checkbox: [
-          "[&_svg]:tw-text-white",
+          "[&_svg]:tw-text-primary-foreground",
           "tw-border",
           "tw-border-solid",
-          "tw-border-neutral-200",
           "tw-rounded",
+          "group-data-[variant=default]/dropdown-menu-content:tw-border-neutral-200",
+          "group-data-[variant=argo]/dropdown-menu-content:tw-border-input",
           '[&_svg:not([class*="tw-size-"])]:tw-size-3',
           "[&_svg]:data-[state=unchecked]:tw-hidden",
           "group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:tw-border-primary",
           "group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:tw-bg-primary",
-          "group-data-[variant=default]/dropdown-menu-content:data-[state=checked]:tw-border-secondary-500",
-          "group-data-[variant=default]/dropdown-menu-content:data-[state=checked]:tw-bg-secondary-500"
+          "group-data-[variant=default]/dropdown-menu-content:data-[state=checked]:tw-border-primary",
+          "group-data-[variant=default]/dropdown-menu-content:data-[state=checked]:tw-bg-primary"
         ],
         switch: [
           "tw-size-5",
@@ -2338,7 +2371,7 @@ var variants3 = cva(
           '[&_svg:not([class*="tw-size-"])]:tw-size-5',
           "tw-text-neutral-400",
           "data-[state=unchecked]:tw-rotate-180",
-          "group-data-[variant=default]/dropdown-menu-content:data-[state=checked]:tw-text-secondary-500",
+          "group-data-[variant=default]/dropdown-menu-content:data-[state=checked]:tw-text-primary",
           "group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:tw-text-primary"
         ]
       }
@@ -2373,7 +2406,7 @@ var DropdownMenuItemIndicator = ({
 };
 
 // src/components/DropdownMenu/ItemIcon.tsx
-init_utils();
+init_utils2();
 var ItemIcon = ({ className, children, ...props }) => /* @__PURE__ */ jsx(
   "span",
   {
@@ -2390,7 +2423,7 @@ var ItemIcon = ({ className, children, ...props }) => /* @__PURE__ */ jsx(
       "group-data-[variant=default]/dropdown-menu-content:tw-text-neutral-400",
       "group-data-[variant=argo]/dropdown-menu-content:tw-text-primary",
       "group-data-[variant=argo]/dropdown-menu-content:group-aria-disabled:tw-text-muted-foreground",
-      "group-data-[variant=default]/dropdown-menu-content:group-hover:tw-text-secondary-500",
+      "group-data-[variant=default]/dropdown-menu-content:group-hover:tw-text-primary",
       className
     ),
     children
@@ -2398,7 +2431,7 @@ var ItemIcon = ({ className, children, ...props }) => /* @__PURE__ */ jsx(
 );
 
 // src/components/DropdownMenu/styles.ts
-init_utils();
+init_utils2();
 var itemVariants = cn(
   // reset
   "tailwindcss-preflight",
@@ -2429,15 +2462,16 @@ var itemVariants = cn(
   "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-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"
+  "group-data-[variant=argo]/dropdown-menu-content:focus:tw-text-primary",
+  "group-data-[variant=argo]/dropdown-menu-content:focus:tw-bg-primary/10",
+  "group-data-[variant=argo]/dropdown-menu-content:hover:tw-text-primary",
+  "group-data-[variant=argo]/dropdown-menu-content:hover:tw-bg-primary/10"
 );
 var contentVariants = cn(
   "tailwindcss-preflight",
   "tw-group/dropdown-menu-content",
-  "tw-z-[1040]",
+  // Sit above Modal/Sheet (z-1051), matching the other floating overlays (Popover/Select z-1055)
+  "tw-z-[1055]",
   // positioning
   "tw-flex",
   "tw-flex-col",
@@ -2504,13 +2538,13 @@ var DropdownMenuCheckboxItem = ({
 };
 
 // src/components/DropdownMenu/DropdownMenuContent.tsx
-init_utils();
+init_utils2();
 
 // src/components/ScrollArea/ScrollArea.tsx
-init_utils();
+init_utils2();
 
 // src/components/ScrollArea/ScrollBar.tsx
-init_utils();
+init_utils2();
 var ScrollBar = ({ className, orientation = "vertical", ...props }) => /* @__PURE__ */ jsx(
   ScrollAreaPrimitive2.ScrollAreaScrollbar,
   {
@@ -2615,7 +2649,7 @@ var DropdownMenuContent = ({
 
 // src/components/DropdownMenu/DropdownMenuItem.tsx
 init_icons();
-init_utils();
+init_utils2();
 var DropdownMenuItem = ({
   ref,
   className,
@@ -2663,7 +2697,7 @@ var DropdownMenuItem = ({
 };
 
 // src/components/DropdownMenu/DropdownMenuItemDescription.tsx
-init_utils();
+init_utils2();
 var descriptionVariants = cva(
   [
     "tw-box-border",
@@ -2694,7 +2728,7 @@ var DropdownMenuItemDescription = ({
 };
 
 // src/components/DropdownMenu/DropdownMenuLabel.tsx
-init_utils();
+init_utils2();
 var DropdownMenuLabel = ({ className, ...props }) => {
   return /* @__PURE__ */ jsx(
     DropdownMenuPrimitive3.Label,
@@ -2732,7 +2766,7 @@ var DropdownMenuRadioGroup = ({
 
 // src/components/DropdownMenu/DropdownMenuRadioGroup/DropdownMenuRadioItem.tsx
 init_icons();
-init_utils();
+init_utils2();
 var DropdownMenuRadioItem = ({
   className,
   children,
@@ -2779,7 +2813,7 @@ var DropdownMenuRadioItem = ({
 };
 
 // src/components/DropdownMenu/DropdownMenuSeparator.tsx
-init_utils();
+init_utils2();
 var DropdownMenuSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive3.Separator,
   {
@@ -2807,7 +2841,7 @@ var DropdownMenuSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx(
 var DropdownMenuSub = DropdownMenuPrimitive3.Sub;
 
 // src/components/DropdownMenu/DropdownMenuSub/DropdownMenuSubContent.tsx
-init_utils();
+init_utils2();
 var DropdownMenuSubContent = ({ className, ...props }) => {
   const { variant } = useDropdownMenuContext();
   return /* @__PURE__ */ jsx(DropdownMenuPrimitive3.Portal, { children: /* @__PURE__ */ jsx(
@@ -2822,7 +2856,7 @@ var DropdownMenuSubContent = ({ className, ...props }) => {
 
 // src/components/DropdownMenu/DropdownMenuSub/DropdownMenuSubTrigger.tsx
 init_icons();
-init_utils();
+init_utils2();
 var DropdownMenuSubTrigger = ({ className, children, ...props }) => {
   return /* @__PURE__ */ jsxs(DropdownMenuPrimitive3.SubTrigger, { className: cn(itemVariants, className), ...props, children: [
     children,
@@ -2831,7 +2865,7 @@ var DropdownMenuSubTrigger = ({ className, children, ...props }) => {
 };
 
 // src/components/DropdownMenu/DropdownMenuTrigger.tsx
-init_utils();
+init_utils2();
 var DropdownMenuTrigger = ({
   ref,
   className,
@@ -2850,8 +2884,7 @@ var DropdownMenu = ({
   modal = false,
   ...props
 }) => {
-  const isLegacy = useIsLegacyBrand();
-  const effectiveVariant = !isLegacy ? "argo" : "default";
+  const effectiveVariant = useArgoDesign() ? "argo" : "default";
   const contextValue = useMemo(() => ({ variant: effectiveVariant }), [effectiveVariant]);
   return /* @__PURE__ */ jsx(DropdownMenuContext, { value: contextValue, children: /* @__PURE__ */ jsx(Root$1, { ...props, modal }) });
 };
@@ -2937,7 +2970,7 @@ var AlignmentDropdown = ({
 
 // src/components/MarkdownEditor/plugins/toolbar/BlockTypeDropdown.tsx
 init_icons();
-init_utils();
+init_utils2();
 init_Tooltip2();
 var BLOCK_TYPE_META = {
   paragraph: { label: "Normal", icon: icons_exports.Type, selectable: true },
@@ -3092,7 +3125,7 @@ var ButtonGroup = ({
 };
 
 // src/components/FormGroup/FormGroup.tsx
-init_utils();
+init_utils2();
 var FormGroupContext = createContext({
   state: "default"
 });
@@ -3100,11 +3133,11 @@ var FormGroupProvider = FormGroupContext;
 var useFormGroupContext = () => use(FormGroupContext);
 
 // src/components/InputGroup/InputGroup.tsx
-init_utils();
-init_useIsLegacyBrand();
+init_utils2();
+init_context();
 
 // src/components/InputGroup/InputGroupAddon.tsx
-init_utils();
+init_utils2();
 var addonVariants = cva(
   [
     "tw-flex",
@@ -3149,7 +3182,7 @@ var InputGroupAddon = ({
 }) => /* @__PURE__ */ jsx("div", { ...props, "data-align": align, className: cn(addonVariants({ align, className })), children });
 
 // src/components/InputGroup/InputGroupButton.tsx
-init_utils();
+init_utils2();
 init_Button2();
 var InputGroupButton = ({
   ref,
@@ -3169,7 +3202,7 @@ var InputGroupButton = ({
 );
 
 // src/components/InputGroup/InputGroupInput.tsx
-init_utils();
+init_utils2();
 var InputGroupInput = ({
   ref,
   className,
@@ -3197,7 +3230,7 @@ var InputGroupInput = ({
 );
 
 // src/components/InputGroup/InputGroupText.tsx
-init_utils();
+init_utils2();
 var InputGroupText = ({ className, ...props }) => /* @__PURE__ */ jsx(
   "span",
   {
@@ -3216,7 +3249,7 @@ var InputGroupText = ({ className, ...props }) => /* @__PURE__ */ jsx(
 );
 
 // src/components/InputGroup/InputGroupTextArea.tsx
-init_utils();
+init_utils2();
 var InputGroupTextArea = ({
   ref,
   className,
@@ -3280,8 +3313,9 @@ var inputGroupVariants = cva(
     // positioning
     "tw-flex",
     "tw-items-center",
-    // base
-    "tw-rounded-[var(--radius-lg,0.25rem)]",
+    // base — legacy (non-argo) chrome uses a fixed radius; argo overrides it with
+    // the brand radius token in the `argo` variant below.
+    "tw-rounded",
     "tw-border",
     "tw-border-solid",
     "tw-border-neutral-200",
@@ -3355,7 +3389,7 @@ var inputGroupVariants = cva(
         state: "default",
         className: [
           "has-[:is(input,textarea):focus]:tw-border-primary",
-          "has-[:is(input,textarea):focus]:tw-ring-primary/50"
+          "has-[:is(input,textarea):focus]:tw-ring-ring/50"
         ]
       },
       {
@@ -3370,7 +3404,7 @@ var inputGroupVariants = cva(
       {
         variant: "argo",
         focusVariant: "on",
-        className: ["!tw-border-primary", "!tw-ring-primary/50"]
+        className: ["!tw-border-primary", "!tw-ring-ring/50"]
       },
       {
         variant: "argo",
@@ -3399,6 +3433,8 @@ var inputGroupVariants = cva(
           "has-[:is(input,textarea):disabled]:tw-opacity-40"
         ],
         argo: [
+          // argo follows the brand radius token (overrides the static base)
+          "tw-rounded-[var(--radius-lg,0.25rem)]",
           // muted filled input surface — gray, distinct from white containers; not the app-background token
           "tw-bg-muted",
           "tw-border-input",
@@ -3454,8 +3490,8 @@ var InputGroupRoot = ({
   className,
   ...props
 }) => {
-  const isLegacy = useIsLegacyBrand();
-  const effectiveVariant = !isLegacy ? "argo" : variant;
+  const isArgo = useArgoDesign();
+  const effectiveVariant = isArgo ? "argo" : variant;
   const effectiveSizing = effectiveVariant === "argo" ? "medium" : sizing;
   return /* @__PURE__ */ jsx(
     "div",
@@ -3484,7 +3520,7 @@ InputGroup.Text = InputGroupText;
 
 // src/blocks/ColorInput/ColorInput.tsx
 init_icons();
-init_utils();
+init_utils2();
 init_icons();
 
 // src/blocks/ColorInput/utils.ts
@@ -3701,7 +3737,7 @@ var helpVariants = cva(["tw-m-0", "tw-text-xs"], {
     state: {
       default: ["tw-text-muted-foreground"],
       error: ["tw-text-destructive"],
-      warning: ["tw-text-warning-500"]
+      warning: ["tw-text-warning"]
     }
   }
 });
@@ -3803,10 +3839,10 @@ var FormGroupTextarea = (props) => {
 
 // src/components/Input/Input.tsx
 init_icons();
-init_utils();
+init_utils2();
 
 // src/components/Input/utils.ts
-init_utils();
+init_utils2();
 var genInputTestId = (prefix = "") => {
   const ps = createPrefixedString(prefix);
   return {
@@ -3976,7 +4012,7 @@ FormGroup.ColorInput = FormGroupColorInput;
 FormGroup.Textarea = FormGroupTextarea;
 
 // src/components/Label/Label.tsx
-init_utils();
+init_utils2();
 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(
@@ -3996,7 +4032,7 @@ var Label2 = ({ className, children, id, htmlFor, ...rest }) => {
 Label2.Optional = Optional;
 
 // src/components/MarkdownEditor/plugins/toolbar/ToolbarButton.tsx
-init_utils();
+init_utils2();
 init_Tooltip2();
 var ToolbarButton = ({
   active,
@@ -4491,7 +4527,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-muted focus-within:tw-ring-2 focus-within:tw-ring-primary/40"
+              editable && "tw-cursor-text hover:tw-bg-muted focus-within:tw-ring-2 focus-within:tw-ring-ring/40"
             ),
             children: /* @__PURE__ */ jsx(
               RichTextPlugin,