@keboola/design 1.2.0 → 1.3.0

package/dist/markdown-editor.cjs

@@ -6,6 +6,7 @@ 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 reactFontawesome = require('@fortawesome/react-fontawesome');
 require('@awesome.me/kit-be8bcf7e5e/icons');
 var reactSlot = require('@radix-ui/react-slot');
@@ -39,6 +40,7 @@ var utils = require('@lexical/utils');
 var DropdownMenuPrimitive3 = require('@radix-ui/react-dropdown-menu');
 var ScrollAreaPrimitive2 = require('@radix-ui/react-scroll-area');
 var TextareaAutosize = require('react-textarea-autosize');
+var icons = require('@keboola/design/icons');
 var RLabel = require('@radix-ui/react-label');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -459,10 +461,21 @@ var init_Skeleton = __esm({
     Skeleton = ({ height = "md", className, count = 1 }) => {
       const prefixId = react.useId();
       const keys = Array.from({ length: count }, (_, i) => `${prefixId}-${i}`);
-      return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: keys.map((key) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(HEIGHT_CLASS_NAME[height], ANIMATION_CLASS_NAME, className) }, key)) });
+      return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: keys.map((key) => /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "data-skeleton": "true",
+          className: cn(HEIGHT_CLASS_NAME[height], ANIMATION_CLASS_NAME, className)
+        },
+        key
+      )) });
     };
   }
 });
+var init_icons = __esm({
+  "src/icons/index.ts"() {
+  }
+});
 var Icon;
 var init_Icon = __esm({
   "src/components/Icon/Icon.tsx"() {
@@ -668,12 +681,10 @@ var init_styles = __esm({
               "focus-visible:tw-ring-primary/50"
             ],
             secondary: [
-              "tw-bg-secondary",
-              "tw-text-secondary-foreground",
-              "hover:tw-bg-secondary/80",
-              "hover:tw-text-secondary-foreground",
-              "focus:tw-text-secondary-foreground",
-              "focus-visible:tw-border-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"
             ],
             // should be called "destructive" by Figma
@@ -735,6 +746,7 @@ var init_styles = __esm({
 var Button;
 var init_Button = __esm({
   "src/components/Button/Button.tsx"() {
+    init_icons();
     init_utils();
     init_Icon2();
     init_styles();
@@ -744,7 +756,6 @@ var init_Button = __esm({
       disabled = false,
       className,
       type = "button",
-      icon: iconProp,
       isLoading = false,
       asChild = false,
       onClick,
@@ -752,10 +763,10 @@ var init_Button = __esm({
       variant = "primary",
       size = "medium",
       block = false,
+      icon,
       ...buttonProps
     }) => {
       const Comp = asChild ? reactSlot.Root : "button";
-      const icon = isLoading ? "spinner" : iconProp;
       const classNames = argo ? argoVariants({ variant, size, block, className }) : variants({
         size,
         variant,
@@ -778,12 +789,13 @@ var init_Button = __esm({
           disabled,
           "aria-disabled": disabled,
           "data-variant": variant,
-          "data-icon-only": !children,
+          "data-icon-only": String(size).startsWith("icon"),
           type,
           onClick: handleClick,
           className: cn(classNames),
           children: [
-            icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { spin: isLoading, icon }),
+            isLoading && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "tw-size-4 tw-shrink-0 tw-animate-spin" }),
+            !isLoading && icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon }),
             /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slottable, { children })
           ]
         }
@@ -922,7 +934,8 @@ var init_ClipboardButton = __esm({
   "src/blocks/ClipboardButton/ClipboardButton.tsx"() {
     init_Button2();
     init_Clipboard2();
-    DEFAULT_ICON = "copy";
+    init_icons();
+    DEFAULT_ICON = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, {});
     ClipboardButton = ({
       // clipboard props
       text,
@@ -942,7 +955,10 @@ var init_ClipboardButton = __esm({
         tooltipPlacement,
         tooltipVariant,
         text,
-        children: /* @__PURE__ */ jsxRuntime.jsx(Button, { ...rest, icon, variant, disabled: !text, children })
+        children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { ...rest, variant, disabled: !text, children: [
+          icon,
+          children
+        ] })
       }
     );
   }
@@ -958,6 +974,7 @@ var MIN_SCALE, MAX_SCALE, ZOOM_STEP, ZoomableSvg;
 var init_ZoomableSvg = __esm({
   "src/components/ZoomableSvg/ZoomableSvg.tsx"() {
     init_ClipboardButton2();
+    init_icons();
     init_utils();
     init_Button2();
     init_Tooltip2();
@@ -1094,10 +1111,10 @@ var init_ZoomableSvg = __esm({
                         {
                           size: "icon-sm",
                           variant: "outline",
-                          icon: isFullscreen ? "down-left-and-up-right-to-center" : "up-right-and-down-left-from-center",
                           "aria-label": isFullscreen ? "Exit fullscreen" : "Fullscreen",
                           onClick: () => setIsFullscreen((f) => !f),
-                          argo: true
+                          argo: true,
+                          children: isFullscreen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minimize2, { className: "tw-size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { className: "tw-size-4" })
                         }
                       )
                     }
@@ -1538,8 +1555,13 @@ var $isMermaidNode = (node) => {
 init_utils();
 
 // src/components/Toast/ToastRoot.tsx
+init_icons();
 init_utils();
+
+// src/utils/legacyIcon.tsx
 init_Icon2();
+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;
 
 // src/components/Toast/ToastAction.tsx
 init_utils();
@@ -1602,8 +1624,8 @@ var ToastDescription = ({
 );
 
 // src/components/Toast/ToastDismiss.tsx
+init_icons();
 init_utils();
-init_Icon2();
 var ToastDismiss = ({
   ref,
   className,
@@ -1621,7 +1643,7 @@ var ToastDismiss = ({
       "tailwindcss-preflight",
       "[&_svg]:tw-aspect-square",
       "[&_svg]:tw-size-4",
-      "[&_svg]:tw-p-1",
+      "[&_svg]:tw-m-1",
       "tw-text-white",
       "group-data-[variant=default]/toast:[&_svg]:tw-text-popover-foreground",
       className
@@ -1629,7 +1651,7 @@ var ToastDismiss = ({
     type: "button",
     ...rest,
     children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: "times" }),
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-sr-only", children: "Dismiss" })
     ]
   }
@@ -1737,10 +1759,10 @@ var variants2 = classVarianceAuthority.cva(
   }
 );
 var DEFAULT_VARIANT_ICON = {
-  error: "exclamation-triangle",
-  info: "info-circle",
-  success: "check-circle",
-  warning: "exclamation-circle"
+  error: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, {}),
+  info: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, {}),
+  success: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, {}),
+  warning: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, {})
 };
 var ToastRoot = ({
   id,
@@ -1753,8 +1775,8 @@ var ToastRoot = ({
   icon: iconProp
 }) => {
   const icon = (() => {
-    if (loading) return "spinner";
-    if (iconProp) return iconProp;
+    if (loading) return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "tw-animate-spin" });
+    if (iconProp) return renderLegacyIcon(iconProp);
     if (variant === "default" || variant === null) return null;
     return DEFAULT_VARIANT_ICON[variant];
   })();
@@ -1764,20 +1786,24 @@ var ToastRoot = ({
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-variant": variant, className: cn(variants2({ variant })), children: [
     icon && /* @__PURE__ */ jsxRuntime.jsx(
-      Icon,
+      "span",
       {
         "data-slot": "toast-icon",
-        spin: loading,
         className: cn(
-          // styles
+          "tw-inline-flex",
+          "tw-items-center",
+          "tw-justify-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-4",
+          "tw-size-5",
           "tw-shrink-0",
-          "tw-p-1",
+          "[&_svg]:tw-size-5",
           "tw-text-white",
           "group-data-[variant=default]/toast:tw-text-popover-foreground"
         ),
-        icon
+        children: icon
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(ToastTitle, { children: title }),
@@ -1952,12 +1978,23 @@ var ImagePastePlugin = ({ onImageUpload }) => {
   }, [editor]);
   return null;
 };
-var KeyboardPlugin = ({ onSave, onCancel }) => {
+var KeyboardPlugin = ({
+  onSave,
+  onCancel,
+  singleLine,
+  blurOnEscape,
+  skipBlurSaveRef
+}) => {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const onSaveRef = react.useRef(onSave);
   onSaveRef.current = onSave;
   const onCancelRef = react.useRef(onCancel);
   onCancelRef.current = onCancel;
+  const singleLineRef = react.useRef(singleLine);
+  singleLineRef.current = singleLine;
+  const blurOnEscapeRef = react.useRef(blurOnEscape);
+  blurOnEscapeRef.current = blurOnEscape;
+  const skipBlurSaveExternalRef = skipBlurSaveRef;
   react.useEffect(() => {
     return editor.registerCommand(
       lexical.KEY_DOWN_COMMAND,
@@ -1967,15 +2004,22 @@ var KeyboardPlugin = ({ onSave, onCancel }) => {
           onSaveRef.current?.();
           return true;
         }
-        if (event.key === "Escape") {
+        if (event.key === "Enter" && !event.shiftKey && !event.altKey && singleLineRef.current) {
+          event.preventDefault();
+          editor.getRootElement()?.blur();
+          return true;
+        }
+        if (event.key === "Escape" && blurOnEscapeRef.current) {
+          if (skipBlurSaveExternalRef) skipBlurSaveExternalRef.current = true;
           onCancelRef.current?.();
+          editor.getRootElement()?.blur();
           return true;
         }
         return false;
       },
       lexical.COMMAND_PRIORITY_HIGH
     );
-  }, [editor]);
+  }, [editor, skipBlurSaveExternalRef]);
   return null;
 };
 var IMAGE = {
@@ -2058,6 +2102,9 @@ var CUSTOM_TRANSFORMERS = [
   MERMAID,
   ...markdown.TRANSFORMERS
 ];
+var SINGLE_LINE_TRANSFORMERS = CUSTOM_TRANSFORMERS.filter(
+  (t) => t.type === "text-format" || t.type === "text-match"
+);
 var TABLE_FENCE_LANG = "__kbc_table__";
 var isTableLine = (line) => {
   const trimmed = line.trim();
@@ -2107,11 +2154,18 @@ var postprocessMarkdown = (markdown) => {
 
 // src/components/MarkdownEditor/plugins/MarkdownSyncPlugin.tsx
 var IMPORT_TAG = "markdown-import";
-var MarkdownSyncPlugin = ({ value, editable, onChange }) => {
+var MarkdownSyncPlugin = ({
+  value,
+  editable,
+  onChange,
+  transformers = CUSTOM_TRANSFORMERS
+}) => {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const lastExportedRef = react.useRef(value);
   const onChangeRef = react.useRef(onChange);
   onChangeRef.current = onChange;
+  const transformersRef = react.useRef(transformers);
+  transformersRef.current = transformers;
   react.useEffect(() => {
     editor.setEditable(editable);
   }, [editor, editable]);
@@ -2120,7 +2174,7 @@ var MarkdownSyncPlugin = ({ value, editable, onChange }) => {
     lastExportedRef.current = value;
     editor.update(
       () => {
-        markdown.$convertFromMarkdownString(preprocessMarkdown(value), CUSTOM_TRANSFORMERS);
+        markdown.$convertFromMarkdownString(preprocessMarkdown(value), transformersRef.current);
       },
       { tag: IMPORT_TAG }
     );
@@ -2129,7 +2183,7 @@ var MarkdownSyncPlugin = ({ value, editable, onChange }) => {
     return editor.registerUpdateListener(({ tags }) => {
       if (tags.has(IMPORT_TAG)) return;
       editor.getEditorState().read(() => {
-        const raw = markdown.$convertToMarkdownString(CUSTOM_TRANSFORMERS);
+        const raw = markdown.$convertToMarkdownString(transformersRef.current);
         const markdown$1 = postprocessMarkdown(raw);
         if (markdown$1 !== lastExportedRef.current) {
           lastExportedRef.current = markdown$1;
@@ -2142,16 +2196,18 @@ var MarkdownSyncPlugin = ({ value, editable, onChange }) => {
 };
 
 // src/components/MarkdownEditor/plugins/ToolbarPlugin.tsx
-init_Icon2();
+init_icons();
 
 // src/components/MarkdownEditor/plugins/toolbar/AlignmentDropdown.tsx
+init_icons();
 init_utils();
 
 // src/components/DropdownMenu/DropdownMenuCheckboxItem.tsx
+init_icons();
 init_utils();
 
 // src/components/DropdownMenu/DropdownMenuItemIndicator.tsx
-init_Icon2();
+init_icons();
 var variants3 = classVarianceAuthority.cva(
   [
     "tailwindcss-preflight",
@@ -2177,6 +2233,9 @@ var variants3 = classVarianceAuthority.cva(
           "tw-bg-white",
           "[&_svg]: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"
         ],
@@ -2196,6 +2255,9 @@ var variants3 = classVarianceAuthority.cva(
         ],
         switch: [
           "tw-size-5",
+          // Lucide SVGs default to 24×24 — constrain the rendered ToggleRight
+          // to the indicator slot so it doesn't overflow.
+          "[&_svg]: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",
@@ -2211,10 +2273,10 @@ var DropdownMenuItemIndicator = ({
   forceMount: forceMountProp,
   ...rest
 }) => {
-  const icon = (() => {
-    if (variant === "switch") return "toggle-large-on";
-    if (variant === "radio") return "circle";
-    return "check";
+  const IconComp = (() => {
+    if (variant === "switch") return lucideReact.ToggleRight;
+    if (variant === "radio") return lucideReact.Circle;
+    return lucideReact.Check;
   })();
   const forceMount = (() => {
     if (forceMountProp) return true;
@@ -2227,28 +2289,33 @@ var DropdownMenuItemIndicator = ({
       ...rest,
       forceMount,
       className: variants3({ variant, className }),
-      children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon })
+      children: /* @__PURE__ */ jsxRuntime.jsx(IconComp, {})
     }
   );
 };
 
 // src/components/DropdownMenu/ItemIcon.tsx
 init_utils();
-init_Icon2();
-var ItemIcon = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-  Icon,
+var ItemIcon = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "span",
   {
     ...props,
     className: cn(
+      "tw-inline-flex",
+      "tw-items-center",
+      "tw-justify-center",
       "tw-aspect-square",
-      "tw-p-0.5",
-      "tw-size-4",
+      // 20px container fits the 16px Lucide glyph plus 2px breathing room
+      // each side — the previous tw-size-4 + tw-p-0.5 clipped the 16px child.
+      "tw-size-5",
+      "[&_svg]:tw-size-4",
       "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",
       className
-    )
+    ),
+    children
   }
 );
 
@@ -2330,7 +2397,7 @@ var DropdownMenuCheckboxItem = ({
   ...props
 }) => {
   const isAtStart = indicatorAlign === "start";
-  const indicatorEle = isLoading ? /* @__PURE__ */ jsxRuntime.jsx(ItemIcon, { spin: true, icon: "spinner", className: isAtStart ? "" : "tw-ml-auto" }) : /* @__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(lucideReact.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);
@@ -2463,6 +2530,7 @@ var DropdownMenuContent = ({
 };
 
 // src/components/DropdownMenu/DropdownMenuItem.tsx
+init_icons();
 init_utils();
 var DropdownMenuItem = ({
   ref,
@@ -2473,13 +2541,13 @@ var DropdownMenuItem = ({
   onPointerMove,
   children,
   asChild,
-  icon: iconProp,
+  icon,
   iconClassName,
   isLoading = false,
   ...props
 }) => {
   const Comp = asChild ? reactSlot.Root : "div";
-  const icon = isLoading ? "spinner" : iconProp;
+  const adornment = isLoading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "tw-animate-spin" }) : renderLegacyIcon(icon);
   const handleOnSelect = (event) => {
     if (asModalTrigger) event.preventDefault();
     onSelect?.(event);
@@ -2503,7 +2571,7 @@ var DropdownMenuItem = ({
       className: cn(itemVariants, className),
       asChild: true,
       children: /* @__PURE__ */ jsxRuntime.jsxs(Comp, { children: [
-        icon && /* @__PURE__ */ jsxRuntime.jsx(ItemIcon, { spin: isLoading, icon, className: iconClassName }),
+        adornment && /* @__PURE__ */ jsxRuntime.jsx(ItemIcon, { className: iconClassName, children: adornment }),
         /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slottable, { children })
       ] })
     }
@@ -2579,6 +2647,7 @@ var DropdownMenuRadioGroup = ({
 };
 
 // src/components/DropdownMenu/DropdownMenuRadioGroup/DropdownMenuRadioItem.tsx
+init_icons();
 init_utils();
 var DropdownMenuRadioItem = ({
   className,
@@ -2593,7 +2662,7 @@ var DropdownMenuRadioItem = ({
   ...props
 }) => {
   const isAtStart = indicatorAlign === "start";
-  const indicatorEle = isLoading ? /* @__PURE__ */ jsxRuntime.jsx(ItemIcon, { spin: true, icon: "spinner", className: iconClassName }) : /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItemIndicator, { variant: indicator });
+  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 handleSelect = (event) => {
     if (!closeOnSelect) event.preventDefault();
     onSelect?.(event);
@@ -2614,7 +2683,7 @@ var DropdownMenuRadioItem = ({
       ...props,
       children: [
         isAtStart && indicatorEle,
-        icon && /* @__PURE__ */ jsxRuntime.jsx(ItemIcon, { icon, className: iconClassName }),
+        icon && /* @__PURE__ */ jsxRuntime.jsx(ItemIcon, { className: iconClassName, children: renderLegacyIcon(icon) }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-flex tw-min-w-0 tw-flex-1 tw-items-center tw-gap-2", children }),
         !isAtStart && indicatorEle
       ]
@@ -2665,12 +2734,12 @@ var DropdownMenuSubContent = ({ className, ...props }) => {
 };
 
 // src/components/DropdownMenu/DropdownMenuSub/DropdownMenuSubTrigger.tsx
+init_icons();
 init_utils();
-init_Icon2();
 var DropdownMenuSubTrigger = ({ className, children, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuPrimitive3__namespace.SubTrigger, { className: cn(itemVariants, className), ...props, children: [
     children,
-    /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: "chevron-right", className: "tw-ml-auto" })
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "tw-ml-auto tw-size-5" })
   ] });
 };
 
@@ -2713,13 +2782,12 @@ DropdownMenu.RadioItem = DropdownMenuRadioItem;
 DropdownMenu.ItemDescription = DropdownMenuItemDescription;
 
 // src/components/MarkdownEditor/plugins/toolbar/AlignmentDropdown.tsx
-init_Icon2();
 init_Tooltip2();
 var ALIGNMENT_OPTIONS = [
-  { value: "left", label: "Left", icon: ["far", "align-left"] },
-  { value: "center", label: "Center", icon: ["far", "align-center"] },
-  { value: "right", label: "Right", icon: ["far", "align-right"] },
-  { value: "justify", label: "Justify", icon: ["far", "align-justify"] }
+  { 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 }
 ];
 var ALIGNMENT_ICONS = Object.fromEntries(
   ALIGNMENT_OPTIONS.map(({ value, icon }) => [value, icon])
@@ -2745,6 +2813,7 @@ var AlignmentDropdown = ({
       editor.dispatchCommand(lexical.FORMAT_ELEMENT_COMMAND, align);
     });
   };
+  const CurrentAlignmentIcon = ALIGNMENT_ICONS[alignment] ?? lucideReact.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",
@@ -2755,12 +2824,12 @@ var AlignmentDropdown = ({
           "hover:tw-bg-neutral-100"
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: ALIGNMENT_ICONS[alignment] ?? ["far", "align-left"], fixedWidth: true }),
-          /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: ["fas", "caret-down"], className: "tw-text-[8px]" })
+          /* @__PURE__ */ jsxRuntime.jsx(CurrentAlignmentIcon, { className: "tw-size-4" }),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "tw-size-3" })
         ]
       }
     ) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Content, { align: "start", className: "tw-min-w-32", children: ALIGNMENT_OPTIONS.map(({ value, label, icon }) => /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Content, { align: "start", className: "tw-min-w-32", children: ALIGNMENT_OPTIONS.map(({ value, label, icon: IconComp }) => /* @__PURE__ */ jsxRuntime.jsxs(
       DropdownMenu.Item,
       {
         onSelect: () => handleSelect(value),
@@ -2769,7 +2838,7 @@ var AlignmentDropdown = ({
           alignment === value && "tw-bg-secondary-50 tw-text-secondary-500"
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon, fixedWidth: true }),
+          /* @__PURE__ */ jsxRuntime.jsx(IconComp, { className: "tw-size-4" }),
           label
         ]
       },
@@ -2779,18 +2848,18 @@ var AlignmentDropdown = ({
 };
 
 // src/components/MarkdownEditor/plugins/toolbar/BlockTypeDropdown.tsx
+init_icons();
 init_utils();
-init_Icon2();
 init_Tooltip2();
 var BLOCK_TYPE_META = {
-  paragraph: { label: "Normal", icon: ["far", "font"], selectable: true },
-  h1: { label: "Heading 1", icon: ["far", "h1"], selectable: true },
-  h2: { label: "Heading 2", icon: ["far", "h2"], selectable: true },
-  h3: { label: "Heading 3", icon: ["far", "h3"], selectable: true },
-  bullet: { label: "Bullet List", icon: ["far", "list-ul"], selectable: false },
-  number: { label: "Numbered List", icon: ["far", "list-ol"], selectable: false },
-  quote: { label: "Quote", icon: ["far", "block-quote"], selectable: false },
-  code: { label: "Code Block", icon: "square-code", selectable: false }
+  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 }
 };
 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);
@@ -2800,6 +2869,7 @@ var BlockTypeDropdown = ({
 }) => {
   const savedSelectionRef = react.useRef(null);
   const currentMeta = isBlockType(blockType) ? BLOCK_TYPE_META[blockType] : null;
+  const CurrentBlockIcon = currentMeta?.icon ?? lucideReact.Type;
   const handleOpenChange = (open) => {
     if (open) {
       editor.getEditorState().read(() => {
@@ -2840,13 +2910,13 @@ var BlockTypeDropdown = ({
           "hover:tw-bg-neutral-100"
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: currentMeta?.icon ?? ["far", "font"], fixedWidth: true }),
+          /* @__PURE__ */ jsxRuntime.jsx(CurrentBlockIcon, { className: "tw-size-4" }),
           currentMeta?.label ?? "Normal",
-          /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: ["fas", "caret-down"], className: "tw-text-[8px]" })
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "tw-size-3" })
         ]
       }
     ) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Content, { align: "start", className: "tw-min-w-40", children: BLOCK_TYPE_OPTIONS.map(({ value, label, icon }) => /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Content, { align: "start", className: "tw-min-w-40", children: BLOCK_TYPE_OPTIONS.map(({ value, label, icon: IconComp }) => /* @__PURE__ */ jsxRuntime.jsxs(
       DropdownMenu.Item,
       {
         onSelect: () => handleSelect(value),
@@ -2855,7 +2925,7 @@ var BlockTypeDropdown = ({
           blockType === value && "tw-bg-secondary-50 tw-text-secondary-500"
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon, fixedWidth: true }),
+          /* @__PURE__ */ jsxRuntime.jsx(IconComp, { className: "tw-size-4" }),
           label
         ]
       },
@@ -2865,6 +2935,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"],
@@ -3301,6 +3372,7 @@ InputGroup.TextArea = InputGroupTextArea;
 InputGroup.Text = InputGroupText;
 
 // src/blocks/ColorInput/ColorInput.tsx
+init_icons();
 init_utils();
 
 // src/blocks/ColorInput/utils.ts
@@ -3364,9 +3436,9 @@ var ColorPicker = ({ value, disabled, readOnly, ...props }) => {
       {
         onMouseDown: (event) => event.preventDefault(),
         disabled: disabled || readOnly,
-        icon: "eye-dropper",
         onClick: handleOpenPicker,
-        "aria-label": "Pick color"
+        "aria-label": "Pick color",
+        children: /* @__PURE__ */ jsxRuntime.jsx(icons.Pipette, { className: "tw-size-4" })
       }
     )
   ] });
@@ -3482,10 +3554,10 @@ var ColorInput = ({
           canClear && /* @__PURE__ */ jsxRuntime.jsx(
             InputGroup.Button,
             {
-              icon: "xmark",
               onMouseDown: (event) => event.preventDefault(),
               onClick: handleClear,
-              "aria-label": "Clear color"
+              "aria-label": "Clear color",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "tw-size-4" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -3618,6 +3690,7 @@ var FormGroupTextarea = (props) => {
 };
 
 // src/components/Input/Input.tsx
+init_icons();
 init_utils();
 
 // src/components/Input/utils.ts
@@ -3715,10 +3788,11 @@ var Input = ({
           allowClear && isClearButtonVisible && /* @__PURE__ */ jsxRuntime.jsx(
             InputGroup.Button,
             {
-              icon: "xmark",
+              "aria-label": "Clear",
               onMouseDown: (e) => e.preventDefault(),
               onClick: handleClear,
-              "data-testid": testId.clearButton
+              "data-testid": testId.clearButton,
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "tw-size-4" })
             }
           ),
           rightSuffix && /* @__PURE__ */ jsxRuntime.jsx(
@@ -3787,9 +3861,6 @@ FormGroup.NumberInput = FormGroupNumberInput;
 FormGroup.ColorInput = FormGroupColorInput;
 FormGroup.Textarea = FormGroupTextarea;
 
-// src/components/MarkdownEditor/plugins/toolbar/LinkPanel.tsx
-init_Icon2();
-
 // src/components/Label/Label.tsx
 init_utils();
 var Optional = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("tw-text-neutral-400", className), children: "(optional)" });
@@ -3901,12 +3972,12 @@ var LinkPanel = ({ editor, isLink }) => {
         active: true,
         onClick: () => editor.dispatchCommand(link.TOGGLE_LINK_COMMAND, null),
         tooltip: "Remove Link",
-        children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: ["far", "link"] })
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.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(Icon, { icon: ["far", "link"] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ToolbarButton, { active: open, onClick: handleOpen, tooltip: "Insert Link", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link, { className: "tw-size-4" }) }),
     open && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -4070,7 +4141,7 @@ var ToolbarPlugin = () => {
               active: isBold,
               onClick: () => editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, "bold"),
               tooltip: "Bold (Ctrl+B)",
-              children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: ["far", "bold"] })
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bold, { className: "tw-size-4" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -4079,7 +4150,7 @@ var ToolbarPlugin = () => {
               active: isItalic,
               onClick: () => editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, "italic"),
               tooltip: "Italic (Ctrl+I)",
-              children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: ["far", "italic"] })
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Italic, { className: "tw-size-4" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -4088,7 +4159,7 @@ var ToolbarPlugin = () => {
               active: isUnderline,
               onClick: () => editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, "underline"),
               tooltip: "Underline (Ctrl+U)",
-              children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: ["far", "underline"] })
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Underline, { className: "tw-size-4" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -4097,7 +4168,7 @@ var ToolbarPlugin = () => {
               active: isStrikethrough,
               onClick: () => editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, "strikethrough"),
               tooltip: "Strikethrough",
-              children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: ["far", "strikethrough"] })
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Strikethrough, { className: "tw-size-4" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -4106,7 +4177,7 @@ var ToolbarPlugin = () => {
               active: isCode,
               onClick: () => editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, "code"),
               tooltip: "Inline Code",
-              children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: ["far", "code"] })
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code, { className: "tw-size-4" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(ToolbarDivider, {}),
@@ -4124,7 +4195,7 @@ var ToolbarPlugin = () => {
                 }
               },
               tooltip: "Bullet List",
-              children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: ["far", "list-ul"] })
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.List, { className: "tw-size-4" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -4139,7 +4210,7 @@ var ToolbarPlugin = () => {
                 }
               },
               tooltip: "Numbered List",
-              children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: ["far", "list-ol"] })
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListOrdered, { className: "tw-size-4" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(ToolbarDivider, {}),
@@ -4161,7 +4232,7 @@ var ToolbarPlugin = () => {
                 });
               },
               tooltip: "Quote",
-              children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: ["far", "block-quote"] })
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Quote, { className: "tw-size-4" })
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -4180,7 +4251,7 @@ var ToolbarPlugin = () => {
                 });
               },
               tooltip: "Code Block",
-              children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: "square-code" })
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SquareCode, { className: "tw-size-4" })
             }
           )
         ]
@@ -4245,9 +4316,14 @@ var MarkdownEditor = ({
   onImageUpload,
   className,
   imageRenderer,
-  showToolbar = false
+  showToolbar = false,
+  compact = false,
+  saveOnBlur = false,
+  singleLine = false,
+  clampDisplay = false
 }) => {
   const editable = !readOnly && !disabled;
+  const transformers = singleLine ? SINGLE_LINE_TRANSFORMERS : CUSTOM_TRANSFORMERS;
   const [initialConfig] = react.useState(() => ({
     namespace: "MarkdownEditor",
     theme: editorTheme,
@@ -4257,47 +4333,106 @@ var MarkdownEditor = ({
     },
     editable,
     editorState: () => {
-      markdown.$convertFromMarkdownString(preprocessMarkdown(value), CUSTOM_TRANSFORMERS);
+      markdown.$convertFromMarkdownString(preprocessMarkdown(value), transformers);
     }
   }));
-  return /* @__PURE__ */ jsxRuntime.jsx(LexicalComposer.LexicalComposer, { initialConfig, children: /* @__PURE__ */ jsxRuntime.jsx(ImageRendererProvider, { value: imageRenderer ?? null, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("tw-prose", className), children: [
-    showToolbar && editable && /* @__PURE__ */ jsxRuntime.jsx(ToolbarPlugin, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: cn(
-          "tw-relative tw-rounded-md tw-p-2 tw-transition-colors",
-          editable && "tw-cursor-text hover:tw-bg-neutral-50 focus-within:tw-ring-2 focus-within:tw-ring-secondary-500/40"
-        ),
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          LexicalRichTextPlugin.RichTextPlugin,
+  const skipBlurSaveRef = react.useRef(false);
+  const handleBlur = saveOnBlur && onSave ? (event) => {
+    if (skipBlurSaveRef.current) {
+      skipBlurSaveRef.current = false;
+      return;
+    }
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      onSave();
+    }
+  } : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(LexicalComposer.LexicalComposer, { initialConfig, children: /* @__PURE__ */ jsxRuntime.jsx(ImageRendererProvider, { value: imageRenderer ?? null, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        !compact && "tw-prose",
+        // Compact mode drops `tw-prose`, so Lexical's <p> wrappers fall back to the browser
+        // default `margin: 1em 0` — visually huge at heading sizes. Zero them, and use the
+        // adjacent-sibling selector for paragraph spacing so single-paragraph blocks (titles,
+        // short descriptions) stay tight while multi-paragraph blocks still breathe.
+        compact && "[&_p]:tw-m-0 [&_p+p]:tw-mt-2",
+        // Display-state clamp: 2 lines + bottom fade. Drops in focus-within so editing
+        // expands to full height. Fade replaces ellipsis per the pattern spec — the
+        // mask gradient overlays line-clamp's default ellipsis so it's invisible.
+        clampDisplay && "[&:not(:focus-within)]:tw-line-clamp-2 [&:not(:focus-within)]:[mask-image:linear-gradient(to_bottom,black_50%,transparent)]",
+        className
+      ),
+      onBlur: handleBlur,
+      children: [
+        showToolbar && editable && /* @__PURE__ */ jsxRuntime.jsx(ToolbarPlugin, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
           {
-            contentEditable: /* @__PURE__ */ jsxRuntime.jsx(
-              LexicalContentEditable.ContentEditable,
+            className: cn(
+              "tw-relative tw-rounded-md tw-transition-colors",
+              // In compact mode the padding lets the hover bg / focus ring extend past the text,
+              // 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"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              LexicalRichTextPlugin.RichTextPlugin,
               {
-                className: "tw-min-h-[100px] tw-outline-none",
-                "aria-placeholder": placeholder ?? "",
-                placeholder: placeholder ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-pointer-events-none tw-absolute tw-left-2 tw-top-[calc(0.5rem+0.35em)] tw-select-none tw-text-neutral-400", children: placeholder }) : /* @__PURE__ */ jsxRuntime.jsx("div", {})
+                contentEditable: /* @__PURE__ */ jsxRuntime.jsx(
+                  LexicalContentEditable.ContentEditable,
+                  {
+                    className: cn("tw-outline-none", !compact && "tw-min-h-[100px]"),
+                    "aria-placeholder": placeholder ?? "",
+                    placeholder: placeholder ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: cn(
+                          "tw-pointer-events-none tw-absolute tw-select-none tw-text-neutral-400",
+                          compact ? "tw-left-1.5 tw-top-0.5" : "tw-left-2 tw-top-[calc(0.5rem+0.35em)]"
+                        ),
+                        children: placeholder
+                      }
+                    ) : /* @__PURE__ */ jsxRuntime.jsx("div", {})
+                  }
+                ),
+                ErrorBoundary: LexicalErrorBoundary.LexicalErrorBoundary
               }
-            ),
-            ErrorBoundary: LexicalErrorBoundary.LexicalErrorBoundary
+            )
           }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(LexicalHistoryPlugin.HistoryPlugin, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(LexicalLinkPlugin.LinkPlugin, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(LexicalClickableLinkPlugin.ClickableLinkPlugin, { newTab: true }),
-    /* @__PURE__ */ jsxRuntime.jsx(LexicalListPlugin.ListPlugin, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(LexicalCheckListPlugin.CheckListPlugin, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(LexicalHorizontalRulePlugin.HorizontalRulePlugin, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(LexicalTabIndentationPlugin.TabIndentationPlugin, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(LexicalMarkdownShortcutPlugin.MarkdownShortcutPlugin, { transformers: CUSTOM_TRANSFORMERS }),
-    /* @__PURE__ */ jsxRuntime.jsx(MarkdownSyncPlugin, { value, editable, onChange }),
-    /* @__PURE__ */ jsxRuntime.jsx(ImagePastePlugin, { onImageUpload }),
-    /* @__PURE__ */ jsxRuntime.jsx(KeyboardPlugin, { onSave, onCancel }),
-    autoFocus && /* @__PURE__ */ jsxRuntime.jsx(LexicalAutoFocusPlugin.AutoFocusPlugin, {})
-  ] }) }) });
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(LexicalHistoryPlugin.HistoryPlugin, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(LexicalLinkPlugin.LinkPlugin, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(LexicalClickableLinkPlugin.ClickableLinkPlugin, { newTab: true }),
+        !singleLine && /* @__PURE__ */ jsxRuntime.jsx(LexicalListPlugin.ListPlugin, {}),
+        !singleLine && /* @__PURE__ */ jsxRuntime.jsx(LexicalCheckListPlugin.CheckListPlugin, {}),
+        !singleLine && /* @__PURE__ */ jsxRuntime.jsx(LexicalHorizontalRulePlugin.HorizontalRulePlugin, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(LexicalTabIndentationPlugin.TabIndentationPlugin, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(LexicalMarkdownShortcutPlugin.MarkdownShortcutPlugin, { transformers }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          MarkdownSyncPlugin,
+          {
+            value,
+            editable,
+            onChange,
+            transformers
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(ImagePastePlugin, { onImageUpload }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          KeyboardPlugin,
+          {
+            onSave,
+            onCancel,
+            singleLine,
+            blurOnEscape: singleLine || saveOnBlur,
+            skipBlurSaveRef
+          }
+        ),
+        autoFocus && /* @__PURE__ */ jsxRuntime.jsx(LexicalAutoFocusPlugin.AutoFocusPlugin, {})
+      ]
+    }
+  ) }) });
 };
 
 exports.MarkdownEditor = MarkdownEditor;