Migrate to vite & new structure

Signed-off-by: Bryan Frimin <bryan@getprobo.com> Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>
2025-05-19 20:13:50 +02:00
parent db9e5f32ac
commit a2d1310780
244 changed files with 9153 additions and 3096 deletions
--- a/22
+++ b/22
@@ -54,32 +54,40 @@ pkg/server/api/console/v1/types/types.go \
 pkg/server/api/console/v1/v1_resolver.go: pkg/server/api/console/v1/gqlgen.yaml pkg/server/api/console/v1/schema.graphql
 	$(GO_GENERATE) ./pkg/server/api/console/v1

+.PHONY: help
+help: ## Show this help
+	@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}'
+
+.PHONY:dev
+dev: ## Start the development server
+	parallel -j 2 --line-buffer ::: "gow -r=false run cmd/probod/main.go" "cd apps/console && npm run dev"
+
 .PHONY: fmt
-fmt: fmt-go
+fmt: fmt-go ## Format Go code

 .PHONY: fmt-go
-fmt-go:
+fmt-go: ## Format Go code
 	go fmt ./...

 .PHONY: clean
-clean:
+clean: ## Clean the project (node_modules and build artifacts)
 	$(RM) -rf bin/*
 	$(RM) -rf node_modules
 	$(RM) -rf apps/console/{dist,node_modules}

 .PHONY: stack-up
-stack-up:
+stack-up: ## Start the docker stack as a deamon
 	$(DOCKER_COMPOSE) up -d

 .PHONY: stack-down
-stack-down:
+stack-down: ## Stop the docker stack
 	$(DOCKER_COMPOSE) down

 .PHONY: stack-ps
-stack-ps:
+stack-ps: ## List the docker stack containers
 	$(DOCKER_COMPOSE) ps

 .PHONY: psql
-psql:
+psql: ## Open a psql shell to the postgres container
 	$(DOCKER_COMPOSE) exec postgres psql -U probod -d probod

--- a/TODO.md
+++ b/TODO.md
@@ -0,0 +1,5 @@
+# TODO 
+
+## Packages/ui
+
+- [ ] Design the toast element
--- a/apps/console/index.html
+++ b/apps/console/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Probo - Console</title>
+
+    <link rel="icon shortcut" href="/assets/favicon.ico" sizes="32x32" />
+    <link rel="icon" href="/assets/favicon.svg" type="image/svg+xml" />
+    <link
+      rel="icon"
+      href="/assets/favicon-dark.svg"
+      type="image/svg+xml"
+      media="(prefers-color-scheme: dark)"
+    />
+    <link
+      rel="icon"
+      href="/assets/favicon-16x16.png"
+      type="image/png"
+      sizes="16x16"
+    />
+    <link
+      rel="icon"
+      href="/assets/favicon-32x32.png"
+      type="image/png"
+      sizes="32x32"
+    />
+    <link
+      rel="apple-touch-icon"
+      href="/assets/apple-touch-icon.png"
+      sizes="180x180"
+    />
+
+    <meta name="description" content="The open-source compliance platform" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body class="font-sans">
+    <div id="root"></div>
+    <script type="module" src="/src/App.tsx"></script>
+  </body>
+</html>
--- a/apps/console/relay.config.json
+++ b/apps/console/relay.config.json
@@ -0,0 +1,6 @@
+{
+  "src": "./src",
+  "schema": "./schema.graphql",
+  "language": "typescript",
+  "eagerEsModules": true
+}
--- a/apps/console/src/vite-env.d.ts
+++ b/apps/console/src/vite-env.d.ts
@@ -0,0 +1,11 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly POSTHOG_KEY: string;
+  readonly POSTHOG_HOST: string;
+  readonly API_SERVER_HOST: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
--- a/apps/console/tsconfig.app.json
+++ b/apps/console/tsconfig.app.json
@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}
--- a/apps/console/tsconfig.node.json
+++ b/apps/console/tsconfig.node.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/apps/console/vite.config.ts
+++ b/apps/console/vite.config.ts
@@ -0,0 +1,23 @@
+import {defineConfig} from 'vite'
+import react from '@vitejs/plugin-react'
+import {resolve} from 'node:path';
+import tailwindcss from '@tailwindcss/vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    react({babel: {plugins: ["relay"]}}),
+    tailwindcss(),
+  ],
+  server: {
+    cors: {
+      // the origin you will be accessing via browser
+      origin: 'http://localhost:8080',
+    },
+  },
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+    },
+  },
+})
--- a/apps/console2/.env
+++ b/apps/console2/.env
@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:8080
--- a/apps/console2/.gitattributes
+++ b/apps/console2/.gitattributes
@@ -0,0 +1,2 @@
+__generated__/*.graphql linguist-generated
+__generated__/*.js linguist-generated
--- a/apps/console2/.gitignore
+++ b/apps/console2/.gitignore
@@ -0,0 +1,25 @@
+# Logs
+old
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/apps/console2/README.md
+++ b/apps/console2/README.md
@@ -0,0 +1,54 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config({
+  extends: [
+    // Remove ...tseslint.configs.recommended and replace with this
+    ...tseslint.configs.recommendedTypeChecked,
+    // Alternatively, use this for stricter rules
+    ...tseslint.configs.strictTypeChecked,
+    // Optionally, add this for stylistic rules
+    ...tseslint.configs.stylisticTypeChecked,
+  ],
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default tseslint.config({
+  plugins: {
+    // Add the react-x and react-dom plugins
+    'react-x': reactX,
+    'react-dom': reactDom,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended typescript rules
+    ...reactX.configs['recommended-typescript'].rules,
+    ...reactDom.configs.recommended.rules,
+  },
+})
+```
--- a/apps/console2/eslint.config.js
+++ b/apps/console2/eslint.config.js
@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)
--- a/apps/console2/index.html
+++ b/apps/console2/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/apps/console2/package.json
+++ b/apps/console2/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "console2",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "relay": "npx relay-compiler",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@probo/i18n": "1.0.0",
+    "@probo/ui": "1.0.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-error-boundary": "^6.0.0",
+    "react-relay": "^19.0.0",
+    "react-router": "^7.6.0",
+    "relay-runtime": "^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.25.0",
+    "@tailwindcss/vite": "^4.1.7",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "@types/react-relay": "^18.2.1",
+    "@types/relay-runtime": "^19.0.1",
+    "@vitejs/plugin-react": "^4.4.1",
+    "babel-plugin-relay": "^19.0.0",
+    "eslint": "^9.25.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^16.0.0",
+    "graphql": "^16.11.0",
+    "prettier": "^3.5.3",
+    "relay-compiler": "^19.0.0",
+    "tailwindcss": "^4.1.7",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.30.1",
+    "vite": "^6.3.5"
+  }
+}
--- a/apps/console2/public/vite.svg
+++ b/apps/console2/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/apps/console2/relay.config.json
+++ b/apps/console2/relay.config.json
@@ -0,0 +1,6 @@
+{
+  "src": "./src",
+  "schema": "../../pkg/server/api/console/v1/schema.graphql",
+  "language": "typescript",
+  "eagerEsModules": true
+}
--- a/apps/console2/src/App.tsx
+++ b/apps/console2/src/App.tsx
@@ -0,0 +1,7 @@
+import { ErrorBoundary } from "react-error-boundary";
+import { RouterProvider } from "react-router";
+import { routes } from "./routes";
+
+export function App() {
+  return <RouterProvider router={routes} />;
+}
--- a/apps/console2/src/assets/react.svg
+++ b/apps/console2/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/apps/console2/src/index.css
+++ b/apps/console2/src/index.css
@@ -0,0 +1,4 @@
+@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap");
+@import "tailwindcss";
+@import "@probo/ui/src/theme.css";
+@source '../../../packages/ui/src';
--- a/apps/console2/src/layouts/MainLayout.tsx
+++ b/apps/console2/src/layouts/MainLayout.tsx
@@ -0,0 +1,118 @@
+import { Outlet, useParams } from "react-router";
+import {
+  DropdownSeparator,
+  IconArrowBoxLeft,
+  IconBank,
+  IconCircleQuestionmark,
+  IconFire3,
+  IconGroup1,
+  IconInboxEmpty,
+  IconPageTextLine,
+  IconSettingsGear2,
+  IconStore,
+  IconTodo,
+  Layout,
+  SidebarItem,
+  UserDropdown,
+  UserDropdownItem,
+} from "@probo/ui";
+import { useTranslate } from "@probo/i18n";
+import { graphql } from "relay-runtime";
+import { useLazyLoadQuery } from "react-relay";
+import type { MainLayoutQuery as MainLayoutQueryType } from "./__generated__/MainLayoutQuery.graphql";
+
+const MainLayoutQuery = graphql`
+  query MainLayoutQuery {
+    viewer {
+      id
+      user {
+        fullName
+        email
+      }
+    }
+  }
+`;
+
+export function MainLayout() {
+  const { organizationId } = useParams();
+  const { __ } = useTranslate();
+  const user = useLazyLoadQuery<MainLayoutQueryType>(MainLayoutQuery, {}).viewer
+    .user;
+
+  const prefix = `/organizations/${organizationId}`;
+
+  return (
+    <Layout
+      header={
+        <>
+          <div className="mr-auto"></div>
+          <UserDropdown fullName={user.fullName} email={user.email}>
+            <UserDropdownItem
+              to="/settings"
+              icon={IconSettingsGear2}
+              label={__("Settings")}
+            />
+            <UserDropdownItem
+              to="/settings"
+              icon={IconCircleQuestionmark}
+              label={__("Help")}
+            />
+            <DropdownSeparator />
+            <UserDropdownItem
+              variant="danger"
+              to="/logout"
+              icon={IconArrowBoxLeft}
+              label="Logout"
+            />
+          </UserDropdown>
+        </>
+      }
+      sidebar={
+        <ul className="space-y-[2px]">
+          <SidebarItem
+            label={__("Tasks")}
+            icon={IconInboxEmpty}
+            to={`${prefix}/tasks`}
+          />
+          <SidebarItem
+            label={__("Measures")}
+            icon={IconTodo}
+            to={`${prefix}/measures`}
+          />
+          <SidebarItem
+            label={__("Risks")}
+            icon={IconFire3}
+            to={`${prefix}/risks`}
+          />
+          <SidebarItem
+            label={__("Frameworks")}
+            icon={IconBank}
+            to={`${prefix}/frameworks`}
+          />
+          <SidebarItem
+            label={__("People")}
+            icon={IconGroup1}
+            to={`${prefix}/people`}
+          />
+          <SidebarItem
+            label={__("Vendors")}
+            icon={IconStore}
+            to={`${prefix}/vendors`}
+          />
+          <SidebarItem
+            label={__("Policies")}
+            icon={IconPageTextLine}
+            to={`${prefix}/policies`}
+          />
+          <SidebarItem
+            label={__("Settings")}
+            icon={IconSettingsGear2}
+            to={`${prefix}/settings`}
+          />
+        </ul>
+      }
+    >
+      <Outlet />
+    </Layout>
+  );
+}
--- a/apps/console2/src/layouts/generated/MainLayoutQuery.graphql.ts
+++ b/apps/console2/src/layouts/generated/MainLayoutQuery.graphql.ts
@@ -0,0 +1,132 @@
+/**
+ * @generated SignedSource<<998d88d8fcb28932ec470d6afdb49b8e>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest } from 'relay-runtime';
+export type MainLayoutQuery$variables = Record<PropertyKey, never>;
+export type MainLayoutQuery$data = {
+  readonly viewer: {
+    readonly id: string;
+    readonly user: {
+      readonly email: string;
+      readonly fullName: string;
+    };
+  };
+};
+export type MainLayoutQuery = {
+  response: MainLayoutQuery$data;
+  variables: MainLayoutQuery$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "id",
+  "storageKey": null
+},
+v1 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "fullName",
+  "storageKey": null
+},
+v2 = {
+  "alias": null,
+  "args": null,
+  "kind": "ScalarField",
+  "name": "email",
+  "storageKey": null
+};
+return {
+  "fragment": {
+    "argumentDefinitions": [],
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "MainLayoutQuery",
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "concreteType": "Viewer",
+        "kind": "LinkedField",
+        "name": "viewer",
+        "plural": false,
+        "selections": [
+          (v0/*: any*/),
+          {
+            "alias": null,
+            "args": null,
+            "concreteType": "User",
+            "kind": "LinkedField",
+            "name": "user",
+            "plural": false,
+            "selections": [
+              (v1/*: any*/),
+              (v2/*: any*/)
+            ],
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ],
+    "type": "Query",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": [],
+    "kind": "Operation",
+    "name": "MainLayoutQuery",
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "concreteType": "Viewer",
+        "kind": "LinkedField",
+        "name": "viewer",
+        "plural": false,
+        "selections": [
+          (v0/*: any*/),
+          {
+            "alias": null,
+            "args": null,
+            "concreteType": "User",
+            "kind": "LinkedField",
+            "name": "user",
+            "plural": false,
+            "selections": [
+              (v1/*: any*/),
+              (v2/*: any*/),
+              (v0/*: any*/)
+            ],
+            "storageKey": null
+          }
+        ],
+        "storageKey": null
+      }
+    ]
+  },
+  "params": {
+    "cacheID": "4b5a08e03bcb26d2edadb57cd94aa7d1",
+    "id": null,
+    "metadata": {},
+    "name": "MainLayoutQuery",
+    "operationKind": "query",
+    "text": "query MainLayoutQuery {\n  viewer {\n    id\n    user {\n      fullName\n      email\n      id\n    }\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "785f7a3ca19b673a157ef0f649de5c1b";
+
+export default node;
--- a/apps/console2/src/main.tsx
+++ b/apps/console2/src/main.tsx
@@ -0,0 +1,16 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import { App } from "./App.tsx";
+import { RelayProvider } from "./providers/RelayProviders.tsx";
+import { TranslatorProvider } from "./providers/TranslatorProvider.tsx";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <RelayProvider>
+      <TranslatorProvider>
+        <App />
+      </TranslatorProvider>
+    </RelayProvider>
+  </StrictMode>
+);
--- a/apps/console2/src/pages/auth/LoginPage.tsx
+++ b/apps/console2/src/pages/auth/LoginPage.tsx
@@ -0,0 +1,73 @@
+import { useTranslate } from "@probo/i18n";
+import { Button, Input, useToast } from "@probo/ui";
+import type { FormEventHandler } from "react";
+import { Link, useLocation, useNavigate } from "react-router";
+
+export function LoginPage() {
+  const { __ } = useTranslate();
+  const navigate = useNavigate();
+  const { toast } = useToast();
+
+  const handleSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    const email = formData.get("email")?.toString();
+    const password = formData.get("password")?.toString();
+
+    fetch(import.meta.env.VITE_API_URL + "/api/console/v1/auth/login", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ email, password }),
+    })
+      .then(async (res) => {
+        if (!res.ok) {
+          const error = await res.json();
+          throw new Error(error.message || __("Failed to login"));
+        }
+
+        navigate("/");
+      })
+      .catch((e) => {
+        toast({
+          title: __("Error"),
+          description: e.message as string,
+          variant: "error",
+        });
+      });
+  };
+
+  return (
+    <form className="space-y-4" onSubmit={handleSubmit}>
+      <h1 className="text-center text-2xl font-bold">
+        {__("Login to your account")}
+      </h1>
+      <p className="text-center text-txt-tertiary mt-1 mb-6">
+        {__("Enter your email below to login to your account")}
+      </p>
+      <Input
+        required
+        placeholder={__("Email")}
+        name="email"
+        type="email"
+        label={__("Email")}
+      />
+      <Input
+        required
+        placeholder={__("Password")}
+        name="password"
+        type="password"
+        label={__("Password")}
+      />
+      <Button className="w-full">{__("Login")}</Button>
+
+      <div className="text-center mt-6 text-sm text-txt-secondary">
+        {__("Don't have an account ?")}{" "}
+        <Link to="/auth/register" className="underline hover:text-txt-primary">
+          {__("Register")}
+        </Link>
+      </div>
+    </form>
+  );
+}
--- a/apps/console2/src/providers/RelayProviders.tsx
+++ b/apps/console2/src/providers/RelayProviders.tsx
@@ -0,0 +1,131 @@
+import {
+  Environment,
+  type FetchFunction,
+  Network,
+  RecordSource,
+  Store,
+} from "relay-runtime";
+import { GraphQLError } from "graphql";
+import type { PropsWithChildren } from "react";
+import { RelayEnvironmentProvider } from "react-relay";
+
+export class UnAuthenticatedError extends Error {
+  constructor() {
+    super("UNAUTHENTICATED");
+    this.name = "UnAuthenticatedError";
+  }
+}
+
+export class InternalServerError extends Error {
+  constructor() {
+    super("INTERNAL_SERVER_ERROR");
+    this.name = "InternalServerError";
+  }
+}
+
+const hasUnauthenticatedError = (error: GraphQLError) =>
+  error.extensions?.code == "UNAUTHENTICATED";
+
+const fetchRelay: FetchFunction = async (
+  request,
+  variables,
+  _,
+  uploadables
+) => {
+  const requestInit: RequestInit = {
+    method: "POST",
+    credentials: "include",
+    headers: {},
+  };
+
+  if (uploadables) {
+    const formData = new FormData();
+    formData.append(
+      "operations",
+      JSON.stringify({
+        operationName: request.name,
+        query: request.text,
+        variables: variables,
+      })
+    );
+
+    const uploadableMap: {
+      [key: string]: string[];
+    } = {};
+
+    Object.keys(uploadables).forEach((key, index) => {
+      uploadableMap[index] = [`variables.${key}`];
+    });
+
+    formData.append("map", JSON.stringify(uploadableMap));
+
+    Object.keys(uploadables).forEach((key, index) => {
+      formData.append(index.toString(), uploadables[key]);
+    });
+
+    requestInit.body = formData;
+  } else {
+    requestInit.headers = {
+      Accept:
+        "application/graphql-response+json; charset=utf-8, application/json; charset=utf-8",
+      "Content-Type": "application/json",
+    };
+
+    requestInit.body = JSON.stringify({
+      operationName: request.name,
+      query: request.text,
+      variables,
+    });
+  }
+
+  const response = await fetch(
+    import.meta.env.VITE_API_URL + "/api/console/v1/query",
+    requestInit
+  );
+
+  if (response.status === 500) {
+    throw new InternalServerError();
+  }
+
+  const json = await response.json();
+
+  if (json.errors) {
+    const errors = json.errors as GraphQLError[];
+
+    if (errors.find(hasUnauthenticatedError)) {
+      throw new UnAuthenticatedError();
+    }
+
+    throw new Error(
+      `Error fetching GraphQL query '${
+        request.name
+      }' with variables '${JSON.stringify(variables)}': ${JSON.stringify(
+        json.errors
+      )}`
+    );
+  }
+
+  return json;
+};
+
+const source = new RecordSource();
+const store = new Store(source, {
+  queryCacheExpirationTime: 1 * 60 * 1000,
+  gcReleaseBufferSize: 20,
+});
+
+const environment = new Environment({
+  network: Network.create(fetchRelay),
+  store,
+});
+
+/**
+ * Provider for relay with the probo environment
+ */
+export const RelayProvider = ({ children }: PropsWithChildren) => {
+  return (
+    <RelayEnvironmentProvider environment={environment}>
+      {children}
+    </RelayEnvironmentProvider>
+  );
+};
--- a/apps/console2/src/providers/TranslatorProvider.tsx
+++ b/apps/console2/src/providers/TranslatorProvider.tsx
@@ -0,0 +1,18 @@
+import type { PropsWithChildren } from "react";
+import { TranslatorProvider as ProboTranslatorProvider } from "@probo/i18n";
+
+// TODO : implement a way to retrieve translations strings
+const loader = () => {
+  return Promise.resolve({} as Record<string, string>);
+};
+
+/**
+ * Provider for the translator
+ */
+export function TranslatorProvider({ children }: PropsWithChildren) {
+  return (
+    <ProboTranslatorProvider lang="en" loader={loader}>
+      {children}
+    </ProboTranslatorProvider>
+  );
+}
--- a/apps/console2/src/routes.tsx
+++ b/apps/console2/src/routes.tsx
@@ -0,0 +1,38 @@
+import { createBrowserRouter, useRouteError } from "react-router";
+import { MainLayout } from "./layouts/MainLayout";
+import { UnAuthenticatedError } from "./providers/RelayProviders";
+import { AuthLayout } from "@probo/ui";
+import { LoginPage } from "./pages/auth/LoginPage";
+
+function Demo() {
+  const error = useRouteError();
+  if (error instanceof UnAuthenticatedError) {
+    return <div></div>;
+  }
+  console.log(error);
+  return <div>error</div>;
+}
+
+export const routes = createBrowserRouter([
+  {
+    path: "/auth",
+    Component: AuthLayout,
+    children: [
+      {
+        path: "login",
+        element: <LoginPage />,
+      },
+    ],
+  },
+  {
+    path: "/",
+    Component: MainLayout,
+    ErrorBoundary: Demo,
+    children: [
+      {
+        path: "/",
+        element: <div>Home</div>,
+      },
+    ],
+  },
+]);
--- a/apps/console2/src/vite-env.d.ts
+++ b/apps/console2/src/vite-env.d.ts
@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly API_URL: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
--- a/apps/console2/tsconfig.app.json
+++ b/apps/console2/tsconfig.app.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
--- a/apps/console2/tsconfig.json
+++ b/apps/console2/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/apps/console2/tsconfig.node.json
+++ b/apps/console2/tsconfig.node.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/apps/console2/vite.config.ts
+++ b/apps/console2/vite.config.ts
@@ -0,0 +1,14 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+import { resolve } from "node:path";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react({ babel: { plugins: ["relay"] } }), tailwindcss()],
+  resolve: {
+    alias: {
+      "@": resolve(__dirname, "./src"),
+    },
+  },
+});
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -15,5 +15,8 @@
    "test": "npm run test --workspaces --if-present",
    "lint": "npm run lint --workspaces --if-present"
  },
-  "license": "MIT"
+  "license": "MIT",
+  "volta": {
+    "node": "22.15.0"
+  }
 }
--- a/packages/helpers/package.json
+++ b/packages/helpers/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@probo/helpers",
+  "version": "1.0.0",
+  "description": "",
+  "main": "./src/index.ts",
+  "scripts": {
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "format": "prettier --write ./src"
+  },
+  "prettier": "@probo/prettier",
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@probo/prettier": "1.0.0",
+    "prettier": "^3.5.3",
+    "typescript": "^5.8.3",
+    "vitest": "^3.1.3"
+  }
+}
--- a/packages/helpers/src/index.ts
+++ b/packages/helpers/src/index.ts
@@ -0,0 +1 @@
+export { objectKeys } from "./object";
--- a/packages/helpers/src/object.ts
+++ b/packages/helpers/src/object.ts
@@ -0,0 +1,6 @@
+/**
+ * A type safe version of Object.keys
+ */
+export function objectKeys<T>(object: T) {
+    return Object.keys(object) as (keyof T)[];
+}
--- a/packages/helpers/tsconfig.json
+++ b/packages/helpers/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "lib": ["ES2021", "dom"]
+  }
+}
--- a/packages/i18n/TranslatorProvider.tsx
+++ b/packages/i18n/TranslatorProvider.tsx
@@ -0,0 +1,60 @@
+import {
+    createContext,
+    PropsWithChildren,
+    useCallback,
+    useContext,
+    useEffect,
+    useState,
+} from "react";
+
+const defaultValue = {
+    lang: "en" as "en" | "fr",
+    translations: {} as Record<string, string>,
+    translate: (s: string) => s,
+};
+
+type Context = typeof defaultValue;
+
+const TranslatorContext = createContext(defaultValue);
+
+type Props = {
+    lang: "en" | "fr";
+    loader: (lang: string) => Promise<Record<string, string>>;
+};
+
+export function TranslatorProvider({
+    lang,
+    loader,
+    children,
+}: PropsWithChildren<Props>) {
+    const [translations, setTranslations] = useState(
+        {} as Record<string, string>,
+    );
+    const translate = useCallback<Context["translate"]>(
+        (s) => {
+            return translations[s] ? translations[s] : s;
+        },
+        [translations],
+    );
+
+    useEffect(() => {
+        loader(lang).then(setTranslations);
+    }, [lang]);
+
+    return (
+        <TranslatorContext.Provider
+            value={{ lang, translations, translate }}
+        >
+            {children}
+        </TranslatorContext.Provider>
+    );
+}
+
+export function useTranslate() {
+    const { translate, lang } =
+        useContext(TranslatorContext);
+    return {
+        lang,
+        __: translate,
+    };
+}
--- a/packages/i18n/package.json
+++ b/packages/i18n/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "@probo/i18n",
+  "version": "1.0.0",
+  "description": "",
+  "main": "./TranslatorProvider.tsx",
+  "scripts": {},
+  "peerDependencies": {
+    "react": "^18.0"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@types/react": "^18.2.78"
+  },
+  "dependencies": {
+    "date-fns": "^3.6.0"
+  }
+}
--- a/packages/prettier/package.json
+++ b/packages/prettier/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@probo/prettier",
+  "private": true,
+  "version": "1.0.0",
+  "description": "",
+  "main": "prettier.config.js",
+  "scripts": {
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}
--- a/packages/prettier/prettier.config.js
+++ b/packages/prettier/prettier.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+    tabWidth: 4,
+};
--- a/packages/ui/.gitignore
+++ b/packages/ui/.gitignore
@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*storybook.log
--- a/packages/ui/.storybook/main.ts
+++ b/packages/ui/.storybook/main.ts
@@ -0,0 +1,28 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+import { join, dirname } from "path"
+
+/**
+* This function is used to resolve the absolute path of a package.
+* It is needed in projects that use Yarn PnP or are set up within a monorepo.
+*/
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')))
+}
+const config: StorybookConfig = {
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-onboarding'),
+    getAbsolutePath('@chromatic-com/storybook'),
+    getAbsolutePath("@storybook/experimental-addon-test")
+  ],
+  "framework": {
+    "name": getAbsolutePath('@storybook/react-vite'),
+    "options": {}
+  }
+};
+export default config;
--- a/packages/ui/.storybook/preview.css
+++ b/packages/ui/.storybook/preview.css
@@ -0,0 +1,3 @@
+@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap");
+@import 'tailwindcss';
+@import '../src/theme.css';
--- a/packages/ui/.storybook/preview.tsx
+++ b/packages/ui/.storybook/preview.tsx
@@ -0,0 +1,27 @@
+import type { Preview } from "@storybook/react";
+
+import "../src/theme.css";
+import "./preview.css";
+import { BrowserRouter } from "react-router";
+
+const preview: Preview = {
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+    },
+    decorators: [
+        (Story, { parameters }) => {
+            return (
+                <BrowserRouter>
+                    <Story />
+                </BrowserRouter>
+            );
+        },
+    ],
+};
+
+export default preview;
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -0,0 +1,54 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config({
+  extends: [
+    // Remove ...tseslint.configs.recommended and replace with this
+    ...tseslint.configs.recommendedTypeChecked,
+    // Alternatively, use this for stricter rules
+    ...tseslint.configs.strictTypeChecked,
+    // Optionally, add this for stylistic rules
+    ...tseslint.configs.stylisticTypeChecked,
+  ],
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default tseslint.config({
+  plugins: {
+    // Add the react-x and react-dom plugins
+    'react-x': reactX,
+    'react-dom': reactDom,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended typescript rules
+    ...reactX.configs['recommended-typescript'].rules,
+    ...reactDom.configs.recommended.rules,
+  },
+})
+```
--- a/packages/ui/eslint.config.js
+++ b/packages/ui/eslint.config.js
@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)
--- a/packages/ui/index.html
+++ b/packages/ui/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -0,0 +1,66 @@
+{
+    "name": "@probo/ui",
+    "version": "1.0.0",
+    "private": true,
+    "type": "module",
+    "main": "src/index.ts",
+    "scripts": {
+        "lint": "eslint .",
+        "dev": "storybook dev -p 6006",
+        "build": "storybook build"
+    },
+    "prettier": "@probo/prettier",
+    "dependencies": {
+        "@probo/helpers": "1.0.0",
+        "@probo/i18n": "1.0.0",
+        "@radix-ui/react-dropdown-menu": "^2.1.14",
+        "@tailwindcss/vite": "^4.1.7",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "react": "^19.1.0",
+        "react-dom": "^19.1.0",
+        "tailwind-merge": "^3.3.0",
+        "tailwind-variants": "^1.0.0",
+        "tailwindcss": "^4.1.7",
+        "tw-animate-css": "^1.3.0",
+        "zustand": "^5.0.4"
+    },
+    "devDependencies": {
+        "@chromatic-com/storybook": "^3.2.6",
+        "@eslint/js": "^9.25.0",
+        "@probo/prettier": "1.0.0",
+        "@storybook/addon-essentials": "^8.6.13",
+        "@storybook/addon-onboarding": "^8.6.13",
+        "@storybook/blocks": "^8.6.13",
+        "@storybook/experimental-addon-test": "^8.6.13",
+        "@storybook/react": "^8.6.13",
+        "@storybook/react-vite": "^8.6.13",
+        "@storybook/test": "^8.6.13",
+        "@types/react": "^19.1.2",
+        "@types/react-dom": "^19.1.2",
+        "@vitejs/plugin-react": "^4.4.1",
+        "@vitest/browser": "^3.1.3",
+        "@vitest/coverage-v8": "^3.1.3",
+        "eslint": "^9.25.0",
+        "eslint-plugin-react-hooks": "^5.2.0",
+        "eslint-plugin-react-refresh": "^0.4.19",
+        "eslint-plugin-storybook": "^0.12.0",
+        "globals": "^16.0.0",
+        "playwright": "^1.52.0",
+        "prettier": "^3.5.3",
+        "react-router": "^7.6.0",
+        "storybook": "^8.6.13",
+        "typescript": "~5.8.3",
+        "typescript-eslint": "^8.30.1",
+        "vite": "^6.3.5",
+        "vitest": "^3.1.3"
+    },
+    "peerDependencies": {
+        "react-router": "^7.6.0"
+    },
+    "eslintConfig": {
+        "extends": [
+            "plugin:storybook/recommended"
+        ]
+    }
+}
--- a/packages/ui/src/Atoms/Avatar/Avatar.stories.tsx
+++ b/packages/ui/src/Atoms/Avatar/Avatar.stories.tsx
@@ -0,0 +1,16 @@
+import { Avatar } from "./Avatar";
+import type { Meta, StoryObj } from "@storybook/react";
+
+export default {
+    title: "Atoms/Avatar",
+    component: Avatar,
+    argTypes: {},
+} satisfies Meta<typeof Avatar>;
+
+type Story = StoryObj<typeof Avatar>;
+
+export const Default: Story = {
+    args: {
+        fullName: "John Doe",
+    },
+};
--- a/packages/ui/src/Atoms/Avatar/Avatar.tsx
+++ b/packages/ui/src/Atoms/Avatar/Avatar.tsx
@@ -0,0 +1,36 @@
+import { tv } from "tailwind-variants";
+
+type Props = {
+    fullName: string;
+    size?: "s" | "m" | "l" | "xl";
+};
+
+const avatar = tv({
+    base: "bg-txt-success text-sm text-invert rounded-full text-xxs font-semibold flex items-center justify-center",
+    variants: {
+        size: {
+            s: "size-5",
+            m: "size-6",
+            l: "size-8",
+            xl: "size-16",
+        },
+    },
+    defaultVariants: {
+        size: "m",
+    },
+});
+
+export function Avatar({ fullName, size = "m" }: Props) {
+    return <div className={avatar({ size })}>{extractInitials(fullName)}</div>;
+}
+
+function extractInitials(name: string) {
+    const words = name.split(" ");
+    if (words.length === 2) {
+        return words
+            .map((word) => word[0])
+            .join("")
+            .toUpperCase();
+    }
+    return name.substring(0, 2).toUpperCase();
+}
--- a/packages/ui/src/Atoms/Button/Button.stories.tsx
+++ b/packages/ui/src/Atoms/Button/Button.stories.tsx
@@ -0,0 +1,54 @@
+import { IconPlusLarge } from "../Icons";
+import { Button } from "./Button";
+import type { Meta, StoryObj } from "@storybook/react";
+
+export default {
+    title: "Atoms/Button",
+    component: Button,
+    argTypes: {},
+} satisfies Meta<typeof Button>;
+
+type Story = StoryObj<typeof Button>;
+
+const variants = [
+    "primary",
+    "secondary",
+    "tertiary",
+    "quaternary",
+    "danger",
+] as const;
+
+export const Default: Story = {
+    render() {
+        return (
+            <div className="space-y-4">
+                {variants.map((variant) => (
+                    <div className="flex gap-4" key={variant}>
+                        <Button
+                            key={variant}
+                            variant={variant}
+                            icon={IconPlusLarge}
+                            iconAfter={IconPlusLarge}
+                        >
+                            Button
+                        </Button>
+                        <Button
+                            key={variant}
+                            disabled
+                            variant={variant}
+                            icon={IconPlusLarge}
+                            iconAfter={IconPlusLarge}
+                        >
+                            Button
+                        </Button>
+                        <Button
+                            key={variant}
+                            variant={variant}
+                            icon={IconPlusLarge}
+                        />
+                    </div>
+                ))}
+            </div>
+        );
+    },
+};
--- a/packages/ui/src/Atoms/Button/Button.tsx
+++ b/packages/ui/src/Atoms/Button/Button.tsx
@@ -0,0 +1,83 @@
+import type {
+    AnchorHTMLAttributes,
+    ButtonHTMLAttributes,
+    FC,
+    PropsWithChildren,
+} from "react";
+import { forwardRef } from "react";
+import { Link } from "react-router";
+import { tv, type VariantProps } from "tailwind-variants";
+
+const button = tv({
+    base: "flex items-center justify-center gap-[6px] px-3 py-2 rounded-full cursor-pointer text-sm font-medium h-8",
+    variants: {
+        variant: {
+            primary:
+                "bg-primary text-invert hover:bg-primary-hover shadow-base hover:shadow-hover active:bg-primary-pressed focus:shadow-focus",
+            secondary:
+                "bg-secondary text-txt-primary hover:bg-secondary-hover shadow-base hover:shadow-hover active:bg-secondary-pressed focus:shadow-focus border border-border-low",
+            tertiary:
+                "bg-tertiary text-txt-primary hover:bg-tertiary-hover active:bg-tertiary-pressed focus:shadow-focus",
+            quaternary:
+                "bg-highlight text-txt-primary hover:bg-highlight-hover active:bg-highlight-pressed",
+            danger: "bg-danger-plain text-invert hover:bg-danger-hover shadow-base hover:shadow-hover active:bg-danger-pressed focus:shadow-focus border border-border-danger",
+        },
+        disabled: {
+            true: "opacity-60 cursor-default",
+        },
+        empty: {
+            true: "p-2 size-8",
+        },
+    },
+    defaultVariants: {
+        variant: "primary",
+        icon: false,
+        children: undefined,
+    },
+});
+
+type Props = PropsWithChildren<
+    {
+        icon?: FC<{ size: number }>;
+        iconAfter?: FC<{ size: number }>;
+        disabled?: boolean;
+        onClick?: () => void;
+        variant?:
+            | "primary"
+            | "secondary"
+            | "tertiary"
+            | "quaternary"
+            | "danger";
+        to?: string;
+    } & VariantProps<typeof button>
+> &
+    (
+        | ButtonHTMLAttributes<HTMLButtonElement>
+        | AnchorHTMLAttributes<HTMLAnchorElement>
+    );
+
+export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, Props>(
+    (props, ref) => {
+        const Component = props.to ? Link : "button";
+        const {
+            icon: IconComponent,
+            iconAfter: IconAfterComponent,
+            children,
+            onClick,
+            ...componentProps
+        } = props;
+        return (
+            <Component
+                {...componentProps}
+                onClick={onClick}
+                // @ts-expect-error Component is too dynamic
+                ref={ref}
+                className={button({ ...props, empty: !children })}
+            >
+                {IconComponent && <IconComponent size={16} />}
+                {children}
+                {IconAfterComponent && <IconAfterComponent size={16} />}
+            </Component>
+        );
+    },
+);
--- a/packages/ui/src/Atoms/Dropdown/Dropdown.stories.tsx
+++ b/packages/ui/src/Atoms/Dropdown/Dropdown.stories.tsx
@@ -0,0 +1,35 @@
+import { Button } from "../Button/Button";
+import { IconCircleQuestionmark1 } from "../Icons";
+import { Dropdown, DropdownItem, DropdownSeparator } from "./Dropdown";
+import type { Meta, StoryObj } from "@storybook/react";
+
+export default {
+    title: "Atoms/Dropdown",
+    component: Dropdown,
+    argTypes: {},
+    subcomponents: {
+        DropdownItem,
+        DropdownSeparator,
+    },
+} satisfies Meta<typeof Dropdown>;
+
+type Story = StoryObj<typeof Dropdown>;
+
+export const Default: Story = {
+    render: () => {
+        return (
+            <Dropdown toggle={<Button variant="tertiary">Dropdown</Button>}>
+                <DropdownItem icon={IconCircleQuestionmark1}>
+                    Item 1
+                </DropdownItem>
+                <DropdownSeparator />
+                <DropdownItem icon={IconCircleQuestionmark1}>
+                    Item 2
+                </DropdownItem>
+                <DropdownItem icon={IconCircleQuestionmark1}>
+                    Item 3
+                </DropdownItem>
+            </Dropdown>
+        );
+    },
+};
--- a/packages/ui/src/Atoms/Dropdown/Dropdown.tsx
+++ b/packages/ui/src/Atoms/Dropdown/Dropdown.tsx
@@ -0,0 +1,79 @@
+import type { FC, PropsWithChildren, ReactNode } from "react";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import { clsx } from "clsx";
+import type { IconProps } from "../Icons/type.ts";
+import { tv } from "tailwind-variants";
+
+type Props = PropsWithChildren<{
+    toggle: ReactNode;
+    className?: string;
+}>;
+
+export function Dropdown({ children, toggle, className }: Props) {
+    return (
+        <DropdownMenu.Root>
+            <DropdownMenu.Trigger asChild>{toggle}</DropdownMenu.Trigger>
+            <DropdownMenu.Portal>
+                <DropdownMenu.Content
+                    className={clsx(
+                        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
+                        "z-50 p-2 shadow-mid min-w-[8rem] bg-surface-1 overflow-y-auto overflow-x-hidden rounded-2xl border-border-low",
+                        className,
+                    )}
+                    sideOffset={5}
+                >
+                    {children}
+                </DropdownMenu.Content>
+            </DropdownMenu.Portal>
+        </DropdownMenu.Root>
+    );
+}
+
+export function DropdownSeparator() {
+    return <DropdownMenu.Separator className="h-[1px] bg-border-low my-2" />;
+}
+
+type DropdownItemProps = PropsWithChildren<{
+    className?: string;
+    icon?: FC<IconProps>;
+    asChild?: boolean;
+    variant?: "primary" | "tertiary" | "danger";
+}>;
+
+const dropdownItem = tv({
+    base: "text-txt-primary flex items-center gap-2 hover:bg-tertiary-hover active:bg-tertiary-pressed cursor-pointer p-2",
+    variants: {
+        variant: {
+            primary: "text-txt-primary",
+            tertiary: "text-txt-tertiary",
+            danger: "text-txt-danger",
+        },
+    },
+    defaultVariants: {
+        variant: "primary",
+    },
+});
+
+export function DropdownItem({
+    icon: IconComponent,
+    variant,
+    className,
+    children,
+    asChild,
+}: DropdownItemProps) {
+    return (
+        <DropdownMenu.Item
+            className={clsx(dropdownItem({ variant }), className)}
+            asChild={asChild}
+        >
+            {asChild ? (
+                children
+            ) : (
+                <>
+                    {IconComponent && <IconComponent size={16} />}
+                    {children}
+                </>
+            )}
+        </DropdownMenu.Item>
+    );
+}
--- a/packages/ui/src/Atoms/Icons/Frame-1.svg
+++ b/packages/ui/src/Atoms/Icons/Frame-1.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16V12C13 11.7167 12.9042 11.4792 12.7125 11.2875C12.5208 11.0958 12.2833 11 12 11C11.7167 11 11.4792 11.0958 11.2875 11.2875C11.0958 11.4792 11 11.7167 11 12V16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 9C12.2833 9 12.5208 8.90417 12.7125 8.7125C12.9042 8.52083 13 8.28333 13 8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8C11 8.28333 11.0958 8.52083 11.2875 8.7125C11.4792 8.90417 11.7167 9 12 9ZM12 21.9C11.8833 21.9 11.775 21.8917 11.675 21.875C11.575 21.8583 11.475 21.8333 11.375 21.8C9.125 21.05 7.33333 19.6625 6 17.6375C4.66667 15.6125 4 13.4333 4 11.1V6.375C4 5.95833 4.12083 5.58333 4.3625 5.25C4.60417 4.91667 4.91667 4.675 5.3 4.525L11.3 2.275C11.5333 2.19167 11.7667 2.15 12 2.15C12.2333 2.15 12.4667 2.19167 12.7 2.275L18.7 4.525C19.0833 4.675 19.3958 4.91667 19.6375 5.25C19.8792 5.58333 20 5.95833 20 6.375V11.1C20 13.4333 19.3333 15.6125 18 17.6375C16.6667 19.6625 14.875 21.05 12.625 21.8C12.525 21.8333 12.425 21.8583 12.325 21.875C12.225 21.8917 12.1167 21.9 12 21.9ZM12 19.9C13.7333 19.35 15.1667 18.25 16.3 16.6C17.4333 14.95 18 13.1167 18 11.1V6.375L12 4.125L6 6.375V11.1C6 13.1167 6.56667 14.95 7.7 16.6C8.83333 18.25 10.2667 19.35 12 19.9Z" fill="#141E12"/>
+</svg>
--- a/packages/ui/src/Atoms/Icons/Frame-2.svg
+++ b/packages/ui/src/Atoms/Icons/Frame-2.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.95 12.7L9.55 11.3C9.35 11.1 9.11667 11 8.85 11C8.58333 11 8.35 11.1 8.15 11.3C7.95 11.5 7.85 11.7375 7.85 12.0125C7.85 12.2875 7.95 12.525 8.15 12.725L10.25 14.85C10.45 15.05 10.6833 15.15 10.95 15.15C11.2167 15.15 11.45 15.05 11.65 14.85L15.9 10.6C16.1 10.4 16.2 10.1625 16.2 9.8875C16.2 9.6125 16.1 9.375 15.9 9.175C15.7 8.975 15.4625 8.875 15.1875 8.875C14.9125 8.875 14.675 8.975 14.475 9.175L10.95 12.7ZM12 21.9C11.8833 21.9 11.775 21.8917 11.675 21.875C11.575 21.8583 11.475 21.8333 11.375 21.8C9.125 21.05 7.33333 19.6625 6 17.6375C4.66667 15.6125 4 13.4333 4 11.1V6.375C4 5.95833 4.12083 5.58333 4.3625 5.25C4.60417 4.91667 4.91667 4.675 5.3 4.525L11.3 2.275C11.5333 2.19167 11.7667 2.15 12 2.15C12.2333 2.15 12.4667 2.19167 12.7 2.275L18.7 4.525C19.0833 4.675 19.3958 4.91667 19.6375 5.25C19.8792 5.58333 20 5.95833 20 6.375V11.1C20 13.4333 19.3333 15.6125 18 17.6375C16.6667 19.6625 14.875 21.05 12.625 21.8C12.525 21.8333 12.425 21.8583 12.325 21.875C12.225 21.8917 12.1167 21.9 12 21.9ZM12 19.9C13.7333 19.35 15.1667 18.25 16.3 16.6C17.4333 14.95 18 13.1167 18 11.1V6.375L12 4.125L6 6.375V11.1C6 13.1167 6.56667 14.95 7.7 16.6C8.83333 18.25 10.2667 19.35 12 19.9Z" fill="#141E12"/>
+</svg>
--- a/packages/ui/src/Atoms/Icons/Frame.svg
+++ b/packages/ui/src/Atoms/Icons/Frame.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 13.4L13.4 14.8C13.5833 14.9833 13.8167 15.075 14.1 15.075C14.3833 15.075 14.6167 14.9833 14.8 14.8C14.9833 14.6167 15.075 14.3833 15.075 14.1C15.075 13.8167 14.9833 13.5833 14.8 13.4L13.4 12L14.8 10.6C14.9833 10.4167 15.075 10.1833 15.075 9.9C15.075 9.61667 14.9833 9.38334 14.8 9.2C14.6167 9.01667 14.3833 8.925 14.1 8.925C13.8167 8.925 13.5833 9.01667 13.4 9.2L12 10.6L10.6 9.2C10.4167 9.01667 10.1833 8.925 9.9 8.925C9.61667 8.925 9.38333 9.01667 9.2 9.2C9.01667 9.38334 8.925 9.61667 8.925 9.9C8.925 10.1833 9.01667 10.4167 9.2 10.6L10.6 12L9.2 13.4C9.01667 13.5833 8.925 13.8167 8.925 14.1C8.925 14.3833 9.01667 14.6167 9.2 14.8C9.38333 14.9833 9.61667 15.075 9.9 15.075C10.1833 15.075 10.4167 14.9833 10.6 14.8L12 13.4ZM12 21.9C11.8833 21.9 11.775 21.8917 11.675 21.875C11.575 21.8583 11.475 21.8333 11.375 21.8C9.125 21.05 7.33333 19.6625 6 17.6375C4.66667 15.6125 4 13.4333 4 11.1V6.375C4 5.95833 4.12083 5.58333 4.3625 5.25C4.60417 4.91667 4.91667 4.675 5.3 4.525L11.3 2.275C11.5333 2.19167 11.7667 2.15 12 2.15C12.2333 2.15 12.4667 2.19167 12.7 2.275L18.7 4.525C19.0833 4.675 19.3958 4.91667 19.6375 5.25C19.8792 5.58333 20 5.95833 20 6.375V11.1C20 13.4333 19.3333 15.6125 18 17.6375C16.6667 19.6625 14.875 21.05 12.625 21.8C12.525 21.8333 12.425 21.8583 12.325 21.875C12.225 21.8917 12.1167 21.9 12 21.9ZM12 19.9C13.7333 19.35 15.1667 18.25 16.3 16.6C17.4333 14.95 18 13.1167 18 11.1V6.375L12 4.125L6 6.375V11.1C6 13.1167 6.56667 14.95 7.7 16.6C8.83333 18.25 10.2667 19.35 12 19.9Z" fill="#141E12"/>
+</svg>
--- a/packages/ui/src/Atoms/Icons/IconArrowBoxLeft.tsx
+++ b/packages/ui/src/Atoms/Icons/IconArrowBoxLeft.tsx
@@ -0,0 +1,8 @@
+import type {IconProps} from "./type.ts";
+
+export function IconArrowBoxLeft({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M7 5C5.89543 5 5 5.89543 5 7V17C5 18.1046 5.89543 19 7 19H11.25C11.8023 19 12.25 19.4477 12.25 20C12.25 20.5523 11.8023 21 11.25 21H7C4.79086 21 3 19.2091 3 17V7C3 4.79086 4.79086 3 7 3H11.25C11.8023 3 12.25 3.44772 12.25 4C12.25 4.55228 11.8023 5 11.25 5H7ZM14.7929 6.79289C15.1834 6.40237 15.8166 6.40237 16.2071 6.79289L20.7071 11.2929C21.0976 11.6834 21.0976 12.3166 20.7071 12.7071L16.2071 17.2071C15.8166 17.5976 15.1834 17.5976 14.7929 17.2071C14.4024 16.8166 14.4024 16.1834 14.7929 15.7929L17.5858 13H8.75C8.19772 13 7.75 12.5523 7.75 12C7.75 11.4477 8.19772 11 8.75 11H17.5858L14.7929 8.20711C14.4024 7.81658 14.4024 7.18342 14.7929 6.79289Z" fill="currentColor"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconArrowCornerDownLeft.tsx
+++ b/packages/ui/src/Atoms/Icons/IconArrowCornerDownLeft.tsx
@@ -0,0 +1,8 @@
+import type {IconProps} from "./type.ts";
+
+export function IconArrowCornerDownLeft({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path d="M7.29297 10.293C7.68349 9.90244 8.31651 9.90244 8.70703 10.293C9.09756 10.6835 9.09756 11.3165 8.70703 11.707L6.41406 14H17C18.1046 14 19 13.1046 19 12V5C19 4.44772 19.4477 4 20 4C20.5523 4 21 4.44772 21 5V12C21 14.2092 19.2092 16 17 16H6.41406L8.70703 18.293L8.77539 18.3691C9.09574 18.7619 9.07315 19.3409 8.70703 19.707C8.34092 20.0731 7.76192 20.0957 7.36914 19.7754L7.29297 19.707L3.29297 15.707C2.90245 15.3165 2.90245 14.6835 3.29297 14.293L7.29297 10.293Z" fill="currentColor"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconArrowDown.tsx
+++ b/packages/ui/src/Atoms/Icons/IconArrowDown.tsx
@@ -0,0 +1,8 @@
+import type {IconProps} from "./type.ts";
+
+export function IconArrowDown({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M12 21C11.6022 21 11.2207 20.842 10.9394 20.5607L5.43934 15.0607C4.85355 14.4749 4.85355 13.5251 5.43934 12.9393C6.02512 12.3536 6.97487 12.3536 7.56066 12.9393L10.5 15.8787V4.5C10.5 3.67157 11.1716 3 12 3C12.8284 3 13.5 3.67157 13.5 4.5V15.8787L16.4393 12.9393C17.0251 12.3536 17.9749 12.3536 18.5607 12.9393C19.1464 13.5251 19.1464 14.4749 18.5607 15.0607L13.0607 20.5607C12.7794 20.842 12.3978 21 12 21Z" fill="currentColor"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconArrowInbox.tsx
+++ b/packages/ui/src/Atoms/Icons/IconArrowInbox.tsx
@@ -0,0 +1,8 @@
+import type {IconProps} from "./type.ts";
+
+export function IconArrowInbox({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M12 3C12.5523 3 13 3.44772 13 4V12.0858L14.7929 10.2929C15.1834 9.90237 15.8166 9.90237 16.2071 10.2929C16.5976 10.6834 16.5976 11.3166 16.2071 11.7071L12.7071 15.2071C12.3166 15.5976 11.6834 15.5976 11.2929 15.2071L7.79289 11.7071C7.40237 11.3166 7.40237 10.6834 7.79289 10.2929C8.18342 9.90237 8.81658 9.90237 9.20711 10.2929L11 12.0858V4C11 3.44772 11.4477 3 12 3ZM4 14C4.55228 14 5 14.4477 5 15V17C5 18.1046 5.89542 19 7 19H17C18.1046 19 19 18.1046 19 17V15C19 14.4477 19.4477 14 20 14C20.5523 14 21 14.4477 21 15V17C21 19.2092 19.2092 21 17 21H7C4.79088 21 3 19.2092 3 17V15C3 14.4477 3.44772 14 4 14Z" fill="currentColor"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconArrowInbox1.tsx
+++ b/packages/ui/src/Atoms/Icons/IconArrowInbox1.tsx
@@ -0,0 +1,8 @@
+import type {IconProps} from "./type.ts";
+
+export function IconArrowInbox1({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path d="M20 15V17C20 18.6569 18.6569 20 17 20H7C5.34315 20 4 18.6569 4 17V15M12 14.5V4M12 14.5L8.5 11M12 14.5L15.5 11" stroke="#141E12" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconArrowLink.tsx
+++ b/packages/ui/src/Atoms/Icons/IconArrowLink.tsx
@@ -0,0 +1,9 @@
+import type {IconProps} from "./type.ts";
+
+export function IconArrowLink({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M20.5607 3.43934C21.1464 4.02513 21.1464 4.97487 20.5607 5.56066L5.56066 20.5607C4.97487 21.1464 4.02513 21.1464 3.43934 20.5607C2.85355 19.9749 2.85355 19.0251 3.43934 18.4393L18.4393 3.43934C19.0251 2.85355 19.9749 2.85355 20.5607 3.43934Z" fill="currentColor"/>
+<path fillRule="evenodd" clipRule="evenodd" d="M3 4.5C3 3.67157 3.67157 3 4.5 3H19.5C20.3284 3 21 3.67157 21 4.5V19.5C21 20.3284 20.3284 21 19.5 21C18.6716 21 18 20.3284 18 19.5V6H4.5C3.67157 6 3 5.32843 3 4.5Z" fill="currentColor"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconArrowUp.tsx
+++ b/packages/ui/src/Atoms/Icons/IconArrowUp.tsx
@@ -0,0 +1,8 @@
+import type {IconProps} from "./type.ts";
+
+export function IconArrowUp({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M12 3C12.3978 3 12.7793 3.15803 13.0606 3.43934L18.5607 8.93934C19.1464 9.52512 19.1464 10.4749 18.5607 11.0607C17.9749 11.6464 17.0251 11.6464 16.4393 11.0607L13.5 8.12131V19.5C13.5 20.3284 12.8284 21 12 21C11.1716 21 10.5 20.3284 10.5 19.5V8.12133L7.56066 11.0607C6.97488 11.6464 6.02513 11.6464 5.43934 11.0607C4.85355 10.4749 4.85355 9.52513 5.43934 8.93934L10.9393 3.43934C11.2206 3.15804 11.6022 3 12 3Z" fill="currentColor"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconBank.tsx
+++ b/packages/ui/src/Atoms/Icons/IconBank.tsx
@@ -0,0 +1,8 @@
+import type {IconProps} from "./type.ts";
+
+export function IconBank({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path d="M20 7.76416C20 7.69721 19.9716 7.63436 19.9238 7.59034L19.8691 7.55225L12.8945 4.06495C12.402 3.81864 11.833 3.78845 11.3213 3.97315L11.1055 4.06495L4.13086 7.55225C4.05089 7.59223 4 7.67474 4 7.76416C4.00017 7.89438 4.10605 7.99952 4.23633 7.99952H19.7637C19.894 7.99952 19.9998 7.89437 20 7.76416ZM5.92676 17.9995C5.25877 17.9995 4.66023 18.3967 4.39551 18.9995H19.6045C19.3577 18.4374 18.8211 18.0545 18.208 18.0054L18.0732 17.9995H5.92676ZM16 15.9995H18V9.99952H16V15.9995ZM10 15.9995H14V9.99952H10V15.9995ZM6 15.9995H8V9.99952H6V15.9995ZM22 7.76416C21.9998 8.91921 21.1238 9.86885 20 9.98682V16.5454C20.717 16.9873 21.2783 17.6731 21.5576 18.5112L21.6191 18.7407C21.8507 19.8885 20.9737 20.9995 19.7637 20.9995H4.23633C2.9458 20.9995 2.03423 19.7356 2.44238 18.5112L2.5459 18.2358C2.84866 17.5227 3.36314 16.9379 4 16.5454V9.98682C2.87617 9.86886 2.00016 8.91921 2 7.76416C2 6.91721 2.47878 6.14294 3.23633 5.76416L10.2109 2.27588L10.4248 2.17725C11.5023 1.71547 12.7335 1.74804 13.7891 2.27588L20.7637 5.76416L20.9023 5.83936C21.5793 6.23961 22 6.97007 22 7.76416Z" fill="currentColor"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconBell2.tsx
+++ b/packages/ui/src/Atoms/Icons/IconBell2.tsx
@@ -0,0 +1,8 @@
+import type {IconProps} from "./type.ts";
+
+export function IconBell2({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M12 4C9.17177 4 6.84036 6.21776 6.69912 9.04245L6.53019 12.4211C6.53019 12.4211 6.53019 12.4211 6.53019 12.4211C6.50255 12.9741 6.36043 13.5151 6.11292 14.0103L6.11289 14.0103L5.11804 16H18.882L17.8871 14.0103L17.887 14.0101C17.6396 13.5151 17.4975 12.9742 17.4698 12.4212C17.4698 12.4211 17.4698 12.4211 17.4698 12.4211L17.3008 9.04247L17.3008 9.04243C17.1597 6.21776 14.8282 4 12 4ZM19.0203 16.2767C19.0203 16.2766 19.0202 16.2765 19.0202 16.2764L19.0203 16.2767ZM4.97984 16.2764L4.9799 16.2763L4.97984 16.2764ZM4.70162 8.94257C4.89608 5.05346 8.10603 2 12 2C15.894 2 19.1039 5.05344 19.2984 8.94255C19.2984 8.94256 19.2984 8.94257 19.2984 8.94259L19.4674 12.3212L19.4674 12.3213C19.4811 12.5976 19.5522 12.8681 19.6759 13.1159C19.676 13.1159 19.676 13.116 19.676 13.1161L20.8089 15.3817C20.9348 15.6333 21 15.9104 21 16.191C21 17.1901 20.1901 18 19.191 18H16.9C16.4367 20.2822 14.4189 22 12 22C9.58104 22 7.56329 20.2822 7.10002 18H4.80902C3.80995 18 3 17.1901 3 16.191C3 15.9103 3.06533 15.6332 3.19098 15.382C3.191 15.3819 3.19103 15.3819 3.19105 15.3819L4.324 13.1159C4.44782 12.8683 4.51887 12.5977 4.53269 12.3213L4.53269 12.3213L4.70162 8.94257L5.70037 8.99251L4.70162 8.94257ZM9.17071 18C9.58255 19.1652 10.6938 20 12 20C13.3062 20 14.4174 19.1652 14.8293 18H9.17071Z" fill="currentColor"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconBlock.tsx
+++ b/packages/ui/src/Atoms/Icons/IconBlock.tsx
@@ -0,0 +1,8 @@
+import type {IconProps} from "./type.ts";
+
+export function IconBlock({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M8 5C6.89543 5 6 5.89543 6 7V19H18V7C18 5.89542 17.1046 5 16 5H8ZM20 19V7C20 4.79088 18.2092 3 16 3H8C5.79087 3 4 4.79087 4 7V19H3C2.44772 19 2 19.4477 2 20C2 20.5523 2.44772 21 3 21H21C21.5523 21 22 20.5523 22 20C22 19.4477 21.5523 19 21 19H20ZM8 8C8 7.44772 8.44772 7 9 7H10C10.5523 7 11 7.44772 11 8C11 8.55228 10.5523 9 10 9H9C8.44772 9 8 8.55228 8 8ZM13 8C13 7.44772 13.4477 7 14 7H15C15.5523 7 16 7.44772 16 8C16 8.55228 15.5523 9 15 9H14C13.4477 9 13 8.55228 13 8ZM8 12C8 11.4477 8.44772 11 9 11H10C10.5523 11 11 11.4477 11 12C11 12.5523 10.5523 13 10 13H9C8.44772 13 8 12.5523 8 12ZM13 12C13 11.4477 13.4477 11 14 11H15C15.5523 11 16 11.4477 16 12C16 12.5523 15.5523 13 15 13H14C13.4477 13 13 12.5523 13 12ZM8 16C8 15.4477 8.44772 15 9 15H10C10.5523 15 11 15.4477 11 16C11 16.5523 10.5523 17 10 17H9C8.44772 17 8 16.5523 8 16ZM13 16C13 15.4477 13.4477 15 14 15H15C15.5523 15 16 15.4477 16 16C16 16.5523 15.5523 17 15 17H14C13.4477 17 13 16.5523 13 16Z" fill="currentColor"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconBlock1.tsx
+++ b/packages/ui/src/Atoms/Icons/IconBlock1.tsx
@@ -0,0 +1,8 @@
+import type {IconProps} from "./type.ts";
+
+export function IconBlock1({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M21 19H20V7C20 4.79086 18.2091 3 16 3H8C5.79086 3 4 4.79086 4 7V19H3C2.44772 19 2 19.4477 2 20C2 20.5523 2.44772 21 3 21H21C21.5523 21 22 20.5523 22 20C22 19.4477 21.5523 19 21 19ZM9 7C8.44772 7 8 7.44772 8 8C8 8.55228 8.44772 9 9 9H10C10.5523 9 11 8.55228 11 8C11 7.44772 10.5523 7 10 7H9ZM14 7C13.4477 7 13 7.44772 13 8C13 8.55228 13.4477 9 14 9H15C15.5523 9 16 8.55228 16 8C16 7.44772 15.5523 7 15 7H14ZM9 11C8.44772 11 8 11.4477 8 12C8 12.5523 8.44772 13 9 13H10C10.5523 13 11 12.5523 11 12C11 11.4477 10.5523 11 10 11H9ZM14 11C13.4477 11 13 11.4477 13 12C13 12.5523 13.4477 13 14 13H15C15.5523 13 16 12.5523 16 12C16 11.4477 15.5523 11 15 11H14ZM9 15C8.44772 15 8 15.4477 8 16C8 16.5523 8.44772 17 9 17H10C10.5523 17 11 16.5523 11 16C11 15.4477 10.5523 15 10 15H9ZM14 15C13.4477 15 13 15.4477 13 16C13 16.5523 13.4477 17 14 17H15C15.5523 17 16 16.5523 16 16C16 15.4477 15.5523 15 15 15H14Z" fill="currentColor"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconBook.tsx
+++ b/packages/ui/src/Atoms/Icons/IconBook.tsx
@@ -0,0 +1,8 @@
+import type {IconProps} from "./type.ts";
+
+export function IconBook({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path d="M6.5 16C7.28333 16 8.04583 16.0875 8.7875 16.2625C9.52917 16.4375 10.2667 16.7 11 17.05V7.2C10.3167 6.8 9.59167 6.5 8.825 6.3C8.05833 6.1 7.28333 6 6.5 6C5.9 6 5.30417 6.05833 4.7125 6.175C4.12083 6.29167 3.55 6.46667 3 6.7V16.6C3.58333 16.4 4.1625 16.25 4.7375 16.15C5.3125 16.05 5.9 16 6.5 16ZM13 17.05C13.7333 16.7 14.4708 16.4375 15.2125 16.2625C15.9542 16.0875 16.7167 16 17.5 16C18.1 16 18.6875 16.05 19.2625 16.15C19.8375 16.25 20.4167 16.4 21 16.6V6.7C20.45 6.46667 19.8792 6.29167 19.2875 6.175C18.6958 6.05833 18.1 6 17.5 6C16.7167 6 15.9417 6.1 15.175 6.3C14.4083 6.5 13.6833 6.8 13 7.2V17.05ZM12 19.475C11.7667 19.475 11.5458 19.4458 11.3375 19.3875C11.1292 19.3292 10.9333 19.25 10.75 19.15C10.1 18.7667 9.41667 18.4792 8.7 18.2875C7.98333 18.0958 7.25 18 6.5 18C5.8 18 5.1125 18.0917 4.4375 18.275C3.7625 18.4583 3.11667 18.7167 2.5 19.05C2.15 19.2333 1.8125 19.225 1.4875 19.025C1.1625 18.825 1 18.5333 1 18.15V6.1C1 5.91667 1.04583 5.74167 1.1375 5.575C1.22917 5.40833 1.36667 5.28333 1.55 5.2C2.31667 4.8 3.11667 4.5 3.95 4.3C4.78333 4.1 5.63333 4 6.5 4C7.46667 4 8.4125 4.125 9.3375 4.375C10.2625 4.625 11.15 5 12 5.5C12.85 5 13.7375 4.625 14.6625 4.375C15.5875 4.125 16.5333 4 17.5 4C18.3667 4 19.2167 4.1 20.05 4.3C20.8833 4.5 21.6833 4.8 22.45 5.2C22.6333 5.28333 22.7708 5.40833 22.8625 5.575C22.9542 5.74167 23 5.91667 23 6.1V18.15C23 18.5333 22.8375 18.825 22.5125 19.025C22.1875 19.225 21.85 19.2333 21.5 19.05C20.8833 18.7167 20.2375 18.4583 19.5625 18.275C18.8875 18.0917 18.2 18 17.5 18C16.75 18 16.0167 18.0958 15.3 18.2875C14.5833 18.4792 13.9 18.7667 13.25 19.15C13.0667 19.25 12.8708 19.3292 12.6625 19.3875C12.4542 19.4458 12.2333 19.475 12 19.475ZM14 8.775C14 8.625 14.0542 8.47083 14.1625 8.3125C14.2708 8.15417 14.3917 8.05 14.525 8C15.0083 7.83333 15.4917 7.70833 15.975 7.625C16.4583 7.54167 16.9667 7.5 17.5 7.5C17.8333 7.5 18.1625 7.52083 18.4875 7.5625C18.8125 7.60417 19.1333 7.65833 19.45 7.725C19.6 7.75833 19.7292 7.84167 19.8375 7.975C19.9458 8.10833 20 8.25833 20 8.425C20 8.70833 19.9083 8.91667 19.725 9.05C19.5417 9.18333 19.3083 9.21667 19.025 9.15C18.7917 9.1 18.5458 9.0625 18.2875 9.0375C18.0292 9.0125 17.7667 9 17.5 9C17.0667 9 16.6417 9.04167 16.225 9.125C15.8083 9.20833 15.4083 9.31667 15.025 9.45C14.725 9.56667 14.4792 9.55833 14.2875 9.425C14.0958 9.29167 14 9.075 14 8.775ZM14 14.275C14 14.125 14.0542 13.9708 14.1625 13.8125C14.2708 13.6542 14.3917 13.55 14.525 13.5C15.0083 13.3333 15.4917 13.2083 15.975 13.125C16.4583 13.0417 16.9667 13 17.5 13C17.8333 13 18.1625 13.0208 18.4875 13.0625C18.8125 13.1042 19.1333 13.1583 19.45 13.225C19.6 13.2583 19.7292 13.3417 19.8375 13.475C19.9458 13.6083 20 13.7583 20 13.925C20 14.2083 19.9083 14.4167 19.725 14.55C19.5417 14.6833 19.3083 14.7167 19.025 14.65C18.7917 14.6 18.5458 14.5625 18.2875 14.5375C18.0292 14.5125 17.7667 14.5 17.5 14.5C17.0667 14.5 16.6417 14.5375 16.225 14.6125C15.8083 14.6875 15.4083 14.7917 15.025 14.925C14.725 15.0417 14.4792 15.0375 14.2875 14.9125C14.0958 14.7875 14 14.575 14 14.275ZM14 11.525C14 11.375 14.0542 11.2208 14.1625 11.0625C14.2708 10.9042 14.3917 10.8 14.525 10.75C15.0083 10.5833 15.4917 10.4583 15.975 10.375C16.4583 10.2917 16.9667 10.25 17.5 10.25C17.8333 10.25 18.1625 10.2708 18.4875 10.3125C18.8125 10.3542 19.1333 10.4083 19.45 10.475C19.6 10.5083 19.7292 10.5917 19.8375 10.725C19.9458 10.8583 20 11.0083 20 11.175C20 11.4583 19.9083 11.6667 19.725 11.8C19.5417 11.9333 19.3083 11.9667 19.025 11.9C18.7917 11.85 18.5458 11.8125 18.2875 11.7875C18.0292 11.7625 17.7667 11.75 17.5 11.75C17.0667 11.75 16.6417 11.7917 16.225 11.875C15.8083 11.9583 15.4083 12.0667 15.025 12.2C14.725 12.3167 14.4792 12.3083 14.2875 12.175C14.0958 12.0417 14 11.825 14 11.525Z" fill="currentColor"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconCalendar1.tsx
+++ b/packages/ui/src/Atoms/Icons/IconCalendar1.tsx
@@ -0,0 +1,9 @@
+import type {IconProps} from "./type.ts";
+
+export function IconCalendar1({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path d="M8 2C8.55228 2 9 2.44772 9 3V4H15V3C15 2.44772 15.4477 2 16 2C16.5523 2 17 2.44772 17 3V4C19.2091 4 21 5.79086 21 8V9H3V8C3 5.79086 4.79086 4 7 4V3C7 2.44772 7.44772 2 8 2Z" fill="currentColor"/>
+<path d="M3 11V17C3 19.2091 4.79086 21 7 21H17C19.2091 21 21 19.2091 21 17V11H3Z" fill="currentColor"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconCalendar2.tsx
+++ b/packages/ui/src/Atoms/Icons/IconCalendar2.tsx
@@ -0,0 +1,8 @@
+import type {IconProps} from "./type.ts";
+
+export function IconCalendar2({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M8 2C8.55228 2 9 2.44772 9 3V4H15V3C15 2.44772 15.4477 2 16 2C16.5523 2 17 2.44772 17 3V4C19.2092 4 21 5.79088 21 8V17C21 19.2092 19.2092 21 17 21H7C4.79088 21 3 19.2092 3 17V8C3 5.79087 4.79087 4 7 4V3C7 2.44772 7.44772 2 8 2ZM7 6C5.89543 6 5 6.89543 5 8V9H19V8C19 6.89542 18.1046 6 17 6H7ZM19 11H5V17C5 18.1046 5.89542 19 7 19H17C18.1046 19 19 18.1046 19 17V11Z" fill="currentColor"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconCheckmark1.tsx
+++ b/packages/ui/src/Atoms/Icons/IconCheckmark1.tsx
@@ -0,0 +1,8 @@
+import type {IconProps} from "./type.ts";
+
+export function IconCheckmark1({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M19.3209 4.24472C20.0143 4.69807 20.2088 5.62768 19.7555 6.32105L11.2555 19.321C10.9972 19.7161 10.5681 19.9665 10.0971 19.997C9.62616 20.0276 9.16828 19.8347 8.86114 19.4764L4.36114 14.2264C3.82201 13.5974 3.89485 12.6504 4.52384 12.1113C5.15283 11.5722 6.09978 11.645 6.63891 12.274L9.83828 16.0066L17.2446 4.6793C17.6979 3.98593 18.6275 3.79136 19.3209 4.24472Z" fill="currentColor"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconCheckmark2Small.tsx
+++ b/packages/ui/src/Atoms/Icons/IconCheckmark2Small.tsx
@@ -0,0 +1,8 @@
+import type {IconProps} from "./type.ts";
+
+export function IconCheckmark2Small({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M17.6585 7.24744C18.0741 7.61112 18.1163 8.24288 17.7526 8.65852L10.7526 16.6585C10.5703 16.8668 10.3099 16.9902 10.0333 16.9995C9.75666 17.0087 9.4886 16.9028 9.29289 16.7071L6.29289 13.7071C5.90237 13.3166 5.90237 12.6834 6.29289 12.2929C6.68342 11.9024 7.31658 11.9024 7.70711 12.2929L9.95129 14.5371L16.2474 7.34151C16.6111 6.92587 17.2429 6.88375 17.6585 7.24744Z" fill="currentColor"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconChevronDown.tsx
+++ b/packages/ui/src/Atoms/Icons/IconChevronDown.tsx
@@ -0,0 +1,8 @@
+import type {IconProps} from "./type.ts";
+
+export function IconChevronDown({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M3.35147 8.15147C3.8201 7.68284 4.5799 7.68284 5.04853 8.15147L12 15.1029L18.9515 8.15147C19.4201 7.68284 20.1799 7.68284 20.6485 8.15147C21.1172 8.6201 21.1172 9.3799 20.6485 9.84853L12.8485 17.6485C12.3799 18.1172 11.6201 18.1172 11.1515 17.6485L3.35147 9.84853C2.88284 9.3799 2.88284 8.6201 3.35147 8.15147Z" fill="currentColor"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconChevronGrabberVertical.tsx
+++ b/packages/ui/src/Atoms/Icons/IconChevronGrabberVertical.tsx
@@ -0,0 +1,8 @@
+import type {IconProps} from "./type.ts";
+
+export function IconChevronGrabberVertical({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M11.8232 6.59108L8.70711 9.70717C8.31659 10.0977 7.68342 10.0977 7.2929 9.70717C6.90237 9.31665 6.90237 8.68348 7.29289 8.29296L10.409 5.17684C11.2877 4.29819 12.7123 4.29816 13.591 5.17681L16.7071 8.29296C17.0976 8.68348 17.0976 9.31665 16.7071 9.70717C16.3166 10.0977 15.6834 10.0977 15.2929 9.70717L12.1768 6.59108C12.0791 6.49344 11.9209 6.49345 11.8232 6.59108ZM7.29289 14.293C7.68342 13.9025 8.31658 13.9025 8.70711 14.293L11.8231 17.409C11.9208 17.5066 12.0791 17.5067 12.1768 17.4091L15.2929 14.293C15.6834 13.9025 16.3166 13.9025 16.7071 14.293C17.0976 14.6835 17.0976 15.3167 16.7071 15.7072L13.591 18.8233C12.7123 19.7018 11.2878 19.7019 10.4091 18.8234L7.29289 15.7072C6.90237 15.3167 6.90237 14.6835 7.29289 14.293Z" fill="currentColor"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconChevronLeft.tsx
+++ b/packages/ui/src/Atoms/Icons/IconChevronLeft.tsx
@@ -0,0 +1,8 @@
+import type {IconProps} from "./type.ts";
+
+export function IconChevronLeft({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M15.8485 3.35147C16.3172 3.8201 16.3172 4.5799 15.8485 5.04853L8.89706 12L15.8485 18.9515C16.3172 19.4201 16.3172 20.1799 15.8485 20.6485C15.3799 21.1172 14.6201 21.1172 14.1515 20.6485L6.35147 12.8485C5.88284 12.3799 5.88284 11.6201 6.35147 11.1515L14.1515 3.35147C14.6201 2.88284 15.3799 2.88284 15.8485 3.35147Z" fill="currentColor"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconChevronRight.tsx
+++ b/packages/ui/src/Atoms/Icons/IconChevronRight.tsx
@@ -0,0 +1,8 @@
+import type {IconProps} from "./type.ts";
+
+export function IconChevronRight({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M8.15147 3.35147C8.6201 2.88284 9.37989 2.88284 9.84852 3.35147L17.6485 11.1515C18.1172 11.6201 18.1172 12.3799 17.6485 12.8485L9.84852 20.6485C9.37989 21.1172 8.6201 21.1172 8.15147 20.6485C7.68284 20.1799 7.68284 19.4201 8.15147 18.9515L15.1029 12L8.15147 5.04853C7.68284 4.5799 7.68284 3.8201 8.15147 3.35147Z" fill="currentColor"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconChevronTriangleDownSmall.tsx
+++ b/packages/ui/src/Atoms/Icons/IconChevronTriangleDownSmall.tsx
@@ -0,0 +1,8 @@
+import type {IconProps} from "./type.ts";
+
+export function IconChevronTriangleDownSmall({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path d="M9.52231 9.75C8.27409 9.75 7.57194 11.1856 8.33828 12.1709L10.816 15.3565C11.4165 16.1286 12.5835 16.1286 13.184 15.3565L15.6617 12.1709C16.428 11.1856 15.7259 9.75 14.4777 9.75H9.52231Z" fill="currentColor"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconChevronUp.tsx
+++ b/packages/ui/src/Atoms/Icons/IconChevronUp.tsx
@@ -0,0 +1,8 @@
+import type {IconProps} from "./type.ts";
+
+export function IconChevronUp({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M11.1515 6.35147C11.6201 5.88284 12.3799 5.88284 12.8485 6.35147L20.6485 14.1515C21.1172 14.6201 21.1172 15.3799 20.6485 15.8485C20.1799 16.3172 19.4201 16.3172 18.9515 15.8485L12 8.89706L5.04853 15.8485C4.5799 16.3172 3.8201 16.3172 3.35147 15.8485C2.88284 15.3799 2.88284 14.6201 3.35147 14.1515L11.1515 6.35147Z" fill="currentColor"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconCircleCheck.tsx
+++ b/packages/ui/src/Atoms/Icons/IconCircleCheck.tsx
@@ -0,0 +1,9 @@
+import type {IconProps} from "./type.ts";
+
+export function IconCircleCheck({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<rect x="6" y="6" width="12" height="12" fill="currentColor"/>
+<path fillRule="evenodd" clipRule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM15.774 10.1333C16.1237 9.70582 16.0607 9.0758 15.6332 8.72607C15.2058 8.37635 14.5758 8.43935 14.226 8.86679L10.4258 13.5116L9.20711 12.2929C8.81658 11.9024 8.18342 11.9024 7.79289 12.2929C7.40237 12.6834 7.40237 13.3166 7.79289 13.7071L9.79289 15.7071C9.99267 15.9069 10.2676 16.0129 10.5498 15.9988C10.832 15.9847 11.095 15.8519 11.274 15.6333L15.774 10.1333Z" fill="currentColor"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconCircleCheck1.tsx
+++ b/packages/ui/src/Atoms/Icons/IconCircleCheck1.tsx
@@ -0,0 +1,9 @@
+import type {IconProps} from "./type.ts";
+
+export function IconCircleCheck1({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path d="M20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12ZM22 12C22 17.5229 17.5229 22 12 22C6.47716 22 2 17.5229 2 12C2 6.47716 6.47716 2 12 2C17.5229 2 22 6.47716 22 12Z" fill="currentColor"/>
+<path d="M14.2256 8.86719C14.5752 8.4399 15.2054 8.3763 15.6328 8.72559C16.0601 9.07518 16.1237 9.70538 15.7744 10.1328L11.2744 15.6328C11.0955 15.8515 10.832 15.985 10.5498 15.999C10.3028 16.0113 10.0614 15.9314 9.87109 15.7773L9.79297 15.707L7.79297 13.707L7.72461 13.6309C7.40426 13.2381 7.42685 12.6591 7.79297 12.293C8.15908 11.9269 8.73809 11.9043 9.13086 12.2246L9.20703 12.293L10.4248 13.5107L14.2256 8.86719Z" fill="currentColor"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconCircleInfo.tsx
+++ b/packages/ui/src/Atoms/Icons/IconCircleInfo.tsx
@@ -0,0 +1,8 @@
+import type {IconProps} from "./type.ts";
+
+export function IconCircleInfo({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM10 11C10 10.4477 10.4477 10 11 10H12C12.5523 10 13 10.4477 13 11V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C10.4477 12 10 11.5523 10 11ZM12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9C12.5523 9 13 8.55228 13 8C13 7.44772 12.5523 7 12 7Z" fill="currentColor"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconCircleProgress.tsx
+++ b/packages/ui/src/Atoms/Icons/IconCircleProgress.tsx
@@ -0,0 +1,8 @@
+import type {IconProps} from "./type.ts";
+
+export function IconCircleProgress({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path d="M10.2686 20.7061C10.6885 20.7891 11.1193 20.8427 11.5586 20.8643L12 20.875C12.5791 20.875 13.1455 20.8177 13.6934 20.7119L13.6943 20.7129L13.7578 20.7031C13.826 20.6987 13.8906 20.7327 13.9268 20.7891L13.9531 20.8535C13.9727 20.9524 13.9096 21.0482 13.8115 21.0713L13.3535 21.1523C12.9126 21.217 12.4603 21.25 12 21.25L11.54 21.2383C11.2349 21.2233 10.9335 21.1942 10.6367 21.1504L10.1953 21.0742C10.1187 21.059 10.0627 20.9991 10.0479 20.9277L10.0469 20.8535C10.0645 20.7649 10.1431 20.7027 10.2305 20.7021L10.2686 20.7061ZM5.06348 17.5361C5.54244 18.1352 6.09709 18.6714 6.71289 19.1289L6.72656 19.1387L7.03809 19.3594H7.03906L7.08594 19.3936C7.13994 19.4388 7.16311 19.5104 7.14844 19.5771L7.12109 19.6406C7.06844 19.7193 6.96543 19.745 6.88281 19.7041L6.84863 19.6836L6.47559 19.4189C5.83054 18.9378 5.25075 18.3745 4.75098 17.7451L5.06348 17.5361ZM19.6074 16.8623L19.6406 16.8799C19.7052 16.9232 19.7346 16.9996 19.7207 17.0713L19.6924 17.1396C19.1565 17.94 18.4968 18.6497 17.7441 19.2471L17.5352 18.9346C18.1339 18.456 18.6714 17.9039 19.1289 17.2881L19.3799 16.9316H19.3809C19.4311 16.8566 19.5264 16.8291 19.6074 16.8623ZM12 7.125C14.6924 7.125 16.8749 9.30763 16.875 12C16.875 14.6924 14.6924 16.875 12 16.875C9.30763 16.8749 7.125 14.6924 7.125 12C7.12508 9.30768 9.30768 7.12508 12 7.125ZM3.14648 10.0469C3.23507 10.0645 3.29728 10.1429 3.29785 10.2305L3.29395 10.2686C3.18327 10.8282 3.12503 11.4073 3.125 12L3.13086 12.332C3.14306 12.6626 3.17342 12.9885 3.2207 13.3086L3.22266 13.3174L3.22363 13.3262L3.28711 13.6934V13.6943L3.2959 13.7578C3.30033 13.8262 3.26726 13.8907 3.21094 13.9268L3.14648 13.9531C3.05242 13.9717 2.96029 13.9159 2.93164 13.8281L2.9248 13.7998L2.84863 13.3574C2.78348 12.9144 2.75001 12.4608 2.75 12L2.76172 11.54C2.7767 11.2349 2.80575 10.9335 2.84961 10.6367L2.92578 10.1953C2.94092 10.1189 3.00077 10.0627 3.07227 10.0479L3.14648 10.0469ZM21.1865 10.9365C21.2265 11.2857 21.25 11.6404 21.25 12L21.2383 12.4609C21.2161 12.9128 21.162 13.3563 21.0771 13.7891L21.0674 13.8281C21.0459 13.8936 20.9901 13.941 20.9238 13.9531H20.8535C20.7518 13.9328 20.6861 13.8336 20.7061 13.7324L20.708 13.7246L20.709 13.7158L20.7764 13.3281L20.7803 13.3086C20.8434 12.8809 20.875 12.4435 20.875 12L20.8643 11.5586C20.8552 11.374 20.8375 11.1912 20.8174 11.0098L21.1865 10.9365ZM6.88086 4.2959C6.94273 4.26456 7.01679 4.27193 7.07227 4.31055L7.12109 4.36035C7.17773 4.44575 7.15476 4.56129 7.06836 4.61914L7.05273 4.63086L6.72656 4.86133L6.71289 4.87109C5.99852 5.40185 5.3658 6.03774 4.83887 6.75586L4.63672 7.04395L4.60254 7.08984C4.54208 7.15747 4.43818 7.1738 4.35938 7.12109H4.36035C4.29528 7.07753 4.26556 7.00042 4.2793 6.92871L4.30762 6.86035L4.58105 6.47559L4.58008 6.47461C5.2073 5.63366 5.97424 4.90321 6.8457 4.31738L6.88086 4.2959ZM17.1396 4.30762C18.0169 4.89492 18.7883 5.62923 19.4189 6.47461V6.47559L19.6836 6.84863L19.7041 6.88184C19.7351 6.94366 19.7288 7.01698 19.6904 7.07227L19.6406 7.12109C19.5609 7.17429 19.4538 7.15783 19.3936 7.08594L19.3594 7.03906L19.1387 6.72656L19.1289 6.71289L18.8945 6.41211C18.4143 5.82018 17.8598 5.2906 17.2441 4.83887L16.9316 4.61914C16.8672 4.57602 16.8377 4.50044 16.8516 4.42871L16.8799 4.36035C16.9234 4.29533 16.9998 4.26657 17.0713 4.28027L17.1396 4.30762ZM12 2.75C12.4608 2.75001 12.9144 2.78348 13.3574 2.84863L13.7998 2.9248L13.8281 2.93164C13.8936 2.95302 13.941 3.0097 13.9531 3.07617V3.14648C13.9347 3.23945 13.8495 3.30184 13.7578 3.2959L13.6943 3.28711H13.6934L13.3262 3.22363L13.3174 3.22266L13.3086 3.2207L12.9863 3.17969C12.7705 3.1558 12.5524 3.13899 12.332 3.13086L12 3.125C11.5554 3.12502 11.1183 3.15759 10.6914 3.2207L10.2686 3.29395C10.1921 3.30906 10.1173 3.27531 10.0762 3.21484L10.0469 3.14648C10.0294 3.05808 10.0779 2.97145 10.1582 2.9375L10.1953 2.92578C10.6332 2.83917 11.0824 2.78418 11.54 2.76172L12 2.75Z" fill="currentColor" stroke="#141E12" strokeWidth="1.5"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconCircleQuestionmark.tsx
+++ b/packages/ui/src/Atoms/Icons/IconCircleQuestionmark.tsx
@@ -0,0 +1,10 @@
+import type {IconProps} from "./type.ts";
+
+export function IconCircleQuestionmark({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M2 12C2 6.47716 6.47716 2 12 2C17.5229 2 22 6.47716 22 12C22 17.5229 17.5229 22 12 22C6.47716 22 2 17.5229 2 12ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4Z" fill="currentColor"/>
+<path fillRule="evenodd" clipRule="evenodd" d="M12 15C12.5523 15 13 15.4477 13 16V16.01C13 16.5623 12.5523 17.01 12 17.01C11.4477 17.01 11 16.5623 11 16.01V16C11 15.4477 11.4477 15 12 15Z" fill="currentColor"/>
+<path fillRule="evenodd" clipRule="evenodd" d="M9.40199 8.49928C9.91918 7.6052 10.8883 7 12 7C13.6569 7 15 8.34315 15 10C15 10.6733 14.8194 11.2219 14.4801 11.663C14.1667 12.0704 13.7667 12.3141 13.519 12.4645C13.2192 12.6466 13.121 12.7083 13.0539 12.7824L13.0508 12.7857C13.0347 12.8026 13 12.8389 13 13C13 13.5523 12.5523 14 12 14C11.4477 14 11 13.5523 11 13C11 12.3526 11.2103 11.839 11.5711 11.4403C11.8491 11.1332 12.2036 10.9211 12.4172 10.7933C12.4402 10.7796 12.4615 10.7668 12.481 10.755C12.7333 10.6018 12.8333 10.5236 12.8949 10.4435C12.9306 10.3971 13 10.2926 13 10C13 9.44771 12.5523 9 12 9C11.6311 9 11.3076 9.1992 11.1332 9.50072C10.8567 9.97878 10.2449 10.1421 9.76688 9.86561C9.28882 9.58907 9.12545 8.97735 9.40199 8.49928Z" fill="currentColor"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconCircleQuestionmark1.tsx
+++ b/packages/ui/src/Atoms/Icons/IconCircleQuestionmark1.tsx
@@ -0,0 +1,8 @@
+import type {IconProps} from "./type.ts";
+
+export function IconCircleQuestionmark1({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M2 12C2 6.47715 6.47715 2 12 2C17.5229 2 22 6.47716 22 12C22 17.5229 17.5229 22 12 22C6.47716 22 2 17.5229 2 12ZM12 4.05607C7.61269 4.05607 4.05607 7.61269 4.05607 12C4.05607 16.3873 7.61269 19.9439 12 19.9439C16.3873 19.9439 19.9439 16.3873 19.9439 12C19.9439 7.61269 16.3873 4.05607 12 4.05607ZM9.3831 8.49459C9.90401 7.59407 10.8802 6.98443 12 6.98443C13.6689 6.98443 15.0218 8.33735 15.0218 10.0062C15.0218 10.6834 14.84 11.2372 14.4971 11.683C14.1807 12.0942 13.7773 12.3398 13.5304 12.4897C13.23 12.6721 13.1368 12.7312 13.0737 12.8009L13.0712 12.8035C13.0594 12.8149 13.028 12.8454 13.028 12.9969C13.028 13.5647 12.5677 14.0249 12 14.0249C11.4322 14.0249 10.9719 13.5647 10.9719 12.9969C10.9719 12.3441 11.1842 11.8245 11.5493 11.4212C11.8298 11.1112 12.1874 10.8974 12.3999 10.7703C12.4228 10.7566 12.444 10.744 12.4633 10.7323C12.7149 10.5795 12.8099 10.5042 12.8674 10.4294C12.8983 10.3893 12.9657 10.292 12.9657 10.0062C12.9657 9.47286 12.5334 9.0405 12 9.0405C11.6438 9.0405 11.3314 9.23276 11.1629 9.52411C10.8786 10.0156 10.2497 10.1835 9.75822 9.89923C9.26675 9.61494 9.0988 8.98606 9.3831 8.49459ZM12 14.9595C12.5678 14.9595 13.028 15.4198 13.028 15.9875V15.9961C13.028 16.5639 12.5678 17.0241 12 17.0241C11.4322 17.0241 10.972 16.5639 10.972 15.9961V15.9875C10.972 15.4198 11.4322 14.9595 12 14.9595Z" fill="currentColor"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconCircleQuestionmarkSolid.tsx
+++ b/packages/ui/src/Atoms/Icons/IconCircleQuestionmarkSolid.tsx
@@ -0,0 +1,8 @@
+import type {IconProps} from "./type.ts";
+
+export function IconCircleQuestionmarkSolid({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM12 9C11.6227 9 11.2926 9.2086 11.1215 9.52152C10.8565 10.0061 10.2488 10.184 9.76427 9.91899C9.27973 9.65396 9.10178 9.04632 9.3668 8.56178C9.87463 7.63331 10.8626 7 12 7C13.5148 7 14.5669 8.00643 14.8664 9.189C15.1676 10.3779 14.7101 11.763 13.3416 12.4472C13.1323 12.5519 13 12.7659 13 13C13 13.5523 12.5523 14 12 14C11.4477 14 11 13.5523 11 13C11 12.0084 11.5603 11.1018 12.4472 10.6584C12.902 10.431 13.0188 10.0397 12.9277 9.6801C12.835 9.31417 12.5283 9 12 9ZM12 17C12.5523 17 13 16.5523 13 16C13 15.4477 12.5523 15 12 15C11.4477 15 11 15.4477 11 16C11 16.5523 11.4477 17 12 17Z" fill="currentColor"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconCircleX.tsx
+++ b/packages/ui/src/Atoms/Icons/IconCircleX.tsx
@@ -0,0 +1,8 @@
+import type {IconProps} from "./type.ts";
+
+export function IconCircleX({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM9.70711 8.29289C9.31658 7.90237 8.68342 7.90237 8.29289 8.29289C7.90237 8.68342 7.90237 9.31658 8.29289 9.70711L10.5858 12L8.29289 14.2929C7.90237 14.6834 7.90237 15.3166 8.29289 15.7071C8.68342 16.0976 9.31658 16.0976 9.70711 15.7071L12 13.4142L14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L13.4142 12L15.7071 9.70711C16.0976 9.31658 16.0976 8.68342 15.7071 8.29289C15.3166 7.90237 14.6834 7.90237 14.2929 8.29289L12 10.5858L9.70711 8.29289Z" fill="currentColor"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconCollapse.tsx
+++ b/packages/ui/src/Atoms/Icons/IconCollapse.tsx
@@ -0,0 +1,8 @@
+import type {IconProps} from "./type.ts";
+
+export function IconCollapse({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M8.33235 2.66667H5C2.97496 2.66667 1.33333 4.3083 1.33333 6.33334V17.6667C1.33333 19.6917 2.97496 21.3333 5 21.3333H19C21.025 21.3333 22.6667 19.6917 22.6667 17.6667V6.33334C22.6667 4.3083 21.025 2.66667 19 2.66667H8.33432C8.33399 2.66667 8.33267 2.66667 8.33235 2.66667C8.33267 2.66667 8.33202 2.66667 8.33235 2.66667ZM9.33333 19.3333V4.66667H19C19.9205 4.66667 20.6667 5.41286 20.6667 6.33334V17.6667C20.6667 18.5871 19.9205 19.3333 19 19.3333H9.33333ZM7.33333 19.3333H5C4.07953 19.3333 3.33333 18.5871 3.33333 17.6667V6.33334C3.33333 5.41286 4.07953 4.66667 5 4.66667H7.33333V19.3333ZM17.0404 7.95956C17.431 8.35009 17.431 8.98325 17.0404 9.37378L14.4142 12L17.0404 14.6262C17.431 15.0168 17.431 15.6499 17.0404 16.0404C16.6499 16.431 16.0168 16.431 15.6262 16.0404L12.2929 12.7071C11.9024 12.3166 11.9024 11.6834 12.2929 11.2929L15.6262 7.95956C16.0168 7.56904 16.6499 7.56904 17.0404 7.95956Z" fill="currentColor"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconCrossLargeX.tsx
+++ b/packages/ui/src/Atoms/Icons/IconCrossLargeX.tsx
@@ -0,0 +1,8 @@
+import type {IconProps} from "./type.ts";
+
+export function IconCrossLargeX({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M4.18934 4.18934C4.77513 3.60355 5.72487 3.60355 6.31066 4.18934L12 9.87868L17.6893 4.18934C18.2751 3.60355 19.2249 3.60355 19.8107 4.18934C20.3964 4.77513 20.3964 5.72487 19.8107 6.31066L14.1213 12L19.8107 17.6893C20.3964 18.2751 20.3964 19.2249 19.8107 19.8107C19.2249 20.3964 18.2751 20.3964 17.6893 19.8107L12 14.1213L6.31066 19.8107C5.72487 20.3964 4.77513 20.3964 4.18934 19.8107C3.60355 19.2249 3.60355 18.2751 4.18934 17.6893L9.87868 12L4.18934 6.31066C3.60355 5.72487 3.60355 4.77513 4.18934 4.18934Z" fill="currentColor"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconDotGrid1x3Horizontal.tsx
+++ b/packages/ui/src/Atoms/Icons/IconDotGrid1x3Horizontal.tsx
@@ -0,0 +1,10 @@
+import type {IconProps} from "./type.ts";
+
+export function IconDotGrid1x3Horizontal({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12Z" fill="currentColor"/>
+<path fillRule="evenodd" clipRule="evenodd" d="M18 12C18 10.8954 18.8954 10 20 10C21.1046 10 22 10.8954 22 12C22 13.1046 21.1046 14 20 14C18.8954 14 18 13.1046 18 12Z" fill="currentColor"/>
+<path fillRule="evenodd" clipRule="evenodd" d="M2 12C2 10.8954 2.89545 10 4 10C5.10455 10 6 10.8954 6 12C6 13.1046 5.10455 14 4 14C2.89545 14 2 13.1046 2 12Z" fill="currentColor"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconExpand.tsx
+++ b/packages/ui/src/Atoms/Icons/IconExpand.tsx
@@ -0,0 +1,10 @@
+import type {IconProps} from "./type.ts";
+
+export function IconExpand({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M15.6667 2.66666C16.219 2.66666 16.6667 3.11438 16.6667 3.66666V20.3333C16.6667 20.8856 16.219 21.3333 15.6667 21.3333C15.1144 21.3333 14.6667 20.8856 14.6667 20.3333V3.66666C14.6667 3.11438 15.1144 2.66666 15.6667 2.66666Z" fill="currentColor"/>
+<path fillRule="evenodd" clipRule="evenodd" d="M6.95956 7.95956C7.35009 7.56903 7.98325 7.56903 8.37378 7.95956L11.7071 11.2929C12.0976 11.6834 12.0976 12.3166 11.7071 12.7071L8.37378 16.0404C7.98325 16.431 7.35009 16.431 6.95956 16.0404C6.56904 15.6499 6.56904 15.0167 6.95956 14.6262L9.58579 12L6.95956 9.37377C6.56904 8.98325 6.56904 8.35008 6.95956 7.95956Z" fill="currentColor"/>
+<path fillRule="evenodd" clipRule="evenodd" d="M5 4.66666C4.07953 4.66666 3.33334 5.41286 3.33334 6.33333V17.6667C3.33334 18.5871 4.07953 19.3333 5 19.3333H19C19.9205 19.3333 20.6667 18.5871 20.6667 17.6667V6.33333C20.6667 5.41286 19.9205 4.66666 19 4.66666H5ZM1.33334 6.33333C1.33334 4.30829 2.97496 2.66666 5 2.66666H19C21.025 2.66666 22.6667 4.30829 22.6667 6.33333V17.6667C22.6667 19.6917 21.025 21.3333 19 21.3333H5C2.97496 21.3333 1.33334 19.6917 1.33334 17.6667V6.33333Z" fill="currentColor"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconFilter.tsx
+++ b/packages/ui/src/Atoms/Icons/IconFilter.tsx
@@ -0,0 +1,10 @@
+import type {IconProps} from "./type.ts";
+
+export function IconFilter({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M6 12C6 11.3373 6.53726 10.8 7.2 10.8H16.8C17.4627 10.8 18 11.3373 18 12C18 12.6627 17.4627 13.2 16.8 13.2H7.2C6.53726 13.2 6 12.6627 6 12Z" fill="currentColor"/>
+<path fillRule="evenodd" clipRule="evenodd" d="M2.4 6C2.4 5.33726 2.93726 4.8 3.6 4.8H20.4C21.0627 4.8 21.6 5.33726 21.6 6C21.6 6.66274 21.0627 7.2 20.4 7.2H3.6C2.93726 7.2 2.4 6.66274 2.4 6Z" fill="currentColor"/>
+<path fillRule="evenodd" clipRule="evenodd" d="M9.6 18C9.6 17.3373 10.1373 16.8 10.8 16.8H13.2C13.8627 16.8 14.4 17.3373 14.4 18C14.4 18.6627 13.8627 19.2 13.2 19.2H10.8C10.1373 19.2 9.6 18.6627 9.6 18Z" fill="currentColor"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconFire3.tsx
+++ b/packages/ui/src/Atoms/Icons/IconFire3.tsx
@@ -0,0 +1,8 @@
+import type {IconProps} from "./type.ts";
+
+export function IconFire3({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M11.0878 1.55112C11.4034 1.44613 11.7506 1.50496 12.014 1.70806C13.6854 2.99672 14.8321 4.40619 15.4545 6.04124C15.7381 6.78655 15.9052 7.55854 15.9713 8.36097C16.3539 7.91008 16.673 7.52007 16.8132 7.31773C16.9808 7.07589 17.2464 6.92012 17.5393 6.8919C17.8321 6.86367 18.1226 6.96585 18.3332 7.17122C19.6745 8.47874 20.2171 10.1387 20.4148 11.7441C21.0547 16.8981 18.0099 20.4744 14.2968 21.6103C10.5981 22.7419 6.17025 21.456 4.19221 16.9919L4.19175 16.9909C3.00508 14.3045 3.39442 11.6329 4.97916 9.27395C5.51315 8.47963 6.16338 7.77844 6.79319 7.15968L6.79391 7.15898C6.99563 6.9612 7.19225 6.77178 7.38317 6.58786C8.80007 5.22286 9.90252 4.16081 10.4401 2.23158C10.5294 1.91116 10.7722 1.6561 11.0878 1.55112ZM14.8195 11.196L15.5639 11.8638C15.2662 12.1956 14.7849 12.2903 14.3837 12.096C13.9825 11.9018 13.7583 11.4654 13.834 11.0261C14.125 9.33793 14.0444 7.95904 13.5853 6.75269C13.2487 5.86833 12.6887 5.02445 11.8369 4.19265C11.0506 5.85099 9.87183 6.97825 8.75558 8.0457C8.566 8.22698 8.37824 8.40654 8.1945 8.58669C7.60516 9.1657 7.06396 9.75763 6.63932 10.3893M14.8195 11.196L15.5639 11.8638L15.6652 11.7505C15.7296 11.6784 15.822 11.5747 15.9345 11.4479C16.1594 11.1946 16.465 10.8486 16.7872 10.4787C17.063 10.1621 17.363 9.81441 17.6377 9.48778C18.0752 10.2119 18.3151 11.0574 18.4298 11.9885L18.4299 11.9896C18.9411 16.1033 16.5721 18.8228 13.7117 19.6978C10.8368 20.5774 7.53103 19.5895 6.02096 16.1822C5.14159 14.191 5.39469 12.2421 6.63932 10.3893" fill="currentColor"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconFolder2.tsx
+++ b/packages/ui/src/Atoms/Icons/IconFolder2.tsx
@@ -0,0 +1,8 @@
+import type {IconProps} from "./type.ts";
+
+export function IconFolder2({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M6 5C4.89543 5 4 5.89543 4 7V9.53512C4.58835 9.19478 5.27143 9 6 9H18C18.7286 9 19.4117 9.19478 20 9.53511V9C20 7.89542 19.1046 7 18 7H13.2426C12.1818 7 11.1643 6.57858 10.4142 5.82842L10.1716 5.58578C9.79654 5.21075 9.28778 5 8.75736 5H6ZM20 13C20 11.8954 19.1046 11 18 11H6C4.89542 11 4 11.8954 4 13V16C4 17.1046 4.89542 18 6 18H18C19.1046 18 20 17.1046 20 16V13ZM2 16C2 18.2092 3.79088 20 6 20H18C20.2092 20 22 18.2092 22 16V9C22 6.79088 20.2092 5 18 5H13.2426C12.7122 5 12.2035 4.78928 11.8284 4.41422L11.5859 4.17163C10.8357 3.42147 9.81822 3 8.75736 3H6C3.79087 3 2 4.79087 2 7V16Z" fill="currentColor"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconFolderUpload.tsx
+++ b/packages/ui/src/Atoms/Icons/IconFolderUpload.tsx
@@ -0,0 +1,8 @@
+import type {IconProps} from "./type.ts";
+
+export function IconFolderUpload({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M2 7C2 4.79087 3.79087 3 6 3H8.39445C9.73185 3 10.9808 3.66839 11.7226 4.78118L12.2383 5.55468C12.4237 5.83282 12.736 6 13.0704 6H18C20.2092 6 22 7.79088 22 10V16C22 18.2092 20.2092 20 18 20H16C15.4477 20 15 19.5523 15 19C15 18.4477 15.4477 18 16 18H18C19.1046 18 20 17.1046 20 16V10C20 8.89542 19.1046 8 18 8H13.0704C12.0674 8 11.1307 7.49874 10.5743 6.66412L10.0586 5.89062C9.68763 5.33422 9.06316 5 8.39445 5H6C4.89543 5 4 5.89543 4 7V16C4 17.1046 4.89542 18 6 18H8C8.55228 18 9 18.4477 9 19C9 19.5523 8.55228 20 8 20H6C3.79088 20 2 18.2092 2 16V7ZM11.2929 12.2929C11.6834 11.9024 12.3166 11.9024 12.7071 12.2929L15.2071 14.7929C15.5976 15.1834 15.5976 15.8166 15.2071 16.2071C14.8166 16.5976 14.1834 16.5976 13.7929 16.2071L13 15.4142V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V15.4142L10.2071 16.2071C9.81658 16.5976 9.18342 16.5976 8.79289 16.2071C8.40237 15.8166 8.40237 15.1834 8.79289 14.7929L11.2929 12.2929Z" fill="currentColor"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconFrame.tsx
+++ b/packages/ui/src/Atoms/Icons/IconFrame.tsx
@@ -0,0 +1,8 @@
+import type {IconProps} from "./type.ts";
+
+export function IconFrame({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path d="M12 13.4L13.4 14.8C13.5833 14.9833 13.8167 15.075 14.1 15.075C14.3833 15.075 14.6167 14.9833 14.8 14.8C14.9833 14.6167 15.075 14.3833 15.075 14.1C15.075 13.8167 14.9833 13.5833 14.8 13.4L13.4 12L14.8 10.6C14.9833 10.4167 15.075 10.1833 15.075 9.9C15.075 9.61667 14.9833 9.38334 14.8 9.2C14.6167 9.01667 14.3833 8.925 14.1 8.925C13.8167 8.925 13.5833 9.01667 13.4 9.2L12 10.6L10.6 9.2C10.4167 9.01667 10.1833 8.925 9.9 8.925C9.61667 8.925 9.38333 9.01667 9.2 9.2C9.01667 9.38334 8.925 9.61667 8.925 9.9C8.925 10.1833 9.01667 10.4167 9.2 10.6L10.6 12L9.2 13.4C9.01667 13.5833 8.925 13.8167 8.925 14.1C8.925 14.3833 9.01667 14.6167 9.2 14.8C9.38333 14.9833 9.61667 15.075 9.9 15.075C10.1833 15.075 10.4167 14.9833 10.6 14.8L12 13.4ZM12 21.9C11.8833 21.9 11.775 21.8917 11.675 21.875C11.575 21.8583 11.475 21.8333 11.375 21.8C9.125 21.05 7.33333 19.6625 6 17.6375C4.66667 15.6125 4 13.4333 4 11.1V6.375C4 5.95833 4.12083 5.58333 4.3625 5.25C4.60417 4.91667 4.91667 4.675 5.3 4.525L11.3 2.275C11.5333 2.19167 11.7667 2.15 12 2.15C12.2333 2.15 12.4667 2.19167 12.7 2.275L18.7 4.525C19.0833 4.675 19.3958 4.91667 19.6375 5.25C19.8792 5.58333 20 5.95833 20 6.375V11.1C20 13.4333 19.3333 15.6125 18 17.6375C16.6667 19.6625 14.875 21.05 12.625 21.8C12.525 21.8333 12.425 21.8583 12.325 21.875C12.225 21.8917 12.1167 21.9 12 21.9ZM12 19.9C13.7333 19.35 15.1667 18.25 16.3 16.6C17.4333 14.95 18 13.1167 18 11.1V6.375L12 4.125L6 6.375V11.1C6 13.1167 6.56667 14.95 7.7 16.6C8.83333 18.25 10.2667 19.35 12 19.9Z" fill="currentColor"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconFrame1.tsx
+++ b/packages/ui/src/Atoms/Icons/IconFrame1.tsx
@@ -0,0 +1,8 @@
+import type {IconProps} from "./type.ts";
+
+export function IconFrame1({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path d="M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16V12C13 11.7167 12.9042 11.4792 12.7125 11.2875C12.5208 11.0958 12.2833 11 12 11C11.7167 11 11.4792 11.0958 11.2875 11.2875C11.0958 11.4792 11 11.7167 11 12V16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 9C12.2833 9 12.5208 8.90417 12.7125 8.7125C12.9042 8.52083 13 8.28333 13 8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8C11 8.28333 11.0958 8.52083 11.2875 8.7125C11.4792 8.90417 11.7167 9 12 9ZM12 21.9C11.8833 21.9 11.775 21.8917 11.675 21.875C11.575 21.8583 11.475 21.8333 11.375 21.8C9.125 21.05 7.33333 19.6625 6 17.6375C4.66667 15.6125 4 13.4333 4 11.1V6.375C4 5.95833 4.12083 5.58333 4.3625 5.25C4.60417 4.91667 4.91667 4.675 5.3 4.525L11.3 2.275C11.5333 2.19167 11.7667 2.15 12 2.15C12.2333 2.15 12.4667 2.19167 12.7 2.275L18.7 4.525C19.0833 4.675 19.3958 4.91667 19.6375 5.25C19.8792 5.58333 20 5.95833 20 6.375V11.1C20 13.4333 19.3333 15.6125 18 17.6375C16.6667 19.6625 14.875 21.05 12.625 21.8C12.525 21.8333 12.425 21.8583 12.325 21.875C12.225 21.8917 12.1167 21.9 12 21.9ZM12 19.9C13.7333 19.35 15.1667 18.25 16.3 16.6C17.4333 14.95 18 13.1167 18 11.1V6.375L12 4.125L6 6.375V11.1C6 13.1167 6.56667 14.95 7.7 16.6C8.83333 18.25 10.2667 19.35 12 19.9Z" fill="currentColor"/>
+</svg>
+
+}
--- a/packages/ui/src/Atoms/Icons/IconFrame2.tsx
+++ b/packages/ui/src/Atoms/Icons/IconFrame2.tsx
@@ -0,0 +1,8 @@
+import type {IconProps} from "./type.ts";
+
+export function IconFrame2({size = 24, className}: IconProps) {
+  return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" className={className} xmlns="http://www.w3.org/2000/svg">
+<path d="M10.95 12.7L9.55 11.3C9.35 11.1 9.11667 11 8.85 11C8.58333 11 8.35 11.1 8.15 11.3C7.95 11.5 7.85 11.7375 7.85 12.0125C7.85 12.2875 7.95 12.525 8.15 12.725L10.25 14.85C10.45 15.05 10.6833 15.15 10.95 15.15C11.2167 15.15 11.45 15.05 11.65 14.85L15.9 10.6C16.1 10.4 16.2 10.1625 16.2 9.8875C16.2 9.6125 16.1 9.375 15.9 9.175C15.7 8.975 15.4625 8.875 15.1875 8.875C14.9125 8.875 14.675 8.975 14.475 9.175L10.95 12.7ZM12 21.9C11.8833 21.9 11.775 21.8917 11.675 21.875C11.575 21.8583 11.475 21.8333 11.375 21.8C9.125 21.05 7.33333 19.6625 6 17.6375C4.66667 15.6125 4 13.4333 4 11.1V6.375C4 5.95833 4.12083 5.58333 4.3625 5.25C4.60417 4.91667 4.91667 4.675 5.3 4.525L11.3 2.275C11.5333 2.19167 11.7667 2.15 12 2.15C12.2333 2.15 12.4667 2.19167 12.7 2.275L18.7 4.525C19.0833 4.675 19.3958 4.91667 19.6375 5.25C19.8792 5.58333 20 5.95833 20 6.375V11.1C20 13.4333 19.3333 15.6125 18 17.6375C16.6667 19.6625 14.875 21.05 12.625 21.8C12.525 21.8333 12.425 21.8583 12.325 21.875C12.225 21.8917 12.1167 21.9 12 21.9ZM12 19.9C13.7333 19.35 15.1667 18.25 16.3 16.6C17.4333 14.95 18 13.1167 18 11.1V6.375L12 4.125L6 6.375V11.1C6 13.1167 6.56667 14.95 7.7 16.6C8.83333 18.25 10.2667 19.35 12 19.9Z" fill="currentColor"/>
+</svg>
+
+}
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>