zen/core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

refactor(BlockEditor): replace emoji icons with react icon components and add free color picker support

Browse Source 
- update blockRegistry to accept ReactNode icons instead of emoji strings
- replace emoji icons in all built-in block types with icon components from shared icons
- add `isHexColor` and `collectUsedColors` helpers to inline/types.js
- extend `color` and `highlight` marks to accept hex color strings in addition to palette keys
- pass `usedColors` (collected from document) to InlineToolbar
- update InlineToolbar color popover to show used colors and a free color input
- add new icons to shared icons index
- update README to reflect icon, color, and toolbar popover changes
This commit is contained in:
Hyko
2026-04-25 18:52:59 -04:00
parent 3f93503996
commit 219fb36da1
17 changed files with 311 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/components/BlockEditor/BlockEditor.client.js
+6
View File
@@ -14,6 +14,7 @@ import {
concatInline,
toggleMark,
marksInRange,
collectUsedColors,
} from './inline/types.js';
registerBuiltInBlocks();
@@ -443,6 +444,10 @@ export default function BlockEditor({
// { blockId, start, end, rect, marks }
const toolbarPinnedRef = useRef(false);
// Couleurs déjà utilisées dans le document (hors palette par défaut).
// Présentées comme choix rapides dans le popover de couleur du toolbar.
const usedColors = useMemo(() => collectUsedColors(blocks), [blocks]);
const updateToolbar = useCallback(() => {
if (disabled) {
setToolbar(null);
@@ -841,6 +846,7 @@ export default function BlockEditor({
<InlineToolbar
rect={toolbar.rect}
activeMarks={marks}
usedColors={usedColors}
onToggleMark={applyToggleMark}
onPinChange={(p) => { toolbarPinnedRef.current = p; }}
/>
src/shared/components/BlockEditor/README.md
+12 -7
View File
@@ -60,11 +60,13 @@ Chaque nœud porte optionnellement des **marks** (formatage).
| `strike` | — | `<s>` |
| `code` | — | `<code>` (monospace, fond gris) |
| `link` | `href: string` | `<a href>` (target="_blank") |
| `color` | `color: 'blue' \| 'green' \| 'amber' \| 'red'` | couleur du texte |
| `highlight` | `color: 'blue' \| 'green' \| 'amber' \| 'red'` | surlignage de fond |
| `color` | `color: <key> \| '#rrggbb'` | couleur du texte |
| `highlight` | `color: <key> \| '#rrggbb'` | surlignage de fond |
Les couleurs sont des **clés de palette** (pas de hex libre) — résolues vers
les classes Tailwind du DESIGN system. Voir `inline/types.js:INLINE_COLORS`.
Le champ `color` accepte **soit** une clé de palette (`blue`, `green`, `amber`,
`red`) — résolue vers les classes Tailwind du DESIGN system —, **soit** une
string hex `#rrggbb` choisie par l'utilisateur, appliquée via `style` inline.
Voir `inline/types.js:INLINE_COLORS` et `isHexColor`.
Le contenu vide est `[]` (jamais `[{type:'text', text:''}]`).
@@ -75,6 +77,7 @@ import {
inlineLength, inlineToPlainText, inlineFromText,
sliceInline, concatInline, applyMark, toggleMark,
marksAtOffset, marksInRange, INLINE_COLORS,
isHexColor, collectUsedColors,
} from '@zen/core/shared/components/BlockEditor';
```
@@ -118,8 +121,10 @@ Quand une sélection non-vide existe dans un bloc, un toolbar flottant
apparaît au-dessus. Il propose :
- **B I U S `</>`** — marks simples (toggle)
- **A** — couleur du texte (popover de la palette)
- **◐** — surlignage (popover)
- **A** — couleur du texte (popover : palette par défaut + couleurs déjà
utilisées dans le document + bouton `+` pour une couleur libre via
`<input type="color">`)
- **◐** — surlignage (même structure de popover)
- **🔗** — lien (popover avec input URL ; ✕ pour retirer)
L'état actif est calculé à partir des marks **communes à toute la plage**
@@ -158,7 +163,7 @@ import { registerBlock, newBlockId } from '@zen/core/shared/components/BlockEdit
registerBlock({
type: 'kpi',
label: 'KPI',
icon: '📊',
icon: <ChartIcon width={18} height={18} />,
keywords: ['kpi', 'metric', 'stat'],
isText: false,
create: () => ({ id: newBlockId(), type: 'kpi', value: 0 }),
src/shared/components/BlockEditor/blockRegistry.js
+1 -1
View File
@@ -6,7 +6,7 @@
// {
// type: string, // id unique (ex: 'paragraph', 'my_custom')
// label: string, // libellé affiché dans le slash menu
// icon: string, // glyphe court (emoji ou caractère)
// icon: ReactNode, // élément React rendu dans le slash menu (typiquement une icône de `@zen/core/shared/icons`)
// keywords: string[], // termes de recherche pour le slash menu
// shortcut?: string, // préfixe markdown qui convertit (ex: '# ', '- ')
// shortcutTransform?: (block, match) => block, // optionnel : transforme un bloc existant
src/shared/components/BlockEditor/blockTypes/BulletList.js
+2 -1
View File
@@ -1,9 +1,10 @@
import { LeftToRightListBulletIcon } from '@zen/core/shared/icons';
import { newBlockId } from '../utils/ids.js';
const BulletItem = {
type: 'bullet_item',
label: 'Liste à puces',
icon: '•',
icon: <LeftToRightListBulletIcon width={18} height={18} />,
keywords: ['liste', 'list', 'puce', 'bullet', 'ul'],
shortcut: '- ',
isText: true,
src/shared/components/BlockEditor/blockTypes/Checklist.js
+2 -2
View File
@@ -1,4 +1,4 @@
import { Tick02Icon } from '@zen/core/shared/icons';
import { Tick02Icon, CheckListIcon } from '@zen/core/shared/icons';
import { newBlockId } from '../utils/ids.js';
// Préfixe : case à cocher cliquable. `onPatch({ checked })` mute l'état du
@@ -33,7 +33,7 @@ function Checkbox({ block, onPatch, disabled }) {
const Checklist = {
type: 'checklist',
label: 'Case à cocher',
icon: '☐',
icon: <CheckListIcon width={18} height={18} />,
keywords: ['checklist', 'todo', 'tache', 'tâche', 'case', 'cocher', 'check'],
shortcut: '[] ',
isText: true,
src/shared/components/BlockEditor/blockTypes/Code.js
+2 -1
View File
@@ -1,9 +1,10 @@
import { SourceCodeIcon } from '@zen/core/shared/icons';
import { newBlockId } from '../utils/ids.js';
const Code = {
type: 'code',
label: 'Bloc de code',
icon: '</>',
icon: <SourceCodeIcon width={18} height={18} />,
keywords: ['code', 'pre', 'snippet'],
shortcut: '``` ',
isText: true,
src/shared/components/BlockEditor/blockTypes/Divider.js
+2 -1
View File
@@ -1,3 +1,4 @@
import { SeparatorHorizontalIcon } from '@zen/core/shared/icons';
import { newBlockId } from '../utils/ids.js';
function DividerComponent() {
@@ -11,7 +12,7 @@ function DividerComponent() {
const Divider = {
type: 'divider',
label: 'Séparateur',
icon: '—',
icon: <SeparatorHorizontalIcon width={18} height={18} />,
keywords: ['separateur', 'divider', 'hr', 'ligne', 'line'],
shortcut: '---',
isText: false,
src/shared/components/BlockEditor/blockTypes/Heading.js
+19 -1
View File
@@ -1,5 +1,22 @@
import {
Heading01Icon,
Heading02Icon,
Heading03Icon,
Heading04Icon,
Heading05Icon,
Heading06Icon,
} from '@zen/core/shared/icons';
import { newBlockId } from '../utils/ids.js';
const HEADING_ICONS = {
1: Heading01Icon,
2: Heading02Icon,
3: Heading03Icon,
4: Heading04Icon,
5: Heading05Icon,
6: Heading06Icon,
};
const HEADING_STYLES = {
1: 'text-3xl font-bold leading-tight text-neutral-900 dark:text-white',
2: 'text-2xl font-bold leading-tight text-neutral-900 dark:text-white',
@@ -10,10 +27,11 @@ const HEADING_STYLES = {
};
function makeHeading(level) {
const Icon = HEADING_ICONS[level];
return {
type: `heading_${level}`,
label: `Titre ${level}`,
icon: `H${level}`,
icon: <Icon width={18} height={18} />,
keywords: [`titre ${level}`, `heading ${level}`, `h${level}`],
isText: true,
textTag: `h${level}`,
src/shared/components/BlockEditor/blockTypes/Image.client.js
+1 -1
View File
@@ -109,7 +109,7 @@ function ImageBlock({ block, onChange, disabled }) {
const Image = {
type: 'image',
label: 'Image',
icon: '🖼',
icon: <Image01Icon width={18} height={18} />,
keywords: ['image', 'photo', 'picture', 'img'],
isText: false,
create(init = {}) {
src/shared/components/BlockEditor/blockTypes/NumberedList.js
+2 -1
View File
@@ -1,9 +1,10 @@
import { LeftToRightListNumberIcon } from '@zen/core/shared/icons';
import { newBlockId } from '../utils/ids.js';
const NumberedItem = {
type: 'numbered_item',
label: 'Liste numérotée',
icon: '1.',
icon: <LeftToRightListNumberIcon width={18} height={18} />,
keywords: ['liste numerotee', 'numbered list', 'ordonnee', 'ordered', 'ol'],
shortcut: '1. ',
isText: true,
src/shared/components/BlockEditor/blockTypes/Paragraph.js
+2 -1
View File
@@ -1,9 +1,10 @@
import { TextIcon } from '@zen/core/shared/icons';
import { newBlockId } from '../utils/ids.js';
const Paragraph = {
type: 'paragraph',
label: 'Texte',
icon: '¶',
icon: <TextIcon width={18} height={18} />,
keywords: ['paragraphe', 'paragraph', 'texte', 'text', 'p'],
isText: true,
textTag: 'p',
src/shared/components/BlockEditor/blockTypes/Quote.js
+2 -1
View File
@@ -1,9 +1,10 @@
import { LeftToRightBlockQuoteIcon } from '@zen/core/shared/icons';
import { newBlockId } from '../utils/ids.js';
const Quote = {
type: 'quote',
label: 'Citation',
icon: '❝',
icon: <LeftToRightBlockQuoteIcon width={18} height={18} />,
keywords: ['citation', 'quote', 'blockquote'],
shortcut: '> ',
isText: true,
src/shared/components/BlockEditor/index.js
+2
View File
@@ -22,6 +22,8 @@ export { newBlockId } from './utils/ids.js';
export {
INLINE_COLORS,
INLINE_COLOR_KEYS,
isHexColor,
collectUsedColors,
inlineLength,
inlineToPlainText,
inlineFromText,
src/shared/components/BlockEditor/inline/Toolbar.client.js
+60 -7
View File
@@ -1,6 +1,7 @@
'use client';
import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { TextColorIcon, HighlighterIcon, Link02Icon } from '@zen/core/shared/icons';
import { INLINE_COLORS, INLINE_COLOR_KEYS, markKey } from './types.js';
// Toolbar flottant de formatage. Affiché tant qu'une sélection non-vide
@@ -22,7 +23,7 @@ const SIMPLE_BUTTONS = [
{ type: 'code', label: '</>', title: 'Code (Ctrl+E)', className: 'font-mono text-[11px]' },
];
export default function InlineToolbar({ rect, activeMarks, onToggleMark, onPinChange }) {
export default function InlineToolbar({ rect, activeMarks, onToggleMark, onPinChange, usedColors }) {
const ref = useRef(null);
const [pos, setPos] = useState({ top: 0, left: 0, flipped: false });
const [popover, setPopover] = useState(null); // 'color' | 'highlight' | 'link' | null
@@ -124,7 +125,7 @@ export default function InlineToolbar({ rect, activeMarks, onToggleMark, onPinCh
onClick={() => setPopover(p => (p === 'color' ? null : 'color'))}
className={`w-7 h-7 flex items-center justify-center rounded text-sm text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 ${isActive('color') ? 'bg-neutral-100 dark:bg-neutral-800' : ''}`}
>
<span className="font-semibold">A</span>
<TextColorIcon width={16} height={16} />
</button>
<button
type="button"
@@ -133,7 +134,7 @@ export default function InlineToolbar({ rect, activeMarks, onToggleMark, onPinCh
onClick={() => setPopover(p => (p === 'highlight' ? null : 'highlight'))}
className={`w-7 h-7 flex items-center justify-center rounded text-sm text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 ${isActive('highlight') ? 'bg-neutral-100 dark:bg-neutral-800' : ''}`}
>
<span aria-hidden>◐</span>
<HighlighterIcon width={16} height={16} />
</button>
<button
type="button"
@@ -142,13 +143,14 @@ export default function InlineToolbar({ rect, activeMarks, onToggleMark, onPinCh
onClick={openLinkPopover}
className={`w-7 h-7 flex items-center justify-center rounded text-sm text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 ${isActive('link') ? 'bg-neutral-100 dark:bg-neutral-800' : ''}`}
>
<span aria-hidden>🔗</span>
<Link02Icon width={16} height={16} />
</button>
{popover === 'color' && (
<ColorGrid
mode="text"
activeKey={activeMarks.find(m => m.type === 'color')?.color}
usedColors={usedColors?.color}
onPick={handleColor}
/>
)}
@@ -156,6 +158,7 @@ export default function InlineToolbar({ rect, activeMarks, onToggleMark, onPinCh
<ColorGrid
mode="highlight"
activeKey={activeMarks.find(m => m.type === 'highlight')?.color}
usedColors={usedColors?.highlight}
onPick={handleHighlight}
/>
)}
@@ -205,12 +208,27 @@ export default function InlineToolbar({ rect, activeMarks, onToggleMark, onPinCh
);
}
function ColorGrid({ mode, activeKey, onPick }) {
const USED_COLORS_LIMIT = 8;
function ColorGrid({ mode, activeKey, usedColors, onPick }) {
const pickerRef = useRef(null);
const used = Array.isArray(usedColors) ? usedColors.slice(0, USED_COLORS_LIMIT) : [];
const isText = mode === 'text';
function openCustomPicker() {
pickerRef.current?.click();
}
function handleCustomChange(e) {
const value = e.target.value;
if (value) onPick(value);
}
return (
<div className="absolute top-full left-0 mt-1 flex items-center gap-1 rounded-lg border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 shadow-md px-2 py-1.5">
{INLINE_COLOR_KEYS.map(key => {
const palette = INLINE_COLORS[key];
const tw = mode === 'text' ? palette.text : palette.highlight;
const tw = isText ? palette.text : palette.highlight;
return (
<button
key={key}
@@ -220,10 +238,45 @@ function ColorGrid({ mode, activeKey, onPick }) {
onClick={() => onPick(key)}
className={`w-6 h-6 flex items-center justify-center rounded ${tw} ${activeKey === key ? 'ring-2 ring-blue-500' : ''}`}
>
<span className={mode === 'text' ? 'font-semibold' : ''}>A</span>
<span className={isText ? 'font-semibold' : ''}>A</span>
</button>
);
})}
{used.length > 0 && (
<span className="mx-1 w-px h-5 bg-neutral-200 dark:bg-neutral-700" aria-hidden />
)}
{used.map(value => (
<button
key={value}
type="button"
title={`Utilisée : ${value}`}
onMouseDown={(e) => e.preventDefault()}
onClick={() => onPick(value)}
style={isText ? { color: value } : { backgroundColor: value }}
className={`w-6 h-6 flex items-center justify-center rounded ${activeKey === value ? 'ring-2 ring-blue-500' : ''}`}
>
<span className={isText ? 'font-semibold' : ''}>A</span>
</button>
))}
<span className="mx-1 w-px h-5 bg-neutral-200 dark:bg-neutral-700" aria-hidden />
<button
type="button"
title="Couleur personnalisée"
onMouseDown={(e) => e.preventDefault()}
onClick={openCustomPicker}
className="w-6 h-6 flex items-center justify-center rounded border border-dashed border-neutral-300 dark:border-neutral-600 text-neutral-500 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800"
>
<span aria-hidden>+</span>
</button>
<input
ref={pickerRef}
type="color"
onChange={handleCustomChange}
onMouseDown={(e) => e.stopPropagation()}
className="absolute opacity-0 pointer-events-none w-0 h-0"
tabIndex={-1}
aria-hidden
/>
</div>
);
}
src/shared/components/BlockEditor/inline/serialize.js
+14 -7
View File
@@ -12,7 +12,7 @@
// Cet ordre est important pour que la sérialisation aller-retour soit
// stable : `inlineToDom(domToInline(x))` produit le même HTML que `x`.
import { INLINE_COLORS, normalize } from './types.js';
import { INLINE_COLORS, isHexColor, normalize } from './types.js';
const TAG_TO_MARK = {
STRONG: 'bold',
@@ -56,22 +56,26 @@ function buildNode(d, node) {
if (findMark(marks, 'italic')) el = wrap(d, el, 'em');
if (findMark(marks, 'bold')) el = wrap(d, el, 'strong');
// 2. Couleur du texte.
// 2. Couleur du texte. Hex → style inline ; clé palette → classe Tailwind.
const color = findMark(marks, 'color');
if (color) {
const tw = INLINE_COLORS[color.color]?.text;
const hex = isHexColor(color.color);
const tw = hex ? '' : (INLINE_COLORS[color.color]?.text || '');
el = wrap(d, el, 'span', {
className: tw || '',
className: tw,
style: hex ? { color: color.color } : null,
attrs: { 'data-color': color.color },
});
}
// 3. Surlignage.
// 3. Surlignage. Hex → style inline ; clé palette → classe Tailwind.
const highlight = findMark(marks, 'highlight');
if (highlight) {
const tw = INLINE_COLORS[highlight.color]?.highlight;
const hex = isHexColor(highlight.color);
const tw = hex ? '' : (INLINE_COLORS[highlight.color]?.highlight || '');
el = wrap(d, el, 'span', {
className: `rounded px-0.5 ${tw || ''}`,
className: `rounded px-0.5${tw ? ` ${tw}` : ''}`,
style: hex ? { backgroundColor: highlight.color } : null,
attrs: { 'data-highlight': highlight.color },
});
}
@@ -96,6 +100,9 @@ function buildNode(d, node) {
function wrap(d, child, tagName, opts = {}) {
const el = d.createElement(tagName);
if (opts.className) el.className = opts.className;
if (opts.style) {
for (const [k, v] of Object.entries(opts.style)) el.style[k] = v;
}
if (opts.attrs) {
for (const [k, v] of Object.entries(opts.attrs)) el.setAttribute(k, v);
}
src/shared/components/BlockEditor/inline/types.js
+38
View File
@@ -19,6 +19,11 @@
// Palette des couleurs sémantiques du DESIGN system (cf. docs/DESIGN.md).
// Bleu / vert / ambre / rouge — utilisées avec parcimonie. Les classes
// Tailwind sont appliquées au rendu via `inlineToDom`.
//
// Le champ `color` des marks `color`/`highlight` accepte **soit** une clé
// de cette palette, **soit** une string `#rrggbb` (couleur libre choisie
// par l'utilisateur). À la sérialisation, un hex bascule sur un `style`
// inline ; une clé palette utilise les classes Tailwind ci-dessous.
export const INLINE_COLORS = {
blue: { text: 'text-blue-600 dark:text-blue-400', highlight: 'bg-blue-100 dark:bg-blue-900/40' },
green: { text: 'text-green-600 dark:text-green-400', highlight: 'bg-green-100 dark:bg-green-900/40' },
@@ -28,6 +33,39 @@ export const INLINE_COLORS = {
export const INLINE_COLOR_KEYS = Object.keys(INLINE_COLORS);
const HEX_RE = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
export function isHexColor(c) {
return typeof c === 'string' && HEX_RE.test(c);
}
// Parcourt tous les blocs et collecte les valeurs de `color` et `highlight`
// utilisées dans le contenu inline. Conserve l'ordre d'apparition, déduplique,
// et exclut les clés de la palette par défaut (la palette est déjà affichée
// au-dessus dans le toolbar).
export function collectUsedColors(blocks) {
const out = { color: [], highlight: [] };
if (!Array.isArray(blocks)) return out;
const seen = { color: new Set(), highlight: new Set() };
const palette = new Set(INLINE_COLOR_KEYS);
for (const block of blocks) {
const content = block?.content;
if (!Array.isArray(content)) continue;
for (const node of content) {
if (!node?.marks) continue;
for (const mark of node.marks) {
if (mark.type !== 'color' && mark.type !== 'highlight') continue;
const value = mark.color;
if (!value || palette.has(value)) continue;
if (seen[mark.type].has(value)) continue;
seen[mark.type].add(value);
out[mark.type].push(value);
}
}
}
return out;
}
const SIMPLE_MARK_TYPES = ['bold', 'italic', 'underline', 'strike', 'code'];
function marksEqual(a, b) {
src/shared/icons/index.js
+144 -13
View File
@@ -295,13 +295,6 @@ export const CancelCircleIcon = (props) => (
</svg>
);
export const Link02Icon = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={24} height={24} color={"currentColor"} fill={"none"} {...props}>
<path fillRule="evenodd" clipRule="evenodd" d="M15.2071 8.79285C15.5976 9.18337 15.5976 9.81654 15.2071 10.2071L10.2071 15.2071C9.81658 15.5976 9.18342 15.5976 8.79289 15.2071C8.40237 14.8165 8.40237 14.1834 8.79289 13.7928L13.7929 8.79285C14.1834 8.40232 14.8166 8.40232 15.2071 8.79285Z" fill="currentColor"></path>
<path fillRule="evenodd" clipRule="evenodd" d="M11.2929 3.837C13.7423 1.3876 17.7136 1.3876 20.163 3.837C22.6124 6.2864 22.6124 10.2577 20.163 12.7071L17.7071 15.1629C17.3166 15.5534 16.6834 15.5534 16.2929 15.1629C15.9024 14.7724 15.9024 14.1392 16.2929 13.7487L18.7487 11.2928C20.4171 9.6245 20.4171 6.91957 18.7487 5.25122C17.0804 3.58287 14.3755 3.58287 12.7071 5.25122L10.2513 7.70706C9.86074 8.09759 9.22757 8.09759 8.83705 7.70706C8.44652 7.31654 8.44652 6.68337 8.83705 6.29285L11.2929 3.837ZM7.70711 8.837C8.09763 9.22753 8.09763 9.86069 7.70711 10.2512L5.25126 12.7071C3.58291 14.3754 3.58291 17.0803 5.25126 18.7487C6.91961 20.417 9.62454 20.417 11.2929 18.7487L13.7487 16.2928C14.1393 15.9023 14.7724 15.9023 15.1629 16.2928C15.5535 16.6834 15.5535 17.3165 15.1629 17.7071L12.7071 20.1629C10.2577 22.6123 6.28645 22.6123 3.83705 20.1629C1.38765 17.7135 1.38765 13.7422 3.83705 11.2928L6.29289 8.837C6.68342 8.44648 7.31658 8.44648 7.70711 8.837Z" fill="currentColor"></path>
</svg>
);
export const UserGroupIcon = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={24} height={24} color={"currentColor"} fill={"none"} {...props}>
<path d="M8.2499 10.5C8.2499 8.42893 9.92884 6.75 11.9999 6.75C14.071 6.75 15.7499 8.42893 15.7499 10.5C15.7499 12.0256 14.8388 13.3385 13.5311 13.9242C16.2049 14.5465 18.25 16.7615 18.25 19.499C18.25 19.9133 17.9142 20.249 17.5 20.249H6.5C6.08579 20.249 5.75 19.9133 5.75 19.499C5.75 16.7615 7.79507 14.5466 10.4688 13.9242C9.16099 13.3385 8.2499 12.0257 8.2499 10.5Z" fill="currentColor" />
@@ -485,12 +478,6 @@ export const Doc02Icon = (props) => (
</svg>
);
export const Image01Icon = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={24} height={24} color={"currentColor"} fill={"none"} {...props}>
<path fillRule="evenodd" clipRule="evenodd" d="M12.0745 1.5H11.9256H11.9255C9.74958 1.49998 8.01484 1.49996 6.65471 1.68282C5.25033 1.87164 4.09653 2.27175 3.18414 3.18414C2.27175 4.09653 1.87164 5.25033 1.68282 6.65471C1.49996 8.01484 1.49998 9.74956 1.5 11.9255V11.9255V12.0745V12.0745C1.49998 14.2504 1.49996 15.9852 1.68282 17.3453C1.87164 18.7497 2.27175 19.9035 3.18414 20.8159C4.09653 21.7283 5.25033 22.1284 6.65471 22.3172C8.01485 22.5 9.74959 22.5 11.9256 22.5H12.0744C14.2504 22.5 15.9851 22.5 17.3453 22.3172C18.7497 22.1284 19.9035 21.7283 20.8159 20.8159C21.7283 19.9035 22.1284 18.7497 22.3172 17.3453C22.5 15.9852 22.5 14.2504 22.5 12.0744V11.9256C22.5 9.74959 22.5 8.01485 22.3172 6.65471C22.1284 5.25033 21.7283 4.09653 20.8159 3.18414C19.9035 2.27175 18.7497 1.87164 17.3453 1.68282C15.9852 1.49996 14.2504 1.49998 12.0745 1.5H12.0745ZM5.5 7.5C5.5 6.39543 6.39543 5.5 7.5 5.5C8.60457 5.5 9.5 6.39543 9.5 7.5C9.5 8.60457 8.60457 9.5 7.5 9.5C6.39543 9.5 5.5 8.60457 5.5 7.5ZM6.92183 20.335C6.79989 20.3186 6.68349 20.3008 6.57227 20.2814C8.47707 17.9776 10.4184 15.6499 12.5989 14.1878C13.8589 13.343 15.1548 12.8211 16.5241 12.7568C17.7246 12.7003 19.0389 12.9927 20.4962 13.8125C20.4859 15.1635 20.4512 16.219 20.3356 17.0788C20.1766 18.2614 19.8811 18.9228 19.4023 19.4016C18.9234 19.8805 18.262 20.176 17.0794 20.335C15.8681 20.4979 14.2681 20.5 12.0006 20.5C9.73319 20.5 8.1332 20.4979 6.92183 20.335Z" fill="currentColor"></path>
</svg>
);
export const PlaySquareIcon = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={24} height={24} color={"currentColor"} fill={"none"} {...props}>
<path fillRule="evenodd" clipRule="evenodd" d="M11.9273 1.75006H12.0727H12.0727C14.1968 1.75004 15.8903 1.75002 17.218 1.92853C18.589 2.11285 19.7153 2.50343 20.606 3.3941C21.4966 4.28477 21.8872 5.4111 22.0715 6.78204C22.25 8.1098 22.25 9.80323 22.25 11.9274V12.0727C22.25 14.1969 22.25 15.8903 22.0715 17.2181C21.8872 18.589 21.4966 19.7154 20.606 20.606C19.7153 21.4967 18.589 21.8873 17.218 22.0716C15.8903 22.2501 14.1968 22.2501 12.0727 22.2501H11.9273C9.80317 22.2501 8.10974 22.2501 6.78198 22.0716C5.41104 21.8873 4.28471 21.4967 3.39404 20.606C2.50337 19.7154 2.11279 18.589 1.92847 17.2181C1.74996 15.8903 1.74998 14.1969 1.75 12.0728V12.0727V11.9274V11.9273C1.74998 9.80319 1.74996 8.10978 1.92847 6.78204C2.11279 5.4111 2.50337 4.28477 3.39404 3.3941C4.28471 2.50343 5.41104 2.11285 6.78198 1.92853C8.10973 1.75002 9.80316 1.75004 11.9273 1.75006H11.9273ZM13.1276 8.76709L13.1277 8.7671L13.2308 8.83088L13.2308 8.8309C13.9033 9.24686 14.4825 9.60516 14.9061 9.94209C15.3458 10.2918 15.7713 10.7341 15.9251 11.3704C16.025 11.7834 16.025 12.2167 15.9251 12.6298C15.7713 13.266 15.3458 13.7083 14.9061 14.058C14.4825 14.395 13.9033 14.7533 13.2308 15.1692L13.1277 15.233C12.4804 15.6335 11.9183 15.9813 11.4473 16.1994C10.9678 16.4215 10.3671 16.6162 9.72509 16.4181C9.31618 16.2919 8.95465 16.0556 8.67031 15.7433C8.24275 15.2735 8.11346 14.6719 8.05659 14.1246C7.99995 13.5796 7.99997 12.8813 8 12.0548V11.9453C7.99997 11.1187 7.99995 10.4205 8.05659 9.87555C8.11346 9.32826 8.24275 8.72659 8.67031 8.25687C8.95465 7.94449 9.31618 7.70822 9.72509 7.58205C10.3671 7.38394 10.9678 7.57863 11.4473 7.8007C11.9183 8.01886 12.4804 8.36665 13.1276 8.76709Z" fill="currentColor"></path>
@@ -554,4 +541,148 @@ export const Add01Icon = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={64} height={64} color={"currentColor"} fill={"none"} {...props}>
<path d="M11.001 19.002V13.002H5C4.44772 13.002 4 12.5543 4 12.002C4 11.4498 4.44772 11.002 5 11.002H11.001V5.00009C11.001 4.44781 11.4487 4.00009 12.001 4.00009C12.5533 4.0001 13.001 4.44781 13.001 5.00009V11.002H19.002L19.1045 11.0069C19.6086 11.0583 20.002 11.4844 20.002 12.002C20.002 12.5197 19.6086 12.9458 19.1045 12.9972L19.002 13.002H13.001V19.002C13.001 19.5543 12.5533 20.002 12.001 20.002C11.4487 20.002 11.001 19.5543 11.001 19.002Z" fill="currentColor" />
</svg>
);
export const TextColorIcon = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={64} height={64} color={"currentColor"} fill={"none"} {...props}>
<path fillRule="evenodd" clipRule="evenodd" d="M2 21C2 20.4477 2.44772 20 3 20H21C21.5523 20 22 20.4477 22 21C22 21.5523 21.5523 22 21 22H3C2.44772 22 2 21.5523 2 21Z" fill="currentColor"></path>
<path fillRule="evenodd" clipRule="evenodd" d="M11.1791 5.01263C10.666 5.96834 10.1045 7.43332 9.30978 9.51512L9.12467 10H14.8759L14.6908 9.51512C13.896 7.43333 13.3346 5.96834 12.8215 5.01263C12.2726 3.99019 12.0098 3.99966 12.0005 3.99999C11.9912 3.99966 11.728 3.99019 11.1791 5.01263ZM15.6394 12L18.066 18.3566C18.263 18.8726 18.841 19.1312 19.3569 18.9342C19.8729 18.7373 20.1315 18.1593 19.9345 17.6434L16.5299 8.72508C15.7711 6.73714 15.1651 5.14982 14.5836 4.06661C14.0366 3.04769 13.2703 2 12.0003 2C10.7302 2 9.96398 3.04769 9.41695 4.0666C8.83541 5.14982 8.22946 6.73715 7.47059 8.72509L4.06603 17.6434C3.86906 18.1593 4.12766 18.7373 4.64362 18.9342C5.15959 19.1312 5.73754 18.8726 5.93451 18.3566L8.36117 12H15.6394Z" fill="currentColor"></path>
</svg>
);
export const HighlighterIcon = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={64} height={64} color={"currentColor"} fill={"none"} {...props}>
<path fillRule="evenodd" clipRule="evenodd" d="M13.7353 2.75C13.9342 2.74999 14.125 2.82901 14.2656 2.96967L22.0303 10.7344C22.3232 11.0273 22.3232 11.5021 22.0304 11.795L18.295 15.5309C17.6116 16.2144 16.5035 16.2144 15.8201 15.531L9.46959 9.18049C8.78619 8.49709 8.78618 7.38908 9.46955 6.70566L13.2049 2.96971C13.3456 2.82904 13.5363 2.75001 13.7353 2.75ZM8.12129 9.46484L8.07927 9.50675C7.34873 10.2373 7.14875 11.2836 7.05511 12.0461C6.98744 12.5971 6.75125 13.3853 6.04465 14.2896C5.509 14.9752 5.4481 16.0372 6.14764 16.7368L8.26284 18.852C8.96237 19.5515 10.0245 19.4906 10.71 18.955C11.6144 18.2484 12.4025 18.0122 12.9535 17.9445C13.7161 17.8509 14.7623 17.6509 15.4929 16.9204L15.5347 16.8784C15.3211 16.7523 15.1197 16.5976 14.9362 16.4141L8.58571 10.0636C8.40214 9.88 8.24733 9.67856 8.12129 9.46484ZM1.96253 19.9769L4.81204 17.0488C4.93407 17.249 5.08386 17.441 5.26361 17.6207L7.37881 19.7359C7.55263 19.9098 7.73787 20.0556 7.93092 20.1753L7.01651 21.0438C6.87713 21.1762 6.69225 21.25 6.50002 21.25H2.50002C2.19853 21.25 1.92634 21.0695 1.80908 20.7917C1.69181 20.514 1.75226 20.193 1.96253 19.9769Z" fill="currentColor"></path>
</svg>
);
export const Link02Icon = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={64} height={64} color={"currentColor"} fill={"none"} {...props}>
<path fillRule="evenodd" clipRule="evenodd" d="M15.2071 8.79285C15.5976 9.18337 15.5976 9.81654 15.2071 10.2071L10.2071 15.2071C9.81658 15.5976 9.18342 15.5976 8.79289 15.2071C8.40237 14.8165 8.40237 14.1834 8.79289 13.7928L13.7929 8.79285C14.1834 8.40232 14.8166 8.40232 15.2071 8.79285Z" fill="currentColor" />
<path fillRule="evenodd" clipRule="evenodd" d="M11.2929 3.837C13.7423 1.3876 17.7136 1.3876 20.163 3.837C22.6124 6.2864 22.6124 10.2577 20.163 12.7071L17.7071 15.1629C17.3166 15.5534 16.6834 15.5534 16.2929 15.1629C15.9024 14.7724 15.9024 14.1392 16.2929 13.7487L18.7487 11.2928C20.4171 9.6245 20.4171 6.91957 18.7487 5.25122C17.0804 3.58287 14.3755 3.58287 12.7071 5.25122L10.2513 7.70706C9.86074 8.09759 9.22757 8.09759 8.83705 7.70706C8.44652 7.31654 8.44652 6.68337 8.83705 6.29285L11.2929 3.837ZM7.70711 8.837C8.09763 9.22753 8.09763 9.86069 7.70711 10.2512L5.25126 12.7071C3.58291 14.3754 3.58291 17.0803 5.25126 18.7487C6.91961 20.417 9.62454 20.417 11.2929 18.7487L13.7487 16.2928C14.1393 15.9023 14.7724 15.9023 15.1629 16.2928C15.5535 16.6834 15.5535 17.3165 15.1629 17.7071L12.7071 20.1629C10.2577 22.6123 6.28645 22.6123 3.83705 20.1629C1.38765 17.7135 1.38765 13.7422 3.83705 11.2928L6.29289 8.837C6.68342 8.44648 7.31658 8.44648 7.70711 8.837Z" fill="currentColor" />
</svg>
);
export const TextIcon = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={64} height={64} color={"currentColor"} fill={"none"} {...props}>
<path fillRule="evenodd" clipRule="evenodd" d="M8 21C8 20.4477 8.44772 20 9 20H15C15.5523 20 16 20.4477 16 21C16 21.5523 15.5523 22 15 22H9C8.44772 22 8 21.5523 8 21Z" fill="currentColor" />
<path fillRule="evenodd" clipRule="evenodd" d="M12 2C12.5523 2 13 2.44772 13 3V21C13 21.5523 12.5523 22 12 22C11.4477 22 11 21.5523 11 21V3C11 2.44772 11.4477 2 12 2Z" fill="currentColor" />
<path d="M12 4C10.6663 4 8.92636 4.14259 7.51324 4.28698C6.85362 4.35437 6.72441 4.37712 6.62291 4.41844C6.35293 4.52836 6.12217 4.78389 6.04027 5.06365C6.00973 5.16796 5.99998 5.30827 5.99998 6C5.99998 6.55228 5.55227 7 4.99998 7C4.4477 7 3.99998 6.55228 3.99998 6L3.9999 5.89007C3.99931 5.37184 3.99879 4.91856 4.12084 4.50169C4.3741 3.63663 5.03392 2.90596 5.86877 2.56607C6.2709 2.40235 6.70914 2.35808 7.20685 2.30779L7.30995 2.29733C8.73455 2.15178 10.5589 2 12 2C13.441 2 15.2654 2.15178 16.69 2.29733L16.7931 2.30779C17.2908 2.35808 17.7291 2.40235 18.1312 2.56607C18.966 2.90596 19.6259 3.63663 19.8791 4.50169C20.0012 4.91856 20.0007 5.37184 20.0001 5.89007L20 6C20 6.55228 19.5523 7 19 7C18.4477 7 18 6.55228 18 6C18 5.30827 17.9902 5.16796 17.9597 5.06365C17.8778 4.78389 17.647 4.52836 17.3771 4.41844C17.2756 4.37712 17.1463 4.35437 16.4867 4.28698C15.0736 4.14259 13.3337 4 12 4Z" fill="currentColor" />
</svg>
);
export const Heading01Icon = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={64} height={64} color={"currentColor"} fill={"none"} {...props}>
<path fillRule="evenodd" clipRule="evenodd" d="M3.49995 4C4.05223 4 4.49995 4.44772 4.49995 5V19C4.49995 19.5523 4.05223 20 3.49995 20C2.94766 20 2.49995 19.5523 2.49995 19V5C2.49995 4.44772 2.94766 4 3.49995 4Z" fill="currentColor"></path>
<path fillRule="evenodd" clipRule="evenodd" d="M13.4999 4C14.0522 4 14.4999 4.44772 14.4999 5V19C14.4999 19.5523 14.0522 20 13.4999 20C12.9477 20 12.4999 19.5523 12.4999 19V5C12.4999 4.44772 12.9477 4 13.4999 4Z" fill="currentColor"></path>
<path fillRule="evenodd" clipRule="evenodd" d="M19.4719 10.1183C19.7971 10.2923 20.0001 10.6312 20.0001 11V18H20.5001C21.0523 18 21.5001 18.4477 21.5001 19C21.5001 19.5523 21.0523 20 20.5001 20H17.5001C16.9478 20 16.5001 19.5523 16.5001 19C16.5001 18.4477 16.9478 18 17.5001 18H18.0001V12.8661C17.5471 13.1282 16.9624 12.9962 16.668 12.5547C16.3617 12.0952 16.4858 11.4743 16.9454 11.168L18.4454 10.168C18.7522 9.96338 19.1468 9.94431 19.4719 10.1183Z" fill="currentColor"></path>
<path fillRule="evenodd" clipRule="evenodd" d="M2.49995 12C2.49995 11.4477 2.94766 11 3.49995 11L13.4999 11C14.0522 11 14.4999 11.4477 14.4999 12C14.4999 12.5523 14.0522 13 13.4999 13L3.49995 13C2.94766 13 2.49995 12.5523 2.49995 12Z" fill="currentColor"></path>
</svg>
);
export const Heading02Icon = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={64} height={64} color={"currentColor"} fill={"none"} {...props}>
<path fillRule="evenodd" clipRule="evenodd" d="M2.99994 4C3.55223 4 3.99994 4.44772 3.99994 5V19C3.99994 19.5523 3.55223 20 2.99994 20C2.44766 20 1.99994 19.5523 1.99994 19V5C1.99994 4.44772 2.44766 4 2.99994 4Z" fill="currentColor"></path>
<path fillRule="evenodd" clipRule="evenodd" d="M12.9999 4C13.5522 4 13.9999 4.44772 13.9999 5V19C13.9999 19.5523 13.5522 20 12.9999 20C12.4477 20 11.9999 19.5523 11.9999 19V5C11.9999 4.44772 12.4477 4 12.9999 4Z" fill="currentColor"></path>
<path fillRule="evenodd" clipRule="evenodd" d="M16.0005 13C16.0005 11.3431 17.3437 10 19.0005 10C20.6574 10 22.0005 11.3431 22.0005 13V13.214C22.0005 14.1251 21.6138 14.9934 20.9366 15.6029L18.3316 17.9474C18.3109 17.966 18.2915 17.9835 18.2732 18H21.0005C21.5528 18 22.0005 18.4477 22.0005 19C22.0005 19.5523 21.5528 20 21.0005 20H17.0005C16.4483 20 16.0005 19.5523 16.0005 19V18.6907C16.0005 18.6612 16.0004 18.6308 16.0003 18.5997C15.9987 18.2607 15.9966 17.8289 16.1735 17.4317C16.3505 17.0344 16.6728 16.7471 16.9258 16.5215C16.9491 16.5008 16.9717 16.4806 16.9937 16.4608L19.5987 14.1163C19.8545 13.8861 20.0005 13.5581 20.0005 13.214V13C20.0005 12.4477 19.5528 12 19.0005 12C18.4483 12 18.0005 12.4477 18.0005 13V13.4C18.0005 13.9523 17.5528 14.4 17.0005 14.4C16.4483 14.4 16.0005 13.9523 16.0005 13.4V13Z" fill="currentColor"></path>
<path fillRule="evenodd" clipRule="evenodd" d="M1.99994 12C1.99994 11.4477 2.44766 11 2.99994 11L12.9999 11C13.5522 11 13.9999 11.4477 13.9999 12C13.9999 12.5523 13.5522 13 12.9999 13L2.99994 13C2.44766 13 1.99994 12.5523 1.99994 12Z" fill="currentColor"></path>
</svg>
);
export const Heading03Icon = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={64} height={64} color={"currentColor"} fill={"none"} {...props}>
<path fillRule="evenodd" clipRule="evenodd" d="M3 4C3.55228 4 4 4.44772 4 5V19C4 19.5523 3.55228 20 3 20C2.44772 20 2 19.5523 2 19V5C2 4.44772 2.44772 4 3 4Z" fill="currentColor" />
<path fillRule="evenodd" clipRule="evenodd" d="M13 4C13.5523 4 14 4.44772 14 5V19C14 19.5523 13.5523 20 13 20C12.4477 20 12 19.5523 12 19V5C12 4.44772 12.4477 4 13 4Z" fill="currentColor" />
<path fillRule="evenodd" clipRule="evenodd" d="M19 12C18.4477 12 18 12.4477 18 13C18 13.5523 17.5523 14 17 14C16.4477 14 16 13.5523 16 13C16 11.3431 17.3431 10 19 10C20.6569 10 22 11.3431 22 13C22 13.7684 21.7111 14.4692 21.2361 15C21.7111 15.5308 22 16.2316 22 17C22 18.6569 20.6569 20 19 20C17.3431 20 16 18.6569 16 17C16 16.4477 16.4477 16 17 16C17.5523 16 18 16.4477 18 17C18 17.5523 18.4477 18 19 18C19.5523 18 20 17.5523 20 17C20 16.4477 19.5523 16 19 16C18.4477 16 18 15.5523 18 15C18 14.4477 18.4477 14 19 14C19.5523 14 20 13.5523 20 13C20 12.4477 19.5523 12 19 12Z" fill="currentColor" />
<path fillRule="evenodd" clipRule="evenodd" d="M2 12C2 11.4477 2.44772 11 3 11L13 11C13.5523 11 14 11.4477 14 12C14 12.5523 13.5523 13 13 13L3 13C2.44772 13 2 12.5523 2 12Z" fill="currentColor" />
</svg>
);
export const Heading04Icon = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={64} height={64} color={"currentColor"} fill={"none"} {...props}>
<path fillRule="evenodd" clipRule="evenodd" d="M3 4C3.55228 4 4 4.44772 4 5V19C4 19.5523 3.55228 20 3 20C2.44772 20 2 19.5523 2 19V5C2 4.44772 2.44772 4 3 4Z" fill="currentColor"></path>
<path fillRule="evenodd" clipRule="evenodd" d="M13 4C13.5523 4 14 4.44772 14 5V19C14 19.5523 13.5523 20 13 20C12.4477 20 12 19.5523 12 19V5C12 4.44772 12.4477 4 13 4Z" fill="currentColor"></path>
<path fillRule="evenodd" clipRule="evenodd" d="M17 10C17.5523 10 18 10.4477 18 11V14H20V11C20 10.4477 20.4477 10 21 10C21.5523 10 22 10.4477 22 11V19C22 19.5523 21.5523 20 21 20C20.4477 20 20 19.5523 20 19V16H17C16.4477 16 16 15.5523 16 15V11C16 10.4477 16.4477 10 17 10Z" fill="currentColor"></path>
<path fillRule="evenodd" clipRule="evenodd" d="M2 12C2 11.4477 2.44772 11 3 11L13 11C13.5523 11 14 11.4477 14 12C14 12.5523 13.5523 13 13 13L3 13C2.44772 13 2 12.5523 2 12Z" fill="currentColor"></path>
</svg>
);
export const Heading05Icon = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={64} height={64} color={"currentColor"} fill={"none"} {...props}>
<path fillRule="evenodd" clipRule="evenodd" d="M3 4C3.55228 4 4 4.44772 4 5V19C4 19.5523 3.55228 20 3 20C2.44772 20 2 19.5523 2 19V5C2 4.44772 2.44772 4 3 4Z" fill="currentColor"></path>
<path fillRule="evenodd" clipRule="evenodd" d="M13 4C13.5523 4 14 4.44772 14 5V19C14 19.5523 13.5523 20 13 20C12.4477 20 12 19.5523 12 19V5C12 4.44772 12.4477 4 13 4Z" fill="currentColor"></path>
<path fillRule="evenodd" clipRule="evenodd" d="M16 11C16 10.4477 16.4477 10 17 10H21C21.5523 10 22 10.4477 22 11C22 11.5523 21.5523 12 21 12H18V13H18.5C20.433 13 22 14.567 22 16.5V17C22 18.6569 20.6569 20 19 20C17.3431 20 16 18.6569 16 17V16.5C16 15.9477 16.4477 15.5 17 15.5C17.5523 15.5 18 15.9477 18 16.5V17C18 17.5523 18.4477 18 19 18C19.5523 18 20 17.5523 20 17V16.5C20 15.6716 19.3284 15 18.5 15H17C16.4477 15 16 14.5523 16 14V11Z" fill="currentColor"></path>
<path fillRule="evenodd" clipRule="evenodd" d="M2 12C2 11.4477 2.44772 11 3 11L13 11C13.5523 11 14 11.4477 14 12C14 12.5523 13.5523 13 13 13L3 13C2.44772 13 2 12.5523 2 12Z" fill="currentColor"></path>
</svg>
);
export const Heading06Icon = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={64} height={64} color={"currentColor"} fill={"none"} {...props}>
<path fillRule="evenodd" clipRule="evenodd" d="M3 4C3.55228 4 4 4.44772 4 5V19C4 19.5523 3.55228 20 3 20C2.44772 20 2 19.5523 2 19V5C2 4.44772 2.44772 4 3 4Z" fill="currentColor" />
<path fillRule="evenodd" clipRule="evenodd" d="M13 4C13.5523 4 14 4.44772 14 5V19C14 19.5523 13.5523 20 13 20C12.4477 20 12 19.5523 12 19V5C12 4.44772 12.4477 4 13 4Z" fill="currentColor" />
<path fillRule="evenodd" clipRule="evenodd" d="M16 13C16 11.3431 17.3431 10 19 10C20.6569 10 22 11.3431 22 13C22 13.5523 21.5523 14 21 14C20.4477 14 20 13.5523 20 13C20 12.4477 19.5523 12 19 12C18.4477 12 18 12.4477 18 13V14.1707C18.3128 14.0602 18.6494 14 19 14C20.6569 14 22 15.3431 22 17C22 18.6569 20.6569 20 19 20C17.3431 20 16 18.6569 16 17V13ZM18 17C18 17.5523 18.4477 18 19 18C19.5523 18 20 17.5523 20 17C20 16.4477 19.5523 16 19 16C18.4477 16 18 16.4477 18 17Z" fill="currentColor" />
<path fillRule="evenodd" clipRule="evenodd" d="M2 12C2 11.4477 2.44772 11 3 11L13 11C13.5523 11 14 11.4477 14 12C14 12.5523 13.5523 13 13 13L3 13C2.44772 13 2 12.5523 2 12Z" fill="currentColor" />
</svg>
);
export const LeftToRightListBulletIcon = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={64} height={64} color={"currentColor"} fill={"none"} {...props}>
<path d="M20 4C20.5523 4 21 4.44772 21 5C21 5.55229 20.5523 6 20 6L8 6C7.44772 6 7 5.55228 7 5C7 4.44772 7.44772 4 8 4L20 4Z" fill="currentColor"></path>
<path d="M20 11C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13L8 13C7.44772 13 7 12.5523 7 12C7 11.4477 7.44772 11 8 11L20 11Z" fill="currentColor"></path>
<path d="M20 18C20.5523 18 21 18.4477 21 19C21 19.5523 20.5523 20 20 20L8 20C7.44772 20 7 19.5523 7 19C7 18.4477 7.44772 18 8 18L20 18Z" fill="currentColor"></path>
<path d="M4.25 3.75C4.94035 3.75 5.5 4.30965 5.5 5C5.5 5.69036 4.94035 6.25 4.25 6.25C3.55964 6.25 3 5.69036 3 5C3 4.30965 3.55964 3.75 4.25 3.75Z" fill="currentColor"></path>
<path d="M4.25 10.75C4.94035 10.75 5.5 11.3096 5.5 12C5.5 12.6904 4.94035 13.25 4.25 13.25C3.55964 13.25 3 12.6904 3 12C3 11.3096 3.55964 10.75 4.25 10.75Z" fill="currentColor"></path>
<path d="M4.25 17.75C4.94035 17.75 5.5 18.3096 5.5 19C5.5 19.6904 4.94035 20.25 4.25 20.25C3.55964 20.25 3 19.6904 3 19C3 18.3096 3.55964 17.75 4.25 17.75Z" fill="currentColor"></path>
</svg>
);
export const LeftToRightListNumberIcon = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={64} height={64} color={"currentColor"} fill={"none"} {...props}>
<path fillRule="evenodd" clipRule="evenodd" d="M10.0001 6C10.0001 5.44772 10.4478 5 11.0001 5L21.0001 5C21.5524 5 22.0001 5.44772 22.0001 6C22.0001 6.55229 21.5524 7 21.0001 7L11.0001 7C10.4478 7 10.0001 6.55228 10.0001 6Z" fill="currentColor"></path>
<path fillRule="evenodd" clipRule="evenodd" d="M10.0001 12C10.0001 11.4477 10.4478 11 11.0001 11L21.0001 11C21.5524 11 22.0001 11.4477 22.0001 12C22.0001 12.5523 21.5524 13 21.0001 13L11.0001 13C10.4478 13 10.0001 12.5523 10.0001 12Z" fill="currentColor"></path>
<path fillRule="evenodd" clipRule="evenodd" d="M10.0001 18C10.0001 17.4477 10.4478 17 11.0001 17L21.0001 17C21.5524 17 22.0001 17.4477 22.0001 18C22.0001 18.5523 21.5524 19 21.0001 19L11.0001 19C10.4478 19 10.0001 18.5523 10.0001 18Z" fill="currentColor"></path>
<path d="M4.79399 16.0022C4.73088 16 4.64625 15.9999 4.50007 15.9999H3.00007C2.44779 15.9999 2.00007 15.5522 2.00007 14.9999C2.00007 14.4476 2.44779 13.9999 3.00007 13.9999H4.50007L4.5592 13.9998C4.77493 13.9994 5.01241 13.999 5.22927 14.0422C6.10199 14.2158 6.78421 14.898 6.9578 15.7707C7.00094 15.9876 7.00052 16.225 7.00014 16.4408L7.00007 16.4999L7.00014 16.559C7.00052 16.7748 7.00094 17.0122 6.9578 17.2291C6.78421 18.1018 6.10199 18.784 5.22927 18.9576C5.01241 19.0008 4.77493 19.0003 4.5592 19L4.50007 18.9999C4.35389 18.9999 4.26927 19 4.20616 19.0022C4.1771 19.0032 4.16148 19.0044 4.15517 19.005C4.08061 19.0222 4.02234 19.0804 4.00518 19.155C4.00459 19.1613 4.00336 19.1769 4.00237 19.206C4.00021 19.2691 4.00007 19.3537 4.00007 19.4999V19.9999H6.00007C6.55236 19.9999 7.00007 20.4476 7.00007 20.9999C7.00007 21.5522 6.55236 21.9999 6.00007 21.9999H3.60007L3.57254 21.9999H3.57252C3.45832 22.0001 3.28877 22.0003 3.13764 21.98C2.94506 21.9541 2.64154 21.8798 2.38083 21.6191C2.12013 21.3584 2.04586 21.0549 2.01997 20.8623C1.99965 20.7112 1.99989 20.5416 2.00005 20.4274L2.00007 20.3999V19.4999L2 19.4408L2 19.4408C1.99962 19.225 1.99921 18.9876 2.04234 18.7707C2.21594 17.898 2.89815 17.2158 3.77087 17.0422C3.98773 16.999 4.22521 16.9994 4.44094 16.9998H4.44095L4.50007 16.9999C4.64625 16.9999 4.73088 16.9998 4.79399 16.9976C4.82305 16.9966 4.83867 16.9954 4.84497 16.9948C4.91953 16.9776 4.9778 16.9194 4.99497 16.8448C4.99555 16.8385 4.99678 16.8229 4.99778 16.7938C4.99994 16.7307 5.00007 16.6461 5.00007 16.4999C5.00007 16.3537 4.99994 16.2691 4.99778 16.206C4.99678 16.1769 4.99555 16.1613 4.99497 16.155C4.9778 16.0804 4.91953 16.0222 4.84497 16.005L4.79399 16.0022Z" fill="currentColor"></path>
<path fillRule="evenodd" clipRule="evenodd" d="M2.00007 3C2.00007 2.44772 2.44779 2 3.00007 2H4.20007C4.91804 2 5.50007 2.58203 5.50007 3.3V8H6.00007C6.55236 8 7.00007 8.44772 7.00007 9C7.00007 9.55228 6.55236 10 6.00007 10H3.00007C2.44779 10 2.00007 9.55228 2.00007 9C2.00007 8.44772 2.44779 8 3.00007 8H3.50007V4H3.00007C2.44779 4 2.00007 3.55228 2.00007 3Z" fill="currentColor"></path>
</svg>
);
export const CheckListIcon = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={64} height={64} color={"currentColor"} fill={"none"} {...props}>
<path fillRule="evenodd" clipRule="evenodd" d="M10.0001 6C10.0001 5.44772 10.4478 5 11.0001 5L21.0001 5C21.5523 5 22.0001 5.44772 22.0001 6C22.0001 6.55229 21.5523 7 21.0001 7L11.0001 7C10.4478 7 10.0001 6.55228 10.0001 6Z" fill="currentColor"></path>
<path fillRule="evenodd" clipRule="evenodd" d="M10.0001 12C10.0001 11.4477 10.4478 11 11.0001 11L21.0001 11C21.5523 11 22.0001 11.4477 22.0001 12C22.0001 12.5523 21.5523 13 21.0001 13L11.0001 13C10.4478 13 10.0001 12.5523 10.0001 12Z" fill="currentColor"></path>
<path fillRule="evenodd" clipRule="evenodd" d="M10.0001 18C10.0001 17.4477 10.4478 17 11.0001 17L21.0001 17C21.5523 17 22.0001 17.4477 22.0001 18C22.0001 18.5523 21.5523 19 21.0001 19L11.0001 19C10.4478 19 10.0001 18.5523 10.0001 18Z" fill="currentColor"></path>
<path d="M8.84805 3.47013C9.14076 3.93847 8.99839 4.55542 8.53005 4.84813C7.75686 5.33138 6.98448 6.3867 6.3683 7.46502C6.07336 7.98116 5.8363 8.46252 5.67308 8.81493C5.61077 8.94769 5.48414 9.24118 5.42861 9.37133C5.28354 9.7337 4.9407 9.97901 4.55087 9.99884C4.16093 10.0187 3.79511 9.80976 3.61406 9.46384C3.44083 9.13283 3.16061 8.82288 2.89212 8.58028C2.78719 8.48167 2.55609 8.30602 2.45365 8.23052C1.99126 7.92886 1.8608 7.3095 2.1623 6.84694C2.46388 6.38426 3.08343 6.25366 3.5461 6.55524C3.6823 6.64701 4.0182 6.89088 4.27229 7.13214C4.38098 6.92332 4.50113 6.70143 4.63181 6.47274C5.26563 5.36357 6.24325 3.91889 7.47006 3.15214C7.93839 2.85943 8.55534 3.0018 8.84805 3.47013Z" fill="currentColor"></path>
<path d="M8.84805 14.4701C9.14076 14.9385 8.99839 15.5554 8.53005 15.8481C7.75686 16.3314 6.98448 17.3867 6.3683 18.465C6.07336 18.9812 5.8363 19.4625 5.67308 19.8149C5.61077 19.9477 5.48414 20.2412 5.42861 20.3713C5.28354 20.7337 4.9407 20.979 4.55087 20.9988C4.16093 21.0187 3.79511 20.8098 3.61406 20.4638C3.44083 20.1328 3.16061 19.8229 2.89212 19.5803C2.78719 19.4817 2.55609 19.306 2.45365 19.2305C1.99126 18.9289 1.8608 18.3095 2.1623 17.8469C2.46388 17.3843 3.08343 17.2537 3.5461 17.5552C3.6823 17.647 4.0182 17.8909 4.27229 18.1321C4.38098 17.9233 4.50113 17.7014 4.63181 17.4727C5.26563 16.3636 6.24325 14.9189 7.47006 14.1521C7.93839 13.8594 8.55534 14.0018 8.84805 14.4701Z" fill="currentColor"></path>
</svg>
);
export const LeftToRightBlockQuoteIcon = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={64} height={64} color={"currentColor"} fill={"none"} {...props}>
<path fillRule="evenodd" clipRule="evenodd" d="M8 6C8 5.44772 8.44772 5 9 5L17 5C17.5523 5 18 5.44772 18 6C18 6.55229 17.5523 7 17 7L9 7C8.44772 7 8 6.55228 8 6Z" fill="currentColor"></path>
<path fillRule="evenodd" clipRule="evenodd" d="M8 12C8 11.4477 8.44772 11 9 11L19 11C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13L9 13C8.44772 13 8 12.5523 8 12Z" fill="currentColor"></path>
<path fillRule="evenodd" clipRule="evenodd" d="M8 18C8 17.4477 8.44772 17 9 17L17 17C17.5523 17 18 17.4477 18 18C18 18.5523 17.5523 19 17 19L9 19C8.44772 19 8 18.5523 8 18Z" fill="currentColor"></path>
<path fillRule="evenodd" clipRule="evenodd" d="M5 2C5.55228 2 6 2.44772 6 3L6 21C6 21.5523 5.55228 22 5 22C4.44771 22 4 21.5523 4 21L4 3C4 2.44772 4.44772 2 5 2Z" fill="currentColor"></path>
</svg>
);
export const SourceCodeIcon = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={64} height={64} color={"currentColor"} fill={"none"} {...props}>
<path d="M16.2949 7.29093C15.9033 7.68036 15.9015 8.31353 16.2909 8.70514L18.1307 10.5552C18.5374 10.9641 18.77 11.201 18.9133 11.3899C18.9517 11.4405 18.9747 11.4764 18.9882 11.5C18.9747 11.5236 18.9517 11.5595 18.9133 11.6101C18.77 11.799 18.5374 12.0359 18.1307 12.4448L16.2909 14.2949C15.9015 14.6865 15.9033 15.3196 16.2949 15.7091C16.6865 16.0985 17.3196 16.0967 17.7091 15.7051L19.5489 13.8551L19.5892 13.8145C19.9411 13.4608 20.2721 13.128 20.5066 12.819C20.7677 12.4748 21 12.0465 21 11.5C21 10.9535 20.7677 10.5252 20.5066 10.181C20.2721 9.87202 19.9411 9.53924 19.5892 9.1855L19.5892 9.18549L19.5489 9.14495L17.7091 7.29486C17.3196 6.90325 16.6865 6.90149 16.2949 7.29093Z" fill="currentColor"></path>
<path d="M7.70514 7.29093C8.09675 7.68036 8.09851 8.31353 7.70907 8.70514L5.86926 10.5552C5.46264 10.9641 5.23002 11.201 5.08669 11.3899C5.0483 11.4405 5.02527 11.4764 5.01181 11.5C5.02527 11.5236 5.0483 11.5595 5.08669 11.6101C5.23002 11.799 5.46264 12.0359 5.86926 12.4448L7.70907 14.2949C8.09851 14.6865 8.09675 15.3196 7.70514 15.7091C7.31353 16.0985 6.68036 16.0967 6.29093 15.7051L4.45112 13.8551L4.41079 13.8145C4.05891 13.4608 3.72787 13.128 3.4934 12.819C3.23231 12.4748 3 12.0465 3 11.5C3 10.9535 3.23231 10.5252 3.4934 10.181C3.72787 9.87202 4.0589 9.53924 4.41079 9.1855L4.41079 9.18549L4.45112 9.14495L6.29093 7.29486C6.68036 6.90325 7.31353 6.90149 7.70514 7.29093Z" fill="currentColor"></path>
<path fillRule="evenodd" clipRule="evenodd" d="M14.7985 3.04579C15.3257 3.21052 15.6195 3.7714 15.4547 4.29854L10.4547 20.2985C10.29 20.8257 9.72914 21.1195 9.20199 20.9547C8.67485 20.79 8.38105 20.2291 8.54579 19.702L13.5458 3.70199C13.7105 3.17485 14.2714 2.88105 14.7985 3.04579Z" fill="currentColor"></path>
</svg>
);
export const SeparatorHorizontalIcon = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={64} height={64} color={"currentColor"} fill={"none"} {...props}>
<path d="M15.1939 16.4073C15.5213 15.9628 16.1477 15.8673 16.5924 16.1944C17.0369 16.5219 17.1324 17.1482 16.8052 17.5929H16.8043V17.5948C16.8039 17.5954 16.803 17.5959 16.8023 17.5968C16.8006 17.5991 16.7976 17.6024 16.7945 17.6066C16.7883 17.6149 16.7797 17.6272 16.7681 17.6427C16.7451 17.6736 16.7112 17.718 16.6685 17.7745C16.5832 17.8875 16.4611 18.0482 16.3111 18.2403C16.012 18.6237 15.5992 19.138 15.15 19.6554C14.705 20.1679 14.2041 20.7061 13.731 21.1241C13.4957 21.332 13.2441 21.5319 12.9908 21.6847C12.7648 21.8209 12.4098 22.0001 11.9996 22.0001C11.5893 22.0001 11.2344 21.8209 11.0084 21.6847C10.755 21.5319 10.5034 21.332 10.2681 21.1241C9.79505 20.7061 9.29417 20.1679 8.84919 19.6554C8.39998 19.138 7.98721 18.6237 7.68806 18.2403C7.53807 18.0482 7.41595 17.8875 7.33064 17.7745C7.28796 17.718 7.25406 17.6736 7.23103 17.6427C7.21951 17.6272 7.21083 17.6149 7.20466 17.6066C7.20162 17.6024 7.1995 17.5991 7.19782 17.5968C7.197 17.5957 7.19538 17.5955 7.19489 17.5948V17.5929H7.19392C6.86677 17.1482 6.96231 16.5228 7.40681 16.1954C7.8515 15.8679 8.47773 15.9626 8.80525 16.4073L8.80622 16.4093C8.80738 16.4109 8.80971 16.4129 8.81208 16.4161C8.81711 16.4229 8.82431 16.4336 8.83454 16.4474C8.85518 16.4751 8.88641 16.5166 8.92634 16.5694C9.00621 16.6752 9.12175 16.8273 9.26423 17.0099C9.55034 17.3765 9.94001 17.8623 10.359 18.3448C10.7822 18.8323 11.2166 19.2941 11.5924 19.6261C11.7574 19.7719 11.8949 19.8744 11.9996 19.9425C12.1042 19.8744 12.2417 19.7719 12.4068 19.6261C12.7825 19.2941 13.2169 18.8323 13.6402 18.3448C14.0591 17.8623 14.4488 17.3765 14.7349 17.0099C14.8774 16.8273 14.993 16.6752 15.0728 16.5694C15.1128 16.5166 15.144 16.4751 15.1646 16.4474C15.1748 16.4336 15.1821 16.4229 15.1871 16.4161C15.1894 16.4129 15.1918 16.4109 15.1929 16.4093L15.1939 16.4073Z" fill="currentColor"></path>
<path d="M11.9996 2C12.4098 2 12.7648 2.17918 12.9908 2.31543C13.2441 2.46819 13.4957 2.66807 13.731 2.87598C14.2041 3.29398 14.705 3.83223 15.15 4.34473C15.5992 4.86212 16.012 5.37644 16.3111 5.75977C16.4611 5.95194 16.5832 6.11263 16.6685 6.22559C16.7112 6.28207 16.7451 6.32652 16.7681 6.35742C16.7797 6.37287 16.7883 6.38523 16.7945 6.39355C16.7976 6.39768 16.8006 6.40104 16.8023 6.40332C16.803 6.40422 16.8039 6.40471 16.8043 6.40527V6.40723H16.8052C17.1324 6.8519 17.0369 7.47825 16.5924 7.80566C16.1477 8.13284 15.5213 8.03735 15.1939 7.59277L15.1929 7.59082C15.1918 7.58925 15.1894 7.58718 15.1871 7.58398C15.1821 7.5772 15.1748 7.56646 15.1646 7.55273C15.144 7.52504 15.1128 7.48354 15.0728 7.43066C14.993 7.32492 14.8774 7.17281 14.7349 6.99023C14.4488 6.62362 14.0591 6.1378 13.6402 5.65527C13.2169 5.16777 12.7825 4.70602 12.4068 4.37402C12.2415 4.22796 12.1043 4.12471 11.9996 4.05664C11.8949 4.12471 11.7577 4.22797 11.5924 4.37402C11.2166 4.70602 10.7822 5.16778 10.359 5.65527C9.94001 6.13779 9.55034 6.62362 9.26423 6.99023C9.12175 7.17281 9.00621 7.32493 8.92634 7.43066C8.88641 7.48353 8.85518 7.52504 8.83454 7.55273C8.82431 7.56646 8.81711 7.5772 8.81208 7.58398C8.80971 7.58719 8.80738 7.58925 8.80622 7.59082L8.80525 7.59277L8.73982 7.67188C8.39956 8.04764 7.82375 8.11177 7.40681 7.80469C6.96231 7.47726 6.86677 6.85187 7.19392 6.40723H7.19489V6.40527C7.19538 6.40461 7.197 6.40443 7.19782 6.40332C7.1995 6.40105 7.20162 6.39766 7.20466 6.39355C7.21083 6.38523 7.21951 6.37287 7.23103 6.35742C7.25406 6.32652 7.28796 6.28209 7.33064 6.22559C7.41595 6.11263 7.53807 5.95195 7.68806 5.75977C7.98721 5.37645 8.39998 4.86211 8.84919 4.34473C9.29417 3.83223 9.79505 3.29398 10.2681 2.87598C10.5034 2.66808 10.755 2.46819 11.0084 2.31543C11.2344 2.17919 11.5893 2.00001 11.9996 2Z" fill="currentColor"></path>
<path d="M20.9996 11C21.5519 11 21.9996 11.4477 21.9996 12C21.9996 12.5523 21.5519 13 20.9996 13H2.99963C2.44735 13 1.99963 12.5523 1.99963 12C1.99963 11.4477 2.44735 11 2.99963 11H20.9996Z" fill="currentColor"></path>
</svg>
);
export const Image01Icon = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={64} height={64} color={"currentColor"} fill={"none"} {...props}>
<path fillRule="evenodd" clipRule="evenodd" d="M12.0745 1.5H11.9256H11.9255C9.74958 1.49998 8.01484 1.49996 6.65471 1.68282C5.25033 1.87164 4.09653 2.27175 3.18414 3.18414C2.27175 4.09653 1.87164 5.25033 1.68282 6.65471C1.49996 8.01484 1.49998 9.74956 1.5 11.9255V11.9255V12.0745V12.0745C1.49998 14.2504 1.49996 15.9852 1.68282 17.3453C1.87164 18.7497 2.27175 19.9035 3.18414 20.8159C4.09653 21.7283 5.25033 22.1284 6.65471 22.3172C8.01485 22.5 9.74959 22.5 11.9256 22.5H12.0744C14.2504 22.5 15.9851 22.5 17.3453 22.3172C18.7497 22.1284 19.9035 21.7283 20.8159 20.8159C21.7283 19.9035 22.1284 18.7497 22.3172 17.3453C22.5 15.9852 22.5 14.2504 22.5 12.0744V11.9256C22.5 9.74959 22.5 8.01485 22.3172 6.65471C22.1284 5.25033 21.7283 4.09653 20.8159 3.18414C19.9035 2.27175 18.7497 1.87164 17.3453 1.68282C15.9852 1.49996 14.2504 1.49998 12.0745 1.5H12.0745ZM5.5 7.5C5.5 6.39543 6.39543 5.5 7.5 5.5C8.60457 5.5 9.5 6.39543 9.5 7.5C9.5 8.60457 8.60457 9.5 7.5 9.5C6.39543 9.5 5.5 8.60457 5.5 7.5ZM6.92183 20.335C6.79989 20.3186 6.68349 20.3008 6.57227 20.2814C8.47707 17.9776 10.4184 15.6499 12.5989 14.1878C13.8589 13.343 15.1548 12.8211 16.5241 12.7568C17.7246 12.7003 19.0389 12.9927 20.4962 13.8125C20.4859 15.1635 20.4512 16.219 20.3356 17.0788C20.1766 18.2614 19.8811 18.9228 19.4023 19.4016C18.9234 19.8805 18.262 20.176 17.0794 20.335C15.8681 20.4979 14.2681 20.5 12.0006 20.5C9.73319 20.5 8.1332 20.4979 6.92183 20.335Z" fill="currentColor"></path>
</svg>
);