@keboola/design 4.4.0 → 5.1.0

package/dist/markdown-editor.cjs

@@ -2,8 +2,8 @@
 
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var react = require('react');
 var brandRegistry = require('@keboola/brand-registry');
+var react = require('react');
 var reactTooltip = require('@radix-ui/react-tooltip');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
@@ -157,26 +157,58 @@ var init_keyCodes = __esm({
     };
   }
 });
-var ThemeContext;
-var init_themeContext = __esm({
-  "src/components/ThemeProvider/themeContext.ts"() {
-    ThemeContext = react.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 DEFAULT_COLOR_SCHEME, DEFAULT_BRAND_ID, defaultBrand, defaultTheme;
+var init_defaults = __esm({
+  "src/components/ThemeProvider/defaults.ts"() {
+    init_utils();
+    [brandRegistry.keboolaLegacySidebar.id, brandRegistry.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 useIsLegacyBrand;
-var init_useIsLegacyBrand = __esm({
-  "src/components/internal/useIsLegacyBrand.ts"() {
-    init_themeContext();
-    useIsLegacyBrand = () => {
-      const context = react.use(ThemeContext);
-      return context === null || context.brand.id === brandRegistry.keboolaLegacy.id;
+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
     };
+    react.createContext(defaultContext);
+    ArgoDesignContext = react.createContext(true);
+    useArgoDesign = () => react.use(ArgoDesignContext);
   }
 });
 var tooltipVariants, TooltipContent;
 var init_TooltipContent = __esm({
   "src/components/Tooltip/TooltipContent.tsx"() {
-    init_useIsLegacyBrand();
+    init_context();
     tooltipVariants = classVarianceAuthority.cva(
       [
         "tailwindcss-preflight",
@@ -254,8 +286,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);
@@ -288,7 +319,7 @@ var init_TooltipRoot = __esm({
 var TooltipTrigger;
 var init_TooltipTrigger = __esm({
   "src/components/Tooltip/TooltipTrigger.tsx"() {
-    init_utils();
+    init_utils2();
     TooltipTrigger = ({
       ref,
       children,
@@ -476,7 +507,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();
@@ -494,7 +525,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",
@@ -509,7 +540,7 @@ var init_Skeleton = __esm({
       "tw-relative",
       "tw-overflow-hidden",
       "tw-pointer-events-none",
-      "tw-bg-muted",
+      "tw-bg-skeleton",
       // before
       'before:tw-content-[""]',
       "before:tw-opacity-100",
@@ -520,7 +551,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 = react.useId();
@@ -539,7 +570,7 @@ var init_Skeleton = __esm({
 var Keboola;
 var init_Keboola = __esm({
   "src/icons/Keboola.tsx"() {
-    init_utils();
+    init_utils2();
     Keboola = react.forwardRef(
       ({ size = 24, color = "currentColor", className, children, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
         "svg",
@@ -594,8 +625,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
@@ -790,14 +821,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: [
@@ -814,20 +845,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: [
@@ -835,7 +868,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: {
@@ -862,8 +895,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,
@@ -879,8 +912,7 @@ var init_Button = __esm({
       block = false,
       ...buttonProps
     }) => {
-      const isLegacy = useIsLegacyBrand();
-      const renderArgo = !isLegacy;
+      const renderArgo = useArgoDesign();
       const Comp = asChild ? reactSlot.Root : "button";
       const isIconOnly = String(size).startsWith("icon");
       const classNames = renderArgo ? argoVariants({ variant, size, block, className }) : variants({ size, variant, block, className });
@@ -965,7 +997,7 @@ var init_Button2 = __esm({
 var Clipboard;
 var init_Clipboard = __esm({
   "src/components/Clipboard/Clipboard.tsx"() {
-    init_utils();
+    init_utils2();
     init_Tooltip2();
     Clipboard = ({
       ref,
@@ -1085,7 +1117,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;
@@ -1271,7 +1303,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;
@@ -1286,9 +1318,9 @@ var init_MermaidDiagram = __esm({
             securityLevel: "strict",
             theme: "base",
             themeVariables: {
-              primaryColor: colors__default.default.secondary[100],
+              primaryColor: colors__default.default.blue[100],
               primaryTextColor: colors__default.default.neutral[800],
-              primaryBorderColor: colors__default.default.secondary[700],
+              primaryBorderColor: colors__default.default.blue[700],
               secondaryColor: colors__default.default.white,
               secondaryTextColor: colors__default.default.neutral[800],
               secondaryBorderColor: colors__default.default.neutral[150],
@@ -1297,38 +1329,38 @@ var init_MermaidDiagram = __esm({
               tertiaryBorderColor: colors__default.default.warning[500],
               lineColor: colors__default.default.neutral[300],
               textColor: colors__default.default.neutral[800],
-              mainBkg: colors__default.default.secondary[100],
-              nodeBorder: colors__default.default.secondary[700],
+              mainBkg: colors__default.default.blue[100],
+              nodeBorder: colors__default.default.blue[700],
               clusterBkg: colors__default.default.white,
               clusterBorder: colors__default.default.neutral[150],
               titleColor: colors__default.default.neutral[800],
               edgeLabelBackground: colors__default.default.white,
               nodeTextColor: colors__default.default.neutral[800],
-              actorBorder: colors__default.default.secondary[700],
-              actorBkg: colors__default.default.secondary[100],
+              actorBorder: colors__default.default.blue[700],
+              actorBkg: colors__default.default.blue[100],
               actorTextColor: colors__default.default.neutral[800],
               actorLineColor: colors__default.default.neutral[300],
               signalColor: colors__default.default.neutral[800],
               signalTextColor: colors__default.default.neutral[800],
-              labelBoxBkgColor: colors__default.default.secondary[100],
-              labelBoxBorderColor: colors__default.default.secondary[700],
+              labelBoxBkgColor: colors__default.default.blue[100],
+              labelBoxBorderColor: colors__default.default.blue[700],
               labelTextColor: colors__default.default.neutral[800],
               loopTextColor: colors__default.default.neutral[800],
               noteBorderColor: colors__default.default.warning[500],
               noteBkgColor: colors__default.default.warning[100],
               noteTextColor: colors__default.default.neutral[800],
-              sectionBkgColor: colors__default.default.secondary[100],
+              sectionBkgColor: colors__default.default.blue[100],
               altSectionBkgColor: colors__default.default.white,
               sectionBkgColor2: colors__default.default.neutral[100],
-              taskBorderColor: colors__default.default.secondary[700],
-              taskBkgColor: colors__default.default.secondary[100],
+              taskBorderColor: colors__default.default.blue[700],
+              taskBkgColor: colors__default.default.blue[100],
               taskTextColor: colors__default.default.neutral[800],
               taskTextDarkColor: colors__default.default.neutral[800],
               taskTextLightColor: colors__default.default.neutral[800],
               activeTaskBorderColor: resolvePrimary(),
-              activeTaskBkgColor: colors__default.default.secondary[200],
-              doneTaskBorderColor: colors__default.default.primary[600],
-              doneTaskBkgColor: colors__default.default.primary[100],
+              activeTaskBkgColor: colors__default.default.blue[200],
+              doneTaskBorderColor: colors__default.default.green[600],
+              doneTaskBkgColor: colors__default.default.green[100],
               critBorderColor: colors__default.default.error[500],
               critBkgColor: colors__default.default.error[100],
               fontFamily: "Inter, system-ui, sans-serif",
@@ -1474,7 +1506,7 @@ ${code}
 });
 
 // src/components/MarkdownEditor/MarkdownEditor.tsx
-init_utils();
+init_utils2();
 var ImageRendererContext = react.createContext(null);
 var ImageRendererProvider = ImageRendererContext;
 var useImageRenderer = () => react.use(ImageRendererContext);
@@ -1643,15 +1675,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,
@@ -1686,7 +1718,7 @@ var ToastAction = ({
 );
 
 // src/components/Toast/ToastDescription.tsx
-init_utils();
+init_utils2();
 var ToastDescription = ({
   ref,
   className,
@@ -1712,7 +1744,7 @@ var ToastDescription = ({
 
 // src/components/Toast/ToastDismiss.tsx
 init_icons();
-init_utils();
+init_utils2();
 var ToastDismiss = ({
   ref,
   className,
@@ -1746,7 +1778,7 @@ var ToastDismiss = ({
 );
 
 // src/components/Toast/ToastDuration.tsx
-init_utils();
+init_utils2();
 var ToastDuration = ({
   ref,
   duration,
@@ -1783,7 +1815,7 @@ var ToastDuration = ({
 );
 
 // src/components/Toast/ToastTitle.tsx
-init_utils();
+init_utils2();
 var ToastTitle = ({
   ref,
   className,
@@ -1864,8 +1896,7 @@ var ToastRoot = ({
   loading = false,
   icon: iconProp
 }) => {
-  const isLegacy = useIsLegacyBrand();
-  const renderArgo = !isLegacy;
+  const renderArgo = useArgoDesign();
   const icon = (() => {
     if (loading) return /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Loader2, { className: "tw-animate-spin" });
     if (iconProp) return iconProp;
@@ -1946,8 +1977,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({
@@ -2304,14 +2335,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();
@@ -2337,28 +2368,30 @@ var variants3 = classVarianceAuthority.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",
@@ -2367,7 +2400,7 @@ var variants3 = classVarianceAuthority.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"
         ]
       }
@@ -2402,7 +2435,7 @@ var DropdownMenuItemIndicator = ({
 };
 
 // src/components/DropdownMenu/ItemIcon.tsx
-init_utils();
+init_utils2();
 var ItemIcon = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   "span",
   {
@@ -2419,7 +2452,7 @@ var ItemIcon = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime
       "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
@@ -2427,7 +2460,7 @@ var ItemIcon = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime
 );
 
 // src/components/DropdownMenu/styles.ts
-init_utils();
+init_utils2();
 var itemVariants = cn(
   // reset
   "tailwindcss-preflight",
@@ -2458,15 +2491,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",
@@ -2533,13 +2567,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__ */ jsxRuntime.jsx(
   ScrollAreaPrimitive2__namespace.ScrollAreaScrollbar,
   {
@@ -2644,7 +2678,7 @@ var DropdownMenuContent = ({
 
 // src/components/DropdownMenu/DropdownMenuItem.tsx
 init_icons();
-init_utils();
+init_utils2();
 var DropdownMenuItem = ({
   ref,
   className,
@@ -2692,7 +2726,7 @@ var DropdownMenuItem = ({
 };
 
 // src/components/DropdownMenu/DropdownMenuItemDescription.tsx
-init_utils();
+init_utils2();
 var descriptionVariants = classVarianceAuthority.cva(
   [
     "tw-box-border",
@@ -2723,7 +2757,7 @@ var DropdownMenuItemDescription = ({
 };
 
 // src/components/DropdownMenu/DropdownMenuLabel.tsx
-init_utils();
+init_utils2();
 var DropdownMenuLabel = ({ className, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     DropdownMenuPrimitive3__namespace.Label,
@@ -2761,7 +2795,7 @@ var DropdownMenuRadioGroup = ({
 
 // src/components/DropdownMenu/DropdownMenuRadioGroup/DropdownMenuRadioItem.tsx
 init_icons();
-init_utils();
+init_utils2();
 var DropdownMenuRadioItem = ({
   className,
   children,
@@ -2808,7 +2842,7 @@ var DropdownMenuRadioItem = ({
 };
 
 // src/components/DropdownMenu/DropdownMenuSeparator.tsx
-init_utils();
+init_utils2();
 var DropdownMenuSeparator = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   DropdownMenuPrimitive3__namespace.Separator,
   {
@@ -2836,7 +2870,7 @@ var DropdownMenuSeparator = ({ className, ...props }) => /* @__PURE__ */ jsxRunt
 var DropdownMenuSub = DropdownMenuPrimitive3__namespace.Sub;
 
 // src/components/DropdownMenu/DropdownMenuSub/DropdownMenuSubContent.tsx
-init_utils();
+init_utils2();
 var DropdownMenuSubContent = ({ className, ...props }) => {
   const { variant } = useDropdownMenuContext();
   return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive3__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2851,7 +2885,7 @@ var DropdownMenuSubContent = ({ className, ...props }) => {
 
 // src/components/DropdownMenu/DropdownMenuSub/DropdownMenuSubTrigger.tsx
 init_icons();
-init_utils();
+init_utils2();
 var DropdownMenuSubTrigger = ({ className, children, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuPrimitive3__namespace.SubTrigger, { className: cn(itemVariants, className), ...props, children: [
     children,
@@ -2860,7 +2894,7 @@ var DropdownMenuSubTrigger = ({ className, children, ...props }) => {
 };
 
 // src/components/DropdownMenu/DropdownMenuTrigger.tsx
-init_utils();
+init_utils2();
 var DropdownMenuTrigger = ({
   ref,
   className,
@@ -2879,8 +2913,7 @@ var DropdownMenu = ({
   modal = false,
   ...props
 }) => {
-  const isLegacy = useIsLegacyBrand();
-  const effectiveVariant = !isLegacy ? "argo" : "default";
+  const effectiveVariant = useArgoDesign() ? "argo" : "default";
   const contextValue = react.useMemo(() => ({ variant: effectiveVariant }), [effectiveVariant]);
   return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContext, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive3.Root, { ...props, modal }) });
 };
@@ -2966,7 +2999,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 },
@@ -3121,7 +3154,7 @@ var ButtonGroup = ({
 };
 
 // src/components/FormGroup/FormGroup.tsx
-init_utils();
+init_utils2();
 var FormGroupContext = react.createContext({
   state: "default"
 });
@@ -3129,11 +3162,11 @@ var FormGroupProvider = FormGroupContext;
 var useFormGroupContext = () => react.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 = classVarianceAuthority.cva(
   [
     "tw-flex",
@@ -3178,7 +3211,7 @@ var InputGroupAddon = ({
 }) => /* @__PURE__ */ jsxRuntime.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,
@@ -3198,7 +3231,7 @@ var InputGroupButton = ({
 );
 
 // src/components/InputGroup/InputGroupInput.tsx
-init_utils();
+init_utils2();
 var InputGroupInput = ({
   ref,
   className,
@@ -3226,7 +3259,7 @@ var InputGroupInput = ({
 );
 
 // src/components/InputGroup/InputGroupText.tsx
-init_utils();
+init_utils2();
 var InputGroupText = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   "span",
   {
@@ -3245,7 +3278,7 @@ var InputGroupText = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx
 );
 
 // src/components/InputGroup/InputGroupTextArea.tsx
-init_utils();
+init_utils2();
 var InputGroupTextArea = ({
   ref,
   className,
@@ -3309,8 +3342,9 @@ var inputGroupVariants = classVarianceAuthority.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",
@@ -3384,7 +3418,7 @@ var inputGroupVariants = classVarianceAuthority.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"
         ]
       },
       {
@@ -3399,7 +3433,7 @@ var inputGroupVariants = classVarianceAuthority.cva(
       {
         variant: "argo",
         focusVariant: "on",
-        className: ["!tw-border-primary", "!tw-ring-primary/50"]
+        className: ["!tw-border-primary", "!tw-ring-ring/50"]
       },
       {
         variant: "argo",
@@ -3428,6 +3462,8 @@ var inputGroupVariants = classVarianceAuthority.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",
@@ -3483,8 +3519,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__ */ jsxRuntime.jsx(
     "div",
@@ -3513,7 +3549,7 @@ InputGroup.Text = InputGroupText;
 
 // src/blocks/ColorInput/ColorInput.tsx
 init_icons();
-init_utils();
+init_utils2();
 init_icons();
 
 // src/blocks/ColorInput/utils.ts
@@ -3730,7 +3766,7 @@ var helpVariants = classVarianceAuthority.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"]
     }
   }
 });
@@ -3832,10 +3868,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 {
@@ -4005,7 +4041,7 @@ FormGroup.ColorInput = FormGroupColorInput;
 FormGroup.Textarea = FormGroupTextarea;
 
 // src/components/Label/Label.tsx
-init_utils();
+init_utils2();
 var Optional = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("tw-text-muted-foreground", className), children: "(optional)" });
 var Label2 = ({ className, children, id, htmlFor, ...rest }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4025,7 +4061,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,
@@ -4520,7 +4556,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__ */ jsxRuntime.jsx(
               LexicalRichTextPlugin.RichTextPlugin,