starting fresh

2025-03-31 00:34:55 +02:00 · 2025-03-31 00:34:55 +02:00 · 3a762d2343
commit 3a762d2343
parent 85fa9aff4a
111 changed files with 1939 additions and 2961 deletions
--- a/.gitignore
+++ b/.gitignore
@ -26,7 +26,3 @@ gitignore
 # System Files
 .DS_Store
 Thumbs.db
-
-## Panda
-styled-system
-styled-system-studio
--- a/.prettierrc.toml
+++ b/.prettierrc.toml
@ -1,8 +0,0 @@
-trailingComma = "all"
-tabWidth = 2
-semi = true
-singleQuote = true
-bracketSpacing = true
-bracketLine = false
-arrowFunctionParenthesis = "avoid"
-experimentalTernaries = true
--- a/README.md
+++ b/README.md
@ -1,32 +1 @@
-# SolidStart

-Everything you need to build a Solid project, powered by [`solid-start`](https://start.solidjs.com);
-
-## Creating a project
-
-```bash
-# 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
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-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,12 +1,31 @@
 import { defineConfig } from '@solidjs/start/config';
-import tsconfigPaths from 'vite-tsconfig-paths';
+import solidSvg from 'vite-plugin-solid-svg';
+import devtools from 'solid-devtools/vite';

 export default defineConfig({
-  ssr: true,
+  vite: {
+    plugins: [
+      devtools({
+        autoname: true,
+      }),
+      solidSvg(),
+      {
+        name: 'temp',
+        configResolved(config) {
+          console.log(config.resolve.alias);
+        },
+      },
+    ],
+  },
+  solid: {
+    babel: {
+      compact: true,
+    },
+  },
  server: {
    preset: 'bun',
-  },
-  vite: {
-    plugins: [tsconfigPaths({ root: './' })],
+    prerender: {
+      routes: ['/sitemaps.xml'],
+    },
  },
 });
--- a/bun.lock
+++ b/bun.lock
--- a/bun.lockb
+++ b/bun.lockb
--- a/package.json
+++ b/package.json
@ -1,27 +1,30 @@
 {
-  "name": "example-basic",
+  "name": "streamarr",
  "type": "module",
+  "engines": {
+    "node": ">=18",
+    "bun": ">=1"
+  },
  "scripts": {
-    "prepare": "panda codegen",
    "dev": "vinxi dev",
    "build": "vinxi build",
    "start": "vinxi start",
-    "version": "vinxi version"
-  },
-  "engines": {
-    "node": ">=18"
+    "version": "vinxi version",
+    "test": "vitest --coverage",
+    "test:ci": "vitest run"
  },
  "dependencies": {
-    "@ark-ui/solid": "^3.9.0",
    "@solidjs/meta": "^0.29.4",
-    "@solidjs/router": "^0.14.1",
-    "@solidjs/start": "^1.0.6",
-    "solid-js": "^1.8.18",
-    "vinxi": "^0.4.1"
+    "@solidjs/router": "^0.14.10",
+    "@solidjs/start": "^1.1.3",
+    "solid-icons": "^1.1.0",
+    "solid-js": "^1.9.5",
+    "vinxi": "^0.4.3"
  },
  "devDependencies": {
-    "@pandacss/dev": "^0.45.2",
-    "@park-ui/panda-preset": "^0.42.0",
-    "vite-tsconfig-paths": "^5.0.1"
+    "solid-devtools": "^0.33.0",
+    "vite-plugin-solid-svg": "^0.8.1",
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.0.9"
  }
 }
--- a/panda.config.ts
+++ b/panda.config.ts
@ -1,17 +0,0 @@
-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
@ -1,5 +0,0 @@
-{
-  "$schema": "https://park-ui.com/registry/latest/schema.json",
-  "jsFramework": "solid",
-  "outputPath": "./src/common/components/ui"
-}
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@ -1,5 +0,0 @@
-module.exports = {
-  plugins: {
-    '@pandacss/dev/postcss': {},
-  },
-}
--- a/src/common/components/hero.tsx
+++ b/src/common/components/hero.tsx
@ -1,82 +0,0 @@
-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
@ -1,55 +0,0 @@
-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
@ -1,40 +0,0 @@
-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
@ -1 +0,0 @@
-export { Badge, type BadgeProps } from './styled/badge'
--- a/src/common/components/ui/button.tsx
+++ b/src/common/components/ui/button.tsx
@ -1,37 +0,0 @@
-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
@ -1 +0,0 @@
-export * as Card from './styled/card'
--- a/src/common/components/ui/checkbox.tsx
+++ b/src/common/components/ui/checkbox.tsx
@ -1,51 +0,0 @@
-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
@ -1 +0,0 @@
-export { Code, type CodeProps } from './styled/code'
--- a/src/common/components/ui/color-picker.tsx
+++ b/src/common/components/ui/color-picker.tsx
@ -1 +0,0 @@
-export * as ColorPicker from './styled/color-picker'
--- a/src/common/components/ui/combobox.tsx
+++ b/src/common/components/ui/combobox.tsx
@ -1 +0,0 @@
-export * as Combobox from './styled/combobox'
--- a/src/common/components/ui/date-picker.tsx
+++ b/src/common/components/ui/date-picker.tsx
@ -1 +0,0 @@
-export * as DatePicker from './styled/date-picker'
--- a/src/common/components/ui/dialog.tsx
+++ b/src/common/components/ui/dialog.tsx
@ -1 +0,0 @@
-export * as Dialog from './styled/dialog'
--- a/src/common/components/ui/drawer.tsx
+++ b/src/common/components/ui/drawer.tsx
@ -1 +0,0 @@
-export * as Drawer from './styled/drawer'
--- a/src/common/components/ui/editable.tsx
+++ b/src/common/components/ui/editable.tsx
@ -1 +0,0 @@
-export * as Editable from './styled/editable'
--- a/src/common/components/ui/field.tsx
+++ b/src/common/components/ui/field.tsx
@ -1 +0,0 @@
-export * as Field from './styled/field'
--- a/src/common/components/ui/file-upload.tsx
+++ b/src/common/components/ui/file-upload.tsx
@ -1 +0,0 @@
-export * as FileUpload from './styled/file-upload'
--- a/src/common/components/ui/heading.tsx
+++ b/src/common/components/ui/heading.tsx
@ -1 +0,0 @@
-export { Heading, type HeadingProps } from './styled/heading'
--- a/src/common/components/ui/icon-button.tsx
+++ b/src/common/components/ui/icon-button.tsx
@ -1 +0,0 @@
-export { IconButton, type IconButtonProps } from './styled/icon-button'
--- a/src/common/components/ui/icon.tsx
+++ b/src/common/components/ui/icon.tsx
@ -1 +0,0 @@
-export { Icon, type IconProps } from './styled/icon'
--- a/src/common/components/ui/input.tsx
+++ b/src/common/components/ui/input.tsx
@ -1 +0,0 @@
-export { Input, type InputProps } from './styled/input'
--- a/src/common/components/ui/kbd.tsx
+++ b/src/common/components/ui/kbd.tsx
@ -1 +0,0 @@
-export { Kbd, type KbdProps } from './styled/kbd'
--- a/src/common/components/ui/link.tsx
+++ b/src/common/components/ui/link.tsx
@ -1 +0,0 @@
-export { Link, type LinkProps } from './styled/link'
--- a/src/common/components/ui/menu.tsx
+++ b/src/common/components/ui/menu.tsx
@ -1 +0,0 @@
-export * as Menu from './styled/menu'
--- a/src/common/components/ui/number-input.tsx
+++ b/src/common/components/ui/number-input.tsx
@ -1,53 +0,0 @@
-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
@ -1,73 +0,0 @@
-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
@ -1,34 +0,0 @@
-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
@ -1 +0,0 @@
-export * as Popover from './styled/popover'
--- a/src/common/components/ui/progress.tsx
+++ b/src/common/components/ui/progress.tsx
@ -1,38 +0,0 @@
-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
@ -1 +0,0 @@
-export * as RadioButtonGroup from './styled/radio-button-group'
--- a/src/common/components/ui/radio-group.tsx
+++ b/src/common/components/ui/radio-group.tsx
@ -1 +0,0 @@
-export * as RadioGroup from './styled/radio-group'
--- a/src/common/components/ui/rating-group.tsx
+++ b/src/common/components/ui/rating-group.tsx
@ -1,66 +0,0 @@
-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
@ -1 +0,0 @@
-export * as SegmentGroup from './styled/segment-group'
--- a/src/common/components/ui/select.tsx
+++ b/src/common/components/ui/select.tsx
@ -1 +0,0 @@
-export * as Select from './styled/select'
--- a/src/common/components/ui/slider.tsx
+++ b/src/common/components/ui/slider.tsx
@ -1,49 +0,0 @@
-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
@ -1,23 +0,0 @@
-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
@ -1,30 +0,0 @@
-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
@ -1,7 +0,0 @@
-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
@ -1,7 +0,0 @@
-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
@ -1,38 +0,0 @@
-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
@ -1,42 +0,0 @@
-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
@ -1,7 +0,0 @@
-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
@ -1,129 +0,0 @@
-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
@ -1,94 +0,0 @@
-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
@ -1,121 +0,0 @@
-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
@ -1,51 +0,0 @@
-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
@ -1,74 +0,0 @@
-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
@ -1,56 +0,0 @@
-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
@ -1,46 +0,0 @@
-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
@ -1,68 +0,0 @@
-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
@ -1,11 +0,0 @@
-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
@ -1,9 +0,0 @@
-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
@ -1,7 +0,0 @@
-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
@ -1,7 +0,0 @@
-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
@ -1,7 +0,0 @@
-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
@ -1,7 +0,0 @@
-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
@ -1,98 +0,0 @@
-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
@ -1,52 +0,0 @@
-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
@ -1,37 +0,0 @@
-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
@ -1,37 +0,0 @@
-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
@ -1,65 +0,0 @@
-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
@ -1,57 +0,0 @@
-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
@ -1,42 +0,0 @@
-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
@ -1,46 +0,0 @@
-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
@ -1,38 +0,0 @@
-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
@ -1,47 +0,0 @@
-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
@ -1,95 +0,0 @@
-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
@ -1,62 +0,0 @@
-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
@ -1,7 +0,0 @@
-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
@ -1,37 +0,0 @@
-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
@ -1,39 +0,0 @@
-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
@ -1,63 +0,0 @@
-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
@ -1,7 +0,0 @@
-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
@ -1,40 +0,0 @@
-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/src/common/components/ui/styled/toggle-group.tsx
+++ b/src/common/components/ui/styled/toggle-group.tsx
@ -1,24 +0,0 @@
-import { type Assign, ToggleGroup } from '@ark-ui/solid'
-import type { ComponentProps } from 'solid-js'
-import { type ToggleGroupVariantProps, toggleGroup } from 'styled-system/recipes'
-import type { HTMLStyledProps } from 'styled-system/types'
-import { createStyleContext } from './utils/create-style-context'
-
-const { withProvider, withContext } = createStyleContext(toggleGroup)
-
-export type RootProviderProps = ComponentProps<typeof RootProvider>
-export const RootProvider = withProvider<
-  Assign<Assign<HTMLStyledProps<'div'>, ToggleGroup.RootProviderBaseProps>, ToggleGroupVariantProps>
->(ToggleGroup.RootProvider, 'root')
-
-export type RootProps = ComponentProps<typeof Root>
-export const Root = withProvider<
-  Assign<Assign<HTMLStyledProps<'div'>, ToggleGroup.RootBaseProps>, ToggleGroupVariantProps>
->(ToggleGroup.Root, 'root')
-
-export const Item = withContext<Assign<HTMLStyledProps<'button'>, ToggleGroup.ItemBaseProps>>(
-  ToggleGroup.Item,
-  'item',
-)
-
-export { ToggleGroupContext as Context } from '@ark-ui/solid'
--- a/src/common/components/ui/styled/tooltip.tsx
+++ b/src/common/components/ui/styled/tooltip.tsx
@ -1,42 +0,0 @@
-import { type Assign, Tooltip } from '@ark-ui/solid'
-import type { ComponentProps } from 'solid-js'
-import { type TooltipVariantProps, tooltip } from 'styled-system/recipes'
-import type { HTMLStyledProps } from 'styled-system/types'
-import { createStyleContext } from './utils/create-style-context'
-
-const { withRootProvider, withContext } = createStyleContext(tooltip)
-
-export type RootProviderProps = ComponentProps<typeof RootProvider>
-export const RootProvider = withRootProvider<
-  Assign<Tooltip.RootProviderProps, TooltipVariantProps>
->(Tooltip.RootProvider)
-
-export type RootProps = ComponentProps<typeof Root>
-export const Root = withRootProvider<Assign<Tooltip.RootProps, TooltipVariantProps>>(Tooltip.Root)
-
-export const Arrow = withContext<Assign<HTMLStyledProps<'div'>, Tooltip.ArrowBaseProps>>(
-  Tooltip.Arrow,
-  'arrow',
-)
-
-export const ArrowTip = withContext<Assign<HTMLStyledProps<'div'>, Tooltip.ArrowTipBaseProps>>(
-  Tooltip.ArrowTip,
-  'arrowTip',
-)
-
-export const Content = withContext<Assign<HTMLStyledProps<'div'>, Tooltip.ContentBaseProps>>(
-  Tooltip.Content,
-  'content',
-)
-
-export const Positioner = withContext<Assign<HTMLStyledProps<'div'>, Tooltip.PositionerBaseProps>>(
-  Tooltip.Positioner,
-  'positioner',
-)
-
-export const Trigger = withContext<Assign<HTMLStyledProps<'button'>, Tooltip.TriggerBaseProps>>(
-  Tooltip.Trigger,
-  'trigger',
-)
-
-export { TooltipContext as Context } from '@ark-ui/solid'
--- a/src/common/components/ui/styled/tree-view.tsx
+++ b/src/common/components/ui/styled/tree-view.tsx
@ -1,68 +0,0 @@
-import { type Assign, TreeView } from '@ark-ui/solid'
-import type { ComponentProps } from 'solid-js'
-import { type TreeViewVariantProps, treeView } from 'styled-system/recipes'
-import type { HTMLStyledProps } from 'styled-system/types'
-import { createStyleContext } from './utils/create-style-context'
-
-const { withProvider, withContext } = createStyleContext(treeView)
-
-export type RootProviderProps = ComponentProps<typeof RootProvider>
-export const RootProvider = withProvider<
-  Assign<Assign<HTMLStyledProps<'div'>, TreeView.RootProviderBaseProps>, TreeViewVariantProps>
->(TreeView.RootProvider, 'root')
-
-export type RootProps = ComponentProps<typeof Root>
-export const Root = withProvider<
-  Assign<Assign<HTMLStyledProps<'div'>, TreeView.RootBaseProps>, TreeViewVariantProps>
->(TreeView.Root, 'root')
-
-export const BranchContent = withContext<
-  Assign<HTMLStyledProps<'ul'>, TreeView.BranchContentBaseProps>
->(TreeView.BranchContent, 'branchContent')
-
-export const BranchControl = withContext<
-  Assign<HTMLStyledProps<'div'>, TreeView.BranchControlBaseProps>
->(TreeView.BranchControl, 'branchControl')
-
-export const BranchIndicator = withContext<
-  Assign<HTMLStyledProps<'div'>, TreeView.BranchIndicatorBaseProps>
->(TreeView.BranchIndicator, 'branchIndicator')
-
-export const Branch = withContext<Assign<HTMLStyledProps<'li'>, TreeView.BranchBaseProps>>(
-  TreeView.Branch,
-  'branch',
-)
-
-export const BranchText = withContext<
-  Assign<HTMLStyledProps<'span'>, TreeView.BranchTextBaseProps>
->(TreeView.BranchText, 'branchText')
-
-export const BranchTrigger = withContext<
-  Assign<HTMLStyledProps<'div'>, TreeView.BranchTriggerBaseProps>
->(TreeView.BranchTrigger, 'branchTrigger')
-
-export const ItemIndicator = withContext<
-  Assign<HTMLStyledProps<'div'>, TreeView.ItemIndicatorBaseProps>
->(TreeView.ItemIndicator, 'itemIndicator')
-
-export const Item = withContext<Assign<HTMLStyledProps<'li'>, TreeView.ItemBaseProps>>(
-  TreeView.Item,
-  'item',
-)
-
-export const ItemText = withContext<Assign<HTMLStyledProps<'span'>, TreeView.ItemTextBaseProps>>(
-  TreeView.ItemText,
-  'itemText',
-)
-
-export const Label = withContext<Assign<HTMLStyledProps<'label'>, TreeView.LabelBaseProps>>(
-  TreeView.Label,
-  'label',
-)
-
-export const Tree = withContext<Assign<HTMLStyledProps<'ul'>, TreeView.TreeBaseProps>>(
-  TreeView.Tree,
-  'tree',
-)
-
-export { TreeViewContext as Context } from '@ark-ui/solid'
--- a/src/common/components/ui/styled/utils/create-style-context.tsx
+++ b/src/common/components/ui/styled/utils/create-style-context.tsx
@ -1,89 +0,0 @@
-import { type JSX, createContext, useContext } from 'solid-js'
-import { Dynamic } from 'solid-js/web'
-import { cx } from 'styled-system/css'
-import { isCssProperty, styled } from 'styled-system/jsx'
-import type { ElementType, StyledComponent } from 'styled-system/types'
-
-type Props = Record<string, unknown>
-type Recipe = {
-  (props?: Props): Props
-  splitVariantProps: (props: Props) => [Props, Props]
-}
-
-type Slot<R extends Recipe> = keyof ReturnType<R>
-type Options = { forwardProps?: string[] }
-
-const shouldForwardProp = (prop: string, variantKeys: string[], options: Options = {}) =>
-  options.forwardProps?.includes(prop) || (!variantKeys.includes(prop) && !isCssProperty(prop))
-
-export const createStyleContext = <R extends Recipe>(recipe: R) => {
-  const StyleContext = createContext<Record<Slot<R>, string> | null>(null)
-
-  const withRootProvider = <P extends {}>(Component: ElementType): ((props: P) => JSX.Element) => {
-    const StyledComponent = (props: P) => {
-      const [variantProps, localProps] = recipe.splitVariantProps(props)
-      const slotStyles = recipe(variantProps) as Record<Slot<R>, string>
-
-      return (
-        <StyleContext.Provider value={slotStyles}>
-          <Component {...localProps} />
-        </StyleContext.Provider>
-      )
-    }
-    return StyledComponent
-  }
-
-  const withProvider = <P extends { class?: string }>(
-    Component: ElementType,
-    slot: Slot<R>,
-    options?: Options,
-  ): ((props: P) => JSX.Element) => {
-    const StyledComponent = styled(
-      Component,
-      {},
-      {
-        shouldForwardProp: (prop, variantKeys) => shouldForwardProp(prop, variantKeys, options),
-      },
-    ) as StyledComponent<ElementType>
-
-    return (props: P) => {
-      const [variantProps, localProps] = recipe.splitVariantProps(props)
-      const slotStyles = recipe(variantProps) as Record<Slot<R>, string>
-
-      return (
-        <StyleContext.Provider value={slotStyles}>
-          <Dynamic
-            component={StyledComponent}
-            {...localProps}
-            class={cx(slotStyles?.[slot], props.class)}
-          />
-        </StyleContext.Provider>
-      )
-    }
-  }
-
-  const withContext = <P extends { class?: string }>(
-    Component: ElementType,
-    slot: Slot<R>,
-  ): ((props: P) => JSX.Element) => {
-    const StyledComponent = styled(Component)
-
-    const Foo = (props: P) => {
-      const slotStyles = useContext(StyleContext)
-      return (
-        <Dynamic
-          component={StyledComponent}
-          {...props}
-          class={cx(slotStyles?.[slot], props.class)}
-        />
-      )
-    }
-    return Foo
-  }
-
-  return {
-    withRootProvider,
-    withProvider,
-    withContext,
-  }
-}
--- a/src/common/components/ui/switch.tsx
+++ b/src/common/components/ui/switch.tsx
@ -1,20 +0,0 @@
-import { Show, children } from 'solid-js'
-import * as StyledSwitch from './styled/switch'
-
-export interface SwitchProps extends StyledSwitch.RootProps {}
-
-export const Switch = (props: SwitchProps) => {
-  const getChildren = children(() => props.children)
-
-  return (
-    <StyledSwitch.Root {...props}>
-      <StyledSwitch.Control>
-        <StyledSwitch.Thumb />
-      </StyledSwitch.Control>
-      <Show when={getChildren()}>
-        <StyledSwitch.Label>{getChildren()}</StyledSwitch.Label>
-      </Show>
-      <StyledSwitch.HiddenInput />
-    </StyledSwitch.Root>
-  )
-}
--- a/src/common/components/ui/tabs.tsx
+++ b/src/common/components/ui/tabs.tsx
@ -1 +0,0 @@
-export * as Tabs from './styled/tabs'
--- a/src/common/components/ui/tags-input.tsx
+++ b/src/common/components/ui/tags-input.tsx
@ -1 +0,0 @@
-export * as TagsInput from './styled/tags-input'
--- a/src/common/components/ui/textarea.tsx
+++ b/src/common/components/ui/textarea.tsx
@ -1 +0,0 @@
-export { Textarea, type TextareaProps } from './styled/textarea'
--- a/src/common/components/ui/toast.tsx
+++ b/src/common/components/ui/toast.tsx
@ -1 +0,0 @@
-export * as Toast from './styled/toast'
--- a/src/common/components/ui/toggle-group.tsx
+++ b/src/common/components/ui/toggle-group.tsx
@ -1 +0,0 @@
-export * as ToggleGroup from './styled/toggle-group'
--- a/src/common/components/ui/tooltip.tsx
+++ b/src/common/components/ui/tooltip.tsx
@ -1 +0,0 @@
-export * as Tooltip from './styled/tooltip'
--- a/src/common/components/ui/tree-view.tsx
+++ b/src/common/components/ui/tree-view.tsx
@ -1,65 +0,0 @@
-import { For, Show, splitProps } from 'solid-js'
-import * as StyledTreeView from './styled/tree-view'
-
-interface Child {
-  value: string
-  name: string
-  children?: Child[]
-}
-
-export interface TreeViewData {
-  label: string
-  children: Child[]
-}
-
-export interface TreeViewProps extends StyledTreeView.RootProps {
-  data: TreeViewData
-}
-export const TreeView = (props: TreeViewProps) => {
-  const [localProps, rootProps] = splitProps(props, ['data'])
-
-  const renderChild = (child: Child) => (
-    <Show
-      when={child.children}
-      fallback={
-        <StyledTreeView.Item value={child.value}>
-          <StyledTreeView.ItemText>{child.name}</StyledTreeView.ItemText>
-        </StyledTreeView.Item>
-      }
-    >
-      <StyledTreeView.Branch value={child.value}>
-        <StyledTreeView.BranchControl>
-          <StyledTreeView.BranchIndicator>
-            <ChevronRightIcon />
-          </StyledTreeView.BranchIndicator>
-          <StyledTreeView.BranchText>{child.name}</StyledTreeView.BranchText>
-        </StyledTreeView.BranchControl>
-        <StyledTreeView.BranchContent>
-          <For each={child.children}>{(child) => renderChild(child)}</For>
-        </StyledTreeView.BranchContent>
-      </StyledTreeView.Branch>
-    </Show>
-  )
-
-  return (
-    <StyledTreeView.Root aria-label={localProps.data.label} {...rootProps}>
-      <StyledTreeView.Tree>
-        <For each={localProps.data.children}>{(child) => renderChild(child)}</For>
-      </StyledTreeView.Tree>
-    </StyledTreeView.Root>
-  )
-}
-
-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/components/hero/hero.module.css
+++ b/src/components/hero/hero.module.css
@ -0,0 +1,45 @@
+.container {
+  display: grid;
+  grid: repeat(3, auto) / 10em 1fr;
+  grid-template-areas:
+    "thumbnail ."
+    "thumbnail title"
+    "thumbnail detail"
+    "thumbnail summary";
+  align-content: end;
+  gap: 1em;
+  block-size: 80vh;
+}
+
+.title {
+  grid-area: title;
+  font-size: 2.5em;
+}
+
+.thumbnail {
+  grid-area: thumbnail;
+  inline-size: 15em;
+  aspect-ratio: 3 / 5;
+  border-radius: 1em;
+  object-fit: cover;
+  object-position: center;
+}
+
+.background {
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  block-size: 90vh;
+  inline-size: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+
+.detail {
+  grid-area: detail;
+}
+
+.summary {
+  grid-area: summary;
+  text-wrap: balance;
+}
--- a/src/components/hero/hero.tsx
+++ b/src/components/hero/hero.tsx
@ -0,0 +1,35 @@
+import { Index } from "solid-js";
+import { Entry } from "~/features/content";
+import css from "./hero.module.css";
+
+type HeroProps = {
+  entry: Entry;
+};
+
+export function Hero(props: HeroProps) {
+  return (
+    <div class={css.container}>
+      <h2 class={css.title}>{props.entry.title}</h2>
+
+      <img src={props.entry.thumbnail} class={css.thumbnail} />
+      <img src={props.entry.image} class={css.background} />
+
+      <span class={css.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={css.summary}>{props.entry.summary}</p>
+    </div>
+  );
+}
--- a/src/components/hero/index.ts
+++ b/src/components/hero/index.ts
@ -0,0 +1 @@
+export { Hero } from "./hero";
--- a/src/components/list/index.ts
+++ b/src/components/list/index.ts
@ -0,0 +1 @@
+export { List } from "./list";
--- a/src/components/list/list.module.css
+++ b/src/components/list/list.module.css
@ -0,0 +1,29 @@
+.container {
+  display: grid;
+  grid-auto-flow: row;
+  inline-size: 100%;
+}
+
+.heading {
+  font-size: 2em;
+}
+
+.list {
+  display: grid;
+  grid-auto-flow: column;
+
+  gap: 2em;
+  padding: 10em 4em 5em;
+  scroll-padding: 4em;
+  margin: -10em -4em 0em;
+  margin-block-start: -10em;
+
+  overflow: auto visible;
+  scroll-snap-type: inline proximity;
+
+  @media (hover: none) {
+    & > * {
+      scroll-snap-align: start;
+    }
+  }
+}
--- a/Show more
+++ b/Show more
				`@ -1 +0,0 @@`
				`export { Badge, type BadgeProps } from './styled/badge'`
				`@ -1 +0,0 @@`
				`export { Code, type CodeProps } from './styled/code'`
				`@ -1 +0,0 @@`
				`export * as ColorPicker from './styled/color-picker'`
				`@ -1 +0,0 @@`
				`export * as Combobox from './styled/combobox'`
				`@ -1 +0,0 @@`
				`export * as DatePicker from './styled/date-picker'`
				`@ -1 +0,0 @@`
				`export * as Editable from './styled/editable'`
				`@ -1 +0,0 @@`
				`export * as FileUpload from './styled/file-upload'`
				`@ -1 +0,0 @@`
				`export { Heading, type HeadingProps } from './styled/heading'`
				`@ -1 +0,0 @@`
				`export { IconButton, type IconButtonProps } from './styled/icon-button'`
				`@ -1 +0,0 @@`
				`export { Icon, type IconProps } from './styled/icon'`