@use-kona/editor 0.1.3 → 0.1.4

package/src/examples/getPlugins.tsx

@@ -1,164 +0,0 @@
-import { useStore } from '@nanostores/react';
-import type { Editor } from 'slate';
-import {
-  BasicFormattingPlugin,
-  BreaksPlugin,
-  CodeBlockPlugin,
-  type Commands,
-  CommandsPlugin,
-  DnDPlugin,
-  EmojiPlugin,
-  FloatingMenuPlugin,
-  HeadingsPlugin,
-  HighlightsPlugin,
-  LinksPlugin,
-  ListsPlugin,
-  MenuPlugin,
-  NodeIdPlugin,
-  PlaceholderPlugin,
-  ShortcutsPlugin,
-  TableOfContentsPlugin,
-} from '../plugins';
-import type { CodeElement } from '../plugins/CodeBlockPlugin/types';
-import { Backdrop } from './Backdrop';
-import { CodeBlock } from './CodeBlock';
-import { colors } from './colors';
-import { DragBlock } from './DragBlock';
-import { Emoji } from './Emoji';
-import { EmojiSelector } from './EmojiSelector';
-import { FloatingMenu } from './FloatingMenu';
-import { getCommands } from './getCommands';
-import { getShortcuts } from './getShortcuts';
-import { LinksHint } from './LinksHint';
-import { Menu } from './Menu';
-import { $store } from './store';
-
-export const getPlugins = () => {
-  const floatingMenuPlugin = new FloatingMenuPlugin({
-    ignoreNodes: [CodeBlockPlugin.CODE_ELEMENT],
-    renderMenu: (editor: Editor, commands: Commands) => {
-      return (
-        <FloatingMenu $store={$store} editor={editor} commands={commands} />
-      );
-    },
-    renderBackdrop: (commands) => {
-      const handleClose = () => {
-        commands.onClose();
-        $store.setKey('isFloatingMenuOpen', false);
-      };
-
-      return <Backdrop onClose={handleClose} />;
-    },
-    onShow: () => {
-      $store.setKey('isFloatingMenuOpen', true);
-      return true;
-    },
-    onHide: () => {
-      if ($store.get().floatingMenuMode === 'main') {
-        $store.setKey('isFloatingMenuOpen', false);
-        $store.setKey('url', undefined);
-        return false;
-      }
-
-      return true;
-    },
-  });
-
-  return [
-    new BasicFormattingPlugin(),
-    new EmojiPlugin({
-      ignoreNodes: [CodeBlockPlugin.CODE_LINE_ELEMENT],
-      onSearch: (query) => $store.setKey('emojiSearch', query),
-      renderMenu: ({ insertEmoji }) => {
-        return (
-          <EmojiSelector
-            onConfirm={(...params) => {
-              insertEmoji(...params);
-              $store.setKey('emojiSearch', '');
-            }}
-          />
-        );
-      },
-      renderEmoji: (emoji) => {
-        return <Emoji id={emoji} />;
-      },
-    }),
-    new PlaceholderPlugin({
-      focused: 'Write / to open command menu',
-      unfocused: 'Write / to open command menu',
-      ignoreNodes: [CodeBlockPlugin.CODE_LINE_ELEMENT],
-    }),
-    new NodeIdPlugin({
-      generateId: () => Math.random().toString(36).substring(2, 15),
-    }),
-    new HeadingsPlugin(),
-    new MenuPlugin({
-      renderMenu: ({ editor }) => {
-        return <Menu editor={editor} />;
-      },
-    }),
-    new DnDPlugin({
-      renderBlock: (params) => {
-        return <DragBlock {...params} />;
-      },
-      onDropFiles: () => {},
-      ignoreNodes: [
-        CodeBlockPlugin.CODE_LINE_ELEMENT,
-        ListsPlugin.BULLETED_LIST_ELEMENT,
-        ListsPlugin.NUMBERED_LIST_ELEMENT,
-      ],
-    }),
-    new ShortcutsPlugin({
-      shortcuts: getShortcuts(),
-      ignoreNodes: [
-        CodeBlockPlugin.CODE_ELEMENT,
-        CodeBlockPlugin.CODE_LINE_ELEMENT,
-      ],
-    }),
-    new LinksPlugin({
-      renderHint: (methods) => (
-        <LinksHint floatingMenuPlugin={floatingMenuPlugin} methods={methods} />
-      ),
-    }),
-    new CommandsPlugin({
-      commands: getCommands(),
-      renderMenu: (children) => {
-        return <div>{children}</div>;
-      },
-      ignoreNodes: [CodeBlockPlugin.CODE_LINE_ELEMENT],
-    }),
-    new TableOfContentsPlugin({
-      levels: {
-        [HeadingsPlugin.HeadingLevel1]: 1,
-        [HeadingsPlugin.HeadingLevel2]: 2,
-        [HeadingsPlugin.HeadingLevel3]: 3,
-      },
-    }),
-    floatingMenuPlugin,
-    new HighlightsPlugin({
-      colors,
-    }),
-    new BreaksPlugin({
-      breakNodes: [
-        HeadingsPlugin.HeadingLevel1,
-        HeadingsPlugin.HeadingLevel2,
-        HeadingsPlugin.HeadingLevel3,
-      ],
-    }),
-    new ListsPlugin({}),
-    new CodeBlockPlugin({
-      renderCodeBlock: (value, onChange, params) => {
-        return (
-          <CodeBlock
-            value={value}
-            onChange={onChange}
-            params={{
-              ...params,
-              element: params.element as CodeElement,
-            }}
-          />
-        );
-      },
-    }),
-  ];
-};

package/src/examples/getShortcuts.ts

@@ -1,107 +0,0 @@
-import { Editor, Transforms } from 'slate';
-import { type ChangeMatch, HeadingsPlugin, type Shortcut } from '../plugins';
-
-export const getShortcuts = (): Shortcut[] => {
-  return [
-    {
-      trigger: ' ',
-      before: /\*\*/g,
-      after: /\*\*/g,
-      change(editor: Editor, match) {
-        replaceWithMarkedText(editor, match, 'bold');
-      },
-    },
-    {
-      trigger: ' ',
-      before: /\*/g,
-      after: /\*/g,
-      change(editor: Editor, match) {
-        replaceWithMarkedText(editor, match, 'italic');
-      },
-    },
-    {
-      trigger: ' ',
-      before: /~~/g,
-      after: /~~/g,
-      change(editor: Editor, match) {
-        replaceWithMarkedText(editor, match, 'strikethrough');
-      },
-    },
-    {
-      trigger: ' ',
-      before: /^###/g,
-      change(editor, match) {
-        replaceWithHeading(editor, match, HeadingsPlugin.HeadingLevel3);
-      },
-    },
-    {
-      trigger: ' ',
-      before: /^##/g,
-      change(editor, match) {
-        replaceWithHeading(editor, match, HeadingsPlugin.HeadingLevel2);
-      },
-    },
-    {
-      trigger: ' ',
-      before: /^#/g,
-      change(editor, match) {
-        replaceWithHeading(editor, match, HeadingsPlugin.HeadingLevel1);
-      },
-    },
-  ];
-};
-
-const replaceWithHeading = (
-  editor: Editor,
-  match: ChangeMatch,
-  type: string,
-) => {
-  Editor.withoutNormalizing(editor, () => {
-    const { selection } = editor;
-
-    if (selection) {
-      Transforms.delete(editor, {
-        at: selection.focus,
-        distance: match.before?.[0].length,
-        reverse: true,
-        unit: 'character',
-      });
-
-      Transforms.setNodes(editor, {
-        type,
-      });
-    }
-  });
-};
-
-const replaceWithMarkedText = (
-  editor: Editor,
-  match: ChangeMatch,
-  mark: string,
-) => {
-  Editor.withoutNormalizing(editor, () => {
-    if (!editor.selection) {
-      return;
-    }
-
-    Transforms.delete(editor, {
-      at: editor.selection?.focus,
-      distance: match.text?.length || 0,
-      reverse: true,
-      unit: 'character',
-    });
-    Transforms.insertText(editor, match.cleanText || '');
-    Transforms.setSelection(editor, {
-      anchor: editor.selection?.focus,
-      focus: {
-        path: editor.selection?.focus.path,
-        offset: editor.selection?.focus.offset - (match.cleanText?.length || 0),
-      },
-    });
-    Editor.addMark(editor, mark, true);
-    Transforms.setSelection(editor, {
-      anchor: editor.selection.anchor,
-      focus: editor.selection.anchor,
-    });
-  });
-};

package/src/examples/icons/bold.tsx

@@ -1,20 +0,0 @@
-import { IconProps } from './types';
-
-export const BoldIcon = ({ size }: IconProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={1.5}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className="icon icon-tabler icons-tabler-outline icon-tabler-bold"
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M7 5h6a3.5 3.5 0 0 1 0 7h-6z" />
-    <path d="M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7" />
-  </svg>
-);

package/src/examples/icons/check.tsx

@@ -1,19 +0,0 @@
-import { IconProps } from './types';
-
-export const CheckIcon = ({ size }: IconProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={1.5}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className="icon icon-tabler icons-tabler-outline icon-tabler-check"
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M5 12l5 5l10 -10" />
-  </svg>
-);

package/src/examples/icons/chevronRight.tsx

@@ -1,19 +0,0 @@
-import type { IconProps } from './types';
-
-export const ChevronRightIcon = ({ size }: IconProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="1.25"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    className="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M9 6l6 6l-6 6" />
-  </svg>
-);

package/src/examples/icons/code.tsx

@@ -1,21 +0,0 @@
-import type { IconProps } from './types';
-
-export const CodeIcon = ({ size }: IconProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={1.5}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className="icon icon-tabler icons-tabler-outline icon-tabler-code"
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M7 8l-4 4l4 4" />
-    <path d="M17 8l4 4l-4 4" />
-    <path d="M14 4l-4 16" />
-  </svg>
-);

package/src/examples/icons/color.tsx

@@ -1,23 +0,0 @@
-import { IconProps } from './types';
-
-export const ColorIcon = ({ size }: IconProps) => {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={1.5}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className="icon icon-tabler icons-tabler-outline icon-tabler-paint"
-    >
-      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-      <path d="M5 3m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z" />
-      <path d="M19 6h1a2 2 0 0 1 2 2a5 5 0 0 1 -5 5l-5 0v2" />
-      <path d="M10 15m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z" />
-    </svg>
-  );
-};

package/src/examples/icons/copy.tsx

@@ -1,20 +0,0 @@
-import { IconProps } from './types';
-
-export const CopyIcon = ({ size }: IconProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={1.5}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className="icon icon-tabler icons-tabler-outline icon-tabler-copy"
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z" />
-    <path d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1" />
-  </svg>
-);

package/src/examples/icons/cross.tsx

@@ -1,20 +0,0 @@
-import { IconProps } from './types';
-
-export const CrossIcon = ({ size }: IconProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={1.5}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className="icon icon-tabler icons-tabler-outline icon-tabler-x"
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M18 6l-12 12" />
-    <path d="M6 6l12 12" />
-  </svg>
-);

package/src/examples/icons/drag.tsx

@@ -1,24 +0,0 @@
-import type { IconProps } from './types';
-
-export const DragIcon = ({ size }: IconProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={1.5}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className="icon icon-tabler icons-tabler-outline icon-tabler-grip-vertical"
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M9 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
-    <path d="M9 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
-    <path d="M9 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
-    <path d="M15 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
-    <path d="M15 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
-    <path d="M15 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
-  </svg>
-);

package/src/examples/icons/edit.tsx

@@ -1,21 +0,0 @@
-import { IconProps } from './types';
-
-export const EditIcon = ({ size }: IconProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={1.5}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className="icon icon-tabler icons-tabler-outline icon-tabler-edit"
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" />
-    <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" />
-    <path d="M16 5l3 3" />
-  </svg>
-);

package/src/examples/icons/external.tsx

@@ -1,21 +0,0 @@
-import { IconProps } from './types';
-
-export const ExternalIcon = ({ size }: IconProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={1.5}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className="icon icon-tabler icons-tabler-outline icon-tabler-external-link"
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6" />
-    <path d="M11 13l9 -9" />
-    <path d="M15 4h5v5" />
-  </svg>
-);

package/src/examples/icons/heading1.tsx

@@ -1,26 +0,0 @@
-import { IconProps } from './types';
-
-export const Heading1Icon = ({ size }: IconProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={1.5}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className="icon icon-tabler icons-tabler-outline icon-tabler-h-1"
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M19 18v-8l-2 2" />
-    <path d="M4 6v12" />
-    <path d="M12 6v12" />
-    <path d="M11 18h2" />
-    <path d="M3 18h2" />
-    <path d="M4 12h8" />
-    <path d="M3 6h2" />
-    <path d="M11 6h2" />
-  </svg>
-);

package/src/examples/icons/heading2.tsx

@@ -1,26 +0,0 @@
-import { IconProps } from './types';
-
-export const Heading2Icon = ({ size }: IconProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={1.5}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className="icon icon-tabler icons-tabler-outline icon-tabler-h-2"
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M17 12a2 2 0 1 1 4 0c0 .591 -.417 1.318 -.816 1.858l-3.184 4.143l4 0" />
-    <path d="M4 6v12" />
-    <path d="M12 6v12" />
-    <path d="M11 18h2" />
-    <path d="M3 18h2" />
-    <path d="M4 12h8" />
-    <path d="M3 6h2" />
-    <path d="M11 6h2" />
-  </svg>
-);

package/src/examples/icons/heading3.tsx

@@ -1,27 +0,0 @@
-import { IconProps } from './types';
-
-export const Heading3Icon = ({ size }: IconProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={1.5}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className="icon icon-tabler icons-tabler-outline icon-tabler-h-3"
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M19 14a2 2 0 1 0 -2 -2" />
-    <path d="M17 16a2 2 0 1 0 2 -2" />
-    <path d="M4 6v12" />
-    <path d="M12 6v12" />
-    <path d="M11 18h2" />
-    <path d="M3 18h2" />
-    <path d="M4 12h8" />
-    <path d="M3 6h2" />
-    <path d="M11 6h2" />
-  </svg>
-);

package/src/examples/icons/italic.tsx

@@ -1,21 +0,0 @@
-import { IconProps } from './types';
-
-export const ItalicIcon = ({ size }: IconProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={1.5}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className="icon icon-tabler icons-tabler-outline icon-tabler-italic"
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M11 5l6 0" />
-    <path d="M7 19l6 0" />
-    <path d="M14 5l-4 14" />
-  </svg>
-);

package/src/examples/icons/link.tsx

@@ -1,21 +0,0 @@
-import { IconProps } from './types';
-
-export const LinkIcon = ({ size }: IconProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={1.5}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className="icon icon-tabler icons-tabler-outline icon-tabler-link"
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M9 15l6 -6" />
-    <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" />
-    <path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" />
-  </svg>
-);

package/src/examples/icons/ol.tsx

@@ -1,23 +0,0 @@
-import type { IconProps } from './types';
-
-export const OlIcon = ({ size }: IconProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={1.5}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className="icon icon-tabler icons-tabler-outline icon-tabler-list-numbers"
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M11 6h9" />
-    <path d="M11 12h9" />
-    <path d="M12 18h8" />
-    <path d="M4 16a2 2 0 1 1 4 0c0 .591 -.5 1 -1 1.5l-3 2.5h4" />
-    <path d="M6 10v-6l-2 2" />
-  </svg>
-);

package/src/examples/icons/strikethrough.tsx

@@ -1,20 +0,0 @@
-import { IconProps } from './types';
-
-export const StrikethroughIcon = ({ size }: IconProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={1.5}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className="icon icon-tabler icons-tabler-outline icon-tabler-strikethrough"
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M5 12l14 0" />
-    <path d="M16 6.5a4 2 0 0 0 -4 -1.5h-1a3.5 3.5 0 0 0 0 7h2a3.5 3.5 0 0 1 0 7h-1.5a4 2 0 0 1 -4 -1.5" />
-  </svg>
-);

package/src/examples/icons/text.tsx

@@ -1,18 +0,0 @@
-import type { IconProps } from './types';
-
-export const TextIcon = ({ size }: IconProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={size}
-    height={size}
-    fill="none"
-    stroke="currentColor"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    strokeWidth={1.25}
-    viewBox="0 0 24 24"
-  >
-    <path stroke="none" d="M0 0h24v24H0z" />
-    <path d="M4 6h16M4 12h10M4 18h14" />
-  </svg>
-);