Add renovate.json

2024-09-29 09:59:57 +00:00
205 changed files with 3059 additions and 445097 deletions
--- a/.gitattributes
+++ b/.gitattributes
@ -1 +0,0 @@
-*.mp4 filter=lfs diff=lfs merge=lfs -text
--- a/.gitignore
+++ b/.gitignore
@ -1,6 +1,5 @@

 dist
-public/videos
 .solid
 .output
 .vercel
@ -27,3 +26,7 @@ gitignore
 # System Files
 .DS_Store
 Thumbs.db
+
+## Panda
+styled-system
+styled-system-studio
--- a/.prettierrc.toml
+++ b/.prettierrc.toml
@ -0,0 +1,8 @@
+trailingComma = "all"
+tabWidth = 2
+semi = true
+singleQuote = true
+bracketSpacing = true
+bracketLine = false
+arrowFunctionParenthesis = "avoid"
+experimentalTernaries = true
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -1,13 +0,0 @@
-{
-    "cssvar.files": [
-        "./node_modules/open-props/open-props.min.css",
-        "./src/index.css"
-    ],
-    "cssvar.ignore": [],
-    "cssvar.extensions": [
-        "css",
-        "postcss",
-        "jsx",
-        "tsx"
-    ]
-}
--- a/27
+++ b/27
@ -1,27 +0,0 @@
-
-http://localhost
-
-route /sonarr/api/v3/* {
-    uri strip_prefix /sonarr
-    reverse_proxy sonarr_v3:4010
-}
-
-route /sonarr/api/v5/* {
-    uri strip_prefix /sonarr
-    reverse_proxy sonarr_v5:4010
-}
-
-route /radarr/* {
-    uri strip_prefix /radarr
-    reverse_proxy radarr:4010
-}
-
-# route /tmdb/* {
-#     uri strip_prefix /tmdb
-#     reverse_proxy tmdb:4010
-# }
-
-route /jellifin/* {
-    uri strip_prefix /jellifin
-    reverse_proxy jellifin:4010
-}
--- a/README.md
+++ b/README.md
@ -1,26 +1,32 @@
+# SolidStart

+Everything you need to build a Solid project, powered by [`solid-start`](https://start.solidjs.com);

-
-# Notes
-
-## Setting up the project
-
-run the command `bun --bun run db:generate` in order to create and populate the better-auht database
-
-## APIS
-
-### Host mocked api's
+## Creating a project

 ```bash
-docker compose up
+# create a new project in the current directory
+npm init solid@latest
+
+# create a new project in my-app
+npm init solid@latest my-app
 ```

-### Generate openapi client
+## Developing

- path to source yml or json
- path to output, will create a typescript file
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

-example  
 ```bash
-bunx openapi-typescript .\src\features\content\apis\api.json -o .\src\features\content\apis\api.generated.ts
-```
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+Solid apps are built with _presets_, which optimise your project for deployment to different environments.
+
+By default, `npm run build` will generate a Node app that you can run with `npm start`. To use a different preset, add it to the `devDependencies` in `package.json` and specify in your `app.config.js`.
+
+## This project was created with the [Solid CLI](https://solid-cli.netlify.app)
--- a/app.config.ts
+++ b/app.config.ts
@ -1,26 +1,12 @@
-import { defineConfig } from "@solidjs/start/config";
-import solidSvg from "vite-plugin-solid-svg";
-import devtools from "solid-devtools/vite";
-import { build, fileURLToPath } from "bun";
+import { defineConfig } from '@solidjs/start/config';
+import tsconfigPaths from 'vite-tsconfig-paths';

 export default defineConfig({
-  vite: {
-    plugins: [
-      // devtools({
-      //   autoname: true,
-      // }),
-      // solidSvg(),
-    ],
-  },
-  solid: {
-    babel: {
-      compact: true,
-    },
-  },
+  ssr: true,
  server: {
-    preset: "bun",
-    prerender: {
-      routes: ["/", "/sitemaps.xml"],
-    },
+    preset: 'bun',
+  },
+  vite: {
+    plugins: [tsconfigPaths({ root: './' })],
  },
 });
--- a/auth.sqlite
+++ b/auth.sqlite
--- a/better-auth_migrations/2025-06-17T07-59-07.464Z.sql
+++ b/better-auth_migrations/2025-06-17T07-59-07.464Z.sql
@ -1,7 +0,0 @@
-create table "user" ("id" text not null primary key, "name" text not null, "email" text not null unique, "emailVerified" integer not null, "image" text, "createdAt" date not null, "updatedAt" date not null, "preferred_username" text not null, "username" text not null);
-
-create table "session" ("id" text not null primary key, "expiresAt" date not null, "token" text not null unique, "createdAt" date not null, "updatedAt" date not null, "ipAddress" text, "userAgent" text, "userId" text not null references "user" ("id"));
-
-create table "account" ("id" text not null primary key, "accountId" text not null, "providerId" text not null, "userId" text not null references "user" ("id"), "accessToken" text, "refreshToken" text, "idToken" text, "accessTokenExpiresAt" date, "refreshTokenExpiresAt" date, "scope" text, "password" text, "createdAt" date not null, "updatedAt" date not null);
-
-create table "verification" ("id" text not null primary key, "identifier" text not null, "value" text not null, "expiresAt" date not null, "createdAt" date, "updatedAt" date);
--- a/bun.lock
+++ b/bun.lock
--- a/bun.lockb
+++ b/bun.lockb
--- a/bunfig.toml
+++ b/bunfig.toml
@ -1,6 +0,0 @@
-[test]
-coverage = true
-coverageSkipTestFiles = true
-coverageReporter = ['text', 'lcov']
-coverageDir = './.coverage'
-preload = "./test.config.ts"
--- a/docker-compose.mocks.yml
+++ b/docker-compose.mocks.yml
@ -1,54 +0,0 @@
-version: '3'
-services:
-  proxy:
-    image: caddy
-    volumes:
-      - ./Caddyfile:/etc/caddy/Caddyfile
-    ports:
-      - '8080:80'
-    depends_on:
-      - sonarr_v3
-      - sonarr_v5
-      - radarr
-      - jellyfin
-
-  sonarr_v3:
-    image: stoplight/prism
-    volumes:
-      - './src/features/content/apis:/var/apis'
-    command: >-
-      mock
-      -h 0.0.0.0
-      -p 4010
-      /var/apis/sonarr.v3.json
-
-  sonarr_v5:
-    image: stoplight/prism
-    volumes:
-      - './src/features/content/apis:/var/apis'
-    command: >-
-      mock
-      -h 0.0.0.0
-      -p 4010
-      /var/apis/sonarr.v5.json
-
-  radarr:
-    image: stoplight/prism
-    volumes:
-      - './src/features/content/apis:/var/apis'
-    command: >-
-      mock
-      -h 0.0.0.0
-      -p 4010
-      /var/apis/radarr.json
-
-  jellyfin:
-    image: stoplight/prism
-    volumes:
-      - './src/features/content/apis:/var/apis'
-    command: >-
-      mock
-      -h 0.0.0.0
-      -p 4010
-      /var/apis/jellyfin.json
-      /var/apis/jellyfin.json
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -1,25 +0,0 @@
-version: '3'
-services:
-  sonarr:
-    image: hotio/sonarr
-    container_name: sonarr
-    volumes:
-      - ./media:/media
-    ports:
-      - 8989:8989
-
-  radarr:
-    image: hotio/radarr
-    container_name: radarr
-    volumes:
-      - ./media:/media
-    ports:
-      - 7878:7878
-
-  jellyfin:
-    image: hotio/jellyfin
-    container_name: jellyfin
-    volumes:
-      - ./media:/media
-    ports:
-      - 8096:8096
--- a/docs/design/playing_media.md
+++ b/docs/design/playing_media.md
@ -1,85 +0,0 @@
-# Playing media
-
-This document will describe the application UX flow.
-
-## Types of media & Expected behavior
-
- movie
-  - actual movie -> show the video player and start/continue playing the movie
-  - collection -> Show a picker for which movie to play (also allow play-all)
- audio/music
-  - artist -> Show top songs, albums, and a play-all button
-  - album -> Show songs in album and a play-all button
-  - song -> Show audio player and start playing the song
- show/tv
-  - series -> Show a picker for the seasons and include a play button that will start/continue the first non-completed episode
-  - season -> Show a picker for the episodes and include a play button that will start/continue the first non-completed episode
-  - episode -> Show the video player and start/continue the episode (include the skip to previous&next episode buttons)
- playlist -> play the selected entry according to the above listed definitions
-
-## UX flow
-
-```txt
-WHEN type of media IS {
-    audio -> {
-        WHEN entry does not exist in lidarr {
-            add entry to lidarr
-        }
-
-        WHEN queue record status IS {
-            paused -> ???
-
-            downloading -> {
-                display estimated time remaining
-                wait for download to complete
-            }
-
-            _ -> ???
-        }
-
-        play audio
-    }
-
-    show/tv -> {
-        WHEN entry is not an episode {
-            redirect to earliest non-completed episode
-        }
-
-        WHEN entry does not exist in sonarr {
-            add entry to sonarr
-        }
-
-        WHEN queue record status IS {
-            paused -> ???
-
-            downloading -> {
-                display estimated time remaining
-                wait for download to complete
-            }
-
-            _ -> ???
-        }
-
-        play episode
-    }
-
-    movie -> {
-        WHEN entry does not exist in radarr {
-            add entry to radarr
-        }
-
-        WHEN queue record status IS {
-            paused -> ???
-
-            downloading -> {
-                display estimated time remaining
-                wait for download to complete
-            }
-
-            _ -> ???
-        }
-
-        play movie
-    }
-}
-```
--- a/flake.nix
+++ b/flake.nix
@ -1,23 +0,0 @@
-{
-  description = "Streamarr";
-
-  inputs = {
-    nixpkgs.url = "github:nixos/nixpkgsnixos-unstable";
-    flake-utils.url = "github:numtide/flake-utils";
-    bix = {
-      url = "github:knarkzel/bix";
-      inputs.nixpkgs.follows = "nixpkgs";
-    };
-  };
-
-    outputs = { self, nixpkgs, flake-utils }:
-    flake-utils.lib.eachDefaultSystem (system: let
-    pkgs = nixpkgs.legacyPackages.${system};
-    in
-    {
-        packages = bix.buildBunPackage {
-            src = ./.;
-            packages = ./package.json;
-        };
-    });
-}
--- a/package.json
+++ b/package.json
@ -1,52 +1,27 @@
 {
-  "name": "streamarr",
+  "name": "example-basic",
  "type": "module",
-  "engines": {
-    "node": ">=18",
-    "bun": ">=1"
-  },
  "scripts": {
+    "prepare": "panda codegen",
    "dev": "vinxi dev",
    "build": "vinxi build",
    "start": "vinxi start",
-    "version": "vinxi version",
-    "test": "vitest --coverage",
-    "test:ci": "vitest run",
-    "db:generate": "cli generate",
-    "db:migrate": "cli migrate"
+    "version": "vinxi version"
+  },
+  "engines": {
+    "node": ">=18"
  },
  "dependencies": {
-    "@solid-primitives/context": "^0.3.2",
-    "@solid-primitives/deep": "^0.3.3",
-    "@solid-primitives/event-listener": "^2.4.3",
-    "@solid-primitives/fullscreen": "^1.3.3",
-    "@solid-primitives/pagination": "^0.4.3",
-    "@solid-primitives/scheduled": "^1.5.2",
+    "@ark-ui/solid": "^3.9.0",
    "@solidjs/meta": "^0.29.4",
-    "@solidjs/router": "^0.15.3",
-    "@solidjs/start": "^1.1.7",
-    "better-auth": "^1.3.2",
-    "bindings": "^1.5.0",
-    "open-props": "^1.7.16",
-    "openapi-fetch": "^0.13.8",
-    "sitemap": "^8.0.0",
-    "solid-icons": "^1.1.0",
-    "solid-js": "^1.9.7",
-    "vinxi": "^0.5.8"
+    "@solidjs/router": "^0.14.1",
+    "@solidjs/start": "^1.0.6",
+    "solid-js": "^1.8.18",
+    "vinxi": "^0.4.1"
  },
  "devDependencies": {
-    "@better-auth/cli": "^1.3.2",
-    "@testing-library/jest-dom": "^6.6.3",
-    "browserslist": "^4.25.1",
-    "bun-types": "^1.2.19",
-    "lightningcss": "^1.30.1",
-    "openapi-typescript": "^7.8.0",
-    "solid-devtools": "^0.33.0",
-    "vite-plugin-solid-svg": "^0.8.1",
-    "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.2.4"
-  },
-  "patchedDependencies": {
-    "@tanstack/directive-functions-plugin@1.119.2": "patches/@tanstack%2Fdirective-functions-plugin@1.119.2.patch"
+    "@pandacss/dev": "^0.45.2",
+    "@park-ui/panda-preset": "^0.42.0",
+    "vite-tsconfig-paths": "^5.0.1"
  }
 }
--- a/panda.config.ts
+++ b/panda.config.ts
@ -0,0 +1,17 @@
+import { defineConfig } from '@pandacss/dev'
+import { createPreset } from '@park-ui/panda-preset'
+
+export default defineConfig({
+  preflight: true,
+  presets: [
+    '@pandacss/preset-base',
+    createPreset({
+      accentColor: 'jade',
+      grayColor: 'neutral',
+      borderRadius: 'sm',
+    }),
+  ],
+  include: ['./src/**/*.{js,jsx,ts,tsx,vue}'],
+  jsxFramework: 'solid', // or 'solid' or 'vue'
+  outdir: 'styled-system',
+})
--- a/park-ui.json
+++ b/park-ui.json
@ -0,0 +1,5 @@
+{
+  "$schema": "https://park-ui.com/registry/latest/schema.json",
+  "jsFramework": "solid",
+  "outputPath": "./src/common/components/ui"
+}
--- a/patches/@tanstack%2Fdirective-functions-plugin@1.119.2.patch
+++ b/patches/@tanstack%2Fdirective-functions-plugin@1.119.2.patch
@ -1,14 +0,0 @@
-diff --git a/dist/esm/index.js b/dist/esm/index.js
-index 813fa63450583316c537cadd46db0c6fce055ac7..205b03d0ae77bfe3ee93f42b0e3d4b5f453502ec 100644
--- a/dist/esm/index.js
-+++ b/dist/esm/index.js
-@@ -13,6 +13,9 @@ function TanStackDirectiveFunctionsPlugin(opts) {
-       ROOT = config.root;
-     },
-     transform(code, id) {
-+      if (id.startsWith('/@')) {
-+        id = `@/${id.slice(2)}`;
-+      }
-       var _a;
-       const url = pathToFileURL(id);
-       url.searchParams.delete("v");
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    '@pandacss/dev/postcss': {},
+  },
+}
--- a/public/favicon-dark.svg
+++ b/public/favicon-dark.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="white">
-    <path d="M0 96C0 60.7 28.7 32 64 32l384 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zM48 368l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm368-16c-8.8 0-16 7.2-16 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0zM48 240l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm368-16c-8.8 0-16 7.2-16 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0zM48 112l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16L64 96c-8.8 0-16 7.2-16 16zM416 96c-8.8 0-16 7.2-16 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0zM160 128l0 64c0 17.7 14.3 32 32 32l128 0c17.7 0 32-14.3 32-32l0-64c0-17.7-14.3-32-32-32L192 96c-17.7 0-32 14.3-32 32zm32 160c-17.7 0-32 14.3-32 32l0 64c0 17.7 14.3 32 32 32l128 0c17.7 0 32-14.3 32-32l0-64c0-17.7-14.3-32-32-32l-128 0z"/>
-</svg>
--- a/public/favicon-light.svg
+++ b/public/favicon-light.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="black">
-    <path d="M0 96C0 60.7 28.7 32 64 32l384 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zM48 368l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm368-16c-8.8 0-16 7.2-16 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0zM48 240l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0c-8.8 0-16 7.2-16 16zm368-16c-8.8 0-16 7.2-16 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0zM48 112l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16L64 96c-8.8 0-16 7.2-16 16zM416 96c-8.8 0-16 7.2-16 16l0 32c0 8.8 7.2 16 16 16l32 0c8.8 0 16-7.2 16-16l0-32c0-8.8-7.2-16-16-16l-32 0zM160 128l0 64c0 17.7 14.3 32 32 32l128 0c17.7 0 32-14.3 32-32l0-64c0-17.7-14.3-32-32-32L192 96c-17.7 0-32 14.3-32 32zm32 160c-17.7 0-32 14.3-32 32l0 64c0 17.7 14.3 32 32 32l128 0c17.7 0 32-14.3 32-32l0-64c0-17.7-14.3-32-32-32l-128 0z"/>
-</svg>
--- a/renovate.json
+++ b/renovate.json
@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:recommended"
+  ]
+}
--- a/src/app.tsx
+++ b/src/app.tsx
@ -3,7 +3,6 @@ import { Router } from "@solidjs/router";
 import { FileRoutes } from "@solidjs/start/router";
 import { Suspense } from "solid-js";
 import './index.css';
-import { ThemeContextProvider } from "./features/theme";

 export default function App() {
  return (
@ -11,9 +10,7 @@ export default function App() {
      root={props => (
        <MetaProvider>
          <Title>Streamarr - Home</Title>
-          <Suspense>
-            <ThemeContextProvider>{props.children}</ThemeContextProvider>
-          </Suspense>
+          <Suspense>{props.children}</Suspense>
        </MetaProvider>
      )}
    >
--- a/src/auth.client.ts
+++ b/src/auth.client.ts
@ -1,6 +0,0 @@
-import { createAuthClient } from "better-auth/solid";
-import { genericOAuthClient } from "better-auth/client/plugins";
-
-export const { signIn, signOut, useSession, ...client } = createAuthClient({
-  plugins: [genericOAuthClient()],
-});
--- a/src/auth.server.ts
+++ b/src/auth.server.ts
@ -1,54 +0,0 @@
-import { betterAuth } from "better-auth";
-import { genericOAuth } from "better-auth/plugins";
-import { profile } from "bun:jsc";
-import { Database } from "bun:sqlite";
-
-export const auth = betterAuth({
-  appName: "Streamarr",
-  basePath: "/api/auth",
-  database: new Database('auth.sqlite', { create: true }),
-  logger: {
-    level: "debug",
-    log(level, message, ...args) {
-      console.log(level, message, {args});
-    },
-  },
-  user: {
-    additionalFields: {
-      name: {
-        type: "string",
-        nullable: true,
-      },
-      username: {
-        type: "string",
-        nullable: true,
-      },
-    },
-  },
-  plugins: [
-    genericOAuth({
-      config: [
-        {
-          providerId: "authelia",
-          clientId: "streamarr",
-          clientSecret:
-            "ZPuiW2gpVV6MGXIJFk5P3EeSW8V_ICgqduF.hJVCKkrnVmRqIQXRk0o~HSA8ZdCf8joA4m_F",
-          discoveryUrl:
-            "https://auth.kruining.eu/.well-known/openid-configuration",
-          scopes: [
-            "offline_access",
-            "openid",
-            "email",
-            "picture",
-            "profile",
-            "groups",
-          ],
-          accessType: "offline",
-          pkce: true,
-          mapProfileToUser: ({ id, name, email, image, preferred_username, emailVerified }) => 
-            ({ id, name, email, emailVerified, image, username: preferred_username }),
-        },
-      ],
-    }),
-  ],
-});
--- a/src/common/components/hero.tsx
+++ b/src/common/components/hero.tsx
@ -0,0 +1,82 @@
+import { Index } from 'solid-js';
+import { css } from 'styled-system/css';
+import { Entry } from '~/features/content';
+
+type HeroProps = {
+  entry: Entry;
+};
+
+export function Hero(props: HeroProps) {
+  return (
+    <div class={container}>
+      <h2 class={title}>{props.entry.title}</h2>
+
+      <img src={props.entry.thumbnail} class={thumbnail} />
+      <img src={props.entry.image} class={background} />
+
+      <span class={detail}>
+        {props.entry.releaseDate}
+
+        <Index each={props.entry.sources ?? []}>
+          {(source) => (
+            <>
+              &nbsp;•&nbsp;
+              <a href={source().url.toString()} target="_blank">
+                {source().rating.score} {source().label}
+              </a>
+            </>
+          )}
+        </Index>
+      </span>
+
+      <p class={summary}>{props.entry.summary}</p>
+    </div>
+  );
+}
+
+const container = css({
+  display: 'grid',
+  grid: 'repeat(3, auto) / 10em 1fr',
+  gridTemplateAreas: `
+    "thumbnail ."
+    "thumbnail title"
+    "thumbnail detail"
+    "thumbnail summary"
+  `,
+  alignContent: 'end',
+  gap: '1em',
+  blockSize: '80vh',
+});
+
+const title = css({
+  gridArea: 'title',
+  fontSize: '2.5em',
+});
+
+const thumbnail = css({
+  gridArea: 'thumbnail',
+  inlineSize: '15em',
+  aspectRatio: '3 / 5',
+  borderRadius: '1em',
+  objectFit: 'cover',
+  objectPosition: 'center',
+});
+
+const background = css({
+  position: 'fixed',
+  inset: '0',
+  zIndex: '-1',
+  blockSize: '90vh',
+  inlineSize: '100%',
+  objectFit: 'cover',
+  objectPosition: 'center',
+});
+
+const detail = css({
+  gridArea: 'detail',
+});
+
+const summary = css({
+  gridArea: 'summary',
+  textWrap: 'balance',
+});
--- a/src/common/components/list.tsx
+++ b/src/common/components/list.tsx
@ -0,0 +1,55 @@
+import { ParentComponent, Index } from 'solid-js';
+import { css } from 'styled-system/css';
+
+type ListProps<T, U extends JSX.Element> = {
+  label: string;
+  items: T[];
+  children: (item: T) => U;
+};
+
+export const List: ParentComponent<{ label: string; items: T[] }> = (props) => {
+  return (
+    <section class={container}>
+      <b role="heading" class={heading}>
+        {props.label}
+      </b>
+
+      <ul class={list}>
+        <Index each={props.items}>{props.children}</Index>
+      </ul>
+    </section>
+  );
+};
+
+const container = css({
+  display: 'grid',
+  gridAutoFlow: 'row',
+  inlineSize: '100%',
+});
+
+const heading = css({
+  fontSize: '2em',
+});
+
+const list = css({
+  // layout
+  display: 'grid',
+  gridAutoFlow: 'column',
+  //   gridAutoColumns: '',
+
+  // spacing
+  gap: '2em',
+  padding: '10em 4em 5em',
+  scrollPadding: '4em',
+  margin: '-10em -4em 0em',
+  marginBlockStart: '-10em',
+
+  // scroll
+  overflowInline: 'auto',
+  overflowBlock: 'visible',
+  scrollSnapType: 'inline proximity',
+
+  '@media (hover: none)': {
+    '& > *': { scrollSnapAlign: 'start' },
+  },
+});
--- a/src/common/components/ui/avatar.tsx
+++ b/src/common/components/ui/avatar.tsx
@ -0,0 +1,40 @@
+import { splitProps } from 'solid-js'
+import * as StyledAvatar from './styled/avatar'
+
+export interface AvatarProps extends StyledAvatar.RootProps {
+  name?: string
+  src?: string
+}
+
+export const Avatar = (props: AvatarProps) => {
+  const [localProps, rootProps] = splitProps(props, ['name', 'src'])
+
+  return (
+    <StyledAvatar.Root {...rootProps}>
+      <StyledAvatar.Fallback>{getInitials(localProps.name) || <UserIcon />}</StyledAvatar.Fallback>
+      <StyledAvatar.Image src={localProps.src} alt={localProps.name} />
+    </StyledAvatar.Root>
+  )
+}
+
+const UserIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+  >
+    <title>User Icon</title>
+    <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
+    <circle cx="12" cy="7" r="4" />
+  </svg>
+)
+
+const getInitials = (name = '') =>
+  name
+    .split(' ')
+    .map((part) => part[0])
+    .splice(0, 2)
+    .join('')
+    .toUpperCase()
--- a/src/common/components/ui/badge.tsx
+++ b/src/common/components/ui/badge.tsx
@ -0,0 +1 @@
+export { Badge, type BadgeProps } from './styled/badge'
--- a/src/common/components/ui/button.tsx
+++ b/src/common/components/ui/button.tsx
@ -0,0 +1,37 @@
+import type { JSX } from 'solid-js'
+import { Show, splitProps } from 'solid-js'
+import { Center, styled } from 'styled-system/jsx'
+import { Spinner } from './spinner'
+import { Button as StyledButton, type ButtonProps as StyledButtonProps } from './styled/button'
+
+interface ButtonLoadingProps {
+  loading?: boolean
+  loadingText?: JSX.Element
+}
+
+export interface ButtonProps extends StyledButtonProps, ButtonLoadingProps {}
+
+export const Button = (props: ButtonProps) => {
+  const [localProps, rest] = splitProps(props, ['loading', 'disabled', 'loadingText', 'children'])
+  const trulyDisabled = () => localProps.loading || localProps.disabled
+
+  return (
+    <StyledButton disabled={trulyDisabled()} {...rest}>
+      <Show
+        when={localProps.loading && !localProps.loadingText}
+        fallback={localProps.loadingText || localProps.children}
+      >
+        <>
+          <ButtonSpinner />
+          <styled.span opacity={0}>{localProps.children}</styled.span>
+        </>
+      </Show>
+    </StyledButton>
+  )
+}
+
+const ButtonSpinner = () => (
+  <Center inline position="absolute" transform="translate(-50%, -50%)" top="50%" insetStart="50%">
+    <Spinner borderColor="currentColor" />
+  </Center>
+)
--- a/src/common/components/ui/card.tsx
+++ b/src/common/components/ui/card.tsx
@ -0,0 +1 @@
+export * as Card from './styled/card'
--- a/src/common/components/ui/checkbox.tsx
+++ b/src/common/components/ui/checkbox.tsx
@ -0,0 +1,51 @@
+import { Show, children } from 'solid-js'
+import * as StyledCheckbox from './styled/checkbox'
+
+export interface CheckboxProps extends StyledCheckbox.RootProps {}
+
+export const Checkbox = (props: CheckboxProps) => {
+  const getChildren = children(() => props.children)
+
+  return (
+    <StyledCheckbox.Root {...props}>
+      <StyledCheckbox.Control>
+        <StyledCheckbox.Indicator>
+          <CheckIcon />
+        </StyledCheckbox.Indicator>
+        <StyledCheckbox.Indicator indeterminate>
+          <MinusIcon />
+        </StyledCheckbox.Indicator>
+      </StyledCheckbox.Control>
+      <Show when={getChildren()}>
+        <StyledCheckbox.Label>{getChildren()}</StyledCheckbox.Label>
+      </Show>
+      <StyledCheckbox.HiddenInput />
+    </StyledCheckbox.Root>
+  )
+}
+
+const CheckIcon = () => (
+  <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <title>Check Icon</title>
+    <path
+      d="M11.6666 3.5L5.24992 9.91667L2.33325 7"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+)
+
+const MinusIcon = () => (
+  <svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <title>Minus Icon</title>
+    <path
+      d="M2.91675 7H11.0834"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+)
--- a/src/common/components/ui/code.tsx
+++ b/src/common/components/ui/code.tsx
@ -0,0 +1 @@
+export { Code, type CodeProps } from './styled/code'
--- a/src/common/components/ui/color-picker.tsx
+++ b/src/common/components/ui/color-picker.tsx
@ -0,0 +1 @@
+export * as ColorPicker from './styled/color-picker'
--- a/src/common/components/ui/combobox.tsx
+++ b/src/common/components/ui/combobox.tsx
@ -0,0 +1 @@
+export * as Combobox from './styled/combobox'
--- a/src/common/components/ui/date-picker.tsx
+++ b/src/common/components/ui/date-picker.tsx
@ -0,0 +1 @@
+export * as DatePicker from './styled/date-picker'
--- a/src/common/components/ui/dialog.tsx
+++ b/src/common/components/ui/dialog.tsx
@ -0,0 +1 @@
+export * as Dialog from './styled/dialog'
--- a/src/common/components/ui/drawer.tsx
+++ b/src/common/components/ui/drawer.tsx
@ -0,0 +1 @@
+export * as Drawer from './styled/drawer'
--- a/src/common/components/ui/editable.tsx
+++ b/src/common/components/ui/editable.tsx
@ -0,0 +1 @@
+export * as Editable from './styled/editable'
--- a/src/common/components/ui/field.tsx
+++ b/src/common/components/ui/field.tsx
@ -0,0 +1 @@
+export * as Field from './styled/field'
--- a/src/common/components/ui/file-upload.tsx
+++ b/src/common/components/ui/file-upload.tsx
@ -0,0 +1 @@
+export * as FileUpload from './styled/file-upload'
--- a/src/common/components/ui/heading.tsx
+++ b/src/common/components/ui/heading.tsx
@ -0,0 +1 @@
+export { Heading, type HeadingProps } from './styled/heading'
--- a/src/common/components/ui/icon-button.tsx
+++ b/src/common/components/ui/icon-button.tsx
@ -0,0 +1 @@
+export { IconButton, type IconButtonProps } from './styled/icon-button'
--- a/src/common/components/ui/icon.tsx
+++ b/src/common/components/ui/icon.tsx
@ -0,0 +1 @@
+export { Icon, type IconProps } from './styled/icon'
--- a/src/common/components/ui/input.tsx
+++ b/src/common/components/ui/input.tsx
@ -0,0 +1 @@
+export { Input, type InputProps } from './styled/input'
--- a/src/common/components/ui/kbd.tsx
+++ b/src/common/components/ui/kbd.tsx
@ -0,0 +1 @@
+export { Kbd, type KbdProps } from './styled/kbd'
--- a/src/common/components/ui/link.tsx
+++ b/src/common/components/ui/link.tsx
@ -0,0 +1 @@
+export { Link, type LinkProps } from './styled/link'
--- a/src/common/components/ui/menu.tsx
+++ b/src/common/components/ui/menu.tsx
@ -0,0 +1 @@
+export * as Menu from './styled/menu'
--- a/src/common/components/ui/number-input.tsx
+++ b/src/common/components/ui/number-input.tsx
@ -0,0 +1,53 @@
+import { Show, children } from 'solid-js'
+import * as StyledNumberInput from './styled/number-input'
+
+export interface NumberInputProps extends StyledNumberInput.RootProps {}
+
+export const NumberInput = (props: NumberInputProps) => {
+  const getChildren = children(() => props.children)
+
+  return (
+    <StyledNumberInput.Root {...props}>
+      <Show when={getChildren()}>
+        <StyledNumberInput.Label>{getChildren()}</StyledNumberInput.Label>
+      </Show>
+      <StyledNumberInput.Control>
+        <StyledNumberInput.Input />
+        <StyledNumberInput.IncrementTrigger>
+          <ChevronUpIcon />
+        </StyledNumberInput.IncrementTrigger>
+        <StyledNumberInput.DecrementTrigger>
+          <ChevronDownIcon />
+        </StyledNumberInput.DecrementTrigger>
+      </StyledNumberInput.Control>
+    </StyledNumberInput.Root>
+  )
+}
+
+const ChevronUpIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <title>Chevron Up Icon</title>
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="m18 15l-6-6l-6 6"
+    />
+  </svg>
+)
+
+const ChevronDownIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <title>Chevron Down Icon</title>
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="m6 9l6 6l6-6"
+    />
+  </svg>
+)
--- a/src/common/components/ui/pagination.tsx
+++ b/src/common/components/ui/pagination.tsx
@ -0,0 +1,73 @@
+import { For } from 'solid-js'
+import { Button } from './button'
+import { IconButton } from './icon-button'
+import * as StyledPagination from './styled/pagination'
+
+export interface PaginationProps extends StyledPagination.RootProps {}
+
+export const Pagination = (props: PaginationProps) => {
+  return (
+    <StyledPagination.Root {...props}>
+      <StyledPagination.PrevTrigger
+        asChild={(props) => (
+          <IconButton {...props} variant="ghost" aria-label="Next Page">
+            <ChevronLeftIcon />
+          </IconButton>
+        )}
+      />
+      <StyledPagination.Context>
+        {(pagiation) => (
+          <For each={pagiation().pages}>
+            {(page, index) =>
+              page.type === 'page' ? (
+                <StyledPagination.Item
+                  {...page}
+                  asChild={(props) => <Button {...props} variant="outline" />}
+                >
+                  {page.value}
+                </StyledPagination.Item>
+              ) : (
+                <StyledPagination.Ellipsis index={index()}>&#8230;</StyledPagination.Ellipsis>
+              )
+            }
+          </For>
+        )}
+      </StyledPagination.Context>
+      <StyledPagination.NextTrigger
+        asChild={(props) => (
+          <IconButton {...props} variant="ghost" aria-label="Next Page">
+            <ChevronRightIcon />
+          </IconButton>
+        )}
+      />
+    </StyledPagination.Root>
+  )
+}
+
+const ChevronLeftIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <title>Chevron Left Icon</title>
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="m15 18l-6-6l6-6"
+    />
+  </svg>
+)
+
+const ChevronRightIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <title>Chevron Right Icon</title>
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="m9 18l6-6l-6-6"
+    />
+  </svg>
+)
--- a/src/common/components/ui/pin-input.tsx
+++ b/src/common/components/ui/pin-input.tsx
@ -0,0 +1,34 @@
+import { Index, Show, children } from 'solid-js'
+import { Input } from './input'
+import * as StyledPinInput from './styled/pin-input'
+
+export interface PinInputProps extends StyledPinInput.RootProps {
+  /**
+   * The number of inputs to render.
+   * @default 4
+   */
+  length?: number
+}
+
+export const PinInput = (props: PinInputProps) => {
+  const getChildren = children(() => props.children)
+
+  return (
+    <StyledPinInput.Root {...props}>
+      <Show when={getChildren()}>
+        <StyledPinInput.Label>{getChildren()}</StyledPinInput.Label>
+      </Show>
+      <StyledPinInput.Control>
+        <Index each={Array.from({ length: props.length ?? 4 }, (_, index) => index)}>
+          {(index) => (
+            <StyledPinInput.Input
+              index={index()}
+              asChild={(inputProps) => <Input {...inputProps()} size={props.size} />}
+            />
+          )}
+        </Index>
+      </StyledPinInput.Control>
+      <StyledPinInput.HiddenInput />
+    </StyledPinInput.Root>
+  )
+}
--- a/src/common/components/ui/popover.tsx
+++ b/src/common/components/ui/popover.tsx
@ -0,0 +1 @@
+export * as Popover from './styled/popover'
--- a/src/common/components/ui/progress.tsx
+++ b/src/common/components/ui/progress.tsx
@ -0,0 +1,38 @@
+import { Show, children, splitProps } from 'solid-js'
+import * as StyledProgress from './styled/progress'
+
+export interface ProgressProps extends StyledProgress.RootProps {
+  /**
+   * The type of progress to render.
+   * @default linear
+   */
+  type?: 'linear' | 'circular'
+}
+
+export const Progress = (props: ProgressProps) => {
+  const [localProps, rootProps] = splitProps(props, ['children', 'type'])
+  const getChildren = children(() => localProps.children)
+
+  return (
+    <StyledProgress.Root {...rootProps}>
+      <Show when={getChildren()}>
+        <StyledProgress.Label>{getChildren()}</StyledProgress.Label>
+      </Show>
+      <Show
+        when={localProps.type === 'circular'}
+        fallback={
+          <StyledProgress.Track>
+            <StyledProgress.Range />
+          </StyledProgress.Track>
+        }
+      >
+        <StyledProgress.Circle>
+          <StyledProgress.CircleTrack />
+          <StyledProgress.CircleRange />
+          <StyledProgress.ValueText />
+        </StyledProgress.Circle>
+      </Show>
+      <StyledProgress.ValueText />
+    </StyledProgress.Root>
+  )
+}
--- a/src/common/components/ui/radio-button-group.tsx
+++ b/src/common/components/ui/radio-button-group.tsx
@ -0,0 +1 @@
+export * as RadioButtonGroup from './styled/radio-button-group'
--- a/src/common/components/ui/radio-group.tsx
+++ b/src/common/components/ui/radio-group.tsx
@ -0,0 +1 @@
+export * as RadioGroup from './styled/radio-group'
--- a/src/common/components/ui/rating-group.tsx
+++ b/src/common/components/ui/rating-group.tsx
@ -0,0 +1,66 @@
+import { Index, Show, children } from 'solid-js'
+import * as StyledRatingGroup from './styled/rating-group'
+
+export interface RatingGroupProps extends StyledRatingGroup.RootProps {}
+
+export const RatingGroup = (props: RatingGroupProps) => {
+  const getChildren = children(() => props.children)
+
+  return (
+    <StyledRatingGroup.Root {...props}>
+      <Show when={getChildren()}>
+        <StyledRatingGroup.Label>{getChildren()}</StyledRatingGroup.Label>
+      </Show>
+      <StyledRatingGroup.Control>
+        <StyledRatingGroup.Context>
+          {(context) => (
+            <Index each={context().items}>
+              {(index) => (
+                <StyledRatingGroup.Item index={index()}>
+                  <StyledRatingGroup.ItemContext>
+                    {(item) => (
+                      <Show when={item().highlighted} fallback={<StarIcon />}>
+                        <StarIcon half={item().half} />
+                      </Show>
+                    )}
+                  </StyledRatingGroup.ItemContext>
+                </StyledRatingGroup.Item>
+              )}
+            </Index>
+          )}
+        </StyledRatingGroup.Context>
+      </StyledRatingGroup.Control>
+      <StyledRatingGroup.HiddenInput />
+    </StyledRatingGroup.Root>
+  )
+}
+
+interface Props {
+  half?: boolean
+}
+
+const StarIcon = (props: Props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="inherit"
+    stroke="inherit"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <title>Star Icon</title>
+    <defs>
+      <linearGradient id="half">
+        <stop offset="50%" stop-color="var(--colors-color-palette-default)" />
+        <stop offset="50%" stop-color="var(--colors-bg-emphasized)" />
+      </linearGradient>
+    </defs>
+    <polygon
+      fill={props.half ? 'url(#half)' : 'inherit'}
+      points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
+    />
+  </svg>
+)
--- a/src/common/components/ui/segment-group.tsx
+++ b/src/common/components/ui/segment-group.tsx
@ -0,0 +1 @@
+export * as SegmentGroup from './styled/segment-group'
--- a/src/common/components/ui/select.tsx
+++ b/src/common/components/ui/select.tsx
@ -0,0 +1 @@
+export * as Select from './styled/select'
--- a/src/common/components/ui/slider.tsx
+++ b/src/common/components/ui/slider.tsx
@ -0,0 +1,49 @@
+import { Index, type JSX, Show, children, splitProps } from 'solid-js'
+import * as StyledSlider from './styled/slider'
+
+export interface SliderProps extends StyledSlider.RootProps {
+  marks?: {
+    value: number
+    label?: JSX.Element
+  }[]
+}
+
+export const Slider = (props: SliderProps) => {
+  const [localProps, rootProps] = splitProps(props, ['children', 'marks'])
+  const getChildren = children(() => localProps.children)
+
+  return (
+    <StyledSlider.Root {...rootProps}>
+      <StyledSlider.Context>
+        {(slider) => (
+          <>
+            <Show when={getChildren()}>
+              <StyledSlider.Label>{getChildren()}</StyledSlider.Label>
+            </Show>
+            <StyledSlider.Control>
+              <StyledSlider.Track>
+                <StyledSlider.Range />
+              </StyledSlider.Track>
+              <Index each={slider().value}>
+                {(_, index) => (
+                  <StyledSlider.Thumb index={index}>
+                    <StyledSlider.HiddenInput />
+                  </StyledSlider.Thumb>
+                )}
+              </Index>
+            </StyledSlider.Control>
+            <Show when={localProps.marks}>
+              <StyledSlider.MarkerGroup>
+                <Index each={localProps.marks}>
+                  {(mark) => (
+                    <StyledSlider.Marker value={mark().value}>{mark().label}</StyledSlider.Marker>
+                  )}
+                </Index>
+              </StyledSlider.MarkerGroup>
+            </Show>
+          </>
+        )}
+      </StyledSlider.Context>
+    </StyledSlider.Root>
+  )
+}
--- a/src/common/components/ui/spinner.tsx
+++ b/src/common/components/ui/spinner.tsx
@ -0,0 +1,23 @@
+import { mergeProps, splitProps } from 'solid-js'
+import { styled } from 'styled-system/jsx'
+import { Spinner as StyledSpinner, type SpinnerProps as StyledSpinnerProps } from './styled/spinner'
+
+export interface SpinnerProps extends StyledSpinnerProps {
+  /**
+   * For accessibility, it is important to add a fallback loading text.
+   * This text will be visible to screen readers.
+   * @default "Loading..."
+   */
+  label?: string
+}
+
+export const Spinner = (props: SpinnerProps) => {
+  const [_localProps, rootProps] = splitProps(props, ['label'])
+  const localProps = mergeProps({ label: 'Loading...' }, _localProps)
+
+  return (
+    <StyledSpinner borderBottomColor="transparent" borderLeftColor="transparent" {...rootProps}>
+      <styled.span srOnly>{localProps.label}</styled.span>
+    </StyledSpinner>
+  )
+}
--- a/src/common/components/ui/styled/avatar.tsx
+++ b/src/common/components/ui/styled/avatar.tsx
@ -0,0 +1,30 @@
+import { type Assign, Avatar } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type AvatarVariantProps, avatar } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(avatar)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, Avatar.RootProviderBaseProps>, AvatarVariantProps>
+>(Avatar.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, Avatar.RootBaseProps>, AvatarVariantProps>
+>(Avatar.Root, 'root')
+
+export const Fallback = withContext<Assign<HTMLStyledProps<'span'>, Avatar.FallbackBaseProps>>(
+  Avatar.Fallback,
+  'fallback',
+)
+
+export const Image = withContext<Assign<HTMLStyledProps<'img'>, Avatar.ImageBaseProps>>(
+  Avatar.Image,
+  'image',
+)
+
+export { AvatarContext as Context } from '@ark-ui/solid'
+export type { AvatarStatusChangeDetails as StatusChangeDetails } from '@ark-ui/solid'
--- a/src/common/components/ui/styled/badge.tsx
+++ b/src/common/components/ui/styled/badge.tsx
@ -0,0 +1,7 @@
+import { ark } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { styled } from 'styled-system/jsx'
+import { badge } from 'styled-system/recipes'
+
+export type BadgeProps = ComponentProps<typeof Badge>
+export const Badge = styled(ark.div, badge)
--- a/src/common/components/ui/styled/button.tsx
+++ b/src/common/components/ui/styled/button.tsx
@ -0,0 +1,7 @@
+import { ark } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { styled } from 'styled-system/jsx'
+import { button } from 'styled-system/recipes'
+
+export type ButtonProps = ComponentProps<typeof Button>
+export const Button = styled(ark.button, button)
--- a/src/common/components/ui/styled/card.tsx
+++ b/src/common/components/ui/styled/card.tsx
@ -0,0 +1,38 @@
+import { type Assign, type PolymorphicProps, ark } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { card } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(card)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<Assign<HTMLStyledProps<'div'>, PolymorphicProps<'div'>>>(
+  ark.div,
+  'root',
+)
+
+export const Body = withContext<Assign<HTMLStyledProps<'div'>, PolymorphicProps<'div'>>>(
+  ark.div,
+  'body',
+)
+
+export const Description = withContext<Assign<HTMLStyledProps<'div'>, PolymorphicProps<'div'>>>(
+  ark.div,
+  'description',
+)
+
+export const Footer = withContext<Assign<HTMLStyledProps<'div'>, PolymorphicProps<'div'>>>(
+  ark.div,
+  'footer',
+)
+
+export const Header = withContext<Assign<HTMLStyledProps<'div'>, PolymorphicProps<'div'>>>(
+  ark.div,
+  'header',
+)
+
+export const Title = withContext<Assign<HTMLStyledProps<'h3'>, PolymorphicProps<'h3'>>>(
+  ark.h3,
+  'title',
+)
--- a/src/common/components/ui/styled/checkbox.tsx
+++ b/src/common/components/ui/styled/checkbox.tsx
@ -0,0 +1,42 @@
+import { type Assign, Checkbox } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type CheckboxVariantProps, checkbox } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(checkbox)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<Assign<HTMLStyledProps<'label'>, Checkbox.RootProviderBaseProps>, CheckboxVariantProps>
+>(Checkbox.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'label'>, Checkbox.RootBaseProps>, CheckboxVariantProps>
+>(Checkbox.Root, 'root')
+
+export const Control = withContext<Assign<HTMLStyledProps<'div'>, Checkbox.ControlBaseProps>>(
+  Checkbox.Control,
+  'control',
+)
+
+export const Group = withContext<Assign<HTMLStyledProps<'div'>, Checkbox.GroupBaseProps>>(
+  Checkbox.Group,
+  'group',
+)
+
+export const Indicator = withContext<Assign<HTMLStyledProps<'div'>, Checkbox.IndicatorBaseProps>>(
+  Checkbox.Indicator,
+  'indicator',
+)
+
+export const Label = withContext<Assign<HTMLStyledProps<'span'>, Checkbox.LabelBaseProps>>(
+  Checkbox.Label,
+  'label',
+)
+
+export {
+  CheckboxContext as Context,
+  CheckboxHiddenInput as HiddenInput,
+} from '@ark-ui/solid'
--- a/src/common/components/ui/styled/code.tsx
+++ b/src/common/components/ui/styled/code.tsx
@ -0,0 +1,7 @@
+import { ark } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { styled } from 'styled-system/jsx'
+import { code } from 'styled-system/recipes'
+
+export type CodeProps = ComponentProps<typeof Code>
+export const Code = styled(ark.code, code)
--- a/src/common/components/ui/styled/color-picker.tsx
+++ b/src/common/components/ui/styled/color-picker.tsx
@ -0,0 +1,129 @@
+import { type Assign, ColorPicker } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type ColorPickerVariantProps, colorPicker } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(colorPicker)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, ColorPicker.RootProviderBaseProps>, ColorPickerVariantProps>
+>(ColorPicker.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, ColorPicker.RootBaseProps>, ColorPickerVariantProps>
+>(ColorPicker.Root, 'root')
+
+export const AreaBackground = withContext<
+  Assign<HTMLStyledProps<'div'>, ColorPicker.AreaBackgroundBaseProps>
+>(ColorPicker.AreaBackground, 'areaBackground')
+
+export const Area = withContext<Assign<HTMLStyledProps<'div'>, ColorPicker.AreaBaseProps>>(
+  ColorPicker.Area,
+  'area',
+)
+
+export const AreaThumb = withContext<
+  Assign<HTMLStyledProps<'div'>, ColorPicker.AreaThumbBaseProps>
+>(ColorPicker.AreaThumb, 'areaThumb')
+
+export const ChannelInput = withContext<
+  Assign<HTMLStyledProps<'input'>, ColorPicker.ChannelInputBaseProps>
+>(ColorPicker.ChannelInput, 'channelInput')
+
+export const ChannelSliderLabel = withContext<
+  Assign<HTMLStyledProps<'label'>, ColorPicker.ChannelSliderLabelBaseProps>
+>(ColorPicker.ChannelSliderLabel, 'channelSliderLabel')
+
+export const ChannelSlider = withContext<
+  Assign<HTMLStyledProps<'div'>, ColorPicker.ChannelSliderBaseProps>
+>(ColorPicker.ChannelSlider, 'channelSlider')
+
+export const ChannelSliderThumb = withContext<
+  Assign<HTMLStyledProps<'div'>, ColorPicker.ChannelSliderThumbBaseProps>
+>(ColorPicker.ChannelSliderThumb, 'channelSliderThumb')
+
+export const ChannelSliderTrack = withContext<
+  Assign<HTMLStyledProps<'div'>, ColorPicker.ChannelSliderTrackBaseProps>
+>(ColorPicker.ChannelSliderTrack, 'channelSliderTrack')
+
+export const ChannelSliderValueText = withContext<
+  Assign<HTMLStyledProps<'span'>, ColorPicker.ChannelSliderValueTextBaseProps>
+>(ColorPicker.ChannelSliderValueText, 'channelSliderValueText')
+
+export const Content = withContext<Assign<HTMLStyledProps<'div'>, ColorPicker.ContentBaseProps>>(
+  ColorPicker.Content,
+  'content',
+)
+
+export const Control = withContext<Assign<HTMLStyledProps<'div'>, ColorPicker.ControlBaseProps>>(
+  ColorPicker.Control,
+  'control',
+)
+
+export const EyeDropperTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, ColorPicker.EyeDropperTriggerBaseProps>
+>(ColorPicker.EyeDropperTrigger, 'eyeDropperTrigger')
+
+export const FormatSelect = withContext<
+  Assign<HTMLStyledProps<'select'>, ColorPicker.FormatSelectBaseProps>
+>(ColorPicker.FormatSelect, 'formatSelect')
+
+export const FormatTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, ColorPicker.FormatTriggerBaseProps>
+>(ColorPicker.FormatTrigger, 'formatTrigger')
+
+export const Label = withContext<Assign<HTMLStyledProps<'label'>, ColorPicker.LabelBaseProps>>(
+  ColorPicker.Label,
+  'label',
+)
+
+export const Positioner = withContext<
+  Assign<HTMLStyledProps<'div'>, ColorPicker.PositionerBaseProps>
+>(ColorPicker.Positioner, 'positioner')
+
+export const SwatchGroup = withContext<
+  Assign<HTMLStyledProps<'div'>, ColorPicker.SwatchGroupBaseProps>
+>(ColorPicker.SwatchGroup, 'swatchGroup')
+
+export const SwatchIndicator = withContext<
+  Assign<HTMLStyledProps<'div'>, ColorPicker.SwatchIndicatorBaseProps>
+>(ColorPicker.SwatchIndicator, 'swatchIndicator')
+
+export const Swatch = withContext<Assign<HTMLStyledProps<'div'>, ColorPicker.SwatchBaseProps>>(
+  ColorPicker.Swatch,
+  'swatch',
+)
+
+export const SwatchTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, ColorPicker.SwatchTriggerBaseProps>
+>(ColorPicker.SwatchTrigger, 'swatchTrigger')
+
+export const TransparencyGrid = withContext<
+  Assign<HTMLStyledProps<'div'>, ColorPicker.TransparencyGridBaseProps>
+>(ColorPicker.TransparencyGrid, 'transparencyGrid')
+
+export const Trigger = withContext<Assign<HTMLStyledProps<'button'>, ColorPicker.TriggerBaseProps>>(
+  ColorPicker.Trigger,
+  'trigger',
+)
+
+export const ValueSwatch = withContext<
+  Assign<HTMLStyledProps<'div'>, ColorPicker.ValueSwatchBaseProps>
+>(ColorPicker.ValueSwatch, 'swatch')
+
+export const ValueText = withContext<
+  Assign<HTMLStyledProps<'span'>, ColorPicker.ValueTextBaseProps>
+>(ColorPicker.ValueText, 'valueText')
+
+export const View = withContext<Assign<HTMLStyledProps<'div'>, ColorPicker.ViewBaseProps>>(
+  ColorPicker.View,
+  'view',
+)
+
+export {
+  ColorPickerContext as Context,
+  ColorPickerHiddenInput as HiddenInput,
+} from '@ark-ui/solid'
--- a/src/common/components/ui/styled/combobox.tsx
+++ b/src/common/components/ui/styled/combobox.tsx
@ -0,0 +1,94 @@
+import { type Assign, Combobox } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type ComboboxVariantProps, combobox } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withRootProvider, withContext } = createStyleContext(combobox)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withRootProvider<
+  Assign<
+    Assign<HTMLStyledProps<'div'>, Combobox.RootProviderBaseProps<Combobox.CollectionItem>>,
+    ComboboxVariantProps
+  >
+>(Combobox.RootProvider)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withRootProvider<
+  Assign<
+    Assign<HTMLStyledProps<'div'>, Combobox.RootBaseProps<Combobox.CollectionItem>>,
+    ComboboxVariantProps
+  >
+>(Combobox.Root)
+
+export const ClearTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, Combobox.ClearTriggerBaseProps>
+>(Combobox.ClearTrigger, 'clearTrigger')
+
+export const Content = withContext<Assign<HTMLStyledProps<'div'>, Combobox.ContentBaseProps>>(
+  Combobox.Content,
+  'content',
+)
+
+export const Control = withContext<Assign<HTMLStyledProps<'div'>, Combobox.ControlBaseProps>>(
+  Combobox.Control,
+  'control',
+)
+
+export const Input = withContext<Assign<HTMLStyledProps<'input'>, Combobox.InputBaseProps>>(
+  Combobox.Input,
+  'input',
+)
+
+export const ItemGroupLabel = withContext<
+  Assign<HTMLStyledProps<'div'>, Combobox.ItemGroupLabelBaseProps>
+>(Combobox.ItemGroupLabel, 'itemGroupLabel')
+
+export const ItemGroup = withContext<Assign<HTMLStyledProps<'div'>, Combobox.ItemGroupBaseProps>>(
+  Combobox.ItemGroup,
+  'itemGroup',
+)
+
+export const ItemIndicator = withContext<
+  Assign<HTMLStyledProps<'div'>, Combobox.ItemIndicatorBaseProps>
+>(Combobox.ItemIndicator, 'itemIndicator')
+
+export const Item = withContext<Assign<HTMLStyledProps<'div'>, Combobox.ItemBaseProps>>(
+  Combobox.Item,
+  'item',
+)
+
+export const ItemText = withContext<Assign<HTMLStyledProps<'span'>, Combobox.ItemTextBaseProps>>(
+  Combobox.ItemText,
+  'itemText',
+)
+
+export const Label = withContext<Assign<HTMLStyledProps<'label'>, Combobox.LabelBaseProps>>(
+  Combobox.Label,
+  'label',
+)
+
+export const List = withContext<Assign<HTMLStyledProps<'div'>, Combobox.ListBaseProps>>(
+  Combobox.List,
+  'list',
+)
+
+export const Positioner = withContext<Assign<HTMLStyledProps<'div'>, Combobox.PositionerBaseProps>>(
+  Combobox.Positioner,
+  'positioner',
+)
+
+export const Trigger = withContext<Assign<HTMLStyledProps<'button'>, Combobox.TriggerBaseProps>>(
+  Combobox.Trigger,
+  'trigger',
+)
+
+export { ComboboxContext as Context } from '@ark-ui/solid'
+
+export type {
+  ComboboxHighlightChangeDetails as HighlightChangeDetails,
+  ComboboxInputValueChangeDetails as InputValueChangeDetails,
+  ComboboxOpenChangeDetails as OpenChangeDetails,
+  ComboboxValueChangeDetails as ValueChangeDetails,
+} from '@ark-ui/react/combobox'
--- a/src/common/components/ui/styled/date-picker.tsx
+++ b/src/common/components/ui/styled/date-picker.tsx
@ -0,0 +1,121 @@
+import { type Assign, DatePicker } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type DatePickerVariantProps, datePicker } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(datePicker)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, DatePicker.RootProviderBaseProps>, DatePickerVariantProps>
+>(DatePicker.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, DatePicker.RootBaseProps>, DatePickerVariantProps>
+>(DatePicker.Root, 'root')
+
+export const ClearTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, DatePicker.ClearTriggerBaseProps>
+>(DatePicker.ClearTrigger, 'clearTrigger')
+
+export const Content = withContext<Assign<HTMLStyledProps<'div'>, DatePicker.ContentBaseProps>>(
+  DatePicker.Content,
+  'content',
+)
+
+export const Control = withContext<Assign<HTMLStyledProps<'div'>, DatePicker.ControlBaseProps>>(
+  DatePicker.Control,
+  'control',
+)
+
+export const Input = withContext<Assign<HTMLStyledProps<'input'>, DatePicker.InputBaseProps>>(
+  DatePicker.Input,
+  'input',
+)
+
+export const Label = withContext<Assign<HTMLStyledProps<'label'>, DatePicker.LabelBaseProps>>(
+  DatePicker.Label,
+  'label',
+)
+
+export const MonthSelect = withContext<
+  Assign<HTMLStyledProps<'select'>, DatePicker.MonthSelectBaseProps>
+>(DatePicker.MonthSelect, 'monthSelect')
+
+export const NextTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, DatePicker.NextTriggerBaseProps>
+>(DatePicker.NextTrigger, 'nextTrigger')
+
+export const Positioner = withContext<
+  Assign<HTMLStyledProps<'div'>, DatePicker.PositionerBaseProps>
+>(DatePicker.Positioner, 'positioner')
+
+export const PresetTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, DatePicker.PresetTriggerBaseProps>
+>(DatePicker.PresetTrigger, 'presetTrigger')
+
+export const PrevTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, DatePicker.PrevTriggerBaseProps>
+>(DatePicker.PrevTrigger, 'prevTrigger')
+
+export const RangeText = withContext<Assign<HTMLStyledProps<'div'>, DatePicker.RangeTextBaseProps>>(
+  DatePicker.RangeText,
+  'rangeText',
+)
+
+export const TableBody = withContext<
+  Assign<HTMLStyledProps<'tbody'>, DatePicker.TableBodyBaseProps>
+>(DatePicker.TableBody, 'tableBody')
+
+export const TableCell = withContext<Assign<HTMLStyledProps<'td'>, DatePicker.TableCellBaseProps>>(
+  DatePicker.TableCell,
+  'tableCell',
+)
+
+export const TableCellTrigger = withContext<
+  Assign<HTMLStyledProps<'div'>, DatePicker.TableCellTriggerBaseProps>
+>(DatePicker.TableCellTrigger, 'tableCellTrigger')
+
+export const TableHead = withContext<
+  Assign<HTMLStyledProps<'thead'>, DatePicker.TableHeadBaseProps>
+>(DatePicker.TableHead, 'tableHead')
+
+export const TableHeader = withContext<
+  Assign<HTMLStyledProps<'th'>, DatePicker.TableHeaderBaseProps>
+>(DatePicker.TableHeader, 'tableHeader')
+
+export const Table = withContext<Assign<HTMLStyledProps<'table'>, DatePicker.TableBaseProps>>(
+  DatePicker.Table,
+  'table',
+)
+
+export const TableRow = withContext<Assign<HTMLStyledProps<'tr'>, DatePicker.TableRowBaseProps>>(
+  DatePicker.TableRow,
+  'tableRow',
+)
+
+export const Trigger = withContext<Assign<HTMLStyledProps<'button'>, DatePicker.TriggerBaseProps>>(
+  DatePicker.Trigger,
+  'trigger',
+)
+
+export const ViewControl = withContext<
+  Assign<HTMLStyledProps<'div'>, DatePicker.ViewControlBaseProps>
+>(DatePicker.ViewControl, 'viewControl')
+
+export const View = withContext<Assign<HTMLStyledProps<'div'>, DatePicker.ViewBaseProps>>(
+  DatePicker.View,
+  'view',
+)
+
+export const ViewTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, DatePicker.ViewTriggerBaseProps>
+>(DatePicker.ViewTrigger, 'viewTrigger')
+
+export const YearSelect = withContext<
+  Assign<HTMLStyledProps<'select'>, DatePicker.YearSelectBaseProps>
+>(DatePicker.YearSelect, 'yearSelect')
+
+export { DatePickerContext as Context } from '@ark-ui/solid'
--- a/src/common/components/ui/styled/dialog.tsx
+++ b/src/common/components/ui/styled/dialog.tsx
@ -0,0 +1,51 @@
+import { type Assign, Dialog } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type DialogVariantProps, dialog } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withRootProvider, withContext } = createStyleContext(dialog)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withRootProvider<Assign<Dialog.RootProviderProps, DialogVariantProps>>(
+  Dialog.RootProvider,
+)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withRootProvider<Assign<Dialog.RootProps, DialogVariantProps>>(Dialog.Root)
+
+export const Backdrop = withContext<Assign<HTMLStyledProps<'div'>, Dialog.BackdropBaseProps>>(
+  Dialog.Backdrop,
+  'backdrop',
+)
+
+export const CloseTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, Dialog.CloseTriggerBaseProps>
+>(Dialog.CloseTrigger, 'closeTrigger')
+
+export const Content = withContext<Assign<HTMLStyledProps<'div'>, Dialog.ContentBaseProps>>(
+  Dialog.Content,
+  'content',
+)
+
+export const Description = withContext<Assign<HTMLStyledProps<'div'>, Dialog.DescriptionBaseProps>>(
+  Dialog.Description,
+  'description',
+)
+
+export const Positioner = withContext<Assign<HTMLStyledProps<'div'>, Dialog.PositionerBaseProps>>(
+  Dialog.Positioner,
+  'positioner',
+)
+
+export const Title = withContext<Assign<HTMLStyledProps<'h2'>, Dialog.TitleBaseProps>>(
+  Dialog.Title,
+  'title',
+)
+
+export const Trigger = withContext<Assign<HTMLStyledProps<'button'>, Dialog.TriggerBaseProps>>(
+  Dialog.Trigger,
+  'trigger',
+)
+
+export { DialogContext as Context } from '@ark-ui/solid'
--- a/src/common/components/ui/styled/drawer.tsx
+++ b/src/common/components/ui/styled/drawer.tsx
@ -0,0 +1,74 @@
+import { type Assign, Dialog, type PolymorphicProps, ark } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { drawer } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withRootProvider, withContext } = createStyleContext(drawer)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withRootProvider<Dialog.RootProviderProps>(Dialog.RootProvider)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withRootProvider<Dialog.RootProps>(Dialog.Root)
+
+export type BackdropProps = ComponentProps<typeof Backdrop>
+export const Backdrop = withContext<Assign<HTMLStyledProps<'div'>, Dialog.BackdropProps>>(
+  Dialog.Backdrop,
+  'backdrop',
+)
+
+export type CloseTriggerProps = ComponentProps<typeof CloseTrigger>
+export const CloseTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, Dialog.CloseTriggerProps>
+>(Dialog.CloseTrigger, 'closeTrigger')
+
+export type ContentProps = ComponentProps<typeof Content>
+export const Content = withContext<Assign<HTMLStyledProps<'div'>, Dialog.ContentProps>>(
+  Dialog.Content,
+  'content',
+)
+
+export type DescriptionProps = ComponentProps<typeof Description>
+export const Description = withContext<Assign<HTMLStyledProps<'div'>, Dialog.DescriptionProps>>(
+  Dialog.Description,
+  'description',
+)
+
+export type PositionerProps = ComponentProps<typeof Positioner>
+export const Positioner = withContext<Assign<HTMLStyledProps<'div'>, Dialog.PositionerProps>>(
+  Dialog.Positioner,
+  'positioner',
+)
+
+export type TitleProps = ComponentProps<typeof Title>
+export const Title = withContext<Assign<HTMLStyledProps<'h2'>, Dialog.TitleProps>>(
+  Dialog.Title,
+  'title',
+)
+
+export type TriggerProps = ComponentProps<typeof Trigger>
+export const Trigger = withContext<Assign<HTMLStyledProps<'button'>, Dialog.TriggerProps>>(
+  Dialog.Trigger,
+  'trigger',
+)
+
+export const Header = withContext<Assign<HTMLStyledProps<'div'>, PolymorphicProps<'div'>>>(
+  ark.div,
+  'header',
+)
+
+export const Body = withContext<Assign<HTMLStyledProps<'div'>, PolymorphicProps<'div'>>>(
+  ark.div,
+  'body',
+)
+
+export const Footer = withContext<Assign<HTMLStyledProps<'div'>, PolymorphicProps<'div'>>>(
+  ark.div,
+  'footer',
+)
+
+export {
+  DialogContext as Context,
+  type DialogContextProps as ContextProps,
+} from '@ark-ui/solid'
--- a/src/common/components/ui/styled/editable.tsx
+++ b/src/common/components/ui/styled/editable.tsx
@ -0,0 +1,56 @@
+import { type Assign, Editable } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type EditableVariantProps, editable } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(editable)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, Editable.RootProviderBaseProps>, EditableVariantProps>
+>(Editable.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, Editable.RootBaseProps>, EditableVariantProps>
+>(Editable.Root, 'root')
+
+export const Area = withContext<Assign<HTMLStyledProps<'div'>, Editable.AreaBaseProps>>(
+  Editable.Area,
+  'area',
+)
+
+export const CancelTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, Editable.CancelTriggerBaseProps>
+>(Editable.CancelTrigger, 'cancelTrigger')
+
+export const Control = withContext<Assign<HTMLStyledProps<'div'>, Editable.ControlBaseProps>>(
+  Editable.Control,
+  'control',
+)
+
+export const EditTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, Editable.EditTriggerBaseProps>
+>(Editable.EditTrigger, 'editTrigger')
+
+export const Input = withContext<Assign<HTMLStyledProps<'input'>, Editable.InputBaseProps>>(
+  Editable.Input,
+  'input',
+)
+
+export const Label = withContext<Assign<HTMLStyledProps<'label'>, Editable.LabelBaseProps>>(
+  Editable.Label,
+  'label',
+)
+
+export const Preview = withContext<Assign<HTMLStyledProps<'span'>, Editable.PreviewBaseProps>>(
+  Editable.Preview,
+  'preview',
+)
+
+export const SubmitTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, Editable.SubmitTriggerBaseProps>
+>(Editable.SubmitTrigger, 'submitTrigger')
+
+export { EditableContext as Context } from '@ark-ui/solid'
--- a/src/common/components/ui/styled/field.tsx
+++ b/src/common/components/ui/styled/field.tsx
@ -0,0 +1,46 @@
+import { type Assign, Field } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { styled } from 'styled-system/jsx'
+import { type FieldVariantProps, field, input, textarea } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(field)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, Field.RootProviderBaseProps>, FieldVariantProps>
+>(Field.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, Field.RootBaseProps>, FieldVariantProps>
+>(Field.Root, 'root')
+
+export const ErrorText = withContext<Assign<HTMLStyledProps<'span'>, Field.ErrorTextBaseProps>>(
+  Field.ErrorText,
+  'errorText',
+)
+
+export const HelperText = withContext<Assign<HTMLStyledProps<'span'>, Field.HelperTextBaseProps>>(
+  Field.HelperText,
+  'helperText',
+)
+
+export const Label = withContext<Assign<HTMLStyledProps<'label'>, Field.LabelBaseProps>>(
+  Field.Label,
+  'label',
+)
+
+export const Select = withContext<Assign<HTMLStyledProps<'select'>, Field.SelectBaseProps>>(
+  Field.Select,
+  'select',
+)
+
+export type InputProps = ComponentProps<typeof Input>
+export const Input = styled(Field.Input, input)
+
+export type TextareaProps = ComponentProps<typeof Textarea>
+export const Textarea = styled(Field.Textarea, textarea)
+
+export { FieldContext as Context } from '@ark-ui/solid'
--- a/src/common/components/ui/styled/file-upload.tsx
+++ b/src/common/components/ui/styled/file-upload.tsx
@ -0,0 +1,68 @@
+import { type Assign, FileUpload } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type FileUploadVariantProps, fileUpload } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(fileUpload)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, FileUpload.RootProviderBaseProps>, FileUploadVariantProps>
+>(FileUpload.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, FileUpload.RootBaseProps>, FileUploadVariantProps>
+>(FileUpload.Root, 'root')
+
+export const Dropzone = withContext<Assign<HTMLStyledProps<'div'>, FileUpload.DropzoneBaseProps>>(
+  FileUpload.Dropzone,
+  'dropzone',
+)
+
+export const ItemDeleteTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, FileUpload.ItemDeleteTriggerBaseProps>
+>(FileUpload.ItemDeleteTrigger, 'itemDeleteTrigger')
+
+export const ItemGroup = withContext<Assign<HTMLStyledProps<'ul'>, FileUpload.ItemGroupBaseProps>>(
+  FileUpload.ItemGroup,
+  'itemGroup',
+)
+
+export const ItemName = withContext<Assign<HTMLStyledProps<'div'>, FileUpload.ItemNameBaseProps>>(
+  FileUpload.ItemName,
+  'itemName',
+)
+
+export const ItemPreviewImage = withContext<
+  Assign<HTMLStyledProps<'img'>, FileUpload.ItemPreviewImageBaseProps>
+>(FileUpload.ItemPreviewImage, 'itemPreviewImage')
+
+export const ItemPreview = withContext<
+  Assign<HTMLStyledProps<'div'>, FileUpload.ItemPreviewBaseProps>
+>(FileUpload.ItemPreview, 'itemPreview')
+
+export const Item = withContext<Assign<HTMLStyledProps<'li'>, FileUpload.ItemBaseProps>>(
+  FileUpload.Item,
+  'item',
+)
+
+export const ItemSizeText = withContext<
+  Assign<HTMLStyledProps<'div'>, FileUpload.ItemSizeTextBaseProps>
+>(FileUpload.ItemSizeText, 'itemSizeText')
+
+export const Label = withContext<Assign<HTMLStyledProps<'label'>, FileUpload.LabelBaseProps>>(
+  FileUpload.Label,
+  'label',
+)
+
+export const Trigger = withContext<Assign<HTMLStyledProps<'button'>, FileUpload.TriggerBaseProps>>(
+  FileUpload.Trigger,
+  'trigger',
+)
+
+export {
+  FileUploadContext as Context,
+  FileUploadHiddenInput as HiddenInput,
+} from '@ark-ui/solid'
--- a/src/common/components/ui/styled/heading.tsx
+++ b/src/common/components/ui/styled/heading.tsx
@ -0,0 +1,11 @@
+import type { ComponentProps } from 'solid-js'
+import { styled } from 'styled-system/jsx'
+import { type TextVariantProps, text } from 'styled-system/recipes'
+import type { StyledComponent } from 'styled-system/types'
+
+type TextProps = TextVariantProps & { as?: React.ElementType }
+
+export type HeadingProps = ComponentProps<typeof Heading>
+export const Heading = styled('h2', text, {
+  defaultProps: { variant: 'heading' },
+}) as StyledComponent<'h2', TextProps>
--- a/src/common/components/ui/styled/icon-button.tsx
+++ b/src/common/components/ui/styled/icon-button.tsx
@ -0,0 +1,9 @@
+import { ark } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { styled } from 'styled-system/jsx'
+import { type ButtonVariantProps, button } from 'styled-system/recipes'
+
+export type IconButtonProps = ComponentProps<typeof IconButton>
+export const IconButton = styled(ark.button, button, {
+  defaultProps: { px: '0' } as ButtonVariantProps,
+})
--- a/src/common/components/ui/styled/icon.tsx
+++ b/src/common/components/ui/styled/icon.tsx
@ -0,0 +1,7 @@
+import { ark } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { styled } from 'styled-system/jsx'
+import { icon } from 'styled-system/recipes'
+
+export type IconProps = ComponentProps<typeof Icon>
+export const Icon = styled(ark.svg, icon)
--- a/src/common/components/ui/styled/input.tsx
+++ b/src/common/components/ui/styled/input.tsx
@ -0,0 +1,7 @@
+import { ark } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { styled } from 'styled-system/jsx'
+import { input } from 'styled-system/recipes'
+
+export type InputProps = ComponentProps<typeof Input>
+export const Input = styled(ark.input, input)
--- a/src/common/components/ui/styled/kbd.tsx
+++ b/src/common/components/ui/styled/kbd.tsx
@ -0,0 +1,7 @@
+import { ark } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { styled } from 'styled-system/jsx'
+import { kbd } from 'styled-system/recipes'
+
+export type KbdProps = ComponentProps<typeof Kbd>
+export const Kbd = styled(ark.kbd, kbd)
--- a/src/common/components/ui/styled/link.tsx
+++ b/src/common/components/ui/styled/link.tsx
@ -0,0 +1,7 @@
+import { ark } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { styled } from 'styled-system/jsx'
+import { link } from 'styled-system/recipes'
+
+export type LinkProps = ComponentProps<typeof Link>
+export const Link = styled(ark.a, link)
--- a/src/common/components/ui/styled/menu.tsx
+++ b/src/common/components/ui/styled/menu.tsx
@ -0,0 +1,98 @@
+import { type Assign, Menu } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type MenuVariantProps, menu } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withRootProvider, withContext } = createStyleContext(menu)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withRootProvider<Assign<Menu.RootProviderProps, MenuVariantProps>>(
+  Menu.RootProvider,
+)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withRootProvider<Assign<Menu.RootProps, MenuVariantProps>>(Menu.Root)
+
+export const Arrow = withContext<Assign<HTMLStyledProps<'div'>, Menu.ArrowBaseProps>>(
+  Menu.Arrow,
+  'arrow',
+)
+
+export const ArrowTip = withContext<Assign<HTMLStyledProps<'div'>, Menu.ArrowTipBaseProps>>(
+  Menu.ArrowTip,
+  'arrowTip',
+)
+
+export const CheckboxItem = withContext<Assign<HTMLStyledProps<'div'>, Menu.CheckboxItemBaseProps>>(
+  Menu.CheckboxItem,
+  'item',
+)
+
+export const Content = withContext<Assign<HTMLStyledProps<'div'>, Menu.ContentBaseProps>>(
+  Menu.Content,
+  'content',
+)
+
+export const ContextTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, Menu.ContextTriggerBaseProps>
+>(Menu.ContextTrigger, 'contextTrigger')
+
+export const Indicator = withContext<Assign<HTMLStyledProps<'div'>, Menu.IndicatorBaseProps>>(
+  Menu.Indicator,
+  'indicator',
+)
+
+export const ItemGroupLabel = withContext<
+  Assign<HTMLStyledProps<'div'>, Menu.ItemGroupLabelBaseProps>
+>(Menu.ItemGroupLabel, 'itemGroupLabel')
+
+export const ItemGroup = withContext<Assign<HTMLStyledProps<'div'>, Menu.ItemGroupBaseProps>>(
+  Menu.ItemGroup,
+  'itemGroup',
+)
+
+export const ItemIndicator = withContext<
+  Assign<HTMLStyledProps<'div'>, Menu.ItemIndicatorBaseProps>
+>(Menu.ItemIndicator, 'itemIndicator')
+
+export const Item = withContext<Assign<HTMLStyledProps<'div'>, Menu.ItemBaseProps>>(
+  Menu.Item,
+  'item',
+)
+
+export const ItemText = withContext<Assign<HTMLStyledProps<'div'>, Menu.ItemTextBaseProps>>(
+  Menu.ItemText,
+  'itemText',
+)
+
+export const Positioner = withContext<Assign<HTMLStyledProps<'div'>, Menu.PositionerBaseProps>>(
+  Menu.Positioner,
+  'positioner',
+)
+
+export const RadioItemGroup = withContext<
+  Assign<HTMLStyledProps<'div'>, Menu.RadioItemGroupBaseProps>
+>(Menu.RadioItemGroup, 'itemGroup')
+
+export const RadioItem = withContext<Assign<HTMLStyledProps<'div'>, Menu.RadioItemBaseProps>>(
+  Menu.RadioItem,
+  'item',
+)
+
+export const Separator = withContext<Assign<HTMLStyledProps<'hr'>, Menu.SeparatorBaseProps>>(
+  Menu.Separator,
+  'separator',
+)
+
+export const TriggerItem = withContext<Assign<HTMLStyledProps<'div'>, Menu.TriggerItemBaseProps>>(
+  Menu.TriggerItem,
+  'triggerItem',
+)
+
+export const Trigger = withContext<Assign<HTMLStyledProps<'button'>, Menu.TriggerBaseProps>>(
+  Menu.Trigger,
+  'trigger',
+)
+
+export { MenuContext as Context } from '@ark-ui/solid'
--- a/src/common/components/ui/styled/number-input.tsx
+++ b/src/common/components/ui/styled/number-input.tsx
@ -0,0 +1,52 @@
+import { type Assign, NumberInput } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type NumberInputVariantProps, numberInput } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(numberInput)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, NumberInput.RootProviderBaseProps>, NumberInputVariantProps>
+>(NumberInput.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, NumberInput.RootBaseProps>, NumberInputVariantProps>
+>(NumberInput.Root, 'root')
+
+export const Control = withContext<Assign<HTMLStyledProps<'div'>, NumberInput.ControlBaseProps>>(
+  NumberInput.Control,
+  'control',
+)
+
+export const DecrementTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, NumberInput.DecrementTriggerBaseProps>
+>(NumberInput.DecrementTrigger, 'decrementTrigger')
+
+export const IncrementTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, NumberInput.IncrementTriggerBaseProps>
+>(NumberInput.IncrementTrigger, 'incrementTrigger')
+
+export const Input = withContext<Assign<HTMLStyledProps<'input'>, NumberInput.InputBaseProps>>(
+  NumberInput.Input,
+  'input',
+)
+
+export const Label = withContext<Assign<HTMLStyledProps<'label'>, NumberInput.LabelBaseProps>>(
+  NumberInput.Label,
+  'label',
+)
+
+export const Scrubber = withContext<Assign<HTMLStyledProps<'div'>, NumberInput.ScrubberBaseProps>>(
+  NumberInput.Scrubber,
+  'scrubber',
+)
+
+export const ValueText = withContext<Assign<HTMLStyledProps<'span'>, NumberInput.ValueTextProps>>(
+  NumberInput.ValueText,
+  'valueText',
+)
+
+export { NumberInputContext as Context } from '@ark-ui/solid'
--- a/src/common/components/ui/styled/pagination.tsx
+++ b/src/common/components/ui/styled/pagination.tsx
@ -0,0 +1,37 @@
+import { type Assign, Pagination } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type PaginationVariantProps, pagination } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(pagination)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<Assign<HTMLStyledProps<'nav'>, Pagination.RootProviderBaseProps>, PaginationVariantProps>
+>(Pagination.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'nav'>, Pagination.RootBaseProps>, PaginationVariantProps>
+>(Pagination.Root, 'root', { forwardProps: ['page'] })
+
+export const Ellipsis = withContext<Assign<HTMLStyledProps<'div'>, Pagination.EllipsisBaseProps>>(
+  Pagination.Ellipsis,
+  'ellipsis',
+)
+
+export const Item = withContext<Assign<HTMLStyledProps<'button'>, Pagination.ItemBaseProps>>(
+  Pagination.Item,
+  'item',
+)
+
+export const NextTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, Pagination.NextTriggerBaseProps>
+>(Pagination.NextTrigger, 'nextTrigger')
+
+export const PrevTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, Pagination.PrevTriggerBaseProps>
+>(Pagination.PrevTrigger, 'prevTrigger')
+
+export { PaginationContext as Context } from '@ark-ui/solid'
--- a/src/common/components/ui/styled/pin-input.tsx
+++ b/src/common/components/ui/styled/pin-input.tsx
@ -0,0 +1,37 @@
+import { type Assign, PinInput } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type PinInputVariantProps, pinInput } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(pinInput)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, PinInput.RootProviderBaseProps>, PinInputVariantProps>
+>(PinInput.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, PinInput.RootBaseProps>, PinInputVariantProps>
+>(PinInput.Root, 'root', { forwardProps: ['mask'] })
+
+export const Control = withContext<Assign<HTMLStyledProps<'div'>, PinInput.ControlBaseProps>>(
+  PinInput.Control,
+  'control',
+)
+
+export const Input = withContext<Assign<HTMLStyledProps<'input'>, PinInput.InputBaseProps>>(
+  PinInput.Input,
+  'input',
+)
+
+export const Label = withContext<Assign<HTMLStyledProps<'label'>, PinInput.LabelBaseProps>>(
+  PinInput.Label,
+  'label',
+)
+
+export {
+  PinInputContext as Context,
+  PinInputHiddenInput as HiddenInput,
+} from '@ark-ui/solid'
--- a/src/common/components/ui/styled/popover.tsx
+++ b/src/common/components/ui/styled/popover.tsx
@ -0,0 +1,65 @@
+import { type Assign, Popover } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type PopoverVariantProps, popover } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withRootProvider, withContext } = createStyleContext(popover)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withRootProvider<
+  Assign<Popover.RootProviderProps, PopoverVariantProps>
+>(Popover.RootProvider)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withRootProvider<Assign<Popover.RootProps, PopoverVariantProps>>(Popover.Root)
+
+export const Anchor = withContext<Assign<HTMLStyledProps<'div'>, Popover.AnchorBaseProps>>(
+  Popover.Anchor,
+  'anchor',
+)
+
+export const Arrow = withContext<Assign<HTMLStyledProps<'div'>, Popover.ArrowBaseProps>>(
+  Popover.Arrow,
+  'arrow',
+)
+
+export const ArrowTip = withContext<Assign<HTMLStyledProps<'div'>, Popover.ArrowTipBaseProps>>(
+  Popover.ArrowTip,
+  'arrowTip',
+)
+
+export const CloseTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, Popover.CloseTriggerBaseProps>
+>(Popover.CloseTrigger, 'closeTrigger')
+
+export const Content = withContext<Assign<HTMLStyledProps<'div'>, Popover.ContentBaseProps>>(
+  Popover.Content,
+  'content',
+)
+
+export const Description = withContext<
+  Assign<HTMLStyledProps<'div'>, Popover.DescriptionBaseProps>
+>(Popover.Description, 'description')
+
+export const Indicator = withContext<Assign<HTMLStyledProps<'div'>, Popover.IndicatorBaseProps>>(
+  Popover.Indicator,
+  'indicator',
+)
+
+export const Positioner = withContext<Assign<HTMLStyledProps<'div'>, Popover.PositionerBaseProps>>(
+  Popover.Positioner,
+  'positioner',
+)
+
+export const Title = withContext<Assign<HTMLStyledProps<'div'>, Popover.TitleBaseProps>>(
+  Popover.Title,
+  'title',
+)
+
+export const Trigger = withContext<Assign<HTMLStyledProps<'button'>, Popover.TriggerBaseProps>>(
+  Popover.Trigger,
+  'trigger',
+)
+
+export { PopoverContext as Context } from '@ark-ui/solid'
--- a/src/common/components/ui/styled/progress.tsx
+++ b/src/common/components/ui/styled/progress.tsx
@ -0,0 +1,57 @@
+import { type Assign, Progress } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type ProgressVariantProps, progress } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(progress)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, Progress.RootProviderBaseProps>, ProgressVariantProps>
+>(Progress.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, Progress.RootBaseProps>, ProgressVariantProps>
+>(Progress.Root, 'root')
+
+export const Circle = withContext<Assign<HTMLStyledProps<'svg'>, Progress.CircleBaseProps>>(
+  Progress.Circle,
+  'circle',
+)
+
+export const CircleRange = withContext<
+  Assign<HTMLStyledProps<'circle'>, Progress.CircleRangeBaseProps>
+>(Progress.CircleRange, 'circleRange')
+
+export const CircleTrack = withContext<
+  Assign<HTMLStyledProps<'circle'>, Progress.CircleTrackBaseProps>
+>(Progress.CircleTrack, 'circleTrack')
+
+export const Label = withContext<Assign<HTMLStyledProps<'label'>, Progress.LabelBaseProps>>(
+  Progress.Label,
+  'label',
+)
+
+export const Range = withContext<Assign<HTMLStyledProps<'div'>, Progress.RangeBaseProps>>(
+  Progress.Range,
+  'range',
+)
+
+export const Track = withContext<Assign<HTMLStyledProps<'div'>, Progress.TrackBaseProps>>(
+  Progress.Track,
+  'track',
+)
+
+export const ValueText = withContext<Assign<HTMLStyledProps<'span'>, Progress.ValueTextBaseProps>>(
+  Progress.ValueText,
+  'valueText',
+)
+
+export const View = withContext<Assign<HTMLStyledProps<'span'>, Progress.ViewBaseProps>>(
+  Progress.View,
+  'view',
+)
+
+export { ProgressContext as Context } from '@ark-ui/solid'
--- a/src/common/components/ui/styled/radio-button-group.tsx
+++ b/src/common/components/ui/styled/radio-button-group.tsx
@ -0,0 +1,42 @@
+import { type Assign, RadioGroup } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type RadioButtonGroupVariantProps, radioButtonGroup } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(radioButtonGroup)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, RadioGroup.RootProps>, RadioButtonGroupVariantProps>
+>(RadioGroup.Root, 'root')
+
+export const Indicator = withContext<Assign<HTMLStyledProps<'div'>, RadioGroup.IndicatorProps>>(
+  RadioGroup.Indicator,
+  'indicator',
+)
+
+export const ItemControl = withContext<Assign<HTMLStyledProps<'div'>, RadioGroup.ItemControlProps>>(
+  RadioGroup.ItemControl,
+  'itemControl',
+)
+
+export const Item = withContext<Assign<HTMLStyledProps<'label'>, RadioGroup.ItemProps>>(
+  RadioGroup.Item,
+  'item',
+)
+
+export const ItemText = withContext<Assign<HTMLStyledProps<'span'>, RadioGroup.ItemTextProps>>(
+  RadioGroup.ItemText,
+  'itemText',
+)
+
+export const Label = withContext<Assign<HTMLStyledProps<'label'>, RadioGroup.LabelProps>>(
+  RadioGroup.Label,
+  'label',
+)
+
+export {
+  RadioGroupContext as Context,
+  RadioGroupItemHiddenInput as ItemHiddenInput,
+} from '@ark-ui/solid'
--- a/src/common/components/ui/styled/radio-group.tsx
+++ b/src/common/components/ui/styled/radio-group.tsx
@ -0,0 +1,46 @@
+import { type Assign, RadioGroup } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type RadioGroupVariantProps, radioGroup } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(radioGroup)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, RadioGroup.RootProviderBaseProps>, RadioGroupVariantProps>
+>(RadioGroup.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, RadioGroup.RootBaseProps>, RadioGroupVariantProps>
+>(RadioGroup.Root, 'root')
+
+export const Indicator = withContext<Assign<HTMLStyledProps<'div'>, RadioGroup.IndicatorBaseProps>>(
+  RadioGroup.Indicator,
+  'indicator',
+)
+
+export const ItemControl = withContext<
+  Assign<HTMLStyledProps<'div'>, RadioGroup.ItemControlBaseProps>
+>(RadioGroup.ItemControl, 'itemControl')
+
+export const Item = withContext<Assign<HTMLStyledProps<'label'>, RadioGroup.ItemBaseProps>>(
+  RadioGroup.Item,
+  'item',
+)
+
+export const ItemText = withContext<Assign<HTMLStyledProps<'span'>, RadioGroup.ItemTextBaseProps>>(
+  RadioGroup.ItemText,
+  'itemText',
+)
+
+export const Label = withContext<Assign<HTMLStyledProps<'label'>, RadioGroup.LabelBaseProps>>(
+  RadioGroup.Label,
+  'label',
+)
+
+export {
+  RadioGroupContext as Context,
+  RadioGroupItemHiddenInput as ItemHiddenInput,
+} from '@ark-ui/solid'
--- a/src/common/components/ui/styled/rating-group.tsx
+++ b/src/common/components/ui/styled/rating-group.tsx
@ -0,0 +1,38 @@
+import { type Assign, RatingGroup } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type RatingGroupVariantProps, ratingGroup } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(ratingGroup)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, RatingGroup.RootProviderBaseProps>, RatingGroupVariantProps>
+>(RatingGroup.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, RatingGroup.RootBaseProps>, RatingGroupVariantProps>
+>(RatingGroup.Root, 'root')
+
+export const Control = withContext<Assign<HTMLStyledProps<'div'>, RatingGroup.ControlBaseProps>>(
+  RatingGroup.Control,
+  'control',
+)
+
+export const Item = withContext<Assign<HTMLStyledProps<'span'>, RatingGroup.ItemBaseProps>>(
+  RatingGroup.Item,
+  'item',
+)
+
+export const Label = withContext<Assign<HTMLStyledProps<'label'>, RatingGroup.LabelBaseProps>>(
+  RatingGroup.Label,
+  'label',
+)
+
+export {
+  RatingGroupContext as Context,
+  RatingGroupHiddenInput as HiddenInput,
+  RatingGroupItemContext as ItemContext,
+} from '@ark-ui/solid'
--- a/src/common/components/ui/styled/segment-group.tsx
+++ b/src/common/components/ui/styled/segment-group.tsx
@ -0,0 +1,47 @@
+import { type Assign, SegmentGroup } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type SegmentGroupVariantProps, segmentGroup } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(segmentGroup)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<
+    Assign<HTMLStyledProps<'div'>, SegmentGroup.RootProviderBaseProps>,
+    SegmentGroupVariantProps
+  >
+>(SegmentGroup.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, SegmentGroup.RootBaseProps>, SegmentGroupVariantProps>
+>(SegmentGroup.Root, 'root')
+
+export const Indicator = withContext<
+  Assign<HTMLStyledProps<'div'>, SegmentGroup.IndicatorBaseProps>
+>(SegmentGroup.Indicator, 'indicator')
+
+export const ItemControl = withContext<
+  Assign<HTMLStyledProps<'div'>, SegmentGroup.ItemControlBaseProps>
+>(SegmentGroup.ItemControl, 'itemControl')
+
+export const Item = withContext<Assign<HTMLStyledProps<'label'>, SegmentGroup.ItemBaseProps>>(
+  SegmentGroup.Item,
+  'item',
+)
+
+export const ItemText = withContext<
+  Assign<HTMLStyledProps<'span'>, SegmentGroup.ItemTextBaseProps>
+>(SegmentGroup.ItemText, 'itemText')
+
+export const Label = withContext<Assign<HTMLStyledProps<'label'>, SegmentGroup.LabelBaseProps>>(
+  SegmentGroup.Label,
+  'label',
+)
+
+export {
+  SegmentGroupContext as Context,
+  SegmentGroupItemHiddenInput as ItemHiddenInput,
+} from '@ark-ui/solid'
--- a/src/common/components/ui/styled/select.tsx
+++ b/src/common/components/ui/styled/select.tsx
@ -0,0 +1,95 @@
+import { type Assign, Select } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type SelectVariantProps, select } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withRootProvider, withContext } = createStyleContext(select)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withRootProvider<
+  Assign<
+    Assign<HTMLStyledProps<'div'>, Select.RootProviderBaseProps<Select.CollectionItem>>,
+    SelectVariantProps
+  >
+>(Select.RootProvider)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withRootProvider<
+  Assign<
+    Assign<HTMLStyledProps<'div'>, Select.RootBaseProps<Select.CollectionItem>>,
+    SelectVariantProps
+  >
+>(Select.Root)
+
+export const ClearTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, Select.ClearTriggerBaseProps>
+>(Select.ClearTrigger, 'clearTrigger')
+
+export const Content = withContext<Assign<HTMLStyledProps<'div'>, Select.ContentBaseProps>>(
+  Select.Content,
+  'content',
+)
+
+export const Control = withContext<Assign<HTMLStyledProps<'div'>, Select.ControlBaseProps>>(
+  Select.Control,
+  'control',
+)
+
+export const Indicator = withContext<Assign<HTMLStyledProps<'div'>, Select.IndicatorBaseProps>>(
+  Select.Indicator,
+  'indicator',
+)
+
+export const ItemGroupLabel = withContext<
+  Assign<HTMLStyledProps<'div'>, Select.ItemGroupLabelBaseProps>
+>(Select.ItemGroupLabel, 'itemGroupLabel')
+
+export const ItemGroup = withContext<Assign<HTMLStyledProps<'div'>, Select.ItemGroupBaseProps>>(
+  Select.ItemGroup,
+  'itemGroup',
+)
+
+export const ItemIndicator = withContext<
+  Assign<HTMLStyledProps<'div'>, Select.ItemIndicatorBaseProps>
+>(Select.ItemIndicator, 'itemIndicator')
+
+export const Item = withContext<Assign<HTMLStyledProps<'div'>, Select.ItemBaseProps>>(
+  Select.Item,
+  'item',
+)
+
+export const ItemText = withContext<Assign<HTMLStyledProps<'span'>, Select.ItemTextBaseProps>>(
+  Select.ItemText,
+  'itemText',
+)
+
+export const Label = withContext<Assign<HTMLStyledProps<'label'>, Select.LabelBaseProps>>(
+  Select.Label,
+  'label',
+)
+
+export const List = withContext<Assign<HTMLStyledProps<'div'>, Select.ListBaseProps>>(
+  Select.List,
+  'list',
+)
+
+export const Positioner = withContext<Assign<HTMLStyledProps<'div'>, Select.PositionerBaseProps>>(
+  Select.Positioner,
+  'positioner',
+)
+
+export const Trigger = withContext<Assign<HTMLStyledProps<'button'>, Select.TriggerBaseProps>>(
+  Select.Trigger,
+  'trigger',
+)
+
+export const ValueText = withContext<Assign<HTMLStyledProps<'span'>, Select.ValueTextBaseProps>>(
+  Select.ValueText,
+  'valueText',
+)
+
+export {
+  SelectContext as Context,
+  SelectHiddenSelect as HiddenSelect,
+} from '@ark-ui/solid'
--- a/src/common/components/ui/styled/slider.tsx
+++ b/src/common/components/ui/styled/slider.tsx
@ -0,0 +1,62 @@
+import { type Assign, Slider } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type SliderVariantProps, slider } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(slider)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, Slider.RootProviderBaseProps>, SliderVariantProps>
+>(Slider.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, Slider.RootBaseProps>, SliderVariantProps>
+>(Slider.Root, 'root')
+
+export const Control = withContext<Assign<HTMLStyledProps<'div'>, Slider.ControlBaseProps>>(
+  Slider.Control,
+  'control',
+)
+
+export const Label = withContext<Assign<HTMLStyledProps<'label'>, Slider.LabelBaseProps>>(
+  Slider.Label,
+  'label',
+)
+
+export const MarkerGroup = withContext<Assign<HTMLStyledProps<'div'>, Slider.MarkerGroupBaseProps>>(
+  Slider.MarkerGroup,
+  'markerGroup',
+)
+
+export const Marker = withContext<Assign<HTMLStyledProps<'span'>, Slider.MarkerBaseProps>>(
+  Slider.Marker,
+  'marker',
+)
+
+export const Range = withContext<Assign<HTMLStyledProps<'div'>, Slider.RangeBaseProps>>(
+  Slider.Range,
+  'range',
+)
+
+export const Thumb = withContext<Assign<HTMLStyledProps<'div'>, Slider.ThumbBaseProps>>(
+  Slider.Thumb,
+  'thumb',
+)
+
+export const Track = withContext<Assign<HTMLStyledProps<'div'>, Slider.TrackBaseProps>>(
+  Slider.Track,
+  'track',
+)
+
+export const ValueText = withContext<Assign<HTMLStyledProps<'span'>, Slider.ValueTextBaseProps>>(
+  Slider.ValueText,
+  'valueText',
+)
+
+export {
+  SliderContext as Context,
+  SliderHiddenInput as HiddenInput,
+} from '@ark-ui/solid'
--- a/src/common/components/ui/styled/spinner.tsx
+++ b/src/common/components/ui/styled/spinner.tsx
@ -0,0 +1,7 @@
+import { ark } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { styled } from 'styled-system/jsx'
+import { spinner } from 'styled-system/recipes'
+
+export type SpinnerProps = ComponentProps<typeof Spinner>
+export const Spinner = styled(ark.div, spinner)
--- a/src/common/components/ui/styled/switch.tsx
+++ b/src/common/components/ui/styled/switch.tsx
@ -0,0 +1,37 @@
+import { type Assign, Switch } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type SwitchRecipeVariantProps, switchRecipe } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(switchRecipe)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<Assign<HTMLStyledProps<'label'>, Switch.RootProviderBaseProps>, SwitchRecipeVariantProps>
+>(Switch.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'label'>, Switch.RootBaseProps>, SwitchRecipeVariantProps>
+>(Switch.Root, 'root')
+
+export const Control = withContext<Assign<HTMLStyledProps<'span'>, Switch.ControlBaseProps>>(
+  Switch.Control,
+  'control',
+)
+
+export const Label = withContext<Assign<HTMLStyledProps<'span'>, Switch.LabelBaseProps>>(
+  Switch.Label,
+  'label',
+)
+
+export const Thumb = withContext<Assign<HTMLStyledProps<'span'>, Switch.ThumbBaseProps>>(
+  Switch.Thumb,
+  'thumb',
+)
+
+export {
+  SwitchContext as Context,
+  SwitchHiddenInput as HiddenInput,
+} from '@ark-ui/solid'
--- a/src/common/components/ui/styled/tabs.tsx
+++ b/src/common/components/ui/styled/tabs.tsx
@ -0,0 +1,39 @@
+import { type Assign, Tabs } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type TabsVariantProps, tabs } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(tabs)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, Tabs.RootProviderBaseProps>, TabsVariantProps>
+>(Tabs.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, Tabs.RootBaseProps>, TabsVariantProps>
+>(Tabs.Root, 'root')
+
+export const Content = withContext<Assign<HTMLStyledProps<'div'>, Tabs.ContentBaseProps>>(
+  Tabs.Content,
+  'content',
+)
+
+export const Indicator = withContext<Assign<HTMLStyledProps<'div'>, Tabs.IndicatorBaseProps>>(
+  Tabs.Indicator,
+  'indicator',
+)
+
+export const List = withContext<Assign<HTMLStyledProps<'div'>, Tabs.ListBaseProps>>(
+  Tabs.List,
+  'list',
+)
+
+export const Trigger = withContext<Assign<HTMLStyledProps<'button'>, Tabs.TriggerBaseProps>>(
+  Tabs.Trigger,
+  'trigger',
+)
+
+export { TabsContext as Context } from '@ark-ui/solid'
--- a/src/common/components/ui/styled/tags-input.tsx
+++ b/src/common/components/ui/styled/tags-input.tsx
@ -0,0 +1,63 @@
+import { type Assign, TagsInput } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { type TagsInputVariantProps, tagsInput } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(tagsInput)
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export const RootProvider = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, TagsInput.RootProviderBaseProps>, TagsInputVariantProps>
+>(TagsInput.RootProvider, 'root')
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<
+  Assign<Assign<HTMLStyledProps<'div'>, TagsInput.RootBaseProps>, TagsInputVariantProps>
+>(TagsInput.Root, 'root')
+
+export const ClearTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, TagsInput.ClearTriggerBaseProps>
+>(TagsInput.ClearTrigger, 'clearTrigger')
+
+export const Control = withContext<Assign<HTMLStyledProps<'div'>, TagsInput.ControlBaseProps>>(
+  TagsInput.Control,
+  'control',
+)
+
+export const Input = withContext<Assign<HTMLStyledProps<'input'>, TagsInput.InputBaseProps>>(
+  TagsInput.Input,
+  'input',
+)
+
+export const ItemDeleteTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, TagsInput.ItemDeleteTriggerBaseProps>
+>(TagsInput.ItemDeleteTrigger, 'itemDeleteTrigger')
+
+export const ItemInput = withContext<
+  Assign<HTMLStyledProps<'input'>, TagsInput.ItemInputBaseProps>
+>(TagsInput.ItemInput, 'itemInput')
+
+export const ItemPreview = withContext<
+  Assign<HTMLStyledProps<'div'>, TagsInput.ItemPreviewBaseProps>
+>(TagsInput.ItemPreview, 'itemPreview')
+
+export const Item = withContext<Assign<HTMLStyledProps<'div'>, TagsInput.ItemBaseProps>>(
+  TagsInput.Item,
+  'item',
+)
+
+export const ItemText = withContext<Assign<HTMLStyledProps<'span'>, TagsInput.ItemTextBaseProps>>(
+  TagsInput.ItemText,
+  'itemText',
+)
+
+export const Label = withContext<Assign<HTMLStyledProps<'label'>, TagsInput.LabelBaseProps>>(
+  TagsInput.Label,
+  'label',
+)
+
+export {
+  TagsInputContext as Context,
+  TagsInputHiddenInput as HiddenInput,
+} from '@ark-ui/solid'
--- a/src/common/components/ui/styled/textarea.tsx
+++ b/src/common/components/ui/styled/textarea.tsx
@ -0,0 +1,7 @@
+import { ark } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { styled } from 'styled-system/jsx'
+import { textarea } from 'styled-system/recipes'
+
+export type TextareaProps = ComponentProps<typeof Textarea>
+export const Textarea = styled(ark.textarea, textarea)
--- a/src/common/components/ui/styled/toast.tsx
+++ b/src/common/components/ui/styled/toast.tsx
@ -0,0 +1,40 @@
+import { type Assign, Toast } from '@ark-ui/solid'
+import type { ComponentProps } from 'solid-js'
+import { toast } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+import { createStyleContext } from './utils/create-style-context'
+
+const { withProvider, withContext } = createStyleContext(toast)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withProvider<Assign<HTMLStyledProps<'div'>, Toast.RootProps>>(
+  Toast.Root,
+  'root',
+)
+
+export const ActionTrigger = withContext<
+  Assign<HTMLStyledProps<'button'>, Toast.ActionTriggerProps>
+>(Toast.ActionTrigger, 'actionTrigger')
+
+export const CloseTrigger = withContext<Assign<HTMLStyledProps<'div'>, Toast.CloseTriggerProps>>(
+  Toast.CloseTrigger,
+  'closeTrigger',
+)
+
+export const Description = withContext<Assign<HTMLStyledProps<'div'>, Toast.DescriptionProps>>(
+  Toast.Description,
+  'description',
+)
+
+export const Title = withContext<Assign<HTMLStyledProps<'div'>, Toast.TitleProps>>(
+  Toast.Title,
+  'title',
+)
+
+export {
+  ToastContext as Context,
+  createToaster,
+  Toaster,
+  type ToastContextProps as ContextProps,
+  type ToasterProps,
+} from '@ark-ui/solid'
--- a/Show more
+++ b/Show more
				`@ -0,0 +1 @@`
				`export { Badge, type BadgeProps } from './styled/badge'`
				`@ -0,0 +1 @@`
				`export { Code, type CodeProps } from './styled/code'`
				`@ -0,0 +1 @@`
				`export * as ColorPicker from './styled/color-picker'`
				`@ -0,0 +1 @@`
				`export * as Combobox from './styled/combobox'`
				`@ -0,0 +1 @@`
				`export * as DatePicker from './styled/date-picker'`
				`@ -0,0 +1 @@`
				`export * as Editable from './styled/editable'`
				`@ -0,0 +1 @@`
				`export * as FileUpload from './styled/file-upload'`
				`@ -0,0 +1 @@`
				`export { Heading, type HeadingProps } from './styled/heading'`
				`@ -0,0 +1 @@`
				`export { IconButton, type IconButtonProps } from './styled/icon-button'`
				`@ -0,0 +1 @@`
				`export { Icon, type IconProps } from './styled/icon'`