@keboola/design 1.2.0 → 1.3.0

package/dist/markdown-editor.js

@@ -4,6 +4,7 @@ import { Portal, Content, Root, Trigger } from '@radix-ui/react-tooltip';
 import { cva } from 'class-variance-authority';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { createContext, lazy, Suspense, use, useId, useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { AlignLeft, AlignCenter, AlignRight, AlignJustify, SquareCode, Quote, ListOrdered, List, Heading3, Heading2, Heading1, Type, Bold, Italic, Underline, Strikethrough, Code, Minimize2, Maximize2, ChevronDown, Link, Copy, X, Loader2, AlertCircle, CircleCheck, Info, AlertTriangle, ChevronRight, ToggleRight, Circle, Check } from 'lucide-react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import '@awesome.me/kit-be8bcf7e5e/icons';
 import { Root as Root$2, Slottable } from '@radix-ui/react-slot';
@@ -38,6 +39,7 @@ import * as DropdownMenuPrimitive3 from '@radix-ui/react-dropdown-menu';
 import { Root as Root$1, Group, Trigger as Trigger$1 } from '@radix-ui/react-dropdown-menu';
 import * as ScrollAreaPrimitive2 from '@radix-ui/react-scroll-area';
 import TextareaAutosize from 'react-textarea-autosize';
+import { Pipette } from '@keboola/design/icons';
 import * as RLabel from '@radix-ui/react-label';
 
 var __defProp = Object.defineProperty;
@@ -432,10 +434,21 @@ var init_Skeleton = __esm({
     Skeleton = ({ height = "md", className, count = 1 }) => {
       const prefixId = useId();
       const keys = Array.from({ length: count }, (_, i) => `${prefixId}-${i}`);
-      return /* @__PURE__ */ jsx(Fragment, { children: keys.map((key) => /* @__PURE__ */ jsx("div", { className: cn(HEIGHT_CLASS_NAME[height], ANIMATION_CLASS_NAME, className) }, key)) });
+      return /* @__PURE__ */ jsx(Fragment, { children: keys.map((key) => /* @__PURE__ */ 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"() {
@@ -641,12 +654,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
@@ -708,6 +719,7 @@ var init_styles = __esm({
 var Button;
 var init_Button = __esm({
   "src/components/Button/Button.tsx"() {
+    init_icons();
     init_utils();
     init_Icon2();
     init_styles();
@@ -717,7 +729,6 @@ var init_Button = __esm({
       disabled = false,
       className,
       type = "button",
-      icon: iconProp,
       isLoading = false,
       asChild = false,
       onClick,
@@ -725,10 +736,10 @@ var init_Button = __esm({
       variant = "primary",
       size = "medium",
       block = false,
+      icon,
       ...buttonProps
     }) => {
       const Comp = asChild ? Root$2 : "button";
-      const icon = isLoading ? "spinner" : iconProp;
       const classNames = argo ? argoVariants({ variant, size, block, className }) : variants({
         size,
         variant,
@@ -751,12 +762,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__ */ jsx(Icon, { spin: isLoading, icon }),
+            isLoading && /* @__PURE__ */ jsx(Loader2, { className: "tw-size-4 tw-shrink-0 tw-animate-spin" }),
+            !isLoading && icon && /* @__PURE__ */ jsx(Icon, { icon }),
             /* @__PURE__ */ jsx(Slottable, { children })
           ]
         }
@@ -895,7 +907,8 @@ var init_ClipboardButton = __esm({
   "src/blocks/ClipboardButton/ClipboardButton.tsx"() {
     init_Button2();
     init_Clipboard2();
-    DEFAULT_ICON = "copy";
+    init_icons();
+    DEFAULT_ICON = /* @__PURE__ */ jsx(Copy, {});
     ClipboardButton = ({
       // clipboard props
       text,
@@ -915,7 +928,10 @@ var init_ClipboardButton = __esm({
         tooltipPlacement,
         tooltipVariant,
         text,
-        children: /* @__PURE__ */ jsx(Button, { ...rest, icon, variant, disabled: !text, children })
+        children: /* @__PURE__ */ jsxs(Button, { ...rest, variant, disabled: !text, children: [
+          icon,
+          children
+        ] })
       }
     );
   }
@@ -931,6 +947,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();
@@ -1067,10 +1084,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__ */ jsx(Minimize2, { className: "tw-size-4" }) : /* @__PURE__ */ jsx(Maximize2, { className: "tw-size-4" })
                         }
                       )
                     }
@@ -1511,8 +1528,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__ */ jsx(Icon, { icon: value }) : value;
 
 // src/components/Toast/ToastAction.tsx
 init_utils();
@@ -1575,8 +1597,8 @@ var ToastDescription = ({
 );
 
 // src/components/Toast/ToastDismiss.tsx
+init_icons();
 init_utils();
-init_Icon2();
 var ToastDismiss = ({
   ref,
   className,
@@ -1594,7 +1616,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
@@ -1602,7 +1624,7 @@ var ToastDismiss = ({
     type: "button",
     ...rest,
     children: [
-      /* @__PURE__ */ jsx(Icon, { icon: "times" }),
+      /* @__PURE__ */ jsx(X, {}),
       /* @__PURE__ */ jsx("span", { className: "tw-sr-only", children: "Dismiss" })
     ]
   }
@@ -1710,10 +1732,10 @@ var variants2 = cva(
   }
 );
 var DEFAULT_VARIANT_ICON = {
-  error: "exclamation-triangle",
-  info: "info-circle",
-  success: "check-circle",
-  warning: "exclamation-circle"
+  error: /* @__PURE__ */ jsx(AlertTriangle, {}),
+  info: /* @__PURE__ */ jsx(Info, {}),
+  success: /* @__PURE__ */ jsx(CircleCheck, {}),
+  warning: /* @__PURE__ */ jsx(AlertCircle, {})
 };
 var ToastRoot = ({
   id,
@@ -1726,8 +1748,8 @@ var ToastRoot = ({
   icon: iconProp
 }) => {
   const icon = (() => {
-    if (loading) return "spinner";
-    if (iconProp) return iconProp;
+    if (loading) return /* @__PURE__ */ jsx(Loader2, { className: "tw-animate-spin" });
+    if (iconProp) return renderLegacyIcon(iconProp);
     if (variant === "default" || variant === null) return null;
     return DEFAULT_VARIANT_ICON[variant];
   })();
@@ -1737,20 +1759,24 @@ var ToastRoot = ({
   };
   return /* @__PURE__ */ jsxs("div", { "data-variant": variant, className: cn(variants2({ variant })), children: [
     icon && /* @__PURE__ */ 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__ */ jsx(ToastTitle, { children: title }),
@@ -1925,12 +1951,23 @@ var ImagePastePlugin = ({ onImageUpload }) => {
   }, [editor]);
   return null;
 };
-var KeyboardPlugin = ({ onSave, onCancel }) => {
+var KeyboardPlugin = ({
+  onSave,
+  onCancel,
+  singleLine,
+  blurOnEscape,
+  skipBlurSaveRef
+}) => {
   const [editor] = useLexicalComposerContext();
   const onSaveRef = useRef(onSave);
   onSaveRef.current = onSave;
   const onCancelRef = useRef(onCancel);
   onCancelRef.current = onCancel;
+  const singleLineRef = useRef(singleLine);
+  singleLineRef.current = singleLine;
+  const blurOnEscapeRef = useRef(blurOnEscape);
+  blurOnEscapeRef.current = blurOnEscape;
+  const skipBlurSaveExternalRef = skipBlurSaveRef;
   useEffect(() => {
     return editor.registerCommand(
       KEY_DOWN_COMMAND,
@@ -1940,15 +1977,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;
       },
       COMMAND_PRIORITY_HIGH
     );
-  }, [editor]);
+  }, [editor, skipBlurSaveExternalRef]);
   return null;
 };
 var IMAGE = {
@@ -2031,6 +2075,9 @@ var CUSTOM_TRANSFORMERS = [
   MERMAID,
   ...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();
@@ -2080,11 +2127,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] = useLexicalComposerContext();
   const lastExportedRef = useRef(value);
   const onChangeRef = useRef(onChange);
   onChangeRef.current = onChange;
+  const transformersRef = useRef(transformers);
+  transformersRef.current = transformers;
   useEffect(() => {
     editor.setEditable(editable);
   }, [editor, editable]);
@@ -2093,7 +2147,7 @@ var MarkdownSyncPlugin = ({ value, editable, onChange }) => {
     lastExportedRef.current = value;
     editor.update(
       () => {
-        $convertFromMarkdownString(preprocessMarkdown(value), CUSTOM_TRANSFORMERS);
+        $convertFromMarkdownString(preprocessMarkdown(value), transformersRef.current);
       },
       { tag: IMPORT_TAG }
     );
@@ -2102,7 +2156,7 @@ var MarkdownSyncPlugin = ({ value, editable, onChange }) => {
     return editor.registerUpdateListener(({ tags }) => {
       if (tags.has(IMPORT_TAG)) return;
       editor.getEditorState().read(() => {
-        const raw = $convertToMarkdownString(CUSTOM_TRANSFORMERS);
+        const raw = $convertToMarkdownString(transformersRef.current);
         const markdown = postprocessMarkdown(raw);
         if (markdown !== lastExportedRef.current) {
           lastExportedRef.current = markdown;
@@ -2115,16 +2169,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 = cva(
   [
     "tailwindcss-preflight",
@@ -2150,6 +2206,9 @@ var variants3 = 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"
         ],
@@ -2169,6 +2228,9 @@ var variants3 = 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",
@@ -2184,10 +2246,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 ToggleRight;
+    if (variant === "radio") return Circle;
+    return Check;
   })();
   const forceMount = (() => {
     if (forceMountProp) return true;
@@ -2200,28 +2262,33 @@ var DropdownMenuItemIndicator = ({
       ...rest,
       forceMount,
       className: variants3({ variant, className }),
-      children: /* @__PURE__ */ jsx(Icon, { icon })
+      children: /* @__PURE__ */ jsx(IconComp, {})
     }
   );
 };
 
 // src/components/DropdownMenu/ItemIcon.tsx
 init_utils();
-init_Icon2();
-var ItemIcon = ({ className, ...props }) => /* @__PURE__ */ jsx(
-  Icon,
+var ItemIcon = ({ className, children, ...props }) => /* @__PURE__ */ 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
   }
 );
 
@@ -2303,7 +2370,7 @@ var DropdownMenuCheckboxItem = ({
   ...props
 }) => {
   const isAtStart = indicatorAlign === "start";
-  const indicatorEle = isLoading ? /* @__PURE__ */ jsx(ItemIcon, { spin: true, icon: "spinner", className: isAtStart ? "" : "tw-ml-auto" }) : /* @__PURE__ */ jsx(DropdownMenuItemIndicator, { variant: indicator, className: isAtStart ? "" : "tw-ml-auto" });
+  const indicatorEle = isLoading ? /* @__PURE__ */ jsx(ItemIcon, { className: isAtStart ? "" : "tw-ml-auto", children: /* @__PURE__ */ jsx(Loader2, { className: "tw-animate-spin" }) }) : /* @__PURE__ */ jsx(DropdownMenuItemIndicator, { variant: indicator, className: isAtStart ? "" : "tw-ml-auto" });
   const handleSelect = (event) => {
     if (!closeOnSelect) event.preventDefault();
     onSelect?.(event);
@@ -2436,6 +2503,7 @@ var DropdownMenuContent = ({
 };
 
 // src/components/DropdownMenu/DropdownMenuItem.tsx
+init_icons();
 init_utils();
 var DropdownMenuItem = ({
   ref,
@@ -2446,13 +2514,13 @@ var DropdownMenuItem = ({
   onPointerMove,
   children,
   asChild,
-  icon: iconProp,
+  icon,
   iconClassName,
   isLoading = false,
   ...props
 }) => {
   const Comp = asChild ? Root$2 : "div";
-  const icon = isLoading ? "spinner" : iconProp;
+  const adornment = isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "tw-animate-spin" }) : renderLegacyIcon(icon);
   const handleOnSelect = (event) => {
     if (asModalTrigger) event.preventDefault();
     onSelect?.(event);
@@ -2476,7 +2544,7 @@ var DropdownMenuItem = ({
       className: cn(itemVariants, className),
       asChild: true,
       children: /* @__PURE__ */ jsxs(Comp, { children: [
-        icon && /* @__PURE__ */ jsx(ItemIcon, { spin: isLoading, icon, className: iconClassName }),
+        adornment && /* @__PURE__ */ jsx(ItemIcon, { className: iconClassName, children: adornment }),
         /* @__PURE__ */ jsx(Slottable, { children })
       ] })
     }
@@ -2552,6 +2620,7 @@ var DropdownMenuRadioGroup = ({
 };
 
 // src/components/DropdownMenu/DropdownMenuRadioGroup/DropdownMenuRadioItem.tsx
+init_icons();
 init_utils();
 var DropdownMenuRadioItem = ({
   className,
@@ -2566,7 +2635,7 @@ var DropdownMenuRadioItem = ({
   ...props
 }) => {
   const isAtStart = indicatorAlign === "start";
-  const indicatorEle = isLoading ? /* @__PURE__ */ jsx(ItemIcon, { spin: true, icon: "spinner", className: iconClassName }) : /* @__PURE__ */ jsx(DropdownMenuItemIndicator, { variant: indicator });
+  const indicatorEle = isLoading ? /* @__PURE__ */ jsx(ItemIcon, { className: iconClassName, children: /* @__PURE__ */ jsx(Loader2, { className: "tw-animate-spin" }) }) : /* @__PURE__ */ jsx(DropdownMenuItemIndicator, { variant: indicator });
   const handleSelect = (event) => {
     if (!closeOnSelect) event.preventDefault();
     onSelect?.(event);
@@ -2587,7 +2656,7 @@ var DropdownMenuRadioItem = ({
       ...props,
       children: [
         isAtStart && indicatorEle,
-        icon && /* @__PURE__ */ jsx(ItemIcon, { icon, className: iconClassName }),
+        icon && /* @__PURE__ */ jsx(ItemIcon, { className: iconClassName, children: renderLegacyIcon(icon) }),
         /* @__PURE__ */ jsx("span", { className: "tw-flex tw-min-w-0 tw-flex-1 tw-items-center tw-gap-2", children }),
         !isAtStart && indicatorEle
       ]
@@ -2638,12 +2707,12 @@ var DropdownMenuSubContent = ({ className, ...props }) => {
 };
 
 // src/components/DropdownMenu/DropdownMenuSub/DropdownMenuSubTrigger.tsx
+init_icons();
 init_utils();
-init_Icon2();
 var DropdownMenuSubTrigger = ({ className, children, ...props }) => {
   return /* @__PURE__ */ jsxs(DropdownMenuPrimitive3.SubTrigger, { className: cn(itemVariants, className), ...props, children: [
     children,
-    /* @__PURE__ */ jsx(Icon, { icon: "chevron-right", className: "tw-ml-auto" })
+    /* @__PURE__ */ jsx(ChevronRight, { className: "tw-ml-auto tw-size-5" })
   ] });
 };
 
@@ -2686,13 +2755,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: AlignLeft },
+  { value: "center", label: "Center", icon: AlignCenter },
+  { value: "right", label: "Right", icon: AlignRight },
+  { value: "justify", label: "Justify", icon: AlignJustify }
 ];
 var ALIGNMENT_ICONS = Object.fromEntries(
   ALIGNMENT_OPTIONS.map(({ value, icon }) => [value, icon])
@@ -2718,6 +2786,7 @@ var AlignmentDropdown = ({
       editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, align);
     });
   };
+  const CurrentAlignmentIcon = ALIGNMENT_ICONS[alignment] ?? AlignLeft;
   return /* @__PURE__ */ jsxs(DropdownMenu, { onOpenChange: handleOpenChange, children: [
     /* @__PURE__ */ jsx(Tooltip, { tooltip: "Text alignment", placement: "top", triggerAsChild: true, children: /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       "button",
@@ -2728,12 +2797,12 @@ var AlignmentDropdown = ({
           "hover:tw-bg-neutral-100"
         ),
         children: [
-          /* @__PURE__ */ jsx(Icon, { icon: ALIGNMENT_ICONS[alignment] ?? ["far", "align-left"], fixedWidth: true }),
-          /* @__PURE__ */ jsx(Icon, { icon: ["fas", "caret-down"], className: "tw-text-[8px]" })
+          /* @__PURE__ */ jsx(CurrentAlignmentIcon, { className: "tw-size-4" }),
+          /* @__PURE__ */ jsx(ChevronDown, { className: "tw-size-3" })
         ]
       }
     ) }) }),
-    /* @__PURE__ */ jsx(DropdownMenu.Content, { align: "start", className: "tw-min-w-32", children: ALIGNMENT_OPTIONS.map(({ value, label, icon }) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(DropdownMenu.Content, { align: "start", className: "tw-min-w-32", children: ALIGNMENT_OPTIONS.map(({ value, label, icon: IconComp }) => /* @__PURE__ */ jsxs(
       DropdownMenu.Item,
       {
         onSelect: () => handleSelect(value),
@@ -2742,7 +2811,7 @@ var AlignmentDropdown = ({
           alignment === value && "tw-bg-secondary-50 tw-text-secondary-500"
         ),
         children: [
-          /* @__PURE__ */ jsx(Icon, { icon, fixedWidth: true }),
+          /* @__PURE__ */ jsx(IconComp, { className: "tw-size-4" }),
           label
         ]
       },
@@ -2752,18 +2821,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: Type, selectable: true },
+  h1: { label: "Heading 1", icon: Heading1, selectable: true },
+  h2: { label: "Heading 2", icon: Heading2, selectable: true },
+  h3: { label: "Heading 3", icon: Heading3, selectable: true },
+  bullet: { label: "Bullet List", icon: List, selectable: false },
+  number: { label: "Numbered List", icon: ListOrdered, selectable: false },
+  quote: { label: "Quote", icon: Quote, selectable: false },
+  code: { label: "Code Block", icon: 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);
@@ -2773,6 +2842,7 @@ var BlockTypeDropdown = ({
 }) => {
   const savedSelectionRef = useRef(null);
   const currentMeta = isBlockType(blockType) ? BLOCK_TYPE_META[blockType] : null;
+  const CurrentBlockIcon = currentMeta?.icon ?? Type;
   const handleOpenChange = (open) => {
     if (open) {
       editor.getEditorState().read(() => {
@@ -2813,13 +2883,13 @@ var BlockTypeDropdown = ({
           "hover:tw-bg-neutral-100"
         ),
         children: [
-          /* @__PURE__ */ jsx(Icon, { icon: currentMeta?.icon ?? ["far", "font"], fixedWidth: true }),
+          /* @__PURE__ */ jsx(CurrentBlockIcon, { className: "tw-size-4" }),
           currentMeta?.label ?? "Normal",
-          /* @__PURE__ */ jsx(Icon, { icon: ["fas", "caret-down"], className: "tw-text-[8px]" })
+          /* @__PURE__ */ jsx(ChevronDown, { className: "tw-size-3" })
         ]
       }
     ) }) }),
-    /* @__PURE__ */ jsx(DropdownMenu.Content, { align: "start", className: "tw-min-w-40", children: BLOCK_TYPE_OPTIONS.map(({ value, label, icon }) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(DropdownMenu.Content, { align: "start", className: "tw-min-w-40", children: BLOCK_TYPE_OPTIONS.map(({ value, label, icon: IconComp }) => /* @__PURE__ */ jsxs(
       DropdownMenu.Item,
       {
         onSelect: () => handleSelect(value),
@@ -2828,7 +2898,7 @@ var BlockTypeDropdown = ({
           blockType === value && "tw-bg-secondary-50 tw-text-secondary-500"
         ),
         children: [
-          /* @__PURE__ */ jsx(Icon, { icon, fixedWidth: true }),
+          /* @__PURE__ */ jsx(IconComp, { className: "tw-size-4" }),
           label
         ]
       },
@@ -2838,6 +2908,7 @@ var BlockTypeDropdown = ({
 };
 
 // src/components/MarkdownEditor/plugins/toolbar/LinkPanel.tsx
+init_icons();
 init_Button2();
 var buttonGroupVariant = cva(
   ["tailwindcss-preflight", "tw-inline-flex", "tw-items-center", "tw-group/button-group"],
@@ -3274,6 +3345,7 @@ InputGroup.TextArea = InputGroupTextArea;
 InputGroup.Text = InputGroupText;
 
 // src/blocks/ColorInput/ColorInput.tsx
+init_icons();
 init_utils();
 
 // src/blocks/ColorInput/utils.ts
@@ -3337,9 +3409,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__ */ jsx(Pipette, { className: "tw-size-4" })
       }
     )
   ] });
@@ -3455,10 +3527,10 @@ var ColorInput = ({
           canClear && /* @__PURE__ */ jsx(
             InputGroup.Button,
             {
-              icon: "xmark",
               onMouseDown: (event) => event.preventDefault(),
               onClick: handleClear,
-              "aria-label": "Clear color"
+              "aria-label": "Clear color",
+              children: /* @__PURE__ */ jsx(X, { className: "tw-size-4" })
             }
           ),
           /* @__PURE__ */ jsx(
@@ -3591,6 +3663,7 @@ var FormGroupTextarea = (props) => {
 };
 
 // src/components/Input/Input.tsx
+init_icons();
 init_utils();
 
 // src/components/Input/utils.ts
@@ -3688,10 +3761,11 @@ var Input = ({
           allowClear && isClearButtonVisible && /* @__PURE__ */ jsx(
             InputGroup.Button,
             {
-              icon: "xmark",
+              "aria-label": "Clear",
               onMouseDown: (e) => e.preventDefault(),
               onClick: handleClear,
-              "data-testid": testId.clearButton
+              "data-testid": testId.clearButton,
+              children: /* @__PURE__ */ jsx(X, { className: "tw-size-4" })
             }
           ),
           rightSuffix && /* @__PURE__ */ jsx(
@@ -3760,9 +3834,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__ */ jsx("span", { className: cn("tw-text-neutral-400", className), children: "(optional)" });
@@ -3874,12 +3945,12 @@ var LinkPanel = ({ editor, isLink }) => {
         active: true,
         onClick: () => editor.dispatchCommand(TOGGLE_LINK_COMMAND, null),
         tooltip: "Remove Link",
-        children: /* @__PURE__ */ jsx(Icon, { icon: ["far", "link"] })
+        children: /* @__PURE__ */ jsx(Link, { className: "tw-size-4" })
       }
     );
   }
   return /* @__PURE__ */ jsxs("div", { className: "tw-relative", children: [
-    /* @__PURE__ */ jsx(ToolbarButton, { active: open, onClick: handleOpen, tooltip: "Insert Link", children: /* @__PURE__ */ jsx(Icon, { icon: ["far", "link"] }) }),
+    /* @__PURE__ */ jsx(ToolbarButton, { active: open, onClick: handleOpen, tooltip: "Insert Link", children: /* @__PURE__ */ jsx(Link, { className: "tw-size-4" }) }),
     open && /* @__PURE__ */ jsx(
       "div",
       {
@@ -4043,7 +4114,7 @@ var ToolbarPlugin = () => {
               active: isBold,
               onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold"),
               tooltip: "Bold (Ctrl+B)",
-              children: /* @__PURE__ */ jsx(Icon, { icon: ["far", "bold"] })
+              children: /* @__PURE__ */ jsx(Bold, { className: "tw-size-4" })
             }
           ),
           /* @__PURE__ */ jsx(
@@ -4052,7 +4123,7 @@ var ToolbarPlugin = () => {
               active: isItalic,
               onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic"),
               tooltip: "Italic (Ctrl+I)",
-              children: /* @__PURE__ */ jsx(Icon, { icon: ["far", "italic"] })
+              children: /* @__PURE__ */ jsx(Italic, { className: "tw-size-4" })
             }
           ),
           /* @__PURE__ */ jsx(
@@ -4061,7 +4132,7 @@ var ToolbarPlugin = () => {
               active: isUnderline,
               onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline"),
               tooltip: "Underline (Ctrl+U)",
-              children: /* @__PURE__ */ jsx(Icon, { icon: ["far", "underline"] })
+              children: /* @__PURE__ */ jsx(Underline, { className: "tw-size-4" })
             }
           ),
           /* @__PURE__ */ jsx(
@@ -4070,7 +4141,7 @@ var ToolbarPlugin = () => {
               active: isStrikethrough,
               onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough"),
               tooltip: "Strikethrough",
-              children: /* @__PURE__ */ jsx(Icon, { icon: ["far", "strikethrough"] })
+              children: /* @__PURE__ */ jsx(Strikethrough, { className: "tw-size-4" })
             }
           ),
           /* @__PURE__ */ jsx(
@@ -4079,7 +4150,7 @@ var ToolbarPlugin = () => {
               active: isCode,
               onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code"),
               tooltip: "Inline Code",
-              children: /* @__PURE__ */ jsx(Icon, { icon: ["far", "code"] })
+              children: /* @__PURE__ */ jsx(Code, { className: "tw-size-4" })
             }
           ),
           /* @__PURE__ */ jsx(ToolbarDivider, {}),
@@ -4097,7 +4168,7 @@ var ToolbarPlugin = () => {
                 }
               },
               tooltip: "Bullet List",
-              children: /* @__PURE__ */ jsx(Icon, { icon: ["far", "list-ul"] })
+              children: /* @__PURE__ */ jsx(List, { className: "tw-size-4" })
             }
           ),
           /* @__PURE__ */ jsx(
@@ -4112,7 +4183,7 @@ var ToolbarPlugin = () => {
                 }
               },
               tooltip: "Numbered List",
-              children: /* @__PURE__ */ jsx(Icon, { icon: ["far", "list-ol"] })
+              children: /* @__PURE__ */ jsx(ListOrdered, { className: "tw-size-4" })
             }
           ),
           /* @__PURE__ */ jsx(ToolbarDivider, {}),
@@ -4134,7 +4205,7 @@ var ToolbarPlugin = () => {
                 });
               },
               tooltip: "Quote",
-              children: /* @__PURE__ */ jsx(Icon, { icon: ["far", "block-quote"] })
+              children: /* @__PURE__ */ jsx(Quote, { className: "tw-size-4" })
             }
           ),
           /* @__PURE__ */ jsx(
@@ -4153,7 +4224,7 @@ var ToolbarPlugin = () => {
                 });
               },
               tooltip: "Code Block",
-              children: /* @__PURE__ */ jsx(Icon, { icon: "square-code" })
+              children: /* @__PURE__ */ jsx(SquareCode, { className: "tw-size-4" })
             }
           )
         ]
@@ -4218,9 +4289,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] = useState(() => ({
     namespace: "MarkdownEditor",
     theme: editorTheme,
@@ -4230,47 +4306,106 @@ var MarkdownEditor = ({
     },
     editable,
     editorState: () => {
-      $convertFromMarkdownString(preprocessMarkdown(value), CUSTOM_TRANSFORMERS);
+      $convertFromMarkdownString(preprocessMarkdown(value), transformers);
     }
   }));
-  return /* @__PURE__ */ jsx(LexicalComposer, { initialConfig, children: /* @__PURE__ */ jsx(ImageRendererProvider, { value: imageRenderer ?? null, children: /* @__PURE__ */ jsxs("div", { className: cn("tw-prose", className), children: [
-    showToolbar && editable && /* @__PURE__ */ jsx(ToolbarPlugin, {}),
-    /* @__PURE__ */ 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__ */ jsx(
-          RichTextPlugin,
+  const skipBlurSaveRef = 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__ */ jsx(LexicalComposer, { initialConfig, children: /* @__PURE__ */ jsx(ImageRendererProvider, { value: imageRenderer ?? null, children: /* @__PURE__ */ 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__ */ jsx(ToolbarPlugin, {}),
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            contentEditable: /* @__PURE__ */ jsx(
-              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__ */ jsx(
+              RichTextPlugin,
               {
-                className: "tw-min-h-[100px] tw-outline-none",
-                "aria-placeholder": placeholder ?? "",
-                placeholder: placeholder ? /* @__PURE__ */ 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__ */ jsx("div", {})
+                contentEditable: /* @__PURE__ */ jsx(
+                  ContentEditable,
+                  {
+                    className: cn("tw-outline-none", !compact && "tw-min-h-[100px]"),
+                    "aria-placeholder": placeholder ?? "",
+                    placeholder: placeholder ? /* @__PURE__ */ 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__ */ jsx("div", {})
+                  }
+                ),
+                ErrorBoundary: LexicalErrorBoundary
               }
-            ),
-            ErrorBoundary: LexicalErrorBoundary
+            )
           }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx(HistoryPlugin, {}),
-    /* @__PURE__ */ jsx(LinkPlugin, {}),
-    /* @__PURE__ */ jsx(ClickableLinkPlugin, { newTab: true }),
-    /* @__PURE__ */ jsx(ListPlugin, {}),
-    /* @__PURE__ */ jsx(CheckListPlugin, {}),
-    /* @__PURE__ */ jsx(HorizontalRulePlugin, {}),
-    /* @__PURE__ */ jsx(TabIndentationPlugin, {}),
-    /* @__PURE__ */ jsx(MarkdownShortcutPlugin, { transformers: CUSTOM_TRANSFORMERS }),
-    /* @__PURE__ */ jsx(MarkdownSyncPlugin, { value, editable, onChange }),
-    /* @__PURE__ */ jsx(ImagePastePlugin, { onImageUpload }),
-    /* @__PURE__ */ jsx(KeyboardPlugin, { onSave, onCancel }),
-    autoFocus && /* @__PURE__ */ jsx(AutoFocusPlugin, {})
-  ] }) }) });
+        ),
+        /* @__PURE__ */ jsx(HistoryPlugin, {}),
+        /* @__PURE__ */ jsx(LinkPlugin, {}),
+        /* @__PURE__ */ jsx(ClickableLinkPlugin, { newTab: true }),
+        !singleLine && /* @__PURE__ */ jsx(ListPlugin, {}),
+        !singleLine && /* @__PURE__ */ jsx(CheckListPlugin, {}),
+        !singleLine && /* @__PURE__ */ jsx(HorizontalRulePlugin, {}),
+        /* @__PURE__ */ jsx(TabIndentationPlugin, {}),
+        /* @__PURE__ */ jsx(MarkdownShortcutPlugin, { transformers }),
+        /* @__PURE__ */ jsx(
+          MarkdownSyncPlugin,
+          {
+            value,
+            editable,
+            onChange,
+            transformers
+          }
+        ),
+        /* @__PURE__ */ jsx(ImagePastePlugin, { onImageUpload }),
+        /* @__PURE__ */ jsx(
+          KeyboardPlugin,
+          {
+            onSave,
+            onCancel,
+            singleLine,
+            blurOnEscape: singleLine || saveOnBlur,
+            skipBlurSaveRef
+          }
+        ),
+        autoFocus && /* @__PURE__ */ jsx(AutoFocusPlugin, {})
+      ]
+    }
+  ) }) });
 };
 
 export { MarkdownEditor };