@keboola/design 6.3.0 → 6.5.0

package/dist/markdown-editor.cjs

@@ -9,6 +9,7 @@ var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 var lucide_react_star = require('lucide-react');
 var reactSlot = require('@radix-ui/react-slot');
+var reactDom = require('react-dom');
 var DOMPurify = require('dompurify');
 var beautifulMermaid = require('beautiful-mermaid');
 var colors = require('@keboola/tailwind-config/colors');
@@ -34,7 +35,6 @@ var richText = require('@lexical/rich-text');
 var lexical = require('lexical');
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
 var sonner = require('sonner');
-var reactDom = require('react-dom');
 var utils = require('@lexical/utils');
 var DropdownMenuPrimitive3 = require('@radix-ui/react-dropdown-menu');
 var ScrollAreaPrimitive2 = require('@radix-ui/react-scroll-area');
@@ -378,6 +378,7 @@ var init_Tooltip = __esm({
       placement = "right",
       forceHide = false,
       forceShow = false,
+      delayDuration,
       // trigger props
       triggerAsChild = false
     }) => {
@@ -397,6 +398,7 @@ var init_Tooltip = __esm({
         {
           open: !!tooltip && (open || forceShow) && !forceHide,
           onOpenChange: setOpen,
+          delayDuration,
           disableHoverableContent: isActionVariant,
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -633,6 +635,7 @@ var init_Keboola = __esm({
           width: size,
           height: size,
           viewBox: "0 0 300 512",
+          overflow: "visible",
           fill: color,
           className: cn("lucide", className),
           ...rest,
@@ -646,18 +649,49 @@ var init_Keboola = __esm({
     Keboola.displayName = "Keboola";
   }
 });
+var Microsoft;
+var init_Microsoft = __esm({
+  "src/icons/Microsoft.tsx"() {
+    init_utils2();
+    Microsoft = react.forwardRef(
+      ({ size = 24, className, children, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          ref,
+          xmlns: "http://www.w3.org/2000/svg",
+          width: size,
+          height: size,
+          viewBox: "0 0 21 21",
+          fill: "none",
+          className: cn("lucide", className),
+          ...rest,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0", y: "0", width: "10", height: "10", fill: "#F25022" }),
+            /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "11", y: "0", width: "10", height: "10", fill: "#7FBA00" }),
+            /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0", y: "11", width: "10", height: "10", fill: "#00A4EF" }),
+            /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "11", y: "11", width: "10", height: "10", fill: "#FFB900" }),
+            children
+          ]
+        }
+      )
+    );
+    Microsoft.displayName = "Microsoft";
+  }
+});
 
 // src/icons/index.ts
 var icons_exports = {};
 __export(icons_exports, {
   Google: () => Google,
-  Keboola: () => Keboola
+  Keboola: () => Keboola,
+  Microsoft: () => Microsoft
 });
 var init_icons = __esm({
   "src/icons/index.ts"() {
     __reExport(icons_exports, lucide_react_star__namespace);
     init_Google();
     init_Keboola();
+    init_Microsoft();
   }
 });
 var variants, argoVariants;
@@ -1184,10 +1218,13 @@ var init_ZoomableSvg = __esm({
     MIN_SCALE = 0.5;
     MAX_SCALE = 3;
     ZOOM_STEP = 0.1;
-    ZoomableSvg = ({ html, copyText, className }) => {
+    ZoomableSvg = ({ html, copyText, className, allowForeignObject }) => {
       const safeHtml = react.useMemo(
-        () => DOMPurify__default.default.sanitize(html, { USE_PROFILES: { svg: true, svgFilters: true } }),
-        [html]
+        () => DOMPurify__default.default.sanitize(html, {
+          USE_PROFILES: { svg: true, svgFilters: true },
+          ...allowForeignObject ? { ADD_TAGS: ["foreignObject"] } : {}
+        }),
+        [html, allowForeignObject]
       );
       const containerRef = react.useRef(null);
       const [scale, setScale] = react.useState(1);
@@ -1216,7 +1253,7 @@ var init_ZoomableSvg = __esm({
         };
         el.addEventListener("wheel", onWheel, { passive: false });
         return () => el.removeEventListener("wheel", onWheel);
-      }, []);
+      }, [isFullscreen]);
       const didDragRef = react.useRef(false);
       const handleMouseDown = react.useCallback(
         (e) => {
@@ -1323,14 +1360,18 @@ var init_ZoomableSvg = __esm({
         }
       );
       if (isFullscreen) {
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            role: "presentation",
-            className: "tw-fixed tw-inset-0 tw-z-[1060] tw-bg-muted tw-p-4",
-            onClick: stopPropagation,
-            children: diagramContent
-          }
+        return reactDom.createPortal(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              role: "presentation",
+              "data-testid": "zoomable-svg-fullscreen",
+              className: "tailwindcss-preflight tw-fixed tw-inset-0 tw-z-[1060] tw-bg-muted tw-p-4",
+              onClick: stopPropagation,
+              children: diagramContent
+            }
+          ),
+          document.body
         );
       }
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1354,26 +1395,64 @@ var init_ZoomableSvg2 = __esm({
   }
 });
 
+// src/blocks/MermaidDiagram/svgTransforms.ts
+var HTML_TAG, FOREIGN_OBJECT, ROOT_SVG_TAG, flattenForeignObjectLabels, STYLE_ATTR, makeResponsive;
+var init_svgTransforms = __esm({
+  "src/blocks/MermaidDiagram/svgTransforms.ts"() {
+    HTML_TAG = /<[^>]+>/g;
+    FOREIGN_OBJECT = /(<foreignObject\b[^>]*>)([\s\S]*?)(<\/foreignObject>)/g;
+    ROOT_SVG_TAG = /^(\s*<svg\b)([^>]*)(>)/i;
+    flattenForeignObjectLabels = (svg) => svg.replace(FOREIGN_OBJECT, (_match, open, inner, close) => {
+      const text = inner.replace(HTML_TAG, " ").replace(/\s+/g, " ").trim();
+      return `${open}${text}${close}`;
+    });
+    STYLE_ATTR = /\s+style="([^"]*)"/i;
+    makeResponsive = (svgString) => {
+      const viewBoxMatch = svgString.match(/viewBox="[^"]*\s([\d.]+)\s[\d.]+"/);
+      const vbWidth = viewBoxMatch ? Math.round(Number(viewBoxMatch[1])) : void 0;
+      return svgString.replace(ROOT_SVG_TAG, (_match, open, attrs, close) => {
+        const existingStyle = attrs.match(STYLE_ATTR)?.[1] ?? "";
+        const styleDecls = existingStyle.replace(/max-width:\s*[^;"]*;?\s*/gi, "").replace(/\s+/g, " ").trim().replace(/;$/, "");
+        let nextAttrs = attrs.replace(/\s+width="[^"]*"/i, "").replace(/\s+height="[^"]*"/i, "").replace(STYLE_ATTR, "");
+        nextAttrs += ' width="100%"';
+        const styleParts = [styleDecls, vbWidth ? `max-width: ${vbWidth}px` : ""].filter(Boolean).join("; ");
+        if (styleParts) nextAttrs += ` style="${styleParts}"`;
+        return `${open}${nextAttrs}${close}`;
+      });
+    };
+  }
+});
+
 // src/blocks/MermaidDiagram/MermaidDiagram.tsx
 var MermaidDiagram_exports = {};
 __export(MermaidDiagram_exports, {
   MermaidDiagram: () => MermaidDiagram
 });
-var PRIMARY_FALLBACK_CHANNELS, resolvePrimary, mermaidPromise, getMermaid, stripFontImports, tryFastRender, makeResponsive, RENDER_DEBOUNCE_MS, svgCache, resolveSyncSvg, MermaidDiagram;
+var PRIMARY_FALLBACK_CHANNELS, resolvePrimary, mermaidPromise, registerLucideIconPack, getMermaid, stripFontImports, hasIconSyntax, tryFastRender, RENDER_DEBOUNCE_MS, svgCache, resolveSyncSvg, MermaidDiagram;
 var init_MermaidDiagram = __esm({
   "src/blocks/MermaidDiagram/MermaidDiagram.tsx"() {
     init_Skeleton();
     init_ZoomableSvg2();
     init_utils2();
+    init_svgTransforms();
     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;
+    registerLucideIconPack = (m) => {
+      m.registerIconPacks([
+        {
+          name: "lucide",
+          loader: () => import('@iconify-json/lucide/icons.json').then((mod) => mod.default)
+        }
+      ]);
+    };
     getMermaid = () => {
       if (!mermaidPromise) {
         mermaidPromise = import('mermaid').then((m) => {
+          registerLucideIconPack(m.default);
           m.default.initialize({
             startOnLoad: false,
             securityLevel: "strict",
@@ -1437,7 +1516,9 @@ var init_MermaidDiagram = __esm({
       return mermaidPromise;
     };
     stripFontImports = (svg) => svg.replace(/@import\s+url\([^)]*fonts\.googleapis\.com[^)]*\);?\s*/g, "");
+    hasIconSyntax = (code) => /@\{[^}]*\bicon\s*:/.test(code) || /\b(?:icon|service|group)\b[^\n(]*\(\s*[\w-]+:/.test(code) || /\bfa[bslr]?:fa-/.test(code);
     tryFastRender = (code) => {
+      if (hasIconSyntax(code)) return null;
       try {
         return stripFontImports(
           beautifulMermaid.renderMermaidSVG(code, {
@@ -1447,27 +1528,11 @@ var init_MermaidDiagram = __esm({
             font: "Inter, system-ui, sans-serif"
           })
         );
-      } catch {
+      } catch (err) {
+        console.debug("[MermaidDiagram] fast render unavailable, using async fallback:", err);
         return null;
       }
     };
-    makeResponsive = (svgString) => {
-      const viewBoxMatch = svgString.match(/viewBox="[^"]*\s([\d.]+)\s[\d.]+"/);
-      const vbWidth = viewBoxMatch ? Math.round(Number(viewBoxMatch[1])) : void 0;
-      let result = svgString.replace(/(<svg[^>]*?)\s+width="[^"]*"/i, '$1 width="100%"').replace(/(<svg[^>]*?)\s+height="[^"]*"/i, "$1");
-      if (!vbWidth) return result;
-      const hasStyle = /(<svg[^>]*?)\s+style="([^"]*)"/i.test(result);
-      if (hasStyle) {
-        result = result.replace(/(<svg[^>]*?)\s+style="([^"]*)"/i, (_m, pre, styles) => {
-          const cleaned = styles.replace(/max-width:\s*[^;"]*;?\s*/g, "").trim();
-          const combined = [cleaned, `max-width: ${vbWidth}px`].filter(Boolean).join("; ");
-          return `${pre} style="${combined}"`;
-        });
-      } else {
-        result = result.replace(/<svg/, `<svg style="max-width: ${vbWidth}px"`);
-      }
-      return result;
-    };
     RENDER_DEBOUNCE_MS = 300;
     svgCache = /* @__PURE__ */ new Map();
     resolveSyncSvg = (code) => {
@@ -1508,8 +1573,9 @@ var init_MermaidDiagram = __esm({
             try {
               const result = await mermaidModule.default.render(rendererId, code, container);
               if (renderIdRef.current === currentRenderId && result) {
-                svgCache.set(code, result.svg);
-                setSvg(result.svg);
+                const svgOutput = flattenForeignObjectLabels(result.svg);
+                svgCache.set(code, svgOutput);
+                setSvg(svgOutput);
                 setRenderFailed(false);
               }
             } finally {
@@ -1556,7 +1622,8 @@ var init_MermaidDiagram = __esm({
             copyText: `\`\`\`mermaid
 ${code}
 \`\`\``,
-            className: "tw-my-3"
+            className: "tw-my-3",
+            allowForeignObject: true
           },
           code
         );
@@ -1566,7 +1633,7 @@ ${code}
   }
 });
 
-// src/components/MarkdownEditor/MarkdownEditor.tsx
+// src/blocks/MarkdownEditor/MarkdownEditor.tsx
 init_utils2();
 var ImageRendererContext = react.createContext(null);
 var ImageRendererProvider = ImageRendererContext;
@@ -1662,7 +1729,7 @@ var $isImageNode = (node) => {
   return node instanceof ImageNode;
 };
 
-// src/components/MarkdownEditor/nodes/MermaidNodeComponent.tsx
+// src/blocks/MarkdownEditor/nodes/MermaidNodeComponent.tsx
 init_Skeleton();
 var MermaidDiagram2 = react.lazy(
   () => Promise.resolve().then(() => (init_MermaidDiagram(), MermaidDiagram_exports)).then(
@@ -1745,11 +1812,7 @@ init_context();
 
 // src/components/Toast/ToastAction.tsx
 init_utils2();
-var ToastAction = ({
-  ref,
-  className,
-  ...rest
-}) => /* @__PURE__ */ jsxRuntime.jsx(
+var ToastAction = ({ ref, className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
   "button",
   {
     ...rest,
@@ -1780,12 +1843,7 @@ var ToastAction = ({
 
 // src/components/Toast/ToastDescription.tsx
 init_utils2();
-var ToastDescription = ({
-  ref,
-  className,
-  children,
-  ...rest
-}) => /* @__PURE__ */ jsxRuntime.jsx(
+var ToastDescription = ({ ref, className, children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -1806,11 +1864,7 @@ var ToastDescription = ({
 // src/components/Toast/ToastDismiss.tsx
 init_icons();
 init_utils2();
-var ToastDismiss = ({
-  ref,
-  className,
-  ...rest
-}) => /* @__PURE__ */ jsxRuntime.jsxs(
+var ToastDismiss = ({ ref, className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsxs(
   "button",
   {
     ref,
@@ -1840,13 +1894,7 @@ var ToastDismiss = ({
 
 // src/components/Toast/ToastDuration.tsx
 init_utils2();
-var ToastDuration = ({
-  ref,
-  duration,
-  className,
-  style,
-  ...rest
-}) => /* @__PURE__ */ jsxRuntime.jsx(
+var ToastDuration = ({ ref, duration, className, style, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
   "span",
   {
     ...rest,
@@ -1877,12 +1925,7 @@ var ToastDuration = ({
 
 // src/components/Toast/ToastTitle.tsx
 init_utils2();
-var ToastTitle = ({
-  ref,
-  className,
-  children,
-  ...rest
-}) => /* @__PURE__ */ jsxRuntime.jsx(
+var ToastTitle = ({ ref, className, children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -2067,7 +2110,7 @@ toast.info = (title, options) => toast({
 toast.dismiss = (toastId) => sonner.toast.dismiss(toastId);
 toast.dismissAll = () => sonner.toast.dismiss();
 
-// src/components/MarkdownEditor/plugins/ImagePastePlugin.tsx
+// src/blocks/MarkdownEditor/plugins/ImagePastePlugin.tsx
 var ACCEPTED_IMAGE_TYPES = [
   "image/png",
   "image/jpeg",
@@ -2345,7 +2388,7 @@ var postprocessMarkdown = (markdown) => {
 };
 var unescapeMarkdownText = (markdown) => markdown.replace(/\\([*_`~\\])/g, "$1");
 
-// src/components/MarkdownEditor/plugins/MarkdownSyncPlugin.tsx
+// src/blocks/MarkdownEditor/plugins/MarkdownSyncPlugin.tsx
 var IMPORT_TAG = "markdown-import";
 var MarkdownSyncPlugin = ({
   value,
@@ -2391,13 +2434,9 @@ var MarkdownSyncPlugin = ({
   return null;
 };
 
-// src/components/MarkdownEditor/plugins/ToolbarPlugin.tsx
+// src/blocks/MarkdownEditor/plugins/ToolbarPlugin.tsx
 init_icons();
 
-// src/components/MarkdownEditor/plugins/toolbar/AlignmentDropdown.tsx
-init_icons();
-init_utils2();
-
 // src/components/DropdownMenu/DropdownMenu.tsx
 init_context();
 
@@ -2956,11 +2995,7 @@ var DropdownMenuSubTrigger = ({ className, children, ...props }) => {
 
 // src/components/DropdownMenu/DropdownMenuTrigger.tsx
 init_utils2();
-var DropdownMenuTrigger = ({
-  ref,
-  className,
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(
+var DropdownMenuTrigger = ({ ref, className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   DropdownMenuPrimitive3.Trigger,
   {
     ...props,
@@ -2992,8 +3027,10 @@ DropdownMenu.RadioGroup = DropdownMenuRadioGroup;
 DropdownMenu.RadioItem = DropdownMenuRadioItem;
 DropdownMenu.ItemDescription = DropdownMenuItemDescription;
 
-// src/components/MarkdownEditor/plugins/toolbar/AlignmentDropdown.tsx
+// src/blocks/MarkdownEditor/plugins/toolbar/AlignmentDropdown.tsx
 init_Tooltip2();
+init_icons();
+init_utils2();
 var ALIGNMENT_OPTIONS = [
   { value: "left", label: "Left", icon: icons_exports.AlignLeft },
   { value: "center", label: "Center", icon: icons_exports.AlignCenter },
@@ -3057,11 +3094,9 @@ var AlignmentDropdown = ({
     )) })
   ] });
 };
-
-// src/components/MarkdownEditor/plugins/toolbar/BlockTypeDropdown.tsx
+init_Tooltip2();
 init_icons();
 init_utils2();
-init_Tooltip2();
 var BLOCK_TYPE_META = {
   paragraph: { label: "Normal", icon: icons_exports.Type, selectable: true },
   h1: { label: "Heading 1", icon: icons_exports.Heading1, selectable: true },
@@ -3145,76 +3180,7 @@ var BlockTypeDropdown = ({
   ] });
 };
 
-// src/components/MarkdownEditor/plugins/toolbar/LinkPanel.tsx
-init_icons();
-init_Button2();
-var buttonGroupVariant = classVarianceAuthority.cva(
-  ["tailwindcss-preflight", "tw-inline-flex", "tw-items-center", "tw-group/button-group"],
-  {
-    defaultVariants: {
-      variant: "inline",
-      space: "small"
-    },
-    variants: {
-      variant: {
-        inline: [],
-        block: [
-          "tw-w-full",
-          "tw-flex-col",
-          "sm:tw-flex-row",
-          "[&_a]:tw-flex-1",
-          "[&>button:not([data-icon-only=true])]:tw-flex-1"
-        ]
-      },
-      space: {
-        "extra-small": "tw-gap-1",
-        "little-small": "tw-gap-2",
-        small: "tw-gap-3",
-        medium: "tw-gap-4",
-        large: "tw-gap-6",
-        compact: [
-          "tw-border-collapse",
-          "!tw-gap-0",
-          // ensure that focus visible outline is at the top
-          "[&>*:focus-visible]:!tw-z-10",
-          "[&>*:not(:first-child)]:tw-rounded-l-none",
-          "[&>*:not(:last-child)]:tw-rounded-r-none",
-          "[&>*:not(:last-child)]:tw-border-r-0",
-          "[&>*:not(:first-child)]:tw-border-l-0",
-          // separator
-          "[&>*:not(:first-child)]:before:tw-content",
-          "[&>*:not(:first-child)]:before:tw-absolute",
-          "[&>*:not(:first-child)]:before:tw-left-0",
-          "[&>*:not(:first-child)]:before:tw-h-full",
-          "[&>*:not(:first-child)]:before:tw-w-px",
-          "[&>*:not(:first-child)]:before:tw-bg-black/10"
-        ]
-      }
-    }
-  }
-);
-var ButtonGroup = ({
-  ref,
-  children,
-  space = "small",
-  className,
-  variant,
-  ...rest
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref,
-      ...rest,
-      role: "group",
-      "data-variant": variant,
-      className: buttonGroupVariant({ variant, className, space }),
-      children
-    }
-  );
-};
-
-// src/components/FormGroup/FormGroup.tsx
+// src/blocks/FormGroup/FormGroup.tsx
 init_utils2();
 var FormGroupContext = react.createContext({
   state: "default"
@@ -3274,12 +3240,7 @@ var InputGroupAddon = ({
 // src/components/InputGroup/InputGroupButton.tsx
 init_utils2();
 init_Button2();
-var InputGroupButton = ({
-  ref,
-  className,
-  tabIndex = -1,
-  ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx(
+var InputGroupButton = ({ ref, className, tabIndex = -1, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   Button,
   {
     ...props,
@@ -3293,11 +3254,7 @@ var InputGroupButton = ({
 
 // src/components/InputGroup/InputGroupInput.tsx
 init_utils2();
-var InputGroupInput = ({
-  ref,
-  className,
-  ...inputProps
-}) => /* @__PURE__ */ jsxRuntime.jsx(
+var InputGroupInput = ({ ref, className, ...inputProps }) => /* @__PURE__ */ jsxRuntime.jsx(
   "input",
   {
     ...inputProps,
@@ -3542,8 +3499,15 @@ var inputGroupVariants = classVarianceAuthority.cva(
           "tw-border-input",
           "tw-text-foreground",
           "has-[:is(input,textarea):disabled]:tw-opacity-50",
+          // readonly: keep the themed input surface/border. The base layer's fixed
+          // `neutral-150` (a light grey) is correct for the legacy light chrome but
+          // collides with argo's themed `foreground` text — light-on-light, invisible
+          // in dark mode. Re-pin to the same `muted`/`input` tokens the editable argo
+          // input uses (validated AA), so readonly stays legible in every scheme.
+          "has-[:is(input,textarea)[readonly]]:tw-bg-muted",
+          "has-[:is(input,textarea)[readonly]]:tw-border-input",
           // higher specificity than has-[:is(input,textarea):focus] — prevents focus border on readonly
-          "has-[:is(input,textarea)[readonly]:focus]:tw-border-neutral-150",
+          "has-[:is(input,textarea)[readonly]:focus]:tw-border-input",
           // aria-invalid on the control surfaces the error chrome without a `state` prop — the
           // accessible path (uses the themeable `destructive` status token).
           "has-[:is(input,textarea)[aria-invalid=true]]:tw-border-destructive",
@@ -3624,6 +3588,29 @@ InputGroup.Addon = InputGroupAddon;
 InputGroup.Button = InputGroupButton;
 InputGroup.TextArea = InputGroupTextArea;
 InputGroup.Text = InputGroupText;
+var useControllableState = ({
+  prop,
+  defaultProp,
+  onChange
+}) => {
+  const [uncontrolled, setUncontrolled] = react.useState(defaultProp);
+  const isControlled = prop !== void 0;
+  const value = prop !== void 0 ? prop : uncontrolled;
+  const valueRef = react.useRef(value);
+  valueRef.current = value;
+  const onChangeRef = react.useRef(onChange);
+  onChangeRef.current = onChange;
+  const setValue = react.useCallback(
+    (next) => {
+      const nextValue = typeof next === "function" ? next(valueRef.current) : next;
+      valueRef.current = nextValue;
+      if (!isControlled) setUncontrolled(nextValue);
+      onChangeRef.current?.(nextValue);
+    },
+    [isControlled]
+  );
+  return [value, setValue];
+};
 
 // src/blocks/ColorInput/ColorInput.tsx
 init_icons();
@@ -3720,13 +3707,13 @@ var ColorInput = ({
   ...restInputProps
 }) => {
   const inputRef = react.useRef(null);
-  const [internalValue, setInternalValue] = react.useState(defaultValue ?? "");
+  const [value, setValue] = useControllableState({
+    // A `null` controlled value stays controlled (coerced to ''); `undefined` is uncontrolled.
+    prop: valueProp === null ? "" : valueProp,
+    defaultProp: defaultValue ?? "",
+    onChange: onValueChange
+  });
   const isControlled = valueProp !== void 0;
-  const value = isControlled ? valueProp ?? "" : internalValue;
-  const setValue = (nextValue) => {
-    if (!isControlled) setInternalValue(nextValue);
-    onValueChange?.(nextValue);
-  };
   const canClear = allowClear && !!value && !disabled && !readOnly;
   const swatchColor = coerceHexInputValue(value);
   const isValidSwatch = isCompleteHexColor(swatchColor);
@@ -3829,15 +3816,12 @@ var ColorInput = ({
     }
   );
 };
-var FormGroupColorInput = ({
-  ref,
-  ...props
-}) => {
+var FormGroupColorInput = ({ ref, ...props }) => {
   const { state } = useFormGroupContext();
   return /* @__PURE__ */ jsxRuntime.jsx(ColorInput, { state, ...props, ref });
 };
 
-// src/components/FormGroup/FormGroupError.tsx
+// src/blocks/FormGroup/FormGroupError.tsx
 init_utils2();
 var toMessage = (entry) => typeof entry === "string" ? entry : entry?.message;
 var FormGroupError = ({ children, className, errors, ...rest }) => {
@@ -3924,10 +3908,7 @@ var NumberInput = ({
     }
   );
 };
-var FormGroupNumberInput = ({
-  ref,
-  ...props
-}) => {
+var FormGroupNumberInput = ({ ref, ...props }) => {
   const { state } = useFormGroupContext();
   return /* @__PURE__ */ jsxRuntime.jsx(NumberInput, { ...props, ref, state });
 };
@@ -3939,8 +3920,18 @@ var Textarea = ({
   variant,
   sizing,
   focusVariant,
+  // value handling
+  value: valueProp,
+  defaultValue,
+  onValueChange,
   ...rest
 }) => {
+  const [value, setValue] = useControllableState({
+    // `undefined` stays uncontrolled; any provided value (incl. `null`) is controlled, coerced to ''.
+    prop: valueProp === void 0 ? void 0 : valueProp ?? "",
+    defaultProp: defaultValue ?? "",
+    onChange: onValueChange
+  });
   return /* @__PURE__ */ jsxRuntime.jsx(
     InputGroup,
     {
@@ -3949,7 +3940,7 @@ var Textarea = ({
       focusVariant,
       variant,
       className: containerClassName,
-      children: /* @__PURE__ */ jsxRuntime.jsx(InputGroup.TextArea, { ...rest, ref })
+      children: /* @__PURE__ */ jsxRuntime.jsx(InputGroup.TextArea, { ...rest, ref, value, onValueChange: setValue })
     }
   );
 };
@@ -3957,12 +3948,10 @@ var FormGroupTextarea = (props) => {
   const { state } = useFormGroupContext();
   return /* @__PURE__ */ jsxRuntime.jsx(Textarea, { state, ...props });
 };
-
-// src/components/Input/Input.tsx
 init_icons();
 init_utils2();
 
-// src/components/Input/utils.ts
+// src/blocks/TextInput/utils.ts
 init_utils2();
 var genInputTestId = (prefix = "") => {
   const ps = createPrefixedString(prefix);
@@ -3973,7 +3962,11 @@ var genInputTestId = (prefix = "") => {
     clearButton: ps`clear-button`
   };
 };
-var Input = ({
+var sanitizeTextInputValue = (value) => {
+  if (typeof value === "string" && value.trim() === "") return "";
+  return value;
+};
+var TextInput = ({
   ref: forwardedRef,
   state = "default",
   sizing = "default",
@@ -3995,23 +3988,28 @@ var Input = ({
   focusVariant = "default",
   onChange,
   onBlur,
-  value,
+  onValueChange,
+  onValueBlur,
+  value: valueProp,
   defaultValue,
   ...inputProps
 }) => {
-  const [hasUncontrolledValue, setHasUncontrolledValue] = react.useState(() => !!defaultValue);
-  const hasValue = !!value || hasUncontrolledValue;
   const inputRef = react.useRef(null);
+  const [value, setValue] = useControllableState({
+    // `undefined` stays uncontrolled; any provided value (incl. `null`) is controlled and coerced
+    // to a string. Whitespace-only input collapses to '' via `sanitizeTextInputValue`.
+    prop: valueProp === void 0 ? void 0 : sanitizeTextInputValue(valueProp) ?? "",
+    defaultProp: sanitizeTextInputValue(defaultValue) ?? "",
+    onChange: onValueChange
+  });
   const testId = genInputTestId(prefixTestId);
-  const isClearButtonVisible = hasValue && !disabled && !readOnly || !!onClear;
+  const isClearButtonVisible = !!value && !disabled && !readOnly || !!onClear;
   const handleChange = (event) => {
-    const val = event.target.value;
-    setHasUncontrolledValue(val !== "");
+    setValue(event.target.value);
     onChange?.(event);
   };
   const handleBlur = (event) => {
-    const val = event.target.value;
-    setHasUncontrolledValue(val !== "");
+    onValueBlur?.(event.target.value);
     onBlur?.(event);
   };
   const handleClear = () => {
@@ -4019,11 +4017,8 @@ var Input = ({
     inputRef.current.value = "";
     inputRef.current.focus();
     onClear?.();
-    setHasUncontrolledValue(false);
-    onChange?.(createChangeInputEvent(inputRef.current));
+    handleChange(createChangeInputEvent(inputRef.current));
   };
-  const isControlled = value !== void 0;
-  const valueProp = isControlled ? { value: value ?? "" } : { defaultValue: defaultValue ?? "" };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     InputGroup,
     {
@@ -4039,7 +4034,7 @@ var Input = ({
           InputGroup.Input,
           {
             ...inputProps,
-            ...valueProp,
+            value,
             autoFocus,
             type,
             onChange: handleChange,
@@ -4078,48 +4073,7 @@ var Input = ({
     }
   );
 };
-var sanitizeTextInputValue = (value) => {
-  if (typeof value === "string" && value.trim() === "") return "";
-  return value;
-};
-var TextInput = ({
-  ref,
-  value,
-  defaultValue,
-  type = "text",
-  variant,
-  onValueChange,
-  onChange,
-  onValueBlur,
-  onBlur,
-  ...props
-}) => {
-  const handleChange = (event) => {
-    onValueChange?.(event.target.value);
-    onChange?.(event);
-  };
-  const handleBlur = (event) => {
-    onValueBlur?.(event.target.value);
-    onBlur?.(event);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Input,
-    {
-      ...props,
-      ref,
-      onChange: handleChange,
-      onBlur: handleBlur,
-      type,
-      variant,
-      value: sanitizeTextInputValue(value),
-      defaultValue: sanitizeTextInputValue(defaultValue)
-    }
-  );
-};
-var FormGroupTextInput = ({
-  ref,
-  ...props
-}) => {
+var FormGroupTextInput = ({ ref, ...props }) => {
   const { state } = useFormGroupContext();
   return /* @__PURE__ */ jsxRuntime.jsx(TextInput, { state, ...props, ref });
 };
@@ -4133,6 +4087,74 @@ FormGroup.NumberInput = FormGroupNumberInput;
 FormGroup.ColorInput = FormGroupColorInput;
 FormGroup.Textarea = FormGroupTextarea;
 
+// src/blocks/MarkdownEditor/plugins/toolbar/LinkPanel.tsx
+init_Button2();
+var buttonGroupVariant = classVarianceAuthority.cva(
+  ["tailwindcss-preflight", "tw-inline-flex", "tw-items-center", "tw-group/button-group"],
+  {
+    defaultVariants: {
+      variant: "inline",
+      space: "small"
+    },
+    variants: {
+      variant: {
+        inline: [],
+        block: [
+          "tw-w-full",
+          "tw-flex-col",
+          "sm:tw-flex-row",
+          "[&_a]:tw-flex-1",
+          "[&>button:not([data-icon-only=true])]:tw-flex-1"
+        ]
+      },
+      space: {
+        "extra-small": "tw-gap-1",
+        "little-small": "tw-gap-2",
+        small: "tw-gap-3",
+        medium: "tw-gap-4",
+        large: "tw-gap-6",
+        compact: [
+          "tw-border-collapse",
+          "!tw-gap-0",
+          // ensure that focus visible outline is at the top
+          "[&>*:focus-visible]:!tw-z-10",
+          "[&>*:not(:first-child)]:tw-rounded-l-none",
+          "[&>*:not(:last-child)]:tw-rounded-r-none",
+          "[&>*:not(:last-child)]:tw-border-r-0",
+          "[&>*:not(:first-child)]:tw-border-l-0",
+          // separator
+          "[&>*:not(:first-child)]:before:tw-content",
+          "[&>*:not(:first-child)]:before:tw-absolute",
+          "[&>*:not(:first-child)]:before:tw-left-0",
+          "[&>*:not(:first-child)]:before:tw-h-full",
+          "[&>*:not(:first-child)]:before:tw-w-px",
+          "[&>*:not(:first-child)]:before:tw-bg-black/10"
+        ]
+      }
+    }
+  }
+);
+var ButtonGroup = ({
+  ref,
+  children,
+  space = "small",
+  className,
+  variant,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      ...rest,
+      role: "group",
+      "data-variant": variant,
+      className: buttonGroupVariant({ variant, className, space }),
+      children
+    }
+  );
+};
+
 // src/components/Label/Label.tsx
 init_utils2();
 var Optional = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("span", { ...props, "aria-hidden": true, className: cn("tw-ml-0.5", "tw-text-muted-foreground", className), children: "(optional)" });
@@ -4153,9 +4175,12 @@ var Label2 = ({ className, children, id, htmlFor, ...rest }) => /* @__PURE__ */
 Label2.Optional = Optional;
 Label2.Required = Required;
 
-// src/components/MarkdownEditor/plugins/toolbar/ToolbarButton.tsx
-init_utils2();
+// src/blocks/MarkdownEditor/plugins/toolbar/LinkPanel.tsx
+init_icons();
+
+// src/blocks/MarkdownEditor/plugins/toolbar/ToolbarButton.tsx
 init_Tooltip2();
+init_utils2();
 var ToolbarButton = ({
   active,
   disabled,
@@ -4533,7 +4558,7 @@ var ToolbarPlugin = () => {
   );
 };
 
-// src/components/MarkdownEditor/theme.ts
+// src/blocks/MarkdownEditor/theme.ts
 var editorTheme = {
   link: "tw-cursor-pointer !tw-text-primary tw-underline",
   text: {