From d911d21d1c65bd75f40251e13128edd705f9193b Mon Sep 17 00:00:00 2001
From: Cats Juice <wp1298554944@hotmail.com>
Date: Mon, 4 Dec 2023 08:32:19 +0000
Subject: [PATCH] feat(component): add storybook (#5079)

---
 .../frontend/component/.storybook/main.ts     |  54 ++
 .../component/.storybook/preview.css.ts       |  27 +
 .../component/.storybook/preview.html         |   3 +
 .../frontend/component/.storybook/preview.tsx |  60 ++
 packages/frontend/component/package.json      |  16 +
 .../src/ui/avatar/avatar.stories.tsx          |  52 ++
 .../src/ui/button/button.stories.tsx          |  46 ++
 .../src/ui/button/icon-button.stories.tsx     |  48 ++
 .../src/ui/checkbox/checkbox.stories.tsx      |  65 ++
 .../src/ui/divider/divider.stories.tsx        |  25 +
 .../component/src/ui/divider/divider.tsx      |  23 +-
 .../component/src/ui/empty/empty.stories.tsx  |  16 +
 .../component/src/ui/input/input.stories.tsx  |  58 ++
 .../component/src/ui/input/style.css.ts       |  43 +-
 .../src/ui/loading/loading.stories.tsx        |  13 +
 .../ui/lottie/collections-icon.stories.tsx    |  18 +
 .../src/ui/lottie/delete-icon.stories.tsx     |  15 +
 .../src/ui/menu/menu-trigger.stories.tsx      |  17 +
 .../component/src/ui/menu/menu.stories.tsx    | 203 ++++++
 .../component/src/ui/modal/modal.stories.tsx  |  69 ++
 .../component/src/ui/popover/index.ts         |   3 +
 .../src/ui/scrollbar/scrollbar.stories.tsx    |  24 +
 .../src/ui/skeleton/skeleton.stories.tsx      |  39 ++
 .../component/src/ui/skeleton/types.ts        |  12 +-
 .../src/ui/switch/switch.stories.tsx          |  13 +
 .../component/src/ui/switch/switch.tsx        |   2 +-
 .../component/src/ui/table/table.stories.tsx  |  46 ++
 .../component/src/ui/toast/toast.stories.tsx  |  20 +
 .../src/ui/tooltip/tooltip.stories.tsx        |  32 +
 yarn.lock                                     | 628 +++++++++++++++++-
 30 files changed, 1640 insertions(+), 50 deletions(-)
 create mode 100644 packages/frontend/component/.storybook/main.ts
 create mode 100644 packages/frontend/component/.storybook/preview.css.ts
 create mode 100644 packages/frontend/component/.storybook/preview.html
 create mode 100644 packages/frontend/component/.storybook/preview.tsx
 create mode 100644 packages/frontend/component/src/ui/avatar/avatar.stories.tsx
 create mode 100644 packages/frontend/component/src/ui/button/button.stories.tsx
 create mode 100644 packages/frontend/component/src/ui/button/icon-button.stories.tsx
 create mode 100644 packages/frontend/component/src/ui/checkbox/checkbox.stories.tsx
 create mode 100644 packages/frontend/component/src/ui/divider/divider.stories.tsx
 create mode 100644 packages/frontend/component/src/ui/empty/empty.stories.tsx
 create mode 100644 packages/frontend/component/src/ui/input/input.stories.tsx
 create mode 100644 packages/frontend/component/src/ui/loading/loading.stories.tsx
 create mode 100644 packages/frontend/component/src/ui/lottie/collections-icon.stories.tsx
 create mode 100644 packages/frontend/component/src/ui/lottie/delete-icon.stories.tsx
 create mode 100644 packages/frontend/component/src/ui/menu/menu-trigger.stories.tsx
 create mode 100644 packages/frontend/component/src/ui/menu/menu.stories.tsx
 create mode 100644 packages/frontend/component/src/ui/modal/modal.stories.tsx
 create mode 100644 packages/frontend/component/src/ui/scrollbar/scrollbar.stories.tsx
 create mode 100644 packages/frontend/component/src/ui/skeleton/skeleton.stories.tsx
 create mode 100644 packages/frontend/component/src/ui/switch/switch.stories.tsx
 create mode 100644 packages/frontend/component/src/ui/table/table.stories.tsx
 create mode 100644 packages/frontend/component/src/ui/toast/toast.stories.tsx
 create mode 100644 packages/frontend/component/src/ui/tooltip/tooltip.stories.tsx

diff --git a/packages/frontend/component/.storybook/main.ts b/packages/frontend/component/.storybook/main.ts
new file mode 100644
index 0000000000..2e6b6a0463
--- /dev/null
+++ b/packages/frontend/component/.storybook/main.ts
@@ -0,0 +1,54 @@
+import { StorybookConfig } from '@storybook/react-vite';
+import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
+import { fileURLToPath } from 'url';
+import { mergeConfig } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
+import { getRuntimeConfig } from '../../core/.webpack/runtime-config';
+
+export default {
+  stories: ['../src/ui/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-mdx-gfm',
+    'storybook-dark-mode',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  features: {
+    storyStoreV7: true,
+  },
+  docs: {
+    autodocs: true,
+  },
+  async viteFinal(config, _options) {
+    return mergeConfig(config, {
+      plugins: [
+        vanillaExtractPlugin(),
+        tsconfigPaths({
+          root: fileURLToPath(new URL('../../../../', import.meta.url)),
+          ignoreConfigErrors: true,
+        }),
+      ],
+      define: {
+        'process.on': '(() => void 0)',
+        'process.env': {},
+        'process.env.COVERAGE': JSON.stringify(!!process.env.COVERAGE),
+        'process.env.SHOULD_REPORT_TRACE': `${Boolean(
+          process.env.SHOULD_REPORT_TRACE === 'true'
+        )}`,
+        'process.env.TRACE_REPORT_ENDPOINT': `"${process.env.TRACE_REPORT_ENDPOINT}"`,
+        'process.env.CAPTCHA_SITE_KEY': `"${process.env.CAPTCHA_SITE_KEY}"`,
+        runtimeConfig: getRuntimeConfig({
+          distribution: 'browser',
+          mode: 'development',
+          channel: 'canary',
+          coverage: false,
+        }),
+      },
+    });
+  },
+} satisfies StorybookConfig;
diff --git a/packages/frontend/component/.storybook/preview.css.ts b/packages/frontend/component/.storybook/preview.css.ts
new file mode 100644
index 0000000000..08ed839414
--- /dev/null
+++ b/packages/frontend/component/.storybook/preview.css.ts
@@ -0,0 +1,27 @@
+import { darkCssVariables, lightCssVariables } from '@toeverything/theme';
+import { globalStyle } from '@vanilla-extract/css';
+
+globalStyle('*', {
+  margin: 0,
+  padding: 0,
+});
+
+globalStyle('body', {
+  color: 'var(--affine-text-primary-color)',
+  fontFamily: 'var(--affine-font-family)',
+  fontSize: 'var(--affine-font-base)',
+  lineHeight: 'var(--affine-font-height)',
+  backgroundColor: 'var(--affine-background-primary-color)',
+});
+
+globalStyle('html', {
+  vars: lightCssVariables,
+});
+
+globalStyle('html[data-theme="dark"]', {
+  vars: darkCssVariables,
+});
+
+globalStyle('.docs-story', {
+  backgroundColor: 'var(--affine-background-primary-color)',
+});
diff --git a/packages/frontend/component/.storybook/preview.html b/packages/frontend/component/.storybook/preview.html
new file mode 100644
index 0000000000..e551040105
--- /dev/null
+++ b/packages/frontend/component/.storybook/preview.html
@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>
diff --git a/packages/frontend/component/.storybook/preview.tsx b/packages/frontend/component/.storybook/preview.tsx
new file mode 100644
index 0000000000..942413a879
--- /dev/null
+++ b/packages/frontend/component/.storybook/preview.tsx
@@ -0,0 +1,60 @@
+import './preview.css';
+import { ThemeProvider, useTheme } from 'next-themes';
+import type { ComponentType } from 'react';
+import { useEffect } from 'react';
+import { useDarkMode } from 'storybook-dark-mode';
+
+import type { Preview } from '@storybook/react';
+import React from 'react';
+
+export const parameters: Preview = {
+  argTypes: {
+    param: {
+      table: { category: 'Group' },
+    },
+  },
+  globalTypes: {
+    theme: {
+      description: 'Global theme for components',
+      defaultValue: 'light',
+      toolbar: {
+        title: 'Theme',
+        icon: 'circlehollow',
+        items: ['light', 'dark'],
+        dynamicTitle: true,
+      },
+    },
+  },
+};
+
+const ThemeChange = () => {
+  const isDark = useDarkMode();
+  const theme = useTheme();
+  if (theme.resolvedTheme === 'dark' && !isDark) {
+    theme.setTheme('light');
+  } else if (theme.resolvedTheme === 'light' && isDark) {
+    theme.setTheme('dark');
+  }
+  return null;
+};
+
+const Component = () => {
+  const isDark = useDarkMode();
+  const theme = useTheme();
+  useEffect(() => {
+    theme.setTheme(isDark ? 'dark' : 'light');
+  }, [isDark]);
+  return null;
+};
+
+export const decorators = [
+  (Story: ComponentType, context) => {
+    return (
+      <ThemeProvider themes={['dark', 'light']} enableSystem={true}>
+        <ThemeChange />
+        <Component />
+        <Story {...context} />
+      </ThemeProvider>
+    );
+  },
+];
diff --git a/packages/frontend/component/package.json b/packages/frontend/component/package.json
index 161fd3d706..0e6fee3b71 100644
--- a/packages/frontend/component/package.json
+++ b/packages/frontend/component/package.json
@@ -8,6 +8,9 @@
     "./ui/*": "./src/ui/*/index.ts",
     "./*": "./src/components/*/index.tsx"
   },
+  "scripts": {
+    "dev": "storybook dev -p 6006"
+  },
   "peerDependencies": {
     "@blocksuite/blocks": "*",
     "@blocksuite/editor": "*",
@@ -74,7 +77,18 @@
     "@blocksuite/icons": "2.1.36",
     "@blocksuite/lit": "0.0.0-20231124123613-7c06e95d-nightly",
     "@blocksuite/store": "0.0.0-20231124123613-7c06e95d-nightly",
+    "@storybook/addon-actions": "^7.5.3",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/addon-mdx-gfm": "^7.5.3",
+    "@storybook/addon-storysource": "^7.5.3",
+    "@storybook/blocks": "^7.5.3",
+    "@storybook/builder-vite": "^7.5.3",
     "@storybook/jest": "^0.2.3",
+    "@storybook/react": "^7.5.3",
+    "@storybook/react-vite": "^7.5.3",
+    "@storybook/test-runner": "^0.15.2",
     "@storybook/testing-library": "^0.2.2",
     "@testing-library/react": "^14.0.0",
     "@types/bytes": "^3.1.3",
@@ -84,6 +98,8 @@
     "@types/react-dom": "^18.2.13",
     "@vanilla-extract/css": "^1.13.0",
     "fake-indexeddb": "^5.0.0",
+    "storybook": "^7.5.3",
+    "storybook-dark-mode": "^3.0.1",
     "typescript": "^5.3.2",
     "vite": "^4.4.11",
     "vitest": "0.34.6",
diff --git a/packages/frontend/component/src/ui/avatar/avatar.stories.tsx b/packages/frontend/component/src/ui/avatar/avatar.stories.tsx
new file mode 100644
index 0000000000..f7e3447c5b
--- /dev/null
+++ b/packages/frontend/component/src/ui/avatar/avatar.stories.tsx
@@ -0,0 +1,52 @@
+import { CameraIcon } from '@blocksuite/icons';
+import type { Meta, StoryFn } from '@storybook/react';
+
+import { Avatar, type AvatarProps } from './avatar';
+
+export default {
+  title: 'UI/Avatar',
+  component: Avatar,
+  argTypes: {
+    onClick: () => console.log('Click button'),
+  },
+} satisfies Meta<AvatarProps>;
+
+const Template: StoryFn<AvatarProps> = args => <Avatar {...args} />;
+
+export const DefaultAvatar: StoryFn<AvatarProps> = Template.bind(undefined);
+DefaultAvatar.args = {
+  name: 'AFFiNE',
+  url: 'https://affine.pro/favicon-96.png',
+  size: 50,
+};
+export const Fallback: StoryFn<AvatarProps> = Template.bind(undefined);
+Fallback.args = {
+  name: 'AFFiNE',
+  size: 50,
+};
+export const ColorfulFallback: StoryFn<AvatarProps> = Template.bind(undefined);
+ColorfulFallback.args = {
+  size: 50,
+  colorfulFallback: true,
+  name: 'blocksuite',
+};
+export const WithHover: StoryFn<AvatarProps> = Template.bind(undefined);
+WithHover.args = {
+  size: 50,
+  colorfulFallback: true,
+  name: 'With Hover',
+  hoverIcon: <CameraIcon />,
+};
+
+export const WithRemove: StoryFn<AvatarProps> = Template.bind(undefined);
+WithRemove.args = {
+  size: 50,
+  colorfulFallback: true,
+  name: 'With Hover',
+  hoverIcon: <CameraIcon />,
+  removeTooltipOptions: { content: 'This is remove tooltip' },
+  avatarTooltipOptions: { content: 'This is avatar tooltip' },
+  onRemove: e => {
+    console.log('on remove', e);
+  },
+};
diff --git a/packages/frontend/component/src/ui/button/button.stories.tsx b/packages/frontend/component/src/ui/button/button.stories.tsx
new file mode 100644
index 0000000000..93739ce78b
--- /dev/null
+++ b/packages/frontend/component/src/ui/button/button.stories.tsx
@@ -0,0 +1,46 @@
+import { InformationIcon } from '@blocksuite/icons';
+import type { Meta, StoryFn } from '@storybook/react';
+
+import { Button, type ButtonProps } from './button';
+export default {
+  title: 'UI/Button',
+  component: Button,
+  argTypes: {
+    onClick: () => console.log('Click button'),
+  },
+} satisfies Meta<ButtonProps>;
+
+const Template: StoryFn<ButtonProps> = args => <Button {...args} />;
+
+export const Default: StoryFn<ButtonProps> = Template.bind(undefined);
+Default.args = {
+  type: 'default',
+  children: 'This is a default button',
+  icon: <InformationIcon />,
+};
+
+export const Primary: StoryFn<ButtonProps> = Template.bind(undefined);
+Primary.args = {
+  type: 'primary',
+  children: 'Content',
+  icon: <InformationIcon />,
+};
+
+export const Disabled: StoryFn<ButtonProps> = Template.bind(undefined);
+Disabled.args = {
+  disabled: true,
+  children: 'This is a disabled button',
+};
+
+export const LargeSizeButton: StoryFn<ButtonProps> = Template.bind(undefined);
+LargeSizeButton.args = {
+  size: 'large',
+  children: 'This is a large button',
+};
+
+export const ExtraLargeSizeButton: StoryFn<ButtonProps> =
+  Template.bind(undefined);
+ExtraLargeSizeButton.args = {
+  size: 'extraLarge',
+  children: 'This is a extra large button',
+};
diff --git a/packages/frontend/component/src/ui/button/icon-button.stories.tsx b/packages/frontend/component/src/ui/button/icon-button.stories.tsx
new file mode 100644
index 0000000000..7f7d23b888
--- /dev/null
+++ b/packages/frontend/component/src/ui/button/icon-button.stories.tsx
@@ -0,0 +1,48 @@
+import { InformationIcon } from '@blocksuite/icons';
+import type { Meta, StoryFn } from '@storybook/react';
+
+import { IconButton, type IconButtonProps } from './icon-button';
+export default {
+  title: 'UI/IconButton',
+  component: IconButton,
+  argTypes: {
+    onClick: () => console.log('Click button'),
+  },
+} satisfies Meta<IconButtonProps>;
+
+const Template: StoryFn<IconButtonProps> = args => <IconButton {...args} />;
+
+export const Plain: StoryFn<IconButtonProps> = Template.bind(undefined);
+Plain.args = {
+  children: <InformationIcon />,
+};
+
+export const Primary: StoryFn<IconButtonProps> = Template.bind(undefined);
+Primary.args = {
+  type: 'primary',
+  icon: <InformationIcon />,
+};
+
+export const Disabled: StoryFn<IconButtonProps> = Template.bind(undefined);
+Disabled.args = {
+  disabled: true,
+  icon: <InformationIcon />,
+};
+export const ExtraSmallSizeButton: StoryFn<IconButtonProps> =
+  Template.bind(undefined);
+ExtraSmallSizeButton.args = {
+  size: 'extraSmall',
+  icon: <InformationIcon />,
+};
+export const SmallSizeButton: StoryFn<IconButtonProps> =
+  Template.bind(undefined);
+SmallSizeButton.args = {
+  size: 'small',
+  icon: <InformationIcon />,
+};
+export const LargeSizeButton: StoryFn<IconButtonProps> =
+  Template.bind(undefined);
+LargeSizeButton.args = {
+  size: 'large',
+  icon: <InformationIcon />,
+};
diff --git a/packages/frontend/component/src/ui/checkbox/checkbox.stories.tsx b/packages/frontend/component/src/ui/checkbox/checkbox.stories.tsx
new file mode 100644
index 0000000000..db5d156734
--- /dev/null
+++ b/packages/frontend/component/src/ui/checkbox/checkbox.stories.tsx
@@ -0,0 +1,65 @@
+import type { Meta, StoryFn } from '@storybook/react';
+import { useState } from 'react';
+
+import { Checkbox } from './checkbox';
+
+export default {
+  title: 'UI/Checkbox',
+  component: Checkbox,
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+} satisfies Meta<typeof Checkbox>;
+
+export const Basic: StoryFn<typeof Checkbox> = props => {
+  const [checked, setChecked] = useState(props.checked);
+  const handleChange = (
+    _event: React.ChangeEvent<HTMLInputElement>,
+    checked: boolean
+  ) => {
+    setChecked(checked);
+    props.onChange?.(_event, checked);
+  };
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '1rem',
+        justifyContent: 'center',
+      }}
+    >
+      <Checkbox
+        style={{ fontSize: 14 }}
+        {...props}
+        checked={checked}
+        onChange={handleChange}
+      />
+      <Checkbox
+        style={{ fontSize: 16 }}
+        {...props}
+        checked={checked}
+        onChange={handleChange}
+      />
+      <Checkbox
+        style={{ fontSize: 18 }}
+        {...props}
+        checked={checked}
+        onChange={handleChange}
+      />
+      <Checkbox
+        style={{ fontSize: 24 }}
+        {...props}
+        checked={checked}
+        onChange={handleChange}
+      />
+    </div>
+  );
+};
+
+Basic.args = {
+  checked: true,
+  disabled: false,
+  indeterminate: false,
+  onChange: console.log,
+};
diff --git a/packages/frontend/component/src/ui/divider/divider.stories.tsx b/packages/frontend/component/src/ui/divider/divider.stories.tsx
new file mode 100644
index 0000000000..61bf7db8c3
--- /dev/null
+++ b/packages/frontend/component/src/ui/divider/divider.stories.tsx
@@ -0,0 +1,25 @@
+import type { Meta, StoryFn } from '@storybook/react';
+
+import { Divider, type DividerProps } from '.';
+
+export default {
+  title: 'UI/Divider',
+  component: Divider,
+} satisfies Meta<typeof Divider>;
+
+const Template: StoryFn<DividerProps> = args => (
+  <div
+    style={{
+      height: '100px',
+      padding: '0 20px',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+    }}
+  >
+    <Divider {...args} />
+  </div>
+);
+
+export const Default: StoryFn<DividerProps> = Template.bind(undefined);
+Default.args = {};
diff --git a/packages/frontend/component/src/ui/divider/divider.tsx b/packages/frontend/component/src/ui/divider/divider.tsx
index 56f7a57b57..de051b5461 100644
--- a/packages/frontend/component/src/ui/divider/divider.tsx
+++ b/packages/frontend/component/src/ui/divider/divider.tsx
@@ -11,19 +11,18 @@ export type DividerProps = PropsWithChildren &
     dividerColor?: string;
   };
 
-const defaultProps = {
-  orientation: 'horizontal',
-  size: 'default',
-};
-
 export const Divider = forwardRef<HTMLDivElement, DividerProps>(
-  (props, ref) => {
-    const { orientation, className, size, dividerColor, style, ...otherProps } =
-      {
-        ...defaultProps,
-        ...props,
-      };
-
+  (
+    {
+      orientation = 'horizontal',
+      size = 'default',
+      dividerColor = 'var(--affine-border-color)',
+      style,
+      className,
+      ...otherProps
+    },
+    ref
+  ) => {
     return (
       <div
         ref={ref}
diff --git a/packages/frontend/component/src/ui/empty/empty.stories.tsx b/packages/frontend/component/src/ui/empty/empty.stories.tsx
new file mode 100644
index 0000000000..3ef2e3f893
--- /dev/null
+++ b/packages/frontend/component/src/ui/empty/empty.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta, StoryFn } from '@storybook/react';
+
+import { Empty, type EmptyContentProps } from '.';
+
+export default {
+  title: 'UI/Empty',
+  component: Empty,
+} satisfies Meta<typeof Empty>;
+
+const Template: StoryFn<EmptyContentProps> = args => <Empty {...args} />;
+
+export const Default: StoryFn<EmptyContentProps> = Template.bind(undefined);
+Default.args = {
+  title: 'No Data',
+  description: 'No Data',
+};
diff --git a/packages/frontend/component/src/ui/input/input.stories.tsx b/packages/frontend/component/src/ui/input/input.stories.tsx
new file mode 100644
index 0000000000..1c7572a596
--- /dev/null
+++ b/packages/frontend/component/src/ui/input/input.stories.tsx
@@ -0,0 +1,58 @@
+import { InformationIcon } from '@blocksuite/icons';
+import type { Meta, StoryFn } from '@storybook/react';
+
+import { Input, type InputProps } from '.';
+
+export default {
+  title: 'UI/Input',
+  component: Input,
+} satisfies Meta<typeof Input>;
+
+const Template: StoryFn<InputProps> = args => (
+  <div style={{ width: '50%' }}>
+    <Input {...args} />
+  </div>
+);
+
+export const Default: StoryFn<InputProps> = Template.bind(undefined);
+Default.args = {
+  defaultValue: 'This is a default input',
+};
+
+export const WithPrefix: StoryFn<InputProps> = Template.bind(undefined);
+WithPrefix.args = {
+  defaultValue: 'This is a input with prefix',
+  preFix: <InformationIcon />,
+};
+
+export const Large: StoryFn<InputProps> = Template.bind(undefined);
+Large.args = {
+  placeholder: 'This is a large input',
+  size: 'large',
+};
+export const ExtraLarge: StoryFn<InputProps> = Template.bind(undefined);
+ExtraLarge.args = {
+  placeholder: 'This is a extraLarge input',
+  size: 'extraLarge',
+};
+
+export const CustomWidth: StoryFn<InputProps> = Template.bind(undefined);
+CustomWidth.args = {
+  width: 300,
+  placeholder: 'This is a custom width input, default is 100%',
+};
+export const ErrorStatus: StoryFn<InputProps> = Template.bind(undefined);
+ErrorStatus.args = {
+  status: 'error',
+  placeholder: 'This is a error status input',
+};
+export const WarningStatus: StoryFn<InputProps> = Template.bind(undefined);
+WarningStatus.args = {
+  status: 'warning',
+  placeholder: 'This is a warning status input',
+};
+export const Disabled: StoryFn<InputProps> = Template.bind(undefined);
+Disabled.args = {
+  disabled: true,
+  placeholder: 'This is a disabled input',
+};
diff --git a/packages/frontend/component/src/ui/input/style.css.ts b/packages/frontend/component/src/ui/input/style.css.ts
index 1a28265a05..2c49ca54f2 100644
--- a/packages/frontend/component/src/ui/input/style.css.ts
+++ b/packages/frontend/component/src/ui/input/style.css.ts
@@ -8,17 +8,17 @@ export const inputWrapper = style({
   },
   width: widthVar,
   height: 28,
-  padding: '4px 10px',
-  color: 'var(--affine-icon-color)',
-  border: '1px solid var(--affine-border-color)',
-  backgroundColor: 'var(--affine-white-10)',
+  lineHeight: '22px',
+  padding: '0 10px',
+  color: 'var(--affine-text-primary-color)',
+  border: '1px solid',
+  backgroundColor: 'var(--affine-white)',
   borderRadius: 8,
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  gap: 8,
-  // icon size
-  fontSize: '16px',
+  fontSize: 'var(--affine-font-base)',
+  boxSizing: 'border-box',
 
   selectors: {
     '&.no-border': {
@@ -27,14 +27,10 @@ export const inputWrapper = style({
     // size
     '&.large': {
       height: 32,
-      // icon size
-      fontSize: '20px',
     },
     '&.extra-large': {
       height: 40,
-      padding: '8px 10px',
-      // icon size
-      fontSize: '20px',
+      fontWeight: 600,
     },
     // color
     '&.disabled': {
@@ -49,45 +45,34 @@ export const inputWrapper = style({
     '&.warning': {
       borderColor: 'var(--affine-warning-color)',
     },
+    '&.default': {
+      borderColor: 'var(--affine-border-color)',
+    },
     '&.default.focus': {
       borderColor: 'var(--affine-primary-color)',
-      boxShadow: 'var(--affine-active-shadow)',
+      boxShadow: '0px 0px 0px 2px rgba(30, 150, 235, 0.30);',
     },
   },
 });
 
 export const input = style({
+  height: '100%',
   width: '0',
   flex: 1,
-  fontSize: 'var(--affine-font-xs)',
-  lineHeight: '20px',
-  fontWeight: '500',
-  color: 'var(--affine-text-primary-color)',
   boxSizing: 'border-box',
   // prevent default style
   WebkitAppearance: 'none',
   WebkitTapHighlightColor: 'transparent',
   outline: 'none',
   border: 'none',
+  background: 'transparent',
 
   selectors: {
     '&::placeholder': {
       color: 'var(--affine-placeholder-color)',
     },
-    '&:autofill, &:-webkit-autofill, &:-internal-autofill-selected, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active':
-      {
-        // The reason for using ‘!important’ here is:
-        // The user agent style sheets of many browsers utilise !important in their :-webkit-autofill style declarations.
-        // https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill#:~:text=%2C%20254)-,!important,-%3B%0Abackground%2Dimage
-        backgroundColor: 'var(--affine-white-10) !important',
-        ['-webkit-box-shadow' as string]: 'none !important',
-      },
     '&:disabled': {
       color: 'var(--affine-text-disable-color)',
     },
-    '&.large, &.extra-large': {
-      fontSize: 'var(--affine-font-base)',
-      lineHeight: '24px',
-    },
   },
 });
diff --git a/packages/frontend/component/src/ui/loading/loading.stories.tsx b/packages/frontend/component/src/ui/loading/loading.stories.tsx
new file mode 100644
index 0000000000..59a08780a8
--- /dev/null
+++ b/packages/frontend/component/src/ui/loading/loading.stories.tsx
@@ -0,0 +1,13 @@
+import type { Meta, StoryFn } from '@storybook/react';
+
+import { Loading, type LoadingProps } from '.';
+
+export default {
+  title: 'UI/Loading',
+  component: Loading,
+} satisfies Meta<typeof Loading>;
+
+const Template: StoryFn<LoadingProps> = args => <Loading {...args} />;
+
+export const Default: StoryFn<LoadingProps> = Template.bind(undefined);
+Default.args = {};
diff --git a/packages/frontend/component/src/ui/lottie/collections-icon.stories.tsx b/packages/frontend/component/src/ui/lottie/collections-icon.stories.tsx
new file mode 100644
index 0000000000..c6d07f3489
--- /dev/null
+++ b/packages/frontend/component/src/ui/lottie/collections-icon.stories.tsx
@@ -0,0 +1,18 @@
+import type { Meta, StoryFn } from '@storybook/react';
+
+import {
+  AnimatedCollectionsIcon,
+  type CollectionsIconProps,
+} from './collections-icon';
+
+export default {
+  title: 'UI/Lottie/Collection Icons',
+  component: AnimatedCollectionsIcon,
+} satisfies Meta<typeof AnimatedCollectionsIcon>;
+
+const Template: StoryFn<CollectionsIconProps> = args => (
+  <AnimatedCollectionsIcon {...args} />
+);
+
+export const Default: StoryFn<CollectionsIconProps> = Template.bind(undefined);
+Default.args = {};
diff --git a/packages/frontend/component/src/ui/lottie/delete-icon.stories.tsx b/packages/frontend/component/src/ui/lottie/delete-icon.stories.tsx
new file mode 100644
index 0000000000..4d72581a29
--- /dev/null
+++ b/packages/frontend/component/src/ui/lottie/delete-icon.stories.tsx
@@ -0,0 +1,15 @@
+import type { Meta, StoryFn } from '@storybook/react';
+
+import { AnimatedDeleteIcon, type DeleteIconProps } from './delete-icon';
+
+export default {
+  title: 'UI/Lottie/Delete Icon',
+  component: AnimatedDeleteIcon,
+} satisfies Meta<typeof AnimatedDeleteIcon>;
+
+const Template: StoryFn<DeleteIconProps> = args => (
+  <AnimatedDeleteIcon {...args} />
+);
+
+export const Default: StoryFn<DeleteIconProps> = Template.bind(undefined);
+Default.args = {};
diff --git a/packages/frontend/component/src/ui/menu/menu-trigger.stories.tsx b/packages/frontend/component/src/ui/menu/menu-trigger.stories.tsx
new file mode 100644
index 0000000000..c6222af142
--- /dev/null
+++ b/packages/frontend/component/src/ui/menu/menu-trigger.stories.tsx
@@ -0,0 +1,17 @@
+import type { Meta, StoryFn } from '@storybook/react';
+
+import { MenuTrigger, type MenuTriggerProps } from '.';
+
+export default {
+  title: 'UI/MenuTrigger',
+  component: MenuTrigger,
+} satisfies Meta<typeof MenuTrigger>;
+
+const Template: StoryFn<MenuTriggerProps> = args => (
+  <div style={{ width: '50%' }}>
+    <MenuTrigger {...args}>This is a menu trigger</MenuTrigger>
+  </div>
+);
+
+export const Default: StoryFn<MenuTriggerProps> = Template.bind(undefined);
+Default.args = {};
diff --git a/packages/frontend/component/src/ui/menu/menu.stories.tsx b/packages/frontend/component/src/ui/menu/menu.stories.tsx
new file mode 100644
index 0000000000..6509f3e7ba
--- /dev/null
+++ b/packages/frontend/component/src/ui/menu/menu.stories.tsx
@@ -0,0 +1,203 @@
+import { InformationIcon } from '@blocksuite/icons';
+import type { Meta, StoryFn } from '@storybook/react';
+import { type ReactNode, useCallback, useState } from 'react';
+
+import { Button } from '../button';
+import { Tooltip } from '../tooltip';
+import {
+  Menu,
+  MenuIcon,
+  MenuItem,
+  type MenuItemProps,
+  type MenuProps,
+  MenuSeparator,
+  MenuSub,
+  MenuTrigger,
+} from '.';
+
+export default {
+  title: 'UI/Menu',
+  component: Menu,
+} satisfies Meta<typeof Menu>;
+
+const Template: StoryFn<MenuProps> = args => (
+  <Menu
+    {...args}
+    contentOptions={{
+      style: {
+        width: '500px',
+      },
+    }}
+  >
+    <MenuTrigger>menu trigger</MenuTrigger>
+  </Menu>
+);
+
+interface Items {
+  label: ReactNode;
+  type?: MenuItemProps['type'];
+  preFix?: MenuItemProps['preFix'];
+  disabled?: boolean;
+  divider?: boolean;
+  subItems?: Items[];
+  block?: boolean;
+}
+
+const items: Items[] = [
+  {
+    label: 'default menu item 1',
+  },
+  {
+    label: 'menu item with icon',
+    preFix: (
+      <Tooltip content="Use `MenuIcon` to wrap your icon and choose `preFix` or `endFix`">
+        <MenuIcon>
+          <InformationIcon />
+        </MenuIcon>
+      </Tooltip>
+    ),
+  },
+  {
+    label: (
+      <Tooltip
+        align="start"
+        content="Write, Draw, and Plan All at Once Notion Open Source Alternative One
+          hyper-fused platform for wildly creative minds"
+      >
+        <span>
+          Write, Draw, and Plan All at Once Notion Open Source Alternative One
+          hyper-fused platform for wildly creative minds
+        </span>
+      </Tooltip>
+    ),
+    block: true,
+  },
+  {
+    label: 'default disabled menu item',
+    disabled: true,
+  },
+  {
+    label: 'danger menu item',
+    type: 'danger',
+    block: true,
+    preFix: (
+      <Tooltip content="Use `MenuIcon` to wrap your icon and choose `preFix` or `endFix`">
+        <MenuIcon>
+          <InformationIcon />
+        </MenuIcon>
+      </Tooltip>
+    ),
+  },
+  {
+    label: 'warning menu item',
+    type: 'warning',
+    divider: true,
+  },
+
+  {
+    label: 'menu item with sub menu',
+    subItems: [
+      {
+        label: 'sub menu item 1',
+      },
+      {
+        label: 'sub menu item 1',
+      },
+    ],
+  },
+
+  {
+    label: 'menu item with deep sub menu',
+    subItems: [
+      {
+        label: 'sub menu item 1',
+      },
+      {
+        label: 'sub menu with sub',
+        subItems: [
+          {
+            label: 'sub menu item 2-1',
+          },
+          {
+            label: 'sub menu item 2-2',
+          },
+        ],
+      },
+    ],
+  },
+];
+
+export const Default: StoryFn<MenuProps> = Template.bind(undefined);
+
+const ItemRender = ({ label, divider, subItems, ...otherProps }: Items) => {
+  const onSelect = useCallback(() => {
+    console.log('value', label);
+  }, [label]);
+
+  if (subItems) {
+    return (
+      <>
+        <MenuSub
+          items={subItems.map((props, i) => (
+            <ItemRender key={i} {...props} />
+          ))}
+          triggerOptions={otherProps}
+        >
+          {label}
+        </MenuSub>
+        {divider ? <MenuSeparator /> : null}
+      </>
+    );
+  }
+
+  return (
+    <>
+      <MenuItem onSelect={onSelect} {...otherProps}>
+        {label}
+      </MenuItem>
+      {divider ? <MenuSeparator /> : null}
+    </>
+  );
+};
+
+Default.args = {
+  items: items.map((props, i) => {
+    return <ItemRender key={i} {...props} />;
+  }),
+};
+
+const selectList = [
+  { name: 'AFFiNE', value: '1' },
+  { name: 'blocksuite', value: '2' },
+  { name: 'octobase', value: '3' },
+  { name: 'virgo', value: '4' },
+];
+const SelectItems = ({
+  selectedValue,
+  onSelect,
+}: {
+  selectedValue: string;
+  onSelect: (value: string) => void;
+}) => {
+  return selectList.map(({ name, value }) => (
+    <MenuItem
+      key={value}
+      selected={selectedValue === value}
+      onSelect={() => onSelect(value)}
+    >
+      {name}
+    </MenuItem>
+  ));
+};
+
+const AsSelectTemplate: StoryFn<MenuProps> = () => {
+  const [value, setValue] = useState('1');
+  const name = selectList.find(item => item.value === value)?.name;
+  return (
+    <Menu items={<SelectItems selectedValue={value} onSelect={setValue} />}>
+      <Button>selected: {name}</Button>
+    </Menu>
+  );
+};
+
+export const AsSelect: StoryFn<MenuProps> = AsSelectTemplate.bind({});
diff --git a/packages/frontend/component/src/ui/modal/modal.stories.tsx b/packages/frontend/component/src/ui/modal/modal.stories.tsx
new file mode 100644
index 0000000000..906ed94fb6
--- /dev/null
+++ b/packages/frontend/component/src/ui/modal/modal.stories.tsx
@@ -0,0 +1,69 @@
+import type { Meta, StoryFn } from '@storybook/react';
+import { useCallback, useState } from 'react';
+
+import { Button } from '../button';
+import { Input, type InputProps } from '../input';
+import { ConfirmModal, type ConfirmModalProps } from './confirm-modal';
+import { Modal, type ModalProps } from './modal';
+
+export default {
+  title: 'UI/Modal',
+  component: Modal,
+  argTypes: {},
+} satisfies Meta<ModalProps>;
+
+const Template: StoryFn<ModalProps> = args => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open Modal</Button>
+      <Modal open={open} onOpenChange={setOpen} {...args} />
+    </>
+  );
+};
+
+export const Default: StoryFn<ModalProps> = Template.bind(undefined);
+Default.args = {
+  title: 'Modal Title',
+  description:
+    'If the day is done, if birds sing no more, if the wind has flagged tired, then draw the veil of darkness thick upon me, even as thou hast wrapt the earth with the coverlet of sleep and tenderly closed the petals of the drooping lotus at dusk.',
+};
+
+const wait = () => new Promise(resolve => setTimeout(resolve, 1000));
+const ConfirmModalTemplate: StoryFn<ConfirmModalProps> = () => {
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [inputStatus, setInputStatus] =
+    useState<InputProps['status']>('default');
+
+  const handleConfirm = useCallback(async () => {
+    setLoading(true);
+    await wait();
+    setInputStatus(inputStatus !== 'error' ? 'error' : 'success');
+    setLoading(false);
+  }, [inputStatus]);
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open Confirm Modal</Button>
+      <ConfirmModal
+        open={open}
+        onOpenChange={setOpen}
+        onConfirm={handleConfirm}
+        title="Modal Title"
+        description="Modal description"
+        confirmButtonOptions={{
+          loading: loading,
+          type: 'primary',
+          children: 'Confirm',
+        }}
+      >
+        <Input placeholder="input someting" status={inputStatus} />
+      </ConfirmModal>
+    </>
+  );
+};
+
+export const Confirm: StoryFn<ModalProps> =
+  ConfirmModalTemplate.bind(undefined);
diff --git a/packages/frontend/component/src/ui/popover/index.ts b/packages/frontend/component/src/ui/popover/index.ts
index 1f4904cff9..1b82f8c720 100644
--- a/packages/frontend/component/src/ui/popover/index.ts
+++ b/packages/frontend/component/src/ui/popover/index.ts
@@ -1 +1,4 @@
+/**
+ * @deprecated
+ */
 export * from './popover';
diff --git a/packages/frontend/component/src/ui/scrollbar/scrollbar.stories.tsx b/packages/frontend/component/src/ui/scrollbar/scrollbar.stories.tsx
new file mode 100644
index 0000000000..ff8bd3b3bc
--- /dev/null
+++ b/packages/frontend/component/src/ui/scrollbar/scrollbar.stories.tsx
@@ -0,0 +1,24 @@
+import type { Meta, StoryFn } from '@storybook/react';
+
+import { ScrollableContainer, type ScrollableContainerProps } from '.';
+
+export default {
+  title: 'UI/Scrollbar',
+  component: ScrollableContainer,
+} satisfies Meta<typeof ScrollableContainer>;
+
+const Template: StoryFn<ScrollableContainerProps> = args => (
+  <div style={{ height: '100px', width: '100%' }}>
+    <ScrollableContainer {...args}>
+      <ul>
+        {Array.from({ length: 100 }).map((_, index) => (
+          <li key={index}>item {index}</li>
+        ))}
+      </ul>
+    </ScrollableContainer>
+  </div>
+);
+
+export const Default: StoryFn<ScrollableContainerProps> =
+  Template.bind(undefined);
+Default.args = {};
diff --git a/packages/frontend/component/src/ui/skeleton/skeleton.stories.tsx b/packages/frontend/component/src/ui/skeleton/skeleton.stories.tsx
new file mode 100644
index 0000000000..58b5b94b0f
--- /dev/null
+++ b/packages/frontend/component/src/ui/skeleton/skeleton.stories.tsx
@@ -0,0 +1,39 @@
+import type { Meta, StoryFn } from '@storybook/react';
+
+import { Skeleton, type SkeletonProps } from '.';
+
+export default {
+  title: 'UI/Skeleton',
+  component: Skeleton,
+} satisfies Meta<typeof Skeleton>;
+
+const Template: StoryFn<SkeletonProps> = args => (
+  <>
+    {Array.from({ length: 4 }).map(i => (
+      <div
+        key={`${i}`}
+        style={{ width: '100%', maxWidth: '300px', marginBottom: '4px' }}
+      >
+        <Skeleton {...args} />
+      </div>
+    ))}
+  </>
+);
+
+export const Default: StoryFn<SkeletonProps> = Template.bind(undefined);
+Default.args = {};
+
+export const Circle: StoryFn<SkeletonProps> = Template.bind(undefined);
+Circle.args = {
+  variant: 'circular',
+};
+
+export const Rectangle: StoryFn<SkeletonProps> = Template.bind(undefined);
+Rectangle.args = {
+  variant: 'rectangular',
+};
+
+export const Text: StoryFn<SkeletonProps> = Template.bind(undefined);
+Text.args = {
+  variant: 'text',
+};
diff --git a/packages/frontend/component/src/ui/skeleton/types.ts b/packages/frontend/component/src/ui/skeleton/types.ts
index e0ad3eaae9..bda6b78418 100644
--- a/packages/frontend/component/src/ui/skeleton/types.ts
+++ b/packages/frontend/component/src/ui/skeleton/types.ts
@@ -1,5 +1,8 @@
 import type { HTMLAttributes, PropsWithChildren } from 'react';
 
+/**
+ * @reference These props are migrated from [MUI Skeleton props](https://mui.com/material-ui/api/skeleton/#props)
+ */
 export interface SkeletonProps
   extends PropsWithChildren,
     HTMLAttributes<HTMLElement> {
@@ -12,22 +15,19 @@ export interface SkeletonProps
    * The type of content that will be rendered.
    * @default `'text'`
    */
-  variant?: 'circular' | 'rectangular' | 'rounded' | 'text' | string;
+  variant?: 'circular' | 'rectangular' | 'rounded' | 'text';
 
   /**
    * Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own.
+   * Number values are treated as pixels.
    */
   width?: number | string;
 
   /**
    * Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card.
+   * Number values are treated as pixels.
    */
   height?: number | string;
-
-  /**
-   * Wrapper component. If not provided, the default element is a div.
-   */
-  wrapper?: string;
 }
 
 export type PickStringFromUnion<T> = T extends string ? T : never;
diff --git a/packages/frontend/component/src/ui/switch/switch.stories.tsx b/packages/frontend/component/src/ui/switch/switch.stories.tsx
new file mode 100644
index 0000000000..f50875ac78
--- /dev/null
+++ b/packages/frontend/component/src/ui/switch/switch.stories.tsx
@@ -0,0 +1,13 @@
+import type { Meta, StoryFn } from '@storybook/react';
+
+import { Switch, type SwitchProps } from '.';
+
+export default {
+  title: 'UI/Switch',
+  component: Switch,
+} satisfies Meta<typeof Switch>;
+
+const Template: StoryFn<SwitchProps> = args => <Switch {...args} />;
+
+export const Default: StoryFn<SwitchProps> = Template.bind(undefined);
+Default.args = {};
diff --git a/packages/frontend/component/src/ui/switch/switch.tsx b/packages/frontend/component/src/ui/switch/switch.tsx
index fb65a98869..b26c896396 100644
--- a/packages/frontend/component/src/ui/switch/switch.tsx
+++ b/packages/frontend/component/src/ui/switch/switch.tsx
@@ -9,7 +9,7 @@ import {
 
 import * as styles from './index.css';
 
-type SwitchProps = Omit<HTMLAttributes<HTMLLabelElement>, 'onChange'> & {
+export type SwitchProps = Omit<HTMLAttributes<HTMLLabelElement>, 'onChange'> & {
   checked?: boolean;
   onChange?: (checked: boolean) => void;
   children?: ReactNode;
diff --git a/packages/frontend/component/src/ui/table/table.stories.tsx b/packages/frontend/component/src/ui/table/table.stories.tsx
new file mode 100644
index 0000000000..2d48a07b16
--- /dev/null
+++ b/packages/frontend/component/src/ui/table/table.stories.tsx
@@ -0,0 +1,46 @@
+import type { Meta, StoryFn } from '@storybook/react';
+
+import {
+  Table,
+  TableBody,
+  TableBodyRow,
+  TableCell,
+  TableHead,
+  TableHeadRow,
+} from '.';
+
+export default {
+  title: 'UI/Table',
+  component: Table,
+} satisfies Meta<typeof Table>;
+
+const Template: StoryFn = args => (
+  <Table {...args}>
+    <TableHead>
+      <TableHeadRow>
+        <TableCell>Title 1</TableCell>
+        <TableCell>Title 2</TableCell>
+        <TableCell>Title 3</TableCell>
+        <TableCell>Title 4</TableCell>
+      </TableHeadRow>
+    </TableHead>
+
+    <TableBody>
+      {Array.from({ length: 10 }).map((_, rowNum) => {
+        return (
+          <TableBodyRow key={`${rowNum}`}>
+            {Array.from({ length: 4 }).map((_, colNum) => {
+              return (
+                <TableCell key={`${rowNum}-${colNum}`}>
+                  Cell {rowNum}-{colNum}
+                </TableCell>
+              );
+            })}
+          </TableBodyRow>
+        );
+      })}
+    </TableBody>
+  </Table>
+);
+
+export const Default: StoryFn = Template.bind(undefined);
diff --git a/packages/frontend/component/src/ui/toast/toast.stories.tsx b/packages/frontend/component/src/ui/toast/toast.stories.tsx
new file mode 100644
index 0000000000..0a058f473c
--- /dev/null
+++ b/packages/frontend/component/src/ui/toast/toast.stories.tsx
@@ -0,0 +1,20 @@
+import { useCallback, useState } from 'react';
+
+import { Button } from '../button';
+import { toast } from '.';
+
+export default {
+  title: 'UI/Toast',
+  component: () => null,
+};
+
+export const Default = () => {
+  const [count, setCount] = useState(1);
+
+  const showToast = useCallback(() => {
+    toast(`Toast ${count}`);
+    setCount(count + 1);
+  }, [count]);
+
+  return <Button onClick={showToast}>Show toast</Button>;
+};
diff --git a/packages/frontend/component/src/ui/tooltip/tooltip.stories.tsx b/packages/frontend/component/src/ui/tooltip/tooltip.stories.tsx
new file mode 100644
index 0000000000..fcba72f979
--- /dev/null
+++ b/packages/frontend/component/src/ui/tooltip/tooltip.stories.tsx
@@ -0,0 +1,32 @@
+import type { Meta, StoryFn } from '@storybook/react';
+
+import { Button } from '../button';
+import Tooltip, { type TooltipProps } from '.';
+
+export default {
+  title: 'UI/Tooltip',
+  component: Tooltip,
+} satisfies Meta<typeof Tooltip>;
+
+const Template: StoryFn<TooltipProps> = args => (
+  <Tooltip content="This is a tooltip" {...args}>
+    <Button>Show tooltip</Button>
+  </Tooltip>
+);
+
+export const Default: StoryFn<TooltipProps> = Template.bind(undefined);
+Default.args = {};
+
+export const WithCustomContent: StoryFn<TooltipProps> = args => (
+  <Tooltip
+    content={
+      <ul>
+        <li>This is a tooltip</li>
+        <li style={{ color: 'red' }}>With custom content</li>
+      </ul>
+    }
+    {...args}
+  >
+    <Button>Show tooltip</Button>
+  </Tooltip>
+);
diff --git a/yarn.lock b/yarn.lock
index 8d7c72100d..5aaabdcb44 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -246,7 +246,18 @@ __metadata:
     "@radix-ui/react-toast": "npm:^1.1.5"
     "@radix-ui/react-toolbar": "npm:^1.0.4"
     "@radix-ui/react-tooltip": "npm:^1.0.7"
+    "@storybook/addon-actions": "npm:^7.5.3"
+    "@storybook/addon-essentials": "npm:^7.5.3"
+    "@storybook/addon-interactions": "npm:^7.5.3"
+    "@storybook/addon-links": "npm:^7.5.3"
+    "@storybook/addon-mdx-gfm": "npm:^7.5.3"
+    "@storybook/addon-storysource": "npm:^7.5.3"
+    "@storybook/blocks": "npm:^7.5.3"
+    "@storybook/builder-vite": "npm:^7.5.3"
     "@storybook/jest": "npm:^0.2.3"
+    "@storybook/react": "npm:^7.5.3"
+    "@storybook/react-vite": "npm:^7.5.3"
+    "@storybook/test-runner": "npm:^0.15.2"
     "@storybook/testing-library": "npm:^0.2.2"
     "@testing-library/react": "npm:^14.0.0"
     "@toeverything/hooks": "workspace:*"
@@ -283,6 +294,8 @@ __metadata:
     react-router-dom: "npm:^6.16.0"
     react-virtuoso: "npm:^4.6.2"
     rxjs: "npm:^7.8.1"
+    storybook: "npm:^7.5.3"
+    storybook-dark-mode: "npm:^3.0.1"
     typescript: "npm:^5.3.2"
     uuid: "npm:^9.0.1"
     vite: "npm:^4.4.11"
@@ -11898,6 +11911,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/addon-mdx-gfm@npm:^7.5.3":
+  version: 7.5.3
+  resolution: "@storybook/addon-mdx-gfm@npm:7.5.3"
+  dependencies:
+    "@storybook/node-logger": "npm:7.5.3"
+    remark-gfm: "npm:^3.0.1"
+    ts-dedent: "npm:^2.0.0"
+  checksum: 6814b9c042047e441353a0f7b35138bc83de8e8be0cbc78740ff926ae1128c546b5143c39b11872fbe7e018dd3dfd838bfa198f32f63e22d72655a7b1e3091fa
+  languageName: node
+  linkType: hard
+
 "@storybook/addon-measure@npm:7.5.3":
   version: 7.5.3
   resolution: "@storybook/addon-measure@npm:7.5.3"
@@ -13939,6 +13963,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/mdast@npm:^3.0.0":
+  version: 3.0.15
+  resolution: "@types/mdast@npm:3.0.15"
+  dependencies:
+    "@types/unist": "npm:^2"
+  checksum: 050a5c1383928b2688dd145382a22535e2af87dc3fd592c843abb7851bcc99893a1ee0f63be19fc4e89779387ec26a57486cfb425b016c0b2a98a17fc4a1e8b3
+  languageName: node
+  linkType: hard
+
 "@types/mdast@npm:^4.0.0, @types/mdast@npm:^4.0.2":
   version: 4.0.3
   resolution: "@types/mdast@npm:4.0.3"
@@ -18972,7 +19005,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"diff@npm:^5.1.0":
+"diff@npm:^5.0.0, diff@npm:^5.1.0":
   version: 5.1.0
   resolution: "diff@npm:5.1.0"
   checksum: f4557032a98b2967fe27b1a91dfcf8ebb6b9a24b1afe616b5c2312465100b861e9b8d4da374be535f2d6b967ce2f53826d7f6edc2a0d32b2ab55abc96acc2f9d
@@ -23209,6 +23242,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-buffer@npm:^2.0.0":
+  version: 2.0.5
+  resolution: "is-buffer@npm:2.0.5"
+  checksum: 3261a8b858edcc6c9566ba1694bf829e126faa88911d1c0a747ea658c5d81b14b6955e3a702d59dabadd58fdd440c01f321aa71d6547105fd21d03f94d0597e7
+  languageName: node
+  linkType: hard
+
 "is-buffer@npm:~1.1.6":
   version: 1.1.6
   resolution: "is-buffer@npm:1.1.6"
@@ -24831,6 +24871,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"kleur@npm:^4.0.3":
+  version: 4.1.5
+  resolution: "kleur@npm:4.1.5"
+  checksum: 44d84cc4eedd4311099402ef6d4acd9b2d16e08e499d6ef3bb92389bd4692d7ef09e35248c26e27f98acac532122acb12a1bfee645994ae3af4f0a37996da7df
+  languageName: node
+  linkType: hard
+
 "kolorist@npm:^1.8.0":
   version: 1.8.0
   resolution: "kolorist@npm:1.8.0"
@@ -26149,6 +26196,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdast-util-find-and-replace@npm:^2.0.0":
+  version: 2.2.2
+  resolution: "mdast-util-find-and-replace@npm:2.2.2"
+  dependencies:
+    "@types/mdast": "npm:^3.0.0"
+    escape-string-regexp: "npm:^5.0.0"
+    unist-util-is: "npm:^5.0.0"
+    unist-util-visit-parents: "npm:^5.0.0"
+  checksum: 59e11e853b74d8f6083950327df39e27287b383930ff836298a5100aeda5568282bb45046c27886d2156ea101580bb0689b890c29623cefa5adc74e95d9ca9ff
+  languageName: node
+  linkType: hard
+
 "mdast-util-find-and-replace@npm:^3.0.0":
   version: 3.0.1
   resolution: "mdast-util-find-and-replace@npm:3.0.1"
@@ -26161,6 +26220,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdast-util-from-markdown@npm:^1.0.0":
+  version: 1.3.1
+  resolution: "mdast-util-from-markdown@npm:1.3.1"
+  dependencies:
+    "@types/mdast": "npm:^3.0.0"
+    "@types/unist": "npm:^2.0.0"
+    decode-named-character-reference: "npm:^1.0.0"
+    mdast-util-to-string: "npm:^3.1.0"
+    micromark: "npm:^3.0.0"
+    micromark-util-decode-numeric-character-reference: "npm:^1.0.0"
+    micromark-util-decode-string: "npm:^1.0.0"
+    micromark-util-normalize-identifier: "npm:^1.0.0"
+    micromark-util-symbol: "npm:^1.0.0"
+    micromark-util-types: "npm:^1.0.0"
+    unist-util-stringify-position: "npm:^3.0.0"
+    uvu: "npm:^0.5.0"
+  checksum: 1d334a54ddd6481ec4acf64c2c537b6463bc5113ba5a408f65c228dcc302d46837352814f11307af0f8b51dd7e4a0b887ce692e4d30ff31ff9d578b8ca82810b
+  languageName: node
+  linkType: hard
+
 "mdast-util-from-markdown@npm:^2.0.0":
   version: 2.0.0
   resolution: "mdast-util-from-markdown@npm:2.0.0"
@@ -26181,6 +26260,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdast-util-gfm-autolink-literal@npm:^1.0.0":
+  version: 1.0.3
+  resolution: "mdast-util-gfm-autolink-literal@npm:1.0.3"
+  dependencies:
+    "@types/mdast": "npm:^3.0.0"
+    ccount: "npm:^2.0.0"
+    mdast-util-find-and-replace: "npm:^2.0.0"
+    micromark-util-character: "npm:^1.0.0"
+  checksum: 272d075cdc7937bec0179af4052bd9032a6fbb05608b387b1b075b0491c73ce012f3ff1c718cdb5fb0ed1032c1fa7570d955b59c0ab3c3c72609928754774529
+  languageName: node
+  linkType: hard
+
 "mdast-util-gfm-autolink-literal@npm:^2.0.0":
   version: 2.0.0
   resolution: "mdast-util-gfm-autolink-literal@npm:2.0.0"
@@ -26194,6 +26285,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdast-util-gfm-footnote@npm:^1.0.0":
+  version: 1.0.2
+  resolution: "mdast-util-gfm-footnote@npm:1.0.2"
+  dependencies:
+    "@types/mdast": "npm:^3.0.0"
+    mdast-util-to-markdown: "npm:^1.3.0"
+    micromark-util-normalize-identifier: "npm:^1.0.0"
+  checksum: 825f207afc98fd1daa0acc8adcb5754d1f0d577ccb1749245289bee7c892557668d8ee3a5ab618f42e710646cf018dcda84f3c0c608ae11718e9014e5bf4f9dc
+  languageName: node
+  linkType: hard
+
 "mdast-util-gfm-footnote@npm:^2.0.0":
   version: 2.0.0
   resolution: "mdast-util-gfm-footnote@npm:2.0.0"
@@ -26207,6 +26309,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdast-util-gfm-strikethrough@npm:^1.0.0":
+  version: 1.0.3
+  resolution: "mdast-util-gfm-strikethrough@npm:1.0.3"
+  dependencies:
+    "@types/mdast": "npm:^3.0.0"
+    mdast-util-to-markdown: "npm:^1.3.0"
+  checksum: a9c2dc3ef46be7952d13b7063a16171bba8aa266bffe6b1e7267df02a60b4fa3734115cca311e9127db8cfcbbcd68fdd92aa26152bcd0c14372c79b254e4df2f
+  languageName: node
+  linkType: hard
+
 "mdast-util-gfm-strikethrough@npm:^2.0.0":
   version: 2.0.0
   resolution: "mdast-util-gfm-strikethrough@npm:2.0.0"
@@ -26218,6 +26330,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdast-util-gfm-table@npm:^1.0.0":
+  version: 1.0.7
+  resolution: "mdast-util-gfm-table@npm:1.0.7"
+  dependencies:
+    "@types/mdast": "npm:^3.0.0"
+    markdown-table: "npm:^3.0.0"
+    mdast-util-from-markdown: "npm:^1.0.0"
+    mdast-util-to-markdown: "npm:^1.3.0"
+  checksum: 167f7f7a9dc17ce852f4f9bd155d7be179588e2ccf4ce3c4f23b12c1c9db5de904cdacc6f41b2d635cb84eb09a7ff5a33497585f2664a7f1e6bd6f7ab7e1197a
+  languageName: node
+  linkType: hard
+
 "mdast-util-gfm-table@npm:^2.0.0":
   version: 2.0.0
   resolution: "mdast-util-gfm-table@npm:2.0.0"
@@ -26231,6 +26355,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdast-util-gfm-task-list-item@npm:^1.0.0":
+  version: 1.0.2
+  resolution: "mdast-util-gfm-task-list-item@npm:1.0.2"
+  dependencies:
+    "@types/mdast": "npm:^3.0.0"
+    mdast-util-to-markdown: "npm:^1.3.0"
+  checksum: 958417a7d7690728b44d65127ab9189c7feaa17aea924dd56a888c781ab3abaa4eb0c209f05c4dbf203da3d0c4df8fdace4c9471b644268bfc7fc792a018a171
+  languageName: node
+  linkType: hard
+
 "mdast-util-gfm-task-list-item@npm:^2.0.0":
   version: 2.0.0
   resolution: "mdast-util-gfm-task-list-item@npm:2.0.0"
@@ -26243,6 +26377,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdast-util-gfm@npm:^2.0.0":
+  version: 2.0.2
+  resolution: "mdast-util-gfm@npm:2.0.2"
+  dependencies:
+    mdast-util-from-markdown: "npm:^1.0.0"
+    mdast-util-gfm-autolink-literal: "npm:^1.0.0"
+    mdast-util-gfm-footnote: "npm:^1.0.0"
+    mdast-util-gfm-strikethrough: "npm:^1.0.0"
+    mdast-util-gfm-table: "npm:^1.0.0"
+    mdast-util-gfm-task-list-item: "npm:^1.0.0"
+    mdast-util-to-markdown: "npm:^1.0.0"
+  checksum: 70e6cd32af94181d409f171f984f83fc18b3efe316844c62f31816f5c1612a92517b8ed766340f23e0a6d6cb0f27a8b07d288bab6619cbdbb0c5341006bcdc4d
+  languageName: node
+  linkType: hard
+
 "mdast-util-gfm@npm:^3.0.0":
   version: 3.0.0
   resolution: "mdast-util-gfm@npm:3.0.0"
@@ -26258,6 +26407,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdast-util-phrasing@npm:^3.0.0":
+  version: 3.0.1
+  resolution: "mdast-util-phrasing@npm:3.0.1"
+  dependencies:
+    "@types/mdast": "npm:^3.0.0"
+    unist-util-is: "npm:^5.0.0"
+  checksum: c5b616d9b1eb76a6b351d195d94318494722525a12a89d9c8a3b091af7db3dd1fc55d294f9d29266d8159a8267b0df4a7a133bda8a3909d5331c383e1e1ff328
+  languageName: node
+  linkType: hard
+
 "mdast-util-phrasing@npm:^4.0.0":
   version: 4.0.0
   resolution: "mdast-util-phrasing@npm:4.0.0"
@@ -26268,6 +26427,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdast-util-to-markdown@npm:^1.0.0, mdast-util-to-markdown@npm:^1.3.0":
+  version: 1.5.0
+  resolution: "mdast-util-to-markdown@npm:1.5.0"
+  dependencies:
+    "@types/mdast": "npm:^3.0.0"
+    "@types/unist": "npm:^2.0.0"
+    longest-streak: "npm:^3.0.0"
+    mdast-util-phrasing: "npm:^3.0.0"
+    mdast-util-to-string: "npm:^3.0.0"
+    micromark-util-decode-string: "npm:^1.0.0"
+    unist-util-visit: "npm:^4.0.0"
+    zwitch: "npm:^2.0.0"
+  checksum: 713f674588a01969a2ce524a69985bd57e507377eea2c4ba69800fb305414468b30144ae9b837fbdde8c609877673140e4f56f6cabe9e0e2bc1487291e3c5144
+  languageName: node
+  linkType: hard
+
 "mdast-util-to-markdown@npm:^2.0.0":
   version: 2.1.0
   resolution: "mdast-util-to-markdown@npm:2.1.0"
@@ -26291,6 +26466,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdast-util-to-string@npm:^3.0.0, mdast-util-to-string@npm:^3.1.0":
+  version: 3.2.0
+  resolution: "mdast-util-to-string@npm:3.2.0"
+  dependencies:
+    "@types/mdast": "npm:^3.0.0"
+  checksum: fafe201c12a0d412a875fe8540bf70b4360f3775fb7f0d19403ba7b59e50f74f730e3b405c72ad940bc8a3ec1ba311f76dfca61c4ce585dce1ccda2168ec244f
+  languageName: node
+  linkType: hard
+
 "mdast-util-to-string@npm:^4.0.0":
   version: 4.0.0
   resolution: "mdast-util-to-string@npm:4.0.0"
@@ -26449,6 +26633,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-core-commonmark@npm:^1.0.0, micromark-core-commonmark@npm:^1.0.1":
+  version: 1.1.0
+  resolution: "micromark-core-commonmark@npm:1.1.0"
+  dependencies:
+    decode-named-character-reference: "npm:^1.0.0"
+    micromark-factory-destination: "npm:^1.0.0"
+    micromark-factory-label: "npm:^1.0.0"
+    micromark-factory-space: "npm:^1.0.0"
+    micromark-factory-title: "npm:^1.0.0"
+    micromark-factory-whitespace: "npm:^1.0.0"
+    micromark-util-character: "npm:^1.0.0"
+    micromark-util-chunked: "npm:^1.0.0"
+    micromark-util-classify-character: "npm:^1.0.0"
+    micromark-util-html-tag-name: "npm:^1.0.0"
+    micromark-util-normalize-identifier: "npm:^1.0.0"
+    micromark-util-resolve-all: "npm:^1.0.0"
+    micromark-util-subtokenize: "npm:^1.0.0"
+    micromark-util-symbol: "npm:^1.0.0"
+    micromark-util-types: "npm:^1.0.1"
+    uvu: "npm:^0.5.0"
+  checksum: a73694d223ac8baad8ff00597a3c39d61f5b32bfd56fe4bcf295d75b2a4e8e67fb2edbfc7cc287b362b9d7f6d24fce08b6a7e8b5b155d79bcc1e4d9b2756ffb2
+  languageName: node
+  linkType: hard
+
 "micromark-core-commonmark@npm:^2.0.0":
   version: 2.0.0
   resolution: "micromark-core-commonmark@npm:2.0.0"
@@ -26473,6 +26681,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-extension-gfm-autolink-literal@npm:^1.0.0":
+  version: 1.0.5
+  resolution: "micromark-extension-gfm-autolink-literal@npm:1.0.5"
+  dependencies:
+    micromark-util-character: "npm:^1.0.0"
+    micromark-util-sanitize-uri: "npm:^1.0.0"
+    micromark-util-symbol: "npm:^1.0.0"
+    micromark-util-types: "npm:^1.0.0"
+  checksum: 1e0ccc758baef3cd0478ba84ff86fa1ec2b389042421c7cade9485b775456c1a9c3bd797393002b2c6f6abd9bdf829cb114874557bbcb8e43d16d06a464811c0
+  languageName: node
+  linkType: hard
+
 "micromark-extension-gfm-autolink-literal@npm:^2.0.0":
   version: 2.0.0
   resolution: "micromark-extension-gfm-autolink-literal@npm:2.0.0"
@@ -26485,6 +26705,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-extension-gfm-footnote@npm:^1.0.0":
+  version: 1.1.2
+  resolution: "micromark-extension-gfm-footnote@npm:1.1.2"
+  dependencies:
+    micromark-core-commonmark: "npm:^1.0.0"
+    micromark-factory-space: "npm:^1.0.0"
+    micromark-util-character: "npm:^1.0.0"
+    micromark-util-normalize-identifier: "npm:^1.0.0"
+    micromark-util-sanitize-uri: "npm:^1.0.0"
+    micromark-util-symbol: "npm:^1.0.0"
+    micromark-util-types: "npm:^1.0.0"
+    uvu: "npm:^0.5.0"
+  checksum: 8777073fb76d2fd01f6b2405106af6c349c1e25660c4d37cadcc61c187d71c8444870f73cefaaa67f12884d5e45c78ee3c5583561a0b330bd91c6d997113584a
+  languageName: node
+  linkType: hard
+
 "micromark-extension-gfm-footnote@npm:^2.0.0":
   version: 2.0.0
   resolution: "micromark-extension-gfm-footnote@npm:2.0.0"
@@ -26501,6 +26737,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-extension-gfm-strikethrough@npm:^1.0.0":
+  version: 1.0.7
+  resolution: "micromark-extension-gfm-strikethrough@npm:1.0.7"
+  dependencies:
+    micromark-util-chunked: "npm:^1.0.0"
+    micromark-util-classify-character: "npm:^1.0.0"
+    micromark-util-resolve-all: "npm:^1.0.0"
+    micromark-util-symbol: "npm:^1.0.0"
+    micromark-util-types: "npm:^1.0.0"
+    uvu: "npm:^0.5.0"
+  checksum: 8411ef1aa5dc83f662e8b45b085f70ddff29deb3c4259269e8a1ff656397abb755d8ea841a14be23e8585a31d3c0a5de1bd2c05f3453b66670e499d4a0004f5e
+  languageName: node
+  linkType: hard
+
 "micromark-extension-gfm-strikethrough@npm:^2.0.0":
   version: 2.0.0
   resolution: "micromark-extension-gfm-strikethrough@npm:2.0.0"
@@ -26515,6 +26765,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-extension-gfm-table@npm:^1.0.0":
+  version: 1.0.7
+  resolution: "micromark-extension-gfm-table@npm:1.0.7"
+  dependencies:
+    micromark-factory-space: "npm:^1.0.0"
+    micromark-util-character: "npm:^1.0.0"
+    micromark-util-symbol: "npm:^1.0.0"
+    micromark-util-types: "npm:^1.0.0"
+    uvu: "npm:^0.5.0"
+  checksum: f05d86a099c941a2a309d60bf4839d16a00a93cb880cda4ab8faeb831647763fff6e03197ec15b80e1f195002afcca6afe2b95c3622b049b82d7ff8ef1c1c776
+  languageName: node
+  linkType: hard
+
 "micromark-extension-gfm-table@npm:^2.0.0":
   version: 2.0.0
   resolution: "micromark-extension-gfm-table@npm:2.0.0"
@@ -26528,6 +26791,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-extension-gfm-tagfilter@npm:^1.0.0":
+  version: 1.0.2
+  resolution: "micromark-extension-gfm-tagfilter@npm:1.0.2"
+  dependencies:
+    micromark-util-types: "npm:^1.0.0"
+  checksum: 55c7d9019d6a39efaaed2c2e40b0aaa137d2c4f9c94cac82e93f509a806c3a775e4c815b5d8e986617450b68861a19776e4b886307e83db452b393f15a837b39
+  languageName: node
+  linkType: hard
+
 "micromark-extension-gfm-tagfilter@npm:^2.0.0":
   version: 2.0.0
   resolution: "micromark-extension-gfm-tagfilter@npm:2.0.0"
@@ -26537,6 +26809,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-extension-gfm-task-list-item@npm:^1.0.0":
+  version: 1.0.5
+  resolution: "micromark-extension-gfm-task-list-item@npm:1.0.5"
+  dependencies:
+    micromark-factory-space: "npm:^1.0.0"
+    micromark-util-character: "npm:^1.0.0"
+    micromark-util-symbol: "npm:^1.0.0"
+    micromark-util-types: "npm:^1.0.0"
+    uvu: "npm:^0.5.0"
+  checksum: 46bb1baa10bfb785a2e3e2f975e5509260b9995d5c3aeddf77051957d218ce1af4ea737bcb6a56a930e62d42b05307b20632a400eff25cdb290789ff3170cad5
+  languageName: node
+  linkType: hard
+
 "micromark-extension-gfm-task-list-item@npm:^2.0.0":
   version: 2.0.1
   resolution: "micromark-extension-gfm-task-list-item@npm:2.0.1"
@@ -26550,6 +26835,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-extension-gfm@npm:^2.0.0":
+  version: 2.0.3
+  resolution: "micromark-extension-gfm@npm:2.0.3"
+  dependencies:
+    micromark-extension-gfm-autolink-literal: "npm:^1.0.0"
+    micromark-extension-gfm-footnote: "npm:^1.0.0"
+    micromark-extension-gfm-strikethrough: "npm:^1.0.0"
+    micromark-extension-gfm-table: "npm:^1.0.0"
+    micromark-extension-gfm-tagfilter: "npm:^1.0.0"
+    micromark-extension-gfm-task-list-item: "npm:^1.0.0"
+    micromark-util-combine-extensions: "npm:^1.0.0"
+    micromark-util-types: "npm:^1.0.0"
+  checksum: 3ffd06ced4314abd0f0c72ec227f034f38dd47facbb62439ef3216d42f32433f3901d14675cf806e8d73689802a11849958b330bb5b55dd4fd5cdc64ebaf345c
+  languageName: node
+  linkType: hard
+
 "micromark-extension-gfm@npm:^3.0.0":
   version: 3.0.0
   resolution: "micromark-extension-gfm@npm:3.0.0"
@@ -26566,6 +26867,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-factory-destination@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "micromark-factory-destination@npm:1.1.0"
+  dependencies:
+    micromark-util-character: "npm:^1.0.0"
+    micromark-util-symbol: "npm:^1.0.0"
+    micromark-util-types: "npm:^1.0.0"
+  checksum: 9e2b5fb5fedbf622b687e20d51eb3d56ae90c0e7ecc19b37bd5285ec392c1e56f6e21aa7cfcb3c01eda88df88fe528f3acb91a5f57d7f4cba310bc3cd7f824fa
+  languageName: node
+  linkType: hard
+
 "micromark-factory-destination@npm:^2.0.0":
   version: 2.0.0
   resolution: "micromark-factory-destination@npm:2.0.0"
@@ -26577,6 +26889,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-factory-label@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "micromark-factory-label@npm:1.1.0"
+  dependencies:
+    micromark-util-character: "npm:^1.0.0"
+    micromark-util-symbol: "npm:^1.0.0"
+    micromark-util-types: "npm:^1.0.0"
+    uvu: "npm:^0.5.0"
+  checksum: fcda48f1287d9b148c562c627418a2ab759cdeae9c8e017910a0cba94bb759a96611e1fc6df33182e97d28fbf191475237298983bb89ef07d5b02464b1ad28d5
+  languageName: node
+  linkType: hard
+
 "micromark-factory-label@npm:^2.0.0":
   version: 2.0.0
   resolution: "micromark-factory-label@npm:2.0.0"
@@ -26589,6 +26913,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-factory-space@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "micromark-factory-space@npm:1.1.0"
+  dependencies:
+    micromark-util-character: "npm:^1.0.0"
+    micromark-util-types: "npm:^1.0.0"
+  checksum: b58435076b998a7e244259a4694eb83c78915581206b6e7fc07b34c6abd36a1726ade63df8972fbf6c8fa38eecb9074f4e17be8d53f942e3b3d23d1a0ecaa941
+  languageName: node
+  linkType: hard
+
 "micromark-factory-space@npm:^2.0.0":
   version: 2.0.0
   resolution: "micromark-factory-space@npm:2.0.0"
@@ -26599,6 +26933,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-factory-title@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "micromark-factory-title@npm:1.1.0"
+  dependencies:
+    micromark-factory-space: "npm:^1.0.0"
+    micromark-util-character: "npm:^1.0.0"
+    micromark-util-symbol: "npm:^1.0.0"
+    micromark-util-types: "npm:^1.0.0"
+  checksum: 4432d3dbc828c81f483c5901b0c6591a85d65a9e33f7d96ba7c3ae821617a0b3237ff5faf53a9152d00aaf9afb3a9f185b205590f40ed754f1d9232e0e9157b1
+  languageName: node
+  linkType: hard
+
 "micromark-factory-title@npm:^2.0.0":
   version: 2.0.0
   resolution: "micromark-factory-title@npm:2.0.0"
@@ -26611,6 +26957,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-factory-whitespace@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "micromark-factory-whitespace@npm:1.1.0"
+  dependencies:
+    micromark-factory-space: "npm:^1.0.0"
+    micromark-util-character: "npm:^1.0.0"
+    micromark-util-symbol: "npm:^1.0.0"
+    micromark-util-types: "npm:^1.0.0"
+  checksum: ef0fa682c7d593d85a514ee329809dee27d10bc2a2b65217d8ef81173e33b8e83c549049764b1ad851adfe0a204dec5450d9d20a4ca8598f6c94533a73f73fcd
+  languageName: node
+  linkType: hard
+
 "micromark-factory-whitespace@npm:^2.0.0":
   version: 2.0.0
   resolution: "micromark-factory-whitespace@npm:2.0.0"
@@ -26623,6 +26981,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-util-character@npm:^1.0.0":
+  version: 1.2.0
+  resolution: "micromark-util-character@npm:1.2.0"
+  dependencies:
+    micromark-util-symbol: "npm:^1.0.0"
+    micromark-util-types: "npm:^1.0.0"
+  checksum: 88cf80f9b4c95266f24814ef587fb4180454668dcc3be4ac829e1227188cf349c8981bfca29e3eab1682f324c2c47544c0b0b799a26fbf9df5f156c6a84c970c
+  languageName: node
+  linkType: hard
+
 "micromark-util-character@npm:^2.0.0":
   version: 2.0.1
   resolution: "micromark-util-character@npm:2.0.1"
@@ -26633,6 +27001,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-util-chunked@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "micromark-util-chunked@npm:1.1.0"
+  dependencies:
+    micromark-util-symbol: "npm:^1.0.0"
+  checksum: c435bde9110cb595e3c61b7f54c2dc28ee03e6a57fa0fc1e67e498ad8bac61ee5a7457a2b6a73022ddc585676ede4b912d28dcf57eb3bd6951e54015e14dc20b
+  languageName: node
+  linkType: hard
+
 "micromark-util-chunked@npm:^2.0.0":
   version: 2.0.0
   resolution: "micromark-util-chunked@npm:2.0.0"
@@ -26642,6 +27019,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-util-classify-character@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "micromark-util-classify-character@npm:1.1.0"
+  dependencies:
+    micromark-util-character: "npm:^1.0.0"
+    micromark-util-symbol: "npm:^1.0.0"
+    micromark-util-types: "npm:^1.0.0"
+  checksum: 8499cb0bb1f7fb946f5896285fcca65cd742f66cd3e79ba7744792bd413ec46834f932a286de650349914d02e822946df3b55d03e6a8e1d245d1ddbd5102e5b0
+  languageName: node
+  linkType: hard
+
 "micromark-util-classify-character@npm:^2.0.0":
   version: 2.0.0
   resolution: "micromark-util-classify-character@npm:2.0.0"
@@ -26653,6 +27041,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-util-combine-extensions@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "micromark-util-combine-extensions@npm:1.1.0"
+  dependencies:
+    micromark-util-chunked: "npm:^1.0.0"
+    micromark-util-types: "npm:^1.0.0"
+  checksum: ee78464f5d4b61ccb437850cd2d7da4d690b260bca4ca7a79c4bb70291b84f83988159e373b167181b6716cb197e309bc6e6c96a68cc3ba9d50c13652774aba9
+  languageName: node
+  linkType: hard
+
 "micromark-util-combine-extensions@npm:^2.0.0":
   version: 2.0.0
   resolution: "micromark-util-combine-extensions@npm:2.0.0"
@@ -26663,6 +27061,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-util-decode-numeric-character-reference@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "micromark-util-decode-numeric-character-reference@npm:1.1.0"
+  dependencies:
+    micromark-util-symbol: "npm:^1.0.0"
+  checksum: 4733fe75146e37611243f055fc6847137b66f0cde74d080e33bd26d0408c1d6f44cabc984063eee5968b133cb46855e729d555b9ff8d744652262b7b51feec73
+  languageName: node
+  linkType: hard
+
 "micromark-util-decode-numeric-character-reference@npm:^2.0.0":
   version: 2.0.1
   resolution: "micromark-util-decode-numeric-character-reference@npm:2.0.1"
@@ -26672,6 +27079,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-util-decode-string@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "micromark-util-decode-string@npm:1.1.0"
+  dependencies:
+    decode-named-character-reference: "npm:^1.0.0"
+    micromark-util-character: "npm:^1.0.0"
+    micromark-util-decode-numeric-character-reference: "npm:^1.0.0"
+    micromark-util-symbol: "npm:^1.0.0"
+  checksum: f1625155db452f15aa472918499689ba086b9c49d1322a08b22bfbcabe918c61b230a3002c8bc3ea9b1f52ca7a9bb1c3dd43ccb548c7f5f8b16c24a1ae77a813
+  languageName: node
+  linkType: hard
+
 "micromark-util-decode-string@npm:^2.0.0":
   version: 2.0.0
   resolution: "micromark-util-decode-string@npm:2.0.0"
@@ -26684,6 +27103,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-util-encode@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "micromark-util-encode@npm:1.1.0"
+  checksum: 4ef29d02b12336918cea6782fa87c8c578c67463925221d4e42183a706bde07f4b8b5f9a5e1c7ce8c73bb5a98b261acd3238fecd152e6dd1cdfa2d1ae11b60a0
+  languageName: node
+  linkType: hard
+
 "micromark-util-encode@npm:^2.0.0":
   version: 2.0.0
   resolution: "micromark-util-encode@npm:2.0.0"
@@ -26691,6 +27117,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-util-html-tag-name@npm:^1.0.0":
+  version: 1.2.0
+  resolution: "micromark-util-html-tag-name@npm:1.2.0"
+  checksum: ccf0fa99b5c58676dc5192c74665a3bfd1b536fafaf94723bd7f31f96979d589992df6fcf2862eba290ef18e6a8efb30ec8e1e910d9f3fc74f208871e9f84750
+  languageName: node
+  linkType: hard
+
 "micromark-util-html-tag-name@npm:^2.0.0":
   version: 2.0.0
   resolution: "micromark-util-html-tag-name@npm:2.0.0"
@@ -26698,6 +27131,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-util-normalize-identifier@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "micromark-util-normalize-identifier@npm:1.1.0"
+  dependencies:
+    micromark-util-symbol: "npm:^1.0.0"
+  checksum: 8655bea41ffa4333e03fc22462cb42d631bbef9c3c07b625fd852b7eb442a110f9d2e5902a42e65188d85498279569502bf92f3434a1180fc06f7c37edfbaee2
+  languageName: node
+  linkType: hard
+
 "micromark-util-normalize-identifier@npm:^2.0.0":
   version: 2.0.0
   resolution: "micromark-util-normalize-identifier@npm:2.0.0"
@@ -26707,6 +27149,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-util-resolve-all@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "micromark-util-resolve-all@npm:1.1.0"
+  dependencies:
+    micromark-util-types: "npm:^1.0.0"
+  checksum: 1ce6c0237cd3ca061e76fae6602cf95014e764a91be1b9f10d36cb0f21ca88f9a07de8d49ab8101efd0b140a4fbfda6a1efb72027ab3f4d5b54c9543271dc52c
+  languageName: node
+  linkType: hard
+
 "micromark-util-resolve-all@npm:^2.0.0":
   version: 2.0.0
   resolution: "micromark-util-resolve-all@npm:2.0.0"
@@ -26716,6 +27167,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-util-sanitize-uri@npm:^1.0.0":
+  version: 1.2.0
+  resolution: "micromark-util-sanitize-uri@npm:1.2.0"
+  dependencies:
+    micromark-util-character: "npm:^1.0.0"
+    micromark-util-encode: "npm:^1.0.0"
+    micromark-util-symbol: "npm:^1.0.0"
+  checksum: 0d024100d95ffb88bf75f3360e305b545c1eb745430959b8633f7aa93f37ec401fc7094c90c97298409a9e30d94d53b895bae224e1bb966bea114976cfa0fd48
+  languageName: node
+  linkType: hard
+
 "micromark-util-sanitize-uri@npm:^2.0.0":
   version: 2.0.0
   resolution: "micromark-util-sanitize-uri@npm:2.0.0"
@@ -26727,6 +27189,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-util-subtokenize@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "micromark-util-subtokenize@npm:1.1.0"
+  dependencies:
+    micromark-util-chunked: "npm:^1.0.0"
+    micromark-util-symbol: "npm:^1.0.0"
+    micromark-util-types: "npm:^1.0.0"
+    uvu: "npm:^0.5.0"
+  checksum: 075a1db6ea586d65827d3eead33dbfc520c4e43659c93fcd8fd82f44a7b75cfe61dcde967a3dfcc2ffd999347440ba5aa6698e65a04f3fc627e13e9f12a1a910
+  languageName: node
+  linkType: hard
+
 "micromark-util-subtokenize@npm:^2.0.0":
   version: 2.0.0
   resolution: "micromark-util-subtokenize@npm:2.0.0"
@@ -26739,6 +27213,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-util-symbol@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "micromark-util-symbol@npm:1.1.0"
+  checksum: a26b6b1efd77a715a4d9bbe0a5338eaf3d04ea5e85733e34fee56dfeabf64495c0afc5438fe5220316884cd3a5eae1f17768e0ff4e117827ea4a653897466f86
+  languageName: node
+  linkType: hard
+
 "micromark-util-symbol@npm:^2.0.0":
   version: 2.0.0
   resolution: "micromark-util-symbol@npm:2.0.0"
@@ -26746,6 +27227,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark-util-types@npm:^1.0.0, micromark-util-types@npm:^1.0.1":
+  version: 1.1.0
+  resolution: "micromark-util-types@npm:1.1.0"
+  checksum: 287ac5de4a3802bb6f6c3842197c294997a488db1c0486e03c7a8e674d9eb7720c17dda1bcb814814b8343b338c4826fcbc0555f3e75463712a60dcdb53a028e
+  languageName: node
+  linkType: hard
+
 "micromark-util-types@npm:^2.0.0":
   version: 2.0.0
   resolution: "micromark-util-types@npm:2.0.0"
@@ -26753,6 +27241,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"micromark@npm:^3.0.0":
+  version: 3.2.0
+  resolution: "micromark@npm:3.2.0"
+  dependencies:
+    "@types/debug": "npm:^4.0.0"
+    debug: "npm:^4.0.0"
+    decode-named-character-reference: "npm:^1.0.0"
+    micromark-core-commonmark: "npm:^1.0.1"
+    micromark-factory-space: "npm:^1.0.0"
+    micromark-util-character: "npm:^1.0.0"
+    micromark-util-chunked: "npm:^1.0.0"
+    micromark-util-combine-extensions: "npm:^1.0.0"
+    micromark-util-decode-numeric-character-reference: "npm:^1.0.0"
+    micromark-util-encode: "npm:^1.0.0"
+    micromark-util-normalize-identifier: "npm:^1.0.0"
+    micromark-util-resolve-all: "npm:^1.0.0"
+    micromark-util-sanitize-uri: "npm:^1.0.0"
+    micromark-util-subtokenize: "npm:^1.0.0"
+    micromark-util-symbol: "npm:^1.0.0"
+    micromark-util-types: "npm:^1.0.1"
+    uvu: "npm:^0.5.0"
+  checksum: 560a4a501efc3859d622461aaa9345fb95b99a2f34d3d3f2a775ab04de1dd857cb0f642083a6b28ab01bd817f5f0741a1be9857fd702f45e04a3752927a66719
+  languageName: node
+  linkType: hard
+
 "micromark@npm:^4.0.0":
   version: 4.0.0
   resolution: "micromark@npm:4.0.0"
@@ -27199,7 +27712,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mri@npm:^1.2.0":
+"mri@npm:^1.1.0, mri@npm:^1.2.0":
   version: 1.2.0
   resolution: "mri@npm:1.2.0"
   checksum: 6775a1d2228bb9d191ead4efc220bd6be64f943ad3afd4dcb3b3ac8fc7b87034443f666e38805df38e8d047b29f910c3cc7810da0109af83e42c82c73bd3f6bc
@@ -30808,6 +31321,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"remark-gfm@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "remark-gfm@npm:3.0.1"
+  dependencies:
+    "@types/mdast": "npm:^3.0.0"
+    mdast-util-gfm: "npm:^2.0.0"
+    micromark-extension-gfm: "npm:^2.0.0"
+    unified: "npm:^10.0.0"
+  checksum: 8ec301f5fb1f52c548b5a6d7ca6a3422d55db73cd703f147c979d16dca003f065181f55404d6f3f49d33f1faca3fe56ae731ed7fe0acc00cd945a8e605f155f2
+  languageName: node
+  linkType: hard
+
 "remark-gfm@npm:^4.0.0":
   version: 4.0.0
   resolution: "remark-gfm@npm:4.0.0"
@@ -31305,6 +31830,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sade@npm:^1.7.3":
+  version: 1.8.1
+  resolution: "sade@npm:1.8.1"
+  dependencies:
+    mri: "npm:^1.1.0"
+  checksum: 1c67ba03c94083e0ae307ff5564ecb86c2104c0f558042fdaa40ea0054f91a63a9783f14069870f2f784336adabb70f90f22a84dc457b5a25e859aaadefe0910
+  languageName: node
+  linkType: hard
+
 "safe-buffer@npm:5.1.2, safe-buffer@npm:~5.1.0, safe-buffer@npm:~5.1.1":
   version: 5.1.2
   resolution: "safe-buffer@npm:5.1.2"
@@ -33706,6 +34240,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unified@npm:^10.0.0":
+  version: 10.1.2
+  resolution: "unified@npm:10.1.2"
+  dependencies:
+    "@types/unist": "npm:^2.0.0"
+    bail: "npm:^2.0.0"
+    extend: "npm:^3.0.0"
+    is-buffer: "npm:^2.0.0"
+    is-plain-obj: "npm:^4.0.0"
+    trough: "npm:^2.0.0"
+    vfile: "npm:^5.0.0"
+  checksum: 6cffebcefc3290be26d25a58ba714cda943142782baf320fddf374ca3a319bdaabb006f96df4be17b8b367f5e6f6e113b1027c52ef66154846a7a110550f6688
+  languageName: node
+  linkType: hard
+
 "unified@npm:^11.0.0, unified@npm:^11.0.4":
   version: 11.0.4
   resolution: "unified@npm:11.0.4"
@@ -33773,6 +34322,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unist-util-is@npm:^5.0.0":
+  version: 5.2.1
+  resolution: "unist-util-is@npm:5.2.1"
+  dependencies:
+    "@types/unist": "npm:^2.0.0"
+  checksum: c10f6c07aad4f4830ffa8ea82b42a2c8d5cd36c7555e27889e5fee953040af321e4e6f4e52c4edb606604de75d7230a5f4bc7b71b8ac3e874a26ab595c2057e4
+  languageName: node
+  linkType: hard
+
 "unist-util-is@npm:^6.0.0":
   version: 6.0.0
   resolution: "unist-util-is@npm:6.0.0"
@@ -33782,6 +34340,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unist-util-stringify-position@npm:^3.0.0":
+  version: 3.0.3
+  resolution: "unist-util-stringify-position@npm:3.0.3"
+  dependencies:
+    "@types/unist": "npm:^2.0.0"
+  checksum: 07913e4fd77fe57d95f8b2f771354f97a29082229c1ad14ceedce6bbc77b2d784ca8296563335471cdca97915e548204bd6f098ea5b808b822b4b54087662cfb
+  languageName: node
+  linkType: hard
+
 "unist-util-stringify-position@npm:^4.0.0":
   version: 4.0.0
   resolution: "unist-util-stringify-position@npm:4.0.0"
@@ -33801,6 +34368,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unist-util-visit-parents@npm:^5.0.0, unist-util-visit-parents@npm:^5.1.1":
+  version: 5.1.3
+  resolution: "unist-util-visit-parents@npm:5.1.3"
+  dependencies:
+    "@types/unist": "npm:^2.0.0"
+    unist-util-is: "npm:^5.0.0"
+  checksum: 5381fc57a129d478d983b988d86b72a1266d6f91fc608562b00bfa76596128d6e4d1c2b26ced64d96e55eb5d27d620081b4ee9703979bab63e1210789e781372
+  languageName: node
+  linkType: hard
+
 "unist-util-visit-parents@npm:^6.0.0":
   version: 6.0.1
   resolution: "unist-util-visit-parents@npm:6.0.1"
@@ -33822,6 +34399,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unist-util-visit@npm:^4.0.0":
+  version: 4.1.2
+  resolution: "unist-util-visit@npm:4.1.2"
+  dependencies:
+    "@types/unist": "npm:^2.0.0"
+    unist-util-is: "npm:^5.0.0"
+    unist-util-visit-parents: "npm:^5.1.1"
+  checksum: e3b20c6b1f5ae1b7b40bbf9be49103a342d98fad98bdf958110c20d72e5923bd3f12966b6702459bc61ab832facb5af418a79af87cefa7a8a41b892369678b13
+  languageName: node
+  linkType: hard
+
 "unist-util-visit@npm:^5.0.0":
   version: 5.0.0
   resolution: "unist-util-visit@npm:5.0.0"
@@ -34141,6 +34729,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"uvu@npm:^0.5.0":
+  version: 0.5.6
+  resolution: "uvu@npm:0.5.6"
+  dependencies:
+    dequal: "npm:^2.0.0"
+    diff: "npm:^5.0.0"
+    kleur: "npm:^4.0.3"
+    sade: "npm:^1.7.3"
+  bin:
+    uvu: bin.js
+  checksum: 66ba25afc6732249877f9f4f8b6146f3aaa97538c51cf498f55825d602c33dbb903e02c7e1547cbca6bdfbb609e07eb7ea758b5156002ac2dd5072f00606f8d9
+  languageName: node
+  linkType: hard
+
 "v8-compile-cache-lib@npm:^3.0.1":
   version: 3.0.1
   resolution: "v8-compile-cache-lib@npm:3.0.1"
@@ -34225,6 +34827,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vfile-message@npm:^3.0.0":
+  version: 3.1.4
+  resolution: "vfile-message@npm:3.1.4"
+  dependencies:
+    "@types/unist": "npm:^2.0.0"
+    unist-util-stringify-position: "npm:^3.0.0"
+  checksum: 423ca87f4427a403e4688d7ec663a2e6add694eefac47c945746463377428c7553bc613058841f1da83e18b68af886d3dd11cb96d582b5cc3c98e11efb7e55e9
+  languageName: node
+  linkType: hard
+
 "vfile-message@npm:^4.0.0":
   version: 4.0.2
   resolution: "vfile-message@npm:4.0.2"
@@ -34235,6 +34847,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vfile@npm:^5.0.0":
+  version: 5.3.7
+  resolution: "vfile@npm:5.3.7"
+  dependencies:
+    "@types/unist": "npm:^2.0.0"
+    is-buffer: "npm:^2.0.0"
+    unist-util-stringify-position: "npm:^3.0.0"
+    vfile-message: "npm:^3.0.0"
+  checksum: d8f59b419d4c83b3ed24f500cf02393149b728f8803f88519c18fe0733f62544fa9ab0d8425a8bc7835181d848b9ce29c014168dc45af72f416074bbe475f643
+  languageName: node
+  linkType: hard
+
 "vfile@npm:^6.0.0":
   version: 6.0.1
   resolution: "vfile@npm:6.0.1"