diff --git a/apps/wiki/apis/index.ts b/apps/wiki/apis/index.ts
index c9500d6..b675e07 100644
--- a/apps/wiki/apis/index.ts
+++ b/apps/wiki/apis/index.ts
@@ -1,4 +1,4 @@
-import axios from "axios";
+import axios, { AxiosError } from "axios";
 import { ERROR } from "@/constants";
 import { refresh } from "@/services/auth/auth.api";
 
@@ -10,14 +10,15 @@ export const http = axios.create({
 http.interceptors.response.use(
   (response) => response,
   async (error) => {
-    const request = error.config;
-    const { code } = error.response.data;
-    const isAccessTokenExpiredError = code === ERROR.TOKEN_403_2;
+    if (error instanceof AxiosError) {
+      const request = error.config;
+      const { code } = error.response?.data || { code: null };
+      const isAccessTokenExpiredError = code === ERROR.TOKEN_403_2;
 
-    if (isAccessTokenExpiredError && !request.sent) {
-      request.sent = true;
-      request.headers.Authorization = await refresh();
-      return http(request);
+      if (isAccessTokenExpiredError && request) {
+        request.headers.Authorization = await refresh();
+        return http(request);
+      }
     }
     return Promise.reject(error);
   },
diff --git a/apps/wiki/app/(docs)/[classify]/style.css.ts b/apps/wiki/app/(docs)/[classify]/style.css.ts
index 074662a..825d770 100644
--- a/apps/wiki/app/(docs)/[classify]/style.css.ts
+++ b/apps/wiki/app/(docs)/[classify]/style.css.ts
@@ -1,4 +1,4 @@
-import { flex, font, theme, screen } from "@/styles";
+import { flex, font, theme, screen } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const container = style({
diff --git a/apps/wiki/app/(docs)/docs/[title]/style.css.ts b/apps/wiki/app/(docs)/docs/[title]/style.css.ts
index d3edee3..9f8e25c 100644
--- a/apps/wiki/app/(docs)/docs/[title]/style.css.ts
+++ b/apps/wiki/app/(docs)/docs/[title]/style.css.ts
@@ -1,4 +1,4 @@
-import { flex, font, theme, screen } from "@/styles";
+import { flex, font, theme, screen } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const container = style({
diff --git a/apps/wiki/app/(user)/style.css.ts b/apps/wiki/app/(user)/style.css.ts
index bca50a9..1eccdb4 100644
--- a/apps/wiki/app/(user)/style.css.ts
+++ b/apps/wiki/app/(user)/style.css.ts
@@ -1,4 +1,4 @@
-import { flex, font, theme } from "@/styles";
+import { flex, font, theme } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const contributeBox = style({
diff --git a/apps/wiki/app/coin/TradeHistory.css.ts b/apps/wiki/app/coin/TradeHistory.css.ts
index c0a709d..796eca8 100644
--- a/apps/wiki/app/coin/TradeHistory.css.ts
+++ b/apps/wiki/app/coin/TradeHistory.css.ts
@@ -1,4 +1,4 @@
-import { flex, font, theme, screen } from "@/styles";
+import { flex, font, theme, screen } from "@buma/style";
 import { StyleVariantsType } from "@/types";
 import { style, styleVariants } from "@vanilla-extract/css";
 
diff --git a/apps/wiki/app/coin/rank/style.css.ts b/apps/wiki/app/coin/rank/style.css.ts
index 3b5f46b..a1f7a5c 100644
--- a/apps/wiki/app/coin/rank/style.css.ts
+++ b/apps/wiki/app/coin/rank/style.css.ts
@@ -1,4 +1,4 @@
-import { flex, font, theme } from "@/styles";
+import { flex, font, theme } from "@buma/style";
 import { StyleVariantsType } from "@/types";
 import { style, styleVariants } from "@vanilla-extract/css";
 
diff --git a/apps/wiki/app/coin/style.css.ts b/apps/wiki/app/coin/style.css.ts
index 798cf71..e382fe4 100644
--- a/apps/wiki/app/coin/style.css.ts
+++ b/apps/wiki/app/coin/style.css.ts
@@ -1,4 +1,4 @@
-import { flex, font, theme, screen } from "@/styles";
+import { flex, font, theme, screen } from "@buma/style";
 import { StyleVariantsType } from "@/types";
 import { style, styleVariants } from "@vanilla-extract/css";
 
diff --git a/apps/wiki/app/history/[title]/detail/[id]/style.css.ts b/apps/wiki/app/history/[title]/detail/[id]/style.css.ts
index 0d59ac0..2338890 100644
--- a/apps/wiki/app/history/[title]/detail/[id]/style.css.ts
+++ b/apps/wiki/app/history/[title]/detail/[id]/style.css.ts
@@ -1,4 +1,4 @@
-import { flex, font, theme } from "@/styles";
+import { flex, font, theme } from "@buma/style";
 import { StyleVariantsType } from "@/types";
 import { style, styleVariants } from "@vanilla-extract/css";
 
diff --git a/apps/wiki/app/history/[title]/style.css.ts b/apps/wiki/app/history/[title]/style.css.ts
index 553b881..0ec4ea6 100644
--- a/apps/wiki/app/history/[title]/style.css.ts
+++ b/apps/wiki/app/history/[title]/style.css.ts
@@ -1,4 +1,4 @@
-import { flex, font, theme } from "@/styles";
+import { flex, font, theme } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const historyBox = style({
diff --git a/apps/wiki/app/layout.css.ts b/apps/wiki/app/layout.css.ts
index 9c07dba..30826d6 100644
--- a/apps/wiki/app/layout.css.ts
+++ b/apps/wiki/app/layout.css.ts
@@ -1,4 +1,4 @@
-import { theme, flex, screen } from "@/styles";
+import { theme, flex, screen } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const container = style({
diff --git a/apps/wiki/app/oauth/OAuth.tsx b/apps/wiki/app/oauth/OAuth.tsx
index 6e25966..f2dca7f 100644
--- a/apps/wiki/app/oauth/OAuth.tsx
+++ b/apps/wiki/app/oauth/OAuth.tsx
@@ -3,7 +3,7 @@
 import { useSearchParams } from "next/navigation";
 import { useEffect } from "react";
 import { MoonLoader } from "react-spinners";
-import { theme } from "@/styles";
+import { theme } from "@buma/style";
 import { useLoginMutation } from "@/services/auth/auth.mutation";
 import * as styles from "./style.css";
 
diff --git a/apps/wiki/app/oauth/style.css.ts b/apps/wiki/app/oauth/style.css.ts
index ddbeb73..c6779ec 100644
--- a/apps/wiki/app/oauth/style.css.ts
+++ b/apps/wiki/app/oauth/style.css.ts
@@ -1,4 +1,4 @@
-import { flex, font, theme } from "@/styles";
+import { flex, font, theme } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const container = style({
diff --git a/apps/wiki/app/page.css.ts b/apps/wiki/app/page.css.ts
index bc0ed99..9ae9540 100644
--- a/apps/wiki/app/page.css.ts
+++ b/apps/wiki/app/page.css.ts
@@ -1,4 +1,4 @@
-import { theme, font, flex, screen } from "@/styles";
+import { theme, font, flex, screen } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const container = style({
diff --git a/apps/wiki/app/search/[keyword]/SearchResult.tsx b/apps/wiki/app/search/[keyword]/SearchResult.tsx
index 2bb2472..50d5a13 100644
--- a/apps/wiki/app/search/[keyword]/SearchResult.tsx
+++ b/apps/wiki/app/search/[keyword]/SearchResult.tsx
@@ -8,7 +8,7 @@ import Container from "@/components/Container";
 import { useQuery } from "@tanstack/react-query";
 import { docsQuery } from "@/services/docs/docs.query";
 import { useRouter } from "next/navigation";
-import { theme } from "@/styles";
+import { theme } from "@buma/style";
 import { useDate } from "@/hooks";
 import { MoonLoader } from "react-spinners";
 import * as styles from "./style.css";
diff --git a/apps/wiki/app/search/[keyword]/style.css.ts b/apps/wiki/app/search/[keyword]/style.css.ts
index 83ca833..d625fc9 100644
--- a/apps/wiki/app/search/[keyword]/style.css.ts
+++ b/apps/wiki/app/search/[keyword]/style.css.ts
@@ -1,4 +1,4 @@
-import { flex, font, theme, screen } from "@/styles";
+import { flex, font, theme, screen } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const container = style({
diff --git a/apps/wiki/components/(modal)/style.css.ts b/apps/wiki/components/(modal)/style.css.ts
index fa243b7..8e81af1 100644
--- a/apps/wiki/components/(modal)/style.css.ts
+++ b/apps/wiki/components/(modal)/style.css.ts
@@ -1,4 +1,4 @@
-import { flex, font, theme } from "@/styles";
+import { flex, font, theme } from "@buma/style";
 import { StyleVariantsType } from "@/types";
 import { style, styleVariants } from "@vanilla-extract/css";
 
diff --git a/apps/wiki/components/Accordion/index.tsx b/apps/wiki/components/Accordion/index.tsx
index 24bf6e3..12d0022 100644
--- a/apps/wiki/components/Accordion/index.tsx
+++ b/apps/wiki/components/Accordion/index.tsx
@@ -1,5 +1,5 @@
 import { PropsWithChildren } from "react";
-import * as styles from "@/styles/document.css";
+import * as styles from "@/utils/document.css";
 import { content } from "./style.css";
 
 interface Props extends PropsWithChildren {
diff --git a/apps/wiki/components/Accordion/style.css.ts b/apps/wiki/components/Accordion/style.css.ts
index d8972d7..6e034ed 100644
--- a/apps/wiki/components/Accordion/style.css.ts
+++ b/apps/wiki/components/Accordion/style.css.ts
@@ -1,4 +1,4 @@
-import { flex } from "@/styles";
+import { flex } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const content = style({
diff --git a/apps/wiki/components/Aside/Aside.tsx b/apps/wiki/components/Aside/Aside.tsx
index 28a3c6a..a80f1f5 100644
--- a/apps/wiki/components/Aside/Aside.tsx
+++ b/apps/wiki/components/Aside/Aside.tsx
@@ -7,7 +7,7 @@ import { DocsListItemType } from "@/types";
 import Link from "next/link";
 import { ArrowIcon } from "@buma/icon";
 import { useDate } from "@/hooks";
-import { theme } from "@/styles";
+import { theme } from "@buma/style";
 import * as styles from "./style.css";
 
 const Aside = () => {
diff --git a/apps/wiki/components/Aside/style.css.ts b/apps/wiki/components/Aside/style.css.ts
index f91b338..d5e8d73 100644
--- a/apps/wiki/components/Aside/style.css.ts
+++ b/apps/wiki/components/Aside/style.css.ts
@@ -1,5 +1,5 @@
 import { style } from "@vanilla-extract/css";
-import { flex, font, theme, screen } from "@/styles";
+import { flex, font, theme, screen } from "@buma/style";
 
 export const container = style({
   width: "300px",
diff --git a/apps/wiki/components/Board/style.css.ts b/apps/wiki/components/Board/style.css.ts
index 3d143b3..d9bab01 100644
--- a/apps/wiki/components/Board/style.css.ts
+++ b/apps/wiki/components/Board/style.css.ts
@@ -1,4 +1,4 @@
-import { theme, flex, font, screen } from "@/styles";
+import { theme, flex, font, screen } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const container = style({
diff --git a/apps/wiki/components/Container/style.css.ts b/apps/wiki/components/Container/style.css.ts
index 010d78b..034063b 100644
--- a/apps/wiki/components/Container/style.css.ts
+++ b/apps/wiki/components/Container/style.css.ts
@@ -1,4 +1,4 @@
-import { theme, font, flex, screen } from "@/styles";
+import { theme, font, flex, screen } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const container = style({
diff --git a/apps/wiki/components/Editor/DocsExample.css.ts b/apps/wiki/components/Editor/DocsExample.css.ts
index 59859cd..8e84ebb 100644
--- a/apps/wiki/components/Editor/DocsExample.css.ts
+++ b/apps/wiki/components/Editor/DocsExample.css.ts
@@ -1,4 +1,4 @@
-import { flex, font, theme, screen } from "@/styles";
+import { flex, font, theme, screen } from "@buma/style";
 import { StyleVariantsType } from "@/types";
 import { style, styleVariants } from "@vanilla-extract/css";
 
diff --git a/apps/wiki/components/Editor/DocsExample.tsx b/apps/wiki/components/Editor/DocsExample.tsx
index 2844dd1..b1b1c2e 100644
--- a/apps/wiki/components/Editor/DocsExample.tsx
+++ b/apps/wiki/components/Editor/DocsExample.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { toast } from "react-toastify";
 import { ArrowIcon } from "@buma/icon";
-import { theme } from "@/styles";
+import { theme } from "@buma/style";
 import { documentCompiler } from "@/utils";
 import Toastify from "../Toastify";
 import * as styles from "./DocsExample.css";
diff --git a/apps/wiki/components/Editor/style.css.ts b/apps/wiki/components/Editor/style.css.ts
index 7434ab2..88b0e7a 100644
--- a/apps/wiki/components/Editor/style.css.ts
+++ b/apps/wiki/components/Editor/style.css.ts
@@ -1,4 +1,4 @@
-import { flex, font, theme, screen } from "@/styles";
+import { flex, font, theme, screen } from "@buma/style";
 import { StyleVariantsType } from "@/types";
 import { style, styleVariants } from "@vanilla-extract/css";
 
diff --git a/apps/wiki/components/Footer/style.css.ts b/apps/wiki/components/Footer/style.css.ts
index ed6136f..fc264ca 100644
--- a/apps/wiki/components/Footer/style.css.ts
+++ b/apps/wiki/components/Footer/style.css.ts
@@ -1,4 +1,4 @@
-import { font, flex, theme, screen } from "@/styles";
+import { font, flex, theme, screen } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const container = style({
diff --git a/apps/wiki/components/FrameEditor/style.css.ts b/apps/wiki/components/FrameEditor/style.css.ts
index 05f9713..ff2a9cb 100644
--- a/apps/wiki/components/FrameEditor/style.css.ts
+++ b/apps/wiki/components/FrameEditor/style.css.ts
@@ -1,4 +1,4 @@
-import { flex, font, theme, screen } from "@/styles";
+import { flex, font, theme, screen } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const container = style({
diff --git a/apps/wiki/components/Header/style.css.ts b/apps/wiki/components/Header/style.css.ts
index bb0836b..adcbd19 100644
--- a/apps/wiki/components/Header/style.css.ts
+++ b/apps/wiki/components/Header/style.css.ts
@@ -1,4 +1,4 @@
-import { theme, flex, font, screen } from "@/styles";
+import { theme, flex, font, screen } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const container = style({
diff --git a/apps/wiki/components/Popular/style.css.ts b/apps/wiki/components/Popular/style.css.ts
index a8e9fec..7105c73 100644
--- a/apps/wiki/components/Popular/style.css.ts
+++ b/apps/wiki/components/Popular/style.css.ts
@@ -1,5 +1,5 @@
 import { style, styleVariants } from "@vanilla-extract/css";
-import { flex, font, theme, screen } from "@/styles";
+import { flex, font, theme, screen } from "@buma/style";
 import { StyleVariantsType } from "@/types";
 import { popularAnimation } from "./keyframes.css";
 
diff --git a/apps/wiki/components/ScrollButton/index.tsx b/apps/wiki/components/ScrollButton/index.tsx
index 6fe3b92..9ac6f81 100644
--- a/apps/wiki/components/ScrollButton/index.tsx
+++ b/apps/wiki/components/ScrollButton/index.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { ArrowIcon } from "@buma/icon";
-import { theme } from "@/styles";
+import { theme } from "@buma/style";
 import * as styles from "./style.css";
 
 const ScrollButton = () => {
diff --git a/apps/wiki/components/ScrollButton/style.css.ts b/apps/wiki/components/ScrollButton/style.css.ts
index bcc74fb..3730b80 100644
--- a/apps/wiki/components/ScrollButton/style.css.ts
+++ b/apps/wiki/components/ScrollButton/style.css.ts
@@ -1,5 +1,5 @@
 import { style } from "@vanilla-extract/css";
-import { flex, theme } from "@/styles";
+import { flex, theme } from "@buma/style";
 
 export const container = style({
   position: "fixed",
diff --git a/apps/wiki/components/Toastify/style.css.ts b/apps/wiki/components/Toastify/style.css.ts
index ed5667f..1ee11b4 100644
--- a/apps/wiki/components/Toastify/style.css.ts
+++ b/apps/wiki/components/Toastify/style.css.ts
@@ -1,4 +1,4 @@
-import { flex, font, screen, theme } from "@/styles";
+import { flex, font, screen, theme } from "@buma/style";
 import { style } from "@vanilla-extract/css";
 
 export const container = style({
diff --git a/apps/wiki/next.config.mjs b/apps/wiki/next.config.mjs
index 2893182..20ee69b 100644
--- a/apps/wiki/next.config.mjs
+++ b/apps/wiki/next.config.mjs
@@ -6,7 +6,7 @@ const withVanillaExtract = createVanillaExtractPlugin({
 
 /** @type {import('next').NextConfig} */
 const nextConfig = withVanillaExtract({
-  transpilePackages: ["@buma/icon"],
+  transpilePackages: ["@buma/icon", "@buma/ui", "@buma/style"],
   swcMinify: true,
   images: {
     domains: [
diff --git a/apps/wiki/package.json b/apps/wiki/package.json
index 12c64b8..9646f88 100644
--- a/apps/wiki/package.json
+++ b/apps/wiki/package.json
@@ -10,6 +10,8 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@buma/ui": "workspace:*",
+    "@buma/style": "workspace:*",
     "@buma/icon": "workspace:*",
     "@next/third-parties": "^14.1.4",
     "@tanstack/react-query": "^5.24.6",
diff --git a/apps/wiki/styles/index.ts b/apps/wiki/styles/index.ts
deleted file mode 100644
index b64f525..0000000
--- a/apps/wiki/styles/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default as flex } from "./flex";
-export { default as font } from "./font";
-export { default as theme } from "./theme";
-export { default as screen } from "./screen";
diff --git a/apps/wiki/styles/document.css.ts b/apps/wiki/utils/document.css.ts
similarity index 97%
rename from apps/wiki/styles/document.css.ts
rename to apps/wiki/utils/document.css.ts
index d8f80b1..ce5fb10 100644
--- a/apps/wiki/styles/document.css.ts
+++ b/apps/wiki/utils/document.css.ts
@@ -1,5 +1,5 @@
 import { keyframes, style } from "@vanilla-extract/css";
-import { theme, font, flex, screen } from ".";
+import { theme, font, flex, screen } from "@buma/style";
 
 export const details = style({
   width: "100%",
diff --git a/apps/wiki/utils/documentCompiler.ts b/apps/wiki/utils/documentCompiler.ts
index ef5f0b2..f23d3e3 100644
--- a/apps/wiki/utils/documentCompiler.ts
+++ b/apps/wiki/utils/documentCompiler.ts
@@ -1,5 +1,5 @@
-import { theme } from "@/styles";
-import * as styles from "@/styles/document.css";
+import { theme } from "@buma/style";
+import * as styles from "./document.css";
 
 const deleteNotAllowedTag = (contents: string) => {
   return contents
diff --git a/packages/style/.eslintrc.cjs b/packages/style/.eslintrc.cjs
new file mode 100644
index 0000000..f5b9257
--- /dev/null
+++ b/packages/style/.eslintrc.cjs
@@ -0,0 +1,5 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ["@buma/eslint-config/react-ts"],
+};
diff --git a/packages/style/index.ts b/packages/style/index.ts
new file mode 100644
index 0000000..b117637
--- /dev/null
+++ b/packages/style/index.ts
@@ -0,0 +1,4 @@
+export { default as flex } from "./src/flex";
+export { default as font } from "./src/font";
+export { default as theme } from "./src/theme";
+export { default as screen } from "./src/screen";
diff --git a/packages/style/package.json b/packages/style/package.json
new file mode 100644
index 0000000..0d695df
--- /dev/null
+++ b/packages/style/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@buma/style",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "lint": "eslint \"**/*.ts*\"",
+    "generate:component": "turbo gen react-component"
+  },
+  "devDependencies": {
+    "@buma/eslint-config": "workspace:*",
+    "@buma/typescript-config": "workspace:*",
+    "@turbo/gen": "^1.12.4",
+    "@types/node": "^20.11.24",
+    "@types/eslint": "^8.56.5",
+    "@types/react": "^18.2.61",
+    "@types/react-dom": "^18.2.19",
+    "eslint": "^8.57.0",
+    "react": "^18.2.0",
+    "typescript": "^5.3.3"
+  },
+  "dependencies": {
+    "@vanilla-extract/css": "^1.14.1",
+    "@vanilla-extract/next-plugin": "^2.3.6"
+  }
+}
diff --git a/apps/wiki/styles/flex.ts b/packages/style/src/flex.ts
similarity index 100%
rename from apps/wiki/styles/flex.ts
rename to packages/style/src/flex.ts
diff --git a/apps/wiki/styles/font.ts b/packages/style/src/font.ts
similarity index 100%
rename from apps/wiki/styles/font.ts
rename to packages/style/src/font.ts
diff --git a/apps/wiki/styles/screen.ts b/packages/style/src/screen.ts
similarity index 100%
rename from apps/wiki/styles/screen.ts
rename to packages/style/src/screen.ts
diff --git a/apps/wiki/styles/theme.ts b/packages/style/src/theme.ts
similarity index 100%
rename from apps/wiki/styles/theme.ts
rename to packages/style/src/theme.ts
diff --git a/packages/style/tsconfig.json b/packages/style/tsconfig.json
new file mode 100644
index 0000000..a22d0dd
--- /dev/null
+++ b/packages/style/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "@buma/typescript-config/react-library.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}
diff --git a/packages/ui/.eslintrc.cjs b/packages/ui/.eslintrc.cjs
new file mode 100644
index 0000000..f5b9257
--- /dev/null
+++ b/packages/ui/.eslintrc.cjs
@@ -0,0 +1,5 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ["@buma/eslint-config/react-ts"],
+};
diff --git a/packages/ui/index.ts b/packages/ui/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/packages/ui/package.json b/packages/ui/package.json
new file mode 100644
index 0000000..a46818a
--- /dev/null
+++ b/packages/ui/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@buma/ui",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "lint": "eslint \"**/*.ts*\"",
+    "generate:component": "turbo gen react-component"
+  },
+  "devDependencies": {
+    "@buma/eslint-config": "workspace:*",
+    "@buma/typescript-config": "workspace:*",
+    "@turbo/gen": "^1.12.4",
+    "@types/node": "^20.11.24",
+    "@types/eslint": "^8.56.5",
+    "@types/react": "^18.2.61",
+    "@types/react-dom": "^18.2.19",
+    "eslint": "^8.57.0",
+    "react": "^18.2.0",
+    "typescript": "^5.3.3"
+  },
+  "dependencies": {
+    "@vanilla-extract/css": "^1.14.1",
+    "@vanilla-extract/next-plugin": "^2.3.6"
+  }
+}
diff --git a/packages/ui/src/Navigator/index.tsx b/packages/ui/src/Navigator/index.tsx
new file mode 100644
index 0000000..2821496
--- /dev/null
+++ b/packages/ui/src/Navigator/index.tsx
@@ -0,0 +1,8 @@
+// import * as styles from "./style.css";
+
+const Navigator = () => {
+  // return <header className={styles.container}>asd</header>;
+  return <header>asd</header>;
+};
+
+export default Navigator;
diff --git a/packages/ui/src/Navigator/style.css.ts b/packages/ui/src/Navigator/style.css.ts
new file mode 100644
index 0000000..21a2249
--- /dev/null
+++ b/packages/ui/src/Navigator/style.css.ts
@@ -0,0 +1,16 @@
+// import { style } from "@vanilla-extract/css";
+// import { flex, font } from "@buma/style";
+
+// export const container = style({
+//   width: "100%",
+//   height: "32px",
+//   padding: "0 4vw",
+//   gap: "14px",
+//   ...flex.VERTICAL,
+// });
+
+// export const hgroup = style({
+//   gap: "4px",
+//   ...font.H6,
+//   ...flex.VERTICAL,
+// });
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
new file mode 100644
index 0000000..a22d0dd
--- /dev/null
+++ b/packages/ui/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "@buma/typescript-config/react-library.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9e7f34d..e12777c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,12 @@ importers:
       '@buma/icon':
         specifier: workspace:*
         version: link:../../packages/icon
+      '@buma/style':
+        specifier: workspace:*
+        version: link:../../packages/style
+      '@buma/ui':
+        specifier: workspace:*
+        version: link:../../packages/ui
       '@next/third-parties':
         specifier: ^14.1.4
         version: 14.2.2(next@14.1.4)(react@18.2.0)
@@ -146,7 +152,7 @@ importers:
         version: 9.1.0(eslint@8.57.0)
       eslint-plugin-import:
         specifier: ^2.29.1
-        version: 2.29.1(@typescript-eslint/parser@7.7.0)(eslint@8.57.0)
+        version: 2.29.1(@typescript-eslint/parser@7.7.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
       eslint-plugin-prettier:
         specifier: ^5.1.3
         version: 5.1.3(eslint-config-prettier@9.1.0)(eslint@8.57.0)(prettier@3.2.5)
@@ -234,6 +240,86 @@ importers:
         specifier: ^5.3.3
         version: 5.3.3
 
+  packages/style:
+    dependencies:
+      '@vanilla-extract/css':
+        specifier: ^1.14.1
+        version: 1.14.2
+      '@vanilla-extract/next-plugin':
+        specifier: ^2.3.6
+        version: 2.4.0(@types/node@20.12.7)(next@14.1.4)(webpack@5.91.0)
+    devDependencies:
+      '@buma/eslint-config':
+        specifier: workspace:*
+        version: link:../../configs/eslint-config
+      '@buma/typescript-config':
+        specifier: workspace:*
+        version: link:../../configs/typescript-config
+      '@turbo/gen':
+        specifier: ^1.12.4
+        version: 1.12.4(@types/node@20.12.7)(typescript@5.4.5)
+      '@types/eslint':
+        specifier: ^8.56.5
+        version: 8.56.10
+      '@types/node':
+        specifier: ^20.11.24
+        version: 20.12.7
+      '@types/react':
+        specifier: ^18.2.61
+        version: 18.2.61
+      '@types/react-dom':
+        specifier: ^18.2.19
+        version: 18.2.19
+      eslint:
+        specifier: ^8.57.0
+        version: 8.57.0
+      react:
+        specifier: ^18.2.0
+        version: 18.2.0
+      typescript:
+        specifier: ^5.3.3
+        version: 5.4.5
+
+  packages/ui:
+    dependencies:
+      '@vanilla-extract/css':
+        specifier: ^1.14.1
+        version: 1.14.2
+      '@vanilla-extract/next-plugin':
+        specifier: ^2.3.6
+        version: 2.4.0(@types/node@20.12.7)(next@14.1.4)(webpack@5.91.0)
+    devDependencies:
+      '@buma/eslint-config':
+        specifier: workspace:*
+        version: link:../../configs/eslint-config
+      '@buma/typescript-config':
+        specifier: workspace:*
+        version: link:../../configs/typescript-config
+      '@turbo/gen':
+        specifier: ^1.12.4
+        version: 1.12.4(@types/node@20.12.7)(typescript@5.4.5)
+      '@types/eslint':
+        specifier: ^8.56.5
+        version: 8.56.10
+      '@types/node':
+        specifier: ^20.11.24
+        version: 20.12.7
+      '@types/react':
+        specifier: ^18.2.61
+        version: 18.2.61
+      '@types/react-dom':
+        specifier: ^18.2.19
+        version: 18.2.19
+      eslint:
+        specifier: ^8.57.0
+        version: 8.57.0
+      react:
+        specifier: ^18.2.0
+        version: 18.2.0
+      typescript:
+        specifier: ^5.3.3
+        version: 5.4.5
+
 packages:
 
   /@aashutoshrathi/word-wrap@1.2.6:
@@ -1367,8 +1453,31 @@ packages:
       - typescript
     dev: true
 
+  /@turbo/gen@1.12.4(@types/node@20.12.7)(typescript@5.4.5):
+    resolution: {integrity: sha512-3Z8KZ6Vnc2x6rr8sNJ4QNYpkAttLBfb91uPzDlFDY7vgJg+vfXT8YWyZznVL+19ZixF2C/F4Ucp4/YjG2e1drg==}
+    dependencies:
+      '@turbo/workspaces': 1.12.4
+      chalk: 2.4.2
+      commander: 10.0.1
+      fs-extra: 10.1.0
+      inquirer: 8.2.6
+      minimatch: 9.0.4
+      node-plop: 0.26.3
+      proxy-agent: 6.3.0
+      ts-node: 10.9.1(@types/node@20.12.7)(typescript@5.4.5)
+      update-check: 1.5.4
+      validate-npm-package-name: 5.0.0
+    transitivePeerDependencies:
+      - '@swc/core'
+      - '@swc/wasm'
+      - '@types/node'
+      - supports-color
+      - typescript
+    dev: true
+
   /@turbo/workspaces@1.12.4:
     resolution: {integrity: sha512-a1hF8Nr6MOeCpvlLR569dGTlzgRLj2Rxo6dTb4jtL+jhHwCb94A9kDPgcRnYGFr45mgulICarVaNZxDjw4/riQ==}
+    hasBin: true
     dependencies:
       chalk: 2.4.2
       commander: 10.0.1
@@ -1380,7 +1489,7 @@ packages:
       js-yaml: 4.1.0
       ora: 4.1.1
       rimraf: 3.0.2
-      semver: 7.5.4
+      semver: 7.6.0
       update-check: 1.5.4
     dev: true
 
@@ -1452,7 +1561,7 @@ packages:
     resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==}
     dependencies:
       '@types/minimatch': 5.1.2
-      '@types/node': 20.11.24
+      '@types/node': 20.12.7
     dev: true
 
   /@types/inquirer@6.5.0:
@@ -1481,7 +1590,6 @@ packages:
     resolution: {integrity: sha512-wq0cICSkRLVaf3UGLMGItu/PtdY7oaXaI/RVU+xliKVOtRna3PRY57ZDfztpDL0n11vfymMUnXv8QwYCO7L1wg==}
     dependencies:
       undici-types: 5.26.5
-    dev: false
 
   /@types/prop-types@15.7.5:
     resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
@@ -1513,7 +1621,7 @@ packages:
   /@types/through@0.0.30:
     resolution: {integrity: sha512-FvnCJljyxhPM3gkRgWmxmDZyAQSiBQQWLI0A0VFL0K7W1oRUrPJSqNO0NvTnLkBcotdlp3lKvaT0JrnyRDkzOg==}
     dependencies:
-      '@types/node': 20.11.24
+      '@types/node': 20.12.7
     dev: true
 
   /@types/tinycolor2@1.4.6:
@@ -1592,7 +1700,6 @@ packages:
       typescript: 5.4.5
     transitivePeerDependencies:
       - supports-color
-    dev: false
 
   /@typescript-eslint/scope-manager@6.21.0:
     resolution: {integrity: sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==}
@@ -1607,7 +1714,6 @@ packages:
     dependencies:
       '@typescript-eslint/types': 7.7.0
       '@typescript-eslint/visitor-keys': 7.7.0
-    dev: false
 
   /@typescript-eslint/type-utils@7.7.0(eslint@8.57.0)(typescript@5.4.5):
     resolution: {integrity: sha512-bOp3ejoRYrhAlnT/bozNQi3nio9tIgv3U5C0mVDdZC7cpcQEDZXvq8inrHYghLVwuNABRqrMW5tzAv88Vy77Sg==}
@@ -1636,7 +1742,6 @@ packages:
   /@typescript-eslint/types@7.7.0:
     resolution: {integrity: sha512-G01YPZ1Bd2hn+KPpIbrAhEWOn5lQBrjxkzHkWvP6NucMXFtfXoevK82hzQdpfuQYuhkvFDeQYbzXCjR1z9Z03w==}
     engines: {node: ^18.18.0 || >=20.0.0}
-    dev: false
 
   /@typescript-eslint/typescript-estree@6.21.0(typescript@5.3.3):
     resolution: {integrity: sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==}
@@ -1679,7 +1784,6 @@ packages:
       typescript: 5.4.5
     transitivePeerDependencies:
       - supports-color
-    dev: false
 
   /@typescript-eslint/utils@7.7.0(eslint@8.57.0)(typescript@5.4.5):
     resolution: {integrity: sha512-LKGAXMPQs8U/zMRFXDZOzmMKgFv3COlxUQ+2NMPhbqgVm6R1w+nU1i4836Pmxu9jZAuIeyySNrN/6Rc657ggig==}
@@ -1713,7 +1817,6 @@ packages:
     dependencies:
       '@typescript-eslint/types': 7.7.0
       eslint-visitor-keys: 3.4.3
-    dev: false
 
   /@ungap/structured-clone@1.2.0:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
@@ -1769,6 +1872,33 @@ packages:
       - terser
     dev: false
 
+  /@vanilla-extract/integration@7.1.2(@types/node@20.12.7):
+    resolution: {integrity: sha512-jpjw0L3P1E+U9L8OAFVMGpPFbNPD+/Vpfew7oOKBYipCrRZEqShu3WLXuUxjXz/mcIH7KCS5nasIdy2VclbEaQ==}
+    dependencies:
+      '@babel/core': 7.24.4
+      '@babel/plugin-syntax-typescript': 7.24.1(@babel/core@7.24.4)
+      '@vanilla-extract/babel-plugin-debug-ids': 1.0.5
+      '@vanilla-extract/css': 1.14.2
+      esbuild: 0.19.12
+      eval: 0.1.8
+      find-up: 5.0.0
+      javascript-stringify: 2.1.0
+      lodash: 4.17.21
+      mlly: 1.6.1
+      outdent: 0.8.0
+      vite: 5.2.10(@types/node@20.12.7)
+      vite-node: 1.5.0(@types/node@20.12.7)
+    transitivePeerDependencies:
+      - '@types/node'
+      - less
+      - lightningcss
+      - sass
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+    dev: false
+
   /@vanilla-extract/next-plugin@2.4.0(@types/node@20.11.24)(next@14.1.4)(webpack@5.91.0):
     resolution: {integrity: sha512-hRdTpr43NIFNmIbY7z+oA/BupzK7rBDVMfTFi/fVD3TD4x47LH/eNkDLsujGYl4kUpO96TxLw1wn9P9eC034YA==}
     peerDependencies:
@@ -1788,6 +1918,25 @@ packages:
       - webpack
     dev: false
 
+  /@vanilla-extract/next-plugin@2.4.0(@types/node@20.12.7)(next@14.1.4)(webpack@5.91.0):
+    resolution: {integrity: sha512-hRdTpr43NIFNmIbY7z+oA/BupzK7rBDVMfTFi/fVD3TD4x47LH/eNkDLsujGYl4kUpO96TxLw1wn9P9eC034YA==}
+    peerDependencies:
+      next: '>=12.1.7'
+    dependencies:
+      '@vanilla-extract/webpack-plugin': 2.3.7(@types/node@20.12.7)(webpack@5.91.0)
+      next: 14.1.4(@babel/core@7.24.4)(react-dom@18.2.0)(react@18.2.0)
+    transitivePeerDependencies:
+      - '@types/node'
+      - less
+      - lightningcss
+      - sass
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - webpack
+    dev: false
+
   /@vanilla-extract/private@1.0.4:
     resolution: {integrity: sha512-8FGD6AejeC/nXcblgNCM5rnZb9KXa4WNkR03HCWtdJBpANjTgjHEglNLFnhuvdQ78tC6afaxBPI+g7F2NX3tgg==}
     dev: false
@@ -1813,6 +1962,27 @@ packages:
       - terser
     dev: false
 
+  /@vanilla-extract/webpack-plugin@2.3.7(@types/node@20.12.7)(webpack@5.91.0):
+    resolution: {integrity: sha512-xKhl7BUGqjj1eRzgASBcfKSvzIWGN1ndNT9ycUcfDz1AXZr6rok99LSj+Z2LqAnCGZGAiLsYzdQ5AYBABXV+vA==}
+    peerDependencies:
+      webpack: ^4.30.0 || ^5.20.2
+    dependencies:
+      '@vanilla-extract/integration': 7.1.2(@types/node@20.12.7)
+      chalk: 4.1.2
+      debug: 4.3.4
+      loader-utils: 2.0.4
+      webpack: 5.91.0
+    transitivePeerDependencies:
+      - '@types/node'
+      - less
+      - lightningcss
+      - sass
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+    dev: false
+
   /@webassemblyjs/ast@1.12.1:
     resolution: {integrity: sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==}
     dependencies:
@@ -3198,7 +3368,7 @@ packages:
     dependencies:
       confusing-browser-globals: 1.0.11
       eslint: 8.57.0
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.7.0)(eslint@8.57.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.7.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
       object.assign: 4.1.4
       object.entries: 1.1.7
       semver: 6.3.1
@@ -3231,7 +3401,7 @@ packages:
     dependencies:
       eslint: 8.57.0
       eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.29.1)(eslint@8.57.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.7.0)(eslint@8.57.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.7.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
       eslint-plugin-jsx-a11y: 6.8.0(eslint@8.57.0)
       eslint-plugin-react: 7.34.1(eslint@8.57.0)
       eslint-plugin-react-hooks: 4.6.0(eslint@8.57.0)
@@ -3254,7 +3424,7 @@ packages:
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0)
-      eslint-plugin-import: 2.29.1(eslint@8.57.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
       eslint-plugin-jsx-a11y: 6.8.0(eslint@8.57.0)
       eslint-plugin-react: 7.34.1(eslint@8.57.0)
       eslint-plugin-react-hooks: 4.6.0(eslint@8.57.0)
@@ -3293,7 +3463,7 @@ packages:
       enhanced-resolve: 5.15.0
       eslint: 8.57.0
       eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
-      eslint-plugin-import: 2.29.1(eslint@8.57.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
       fast-glob: 3.3.1
       get-tsconfig: 4.7.2
       is-core-module: 2.13.1
@@ -3315,7 +3485,7 @@ packages:
       debug: 4.3.4
       enhanced-resolve: 5.15.0
       eslint: 8.57.0
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@7.7.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@7.7.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
       eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.7.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
       fast-glob: 3.3.1
       get-tsconfig: 4.7.2
@@ -3326,7 +3496,6 @@ packages:
       - eslint-import-resolver-node
       - eslint-import-resolver-webpack
       - supports-color
-    dev: false
 
   /eslint-module-utils@2.8.0(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0):
     resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==}
@@ -3386,92 +3555,6 @@ packages:
       eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.7.0)(eslint-plugin-import@2.29.1)(eslint@8.57.0)
     transitivePeerDependencies:
       - supports-color
-    dev: false
-
-  /eslint-module-utils@2.8.0(@typescript-eslint/parser@7.7.0)(eslint-import-resolver-node@0.3.9)(eslint@8.57.0):
-    resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: '*'
-      eslint-import-resolver-node: '*'
-      eslint-import-resolver-typescript: '*'
-      eslint-import-resolver-webpack: '*'
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-      eslint:
-        optional: true
-      eslint-import-resolver-node:
-        optional: true
-      eslint-import-resolver-typescript:
-        optional: true
-      eslint-import-resolver-webpack:
-        optional: true
-    dependencies:
-      '@typescript-eslint/parser': 7.7.0(eslint@8.57.0)(typescript@5.4.5)
-      debug: 3.2.7
-      eslint: 8.57.0
-      eslint-import-resolver-node: 0.3.9
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /eslint-module-utils@2.8.0(@typescript-eslint/parser@7.7.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0):
-    resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: '*'
-      eslint-import-resolver-node: '*'
-      eslint-import-resolver-typescript: '*'
-      eslint-import-resolver-webpack: '*'
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-      eslint:
-        optional: true
-      eslint-import-resolver-node:
-        optional: true
-      eslint-import-resolver-typescript:
-        optional: true
-      eslint-import-resolver-webpack:
-        optional: true
-    dependencies:
-      '@typescript-eslint/parser': 7.7.0(eslint@8.57.0)(typescript@5.4.5)
-      debug: 3.2.7
-      eslint: 8.57.0
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.7.0)(eslint-plugin-import@2.29.1)(eslint@8.57.0)
-    transitivePeerDependencies:
-      - supports-color
-    dev: false
-
-  /eslint-module-utils@2.8.0(eslint-import-resolver-node@0.3.9)(eslint@8.57.0):
-    resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: '*'
-      eslint-import-resolver-node: '*'
-      eslint-import-resolver-typescript: '*'
-      eslint-import-resolver-webpack: '*'
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-      eslint:
-        optional: true
-      eslint-import-resolver-node:
-        optional: true
-      eslint-import-resolver-typescript:
-        optional: true
-      eslint-import-resolver-webpack:
-        optional: true
-    dependencies:
-      debug: 3.2.7
-      eslint: 8.57.0
-      eslint-import-resolver-node: 0.3.9
-    transitivePeerDependencies:
-      - supports-color
 
   /eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0):
     resolution: {integrity: sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==}
@@ -3492,7 +3575,7 @@ packages:
       doctrine: 2.1.0
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.0(eslint-import-resolver-node@0.3.9)(eslint@8.57.0)
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@7.7.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0)
       hasown: 2.0.0
       is-core-module: 2.13.1
       is-glob: 4.0.3
@@ -3506,7 +3589,6 @@ packages:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
       - supports-color
-    dev: false
 
   /eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.7.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0):
     resolution: {integrity: sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==}
@@ -3541,76 +3623,6 @@ packages:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
       - supports-color
-    dev: false
-
-  /eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.7.0)(eslint@8.57.0):
-    resolution: {integrity: sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-    dependencies:
-      '@typescript-eslint/parser': 7.7.0(eslint@8.57.0)(typescript@5.4.5)
-      array-includes: 3.1.7
-      array.prototype.findlastindex: 1.2.3
-      array.prototype.flat: 1.3.2
-      array.prototype.flatmap: 1.3.2
-      debug: 3.2.7
-      doctrine: 2.1.0
-      eslint: 8.57.0
-      eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@7.7.0)(eslint-import-resolver-node@0.3.9)(eslint@8.57.0)
-      hasown: 2.0.0
-      is-core-module: 2.13.1
-      is-glob: 4.0.3
-      minimatch: 3.1.2
-      object.fromentries: 2.0.7
-      object.groupby: 1.0.1
-      object.values: 1.1.7
-      semver: 6.3.1
-      tsconfig-paths: 3.15.0
-    transitivePeerDependencies:
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
-      - supports-color
-    dev: false
-
-  /eslint-plugin-import@2.29.1(eslint@8.57.0):
-    resolution: {integrity: sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==}
-    engines: {node: '>=4'}
-    peerDependencies:
-      '@typescript-eslint/parser': '*'
-      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
-    peerDependenciesMeta:
-      '@typescript-eslint/parser':
-        optional: true
-    dependencies:
-      array-includes: 3.1.7
-      array.prototype.findlastindex: 1.2.3
-      array.prototype.flat: 1.3.2
-      array.prototype.flatmap: 1.3.2
-      debug: 3.2.7
-      doctrine: 2.1.0
-      eslint: 8.57.0
-      eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.0(eslint-import-resolver-node@0.3.9)(eslint@8.57.0)
-      hasown: 2.0.0
-      is-core-module: 2.13.1
-      is-glob: 4.0.3
-      minimatch: 3.1.2
-      object.fromentries: 2.0.7
-      object.groupby: 1.0.1
-      object.values: 1.1.7
-      semver: 6.3.1
-      tsconfig-paths: 3.15.0
-    transitivePeerDependencies:
-      - eslint-import-resolver-typescript
-      - eslint-import-resolver-webpack
-      - supports-color
-    dev: true
 
   /eslint-plugin-jsdoc@48.2.3(eslint@8.57.0):
     resolution: {integrity: sha512-r9DMAmFs66VNvNqRLLjHejdnJtILrt3xGi+Qx0op0oRfFGVpOR1Hb3BC++MacseHx93d8SKYPhyrC9BS7Os2QA==}
@@ -3818,7 +3830,7 @@ packages:
     resolution: {integrity: sha512-EzV94NYKoO09GLXGjXj9JIlXijVck4ONSr5wiCWDvhsvj5jxSrzTmRU/9C1DyB6uToszLs8aifA6NQ7lEQdvFw==}
     engines: {node: '>= 0.8'}
     dependencies:
-      '@types/node': 20.11.24
+      '@types/node': 20.12.7
       require-like: 0.1.2
     dev: false
 
@@ -6290,7 +6302,6 @@ packages:
       typescript: '>=4.2.0'
     dependencies:
       typescript: 5.4.5
-    dev: false
 
   /ts-node@10.9.1(@types/node@20.11.24)(typescript@5.3.3):
     resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
@@ -6323,6 +6334,37 @@ packages:
       yn: 3.1.1
     dev: true
 
+  /ts-node@10.9.1(@types/node@20.12.7)(typescript@5.4.5):
+    resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
+    hasBin: true
+    peerDependencies:
+      '@swc/core': '>=1.2.50'
+      '@swc/wasm': '>=1.2.50'
+      '@types/node': '*'
+      typescript: '>=2.7'
+    peerDependenciesMeta:
+      '@swc/core':
+        optional: true
+      '@swc/wasm':
+        optional: true
+    dependencies:
+      '@cspotcode/source-map-support': 0.8.1
+      '@tsconfig/node10': 1.0.9
+      '@tsconfig/node12': 1.0.11
+      '@tsconfig/node14': 1.0.3
+      '@tsconfig/node16': 1.0.4
+      '@types/node': 20.12.7
+      acorn: 8.11.3
+      acorn-walk: 8.2.0
+      arg: 4.1.3
+      create-require: 1.1.1
+      diff: 4.0.2
+      make-error: 1.3.6
+      typescript: 5.4.5
+      v8-compile-cache-lib: 3.0.1
+      yn: 3.1.1
+    dev: true
+
   /tsconfig-paths@3.15.0:
     resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
     dependencies:
@@ -6499,7 +6541,6 @@ packages:
     resolution: {integrity: sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==}
     engines: {node: '>=14.17'}
     hasBin: true
-    dev: false
 
   /ufo@1.5.3:
     resolution: {integrity: sha512-Y7HYmWaFwPUmkoQCUIAYpKqkOf+SbVj/2fJJZ4RJMCfZp0rTGwRbzQD+HghfnhKOjL9E01okqz+ncJskGYfBNw==}
@@ -6633,6 +6674,27 @@ packages:
       - terser
     dev: false
 
+  /vite-node@1.5.0(@types/node@20.12.7):
+    resolution: {integrity: sha512-tV8h6gMj6vPzVCa7l+VGq9lwoJjW8Y79vst8QZZGiuRAfijU+EEWuc0kFpmndQrWhMMhet1jdSF+40KSZUqIIw==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    dependencies:
+      cac: 6.7.14
+      debug: 4.3.4
+      pathe: 1.1.2
+      picocolors: 1.0.0
+      vite: 5.2.10(@types/node@20.12.7)
+    transitivePeerDependencies:
+      - '@types/node'
+      - less
+      - lightningcss
+      - sass
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+    dev: false
+
   /vite@5.2.10(@types/node@20.11.24):
     resolution: {integrity: sha512-PAzgUZbP7msvQvqdSD+ErD5qGnSFiGOoWmV5yAKUEI0kdhjbH6nMWVyZQC/hSc4aXwc0oJ9aEdIiF9Oje0JFCw==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -6669,6 +6731,42 @@ packages:
       fsevents: 2.3.3
     dev: false
 
+  /vite@5.2.10(@types/node@20.12.7):
+    resolution: {integrity: sha512-PAzgUZbP7msvQvqdSD+ErD5qGnSFiGOoWmV5yAKUEI0kdhjbH6nMWVyZQC/hSc4aXwc0oJ9aEdIiF9Oje0JFCw==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || >=20.0.0
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      '@types/node': 20.12.7
+      esbuild: 0.20.2
+      postcss: 8.4.38
+      rollup: 4.16.1
+    optionalDependencies:
+      fsevents: 2.3.3
+    dev: false
+
   /w3c-xmlserializer@5.0.0:
     resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
     engines: {node: '>=18'}