feat(editor): create gfx mindmap package (#11100)

2025-03-24 03:14:22 +00:00
1 parent ed888d6507
commit 8e08b9000d
@@ -0,0 +1,20 @@
+import { MindMapPlaceholder } from './toolbar/mindmap-importing-placeholder';
+import { EdgelessMindmapMenu } from './toolbar/mindmap-menu';
+import { EdgelessMindmapToolButton } from './toolbar/mindmap-tool-button';
+
+export function effects() {
+  customElements.define(
+    'edgeless-mindmap-tool-button',
+    EdgelessMindmapToolButton
+  );
+  customElements.define('edgeless-mindmap-menu', EdgelessMindmapMenu);
+  customElements.define('mindmap-import-placeholder', MindMapPlaceholder);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'edgeless-mindmap-tool-button': EdgelessMindmapToolButton;
+    'edgeless-mindmap-menu': EdgelessMindmapMenu;
+    'mindmap-import-placeholder': MindMapPlaceholder;
+  }
+}
@@ -0,0 +1 @@
+export * from './toolbar/config';
@@ -0,0 +1,46 @@
+import { ColorScheme, MindmapStyle } from '@blocksuite/affine-model';
+import type { TemplateResult } from 'lit';
+
+import { type DraggableTool, getMindmapRender } from './basket-elements.js';
+import {
+  mindMapStyle1Dark,
+  mindMapStyle1Light,
+  mindMapStyle2Dark,
+  mindMapStyle2Light,
+  mindMapStyle3,
+  mindMapStyle4,
+} from './icons.js';
+
+export type ToolbarMindmapItem = {
+  type: 'mindmap';
+  icon: TemplateResult;
+  style: MindmapStyle;
+  render: DraggableTool['render'];
+};
+
+export const getMindMaps = (theme: ColorScheme): ToolbarMindmapItem[] => [
+  {
+    type: 'mindmap',
+    icon: theme === ColorScheme.Dark ? mindMapStyle1Dark : mindMapStyle1Light,
+    style: MindmapStyle.ONE,
+    render: getMindmapRender(MindmapStyle.ONE),
+  },
+  {
+    type: 'mindmap',
+    icon: mindMapStyle4,
+    style: MindmapStyle.FOUR,
+    render: getMindmapRender(MindmapStyle.FOUR),
+  },
+  {
+    type: 'mindmap',
+    icon: mindMapStyle3,
+    style: MindmapStyle.THREE,
+    render: getMindmapRender(MindmapStyle.THREE),
+  },
+  {
+    type: 'mindmap',
+    icon: theme === 'light' ? mindMapStyle2Light : mindMapStyle2Dark,
+    style: MindmapStyle.TWO,
+    render: getMindmapRender(MindmapStyle.TWO),
+  },
+];
@@ -0,0 +1,206 @@
+import { addAttachments } from '@blocksuite/affine-block-attachment';
+import { insertEdgelessTextCommand } from '@blocksuite/affine-block-edgeless-text';
+import { addImages } from '@blocksuite/affine-block-image';
+import {
+  CanvasElementType,
+  EdgelessCRUDIdentifier,
+} from '@blocksuite/affine-block-surface';
+import { mountTextElementEditor } from '@blocksuite/affine-gfx-text';
+import {
+  MAX_IMAGE_WIDTH,
+  type MindmapStyle,
+  TextElementModel,
+} from '@blocksuite/affine-model';
+import {
+  FeatureFlagService,
+  TelemetryProvider,
+} from '@blocksuite/affine-shared/services';
+import { openFileOrFiles } from '@blocksuite/affine-shared/utils';
+import type { BlockComponent } from '@blocksuite/block-std';
+import { Bound } from '@blocksuite/global/gfx';
+import type { TemplateResult } from 'lit';
+import * as Y from 'yjs';
+
+export type ConfigProperty = 'x' | 'y' | 'r' | 's' | 'z' | 'o';
+export type ConfigState = 'default' | 'active' | 'hover' | 'next';
+export type ConfigStyle = Partial<Record<ConfigProperty, number | string>>;
+export type ToolConfig = Record<ConfigState, ConfigStyle>;
+
+export type DraggableTool = {
+  name: 'text' | 'mindmap' | 'media';
+  icon: TemplateResult;
+  config: ToolConfig;
+  standardWidth?: number;
+  render: (bound: Bound, edgeless: BlockComponent) => Promise<string | null>;
+};
+
+const unitMap = { x: 'px', y: 'px', r: 'deg', s: '', z: '', o: '' };
+export const textConfig: ToolConfig = {
+  default: { x: -20, y: -8, r: 7.74, s: 0.92, z: 3 },
+  active: { x: -22, y: -9, r: -8, s: 0.92 },
+  hover: { x: -22, y: -9, r: -8, s: 1, z: 3 },
+  next: { x: -22, y: 64, r: 0 },
+};
+export const mindmapConfig: ToolConfig = {
+  default: { x: 4, y: -4, s: 1, r: -7, z: 2 },
+  active: { x: 11, y: -14, r: 9, s: 1 },
+  hover: { x: 11, y: -14, r: 9, s: 1.16, z: 3 },
+  next: { y: 64, r: 0 },
+};
+export const mediaConfig: ToolConfig = {
+  default: { x: -20, y: -15, r: 23, s: 1.2, z: 1 },
+  active: { x: -25, y: -20, r: -9, s: 1.2 },
+  hover: { x: -25, y: -20, r: -9, s: 1.5, z: 3 },
+  next: { y: 64, r: 0 },
+};
+
+export const getMindmapRender =
+  (mindmapStyle: MindmapStyle): DraggableTool['render'] =>
+  async (bound, edgeless) => {
+    const [x, y, _, h] = bound.toXYWH();
+
+    const rootW = 145;
+    const rootH = 50;
+
+    const nodeW = 80;
+    const nodeH = 35;
+
+    const centerVertical = y + h / 2;
+    const rootX = x;
+    const rootY = centerVertical - rootH / 2;
+
+    type MindMapNode = {
+      children: MindMapNode[];
+      text: string;
+      xywh: string;
+    };
+
+    const root: MindMapNode = {
+      children: [],
+      text: 'Mind Map',
+      xywh: `[${rootX},${rootY},${rootW},${rootH}]`,
+    };
+
+    for (let i = 0; i < 3; i++) {
+      const nodeX = x + rootW + 300;
+      const nodeY = centerVertical - nodeH / 2 + (i - 1) * 50;
+      root.children.push({
+        children: [],
+        text: 'Text',
+        xywh: `[${nodeX},${nodeY},${nodeW},${nodeH}]`,
+      });
+    }
+
+    const crud = edgeless.std.get(EdgelessCRUDIdentifier);
+    const mindmapId = crud.addElement('mindmap', {
+      style: mindmapStyle,
+      children: root,
+    }) as string;
+
+    edgeless.std.getOptional(TelemetryProvider)?.track('CanvasElementAdded', {
+      control: 'toolbar:dnd', // for now we use toolbar:dnd for all mindmap creation here
+      page: 'whiteboard editor',
+      module: 'toolbar',
+      segment: 'toolbar',
+      type: 'mindmap',
+    });
+
+    return mindmapId;
+  };
+
+export const textRender: DraggableTool['render'] = async (bound, edgeless) => {
+  const vCenter = bound.y + bound.h / 2;
+  const w = 100;
+  const h = 32;
+
+  const flag = edgeless.doc
+    .get(FeatureFlagService)
+    .getFlag('enable_edgeless_text');
+  let id: string;
+  if (flag) {
+    const [_, { textId }] = edgeless.std.command.exec(
+      insertEdgelessTextCommand,
+      {
+        x: bound.x,
+        y: vCenter - h / 2,
+      }
+    );
+    id = textId!;
+  } else {
+    const crud = edgeless.std.get(EdgelessCRUDIdentifier);
+    id = crud.addElement(CanvasElementType.TEXT, {
+      xywh: new Bound(bound.x, vCenter - h / 2, w, h).serialize(),
+      text: new Y.Text(),
+    }) as string;
+
+    edgeless.doc.captureSync();
+    const textElement = crud.getElementById(id);
+    if (!(textElement instanceof TextElementModel)) {
+      console.error('Cannot mount text editor on a non-text element');
+      return null;
+    }
+    mountTextElementEditor(textElement, edgeless);
+  }
+
+  edgeless.std.getOptional(TelemetryProvider)?.track('CanvasElementAdded', {
+    control: 'toolbar:dnd',
+    page: 'whiteboard editor',
+    module: 'toolbar',
+    segment: 'toolbar',
+    type: 'text',
+  });
+
+  return id;
+};
+
+export const mediaRender: DraggableTool['render'] = async (bound, edgeless) => {
+  let file: File | null = null;
+  try {
+    file = await openFileOrFiles();
+  } catch (e) {
+    console.error(e);
+    return null;
+  }
+  if (!file) return null;
+
+  // image
+  if (file.type.startsWith('image/')) {
+    const [id] = await addImages(edgeless.std, [file], {
+      point: [bound.x, bound.y],
+      maxWidth: MAX_IMAGE_WIDTH,
+      transformPoint: false,
+    });
+    if (id) return id;
+    return null;
+  }
+
+  // attachment
+  const [id] = await addAttachments(
+    edgeless.std,
+    [file],
+    [bound.x, bound.y],
+    false
+  );
+  return id;
+};
+
+const toolStyle2StyleObj = (state: ConfigState, style: ConfigStyle = {}) => {
+  const styleObj = {} as Record<string, string>;
+  for (const [key, value] of Object.entries(style)) {
+    styleObj[`--${state}-${key}`] = `${value}${unitMap[key as ConfigProperty]}`;
+  }
+  return styleObj;
+};
+export const toolConfig2StyleObj = (config: ToolConfig) => {
+  const styleObj = {} as Record<string, string>;
+  for (const [state, style] of Object.entries(config)) {
+    Object.assign(
+      styleObj,
+      toolStyle2StyleObj(state as ConfigState, {
+        ...config.default,
+        ...style,
+      })
+    );
+  }
+  return styleObj;
+};
@@ -0,0 +1,135 @@
+import {
+  MindmapStyleFour,
+  MindmapStyleOne,
+  MindmapStyleThree,
+  MindmapStyleTwo,
+} from '@blocksuite/affine-block-surface';
+import {
+  LayoutType,
+  MindmapElementModel,
+  MindmapStyle,
+} from '@blocksuite/affine-model';
+import {
+  type ToolbarContext,
+  type ToolbarModuleConfig,
+  ToolbarModuleExtension,
+} from '@blocksuite/affine-shared/services';
+import { getMostCommonValue } from '@blocksuite/affine-shared/utils';
+import {
+  type MenuItem,
+  renderMenu,
+} from '@blocksuite/affine-widget-edgeless-toolbar';
+import { BlockFlavourIdentifier } from '@blocksuite/block-std';
+import { RadiantIcon, RightLayoutIcon, StyleIcon } from '@blocksuite/icons/lit';
+
+const MINDMAP_STYLE_LIST = [
+  {
+    value: MindmapStyle.ONE,
+    icon: MindmapStyleOne,
+  },
+  {
+    value: MindmapStyle.FOUR,
+    icon: MindmapStyleFour,
+  },
+  {
+    value: MindmapStyle.THREE,
+    icon: MindmapStyleThree,
+  },
+  {
+    value: MindmapStyle.TWO,
+    icon: MindmapStyleTwo,
+  },
+] as const satisfies MenuItem<MindmapStyle>[];
+
+const MINDMAP_LAYOUT_LIST = [
+  {
+    key: 'Left',
+    value: LayoutType.LEFT,
+    icon: RightLayoutIcon({
+      style: 'transform: rotate(0.5turn); transform-origin: center;',
+    }),
+  },
+  {
+    key: 'Radial',
+    value: LayoutType.BALANCE,
+    icon: RadiantIcon(),
+  },
+  {
+    key: 'Right',
+    value: LayoutType.RIGHT,
+    icon: RightLayoutIcon(),
+  },
+] as const satisfies MenuItem<LayoutType>[];
+
+export const createMindmapStyleActionMenu = (
+  ctx: ToolbarContext,
+  models: MindmapElementModel[]
+) => {
+  const style = getMostCommonValue(models, 'style') ?? MindmapStyle.ONE;
+  const onPick = (style: MindmapStyle) => {
+    for (const model of models) {
+      model.style = style;
+    }
+    ctx.settings.recordLastProps('mindmap', { style });
+  };
+
+  return renderMenu({
+    label: 'Style',
+    icon: StyleIcon(),
+    items: MINDMAP_STYLE_LIST,
+    currentValue: style,
+    onPick,
+  });
+};
+
+export const createMindmapLayoutActionMenu = (
+  ctx: ToolbarContext,
+  models: MindmapElementModel[]
+) => {
+  const layoutType =
+    getMostCommonValue(models, 'layoutType') ?? LayoutType.BALANCE;
+  const onPick = (layoutType: LayoutType) => {
+    for (const model of models) {
+      model.layoutType = layoutType;
+      model.layout();
+    }
+    ctx.settings.recordLastProps('mindmap', { layoutType });
+  };
+
+  return renderMenu({
+    label: 'Layout',
+    items: MINDMAP_LAYOUT_LIST,
+    currentValue: layoutType,
+    onPick,
+  });
+};
+
+export const mindmapToolbarConfig = {
+  actions: [
+    {
+      id: 'a.style',
+      content(ctx) {
+        const models = ctx.getSurfaceModelsByType(MindmapElementModel);
+        if (!models.length) return null;
+
+        return createMindmapStyleActionMenu(ctx, models);
+      },
+    },
+    {
+      id: 'b.layout',
+      content(ctx) {
+        const models = ctx.getSurfaceModelsByType(MindmapElementModel);
+        if (!models.length) return null;
+
+        return createMindmapLayoutActionMenu(ctx, models);
+      },
+    },
+  ],
+
+  when: ctx => ctx.getSurfaceModelsByType(MindmapElementModel).length > 0,
+} as const satisfies ToolbarModuleConfig;
+
+export const mindmapToolbarExtension = ToolbarModuleExtension({
+  id: BlockFlavourIdentifier('affine:surface:mindmap'),
+  config: mindmapToolbarConfig,
+});
@@ -0,0 +1,619 @@
+import { svg } from 'lit';
+
+export const basketIconLight = svg`<svg width="76" height="17" viewBox="0 0 76 17" fill="none" xmlns="http://www.w3.org/2000/svg"
+xmlns:xlink="http://www.w3.org/1999/xlink">
+<g filter="url(#filter0_b_5310_64490)">
+  <mask id="path-1-inside-1_5310_64490" fill="white">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M4 1.62744C2.89543 1.62744 2 2.52287 2 3.62744V29.6088H73.943V3.62744C73.943 2.52287 73.0476 1.62744 71.943 1.62744H4ZM25.5294 5.94132C23.97 5.94132 22.7059 7.20546 22.7059 8.76485C22.7059 10.3242 23.97 11.5884 25.5294 11.5884H50.9412C52.5006 11.5884 53.7647 10.3242 53.7647 8.76485C53.7647 7.20546 52.5006 5.94132 50.9412 5.94132H25.5294Z" />
+  </mask>
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M4 1.62744C2.89543 1.62744 2 2.52287 2 3.62744V29.6088H73.943V3.62744C73.943 2.52287 73.0476 1.62744 71.943 1.62744H4ZM25.5294 5.94132C23.97 5.94132 22.7059 7.20546 22.7059 8.76485C22.7059 10.3242 23.97 11.5884 25.5294 11.5884H50.9412C52.5006 11.5884 53.7647 10.3242 53.7647 8.76485C53.7647 7.20546 52.5006 5.94132 50.9412 5.94132H25.5294Z"
+    fill="url(#paint0_linear_5310_64490)" fill-opacity="0.2" />
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M4 1.62744C2.89543 1.62744 2 2.52287 2 3.62744V29.6088H73.943V3.62744C73.943 2.52287 73.0476 1.62744 71.943 1.62744H4ZM25.5294 5.94132C23.97 5.94132 22.7059 7.20546 22.7059 8.76485C22.7059 10.3242 23.97 11.5884 25.5294 11.5884H50.9412C52.5006 11.5884 53.7647 10.3242 53.7647 8.76485C53.7647 7.20546 52.5006 5.94132 50.9412 5.94132H25.5294Z"
+    fill="url(#pattern0_5310_64490)" fill-opacity="0.2" />
+  <path
+    d="M2 29.6088H1V30.6088H2V29.6088ZM73.943 29.6088V30.6088H74.943V29.6088H73.943ZM3 3.62744C3 3.07516 3.44772 2.62744 4 2.62744V0.627441C2.34315 0.627441 1 1.97059 1 3.62744H3ZM3 29.6088V3.62744H1V29.6088H3ZM73.943 28.6088H2V30.6088H73.943V28.6088ZM72.943 3.62744V29.6088H74.943V3.62744H72.943ZM71.943 2.62744C72.4953 2.62744 72.943 3.07515 72.943 3.62744H74.943C74.943 1.97059 73.5999 0.627441 71.943 0.627441V2.62744ZM4 2.62744H71.943V0.627441H4V2.62744ZM23.7059 8.76485C23.7059 7.75774 24.5223 6.94132 25.5294 6.94132V4.94132C23.4177 4.94132 21.7059 6.65317 21.7059 8.76485H23.7059ZM25.5294 10.5884C24.5223 10.5884 23.7059 9.77196 23.7059 8.76485H21.7059C21.7059 10.8765 23.4177 12.5884 25.5294 12.5884V10.5884ZM50.9412 10.5884H25.5294V12.5884H50.9412V10.5884ZM52.7647 8.76485C52.7647 9.77196 51.9483 10.5884 50.9412 10.5884V12.5884C53.0529 12.5884 54.7647 10.8765 54.7647 8.76485H52.7647ZM50.9412 6.94132C51.9483 6.94132 52.7647 7.75774 52.7647 8.76485H54.7647C54.7647 6.65317 53.0529 4.94132 50.9412 4.94132V6.94132ZM25.5294 6.94132H50.9412V4.94132H25.5294V6.94132Z"
+    fill="#DFDFDF" mask="url(#path-1-inside-1_5310_64490)" />
+  <path
+    d="M2 29.6088H1V30.6088H2V29.6088ZM73.943 29.6088V30.6088H74.943V29.6088H73.943ZM3 3.62744C3 3.07516 3.44772 2.62744 4 2.62744V0.627441C2.34315 0.627441 1 1.97059 1 3.62744H3ZM3 29.6088V3.62744H1V29.6088H3ZM73.943 28.6088H2V30.6088H73.943V28.6088ZM72.943 3.62744V29.6088H74.943V3.62744H72.943ZM71.943 2.62744C72.4953 2.62744 72.943 3.07515 72.943 3.62744H74.943C74.943 1.97059 73.5999 0.627441 71.943 0.627441V2.62744ZM4 2.62744H71.943V0.627441H4V2.62744ZM23.7059 8.76485C23.7059 7.75774 24.5223 6.94132 25.5294 6.94132V4.94132C23.4177 4.94132 21.7059 6.65317 21.7059 8.76485H23.7059ZM25.5294 10.5884C24.5223 10.5884 23.7059 9.77196 23.7059 8.76485H21.7059C21.7059 10.8765 23.4177 12.5884 25.5294 12.5884V10.5884ZM50.9412 10.5884H25.5294V12.5884H50.9412V10.5884ZM52.7647 8.76485C52.7647 9.77196 51.9483 10.5884 50.9412 10.5884V12.5884C53.0529 12.5884 54.7647 10.8765 54.7647 8.76485H52.7647ZM50.9412 6.94132C51.9483 6.94132 52.7647 7.75774 52.7647 8.76485H54.7647C54.7647 6.65317 53.0529 4.94132 50.9412 4.94132V6.94132ZM25.5294 6.94132H50.9412V4.94132H25.5294V6.94132Z"
+    fill="url(#paint1_linear_5310_64490)" fill-opacity="0.2" mask="url(#path-1-inside-1_5310_64490)" />
+</g>
+<g filter="url(#filter1_f_5310_64490)">
+  <path
+    d="M70.2669 3.15204C71.3826 3.15204 72.2871 4.05651 72.2871 5.17224L72.2871 17.0683C72.2871 18.2224 71.3515 19.158 70.1974 19.158C68.779 19.158 67.7727 17.775 68.209 16.4254L69.6661 11.919C69.9708 10.9766 69.9431 9.95821 69.5876 9.03381L68.3813 5.8974C67.8725 4.57417 68.8492 3.15204 70.2669 3.15204Z"
+    fill="url(#paint2_linear_5310_64490)" />
+</g>
+<g filter="url(#filter2_f_5310_64490)">
+  <path
+    d="M6.71501 5.1665C5.1902 5.1665 3.9541 6.40261 3.9541 7.92741L3.9541 13.7517C3.9541 15.4078 5.29667 16.7504 6.9528 16.7504L7.67637 16.7504C9.95388 16.7504 11.1826 14.079 9.70058 12.3497L9.43766 12.0429C8.67279 11.1505 8.73042 9.8179 9.56949 8.9948C10.9975 7.59395 10.0056 5.1665 8.00525 5.1665L6.71501 5.1665Z"
+    fill="url(#paint3_linear_5310_64490)" />
+</g>
+<defs>
+  <filter id="filter0_b_5310_64490" x="0" y="-0.372559" width="75.9434" height="31.9814" filterUnits="userSpaceOnUse"
+    color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    <feGaussianBlur in="BackgroundImageFix" stdDeviation="1" />
+    <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_5310_64490" />
+    <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_5310_64490" result="shape" />
+  </filter>
+  <pattern id="pattern0_5310_64490" patternContentUnits="objectBoundingBox" width="1.49325" height="3.83929">
+    <use xlink:href="#image0_5310_64490" transform="scale(0.000729125 0.00187465)" />
+  </pattern>
+  <filter id="filter1_f_5310_64490" x="65.1064" y="0.152039" width="10.1807" height="22.006"
+    filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+    <feGaussianBlur stdDeviation="1.5" result="effect1_foregroundBlur_5310_64490" />
+  </filter>
+  <filter id="filter2_f_5310_64490" x="0.954102" y="2.1665" width="12.3936" height="17.5839"
+    filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+    <feGaussianBlur stdDeviation="1.5" result="effect1_foregroundBlur_5310_64490" />
+  </filter>
+  <linearGradient id="paint0_linear_5310_64490" x1="3.19554" y1="11.2178" x2="72.9973" y2="11.6556"
+    gradientUnits="userSpaceOnUse">
+    <stop stop-opacity="0" />
+    <stop offset="0.848958" stop-opacity="0.66" />
+    <stop offset="1" stop-opacity="0" />
+  </linearGradient>
+  <linearGradient id="paint1_linear_5310_64490" x1="2" y1="5.50025" x2="74" y2="7.50025"
+    gradientUnits="userSpaceOnUse">
+    <stop stop-color="white" stop-opacity="0.12" />
+    <stop offset="0.71" stop-opacity="0.77" />
+    <stop offset="1" stop-opacity="0.12" />
+  </linearGradient>
+  <linearGradient id="paint2_linear_5310_64490" x1="70.1607" y1="3.80093" x2="70.1607" y2="20.4558"
+    gradientUnits="userSpaceOnUse">
+    <stop stop-color="white" />
+    <stop offset="1" stop-color="white" stop-opacity="0" />
+  </linearGradient>
+  <linearGradient id="paint3_linear_5310_64490" x1="8.03322" y1="5.63612" x2="8.03322" y2="17.6896"
+    gradientUnits="userSpaceOnUse">
+    <stop stop-color="white" />
+    <stop offset="1" stop-color="white" stop-opacity="0" />
+  </linearGradient>
+</defs>
+</svg>`;
+
+export const basketIconDark = svg`<svg width="75" height="17" viewBox="0 0 75 17" fill="none" xmlns="http://www.w3.org/2000/svg"
+xmlns:xlink="http://www.w3.org/1999/xlink">
+<g filter="url(#filter0_b_5310_64515)">
+  <mask id="path-1-inside-1_5310_64515" fill="white">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M3 1.62744C1.89543 1.62744 1 2.52287 1 3.62744V29.6088H72.943V3.62744C72.943 2.52287 72.0476 1.62744 70.943 1.62744H3ZM24.5294 5.94132C22.97 5.94132 21.7059 7.20546 21.7059 8.76485C21.7059 10.3242 22.97 11.5884 24.5294 11.5884H49.9412C51.5006 11.5884 52.7647 10.3242 52.7647 8.76485C52.7647 7.20546 51.5006 5.94132 49.9412 5.94132H24.5294Z" />
+  </mask>
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M3 1.62744C1.89543 1.62744 1 2.52287 1 3.62744V29.6088H72.943V3.62744C72.943 2.52287 72.0476 1.62744 70.943 1.62744H3ZM24.5294 5.94132C22.97 5.94132 21.7059 7.20546 21.7059 8.76485C21.7059 10.3242 22.97 11.5884 24.5294 11.5884H49.9412C51.5006 11.5884 52.7647 10.3242 52.7647 8.76485C52.7647 7.20546 51.5006 5.94132 49.9412 5.94132H24.5294Z"
+    fill="url(#paint0_linear_5310_64515)" fill-opacity="0.2" />
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M3 1.62744C1.89543 1.62744 1 2.52287 1 3.62744V29.6088H72.943V3.62744C72.943 2.52287 72.0476 1.62744 70.943 1.62744H3ZM24.5294 5.94132C22.97 5.94132 21.7059 7.20546 21.7059 8.76485C21.7059 10.3242 22.97 11.5884 24.5294 11.5884H49.9412C51.5006 11.5884 52.7647 10.3242 52.7647 8.76485C52.7647 7.20546 51.5006 5.94132 49.9412 5.94132H24.5294Z"
+    fill="url(#pattern0_5310_64515)" fill-opacity="0.2" />
+  <path
+    d="M1 29.6088H0V30.6088H1V29.6088ZM72.943 29.6088V30.6088H73.943V29.6088H72.943ZM2 3.62744C2 3.07516 2.44772 2.62744 3 2.62744V0.627441C1.34315 0.627441 0 1.97059 0 3.62744H2ZM2 29.6088V3.62744H0V29.6088H2ZM72.943 28.6088H1V30.6088H72.943V28.6088ZM71.943 3.62744V29.6088H73.943V3.62744H71.943ZM70.943 2.62744C71.4953 2.62744 71.943 3.07515 71.943 3.62744H73.943C73.943 1.97059 72.5999 0.627441 70.943 0.627441V2.62744ZM3 2.62744H70.943V0.627441H3V2.62744ZM22.7059 8.76485C22.7059 7.75774 23.5223 6.94132 24.5294 6.94132V4.94132C22.4177 4.94132 20.7059 6.65317 20.7059 8.76485H22.7059ZM24.5294 10.5884C23.5223 10.5884 22.7059 9.77196 22.7059 8.76485H20.7059C20.7059 10.8765 22.4177 12.5884 24.5294 12.5884V10.5884ZM49.9412 10.5884H24.5294V12.5884H49.9412V10.5884ZM51.7647 8.76485C51.7647 9.77196 50.9483 10.5884 49.9412 10.5884V12.5884C52.0529 12.5884 53.7647 10.8765 53.7647 8.76485H51.7647ZM49.9412 6.94132C50.9483 6.94132 51.7647 7.75774 51.7647 8.76485H53.7647C53.7647 6.65317 52.0529 4.94132 49.9412 4.94132V6.94132ZM24.5294 6.94132H49.9412V4.94132H24.5294V6.94132Z"
+    fill="#7C7C7C" mask="url(#path-1-inside-1_5310_64515)" />
+  <path
+    d="M1 29.6088H0V30.6088H1V29.6088ZM72.943 29.6088V30.6088H73.943V29.6088H72.943ZM2 3.62744C2 3.07516 2.44772 2.62744 3 2.62744V0.627441C1.34315 0.627441 0 1.97059 0 3.62744H2ZM2 29.6088V3.62744H0V29.6088H2ZM72.943 28.6088H1V30.6088H72.943V28.6088ZM71.943 3.62744V29.6088H73.943V3.62744H71.943ZM70.943 2.62744C71.4953 2.62744 71.943 3.07515 71.943 3.62744H73.943C73.943 1.97059 72.5999 0.627441 70.943 0.627441V2.62744ZM3 2.62744H70.943V0.627441H3V2.62744ZM22.7059 8.76485C22.7059 7.75774 23.5223 6.94132 24.5294 6.94132V4.94132C22.4177 4.94132 20.7059 6.65317 20.7059 8.76485H22.7059ZM24.5294 10.5884C23.5223 10.5884 22.7059 9.77196 22.7059 8.76485H20.7059C20.7059 10.8765 22.4177 12.5884 24.5294 12.5884V10.5884ZM49.9412 10.5884H24.5294V12.5884H49.9412V10.5884ZM51.7647 8.76485C51.7647 9.77196 50.9483 10.5884 49.9412 10.5884V12.5884C52.0529 12.5884 53.7647 10.8765 53.7647 8.76485H51.7647ZM49.9412 6.94132C50.9483 6.94132 51.7647 7.75774 51.7647 8.76485H53.7647C53.7647 6.65317 52.0529 4.94132 49.9412 4.94132V6.94132ZM24.5294 6.94132H49.9412V4.94132H24.5294V6.94132Z"
+    fill="url(#paint1_linear_5310_64515)" fill-opacity="0.2" mask="url(#path-1-inside-1_5310_64515)" />
+</g>
+<g filter="url(#filter1_f_5310_64515)">
+  <path d="M71.5225 3.15186L71.5225 19.1578L66.5609 19.1578L68.0588 10.647L66.5609 3.15186L71.5225 3.15186Z"
+    fill="url(#paint2_linear_5310_64515)" fill-opacity="0.6" />
+</g>
+<g filter="url(#filter2_f_5310_64515)">
+  <path
+    d="M4.11816 3.11768C3.56588 3.11768 3.11816 3.56539 3.11816 4.11768L3.11816 18.1177C3.11816 18.67 3.56588 19.1177 4.11816 19.1177L10.2348 19.1177C10.9076 19.1177 11.3884 18.4666 11.1906 17.8236L9.77942 13.2373C9.73147 13.0815 9.72235 12.9163 9.75286 12.7561L11.3626 4.30479C11.48 3.68856 11.0076 3.11768 10.3803 3.11768L4.11816 3.11768Z"
+    fill="url(#paint3_linear_5310_64515)" fill-opacity="0.5" />
+</g>
+<defs>
+  <filter id="filter0_b_5310_64515" x="-1" y="-0.372559" width="75.9434" height="31.9814" filterUnits="userSpaceOnUse"
+    color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    <feGaussianBlur in="BackgroundImageFix" stdDeviation="1" />
+    <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_5310_64515" />
+    <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_5310_64515" result="shape" />
+  </filter>
+  <pattern id="pattern0_5310_64515" patternContentUnits="objectBoundingBox" width="1.49325" height="3.83929">
+    <use xlink:href="#image0_5310_64515" transform="scale(0.000729125 0.00187465)" />
+  </pattern>
+  <filter id="filter1_f_5310_64515" x="63.5605" y="0.151855" width="10.9619" height="22.006"
+    filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+    <feGaussianBlur stdDeviation="1.5" result="effect1_foregroundBlur_5310_64515" />
+  </filter>
+  <filter id="filter2_f_5310_64515" x="0.118164" y="0.117676" width="14.2627" height="22" filterUnits="userSpaceOnUse"
+    color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix" />
+    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+    <feGaussianBlur stdDeviation="1.5" result="effect1_foregroundBlur_5310_64515" />
+  </filter>
+  <linearGradient id="paint0_linear_5310_64515" x1="2.19554" y1="11.2178" x2="71.9973" y2="11.6556"
+    gradientUnits="userSpaceOnUse">
+    <stop stop-opacity="0" />
+    <stop offset="0.848958" stop-opacity="0.66" />
+    <stop offset="1" stop-opacity="0" />
+  </linearGradient>
+  <linearGradient id="paint1_linear_5310_64515" x1="1" y1="5.50025" x2="73" y2="7.50025"
+    gradientUnits="userSpaceOnUse">
+    <stop stop-color="white" stop-opacity="0.12" />
+    <stop offset="0.71" stop-opacity="0.77" />
+    <stop offset="1" stop-opacity="0.12" />
+  </linearGradient>
+  <linearGradient id="paint2_linear_5310_64515" x1="69.3961" y1="3.80075" x2="69.3961" y2="20.4556"
+    gradientUnits="userSpaceOnUse">
+    <stop stop-color="white" stop-opacity="0.2" />
+    <stop offset="1" stop-color="white" stop-opacity="0.12" />
+  </linearGradient>
+  <linearGradient id="paint3_linear_5310_64515" x1="6.74843" y1="3.76632" x2="6.74843" y2="20.415"
+    gradientUnits="userSpaceOnUse">
+    <stop stop-color="white" stop-opacity="0.2" />
+    <stop offset="1" stop-color="white" stop-opacity="0.12" />
+  </linearGradient>
+</defs>
+</svg>`;
+
+export const textIcon = svg`<svg width="54" height="24" viewBox="0 0 54 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_740_3589)">
+<mask id="path-1-outside-1_740_3589" maskUnits="userSpaceOnUse" x="0.875977" y="0.511719" width="52" height="22" fill="black">
+<rect fill="white" x="0.875977" y="0.511719" width="52" height="22"/>
+<path d="M7.52094 6.01159C5.67018 6.11441 4.65911 6.16582 4.48774 6.16582C4.07646 6.16582 3.66518 5.91734 3.2539 5.42037C2.84262 4.90627 2.63698 4.37503 2.63698 3.82666C2.63698 2.98696 5.07896 2.56711 9.96291 2.56711C12.4649 2.56711 14.3071 2.82416 15.4895 3.33826C16.6719 3.85236 17.2631 4.47785 17.2631 5.21473C17.2631 5.43751 17.1346 5.65172 16.8776 5.85736C16.6205 6.04586 16.2949 6.14011 15.9008 6.14011C15.5066 6.14011 14.7869 6.11441 13.7416 6.063C12.6962 6.01159 11.7451 5.97731 10.8883 5.96018C10.9568 6.16582 10.9911 6.40573 10.9911 6.67992C10.9911 6.9541 10.8883 7.49391 10.6827 8.29934C10.4942 9.10476 10.22 10.2272 9.8601 11.6667C9.50022 13.089 9.10608 14.8198 8.67766 16.8591C8.24925 18.8812 7.94935 20.0894 7.77799 20.4835C7.62376 20.8605 7.46953 21.049 7.3153 21.049C6.95543 21.049 6.5013 20.7234 5.95293 20.0722C5.42169 19.4039 5.15607 18.8641 5.15607 18.4528C5.15607 18.0415 5.50738 16.345 6.20998 13.3632C6.91259 10.3643 7.34957 7.91376 7.52094 6.01159ZM27.3638 12.7463C27.3638 13.586 26.7897 14.34 25.6416 15.0083C24.5106 15.6767 23.3453 16.0108 22.1457 16.0108C20.9461 16.0108 19.9608 15.9252 19.1896 15.7538C19.0354 16.2165 18.9583 16.6792 18.9583 17.1419C18.9583 17.6046 19.0354 17.9387 19.1896 18.1444C19.3438 18.3329 19.7294 18.4271 20.3463 18.4271C21.6316 18.4271 22.7283 18.3072 23.6366 18.0672C24.562 17.8273 25.0418 17.7074 25.0761 17.7074C25.7787 17.7074 26.13 17.9387 26.13 18.4014C26.13 19.0697 25.573 19.7038 24.4591 20.3036C23.3624 20.9034 22.0857 21.2033 20.6291 21.2033C19.1896 21.2033 18.0329 20.7491 17.1589 19.8409C16.2849 18.9326 15.848 17.8616 15.848 16.6278C15.848 15.3768 16.2078 14.0744 16.9276 12.7206C17.6644 11.3668 18.5813 10.2358 19.678 9.32754C20.7748 8.40215 21.8629 7.93946 22.9425 7.93946C24.0393 7.93946 25.0504 8.47927 25.9757 9.55888C26.9011 10.6214 27.3638 11.6838 27.3638 12.7463ZM24.382 12.335C24.382 12.1637 24.2021 11.9152 23.8422 11.5896C23.4824 11.264 23.1396 11.1012 22.814 11.1012C22.5056 11.1012 22.1029 11.3325 21.6059 11.7952C21.1089 12.2408 20.6377 12.8234 20.1921 13.5432C20.3463 13.5603 20.5691 13.5689 20.8604 13.5689C23.2082 13.5689 24.382 13.1576 24.382 12.335ZM38.1414 20.2522C38.1414 20.8862 37.8587 21.2033 37.2932 21.2033C36.3678 21.2033 35.1511 20.0722 33.6431 17.8102C31.6895 20.0722 30.3785 21.2033 29.7102 21.2033C29.2475 21.2033 28.802 20.9805 28.3735 20.5349C27.9623 20.0722 27.7566 19.6695 27.7566 19.3268C27.7566 19.2411 27.9366 19.0269 28.2964 18.6842C29.7188 17.3304 30.9098 16.0537 31.8694 14.8541C31.1325 13.5175 30.5071 12.2408 29.993 11.0241C29.4789 9.80736 29.2218 9.07049 29.2218 8.81344C29.2218 8.53925 29.2304 8.35931 29.2475 8.27363C29.2989 8.05085 29.4532 7.93946 29.7102 7.93946C30.4299 7.93946 31.184 8.08513 31.9722 8.37645C32.7777 8.65064 33.1804 8.97623 33.1804 9.35324C33.1804 9.95302 33.4374 10.827 33.9515 11.9752C34.9969 10.5014 35.8451 9.45606 36.4963 8.83914C37.1647 8.22222 37.7045 7.91376 38.1157 7.91376C38.5442 7.91376 39.0154 8.16224 39.5295 8.65921C40.0608 9.15617 40.3264 9.60172 40.3264 9.99587C40.3264 10.1844 40.2493 10.3643 40.095 10.5357C39.9408 10.707 39.7095 10.9127 39.401 11.1526C39.0925 11.3754 38.7926 11.6324 38.5013 11.9237C38.2271 12.2151 37.2932 13.3375 35.6995 15.2911L36.4449 16.6021C37.5759 18.5899 38.1414 19.8066 38.1414 20.2522ZM47.2316 10.9984C47.0945 11.4611 46.8889 12.1122 46.6147 12.9519C46.3576 13.7745 46.032 14.8113 45.6379 16.0623C45.2609 17.3132 45.0724 17.9816 45.0724 18.0672C45.0724 18.1358 45.2095 18.1701 45.4836 18.1701C45.775 18.1701 46.4519 17.9816 47.5143 17.6046C48.5768 17.2104 49.2023 17.0133 49.3908 17.0133C49.8192 17.0133 50.0334 17.3047 50.0334 17.8873C50.0334 18.47 49.4594 19.1726 48.3112 19.9951C47.163 20.8005 45.9635 21.2033 44.7125 21.2033C44.1641 21.2033 43.5129 20.9034 42.7589 20.3036C42.0049 19.7038 41.6279 19.0954 41.6279 18.4785C41.6279 17.9644 41.8849 16.8848 42.399 15.2397C42.9303 13.5774 43.2902 12.4378 43.4787 11.8209C42.8103 12.0094 42.3048 12.1037 41.9621 12.1037C41.6193 12.1037 41.2595 11.8723 40.8824 11.4096C40.5054 10.9298 40.3169 10.4757 40.3169 10.0473C40.3169 9.4989 41.645 9.03621 44.3012 8.65921C44.6268 7.06549 44.7896 5.68599 44.7896 4.5207C44.7896 4.00659 45.0467 3.74954 45.5608 3.74954C46.0063 3.74954 46.5718 4.02373 47.2573 4.57211C47.9599 5.10334 48.3112 5.63458 48.3112 6.16582C48.3112 6.67992 48.1998 7.40823 47.977 8.35074C48.7996 8.31647 49.4251 8.29934 49.8535 8.29934C51.1388 8.29934 51.7814 8.59066 51.7814 9.17331C51.7814 9.55031 51.4044 9.87591 50.6504 10.1501C49.9135 10.4071 48.7739 10.6899 47.2316 10.9984Z"/>
+</mask>
+<path d="M7.52094 6.01159C5.67018 6.11441 4.65911 6.16582 4.48774 6.16582C4.07646 6.16582 3.66518 5.91734 3.2539 5.42037C2.84262 4.90627 2.63698 4.37503 2.63698 3.82666C2.63698 2.98696 5.07896 2.56711 9.96291 2.56711C12.4649 2.56711 14.3071 2.82416 15.4895 3.33826C16.6719 3.85236 17.2631 4.47785 17.2631 5.21473C17.2631 5.43751 17.1346 5.65172 16.8776 5.85736C16.6205 6.04586 16.2949 6.14011 15.9008 6.14011C15.5066 6.14011 14.7869 6.11441 13.7416 6.063C12.6962 6.01159 11.7451 5.97731 10.8883 5.96018C10.9568 6.16582 10.9911 6.40573 10.9911 6.67992C10.9911 6.9541 10.8883 7.49391 10.6827 8.29934C10.4942 9.10476 10.22 10.2272 9.8601 11.6667C9.50022 13.089 9.10608 14.8198 8.67766 16.8591C8.24925 18.8812 7.94935 20.0894 7.77799 20.4835C7.62376 20.8605 7.46953 21.049 7.3153 21.049C6.95543 21.049 6.5013 20.7234 5.95293 20.0722C5.42169 19.4039 5.15607 18.8641 5.15607 18.4528C5.15607 18.0415 5.50738 16.345 6.20998 13.3632C6.91259 10.3643 7.34957 7.91376 7.52094 6.01159ZM27.3638 12.7463C27.3638 13.586 26.7897 14.34 25.6416 15.0083C24.5106 15.6767 23.3453 16.0108 22.1457 16.0108C20.9461 16.0108 19.9608 15.9252 19.1896 15.7538C19.0354 16.2165 18.9583 16.6792 18.9583 17.1419C18.9583 17.6046 19.0354 17.9387 19.1896 18.1444C19.3438 18.3329 19.7294 18.4271 20.3463 18.4271C21.6316 18.4271 22.7283 18.3072 23.6366 18.0672C24.562 17.8273 25.0418 17.7074 25.0761 17.7074C25.7787 17.7074 26.13 17.9387 26.13 18.4014C26.13 19.0697 25.573 19.7038 24.4591 20.3036C23.3624 20.9034 22.0857 21.2033 20.6291 21.2033C19.1896 21.2033 18.0329 20.7491 17.1589 19.8409C16.2849 18.9326 15.848 17.8616 15.848 16.6278C15.848 15.3768 16.2078 14.0744 16.9276 12.7206C17.6644 11.3668 18.5813 10.2358 19.678 9.32754C20.7748 8.40215 21.8629 7.93946 22.9425 7.93946C24.0393 7.93946 25.0504 8.47927 25.9757 9.55888C26.9011 10.6214 27.3638 11.6838 27.3638 12.7463ZM24.382 12.335C24.382 12.1637 24.2021 11.9152 23.8422 11.5896C23.4824 11.264 23.1396 11.1012 22.814 11.1012C22.5056 11.1012 22.1029 11.3325 21.6059 11.7952C21.1089 12.2408 20.6377 12.8234 20.1921 13.5432C20.3463 13.5603 20.5691 13.5689 20.8604 13.5689C23.2082 13.5689 24.382 13.1576 24.382 12.335ZM38.1414 20.2522C38.1414 20.8862 37.8587 21.2033 37.2932 21.2033C36.3678 21.2033 35.1511 20.0722 33.6431 17.8102C31.6895 20.0722 30.3785 21.2033 29.7102 21.2033C29.2475 21.2033 28.802 20.9805 28.3735 20.5349C27.9623 20.0722 27.7566 19.6695 27.7566 19.3268C27.7566 19.2411 27.9366 19.0269 28.2964 18.6842C29.7188 17.3304 30.9098 16.0537 31.8694 14.8541C31.1325 13.5175 30.5071 12.2408 29.993 11.0241C29.4789 9.80736 29.2218 9.07049 29.2218 8.81344C29.2218 8.53925 29.2304 8.35931 29.2475 8.27363C29.2989 8.05085 29.4532 7.93946 29.7102 7.93946C30.4299 7.93946 31.184 8.08513 31.9722 8.37645C32.7777 8.65064 33.1804 8.97623 33.1804 9.35324C33.1804 9.95302 33.4374 10.827 33.9515 11.9752C34.9969 10.5014 35.8451 9.45606 36.4963 8.83914C37.1647 8.22222 37.7045 7.91376 38.1157 7.91376C38.5442 7.91376 39.0154 8.16224 39.5295 8.65921C40.0608 9.15617 40.3264 9.60172 40.3264 9.99587C40.3264 10.1844 40.2493 10.3643 40.095 10.5357C39.9408 10.707 39.7095 10.9127 39.401 11.1526C39.0925 11.3754 38.7926 11.6324 38.5013 11.9237C38.2271 12.2151 37.2932 13.3375 35.6995 15.2911L36.4449 16.6021C37.5759 18.5899 38.1414 19.8066 38.1414 20.2522ZM47.2316 10.9984C47.0945 11.4611 46.8889 12.1122 46.6147 12.9519C46.3576 13.7745 46.032 14.8113 45.6379 16.0623C45.2609 17.3132 45.0724 17.9816 45.0724 18.0672C45.0724 18.1358 45.2095 18.1701 45.4836 18.1701C45.775 18.1701 46.4519 17.9816 47.5143 17.6046C48.5768 17.2104 49.2023 17.0133 49.3908 17.0133C49.8192 17.0133 50.0334 17.3047 50.0334 17.8873C50.0334 18.47 49.4594 19.1726 48.3112 19.9951C47.163 20.8005 45.9635 21.2033 44.7125 21.2033C44.1641 21.2033 43.5129 20.9034 42.7589 20.3036C42.0049 19.7038 41.6279 19.0954 41.6279 18.4785C41.6279 17.9644 41.8849 16.8848 42.399 15.2397C42.9303 13.5774 43.2902 12.4378 43.4787 11.8209C42.8103 12.0094 42.3048 12.1037 41.9621 12.1037C41.6193 12.1037 41.2595 11.8723 40.8824 11.4096C40.5054 10.9298 40.3169 10.4757 40.3169 10.0473C40.3169 9.4989 41.645 9.03621 44.3012 8.65921C44.6268 7.06549 44.7896 5.68599 44.7896 4.5207C44.7896 4.00659 45.0467 3.74954 45.5608 3.74954C46.0063 3.74954 46.5718 4.02373 47.2573 4.57211C47.9599 5.10334 48.3112 5.63458 48.3112 6.16582C48.3112 6.67992 48.1998 7.40823 47.977 8.35074C48.7996 8.31647 49.4251 8.29934 49.8535 8.29934C51.1388 8.29934 51.7814 8.59066 51.7814 9.17331C51.7814 9.55031 51.4044 9.87591 50.6504 10.1501C49.9135 10.4071 48.7739 10.6899 47.2316 10.9984Z" fill="#6E52DF"/>
+<path d="M7.52094 6.01159L8.58766 6.10769L8.69885 4.87345L7.46153 4.94219L7.52094 6.01159ZM3.2539 5.42037L2.41756 6.08945L2.42311 6.09639L2.42878 6.10323L3.2539 5.42037ZM15.4895 3.33826L15.0624 4.32049L15.0624 4.32049L15.4895 3.33826ZM16.8776 5.85736L17.5109 6.72105L17.5291 6.70775L17.5466 6.6937L16.8776 5.85736ZM13.7416 6.063L13.6889 7.13275L13.6889 7.13275L13.7416 6.063ZM10.8883 5.96018L10.9097 4.88935L9.39226 4.859L9.87222 6.29887L10.8883 5.96018ZM10.6827 8.29934L9.6449 8.03438L9.64224 8.04479L9.63979 8.05526L10.6827 8.29934ZM9.8601 11.6667L10.8984 11.9294L10.8992 11.9265L9.8601 11.6667ZM8.67766 16.8591L9.72545 17.0811L9.72583 17.0793L8.67766 16.8591ZM7.77799 20.4835L6.79577 20.0565L6.79111 20.0672L6.78669 20.078L7.77799 20.4835ZM5.95293 20.0722L5.11449 20.7387L5.12392 20.7505L5.13368 20.7621L5.95293 20.0722ZM6.20998 13.3632L7.25247 13.6089L7.25279 13.6075L6.20998 13.3632ZM7.46153 4.94219C6.53669 4.99357 5.8232 5.03202 5.32018 5.0576C5.06848 5.0704 4.87118 5.07989 4.72719 5.08615C4.6551 5.08928 4.59812 5.09153 4.55529 5.09297C4.5339 5.09369 4.51726 5.09417 4.50481 5.09446C4.49149 5.09477 4.48672 5.09478 4.48774 5.09478V7.23686C4.69818 7.23686 5.75634 7.18231 7.58035 7.08098L7.46153 4.94219ZM4.48774 5.09478C4.54101 5.09478 4.40254 5.12842 4.07903 4.73751L2.42878 6.10323C2.92782 6.70625 3.61192 7.23686 4.48774 7.23686V5.09478ZM4.09025 4.7513C3.7993 4.38762 3.70802 4.08567 3.70802 3.82666H1.56594C1.56594 4.6644 1.88594 5.42492 2.41756 6.08945L4.09025 4.7513ZM3.70802 3.82666C3.70802 4.23168 3.39464 4.3261 3.58582 4.22749C3.74524 4.14527 4.07544 4.03633 4.64995 3.93755C5.77804 3.7436 7.53527 3.63816 9.96291 3.63816V1.49607C7.5066 1.49607 5.60087 1.60055 4.28698 1.82644C3.64051 1.93759 3.05496 2.09106 2.60388 2.32373C2.18457 2.54 1.56594 3.00179 1.56594 3.82666H3.70802ZM9.96291 3.63816C12.4302 3.63816 14.0894 3.89741 15.0624 4.32049L15.9165 2.35604C14.5248 1.75092 12.4995 1.49607 9.96291 1.49607V3.63816ZM15.0624 4.32049C16.1667 4.80059 16.1921 5.16413 16.1921 5.21473H18.3342C18.3342 3.79158 17.1772 2.90414 15.9165 2.35604L15.0624 4.32049ZM16.1921 5.21473C16.1921 5.16585 16.1994 5.1193 16.2115 5.07799C16.2235 5.03741 16.2382 5.00839 16.2483 4.99142C16.2667 4.96082 16.2674 4.97386 16.2085 5.02101L17.5466 6.6937C17.9326 6.38491 18.3342 5.89499 18.3342 5.21473H16.1921ZM16.2442 4.99366C16.2105 5.01833 16.1218 5.06907 15.9008 5.06907V7.21115C16.468 7.21115 17.0305 7.07339 17.5109 6.72105L16.2442 4.99366ZM15.9008 5.06907C15.5365 5.06907 14.8415 5.04475 13.7942 4.99325L13.6889 7.13275C14.7323 7.18406 15.4768 7.21115 15.9008 7.21115V5.06907ZM13.7942 4.99325C12.7406 4.94143 11.7789 4.90673 10.9097 4.88935L10.8669 7.03101C11.7113 7.04789 12.6518 7.08174 13.6889 7.13275L13.7942 4.99325ZM9.87222 6.29887C9.89618 6.37078 9.92007 6.49179 9.92007 6.67992H12.0622C12.0622 6.31967 12.0175 5.96086 11.9044 5.62148L9.87222 6.29887ZM9.92007 6.67992C9.92007 6.79669 9.8566 7.20523 9.6449 8.03438L11.7204 8.56429C11.92 7.78259 12.0622 7.11152 12.0622 6.67992H9.92007ZM9.63979 8.05526C9.45312 8.85289 9.18044 9.96928 8.82103 11.4069L10.8992 11.9265C11.2595 10.4851 11.5352 9.35663 11.7255 8.54341L9.63979 8.05526ZM8.82177 11.404C8.4572 12.8449 8.05978 14.5908 7.6295 16.6389L9.72583 17.0793C10.1524 15.0489 10.5432 13.3332 10.8984 11.9294L8.82177 11.404ZM7.62988 16.6371C7.4168 17.6429 7.23762 18.4369 7.09194 19.0238C6.9389 19.6403 6.84011 19.9545 6.79577 20.0565L8.76021 20.9106C8.88723 20.6184 9.02408 20.1314 9.17093 19.5398C9.32514 18.9186 9.51011 18.0975 9.72545 17.0811L7.62988 16.6371ZM6.78669 20.078C6.72666 20.2247 6.69734 20.2543 6.7177 20.2294C6.73064 20.2136 6.77951 20.1566 6.87247 20.0998C6.97277 20.0385 7.12505 19.978 7.3153 19.978V22.1201C7.86215 22.1201 8.21279 21.7848 8.37558 21.5859C8.55017 21.3725 8.67508 21.1193 8.76929 20.8891L6.78669 20.078ZM7.3153 19.978C7.45213 19.978 7.4678 20.034 7.32889 19.9344C7.20132 19.8429 7.01561 19.6714 6.77218 19.3823L5.13368 20.7621C5.43863 21.1243 5.75416 21.4411 6.08072 21.6753C6.39593 21.9013 6.81859 22.1201 7.3153 22.1201V19.978ZM6.79137 19.4058C6.55531 19.1088 6.40449 18.8725 6.31629 18.6933C6.22494 18.5076 6.22712 18.4365 6.22712 18.4528H4.08503C4.08503 19.2575 4.56656 20.0494 5.11449 20.7387L6.79137 19.4058ZM6.22712 18.4528C6.22712 18.4648 6.22676 18.4426 6.23597 18.3658C6.24435 18.2959 6.25807 18.2015 6.27841 18.0795C6.31908 17.8355 6.38185 17.5069 6.46834 17.0891C6.64108 16.2549 6.90199 15.0963 7.25247 13.6089L5.16749 13.1176C4.81537 14.612 4.54932 15.7925 4.37076 16.6548C4.28161 17.0853 4.21264 17.4443 4.16547 17.7273C4.12244 17.9855 4.08503 18.2501 4.08503 18.4528H6.22712ZM7.25279 13.6075C7.96081 10.5855 8.40993 8.0805 8.58766 6.10769L6.45421 5.91549C6.28921 7.74702 5.86436 10.1431 5.16718 13.1189L7.25279 13.6075ZM25.6416 15.0083L25.1028 14.0827L25.0967 14.0863L25.6416 15.0083ZM19.1896 15.7538L19.422 14.7083L18.479 14.4987L18.1735 15.4151L19.1896 15.7538ZM19.1896 18.1444L18.3328 18.787L18.3463 18.8051L18.3607 18.8226L19.1896 18.1444ZM23.6366 18.0672L23.3678 17.0305L23.363 17.0317L23.636Line truncated
+</g>
+<defs>
+<filter id="filter0_d_740_3589" x="0.494633" y="0.425297" width="53.4287" height="22.9199" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.07104"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_740_3589"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_740_3589" result="shape"/>
+</filter>
+</defs>
+</svg>
+`;
+
+export const mindMapStyle1Light = svg`<svg width="58" height="44" viewBox="0 0 58 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40.3337 22.7009L21.0225 22.7009L21.0225 21.2996L40.3337 21.2996L40.3337 22.7009Z" fill="#E660A4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M37.8158 8.32903C34.2586 8.32903 31.3749 11.2326 31.3749 14.8143C31.3749 19.1699 27.8681 22.7008 23.5423 22.7008L21.0234 22.7008L21.0234 21.2995L23.5423 21.2995C27.0995 21.2995 29.9832 18.396 29.9832 14.8143C29.9832 10.4587 33.49 6.92773 37.8158 6.92773L40.3346 6.92773L40.3346 8.32903L37.8158 8.32903Z" fill="#6E52DF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.5413 22.7009L21.0225 22.7009L21.0225 21.2996L23.5413 21.2996C27.8671 21.2996 31.3739 24.8305 31.3739 29.1861C31.3739 32.7678 34.2576 35.6713 37.8148 35.6713L40.3337 35.6713L40.3337 37.0726L37.8148 37.0726C33.489 37.0726 29.9822 33.5417 29.9822 29.1861C29.9822 25.6044 27.0985 22.7009 23.5413 22.7009Z" fill="#FF8C38"/>
+<g filter="url(#filter0_d_8326_40611)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M42.0141 30.7434L52.9291 30.7434C54.6251 30.7434 56 32.1278 56 33.8355L56 38.9079C56 40.6156 54.6251 42 52.9291 42L42.0141 42C40.318 42 38.9431 40.6156 38.9431 38.9079L38.9431 33.8355C38.9431 32.1278 40.318 30.7434 42.0141 30.7434ZM42.0141 32.1447C41.0866 32.1447 40.3348 32.9017 40.3348 33.8355L40.3348 38.9079C40.3348 39.8417 41.0866 40.5987 42.0141 40.5987L52.9291 40.5987C53.8565 40.5987 54.6083 39.8417 54.6083 38.9079L54.6083 33.8355C54.6083 32.9017 53.8565 32.1447 52.9291 32.1447L42.0141 32.1447Z" fill="#FF8C38"/>
+</g>
+<g filter="url(#filter1_d_8326_40611)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M42.0131 16.4124L52.9281 16.4124C54.6241 16.4124 55.9991 17.7967 55.9991 19.5044L55.9991 24.5768C55.9991 26.2846 54.6241 27.6689 52.9281 27.6689L42.0131 27.6689C40.317 27.6689 38.9421 26.2846 38.9421 24.5768L38.9421 19.5044C38.9421 17.7967 40.317 16.4124 42.0131 16.4124ZM42.0131 17.8136C41.0857 17.8136 40.3339 18.5706 40.3339 19.5044L40.3339 24.5768C40.3339 25.5106 41.0857 26.2676 42.0131 26.2676L52.9281 26.2676C53.8555 26.2676 54.6073 25.5106 54.6073 24.5768L54.6073 19.5044C54.6073 18.5706 53.8555 17.8136 52.9281 17.8136L42.0131 17.8136Z" fill="#E660A4"/>
+</g>
+<g filter="url(#filter2_d_8326_40611)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M42.0131 2L52.9281 2C54.6241 2 55.9991 3.38438 55.9991 5.09209L55.9991 10.1645C55.9991 11.8722 54.6241 13.2566 52.9281 13.2566L42.0131 13.2566C40.317 13.2566 38.9421 11.8722 38.9421 10.1645L38.9421 5.09209C38.9421 3.38438 40.317 2 42.0131 2ZM42.0131 3.4013C41.0857 3.4013 40.3339 4.15829 40.3339 5.09209L40.3339 10.1645C40.3339 11.0983 41.0857 11.8553 42.0131 11.8553L52.9281 11.8553C53.8555 11.8553 54.6073 11.0983 54.6073 10.1645L54.6073 5.09209C54.6073 4.15829 53.8555 3.4013 52.9281 3.4013L42.0131 3.4013Z" fill="#6E52DF"/>
+</g>
+<g filter="url(#filter3_d_8326_40611)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.45717 14.6809L18.1186 14.6809C20.0279 14.6809 21.5758 16.2394 21.5758 18.1619L21.5758 25.8381C21.5758 27.7606 20.0279 29.3191 18.1186 29.3191L5.45717 29.3191C3.54783 29.3191 2 27.7606 2 25.8381L2 18.1619C2 16.2394 3.54783 14.6809 5.45717 14.6809ZM5.45717 16.0822C4.31645 16.0822 3.39171 17.0133 3.39171 18.1619L3.39171 25.8381C3.39171 26.9867 4.31645 27.9178 5.45717 27.9178L18.1186 27.9178C19.2593 27.9178 20.1841 26.9867 20.1841 25.8381L20.1841 18.1619C20.1841 17.0133 19.2593 16.0822 18.1186 16.0822L5.45717 16.0822Z" fill="#84CFFF"/>
+</g>
+<path d="M40.3342 33.8356C40.3342 32.9018 41.086 32.1448 42.0135 32.1448L52.9285 32.1448C53.8559 32.1448 54.6077 32.9018 54.6077 33.8356L54.6077 38.908C54.6077 39.8418 53.8559 40.5988 52.9285 40.5988L42.0135 40.5988C41.086 40.5988 40.3342 39.8418 40.3342 38.908L40.3342 33.8356Z" fill="#FBFBFC"/>
+<path d="M40.3342 19.5045C40.3342 18.5707 41.086 17.8137 42.0135 17.8137L52.9285 17.8137C53.8559 17.8137 54.6077 18.5707 54.6077 19.5045L54.6077 24.5769C54.6077 25.5107 53.8559 26.2677 52.9285 26.2677L42.0135 26.2677C41.086 26.2677 40.3342 25.5107 40.3342 24.5769L40.3342 19.5045Z" fill="#FBFBFC"/>
+<path d="M40.3342 5.09217C40.3342 4.15836 41.086 3.40137 42.0135 3.40137L52.9285 3.40137C53.8559 3.40137 54.6077 4.15836 54.6077 5.09216L54.6077 10.1646C54.6077 11.0984 53.8559 11.8554 52.9285 11.8554L42.0135 11.8554C41.086 11.8554 40.3342 11.0984 40.3342 10.1646L40.3342 5.09217Z" fill="#FBFBFC"/>
+<path d="M3.39111 18.1617C3.39111 17.0131 4.31585 16.082 5.45657 16.082L18.118 16.082C19.2587 16.082 20.1835 17.0131 20.1835 18.1617L20.1835 25.8379C20.1835 26.9865 19.2587 27.9176 18.118 27.9176L5.45657 27.9176C4.31585 27.9176 3.39111 26.9865 3.39111 25.8379L3.39111 18.1617Z" fill="#FBFBFC"/>
+<defs>
+<filter id="filter0_d_8326_40611" x="36.9431" y="28.7434" width="21.0569" height="15.2566" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_8326_40611"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_8326_40611" result="shape"/>
+</filter>
+<filter id="filter1_d_8326_40611" x="36.9421" y="14.4124" width="21.0569" height="15.2566" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_8326_40611"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_8326_40611" result="shape"/>
+</filter>
+<filter id="filter2_d_8326_40611" x="36.9421" y="0" width="21.0569" height="15.2566" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_8326_40611"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_8326_40611" result="shape"/>
+</filter>
+<filter id="filter3_d_8326_40611" x="0" y="12.6809" width="23.5758" height="18.6382" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_8326_40611"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_8326_40611" result="shape"/>
+</filter>
+</defs>
+</svg>
+`;
+export const mindMapStyle1Dark = svg`<svg width="58" height="44" viewBox="0 0 58 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40.3337 22.7009L21.0225 22.7009L21.0225 21.2996L40.3337 21.2996L40.3337 22.7009Z" fill="#E660A4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M37.8158 8.32903C34.2586 8.32903 31.3749 11.2326 31.3749 14.8143C31.3749 19.1699 27.8681 22.7008 23.5423 22.7008L21.0234 22.7008L21.0234 21.2995L23.5423 21.2995C27.0995 21.2995 29.9832 18.396 29.9832 14.8143C29.9832 10.4587 33.49 6.92773 37.8158 6.92773L40.3346 6.92773L40.3346 8.32903L37.8158 8.32903Z" fill="#6E52DF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.5413 22.7009L21.0225 22.7009L21.0225 21.2996L23.5413 21.2996C27.8671 21.2996 31.3739 24.8305 31.3739 29.1861C31.3739 32.7678 34.2576 35.6713 37.8148 35.6713L40.3337 35.6713L40.3337 37.0726L37.8148 37.0726C33.489 37.0726 29.9822 33.5417 29.9822 29.1861C29.9822 25.6044 27.0985 22.7009 23.5413 22.7009Z" fill="#FF8C38"/>
+<g filter="url(#filter0_d_8326_49080)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M42.0141 30.7434L52.9291 30.7434C54.6251 30.7434 56 32.1278 56 33.8355L56 38.9079C56 40.6156 54.6251 42 52.9291 42L42.0141 42C40.318 42 38.9431 40.6156 38.9431 38.9079L38.9431 33.8355C38.9431 32.1278 40.318 30.7434 42.0141 30.7434ZM42.0141 32.1447C41.0866 32.1447 40.3348 32.9017 40.3348 33.8355L40.3348 38.9079C40.3348 39.8417 41.0866 40.5987 42.0141 40.5987L52.9291 40.5987C53.8565 40.5987 54.6083 39.8417 54.6083 38.9079L54.6083 33.8355C54.6083 32.9017 53.8565 32.1447 52.9291 32.1447L42.0141 32.1447Z" fill="#FF8C38"/>
+</g>
+<g filter="url(#filter1_d_8326_49080)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M42.0131 16.4124L52.9281 16.4124C54.6241 16.4124 55.9991 17.7967 55.9991 19.5044L55.9991 24.5768C55.9991 26.2846 54.6241 27.6689 52.9281 27.6689L42.0131 27.6689C40.317 27.6689 38.9421 26.2846 38.9421 24.5768L38.9421 19.5044C38.9421 17.7967 40.317 16.4124 42.0131 16.4124ZM42.0131 17.8136C41.0857 17.8136 40.3339 18.5706 40.3339 19.5044L40.3339 24.5768C40.3339 25.5106 41.0857 26.2676 42.0131 26.2676L52.9281 26.2676C53.8555 26.2676 54.6073 25.5106 54.6073 24.5768L54.6073 19.5044C54.6073 18.5706 53.8555 17.8136 52.9281 17.8136L42.0131 17.8136Z" fill="#E660A4"/>
+</g>
+<g filter="url(#filter2_d_8326_49080)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M42.0131 2L52.9281 2C54.6241 2 55.9991 3.38438 55.9991 5.09209L55.9991 10.1645C55.9991 11.8722 54.6241 13.2566 52.9281 13.2566L42.0131 13.2566C40.317 13.2566 38.9421 11.8722 38.9421 10.1645L38.9421 5.09209C38.9421 3.38438 40.317 2 42.0131 2ZM42.0131 3.4013C41.0857 3.4013 40.3339 4.15829 40.3339 5.09209L40.3339 10.1645C40.3339 11.0983 41.0857 11.8553 42.0131 11.8553L52.9281 11.8553C53.8555 11.8553 54.6073 11.0983 54.6073 10.1645L54.6073 5.09209C54.6073 4.15829 53.8555 3.4013 52.9281 3.4013L42.0131 3.4013Z" fill="#6E52DF"/>
+</g>
+<g filter="url(#filter3_d_8326_49080)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.45717 14.6809L18.1186 14.6809C20.0279 14.6809 21.5758 16.2394 21.5758 18.1619L21.5758 25.8381C21.5758 27.7606 20.0279 29.3191 18.1186 29.3191L5.45717 29.3191C3.54783 29.3191 2 27.7606 2 25.8381L2 18.1619C2 16.2394 3.54783 14.6809 5.45717 14.6809ZM5.45717 16.0822C4.31645 16.0822 3.39171 17.0133 3.39171 18.1619L3.39171 25.8381C3.39171 26.9867 4.31645 27.9178 5.45717 27.9178L18.1186 27.9178C19.2593 27.9178 20.1841 26.9867 20.1841 25.8381L20.1841 18.1619C20.1841 17.0133 19.2593 16.0822 18.1186 16.0822L5.45717 16.0822Z" fill="#84CFFF"/>
+</g>
+<path d="M40.3342 33.8356C40.3342 32.9018 41.086 32.1448 42.0135 32.1448L52.9285 32.1448C53.8559 32.1448 54.6077 32.9018 54.6077 33.8356L54.6077 38.908C54.6077 39.8418 53.8559 40.5988 52.9285 40.5988L42.0135 40.5988C41.086 40.5988 40.3342 39.8418 40.3342 38.908L40.3342 33.8356Z" fill="#1E1E1E"/>
+<path d="M40.3342 19.5045C40.3342 18.5707 41.086 17.8137 42.0135 17.8137L52.9285 17.8137C53.8559 17.8137 54.6077 18.5707 54.6077 19.5045L54.6077 24.5769C54.6077 25.5107 53.8559 26.2677 52.9285 26.2677L42.0135 26.2677C41.086 26.2677 40.3342 25.5107 40.3342 24.5769L40.3342 19.5045Z" fill="#1E1E1E"/>
+<path d="M40.3342 5.09217C40.3342 4.15836 41.086 3.40137 42.0135 3.40137L52.9285 3.40137C53.8559 3.40137 54.6077 4.15836 54.6077 5.09216L54.6077 10.1646C54.6077 11.0984 53.8559 11.8554 52.9285 11.8554L42.0135 11.8554C41.086 11.8554 40.3342 11.0984 40.3342 10.1646L40.3342 5.09217Z" fill="#1E1E1E"/>
+<path d="M3.39111 18.1617C3.39111 17.0131 4.31585 16.082 5.45657 16.082L18.118 16.082C19.2587 16.082 20.1835 17.0131 20.1835 18.1617L20.1835 25.8379C20.1835 26.9865 19.2587 27.9176 18.118 27.9176L5.45657 27.9176C4.31585 27.9176 3.39111 26.9865 3.39111 25.8379L3.39111 18.1617Z" fill="#1E1E1E"/>
+<defs>
+<filter id="filter0_d_8326_49080" x="36.9431" y="28.7434" width="21.0569" height="15.2566" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_8326_49080"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_8326_49080" result="shape"/>
+</filter>
+<filter id="filter1_d_8326_49080" x="36.9421" y="14.4124" width="21.0569" height="15.2566" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_8326_49080"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_8326_49080" result="shape"/>
+</filter>
+<filter id="filter2_d_8326_49080" x="36.9421" y="0" width="21.0569" height="15.2566" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_8326_49080"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_8326_49080" result="shape"/>
+</filter>
+<filter id="filter3_d_8326_49080" x="0" y="12.6809" width="23.5758" height="18.6382" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_8326_49080"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_8326_49080" result="shape"/>
+</filter>
+</defs>
+</svg>
+`;
+
+export const mindMapStyle2Light = svg`<svg width="64" height="48" viewBox="0 0 64 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.9766 24L43.4028 24" stroke="black" stroke-width="1.4" stroke-linejoin="round"/>
+<path d="M23.9766 24.0001L33.5897 24.0001C33.6449 24.0001 33.6897 23.9553 33.6897 23.9001L33.6897 9.7416C33.6897 9.68637 33.7344 9.6416 33.7897 9.6416L43.4028 9.6416" stroke="black" stroke-width="1.4" stroke-linejoin="round"/>
+<path d="M23.9766 24L33.5897 24C33.6449 24 33.6897 24.0448 33.6897 24.1L33.6897 38.2585C33.6897 38.3137 33.7344 38.3585 33.7897 38.3585L43.4028 38.3585" stroke="black" stroke-width="1.4" stroke-linejoin="round"/>
+<g filter="url(#filter0_dd_7525_14565)">
+<rect x="43.4023" y="34.1353" width="14.3585" height="8.44617" rx="0.1" fill="#84CFFF"/>
+</g>
+<g filter="url(#filter1_dd_7525_14565)">
+<rect x="43.4023" y="19.7769" width="14.3585" height="8.44617" rx="0.1" fill="#84CFFF"/>
+</g>
+<g filter="url(#filter2_dd_7525_14565)">
+<rect x="43.4023" y="5.41846" width="14.3585" height="8.44617" rx="0.1" fill="#84CFFF"/>
+</g>
+<g filter="url(#filter3_dd_7525_14565)">
+<rect x="6.23926" y="18.0879" width="16.8923" height="11.8246" rx="0.1" fill="#FFC46B"/>
+</g>
+<defs>
+<filter id="filter0_dd_7525_14565" x="42.4023" y="33.1353" width="17.3584" height="11.4462" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_7525_14565"/>
+<feOffset dx="1" dy="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7525_14565"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect2_dropShadow_7525_14565"/>
+<feOffset/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_7525_14565" result="effect2_dropShadow_7525_14565"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_7525_14565" result="shape"/>
+</filter>
+<filter id="filter1_dd_7525_14565" x="42.4023" y="18.7769" width="17.3584" height="11.4462" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_7525_14565"/>
+<feOffset dx="1" dy="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7525_14565"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect2_dropShadow_7525_14565"/>
+<feOffset/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_7525_14565" result="effect2_dropShadow_7525_14565"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_7525_14565" result="shape"/>
+</filter>
+<filter id="filter2_dd_7525_14565" x="42.4023" y="4.41846" width="17.3584" height="11.4462" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_7525_14565"/>
+<feOffset dx="1" dy="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7525_14565"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect2_dropShadow_7525_14565"/>
+<feOffset/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_7525_14565" result="effect2_dropShadow_7525_14565"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_7525_14565" result="shape"/>
+</filter>
+<filter id="filter3_dd_7525_14565" x="5.23926" y="17.0879" width="19.8926" height="14.8246" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_7525_14565"/>
+<feOffset dx="1" dy="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7525_14565"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect2_dropShadow_7525_14565"/>
+<feOffset/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_7525_14565" result="effect2_dropShadow_7525_14565"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_7525_14565" result="shape"/>
+</filter>
+</defs>
+</svg>
+`;
+export const mindMapStyle2Dark = svg`<svg width="64" height="48" viewBox="0 0 64 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.9761 24L43.4023 24" stroke="white" stroke-width="1.4" stroke-linejoin="round"/>
+<path d="M23.9761 24.0001L33.5892 24.0001C33.6444 24.0001 33.6892 23.9553 33.6892 23.9001L33.6892 9.7416C33.6892 9.68637 33.7339 9.6416 33.7892 9.6416L43.4023 9.6416" stroke="white" stroke-width="1.4" stroke-linejoin="round"/>
+<path d="M23.9761 24L33.5892 24C33.6444 24 33.6892 24.0448 33.6892 24.1L33.6892 38.2585C33.6892 38.3137 33.7339 38.3585 33.7892 38.3585L43.4023 38.3585" stroke="white" stroke-width="1.4" stroke-linejoin="round"/>
+<g filter="url(#filter0_dd_7525_19591)">
+<rect x="43.4023" y="34.1353" width="14.3585" height="8.44617" rx="0.1" fill="#84CFFF"/>
+</g>
+<g filter="url(#filter1_dd_7525_19591)">
+<rect x="43.4023" y="19.7769" width="14.3585" height="8.44617" rx="0.1" fill="#84CFFF"/>
+</g>
+<g filter="url(#filter2_dd_7525_19591)">
+<rect x="43.4023" y="5.41846" width="14.3585" height="8.44617" rx="0.1" fill="#84CFFF"/>
+</g>
+<g filter="url(#filter3_dd_7525_19591)">
+<rect x="6.23926" y="18.0879" width="16.8923" height="11.8246" rx="0.1" fill="#FFC46B"/>
+</g>
+<defs>
+<filter id="filter0_dd_7525_19591" x="42.4023" y="33.1353" width="17.3584" height="11.4462" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_7525_19591"/>
+<feOffset dx="1" dy="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7525_19591"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect2_dropShadow_7525_19591"/>
+<feOffset/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_7525_19591" result="effect2_dropShadow_7525_19591"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_7525_19591" result="shape"/>
+</filter>
+<filter id="filter1_dd_7525_19591" x="42.4023" y="18.7769" width="17.3584" height="11.4462" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_7525_19591"/>
+<feOffset dx="1" dy="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7525_19591"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect2_dropShadow_7525_19591"/>
+<feOffset/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_7525_19591" result="effect2_dropShadow_7525_19591"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_7525_19591" result="shape"/>
+</filter>
+<filter id="filter2_dd_7525_19591" x="42.4023" y="4.41846" width="17.3584" height="11.4462" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_7525_19591"/>
+<feOffset dx="1" dy="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7525_19591"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect2_dropShadow_7525_19591"/>
+<feOffset/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_7525_19591" result="effect2_dropShadow_7525_19591"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_7525_19591" result="shape"/>
+</filter>
+<filter id="filter3_dd_7525_19591" x="5.23926" y="17.0879" width="19.8926" height="14.8246" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_7525_19591"/>
+<feOffset dx="1" dy="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7525_19591"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect2_dropShadow_7525_19591"/>
+<feOffset/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_7525_19591" result="effect2_dropShadow_7525_19591"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_7525_19591" result="shape"/>
+</filter>
+</defs>
+</svg>
+`;
+
+export const mindMapStyle3 = svg`<svg width="64" height="48" viewBox="0 0 64 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.9766 24L43.4028 24" stroke="#FFD338" stroke-width="1.4"/>
+<path d="M23.9766 24.0001L26.5104 24.0001C30.4754 24.0001 33.6897 20.7858 33.6897 16.8208V16.8208C33.6897 12.8559 36.9039 9.6416 40.8689 9.6416L43.4028 9.6416" stroke="#FFD338" stroke-width="1.4"/>
+<path d="M23.9766 24L26.5104 24C30.4754 24 33.6897 27.2143 33.6897 31.1792V31.1792C33.6897 35.1442 36.9039 38.3585 40.8689 38.3585L43.4028 38.3585" stroke="#FFD338" stroke-width="1.4"/>
+<g filter="url(#filter0_d_7525_14574)">
+<rect x="43.4023" y="34.1353" width="14.3585" height="8.44617" rx="1.68923" fill="white"/>
+<rect x="42.7023" y="33.4353" width="15.7585" height="9.84617" rx="2.38923" stroke="#FFD338" stroke-width="1.4"/>
+</g>
+<g filter="url(#filter1_d_7525_14574)">
+<rect x="43.4023" y="19.7769" width="14.3585" height="8.44617" rx="1.68923" fill="white"/>
+<rect x="42.7023" y="19.0769" width="15.7585" height="9.84617" rx="2.38923" stroke="#FFD338" stroke-width="1.4"/>
+</g>
+<g filter="url(#filter2_d_7525_14574)">
+<rect x="43.4023" y="5.41846" width="14.3585" height="8.44617" rx="1.68923" fill="white"/>
+<rect x="42.7023" y="4.71846" width="15.7585" height="9.84617" rx="2.38923" stroke="#FFD338" stroke-width="1.4"/>
+</g>
+<g filter="url(#filter3_d_7525_14574)">
+<rect x="6.23926" y="18.0879" width="16.8923" height="11.8246" rx="2.07776" fill="#FFD338"/>
+<rect x="5.53926" y="17.3879" width="18.2923" height="13.2246" rx="2.77776" stroke="white" stroke-width="1.4"/>
+</g>
+<defs>
+<filter id="filter0_d_7525_14574" x="39.4681" y="30.2014" width="22.2269" height="16.3139" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.26693"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7525_14574"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7525_14574" result="shape"/>
+</filter>
+<filter id="filter1_d_7525_14574" x="39.4681" y="15.843" width="22.2269" height="16.3139" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.26693"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7525_14574"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7525_14574" result="shape"/>
+</filter>
+<filter id="filter2_d_7525_14574" x="39.4681" y="1.48458" width="22.2269" height="16.3139" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.26693"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7525_14574"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7525_14574" result="shape"/>
+</filter>
+<filter id="filter3_d_7525_14574" x="2.30501" y="14.154" width="24.7601" height="19.6923" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.26693"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7525_14574"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7525_14574" result="shape"/>
+</filter>
+</defs>
+</svg>
+`;
+
+export const mindMapStyle4 = svg`<svg width="64" height="48" viewBox="0 0 64 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.9766 24L43.4028 24" stroke="#E660A4" stroke-width="1.4" stroke-linecap="round" />
+<path
+  d="M23.9766 24.0001L26.5104 24.0001C30.4754 24.0001 33.6897 20.7858 33.6897 16.8208V16.8208C33.6897 12.8559 36.9039 9.6416 40.8689 9.6416L43.4028 9.6416"
+  stroke="#6E52DF" stroke-width="1.4" stroke-linecap="round" />
+<path
+  d="M23.9766 24L26.5104 24C30.4754 24 33.6897 27.2143 33.6897 31.1792V31.1792C33.6897 35.1442 36.9039 38.3585 40.8689 38.3585L43.4028 38.3585"
+  stroke="#FF8C38" stroke-width="1.4" stroke-linecap="round" />
+<path
+  d="M7 26C9.85124 21.8236 11.8347 18.5607 11.8347 20.649C11.8347 22.7372 10.9669 24.695 11.2149 25.3475C11.4628 26 12.9504 24.0423 13.9421 22.8677C14.9339 21.6931 15.9256 21.0405 15.8017 22.8677C15.6777 24.6949 16.2975 25.739 17.2893 24.8254C18.281 23.9118 19.2727 23.5203 20.0165 23.7813C20.6116 23.9901 21.5868 24.5644 22 24.8254"
+  stroke="var(--affine-black)" stroke-width="1.4" stroke-linecap="round" />
+<path
+  d="M44 11C46.4711 7.51964 48.1901 4.80062 48.1901 6.54079C48.1901 8.28097 47.438 9.91246 47.6529 10.4562C47.8678 11 49.157 9.36862 50.0165 8.38977C50.876 7.41092 51.7355 6.86712 51.6281 8.38977C51.5207 9.91243 52.0579 10.7825 52.9174 10.0212C53.7769 9.25986 54.6364 8.93358 55.281 9.1511C55.7967 9.32512 56.6419 9.80367 57 10.0212"
+  stroke="var(--affine-black)" stroke-width="1.4" stroke-linecap="round" />
+<path
+  d="M44 25.5C46.4711 22.0196 48.1901 19.3006 48.1901 21.0408C48.1901 22.781 47.438 24.4125 47.6529 24.9562C47.8678 25.5 49.157 23.8686 50.0165 22.8898C50.876 21.9109 51.7355 21.3671 51.6281 22.8898C51.5207 24.4124 52.0579 25.2825 52.9174 24.5212C53.7769 23.7599 54.6364 23.4336 55.281 23.6511C55.7967 23.8251 56.6419 24.3037 57 24.5212"
+  stroke="var(--affine-black)" stroke-width="1.4" stroke-linecap="round" />
+<path
+  d="M44 40C46.4711 36.5196 48.1901 33.8006 48.1901 35.5408C48.1901 37.281 47.438 38.9125 47.6529 39.4562C47.8678 40 49.157 38.3686 50.0165 37.3898C50.876 36.4109 51.7355 35.8671 51.6281 37.3898C51.5207 38.9124 52.0579 39.7825 52.9174 39.0212C53.7769 38.2599 54.6364 37.9336 55.281 38.1511C55.7967 38.3251 56.6419 38.8037 57 39.0212"
+  stroke="var(--affine-black)" stroke-width="1.4" stroke-linecap="round" />
+</svg>`;
+
+export const importMindMapIcon = svg`<svg width="64" height="48" viewBox="0 0 64 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.7745 24.0001L42.2623 24.0001" stroke="#929292" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2 3"/>
+<path d="M24.7745 24.0002L26.1332 24.0002C30.212 24.0002 33.5184 20.6938 33.5184 16.615V16.615C33.5184 12.5362 36.8249 9.22974 40.9037 9.22974L41.2583 9.22974" stroke="#929292" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2 3"/>
+<path d="M24.7745 24.0001L26.1332 24.0001C30.212 24.0001 33.5184 27.3066 33.5184 31.3854V31.3854C33.5184 35.4641 36.8249 38.7706 40.9037 38.7706L41.2583 38.7706" stroke="#929292" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2 3"/>
+<rect x="43.7295" y="34.4261" width="14.7705" height="8.68854" rx="2.4" fill="black" fill-opacity="0.03" stroke="#929292" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2 3"/>
+<rect x="43.7295" y="19.6558" width="14.7705" height="8.68854" rx="2.4" fill="black" fill-opacity="0.03" stroke="#929292" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2 3"/>
+<rect x="43.7295" y="4.88538" width="14.7705" height="8.68854" rx="2.4" fill="black" fill-opacity="0.03" stroke="#929292" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2 3"/>
+<rect x="5.5" y="17.9183" width="17.3771" height="12.1639" rx="3" fill="black" fill-opacity="0.03" stroke="#929292" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2 3"/>
+</svg>
+`;
+
+export const mindmapMenuMediaIcon = svg`<svg width="44" height="37" viewBox="0 0 44 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_6221_103790)">
+<rect x="7.18018" y="7.92468" width="21.9639" height="21.9639" rx="3" transform="rotate(5.83233 7.18018 7.92468)" fill="#53B2EF"/>
+<rect x="9.66406" y="14.4865" width="15.6885" height="1.56885" rx="0.784426" transform="rotate(5.83233 9.66406 14.4865)" fill="white" fill-opacity="0.56"/>
+<rect x="9.18555" y="19.1687" width="15.6885" height="1.56885" rx="0.784426" transform="rotate(5.83233 9.18555 19.1687)" fill="white" fill-opacity="0.56"/>
+<rect x="8.70752" y="23.8508" width="15.6885" height="1.56885" rx="0.784426" transform="rotate(5.83233 8.70752 23.8508)" fill="white" fill-opacity="0.56"/>
+</g>
+<g filter="url(#filter1_d_6221_103790)">
+<g clip-path="url(#clip0_6221_103790)">
+<rect x="13.9312" y="9.77234" width="21.9639" height="21.9639" rx="3" transform="rotate(-14.7836 13.9312 9.77234)" fill="#FCD34D"/>
+<ellipse cx="31.8182" cy="9.91952" rx="2.35328" ry="2.35328" transform="rotate(-14.7836 31.8182 9.91952)" fill="white" fill-opacity="0.56"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34.7443 17.9336L39.8586 20.9121L41.1595 18.6784L35.8219 15.5697L35.1807 16.6706L35.8219 15.5697C34.7116 14.9231 33.2873 15.299 32.6406 16.4093L29.9034 21.1092L27.0605 19.4535C26.0045 18.8385 24.6527 19.1454 23.9657 20.156L17.7872 29.2449L19.925 30.6982L25.9679 21.8087L28.8258 23.4731C29.9361 24.1197 31.3604 23.7439 32.0071 22.6335L34.7443 17.9336ZM29.7735 21.3322C29.7734 21.3324 29.7734 21.3325 29.7733 21.3326L29.9967 21.4627L30.1268 21.2393C30.1267 21.2392 30.1265 21.2392 30.1264 21.2391L30.1268 21.2393L29.9967 21.4627L29.7733 21.3326L29.7735 21.3322ZM34.874 17.7108L34.8744 17.7102L34.651 17.5801L34.8744 17.7102C34.8743 17.7104 34.8742 17.7106 34.874 17.7108Z" fill="white" fill-opacity="0.56"/>
+</g>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.4444 9.12856C17.0332 9.00875 16.797 8.57828 16.9168 8.16709L17.3564 6.65842C17.9319 4.68309 19.9998 3.54834 21.9752 4.12389C23.9505 4.69944 25.0852 6.76735 24.5097 8.74268L21.6413 18.5872C21.2448 19.9481 19.8201 20.7299 18.4593 20.3334C17.0984 19.9368 16.3167 18.5122 16.7132 17.1513L19.3341 8.1561C19.4539 7.7449 19.8844 7.50868 20.2956 7.62849C20.7068 7.7483 20.943 8.17877 20.8232 8.58997L18.2023 17.5852C18.0454 18.1237 18.3547 18.6874 18.8932 18.8443C19.4316 19.0012 19.9953 18.6918 20.1522 18.1534L23.0206 8.30881C23.3566 7.15587 22.6942 5.9489 21.5413 5.61297C20.3884 5.27703 19.1814 5.93935 18.8455 7.09229L18.4059 8.60096C18.2861 9.01216 17.8556 9.24837 17.4444 9.12856Z" fill="#929292"/>
+<defs>
+<filter id="filter0_d_6221_103790" x="2.41439" y="5.39083" width="29.1497" height="29.1499" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.26693"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_6221_103790"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_6221_103790" result="shape"/>
+</filter>
+<filter id="filter1_d_6221_103790" x="11.3973" y="1.63399" width="31.909" height="31.909" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="1.26693"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_6221_103790"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_6221_103790" result="shape"/>
+</filter>
+<clipPath id="clip0_6221_103790">
+<rect x="13.9312" y="9.77234" width="21.9639" height="21.9639" rx="3" transform="rotate(-14.7836 13.9312 9.77234)" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+`;
@@ -0,0 +1,54 @@
+import { LightLoadingIcon } from '@blocksuite/affine-components/icons';
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
+import { ShadowlessElement } from '@blocksuite/block-std';
+import { css, html } from 'lit';
+
+import { importMindMapIcon } from './icons.js';
+
+export class MindMapPlaceholder extends ShadowlessElement {
+  static override styles = css`
+    mindmap-import-placeholder {
+      display: flex;
+      flex-direction: column;
+
+      padding: 28px 12px 12px;
+      box-sizing: border-box;
+      width: 200px;
+      height: 122px;
+
+      border-radius: 12px;
+      gap: 12px;
+
+      background-color: ${unsafeCSSVarV2('layer/background/secondary')};
+      border: 1px solid ${unsafeCSSVarV2('layer/insideBorder/border')};
+      color: ${unsafeCSSVarV2('text/placeholder')};
+
+      box-shadow: 0px 0px 4px 0px rgba(66, 65, 73, 0.14);
+    }
+
+    mindmap-import-placeholder .preview-icon {
+      text-align: center;
+    }
+
+    mindmap-import-placeholder .description {
+      display: flex;
+      gap: 8px;
+
+      color: ${unsafeCSSVarV2('text/placeholder')};
+      font-size: 14px;
+      line-height: 22px;
+
+      align-items: center;
+    }
+  `;
+
+  override render() {
+    return html`<div class="placeholder-container">
+      <div class="preview-icon">${importMindMapIcon}</div>
+      <div class="description">
+        ${LightLoadingIcon}
+        <span>Importing mind map...</span>
+      </div>
+    </div>`;
+  }
+}
@@ -0,0 +1,403 @@
+import { toast } from '@blocksuite/affine-components/toast';
+import type { MindmapStyle } from '@blocksuite/affine-model';
+import {
+  EditPropsStore,
+  FeatureFlagService,
+  TelemetryProvider,
+} from '@blocksuite/affine-shared/services';
+import {
+  EdgelessDraggableElementController,
+  EdgelessToolbarToolMixin,
+} from '@blocksuite/affine-widget-edgeless-toolbar';
+import type { BlockStdScope } from '@blocksuite/block-std';
+import { modelContext, stdContext } from '@blocksuite/block-std';
+import { ErrorCode } from '@blocksuite/global/exceptions';
+import type { Bound } from '@blocksuite/global/gfx';
+import { SignalWatcher } from '@blocksuite/global/lit';
+import type { BlockModel } from '@blocksuite/store';
+import { consume } from '@lit/context';
+import { computed } from '@preact/signals-core';
+import { css, html, LitElement, nothing, type TemplateResult } from 'lit';
+import { property } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+
+import { getMindMaps, type ToolbarMindmapItem } from './assets.js';
+import { mediaRender, textRender } from './basket-elements.js';
+import { importMindMapIcon, mindmapMenuMediaIcon, textIcon } from './icons.js';
+import { MindMapPlaceholder } from './mindmap-importing-placeholder.js';
+
+type TextItem = {
+  type: 'text';
+  icon: TemplateResult;
+  render: typeof textRender;
+};
+
+type MediaItem = {
+  type: 'media';
+  icon: TemplateResult;
+  render: typeof mediaRender;
+};
+
+type ImportItem = {
+  type: 'import';
+  icon: TemplateResult;
+};
+
+const textItem: TextItem = { type: 'text', icon: textIcon, render: textRender };
+
+const mediaItem: MediaItem = {
+  type: 'media',
+  icon: mindmapMenuMediaIcon,
+  render: mediaRender,
+};
+
+export class EdgelessMindmapMenu extends EdgelessToolbarToolMixin(
+  SignalWatcher(LitElement)
+) {
+  static override styles = css`
+    :host {
+      display: flex;
+      z-index: -1;
+      justify-content: flex-end;
+    }
+    .text-and-mindmap {
+      display: flex;
+      gap: 10px;
+      padding: 8px 0px;
+      box-sizing: border-box;
+    }
+    .thin-divider {
+      width: 1px;
+      transform: scaleX(0.5);
+      height: 48px;
+      background: var(--affine-border-color);
+    }
+    .text-item,
+    .media-item {
+      width: 60px;
+    }
+    .mindmap-item {
+      width: 64px;
+    }
+
+    .text-item,
+    .media-item,
+    .mindmap-item {
+      border-radius: 4px;
+      height: 48px;
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .text-item > button,
+    .media-item > button,
+    .mindmap-item > button {
+      position: absolute;
+      border-radius: inherit;
+      border: none;
+      background: none;
+      cursor: grab;
+      padding: 0;
+    }
+    .text-item:hover,
+    .media-item:hover,
+    .mindmap-item[data-is-active='true'],
+    .mindmap-item:hover {
+      background: var(--affine-hover-color);
+    }
+    .text-item > button.next,
+    .media-item > button.next,
+    .mindmap-item > button.next {
+      transition: transform 0.3s ease-in-out;
+    }
+  `;
+
+  private readonly _style$ = computed(() => {
+    const { style } =
+      this.edgeless.std.get(EditPropsStore).lastProps$.value.mindmap;
+    return style;
+  });
+
+  draggableController!: EdgelessDraggableElementController<
+    ToolbarMindmapItem | TextItem | ImportItem | MediaItem
+  >;
+
+  // @ts-expect-error FIXME: resolve after gfx tool refactor
+  override type = 'empty' as const;
+
+  get mindMaps() {
+    return getMindMaps(this.theme);
+  }
+
+  private _importMindMapEntry() {
+    const { draggingElement } = this.draggableController?.states || {};
+    const isBeingDragged = draggingElement?.data.type === 'import';
+
+    return html`<div class="mindmap-item">
+      <button
+        style="opacity: ${isBeingDragged ? 0 : 1}"
+        class="next"
+        @mousedown=${(e: MouseEvent) => {
+          this.draggableController.onMouseDown(e, {
+            preview: importMindMapIcon,
+            data: {
+              type: 'import',
+              icon: importMindMapIcon,
+            },
+            standardWidth: 350,
+          });
+        }}
+        @touchstart=${(e: TouchEvent) => {
+          this.draggableController.onTouchStart(e, {
+            preview: importMindMapIcon,
+            data: {
+              type: 'import',
+              icon: importMindMapIcon,
+            },
+            standardWidth: 350,
+          });
+        }}
+        @click=${() => {
+          this.draggableController.cancel();
+          const viewportBound = this.gfx.viewport.viewportBounds;
+
+          viewportBound.x += viewportBound.w / 2;
+          viewportBound.y += viewportBound.h / 2;
+
+          this._onImportMindMap(viewportBound);
+        }}
+      >
+        ${importMindMapIcon}
+      </button>
+      <affine-tooltip tip-position="top" .offset=${12}>
+        <affine-tooltip-content-with-shortcut
+          data-tip="${'Support import of FreeMind,OPML.'}"
+        ></affine-tooltip-content-with-shortcut>
+      </affine-tooltip>
+    </div>`;
+  }
+
+  private _onImportMindMap(bound: Bound) {
+    const placeholder = new MindMapPlaceholder();
+
+    placeholder.style.position = 'absolute';
+    placeholder.style.left = `${bound.x}px`;
+    placeholder.style.top = `${bound.y}px`;
+
+    this.gfx.viewport.element?.append(placeholder);
+
+    this.onImportMindMap?.(bound)
+      .then(() => {
+        this.std.getOptional(TelemetryProvider)?.track('CanvasElementAdded', {
+          page: 'whiteboard editor',
+          type: 'imported mind map',
+          other: 'success',
+          module: 'toolbar',
+        });
+      })
+      .catch(e => {
+        if (e.code === ErrorCode.UserAbortError) return;
+        this.std.getOptional(TelemetryProvider)?.track('CanvasElementAdded', {
+          page: 'whiteboard editor',
+          type: 'imported mind map',
+          other: 'failed',
+          module: 'toolbar',
+        });
+        toast(this.edgeless.host, 'Import failed, please try again');
+        console.error(e);
+      })
+      .finally(() => {
+        placeholder.remove();
+      });
+  }
+
+  initDragController() {
+    if (this.draggableController || !this.edgeless) return;
+    this.draggableController = new EdgelessDraggableElementController(this, {
+      edgeless: this.edgeless,
+      scopeElement: this,
+      clickToDrag: true,
+      onOverlayCreated: (_layer, element) => {
+        if (element.data.type === 'mindmap') {
+          this.onActiveStyleChange?.(element.data.style);
+        }
+        // a workaround to active mindmap, so that menu cannot be closed by `Escape`
+        // @ts-expect-error FIXME: resolve after gfx tool refactor
+        this.setEdgelessTool({ type: 'empty' });
+      },
+      onDrop: (element, bound) => {
+        if ('render' in element.data) {
+          element.data
+            .render(bound, this.edgeless)
+            .then(id => {
+              if (!id) return;
+              if (element.data.type === 'mindmap') {
+                this.onActiveStyleChange?.(element.data.style);
+                // @ts-expect-error FIXME: resolve after gfx tool refactor
+                this.setEdgelessTool({ type: 'default' });
+                this.gfx.selection.set({
+                  elements: [id],
+                  editing: false,
+                });
+              } else if (
+                element.data.type === 'text' ||
+                element.data.type === 'media'
+              ) {
+                // @ts-expect-error FIXME: resolve after gfx tool refactor
+                this.setEdgelessTool({ type: 'default' });
+              }
+            })
+            .catch(console.error);
+        } else if (element.data.type === 'import') {
+          this._onImportMindMap?.(bound);
+        }
+      },
+    });
+  }
+
+  override render() {
+    const { cancelled, draggingElement, dragOut } =
+      this.draggableController?.states || {};
+
+    const isDraggingMedia = draggingElement?.data?.type === 'media';
+    const isDraggingText = draggingElement?.data?.type === 'text';
+    const showNextText = dragOut && !cancelled;
+    return html`<edgeless-slide-menu .height=${'64px'}>
+      <div class="text-and-mindmap">
+        <div class="media-item">
+          ${isDraggingMedia
+            ? html`<button
+                class="next"
+                style="transform: translateY(${showNextText ? 0 : 64}px)"
+              >
+                ${mediaItem.icon}
+              </button>`
+            : nothing}
+          <button
+            style="opacity: ${isDraggingMedia ? 0 : 1}"
+            @mousedown=${(e: MouseEvent) =>
+              this.draggableController.onMouseDown(e, {
+                preview: mediaItem.icon,
+                data: mediaItem,
+              })}
+            @touchstart=${(e: TouchEvent) =>
+              this.draggableController.onTouchStart(e, {
+                preview: mediaItem.icon,
+                data: mediaItem,
+              })}
+          >
+            ${mediaItem.icon}
+          </button>
+          <affine-tooltip tip-position="top" .offset=${12}>
+            <affine-tooltip-content-with-shortcut
+              data-tip="${'Add media'}"
+            ></affine-tooltip-content-with-shortcut>
+          </affine-tooltip>
+        </div>
+        <div class="thin-divider"></div>
+        <div class="text-item">
+          ${isDraggingText
+            ? html`<button
+                class="next"
+                style="transform: translateY(${showNextText ? 0 : 64}px)"
+              >
+                ${textItem.icon}
+              </button>`
+            : nothing}
+          <button
+            style="opacity: ${isDraggingText ? 0 : 1}"
+            @mousedown=${(e: MouseEvent) =>
+              this.draggableController.onMouseDown(e, {
+                preview: textItem.icon,
+                data: textItem,
+              })}
+            @touchstart=${(e: TouchEvent) =>
+              this.draggableController.onTouchStart(e, {
+                preview: textItem.icon,
+                data: textItem,
+              })}
+          >
+            ${textItem.icon}
+          </button>
+          <affine-tooltip tip-position="top" .offset=${12}>
+            <affine-tooltip-content-with-shortcut
+              data-tip="${'Edgeless Text'}"
+              data-shortcup="${'T'}"
+            ></affine-tooltip-content-with-shortcut>
+          </affine-tooltip>
+        </div>
+        <div class="thin-divider"></div>
+        <!-- mind map -->
+        ${repeat(this.mindMaps, mindMap => {
+          const isDraggingMindMap = draggingElement?.data?.type !== 'text';
+          const draggingEle = draggingElement?.data as ToolbarMindmapItem;
+          const isBeingDragged =
+            isDraggingMindMap && draggingEle?.style === mindMap.style;
+          const showNext = dragOut && !cancelled;
+          const isActive = this._style$.value === mindMap.style;
+          return html`
+            <div class="mindmap-item" data-is-active=${isActive}>
+              ${isBeingDragged
+                ? html`<button
+                    style="transform: translateY(${showNext ? 0 : 64}px)"
+                    class="next"
+                  >
+                    ${mindMap.icon}
+                  </button>`
+                : nothing}
+              <button
+                style="opacity: ${isBeingDragged ? 0 : 1}"
+                @mousedown=${(e: MouseEvent) => {
+                  this.draggableController.onMouseDown(e, {
+                    preview: mindMap.icon,
+                    data: mindMap,
+                    standardWidth: 350,
+                  });
+                }}
+                @touchstart=${(e: TouchEvent) => {
+                  this.draggableController.onTouchStart(e, {
+                    preview: mindMap.icon,
+                    data: mindMap,
+                    standardWidth: 350,
+                  });
+                }}
+                @click=${() => this.onActiveStyleChange?.(mindMap.style)}
+              >
+                ${mindMap.icon}
+              </button>
+              <affine-tooltip tip-position="top" .offset=${12}>
+                <affine-tooltip-content-with-shortcut
+                  data-tip="${'Mind Map'}"
+                  data-shortcup="${'M'}"
+                ></affine-tooltip-content-with-shortcut>
+              </affine-tooltip>
+            </div>
+          `;
+        })}
+        ${this.std.store
+          .get(FeatureFlagService)
+          .getFlag('enable_mind_map_import')
+          ? this._importMindMapEntry()
+          : nothing}
+      </div>
+    </edgeless-slide-menu>`;
+  }
+
+  override updated(changedProperties: Map<PropertyKey, unknown>) {
+    if (!changedProperties.has('edgeless')) return;
+    this.initDragController();
+  }
+
+  @consume({ context: modelContext })
+  accessor model!: BlockModel;
+
+  @property({ attribute: false })
+  accessor onActiveStyleChange!: (style: MindmapStyle) => void;
+
+  @property({ attribute: false })
+  accessor onImportMindMap!: (bound: Bound) => Promise<void>;
+
+  @consume({ context: stdContext })
+  accessor std!: BlockStdScope;
+}
@@ -0,0 +1,458 @@
+import { EdgelessCRUDIdentifier } from '@blocksuite/affine-block-surface';
+import type {
+  MindmapElementModel,
+  MindmapStyle,
+} from '@blocksuite/affine-model';
+import {
+  EditPropsStore,
+  ThemeProvider,
+  ViewportElementProvider,
+} from '@blocksuite/affine-shared/services';
+import {
+  EdgelessDraggableElementController,
+  EdgelessToolbarToolMixin,
+} from '@blocksuite/affine-widget-edgeless-toolbar';
+import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx';
+import type { Bound } from '@blocksuite/global/gfx';
+import { SignalWatcher } from '@blocksuite/global/lit';
+import { computed } from '@preact/signals-core';
+import { css, html, LitElement, nothing } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+import { getMindMaps } from './assets.js';
+import {
+  type DraggableTool,
+  getMindmapRender,
+  mediaConfig,
+  mediaRender,
+  mindmapConfig,
+  textConfig,
+  textRender,
+  toolConfig2StyleObj,
+} from './basket-elements.js';
+import {
+  basketIconDark,
+  basketIconLight,
+  mindmapMenuMediaIcon,
+  textIcon,
+} from './icons.js';
+import { importMindmap } from './utils/import-mindmap.js';
+
+export class EdgelessMindmapToolButton extends EdgelessToolbarToolMixin(
+  SignalWatcher(LitElement)
+) {
+  static override styles = css`
+    :host {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .partial-clip {
+      flex-shrink: 0;
+      box-sizing: border-box;
+      width: calc(100% + 20px);
+      pointer-events: none;
+      padding: 0 10px;
+      overflow: hidden;
+    }
+    .basket-wrapper {
+      pointer-events: auto;
+      height: 64px;
+      width: 96px;
+      display: flex;
+      justify-content: center;
+      align-items: flex-end;
+      position: relative;
+    }
+    .basket,
+    .basket-tool-item {
+      transition: transform 0.3s ease-in-out;
+      position: absolute;
+    }
+
+    .basket {
+      bottom: 0;
+      height: 17px;
+      width: 76px;
+    }
+    .basket > div,
+    .basket > svg {
+      position: absolute;
+    }
+    .glass {
+      width: 76px;
+      height: 17px;
+      border-radius: 2px;
+      mask: url(#mindmap-basket-body-mask);
+    }
+    .glass.enabled {
+      backdrop-filter: blur(2px);
+    }
+    @-moz-document url-prefix() {
+      .glass.enabled {
+        backdrop-filter: none;
+      }
+    }
+
+    .basket {
+      z-index: 3;
+    }
+    .basket-tool-item {
+      cursor: grab;
+    }
+    .basket-tool-item svg {
+      display: block;
+    }
+    .basket-tool-item {
+      transform: translate(var(--default-x, 0), var(--default-y, 0))
+        rotate(var(--default-r, 0)) scale(var(--default-s, 1));
+      z-index: var(--default-z, 0);
+    }
+
+    .basket-tool-item.next {
+      transform: translate(var(--next-x, 0), var(--next-y, 0))
+        rotate(var(--next-r, 0)) scale(var(--next-s, 1));
+      z-index: var(--next-z, 0);
+    }
+
+    /* active & hover */
+    .basket-wrapper:hover .basket,
+    .basket-wrapper.active .basket {
+      z-index: 0;
+    }
+    .basket-wrapper:hover .basket-tool-item.current,
+    .basket-wrapper.active .basket-tool-item.current {
+      transform: translate(var(--active-x, 0), var(--active-y, 0))
+        rotate(var(--active-r, 0)) scale(var(--active-s, 1));
+      z-index: var(--active-z, 0);
+    }
+
+    .basket-tool-item.next.coming,
+    .basket-wrapper:hover .basket-tool-item.current:hover {
+      transform: translate(var(--hover-x, 0), var(--hover-y, 0))
+        rotate(var(--hover-r, 0)) scale(var(--hover-s, 1));
+      z-index: var(--hover-z, 0);
+    }
+  `;
+
+  private readonly _style$ = computed(() => {
+    const { style } =
+      this.edgeless.std.get(EditPropsStore).lastProps$.value.mindmap;
+    return style;
+  });
+
+  draggableController!: EdgelessDraggableElementController<DraggableTool>;
+
+  override enableActiveBackground = true;
+
+  // @ts-expect-error FIXME: resolve after gfx tool refactor
+  override type: GfxToolsFullOptionValue['type'][] = ['empty', 'text'];
+
+  get draggableTools(): DraggableTool[] {
+    const style = this._style$.value;
+    const mindmap =
+      this.mindmaps.find(m => m.style === style) || this.mindmaps[0];
+    return [
+      {
+        name: 'media',
+        icon: mindmapMenuMediaIcon,
+        config: mediaConfig,
+        standardWidth: 100,
+        render: mediaRender,
+      },
+      {
+        name: 'text',
+        icon: textIcon,
+        config: textConfig,
+        standardWidth: 100,
+        render: textRender,
+      },
+      {
+        name: 'mindmap',
+        icon: mindmap.icon,
+        config: mindmapConfig,
+        standardWidth: 350,
+        render: getMindmapRender(style),
+      },
+    ];
+  }
+
+  get mindmaps() {
+    return getMindMaps(this.theme);
+  }
+
+  get crud() {
+    return this.edgeless.std.get(EdgelessCRUDIdentifier);
+  }
+
+  private _toggleMenu() {
+    if (this.tryDisposePopper()) return;
+    // @ts-expect-error FIXME: resolve after gfx tool refactor
+    this.setEdgelessTool({ type: 'default' });
+
+    const menu = this.createPopper('edgeless-mindmap-menu', this);
+    Object.assign(menu.element, {
+      edgeless: this.edgeless,
+      onActiveStyleChange: (style: MindmapStyle) => {
+        this.edgeless.std.get(EditPropsStore).recordLastProps('mindmap', {
+          style,
+        });
+      },
+      onImportMindMap: (bound: Bound) => {
+        return importMindmap(bound).then(mindmap => {
+          const id = this.crud.addElement('mindmap', {
+            children: mindmap,
+            layoutType: mindmap?.layoutType === 'left' ? 1 : 0,
+          });
+          if (!id) return;
+          const element = this.crud.getElementById(id) as MindmapElementModel;
+
+          this.tryDisposePopper();
+          // @ts-expect-error FIXME: resolve after gfx tool refactor
+          this.setEdgelessTool({ type: 'default' });
+          this.gfx.selection.set({
+            elements: [element.tree.id],
+            editing: false,
+          });
+        });
+      },
+    });
+  }
+
+  initDragController() {
+    if (!this.edgeless || !this.toolbarContainer) return;
+    if (this.draggableController) return;
+    this.draggableController = new EdgelessDraggableElementController(this, {
+      edgeless: this.edgeless,
+      scopeElement: this.toolbarContainer,
+      standardWidth: 100,
+      clickToDrag: true,
+      onOverlayCreated: (overlay, { data }) => {
+        const tool = this.draggableTools.find(t => t.name === data.name);
+        if (!tool) return;
+
+        // recover the rotation
+        const rotate = tool.config?.hover?.r ?? tool.config?.default?.r ?? 0;
+        overlay.element.style.setProperty('--rotate', rotate + 'deg');
+        setTimeout(() => {
+          overlay.transitionWrapper.style.setProperty(
+            '--rotate',
+            -rotate + 'deg'
+          );
+        }, 50);
+
+        // set the scale (without transition)
+        const scale = tool.config?.hover?.s ?? tool.config?.default?.s ?? 1;
+        overlay.element.style.setProperty('--scale', `${scale}`);
+
+        // a workaround to handle getBoundingClientRect() when the element is rotated
+        const _left = parseInt(overlay.element.style.left);
+        const _top = parseInt(overlay.element.style.top);
+        if (data.name === 'mindmap') {
+          overlay.element.style.left = _left + 3 + 'px';
+          overlay.element.style.top = _top + 5 + 'px';
+        } else if (data.name === 'text') {
+          overlay.element.style.left = _left + 0 + 'px';
+          overlay.element.style.top = _top + 3 + 'px';
+        }
+        this.readyToDrop = true;
+      },
+      onCanceled: overlay => {
+        overlay.transitionWrapper.style.transformOrigin = 'unset';
+        overlay.transitionWrapper.style.setProperty('--rotate', '0deg');
+        this.readyToDrop = false;
+      },
+      onDrop: (el, bound) => {
+        el.data
+          .render(bound, this.edgeless)
+          .then(id => {
+            if (!id) return;
+            this.readyToDrop = false;
+            if (el.data.name === 'mindmap') {
+              // @ts-expect-error FIXME: resolve after gfx tool refactor
+              this.setEdgelessTool({ type: 'default' });
+              this.gfx.selection.set({
+                elements: [id],
+                editing: false,
+              });
+            } else if (el.data.name === 'text') {
+              // @ts-expect-error FIXME: resolve after gfx tool refactor
+              this.setEdgelessTool({ type: 'default' });
+            }
+          })
+          .catch(console.error);
+      },
+    });
+
+    this.edgeless.bindHotKey(
+      {
+        m: () => {
+          const gfx = this.gfx;
+          const locked = gfx.viewport.locked;
+          if (locked) return;
+          if (gfx.selection.editing) return;
+
+          if (this.readyToDrop) {
+            // change the style
+            const activeIndex = this.mindmaps.findIndex(
+              m => m.style === this._style$.value
+            );
+            const nextIndex = (activeIndex + 1) % this.mindmaps.length;
+            const next = this.mindmaps[nextIndex];
+            this.edgeless.std.get(EditPropsStore).recordLastProps('mindmap', {
+              style: next.style,
+            });
+            const tool = this.draggableTools.find(t => t.name === 'mindmap');
+            this.draggableController.updateElementInfo({
+              data: tool,
+              preview: next.icon,
+            });
+            return;
+          }
+          // @ts-expect-error FIXME: resolve after gfx tool refactor
+          this.setEdgelessTool({ type: 'empty' });
+          const icon = this.mindmapElement;
+          const { x, y } = gfx.tool.lastMousePos$.peek();
+          const { viewport } = this.edgeless.std.get(ViewportElementProvider);
+          const { left, top } = viewport;
+          const clientPos = { x: x + left, y: y + top };
+          this.draggableController.clickToDrag(icon, clientPos);
+        },
+      },
+      { global: true }
+    );
+  }
+
+  override render() {
+    const { popper } = this;
+    const appTheme = this.edgeless.std.get(ThemeProvider).app$.value;
+    const basketIcon = appTheme === 'light' ? basketIconLight : basketIconDark;
+    const glassBg =
+      appTheme === 'light' ? 'rgba(255,255,255,0.5)' : 'rgba(74, 74, 74, 0.6)';
+
+    const { cancelled, dragOut, draggingElement } =
+      this.draggableController?.states || {};
+
+    const active = popper || draggingElement;
+
+    return html`<edgeless-toolbar-button
+      class="edgeless-mindmap-button"
+      ?withHover=${true}
+      .tooltip=${popper ? '' : 'Others'}
+      .tooltipOffset=${4}
+      @click=${this._toggleMenu}
+      style="width: 100%; height: 100%; display: inline-block"
+    >
+      <div class="partial-clip">
+        <div class="basket-wrapper ${active ? 'active' : ''}">
+          ${repeat(
+            this.draggableTools,
+            t => t.name,
+            tool => {
+              const isBeingDragged = draggingElement?.data.name === tool.name;
+              const variables = toolConfig2StyleObj(tool.config);
+
+              const nextStyle = styleMap({
+                ...variables,
+              });
+              const currentStyle = styleMap({
+                ...variables,
+                opacity: isBeingDragged ? 0 : 1,
+                pointerEvents: draggingElement ? 'none' : 'auto',
+              });
+
+              return html`${isBeingDragged
+                  ? html`<div
+                      class=${classMap({
+                        'basket-tool-item': true,
+                        next: true,
+                        coming: !!dragOut && !cancelled,
+                      })}
+                      style=${nextStyle}
+                    >
+                      ${tool.icon}
+                    </div>`
+                  : nothing}
+
+                <div
+                  style=${currentStyle}
+                  @mousedown=${(e: MouseEvent) =>
+                    this.draggableController.onMouseDown(e, {
+                      data: tool,
+                      preview: tool.icon,
+                      standardWidth: tool.standardWidth,
+                    })}
+                  @touchstart=${(e: TouchEvent) =>
+                    this.draggableController.onTouchStart(e, {
+                      data: tool,
+                      preview: tool.icon,
+                      standardWidth: tool.standardWidth,
+                    })}
+                  class="basket-tool-item current ${tool.name}"
+                >
+                  ${tool.icon}
+                </div>`;
+            }
+          )}
+
+          <div class="basket">
+            <div
+              class="glass ${this.enableBlur ? 'enabled' : ''}"
+              style="background: ${glassBg}"
+            ></div>
+            ${basketIcon}
+          </div>
+        </div>
+      </div>
+
+      <svg width="0" height="0" style="opacity: 0; pointer-events: none">
+        <defs>
+          <mask id="mindmap-basket-body-mask">
+            <rect
+              x="2"
+              width="71.8"
+              y="2"
+              height="15"
+              rx="1.5"
+              ry="1.5"
+              fill="white"
+            />
+            <rect
+              width="32"
+              height="6"
+              x="22"
+              y="5.9"
+              fill="black"
+              rx="3"
+              ry="3"
+            />
+          </mask>
+        </defs>
+      </svg>
+    </edgeless-toolbar-button>`;
+  }
+
+  override updated(_changedProperties: Map<PropertyKey, unknown>) {
+    const controllerRequiredProps = ['edgeless', 'toolbarContainer'] as const;
+    if (
+      controllerRequiredProps.some(p => _changedProperties.has(p)) &&
+      !this.draggableController
+    ) {
+      this.initDragController();
+    }
+  }
+
+  @property({ type: Boolean })
+  accessor enableBlur = true;
+
+  @query('.basket-tool-item.mindmap')
+  accessor mindmapElement!: HTMLElement;
+
+  @state()
+  accessor readyToDrop = false;
+}
@@ -0,0 +1,145 @@
+import { openFileOrFiles } from '@blocksuite/affine-shared/utils';
+import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
+import type { Bound } from '@blocksuite/global/gfx';
+import c from 'simple-xml-to-json';
+
+type MindMapNode = {
+  children: MindMapNode[];
+  text: string;
+  xywh?: string;
+  title?: string;
+  layoutType?: 'left' | 'right';
+};
+
+export async function importMindmap(bound: Bound): Promise<MindMapNode> {
+  const file = await openFileOrFiles({
+    acceptType: 'MindMap',
+  });
+
+  if (!file) {
+    throw new BlockSuiteError(ErrorCode.UserAbortError, 'Aborted by user');
+  }
+
+  let result;
+
+  if (file.name.endsWith('.mm')) {
+    result = await parseMmFile(file);
+  } else if (file.name.endsWith('.opml') || file.name.endsWith('.xml')) {
+    result = await parseOPMLFile(file);
+  } else {
+    throw new BlockSuiteError(ErrorCode.ParsingError, 'Unsupported file type');
+  }
+
+  if (result) {
+    result.xywh = bound.serialize();
+  }
+
+  return result;
+}
+
+function readAsText(file: File) {
+  return file.text();
+}
+
+type RawMmNode = {
+  node?: {
+    TEXT: string;
+    POSITION: 'left' | 'right';
+    children?: RawMmNode[];
+  };
+};
+
+async function parseMmFile(file: File): Promise<MindMapNode> {
+  const content = await readAsText(file);
+
+  try {
+    const parsed = c.convertXML(content);
+    const map = parsed.map.children[0];
+
+    const traverse = (node: RawMmNode): MindMapNode | null => {
+      if (!node.node) {
+        return null;
+      }
+
+      return node.node.POSITION
+        ? {
+            layoutType: node.node.POSITION,
+            text: node.node.TEXT ?? 'MINDMAP',
+            children:
+              (node.node.children
+                ?.map(traverse)
+                .filter(node => node) as MindMapNode[]) ?? [],
+          }
+        : {
+            text: node.node.TEXT ?? 'MINDMAP',
+            children:
+              (node.node.children
+                ?.map(traverse)
+                .filter(node => node) as MindMapNode[]) ?? [],
+          };
+    };
+
+    const result = traverse(map);
+
+    if (!result) {
+      throw new BlockSuiteError(
+        ErrorCode.ParsingError,
+        'Failed to parse mm file'
+      );
+    }
+
+    return result;
+  } catch (e) {
+    console.error(e);
+    throw new BlockSuiteError(
+      ErrorCode.ParsingError,
+      'Failed to parse mm file'
+    );
+  }
+}
+
+type RawOPMLOutline = {
+  outline: {
+    text: string;
+    children: RawOPMLOutline[];
+  };
+};
+
+async function parseOPMLFile(file: File): Promise<MindMapNode> {
+  const content = await readAsText(file);
+
+  try {
+    const parsed = c.convertXML(content);
+    const outline = parsed.opml?.children[1].body?.children?.[0];
+
+    const traverse = (node: RawOPMLOutline): MindMapNode | null => {
+      if (!node.outline?.text && !node.outline?.children) {
+        return null;
+      }
+
+      return {
+        text: node.outline?.text ?? 'MINDMAP',
+        children: node.outline.children
+          ? (node.outline.children.map(traverse) as MindMapNode[])
+          : [],
+      };
+    };
+
+    const result = traverse(outline);
+
+    if (!result) {
+      throw new BlockSuiteError(
+        ErrorCode.ParsingError,
+        'Failed to parse OPML file'
+      );
+    }
+
+    return result;
+  } catch (e) {
+    console.error(e);
+    throw new BlockSuiteError(
+      ErrorCode.ParsingError,
+      'Failed to parse OPML file'
+    );
+  }
+}