@keboola/design 1.2.0 → 1.3.0

package/src/components/MarkdownEditor/MarkdownEditor.tsx

@@ -1,5 +1,5 @@
-import { useState } from 'react';
-import type { ReactNode } from 'react';
+import { useRef, useState } from 'react';
+import type { FocusEvent, ReactNode } from 'react';
 import { CodeNode } from '@lexical/code';
 import { LinkNode } from '@lexical/link';
 import { ListItemNode, ListNode } from '@lexical/list';
@@ -31,7 +31,7 @@ import { MarkdownSyncPlugin } from './plugins/MarkdownSyncPlugin';
 import { ToolbarPlugin } from './plugins/ToolbarPlugin';
 import { ImageRendererProvider } from './context';
 import { editorTheme } from './theme';
-import { CUSTOM_TRANSFORMERS, preprocessMarkdown } from './transformers';
+import { CUSTOM_TRANSFORMERS, preprocessMarkdown, SINGLE_LINE_TRANSFORMERS } from './transformers';
 
 export type MarkdownEditorProps = {
   /** Markdown string (controlled) */
@@ -51,7 +51,11 @@ export type MarkdownEditorProps = {
   autoFocus?: boolean;
   /** Invoked on Cmd/Ctrl+Enter — typically used to commit a form. */
   onSave?: () => void;
-  /** Invoked on Escape — typically used to discard or close the editor. */
+  /**
+   * Invoked on Escape in inline-edit mode (`singleLine || saveOnBlur`). Per the
+   * inline-editable-text pattern spec, Esc reverts the in-progress edit — callers
+   * reset `value` to the last-committed state inside this handler.
+   */
   onCancel?: () => void;
   /**
    * Async image upload. Resolved URL is embedded as the image src
@@ -61,6 +65,30 @@ export type MarkdownEditorProps = {
   className?: string;
   imageRenderer?: (props: { src: string; alt: string }) => ReactNode;
   showToolbar?: boolean;
+  /**
+   * Strips the prose typography wrapper, removes the min-height, and tightens padding so
+   * the editor visually blends with surrounding text. Use for inline / Linear-style edit
+   * affordances inside headings, list rows, or table cells. Pair with `className` to set
+   * the caller's typography.
+   */
+  compact?: boolean;
+  /**
+   * Calls `onSave` when focus leaves the editor (and is not moved into the toolbar).
+   * `onChange` already keeps the caller's value in sync — `onSave` is the "commit" signal.
+   */
+  saveOnBlur?: boolean;
+  /**
+   * Disables block-level markdown (lists, headings, code blocks, HR) and makes a plain
+   * Enter press trigger `onSave` and blur the editor. Shift+Enter still inserts a soft
+   * line break. Use for editable titles.
+   */
+  singleLine?: boolean;
+  /**
+   * Clamps content to ~2 lines with a bottom fade in the display (not-focused) state;
+   * focus expands the editor to full height (no clamp). Per the inline-editable-text
+   * pattern spec for description-style slots — fade replaces truncation/ellipsis.
+   */
+  clampDisplay?: boolean;
 };
 
 const EDITOR_NODES = [
@@ -88,8 +116,13 @@ export const MarkdownEditor = ({
   className,
   imageRenderer,
   showToolbar = false,
+  compact = false,
+  saveOnBlur = false,
+  singleLine = false,
+  clampDisplay = false,
 }: MarkdownEditorProps) => {
   const editable = !readOnly && !disabled;
+  const transformers = singleLine ? SINGLE_LINE_TRANSFORMERS : CUSTOM_TRANSFORMERS;
 
   // Lexical reads editorState only on first render; later prop changes are applied by MarkdownSyncPlugin.
   const [initialConfig] = useState<InitialConfigType>(() => ({
@@ -101,18 +134,57 @@ export const MarkdownEditor = ({
     },
     editable,
     editorState: () => {
-      $convertFromMarkdownString(preprocessMarkdown(value), CUSTOM_TRANSFORMERS);
+      $convertFromMarkdownString(preprocessMarkdown(value), transformers);
     },
   }));
 
+  // Set to `true` by KeyboardPlugin before it programmatically blurs on Escape so the
+  // blur handler can skip its `onSave` — otherwise blur-after-cancel would commit the
+  // value we just reverted. Reset on read inside handleBlur.
+  const skipBlurSaveRef = useRef(false);
+
+  const handleBlur =
+    saveOnBlur && onSave
+      ? (event: FocusEvent<HTMLDivElement>) => {
+          if (skipBlurSaveRef.current) {
+            skipBlurSaveRef.current = false;
+            return;
+          }
+          // Only fire when focus leaves the editor wrapper entirely (not when moving into the toolbar).
+          if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
+            onSave();
+          }
+        }
+      : undefined;
+
   return (
     <LexicalComposer initialConfig={initialConfig}>
       <ImageRendererProvider value={imageRenderer ?? null}>
-        <div className={cn('tw-prose', className)}>
+        <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}
+        >
           {showToolbar && editable && <ToolbarPlugin />}
           <div
             className={cn(
-              'tw-relative tw-rounded-md tw-p-2 tw-transition-colors',
+              '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',
             )}
@@ -120,11 +192,18 @@ export const MarkdownEditor = ({
             <RichTextPlugin
               contentEditable={
                 <ContentEditable
-                  className="tw-min-h-[100px] tw-outline-none"
+                  className={cn('tw-outline-none', !compact && 'tw-min-h-[100px]')}
                   aria-placeholder={placeholder ?? ''}
                   placeholder={
                     placeholder ? (
-                      <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">
+                      <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)]',
+                        )}
+                      >
                         {placeholder}
                       </div>
                     ) : (
@@ -139,14 +218,25 @@ export const MarkdownEditor = ({
           <HistoryPlugin />
           <LinkPlugin />
           <ClickableLinkPlugin newTab />
-          <ListPlugin />
-          <CheckListPlugin />
-          <HorizontalRulePlugin />
+          {!singleLine && <ListPlugin />}
+          {!singleLine && <CheckListPlugin />}
+          {!singleLine && <HorizontalRulePlugin />}
           <TabIndentationPlugin />
-          <MarkdownShortcutPlugin transformers={CUSTOM_TRANSFORMERS} />
-          <MarkdownSyncPlugin value={value} editable={editable} onChange={onChange} />
+          <MarkdownShortcutPlugin transformers={transformers} />
+          <MarkdownSyncPlugin
+            value={value}
+            editable={editable}
+            onChange={onChange}
+            transformers={transformers}
+          />
           <ImagePastePlugin onImageUpload={onImageUpload} />
-          <KeyboardPlugin onSave={onSave} onCancel={onCancel} />
+          <KeyboardPlugin
+            onSave={onSave}
+            onCancel={onCancel}
+            singleLine={singleLine}
+            blurOnEscape={singleLine || saveOnBlur}
+            skipBlurSaveRef={skipBlurSaveRef}
+          />
           {autoFocus && <AutoFocusPlugin />}
         </div>
       </ImageRendererProvider>

package/src/components/MarkdownEditor/nodes/ImageNode.tsx

@@ -19,11 +19,11 @@ export class ImageNode extends DecoratorNode<ReactNode> {
   __src: string;
   __altText: string;
 
-  static getType(): string {
+  static override getType(): string {
     return 'image';
   }
 
-  static clone(node: ImageNode): ImageNode {
+  static override clone(node: ImageNode): ImageNode {
     return new ImageNode(node.__src, node.__altText, node.__key);
   }
 
@@ -51,7 +51,7 @@ export class ImageNode extends DecoratorNode<ReactNode> {
     writable.__altText = altText;
   }
 
-  createDOM(config: EditorConfig): HTMLElement {
+  override createDOM(config: EditorConfig): HTMLElement {
     const span = document.createElement('span');
     const className = config.theme.image;
     if (typeof className === 'string') {
@@ -60,23 +60,23 @@ export class ImageNode extends DecoratorNode<ReactNode> {
     return span;
   }
 
-  updateDOM(): boolean {
+  override updateDOM(): boolean {
     return false;
   }
 
-  decorate(): ReactNode {
+  override decorate(): ReactNode {
     return <ImageNodeComponent src={this.__src} alt={this.__altText} />;
   }
 
-  isInline(): boolean {
+  override isInline(): boolean {
     return true;
   }
 
-  static importJSON(serializedNode: SerializedImageNode): ImageNode {
+  static override importJSON(serializedNode: SerializedImageNode): ImageNode {
     return $createImageNode(serializedNode.src, serializedNode.altText);
   }
 
-  exportJSON(): SerializedImageNode {
+  override exportJSON(): SerializedImageNode {
     return {
       type: 'image',
       version: 1,
@@ -85,14 +85,14 @@ export class ImageNode extends DecoratorNode<ReactNode> {
     };
   }
 
-  exportDOM(): DOMExportOutput {
+  override exportDOM(): DOMExportOutput {
     const element = document.createElement('img');
     element.setAttribute('src', this.__src);
     element.setAttribute('alt', this.__altText);
     return { element };
   }
 
-  static importDOM(): DOMConversionMap | null {
+  static override importDOM(): DOMConversionMap | null {
     return {
       img: () => ({
         conversion: (domNode: HTMLElement) => {

package/src/components/MarkdownEditor/nodes/MermaidNode.tsx

@@ -10,11 +10,11 @@ type SerializedMermaidNode = Spread<{ code: string }, SerializedLexicalNode>;
 export class MermaidNode extends DecoratorNode<ReactNode> {
   __code: string;
 
-  static getType(): string {
+  static override getType(): string {
     return 'mermaid';
   }
 
-  static clone(node: MermaidNode): MermaidNode {
+  static override clone(node: MermaidNode): MermaidNode {
     return new MermaidNode(node.__code, node.__key);
   }
 
@@ -32,29 +32,29 @@ export class MermaidNode extends DecoratorNode<ReactNode> {
     writable.__code = code;
   }
 
-  createDOM(): HTMLElement {
+  override createDOM(): HTMLElement {
     const div = document.createElement('div');
     div.setAttribute('data-lexical-mermaid', 'true');
     return div;
   }
 
-  updateDOM(): boolean {
+  override updateDOM(): boolean {
     return false;
   }
 
-  decorate(): ReactNode {
+  override decorate(): ReactNode {
     return <MermaidNodeComponent code={this.__code} />;
   }
 
-  isInline(): boolean {
+  override isInline(): boolean {
     return false;
   }
 
-  static importJSON(serializedNode: SerializedMermaidNode): MermaidNode {
+  static override importJSON(serializedNode: SerializedMermaidNode): MermaidNode {
     return $createMermaidNode(serializedNode.code);
   }
 
-  exportJSON(): SerializedMermaidNode {
+  override exportJSON(): SerializedMermaidNode {
     return {
       type: 'mermaid',
       version: 1,

package/src/components/MarkdownEditor/plugins/KeyboardPlugin.tsx

@@ -1,18 +1,54 @@
 import { useEffect, useRef } from 'react';
+import type { RefObject } from 'react';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { COMMAND_PRIORITY_HIGH, KEY_DOWN_COMMAND } from 'lexical';
 
 type KeyboardPluginProps = {
+  /** Invoked directly on Cmd/Ctrl+Enter (explicit commit shortcut, no blur). */
   onSave?: () => void;
+  /**
+   * Invoked on Escape in inline-edit mode. Per the inline-editable-text pattern spec
+   * (evviku/design-system-docs), Escape reverts the in-progress edit — callers reset
+   * `value` to the last-committed state inside this handler.
+   */
   onCancel?: () => void;
+  /**
+   * When true, plain Enter blurs the editor instead of inserting a paragraph break.
+   * For `saveOnBlur` callers this commits via blur; for non-saveOnBlur callers Enter
+   * just exits edit mode. Shift+Enter still inserts a soft line break.
+   */
+  singleLine?: boolean;
+  /**
+   * When true, Escape blurs the editor (exits edit mode). Enable only for inline-edit
+   * patterns (`singleLine` or `saveOnBlur`); in full-toolbar mode Esc stays a no-op so
+   * existing call sites don't lose focus on a stray keypress.
+   */
+  blurOnEscape?: boolean;
+  /**
+   * Set to `true` before the plugin programmatically blurs on Escape so the wrapper's
+   * blur handler can skip its `onSave` — otherwise blur-after-cancel would commit the
+   * value we just reverted. Reset by the consumer on read.
+   */
+  skipBlurSaveRef?: RefObject<boolean>;
 };
 
-export const KeyboardPlugin = ({ onSave, onCancel }: KeyboardPluginProps) => {
+export const KeyboardPlugin = ({
+  onSave,
+  onCancel,
+  singleLine,
+  blurOnEscape,
+  skipBlurSaveRef,
+}: KeyboardPluginProps) => {
   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(
@@ -23,15 +59,23 @@ export const KeyboardPlugin = ({ onSave, onCancel }: KeyboardPluginProps) => {
           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) {
+          // Suppress blur-driven onSave so the post-blur save doesn't commit the value we just reverted.
+          if (skipBlurSaveExternalRef) skipBlurSaveExternalRef.current = true;
           onCancelRef.current?.();
+          editor.getRootElement()?.blur();
           return true;
         }
         return false;
       },
       COMMAND_PRIORITY_HIGH,
     );
-  }, [editor]);
+  }, [editor, skipBlurSaveExternalRef]);
 
   return null;
 };

package/src/components/MarkdownEditor/plugins/MarkdownSyncPlugin.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef } from 'react';
+import type { Transformer } from '@lexical/markdown';
 import { $convertFromMarkdownString, $convertToMarkdownString } from '@lexical/markdown';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 
@@ -10,13 +11,21 @@ type MarkdownSyncPluginProps = {
   value: string;
   editable: boolean;
   onChange?: (markdown: string) => void;
+  transformers?: Transformer[];
 };
 
-export const MarkdownSyncPlugin = ({ value, editable, onChange }: MarkdownSyncPluginProps) => {
+export const MarkdownSyncPlugin = ({
+  value,
+  editable,
+  onChange,
+  transformers = CUSTOM_TRANSFORMERS,
+}: MarkdownSyncPluginProps) => {
   const [editor] = useLexicalComposerContext();
   const lastExportedRef = useRef(value);
   const onChangeRef = useRef(onChange);
   onChangeRef.current = onChange;
+  const transformersRef = useRef(transformers);
+  transformersRef.current = transformers;
 
   // Sync editable state — only when it actually changes
   useEffect(() => {
@@ -30,7 +39,7 @@ export const MarkdownSyncPlugin = ({ value, editable, onChange }: MarkdownSyncPl
 
     editor.update(
       () => {
-        $convertFromMarkdownString(preprocessMarkdown(value), CUSTOM_TRANSFORMERS);
+        $convertFromMarkdownString(preprocessMarkdown(value), transformersRef.current);
       },
       { tag: IMPORT_TAG },
     );
@@ -42,7 +51,7 @@ export const MarkdownSyncPlugin = ({ value, editable, onChange }: MarkdownSyncPl
       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;

package/src/components/MarkdownEditor/plugins/ToolbarPlugin.tsx

@@ -19,7 +19,17 @@ import {
   FORMAT_TEXT_COMMAND,
 } from 'lexical';
 
-import { Icon } from '../../Icon';
+import {
+  Bold,
+  Code,
+  Italic,
+  List as ListIcon,
+  ListOrdered,
+  Quote,
+  SquareCode,
+  Strikethrough,
+  Underline,
+} from '../../../icons';
 
 import { AlignmentDropdown } from './toolbar/AlignmentDropdown';
 import { BlockTypeDropdown } from './toolbar/BlockTypeDropdown';
@@ -164,35 +174,35 @@ export const ToolbarPlugin = () => {
         onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')}
         tooltip="Bold (Ctrl+B)"
       >
-        <Icon icon={['far', 'bold']} />
+        <Bold className="tw-size-4" />
       </ToolbarButton>
       <ToolbarButton
         active={isItalic}
         onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic')}
         tooltip="Italic (Ctrl+I)"
       >
-        <Icon icon={['far', 'italic']} />
+        <Italic className="tw-size-4" />
       </ToolbarButton>
       <ToolbarButton
         active={isUnderline}
         onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline')}
         tooltip="Underline (Ctrl+U)"
       >
-        <Icon icon={['far', 'underline']} />
+        <Underline className="tw-size-4" />
       </ToolbarButton>
       <ToolbarButton
         active={isStrikethrough}
         onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough')}
         tooltip="Strikethrough"
       >
-        <Icon icon={['far', 'strikethrough']} />
+        <Strikethrough className="tw-size-4" />
       </ToolbarButton>
       <ToolbarButton
         active={isCode}
         onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code')}
         tooltip="Inline Code"
       >
-        <Icon icon={['far', 'code']} />
+        <Code className="tw-size-4" />
       </ToolbarButton>
 
       <ToolbarDivider />
@@ -212,7 +222,7 @@ export const ToolbarPlugin = () => {
         }}
         tooltip="Bullet List"
       >
-        <Icon icon={['far', 'list-ul']} />
+        <ListIcon className="tw-size-4" />
       </ToolbarButton>
       <ToolbarButton
         active={blockType === 'number'}
@@ -225,7 +235,7 @@ export const ToolbarPlugin = () => {
         }}
         tooltip="Numbered List"
       >
-        <Icon icon={['far', 'list-ol']} />
+        <ListOrdered className="tw-size-4" />
       </ToolbarButton>
 
       <ToolbarDivider />
@@ -249,7 +259,7 @@ export const ToolbarPlugin = () => {
         }}
         tooltip="Quote"
       >
-        <Icon icon={['far', 'block-quote']} />
+        <Quote className="tw-size-4" />
       </ToolbarButton>
       <ToolbarButton
         active={blockType === 'code'}
@@ -266,7 +276,7 @@ export const ToolbarPlugin = () => {
         }}
         tooltip="Code Block"
       >
-        <Icon icon="square-code" />
+        <SquareCode className="tw-size-4" />
       </ToolbarButton>
     </div>,
     document.body,

package/src/components/MarkdownEditor/plugins/toolbar/AlignmentDropdown.tsx

@@ -1,5 +1,4 @@
 import { useRef } from 'react';
-import type { ComponentProps } from 'react';
 import {
   $getSelection,
   $setSelection,
@@ -9,21 +8,26 @@ import {
   type LexicalEditor,
 } from 'lexical';
 
+import {
+  AlignCenter,
+  AlignJustify,
+  AlignLeft,
+  AlignRight,
+  ChevronDown,
+  type LucideIcon,
+} from '../../../../icons';
 import { cn } from '../../../../utils';
 import { DropdownMenu } from '../../../DropdownMenu';
-import { Icon } from '../../../Icon';
 import { Tooltip } from '../../../Tooltip';
 
-type IconProp = ComponentProps<typeof Icon>['icon'];
-
-const ALIGNMENT_OPTIONS: { value: ElementFormatType; label: string; icon: IconProp }[] = [
-  { 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'] },
+const ALIGNMENT_OPTIONS: { value: ElementFormatType; label: string; icon: LucideIcon }[] = [
+  { value: 'left', label: 'Left', icon: AlignLeft },
+  { value: 'center', label: 'Center', icon: AlignCenter },
+  { value: 'right', label: 'Right', icon: AlignRight },
+  { value: 'justify', label: 'Justify', icon: AlignJustify },
 ];
 
-const ALIGNMENT_ICONS: Record<string, IconProp> = Object.fromEntries(
+const ALIGNMENT_ICONS: Record<string, LucideIcon> = Object.fromEntries(
   ALIGNMENT_OPTIONS.map(({ value, icon }) => [value, icon]),
 );
 
@@ -57,6 +61,8 @@ export const AlignmentDropdown = ({
     });
   };
 
+  const CurrentAlignmentIcon = ALIGNMENT_ICONS[alignment] ?? AlignLeft;
+
   return (
     <DropdownMenu onOpenChange={handleOpenChange}>
       <Tooltip tooltip="Text alignment" placement="top" triggerAsChild>
@@ -68,13 +74,13 @@ export const AlignmentDropdown = ({
               'hover:tw-bg-neutral-100',
             )}
           >
-            <Icon icon={ALIGNMENT_ICONS[alignment] ?? ['far', 'align-left']} fixedWidth />
-            <Icon icon={['fas', 'caret-down']} className="tw-text-[8px]" />
+            <CurrentAlignmentIcon className="tw-size-4" />
+            <ChevronDown className="tw-size-3" />
           </button>
         </DropdownMenu.Trigger>
       </Tooltip>
       <DropdownMenu.Content align="start" className="tw-min-w-32">
-        {ALIGNMENT_OPTIONS.map(({ value, label, icon }) => (
+        {ALIGNMENT_OPTIONS.map(({ value, label, icon: IconComp }) => (
           <DropdownMenu.Item
             key={value}
             onSelect={() => handleSelect(value)}
@@ -83,7 +89,7 @@ export const AlignmentDropdown = ({
               alignment === value && 'tw-bg-secondary-50 tw-text-secondary-500',
             )}
           >
-            <Icon icon={icon} fixedWidth />
+            <IconComp className="tw-size-4" />
             {label}
           </DropdownMenu.Item>
         ))}