@keboola/design 2.1.0 → 3.1.0

package/dist/markdown-editor.cjs

@@ -2,12 +2,14 @@
 
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
+var react = require('react');
+var brandRegistry = require('@keboola/brand-registry');
 var reactTooltip = require('@radix-ui/react-tooltip');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var lucideReact = require('lucide-react');
+var lucide_react_star = require('lucide-react');
 var reactSlot = require('@radix-ui/react-slot');
+var DOMPurify = require('dompurify');
 var beautifulMermaid = require('beautiful-mermaid');
 var colors = require('@keboola/tailwind-config/colors');
 var code = require('@lexical/code');
@@ -32,7 +34,6 @@ var richText = require('@lexical/rich-text');
 var lexical = require('lexical');
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
 var sonner = require('sonner');
-var reactFontawesome = require('@fortawesome/react-fontawesome');
 var reactDom = require('react-dom');
 var utils = require('@lexical/utils');
 var DropdownMenuPrimitive3 = require('@radix-ui/react-dropdown-menu');
@@ -60,6 +61,8 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
+var lucide_react_star__namespace = /*#__PURE__*/_interopNamespace(lucide_react_star);
+var DOMPurify__default = /*#__PURE__*/_interopDefault(DOMPurify);
 var colors__default = /*#__PURE__*/_interopDefault(colors);
 var DropdownMenuPrimitive3__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive3);
 var ScrollAreaPrimitive2__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive2);
@@ -67,7 +70,9 @@ var TextareaAutosize__default = /*#__PURE__*/_interopDefault(TextareaAutosize);
 var RLabel__namespace = /*#__PURE__*/_interopNamespace(RLabel);
 
 var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __esm = (fn, res) => function __init() {
   return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
 };
@@ -75,6 +80,15 @@ var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget);
 var twMerge, cn;
 var init_classNames = __esm({
   "src/utils/classNames.ts"() {
@@ -143,20 +157,62 @@ var init_keyCodes = __esm({
     };
   }
 });
+var ThemeContext;
+var init_themeContext = __esm({
+  "src/components/ThemeProvider/themeContext.ts"() {
+    ThemeContext = react.createContext(null);
+  }
+});
+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 tooltipVariants, TooltipContent;
 var init_TooltipContent = __esm({
   "src/components/Tooltip/TooltipContent.tsx"() {
+    init_useIsLegacyBrand();
     tooltipVariants = classVarianceAuthority.cva(
       [
         "tailwindcss-preflight",
         "tw-inline-block",
-        "tw-rounded",
-        "tw-bg-neutral-800",
-        "tw-text-white",
         "tw-break-anywhere",
         "tw-max-h-96",
         "tw-overflow-y-auto",
-        "tw-z-[1060]"
+        "tw-z-[1060]",
+        // legacy (dark) chrome — default
+        "tw-rounded",
+        "tw-bg-neutral-800",
+        "tw-text-white",
+        // argo chrome overrides — semantic floating-panel tokens
+        "data-[argo=true]:tw-rounded-2xl",
+        "data-[argo=true]:tw-border",
+        "data-[argo=true]:tw-border-solid",
+        "data-[argo=true]:tw-border-border",
+        "data-[argo=true]:tw-bg-popover",
+        "data-[argo=true]:tw-text-popover-foreground",
+        "data-[argo=true]:tw-shadow-md",
+        // argo open animation
+        "data-[argo=true]:data-[state=delayed-open]:tw-animate-in",
+        "data-[argo=true]:data-[state=instant-open]:tw-animate-in",
+        "data-[argo=true]:data-[state=delayed-open]:tw-fade-in-0",
+        "data-[argo=true]:data-[state=instant-open]:tw-fade-in-0",
+        "data-[argo=true]:data-[state=delayed-open]:tw-zoom-in-95",
+        "data-[argo=true]:data-[state=instant-open]:tw-zoom-in-95",
+        // argo closed animation
+        "data-[argo=true]:data-[state=closed]:tw-animate-out",
+        "data-[argo=true]:data-[state=closed]:tw-fade-out-0",
+        "data-[argo=true]:data-[state=closed]:tw-zoom-out-95",
+        // argo position animation
+        "data-[argo=true]:data-[side=bottom]:tw-slide-in-from-top-2",
+        "data-[argo=true]:data-[side=left]:tw-slide-in-from-right-2",
+        "data-[argo=true]:data-[side=right]:tw-slide-in-from-left-2",
+        "data-[argo=true]:data-[side=top]:tw-slide-in-from-bottom-2"
       ],
       {
         defaultVariants: {
@@ -189,6 +245,7 @@ var init_TooltipContent = __esm({
     TooltipContent = ({
       className,
       variant,
+      argo,
       keepOpenOnPointerDownOutside = false,
       children,
       onPointerDownOutside,
@@ -198,6 +255,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);
@@ -206,7 +265,8 @@ var init_TooltipContent = __esm({
         reactTooltip.Content,
         {
           ...rest,
-          "data-tooltip-content": true,
+          "data-tooltip-content": renderArgo ? void 0 : true,
+          "data-argo": renderArgo,
           sideOffset,
           collisionPadding,
           onPointerDownOutside: handlePointerDownOutside,
@@ -285,6 +345,7 @@ var init_Tooltip = __esm({
       className,
       keepOpenOnTriggerClick = false,
       variant,
+      argo,
       placement = "right",
       forceHide = false,
       forceShow = false,
@@ -323,6 +384,7 @@ var init_Tooltip = __esm({
               {
                 className,
                 variant: resolvedVariant,
+                argo,
                 placement,
                 keepOpenOnPointerDownOutside: keepOpenOnTriggerClick,
                 children: tooltip
@@ -450,7 +512,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",
@@ -477,8 +539,42 @@ var init_Skeleton = __esm({
     };
   }
 });
+var Keboola;
+var init_Keboola = __esm({
+  "src/icons/Keboola.tsx"() {
+    init_utils();
+    Keboola = react.forwardRef(
+      ({ size = 24, color = "currentColor", className, children, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          ref,
+          xmlns: "http://www.w3.org/2000/svg",
+          width: size,
+          height: size,
+          viewBox: "0 0 300 512",
+          fill: color,
+          className: cn("lucide", className),
+          ...rest,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M152 320C79.7 320 24.5 233.9 24.5 124.7C24.5 15.6 70.5 0 152 0s123.6 15.6 123.6 124.7C275.5 233.9 217.7 320 152 320zm-8.7-50.5c0-11.2-9.5-20.3-21.2-20.3s-21.2 9.1-21.2 20.3c0 11.2 9.5 20.3 21.2 20.3s21.2-9.1 21.2-20.3zm55.7 0c0-11.2-9.5-20.3-21.2-20.3s-21.2 9.1-21.2 20.3c0 11.2 9.5 20.3 21.2 20.3s21.2-9.1 21.2-20.3zm68.9 115.1c10.2 9.3 20.2 20.5 29 35c5.9 9.7 2.6 22.1-7.5 27.8c-3.4 1.9-7.1 2.8-10.7 2.8c-7.2 0-14.3-3.6-18.3-10c-6.8-11.1-13.8-18.9-21.7-26.1c-7.3-6.7-15.6-12.7-24.9-19.5c-.7-.5-1.4-1-2.1-1.5c-5-3.6-10-6.8-14.9-9.4c.6 1 1.2 2.1 1.8 3.2c14.4 26.4 29.2 63.1 29.2 104.9c0 11.2-9.5 20.3-21.2 20.3c-11.7 0-21.2-9.1-21.2-20.3c.1-31.8-11.6-62.3-23.8-84.9c-4-7.4-8-13.9-11.6-19.3c-3.4 5.2-7.2 11.3-11 18.3c-12.5 22.7-24.5 53.8-24.4 86c0 11.2-9.5 20.3-21.2 20.3s-21.2-9.1-21.2-20.3c.1-41.8 14.9-78.4 29.2-104.9c.6-1.1 1.2-2.1 1.8-3.2c-5 2.7-9.9 5.8-14.9 9.4c-.6 .5-1.3 .9-1.9 1.4c-9.5 6.9-17.8 12.9-25.1 19.7c-7.9 7.2-14.9 15.1-21.7 26.1c-5.9 9.7-18.9 12.9-29 7.2C.5 441.8-2.9 429.3 3.1 419.7c8.9-14.4 18.8-25.7 29-35c9.2-8.4 18.5-15.1 27.6-21.7c1-.7 2-1.4 3-2.2c4.7-3.5 9.6-6.7 14.6-9.6c-5-2.9-9.8-6.1-14.6-9.6C39.8 325 19.9 302.5 3.1 275.1c-5.9-9.7-2.6-22.1 7.5-27.8c10.1-5.7 23.1-2.5 29 7.2c14.6 23.7 31.1 42 48.7 54.9c18.9 13.7 37.4 20.5 56.5 21.5c1.7-.1 3.5-.1 5.2-.1c1.8 0 3.5 .1 5.2 .1c0 0 0 0 0 0c19.1-1.1 37.6-7.9 56.5-21.5c17.6-12.8 34.2-31.2 48.7-54.9c6-9.7 18.9-12.9 29-7.2c10.1 5.7 13.4 18.1 7.5 27.8c-16.8 27.4-36.7 49.9-59.6 66.6c-4.7 3.5-9.6 6.7-14.5 9.6c4.9 2.9 9.8 6.1 14.5 9.6c.9 .7 1.8 1.3 2.7 2c9.2 6.7 18.5 13.5 27.9 22z" }),
+            children
+          ]
+        }
+      )
+    );
+    Keboola.displayName = "Keboola";
+  }
+});
+
+// src/icons/index.ts
+var icons_exports = {};
+__export(icons_exports, {
+  Keboola: () => Keboola
+});
 var init_icons = __esm({
   "src/icons/index.ts"() {
+    __reExport(icons_exports, lucide_react_star__namespace);
+    init_Keboola();
   }
 });
 var variants, argoVariants;
@@ -671,6 +767,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",
@@ -765,6 +863,7 @@ var init_Button = __esm({
   "src/components/Button/Button.tsx"() {
     init_icons();
     init_utils();
+    init_useIsLegacyBrand();
     init_styles();
     Button = ({
       ref,
@@ -781,14 +880,11 @@ var init_Button = __esm({
       block = false,
       ...buttonProps
     }) => {
+      const isLegacy = useIsLegacyBrand();
+      const renderArgo = !isLegacy || argo;
       const Comp = asChild ? reactSlot.Root : "button";
       const isIconOnly = String(size).startsWith("icon");
-      const classNames = argo ? argoVariants({ variant, size, block, className }) : variants({
-        size,
-        variant,
-        block,
-        className
-      });
+      const classNames = renderArgo ? argoVariants({ variant, size, block, className }) : variants({ size, variant, block, className });
       const handleClick = (event) => {
         const isAnchor = event.currentTarget.tagName === "A";
         if (isAnchor && disabled) {
@@ -810,7 +906,7 @@ var init_Button = __esm({
           onClick: handleClick,
           className: cn(classNames),
           children: [
-            isLoading && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "tw-size-4 tw-shrink-0 tw-animate-spin" }),
+            isLoading && /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Loader2, { className: "tw-size-4 tw-shrink-0 tw-animate-spin" }),
             /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slottable, { children: isLoading && isIconOnly ? null : children })
           ]
         }
@@ -833,7 +929,7 @@ var init_ButtonInline = __esm({
         "disabled:tw-no-underline",
         "[&_svg]:disabled:tw-text-neutral-400",
         // Default size for nested Lucide icons; callers can override on the icon.
-        "[&_svg:not([class*='tw-size-'])]:tw-size-4",
+        "[&_svg.lucide:not([class*='tw-size-'])]:tw-size-4",
         "[&_svg]:tw-shrink-0"
       ],
       {
@@ -843,11 +939,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"],
@@ -954,7 +1046,7 @@ var init_ClipboardButton = __esm({
     init_Button2();
     init_Clipboard2();
     init_icons();
-    DEFAULT_ICON = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, {});
+    DEFAULT_ICON = /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Copy, {});
     ClipboardButton = ({
       // clipboard props
       text,
@@ -1001,6 +1093,10 @@ var init_ZoomableSvg = __esm({
     MAX_SCALE = 3;
     ZOOM_STEP = 0.1;
     ZoomableSvg = ({ html, copyText, className }) => {
+      const safeHtml = react.useMemo(
+        () => DOMPurify__default.default.sanitize(html, { USE_PROFILES: { svg: true, svgFilters: true } }),
+        [html]
+      );
       const containerRef = react.useRef(null);
       const [scale, setScale] = react.useState(1);
       const [translate, setTranslate] = react.useState({ x: 0, y: 0 });
@@ -1096,7 +1192,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 }
                   }
                 )
               }
@@ -1133,7 +1229,7 @@ var init_ZoomableSvg = __esm({
                           "aria-label": isFullscreen ? "Exit fullscreen" : "Fullscreen",
                           onClick: () => setIsFullscreen((f) => !f),
                           argo: true,
-                          children: isFullscreen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minimize2, { className: "tw-size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { className: "tw-size-4" })
+                          children: isFullscreen ? /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Minimize2, { className: "tw-size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Maximize2, { className: "tw-size-4" })
                         }
                       )
                     }
@@ -1149,7 +1245,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
           }
@@ -1159,7 +1255,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
@@ -1181,12 +1277,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) {
@@ -1235,7 +1336,7 @@ var init_MermaidDiagram = __esm({
               taskTextColor: colors__default.default.neutral[800],
               taskTextDarkColor: colors__default.default.neutral[800],
               taskTextLightColor: colors__default.default.neutral[800],
-              activeTaskBorderColor: colors__default.default.primary.DEFAULT,
+              activeTaskBorderColor: resolvePrimary(),
               activeTaskBkgColor: colors__default.default.secondary[200],
               doneTaskBorderColor: colors__default.default.primary[600],
               doneTaskBkgColor: colors__default.default.primary[100],
@@ -1287,46 +1388,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 = react.useId();
-      const [svg, setSvg] = react.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] = react.useState(() => resolveSyncSvg(code));
       const [renderFailed, setRenderFailed] = react.useState(false);
       const debounceRef = react.useRef(null);
       const renderIdRef = react.useRef(0);
       const [prevCode, setPrevCode] = react.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);
       }
       react.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);
         }
@@ -1576,9 +1659,7 @@ init_utils();
 // src/components/Toast/ToastRoot.tsx
 init_icons();
 init_utils();
-var Icon = ({ ref, icon, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { ...rest, ref, icon });
-var isFAIconValue = (value) => typeof value === "string" || Array.isArray(value) && value.length === 2 && typeof value[0] === "string" && typeof value[1] === "string";
-var renderLegacyIcon = (value) => isFAIconValue(value) ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: value }) : value;
+init_useIsLegacyBrand();
 
 // src/components/Toast/ToastAction.tsx
 init_utils();
@@ -1663,12 +1744,13 @@ 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",
     ...rest,
     children: [
-      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(icons_exports.X, {}),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-sr-only", children: "Dismiss" })
     ]
   }
@@ -1690,6 +1772,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
@@ -1730,6 +1813,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
@@ -1776,10 +1860,10 @@ var variants2 = classVarianceAuthority.cva(
   }
 );
 var DEFAULT_VARIANT_ICON = {
-  error: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, {}),
-  info: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, {}),
-  success: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, {}),
-  warning: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, {})
+  error: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.AlertTriangle, {}),
+  info: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Info, {}),
+  success: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.CircleCheck, {}),
+  warning: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.AlertCircle, {})
 };
 var ToastRoot = ({
   id,
@@ -1789,11 +1873,14 @@ var ToastRoot = ({
   duration = Infinity,
   variant = "info",
   loading = false,
-  icon: iconProp
+  icon: iconProp,
+  argo
 }) => {
+  const isLegacy = useIsLegacyBrand();
+  const renderArgo = !isLegacy || argo;
   const icon = (() => {
-    if (loading) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "tw-animate-spin" });
-    if (iconProp) return renderLegacyIcon(iconProp);
+    if (loading) return /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Loader2, { className: "tw-animate-spin" });
+    if (iconProp) return iconProp;
     if (variant === "default" || variant === null) return null;
     return DEFAULT_VARIANT_ICON[variant];
   })();
@@ -1801,35 +1888,44 @@ var ToastRoot = ({
     sonner.toast.dismiss(id);
     action?.onClick(event);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-variant": variant, className: cn(variants2({ variant })), children: [
-    icon && /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        "data-slot": "toast-icon",
-        className: cn(
-          "tw-inline-flex",
-          "tw-items-center",
-          "tw-justify-center",
-          "tw-self-center",
-          // styles — container at 20px with no padding so the 20px Lucide
-          // glyph fills the slot (previous tw-size-4 + tw-p-1 clipped a
-          // 16px child into 8px of visible space)
-          "tw-aspect-square",
-          "tw-size-5",
-          "tw-shrink-0",
-          '[&_svg:not([class*="tw-size-"])]:tw-size-5',
-          "tw-text-white",
-          "group-data-[variant=default]/toast:tw-text-popover-foreground"
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-variant": variant,
+      "data-argo": renderArgo,
+      className: cn(
+        variants2({ variant }),
+        "data-[variant=default]:data-[argo=true]:tw-bg-background"
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-slot": "toast-icon",
+            className: cn(
+              "tw-inline-flex",
+              "tw-items-center",
+              "tw-justify-center",
+              "tw-self-center",
+              "tw-aspect-square",
+              "tw-size-5",
+              "tw-shrink-0",
+              '[&_svg:not([class*="tw-size-"])]:tw-size-5',
+              "tw-text-white",
+              "group-data-[variant=default]/toast:tw-text-popover-foreground",
+              "group-data-[variant=default]/toast:group-data-[argo=true]/toast:tw-text-foreground"
+            ),
+            children: icon
+          }
         ),
-        children: icon
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(ToastTitle, { children: title }),
-    description && /* @__PURE__ */ jsxRuntime.jsx(ToastDescription, { children: description }),
-    action && /* @__PURE__ */ jsxRuntime.jsx(ToastAction, { style: action?.actionButtonStyle, onClick: handleActionClick, children: action.label }),
-    /* @__PURE__ */ jsxRuntime.jsx(ToastDismiss, { onClick: () => sonner.toast.dismiss(id) }),
-    duration !== Infinity && /* @__PURE__ */ jsxRuntime.jsx(ToastDuration, { duration })
-  ] });
+        /* @__PURE__ */ jsxRuntime.jsx(ToastTitle, { children: title }),
+        description && /* @__PURE__ */ jsxRuntime.jsx(ToastDescription, { children: description }),
+        action && /* @__PURE__ */ jsxRuntime.jsx(ToastAction, { style: action?.actionButtonStyle, onClick: handleActionClick, children: action.label }),
+        /* @__PURE__ */ jsxRuntime.jsx(ToastDismiss, { onClick: () => sonner.toast.dismiss(id) }),
+        duration !== Infinity && /* @__PURE__ */ jsxRuntime.jsx(ToastDuration, { duration })
+      ]
+    }
+  );
 };
 var toast = ({
   onAutoClose,
@@ -2220,6 +2316,9 @@ init_icons();
 init_icons();
 init_utils();
 
+// src/components/DropdownMenu/DropdownMenu.tsx
+init_useIsLegacyBrand();
+
 // src/components/DropdownMenu/DropdownMenuCheckboxItem.tsx
 init_icons();
 init_utils();
@@ -2292,9 +2391,9 @@ var DropdownMenuItemIndicator = ({
   ...rest
 }) => {
   const IconComp = (() => {
-    if (variant === "switch") return lucideReact.ToggleRight;
-    if (variant === "radio") return lucideReact.Circle;
-    return lucideReact.Check;
+    if (variant === "switch") return icons_exports.ToggleRight;
+    if (variant === "radio") return icons_exports.Circle;
+    return icons_exports.Check;
   })();
   const forceMount = (() => {
     if (forceMountProp) return true;
@@ -2368,17 +2467,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",
@@ -2389,8 +2487,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",
@@ -2415,7 +2521,7 @@ var DropdownMenuCheckboxItem = ({
   ...props
 }) => {
   const isAtStart = indicatorAlign === "start";
-  const indicatorEle = isLoading ? /* @__PURE__ */ jsxRuntime.jsx(ItemIcon, { className: isAtStart ? "" : "tw-ml-auto", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "tw-animate-spin" }) }) : /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItemIndicator, { variant: indicator, className: isAtStart ? "" : "tw-ml-auto" });
+  const indicatorEle = isLoading ? /* @__PURE__ */ jsxRuntime.jsx(ItemIcon, { className: isAtStart ? "" : "tw-ml-auto", children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Loader2, { className: "tw-animate-spin" }) }) : /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItemIndicator, { variant: indicator, className: isAtStart ? "" : "tw-ml-auto" });
   const handleSelect = (event) => {
     if (!closeOnSelect) event.preventDefault();
     onSelect?.(event);
@@ -2450,7 +2556,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"
@@ -2465,8 +2570,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"
         )
       }
     )
@@ -2565,7 +2670,7 @@ var DropdownMenuItem = ({
   ...props
 }) => {
   const Comp = asChild ? reactSlot.Root : "div";
-  const adornment = isLoading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "tw-animate-spin" }) : renderLegacyIcon(icon);
+  const adornment = isLoading ? /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Loader2, { className: "tw-animate-spin" }) : icon;
   const handleOnSelect = (event) => {
     if (asModalTrigger) event.preventDefault();
     onSelect?.(event);
@@ -2680,7 +2785,7 @@ var DropdownMenuRadioItem = ({
   ...props
 }) => {
   const isAtStart = indicatorAlign === "start";
-  const indicatorEle = isLoading ? /* @__PURE__ */ jsxRuntime.jsx(ItemIcon, { className: iconClassName, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "tw-animate-spin" }) }) : /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItemIndicator, { variant: indicator });
+  const indicatorEle = isLoading ? /* @__PURE__ */ jsxRuntime.jsx(ItemIcon, { className: iconClassName, children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Loader2, { className: "tw-animate-spin" }) }) : /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItemIndicator, { variant: indicator });
   const handleSelect = (event) => {
     if (!closeOnSelect) event.preventDefault();
     onSelect?.(event);
@@ -2701,7 +2806,7 @@ var DropdownMenuRadioItem = ({
       ...props,
       children: [
         isAtStart && indicatorEle,
-        icon && /* @__PURE__ */ jsxRuntime.jsx(ItemIcon, { className: iconClassName, children: renderLegacyIcon(icon) }),
+        icon && /* @__PURE__ */ jsxRuntime.jsx(ItemIcon, { className: iconClassName, children: icon }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-flex tw-min-w-0 tw-flex-1 tw-items-center tw-gap-2", children }),
         !isAtStart && indicatorEle
       ]
@@ -2757,7 +2862,7 @@ init_utils();
 var DropdownMenuSubTrigger = ({ className, children, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuPrimitive3__namespace.SubTrigger, { className: cn(itemVariants, className), ...props, children: [
     children,
-    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "tw-ml-auto tw-size-5" })
+    /* @__PURE__ */ jsxRuntime.jsx(icons_exports.ChevronRight, { className: "tw-ml-auto tw-size-5" })
   ] });
 };
 
@@ -2779,10 +2884,12 @@ var DropdownMenuTrigger = ({
 var DropdownMenu = ({
   // change a default value to false, for modal property, as it is not used in most cases
   modal = false,
-  variant = "default",
+  variant,
   ...props
 }) => {
-  const contextValue = react.useMemo(() => ({ variant }), [variant]);
+  const isLegacy = useIsLegacyBrand();
+  const effectiveVariant = !isLegacy || variant === "argo" ? "argo" : "default";
+  const contextValue = react.useMemo(() => ({ variant: effectiveVariant }), [effectiveVariant]);
   return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContext, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuPrimitive3.Root, { ...props, modal }) });
 };
 DropdownMenu.Trigger = DropdownMenuTrigger;
@@ -2802,10 +2909,10 @@ DropdownMenu.ItemDescription = DropdownMenuItemDescription;
 // src/components/MarkdownEditor/plugins/toolbar/AlignmentDropdown.tsx
 init_Tooltip2();
 var ALIGNMENT_OPTIONS = [
-  { value: "left", label: "Left", icon: lucideReact.AlignLeft },
-  { value: "center", label: "Center", icon: lucideReact.AlignCenter },
-  { value: "right", label: "Right", icon: lucideReact.AlignRight },
-  { value: "justify", label: "Justify", icon: lucideReact.AlignJustify }
+  { value: "left", label: "Left", icon: icons_exports.AlignLeft },
+  { value: "center", label: "Center", icon: icons_exports.AlignCenter },
+  { value: "right", label: "Right", icon: icons_exports.AlignRight },
+  { value: "justify", label: "Justify", icon: icons_exports.AlignJustify }
 ];
 var ALIGNMENT_ICONS = Object.fromEntries(
   ALIGNMENT_OPTIONS.map(({ value, icon }) => [value, icon])
@@ -2831,7 +2938,7 @@ var AlignmentDropdown = ({
       editor.dispatchCommand(lexical.FORMAT_ELEMENT_COMMAND, align);
     });
   };
-  const CurrentAlignmentIcon = ALIGNMENT_ICONS[alignment] ?? lucideReact.AlignLeft;
+  const CurrentAlignmentIcon = ALIGNMENT_ICONS[alignment] ?? icons_exports.AlignLeft;
   return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { onOpenChange: handleOpenChange, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { tooltip: "Text alignment", placement: "top", triggerAsChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -2843,7 +2950,7 @@ var AlignmentDropdown = ({
         ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(CurrentAlignmentIcon, { className: "tw-size-4" }),
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "tw-size-3" })
+          /* @__PURE__ */ jsxRuntime.jsx(icons_exports.ChevronDown, { className: "tw-size-3" })
         ]
       }
     ) }) }),
@@ -2870,14 +2977,14 @@ init_icons();
 init_utils();
 init_Tooltip2();
 var BLOCK_TYPE_META = {
-  paragraph: { label: "Normal", icon: lucideReact.Type, selectable: true },
-  h1: { label: "Heading 1", icon: lucideReact.Heading1, selectable: true },
-  h2: { label: "Heading 2", icon: lucideReact.Heading2, selectable: true },
-  h3: { label: "Heading 3", icon: lucideReact.Heading3, selectable: true },
-  bullet: { label: "Bullet List", icon: lucideReact.List, selectable: false },
-  number: { label: "Numbered List", icon: lucideReact.ListOrdered, selectable: false },
-  quote: { label: "Quote", icon: lucideReact.Quote, selectable: false },
-  code: { label: "Code Block", icon: lucideReact.SquareCode, selectable: false }
+  paragraph: { label: "Normal", icon: icons_exports.Type, selectable: true },
+  h1: { label: "Heading 1", icon: icons_exports.Heading1, selectable: true },
+  h2: { label: "Heading 2", icon: icons_exports.Heading2, selectable: true },
+  h3: { label: "Heading 3", icon: icons_exports.Heading3, selectable: true },
+  bullet: { label: "Bullet List", icon: icons_exports.List, selectable: false },
+  number: { label: "Numbered List", icon: icons_exports.ListOrdered, selectable: false },
+  quote: { label: "Quote", icon: icons_exports.Quote, selectable: false },
+  code: { label: "Code Block", icon: icons_exports.SquareCode, selectable: false }
 };
 var BLOCK_TYPE_OPTIONS = Object.entries(BLOCK_TYPE_META).filter(([, meta]) => meta.selectable).map(([value, { label, icon }]) => ({ value, label, icon }));
 var isBlockType = (value) => Object.prototype.hasOwnProperty.call(BLOCK_TYPE_META, value);
@@ -2887,7 +2994,7 @@ var BlockTypeDropdown = ({
 }) => {
   const savedSelectionRef = react.useRef(null);
   const currentMeta = isBlockType(blockType) ? BLOCK_TYPE_META[blockType] : null;
-  const CurrentBlockIcon = currentMeta?.icon ?? lucideReact.Type;
+  const CurrentBlockIcon = currentMeta?.icon ?? icons_exports.Type;
   const handleOpenChange = (open) => {
     if (open) {
       editor.getEditorState().read(() => {
@@ -2930,7 +3037,7 @@ var BlockTypeDropdown = ({
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(CurrentBlockIcon, { className: "tw-size-4" }),
           currentMeta?.label ?? "Normal",
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "tw-size-3" })
+          /* @__PURE__ */ jsxRuntime.jsx(icons_exports.ChevronDown, { className: "tw-size-3" })
         ]
       }
     ) }) }),
@@ -3031,6 +3138,7 @@ var useFormGroupContext = () => react.use(FormGroupContext);
 
 // src/components/InputGroup/InputGroup.tsx
 init_utils();
+init_useIsLegacyBrand();
 
 // src/components/InputGroup/InputGroupAddon.tsx
 init_utils();
@@ -3040,7 +3148,7 @@ var addonVariants = classVarianceAuthority.cva(
     "tw-items-center",
     "tw-gap-1",
     // Default size for nested Lucide icons in prefix/suffix slots; callers can override on the icon.
-    "[&_svg:not([class*='tw-size-'])]:tw-size-4",
+    "[&_svg.lucide:not([class*='tw-size-'])]:tw-size-4",
     "[&_svg]:tw-shrink-0"
   ],
   {
@@ -3329,7 +3437,8 @@ var inputGroupVariants = classVarianceAuthority.cva(
           "has-[:is(input,textarea):disabled]:tw-opacity-40"
         ],
         argo: [
-          "tw-bg-background",
+          // muted filled input surface — gray, distinct from white containers; not the app-background token
+          "tw-bg-muted",
           "tw-border-input",
           "tw-rounded-lg",
           "tw-text-foreground",
@@ -3383,15 +3492,28 @@ var InputGroupRoot = ({
   focusVariant,
   className,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  "div",
-  {
-    ...props,
-    ref,
-    className: cn(inputGroupVariants({ state, variant, sizing, focusVariant, className })),
-    children
-  }
-);
+}) => {
+  const isLegacy = useIsLegacyBrand();
+  const effectiveVariant = !isLegacy || variant === "argo" ? "argo" : variant;
+  const effectiveSizing = effectiveVariant === "argo" ? "medium" : sizing;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      ref,
+      className: cn(
+        inputGroupVariants({
+          state,
+          variant: effectiveVariant,
+          sizing: effectiveSizing,
+          focusVariant,
+          className
+        })
+      ),
+      children
+    }
+  );
+};
 var InputGroup = InputGroupRoot;
 InputGroup.Input = InputGroupInput;
 InputGroup.Addon = InputGroupAddon;
@@ -3467,7 +3589,7 @@ var ColorPicker = ({ value, disabled, readOnly, ...props }) => {
         disabled: disabled || readOnly,
         onClick: handleOpenPicker,
         "aria-label": "Pick color",
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pipette, { className: "tw-size-4" })
+        children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Pipette, { className: "tw-size-4" })
       }
     )
   ] });
@@ -3586,7 +3708,7 @@ var ColorInput = ({
               onMouseDown: (event) => event.preventDefault(),
               onClick: handleClear,
               "aria-label": "Clear color",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "tw-size-4" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.X, { className: "tw-size-4" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -3616,8 +3738,8 @@ var helpVariants = classVarianceAuthority.cva(["tw-m-0", "tw-text-xs"], {
   },
   variants: {
     state: {
-      default: ["tw-text-neutral-500"],
-      error: ["tw-text-error-500"],
+      default: ["tw-text-muted-foreground"],
+      error: ["tw-text-destructive"],
       warning: ["tw-text-warning-500"]
     }
   }
@@ -3696,7 +3818,7 @@ var Textarea = ({
   containerClassName,
   // group props
   state = "default",
-  variant = "primary",
+  variant,
   sizing,
   focusVariant,
   ...rest
@@ -3821,14 +3943,14 @@ var Input = ({
               onMouseDown: (e) => e.preventDefault(),
               onClick: handleClear,
               "data-testid": testId.clearButton,
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "tw-size-4" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.X, { className: "tw-size-4" })
             }
           ),
           rightSuffix && /* @__PURE__ */ jsxRuntime.jsx(
             "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
             }
@@ -3847,6 +3969,7 @@ var TextInput = ({
   value,
   defaultValue,
   type = "text",
+  variant,
   onValueChange,
   onChange,
   onValueBlur,
@@ -3869,6 +3992,7 @@ var TextInput = ({
       onChange: handleChange,
       onBlur: handleBlur,
       type,
+      variant,
       value: sanitizeTextInputValue(value),
       defaultValue: sanitizeTextInputValue(defaultValue)
     }
@@ -3892,7 +4016,7 @@ FormGroup.Textarea = FormGroupTextarea;
 
 // src/components/Label/Label.tsx
 init_utils();
-var Optional = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("tw-text-neutral-400", className), children: "(optional)" });
+var Optional = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("tw-text-muted-foreground", className), children: "(optional)" });
 var Label2 = ({ className, children, id, htmlFor, ...rest }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     RLabel__namespace.Root,
@@ -3901,7 +4025,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
@@ -4001,12 +4125,12 @@ var LinkPanel = ({ editor, isLink }) => {
         active: true,
         onClick: () => editor.dispatchCommand(link.TOGGLE_LINK_COMMAND, null),
         tooltip: "Remove Link",
-        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link, { className: "tw-size-4" })
+        children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Link, { className: "tw-size-4" })
       }
     );
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-relative", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton, { active: open, onClick: handleOpen, tooltip: "Insert Link", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link, { className: "tw-size-4" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton, { active: open, onClick: handleOpen, tooltip: "Insert Link", children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Link, { className: "tw-size-4" }) }),
     open && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -4170,7 +4294,7 @@ var ToolbarPlugin = () => {
               active: isBold,
               onClick: () => editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, "bold"),
               tooltip: "Bold (Ctrl+B)",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bold, { className: "tw-size-4" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Bold, { className: "tw-size-4" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -4179,7 +4303,7 @@ var ToolbarPlugin = () => {
               active: isItalic,
               onClick: () => editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, "italic"),
               tooltip: "Italic (Ctrl+I)",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Italic, { className: "tw-size-4" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Italic, { className: "tw-size-4" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -4188,7 +4312,7 @@ var ToolbarPlugin = () => {
               active: isUnderline,
               onClick: () => editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, "underline"),
               tooltip: "Underline (Ctrl+U)",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Underline, { className: "tw-size-4" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Underline, { className: "tw-size-4" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -4197,7 +4321,7 @@ var ToolbarPlugin = () => {
               active: isStrikethrough,
               onClick: () => editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, "strikethrough"),
               tooltip: "Strikethrough",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Strikethrough, { className: "tw-size-4" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Strikethrough, { className: "tw-size-4" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -4206,7 +4330,7 @@ var ToolbarPlugin = () => {
               active: isCode,
               onClick: () => editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, "code"),
               tooltip: "Inline Code",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code, { className: "tw-size-4" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Code, { className: "tw-size-4" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(ToolbarDivider, {}),
@@ -4224,7 +4348,7 @@ var ToolbarPlugin = () => {
                 }
               },
               tooltip: "Bullet List",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.List, { className: "tw-size-4" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.List, { className: "tw-size-4" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -4239,7 +4363,7 @@ var ToolbarPlugin = () => {
                 }
               },
               tooltip: "Numbered List",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListOrdered, { className: "tw-size-4" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.ListOrdered, { className: "tw-size-4" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(ToolbarDivider, {}),
@@ -4261,7 +4385,7 @@ var ToolbarPlugin = () => {
                 });
               },
               tooltip: "Quote",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Quote, { className: "tw-size-4" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Quote, { className: "tw-size-4" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -4280,7 +4404,7 @@ var ToolbarPlugin = () => {
                 });
               },
               tooltip: "Code Block",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SquareCode, { className: "tw-size-4" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.SquareCode, { className: "tw-size-4" })
             }
           )
         ]
@@ -4292,25 +4416,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(" "),
@@ -4318,7 +4442,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(" ")
   }
 };
@@ -4406,7 +4530,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__ */ jsxRuntime.jsx(
               LexicalRichTextPlugin.RichTextPlugin,
@@ -4421,7 +4545,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