diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index bf6e0a39..02005ae2 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -23,3 +23,4 @@ jobs:
       run: |
         npm install
         npm run build
+        npm run test
diff --git a/.gitignore b/.gitignore
index df11c919..a6ce7ff2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -48,6 +48,3 @@ public
 # packages
 /packages/**/dist
 
-# storybook
-.storybook
-storybook-static
diff --git a/.storybook/main.ts b/.storybook/main.ts
new file mode 100644
index 00000000..ba67733d
--- /dev/null
+++ b/.storybook/main.ts
@@ -0,0 +1,36 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+import { stylexPlugin } from "vite-plugin-stylex-dev";
+
+const config: StorybookConfig = {
+  stories: [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  staticDirs: ['../examples/nextjs/public'],
+  docs: {
+    autodocs: "tag",
+  },
+  async viteFinal(config) {
+    const { plugins = [] } = config;
+    plugins.push(
+      stylexPlugin({
+        unstable_moduleResolution: {
+          type: 'commonJS',
+          rootDir: process.cwd()
+        }
+      })
+    )
+    return config
+  },
+};
+export default config;
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
new file mode 100644
index 00000000..ff58bbda
--- /dev/null
+++ b/.storybook/preview.ts
@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;
diff --git a/examples/nextjs/package-lock.json b/examples/nextjs/package-lock.json
index c174129d..b4a153dc 100644
--- a/examples/nextjs/package-lock.json
+++ b/examples/nextjs/package-lock.json
@@ -13,7 +13,7 @@
         "prismjs": "^1.29.0",
         "react": "^18",
         "react-dom": "^18",
-        "rotion": "^0.0.8"
+        "rotion": "^0.0.10"
       },
       "devDependencies": {
         "@types/node": "^20",
@@ -1432,6 +1432,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/cdate": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/cdate/-/cdate-0.0.7.tgz",
+      "integrity": "sha512-11EnUjVX6hwL0FcDNE2F0wh+0KnQieTfPUdPHNdQHbrvFdEbqfRULkA8nMcfT2tXCGw/ABRdYLqQ0SmbeWawTA=="
+    },
+    "node_modules/cdate-schedule": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/cdate-schedule/-/cdate-schedule-0.0.1.tgz",
+      "integrity": "sha512-rP6nydghUh/t+J1TQtT31RwZiNeXzkEAtpVzNjHQsf6n655dHeQD0LTxSZeR1QvKWajGvJ/W+TE5sdpch6+zqg=="
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -5999,11 +6009,13 @@
       "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="
     },
     "node_modules/rotion": {
-      "version": "0.0.8",
-      "resolved": "https://registry.npmjs.org/rotion/-/rotion-0.0.8.tgz",
-      "integrity": "sha512-AH2RxjkrV2hA/SRAlRM4w4g1faXlgWxXGPuSDwNTycchNy1fXiZDhF3xwsto3sD4yxn/J9m+fIJqnOsTE0VT+A==",
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/rotion/-/rotion-0.0.10.tgz",
+      "integrity": "sha512-SIIevufk/XHjT2pL4qyMk9pVy6v3xM19qDv2RJEJERNV+sslz9NHx6rnZZlsBD++i3dkW7VQZHbz8+1RZH9eRQ==",
       "dependencies": {
         "@notionhq/client": "^2.2.14",
+        "cdate": "^0.0.7",
+        "cdate-schedule": "^0.0.1",
         "file-type": "^18.7.0",
         "imagemin": "^8.0.1",
         "imagemin-webp": "^8.0.0",
diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
index a492dfc2..c0d65a3f 100644
--- a/examples/nextjs/package.json
+++ b/examples/nextjs/package.json
@@ -14,7 +14,7 @@
     "prismjs": "^1.29.0",
     "react": "^18",
     "react-dom": "^18",
-    "rotion": "^0.0.8"
+    "rotion": "^0.0.10"
   },
   "devDependencies": {
     "@types/node": "^20",
diff --git a/examples/nextjs/pages/_app.tsx b/examples/nextjs/pages/_app.tsx
index 6a6bd5ab..917ee816 100644
--- a/examples/nextjs/pages/_app.tsx
+++ b/examples/nextjs/pages/_app.tsx
@@ -1,8 +1,7 @@
 import '@/styles/globals.css'
 import type { AppProps } from 'next/app'
 import Head from 'next/head'
-import 'rotion/styles/notionate.css'
-import 'rotion/styles/notionate-dark.css'
+import 'rotion/style.css'
 import styles from '@/styles/App.module.css'
 
 export default function App({ Component, pageProps }: AppProps) {
diff --git a/examples/nextjs/pages/block.tsx b/examples/nextjs/pages/block.tsx
index e232b438..0d8133eb 100644
--- a/examples/nextjs/pages/block.tsx
+++ b/examples/nextjs/pages/block.tsx
@@ -1,12 +1,13 @@
 import type { GetStaticProps, NextPage } from 'next'
 import Image from 'next/image'
 import Link from 'next/link'
-import { useState, useEffect } from 'react'
 import Header from '@/components/Header'
 import Head from 'next/head'
 import styles from '@/styles/Page.module.css'
-import mermaid from 'mermaid'
 import prism from 'prismjs'
+import mermaid from 'mermaid'
+
+import 'prismjs/themes/prism.min.css'
 import 'prismjs/components/prism-bash'
 import 'prismjs/components/prism-go'
 import 'prismjs/components/prism-typescript'
@@ -57,11 +58,6 @@ export const getStaticProps: GetStaticProps<Props> = async (context) => {
 }
 
 const BlocksPage: NextPage<Props> = ({ title, icon, blocks, breadcrumbs }) => {
-  const [exModules, setExModules] = useState({ mermaid, prism })
-  useEffect(() => {
-    mermaid.initialize({ theme: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'neutral' })
-    setExModules({ mermaid, prism })
-  }, [])
   const hrefs = ['/', '/[name]']
 
   return (
@@ -86,7 +82,7 @@ const BlocksPage: NextPage<Props> = ({ title, icon, blocks, breadcrumbs }) => {
           </header>
 
           <div className={`${styles.page} ${styles.wrapperPage}`}>
-            <Page blocks={blocks} modules={exModules} link={Link} breadcrumb_hrefs={hrefs} />
+            <Page blocks={blocks} link={Link} breadcrumb_hrefs={hrefs} />
           </div>
         </div>
         <span></span>
diff --git a/package-lock.json b/package-lock.json
index 2d1e39a5..8add1871 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,15 +1,17 @@
 {
   "name": "rotion",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "rotion",
-      "version": "0.0.8",
+      "version": "0.0.10",
       "license": "MIT",
       "dependencies": {
         "@notionhq/client": "^2.2.14",
+        "cdate": "^0.0.7",
+        "cdate-schedule": "^0.0.1",
         "file-type": "^18.7.0",
         "imagemin": "^8.0.1",
         "imagemin-webp": "^8.0.0",
@@ -24,14 +26,16 @@
         "@rollup/plugin-node-resolve": "^15.2.3",
         "@rollup/plugin-terser": "^0.4.4",
         "@rollup/plugin-typescript": "^11.1.5",
-        "@storybook/addon-essentials": "^7.6.7",
-        "@storybook/addon-interactions": "^7.6.7",
-        "@storybook/addon-links": "^7.6.7",
-        "@storybook/addon-onboarding": "^1.0.10",
-        "@storybook/blocks": "^7.6.7",
-        "@storybook/react": "^7.6.7",
-        "@storybook/react-vite": "^7.6.7",
-        "@storybook/test": "^7.6.7",
+        "@storybook/addon-essentials": "^7.6.12",
+        "@storybook/addon-interactions": "^7.6.12",
+        "@storybook/addon-links": "^7.6.12",
+        "@storybook/addon-onboarding": "^1.0.11",
+        "@storybook/blocks": "^7.6.12",
+        "@storybook/react": "^7.6.12",
+        "@storybook/react-vite": "^7.6.12",
+        "@storybook/test": "^7.6.12",
+        "@stylexjs/rollup-plugin": "^0.4.1",
+        "@stylexjs/stylex": "^0.4.1",
         "@tsconfig/node-lts-strictest-esm": "^18.12.1",
         "@types/imagemin": "^8.0.5",
         "@types/imagemin-webp": "^7.0.3",
@@ -51,7 +55,6 @@
         "eslint-plugin-promise": "^6.0.0",
         "eslint-plugin-react": "^7.33.2",
         "eslint-plugin-storybook": "^0.6.15",
-        "exporter": "file:../exporter",
         "http-cache-semantics": ">=4.1.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -60,23 +63,20 @@
         "rollup-plugin-dts": "^6.1.0",
         "rollup-plugin-import-css": "^3.3.5",
         "rollup-plugin-peer-deps-external": "^2.2.4",
-        "storybook": "^7.6.7",
-        "storybook-dark-mode": "^3.0.3",
+        "storybook": "^7.6.12",
         "testdouble": "^3.20.1",
         "ts-node": "^10.9.2",
         "tslib": "^2.6.2",
         "tsm": "^2.3.0",
         "typescript": "^5.3.3",
-        "uvu": "^0.5.6"
+        "uvu": "^0.5.6",
+        "vite-plugin-stylex-dev": "^0.2.5"
       },
       "peerDependencies": {
         "react": "^17.0.2 || ^18.0.0-0",
         "react-dom": "^17.0.2 || ^18.0.0-0"
       }
     },
-    "../exporter": {
-      "dev": true
-    },
     "node_modules/@aashutoshrathi/word-wrap": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
@@ -87,9 +87,9 @@
       }
     },
     "node_modules/@adobe/css-tools": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.2.tgz",
-      "integrity": "sha512-DA5a1C0gD/pLOvhv33YMrbf2FK3oUzwNl9oOJqE4XVjuEtt6XIakRcsd7eLiOSPkp1kTRQGICTA8cKra/vFbjw==",
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.3.tgz",
+      "integrity": "sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ==",
       "dev": true
     },
     "node_modules/@ampproject/remapping": {
@@ -171,6 +171,15 @@
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
       "dev": true
     },
+    "node_modules/@babel/code-frame/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/@babel/code-frame/node_modules/has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -202,9 +211,9 @@
       }
     },
     "node_modules/@babel/core": {
-      "version": "7.23.7",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.7.tgz",
-      "integrity": "sha512-+UpDgowcmqe36d4NwqvKsyPMlOLNGMsfMmQ5WGCu+siCe3t3dfe9njrzGfdN4qq+bcNUt0+Vw6haRxBOycs4dw==",
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.9.tgz",
+      "integrity": "sha512-5q0175NOjddqpvvzU+kDiSOAk4PfdO6FvwCWoQ6RO7rTzEe8vlo+4HVfcnAREhD4npMs0e9uZypjTwzZPCf/cw==",
       "dev": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
@@ -212,11 +221,11 @@
         "@babel/generator": "^7.23.6",
         "@babel/helper-compilation-targets": "^7.23.6",
         "@babel/helper-module-transforms": "^7.23.3",
-        "@babel/helpers": "^7.23.7",
-        "@babel/parser": "^7.23.6",
-        "@babel/template": "^7.22.15",
-        "@babel/traverse": "^7.23.7",
-        "@babel/types": "^7.23.6",
+        "@babel/helpers": "^7.23.9",
+        "@babel/parser": "^7.23.9",
+        "@babel/template": "^7.23.9",
+        "@babel/traverse": "^7.23.9",
+        "@babel/types": "^7.23.9",
         "convert-source-map": "^2.0.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
@@ -246,16 +255,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/generator/node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.21",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.21.tgz",
-      "integrity": "sha512-SRfKmRe1KvYnxjEMtxEr+J4HIeMX5YBg/qhRHpxEIGjhX1rshcHlnFUE9K0GazhVKWM7B+nARSkV8LuvJdJ5/g==",
-      "dev": true,
-      "dependencies": {
-        "@jridgewell/resolve-uri": "^3.1.0",
-        "@jridgewell/sourcemap-codec": "^1.4.14"
-      }
-    },
     "node_modules/@babel/helper-annotate-as-pure": {
       "version": "7.22.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
@@ -297,9 +296,9 @@
       }
     },
     "node_modules/@babel/helper-create-class-features-plugin": {
-      "version": "7.23.7",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.23.7.tgz",
-      "integrity": "sha512-xCoqR/8+BoNnXOY7RVSgv6X+o7pmT5q1d+gGcRlXYkI+9B31glE4jeejhKVpA04O1AtzOt7OSQ6VYKP5FcRl9g==",
+      "version": "7.23.10",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.23.10.tgz",
+      "integrity": "sha512-2XpP2XhkXzgxecPNEEK8Vz8Asj9aRxt08oKOqtiZoqV2UGZ5T+EkyP9sXQ9nwMxBIG34a7jmasVqoMop7VdPUw==",
       "dev": true,
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.22.5",
@@ -562,14 +561,14 @@
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.23.8",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.8.tgz",
-      "integrity": "sha512-KDqYz4PiOWvDFrdHLPhKtCThtIcKVy6avWD2oG4GEvyQ+XDZwHD4YQd+H2vNMnq2rkdxsDkU82T+Vk8U/WXHRQ==",
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.9.tgz",
+      "integrity": "sha512-87ICKgU5t5SzOT7sBMfCOZQ2rHjRU+Pcb9BoILMYz600W6DkVRLFBPwQ18gwUVvggqXivaUakpnxWQGbpywbBQ==",
       "dev": true,
       "dependencies": {
-        "@babel/template": "^7.22.15",
-        "@babel/traverse": "^7.23.7",
-        "@babel/types": "^7.23.6"
+        "@babel/template": "^7.23.9",
+        "@babel/traverse": "^7.23.9",
+        "@babel/types": "^7.23.9"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -630,6 +629,15 @@
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
       "dev": true
     },
+    "node_modules/@babel/highlight/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/@babel/highlight/node_modules/has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -652,9 +660,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.23.6",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.6.tgz",
-      "integrity": "sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==",
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.9.tgz",
+      "integrity": "sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==",
       "dev": true,
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -1019,9 +1027,9 @@
       }
     },
     "node_modules/@babel/plugin-transform-async-generator-functions": {
-      "version": "7.23.7",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.23.7.tgz",
-      "integrity": "sha512-PdxEpL71bJp1byMG0va5gwQcXHxuEYC/BgI/e88mGTtohbZN28O5Yit0Plkkm/dBzCF/BxmbNcses1RH1T+urA==",
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.23.9.tgz",
+      "integrity": "sha512-8Q3veQEDGe14dTYuwagbRtwxQDnytyg1JFu4/HwEMETeofocrB0U0ejBJIXoeG/t2oXZ8kzCyI0ZZfbT80VFNQ==",
       "dev": true,
       "dependencies": {
         "@babel/helper-environment-visitor": "^7.22.20",
@@ -1393,9 +1401,9 @@
       }
     },
     "node_modules/@babel/plugin-transform-modules-systemjs": {
-      "version": "7.23.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.23.3.tgz",
-      "integrity": "sha512-ZxyKGTkF9xT9YJuKQRo19ewf3pXpopuYQd8cDXqNzc3mUNbOME0RKMoZxviQk74hwzfQsEe66dE92MaZbdHKNQ==",
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.23.9.tgz",
+      "integrity": "sha512-KDlPRM6sLo4o1FkiSlXoAa8edLXFsKKIda779fbLrvmeuc3itnjCtaO6RrtoaANsIJANj+Vk1zqbZIMhkCAHVw==",
       "dev": true,
       "dependencies": {
         "@babel/helper-hoist-variables": "^7.22.5",
@@ -1840,9 +1848,9 @@
       }
     },
     "node_modules/@babel/preset-env": {
-      "version": "7.23.8",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.23.8.tgz",
-      "integrity": "sha512-lFlpmkApLkEP6woIKprO6DO60RImpatTQKtz4sUcDjVcK8M8mQ4sZsuxaTMNOZf0sqAq/ReYW1ZBHnOQwKpLWA==",
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.23.9.tgz",
+      "integrity": "sha512-3kBGTNBBk9DQiPoXYS0g0BYlwTQYUTifqgKTjxUwEUkduRT2QOa0FPGBJ+NROQhGyYO5BuTJwGvBnqKDykac6A==",
       "dev": true,
       "dependencies": {
         "@babel/compat-data": "^7.23.5",
@@ -1872,7 +1880,7 @@
         "@babel/plugin-syntax-top-level-await": "^7.14.5",
         "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
         "@babel/plugin-transform-arrow-functions": "^7.23.3",
-        "@babel/plugin-transform-async-generator-functions": "^7.23.7",
+        "@babel/plugin-transform-async-generator-functions": "^7.23.9",
         "@babel/plugin-transform-async-to-generator": "^7.23.3",
         "@babel/plugin-transform-block-scoped-functions": "^7.23.3",
         "@babel/plugin-transform-block-scoping": "^7.23.4",
@@ -1894,7 +1902,7 @@
         "@babel/plugin-transform-member-expression-literals": "^7.23.3",
         "@babel/plugin-transform-modules-amd": "^7.23.3",
         "@babel/plugin-transform-modules-commonjs": "^7.23.3",
-        "@babel/plugin-transform-modules-systemjs": "^7.23.3",
+        "@babel/plugin-transform-modules-systemjs": "^7.23.9",
         "@babel/plugin-transform-modules-umd": "^7.23.3",
         "@babel/plugin-transform-named-capturing-groups-regex": "^7.22.5",
         "@babel/plugin-transform-new-target": "^7.23.3",
@@ -1920,9 +1928,9 @@
         "@babel/plugin-transform-unicode-regex": "^7.23.3",
         "@babel/plugin-transform-unicode-sets-regex": "^7.23.3",
         "@babel/preset-modules": "0.1.6-no-external-plugins",
-        "babel-plugin-polyfill-corejs2": "^0.4.7",
-        "babel-plugin-polyfill-corejs3": "^0.8.7",
-        "babel-plugin-polyfill-regenerator": "^0.5.4",
+        "babel-plugin-polyfill-corejs2": "^0.4.8",
+        "babel-plugin-polyfill-corejs3": "^0.9.0",
+        "babel-plugin-polyfill-regenerator": "^0.5.5",
         "core-js-compat": "^3.31.0",
         "semver": "^6.3.1"
       },
@@ -2118,9 +2126,9 @@
       "dev": true
     },
     "node_modules/@babel/runtime": {
-      "version": "7.23.8",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.8.tgz",
-      "integrity": "sha512-Y7KbAP984rn1VGMbGqKmBLio9V7y5Je9GvU4rQPCPinCyNfUcToxIXl06d59URp/F3LwinvODxab5N/G6qggkw==",
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.9.tgz",
+      "integrity": "sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==",
       "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
@@ -2130,23 +2138,23 @@
       }
     },
     "node_modules/@babel/template": {
-      "version": "7.22.15",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz",
-      "integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==",
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.23.9.tgz",
+      "integrity": "sha512-+xrD2BWLpvHKNmX2QbpdpsBaWnRxahMwJjO+KZk2JOElj5nSmKezyS1B4u+QbHMTX69t4ukm6hh9lsYQ7GHCKA==",
       "dev": true,
       "dependencies": {
-        "@babel/code-frame": "^7.22.13",
-        "@babel/parser": "^7.22.15",
-        "@babel/types": "^7.22.15"
+        "@babel/code-frame": "^7.23.5",
+        "@babel/parser": "^7.23.9",
+        "@babel/types": "^7.23.9"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.23.7",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.7.tgz",
-      "integrity": "sha512-tY3mM8rH9jM0YHFGyfC0/xf+SB5eKUu7HPj7/k3fpi9dAlsMc5YbQvDi0Sh2QTPXqMhyaAtzAr807TIyfQrmyg==",
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.9.tgz",
+      "integrity": "sha512-I/4UJ9vs90OkBtY6iiiTORVMyIhJ4kAVmsKo9KFc8UOxMeUfi2hvtIBsET5u9GizXE6/GFSuKCTNfgCswuEjRg==",
       "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.23.5",
@@ -2155,8 +2163,8 @@
         "@babel/helper-function-name": "^7.23.0",
         "@babel/helper-hoist-variables": "^7.22.5",
         "@babel/helper-split-export-declaration": "^7.22.6",
-        "@babel/parser": "^7.23.6",
-        "@babel/types": "^7.23.6",
+        "@babel/parser": "^7.23.9",
+        "@babel/types": "^7.23.9",
         "debug": "^4.3.1",
         "globals": "^11.1.0"
       },
@@ -2165,9 +2173,9 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.23.6",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.6.tgz",
-      "integrity": "sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==",
+      "version": "7.23.9",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.9.tgz",
+      "integrity": "sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==",
       "dev": true,
       "dependencies": {
         "@babel/helper-string-parser": "^7.23.4",
@@ -2211,6 +2219,16 @@
         "node": ">=12"
       }
     },
+    "node_modules/@cspotcode/source-map-support/node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
+      "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.0.3",
+        "@jridgewell/sourcemap-codec": "^1.4.10"
+      }
+    },
     "node_modules/@discoveryjs/json-ext": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
@@ -2230,9 +2248,9 @@
       }
     },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.15.18",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.15.18.tgz",
-      "integrity": "sha512-5GT+kcs2WVGjVs7+boataCkO5Fg0y4kCjzkB5bAip7H4jfnOS3dA6KPiww9W1OEKTKeAcUVhdZGvgI65OXmUnw==",
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
+      "integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==",
       "cpu": [
         "arm"
       ],
@@ -2390,9 +2408,9 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.15.18",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.15.18.tgz",
-      "integrity": "sha512-L4jVKS82XVhw2nvzLg/19ClLWg0y27ulRwuP7lcyL6AbUWB5aPglXY3M21mauDQMDfRLs8cQmeT03r/+X3cZYQ==",
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz",
+      "integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==",
       "cpu": [
         "loong64"
       ],
@@ -2711,31 +2729,31 @@
       "dev": true
     },
     "node_modules/@floating-ui/core": {
-      "version": "1.5.3",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.3.tgz",
-      "integrity": "sha512-O0WKDOo0yhJuugCx6trZQj5jVJ9yR0ystG2JaNAemYUWce+pmM6WUEFIibnWyEJKdrDxhm75NoSRME35FNaM/Q==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz",
+      "integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==",
       "dev": true,
       "dependencies": {
-        "@floating-ui/utils": "^0.2.0"
+        "@floating-ui/utils": "^0.2.1"
       }
     },
     "node_modules/@floating-ui/dom": {
-      "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.4.tgz",
-      "integrity": "sha512-jByEsHIY+eEdCjnTVu+E3ephzTOzkQ8hgUfGwos+bg7NlH33Zc5uO+QHz1mrQUOgIKKDD1RtS201P9NvAfq3XQ==",
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.1.tgz",
+      "integrity": "sha512-iA8qE43/H5iGozC3W0YSnVSW42Vh522yyM1gj+BqRwVsTNOyr231PsXDaV04yT39PsO0QL2QpbI/M0ZaLUQgRQ==",
       "dev": true,
       "dependencies": {
-        "@floating-ui/core": "^1.5.3",
-        "@floating-ui/utils": "^0.2.0"
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.1"
       }
     },
     "node_modules/@floating-ui/react-dom": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.6.tgz",
-      "integrity": "sha512-IB8aCRFxr8nFkdYZgH+Otd9EVQPJoynxeFRGTB8voPoZMRWo8XjYuCRgpI1btvuKY69XMiLnW+ym7zoBHM90Rw==",
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.8.tgz",
+      "integrity": "sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==",
       "dev": true,
       "dependencies": {
-        "@floating-ui/dom": "^1.5.4"
+        "@floating-ui/dom": "^1.6.1"
       },
       "peerDependencies": {
         "react": ">=16.8.0",
@@ -2985,16 +3003,6 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/@jest/transform/node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.21",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.21.tgz",
-      "integrity": "sha512-SRfKmRe1KvYnxjEMtxEr+J4HIeMX5YBg/qhRHpxEIGjhX1rshcHlnFUE9K0GazhVKWM7B+nARSkV8LuvJdJ5/g==",
-      "dev": true,
-      "dependencies": {
-        "@jridgewell/resolve-uri": "^3.1.0",
-        "@jridgewell/sourcemap-codec": "^1.4.14"
-      }
-    },
     "node_modules/@jest/types": {
       "version": "29.6.3",
       "resolved": "https://registry.npmjs.org/@jest/types/-/types-29.6.3.tgz",
@@ -3033,6 +3041,55 @@
         }
       }
     },
+    "node_modules/@joshwooding/vite-plugin-react-docgen-typescript/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/@joshwooding/vite-plugin-react-docgen-typescript/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@joshwooding/vite-plugin-react-docgen-typescript/node_modules/glob-promise": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/glob-promise/-/glob-promise-4.2.2.tgz",
+      "integrity": "sha512-xcUzJ8NWN5bktoTIX7eOclO1Npxd/dyVqUJxlLIDasT4C7KZyqlPIwkdJ0Ypiy3p2ZKahTjK4M9uC3sNSfNMzw==",
+      "dev": true,
+      "dependencies": {
+        "@types/glob": "^7.1.3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/ahmadnassri"
+      },
+      "peerDependencies": {
+        "glob": "^7.1.6"
+      }
+    },
     "node_modules/@joshwooding/vite-plugin-react-docgen-typescript/node_modules/magic-string": {
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz",
@@ -3045,6 +3102,18 @@
         "node": ">=12"
       }
     },
+    "node_modules/@joshwooding/vite-plugin-react-docgen-typescript/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
@@ -3094,13 +3163,13 @@
       "dev": true
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.9",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
-      "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
+      "version": "0.3.22",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.22.tgz",
+      "integrity": "sha512-Wf963MzWtA2sjrNt+g18IAln9lKnlRp+K2eH4jjIoF1wYeq3aMREpG09xhlhdzS0EjwU7qmUJYangWa+151vZw==",
       "dev": true,
       "dependencies": {
-        "@jridgewell/resolve-uri": "^3.0.3",
-        "@jridgewell/sourcemap-codec": "^1.4.10"
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
     "node_modules/@juggle/resize-observer": {
@@ -3879,37 +3948,6 @@
         }
       }
     },
-    "node_modules/@rollup/plugin-commonjs/node_modules/glob": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
-      "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
-      "dev": true,
-      "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^5.0.1",
-        "once": "^1.3.0"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/@rollup/plugin-commonjs/node_modules/minimatch": {
-      "version": "5.1.6",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
-      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/@rollup/plugin-json": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-6.1.0.tgz",
@@ -4026,9 +4064,9 @@
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.9.5.tgz",
-      "integrity": "sha512-idWaG8xeSRCfRq9KpRysDHJ/rEHBEXcHuJ82XY0yYFIWnLMjZv9vF/7DOq8djQ2n3Lk6+3qfSH8AqlmHlmi1MA==",
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.9.6.tgz",
+      "integrity": "sha512-MVNXSSYN6QXOulbHpLMKYi60ppyO13W9my1qogeiAqtjb2yR4LSmfU2+POvDkLzhjYLXz9Rf9+9a3zFHW1Lecg==",
       "cpu": [
         "arm"
       ],
@@ -4039,9 +4077,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.9.5.tgz",
-      "integrity": "sha512-f14d7uhAMtsCGjAYwZGv6TwuS3IFaM4ZnGMUn3aCBgkcHAYErhV1Ad97WzBvS2o0aaDv4mVz+syiN0ElMyfBPg==",
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.9.6.tgz",
+      "integrity": "sha512-T14aNLpqJ5wzKNf5jEDpv5zgyIqcpn1MlwCrUXLrwoADr2RkWA0vOWP4XxbO9aiO3dvMCQICZdKeDrFl7UMClw==",
       "cpu": [
         "arm64"
       ],
@@ -4052,9 +4090,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.9.5.tgz",
-      "integrity": "sha512-ndoXeLx455FffL68OIUrVr89Xu1WLzAG4n65R8roDlCoYiQcGGg6MALvs2Ap9zs7AHg8mpHtMpwC8jBBjZrT/w==",
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.9.6.tgz",
+      "integrity": "sha512-CqNNAyhRkTbo8VVZ5R85X73H3R5NX9ONnKbXuHisGWC0qRbTTxnF1U4V9NafzJbgGM0sHZpdO83pLPzq8uOZFw==",
       "cpu": [
         "arm64"
       ],
@@ -4065,9 +4103,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.9.5.tgz",
-      "integrity": "sha512-UmElV1OY2m/1KEEqTlIjieKfVwRg0Zwg4PLgNf0s3glAHXBN99KLpw5A5lrSYCa1Kp63czTpVll2MAqbZYIHoA==",
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.9.6.tgz",
+      "integrity": "sha512-zRDtdJuRvA1dc9Mp6BWYqAsU5oeLixdfUvkTHuiYOHwqYuQ4YgSmi6+/lPvSsqc/I0Omw3DdICx4Tfacdzmhog==",
       "cpu": [
         "x64"
       ],
@@ -4078,9 +4116,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.9.5.tgz",
-      "integrity": "sha512-Q0LcU61v92tQB6ae+udZvOyZ0wfpGojtAKrrpAaIqmJ7+psq4cMIhT/9lfV6UQIpeItnq/2QDROhNLo00lOD1g==",
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.9.6.tgz",
+      "integrity": "sha512-oNk8YXDDnNyG4qlNb6is1ojTOGL/tRhbbKeE/YuccItzerEZT68Z9gHrY3ROh7axDc974+zYAPxK5SH0j/G+QQ==",
       "cpu": [
         "arm"
       ],
@@ -4091,9 +4129,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.9.5.tgz",
-      "integrity": "sha512-dkRscpM+RrR2Ee3eOQmRWFjmV/payHEOrjyq1VZegRUa5OrZJ2MAxBNs05bZuY0YCtpqETDy1Ix4i/hRqX98cA==",
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.9.6.tgz",
+      "integrity": "sha512-Z3O60yxPtuCYobrtzjo0wlmvDdx2qZfeAWTyfOjEDqd08kthDKexLpV97KfAeUXPosENKd8uyJMRDfFMxcYkDQ==",
       "cpu": [
         "arm64"
       ],
@@ -4104,9 +4142,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.9.5.tgz",
-      "integrity": "sha512-QaKFVOzzST2xzY4MAmiDmURagWLFh+zZtttuEnuNn19AiZ0T3fhPyjPPGwLNdiDT82ZE91hnfJsUiDwF9DClIQ==",
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.9.6.tgz",
+      "integrity": "sha512-gpiG0qQJNdYEVad+1iAsGAbgAnZ8j07FapmnIAQgODKcOTjLEWM9sRb+MbQyVsYCnA0Im6M6QIq6ax7liws6eQ==",
       "cpu": [
         "arm64"
       ],
@@ -4117,9 +4155,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.9.5.tgz",
-      "integrity": "sha512-HeGqmRJuyVg6/X6MpE2ur7GbymBPS8Np0S/vQFHDmocfORT+Zt76qu+69NUoxXzGqVP1pzaY6QIi0FJWLC3OPA==",
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.9.6.tgz",
+      "integrity": "sha512-+uCOcvVmFUYvVDr27aiyun9WgZk0tXe7ThuzoUTAukZJOwS5MrGbmSlNOhx1j80GdpqbOty05XqSl5w4dQvcOA==",
       "cpu": [
         "riscv64"
       ],
@@ -4130,9 +4168,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.9.5.tgz",
-      "integrity": "sha512-Dq1bqBdLaZ1Gb/l2e5/+o3B18+8TI9ANlA1SkejZqDgdU/jK/ThYaMPMJpVMMXy2uRHvGKbkz9vheVGdq3cJfA==",
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.9.6.tgz",
+      "integrity": "sha512-HUNqM32dGzfBKuaDUBqFB7tP6VMN74eLZ33Q9Y1TBqRDn+qDonkAUyKWwF9BR9unV7QUzffLnz9GrnKvMqC/fw==",
       "cpu": [
         "x64"
       ],
@@ -4143,9 +4181,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.9.5.tgz",
-      "integrity": "sha512-ezyFUOwldYpj7AbkwyW9AJ203peub81CaAIVvckdkyH8EvhEIoKzaMFJj0G4qYJ5sw3BpqhFrsCc30t54HV8vg==",
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.9.6.tgz",
+      "integrity": "sha512-ch7M+9Tr5R4FK40FHQk8VnML0Szi2KRujUgHXd/HjuH9ifH72GUmw6lStZBo3c3GB82vHa0ZoUfjfcM7JiiMrQ==",
       "cpu": [
         "x64"
       ],
@@ -4156,9 +4194,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.9.5.tgz",
-      "integrity": "sha512-aHSsMnUw+0UETB0Hlv7B/ZHOGY5bQdwMKJSzGfDfvyhnpmVxLMGnQPGNE9wgqkLUs3+gbG1Qx02S2LLfJ5GaRQ==",
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.9.6.tgz",
+      "integrity": "sha512-VD6qnR99dhmTQ1mJhIzXsRcTBvTjbfbGGwKAHcu+52cVl15AC/kplkhxzW/uT0Xl62Y/meBKDZvoJSJN+vTeGA==",
       "cpu": [
         "arm64"
       ],
@@ -4169,9 +4207,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.9.5.tgz",
-      "integrity": "sha512-AiqiLkb9KSf7Lj/o1U3SEP9Zn+5NuVKgFdRIZkvd4N0+bYrTOovVd0+LmYCPQGbocT4kvFyK+LXCDiXPBF3fyA==",
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.9.6.tgz",
+      "integrity": "sha512-J9AFDq/xiRI58eR2NIDfyVmTYGyIZmRcvcAoJ48oDld/NTR8wyiPUu2X/v1navJ+N/FGg68LEbX3Ejd6l8B7MQ==",
       "cpu": [
         "ia32"
       ],
@@ -4182,9 +4220,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.9.5.tgz",
-      "integrity": "sha512-1q+mykKE3Vot1kaFJIDoUFv5TuW+QQVaf2FmTT9krg86pQrGStOSJJ0Zil7CFagyxDuouTepzt5Y5TVzyajOdQ==",
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.9.6.tgz",
+      "integrity": "sha512-jqzNLhNDvIZOrt69Ce4UjGRpXJBzhUBzawMwnaDAwyHriki3XollsewxWzOzz+4yOFDkuJHtTsZFwMxhYJWmLQ==",
       "cpu": [
         "x64"
       ],
@@ -4209,12 +4247,12 @@
       }
     },
     "node_modules/@storybook/addon-actions": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-7.6.10.tgz",
-      "integrity": "sha512-pcKmf0H/caGzKDy8cz1adNSjv+KOBWLJ11RzGExrWm+Ad5ACifwlsQPykJ3TQ/21sTd9IXVrE9uuq4LldEnPbg==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-7.6.12.tgz",
+      "integrity": "sha512-vK/H6K+AJ4ZSsCu/+MapYYI/xrynB6JoCOejt//flTigZOhwTWv7WXbmEeqGIIToXy0LA2IUZ1/kCjFXR0lEdQ==",
       "dev": true,
       "dependencies": {
-        "@storybook/core-events": "7.6.10",
+        "@storybook/core-events": "7.6.12",
         "@storybook/global": "^5.0.0",
         "@types/uuid": "^9.0.1",
         "dequal": "^2.0.2",
@@ -4227,9 +4265,9 @@
       }
     },
     "node_modules/@storybook/addon-backgrounds": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-7.6.10.tgz",
-      "integrity": "sha512-kGzsN1QkfyI8Cz7TErEx9OCB3PMzpCFGLd/iy7FreXwbMbeAQ3/9fYgKUsNOYgOhuTz7S09koZUWjS/WJuZGFA==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-7.6.12.tgz",
+      "integrity": "sha512-G14uN5lDXUtXw+dmEPaB6lpDpR9K25ssYuWWn8yYR44B1WMuD4kDgw0QGb0g+xYQj9R1TsalKEJHA4AuSYkVGQ==",
       "dev": true,
       "dependencies": {
         "@storybook/global": "^5.0.0",
@@ -4242,12 +4280,12 @@
       }
     },
     "node_modules/@storybook/addon-controls": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-7.6.10.tgz",
-      "integrity": "sha512-LjwCQRMWq1apLtFwDi6U8MI6ITUr+KhxJucZ60tfc58RgB2v8ayozyDAonFEONsx9YSR1dNIJ2Z/e2rWTBJeYA==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-7.6.12.tgz",
+      "integrity": "sha512-NX4KajscOsuXyYE3hhniF+y0E59E6rM0FgIaZ48P9c0DD+wDo8bAISHjZvmKXtDVajLk4/JySvByx1eN6V3hmA==",
       "dev": true,
       "dependencies": {
-        "@storybook/blocks": "7.6.10",
+        "@storybook/blocks": "7.6.12",
         "lodash": "^4.17.21",
         "ts-dedent": "^2.0.0"
       },
@@ -4257,26 +4295,26 @@
       }
     },
     "node_modules/@storybook/addon-docs": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-7.6.10.tgz",
-      "integrity": "sha512-GtyQ9bMx1AOOtl6ZS9vwK104HFRK+tqzxddRRxhXkpyeKu3olm9aMgXp35atE/3fJSqyyDm2vFtxxH8mzBA20A==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-7.6.12.tgz",
+      "integrity": "sha512-AzMgnGYfEg+Z1ycJh8MEp44x1DfjRijKCVYNaPFT6o+TjN/9GBaAkV4ydxmQzMEMnnnh/0E9YeHO+ivBVSkNog==",
       "dev": true,
       "dependencies": {
         "@jest/transform": "^29.3.1",
         "@mdx-js/react": "^2.1.5",
-        "@storybook/blocks": "7.6.10",
-        "@storybook/client-logger": "7.6.10",
-        "@storybook/components": "7.6.10",
-        "@storybook/csf-plugin": "7.6.10",
-        "@storybook/csf-tools": "7.6.10",
+        "@storybook/blocks": "7.6.12",
+        "@storybook/client-logger": "7.6.12",
+        "@storybook/components": "7.6.12",
+        "@storybook/csf-plugin": "7.6.12",
+        "@storybook/csf-tools": "7.6.12",
         "@storybook/global": "^5.0.0",
         "@storybook/mdx2-csf": "^1.0.0",
-        "@storybook/node-logger": "7.6.10",
-        "@storybook/postinstall": "7.6.10",
-        "@storybook/preview-api": "7.6.10",
-        "@storybook/react-dom-shim": "7.6.10",
-        "@storybook/theming": "7.6.10",
-        "@storybook/types": "7.6.10",
+        "@storybook/node-logger": "7.6.12",
+        "@storybook/postinstall": "7.6.12",
+        "@storybook/preview-api": "7.6.12",
+        "@storybook/react-dom-shim": "7.6.12",
+        "@storybook/theming": "7.6.12",
+        "@storybook/types": "7.6.12",
         "fs-extra": "^11.1.0",
         "remark-external-links": "^8.0.0",
         "remark-slug": "^6.0.0",
@@ -4292,24 +4330,24 @@
       }
     },
     "node_modules/@storybook/addon-essentials": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-7.6.10.tgz",
-      "integrity": "sha512-cjbuCCK/3dtUity0Uqi5LwbkgfxqCCE5x5mXZIk9lTMeDz5vB9q6M5nzncVDy8F8przF3NbDLLgxKlt8wjiICg==",
-      "dev": true,
-      "dependencies": {
-        "@storybook/addon-actions": "7.6.10",
-        "@storybook/addon-backgrounds": "7.6.10",
-        "@storybook/addon-controls": "7.6.10",
-        "@storybook/addon-docs": "7.6.10",
-        "@storybook/addon-highlight": "7.6.10",
-        "@storybook/addon-measure": "7.6.10",
-        "@storybook/addon-outline": "7.6.10",
-        "@storybook/addon-toolbars": "7.6.10",
-        "@storybook/addon-viewport": "7.6.10",
-        "@storybook/core-common": "7.6.10",
-        "@storybook/manager-api": "7.6.10",
-        "@storybook/node-logger": "7.6.10",
-        "@storybook/preview-api": "7.6.10",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-7.6.12.tgz",
+      "integrity": "sha512-Pl6n+19QC/T+cuU8DZjCwILXVxrdRTivNxPOiy8SEX+jjR4H0uAfXC9+RXCPjRFn64t4j1K7oIyoNokEn39cNw==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/addon-actions": "7.6.12",
+        "@storybook/addon-backgrounds": "7.6.12",
+        "@storybook/addon-controls": "7.6.12",
+        "@storybook/addon-docs": "7.6.12",
+        "@storybook/addon-highlight": "7.6.12",
+        "@storybook/addon-measure": "7.6.12",
+        "@storybook/addon-outline": "7.6.12",
+        "@storybook/addon-toolbars": "7.6.12",
+        "@storybook/addon-viewport": "7.6.12",
+        "@storybook/core-common": "7.6.12",
+        "@storybook/manager-api": "7.6.12",
+        "@storybook/node-logger": "7.6.12",
+        "@storybook/preview-api": "7.6.12",
         "ts-dedent": "^2.0.0"
       },
       "funding": {
@@ -4322,9 +4360,9 @@
       }
     },
     "node_modules/@storybook/addon-highlight": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-7.6.10.tgz",
-      "integrity": "sha512-dIuS5QmoT1R+gFOcf6CoBa6D9UR5/wHCfPqPRH8dNNcCLtIGSHWQ4v964mS5OCq1Huj7CghmR15lOUk7SaYwUA==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-7.6.12.tgz",
+      "integrity": "sha512-rWNEyBhwncXEDd9z7l67BLBIPqn0SRI/CJpZvCSF5KLWrVaoSEDF8INavmbikd1JBMcajJ28Ur6NsGj+eJjJiw==",
       "dev": true,
       "dependencies": {
         "@storybook/global": "^5.0.0"
@@ -4335,13 +4373,13 @@
       }
     },
     "node_modules/@storybook/addon-interactions": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-interactions/-/addon-interactions-7.6.10.tgz",
-      "integrity": "sha512-lEsAdP/PrOZK/KmRbZ/fU4RjEqDP+e/PBlVVVJT2QvHniWK/xxkjCD0axsHU/XuaeQRFhmg0/KR342PC/cIf9A==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-interactions/-/addon-interactions-7.6.12.tgz",
+      "integrity": "sha512-D8NX2xu9WiqPInoN842DU+KAFVC8HscGczqkDGEiWCAqq0DfXtW/0ClMSaE6d2+twhGv6uiPfeJ2IdynSZolXg==",
       "dev": true,
       "dependencies": {
         "@storybook/global": "^5.0.0",
-        "@storybook/types": "7.6.10",
+        "@storybook/types": "7.6.12",
         "jest-mock": "^27.0.6",
         "polished": "^4.2.2",
         "ts-dedent": "^2.2.0"
@@ -4352,9 +4390,9 @@
       }
     },
     "node_modules/@storybook/addon-links": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-7.6.10.tgz",
-      "integrity": "sha512-s/WkSYHpr2pb9p57j6u/xDBg3TKJhBq55YMl0GB5gXgkRPIeuGbPhGJhm2yTGVFLvXgr/aHHnOxb/R/W8PiRhA==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-7.6.12.tgz",
+      "integrity": "sha512-rGwPYpZAANPrf2GaNi5t9zAjLF8PgzKizyBPltIXUtplxDg88ziXlDA1dhsuGDs4Kf0oXECyAHPw79JjkJQziA==",
       "dev": true,
       "dependencies": {
         "@storybook/csf": "^0.1.2",
@@ -4375,9 +4413,9 @@
       }
     },
     "node_modules/@storybook/addon-measure": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-7.6.10.tgz",
-      "integrity": "sha512-OVfTI56+kc4hLWfZ/YPV3WKj/aA9e4iKXYxZyPdhfX4Z8TgZdD1wv9Z6e8DKS0H5kuybYrHKHaID5ki6t7qz3w==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-7.6.12.tgz",
+      "integrity": "sha512-K3aKErr84V0eVK7t+wco5cSYDdeotwoXi4e7VLSa2cdUz0wanOb4R7v3kf6vxucUyp05Lv+yHkz9zsbwuezepA==",
       "dev": true,
       "dependencies": {
         "@storybook/global": "^5.0.0",
@@ -4389,9 +4427,9 @@
       }
     },
     "node_modules/@storybook/addon-onboarding": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-onboarding/-/addon-onboarding-1.0.10.tgz",
-      "integrity": "sha512-tK7JjJYIpOM4LowBoIM/8ymYQ70qVRmu7pGqSOQ82AW15ob5u36HJ753y0hVH/KPj6k7J1aSgAEgVGXLmgwvKw==",
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-onboarding/-/addon-onboarding-1.0.11.tgz",
+      "integrity": "sha512-0Sa7PJDsM6AANOWZX7vq3kgCbS9AZFjr3tfr3bLGfXviwIBKjoZDDdIErJkS3D4mNcDa78lYQvp3PTCKwLIJ9A==",
       "dev": true,
       "dependencies": {
         "@storybook/telemetry": "^7.1.0",
@@ -4403,9 +4441,9 @@
       }
     },
     "node_modules/@storybook/addon-outline": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-7.6.10.tgz",
-      "integrity": "sha512-RVJrEoPArhI6zAIMNl1Gz0zrj84BTfEWYYz0yDWOTVgvN411ugsoIk1hw0671MOneXJ2RcQ9MFIeV/v6AVDQYg==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-7.6.12.tgz",
+      "integrity": "sha512-r6eO4EKh+zwGUNjxe8v/44BhyV+JD3Dl9GYMutsFqbwYsoWHJaZmzHuyqeFBXwx2MEoixdWdIzNMP71+srQqvw==",
       "dev": true,
       "dependencies": {
         "@storybook/global": "^5.0.0",
@@ -4417,9 +4455,9 @@
       }
     },
     "node_modules/@storybook/addon-toolbars": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-7.6.10.tgz",
-      "integrity": "sha512-PaXY/oj9yxF7/H0CNdQKcioincyCkfeHpISZriZbZqhyqsjn3vca7RFEmsB88Q+ou6rMeqyA9st+6e2cx/Ct6A==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-7.6.12.tgz",
+      "integrity": "sha512-TSwq8xO7fmS6GRTgJJa31OBzm+5zlgDYK2Q42jxFo/Vm10uMzCpjYJE6mIHpUDyjyBVQk6xxMMEcvo6no2eAWg==",
       "dev": true,
       "funding": {
         "type": "opencollective",
@@ -4427,9 +4465,9 @@
       }
     },
     "node_modules/@storybook/addon-viewport": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-7.6.10.tgz",
-      "integrity": "sha512-+bA6juC/lH4vEhk+w0rXakaG8JgLG4MOYrIudk5vJKQaC6X58LIM9N4kzIS2KSExRhkExXBPrWsnMfCo7uxmKg==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-7.6.12.tgz",
+      "integrity": "sha512-51zsBeoaEzq699SKDCe+GG/2PDAJKKJtpjqxIc4lDskogaCJSb3Ie8LyookHAKYgbi2qealVgK8zaP27KUj3Pg==",
       "dev": true,
       "dependencies": {
         "memoizerific": "^1.11.3"
@@ -4439,38 +4477,23 @@
         "url": "https://opencollective.com/storybook"
       }
     },
-    "node_modules/@storybook/addons": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-7.6.10.tgz",
-      "integrity": "sha512-lv/oT4ZGMKfXh6bB7LbuRP85bwRprBPYuMMl+e1Ikvu5WTfqVoJRYjc7mvXaIHGCI6DZ/nFcbRjra6q8ZhoDgw==",
-      "dev": true,
-      "dependencies": {
-        "@storybook/manager-api": "7.6.10",
-        "@storybook/preview-api": "7.6.10",
-        "@storybook/types": "7.6.10"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/storybook"
-      }
-    },
     "node_modules/@storybook/blocks": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-7.6.10.tgz",
-      "integrity": "sha512-oSIukGC3yuF8pojABC/HLu5tv2axZvf60TaUs8eDg7+NiiKhzYSPoMQxs5uMrKngl+EJDB92ESgWT9vvsfvIPg==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/blocks/-/blocks-7.6.12.tgz",
+      "integrity": "sha512-T47KOAjgZmhV+Ov59A70inE5edInh1Jh5w/5J5cjpk9a2p4uhd337SnK4B8J5YLhcM2lbKRWJjzIJ0nDZQTdnQ==",
       "dev": true,
       "dependencies": {
-        "@storybook/channels": "7.6.10",
-        "@storybook/client-logger": "7.6.10",
-        "@storybook/components": "7.6.10",
-        "@storybook/core-events": "7.6.10",
+        "@storybook/channels": "7.6.12",
+        "@storybook/client-logger": "7.6.12",
+        "@storybook/components": "7.6.12",
+        "@storybook/core-events": "7.6.12",
         "@storybook/csf": "^0.1.2",
-        "@storybook/docs-tools": "7.6.10",
+        "@storybook/docs-tools": "7.6.12",
         "@storybook/global": "^5.0.0",
-        "@storybook/manager-api": "7.6.10",
-        "@storybook/preview-api": "7.6.10",
-        "@storybook/theming": "7.6.10",
-        "@storybook/types": "7.6.10",
+        "@storybook/manager-api": "7.6.12",
+        "@storybook/preview-api": "7.6.12",
+        "@storybook/theming": "7.6.12",
+        "@storybook/types": "7.6.12",
         "@types/lodash": "^4.14.167",
         "color-convert": "^2.0.1",
         "dequal": "^2.0.2",
@@ -4494,15 +4517,15 @@
       }
     },
     "node_modules/@storybook/builder-manager": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/builder-manager/-/builder-manager-7.6.10.tgz",
-      "integrity": "sha512-f+YrjZwohGzvfDtH8BHzqM3xW0p4vjjg9u7uzRorqUiNIAAKHpfNrZ/WvwPlPYmrpAHt4xX/nXRJae4rFSygPw==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/builder-manager/-/builder-manager-7.6.12.tgz",
+      "integrity": "sha512-AJFrtBj0R11OFwwz+2j+ivRzttWXT6LesSGoLnxown24EV9uLQoHtGb7GOA2GyzY5wjUJS9gQBPGHXjvQEfLJA==",
       "dev": true,
       "dependencies": {
         "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
-        "@storybook/core-common": "7.6.10",
-        "@storybook/manager": "7.6.10",
-        "@storybook/node-logger": "7.6.10",
+        "@storybook/core-common": "7.6.12",
+        "@storybook/manager": "7.6.12",
+        "@storybook/node-logger": "7.6.12",
         "@types/ejs": "^3.1.1",
         "@types/find-cache-dir": "^3.2.1",
         "@yarnpkg/esbuild-plugin-pnp": "^3.0.0-rc.10",
@@ -4521,89 +4544,20 @@
         "url": "https://opencollective.com/storybook"
       }
     },
-    "node_modules/@storybook/builder-manager/node_modules/@esbuild/android-arm": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
-      "integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@storybook/builder-manager/node_modules/@esbuild/linux-loong64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz",
-      "integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==",
-      "cpu": [
-        "loong64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@storybook/builder-manager/node_modules/esbuild": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
-      "integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==",
-      "dev": true,
-      "hasInstallScript": true,
-      "bin": {
-        "esbuild": "bin/esbuild"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "optionalDependencies": {
-        "@esbuild/android-arm": "0.18.20",
-        "@esbuild/android-arm64": "0.18.20",
-        "@esbuild/android-x64": "0.18.20",
-        "@esbuild/darwin-arm64": "0.18.20",
-        "@esbuild/darwin-x64": "0.18.20",
-        "@esbuild/freebsd-arm64": "0.18.20",
-        "@esbuild/freebsd-x64": "0.18.20",
-        "@esbuild/linux-arm": "0.18.20",
-        "@esbuild/linux-arm64": "0.18.20",
-        "@esbuild/linux-ia32": "0.18.20",
-        "@esbuild/linux-loong64": "0.18.20",
-        "@esbuild/linux-mips64el": "0.18.20",
-        "@esbuild/linux-ppc64": "0.18.20",
-        "@esbuild/linux-riscv64": "0.18.20",
-        "@esbuild/linux-s390x": "0.18.20",
-        "@esbuild/linux-x64": "0.18.20",
-        "@esbuild/netbsd-x64": "0.18.20",
-        "@esbuild/openbsd-x64": "0.18.20",
-        "@esbuild/sunos-x64": "0.18.20",
-        "@esbuild/win32-arm64": "0.18.20",
-        "@esbuild/win32-ia32": "0.18.20",
-        "@esbuild/win32-x64": "0.18.20"
-      }
-    },
     "node_modules/@storybook/builder-vite": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-7.6.10.tgz",
-      "integrity": "sha512-qxe19axiNJVdIKj943e1ucAmADwU42fTGgMSdBzzrvfH3pSOmx2057aIxRzd8YtBRnj327eeqpgCHYIDTunMYQ==",
-      "dev": true,
-      "dependencies": {
-        "@storybook/channels": "7.6.10",
-        "@storybook/client-logger": "7.6.10",
-        "@storybook/core-common": "7.6.10",
-        "@storybook/csf-plugin": "7.6.10",
-        "@storybook/node-logger": "7.6.10",
-        "@storybook/preview": "7.6.10",
-        "@storybook/preview-api": "7.6.10",
-        "@storybook/types": "7.6.10",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-7.6.12.tgz",
+      "integrity": "sha512-VJIn+XYVVhdJHHMEtYDnEyQQU4fRupugSFpP9XLYTRYgXPN9PSVey4vI/IyuHcHYINPba39UY2+8PW+5NgShxQ==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/channels": "7.6.12",
+        "@storybook/client-logger": "7.6.12",
+        "@storybook/core-common": "7.6.12",
+        "@storybook/csf-plugin": "7.6.12",
+        "@storybook/node-logger": "7.6.12",
+        "@storybook/preview": "7.6.12",
+        "@storybook/preview-api": "7.6.12",
+        "@storybook/types": "7.6.12",
         "@types/find-cache-dir": "^3.2.1",
         "browser-assert": "^1.2.1",
         "es-module-lexer": "^0.9.3",
@@ -4652,13 +4606,13 @@
       }
     },
     "node_modules/@storybook/channels": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.6.10.tgz",
-      "integrity": "sha512-ITCLhFuDBKgxetuKnWwYqMUWlU7zsfH3gEKZltTb+9/2OAWR7ez0iqU7H6bXP1ridm0DCKkt2UMWj2mmr9iQqg==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.6.12.tgz",
+      "integrity": "sha512-TaPl5Y3lOoVi5kTLgKNRX8xh2sUPekH0Id1l4Ymw+lpgriEY6r60bmkZLysLG1GhlskpQ/da2+S2ap2ht8P2TQ==",
       "dev": true,
       "dependencies": {
-        "@storybook/client-logger": "7.6.10",
-        "@storybook/core-events": "7.6.10",
+        "@storybook/client-logger": "7.6.12",
+        "@storybook/core-events": "7.6.12",
         "@storybook/global": "^5.0.0",
         "qs": "^6.10.0",
         "telejson": "^7.2.0",
@@ -4670,23 +4624,23 @@
       }
     },
     "node_modules/@storybook/cli": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/cli/-/cli-7.6.10.tgz",
-      "integrity": "sha512-pK1MEseMm73OMO2OVoSz79QWX8ymxgIGM8IeZTCo9gImiVRChMNDFYcv8yPWkjuyesY8c15CoO48aR7pdA1OjQ==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/cli/-/cli-7.6.12.tgz",
+      "integrity": "sha512-x4sG1oIVERxp+WnWUexVlgaJCFmML0kGi7a5qfx7z4vHMxCV/WG7g1q7mPS/kqStCGEiQdTciCqOEFqlMh9MLw==",
       "dev": true,
       "dependencies": {
         "@babel/core": "^7.23.2",
         "@babel/preset-env": "^7.23.2",
         "@babel/types": "^7.23.0",
         "@ndelangen/get-tarball": "^3.0.7",
-        "@storybook/codemod": "7.6.10",
-        "@storybook/core-common": "7.6.10",
-        "@storybook/core-events": "7.6.10",
-        "@storybook/core-server": "7.6.10",
-        "@storybook/csf-tools": "7.6.10",
-        "@storybook/node-logger": "7.6.10",
-        "@storybook/telemetry": "7.6.10",
-        "@storybook/types": "7.6.10",
+        "@storybook/codemod": "7.6.12",
+        "@storybook/core-common": "7.6.12",
+        "@storybook/core-events": "7.6.12",
+        "@storybook/core-server": "7.6.12",
+        "@storybook/csf-tools": "7.6.12",
+        "@storybook/node-logger": "7.6.12",
+        "@storybook/telemetry": "7.6.12",
+        "@storybook/types": "7.6.12",
         "@types/semver": "^7.3.4",
         "@yarnpkg/fslib": "2.10.3",
         "@yarnpkg/libzip": "2.3.0",
@@ -4734,57 +4688,10 @@
         "node": ">= 6"
       }
     },
-    "node_modules/@storybook/cli/node_modules/execa": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
-      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
-      "dev": true,
-      "dependencies": {
-        "cross-spawn": "^7.0.3",
-        "get-stream": "^6.0.0",
-        "human-signals": "^2.1.0",
-        "is-stream": "^2.0.0",
-        "merge-stream": "^2.0.0",
-        "npm-run-path": "^4.0.1",
-        "onetime": "^5.1.2",
-        "signal-exit": "^3.0.3",
-        "strip-final-newline": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/execa?sponsor=1"
-      }
-    },
-    "node_modules/@storybook/cli/node_modules/get-stream": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@storybook/cli/node_modules/is-stream": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
-      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@storybook/cli/node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+    "node_modules/@storybook/cli/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
       "dev": true,
       "dependencies": {
         "yallist": "^4.0.0"
@@ -4793,18 +4700,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/@storybook/cli/node_modules/npm-run-path": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-      "dev": true,
-      "dependencies": {
-        "path-key": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/@storybook/cli/node_modules/semver": {
       "version": "7.5.4",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
@@ -4827,9 +4722,9 @@
       "dev": true
     },
     "node_modules/@storybook/client-logger": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.10.tgz",
-      "integrity": "sha512-U7bbpu21ntgePMz/mKM18qvCSWCUGCUlYru8mgVlXLCKqFqfTeP887+CsPEQf29aoE3cLgDrxqbRJ1wxX9kL9A==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.12.tgz",
+      "integrity": "sha512-hiRv6dXsOttMPqm9SxEuFoAtDe9rs7TUS8XcO5rmJ9BgfwBJsYlHzAxXkazxmvlyZtKL7gMx6m8OYbCdZgUqtA==",
       "dev": true,
       "dependencies": {
         "@storybook/global": "^5.0.0"
@@ -4840,18 +4735,18 @@
       }
     },
     "node_modules/@storybook/codemod": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/codemod/-/codemod-7.6.10.tgz",
-      "integrity": "sha512-pzFR0nocBb94vN9QCJLC3C3dP734ZigqyPmd0ZCDj9Xce2ytfHK3v1lKB6TZWzKAZT8zztauECYxrbo4LVuagw==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/codemod/-/codemod-7.6.12.tgz",
+      "integrity": "sha512-4EI4Ah1cvz6gFkXOS/LGf23oN8LO6ABGpWwPQoMHpIV3wUkFWBwrKFUe/UAQZGptnM0VZRYx4grS82Hluw4XJA==",
       "dev": true,
       "dependencies": {
         "@babel/core": "^7.23.2",
         "@babel/preset-env": "^7.23.2",
         "@babel/types": "^7.23.0",
         "@storybook/csf": "^0.1.2",
-        "@storybook/csf-tools": "7.6.10",
-        "@storybook/node-logger": "7.6.10",
-        "@storybook/types": "7.6.10",
+        "@storybook/csf-tools": "7.6.12",
+        "@storybook/node-logger": "7.6.12",
+        "@storybook/types": "7.6.12",
         "@types/cross-spawn": "^6.0.2",
         "cross-spawn": "^7.0.3",
         "globby": "^11.0.2",
@@ -4866,18 +4761,18 @@
       }
     },
     "node_modules/@storybook/components": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-7.6.10.tgz",
-      "integrity": "sha512-H5hF8pxwtbt0LxV24KMMsPlbYG9Oiui3ObvAQkvGu6q62EYxRPeNSrq3GBI5XEbI33OJY9bT24cVaZx18dXqwQ==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-7.6.12.tgz",
+      "integrity": "sha512-PCijPqmlZd7qyTzNr+vD0Kf8sAI9vWJIaxbSjXwn/De3e63m4fsEcIf8FaUT8cMZ46AWZvaxaxX5km2u0UISJQ==",
       "dev": true,
       "dependencies": {
         "@radix-ui/react-select": "^1.2.2",
         "@radix-ui/react-toolbar": "^1.0.4",
-        "@storybook/client-logger": "7.6.10",
+        "@storybook/client-logger": "7.6.12",
         "@storybook/csf": "^0.1.2",
         "@storybook/global": "^5.0.0",
-        "@storybook/theming": "7.6.10",
-        "@storybook/types": "7.6.10",
+        "@storybook/theming": "7.6.12",
+        "@storybook/types": "7.6.12",
         "memoizerific": "^1.11.3",
         "use-resize-observer": "^9.1.0",
         "util-deprecate": "^1.0.2"
@@ -4892,13 +4787,13 @@
       }
     },
     "node_modules/@storybook/core-client": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/core-client/-/core-client-7.6.10.tgz",
-      "integrity": "sha512-DjnzSzSNDmZyxyg6TxugzWQwOsW+n/iWVv6sHNEvEd5STr0mjuJjIEELmv58LIr5Lsre5+LEddqHsyuLyt8ubg==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/core-client/-/core-client-7.6.12.tgz",
+      "integrity": "sha512-VzVp32tMZsCzM4UIqfvCoJF7N9mBf6dsAxh1/ZgViy75Fht78pGo3JwZXW8osMbFSRpmWD7fxlUM5S7TQOYQug==",
       "dev": true,
       "dependencies": {
-        "@storybook/client-logger": "7.6.10",
-        "@storybook/preview-api": "7.6.10"
+        "@storybook/client-logger": "7.6.12",
+        "@storybook/preview-api": "7.6.12"
       },
       "funding": {
         "type": "opencollective",
@@ -4906,14 +4801,14 @@
       }
     },
     "node_modules/@storybook/core-common": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-7.6.10.tgz",
-      "integrity": "sha512-K3YWqjCKMnpvYsWNjOciwTH6zWbuuZzmOiipziZaVJ+sB1XYmH52Y3WGEm07TZI8AYK9DRgwA13dR/7W0nw72Q==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/core-common/-/core-common-7.6.12.tgz",
+      "integrity": "sha512-kM9YiBBMM2x5v/oylL7gdO1PS4oehgJC21MivS9p5QZ8uuXKtCQ6UQvI3rzaV+1ZzUA4n+I8MyaMrNIQk8KDbw==",
       "dev": true,
       "dependencies": {
-        "@storybook/core-events": "7.6.10",
-        "@storybook/node-logger": "7.6.10",
-        "@storybook/types": "7.6.10",
+        "@storybook/core-events": "7.6.12",
+        "@storybook/node-logger": "7.6.12",
+        "@storybook/types": "7.6.12",
         "@types/find-cache-dir": "^3.2.1",
         "@types/node": "^18.0.0",
         "@types/node-fetch": "^2.6.4",
@@ -4940,84 +4835,15 @@
         "url": "https://opencollective.com/storybook"
       }
     },
-    "node_modules/@storybook/core-common/node_modules/@esbuild/android-arm": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
-      "integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@storybook/core-common/node_modules/@esbuild/linux-loong64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz",
-      "integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==",
-      "cpu": [
-        "loong64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/@storybook/core-common/node_modules/@types/node": {
-      "version": "18.19.8",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.8.tgz",
-      "integrity": "sha512-g1pZtPhsvGVTwmeVoexWZLTQaOvXwoSq//pTL0DHeNzUDrFnir4fgETdhjhIxjVnN+hKOuh98+E1eMLnUXstFg==",
+      "version": "18.19.14",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.14.tgz",
+      "integrity": "sha512-EnQ4Us2rmOS64nHDWr0XqAD8DsO6f3XR6lf9UIIrZQpUzPVdN/oPuEzfDWNHSyXLvoGgjuEm/sPwFGSSs35Wtg==",
       "dev": true,
       "dependencies": {
         "undici-types": "~5.26.4"
       }
     },
-    "node_modules/@storybook/core-common/node_modules/esbuild": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
-      "integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==",
-      "dev": true,
-      "hasInstallScript": true,
-      "bin": {
-        "esbuild": "bin/esbuild"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "optionalDependencies": {
-        "@esbuild/android-arm": "0.18.20",
-        "@esbuild/android-arm64": "0.18.20",
-        "@esbuild/android-x64": "0.18.20",
-        "@esbuild/darwin-arm64": "0.18.20",
-        "@esbuild/darwin-x64": "0.18.20",
-        "@esbuild/freebsd-arm64": "0.18.20",
-        "@esbuild/freebsd-x64": "0.18.20",
-        "@esbuild/linux-arm": "0.18.20",
-        "@esbuild/linux-arm64": "0.18.20",
-        "@esbuild/linux-ia32": "0.18.20",
-        "@esbuild/linux-loong64": "0.18.20",
-        "@esbuild/linux-mips64el": "0.18.20",
-        "@esbuild/linux-ppc64": "0.18.20",
-        "@esbuild/linux-riscv64": "0.18.20",
-        "@esbuild/linux-s390x": "0.18.20",
-        "@esbuild/linux-x64": "0.18.20",
-        "@esbuild/netbsd-x64": "0.18.20",
-        "@esbuild/openbsd-x64": "0.18.20",
-        "@esbuild/sunos-x64": "0.18.20",
-        "@esbuild/win32-arm64": "0.18.20",
-        "@esbuild/win32-ia32": "0.18.20",
-        "@esbuild/win32-x64": "0.18.20"
-      }
-    },
     "node_modules/@storybook/core-common/node_modules/glob": {
       "version": "10.3.10",
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
@@ -5041,9 +4867,9 @@
       }
     },
     "node_modules/@storybook/core-events": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.6.10.tgz",
-      "integrity": "sha512-yccDH67KoROrdZbRKwxgTswFMAco5nlCyxszCDASCLygGSV2Q2e+YuywrhchQl3U6joiWi3Ps1qWu56NeNafag==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.6.12.tgz",
+      "integrity": "sha512-IO4cwk7bBCKH6lLnnIlHO9FwQXt/9CzLUAoZSY9msWsdPppCdKlw8ynJI5YarSNKDBUn8ArIfnRf0Mve0KQr9Q==",
       "dev": true,
       "dependencies": {
         "ts-dedent": "^2.0.0"
@@ -5054,26 +4880,26 @@
       }
     },
     "node_modules/@storybook/core-server": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/core-server/-/core-server-7.6.10.tgz",
-      "integrity": "sha512-2icnqJkn3vwq0eJPP0rNaHd7IOvxYf5q4lSVl2AWTxo/Ae19KhokI6j/2vvS2XQJMGQszwshlIwrZUNsj5p0yw==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/core-server/-/core-server-7.6.12.tgz",
+      "integrity": "sha512-tjWifKsDnIc8pvbjVyQrOHef70Gcp93Bg3WwuysB8PGk7lcX2RD9zv44HNIyjxdOLSSv66IGKrOldEBL3hab4w==",
       "dev": true,
       "dependencies": {
         "@aw-web-design/x-default-browser": "1.4.126",
         "@discoveryjs/json-ext": "^0.5.3",
-        "@storybook/builder-manager": "7.6.10",
-        "@storybook/channels": "7.6.10",
-        "@storybook/core-common": "7.6.10",
-        "@storybook/core-events": "7.6.10",
+        "@storybook/builder-manager": "7.6.12",
+        "@storybook/channels": "7.6.12",
+        "@storybook/core-common": "7.6.12",
+        "@storybook/core-events": "7.6.12",
         "@storybook/csf": "^0.1.2",
-        "@storybook/csf-tools": "7.6.10",
+        "@storybook/csf-tools": "7.6.12",
         "@storybook/docs-mdx": "^0.1.0",
         "@storybook/global": "^5.0.0",
-        "@storybook/manager": "7.6.10",
-        "@storybook/node-logger": "7.6.10",
-        "@storybook/preview-api": "7.6.10",
-        "@storybook/telemetry": "7.6.10",
-        "@storybook/types": "7.6.10",
+        "@storybook/manager": "7.6.12",
+        "@storybook/node-logger": "7.6.12",
+        "@storybook/preview-api": "7.6.12",
+        "@storybook/telemetry": "7.6.12",
+        "@storybook/types": "7.6.12",
         "@types/detect-port": "^1.3.0",
         "@types/node": "^18.0.0",
         "@types/pretty-hrtime": "^1.0.0",
@@ -5107,9 +4933,9 @@
       }
     },
     "node_modules/@storybook/core-server/node_modules/@types/node": {
-      "version": "18.19.8",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.8.tgz",
-      "integrity": "sha512-g1pZtPhsvGVTwmeVoexWZLTQaOvXwoSq//pTL0DHeNzUDrFnir4fgETdhjhIxjVnN+hKOuh98+E1eMLnUXstFg==",
+      "version": "18.19.14",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.14.tgz",
+      "integrity": "sha512-EnQ4Us2rmOS64nHDWr0XqAD8DsO6f3XR6lf9UIIrZQpUzPVdN/oPuEzfDWNHSyXLvoGgjuEm/sPwFGSSs35Wtg==",
       "dev": true,
       "dependencies": {
         "undici-types": "~5.26.4"
@@ -5158,12 +4984,12 @@
       }
     },
     "node_modules/@storybook/csf-plugin": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-7.6.10.tgz",
-      "integrity": "sha512-Sc+zZg/BnPH2X28tthNaQBnDiFfO0QmfjVoOx0fGYM9SvY3P5ehzWwp5hMRBim6a/twOTzePADtqYL+t6GMqqg==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-7.6.12.tgz",
+      "integrity": "sha512-fe/84AyctJcrpH1F/tTBxKrbjv0ilmG3ZTwVcufEiAzupZuYjQ/0P+Pxs8m8VxiGJZZ1pWofFFDbYi+wERjamQ==",
       "dev": true,
       "dependencies": {
-        "@storybook/csf-tools": "7.6.10",
+        "@storybook/csf-tools": "7.6.12",
         "unplugin": "^1.3.1"
       },
       "funding": {
@@ -5172,9 +4998,9 @@
       }
     },
     "node_modules/@storybook/csf-tools": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/csf-tools/-/csf-tools-7.6.10.tgz",
-      "integrity": "sha512-TnDNAwIALcN6SA4l00Cb67G02XMOrYU38bIpFJk5VMDX2dvgPjUtJNBuLmEbybGcOt7nPyyFIHzKcY5FCVGoWA==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/csf-tools/-/csf-tools-7.6.12.tgz",
+      "integrity": "sha512-MdhkYYxSW5I6Jpk34gTkAZsuj9sxe0xdyeUQpNa8CgJxG43F+ehZ6scW/IPjoSG9gCXBUJMekq26UrmbVfsLCQ==",
       "dev": true,
       "dependencies": {
         "@babel/generator": "^7.23.0",
@@ -5182,7 +5008,7 @@
         "@babel/traverse": "^7.23.2",
         "@babel/types": "^7.23.0",
         "@storybook/csf": "^0.1.2",
-        "@storybook/types": "7.6.10",
+        "@storybook/types": "7.6.12",
         "fs-extra": "^11.1.0",
         "recast": "^0.23.1",
         "ts-dedent": "^2.0.0"
@@ -5199,14 +5025,14 @@
       "dev": true
     },
     "node_modules/@storybook/docs-tools": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/docs-tools/-/docs-tools-7.6.10.tgz",
-      "integrity": "sha512-UgbikducoXzqQHf2TozO0f2rshaeBNnShVbL5Ai4oW7pDymBmrfzdjGbF/milO7yxNKcoIByeoNmu384eBamgQ==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/docs-tools/-/docs-tools-7.6.12.tgz",
+      "integrity": "sha512-nY2lqEDTd/fR/D91ZLlIp+boSuJtkb8DqHW7pECy61rJqzGq4QpepRaWjQDKnGTgPItrsPfTPOu6iXvXNK07Ow==",
       "dev": true,
       "dependencies": {
-        "@storybook/core-common": "7.6.10",
-        "@storybook/preview-api": "7.6.10",
-        "@storybook/types": "7.6.10",
+        "@storybook/core-common": "7.6.12",
+        "@storybook/preview-api": "7.6.12",
+        "@storybook/types": "7.6.12",
         "@types/doctrine": "^0.0.3",
         "assert": "^2.1.0",
         "doctrine": "^3.0.0",
@@ -5224,16 +5050,16 @@
       "dev": true
     },
     "node_modules/@storybook/instrumenter": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/instrumenter/-/instrumenter-7.6.10.tgz",
-      "integrity": "sha512-9FYXW1CKXnZ7yYmy2A6U0seqJMe1F7g55J28Vslk3ZLoGATFJ2BR0eoQS+cgfBly6djehjaVeuV3IcUYGnQ/6Q==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/instrumenter/-/instrumenter-7.6.12.tgz",
+      "integrity": "sha512-BK+hCz2tuUSDPvN0kACR+Ev7lQj4SLlMdXiJgRGdnKWR7zr1OFEg9MEIwPHNC+Ywny1x7YOwrbNJ9sdISNIh0g==",
       "dev": true,
       "dependencies": {
-        "@storybook/channels": "7.6.10",
-        "@storybook/client-logger": "7.6.10",
-        "@storybook/core-events": "7.6.10",
+        "@storybook/channels": "7.6.12",
+        "@storybook/client-logger": "7.6.12",
+        "@storybook/core-events": "7.6.12",
         "@storybook/global": "^5.0.0",
-        "@storybook/preview-api": "7.6.10",
+        "@storybook/preview-api": "7.6.12",
         "@vitest/utils": "^0.34.6",
         "util": "^0.12.4"
       },
@@ -5243,9 +5069,9 @@
       }
     },
     "node_modules/@storybook/manager": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/manager/-/manager-7.6.10.tgz",
-      "integrity": "sha512-Co3sLCbNYY6O4iH2ggmRDLCPWLj03JE5s/DOG8OVoXc6vBwTc/Qgiyrsxxp6BHQnPpM0mxL6aKAxE3UjsW/Nog==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/manager/-/manager-7.6.12.tgz",
+      "integrity": "sha512-WMWvswJHGiqJFJb98WQMQfZQhLuVtmci4y/VJGQ/Jnq1nJQs76BCtaeGiHcsYmRaAP1HMI4DbzuTSEgca146xw==",
       "dev": true,
       "funding": {
         "type": "opencollective",
@@ -5253,19 +5079,19 @@
       }
     },
     "node_modules/@storybook/manager-api": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-7.6.10.tgz",
-      "integrity": "sha512-8eGVpRlpunuFScDtc7nxpPJf/4kJBAAZlNdlhmX09j8M3voX6GpcxabBamSEX5pXZqhwxQCshD4IbqBmjvadlw==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-7.6.12.tgz",
+      "integrity": "sha512-XA5KQpY44d6mlqt0AlesZ7fsPpm1PCpoV+nRGFBR0YtF6RdPFvrPyHhlGgLkJC4xSyb2YJmLKn8cERSluAcEgQ==",
       "dev": true,
       "dependencies": {
-        "@storybook/channels": "7.6.10",
-        "@storybook/client-logger": "7.6.10",
-        "@storybook/core-events": "7.6.10",
+        "@storybook/channels": "7.6.12",
+        "@storybook/client-logger": "7.6.12",
+        "@storybook/core-events": "7.6.12",
         "@storybook/csf": "^0.1.2",
         "@storybook/global": "^5.0.0",
-        "@storybook/router": "7.6.10",
-        "@storybook/theming": "7.6.10",
-        "@storybook/types": "7.6.10",
+        "@storybook/router": "7.6.12",
+        "@storybook/theming": "7.6.12",
+        "@storybook/types": "7.6.12",
         "dequal": "^2.0.2",
         "lodash": "^4.17.21",
         "memoizerific": "^1.11.3",
@@ -5285,9 +5111,9 @@
       "dev": true
     },
     "node_modules/@storybook/node-logger": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-7.6.10.tgz",
-      "integrity": "sha512-ZBuqrv4bjJzKXyfRGFkVIi+z6ekn6rOPoQao4KmsfLNQAUUsEdR8Baw/zMnnU417zw5dSEaZdpuwx75SCQAeOA==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-7.6.12.tgz",
+      "integrity": "sha512-iS44/EjfF6hLecKzICmcpQoB9bmVi4tXx5gVXnbI5ZyziBibRQcg/U191Njl7wY2ScN/RCQOr8lh5k57rI3Prg==",
       "dev": true,
       "funding": {
         "type": "opencollective",
@@ -5295,9 +5121,9 @@
       }
     },
     "node_modules/@storybook/postinstall": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/postinstall/-/postinstall-7.6.10.tgz",
-      "integrity": "sha512-SMdXtednPCy3+SRJ7oN1OPN1oVFhj3ih+ChOEX8/kZ5J3nfmV3wLPtsZvFGUCf0KWQEP1xL+1Urv48mzMKcV/w==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/postinstall/-/postinstall-7.6.12.tgz",
+      "integrity": "sha512-uR0mDPxLzPaouCNrLp8vID8lATVTOtG7HB6lfjjzMdE3sN6MLmK9n2z2nXjb5DRRxOFWMeE1/4Age1/Ml2tnmA==",
       "dev": true,
       "funding": {
         "type": "opencollective",
@@ -5305,9 +5131,9 @@
       }
     },
     "node_modules/@storybook/preview": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/preview/-/preview-7.6.10.tgz",
-      "integrity": "sha512-F07BzVXTD3byq+KTWtvsw3pUu3fQbyiBNLFr2CnfU4XSdLKja5lDt8VqDQq70TayVQOf5qfUTzRd4M6pQkjw1w==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/preview/-/preview-7.6.12.tgz",
+      "integrity": "sha512-7vbeqQY3X+FCt/ccgCuBmj4rkbQebLHGEBAt8elcX0E2pr7SGW57lWhnasU3jeMaz7tNrkcs0gfl4hyVRWUHDg==",
       "dev": true,
       "funding": {
         "type": "opencollective",
@@ -5315,17 +5141,17 @@
       }
     },
     "node_modules/@storybook/preview-api": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.6.10.tgz",
-      "integrity": "sha512-5A3etoIwZCx05yuv3KSTv1wynN4SR4rrzaIs/CTBp3BC4q1RBL+Or/tClk0IJPXQMlx/4Y134GtNIBbkiDofpw==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.6.12.tgz",
+      "integrity": "sha512-uSzeMSLnCRROjiofJP0F0niLWL+sboQ5ktHW6BAYoPwprumXduPxKBUVEZNxMbVYoAz9v/kEZmaLauh8LRP2Hg==",
       "dev": true,
       "dependencies": {
-        "@storybook/channels": "7.6.10",
-        "@storybook/client-logger": "7.6.10",
-        "@storybook/core-events": "7.6.10",
+        "@storybook/channels": "7.6.12",
+        "@storybook/client-logger": "7.6.12",
+        "@storybook/core-events": "7.6.12",
         "@storybook/csf": "^0.1.2",
         "@storybook/global": "^5.0.0",
-        "@storybook/types": "7.6.10",
+        "@storybook/types": "7.6.12",
         "@types/qs": "^6.9.5",
         "dequal": "^2.0.2",
         "lodash": "^4.17.21",
@@ -5341,18 +5167,18 @@
       }
     },
     "node_modules/@storybook/react": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/react/-/react-7.6.10.tgz",
-      "integrity": "sha512-wwBn1cg2uZWW4peqqBjjU7XGmFq8HdkVUtWwh6dpfgmlY1Aopi+vPgZt7pY9KkWcTOq5+DerMdSfwxukpc3ajQ==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/react/-/react-7.6.12.tgz",
+      "integrity": "sha512-ITDRGi79Qg+z1kGYv+yyJESz/5AsJVdBTMO7tr1qV7gmHElkASt6UR8SBSqKgePOnYgy3k/1PLfbzOs6G4OgYQ==",
       "dev": true,
       "dependencies": {
-        "@storybook/client-logger": "7.6.10",
-        "@storybook/core-client": "7.6.10",
-        "@storybook/docs-tools": "7.6.10",
+        "@storybook/client-logger": "7.6.12",
+        "@storybook/core-client": "7.6.12",
+        "@storybook/docs-tools": "7.6.12",
         "@storybook/global": "^5.0.0",
-        "@storybook/preview-api": "7.6.10",
-        "@storybook/react-dom-shim": "7.6.10",
-        "@storybook/types": "7.6.10",
+        "@storybook/preview-api": "7.6.12",
+        "@storybook/react-dom-shim": "7.6.12",
+        "@storybook/types": "7.6.12",
         "@types/escodegen": "^0.0.6",
         "@types/estree": "^0.0.51",
         "@types/node": "^18.0.0",
@@ -5387,9 +5213,9 @@
       }
     },
     "node_modules/@storybook/react-dom-shim": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-7.6.10.tgz",
-      "integrity": "sha512-M+N/h6ximacaFdIDjMN2waNoWwApeVYTpFeoDppiFTvdBTXChyIuiPgYX9QSg7gDz92OaA52myGOot4wGvXVzg==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-7.6.12.tgz",
+      "integrity": "sha512-P8eu/s/RQlc/7Yvr260lqNa6rttxIYiPUuHQBu9oCacwkpB3Xep2R/PUY2CifRHqlDhaOINO/Z79oGZl4EBQRQ==",
       "dev": true,
       "funding": {
         "type": "opencollective",
@@ -5401,15 +5227,15 @@
       }
     },
     "node_modules/@storybook/react-vite": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/react-vite/-/react-vite-7.6.10.tgz",
-      "integrity": "sha512-YE2+J1wy8nO+c6Nv/hBMu91Edew3K184L1KSnfoZV8vtq2074k1Me/8pfe0QNuq631AncpfCYNb37yBAXQ/80w==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/react-vite/-/react-vite-7.6.12.tgz",
+      "integrity": "sha512-kQjCWmTcHuZM1Mlt1QjpYNXP1TxfkSDFWC36fSEUC0q48wzyjUEZs6YraxZu0YE+zXK+X4tmaZhz8pUPgV3gLw==",
       "dev": true,
       "dependencies": {
         "@joshwooding/vite-plugin-react-docgen-typescript": "0.3.0",
         "@rollup/pluginutils": "^5.0.2",
-        "@storybook/builder-vite": "7.6.10",
-        "@storybook/react": "7.6.10",
+        "@storybook/builder-vite": "7.6.12",
+        "@storybook/react": "7.6.12",
         "@vitejs/plugin-react": "^3.0.1",
         "magic-string": "^0.30.0",
         "react-docgen": "^7.0.0"
@@ -5434,42 +5260,21 @@
       "dev": true
     },
     "node_modules/@storybook/react/node_modules/@types/node": {
-      "version": "18.19.8",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.8.tgz",
-      "integrity": "sha512-g1pZtPhsvGVTwmeVoexWZLTQaOvXwoSq//pTL0DHeNzUDrFnir4fgETdhjhIxjVnN+hKOuh98+E1eMLnUXstFg==",
+      "version": "18.19.14",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.14.tgz",
+      "integrity": "sha512-EnQ4Us2rmOS64nHDWr0XqAD8DsO6f3XR6lf9UIIrZQpUzPVdN/oPuEzfDWNHSyXLvoGgjuEm/sPwFGSSs35Wtg==",
       "dev": true,
       "dependencies": {
         "undici-types": "~5.26.4"
       }
     },
-    "node_modules/@storybook/react/node_modules/acorn": {
-      "version": "7.4.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-      "dev": true,
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/@storybook/react/node_modules/acorn-walk": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
-      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/@storybook/router": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/router/-/router-7.6.10.tgz",
-      "integrity": "sha512-G/H4Jn2+y8PDe8Zbq4DVxF/TPn0/goSItdILts39JENucHiuGBCjKjSWGBe1rkwKi1tUbB3yhxJVrLagxFEPpQ==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/router/-/router-7.6.12.tgz",
+      "integrity": "sha512-1fqscJbePFJXhapqiv7fAIIqAvouSsdPnqWjJGJrUMR6JBtRYMcrb3MnDeqi9OYnU73r65BrQBPtSzWM8nP0LQ==",
       "dev": true,
       "dependencies": {
-        "@storybook/client-logger": "7.6.10",
+        "@storybook/client-logger": "7.6.12",
         "memoizerific": "^1.11.3",
         "qs": "^6.10.0"
       },
@@ -5479,14 +5284,14 @@
       }
     },
     "node_modules/@storybook/telemetry": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/telemetry/-/telemetry-7.6.10.tgz",
-      "integrity": "sha512-p3mOSUtIyy2tF1z6pQXxNh1JzYFcAm97nUgkwLzF07GfEdVAPM+ftRSLFbD93zVvLEkmLTlsTiiKaDvOY/lQWg==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/telemetry/-/telemetry-7.6.12.tgz",
+      "integrity": "sha512-eBG3sLb9CZ05pyK2JXBvnaAsxDzbZH57VyhtphhuZmx0DqF/78qIoHs9ebRJpJWV0sL5rtT9vIq8QXpQhDHLWg==",
       "dev": true,
       "dependencies": {
-        "@storybook/client-logger": "7.6.10",
-        "@storybook/core-common": "7.6.10",
-        "@storybook/csf-tools": "7.6.10",
+        "@storybook/client-logger": "7.6.12",
+        "@storybook/core-common": "7.6.12",
+        "@storybook/csf-tools": "7.6.12",
         "chalk": "^4.1.0",
         "detect-package-manager": "^2.0.1",
         "fetch-retry": "^5.0.2",
@@ -5499,15 +5304,15 @@
       }
     },
     "node_modules/@storybook/test": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/test/-/test-7.6.10.tgz",
-      "integrity": "sha512-dn/T+HcWOBlVh3c74BHurp++BaqBoQgNbSIaXlYDpJoZ+DzNIoEQVsWFYm5gCbtKK27iFd4n52RiQI3f6Vblqw==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/test/-/test-7.6.12.tgz",
+      "integrity": "sha512-kOkgr9EJqeitoN3ubbVRrAysHCqxpAFAyKzWCGuic9ynxvfTOc5prup0e05/GJmbHYqkWsOyaordXgcHvy8JaQ==",
       "dev": true,
       "dependencies": {
-        "@storybook/client-logger": "7.6.10",
-        "@storybook/core-events": "7.6.10",
-        "@storybook/instrumenter": "7.6.10",
-        "@storybook/preview-api": "7.6.10",
+        "@storybook/client-logger": "7.6.12",
+        "@storybook/core-events": "7.6.12",
+        "@storybook/instrumenter": "7.6.12",
+        "@storybook/preview-api": "7.6.12",
         "@testing-library/dom": "^9.3.1",
         "@testing-library/jest-dom": "^6.1.3",
         "@testing-library/user-event": "14.3.0",
@@ -5523,13 +5328,13 @@
       }
     },
     "node_modules/@storybook/theming": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.6.10.tgz",
-      "integrity": "sha512-f5tuy7yV3TOP3fIboSqpgLHy0wKayAw/M8HxX0jVET4Z4fWlFK0BiHJabQ+XEdAfQM97XhPFHB2IPbwsqhCEcQ==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.6.12.tgz",
+      "integrity": "sha512-P4zoMKlSYbNrWJjQROuz+DZSDEpdf3TUvk203EqBRdElqw2EMHcqZ8+0HGPFfVHpqEj05+B9Mr6R/Z/BURj0lw==",
       "dev": true,
       "dependencies": {
         "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
-        "@storybook/client-logger": "7.6.10",
+        "@storybook/client-logger": "7.6.12",
         "@storybook/global": "^5.0.0",
         "memoizerific": "^1.11.3"
       },
@@ -5543,12 +5348,12 @@
       }
     },
     "node_modules/@storybook/types": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.6.10.tgz",
-      "integrity": "sha512-hcS2HloJblaMpCAj2axgGV+53kgSRYPT0a1PG1IHsZaYQILfHSMmBqM8XzXXYTsgf9250kz3dqFX1l0n3EqMlQ==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.6.12.tgz",
+      "integrity": "sha512-Wsbd+NS10/2yMHQ/26rXHflXam0hm2qufTFiHOX6VXZWxij3slRU88Fnwzp+1QSyjXb0qkEr8dOx7aG00+ItVw==",
       "dev": true,
       "dependencies": {
-        "@storybook/channels": "7.6.10",
+        "@storybook/channels": "7.6.12",
         "@types/babel__core": "^7.0.0",
         "@types/express": "^4.7.0",
         "file-system-cache": "2.3.0"
@@ -5558,6 +5363,54 @@
         "url": "https://opencollective.com/storybook"
       }
     },
+    "node_modules/@stylexjs/babel-plugin": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@stylexjs/babel-plugin/-/babel-plugin-0.4.1.tgz",
+      "integrity": "sha512-usG7HFvq04ELD44BAukQlTzKwmw3B0isOgsYzO97iGTkHMi7CJN4hniag7Fj96hrTob8Kq6MBbbQkLeKzbjqIg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.23.6",
+        "@babel/helper-module-imports": "^7.22.15",
+        "@babel/traverse": "^7.23.6",
+        "@babel/types": "^7.23.6",
+        "@stylexjs/shared": "0.4.1",
+        "@stylexjs/stylex": "0.4.1"
+      }
+    },
+    "node_modules/@stylexjs/rollup-plugin": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@stylexjs/rollup-plugin/-/rollup-plugin-0.4.1.tgz",
+      "integrity": "sha512-EQ0QZobYiaOUwscJ5z05OBqn0kwi3xZYXrinoxUXM0PWzHMBjisKIP/6TAG88xlAvrWYxGaGKFI7HBEm1IEqaA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.23.6",
+        "@babel/plugin-syntax-flow": "^7.23.3",
+        "@babel/plugin-syntax-jsx": "^7.23.3",
+        "@babel/plugin-syntax-typescript": "^7.23.3",
+        "@stylexjs/babel-plugin": "0.4.1"
+      }
+    },
+    "node_modules/@stylexjs/shared": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@stylexjs/shared/-/shared-0.4.1.tgz",
+      "integrity": "sha512-4h1rVuwE9iPN0yor0kvtHhMo7XjWrG3DdPYWZI9c6V4AquAbh53KxN6v6X9woM2HKUbt0GzjyCsEjc6Ci6Lo4w==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
+    "node_modules/@stylexjs/stylex": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@stylexjs/stylex/-/stylex-0.4.1.tgz",
+      "integrity": "sha512-xc3hjEtqpluoZ1RcJZ1c59bdMITMHPh0FmCNi/01amaPhEw040WqgR/KGFHIqxIer9wt5mOeED3iM9tSrljeaQ==",
+      "dev": true,
+      "dependencies": {
+        "css-mediaquery": "^0.1.2",
+        "invariant": "^2.2.4",
+        "styleq": "0.1.3",
+        "utility-types": "^3.10.0"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "9.3.4",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.4.tgz",
@@ -5578,9 +5431,9 @@
       }
     },
     "node_modules/@testing-library/jest-dom": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.2.0.tgz",
-      "integrity": "sha512-+BVQlJ9cmEn5RDMUS8c2+TU6giLvzaHZ8sU/x0Jj7fk+6/46wPdwlgOPcpxS17CjcanBi/3VmGMqVr2rmbUmNw==",
+      "version": "6.4.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.4.1.tgz",
+      "integrity": "sha512-Z7qMM3J2Zw5H/nC2/5CYx5YcuaD56JmDFKNIozZ89VIo6o6Y9FMhssics4e2madEKYDNEpZz3+glPGz0yWMOag==",
       "dev": true,
       "dependencies": {
         "@adobe/css-tools": "^4.3.2",
@@ -5599,6 +5452,7 @@
       },
       "peerDependencies": {
         "@jest/globals": ">= 28",
+        "@types/bun": "latest",
         "@types/jest": ">= 28",
         "jest": ">= 28",
         "vitest": ">= 0.32"
@@ -5607,6 +5461,9 @@
         "@jest/globals": {
           "optional": true
         },
+        "@types/bun": {
+          "optional": true
+        },
         "@types/jest": {
           "optional": true
         },
@@ -5842,9 +5699,9 @@
       }
     },
     "node_modules/@types/express-serve-static-core": {
-      "version": "4.17.41",
-      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.41.tgz",
-      "integrity": "sha512-OaJ7XLaelTgrvlZD8/aa0vvvxZdUmlCn6MtWeB7TkiKW70BQLc9XEPpDLPdbo52ZhXUCrznlWdCHWxJWtdyajA==",
+      "version": "4.17.43",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.43.tgz",
+      "integrity": "sha512-oaYtiBirUOPQGSWNGPWnzyAFJ0BP3cwvN4oWZQY+zUBwpVIGsKUkpBpSztp74drYcjavs7SKFZ4DX1V2QeN8rg==",
       "dev": true,
       "dependencies": {
         "@types/node": "*",
@@ -5959,9 +5816,9 @@
       }
     },
     "node_modules/@types/mdx": {
-      "version": "2.0.10",
-      "resolved": "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.10.tgz",
-      "integrity": "sha512-Rllzc5KHk0Al5/WANwgSPl1/CwjqCy+AZrGd78zuK+jO9aDM6ffblZ+zIjgPNAaEBmlO0RYDvLNh7wD0zKVgEg==",
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.11.tgz",
+      "integrity": "sha512-HM5bwOaIQJIQbAYfax35HCKxx7a3KrK3nBtIqJgSOitivTD1y3oW9P3rxY9RkXYPUk7y/AjAohfHKmFpGE79zw==",
       "dev": true
     },
     "node_modules/@types/mime": {
@@ -5988,17 +5845,17 @@
       "integrity": "sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g=="
     },
     "node_modules/@types/node": {
-      "version": "20.10.5",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.5.tgz",
-      "integrity": "sha512-nNPsNE65wjMxEKI93yOP+NPGGBJz/PoN3kZsVLee0XMiJolxSekEVD8wRwBUBqkwc7UWop0edW50yrCQW4CyRw==",
+      "version": "20.11.16",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.16.tgz",
+      "integrity": "sha512-gKb0enTmRCzXSSUJDq6/sPcqrfCv2mkkG6Jt/clpn5eiCbKTY+SgZUxo+p8ZKMof5dCp9vHQUAB7wOUTod22wQ==",
       "dependencies": {
         "undici-types": "~5.26.4"
       }
     },
     "node_modules/@types/node-fetch": {
-      "version": "2.6.10",
-      "resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.10.tgz",
-      "integrity": "sha512-PPpPK6F9ALFTn59Ka3BaL+qGuipRfxNE8qVgkp0bVixeiR2c2/L+IVOiBdu9JhhT22sWnQEp6YyHGI2b2+CMcA==",
+      "version": "2.6.11",
+      "resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.11.tgz",
+      "integrity": "sha512-24xFj9R5+rfQJLRyM56qh+wnVSYhyXC2tkoBndtY0U+vubqNsYXGjufB2nn8Q6gt0LrARwL6UBtMCSVCwl4B1g==",
       "dependencies": {
         "@types/node": "*",
         "form-data": "^4.0.0"
@@ -6041,9 +5898,9 @@
       "dev": true
     },
     "node_modules/@types/react": {
-      "version": "18.2.48",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.48.tgz",
-      "integrity": "sha512-qboRCl6Ie70DQQG9hhNREz81jqC1cs9EVNcjQ1AU+jH6NFfSAhVVbrrY/+nSF+Bsk4AOwm9Qa61InvMCyV+H3w==",
+      "version": "18.2.52",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.52.tgz",
+      "integrity": "sha512-E/YjWh3tH+qsLKaUzgpZb5AY0ChVa+ZJzF7ogehVILrFpdQk6nC/WXOv0bfFEABbXbgNxLBGU7IIZByPKb6eBw==",
       "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
@@ -6140,9 +5997,9 @@
       "integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA=="
     },
     "node_modules/@types/uuid": {
-      "version": "9.0.7",
-      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.7.tgz",
-      "integrity": "sha512-WUtIVRUZ9i5dYXefDEAI7sh9/O7jGvHg7Df/5O/gtH3Yabe5odI3UWopVR1qbPXQtvOxWu3mM4XxlYeZtMWF4g==",
+      "version": "9.0.8",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz",
+      "integrity": "sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==",
       "dev": true
     },
     "node_modules/@types/yargs": {
@@ -6161,16 +6018,16 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "6.19.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.19.0.tgz",
-      "integrity": "sha512-DUCUkQNklCQYnrBSSikjVChdc84/vMPDQSgJTHBZ64G9bA9w0Crc0rd2diujKbTdp6w2J47qkeHQLoi0rpLCdg==",
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.20.0.tgz",
+      "integrity": "sha512-fTwGQUnjhoYHeSF6m5pWNkzmDDdsKELYrOBxhjMrofPqCkoC2k3B2wvGHFxa1CTIqkEn88nlW1HVMztjo2K8Hg==",
       "dev": true,
       "dependencies": {
         "@eslint-community/regexpp": "^4.5.1",
-        "@typescript-eslint/scope-manager": "6.19.0",
-        "@typescript-eslint/type-utils": "6.19.0",
-        "@typescript-eslint/utils": "6.19.0",
-        "@typescript-eslint/visitor-keys": "6.19.0",
+        "@typescript-eslint/scope-manager": "6.20.0",
+        "@typescript-eslint/type-utils": "6.20.0",
+        "@typescript-eslint/utils": "6.20.0",
+        "@typescript-eslint/visitor-keys": "6.20.0",
         "debug": "^4.3.4",
         "graphemer": "^1.4.0",
         "ignore": "^5.2.4",
@@ -6229,15 +6086,15 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "6.19.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.19.0.tgz",
-      "integrity": "sha512-1DyBLG5SH7PYCd00QlroiW60YJ4rWMuUGa/JBV0iZuqi4l4IK3twKPq5ZkEebmGqRjXWVgsUzfd3+nZveewgow==",
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.20.0.tgz",
+      "integrity": "sha512-bYerPDF/H5v6V76MdMYhjwmwgMA+jlPVqjSDq2cRqMi8bP5sR3Z+RLOiOMad3nsnmDVmn2gAFCyNgh/dIrfP/w==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "6.19.0",
-        "@typescript-eslint/types": "6.19.0",
-        "@typescript-eslint/typescript-estree": "6.19.0",
-        "@typescript-eslint/visitor-keys": "6.19.0",
+        "@typescript-eslint/scope-manager": "6.20.0",
+        "@typescript-eslint/types": "6.20.0",
+        "@typescript-eslint/typescript-estree": "6.20.0",
+        "@typescript-eslint/visitor-keys": "6.20.0",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -6257,13 +6114,13 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "6.19.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.19.0.tgz",
-      "integrity": "sha512-dO1XMhV2ehBI6QN8Ufi7I10wmUovmLU0Oru3n5LVlM2JuzB4M+dVphCPLkVpKvGij2j/pHBWuJ9piuXx+BhzxQ==",
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.20.0.tgz",
+      "integrity": "sha512-p4rvHQRDTI1tGGMDFQm+GtxP1ZHyAh64WANVoyEcNMpaTFn3ox/3CcgtIlELnRfKzSs/DwYlDccJEtr3O6qBvA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.19.0",
-        "@typescript-eslint/visitor-keys": "6.19.0"
+        "@typescript-eslint/types": "6.20.0",
+        "@typescript-eslint/visitor-keys": "6.20.0"
       },
       "engines": {
         "node": "^16.0.0 || >=18.0.0"
@@ -6274,13 +6131,13 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "6.19.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.19.0.tgz",
-      "integrity": "sha512-mcvS6WSWbjiSxKCwBcXtOM5pRkPQ6kcDds/juxcy/727IQr3xMEcwr/YLHW2A2+Fp5ql6khjbKBzOyjuPqGi/w==",
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.20.0.tgz",
+      "integrity": "sha512-qnSobiJQb1F5JjN0YDRPHruQTrX7ICsmltXhkV536mp4idGAYrIyr47zF/JmkJtEcAVnIz4gUYJ7gOZa6SmN4g==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "6.19.0",
-        "@typescript-eslint/utils": "6.19.0",
+        "@typescript-eslint/typescript-estree": "6.20.0",
+        "@typescript-eslint/utils": "6.20.0",
         "debug": "^4.3.4",
         "ts-api-utils": "^1.0.1"
       },
@@ -6301,9 +6158,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "6.19.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.19.0.tgz",
-      "integrity": "sha512-lFviGV/vYhOy3m8BJ/nAKoAyNhInTdXpftonhWle66XHAtT1ouBlkjL496b5H5hb8dWXHwtypTqgtb/DEa+j5A==",
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.20.0.tgz",
+      "integrity": "sha512-MM9mfZMAhiN4cOEcUOEx+0HmuaW3WBfukBZPCfwSqFnQy0grXYtngKCqpQN339X3RrwtzspWJrpbrupKYUSBXQ==",
       "dev": true,
       "engines": {
         "node": "^16.0.0 || >=18.0.0"
@@ -6314,13 +6171,13 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "6.19.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.19.0.tgz",
-      "integrity": "sha512-o/zefXIbbLBZ8YJ51NlkSAt2BamrK6XOmuxSR3hynMIzzyMY33KuJ9vuMdFSXW+H0tVvdF9qBPTHA91HDb4BIQ==",
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.20.0.tgz",
+      "integrity": "sha512-RnRya9q5m6YYSpBN7IzKu9FmLcYtErkDkc8/dKv81I9QiLLtVBHrjz+Ev/crAqgMNW2FCsoZF4g2QUylMnJz+g==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.19.0",
-        "@typescript-eslint/visitor-keys": "6.19.0",
+        "@typescript-eslint/types": "6.20.0",
+        "@typescript-eslint/visitor-keys": "6.20.0",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -6375,17 +6232,17 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "6.19.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.19.0.tgz",
-      "integrity": "sha512-QR41YXySiuN++/dC9UArYOg4X86OAYP83OWTewpVx5ct1IZhjjgTLocj7QNxGhWoTqknsgpl7L+hGygCO+sdYw==",
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.20.0.tgz",
+      "integrity": "sha512-/EKuw+kRu2vAqCoDwDCBtDRU6CTKbUmwwI7SH7AashZ+W+7o8eiyy6V2cdOqN49KsTcASWsC5QeghYuRDTyOOg==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
         "@types/json-schema": "^7.0.12",
         "@types/semver": "^7.5.0",
-        "@typescript-eslint/scope-manager": "6.19.0",
-        "@typescript-eslint/types": "6.19.0",
-        "@typescript-eslint/typescript-estree": "6.19.0",
+        "@typescript-eslint/scope-manager": "6.20.0",
+        "@typescript-eslint/types": "6.20.0",
+        "@typescript-eslint/typescript-estree": "6.20.0",
         "semver": "^7.5.4"
       },
       "engines": {
@@ -6433,12 +6290,12 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "6.19.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.19.0.tgz",
-      "integrity": "sha512-hZaUCORLgubBvtGpp1JEFEazcuEdfxta9j4iUwdSAr7mEsYYAp3EAUyCZk3VEEqGj6W+AV4uWyrDGtrlawAsgQ==",
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.20.0.tgz",
+      "integrity": "sha512-E8Cp98kRe4gKHjJD4NExXKz/zOJ1A2hhZc+IMVD6i7w4yjIvh6VyuRI0gRtxAsXtoC35uGMaQ9rjI2zJaXDEAw==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "6.19.0",
+        "@typescript-eslint/types": "6.20.0",
         "eslint-visitor-keys": "^3.4.1"
       },
       "engines": {
@@ -6625,9 +6482,9 @@
       }
     },
     "node_modules/acorn": {
-      "version": "8.11.3",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
-      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
       "dev": true,
       "bin": {
         "acorn": "bin/acorn"
@@ -6646,9 +6503,9 @@
       }
     },
     "node_modules/acorn-walk": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.2.tgz",
-      "integrity": "sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
+      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
       "dev": true,
       "engines": {
         "node": ">=0.4.0"
@@ -7015,9 +6872,9 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "node_modules/available-typed-arrays": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
-      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.6.tgz",
+      "integrity": "sha512-j1QzY8iPNPG4o4xmO3ptzpRxTciqD3MgEHtifP/YnJpIo58Xu+ne4BejlbkuaLfXn/nz6HFiw29bLpj2PNMdGg==",
       "dev": true,
       "engines": {
         "node": ">= 0.4"
@@ -7066,29 +6923,13 @@
       }
     },
     "node_modules/babel-plugin-polyfill-corejs3": {
-      "version": "0.8.7",
-      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.7.tgz",
-      "integrity": "sha512-KyDvZYxAzkC0Aj2dAPyDzi2Ym15e5JKZSK+maI7NAwSqofvuFglbSsxE7wUOvTg9oFVnHMzVzBKcqEb4PJgtOA==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-define-polyfill-provider": "^0.4.4",
-        "core-js-compat": "^3.33.1"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
-      }
-    },
-    "node_modules/babel-plugin-polyfill-corejs3/node_modules/@babel/helper-define-polyfill-provider": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.4.tgz",
-      "integrity": "sha512-QcJMILQCu2jm5TFPGA3lCpJJTeEP+mqeXooG/NZbg/h5FTFi6V0+99ahlRsW8/kRLyb24LZVCCiclDedhLKcBA==",
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.9.0.tgz",
+      "integrity": "sha512-7nZPG1uzK2Ymhy/NbaOWTg3uibM2BmGASS4vHS4szRZAIR8R6GwA/xAujpdrXU5iyklrimWnLWU+BLF9suPTqg==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-compilation-targets": "^7.22.6",
-        "@babel/helper-plugin-utils": "^7.22.5",
-        "debug": "^4.1.1",
-        "lodash.debounce": "^4.0.8",
-        "resolve": "^1.14.2"
+        "@babel/helper-define-polyfill-provider": "^0.5.0",
+        "core-js-compat": "^3.34.0"
       },
       "peerDependencies": {
         "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
@@ -7166,59 +7007,271 @@
         "node": ">=4"
       }
     },
-    "node_modules/bin-check": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/bin-check/-/bin-check-4.1.0.tgz",
-      "integrity": "sha512-b6weQyEUKsDGFlACWSIOfveEnImkJyK/FGW6FAG42loyoquvjdtOIqO6yBFzHyqyVVhNgNkQxxx09SFLK28YnA==",
+    "node_modules/bin-build/node_modules/cross-spawn": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
+      "integrity": "sha512-pTgQJ5KC0d2hcY8eyL1IzlBPYjTkyH72XRZPnLyKus2mBfNjQs3klqbJU2VILqZryAZUt9JOb3h/mWMy23/f5A==",
       "dependencies": {
-        "execa": "^0.7.0",
-        "executable": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=4"
+        "lru-cache": "^4.0.1",
+        "shebang-command": "^1.2.0",
+        "which": "^1.2.9"
       }
     },
-    "node_modules/bin-version": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/bin-version/-/bin-version-3.1.0.tgz",
-      "integrity": "sha512-Mkfm4iE1VFt4xd4vH+gx+0/71esbfus2LsnCGe8Pi4mndSPyT+NGES/Eg99jx8/lUGWfu3z2yuB/bt5UB+iVbQ==",
+    "node_modules/bin-build/node_modules/execa": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz",
+      "integrity": "sha512-RztN09XglpYI7aBBrJCPW95jEH7YF1UEPOoX9yDhUTPdp7mK+CQvnLTuD10BNXZ3byLTu2uehZ8EcKT/4CGiFw==",
       "dependencies": {
-        "execa": "^1.0.0",
-        "find-versions": "^3.0.0"
+        "cross-spawn": "^5.0.1",
+        "get-stream": "^3.0.0",
+        "is-stream": "^1.1.0",
+        "npm-run-path": "^2.0.0",
+        "p-finally": "^1.0.0",
+        "signal-exit": "^3.0.0",
+        "strip-eof": "^1.0.0"
       },
       "engines": {
-        "node": ">=6"
+        "node": ">=4"
       }
     },
-    "node_modules/bin-version-check": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/bin-version-check/-/bin-version-check-4.0.0.tgz",
-      "integrity": "sha512-sR631OrhC+1f8Cvs8WyVWOA33Y8tgwjETNPyyD/myRBXLkfS/vl74FmH/lFcRl9KY3zwGh7jFhvyk9vV3/3ilQ==",
-      "dependencies": {
-        "bin-version": "^3.0.0",
-        "semver": "^5.6.0",
-        "semver-truncate": "^1.1.2"
-      },
+    "node_modules/bin-build/node_modules/get-stream": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
+      "integrity": "sha512-GlhdIUuVakc8SJ6kK0zAFbiGzRFzNnY4jUuEbV9UROo4Y+0Ny4fjvcZFVTeDA4odpFyOQzaw6hXukJSq/f28sQ==",
       "engines": {
-        "node": ">=6"
+        "node": ">=4"
       }
     },
-    "node_modules/bin-version-check/node_modules/semver": {
-      "version": "5.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
-      "bin": {
-        "semver": "bin/semver"
+    "node_modules/bin-build/node_modules/is-stream": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+      "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==",
+      "engines": {
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/bin-version/node_modules/cross-spawn": {
-      "version": "6.0.5",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
-      "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+    "node_modules/bin-build/node_modules/lru-cache": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
+      "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
       "dependencies": {
-        "nice-try": "^1.0.4",
-        "path-key": "^2.0.1",
-        "semver": "^5.5.0",
+        "pseudomap": "^1.0.2",
+        "yallist": "^2.1.2"
+      }
+    },
+    "node_modules/bin-build/node_modules/npm-run-path": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
+      "integrity": "sha512-lJxZYlT4DW/bRUtFh1MQIWqmLwQfAxnqWG4HhEdjMlkrJYnJn0Jrr2u3mgxqaWsdiBc76TYkTG/mhrnYTuzfHw==",
+      "dependencies": {
+        "path-key": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/bin-build/node_modules/path-key": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
+      "integrity": "sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/bin-build/node_modules/shebang-command": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
+      "integrity": "sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==",
+      "dependencies": {
+        "shebang-regex": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/bin-build/node_modules/shebang-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
+      "integrity": "sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/bin-build/node_modules/which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "which": "bin/which"
+      }
+    },
+    "node_modules/bin-build/node_modules/yallist": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+      "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A=="
+    },
+    "node_modules/bin-check": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bin-check/-/bin-check-4.1.0.tgz",
+      "integrity": "sha512-b6weQyEUKsDGFlACWSIOfveEnImkJyK/FGW6FAG42loyoquvjdtOIqO6yBFzHyqyVVhNgNkQxxx09SFLK28YnA==",
+      "dependencies": {
+        "execa": "^0.7.0",
+        "executable": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/bin-check/node_modules/cross-spawn": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
+      "integrity": "sha512-pTgQJ5KC0d2hcY8eyL1IzlBPYjTkyH72XRZPnLyKus2mBfNjQs3klqbJU2VILqZryAZUt9JOb3h/mWMy23/f5A==",
+      "dependencies": {
+        "lru-cache": "^4.0.1",
+        "shebang-command": "^1.2.0",
+        "which": "^1.2.9"
+      }
+    },
+    "node_modules/bin-check/node_modules/execa": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz",
+      "integrity": "sha512-RztN09XglpYI7aBBrJCPW95jEH7YF1UEPOoX9yDhUTPdp7mK+CQvnLTuD10BNXZ3byLTu2uehZ8EcKT/4CGiFw==",
+      "dependencies": {
+        "cross-spawn": "^5.0.1",
+        "get-stream": "^3.0.0",
+        "is-stream": "^1.1.0",
+        "npm-run-path": "^2.0.0",
+        "p-finally": "^1.0.0",
+        "signal-exit": "^3.0.0",
+        "strip-eof": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/bin-check/node_modules/get-stream": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
+      "integrity": "sha512-GlhdIUuVakc8SJ6kK0zAFbiGzRFzNnY4jUuEbV9UROo4Y+0Ny4fjvcZFVTeDA4odpFyOQzaw6hXukJSq/f28sQ==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/bin-check/node_modules/is-stream": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+      "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/bin-check/node_modules/lru-cache": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
+      "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
+      "dependencies": {
+        "pseudomap": "^1.0.2",
+        "yallist": "^2.1.2"
+      }
+    },
+    "node_modules/bin-check/node_modules/npm-run-path": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
+      "integrity": "sha512-lJxZYlT4DW/bRUtFh1MQIWqmLwQfAxnqWG4HhEdjMlkrJYnJn0Jrr2u3mgxqaWsdiBc76TYkTG/mhrnYTuzfHw==",
+      "dependencies": {
+        "path-key": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/bin-check/node_modules/path-key": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
+      "integrity": "sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/bin-check/node_modules/shebang-command": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
+      "integrity": "sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==",
+      "dependencies": {
+        "shebang-regex": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/bin-check/node_modules/shebang-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
+      "integrity": "sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/bin-check/node_modules/which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "which": "bin/which"
+      }
+    },
+    "node_modules/bin-check/node_modules/yallist": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+      "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A=="
+    },
+    "node_modules/bin-version": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/bin-version/-/bin-version-3.1.0.tgz",
+      "integrity": "sha512-Mkfm4iE1VFt4xd4vH+gx+0/71esbfus2LsnCGe8Pi4mndSPyT+NGES/Eg99jx8/lUGWfu3z2yuB/bt5UB+iVbQ==",
+      "dependencies": {
+        "execa": "^1.0.0",
+        "find-versions": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/bin-version-check": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/bin-version-check/-/bin-version-check-4.0.0.tgz",
+      "integrity": "sha512-sR631OrhC+1f8Cvs8WyVWOA33Y8tgwjETNPyyD/myRBXLkfS/vl74FmH/lFcRl9KY3zwGh7jFhvyk9vV3/3ilQ==",
+      "dependencies": {
+        "bin-version": "^3.0.0",
+        "semver": "^5.6.0",
+        "semver-truncate": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/bin-version-check/node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/bin-version/node_modules/cross-spawn": {
+      "version": "6.0.5",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
+      "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+      "dependencies": {
+        "nice-try": "^1.0.4",
+        "path-key": "^2.0.1",
+        "semver": "^5.5.0",
         "shebang-command": "^1.2.0",
         "which": "^1.2.9"
       },
@@ -7254,6 +7307,25 @@
         "node": ">=6"
       }
     },
+    "node_modules/bin-version/node_modules/is-stream": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+      "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/bin-version/node_modules/npm-run-path": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
+      "integrity": "sha512-lJxZYlT4DW/bRUtFh1MQIWqmLwQfAxnqWG4HhEdjMlkrJYnJn0Jrr2u3mgxqaWsdiBc76TYkTG/mhrnYTuzfHw==",
+      "dependencies": {
+        "path-key": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/bin-version/node_modules/path-key": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
@@ -7475,44 +7547,14 @@
       }
     },
     "node_modules/bl": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/bl/-/bl-1.2.3.tgz",
-      "integrity": "sha512-pvcNpa0UU69UT341rO6AYy4FVAIkUHuZXRIWbq+zHnsVcRzDDjIAhGuuYoi0d//cwIwtt4pkpKycWEfjdV+vww==",
-      "dependencies": {
-        "readable-stream": "^2.3.5",
-        "safe-buffer": "^5.1.1"
-      }
-    },
-    "node_modules/bl/node_modules/isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="
-    },
-    "node_modules/bl/node_modules/readable-stream": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
-      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
-      "dependencies": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.3",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~2.0.0",
-        "safe-buffer": "~5.1.1",
-        "string_decoder": "~1.1.1",
-        "util-deprecate": "~1.0.1"
-      }
-    },
-    "node_modules/bl/node_modules/safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
-    },
-    "node_modules/bl/node_modules/string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "dev": true,
       "dependencies": {
-        "safe-buffer": "~5.1.0"
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
       }
     },
     "node_modules/body-parser": {
@@ -7548,18 +7590,6 @@
         "ms": "2.0.0"
       }
     },
-    "node_modules/body-parser/node_modules/iconv-lite": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-      "dev": true,
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/body-parser/node_modules/ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -7629,9 +7659,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.22.2",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.2.tgz",
-      "integrity": "sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==",
+      "version": "4.22.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.3.tgz",
+      "integrity": "sha512-UAp55yfwNv0klWNapjs/ktHoguxuQNGnOzxYmfnXIS+8AsRDZkSDxg7R1AX3GKzn078SBI5dzwzj/Yx0Or0e3A==",
       "dev": true,
       "funding": [
         {
@@ -7648,8 +7678,8 @@
         }
       ],
       "dependencies": {
-        "caniuse-lite": "^1.0.30001565",
-        "electron-to-chromium": "^1.4.601",
+        "caniuse-lite": "^1.0.30001580",
+        "electron-to-chromium": "^1.4.648",
         "node-releases": "^2.0.14",
         "update-browserslist-db": "^1.0.13"
       },
@@ -7873,9 +7903,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001579",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001579.tgz",
-      "integrity": "sha512-u5AUVkixruKHJjw/pj9wISlcMpgFWzSrczLZbrqBSxukQixmg0SJ5sZTpvaFvxU0HoQKd4yoyAogyrAz9pzJnA==",
+      "version": "1.0.30001583",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001583.tgz",
+      "integrity": "sha512-acWTYaha8xfhA/Du/z4sNZjHUWjkiuoAi2LM+T/aL+kemKQgPT1xBb/YKjlQ0Qo8gvbHsGNplrEJ+9G3gL7i4Q==",
       "dev": true,
       "funding": [
         {
@@ -7906,6 +7936,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/cdate": {
+      "version": "0.0.7",
+      "resolved": "https://registry.npmjs.org/cdate/-/cdate-0.0.7.tgz",
+      "integrity": "sha512-11EnUjVX6hwL0FcDNE2F0wh+0KnQieTfPUdPHNdQHbrvFdEbqfRULkA8nMcfT2tXCGw/ABRdYLqQ0SmbeWawTA=="
+    },
+    "node_modules/cdate-schedule": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/cdate-schedule/-/cdate-schedule-0.0.1.tgz",
+      "integrity": "sha512-rP6nydghUh/t+J1TQtT31RwZiNeXzkEAtpVzNjHQsf6n655dHeQD0LTxSZeR1QvKWajGvJ/W+TE5sdpch6+zqg=="
+    },
     "node_modules/chai": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/chai/-/chai-4.4.1.tgz",
@@ -7988,6 +8028,18 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/chownr": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
@@ -8331,9 +8383,9 @@
       "dev": true
     },
     "node_modules/core-js-compat": {
-      "version": "3.35.0",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.35.0.tgz",
-      "integrity": "sha512-5blwFAddknKeNgsjBzilkdQ0+YK8L1PfqPYq40NOYMYFSS38qj+hpTcLLWwpIwA2A5bje/x5jmVn2tzUMg9IVw==",
+      "version": "3.35.1",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.35.1.tgz",
+      "integrity": "sha512-sftHa5qUJY3rs9Zht1WEnmkvXputCyDBczPnr7QDgL8n3qrF3CMXY4VPSYtOLLiOUJcah2WNXREd48iOl6mQIw==",
       "dev": true,
       "dependencies": {
         "browserslist": "^4.22.2"
@@ -8385,6 +8437,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/css-mediaquery": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
+      "integrity": "sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==",
+      "dev": true
+    },
     "node_modules/css.escape": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
@@ -8439,30 +8497,6 @@
         "cytoscape": "^3.2.0"
       }
     },
-    "node_modules/cytoscape-fcose": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/cytoscape-fcose/-/cytoscape-fcose-2.2.0.tgz",
-      "integrity": "sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==",
-      "dependencies": {
-        "cose-base": "^2.2.0"
-      },
-      "peerDependencies": {
-        "cytoscape": "^3.2.0"
-      }
-    },
-    "node_modules/cytoscape-fcose/node_modules/cose-base": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/cose-base/-/cose-base-2.2.0.tgz",
-      "integrity": "sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==",
-      "dependencies": {
-        "layout-base": "^2.0.0"
-      }
-    },
-    "node_modules/cytoscape-fcose/node_modules/layout-base": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/layout-base/-/layout-base-2.0.1.tgz",
-      "integrity": "sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg=="
-    },
     "node_modules/d3": {
       "version": "7.8.5",
       "resolved": "https://registry.npmjs.org/d3/-/d3-7.8.5.tgz",
@@ -8630,6 +8664,17 @@
         "node": ">= 10"
       }
     },
+    "node_modules/d3-dsv/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/d3-ease": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
@@ -8976,6 +9021,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/decompress-tar/node_modules/is-stream": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+      "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/decompress-tarbz2": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/decompress-tarbz2/-/decompress-tarbz2-4.1.1.tgz",
@@ -8999,6 +9052,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/decompress-tarbz2/node_modules/is-stream": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+      "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/decompress-targz": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/decompress-targz/-/decompress-targz-4.1.1.tgz",
@@ -9020,6 +9081,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/decompress-targz/node_modules/is-stream": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+      "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/decompress-unzip": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/decompress-unzip/-/decompress-unzip-4.0.1.tgz",
@@ -9042,6 +9111,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/decompress-unzip/node_modules/get-stream": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-2.3.1.tgz",
+      "integrity": "sha512-AUGhbbemXxrZJRD5cDvKtQxLuYaIbNtDTK8YqupCI393Q2KSTreEsLUN3ZxAWFGiKTzL6nKuzfcIvieflUX9qA==",
+      "dependencies": {
+        "object-assign": "^4.0.1",
+        "pinkie-promise": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/decompress-unzip/node_modules/pify": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
@@ -9229,6 +9310,36 @@
         "node": ">=8"
       }
     },
+    "node_modules/del/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/del/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/del/node_modules/globby": {
       "version": "10.0.2",
       "resolved": "https://registry.npmjs.org/globby/-/globby-10.0.2.tgz",
@@ -9248,12 +9359,24 @@
         "node": ">=8"
       }
     },
+    "node_modules/del/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/delaunator": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.0.tgz",
-      "integrity": "sha512-AyLvtyJdbv/U1GkiS6gUUzclRoAY4Gs75qkMygJJhU75LW4DNuSF2RMzpxs9jw9Oz1BobHjTdkG3zdP55VxAqw==",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.1.tgz",
+      "integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==",
       "dependencies": {
-        "robust-predicates": "^3.0.0"
+        "robust-predicates": "^3.0.2"
       }
     },
     "node_modules/delayed-stream": {
@@ -9318,65 +9441,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/detect-package-manager/node_modules/execa": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
-      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
-      "dev": true,
-      "dependencies": {
-        "cross-spawn": "^7.0.3",
-        "get-stream": "^6.0.0",
-        "human-signals": "^2.1.0",
-        "is-stream": "^2.0.0",
-        "merge-stream": "^2.0.0",
-        "npm-run-path": "^4.0.1",
-        "onetime": "^5.1.2",
-        "signal-exit": "^3.0.3",
-        "strip-final-newline": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/execa?sponsor=1"
-      }
-    },
-    "node_modules/detect-package-manager/node_modules/get-stream": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/detect-package-manager/node_modules/is-stream": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
-      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/detect-package-manager/node_modules/npm-run-path": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
-      "dev": true,
-      "dependencies": {
-        "path-key": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/detect-port": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/detect-port/-/detect-port-1.5.1.tgz",
@@ -9439,14 +9503,14 @@
       "dev": true
     },
     "node_modules/dompurify": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.6.tgz",
-      "integrity": "sha512-ilkD8YEnnGh1zJ240uJsW7AzE+2qpbOUYjacomn3AvJ6J4JhKGSZ2nh4wUIXPZrEPppaCLx5jFe8T89Rk8tQ7w=="
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.8.tgz",
+      "integrity": "sha512-b7uwreMYL2eZhrSCRC4ahLTeZcPZxSmYfmcQGXGkXiZSNW1X85v+SDM5KsWcpivIiUBH47Ji7NtyUdpLeF5JZQ=="
     },
     "node_modules/dotenv": {
-      "version": "16.3.1",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz",
-      "integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==",
+      "version": "16.4.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.1.tgz",
+      "integrity": "sha512-CjA3y+Dr3FyFDOAMnxZEGtnW9KBR2M0JvvUtXNW+dYJL5ROWxP9DUHCwgFqpMk0OXCc0ljhaNTr2w/kutYIcHQ==",
       "dev": true,
       "engines": {
         "node": ">=12"
@@ -9601,15 +9665,15 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.639",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.639.tgz",
-      "integrity": "sha512-CkKf3ZUVZchr+zDpAlNLEEy2NJJ9T64ULWaDgy3THXXlPVPkLu3VOs9Bac44nebVtdwl2geSj6AxTtGDOxoXhg==",
+      "version": "1.4.656",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.656.tgz",
+      "integrity": "sha512-9AQB5eFTHyR3Gvt2t/NwR0le2jBSUNwCnMbUCejFWHD+so4tH40/dRLgoE+jxlPeWS43XJewyvCv+I8LPMl49Q==",
       "dev": true
     },
     "node_modules/elkjs": {
-      "version": "0.8.2",
-      "resolved": "https://registry.npmjs.org/elkjs/-/elkjs-0.8.2.tgz",
-      "integrity": "sha512-L6uRgvZTH+4OF5NE/MBbzQx/WYpru1xCBE9respNj6qznEewGUIfhzmm7horWWxbNO2M0WckQypGctR8lH79xQ=="
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/elkjs/-/elkjs-0.9.1.tgz",
+      "integrity": "sha512-JWKDyqAdltuUcyxaECtYG6H4sqysXSLeoXuGUBfRNESMTkj+w+qdb0jya8Z/WI0jVd03WQtCGhS6FOFtlhD5FQ=="
     },
     "node_modules/emoji-regex": {
       "version": "8.0.0",
@@ -9635,9 +9699,9 @@
       }
     },
     "node_modules/envinfo": {
-      "version": "7.11.0",
-      "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.11.0.tgz",
-      "integrity": "sha512-G9/6xF1FPbIw0TtalAMaVPpiq2aDEuKLXM314jPVAO9r2fo2a4BLqMNkmRS7O/xPPZ+COAhGIz3ETvHEV3eUcg==",
+      "version": "7.11.1",
+      "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.11.1.tgz",
+      "integrity": "sha512-8PiZgZNIB4q/Lw4AhOvAfB/ityHAd2bli3lESSWmWSzSsl5dKpy5N1d1Rfkd2teq/g9xN90lc6o98DOjMeYHpg==",
       "dev": true,
       "bin": {
         "envinfo": "dist/cli.js"
@@ -9797,9 +9861,9 @@
       }
     },
     "node_modules/esbuild": {
-      "version": "0.15.18",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.15.18.tgz",
-      "integrity": "sha512-x/R72SmW3sSFRm5zrrIjAhCeQSAWoni3CmHEqfQrZIQTM3lVCdehdwuIqaOtfC2slvpdlLa62GYoN8SxT23m6Q==",
+      "version": "0.18.20",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
+      "integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==",
       "dev": true,
       "hasInstallScript": true,
       "bin": {
@@ -9809,28 +9873,28 @@
         "node": ">=12"
       },
       "optionalDependencies": {
-        "@esbuild/android-arm": "0.15.18",
-        "@esbuild/linux-loong64": "0.15.18",
-        "esbuild-android-64": "0.15.18",
-        "esbuild-android-arm64": "0.15.18",
-        "esbuild-darwin-64": "0.15.18",
-        "esbuild-darwin-arm64": "0.15.18",
-        "esbuild-freebsd-64": "0.15.18",
-        "esbuild-freebsd-arm64": "0.15.18",
-        "esbuild-linux-32": "0.15.18",
-        "esbuild-linux-64": "0.15.18",
-        "esbuild-linux-arm": "0.15.18",
-        "esbuild-linux-arm64": "0.15.18",
-        "esbuild-linux-mips64le": "0.15.18",
-        "esbuild-linux-ppc64le": "0.15.18",
-        "esbuild-linux-riscv64": "0.15.18",
-        "esbuild-linux-s390x": "0.15.18",
-        "esbuild-netbsd-64": "0.15.18",
-        "esbuild-openbsd-64": "0.15.18",
-        "esbuild-sunos-64": "0.15.18",
-        "esbuild-windows-32": "0.15.18",
-        "esbuild-windows-64": "0.15.18",
-        "esbuild-windows-arm64": "0.15.18"
+        "@esbuild/android-arm": "0.18.20",
+        "@esbuild/android-arm64": "0.18.20",
+        "@esbuild/android-x64": "0.18.20",
+        "@esbuild/darwin-arm64": "0.18.20",
+        "@esbuild/darwin-x64": "0.18.20",
+        "@esbuild/freebsd-arm64": "0.18.20",
+        "@esbuild/freebsd-x64": "0.18.20",
+        "@esbuild/linux-arm": "0.18.20",
+        "@esbuild/linux-arm64": "0.18.20",
+        "@esbuild/linux-ia32": "0.18.20",
+        "@esbuild/linux-loong64": "0.18.20",
+        "@esbuild/linux-mips64el": "0.18.20",
+        "@esbuild/linux-ppc64": "0.18.20",
+        "@esbuild/linux-riscv64": "0.18.20",
+        "@esbuild/linux-s390x": "0.18.20",
+        "@esbuild/linux-x64": "0.18.20",
+        "@esbuild/netbsd-x64": "0.18.20",
+        "@esbuild/openbsd-x64": "0.18.20",
+        "@esbuild/sunos-x64": "0.18.20",
+        "@esbuild/win32-arm64": "0.18.20",
+        "@esbuild/win32-ia32": "0.18.20",
+        "@esbuild/win32-x64": "0.18.20"
       }
     },
     "node_modules/esbuild-android-64": {
@@ -10187,11 +10251,15 @@
       "dev": true
     },
     "node_modules/escape-string-regexp": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
       "engines": {
-        "node": ">=0.8.0"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/escodegen": {
@@ -10963,40 +11031,16 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true
-    },
-    "node_modules/eslint/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/eslint/node_modules/escape-string-regexp": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
-      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/eslint/node_modules/glob-parent": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
-      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true
+    },
+    "node_modules/eslint/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
       "dev": true,
       "dependencies": {
-        "is-glob": "^4.0.3"
-      },
-      "engines": {
-        "node": ">=10.13.0"
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
       }
     },
     "node_modules/eslint/node_modules/globals": {
@@ -11067,6 +11111,18 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/espree/node_modules/acorn": {
+      "version": "8.11.3",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
+      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/esprima": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
@@ -11152,26 +11208,26 @@
         "node": ">=4"
       }
     },
-    "node_modules/exec-buffer/node_modules/pify": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-      "integrity": "sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==",
-      "engines": {
-        "node": ">=4"
+    "node_modules/exec-buffer/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
       }
     },
-    "node_modules/exec-buffer/node_modules/rimraf": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+    "node_modules/exec-buffer/node_modules/cross-spawn": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
+      "integrity": "sha512-pTgQJ5KC0d2hcY8eyL1IzlBPYjTkyH72XRZPnLyKus2mBfNjQs3klqbJU2VILqZryAZUt9JOb3h/mWMy23/f5A==",
       "dependencies": {
-        "glob": "^7.1.3"
-      },
-      "bin": {
-        "rimraf": "bin.js"
+        "lru-cache": "^4.0.1",
+        "shebang-command": "^1.2.0",
+        "which": "^1.2.9"
       }
     },
-    "node_modules/execa": {
+    "node_modules/exec-buffer/node_modules/execa": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz",
       "integrity": "sha512-RztN09XglpYI7aBBrJCPW95jEH7YF1UEPOoX9yDhUTPdp7mK+CQvnLTuD10BNXZ3byLTu2uehZ8EcKT/4CGiFw==",
@@ -11188,17 +11244,7 @@
         "node": ">=4"
       }
     },
-    "node_modules/execa/node_modules/cross-spawn": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
-      "integrity": "sha512-pTgQJ5KC0d2hcY8eyL1IzlBPYjTkyH72XRZPnLyKus2mBfNjQs3klqbJU2VILqZryAZUt9JOb3h/mWMy23/f5A==",
-      "dependencies": {
-        "lru-cache": "^4.0.1",
-        "shebang-command": "^1.2.0",
-        "which": "^1.2.9"
-      }
-    },
-    "node_modules/execa/node_modules/get-stream": {
+    "node_modules/exec-buffer/node_modules/get-stream": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
       "integrity": "sha512-GlhdIUuVakc8SJ6kK0zAFbiGzRFzNnY4jUuEbV9UROo4Y+0Ny4fjvcZFVTeDA4odpFyOQzaw6hXukJSq/f28sQ==",
@@ -11206,7 +11252,34 @@
         "node": ">=4"
       }
     },
-    "node_modules/execa/node_modules/lru-cache": {
+    "node_modules/exec-buffer/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/exec-buffer/node_modules/is-stream": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+      "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/exec-buffer/node_modules/lru-cache": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
       "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
@@ -11215,7 +11288,56 @@
         "yallist": "^2.1.2"
       }
     },
-    "node_modules/execa/node_modules/shebang-command": {
+    "node_modules/exec-buffer/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/exec-buffer/node_modules/npm-run-path": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
+      "integrity": "sha512-lJxZYlT4DW/bRUtFh1MQIWqmLwQfAxnqWG4HhEdjMlkrJYnJn0Jrr2u3mgxqaWsdiBc76TYkTG/mhrnYTuzfHw==",
+      "dependencies": {
+        "path-key": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/exec-buffer/node_modules/path-key": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
+      "integrity": "sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/exec-buffer/node_modules/pify": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+      "integrity": "sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/exec-buffer/node_modules/rimraf": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
+    "node_modules/exec-buffer/node_modules/shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
       "integrity": "sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==",
@@ -11226,7 +11348,7 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/execa/node_modules/shebang-regex": {
+    "node_modules/exec-buffer/node_modules/shebang-regex": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
       "integrity": "sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==",
@@ -11234,7 +11356,7 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/execa/node_modules/which": {
+    "node_modules/exec-buffer/node_modules/which": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
       "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
@@ -11245,11 +11367,34 @@
         "which": "bin/which"
       }
     },
-    "node_modules/execa/node_modules/yallist": {
+    "node_modules/exec-buffer/node_modules/yallist": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
       "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A=="
     },
+    "node_modules/execa": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
+      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^6.0.0",
+        "human-signals": "^2.1.0",
+        "is-stream": "^2.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^4.0.1",
+        "onetime": "^5.1.2",
+        "signal-exit": "^3.0.3",
+        "strip-final-newline": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
     "node_modules/executable": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/executable/-/executable-4.1.1.tgz",
@@ -11269,10 +11414,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/exporter": {
-      "resolved": "../exporter",
-      "link": true
-    },
     "node_modules/express": {
       "version": "4.18.2",
       "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
@@ -11425,6 +11566,17 @@
         "node": ">=8.6.0"
       }
     },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -11438,9 +11590,9 @@
       "dev": true
     },
     "node_modules/fastq": {
-      "version": "1.16.0",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.16.0.tgz",
-      "integrity": "sha512-ifCoaXsDrsdkWTtiNJX5uzHDsrck5TzfKKDcuFFTIrrc/BS076qgEIfoIy1VeZqViznfKiysPYTh/QeHtnIsYA==",
+      "version": "1.17.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.0.tgz",
+      "integrity": "sha512-zGygtijUMT7jnk3h26kUms3BkSDp4IfIKjmnqI2tvx6nuBfiF1UqOxbnLfzdv+apBy+53oaImsKtMw/xYbW+1w==",
       "dependencies": {
         "reusify": "^1.0.4"
       }
@@ -11714,14 +11866,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/find-versions/node_modules/semver-regex": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/semver-regex/-/semver-regex-2.0.0.tgz",
-      "integrity": "sha512-mUdIBBvdn0PLOeP3TEkMH7HHeUP3GjsXCwKarjv/kGmUFOYg1VqEemKhoQpWMu6X2I8kHeuVdGibLGkVK+/5Qw==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/flat-cache": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
@@ -11743,9 +11887,9 @@
       "dev": true
     },
     "node_modules/flow-parser": {
-      "version": "0.227.0",
-      "resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.227.0.tgz",
-      "integrity": "sha512-nOygtGKcX/siZK/lFzpfdHEfOkfGcTW7rNroR1Zsz6T/JxSahPALXVt5qVHq/fgvMJuv096BTKbgxN3PzVBaDA==",
+      "version": "0.228.0",
+      "resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.228.0.tgz",
+      "integrity": "sha512-xPWkzCO07AnS8X+fQFpWm+tJ+C7aeaiVzJ+rSepbkCXUvUJ6l6squEl63axoMcixyH4wLjmypOzq/+zTD0O93w==",
       "dev": true,
       "engines": {
         "node": ">=0.4.0"
@@ -12048,15 +12192,15 @@
       }
     },
     "node_modules/get-stream": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-2.3.1.tgz",
-      "integrity": "sha512-AUGhbbemXxrZJRD5cDvKtQxLuYaIbNtDTK8YqupCI393Q2KSTreEsLUN3ZxAWFGiKTzL6nKuzfcIvieflUX9qA==",
-      "dependencies": {
-        "object-assign": "^4.0.1",
-        "pinkie-promise": "^2.0.0"
-      },
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+      "dev": true,
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/get-symbol-description": {
@@ -12114,52 +12258,34 @@
       "dev": true
     },
     "node_modules/glob": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
+      "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
+      "dev": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
         "inherits": "2",
-        "minimatch": "^3.1.1",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
+        "minimatch": "^5.0.1",
+        "once": "^1.3.0"
       },
       "engines": {
-        "node": "*"
+        "node": ">=12"
       },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
       }
     },
     "node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/glob-promise": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/glob-promise/-/glob-promise-4.2.2.tgz",
-      "integrity": "sha512-xcUzJ8NWN5bktoTIX7eOclO1Npxd/dyVqUJxlLIDasT4C7KZyqlPIwkdJ0Ypiy3p2ZKahTjK4M9uC3sNSfNMzw==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
       "dev": true,
       "dependencies": {
-        "@types/glob": "^7.1.3"
+        "is-glob": "^4.0.3"
       },
       "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "type": "individual",
-        "url": "https://github.com/sponsors/ahmadnassri"
-      },
-      "peerDependencies": {
-        "glob": "^7.1.6"
+        "node": ">=10.13.0"
       }
     },
     "node_modules/glob-to-regexp": {
@@ -12168,24 +12294,16 @@
       "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
       "dev": true
     },
-    "node_modules/glob/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
     "node_modules/glob/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
+      "dev": true,
       "dependencies": {
-        "brace-expansion": "^1.1.7"
+        "brace-expansion": "^2.0.1"
       },
       "engines": {
-        "node": "*"
+        "node": ">=10"
       }
     },
     "node_modules/globals": {
@@ -12276,6 +12394,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/got/node_modules/is-stream": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+      "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -12399,12 +12525,12 @@
       }
     },
     "node_modules/has-tostringtag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
-      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
       "dev": true,
       "dependencies": {
-        "has-symbols": "^1.0.2"
+        "has-symbols": "^1.0.3"
       },
       "engines": {
         "node": ">= 0.4"
@@ -12493,11 +12619,12 @@
       }
     },
     "node_modules/iconv-lite": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dev": true,
       "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3.0.0"
+        "safer-buffer": ">= 2.1.2 < 3"
       },
       "engines": {
         "node": ">=0.10.0"
@@ -12523,9 +12650,9 @@
       ]
     },
     "node_modules/ignore": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.0.tgz",
-      "integrity": "sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==",
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
+      "integrity": "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==",
       "engines": {
         "node": ">= 4"
       }
@@ -12815,14 +12942,16 @@
       }
     },
     "node_modules/is-array-buffer": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
-      "integrity": "sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==",
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz",
+      "integrity": "sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==",
       "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.2.0",
-        "is-typed-array": "^1.1.10"
+        "get-intrinsic": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -13231,11 +13360,15 @@
       }
     },
     "node_modules/is-stream": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
-      "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+      "dev": true,
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/is-string": {
@@ -13269,12 +13402,12 @@
       }
     },
     "node_modules/is-typed-array": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.12.tgz",
-      "integrity": "sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==",
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.13.tgz",
+      "integrity": "sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==",
       "dev": true,
       "dependencies": {
-        "which-typed-array": "^1.1.11"
+        "which-typed-array": "^1.1.14"
       },
       "engines": {
         "node": ">= 0.4"
@@ -13779,9 +13912,10 @@
       }
     },
     "node_modules/kleur": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
-      "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
+      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
+      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -13934,9 +14068,9 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.5",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",
-      "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==",
+      "version": "0.30.6",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.6.tgz",
+      "integrity": "sha512-n62qCLbPjNjyo+owKtveQxZFZTBm+Ms6YoGD23Wew6Vw337PElFNifQpknPruVRQV57kVShPnLGo9vWxVhpPvA==",
       "dev": true,
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.4.15"
@@ -13982,9 +14116,9 @@
       "dev": true
     },
     "node_modules/markdown-to-jsx": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.4.0.tgz",
-      "integrity": "sha512-zilc+MIkVVXPyTb4iIUTIz9yyqfcWjszGXnwF9K/aiBWcHXFcmdEMTkG01/oQhwSCH7SY1BnG6+ev5BzWmbPrg==",
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.4.1.tgz",
+      "integrity": "sha512-GbrbkTnHp9u6+HqbPRFJbObi369AgJNXi/sGqq5HRsoZW063xR1XDCaConqq+whfEIAlzB1YPnOgsPc7B7bc/A==",
       "dev": true,
       "engines": {
         "node": ">= 10"
@@ -14080,22 +14214,21 @@
       }
     },
     "node_modules/mermaid": {
-      "version": "10.6.1",
-      "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-10.6.1.tgz",
-      "integrity": "sha512-Hky0/RpOw/1il9X8AvzOEChfJtVvmXm+y7JML5C//ePYMy0/9jCEmW1E1g86x9oDfW9+iVEdTV/i+M6KWRNs4A==",
+      "version": "10.8.0",
+      "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-10.8.0.tgz",
+      "integrity": "sha512-9CzfSreRjdDJxX796+jW4zjEq0DVw5xVF0nWsqff8OTbrt+ml0TZ5PyYUjjUZJa2NYxYJZZXewEquxGiM8qZEA==",
       "dependencies": {
         "@braintree/sanitize-url": "^6.0.1",
         "@types/d3-scale": "^4.0.3",
         "@types/d3-scale-chromatic": "^3.0.0",
-        "cytoscape": "^3.23.0",
+        "cytoscape": "^3.28.1",
         "cytoscape-cose-bilkent": "^4.1.0",
-        "cytoscape-fcose": "^2.1.0",
         "d3": "^7.4.0",
         "d3-sankey": "^0.12.3",
         "dagre-d3-es": "7.0.10",
         "dayjs": "^1.11.7",
         "dompurify": "^3.0.5",
-        "elkjs": "^0.8.2",
+        "elkjs": "^0.9.0",
         "khroma": "^2.0.0",
         "lodash-es": "^4.17.21",
         "mdast-util-from-markdown": "^1.3.0",
@@ -14904,33 +15037,26 @@
       }
     },
     "node_modules/npm-run-path": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
-      "integrity": "sha512-lJxZYlT4DW/bRUtFh1MQIWqmLwQfAxnqWG4HhEdjMlkrJYnJn0Jrr2u3mgxqaWsdiBc76TYkTG/mhrnYTuzfHw==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+      "dev": true,
       "dependencies": {
-        "path-key": "^2.0.0"
+        "path-key": "^3.0.0"
       },
       "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/npm-run-path/node_modules/path-key": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
-      "integrity": "sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==",
-      "engines": {
-        "node": ">=4"
+        "node": ">=8"
       }
     },
     "node_modules/nypm": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/nypm/-/nypm-0.3.4.tgz",
-      "integrity": "sha512-1JLkp/zHBrkS3pZ692IqOaIKSYHmQXgqfELk6YTOfVBnwealAmPA1q2kKK7PHJAHSMBozerThEFZXP3G6o7Ukg==",
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/nypm/-/nypm-0.3.6.tgz",
+      "integrity": "sha512-2CATJh3pd6CyNfU5VZM7qSwFu0ieyabkEdnogE30Obn1czrmOYiZ8DOZLe1yBdLKWoyD3Mcy2maUs+0MR3yVjQ==",
       "dev": true,
       "dependencies": {
         "citty": "^0.1.5",
         "execa": "^8.0.1",
-        "pathe": "^1.1.1",
+        "pathe": "^1.1.2",
         "ufo": "^1.3.2"
       },
       "bin": {
@@ -15314,17 +15440,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/ora/node_modules/bl": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
-      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
-      "dev": true,
-      "dependencies": {
-        "buffer": "^5.5.0",
-        "inherits": "^2.0.4",
-        "readable-stream": "^3.4.0"
-      }
-    },
     "node_modules/os-filter-obj": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/os-filter-obj/-/os-filter-obj-2.0.0.tgz",
@@ -15557,9 +15672,9 @@
       }
     },
     "node_modules/path-scurry/node_modules/lru-cache": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.1.0.tgz",
-      "integrity": "sha512-/1clY/ui8CzjKFyjdvwPWJUYKiFVXG2I2cY0ssG7h4+hwk+XOIX7ZSG9Q7TW8TW3Kp3BUSqgFWBLgL4PJ+Blag==",
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.0.tgz",
+      "integrity": "sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==",
       "dev": true,
       "engines": {
         "node": "14 || >=16.14"
@@ -15688,9 +15803,9 @@
       }
     },
     "node_modules/polished": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/polished/-/polished-4.2.2.tgz",
-      "integrity": "sha512-Sz2Lkdxz6F2Pgnpi9U5Ng/WdWAUZxmHrNPoVlm3aAemxoy2Qy7LGjQg4uf8qKelDAUW94F4np3iH2YPf2qefcQ==",
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/polished/-/polished-4.3.1.tgz",
+      "integrity": "sha512-OBatVyC/N7SCW/FaDHrSd+vn0o5cS855TOmYi4OkdWUMSJCET/xip//ch8xGUvtr3i44X9LVyWwQlRMTN3pwSA==",
       "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.17.8"
@@ -15728,6 +15843,12 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -15839,15 +15960,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/prompts/node_modules/kleur": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
-      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -15954,6 +16066,36 @@
         "node": ">=8.16.0"
       }
     },
+    "node_modules/puppeteer-core/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/puppeteer-core/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/puppeteer-core/node_modules/mime": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/mime/-/mime-2.6.0.tgz",
@@ -15966,6 +16108,18 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/puppeteer-core/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/puppeteer-core/node_modules/rimraf": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
@@ -16090,18 +16244,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/raw-body/node_modules/iconv-lite": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-      "dev": true,
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/react": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@@ -16737,15 +16879,57 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/rimraf/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/rimraf/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/rimraf/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/robust-predicates": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
       "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="
     },
     "node_modules/rollup": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.9.5.tgz",
-      "integrity": "sha512-E4vQW0H/mbNMw2yLSqJyjtkHY9dslf/p0zuT1xehNRqUTBOFMqEjguDvqhXr7N7r/4ttb2jr4T41d3dncmIgbQ==",
+      "version": "4.9.6",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.9.6.tgz",
+      "integrity": "sha512-05lzkCS2uASX0CiLFybYfVkwNbKZG5NFQ6Go0VWyogFTXXbR039UVsegViTntkk4OglHBdF54ccApXRRuXRbsg==",
       "dev": true,
       "dependencies": {
         "@types/estree": "1.0.5"
@@ -16758,19 +16942,19 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.9.5",
-        "@rollup/rollup-android-arm64": "4.9.5",
-        "@rollup/rollup-darwin-arm64": "4.9.5",
-        "@rollup/rollup-darwin-x64": "4.9.5",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.9.5",
-        "@rollup/rollup-linux-arm64-gnu": "4.9.5",
-        "@rollup/rollup-linux-arm64-musl": "4.9.5",
-        "@rollup/rollup-linux-riscv64-gnu": "4.9.5",
-        "@rollup/rollup-linux-x64-gnu": "4.9.5",
-        "@rollup/rollup-linux-x64-musl": "4.9.5",
-        "@rollup/rollup-win32-arm64-msvc": "4.9.5",
-        "@rollup/rollup-win32-ia32-msvc": "4.9.5",
-        "@rollup/rollup-win32-x64-msvc": "4.9.5",
+        "@rollup/rollup-android-arm-eabi": "4.9.6",
+        "@rollup/rollup-android-arm64": "4.9.6",
+        "@rollup/rollup-darwin-arm64": "4.9.6",
+        "@rollup/rollup-darwin-x64": "4.9.6",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.9.6",
+        "@rollup/rollup-linux-arm64-gnu": "4.9.6",
+        "@rollup/rollup-linux-arm64-musl": "4.9.6",
+        "@rollup/rollup-linux-riscv64-gnu": "4.9.6",
+        "@rollup/rollup-linux-x64-gnu": "4.9.6",
+        "@rollup/rollup-linux-x64-musl": "4.9.6",
+        "@rollup/rollup-win32-arm64-msvc": "4.9.6",
+        "@rollup/rollup-win32-ia32-msvc": "4.9.6",
+        "@rollup/rollup-win32-x64-msvc": "4.9.6",
         "fsevents": "~2.3.2"
       }
     },
@@ -16964,6 +17148,14 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/semver-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/semver-regex/-/semver-regex-2.0.0.tgz",
+      "integrity": "sha512-mUdIBBvdn0PLOeP3TEkMH7HHeUP3GjsXCwKarjv/kGmUFOYg1VqEemKhoQpWMu6X2I8kHeuVdGibLGkVK+/5Qw==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/semver-truncate": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/semver-truncate/-/semver-truncate-1.1.2.tgz",
@@ -17232,9 +17424,9 @@
       }
     },
     "node_modules/spdx-exceptions": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
-      "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.4.0.tgz",
+      "integrity": "sha512-hcjppoJ68fhxA/cjbN4T8N6uCUejN8yFw69ttpqtBeCbF3u13n7mb31NB9jKwGTTWWnt9IbRA/mf1FprYS8wfw==",
       "dev": true
     },
     "node_modules/spdx-expression-parse": {
@@ -17287,12 +17479,12 @@
       "dev": true
     },
     "node_modules/storybook": {
-      "version": "7.6.10",
-      "resolved": "https://registry.npmjs.org/storybook/-/storybook-7.6.10.tgz",
-      "integrity": "sha512-ypFeGhQTUBBfqSUVZYh7wS5ghn3O2wILCiQc4459SeUpvUn+skcqw/TlrwGSoF5EWjDA7gtRrWDxO3mnlPt5Cw==",
+      "version": "7.6.12",
+      "resolved": "https://registry.npmjs.org/storybook/-/storybook-7.6.12.tgz",
+      "integrity": "sha512-zcH9CwIsE8N4PX3he5vaJ3mTTWGxu7cxJ/ag9oja/k3N5/IvQjRyIU1TLkRVb28BB8gaLyorpnc4C4aLVGy4WQ==",
       "dev": true,
       "dependencies": {
-        "@storybook/cli": "7.6.10"
+        "@storybook/cli": "7.6.12"
       },
       "bin": {
         "sb": "index.js",
@@ -17303,34 +17495,6 @@
         "url": "https://opencollective.com/storybook"
       }
     },
-    "node_modules/storybook-dark-mode": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/storybook-dark-mode/-/storybook-dark-mode-3.0.3.tgz",
-      "integrity": "sha512-ZLBLVpkuKTdtUv3DTuOjeP/bE7DHhOxVpDROKc0NtEYq9JHLUu6z05LLZinE3v6QPXQZ9TMQPm3Xe/0BcLEZlw==",
-      "dev": true,
-      "dependencies": {
-        "@storybook/addons": "^7.0.0",
-        "@storybook/components": "^7.0.0",
-        "@storybook/core-events": "^7.0.0",
-        "@storybook/global": "^5.0.0",
-        "@storybook/manager-api": "^7.0.0",
-        "@storybook/theming": "^7.0.0",
-        "fast-deep-equal": "^3.1.3",
-        "memoizerific": "^1.11.3"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "react": {
-          "optional": true
-        },
-        "react-dom": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/stream-shift": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.3.tgz",
@@ -17557,6 +17721,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/strip-outer/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/strtok3": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/strtok3/-/strtok3-7.0.0.tgz",
@@ -17573,6 +17745,12 @@
         "url": "https://github.com/sponsors/Borewit"
       }
     },
+    "node_modules/styleq": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/styleq/-/styleq-0.1.3.tgz",
+      "integrity": "sha512-3ZUifmCDCQanjeej1f6kyl/BeP/Vae5EYkQ9iJfUm/QwZvlgnZzyflqAsAWYURdtea8Vkvswu2GrC57h3qffcA==",
+      "dev": true
+    },
     "node_modules/stylis": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.1.tgz",
@@ -17637,17 +17815,6 @@
         "tar-stream": "^2.1.4"
       }
     },
-    "node_modules/tar-fs/node_modules/bl": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
-      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
-      "dev": true,
-      "dependencies": {
-        "buffer": "^5.5.0",
-        "inherits": "^2.0.4",
-        "readable-stream": "^3.4.0"
-      }
-    },
     "node_modules/tar-fs/node_modules/chownr": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
@@ -17687,6 +17854,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/tar-stream/node_modules/bl": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-1.2.3.tgz",
+      "integrity": "sha512-pvcNpa0UU69UT341rO6AYy4FVAIkUHuZXRIWbq+zHnsVcRzDDjIAhGuuYoi0d//cwIwtt4pkpKycWEfjdV+vww==",
+      "dependencies": {
+        "readable-stream": "^2.3.5",
+        "safe-buffer": "^5.1.1"
+      }
+    },
     "node_modules/tar-stream/node_modules/isarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
@@ -17752,18 +17928,60 @@
       "integrity": "sha512-s0ZZzd0BzYv5tLSptZooSjK8oj6C+c19p7Vqta9+6NPOf7r+fxq0cJe6/oN4LTC79sy5NY8ucOJNgwsKCSbfqg==",
       "dev": true,
       "dependencies": {
-        "rimraf": "~2.6.2"
+        "rimraf": "~2.6.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/temp-dir": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-1.0.0.tgz",
+      "integrity": "sha512-xZFXEGbG7SNC3itwBzI3RYjq/cEhBkx2hJuKGIUOcEULmkQExXiHat2z/qkISYsuR+IKumhEfKKbV5qXmhICFQ==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/temp/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/temp/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
       },
       "engines": {
-        "node": ">=6.0.0"
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/temp-dir": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-1.0.0.tgz",
-      "integrity": "sha512-xZFXEGbG7SNC3itwBzI3RYjq/cEhBkx2hJuKGIUOcEULmkQExXiHat2z/qkISYsuR+IKumhEfKKbV5qXmhICFQ==",
+    "node_modules/temp/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
       "engines": {
-        "node": ">=4"
+        "node": "*"
       }
     },
     "node_modules/temp/node_modules/rimraf": {
@@ -17840,18 +18058,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/tempy/node_modules/is-stream": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
-      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/tempy/node_modules/p-map": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
@@ -17906,6 +18112,18 @@
         "node": ">=10"
       }
     },
+    "node_modules/terser/node_modules/acorn": {
+      "version": "8.11.3",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
+      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/terser/node_modules/commander": {
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
@@ -17936,6 +18154,26 @@
         "concat-map": "0.0.1"
       }
     },
+    "node_modules/test-exclude/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/test-exclude/node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -18127,6 +18365,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/trim-repeated/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/ts-api-utils": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.0.3.tgz",
@@ -18190,6 +18436,27 @@
         }
       }
     },
+    "node_modules/ts-node/node_modules/acorn": {
+      "version": "8.11.3",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
+      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/ts-node/node_modules/acorn-walk": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.2.tgz",
+      "integrity": "sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
@@ -18235,6 +18502,75 @@
         "node": ">=12"
       }
     },
+    "node_modules/tsm/node_modules/@esbuild/android-arm": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.15.18.tgz",
+      "integrity": "sha512-5GT+kcs2WVGjVs7+boataCkO5Fg0y4kCjzkB5bAip7H4jfnOS3dA6KPiww9W1OEKTKeAcUVhdZGvgI65OXmUnw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/tsm/node_modules/@esbuild/linux-loong64": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.15.18.tgz",
+      "integrity": "sha512-L4jVKS82XVhw2nvzLg/19ClLWg0y27ulRwuP7lcyL6AbUWB5aPglXY3M21mauDQMDfRLs8cQmeT03r/+X3cZYQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/tsm/node_modules/esbuild": {
+      "version": "0.15.18",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.15.18.tgz",
+      "integrity": "sha512-x/R72SmW3sSFRm5zrrIjAhCeQSAWoni3CmHEqfQrZIQTM3lVCdehdwuIqaOtfC2slvpdlLa62GYoN8SxT23m6Q==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/android-arm": "0.15.18",
+        "@esbuild/linux-loong64": "0.15.18",
+        "esbuild-android-64": "0.15.18",
+        "esbuild-android-arm64": "0.15.18",
+        "esbuild-darwin-64": "0.15.18",
+        "esbuild-darwin-arm64": "0.15.18",
+        "esbuild-freebsd-64": "0.15.18",
+        "esbuild-freebsd-arm64": "0.15.18",
+        "esbuild-linux-32": "0.15.18",
+        "esbuild-linux-64": "0.15.18",
+        "esbuild-linux-arm": "0.15.18",
+        "esbuild-linux-arm64": "0.15.18",
+        "esbuild-linux-mips64le": "0.15.18",
+        "esbuild-linux-ppc64le": "0.15.18",
+        "esbuild-linux-riscv64": "0.15.18",
+        "esbuild-linux-s390x": "0.15.18",
+        "esbuild-netbsd-64": "0.15.18",
+        "esbuild-openbsd-64": "0.15.18",
+        "esbuild-sunos-64": "0.15.18",
+        "esbuild-windows-32": "0.15.18",
+        "esbuild-windows-64": "0.15.18",
+        "esbuild-windows-arm64": "0.15.18"
+      }
+    },
     "node_modules/tsutils": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
@@ -18584,6 +18920,18 @@
         "webpack-virtual-modules": "^0.6.1"
       }
     },
+    "node_modules/unplugin/node_modules/acorn": {
+      "version": "8.11.3",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
+      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/untildify": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/untildify/-/untildify-4.0.0.tgz",
@@ -18725,6 +19073,15 @@
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
+    "node_modules/utility-types": {
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.11.0.tgz",
+      "integrity": "sha512-6Z7Ma2aVEWisaL6TvBCy7P8rm2LQoPv6dJ7ecIaIixHcwfbJ0x7mWdbcwlIM5IGQxPZSFYeqRCqlOOeKoJYMkw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/utils-merge": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
@@ -18771,6 +19128,14 @@
         "node": ">=0.3.1"
       }
     },
+    "node_modules/uvu/node_modules/kleur": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
+      "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/v8-compile-cache-lib": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
@@ -18797,9 +19162,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "4.5.1",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.1.tgz",
-      "integrity": "sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==",
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.2.tgz",
+      "integrity": "sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==",
       "dev": true,
       "peer": true,
       "dependencies": {
@@ -18852,77 +19217,26 @@
         }
       }
     },
-    "node_modules/vite/node_modules/@esbuild/android-arm": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.18.20.tgz",
-      "integrity": "sha512-fyi7TDI/ijKKNZTUJAQqiG5T7YjJXgnzkURqmGj13C6dCqckZBLdl4h7bkhHt/t0WP+zO9/zwroDvANaOqO5Sw==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/vite/node_modules/@esbuild/linux-loong64": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz",
-      "integrity": "sha512-nXW8nqBTrOpDLPgPY9uV+/1DjxoQ7DoB2N8eocyq8I9XuqJ7BiAMDMf9n1xZM9TgW0J8zrquIb/A7s3BJv7rjg==",
-      "cpu": [
-        "loong64"
-      ],
+    "node_modules/vite-plugin-stylex-dev": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/vite-plugin-stylex-dev/-/vite-plugin-stylex-dev-0.2.5.tgz",
+      "integrity": "sha512-FGx4HZSjIenZIpJOmvule1sS3OcXmaVOv9E5nNK/0sXunsAqQuAiJ7UJQwb+FI53FtEgGpuum5rpDn6v2LpNnQ==",
       "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">=12"
+      "dependencies": {
+        "@babel/core": "^7.23.6",
+        "@babel/plugin-syntax-flow": "^7.23.3",
+        "@babel/plugin-syntax-jsx": "^7.23.3",
+        "@babel/plugin-syntax-typescript": "^7.23.3",
+        "@stylexjs/babel-plugin": "^0.4.1",
+        "es-module-lexer": "^1.4.1",
+        "magic-string": "^0.30.5"
       }
     },
-    "node_modules/vite/node_modules/esbuild": {
-      "version": "0.18.20",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
-      "integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==",
-      "dev": true,
-      "hasInstallScript": true,
-      "peer": true,
-      "bin": {
-        "esbuild": "bin/esbuild"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "optionalDependencies": {
-        "@esbuild/android-arm": "0.18.20",
-        "@esbuild/android-arm64": "0.18.20",
-        "@esbuild/android-x64": "0.18.20",
-        "@esbuild/darwin-arm64": "0.18.20",
-        "@esbuild/darwin-x64": "0.18.20",
-        "@esbuild/freebsd-arm64": "0.18.20",
-        "@esbuild/freebsd-x64": "0.18.20",
-        "@esbuild/linux-arm": "0.18.20",
-        "@esbuild/linux-arm64": "0.18.20",
-        "@esbuild/linux-ia32": "0.18.20",
-        "@esbuild/linux-loong64": "0.18.20",
-        "@esbuild/linux-mips64el": "0.18.20",
-        "@esbuild/linux-ppc64": "0.18.20",
-        "@esbuild/linux-riscv64": "0.18.20",
-        "@esbuild/linux-s390x": "0.18.20",
-        "@esbuild/linux-x64": "0.18.20",
-        "@esbuild/netbsd-x64": "0.18.20",
-        "@esbuild/openbsd-x64": "0.18.20",
-        "@esbuild/sunos-x64": "0.18.20",
-        "@esbuild/win32-arm64": "0.18.20",
-        "@esbuild/win32-ia32": "0.18.20",
-        "@esbuild/win32-x64": "0.18.20"
-      }
+    "node_modules/vite-plugin-stylex-dev/node_modules/es-module-lexer": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.4.1.tgz",
+      "integrity": "sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w==",
+      "dev": true
     },
     "node_modules/vite/node_modules/rollup": {
       "version": "3.29.4",
@@ -18973,9 +19287,9 @@
       }
     },
     "node_modules/web-worker": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/web-worker/-/web-worker-1.2.0.tgz",
-      "integrity": "sha512-PgF341avzqyx60neE9DD+XS26MMNMoUQRz9NOZwW32nPQrF6p77f1htcnjBSEV8BGMKZ16choqUG4hyI0Hx7mA=="
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/web-worker/-/web-worker-1.3.0.tgz",
+      "integrity": "sha512-BSR9wyRsy/KOValMgd5kMyr3JzpdeoR9KVId8u5GVlTTAtNChlsE4yTxeY7zMdNSyOmoKBv8NH2qeRY9Tg+IaA=="
     },
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
@@ -19079,16 +19393,16 @@
       }
     },
     "node_modules/which-typed-array": {
-      "version": "1.1.13",
-      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.13.tgz",
-      "integrity": "sha512-P5Nra0qjSncduVPEAr7xhoF5guty49ArDTwzJ/yNuPIbZppyRxFQsRCWrocxIY+CnMVG+qfbU2FmDKyvSGClow==",
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.14.tgz",
+      "integrity": "sha512-VnXFiIW8yNn9kIHN88xvZ4yOWchftKDsRJ8fEPacX/wl1lOvBrhsJ/OeJCXq7B0AaijRuqgzSKalJoPk+D8MPg==",
       "dev": true,
       "dependencies": {
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.4",
+        "available-typed-arrays": "^1.0.6",
+        "call-bind": "^1.0.5",
         "for-each": "^0.3.3",
         "gopd": "^1.0.1",
-        "has-tostringtag": "^1.0.0"
+        "has-tostringtag": "^1.0.1"
       },
       "engines": {
         "node": ">= 0.4"
diff --git a/package.json b/package.json
index 4ec6b365..8ed8d72a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rotion",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "license": "MIT",
   "repository": "linyows/rotion",
   "description": "This is react components that uses the notion API to display the notion's database and page.",
@@ -15,6 +15,7 @@
       "import": "./dist/ui/esm/index.js",
       "require": "./dist/ui/cjs/index.js"
     },
+    "./style.css": "./dist/ui/esm/style.css",
     "./styles/*": "./dist/ui/styles/*",
     "./package.json": "./package.json",
     "./README.md": "./README.md",
@@ -40,22 +41,19 @@
   ],
   "scripts": {
     "build": "npm run exporter:build && npm run ui:build",
-    "test": "npm run exporter:test && npm run ui:test",
-
+    "test": "npm run exporter:test",
     "exporter:build": "npm run exporter:clean && tsc -p tsconfig.exporter.json",
     "exporter:clean": "rm -rf dist/exporter/*",
     "exporter:test": "tsm node_modules/uvu/bin.js ./src/exporter",
-
     "ui:build": "npm run ui:lint && npm run ui:typecheck && npm run ui:rollup && npm run ui:styles",
     "ui:rollup": "rollup --config rollup.config.ts --configPlugin typescript",
     "ui:typecheck": "tsc -p src/ui/tsconfig.typecheck.json",
     "ui:styles": "cp -r ./src/ui/styles ./dist/ui/",
     "ui:lint": "eslint ./src/ui/components --ext .js,.jsx,.ts,.tsx -c ./src/ui/.eslintrc.json",
-    "ui:test": "npm run ui:lint && npm run ui:typecheck",
-    "ui:story": "storybook dev -p 6006",
-    "ui:build-story": "storybook build",
-
-    "prepublishOnly": "npm install && npm run exporter:build && npm run exporter:test && npm run ui:build"
+    "ui:test": "uvu -r tsm ./src/ui/components",
+    "story": "storybook dev -p 6006",
+    "build-story": "storybook build",
+    "prepublishOnly": "npm install && npm run test && npm run build"
   },
   "peerDependencies": {
     "react": "^17.0.2 || ^18.0.0-0",
@@ -63,45 +61,41 @@
   },
   "dependencies": {
     "@notionhq/client": "^2.2.14",
+    "cdate": "^0.0.7",
+    "cdate-schedule": "^0.0.1",
     "file-type": "^18.7.0",
     "imagemin": "^8.0.1",
     "imagemin-webp": "^8.0.0",
-    "replace-ext": "^2.0.0",
-
-    "mermaid": "^10.6.1",
     "katex": "^0.16.9",
-    "prismjs": "^1.25.0"
+    "mermaid": "^10.6.1",
+    "prismjs": "^1.25.0",
+    "replace-ext": "^2.0.0"
   },
   "devDependencies": {
-    "@types/node": "^20.10.5",
-    "@types/imagemin": "^8.0.5",
-    "@types/imagemin-webp": "^7.0.3",
-    "@types/replace-ext": "^2.0.2",
-    "@tsconfig/node-lts-strictest-esm": "^18.12.1",
-    "testdouble": "^3.20.1",
-    "ts-node": "^10.9.2",
-    "tslib": "^2.6.2",
-    "tsm": "^2.3.0",
-    "typescript": "^5.3.3",
-    "uvu": "^0.5.6",
-
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.5",
-    "@storybook/addon-essentials": "^7.6.7",
-    "@storybook/addon-interactions": "^7.6.7",
-    "@storybook/addon-links": "^7.6.7",
-    "@storybook/addon-onboarding": "^1.0.10",
-    "@storybook/blocks": "^7.6.7",
-    "@storybook/react": "^7.6.7",
-    "@storybook/react-vite": "^7.6.7",
-    "@storybook/test": "^7.6.7",
+    "@storybook/addon-essentials": "^7.6.12",
+    "@storybook/addon-interactions": "^7.6.12",
+    "@storybook/addon-links": "^7.6.12",
+    "@storybook/addon-onboarding": "^1.0.11",
+    "@storybook/blocks": "^7.6.12",
+    "@storybook/react": "^7.6.12",
+    "@storybook/react-vite": "^7.6.12",
+    "@storybook/test": "^7.6.12",
+    "@stylexjs/rollup-plugin": "^0.4.1",
+    "@stylexjs/stylex": "^0.4.1",
+    "@tsconfig/node-lts-strictest-esm": "^18.12.1",
+    "@types/imagemin": "^8.0.5",
+    "@types/imagemin-webp": "^7.0.3",
     "@types/katex": "^0.16.7",
+    "@types/node": "^20.10.5",
     "@types/prismjs": "^1.26.3",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",
+    "@types/replace-ext": "^2.0.2",
     "@types/rollup-plugin-peer-deps-external": "^2.2.4",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
@@ -112,7 +106,6 @@
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-storybook": "^0.6.15",
-    "exporter": "file:../exporter",
     "http-cache-semantics": ">=4.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -121,8 +114,14 @@
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-import-css": "^3.3.5",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "storybook": "^7.6.7",
-    "storybook-dark-mode": "^3.0.3"
+    "storybook": "^7.6.12",
+    "testdouble": "^3.20.1",
+    "ts-node": "^10.9.2",
+    "tslib": "^2.6.2",
+    "tsm": "^2.3.0",
+    "typescript": "^5.3.3",
+    "uvu": "^0.5.6",
+    "vite-plugin-stylex-dev": "^0.2.5"
   },
   "extends": "@tsconfig/node-lts-strictest-esm",
   "ts-node": {
diff --git a/rollup.config.ts b/rollup.config.ts
index 1e115360..c73dff64 100644
--- a/rollup.config.ts
+++ b/rollup.config.ts
@@ -2,10 +2,11 @@ import resolve from '@rollup/plugin-node-resolve'
 import commonjs from '@rollup/plugin-commonjs'
 import typescript from '@rollup/plugin-typescript'
 import json from '@rollup/plugin-json'
-// import terser from '@rollup/plugin-terser'
+import terser from '@rollup/plugin-terser'
 import peerDepsExternal from 'rollup-plugin-peer-deps-external'
 import del from 'rollup-plugin-delete'
 import dts from 'rollup-plugin-dts'
+import stylexPlugin from '@stylexjs/rollup-plugin'
 
 export default [
   {
@@ -16,14 +17,14 @@ export default [
         file: './dist/ui/cjs/index.js',
         format: 'cjs',
         sourcemap: true,
-        globals: { react: 'React' },
+        globals: { react: 'React', mermaid: 'mermaid', prismjs: 'prism' },
       },
       {
         intro: "'use client';",
         file: './dist/ui/esm/index.js',
         format: 'esm',
         sourcemap: true,
-        globals: { react: 'React' },
+        globals: { react: 'React', mermaid: 'mermaid', prismjs: 'prism' },
       },
       {
         intro: "'use client';",
@@ -31,7 +32,7 @@ export default [
         format: 'umd',
         name: 'NotionateUI',
         sourcemap: true,
-        globals: { react: 'React' },
+        globals: { react: 'React', mermaid: 'mermaid', prismjs: 'prism' },
       },
     ],
     plugins: [
@@ -41,11 +42,14 @@ export default [
       json(),
       commonjs(),
       typescript(),
-      // terser(),
+      terser(),
+      stylexPlugin({ fileName: 'style.css' }),
     ],
     external: [
       'react',
       'react-dom',
+      'prismjs',
+      'mermaid',
     ],
   },
   {
diff --git a/src/exporter/blocks.ts b/src/exporter/blocks.ts
index 6f00231f..f4832cc1 100644
--- a/src/exporter/blocks.ts
+++ b/src/exporter/blocks.ts
@@ -12,6 +12,7 @@ import { FetchPage } from './page.js'
 import {
   createDirWhenNotfound,
   saveImage,
+  saveFile,
   readCache,
   writeCache,
   getHtmlMeta,
@@ -204,6 +205,30 @@ export const FetchBlocks = async ({ block_id, last_edited_time }: FetchBlocksArg
             }
           }
           break
+        case 'file': {
+          const url = block.file.type === 'external' ? block.file.external.url : block.file.file.url
+          const { src, size } = await saveFile(url, `block-${block.id}`)
+          block.file.src = src
+          block.file.size = size
+          break
+        }
+        case 'pdf': {
+          const url = block.pdf.type === 'external' ? block.pdf.external.url : block.pdf.file.url
+          const { src, size } = await saveFile(url, `block-${block.id}`)
+          block.pdf.src = src
+          block.pdf.size = size
+          break
+        }
+        case 'synced_block':
+          if (block.has_children) {
+            if (block.synced_block.synced_from === null) {
+              block.children = await FetchBlocks({ block_id: block.id, last_edited_time: block.last_edited_time })
+            } else if (block.synced_block.synced_from.type === 'block_id') {
+              const block_id = block.synced_block.synced_from.block_id
+              block.children = await FetchBlocks({ block_id, last_edited_time: block.last_edited_time })
+            }
+          }
+          break
         case 'table':
           block.children = await FetchBlocks({ block_id: block.id, last_edited_time: block.last_edited_time })
           break
@@ -220,15 +245,12 @@ export const FetchBlocks = async ({ block_id, last_edited_time }: FetchBlocksArg
         case 'column':
         case 'divider':
         case 'equation':
-        case 'file':
         case 'heading_1':
         case 'heading_2':
         case 'heading_3':
         case 'link_to_page':
         case 'link_preview':
-        case 'pdf':
         case 'quote':
-        case 'synced_block':
         case 'table_of_contents':
         case 'table_row':
         case 'template':
diff --git a/src/exporter/files.test.ts b/src/exporter/files.test.ts
index 9d9cd0f0..c1435f48 100644
--- a/src/exporter/files.test.ts
+++ b/src/exporter/files.test.ts
@@ -60,8 +60,8 @@ test('getHtmlMeta returns title and desc', async () => {
     ],
     [
       'https://www.businesswire.com/',
-      'Press release distribution, EDGAR filing, XBRL, regulatory filings | Business Wire',
-      'The global leader in press release distribution and regulatory disclosure. Public relations and investor relations professionals rely on Business Wire for broad-based and targeted market reach.',
+      'Global Press Release &amp; Newswire Distribution Services | Business Wire',
+      'Explore Business Wire for premium press release &amp; newswire distribution services, offering global reach and tailored solutions for businesses worldwide. Expand your reach today.',
       '/images/html-image-1ebfeb4b204984939ca889895f01fad24a9e0848.webp',
       '/images/html-icon-65fbfcdf2d131a1bd29acc6b5377073a0b10a76f-2ba3a0d7878316de5aaa6eed7faed9e4ba4e9f09.ico',
     ],
diff --git a/src/exporter/files.ts b/src/exporter/files.ts
index 0dd14b97..3db053da 100644
--- a/src/exporter/files.ts
+++ b/src/exporter/files.ts
@@ -12,6 +12,7 @@ import replaceExt from 'replace-ext'
 import {
   docRoot,
   imageDir,
+  fileDir,
   timeout,
   webpQuality,
   httpOptions,
@@ -210,6 +211,52 @@ const sleep = (m: number) => {
   return new Promise((resolve) => setTimeout(resolve, m))
 }
 
+export async function saveFile (fileUrl: string, prefix: string) {
+  const urlWithoutQuerystring = fileUrl.split('?').shift() || ''
+  const { ext, name } = path.parse(urlWithoutQuerystring)
+  const basename = `${atoh(name)}${ext}`
+  const urlPath = `/${fileDir}/${prefix}-${basename}`
+  const filePath = `${docRoot}${urlPath}`
+  const dirPath = `${docRoot}/${fileDir}`
+
+  await createDirWhenNotfound(dirPath)
+
+  if (fs.existsSync(filePath)) {
+    const stats = await stat(filePath)
+    return {
+      src: urlPath,
+      size: stats.size,
+    }
+
+  /* Download file */
+  } else {
+    try {
+      let res: HttpGetResponse
+      res = await httpsGetWithFollowRedirects(fileUrl)
+      if (res.statusCode >= 400 && res.statusCode < 500 && imageDir !== urlWithoutQuerystring) {
+        res = await httpsGetWithFollowRedirects(urlWithoutQuerystring)
+        if (res.statusCode >= 400 && res.statusCode < 500) {
+          throw new Error(`retry download to ${urlWithoutQuerystring} but failed`)
+        }
+      }
+      res.pipe(fs.createWriteStream(filePath))
+      await res.end
+      // This fix that for fileType do not returns undefined
+      await sleep(10)
+    } catch (e) {
+      if (debug) {
+        console.log(`saveFile download error -- path: ${filePath}, url: ${fileUrl}, message: ${e}`)
+      }
+    }
+  }
+
+  const stats = await stat(filePath)
+  return {
+    src: urlPath,
+    size: stats.size,
+  }
+}
+
 export const saveImage = async (imageUrl: string, prefix: string): Promise<string> => {
   const urlWithoutQuerystring = imageUrl.split('?').shift() || ''
   const { ext, name } = path.parse(urlWithoutQuerystring)
diff --git a/src/exporter/types.ts b/src/exporter/types.ts
index 515848df..0275d553 100644
--- a/src/exporter/types.ts
+++ b/src/exporter/types.ts
@@ -235,6 +235,55 @@ export type BreadcrumbBlockObjectResponseEx = BreadcrumbBlockObjectResponse & {
   list: Breadcrumb[]
 }
 
+/* Add src and size */
+export type FileBlockObjectResponseEx = FileBlockObjectResponse & {
+  file: {
+    type: "external",
+    external: {
+      url: TextRequest,
+    },
+    caption: Array<RichTextItemResponse>,
+    src: string,
+    size: number,
+  } | {
+    type: 'file',
+    file: {
+      url: string,
+      expiry_time: string,
+    },
+    caption: Array<RichTextItemResponse>,
+    src: string,
+    size: number,
+  }
+}
+
+/* Add src and size */
+export type PdfBlockObjectResponseEx = PdfBlockObjectResponse & {
+  pdf: {
+    type: "external",
+    external: {
+      url: TextRequest,
+    },
+    caption: Array<RichTextItemResponse>,
+    src: string,
+    size: number,
+  } | {
+    type: 'file',
+    file: {
+      url: string,
+      expiry_time: string,
+    },
+    caption: Array<RichTextItemResponse>,
+    src: string,
+    size: number,
+  }
+}
+
+/* Add children */
+export type SyncedBlockBlockObjectResponseEx = SyncedBlockBlockObjectResponse & {
+  children?: ListBlockChildrenResponseEx
+}
+
 export type BlockObjectResponse =
   | ParagraphBlockObjectResponseEx
   | Heading1BlockObjectResponse
@@ -246,7 +295,7 @@ export type BlockObjectResponse =
   | ToDoBlockObjectResponse
   | ToggleBlockObjectResponseEx
   | TemplateBlockObjectResponse
-  | SyncedBlockBlockObjectResponse
+  | SyncedBlockBlockObjectResponseEx
   | ChildPageBlockObjectResponseEx
   | ChildDatabaseBlockObjectResponseEx
   | EquationBlockObjectResponse
@@ -264,8 +313,8 @@ export type BlockObjectResponse =
   | BookmarkBlockObjectResponseEx
   | ImageBlockObjectResponseEx
   | VideoBlockObjectResponseEx
-  | PdfBlockObjectResponse
-  | FileBlockObjectResponse
+  | PdfBlockObjectResponseEx
+  | FileBlockObjectResponseEx
   | AudioBlockObjectResponse
   | LinkPreviewBlockObjectResponse
   | UnsupportedBlockObjectResponse
diff --git a/src/exporter/variables.ts b/src/exporter/variables.ts
index aa1bf5dd..d764fd23 100644
--- a/src/exporter/variables.ts
+++ b/src/exporter/variables.ts
@@ -7,6 +7,7 @@ export const incrementalCache = process.env.ROTION_INCREMENTAL_CACHE === 'true'
 export const auth = process.env.NOTION_TOKEN
 export const docRoot = process.env.ROTION_DOCROOT || 'public'
 export const imageDir = process.env.ROTION_IMAGEDIR || 'images'
+export const fileDir = process.env.ROTION_FILEDIR || 'files'
 export const timeout = process.env.ROTION_TIMEOUT ? parseInt(process.env.ROTION_TIMEOUT) : 1500
 export const webpQuality = process.env.ROTION_WEBP_QUALITY ? parseInt(process.env.ROTION_WEBP_QUALITY) : 95
 export const debug = process.env.ROTION_DEBUG === 'true'
diff --git a/src/ui/components/Gallery/Gallery.stories.tsx b/src/ui/components/Gallery/Gallery.stories.tsx
new file mode 100644
index 00000000..9238796e
--- /dev/null
+++ b/src/ui/components/Gallery/Gallery.stories.tsx
@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import type { FetchDatabaseRes } from '../../../exporter'
+import Gallery from './Gallery'
+import response from '../../fixtures/fetch_database_response.json'
+
+const meta = {
+  title: 'Database/Gallery',
+  component: Gallery,
+  args: {
+    keys: ['Name', 'Born', 'Date', 'Published', 'Url', 'Note', 'Tags'],
+    db: response as FetchDatabaseRes,
+    href: '/blog/[id]',
+    link: undefined,
+    query: undefined,
+    preview: 'cover',
+    size: undefined,
+    fit: true,
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Gallery>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
diff --git a/src/ui/components/Gallery/Gallery.tsx b/src/ui/components/Gallery/Gallery.tsx
index b5516f37..a2f30f4f 100644
--- a/src/ui/components/Gallery/Gallery.tsx
+++ b/src/ui/components/Gallery/Gallery.tsx
@@ -2,15 +2,46 @@ import React from 'react'
 import type { PageObjectResponseEx } from '../../../exporter'
 import GalleryCard from './GalleryCard/GalleryCard'
 import type { GalleryProps } from './Gallery.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../tokens.stylex'
 
-const Gallery = ({ keys, db, href, link, query, preview, size, fit }: GalleryProps) => {
-  const fitClass = `${fit ? ' notionate-gallery-fit' : ''}`
-  const sizeClass = ` notionate-gallery-${size || 'medium'}`
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+  },
+  inner: {
+    position: 'relative',
+    paddingBottom: '1rem',
+    display: 'grid',
+    gap: '16px',
+  },
+  small: {
+    gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))',
+  },
+  medium: {
+    gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))',
+  },
+  large: {
+    gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))',
+  },
+})
+
+const Gallery = ({ keys, db, href, link, query, preview, size = 'medium', fit = true }: GalleryProps) => {
   return (
-    <div className={`notionate-gallery${fitClass}`}>
-      <div className={`notionate-gallery-inner${sizeClass}`}>
+    <div className={`rotion-gallery ${fit ? 'rotion-gallery-fit' : ''}`}>
+      <div className={`rotion-gallery-inner rotion-gallery-${size} ${Stylex(style.inner)} ${Stylex(style[size])}`}>
         {db.results.map((v) => (
-          <GalleryCard key={v.id} keys={keys} page={v as PageObjectResponseEx} href={href || ''} link={link} query={query} preview={preview} />
+          <GalleryCard
+            key={v.id}
+            keys={keys}
+            page={v as PageObjectResponseEx}
+            href={href || ''}
+            link={link}
+            query={query}
+            preview={preview}
+            size={size}
+            fit={fit}
+          />
         ))}
       </div>
     </div>
diff --git a/src/ui/components/Gallery/Gallery.types.ts b/src/ui/components/Gallery/Gallery.types.ts
index 0ef6765b..b62b737b 100644
--- a/src/ui/components/Gallery/Gallery.types.ts
+++ b/src/ui/components/Gallery/Gallery.types.ts
@@ -1,10 +1,10 @@
-import type { QueryDatabaseResponseEx } from '../../../exporter'
+import type { FetchDatabaseRes } from '../../../exporter'
 import type { ParsedUrlQueryInput } from 'node:querystring'
 import type { Link } from '../types'
 
 export interface GalleryProps {
   keys: string[]
-  db: QueryDatabaseResponseEx
+  db: FetchDatabaseRes
   href?: string
   link?: Link
   query?: ParsedUrlQueryInput
diff --git a/src/ui/components/Gallery/GalleryCard/GalleryCard.tsx b/src/ui/components/Gallery/GalleryCard/GalleryCard.tsx
index bfb0253e..30b41fdf 100644
--- a/src/ui/components/Gallery/GalleryCard/GalleryCard.tsx
+++ b/src/ui/components/Gallery/GalleryCard/GalleryCard.tsx
@@ -8,8 +8,48 @@ import { getLinkPathAndLinkKey } from '../../lib'
 import GalleryLinkedCard from './GalleryLinkedCard'
 import GalleryPreview from './GalleryPreview'
 import type { GalleryCardProps } from './GalleryCard.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../../tokens.stylex'
 
-const getSlug = (key: string, page: GetPageResponse): string => {
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    display: 'block',
+    color: 'inherit',
+    textDecoration: 'none',
+    boxShadow: 'rgb(15 15 15 / 10%) 0px 0px 0px 1px, rgb(15 15 15 / 10%) 0px 2px 4px',
+    borderRadius: '3px',
+    background: {
+      default: 'white',
+      ':hover': 'rgba(55, 53, 47, 0.03)',
+    },
+    overflow: 'hidden',
+    transition: 'background 100ms ease-out 0s',
+    position: 'static',
+    height: '100%',
+    cursor: 'pointer',
+  },
+  inner: {
+    position: 'relative',
+    paddingBottom: '1rem',
+    display: 'grid',
+    gap: '16px',
+  },
+  small: {
+    gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))',
+  },
+  medium: {
+    gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))',
+  },
+  large: {
+    gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))',
+  },
+  text: {
+    paddingBottom: '10px',
+  },
+})
+
+function getSlug (key: string, page: GetPageResponse) {
   if (!('properties' in page)) {
     return 'not-found-properties'
   }
@@ -27,8 +67,8 @@ const getSlug = (key: string, page: GetPageResponse): string => {
   return p.rich_text.map(v => v.text.content).join(',')
 }
 
-const buildHref = (page: PageObjectResponseEx, link?: string) => {
-  if (link === undefined) {
+function buildHref (page: PageObjectResponseEx, link?: string) {
+  if (!link) {
     return ''
   }
   const [path, slugKey] = getLinkPathAndLinkKey(link)
@@ -36,26 +76,27 @@ const buildHref = (page: PageObjectResponseEx, link?: string) => {
   return `${path}${slug}`
 }
 
-const GalleryCard = ({ keys, page, href, link, query, preview }: GalleryCardProps) => {
-  const findItems = (name: string, page: PageObjectResponseEx) => {
-    let propertyId = ''
-    for (const [k, v] of Object.entries(page.properties)) {
-      if (k === name) {
-        propertyId = v.id
-      }
+function findItems (name: string, page: PageObjectResponseEx) {
+  let propertyId = ''
+  for (const [k, v] of Object.entries(page.properties)) {
+    if (k === name) {
+      propertyId = v.id
     }
-    return page.property_items.find(v => ((v.object === 'property_item' && v.id === propertyId) || (v.object === 'list' && v.property_item.id === propertyId)))
   }
+  return page.property_items.find(v => ((v.object === 'property_item' && v.id === propertyId) || (v.object === 'list' && v.property_item.id === propertyId)))
+}
+
+const GalleryCard = ({ keys, page, href, link, query, preview, size, fit }: GalleryCardProps) => {
   const path = getLinkPathAndLinkKey(href)[0]
 
   return (
-    <div className="notionate-gallery-card">
-      <GalleryLinkedCard href={buildHref(page, href)} link={link}>
-        {preview && <GalleryPreview src={page.cover?.src} />}
-        <div className="notionate-gallery-card-text">
+    <div className={`rotion-gallery-card ${Stylex(style.wrapper)}`}>
+      <GalleryLinkedCard href={buildHref(page, href)} link={link} query={query}>
+        {preview && <GalleryPreview src={page.cover?.src} size={size} fit={fit} />}
+        <div className={`rotion-gallery-card-text ${Stylex(style.text)}`}>
           {keys.map((name, i) => (
             <div key={`${page.id}${name}`} className={`field${i}`}>
-              {GalleryHandler({ items: findItems(name, page), path })}
+              <GalleryHandler items={findItems(name, page)} path={path} query={query} size={size} />
             </div>
           ))}
         </div>
diff --git a/src/ui/components/Gallery/GalleryCard/GalleryCard.types.ts b/src/ui/components/Gallery/GalleryCard/GalleryCard.types.ts
index 2a43e051..9912907e 100644
--- a/src/ui/components/Gallery/GalleryCard/GalleryCard.types.ts
+++ b/src/ui/components/Gallery/GalleryCard/GalleryCard.types.ts
@@ -9,4 +9,6 @@ export interface GalleryCardProps {
   link?: Link
   query?: ParsedUrlQueryInput
   preview?: 'cover' | 'content'
+  size: 'small' | 'medium' | 'large'
+  fit: boolean
 }
diff --git a/src/ui/components/Gallery/GalleryCard/GalleryHandler.tsx b/src/ui/components/Gallery/GalleryCard/GalleryHandler.tsx
index 7e64a3c1..59253e04 100644
--- a/src/ui/components/Gallery/GalleryCard/GalleryHandler.tsx
+++ b/src/ui/components/Gallery/GalleryCard/GalleryHandler.tsx
@@ -10,8 +10,8 @@ import GalleryCheckboxField from '../GalleryCheckboxField/GalleryCheckboxField'
 import GalleryNumberField from '../GalleryNumberField/GalleryNumberField'
 import type { GalleryHandlerProps } from './GalleryHandler.types'
 
-const GalleryHandler = ({ items, path }: GalleryHandlerProps) => {
-  if (items === undefined) {
+const GalleryHandler = ({ items, path, link, query, size }: GalleryHandlerProps) => {
+  if (!items) {
     return <></>
   }
 
@@ -23,9 +23,9 @@ const GalleryHandler = ({ items, path }: GalleryHandlerProps) => {
     const target = items.results[0]
     switch (target.type) {
       case 'title':
-        return GalleryTitleField({ payload: items.results as Array<TitlePropertyItemObjectResponse> })
+        return <GalleryTitleField payload={items.results as Array<TitlePropertyItemObjectResponse>} />
       case 'rich_text':
-        return GalleryRichTextField({ payload: target })
+        return <GalleryRichTextField payload={target} />
       case 'people':
       case 'relation':
       case 'rollup':
@@ -36,17 +36,17 @@ const GalleryHandler = ({ items, path }: GalleryHandlerProps) => {
   } else {
     switch (items.type) {
       case 'date':
-        return GalleryDateField({ payload: items.date })
+        return <GalleryDateField payload={items.date} />
       case 'rich_text':
-        return GalleryRichTextField({ payload: items })
+        return <GalleryRichTextField payload={items} size={size} />
       case 'multi_select':
-        return GalleryMultiSelectField({ payload: items, path })
+        return <GalleryMultiSelectField payload={items} path={path} link={link} query={query} />
       case 'url':
-        return GalleryUrlField({ payload: items.url })
+        return <GalleryUrlField payload={items.url} />
       case 'checkbox':
-        return GalleryCheckboxField({ payload: items.checkbox })
+        return <GalleryCheckboxField payload={items.checkbox} />
       case 'number':
-        return GalleryNumberField({ payload: items })
+        return <GalleryNumberField payload={items} />
       case 'select':
       case 'status':
       case 'email':
@@ -65,6 +65,8 @@ const GalleryHandler = ({ items, path }: GalleryHandlerProps) => {
         break
     }
   }
+
+  return <></>
 }
 
 export default GalleryHandler
diff --git a/src/ui/components/Gallery/GalleryCard/GalleryHandler.types.ts b/src/ui/components/Gallery/GalleryCard/GalleryHandler.types.ts
index 54988d75..cfaa6001 100644
--- a/src/ui/components/Gallery/GalleryCard/GalleryHandler.types.ts
+++ b/src/ui/components/Gallery/GalleryCard/GalleryHandler.types.ts
@@ -1,6 +1,11 @@
 import type { GetPagePropertyResponse } from '../../../../exporter'
+import type { ParsedUrlQueryInput } from 'node:querystring'
+import type { Link } from '../../types'
 
 export interface GalleryHandlerProps {
   items: GetPagePropertyResponse|undefined
   path: string
+  size: 'small' | 'medium' | 'large'
+  link?: Link
+  query?: ParsedUrlQueryInput
 }
diff --git a/src/ui/components/Gallery/GalleryCard/GalleryLinkedCard.tsx b/src/ui/components/Gallery/GalleryCard/GalleryLinkedCard.tsx
index 9301da63..ee7d9d06 100644
--- a/src/ui/components/Gallery/GalleryCard/GalleryLinkedCard.tsx
+++ b/src/ui/components/Gallery/GalleryCard/GalleryLinkedCard.tsx
@@ -6,27 +6,23 @@ const GalleryLinkedCard = ({ children, link, query, href }: GalleryLinkedCardPro
   if (link && query) {
     const Link = link as unknown as Link
     return (
-      <Link href={{ pathname: href, query }}>
-        <div className="notionate-gallery-a">
-          {children}
-        </div>
+      <Link className="rotion-gallery-link" href={{ pathname: href, query }}>
+        {children}
       </Link>
     )
   } else if (link) {
     const Link = link
     return (
-      <Link href={href}>
-        <div className="notionate-gallery-a">
-          {children}
-        </div>
+      <Link className="rotion-gallery-link" href={href}>
+        {children}
       </Link>
     )
   }
 
   return (
-    <>
+    <div className="rotion-gallery-link">
       {children}
-    </>
+    </div>
   )
 }
 
diff --git a/src/ui/components/Gallery/GalleryCard/GalleryPreview.tsx b/src/ui/components/Gallery/GalleryCard/GalleryPreview.tsx
index 0bd07464..bdf0eda9 100644
--- a/src/ui/components/Gallery/GalleryCard/GalleryPreview.tsx
+++ b/src/ui/components/Gallery/GalleryCard/GalleryPreview.tsx
@@ -1,13 +1,50 @@
 import React from 'react'
+import Stylex from '@stylexjs/stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    aspectRatio: '16 / 9',
+    overflow: 'hidden',
+  },
+  fit: {
+    objectFit: 'contain',
+    objectPosition: 'center 50%',
+    borderBottom: '1px solid rgba(55, 53, 47, 0.09)',
+  },
+  nofit: {
+    objectFit: 'cover',
+    objectPosition: 'top 50%',
+  },
+  small: {
+    height: '101.25px',
+    width: '100%',
+  },
+  medium: {
+    height: '146.25px',
+    width: '100%',
+  },
+  large: {
+    height: '180px',
+    width: '100%',
+  },
+})
 
 export interface GalleryPreviewProps {
   src?: string
+  size: 'small' | 'medium' | 'large'
+  fit: boolean
 }
 
-const GalleryPreview = ({ src }: GalleryPreviewProps) => {
+const GalleryPreview = ({ src, size, fit }: GalleryPreviewProps) => {
+  const classArray = [Stylex(style[size])]
+  if (fit) {
+    classArray.push(Stylex(style.fit))
+  } else {
+    classArray.push(Stylex(style.nofit))
+  }
   return (
-    <div className="notionate-gallery-preview">
-      {src && <img src={src} />}
+    <div className={`rotion-gallery-preview ${Stylex(style.wrapper)}`}>
+      {src && <img src={src} className={classArray.join(' ')} />}
     </div>
   )
 }
diff --git a/src/ui/components/Gallery/GalleryCheckboxField/GalleryCheckboxField.tsx b/src/ui/components/Gallery/GalleryCheckboxField/GalleryCheckboxField.tsx
index 422de80f..61b4c238 100644
--- a/src/ui/components/Gallery/GalleryCheckboxField/GalleryCheckboxField.tsx
+++ b/src/ui/components/Gallery/GalleryCheckboxField/GalleryCheckboxField.tsx
@@ -3,7 +3,7 @@ import type { GalleryCheckboxFieldProps } from './GalleryCheckboxField.types'
 
 const GalleryCheckboxField = ({ payload }: GalleryCheckboxFieldProps) => {
   return (
-    <div className="notionate-gallery-checkbox">
+    <div className={'rotion-gallery-checkbox'}>
       {payload}
     </div>
   )
diff --git a/src/ui/components/Gallery/GalleryDateField/GalleryDateField.tsx b/src/ui/components/Gallery/GalleryDateField/GalleryDateField.tsx
index bb8f4188..10ef514f 100644
--- a/src/ui/components/Gallery/GalleryDateField/GalleryDateField.tsx
+++ b/src/ui/components/Gallery/GalleryDateField/GalleryDateField.tsx
@@ -1,9 +1,23 @@
 import React from 'react'
 import type { GalleryDateFieldProps } from './DateField.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    width: '100%',
+    padding: '8px 10px',
+    display: 'flex',
+    alignItems: 'center',
+    fontSize: '12px',
+    whiteSpace: 'nowrap',
+  },
+})
 
 const GalleryDateField = ({ payload }: GalleryDateFieldProps) => {
   return (
-    <div className="notionate-gallery-date">
+    <div className={`rotion-gallery-date ${Stylex(style.wrapper)}`}>
       {payload?.start}
     </div>
   )
diff --git a/src/ui/components/Gallery/GalleryMultiSelectField/GalleryMultiSelectField.tsx b/src/ui/components/Gallery/GalleryMultiSelectField/GalleryMultiSelectField.tsx
index 3682d7d7..5884d789 100644
--- a/src/ui/components/Gallery/GalleryMultiSelectField/GalleryMultiSelectField.tsx
+++ b/src/ui/components/Gallery/GalleryMultiSelectField/GalleryMultiSelectField.tsx
@@ -1,31 +1,106 @@
 import React from 'react'
 import type { GalleryMultiSelectFieldProps } from './GalleryMultiSelectField.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens, colors, link } from '../../tokens.stylex'
+import LinkedTagIfLinked from './LinkedTag'
 
-const GalleryMultiSelectField = ({ payload, path, link }: GalleryMultiSelectFieldProps) => {
-  const LinkedTag = (name: string) => {
-    const href = `${path}tags/${encodeURIComponent(name)}`
-    if (link) {
-      const Link = link
-      return (
-        <>
-          <Link className="notionate-gallery-multiselect-a" href={href}>
-            {name}
-          </Link>
-        </>
-      )
-    }
-    return (
-      <a className="notionate-gallery-multiselect-a" href={href} title={name}>
-        {name}
-      </a>
-    )
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    width: '100%',
+    padding: '8px 10px',
+    display: 'flex',
+    alignItems: 'center',
+    fontSize: '12px',
+    whiteSpace: 'nowrap',
+  },
+  link: {
+    textDecoration: link.textDecoration,
+    color: 'inherit',
+    cursor: link.cursor,
+    padding: '2px 10px',
+  },
+  ul: {
+    listStyleType: 'none',
+    display: 'flex',
+    flexShrink: 0,
+    alignItems: 'center',
+    padding: '0 0 8px',
+    margin: '0 0 0 7px',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+  li: {
+    fontSize: '.75rem',
+    display: 'flex',
+    alignItems: 'center',
+    flexShrink: 0,
+    minWidth: 0,
+    borderRadius: '3px',
+    padding: 0,
+    color: 'rgb(24, 51, 71)',
+    background: 'rgb(211, 229, 239) none repeat scroll 0% 0%',
+    margin: '0 6px 0 0',
+    cursor: 'pointer',
+  },
+  default: {
+    color: colors.default,
+    backgroundColor: colors.bgDefault,
+  },
+  gray: {
+    color: colors.gray,
+    backgroundColor: colors.bgGray,
+  },
+  brown: {
+    color: colors.brown,
+    backgroundColor: colors.bgBrown,
+  },
+  orange: {
+    color: colors.orange,
+    backgroundColor: colors.bgOrange,
+  },
+  yellow: {
+    color: colors.yellow,
+    backgroundColor: colors.bgYellow,
+  },
+  green: {
+    color: colors.green,
+    backgroundColor: colors.bgGreen,
+  },
+  blue: {
+    color: colors.blue,
+    backgroundColor: colors.bgBlue,
+  },
+  purple: {
+    color: colors.purple,
+    backgroundColor: colors.bgPurple,
+  },
+  pink: {
+    color: colors.orange,
+    backgroundColor: colors.bgOrange,
+  },
+  red: {
+    color: colors.red,
+    backgroundColor: colors.bgRed,
+  },
+})
+
+const GalleryMultiSelectField = ({ payload, path, link, query }: GalleryMultiSelectFieldProps) => {
+  const { multi_select } = payload
+
+  const liClassName = (color: string) => {
+    // @ts-ignore
+    const s = Stylex(style[color])
+    return `rotion-gallery-multiselect-li rotion-select-${color} ${Stylex(style.li)} ${s}`
   }
 
   return (
-    <ul className="notionate-gallery-multiselect-ul">
-      {payload.multi_select.map(f => (
-        <li key={f.id} className={`notionate-gallery-multiselect-li notionate-select-${f.color}`}>
-          {LinkedTag(f.name)}
+    <ul className={`rotion-gallery-multiselect-ul ${Stylex(style.ul)}`}>
+      {multi_select.map(v => (
+        <li key={v.id} className={liClassName(v.color)}>
+          <LinkedTagIfLinked pathname={path ? `${path}tags/${encodeURIComponent(v.name)}` : ''} link={link} query={query}>
+            {v.name}
+          </LinkedTagIfLinked>
         </li>
       ))}
     </ul>
diff --git a/src/ui/components/Gallery/GalleryMultiSelectField/GalleryMultiSelectField.types.ts b/src/ui/components/Gallery/GalleryMultiSelectField/GalleryMultiSelectField.types.ts
index a64e1cec..134d51ac 100644
--- a/src/ui/components/Gallery/GalleryMultiSelectField/GalleryMultiSelectField.types.ts
+++ b/src/ui/components/Gallery/GalleryMultiSelectField/GalleryMultiSelectField.types.ts
@@ -1,3 +1,4 @@
+import type { ParsedUrlQueryInput } from 'node:querystring'
 import type { MultiSelectPropertyItemObjectResponse } from '../../../../exporter'
 import type { Link } from '../../types'
 
@@ -5,4 +6,5 @@ export interface GalleryMultiSelectFieldProps {
   payload: MultiSelectPropertyItemObjectResponse
   path: string
   link?: Link
+  query?: ParsedUrlQueryInput
 }
diff --git a/src/ui/components/Gallery/GalleryMultiSelectField/LinkedTag.tsx b/src/ui/components/Gallery/GalleryMultiSelectField/LinkedTag.tsx
new file mode 100644
index 00000000..77b79669
--- /dev/null
+++ b/src/ui/components/Gallery/GalleryMultiSelectField/LinkedTag.tsx
@@ -0,0 +1,43 @@
+import React from 'react'
+import type { LinkedTagIfLinkedProps } from './LinkedTag.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens, link } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    textDecoration: link.textDecoration,
+    color: 'inherit',
+    cursor: link.cursor,
+    padding: '2px 10px',
+  },
+})
+
+const LinkedTagIfLinked = ({ pathname, link, query, children }: LinkedTagIfLinkedProps) => {
+  const href = query ? { pathname, query } : pathname
+
+  if (href === '') {
+    return (
+      <span className={`rotion-gallery-multiselect-link ${Stylex(style.wrapper)}`}>
+        {children}
+      </span>
+    )
+  }
+
+  if (link) {
+    const Link = link
+    return (
+      <Link className={`rotion-gallery-multiselect-link ${Stylex(style.wrapper)}`} href={href}>
+        {children}
+      </Link>
+    )
+  }
+
+  return (
+    <a className={`rotion-gallery-multiselect-link ${Stylex(style.wrapper)}`} href={pathname}>
+      {children}
+    </a>
+  )
+}
+
+export default LinkedTagIfLinked
diff --git a/src/ui/components/Gallery/GalleryMultiSelectField/LinkedTag.types.ts b/src/ui/components/Gallery/GalleryMultiSelectField/LinkedTag.types.ts
new file mode 100644
index 00000000..5c0532fd
--- /dev/null
+++ b/src/ui/components/Gallery/GalleryMultiSelectField/LinkedTag.types.ts
@@ -0,0 +1,10 @@
+import type { ParsedUrlQueryInput } from 'node:querystring'
+import type { ReactNode } from 'react'
+import type { Link } from '../../types'
+
+export interface LinkedTagIfLinkedProps {
+  pathname: string
+  link?: Link
+  query?: ParsedUrlQueryInput
+  children?: ReactNode
+}
diff --git a/src/ui/components/Gallery/GalleryNumberField/GalleryNumberField.tsx b/src/ui/components/Gallery/GalleryNumberField/GalleryNumberField.tsx
index 957d8e22..d8e1e0bd 100644
--- a/src/ui/components/Gallery/GalleryNumberField/GalleryNumberField.tsx
+++ b/src/ui/components/Gallery/GalleryNumberField/GalleryNumberField.tsx
@@ -1,9 +1,23 @@
 import React from 'react'
 import type { GalleryNumberFieldProps } from './GalleryNumberField.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    width: '100%',
+    padding: '0 10px 8px',
+    display: 'flex',
+    alignItems: 'center',
+    fontSize: '12px',
+    whiteSpace: 'nowrap',
+  },
+})
 
 const GalleryNumberField = ({ payload }: GalleryNumberFieldProps) => {
   return (
-    <div className="notionate-gallery-number">
+    <div className={`rotion-gallery-number ${Stylex(style.wrapper)}`}>
       {payload.number}
     </div>
   )
diff --git a/src/ui/components/Gallery/GalleryRichTextField/RichTextField.tsx b/src/ui/components/Gallery/GalleryRichTextField/RichTextField.tsx
index e3c74bf8..ab2a895e 100644
--- a/src/ui/components/Gallery/GalleryRichTextField/RichTextField.tsx
+++ b/src/ui/components/Gallery/GalleryRichTextField/RichTextField.tsx
@@ -1,11 +1,34 @@
 import React from 'react'
-import TextBlock from '../../Page/TextBlock/TextBlock'
+import { RichText } from '../../Page/RichText'
 import type { GalleryRichTextFieldProps } from './RichTextField.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../../tokens.stylex'
 
-const GalleryRichTextField = ({ payload }: GalleryRichTextFieldProps) => {
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    padding: '0 10px 8px',
+    display: 'block',
+    fontSize: '13px',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+  },
+  small: {
+    width: '180px',
+  },
+  medium: {
+    width: '260px',
+  },
+  large: {
+    width: '320px',
+  },
+})
+
+const GalleryRichTextField = ({ payload, size }: GalleryRichTextFieldProps) => {
   return (
-    <div className="notionate-gallery-richtext">
-      <TextBlock tag="span" block={[payload.rich_text]} />
+    <div className={`rotion-gallery-richtext ${Stylex(style.wrapper)} ${Stylex(style[size || 'medium'])}`}>
+      <RichText textObject={payload.rich_text} />
     </div>
   )
 }
diff --git a/src/ui/components/Gallery/GalleryRichTextField/RichTextField.types.ts b/src/ui/components/Gallery/GalleryRichTextField/RichTextField.types.ts
index 1bf89d38..c0e1deee 100644
--- a/src/ui/components/Gallery/GalleryRichTextField/RichTextField.types.ts
+++ b/src/ui/components/Gallery/GalleryRichTextField/RichTextField.types.ts
@@ -2,4 +2,5 @@ import type { RichTextPropertyItemObjectResponse } from '../../../../exporter'
 
 export interface GalleryRichTextFieldProps {
   payload: RichTextPropertyItemObjectResponse
+  size?: 'small' | 'medium' | 'large'
 }
diff --git a/src/ui/components/Gallery/GalleryTitleField/GalleryTitleField.tsx b/src/ui/components/Gallery/GalleryTitleField/GalleryTitleField.tsx
index 9fe2b735..3a172087 100644
--- a/src/ui/components/Gallery/GalleryTitleField/GalleryTitleField.tsx
+++ b/src/ui/components/Gallery/GalleryTitleField/GalleryTitleField.tsx
@@ -1,5 +1,16 @@
 import React from 'react'
 import type { GalleryTitleFieldProps } from './GalleryTitleField.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    fontSize: '.9rem',
+    width: '100%',
+    padding: '10px 10px 0',
+  }
+})
 
 const GalleryTitleField = ({ payload }: GalleryTitleFieldProps) => {
   const title = payload.map(v => {
@@ -15,7 +26,7 @@ const GalleryTitleField = ({ payload }: GalleryTitleFieldProps) => {
   }).join(',')
 
   return (
-    <div className="notionate-gallery-title">
+    <div className={`rotion-gallery-title ${Stylex(style.wrapper)}`}>
       {title}
     </div>
   )
diff --git a/src/ui/components/Gallery/GalleryUrlField/GalleryUrlField.tsx b/src/ui/components/Gallery/GalleryUrlField/GalleryUrlField.tsx
index e2e66a38..673c2329 100644
--- a/src/ui/components/Gallery/GalleryUrlField/GalleryUrlField.tsx
+++ b/src/ui/components/Gallery/GalleryUrlField/GalleryUrlField.tsx
@@ -1,25 +1,68 @@
 import React from 'react'
 import type { GalleryUrlFieldProps } from './GalleryUrlField.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens, link } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    display: 'flex',
+    whiteSpace: 'nowrap',
+    margin: '0 7px',
+  },
+  link: {
+    display: 'block',
+    textDecoration: link.textDecoration,
+    cursor: link.cursor,
+    color: {
+      default: link.color,
+      ':hover': link.colorHover,
+    },
+    background: {
+      default: 'inherit',
+      ':hover': 'rgb(227, 226, 224) none repeat scroll 0% 0%',
+    },
+    marginBottom: '2px',
+    borderRadius: tokens.borderRadius,
+  },
+  chain: {
+    display: 'inline',
+    width: '12px',
+    height: '12px',
+    marginRight: '4px',
+    verticalAlign: 'middle',
+  },
+  address: {
+    display: 'inline',
+    fontSize: '.7rem',
+    lineHeight: 1.2,
+    whiteSpace: 'nowrap',
+    backgroundImage: 'linear-gradient(to right, rgba(55, 53, 47, 0.16) 0%, rgba(55, 53, 47, 0.16) 100%)',
+    backgroundRepeat: 'repeat-x',
+    backgroundPosition: '0 100%',
+    backgroundSize: '100% 1px',
+  },
+})
 
 const GalleryUrlField = ({ payload }: GalleryUrlFieldProps) => {
-  if (payload === null) {
-    return (<></>)
+  if (!payload) {
+    return <></>
   }
 
   const regex = /https?:\/\/([0-9A-z.-]+)/
   const result = payload.match(regex)
-  if (result === null) {
-    return (<></>)
+  if (!result) {
+    return <></>
   }
-
   const domain = result[1]
+
   return (
-    <div className="notionate-gallery-url">
-      <a className="notionate-gallery-url-a" href={payload} rel="noreferrer" target="_blank">
-        <svg className="notionate-gallery-url-chain" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+    <div className={`rotion-gallery-url ${Stylex(style.wrapper)}`}>
+      <a className={`rotion-gallery-url-link ${Stylex(style.link)}`} href={payload} rel="noreferrer" target="_blank">
+        <svg className={`rotion-gallery-url-chain ${Stylex(style.chain)}`} width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
           <path fillRule="evenodd" clipRule="evenodd" d="M4.4 3h3.085a3.4 3.4 0 0 1 3.4 3.4v.205A3.4 3.4 0 0 1 7.485 10H7V9h.485A2.4 2.4 0 0 0 9.88 6.61V6.4A2.4 2.4 0 0 0 7.49 4H4.4A2.4 2.4 0 0 0 2 6.4v.205A2.394 2.394 0 0 0 4 8.96v1a3.4 3.4 0 0 1-3-3.35V6.4A3.405 3.405 0 0 1 4.4 3zM12 7.04v-1a3.4 3.4 0 0 1 3 3.36v.205A3.405 3.405 0 0 1 11.605 13h-3.09A3.4 3.4 0 0 1 5.12 9.61V9.4A3.4 3.4 0 0 1 8.515 6H9v1h-.485A2.4 2.4 0 0 0 6.12 9.4v.205A2.4 2.4 0 0 0 8.515 12h3.09A2.4 2.4 0 0 0 14 9.61V9.4a2.394 2.394 0 0 0-2-2.36z"/>
         </svg>
-        <span className="notionate-gallery-url-address">
+        <span className={`rotion-gallery-url-address ${Stylex(style.address)}`}>
           {domain}
         </span>
       </a>
diff --git a/src/ui/components/List/Column.tsx b/src/ui/components/List/Column.tsx
new file mode 100644
index 00000000..bc2ee859
--- /dev/null
+++ b/src/ui/components/List/Column.tsx
@@ -0,0 +1,43 @@
+import React from 'react'
+import ListHandler from './ListHandler'
+import { getLinkPathAndLinkKey } from '../lib'
+import type { GetPageResponse } from '../../../exporter'
+import type { ColumnProps } from './Column.types'
+
+function getSlug (key: string, page: GetPageResponse) {
+  if (!('properties' in page)) {
+    return 'not-found-properties'
+  }
+  if (key === 'id') {
+    return page.id
+  }
+  if (!(key in page.properties)) {
+    return 'not-found-key-in-page-properties'
+  }
+  const p = page.properties[key]
+  if (!('rich_text' in p)) {
+    return 'not-found-richtext-in-key'
+  }
+  // @ts-ignore
+  return p.rich_text.map(v => v.text.content).join(',')
+}
+
+const Column = ({ name, page, href, link, query }: ColumnProps) => {
+  const [path, slugKey] = getLinkPathAndLinkKey(href)
+
+  if (name === 'spacer' || name === 'dashed' || !('property_items' in page) || !('properties' in page)) {
+    return <></>
+  }
+  let propertyId = ''
+  for (const [k, v] of Object.entries(page.properties)) {
+    if (k === name) {
+      propertyId = v.id
+    }
+  }
+  const items = page.property_items.find(v => ((v.object === 'property_item' && v.id === propertyId) || (v.object === 'list' && v.property_item.id === propertyId)))
+  const slug = getSlug(slugKey, page)
+
+  return <ListHandler name={name} items={items} path={path} slug={slug} link={link} query={query} />
+}
+
+export default Column
diff --git a/src/ui/components/List/Column.types.ts b/src/ui/components/List/Column.types.ts
new file mode 100644
index 00000000..251006bb
--- /dev/null
+++ b/src/ui/components/List/Column.types.ts
@@ -0,0 +1,11 @@
+import type { PageObjectResponseEx } from '../../../exporter'
+import type { ParsedUrlQueryInput } from 'node:querystring'
+import type { Link } from '../types'
+
+export interface ColumnProps {
+  name: string
+  page: PageObjectResponseEx
+  href: string
+  link?: Link
+  query?: ParsedUrlQueryInput
+}
diff --git a/src/ui/components/List/List.stories.tsx b/src/ui/components/List/List.stories.tsx
new file mode 100644
index 00000000..fb0a67a4
--- /dev/null
+++ b/src/ui/components/List/List.stories.tsx
@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import type { FetchDatabaseRes } from '../../../exporter'
+import List from './List'
+import response from '../../fixtures/fetch_database_response.json'
+
+const meta = {
+  title: 'Database/List',
+  component: List,
+  args: {
+    keys: ['Name', 'spacer', 'Note', 'Published', 'Tags', 'Url', 'Born', 'Date'],
+    db: response as FetchDatabaseRes,
+    href: '/blog/[id]',
+    link: undefined,
+    query: undefined,
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof List>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const Dashed: Story = {
+  args: {
+    keys: ['Name', 'Note', 'dashed', 'Published', 'Tags', 'Url', 'Born', 'Date'],
+    db: response as FetchDatabaseRes,
+    href: '/blog/[id]',
+  }
+}
diff --git a/src/ui/components/List/List.tsx b/src/ui/components/List/List.tsx
index 68b01342..b62f5c32 100644
--- a/src/ui/components/List/List.tsx
+++ b/src/ui/components/List/List.tsx
@@ -1,57 +1,80 @@
 import React from 'react'
-import type {
-  GetPageResponse,
-  PageObjectResponseEx,
-} from '../../../exporter'
+import Column from './Column'
+import type { PageObjectResponseEx } from '../../../exporter'
 import type { ListProps } from './List.types'
-import ListHandler from './ListHandler'
-import { getLinkPathAndLinkKey } from '../lib'
+import Stylex from '@stylexjs/stylex'
+import { tokens, link } from '../tokens.stylex'
 
-const List: React.FC<ListProps> = ({ keys, db, href, link, query }) => {
-  const getSlug = (key: string, page: GetPageResponse): string => {
-    if (!('properties' in page)) {
-      return 'not-found-properties'
-    }
-    if (key === 'id') {
-      return page.id
-    }
-    if (!(key in page.properties)) {
-      return 'not-found-key-in-page-properties'
-    }
-    const p = page.properties[key]
-    if (!('rich_text' in p)) {
-      return 'not-found-richtext-in-key'
-    }
-    // @ts-ignore
-    return p.rich_text.map(v => v.text.content).join(',')
-  }
-
-  const [path, slugKey] = getLinkPathAndLinkKey(href)
-
-  const dbf = (name: string, page: PageObjectResponseEx) => {
-    if (name === 'spacer' || !('property_items' in page) || !('properties' in page)) {
-      return <></>
-    }
-    let propertyId = ''
-    for (const [k, v] of Object.entries(page.properties)) {
-      if (k === name) {
-        propertyId = v.id
-      }
-    }
-    const items = page.property_items.find(v => ((v.object === 'property_item' && v.id === propertyId) || (v.object === 'list' && v.property_item.id === propertyId)))
-    const slug = getSlug(slugKey, page)
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    margin: 0,
+    padding: 0,
+    overflowX: 'scroll',
+  },
+  inner: {
+    margin: 0,
+    padding: '0 0 .8rem',
+    maxWidth: '100%',
+    minWidth: '1200px',
+  },
+  line: {
+    display: 'flex',
+    margin: '4px 0',
+    padding: '4px 0',
+    userSelect: 'none',
+    transition: 'background 20ms ease-in 0s',
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    backgroundColor: {
+      default: link.backgroundColor,
+      ':hover': link.backgroundColorHover,
+    },
+  },
+  spacer: {
+    width: '100%',
+    flexShrink: 10,
+    display: 'block',
+    marginLeft: '14px',
+  },
+  dashed: {
+    width: '100%',
+    flexShrink: 10,
+    display: 'block',
+    marginLeft: '14px',
+    borderTop: '1px dashed #999',
+  },
+})
 
-    return ListHandler({ name, items, path, slug, link, query })
+function columnClassName (name: string, i: number) {
+  const classArray = [`rotion-list-column${i}`]
+  switch (name) {
+    case 'spacer':
+      classArray.push('rotion-list-spacer')
+      classArray.push(Stylex(style.spacer))
+      break
+    case 'dashed':
+      classArray.push('rotion-list-dashed')
+      classArray.push(Stylex(style.dashed))
+      break
   }
+  return classArray.join(' ')
+}
+
+export interface ListHeaderProps {
+  keys: string[]
+}
 
+const List = ({ keys, db, href, link, query }: ListProps) => {
   return (
-    <div className="notionate-list">
-      <div className="notionate-list-inner">
-        {db.results.map((v) => (
-          <div key={v.id} className="notionate-list-record">
+    <div className={`rotion-list ${Stylex(style.wrapper)}`}>
+      <div className={`rotion-list-inner ${Stylex(style.inner)}`}>
+        {db.results.map((v: PageObjectResponseEx) => (
+          <div key={v.id} className={`rotion-list-line ${Stylex(style.line)}`}>
             {keys.map((name, i) => (
-              <div key={`${v.id}${name}`} className={`${name === 'spacer' ? 'notionate-list-spacer ' : ''}field${i}`}>
-                {dbf(name, v as PageObjectResponseEx)}
+              <div key={`${v.id}${name}`} className={columnClassName(name, i)}>
+                <Column name={name} page={v} href={href} link={link} query={query} />
               </div>
             ))}
           </div>
diff --git a/src/ui/components/List/ListCheckboxField/ListCheckboxField.tsx b/src/ui/components/List/ListCheckboxField/ListCheckboxField.tsx
index 1529f8da..559bd06f 100644
--- a/src/ui/components/List/ListCheckboxField/ListCheckboxField.tsx
+++ b/src/ui/components/List/ListCheckboxField/ListCheckboxField.tsx
@@ -1,9 +1,17 @@
 import React from 'react'
 import type { ListCheckboxFieldProps } from './ListCheckboxField.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+  },
+})
 
 const ListCheckboxField = ({ payload }: ListCheckboxFieldProps) => {
   return (
-    <div className="notionate-list-checkbox">
+    <div className={`rotion-list-checkbox ${Stylex(style.wrapper)}`}>
       {payload}
     </div>
   )
diff --git a/src/ui/components/List/ListDateField/ListDateField.tsx b/src/ui/components/List/ListDateField/ListDateField.tsx
index 5569e64a..f2265b50 100644
--- a/src/ui/components/List/ListDateField/ListDateField.tsx
+++ b/src/ui/components/List/ListDateField/ListDateField.tsx
@@ -1,9 +1,24 @@
 import React from 'react'
 import type { ListDateFieldProps } from './ListDateField.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    whiteSpace: 'nowrap',
+    fontSize: '.85rem',
+    display: 'flex',
+    alignItems: 'center',
+    margin: '0 7px',
+    minWidth: '20px',
+    color: '#999',
+  },
+})
 
 const ListDateField = ({ payload }: ListDateFieldProps) => {
   return (
-    <div className="notionate-list-date">
+    <div className={`rotion-list-date ${Stylex(style.wrapper)}`}>
       {payload?.start}
     </div>
   )
diff --git a/src/ui/components/List/ListHandler.tsx b/src/ui/components/List/ListHandler.tsx
index 0dd59676..4ab5d9ad 100644
--- a/src/ui/components/List/ListHandler.tsx
+++ b/src/ui/components/List/ListHandler.tsx
@@ -24,10 +24,10 @@ const ListHandler = ({ name, items, path, slug, link, query }: ListHandlerProps)
     switch (target.type) {
       case 'title': { // Skip: Unexpected lexical declaration in case block.
         const payload = items.results as Array<TitlePropertyItemObjectResponse>
-        return ListTitleField({ payload, path, slug, link, query })
+        return <ListTitleField payload={payload} path={path} slug={slug} link={link} query={query} />
       }
       case 'rich_text':
-        return ListRichTextField({ payload: target })
+        return <ListRichTextField payload={target} />
       case 'people':
       case 'relation':
       case 'rollup':
@@ -38,17 +38,17 @@ const ListHandler = ({ name, items, path, slug, link, query }: ListHandlerProps)
   } else {
     switch (items.type) {
       case 'date':
-        return ListDateField({ payload: items.date })
+        return <ListDateField payload={items.date} />
       case 'rich_text':
-        return ListRichTextField({ payload: items })
+        return <ListRichTextField payload={items} />
       case 'multi_select':
-        return ListMultiSelectField({ payload: items, path })
+        return <ListMultiSelectField payload={items} path={path} />
       case 'url':
-        return ListUrlField({ payload: items.url })
+        return <ListUrlField payload={items.url} />
       case 'checkbox':
-        return ListCheckboxField({ payload: items.checkbox })
+        return <ListCheckboxField payload={items.checkbox} />
       case 'number':
-        return ListNumberField({ payload: items })
+        return <ListNumberField payload={items} />
       case 'select':
       case 'status':
       case 'email':
diff --git a/src/ui/components/List/ListMultiSelectField/LinkedTagIfLinked.tsx b/src/ui/components/List/ListMultiSelectField/LinkedTagIfLinked.tsx
new file mode 100644
index 00000000..e088b886
--- /dev/null
+++ b/src/ui/components/List/ListMultiSelectField/LinkedTagIfLinked.tsx
@@ -0,0 +1,90 @@
+import React from 'react'
+import type { LinkedTagIfLinkedProps } from './LinkedTagIfLinked.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens, colors, link } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    textDecoration: link.textDecoration,
+    color: 'inherit',
+    cursor: link.cursor,
+    padding: '2px 10px',
+    borderRadius: tokens.borderRadius,
+  },
+  default: {
+    color: colors.default,
+    backgroundColor: colors.bgDefault,
+  },
+  gray: {
+    color: colors.gray,
+    backgroundColor: colors.bgGray,
+  },
+  brown: {
+    color: colors.brown,
+    backgroundColor: colors.bgBrown,
+  },
+  orange: {
+    color: colors.orange,
+    backgroundColor: colors.bgOrange,
+  },
+  yellow: {
+    color: colors.yellow,
+    backgroundColor: colors.bgYellow,
+  },
+  green: {
+    color: colors.green,
+    backgroundColor: colors.bgGreen,
+  },
+  blue: {
+    color: colors.blue,
+    backgroundColor: colors.bgBlue,
+  },
+  purple: {
+    color: colors.purple,
+    backgroundColor: colors.bgPurple,
+  },
+  pink: {
+    color: colors.orange,
+    backgroundColor: colors.bgOrange,
+  },
+  red: {
+    color: colors.red,
+    backgroundColor: colors.bgRed,
+  },
+})
+
+const LinkedTagIfLinked = ({ color, pathname, link, query, children }: LinkedTagIfLinkedProps) => {
+  const href = query ? { pathname, query } : pathname
+
+  const className = (color: string) => {
+    // @ts-ignore
+    const s = Stylex(style[color])
+    return `rotion-list-multiselect-link rotion-list-select-${color} ${Stylex(style.wrapper)} ${s}`
+  }
+
+  if (href === '') {
+    return (
+      <span className={className(color)}>
+        {children}
+      </span>
+    )
+  }
+
+  if (link) {
+    const Link = link
+    return (
+      <Link className={className(color)} href={href}>
+        {children}
+      </Link>
+    )
+  }
+
+  return (
+    <a className={className(color)} href={pathname}>
+      {children}
+    </a>
+  )
+}
+
+export default LinkedTagIfLinked
diff --git a/src/ui/components/List/ListMultiSelectField/LinkedTagIfLinked.types.ts b/src/ui/components/List/ListMultiSelectField/LinkedTagIfLinked.types.ts
new file mode 100644
index 00000000..680487c0
--- /dev/null
+++ b/src/ui/components/List/ListMultiSelectField/LinkedTagIfLinked.types.ts
@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react'
+import type { ParsedUrlQueryInput } from 'node:querystring'
+import type { Link } from '../../types'
+
+export interface LinkedTagIfLinkedProps {
+  pathname: string
+  color: string
+  link?: Link
+  query?: ParsedUrlQueryInput
+  children?: ReactNode
+}
diff --git a/src/ui/components/List/ListMultiSelectField/ListMultiSelectField.tsx b/src/ui/components/List/ListMultiSelectField/ListMultiSelectField.tsx
index b3b1595a..bd40e6a4 100644
--- a/src/ui/components/List/ListMultiSelectField/ListMultiSelectField.tsx
+++ b/src/ui/components/List/ListMultiSelectField/ListMultiSelectField.tsx
@@ -1,40 +1,43 @@
 import React from 'react'
 import type { ListMultiSelectFieldProps } from './ListMultiSelectField.types'
+import LinkedTagIfLinked from './LinkedTagIfLinked'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    listStyleType: 'none',
+    display: 'flex',
+    flexShrink: 0,
+    alignItems: 'center',
+    padding: 0,
+    margin: '0 7px',
+    maxWidth: '400px',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+  li: {
+    fontSize: '.75rem',
+    display: 'flex',
+    alignItems: 'center',
+    flexShrink: 0,
+    minWidth: 0,
+    padding: 0,
+    margin: '0 6px 0 0',
+  },
+})
 
 const ListMultiSelectField = ({ payload, path, link, query }: ListMultiSelectFieldProps) => {
-  const LinkedTag = (name: string) => {
-    const href = `${path}tags/${encodeURIComponent(name)}`
-    if (link && query) {
-      const Link = link
-      return (
-        <>
-          <Link className="notionate-list-multiselect-a" href={{ pathname: href, query }}>
-            {name}
-          </Link>
-        </>
-      )
-    } else if (link) {
-      const Link = link
-      return (
-        <>
-          <Link className="notionate-list-multiselect-a" href={href}>
-            {name}
-          </Link>
-        </>
-      )
-    }
-    return (
-      <a className="notionate-list-multiselect-a" href={href} title={name}>
-        {name}
-      </a>
-    )
-  }
+  const { multi_select } = payload
 
   return (
-    <ul className="notionate-list-multiselect-ul">
-      {payload.multi_select.map(f => (
-        <li key={f.id} className={`notionate-list-multiselect-li notionate-select-${f.color}`}>
-          {LinkedTag(f.name)}
+    <ul className={`rotion-list-multiselect-ul ${Stylex(style.wrapper)}`}>
+      {multi_select.map(v => (
+        <li key={v.id} className={`rotion-list-multiselect-li ${Stylex(style.li)}`}>
+          <LinkedTagIfLinked pathname={path ? `${path}tags/${encodeURIComponent(v.name)}` : ''} color={v.color} link={link} query={query}>
+            {v.name}
+          </LinkedTagIfLinked>
         </li>
       ))}
     </ul>
diff --git a/src/ui/components/List/ListNumberField/ListNumberField.tsx b/src/ui/components/List/ListNumberField/ListNumberField.tsx
index c57984ce..32fe8698 100644
--- a/src/ui/components/List/ListNumberField/ListNumberField.tsx
+++ b/src/ui/components/List/ListNumberField/ListNumberField.tsx
@@ -1,9 +1,23 @@
 import React from 'react'
 import type { ListNumberFieldProps } from './ListNumberField.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    whiteSpace: 'nowrap',
+    fontSize: '.85rem',
+    display: 'flex',
+    alignItems: 'center',
+    margin: '0 7px',
+    minWidth: '20px',
+  },
+})
 
 const ListNumberField = ({ payload }: ListNumberFieldProps) => {
   return (
-    <div className="notionate-list-number">
+    <div className={`rotion-list-number ${Stylex(style.wrapper)}`}>
       {payload.number}
     </div>
   )
diff --git a/src/ui/components/List/ListRichTextField/ListRichTextField.tsx b/src/ui/components/List/ListRichTextField/ListRichTextField.tsx
index ff0460fd..3d7096e4 100644
--- a/src/ui/components/List/ListRichTextField/ListRichTextField.tsx
+++ b/src/ui/components/List/ListRichTextField/ListRichTextField.tsx
@@ -1,11 +1,28 @@
 import React from 'react'
-import TextBlock from '../../Page/TextBlock/TextBlock'
+import { RichText } from '../../Page/RichText'
 import type { ListRichTextFieldProps } from './ListRichTextField.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    fontSize: '.85rem',
+    whiteSpace: 'nowrap',
+    display: 'block',
+    margin: '0 .5rem',
+    padding: '0 .5rem',
+    maxWidth: '25rem',
+    color: '#777',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+  },
+})
 
 const ListRichTextField = ({ payload }: ListRichTextFieldProps) => {
   return (
-    <div className="notionate-list-richtext">
-      <TextBlock tag="span" block={[payload.rich_text]} />
+    <div className={`rotion-list-richtext ${Stylex(style.wrapper)}`}>
+      <RichText textObject={payload.rich_text} />
     </div>
   )
 }
diff --git a/src/ui/components/List/ListTitleField/LinkedTitle.tsx b/src/ui/components/List/ListTitleField/LinkedTitle.tsx
new file mode 100644
index 00000000..e07f2e33
--- /dev/null
+++ b/src/ui/components/List/ListTitleField/LinkedTitle.tsx
@@ -0,0 +1,40 @@
+import React from 'react'
+import Stylex from '@stylexjs/stylex'
+import { tokens, link } from '../../tokens.stylex'
+import type { LinkedTitleProps } from './LinkedTitle.types'
+
+const style = Stylex.create({
+  link: {
+    fontFamily: tokens.fontFamily,
+    textDecoration: link.textDecoration,
+    borderBottom: link.borderBottom,
+    color: 'inherit',
+    cursor: link.cursor,
+  },
+})
+
+const LinkedTitle = ({ title, href, link, query }: LinkedTitleProps) => {
+  if (link && query) {
+    const Link = link
+    return (
+      <Link className={`rotion-list-title-link ${Stylex(style.link)}`} href={{ pathname: href, query }}>
+        {title}
+      </Link>
+    )
+  } else if (link) {
+    const Link = link
+    return (
+      <Link className={`rotion-list-title-link ${Stylex(style.link)}`} href={href}>
+        {title}
+      </Link>
+    )
+  }
+
+  return (
+    <a className={`rotion-list-title-link ${Stylex(style.link)}`} href={href} title={title}>
+      {title}
+    </a>
+  )
+}
+
+export default LinkedTitle
diff --git a/src/ui/components/List/ListTitleField/LinkedTitle.types.ts b/src/ui/components/List/ListTitleField/LinkedTitle.types.ts
new file mode 100644
index 00000000..653381c9
--- /dev/null
+++ b/src/ui/components/List/ListTitleField/LinkedTitle.types.ts
@@ -0,0 +1,9 @@
+import type { ParsedUrlQueryInput } from 'node:querystring'
+import type { Link } from '../../types'
+
+export interface LinkedTitleProps {
+  title: string
+  href: string
+  link?: Link
+  query?: ParsedUrlQueryInput
+}
diff --git a/src/ui/components/List/ListTitleField/ListTitleField.tsx b/src/ui/components/List/ListTitleField/ListTitleField.tsx
index 49ae3786..0c47cd0c 100644
--- a/src/ui/components/List/ListTitleField/ListTitleField.tsx
+++ b/src/ui/components/List/ListTitleField/ListTitleField.tsx
@@ -1,5 +1,21 @@
 import React from 'react'
 import type { ListTitleFieldProps } from './ListTitleField.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../../tokens.stylex'
+import LinkedTitle from './LinkedTitle'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    whiteSpace: 'nowrap',
+    display: 'block',
+    maxWidth: '500px',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    lineHeight: 1.4,
+    margin: '0 7px',
+  },
+})
 
 const ListTitleField = ({ payload, path, slug, link, query }: ListTitleFieldProps) => {
   const title = payload.map(v => {
@@ -13,39 +29,12 @@ const ListTitleField = ({ payload, path, slug, link, query }: ListTitleFieldProp
         return richtext.equation.expression
     }
   }).join(',')
-  const href = `${path}${slug}`
 
-  const LinkedTitle = () => {
-    if (link && query) {
-      const Link = link
-      return (
-        <>
-          <Link className="notionate-list-title-a" href={{ pathname: href, query }}>
-            {title}
-          </Link>
-        </>
-      )
-    } else if (link) {
-      const Link = link
-      return (
-        <>
-          <Link className="notionate-list-title-a" href={href}>
-            {title}
-          </Link>
-        </>
-      )
-    }
-
-    return (
-      <a className="notionate-list-title-a" href={href} title={title}>
-        {title}
-      </a>
-    )
-  }
+  const href = `${path}${slug}`
 
   return (
-    <div className="notionate-list-title">
-      {LinkedTitle()}
+    <div className={`rotion-list-title ${Stylex(style.wrapper)}`}>
+      <LinkedTitle title={title} href={href} link={link} query={query} />
     </div>
   )
 }
diff --git a/src/ui/components/List/ListUrlField/ListUrlField.tsx b/src/ui/components/List/ListUrlField/ListUrlField.tsx
index 2a37a6b0..243f80bd 100644
--- a/src/ui/components/List/ListUrlField/ListUrlField.tsx
+++ b/src/ui/components/List/ListUrlField/ListUrlField.tsx
@@ -1,25 +1,68 @@
 import React from 'react'
 import type { ListUrlFieldProps } from './ListUrlField.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens, link } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    display: 'flex',
+    whiteSpace: 'nowrap',
+    margin: '0 7px',
+  },
+  link: {
+    display: 'block',
+    textDecoration: link.textDecoration,
+    cursor: link.cursor,
+    padding: '0 5px 4px',
+    color: {
+      default: link.color,
+      ':hover': link.colorHover,
+    },
+    background: {
+      default: 'inherit',
+      ':hover': 'rgb(227, 226, 224) none repeat scroll 0% 0%',
+    },
+    borderRadius: tokens.borderRadius,
+  },
+  chain: {
+    display: 'inline',
+    width: '12px',
+    height: '12px',
+    marginRight: '4px',
+    verticalAlign: 'middle',
+  },
+  address: {
+    display: 'inline',
+    fontSize: '.7rem',
+    lineHeight: 1.2,
+    whiteSpace: 'nowrap',
+    backgroundImage: 'linear-gradient(to right, rgba(55, 53, 47, 0.16) 0%, rgba(55, 53, 47, 0.16) 100%)',
+    backgroundRepeat: 'repeat-x',
+    backgroundPosition: '0 100%',
+    backgroundSize: '100% 1px',
+  },
+})
 
 const ListUrlField = ({ payload }: ListUrlFieldProps) => {
-  if (payload === null) {
-    return (<></>)
+  if (!payload) {
+    return <></>
   }
 
   const regex = /https?:\/\/([0-9A-z.-]+)/
   const result = payload.match(regex)
-  if (result === null) {
-    return (<></>)
+  if (!result) {
+    return <></>
   }
 
   const domain = result[1]
   return (
-    <div className="notionate-list-url">
-      <a className="notionate-list-url-a" href={payload} rel="noreferrer" target="_blank">
-        <svg className="notionate-list-url-chain" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+    <div className={`rotion-list-url ${Stylex(style.wrapper)}`}>
+      <a className={`rotion-list-url-link ${Stylex(style.link)}`} href={payload} rel="noreferrer" target="_blank">
+        <svg className={`rotion-list-url-chain ${Stylex(style.chain)}`} width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
           <path fillRule="evenodd" clipRule="evenodd" d="M4.4 3h3.085a3.4 3.4 0 0 1 3.4 3.4v.205A3.4 3.4 0 0 1 7.485 10H7V9h.485A2.4 2.4 0 0 0 9.88 6.61V6.4A2.4 2.4 0 0 0 7.49 4H4.4A2.4 2.4 0 0 0 2 6.4v.205A2.394 2.394 0 0 0 4 8.96v1a3.4 3.4 0 0 1-3-3.35V6.4A3.405 3.405 0 0 1 4.4 3zM12 7.04v-1a3.4 3.4 0 0 1 3 3.36v.205A3.405 3.405 0 0 1 11.605 13h-3.09A3.4 3.4 0 0 1 5.12 9.61V9.4A3.4 3.4 0 0 1 8.515 6H9v1h-.485A2.4 2.4 0 0 0 6.12 9.4v.205A2.4 2.4 0 0 0 8.515 12h3.09A2.4 2.4 0 0 0 14 9.61V9.4a2.394 2.394 0 0 0-2-2.36z"/>
         </svg>
-        <span className="notionate-list-url-address">
+        <span className={`rotion-list-url-address ${Stylex(style.address)}`}>
           {domain}
         </span>
       </a>
diff --git a/src/ui/components/Page/BookmarkBlock/BookmarkBlock.stories.tsx b/src/ui/components/Page/BookmarkBlock/BookmarkBlock.stories.tsx
new file mode 100644
index 00000000..430d62da
--- /dev/null
+++ b/src/ui/components/Page/BookmarkBlock/BookmarkBlock.stories.tsx
@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import type { BookmarkBlockObjectResponseEx } from '../../../../exporter'
+import BookmarkBlock from './BookmarkBlock'
+
+const block: BookmarkBlockObjectResponseEx = {
+  object: 'block',
+  id: '12345678-1234-1234-1234-1234567890ab',
+  type: 'bookmark',
+  parent: {
+    type: 'page_id',
+    page_id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  bookmark: {
+    url: 'https://github.com',
+    caption: [],
+    site: {
+      title: 'GitHub: Let’s build from here',
+      desc: 'GitHub is where over 100 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and fea...',
+      image: 'https://github.githubassets.com/assets/campaign-social-031d6161fa10.png',
+      icon: 'https://github.com/fluidicon.png',
+    }
+  },
+  created_time: '2024-01-07T01:52:00.000Z',
+  last_edited_time: '2024-01-07T01:52:00.000Z',
+  created_by: {
+    object: 'user',
+    id: '12345678-1234-1234-1234-1234567890ab'
+  },
+  last_edited_by: {
+    object: 'user',
+    id: '12345678-1234-1234-1234-1234567890ab'
+  },
+  has_children: false,
+  archived: false,
+}
+
+const meta = {
+  title: 'Page/BookmarkBlock',
+  component: BookmarkBlock,
+  args: {
+    block,
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof BookmarkBlock>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+const emptyBookmark = structuredClone(block)
+emptyBookmark.bookmark.site.title = ''
+emptyBookmark.bookmark.site.desc = ''
+emptyBookmark.bookmark.site.image = ''
+export const Empty: Story = {
+  args: {
+    block: emptyBookmark,
+  },
+}
diff --git a/src/ui/components/Page/BookmarkBlock/BookmarkBlock.tsx b/src/ui/components/Page/BookmarkBlock/BookmarkBlock.tsx
index 54c57bf2..2309afdb 100644
--- a/src/ui/components/Page/BookmarkBlock/BookmarkBlock.tsx
+++ b/src/ui/components/Page/BookmarkBlock/BookmarkBlock.tsx
@@ -1,37 +1,154 @@
 import React from 'react'
-import TextBlock from '../TextBlock/TextBlock'
+import { RichText } from '../RichText'
 import type { BookmarkBlockProps } from './BookmarkBlock.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens, link } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  bookmark: {
+    fontFamily: tokens.fontFamily,
+    padding: '.5rem 0',
+    lineHeight: 1,
+    marginTop: '.4rem',
+  },
+  box: {
+    border: '1px solid #EEE',
+    borderRadius: tokens.borderRadius,
+    fontSize: '.75rem',
+    padding: 0,
+    display: {
+      default: 'flex',
+      '@media (max-width: 580px)': 'block',
+    },
+    cursor: 'pointer',
+    position: 'relative',
+    backgroundColor: {
+      default: link.backgroundColor,
+      ':hover': link.backgroundColorHover,
+    },
+    overflow: 'hidden',
+  },
+  text: {
+    flex: '4 1 180px',
+    padding: '.7rem 1rem 0',
+    lineHeight: 1.7,
+    alignSelf: 'start',
+    overflow: 'hidden',
+  },
+  image: {
+    flex: '1 1 180px',
+    margin: 0,
+    padding: 0,
+    lineHeight: 1,
+    overflow: 'hidden',
+    height: '108px',
+    display: {
+      default: 'block',
+      '@media (max-width: 580px)': 'none',
+    },
+  },
+  img: {
+    display: 'block',
+    objectFit: 'cover',
+    borderRadius: '1px',
+    background: 'rgb(25, 25, 25)',
+    width: '100%',
+    height: '100%',
+  },
+  title: {
+    fontSize: '.9rem',
+    width: '100%',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    display: 'block',
+    marginBottom: '2px',
+  },
+  desc: {
+    color: '#999',
+    lineHeight: '16px',
+    fontSize: '12px',
+    height: '32px',
+    overflow: 'hidden',
+  },
+  url: {
+    fontSize: '12px',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    marginTop: '8px',
+    position: {
+      default: 'relative',
+      '@media (max-width: 580px)': 'static',
+    },
+    padding: {
+      default: 0,
+      '@media (max-width: 580px)': '1rem 0 .85rem',
+    },
+  },
+  favicon: {
+    display: 'inline',
+    verticalAlign: 'bottom',
+    marginRight: '10px',
+    marginBottom: '1px',
+  },
+  caption: {
+    margin: '.3rem .3rem 0',
+    textAlign: 'left',
+    color: '#888',
+    fontSize: '.8rem',
+  },
+})
 
 const BookmarkBlock = ({ block }: BookmarkBlockProps) => {
   if (!block.bookmark) {
     return <></>
   }
 
-  const jump = () => window.open(block.bookmark?.url, '_blank', 'noreferrer')
   const { title, desc, icon, image } = block.bookmark.site
+  const jump = () => window.open(block.bookmark?.url, '_blank', 'noreferrer')
   const url = block.bookmark.url
 
+  if (title === '' && desc === '' && image === '') {
+    return (
+      <div className={`rotion-bookmark ${Stylex(style.bookmark)}`}>
+        <div className={`rotion-bookmark-box ${Stylex(style.box)}`} onClick={jump}>
+          <div className={`rotion-bookmark-text ${Stylex(style.text)}`}>
+            <div className={`rotion-bookmark-title ${Stylex(style.title)}`}>
+              {url.substring(url.lastIndexOf('/') + 1)}
+            </div>
+            <div className={`rotion-bookmark-desc ${Stylex(style.desc)}`}>
+              {url}
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
   return (
-    <div className="notionate-blocks-bookmark">
-      <div className="notionate-blocks-bookmark-inner" onClick={jump}>
-        <div className="notionate-blocks-bookmark-text">
-          <div className="notionate-blocks-bookmark-title">
+    <div className={`rotion-bookmark ${Stylex(style.bookmark)}`}>
+      <div className={`rotion-bookmark-box ${Stylex(style.box)}`} onClick={jump}>
+        <div className={`rotion-bookmark-text ${Stylex(style.text)}`}>
+          <div className={`rotion-bookmark-title ${Stylex(style.title)}`}>
             {title}
           </div>
-          <div className="notionate-blocks-bookmark-desc">
+          <div className={`rotion-bookmark-desc ${Stylex(style.desc)}`}>
             {desc}
           </div>
-          <div className="notionate-blocks-bookmark-url">
-            {icon !== '' && <img className="notionate-blocks-bookmark-favicon" src={icon} width="16px" alt="icon" />}
+          <div className={`rotion-bookmark-url ${Stylex(style.url)}`}>
+            {icon !== '' && <img className={`rotion-bookmark-favicon ${Stylex(style.favicon)}`} src={icon} width="16px" alt="icon" />}
             {url}
           </div>
         </div>
-        <div className="notionate-blocks-bookmark-image">
-          {image !== '' && <img src={image} width="200px" height="auto" alt="image" />}
+        <div className={`rotion-bookmark-image ${Stylex(style.image)}`}>
+          {image !== '' && <img className={`rotion-bookmark-img ${Stylex(style.img)}`} src={image} width="200px" height="auto" alt="image" />}
         </div>
       </div>
-      <div className="notionate-blocks-bookmark-caption">
-        <TextBlock tag="span" block={block.bookmark.caption} />
+      <div className={`rotion-bookmark-caption ${Stylex(style.caption)}`}>
+        {block.bookmark.caption.map((v, i) => (
+          <RichText textObject={v} key={`richtext-${i}`} />
+        ))}
       </div>
     </div>
   )
diff --git a/src/ui/components/Page/BreadcrumbBlock/BreadcrumbBlock.stories.tsx b/src/ui/components/Page/BreadcrumbBlock/BreadcrumbBlock.stories.tsx
index 55bbdc7f..facaa456 100644
--- a/src/ui/components/Page/BreadcrumbBlock/BreadcrumbBlock.stories.tsx
+++ b/src/ui/components/Page/BreadcrumbBlock/BreadcrumbBlock.stories.tsx
@@ -1,110 +1,23 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import type { BreadcrumbBlockObjectResponseEx } from '../../../../exporter'
 import BreadcrumbBlock from './BreadcrumbBlock'
-import '../../../styles/base.css'
-import '../../../styles/page.css'
-
-/* Link Preview
-{
-  "object": "block",
-  "id": "9997c8f3-cac4-4d90-928b-f0709e0cbd4b",
-  "parent": {
-    "type": "page_id",
-    "page_id": "23740912-d6ac-4018-ab76-c64e772a342a"
-  },
-  "created_time": "2022-08-06T13:42:00.000Z",
-  "last_edited_time": "2024-01-09T10:10:00.000Z",
-  "created_by": {
-    "object": "user",
-    "id": "c1400938-a445-438b-be9c-2734e5dc90a6"
-  },
-  "last_edited_by": {
-    "object": "user",
-    "id": "a025d50d-8534-48a9-8897-8880be9aa4b8"
-  },
-  "has_children": false,
-  "archived": false,
-  "type": "link_preview",
-  "link_preview": {
-    "url": "https://www.figma.com/file/GfHZFRpWGd0QXsRg9igdw8/Google-Material-Design?node-id=0%3A1"
-  }
-},
-*/
-
-/* File(PDF)
-still a not supported component: file {
-  object: 'block',
-  id: '8b386055-5a2d-4339-812e-5d959f83f07d',
-  parent: { type: 'page_id', page_id: '23740912-d6ac-4018-ab76-c64e772a342a' },
-  created_time: '2024-01-07T02:00:00.000Z',
-  last_edited_time: '2024-01-07T02:00:00.000Z',
-  created_by: { object: 'user', id: 'c1400938-a445-438b-be9c-2734e5dc90a6' },
-  last_edited_by: { object: 'user', id: 'c1400938-a445-438b-be9c-2734e5dc90a6' },
-  has_children: false,
-  archived: false,
-  type: 'file',
-  file: {
-    caption: [],
-    type: 'file',
-    file: {
-      url: 'https://prod-files-secure.s3.us-west-2.amazonaws.com/9c5c8bd8-2326-4257-98e7-557d511c9d37/2c85f471-2d8c-4979-8b38-8a37fca0dd2b/sample.pdf?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240108%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240108T130424Z&X-Amz-Expires=3600&X-Amz-Signature=c080de70c7fc07ba8683c97fa54f04dd143e0024d307327a497810ca6c07b2f9&X-Amz-SignedHeaders=host&x-id=GetObject',
-      expiry_time: '2024-01-08T14:04:24.851Z'
-    },
-    name: 'sample.pdf'
-  }
-}
-*/
-
-/* Synced Block
-still a not supported component: synced_block {
-  object: 'block',
-  id: '59c258ad-832b-40ae-b823-86c6ba589121',
-  parent: { type: 'page_id', page_id: '23740912-d6ac-4018-ab76-c64e772a342a' },
-  created_time: '2024-01-07T01:40:00.000Z',
-  last_edited_time: '2024-01-07T01:40:00.000Z',
-  created_by: { object: 'user', id: 'c1400938-a445-438b-be9c-2734e5dc90a6' },
-  last_edited_by: { object: 'user', id: 'c1400938-a445-438b-be9c-2734e5dc90a6' },
-  has_children: true,
-  archived: false,
-  type: 'synced_block',
-  synced_block: { synced_from: null }
-}
-still a not supported component: synced_block {
-  object: 'block',
-  id: '78d88e3e-188a-41e3-86c4-2a576f6ed8bd',
-  parent: { type: 'page_id', page_id: '23740912-d6ac-4018-ab76-c64e772a342a' },
-  created_time: '2024-01-07T01:40:00.000Z',
-  last_edited_time: '2024-01-07T01:40:00.000Z',
-  created_by: { object: 'user', id: 'c1400938-a445-438b-be9c-2734e5dc90a6' },
-  last_edited_by: { object: 'user', id: 'c1400938-a445-438b-be9c-2734e5dc90a6' },
-  has_children: true,
-  archived: false,
-  type: 'synced_block',
-  synced_block: {
-    synced_from: {
-      type: 'block_id',
-      block_id: '59c258ad-832b-40ae-b823-86c6ba589121'
-    }
-  }
-}
-*/
 
 const block: BreadcrumbBlockObjectResponseEx = {
   object: 'block',
-  id: '',
+  id: '12345678-1234-1234-1234-1234567890ab',
   parent: {
     type: 'page_id',
-    page_id: ''
+    page_id: '12345678-1234-1234-1234-1234567890ab'
   },
   created_time: '2024-01-07T01:52:00.000Z',
   last_edited_time: '2024-01-07T01:52:00.000Z',
   created_by: {
     object: 'user',
-    id: ''
+    id: '12345678-1234-1234-1234-1234567890ab'
   },
   last_edited_by: {
     object: 'user',
-    id: ''
+    id: '12345678-1234-1234-1234-1234567890ab'
   },
   has_children: false,
   archived: false,
@@ -112,7 +25,7 @@ const block: BreadcrumbBlockObjectResponseEx = {
   breadcrumb: {},
   list: [
     {
-      id: 'aaaaaaaaaaaaaaa',
+      id: '12345678-1234-1234-1234-1234567890ab',
       name: 'Foo Bar',
       icon: {
         type: 'external',
@@ -121,7 +34,7 @@ const block: BreadcrumbBlockObjectResponseEx = {
       },
     },
     {
-      id: 'bbbbbbbbbbbbbbbb',
+      id: '12345678-1234-1234-1234-1234567890ab',
       name: 'Alice',
       icon: {
         type: 'external',
diff --git a/src/ui/components/Page/BreadcrumbBlock/BreadcrumbBlock.tsx b/src/ui/components/Page/BreadcrumbBlock/BreadcrumbBlock.tsx
index fe89375b..00fadbb7 100644
--- a/src/ui/components/Page/BreadcrumbBlock/BreadcrumbBlock.tsx
+++ b/src/ui/components/Page/BreadcrumbBlock/BreadcrumbBlock.tsx
@@ -1,72 +1,6 @@
 import React from 'react'
-import { getLinkPathAndLinkKey, queryToString } from '../../lib'
-import type { Breadcrumb } from '../../../../exporter'
-import type { BreadcrumbBlockProps, BreadcrumbLinkProps, BreadcrumbsProps } from './BreadcrumbBlock.types'
-
-function buildPathname (id: string, name: string, href?: string) {
-  if (href === '/') {
-    return href
-  }
-
-  const [path, slugKey] = getLinkPathAndLinkKey(href || '')
-  let file = ''
-
-  if (slugKey === 'id') {
-    file = id
-  } else {
-    file = encodeURIComponent(name.toLowerCase()).replace(/%20/g, '-')
-  }
-
-  return `${path}${file}`
-}
-
-const BreadcrumbLink = ({ breadcrumb, link, href, query, children }: BreadcrumbLinkProps) => {
-  const { id, name } = breadcrumb
-  const pathname = buildPathname(id, name, href)
-
-  if (link && href) {
-    const Link = link
-    return (
-      <Link className="notionate-blocks-breadcrumb-a" href={{ pathname, query }}>
-        {children}
-      </Link>
-    )
-  }
-
-  if (href) {
-    return (
-      <a className="notionate-blocks-breadcrumb-a" href={`${pathname}${queryToString(query)}`}>
-        {children}
-      </a>
-    )
-  }
-
-  return (
-    <span className="notionate-blocks-breadcrumb-a">
-      {children}
-    </span>
-  )
-}
-
-export const Breadcrumbs = ({ list, link, hrefs, query }: BreadcrumbsProps) => {
-  const max = list.length
-  return (
-    <div className="notionate-blocks-breadcrumb">
-      {list.map((v: Breadcrumb, i: number) => (
-        <span key={`crumb-${i}`}>
-          <BreadcrumbLink breadcrumb={v} href={hrefs === undefined ? undefined : hrefs[i]} link={link} query={query}>
-            {v.icon.type === 'emoji' && <span className="notionate-blocks-breadcrumb-emoji">{v.icon.emoji}</span>}
-            {v.icon.type !== 'emoji' && <img className="notionate-blocks-breadcrumb-icon" src={v.icon.src} width={20} height={20} alt={v.name} />}
-            <span className="notionate-blocks-breadcrumb-title">
-              {v.name}
-            </span>
-          </BreadcrumbLink>
-          {i + 1 < max && <span className="notionate-blocks-breadcrumb-slash">/</span>}
-        </span>
-      ))}
-    </div>
-  )
-}
+import Breadcrumbs from './Breadcrumbs'
+import type { BreadcrumbBlockProps } from './BreadcrumbBlock.types'
 
 const BreadcrumbBlock = ({ block, link, hrefs, query }: BreadcrumbBlockProps) => {
   return <Breadcrumbs list={block.list} link={link} hrefs={hrefs} query={query} />
diff --git a/src/ui/components/Page/BreadcrumbBlock/BreadcrumbBlock.types.ts b/src/ui/components/Page/BreadcrumbBlock/BreadcrumbBlock.types.ts
index a35f8bb9..9088be4f 100644
--- a/src/ui/components/Page/BreadcrumbBlock/BreadcrumbBlock.types.ts
+++ b/src/ui/components/Page/BreadcrumbBlock/BreadcrumbBlock.types.ts
@@ -1,22 +1,6 @@
-import type { ReactNode } from 'react'
 import type { ParsedUrlQueryInput } from 'node:querystring'
 import type { Link } from '../../types'
-import type { Breadcrumb, BreadcrumbBlockObjectResponseEx } from '../../../../exporter'
-
-export interface BreadcrumbLinkProps {
-  breadcrumb: Breadcrumb
-  link?: Link
-  href?: string
-  query?: ParsedUrlQueryInput
-  children?: ReactNode
-}
-
-export interface BreadcrumbsProps {
-  list: Breadcrumb[]
-  link?: Link
-  hrefs?: string[]
-  query?: ParsedUrlQueryInput
-}
+import type { BreadcrumbBlockObjectResponseEx } from '../../../../exporter'
 
 export interface BreadcrumbBlockProps {
   block: BreadcrumbBlockObjectResponseEx
diff --git a/src/ui/components/Page/BreadcrumbBlock/Breadcrumbs.tsx b/src/ui/components/Page/BreadcrumbBlock/Breadcrumbs.tsx
new file mode 100644
index 00000000..f186b3f7
--- /dev/null
+++ b/src/ui/components/Page/BreadcrumbBlock/Breadcrumbs.tsx
@@ -0,0 +1,47 @@
+import React from 'react'
+import LinkedBreadcrumbIfLinked from './LinkedBreadcrumbIfLinked'
+import type { Breadcrumb } from '../../../../exporter'
+import type { BreadcrumbsProps } from './Breadcrumbs.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+  },
+  icon: {
+    verticalAlign: 'middle',
+    paddingRight: '.4rem',
+    paddingBottom: '.2rem',
+  },
+  slash: {
+    fontSize: '.9rem',
+    opacity: '.5',
+    padding: '0 .3rem',
+  },
+  title: {
+  },
+})
+
+// Note: This omponent cut out from BreadcrumbBlock. To call the breadcrumb list from other than Page. So, Don't integrate.
+const Breadcrumbs = ({ list, link, hrefs, query }: BreadcrumbsProps) => {
+  const max = list.length
+  return (
+    <div className={`rotion-breadcrumb ${Stylex(style.wrapper)}`}>
+      {list.map((v: Breadcrumb, i: number) => (
+        <span key={`crumb-${i}`}>
+          <LinkedBreadcrumbIfLinked breadcrumb={v} href={hrefs === undefined ? undefined : hrefs[i]} link={link} query={query}>
+            {v.icon.type === 'emoji' && <span className="rotion-breadcrumb-emoji">{v.icon.emoji}</span>}
+            {v.icon.type !== 'emoji' && <img className={`rotion-breadcrumb-icon ${Stylex(style.icon)}`} src={v.icon.src} width={20} height={20} alt={v.name} />}
+            <span className={`rotion-breadcrumb-title ${Stylex(style.title)}`}>
+              {v.name}
+            </span>
+          </LinkedBreadcrumbIfLinked>
+          {i + 1 < max && <span className={`rotion-breadcrumb-slash ${Stylex(style.slash)}`}>/</span>}
+        </span>
+      ))}
+    </div>
+  )
+}
+
+export default Breadcrumbs
diff --git a/src/ui/components/Page/BreadcrumbBlock/Breadcrumbs.types.ts b/src/ui/components/Page/BreadcrumbBlock/Breadcrumbs.types.ts
new file mode 100644
index 00000000..4db1e4f7
--- /dev/null
+++ b/src/ui/components/Page/BreadcrumbBlock/Breadcrumbs.types.ts
@@ -0,0 +1,10 @@
+import type { ParsedUrlQueryInput } from 'node:querystring'
+import type { Link } from '../../types'
+import type { Breadcrumb } from '../../../../exporter'
+
+export interface BreadcrumbsProps {
+  list: Breadcrumb[]
+  link?: Link
+  hrefs?: string[]
+  query?: ParsedUrlQueryInput
+}
diff --git a/src/ui/components/Page/BreadcrumbBlock/LinkedBreadcrumbIfLinked.tsx b/src/ui/components/Page/BreadcrumbBlock/LinkedBreadcrumbIfLinked.tsx
new file mode 100644
index 00000000..22c184c6
--- /dev/null
+++ b/src/ui/components/Page/BreadcrumbBlock/LinkedBreadcrumbIfLinked.tsx
@@ -0,0 +1,71 @@
+import React from 'react'
+import { getLinkPathAndLinkKey, queryToString } from '../../lib'
+import type { LinkedBreadcrumbIfLinkedProps } from './LinkedBreadcrumbIfLinked.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens, link } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  link: {
+    fontSize: '.9rem',
+    padding: '.2rem .3rem',
+    fontFamily: tokens.fontFamily,
+    borderRadius: tokens.borderRadius,
+    backgroundColor: {
+      default: link.backgroundColor,
+      ':hover': link.backgroundColorHover,
+    },
+    cursor: link.cursor,
+    textDecoration: link.textDecoration,
+    color: {
+      default: link.color,
+      ':hover': link.colorHover,
+    },
+  },
+})
+
+function buildPathname (id: string, name: string, href?: string) {
+  if (href === '/') {
+    return href
+  }
+
+  const [path, slugKey] = getLinkPathAndLinkKey(href || '')
+  let file = ''
+
+  if (slugKey === 'id') {
+    file = id
+  } else {
+    file = encodeURIComponent(name.toLowerCase()).replace(/%20/g, '-')
+  }
+
+  return `${path}${file}`
+}
+
+const LinkedBreadcrumbIfLinked = ({ breadcrumb, link, href, query, children }: LinkedBreadcrumbIfLinkedProps) => {
+  const { id, name } = breadcrumb
+  const pathname = buildPathname(id, name, href)
+
+  if (link && href) {
+    const Link = link
+    return (
+      <Link className={`rotion-blocks-breadcrumb-a ${Stylex(style.link)}`} href={{ pathname, query }}>
+        {children}
+      </Link>
+    )
+  }
+
+  if (href) {
+    return (
+      <a className={`rotion-blocks-breadcrumb-a ${Stylex(style.link)}`} href={`${pathname}${queryToString(query)}`}>
+        {children}
+      </a>
+    )
+  }
+
+  return (
+    <span className={`rotion-blocks-breadcrumb-a ${Stylex(style.link)}`}>
+      {children}
+    </span>
+  )
+}
+
+export default LinkedBreadcrumbIfLinked
diff --git a/src/ui/components/Page/BreadcrumbBlock/LinkedBreadcrumbIfLinked.types.ts b/src/ui/components/Page/BreadcrumbBlock/LinkedBreadcrumbIfLinked.types.ts
new file mode 100644
index 00000000..d84a9762
--- /dev/null
+++ b/src/ui/components/Page/BreadcrumbBlock/LinkedBreadcrumbIfLinked.types.ts
@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react'
+import type { ParsedUrlQueryInput } from 'node:querystring'
+import type { Link } from '../../types'
+import type { Breadcrumb } from '../../../../exporter'
+
+export interface LinkedBreadcrumbIfLinkedProps {
+  breadcrumb: Breadcrumb
+  link?: Link
+  href?: string
+  query?: ParsedUrlQueryInput
+  children?: ReactNode
+}
diff --git a/src/ui/components/Page/BreadcrumbBlock/index.ts b/src/ui/components/Page/BreadcrumbBlock/index.ts
index a6fd312f..4ab622bd 100644
--- a/src/ui/components/Page/BreadcrumbBlock/index.ts
+++ b/src/ui/components/Page/BreadcrumbBlock/index.ts
@@ -1,2 +1,3 @@
-import BreadcrumbBlock, { Breadcrumbs } from './BreadcrumbBlock'
+import BreadcrumbBlock from './BreadcrumbBlock'
+import Breadcrumbs from './Breadcrumbs'
 export { BreadcrumbBlock, Breadcrumbs }
diff --git a/src/ui/components/Page/BulletedListBlock/BulletedListBlock.tsx b/src/ui/components/Page/BulletedListBlock/BulletedListBlock.tsx
new file mode 100644
index 00000000..2ec4c4b0
--- /dev/null
+++ b/src/ui/components/Page/BulletedListBlock/BulletedListBlock.tsx
@@ -0,0 +1,44 @@
+import React from 'react'
+import type { BulletedListBlockProps } from './BulletedListBlock.types'
+import { RichText } from '../RichText'
+import { blockType } from '../PageHandler'
+import Page from '../Page'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    lineHeight: 1.5,
+    padding: '.2rem 0 .2rem .3rem',
+    margin: 0,
+  },
+})
+
+const BulletedListBlock = ({ block, href, link, query }: BulletedListBlockProps) => {
+  const CustomTag = blockType[block.type] as keyof JSX.IntrinsicElements
+
+  // @ts-ignore
+  const text = block[block.type]?.rich_text
+
+  if (block.has_children && block.children !== undefined) {
+    return (
+      <CustomTag key={block.id} className={`rotion-bulleted-list ${Stylex(style.wrapper)}`}>
+        {text.map((v, i) => (
+          <RichText textObject={v} key={`richtext-${i}`} />
+        ))}
+        <Page blocks={block.children} href={href} link={link} query={query} />
+      </CustomTag>
+    )
+  }
+
+  return (
+    <CustomTag className={`rotion-bulleted-list ${Stylex(style.wrapper)}`}>
+      {text.map((v, i) => (
+        <RichText textObject={v} key={`richtext-${i}`} />
+      ))}
+    </CustomTag>
+  )
+}
+
+export default BulletedListBlock
diff --git a/src/ui/components/Page/BulletedListBlocks/BulletedListBlocks.types.ts b/src/ui/components/Page/BulletedListBlock/BulletedListBlock.types.ts
similarity index 87%
rename from src/ui/components/Page/BulletedListBlocks/BulletedListBlocks.types.ts
rename to src/ui/components/Page/BulletedListBlock/BulletedListBlock.types.ts
index b237f415..2925ca4b 100644
--- a/src/ui/components/Page/BulletedListBlocks/BulletedListBlocks.types.ts
+++ b/src/ui/components/Page/BulletedListBlock/BulletedListBlock.types.ts
@@ -2,7 +2,7 @@ import type { BulletedListItemBlockObjectResponseEx } from '../../../../exporter
 import type { ParsedUrlQueryInput } from 'node:querystring'
 import type { Link } from '../../types'
 
-export interface BulletedListBlocksProps {
+export interface BulletedListBlockProps {
   block: BulletedListItemBlockObjectResponseEx
   href?: string
   link?: Link
diff --git a/src/ui/components/Page/BulletedListBlock/index.ts b/src/ui/components/Page/BulletedListBlock/index.ts
new file mode 100644
index 00000000..a86e4793
--- /dev/null
+++ b/src/ui/components/Page/BulletedListBlock/index.ts
@@ -0,0 +1,2 @@
+import BulletedListBlock from './BulletedListBlock'
+export { BulletedListBlock }
diff --git a/src/ui/components/Page/BulletedListBlocks/BulletedListBlocks.tsx b/src/ui/components/Page/BulletedListBlocks/BulletedListBlocks.tsx
deleted file mode 100644
index d2af51b0..00000000
--- a/src/ui/components/Page/BulletedListBlocks/BulletedListBlocks.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react'
-import type { BlockObjectResponse } from '../../../../exporter'
-import type { BulletedListBlocksProps } from './BulletedListBlocks.types'
-import TextBlock from '../TextBlock/TextBlock'
-import PageHandler, { blockType } from '../PageHandler'
-
-const BulletedListBlocks = ({ block, href, link, query }: BulletedListBlocksProps) => {
-  const tag = blockType[block.type] as keyof JSX.IntrinsicElements
-
-  // @ts-ignore
-  const text = block[block.type]?.rich_text
-
-  if (block.has_children && block.children !== undefined) {
-    return (
-      <div key={block.id}>
-        <TextBlock tag={tag} block={text} key={`text-${block.id}`} />
-        {block.children.results.map((bb) => (
-          PageHandler({ block: (bb as BlockObjectResponse), href, link, query })
-        ))}
-      </div>
-    )
-  }
-
-  return <TextBlock tag={tag} block={text} key={block.id} />
-}
-
-export default BulletedListBlocks
diff --git a/src/ui/components/Page/BulletedListBlocks/index.ts b/src/ui/components/Page/BulletedListBlocks/index.ts
deleted file mode 100644
index 6dced7fe..00000000
--- a/src/ui/components/Page/BulletedListBlocks/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import BulletedListBlocks from './BulletedListBlocks'
-export { BulletedListBlocks }
diff --git a/src/ui/components/Page/CalloutBlock/CalloutBlock.stories.tsx b/src/ui/components/Page/CalloutBlock/CalloutBlock.stories.tsx
index b5010c70..dcff37c4 100644
--- a/src/ui/components/Page/CalloutBlock/CalloutBlock.stories.tsx
+++ b/src/ui/components/Page/CalloutBlock/CalloutBlock.stories.tsx
@@ -1,8 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import type { CalloutBlockObjectResponseEx, RichTextItemResponse } from '../../../../exporter'
 import CalloutBlock from './CalloutBlock'
-import '../../../styles/base.css'
-import '../../../styles/page.css'
 
 const richText: RichTextItemResponse = {
   type: 'text',
@@ -24,20 +22,20 @@ const richText: RichTextItemResponse = {
 
 const block: CalloutBlockObjectResponseEx = {
   object: 'block',
-  id: '',
+  id: '12345678-1234-1234-1234-1234567890ab',
   parent: {
     type: 'page_id',
-    page_id: '',
+    page_id: '12345678-1234-1234-1234-1234567890ab',
   },
-  created_time: '',
-  last_edited_time: '',
+  created_time: '2020-02-22T22:22:22.000Z',
+  last_edited_time: '2020-02-22T22:22:22.000Z',
   created_by: {
     object: 'user',
-    id: '',
+    id: '12345678-1234-1234-1234-1234567890ab',
   },
   last_edited_by: {
     object: 'user',
-    id: '',
+    id: '12345678-1234-1234-1234-1234567890ab',
   },
   has_children: false,
   archived: false,
@@ -70,12 +68,174 @@ const icon = structuredClone(block)
 icon.callout.icon! = {
   type: 'external',
   external: {
-    url: 'https://www.notion.so/icons/light-bulb_blue.svg?mode=light',
+    url: 'https://www.notion.so/icons/light-bulb_default.svg?mode=light',
   },
-  src: 'https://www.notion.so/icons/light-bulb_blue.svg?mode=light',
+  src: 'https://www.notion.so/icons/light-bulb_gray.svg?mode=light',
 }
 export const Icon: Story = {
   args: {
     block: icon
   }
 }
+
+/* GRAY */
+const gray = structuredClone(icon)
+gray.callout.color = 'gray'
+// @ts-ignore
+gray.callout.icon.src = 'https://www.notion.so/icons/light-bulb_lightgray.svg'
+export const Gray: Story = {
+  args: {
+    block: gray
+  }
+}
+const bgGray = structuredClone(gray)
+bgGray.callout.color = 'gray_background'
+export const BgGray: Story = {
+  args: {
+    block: bgGray
+  }
+}
+
+/* BROWN */
+const brown = structuredClone(icon)
+brown.callout.color = 'brown'
+// @ts-ignore
+brown.callout.icon.src = 'https://www.notion.so/icons/light-bulb_brown.svg'
+export const Brown: Story = {
+  args: {
+    block: brown
+  }
+}
+const bgBrown = structuredClone(brown)
+bgBrown.callout.color = 'brown_background'
+export const BgBrown: Story = {
+  args: {
+    block: bgBrown
+  }
+}
+
+/* ORANGE */
+const orange = structuredClone(icon)
+orange.callout.color = 'orange'
+// @ts-ignore
+orange.callout.icon.src = 'https://www.notion.so/icons/light-bulb_orange.svg'
+export const Orange: Story = {
+  args: {
+    block: orange
+  }
+}
+const bgOrange = structuredClone(orange)
+bgOrange.callout.color = 'orange_background'
+export const BgOrange: Story = {
+  args: {
+    block: bgOrange
+  }
+}
+
+/* YELLOW */
+const yellow = structuredClone(icon)
+yellow.callout.color = 'yellow'
+// @ts-ignore
+yellow.callout.icon.src = 'https://www.notion.so/icons/light-bulb_yellow.svg'
+export const Yellow: Story = {
+  args: {
+    block: yellow
+  }
+}
+const bgYellow = structuredClone(yellow)
+bgYellow.callout.color = 'yellow_background'
+export const BgYellow: Story = {
+  args: {
+    block: bgYellow
+  }
+}
+
+/* GREEN */
+const green = structuredClone(icon)
+green.callout.color = 'green'
+// @ts-ignore
+green.callout.icon.src = 'https://www.notion.so/icons/light-bulb_green.svg'
+export const Green: Story = {
+  args: {
+    block: green
+  }
+}
+const bgGreen = structuredClone(green)
+bgGreen.callout.color = 'green_background'
+export const BgGreen: Story = {
+  args: {
+    block: bgGreen
+  }
+}
+
+/* BLUE */
+const blue = structuredClone(icon)
+blue.callout.color = 'blue'
+// @ts-ignore
+blue.callout.icon.src = 'https://www.notion.so/icons/light-bulb_blue.svg'
+export const Blue: Story = {
+  args: {
+    block: blue
+  }
+}
+const bgBlue = structuredClone(blue)
+bgBlue.callout.color = 'blue_background'
+export const BgBlue: Story = {
+  args: {
+    block: bgBlue
+  }
+}
+
+/* PURPLE */
+const purple = structuredClone(icon)
+purple.callout.color = 'purple'
+// @ts-ignore
+purple.callout.icon.src = 'https://www.notion.so/icons/light-bulb_purple.svg'
+export const Purple: Story = {
+  args: {
+    block: purple
+  }
+}
+const bgPurple = structuredClone(purple)
+bgPurple.callout.color = 'purple_background'
+export const BgPurple: Story = {
+  args: {
+    block: bgPurple
+  }
+}
+
+/* PINK */
+const pink = structuredClone(icon)
+pink.callout.color = 'pink'
+// @ts-ignore
+pink.callout.icon.src = 'https://www.notion.so/icons/light-bulb_pink.svg'
+export const Pink: Story = {
+  args: {
+    block: pink
+  }
+}
+const bgPink = structuredClone(pink)
+bgPink.callout.color = 'pink_background'
+export const BgPink: Story = {
+  args: {
+    block: bgPink
+  }
+}
+
+/* RED */
+const red = structuredClone(icon)
+red.callout.color = 'red'
+// @ts-ignore
+red.callout.icon.src = 'https://www.notion.so/icons/light-bulb_red.svg'
+export const Red: Story = {
+  args: {
+    block: red
+  }
+}
+const bgRed = structuredClone(red)
+bgRed.callout.color = 'red_background'
+export const BgRed: Story = {
+  args: {
+    block: bgRed
+  }
+}
diff --git a/src/ui/components/Page/CalloutBlock/CalloutBlock.tsx b/src/ui/components/Page/CalloutBlock/CalloutBlock.tsx
index 2ffddd3a..ff55c574 100644
--- a/src/ui/components/Page/CalloutBlock/CalloutBlock.tsx
+++ b/src/ui/components/Page/CalloutBlock/CalloutBlock.tsx
@@ -1,10 +1,104 @@
 import React from 'react'
-import TextBlock from '../TextBlock/TextBlock'
+import { RichText } from '../RichText'
 import type { CalloutBlockProps } from './CalloutBlock.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    display: 'flex',
+    padding: '1.2rem',
+    paddingLeft: '1rem',
+    width: 'calc(100% - 2.4rem)',
+    borderRadius: '4px',
+    marginTop: '.6rem',
+  },
+  icon: {
+    width: '24px',
+    height: '24px',
+  },
+  text: {
+    marginLeft: '.6rem',
+    marginTop: '.15rem',
+  },
+  default: {
+    color: 'rgb(55, 53, 47)',
+    backgroundColor: 'rgb(241, 241, 239)',
+  },
+  default_background: {
+    color: 'rgb(55, 53, 47)',
+    border: '1px solid rgba(55, 53, 47, 0.16)',
+  },
+  gray: {
+    color: 'rgb(120, 119, 116)',
+    border: '1px solid rgba(55, 53, 47, 0.16)',
+  },
+  gray_background: {
+    backgroundColor: 'rgb(241, 241, 239)',
+  },
+  brown: {
+    color: 'rgb(159, 107, 83)',
+    border: '1px solid rgba(55, 53, 47, 0.16)',
+  },
+  brown_background: {
+    backgroundColor: 'rgb(244, 238, 238)',
+  },
+  orange: {
+    color: 'rgb(217, 115, 13)',
+    border: '1px solid rgba(55, 53, 47, 0.16)',
+  },
+  orange_background: {
+    backgroundColor: 'rgb(251, 236, 221)',
+  },
+  yellow: {
+    color: 'rgb(203, 145, 47)',
+    border: '1px solid rgba(55, 53, 47, 0.16)',
+  },
+  yellow_background: {
+    backgroundColor: 'rgb(251, 243, 219)',
+  },
+  green: {
+    color: 'rgb(68, 131, 97)',
+    border: '1px solid rgba(55, 53, 47, 0.16)',
+    backgroundColor: 'inherit',
+  },
+  green_background: {
+    backgroundColor: 'rgb(237, 243, 236)',
+  },
+  blue: {
+    color: 'rgb(51, 126, 169)',
+    border: '1px solid rgba(55, 53, 47, 0.16)',
+  },
+  blue_background: {
+    backgroundColor: 'rgb(231, 243, 248)',
+  },
+  purple: {
+    color: 'rgb(144, 101, 176)',
+    border: '1px solid rgba(55, 53, 47, 0.16)',
+  },
+  purple_background: {
+    backgroundColor: 'rgba(244, 240, 247, 0.8)',
+  },
+  pink: {
+    color: 'rgb(193, 76, 138)',
+    border: '1px solid rgba(55, 53, 47, 0.16)',
+  },
+  pink_background: {
+    backgroundColor: 'rgba(249, 238, 243, 0.8)',
+  },
+  red: {
+    color: 'rgb(212, 76, 71)',
+    border: '1px solid rgba(55, 53, 47, 0.16)',
+  },
+  red_background: {
+    backgroundColor: 'rgb(253, 235, 236)',
+  },
+})
 
 const Icon = ({ block }: CalloutBlockProps) => {
-  if (block.callout.icon === null) {
-    return <> </>
+  if (!block.callout.icon) {
+    return <></>
   }
 
   const { type } = block.callout.icon
@@ -15,20 +109,22 @@ const Icon = ({ block }: CalloutBlockProps) => {
     case 'file':
       return <img src={block.callout.icon.src} alt="Icon" />
     default:
-      return <> </>
+      return <></>
   }
 }
 
 const CalloutBlock = ({ block }: CalloutBlockProps) => {
-  const { rich_text } = block.callout
+  const { color, rich_text } = block.callout
 
   return (
-    <div className="notionate-blocks-callout">
-      <div className="notionate-blocks-callout-icon">
-        {<Icon block={block} />}
+    <div className={`rotion-callout rotion-callout-color-${color} ${Stylex(style.wrapper)} ${Stylex(style[color])}`}>
+      <div className={`rotion-callout-icon ${Stylex(style.icon)}`}>
+        <Icon block={block} />
       </div>
-      <div className="notionate-blocks-callout-text">
-        <TextBlock tag="span" block={rich_text} key={`${block.id}-span`} />
+      <div className={`rotion-callout-text ${Stylex(style.text)}`}>
+        {rich_text.map((v, i) => (
+          <RichText textObject={v} key={`richtext-${i}`} />
+        ))}
       </div>
     </div>
   )
diff --git a/src/ui/components/Page/ChildDatabaseBlock/ChildDatabaseBlock.stories.tsx b/src/ui/components/Page/ChildDatabaseBlock/ChildDatabaseBlock.stories.tsx
index 62b70dc9..b7fc5cf8 100644
--- a/src/ui/components/Page/ChildDatabaseBlock/ChildDatabaseBlock.stories.tsx
+++ b/src/ui/components/Page/ChildDatabaseBlock/ChildDatabaseBlock.stories.tsx
@@ -1,8 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import type { ChildDatabaseBlockObjectResponseEx, GetDatabaseResponseEx, RichTextItemResponse } from '../../../../exporter'
 import ChildDatabaseBlock from './ChildDatabaseBlock'
-import '../../../styles/base.css'
-import '../../../styles/page.css'
 
 const richtext: RichTextItemResponse[] = [{
   type: 'text',
diff --git a/src/ui/components/Page/ChildDatabaseBlock/ChildDatabaseBlock.tsx b/src/ui/components/Page/ChildDatabaseBlock/ChildDatabaseBlock.tsx
index 7a355a44..6f2d8c17 100644
--- a/src/ui/components/Page/ChildDatabaseBlock/ChildDatabaseBlock.tsx
+++ b/src/ui/components/Page/ChildDatabaseBlock/ChildDatabaseBlock.tsx
@@ -1,6 +1,41 @@
 import React from 'react'
 import type { ChildDatabaseBlockProps, ChildDatabaseLinkProps } from './ChildDatabaseBlock.types'
 import { getLinkPathAndLinkKey, queryToString } from '../../lib'
+import Stylex from '@stylexjs/stylex'
+import { tokens, link } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    width: '100%',
+  },
+  link: {
+    display: 'grid',
+    gridTemplate: 'repeat(1, 1fr) / 1.5rem 1fr',
+    gap: '.4rem',
+    margin: '.2rem 0 0',
+    padding: '.6rem .3rem',
+    textDecoration: link.textDecoration,
+    color: {
+      default: link.color,
+      ':hover': link.colorHover,
+    },
+    alignItems: 'top',
+    backgroundColor: {
+      default: link.backgroundColor,
+      ':hover': link.backgroundColorHover,
+    },
+    borderRadius: tokens.borderRadius,
+  },
+  title: {
+    borderBottom: '1px solid #ddd',
+    verticalAlign: 'top',
+  },
+  icon: {
+    height: '24px',
+    overflow: 'hidden',
+  },
+})
 
 const ChildDatabaseLink = ({ block, href, link, query, children }: ChildDatabaseLinkProps) => {
   const title = block.child_database.title
@@ -9,7 +44,7 @@ const ChildDatabaseLink = ({ block, href, link, query, children }: ChildDatabase
 
   if (!href) {
     return (
-      <div className="notionate-blocks-childdatabase-a">
+      <div className={`rotion-childdatabase-link ${Stylex(style.link)}`}>
         {children}
       </div>
     )
@@ -20,14 +55,14 @@ const ChildDatabaseLink = ({ block, href, link, query, children }: ChildDatabase
       query = {}
     }
     return (
-      <Link className="notionate-blocks-childdatabase-a" href={{ pathname: `${path}${file}`, query }}>
+      <Link className={`rotion-childdatabase-link ${Stylex(style.link)}`} href={{ pathname: `${path}${file}`, query }}>
         {children}
       </Link>
     )
   }
 
   return (
-    <a href={`${path}${file}${queryToString(query)}`} className="notionate-blocks-childdatabase-a">
+    <a className={`rotion-childdatabase-link ${Stylex(style.link)}`} href={`${path}${file}${queryToString(query)}`}>
       {children}
     </a>
   )
@@ -41,13 +76,13 @@ const ChildDatabaseBlock = ({ block, href, link, query }: ChildDatabaseBlockProp
   const title = block.child_database.title
   if (block.database === null || block.database.icon === undefined || block.database.icon === null) {
     return (
-      <div className="notionate-blocks-childdatabase">
+      <div className={`rotion-childdatabase ${Stylex(style.wrapper)}`}>
         <ChildDatabaseLink block={block} href={href} link={link} query={query}>
-          <span className="notionate-blocks-childdatabase-icon">
+          <span className={`rotion-childdatabase-icon ${Stylex(style.icon)}`}>
             {'️-'}
           </span>
           <div>
-            <span className="notionate-blocks-childdatabase-title">
+            <span className={`rotion-childdatabase-title ${Stylex(style.title)}`}>
               {title}
             </span>
           </div>
@@ -58,13 +93,13 @@ const ChildDatabaseBlock = ({ block, href, link, query }: ChildDatabaseBlockProp
 
   if (block.database.icon.type === 'emoji') {
     return (
-      <div className="notionate-blocks-childdatabase">
+      <div className={`rotion-childdatabase ${Stylex(style.wrapper)}`}>
         <ChildDatabaseLink block={block} href={href} link={link} query={query}>
-          <span className="notionate-blocks-childdatabase-icon">
+          <span className={`rotion-childdatabase-icon ${Stylex(style.icon)}`}>
             {block.database.icon.emoji}
           </span>
           <div>
-            <span className="notionate-blocks-childdatabase-title">
+            <span className={`rotion-childdatabase-title ${Stylex(style.title)}`}>
               {title}
             </span>
           </div>
@@ -75,13 +110,13 @@ const ChildDatabaseBlock = ({ block, href, link, query }: ChildDatabaseBlockProp
 
   // type external or file
   return (
-    <div className="notionate-blocks-childdatabase">
+    <div className={`rotion-childdatabase ${Stylex(style.wrapper)}`}>
       <ChildDatabaseLink block={block} href={href} link={link} query={query}>
-        <span className="notionate-blocks-childdatabase-icon">
-          <img className="notionate-blocks-childdatabase-file-icon" src={block.database.icon.src} alt="Icon" />
+        <span className={`rotion-childdatabase-icon ${Stylex(style.icon)}`}>
+          <img className="rotion-childdatabase-icon-img" src={block.database.icon.src} alt="Icon" />
         </span>
         <div>
-          <span className="notionate-blocks-childdatabase-title">
+          <span className={`rotion-childdatabase-title ${Stylex(style.title)}`}>
             {title}
           </span>
         </div>
diff --git a/src/ui/components/Page/ChildPageBlock/ChildPageBlock.stories.tsx b/src/ui/components/Page/ChildPageBlock/ChildPageBlock.stories.tsx
index 1fd59b11..3a8c6d08 100644
--- a/src/ui/components/Page/ChildPageBlock/ChildPageBlock.stories.tsx
+++ b/src/ui/components/Page/ChildPageBlock/ChildPageBlock.stories.tsx
@@ -1,9 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import type { ChildPageBlockObjectResponseEx, GetPageResponseEx, ListBlockChildrenResponseEx } from '../../../../exporter'
 import ChildPageBlock from './ChildPageBlock'
-import '../../../styles/notionate-dark.css'
-import '../../../styles/base.css'
-import '../../../styles/page.css'
 
 /* Next is Database
 {
diff --git a/src/ui/components/Page/ChildPageBlock/ChildPageBlock.tsx b/src/ui/components/Page/ChildPageBlock/ChildPageBlock.tsx
index a01c21e7..4d457667 100644
--- a/src/ui/components/Page/ChildPageBlock/ChildPageBlock.tsx
+++ b/src/ui/components/Page/ChildPageBlock/ChildPageBlock.tsx
@@ -1,6 +1,41 @@
 import React from 'react'
 import type { ChildPageBlockProps, ChildPageLinkProps } from './ChildPageBlock.types'
 import { getLinkPathAndLinkKey, queryToString } from '../../lib'
+import Stylex from '@stylexjs/stylex'
+import { tokens, link } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    width: '100%',
+  },
+  link: {
+    display: 'grid',
+    gridTemplate: 'repeat(1, 1fr) / 1.5rem 1fr',
+    gap: '.4rem',
+    margin: '.2rem 0 0',
+    padding: '.6rem .3rem',
+    textDecoration: link.textDecoration,
+    color: {
+      default: link.color,
+      ':hover': link.colorHover,
+    },
+    alignItems: 'top',
+    backgroundColor: {
+      default: link.backgroundColor,
+      ':hover': link.backgroundColorHover,
+    },
+    borderRadius: tokens.borderRadius,
+  },
+  title: {
+    borderBottom: '1px solid #ddd',
+    verticalAlign: 'top',
+  },
+  icon: {
+    height: '24px',
+    overflow: 'hidden',
+  },
+})
 
 const ChildPageLink = ({ block, href, link, query, children }: ChildPageLinkProps) => {
   const title = block.child_page.title
@@ -9,7 +44,7 @@ const ChildPageLink = ({ block, href, link, query, children }: ChildPageLinkProp
 
   if (!href) {
     return (
-      <div className="notionate-blocks-childpage-a">
+      <div className={`rotion-childpage-link ${Stylex(style.link)}`}>
         {children}
       </div>
     )
@@ -20,13 +55,13 @@ const ChildPageLink = ({ block, href, link, query, children }: ChildPageLinkProp
       query = {}
     }
     return (
-      <Link className="notionate-blocks-childpage-a" href={{ pathname: `${path}${file}`, query }}>
+      <Link className={`rotion-childpage-link ${Stylex(style.link)}`} href={{ pathname: `${path}${file}`, query }}>
         {children}
       </Link>
     )
   }
   return (
-    <a href={`${path}${file}${queryToString(query)}`} className="notionate-blocks-childpage-a">
+    <a className={`rotion-childpage-link ${Stylex(style.link)}`} href={`${path}${file}${queryToString(query)}`}>
       {children}
     </a>
   )
@@ -40,13 +75,13 @@ const ChildPageBlock = ({ block, href, link, query }: ChildPageBlockProps) => {
   const title = block.child_page.title
   if (block.page === null || block.page.icon === undefined || block.page.icon === null) {
     return (
-      <div className="notionate-blocks-childpage">
+      <div className={`rotion-childpage ${Stylex(style.wrapper)}`}>
         <ChildPageLink block={block} href={href} link={link} query={query}>
-          <span className="notionate-blocks-childpage-icon">
+          <span className={`rotion-childpage-icon ${Stylex(style.icon)}`}>
             {'️-'}
           </span>
           <div>
-            <span className="notionate-blocks-childpage-title">
+            <span className={`rotion-childpage-title ${Stylex(style.title)}`}>
               {title}
             </span>
           </div>
@@ -57,13 +92,13 @@ const ChildPageBlock = ({ block, href, link, query }: ChildPageBlockProps) => {
 
   if (block.page.icon.type === 'emoji') {
     return (
-      <div className="notionate-blocks-childpage">
+      <div className={`rotion-childpage ${Stylex(style.wrapper)}`}>
         <ChildPageLink block={block} href={href} link={link} query={query}>
-          <span className="notionate-blocks-childpage-icon">
+          <span className={`rotion-childpage-icon ${Stylex(style.icon)}`}>
             {block.page.icon.emoji}
           </span>
           <div>
-            <span className="notionate-blocks-childpage-title">
+            <span className={`rotion-childpage-title ${Stylex(style.title)}`}>
               {title}
             </span>
           </div>
@@ -74,13 +109,13 @@ const ChildPageBlock = ({ block, href, link, query }: ChildPageBlockProps) => {
 
   // type external or file
   return (
-    <div className="notionate-blocks-childpage">
+    <div className={`rotion-childpage ${Stylex(style.wrapper)}`}>
       <ChildPageLink block={block} href={href} link={link} query={query}>
-        <span className="notionate-blocks-childpage-icon">
-          <img className="notionate-blocks-childpage-file-icon" src={block.page.icon.src} alt="Icon" />
+        <span className={`rotion-childpage-icon ${Stylex(style.icon)}`}>
+          <img className="rotion-childpage-icon-img" src={block.page.icon.src} alt="Icon" />
         </span>
         <div>
-          <span className="notionate-blocks-childpage-title">
+          <span className={`rotion-childpage-title ${Stylex(style.title)}`}>
             {title}
           </span>
         </div>
diff --git a/src/ui/components/Page/CodeBlock/Code/Code.tsx b/src/ui/components/Page/CodeBlock/Code/Code.tsx
index 373447c5..71b6c853 100644
--- a/src/ui/components/Page/CodeBlock/Code/Code.tsx
+++ b/src/ui/components/Page/CodeBlock/Code/Code.tsx
@@ -1,16 +1,39 @@
 import React, { useEffect, useState } from 'react'
 import type { CodeProps } from './Code.types'
+import Stylex from '@stylexjs/stylex'
+import mermaid from 'mermaid'
+import prism from 'prismjs'
 
-const Code = ({ children, language = 'text', modules }: CodeProps) => {
+const style = Stylex.create({
+  wrapper: {
+    borderRadius: '4px',
+    padding: '.6rem 1rem',
+    backgroundColor: '#f5f2f0',
+    margin: '1rem 0',
+    fontSize: '.8rem',
+    position: 'relative',
+    top: 0,
+    left: 0,
+  },
+  lang: {
+    position: 'absolute',
+    top: '.5rem',
+    left: '.8rem',
+    color: '#999',
+    fontSize: '.75rem',
+    textTransform: 'capitalize',
+    display: 'block',
+  },
+})
+
+const Code = ({ children, language = 'text' }: CodeProps) => {
   const codeRef = React.createRef<HTMLPreElement>()
   const highlight = async (language: string) => {
     if (codeRef.current) {
-      if (language === 'mermaid' && modules?.mermaid) {
-        modules.mermaid.init(undefined, codeRef.current as HTMLPreElement)
-      } else if (modules?.prism) {
-        modules.prism.highlightElement(codeRef.current as Element)
+      if (language === 'mermaid') {
+        mermaid.init(undefined, codeRef.current as HTMLPreElement)
       } else {
-        console.log('block component require prismjs or mermaidjs modules argument')
+        prism.highlightElement(codeRef.current as Element)
       }
     }
   }
@@ -25,8 +48,8 @@ const Code = ({ children, language = 'text', modules }: CodeProps) => {
   }, [language, ''])
 
   return (
-    <div className="notionate-blocks-code" onMouseOver={showLang} onMouseOut={hideLang}>
-      {show && <div className="notionate-blocks-code-lang">
+    <div className={`rotion-code-text ${Stylex(style.wrapper)}`} onMouseOver={showLang} onMouseOut={hideLang}>
+      {show && <div className={`rotion-code-lang ${Stylex(style.lang)}`}>
         {language}
       </div>}
       <pre className={cl}>
diff --git a/src/ui/components/Page/CodeBlock/Code/Code.types.ts b/src/ui/components/Page/CodeBlock/Code/Code.types.ts
index a8b7c14f..48ca30f7 100644
--- a/src/ui/components/Page/CodeBlock/Code/Code.types.ts
+++ b/src/ui/components/Page/CodeBlock/Code/Code.types.ts
@@ -1,8 +1,6 @@
 import type { ReactNode } from 'react'
-import type { ExternalModules } from '../../../types'
 
 export interface CodeProps {
   language: string
-  modules?: ExternalModules
   children?: ReactNode
 }
diff --git a/src/ui/components/Page/CodeBlock/CodeBlock.stories.tsx b/src/ui/components/Page/CodeBlock/CodeBlock.stories.tsx
new file mode 100644
index 00000000..414b2617
--- /dev/null
+++ b/src/ui/components/Page/CodeBlock/CodeBlock.stories.tsx
@@ -0,0 +1,142 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import type { CodeBlockObjectResponse, RichTextItemResponse } from '../../../../exporter'
+import CodeBlock from './CodeBlock'
+
+import 'prismjs/components/prism-bash'
+import 'prismjs/components/prism-go'
+import 'prismjs/components/prism-typescript'
+import 'prismjs/components/prism-sql'
+import 'prismjs/themes/prism.min.css'
+
+const examples = {
+  typescript: `type Text = {
+  href: string
+  anotaion: {
+    color: string
+    bold: boolean
+  }
+}`,
+  bash: `$ hostname
+notion
+$ ps auxf
+...`,
+  go: `func main() {
+    v := "world"
+    fmt.Printf("hello %s!", v)
+}`,
+  sql: 'select id, created_at from users where username = "notion";',
+  mermaid: `sequenceDiagram
+  participant Alice
+  participant Bob
+  Alice->>John: Hello John, how are you?
+  loop Healthcheck
+      John->>John: Fight against hypochondria
+  end
+  Note right of John: Rational thoughts <br/>prevail!
+  John-->>Alice: Great!
+  John->>Bob: How about you?
+  Bob-->>John: Jolly good!`
+}
+
+const richText: RichTextItemResponse = {
+  type: 'text',
+  text: {
+    content: examples.bash,
+    link: null,
+  },
+  annotations: {
+    bold: true,
+    italic: false,
+    strikethrough: false,
+    underline: false,
+    code: false,
+    color: 'default',
+  },
+  plain_text: examples.bash,
+  href: null,
+}
+
+const block: CodeBlockObjectResponse = {
+  object: 'block',
+  id: '12345678-1234-1234-1234-1234567890ab',
+  type: 'code',
+  parent: {
+    type: 'page_id',
+    page_id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  code: {
+    rich_text: [richText],
+    caption: [],
+    language: 'bash',
+  },
+  created_time: '2024-01-07T01:52:00.000Z',
+  last_edited_time: '2024-01-07T01:52:00.000Z',
+  created_by: {
+    object: 'user',
+    id: '12345678-1234-1234-1234-1234567890ab'
+  },
+  last_edited_by: {
+    object: 'user',
+    id: '12345678-1234-1234-1234-1234567890ab'
+  },
+  has_children: false,
+  archived: false,
+}
+
+const meta = {
+  title: 'Page/CodeBlock',
+  component: CodeBlock,
+  args: {
+    block,
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof CodeBlock>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Bash: Story = {}
+
+const go = structuredClone(block)
+// @ts-ignore
+go.code.rich_text[0].text.content = examples.go
+go.code.rich_text[0].plain_text = examples.go
+go.code.language = 'go'
+export const Go: Story = {
+  args: {
+    block: go
+  }
+}
+
+const ts = structuredClone(block)
+// @ts-ignore
+ts.code.rich_text[0].text.content = examples.typescript
+ts.code.rich_text[0].plain_text = examples.typescript
+ts.code.language = 'typescript'
+export const TypeScript: Story = {
+  args: {
+    block: ts
+  }
+}
+
+const sql = structuredClone(block)
+// @ts-ignore
+sql.code.rich_text[0].text.content = examples.sql
+sql.code.rich_text[0].plain_text = examples.sql
+sql.code.language = 'sql'
+export const SQL: Story = {
+  args: {
+    block: sql
+  }
+}
+
+const mermaid = structuredClone(block)
+// @ts-ignore
+mermaid.code.rich_text[0].text.content = examples.mermaid
+mermaid.code.rich_text[0].plain_text = examples.mermaid
+mermaid.code.language = 'mermaid'
+export const Mermaid: Story = {
+  args: {
+    block: mermaid
+  }
+}
diff --git a/src/ui/components/Page/CodeBlock/CodeBlock.tsx b/src/ui/components/Page/CodeBlock/CodeBlock.tsx
index 5cee04cf..d7e248df 100644
--- a/src/ui/components/Page/CodeBlock/CodeBlock.tsx
+++ b/src/ui/components/Page/CodeBlock/CodeBlock.tsx
@@ -7,12 +7,27 @@ import type {
 import RichText from '../RichText/RichText'
 import type { CodeBlockProps } from './CodeBlock.types'
 import Code from './Code/Code'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../../tokens.stylex'
 
-const CodeBlock = ({ block, modules }: CodeBlockProps) => {
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    width: '100%',
+  },
+  caption: {
+    margin: '.3rem .3rem 0',
+    textAlign: 'left',
+    color: '#888',
+    fontSize: '.95rem',
+  },
+})
+
+const CodeBlock = ({ block }: CodeBlockProps) => {
   const els = block.code?.rich_text.map((textObject: RichTextItemResponse, i) => {
     const text = textObject as TextRichTextItemResponse
     return (
-      <Code language={block.code?.language || ''} key={`${i}`} modules={modules}>
+      <Code language={block.code?.language || ''} key={`${i}`}>
         {text.text.content}
       </Code>
     )
@@ -25,12 +40,12 @@ const CodeBlock = ({ block, modules }: CodeBlockProps) => {
   })
 
   return (
-    <>
+    <div className={`rotion-code ${Stylex(style.wrapper)}`}>
       {els}
-      <div className="notionate-blocks-code-caption">
+      <div className={`rotion-code-caption ${Stylex(style.caption)}`}>
         {captions}
       </div>
-    </>
+    </div>
   )
 }
 
diff --git a/src/ui/components/Page/CodeBlock/CodeBlock.types.ts b/src/ui/components/Page/CodeBlock/CodeBlock.types.ts
index 01b0b2b1..7a082b0e 100644
--- a/src/ui/components/Page/CodeBlock/CodeBlock.types.ts
+++ b/src/ui/components/Page/CodeBlock/CodeBlock.types.ts
@@ -1,7 +1,5 @@
 import type { CodeBlockObjectResponse } from '../../../../exporter'
-import type { ExternalModules } from '../../types'
 
 export interface CodeBlockProps {
   block: CodeBlockObjectResponse
-  modules?: ExternalModules
 }
diff --git a/src/ui/components/Page/ColumnListBlock/ColumnListBlock.stories.tsx b/src/ui/components/Page/ColumnListBlock/ColumnListBlock.stories.tsx
new file mode 100644
index 00000000..c14ae5b3
--- /dev/null
+++ b/src/ui/components/Page/ColumnListBlock/ColumnListBlock.stories.tsx
@@ -0,0 +1,397 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import type { ColumnListBlockObjectResponseEx } from '../../../../exporter'
+import ColumnListBlock from './ColumnListBlock'
+
+const block: ColumnListBlockObjectResponseEx = {
+  object: 'block',
+  id: '12345678-1234-1234-1234-1234567890ab',
+  type: 'column_list',
+  parent: {
+    type: 'page_id',
+    page_id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  column_list: {},
+  children: {
+    object: 'list',
+    results: [
+      {
+        object: 'block',
+        id: '12345678-1234-1234-1234-1234567890ab',
+        parent: {
+          type: 'page_id',
+          page_id: '12345678-1234-1234-1234-1234567890ab',
+        },
+        created_time: '',
+        last_edited_time: '',
+        created_by: {
+          object: 'user',
+          id: ''
+        },
+        last_edited_by: {
+          object: 'user',
+          id: ''
+        },
+        archived: false,
+        has_children: true,
+        type: 'column',
+        column: {},
+      },
+      {
+        object: 'block',
+        id: '12345678-1234-1234-1234-1234567890ab',
+        parent: {
+          type: 'page_id',
+          page_id: '12345678-1234-1234-1234-1234567890ab',
+        },
+        created_time: '',
+        last_edited_time: '',
+        created_by: {
+          object: 'user',
+          id: ''
+        },
+        last_edited_by: {
+          object: 'user',
+          id: ''
+        },
+        archived: false,
+        has_children: true,
+        type: 'column',
+        column: {},
+      },
+      {
+        object: 'block',
+        id: '12345678-1234-1234-1234-1234567890ab',
+        parent: {
+          type: 'page_id',
+          page_id: '12345678-1234-1234-1234-1234567890ab',
+        },
+        created_time: '',
+        last_edited_time: '',
+        created_by: {
+          object: 'user',
+          id: ''
+        },
+        last_edited_by: {
+          object: 'user',
+          id: ''
+        },
+        archived: false,
+        has_children: true,
+        type: 'column',
+        column: {},
+      },
+    ],
+    next_cursor: null,
+    has_more: false,
+    type: 'block',
+    block: {},
+    last_edited_time: '2024-01-07T01:52:00.000Z',
+  },
+  columns: [
+    {
+      object: 'list',
+      results: [
+        {
+          object: 'block',
+          id: '',
+          parent: {
+            type: 'block_id',
+            block_id: '',
+          },
+          created_time: '',
+          last_edited_time: '',
+          created_by: {
+            object: 'user',
+            id: ''
+          },
+          last_edited_by: {
+            object: 'user',
+            id: ''
+          },
+          has_children: false,
+          archived: false,
+          type: 'heading_1',
+          heading_1: {
+            rich_text: [{
+              type: 'text',
+              text: {
+                content: 'Bali',
+                link: null,
+              },
+              annotations: {
+                bold: false,
+                italic: false,
+                strikethrough: false,
+                underline: false,
+                code: false,
+                color: 'default',
+              },
+              plain_text: 'Bali',
+              href: null,
+            }],
+            is_toggleable: false,
+            color: 'default',
+          },
+        },
+        {
+          object: 'block',
+          id: '',
+          parent: {
+            type: 'block_id',
+            block_id: '',
+          },
+          created_time: '',
+          last_edited_time: '',
+          created_by: {
+            object: 'user',
+            id: ''
+          },
+          last_edited_by: {
+            object: 'user',
+            id: ''
+          },
+          has_children: false,
+          archived: false,
+          type: 'paragraph',
+          paragraph: {
+            rich_text: [{
+              type: 'text',
+              text: {
+                content: 'Bali is predominantly a Hindu country. Bali is known for its elaborate, traditional dancing. The dancing is inspired by its Hindi beliefs. Most of the dancing portrays tales of good versus evil. To watch the dancing is a breathtaking experience. Lombok has some impressive points of interest.',
+                link: null,
+              },
+              annotations: {
+                bold: false,
+                italic: false,
+                strikethrough: false,
+                underline: false,
+                code: false,
+                color: 'default',
+              },
+              plain_text: 'Bali is predominantly a Hindu country. Bali is known for its elaborate, traditional dancing. The dancing is inspired by its Hindi beliefs. Most of the dancing portrays tales of good versus evil. To watch the dancing is a breathtaking experience. Lombok has some impressive points of interest.',
+              href: null,
+            }],
+            color: 'default',
+          },
+        },
+      ],
+      next_cursor: null,
+      has_more: false,
+      type: 'block',
+      block: {},
+      last_edited_time: '2024-01-07T01:48:00.000Z',
+    },
+    {
+      object: 'list',
+      results: [
+        {
+          object: 'block',
+          id: '',
+          parent: {
+            type: 'block_id',
+            block_id: '',
+          },
+          created_time: '',
+          last_edited_time: '',
+          created_by: {
+            object: 'user',
+            id: ''
+          },
+          last_edited_by: {
+            object: 'user',
+            id: ''
+          },
+          has_children: false,
+          archived: false,
+          type: 'heading_1',
+          heading_1: {
+            rich_text: [{
+              type: 'text',
+              text: {
+                content: 'Racial Equality',
+                link: null,
+              },
+              annotations: {
+                bold: false,
+                italic: false,
+                strikethrough: false,
+                underline: false,
+                code: false,
+                color: 'default',
+              },
+              plain_text: 'Racial Equality',
+              href: null,
+            }],
+            is_toggleable: false,
+            color: 'default',
+          },
+        },
+        {
+          object: 'block',
+          id: '',
+          parent: {
+            type: 'block_id',
+            block_id: '',
+          },
+          created_time: '',
+          last_edited_time: '',
+          created_by: {
+            object: 'user',
+            id: ''
+          },
+          last_edited_by: {
+            object: 'user',
+            id: ''
+          },
+          has_children: false,
+          archived: false,
+          type: 'paragraph',
+          paragraph: {
+            rich_text: [{
+              type: 'text',
+              text: {
+                content: 'Martin Luther King Jr. led many demonstrations against racism. He delivered his message in a non-violent manner. Some members of his movement later engaged in less peaceful protests. Luther King was detained several times. The longest jail sentence he received was four months.',
+                link: null,
+              },
+              annotations: {
+                bold: false,
+                italic: false,
+                strikethrough: false,
+                underline: false,
+                code: false,
+                color: 'default',
+              },
+              plain_text: 'Martin Luther King Jr. led many demonstrations against racism. He delivered his message in a non-violent manner. Some members of his movement later engaged in less peaceful protests. Luther King was detained several times. The longest jail sentence he received was four months.',
+              href: null,
+            }],
+            color: 'default',
+          },
+        },
+      ],
+      next_cursor: null,
+      has_more: false,
+      type: 'block',
+      block: {},
+      last_edited_time: '2024-01-07T01:48:00.000Z',
+    },
+    {
+      object: 'list',
+      results: [
+        {
+          object: 'block',
+          id: '',
+          parent: {
+            type: 'block_id',
+            block_id: '',
+          },
+          created_time: '',
+          last_edited_time: '',
+          created_by: {
+            object: 'user',
+            id: ''
+          },
+          last_edited_by: {
+            object: 'user',
+            id: ''
+          },
+          has_children: false,
+          archived: false,
+          type: 'heading_1',
+          heading_1: {
+            rich_text: [{
+              type: 'text',
+              text: {
+                content: 'Possible Solution',
+                link: null,
+              },
+              annotations: {
+                bold: false,
+                italic: false,
+                strikethrough: false,
+                underline: false,
+                code: false,
+                color: 'default',
+              },
+              plain_text: 'Possible Solution',
+              href: null,
+            }],
+            is_toggleable: false,
+            color: 'default',
+          },
+        },
+        {
+          object: 'block',
+          id: '',
+          parent: {
+            type: 'block_id',
+            block_id: '',
+          },
+          created_time: '',
+          last_edited_time: '',
+          created_by: {
+            object: 'user',
+            id: ''
+          },
+          last_edited_by: {
+            object: 'user',
+            id: ''
+          },
+          has_children: false,
+          archived: false,
+          type: 'paragraph',
+          paragraph: {
+            rich_text: [{
+              type: 'text',
+              text: {
+                content: 'Nelson Mandela and Martin Luther King Jr. both fought for racial equality. Although Luther King was an American citizen and Mandela a native South African, their dreams were the same. The intolerance of white people towards black co-inhabitants was the catalyst for years of activism.',
+                link: null,
+              },
+              annotations: {
+                bold: false,
+                italic: false,
+                strikethrough: false,
+                underline: false,
+                code: false,
+                color: 'default',
+              },
+              plain_text: 'Nelson Mandela and Martin Luther King Jr. both fought for racial equality. Although Luther King was an American citizen and Mandela a native South African, their dreams were the same. The intolerance of white people towards black co-inhabitants was the catalyst for years of activism.',
+              href: null,
+            }],
+            color: 'default',
+          },
+        },
+      ],
+      next_cursor: null,
+      has_more: false,
+      type: 'block',
+      block: {},
+      last_edited_time: '2024-01-07T01:48:00.000Z',
+    },
+  ],
+  created_time: '2024-01-07T01:52:00.000Z',
+  last_edited_time: '2024-01-07T01:52:00.000Z',
+  created_by: {
+    object: 'user',
+    id: ''
+  },
+  last_edited_by: {
+    object: 'user',
+    id: ''
+  },
+  has_children: false,
+  archived: false,
+}
+
+const meta = {
+  title: 'Page/ColumnListBlock',
+  component: ColumnListBlock,
+  args: {
+    block,
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ColumnListBlock>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
diff --git a/src/ui/components/Page/ColumnListBlock/ColumnListBlock.tsx b/src/ui/components/Page/ColumnListBlock/ColumnListBlock.tsx
index f3c038d2..f7d14503 100644
--- a/src/ui/components/Page/ColumnListBlock/ColumnListBlock.tsx
+++ b/src/ui/components/Page/ColumnListBlock/ColumnListBlock.tsx
@@ -1,22 +1,41 @@
 import React from 'react'
 import Page from '../Page'
 import type { ColumnListBlockProps } from './ColumnListBlock.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    width: '100%',
+    margin: '1rem 0',
+    display: {
+      default: 'grid',
+      '@media (max-width: 580px)': 'block',
+    },
+    gap: '5%',
+  },
+  column: {
+    margin: '0 0 1rem',
+  },
+})
 
 const ColumnListBlock = ({ block, href, link, query }: ColumnListBlockProps) => {
   const columns = block.columns.map((v, i) => {
     return (
-      <div key={i} className="notionate-blocks-columnlist-inner">
-        {Page({ blocks: v, href, link, query })}
+      <div key={i} className={`rotion-columnlist-column ${Stylex(style.column)}`}>
+        <Page blocks={v} href={href} link={link} query={query} />
       </div>
     )
   })
+
   const l = columns.length
   const columnlistStyle = {
     gridTemplate: `repeat(1, 1fr) / repeat(${l}, 1fr)`,
   }
 
   return (
-    <div className="notionate-blocks-columnlist" style={columnlistStyle}>
+    <div className={`rotion-columnlist ${Stylex(style.wrapper)}`} style={columnlistStyle}>
       {columns}
     </div>
   )
diff --git a/src/ui/components/Page/EmbedBlock/EmbedBlock.stories.tsx b/src/ui/components/Page/EmbedBlock/EmbedBlock.stories.tsx
new file mode 100644
index 00000000..589be59a
--- /dev/null
+++ b/src/ui/components/Page/EmbedBlock/EmbedBlock.stories.tsx
@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import type { EmbedBlockObjectResponseEx } from '../../../../exporter'
+import EmbedBlock from './EmbedBlock'
+
+const block: EmbedBlockObjectResponseEx = {
+  object: 'block',
+  id: '12345678-1234-1234-1234-1234567890ab',
+  created_time: '',
+  last_edited_time: '',
+  created_by: {
+    object: 'user',
+    id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  last_edited_by: {
+    object: 'user',
+    id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  has_children: false,
+  archived: false,
+  type: 'embed',
+  parent: {
+    type: 'page_id',
+    page_id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  embed: {
+    caption: [
+      {
+        type: 'text',
+        text: {
+          content: 'Nice',
+          link: null,
+        },
+        annotations: {
+          bold: false,
+          italic: false,
+          strikethrough: false,
+          underline: false,
+          code: false,
+          color: 'default',
+        },
+        plain_text: 'Nice',
+        href: null,
+      },
+    ],
+    url: 'https://twitter.com/jack/status/1247616214769086465',
+    html: '<blockquote class="twitter-tweet"><p lang="en" dir="ltr">I’m moving $1B of my Square equity (~28% of my wealth) to <a href="https://twitter.com/hashtag/startsmall?src=hash&amp;ref_src=twsrc%5Etfw">#startsmall</a> LLC to fund global COVID-19 relief. After we disarm this pandemic, the focus will shift to girl’s health and education, and UBI. It will operate transparently, all flows tracked here: <a href="https://t.co/hVkUczDQmz">https://t.co/hVkUczDQmz</a></p>&mdash; jack (@jack) <a href="https://twitter.com/jack/status/1247616214769086465?ref_src=twsrc%5Etfw">April 7, 2020</a></blockquote>\n<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>\n\n',
+  },
+}
+
+const meta = {
+  title: 'Page/EmbedBlock',
+  component: EmbedBlock,
+  args: {
+    block,
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof EmbedBlock>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Twitter: Story = {}
+
+const sd = structuredClone(block)
+sd.embed.url = 'https://speakerdeck.com/lara/designing-for-performance'
+sd.embed.html = '<iframe id="talk_frame_78036" class="speakerdeck-iframe" src="//speakerdeck.com/player/64c73790385101315ae85eae0478e863" width="710" height="399" style="aspect-ratio:710/399; border:0; padding:0; margin:0; background:transparent;" frameborder="0" allowtransparency="true" allowfullscreen="allowfullscreen"></iframe>\n'
+export const Speakerdeck: Story = {
+  args: {
+    block: sd,
+  },
+}
diff --git a/src/ui/components/Page/EmbedBlock/EmbedBlock.tsx b/src/ui/components/Page/EmbedBlock/EmbedBlock.tsx
index 21797b22..b224be76 100644
--- a/src/ui/components/Page/EmbedBlock/EmbedBlock.tsx
+++ b/src/ui/components/Page/EmbedBlock/EmbedBlock.tsx
@@ -1,21 +1,72 @@
 import React, { useEffect } from 'react'
-import TextBlock from '../TextBlock/TextBlock'
+import { RichText } from '../RichText'
 import type { EmbedBlockProps } from './EmbedBlock.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../../tokens.stylex'
 
-const TwitterBlock = ({ block }: EmbedBlockProps) => {
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    width: '100%',
+    textAlign: 'center',
+  },
+  html: {
+    width: '100%',
+    textAlign: 'center',
+  },
+  caption: {
+    margin: '.3rem .3rem 0',
+    textAlign: 'left',
+    color: '#888',
+    fontSize: '.95rem',
+  },
+  twitter: {
+    maxWidth: '550px',
+    margin: '0 auto',
+  },
+  speakerdeck: {
+    maxWidth: '710px',
+    margin: '0 auto',
+    paddingBottom: '56.25%', /* 16:9 */
+    position: 'relative',
+    height: 0,
+  },
+})
+
+const Twitter = ({ block }: EmbedBlockProps) => {
   const htmlWithRemovedScript = block.embed.html.replace(/<script>.*/, '')
+  const embedClass = 'rotion-embed-html'
 
   useEffect(() => {
     const script = document.createElement('script')
     script.src = 'https://platform.twitter.com/widgets.js'
-    document.getElementsByClassName('notionate-blocks-embed-inner')[0].appendChild(script)
+    document.getElementsByClassName(embedClass)[0].appendChild(script)
   }, [])
 
   return (
-    <div className="notionate-blocks-embed notionate-blocks-embed-twitter">
-      <div className="notionate-blocks-embed-inner" dangerouslySetInnerHTML={{ __html: htmlWithRemovedScript }} />
-      <div className="notionate-blocks-embed-caption">
-        <TextBlock tag="span" block={block.embed.caption} />
+    <div className={`rotion-embed ${Stylex(style.wrapper)}`}>
+      <div className={`rotion-embed-twitter ${Stylex(style.twitter)}`}>
+        <div className={`${embedClass} ${Stylex(style.html)}`} dangerouslySetInnerHTML={{ __html: htmlWithRemovedScript }} />
+        <div className={`rotion-embed-caption ${Stylex(style.caption)}`}>
+          {block.embed.caption.map((v, i) => (
+            <RichText textObject={v} key={`richtext-${i}`} />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const Speakerdeck = ({ block }: EmbedBlockProps) => {
+  return (
+    <div className={`rotion-embed ${Stylex(style.wrapper)}`}>
+      <div className={`rotion-embed-speakerdeck ${Stylex(style.speakerdeck)}`}>
+        <div className={`rotion-embed-html ${Stylex(style.html)}`} dangerouslySetInnerHTML={{ __html: block.embed.html }} />
+        <div className={`rotion-embed-caption ${Stylex(style.caption)}`}>
+          {block.embed.caption.map((v, i) => (
+            <RichText textObject={v} key={`richtext-${i}`} />
+          ))}
+        </div>
       </div>
     </div>
   )
@@ -28,18 +79,20 @@ const EmbedBlock = ({ block }: EmbedBlockProps) => {
   }
 
   if (block.embed.html.includes('twitter')) {
-    return (
-      <TwitterBlock block={block} />
-    )
+    return <Twitter block={block} />
   }
 
-  const providerClass = block.embed.html.includes('speakerdeck') ? ' notionate-blocks-embed-speakerdeck' : ''
+  if (block.embed.html.includes('speakerdeck')) {
+    return <Speakerdeck block={block} />
+  }
 
   return (
-    <div className="notionate-blocks-embed">
-      <div className={`notionate-blocks-embed-inner${providerClass}`} dangerouslySetInnerHTML={{ __html: block.embed.html }} />
-      <div className="notionate-blocks-embed-caption">
-        <TextBlock tag="span" block={block.embed.caption} />
+    <div className={`rotion-embed ${Stylex(style.wrapper)}`}>
+      <div className={'rotion-embed-html'} dangerouslySetInnerHTML={{ __html: block.embed.html }} />
+      <div className="rotion-embed-caption">
+        {block.embed.caption.map((v, i) => (
+          <RichText textObject={v} key={`richtext-${i}`} />
+        ))}
       </div>
     </div>
   )
diff --git a/src/ui/components/Page/EquationBlock/EquationBlock.stories.tsx b/src/ui/components/Page/EquationBlock/EquationBlock.stories.tsx
new file mode 100644
index 00000000..0a20cb3e
--- /dev/null
+++ b/src/ui/components/Page/EquationBlock/EquationBlock.stories.tsx
@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import type { EquationBlockObjectResponse } from '../../../../exporter'
+import EquationBlock from './EquationBlock'
+
+const block: EquationBlockObjectResponse = {
+  object: 'block',
+  id: '12345678-1234-1234-1234-1234567890ab',
+  created_time: '',
+  last_edited_time: '',
+  created_by: {
+    object: 'user',
+    id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  last_edited_by: {
+    object: 'user',
+    id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  has_children: false,
+  archived: false,
+  type: 'equation',
+  parent: {
+    type: 'page_id',
+    page_id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  equation: {
+    expression: '\\frac{{ - b \\pm \\sqrt {b^2 - 4ac} }}{{2a}}',
+  },
+}
+
+const meta = {
+  title: 'Page/EquationBlock',
+  component: EquationBlock,
+  args: {
+    block,
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof EquationBlock>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
diff --git a/src/ui/components/Page/EquationBlock/EquationBlock.tsx b/src/ui/components/Page/EquationBlock/EquationBlock.tsx
index 4565ab39..b11104db 100644
--- a/src/ui/components/Page/EquationBlock/EquationBlock.tsx
+++ b/src/ui/components/Page/EquationBlock/EquationBlock.tsx
@@ -1,6 +1,20 @@
 import React, { useMemo } from 'react'
 import Katex from 'katex'
 import type { EquationBlockProps } from './EquationBlock.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    width: '100%',
+    textAlign: 'center',
+  },
+  html: {
+    margin: '.5rem auto',
+    fontSize: '1.7rem',
+  },
+})
 
 const EquationBlock = ({ block }: EquationBlockProps) => {
   const { equation } = block
@@ -14,7 +28,9 @@ const EquationBlock = ({ block }: EquationBlockProps) => {
   }, [formula])
 
   return (
-    <div className="notionate-blocks-equation" dangerouslySetInnerHTML={{ __html: html }} />
+    <div className={`rotion-equation ${Stylex(style.wrapper)}`}>
+      <div className={`rotion-equation-html ${Stylex(style.html)}`} dangerouslySetInnerHTML={{ __html: html }} />
+    </div>
   )
 }
 
diff --git a/src/ui/components/Page/FileBlock/FileBlock.stories.tsx b/src/ui/components/Page/FileBlock/FileBlock.stories.tsx
new file mode 100644
index 00000000..801f9e8b
--- /dev/null
+++ b/src/ui/components/Page/FileBlock/FileBlock.stories.tsx
@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import type { FileBlockObjectResponseEx } from '../../../../exporter'
+import FileBlock from './FileBlock'
+
+const block: FileBlockObjectResponseEx = {
+  object: 'block',
+  id: '12345678-1234-1234-1234-1234567890ab',
+  created_time: '',
+  last_edited_time: '',
+  created_by: {
+    object: 'user',
+    id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  last_edited_by: {
+    object: 'user',
+    id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  has_children: false,
+  archived: false,
+  type: 'file',
+  parent: {
+    type: 'page_id',
+    page_id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  file: {
+    name: 'sample.pdf',
+    type: 'external',
+    external: {
+      url: 'https://www.africau.edu/images/default/sample.pdf',
+    },
+    caption: [],
+    src: 'https://www.africau.edu/images/default/sample.pdf',
+    size: 3028,
+  },
+}
+
+const meta = {
+  title: 'Page/FileBlock',
+  component: FileBlock,
+  args: {
+    block,
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof FileBlock>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
diff --git a/src/ui/components/Page/FileBlock/FileBlock.tsx b/src/ui/components/Page/FileBlock/FileBlock.tsx
index b9a9f859..d8b748d4 100644
--- a/src/ui/components/Page/FileBlock/FileBlock.tsx
+++ b/src/ui/components/Page/FileBlock/FileBlock.tsx
@@ -1,19 +1,60 @@
 import React from 'react'
 import type { RichTextItemResponse } from '../../../../exporter'
-
 import RichText from '../RichText/RichText'
 import type { FileBlockProps } from './FileBlock.types'
+import { PageIcon } from '../PageIcon'
+import Stylex from '@stylexjs/stylex'
+import { tokens, link } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+  },
+  link: {
+    display: 'grid',
+    gridTemplate: 'repeat(1, 1fr) / 1.5rem 1fr',
+    gap: '.4rem',
+    margin: '.2rem 0 0',
+    padding: '.6rem .3rem',
+    textDecoration: link.textDecoration,
+    color: {
+      default: link.color,
+      ':hover': link.colorHover,
+    },
+    alignItems: 'top',
+    backgroundColor: {
+      default: link.backgroundColor,
+      ':hover': link.backgroundColorHover,
+    },
+    borderRadius: tokens.borderRadius,
+  },
+  size: {
+    fontSize: '.8rem',
+    paddingLeft: '.5rem',
+    color: '#888',
+  },
+})
 
-// TODO: Iimplement and design
 const FileBlock = ({ block }: FileBlockProps) => {
   const { file } = block
   const url = (file.type === 'external') ? file.external.url : file.file.url
+  // Byte to KB or MB
+  const size = file.size > 9999 ? `${(Math.ceil(file.size / 1024 / 1000 * 10) / 10).toFixed(1)}MB` : `${(Math.ceil(file.size / 1024 * 10) / 10).toFixed(1)}KB`
+
   return (
-    <div className="notionate-blocks-file">
-      {url}
-      {file.caption.map((v: RichTextItemResponse, i) => (
-        <RichText textObject={v} key={`richtext-${i}`} />
-      ))}
+    <div className={`rotion-file ${Stylex(style.wrapper)}`}>
+      <a href={url} target="_blank" className={`rotion-file-link ${Stylex(style.link)}`} rel="noreferrer">
+        <PageIcon name='file' />
+        <span>
+          {file.name}
+          <span className={`rotion-file-size ${Stylex(style.size)}`}>
+            {size}
+          </span>
+        </span>
+        {file.caption.map((v: RichTextItemResponse, i) => (
+          <RichText textObject={v} key={`richtext-${i}`} />
+        ))}
+      </a>
     </div>
   )
 }
diff --git a/src/ui/components/Page/FileBlock/FileBlock.types.ts b/src/ui/components/Page/FileBlock/FileBlock.types.ts
index 5e857e59..28e25948 100644
--- a/src/ui/components/Page/FileBlock/FileBlock.types.ts
+++ b/src/ui/components/Page/FileBlock/FileBlock.types.ts
@@ -1,5 +1,5 @@
-import { FileBlockObjectResponse } from '../../../../exporter'
+import { FileBlockObjectResponseEx } from '../../../../exporter'
 
 export interface FileBlockProps {
-  block: FileBlockObjectResponse,
+  block: FileBlockObjectResponseEx,
 }
diff --git a/src/ui/components/Page/ImageBlock/ImageBlock.stories.tsx b/src/ui/components/Page/ImageBlock/ImageBlock.stories.tsx
new file mode 100644
index 00000000..ca3e6a28
--- /dev/null
+++ b/src/ui/components/Page/ImageBlock/ImageBlock.stories.tsx
@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import type { ImageBlockObjectResponseEx } from '../../../../exporter'
+import ImageBlock from './ImageBlock'
+
+const block: ImageBlockObjectResponseEx = {
+  object: 'block',
+  id: '12345678-1234-1234-1234-1234567890ab',
+  created_time: '',
+  last_edited_time: '',
+  created_by: {
+    object: 'user',
+    id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  last_edited_by: {
+    object: 'user',
+    id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  has_children: false,
+  archived: false,
+  type: 'image',
+  parent: {
+    type: 'page_id',
+    page_id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  image: {
+    type: 'file',
+    file: {
+      url: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?q=80&w=2346&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      expiry_time: '',
+    },
+    src: '/images/beach.jpg',
+    caption: [
+      {
+        type: 'text',
+        text: {
+          content: 'Beautiful beach',
+          link: null,
+        },
+        annotations: {
+          bold: false,
+          italic: false,
+          strikethrough: false,
+          underline: false,
+          code: false,
+          color: 'default',
+        },
+        plain_text: 'Beautiful beach',
+        href: null,
+      },
+    ],
+  },
+}
+
+const meta = {
+  title: 'Page/ImageBlock',
+  component: ImageBlock,
+  args: {
+    block,
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ImageBlock>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
diff --git a/src/ui/components/Page/ImageBlock/ImageBlock.tsx b/src/ui/components/Page/ImageBlock/ImageBlock.tsx
index 0625b87a..fc6a2bef 100644
--- a/src/ui/components/Page/ImageBlock/ImageBlock.tsx
+++ b/src/ui/components/Page/ImageBlock/ImageBlock.tsx
@@ -1,15 +1,42 @@
 import React from 'react'
-import TextBlock from '../TextBlock/TextBlock'
+import { RichText } from '../RichText'
 import type { ImageBlockProps } from './ImageBlock.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    textAlign: 'center',
+    margin: 0,
+    padding: '0 0 .5rem',
+  },
+  image: {
+    display: 'flex',
+  },
+  img: {
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    width: '100%',
+  },
+  caption: {
+    margin: '.3rem .3rem 0',
+    textAlign: 'left',
+    color: '#888',
+    fontSize: '.95rem',
+  },
+})
 
 export const ImageBlock = ({ block }: ImageBlockProps) => {
   return (
-    <div className="notionate-blocks-image">
-      <div className="notionate-blocks-image-inner">
-        <img className="notionate-blocks-image-img" src={block.image?.src} alt="" />
+    <div className={`rotion-image ${Stylex(style.wrapper)}`}>
+      <div className={`rotion-image-image ${Stylex(style.image)}`}>
+        <img className={`rotion-image-img ${Stylex(style.img)}`} src={block.image?.src} alt="Image" />
       </div>
-      <div className="notionate-blocks-image-caption">
-        <TextBlock tag="span" block={block.image.caption} />
+      <div className={`rotion-image-caption ${Stylex(style.caption)}`}>
+        {block.image.caption.map((v, i) => (
+          <RichText textObject={v} key={`richtext-${i}`} />
+        ))}
       </div>
     </div>
   )
diff --git a/src/ui/components/Page/LinkPreviewBlock/LinkPreview.stories.tsx b/src/ui/components/Page/LinkPreviewBlock/LinkPreview.stories.tsx
new file mode 100644
index 00000000..48cfa057
--- /dev/null
+++ b/src/ui/components/Page/LinkPreviewBlock/LinkPreview.stories.tsx
@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import type { LinkPreviewBlockObjectResponse } from '../../../../exporter'
+import LinkPreviewBlock from './LinkPreviewBlock'
+
+const block: LinkPreviewBlockObjectResponse = {
+  object: 'block',
+  id: '12345678-1234-1234-1234-1234567890ab',
+  created_time: '',
+  last_edited_time: '',
+  created_by: {
+    object: 'user',
+    id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  last_edited_by: {
+    object: 'user',
+    id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  has_children: false,
+  archived: false,
+  type: 'link_preview',
+  parent: {
+    type: 'page_id',
+    page_id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  link_preview: {
+    url: 'https://github.com/linyows/rotion/pull/3',
+  },
+}
+
+const meta = {
+  title: 'Page/LinkPreviewBlock',
+  component: LinkPreviewBlock,
+  args: {
+    block,
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof LinkPreviewBlock>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Github: Story = {}
+
+const slack = structuredClone(block)
+slack.link_preview.url = 'https://linyows.slack.com/archives/C02FCHEQH/p1658643567381379'
+export const Slack: Story = {
+  args: {
+    block: slack,
+  },
+}
+
+const figma = structuredClone(block)
+figma.link_preview.url = 'https://www.figma.com/file/GfHZFRpWGd0QXsRg9igdw8/Google-Material-Design?node-id=0%3A1'
+export const Figma: Story = {
+  args: {
+    block: figma,
+  },
+}
diff --git a/src/ui/components/Page/LinkPreviewBlock/LinkPreviewBlock.tsx b/src/ui/components/Page/LinkPreviewBlock/LinkPreviewBlock.tsx
index 3a819c39..b819d4f9 100644
--- a/src/ui/components/Page/LinkPreviewBlock/LinkPreviewBlock.tsx
+++ b/src/ui/components/Page/LinkPreviewBlock/LinkPreviewBlock.tsx
@@ -1,19 +1,119 @@
 import React from 'react'
 import PageIcon from '../PageIcon/PageIcon'
 import type { LinkPreviewBlockProps } from './LinkPreviewBlock.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens, link } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    margin: '1rem 0',
+  },
+  link: {
+    display: 'block',
+    textDecoration: link.textDecoration,
+    border: '1px solid #ddd',
+    padding: '1rem',
+    color: {
+      default: link.color,
+      ':hover': link.colorHover,
+    },
+    fontSize: '.8rem',
+    borderRadius: tokens.borderRadius,
+    backgroundColor: {
+      default: link.backgroundColor,
+      ':hover': link.backgroundColorHover,
+    },
+    overflow: 'hidden',
+  },
+  box: {
+    display: 'grid',
+    gridTemplateColumns: '32px 1fr',
+    gap: '10px',
+  },
+  icon: {
+    height: '100%',
+  },
+  repo: {
+    display: 'block',
+    fontSize: '1.1rem',
+  },
+  title: {
+    display: 'block',
+    fontSize: '1rem',
+  },
+  domain: {
+    display: 'block',
+    fontSize: '.8rem',
+    color: '#888',
+  },
+  figma: {
+    display: 'block',
+    fontSize: '1rem',
+  },
+})
+
+interface Props {
+  url: string
+}
+
+const Github = ({ url }: Props) => {
+  const match = url.match(/github\.com\/(\w+)\/(\w+)/)
+  const user = match ? match[1] : ''
+  const repo = match ? match[2] : ''
+  return (
+    <span className={`rotion-linkpreview-github ${Stylex(style.box)}`}>
+      <span className={`rotion-linkpreview-icon ${Stylex(style.icon)}`}>
+        <PageIcon name='github' width='32px' height='32px' />
+      </span>
+      <span className={`rotion-linkpreview-github-repo ${Stylex(style.repo)}`}>
+        {user}/{repo}
+      </span>
+    </span>
+  )
+}
+
+const Slack = ({ url }: Props) => {
+  const domain = url.replace('https://', '').split('/')[0]
+  return (
+    <span className={`rotion-linkpreview-slack ${Stylex(style.box)}`}>
+      <span className={`rotion-linkpreview-icon ${Stylex(style.icon)}`}>
+        <PageIcon name='slack' width='32px' height='32px' />
+      </span>
+      <span>
+        <span className={`rotion-linkpreview-slack-title ${Stylex(style.title)}`}>Message in Slack</span>
+        <span className={`rotion-linkpreview-slack-domain ${Stylex(style.domain)}`}>{domain}</span>
+      </span>
+    </span>
+  )
+}
+
+const Figma = ({ url }: Props) => {
+  return (
+    <span className={`rotion-linkpreview-figma ${Stylex(style.box)}`}>
+      <span className={`rotion-linkpreview-icon ${Stylex(style.icon)}`}>
+        <PageIcon name='figma' width='21px' height='32px' />
+      </span>
+      <span className={`rotion-linkpreview-figma-url ${Stylex(style.figma)}`}>
+        {url}
+      </span>
+    </span>
+  )
+}
 
 const LinkPreviewBlock = ({ block }: LinkPreviewBlockProps) => {
   if (!block.link_preview) {
     return <></>
   }
+  const { url } = block.link_preview
 
   return (
-    <div className="notionate-blocks-linkpreview">
-      <a className="notionate-blocks-linkpreview-a" href={block.link_preview.url} rel="noreferrer" target="_blank">
-        {block.link_preview.url.includes('github.com') && <PageIcon name='github' />}
-        {block.link_preview.url.includes('slack.com') && <PageIcon name='slack' />}
-        {block.link_preview.url.includes('figma.com') && <PageIcon name='figma' />}
-        {block.link_preview.url}
+    <div className={`rotion-linkpreview ${Stylex(style.wrapper)}`}>
+      <a className={`rotion-linkpreview-link ${Stylex(style.link)}`} href={url} rel="noreferrer" target="_blank">
+        {url.includes('github.com') && <Github url={url} />}
+        {url.includes('slack.com') && <Slack url={url} />}
+        {url.includes('figma.com') && <Figma url={url} />}
+        {!url.includes('github.com') && !url.includes('slack.com') && !url.includes('figma.com') && `${url}`}
       </a>
     </div>
   )
diff --git a/src/ui/components/Page/ListBlock/ListBlock.tsx b/src/ui/components/Page/ListBlock/ListBlock.tsx
deleted file mode 100644
index 5d81ab0d..00000000
--- a/src/ui/components/Page/ListBlock/ListBlock.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react'
-import Handler from '../PageHandler'
-import type { ListBlockProps } from './ListBlock.types'
-
-export const ListBlock = ({ tag, blocks, href, link, query }: ListBlockProps) => {
-  const CustomTag = tag
-  return (
-    <CustomTag className={`notionate-blocks-list-${tag}`} key={tag + blocks[0].id}>
-      {blocks.map(block => Handler({ block, href, link, query }))}
-    </CustomTag>
-  )
-}
-
-export default ListBlock
diff --git a/src/ui/components/Page/ListBlock/index.ts b/src/ui/components/Page/ListBlock/index.ts
deleted file mode 100644
index 59d7fed7..00000000
--- a/src/ui/components/Page/ListBlock/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import ListBlock from './ListBlock'
-export { ListBlock }
diff --git a/src/ui/components/Page/ListBlocks/ListBlocks.stories.tsx b/src/ui/components/Page/ListBlocks/ListBlocks.stories.tsx
new file mode 100644
index 00000000..2b3a2014
--- /dev/null
+++ b/src/ui/components/Page/ListBlocks/ListBlocks.stories.tsx
@@ -0,0 +1,161 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import type {
+  BlockObjectResponse,
+  TextRichTextItemResponse,
+  BulletedListItemBlockObjectResponseEx,
+  NumberedListItemBlockObjectResponseEx,
+} from '../../../../exporter'
+import ListBlocks from './ListBlocks'
+
+const list1 = ['Coffee', 'Milk', 'Cinnamon']
+const list2 = ['Light', 'Medium', 'Dark']
+const list3 = ['Paper filter', 'Espresso']
+
+const baseBlock = {
+  object: 'block',
+  id: '12345678-1234-1234-1234-1234567890ab',
+  created_time: '',
+  last_edited_time: '',
+  created_by: {
+    object: 'user',
+    id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  last_edited_by: {
+    object: 'user',
+    id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  has_children: true,
+  archived: false,
+  parent: {
+    type: 'page_id',
+    page_id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  type: '',
+  children: {
+    object: 'list',
+    results: []
+  },
+}
+
+/* RICH TEXT */
+const richText1: TextRichTextItemResponse = {
+  type: 'text',
+  text: {
+    content: '',
+    link: null
+  },
+  annotations: {
+    bold: false,
+    italic: false,
+    strikethrough: false,
+    underline: false,
+    code: false,
+    color: 'default',
+  },
+  plain_text: '',
+  href: null,
+}
+
+function makeBulletedList (v: string) {
+  const bulletedListItem1 = structuredClone(baseBlock) as unknown as BulletedListItemBlockObjectResponseEx
+  bulletedListItem1.type = 'bulleted_list_item'
+  const bulleted = structuredClone(bulletedListItem1)
+  const r = structuredClone(richText1)
+  r.text.content = v
+  r.plain_text = v
+  bulleted.bulleted_list_item = {
+    rich_text: [r],
+    color: 'default'
+  }
+  return bulleted
+}
+
+function makeNumberedList (v: string) {
+  const numberedListItem1 = structuredClone(baseBlock) as unknown as NumberedListItemBlockObjectResponseEx
+  numberedListItem1.type = 'numbered_list_item'
+  const numbered = structuredClone(numberedListItem1)
+  const r = structuredClone(richText1)
+  r.text.content = v
+  r.plain_text = v
+  numbered.numbered_list_item = {
+    rich_text: [r],
+    color: 'default'
+  }
+  return numbered
+}
+
+/* BULLETED LIST */
+const bulletedBlocks: BlockObjectResponse[] = list1.map(v => {
+  const bulleted = makeBulletedList(v)
+  bulleted.has_children = true
+  bulleted.children = {
+    object: 'list',
+    results: list2.map(vv => {
+      const bulleted = makeBulletedList(vv)
+      bulleted.has_children = true
+      bulleted.children = {
+        object: 'list',
+        results: list3.map(vvv => makeBulletedList(vvv)),
+        type: 'block',
+        next_cursor: null,
+        has_more: false,
+        block: {},
+      }
+      return bulleted
+    }),
+    type: 'block',
+    next_cursor: null,
+    has_more: false,
+    block: {},
+  }
+  return bulleted
+})
+
+/* NUMBERED LIST */
+const numberedBlocks: BlockObjectResponse[] = list1.map(v => {
+  const numbered = makeNumberedList(v)
+  numbered.has_children = true
+  numbered.children = {
+    object: 'list',
+    results: list2.map(vv => {
+      const numbered = makeNumberedList(vv)
+      numbered.has_children = true
+      numbered.children = {
+        object: 'list',
+        results: list3.map(vvv => makeNumberedList(vvv)),
+        type: 'block',
+        next_cursor: null,
+        has_more: false,
+        block: {},
+      }
+      return numbered
+    }),
+    type: 'block',
+    next_cursor: null,
+    has_more: false,
+    block: {},
+  }
+  return numbered
+})
+
+const meta = {
+  title: 'Page/ListBlocks',
+  component: ListBlocks,
+  args: {
+    blocks: bulletedBlocks,
+    tag: 'ul',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ListBlocks>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Bulleted: Story = {}
+
+export const Numbered: Story = {
+  args: {
+    blocks: numberedBlocks,
+    tag: 'ol',
+  }
+}
diff --git a/src/ui/components/Page/ListBlocks/ListBlocks.tsx b/src/ui/components/Page/ListBlocks/ListBlocks.tsx
new file mode 100644
index 00000000..5d243bdb
--- /dev/null
+++ b/src/ui/components/Page/ListBlocks/ListBlocks.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import PageHandler from '../PageHandler'
+import type { ListBlocksProps } from './ListBlocks.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    lineHeight: 1.5,
+    padding: '.2rem 0 .2rem 1rem',
+    margin: 0,
+  },
+})
+
+export const ListBlocks = ({ tag, blocks, href, link, query }: ListBlocksProps) => {
+  const CustomTag = tag
+  // This is calling BulletedListBlock or NumberedListBlock with PageHandler
+  return (
+    <CustomTag className={`rotion-list-${tag} ${Stylex(style.wrapper)}`} key={tag + blocks[0].id}>
+      {blocks.map(block => PageHandler({ block, href, link, query }))}
+    </CustomTag>
+  )
+}
+
+export default ListBlocks
diff --git a/src/ui/components/Page/ListBlock/ListBlock.types.ts b/src/ui/components/Page/ListBlocks/ListBlocks.types.ts
similarity index 89%
rename from src/ui/components/Page/ListBlock/ListBlock.types.ts
rename to src/ui/components/Page/ListBlocks/ListBlocks.types.ts
index 71aa9489..71612c2e 100644
--- a/src/ui/components/Page/ListBlock/ListBlock.types.ts
+++ b/src/ui/components/Page/ListBlocks/ListBlocks.types.ts
@@ -2,7 +2,7 @@ import type { Link } from '../../types'
 import type { BlockObjectResponse } from '../../../../exporter'
 import type { ParsedUrlQueryInput } from 'node:querystring'
 
-export interface ListBlockProps {
+export interface ListBlocksProps {
   tag: keyof JSX.IntrinsicElements
   blocks: BlockObjectResponse[]
   href?: string
diff --git a/src/ui/components/Page/ListBlocks/index.ts b/src/ui/components/Page/ListBlocks/index.ts
new file mode 100644
index 00000000..58b7487f
--- /dev/null
+++ b/src/ui/components/Page/ListBlocks/index.ts
@@ -0,0 +1,2 @@
+import ListBlocks from './ListBlocks'
+export { ListBlocks }
diff --git a/src/ui/components/Page/NumberedListBlocks/NumberedListBlock.tsx b/src/ui/components/Page/NumberedListBlocks/NumberedListBlock.tsx
new file mode 100644
index 00000000..de7c0224
--- /dev/null
+++ b/src/ui/components/Page/NumberedListBlocks/NumberedListBlock.tsx
@@ -0,0 +1,44 @@
+import React from 'react'
+import type { NumberedListBlockProps } from './NumberedListBlock.types'
+import { RichText } from '../RichText'
+import { blockType } from '../PageHandler'
+import Page from '../Page'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    lineHeight: 1.5,
+    padding: '.2rem 0 .2rem .3rem',
+    margin: 0,
+  },
+})
+
+const NumberedListBlock = ({ block, href, link, query }: NumberedListBlockProps) => {
+  const CustomTag = blockType[block.type] as keyof JSX.IntrinsicElements
+
+  // @ts-ignore
+  const text = block[block.type]?.rich_text
+
+  if (block.has_children && block.children !== undefined) {
+    return (
+      <CustomTag key={block.id} className={`rotion-numbered-list ${Stylex(style.wrapper)}`}>
+        {text.map((v, i) => (
+          <RichText textObject={v} key={`richtext-${i}`} />
+        ))}
+        <Page blocks={block.children} href={href} link={link} query={query} />
+      </CustomTag>
+    )
+  }
+
+  return (
+    <CustomTag className={`rotion-numbered-list ${Stylex(style.wrapper)}`}>
+      {text.map((v, i) => (
+        <RichText textObject={v} key={`richtext-${i}`} />
+      ))}
+    </CustomTag>
+  )
+}
+
+export default NumberedListBlock
diff --git a/src/ui/components/Page/NumberedListBlocks/NumberedListBlocks.types.ts b/src/ui/components/Page/NumberedListBlocks/NumberedListBlock.types.ts
similarity index 87%
rename from src/ui/components/Page/NumberedListBlocks/NumberedListBlocks.types.ts
rename to src/ui/components/Page/NumberedListBlocks/NumberedListBlock.types.ts
index 63fa7ab8..b94aba03 100644
--- a/src/ui/components/Page/NumberedListBlocks/NumberedListBlocks.types.ts
+++ b/src/ui/components/Page/NumberedListBlocks/NumberedListBlock.types.ts
@@ -2,7 +2,7 @@ import type { NumberedListItemBlockObjectResponseEx } from '../../../../exporter
 import type { ParsedUrlQueryInput } from 'node:querystring'
 import type { Link } from '../../types'
 
-export interface NumberedListBlocksProps {
+export interface NumberedListBlockProps {
   block: NumberedListItemBlockObjectResponseEx
   href?: string
   link?: Link
diff --git a/src/ui/components/Page/NumberedListBlocks/NumberedListBlocks.tsx b/src/ui/components/Page/NumberedListBlocks/NumberedListBlocks.tsx
deleted file mode 100644
index 9a2dfe2a..00000000
--- a/src/ui/components/Page/NumberedListBlocks/NumberedListBlocks.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react'
-import type { BlockObjectResponse } from '../../../../exporter'
-import type { NumberedListBlocksProps } from './NumberedListBlocks.types'
-import TextBlock from '../TextBlock/TextBlock'
-import PageHandler, { blockType } from '../PageHandler'
-
-const NumberedListBlocks = ({ block, href, link, query }: NumberedListBlocksProps) => {
-  const tag = blockType[block.type] as keyof JSX.IntrinsicElements
-  // @ts-ignore
-  const text = block[block.type]?.rich_text
-  if (block.has_children && block.children !== undefined) {
-    return (
-      <div key={block.id}>
-        <TextBlock tag={tag} block={text} key={`text-${block.id}`} />
-        {block.children.results.map((bb) => (
-          PageHandler({ block: (bb as BlockObjectResponse), href, link, query })
-        ))}
-      </div>
-    )
-  }
-  return <TextBlock tag={tag} block={text} key={block.id} />
-}
-
-export default NumberedListBlocks
diff --git a/src/ui/components/Page/NumberedListBlocks/index.ts b/src/ui/components/Page/NumberedListBlocks/index.ts
index 6db6fccf..f4c5e8cb 100644
--- a/src/ui/components/Page/NumberedListBlocks/index.ts
+++ b/src/ui/components/Page/NumberedListBlocks/index.ts
@@ -1,2 +1,2 @@
-import NumberedListBlocks from './NumberedListBlocks'
-export { NumberedListBlocks }
+import NumberedListBlock from './NumberedListBlock'
+export { NumberedListBlock }
diff --git a/src/ui/components/Page/Page.tsx b/src/ui/components/Page/Page.tsx
index 463ae4e3..60a8d500 100644
--- a/src/ui/components/Page/Page.tsx
+++ b/src/ui/components/Page/Page.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
 import type { BlockObjectResponse } from '../../../exporter'
-import type { PageProps, ListType } from './Page.types'
-import ListBlock from './ListBlock/ListBlock'
+import type { PageProps, ListType, ULOL } from './Page.types'
+import { ListBlocks } from './ListBlocks'
 import PageHandler from './PageHandler'
 
-export const Page = ({ blocks, href, link, query, modules, breadcrumb_hrefs }: PageProps) => {
+export const Page = ({ blocks, href, link, query, breadcrumb_hrefs }: PageProps) => {
   const { results } = blocks
   const listType: ListType = {
     bulleted_list_item: 'ul',
@@ -14,20 +14,24 @@ export const Page = ({ blocks, href, link, query, modules, breadcrumb_hrefs }: P
   let isListTag = false
   const children: JSX.Element[] = []
   let list: BlockObjectResponse[] = []
+  const isListContinue = (i: number) => {
+    const nextIndex = i + 1
+    return listTag.includes(results[nextIndex]?.type || '')
+  }
 
   results.map((v: BlockObjectResponse, i) => {
     const block = v
     if (listTag.includes(block.type)) {
       // intermediate
-      if (isListTag && listTag.includes(results[i + 1]?.type || '')) {
+      if (isListTag && isListContinue(i)) {
         list.push(block)
       // last or (first and last)
-      } else if (isListTag || !listTag.includes(results[i + 1]?.type || '')) {
+      } else if (isListTag || !isListContinue(i)) {
         isListTag = false
         list.push(block)
         if (Object.keys(listType).includes(block.type)) {
-          const tag = listType[block.type] as keyof JSX.IntrinsicElements
-          children.push(ListBlock({ tag, blocks: list, href, link, query }))
+          const tag = listType[block.type] as ULOL
+          children.push(ListBlocks({ tag, blocks: list, href, link, query }))
           list = []
         }
       // first
@@ -36,16 +40,14 @@ export const Page = ({ blocks, href, link, query, modules, breadcrumb_hrefs }: P
         list.push(block)
       }
     } else {
-      const elem = PageHandler({ block, href, link, query, modules, breadcrumb_hrefs })
-      if (elem !== undefined) {
-        children.push(elem)
-      }
+      const elem = PageHandler({ block, href, link, query, breadcrumb_hrefs })
+      children.push(elem)
     }
     return ''
   })
 
   return (
-    <div className="notionate-blocks">
+    <div className="rotion-blocks">
       {children}
     </div>
   )
diff --git a/src/ui/components/Page/Page.types.ts b/src/ui/components/Page/Page.types.ts
index 956ad4b2..91aabab4 100644
--- a/src/ui/components/Page/Page.types.ts
+++ b/src/ui/components/Page/Page.types.ts
@@ -1,16 +1,17 @@
 import type { ListBlockChildrenResponseEx } from '../../../exporter'
 import type { ParsedUrlQueryInput } from 'node:querystring'
-import type { Link, ExternalModules } from '../types'
+import type { Link } from '../types'
 
 export interface PageProps {
   blocks: ListBlockChildrenResponseEx
   href?: string
   link?: Link
   query?: ParsedUrlQueryInput
-  modules?: ExternalModules
   breadcrumb_hrefs?: string[]
 }
 
 export interface ListType {
   [key: string]: string
 }
+
+export type ULOL = 'ul' | 'ol'
diff --git a/src/ui/components/Page/PageHandler.tsx b/src/ui/components/Page/PageHandler.tsx
index 8aa5a28d..1e731bf3 100644
--- a/src/ui/components/Page/PageHandler.tsx
+++ b/src/ui/components/Page/PageHandler.tsx
@@ -3,7 +3,7 @@ import type { HandlerProps } from './PageHandler.types'
 
 import BookmarkBlock from './BookmarkBlock/BookmarkBlock'
 import BreadcrumbBlock from './BreadcrumbBlock/BreadcrumbBlock'
-import BulletedListBlocks from './BulletedListBlocks/BulletedListBlocks'
+import BulletedListBlocks from './BulletedListBlock/BulletedListBlock'
 import CalloutBlock from './CalloutBlock/CalloutBlock'
 import ChildDatabaseBlock from './ChildDatabaseBlock/ChildDatabaseBlock'
 import ChildPageBlock from './ChildPageBlock/ChildPageBlock'
@@ -15,12 +15,11 @@ import FileBlock from './FileBlock/FileBlock'
 import TextBlock from './TextBlock/TextBlock'
 import ImageBlock from './ImageBlock/ImageBlock'
 import LinkPreviewBlock from './LinkPreviewBlock/LinkPreviewBlock'
-import NumberedListBlocks from './NumberedListBlocks/NumberedListBlocks'
+import NumberedListBlocks from './NumberedListBlocks/NumberedListBlock'
 import PdfBlock from './PdfBlock/PdfBlock'
 import SyncedBlock from './SyncedBlock/SyncedBlock'
 import TableBlock from './TableBlock/TableBlock'
 import TableOfContentsBlock from './TableOfContentsBlock/TableOfContentsBlock'
-import TemplateBlock from './TemplateBlock/TemplateBlock'
 import ToDoBlock from './ToDoBlock/ToDoBlock'
 import ToggleBlock from './ToggleBlock/ToggleBlock'
 import VideoBlock from './VideoBlock/VideoBlock'
@@ -37,7 +36,7 @@ export const blockType = {
   quote: 'blockquote',
 }
 
-export const PageHandler = ({ block, href, link, query, modules, breadcrumb_hrefs }: HandlerProps) => {
+export const PageHandler = ({ block, href, link, query, breadcrumb_hrefs }: HandlerProps) => {
   switch (block.type) {
     case 'bookmark':
       return <BookmarkBlock block={block} key={block.id} />
@@ -52,7 +51,7 @@ export const PageHandler = ({ block, href, link, query, modules, breadcrumb_href
     case 'child_page':
       return <ChildPageBlock block={block} href={href} link={link} key={block.id} />
     case 'code':
-      return <CodeBlock block={block} key={block.id} modules={modules} />
+      return <CodeBlock block={block} key={block.id} />
     case 'column_list':
       // ColumnlistBlock calls blocks
       return <ColumnListBlock block={block} href={href} link={link} query={query} key={block.id} />
@@ -61,7 +60,6 @@ export const PageHandler = ({ block, href, link, query, modules, breadcrumb_href
     case 'equation':
       return <EquationBlock block={block} key={block.id} />
     case 'file':
-      console.log(`still a not supported component: ${block.type}`)
       return <FileBlock block={block} key={block.id} />
     case 'heading_1':
     case 'heading_2':
@@ -70,9 +68,7 @@ export const PageHandler = ({ block, href, link, query, modules, breadcrumb_href
     case 'quote':
     case 'divider': {
       const tag = blockType[block.type] as keyof JSX.IntrinsicElements
-      // @ts-ignore
-      const text = block[block.type]?.rich_text
-      return <TextBlock tag={tag} block={text} key={block.id} />
+      return <TextBlock tag={tag} block={block} key={block.id} />
     }
     case 'image':
       return <ImageBlock block={block} key={block.id} />
@@ -81,19 +77,13 @@ export const PageHandler = ({ block, href, link, query, modules, breadcrumb_href
     case 'numbered_list_item':
       return <NumberedListBlocks block={block} key={block.id} />
     case 'pdf':
-      console.log(`still a not supported component: ${block.type}`, block)
       return <PdfBlock block={block} key={block.id} />
     case 'synced_block':
-      console.log(`still a not supported component: ${block.type}`)
       return <SyncedBlock block={block} key={block.id} />
     case 'table':
       return <TableBlock block={block} key={block.id} />
     case 'table_of_contents':
-      console.log(`still a not supported component: ${block.type}`, block)
       return <TableOfContentsBlock block={block} key={block.id} />
-    case 'template':
-      console.log(`still a not supported component: ${block.type}`, block)
-      return <TemplateBlock block={block} key={block.id} />
     case 'to_do':
       return <ToDoBlock block={block} key={block.id} />
     case 'toggle':
diff --git a/src/ui/components/Page/PageHandler.types.ts b/src/ui/components/Page/PageHandler.types.ts
index 971ef387..d5da479f 100644
--- a/src/ui/components/Page/PageHandler.types.ts
+++ b/src/ui/components/Page/PageHandler.types.ts
@@ -1,12 +1,11 @@
 import type { BlockObjectResponse } from '../../../exporter'
 import type { ParsedUrlQueryInput } from 'node:querystring'
-import type { Link, ExternalModules } from '../types'
+import type { Link } from '../types'
 
 export interface HandlerProps {
   block: BlockObjectResponse
   href?: string
   link?: Link
   query?: ParsedUrlQueryInput
-  modules?: ExternalModules
   breadcrumb_hrefs?: string[]
 }
diff --git a/src/ui/components/Page/PageIcon/PageIcon.tsx b/src/ui/components/Page/PageIcon/PageIcon.tsx
index f64e7b22..60d148f3 100644
--- a/src/ui/components/Page/PageIcon/PageIcon.tsx
+++ b/src/ui/components/Page/PageIcon/PageIcon.tsx
@@ -1,14 +1,27 @@
 import React from 'react'
+import Stylex from '@stylexjs/stylex'
+
+const style = Stylex.create({
+  github: {
+    fill: '#000',
+  },
+  file: {
+    fill: 'inherit',
+  }
+})
 
 export interface PageIconProps {
-  name: 'figma' | 'slack' | 'github' | 'link'
+  name: 'figma' | 'slack' | 'github' | 'file' | 'link'
+  width?: string
+  height?: string
+  className?: string
 }
 
-const PageIcon = ({ name }: PageIconProps) => {
+const PageIcon = ({ name, width, height, className }: PageIconProps) => {
   switch (name) {
     case 'figma':
       return (
-        <svg className="notionate-blocks-icons-figma" version="1.0" xmlns="http://www.w3.org/2000/svg" width="12px" height="18px" viewBox="0 0 200 300">
+        <svg className={`rotion-icons-figma ${className}`} version="1.0" xmlns="http://www.w3.org/2000/svg" width={width || '12px'} height={height || '18px'} viewBox="0 0 200 300">
           <path d="M50 300c27.6 0 50-22.4 50-50v-50H50c-27.6 0-50 22.4-50 50s22.4 50 50 50z" fill="#0acf83"/>
           <path d="M0 150c0-27.6 22.4-50 50-50h50v100H50c-27.6 0-50-22.4-50-50z" fill="#a259ff"/>
           <path d="M0 50C0 22.4 22.4 0 50 0h50v100H50C22.4 100 0 77.6 0 50z" fill="#f24e1e"/>
@@ -18,7 +31,7 @@ const PageIcon = ({ name }: PageIconProps) => {
       )
     case 'slack':
       return (
-        <svg className="notionate-blocks-icons-slack" version="1.0" xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 140 140">
+        <svg className={`rotion-icons-slack ${className}`} version="1.0" xmlns="http://www.w3.org/2000/svg" width={width || '20px'} height={height || '20px'} viewBox="0 0 140 140">
           <path d="M27.2 80c0 7.3-5.9 13.2-13.2 13.2C6.7 93.2.8 87.3.8 80c0-7.3 5.9-13.2 13.2-13.2h13.2V80zm6.6 0c0-7.3 5.9-13.2 13.2-13.2 7.3 0 13.2 5.9 13.2 13.2v33c0 7.3-5.9 13.2-13.2 13.2-7.3 0-13.2-5.9-13.2-13.2V80z" fill="#E01E5A"/>
           <path d="M47 27c-7.3 0-13.2-5.9-13.2-13.2C33.8 6.5 39.7.6 47 .6c7.3 0 13.2 5.9 13.2 13.2V27H47zm0 6.7c7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2H13.9C6.6 60.1.7 54.2.7 46.9c0-7.3 5.9-13.2 13.2-13.2H47z" fill="#36C5F0"/>
           <path d="M99.9 46.9c0-7.3 5.9-13.2 13.2-13.2 7.3 0 13.2 5.9 13.2 13.2 0 7.3-5.9 13.2-13.2 13.2H99.9V46.9zm-6.6 0c0 7.3-5.9 13.2-13.2 13.2-7.3 0-13.2-5.9-13.2-13.2V13.8C66.9 6.5 72.8.6 80.1.6c7.3 0 13.2 5.9 13.2 13.2v33.1z" fill="#2EB67D"/>
@@ -27,15 +40,22 @@ const PageIcon = ({ name }: PageIconProps) => {
       )
     case 'github':
       return (
-        <svg className="notionate-blocks-icons-github" version="1.0" xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
+        <svg className={`rotion-icons-github ${Stylex(style.github)} ${className}`} version="1.0" xmlns="http://www.w3.org/2000/svg" width={width || '20px'} height={height || '20px'} viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
           <g transform="translate(0.000000,200.000000) scale(0.100000,-0.100000)" stroke="none">
             <path d="M899 1910 c-314 -38 -586 -232 -720 -515 -63 -133 -80 -205 -86 -356 -6 -144 10 -245 57 -367 88 -226 287 -429 503 -512 110 -43 117 -38 117 88 l0 97 -98 0 c-89 0 -102 2 -138 26 -27 18 -49 46 -72 90 -37 74 -54 96 -99 127 -39 28 -42 49 -9 58 43 10 110 -28 155 -90 46 -61 71 -82 122 -96 45 -13 138 5 145 28 3 10 15 38 28 63 l22 46 -76 17 c-220 47 -330 188 -330 425 0 81 19 150 59 213 29 45 30 51 21 100 -10 52 -7 95 12 157 10 33 11 33 56 28 25 -3 82 -24 128 -47 l82 -42 59 13 c79 16 232 17 324 0 76 -13 76 -13 116 13 50 34 148 68 182 64 20 -2 28 -11 37 -43 15 -49 17 -135 4 -169 -8 -21 -4 -34 25 -76 45 -67 57 -116 57 -225 -2 -235 -118 -376 -344 -416 -64 -12 -67 -13 -52 -30 34 -38 43 -91 44 -256 0 -133 3 -164 16 -177 21 -22 25 -21 115 18 147 64 292 181 385 311 50 70 109 196 136 290 19 68 23 104 23 235 0 188 -13 248 -90 405 -92 185 -230 325 -411 415 -144 72 -349 108 -505 90z"/>
           </g>
         </svg>
       )
+    case 'file':
+      return (
+        <svg className={`rotion-icons-file ${Stylex(style.file)} ${className}`} width={width || '20px'} height={height || '20px'} viewBox="0 0 16 16">
+          <path d="M4.35645 15.4678H11.6367C13.0996 15.4678 13.8584 14.6953 13.8584 13.2256V7.02539C13.8584 6.0752 13.7354 5.6377 13.1406 5.03613L9.55176 1.38574C8.97754 0.804688 8.50586 0.667969 7.65137 0.667969H4.35645C2.89355 0.667969 2.13477 1.44043 2.13477 2.91016V13.2256C2.13477 14.7021 2.89355 15.4678 4.35645 15.4678ZM4.46582 14.1279C3.80273 14.1279 3.47461 13.7793 3.47461 13.1436V2.99219C3.47461 2.36328 3.80273 2.00781 4.46582 2.00781H7.37793V5.75391C7.37793 6.73145 7.86328 7.20312 8.83398 7.20312H12.5186V13.1436C12.5186 13.7793 12.1836 14.1279 11.5205 14.1279H4.46582ZM8.95703 6.02734C8.67676 6.02734 8.56055 5.9043 8.56055 5.62402V2.19238L12.334 6.02734H8.95703ZM8.59473 12.7266V10.6279L8.54004 9.56152L9.06641 10.1152L9.59277 10.6484C9.68848 10.7646 9.8457 10.833 9.98926 10.833C10.2969 10.833 10.5293 10.6143 10.5293 10.3066C10.5293 10.1357 10.4678 10.0127 10.3379 9.90332L8.45117 8.16699C8.29395 8.02344 8.16406 7.96191 7.99316 7.96191C7.8291 7.96191 7.69922 8.02344 7.54199 8.16699L5.65527 9.90332C5.52539 10.0127 5.46387 10.1357 5.46387 10.3066C5.46387 10.6143 5.68945 10.833 6.00391 10.833C6.14746 10.833 6.29785 10.7646 6.40039 10.6484L6.92676 10.1152L7.45312 9.56152L7.39844 10.6279V12.7266C7.39844 13.0547 7.67188 13.3008 7.99316 13.3008C8.32129 13.3008 8.59473 13.0547 8.59473 12.7266Z">
+          </path>
+        </svg>
+      )
     case 'link':
       return (
-        <svg className="" version="1.0" xmlns="http://www.w3.org/2000/svg" width="13px" height="13px" viewBox="0 0 13 13" role="graphics-symbol">
+        <svg className={`rotion-icons-link ${className}`} version="1.0" xmlns="http://www.w3.org/2000/svg" width="13px" height="13px" viewBox="0 0 13 13" role="graphics-symbol">
           <path d="M6.30826 4.43292L1.76184 8.98454C1.76176 8.98462 1.76169 8.9847 1.76161 8.98477C1.76158 8.9848 1.76156 8.98482 1.76154 8.98484C1.46068 9.28584 1.25 9.6914 1.25 10.1565C1.25 10.6117 1.45865 11.0119 1.73417 11.2886C2.01014 11.5658 2.41107 11.7773 2.87078 11.7773C3.34169 11.7773 3.73758 11.5617 4.03477 11.2733L4.03482 11.2734L4.04244 11.2657L8.58864 6.72474V8.667C8.58864 9.51956 9.22729 10.2935 10.1521 10.2935C11.0528 10.2935 11.75 9.54534 11.75 8.66127V2.92671C11.75 2.48722 11.5981 2.06381 11.2838 1.74808C10.9689 1.43182 10.5446 1.27728 10.1006 1.27728H4.36028C3.46161 1.27728 2.72804 1.97749 2.72804 2.86942C2.72804 3.79734 3.51104 4.43292 4.35455 4.43292H6.30826Z" fill="#3E3C38" stroke="white" strokeWidth="1.5">
           </path>
         </svg>
diff --git a/src/ui/components/Page/PdfBlock/PdfBlock.stories.tsx b/src/ui/components/Page/PdfBlock/PdfBlock.stories.tsx
new file mode 100644
index 00000000..8d3c87a5
--- /dev/null
+++ b/src/ui/components/Page/PdfBlock/PdfBlock.stories.tsx
@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import type { PdfBlockObjectResponseEx } from '../../../../exporter'
+import PdfBlock from './PdfBlock'
+
+const block: PdfBlockObjectResponseEx = {
+  object: 'block',
+  id: '12345678-1234-1234-1234-1234567890ab',
+  created_time: '',
+  last_edited_time: '',
+  created_by: {
+    object: 'user',
+    id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  last_edited_by: {
+    object: 'user',
+    id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  has_children: false,
+  archived: false,
+  type: 'pdf',
+  parent: {
+    type: 'page_id',
+    page_id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  pdf: {
+    type: 'external',
+    external: {
+      url: 'https://www.africau.edu/images/default/sample.pdf',
+    },
+    caption: [],
+    src: 'https://www.africau.edu/images/default/sample.pdf',
+    size: 3028,
+  },
+}
+
+const meta = {
+  title: 'Page/PdfBlock',
+  component: PdfBlock,
+  args: {
+    block,
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof PdfBlock>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
diff --git a/src/ui/components/Page/PdfBlock/PdfBlock.tsx b/src/ui/components/Page/PdfBlock/PdfBlock.tsx
index 5811f85f..3150fedd 100644
--- a/src/ui/components/Page/PdfBlock/PdfBlock.tsx
+++ b/src/ui/components/Page/PdfBlock/PdfBlock.tsx
@@ -2,17 +2,60 @@ import React from 'react'
 import type { RichTextItemResponse } from '../../../../exporter'
 import RichText from '../RichText/RichText'
 import type { PdfBlockProps } from './PdfBlock.types'
+import { PageIcon } from '../PageIcon'
+import Stylex from '@stylexjs/stylex'
+import { tokens, link } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+  },
+  link: {
+    display: 'grid',
+    gridTemplate: 'repeat(1, 1fr) / 1.5rem 1fr',
+    gap: '.4rem',
+    margin: '.2rem 0 0',
+    padding: '.6rem .3rem',
+    textDecoration: link.textDecoration,
+    color: {
+      default: link.color,
+      ':hover': link.colorHover,
+    },
+    alignItems: 'top',
+    backgroundColor: {
+      default: link.backgroundColor,
+      ':hover': link.backgroundColorHover,
+    },
+    borderRadius: tokens.borderRadius,
+  },
+  size: {
+    fontSize: '.8rem',
+    paddingLeft: '.5rem',
+    color: '#888',
+  },
+})
 
-// TODO: Iimplement and design
 const PdfBlock = ({ block }: PdfBlockProps) => {
   const { pdf } = block
   const url = (pdf.type === 'external') ? pdf.external.url : pdf.file.url
+  const fileName = url.substring(url.lastIndexOf('/') + 1)
+  // Byte to KB or MB
+  const size = pdf.size > 9999 ? `${(Math.ceil(pdf.size / 1024 / 1000 * 10) / 10).toFixed(1)}MB` : `${(Math.ceil(pdf.size / 1024 * 10) / 10).toFixed(1)}KB`
+
   return (
-    <div className="notionate-blocks-pdf">
-      {url}
-      {pdf.caption.map((v: RichTextItemResponse, i) => (
-        <RichText textObject={v} key={`richtext-${i}`} />
-      ))}
+    <div className={`rotion-pdf ${Stylex(style.wrapper)}`}>
+      <a href={url} target="_blank" className={`rotion-pdf-link ${Stylex(style.link)}`} rel="noreferrer">
+        <PageIcon name='file' />
+        <span>
+          {fileName}
+          <span className={`rotion-pdf-size ${Stylex(style.size)}`}>
+            {size}
+          </span>
+        </span>
+        {pdf.caption.map((v: RichTextItemResponse, i) => (
+          <RichText textObject={v} key={`richtext-${i}`} />
+        ))}
+      </a>
     </div>
   )
 }
diff --git a/src/ui/components/Page/PdfBlock/PdfBlock.types.ts b/src/ui/components/Page/PdfBlock/PdfBlock.types.ts
index 8469cb85..cd483fa1 100644
--- a/src/ui/components/Page/PdfBlock/PdfBlock.types.ts
+++ b/src/ui/components/Page/PdfBlock/PdfBlock.types.ts
@@ -1,5 +1,5 @@
-import type { PdfBlockObjectResponse } from '../../../../exporter'
+import type { PdfBlockObjectResponseEx } from '../../../../exporter'
 
 export interface PdfBlockProps {
-  block: PdfBlockObjectResponse,
+  block: PdfBlockObjectResponseEx,
 }
diff --git a/src/ui/components/Page/RichText/Annotation/Annotation.stories.tsx b/src/ui/components/Page/RichText/Annotation/Annotation.stories.tsx
index 7235a334..a8123ec1 100644
--- a/src/ui/components/Page/RichText/Annotation/Annotation.stories.tsx
+++ b/src/ui/components/Page/RichText/Annotation/Annotation.stories.tsx
@@ -1,9 +1,7 @@
 import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
-import type { RichTextItemResponseEx, TextRichTextItemResponse } from '../../../../../exporter'
+import type { RichTextItemResponseEx } from '../../../../../exporter'
 import Annotation from './Annotation'
-import '../../../../../styles/base.css'
-import '../../../../../styles/page.css'
 
 const textObject = {
   type: 'text',
@@ -78,6 +76,86 @@ export const Code: Story = {
   }
 }
 
+const gray = structuredClone(textObject)
+gray.annotations.color = 'gray'
+export const Gray: Story = {
+  args: {
+    textObject: gray,
+  }
+}
+
+const bgGray = structuredClone(textObject)
+bgGray.annotations.color = 'gray_background'
+export const BgGray: Story = {
+  args: {
+    textObject: bgGray,
+  }
+}
+
+const brown = structuredClone(textObject)
+brown.annotations.color = 'brown'
+export const Brown: Story = {
+  args: {
+    textObject: brown,
+  }
+}
+
+const bgBrown = structuredClone(textObject)
+bgBrown.annotations.color = 'brown_background'
+export const BgBrown: Story = {
+  args: {
+    textObject: bgBrown,
+  }
+}
+
+const orange = structuredClone(textObject)
+orange.annotations.color = 'orange'
+export const Orange: Story = {
+  args: {
+    textObject: orange,
+  }
+}
+
+const bgOrange = structuredClone(textObject)
+bgOrange.annotations.color = 'orange_background'
+export const BgOrange: Story = {
+  args: {
+    textObject: bgOrange,
+  }
+}
+
+const yellow = structuredClone(textObject)
+yellow.annotations.color = 'yellow'
+export const Yellow: Story = {
+  args: {
+    textObject: yellow,
+  }
+}
+
+const bgYellow = structuredClone(textObject)
+bgYellow.annotations.color = 'yellow_background'
+export const BgYellow: Story = {
+  args: {
+    textObject: bgYellow,
+  }
+}
+
+const green = structuredClone(textObject)
+green.annotations.color = 'green'
+export const Green: Story = {
+  args: {
+    textObject: green,
+  }
+}
+
+const bgGreen = structuredClone(textObject)
+bgGreen.annotations.color = 'green_background'
+export const BgGreen: Story = {
+  args: {
+    textObject: bgGreen,
+  }
+}
+
 const blue = structuredClone(textObject)
 blue.annotations.color = 'blue'
 export const Blue: Story = {
@@ -86,12 +164,58 @@ export const Blue: Story = {
   }
 }
 
-const linked = structuredClone(textObject) as TextRichTextItemResponse
-linked.text.link = { url: 'https://github.com' }
-linked.href = 'https://github.com'
-export const Linked: Story = {
+const bgBlue = structuredClone(textObject)
+bgBlue.annotations.color = 'blue_background'
+export const BgBlue: Story = {
+  args: {
+    textObject: bgBlue,
+  }
+}
+
+const purple = structuredClone(textObject)
+purple.annotations.color = 'purple'
+export const Purple: Story = {
+  args: {
+    textObject: purple,
+  }
+}
+
+const bgPurple = structuredClone(textObject)
+bgPurple.annotations.color = 'purple_background'
+export const BgPurple: Story = {
+  args: {
+    textObject: bgPurple,
+  }
+}
+
+const pink = structuredClone(textObject)
+pink.annotations.color = 'pink'
+export const Pink: Story = {
+  args: {
+    textObject: pink,
+  }
+}
+
+const bgPink = structuredClone(textObject)
+bgPink.annotations.color = 'pink_background'
+export const BgPink: Story = {
+  args: {
+    textObject: bgPink,
+  }
+}
+
+const red = structuredClone(textObject)
+red.annotations.color = 'red'
+export const Red: Story = {
+  args: {
+    textObject: red,
+  }
+}
+
+const bgRed = structuredClone(textObject)
+bgRed.annotations.color = 'red_background'
+export const BgRed: Story = {
   args: {
-    textObject: linked,
-    children: <>GitHub</>,
+    textObject: bgRed,
   }
 }
diff --git a/src/ui/components/Page/RichText/Annotation/Annotation.tsx b/src/ui/components/Page/RichText/Annotation/Annotation.tsx
index 68324968..36c47372 100644
--- a/src/ui/components/Page/RichText/Annotation/Annotation.tsx
+++ b/src/ui/components/Page/RichText/Annotation/Annotation.tsx
@@ -1,25 +1,120 @@
 import React from 'react'
 import type { RichTextProps } from '../RichText.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+  },
+  bold: {
+    fontWeight: 'bold',
+  },
+  italic: {
+    fontStyle: 'italic',
+  },
+  strikethrough: {
+    textDecoration: 'line-through',
+  },
+  underline: {
+    textDecoration: 'underline',
+  },
+  code: {
+    color: '#EB5757',
+    fontFamily: '"SFMono-Regular", Menlo, Consolas, "PT Mono", "Liberation Mono", Courier, monospace',
+    background: 'rgba(135, 131, 120, 0.15)',
+    borderRadius: tokens.borderRadius,
+    fontSize: '.85rem',
+    padding: '.1rem .2rem',
+  },
+  default: {
+    color: 'inherit',
+  },
+  gray: {
+    color: 'rgba(120, 119, 116, 1)',
+  },
+  brown: {
+    color: 'rgba(159, 107, 83, 1)',
+  },
+  orange: {
+    color: 'rgba(217, 115, 13, 1)',
+  },
+  yellow: {
+    color: 'rgba(203, 145, 47, 1)',
+  },
+  green: {
+    color: 'rgba(68, 131, 97, 1)',
+  },
+  blue: {
+    color: 'rgba(51, 126, 169, 1)',
+  },
+  purple: {
+    color: 'rgba(144, 101, 176, 1)',
+  },
+  pink: {
+    color: 'rgba(193, 76, 138, 1)',
+  },
+  red: {
+    color: 'rgba(212, 76, 71, 1)',
+  },
+  default_background: {
+    backgroundColor: 'inherit',
+  },
+  gray_background: {
+    background: 'rgba(241, 241, 239, 1)',
+  },
+  brown_background: {
+    background: 'rgba(244, 238, 238, 1)',
+  },
+  orange_background: {
+    background: 'rgba(251, 236, 221, 1)',
+  },
+  yellow_background: {
+    background: 'rgba(251, 243, 219, 1)',
+  },
+  green_background: {
+    background: 'rgba(237, 243, 236, 1)',
+  },
+  blue_background: {
+    background: 'rgba(231, 243, 248, 1)',
+  },
+  purple_background: {
+    background: 'rgba(244, 240, 247, 0.8)',
+  },
+  pink_background: {
+    background: 'rgba(249, 238, 243, 0.8)',
+  },
+  red_background: {
+    background: 'rgba(253, 235, 236, 1)',
+  },
+})
 
 const Annotation = ({ textObject, children }: RichTextProps) => {
-  if (textObject === undefined) {
+  if (!textObject) {
     return <></>
   }
   const { annotations } = textObject
-  const css = ['notionate-blocks-text-annotation']
-  css.push(`notionate-blocks-text-${annotations.color.replace('_', '-')}`)
-  if (annotations.bold) css.push('notionate-blocks-text-bold')
-  if (annotations.italic) css.push('notionate-blocks-text-italic')
-  if (annotations.strikethrough) css.push('notionate-blocks-text-strikethrough')
-  if (annotations.underline) css.push('notionate-blocks-text-underline')
-  if (annotations.code) css.push('notionate-blocks-text-code')
-  // if (href !== null) css.push('notionate-blocks-text-anchor')
+  const { color } = annotations
+  const css = ['rotion-text-annotation']
+  css.push(Stylex(style.wrapper))
+  // @ts-ignore
+  css.push(`rotion-text-${color} ${annotations.code ? '' : Stylex(style[color])}`)
+  if (annotations.bold) css.push(`rotion-text-bold ${Stylex(style.bold)}`)
+  if (annotations.italic) css.push(`rotion-text-italic ${Stylex(style.italic)}`)
+  if (annotations.strikethrough) css.push(`rotion-text-strikethrough ${Stylex(style.strikethrough)}`)
+  if (annotations.underline) css.push(`rotion-text-underline ${Stylex(style.underline)}`)
+  if (annotations.code) css.push(`rotion-text-code ${Stylex(style.code)}`)
+
+  if (children) {
+    return (
+      <span className={css.join(' ')}>
+        {children}
+      </span>
+    )
+  }
 
-  return (
-    <span className={css.join(' ')}>
-      {children}
-    </span>
-  )
+  const html = textObject.plain_text.replace(/\n/g, '<br />')
+  return <span className={css.join(' ')} dangerouslySetInnerHTML={{ __html: html }} />
 }
 
 export default Annotation
diff --git a/src/ui/components/Page/RichText/Equation/Equation.stories.tsx b/src/ui/components/Page/RichText/Equation/Equation.stories.tsx
index e7e78a2a..db1c6a98 100644
--- a/src/ui/components/Page/RichText/Equation/Equation.stories.tsx
+++ b/src/ui/components/Page/RichText/Equation/Equation.stories.tsx
@@ -2,8 +2,6 @@ import React from 'react'
 import type { EquationRichTextItemResponse } from '../../../../../exporter'
 import type { Meta, StoryObj } from '@storybook/react'
 import Equation from './Equation'
-import '../../../../../styles/base.css'
-import '../../../../../styles/page.css'
 
 const textObject = {
   type: 'equation',
diff --git a/src/ui/components/Page/RichText/Equation/Equation.tsx b/src/ui/components/Page/RichText/Equation/Equation.tsx
index 73f37d96..f93d4736 100644
--- a/src/ui/components/Page/RichText/Equation/Equation.tsx
+++ b/src/ui/components/Page/RichText/Equation/Equation.tsx
@@ -1,6 +1,13 @@
 import React, { useMemo } from 'react'
 import Katex from 'katex'
 import type { EquationProps } from './Equation.types'
+import Stylex from '@stylexjs/stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    display: 'block',
+  }
+})
 
 const Equation = ({ textObject }: EquationProps) => {
   const { equation } = textObject
@@ -13,9 +20,7 @@ const Equation = ({ textObject }: EquationProps) => {
     })
   }, [formula])
 
-  return (
-    <span className="notionate-equation" dangerouslySetInnerHTML={{ __html: html }} />
-  )
+  return <span className={`rotion-equation-html ${Stylex(style.wrapper)}`} dangerouslySetInnerHTML={{ __html: html }} />
 }
 
 export default Equation
diff --git a/src/ui/components/Page/RichText/LinkIfLinked/LinkIfLinked.stories.tsx b/src/ui/components/Page/RichText/LinkIfLinked/LinkIfLinked.stories.tsx
index 3db2bb03..5d29bc00 100644
--- a/src/ui/components/Page/RichText/LinkIfLinked/LinkIfLinked.stories.tsx
+++ b/src/ui/components/Page/RichText/LinkIfLinked/LinkIfLinked.stories.tsx
@@ -2,8 +2,6 @@ import React from 'react'
 import type { TextRichTextItemResponse } from '../../../../../exporter'
 import type { Meta, StoryObj } from '@storybook/react'
 import LinkIfLinked from './LinkIfLinked'
-import '../../../../../styles/base.css'
-import '../../../../../styles/page.css'
 
 const textObject = {
   type: 'text',
diff --git a/src/ui/components/Page/RichText/LinkIfLinked/LinkIfLinked.tsx b/src/ui/components/Page/RichText/LinkIfLinked/LinkIfLinked.tsx
index 42c84f2e..338b8ef2 100644
--- a/src/ui/components/Page/RichText/LinkIfLinked/LinkIfLinked.tsx
+++ b/src/ui/components/Page/RichText/LinkIfLinked/LinkIfLinked.tsx
@@ -1,9 +1,26 @@
 import React from 'react'
 import type { TextLinkProps, LinkIfLinkedProps } from './LinkIfLinked.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens, link } from '../../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    textDecoration: link.textDecoration,
+    borderBottom: {
+      default: link.borderBottom,
+      ':hover': link.borderBottomHover,
+    },
+    color: {
+      default: link.color,
+      ':hover': link.colorHover,
+    },
+  },
+})
 
 export const TextLink = ({ textObject, children }: TextLinkProps) => {
   return (
-    <a className="notionate-blocks-text-a" href={textObject.href as string} rel="noreferrer" target="_blank">
+    <a className={`rotion-text-link ${Stylex(style.wrapper)}`} href={textObject.href as string} rel="noreferrer" target="_blank">
       {children}
     </a>
   )
diff --git a/src/ui/components/Page/RichText/Mention/DateMention/DateMention.tsx b/src/ui/components/Page/RichText/Mention/DateMention/DateMention.tsx
index f5a586ea..ee8960c5 100644
--- a/src/ui/components/Page/RichText/Mention/DateMention/DateMention.tsx
+++ b/src/ui/components/Page/RichText/Mention/DateMention/DateMention.tsx
@@ -1,12 +1,51 @@
 import React from 'react'
 import type { DateMentionProps } from './DateMention.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../../../../tokens.stylex'
+import { cdate } from 'cdate'
+import { plugin } from 'cdate-schedule'
 
-const DateMention = ({ date, children }: DateMentionProps) => {
+const styles = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    color: tokens.secondaryText,
+  },
+  atsign: {
+    color: tokens.thirdText,
+  },
+})
+
+interface endMentionProps {
+  dateOrDateTime?: string
+  prefix?: string
+}
+
+const DateOrDateTime = ({ dateOrDateTime, prefix }: endMentionProps) => {
+  if (!dateOrDateTime) {
+    return <></>
+  }
+
+  const sdate = cdate().plugin(plugin).scheduleFn()
+  return (
+    <span>
+      {prefix}
+      <span title={sdate(dateOrDateTime).format()}>
+        {sdate(dateOrDateTime).schedule()}
+      </span>
+    </span>
+  )
+}
+
+const DateMention = ({ date }: DateMentionProps) => {
   const { start, end, time_zone } = date
   return (
-    <span className="notionate-blocks-text-mention-date">
-      @{start}{end === null ? '' : ` -> ${end}`}{time_zone === null ? '' : `(${time_zone})`}
-      {children}
+    <span className={`rotion-mention-date ${Stylex(styles.wrapper)}`}>
+      <span className={`rotion-mention-atsign ${Stylex(styles.atsign)}`}>
+        @
+      </span>
+      <DateOrDateTime dateOrDateTime={start} />
+      {end !== null && <DateOrDateTime dateOrDateTime={end} prefix=' → ' />}
+      {time_zone !== null && `(${time_zone})`}
     </span>
   )
 }
diff --git a/src/ui/components/Page/RichText/Mention/DateMention/DateMention.types.ts b/src/ui/components/Page/RichText/Mention/DateMention/DateMention.types.ts
index 3bd1589f..4cd57ced 100644
--- a/src/ui/components/Page/RichText/Mention/DateMention/DateMention.types.ts
+++ b/src/ui/components/Page/RichText/Mention/DateMention/DateMention.types.ts
@@ -1,7 +1,5 @@
-import type { ReactNode } from 'react'
 import { DateResponse } from '../../../../../../exporter'
 
 export interface DateMentionProps {
   date: DateResponse
-  children?: ReactNode
 }
diff --git a/src/ui/components/Page/RichText/Mention/LinkPreviewMemtion/LinkPreviewMention.tsx b/src/ui/components/Page/RichText/Mention/LinkPreviewMemtion/LinkPreviewMention.tsx
deleted file mode 100644
index b531843b..00000000
--- a/src/ui/components/Page/RichText/Mention/LinkPreviewMemtion/LinkPreviewMention.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react'
-import { pathBasename } from '../../../../lib'
-import PageIcon from '../../../PageIcon/PageIcon'
-import type { LinkPreviewMemtionProps } from './LinkPreviewMention.types'
-
-const LinkPreviewMention = ({ url, text, children }: LinkPreviewMemtionProps) => {
-  return (
-    <span className="notionate-blocks-text-mention">
-      {url.includes('github.com') && <PageIcon name='github' />}
-      {url.includes('slack.com') && <PageIcon name='slack' />}
-      {url.includes('figma.com') && <PageIcon name='figma' />}
-      {pathBasename(text)}
-      {children}
-    </span>
-  )
-}
-
-export default LinkPreviewMention
diff --git a/src/ui/components/Page/RichText/Mention/LinkPreviewMention/LinkPreviewMention.tsx b/src/ui/components/Page/RichText/Mention/LinkPreviewMention/LinkPreviewMention.tsx
new file mode 100644
index 00000000..b495d36b
--- /dev/null
+++ b/src/ui/components/Page/RichText/Mention/LinkPreviewMention/LinkPreviewMention.tsx
@@ -0,0 +1,66 @@
+import React from 'react'
+import { pathBasename } from '../../../../lib'
+import PageIcon from '../../../PageIcon/PageIcon'
+import type { LinkPreviewMemtionProps } from './LinkPreviewMention.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens, link } from '../../../../tokens.stylex'
+
+const styles = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    color: link.color,
+    backgroundColor: {
+      default: link.backgroundColor,
+      ':hover': link.backgroundColorHover,
+    },
+    padding: '.1rem .2rem',
+    borderRadius: tokens.borderRadius,
+    lineHeight: 1,
+    textDecoration: link.textDecoration,
+  },
+  icon: {
+    verticalAlign: 'middle',
+    paddingRight: '.3rem',
+  },
+  text: {
+    borderBottom: {
+      default: link.borderBottom,
+      ':hover': link.borderBottomHover,
+    },
+  }
+})
+
+const LinkPreviewMention = ({ url, text }: LinkPreviewMemtionProps) => {
+  if (url.includes('slack.com')) {
+    return (
+      <a className={`rotion-mention-linkpreview ${Stylex(styles.wrapper)}`} href={url} rel="noreferrer" target="_blank">
+        <PageIcon name='slack' className={Stylex(styles.icon)} width='17px' height='17px' />
+        <span className={`rotion-mention-linkprevew-text ${Stylex(styles.text)}`}>
+          Message in Slack
+        </span>
+      </a>
+    )
+  }
+
+  if (url.includes('figma.com')) {
+    return (
+      <a className={`rotion-mention-linkpreview ${Stylex(styles.wrapper)}`} href={url} rel="noreferrer" target="_blank">
+        <PageIcon name='figma' className={Stylex(styles.icon)} width='10px' height='16px' />
+        <span className={`rotion-mention-linkprevew-text ${Stylex(styles.text)}`}>
+          {pathBasename(text).replace(/-/g, ' ')}
+        </span>
+      </a>
+    )
+  }
+
+  return (
+    <a className={`rotion-mention-linkpreview ${Stylex(styles.wrapper)}`} href={url} rel="noreferrer" target="_blank">
+      {url.includes('github.com') && <PageIcon name='github' className={Stylex(styles.icon)} width='17px' height='17px' />}
+      <span className={`rotion-mention-linkprevew-text ${Stylex(styles.text)}`}>
+        {pathBasename(text)}
+      </span>
+    </a>
+  )
+}
+
+export default LinkPreviewMention
diff --git a/src/ui/components/Page/RichText/Mention/LinkPreviewMemtion/LinkPreviewMention.types.ts b/src/ui/components/Page/RichText/Mention/LinkPreviewMention/LinkPreviewMention.types.ts
similarity index 100%
rename from src/ui/components/Page/RichText/Mention/LinkPreviewMemtion/LinkPreviewMention.types.ts
rename to src/ui/components/Page/RichText/Mention/LinkPreviewMention/LinkPreviewMention.types.ts
diff --git a/src/ui/components/Page/RichText/Mention/LinkPreviewMemtion/index.ts b/src/ui/components/Page/RichText/Mention/LinkPreviewMention/index.ts
similarity index 100%
rename from src/ui/components/Page/RichText/Mention/LinkPreviewMemtion/index.ts
rename to src/ui/components/Page/RichText/Mention/LinkPreviewMention/index.ts
diff --git a/src/ui/components/Page/RichText/Mention/Mention.stories.tsx b/src/ui/components/Page/RichText/Mention/Mention.stories.tsx
index 992f15e5..e4bde411 100644
--- a/src/ui/components/Page/RichText/Mention/Mention.stories.tsx
+++ b/src/ui/components/Page/RichText/Mention/Mention.stories.tsx
@@ -1,22 +1,14 @@
-import React from 'react'
 import type { MentionRichTextItemResponseEx } from '../../../../../exporter'
 import type { Meta, StoryObj } from '@storybook/react'
 import Mention from './Mention'
-import '../../../../../styles/base.css'
-import '../../../../../styles/page.css'
+import { cdate } from 'cdate'
 
 const textObject: MentionRichTextItemResponseEx = {
   type: 'mention',
   mention: {
     type: 'user',
     user: {
-      type: 'person',
-      person: {
-        email: 'alice@example.com',
-      },
-      name: 'alice',
-      avatar_url: null,
-      id: 'ididididid',
+      id: '12345678-1234-1234-1234-1234567890ab',
       object: 'user',
     },
   },
@@ -28,7 +20,7 @@ const textObject: MentionRichTextItemResponseEx = {
     code: false,
     color: 'default',
   },
-  plain_text: 'alice',
+  plain_text: '@Anonymous',
   href: null,
 }
 
@@ -37,7 +29,6 @@ const meta = {
   component: Mention,
   args: {
     textObject,
-    children: <>Hello</>,
   },
   tags: ['autodocs'],
 } satisfies Meta<typeof Mention>
@@ -45,31 +36,24 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-const userMention: MentionRichTextItemResponseEx = {
-  type: 'mention',
-  mention: {
-    type: 'user',
-    user: {
-      type: 'person',
-      person: {
-        email: 'alice@example.com',
-      },
-      name: 'alice',
-      avatar_url: null,
-      id: 'ididididid',
-      object: 'user',
-    },
-  },
-  annotations: {
-    bold: true,
-    italic: false,
-    strikethrough: false,
-    underline: false,
-    code: false,
-    color: 'default',
-  },
-  plain_text: 'alice',
-  href: null,
+/* ANONYMOUS MENTION */
+const anonymousMention = structuredClone(textObject) as MentionRichTextItemResponseEx
+export const AnnonymousMention: Story = {
+  args: {
+    textObject: anonymousMention,
+  }
+}
+
+/* USER MENTION */
+const userMention = structuredClone(textObject) as MentionRichTextItemResponseEx
+// @ts-ignore
+userMention.mention.user = {
+  id: '12345678-1234-1234-1234-1234567890ab',
+  object: 'user',
+  type: 'person',
+  person: { email: 'alice@example.com' },
+  name: 'Alice Cocéa',
+  avatar_url: null,
 }
 export const UserMention: Story = {
   args: {
@@ -77,21 +61,54 @@ export const UserMention: Story = {
   }
 }
 
-const linkPreviewMention = structuredClone(userMention)
-linkPreviewMention.mention = {
+/* GITHUB PREVIEW MENTION */
+const github = 'https://github.com/linyows/rotion'
+const githubPreviewMention = structuredClone(textObject)
+githubPreviewMention.mention = {
   type: 'link_preview',
-  link_preview: {
-    url: 'https://github.com',
-  },
+  link_preview: { url: github },
+}
+githubPreviewMention.plain_text = github
+githubPreviewMention.href = github
+export const GithubLinkPreviewMention: Story = {
+  args: {
+    textObject: githubPreviewMention,
+  }
+}
+
+/* SLACK PREVIEW MENTION */
+const slack = 'https://linyows.slack.com/archives/C02FCHEQH/p1658643567381379'
+const slackPreviewMention = structuredClone(textObject)
+slackPreviewMention.mention = {
+  type: 'link_preview',
+  link_preview: { url: slack },
 }
-export const LinkPreviewMention: Story = {
+slackPreviewMention.plain_text = slack
+slackPreviewMention.href = slack
+export const SlackLinkPreviewMention: Story = {
   args: {
-    textObject: linkPreviewMention,
+    textObject: slackPreviewMention,
   }
 }
 
-const templateMention = structuredClone(userMention)
-linkPreviewMention.mention = {
+/* FIGMA PREVIEW MENTION */
+const figma = 'https://www.figma.com/file/GfHZFRpWGd0QXsRg9igdw8/Google-Material-Design?node-id=0%3A1'
+const figmaPreviewMention = structuredClone(textObject)
+figmaPreviewMention.mention = {
+  type: 'link_preview',
+  link_preview: { url: figma },
+}
+figmaPreviewMention.plain_text = figma
+figmaPreviewMention.href = figma
+export const FigmaLinkPreviewMention: Story = {
+  args: {
+    textObject: figmaPreviewMention,
+  }
+}
+
+/* TEMPLATE MENTION
+const templateMention = structuredClone(textObject)
+templateMention.mention = {
   type: 'template_mention',
   template_mention: {
     type: 'template_mention_user',
@@ -103,27 +120,63 @@ export const TemplateMention: Story = {
     textObject: templateMention,
   }
 }
+*/
+
+/* START DATE MENTION */
+const startDateMention = structuredClone(textObject)
+startDateMention.mention = {
+  type: 'date',
+  date: {
+    start: '2024-01-01T00:00:00.000+09:00',
+    end: null,
+    time_zone: null,
+  },
+}
+export const StartDateMention: Story = {
+  args: {
+    textObject: startDateMention,
+  }
+}
 
-const dateMention = structuredClone(userMention)
-dateMention.mention = {
+/* PERIOD DATE MENTION */
+const periodDateMention = structuredClone(textObject)
+periodDateMention.mention = {
   type: 'date',
   date: {
-    start: '20240101-000000',
+    start: '2023-12-01T12:00:00.000+09:00',
+    end: '2024-02-01T10:00:00.000+09:00',
+    time_zone: null,
+  },
+}
+export const PeriodDateMention: Story = {
+  args: {
+    textObject: periodDateMention,
+  }
+}
+
+/* YESTERDAY MENTION */
+const yesterday = cdate().add(-1, 'day').format('YYYY-MM-DDT00:00:00.000+09:00')
+const yesterdayMention = structuredClone(textObject)
+yesterdayMention.mention = {
+  type: 'date',
+  date: {
+    start: yesterday.toString(),
     end: null,
     time_zone: null,
   },
 }
-export const DateMention: Story = {
+export const YesterdayMention: Story = {
   args: {
-    textObject: dateMention,
+    textObject: yesterdayMention,
   }
 }
 
-const pageMention = structuredClone(userMention)
+/* PAGE MENTION */
+const pageMention = structuredClone(textObject)
 pageMention.mention = {
   type: 'page',
   page: {
-    id: 'abcdefg',
+    id: '12345678-1234-1234-1234-1234-1234567890ab',
     name: 'Child Page',
     icon: { type: 'emoji', emoji: '✌️' }
   },
@@ -134,17 +187,18 @@ export const PageMention: Story = {
   }
 }
 
-const databaseMention = structuredClone(userMention)
+/* DATABSE MENTION */
+const databaseMention = structuredClone(textObject)
 databaseMention.mention = {
   type: 'database',
   database: {
-    id: 'abcdefg',
+    id: '12345678-1234-1234-1234-1234-1234567890ab',
     name: 'Child Database',
     icon: {
       type: 'external',
-      src: 'https://www.notion.so/icons/light-bulb_blue.svg?mode=light',
-      url: 'https://www.notion.so/icons/light-bulb_blue.svg?mode=light',
-    }
+      src: 'https://www.notion.so/icons/light-bulb_blue.svg',
+      url: 'https://www.notion.so/icons/light-bulb_blue.svg',
+    },
   },
 }
 export const DatabaseMention: Story = {
diff --git a/src/ui/components/Page/RichText/Mention/Mention.tsx b/src/ui/components/Page/RichText/Mention/Mention.tsx
index a5e60d31..f7659e78 100644
--- a/src/ui/components/Page/RichText/Mention/Mention.tsx
+++ b/src/ui/components/Page/RichText/Mention/Mention.tsx
@@ -1,46 +1,36 @@
 import React from 'react'
 import UserMention from './UserMention/UserMention'
 import type { MentionProps } from './Mention.types'
-import { PageMention } from './PageMention'
-import { LinkPreviewMention } from './LinkPreviewMemtion'
+import { PageOrDatabaseMention } from './PageOrDatabaseMention'
+import { LinkPreviewMention } from './LinkPreviewMention'
 import { DateMention } from './DateMention'
 import { TemplateMention } from './TemplateMention'
 
 const Mention = ({ textObject, children }: MentionProps) => {
-  if (textObject === undefined) {
+  if (!textObject) {
     return <></>
   }
 
   switch (textObject.mention.type) {
     case 'user':
       return (
-        <UserMention>
-          {children}
-        </UserMention>
+        <UserMention payload={textObject} />
       )
     case 'date':
       return (
-        <DateMention date={textObject.mention.date}>
-          {children}
-        </DateMention>
+        <DateMention date={textObject.mention.date} />
       )
     case 'link_preview':
       return (
-        <LinkPreviewMention url={textObject.mention.link_preview.url} text={textObject.plain_text}>
-          {children}
-        </LinkPreviewMention>
+        <LinkPreviewMention url={textObject.mention.link_preview.url} text={textObject.plain_text} />
       )
     case 'page':
       return (
-        <PageMention mention={textObject.mention.page}>
-          {children}
-        </PageMention>
+        <PageOrDatabaseMention mention={textObject.mention.page} />
       )
     case 'database':
       return (
-        <PageMention mention={textObject.mention.database}>
-          {children}
-        </PageMention>
+        <PageOrDatabaseMention mention={textObject.mention.database} />
       )
     case 'template_mention':
       return (
diff --git a/src/ui/components/Page/RichText/Mention/PageMention/PageMention.tsx b/src/ui/components/Page/RichText/Mention/PageMention/PageMention.tsx
deleted file mode 100644
index 36ffba64..00000000
--- a/src/ui/components/Page/RichText/Mention/PageMention/PageMention.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react'
-import PageIcon from '../../../PageIcon/PageIcon'
-import type { PageMentionProps } from './PageMention.types'
-
-const PageMention = ({ mention, children }: PageMentionProps) => {
-  return (
-    <span className="notionate-blocks-text-mention-page">
-      <span>
-        {mention.icon.type === 'emoji' ? mention.icon.emoji : <img src={mention.icon.src} alt="icon"/>}
-        <PageIcon name='link' />
-      </span>
-      <span>{mention.name}</span>
-      {children}
-    </span>
-  )
-}
-
-export default PageMention
diff --git a/src/ui/components/Page/RichText/Mention/PageMention/index.ts b/src/ui/components/Page/RichText/Mention/PageMention/index.ts
deleted file mode 100644
index 48672852..00000000
--- a/src/ui/components/Page/RichText/Mention/PageMention/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import PageMention from './PageMention'
-export { PageMention }
diff --git a/src/ui/components/Page/RichText/Mention/PageOrDatabaseMention/PageOrDatabaseMention.tsx b/src/ui/components/Page/RichText/Mention/PageOrDatabaseMention/PageOrDatabaseMention.tsx
new file mode 100644
index 00000000..74cdf691
--- /dev/null
+++ b/src/ui/components/Page/RichText/Mention/PageOrDatabaseMention/PageOrDatabaseMention.tsx
@@ -0,0 +1,51 @@
+import React from 'react'
+import PageIcon from '../../../PageIcon/PageIcon'
+import type { PageOrDatabaseMentionProps } from './PageOrDatabaseMention.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../../../../tokens.stylex'
+
+const styles = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+  },
+  icon: {
+    position: 'relative',
+    marginRight: '.5rem',
+    display: 'inline-block',
+    whiteSpace: 'nowrap',
+  },
+  img: {
+    width: '1.4rem',
+    height: '1.4rem',
+    verticalAlign: 'bottom',
+  },
+  arrow: {
+    width: '.7em',
+    height: '.7em',
+    display: 'block',
+    fill: 'rgba(55, 53, 47, 1)',
+    flexShrink: 0,
+    position: 'absolute',
+    right: '-0.1em',
+    bottom: '-0.2em',
+  },
+  text: {
+  },
+})
+
+const PageOrDatabaseMention = ({ mention }: PageOrDatabaseMentionProps) => {
+  return (
+    <span className={`rotion-mention-page ${Stylex(styles.wrapper)}`}>
+      <span className={`rotion-mention-page-icon ${Stylex(styles.icon)}`}>
+        {mention.icon.type === 'emoji' && mention.icon.emoji}
+        {mention.icon.type !== 'emoji' && <img src={mention.icon.src} className={`rotion-mention-page-icon-img ${Stylex(styles.img)}`} alt='icon' />}
+        <PageIcon name='link' className={`rotion-mention-page-arrow ${Stylex(styles.arrow)}`} />
+      </span>
+      <span className={`rotion-mention-page-title ${Stylex(styles.text)}`}>
+        {mention.name}
+      </span>
+    </span>
+  )
+}
+
+export default PageOrDatabaseMention
diff --git a/src/ui/components/Page/RichText/Mention/PageMention/PageMention.types.ts b/src/ui/components/Page/RichText/Mention/PageOrDatabaseMention/PageOrDatabaseMention.types.ts
similarity index 51%
rename from src/ui/components/Page/RichText/Mention/PageMention/PageMention.types.ts
rename to src/ui/components/Page/RichText/Mention/PageOrDatabaseMention/PageOrDatabaseMention.types.ts
index d921e7df..c1f33e65 100644
--- a/src/ui/components/Page/RichText/Mention/PageMention/PageMention.types.ts
+++ b/src/ui/components/Page/RichText/Mention/PageOrDatabaseMention/PageOrDatabaseMention.types.ts
@@ -1,7 +1,5 @@
-import type { ReactNode } from 'react'
 import { PageOrDatabaseMention } from '../../../../../../exporter'
 
-export interface PageMentionProps {
+export interface PageOrDatabaseMentionProps {
   mention: PageOrDatabaseMention
-  children?: ReactNode
 }
diff --git a/src/ui/components/Page/RichText/Mention/PageOrDatabaseMention/index.ts b/src/ui/components/Page/RichText/Mention/PageOrDatabaseMention/index.ts
new file mode 100644
index 00000000..b0e44b12
--- /dev/null
+++ b/src/ui/components/Page/RichText/Mention/PageOrDatabaseMention/index.ts
@@ -0,0 +1,2 @@
+import PageOrDatabaseMention from './PageOrDatabaseMention'
+export { PageOrDatabaseMention }
diff --git a/src/ui/components/Page/RichText/Mention/TemplateMention/TemplateMention.tsx b/src/ui/components/Page/RichText/Mention/TemplateMention/TemplateMention.tsx
index efed81c3..df1203c3 100644
--- a/src/ui/components/Page/RichText/Mention/TemplateMention/TemplateMention.tsx
+++ b/src/ui/components/Page/RichText/Mention/TemplateMention/TemplateMention.tsx
@@ -3,7 +3,7 @@ import type { TemplateMentionProps } from './TemplateMention.types'
 
 const TemplateMention = ({ text, children }: TemplateMentionProps) => {
   return (
-    <span>
+    <span className={'rotion-mention-template'}>
       {text}
       {children}
     </span>
diff --git a/src/ui/components/Page/RichText/Mention/UserMention/UserMention.tsx b/src/ui/components/Page/RichText/Mention/UserMention/UserMention.tsx
index 9988ecd2..90abad40 100644
--- a/src/ui/components/Page/RichText/Mention/UserMention/UserMention.tsx
+++ b/src/ui/components/Page/RichText/Mention/UserMention/UserMention.tsx
@@ -1,10 +1,37 @@
 import React from 'react'
 import type { UserMentionProps } from './UserMention.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../../../../tokens.stylex'
+
+const styles = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    color: tokens.secondaryText,
+  },
+  atsign: {
+    color: tokens.thirdText,
+  },
+})
+
+const UserMention = ({ payload }: UserMentionProps) => {
+  if (payload.mention.type !== 'user') {
+    return <></>
+  }
+  const { user } = payload.mention
+
+  if ('type' in user) {
+    return (
+      <span className={`rotion-mention-user ${Stylex(styles.wrapper)}`}>
+        <span className={`rotion-mention-atsign ${Stylex(styles.atsign)}`}>@</span>
+        {user.name}
+      </span>
+    )
+  }
 
-const UserMention = ({ children }: UserMentionProps) => {
   return (
-    <span className="notionate-blocks-text-usermention">
-      {children}
+    <span className={`rotion-mention-user ${Stylex(styles.wrapper)}`}>
+      <span className={`rotion-mention-atsign ${Stylex(styles.atsign)}`}>@</span>
+      {payload.plain_text.replace('@', '')}
     </span>
   )
 }
diff --git a/src/ui/components/Page/RichText/Mention/UserMention/UserMention.types.ts b/src/ui/components/Page/RichText/Mention/UserMention/UserMention.types.ts
index 92cda0d0..3efe2ceb 100644
--- a/src/ui/components/Page/RichText/Mention/UserMention/UserMention.types.ts
+++ b/src/ui/components/Page/RichText/Mention/UserMention/UserMention.types.ts
@@ -1,5 +1,5 @@
-import type { ReactNode } from 'react'
+import type { MentionRichTextItemResponseEx } from '../../../../../../exporter'
 
 export interface UserMentionProps {
-  children: ReactNode
+  payload: MentionRichTextItemResponseEx
 }
diff --git a/src/ui/components/Page/RichText/RichText.tsx b/src/ui/components/Page/RichText/RichText.tsx
index 161fd892..629a7f41 100644
--- a/src/ui/components/Page/RichText/RichText.tsx
+++ b/src/ui/components/Page/RichText/RichText.tsx
@@ -6,7 +6,7 @@ import type { RichTextProps } from './RichText.types'
 import { MentionRichTextItemResponseEx } from '../../../../exporter'
 
 const RichText = ({ textObject }: RichTextProps) => {
-  if (textObject === undefined || textObject === null) {
+  if (!textObject) {
     return <></>
   }
 
@@ -14,11 +14,7 @@ const RichText = ({ textObject }: RichTextProps) => {
 
   switch (type) {
     case 'text':
-      return (
-        <Text textObject={textObject}>
-          {plain_text}
-        </Text>
-      )
+      return <Text textObject={textObject} />
     case 'mention':
       return (
         <Mention textObject={textObject as MentionRichTextItemResponseEx}>
@@ -26,11 +22,7 @@ const RichText = ({ textObject }: RichTextProps) => {
         </Mention>
       )
     case 'equation':
-      return (
-        <Equation textObject={textObject}>
-          {plain_text}
-        </Equation>
-      )
+      return <Equation textObject={textObject} />
     default:
       return <></>
   }
diff --git a/src/ui/components/Page/RichText/Text/Text.tsx b/src/ui/components/Page/RichText/Text/Text.tsx
index 412eae7b..7eb0cf25 100644
--- a/src/ui/components/Page/RichText/Text/Text.tsx
+++ b/src/ui/components/Page/RichText/Text/Text.tsx
@@ -4,13 +4,11 @@ import Annotation from '../Annotation/Annotation'
 import type { TextProps } from './Text.types'
 
 const Text = ({ textObject }: TextProps) => {
-  const { href, plain_text } = textObject
+  const { href } = textObject
 
   return (
     <LinkIfLinked condition={href !== null} textObject={textObject}>
-      <Annotation textObject={textObject}>
-        {plain_text}
-      </Annotation>
+      <Annotation textObject={textObject} />
     </LinkIfLinked>
   )
 }
diff --git a/src/ui/components/Page/SyncedBlock/SyncedBlock.stories.tsx b/src/ui/components/Page/SyncedBlock/SyncedBlock.stories.tsx
new file mode 100644
index 00000000..79926229
--- /dev/null
+++ b/src/ui/components/Page/SyncedBlock/SyncedBlock.stories.tsx
@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import type {
+  SyncedBlockBlockObjectResponseEx,
+} from '../../../../exporter'
+import SyncedBlock from './SyncedBlock'
+
+/* PARAGRAPH BLOCK */
+const p = {
+  object: 'block',
+  id: '12345678-1234-1234-1234-1234567890ab',
+  created_time: '',
+  last_edited_time: '',
+  created_by: {
+    object: 'user',
+    id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  last_edited_by: {
+    object: 'user',
+    id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  has_children: false,
+  archived: false,
+  parent: {
+    type: 'page_id',
+    page_id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  type: 'paragraph',
+  paragraph: {
+    rich_text: [{
+      type: 'text',
+      text: {
+        content: 'Similar to the Notion UI, there are two versions of a synced_block object: the original block that was created first and doesn\'t yet sync with anything else, and the duplicate block or blocks synced to the original.',
+        link: null,
+      },
+      annotations: {
+        bold: false,
+        italic: false,
+        strikethrough: false,
+        underline: false,
+        code: false,
+        color: 'default'
+      },
+      plain_text: 'Similar to the Notion UI, there are two versions of a synced_block object: the original block that was created first and doesn\'t yet sync with anything else, and the duplicate block or blocks synced to the original.',
+      href: null,
+    }],
+  },
+}
+
+/* SYNCED BLOCK BLOCK */
+const block = {
+  object: 'block',
+  id: '12345678-1234-1234-1234-1234567890ab',
+  created_time: '',
+  last_edited_time: '',
+  created_by: {
+    object: 'user',
+    id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  last_edited_by: {
+    object: 'user',
+    id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  has_children: true,
+  archived: false,
+  parent: {
+    type: 'page_id',
+    page_id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  type: 'synced_block',
+  synced_block: {
+    synced_from: {
+      type: 'block_id',
+      block_id: '12345678-1234-1234-1234-1234567890ab',
+    },
+  },
+  children: {
+    results: [p]
+  }
+} as SyncedBlockBlockObjectResponseEx
+
+const meta = {
+  title: 'Page/SyncedBlock',
+  component: SyncedBlock,
+  args: {
+    block,
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof SyncedBlock>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
diff --git a/src/ui/components/Page/SyncedBlock/SyncedBlock.tsx b/src/ui/components/Page/SyncedBlock/SyncedBlock.tsx
index 11fa1861..57dcba4c 100644
--- a/src/ui/components/Page/SyncedBlock/SyncedBlock.tsx
+++ b/src/ui/components/Page/SyncedBlock/SyncedBlock.tsx
@@ -1,12 +1,26 @@
 import React from 'react'
+import type { BlockObjectResponse } from '../../../../exporter'
 import type { SyncedBlockProps } from './SyncedBlock.types'
+import PageHandler from '../PageHandler'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    padding: '.5rem 0',
+  },
+})
 
-// TODO: Iimplement and design
 const SyncedBlock = ({ block }: SyncedBlockProps) => {
-  const { synced_block } = block
+  if (!block.has_children || block.children === undefined) {
+    return <></>
+  }
   return (
-    <div className="notionate-blocks-syncedblock">
-      {synced_block.synced_from?.block_id}
+    <div className={`rotion-syncedblock ${Stylex(style.wrapper)}`}>
+      {block.children.results.map((b: BlockObjectResponse) => (
+        <PageHandler block={b} key={`block-${b.id}`} />
+      ))}
     </div>
   )
 }
diff --git a/src/ui/components/Page/SyncedBlock/SyncedBlock.types.ts b/src/ui/components/Page/SyncedBlock/SyncedBlock.types.ts
index 711125de..133539d4 100644
--- a/src/ui/components/Page/SyncedBlock/SyncedBlock.types.ts
+++ b/src/ui/components/Page/SyncedBlock/SyncedBlock.types.ts
@@ -1,5 +1,5 @@
-import { SyncedBlockBlockObjectResponse } from '../../../../exporter'
+import { SyncedBlockBlockObjectResponseEx } from '../../../../exporter'
 
 export interface SyncedBlockProps {
-  block: SyncedBlockBlockObjectResponse,
+  block: SyncedBlockBlockObjectResponseEx,
 }
diff --git a/src/ui/components/Page/TableBlock/TableBlock.stories.tsx b/src/ui/components/Page/TableBlock/TableBlock.stories.tsx
new file mode 100644
index 00000000..50a7487f
--- /dev/null
+++ b/src/ui/components/Page/TableBlock/TableBlock.stories.tsx
@@ -0,0 +1,160 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import type { TableBlockObjectResponseEx, RichTextItemResponse } from '../../../../exporter'
+import TableBlock from './TableBlock'
+
+/* RICH TEXT */
+const richText: RichTextItemResponse = {
+  type: 'text',
+  text: {
+    content: 'Hello',
+    link: null,
+  },
+  annotations: {
+    bold: false,
+    italic: false,
+    strikethrough: false,
+    underline: false,
+    code: false,
+    color: 'default',
+  },
+  plain_text: 'Hello',
+  href: null,
+}
+
+/* TABLE BLOCK */
+const block: TableBlockObjectResponseEx = {
+  object: 'block',
+  id: '12345678-1234-1234-1234-1234567890ab',
+  parent: {
+    type: 'page_id',
+    page_id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  created_time: '2020-02-22T22:22:22.000Z',
+  last_edited_time: '2020-02-22T22:22:22.000Z',
+  created_by: {
+    object: 'user',
+    id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  last_edited_by: {
+    object: 'user',
+    id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  has_children: false,
+  archived: false,
+  type: 'table',
+  table: {
+    table_width: 3,
+    has_column_header: true,
+    has_row_header: true,
+  },
+  children: {
+    object: 'list',
+    type: 'block',
+    block: {},
+    next_cursor: null,
+    has_more: false,
+    results: [
+      {
+        object: 'block',
+        id: '12345678-1234-1234-1234-1234567890ab',
+        parent: {
+          type: 'block_id',
+          block_id: '12345678-1234-1234-1234-1234567890ab',
+        },
+        created_time: '2020-02-22T22:22:22.000Z',
+        last_edited_time: '2020-02-22T22:22:22.000Z',
+        created_by: {
+          object: 'user',
+          id: '12345678-1234-1234-1234-1234567890ab',
+        },
+        last_edited_by: {
+          object: 'user',
+          id: '12345678-1234-1234-1234-1234567890ab',
+        },
+        has_children: false,
+        archived: false,
+        type: 'table_row',
+        table_row: {
+          cells: ['Header1', 'Header2', 'Header3'].map(v => {
+            const r = structuredClone(richText)
+            r.text.content = v
+            r.plain_text = v
+            return [r]
+          }),
+        },
+      },
+      {
+        object: 'block',
+        id: '12345678-1234-1234-1234-1234567890ab',
+        parent: {
+          type: 'block_id',
+          block_id: '12345678-1234-1234-1234-1234567890ab',
+        },
+        created_time: '2020-02-22T22:22:22.000Z',
+        last_edited_time: '2020-02-22T22:22:22.000Z',
+        created_by: {
+          object: 'user',
+          id: '12345678-1234-1234-1234-1234567890ab',
+        },
+        last_edited_by: {
+          object: 'user',
+          id: '12345678-1234-1234-1234-1234567890ab',
+        },
+        has_children: false,
+        archived: false,
+        type: 'table_row',
+        table_row: {
+          cells: ['Line1-1', 'Line1-2', 'Header1-3'].map(v => {
+            const r = structuredClone(richText)
+            r.text.content = v
+            r.plain_text = v
+            return [r]
+          }),
+        },
+      },
+      {
+        object: 'block',
+        id: '12345678-1234-1234-1234-1234567890ab',
+        parent: {
+          type: 'block_id',
+          block_id: '12345678-1234-1234-1234-1234567890ab',
+        },
+        created_time: '2020-02-22T22:22:22.000Z',
+        last_edited_time: '2020-02-22T22:22:22.000Z',
+        created_by: {
+          object: 'user',
+          id: '12345678-1234-1234-1234-1234567890ab',
+        },
+        last_edited_by: {
+          object: 'user',
+          id: '12345678-1234-1234-1234-1234567890ab',
+        },
+        has_children: false,
+        archived: false,
+        type: 'table_row',
+        table_row: {
+          cells: ['Line2-1', 'Line2-2', 'Header2-3'].map(v => {
+            const r = structuredClone(richText)
+            r.text.content = v
+            r.plain_text = v
+            return [r]
+          }),
+        },
+      },
+    ],
+  },
+}
+
+const meta = {
+  title: 'Page/TableBlock',
+  component: TableBlock,
+  args: {
+    block,
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof TableBlock>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
diff --git a/src/ui/components/Page/TableBlock/TableBlock.tsx b/src/ui/components/Page/TableBlock/TableBlock.tsx
index 60cb2d74..1f615f3f 100644
--- a/src/ui/components/Page/TableBlock/TableBlock.tsx
+++ b/src/ui/components/Page/TableBlock/TableBlock.tsx
@@ -2,11 +2,48 @@ import React from 'react'
 import RichText from '../RichText/RichText'
 import type { TableRowBlockObjectResponse } from '../../../../exporter'
 import type { ThTdProps, TrProps, TableBlockProps } from './TableBlock.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    paddingTop: '.6rem',
+  },
+  table: {
+    borderCollapse: 'collapse',
+    borderSpacing: 0,
+    fontSize: '.9rem',
+    width: '100%',
+  },
+  td: {
+    border: '1px solid rgb(233, 233, 231)',
+    margin: 0,
+    padding: '.3rem',
+  },
+  tdInner: {
+    padding: '.2rem .4rem',
+  },
+  tdHeader: {
+    border: '1px solid rgb(233, 233, 231)',
+    backgroundColor: 'rgb(247, 246, 243)',
+    margin: 0,
+    padding: '.3rem',
+    fontWeight: 500,
+    textAlign: 'left',
+  },
+  tdHeaderInner: {
+    padding: '.2rem .4rem',
+  },
+  tr: {
+    margin: 0,
+  },
+})
 
 const Td = ({ cell, key }: ThTdProps) => {
   return (
-    <td className="notionate-blocks-table-td" key={key}>
-      <div className="notionate-blocks-table-td-inner">
+    <td className={`rotion-table-td ${Stylex(style.td)}`} key={key}>
+      <div className={`rotion-table-td-inner ${Stylex(style.tdInner)}`}>
         <RichText textObject={cell} />
       </div>
     </td>
@@ -15,8 +52,8 @@ const Td = ({ cell, key }: ThTdProps) => {
 
 const TdH = ({ cell, key }: ThTdProps) => {
   return (
-    <td className="notionate-blocks-table-td-header" key={key}>
-      <div className="notionate-blocks-table-td-header-inner">
+    <td className={`rotiona-table-td-header ${Stylex(style.tdHeader)}`} key={key}>
+      <div className={`rotion-table-td-header-inner ${Stylex(style.tdHeaderInner)}`}>
         <RichText textObject={cell} />
       </div>
     </td>
@@ -25,7 +62,7 @@ const TdH = ({ cell, key }: ThTdProps) => {
 
 const Tr = ({ children, key }: TrProps) => {
   return (
-    <tr className="notionate-blocks-table-tr" key={key}>
+    <tr className={`rotion-table-tr ${Stylex(style.tr)}`} key={key}>
       {children}
     </tr>
   )
@@ -67,8 +104,8 @@ const TableBlock: React.FC<TableBlockProps> = ({ block }) => {
   })
 
   return (
-    <div className="notionate-blocks-table">
-      <table className="notionate-blocks-table-table">
+    <div className={`rotion-table ${Stylex(style.wrapper)}`}>
+      <table className={`rotion-table-table ${Stylex(style.table)}`}>
         <tbody>
           {rows}
         </tbody>
diff --git a/src/ui/components/Page/TableOfContentsBlock/TableOfContentsBlock.tsx b/src/ui/components/Page/TableOfContentsBlock/TableOfContentsBlock.tsx
index 783c9ac4..83737f87 100644
--- a/src/ui/components/Page/TableOfContentsBlock/TableOfContentsBlock.tsx
+++ b/src/ui/components/Page/TableOfContentsBlock/TableOfContentsBlock.tsx
@@ -5,7 +5,7 @@ import type { TableOfContentsBlockProps } from './TableOfContentsBlock.types'
 const TableOfContentsBlock = ({ block }: TableOfContentsBlockProps) => {
   const { table_of_contents } = block
   return (
-    <div className="notionate-blocks-tableofcontents">
+    <div className={'rotion-tableofcontents'}>
      {table_of_contents.color}
     </div>
   )
diff --git a/src/ui/components/Page/TemplateBlock/TemplateBlock.tsx b/src/ui/components/Page/TemplateBlock/TemplateBlock.tsx
deleted file mode 100644
index c43d62f4..00000000
--- a/src/ui/components/Page/TemplateBlock/TemplateBlock.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react'
-import type { RichTextItemResponse } from '../../../../exporter'
-import type { TemplateBlockProps } from './TemplateBlock.types'
-import RichText from '../RichText/RichText'
-
-// TODO: Iimplement and design
-const TemplateBlock = ({ block }: TemplateBlockProps) => {
-  const { template } = block
-  return (
-    <div className="notionate-blocks-template">
-      {template.rich_text.map((v: RichTextItemResponse, i) => (
-        <RichText textObject={v} key={`richtext-${i}`} />
-      ))}
-    </div>
-  )
-}
-
-export default TemplateBlock
diff --git a/src/ui/components/Page/TemplateBlock/TemplateBlock.types.ts b/src/ui/components/Page/TemplateBlock/TemplateBlock.types.ts
deleted file mode 100644
index cac9a723..00000000
--- a/src/ui/components/Page/TemplateBlock/TemplateBlock.types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import type { TemplateBlockObjectResponse } from '../../../../exporter'
-
-export interface TemplateBlockProps {
-  block: TemplateBlockObjectResponse,
-}
diff --git a/src/ui/components/Page/TemplateBlock/index.ts b/src/ui/components/Page/TemplateBlock/index.ts
deleted file mode 100644
index de031985..00000000
--- a/src/ui/components/Page/TemplateBlock/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-import TemplateBlock from './TemplateBlock'
-export { TemplateBlock }
diff --git a/src/ui/components/Page/TextBlock/TextBlock.stories.tsx b/src/ui/components/Page/TextBlock/TextBlock.stories.tsx
new file mode 100644
index 00000000..2fc2c555
--- /dev/null
+++ b/src/ui/components/Page/TextBlock/TextBlock.stories.tsx
@@ -0,0 +1,173 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import type {
+  DividerBlockObjectResponse,
+  Heading1BlockObjectResponse,
+  Heading2BlockObjectResponse,
+  Heading3BlockObjectResponse,
+  ParagraphBlockObjectResponseEx,
+  QuoteBlockObjectResponse,
+  RichTextItemResponse,
+} from '../../../../exporter'
+import TextBlock from './TextBlock'
+
+const richText: RichTextItemResponse = {
+  type: 'text',
+  text: {
+    content: '',
+    link: null,
+  },
+  annotations: {
+    bold: false,
+    italic: false,
+    strikethrough: false,
+    underline: false,
+    code: false,
+    color: 'default',
+  },
+  plain_text: '',
+  href: null,
+}
+
+const block = {
+  object: 'block',
+  id: '12345678-1234-1234-1234-1234567890ab',
+  parent: {
+    type: 'page_id',
+    page_id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  created_time: '2020-02-22T22:22:22.000Z',
+  last_edited_time: '2020-02-22T22:22:22.000Z',
+  created_by: {
+    object: 'user',
+    id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  last_edited_by: {
+    object: 'user',
+    id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  has_children: false,
+  archived: false,
+  type: '',
+}
+
+const heading1 = structuredClone(block) as Heading1BlockObjectResponse
+const h1r = structuredClone(richText)
+h1r.text.content = 'Heading 1'
+h1r.plain_text = h1r.text.content
+heading1.type = 'heading_1'
+heading1.heading_1 = {
+  rich_text: [h1r],
+  color: 'default',
+  is_toggleable: false,
+}
+
+const meta = {
+  title: 'Page/TextBlock',
+  component: TextBlock,
+  args: {
+    block: heading1,
+    tag: 'h1',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof TextBlock>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/* HEADING 1 */
+export const Heading1: Story = {
+  args: {
+    block: heading1,
+    tag: 'h1',
+  }
+}
+
+/* HEADING 2 */
+const heading2 = structuredClone(block) as Heading2BlockObjectResponse
+const h2r = structuredClone(richText)
+h2r.text.content = 'Heading 2'
+h2r.plain_text = h2r.text.content
+heading2.type = 'heading_2'
+heading2.heading_2 = {
+  rich_text: [h2r],
+  color: 'default',
+  is_toggleable: false,
+}
+export const Heading2: Story = {
+  args: {
+    block: heading2,
+    tag: 'h2',
+  }
+}
+
+/* HEADING 3 */
+const heading3 = structuredClone(block) as Heading3BlockObjectResponse
+const h3r = structuredClone(richText)
+h3r.text.content = 'Heading 3'
+h3r.plain_text = h3r.text.content
+heading3.type = 'heading_3'
+heading3.heading_3 = {
+  rich_text: [h3r],
+  color: 'default',
+  is_toggleable: false,
+}
+export const Heading3: Story = {
+  args: {
+    block: heading3,
+    tag: 'h3',
+  }
+}
+
+/* PARAGRAPH */
+const p = structuredClone(block) as ParagraphBlockObjectResponseEx
+p.type = 'paragraph'
+const r1 = structuredClone(richText)
+r1.text.content = `A peep at some distant orb has power to raise and purify our thoughts like a strain of sacred music, or a noble picture, or a passage from the grander poets. It always does one good. A peep at some distant orb has power to raise and purify our thoughts like a strain of sacred music, or a noble picture, or a passage from the grander poets. It always does one good.
+
+`
+r1.plain_text = r1.text.content
+p.paragraph = {
+  rich_text: [r1],
+  color: 'default',
+}
+export const Paragraph: Story = {
+  args: {
+    block: p,
+    tag: 'p',
+  }
+}
+
+/* BLOCK QUOTE */
+const bq = structuredClone(block) as QuoteBlockObjectResponse
+bq.type = 'quote'
+const r2 = structuredClone(richText)
+r2.text.content = `This principle has been a key, and a huge success in my years of software engineering. A common problem among software engineers and developers today is that they tend to over complicate problems.
+
+`
+r2.plain_text = r2.text.content
+const r4 = structuredClone(richText)
+r4.text.content = 'https://people.apache.org/~fhanik/kiss.html'
+r4.plain_text = r4.text.content
+r4.href = r4.text.content
+
+bq.quote = {
+  rich_text: [r2, r4],
+  color: 'default',
+}
+export const BlockQuote: Story = {
+  args: {
+    block: bq,
+    tag: 'blockquote',
+  }
+}
+
+/* DIVIDER */
+const dv = structuredClone(block) as DividerBlockObjectResponse
+dv.type = 'divider'
+dv.divider = {}
+export const Divider: Story = {
+  args: {
+    block: dv,
+    tag: 'hr',
+  }
+}
diff --git a/src/ui/components/Page/TextBlock/TextBlock.tsx b/src/ui/components/Page/TextBlock/TextBlock.tsx
index 5db09b1f..ce824c35 100644
--- a/src/ui/components/Page/TextBlock/TextBlock.tsx
+++ b/src/ui/components/Page/TextBlock/TextBlock.tsx
@@ -1,24 +1,74 @@
 import React from 'react'
 import RichText from '../RichText/RichText'
+import type { RichTextItemResponse } from '../../../../exporter'
 import type { TextBlockProps } from './TextBlock.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+  },
+  hr: {
+    margin: '1rem 0',
+    borderTopColor: '#ddd',
+    borderTopStyle: 'solid',
+    borderTopWidth: '1px',
+    width: '100%',
+    height: '1px',
+  },
+  heading_1: {
+    lineHeight: 1.3,
+    margin: 0,
+    padding: '3rem 0 3px',
+  },
+  heading_2: {
+    lineHeight: 1.3,
+    margin: 0,
+    padding: '2rem 0 3px',
+  },
+  heading_3: {
+    lineHeight: 1.3,
+    margin: 0,
+    padding: '1.6rem 0 3px',
+  },
+  paragraph: {
+    padding: '.6rem 0',
+    margin: 0,
+    lineHeight: 1.5,
+  },
+  quote: {
+    borderLeft: '3px solid currentcolor',
+    paddingLeft: '1rem',
+    marginLeft: 0,
+    marginRight: 0,
+    lineHeight: 1.7,
+  },
+})
 
 const TextBlock = ({ tag, block }: TextBlockProps) => {
-  const CustomTag = tag
-  if (block === undefined) {
+  if (block.type === 'divider') {
     return (
-      <div className="notionate-blocks-text-hr">
+      <div className={`rotion-text-hr ${Stylex(style.hr)}`}>
       </div>
     )
   }
 
+  const CustomTag = tag
+  const css = [Stylex(style.wrapper)]
+  if (block.type in style) {
+    const styleKey = block.type as keyof typeof style
+    css.push(`${Stylex(style[styleKey])}`)
+  }
+  // @ts-ignore
+  const richText: RichTextItemResponse[] = block[block.type].rich_text
+
   return (
-    <>
-      <CustomTag className={`notionate-blocks-text-${tag}`}>
-        {block.map((v, i) => (
-          <RichText textObject={v} key={`${i}`} />
-        ))}
-      </CustomTag>
-    </>
+    <CustomTag className={`rotion-text-${tag} ${css.join(' ')}`}>
+      {richText.map((v, i) => (
+        <RichText textObject={v} key={`richtext-${i}`} />
+      ))}
+    </CustomTag>
   )
 }
 
diff --git a/src/ui/components/Page/TextBlock/TextBlock.types.ts b/src/ui/components/Page/TextBlock/TextBlock.types.ts
index 36448a37..2c01259d 100644
--- a/src/ui/components/Page/TextBlock/TextBlock.types.ts
+++ b/src/ui/components/Page/TextBlock/TextBlock.types.ts
@@ -1,6 +1,18 @@
-import type { RichTextItemResponse } from '../../../../exporter'
+import type {
+  ParagraphBlockObjectResponseEx,
+  Heading1BlockObjectResponse,
+  Heading2BlockObjectResponse,
+  Heading3BlockObjectResponse,
+  QuoteBlockObjectResponse,
+  DividerBlockObjectResponse,
+} from '../../../../exporter'
 
 export interface TextBlockProps {
   tag: keyof JSX.IntrinsicElements
-  block: RichTextItemResponse[] | undefined
+  block: ParagraphBlockObjectResponseEx
+    | Heading1BlockObjectResponse
+    | Heading2BlockObjectResponse
+    | Heading3BlockObjectResponse
+    | QuoteBlockObjectResponse
+    | DividerBlockObjectResponse
 }
diff --git a/src/ui/components/Page/ToDoBlock/ToDoBlock.stories.tsx b/src/ui/components/Page/ToDoBlock/ToDoBlock.stories.tsx
new file mode 100644
index 00000000..c87dfcdd
--- /dev/null
+++ b/src/ui/components/Page/ToDoBlock/ToDoBlock.stories.tsx
@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import type {
+  ToDoBlockObjectResponse,
+} from '../../../../exporter'
+import ToDoBlock from './ToDoBlock'
+
+/* TODO BLOCK */
+const block = {
+  object: 'block',
+  id: '12345678-1234-1234-1234-1234567890ab',
+  created_time: '',
+  last_edited_time: '',
+  created_by: {
+    object: 'user',
+    id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  last_edited_by: {
+    object: 'user',
+    id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  has_children: true,
+  archived: false,
+  parent: {
+    type: 'page_id',
+    page_id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  type: 'to_do',
+  to_do: {
+    rich_text: [{
+      type: 'text',
+      text: {
+        content: 'Check email for work',
+        link: null,
+      },
+      annotations: {
+        bold: false,
+        italic: false,
+        strikethrough: false,
+        underline: false,
+        code: false,
+        color: 'default'
+      },
+      plain_text: 'Check email for work',
+      href: null,
+    }],
+    color: 'default',
+    checked: true,
+  },
+} as ToDoBlockObjectResponse
+
+const meta = {
+  title: 'Page/ToDoBlock',
+  component: ToDoBlock,
+  args: {
+    block,
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ToDoBlock>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Checked: Story = {}
+
+const unchecked = structuredClone(block)
+unchecked.to_do.checked = false
+export const UnChecked: Story = {
+  args: {
+    block: unchecked
+  }
+}
diff --git a/src/ui/components/Page/ToDoBlock/ToDoBlock.tsx b/src/ui/components/Page/ToDoBlock/ToDoBlock.tsx
index f2e16488..957d666c 100644
--- a/src/ui/components/Page/ToDoBlock/ToDoBlock.tsx
+++ b/src/ui/components/Page/ToDoBlock/ToDoBlock.tsx
@@ -1,12 +1,101 @@
 import React from 'react'
-import TextBlock from '../TextBlock/TextBlock'
+import { RichText } from '../RichText'
 import type { ToDoBlockProps } from './ToDoBlock.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../../tokens.stylex'
 
-const checkedBox = () => {
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    display: 'flex',
+    alignItems: 'flex-start',
+    width: '100%',
+    padding: '4px 0 1px 2px',
+    lineHeight: 1.7,
+  },
+  checkbox: {
+    userSelect: 'none',
+    marginRight: '4px',
+    width: '22px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexGrow: 0,
+    flexShrink: 0,
+    minHeight: 'calc(1.5em + 3px + 3px)',
+  },
+  text: {
+    flex: '1 1 0',
+    minWidth: '1px',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  textInner: {
+    maxWidth: '100%',
+    whiteSpace: 'pre-wrap',
+    wordBreak: 'break-word',
+    padding: '1px 2px',
+    textAlign: 'left',
+    flexGrow: 1,
+  },
+  textInnerChecked: {
+    textDecorationLine: 'line-through',
+    textDecorationColor: '#999',
+    color: '#888',
+  },
+  checked: {
+    width: '16px',
+    height: '16px',
+    display: 'flex',
+    alignItems: 'stretch',
+    justifyContent: 'stretch',
+    flexShrink: 0,
+    flexGrow: 0,
+    background: 'rgb(46, 170, 220)',
+    transition: 'background 200ms ease-out 0s',
+  },
+  checkedInner: {
+    userSelect: 'none',
+    transition: 'background 20ms ease-in 0s',
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+  },
+  checkedCheckbox: {
+    width: '12px',
+    height: '12px',
+    display: 'block',
+    fill: 'white',
+    flexShrink: 0,
+    backfaceVisibility: 'hidden',
+  },
+  unchecked: {
+    width: '16px',
+    height: '16px',
+    display: 'flex',
+    userSelect: 'none',
+    transition: 'background 20ms ease-in 0s',
+    position: 'relative',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  uncheckedCheckbox: {
+    width: '100%',
+    height: '100%',
+    display: 'block',
+    fill: 'inherit',
+    flexShrink: 0,
+    backfaceVisibility: 'hidden',
+  },
+})
+
+const CheckedBox = () => {
   return (
-    <div className="notionate-blocks-checked">
-      <div className="notionate-blocks-checked-inner">
-        <svg className="notionate-blocks-checked-checkbox" viewBox="0 0 14 14">
+    <div className={`rotion-checkbox-checked ${Stylex(style.checked)}`}>
+      <div className={`rotion-checkbox-checked-inner ${Stylex(style.checkedInner)}`}>
+        <svg className={`rotion-checkbox-checked-checkbox ${Stylex(style.checkedCheckbox)}`} viewBox="0 0 14 14">
           <polygon points="5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039"></polygon>
         </svg>
       </div>
@@ -14,10 +103,10 @@ const checkedBox = () => {
   )
 }
 
-const uncheckedBox = () => {
+const UncheckedBox = () => {
   return (
-    <div className="notionate-blocks-unchecked">
-      <svg className="notionate-blocks-unchecked-checkbox" viewBox="0 0 16 16">
+    <div className={`rotion-checkbox-unchecked ${Stylex(style.unchecked)}`}>
+      <svg className={`rotion-checkbox-unchecked-checkbox ${Stylex(style.uncheckedCheckbox)}`} viewBox="0 0 16 16">
         <path d="M1.5,1.5 L1.5,14.5 L14.5,14.5 L14.5,1.5 L1.5,1.5 Z M0,0 L16,0 L16,16 L0,16 L0,0 Z"></path>
       </svg>
     </div>
@@ -30,16 +119,18 @@ const ToDoBlock = ({ block }: ToDoBlockProps) => {
   }
 
   const todoChecked = block.to_do.checked
-  const TodoCheckbox = todoChecked ? checkedBox : uncheckedBox
+  const Checkbox = todoChecked ? CheckedBox : UncheckedBox
 
   return (
-    <div className="notionate-blocks-todo">
-      <div className="notionate-blocks-todo-check">
-        <TodoCheckbox />
+    <div className={`rotion-todo ${Stylex(style.wrapper)}`}>
+      <div className={`rotion-todo-checkbox ${Stylex(style.checkbox)}`}>
+        <Checkbox />
       </div>
-      <div className="notionate-blocks-todo-text">
-        <div className={`notionate-blocks-todo-text-inner${todoChecked ? ' notionate-blocks-todo-text-inner-checked' : ''}`}>
-          <TextBlock tag="span" block={block.to_do.rich_text} />
+      <div className={`rotion-todo-text ${Stylex(style.text)}`}>
+        <div className={`rotion-todo-text-inner ${Stylex(style.textInner)} ${todoChecked ? `rotion-todo-text-inner-checked ${Stylex(style.textInnerChecked)}` : ''}`}>
+          {block.to_do.rich_text.map((v, i) => (
+            <RichText textObject={v} key={`richtext-${i}`} />
+          ))}
         </div>
       </div>
     </div>
diff --git a/src/ui/components/Page/ToggleBlock/ToggleBlock.stories.tsx b/src/ui/components/Page/ToggleBlock/ToggleBlock.stories.tsx
new file mode 100644
index 00000000..b0a83aad
--- /dev/null
+++ b/src/ui/components/Page/ToggleBlock/ToggleBlock.stories.tsx
@@ -0,0 +1,117 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import type {
+  ToggleBlockObjectResponseEx,
+} from '../../../../exporter'
+import ToggleBlock from './ToggleBlock'
+
+/* PARAGRAPH BLOCK */
+const p = {
+  object: 'block',
+  id: '12345678-1234-1234-1234-1234567890ab',
+  parent: {
+    type: 'block_id',
+    block_id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  created_time: '',
+  last_edited_time: '',
+  created_by: {
+    object: 'user',
+    id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  last_edited_by: {
+    object: 'user',
+    id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  has_children: false,
+  archived: false,
+  type: 'paragraph',
+  paragraph: {
+    rich_text: [
+      {
+        type: 'text',
+        text: {
+          content: 'Hello',
+          link: null,
+        },
+        annotations: {
+          bold: false,
+          italic: false,
+          strikethrough: false,
+          underline: false,
+          code: false,
+          color: 'default',
+        },
+        plain_text: 'Hello',
+        href: null,
+      },
+    ],
+    color: 'default',
+  },
+}
+
+/* TOGGLE BLOCK */
+const block = {
+  object: 'block',
+  id: '12345678-1234-1234-1234-1234567890ab',
+  created_time: '',
+  last_edited_time: '',
+  created_by: {
+    object: 'user',
+    id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  last_edited_by: {
+    object: 'user',
+    id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  has_children: true,
+  archived: false,
+  parent: {
+    type: 'page_id',
+    page_id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  type: 'toggle',
+  toggle: {
+    rich_text: [{
+      type: 'text',
+      text: {
+        content: 'Write test code',
+        link: null,
+      },
+      annotations: {
+        bold: false,
+        italic: false,
+        strikethrough: false,
+        underline: false,
+        code: false,
+        color: 'default'
+      },
+      plain_text: 'Write test code',
+      href: null,
+    }],
+    color: 'default',
+  },
+  children: {
+    type: 'block',
+    block: {},
+    object: 'list',
+    next_cursor: null,
+    has_more: false,
+    results: [p],
+    children: undefined,
+    last_edited_time: undefined,
+  },
+} as ToggleBlockObjectResponseEx
+
+const meta = {
+  title: 'Page/ToggleBlock',
+  component: ToggleBlock,
+  args: {
+    block,
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ToggleBlock>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
diff --git a/src/ui/components/Page/ToggleBlock/ToggleBlock.tsx b/src/ui/components/Page/ToggleBlock/ToggleBlock.tsx
index 34da4a67..cee255f0 100644
--- a/src/ui/components/Page/ToggleBlock/ToggleBlock.tsx
+++ b/src/ui/components/Page/ToggleBlock/ToggleBlock.tsx
@@ -1,18 +1,61 @@
 import React, { useState } from 'react'
-import TextBlock from '../TextBlock/TextBlock'
+import { RichText } from '../RichText'
 import type { ParagraphBlockObjectResponse } from '../../../../exporter'
 import type { ToggleBlockProps } from './ToggleBlock.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    display: 'flex',
+    alignItems: 'flex-start',
+    width: '100%',
+    marginTop: '.6rem',
+    lineHeight: 1.8,
+  },
+  triangle: {
+    transition: 'background 20ms ease-in 0s',
+    cursor: 'pointer',
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '24px',
+    height: '24px',
+    borderRadius: '3px',
+    padding: '4px',
+    marginTop: 0,
+    marginRight: '4px',
+    backgroundColor: {
+      default: 'inherit',
+      ':hover': '#eee',
+    },
+  },
+  text: {
+  },
+  icon: {
+    width: '0.6875em',
+    height: '0.6875em',
+    display: 'block',
+    fill: 'inherit',
+    flexShrink: 0,
+    backfaceVisibility: 'hidden',
+    transition: 'transform 200ms ease-out 0s',
+    opacity: 1,
+  },
+})
 
 interface TriangleProps {
   open: boolean
 }
 
 const Triangle = ({ open }: TriangleProps) => {
-  const style = {
+  const css = {
     transform: `rotateZ(${open ? 180 : 90}deg)`,
   }
   return (
-    <svg className="notionate-blocks-toggle-triangle-svg" style={style} viewBox="0 0 100 100">
+    <svg className={`rotion-toggle-triangle-svg ${Stylex(style.icon)}`} style={css} viewBox="0 0 100 100">
       <polygon points="5.9,88.2 50,11.8 94.1,88.2 "></polygon>
     </svg>
   )
@@ -24,16 +67,26 @@ const ToggleBlock = ({ block }: ToggleBlockProps) => {
 
   const text = block.children.results.map((vv, i) => {
     const v = vv as ParagraphBlockObjectResponse
-    return <TextBlock tag="div" block={v.paragraph.rich_text} key={`${i}`} />
+    return (
+      <>
+        {v.paragraph.rich_text.map((v, i) => (
+          <RichText textObject={v} key={`richtext-${i}`} />
+        ))}
+      </>
+    )
   })
 
   return (
-    <div className="notionate-blocks-toggle">
-      <div className="notionate-blocks-toggle-triangle" onClick={onClick}>
+    <div className={`rotion-toggle ${Stylex(style.wrapper)}`}>
+      <div className={`rotion-toggle-triangle ${Stylex(style.triangle)}`} onClick={onClick}>
         <Triangle open={open} />
       </div>
-      <div className="notionate-blocks-toggle-box">
-        <TextBlock tag="div" block={block.toggle.rich_text} />
+      <div className={`rotion-toggle-text ${Stylex(style.text)}`}>
+        <div>
+          {block.toggle.rich_text.map((v, i) => (
+            <RichText textObject={v} key={`richtext-${i}`} />
+          ))}
+        </div>
         {open ? text : null }
       </div>
     </div>
diff --git a/src/ui/components/Page/VideoBlock/VideoBlock.stories.tsx b/src/ui/components/Page/VideoBlock/VideoBlock.stories.tsx
new file mode 100644
index 00000000..6207b436
--- /dev/null
+++ b/src/ui/components/Page/VideoBlock/VideoBlock.stories.tsx
@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import type { VideoBlockObjectResponseEx, RichTextItemResponse } from '../../../../exporter'
+import VideoBlock from './VideoBlock'
+
+/* RICH TEXT */
+const richText: RichTextItemResponse = {
+  type: 'text',
+  text: {
+    content: 'This video is cool.',
+    link: null,
+  },
+  annotations: {
+    bold: false,
+    italic: false,
+    strikethrough: false,
+    underline: false,
+    code: false,
+    color: 'default',
+  },
+  plain_text: 'This video is cool.',
+  href: null,
+}
+
+/* VIDEO BLOCK */
+const block: VideoBlockObjectResponseEx = {
+  object: 'block',
+  id: '12345678-1234-1234-1234-1234567890ab',
+  parent: {
+    type: 'page_id',
+    page_id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  created_time: '2020-02-22T22:22:22.000Z',
+  last_edited_time: '2020-02-22T22:22:22.000Z',
+  created_by: {
+    object: 'user',
+    id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  last_edited_by: {
+    object: 'user',
+    id: '12345678-1234-1234-1234-1234567890ab',
+  },
+  has_children: false,
+  archived: false,
+  type: 'video',
+  video: {
+    caption: [richText],
+    type: 'external',
+    external: {
+      url: 'https://youtu.be/2ncpb3auHOw?si=egykqR6viQTM9fNR',
+    },
+    html: '<iframe width="560" height="315" src="https://www.youtube.com/embed/2ncpb3auHOw?si=egykqR6viQTM9fNR" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>',
+  },
+}
+
+const meta = {
+  title: 'Page/VideoBlock',
+  component: VideoBlock,
+  args: {
+    block,
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof VideoBlock>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Youtube: Story = {}
diff --git a/src/ui/components/Page/VideoBlock/VideoBlock.tsx b/src/ui/components/Page/VideoBlock/VideoBlock.tsx
index fca5e7d1..69464457 100644
--- a/src/ui/components/Page/VideoBlock/VideoBlock.tsx
+++ b/src/ui/components/Page/VideoBlock/VideoBlock.tsx
@@ -1,6 +1,43 @@
 import React from 'react'
-import TextBlock from '../TextBlock/TextBlock'
+import { RichText } from '../RichText'
 import type { VideoBlockProps } from './VideoBlock.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    width: '100%',
+  },
+  inner: {
+    margin: 'auto',
+  },
+  html: {
+    width: '100%',
+    margin: 'auto',
+    paddingBottom: '56.25%', /* 16:9 */
+    position: 'relative',
+    height: 0,
+  },
+  caption: {
+    margin: '.3rem .3rem 0',
+    textAlign: 'left',
+    color: '#888',
+    fontSize: '.95rem',
+  },
+  youtube: {
+    margin: 'auto',
+  },
+})
+const css = `
+.rotion-video-youtube iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+`
 
 const VideoBlock = ({ block }: VideoBlockProps) => {
   if (block.video?.type !== 'external' || (block.video?.type === 'external' && block.video?.html === undefined)) {
@@ -8,14 +45,17 @@ const VideoBlock = ({ block }: VideoBlockProps) => {
     return <></>
   }
 
-  const providerClass = (block.video.html.includes('youtube')) ? ' notionate-blocks-video-youtube' : ''
+  const providerClass = (block.video.html.includes('youtube')) ? `rotion-video-youtube ${Stylex(style.youtube)}` : ''
 
   return (
-    <div className="notionate-blocks-video">
-      <div className="notionate-blocks-video-inner">
-        <div className={`notionate-blocks-video-html${providerClass}`} dangerouslySetInnerHTML={{ __html: block.video.html }} />
-        <div className="notionate-blocks-video-caption">
-          <TextBlock tag="span" block={block.video.caption} />
+    <div className={`rotion-video ${Stylex(style.wrapper)}`}>
+      <div className={`rotion-video-inner ${Stylex(style.inner)}`}>
+        {block.video.html.includes('youtube') && <style type="text/css"> {css} </style>}
+        <div className={`rotion-video-html ${providerClass} ${Stylex(style.html)}`} dangerouslySetInnerHTML={{ __html: block.video.html }} />
+        <div className={`rotion-video-caption ${Stylex(style.caption)}`}>
+          {block.video.caption.map((v, i) => (
+            <RichText textObject={v} key={`richtext-${i}`} />
+          ))}
         </div>
       </div>
     </div>
diff --git a/src/ui/components/Table/Column.tsx b/src/ui/components/Table/Column.tsx
new file mode 100644
index 00000000..c11d8a28
--- /dev/null
+++ b/src/ui/components/Table/Column.tsx
@@ -0,0 +1,44 @@
+import React from 'react'
+import type { PageObjectResponseEx } from '../../../exporter'
+import TableHandler from './TableHandler'
+import { getLinkPathAndLinkKey } from '../lib'
+import type { ColumnProps } from './Column.types'
+
+const Column = ({ name, page, href, link, query }: ColumnProps) => {
+  const getSlug = (name: string, page: PageObjectResponseEx): string => {
+    if (!('properties' in page)) {
+      return 'not-found-properties'
+    }
+    if (name === 'id') {
+      return page.id
+    }
+    if (!(name in page.properties)) {
+      return 'not-found-key-in-page-properties'
+    }
+    const p = page.properties[name]
+    if (!('rich_text' in p)) {
+      return 'not-found-richtext-in-key'
+    }
+    // @ts-ignore
+    return p.rich_text.map(v => v.text.content).join(',')
+  }
+
+  const [path, slugKey] = href ? getLinkPathAndLinkKey(href) : [undefined, undefined]
+
+  if (!('property_items' in page) || !('properties' in page)) {
+    return <></>
+  }
+
+  let propertyId = ''
+  for (const [k, v] of Object.entries(page.properties)) {
+    if (k === name) {
+      propertyId = v.id
+    }
+  }
+  const items = page.property_items.find(v => ((v.object === 'property_item' && v.id === propertyId) || (v.object === 'list' && v.property_item.id === propertyId)))
+  const slug = slugKey ? getSlug(slugKey, page) : undefined
+
+  return <TableHandler items={items} path={path} slug={slug} link={link} query={query} />
+}
+
+export default Column
diff --git a/src/ui/components/Table/Column.types.ts b/src/ui/components/Table/Column.types.ts
new file mode 100644
index 00000000..04798c65
--- /dev/null
+++ b/src/ui/components/Table/Column.types.ts
@@ -0,0 +1,11 @@
+import type { ParsedUrlQueryInput } from 'node:querystring'
+import type { PageObjectResponseEx } from '../../../exporter'
+import type { Link } from '../types'
+
+export interface ColumnProps {
+  name: string
+  page: PageObjectResponseEx
+  href?: string
+  link?: Link
+  query?: ParsedUrlQueryInput
+}
diff --git a/src/ui/components/Table/Table.stories.tsx b/src/ui/components/Table/Table.stories.tsx
new file mode 100644
index 00000000..7bcfa7c6
--- /dev/null
+++ b/src/ui/components/Table/Table.stories.tsx
@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import type { FetchDatabaseRes } from '../../../exporter'
+import Table from './Table'
+import response from '../../fixtures/fetch_database_response.json'
+
+const meta = {
+  title: 'Database/Table',
+  component: Table,
+  args: {
+    keys: ['Name', 'Note', 'Published', 'Tags', 'Url', 'Born', 'Date'],
+    db: response as FetchDatabaseRes,
+    href: '/blog/[id]',
+    link: undefined,
+    query: undefined,
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Table>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
diff --git a/src/ui/components/Table/Table.tsx b/src/ui/components/Table/Table.tsx
index 926efc1b..baf0fc42 100644
--- a/src/ui/components/Table/Table.tsx
+++ b/src/ui/components/Table/Table.tsx
@@ -1,66 +1,92 @@
 import React from 'react'
-import type {
-  GetPageResponse,
-  PageObjectResponseEx,
-} from '../../../exporter'
-import PropertyNameAndIcon from './TablePropertyNameAndIcon'
-import TableHandler from './TableHandler'
-import { getLinkPathAndLinkKey } from '../lib'
+import type { PageObjectResponseEx } from '../../../exporter'
+import TableIcon from './TableIcon/TableIcon'
+import Column from './Column'
 import type { TableProps } from './Table.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../tokens.stylex'
 
-export const Table = ({ keys, db, href, link, query }: TableProps) => {
-  const getSlug = (key: string, page: GetPageResponse): string => {
-    if (!('properties' in page)) {
-      return 'not-found-properties'
-    }
-    if (key === 'id') {
-      return page.id
-    }
-    if (!(key in page.properties)) {
-      return 'not-found-key-in-page-properties'
-    }
-    const p = page.properties[key]
-    if (!('rich_text' in p)) {
-      return 'not-found-richtext-in-key'
-    }
-    // @ts-ignore
-    return p.rich_text.map(v => v.text.content).join(',')
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    margin: 0,
+    padding: '0 0 10px',
+    width: '100%',
+    overflowX: 'scroll',
+  },
+  inner: {
+    position: 'relative',
+    float: 'left',
+    minWidth: '100%',
+  },
+  header: {
+  },
+  row: {
+    display: 'inline-flex',
+    background: 'inherit',
+    height: '33px',
+    color: 'rgba(55, 53, 47, 0.65)',
+    borderTop: '1px solid rgb(233, 233, 231)',
+    boxShadow: 'white -3px 0px 0px, rgb(233 233 231) 0px 1px 0px',
+    minWidth: 'calc((100% - 192px) - 0px)',
+  },
+  cell: {
+    display: 'flex',
+    flexDirection: 'row',
+    lineHeight: 1.5,
+  },
+  cellInner: {
+    display: 'flex',
+    flexShrink: 0,
+    overflow: 'hidden',
+    fontSize: '14px',
+    padding: '5px 8px',
+    width: '174px',
+    borderRight: '1px solid rgba(55, 53, 47, 0.09)',
+  },
+  cellText: {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+  icon: {
+    width: '14px',
+    height: '14px',
+    display: 'block',
+    fill: 'rgba(55, 53, 47, 0.45)',
+    flexshrink: 0,
+    backfaceVisibility: 'hidden',
+    marginTop: '4px',
+    marginRight: '7px',
   }
+})
 
-  const [path, slugKey] = href ? getLinkPathAndLinkKey(href) : [undefined, undefined]
-
-  const dbf = (name: string, page: PageObjectResponseEx) => {
-    if (!('property_items' in page) || !('properties' in page)) {
-      return <></>
-    }
-    let propertyId = ''
-    for (const [k, v] of Object.entries(page.properties)) {
-      if (k === name) {
-        propertyId = v.id
-      }
-    }
-    const items = page.property_items.find(v => ((v.object === 'property_item' && v.id === propertyId) || (v.object === 'list' && v.property_item.id === propertyId)))
-    const slug = slugKey ? getSlug(slugKey, page) : undefined
-
-    return TableHandler({ name, items, path, slug, link, query })
+export const Table = ({ keys, db, href, link, query }: TableProps) => {
+  const propType = (name: string) => {
+    return (db.meta.properties[name]) ? db.meta.properties[name].type : `Unknown "${name}"`
   }
 
   return (
-    <div className="notionate-table">
-      <div className="notionate-table-inner">
-        <div className="notionate-table-header notionate-table-row">
+    <div className={`rotion-table ${Stylex(style.wrapper)}`}>
+      <div className={`rotion-table-inner ${Stylex(style.inner)}`}>
+        <div className={`rotion-table-header rotion-table-row ${Stylex(style.header)} ${Stylex(style.row)}`}>
           {keys.map((name, i) => (
-            <div key={`${name}-${i}`} className={`notionate-table-cell notionate-table-column-${i}`}>
-              <PropertyNameAndIcon name={name} db={db} />
+            <div key={`${name}-${i}`} className={`rotion-table-cell rotion-table-column${i} ${Stylex(style.cell)}`}>
+              <div className={`rotion-table-cell-inner ${Stylex(style.cellInner)}`}>
+                <TableIcon type={propType(name)} className={`rotion-table-header-icon ${Stylex(style.icon)}`} />
+                <div className={`rotion-table-cell-text ${Stylex(style.cellText)}`}>
+                  {name}
+                </div>
+              </div>
             </div>
           ))}
         </div>
-        {db.results.map((v) => (
-          <div key={v.id} className="notionate-table-row">
+        {db.results.map((v: PageObjectResponseEx) => (
+          <div key={v.id} className={`rotion-table-row ${Stylex(style.row)}`}>
             {keys.map((name, i) => (
-              <div key={`${v.id}${name}`} className={`notionate-table-cell notionate-table-column-${i}`}>
-                <div className="notionate-table-cell-inner">
-                  {dbf(name, v as PageObjectResponseEx)}
+              <div key={`${v.id}${name}`} className={`rotion-table-cell rotion-table-column${i} ${Stylex(style.cell)}`}>
+                <div className={`rotion-table-cell-inner ${Stylex(style.cellInner)}`}>
+                  <Column name={name} page={v} href={href} link={link} query={query} />
                 </div>
               </div>
             ))}
diff --git a/src/ui/components/Table/TableCheckboxField/TableCheckboxField.tsx b/src/ui/components/Table/TableCheckboxField/TableCheckboxField.tsx
index 28a4f5de..7d951449 100644
--- a/src/ui/components/Table/TableCheckboxField/TableCheckboxField.tsx
+++ b/src/ui/components/Table/TableCheckboxField/TableCheckboxField.tsx
@@ -3,7 +3,7 @@ import type { TableCheckboxFieldProps } from './TableCheckboxField.types'
 
 export const TableCheckboxField = ({ payload }: TableCheckboxFieldProps) => {
   return (
-    <div className="notionate-table-checkbox">
+    <div className={'rotion-table-checkbox'}>
       {payload}
     </div>
   )
diff --git a/src/ui/components/Table/TableDateField/TableDateField.tsx b/src/ui/components/Table/TableDateField/TableDateField.tsx
index 4610fd39..d854ff27 100644
--- a/src/ui/components/Table/TableDateField/TableDateField.tsx
+++ b/src/ui/components/Table/TableDateField/TableDateField.tsx
@@ -1,9 +1,23 @@
 import React from 'react'
 import type { TableDateFieldProps } from './TableDateField.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    whiteSpace: 'nowrap',
+    fontSize: '.85rem',
+    display: 'flex',
+    alignItems: 'center',
+    minWidth: '20px',
+    color: '#999',
+  },
+})
 
 const TableDateField = ({ payload }: TableDateFieldProps) => {
   return (
-    <div className="notionate-table-date">
+    <div className={`rotion-table-date ${Stylex(style.wrapper)}`}>
       {payload?.start}
     </div>
   )
diff --git a/src/ui/components/Table/TableHandler.tsx b/src/ui/components/Table/TableHandler.tsx
index c603fddb..ba681200 100644
--- a/src/ui/components/Table/TableHandler.tsx
+++ b/src/ui/components/Table/TableHandler.tsx
@@ -11,8 +11,8 @@ import TableCheckboxField from './TableCheckboxField/TableCheckboxField'
 import TableNumberField from './TableNumberField/TableNumberField'
 import type { TableHandlerProps } from './TableHandler.types'
 
-const TableHandler = ({ name, items, path, slug, link, query }: TableHandlerProps) => {
-  if (items === undefined) {
+const TableHandler = ({ items, path, slug, link, query }: TableHandlerProps) => {
+  if (!items) {
     return <></>
   }
 
@@ -25,10 +25,10 @@ const TableHandler = ({ name, items, path, slug, link, query }: TableHandlerProp
     switch (target.type) {
       case 'title': { // Skip: Unexpected lexical declaration in case block.
         const payload = items.results as Array<TitlePropertyItemObjectResponse>
-        return TableTitleField({ payload, path, slug, link, query })
+        return <TableTitleField payload={payload} path={path} slug={slug} link={link} query={query} />
       }
       case 'rich_text':
-        return TableRichTextField({ payload: target })
+        return <TableRichTextField payload={target} />
       case 'people':
       case 'relation':
       case 'rollup':
@@ -39,19 +39,19 @@ const TableHandler = ({ name, items, path, slug, link, query }: TableHandlerProp
   } else {
     switch (items.type) {
       case 'date':
-        return TableDateField({ payload: items.date })
+        return <TableDateField payload={items.date} />
       case 'rich_text':
-        return TableRichTextField({ payload: items })
+        return <TableRichTextField payload={items} />
       case 'multi_select':
-        return TableMultiSelectField({ payload: items, path })
+        return <TableMultiSelectField payload={items} path={path} query={query} />
       case 'url':
-        return TableUrlField({ payload: items.url })
+        return <TableUrlField payload={items.url} />
       case 'checkbox':
-        return TableCheckboxField({ payload: items.checkbox })
+        return <TableCheckboxField payload={items.checkbox} />
       case 'number':
-        return TableNumberField({ payload: items })
+        return <TableNumberField payload={items} />
       case 'select':
-        return TableSelectField({ payload: items, path })
+        return <TableSelectField payload={items} path={path} query={query} />
       case 'status':
       case 'email':
       case 'phone_number':
diff --git a/src/ui/components/Table/TableHandler.types.ts b/src/ui/components/Table/TableHandler.types.ts
index a9889a0f..99fdaa6c 100644
--- a/src/ui/components/Table/TableHandler.types.ts
+++ b/src/ui/components/Table/TableHandler.types.ts
@@ -3,7 +3,6 @@ import type { ParsedUrlQueryInput } from 'node:querystring'
 import type { Link } from '../types'
 
 export interface TableHandlerProps {
-  name: string
   items: GetPagePropertyResponse|undefined
   path?: string
   slug?: string
diff --git a/src/ui/components/Table/TableIcon/TableIcon.tsx b/src/ui/components/Table/TableIcon/TableIcon.tsx
index 2301e109..567cb929 100644
--- a/src/ui/components/Table/TableIcon/TableIcon.tsx
+++ b/src/ui/components/Table/TableIcon/TableIcon.tsx
@@ -1,109 +1,109 @@
 import React from 'react'
 import type { TableIconProps } from './TableIcon.types'
 
-const TableIcon = ({ type }: TableIconProps) => {
+const TableIcon = ({ type, className }: TableIconProps) => {
   switch (type) {
     case 'title':
       return (
-        <svg viewBox="0 0 14 14" className="notionate-table-icon">
+        <svg viewBox="0 0 14 14" className={className}>
           <path d="M7.73943662,8.6971831 C7.77640845,8.7834507 7.81338028,8.8943662 7.81338028,9.00528169 C7.81338028,9.49823944 7.40669014,9.89260563 6.91373239,9.89260563 C6.53169014,9.89260563 6.19894366,9.64612676 6.08802817,9.30105634 L5.75528169,8.33978873 L2.05809859,8.33978873 L1.72535211,9.30105634 C1.61443662,9.64612676 1.2693662,9.89260563 0.887323944,9.89260563 C0.394366197,9.89260563 0,9.49823944 0,9.00528169 C0,8.8943662 0.0246478873,8.7834507 0.0616197183,8.6971831 L2.46478873,2.48591549 C2.68661972,1.90669014 3.24119718,1.5 3.90669014,1.5 C4.55985915,1.5 5.12676056,1.90669014 5.34859155,2.48591549 L7.73943662,8.6971831 Z M2.60035211,6.82394366 L5.21302817,6.82394366 L3.90669014,3.10211268 L2.60035211,6.82394366 Z M11.3996479,3.70598592 C12.7552817,3.70598592 14,4.24823944 14,5.96126761 L14,9.07922535 C14,9.52288732 13.6549296,9.89260563 13.2112676,9.89260563 C12.8169014,9.89260563 12.471831,9.59683099 12.4225352,9.19014085 C12.028169,9.6584507 11.3257042,9.95422535 10.5492958,9.95422535 C9.60035211,9.95422535 8.47887324,9.31338028 8.47887324,7.98239437 C8.47887324,6.58978873 9.60035211,6.08450704 10.5492958,6.08450704 C11.3380282,6.08450704 12.040493,6.33098592 12.4348592,6.81161972 L12.4348592,5.98591549 C12.4348592,5.38204225 11.9172535,4.98767606 11.1285211,4.98767606 C10.6602113,4.98767606 10.2411972,5.11091549 9.80985915,5.38204225 C9.72359155,5.43133803 9.61267606,5.46830986 9.50176056,5.46830986 C9.18133803,5.46830986 8.91021127,5.1971831 8.91021127,4.86443662 C8.91021127,4.64260563 9.0334507,4.44542254 9.19366197,4.34683099 C9.87147887,3.90316901 10.6232394,3.70598592 11.3996479,3.70598592 Z M11.1778169,8.8943662 C11.6830986,8.8943662 12.1760563,8.72183099 12.4348592,8.37676056 L12.4348592,7.63732394 C12.1760563,7.29225352 11.6830986,7.11971831 11.1778169,7.11971831 C10.5616197,7.11971831 10.056338,7.45246479 10.056338,8.0193662 C10.056338,8.57394366 10.5616197,8.8943662 11.1778169,8.8943662 Z M0.65625,11.125 L13.34375,11.125 C13.7061869,11.125 14,11.4188131 14,11.78125 C14,12.1436869 13.7061869,12.4375 13.34375,12.4375 L0.65625,12.4375 C0.293813133,12.4375 4.43857149e-17,12.1436869 0,11.78125 C-4.43857149e-17,11.4188131 0.293813133,11.125 0.65625,11.125 Z">
           </path>
         </svg>
       )
     case 'date':
       return (
-        <svg viewBox="0 0 14 14" className="notionate-table-icon">
+        <svg viewBox="0 0 14 14" className={className}>
           <path d="M10.8889,5.5 L3.11111,5.5 L3.11111,7.05556 L10.8889,7.05556 L10.8889,5.5 Z M12.4444,1.05556 L11.6667,1.05556 L11.6667,0 L10.1111,0 L10.1111,1.05556 L3.88889,1.05556 L3.88889,0 L2.33333,0 L2.33333,1.05556 L1.55556,1.05556 C0.692222,1.05556 0.00777777,1.75556 0.00777777,2.61111 L0,12.5 C0,13.3556 0.692222,14 1.55556,14 L12.4444,14 C13.3,14 14,13.3556 14,12.5 L14,2.61111 C14,1.75556 13.3,1.05556 12.4444,1.05556 Z M12.4444,12.5 L1.55556,12.5 L1.55556,3.94444 L12.4444,3.94444 L12.4444,12.5 Z M8.55556,8.61111 L3.11111,8.61111 L3.11111,10.1667 L8.55556,10.1667 L8.55556,8.61111 Z">
           </path>
         </svg>
       )
     case 'rich_text':
       return (
-        <svg viewBox="0 0 14 14" className="notionate-table-icon">
+        <svg viewBox="0 0 14 14" className={className}>
           <path d="M7,4.56818 C7,4.29204 6.77614,4.06818 6.5,4.06818 L0.5,4.06818 C0.223858,4.06818 0,4.29204 0,4.56818 L0,5.61364 C0,5.88978 0.223858,6.11364 0.5,6.11364 L6.5,6.11364 C6.77614,6.11364 7,5.88978 7,5.61364 L7,4.56818 Z M0.5,1 C0.223858,1 0,1.223858 0,1.5 L0,2.54545 C0,2.8216 0.223858,3.04545 0.5,3.04545 L12.5,3.04545 C12.7761,3.04545 13,2.8216 13,2.54545 L13,1.5 C13,1.223858 12.7761,1 12.5,1 L0.5,1 Z M0,8.68182 C0,8.95796 0.223858,9.18182 0.5,9.18182 L11.5,9.18182 C11.7761,9.18182 12,8.95796 12,8.68182 L12,7.63636 C12,7.36022 11.7761,7.13636 11.5,7.13636 L0.5,7.13636 C0.223858,7.13636 0,7.36022 0,7.63636 L0,8.68182 Z M0,11.75 C0,12.0261 0.223858,12.25 0.5,12.25 L9.5,12.25 C9.77614,12.25 10,12.0261 10,11.75 L10,10.70455 C10,10.4284 9.77614,10.20455 9.5,10.20455 L0.5,10.20455 C0.223858,10.20455 0,10.4284 0,10.70455 L0,11.75 Z">
           </path>
         </svg>
       )
     case 'multi_select':
       return (
-        <svg viewBox="0 0 14 14" className="notionate-table-icon">
+        <svg viewBox="0 0 14 14" className={className}>
           <path d="M4,3 C4,2.447715 4.447715,2 5,2 L12,2 C12.5523,2 13,2.447716 13,3 C13,3.55228 12.5523,4 12,4 L5,4 C4.447715,4 4,3.55228 4,3 Z M4,7 C4,6.447715 4.447715,6 5,6 L12,6 C12.5523,6 13,6.447716 13,7 C13,7.55228 12.5523,8 12,8 L5,8 C4.447715,8 4,7.55228 4,7 Z M4,11 C4,10.447715 4.447715,10 5,10 L12,10 C12.5523,10 13,10.447716 13,11 C13,11.55228 12.5523,12 12,12 L5,12 C4.447715,12 4,11.55228 4,11 Z M2,4 C1.44771525,4 1,3.55228475 1,3 C1,2.44771525 1.44771525,2 2,2 C2.55228475,2 3,2.44771525 3,3 C3,3.55228475 2.55228475,4 2,4 Z M2,8 C1.44771525,8 1,7.55228475 1,7 C1,6.44771525 1.44771525,6 2,6 C2.55228475,6 3,6.44771525 3,7 C3,7.55228475 2.55228475,8 2,8 Z M2,12 C1.44771525,12 1,11.5522847 1,11 C1,10.4477153 1.44771525,10 2,10 C2.55228475,10 3,10.4477153 3,11 C3,11.5522847 2.55228475,12 2,12 Z">
           </path>
         </svg>
       )
     case 'url':
       return (
-        <svg viewBox="0 0 14 14" className="notionate-table-icon">
+        <svg viewBox="0 0 14 14" className={className}>
           <path d="M3.73333,3.86667 L7.46667,3.86667 C8.49613,3.86667 9.33333,4.70387 9.33333,5.73333 C9.33333,6.7628 8.49613,7.6 7.46667,7.6 L6.53333,7.6 C6.01813,7.6 5.6,8.0186 5.6,8.53333 C5.6,9.04807 6.01813,9.46667 6.53333,9.46667 L7.46667,9.46667 C9.5284,9.46667 11.2,7.79507 11.2,5.73333 C11.2,3.6716 9.5284,2 7.46667,2 L3.73333,2 C1.6716,2 0,3.6716 0,5.73333 C0,7.124 0.762067,8.33453 1.88953,8.97713 C1.87553,8.83107 1.86667,8.6836 1.86667,8.53333 C1.86667,7.92013 1.98753,7.33447 2.2036,6.7978 C1.99267,6.4954 1.86667,6.12953 1.86667,5.73333 C1.86667,4.70387 2.70387,3.86667 3.73333,3.86667 Z M12.1095,5.28907 C12.1231,5.4356 12.1333,5.58307 12.1333,5.73333 C12.1333,6.34607 12.0101,6.9294 11.7931,7.46513 C12.0059,7.768 12.1333,8.13573 12.1333,8.53333 C12.1333,9.5628 11.2961,10.4 10.2667,10.4 L6.53333,10.4 C5.50387,10.4 4.66667,9.5628 4.66667,8.53333 C4.66667,7.50387 5.50387,6.66667 6.53333,6.66667 L7.46667,6.66667 C7.98187,6.66667 8.4,6.24807 8.4,5.73333 C8.4,5.2186 7.98187,4.8 7.46667,4.8 L6.53333,4.8 C4.4716,4.8 2.8,6.4716 2.8,8.53333 C2.8,10.59507 4.4716,12.2667 6.53333,12.2667 L10.2667,12.2667 C12.3284,12.2667 14,10.59507 14,8.53333 C14,7.14267 13.2375,5.93167 12.1095,5.28907 Z">
           </path>
         </svg>
       )
     case 'number':
       return (
-        <svg viewBox="0 0 14 14" className="notionate-table-icon">
+        <svg viewBox="0 0 14 14" className={className}>
           <path d="M4.46191,0 C3.8667,0 3.38428,0.482422 3.38428,1.07751 L3.38428,3.38425 L1.07764,3.38425 C0.482422,3.38425 0,3.86667 0,4.46179 C0,5.05688 0.482422,5.53931 1.07764,5.53931 L3.38428,5.53931 L3.38428,8.46063 L1.07764,8.46063 C0.482422,8.46063 0,8.94308 0,9.53818 C0,10.1333 0.482422,10.6157 1.07764,10.6157 L3.38428,10.6157 L3.38428,12.9224 C3.38428,13.5175 3.8667,13.9999 4.46191,13.9999 C5.05664,13.9999 5.53906,13.5175 5.53906,12.9224 L5.53906,10.6157 L8.46045,10.6157 L8.46045,12.9224 C8.46045,13.5175 8.94287,13.9999 9.53809,13.9999 C10.1333,13.9999 10.6157,13.5175 10.6157,12.9224 L10.6157,10.6157 L12.9224,10.6157 C13.5176,10.6157 14,10.1333 14,9.53818 C14,8.94308 13.5176,8.46063 12.9224,8.46063 L10.6157,8.46063 L10.6157,5.53931 L12.9224,5.53931 C13.5176,5.53931 14,5.05688 14,4.46179 C14,3.86667 13.5176,3.38425 12.9224,3.38425 L10.6157,3.38425 L10.6157,1.07751 C10.6157,0.482422 10.1333,0 9.53809,0 C8.94287,0 8.46045,0.482422 8.46045,1.07751 L8.46045,3.38425 L5.53906,3.38425 L5.53906,1.07751 C5.53906,0.482422 5.05664,0 4.46191,0 Z M5.53906,8.46063 L5.53906,5.53931 L8.46045,5.53931 L8.46045,8.46063 L5.53906,8.46063 Z">
           </path>
         </svg>
       )
     case 'checkbox':
       return (
-        <svg viewBox="0 0 14 14" className="notionate-table-icon">
+        <svg viewBox="0 0 14 14" className={className}>
           <path d="M0,3 C0,1.34314 1.34326,0 3,0 L11,0 C12.6567,0 14,1.34314 14,3 L14,11 C14,12.6569 12.6567,14 11,14 L3,14 C1.34326,14 0,12.6569 0,11 L0,3 Z M3,1.5 C2.17139,1.5 1.5,2.17157 1.5,3 L1.5,11 C1.5,11.8284 2.17139,12.5 3,12.5 L11,12.5 C11.8286,12.5 12.5,11.8284 12.5,11 L12.5,3 C12.5,2.17157 11.8286,1.5 11,1.5 L3,1.5 Z M2.83252,6.8161 L3.39893,6.27399 L3.57617,6.10425 L3.92334,5.77216 L4.26904,6.10559 L4.44531,6.27582 L5.58398,7.37402 L9.28271,3.81073 L9.45996,3.64008 L9.80664,3.3056 L10.1538,3.63989 L10.3311,3.81067 L10.8936,4.35303 L11.0708,4.52399 L11.4434,4.88379 L11.0708,5.24353 L10.8936,5.41437 L6.1084,10.0291 L5.93115,10.2 L5.58398,10.5344 L5.23682,10.2 L5.05957,10.0292 L2.83057,7.87946 L2.65283,7.70801 L2.27832,7.34674 L2.6543,6.98694 L2.83252,6.8161 Z">
           </path>
         </svg>
       )
     case 'select':
       return (
-        <svg viewBox="0 0 14 14" className="notionate-table-icon">
+        <svg viewBox="0 0 14 14" className={className}>
           <path d="M7,13 C10.31348,13 13,10.31371 13,7 C13,3.68629 10.31348,1 7,1 C3.68652,1 1,3.68629 1,7 C1,10.31371 3.68652,13 7,13 Z M3.75098,5.32278 C3.64893,5.19142 3.74268,5 3.90869,5 L10.09131,5 C10.25732,5 10.35107,5.19142 10.24902,5.32278 L7.15771,9.29703 C7.07764,9.39998 6.92236,9.39998 6.84229,9.29703 L3.75098,5.32278 Z">
           </path>
         </svg>
       )
     case 'status':
       return (
-        <svg viewBox="0 0 16 16" className="notionate-table-icon">
+        <svg viewBox="0 0 16 16" className={className}>
           <path d="M8.75488 1.02344C8.75488 0.613281 8.41309 0.264648 8.00293 0.264648C7.59277 0.264648 7.25098 0.613281 7.25098 1.02344V3.11523C7.25098 3.51855 7.59277 3.86719 8.00293 3.86719C8.41309 3.86719 8.75488 3.51855 8.75488 3.11523V1.02344ZM3.91504 5.0293C4.20215 5.31641 4.69434 5.32324 4.97461 5.03613C5.26855 4.74902 5.26855 4.25684 4.98145 3.96973L3.53906 2.52051C3.25195 2.2334 2.7666 2.21973 2.47949 2.50684C2.19238 2.79395 2.18555 3.28613 2.47266 3.57324L3.91504 5.0293ZM10.9629 4.01758C10.6826 4.30469 10.6826 4.79688 10.9697 5.08398C11.2568 5.37109 11.749 5.36426 12.0361 5.07715L13.4854 3.62793C13.7725 3.34082 13.7725 2.84863 13.4785 2.55469C13.1982 2.27441 12.7061 2.27441 12.4189 2.56152L10.9629 4.01758ZM15.0234 8.78906C15.4336 8.78906 15.7822 8.44727 15.7822 8.03711C15.7822 7.62695 15.4336 7.28516 15.0234 7.28516H12.9385C12.5283 7.28516 12.1797 7.62695 12.1797 8.03711C12.1797 8.44727 12.5283 8.78906 12.9385 8.78906H15.0234ZM0.975586 7.28516C0.56543 7.28516 0.223633 7.62695 0.223633 8.03711C0.223633 8.44727 0.56543 8.78906 0.975586 8.78906H3.07422C3.48438 8.78906 3.83301 8.44727 3.83301 8.03711C3.83301 7.62695 3.48438 7.28516 3.07422 7.28516H0.975586ZM12.0361 10.9902C11.749 10.71 11.2568 10.71 10.9629 10.9971C10.6826 11.2842 10.6826 11.7764 10.9697 12.0635L12.4258 13.5127C12.7129 13.7998 13.2051 13.793 13.4922 13.5059C13.7793 13.2256 13.7725 12.7266 13.4854 12.4395L12.0361 10.9902ZM2.52051 12.4395C2.22656 12.7266 2.22656 13.2188 2.50684 13.5059C2.79395 13.793 3.28613 13.7998 3.57324 13.5127L5.02246 12.0703C5.31641 11.7832 5.31641 11.291 5.03613 11.0039C4.74902 10.7168 4.25684 10.71 3.96973 10.9971L2.52051 12.4395ZM8.75488 12.9658C8.75488 12.5557 8.41309 12.207 8.00293 12.207C7.59277 12.207 7.25098 12.5557 7.25098 12.9658V15.0576C7.25098 15.4609 7.59277 15.8096 8.00293 15.8096C8.41309 15.8096 8.75488 15.4609 8.75488 15.0576V12.9658Z">
           </path>
         </svg>
       )
     case 'person':
       return (
-        <svg viewBox="0 0 14 14" className="notionate-table-icon">
+        <svg viewBox="0 0 14 14" className={className}>
           <path d="M9.625,10.8465 C8.91187,10.2891 8.12088,9.926 7,9.26013 L7,8.71938 C7.21175,8.47612 7.392,8.176 7.53813,7.83213 C7.94587,7.7315 8.3125,7.33425 8.3125,7 C8.3125,6.51788 8.1095,6.32713 7.8715,6.17137 C7.8715,6.15562 7.875,6.14162 7.875,6.125 C7.875,5.41362 7.4375,3.5 5.25,3.5 C3.0625,3.5 2.625,5.4145 2.625,6.125 C2.625,6.14162 2.6285,6.15562 2.6285,6.17137 C2.3905,6.32713 2.1875,6.51788 2.1875,7 C2.1875,7.33425 2.55413,7.7315 2.96187,7.833 C3.108,8.176 3.28825,8.47612 3.5,8.71938 L3.5,9.26013 C2.37912,9.92513 1.58812,10.2882 0.875,10.8465 C0.041125,11.4984 0,12.4688 0,14 L10.5,14 C10.5,12.4688 10.4589,11.4984 9.625,10.8465 Z M13.125,7.3465 C12.4119,6.78912 11.6209,6.426 10.5,5.76013 L10.5,5.21938 C10.7118,4.97613 10.892,4.676 11.0381,4.33213 C11.4459,4.2315 11.8125,3.83425 11.8125,3.5 C11.8125,3.01787 11.6095,2.82713 11.3715,2.67138 C11.3715,2.65562 11.375,2.64162 11.375,2.625 C11.375,1.91363 10.9375,0 8.75,0 C6.5625,0 6.125,1.9145 6.125,2.625 C6.125,2.64162 6.1285,2.65562 6.1285,2.67138 C6.11188,2.68275 6.09787,2.69588 6.08125,2.70725 C7.83212,3.066 8.59688,4.54825 8.72813,5.74787 C8.97575,6.00863 9.1875,6.39625 9.1875,7 C9.1875,7.60288 8.771,8.20312 8.18388,8.51462 C8.127,8.624 8.06662,8.729 8.00275,8.82962 C8.155,8.91537 8.30025,8.99675 8.44025,9.07463 C9.08075,9.4325 9.63375,9.74137 10.164,10.1561 C10.3022,10.2638 10.4204,10.3801 10.5289,10.4991 L14,10.4991 C14,8.96875 13.9589,7.99837 13.125,7.3465 Z">
           </path>
         </svg>
       )
     case 'email':
       return (
-        <svg viewBox="0 0 14 14" className="notionate-table-icon">
+        <svg viewBox="0 0 14 14" className={className}>
           <path d="M14,6.22508 C14,7.0471 13.8666,7.79918 13.5999,8.48134 C13.3332,9.16351 12.9563,9.69867 12.4692,10.0868 C11.9821,10.475 11.524,10.6862 10.9764,10.6862 C10.5473,10.6862 10.1676,10.5849 9.83705,10.3823 C9.50653,10.1796 9.2688,9.91274 9.12384,9.58165 C8.51065,10.318 7.56114,10.6862 6.5928,10.6862 C5.56647,10.6862 4.75762,10.3823 4.16618,9.77431 C3.57473,9.16636 3.27902,8.33436 3.27902,7.27829 C3.27902,6.0738 3.66752,5.10337 4.44451,4.36697 C5.2215,3.63058 6.2362,3.26239 7.48867,3.26239 C7.98734,3.26239 9.5206,3.47449 9.74131,3.53033 C10.2518,3.65949 10.6003,4.12335 10.5763,4.6417 C10.5697,4.78537 10.5175,5.88115 10.4198,7.92905 C10.4198,8.72253 10.6401,9.11927 11.0808,9.11927 C11.4519,9.11927 11.7476,8.8524 11.968,8.31865 C12.1883,7.78491 12.2985,7.08706 12.2985,6.22508 C12.2985,5.30601 12.1042,4.49399 11.7157,3.78899 C11.3272,3.08399 10.7808,2.54597 10.0762,2.17492 C9.37173,1.80387 8.56719,1.61835 7.66263,1.61835 C6.49134,1.61835 5.47373,1.85525 4.60976,2.32905 C3.74579,2.80286 3.08332,3.48644 2.62234,4.37981 C2.16136,5.27319 1.93089,6.30499 1.93089,7.47523 C1.93089,9.05077 2.35851,10.2595 3.21378,11.1015 C4.06905,11.9435 5.30847,12.3645 6.93203,12.3645 C7.54667,12.3645 8.22216,12.2975 8.95856,12.1633 C9.18419,12.1222 9.47682,12.0555 9.83645,11.9632 C10.2649,11.8532 10.7081,12.0814 10.8607,12.4905 C11.0082,12.8863 10.802,13.3249 10.4001,13.4701 C10.3865,13.475 10.3728,13.4796 10.359,13.4837 C9.30721,13.7996 8.18808,13.9716 7.00161,14 C4.7982,14 3.08041,13.4292 1.84823,12.2875 C0.616061,11.1458 0,9.55883 0,7.52661 C0,6.11661 0.314555,4.8365 0.943688,3.68624 C1.57282,2.53598 2.46867,1.63405 3.63126,0.980429 C4.79385,0.326807 6.13184,0 7.64524,0 C8.9209,0 10.1589,0.290316 11.0634,0.770643 C11.968,1.25097 12.6374,1.99796 13.1824,2.94557 C13.7275,3.89318 14,4.98634 14,6.22508 Z M5.38462,7.23555 C5.38462,8.44263 5.87335,9.04616 6.85083,9.04616 C7.3623,9.04616 7.75159,8.86452 8.01869,8.50126 C8.28579,8.13799 8.44773,7.54734 8.50456,6.72927 L8.61539,4.83286 C8.32555,4.76993 7.9988,4.73846 7.63509,4.73846 C6.92471,4.73846 6.37204,4.96157 5.97707,5.40779 C5.58211,5.854 5.38462,6.46325 5.38462,7.23555 Z">
           </path>
         </svg>
       )
     case 'phone_number':
       return (
-        <svg viewBox="0 0 14 14" className="notionate-table-icon">
+        <svg viewBox="0 0 14 14" className={className}>
           <path d="M2.20731,0.0127209 C2.1105,-0.0066419 1.99432,-0.00664663 1.91687,0.032079 C0.871279,0.438698 0.212942,1.92964 0.0580392,2.95587 C-0.426031,6.28627 2.20731,9.17133 4.62766,11.0689 C6.77694,12.7534 10.9012,15.5223 13.3409,12.8503 C13.6507,12.5211 14.0186,12.037 13.9993,11.553 C13.9412,10.7397 13.186,10.1588 12.6051,9.71349 C12.1598,9.38432 11.2304,8.47427 10.6495,8.49363 C10.1267,8.51299 9.79754,9.05515 9.46837,9.38432 L8.88748,9.96521 C8.79067,10.062 7.55145,9.24878 7.41591,9.15197 C6.91248,8.8228 6.4284,8.45491 6.00242,8.04829 C5.57644,7.64167 5.18919,7.19632 4.86002,6.73161 C4.7632,6.59607 3.96933,5.41495 4.04678,5.31813 C4.04678,5.31813 4.72448,4.58234 4.91811,4.2919 C5.32473,3.67229 5.63453,3.18822 5.16982,2.45243 C4.99556,2.18135 4.78257,1.96836 4.55021,1.73601 C4.14359,1.34875 3.73698,0.942131 3.27227,0.612963 C3.02055,0.419335 2.59457,0.0708094 2.20731,0.0127209 Z">
           </path>
         </svg>
       )
     case 'file':
       return (
-        <svg viewBox="0 0 14 14" className="notionate-table-icon">
+        <svg viewBox="0 0 14 14" className={className}>
           <path d="M5.94578,14 C4.62416,14 3.38248,13.4963 2.44892,12.585 C1.514641,11.6736 1,10.4639 1,9.17405 C1.00086108,7.88562 1.514641,6.67434 2.44892,5.76378 L7.45612,0.985988 C8.80142,-0.327216 11.1777,-0.332396 12.5354,0.992848 C13.9369,2.36163 13.9369,4.58722 12.5354,5.95418 L8.03046,10.2414 C7.16278,11.0877 5.73682,11.0894 4.86024,10.2345 C3.98394,9.37789 3.98394,7.98769 4.86024,7.1327 L6.60422,5.4317 L7.87576,6.67196 L6.13177,8.37297 C6.01668,8.48539 6.00003,8.61545 6.00003,8.68335 C6.00003,8.75083 6.01668,8.88103 6.13177,8.99429 C6.36197,9.21689 6.53749,9.21689 6.76768,8.99429 L11.2707,4.70622 C11.9645,4.03016 11.9645,2.91757 11.2638,2.23311 C10.5843,1.57007 9.40045,1.57007 8.72077,2.23311 L3.71342,7.0109 C3.12602,7.58406 2.79837,8.35435 2.79837,9.17405 C2.79837,9.99459 3.12602,10.7654 3.72045,11.3446 C4.90947,12.5062 6.98195,12.5062 8.17096,11.3446 L10.41911,9.15165 L11.6906,10.3919 L9.4425,12.585 C8.50808,13.4963 7.2664,14 5.94578,14 Z">
           </path>
         </svg>
       )
     case 'formula':
       return (
-        <svg viewBox="0 0 14 14" className="notionate-table-icon">
+        <svg viewBox="0 0 14 14" className={className}>
           <path d="M7.77892,7.06304 L4.62218,11.2875 C4.58556,11.3416 4.55285,11.4392 4.5504,11.5052 C4.5504,11.7022 4.7047,11.8619 4.89562,11.8619 L11.1383,11.8619 C11.6139,11.8619 11.9996,12.2598 11.9996,12.7507 L11.9996,13.1111 C11.9996,13.602 11.6139,14 11.1383,14 L1.861927,14 C1.385853,14 1.00011061,13.602 1.00011061,13.1111 L1.00011061,12.6858 C0.99718092,12.4783 1.0523567,12.3098 1.176868,12.1466 L4.39269,7.79888 C4.74816,7.31841 4.74572,6.65139 4.38683,6.17354 L1.400013,2.19436 C1.27306,2.03028 1.216419,1.85993 1.219349,1.65006 L1.219349,0.888889 C1.219349,0.397968 1.605091,0 2.08117,0 L10.91906,0 C11.3946,0 11.7804,0.397968 11.7804,0.888889 L11.7804,1.24925 C11.7804,1.74017 11.3946,2.13814 10.91906,2.13814 L5.13634,2.13814 C4.94542,2.13814 4.79064,2.29801 4.79064,2.49522 C4.79308,2.56049 4.82482,2.65709 4.86095,2.71087 L7.78038,6.68628 C7.8297,6.74847 7.84435,6.7934 7.84142,6.87363 C7.84435,6.95493 7.82921,7.00048 7.77892,7.06304 Z">
           </path>
         </svg>
       )
     case 'rollup':
       return (
-        <svg viewBox="0 0 18 18" className="notionate-table-icon">
+        <svg viewBox="0 0 18 18" className={className}>
           <path d="M17,15.6l-5.119-5.119C12.583,9.499,13,8.299,13,7c0-3.314-2.686-6-6-6S1,3.686,1,7s2.686,6,6,6 c1.299,0,2.499-0.417,3.481-1.119L15.6,17L17,15.6z M7,11c-2.209,0-4-1.791-4-4c0-2.209,1.791-4,4-4s4,1.791,4,4 C11,9.209,9.209,11,7,11z">
           </path>
         </svg>
@@ -111,7 +111,7 @@ const TableIcon = ({ type }: TableIconProps) => {
     case 'created_at':
     case 'last_edited_at':
       return (
-        <svg viewBox="0 0 14 14" className="notionate-table-icon">
+        <svg viewBox="0 0 14 14" className={className}>
           <path d="M7.01356 14.0001C8.8042 14.0001 10.5958 13.3107 11.9575 11.9324C14.681 9.21201 14.6808 4.7603 11.9571 2.04013C9.23336 -0.680043 4.77573 -0.680043 2.05199 2.04013C0.727519 3.36277 0 5.13301 0 6.99553C0 8.8764 0.727811 10.6285 2.05199 11.9509C3.43207 13.3106 5.22243 14.0001 7.01356 14.0001ZM3.72947 7.00914V8.461V8.65543H3.92382H5.34563H8.2794H8.4738V8.461V5.52541V3.37947V3.18502H8.2794H6.82747H6.63307V3.37947V6.81467H3.92382H3.72947V7.00914ZM1.83985 6.99553C1.83985 5.61698 2.38099 4.32597 3.36061 3.3477C5.36746 1.34337 8.64803 1.34062 10.6585 3.33944C10.6613 3.34219 10.6639 3.34494 10.6668 3.3477C12.676 5.3546 12.6763 8.63642 10.6668 10.6434C8.65705 12.6504 5.37031 12.6504 3.36061 10.6434C2.38099 9.66506 1.83985 8.37408 1.83985 6.99553Z">
           </path>
         </svg>
@@ -119,7 +119,7 @@ const TableIcon = ({ type }: TableIconProps) => {
     case 'created_by':
     case 'last_edited_by':
       return (
-        <svg viewBox="0 0 14 14" className="notionate-table-icon">
+        <svg viewBox="0 0 14 14" className={className}>
           <path d="M13.125,10.0354 C12.5536,9.48588 10.801,8.53125 9.625,7.875 L9.625,7.04112 C9.849,6.71912 10.045,6.37 10.1911,5.98588 C10.5849,5.7435 10.9375,5.28412 10.9375,4.8125 C10.9375,4.35488 10.9323,3.94275 10.4668,3.605 C10.3049,1.5575 9.436,0 7,0 C4.564,0 3.69513,1.5575 3.53325,3.605 C3.06775,3.94275 3.0625,4.35488 3.0625,4.8125 C3.0625,5.28412 3.41513,5.7435 3.80888,5.98588 C3.955,6.37 4.151,6.71912 4.375,7.04112 L4.375,7.875 C3.199,8.53125 1.44638,9.48588 0.875,10.0354 C0.1645,10.7188 0,11.8125 0,14 L14,14 C14,11.8125 13.8364,10.7188 13.125,10.0354 Z">
           </path>
         </svg>
diff --git a/src/ui/components/Table/TableIcon/TableIcon.types.ts b/src/ui/components/Table/TableIcon/TableIcon.types.ts
index 3f3a5a55..ccf3d35a 100644
--- a/src/ui/components/Table/TableIcon/TableIcon.types.ts
+++ b/src/ui/components/Table/TableIcon/TableIcon.types.ts
@@ -1,3 +1,4 @@
 export interface TableIconProps {
   type: string
+  className?: string
 }
diff --git a/src/ui/components/Table/TableMultiSelectField/LinkedTagIfLinked.tsx b/src/ui/components/Table/TableMultiSelectField/LinkedTagIfLinked.tsx
new file mode 100644
index 00000000..f35805e1
--- /dev/null
+++ b/src/ui/components/Table/TableMultiSelectField/LinkedTagIfLinked.tsx
@@ -0,0 +1,89 @@
+import React from 'react'
+import Stylex from '@stylexjs/stylex'
+import { tokens, link, colors } from '../../tokens.stylex'
+import { LinkedTagIfLinkedProps } from './LinkedTagIfLinked.types'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    textDecoration: link.textDecoration,
+    color: 'inherit',
+    padding: '2px 10px',
+    borderRadius: tokens.borderRadius,
+  },
+  default: {
+    color: colors.default,
+    backgroundColor: colors.bgDefault,
+  },
+  gray: {
+    color: colors.gray,
+    backgroundColor: colors.bgGray,
+  },
+  brown: {
+    color: colors.brown,
+    backgroundColor: colors.bgBrown,
+  },
+  orange: {
+    color: colors.orange,
+    backgroundColor: colors.bgOrange,
+  },
+  yellow: {
+    color: colors.yellow,
+    backgroundColor: colors.bgYellow,
+  },
+  green: {
+    color: colors.green,
+    backgroundColor: colors.bgGreen,
+  },
+  blue: {
+    color: colors.blue,
+    backgroundColor: colors.bgBlue,
+  },
+  purple: {
+    color: colors.purple,
+    backgroundColor: colors.bgPurple,
+  },
+  pink: {
+    color: colors.orange,
+    backgroundColor: colors.bgOrange,
+  },
+  red: {
+    color: colors.red,
+    backgroundColor: colors.bgRed,
+  },
+})
+
+const LinkedTagIfLinked = ({ color, pathname, link, query, children }: LinkedTagIfLinkedProps) => {
+  const href = query ? { pathname, query } : pathname
+
+  const className = (color: string) => {
+    // @ts-ignore
+    const s = Stylex(style[color])
+    return `rotion-table-multiselect-link rotion-table-multiselect-${color} ${Stylex(style.wrapper)} ${s}`
+  }
+
+  if (href === '') {
+    return (
+      <span className={className(color)}>
+        {children}
+      </span>
+    )
+  }
+
+  if (link) {
+    const Link = link
+    return (
+      <Link className={className(color)} href={href}>
+        {children}
+      </Link>
+    )
+  }
+
+  return (
+    <a className={className(color)} href={pathname}>
+      {children}
+    </a>
+  )
+}
+
+export default LinkedTagIfLinked
diff --git a/src/ui/components/Table/TableMultiSelectField/LinkedTagIfLinked.types.ts b/src/ui/components/Table/TableMultiSelectField/LinkedTagIfLinked.types.ts
new file mode 100644
index 00000000..680487c0
--- /dev/null
+++ b/src/ui/components/Table/TableMultiSelectField/LinkedTagIfLinked.types.ts
@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react'
+import type { ParsedUrlQueryInput } from 'node:querystring'
+import type { Link } from '../../types'
+
+export interface LinkedTagIfLinkedProps {
+  pathname: string
+  color: string
+  link?: Link
+  query?: ParsedUrlQueryInput
+  children?: ReactNode
+}
diff --git a/src/ui/components/Table/TableMultiSelectField/TableMultiSelectField.tsx b/src/ui/components/Table/TableMultiSelectField/TableMultiSelectField.tsx
index 3de18f83..8353066e 100644
--- a/src/ui/components/Table/TableMultiSelectField/TableMultiSelectField.tsx
+++ b/src/ui/components/Table/TableMultiSelectField/TableMultiSelectField.tsx
@@ -1,38 +1,40 @@
 import React from 'react'
+import LinkedTagIfLinked from './LinkedTagIfLinked'
 import type { TableMultiSelectFieldProps } from './TableMultiSelectField.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../../tokens.stylex'
 
-const TableMultiSelectField = ({ payload, path, link }: TableMultiSelectFieldProps) => {
-  const LinkedTag = (name: string) => {
-    if (!path) {
-      return (
-        <span className="notionate-table-multiselect-span">
-          {name}
-        </span>
-      )
-    }
-    const href = `${path}tags/${encodeURIComponent(name)}`
-    if (link) {
-      const Link = link
-      return (
-        <>
-          <Link className="notionate-table-multiselect-a" href={href}>
-            {name}
-          </Link>
-        </>
-      )
-    }
-    return (
-      <a className="notionate-table-multiselect-a" href={href} title={name}>
-        {name}
-      </a>
-    )
-  }
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    listStyleType: 'none',
+    display: 'flex',
+    flexShrink: 0,
+    alignItems: 'center',
+    margin: 0,
+    padding: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+  li: {
+    fontSize: '.75rem',
+    display: 'flex',
+    alignItems: 'center',
+    flexShrink: 0,
+    minWidth: 0,
+    padding: 0,
+    margin: '0 6px 0 0',
+  },
+})
 
+const TableMultiSelectField = ({ payload, path, link, query }: TableMultiSelectFieldProps) => {
   return (
-    <ul className="notionate-table-multiselect-ul">
-      {payload.multi_select.map(f => (
-        <li key={f.id} className={`notionate-table-multiselect-li notionate-select-${f.color}`}>
-          {LinkedTag(f.name)}
+    <ul className={`rotion-table-multiselect-ul ${Stylex(style.wrapper)}`}>
+      {payload.multi_select.map(v => (
+        <li key={v.id} className={`rotion-table-multiselect-li ${Stylex(style.li)}`}>
+          <LinkedTagIfLinked pathname={path ? `${path}tags/${encodeURIComponent(v.name)}` : ''} color={v.color} link={link} query={query}>
+            {v.name}
+          </LinkedTagIfLinked>
         </li>
       ))}
     </ul>
diff --git a/src/ui/components/Table/TableMultiSelectField/TableMultiSelectField.types.ts b/src/ui/components/Table/TableMultiSelectField/TableMultiSelectField.types.ts
index 6544f74f..3672fcab 100644
--- a/src/ui/components/Table/TableMultiSelectField/TableMultiSelectField.types.ts
+++ b/src/ui/components/Table/TableMultiSelectField/TableMultiSelectField.types.ts
@@ -1,8 +1,10 @@
 import type { MultiSelectPropertyItemObjectResponse } from '../../../../exporter'
 import type { Link } from '../../types'
+import type { ParsedUrlQueryInput } from 'node:querystring'
 
 export interface TableMultiSelectFieldProps {
   payload: MultiSelectPropertyItemObjectResponse
   path?: string
   link?: Link
+  query?: ParsedUrlQueryInput
 }
diff --git a/src/ui/components/Table/TableNumberField/TableNumberField.tsx b/src/ui/components/Table/TableNumberField/TableNumberField.tsx
index 97fcdc26..133a1cce 100644
--- a/src/ui/components/Table/TableNumberField/TableNumberField.tsx
+++ b/src/ui/components/Table/TableNumberField/TableNumberField.tsx
@@ -1,9 +1,22 @@
 import React from 'react'
 import type { TableNumberFieldProps } from './TableNumberField.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    whiteSpace: 'nowrap',
+    fontSize: '.85rem',
+    display: 'block',
+    width: '100%',
+    textAlign: 'right',
+  },
+})
 
 const TableNumberField = ({ payload }: TableNumberFieldProps) => {
   return (
-    <div className="notionate-table-number">
+    <div className={`rotion-table-number ${Stylex(style.wrapper)}`}>
       {payload.number}
     </div>
   )
diff --git a/src/ui/components/Table/TablePropertyNameAndIcon.tsx b/src/ui/components/Table/TablePropertyNameAndIcon.tsx
deleted file mode 100644
index 13fef2ac..00000000
--- a/src/ui/components/Table/TablePropertyNameAndIcon.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react'
-import TableIcon from './TableIcon/TableIcon'
-import type { TablePropertyNameAndIconProps } from './TablePropertyNameAndIcon.types'
-
-const TablePropertyNameAndIcon = ({ name, db }: TablePropertyNameAndIconProps) => {
-  if (!(name in db.meta.properties)) {
-    return (
-      <>
-        {`Unknown "${name}"`}
-      </>
-    )
-  }
-  const propType = db.meta.properties[name].type
-  return (
-    <div className="notionate-table-cell-inner">
-      <TableIcon type={propType} />
-      <div className="notionate-table-cell-text">
-        {name}
-      </div>
-    </div>
-  )
-}
-
-export default TablePropertyNameAndIcon
diff --git a/src/ui/components/Table/TablePropertyNameAndIcon.types.ts b/src/ui/components/Table/TablePropertyNameAndIcon.types.ts
deleted file mode 100644
index 5d773cc0..00000000
--- a/src/ui/components/Table/TablePropertyNameAndIcon.types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { QueryDatabaseResponseEx } from '../../../exporter'
-
-export interface TablePropertyNameAndIconProps {
-  name: string
-  db: QueryDatabaseResponseEx
-}
diff --git a/src/ui/components/Table/TableRichTextField/TableRichTextField.tsx b/src/ui/components/Table/TableRichTextField/TableRichTextField.tsx
index 10d6369a..0222d9c6 100644
--- a/src/ui/components/Table/TableRichTextField/TableRichTextField.tsx
+++ b/src/ui/components/Table/TableRichTextField/TableRichTextField.tsx
@@ -1,11 +1,31 @@
 import React from 'react'
-import TextBlock from '../../Page/TextBlock/TextBlock'
+import { RichText } from '../../Page/RichText'
 import type { TableRichTextFieldProps } from './TableRichTextField.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    fontSize: '.85rem',
+    whiteSpace: 'nowrap',
+    display: 'block',
+    margin: 0,
+    padding: 0,
+    color: '#777',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+  },
+})
 
 const TableRichTextField = ({ payload }: TableRichTextFieldProps) => {
+  if (!payload) {
+    return <></>
+  }
+
   return (
-    <div className="notionate-table-richtext">
-      {payload && <TextBlock tag="span" block={[payload.rich_text]} />}
+    <div className={`rotion-table-richtext ${Stylex(style.wrapper)}`}>
+      <RichText textObject={payload.rich_text} />
     </div>
   )
 }
diff --git a/src/ui/components/Table/TableSelectField/LinkedTagIfLinked.tsx b/src/ui/components/Table/TableSelectField/LinkedTagIfLinked.tsx
new file mode 100644
index 00000000..66453f6a
--- /dev/null
+++ b/src/ui/components/Table/TableSelectField/LinkedTagIfLinked.tsx
@@ -0,0 +1,88 @@
+import React from 'react'
+import type { LinkedTagIfLinkedProps } from './LinkedTagIfLinked.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens, colors } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    textDecoration: 'none',
+    color: 'inherit',
+    padding: '2px 10px',
+  },
+  default: {
+    color: colors.default,
+    backgroundColor: colors.bgDefault,
+  },
+  gray: {
+    color: colors.gray,
+    backgroundColor: colors.bgGray,
+  },
+  brown: {
+    color: colors.brown,
+    backgroundColor: colors.bgBrown,
+  },
+  orange: {
+    color: colors.orange,
+    backgroundColor: colors.bgOrange,
+  },
+  yellow: {
+    color: colors.yellow,
+    backgroundColor: colors.bgYellow,
+  },
+  green: {
+    color: colors.green,
+    backgroundColor: colors.bgGreen,
+  },
+  blue: {
+    color: colors.blue,
+    backgroundColor: colors.bgBlue,
+  },
+  purple: {
+    color: colors.purple,
+    backgroundColor: colors.bgPurple,
+  },
+  pink: {
+    color: colors.orange,
+    backgroundColor: colors.bgOrange,
+  },
+  red: {
+    color: colors.red,
+    backgroundColor: colors.bgRed,
+  },
+})
+
+const LinkedTagIfLinked = ({ pathname, color, link, query, children }: LinkedTagIfLinkedProps) => {
+  const href = query ? { pathname, query } : pathname
+
+  const className = (color: string) => {
+    // @ts-ignore
+    const s = Stylex(style[color])
+    return `rotion-table-select-link rotion-table-select-${color} ${Stylex(style.wrapper)} ${s}`
+  }
+
+  if (href === '') {
+    return (
+      <span className={className(color)}>
+        {children}
+      </span>
+    )
+  }
+
+  if (link) {
+    const Link = link
+    return (
+      <Link className={className(color)} href={href}>
+        {children}
+      </Link>
+    )
+  }
+
+  return (
+    <a className={className(color)} href={pathname}>
+      {children}
+    </a>
+  )
+}
+
+export default LinkedTagIfLinked
diff --git a/src/ui/components/Table/TableSelectField/LinkedTagIfLinked.types.ts b/src/ui/components/Table/TableSelectField/LinkedTagIfLinked.types.ts
new file mode 100644
index 00000000..6a27b457
--- /dev/null
+++ b/src/ui/components/Table/TableSelectField/LinkedTagIfLinked.types.ts
@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react'
+import type { Link } from '../../types'
+import type { ParsedUrlQueryInput } from 'node:querystring'
+
+export interface LinkedTagIfLinkedProps {
+  pathname: string
+  color: string
+  link?: Link
+  query?: ParsedUrlQueryInput
+  children?: ReactNode
+}
diff --git a/src/ui/components/Table/TableSelectField/TableSelectField.tsx b/src/ui/components/Table/TableSelectField/TableSelectField.tsx
index cf2fa618..ad80c9b9 100644
--- a/src/ui/components/Table/TableSelectField/TableSelectField.tsx
+++ b/src/ui/components/Table/TableSelectField/TableSelectField.tsx
@@ -1,43 +1,39 @@
 import React from 'react'
 import type { TableSelectFieldProps } from './TableSelectField.types'
+import LinkedTagIfLinked from './LinkedTagIfLinked'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../../tokens.stylex'
 
-const TableSelectField = ({ payload, path, link }: TableSelectFieldProps) => {
-  const LinkedTag = (name: string) => {
-    if (!path) {
-      return (
-        <span className="notionate-table-select-span">
-          {name}
-        </span>
-      )
-    }
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    fontSize: '.75rem',
+    display: 'flex',
+    alignItems: 'center',
+    flexShrink: 0,
+    minwidth: 0,
+    borderRadius: '3px',
+    padding: 0,
+    color: 'rgb(24, 51, 71)',
+    background: 'rgb(211, 229, 239) none repeat scroll 0% 0%',
+    margin: '0 6px 0 0',
+  },
+})
 
-    const href = `${path}tags/${encodeURIComponent(name)}`
-    if (link) {
-      const Link = link
-      return (
-        <>
-          <Link className="notionate-table-select-a" href={href}>
-            {name}
-          </Link>
-        </>
-      )
-    }
-    return (
-      <a className="notionate-table-select-a" href={href} title={name}>
-        {name}
-      </a>
-    )
-  }
+const TableSelectField = ({ payload, path, link, query }: TableSelectFieldProps) => {
+  const { select } = payload
 
-  if (payload.select) {
-    return (
-      <div className={`notionate-table-select-div notionate-select-${payload.select.color}`}>
-        {LinkedTag(payload.select.name)}
-      </div>
-    )
+  if (!select) {
+    return <></>
   }
 
-  return <></>
+  return (
+    <div className={`rotion-table-select ${Stylex(style.wrapper)}`}>
+      <LinkedTagIfLinked pathname={path ? `${path}tags/${encodeURIComponent(select.name)}` : ''} color={select.color} link={link} query={query}>
+        {select.name}
+      </LinkedTagIfLinked>
+    </div>
+  )
 }
 
 export default TableSelectField
diff --git a/src/ui/components/Table/TableSelectField/TableSelectField.types.ts b/src/ui/components/Table/TableSelectField/TableSelectField.types.ts
index 84e70da4..e8eabc08 100644
--- a/src/ui/components/Table/TableSelectField/TableSelectField.types.ts
+++ b/src/ui/components/Table/TableSelectField/TableSelectField.types.ts
@@ -1,8 +1,10 @@
 import type { SelectPropertyItemObjectResponse } from '../../../../exporter'
 import type { Link } from '../../types'
+import type { ParsedUrlQueryInput } from 'node:querystring'
 
 export interface TableSelectFieldProps {
   payload: SelectPropertyItemObjectResponse
   path?: string
   link?: Link
+  query?: ParsedUrlQueryInput
 }
diff --git a/src/ui/components/Table/TableTitleField/LinkedTitleIfLinked.tsx b/src/ui/components/Table/TableTitleField/LinkedTitleIfLinked.tsx
new file mode 100644
index 00000000..641ff31d
--- /dev/null
+++ b/src/ui/components/Table/TableTitleField/LinkedTitleIfLinked.tsx
@@ -0,0 +1,48 @@
+import React from 'react'
+import type { LinkedTitleIfLinkedProps } from './LinkedTitleIfLinked.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens, link } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    color: {
+      default: link.color,
+      ':hover': link.colorHover,
+    },
+    textDecoration: link.textDecoration,
+    borderBottom: {
+      default: link.borderBottom,
+      ':hover': link.borderBottomHover,
+    },
+  },
+})
+
+const LinkedTitleIfLinked = ({ path, slug, link, query, children }: LinkedTitleIfLinkedProps) => {
+  if (!path && !slug) {
+    return (
+      <span className={`rotion-table-title-link ${Stylex(style.wrapper)}`}>
+        {children}
+      </span>
+    )
+  }
+  const pathname = `${path}${slug}`
+  const href = link && query ? { pathname, query } : pathname
+
+  if (link) {
+    const Link = link
+    return (
+      <Link className={`rotion-table-title-link ${Stylex(style.wrapper)}`} href={href}>
+        {children}
+      </Link>
+    )
+  }
+
+  return (
+    <a className={`rotion-table-title-link ${Stylex(style.wrapper)}`} href={pathname}>
+      {children}
+    </a>
+  )
+}
+
+export default LinkedTitleIfLinked
diff --git a/src/ui/components/Table/TableTitleField/LinkedTitleIfLinked.types.ts b/src/ui/components/Table/TableTitleField/LinkedTitleIfLinked.types.ts
new file mode 100644
index 00000000..db945447
--- /dev/null
+++ b/src/ui/components/Table/TableTitleField/LinkedTitleIfLinked.types.ts
@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react'
+import type { ParsedUrlQueryInput } from 'node:querystring'
+import type { Link } from '../../types'
+
+export interface LinkedTitleIfLinkedProps {
+  path?: string
+  slug?: string
+  link?: Link
+  query?: ParsedUrlQueryInput
+  children?: ReactNode
+}
diff --git a/src/ui/components/Table/TableTitleField/TableTitleField.tsx b/src/ui/components/Table/TableTitleField/TableTitleField.tsx
index 10353b4e..d8c4ea1d 100644
--- a/src/ui/components/Table/TableTitleField/TableTitleField.tsx
+++ b/src/ui/components/Table/TableTitleField/TableTitleField.tsx
@@ -1,6 +1,14 @@
 import React from 'react'
 import type { TableTitleFieldProps } from './TableTitleField.types'
-import type { Link } from '../../types'
+import LinkedTitleIfLinked from './LinkedTitleIfLinked'
+import Stylex from '@stylexjs/stylex'
+import { tokens } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+  },
+})
 
 const TableTitleField = ({ payload, path, slug, link, query }: TableTitleFieldProps) => {
   const title = payload.map(v => {
@@ -15,39 +23,11 @@ const TableTitleField = ({ payload, path, slug, link, query }: TableTitleFieldPr
     }
   }).join(',')
 
-  const href = `${path}${slug}`
-
-  const LinkedTitle = () => {
-    if (link && query) {
-      const Link = link as Link
-      return (
-        <>
-          <Link className="notionate-table-title-a" href={{ pathname: href, query }}>
-            {title}
-          </Link>
-        </>
-      )
-    } else if (link) {
-      const Link = link
-      return (
-        <>
-          <Link className="notionate-table-title-a" href={href}>
-            {title}
-          </Link>
-        </>
-      )
-    }
-
-    return (
-      <a className="notionate-table-title-a" href={href} title={title}>
-        {title}
-      </a>
-    )
-  }
-
   return (
-    <div className="notionate-table-title">
-      {(!path && !slug) ? title : LinkedTitle()}
+    <div className={`rotion-table-title ${Stylex(style.wrapper)}`}>
+      <LinkedTitleIfLinked path={path} slug={slug} link={link} query={query}>
+        {title}
+      </LinkedTitleIfLinked>
     </div>
   )
 }
diff --git a/src/ui/components/Table/TableUrlField/TableUrlField.tsx b/src/ui/components/Table/TableUrlField/TableUrlField.tsx
index 77b77276..d68394da 100644
--- a/src/ui/components/Table/TableUrlField/TableUrlField.tsx
+++ b/src/ui/components/Table/TableUrlField/TableUrlField.tsx
@@ -1,15 +1,50 @@
 import React from 'react'
 import type { TableUrlFieldProps } from './TableUrlField.types'
+import Stylex from '@stylexjs/stylex'
+import { tokens, link } from '../../tokens.stylex'
+
+const style = Stylex.create({
+  wrapper: {
+    fontFamily: tokens.fontFamily,
+    display: 'flex',
+    whiteSpace: 'nowrap',
+    margin: 0,
+  },
+  link: {
+    display: 'block',
+    textDecoration: link.textDecoration,
+    cursor: link.cursor,
+    color: {
+      default: link.color,
+      ':hover': link.colorHover,
+    },
+    background: {
+      default: 'inherit',
+      ':hover': 'rgb(227, 226, 224) none repeat scroll 0% 0%',
+    },
+    borderRadius: tokens.borderRadius,
+    padding: '0 5px 2px',
+  },
+  address: {
+    display: 'inline',
+    fontSize: '.8rem',
+    whiteSpace: 'nowrap',
+    backgroundImage: 'linear-gradient(to right, rgba(55, 53, 47, 0.16) 0%, rgba(55, 53, 47, 0.16) 100%)',
+    backgroundRepeat: 'repeat-x',
+    backgroundPosition: '0 100%',
+    backgroundSize: '100% 1px',
+  },
+})
 
 const TableUrlField = ({ payload }: TableUrlFieldProps) => {
-  if (payload === null) {
-    return (<></>)
+  if (!payload) {
+    return <></>
   }
 
   return (
-    <div className="notionate-table-url">
-      <a className="notionate-table-url-a" href={payload} rel="noreferrer" target="_blank">
-        <span className="notionate-table-url-address">
+    <div className={`rotion-table-url ${Stylex(style.wrapper)}`}>
+      <a className={`rotion-table-url-link ${Stylex(style.link)}`} href={payload} rel="noreferrer" target="_blank">
+        <span className={`rotion-table-url-address ${Stylex(style.address)}`}>
           {payload}
         </span>
       </a>
diff --git a/src/ui/components/index.ts b/src/ui/components/index.ts
index 40532954..1a47c503 100644
--- a/src/ui/components/index.ts
+++ b/src/ui/components/index.ts
@@ -31,7 +31,7 @@ export * from './Table/TableUrlField'
 export * from './Page'
 export * from './Page/BookmarkBlock'
 export * from './Page/BreadcrumbBlock'
-export * from './Page/BulletedListBlocks'
+export * from './Page/BulletedListBlock'
 export * from './Page/CalloutBlock'
 export * from './Page/ChildDatabaseBlock'
 export * from './Page/ChildPageBlock'
@@ -42,14 +42,12 @@ export * from './Page/EquationBlock'
 export * from './Page/FileBlock'
 export * from './Page/ImageBlock'
 export * from './Page/LinkPreviewBlock'
-export * from './Page/ListBlock'
 export * from './Page/NumberedListBlocks'
 export * from './Page/PageIcon'
 export * from './Page/PdfBlock'
 export * from './Page/SyncedBlock'
 export * from './Page/TableBlock'
 export * from './Page/TableOfContentsBlock'
-export * from './Page/TemplateBlock'
 export * from './Page/TextBlock'
 export * from './Page/RichText'
 export * from './Page/ToDoBlock'
diff --git a/src/ui/components/tokens.stylex.ts b/src/ui/components/tokens.stylex.ts
new file mode 100644
index 00000000..f06b0441
--- /dev/null
+++ b/src/ui/components/tokens.stylex.ts
@@ -0,0 +1,100 @@
+import Stylex from '@stylexjs/stylex'
+
+interface Color {
+  [index:string]: string
+}
+
+interface ColorWithMediaQuery {
+  [index:string]: {
+    default: string
+    [index:string]: string
+  }
+}
+
+const sansSerifFamily = [
+  'ui-sans-serif',
+  '-apple-system',
+  'BlinkMacSystemFont',
+  '"Segoe UI"',
+  'Helvetica',
+  '"Apple Color Emoji"',
+  'Arial',
+  'sans-serif',
+  '"Segoe UI Emoji"',
+  '"Segoe UI Symbol"',
+].join(',')
+
+const lightColor: Color = {
+  default: 'rgb(50, 48, 44)',
+  bgDefault: 'rgba(227, 226, 224, 0.5)',
+  gray: 'rgb(50, 48, 44)',
+  bgGray: 'rgb(227, 226, 224)',
+  brown: 'rgb(68, 42, 30)',
+  bgBrown: 'rgb(238, 224, 218)',
+  orange: 'rgb(73, 41, 14)',
+  bgOrange: 'rgb(250, 222, 201)',
+  yellow: 'rgb(64, 44, 27)',
+  bgYellow: 'rgb(253, 236, 200)',
+  green: 'rgb(28, 56, 41)',
+  bgGreen: 'rgb(219, 237, 219)',
+  blue: 'rgb(24, 51, 71)',
+  bgBlue: 'rgb(211, 229, 239)',
+  purple: 'rgb(65, 36, 84)',
+  bgPurple: 'rgb(232, 222, 238)',
+  pink: 'rgb(76, 35, 55)',
+  bgPink: 'rgb(245, 224, 233)',
+  red: 'rgb(93, 23, 21)',
+  bgRed: 'rgb(255, 226, 221)',
+}
+
+const darkColor: Color = {
+  default: 'rgb(255, 255, 255, 0.804)',
+  bgDefault: 'rgb(55, 55, 55)',
+  gray: 'rgb(255, 255, 255, 0.804)',
+  bgGray: 'rgb(90, 90, 90)',
+  brown: 'rgba(255, 255, 255, 0.804)',
+  bgBrown: 'rgb(96, 59, 44)',
+  orage: 'rgba(255, 255, 255, 0.804)',
+  bgOrage: 'rgb(133, 76, 29)',
+  yellow: 'rgba(255, 255, 255, 0.804)',
+  bgYellow: 'rgb(137, 99, 42)',
+  green: 'rgba(255, 255, 255, 0.804)',
+  bgGreen: 'rgb(43, 89, 63)',
+  blue: 'rgba(255, 255, 255, 0.804)',
+  bgBlue: 'rgb(40, 69, 108)',
+  purple: 'rgba(255, 255, 255, 0.804)',
+  bgPurple: 'rgb(73, 47, 100)',
+  pink: 'rgba(255, 255, 255, 0.804)',
+  bgPink: 'rgb(105, 49, 76)',
+  red: 'rgba(255, 255, 255, 0.804)',
+  bgRed: 'rgb(110, 54, 48)',
+}
+
+const DARK = '@media (prefers-color-scheme: dark)'
+const lightAndDark: ColorWithMediaQuery = {}
+for (const key in lightColor) {
+  lightAndDark[key] = {
+    default: lightColor[key],
+    [DARK]: darkColor[key],
+  }
+}
+
+export const tokens = Stylex.defineVars({
+  fontFamily: sansSerifFamily,
+  borderRadius: '4px',
+  secondaryText: 'rgba(55, 53, 47, 0.65)',
+  thirdText: 'rgba(55, 53, 47, 0.3)',
+})
+
+export const link = Stylex.defineVars({
+  color: 'rgb(50, 48, 44, 0.8)',
+  colorHover: 'rgb(50, 48, 44, 0.6)',
+  borderBottom: '1px solid rgb(50, 48, 44, 0.4)',
+  borderBottomHover: '1px solid rgb(50, 48, 44, 0.2)',
+  backgroundColor: 'inherit',
+  backgroundColorHover: 'rgba(227, 226, 224, 0.5)',
+  textDecoration: 'none',
+  cursor: 'pointer',
+})
+
+export const colors = Stylex.defineVars(lightColor)
diff --git a/src/ui/components/types.ts b/src/ui/components/types.ts
index f33088b6..257af7bd 100644
--- a/src/ui/components/types.ts
+++ b/src/ui/components/types.ts
@@ -6,12 +6,3 @@ export interface Link extends React.FC<{
   className?: string
   href: string | UrlObject
 }> {}
-
-export interface ExternalModules {
-  mermaid?: {
-    init: (config?: {}, nodes?: string | HTMLElement, callback?: ((id: string) => unknown) | undefined) => Promise<void>
-  }
-  prism?: {
-    highlightElement: (element: Element, async?: boolean | undefined, callback?: (element: Element) => void | undefined) => void
-  }
-}
diff --git a/src/ui/fixtures/fetch_database_response.json b/src/ui/fixtures/fetch_database_response.json
new file mode 100644
index 00000000..bad18942
--- /dev/null
+++ b/src/ui/fixtures/fetch_database_response.json
@@ -0,0 +1,2727 @@
+{
+  "object": "list",
+  "results": [
+    {
+      "object": "page",
+      "id": "6ec7f962-cc97-46eb-a41c-064eea759368",
+      "created_time": "2022-08-14T13:59:00.000Z",
+      "last_edited_time": "2023-02-21T03:36:00.000Z",
+      "created_by": {
+        "object": "user",
+        "id": "c1400938-a445-438b-be9c-2734e5dc90a6"
+      },
+      "last_edited_by": {
+        "object": "user",
+        "id": "c1400938-a445-438b-be9c-2734e5dc90a6"
+      },
+      "cover": {
+        "type": "file",
+        "file": {
+          "url": "https://prod-files-secure.s3.us-west-2.amazonaws.com/9c5c8bd8-2326-4257-98e7-557d511c9d37/faa2f0d9-3c0b-4fbe-8662-a8acd7fb5fc6/1114-laszlo_belady_older.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240124%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240124T022406Z&X-Amz-Expires=3600&X-Amz-Signature=55fdde9efb70384c8419fd9b816332b6917be6386da3d3239db15a87f619bbf4&X-Amz-SignedHeaders=host&x-id=GetObject",
+          "expiry_time": "2024-01-24T03:24:06.542Z"
+        },
+        "src": "/images/page-cover-6ec7f962-cc97-46eb-a41c-064eea759368-b6461554734d669eed67ff2b16484e6aa9dc9dec.webp"
+      },
+      "icon": null,
+      "parent": {
+        "type": "database_id",
+        "database_id": "81781536-afc6-431d-a217-21177e7bf8e0"
+      },
+      "archived": false,
+      "properties": {
+        "Note": {
+          "id": "Jfxg",
+          "type": "rich_text",
+          "rich_text": [
+            {
+              "type": "text",
+              "text": {
+                "content": "László Bélády the editor-in-chief of the IEEE Transactions on Software Engineering in the 1980s.",
+                "link": null
+              },
+              "annotations": {
+                "bold": false,
+                "italic": false,
+                "strikethrough": false,
+                "underline": false,
+                "code": false,
+                "color": "default"
+              },
+              "plain_text": "László Bélády the editor-in-chief of the IEEE Transactions on Software Engineering in the 1980s.",
+              "href": null
+            }
+          ]
+        },
+        "Url": {
+          "id": "%5Dtm%60",
+          "type": "url",
+          "url": "https://en.wikipedia.org/wiki/L%C3%A1szl%C3%B3_B%C3%A9l%C3%A1dy"
+        },
+        "Published": {
+          "id": "kdTh",
+          "type": "checkbox",
+          "checkbox": true
+        },
+        "Tags": {
+          "id": "mlgA",
+          "type": "multi_select",
+          "multi_select": [
+            {
+              "id": "17fda342-647c-4251-83ab-2d0f44208e09",
+              "name": "Memory Caching Algorithm",
+              "color": "default"
+            }
+          ]
+        },
+        "Category": {
+          "id": "uKbI",
+          "type": "select",
+          "select": {
+            "id": "bb7aabba-a37e-4d02-9d83-e9001dc6e5d6",
+            "name": "Hungarians",
+            "color": "yellow"
+          }
+        },
+        "Date": {
+          "id": "y%60Hh",
+          "type": "date",
+          "date": {
+            "start": "2052-08-01",
+            "end": null,
+            "time_zone": null
+          }
+        },
+        "Born": {
+          "id": "%7BUR%5E",
+          "type": "number",
+          "number": 1928
+        },
+        "Name": {
+          "id": "title",
+          "type": "title",
+          "title": [
+            {
+              "type": "text",
+              "text": {
+                "content": "László Bélády",
+                "link": {
+                  "url": "https://en.wikipedia.org/wiki/L%C3%A1szl%C3%B3_B%C3%A9l%C3%A1dy"
+                }
+              },
+              "annotations": {
+                "bold": false,
+                "italic": false,
+                "strikethrough": false,
+                "underline": false,
+                "code": false,
+                "color": "default"
+              },
+              "plain_text": "László Bélády",
+              "href": "https://en.wikipedia.org/wiki/L%C3%A1szl%C3%B3_B%C3%A9l%C3%A1dy"
+            }
+          ]
+        }
+      },
+      "url": "https://www.notion.so/L-szl-B-l-dy-6ec7f962cc9746eba41c064eea759368",
+      "public_url": "https://linyows.notion.site/L-szl-B-l-dy-6ec7f962cc9746eba41c064eea759368",
+      "property_items": [
+        {
+          "object": "list",
+          "results": [
+            {
+              "object": "property_item",
+              "type": "rich_text",
+              "id": "Jfxg",
+              "rich_text": {
+                "type": "text",
+                "text": {
+                  "content": "László Bélády the editor-in-chief of the IEEE Transactions on Software Engineering in the 1980s.",
+                  "link": null
+                },
+                "annotations": {
+                  "bold": false,
+                  "italic": false,
+                  "strikethrough": false,
+                  "underline": false,
+                  "code": false,
+                  "color": "default"
+                },
+                "plain_text": "László Bélády the editor-in-chief of the IEEE Transactions on Software Engineering in the 1980s.",
+                "href": null
+              }
+            }
+          ],
+          "next_cursor": null,
+          "has_more": false,
+          "type": "property_item",
+          "property_item": {
+            "id": "Jfxg",
+            "next_url": null,
+            "type": "rich_text",
+            "rich_text": {}
+          },
+          "request_id": "e2c4818a-df3d-41d3-ab9a-5638c253d806"
+        },
+        {
+          "object": "property_item",
+          "type": "url",
+          "id": "%5Dtm%60",
+          "url": "https://en.wikipedia.org/wiki/L%C3%A1szl%C3%B3_B%C3%A9l%C3%A1dy",
+          "request_id": "459c88ab-5c97-4972-ac04-139e22f845ef"
+        },
+        {
+          "object": "property_item",
+          "type": "checkbox",
+          "id": "kdTh",
+          "checkbox": true,
+          "request_id": "4ebdb434-eec0-4278-ada9-e3e6212bd329"
+        },
+        {
+          "object": "property_item",
+          "type": "multi_select",
+          "id": "mlgA",
+          "multi_select": [
+            {
+              "id": "17fda342-647c-4251-83ab-2d0f44208e09",
+              "name": "Memory Caching Algorithm",
+              "color": "default"
+            }
+          ],
+          "request_id": "730b9a50-175b-47f6-bac1-e74830f2d82b"
+        },
+        {
+          "object": "property_item",
+          "type": "select",
+          "id": "uKbI",
+          "select": {
+            "id": "bb7aabba-a37e-4d02-9d83-e9001dc6e5d6",
+            "name": "Hungarians",
+            "color": "yellow"
+          },
+          "request_id": "7ff6166a-3949-4ca9-918c-91eef3a959e7"
+        },
+        {
+          "object": "property_item",
+          "type": "date",
+          "id": "y%60Hh",
+          "date": {
+            "start": "2052-08-01",
+            "end": null,
+            "time_zone": null
+          },
+          "request_id": "942a7d12-8d13-4b38-8629-b5bebc6bcdf7"
+        },
+        {
+          "object": "property_item",
+          "type": "number",
+          "id": "%7BUR%5E",
+          "number": 1928,
+          "request_id": "1b4242d4-67c0-41c2-b7a7-8687a9bd6d06"
+        },
+        {
+          "object": "list",
+          "results": [
+            {
+              "object": "property_item",
+              "type": "title",
+              "id": "title",
+              "title": {
+                "type": "text",
+                "text": {
+                  "content": "László Bélády",
+                  "link": {
+                    "url": "https://en.wikipedia.org/wiki/L%C3%A1szl%C3%B3_B%C3%A9l%C3%A1dy"
+                  }
+                },
+                "annotations": {
+                  "bold": false,
+                  "italic": false,
+                  "strikethrough": false,
+                  "underline": false,
+                  "code": false,
+                  "color": "default"
+                },
+                "plain_text": "László Bélády",
+                "href": "https://en.wikipedia.org/wiki/L%C3%A1szl%C3%B3_B%C3%A9l%C3%A1dy"
+              }
+            }
+          ],
+          "next_cursor": null,
+          "has_more": false,
+          "type": "property_item",
+          "property_item": {
+            "id": "title",
+            "next_url": null,
+            "type": "title",
+            "title": {}
+          },
+          "request_id": "faeb920b-81c1-4847-8b69-6c9d3ff358ae"
+        }
+      ]
+    },
+    {
+      "object": "page",
+      "id": "11e2cb37-294f-4495-86bb-29432a5ee0b9",
+      "created_time": "2022-09-05T13:39:00.000Z",
+      "last_edited_time": "2023-02-21T03:38:00.000Z",
+      "created_by": {
+        "object": "user",
+        "id": "c1400938-a445-438b-be9c-2734e5dc90a6"
+      },
+      "last_edited_by": {
+        "object": "user",
+        "id": "c1400938-a445-438b-be9c-2734e5dc90a6"
+      },
+      "cover": {
+        "type": "file",
+        "file": {
+          "url": "https://prod-files-secure.s3.us-west-2.amazonaws.com/9c5c8bd8-2326-4257-98e7-557d511c9d37/068a00e5-6ab6-4d83-8f5b-ec6a161da9fb/Richard_Stallman_at_LibrePlanet_2019.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240124%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240124T022406Z&X-Amz-Expires=3600&X-Amz-Signature=077ed31c10e7b86b8f768801876cc7e596a6f8705484b048b6d132e1b9e46000&X-Amz-SignedHeaders=host&x-id=GetObject",
+          "expiry_time": "2024-01-24T03:24:06.540Z"
+        },
+        "src": "/images/page-cover-11e2cb37-294f-4495-86bb-29432a5ee0b9-b58e692f66c601d057082f6e808b29d32da1ae77.webp"
+      },
+      "icon": null,
+      "parent": {
+        "type": "database_id",
+        "database_id": "81781536-afc6-431d-a217-21177e7bf8e0"
+      },
+      "archived": false,
+      "properties": {
+        "Note": {
+          "id": "Jfxg",
+          "type": "rich_text",
+          "rich_text": [
+            {
+              "type": "text",
+              "text": {
+                "content": "Richard Stallman, created the GNU system utilities and championed free software.",
+                "link": null
+              },
+              "annotations": {
+                "bold": false,
+                "italic": false,
+                "strikethrough": false,
+                "underline": false,
+                "code": false,
+                "color": "default"
+              },
+              "plain_text": "Richard Stallman, created the GNU system utilities and championed free software.",
+              "href": null
+            }
+          ]
+        },
+        "Url": {
+          "id": "%5Dtm%60",
+          "type": "url",
+          "url": "https://en.wikipedia.org/wiki/Richard_Stallman"
+        },
+        "Published": {
+          "id": "kdTh",
+          "type": "checkbox",
+          "checkbox": true
+        },
+        "Tags": {
+          "id": "mlgA",
+          "type": "multi_select",
+          "multi_select": [
+            {
+              "id": "50cad459-cd79-4114-aed9-41df9c549b00",
+              "name": "Emacs",
+              "color": "purple"
+            },
+            {
+              "id": "b67c5f3e-e58e-4a51-9f5b-77bb7ab7b8d3",
+              "name": "GCC",
+              "color": "green"
+            }
+          ]
+        },
+        "Category": {
+          "id": "uKbI",
+          "type": "select",
+          "select": {
+            "id": "14f1fda7-c050-47dd-806e-28bb05324c9e",
+            "name": "American",
+            "color": "brown"
+          }
+        },
+        "Date": {
+          "id": "y%60Hh",
+          "type": "date",
+          "date": {
+            "start": "2022-09-29",
+            "end": null,
+            "time_zone": null
+          }
+        },
+        "Born": {
+          "id": "%7BUR%5E",
+          "type": "number",
+          "number": 1953
+        },
+        "Name": {
+          "id": "title",
+          "type": "title",
+          "title": [
+            {
+              "type": "text",
+              "text": {
+                "content": "Richard Stallman",
+                "link": {
+                  "url": "https://en.wikipedia.org/wiki/Richard_Stallman"
+                }
+              },
+              "annotations": {
+                "bold": false,
+                "italic": false,
+                "strikethrough": false,
+                "underline": false,
+                "code": false,
+                "color": "default"
+              },
+              "plain_text": "Richard Stallman",
+              "href": "https://en.wikipedia.org/wiki/Richard_Stallman"
+            }
+          ]
+        }
+      },
+      "url": "https://www.notion.so/Richard-Stallman-11e2cb37294f449586bb29432a5ee0b9",
+      "public_url": "https://linyows.notion.site/Richard-Stallman-11e2cb37294f449586bb29432a5ee0b9",
+      "property_items": [
+        {
+          "object": "list",
+          "results": [
+            {
+              "object": "property_item",
+              "type": "rich_text",
+              "id": "Jfxg",
+              "rich_text": {
+                "type": "text",
+                "text": {
+                  "content": "Richard Stallman, created the GNU system utilities and championed free software.",
+                  "link": null
+                },
+                "annotations": {
+                  "bold": false,
+                  "italic": false,
+                  "strikethrough": false,
+                  "underline": false,
+                  "code": false,
+                  "color": "default"
+                },
+                "plain_text": "Richard Stallman, created the GNU system utilities and championed free software.",
+                "href": null
+              }
+            }
+          ],
+          "next_cursor": null,
+          "has_more": false,
+          "type": "property_item",
+          "property_item": {
+            "id": "Jfxg",
+            "next_url": null,
+            "type": "rich_text",
+            "rich_text": {}
+          },
+          "request_id": "40ebd6c8-857d-43c2-b56a-ca9b271f6685"
+        },
+        {
+          "object": "property_item",
+          "type": "url",
+          "id": "%5Dtm%60",
+          "url": "https://en.wikipedia.org/wiki/Richard_Stallman",
+          "request_id": "5bf06295-a3b9-46e2-8dd2-3208a749287d"
+        },
+        {
+          "object": "property_item",
+          "type": "checkbox",
+          "id": "kdTh",
+          "checkbox": true,
+          "request_id": "9ae8a973-81be-4597-bc9f-c6be713d36ef"
+        },
+        {
+          "object": "property_item",
+          "type": "multi_select",
+          "id": "mlgA",
+          "multi_select": [
+            {
+              "id": "50cad459-cd79-4114-aed9-41df9c549b00",
+              "name": "Emacs",
+              "color": "purple"
+            },
+            {
+              "id": "b67c5f3e-e58e-4a51-9f5b-77bb7ab7b8d3",
+              "name": "GCC",
+              "color": "green"
+            }
+          ],
+          "request_id": "6efa1ade-b5ac-4182-95d4-dfaf0192dc57"
+        },
+        {
+          "object": "property_item",
+          "type": "select",
+          "id": "uKbI",
+          "select": {
+            "id": "14f1fda7-c050-47dd-806e-28bb05324c9e",
+            "name": "American",
+            "color": "brown"
+          },
+          "request_id": "1ae8412e-8981-4522-9a09-dcc87b769f69"
+        },
+        {
+          "object": "property_item",
+          "type": "date",
+          "id": "y%60Hh",
+          "date": {
+            "start": "2022-09-29",
+            "end": null,
+            "time_zone": null
+          },
+          "request_id": "347c18be-1c23-4d91-87b8-24bdfa7b1ec0"
+        },
+        {
+          "object": "property_item",
+          "type": "number",
+          "id": "%7BUR%5E",
+          "number": 1953,
+          "request_id": "99623054-afe9-48ed-aaba-6e53407ba0a9"
+        },
+        {
+          "object": "list",
+          "results": [
+            {
+              "object": "property_item",
+              "type": "title",
+              "id": "title",
+              "title": {
+                "type": "text",
+                "text": {
+                  "content": "Richard Stallman",
+                  "link": {
+                    "url": "https://en.wikipedia.org/wiki/Richard_Stallman"
+                  }
+                },
+                "annotations": {
+                  "bold": false,
+                  "italic": false,
+                  "strikethrough": false,
+                  "underline": false,
+                  "code": false,
+                  "color": "default"
+                },
+                "plain_text": "Richard Stallman",
+                "href": "https://en.wikipedia.org/wiki/Richard_Stallman"
+              }
+            }
+          ],
+          "next_cursor": null,
+          "has_more": false,
+          "type": "property_item",
+          "property_item": {
+            "id": "title",
+            "next_url": null,
+            "type": "title",
+            "title": {}
+          },
+          "request_id": "63121958-ae46-47f5-b345-2e75591acb9d"
+        }
+      ]
+    },
+    {
+      "object": "page",
+      "id": "3d35bef7-5ec3-4860-8235-6aa705c11711",
+      "created_time": "2022-08-16T01:56:00.000Z",
+      "last_edited_time": "2023-02-21T03:38:00.000Z",
+      "created_by": {
+        "object": "user",
+        "id": "c1400938-a445-438b-be9c-2734e5dc90a6"
+      },
+      "last_edited_by": {
+        "object": "user",
+        "id": "c1400938-a445-438b-be9c-2734e5dc90a6"
+      },
+      "cover": {
+        "type": "file",
+        "file": {
+          "url": "https://prod-files-secure.s3.us-west-2.amazonaws.com/9c5c8bd8-2326-4257-98e7-557d511c9d37/efd3c035-d4a2-4528-ac04-a8c0f36685e5/peterchen.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240124%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240124T022406Z&X-Amz-Expires=3600&X-Amz-Signature=209240c81e1a23289b482ecce33f97cfd284c4872c85a8bc99074be519c183b6&X-Amz-SignedHeaders=host&x-id=GetObject",
+          "expiry_time": "2024-01-24T03:24:06.540Z"
+        },
+        "src": "/images/page-cover-3d35bef7-5ec3-4860-8235-6aa705c11711-239dd5551a68f2297e67676b4f34a3c5bd712ddc.webp"
+      },
+      "icon": null,
+      "parent": {
+        "type": "database_id",
+        "database_id": "81781536-afc6-431d-a217-21177e7bf8e0"
+      },
+      "archived": false,
+      "properties": {
+        "Note": {
+          "id": "Jfxg",
+          "type": "rich_text",
+          "rich_text": [
+            {
+              "type": "text",
+              "text": {
+                "content": "Peter Chen known for the development of ",
+                "link": null
+              },
+              "annotations": {
+                "bold": false,
+                "italic": false,
+                "strikethrough": false,
+                "underline": false,
+                "code": false,
+                "color": "default"
+              },
+              "plain_text": "Peter Chen known for the development of ",
+              "href": null
+            },
+            {
+              "type": "text",
+              "text": {
+                "content": "entity–relationship modeling",
+                "link": {
+                  "url": "https://en.wikipedia.org/wiki/Entity%E2%80%93relationship_model"
+                }
+              },
+              "annotations": {
+                "bold": false,
+                "italic": false,
+                "strikethrough": false,
+                "underline": false,
+                "code": false,
+                "color": "default"
+              },
+              "plain_text": "entity–relationship modeling",
+              "href": "https://en.wikipedia.org/wiki/Entity%E2%80%93relationship_model"
+            },
+            {
+              "type": "text",
+              "text": {
+                "content": ".",
+                "link": null
+              },
+              "annotations": {
+                "bold": false,
+                "italic": false,
+                "strikethrough": false,
+                "underline": false,
+                "code": false,
+                "color": "default"
+              },
+              "plain_text": ".",
+              "href": null
+            }
+          ]
+        },
+        "Url": {
+          "id": "%5Dtm%60",
+          "type": "url",
+          "url": "https://en.wikipedia.org/wiki/Peter_Chen"
+        },
+        "Published": {
+          "id": "kdTh",
+          "type": "checkbox",
+          "checkbox": true
+        },
+        "Tags": {
+          "id": "mlgA",
+          "type": "multi_select",
+          "multi_select": [
+            {
+              "id": "e8276f4c-9dbb-4420-869e-0899a5187f40",
+              "name": "Entity–Relationship Model",
+              "color": "pink"
+            }
+          ]
+        },
+        "Category": {
+          "id": "uKbI",
+          "type": "select",
+          "select": {
+            "id": "14f1fda7-c050-47dd-806e-28bb05324c9e",
+            "name": "American",
+            "color": "brown"
+          }
+        },
+        "Date": {
+          "id": "y%60Hh",
+          "type": "date",
+          "date": {
+            "start": "2022-09-09",
+            "end": null,
+            "time_zone": null
+          }
+        },
+        "Born": {
+          "id": "%7BUR%5E",
+          "type": "number",
+          "number": 1947
+        },
+        "Name": {
+          "id": "title",
+          "type": "title",
+          "title": [
+            {
+              "type": "text",
+              "text": {
+                "content": "Peter Chen",
+                "link": {
+                  "url": "https://en.wikipedia.org/wiki/Peter_Chen"
+                }
+              },
+              "annotations": {
+                "bold": false,
+                "italic": false,
+                "strikethrough": false,
+                "underline": false,
+                "code": false,
+                "color": "default"
+              },
+              "plain_text": "Peter Chen",
+              "href": "https://en.wikipedia.org/wiki/Peter_Chen"
+            }
+          ]
+        }
+      },
+      "url": "https://www.notion.so/Peter-Chen-3d35bef75ec3486082356aa705c11711",
+      "public_url": "https://linyows.notion.site/Peter-Chen-3d35bef75ec3486082356aa705c11711",
+      "property_items": [
+        {
+          "object": "list",
+          "results": [
+            {
+              "object": "property_item",
+              "type": "rich_text",
+              "id": "Jfxg",
+              "rich_text": {
+                "type": "text",
+                "text": {
+                  "content": "Peter Chen known for the development of ",
+                  "link": null
+                },
+                "annotations": {
+                  "bold": false,
+                  "italic": false,
+                  "strikethrough": false,
+                  "underline": false,
+                  "code": false,
+                  "color": "default"
+                },
+                "plain_text": "Peter Chen known for the development of ",
+                "href": null
+              }
+            },
+            {
+              "object": "property_item",
+              "type": "rich_text",
+              "id": "Jfxg",
+              "rich_text": {
+                "type": "text",
+                "text": {
+                  "content": "entity–relationship modeling",
+                  "link": {
+                    "url": "https://en.wikipedia.org/wiki/Entity%E2%80%93relationship_model"
+                  }
+                },
+                "annotations": {
+                  "bold": false,
+                  "italic": false,
+                  "strikethrough": false,
+                  "underline": false,
+                  "code": false,
+                  "color": "default"
+                },
+                "plain_text": "entity–relationship modeling",
+                "href": "https://en.wikipedia.org/wiki/Entity%E2%80%93relationship_model"
+              }
+            },
+            {
+              "object": "property_item",
+              "type": "rich_text",
+              "id": "Jfxg",
+              "rich_text": {
+                "type": "text",
+                "text": {
+                  "content": ".",
+                  "link": null
+                },
+                "annotations": {
+                  "bold": false,
+                  "italic": false,
+                  "strikethrough": false,
+                  "underline": false,
+                  "code": false,
+                  "color": "default"
+                },
+                "plain_text": ".",
+                "href": null
+              }
+            }
+          ],
+          "next_cursor": null,
+          "has_more": false,
+          "type": "property_item",
+          "property_item": {
+            "id": "Jfxg",
+            "next_url": null,
+            "type": "rich_text",
+            "rich_text": {}
+          },
+          "request_id": "d2e9d257-79a9-41ba-990b-5933eb5648d7"
+        },
+        {
+          "object": "property_item",
+          "type": "url",
+          "id": "%5Dtm%60",
+          "url": "https://en.wikipedia.org/wiki/Peter_Chen",
+          "request_id": "ce460564-50d9-43c4-9fe4-f8bd496d9158"
+        },
+        {
+          "object": "property_item",
+          "type": "checkbox",
+          "id": "kdTh",
+          "checkbox": true,
+          "request_id": "8ba6ad1e-19f1-49c8-b7a9-fa419a2f6035"
+        },
+        {
+          "object": "property_item",
+          "type": "multi_select",
+          "id": "mlgA",
+          "multi_select": [
+            {
+              "id": "e8276f4c-9dbb-4420-869e-0899a5187f40",
+              "name": "Entity–Relationship Model",
+              "color": "pink"
+            }
+          ],
+          "request_id": "0362d908-365b-4e23-aaa6-174db911c980"
+        },
+        {
+          "object": "property_item",
+          "type": "select",
+          "id": "uKbI",
+          "select": {
+            "id": "14f1fda7-c050-47dd-806e-28bb05324c9e",
+            "name": "American",
+            "color": "brown"
+          },
+          "request_id": "9832554d-f5b6-43fb-8118-9c8037bfcb82"
+        },
+        {
+          "object": "property_item",
+          "type": "date",
+          "id": "y%60Hh",
+          "date": {
+            "start": "2022-09-09",
+            "end": null,
+            "time_zone": null
+          },
+          "request_id": "02b2a2d4-12c0-4e17-80bb-7c689cec4733"
+        },
+        {
+          "object": "property_item",
+          "type": "number",
+          "id": "%7BUR%5E",
+          "number": 1947,
+          "request_id": "feeb1689-4596-449e-a071-ce8ab2b07b45"
+        },
+        {
+          "object": "list",
+          "results": [
+            {
+              "object": "property_item",
+              "type": "title",
+              "id": "title",
+              "title": {
+                "type": "text",
+                "text": {
+                  "content": "Peter Chen",
+                  "link": {
+                    "url": "https://en.wikipedia.org/wiki/Peter_Chen"
+                  }
+                },
+                "annotations": {
+                  "bold": false,
+                  "italic": false,
+                  "strikethrough": false,
+                  "underline": false,
+                  "code": false,
+                  "color": "default"
+                },
+                "plain_text": "Peter Chen",
+                "href": "https://en.wikipedia.org/wiki/Peter_Chen"
+              }
+            }
+          ],
+          "next_cursor": null,
+          "has_more": false,
+          "type": "property_item",
+          "property_item": {
+            "id": "title",
+            "next_url": null,
+            "type": "title",
+            "title": {}
+          },
+          "request_id": "44ff91a3-9737-4d0e-9d26-6559ec60a926"
+        }
+      ]
+    },
+    {
+      "object": "page",
+      "id": "be549e10-30b2-4c2d-b38a-6c7b0dd898f5",
+      "created_time": "2022-08-16T01:59:00.000Z",
+      "last_edited_time": "2023-02-21T03:37:00.000Z",
+      "created_by": {
+        "object": "user",
+        "id": "c1400938-a445-438b-be9c-2734e5dc90a6"
+      },
+      "last_edited_by": {
+        "object": "user",
+        "id": "c1400938-a445-438b-be9c-2734e5dc90a6"
+      },
+      "cover": {
+        "type": "file",
+        "file": {
+          "url": "https://prod-files-secure.s3.us-west-2.amazonaws.com/9c5c8bd8-2326-4257-98e7-557d511c9d37/e44c5b16-2c08-4fa9-8c5c-2d0c7bdaf352/1024px-Edsger_Wybe_Dijkstra.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240124%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240124T022406Z&X-Amz-Expires=3600&X-Amz-Signature=1495cfb9f97737e511451764f50afeadc496776f88ce530e2a71fc1fedd5a01e&X-Amz-SignedHeaders=host&x-id=GetObject",
+          "expiry_time": "2024-01-24T03:24:06.541Z"
+        },
+        "src": "/images/page-cover-be549e10-30b2-4c2d-b38a-6c7b0dd898f5-678fbf564e3c2559c382afbfda2a41baf1171da0.webp"
+      },
+      "icon": null,
+      "parent": {
+        "type": "database_id",
+        "database_id": "81781536-afc6-431d-a217-21177e7bf8e0"
+      },
+      "archived": false,
+      "properties": {
+        "Note": {
+          "id": "Jfxg",
+          "type": "rich_text",
+          "rich_text": [
+            {
+              "type": "text",
+              "text": {
+                "content": "Edsger W. Dijkstra developed the framework for a form of structured programming.",
+                "link": null
+              },
+              "annotations": {
+                "bold": false,
+                "italic": false,
+                "strikethrough": false,
+                "underline": false,
+                "code": false,
+                "color": "default"
+              },
+              "plain_text": "Edsger W. Dijkstra developed the framework for a form of structured programming.",
+              "href": null
+            }
+          ]
+        },
+        "Url": {
+          "id": "%5Dtm%60",
+          "type": "url",
+          "url": "https://en.wikipedia.org/wiki/Edsger_W._Dijkstra"
+        },
+        "Published": {
+          "id": "kdTh",
+          "type": "checkbox",
+          "checkbox": true
+        },
+        "Tags": {
+          "id": "mlgA",
+          "type": "multi_select",
+          "multi_select": [
+            {
+              "id": "1f1b1571-4d7b-4dca-8a06-9f9575a665f9",
+              "name": "Distributed Computing",
+              "color": "green"
+            },
+            {
+              "id": "6f8c5495-53a5-4bc9-9305-0a532ca3d400",
+              "name": "Structured Programming",
+              "color": "gray"
+            }
+          ]
+        },
+        "Category": {
+          "id": "uKbI",
+          "type": "select",
+          "select": {
+            "id": "848ef319-fb42-4a1e-9d31-9b2e67aa9280",
+            "name": "Dutch",
+            "color": "purple"
+          }
+        },
+        "Date": {
+          "id": "y%60Hh",
+          "type": "date",
+          "date": {
+            "start": "2022-08-16",
+            "end": null,
+            "time_zone": null
+          }
+        },
+        "Born": {
+          "id": "%7BUR%5E",
+          "type": "number",
+          "number": 1930
+        },
+        "Name": {
+          "id": "title",
+          "type": "title",
+          "title": [
+            {
+              "type": "text",
+              "text": {
+                "content": "Edsger W. Dijkstra",
+                "link": {
+                  "url": "https://en.wikipedia.org/wiki/Edsger_W._Dijkstra"
+                }
+              },
+              "annotations": {
+                "bold": false,
+                "italic": false,
+                "strikethrough": false,
+                "underline": false,
+                "code": false,
+                "color": "default"
+              },
+              "plain_text": "Edsger W. Dijkstra",
+              "href": "https://en.wikipedia.org/wiki/Edsger_W._Dijkstra"
+            }
+          ]
+        }
+      },
+      "url": "https://www.notion.so/Edsger-W-Dijkstra-be549e1030b24c2db38a6c7b0dd898f5",
+      "public_url": "https://linyows.notion.site/Edsger-W-Dijkstra-be549e1030b24c2db38a6c7b0dd898f5",
+      "property_items": [
+        {
+          "object": "list",
+          "results": [
+            {
+              "object": "property_item",
+              "type": "rich_text",
+              "id": "Jfxg",
+              "rich_text": {
+                "type": "text",
+                "text": {
+                  "content": "Edsger W. Dijkstra developed the framework for a form of structured programming.",
+                  "link": null
+                },
+                "annotations": {
+                  "bold": false,
+                  "italic": false,
+                  "strikethrough": false,
+                  "underline": false,
+                  "code": false,
+                  "color": "default"
+                },
+                "plain_text": "Edsger W. Dijkstra developed the framework for a form of structured programming.",
+                "href": null
+              }
+            }
+          ],
+          "next_cursor": null,
+          "has_more": false,
+          "type": "property_item",
+          "property_item": {
+            "id": "Jfxg",
+            "next_url": null,
+            "type": "rich_text",
+            "rich_text": {}
+          },
+          "request_id": "288718a6-0bce-46b3-b685-0912ca5729f3"
+        },
+        {
+          "object": "property_item",
+          "type": "url",
+          "id": "%5Dtm%60",
+          "url": "https://en.wikipedia.org/wiki/Edsger_W._Dijkstra",
+          "request_id": "327d14d7-ecbf-4470-82a2-b194c46d5e5e"
+        },
+        {
+          "object": "property_item",
+          "type": "checkbox",
+          "id": "kdTh",
+          "checkbox": true,
+          "request_id": "70d41afb-c7f1-4b33-865e-f14c1a7295e7"
+        },
+        {
+          "object": "property_item",
+          "type": "multi_select",
+          "id": "mlgA",
+          "multi_select": [
+            {
+              "id": "1f1b1571-4d7b-4dca-8a06-9f9575a665f9",
+              "name": "Distributed Computing",
+              "color": "green"
+            },
+            {
+              "id": "6f8c5495-53a5-4bc9-9305-0a532ca3d400",
+              "name": "Structured Programming",
+              "color": "gray"
+            }
+          ],
+          "request_id": "75d71c55-23d8-417e-935a-e185b7ceb237"
+        },
+        {
+          "object": "property_item",
+          "type": "select",
+          "id": "uKbI",
+          "select": {
+            "id": "848ef319-fb42-4a1e-9d31-9b2e67aa9280",
+            "name": "Dutch",
+            "color": "purple"
+          },
+          "request_id": "6bd4fc2b-84b3-4de3-93bc-89d21a7cfbd2"
+        },
+        {
+          "object": "property_item",
+          "type": "date",
+          "id": "y%60Hh",
+          "date": {
+            "start": "2022-08-16",
+            "end": null,
+            "time_zone": null
+          },
+          "request_id": "5eaff2b2-028f-482f-8819-99ec28b8d62e"
+        },
+        {
+          "object": "property_item",
+          "type": "number",
+          "id": "%7BUR%5E",
+          "number": 1930,
+          "request_id": "f2cf0d26-ef7a-40fa-9814-480ea0c3abe9"
+        },
+        {
+          "object": "list",
+          "results": [
+            {
+              "object": "property_item",
+              "type": "title",
+              "id": "title",
+              "title": {
+                "type": "text",
+                "text": {
+                  "content": "Edsger W. Dijkstra",
+                  "link": {
+                    "url": "https://en.wikipedia.org/wiki/Edsger_W._Dijkstra"
+                  }
+                },
+                "annotations": {
+                  "bold": false,
+                  "italic": false,
+                  "strikethrough": false,
+                  "underline": false,
+                  "code": false,
+                  "color": "default"
+                },
+                "plain_text": "Edsger W. Dijkstra",
+                "href": "https://en.wikipedia.org/wiki/Edsger_W._Dijkstra"
+              }
+            }
+          ],
+          "next_cursor": null,
+          "has_more": false,
+          "type": "property_item",
+          "property_item": {
+            "id": "title",
+            "next_url": null,
+            "type": "title",
+            "title": {}
+          },
+          "request_id": "0108b2cf-5032-4d1d-a5f3-11a7c9858846"
+        }
+      ]
+    },
+    {
+      "object": "page",
+      "id": "2c1c3b86-4642-4d97-9042-19e916298fd9",
+      "created_time": "2022-08-14T13:59:00.000Z",
+      "last_edited_time": "2023-02-21T03:37:00.000Z",
+      "created_by": {
+        "object": "user",
+        "id": "c1400938-a445-438b-be9c-2734e5dc90a6"
+      },
+      "last_edited_by": {
+        "object": "user",
+        "id": "c1400938-a445-438b-be9c-2734e5dc90a6"
+      },
+      "cover": {
+        "type": "file",
+        "file": {
+          "url": "https://prod-files-secure.s3.us-west-2.amazonaws.com/9c5c8bd8-2326-4257-98e7-557d511c9d37/015c6030-6758-4326-b7ba-33b9a1a2c775/Fred_Brooks.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240124%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240124T022406Z&X-Amz-Expires=3600&X-Amz-Signature=261a54a56f957d811ef208d8fb55a4335418ce17d90912725c91f011b7316a03&X-Amz-SignedHeaders=host&x-id=GetObject",
+          "expiry_time": "2024-01-24T03:24:06.541Z"
+        },
+        "src": "/images/page-cover-2c1c3b86-4642-4d97-9042-19e916298fd9-0aa72a3ccb7d42280d843e43e580708d40eebdcd.webp"
+      },
+      "icon": null,
+      "parent": {
+        "type": "database_id",
+        "database_id": "81781536-afc6-431d-a217-21177e7bf8e0"
+      },
+      "archived": false,
+      "properties": {
+        "Note": {
+          "id": "Jfxg",
+          "type": "rich_text",
+          "rich_text": [
+            {
+              "type": "text",
+              "text": {
+                "content": "Fred Brooks best known for managing the development of ",
+                "link": null
+              },
+              "annotations": {
+                "bold": false,
+                "italic": false,
+                "strikethrough": false,
+                "underline": false,
+                "code": false,
+                "color": "default"
+              },
+              "plain_text": "Fred Brooks best known for managing the development of ",
+              "href": null
+            },
+            {
+              "type": "text",
+              "text": {
+                "content": "OS/360",
+                "link": {
+                  "url": "https://en.wikipedia.org/wiki/OS/360"
+                }
+              },
+              "annotations": {
+                "bold": false,
+                "italic": false,
+                "strikethrough": false,
+                "underline": false,
+                "code": false,
+                "color": "default"
+              },
+              "plain_text": "OS/360",
+              "href": "https://en.wikipedia.org/wiki/OS/360"
+            },
+            {
+              "type": "text",
+              "text": {
+                "content": ".",
+                "link": null
+              },
+              "annotations": {
+                "bold": false,
+                "italic": false,
+                "strikethrough": false,
+                "underline": false,
+                "code": false,
+                "color": "default"
+              },
+              "plain_text": ".",
+              "href": null
+            }
+          ]
+        },
+        "Url": {
+          "id": "%5Dtm%60",
+          "type": "url",
+          "url": "https://en.wikipedia.org/wiki/Fred_Brooks"
+        },
+        "Published": {
+          "id": "kdTh",
+          "type": "checkbox",
+          "checkbox": true
+        },
+        "Tags": {
+          "id": "mlgA",
+          "type": "multi_select",
+          "multi_select": [
+            {
+              "id": "6f15695f-6b34-4d48-80a3-2745776af57f",
+              "name": "OS/360",
+              "color": "brown"
+            }
+          ]
+        },
+        "Category": {
+          "id": "uKbI",
+          "type": "select",
+          "select": {
+            "id": "14f1fda7-c050-47dd-806e-28bb05324c9e",
+            "name": "American",
+            "color": "brown"
+          }
+        },
+        "Date": {
+          "id": "y%60Hh",
+          "type": "date",
+          "date": {
+            "start": "2022-08-10",
+            "end": null,
+            "time_zone": null
+          }
+        },
+        "Born": {
+          "id": "%7BUR%5E",
+          "type": "number",
+          "number": 1931
+        },
+        "Name": {
+          "id": "title",
+          "type": "title",
+          "title": [
+            {
+              "type": "text",
+              "text": {
+                "content": "Fred Brooks",
+                "link": {
+                  "url": "https://en.wikipedia.org/wiki/Fred_Brooks"
+                }
+              },
+              "annotations": {
+                "bold": false,
+                "italic": false,
+                "strikethrough": false,
+                "underline": false,
+                "code": false,
+                "color": "default"
+              },
+              "plain_text": "Fred Brooks",
+              "href": "https://en.wikipedia.org/wiki/Fred_Brooks"
+            }
+          ]
+        }
+      },
+      "url": "https://www.notion.so/Fred-Brooks-2c1c3b8646424d97904219e916298fd9",
+      "public_url": "https://linyows.notion.site/Fred-Brooks-2c1c3b8646424d97904219e916298fd9",
+      "property_items": [
+        {
+          "object": "list",
+          "results": [
+            {
+              "object": "property_item",
+              "type": "rich_text",
+              "id": "Jfxg",
+              "rich_text": {
+                "type": "text",
+                "text": {
+                  "content": "Fred Brooks best known for managing the development of ",
+                  "link": null
+                },
+                "annotations": {
+                  "bold": false,
+                  "italic": false,
+                  "strikethrough": false,
+                  "underline": false,
+                  "code": false,
+                  "color": "default"
+                },
+                "plain_text": "Fred Brooks best known for managing the development of ",
+                "href": null
+              }
+            },
+            {
+              "object": "property_item",
+              "type": "rich_text",
+              "id": "Jfxg",
+              "rich_text": {
+                "type": "text",
+                "text": {
+                  "content": "OS/360",
+                  "link": {
+                    "url": "https://en.wikipedia.org/wiki/OS/360"
+                  }
+                },
+                "annotations": {
+                  "bold": false,
+                  "italic": false,
+                  "strikethrough": false,
+                  "underline": false,
+                  "code": false,
+                  "color": "default"
+                },
+                "plain_text": "OS/360",
+                "href": "https://en.wikipedia.org/wiki/OS/360"
+              }
+            },
+            {
+              "object": "property_item",
+              "type": "rich_text",
+              "id": "Jfxg",
+              "rich_text": {
+                "type": "text",
+                "text": {
+                  "content": ".",
+                  "link": null
+                },
+                "annotations": {
+                  "bold": false,
+                  "italic": false,
+                  "strikethrough": false,
+                  "underline": false,
+                  "code": false,
+                  "color": "default"
+                },
+                "plain_text": ".",
+                "href": null
+              }
+            }
+          ],
+          "next_cursor": null,
+          "has_more": false,
+          "type": "property_item",
+          "property_item": {
+            "id": "Jfxg",
+            "next_url": null,
+            "type": "rich_text",
+            "rich_text": {}
+          },
+          "request_id": "56714576-6ec6-4e76-ac1e-8c8bbf23572c"
+        },
+        {
+          "object": "property_item",
+          "type": "url",
+          "id": "%5Dtm%60",
+          "url": "https://en.wikipedia.org/wiki/Fred_Brooks",
+          "request_id": "27898c04-6805-4b18-ba3f-2d569d5bfcca"
+        },
+        {
+          "object": "property_item",
+          "type": "checkbox",
+          "id": "kdTh",
+          "checkbox": true,
+          "request_id": "962f8fcf-afe3-4bdb-a425-6058904ece0f"
+        },
+        {
+          "object": "property_item",
+          "type": "multi_select",
+          "id": "mlgA",
+          "multi_select": [
+            {
+              "id": "6f15695f-6b34-4d48-80a3-2745776af57f",
+              "name": "OS/360",
+              "color": "brown"
+            }
+          ],
+          "request_id": "d60ae9e6-4bf7-41a1-81d2-dc3ab9e52090"
+        },
+        {
+          "object": "property_item",
+          "type": "select",
+          "id": "uKbI",
+          "select": {
+            "id": "14f1fda7-c050-47dd-806e-28bb05324c9e",
+            "name": "American",
+            "color": "brown"
+          },
+          "request_id": "9d4bf4a6-5069-4f5f-962c-d74b2b4a86dd"
+        },
+        {
+          "object": "property_item",
+          "type": "date",
+          "id": "y%60Hh",
+          "date": {
+            "start": "2022-08-10",
+            "end": null,
+            "time_zone": null
+          },
+          "request_id": "79b5a1e6-cfa7-4682-8f12-b6e8c0830876"
+        },
+        {
+          "object": "property_item",
+          "type": "number",
+          "id": "%7BUR%5E",
+          "number": 1931,
+          "request_id": "659d0c8a-9f55-4d64-b1b6-dce2799722cd"
+        },
+        {
+          "object": "list",
+          "results": [
+            {
+              "object": "property_item",
+              "type": "title",
+              "id": "title",
+              "title": {
+                "type": "text",
+                "text": {
+                  "content": "Fred Brooks",
+                  "link": {
+                    "url": "https://en.wikipedia.org/wiki/Fred_Brooks"
+                  }
+                },
+                "annotations": {
+                  "bold": false,
+                  "italic": false,
+                  "strikethrough": false,
+                  "underline": false,
+                  "code": false,
+                  "color": "default"
+                },
+                "plain_text": "Fred Brooks",
+                "href": "https://en.wikipedia.org/wiki/Fred_Brooks"
+              }
+            }
+          ],
+          "next_cursor": null,
+          "has_more": false,
+          "type": "property_item",
+          "property_item": {
+            "id": "title",
+            "next_url": null,
+            "type": "title",
+            "title": {}
+          },
+          "request_id": "e67c7b00-ae75-40d7-8040-d43477b73b65"
+        }
+      ]
+    },
+    {
+      "object": "page",
+      "id": "fcf85465-0caa-402f-aaf6-e4deb4f6c9d8",
+      "created_time": "2022-08-14T13:59:00.000Z",
+      "last_edited_time": "2023-02-21T03:36:00.000Z",
+      "created_by": {
+        "object": "user",
+        "id": "c1400938-a445-438b-be9c-2734e5dc90a6"
+      },
+      "last_edited_by": {
+        "object": "user",
+        "id": "c1400938-a445-438b-be9c-2734e5dc90a6"
+      },
+      "cover": {
+        "type": "file",
+        "file": {
+          "url": "https://prod-files-secure.s3.us-west-2.amazonaws.com/9c5c8bd8-2326-4257-98e7-557d511c9d37/0b9379d6-fad9-4cf1-a497-5e4804c43a2d/Charles_Bachman_2012.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240124%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240124T022406Z&X-Amz-Expires=3600&X-Amz-Signature=d4edd7efaf6026a4a3c1ab3e4ff407ada931de351f373e2340f23718b4e579de&X-Amz-SignedHeaders=host&x-id=GetObject",
+          "expiry_time": "2024-01-24T03:24:06.541Z"
+        },
+        "src": "/images/page-cover-fcf85465-0caa-402f-aaf6-e4deb4f6c9d8-d38ffeed87aaafe83b08077209c4dd893807e594.webp"
+      },
+      "icon": null,
+      "parent": {
+        "type": "database_id",
+        "database_id": "81781536-afc6-431d-a217-21177e7bf8e0"
+      },
+      "archived": false,
+      "properties": {
+        "Note": {
+          "id": "Jfxg",
+          "type": "rich_text",
+          "rich_text": [
+            {
+              "type": "text",
+              "text": {
+                "content": "Charles Bachman is particularly known for his work in the area of ",
+                "link": null
+              },
+              "annotations": {
+                "bold": false,
+                "italic": false,
+                "strikethrough": false,
+                "underline": false,
+                "code": false,
+                "color": "default"
+              },
+              "plain_text": "Charles Bachman is particularly known for his work in the area of ",
+              "href": null
+            },
+            {
+              "type": "text",
+              "text": {
+                "content": "databases",
+                "link": {
+                  "url": "https://en.wikipedia.org/wiki/Databases"
+                }
+              },
+              "annotations": {
+                "bold": false,
+                "italic": false,
+                "strikethrough": false,
+                "underline": false,
+                "code": false,
+                "color": "default"
+              },
+              "plain_text": "databases",
+              "href": "https://en.wikipedia.org/wiki/Databases"
+            },
+            {
+              "type": "text",
+              "text": {
+                "content": ".",
+                "link": null
+              },
+              "annotations": {
+                "bold": false,
+                "italic": false,
+                "strikethrough": false,
+                "underline": false,
+                "code": false,
+                "color": "default"
+              },
+              "plain_text": ".",
+              "href": null
+            }
+          ]
+        },
+        "Url": {
+          "id": "%5Dtm%60",
+          "type": "url",
+          "url": "https://en.wikipedia.org/wiki/Charles_Bachman"
+        },
+        "Published": {
+          "id": "kdTh",
+          "type": "checkbox",
+          "checkbox": true
+        },
+        "Tags": {
+          "id": "mlgA",
+          "type": "multi_select",
+          "multi_select": [
+            {
+              "id": "41ac519a-ede3-49c7-94c9-1f0d0d86ca16",
+              "name": "Integrated Data Store",
+              "color": "red"
+            }
+          ]
+        },
+        "Category": {
+          "id": "uKbI",
+          "type": "select",
+          "select": {
+            "id": "14f1fda7-c050-47dd-806e-28bb05324c9e",
+            "name": "American",
+            "color": "brown"
+          }
+        },
+        "Date": {
+          "id": "y%60Hh",
+          "type": "date",
+          "date": {
+            "start": "2022-08-01",
+            "end": null,
+            "time_zone": null
+          }
+        },
+        "Born": {
+          "id": "%7BUR%5E",
+          "type": "number",
+          "number": 1924
+        },
+        "Name": {
+          "id": "title",
+          "type": "title",
+          "title": [
+            {
+              "type": "text",
+              "text": {
+                "content": "Charles Bachman",
+                "link": {
+                  "url": "https://en.wikipedia.org/wiki/Charles_Bachman"
+                }
+              },
+              "annotations": {
+                "bold": false,
+                "italic": false,
+                "strikethrough": false,
+                "underline": false,
+                "code": false,
+                "color": "default"
+              },
+              "plain_text": "Charles Bachman",
+              "href": "https://en.wikipedia.org/wiki/Charles_Bachman"
+            }
+          ]
+        }
+      },
+      "url": "https://www.notion.so/Charles-Bachman-fcf854650caa402faaf6e4deb4f6c9d8",
+      "public_url": "https://linyows.notion.site/Charles-Bachman-fcf854650caa402faaf6e4deb4f6c9d8",
+      "property_items": [
+        {
+          "object": "list",
+          "results": [
+            {
+              "object": "property_item",
+              "type": "rich_text",
+              "id": "Jfxg",
+              "rich_text": {
+                "type": "text",
+                "text": {
+                  "content": "Charles Bachman is particularly known for his work in the area of ",
+                  "link": null
+                },
+                "annotations": {
+                  "bold": false,
+                  "italic": false,
+                  "strikethrough": false,
+                  "underline": false,
+                  "code": false,
+                  "color": "default"
+                },
+                "plain_text": "Charles Bachman is particularly known for his work in the area of ",
+                "href": null
+              }
+            },
+            {
+              "object": "property_item",
+              "type": "rich_text",
+              "id": "Jfxg",
+              "rich_text": {
+                "type": "text",
+                "text": {
+                  "content": "databases",
+                  "link": {
+                    "url": "https://en.wikipedia.org/wiki/Databases"
+                  }
+                },
+                "annotations": {
+                  "bold": false,
+                  "italic": false,
+                  "strikethrough": false,
+                  "underline": false,
+                  "code": false,
+                  "color": "default"
+                },
+                "plain_text": "databases",
+                "href": "https://en.wikipedia.org/wiki/Databases"
+              }
+            },
+            {
+              "object": "property_item",
+              "type": "rich_text",
+              "id": "Jfxg",
+              "rich_text": {
+                "type": "text",
+                "text": {
+                  "content": ".",
+                  "link": null
+                },
+                "annotations": {
+                  "bold": false,
+                  "italic": false,
+                  "strikethrough": false,
+                  "underline": false,
+                  "code": false,
+                  "color": "default"
+                },
+                "plain_text": ".",
+                "href": null
+              }
+            }
+          ],
+          "next_cursor": null,
+          "has_more": false,
+          "type": "property_item",
+          "property_item": {
+            "id": "Jfxg",
+            "next_url": null,
+            "type": "rich_text",
+            "rich_text": {}
+          },
+          "request_id": "ca43e416-1cb1-428a-b947-672bc442515c"
+        },
+        {
+          "object": "property_item",
+          "type": "url",
+          "id": "%5Dtm%60",
+          "url": "https://en.wikipedia.org/wiki/Charles_Bachman",
+          "request_id": "d76c636c-7794-4631-a9ac-2dbee4329a3d"
+        },
+        {
+          "object": "property_item",
+          "type": "checkbox",
+          "id": "kdTh",
+          "checkbox": true,
+          "request_id": "1e9609d1-14b8-4d35-aad8-eed06724d566"
+        },
+        {
+          "object": "property_item",
+          "type": "multi_select",
+          "id": "mlgA",
+          "multi_select": [
+            {
+              "id": "41ac519a-ede3-49c7-94c9-1f0d0d86ca16",
+              "name": "Integrated Data Store",
+              "color": "red"
+            }
+          ],
+          "request_id": "26481c94-b16a-468c-b2f5-3a026f25ebfb"
+        },
+        {
+          "object": "property_item",
+          "type": "select",
+          "id": "uKbI",
+          "select": {
+            "id": "14f1fda7-c050-47dd-806e-28bb05324c9e",
+            "name": "American",
+            "color": "brown"
+          },
+          "request_id": "e13eadc3-f177-4f4b-8dee-7210919f8a84"
+        },
+        {
+          "object": "property_item",
+          "type": "date",
+          "id": "y%60Hh",
+          "date": {
+            "start": "2022-08-01",
+            "end": null,
+            "time_zone": null
+          },
+          "request_id": "344980a3-1323-4ca4-be01-3c3ba873f4a8"
+        },
+        {
+          "object": "property_item",
+          "type": "number",
+          "id": "%7BUR%5E",
+          "number": 1924,
+          "request_id": "4b9030e7-eae7-46aa-80b7-02511935e9e2"
+        },
+        {
+          "object": "list",
+          "results": [
+            {
+              "object": "property_item",
+              "type": "title",
+              "id": "title",
+              "title": {
+                "type": "text",
+                "text": {
+                  "content": "Charles Bachman",
+                  "link": {
+                    "url": "https://en.wikipedia.org/wiki/Charles_Bachman"
+                  }
+                },
+                "annotations": {
+                  "bold": false,
+                  "italic": false,
+                  "strikethrough": false,
+                  "underline": false,
+                  "code": false,
+                  "color": "default"
+                },
+                "plain_text": "Charles Bachman",
+                "href": "https://en.wikipedia.org/wiki/Charles_Bachman"
+              }
+            }
+          ],
+          "next_cursor": null,
+          "has_more": false,
+          "type": "property_item",
+          "property_item": {
+            "id": "title",
+            "next_url": null,
+            "type": "title",
+            "title": {}
+          },
+          "request_id": "cfefabd9-5f32-4eae-8333-ae55f536359a"
+        }
+      ]
+    },
+    {
+      "object": "page",
+      "id": "42be4a98-826c-421d-a654-dd7fa9087b2c",
+      "created_time": "2022-08-16T01:59:00.000Z",
+      "last_edited_time": "2023-02-21T03:37:00.000Z",
+      "created_by": {
+        "object": "user",
+        "id": "c1400938-a445-438b-be9c-2734e5dc90a6"
+      },
+      "last_edited_by": {
+        "object": "user",
+        "id": "c1400938-a445-438b-be9c-2734e5dc90a6"
+      },
+      "cover": {
+        "type": "file",
+        "file": {
+          "url": "https://prod-files-secure.s3.us-west-2.amazonaws.com/9c5c8bd8-2326-4257-98e7-557d511c9d37/432856a1-33ec-4c68-a30c-55aff1f6d07f/David_Parnas.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240124%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240124T022406Z&X-Amz-Expires=3600&X-Amz-Signature=897380e30716e10a51928dd64222f5729db876820baf4029701c5e736c48951a&X-Amz-SignedHeaders=host&x-id=GetObject",
+          "expiry_time": "2024-01-24T03:24:06.542Z"
+        },
+        "src": "/images/page-cover-42be4a98-826c-421d-a654-dd7fa9087b2c-0444b2cb66013f5993d92ccaedb782d73dd2538c.webp"
+      },
+      "icon": null,
+      "parent": {
+        "type": "database_id",
+        "database_id": "81781536-afc6-431d-a217-21177e7bf8e0"
+      },
+      "archived": false,
+      "properties": {
+        "Note": {
+          "id": "Jfxg",
+          "type": "rich_text",
+          "rich_text": [
+            {
+              "type": "text",
+              "text": {
+                "content": "David Parnas developed the concept of ",
+                "link": null
+              },
+              "annotations": {
+                "bold": false,
+                "italic": false,
+                "strikethrough": false,
+                "underline": false,
+                "code": false,
+                "color": "default"
+              },
+              "plain_text": "David Parnas developed the concept of ",
+              "href": null
+            },
+            {
+              "type": "text",
+              "text": {
+                "content": "information hiding",
+                "link": {
+                  "url": "https://en.wikipedia.org/wiki/Information_hiding"
+                }
+              },
+              "annotations": {
+                "bold": false,
+                "italic": false,
+                "strikethrough": false,
+                "underline": false,
+                "code": false,
+                "color": "default"
+              },
+              "plain_text": "information hiding",
+              "href": "https://en.wikipedia.org/wiki/Information_hiding"
+            },
+            {
+              "type": "text",
+              "text": {
+                "content": "\n in ",
+                "link": null
+              },
+              "annotations": {
+                "bold": false,
+                "italic": false,
+                "strikethrough": false,
+                "underline": false,
+                "code": false,
+                "color": "default"
+              },
+              "plain_text": "\n in ",
+              "href": null
+            },
+            {
+              "type": "text",
+              "text": {
+                "content": "modular programming",
+                "link": {
+                  "url": "https://en.wikipedia.org/wiki/Modular_programming"
+                }
+              },
+              "annotations": {
+                "bold": false,
+                "italic": false,
+                "strikethrough": false,
+                "underline": false,
+                "code": false,
+                "color": "default"
+              },
+              "plain_text": "modular programming",
+              "href": "https://en.wikipedia.org/wiki/Modular_programming"
+            },
+            {
+              "type": "text",
+              "text": {
+                "content": ".",
+                "link": null
+              },
+              "annotations": {
+                "bold": false,
+                "italic": false,
+                "strikethrough": false,
+                "underline": false,
+                "code": false,
+                "color": "default"
+              },
+              "plain_text": ".",
+              "href": null
+            }
+          ]
+        },
+        "Url": {
+          "id": "%5Dtm%60",
+          "type": "url",
+          "url": "https://en.wikipedia.org/wiki/David_Parnas"
+        },
+        "Published": {
+          "id": "kdTh",
+          "type": "checkbox",
+          "checkbox": true
+        },
+        "Tags": {
+          "id": "mlgA",
+          "type": "multi_select",
+          "multi_select": [
+            {
+              "id": "d80ac26b-11fc-4506-93fc-aacfab157cb4",
+              "name": "Modular Programming",
+              "color": "yellow"
+            }
+          ]
+        },
+        "Category": {
+          "id": "uKbI",
+          "type": "select",
+          "select": {
+            "id": "640f8079-bbb8-4690-80d5-e073e2bcf039",
+            "name": "Canadian",
+            "color": "orange"
+          }
+        },
+        "Date": {
+          "id": "y%60Hh",
+          "type": "date",
+          "date": {
+            "start": "2022-05-10",
+            "end": null,
+            "time_zone": null
+          }
+        },
+        "Born": {
+          "id": "%7BUR%5E",
+          "type": "number",
+          "number": 1941
+        },
+        "Name": {
+          "id": "title",
+          "type": "title",
+          "title": [
+            {
+              "type": "text",
+              "text": {
+                "content": "David Parnas",
+                "link": {
+                  "url": "https://en.wikipedia.org/wiki/David_Parnas"
+                }
+              },
+              "annotations": {
+                "bold": false,
+                "italic": false,
+                "strikethrough": false,
+                "underline": false,
+                "code": false,
+                "color": "default"
+              },
+              "plain_text": "David Parnas",
+              "href": "https://en.wikipedia.org/wiki/David_Parnas"
+            }
+          ]
+        }
+      },
+      "url": "https://www.notion.so/David-Parnas-42be4a98826c421da654dd7fa9087b2c",
+      "public_url": "https://linyows.notion.site/David-Parnas-42be4a98826c421da654dd7fa9087b2c",
+      "property_items": [
+        {
+          "object": "list",
+          "results": [
+            {
+              "object": "property_item",
+              "type": "rich_text",
+              "id": "Jfxg",
+              "rich_text": {
+                "type": "text",
+                "text": {
+                  "content": "David Parnas developed the concept of ",
+                  "link": null
+                },
+                "annotations": {
+                  "bold": false,
+                  "italic": false,
+                  "strikethrough": false,
+                  "underline": false,
+                  "code": false,
+                  "color": "default"
+                },
+                "plain_text": "David Parnas developed the concept of ",
+                "href": null
+              }
+            },
+            {
+              "object": "property_item",
+              "type": "rich_text",
+              "id": "Jfxg",
+              "rich_text": {
+                "type": "text",
+                "text": {
+                  "content": "information hiding",
+                  "link": {
+                    "url": "https://en.wikipedia.org/wiki/Information_hiding"
+                  }
+                },
+                "annotations": {
+                  "bold": false,
+                  "italic": false,
+                  "strikethrough": false,
+                  "underline": false,
+                  "code": false,
+                  "color": "default"
+                },
+                "plain_text": "information hiding",
+                "href": "https://en.wikipedia.org/wiki/Information_hiding"
+              }
+            },
+            {
+              "object": "property_item",
+              "type": "rich_text",
+              "id": "Jfxg",
+              "rich_text": {
+                "type": "text",
+                "text": {
+                  "content": "\n in ",
+                  "link": null
+                },
+                "annotations": {
+                  "bold": false,
+                  "italic": false,
+                  "strikethrough": false,
+                  "underline": false,
+                  "code": false,
+                  "color": "default"
+                },
+                "plain_text": "\n in ",
+                "href": null
+              }
+            },
+            {
+              "object": "property_item",
+              "type": "rich_text",
+              "id": "Jfxg",
+              "rich_text": {
+                "type": "text",
+                "text": {
+                  "content": "modular programming",
+                  "link": {
+                    "url": "https://en.wikipedia.org/wiki/Modular_programming"
+                  }
+                },
+                "annotations": {
+                  "bold": false,
+                  "italic": false,
+                  "strikethrough": false,
+                  "underline": false,
+                  "code": false,
+                  "color": "default"
+                },
+                "plain_text": "modular programming",
+                "href": "https://en.wikipedia.org/wiki/Modular_programming"
+              }
+            },
+            {
+              "object": "property_item",
+              "type": "rich_text",
+              "id": "Jfxg",
+              "rich_text": {
+                "type": "text",
+                "text": {
+                  "content": ".",
+                  "link": null
+                },
+                "annotations": {
+                  "bold": false,
+                  "italic": false,
+                  "strikethrough": false,
+                  "underline": false,
+                  "code": false,
+                  "color": "default"
+                },
+                "plain_text": ".",
+                "href": null
+              }
+            }
+          ],
+          "next_cursor": null,
+          "has_more": false,
+          "type": "property_item",
+          "property_item": {
+            "id": "Jfxg",
+            "next_url": null,
+            "type": "rich_text",
+            "rich_text": {}
+          },
+          "request_id": "86c07359-bf6e-46ae-abfa-3fbde334c901"
+        },
+        {
+          "object": "property_item",
+          "type": "url",
+          "id": "%5Dtm%60",
+          "url": "https://en.wikipedia.org/wiki/David_Parnas",
+          "request_id": "e1c779fe-1503-4634-bc88-f5dd346e08fa"
+        },
+        {
+          "object": "property_item",
+          "type": "checkbox",
+          "id": "kdTh",
+          "checkbox": true,
+          "request_id": "6770fe1d-ec9a-4c16-bd3c-ba61f0134644"
+        },
+        {
+          "object": "property_item",
+          "type": "multi_select",
+          "id": "mlgA",
+          "multi_select": [
+            {
+              "id": "d80ac26b-11fc-4506-93fc-aacfab157cb4",
+              "name": "Modular Programming",
+              "color": "yellow"
+            }
+          ],
+          "request_id": "1351df0f-ccec-4937-8004-66b1d9983985"
+        },
+        {
+          "object": "property_item",
+          "type": "select",
+          "id": "uKbI",
+          "select": {
+            "id": "640f8079-bbb8-4690-80d5-e073e2bcf039",
+            "name": "Canadian",
+            "color": "orange"
+          },
+          "request_id": "84f60eb0-bfb8-4d01-b07d-4899ccc273de"
+        },
+        {
+          "object": "property_item",
+          "type": "date",
+          "id": "y%60Hh",
+          "date": {
+            "start": "2022-05-10",
+            "end": null,
+            "time_zone": null
+          },
+          "request_id": "e51bd330-03bb-43df-bf87-5b65343cd6fd"
+        },
+        {
+          "object": "property_item",
+          "type": "number",
+          "id": "%7BUR%5E",
+          "number": 1941,
+          "request_id": "bbc2b142-3080-48bb-bb9d-a72dd373cc1d"
+        },
+        {
+          "object": "list",
+          "results": [
+            {
+              "object": "property_item",
+              "type": "title",
+              "id": "title",
+              "title": {
+                "type": "text",
+                "text": {
+                  "content": "David Parnas",
+                  "link": {
+                    "url": "https://en.wikipedia.org/wiki/David_Parnas"
+                  }
+                },
+                "annotations": {
+                  "bold": false,
+                  "italic": false,
+                  "strikethrough": false,
+                  "underline": false,
+                  "code": false,
+                  "color": "default"
+                },
+                "plain_text": "David Parnas",
+                "href": "https://en.wikipedia.org/wiki/David_Parnas"
+              }
+            }
+          ],
+          "next_cursor": null,
+          "has_more": false,
+          "type": "property_item",
+          "property_item": {
+            "id": "title",
+            "next_url": null,
+            "type": "title",
+            "title": {}
+          },
+          "request_id": "c7c9b268-4f8a-4840-9f94-bf5702b931cd"
+        }
+      ]
+    },
+    {
+      "object": "page",
+      "id": "9923bff0-6414-4ecb-b6e0-fdfd35343161",
+      "created_time": "2022-08-16T01:59:00.000Z",
+      "last_edited_time": "2023-02-21T03:37:00.000Z",
+      "created_by": {
+        "object": "user",
+        "id": "c1400938-a445-438b-be9c-2734e5dc90a6"
+      },
+      "last_edited_by": {
+        "object": "user",
+        "id": "c1400938-a445-438b-be9c-2734e5dc90a6"
+      },
+      "cover": {
+        "type": "file",
+        "file": {
+          "url": "https://prod-files-secure.s3.us-west-2.amazonaws.com/9c5c8bd8-2326-4257-98e7-557d511c9d37/41b7bea7-2c24-49bf-83b3-c3466a452f60/MJPhotoVancouver.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240124%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240124T022406Z&X-Amz-Expires=3600&X-Amz-Signature=0960fc9fee79834e249e41af81e2b54c51ab8f6d970c21e9d5ae067b5c8b0205&X-Amz-SignedHeaders=host&x-id=GetObject",
+          "expiry_time": "2024-01-24T03:24:06.542Z"
+        },
+        "src": "/images/page-cover-9923bff0-6414-4ecb-b6e0-fdfd35343161-2e1d02970a6395c072ccbbe9ee3e4ef5aa1b4826.webp"
+      },
+      "icon": null,
+      "parent": {
+        "type": "database_id",
+        "database_id": "81781536-afc6-431d-a217-21177e7bf8e0"
+      },
+      "archived": false,
+      "properties": {
+        "Note": {
+          "id": "Jfxg",
+          "type": "rich_text",
+          "rich_text": [
+            {
+              "type": "text",
+              "text": {
+                "content": "Michael A. Jackson software engineering methodologist responsible for JSP method of program design; JSD method of system development (with John Cameron); and Problem Frames approach for analysing and structuring software development problems.",
+                "link": null
+              },
+              "annotations": {
+                "bold": false,
+                "italic": false,
+                "strikethrough": false,
+                "underline": false,
+                "code": false,
+                "color": "default"
+              },
+              "plain_text": "Michael A. Jackson software engineering methodologist responsible for JSP method of program design; JSD method of system development (with John Cameron); and Problem Frames approach for analysing and structuring software development problems.",
+              "href": null
+            }
+          ]
+        },
+        "Url": {
+          "id": "%5Dtm%60",
+          "type": "url",
+          "url": "https://en.wikipedia.org/wiki/Michael_A._Jackson_(computer_scientist)"
+        },
+        "Published": {
+          "id": "kdTh",
+          "type": "checkbox",
+          "checkbox": true
+        },
+        "Tags": {
+          "id": "mlgA",
+          "type": "multi_select",
+          "multi_select": [
+            {
+              "id": "97e2a87d-3cfa-47e4-918c-baaced2fd2ea",
+              "name": "JSD",
+              "color": "blue"
+            }
+          ]
+        },
+        "Category": {
+          "id": "uKbI",
+          "type": "select",
+          "select": {
+            "id": "4fa656d9-e483-420c-8a87-4a72d0f6c3c7",
+            "name": "British",
+            "color": "red"
+          }
+        },
+        "Date": {
+          "id": "y%60Hh",
+          "type": "date",
+          "date": {
+            "start": "2021-06-01",
+            "end": null,
+            "time_zone": null
+          }
+        },
+        "Born": {
+          "id": "%7BUR%5E",
+          "type": "number",
+          "number": 1936
+        },
+        "Name": {
+          "id": "title",
+          "type": "title",
+          "title": [
+            {
+              "type": "text",
+              "text": {
+                "content": "Michael A. Jackson",
+                "link": {
+                  "url": "https://en.wikipedia.org/wiki/Michael_A._Jackson_(computer_scientist)"
+                }
+              },
+              "annotations": {
+                "bold": false,
+                "italic": false,
+                "strikethrough": false,
+                "underline": false,
+                "code": false,
+                "color": "default"
+              },
+              "plain_text": "Michael A. Jackson",
+              "href": "https://en.wikipedia.org/wiki/Michael_A._Jackson_(computer_scientist)"
+            }
+          ]
+        }
+      },
+      "url": "https://www.notion.so/Michael-A-Jackson-9923bff064144ecbb6e0fdfd35343161",
+      "public_url": "https://linyows.notion.site/Michael-A-Jackson-9923bff064144ecbb6e0fdfd35343161",
+      "property_items": [
+        {
+          "object": "list",
+          "results": [
+            {
+              "object": "property_item",
+              "type": "rich_text",
+              "id": "Jfxg",
+              "rich_text": {
+                "type": "text",
+                "text": {
+                  "content": "Michael A. Jackson software engineering methodologist responsible for JSP method of program design; JSD method of system development (with John Cameron); and Problem Frames approach for analysing and structuring software development problems.",
+                  "link": null
+                },
+                "annotations": {
+                  "bold": false,
+                  "italic": false,
+                  "strikethrough": false,
+                  "underline": false,
+                  "code": false,
+                  "color": "default"
+                },
+                "plain_text": "Michael A. Jackson software engineering methodologist responsible for JSP method of program design; JSD method of system development (with John Cameron); and Problem Frames approach for analysing and structuring software development problems.",
+                "href": null
+              }
+            }
+          ],
+          "next_cursor": null,
+          "has_more": false,
+          "type": "property_item",
+          "property_item": {
+            "id": "Jfxg",
+            "next_url": null,
+            "type": "rich_text",
+            "rich_text": {}
+          },
+          "request_id": "50d2baef-2ebc-46ac-8fb1-74ad21ece467"
+        },
+        {
+          "object": "property_item",
+          "type": "url",
+          "id": "%5Dtm%60",
+          "url": "https://en.wikipedia.org/wiki/Michael_A._Jackson_(computer_scientist)",
+          "request_id": "e9752361-6df1-4a68-81de-d40b74429abe"
+        },
+        {
+          "object": "property_item",
+          "type": "checkbox",
+          "id": "kdTh",
+          "checkbox": true,
+          "request_id": "d1dae6b3-b378-4ac8-94da-8e0172d8fa85"
+        },
+        {
+          "object": "property_item",
+          "type": "multi_select",
+          "id": "mlgA",
+          "multi_select": [
+            {
+              "id": "97e2a87d-3cfa-47e4-918c-baaced2fd2ea",
+              "name": "JSD",
+              "color": "blue"
+            }
+          ],
+          "request_id": "9b4e44af-b3ee-455e-a9f6-a478ad4e75e9"
+        },
+        {
+          "object": "property_item",
+          "type": "select",
+          "id": "uKbI",
+          "select": {
+            "id": "4fa656d9-e483-420c-8a87-4a72d0f6c3c7",
+            "name": "British",
+            "color": "red"
+          },
+          "request_id": "d36d338e-b429-4a61-9241-9038c3bc0ef9"
+        },
+        {
+          "object": "property_item",
+          "type": "date",
+          "id": "y%60Hh",
+          "date": {
+            "start": "2021-06-01",
+            "end": null,
+            "time_zone": null
+          },
+          "request_id": "59f03a78-48aa-4213-a6d9-9c063ddebca9"
+        },
+        {
+          "object": "property_item",
+          "type": "number",
+          "id": "%7BUR%5E",
+          "number": 1936,
+          "request_id": "4cf3f157-7eb3-4afb-83e5-9bab07cf7b4e"
+        },
+        {
+          "object": "list",
+          "results": [
+            {
+              "object": "property_item",
+              "type": "title",
+              "id": "title",
+              "title": {
+                "type": "text",
+                "text": {
+                  "content": "Michael A. Jackson",
+                  "link": {
+                    "url": "https://en.wikipedia.org/wiki/Michael_A._Jackson_(computer_scientist)"
+                  }
+                },
+                "annotations": {
+                  "bold": false,
+                  "italic": false,
+                  "strikethrough": false,
+                  "underline": false,
+                  "code": false,
+                  "color": "default"
+                },
+                "plain_text": "Michael A. Jackson",
+                "href": "https://en.wikipedia.org/wiki/Michael_A._Jackson_(computer_scientist)"
+              }
+            }
+          ],
+          "next_cursor": null,
+          "has_more": false,
+          "type": "property_item",
+          "property_item": {
+            "id": "title",
+            "next_url": null,
+            "type": "title",
+            "title": {}
+          },
+          "request_id": "ec8a317e-1f5d-4c0d-b578-d9fdffe915d2"
+        }
+      ]
+    }
+  ],
+  "next_cursor": null,
+  "has_more": false,
+  "type": "page_or_database",
+  "page_or_database": {},
+  "request_id": "51706201-2cee-4b42-8695-aa020b7ebc89",
+  "meta": {
+    "object": "database",
+    "id": "81781536-afc6-431d-a217-21177e7bf8e0",
+    "cover": null,
+    "icon": {
+      "type": "external",
+      "external": {
+        "url": "https://www.notion.so/icons/database_blue.svg"
+      },
+      "src": "/images/database-icon-81781536-afc6-431d-a217-21177e7bf8e0-3d251d9465c2ba55516c2f941bf4d0e2aeff609d.svg"
+    },
+    "created_time": "2022-08-14T13:59:00.000Z",
+    "created_by": {
+      "object": "user",
+      "id": "c1400938-a445-438b-be9c-2734e5dc90a6"
+    },
+    "last_edited_by": {
+      "object": "user",
+      "id": "c1400938-a445-438b-be9c-2734e5dc90a6"
+    },
+    "last_edited_time": "2024-01-09T00:46:00.000Z",
+    "title": [
+      {
+        "type": "text",
+        "text": {
+          "content": "Database",
+          "link": null
+        },
+        "annotations": {
+          "bold": false,
+          "italic": false,
+          "strikethrough": false,
+          "underline": false,
+          "code": false,
+          "color": "default"
+        },
+        "plain_text": "Database",
+        "href": null
+      }
+    ],
+    "description": [
+      {
+        "type": "text",
+        "text": {
+          "content": "This is a page for validating a database, which is an object that makes up a page on notion.",
+          "link": null
+        },
+        "annotations": {
+          "bold": false,
+          "italic": false,
+          "strikethrough": false,
+          "underline": false,
+          "code": false,
+          "color": "default"
+        },
+        "plain_text": "This is a page for validating a database, which is an object that makes up a page on notion.",
+        "href": null
+      }
+    ],
+    "is_inline": false,
+    "properties": {
+      "Note": {
+        "id": "Jfxg",
+        "name": "Note",
+        "type": "rich_text",
+        "rich_text": {}
+      },
+      "Url": {
+        "id": "%5Dtm%60",
+        "name": "Url",
+        "type": "url",
+        "url": {}
+      },
+      "Published": {
+        "id": "kdTh",
+        "name": "Published",
+        "type": "checkbox",
+        "checkbox": {}
+      },
+      "Tags": {
+        "id": "mlgA",
+        "name": "Tags",
+        "type": "multi_select",
+        "multi_select": {
+          "options": [
+            {
+              "id": "50cad459-cd79-4114-aed9-41df9c549b00",
+              "name": "Emacs",
+              "color": "purple",
+              "description": null
+            },
+            {
+              "id": "b67c5f3e-e58e-4a51-9f5b-77bb7ab7b8d3",
+              "name": "GCC",
+              "color": "green",
+              "description": null
+            },
+            {
+              "id": "97e2a87d-3cfa-47e4-918c-baaced2fd2ea",
+              "name": "JSD",
+              "color": "blue",
+              "description": null
+            },
+            {
+              "id": "d80ac26b-11fc-4506-93fc-aacfab157cb4",
+              "name": "Modular Programming",
+              "color": "yellow",
+              "description": null
+            },
+            {
+              "id": "1f1b1571-4d7b-4dca-8a06-9f9575a665f9",
+              "name": "Distributed Computing",
+              "color": "green",
+              "description": null
+            },
+            {
+              "id": "6f8c5495-53a5-4bc9-9305-0a532ca3d400",
+              "name": "Structured Programming",
+              "color": "gray",
+              "description": null
+            },
+            {
+              "id": "e8276f4c-9dbb-4420-869e-0899a5187f40",
+              "name": "Entity–Relationship Model",
+              "color": "pink",
+              "description": null
+            },
+            {
+              "id": "6f15695f-6b34-4d48-80a3-2745776af57f",
+              "name": "OS/360",
+              "color": "brown",
+              "description": null
+            },
+            {
+              "id": "17fda342-647c-4251-83ab-2d0f44208e09",
+              "name": "Memory Caching Algorithm",
+              "color": "default",
+              "description": null
+            },
+            {
+              "id": "41ac519a-ede3-49c7-94c9-1f0d0d86ca16",
+              "name": "Integrated Data Store",
+              "color": "red",
+              "description": null
+            },
+            {
+              "id": "e8f21dfc-97e2-4b3c-b316-3e221ce0aa88",
+              "name": "Foo",
+              "color": "orange",
+              "description": null
+            }
+          ]
+        }
+      },
+      "Category": {
+        "id": "uKbI",
+        "name": "Category",
+        "type": "select",
+        "select": {
+          "options": [
+            {
+              "id": "14f1fda7-c050-47dd-806e-28bb05324c9e",
+              "name": "American",
+              "color": "brown",
+              "description": null
+            },
+            {
+              "id": "bb7aabba-a37e-4d02-9d83-e9001dc6e5d6",
+              "name": "Hungarians",
+              "color": "yellow",
+              "description": null
+            },
+            {
+              "id": "848ef319-fb42-4a1e-9d31-9b2e67aa9280",
+              "name": "Dutch",
+              "color": "purple",
+              "description": null
+            },
+            {
+              "id": "4fa656d9-e483-420c-8a87-4a72d0f6c3c7",
+              "name": "British",
+              "color": "red",
+              "description": null
+            },
+            {
+              "id": "640f8079-bbb8-4690-80d5-e073e2bcf039",
+              "name": "Canadian",
+              "color": "orange",
+              "description": null
+            }
+          ]
+        }
+      },
+      "Date": {
+        "id": "y%60Hh",
+        "name": "Date",
+        "type": "date",
+        "date": {}
+      },
+      "Born": {
+        "id": "%7BUR%5E",
+        "name": "Born",
+        "type": "number",
+        "number": {
+          "format": "number"
+        }
+      },
+      "Name": {
+        "id": "title",
+        "name": "Name",
+        "type": "title",
+        "title": {}
+      }
+    },
+    "parent": {
+      "type": "page_id",
+      "page_id": "09cb5b72-e63b-4821-8728-9af3d6413e7f"
+    },
+    "url": "https://www.notion.so/81781536afc6431da21721177e7bf8e0",
+    "public_url": "https://linyows.notion.site/81781536afc6431da21721177e7bf8e0",
+    "archived": false,
+    "request_id": "b2b13b54-889c-45ac-a3a2-dd776cea5241"
+  }
+}