diff --git a/app/components/theme.tsx b/app/components/theme.tsx
new file mode 100644
index 0000000..5679a9a
--- /dev/null
+++ b/app/components/theme.tsx
@@ -0,0 +1,30 @@
+import { Theme, type ThemeType, useTheme } from '#/context/providers/theme-provider'
+import { clx } from '#/utils/ui-helper'
+
+export default function ThemeSwitcher() {
+  const [theme, setTheme] = useTheme()
+
+  const handleThemeChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    setTheme(event.target.value as ThemeType)
+  }
+
+  return (
+    <div className="relative">
+      <select
+        value={theme || Theme.SYSTEM}
+        onChange={handleThemeChange}
+        className={clx(
+          'w-full appearance-none rounded-lg border px-3 py-1.5 pr-8 text-sm focus:outline-none',
+          'border-gray-300 bg-white text-gray-900 focus:border-primary-500',
+          'dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:focus:border-primary-400'
+        )}
+      >
+        {Object.entries(Theme).map(([key, value]) => (
+          <option key={value} value={value}>
+            {key.charAt(0) + key.slice(1).toLowerCase()}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+}
diff --git a/app/context/providers/theme-provider.tsx b/app/context/providers/theme-provider.tsx
new file mode 100644
index 0000000..d0a3a14
--- /dev/null
+++ b/app/context/providers/theme-provider.tsx
@@ -0,0 +1,123 @@
+import { useFetcher, useRevalidator } from '@remix-run/react'
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react'
+import type { Dispatch, SetStateAction } from 'react'
+import type { EnumValues } from '#/utils/common'
+
+const Theme = {
+  DARK: 'dark',
+  LIGHT: 'light',
+  SYSTEM: 'system',
+} as const
+
+type ThemeType = EnumValues<typeof Theme>
+
+type ThemeContextType = [ThemeType | null, Dispatch<SetStateAction<ThemeType | null>>]
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined)
+
+const prefersLightMQ = '(prefers-color-scheme: light)'
+
+const getTheme = (): ThemeType => {
+  if (typeof window === 'undefined') return Theme.SYSTEM
+  return window.matchMedia(prefersLightMQ).matches ? Theme.LIGHT : Theme.DARK
+}
+
+interface ThemeProviderProps {
+  children: React.ReactNode
+  specifiedTheme?: ThemeType
+}
+
+function useThemeEffect(theme: ThemeType | null) {
+  const { revalidate } = useRevalidator()
+  const persistTheme = useFetcher()
+
+  const setThemeClass = useCallback((newTheme: ThemeType) => {
+    document.documentElement.classList.remove(Theme.LIGHT, Theme.DARK)
+    document.documentElement.classList.add(newTheme)
+  }, [])
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: render once
+  useEffect(() => {
+    if (theme) {
+      persistTheme.submit({ theme }, { action: 'set-theme', method: 'POST' })
+      const resolvedTheme = theme === Theme.SYSTEM ? getTheme() : theme
+      setThemeClass(resolvedTheme)
+    }
+  }, [theme])
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(prefersLightMQ)
+    const handleChange = () => {
+      if (theme === Theme.SYSTEM) {
+        setThemeClass(getTheme())
+      }
+      revalidate()
+    }
+    mediaQuery.addEventListener('change', handleChange)
+    return () => mediaQuery.removeEventListener('change', handleChange)
+  }, [theme, revalidate, setThemeClass])
+}
+
+function ThemeProvider({ children, specifiedTheme }: ThemeProviderProps) {
+  const [theme, setTheme] = useState<ThemeType | null>(() => {
+    if (specifiedTheme && Object.values(Theme).includes(specifiedTheme)) {
+      return specifiedTheme
+    }
+    return null
+  })
+
+  const mountRun = useRef(false)
+
+  useEffect(() => {
+    if (!mountRun.current) {
+      mountRun.current = true
+      setTheme(specifiedTheme ?? getTheme())
+    }
+  }, [specifiedTheme])
+
+  useThemeEffect(theme)
+
+  return <ThemeContext.Provider value={[theme, setTheme]}>{children}</ThemeContext.Provider>
+}
+
+function NonFlashOfWrongThemeEls({ ssrTheme }: { ssrTheme: boolean }) {
+  const [theme] = useTheme()
+  const resolvedTheme = theme === Theme.SYSTEM ? getTheme() : theme
+  const colorScheme =
+    resolvedTheme === Theme.LIGHT ? 'light' : resolvedTheme === Theme.DARK ? 'dark' : 'light dark'
+
+  const setThemeScript = `
+    (function() {
+      const theme = ${JSON.stringify(resolvedTheme)};
+      const cl = document.documentElement.classList;
+      cl.remove('light', 'dark');
+      cl.add(theme);
+    })();
+  `
+
+  return (
+    <>
+      <meta name="color-scheme" content={ssrTheme ? 'light' : colorScheme} />
+      {!ssrTheme && (
+        <script
+          // biome-ignore lint/security/noDangerouslySetInnerHtml: Inline script is necessary for theme initialization
+          dangerouslySetInnerHTML={{ __html: setThemeScript }}
+        />
+      )}
+    </>
+  )
+}
+
+function useTheme(): ThemeContextType {
+  const context = useContext(ThemeContext)
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider')
+  }
+  return context
+}
+
+function isTheme(value: unknown): value is ThemeType {
+  return typeof value === 'string' && Object.values(Theme).includes(value as ThemeType)
+}
+
+export { Theme, type ThemeType, isTheme, NonFlashOfWrongThemeEls, ThemeProvider, useTheme }
diff --git a/app/root.tsx b/app/root.tsx
index 62cf0ac..086e260 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -1,20 +1,29 @@
 import type { LinksFunction, LoaderFunction, MetaDescriptor, MetaFunction } from '@remix-run/node'
-import { Links, Meta, Outlet, Scripts, json, useRouteError } from '@remix-run/react'
+import { Links, Meta, Outlet, Scripts, json, useLoaderData, useRouteError } from '@remix-run/react'
 import { ScrollRestoration, isRouteErrorResponse } from '@remix-run/react'
-import { type PropsWithChildren, useEffect } from 'react'
+import { useEffect } from 'react'
 
 import InternalError from '#/components/errors/internal-error'
 import NotFound from '#/components/errors/not-found'
 import { useNonce } from '#/context/providers/nonce-provider'
+import {
+  NonFlashOfWrongThemeEls,
+  ThemeProvider,
+  useTheme,
+} from '#/context/providers/theme-provider'
+import { getThemeSession } from '#/utils/theme.server'
 import { clx } from '#/utils/ui-helper'
 
 import styles from './styles.css?url'
 
 export const loader: LoaderFunction = async ({ request, context }) => {
+  const themeSession = await getThemeSession(request)
+
   return json({
     // Dynamic Canonical URL: https://sergiodxa.com/tutorials/add-dynamic-canonical-url-to-remix-routes
     meta: [{ tagName: 'link', rel: 'canonical', href: request.url }] satisfies MetaDescriptor[],
     nonce: context.nonce as string,
+    theme: themeSession.getTheme(),
     baseUrl: process.env.APP_BASE_URL,
   })
 }
@@ -41,7 +50,9 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
   ]
 }
 
-export function Layout({ children }: PropsWithChildren) {
+function App() {
+  const data = useLoaderData<typeof loader>()
+  const [theme] = useTheme()
   const nonce = useNonce()
 
   useEffect(() => {
@@ -77,10 +88,11 @@ export function Layout({ children }: PropsWithChildren) {
   }, [])
 
   return (
-    <html lang="en">
+    <html lang="en" className={clx(theme)}>
       <head>
         <meta charSet="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <NonFlashOfWrongThemeEls ssrTheme={Boolean(data.theme)} />
         <Meta />
         <Links />
       </head>
@@ -88,7 +100,9 @@ export function Layout({ children }: PropsWithChildren) {
         <a href="#main" className="skiplink">
           Skip to main content
         </a>
-        <div id="main">{children}</div>
+        <div id="main">
+          <Outlet />
+        </div>
         <ScrollRestoration nonce={nonce} />
         <Scripts nonce={nonce} />
       </body>
@@ -127,6 +141,11 @@ export function ErrorBoundary() {
   )
 }
 
-export default function App() {
-  return <Outlet />
+export default function AppWithProviders() {
+  const data = useLoaderData<typeof loader>()
+  return (
+    <ThemeProvider specifiedTheme={data.theme}>
+      <App />
+    </ThemeProvider>
+  )
 }
diff --git a/app/routes/_index.tsx b/app/routes/_home+/_index.tsx
similarity index 94%
rename from app/routes/_index.tsx
rename to app/routes/_home+/_index.tsx
index e47a429..d28d1e3 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_home+/_index.tsx
@@ -90,7 +90,7 @@ export default function IndexPage() {
 
   if (!data || data.isDefault) {
     return (
-      <div className="mx-auto flex size-full min-h-screen flex-col items-center justify-center px-4 text-center sm:px-6 lg:px-8">
+      <>
         <h1 className="block font-bold text-7xl text-gray-800 sm:text-7xl dark:text-white">
           Welcome to Remix
         </h1>
@@ -115,7 +115,7 @@ export default function IndexPage() {
             </Link>
           </Button>
         </div>
-      </div>
+      </>
     )
   }
 
@@ -123,7 +123,7 @@ export default function IndexPage() {
   const { domain, sites, currentSite } = data
 
   return (
-    <div className="mx-auto flex size-full min-h-screen flex-col items-center justify-center px-4 text-center sm:px-6 lg:px-8">
+    <>
       <h1 className="block font-bold text-7xl text-gray-800 sm:text-7xl dark:text-white">
         Welcome to Remix
       </h1>
@@ -151,6 +151,6 @@ export default function IndexPage() {
           </Button>
         ))}
       </div>
-    </div>
+    </>
   )
 }
diff --git a/app/routes/_home+/_layout.tsx b/app/routes/_home+/_layout.tsx
new file mode 100644
index 0000000..251f765
--- /dev/null
+++ b/app/routes/_home+/_layout.tsx
@@ -0,0 +1,20 @@
+import type { LoaderFunction } from '@remix-run/node'
+import { Outlet, json } from '@remix-run/react'
+import ThemeSwitcher from '#/components/theme'
+
+export const loader: LoaderFunction = async (_ctx) => {
+  return json({})
+}
+
+export default function HomeLayout() {
+  return (
+    <div className="bg-white dark:bg-slate-950">
+      <div className="absolute top-4 right-4">
+        <ThemeSwitcher />
+      </div>
+      <main className="mx-auto flex size-full min-h-screen flex-col items-center justify-center px-4 text-center sm:px-6 lg:px-8">
+        <Outlet />
+      </main>
+    </div>
+  )
+}
diff --git a/app/routes/set-theme.ts b/app/routes/set-theme.ts
new file mode 100644
index 0000000..b5a8ae5
--- /dev/null
+++ b/app/routes/set-theme.ts
@@ -0,0 +1,30 @@
+/*!
+ * Portions of this file are based on code from `mattstobbs/remix-dark-mode`.
+ * Credits to Matt Stobbs: https://github.com/mattstobbs/remix-dark-mode
+ */
+
+import { type ActionFunctionArgs, json, redirect } from '@remix-run/node'
+import { isTheme } from '#/context/providers/theme-provider'
+import { getThemeSession } from '#/utils/theme.server'
+
+export const action = async ({ request }: ActionFunctionArgs) => {
+  const themeSession = await getThemeSession(request)
+  const requestText = await request.text()
+  const form = new URLSearchParams(requestText)
+  const theme = form.get('theme')
+
+  if (!isTheme(theme)) {
+    return json({
+      success: false,
+      message: `theme value of ${theme} is not a valid theme`,
+    })
+  }
+
+  themeSession.setTheme(theme)
+
+  const cookiesValue = await themeSession.commit()
+
+  return json({ success: true }, { headers: { 'Set-Cookie': cookiesValue } })
+}
+
+export const loader = () => redirect('/', { status: 404 })
diff --git a/app/styles.css b/app/styles.css
index c7f1f57..b04aeff 100644
--- a/app/styles.css
+++ b/app/styles.css
@@ -18,7 +18,7 @@
 @layer base {
     html,
     body {
-        @apply size-full min-h-screen antialiased scroll-smooth dark:bg-gray-950;
+        @apply size-full min-h-screen antialiased scroll-smooth bg-white dark:bg-gray-950;
     }
 }
 
diff --git a/app/utils/common.ts b/app/utils/common.ts
index 12a9699..22ae4e3 100644
--- a/app/utils/common.ts
+++ b/app/utils/common.ts
@@ -1,6 +1,8 @@
 import pico from 'picocolors'
 import type { LogLevel } from './env.server'
 
+export type EnumValues<Type> = Type[keyof Type]
+
 /**
  * Determines if the current environment is a browser.
  * @returns `true` if the current environment is a browser, `false` otherwise.
diff --git a/app/utils/env.server.ts b/app/utils/env.server.ts
index 44d7df3..8343d4f 100644
--- a/app/utils/env.server.ts
+++ b/app/utils/env.server.ts
@@ -4,6 +4,7 @@
  */
 
 import 'dotenv/config'
+import type { CookieOptions } from '@remix-run/node'
 import * as v from 'valibot'
 import { logger } from './common'
 
@@ -41,6 +42,30 @@ const EnvSchema = v.object({
   SMTP_EMAIL_FROM: v.optional(v.string(), 'Remix Mailer <mailer@example.com>'),
 })
 
+export const GlobalCookiesOptions: Omit<CookieOptions, 'name' | 'expires'> = {
+  path: '/',
+  sameSite: 'lax',
+  httpOnly: true,
+  secure: process.env.NODE_ENV !== 'development',
+  secrets: process.env.NODE_ENV !== 'development' ? [process.env.APP_SECRET_KEY] : [],
+  encode: (val) => {
+    try {
+      return atob(val) // Decode the Base64 cookie value
+    } catch (error) {
+      logger.error('Failed to encode cookie:', error)
+      return val // Return original value if encoding fails
+    }
+  },
+  decode: (val) => {
+    try {
+      return btoa(val) // Encode the cookie value to Base64
+    } catch (error) {
+      logger.error('Failed to decode cookie:', error)
+      return val // Return original value if decoding fails
+    }
+  },
+}
+
 export type LogLevel = v.InferInput<typeof LogLevelSchema>
 
 declare global {
diff --git a/app/utils/theme.server.ts b/app/utils/theme.server.ts
new file mode 100644
index 0000000..16ec559
--- /dev/null
+++ b/app/utils/theme.server.ts
@@ -0,0 +1,39 @@
+/*!
+ * Portions of this file are based on code from `mattstobbs/remix-dark-mode`.
+ * Credits to Matt Stobbs: https://github.com/mattstobbs/remix-dark-mode
+ */
+
+import { createCookieSessionStorage } from '@remix-run/node'
+import { Theme, type ThemeType, isTheme } from '#/context/providers/theme-provider'
+import { GlobalCookiesOptions } from '#/utils/env.server'
+
+// Expired in 720 hours / 30 days from now
+const cookiesExpiry = new Date(Date.now() + 3600 * 1000 * 720)
+
+/**
+ * Creates a session storage for managing theme preferences.
+ */
+const themeStorage = createCookieSessionStorage({
+  cookie: { name: 'remix_start_theme', ...GlobalCookiesOptions },
+})
+
+/**
+ * Retrieves and manages the theme session for a given request.
+ * @param request - The incoming request object.
+ * @returns An object with methods to get, set, and commit the theme.
+ */
+async function getThemeSession(request: Request) {
+  const cookiesHeader = request.headers.get('Cookie')
+  const session = await themeStorage.getSession(cookiesHeader)
+
+  return {
+    getTheme: () => {
+      const themeValue = session.get('theme')
+      return isTheme(themeValue) ? themeValue : Theme.SYSTEM
+    },
+    setTheme: (theme: ThemeType) => session.set('theme', theme),
+    commit: () => themeStorage.commitSession(session, { expires: cookiesExpiry }),
+  }
+}
+
+export { getThemeSession }
diff --git a/package.json b/package.json
index b0cfab3..21fd87a 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,6 @@
         "build:remix": "remix vite:build",
         "dev": "pnpm run --reporter-hide-prefix --color --parallel \"/dev:(?!storybook)/\"",
         "dev:remix": "remix vite:dev",
-        "dev:studio": "drizzle-kit studio --config drizzle.config.ts",
         "dev:storybook": "storybook dev -p 6006 --no-open",
         "preview": "SWCRC=true node --watch --import @swc-node/register/esm-register ./server/server.ts",
         "start": "node --no-warnings ./dist/runner/server.js",
@@ -85,14 +84,14 @@
         "@playwright/test": "^1.47.1",
         "@remix-run/dev": "^2.12.0",
         "@remix-run/testing": "^2.12.0",
-        "@storybook/addon-essentials": "^8.3.0",
-        "@storybook/addon-interactions": "^8.3.0",
-        "@storybook/addon-links": "^8.3.0",
-        "@storybook/blocks": "^8.3.0",
-        "@storybook/react-vite": "^8.3.0",
-        "@storybook/react": "^8.3.0",
-        "@storybook/test": "^8.3.0",
-        "@storybook/theming": "^8.3.0",
+        "@storybook/addon-essentials": "^8.3.1",
+        "@storybook/addon-interactions": "^8.3.1",
+        "@storybook/addon-links": "^8.3.1",
+        "@storybook/blocks": "^8.3.1",
+        "@storybook/react-vite": "^8.3.1",
+        "@storybook/react": "^8.3.1",
+        "@storybook/test": "^8.3.1",
+        "@storybook/theming": "^8.3.1",
         "@swc-node/register": "^1.10.9",
         "@swc/cli": "0.4.1-nightly.20240914",
         "@swc/core": "^1.7.26",
@@ -107,25 +106,25 @@
         "@types/morgan": "^1.9.9",
         "@types/node": "^22.5.5",
         "@types/react-dom": "^18.3.0",
-        "@types/react": "^18.3.6",
+        "@types/react": "^18.3.7",
         "@vitest/coverage-istanbul": "^2.1.1",
         "@vitest/ui": "^2.1.1",
         "autoprefixer": "^10.4.20",
         "git-cliff": "^2.5.0",
         "happy-dom": "^15.7.4",
         "lefthook": "^1.7.15",
-        "npm-check-updates": "^17.1.1",
+        "npm-check-updates": "^17.1.2",
         "playwright": "^1.47.1",
         "postcss": "^8.4.47",
         "rollup-plugin-visualizer": "^5.12.0",
-        "storybook": "^8.3.0",
+        "storybook": "^8.3.1",
         "tailwind-debug-breakpoints": "^1.0.3",
         "tailwindcss-animate": "^1.0.7",
-        "tailwindcss": "^3.4.11",
+        "tailwindcss": "^3.4.12",
         "typescript": "^5.6.2",
         "vite-plugin-inspect": "^0.8.7",
         "vite-tsconfig-paths": "^5.0.1",
-        "vite": "^5.4.5",
+        "vite": "^5.4.6",
         "vitest": "^2.1.1"
     },
     "engines": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 84f860a..a468bf1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -64,13 +64,13 @@ importers:
         version: 18.3.1(react@18.3.1)
       remix-flat-routes:
         specifier: ^0.6.5
-        version: 0.6.5(@remix-run/dev@2.12.0(@remix-run/react@2.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.2))(@remix-run/serve@2.12.0(typescript@5.6.2))(@types/node@22.5.5)(typescript@5.6.2)(vite@5.4.5(@types/node@22.5.5)))
+        version: 0.6.5(@remix-run/dev@2.12.0(@remix-run/react@2.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.2))(@remix-run/serve@2.12.0(typescript@5.6.2))(@types/node@22.5.5)(typescript@5.6.2)(vite@5.4.6(@types/node@22.5.5)))
       tailwind-merge:
         specifier: ^2.5.2
         version: 2.5.2
       tailwind-variants:
         specifier: ^0.2.1
-        version: 0.2.1(tailwindcss@3.4.11)
+        version: 0.2.1(tailwindcss@3.4.12)
       valibot:
         specifier: ^0.42.0
         version: 0.42.0(typescript@5.6.2)
@@ -83,34 +83,34 @@ importers:
         version: 1.47.1
       '@remix-run/dev':
         specifier: ^2.12.0
-        version: 2.12.0(@remix-run/react@2.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.2))(@remix-run/serve@2.12.0(typescript@5.6.2))(@types/node@22.5.5)(typescript@5.6.2)(vite@5.4.5(@types/node@22.5.5))
+        version: 2.12.0(@remix-run/react@2.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.2))(@remix-run/serve@2.12.0(typescript@5.6.2))(@types/node@22.5.5)(typescript@5.6.2)(vite@5.4.6(@types/node@22.5.5))
       '@remix-run/testing':
         specifier: ^2.12.0
         version: 2.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.2)
       '@storybook/addon-essentials':
-        specifier: ^8.3.0
-        version: 8.3.0(storybook@8.3.0)
+        specifier: ^8.3.1
+        version: 8.3.1(storybook@8.3.1)
       '@storybook/addon-interactions':
-        specifier: ^8.3.0
-        version: 8.3.0(storybook@8.3.0)
+        specifier: ^8.3.1
+        version: 8.3.1(storybook@8.3.1)
       '@storybook/addon-links':
-        specifier: ^8.3.0
-        version: 8.3.0(react@18.3.1)(storybook@8.3.0)
+        specifier: ^8.3.1
+        version: 8.3.1(react@18.3.1)(storybook@8.3.1)
       '@storybook/blocks':
-        specifier: ^8.3.0
-        version: 8.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.3.0)
+        specifier: ^8.3.1
+        version: 8.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.3.1)
       '@storybook/react':
-        specifier: ^8.3.0
-        version: 8.3.0(@storybook/test@8.3.0(storybook@8.3.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.3.0)(typescript@5.6.2)
+        specifier: ^8.3.1
+        version: 8.3.1(@storybook/test@8.3.1(storybook@8.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.3.1)(typescript@5.6.2)
       '@storybook/react-vite':
-        specifier: ^8.3.0
-        version: 8.3.0(@storybook/test@8.3.0(storybook@8.3.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.21.2)(storybook@8.3.0)(typescript@5.6.2)(vite@5.4.5(@types/node@22.5.5))
+        specifier: ^8.3.1
+        version: 8.3.1(@storybook/test@8.3.1(storybook@8.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.21.2)(storybook@8.3.1)(typescript@5.6.2)(vite@5.4.6(@types/node@22.5.5))
       '@storybook/test':
-        specifier: ^8.3.0
-        version: 8.3.0(storybook@8.3.0)
+        specifier: ^8.3.1
+        version: 8.3.1(storybook@8.3.1)
       '@storybook/theming':
-        specifier: ^8.3.0
-        version: 8.3.0(storybook@8.3.0)
+        specifier: ^8.3.1
+        version: 8.3.1(storybook@8.3.1)
       '@swc-node/register':
         specifier: ^1.10.9
         version: 1.10.9(@swc/core@1.7.26)(@swc/types@0.1.12)(typescript@5.6.2)
@@ -122,19 +122,19 @@ importers:
         version: 1.7.26
       '@tailwindcss/aspect-ratio':
         specifier: ^0.4.2
-        version: 0.4.2(tailwindcss@3.4.11)
+        version: 0.4.2(tailwindcss@3.4.12)
       '@tailwindcss/forms':
         specifier: ^0.5.9
-        version: 0.5.9(tailwindcss@3.4.11)
+        version: 0.5.9(tailwindcss@3.4.12)
       '@tailwindcss/typography':
         specifier: ^0.5.15
-        version: 0.5.15(tailwindcss@3.4.11)
+        version: 0.5.15(tailwindcss@3.4.12)
       '@testing-library/jest-dom':
         specifier: ^6.5.0
         version: 6.5.0
       '@testing-library/react':
         specifier: ^16.0.1
-        version: 16.0.1(@testing-library/dom@10.4.0)(@types/react-dom@18.3.0)(@types/react@18.3.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 16.0.1(@testing-library/dom@10.4.0)(@types/react-dom@18.3.0)(@types/react@18.3.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@types/compression':
         specifier: ^1.7.5
         version: 1.7.5
@@ -151,8 +151,8 @@ importers:
         specifier: ^22.5.5
         version: 22.5.5
       '@types/react':
-        specifier: ^18.3.6
-        version: 18.3.6
+        specifier: ^18.3.7
+        version: 18.3.7
       '@types/react-dom':
         specifier: ^18.3.0
         version: 18.3.0
@@ -175,8 +175,8 @@ importers:
         specifier: ^1.7.15
         version: 1.7.15
       npm-check-updates:
-        specifier: ^17.1.1
-        version: 17.1.1
+        specifier: ^17.1.2
+        version: 17.1.2
       playwright:
         specifier: ^1.47.1
         version: 1.47.1
@@ -187,29 +187,29 @@ importers:
         specifier: ^5.12.0
         version: 5.12.0(rollup@4.21.2)
       storybook:
-        specifier: ^8.3.0
-        version: 8.3.0
+        specifier: ^8.3.1
+        version: 8.3.1
       tailwind-debug-breakpoints:
         specifier: ^1.0.3
-        version: 1.0.3(tailwindcss@3.4.11)
+        version: 1.0.3(tailwindcss@3.4.12)
       tailwindcss:
-        specifier: ^3.4.11
-        version: 3.4.11
+        specifier: ^3.4.12
+        version: 3.4.12
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.11)
+        version: 1.0.7(tailwindcss@3.4.12)
       typescript:
         specifier: ^5.6.2
         version: 5.6.2
       vite:
-        specifier: ^5.4.5
-        version: 5.4.5(@types/node@22.5.5)
+        specifier: ^5.4.6
+        version: 5.4.6(@types/node@22.5.5)
       vite-plugin-inspect:
         specifier: ^0.8.7
-        version: 0.8.7(rollup@4.21.2)(vite@5.4.5(@types/node@22.5.5))
+        version: 0.8.7(rollup@4.21.2)(vite@5.4.6(@types/node@22.5.5))
       vite-tsconfig-paths:
         specifier: ^5.0.1
-        version: 5.0.1(typescript@5.6.2)(vite@5.4.5(@types/node@22.5.5))
+        version: 5.0.1(typescript@5.6.2)(vite@5.4.6(@types/node@22.5.5))
       vitest:
         specifier: ^2.1.1
         version: 2.1.1(@types/node@22.5.5)(@vitest/ui@2.1.1)(happy-dom@15.7.4)
@@ -1071,87 +1071,87 @@ packages:
     resolution: {integrity: sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw==}
     engines: {node: '>=10'}
 
-  '@storybook/addon-actions@8.3.0':
-    resolution: {integrity: sha512-HvAc3fW979JVw8CSKXZMouvgrJ2BNLNWaUB8jNokQb3Us00P6igVKLwg/pBV8GBgDr5Ng4pHYqi/ZH+xzEYFFw==}
+  '@storybook/addon-actions@8.3.1':
+    resolution: {integrity: sha512-f00NxBNBcsMHqtwsOpRbZKrNMLdUjnSg1G6zYdVxAG7NwxzgpqPZm37I36ebFmgz/WO2XQ3ihxzfV2IKFuiZ6g==}
     peerDependencies:
-      storybook: ^8.3.0
+      storybook: ^8.3.1
 
-  '@storybook/addon-backgrounds@8.3.0':
-    resolution: {integrity: sha512-qaV/QsXoviAmBYFszI/KN1CaI/LcACGX9RCBB54fMau3JuouIBU/zTl2jY2+BioCBk6oY8KqcnAS1coOZzlNXQ==}
+  '@storybook/addon-backgrounds@8.3.1':
+    resolution: {integrity: sha512-HPQElHIi5SMWJTOimYt27QaiPrrwTprVShVfq3gQKpUcDJhT4qMpI3Bn3JCtthPlXlUA+miZcNdNRTIc2XzhSA==}
     peerDependencies:
-      storybook: ^8.3.0
+      storybook: ^8.3.1
 
-  '@storybook/addon-controls@8.3.0':
-    resolution: {integrity: sha512-Id4j6Neimkdq0OyfQ3qkHpKLisbN08M8pXHDI/A0VeF91xEGBdc1bJgS/EU+ifa24tr5SRYwlAlcBDAWJbZMfA==}
+  '@storybook/addon-controls@8.3.1':
+    resolution: {integrity: sha512-zqVNRGQ2GS1ReDZ6YTAl+pLmnrOWwE3OUsByRfzHCYlmO55TxYi92HBTSbAXyWRKyqVUKH69PmbKGukc83aX2Q==}
     peerDependencies:
-      storybook: ^8.3.0
+      storybook: ^8.3.1
 
-  '@storybook/addon-docs@8.3.0':
-    resolution: {integrity: sha512-LrvWBDX5Vi//82Q78QRbTsG+9rJU9JJFAVPk1NnLp2Yn0F4FueVzIw8AabAkZFy0LHPMGV+EHpkPtYz4Czkhgw==}
+  '@storybook/addon-docs@8.3.1':
+    resolution: {integrity: sha512-8ES7ThajpKDoMheAthnDDg/lXUsIxzV+EdHuE4WnRoiw+25XfYr9WIEuEpytRz/drouJhunOgOJV0kCPxZ3XgQ==}
     peerDependencies:
-      storybook: ^8.3.0
+      storybook: ^8.3.1
 
-  '@storybook/addon-essentials@8.3.0':
-    resolution: {integrity: sha512-y+hlMnIoD+h/diY7BvIeySPCz/ZtJPPZfS/COQuPRXfPWCr37p9XLEz3E+m2spniAbgGv9KpvdqQd0kWcwwfiA==}
+  '@storybook/addon-essentials@8.3.1':
+    resolution: {integrity: sha512-5dNlKKJveBYqe1OT4dSE7V7ZjhULWnL238oeHz6wabjfL/l7W9MgLke5mxir4xSaAKf5sOg+QFK+RSmYYih4pg==}
     peerDependencies:
-      storybook: ^8.3.0
+      storybook: ^8.3.1
 
-  '@storybook/addon-highlight@8.3.0':
-    resolution: {integrity: sha512-bS1rqzbwGgeTKVLYEyY+6DzpafLtDLnoSF+KzRIiV7/1H30evhwVSzkgX1L2F6+ssS1n9WrRJeglniv9j+5mGQ==}
+  '@storybook/addon-highlight@8.3.1':
+    resolution: {integrity: sha512-hEB4O1a76SGEJypjPwjvBT8e9+pWptAD6VY995gtsOrMLaV0213DJV8aEGJRXhELEk2sr8WUaoYhzxxtgD97KA==}
     peerDependencies:
-      storybook: ^8.3.0
+      storybook: ^8.3.1
 
-  '@storybook/addon-interactions@8.3.0':
-    resolution: {integrity: sha512-nAVUFpt2kTaPMY7RxfZwiYipngxf76dfx1E/QP9n/333+/pe88UwXbUkmLKpyC8EWqZXDI0oSV5XDDzoI5x3dA==}
+  '@storybook/addon-interactions@8.3.1':
+    resolution: {integrity: sha512-EQiemx7ZvI9r4WrWmKB7hvoh9XO+YJh61LNEBLrdnSnRITJKGFrJtqnfuSrvQXWxFVi6U1PtSqDzCV8z0IwK2g==}
     peerDependencies:
-      storybook: ^8.3.0
+      storybook: ^8.3.1
 
-  '@storybook/addon-links@8.3.0':
-    resolution: {integrity: sha512-nUnoMPPuxM8yJ7LCrppsUrn3gwqt4E0si9fqIIb5IkB56vz48RxCO9MtO1qjwhWosfMdN6boHaOl1Qc6IxV3Lg==}
+  '@storybook/addon-links@8.3.1':
+    resolution: {integrity: sha512-xhd1cXpHKn9mr87ImcEOV+YexDZcITzxFQoW2m5ocGkMyVFotK6NjOk/f9xsZAGIp4T7axsdEmwFNSovHgw91A==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-      storybook: ^8.3.0
+      storybook: ^8.3.1
     peerDependenciesMeta:
       react:
         optional: true
 
-  '@storybook/addon-measure@8.3.0':
-    resolution: {integrity: sha512-0TZ2ihzX0mRr1rNrFDieDsIKASZ2qUg3eHDkskLKOhxwoUHqsLzXlvS/scKZ+zb8pgjrvsBAsjyPstlrK+z0Zg==}
+  '@storybook/addon-measure@8.3.1':
+    resolution: {integrity: sha512-XL7Rph0K0vggVcY7mxGws9SNzLJlCvzrPJdz1xZBKBLLd0fdpbR5Y+1oP1w/7qhZ9Xrg44VRVs4yUzCYUeK2OQ==}
     peerDependencies:
-      storybook: ^8.3.0
+      storybook: ^8.3.1
 
-  '@storybook/addon-outline@8.3.0':
-    resolution: {integrity: sha512-xTvBGgX6RIkKjQiAi9LvPGbGuBa6tsJS2jCmjwiei3SX3I56E6Bf3KASsFH2x8j9khMVsgQcfA3QDIhjwatdgw==}
+  '@storybook/addon-outline@8.3.1':
+    resolution: {integrity: sha512-bpxiffkMjWbrVAmbonzkGaTQp3zCECOP5B4Uw0oRfH7YVZgUsj1brRjVsMvBB1bwDP/ijj46X12OcZjqVEJP5Q==}
     peerDependencies:
-      storybook: ^8.3.0
+      storybook: ^8.3.1
 
-  '@storybook/addon-toolbars@8.3.0':
-    resolution: {integrity: sha512-/3/jnd70tnvh3x1EL8axE4TR9EHwC+bBch1uIc3vH/lmyZBqSBVA50clz23FvjhykjcaKQogcugCuU1w5TJlBA==}
+  '@storybook/addon-toolbars@8.3.1':
+    resolution: {integrity: sha512-bjlQP9a56O4OCI4g9tDNm51frBcHaFpHma3MJ1vg302oj/XOQrec/am2sA0E6L1l4Hih2PkRYTamo3+GmQRJug==}
     peerDependencies:
-      storybook: ^8.3.0
+      storybook: ^8.3.1
 
-  '@storybook/addon-viewport@8.3.0':
-    resolution: {integrity: sha512-6h/0mKipUG6w2o5IOzyhvC/2ifJlSNIA60hLkJ291g42+ilzkydpby9TBN7FcnrVL3Bv+oLgkDLBWVCqma/fyw==}
+  '@storybook/addon-viewport@8.3.1':
+    resolution: {integrity: sha512-Z0Ls3ThjOx56KE4I5ampOtfK7G4/AAa0bOoaFq7+bLOomXMtZsC3yyXyrm5YQ6ZHmeP2XaXmOe52HDsvq+ko2Q==}
     peerDependencies:
-      storybook: ^8.3.0
+      storybook: ^8.3.1
 
-  '@storybook/blocks@8.3.0':
-    resolution: {integrity: sha512-V7D5lv5R+GJya9cCZOCjmOVjhvP5J3KIaclQuuGGJda/ZD/SpwHcFOGSpo6sNR2UKHXXvb61oM8gRQQWDvqPlg==}
+  '@storybook/blocks@8.3.1':
+    resolution: {integrity: sha512-/wNLRVWR/edzHQAFvSW68VxHYmBcfXpL/XdO46I5Z1X/tXUd0rtgGZmliQ2jZ242FqxcT8guqqFGehbeYUns5w==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-      storybook: ^8.3.0
+      storybook: ^8.3.1
     peerDependenciesMeta:
       react:
         optional: true
       react-dom:
         optional: true
 
-  '@storybook/builder-vite@8.3.0':
-    resolution: {integrity: sha512-9qo3zcZkEpy69E7cx9OHHexBe9+25vH0p+4sWZSjl2sjqjhaxLN5eXnODQbDsOKZNRVrLVTGmKxfFJzAJFnY0w==}
+  '@storybook/builder-vite@8.3.1':
+    resolution: {integrity: sha512-IxfgIuQo9R+zcwoBE85PkCSKWGbPVStJgm1VHO/mixIdZExanbAhDS+L21nAZCelTvcsObTN76BN953v2LjVGg==}
     peerDependencies:
       '@preact/preset-vite': '*'
-      storybook: ^8.3.0
+      storybook: ^8.3.1
       typescript: '>= 4.3.x'
       vite: ^4.0.0 || ^5.0.0
       vite-plugin-glimmerx: '*'
@@ -1163,18 +1163,18 @@ packages:
       vite-plugin-glimmerx:
         optional: true
 
-  '@storybook/components@8.3.0':
-    resolution: {integrity: sha512-SO/iTkmWp3aYCIy8DEhRMoOn6K7lcKTPNC/YjTvOFFzwq/CLq86WNqz6aX+wV5n6MvWTs7evSwMoz7lp4Lc4sw==}
+  '@storybook/components@8.3.1':
+    resolution: {integrity: sha512-/CMqX40CpNOKow58oLyO/OvMhHiHCIvOGf/65lXHk/D9qECMvchFfA2/MH8H7HiJUIqoSPit194miBENK5kqdw==}
     peerDependencies:
-      storybook: ^8.3.0
+      storybook: ^8.3.1
 
-  '@storybook/core@8.3.0':
-    resolution: {integrity: sha512-UeErpD0xRIP2nFA2TjPYxtEyv24O6VRfq2XXU5ki2QPYnxOxAPBbrMHCADjgBwNS4S2NUWTaVBYxybISVbrj+w==}
+  '@storybook/core@8.3.1':
+    resolution: {integrity: sha512-L8YTtUipcBvl4F8jFNnXU3NM1hnLwZ3Ge2l+SRVKUGoAZzdf/I8O/0eOeZ+3LM3PvDn8bC9x+qjhNyDgtT+ieQ==}
 
-  '@storybook/csf-plugin@8.3.0':
-    resolution: {integrity: sha512-sCmeN/OVYj95TKkMqJqxbaztIbdv5jCrtrXuNg4oJaGzNucmMNAbmv2jK2tCNE6Uz2X9IMRcseFX/h9TgjyJ9A==}
+  '@storybook/csf-plugin@8.3.1':
+    resolution: {integrity: sha512-K3JWJf79+BkJAbOnAns5KGQ9h0NCqWht/1B05frj9LuAD/U+0sikpByiC2QvJ+qtX4fODhqjRYvrv2jgP8o3mA==}
     peerDependencies:
-      storybook: ^8.3.0
+      storybook: ^8.3.1
 
   '@storybook/csf@0.1.11':
     resolution: {integrity: sha512-dHYFQH3mA+EtnCkHXzicbLgsvzYjcDJ1JWsogbItZogkPHgSJM/Wr71uMkcvw8v9mmCyP4NpXJuu6bPoVsOnzg==}
@@ -1189,45 +1189,45 @@ packages:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
 
-  '@storybook/instrumenter@8.3.0':
-    resolution: {integrity: sha512-oJmX8jbNKbPBlNMItRvEoaVAJWX1u6jsqXdIcNRCXo3PDdVnunVYz8vVkG8mbL8Cp/cKlsuQk7YBZA4IM5mRgg==}
+  '@storybook/instrumenter@8.3.1':
+    resolution: {integrity: sha512-TtECvALgEPLafdy+YHXz2+xBPobiSMHj532nS7tkqxD9aRD1+Ocy6pWWNaP9+iiWWnHIWlTQ0M/7UEoCxV+Ksg==}
     peerDependencies:
-      storybook: ^8.3.0
+      storybook: ^8.3.1
 
-  '@storybook/manager-api@8.3.0':
-    resolution: {integrity: sha512-5WBLEFHpe4H+9vZZLjNh7msIkyl9MPt4/C2nI+MXKZyU55xBBgiAy4fcD9aj02PcbhyR4JhLqbqmdeBe5Xafeg==}
+  '@storybook/manager-api@8.3.1':
+    resolution: {integrity: sha512-GHJr1/nNAfkzNs4P8z31zBN8ZBucMfl+aSH6ciCy12jN3dOmEfb67mx3aes2PmBJjY3K8HG2lgsO9tNKIyDJXQ==}
     peerDependencies:
-      storybook: ^8.3.0
+      storybook: ^8.3.1
 
-  '@storybook/preview-api@8.3.0':
-    resolution: {integrity: sha512-pHq/T7oWBfzc9TCIPYyJQUXuiUiFfmdrcYvuZE1kf46i7wXh9Q2/Kd3BUJWSCpBXUMoYfAxg9YysGljMII8LWA==}
+  '@storybook/preview-api@8.3.1':
+    resolution: {integrity: sha512-mpeeQi0DiK6lGiFEa/iAXNQykZB/wv9UiI5MYwxfgVTCCIh7skeBQsu/7Ye+C+KyXgrNmH5YAP3CjYfkFVimhQ==}
     peerDependencies:
-      storybook: ^8.3.0
+      storybook: ^8.3.1
 
-  '@storybook/react-dom-shim@8.3.0':
-    resolution: {integrity: sha512-87X4cvgwFT1ll5SzXgQq6iGbkVCgxLBpBm58akF/hzpeRkwfJDncGi/A5hElOJrBg63IkznmSJE7tf9RkrboqQ==}
+  '@storybook/react-dom-shim@8.3.1':
+    resolution: {integrity: sha512-nHMhXkt3FAm8c08QTTU70vpYhsAu65RpCv/uhYZ89H5OWvmLFHn36iJQPzlpWFtJHJ5+bAV/bfgNODR3BV1gRg==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-      storybook: ^8.3.0
+      storybook: ^8.3.1
 
-  '@storybook/react-vite@8.3.0':
-    resolution: {integrity: sha512-VcKp/mpO8M+JsyprTGLLvAzwx7PChdWFDBasyQ0MO+YVwci78gPAZnfWNZaaEB2mdDgPPGuoSTwBgzZmP3FsPg==}
+  '@storybook/react-vite@8.3.1':
+    resolution: {integrity: sha512-WjLnYzaiLHCv09UnnMfjJL9RnjmReXbPpRs3VklH87UH8L6j4WLHw7JAEItnyS6ugTxFjcpEg1P1ud4D8c75nA==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-      storybook: ^8.3.0
+      storybook: ^8.3.1
       vite: ^4.0.0 || ^5.0.0
 
-  '@storybook/react@8.3.0':
-    resolution: {integrity: sha512-qd8IKXqaOG9m0VK0QukFMmKpjmm7sy1R3T681dLet8s+AEAimLH/RiBzd+0dxWng2H/Ng6ldUmCtd3Cs6w/EFQ==}
+  '@storybook/react@8.3.1':
+    resolution: {integrity: sha512-uxr5o5TzUHB1vFMgdayxatDTYUYWJxDse4hcpr+D2E5QMrMCKBk/KRYgJtnPhmEBASoT40lcZvYmEWnP973KWA==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
-      '@storybook/test': 8.3.0
+      '@storybook/test': 8.3.1
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-      storybook: ^8.3.0
+      storybook: ^8.3.1
       typescript: '>= 4.2.x'
     peerDependenciesMeta:
       '@storybook/test':
@@ -1235,15 +1235,15 @@ packages:
       typescript:
         optional: true
 
-  '@storybook/test@8.3.0':
-    resolution: {integrity: sha512-d8y8ST8YY/pSjTxBcWitKM7YbbupN8D0obVlciZRt6WW3o8WUz6iwMuzuJuiUVwtxiRtdKL9jygC5M+aaCpFYQ==}
+  '@storybook/test@8.3.1':
+    resolution: {integrity: sha512-/ZZFZHr+jsO7oBrLFrrCkgkJrh1/AgHBqO8QR0zdTiR0NK0vo2l9v9FXat/VFhSaYTIpVU/NQdNKiPGTKIfAVw==}
     peerDependencies:
-      storybook: ^8.3.0
+      storybook: ^8.3.1
 
-  '@storybook/theming@8.3.0':
-    resolution: {integrity: sha512-lJCarAzswZvUgBt/o1LMJp+07Io5G2VI1+Fw+bgn+92kRD8otCFwuMZIy0u7cEjHiEGqGnpzThlIki6vFjEXeA==}
+  '@storybook/theming@8.3.1':
+    resolution: {integrity: sha512-R6YZnIdN9P9gTauVkZfVmob0/i6/yaAQxnwfMgRLCaFD0TFQ+UQ2pCz40zPAUp3BcNPwMD168GVxmheBb8cGag==}
     peerDependencies:
-      storybook: ^8.3.0
+      storybook: ^8.3.1
 
   '@swc-node/core@1.13.3':
     resolution: {integrity: sha512-OGsvXIid2Go21kiNqeTIn79jcaX4l0G93X2rAnas4LFoDyA9wAwVK7xZdm+QsKoMn5Mus2yFLCc4OtX2dD/PWA==}
@@ -1527,8 +1527,8 @@ packages:
   '@types/react-dom@18.3.0':
     resolution: {integrity: sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==}
 
-  '@types/react@18.3.6':
-    resolution: {integrity: sha512-CnGaRYNu2iZlkGXGrOYtdg5mLK8neySj0woZ4e2wF/eli2E6Sazmq5X+Nrj6OBrrFVQfJWTUFeqAzoRhWQXYvg==}
+  '@types/react@18.3.7':
+    resolution: {integrity: sha512-KUnDCJF5+AiZd8owLIeVHqmW9yM4sqmDVf2JRJiBMFkGvkoZ4/WyV2lL4zVsoinmRS/W3FeEdZLEWFRofnT2FQ==}
 
   '@types/resolve@1.20.6':
     resolution: {integrity: sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ==}
@@ -1746,6 +1746,10 @@ packages:
     resolution: {integrity: sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==}
     engines: {node: '>= 0.8'}
 
+  better-opn@3.0.2:
+    resolution: {integrity: sha512-aVNobHnJqLiUelTaHat9DZ1qM2w0C0Eym4LPI/3JxOnSokGVdsl1T1kN7TFvsEAD8G47A6VKQ0TVHqbBnYMJlQ==}
+    engines: {node: '>=12.0.0'}
+
   bin-check@4.1.0:
     resolution: {integrity: sha512-b6weQyEUKsDGFlACWSIOfveEnImkJyK/FGW6FAG42loyoquvjdtOIqO6yBFzHyqyVVhNgNkQxxx09SFLK28YnA==}
     engines: {node: '>=4'}
@@ -2881,6 +2885,10 @@ packages:
     resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
     hasBin: true
 
+  jsdoc-type-pratt-parser@4.1.0:
+    resolution: {integrity: sha512-Hicd6JK5Njt2QB6XYFS7ok9e37O8AYk3jTcppG4YVQnYjOemymvTcmc7OWsmq/Qqj5TdRFO5/x/tIPmBeRtGHg==}
+    engines: {node: '>=12.0.0'}
+
   jsesc@2.5.2:
     resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
     engines: {node: '>=4'}
@@ -3399,8 +3407,8 @@ packages:
     resolution: {integrity: sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==}
     engines: {node: '>=10'}
 
-  npm-check-updates@17.1.1:
-    resolution: {integrity: sha512-2aqIzGAEWB7xPf0hKHTkNmUM5jHbn2S5r2/z/7dA5Ij2h/sVYAg9R/uVkaUC3VORPAfBm7pKkCWo6E9clEVQ9A==}
+  npm-check-updates@17.1.2:
+    resolution: {integrity: sha512-k3osAbCNXIXqC7QAuF2uRHsKtTUS50KhOW1VAojRHlLdZRh/5EYfduvnVPGDWsbQXFakbSrSbWDdV8qIvDSUtA==}
     engines: {node: ^18.18.0 || >=20.0.0, npm: '>=8.12.1'}
     hasBin: true
 
@@ -4121,8 +4129,8 @@ packages:
   std-env@3.7.0:
     resolution: {integrity: sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==}
 
-  storybook@8.3.0:
-    resolution: {integrity: sha512-XKU+nem9OKX/juvJPwka1Q7DTpSbOe0IMp8ZyLQWorhFKpquJdUjryl7Z9GiFZyyTykCqH4ItQ7h8PaOmqVMOw==}
+  storybook@8.3.1:
+    resolution: {integrity: sha512-CYqt5KOpaTgb8OczNo2+EtMi8YNDPi4vNVebVlLDOroWxyulb8I7MIOH9gALczcIOb+TZUArPztjoa8rkXTaDQ==}
     hasBin: true
 
   stream-shift@1.0.3:
@@ -4234,8 +4242,8 @@ packages:
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders'
 
-  tailwindcss@3.4.11:
-    resolution: {integrity: sha512-qhEuBcLemjSJk5ajccN9xJFtM/h0AVCPaA6C92jNP+M2J8kX+eMJHI7R2HFKUvvAsMpcfLILMCFYSeDwpMmlUg==}
+  tailwindcss@3.4.12:
+    resolution: {integrity: sha512-Htf/gHj2+soPb9UayUNci/Ja3d8pTmu9ONTfh4QY8r3MATTZOzmv6UYWF7ZwikEIC8okpfqmGqrmDehua8mF8w==}
     engines: {node: '>=14.0.0'}
     hasBin: true
 
@@ -4518,8 +4526,8 @@ packages:
       vite:
         optional: true
 
-  vite@5.4.5:
-    resolution: {integrity: sha512-pXqR0qtb2bTwLkev4SE3r4abCNioP3GkjvIDLlzziPpXtHgiJIjuKl+1GN6ESOT3wMjG3JTeARopj2SwYaHTOA==}
+  vite@5.4.6:
+    resolution: {integrity: sha512-IeL5f8OO5nylsgzd9tq4qD2QqI0k2CQLGrWD0rCN0EQJZpBK5vJAx0I+GDkMOXxQX/OfFHMuLIx6ddAxGX/k+Q==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
@@ -5129,13 +5137,13 @@ snapshots:
       '@types/yargs': 17.0.33
       chalk: 4.1.2
 
-  '@joshwooding/vite-plugin-react-docgen-typescript@0.3.1(typescript@5.6.2)(vite@5.4.5(@types/node@22.5.5))':
+  '@joshwooding/vite-plugin-react-docgen-typescript@0.3.1(typescript@5.6.2)(vite@5.4.6(@types/node@22.5.5))':
     dependencies:
       glob: 7.2.3
       glob-promise: 4.2.2(glob@7.2.3)
       magic-string: 0.27.0
       react-docgen-typescript: 2.2.2(typescript@5.6.2)
-      vite: 5.4.5(@types/node@22.5.5)
+      vite: 5.4.6(@types/node@22.5.5)
     optionalDependencies:
       typescript: 5.6.2
 
@@ -5180,10 +5188,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@mdx-js/react@3.0.1(@types/react@18.3.6)(react@18.3.1)':
+  '@mdx-js/react@3.0.1(@types/react@18.3.7)(react@18.3.1)':
     dependencies:
       '@types/mdx': 2.0.13
-      '@types/react': 18.3.6
+      '@types/react': 18.3.7
       react: 18.3.1
 
   '@mole-inc/bin-wrapper@8.0.1':
@@ -5295,7 +5303,7 @@ snapshots:
 
   '@remix-run/css-bundle@2.12.0': {}
 
-  '@remix-run/dev@2.12.0(@remix-run/react@2.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.2))(@remix-run/serve@2.12.0(typescript@5.6.2))(@types/node@22.5.5)(typescript@5.6.2)(vite@5.4.5(@types/node@22.5.5))':
+  '@remix-run/dev@2.12.0(@remix-run/react@2.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.2))(@remix-run/serve@2.12.0(typescript@5.6.2))(@types/node@22.5.5)(typescript@5.6.2)(vite@5.4.6(@types/node@22.5.5))':
     dependencies:
       '@babel/core': 7.25.2
       '@babel/generator': 7.25.6
@@ -5354,7 +5362,7 @@ snapshots:
     optionalDependencies:
       '@remix-run/serve': 2.12.0(typescript@5.6.2)
       typescript: 5.6.2
-      vite: 5.4.5(@types/node@22.5.5)
+      vite: 5.4.6(@types/node@22.5.5)
     transitivePeerDependencies:
       - '@types/node'
       - babel-plugin-macros
@@ -5442,9 +5450,9 @@ snapshots:
     transitivePeerDependencies:
       - react-dom
 
-  '@remix-run/v1-route-convention@0.1.4(@remix-run/dev@2.12.0(@remix-run/react@2.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.2))(@remix-run/serve@2.12.0(typescript@5.6.2))(@types/node@22.5.5)(typescript@5.6.2)(vite@5.4.5(@types/node@22.5.5)))':
+  '@remix-run/v1-route-convention@0.1.4(@remix-run/dev@2.12.0(@remix-run/react@2.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.2))(@remix-run/serve@2.12.0(typescript@5.6.2))(@types/node@22.5.5)(typescript@5.6.2)(vite@5.4.6(@types/node@22.5.5)))':
     dependencies:
-      '@remix-run/dev': 2.12.0(@remix-run/react@2.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.2))(@remix-run/serve@2.12.0(typescript@5.6.2))(@types/node@22.5.5)(typescript@5.6.2)(vite@5.4.5(@types/node@22.5.5))
+      '@remix-run/dev': 2.12.0(@remix-run/react@2.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.2))(@remix-run/serve@2.12.0(typescript@5.6.2))(@types/node@22.5.5)(typescript@5.6.2)(vite@5.4.6(@types/node@22.5.5))
       minimatch: 7.4.6
 
   '@remix-run/web-blob@3.1.0':
@@ -5535,109 +5543,109 @@ snapshots:
 
   '@sindresorhus/is@4.6.0': {}
 
-  '@storybook/addon-actions@8.3.0(storybook@8.3.0)':
+  '@storybook/addon-actions@8.3.1(storybook@8.3.1)':
     dependencies:
       '@storybook/global': 5.0.0
       '@types/uuid': 9.0.8
       dequal: 2.0.3
       polished: 4.3.1
-      storybook: 8.3.0
+      storybook: 8.3.1
       uuid: 9.0.1
 
-  '@storybook/addon-backgrounds@8.3.0(storybook@8.3.0)':
+  '@storybook/addon-backgrounds@8.3.1(storybook@8.3.1)':
     dependencies:
       '@storybook/global': 5.0.0
       memoizerific: 1.11.3
-      storybook: 8.3.0
+      storybook: 8.3.1
       ts-dedent: 2.2.0
 
-  '@storybook/addon-controls@8.3.0(storybook@8.3.0)':
+  '@storybook/addon-controls@8.3.1(storybook@8.3.1)':
     dependencies:
       '@storybook/global': 5.0.0
       dequal: 2.0.3
       lodash: 4.17.21
-      storybook: 8.3.0
+      storybook: 8.3.1
       ts-dedent: 2.2.0
 
-  '@storybook/addon-docs@8.3.0(storybook@8.3.0)':
+  '@storybook/addon-docs@8.3.1(storybook@8.3.1)':
     dependencies:
-      '@mdx-js/react': 3.0.1(@types/react@18.3.6)(react@18.3.1)
-      '@storybook/blocks': 8.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.3.0)
-      '@storybook/csf-plugin': 8.3.0(storybook@8.3.0)
+      '@mdx-js/react': 3.0.1(@types/react@18.3.7)(react@18.3.1)
+      '@storybook/blocks': 8.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.3.1)
+      '@storybook/csf-plugin': 8.3.1(storybook@8.3.1)
       '@storybook/global': 5.0.0
-      '@storybook/react-dom-shim': 8.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.3.0)
-      '@types/react': 18.3.6
+      '@storybook/react-dom-shim': 8.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.3.1)
+      '@types/react': 18.3.7
       fs-extra: 11.2.0
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       rehype-external-links: 3.0.0
       rehype-slug: 6.0.0
-      storybook: 8.3.0
+      storybook: 8.3.1
       ts-dedent: 2.2.0
     transitivePeerDependencies:
       - webpack-sources
 
-  '@storybook/addon-essentials@8.3.0(storybook@8.3.0)':
-    dependencies:
-      '@storybook/addon-actions': 8.3.0(storybook@8.3.0)
-      '@storybook/addon-backgrounds': 8.3.0(storybook@8.3.0)
-      '@storybook/addon-controls': 8.3.0(storybook@8.3.0)
-      '@storybook/addon-docs': 8.3.0(storybook@8.3.0)
-      '@storybook/addon-highlight': 8.3.0(storybook@8.3.0)
-      '@storybook/addon-measure': 8.3.0(storybook@8.3.0)
-      '@storybook/addon-outline': 8.3.0(storybook@8.3.0)
-      '@storybook/addon-toolbars': 8.3.0(storybook@8.3.0)
-      '@storybook/addon-viewport': 8.3.0(storybook@8.3.0)
-      storybook: 8.3.0
+  '@storybook/addon-essentials@8.3.1(storybook@8.3.1)':
+    dependencies:
+      '@storybook/addon-actions': 8.3.1(storybook@8.3.1)
+      '@storybook/addon-backgrounds': 8.3.1(storybook@8.3.1)
+      '@storybook/addon-controls': 8.3.1(storybook@8.3.1)
+      '@storybook/addon-docs': 8.3.1(storybook@8.3.1)
+      '@storybook/addon-highlight': 8.3.1(storybook@8.3.1)
+      '@storybook/addon-measure': 8.3.1(storybook@8.3.1)
+      '@storybook/addon-outline': 8.3.1(storybook@8.3.1)
+      '@storybook/addon-toolbars': 8.3.1(storybook@8.3.1)
+      '@storybook/addon-viewport': 8.3.1(storybook@8.3.1)
+      storybook: 8.3.1
       ts-dedent: 2.2.0
     transitivePeerDependencies:
       - webpack-sources
 
-  '@storybook/addon-highlight@8.3.0(storybook@8.3.0)':
+  '@storybook/addon-highlight@8.3.1(storybook@8.3.1)':
     dependencies:
       '@storybook/global': 5.0.0
-      storybook: 8.3.0
+      storybook: 8.3.1
 
-  '@storybook/addon-interactions@8.3.0(storybook@8.3.0)':
+  '@storybook/addon-interactions@8.3.1(storybook@8.3.1)':
     dependencies:
       '@storybook/global': 5.0.0
-      '@storybook/instrumenter': 8.3.0(storybook@8.3.0)
-      '@storybook/test': 8.3.0(storybook@8.3.0)
+      '@storybook/instrumenter': 8.3.1(storybook@8.3.1)
+      '@storybook/test': 8.3.1(storybook@8.3.1)
       polished: 4.3.1
-      storybook: 8.3.0
+      storybook: 8.3.1
       ts-dedent: 2.2.0
 
-  '@storybook/addon-links@8.3.0(react@18.3.1)(storybook@8.3.0)':
+  '@storybook/addon-links@8.3.1(react@18.3.1)(storybook@8.3.1)':
     dependencies:
       '@storybook/csf': 0.1.11
       '@storybook/global': 5.0.0
-      storybook: 8.3.0
+      storybook: 8.3.1
       ts-dedent: 2.2.0
     optionalDependencies:
       react: 18.3.1
 
-  '@storybook/addon-measure@8.3.0(storybook@8.3.0)':
+  '@storybook/addon-measure@8.3.1(storybook@8.3.1)':
     dependencies:
       '@storybook/global': 5.0.0
-      storybook: 8.3.0
+      storybook: 8.3.1
       tiny-invariant: 1.3.3
 
-  '@storybook/addon-outline@8.3.0(storybook@8.3.0)':
+  '@storybook/addon-outline@8.3.1(storybook@8.3.1)':
     dependencies:
       '@storybook/global': 5.0.0
-      storybook: 8.3.0
+      storybook: 8.3.1
       ts-dedent: 2.2.0
 
-  '@storybook/addon-toolbars@8.3.0(storybook@8.3.0)':
+  '@storybook/addon-toolbars@8.3.1(storybook@8.3.1)':
     dependencies:
-      storybook: 8.3.0
+      storybook: 8.3.1
 
-  '@storybook/addon-viewport@8.3.0(storybook@8.3.0)':
+  '@storybook/addon-viewport@8.3.1(storybook@8.3.1)':
     dependencies:
       memoizerific: 1.11.3
-      storybook: 8.3.0
+      storybook: 8.3.1
 
-  '@storybook/blocks@8.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.3.0)':
+  '@storybook/blocks@8.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.3.1)':
     dependencies:
       '@storybook/csf': 0.1.11
       '@storybook/global': 5.0.0
@@ -5650,7 +5658,7 @@ snapshots:
       memoizerific: 1.11.3
       polished: 4.3.1
       react-colorful: 5.6.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      storybook: 8.3.0
+      storybook: 8.3.1
       telejson: 7.2.0
       ts-dedent: 2.2.0
       util-deprecate: 1.0.2
@@ -5658,9 +5666,9 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@storybook/builder-vite@8.3.0(storybook@8.3.0)(typescript@5.6.2)(vite@5.4.5(@types/node@22.5.5))':
+  '@storybook/builder-vite@8.3.1(storybook@8.3.1)(typescript@5.6.2)(vite@5.4.6(@types/node@22.5.5))':
     dependencies:
-      '@storybook/csf-plugin': 8.3.0(storybook@8.3.0)
+      '@storybook/csf-plugin': 8.3.1(storybook@8.3.1)
       '@types/find-cache-dir': 3.2.1
       browser-assert: 1.2.1
       es-module-lexer: 1.5.4
@@ -5668,27 +5676,29 @@ snapshots:
       find-cache-dir: 3.3.2
       fs-extra: 11.2.0
       magic-string: 0.30.11
-      storybook: 8.3.0
+      storybook: 8.3.1
       ts-dedent: 2.2.0
-      vite: 5.4.5(@types/node@22.5.5)
+      vite: 5.4.6(@types/node@22.5.5)
     optionalDependencies:
       typescript: 5.6.2
     transitivePeerDependencies:
       - supports-color
       - webpack-sources
 
-  '@storybook/components@8.3.0(storybook@8.3.0)':
+  '@storybook/components@8.3.1(storybook@8.3.1)':
     dependencies:
-      storybook: 8.3.0
+      storybook: 8.3.1
 
-  '@storybook/core@8.3.0':
+  '@storybook/core@8.3.1':
     dependencies:
       '@storybook/csf': 0.1.11
       '@types/express': 4.17.21
+      better-opn: 3.0.2
       browser-assert: 1.2.1
       esbuild: 0.21.5
       esbuild-register: 3.6.0(esbuild@0.21.5)
       express: 4.21.0
+      jsdoc-type-pratt-parser: 4.1.0
       process: 0.11.10
       recast: 0.23.9
       semver: 7.6.3
@@ -5699,9 +5709,9 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  '@storybook/csf-plugin@8.3.0(storybook@8.3.0)':
+  '@storybook/csf-plugin@8.3.1(storybook@8.3.1)':
     dependencies:
-      storybook: 8.3.0
+      storybook: 8.3.1
       unplugin: 1.13.1
     transitivePeerDependencies:
       - webpack-sources
@@ -5717,42 +5727,42 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@storybook/instrumenter@8.3.0(storybook@8.3.0)':
+  '@storybook/instrumenter@8.3.1(storybook@8.3.1)':
     dependencies:
       '@storybook/global': 5.0.0
-      '@vitest/utils': 2.0.5
-      storybook: 8.3.0
+      '@vitest/utils': 2.1.1
+      storybook: 8.3.1
       util: 0.12.5
 
-  '@storybook/manager-api@8.3.0(storybook@8.3.0)':
+  '@storybook/manager-api@8.3.1(storybook@8.3.1)':
     dependencies:
-      storybook: 8.3.0
+      storybook: 8.3.1
 
-  '@storybook/preview-api@8.3.0(storybook@8.3.0)':
+  '@storybook/preview-api@8.3.1(storybook@8.3.1)':
     dependencies:
-      storybook: 8.3.0
+      storybook: 8.3.1
 
-  '@storybook/react-dom-shim@8.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.3.0)':
+  '@storybook/react-dom-shim@8.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.3.1)':
     dependencies:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      storybook: 8.3.0
+      storybook: 8.3.1
 
-  '@storybook/react-vite@8.3.0(@storybook/test@8.3.0(storybook@8.3.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.21.2)(storybook@8.3.0)(typescript@5.6.2)(vite@5.4.5(@types/node@22.5.5))':
+  '@storybook/react-vite@8.3.1(@storybook/test@8.3.1(storybook@8.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.21.2)(storybook@8.3.1)(typescript@5.6.2)(vite@5.4.6(@types/node@22.5.5))':
     dependencies:
-      '@joshwooding/vite-plugin-react-docgen-typescript': 0.3.1(typescript@5.6.2)(vite@5.4.5(@types/node@22.5.5))
+      '@joshwooding/vite-plugin-react-docgen-typescript': 0.3.1(typescript@5.6.2)(vite@5.4.6(@types/node@22.5.5))
       '@rollup/pluginutils': 5.1.0(rollup@4.21.2)
-      '@storybook/builder-vite': 8.3.0(storybook@8.3.0)(typescript@5.6.2)(vite@5.4.5(@types/node@22.5.5))
-      '@storybook/react': 8.3.0(@storybook/test@8.3.0(storybook@8.3.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.3.0)(typescript@5.6.2)
+      '@storybook/builder-vite': 8.3.1(storybook@8.3.1)(typescript@5.6.2)(vite@5.4.6(@types/node@22.5.5))
+      '@storybook/react': 8.3.1(@storybook/test@8.3.1(storybook@8.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.3.1)(typescript@5.6.2)
       find-up: 5.0.0
       magic-string: 0.30.11
       react: 18.3.1
       react-docgen: 7.0.3
       react-dom: 18.3.1(react@18.3.1)
       resolve: 1.22.8
-      storybook: 8.3.0
+      storybook: 8.3.1
       tsconfig-paths: 4.2.0
-      vite: 5.4.5(@types/node@22.5.5)
+      vite: 5.4.6(@types/node@22.5.5)
     transitivePeerDependencies:
       - '@preact/preset-vite'
       - '@storybook/test'
@@ -5762,14 +5772,14 @@ snapshots:
       - vite-plugin-glimmerx
       - webpack-sources
 
-  '@storybook/react@8.3.0(@storybook/test@8.3.0(storybook@8.3.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.3.0)(typescript@5.6.2)':
+  '@storybook/react@8.3.1(@storybook/test@8.3.1(storybook@8.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.3.1)(typescript@5.6.2)':
     dependencies:
-      '@storybook/components': 8.3.0(storybook@8.3.0)
+      '@storybook/components': 8.3.1(storybook@8.3.1)
       '@storybook/global': 5.0.0
-      '@storybook/manager-api': 8.3.0(storybook@8.3.0)
-      '@storybook/preview-api': 8.3.0(storybook@8.3.0)
-      '@storybook/react-dom-shim': 8.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.3.0)
-      '@storybook/theming': 8.3.0(storybook@8.3.0)
+      '@storybook/manager-api': 8.3.1(storybook@8.3.1)
+      '@storybook/preview-api': 8.3.1(storybook@8.3.1)
+      '@storybook/react-dom-shim': 8.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.3.1)
+      '@storybook/theming': 8.3.1(storybook@8.3.1)
       '@types/escodegen': 0.0.6
       '@types/estree': 0.0.51
       '@types/node': 22.5.5
@@ -5783,30 +5793,30 @@ snapshots:
       react-dom: 18.3.1(react@18.3.1)
       react-element-to-jsx-string: 15.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       semver: 7.6.3
-      storybook: 8.3.0
+      storybook: 8.3.1
       ts-dedent: 2.2.0
       type-fest: 2.19.0
       util-deprecate: 1.0.2
     optionalDependencies:
-      '@storybook/test': 8.3.0(storybook@8.3.0)
+      '@storybook/test': 8.3.1(storybook@8.3.1)
       typescript: 5.6.2
 
-  '@storybook/test@8.3.0(storybook@8.3.0)':
+  '@storybook/test@8.3.1(storybook@8.3.1)':
     dependencies:
       '@storybook/csf': 0.1.11
       '@storybook/global': 5.0.0
-      '@storybook/instrumenter': 8.3.0(storybook@8.3.0)
+      '@storybook/instrumenter': 8.3.1(storybook@8.3.1)
       '@testing-library/dom': 10.4.0
       '@testing-library/jest-dom': 6.5.0
       '@testing-library/user-event': 14.5.2(@testing-library/dom@10.4.0)
       '@vitest/expect': 2.0.5
       '@vitest/spy': 2.0.5
-      storybook: 8.3.0
+      storybook: 8.3.1
       util: 0.12.5
 
-  '@storybook/theming@8.3.0(storybook@8.3.0)':
+  '@storybook/theming@8.3.1(storybook@8.3.1)':
     dependencies:
-      storybook: 8.3.0
+      storybook: 8.3.1
 
   '@swc-node/core@1.13.3(@swc/core@1.7.26)(@swc/types@0.1.12)':
     dependencies:
@@ -5904,22 +5914,22 @@ snapshots:
     dependencies:
       defer-to-connect: 2.0.1
 
-  '@tailwindcss/aspect-ratio@0.4.2(tailwindcss@3.4.11)':
+  '@tailwindcss/aspect-ratio@0.4.2(tailwindcss@3.4.12)':
     dependencies:
-      tailwindcss: 3.4.11
+      tailwindcss: 3.4.12
 
-  '@tailwindcss/forms@0.5.9(tailwindcss@3.4.11)':
+  '@tailwindcss/forms@0.5.9(tailwindcss@3.4.12)':
     dependencies:
       mini-svg-data-uri: 1.4.4
-      tailwindcss: 3.4.11
+      tailwindcss: 3.4.12
 
-  '@tailwindcss/typography@0.5.15(tailwindcss@3.4.11)':
+  '@tailwindcss/typography@0.5.15(tailwindcss@3.4.12)':
     dependencies:
       lodash.castarray: 4.4.0
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       postcss-selector-parser: 6.0.10
-      tailwindcss: 3.4.11
+      tailwindcss: 3.4.12
 
   '@testing-library/dom@10.4.0':
     dependencies:
@@ -5942,14 +5952,14 @@ snapshots:
       lodash: 4.17.21
       redent: 3.0.0
 
-  '@testing-library/react@16.0.1(@testing-library/dom@10.4.0)(@types/react-dom@18.3.0)(@types/react@18.3.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@testing-library/react@16.0.1(@testing-library/dom@10.4.0)(@types/react-dom@18.3.0)(@types/react@18.3.7)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.25.6
       '@testing-library/dom': 10.4.0
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.3.6
+      '@types/react': 18.3.7
       '@types/react-dom': 18.3.0
 
   '@testing-library/user-event@14.5.2(@testing-library/dom@10.4.0)':
@@ -6110,9 +6120,9 @@ snapshots:
 
   '@types/react-dom@18.3.0':
     dependencies:
-      '@types/react': 18.3.6
+      '@types/react': 18.3.7
 
-  '@types/react@18.3.6':
+  '@types/react@18.3.7':
     dependencies:
       '@types/prop-types': 15.7.12
       csstype: 3.1.3
@@ -6186,7 +6196,7 @@ snapshots:
       lodash: 4.17.21
       mlly: 1.7.1
       outdent: 0.8.0
-      vite: 5.4.5(@types/node@22.5.5)
+      vite: 5.4.6(@types/node@22.5.5)
       vite-node: 1.6.0(@types/node@22.5.5)
     transitivePeerDependencies:
       - '@types/node'
@@ -6232,13 +6242,13 @@ snapshots:
       chai: 5.1.1
       tinyrainbow: 1.2.0
 
-  '@vitest/mocker@2.1.1(@vitest/spy@2.1.1)(vite@5.4.5(@types/node@22.5.5))':
+  '@vitest/mocker@2.1.1(@vitest/spy@2.1.1)(vite@5.4.6(@types/node@22.5.5))':
     dependencies:
       '@vitest/spy': 2.1.1
       estree-walker: 3.0.3
       magic-string: 0.30.11
     optionalDependencies:
-      vite: 5.4.5(@types/node@22.5.5)
+      vite: 5.4.6(@types/node@22.5.5)
 
   '@vitest/pretty-format@2.0.5':
     dependencies:
@@ -6391,6 +6401,10 @@ snapshots:
     dependencies:
       safe-buffer: 5.1.2
 
+  better-opn@3.0.2:
+    dependencies:
+      open: 8.4.2
+
   bin-check@4.1.0:
     dependencies:
       execa: 0.7.0
@@ -7571,6 +7585,8 @@ snapshots:
     dependencies:
       argparse: 2.0.1
 
+  jsdoc-type-pratt-parser@4.1.0: {}
+
   jsesc@2.5.2: {}
 
   jsesc@3.0.2: {}
@@ -8215,7 +8231,7 @@ snapshots:
 
   normalize-url@6.1.0: {}
 
-  npm-check-updates@17.1.1: {}
+  npm-check-updates@17.1.2: {}
 
   npm-install-checks@6.3.0:
     dependencies:
@@ -8764,10 +8780,10 @@ snapshots:
       mdast-util-to-hast: 12.3.0
       unified: 10.1.2
 
-  remix-flat-routes@0.6.5(@remix-run/dev@2.12.0(@remix-run/react@2.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.2))(@remix-run/serve@2.12.0(typescript@5.6.2))(@types/node@22.5.5)(typescript@5.6.2)(vite@5.4.5(@types/node@22.5.5))):
+  remix-flat-routes@0.6.5(@remix-run/dev@2.12.0(@remix-run/react@2.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.2))(@remix-run/serve@2.12.0(typescript@5.6.2))(@types/node@22.5.5)(typescript@5.6.2)(vite@5.4.6(@types/node@22.5.5))):
     dependencies:
-      '@remix-run/dev': 2.12.0(@remix-run/react@2.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.2))(@remix-run/serve@2.12.0(typescript@5.6.2))(@types/node@22.5.5)(typescript@5.6.2)(vite@5.4.5(@types/node@22.5.5))
-      '@remix-run/v1-route-convention': 0.1.4(@remix-run/dev@2.12.0(@remix-run/react@2.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.2))(@remix-run/serve@2.12.0(typescript@5.6.2))(@types/node@22.5.5)(typescript@5.6.2)(vite@5.4.5(@types/node@22.5.5)))
+      '@remix-run/dev': 2.12.0(@remix-run/react@2.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.2))(@remix-run/serve@2.12.0(typescript@5.6.2))(@types/node@22.5.5)(typescript@5.6.2)(vite@5.4.6(@types/node@22.5.5))
+      '@remix-run/v1-route-convention': 0.1.4(@remix-run/dev@2.12.0(@remix-run/react@2.12.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.2))(@remix-run/serve@2.12.0(typescript@5.6.2))(@types/node@22.5.5)(typescript@5.6.2)(vite@5.4.6(@types/node@22.5.5)))
       fs-extra: 11.2.0
       minimatch: 5.1.6
 
@@ -8983,9 +8999,9 @@ snapshots:
 
   std-env@3.7.0: {}
 
-  storybook@8.3.0:
+  storybook@8.3.1:
     dependencies:
-      '@storybook/core': 8.3.0
+      '@storybook/core': 8.3.1
     transitivePeerDependencies:
       - bufferutil
       - supports-color
@@ -9083,22 +9099,22 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  tailwind-debug-breakpoints@1.0.3(tailwindcss@3.4.11):
+  tailwind-debug-breakpoints@1.0.3(tailwindcss@3.4.12):
     dependencies:
-      tailwindcss: 3.4.11
+      tailwindcss: 3.4.12
 
   tailwind-merge@2.5.2: {}
 
-  tailwind-variants@0.2.1(tailwindcss@3.4.11):
+  tailwind-variants@0.2.1(tailwindcss@3.4.12):
     dependencies:
       tailwind-merge: 2.5.2
-      tailwindcss: 3.4.11
+      tailwindcss: 3.4.12
 
-  tailwindcss-animate@1.0.7(tailwindcss@3.4.11):
+  tailwindcss-animate@1.0.7(tailwindcss@3.4.12):
     dependencies:
-      tailwindcss: 3.4.11
+      tailwindcss: 3.4.12
 
-  tailwindcss@3.4.11:
+  tailwindcss@3.4.12:
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
@@ -9385,7 +9401,7 @@ snapshots:
       debug: 4.3.6
       pathe: 1.1.2
       picocolors: 1.1.0
-      vite: 5.4.5(@types/node@22.5.5)
+      vite: 5.4.6(@types/node@22.5.5)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -9402,7 +9418,7 @@ snapshots:
       cac: 6.7.14
       debug: 4.3.6
       pathe: 1.1.2
-      vite: 5.4.5(@types/node@22.5.5)
+      vite: 5.4.6(@types/node@22.5.5)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -9414,7 +9430,7 @@ snapshots:
       - supports-color
       - terser
 
-  vite-plugin-inspect@0.8.7(rollup@4.21.2)(vite@5.4.5(@types/node@22.5.5)):
+  vite-plugin-inspect@0.8.7(rollup@4.21.2)(vite@5.4.6(@types/node@22.5.5)):
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.1.0(rollup@4.21.2)
@@ -9425,23 +9441,23 @@ snapshots:
       perfect-debounce: 1.0.0
       picocolors: 1.1.0
       sirv: 2.0.4
-      vite: 5.4.5(@types/node@22.5.5)
+      vite: 5.4.6(@types/node@22.5.5)
     transitivePeerDependencies:
       - rollup
       - supports-color
 
-  vite-tsconfig-paths@5.0.1(typescript@5.6.2)(vite@5.4.5(@types/node@22.5.5)):
+  vite-tsconfig-paths@5.0.1(typescript@5.6.2)(vite@5.4.6(@types/node@22.5.5)):
     dependencies:
       debug: 4.3.6
       globrex: 0.1.2
       tsconfck: 3.1.3(typescript@5.6.2)
     optionalDependencies:
-      vite: 5.4.5(@types/node@22.5.5)
+      vite: 5.4.6(@types/node@22.5.5)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  vite@5.4.5(@types/node@22.5.5):
+  vite@5.4.6(@types/node@22.5.5):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.4.47
@@ -9453,7 +9469,7 @@ snapshots:
   vitest@2.1.1(@types/node@22.5.5)(@vitest/ui@2.1.1)(happy-dom@15.7.4):
     dependencies:
       '@vitest/expect': 2.1.1
-      '@vitest/mocker': 2.1.1(@vitest/spy@2.1.1)(vite@5.4.5(@types/node@22.5.5))
+      '@vitest/mocker': 2.1.1(@vitest/spy@2.1.1)(vite@5.4.6(@types/node@22.5.5))
       '@vitest/pretty-format': 2.1.1
       '@vitest/runner': 2.1.1
       '@vitest/snapshot': 2.1.1
@@ -9468,7 +9484,7 @@ snapshots:
       tinyexec: 0.3.0
       tinypool: 1.0.1
       tinyrainbow: 1.2.0
-      vite: 5.4.5(@types/node@22.5.5)
+      vite: 5.4.6(@types/node@22.5.5)
       vite-node: 2.1.1(@types/node@22.5.5)
       why-is-node-running: 2.3.0
     optionalDependencies:
diff --git a/tests/pages/homepage.spec.tsx b/tests/pages/homepage.spec.tsx
index 44b248b..9a2b6f3 100644
--- a/tests/pages/homepage.spec.tsx
+++ b/tests/pages/homepage.spec.tsx
@@ -1,7 +1,7 @@
 import { createRemixStub } from '@remix-run/testing'
 import { render, screen, waitFor } from '@testing-library/react'
 import { describe, it } from 'vitest'
-import Index from '#/routes/_index'
+import Index from '#/routes/_home+/_index'
 
 describe('Homepage', () => {
   it('renders correctly', async () => {
diff --git a/tests/setup-test.ts b/tests/setup-test.ts
index 562b457..b3a660a 100644
--- a/tests/setup-test.ts
+++ b/tests/setup-test.ts
@@ -2,6 +2,9 @@
 // @ref: https://www.machinet.net/tutorial-eng/vitest-coverage-comprehensive-guide
 
 import { installGlobals } from '@remix-run/node'
+import { getClientEnv } from '#/utils/env.server'
 import '@testing-library/jest-dom/vitest'
 
 installGlobals()
+
+global.ENV = getClientEnv()
diff --git a/tsconfig.json b/tsconfig.json
index a944a80..3978904 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,9 +13,9 @@
         // "disableReferencedProjectLoad": true,             // Reduce automatic project loading
 
         /* Language and Environment */
-        "target": "ES2022", // Set JavaScript language version
-        "lib": ["DOM", "DOM.Iterable", "ES2022"], // Specify library files to include
-        "jsx": "react-jsx", // Specify JSX code generation
+        "target": "ES2022",                                  // Set JavaScript language version
+        "lib": ["DOM", "DOM.Iterable", "ES2022"],            // Specify library files to include
+        "jsx": "react-jsx",                                  // Specify JSX code generation
         // "experimentalDecorators": true,                   // Enable experimental decorator support
         // "emitDecoratorMetadata": true,                    // Emit decorator metadata
         // "jsxFactory": "",                                 // Specify JSX factory function
@@ -24,7 +24,7 @@
         // "reactNamespace": "",                             // Specify React namespace
         // "noLib": true,                                    // Disable including default lib files
         // "useDefineForClassFields": true,                  // Use define semantics for class fields
-        "moduleDetection": "auto", // Control module detection method
+        "moduleDetection": "auto",                           // Control module detection method
 
         /* Modules */
         "module": "ESNext",                                  // Specify module code generation
@@ -74,7 +74,7 @@
         // "declarationDir": "./",                           // Output directory for generated declarations
 
         /* Interop Constraints */
-        "verbatimModuleSyntax": true,                        // Do not transform imports/exports
+        "verbatimModuleSyntax": true,                        // Do not transform imports/exports, enforced 'type-only' imports
         "allowSyntheticDefaultImports": true,                // Allow default imports from modules with no default export
         "esModuleInterop": true,                             // Emit additional JavaScript for CommonJS modules
         // "preserveSymlinks": true,                         // Do not resolve symlinks to their real path
@@ -95,7 +95,7 @@
         // "exactOptionalPropertyTypes": true,               // Enable strict checking of optional property types
         // "noImplicitReturns": true,                        // Report error when not all code paths return a value
         // "noFallthroughCasesInSwitch": true,               // Report errors for fallthrough cases in switch
-        // "noUncheckedIndexedAccess": true,                 // Include 'undefined' in index signature results
+        "noUncheckedIndexedAccess": true,                    // Include 'undefined' in index signature results, make indexing stricter
         // "noImplicitOverride": true,                       // Ensure overriding members are marked with override
         // "noPropertyAccessFromIndexSignature": true,       // Require explicit indexing when accessing properties
         // "allowUnusedLabels": true,                        // Do not report errors on unused labels