From 39ca18a9ca4835fa5ec672c4488c138ebcec283d Mon Sep 17 00:00:00 2001
From: Jonghyeon Ko <manudeli.ko@gmail.com>
Date: Sat, 9 Dec 2023 10:43:16 +0900
Subject: [PATCH] chore(visualization): replace emotion to tailwindcss (#448)

# Overview

<!--
    A clear and concise description of what this pr is about.
 -->

Remove emotion, jsxcss

## PR Checklist

- [x] I did below actions if need

1. I read the [Contributing
Guide](https://github.com/suspensive/react/blob/main/CONTRIBUTING.md)
2. I added documents and tests.
---
 .eslintrc.js                                  |   4 +
 .lintstagedrc                                 |   2 +-
 .prettierrc                                   |  14 -
 configs/tsconfig/README.md                    |   3 -
 docs/v1/package.json                          |   2 +-
 docs/v1/prettier.config.mjs                   |   8 +
 docs/v1/src/components/HomePage.tsx           |  10 +-
 docs/v1/tailwind.config.js                    |   6 +-
 docs/v1/theme.config.tsx                      |   4 +-
 docs/v2/package.json                          |   2 +-
 docs/v2/prettier.config.mjs                   |   8 +
 docs/v2/src/components/HomePage.tsx           |  10 +-
 docs/v2/tailwind.config.js                    |   6 +-
 docs/v2/theme.config.tsx                      |   4 +-
 package.json                                  |  11 +-
 pnpm-lock.yaml                                | 405 ++++++------------
 prettier.config.mjs                           |  15 +
 websites/visualization/package.json           |   7 +-
 websites/visualization/postcss.config.js      |   6 +
 websites/visualization/prettier.config.mjs    |   8 +
 .../visualization/src/app/CommonLayout.tsx    |  28 --
 websites/visualization/src/app/global.css     |   4 +
 websites/visualization/src/app/layout.tsx     |  14 +-
 websites/visualization/src/app/page.tsx       |  16 +-
 websites/visualization/src/app/providers.tsx  |  16 +-
 .../src/app/react-await/page.tsx              |  37 +-
 .../src/app/react-image/page.tsx              |   5 +-
 .../src/app/react-query/page.tsx              |  33 +-
 .../react-query/playground/components/api.tsx |  37 --
 .../playground/components/index.ts            |   2 -
 .../playground/components/suspensive.tsx      |  83 ----
 .../playground/components/tanstack.tsx        |  98 -----
 .../components/useIntersectionObserver.ts     |  39 --
 .../src/app/react-query/playground/page.tsx   |  38 --
 websites/visualization/src/app/react/page.tsx |  34 +-
 .../visualization/src/app/react/wrap/page.tsx |   2 +-
 .../src/components/RejectedFallback.tsx       |  11 -
 .../src/components/UseSuspenseQuery.tsx       |   4 +-
 .../visualization/src/components/index.ts     |   1 -
 .../src/components/uis/index.tsx              | 184 +++-----
 websites/visualization/tailwind.config.js     |   8 +
 41 files changed, 369 insertions(+), 860 deletions(-)
 create mode 100644 .eslintrc.js
 delete mode 100644 .prettierrc
 delete mode 100644 configs/tsconfig/README.md
 create mode 100644 docs/v1/prettier.config.mjs
 create mode 100644 docs/v2/prettier.config.mjs
 create mode 100644 prettier.config.mjs
 create mode 100644 websites/visualization/postcss.config.js
 create mode 100644 websites/visualization/prettier.config.mjs
 delete mode 100644 websites/visualization/src/app/CommonLayout.tsx
 delete mode 100644 websites/visualization/src/app/react-query/playground/components/api.tsx
 delete mode 100644 websites/visualization/src/app/react-query/playground/components/index.ts
 delete mode 100644 websites/visualization/src/app/react-query/playground/components/suspensive.tsx
 delete mode 100644 websites/visualization/src/app/react-query/playground/components/tanstack.tsx
 delete mode 100644 websites/visualization/src/app/react-query/playground/components/useIntersectionObserver.ts
 delete mode 100644 websites/visualization/src/app/react-query/playground/page.tsx
 delete mode 100644 websites/visualization/src/components/RejectedFallback.tsx
 create mode 100644 websites/visualization/tailwind.config.js

diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 000000000..8e57952c9
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,4 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+}
diff --git a/.lintstagedrc b/.lintstagedrc
index eb2c06ea2..f0dd16979 100644
--- a/.lintstagedrc
+++ b/.lintstagedrc
@@ -1,3 +1,3 @@
 {
-  "*.{ts,tsx}": ["prettier --write"]
+  "*.{ts,tsx}": ["prettier --write --ignore-unknown"]
 }
diff --git a/.prettierrc b/.prettierrc
deleted file mode 100644
index 24fcd9df8..000000000
--- a/.prettierrc
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "arrowParens": "always",
-  "bracketSameLine": false,
-  "bracketSpacing": true,
-  "endOfLine": "lf",
-  "jsxSingleQuote": false,
-  "printWidth": 120,
-  "proseWrap": "preserve",
-  "quoteProps": "as-needed",
-  "semi": false,
-  "singleQuote": true,
-  "tabWidth": 2,
-  "trailingComma": "es5"
-}
diff --git a/configs/tsconfig/README.md b/configs/tsconfig/README.md
deleted file mode 100644
index 0da79cf23..000000000
--- a/configs/tsconfig/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# `tsconfig`
-
-These are base shared `tsconfig.json`s from which all other `tsconfig.json`'s inherit from.
diff --git a/docs/v1/package.json b/docs/v1/package.json
index 9090e29fb..4e1da0003 100644
--- a/docs/v1/package.json
+++ b/docs/v1/package.json
@@ -33,10 +33,10 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@next/eslint-plugin-next": "14.0.3",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.15",
     "autoprefixer": "^10.4.16",
-    "eslint-config-next": "14.0.3",
     "postcss": "^8.4.32",
     "tailwindcss": "^3.3.5"
   }
diff --git a/docs/v1/prettier.config.mjs b/docs/v1/prettier.config.mjs
new file mode 100644
index 000000000..a41d81fe6
--- /dev/null
+++ b/docs/v1/prettier.config.mjs
@@ -0,0 +1,8 @@
+import rootConfig from '../../prettier.config.mjs'
+
+/** @type {import("prettier").Config} */
+export default {
+  ...rootConfig,
+  plugins: ['prettier-plugin-tailwindcss'],
+  tailwindConfig: './tailwind.config.js',
+}
diff --git a/docs/v1/src/components/HomePage.tsx b/docs/v1/src/components/HomePage.tsx
index 341c8aeff..a64d8b3a4 100644
--- a/docs/v1/src/components/HomePage.tsx
+++ b/docs/v1/src/components/HomePage.tsx
@@ -17,23 +17,23 @@ export const HomePage = ({
 }) => {
   return (
     <div className="pb-20">
-      <div className="flex flex-col justify-center items-center pt-11 gap-8 text-center">
+      <div className="flex flex-col items-center justify-center gap-8 pt-11 text-center">
         <Image src="/img/logo_background_star.png" alt="Suspensive with star" width={400} height={241} />
         <div className="flex flex-col items-center gap-4">
           <div className="relative text-5xl font-bold">
-            <span>{title}</span> <span className="absolute right text-sm">v{version}</span>
+            <span>{title}</span> <span className="right absolute text-sm">v{version}</span>
           </div>
           <p className="text-3xl">{description}</p>
         </div>
         <Link href="/docs/why">
-          <button className="bg-gray-800 text-xl font-bold rounded-xl py-3 px-10">{buttonText}</button>
+          <button className="rounded-xl bg-gray-800 px-10 py-3 text-xl font-bold">{buttonText}</button>
         </Link>
       </div>
 
       <div className="h-14"></div>
-      <div className="flex flex-col md:flex-row justify-between items-start gap-8">
+      <div className="flex flex-col items-start justify-between gap-8 md:flex-row">
         {items.map(({ title, desc }) => (
-          <div className="flex flex-1 flex-col justify-center items-center text-center gap-3" key={title}>
+          <div className="flex flex-1 flex-col items-center justify-center gap-3 text-center" key={title}>
             <div className="text-xl font-bold">{title}</div>
             <p className="text-lg">{desc}</p>
           </div>
diff --git a/docs/v1/tailwind.config.js b/docs/v1/tailwind.config.js
index d461affee..7ba05bc68 100644
--- a/docs/v1/tailwind.config.js
+++ b/docs/v1/tailwind.config.js
@@ -1,10 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
-  ],
+  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}', './theme.config.tsx'],
   theme: {
     extend: {
       backgroundImage: {
diff --git a/docs/v1/theme.config.tsx b/docs/v1/theme.config.tsx
index 3b109e5cd..e9b4a4417 100644
--- a/docs/v1/theme.config.tsx
+++ b/docs/v1/theme.config.tsx
@@ -31,9 +31,7 @@ const config: DocsThemeConfig = {
         <Image src="/img/logo_dark.png" width={34} height={34} alt="suspensive logo" />
         <div className="relative">
           <strong>Suspensive</strong>
-          <span className="absolute right" style={{ fontSize: 8 }}>
-            v1
-          </span>
+          <span className="right absolute text-[8px]">v1</span>
         </div>
       </div>
     )
diff --git a/docs/v2/package.json b/docs/v2/package.json
index a970b1bfd..790e6bb95 100644
--- a/docs/v2/package.json
+++ b/docs/v2/package.json
@@ -33,10 +33,10 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@next/eslint-plugin-next": "14.0.3",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.15",
     "autoprefixer": "^10.4.16",
-    "eslint-config-next": "14.0.3",
     "postcss": "^8.4.32",
     "tailwindcss": "^3.3.5"
   }
diff --git a/docs/v2/prettier.config.mjs b/docs/v2/prettier.config.mjs
new file mode 100644
index 000000000..a41d81fe6
--- /dev/null
+++ b/docs/v2/prettier.config.mjs
@@ -0,0 +1,8 @@
+import rootConfig from '../../prettier.config.mjs'
+
+/** @type {import("prettier").Config} */
+export default {
+  ...rootConfig,
+  plugins: ['prettier-plugin-tailwindcss'],
+  tailwindConfig: './tailwind.config.js',
+}
diff --git a/docs/v2/src/components/HomePage.tsx b/docs/v2/src/components/HomePage.tsx
index 341c8aeff..a64d8b3a4 100644
--- a/docs/v2/src/components/HomePage.tsx
+++ b/docs/v2/src/components/HomePage.tsx
@@ -17,23 +17,23 @@ export const HomePage = ({
 }) => {
   return (
     <div className="pb-20">
-      <div className="flex flex-col justify-center items-center pt-11 gap-8 text-center">
+      <div className="flex flex-col items-center justify-center gap-8 pt-11 text-center">
         <Image src="/img/logo_background_star.png" alt="Suspensive with star" width={400} height={241} />
         <div className="flex flex-col items-center gap-4">
           <div className="relative text-5xl font-bold">
-            <span>{title}</span> <span className="absolute right text-sm">v{version}</span>
+            <span>{title}</span> <span className="right absolute text-sm">v{version}</span>
           </div>
           <p className="text-3xl">{description}</p>
         </div>
         <Link href="/docs/why">
-          <button className="bg-gray-800 text-xl font-bold rounded-xl py-3 px-10">{buttonText}</button>
+          <button className="rounded-xl bg-gray-800 px-10 py-3 text-xl font-bold">{buttonText}</button>
         </Link>
       </div>
 
       <div className="h-14"></div>
-      <div className="flex flex-col md:flex-row justify-between items-start gap-8">
+      <div className="flex flex-col items-start justify-between gap-8 md:flex-row">
         {items.map(({ title, desc }) => (
-          <div className="flex flex-1 flex-col justify-center items-center text-center gap-3" key={title}>
+          <div className="flex flex-1 flex-col items-center justify-center gap-3 text-center" key={title}>
             <div className="text-xl font-bold">{title}</div>
             <p className="text-lg">{desc}</p>
           </div>
diff --git a/docs/v2/tailwind.config.js b/docs/v2/tailwind.config.js
index d461affee..7ba05bc68 100644
--- a/docs/v2/tailwind.config.js
+++ b/docs/v2/tailwind.config.js
@@ -1,10 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
-    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
-  ],
+  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}', './theme.config.tsx'],
   theme: {
     extend: {
       backgroundImage: {
diff --git a/docs/v2/theme.config.tsx b/docs/v2/theme.config.tsx
index e02273d60..b8e0fbc5a 100644
--- a/docs/v2/theme.config.tsx
+++ b/docs/v2/theme.config.tsx
@@ -31,9 +31,7 @@ const config: DocsThemeConfig = {
         <Image src="/img/logo_dark.png" width={34} height={34} alt="suspensive logo" />
         <div className="relative">
           <strong>Suspensive</strong>
-          <span className="absolute right" style={{ fontSize: 8 }}>
-            v2
-          </span>
+          <span className="right absolute text-[8px]">v2</span>
         </div>
       </div>
     )
diff --git a/package.json b/package.json
index 25adc615b..6c5a42a8b 100644
--- a/package.json
+++ b/package.json
@@ -39,9 +39,9 @@
     "lint:monorepo": "sherif",
     "lint:pack": "packlint sort -R",
     "lint:pub": "turbo run lint:pub",
-    "postinstall": "husky install",
     "preinstall": "corepack enable",
     "prepack": "turbo run prepack",
+    "prepare": "husky install",
     "test": "turbo run test",
     "test:tsd": "turbo run test:tsd",
     "test:watch": "turbo run test:watch",
@@ -64,18 +64,19 @@
     "@types/node": "^18.18.14",
     "@types/testing-library__jest-dom": "^5.14.9",
     "@vitest/browser": "^1.0.2",
-    "@vitest/coverage-istanbul": "^1.0.0-beta.5",
-    "@vitest/ui": "^1.0.0-beta.5",
+    "@vitest/coverage-istanbul": "^1.0.0-beta.6",
+    "@vitest/ui": "^1.0.0-beta.6",
     "commitizen": "^4.3.0",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8.55.0",
     "husky": "^8.0.3",
     "jsdom": "^23.0.1",
     "lint-staged": "^15.1.0",
-    "ms": "3.0.0-canary.1",
+    "ms": "^3.0.0-canary.1",
     "packlint": "^0.2.4",
     "playwright": "^1.40.1",
     "prettier": "^3.1.0",
+    "prettier-plugin-tailwindcss": "^0.5.9",
     "publint": "^0.2.6",
     "rimraf": "^5.0.5",
     "sherif": "^0.6.1",
@@ -83,7 +84,7 @@
     "turbo": "latest",
     "typescript": "^5.3.3",
     "vite": "^5.0.6",
-    "vitest": "^1.0.0-beta.5"
+    "vitest": "^1.0.0-beta.6"
   },
   "volta": {
     "node": "18.18.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e3c990385..6774e5f29 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -57,10 +57,10 @@ importers:
         specifier: ^1.0.2
         version: 1.0.2(playwright@1.40.1)(vitest@1.0.0-beta.6)
       '@vitest/coverage-istanbul':
-        specifier: ^1.0.0-beta.5
+        specifier: ^1.0.0-beta.6
         version: 1.0.0-beta.6(vitest@1.0.0-beta.6)
       '@vitest/ui':
-        specifier: ^1.0.0-beta.5
+        specifier: ^1.0.0-beta.6
         version: 1.0.0-beta.6(vitest@1.0.0-beta.6)
       commitizen:
         specifier: ^4.3.0
@@ -81,7 +81,7 @@ importers:
         specifier: ^15.1.0
         version: 15.1.0
       ms:
-        specifier: 3.0.0-canary.1
+        specifier: ^3.0.0-canary.1
         version: 3.0.0-canary.1
       packlint:
         specifier: ^0.2.4
@@ -92,6 +92,9 @@ importers:
       prettier:
         specifier: ^3.1.0
         version: 3.1.0
+      prettier-plugin-tailwindcss:
+        specifier: ^0.5.9
+        version: 0.5.9(prettier@3.1.0)
       publint:
         specifier: ^0.2.6
         version: 0.2.6
@@ -114,7 +117,7 @@ importers:
         specifier: ^5.0.6
         version: 5.0.6(@types/node@18.18.14)
       vitest:
-        specifier: ^1.0.0-beta.5
+        specifier: ^1.0.0-beta.6
         version: 1.0.0-beta.6(@types/node@18.18.14)(@vitest/browser@1.0.2)(@vitest/ui@1.0.0-beta.6)(jsdom@23.0.1)
 
   configs/eslint-config:
@@ -172,7 +175,7 @@ importers:
         version: 9.1.0(eslint@8.55.0)
       eslint-import-resolver-typescript:
         specifier: ^3.6.1
-        version: 3.6.1(@typescript-eslint/parser@6.12.0)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.0)(eslint@8.55.0)
+        version: 3.6.1(@typescript-eslint/parser@6.12.0)(eslint-plugin-import@2.29.0)(eslint@8.55.0)
       eslint-plugin-import:
         specifier: ^2.29.0
         version: 2.29.0(@typescript-eslint/parser@6.12.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.55.0)
@@ -216,6 +219,9 @@ importers:
         specifier: ^18.2.0
         version: 18.2.0(react@18.2.0)
     devDependencies:
+      '@next/eslint-plugin-next':
+        specifier: 14.0.3
+        version: 14.0.3
       '@types/react':
         specifier: ^18.2.42
         version: 18.2.42
@@ -225,9 +231,6 @@ importers:
       autoprefixer:
         specifier: ^10.4.16
         version: 10.4.16(postcss@8.4.32)
-      eslint-config-next:
-        specifier: 14.0.3
-        version: 14.0.3(eslint@8.55.0)(typescript@5.3.3)
       postcss:
         specifier: ^8.4.32
         version: 8.4.32
@@ -253,6 +256,9 @@ importers:
         specifier: ^18.2.0
         version: 18.2.0(react@18.2.0)
     devDependencies:
+      '@next/eslint-plugin-next':
+        specifier: 14.0.3
+        version: 14.0.3
       '@types/react':
         specifier: ^18.2.42
         version: 18.2.42
@@ -262,9 +268,6 @@ importers:
       autoprefixer:
         specifier: ^10.4.16
         version: 10.4.16(postcss@8.4.32)
-      eslint-config-next:
-        specifier: 14.0.3
-        version: 14.0.3(eslint@8.55.0)(typescript@5.3.3)
       postcss:
         specifier: ^8.4.32
         version: 8.4.32
@@ -372,15 +375,6 @@ importers:
 
   websites/visualization:
     dependencies:
-      '@emotion/react':
-        specifier: ^11.11.1
-        version: 11.11.1(@types/react@18.2.42)(react@18.2.0)
-      '@emotion/styled':
-        specifier: ^11.11.0
-        version: 11.11.0(@emotion/react@11.11.1)(@types/react@18.2.42)(react@18.2.0)
-      '@jsxcss/emotion':
-        specifier: ^1.3.9
-        version: 1.3.9(@emotion/react@11.11.1)(react@18.2.0)
       '@suspensive/react':
         specifier: workspace:*
         version: link:../../packages/react
@@ -421,9 +415,15 @@ importers:
       '@types/react-dom':
         specifier: ^18.2.15
         version: 18.2.15
-      eslint-config-next:
-        specifier: ^14.0.3
-        version: 14.0.3(eslint@8.55.0)(typescript@5.3.3)
+      autoprefixer:
+        specifier: ^10.4.16
+        version: 10.4.16(postcss@8.4.32)
+      postcss:
+        specifier: ^8.4.32
+        version: 8.4.32
+      tailwindcss:
+        specifier: ^3.3.5
+        version: 3.3.5
 
 packages:
 
@@ -1317,122 +1317,6 @@ packages:
     engines: {node: '>=18'}
     dev: false
 
-  /@emotion/babel-plugin@11.11.0:
-    resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==}
-    dependencies:
-      '@babel/helper-module-imports': 7.22.15
-      '@babel/runtime': 7.23.2
-      '@emotion/hash': 0.9.1
-      '@emotion/memoize': 0.8.1
-      '@emotion/serialize': 1.1.2
-      babel-plugin-macros: 3.1.0
-      convert-source-map: 1.9.0
-      escape-string-regexp: 4.0.0
-      find-root: 1.1.0
-      source-map: 0.5.7
-      stylis: 4.2.0
-    dev: false
-
-  /@emotion/cache@11.11.0:
-    resolution: {integrity: sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==}
-    dependencies:
-      '@emotion/memoize': 0.8.1
-      '@emotion/sheet': 1.2.2
-      '@emotion/utils': 1.2.1
-      '@emotion/weak-memoize': 0.3.1
-      stylis: 4.2.0
-    dev: false
-
-  /@emotion/hash@0.9.1:
-    resolution: {integrity: sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==}
-    dev: false
-
-  /@emotion/is-prop-valid@1.2.1:
-    resolution: {integrity: sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==}
-    dependencies:
-      '@emotion/memoize': 0.8.1
-    dev: false
-
-  /@emotion/memoize@0.8.1:
-    resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==}
-    dev: false
-
-  /@emotion/react@11.11.1(@types/react@18.2.42)(react@18.2.0):
-    resolution: {integrity: sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: '>=16.8.0'
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.2
-      '@emotion/babel-plugin': 11.11.0
-      '@emotion/cache': 11.11.0
-      '@emotion/serialize': 1.1.2
-      '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0)
-      '@emotion/utils': 1.2.1
-      '@emotion/weak-memoize': 0.3.1
-      '@types/react': 18.2.42
-      hoist-non-react-statics: 3.3.2
-      react: 18.2.0
-    dev: false
-
-  /@emotion/serialize@1.1.2:
-    resolution: {integrity: sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==}
-    dependencies:
-      '@emotion/hash': 0.9.1
-      '@emotion/memoize': 0.8.1
-      '@emotion/unitless': 0.8.1
-      '@emotion/utils': 1.2.1
-      csstype: 3.1.2
-    dev: false
-
-  /@emotion/sheet@1.2.2:
-    resolution: {integrity: sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==}
-    dev: false
-
-  /@emotion/styled@11.11.0(@emotion/react@11.11.1)(@types/react@18.2.42)(react@18.2.0):
-    resolution: {integrity: sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==}
-    peerDependencies:
-      '@emotion/react': ^11.0.0-rc.0
-      '@types/react': '*'
-      react: '>=16.8.0'
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.23.2
-      '@emotion/babel-plugin': 11.11.0
-      '@emotion/is-prop-valid': 1.2.1
-      '@emotion/react': 11.11.1(@types/react@18.2.42)(react@18.2.0)
-      '@emotion/serialize': 1.1.2
-      '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0)
-      '@emotion/utils': 1.2.1
-      '@types/react': 18.2.42
-      react: 18.2.0
-    dev: false
-
-  /@emotion/unitless@0.8.1:
-    resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==}
-    dev: false
-
-  /@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@18.2.0):
-    resolution: {integrity: sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==}
-    peerDependencies:
-      react: '>=16.8.0'
-    dependencies:
-      react: 18.2.0
-    dev: false
-
-  /@emotion/utils@1.2.1:
-    resolution: {integrity: sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==}
-    dev: false
-
-  /@emotion/weak-memoize@0.3.1:
-    resolution: {integrity: sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==}
-    dev: false
-
   /@es-joy/jsdoccomment@0.41.0:
     resolution: {integrity: sha512-aKUhyn1QI5Ksbqcr3fFJj16p99QdjUxXAEuFst1Z47DRyoiMwivIH9MV/ARcJOCXVjPfjITciej8ZD2O/6qUmw==}
     engines: {node: '>=16'}
@@ -1747,25 +1631,6 @@ packages:
       '@jridgewell/resolve-uri': 3.1.1
       '@jridgewell/sourcemap-codec': 1.4.15
 
-  /@jsxcss/core@1.3.9(react@18.2.0):
-    resolution: {integrity: sha512-ZX+wIakMqhTeiw3RVnVCWBQipzQjlVw0+IjaORJPq5mVztJPqeIF0q4Ghek7sV0auPtRoePcmZbRu7kRFmuw/g==}
-    peerDependencies:
-      react: ^16.8 || ^17 || ^18
-    dependencies:
-      react: 18.2.0
-    dev: false
-
-  /@jsxcss/emotion@1.3.9(@emotion/react@11.11.1)(react@18.2.0):
-    resolution: {integrity: sha512-y0SX11QRAeepTP8bv69wpAXkemuMMOZbGeEBCI4mvz6TR/CPNj8kQ7tpjqyYhtD2ppYTocLs8Lxv4Ad0/2BraA==}
-    peerDependencies:
-      '@emotion/react': 11.10.6
-      react: ^16.8 || ^17 || ^18
-    dependencies:
-      '@emotion/react': 11.11.1(@types/react@18.2.42)(react@18.2.0)
-      '@jsxcss/core': 1.3.9(react@18.2.0)
-      react: 18.2.0
-    dev: false
-
   /@manypkg/find-root@1.1.0:
     resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==}
     dependencies:
@@ -2190,10 +2055,6 @@ packages:
     requiresBuild: true
     optional: true
 
-  /@rushstack/eslint-patch@1.5.1:
-    resolution: {integrity: sha512-6i/8UoL0P5y4leBIGzvkZdS85RDMG9y1ihZzmTZQ5LdHUYmZ7pKFoj8X0236s3lusPs1Fa5HTQUpwI+UfTcmeA==}
-    dev: true
-
   /@sinclair/typebox@0.27.8:
     resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
 
@@ -2421,6 +2282,7 @@ packages:
 
   /@types/json5@0.0.29:
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
+    dev: false
 
   /@types/katex@0.16.5:
     resolution: {integrity: sha512-DD2Y3xMlTQvAnN6d8803xdgnOeYZ+HwMglb7/9YCf49J9RkJL53azf9qKa40MkEYhqVwxZ1GS2+VlShnz4Z1Bw==}
@@ -2465,6 +2327,7 @@ packages:
 
   /@types/parse-json@4.0.0:
     resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==}
+    dev: true
 
   /@types/prop-types@15.7.9:
     resolution: {integrity: sha512-n1yyPsugYNSmHgxDFjicaI2+gCNjsBck8UX9kuofAKlc0h1bL+20oSF72KeNaW2DUlesbEVCFgyV2dPGTiY42g==}
@@ -2574,6 +2437,7 @@ packages:
       typescript: 5.3.3
     transitivePeerDependencies:
       - supports-color
+    dev: false
 
   /@typescript-eslint/scope-manager@6.11.0:
     resolution: {integrity: sha512-0A8KoVvIURG4uhxAdjSaxy8RdRE//HztaZdG8KiHLP8WOXSk0vlF7Pvogv+vlJA5Rnjj/wDcFENvDaHb+gKd1A==}
@@ -2589,6 +2453,7 @@ packages:
     dependencies:
       '@typescript-eslint/types': 6.12.0
       '@typescript-eslint/visitor-keys': 6.12.0
+    dev: false
 
   /@typescript-eslint/type-utils@6.12.0(eslint@8.55.0)(typescript@5.3.3):
     resolution: {integrity: sha512-WWmRXxhm1X8Wlquj+MhsAG4dU/Blvf1xDgGaYCzfvStP2NwPQh6KBvCDbiOEvaE0filhranjIlK/2fSTVwtBng==}
@@ -2618,6 +2483,7 @@ packages:
   /@typescript-eslint/types@6.12.0:
     resolution: {integrity: sha512-MA16p/+WxM5JG/F3RTpRIcuOghWO30//VEOvzubM8zuOOBYXsP+IfjoCXXiIfy2Ta8FRh9+IO9QLlaFQUU+10Q==}
     engines: {node: ^16.0.0 || >=18.0.0}
+    dev: false
 
   /@typescript-eslint/typescript-estree@6.11.0(typescript@5.3.3):
     resolution: {integrity: sha512-Aezzv1o2tWJwvZhedzvD5Yv7+Lpu1by/U1LZ5gLc4tCx8jUmuSCMioPFRjliN/6SJIvY6HpTtJIWubKuYYYesQ==}
@@ -2659,6 +2525,7 @@ packages:
       typescript: 5.3.3
     transitivePeerDependencies:
       - supports-color
+    dev: false
 
   /@typescript-eslint/utils@6.11.0(eslint@8.55.0)(typescript@5.3.3):
     resolution: {integrity: sha512-p23ibf68fxoZy605dc0dQAEoUsoiNoP3MD9WQGiHLDuTSOuqoTsa4oAy+h3KDkTcxbbfOtUjb9h3Ta0gT4ug2g==}
@@ -2712,6 +2579,7 @@ packages:
     dependencies:
       '@typescript-eslint/types': 6.12.0
       eslint-visitor-keys: 3.4.3
+    dev: false
 
   /@ungap/structured-clone@1.2.0:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
@@ -2984,6 +2852,7 @@ packages:
       es-abstract: 1.22.3
       get-intrinsic: 1.2.2
       is-string: 1.0.7
+    dev: false
 
   /array-timsort@1.0.3:
     resolution: {integrity: sha512-/+3GRL7dDAGEfM6TseQk/U+mi18TU2Ms9I3UlLdUMhz2hbvGNTKdj9xniwXfUqgYhHxRx0+8UnKkvlNwVU+cWQ==}
@@ -3002,6 +2871,7 @@ packages:
       es-abstract: 1.22.3
       es-shim-unscopables: 1.0.2
       get-intrinsic: 1.2.2
+    dev: false
 
   /array.prototype.flat@1.3.2:
     resolution: {integrity: sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==}
@@ -3020,6 +2890,7 @@ packages:
       define-properties: 1.2.1
       es-abstract: 1.22.3
       es-shim-unscopables: 1.0.2
+    dev: false
 
   /array.prototype.tosorted@1.1.2:
     resolution: {integrity: sha512-HuQCHOlk1Weat5jzStICBCd83NxiIMwqDg/dHEsoefabn/hJRj5pVdWcPUSpRrwhwxZOsQassMpgN/xRYFBMIg==}
@@ -3029,6 +2900,7 @@ packages:
       es-abstract: 1.22.3
       es-shim-unscopables: 1.0.2
       get-intrinsic: 1.2.2
+    dev: false
 
   /arraybuffer.prototype.slice@1.0.2:
     resolution: {integrity: sha512-yMBKppFur/fbHu9/6USUe03bZ4knMYiwFBcyiaXB8Go0qNehwX6inYPzK9U0NeQvGxKthcmHcaR8P5MStSRBAw==}
@@ -3050,10 +2922,6 @@ packages:
   /assertion-error@1.1.0:
     resolution: {integrity: sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==}
 
-  /ast-types-flow@0.0.8:
-    resolution: {integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==}
-    dev: true
-
   /astring@1.8.6:
     resolution: {integrity: sha512-ISvCdHdlTDlH5IpxQJIex7BWBywFWgjJSVdwst+/iQCoEYnyOaQ95+X1JGshuBjGp6nxKUy1jMgE3zPqN7fQdg==}
     hasBin: true
@@ -3063,6 +2931,7 @@ packages:
     resolution: {integrity: sha512-wwHYEIS0Q80f5mosx3L/dfG5t5rjEa9Ft51GTaNt862EnpyGHpgz2RkZvLPp1oF5TnAiTohkEKVEu8pQPJI7Vg==}
     dependencies:
       has-symbols: 1.0.3
+    dev: false
 
   /asynckit@0.4.0:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
@@ -3092,11 +2961,6 @@ packages:
     resolution: {integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==}
     engines: {node: '>= 0.4'}
 
-  /axe-core@4.7.0:
-    resolution: {integrity: sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==}
-    engines: {node: '>=4'}
-    dev: true
-
   /axios@1.6.2:
     resolution: {integrity: sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==}
     dependencies:
@@ -3107,21 +2971,6 @@ packages:
       - debug
     dev: false
 
-  /axobject-query@3.2.1:
-    resolution: {integrity: sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==}
-    dependencies:
-      dequal: 2.0.3
-    dev: true
-
-  /babel-plugin-macros@3.1.0:
-    resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
-    engines: {node: '>=10', npm: '>=6'}
-    dependencies:
-      '@babel/runtime': 7.23.2
-      cosmiconfig: 7.1.0
-      resolve: 1.22.8
-    dev: false
-
   /bail@2.0.2:
     resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
     dev: false
@@ -3640,10 +3489,6 @@ packages:
       split2: 4.2.0
     dev: true
 
-  /convert-source-map@1.9.0:
-    resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
-    dev: false
-
   /convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
@@ -3694,6 +3539,7 @@ packages:
       parse-json: 5.2.0
       path-type: 4.0.0
       yaml: 1.10.2
+    dev: true
 
   /cosmiconfig@8.3.6(typescript@5.3.3):
     resolution: {integrity: sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==}
@@ -4174,10 +4020,6 @@ packages:
       lodash-es: 4.17.21
     dev: false
 
-  /damerau-levenshtein@1.0.8:
-    resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
-    dev: true
-
   /dargs@7.0.0:
     resolution: {integrity: sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==}
     engines: {node: '>=8'}
@@ -4203,6 +4045,7 @@ packages:
         optional: true
     dependencies:
       ms: 2.1.3
+    dev: false
 
   /debug@4.3.4:
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
@@ -4376,6 +4219,7 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       esutils: 2.0.3
+    dev: false
 
   /doctrine@3.0.0:
     resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
@@ -4434,6 +4278,7 @@ packages:
     dependencies:
       graceful-fs: 4.2.11
       tapable: 2.2.1
+    dev: false
 
   /enquirer@2.4.1:
     resolution: {integrity: sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==}
@@ -4452,6 +4297,7 @@ packages:
     requiresBuild: true
     dependencies:
       is-arrayish: 0.2.1
+    dev: true
 
   /es-abstract@1.22.3:
     resolution: {integrity: sha512-eiiY8HQeYfYH2Con2berK+To6GrK2RxbPawDkGq4UiCQQfZHb6wX9qQqkbpPqaxQFcl8d9QzZqo0tGE0VcrdwA==}
@@ -4528,6 +4374,7 @@ packages:
       internal-slot: 1.0.6
       iterator.prototype: 1.1.2
       safe-array-concat: 1.0.1
+    dev: false
 
   /es-set-tostringtag@2.0.2:
     resolution: {integrity: sha512-BuDyupZt65P9D2D2vA/zqcI3G5xRsklm5N3xCwuiy+/vKy8i0ifdsQP1sLgO4tZDSCaQUSnmC48khknGMV3D2Q==}
@@ -4601,31 +4448,6 @@ packages:
     engines: {node: '>=12'}
     dev: false
 
-  /eslint-config-next@14.0.3(eslint@8.55.0)(typescript@5.3.3):
-    resolution: {integrity: sha512-IKPhpLdpSUyKofmsXUfrvBC49JMUTdeaD8ZIH4v9Vk0sC1X6URTuTJCLtA0Vwuj7V/CQh0oISuSTvNn5//Buew==}
-    peerDependencies:
-      eslint: ^7.23.0 || ^8.0.0
-      typescript: '>=3.3.1'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      '@next/eslint-plugin-next': 14.0.3
-      '@rushstack/eslint-patch': 1.5.1
-      '@typescript-eslint/parser': 6.12.0(eslint@8.55.0)(typescript@5.3.3)
-      eslint: 8.55.0
-      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.12.0)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.0)(eslint@8.55.0)
-      eslint-plugin-import: 2.29.0(@typescript-eslint/parser@6.12.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.55.0)
-      eslint-plugin-jsx-a11y: 6.8.0(eslint@8.55.0)
-      eslint-plugin-react: 7.33.2(eslint@8.55.0)
-      eslint-plugin-react-hooks: 4.6.0(eslint@8.55.0)
-      typescript: 5.3.3
-    transitivePeerDependencies:
-      - eslint-import-resolver-webpack
-      - supports-color
-    dev: true
-
   /eslint-config-prettier@9.1.0(eslint@8.55.0):
     resolution: {integrity: sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==}
     hasBin: true
@@ -4657,8 +4479,9 @@ packages:
       resolve: 1.22.8
     transitivePeerDependencies:
       - supports-color
+    dev: false
 
-  /eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.12.0)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.0)(eslint@8.55.0):
+  /eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.12.0)(eslint-plugin-import@2.29.0)(eslint@8.55.0):
     resolution: {integrity: sha512-xgdptdoi5W3niYeuQxKmzVDTATvLYqhpwmykwsh7f6HIOStGWEIL9iqZgQDF9u9OEzrRwR8no5q2VT+bjAujTg==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
@@ -4679,6 +4502,7 @@ packages:
       - eslint-import-resolver-node
       - eslint-import-resolver-webpack
       - supports-color
+    dev: false
 
   /eslint-module-utils@2.8.0(@typescript-eslint/parser@6.12.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.55.0):
     resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==}
@@ -4705,9 +4529,10 @@ packages:
       debug: 3.2.7
       eslint: 8.55.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.12.0)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.0)(eslint@8.55.0)
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.12.0)(eslint-plugin-import@2.29.0)(eslint@8.55.0)
     transitivePeerDependencies:
       - supports-color
+    dev: false
 
   /eslint-plugin-import@2.29.0(@typescript-eslint/parser@6.12.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.55.0):
     resolution: {integrity: sha512-QPOO5NO6Odv5lpoTkddtutccQjysJuFxoPS7fAHO+9m9udNHvTCPSAMW9zGAYj8lAIdr40I8yPCdUYrncXtrwg==}
@@ -4742,6 +4567,7 @@ packages:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
       - supports-color
+    dev: false
 
   /eslint-plugin-jsdoc@46.9.0(eslint@8.55.0):
     resolution: {integrity: sha512-UQuEtbqLNkPf5Nr/6PPRCtr9xypXY+g8y/Q7gPa0YK7eDhh0y2lWprXRnaYbW7ACgIUvpDKy9X2bZqxtGzBG9Q==}
@@ -4763,31 +4589,6 @@ packages:
       - supports-color
     dev: false
 
-  /eslint-plugin-jsx-a11y@6.8.0(eslint@8.55.0):
-    resolution: {integrity: sha512-Hdh937BS3KdwwbBaKd5+PLCOmYY6U4f2h9Z2ktwtNKvIdIEu137rjYbcb9ApSbVJfWxANNuiKTD/9tOKjK9qOA==}
-    engines: {node: '>=4.0'}
-    peerDependencies:
-      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
-    dependencies:
-      '@babel/runtime': 7.23.2
-      aria-query: 5.3.0
-      array-includes: 3.1.7
-      array.prototype.flatmap: 1.3.2
-      ast-types-flow: 0.0.8
-      axe-core: 4.7.0
-      axobject-query: 3.2.1
-      damerau-levenshtein: 1.0.8
-      emoji-regex: 9.2.2
-      es-iterator-helpers: 1.0.15
-      eslint: 8.55.0
-      hasown: 2.0.0
-      jsx-ast-utils: 3.3.5
-      language-tags: 1.0.9
-      minimatch: 3.1.2
-      object.entries: 1.1.7
-      object.fromentries: 2.0.7
-    dev: true
-
   /eslint-plugin-prettier@5.0.1(eslint-config-prettier@9.1.0)(eslint@8.55.0)(prettier@3.1.0):
     resolution: {integrity: sha512-m3u5RnR56asrwV/lDC4GHorlW75DsFfmUcjfCYylTUs85dBRnB7VM6xG8eCMJdeDRnppzmxZVf1GEPJvl1JmNg==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -4816,6 +4617,7 @@ packages:
       eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
     dependencies:
       eslint: 8.55.0
+    dev: false
 
   /eslint-plugin-react@7.33.2(eslint@8.55.0):
     resolution: {integrity: sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw==}
@@ -4840,6 +4642,7 @@ packages:
       resolve: 2.0.0-next.5
       semver: 6.3.1
       string.prototype.matchall: 4.0.10
+    dev: false
 
   /eslint-plugin-vitest@0.3.10(eslint@8.55.0)(typescript@5.3.3)(vitest@1.0.0-beta.6):
     resolution: {integrity: sha512-08lj4rdhZHYyHk+Py2nJ7SlE6arP8GNfGXl9jVqhe9s5JoZIGiBpIkLGX+VNBiB6vXTn56H6Ant7Koc6XzRjtQ==}
@@ -5124,6 +4927,7 @@ packages:
       glob-parent: 5.1.2
       merge2: 1.4.1
       micromatch: 4.0.5
+    dev: false
 
   /fast-glob@3.3.2:
     resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
@@ -5181,6 +4985,7 @@ packages:
 
   /find-root@1.1.0:
     resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
+    dev: true
 
   /find-up@4.1.0:
     resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
@@ -5403,6 +5208,7 @@ packages:
     resolution: {integrity: sha512-wuMsz4leaj5hbGgg4IvDU0bqJagpftG5l5cXIAvo8uZrqn0NJqwtfupTN00VnkQJPcIRrxYrm1Ue24btpCha2A==}
     dependencies:
       resolve-pkg-maps: 1.0.0
+    dev: false
 
   /git-raw-commits@2.0.11:
     resolution: {integrity: sha512-VnctFhw+xfj8Va1xtfEqCUD2XDrbAPSJx+hSrE5K7fGdjZruW7XV+QOrN7LF/RJyvspRiD2I0asWsxFp0ya26A==}
@@ -5782,12 +5588,6 @@ packages:
     resolution: {integrity: sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg==}
     dev: false
 
-  /hoist-non-react-statics@3.3.2:
-    resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
-    dependencies:
-      react-is: 16.13.1
-    dev: false
-
   /homedir-polyfill@1.0.3:
     resolution: {integrity: sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==}
     engines: {node: '>=0.10.0'}
@@ -6007,12 +5807,14 @@ packages:
   /is-arrayish@0.2.1:
     resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
     requiresBuild: true
+    dev: true
 
   /is-async-function@2.0.0:
     resolution: {integrity: sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==}
     engines: {node: '>= 0.4'}
     dependencies:
       has-tostringtag: 1.0.0
+    dev: false
 
   /is-bigint@1.0.4:
     resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
@@ -6089,6 +5891,7 @@ packages:
     resolution: {integrity: sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==}
     dependencies:
       call-bind: 1.0.5
+    dev: false
 
   /is-fullwidth-code-point@3.0.0:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
@@ -6105,6 +5908,7 @@ packages:
     engines: {node: '>= 0.4'}
     dependencies:
       has-tostringtag: 1.0.0
+    dev: false
 
   /is-glob@4.0.3:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
@@ -6353,6 +6157,7 @@ packages:
       has-symbols: 1.0.3
       reflect.getprototypeof: 1.0.4
       set-function-name: 2.0.1
+    dev: false
 
   /jackspeak@2.3.6:
     resolution: {integrity: sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==}
@@ -6493,6 +6298,7 @@ packages:
   /json-parse-even-better-errors@2.3.1:
     resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
     requiresBuild: true
+    dev: true
 
   /json-schema-traverse@0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
@@ -6510,6 +6316,7 @@ packages:
     hasBin: true
     dependencies:
       minimist: 1.2.8
+    dev: false
 
   /json5@2.2.3:
     resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
@@ -6546,6 +6353,7 @@ packages:
       array.prototype.flat: 1.3.2
       object.assign: 4.1.4
       object.values: 1.1.7
+    dev: false
 
   /katex@0.16.9:
     resolution: {integrity: sha512-fsSYjWS0EEOwvy81j3vRA8TEAhQhKiqO+FQaKWp0m39qwOzHVBgAUBIXWj1pB+O2W3fIpNa6Y9KSKCVbfPhyAQ==}
@@ -6571,17 +6379,6 @@ packages:
     resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
     engines: {node: '>=6'}
 
-  /language-subtag-registry@0.3.22:
-    resolution: {integrity: sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==}
-    dev: true
-
-  /language-tags@1.0.9:
-    resolution: {integrity: sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==}
-    engines: {node: '>=0.10'}
-    dependencies:
-      language-subtag-registry: 0.3.22
-    dev: true
-
   /layout-base@1.0.2:
     resolution: {integrity: sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg==}
     dev: false
@@ -6604,6 +6401,7 @@ packages:
 
   /lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+    dev: true
 
   /lint-staged@15.1.0:
     resolution: {integrity: sha512-ZPKXWHVlL7uwVpy8OZ7YQjYDAuO5X4kMh0XgZvPNxLcCCngd0PO5jKQyy3+s4TL2EnHoIXIzP1422f/l3nZKMw==}
@@ -7644,6 +7442,7 @@ packages:
 
   /ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+    dev: false
 
   /ms@3.0.0-canary.1:
     resolution: {integrity: sha512-kh8ARjh8rMN7Du2igDRO9QJnqCb2xYTJxyQYK7vJJS4TvLLmsbyhiKpSW+t+y26gyOyMd0riphX0GeWKU3ky5g==}
@@ -7953,6 +7752,7 @@ packages:
       call-bind: 1.0.5
       define-properties: 1.2.1
       es-abstract: 1.22.3
+    dev: false
 
   /object.fromentries@2.0.7:
     resolution: {integrity: sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==}
@@ -7961,6 +7761,7 @@ packages:
       call-bind: 1.0.5
       define-properties: 1.2.1
       es-abstract: 1.22.3
+    dev: false
 
   /object.groupby@1.0.1:
     resolution: {integrity: sha512-HqaQtqLnp/8Bn4GL16cj+CUYbnpe1bh0TtEaWvybszDG4tgxCJuRpV8VGuvNaI1fAnI4lUJzDG55MXcOH4JZcQ==}
@@ -7969,12 +7770,14 @@ packages:
       define-properties: 1.2.1
       es-abstract: 1.22.3
       get-intrinsic: 1.2.2
+    dev: false
 
   /object.hasown@1.1.3:
     resolution: {integrity: sha512-fFI4VcYpRHvSLXxP7yiZOMAd331cPfd2p7PFDVbgUsYOfCT3tICVqXWngbjr4m49OvsBwUBQ6O2uQoJvy3RexA==}
     dependencies:
       define-properties: 1.2.1
       es-abstract: 1.22.3
+    dev: false
 
   /object.values@1.1.7:
     resolution: {integrity: sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==}
@@ -7983,6 +7786,7 @@ packages:
       call-bind: 1.0.5
       define-properties: 1.2.1
       es-abstract: 1.22.3
+    dev: false
 
   /once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
@@ -8162,6 +7966,7 @@ packages:
       error-ex: 1.3.2
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
+    dev: true
 
   /parse-numeric-range@1.3.0:
     resolution: {integrity: sha512-twN+njEipszzlMJd4ONUYgSfZPDxgHhT9Ahed5uTigpQn90FggW4SA/AIPq/6a149fTbE9qBEcSwE3FAEp6wQQ==}
@@ -8406,6 +8211,58 @@ packages:
       fast-diff: 1.3.0
     dev: false
 
+  /prettier-plugin-tailwindcss@0.5.9(prettier@3.1.0):
+    resolution: {integrity: sha512-9x3t1s2Cjbut2QiP+O0mDqV3gLXTe2CgRlQDgucopVkUdw26sQi53p/q4qvGxMLBDfk/dcTV57Aa/zYwz9l8Ew==}
+    engines: {node: '>=14.21.3'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      prettier: ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-import-sort: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-style-order: '*'
+      prettier-plugin-svelte: '*'
+      prettier-plugin-twig-melody: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-import-sort:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-style-order:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+      prettier-plugin-twig-melody:
+        optional: true
+    dependencies:
+      prettier: 3.1.0
+    dev: true
+
   /prettier@2.8.8:
     resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
     engines: {node: '>=10.13.0'}
@@ -8440,6 +8297,7 @@ packages:
       loose-envify: 1.4.0
       object-assign: 4.1.1
       react-is: 16.13.1
+    dev: false
 
   /property-information@6.4.0:
     resolution: {integrity: sha512-9t5qARVofg2xQqKtytzt+lZ4d1Qvj8t5B8fEwXK6qOfgRLgH/b13QlgEyDh033NOS31nXeFbYv7CLUDG1CeifQ==}
@@ -8499,6 +8357,7 @@ packages:
 
   /react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+    dev: false
 
   /react-is@17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
@@ -8592,6 +8451,7 @@ packages:
       get-intrinsic: 1.2.2
       globalthis: 1.0.3
       which-builtin-type: 1.1.3
+    dev: false
 
   /regenerator-runtime@0.14.0:
     resolution: {integrity: sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==}
@@ -8746,6 +8606,7 @@ packages:
 
   /resolve-pkg-maps@1.0.0:
     resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+    dev: false
 
   /resolve@1.22.8:
     resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
@@ -8762,6 +8623,7 @@ packages:
       is-core-module: 2.13.1
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
+    dev: false
 
   /restore-cursor@3.1.0:
     resolution: {integrity: sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==}
@@ -9102,11 +8964,6 @@ packages:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
 
-  /source-map@0.5.7:
-    resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
   /source-map@0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
@@ -9234,6 +9091,7 @@ packages:
       regexp.prototype.flags: 1.5.1
       set-function-name: 2.0.1
       side-channel: 1.0.4
+    dev: false
 
   /string.prototype.trim@1.2.8:
     resolution: {integrity: sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==}
@@ -9350,10 +9208,6 @@ packages:
       react: 18.2.0
     dev: false
 
-  /stylis@4.2.0:
-    resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}
-    dev: false
-
   /stylis@4.3.0:
     resolution: {integrity: sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==}
     dev: false
@@ -9447,7 +9301,7 @@ packages:
       chokidar: 3.5.3
       didyoumean: 1.2.2
       dlv: 1.1.3
-      fast-glob: 3.3.1
+      fast-glob: 3.3.2
       glob-parent: 6.0.2
       is-glob: 4.0.3
       jiti: 1.21.0
@@ -9471,6 +9325,7 @@ packages:
   /tapable@2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}
+    dev: false
 
   /term-size@2.2.1:
     resolution: {integrity: sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==}
@@ -9615,6 +9470,7 @@ packages:
       typescript: '>=4.2.0'
     dependencies:
       typescript: 5.3.3
+    dev: false
 
   /ts-dedent@2.2.0:
     resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==}
@@ -9636,6 +9492,7 @@ packages:
       json5: 1.0.2
       minimist: 1.2.8
       strip-bom: 3.0.0
+    dev: false
 
   /tsd@0.29.0:
     resolution: {integrity: sha512-5B7jbTj+XLMg6rb9sXRBGwzv7h8KJlGOkTHxY63eWpZJiQ5vJbXEjL0u7JkIxwi5EsrRE1kRVUWmy6buK/ii8A==}
@@ -10371,6 +10228,7 @@ packages:
       which-boxed-primitive: 1.0.2
       which-collection: 1.0.1
       which-typed-array: 1.1.13
+    dev: false
 
   /which-collection@1.0.1:
     resolution: {integrity: sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==}
@@ -10512,6 +10370,7 @@ packages:
   /yaml@1.10.2:
     resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
     engines: {node: '>= 6'}
+    dev: true
 
   /yaml@2.3.4:
     resolution: {integrity: sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==}
diff --git a/prettier.config.mjs b/prettier.config.mjs
new file mode 100644
index 000000000..fbe6b8b15
--- /dev/null
+++ b/prettier.config.mjs
@@ -0,0 +1,15 @@
+/** @type {import("prettier").Config} */
+export default {
+  arrowParens: 'always',
+  bracketSameLine: false,
+  bracketSpacing: true,
+  endOfLine: 'lf',
+  jsxSingleQuote: false,
+  printWidth: 120,
+  proseWrap: 'preserve',
+  quoteProps: 'as-needed',
+  semi: false,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'es5',
+}
diff --git a/websites/visualization/package.json b/websites/visualization/package.json
index a52df57f6..531495441 100644
--- a/websites/visualization/package.json
+++ b/websites/visualization/package.json
@@ -21,9 +21,6 @@
     "type:check": "tsc --noEmit"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
-    "@jsxcss/emotion": "^1.3.9",
     "@suspensive/react": "workspace:*",
     "@suspensive/react-await": "workspace:*",
     "@suspensive/react-image": "workspace:*",
@@ -39,6 +36,8 @@
     "@next/eslint-plugin-next": "14.0.3",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.15",
-    "eslint-config-next": "^14.0.3"
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^3.3.5"
   }
 }
diff --git a/websites/visualization/postcss.config.js b/websites/visualization/postcss.config.js
new file mode 100644
index 000000000..33ad091d2
--- /dev/null
+++ b/websites/visualization/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/websites/visualization/prettier.config.mjs b/websites/visualization/prettier.config.mjs
new file mode 100644
index 000000000..006014e0f
--- /dev/null
+++ b/websites/visualization/prettier.config.mjs
@@ -0,0 +1,8 @@
+import rootConfig from "../../prettier.config.mjs";
+
+/** @type {import("prettier").Config} */
+export default {
+  ...rootConfig,
+  plugins: ["prettier-plugin-tailwindcss"],
+  tailwindConfig: "./tailwind.config.js",
+};
diff --git a/websites/visualization/src/app/CommonLayout.tsx b/websites/visualization/src/app/CommonLayout.tsx
deleted file mode 100644
index 5cc9c0c09..000000000
--- a/websites/visualization/src/app/CommonLayout.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-/** @jsxImportSource @emotion/react */
-'use client'
-
-import { Flex } from '@jsxcss/emotion'
-import Image from 'next/image'
-import Link from 'next/link'
-import type { PropsWithChildren } from 'react'
-
-export const CommonLayout = ({ children }: PropsWithChildren) => {
-  return (
-    <>
-      <TopNavigation />
-      <Link href="/react-image">🔗 Go to @suspensive/react-image</Link>
-      <Flex.Center flex={1}>{children}</Flex.Center>
-    </>
-  )
-}
-
-const TopNavigation = () => (
-  <Flex.Center as={'nav'} padding={'8px 16px'} fontWeight={500} backgroundColor={'#ffffff20'}>
-    <Link href="/">
-      <Flex align={'center'}>
-        <Image src="/logo_not_cropped.png" width={40} height={40} alt="logo" />
-        Visualization
-      </Flex>
-    </Link>
-  </Flex.Center>
-)
diff --git a/websites/visualization/src/app/global.css b/websites/visualization/src/app/global.css
index 2ba61595e..1b2a9dbf7 100644
--- a/websites/visualization/src/app/global.css
+++ b/websites/visualization/src/app/global.css
@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 html,
 body,
 #__next {
diff --git a/websites/visualization/src/app/layout.tsx b/websites/visualization/src/app/layout.tsx
index 2a689dbe8..a04d5e976 100644
--- a/websites/visualization/src/app/layout.tsx
+++ b/websites/visualization/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import './global.css'
 import type { Metadata } from 'next'
-import { CommonLayout } from './CommonLayout'
+import Image from 'next/image'
+import Link from 'next/link'
 import { Providers } from './providers'
 
 export const metadata: Metadata = {
@@ -12,7 +13,16 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     <html lang="en">
       <body>
         <Providers>
-          <CommonLayout>{children}</CommonLayout>
+          <nav className="flex items-center justify-center bg-white/[.06] px-4 py-2 font-bold">
+            <Link href="/">
+              <div className="flex items-center justify-center">
+                <Image src="/logo_not_cropped.png" width={40} height={40} alt="logo" />
+                Visualization
+              </div>
+            </Link>
+          </nav>
+          <Link href="/react-image">🔗 Go to @suspensive/react-image</Link>
+          <div className="flex flex-1 items-center justify-center">{children}</div>
         </Providers>
       </body>
     </html>
diff --git a/websites/visualization/src/app/page.tsx b/websites/visualization/src/app/page.tsx
index ebfc017d6..fb5644a63 100644
--- a/websites/visualization/src/app/page.tsx
+++ b/websites/visualization/src/app/page.tsx
@@ -1,23 +1,19 @@
-/** @jsxImportSource @emotion/react */
-'use client'
-
-import { Flex } from '@jsxcss/emotion'
 import Link from 'next/link'
 import { Area, Box } from '~/components/uis'
 
 export default function Home() {
   return (
-    <Flex flex={1} justify={'center'} margin={'-5vh 16px 0 16px'}>
+    <div className="-mt-5 ml-4 mr-4 flex flex-1 justify-center">
       <Area title="Check Concepts">
-        <Flex justify={'space-between'} gap={16} direction={['column', 'row']}>
-          <Link href="/react" style={{ flex: 1 }}>
+        <div className="flex flex-col justify-between gap-4 md:flex-row">
+          <Link href="/react" className="flex-1">
             <Box.Default>🔗 @suspensive/react</Box.Default>
           </Link>
-          <Link href="/react-query" style={{ flex: 1 }}>
+          <Link href="/react-query" className="flex-1">
             <Box.Default>🔗 @suspensive/react-query</Box.Default>
           </Link>
-        </Flex>
+        </div>
       </Area>
-    </Flex>
+    </div>
   )
 }
diff --git a/websites/visualization/src/app/providers.tsx b/websites/visualization/src/app/providers.tsx
index 39954f82f..f7c6b0242 100644
--- a/websites/visualization/src/app/providers.tsx
+++ b/websites/visualization/src/app/providers.tsx
@@ -1,7 +1,5 @@
-/** @jsxImportSource @emotion/react */
 'use client'
 
-import { MediaQueryProvider } from '@jsxcss/emotion'
 import { Suspensive, SuspensiveProvider } from '@suspensive/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
@@ -28,12 +26,10 @@ const suspensive = new Suspensive({
 })
 
 export const Providers = ({ children }: PropsWithChildren) => (
-  <MediaQueryProvider>
-    <SuspensiveProvider value={suspensive}>
-      <QueryClientProvider client={queryClient}>
-        {children}
-        <ReactQueryDevtools initialIsOpen={false} />
-      </QueryClientProvider>
-    </SuspensiveProvider>
-  </MediaQueryProvider>
+  <SuspensiveProvider value={suspensive}>
+    <QueryClientProvider client={queryClient}>
+      {children}
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  </SuspensiveProvider>
 )
diff --git a/websites/visualization/src/app/react-await/page.tsx b/websites/visualization/src/app/react-await/page.tsx
index 626bb849f..58c9a4077 100644
--- a/websites/visualization/src/app/react-await/page.tsx
+++ b/websites/visualization/src/app/react-await/page.tsx
@@ -1,6 +1,5 @@
 'use client'
 
-import { Stack } from '@jsxcss/emotion'
 import { ErrorBoundary, Suspense } from '@suspensive/react'
 import { Await } from '@suspensive/react-await'
 import { api } from '~/utils'
@@ -8,7 +7,7 @@ import { api } from '~/utils'
 export default function Page() {
   return (
     <ErrorBoundary fallback={() => <div>error</div>}>
-      <Stack.Vertical>
+      <div className="flex flex-col">
         <Suspense.CSROnly fallback={<div>loading...</div>}>
           <Await
             options={{
@@ -40,7 +39,12 @@ export default function Page() {
           </Await>
         </Suspense.CSROnly>
         <Suspense.CSROnly fallback={<div>loading...</div>}>
-          <Await options={{ key: [2000] as const, fn: ({ key: [ms] }) => api.delay(ms, { percentage: 100 }) }}>
+          <Await
+            options={{
+              key: [2000] as const,
+              fn: ({ key: [ms] }) => api.delay(ms, { percentage: 100 }),
+            }}
+          >
             {(awaited) => (
               <div>
                 <button onClick={awaited.reset}>Try again</button>
@@ -64,11 +68,16 @@ export default function Page() {
             )}
           </Await>
         </Suspense.CSROnly>
-      </Stack.Vertical>
+      </div>
 
-      <Stack.Vertical>
+      <div className="flex flex-col">
         <Suspense.CSROnly fallback={<div>loading...</div>}>
-          <Await options={{ key: [3000] as const, fn: ({ key: [ms] }) => api.delay(ms, { percentage: 100 }) }}>
+          <Await
+            options={{
+              key: [3000] as const,
+              fn: ({ key: [ms] }) => api.delay(ms, { percentage: 100 }),
+            }}
+          >
             {(awaited) => (
               <div>
                 <button onClick={awaited.reset}>Try again</button>
@@ -78,7 +87,12 @@ export default function Page() {
           </Await>
         </Suspense.CSROnly>
         <Suspense.CSROnly fallback={<div>loading...</div>}>
-          <Await options={{ key: [4000] as const, fn: ({ key: [ms] }) => api.delay(ms, { percentage: 100 }) }}>
+          <Await
+            options={{
+              key: [4000] as const,
+              fn: ({ key: [ms] }) => api.delay(ms, { percentage: 100 }),
+            }}
+          >
             {(awaited) => (
               <div>
                 <button onClick={awaited.reset}>Try again</button>
@@ -88,7 +102,12 @@ export default function Page() {
           </Await>
         </Suspense.CSROnly>
         <Suspense.CSROnly fallback={<div>loading...</div>}>
-          <Await options={{ key: [4000] as const, fn: ({ key: [ms] }) => api.delay(ms, { percentage: 100 }) }}>
+          <Await
+            options={{
+              key: [4000] as const,
+              fn: ({ key: [ms] }) => api.delay(ms, { percentage: 100 }),
+            }}
+          >
             {(awaited) => (
               <div>
                 <button onClick={awaited.reset}>Try again</button>
@@ -97,7 +116,7 @@ export default function Page() {
             )}
           </Await>
         </Suspense.CSROnly>
-      </Stack.Vertical>
+      </div>
     </ErrorBoundary>
   )
 }
diff --git a/websites/visualization/src/app/react-image/page.tsx b/websites/visualization/src/app/react-image/page.tsx
index 1cd21cf5a..d23760c88 100644
--- a/websites/visualization/src/app/react-image/page.tsx
+++ b/websites/visualization/src/app/react-image/page.tsx
@@ -1,6 +1,5 @@
 'use client'
 
-import { Stack } from '@jsxcss/emotion'
 import { wrap } from '@suspensive/react'
 import { Image } from '@suspensive/react-image'
 
@@ -9,11 +8,11 @@ export default wrap
   .Suspense.CSROnly({ fallback: 'loading...' })
   .on(function Page() {
     return (
-      <Stack.Vertical>
+      <div className="flex flex-col">
         <Image src="https://placehold.co/200x100" />
         <Image src="https://placehold.co/200" />
         <Image src="https://placehold.co/200x150/000000/FFFFFF/png" />
         <Image src="https://placehold.co/200x150?text=Hello+World" />
-      </Stack.Vertical>
+      </div>
     )
   })
diff --git a/websites/visualization/src/app/react-query/page.tsx b/websites/visualization/src/app/react-query/page.tsx
index 3bc7e7700..a8924b9ad 100644
--- a/websites/visualization/src/app/react-query/page.tsx
+++ b/websites/visualization/src/app/react-query/page.tsx
@@ -1,30 +1,25 @@
 'use client'
 
-import { ErrorBoundary, ErrorBoundaryGroup, Suspense, withErrorBoundaryGroup } from '@suspensive/react'
+import { ErrorBoundary, ErrorBoundaryGroup, Suspense, wrap } from '@suspensive/react'
 import { QueryErrorBoundary } from '@suspensive/react-query'
 import { useQueryErrorResetBoundary } from '@tanstack/react-query'
-import Link from 'next/link'
-import { RejectedFallback, UseSuspenseQuery } from '~/components'
-import { Area, Box, Button, Spinner } from '~/components/uis'
+import { UseSuspenseQuery } from '~/components'
+import { Area, Button, RejectedFallback, Spinner } from '~/components/uis'
 import { api } from '~/utils/api'
 
-export default withErrorBoundaryGroup(function Page() {
+export default wrap.ErrorBoundaryGroup({}).on(function Page() {
   const queryErrorResetBoundary = useQueryErrorResetBoundary()
 
   return (
     <Area title="ErrorBoundaryGroup">
-      <ErrorBoundaryGroup.Reset
-        trigger={({ reset }) => (
-          <Button style={{ alignSelf: 'end' }} onClick={reset}>
-            ↻
-          </Button>
-        )}
-      />
+      <div className="text-right">
+        <ErrorBoundaryGroup.Reset trigger={(group) => <Button onClick={group.reset}>↻</Button>} />
+      </div>
       <Area title="QueryErrorResetBoundary + ErrorBoundary + Suspense">
         <ErrorBoundary onReset={queryErrorResetBoundary.reset} fallback={RejectedFallback}>
           <Suspense.CSROnly fallback={<Spinner />}>
-            <UseSuspenseQuery queryKey={['query', 1]} queryFn={() => api.delay(500, { percentage: 40 })} />
-            <UseSuspenseQuery queryKey={['query', 2]} queryFn={() => api.delay(500, { percentage: 40 })} />
+            <UseSuspenseQuery queryKey={['query', 1] as const} queryFn={() => api.delay(500, { percentage: 40 })} />
+            <UseSuspenseQuery queryKey={['query', 2] as const} queryFn={() => api.delay(500, { percentage: 40 })} />
           </Suspense.CSROnly>
         </ErrorBoundary>
       </Area>
@@ -32,17 +27,11 @@ export default withErrorBoundaryGroup(function Page() {
       <Area title="QueryErrorBoundary + Suspense">
         <QueryErrorBoundary fallback={RejectedFallback}>
           <Suspense.CSROnly fallback={<Spinner />}>
-            <UseSuspenseQuery queryKey={['query', 3]} queryFn={() => api.delay(500, { percentage: 40 })} />
-            <UseSuspenseQuery queryKey={['query', 4]} queryFn={() => api.delay(500, { percentage: 40 })} />
+            <UseSuspenseQuery queryKey={['query', 3] as const} queryFn={() => api.delay(500, { percentage: 40 })} />
+            <UseSuspenseQuery queryKey={['query', 4] as const} queryFn={() => api.delay(500, { percentage: 40 })} />
           </Suspense.CSROnly>
         </QueryErrorBoundary>
       </Area>
-
-      <Area title="Playground">
-        <Link href="/react-query/playground" style={{ flex: 1 }}>
-          <Box.Default>🔗 @tanstack/react-query vs @suspensive/react-query</Box.Default>
-        </Link>
-      </Area>
     </Area>
   )
 })
diff --git a/websites/visualization/src/app/react-query/playground/components/api.tsx b/websites/visualization/src/app/react-query/playground/components/api.tsx
deleted file mode 100644
index 920575730..000000000
--- a/websites/visualization/src/app/react-query/playground/components/api.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import axios from 'axios'
-import { delay } from '~/utils/delay'
-
-const delayRandom = (maxMs = 1000) => delay(maxMs * Math.random())
-
-export type Post = { id: number; title: string; body: string; userId: number }
-export type Album = { id: number; title: string; userId: number }
-export type Todo = { id: number; title: string; completed: boolean; userId: number }
-
-export const posts = {
-  getMany: async () => {
-    await delayRandom(1500)
-    return axios.get<Post[]>('https://jsonplaceholder.typicode.com/posts').then(({ data }) => data)
-  },
-  getOneBy: async ({ id }: { id: Post['id'] }) => {
-    await delayRandom(1500)
-    return axios.get<Post>(`https://jsonplaceholder.typicode.com/posts/${id}`).then(({ data }) => data)
-  },
-}
-
-export const albums = {
-  getManyBy: async ({ userId }: { userId: number }) => {
-    await delayRandom(1500)
-    return axios
-      .get<Album[]>(`https://jsonplaceholder.typicode.com/users/${userId}/albums`)
-      .then(({ data }) => data.splice(0, 2))
-  },
-}
-
-export const todos = {
-  getManyBy: async ({ userId }: { userId: number }) => {
-    await delayRandom(1500)
-    return axios
-      .get<Todo[]>(`https://jsonplaceholder.typicode.com/users/${userId}/todos`)
-      .then(({ data }) => data.splice(0, 2))
-  },
-}
diff --git a/websites/visualization/src/app/react-query/playground/components/index.ts b/websites/visualization/src/app/react-query/playground/components/index.ts
deleted file mode 100644
index 60f60d2d8..000000000
--- a/websites/visualization/src/app/react-query/playground/components/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { PostListSuspensive } from './suspensive'
-export { PostListTanStack } from './tanstack'
diff --git a/websites/visualization/src/app/react-query/playground/components/suspensive.tsx b/websites/visualization/src/app/react-query/playground/components/suspensive.tsx
deleted file mode 100644
index 1db435b51..000000000
--- a/websites/visualization/src/app/react-query/playground/components/suspensive.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { Suspense } from '@suspensive/react'
-import { useSuspenseQueries, useSuspenseQuery } from '@suspensive/react-query'
-import { useEffect, useRef, useState } from 'react'
-import type { Post } from './api'
-import { albums, posts, todos } from './api'
-import { useIntersectionObserver } from './useIntersectionObserver'
-
-export const PostListSuspensive = () => {
-  const postsQuery = useSuspenseQuery({
-    queryKey: ['posts'] as const,
-    queryFn: posts.getMany,
-  })
-
-  return (
-    <ul style={{ maxWidth: 600 }}>
-      {postsQuery.data.map((post) => (
-        <PostListItem key={post.id} post={post} />
-      ))}
-    </ul>
-  )
-}
-
-const PostListItem = ({ post }: { post: Post }) => {
-  const ref = useRef(null)
-  const entry = useIntersectionObserver(ref)
-  const [isShow, setIsShow] = useState(false)
-
-  useEffect(() => {
-    if (entry?.isIntersecting) {
-      setIsShow(true)
-    }
-  }, [entry?.isIntersecting])
-
-  return (
-    <li key={post.id} ref={ref} style={{ minHeight: 200 }}>
-      <h3>Title: {post.title}</h3>
-      {isShow && (
-        <Suspense.CSROnly>
-          <PostContent id={post.id} />
-        </Suspense.CSROnly>
-      )}
-    </li>
-  )
-}
-
-const PostContent = ({ id }: { id: number }) => {
-  const postQuery = useSuspenseQuery({
-    queryKey: ['suspensive', 'posts', id] as const,
-    queryFn: () => posts.getOneBy({ id }),
-  })
-  const [albumsQuery, todosQuery] = useSuspenseQueries({
-    queries: [
-      {
-        queryKey: ['suspensive', 'users', postQuery.data.userId, 'albums'],
-        queryFn: () => albums.getManyBy({ userId: postQuery.data.userId }),
-      },
-      {
-        queryKey: ['suspensive', 'users', postQuery.data.userId, 'todos'],
-        queryFn: () => todos.getManyBy({ userId: postQuery.data.userId }),
-      },
-    ] as const,
-  })
-
-  return (
-    <div>
-      <p>Body: {postQuery.data.body}</p>
-      <h5>Album List:</h5>
-      <ul>
-        {albumsQuery.data.map((album) => (
-          <li key={album.id}>{album.title}</li>
-        ))}
-      </ul>
-      <h5>Todo List:</h5>
-      <ul>
-        {todosQuery.data.map((todo) => (
-          <li key={todo.id}>
-            <button type="button">{todo.completed ? 'completed' : 'todo'}</button> {todo.title}
-          </li>
-        ))}
-      </ul>
-    </div>
-  )
-}
diff --git a/websites/visualization/src/app/react-query/playground/components/tanstack.tsx b/websites/visualization/src/app/react-query/playground/components/tanstack.tsx
deleted file mode 100644
index e50a93161..000000000
--- a/websites/visualization/src/app/react-query/playground/components/tanstack.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { Delay } from '@suspensive/react'
-import { useQueries, useQuery } from '@tanstack/react-query'
-import { useEffect, useRef, useState } from 'react'
-import type { Post } from './api'
-import { albums, posts, todos } from './api'
-import { useIntersectionObserver } from './useIntersectionObserver'
-import { Spinner } from '~/components/uis'
-
-export const PostListTanStack = () => {
-  const postsQuery = useQuery(['posts'], posts.getMany)
-
-  if (postsQuery.isLoading) {
-    return (
-      <Delay>
-        <Spinner />
-      </Delay>
-    )
-  }
-  if (postsQuery.isError) {
-    return <>error</>
-  }
-
-  return (
-    <ul style={{ maxWidth: 600 }}>
-      {postsQuery.data.map((post) => (
-        <PostListItem key={post.id} post={post} />
-      ))}
-    </ul>
-  )
-}
-
-const PostListItem = ({ post }: { post: Post }) => {
-  const ref = useRef(null)
-  const entry = useIntersectionObserver(ref)
-  const [isShow, setIsShow] = useState(false)
-
-  useEffect(() => {
-    if (entry?.isIntersecting) {
-      setIsShow(true)
-    }
-  }, [entry?.isIntersecting])
-
-  return (
-    <li key={post.id} ref={ref} style={{ minHeight: 200 }}>
-      <h3>Title: {post.title}</h3>
-      {isShow && <PostContent id={post.id} />}
-    </li>
-  )
-}
-
-const PostContent = ({ id }: { id: number }) => {
-  const postQuery = useQuery(['posts', id], () => posts.getOneBy({ id }))
-  const [albumsQuery, todosQuery] = useQueries({
-    queries: [
-      {
-        queryKey: ['tanstack', 'users', postQuery.data?.userId, 'albums'],
-        queryFn: () => albums.getManyBy({ userId: postQuery.data?.userId || 0 }),
-        enabled: !!postQuery.data?.userId,
-      },
-      {
-        queryKey: ['tanstack', 'users', postQuery.data?.userId, 'todos'],
-        queryFn: () => todos.getManyBy({ userId: postQuery.data?.userId || 0 }),
-        enabled: !!postQuery.data?.userId,
-      },
-    ],
-  })
-
-  if (postQuery.isLoading || albumsQuery.isLoading || todosQuery.isLoading) {
-    return (
-      <Delay>
-        <Spinner />
-      </Delay>
-    )
-  }
-  if (postQuery.isError || albumsQuery.isError || todosQuery.isError) {
-    return <>error</>
-  }
-
-  return (
-    <div>
-      <p>Body: {postQuery.data.body}</p>
-      <h5>Album List:</h5>
-      <ul>
-        {albumsQuery.data.map((album) => (
-          <li key={album.id}>{album.title}</li>
-        ))}
-      </ul>
-      <h5>Todo List:</h5>
-      <ul>
-        {todosQuery.data.map((todo) => (
-          <li key={todo.id}>
-            <button type="button">{todo.completed ? 'completed' : 'todo'}</button> {todo.title}
-          </li>
-        ))}
-      </ul>
-    </div>
-  )
-}
diff --git a/websites/visualization/src/app/react-query/playground/components/useIntersectionObserver.ts b/websites/visualization/src/app/react-query/playground/components/useIntersectionObserver.ts
deleted file mode 100644
index cd5625716..000000000
--- a/websites/visualization/src/app/react-query/playground/components/useIntersectionObserver.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import type { RefObject } from 'react'
-import { useEffect, useState } from 'react'
-
-interface Args extends IntersectionObserverInit {
-  freezeOnceVisible?: boolean
-}
-
-export function useIntersectionObserver(
-  elementRef: RefObject<Element>,
-  { threshold = 0, root = null, rootMargin = '0%', freezeOnceVisible = false }: Args = {}
-): IntersectionObserverEntry | undefined {
-  const [entry, setEntry] = useState<IntersectionObserverEntry>()
-
-  const frozen = entry?.isIntersecting && freezeOnceVisible
-
-  const updateEntry = ([entry]: IntersectionObserverEntry[]): void => {
-    setEntry(entry)
-  }
-
-  useEffect(() => {
-    const node = elementRef?.current // DOM Ref
-    const hasIOSupport = !!window.IntersectionObserver
-
-    if (!hasIOSupport || frozen || !node) {
-      return
-    }
-
-    const observerParams = { threshold, root, rootMargin }
-    const observer = new IntersectionObserver(updateEntry, observerParams)
-
-    observer.observe(node)
-
-    return () => observer.disconnect()
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [elementRef, JSON.stringify(threshold), root, rootMargin, frozen])
-
-  return entry
-}
diff --git a/websites/visualization/src/app/react-query/playground/page.tsx b/websites/visualization/src/app/react-query/playground/page.tsx
deleted file mode 100644
index 6edb5aca3..000000000
--- a/websites/visualization/src/app/react-query/playground/page.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-'use client'
-
-import { Suspense } from '@suspensive/react'
-import { PostListSuspensive, PostListTanStack } from './components'
-
-const Page = () => (
-  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-    <h1>Compare codes to use each libraries</h1>
-    <div style={{ display: 'flex', gap: 16, justifyContent: 'space-around', width: '100vw' }}>
-      <section>
-        <a
-          href="https://github.com/suspensive/react/blob/main/websites/visualization/app/react-query/playground/components/suspensive.tsx"
-          style={{ color: '#61DAFB' }}
-          target="_blank"
-          rel="noreferrer"
-        >
-          <h1>🔗 See code for @suspensive/react-query</h1>
-        </a>
-        <Suspense.CSROnly>
-          <PostListSuspensive />
-        </Suspense.CSROnly>
-      </section>
-      <section>
-        <a
-          href="https://github.com/suspensive/react/blob/main/websites/visualization/app/react-query/playground/components/tanstack.tsx"
-          style={{ color: '#61DAFB' }}
-          target="_blank"
-          rel="noreferrer"
-        >
-          <h1>🔗 See code for @tanstack/react-query</h1>
-        </a>
-        <PostListTanStack />
-      </section>
-    </div>
-  </div>
-)
-
-export default Page
diff --git a/websites/visualization/src/app/react/page.tsx b/websites/visualization/src/app/react/page.tsx
index 7dc895e43..0069f2877 100644
--- a/websites/visualization/src/app/react/page.tsx
+++ b/websites/visualization/src/app/react/page.tsx
@@ -2,8 +2,8 @@
 
 import { ErrorBoundary, ErrorBoundaryGroup, Suspense } from '@suspensive/react'
 import { useQueryErrorResetBoundary } from '@tanstack/react-query'
-import { RejectedFallback, UseSuspenseQuery } from '~/components'
-import { Area, Button, Spinner } from '~/components/uis'
+import { UseSuspenseQuery } from '~/components'
+import { Area, Button, RejectedFallback, Spinner } from '~/components/uis'
 import { api } from '~/utils/api'
 
 export default function Page() {
@@ -12,22 +12,14 @@ export default function Page() {
   return (
     <Area title="ErrorBoundaryGroup">
       <ErrorBoundaryGroup>
-        <ErrorBoundaryGroup.Reset
-          trigger={({ reset }) => (
-            <Button style={{ alignSelf: 'end' }} onClick={reset}>
-              ↻
-            </Button>
-          )}
-        />
+        <div className="text-right">
+          <ErrorBoundaryGroup.Reset trigger={(group) => <Button onClick={group.reset}>↻</Button>} />
+        </div>
         <Area title="ErrorBoundaryGroup">
           <ErrorBoundaryGroup>
-            <ErrorBoundaryGroup.Reset
-              trigger={({ reset }) => (
-                <Button style={{ alignSelf: 'end' }} onClick={reset}>
-                  ↻
-                </Button>
-              )}
-            />
+            <div className="text-right">
+              <ErrorBoundaryGroup.Reset trigger={(group) => <Button onClick={group.reset}>↻</Button>} />
+            </div>
             <Area title="Suspense (Continuous 3 fetching)">
               <Suspense.CSROnly fallback={<Spinner />}>
                 <UseSuspenseQuery queryKey={['boundary', 1]} queryFn={() => api.delay(500, { percentage: 100 })} />
@@ -49,13 +41,9 @@ export default function Page() {
 
         <Area title="ErrorBoundaryGroup blockOutside">
           <ErrorBoundaryGroup blockOutside>
-            <ErrorBoundaryGroup.Reset
-              trigger={({ reset }) => (
-                <Button style={{ alignSelf: 'end' }} onClick={reset}>
-                  ↻
-                </Button>
-              )}
-            />
+            <div className="text-right">
+              <ErrorBoundaryGroup.Reset trigger={(group) => <Button onClick={group.reset}>↻</Button>} />
+            </div>
             <Area title="Suspense">
               <Suspense.CSROnly fallback={<Spinner />}>
                 <UseSuspenseQuery queryKey={['boundary', 1]} queryFn={() => api.delay(500, { percentage: 100 })} />
diff --git a/websites/visualization/src/app/react/wrap/page.tsx b/websites/visualization/src/app/react/wrap/page.tsx
index c45a44f9c..c32ff55bb 100644
--- a/websites/visualization/src/app/react/wrap/page.tsx
+++ b/websites/visualization/src/app/react/wrap/page.tsx
@@ -8,7 +8,7 @@ const Page = wrap
   .ErrorBoundaryGroup({ blockOutside: false })
   .ErrorBoundary({ fallback: (props) => <div>{props.error.message}</div>, onError: logError })
   .Suspense.CSROnly({ fallback: 'loading...' })
-  .on(({ text }: { text: string }) => {
+  .on(function Page({ text }: { text: string }) {
     const errorBoundary = useErrorBoundary()
 
     return (
diff --git a/websites/visualization/src/components/RejectedFallback.tsx b/websites/visualization/src/components/RejectedFallback.tsx
deleted file mode 100644
index bf3f4246a..000000000
--- a/websites/visualization/src/components/RejectedFallback.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-'use client'
-
-import type { ErrorBoundaryFallbackProps } from '@suspensive/react'
-import { Box, Button, Description } from './uis'
-
-export const RejectedFallback = (props: ErrorBoundaryFallbackProps) => (
-  <Box.Error>
-    <Description.Error>Error: {props.error.message}</Description.Error>
-    <Button onClick={props.reset}>↻</Button>
-  </Box.Error>
-)
diff --git a/websites/visualization/src/components/UseSuspenseQuery.tsx b/websites/visualization/src/components/UseSuspenseQuery.tsx
index fe119a39c..b38015833 100644
--- a/websites/visualization/src/components/UseSuspenseQuery.tsx
+++ b/websites/visualization/src/components/UseSuspenseQuery.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useSuspenseQuery } from '@suspensive/react-query'
-import { Box, Description } from './uis'
+import { Box } from './uis'
 
 type Props = {
   queryKey: Readonly<[string, number]>
@@ -16,7 +16,7 @@ export const UseSuspenseQuery = ({ queryKey, queryFn }: Props) => {
 
   return (
     <Box.Success>
-      <Description.Success>{query.data}</Description.Success>
+      <div>{query.data}</div>
     </Box.Success>
   )
 }
diff --git a/websites/visualization/src/components/index.ts b/websites/visualization/src/components/index.ts
index ce46df189..5cacc6ebb 100644
--- a/websites/visualization/src/components/index.ts
+++ b/websites/visualization/src/components/index.ts
@@ -1,2 +1 @@
-export { RejectedFallback } from './RejectedFallback'
 export { UseSuspenseQuery } from './UseSuspenseQuery'
diff --git a/websites/visualization/src/components/uis/index.tsx b/websites/visualization/src/components/uis/index.tsx
index 7477a05c9..58f0554ea 100644
--- a/websites/visualization/src/components/uis/index.tsx
+++ b/websites/visualization/src/components/uis/index.tsx
@@ -1,122 +1,80 @@
-/** @jsxImportSource @emotion/react */
-'use client'
+import type { ErrorBoundaryFallbackProps } from '@suspensive/react'
+import { forwardRef } from 'react'
+import type { ComponentPropsWithoutRef, PropsWithChildren } from 'react'
 
-import styled from '@emotion/styled'
-import type { PropsWithChildren } from 'react'
+export const Button = forwardRef<HTMLButtonElement, ComponentPropsWithoutRef<'button'>>(function Button(props, ref) {
+  return (
+    <button
+      type="button"
+      className="box-border h-5 w-5 rounded-full bg-white/60 text-xs font-black text-black transition delay-150 duration-300 ease-in-out hover:-translate-y-1 hover:scale-110 hover:bg-white"
+      {...props}
+      ref={ref}
+    />
+  )
+})
 
-export const Button = styled.button`
-  box-sizing: border-box;
-  background-color: white;
-  color: black;
-  border: 0;
-  transition: all 200ms;
-  font-size: 14px;
-  width: 20px;
-  height: 20px;
-  font-weight: 900;
-  border-radius: 60px;
-  cursor: pointer;
-
-  :hover {
-    opacity: 0.9;
-  }
-`
-
-const BaseDescription = styled.div``
-export const Description = {
-  Error: styled(BaseDescription)``,
-  Success: styled(BaseDescription)``,
-}
-
-export const Spinner = styled.div`
-  height: 15px;
-  width: 15px;
-  border: 1px solid white;
-  border-radius: 50%;
-  border-top: none;
-  border-right: none;
-  margin: 8px auto;
-  animation: rotation 1s linear infinite;
-
-  @keyframes rotation {
-    from {
-      transform: rotate(0deg);
-    }
-
-    to {
-      transform: rotate(360deg);
-    }
-  }
-`
-
-export const BaseBox = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  box-sizing: border-box;
-  padding: 8px 16px;
-  border-radius: 8px;
-  border: 0;
-  gap: 8px;
-  color: black;
-  transition: all 200ms;
-  animation: fadeIn 200ms;
-  font-size: 12px;
-
-  :hover {
-    opacity: 0.8;
-  }
+export const Spinner = () => (
+  <span role="status" className="m-auto animate-pulse">
+    <svg
+      aria-hidden="true"
+      className="h-8 w-8 animate-spin fill-white text-gray-200 dark:text-gray-600"
+      viewBox="0 0 100 101"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+        fill="currentColor"
+      />
+      <path
+        d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+        fill="currentFill"
+      />
+    </svg>
+    <span className="sr-only">Loading...</span>
+  </span>
+)
 
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-`
 export const Box = {
-  Success: styled(BaseBox)`
-    background-color: yellowgreen;
-  `,
-  Error: styled(BaseBox)`
-    background-color: tomato;
-  `,
-  Default: styled(BaseBox)`
-    background-color: white;
-  `,
+  Success: forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(function Success(props, ref) {
+    return (
+      <div
+        className="box-border flex items-center justify-between gap-8 rounded-lg bg-lime-500 px-4 py-2 text-xs text-black duration-100 ease-in hover:opacity-90"
+        {...props}
+        ref={ref}
+      />
+    )
+  }),
+  Error: forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(function Error(props, ref) {
+    return (
+      <div
+        className="box-border flex items-center justify-between gap-8 rounded-lg bg-red-500 px-4 py-2 text-xs text-black duration-100 ease-in hover:opacity-90"
+        {...props}
+        ref={ref}
+      />
+    )
+  }),
+  Default: forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(function Default(props, ref) {
+    return (
+      <div
+        className="box-border flex items-center justify-between gap-8 rounded-lg bg-white px-4 py-2 text-xs text-black duration-100 ease-in hover:opacity-90"
+        {...props}
+        ref={ref}
+      />
+    )
+  }),
 }
 
 export const Area = ({ title, children }: PropsWithChildren<{ title: string }>) => (
-  <AreaStyled.Wrapper>
-    <AreaStyled.Title>{title}</AreaStyled.Title>
-    <AreaStyled.Content>{children}</AreaStyled.Content>
-  </AreaStyled.Wrapper>
+  <div className="max-w-xl flex-1">
+    <div className="mb-0.5 ml-2 text-sm">{title}</div>
+    <div className="flex flex-col justify-center gap-2 rounded-2xl border-2 border-white p-2">{children}</div>
+  </div>
 )
 
-const AreaStyled = {
-  Wrapper: styled.div`
-    flex: 1;
-    max-width: 600px;
-  `,
-  Content: styled.div`
-    display: flex;
-    flex-direction: column;
-    border: 2px solid white;
-    border-radius: 16px;
-    padding: 6px;
-    gap: 8px;
-  `,
-
-  Title: styled.h2`
-    margin: 0;
-    margin-left: 10px;
-    margin-bottom: 2px;
-    font-size: 14px;
-  `,
-}
-
-export const Flex = styled.div`
-  display: flex;
-`
+export const RejectedFallback = (props: ErrorBoundaryFallbackProps) => (
+  <Box.Error>
+    <div>Error: {props.error.message}</div>
+    <Button onClick={props.reset}>↻</Button>
+  </Box.Error>
+)
diff --git a/websites/visualization/tailwind.config.js b/websites/visualization/tailwind.config.js
new file mode 100644
index 000000000..429188a61
--- /dev/null
+++ b/websites/visualization/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}