diff --git a/.prettierrc b/.prettierrc
index f7affc7ba..a7f8a0d40 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,6 +1,7 @@
 # https://github.com/prettier/prettier#configuration-file
 semi: true
 singleQuote: true
+trailingComma: none
 overrides:
 - files: ".prettierrc"
   options:
diff --git a/.storybook/fonts.css b/.storybook/fonts.css
new file mode 100644
index 000000000..62f18ec21
--- /dev/null
+++ b/.storybook/fonts.css
@@ -0,0 +1,55 @@
+@font-face {
+	font-family: 'Proxima Nova';
+	src: url('./fonts/ProximaNova/ProximaNova-Regular.otf') format('opentype');
+	font-weight: 400;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Proxima Nova';
+	src: url('./fonts/ProximaNova/ProximaNova-RegularIt.otf') format('opentype');
+	font-weight: 400;
+	font-style: italic;
+}
+
+@font-face {
+	font-family: 'Proxima Nova';
+	src: url('./fonts/ProximaNova/ProximaNova-Light.otf') format('opentype');
+	font-weight: 300;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Proxima Nova';
+	src: url('./fonts/ProximaNova/ProximaNova-LightIt.otf') format('opentype');
+	font-weight: 300;
+	font-style: italic;
+}
+
+@font-face {
+	font-family: 'Proxima Nova';
+	src: url('./fonts/ProximaNova/ProximaNova-Semibold.otf') format('opentype');
+	font-weight: 600;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Proxima Nova';
+	src: url('./fonts/ProximaNova/ProximaNova-SemiboldIt.otf') format('opentype');
+	font-weight: 600;
+	font-style: italic;
+}
+
+@font-face {
+	font-family: 'Proxima Nova';
+	src: url('./fonts/ProximaNova/ProximaNova-Bold.otf') format('opentype');
+	font-weight: 700;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Proxima Nova';
+	src: url('./fonts/ProximaNova/ProximaNova-BoldIt.otf') format('opentype');
+	font-weight: 700;
+	font-style: italic;
+}
diff --git a/.storybook/fonts/ProximaNova/ProximaNova-Bold.otf b/.storybook/fonts/ProximaNova/ProximaNova-Bold.otf
new file mode 100644
index 000000000..c395de47b
Binary files /dev/null and b/.storybook/fonts/ProximaNova/ProximaNova-Bold.otf differ
diff --git a/.storybook/fonts/ProximaNova/ProximaNova-BoldIt.otf b/.storybook/fonts/ProximaNova/ProximaNova-BoldIt.otf
new file mode 100644
index 000000000..5cdef9267
Binary files /dev/null and b/.storybook/fonts/ProximaNova/ProximaNova-BoldIt.otf differ
diff --git a/.storybook/fonts/ProximaNova/ProximaNova-Light.otf b/.storybook/fonts/ProximaNova/ProximaNova-Light.otf
new file mode 100644
index 000000000..775e668d7
Binary files /dev/null and b/.storybook/fonts/ProximaNova/ProximaNova-Light.otf differ
diff --git a/.storybook/fonts/ProximaNova/ProximaNova-LightIt.otf b/.storybook/fonts/ProximaNova/ProximaNova-LightIt.otf
new file mode 100644
index 000000000..7be367ee2
Binary files /dev/null and b/.storybook/fonts/ProximaNova/ProximaNova-LightIt.otf differ
diff --git a/.storybook/fonts/ProximaNova/ProximaNova-Regular.otf b/.storybook/fonts/ProximaNova/ProximaNova-Regular.otf
new file mode 100644
index 000000000..4e49ce79f
Binary files /dev/null and b/.storybook/fonts/ProximaNova/ProximaNova-Regular.otf differ
diff --git a/.storybook/fonts/ProximaNova/ProximaNova-RegularIt.otf b/.storybook/fonts/ProximaNova/ProximaNova-RegularIt.otf
new file mode 100644
index 000000000..2557edba4
Binary files /dev/null and b/.storybook/fonts/ProximaNova/ProximaNova-RegularIt.otf differ
diff --git a/.storybook/fonts/ProximaNova/ProximaNova-Semibold.otf b/.storybook/fonts/ProximaNova/ProximaNova-Semibold.otf
new file mode 100644
index 000000000..fe00e9b64
Binary files /dev/null and b/.storybook/fonts/ProximaNova/ProximaNova-Semibold.otf differ
diff --git a/.storybook/fonts/ProximaNova/ProximaNova-SemiboldIt.otf b/.storybook/fonts/ProximaNova/ProximaNova-SemiboldIt.otf
new file mode 100644
index 000000000..7c0308ead
Binary files /dev/null and b/.storybook/fonts/ProximaNova/ProximaNova-SemiboldIt.otf differ
diff --git a/.storybook/fonts/ProximaNova/ProximaNovaAlt-Bold.otf b/.storybook/fonts/ProximaNova/ProximaNovaAlt-Bold.otf
new file mode 100644
index 000000000..8ff939ee8
Binary files /dev/null and b/.storybook/fonts/ProximaNova/ProximaNovaAlt-Bold.otf differ
diff --git a/.storybook/fonts/ProximaNova/ProximaNovaAlt-BoldIt.otf b/.storybook/fonts/ProximaNova/ProximaNovaAlt-BoldIt.otf
new file mode 100644
index 000000000..c9c77c76f
Binary files /dev/null and b/.storybook/fonts/ProximaNova/ProximaNovaAlt-BoldIt.otf differ
diff --git a/.storybook/fonts/ProximaNova/ProximaNovaAlt-Light.otf b/.storybook/fonts/ProximaNova/ProximaNovaAlt-Light.otf
new file mode 100644
index 000000000..6cfddb9ba
Binary files /dev/null and b/.storybook/fonts/ProximaNova/ProximaNovaAlt-Light.otf differ
diff --git a/.storybook/fonts/ProximaNova/ProximaNovaAlt-LightIt.otf b/.storybook/fonts/ProximaNova/ProximaNovaAlt-LightIt.otf
new file mode 100644
index 000000000..8a5235195
Binary files /dev/null and b/.storybook/fonts/ProximaNova/ProximaNovaAlt-LightIt.otf differ
diff --git a/.storybook/fonts/ProximaNova/ProximaNovaAlt-Regular.otf b/.storybook/fonts/ProximaNova/ProximaNovaAlt-Regular.otf
new file mode 100644
index 000000000..7c313c6af
Binary files /dev/null and b/.storybook/fonts/ProximaNova/ProximaNovaAlt-Regular.otf differ
diff --git a/.storybook/fonts/ProximaNova/ProximaNovaAlt-RegularIt.otf b/.storybook/fonts/ProximaNova/ProximaNovaAlt-RegularIt.otf
new file mode 100644
index 000000000..1e339788f
Binary files /dev/null and b/.storybook/fonts/ProximaNova/ProximaNovaAlt-RegularIt.otf differ
diff --git a/.storybook/fonts/ProximaNova/ProximaNovaAlt-Semibold.otf b/.storybook/fonts/ProximaNova/ProximaNovaAlt-Semibold.otf
new file mode 100644
index 000000000..483384dae
Binary files /dev/null and b/.storybook/fonts/ProximaNova/ProximaNovaAlt-Semibold.otf differ
diff --git a/.storybook/fonts/ProximaNova/ProximaNovaAlt-SemiboldIt.otf b/.storybook/fonts/ProximaNova/ProximaNovaAlt-SemiboldIt.otf
new file mode 100644
index 000000000..cbde48496
Binary files /dev/null and b/.storybook/fonts/ProximaNova/ProximaNovaAlt-SemiboldIt.otf differ
diff --git a/.storybook/fonts/ProximaNova/ProximaNovaScOsf-Bold.otf b/.storybook/fonts/ProximaNova/ProximaNovaScOsf-Bold.otf
new file mode 100644
index 000000000..a8be01664
Binary files /dev/null and b/.storybook/fonts/ProximaNova/ProximaNovaScOsf-Bold.otf differ
diff --git a/.storybook/fonts/ProximaNova/ProximaNovaScOsf-BoldIt.otf b/.storybook/fonts/ProximaNova/ProximaNovaScOsf-BoldIt.otf
new file mode 100644
index 000000000..1a87801e2
Binary files /dev/null and b/.storybook/fonts/ProximaNova/ProximaNovaScOsf-BoldIt.otf differ
diff --git a/.storybook/fonts/ProximaNova/ProximaNovaScOsf-Light.otf b/.storybook/fonts/ProximaNova/ProximaNovaScOsf-Light.otf
new file mode 100644
index 000000000..c56a00c37
Binary files /dev/null and b/.storybook/fonts/ProximaNova/ProximaNovaScOsf-Light.otf differ
diff --git a/.storybook/fonts/ProximaNova/ProximaNovaScOsf-LightIt.otf b/.storybook/fonts/ProximaNova/ProximaNovaScOsf-LightIt.otf
new file mode 100644
index 000000000..8b68c2e6e
Binary files /dev/null and b/.storybook/fonts/ProximaNova/ProximaNovaScOsf-LightIt.otf differ
diff --git a/.storybook/fonts/ProximaNova/ProximaNovaScOsf-Regular.otf b/.storybook/fonts/ProximaNova/ProximaNovaScOsf-Regular.otf
new file mode 100644
index 000000000..aa4806575
Binary files /dev/null and b/.storybook/fonts/ProximaNova/ProximaNovaScOsf-Regular.otf differ
diff --git a/.storybook/fonts/ProximaNova/ProximaNovaScOsf-RegularIt.otf b/.storybook/fonts/ProximaNova/ProximaNovaScOsf-RegularIt.otf
new file mode 100644
index 000000000..fb296d7eb
Binary files /dev/null and b/.storybook/fonts/ProximaNova/ProximaNovaScOsf-RegularIt.otf differ
diff --git a/.storybook/fonts/ProximaNova/ProximaNovaScOsf-Semibold.otf b/.storybook/fonts/ProximaNova/ProximaNovaScOsf-Semibold.otf
new file mode 100644
index 000000000..cb12e31b5
Binary files /dev/null and b/.storybook/fonts/ProximaNova/ProximaNovaScOsf-Semibold.otf differ
diff --git a/.storybook/fonts/ProximaNova/ProximaNovaScOsf-SemiboldIt.otf b/.storybook/fonts/ProximaNova/ProximaNovaScOsf-SemiboldIt.otf
new file mode 100644
index 000000000..81777ebfd
Binary files /dev/null and b/.storybook/fonts/ProximaNova/ProximaNovaScOsf-SemiboldIt.otf differ
diff --git a/.storybook/main.ts b/.storybook/main.ts
index aaefe1518..6976249ad 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -11,7 +11,7 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@storybook/addon-themes',
     '@storybook/addon-interactions',
-    '@storybook/addon-docs',
+    '@storybook/addon-docs'
   ],
   framework: {
     name: '@storybook/react-vite',
diff --git a/.storybook/manager.ts b/.storybook/manager.ts
index d78ca8178..0fb6906d1 100644
--- a/.storybook/manager.ts
+++ b/.storybook/manager.ts
@@ -1,4 +1,5 @@
 import { addons } from '@storybook/manager-api';
+
 import theme from './theme';
 
 addons.setConfig({
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 87154f4ac..1c3e91281 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1,4 +1,8 @@
 <title>reablocks</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">
 <style>
   body {
     font-weight: 400;
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 7f1f34025..d9ce01b1b 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -1,13 +1,14 @@
-import React from 'react';
-import theme from './theme';
-import { Preview } from '@storybook/react';
-import { withThemeByClassName } from '@storybook/addon-themes';
+import '../src/assets/css/index.css';
+import './fonts.css';
+
 import { DocsContainer } from '@storybook/addon-docs/blocks';
+import { withThemeByClassName } from '@storybook/addon-themes';
+import type { Preview } from '@storybook/react';
+import React from 'react';
 
 import { ThemeProvider } from '../src/utils/Theme/ThemeProvider';
 import { theme as reablocksTheme } from '../src/utils/Theme/themes/theme';
-
-import '../src/index.css';
+import theme from './theme';
 
 const withProvider = (Story, context) => (
   <ThemeProvider theme={reablocksTheme}>
@@ -21,10 +22,10 @@ const preview: Preview = {
     withThemeByClassName({
       themes: {
         light: 'theme-light',
-        dark: 'theme-dark',
+        dark: 'theme-dark'
       },
-      defaultTheme: 'dark',
-    }),
+      defaultTheme: 'dark'
+    })
   ],
   parameters: {
     layout: 'centered',
@@ -35,7 +36,8 @@ const preview: Preview = {
       container: ({ children, ...props }: any) => {
         // For whatever reason the theme is not getting applied to docs
         // This is a workaround to apply the theme to the docs
-        const isLight = props.context?.store?.globals?.globals?.theme === 'light';
+        const isLight =
+          props.context?.store?.globals?.globals?.theme === 'light';
 
         return (
           <DocsContainer {...props}>
@@ -52,13 +54,7 @@ const preview: Preview = {
       storySort: {
         order: [
           'Docs',
-          [
-            'Intro',
-            'Getting Started',
-
-            'Changelog',
-            'Support',
-          ],
+          ['Intro', 'Getting Started', 'Changelog', 'Support'],
           'Components',
           '*'
         ]
diff --git a/.storybook/theme.ts b/.storybook/theme.ts
index 8480c18fd..165c1245e 100644
--- a/.storybook/theme.ts
+++ b/.storybook/theme.ts
@@ -1,4 +1,5 @@
 import { create } from '@storybook/theming/create';
+
 import ReablocksLogo from '../docs/assets/logo.svg';
 
 export default create({
@@ -10,7 +11,8 @@ export default create({
   appContentBg: '#11111F',
   appPreviewBg: '#11111F',
   fontBase: 'Inter,Arial,Helvetica,sans-serif',
-  fontCode: 'ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace',
+  fontCode:
+    'ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace',
   appBg: '#11111F',
   textColor: '#FFFFFF',
   barBg: '#11111F',
diff --git a/docs/blocks/administration/Billing.story.tsx b/docs/blocks/administration/Billing.story.tsx
index cabaad1a5..33f948e2b 100644
--- a/docs/blocks/administration/Billing.story.tsx
+++ b/docs/blocks/administration/Billing.story.tsx
@@ -1,7 +1,9 @@
-import React from 'react';
 import { motion } from 'motion/react';
+import React from 'react';
 
-import { Card } from '../../../src/layout/Card';
+import { Button } from '../../../src/elements/Button';
+import { Chip } from '../../../src/elements/Chip';
+import { Tooltip } from '../../../src/layers';
 import {
   Divider,
   Stack,
@@ -10,13 +12,7 @@ import {
   TabPanel,
   Tabs
 } from '../../../src/layout';
-import {
-  Chip,
-  ChipTheme,
-  chipTheme as defaultChipTheme
-} from '../../../src/elements/Chip';
-import { Button } from '../../../src/elements/Button';
-import { Tooltip } from '../../../src/layers';
+import { Card } from '../../../src/layout/Card';
 
 export default {
   title: 'Blocks/Administration/Billing'
@@ -31,14 +27,14 @@ export const BillingFull = () => (
     <Card className="p-12 transition-colors">
       <div className="flex flex-col gap-4">
         <div className="flex flex-col">
-          <h2 className="text-2xl font-bold">Billing</h2>
-          <p className="text-text-secondary text-base">
+          <h2 className="text-xl font-bold">Billing</h2>
+          <p className="text-content-text-neutral-2 text-sm">
             Easily manage your account, view invoices, and track payments
             conveniently in one place. Explore flexible subscription options and
             manage your billing preferences effortlessly.
           </p>
         </div>
-        <Tabs variant="secondary" selectedIndex={2}>
+        <Tabs size="large" variant="secondary" selectedIndex={2}>
           <TabList>
             <Tab>Account Details</Tab>
             <Tab>Users</Tab>
@@ -52,27 +48,24 @@ export const BillingFull = () => (
             <span className="font-bold">Plan</span>
             <div className="flex w-full gap-4">
               <Card
-                className="light:bg-athens-gray flex-1"
+                className="flex-1 p-7"
                 contentClassName="flex flex-col gap-6"
               >
                 <Stack justifyContent="spaceBetween">
                   <span className="font-bold">Premium</span>
-                  <Chip
-                    className="border-panel-accent rounded-full border"
-                    variant="outline"
-                  >
+                  <Chip size="large" variant="outline">
                     Annual
                   </Chip>
                 </Stack>
                 <div className="flex items-center gap-2">
                   <span className="font-bold">$1000</span>
-                  <span className="text-text-secondary text-sm">
+                  <span className="text-content-text-neutral-2 text-xs">
                     /Year
                   </span>
                 </div>
                 <Button
-                  className="dark:bg-charade/40 dark:hover:bg-charade/60 dark:focus:bg-charade/60 light:bg-blue-200/40 light:hover:bg-blue-200/60 light:focus:bg-blue-200/60 light:text-vulcan w-fit border-none px-4 py-2 font-semibold transition-colors focus:outline-hidden"
-                  variant="outline"
+                  className="w-fit border-none px-4 py-2 font-semibold transition-colors focus:outline-hidden"
+                  variant="filled"
                   startAdornment={
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
@@ -90,19 +83,19 @@ export const BillingFull = () => (
                 </Button>
               </Card>
               <Card
-                className="light:bg-athens-gray flex-1"
+                className="flex-1 p-7"
                 contentClassName="flex flex-col gap-6"
               >
                 <span className="font-bold">Billing period</span>
                 <div className="flex items-center gap-2">
                   <span className="font-bold">Monthly</span>
-                  <span className="text-text-secondary text-sm">
+                  <span className="text-content-text-neutral-2 text-sm">
                     (renews Mar 15, 2024)
                   </span>
                 </div>
                 <Button
-                  className="dark:bg-charade/40 dark:hover:bg-charade/60 dark:focus:bg-charade/60 light:bg-blue-200/40 light:hover:bg-blue-200/60 light:focus:bg-blue-200/60 light:text-vulcan w-fit border-none px-4 py-2 font-semibold transition-colors focus:outline-hidden"
-                  variant="outline"
+                  className="w-fit border-none px-4 py-2 font-semibold transition-colors focus:outline-hidden"
+                  variant="filled"
                   startAdornment={
                     <svg
                       xmlns="http://www.w3.org/2000/svg"
@@ -123,24 +116,26 @@ export const BillingFull = () => (
             <Divider className="my-6" variant="secondary" />
             <span className="font-bold">Seats</span>
             <span className="text-sm">Remaining Seats</span>
-            <div className="dark:bg-vulcan light:bg-mystic relative my-3 h-[50px] w-full rounded-full border border-primary/40">
+            <div className="bg-background-neutral-raised-5 relative my-3 h-[50px] w-full rounded-full border border-background-brand-2">
               <motion.div
                 initial={{ width: 0, opacity: 0 }}
                 animate={{ width: '33%', opacity: 1 }}
                 transition={{ type: 'spring', bounce: 0, delay: 0.2 }}
-                className="absolute h-full rounded-full bg-linear-to-r from-transparent to-blue-400"
+                className="absolute h-full rounded-full bg-linear-to-r from-transparent to-background-brand-base"
               />
               <motion.div
                 initial={{ width: 0, opacity: 0 }}
                 animate={{ width: '33%', opacity: 1 }}
                 transition={{ type: 'spring', bounce: 0, delay: 0.2 }}
-                className="absolute h-full rounded-full bg-linear-to-r from-transparent to-blue-400 blur-md"
+                className="absolute h-full rounded-full bg-linear-to-r from-transparent to-background-brand-base blur-md"
               />
             </div>
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2 font-semibold">
-                <div className="border-panel-accent border px-4 py-2">5</div>
-                <span className="d text-sm">of 25 seats used</span>
+                <div className="border-background-neutral-raised-4 border px-4 py-2">
+                  5
+                </div>
+                <span className="text-sm">of 25 seats used</span>
               </div>
               <Button
                 className="h-fit px-4 py-2 font-semibold"
@@ -167,274 +162,251 @@ export const BillingFull = () => (
   </motion.div>
 );
 
-export const PayAndBilling = () => {
-  const chipTheme: ChipTheme = {
-    ...defaultChipTheme,
-    base: `${defaultChipTheme?.base} rounded-full`,
-    colors: {
-      ...defaultChipTheme?.colors,
-      info: {
-        ...defaultChipTheme.colors.info,
-        variants: {
-          ...defaultChipTheme?.colors?.info?.variants,
-          filled: `${defaultChipTheme?.colors?.info?.variants?.filled} text-text-primary bg-info/10 border-info`
-        }
-      },
-      success: {
-        ...defaultChipTheme.colors.success,
-        variants: {
-          ...defaultChipTheme?.colors?.success?.variants,
-          filled: `${defaultChipTheme?.colors?.success?.variants?.filled} text-text-primary bg-success/10 border-success`
-        }
-      }
-    }
-  };
-
-  return (
-    <motion.div
-      initial={{ y: -20, opacity: 0 }}
-      animate={{ y: 0, opacity: 1 }}
-      className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm md:min-w-[960px] md:max-w-[1200px]"
-    >
-      <Card className="p-12 transition-colors">
-        <div className="flex flex-col gap-4">
-          <div className="flex items-center justify-between">
+export const PayAndBilling = () => (
+  <motion.div
+    initial={{ y: -20, opacity: 0 }}
+    animate={{ y: 0, opacity: 1 }}
+    className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm md:min-w-[960px] md:max-w-[1200px]"
+  >
+    <Card className="p-12 transition-colors">
+      <div className="flex flex-col gap-4">
+        <div className="flex items-center justify-between">
+          <div className="flex flex-col">
+            <h2 className="text-xl font-bold">Pay & Billing</h2>
+            <p className="text-content-text-neutral-2 text-sm">
+              Manage your plan and payments
+            </p>
+          </div>
+          <Stack>
+            <Button
+              className="w-fit border-none px-4 py-2 font-semibold transition-colors focus:outline-hidden"
+              variant="filled"
+              color="secondary"
+              endAdornment={
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  fill="currentColor"
+                >
+                  <path d="M12.6667 4.27337L11.7267 3.33337L8.00001 7.06004L4.27334 3.33337L3.33334 4.27337L7.06001 8.00004L3.33334 11.7267L4.27334 12.6667L8.00001 8.94004L11.7267 12.6667L12.6667 11.7267L8.94001 8.00004L12.6667 4.27337Z" />
+                </svg>
+              }
+            >
+              Cancel Subscription
+            </Button>
+            <Button
+              className="flex items-center gap-2 self-stretch px-4 py-2 font-semibold transition-colors focus:outline-hidden"
+              endAdornment={
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  fill="currentColor"
+                >
+                  <path d="M12.9548 8.65337C12.9815 8.44004 13.0015 8.22671 13.0015 8.00004C13.0015 7.77337 12.9815 7.56004 12.9548 7.34671L14.3615 6.24671C14.4881 6.14671 14.5215 5.96671 14.4415 5.82004L13.1081 3.51337C13.0481 3.40671 12.9348 3.34671 12.8148 3.34671C12.7748 3.34671 12.7348 3.35337 12.7015 3.36671L11.0415 4.03337C10.6948 3.76671 10.3215 3.54671 9.91481 3.38004L9.66148 1.61337C9.64148 1.45337 9.50148 1.33337 9.33481 1.33337H6.66815C6.50148 1.33337 6.36148 1.45337 6.34148 1.61337L6.08815 3.38004C5.68148 3.54671 5.30815 3.77337 4.96148 4.03337L3.30148 3.36671C3.26148 3.35337 3.22148 3.34671 3.18148 3.34671C3.06815 3.34671 2.95481 3.40671 2.89481 3.51337L1.56148 5.82004C1.47481 5.96671 1.51481 6.14671 1.64148 6.24671L3.04815 7.34671C3.02148 7.56004 3.00148 7.78004 3.00148 8.00004C3.00148 8.22004 3.02148 8.44004 3.04815 8.65337L1.64148 9.75337C1.51481 9.85337 1.48148 10.0334 1.56148 10.18L2.89481 12.4867C2.95481 12.5934 3.06815 12.6534 3.18815 12.6534C3.22815 12.6534 3.26815 12.6467 3.30148 12.6334L4.96148 11.9667C5.30815 12.2334 5.68148 12.4534 6.08815 12.62L6.34148 14.3867C6.36148 14.5467 6.50148 14.6667 6.66815 14.6667H9.33481C9.50148 14.6667 9.64148 14.5467 9.66148 14.3867L9.91481 12.62C10.3215 12.4534 10.6948 12.2267 11.0415 11.9667L12.7015 12.6334C12.7415 12.6467 12.7815 12.6534 12.8215 12.6534C12.9348 12.6534 13.0481 12.5934 13.1081 12.4867L14.4415 10.18C14.5215 10.0334 14.4881 9.85337 14.3615 9.75337L12.9548 8.65337ZM11.6348 7.51337C11.6615 7.72004 11.6681 7.86004 11.6681 8.00004C11.6681 8.14004 11.6548 8.28671 11.6348 8.48671L11.5415 9.24004L12.1348 9.70671L12.8548 10.2667L12.3881 11.0734L11.5415 10.7334L10.8481 10.4534L10.2481 10.9067C9.96148 11.12 9.68815 11.28 9.41481 11.3934L8.70815 11.68L8.60148 12.4334L8.46815 13.3334H7.53481L7.30148 11.68L6.59481 11.3934C6.30815 11.2734 6.04148 11.12 5.77481 10.92L5.16815 10.4534L4.46148 10.74L3.61481 11.08L3.14815 10.2734L3.86815 9.71337L4.46148 9.24671L4.36815 8.49337C4.34815 8.28671 4.33481 8.13337 4.33481 8.00004C4.33481 7.86671 4.34815 7.71337 4.36815 7.51337L4.46148 6.76004L3.86815 6.29337L3.14815 5.73337L3.61481 4.92671L4.46148 5.26671L5.15481 5.54671L5.75481 5.09337C6.04148 4.88004 6.31481 4.72004 6.58815 4.60671L7.29481 4.32004L7.40148 3.56671L7.53481 2.66671H8.46148L8.69481 4.32004L9.40148 4.60671C9.68815 4.72671 9.95481 4.88004 10.2215 5.08004L10.8281 5.54671L11.5348 5.26004L12.3815 4.92004L12.8481 5.72671L12.1348 6.29337L11.5415 6.76004L11.6348 7.51337ZM8.00148 5.33337C6.52815 5.33337 5.33481 6.52671 5.33481 8.00004C5.33481 9.47337 6.52815 10.6667 8.00148 10.6667C9.47481 10.6667 10.6681 9.47337 10.6681 8.00004C10.6681 6.52671 9.47481 5.33337 8.00148 5.33337ZM8.00148 9.33337C7.26815 9.33337 6.66815 8.73337 6.66815 8.00004C6.66815 7.26671 7.26815 6.66671 8.00148 6.66671C8.73481 6.66671 9.33481 7.26671 9.33481 8.00004C9.33481 8.73337 8.73481 9.33337 8.00148 9.33337Z" />
+                </svg>
+              }
+              color="primary"
+            >
+              Manage Payments
+            </Button>
+          </Stack>
+        </div>
+        <Divider />
+        <div className="flex items-center justify-between">
+          <span className="font-bold">Current plan</span>
+          <Button variant="outline">Change plan</Button>
+        </div>
+        <div className="flex w-full gap-4">
+          <Card
+            className="flex-1 p-7"
+            contentClassName="flex justify-between items-start"
+          >
             <div className="flex flex-col">
-              <h2 className="text-2xl font-bold">Pay & Billing</h2>
-              <p className="text-text-secondary text-base">
-                Manage your plan and payments
-              </p>
+              <span className="text-content-text-neutral-2 text-sm">
+                Monthly plan
+              </span>
+              <div className="flex items-center gap-2 text-2xl font-bold">
+                $1000{' '}
+                <span className="text-content-text-neutral-2 text-sm">
+                  /Month
+                </span>
+              </div>
             </div>
             <Stack>
-              <Button
-                className="dark:bg-charade/40 dark:hover:bg-charade/60 dark:focus:bg-charade/60 light:bg-blue-200/40 light:hover:bg-blue-200/60 light:focus:bg-blue-200/60 light:text-vulcan w-fit border-none px-4 py-2 font-semibold transition-colors focus:outline-hidden"
-                variant="outline"
-                endAdornment={
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="16"
-                    height="16"
-                    viewBox="0 0 16 16"
-                    fill="currentColor"
-                  >
-                    <path d="M12.6667 4.27337L11.7267 3.33337L8.00001 7.06004L4.27334 3.33337L3.33334 4.27337L7.06001 8.00004L3.33334 11.7267L4.27334 12.6667L8.00001 8.94004L11.7267 12.6667L12.6667 11.7267L8.94001 8.00004L12.6667 4.27337Z" />
-                  </svg>
-                }
-              >
-                Cancel Subscription
-              </Button>
-              <Button
-                className="bg-(image:--button-gradient) hover:bg-(image:--button-gradient-hover) focus:bg-(image:--button-gradient-focus) dark:bg-transparent! light:bg-primary light:hover:bg-none light:hover:bg-primary-hover light:focus:bg-primary-hover flex items-center gap-2 self-stretch px-4 py-2 font-semibold transition-colors focus:outline-hidden"
-                endAdornment={
+              <Chip
+                start={
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     width="16"
                     height="16"
                     viewBox="0 0 16 16"
+                    className="text-primary"
                     fill="currentColor"
                   >
-                    <path d="M12.9548 8.65337C12.9815 8.44004 13.0015 8.22671 13.0015 8.00004C13.0015 7.77337 12.9815 7.56004 12.9548 7.34671L14.3615 6.24671C14.4881 6.14671 14.5215 5.96671 14.4415 5.82004L13.1081 3.51337C13.0481 3.40671 12.9348 3.34671 12.8148 3.34671C12.7748 3.34671 12.7348 3.35337 12.7015 3.36671L11.0415 4.03337C10.6948 3.76671 10.3215 3.54671 9.91481 3.38004L9.66148 1.61337C9.64148 1.45337 9.50148 1.33337 9.33481 1.33337H6.66815C6.50148 1.33337 6.36148 1.45337 6.34148 1.61337L6.08815 3.38004C5.68148 3.54671 5.30815 3.77337 4.96148 4.03337L3.30148 3.36671C3.26148 3.35337 3.22148 3.34671 3.18148 3.34671C3.06815 3.34671 2.95481 3.40671 2.89481 3.51337L1.56148 5.82004C1.47481 5.96671 1.51481 6.14671 1.64148 6.24671L3.04815 7.34671C3.02148 7.56004 3.00148 7.78004 3.00148 8.00004C3.00148 8.22004 3.02148 8.44004 3.04815 8.65337L1.64148 9.75337C1.51481 9.85337 1.48148 10.0334 1.56148 10.18L2.89481 12.4867C2.95481 12.5934 3.06815 12.6534 3.18815 12.6534C3.22815 12.6534 3.26815 12.6467 3.30148 12.6334L4.96148 11.9667C5.30815 12.2334 5.68148 12.4534 6.08815 12.62L6.34148 14.3867C6.36148 14.5467 6.50148 14.6667 6.66815 14.6667H9.33481C9.50148 14.6667 9.64148 14.5467 9.66148 14.3867L9.91481 12.62C10.3215 12.4534 10.6948 12.2267 11.0415 11.9667L12.7015 12.6334C12.7415 12.6467 12.7815 12.6534 12.8215 12.6534C12.9348 12.6534 13.0481 12.5934 13.1081 12.4867L14.4415 10.18C14.5215 10.0334 14.4881 9.85337 14.3615 9.75337L12.9548 8.65337ZM11.6348 7.51337C11.6615 7.72004 11.6681 7.86004 11.6681 8.00004C11.6681 8.14004 11.6548 8.28671 11.6348 8.48671L11.5415 9.24004L12.1348 9.70671L12.8548 10.2667L12.3881 11.0734L11.5415 10.7334L10.8481 10.4534L10.2481 10.9067C9.96148 11.12 9.68815 11.28 9.41481 11.3934L8.70815 11.68L8.60148 12.4334L8.46815 13.3334H7.53481L7.30148 11.68L6.59481 11.3934C6.30815 11.2734 6.04148 11.12 5.77481 10.92L5.16815 10.4534L4.46148 10.74L3.61481 11.08L3.14815 10.2734L3.86815 9.71337L4.46148 9.24671L4.36815 8.49337C4.34815 8.28671 4.33481 8.13337 4.33481 8.00004C4.33481 7.86671 4.34815 7.71337 4.36815 7.51337L4.46148 6.76004L3.86815 6.29337L3.14815 5.73337L3.61481 4.92671L4.46148 5.26671L5.15481 5.54671L5.75481 5.09337C6.04148 4.88004 6.31481 4.72004 6.58815 4.60671L7.29481 4.32004L7.40148 3.56671L7.53481 2.66671H8.46148L8.69481 4.32004L9.40148 4.60671C9.68815 4.72671 9.95481 4.88004 10.2215 5.08004L10.8281 5.54671L11.5348 5.26004L12.3815 4.92004L12.8481 5.72671L12.1348 6.29337L11.5415 6.76004L11.6348 7.51337ZM8.00148 5.33337C6.52815 5.33337 5.33481 6.52671 5.33481 8.00004C5.33481 9.47337 6.52815 10.6667 8.00148 10.6667C9.47481 10.6667 10.6681 9.47337 10.6681 8.00004C10.6681 6.52671 9.47481 5.33337 8.00148 5.33337ZM8.00148 9.33337C7.26815 9.33337 6.66815 8.73337 6.66815 8.00004C6.66815 7.26671 7.26815 6.66671 8.00148 6.66671C8.73481 6.66671 9.33481 7.26671 9.33481 8.00004C9.33481 8.73337 8.73481 9.33337 8.00148 9.33337Z" />
+                    <path d="M8 1.33337C4.32 1.33337 1.33334 4.32004 1.33334 8.00004C1.33334 11.68 4.32 14.6667 8 14.6667C11.68 14.6667 14.6667 11.68 14.6667 8.00004C14.6667 4.32004 11.68 1.33337 8 1.33337ZM8 13.3334C5.06 13.3334 2.66667 10.94 2.66667 8.00004C2.66667 5.06004 5.06 2.66671 8 2.66671C10.94 2.66671 13.3333 5.06004 13.3333 8.00004C13.3333 10.94 10.94 13.3334 8 13.3334ZM11.06 5.05337L6.66667 9.44671L4.94 7.72671L4 8.66671L6.66667 11.3334L12 6.00004L11.06 5.05337Z" />
                   </svg>
                 }
-                color="primary"
+                color="info"
+                variant="outline"
               >
-                Manage Payments
-              </Button>
+                Auto Renew
+              </Chip>
+              <Chip color="success" variant="outline">
+                Active
+              </Chip>
             </Stack>
-          </div>
-          <Divider />
-          <div className="flex items-center justify-between">
-            <span className="font-bold">Current plan</span>
-            <Button variant="outline">Change plan</Button>
-          </div>
-          <div className="flex w-full gap-4">
-            <Card
-              className="flex-1"
-              contentClassName="flex justify-between items-start"
-            >
-              <div className="flex flex-col">
-                <span className="text-text-secondary text-sm">
-                  Monthly plan
-                </span>
-                <div className="flex items-center gap-2 text-3xl font-bold">
-                  $1000{' '}
-                  <span className="text-text-secondary text-sm">
-                    /Month
-                  </span>
-                </div>
-              </div>
-              <Stack>
-                <Chip
-                  theme={chipTheme}
-                  start={
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="16"
-                      height="16"
-                      viewBox="0 0 16 16"
-                      className="text-primary"
-                      fill="currentColor"
-                    >
-                      <path d="M8 1.33337C4.32 1.33337 1.33334 4.32004 1.33334 8.00004C1.33334 11.68 4.32 14.6667 8 14.6667C11.68 14.6667 14.6667 11.68 14.6667 8.00004C14.6667 4.32004 11.68 1.33337 8 1.33337ZM8 13.3334C5.06 13.3334 2.66667 10.94 2.66667 8.00004C2.66667 5.06004 5.06 2.66671 8 2.66671C10.94 2.66671 13.3333 5.06004 13.3333 8.00004C13.3333 10.94 10.94 13.3334 8 13.3334ZM11.06 5.05337L6.66667 9.44671L4.94 7.72671L4 8.66671L6.66667 11.3334L12 6.00004L11.06 5.05337Z" />
-                    </svg>
-                  }
-                  color="info"
-                >
-                  Auto Renew
-                </Chip>
-                <Chip theme={chipTheme} color="success">
-                  Active
-                </Chip>
-              </Stack>
-            </Card>
-            <Card className="flex-1">
-              <div className="flex flex-col">
-                <span className="text-text-secondary text-sm">
-                  Renews on
-                </span>
-                <span className="text-3xl font-bold ">Mar 15, 2024</span>
-              </div>
-            </Card>
-          </div>
-          <div className="flex flex-col">
-            <span className="font-bold">Usage</span>
-            <span className="text-text-secondary">
-              Your usage is renewed every month
-            </span>
-          </div>
-          <div className="flex gap-4">
-            <Card className="flex-1" contentClassName="flex flex-col gap-2">
-              <div className="border-panel-accent w-fit border p-4">
+          </Card>
+          <Card className="flex-1 p-7">
+            <div className="flex flex-col">
+              <span className="text-content-text-neutral-2 text-sm">
+                Renews on
+              </span>
+              <span className="text-2xl font-bold ">Mar 15, 2024</span>
+            </div>
+          </Card>
+        </div>
+        <div className="flex flex-col">
+          <span className="font-bold">Usage</span>
+          <span className="text-content-text-neutral-2">
+            Your usage is renewed every month
+          </span>
+        </div>
+        <div className="flex gap-4">
+          <Card className="flex-1 p-7" contentClassName="flex flex-col gap-2">
+            <div className="border-stroke-neutral-3 w-fit border p-4">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="30"
+                height="30"
+                viewBox="0 0 30 30"
+                fill="currentColor"
+              >
+                <path d="M15 2.5C13.8281 2.5 12.8305 2.97321 12.1899 3.69385C11.5494 4.41449 11.25 5.33854 11.25 6.25C11.25 6.90401 11.4646 7.53774 11.7883 8.125H8.49732C6.93557 8.125 5.5613 9.18786 5.16968 10.6995L2.09107 22.5745C1.53226 24.7289 3.19295 26.875 5.41871 26.875H24.6961C26.8743 26.875 28.5241 24.8177 28.0518 22.6917L25.4126 10.8167C25.064 9.24931 23.6628 8.125 22.0569 8.125H18.2117C18.5354 7.53774 18.75 6.90401 18.75 6.25C18.75 5.33854 18.4506 4.41449 17.8101 3.69385C17.1695 2.97321 16.1719 2.5 15 2.5ZM15 4.375C15.7031 4.375 16.1118 4.60492 16.4087 4.93896C16.7056 5.27301 16.875 5.75521 16.875 6.25C16.875 6.74479 16.7056 7.22699 16.4087 7.56104C16.1118 7.89508 15.7031 8.125 15 8.125C14.2969 8.125 13.8882 7.89508 13.5913 7.56104C13.2944 7.22699 13.125 6.74479 13.125 6.25C13.125 5.75521 13.2944 5.27301 13.5913 4.93896C13.8882 4.60492 14.2969 4.375 15 4.375ZM8.49732 10H15H22.0569C22.7948 10 23.4226 10.503 23.5828 11.2231L26.2207 23.0981C26.4421 24.0946 25.7166 25 24.6961 25H5.41871C4.37321 25 3.64259 24.0575 3.90504 23.0457L6.98487 11.1707C7.16451 10.4773 7.78033 10 8.49732 10ZM14.9854 11.2366C14.7369 11.2405 14.5002 11.3428 14.3272 11.5211C14.1541 11.6994 14.0589 11.9391 14.0625 12.1875V12.6416C12.8151 12.998 11.875 14.1053 11.875 15.4578V15.459C11.875 17.0926 13.2199 18.4375 14.8535 18.4375H15.7715C16.3916 18.4375 16.875 18.9209 16.875 19.541C16.875 20.1576 16.3971 20.6381 15.78 20.6433L14.6301 20.6531C14.2268 20.6531 13.9016 20.3915 13.7903 20.0378C13.7553 19.9181 13.6968 19.8065 13.6182 19.7096C13.5395 19.6128 13.4423 19.5326 13.3323 19.4737C13.2223 19.4149 13.1016 19.3787 12.9774 19.3671C12.8531 19.3555 12.7278 19.3688 12.6088 19.4062C12.4898 19.4437 12.3795 19.5045 12.2843 19.5852C12.1891 19.6658 12.1109 19.7646 12.0544 19.8759C11.9979 19.9871 11.9641 20.1085 11.9551 20.2329C11.9461 20.3574 11.962 20.4824 12.002 20.6006C12.2935 21.5269 13.1124 22.1213 14.0625 22.3401V22.8125C14.0608 22.9367 14.0837 23.0601 14.13 23.1754C14.1764 23.2906 14.2451 23.3956 14.3324 23.484C14.4196 23.5725 14.5235 23.6428 14.6381 23.6907C14.7528 23.7387 14.8758 23.7634 15 23.7634C15.1242 23.7634 15.2473 23.7387 15.3619 23.6907C15.4765 23.6428 15.5804 23.5725 15.6677 23.484C15.7549 23.3956 15.8237 23.2906 15.87 23.1754C15.9163 23.0601 15.9393 22.9367 15.9375 22.8125V22.489C17.4931 22.3976 18.75 21.1156 18.75 19.541C18.75 17.9073 17.4052 16.5625 15.7715 16.5625H14.8535C14.2334 16.5625 13.75 16.0791 13.75 15.459V15.4578C13.75 14.8439 14.2237 14.3632 14.8377 14.3542L15.3528 14.3469C15.7584 14.3469 16.086 14.6117 16.1951 14.9683C16.2302 15.087 16.2885 15.1977 16.3666 15.2938C16.4447 15.39 16.5411 15.4697 16.6501 15.5283C16.7592 15.587 16.8789 15.6235 17.0021 15.6356C17.1254 15.6478 17.2498 15.6354 17.3683 15.5992C17.4868 15.563 17.5969 15.5037 17.6923 15.4247C17.7877 15.3457 17.8664 15.2486 17.9241 15.1389C17.9817 15.0293 18.0171 14.9094 18.0281 14.786C18.0391 14.6626 18.0256 14.5383 17.9883 14.4202C17.7037 13.4897 16.8862 12.8926 15.9375 12.6672V12.1875C15.9393 12.062 15.9159 11.9375 15.8687 11.8212C15.8214 11.7049 15.7514 11.5993 15.6626 11.5106C15.5738 11.422 15.4681 11.352 15.3518 11.3049C15.2354 11.2579 15.1108 11.2346 14.9854 11.2366Z" />
+              </svg>
+            </div>
+            <div className="text-content-text-neutral-2 flex items-center gap-2 text-sm">
+              Design Credits
+              <Tooltip content={'Hover Me'}>
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  width="30"
-                  height="30"
-                  viewBox="0 0 30 30"
-                  fill="currentColor"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  fill="white"
                 >
-                  <path d="M15 2.5C13.8281 2.5 12.8305 2.97321 12.1899 3.69385C11.5494 4.41449 11.25 5.33854 11.25 6.25C11.25 6.90401 11.4646 7.53774 11.7883 8.125H8.49732C6.93557 8.125 5.5613 9.18786 5.16968 10.6995L2.09107 22.5745C1.53226 24.7289 3.19295 26.875 5.41871 26.875H24.6961C26.8743 26.875 28.5241 24.8177 28.0518 22.6917L25.4126 10.8167C25.064 9.24931 23.6628 8.125 22.0569 8.125H18.2117C18.5354 7.53774 18.75 6.90401 18.75 6.25C18.75 5.33854 18.4506 4.41449 17.8101 3.69385C17.1695 2.97321 16.1719 2.5 15 2.5ZM15 4.375C15.7031 4.375 16.1118 4.60492 16.4087 4.93896C16.7056 5.27301 16.875 5.75521 16.875 6.25C16.875 6.74479 16.7056 7.22699 16.4087 7.56104C16.1118 7.89508 15.7031 8.125 15 8.125C14.2969 8.125 13.8882 7.89508 13.5913 7.56104C13.2944 7.22699 13.125 6.74479 13.125 6.25C13.125 5.75521 13.2944 5.27301 13.5913 4.93896C13.8882 4.60492 14.2969 4.375 15 4.375ZM8.49732 10H15H22.0569C22.7948 10 23.4226 10.503 23.5828 11.2231L26.2207 23.0981C26.4421 24.0946 25.7166 25 24.6961 25H5.41871C4.37321 25 3.64259 24.0575 3.90504 23.0457L6.98487 11.1707C7.16451 10.4773 7.78033 10 8.49732 10ZM14.9854 11.2366C14.7369 11.2405 14.5002 11.3428 14.3272 11.5211C14.1541 11.6994 14.0589 11.9391 14.0625 12.1875V12.6416C12.8151 12.998 11.875 14.1053 11.875 15.4578V15.459C11.875 17.0926 13.2199 18.4375 14.8535 18.4375H15.7715C16.3916 18.4375 16.875 18.9209 16.875 19.541C16.875 20.1576 16.3971 20.6381 15.78 20.6433L14.6301 20.6531C14.2268 20.6531 13.9016 20.3915 13.7903 20.0378C13.7553 19.9181 13.6968 19.8065 13.6182 19.7096C13.5395 19.6128 13.4423 19.5326 13.3323 19.4737C13.2223 19.4149 13.1016 19.3787 12.9774 19.3671C12.8531 19.3555 12.7278 19.3688 12.6088 19.4062C12.4898 19.4437 12.3795 19.5045 12.2843 19.5852C12.1891 19.6658 12.1109 19.7646 12.0544 19.8759C11.9979 19.9871 11.9641 20.1085 11.9551 20.2329C11.9461 20.3574 11.962 20.4824 12.002 20.6006C12.2935 21.5269 13.1124 22.1213 14.0625 22.3401V22.8125C14.0608 22.9367 14.0837 23.0601 14.13 23.1754C14.1764 23.2906 14.2451 23.3956 14.3324 23.484C14.4196 23.5725 14.5235 23.6428 14.6381 23.6907C14.7528 23.7387 14.8758 23.7634 15 23.7634C15.1242 23.7634 15.2473 23.7387 15.3619 23.6907C15.4765 23.6428 15.5804 23.5725 15.6677 23.484C15.7549 23.3956 15.8237 23.2906 15.87 23.1754C15.9163 23.0601 15.9393 22.9367 15.9375 22.8125V22.489C17.4931 22.3976 18.75 21.1156 18.75 19.541C18.75 17.9073 17.4052 16.5625 15.7715 16.5625H14.8535C14.2334 16.5625 13.75 16.0791 13.75 15.459V15.4578C13.75 14.8439 14.2237 14.3632 14.8377 14.3542L15.3528 14.3469C15.7584 14.3469 16.086 14.6117 16.1951 14.9683C16.2302 15.087 16.2885 15.1977 16.3666 15.2938C16.4447 15.39 16.5411 15.4697 16.6501 15.5283C16.7592 15.587 16.8789 15.6235 17.0021 15.6356C17.1254 15.6478 17.2498 15.6354 17.3683 15.5992C17.4868 15.563 17.5969 15.5037 17.6923 15.4247C17.7877 15.3457 17.8664 15.2486 17.9241 15.1389C17.9817 15.0293 18.0171 14.9094 18.0281 14.786C18.0391 14.6626 18.0256 14.5383 17.9883 14.4202C17.7037 13.4897 16.8862 12.8926 15.9375 12.6672V12.1875C15.9393 12.062 15.9159 11.9375 15.8687 11.8212C15.8214 11.7049 15.7514 11.5993 15.6626 11.5106C15.5738 11.422 15.4681 11.352 15.3518 11.3049C15.2354 11.2579 15.1108 11.2346 14.9854 11.2366Z" />
+                  <path d="M7.33334 4.66671H8.66668V6.00004H7.33334V4.66671ZM7.33334 7.33337H8.66668V11.3334H7.33334V7.33337ZM8.00001 1.33337C4.32001 1.33337 1.33334 4.32004 1.33334 8.00004C1.33334 11.68 4.32001 14.6667 8.00001 14.6667C11.68 14.6667 14.6667 11.68 14.6667 8.00004C14.6667 4.32004 11.68 1.33337 8.00001 1.33337ZM8.00001 13.3334C5.06001 13.3334 2.66668 10.94 2.66668 8.00004C2.66668 5.06004 5.06001 2.66671 8.00001 2.66671C10.94 2.66671 13.3333 5.06004 13.3333 8.00004C13.3333 10.94 10.94 13.3334 8.00001 13.3334Z" />
                 </svg>
-              </div>
-              <div className="text-text-secondary flex items-center gap-2 text-sm">
-                Design Credits
-                <Tooltip content={'Hover Me'}>
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="16"
-                    height="16"
-                    viewBox="0 0 16 16"
-                    fill="white"
-                  >
-                    <path d="M7.33334 4.66671H8.66668V6.00004H7.33334V4.66671ZM7.33334 7.33337H8.66668V11.3334H7.33334V7.33337ZM8.00001 1.33337C4.32001 1.33337 1.33334 4.32004 1.33334 8.00004C1.33334 11.68 4.32001 14.6667 8.00001 14.6667C11.68 14.6667 14.6667 11.68 14.6667 8.00004C14.6667 4.32004 11.68 1.33337 8.00001 1.33337ZM8.00001 13.3334C5.06001 13.3334 2.66668 10.94 2.66668 8.00004C2.66668 5.06004 5.06001 2.66671 8.00001 2.66671C10.94 2.66671 13.3333 5.06004 13.3333 8.00004C13.3333 10.94 10.94 13.3334 8.00001 13.3334Z" />
-                  </svg>
-                </Tooltip>
-              </div>
-              <span className="text-xl font-bold">100 of 500</span>
-              <div className="dark:bg-vulcan light:bg-mystic relative h-3 w-full rounded-full border border-primary/40">
-                <motion.div
-                  initial={{ width: 0, opacity: 0 }}
-                  animate={{ width: `${(100 / 500) * 100}%`, opacity: 1 }}
-                  transition={{ type: 'spring', bounce: 0, delay: 0.2 }}
-                  className="absolute h-full rounded-full bg-linear-to-r from-transparent to-blue-400"
-                />
-                <motion.div
-                  initial={{ width: 0 }}
-                  animate={{ width: `${(100 / 500) * 100}%` }}
-                  transition={{ type: 'spring', bounce: 0, delay: 0.2 }}
-                  className="absolute h-full rounded-full bg-linear-to-r from-transparent to-blue-400 blur-md"
-                />
-              </div>
-            </Card>
-            <Card className="flex-1" contentClassName="flex flex-col gap-2">
-              <div className="border-panel-accent w-fit border p-4">
+              </Tooltip>
+            </div>
+            <span className="text-lg font-bold">100 of 500</span>
+            <div className="bg-background-neutral-raised-5 relative h-3 w-full rounded-full border border-background-brand-2">
+              <motion.div
+                initial={{ width: 0, opacity: 0 }}
+                animate={{ width: `${(100 / 500) * 100}%`, opacity: 1 }}
+                transition={{ type: 'spring', bounce: 0, delay: 0.2 }}
+                className="absolute h-full rounded-full bg-linear-to-r from-transparent to-background-brand-base"
+              />
+              <motion.div
+                initial={{ width: 0 }}
+                animate={{ width: `${(100 / 500) * 100}%` }}
+                transition={{ type: 'spring', bounce: 0, delay: 0.2 }}
+                className="absolute h-full rounded-full bg-linear-to-r from-transparent to-background-brand-base blur-md"
+              />
+            </div>
+          </Card>
+          <Card className="flex-1 p-7" contentClassName="flex flex-col gap-2">
+            <div className="border-stroke-neutral-3 w-fit border p-4">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="30"
+                height="30"
+                viewBox="0 0 30 30"
+                fill="currentColor"
+              >
+                <path d="M15 2.5C11.5593 2.5 8.75 5.30933 8.75 8.75C8.75 12.1907 11.5593 15 15 15C18.4407 15 21.25 12.1907 21.25 8.75C21.25 5.30933 18.4407 2.5 15 2.5ZM15 4.375C17.4274 4.375 19.375 6.32265 19.375 8.75C19.375 11.1774 17.4274 13.125 15 13.125C12.5726 13.125 10.625 11.1774 10.625 8.75C10.625 6.32265 12.5726 4.375 15 4.375ZM7.48657 17.5C6.12419 17.5 5 18.6242 5 19.9866V20.9375C5 23.1901 6.42454 24.9326 8.31665 25.9766C10.2088 27.0205 12.6051 27.5 15 27.5C17.3949 27.5 19.7912 27.0205 21.6833 25.9766C23.2966 25.0865 24.5108 23.6641 24.8511 21.875H25.0012V19.9866C25.0012 18.6242 23.8758 17.5 22.5134 17.5H7.48657ZM7.48657 19.375H22.5134C22.8623 19.375 23.1262 19.6377 23.1262 19.9866V20H23.125V20.9375C23.125 22.4349 22.2839 23.5049 20.7776 24.3359C19.2713 25.167 17.1363 25.625 15 25.625C12.8637 25.625 10.7287 25.167 9.22241 24.3359C7.71608 23.5049 6.875 22.4349 6.875 20.9375V19.9866C6.875 19.6377 7.1377 19.375 7.48657 19.375Z" />
+              </svg>
+            </div>
+            <div className="text-content-text-neutral-2 flex items-center gap-2 text-sm">
+              Design Credits
+              <Tooltip content={'Hover Me'}>
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  width="30"
-                  height="30"
-                  viewBox="0 0 30 30"
-                  fill="currentColor"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  fill="white"
                 >
-                  <path d="M15 2.5C11.5593 2.5 8.75 5.30933 8.75 8.75C8.75 12.1907 11.5593 15 15 15C18.4407 15 21.25 12.1907 21.25 8.75C21.25 5.30933 18.4407 2.5 15 2.5ZM15 4.375C17.4274 4.375 19.375 6.32265 19.375 8.75C19.375 11.1774 17.4274 13.125 15 13.125C12.5726 13.125 10.625 11.1774 10.625 8.75C10.625 6.32265 12.5726 4.375 15 4.375ZM7.48657 17.5C6.12419 17.5 5 18.6242 5 19.9866V20.9375C5 23.1901 6.42454 24.9326 8.31665 25.9766C10.2088 27.0205 12.6051 27.5 15 27.5C17.3949 27.5 19.7912 27.0205 21.6833 25.9766C23.2966 25.0865 24.5108 23.6641 24.8511 21.875H25.0012V19.9866C25.0012 18.6242 23.8758 17.5 22.5134 17.5H7.48657ZM7.48657 19.375H22.5134C22.8623 19.375 23.1262 19.6377 23.1262 19.9866V20H23.125V20.9375C23.125 22.4349 22.2839 23.5049 20.7776 24.3359C19.2713 25.167 17.1363 25.625 15 25.625C12.8637 25.625 10.7287 25.167 9.22241 24.3359C7.71608 23.5049 6.875 22.4349 6.875 20.9375V19.9866C6.875 19.6377 7.1377 19.375 7.48657 19.375Z" />
+                  <path d="M7.33334 4.66671H8.66668V6.00004H7.33334V4.66671ZM7.33334 7.33337H8.66668V11.3334H7.33334V7.33337ZM8.00001 1.33337C4.32001 1.33337 1.33334 4.32004 1.33334 8.00004C1.33334 11.68 4.32001 14.6667 8.00001 14.6667C11.68 14.6667 14.6667 11.68 14.6667 8.00004C14.6667 4.32004 11.68 1.33337 8.00001 1.33337ZM8.00001 13.3334C5.06001 13.3334 2.66668 10.94 2.66668 8.00004C2.66668 5.06004 5.06001 2.66671 8.00001 2.66671C10.94 2.66671 13.3333 5.06004 13.3333 8.00004C13.3333 10.94 10.94 13.3334 8.00001 13.3334Z" />
                 </svg>
-              </div>
-              <div className="text-text-secondary flex items-center gap-2 text-sm">
-                Design Credits
-                <Tooltip content={'Hover Me'}>
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="16"
-                    height="16"
-                    viewBox="0 0 16 16"
-                    fill="white"
-                  >
-                    <path d="M7.33334 4.66671H8.66668V6.00004H7.33334V4.66671ZM7.33334 7.33337H8.66668V11.3334H7.33334V7.33337ZM8.00001 1.33337C4.32001 1.33337 1.33334 4.32004 1.33334 8.00004C1.33334 11.68 4.32001 14.6667 8.00001 14.6667C11.68 14.6667 14.6667 11.68 14.6667 8.00004C14.6667 4.32004 11.68 1.33337 8.00001 1.33337ZM8.00001 13.3334C5.06001 13.3334 2.66668 10.94 2.66668 8.00004C2.66668 5.06004 5.06001 2.66671 8.00001 2.66671C10.94 2.66671 13.3333 5.06004 13.3333 8.00004C13.3333 10.94 10.94 13.3334 8.00001 13.3334Z" />
-                  </svg>
-                </Tooltip>
-              </div>
-              <span className="text-xl font-bold">33 of 50</span>
-              <div className="dark:bg-vulcan light:bg-mystic relative h-3 w-full rounded-full border border-primary/40">
-                <motion.div
-                  initial={{ width: 0, opacity: 0 }}
-                  animate={{ width: `${(33 / 50) * 100}%`, opacity: 1 }}
-                  transition={{ type: 'spring', bounce: 0, delay: 0.2 }}
-                  className="absolute h-full rounded-full bg-linear-to-r from-transparent to-blue-400"
-                />
-                <motion.div
-                  initial={{ width: 0 }}
-                  animate={{ width: `${(33 / 50) * 100}%` }}
-                  transition={{ type: 'spring', bounce: 0, delay: 0.2 }}
-                  className="absolute h-full rounded-full bg-linear-to-r from-transparent to-blue-400 blur-md"
-                />
-              </div>
-            </Card>
-            <Card className="flex-1" contentClassName="flex flex-col gap-2">
-              <div className="border-panel-accent w-fit border p-4">
+              </Tooltip>
+            </div>
+            <span className="text-lg font-bold">33 of 50</span>
+            <div className="bg-background-neutral-raised-5 relative h-3 w-full rounded-full border border-background-brand-2">
+              <motion.div
+                initial={{ width: 0, opacity: 0 }}
+                animate={{ width: `${(33 / 50) * 100}%`, opacity: 1 }}
+                transition={{ type: 'spring', bounce: 0, delay: 0.2 }}
+                className="absolute h-full rounded-full bg-linear-to-r from-transparent to-background-brand-base"
+              />
+              <motion.div
+                initial={{ width: 0 }}
+                animate={{ width: `${(33 / 50) * 100}%` }}
+                transition={{ type: 'spring', bounce: 0, delay: 0.2 }}
+                className="absolute h-full rounded-full bg-linear-to-r from-transparent to-background-brand-base blur-md"
+              />
+            </div>
+          </Card>
+          <Card className="flex-1 p-7" contentClassName="flex flex-col gap-2">
+            <div className="border-stroke-neutral-3 w-fit border p-4">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="30"
+                height="30"
+                viewBox="0 0 30 30"
+                fill="currentColor"
+              >
+                <path d="M5.3125 6.25C3.42514 6.25 1.875 7.80014 1.875 9.6875V21.5625C1.875 23.4499 3.42514 25 5.3125 25H24.6875C26.5749 25 28.125 23.4499 28.125 21.5625V9.6875C28.125 7.80014 26.5749 6.25 24.6875 6.25H5.3125ZM5.3125 8.125H24.6875C25.5614 8.125 26.25 8.81361 26.25 9.6875V21.5625C26.25 22.4364 25.5614 23.125 24.6875 23.125H5.3125C4.43861 23.125 3.75 22.4364 3.75 21.5625V9.6875C3.75 8.81361 4.43861 8.125 5.3125 8.125ZM6.5625 10.625C6.43827 10.6232 6.31493 10.6462 6.19965 10.6925C6.08436 10.7388 5.97944 10.8076 5.89097 10.8949C5.8025 10.9821 5.73224 11.086 5.68429 11.2006C5.63634 11.3153 5.61165 11.4383 5.61165 11.5625C5.61165 11.6867 5.63634 11.8097 5.68429 11.9244C5.73224 12.039 5.8025 12.1429 5.89097 12.2301C5.97944 12.3174 6.08436 12.3862 6.19965 12.4325C6.31493 12.4788 6.43827 12.5018 6.5625 12.5H15.3125C15.4367 12.5018 15.5601 12.4788 15.6754 12.4325C15.7906 12.3862 15.8956 12.3174 15.984 12.2301C16.0725 12.1429 16.1428 12.039 16.1907 11.9244C16.2387 11.8097 16.2634 11.6867 16.2634 11.5625C16.2634 11.4383 16.2387 11.3153 16.1907 11.2006C16.1428 11.086 16.0725 10.9821 15.984 10.8949C15.8956 10.8076 15.7906 10.7388 15.6754 10.6925C15.5601 10.6462 15.4367 10.6232 15.3125 10.625H6.5625ZM6.5625 14.375C6.43827 14.3732 6.31493 14.3962 6.19965 14.4425C6.08436 14.4888 5.97944 14.5576 5.89097 14.6449C5.8025 14.7321 5.73224 14.836 5.68429 14.9506C5.63634 15.0653 5.61165 15.1883 5.61165 15.3125C5.61165 15.4367 5.63634 15.5597 5.68429 15.6744C5.73224 15.789 5.8025 15.8929 5.89097 15.9801C5.97944 16.0674 6.08436 16.1362 6.19965 16.1825C6.31493 16.2288 6.43827 16.2518 6.5625 16.25H12.1875C12.3117 16.2518 12.4351 16.2288 12.5504 16.1825C12.6656 16.1362 12.7706 16.0674 12.859 15.9801C12.9475 15.8929 13.0178 15.789 13.0657 15.6744C13.1137 15.5597 13.1384 15.4367 13.1384 15.3125C13.1384 15.1883 13.1137 15.0653 13.0657 14.9506C13.0178 14.836 12.9475 14.7321 12.859 14.6449C12.7706 14.5576 12.6656 14.4888 12.5504 14.4425C12.4351 14.3962 12.3117 14.3732 12.1875 14.375H6.5625ZM16.7188 16.25C16.1127 16.25 15.7213 16.607 15.4639 16.9226C15.2064 17.2382 15.0268 17.5901 14.873 17.9675C14.5656 18.7224 14.375 19.557 14.375 20.3125C14.3732 20.4367 14.3962 20.5601 14.4425 20.6754C14.4888 20.7906 14.5576 20.8956 14.6449 20.984C14.7321 21.0725 14.836 21.1428 14.9506 21.1907C15.0653 21.2387 15.1883 21.2634 15.3125 21.2634C15.4367 21.2634 15.5597 21.2387 15.6744 21.1907C15.789 21.1428 15.8929 21.0725 15.9801 20.984C16.0674 20.8956 16.1362 20.7906 16.1825 20.6754C16.2288 20.5601 16.2518 20.4367 16.25 20.3125C16.25 19.9255 16.3963 19.1975 16.6089 18.6755C16.6261 18.6334 16.641 18.6234 16.6589 18.584C16.7285 18.75 16.7906 18.8707 16.8628 19.0698C17.0009 19.4507 17.1347 19.852 17.3096 20.2234C17.397 20.4091 17.4889 20.5899 17.6526 20.7837C17.8163 20.9775 18.125 21.25 18.5938 21.25C19.4844 21.25 19.9785 20.6252 20.26 20.2649C20.2635 20.2604 20.2638 20.2596 20.2673 20.2551C20.344 20.3245 20.3638 20.3544 20.4675 20.4333C21.026 20.8589 21.9623 21.25 23.4375 21.25C23.5617 21.2518 23.6851 21.2288 23.8004 21.1825C23.9156 21.1362 24.0206 21.0674 24.109 20.9802C24.1975 20.8929 24.2678 20.789 24.3157 20.6744C24.3637 20.5597 24.3884 20.4367 24.3884 20.3125C24.3884 20.1883 24.3637 20.0653 24.3157 19.9506C24.2678 19.836 24.1975 19.7321 24.109 19.6449C24.0206 19.5576 23.9156 19.4888 23.8004 19.4425C23.6851 19.3962 23.5617 19.3732 23.4375 19.375C22.2564 19.375 21.8646 19.1411 21.6028 18.9417C21.4719 18.8419 21.3734 18.7303 21.189 18.5632C21.0045 18.3962 20.625 18.125 20.1562 18.125C19.5586 18.125 19.3155 18.4555 19.1553 18.6365C19.0249 18.7837 18.9397 18.9061 18.8525 19.0222C18.7785 18.8291 18.7119 18.6685 18.6255 18.4302C18.4804 18.0298 18.3269 17.6071 18.1006 17.2107C17.9874 17.0125 17.8576 16.8154 17.6501 16.6272C17.4427 16.4389 17.1103 16.25 16.7188 16.25Z" />
+              </svg>
+            </div>
+            <div className="text-content-text-neutral-2 flex items-center gap-2 text-sm">
+              Design Credits
+              <Tooltip content={'Hover Me'}>
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  width="30"
-                  height="30"
-                  viewBox="0 0 30 30"
-                  fill="currentColor"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  fill="white"
                 >
-                  <path d="M5.3125 6.25C3.42514 6.25 1.875 7.80014 1.875 9.6875V21.5625C1.875 23.4499 3.42514 25 5.3125 25H24.6875C26.5749 25 28.125 23.4499 28.125 21.5625V9.6875C28.125 7.80014 26.5749 6.25 24.6875 6.25H5.3125ZM5.3125 8.125H24.6875C25.5614 8.125 26.25 8.81361 26.25 9.6875V21.5625C26.25 22.4364 25.5614 23.125 24.6875 23.125H5.3125C4.43861 23.125 3.75 22.4364 3.75 21.5625V9.6875C3.75 8.81361 4.43861 8.125 5.3125 8.125ZM6.5625 10.625C6.43827 10.6232 6.31493 10.6462 6.19965 10.6925C6.08436 10.7388 5.97944 10.8076 5.89097 10.8949C5.8025 10.9821 5.73224 11.086 5.68429 11.2006C5.63634 11.3153 5.61165 11.4383 5.61165 11.5625C5.61165 11.6867 5.63634 11.8097 5.68429 11.9244C5.73224 12.039 5.8025 12.1429 5.89097 12.2301C5.97944 12.3174 6.08436 12.3862 6.19965 12.4325C6.31493 12.4788 6.43827 12.5018 6.5625 12.5H15.3125C15.4367 12.5018 15.5601 12.4788 15.6754 12.4325C15.7906 12.3862 15.8956 12.3174 15.984 12.2301C16.0725 12.1429 16.1428 12.039 16.1907 11.9244C16.2387 11.8097 16.2634 11.6867 16.2634 11.5625C16.2634 11.4383 16.2387 11.3153 16.1907 11.2006C16.1428 11.086 16.0725 10.9821 15.984 10.8949C15.8956 10.8076 15.7906 10.7388 15.6754 10.6925C15.5601 10.6462 15.4367 10.6232 15.3125 10.625H6.5625ZM6.5625 14.375C6.43827 14.3732 6.31493 14.3962 6.19965 14.4425C6.08436 14.4888 5.97944 14.5576 5.89097 14.6449C5.8025 14.7321 5.73224 14.836 5.68429 14.9506C5.63634 15.0653 5.61165 15.1883 5.61165 15.3125C5.61165 15.4367 5.63634 15.5597 5.68429 15.6744C5.73224 15.789 5.8025 15.8929 5.89097 15.9801C5.97944 16.0674 6.08436 16.1362 6.19965 16.1825C6.31493 16.2288 6.43827 16.2518 6.5625 16.25H12.1875C12.3117 16.2518 12.4351 16.2288 12.5504 16.1825C12.6656 16.1362 12.7706 16.0674 12.859 15.9801C12.9475 15.8929 13.0178 15.789 13.0657 15.6744C13.1137 15.5597 13.1384 15.4367 13.1384 15.3125C13.1384 15.1883 13.1137 15.0653 13.0657 14.9506C13.0178 14.836 12.9475 14.7321 12.859 14.6449C12.7706 14.5576 12.6656 14.4888 12.5504 14.4425C12.4351 14.3962 12.3117 14.3732 12.1875 14.375H6.5625ZM16.7188 16.25C16.1127 16.25 15.7213 16.607 15.4639 16.9226C15.2064 17.2382 15.0268 17.5901 14.873 17.9675C14.5656 18.7224 14.375 19.557 14.375 20.3125C14.3732 20.4367 14.3962 20.5601 14.4425 20.6754C14.4888 20.7906 14.5576 20.8956 14.6449 20.984C14.7321 21.0725 14.836 21.1428 14.9506 21.1907C15.0653 21.2387 15.1883 21.2634 15.3125 21.2634C15.4367 21.2634 15.5597 21.2387 15.6744 21.1907C15.789 21.1428 15.8929 21.0725 15.9801 20.984C16.0674 20.8956 16.1362 20.7906 16.1825 20.6754C16.2288 20.5601 16.2518 20.4367 16.25 20.3125C16.25 19.9255 16.3963 19.1975 16.6089 18.6755C16.6261 18.6334 16.641 18.6234 16.6589 18.584C16.7285 18.75 16.7906 18.8707 16.8628 19.0698C17.0009 19.4507 17.1347 19.852 17.3096 20.2234C17.397 20.4091 17.4889 20.5899 17.6526 20.7837C17.8163 20.9775 18.125 21.25 18.5938 21.25C19.4844 21.25 19.9785 20.6252 20.26 20.2649C20.2635 20.2604 20.2638 20.2596 20.2673 20.2551C20.344 20.3245 20.3638 20.3544 20.4675 20.4333C21.026 20.8589 21.9623 21.25 23.4375 21.25C23.5617 21.2518 23.6851 21.2288 23.8004 21.1825C23.9156 21.1362 24.0206 21.0674 24.109 20.9802C24.1975 20.8929 24.2678 20.789 24.3157 20.6744C24.3637 20.5597 24.3884 20.4367 24.3884 20.3125C24.3884 20.1883 24.3637 20.0653 24.3157 19.9506C24.2678 19.836 24.1975 19.7321 24.109 19.6449C24.0206 19.5576 23.9156 19.4888 23.8004 19.4425C23.6851 19.3962 23.5617 19.3732 23.4375 19.375C22.2564 19.375 21.8646 19.1411 21.6028 18.9417C21.4719 18.8419 21.3734 18.7303 21.189 18.5632C21.0045 18.3962 20.625 18.125 20.1562 18.125C19.5586 18.125 19.3155 18.4555 19.1553 18.6365C19.0249 18.7837 18.9397 18.9061 18.8525 19.0222C18.7785 18.8291 18.7119 18.6685 18.6255 18.4302C18.4804 18.0298 18.3269 17.6071 18.1006 17.2107C17.9874 17.0125 17.8576 16.8154 17.6501 16.6272C17.4427 16.4389 17.1103 16.25 16.7188 16.25Z" />
+                  <path d="M7.33334 4.66671H8.66668V6.00004H7.33334V4.66671ZM7.33334 7.33337H8.66668V11.3334H7.33334V7.33337ZM8.00001 1.33337C4.32001 1.33337 1.33334 4.32004 1.33334 8.00004C1.33334 11.68 4.32001 14.6667 8.00001 14.6667C11.68 14.6667 14.6667 11.68 14.6667 8.00004C14.6667 4.32004 11.68 1.33337 8.00001 1.33337ZM8.00001 13.3334C5.06001 13.3334 2.66668 10.94 2.66668 8.00004C2.66668 5.06004 5.06001 2.66671 8.00001 2.66671C10.94 2.66671 13.3333 5.06004 13.3333 8.00004C13.3333 10.94 10.94 13.3334 8.00001 13.3334Z" />
                 </svg>
-              </div>
-              <div className="text-text-secondary flex items-center gap-2 text-sm">
-                Design Credits
-                <Tooltip content={'Hover Me'}>
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="16"
-                    height="16"
-                    viewBox="0 0 16 16"
-                    fill="white"
-                  >
-                    <path d="M7.33334 4.66671H8.66668V6.00004H7.33334V4.66671ZM7.33334 7.33337H8.66668V11.3334H7.33334V7.33337ZM8.00001 1.33337C4.32001 1.33337 1.33334 4.32004 1.33334 8.00004C1.33334 11.68 4.32001 14.6667 8.00001 14.6667C11.68 14.6667 14.6667 11.68 14.6667 8.00004C14.6667 4.32004 11.68 1.33337 8.00001 1.33337ZM8.00001 13.3334C5.06001 13.3334 2.66668 10.94 2.66668 8.00004C2.66668 5.06004 5.06001 2.66671 8.00001 2.66671C10.94 2.66671 13.3333 5.06004 13.3333 8.00004C13.3333 10.94 10.94 13.3334 8.00001 13.3334Z" />
-                  </svg>
-                </Tooltip>
-              </div>
-              <span className="text-xl font-bold">47 of 125</span>
-              <div className="dark:bg-vulcan light:bg-mystic relative h-3 w-full rounded-full border border-primary/40">
-                <motion.div
-                  initial={{ width: 0, opacity: 0 }}
-                  animate={{ width: `${(47 / 125) * 100}%`, opacity: 1 }}
-                  transition={{ type: 'spring', bounce: 0, delay: 0.2 }}
-                  className="absolute h-full rounded-full bg-linear-to-r from-transparent to-blue-400"
-                />
-                <motion.div
-                  initial={{ width: 0 }}
-                  animate={{ width: `${(47 / 125) * 100}%` }}
-                  transition={{ type: 'spring', bounce: 0, delay: 0.2 }}
-                  className="absolute h-full rounded-full bg-linear-to-r from-transparent to-blue-400 blur-md"
-                />
-              </div>
-            </Card>
-          </div>
+              </Tooltip>
+            </div>
+            <span className="text-lg font-bold">47 of 125</span>
+            <div className="bg-background-neutral-raised-5 relative h-3 w-full rounded-full border border-background-brand-2">
+              <motion.div
+                initial={{ width: 0, opacity: 0 }}
+                animate={{ width: `${(47 / 125) * 100}%`, opacity: 1 }}
+                transition={{ type: 'spring', bounce: 0, delay: 0.2 }}
+                className="absolute h-full rounded-full bg-linear-to-r from-transparent to-background-brand-base"
+              />
+              <motion.div
+                initial={{ width: 0 }}
+                animate={{ width: `${(47 / 125) * 100}%` }}
+                transition={{ type: 'spring', bounce: 0, delay: 0.2 }}
+                className="absolute h-full rounded-full bg-linear-to-r from-transparent to-background-brand-base blur-md"
+              />
+            </div>
+          </Card>
         </div>
-      </Card>
-    </motion.div>
-  );
-};
+      </div>
+    </Card>
+  </motion.div>
+);
 
 export const BillingSubscription = () => (
   <motion.div
@@ -445,10 +417,12 @@ export const BillingSubscription = () => (
     <Card className="p-12 transition-colors">
       <div className="flex flex-col gap-4">
         <div className="flex items-center justify-between">
-          <h2 className="text-2xl font-bold">Billing</h2>
+          <h2 className="text-xl font-bold">Billing</h2>
           <Stack>
             <Button
-              className="bg-(image:--button-gradient) hover:bg-(image:--button-gradient-hover) focus:bg-(image:--button-gradient-focus) dark:bg-transparent! light:bg-primary light:hover:bg-none light:hover:bg-primary-hover light:focus:bg-primary-hover w-fit border-none px-4 py-2 font-semibold transition-colors focus:outline-hidden"
+              className="w-fit border-none px-4 py-2 font-semibold transition-colors focus:outline-hidden"
+              variant="filled"
+              color="primary"
               endAdornment={
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -484,34 +458,34 @@ export const BillingSubscription = () => (
         </div>
         <Divider />
         <div className="flex flex-col">
-          <span className="text-xl font-bold">Current Subscription</span>
-          <span className="text-text-secondary">
+          <span className="text-lg font-bold">Current Subscription</span>
+          <span className="text-content-text-neutral-2">
             Your account is billed monthly and the next payment is due{' '}
-            <span className="text-text-primary font-semibold">
+            <span className="text-content-text-neutral-base font-semibold">
               March 15, 2024
             </span>
           </span>
         </div>
-        <div className="border-panel-accent flex overflow-hidden rounded-xl border">
+        <div className="border-stroke-neutral-3 flex overflow-hidden rounded-xl border">
           <div className="flex flex-1 flex-col">
-            <div className="dark:bg-vulcan light:bg-mystic text-text-secondary px-6 py-4 text-base">
+            <div className="bg-background-neutral-raised-5 text-content-text-neutral-2 px-6 py-4 text-sm">
               Selected plan
             </div>
-            <div className="text-text-secondary flex-1 px-6 py-4 text-base">
+            <div className="text-content-text-neutral-2 flex-1 px-6 py-4 text-sm">
               Team
             </div>
           </div>
           <div className="flex flex-1 flex-col">
-            <div className="dark:bg-vulcan light:bg-mystic text-text-secondary px-6 py-4 text-base">
+            <div className="bg-background-neutral-raised-5 text-content-text-neutral-2 px-6 py-4 text-sm">
               Price
             </div>
-            <div className="text-text-secondary flex flex-1 items-center gap-2 px-6 py-4 text-base">
+            <div className="text-content-text-neutral-2 flex flex-1 items-center gap-2 px-6 py-4 text-sm">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="17"
                 height="16"
                 viewBox="0 0 17 16"
-                className="text-text-primary mb-px h-4 w-4"
+                className="text-content-text-neutral-base mb-px h-4 w-4"
                 fill="currentColor"
               >
                 <path d="M8.5 1.33325C7.875 1.33325 7.34294 1.58563 7.0013 1.96997C6.65967 2.35431 6.5 2.84714 6.5 3.33325C6.5 3.68206 6.61446 4.02005 6.78711 4.33325H5.0319C4.19896 4.33325 3.46602 4.90011 3.25716 5.7063L1.61523 12.0396C1.3172 13.1887 2.2029 14.3333 3.38997 14.3333H13.6712C14.8329 14.3333 15.7129 13.236 15.4609 12.1021L14.0534 5.7688C13.8675 4.93288 13.1201 4.33325 12.2637 4.33325H10.2129C10.3855 4.02005 10.5 3.68206 10.5 3.33325C10.5 2.84714 10.3403 2.35431 9.9987 1.96997C9.65706 1.58563 9.125 1.33325 8.5 1.33325ZM8.5 2.33325C8.875 2.33325 9.09294 2.45587 9.2513 2.63403C9.40967 2.81219 9.5 3.06936 9.5 3.33325C9.5 3.59714 9.40967 3.85431 9.2513 4.03247C9.09294 4.21063 8.875 4.33325 8.5 4.33325C8.125 4.33325 7.90706 4.21063 7.7487 4.03247C7.59033 3.85431 7.5 3.59714 7.5 3.33325C7.5 3.06936 7.59033 2.81219 7.7487 2.63403C7.90706 2.45587 8.125 2.33325 8.5 2.33325ZM5.0319 5.33325H8.5H12.2637C12.6572 5.33325 12.9921 5.60151 13.0775 5.9856L14.4844 12.3189C14.6025 12.8504 14.2155 13.3333 13.6712 13.3333H3.38997C2.83238 13.3333 2.44271 12.8306 2.58268 12.2909L4.22526 5.9576C4.32107 5.58779 4.6495 5.33325 5.0319 5.33325ZM8.49219 5.99276C8.35969 5.99483 8.23344 6.0494 8.14115 6.1445C8.04887 6.23959 7.9981 6.36742 8 6.49992V6.74211C7.33469 6.93217 6.83333 7.52276 6.83333 8.24406V8.24471C6.83333 9.11598 7.55058 9.83325 8.42188 9.83325H8.91146C9.24217 9.83325 9.5 10.0911 9.5 10.4218C9.5 10.7506 9.24509 11.0069 8.91602 11.0097L8.30273 11.0149C8.08763 11.0149 7.91417 10.8754 7.85482 10.6868C7.83617 10.6229 7.80496 10.5634 7.76302 10.5117C7.72107 10.4601 7.66924 10.4173 7.61056 10.3859C7.55187 10.3545 7.48752 10.3352 7.42126 10.329C7.35501 10.3228 7.28818 10.3299 7.22471 10.3499C7.16123 10.3699 7.10238 10.4023 7.05161 10.4453C7.00083 10.4883 6.95915 10.5411 6.92901 10.6004C6.89886 10.6597 6.88086 10.7245 6.87606 10.7908C6.87126 10.8572 6.87975 10.9239 6.90104 10.9869C7.05651 11.4809 7.49329 11.798 8 11.9146V12.1666C7.99906 12.2328 8.0113 12.2986 8.03601 12.3601C8.06072 12.4216 8.0974 12.4776 8.14392 12.5247C8.19044 12.5719 8.24588 12.6094 8.30701 12.635C8.36814 12.6605 8.43374 12.6737 8.5 12.6737C8.56626 12.6737 8.63186 12.6605 8.69299 12.635C8.75412 12.6094 8.80956 12.5719 8.85608 12.5247C8.9026 12.4776 8.93928 12.4216 8.96399 12.3601C8.9887 12.2986 9.00094 12.2328 9 12.1666V11.9941C9.82966 11.9453 10.5 11.2616 10.5 10.4218C10.5 9.5505 9.78275 8.83325 8.91146 8.83325H8.42188C8.09117 8.83325 7.83333 8.57542 7.83333 8.24471V8.24406C7.83333 7.91666 8.08595 7.66029 8.41341 7.65552L8.68815 7.65161C8.90446 7.65161 9.07921 7.79284 9.13737 7.98299C9.15609 8.04634 9.18718 8.10536 9.22883 8.15663C9.27049 8.2079 9.3219 8.25041 9.38007 8.28169C9.43825 8.31298 9.50206 8.33244 9.5678 8.33893C9.63354 8.34542 9.69991 8.33881 9.76309 8.31951C9.82626 8.3002 9.88499 8.26856 9.93587 8.22643C9.98674 8.18429 10.0288 8.13249 10.0595 8.07402C10.0903 8.01555 10.1091 7.95157 10.115 7.88577C10.1209 7.81998 10.1136 7.75367 10.0938 7.69067C9.94196 7.19443 9.50598 6.87599 9 6.75578V6.49992C9.00096 6.433 8.98848 6.36656 8.96329 6.30455C8.9381 6.24255 8.90072 6.18623 8.85336 6.13893C8.80601 6.09164 8.74964 6.05433 8.6876 6.02922C8.62556 6.00411 8.55911 5.99171 8.49219 5.99276Z" />
@@ -520,16 +494,16 @@ export const BillingSubscription = () => (
             </div>
           </div>
           <div className="flex flex-1 flex-col">
-            <div className="dark:bg-vulcan light:bg-mystic text-text-secondary px-6 py-4 text-base">
+            <div className="bg-background-neutral-raised-5 text-content-text-neutral-2 px-6 py-4 text-sm">
               Seats
             </div>
-            <div className="text-text-secondary flex flex-1 items-center gap-2 px-6 py-4 text-base">
+            <div className="text-content-text-neutral-2 flex flex-1 items-center gap-2 px-6 py-4 text-sm">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="16"
                 height="16"
                 viewBox="0 0 16 16"
-                className="text-text-primary mb-px h-4 w-4"
+                className="text-content-text-neutral-base mb-px h-4 w-4"
                 fill="currentColor"
               >
                 <path d="M8 1.33325C6.16497 1.33325 4.66666 2.83156 4.66666 4.66658C4.66666 6.50161 6.16497 7.99992 8 7.99992C9.83502 7.99992 11.3333 6.50161 11.3333 4.66658C11.3333 2.83156 9.83502 1.33325 8 1.33325ZM8 2.33325C9.29459 2.33325 10.3333 3.372 10.3333 4.66658C10.3333 5.96117 9.29459 6.99992 8 6.99992C6.70541 6.99992 5.66666 5.96117 5.66666 4.66658C5.66666 3.372 6.70541 2.33325 8 2.33325ZM3.99284 9.33325C3.26623 9.33325 2.66666 9.93282 2.66666 10.6594V11.1666C2.66666 12.368 3.42642 13.2973 4.43554 13.8541C5.44467 14.4108 6.7227 14.6666 8 14.6666C9.2773 14.6666 10.5553 14.4108 11.5645 13.8541C12.4249 13.3794 13.0724 12.6208 13.2539 11.6666H13.334V10.6594C13.334 9.93282 12.7338 9.33325 12.0072 9.33325H3.99284ZM3.99284 10.3333H12.0072C12.1932 10.3333 12.334 10.4734 12.334 10.6594V10.6666H12.3333V11.1666C12.3333 11.9652 11.8848 12.5358 11.0814 12.9791C10.278 13.4223 9.13936 13.6666 8 13.6666C6.86063 13.6666 5.72199 13.4223 4.91862 12.9791C4.11524 12.5358 3.66666 11.9652 3.66666 11.1666V10.6594C3.66666 10.4734 3.80677 10.3333 3.99284 10.3333Z" />
@@ -538,16 +512,16 @@ export const BillingSubscription = () => (
             </div>
           </div>
           <div className="flex flex-1 flex-col">
-            <div className="dark:bg-vulcan light:bg-mystic text-text-secondary px-6 py-4 text-base">
+            <div className="bg-background-neutral-raised-5 text-content-text-neutral-2 px-6 py-4 text-sm">
               Yearly Cost
             </div>
-            <div className="text-text-secondary flex flex-1 items-center gap-2 px-6 py-4 text-base">
+            <div className="text-content-text-neutral-2 flex flex-1 items-center gap-2 px-6 py-4 text-sm">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="17"
                 height="16"
                 viewBox="0 0 17 16"
-                className="text-text-primary mb-px h-4 w-4"
+                className="text-content-text-neutral-base mb-px h-4 w-4"
                 fill="currentColor"
               >
                 <path d="M13.1667 6.33325H10.5V2.33325H6.50001V6.33325H3.83334L8.50001 10.9999L13.1667 6.33325ZM7.83334 7.66658V3.66659H9.16668V7.66658H9.94668L8.50001 9.11325L7.05334 7.66658H7.83334ZM3.83334 12.3333H13.1667V13.6666H3.83334V12.3333Z" />
@@ -556,25 +530,25 @@ export const BillingSubscription = () => (
             </div>
           </div>
         </div>
-        <span className="mb-8 mt-4 text-xl font-bold">Seats usage</span>
+        <span className="mb-8 mt-4 text-lg font-bold">Seats usage</span>
         <div className="flex w-full gap-4">
           <div className="flex flex-1 flex-col gap-3">
             <div className="flex items-center justify-between">
               <span className="text-sm">Editors</span>
-              <span className="text-base">11/30 used</span>
+              <span className="text-sm">11/30 used</span>
             </div>
-            <div className="dark:bg-vulcan light:bg-mystic relative h-3 w-full rounded-full border border-primary/40">
+            <div className="bg-background-neutral-raised-5 relative h-3 w-full rounded-full border border-background-brand-2">
               <motion.div
                 initial={{ width: 0, opacity: 0 }}
                 animate={{ width: `${(11 / 30) * 100}%`, opacity: 1 }}
                 transition={{ type: 'spring', bounce: 0, delay: 0.2 }}
-                className="absolute h-full rounded-full bg-linear-to-r from-transparent to-blue-400"
+                className="absolute h-full rounded-full bg-linear-to-r from-transparent to-background-brand-base"
               />
               <motion.div
                 initial={{ width: 0 }}
                 animate={{ width: `${(11 / 30) * 100}%` }}
                 transition={{ type: 'spring', bounce: 0, delay: 0.2 }}
-                className="absolute h-full rounded-full bg-linear-to-r from-transparent to-blue-400 blur-md"
+                className="absolute h-full rounded-full bg-linear-to-r from-transparent to-background-brand-base blur-md"
               />
             </div>
             <Button
@@ -599,25 +573,24 @@ export const BillingSubscription = () => (
           <div className="flex flex-1 flex-col gap-3">
             <div className="flex items-center justify-between">
               <span className="text-sm">Contributors</span>
-              <span className="text-base">18/20 used</span>
+              <span className="text-sm">18/20 used</span>
             </div>
-            <div className="dark:bg-vulcan light:bg-mystic relative h-3 w-full rounded-full border border-orange-500/40">
+            <div className="bg-background-neutral-raised-5 relative h-3 w-full rounded-full border border-orange-molten-fang-a-950/40">
               <motion.div
                 initial={{ width: 0, opacity: 0 }}
                 animate={{ width: `${(18 / 20) * 100}%`, opacity: 1 }}
                 transition={{ type: 'spring', bounce: 0, delay: 0.2 }}
-                className="absolute h-full rounded-full bg-linear-to-r from-transparent to-orange-500"
+                className="absolute h-full rounded-full bg-linear-to-r from-transparent to-orange-molten-fang-a-950"
               />
               <motion.div
                 initial={{ width: 0 }}
                 animate={{ width: `${(18 / 20) * 100}%` }}
                 transition={{ type: 'spring', bounce: 0, delay: 0.2 }}
-                className="absolute h-full rounded-full bg-linear-to-r from-transparent to-orange-500 blur-md"
+                className="absolute h-full rounded-full bg-linear-to-r from-transparent to-orange-molten-fang-a-950 blur-md"
               />
             </div>
             <Button
               variant="text"
-              color="default"
               className="w-fit px-0"
               startAdornment={
                 <svg
@@ -625,8 +598,7 @@ export const BillingSubscription = () => (
                   width="17"
                   height="16"
                   viewBox="0 0 17 16"
-                  className="text-orange-500"
-                  fill="currentColor"
+                  className="[svg]:fill-orange-molten-fang-a-950"
                 >
                   <path d="M3 8.00008L3.94 8.94008L7.66667 5.22008V13.3334H9V5.22008L12.72 8.94675L13.6667 8.00008L8.33333 2.66675L3 8.00008Z" />
                 </svg>
@@ -638,25 +610,24 @@ export const BillingSubscription = () => (
           <div className="flex flex-1 flex-col gap-3">
             <div className="flex items-center justify-between">
               <span className="text-sm">Viewers</span>
-              <span className="text-base">11/15 used</span>
+              <span className="text-sm">11/15 used</span>
             </div>
-            <div className="dark:bg-vulcan light:bg-mystic relative h-3 w-full rounded-full border border-orange-500/40">
+            <div className="bg-background-neutral-raised-5 relative h-3 w-full rounded-full border border-orange-molten-fang-a-950/40">
               <motion.div
                 initial={{ width: 0, opacity: 0 }}
                 animate={{ width: `${(11 / 15) * 100}%`, opacity: 1 }}
                 transition={{ type: 'spring', bounce: 0, delay: 0.2 }}
-                className="absolute h-full rounded-full bg-linear-to-r from-transparent to-orange-500"
+                className="absolute h-full rounded-full bg-linear-to-r from-transparent to-orange-molten-fang-a-950"
               />
               <motion.div
                 initial={{ width: 0 }}
                 animate={{ width: `${(11 / 15) * 100}%` }}
                 transition={{ type: 'spring', bounce: 0, delay: 0.2 }}
-                className="absolute h-full rounded-full bg-linear-to-r from-transparent to-orange-500 blur-md"
+                className="absolute h-full rounded-full bg-linear-to-r from-transparent to-orange-molten-fang-a-950 blur-md"
               />
             </div>
             <Button
               variant="text"
-              color="primary"
               className="w-fit px-0"
               startAdornment={
                 <svg
@@ -664,8 +635,7 @@ export const BillingSubscription = () => (
                   width="17"
                   height="16"
                   viewBox="0 0 17 16"
-                  className="text-orange-500"
-                  fill="currentColor"
+                  className="[svg]:fill-orange-molten-fang-a-950"
                 >
                   <path d="M3 8.00008L3.94 8.94008L7.66667 5.22008V13.3334H9V5.22008L12.72 8.94675L13.6667 8.00008L8.33333 2.66675L3 8.00008Z" />
                 </svg>
@@ -680,215 +650,211 @@ export const BillingSubscription = () => (
   </motion.div>
 );
 
-export const BillingInformation = () => {
-  const chipTheme: ChipTheme = {
-    ...defaultChipTheme,
-    base: `${defaultChipTheme?.base} rounded-full`,
-    colors: {
-      ...defaultChipTheme?.colors,
-      warning: {
-        ...defaultChipTheme.colors.warning,
-        variants: {
-          ...defaultChipTheme?.colors?.warning?.variants,
-          filled: `${defaultChipTheme?.colors?.warning?.variants?.filled} text-text-primary bg-warning/10 border-warning`
-        }
-      },
-      success: {
-        ...defaultChipTheme.colors.success,
-        variants: {
-          ...defaultChipTheme?.colors?.success?.variants,
-          filled: `${defaultChipTheme?.colors?.success?.variants?.filled} text-text-primary bg-success/10 border-success`
-        }
-      }
-    }
-  };
-
-  return (
-    <motion.div
-      initial={{ y: -20, opacity: 0 }}
-      animate={{ y: 0, opacity: 1 }}
-      className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm md:min-w-[960px] md:max-w-[1200px]"
-    >
-      <div className="text-text-primary mb-2 flex justify-between gap-2 rounded-xl border border-primary bg-primary/10 p-8">
-        <div className="flex flex-col gap-2">
-          <div className="flex flex-col">
-            <div className="flex items-center gap-2">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="22"
-                height="22"
-                viewBox="0 0 22 22"
-                className="mb-0.5"
-                fill="currentColor"
-              >
-                <path d="M3.89583 4.58325C2.51177 4.58325 1.375 5.72002 1.375 7.10409V15.8124C1.375 17.1965 2.51177 18.3333 3.89583 18.3333H18.1042C19.4882 18.3333 20.625 17.1965 20.625 15.8124V7.10409C20.625 5.72002 19.4882 4.58325 18.1042 4.58325H3.89583ZM3.89583 5.95825H18.1042C18.745 5.95825 19.25 6.46323 19.25 7.10409V15.8124C19.25 16.4533 18.745 16.9583 18.1042 16.9583H3.89583C3.25498 16.9583 2.75 16.4533 2.75 15.8124V7.10409C2.75 6.46323 3.25498 5.95825 3.89583 5.95825ZM4.8125 7.79159C4.7214 7.7903 4.63095 7.80713 4.54641 7.8411C4.46187 7.87507 4.38492 7.92551 4.32004 7.98948C4.25516 8.05344 4.20364 8.12967 4.16848 8.21372C4.13332 8.29777 4.11521 8.38797 4.11521 8.47909C4.11521 8.5702 4.13332 8.6604 4.16848 8.74445C4.20364 8.8285 4.25516 8.90473 4.32004 8.9687C4.38492 9.03266 4.46187 9.0831 4.54641 9.11707C4.63095 9.15104 4.7214 9.16787 4.8125 9.16659H11.2292C11.3203 9.16787 11.4107 9.15104 11.4953 9.11707C11.5798 9.0831 11.6567 9.03266 11.7216 8.9687C11.7865 8.90473 11.838 8.8285 11.8732 8.74445C11.9084 8.6604 11.9265 8.5702 11.9265 8.47909C11.9265 8.38797 11.9084 8.29777 11.8732 8.21372C11.838 8.12967 11.7865 8.05344 11.7216 7.98948C11.6567 7.92551 11.5798 7.87507 11.4953 7.8411C11.4107 7.80713 11.3203 7.7903 11.2292 7.79159H4.8125ZM4.8125 10.5416C4.7214 10.5403 4.63095 10.5571 4.54641 10.5911C4.46187 10.6251 4.38492 10.6755 4.32004 10.7395C4.25516 10.8034 4.20364 10.8797 4.16848 10.9637C4.13332 11.0478 4.11521 11.138 4.11521 11.2291C4.11521 11.3202 4.13332 11.4104 4.16848 11.4945C4.20364 11.5785 4.25516 11.6547 4.32004 11.7187C4.38492 11.7827 4.46187 11.8331 4.54641 11.8671C4.63095 11.901 4.7214 11.9179 4.8125 11.9166H8.9375C9.0286 11.9179 9.11905 11.901 9.20359 11.8671C9.28813 11.8331 9.36508 11.7827 9.42996 11.7187C9.49484 11.6547 9.54636 11.5785 9.58152 11.4945C9.61668 11.4104 9.63479 11.3202 9.63479 11.2291C9.63479 11.138 9.61668 11.0478 9.58152 10.9637C9.54636 10.8797 9.49484 10.8034 9.42996 10.7395C9.36508 10.6755 9.28813 10.6251 9.20359 10.5911C9.11905 10.5571 9.0286 10.5403 8.9375 10.5416H4.8125ZM12.2604 11.9166C11.816 11.9166 11.529 12.1784 11.3402 12.4098C11.1514 12.6413 11.0196 12.8993 10.9069 13.1761C10.6815 13.7297 10.5417 14.3417 10.5417 14.8958C10.5404 14.9869 10.5572 15.0773 10.5912 15.1618C10.6252 15.2464 10.6756 15.3233 10.7396 15.3882C10.8035 15.4531 10.8797 15.5046 10.9638 15.5398C11.0479 15.5749 11.1381 15.593 11.2292 15.593C11.3203 15.593 11.4105 15.5749 11.4945 15.5398C11.5786 15.5046 11.6548 15.4531 11.7188 15.3882C11.7827 15.3233 11.8332 15.2464 11.8672 15.1618C11.9011 15.0773 11.918 14.9869 11.9167 14.8958C11.9167 14.612 12.024 14.0781 12.1799 13.6953C12.1924 13.6644 12.2034 13.6571 12.2166 13.6282C12.2676 13.7499 12.3131 13.8384 12.366 13.9845C12.4673 14.2638 12.5655 14.558 12.6937 14.8304C12.7578 14.9666 12.8252 15.0992 12.9452 15.2413C13.0653 15.3834 13.2917 15.5833 13.6354 15.5833C14.2885 15.5833 14.6509 15.1251 14.8573 14.8608C14.8599 14.8575 14.8601 14.8569 14.8627 14.8537C14.9189 14.9046 14.9335 14.9264 15.0095 14.9844C15.4191 15.2964 16.1057 15.5833 17.1875 15.5833C17.2786 15.5845 17.3691 15.5677 17.4536 15.5337C17.5381 15.4998 17.6151 15.4493 17.68 15.3854C17.7448 15.3214 17.7964 15.2452 17.8315 15.1611C17.8667 15.0771 17.8848 14.9869 17.8848 14.8958C17.8848 14.8046 17.8667 14.7144 17.8315 14.6304C17.7964 14.5463 17.7448 14.4701 17.68 14.4061C17.6151 14.3422 17.5381 14.2917 17.4536 14.2578C17.3691 14.2238 17.2786 14.207 17.1875 14.2083C16.3214 14.2083 16.034 14.0367 15.842 13.8905C15.746 13.8173 15.6739 13.7355 15.5386 13.613C15.4033 13.4904 15.125 13.2916 14.7812 13.2916C14.343 13.2916 14.1647 13.534 14.0472 13.6667C13.9516 13.7747 13.8891 13.8644 13.8252 13.9495C13.7709 13.8079 13.722 13.6901 13.6587 13.5154C13.5523 13.2218 13.4397 12.9118 13.2738 12.6211C13.1908 12.4757 13.0955 12.3312 12.9434 12.1932C12.7913 12.0551 12.5475 11.9166 12.2604 11.9166Z" />
-              </svg>
-              <span className="font-bold">Teams Plan</span>
-            </div>
-            <span className="text-text-secondary text-base">
-              Organization plan - collaborate on projects with your team
-            </span>
-          </div>
-          <Button
-            className="bg-(image:--button-gradient) hover:bg-(image:--button-gradient-hover) focus:bg-(image:--button-gradient-focus) dark:bg-transparent! light:bg-primary light:hover:bg-none light:hover:bg-primary-hover light:focus:bg-primary-hover w-fit border-none px-4 py-2 font-semibold transition-colors focus:outline-hidden"
-            color="primary"
-            endAdornment={
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="currentColor"
-              >
-                <path d="M7.99999 2.66675V0.666748L5.33332 3.33341L7.99999 6.00008V4.00008C10.2067 4.00008 12 5.79342 12 8.00008C12 8.67342 11.8333 9.31342 11.5333 9.86675L12.5067 10.8401C13.0267 10.0201 13.3333 9.04675 13.3333 8.00008C13.3333 5.05341 10.9467 2.66675 7.99999 2.66675ZM7.99999 12.0001C5.79332 12.0001 3.99999 10.2067 3.99999 8.00008C3.99999 7.32675 4.16666 6.68675 4.46666 6.13341L3.49332 5.16008C2.97332 5.98008 2.66666 6.95341 2.66666 8.00008C2.66666 10.9467 5.05332 13.3334 7.99999 13.3334V15.3334L10.6667 12.6667L7.99999 10.0001V12.0001Z" />
-              </svg>
-            }
-          >
-            Change Plan
-          </Button>
-        </div>
+export const BillingInformation = () => (
+  <motion.div
+    initial={{ y: -20, opacity: 0 }}
+    animate={{ y: 0, opacity: 1 }}
+    className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm md:min-w-[960px] md:max-w-[1200px]"
+  >
+    <div className="text-content-text-neutral-base mb-2 flex justify-between gap-2 rounded-xl border border-background-brand-base bg-blue-hyperstream-a-200 p-8">
+      <div className="flex flex-col gap-2">
         <div className="flex flex-col">
-          <span className="font-bold">$62/mo</span>
-          <span className="text-text-secondary text-base">
-            65 Seats
+          <div className="flex items-center gap-2">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="22"
+              height="22"
+              viewBox="0 0 22 22"
+              className="mb-0.5"
+              fill="currentColor"
+            >
+              <path d="M3.89583 4.58325C2.51177 4.58325 1.375 5.72002 1.375 7.10409V15.8124C1.375 17.1965 2.51177 18.3333 3.89583 18.3333H18.1042C19.4882 18.3333 20.625 17.1965 20.625 15.8124V7.10409C20.625 5.72002 19.4882 4.58325 18.1042 4.58325H3.89583ZM3.89583 5.95825H18.1042C18.745 5.95825 19.25 6.46323 19.25 7.10409V15.8124C19.25 16.4533 18.745 16.9583 18.1042 16.9583H3.89583C3.25498 16.9583 2.75 16.4533 2.75 15.8124V7.10409C2.75 6.46323 3.25498 5.95825 3.89583 5.95825ZM4.8125 7.79159C4.7214 7.7903 4.63095 7.80713 4.54641 7.8411C4.46187 7.87507 4.38492 7.92551 4.32004 7.98948C4.25516 8.05344 4.20364 8.12967 4.16848 8.21372C4.13332 8.29777 4.11521 8.38797 4.11521 8.47909C4.11521 8.5702 4.13332 8.6604 4.16848 8.74445C4.20364 8.8285 4.25516 8.90473 4.32004 8.9687C4.38492 9.03266 4.46187 9.0831 4.54641 9.11707C4.63095 9.15104 4.7214 9.16787 4.8125 9.16659H11.2292C11.3203 9.16787 11.4107 9.15104 11.4953 9.11707C11.5798 9.0831 11.6567 9.03266 11.7216 8.9687C11.7865 8.90473 11.838 8.8285 11.8732 8.74445C11.9084 8.6604 11.9265 8.5702 11.9265 8.47909C11.9265 8.38797 11.9084 8.29777 11.8732 8.21372C11.838 8.12967 11.7865 8.05344 11.7216 7.98948C11.6567 7.92551 11.5798 7.87507 11.4953 7.8411C11.4107 7.80713 11.3203 7.7903 11.2292 7.79159H4.8125ZM4.8125 10.5416C4.7214 10.5403 4.63095 10.5571 4.54641 10.5911C4.46187 10.6251 4.38492 10.6755 4.32004 10.7395C4.25516 10.8034 4.20364 10.8797 4.16848 10.9637C4.13332 11.0478 4.11521 11.138 4.11521 11.2291C4.11521 11.3202 4.13332 11.4104 4.16848 11.4945C4.20364 11.5785 4.25516 11.6547 4.32004 11.7187C4.38492 11.7827 4.46187 11.8331 4.54641 11.8671C4.63095 11.901 4.7214 11.9179 4.8125 11.9166H8.9375C9.0286 11.9179 9.11905 11.901 9.20359 11.8671C9.28813 11.8331 9.36508 11.7827 9.42996 11.7187C9.49484 11.6547 9.54636 11.5785 9.58152 11.4945C9.61668 11.4104 9.63479 11.3202 9.63479 11.2291C9.63479 11.138 9.61668 11.0478 9.58152 10.9637C9.54636 10.8797 9.49484 10.8034 9.42996 10.7395C9.36508 10.6755 9.28813 10.6251 9.20359 10.5911C9.11905 10.5571 9.0286 10.5403 8.9375 10.5416H4.8125ZM12.2604 11.9166C11.816 11.9166 11.529 12.1784 11.3402 12.4098C11.1514 12.6413 11.0196 12.8993 10.9069 13.1761C10.6815 13.7297 10.5417 14.3417 10.5417 14.8958C10.5404 14.9869 10.5572 15.0773 10.5912 15.1618C10.6252 15.2464 10.6756 15.3233 10.7396 15.3882C10.8035 15.4531 10.8797 15.5046 10.9638 15.5398C11.0479 15.5749 11.1381 15.593 11.2292 15.593C11.3203 15.593 11.4105 15.5749 11.4945 15.5398C11.5786 15.5046 11.6548 15.4531 11.7188 15.3882C11.7827 15.3233 11.8332 15.2464 11.8672 15.1618C11.9011 15.0773 11.918 14.9869 11.9167 14.8958C11.9167 14.612 12.024 14.0781 12.1799 13.6953C12.1924 13.6644 12.2034 13.6571 12.2166 13.6282C12.2676 13.7499 12.3131 13.8384 12.366 13.9845C12.4673 14.2638 12.5655 14.558 12.6937 14.8304C12.7578 14.9666 12.8252 15.0992 12.9452 15.2413C13.0653 15.3834 13.2917 15.5833 13.6354 15.5833C14.2885 15.5833 14.6509 15.1251 14.8573 14.8608C14.8599 14.8575 14.8601 14.8569 14.8627 14.8537C14.9189 14.9046 14.9335 14.9264 15.0095 14.9844C15.4191 15.2964 16.1057 15.5833 17.1875 15.5833C17.2786 15.5845 17.3691 15.5677 17.4536 15.5337C17.5381 15.4998 17.6151 15.4493 17.68 15.3854C17.7448 15.3214 17.7964 15.2452 17.8315 15.1611C17.8667 15.0771 17.8848 14.9869 17.8848 14.8958C17.8848 14.8046 17.8667 14.7144 17.8315 14.6304C17.7964 14.5463 17.7448 14.4701 17.68 14.4061C17.6151 14.3422 17.5381 14.2917 17.4536 14.2578C17.3691 14.2238 17.2786 14.207 17.1875 14.2083C16.3214 14.2083 16.034 14.0367 15.842 13.8905C15.746 13.8173 15.6739 13.7355 15.5386 13.613C15.4033 13.4904 15.125 13.2916 14.7812 13.2916C14.343 13.2916 14.1647 13.534 14.0472 13.6667C13.9516 13.7747 13.8891 13.8644 13.8252 13.9495C13.7709 13.8079 13.722 13.6901 13.6587 13.5154C13.5523 13.2218 13.4397 12.9118 13.2738 12.6211C13.1908 12.4757 13.0955 12.3312 12.9434 12.1932C12.7913 12.0551 12.5475 11.9166 12.2604 11.9166Z" />
+            </svg>
+            <span className="font-bold">Teams Plan</span>
+          </div>
+          <span className="text-content-text-neutral-2 text-sm">
+            Organization plan - collaborate on projects with your team
           </span>
         </div>
+        <Button
+          className="w-fit border-none px-4 py-2 font-semibold transition-colors focus:outline-hidden"
+          endAdornment={
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="currentColor"
+            >
+              <path d="M7.99999 2.66675V0.666748L5.33332 3.33341L7.99999 6.00008V4.00008C10.2067 4.00008 12 5.79342 12 8.00008C12 8.67342 11.8333 9.31342 11.5333 9.86675L12.5067 10.8401C13.0267 10.0201 13.3333 9.04675 13.3333 8.00008C13.3333 5.05341 10.9467 2.66675 7.99999 2.66675ZM7.99999 12.0001C5.79332 12.0001 3.99999 10.2067 3.99999 8.00008C3.99999 7.32675 4.16666 6.68675 4.46666 6.13341L3.49332 5.16008C2.97332 5.98008 2.66666 6.95341 2.66666 8.00008C2.66666 10.9467 5.05332 13.3334 7.99999 13.3334V15.3334L10.6667 12.6667L7.99999 10.0001V12.0001Z" />
+            </svg>
+          }
+        >
+          Change Plan
+        </Button>
       </div>
-      <Card className="p-12 transition-colors">
-        <div className="flex flex-col gap-2">
-          <h2 className="text-2xl font-bold">Billing Information</h2>
-          <Divider variant="secondary" className="mb-4" />
-          <div className="flex w-full gap-4">
-            <Card contentClassName="flex flex-col gap-4" className="flex-1">
-              <div className="flex items-center justify-between">
-                <span className="font-bold">Payment Method</span>
-                <Button
-                  className="dark:bg-charade/40 dark:hover:bg-charade/60 dark:focus:bg-charade/60 light:bg-blue-200/40 light:hover:bg-blue-200/60 light:focus:bg-blue-200/60 light:text-vulcan w-fit border-none px-4 py-2 font-semibold transition-colors focus:outline-hidden"
-                  color="secondary"
-                >
-                  Update
-                </Button>
-              </div>
-              <div className="flex flex-col">
-                <span className="text-text-secondary text-sm">
-                  Card information
-                </span>
-                <span className="font-bold">Visa ending in 0315</span>
-              </div>
-              <div className="flex flex-col">
-                <span className="text-text-secondary text-sm">
-                  Name on card
-                </span>
-                <span className="font-bold">Austin McDaniel</span>
-              </div>
-            </Card>
-            <Card contentClassName="flex flex-col gap-4" className="flex-1">
-              <div className="flex items-center justify-between">
-                <span className="font-bold">Billing Details</span>
-                <Button
-                  className="dark:bg-charade/40 dark:hover:bg-charade/60 dark:focus:bg-charade/60 light:bg-blue-200/40 light:hover:bg-blue-200/60 light:focus:bg-blue-200/60 light:text-vulcan w-fit border-none px-4 py-2 font-semibold transition-colors focus:outline-hidden"
-                  color="secondary"
-                >
-                  Update
-                </Button>
-              </div>
-              <div className="flex flex-col">
-                <span className="text-text-secondary text-sm">
-                  Next billing date
-                </span>
-                <span className="font-bold">Mar 15, 2025</span>
-              </div>
-              <div className="flex flex-col">
-                <span className="text-text-secondary text-sm">
-                  Billing address
-                </span>
-                <span className="font-bold">
-                  123 Florida Ave., Miami FL, 33125
-                </span>
-              </div>
-            </Card>
-          </div>
-          <div className="flex w-full">
-            <div className="flex flex-1 flex-col">
-              <div className="border-panel-accent border-b px-4 py-2">
-                <span className="text-text-secondary text-base">
-                  Invoice Date
-                </span>
-              </div>
-              <motion.div
-                initial={{ y: -20, opacity: 0 }}
-                animate={{ y: 0, opacity: 1 }}
-                transition={{ delay: 0.1 }}
-                className="border-panel-accent flex-1 border-b px-4 py-5"
-              >
-                <span className="font-bold">Mar 15, 2023</span>
-              </motion.div>
-              <motion.div
-                initial={{ y: -20, opacity: 0 }}
-                animate={{ y: 0, opacity: 1 }}
-                transition={{ delay: 0.2 }}
-                className="border-panel-accent flex-1 border-b px-4 py-5"
-              >
-                <span className="font-bold">Mar 15, 2022</span>
-              </motion.div>
-              <motion.div
-                initial={{ y: -20, opacity: 0 }}
-                animate={{ y: 0, opacity: 1 }}
-                transition={{ delay: 0.3 }}
-                className="border-panel-accent flex-1 border-b px-4 py-5"
+      <div className="flex flex-col">
+        <span className="font-bold">$62/mo</span>
+        <span className="text-content-text-neutral-2 text-sm">65 Seats</span>
+      </div>
+    </div>
+    <Card className="p-12 transition-colors">
+      <div className="flex flex-col gap-2">
+        <h2 className="text-xl font-bold">Billing Information</h2>
+        <Divider className="mb-4" />
+        <div className="flex w-full gap-4">
+          <Card contentClassName="flex flex-col gap-4 p-7" className="flex-1">
+            <div className="flex items-center justify-between">
+              <span className="font-bold">Payment Method</span>
+              <Button
+                className="w-fit border-none px-4 py-2 font-semibold transition-colors focus:outline-hidden"
+                color="secondary"
               >
-                <span className="font-bold">Mar 15, 2021</span>
-              </motion.div>
+                Update
+              </Button>
             </div>
-            <div className="flex flex-1 flex-col">
-              <div className="border-panel-accent border-b px-4 py-2">
-                <span className="text-text-secondary text-base">
-                  Status
-                </span>
-              </div>
-              <motion.div
-                initial={{ y: -20, opacity: 0 }}
-                animate={{ y: 0, opacity: 1 }}
-                transition={{ delay: 0.1 }}
-                className="border-panel-accent flex-1 border-b px-4 py-5"
-              >
-                <Chip theme={chipTheme} color="warning" variant="filled">
-                  Pending
-                </Chip>
-              </motion.div>
-              <motion.div
-                initial={{ y: -20, opacity: 0 }}
-                animate={{ y: 0, opacity: 1 }}
-                transition={{ delay: 0.2 }}
-                className="border-panel-accent flex-1 border-b px-4 py-5"
-              >
-                <Chip theme={chipTheme} color="success" variant="filled">
-                  Paid
-                </Chip>
-              </motion.div>
-              <motion.div
-                initial={{ y: -20, opacity: 0 }}
-                animate={{ y: 0, opacity: 1 }}
-                transition={{ delay: 0.3 }}
-                className="border-panel-accent flex-1 border-b px-4 py-5"
+            <div className="flex flex-col">
+              <span className="text-content-text-neutral-2 text-sm">
+                Card information
+              </span>
+              <span className="font-bold">Visa ending in 0315</span>
+            </div>
+            <div className="flex flex-col">
+              <span className="text-content-text-neutral-2 text-sm">
+                Name on card
+              </span>
+              <span className="font-bold">Austin McDaniel</span>
+            </div>
+          </Card>
+          <Card contentClassName="flex flex-col gap-4 p-7" className="flex-1">
+            <div className="flex items-center justify-between">
+              <span className="font-bold">Billing Details</span>
+              <Button
+                className="w-fit border-none px-4 py-2 font-semibold transition-colors focus:outline-hidden"
+                color="secondary"
               >
-                <Chip theme={chipTheme} color="success" variant="filled">
-                  Paid
-                </Chip>
-              </motion.div>
-            </div>
-            <div className="flex flex-1 flex-col">
-              <div className="border-panel-accent border-b px-4 py-2">
-                <span className="text-text-secondary text-base">
-                  Card Used
+                Update
+              </Button>
+            </div>
+            <div className="flex flex-col">
+              <span className="text-content-text-neutral-2 text-sm">
+                Next billing date
+              </span>
+              <span className="font-bold">Mar 15, 2025</span>
+            </div>
+            <div className="flex flex-col">
+              <span className="text-content-text-neutral-2 text-sm">
+                Billing address
+              </span>
+              <span className="font-bold">
+                123 Florida Ave., Miami FL, 33125
+              </span>
+            </div>
+          </Card>
+        </div>
+        <div className="flex w-full">
+          <div className="flex flex-1 flex-col">
+            <div className="border-stroke-neutral-3 border-b px-4 py-2">
+              <span className="text-content-text-neutral-2 text-sm">
+                Invoice Date
+              </span>
+            </div>
+            <motion.div
+              initial={{ y: -20, opacity: 0 }}
+              animate={{ y: 0, opacity: 1 }}
+              transition={{ delay: 0.1 }}
+              className="border-stroke-neutral-3 flex-1 border-b px-4 py-5"
+            >
+              <span className="font-bold">Mar 15, 2023</span>
+            </motion.div>
+            <motion.div
+              initial={{ y: -20, opacity: 0 }}
+              animate={{ y: 0, opacity: 1 }}
+              transition={{ delay: 0.2 }}
+              className="border-stroke-neutral-3 flex-1 border-b px-4 py-5"
+            >
+              <span className="font-bold">Mar 15, 2022</span>
+            </motion.div>
+            <motion.div
+              initial={{ y: -20, opacity: 0 }}
+              animate={{ y: 0, opacity: 1 }}
+              transition={{ delay: 0.3 }}
+              className="border-stroke-neutral-3 flex-1 border-b px-4 py-5"
+            >
+              <span className="font-bold">Mar 15, 2021</span>
+            </motion.div>
+          </div>
+          <div className="flex flex-1 flex-col">
+            <div className="border-stroke-neutral-3 border-b px-4 py-2">
+              <span className="text-content-text-neutral-2 text-sm">
+                Status
+              </span>
+            </div>
+            <motion.div
+              initial={{ y: -20, opacity: 0 }}
+              animate={{ y: 0, opacity: 1 }}
+              transition={{ delay: 0.1 }}
+              className="border-stroke-neutral-3 flex-1 border-b px-4 py-5"
+            >
+              <Chip color="warning" variant="outline">
+                Pending
+              </Chip>
+            </motion.div>
+            <motion.div
+              initial={{ y: -20, opacity: 0 }}
+              animate={{ y: 0, opacity: 1 }}
+              transition={{ delay: 0.2 }}
+              className="border-stroke-neutral-3 flex-1 border-b px-4 py-5"
+            >
+              <Chip color="success" variant="outline">
+                Paid
+              </Chip>
+            </motion.div>
+            <motion.div
+              initial={{ y: -20, opacity: 0 }}
+              animate={{ y: 0, opacity: 1 }}
+              transition={{ delay: 0.3 }}
+              className="border-stroke-neutral-3 flex-1 border-b px-4 py-5"
+            >
+              <Chip color="success" variant="outline">
+                Paid
+              </Chip>
+            </motion.div>
+          </div>
+          <div className="flex flex-1 flex-col">
+            <div className="border-stroke-neutral-3 border-b px-4 py-2">
+              <span className="text-content-text-neutral-2 text-sm">
+                Card Used
+              </span>
+            </div>
+            <motion.div
+              initial={{ y: -20, opacity: 0 }}
+              animate={{ y: 0, opacity: 1 }}
+              transition={{ delay: 0.1 }}
+              className="border-stroke-neutral-3 flex-1 border-b px-4 py-5"
+            >
+              <div className="flex items-center gap-2">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  fill="currentColor"
+                >
+                  <path d="M2.83333 3.33325C1.82674 3.33325 1 4.15999 1 5.16659V11.4999C1 12.5065 1.82674 13.3333 2.83333 13.3333H13.1667C14.1733 13.3333 15 12.5065 15 11.4999V5.16659C15 4.15999 14.1733 3.33325 13.1667 3.33325H2.83333ZM2.83333 4.33325H13.1667C13.6327 4.33325 14 4.70051 14 5.16659V11.4999C14 11.966 13.6327 12.3333 13.1667 12.3333H2.83333C2.36726 12.3333 2 11.966 2 11.4999V5.16659C2 4.70051 2.36726 4.33325 2.83333 4.33325ZM3.5 5.66659C3.43374 5.66565 3.36796 5.67789 3.30648 5.7026C3.24499 5.7273 3.18903 5.76398 3.14185 5.81051C3.09466 5.85703 3.0572 5.91246 3.03162 5.97359C3.00605 6.03472 2.99288 6.10032 2.99288 6.16659C2.99288 6.23285 3.00605 6.29845 3.03162 6.35958C3.0572 6.42071 3.09466 6.47614 3.14185 6.52267C3.18903 6.56919 3.24499 6.60587 3.30648 6.63057C3.36796 6.65528 3.43374 6.66752 3.5 6.66659H8.16667C8.23292 6.66752 8.2987 6.65528 8.36019 6.63057C8.42167 6.60587 8.47763 6.56919 8.52482 6.52267C8.572 6.47614 8.60947 6.42071 8.63505 6.35958C8.66062 6.29845 8.67379 6.23285 8.67379 6.16659C8.67379 6.10032 8.66062 6.03472 8.63505 5.97359C8.60947 5.91246 8.572 5.85703 8.52482 5.81051C8.47763 5.76398 8.42167 5.7273 8.36019 5.7026C8.2987 5.67789 8.23292 5.66565 8.16667 5.66659H3.5ZM3.5 7.66659C3.43374 7.66565 3.36796 7.67789 3.30648 7.7026C3.24499 7.7273 3.18903 7.76398 3.14185 7.81051C3.09466 7.85703 3.0572 7.91246 3.03162 7.97359C3.00605 8.03472 2.99288 8.10032 2.99288 8.16659C2.99288 8.23285 3.00605 8.29845 3.03162 8.35958C3.0572 8.42071 3.09466 8.47614 3.14185 8.52267C3.18903 8.56919 3.24499 8.60587 3.30648 8.63057C3.36796 8.65528 3.43374 8.66752 3.5 8.66659H6.5C6.56626 8.66752 6.63204 8.65528 6.69352 8.63057C6.75501 8.60587 6.81097 8.56919 6.85815 8.52267C6.90534 8.47614 6.9428 8.42071 6.96838 8.35958C6.99395 8.29845 7.00712 8.23285 7.00712 8.16659C7.00712 8.10032 6.99395 8.03472 6.96838 7.97359C6.9428 7.91246 6.90534 7.85703 6.85815 7.81051C6.81097 7.76398 6.75501 7.7273 6.69352 7.7026C6.63204 7.67789 6.56626 7.66565 6.5 7.66659H3.5ZM8.91667 8.66659C8.59346 8.66659 8.3847 8.85699 8.2474 9.02531C8.11009 9.19363 8.01427 9.3813 7.93229 9.5826C7.76834 9.9852 7.66667 10.4303 7.66667 10.8333C7.66573 10.8995 7.67797 10.9653 7.70268 11.0268C7.72738 11.0883 7.76406 11.1442 7.81059 11.1914C7.85711 11.2386 7.91255 11.2761 7.97367 11.3016C8.0348 11.3272 8.1004 11.3404 8.16667 11.3404C8.23293 11.3404 8.29853 11.3272 8.35966 11.3016C8.42079 11.2761 8.47622 11.2386 8.52275 11.1914C8.56927 11.1442 8.60595 11.0883 8.63066 11.0268C8.65536 10.9653 8.6676 10.8995 8.66667 10.8333C8.66667 10.6269 8.7447 10.2386 8.85807 9.96021C8.86723 9.93771 8.87521 9.93241 8.88477 9.91138C8.92186 9.99989 8.95499 10.0643 8.99349 10.1705C9.06713 10.3736 9.13851 10.5876 9.23177 10.7857C9.2784 10.8848 9.32742 10.9812 9.41471 11.0846C9.50201 11.1879 9.66667 11.3333 9.91667 11.3333C10.3917 11.3333 10.6552 11 10.8053 10.8079C10.8072 10.8055 10.8074 10.805 10.8092 10.8027C10.8501 10.8397 10.8607 10.8556 10.916 10.8977C11.2139 11.1247 11.7132 11.3333 12.5 11.3333C12.5663 11.3342 12.632 11.3219 12.6935 11.2972C12.755 11.2725 12.811 11.2359 12.8582 11.1893C12.9053 11.1428 12.9428 11.0874 12.9684 11.0262C12.994 10.9651 13.0071 10.8995 13.0071 10.8333C13.0071 10.767 12.994 10.7014 12.9684 10.6403C12.9428 10.5791 12.9053 10.5237 12.8582 10.4772C12.811 10.4307 12.755 10.394 12.6935 10.3693C12.632 10.3446 12.5663 10.3323 12.5 10.3333C11.8701 10.3333 11.6611 10.2085 11.5215 10.1021C11.4517 10.0489 11.3992 9.98942 11.3008 9.90031C11.2024 9.8112 11 9.66659 10.75 9.66659C10.4313 9.66659 10.3016 9.84287 10.2161 9.93937C10.1466 10.0179 10.1012 10.0832 10.0547 10.1451C10.0152 10.0421 9.97967 9.95644 9.93359 9.82935C9.85619 9.61582 9.77434 9.3904 9.65365 9.17896C9.5933 9.07323 9.52403 8.96816 9.41341 8.86776C9.30279 8.76736 9.12547 8.66659 8.91667 8.66659Z" />
+                </svg>
+                <span className="text-content-text-neutral-2 text-sm">
+                  Visa ending in 0315
                 </span>
               </div>
-              <motion.div
-                initial={{ y: -20, opacity: 0 }}
-                animate={{ y: 0, opacity: 1 }}
-                transition={{ delay: 0.1 }}
-                className="border-panel-accent flex-1 border-b px-4 py-5"
-              >
+            </motion.div>
+            <motion.div
+              initial={{ y: -20, opacity: 0 }}
+              animate={{ y: 0, opacity: 1 }}
+              transition={{ delay: 0.2 }}
+              className="border-stroke-neutral-3 flex-1 border-b px-4 py-5"
+            >
+              <div className="flex items-center justify-between gap-2">
                 <div className="flex items-center gap-2">
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -899,83 +865,60 @@ export const BillingInformation = () => {
                   >
                     <path d="M2.83333 3.33325C1.82674 3.33325 1 4.15999 1 5.16659V11.4999C1 12.5065 1.82674 13.3333 2.83333 13.3333H13.1667C14.1733 13.3333 15 12.5065 15 11.4999V5.16659C15 4.15999 14.1733 3.33325 13.1667 3.33325H2.83333ZM2.83333 4.33325H13.1667C13.6327 4.33325 14 4.70051 14 5.16659V11.4999C14 11.966 13.6327 12.3333 13.1667 12.3333H2.83333C2.36726 12.3333 2 11.966 2 11.4999V5.16659C2 4.70051 2.36726 4.33325 2.83333 4.33325ZM3.5 5.66659C3.43374 5.66565 3.36796 5.67789 3.30648 5.7026C3.24499 5.7273 3.18903 5.76398 3.14185 5.81051C3.09466 5.85703 3.0572 5.91246 3.03162 5.97359C3.00605 6.03472 2.99288 6.10032 2.99288 6.16659C2.99288 6.23285 3.00605 6.29845 3.03162 6.35958C3.0572 6.42071 3.09466 6.47614 3.14185 6.52267C3.18903 6.56919 3.24499 6.60587 3.30648 6.63057C3.36796 6.65528 3.43374 6.66752 3.5 6.66659H8.16667C8.23292 6.66752 8.2987 6.65528 8.36019 6.63057C8.42167 6.60587 8.47763 6.56919 8.52482 6.52267C8.572 6.47614 8.60947 6.42071 8.63505 6.35958C8.66062 6.29845 8.67379 6.23285 8.67379 6.16659C8.67379 6.10032 8.66062 6.03472 8.63505 5.97359C8.60947 5.91246 8.572 5.85703 8.52482 5.81051C8.47763 5.76398 8.42167 5.7273 8.36019 5.7026C8.2987 5.67789 8.23292 5.66565 8.16667 5.66659H3.5ZM3.5 7.66659C3.43374 7.66565 3.36796 7.67789 3.30648 7.7026C3.24499 7.7273 3.18903 7.76398 3.14185 7.81051C3.09466 7.85703 3.0572 7.91246 3.03162 7.97359C3.00605 8.03472 2.99288 8.10032 2.99288 8.16659C2.99288 8.23285 3.00605 8.29845 3.03162 8.35958C3.0572 8.42071 3.09466 8.47614 3.14185 8.52267C3.18903 8.56919 3.24499 8.60587 3.30648 8.63057C3.36796 8.65528 3.43374 8.66752 3.5 8.66659H6.5C6.56626 8.66752 6.63204 8.65528 6.69352 8.63057C6.75501 8.60587 6.81097 8.56919 6.85815 8.52267C6.90534 8.47614 6.9428 8.42071 6.96838 8.35958C6.99395 8.29845 7.00712 8.23285 7.00712 8.16659C7.00712 8.10032 6.99395 8.03472 6.96838 7.97359C6.9428 7.91246 6.90534 7.85703 6.85815 7.81051C6.81097 7.76398 6.75501 7.7273 6.69352 7.7026C6.63204 7.67789 6.56626 7.66565 6.5 7.66659H3.5ZM8.91667 8.66659C8.59346 8.66659 8.3847 8.85699 8.2474 9.02531C8.11009 9.19363 8.01427 9.3813 7.93229 9.5826C7.76834 9.9852 7.66667 10.4303 7.66667 10.8333C7.66573 10.8995 7.67797 10.9653 7.70268 11.0268C7.72738 11.0883 7.76406 11.1442 7.81059 11.1914C7.85711 11.2386 7.91255 11.2761 7.97367 11.3016C8.0348 11.3272 8.1004 11.3404 8.16667 11.3404C8.23293 11.3404 8.29853 11.3272 8.35966 11.3016C8.42079 11.2761 8.47622 11.2386 8.52275 11.1914C8.56927 11.1442 8.60595 11.0883 8.63066 11.0268C8.65536 10.9653 8.6676 10.8995 8.66667 10.8333C8.66667 10.6269 8.7447 10.2386 8.85807 9.96021C8.86723 9.93771 8.87521 9.93241 8.88477 9.91138C8.92186 9.99989 8.95499 10.0643 8.99349 10.1705C9.06713 10.3736 9.13851 10.5876 9.23177 10.7857C9.2784 10.8848 9.32742 10.9812 9.41471 11.0846C9.50201 11.1879 9.66667 11.3333 9.91667 11.3333C10.3917 11.3333 10.6552 11 10.8053 10.8079C10.8072 10.8055 10.8074 10.805 10.8092 10.8027C10.8501 10.8397 10.8607 10.8556 10.916 10.8977C11.2139 11.1247 11.7132 11.3333 12.5 11.3333C12.5663 11.3342 12.632 11.3219 12.6935 11.2972C12.755 11.2725 12.811 11.2359 12.8582 11.1893C12.9053 11.1428 12.9428 11.0874 12.9684 11.0262C12.994 10.9651 13.0071 10.8995 13.0071 10.8333C13.0071 10.767 12.994 10.7014 12.9684 10.6403C12.9428 10.5791 12.9053 10.5237 12.8582 10.4772C12.811 10.4307 12.755 10.394 12.6935 10.3693C12.632 10.3446 12.5663 10.3323 12.5 10.3333C11.8701 10.3333 11.6611 10.2085 11.5215 10.1021C11.4517 10.0489 11.3992 9.98942 11.3008 9.90031C11.2024 9.8112 11 9.66659 10.75 9.66659C10.4313 9.66659 10.3016 9.84287 10.2161 9.93937C10.1466 10.0179 10.1012 10.0832 10.0547 10.1451C10.0152 10.0421 9.97967 9.95644 9.93359 9.82935C9.85619 9.61582 9.77434 9.3904 9.65365 9.17896C9.5933 9.07323 9.52403 8.96816 9.41341 8.86776C9.30279 8.76736 9.12547 8.66659 8.91667 8.66659Z" />
                   </svg>
-                  <span className="text-text-secondary text-base">
+                  <span className="text-content-text-neutral-2 text-sm">
                     Visa ending in 0315
                   </span>
                 </div>
-              </motion.div>
-              <motion.div
-                initial={{ y: -20, opacity: 0 }}
-                animate={{ y: 0, opacity: 1 }}
-                transition={{ delay: 0.2 }}
-                className="border-panel-accent flex-1 border-b px-4 py-5"
-              >
-                <div className="flex items-center justify-between gap-2">
-                  <div className="flex items-center gap-2">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="16"
-                      height="16"
-                      viewBox="0 0 16 16"
-                      fill="currentColor"
-                    >
-                      <path d="M2.83333 3.33325C1.82674 3.33325 1 4.15999 1 5.16659V11.4999C1 12.5065 1.82674 13.3333 2.83333 13.3333H13.1667C14.1733 13.3333 15 12.5065 15 11.4999V5.16659C15 4.15999 14.1733 3.33325 13.1667 3.33325H2.83333ZM2.83333 4.33325H13.1667C13.6327 4.33325 14 4.70051 14 5.16659V11.4999C14 11.966 13.6327 12.3333 13.1667 12.3333H2.83333C2.36726 12.3333 2 11.966 2 11.4999V5.16659C2 4.70051 2.36726 4.33325 2.83333 4.33325ZM3.5 5.66659C3.43374 5.66565 3.36796 5.67789 3.30648 5.7026C3.24499 5.7273 3.18903 5.76398 3.14185 5.81051C3.09466 5.85703 3.0572 5.91246 3.03162 5.97359C3.00605 6.03472 2.99288 6.10032 2.99288 6.16659C2.99288 6.23285 3.00605 6.29845 3.03162 6.35958C3.0572 6.42071 3.09466 6.47614 3.14185 6.52267C3.18903 6.56919 3.24499 6.60587 3.30648 6.63057C3.36796 6.65528 3.43374 6.66752 3.5 6.66659H8.16667C8.23292 6.66752 8.2987 6.65528 8.36019 6.63057C8.42167 6.60587 8.47763 6.56919 8.52482 6.52267C8.572 6.47614 8.60947 6.42071 8.63505 6.35958C8.66062 6.29845 8.67379 6.23285 8.67379 6.16659C8.67379 6.10032 8.66062 6.03472 8.63505 5.97359C8.60947 5.91246 8.572 5.85703 8.52482 5.81051C8.47763 5.76398 8.42167 5.7273 8.36019 5.7026C8.2987 5.67789 8.23292 5.66565 8.16667 5.66659H3.5ZM3.5 7.66659C3.43374 7.66565 3.36796 7.67789 3.30648 7.7026C3.24499 7.7273 3.18903 7.76398 3.14185 7.81051C3.09466 7.85703 3.0572 7.91246 3.03162 7.97359C3.00605 8.03472 2.99288 8.10032 2.99288 8.16659C2.99288 8.23285 3.00605 8.29845 3.03162 8.35958C3.0572 8.42071 3.09466 8.47614 3.14185 8.52267C3.18903 8.56919 3.24499 8.60587 3.30648 8.63057C3.36796 8.65528 3.43374 8.66752 3.5 8.66659H6.5C6.56626 8.66752 6.63204 8.65528 6.69352 8.63057C6.75501 8.60587 6.81097 8.56919 6.85815 8.52267C6.90534 8.47614 6.9428 8.42071 6.96838 8.35958C6.99395 8.29845 7.00712 8.23285 7.00712 8.16659C7.00712 8.10032 6.99395 8.03472 6.96838 7.97359C6.9428 7.91246 6.90534 7.85703 6.85815 7.81051C6.81097 7.76398 6.75501 7.7273 6.69352 7.7026C6.63204 7.67789 6.56626 7.66565 6.5 7.66659H3.5ZM8.91667 8.66659C8.59346 8.66659 8.3847 8.85699 8.2474 9.02531C8.11009 9.19363 8.01427 9.3813 7.93229 9.5826C7.76834 9.9852 7.66667 10.4303 7.66667 10.8333C7.66573 10.8995 7.67797 10.9653 7.70268 11.0268C7.72738 11.0883 7.76406 11.1442 7.81059 11.1914C7.85711 11.2386 7.91255 11.2761 7.97367 11.3016C8.0348 11.3272 8.1004 11.3404 8.16667 11.3404C8.23293 11.3404 8.29853 11.3272 8.35966 11.3016C8.42079 11.2761 8.47622 11.2386 8.52275 11.1914C8.56927 11.1442 8.60595 11.0883 8.63066 11.0268C8.65536 10.9653 8.6676 10.8995 8.66667 10.8333C8.66667 10.6269 8.7447 10.2386 8.85807 9.96021C8.86723 9.93771 8.87521 9.93241 8.88477 9.91138C8.92186 9.99989 8.95499 10.0643 8.99349 10.1705C9.06713 10.3736 9.13851 10.5876 9.23177 10.7857C9.2784 10.8848 9.32742 10.9812 9.41471 11.0846C9.50201 11.1879 9.66667 11.3333 9.91667 11.3333C10.3917 11.3333 10.6552 11 10.8053 10.8079C10.8072 10.8055 10.8074 10.805 10.8092 10.8027C10.8501 10.8397 10.8607 10.8556 10.916 10.8977C11.2139 11.1247 11.7132 11.3333 12.5 11.3333C12.5663 11.3342 12.632 11.3219 12.6935 11.2972C12.755 11.2725 12.811 11.2359 12.8582 11.1893C12.9053 11.1428 12.9428 11.0874 12.9684 11.0262C12.994 10.9651 13.0071 10.8995 13.0071 10.8333C13.0071 10.767 12.994 10.7014 12.9684 10.6403C12.9428 10.5791 12.9053 10.5237 12.8582 10.4772C12.811 10.4307 12.755 10.394 12.6935 10.3693C12.632 10.3446 12.5663 10.3323 12.5 10.3333C11.8701 10.3333 11.6611 10.2085 11.5215 10.1021C11.4517 10.0489 11.3992 9.98942 11.3008 9.90031C11.2024 9.8112 11 9.66659 10.75 9.66659C10.4313 9.66659 10.3016 9.84287 10.2161 9.93937C10.1466 10.0179 10.1012 10.0832 10.0547 10.1451C10.0152 10.0421 9.97967 9.95644 9.93359 9.82935C9.85619 9.61582 9.77434 9.3904 9.65365 9.17896C9.5933 9.07323 9.52403 8.96816 9.41341 8.86776C9.30279 8.76736 9.12547 8.66659 8.91667 8.66659Z" />
-                    </svg>
-                    <span className="text-text-secondary text-base">
-                      Visa ending in 0315
-                    </span>
-                  </div>
-                  <Button variant="text" className="p-0.5">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="16"
-                      height="16"
-                      viewBox="0 0 16 16"
-                      fill="currentColor"
-                    >
-                      <path d="M12.6666 6.33325H9.99992V2.33325H5.99992V6.33325H3.33325L7.99992 10.9999L12.6666 6.33325ZM7.33325 7.66658V3.66659H8.66658V7.66658H9.44659L7.99992 9.11325L6.55325 7.66658H7.33325ZM3.33325 12.3333H12.6666V13.6666H3.33325V12.3333Z" />
-                    </svg>
-                  </Button>
-                </div>
-              </motion.div>
-              <motion.div
-                initial={{ y: -20, opacity: 0 }}
-                animate={{ y: 0, opacity: 1 }}
-                transition={{ delay: 0.3 }}
-                className="border-panel-accent flex-1 border-b px-4 py-5"
-              >
-                <div className="flex items-center justify-between gap-2">
-                  <div className="flex items-center gap-2">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="16"
-                      height="16"
-                      viewBox="0 0 16 16"
-                      fill="currentColor"
-                    >
-                      <path d="M2.83333 3.33325C1.82674 3.33325 1 4.15999 1 5.16659V11.4999C1 12.5065 1.82674 13.3333 2.83333 13.3333H13.1667C14.1733 13.3333 15 12.5065 15 11.4999V5.16659C15 4.15999 14.1733 3.33325 13.1667 3.33325H2.83333ZM2.83333 4.33325H13.1667C13.6327 4.33325 14 4.70051 14 5.16659V11.4999C14 11.966 13.6327 12.3333 13.1667 12.3333H2.83333C2.36726 12.3333 2 11.966 2 11.4999V5.16659C2 4.70051 2.36726 4.33325 2.83333 4.33325ZM3.5 5.66659C3.43374 5.66565 3.36796 5.67789 3.30648 5.7026C3.24499 5.7273 3.18903 5.76398 3.14185 5.81051C3.09466 5.85703 3.0572 5.91246 3.03162 5.97359C3.00605 6.03472 2.99288 6.10032 2.99288 6.16659C2.99288 6.23285 3.00605 6.29845 3.03162 6.35958C3.0572 6.42071 3.09466 6.47614 3.14185 6.52267C3.18903 6.56919 3.24499 6.60587 3.30648 6.63057C3.36796 6.65528 3.43374 6.66752 3.5 6.66659H8.16667C8.23292 6.66752 8.2987 6.65528 8.36019 6.63057C8.42167 6.60587 8.47763 6.56919 8.52482 6.52267C8.572 6.47614 8.60947 6.42071 8.63505 6.35958C8.66062 6.29845 8.67379 6.23285 8.67379 6.16659C8.67379 6.10032 8.66062 6.03472 8.63505 5.97359C8.60947 5.91246 8.572 5.85703 8.52482 5.81051C8.47763 5.76398 8.42167 5.7273 8.36019 5.7026C8.2987 5.67789 8.23292 5.66565 8.16667 5.66659H3.5ZM3.5 7.66659C3.43374 7.66565 3.36796 7.67789 3.30648 7.7026C3.24499 7.7273 3.18903 7.76398 3.14185 7.81051C3.09466 7.85703 3.0572 7.91246 3.03162 7.97359C3.00605 8.03472 2.99288 8.10032 2.99288 8.16659C2.99288 8.23285 3.00605 8.29845 3.03162 8.35958C3.0572 8.42071 3.09466 8.47614 3.14185 8.52267C3.18903 8.56919 3.24499 8.60587 3.30648 8.63057C3.36796 8.65528 3.43374 8.66752 3.5 8.66659H6.5C6.56626 8.66752 6.63204 8.65528 6.69352 8.63057C6.75501 8.60587 6.81097 8.56919 6.85815 8.52267C6.90534 8.47614 6.9428 8.42071 6.96838 8.35958C6.99395 8.29845 7.00712 8.23285 7.00712 8.16659C7.00712 8.10032 6.99395 8.03472 6.96838 7.97359C6.9428 7.91246 6.90534 7.85703 6.85815 7.81051C6.81097 7.76398 6.75501 7.7273 6.69352 7.7026C6.63204 7.67789 6.56626 7.66565 6.5 7.66659H3.5ZM8.91667 8.66659C8.59346 8.66659 8.3847 8.85699 8.2474 9.02531C8.11009 9.19363 8.01427 9.3813 7.93229 9.5826C7.76834 9.9852 7.66667 10.4303 7.66667 10.8333C7.66573 10.8995 7.67797 10.9653 7.70268 11.0268C7.72738 11.0883 7.76406 11.1442 7.81059 11.1914C7.85711 11.2386 7.91255 11.2761 7.97367 11.3016C8.0348 11.3272 8.1004 11.3404 8.16667 11.3404C8.23293 11.3404 8.29853 11.3272 8.35966 11.3016C8.42079 11.2761 8.47622 11.2386 8.52275 11.1914C8.56927 11.1442 8.60595 11.0883 8.63066 11.0268C8.65536 10.9653 8.6676 10.8995 8.66667 10.8333C8.66667 10.6269 8.7447 10.2386 8.85807 9.96021C8.86723 9.93771 8.87521 9.93241 8.88477 9.91138C8.92186 9.99989 8.95499 10.0643 8.99349 10.1705C9.06713 10.3736 9.13851 10.5876 9.23177 10.7857C9.2784 10.8848 9.32742 10.9812 9.41471 11.0846C9.50201 11.1879 9.66667 11.3333 9.91667 11.3333C10.3917 11.3333 10.6552 11 10.8053 10.8079C10.8072 10.8055 10.8074 10.805 10.8092 10.8027C10.8501 10.8397 10.8607 10.8556 10.916 10.8977C11.2139 11.1247 11.7132 11.3333 12.5 11.3333C12.5663 11.3342 12.632 11.3219 12.6935 11.2972C12.755 11.2725 12.811 11.2359 12.8582 11.1893C12.9053 11.1428 12.9428 11.0874 12.9684 11.0262C12.994 10.9651 13.0071 10.8995 13.0071 10.8333C13.0071 10.767 12.994 10.7014 12.9684 10.6403C12.9428 10.5791 12.9053 10.5237 12.8582 10.4772C12.811 10.4307 12.755 10.394 12.6935 10.3693C12.632 10.3446 12.5663 10.3323 12.5 10.3333C11.8701 10.3333 11.6611 10.2085 11.5215 10.1021C11.4517 10.0489 11.3992 9.98942 11.3008 9.90031C11.2024 9.8112 11 9.66659 10.75 9.66659C10.4313 9.66659 10.3016 9.84287 10.2161 9.93937C10.1466 10.0179 10.1012 10.0832 10.0547 10.1451C10.0152 10.0421 9.97967 9.95644 9.93359 9.82935C9.85619 9.61582 9.77434 9.3904 9.65365 9.17896C9.5933 9.07323 9.52403 8.96816 9.41341 8.86776C9.30279 8.76736 9.12547 8.66659 8.91667 8.66659Z" />
-                    </svg>
-                    <span className="text-text-secondary text-base">
-                      Visa ending in 0315
-                    </span>
-                  </div>
-                  <Button variant="text" className="p-0.5">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="16"
-                      height="16"
-                      viewBox="0 0 16 16"
-                      fill="currentColor"
-                    >
-                      <path d="M12.6666 6.33325H9.99992V2.33325H5.99992V6.33325H3.33325L7.99992 10.9999L12.6666 6.33325ZM7.33325 7.66658V3.66659H8.66658V7.66658H9.44659L7.99992 9.11325L6.55325 7.66658H7.33325ZM3.33325 12.3333H12.6666V13.6666H3.33325V12.3333Z" />
-                    </svg>
-                  </Button>
+                <Button variant="ghost" className="p-0.5">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="currentColor"
+                  >
+                    <path d="M12.6666 6.33325H9.99992V2.33325H5.99992V6.33325H3.33325L7.99992 10.9999L12.6666 6.33325ZM7.33325 7.66658V3.66659H8.66658V7.66658H9.44659L7.99992 9.11325L6.55325 7.66658H7.33325ZM3.33325 12.3333H12.6666V13.6666H3.33325V12.3333Z" />
+                  </svg>
+                </Button>
+              </div>
+            </motion.div>
+            <motion.div
+              initial={{ y: -20, opacity: 0 }}
+              animate={{ y: 0, opacity: 1 }}
+              transition={{ delay: 0.3 }}
+              className="border-stroke-neutral-3 flex-1 border-b px-4 py-5"
+            >
+              <div className="flex items-center justify-between gap-2">
+                <div className="flex items-center gap-2">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="currentColor"
+                  >
+                    <path d="M2.83333 3.33325C1.82674 3.33325 1 4.15999 1 5.16659V11.4999C1 12.5065 1.82674 13.3333 2.83333 13.3333H13.1667C14.1733 13.3333 15 12.5065 15 11.4999V5.16659C15 4.15999 14.1733 3.33325 13.1667 3.33325H2.83333ZM2.83333 4.33325H13.1667C13.6327 4.33325 14 4.70051 14 5.16659V11.4999C14 11.966 13.6327 12.3333 13.1667 12.3333H2.83333C2.36726 12.3333 2 11.966 2 11.4999V5.16659C2 4.70051 2.36726 4.33325 2.83333 4.33325ZM3.5 5.66659C3.43374 5.66565 3.36796 5.67789 3.30648 5.7026C3.24499 5.7273 3.18903 5.76398 3.14185 5.81051C3.09466 5.85703 3.0572 5.91246 3.03162 5.97359C3.00605 6.03472 2.99288 6.10032 2.99288 6.16659C2.99288 6.23285 3.00605 6.29845 3.03162 6.35958C3.0572 6.42071 3.09466 6.47614 3.14185 6.52267C3.18903 6.56919 3.24499 6.60587 3.30648 6.63057C3.36796 6.65528 3.43374 6.66752 3.5 6.66659H8.16667C8.23292 6.66752 8.2987 6.65528 8.36019 6.63057C8.42167 6.60587 8.47763 6.56919 8.52482 6.52267C8.572 6.47614 8.60947 6.42071 8.63505 6.35958C8.66062 6.29845 8.67379 6.23285 8.67379 6.16659C8.67379 6.10032 8.66062 6.03472 8.63505 5.97359C8.60947 5.91246 8.572 5.85703 8.52482 5.81051C8.47763 5.76398 8.42167 5.7273 8.36019 5.7026C8.2987 5.67789 8.23292 5.66565 8.16667 5.66659H3.5ZM3.5 7.66659C3.43374 7.66565 3.36796 7.67789 3.30648 7.7026C3.24499 7.7273 3.18903 7.76398 3.14185 7.81051C3.09466 7.85703 3.0572 7.91246 3.03162 7.97359C3.00605 8.03472 2.99288 8.10032 2.99288 8.16659C2.99288 8.23285 3.00605 8.29845 3.03162 8.35958C3.0572 8.42071 3.09466 8.47614 3.14185 8.52267C3.18903 8.56919 3.24499 8.60587 3.30648 8.63057C3.36796 8.65528 3.43374 8.66752 3.5 8.66659H6.5C6.56626 8.66752 6.63204 8.65528 6.69352 8.63057C6.75501 8.60587 6.81097 8.56919 6.85815 8.52267C6.90534 8.47614 6.9428 8.42071 6.96838 8.35958C6.99395 8.29845 7.00712 8.23285 7.00712 8.16659C7.00712 8.10032 6.99395 8.03472 6.96838 7.97359C6.9428 7.91246 6.90534 7.85703 6.85815 7.81051C6.81097 7.76398 6.75501 7.7273 6.69352 7.7026C6.63204 7.67789 6.56626 7.66565 6.5 7.66659H3.5ZM8.91667 8.66659C8.59346 8.66659 8.3847 8.85699 8.2474 9.02531C8.11009 9.19363 8.01427 9.3813 7.93229 9.5826C7.76834 9.9852 7.66667 10.4303 7.66667 10.8333C7.66573 10.8995 7.67797 10.9653 7.70268 11.0268C7.72738 11.0883 7.76406 11.1442 7.81059 11.1914C7.85711 11.2386 7.91255 11.2761 7.97367 11.3016C8.0348 11.3272 8.1004 11.3404 8.16667 11.3404C8.23293 11.3404 8.29853 11.3272 8.35966 11.3016C8.42079 11.2761 8.47622 11.2386 8.52275 11.1914C8.56927 11.1442 8.60595 11.0883 8.63066 11.0268C8.65536 10.9653 8.6676 10.8995 8.66667 10.8333C8.66667 10.6269 8.7447 10.2386 8.85807 9.96021C8.86723 9.93771 8.87521 9.93241 8.88477 9.91138C8.92186 9.99989 8.95499 10.0643 8.99349 10.1705C9.06713 10.3736 9.13851 10.5876 9.23177 10.7857C9.2784 10.8848 9.32742 10.9812 9.41471 11.0846C9.50201 11.1879 9.66667 11.3333 9.91667 11.3333C10.3917 11.3333 10.6552 11 10.8053 10.8079C10.8072 10.8055 10.8074 10.805 10.8092 10.8027C10.8501 10.8397 10.8607 10.8556 10.916 10.8977C11.2139 11.1247 11.7132 11.3333 12.5 11.3333C12.5663 11.3342 12.632 11.3219 12.6935 11.2972C12.755 11.2725 12.811 11.2359 12.8582 11.1893C12.9053 11.1428 12.9428 11.0874 12.9684 11.0262C12.994 10.9651 13.0071 10.8995 13.0071 10.8333C13.0071 10.767 12.994 10.7014 12.9684 10.6403C12.9428 10.5791 12.9053 10.5237 12.8582 10.4772C12.811 10.4307 12.755 10.394 12.6935 10.3693C12.632 10.3446 12.5663 10.3323 12.5 10.3333C11.8701 10.3333 11.6611 10.2085 11.5215 10.1021C11.4517 10.0489 11.3992 9.98942 11.3008 9.90031C11.2024 9.8112 11 9.66659 10.75 9.66659C10.4313 9.66659 10.3016 9.84287 10.2161 9.93937C10.1466 10.0179 10.1012 10.0832 10.0547 10.1451C10.0152 10.0421 9.97967 9.95644 9.93359 9.82935C9.85619 9.61582 9.77434 9.3904 9.65365 9.17896C9.5933 9.07323 9.52403 8.96816 9.41341 8.86776C9.30279 8.76736 9.12547 8.66659 8.91667 8.66659Z" />
+                  </svg>
+                  <span className="text-content-text-neutral-2 text-sm">
+                    Visa ending in 0315
+                  </span>
                 </div>
-              </motion.div>
-            </div>
+                <Button variant="ghost" className="p-0.5">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="currentColor"
+                  >
+                    <path d="M12.6666 6.33325H9.99992V2.33325H5.99992V6.33325H3.33325L7.99992 10.9999L12.6666 6.33325ZM7.33325 7.66658V3.66659H8.66658V7.66658H9.44659L7.99992 9.11325L6.55325 7.66658H7.33325ZM3.33325 12.3333H12.6666V13.6666H3.33325V12.3333Z" />
+                  </svg>
+                </Button>
+              </div>
+            </motion.div>
           </div>
         </div>
-      </Card>
-    </motion.div>
-  );
-};
+      </div>
+    </Card>
+  </motion.div>
+);
diff --git a/docs/blocks/administration/Pricing.story.tsx b/docs/blocks/administration/Pricing.story.tsx
index 283464933..ecf5c21d8 100644
--- a/docs/blocks/administration/Pricing.story.tsx
+++ b/docs/blocks/administration/Pricing.story.tsx
@@ -1,10 +1,18 @@
-import React, { useState } from 'react';
 import { motion } from 'motion/react';
+import React, { useState } from 'react';
 
-import { toggleTheme, Toggle } from '../../../src/form/Toggle';
-import { radioTheme, Radio } from '../../../src/form/Radio';
-import { Button } from '../../../src/elements/Button';
+import { Button, ButtonGroup } from '../../../src/elements/Button';
+import { Chip } from '../../../src/elements/Chip';
+import { IconButton } from '../../../src/elements/IconButton';
+import { Radio } from '../../../src/form/Radio';
+import { Toggle } from '../../../src/form/Toggle';
 import {
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  Breadcrumbs,
+  BreadcrumbSeparator,
   Card,
   Divider,
   List,
@@ -14,7 +22,6 @@ import {
   Stack,
   VerticalSpacer
 } from '../../../src/layout';
-import { Chip } from '../../../src/elements/Chip';
 import { cn } from '../../../src/utils/Theme/helpers';
 
 export default {
@@ -36,33 +43,6 @@ const CheckIcon = () => (
   </svg>
 );
 
-const ToggleTheme = {
-  ...toggleTheme,
-  base: 'flex items-center justify-start cursor-pointer box-border border dark:border-charade dark:bg-[#1E1E2E] light:border-mystic light:bg-[#C9C9D6] hover:bg-primary-hover focus-visible:outline-hidden focus-visible:border-primary-hover rounded-xl transition-colors',
-  checked: 'justify-end bg-blue-500!',
-  handle: {
-    base: 'rounded-full dark:bg-black light:bg-white',
-    sizes: {
-      ...toggleTheme.handle.sizes,
-      medium: 'w-5 h-5'
-    }
-  },
-  sizes: {
-    ...toggleTheme.sizes,
-    medium: 'w-12 h-6 py-0.5 px-[1px]'
-  }
-};
-
-const RadioTheme = {
-  ...radioTheme,
-  base: 'box-border leading-3',
-  radio: {
-    ...radioTheme.radio,
-    base: 'will-change-[border-color] inline-flex justify-center items-center box-border align-middle rounded-full bg-transparent border light:border-charade cursor-pointer focus-visible:outline-hidden focus-visible:border-primary-hover',
-    checked: 'border-primary'
-  }
-};
-
 export const Pricing = () => {
   const [selected, setSelected] = useState('free');
 
@@ -70,67 +50,53 @@ export const Pricing = () => {
     <MotionGroup className="w-full grid grid-cols-3 gap-2.5">
       <MotionItem>
         <Card
-          className={cn('w-full h-[515px] rounded-sm transition-colors', {
-            'dark:dark:bg-[#1E1E2E]': selected !== 'free',
-            'light:border-primary-active light:bg-athens-gray':
-              selected === 'free'
+          className={cn('w-full h-[515px] rounded-sm transition-colors p-7', {
+            'bg-gradient-brand-100': selected === 'free'
           })}
           contentClassName="w-full h-full"
         >
           <Stack direction="column" alignItems="start" className="h-full">
             <Stack justifyContent="spaceBetween" className="w-full">
-              <h6 className="text-lg font-semibold">Free</h6>
-              <Chip
-                color="primary"
-                className="rounded-full px-3 text-sm dark:bg-blue-950 light:bg-blue-100 dark:text-athens-gray light:text-vulcan"
-              >
+              <h6 className="text-base font-semibold">Free</h6>
+              <Chip size="large" variant="outline" color="primary">
                 Current Plan
               </Chip>
             </Stack>
-            <span className="dark:text-waterloo light:text-charade">
-              For small teams
-            </span>
+            <span className="text-content-text-neutral-2">For small teams</span>
             <Stack>
-              <h1 className="text-3xl font-semibold">$0</h1>
-              <span className="font-bold dark:text-waterloo light:text-charade">
+              <h1 className="text-2xl font-semibold">$0</h1>
+              <span className="font-bold text-content-text-neutral-2">
                 /Month
               </span>
             </Stack>
-            <Divider className="mt-0" variant="secondary" />
+            <Divider className="mt-0" />
             <Stack direction="column" alignItems="start" className="grow">
               <List>
                 <ListItem
                   start={<CheckIcon />}
-                  className="dark:text-waterloo light:text-charade"
+                  className="text-content-text-neutral-2"
                 >
                   10 members
                 </ListItem>
                 <ListItem
                   start={<CheckIcon />}
-                  className="dark:text-waterloo light:text-charade"
+                  className="text-content-text-neutral-2"
                 >
                   Integration support
                 </ListItem>
                 <ListItem
                   start={<CheckIcon />}
-                  className="dark:text-waterloo light:text-charade"
+                  className="text-content-text-neutral-2"
                 >
                   Figma support
                 </ListItem>
               </List>
             </Stack>
             <Button
+              size="large"
               variant={selected === 'free' ? 'filled' : 'outline'}
-              color={selected === 'free' ? 'primary' : 'default'}
-              className={cn(
-                'px-4 py-2 flex items-center gap-2 self-stretch text-lg! rounded-xs focus:outline-hidden transition-colors',
-                {
-                  'bg-(image:--button-gradient) hover:bg-(image:--button-gradient-hover) focus:bg-(image:--button-gradient-focus) dark:bg-transparent! light:bg-none light:bg-primary light:hover:bg-none light:hover:bg-primary-hover light:focus:bg-primary-hover':
-                    selected === 'free',
-                  'dark:border-[#3D3D4D] focus:border-waterloo/75 hover:border-waterloo!':
-                    selected !== 'free'
-                }
-              )}
+              color={selected === 'free' ? 'primary' : 'secondary'}
+              className="px-4 py-2 flex items-center gap-2 self-stretch focus:outline-hidden transition-colors"
               onClick={() => setSelected('free')}
               fullWidth
             >
@@ -150,73 +116,61 @@ export const Pricing = () => {
       </MotionItem>
       <MotionItem>
         <Card
-          className={cn('w-full h-[515px] rounded-sm transition-colors', {
-            'dark:bg-[#1E1E2E]': selected !== 'starter',
-            'light:border-primary-active light:bg-athens-gray':
-              selected === 'starter'
+          className={cn('w-full h-[515px] rounded-sm transition-colors p-7', {
+            'bg-gradient-brand-100': selected === 'starter'
           })}
           contentClassName="w-full h-full"
         >
           <Stack direction="column" alignItems="start" className="h-full">
             <Stack justifyContent="spaceBetween" className="w-full">
-              <h6 className="text-lg font-semibold">Starter</h6>
-              <Chip
-                color="success"
-                className="rounded-full px-3 text-sm dark:bg-green-950 light:bg-green-100 dark:text-athens-gray light:text-vulcan"
-              >
+              <h6 className="text-base font-semibold">Starter</h6>
+              <Chip size="large" color="success" variant="outline">
                 Recommended
               </Chip>
             </Stack>
-            <span className="dark:text-waterloo light:text-charade">
+            <span className="text-content-text-neutral-2">
               For a broad set of teams
             </span>
             <Stack>
-              <h1 className="text-3xl font-semibold">$1,000</h1>
-              <span className="font-bold dark:text-waterloo light:text-charade">
+              <h1 className="text-2xl font-semibold">$1,000</h1>
+              <span className="font-bold text-content-text-neutral-2">
                 /Month
               </span>
             </Stack>
-            <Divider className="mt-0" variant="secondary" />
+            <Divider className="mt-0" />
             <Stack direction="column" alignItems="start" className="grow">
               <List>
                 <ListItem
                   start={<CheckIcon />}
-                  className="dark:text-waterloo light:text-charade"
+                  className="text-content-text-neutral-2"
                 >
                   Unlimited members
                 </ListItem>
                 <ListItem
                   start={<CheckIcon />}
-                  className="dark:text-waterloo light:text-charade"
+                  className="text-content-text-neutral-2"
                 >
                   Integration support
                 </ListItem>
                 <ListItem
                   start={<CheckIcon />}
-                  className="dark:text-waterloo light:text-charade"
+                  className="text-content-text-neutral-2"
                 >
                   Figma support
                 </ListItem>
                 <ListItem
                   start={<CheckIcon />}
-                  className="dark:text-waterloo light:text-charade"
+                  className="text-content-text-neutral-2"
                 >
                   Storybook support
                 </ListItem>
               </List>
             </Stack>
             <Button
+              size="large"
               variant={selected === 'starter' ? 'filled' : 'outline'}
-              color={selected === 'starter' ? 'primary' : 'default'}
-              className={cn(
-                'px-4 py-2 flex items-center gap-2 self-stretch text-lg! rounded-xs focus:outline-hidden transition-colors',
-                {
-                  'bg-(image:--button-gradient) hover:bg-(image:--button-gradient-hover) focus:bg-(image:--button-gradient-focus) dark:bg-transparent! light:bg-primary light:hover:bg-none light:hover:bg-primary-hover light:focus:bg-primary-hover':
-                    selected === 'starter',
-                  'dark:border-[#3D3D4D] focus:border-waterloo/75 hover:border-waterloo!':
-                    selected !== 'starter'
-                }
-              )}
+              color={selected === 'starter' ? 'primary' : 'secondary'}
+              className="px-4 py-2 flex items-center gap-2 self-stretch focus:outline-hidden transition-colors"
               onClick={() => setSelected('starter')}
               fullWidth
             >
@@ -236,66 +190,57 @@ export const Pricing = () => {
       </MotionItem>
       <MotionItem>
         <Card
-          className={cn('w-full h-[515px] rounded-sm transition-colors', {
-            'dark:bg-[#1E1E2E]': selected !== 'custom',
-            'light:border-primary-active light:bg-athens-gray':
-              selected === 'custom'
+          className={cn('w-full h-[515px] rounded-sm transition-colors p-7', {
+            'bg-gradient-brand-100': selected === 'custom'
           })}
           contentClassName="w-full h-full"
         >
           <Stack direction="column" alignItems="start" className="h-full">
-            <h6 className="text-lg font-semibold leading-[31px]">Enterprise</h6>
-            <span className="dark:text-waterloo light:text-charade">
+            <h6 className="text-base font-semibold">Enterprise</h6>
+            <span className="text-content-text-neutral-2">
               For all custom needs
             </span>
-            <h1 className="text-3xl font-semibold">Custom</h1>
-            <Divider className="mt-0" variant="secondary" />
+            <h1 className="text-2xl font-semibold">Custom</h1>
+            <Divider className="mt-0" />
             <Stack direction="column" alignItems="start" className="grow">
               <List>
                 <ListItem
                   start={<CheckIcon />}
-                  className="dark:text-waterloo light:text-charade"
+                  className="text-content-text-neutral-2"
                 >
                   Unlimited members
                 </ListItem>
                 <ListItem
                   start={<CheckIcon />}
-                  className="dark:text-waterloo light:text-charade"
+                  className="text-content-text-neutral-2"
                 >
                   Integration support
                 </ListItem>
                 <ListItem
                   start={<CheckIcon />}
-                  className="dark:text-waterloo light:text-charade"
+                  className="text-content-text-neutral-2"
                 >
                   Figma support
                 </ListItem>
                 <ListItem
                   start={<CheckIcon />}
-                  className="dark:text-waterloo light:text-charade"
+                  className="text-content-text-neutral-2"
                 >
                   Storybook support
                 </ListItem>
                 <ListItem
                   start={<CheckIcon />}
-                  className="dark:text-waterloo light:text-charade"
+                  className="text-content-text-neutral-2"
                 >
                   Everything else
                 </ListItem>
               </List>
             </Stack>
             <Button
+              size="large"
               variant={selected === 'custom' ? 'filled' : 'outline'}
-              color={selected === 'custom' ? 'primary' : 'default'}
-              className={cn(
-                'px-4 py-2 flex items-center gap-2 self-stretch text-lg! rounded-xs focus:outline-hidden transition-colors',
-                {
-                  'bg-(image:--button-gradient) hover:bg-(image:--button-gradient-hover) focus:bg-(image:--button-gradient-focus) dark:bg-transparent! light:bg-primary light:hover:bg-none light:hover:bg-primary-hover light:focus:bg-primary-hover':
-                    selected === 'custom',
-                  'dark:border-[#3D3D4D] focus:border-waterloo/75 hover:border-waterloo!':
-                    selected !== 'custom'
-                }
-              )}
+              color={selected === 'custom' ? 'primary' : 'secondary'}
+              className="px-4 py-2 flex items-center gap-2 self-stretch focus:outline-hidden transition-colors"
               onClick={() => setSelected('custom')}
               fullWidth
             >
@@ -321,66 +266,70 @@ export const PricingFull = () => {
   const [cycle, setCycle] = useState('Monthly');
 
   return (
-    <Card className="w-full transition-colors" contentClassName="w-full h-full">
+    <Card
+      className="w-full transition-colors p-7"
+      contentClassName="w-full h-full"
+    >
       <Stack justifyContent="spaceBetween">
-        <Stack>
-          <div className="dark:bg-charade/40 light:bg-blue-200/40 rounded-xs p-3">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              viewBox="0 0 16 16"
-              fill="currentColor"
-            >
-              <path d="M2.83333 3.33337C1.82674 3.33337 1 4.16012 1 5.16671V11.5C1 12.5066 1.82674 13.3334 2.83333 13.3334H13.1667C14.1733 13.3334 15 12.5066 15 11.5V5.16671C15 4.16012 14.1733 3.33337 13.1667 3.33337H2.83333ZM2.83333 4.33337H13.1667C13.6327 4.33337 14 4.70063 14 5.16671V11.5C14 11.9661 13.6327 12.3334 13.1667 12.3334H2.83333C2.36726 12.3334 2 11.9661 2 11.5V5.16671C2 4.70063 2.36726 4.33337 2.83333 4.33337ZM3.5 5.66671C3.43374 5.66577 3.36796 5.67801 3.30648 5.70272C3.24499 5.72743 3.18903 5.76411 3.14185 5.81063C3.09466 5.85715 3.0572 5.91259 3.03162 5.97371C3.00605 6.03484 2.99288 6.10044 2.99288 6.16671C2.99288 6.23297 3.00605 6.29857 3.03162 6.3597C3.0572 6.42083 3.09466 6.47626 3.14185 6.52279C3.18903 6.56931 3.24499 6.60599 3.30648 6.6307C3.36796 6.6554 3.43374 6.66764 3.5 6.66671H8.16667C8.23292 6.66764 8.2987 6.6554 8.36019 6.6307C8.42167 6.60599 8.47763 6.56931 8.52482 6.52279C8.572 6.47626 8.60947 6.42083 8.63505 6.3597C8.66062 6.29857 8.67379 6.23297 8.67379 6.16671C8.67379 6.10044 8.66062 6.03484 8.63505 5.97371C8.60947 5.91259 8.572 5.85715 8.52482 5.81063C8.47763 5.76411 8.42167 5.72743 8.36019 5.70272C8.2987 5.67801 8.23292 5.66577 8.16667 5.66671H3.5ZM3.5 7.66671C3.43374 7.66577 3.36796 7.67801 3.30648 7.70272C3.24499 7.72743 3.18903 7.76411 3.14185 7.81063C3.09466 7.85715 3.0572 7.91259 3.03162 7.97371C3.00605 8.03484 2.99288 8.10044 2.99288 8.16671C2.99288 8.23297 3.00605 8.29857 3.03162 8.3597C3.0572 8.42083 3.09466 8.47626 3.14185 8.52279C3.18903 8.56931 3.24499 8.60599 3.30648 8.6307C3.36796 8.6554 3.43374 8.66764 3.5 8.66671H6.5C6.56626 8.66764 6.63204 8.6554 6.69352 8.6307C6.75501 8.60599 6.81097 8.56931 6.85815 8.52279C6.90534 8.47626 6.9428 8.42083 6.96838 8.3597C6.99395 8.29857 7.00712 8.23297 7.00712 8.16671C7.00712 8.10044 6.99395 8.03484 6.96838 7.97371C6.9428 7.91259 6.90534 7.85715 6.85815 7.81063C6.81097 7.76411 6.75501 7.72743 6.69352 7.70272C6.63204 7.67801 6.56626 7.66577 6.5 7.66671H3.5ZM8.91667 8.66671C8.59346 8.66671 8.3847 8.85711 8.2474 9.02543C8.11009 9.19375 8.01427 9.38142 7.93229 9.58272C7.76834 9.98532 7.66667 10.4304 7.66667 10.8334C7.66573 10.8996 7.67797 10.9654 7.70268 11.0269C7.72738 11.0884 7.76406 11.1443 7.81059 11.1915C7.85711 11.2387 7.91255 11.2762 7.97367 11.3018C8.0348 11.3273 8.1004 11.3405 8.16667 11.3405C8.23293 11.3405 8.29853 11.3273 8.35966 11.3018C8.42079 11.2762 8.47622 11.2387 8.52275 11.1915C8.56927 11.1443 8.60595 11.0884 8.63066 11.0269C8.65536 10.9654 8.6676 10.8996 8.66667 10.8334C8.66667 10.627 8.7447 10.2387 8.85807 9.96033C8.86723 9.93783 8.87521 9.93253 8.88477 9.9115C8.92186 10 8.95499 10.0644 8.99349 10.1706C9.06713 10.3738 9.13851 10.5878 9.23177 10.7858C9.2784 10.8849 9.32742 10.9813 9.41471 11.0847C9.50201 11.188 9.66667 11.3334 9.91667 11.3334C10.3917 11.3334 10.6552 11.0001 10.8053 10.808C10.8072 10.8056 10.8074 10.8052 10.8092 10.8028C10.8501 10.8398 10.8607 10.8557 10.916 10.8978C11.2139 11.1248 11.7132 11.3334 12.5 11.3334C12.5663 11.3343 12.632 11.3221 12.6935 11.2974C12.755 11.2727 12.811 11.236 12.8582 11.1895C12.9053 11.1429 12.9428 11.0875 12.9684 11.0264C12.994 10.9652 13.0071 10.8996 13.0071 10.8334C13.0071 10.7671 12.994 10.7015 12.9684 10.6404C12.9428 10.5793 12.9053 10.5238 12.8582 10.4773C12.811 10.4308 12.755 10.3941 12.6935 10.3694C12.632 10.3447 12.5663 10.3324 12.5 10.3334C11.8701 10.3334 11.6611 10.2086 11.5215 10.1023C11.4517 10.0491 11.3992 9.98954 11.3008 9.90043C11.2024 9.81132 11 9.66671 10.75 9.66671C10.4313 9.66671 10.3016 9.84299 10.2161 9.93949C10.1466 10.018 10.1012 10.0833 10.0547 10.1452C10.0152 10.0422 9.97967 9.95656 9.93359 9.82947C9.85619 9.61594 9.77434 9.39052 9.65365 9.17908C9.5933 9.07336 9.52403 8.96828 9.41341 8.86788C9.30279 8.76748 9.12547 8.66671 8.91667 8.66671Z" />
-            </svg>
-          </div>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            viewBox="0 0 16 16"
-            fill="currentColor"
+        <Breadcrumbs>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="#">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  fill="currentColor"
+                >
+                  <path d="M2.83333 3.33337C1.82674 3.33337 1 4.16012 1 5.16671V11.5C1 12.5066 1.82674 13.3334 2.83333 13.3334H13.1667C14.1733 13.3334 15 12.5066 15 11.5V5.16671C15 4.16012 14.1733 3.33337 13.1667 3.33337H2.83333ZM2.83333 4.33337H13.1667C13.6327 4.33337 14 4.70063 14 5.16671V11.5C14 11.9661 13.6327 12.3334 13.1667 12.3334H2.83333C2.36726 12.3334 2 11.9661 2 11.5V5.16671C2 4.70063 2.36726 4.33337 2.83333 4.33337ZM3.5 5.66671C3.43374 5.66577 3.36796 5.67801 3.30648 5.70272C3.24499 5.72743 3.18903 5.76411 3.14185 5.81063C3.09466 5.85715 3.0572 5.91259 3.03162 5.97371C3.00605 6.03484 2.99288 6.10044 2.99288 6.16671C2.99288 6.23297 3.00605 6.29857 3.03162 6.3597C3.0572 6.42083 3.09466 6.47626 3.14185 6.52279C3.18903 6.56931 3.24499 6.60599 3.30648 6.6307C3.36796 6.6554 3.43374 6.66764 3.5 6.66671H8.16667C8.23292 6.66764 8.2987 6.6554 8.36019 6.6307C8.42167 6.60599 8.47763 6.56931 8.52482 6.52279C8.572 6.47626 8.60947 6.42083 8.63505 6.3597C8.66062 6.29857 8.67379 6.23297 8.67379 6.16671C8.67379 6.10044 8.66062 6.03484 8.63505 5.97371C8.60947 5.91259 8.572 5.85715 8.52482 5.81063C8.47763 5.76411 8.42167 5.72743 8.36019 5.70272C8.2987 5.67801 8.23292 5.66577 8.16667 5.66671H3.5ZM3.5 7.66671C3.43374 7.66577 3.36796 7.67801 3.30648 7.70272C3.24499 7.72743 3.18903 7.76411 3.14185 7.81063C3.09466 7.85715 3.0572 7.91259 3.03162 7.97371C3.00605 8.03484 2.99288 8.10044 2.99288 8.16671C2.99288 8.23297 3.00605 8.29857 3.03162 8.3597C3.0572 8.42083 3.09466 8.47626 3.14185 8.52279C3.18903 8.56931 3.24499 8.60599 3.30648 8.6307C3.36796 8.6554 3.43374 8.66764 3.5 8.66671H6.5C6.56626 8.66764 6.63204 8.6554 6.69352 8.6307C6.75501 8.60599 6.81097 8.56931 6.85815 8.52279C6.90534 8.47626 6.9428 8.42083 6.96838 8.3597C6.99395 8.29857 7.00712 8.23297 7.00712 8.16671C7.00712 8.10044 6.99395 8.03484 6.96838 7.97371C6.9428 7.91259 6.90534 7.85715 6.85815 7.81063C6.81097 7.76411 6.75501 7.72743 6.69352 7.70272C6.63204 7.67801 6.56626 7.66577 6.5 7.66671H3.5ZM8.91667 8.66671C8.59346 8.66671 8.3847 8.85711 8.2474 9.02543C8.11009 9.19375 8.01427 9.38142 7.93229 9.58272C7.76834 9.98532 7.66667 10.4304 7.66667 10.8334C7.66573 10.8996 7.67797 10.9654 7.70268 11.0269C7.72738 11.0884 7.76406 11.1443 7.81059 11.1915C7.85711 11.2387 7.91255 11.2762 7.97367 11.3018C8.0348 11.3273 8.1004 11.3405 8.16667 11.3405C8.23293 11.3405 8.29853 11.3273 8.35966 11.3018C8.42079 11.2762 8.47622 11.2387 8.52275 11.1915C8.56927 11.1443 8.60595 11.0884 8.63066 11.0269C8.65536 10.9654 8.6676 10.8996 8.66667 10.8334C8.66667 10.627 8.7447 10.2387 8.85807 9.96033C8.86723 9.93783 8.87521 9.93253 8.88477 9.9115C8.92186 10 8.95499 10.0644 8.99349 10.1706C9.06713 10.3738 9.13851 10.5878 9.23177 10.7858C9.2784 10.8849 9.32742 10.9813 9.41471 11.0847C9.50201 11.188 9.66667 11.3334 9.91667 11.3334C10.3917 11.3334 10.6552 11.0001 10.8053 10.808C10.8072 10.8056 10.8074 10.8052 10.8092 10.8028C10.8501 10.8398 10.8607 10.8557 10.916 10.8978C11.2139 11.1248 11.7132 11.3334 12.5 11.3334C12.5663 11.3343 12.632 11.3221 12.6935 11.2974C12.755 11.2727 12.811 11.236 12.8582 11.1895C12.9053 11.1429 12.9428 11.0875 12.9684 11.0264C12.994 10.9652 13.0071 10.8996 13.0071 10.8334C13.0071 10.7671 12.994 10.7015 12.9684 10.6404C12.9428 10.5793 12.9053 10.5238 12.8582 10.4773C12.811 10.4308 12.755 10.3941 12.6935 10.3694C12.632 10.3447 12.5663 10.3324 12.5 10.3334C11.8701 10.3334 11.6611 10.2086 11.5215 10.1023C11.4517 10.0491 11.3992 9.98954 11.3008 9.90043C11.2024 9.81132 11 9.66671 10.75 9.66671C10.4313 9.66671 10.3016 9.84299 10.2161 9.93949C10.1466 10.018 10.1012 10.0833 10.0547 10.1452C10.0152 10.0422 9.97967 9.95656 9.93359 9.82947C9.85619 9.61594 9.77434 9.39052 9.65365 9.17908C9.5933 9.07336 9.52403 8.96828 9.41341 8.86788C9.30279 8.76748 9.12547 8.66671 8.91667 8.66671Z" />
+                </svg>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Billing</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumbs>
+        <ButtonGroup size="large">
+          <Button
+            className={cn({
+              'bg-buttons-colors-core-icon-primary-background-hover':
+                cycle === 'Monthly'
+            })}
+            onClick={() => setCycle('Monthly')}
           >
-            <path d="M10.47 4.94L9.53 4L5.53 8L9.53 12L10.47 11.06L7.41667 8L10.47 4.94Z" />
-          </svg>
-          <a href="#" className="text-primary">
-            Back to billing
-          </a>
-        </Stack>
-        <Stack className="dark:bg-vulcan light:bg-mystic rounded-sm p-1" dense>
-          {['Monthly', 'Yearly'].map(type => (
-            <Button
-              key={type}
-              size="large"
-              className={cn('text-lg', {
-                'dark:text-black dark:bg-blue-100': cycle === type,
-                'light:text-black light:bg-blue-200/40': cycle !== type
-              })}
-              onClick={() => setCycle(type)}
-            >
-              {type}
-            </Button>
-          ))}
-        </Stack>
+            Monthly
+          </Button>
+          <Button
+            className={cn({
+              'bg-buttons-colors-core-icon-primary-background-hover':
+                cycle === 'Yearly'
+            })}
+            onClick={() => setCycle('Yearly')}
+          >
+            Yearly
+          </Button>
+        </ButtonGroup>
       </Stack>
       <h4 className="text-[24px] font-bold">Plans</h4>
-      <span className="dark:text-waterloo light:text-charade text-base">
+      <span className="text-content-text-neutral-2 text-sm">
         Change your current workspace plan
       </span>
       <MotionGroup className="flex flex-col gap-2.5 mt-7">
         <div className="grid grid-cols-[400px_1fr_1fr_1fr] gap-2.5">
           <MotionItem className="self-end font-bold">Core Features</MotionItem>
           <MotionItem className="flex flex-col">
-            <h6 className="text-lg font-bold">Founders Package</h6>
-            <h2 className="text-2xl font-bold">
+            <h6 className="text-base font-bold">Founders Package</h6>
+            <h2 className="text-xl font-bold">
               {cycle === 'Monthly' ? '$1,000' : '$10,000'}
             </h2>
-            <span className="dark:text-waterloo light:text-charade text-sm">
+            <span className="text-content-text-neutral-2 text-xs">
               {cycle === 'Monthly' ? 'Per month' : 'Per year'}
             </span>
             <VerticalSpacer space="md" />
-            <div className="dark:bg-charade/40 light:bg-blue-200/40 py-2 px-4 rounded-xs flex gap-2 items-center justify-center">
+            <div className="bg-content-assets-brand-4 py-2 px-4 rounded-xs flex gap-2 items-center justify-center">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="17"
@@ -395,95 +344,93 @@ export const PricingFull = () => {
             <Divider />
           </MotionItem>
           <MotionItem className="flex flex-col">
-            <h6 className="text-lg font-bold">Startup Package</h6>
-            <h2 className="text-2xl font-bold">
+            <h6 className="text-base font-bold">Startup Package</h6>
+            <h2 className="text-xl font-bold">
               {cycle === 'Monthly' ? '$5,000' : '$50,000'}
             </h2>
-            <span className="dark:text-waterloo light:text-charade text-sm">
+            <span className="text-content-text-neutral-2 text-xs">
               {cycle === 'Monthly' ? 'Per month' : 'Per year'}
             </span>
             <VerticalSpacer space="md" />
             <Button
+              size="large"
               color="primary"
-              className="px-4 py-2 text-lg gap-2 bg-(image:--button-gradient) hover:bg-(image:--button-gradient-hover) focus:bg-(image:--button-gradient-focus) dark:bg-transparent! light:bg-primary light:hover:bg-none light:hover:bg-primary-hover light:focus:bg-primary-hover focus:outline-hidden transition-colors"
+              startAdornment={
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="17"
+                  height="16"
+                  viewBox="0 0 17 16"
+                  fill="none"
+                >
+                  <path
+                    d="M3.16669 7.99996L4.10669 8.93996L7.83335 5.21996V13.3333H9.16669V5.21996L12.8867 8.94663L13.8334 7.99996L8.50002 2.66663L3.16669 7.99996Z"
+                    fill="white"
+                  />
+                </svg>
+              }
             >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="17"
-                height="16"
-                viewBox="0 0 17 16"
-                fill="none"
-              >
-                <path
-                  d="M3.16669 7.99996L4.10669 8.93996L7.83335 5.21996V13.3333H9.16669V5.21996L12.8867 8.94663L13.8334 7.99996L8.50002 2.66663L3.16669 7.99996Z"
-                  fill="white"
-                />
-              </svg>
               Upgrade
             </Button>
             <Divider />
           </MotionItem>
           <MotionItem className="flex flex-col">
-            <h6 className="text-lg font-bold">Seed Package</h6>
-            <h2 className="text-2xl font-bold">Let's talk</h2>
-            <span className="dark:text-waterloo light:text-charade text-sm">
+            <h6 className="text-base font-bold">Seed Package</h6>
+            <h2 className="text-xl font-bold">Let&apos;s talk</h2>
+            <span className="text-content-text-neutral-2 text-xs">
               {cycle === 'Monthly' ? 'Per month' : 'Per year'}
             </span>
             <VerticalSpacer space="md" />
-            <Button variant="outline" className="text-lg py-2 gap-2">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="currentColor"
-              >
-                <path d="M7.99998 1.33337C4.324 1.33337 1.33331 4.32406 1.33331 8.00004C1.33331 11.676 4.324 14.6667 7.99998 14.6667C11.676 14.6667 14.6666 11.676 14.6666 8.00004C14.6666 4.32406 11.676 1.33337 7.99998 1.33337ZM7.99998 2.33337C11.1355 2.33337 13.6666 4.8645 13.6666 8.00004C13.6666 11.1356 11.1355 13.6667 7.99998 13.6667C4.86444 13.6667 2.33331 11.1356 2.33331 8.00004C2.33331 4.8645 4.86444 2.33337 7.99998 2.33337ZM7.99998 3.33337C5.42846 3.33337 3.33331 5.42853 3.33331 8.00004C3.33331 10.5716 5.42846 12.6667 7.99998 12.6667C8.57568 12.6667 9.1294 12.5622 9.63995 12.3705C9.70216 12.348 9.75927 12.3133 9.80799 12.2685C9.85671 12.2238 9.89605 12.1698 9.92376 12.1097C9.95146 12.0496 9.96696 11.9846 9.96937 11.9185C9.97178 11.8524 9.96104 11.7865 9.93778 11.7245C9.91452 11.6626 9.8792 11.6059 9.83387 11.5577C9.78854 11.5095 9.7341 11.4708 9.6737 11.4438C9.6133 11.4168 9.54814 11.4021 9.482 11.4004C9.41586 11.3988 9.35005 11.4103 9.28839 11.4343C8.88828 11.5845 8.45494 11.6667 7.99998 11.6667C5.96883 11.6667 4.33331 10.0312 4.33331 8.00004C4.33331 5.96889 5.96883 4.33337 7.99998 4.33337C10.0311 4.33337 11.6666 5.96889 11.6666 8.00004V8.50004C11.6666 8.96612 11.2994 9.33337 10.8333 9.33337C10.3672 9.33337 9.99998 8.96612 9.99998 8.50004V6.16671C10.001 6.0439 9.9567 5.92504 9.87566 5.83277C9.79462 5.74049 9.68246 5.68127 9.56056 5.66639C9.43865 5.6515 9.31554 5.68199 9.21468 5.75205C9.11381 5.82211 9.04226 5.92684 9.01365 6.04626C8.67619 5.80813 8.27254 5.66671 7.83331 5.66671C6.61604 5.66671 5.66665 6.74253 5.66665 8.00004C5.66665 9.25755 6.61604 10.3334 7.83331 10.3334C8.45023 10.3334 8.99741 10.0561 9.388 9.61983C9.72449 10.0521 10.2477 10.3334 10.8333 10.3334C11.8399 10.3334 12.6666 9.50663 12.6666 8.50004V8.00004C12.6666 5.42853 10.5715 3.33337 7.99998 3.33337ZM7.83331 6.66671C8.45404 6.66671 8.99998 7.23555 8.99998 8.00004C8.99998 8.76453 8.45404 9.33337 7.83331 9.33337C7.21258 9.33337 6.66665 8.76453 6.66665 8.00004C6.66665 7.23555 7.21258 6.66671 7.83331 6.66671Z" />
-              </svg>
+            <Button
+              variant="outline"
+              size="large"
+              startAdornment={
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  fill="currentColor"
+                >
+                  <path d="M7.99998 1.33337C4.324 1.33337 1.33331 4.32406 1.33331 8.00004C1.33331 11.676 4.324 14.6667 7.99998 14.6667C11.676 14.6667 14.6666 11.676 14.6666 8.00004C14.6666 4.32406 11.676 1.33337 7.99998 1.33337ZM7.99998 2.33337C11.1355 2.33337 13.6666 4.8645 13.6666 8.00004C13.6666 11.1356 11.1355 13.6667 7.99998 13.6667C4.86444 13.6667 2.33331 11.1356 2.33331 8.00004C2.33331 4.8645 4.86444 2.33337 7.99998 2.33337ZM7.99998 3.33337C5.42846 3.33337 3.33331 5.42853 3.33331 8.00004C3.33331 10.5716 5.42846 12.6667 7.99998 12.6667C8.57568 12.6667 9.1294 12.5622 9.63995 12.3705C9.70216 12.348 9.75927 12.3133 9.80799 12.2685C9.85671 12.2238 9.89605 12.1698 9.92376 12.1097C9.95146 12.0496 9.96696 11.9846 9.96937 11.9185C9.97178 11.8524 9.96104 11.7865 9.93778 11.7245C9.91452 11.6626 9.8792 11.6059 9.83387 11.5577C9.78854 11.5095 9.7341 11.4708 9.6737 11.4438C9.6133 11.4168 9.54814 11.4021 9.482 11.4004C9.41586 11.3988 9.35005 11.4103 9.28839 11.4343C8.88828 11.5845 8.45494 11.6667 7.99998 11.6667C5.96883 11.6667 4.33331 10.0312 4.33331 8.00004C4.33331 5.96889 5.96883 4.33337 7.99998 4.33337C10.0311 4.33337 11.6666 5.96889 11.6666 8.00004V8.50004C11.6666 8.96612 11.2994 9.33337 10.8333 9.33337C10.3672 9.33337 9.99998 8.96612 9.99998 8.50004V6.16671C10.001 6.0439 9.9567 5.92504 9.87566 5.83277C9.79462 5.74049 9.68246 5.68127 9.56056 5.66639C9.43865 5.6515 9.31554 5.68199 9.21468 5.75205C9.11381 5.82211 9.04226 5.92684 9.01365 6.04626C8.67619 5.80813 8.27254 5.66671 7.83331 5.66671C6.61604 5.66671 5.66665 6.74253 5.66665 8.00004C5.66665 9.25755 6.61604 10.3334 7.83331 10.3334C8.45023 10.3334 8.99741 10.0561 9.388 9.61983C9.72449 10.0521 10.2477 10.3334 10.8333 10.3334C11.8399 10.3334 12.6666 9.50663 12.6666 8.50004V8.00004C12.6666 5.42853 10.5715 3.33337 7.99998 3.33337ZM7.83331 6.66671C8.45404 6.66671 8.99998 7.23555 8.99998 8.00004C8.99998 8.76453 8.45404 9.33337 7.83331 9.33337C7.21258 9.33337 6.66665 8.76453 6.66665 8.00004C6.66665 7.23555 7.21258 6.66671 7.83331 6.66671Z" />
+                </svg>
+              }
+            >
               Email Sales
             </Button>
             <Divider />
           </MotionItem>
         </div>
-        <MotionItem className="grid grid-cols-[400px_1fr_1fr_1fr] justify-items-center items-center gap-2.5 text-base">
+        <MotionItem className="grid grid-cols-[400px_1fr_1fr_1fr] justify-items-center items-center gap-2.5 text-content-text-neutral-2">
           <div className="justify-self-start">Design Support (Add On)</div>
           <div>
-            <Chip
-              color="primary"
-              className="rounded-full px-3 dark:text-athens-gray light:text-charade dark:bg-blue-950 light:bg-blue-100"
-            >
+            <Chip size="large" color="primary" variant="outline">
               Unlimited
             </Chip>
           </div>
           <div>
-            <Chip
-              color="primary"
-              className="rounded-full px-3 dark:text-athens-gray light:text-charade dark:bg-blue-950 light:bg-blue-100"
-            >
+            <Chip size="large" color="primary" variant="outline">
               Unlimited
             </Chip>
           </div>
           <div>
-            <Chip
-              color="primary"
-              className="rounded-full px-3 dark:text-athens-gray light:text-charade dark:bg-blue-950 light:bg-blue-100"
-            >
+            <Chip size="large" color="primary" variant="outline">
               Unlimited
             </Chip>
           </div>
         </MotionItem>
         <MotionItem>
-          <Divider className="dark:bg-charade dark:via-charade light:bg-mystic light:via-mystic" />
+          <Divider />
         </MotionItem>
-        <MotionItem className="grid grid-cols-[400px_1fr_1fr_1fr] justify-items-center items-center text-center gap-2.5 text-base dark:text-waterloo light:text-charade">
-          <div className="justify-self-start dark:text-athens-gray light:text-charade">
-            Product Research
-          </div>
+        <MotionItem className="grid grid-cols-[400px_1fr_1fr_1fr] justify-items-center items-center text-center gap-2.5 text-content-text-neutral-2">
+          <div className="justify-self-start">Product Research</div>
           <div>Logo and brand book</div>
           <div>Competitor analysis Product guidance</div>
-          <div>
-            <a href="" className="inline-flex items-center gap-2 text-primary">
-              See details{' '}
+          <Button
+            className="p-0"
+            size="large"
+            variant="text"
+            endAdornment={
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="16"
@@ -493,19 +440,19 @@ export const PricingFull = () => {
               >
                 <path
                   d="M8.00002 2.66663L7.06002 3.60663L10.78 7.33329H2.66669V8.66663H10.78L7.06002 12.3933L8.00002 13.3333L13.3334 7.99996L8.00002 2.66663Z"
-                  fill="#105EFF"
+                  fill="currentColor"
                 />
               </svg>
-            </a>
-          </div>
+            }
+          >
+            See details
+          </Button>
         </MotionItem>
         <MotionItem>
-          <Divider className="dark:bg-charade dark:via-charade light:bg-mystic light:via-mystic" />
+          <Divider />
         </MotionItem>
-        <MotionItem className="grid grid-cols-[400px_1fr_1fr_1fr] justify-items-center items-center text-center gap-2.5 text-base dark:text-waterloo light:text-charade">
-          <div className="justify-self-start dark:text-athens-gray light:text-charade">
-            Brand Style Guide
-          </div>
+        <MotionItem className="grid grid-cols-[400px_1fr_1fr_1fr] justify-items-center items-center text-center gap-2.5 text-sm text-content-text-neutral-2">
+          <div className="justify-self-start">Brand Style Guide</div>
           <div>
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -534,9 +481,11 @@ export const PricingFull = () => {
               />
             </svg>
           </div>
-          <div>
-            <a href="" className="inline-flex items-center gap-2 text-primary">
-              See details{' '}
+          <Button
+            className="p-0"
+            size="large"
+            variant="text"
+            endAdornment={
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="16"
@@ -546,24 +495,26 @@ export const PricingFull = () => {
               >
                 <path
                   d="M8.00002 2.66663L7.06002 3.60663L10.78 7.33329H2.66669V8.66663H10.78L7.06002 12.3933L8.00002 13.3333L13.3334 7.99996L8.00002 2.66663Z"
-                  fill="#105EFF"
+                  fill="currentColor"
                 />
               </svg>
-            </a>
-          </div>
+            }
+          >
+            See details
+          </Button>
         </MotionItem>
         <MotionItem>
-          <Divider className="dark:bg-charade dark:via-charade light:bg-mystic light:via-mystic" />
+          <Divider />
         </MotionItem>
-        <MotionItem className="grid grid-cols-[400px_1fr_1fr_1fr] justify-items-center items-center text-center gap-2.5 text-base dark:text-waterloo light:text-charade">
-          <div className="justify-self-start dark:text-athens-gray light:text-charade">
-            Prototype of Web Application
-          </div>
+        <MotionItem className="grid grid-cols-[400px_1fr_1fr_1fr] justify-items-center items-center text-center gap-2.5 text-sm text-content-text-neutral-2">
+          <div className="justify-self-start">Prototype of Web Application</div>
           <div>3 Figma Designs</div>
           <div>Fully interactive prototype</div>
-          <div>
-            <a href="" className="inline-flex items-center gap-2 text-primary">
-              See details{' '}
+          <Button
+            className="p-0"
+            size="large"
+            variant="text"
+            endAdornment={
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="16"
@@ -573,17 +524,19 @@ export const PricingFull = () => {
               >
                 <path
                   d="M8.00002 2.66663L7.06002 3.60663L10.78 7.33329H2.66669V8.66663H10.78L7.06002 12.3933L8.00002 13.3333L13.3334 7.99996L8.00002 2.66663Z"
-                  fill="#105EFF"
+                  fill="currentColor"
                 />
               </svg>
-            </a>
-          </div>
+            }
+          >
+            See details
+          </Button>
         </MotionItem>
         <MotionItem>
-          <Divider className="dark:bg-charade dark:via-charade light:bg-mystic light:via-mystic" />
+          <Divider />
         </MotionItem>
-        <MotionItem className="grid grid-cols-[400px_1fr_1fr_1fr] justify-items-center items-center text-center gap-2.5 text-base dark:text-waterloo light:text-charade">
-          <div className="justify-self-start dark:text-athens-gray light:text-charade">
+        <MotionItem className="grid grid-cols-[400px_1fr_1fr_1fr] justify-items-center items-center text-center gap-2.5 text-sm text-content-text-neutral-2">
+          <div className="justify-self-start">
             Development of Web Application
           </div>
           <div>
@@ -604,7 +557,7 @@ export const PricingFull = () => {
           <div>Build out of pages/features in react.js</div>
         </MotionItem>
         <MotionItem>
-          <Divider className="dark:bg-charade dark:via-charade light:bg-mystic light:via-mystic" />
+          <Divider />
         </MotionItem>
       </MotionGroup>
     </Card>
@@ -623,16 +576,16 @@ export const PricingMinimal = () => {
     >
       <Card
         className="transition-colors"
-        headerClassName="border-b dark:border-waterloo/40 light:border-mystic px-7 pt-7 pb-2"
+        headerClassName="border-b border-stroke-neutral-3 px-7 pt-7 pb-2"
         header={
           <Stack className="w-full" justifyContent="spaceBetween">
             <div>
-              <h2 className="text-2xl font-bold">Change your plan</h2>
-              <span className="text-sm dark:text-waterloo light:text-charade">
+              <h2 className="text-xl font-bold">Change your plan</h2>
+              <span className="text-xs text-content-text-neutral-2">
                 Switch to annual to save 16%
               </span>
             </div>
-            <Button className="p-3 light:bg-blue-200/40 light:text-charade">
+            <IconButton size="large" color="secondary">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="16"
@@ -642,26 +595,18 @@ export const PricingMinimal = () => {
               >
                 <path d="M12.6666 4.27325L11.7266 3.33325L7.99998 7.05992L4.27331 3.33325L3.33331 4.27325L7.05998 7.99992L3.33331 11.7266L4.27331 12.6666L7.99998 8.93992L11.7266 12.6666L12.6666 11.7266L8.93998 7.99992L12.6666 4.27325Z" />
               </svg>
-            </Button>
+            </IconButton>
           </Stack>
         }
         disablePadding
       >
         <div className="p-7">
           <Stack>
-            <Toggle
-              checked={isAnnual}
-              onChange={setIsAnnual}
-              theme={ToggleTheme}
-            />
-            <span className="text-sm dark:text-waterloo light:text-charade">
+            <Toggle checked={isAnnual} onChange={setIsAnnual} />
+            <span className="text-xs text-content-text-neutral-2">
               Annual pricing
             </span>
-            <Chip
-              size="small"
-              color="primary"
-              className="rounded-full dark:bg-blue-950 light:bg-blue-100 dark:text-gray-100 light:text-vulcan px-3 py-1"
-            >
+            <Chip color="primary" variant="outline">
               Save 16%
             </Chip>
           </Stack>
@@ -669,24 +614,23 @@ export const PricingMinimal = () => {
             <MotionItem>
               <Card
                 className={cn('px-5 py-7', {
-                  'border-solid border-transparent rounded-sm dark:[border-image:linear-gradient(to_top_right,#2F6AFF,#0B0B11)_10] light:[border-image:linear-gradient(to_top_right,#105EFF,#F7F7FA)_10] dark:bg-blue-900/40 light:bg-blue-200/40':
+                  'border-solid border-transparent rounded-sm dark:[border-image:linear-gradient(to_top_right,#2F6AFF,#0B0B11)_10] light:[border-image:linear-gradient(to_top_right,#105EFF,#F7F7FA)_10] bg-background-brand-5':
                     isFree
                 })}
               >
                 <Stack>
-                  <h6 className="grow text-lg font-bold whitespace-nowrap">
+                  <h6 className="grow text-base font-bold whitespace-nowrap">
                     FREE account
                   </h6>
                   <Radio
                     size="small"
-                    theme={RadioTheme}
                     checked={isFree}
                     onChange={selected => setIsFree(selected)}
                   />
                 </Stack>
                 <Stack>
                   <h2 className="text-[32px] font-bold">$0</h2>
-                  <h6 className="dark:text-waterloo light:text-charade text-lg font-bold">
+                  <h6 className="text-content-text-neutral-2 text-base font-bold">
                     {isAnnual ? '/Year' : '/Month'}
                   </h6>
                 </Stack>
@@ -694,19 +638,19 @@ export const PricingMinimal = () => {
                 <List>
                   <ListItem
                     start={<CheckIcon />}
-                    className="dark:text-waterloo light:text-charade"
+                    className="text-content-text-neutral-2"
                   >
                     Basic Integration support
                   </ListItem>
                   <ListItem
                     start={<CheckIcon />}
-                    className="dark:text-waterloo light:text-charade"
+                    className="text-content-text-neutral-2"
                   >
                     Limited Figma support
                   </ListItem>
                   <ListItem
                     start={<CheckIcon />}
-                    className="dark:text-waterloo light:text-charade"
+                    className="text-content-text-neutral-2"
                   >
                     Storybook Support
                   </ListItem>
@@ -716,17 +660,16 @@ export const PricingMinimal = () => {
             <MotionItem>
               <Card
                 className={cn('px-5 py-7', {
-                  'border-solid border-transparent dark:[border-image:linear-gradient(to_top_right,#2F6AFF,#0B0B11)_10] light:[border-image:linear-gradient(to_top_right,#105EFF,#F7F7FA)_10] dark:bg-blue-900/40 light:bg-blue-200/40':
+                  'border-solid border-transparent dark:[border-image:linear-gradient(to_top_right,#2F6AFF,#0B0B11)_10] light:[border-image:linear-gradient(to_top_right,#105EFF,#F7F7FA)_10] bg-background-brand-5':
                     !isFree
                 })}
               >
                 <Stack>
-                  <h6 className="grow text-lg font-bold whitespace-nowrap">
+                  <h6 className="grow text-base font-bold whitespace-nowrap">
                     PRO account
                   </h6>
                   <Radio
                     size="small"
-                    theme={RadioTheme}
                     checked={!isFree}
                     onChange={selected => setIsFree(!selected)}
                   />
@@ -735,7 +678,7 @@ export const PricingMinimal = () => {
                   <h2 className="text-[32px] font-bold">
                     {isAnnual ? '$222' : '$25'}
                   </h2>
-                  <h6 className="dark:text-waterloo light:text-charade text-lg font-bold">
+                  <h6 className="text-content-text-neutral-2 text-base font-bold">
                     {isAnnual ? '/Year' : '/Month'}
                   </h6>
                 </Stack>
@@ -743,19 +686,19 @@ export const PricingMinimal = () => {
                 <List>
                   <ListItem
                     start={<CheckIcon />}
-                    className="dark:text-waterloo light:text-charade"
+                    className="text-content-text-neutral-2"
                   >
                     Basic Integration support
                   </ListItem>
                   <ListItem
                     start={<CheckIcon />}
-                    className="dark:text-waterloo light:text-charade"
+                    className="text-content-text-neutral-2"
                   >
                     Limited Figma support
                   </ListItem>
                   <ListItem
                     start={<CheckIcon />}
-                    className="dark:text-waterloo light:text-charade"
+                    className="text-content-text-neutral-2"
                   >
                     Storybook Support
                   </ListItem>
@@ -764,11 +707,11 @@ export const PricingMinimal = () => {
             </MotionItem>
           </MotionGroup>
         </div>
-        <div className="border-t dark:border-waterloo/40 light:border-mystic p-7">
+        <div className="border-t border-stroke-neutral-3 p-7">
           <Stack direction="rowReverse">
             <Button
+              size="large"
               color="primary"
-              className="px-4 py-2 text-lg bg-(image:--button-gradient) hover:bg-(image:--button-gradient-hover) focus:bg-(image:--button-gradient-focus) dark:bg-transparent! light:bg-primary light:hover:bg-none light:hover:bg-primary-hover light:focus:bg-primary-hover focus:outline-hidden transition-colors"
               endAdornment={
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -784,8 +727,8 @@ export const PricingMinimal = () => {
               Save Changes
             </Button>
             <Button
+              size="large"
               variant="outline"
-              className="px-4 py-2 text-lg"
               endAdornment={
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -802,6 +745,7 @@ export const PricingMinimal = () => {
             </Button>
             <div className="grow">
               <Button
+                size="large"
                 variant="text"
                 color="primary"
                 startAdornment={
diff --git a/docs/blocks/administration/Profile.story.tsx b/docs/blocks/administration/Profile.story.tsx
index 93564f699..945350cae 100644
--- a/docs/blocks/administration/Profile.story.tsx
+++ b/docs/blocks/administration/Profile.story.tsx
@@ -1,6 +1,10 @@
-import React from 'react';
 import { motion } from 'motion/react';
+import type { FC } from 'react';
+import React, { useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
 
+import { Avatar, Button, Chip } from '../../../src/elements';
+import { Input, Radio } from '../../../src/form';
 import {
   Block,
   Card,
@@ -15,11 +19,13 @@ import {
   TabPanel,
   Tabs
 } from '../../../src/layout';
-import { Input, Radio } from '../../../src/form';
-import { Avatar, Button, Chip } from '../../../src/elements';
-import { Controller, useForm } from 'react-hook-form';
 
-const LogoIcon = ({ className }: { className?: string }) => (
+interface IconProps {
+  className?: string;
+  size?: number;
+}
+
+const LogoIcon: FC<IconProps> = ({ className }) => (
   <svg
     width="260"
     height="341"
@@ -54,7 +60,7 @@ export default {
   title: 'Blocks/Administration/Profile'
 };
 
-const LocationIcon = ({ className }) => (
+const LocationIcon: FC<IconProps> = ({ className }) => (
   <svg
     width="16"
     height="16"
@@ -78,7 +84,7 @@ const LocationIcon = ({ className }) => (
   </svg>
 );
 
-const EmailIcon = ({ className }) => (
+const EmailIcon: FC<IconProps> = ({ className }) => (
   <svg
     width="16"
     height="16"
@@ -97,7 +103,7 @@ const EmailIcon = ({ className }) => (
   </svg>
 );
 
-const SymbolIcon = () => (
+const SymbolIcon: FC<IconProps> = () => (
   <svg
     width="18"
     height="24"
@@ -108,15 +114,15 @@ const SymbolIcon = () => (
     <g id="symbol">
       <path
         id="Path-88"
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M17.6183 0L0.600098 11.9049L17.6183 24V13.0064L13.7985 10.545L11.6487 12L15.2263 14.3273V19.3114L4.80132 11.9049L17.6183 2.94899V0Z"
         fill="url(#paint0_linear_3138_3970)"
       />
       <path
         id="Path-89"
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M17.6183 3.87677L6.22632 11.9114L14.4144 17.7229V14.7166L10.28 12.0323L17.6183 6.85727V3.87677Z"
         fill="url(#paint1_linear_3138_3970)"
       />
@@ -130,10 +136,10 @@ const SymbolIcon = () => (
         y2="20.1628"
         gradientUnits="userSpaceOnUse"
       >
-        <stop stop-color="#105EFF" />
-        <stop offset="0.413357" stop-color="#009BFF" />
-        <stop offset="0.735652" stop-color="#105EFF" />
-        <stop offset="1" stop-color="#090E43" />
+        <stop stopColor="#105EFF" />
+        <stop offset="0.413357" stopColor="#009BFF" />
+        <stop offset="0.735652" stopColor="#105EFF" />
+        <stop offset="1" stopColor="#090E43" />
       </linearGradient>
       <linearGradient
         id="paint1_linear_3138_3970"
@@ -143,16 +149,16 @@ const SymbolIcon = () => (
         y2="4.21494"
         gradientUnits="userSpaceOnUse"
       >
-        <stop stop-color="#105EFF" />
-        <stop offset="0.413357" stop-color="#009BFF" />
-        <stop offset="0.735652" stop-color="#105EFF" />
-        <stop offset="1" stop-color="#090E43" />
+        <stop stopColor="#105EFF" />
+        <stop offset="0.413357" stopColor="#009BFF" />
+        <stop offset="0.735652" stopColor="#105EFF" />
+        <stop offset="1" stopColor="#090E43" />
       </linearGradient>
     </defs>
   </svg>
 );
 
-const PhoneIcon = ({ className }) => (
+const PhoneIcon: FC<IconProps> = ({ className }) => (
   <svg
     width="16"
     height="16"
@@ -171,7 +177,7 @@ const PhoneIcon = ({ className }) => (
   </svg>
 );
 
-const UserIcon = ({ size = 16, className }) => (
+const UserIcon: FC<IconProps> = ({ size = 16, className }) => (
   <svg
     width={size}
     height={size}
@@ -190,7 +196,7 @@ const UserIcon = ({ size = 16, className }) => (
   </svg>
 );
 
-const DotIcon = ({ size = 6, className }) => (
+const DotIcon: FC<IconProps> = ({ size = 6, className }) => (
   <svg
     width={size}
     height={size}
@@ -203,7 +209,7 @@ const DotIcon = ({ size = 6, className }) => (
   </svg>
 );
 
-const ChevronRightIcon = () => (
+const ChevronRightIcon: FC<IconProps> = () => (
   <svg
     width="16"
     height="16"
@@ -221,7 +227,7 @@ const ChevronRightIcon = () => (
   </svg>
 );
 
-const BillingIcon = ({ className }) => (
+const BillingIcon: FC<IconProps> = ({ className }) => (
   <svg
     width="16"
     height="16"
@@ -240,7 +246,7 @@ const BillingIcon = ({ className }) => (
   </svg>
 );
 
-const ListIcon = ({ className }) => (
+const ListIcon: FC<IconProps> = ({ className }) => (
   <svg
     width="16"
     height="16"
@@ -259,7 +265,7 @@ const ListIcon = ({ className }) => (
   </svg>
 );
 
-const TeamManageIcon = ({ className }) => (
+const TeamManageIcon: FC<IconProps> = ({ className }) => (
   <svg
     width="16"
     height="16"
@@ -278,7 +284,7 @@ const TeamManageIcon = ({ className }) => (
   </svg>
 );
 
-const FilterIcon = ({ className }) => (
+const FilterIcon: FC<IconProps> = () => (
   <svg
     width="16"
     height="16"
@@ -296,7 +302,7 @@ const FilterIcon = ({ className }) => (
   </svg>
 );
 
-const EditIcon = () => (
+const EditIcon: FC<IconProps> = () => (
   <svg
     width="16"
     height="16"
@@ -314,7 +320,7 @@ const EditIcon = () => (
   </svg>
 );
 
-const LoginIcon = ({ className }) => (
+const LoginIcon: FC<IconProps> = ({ className }) => (
   <svg
     width="16"
     height="16"
@@ -333,7 +339,7 @@ const LoginIcon = ({ className }) => (
   </svg>
 );
 
-const AdminIcon = ({ className }) => (
+const AdminIcon: FC<IconProps> = ({ className }) => (
   <svg
     width="16"
     height="16"
@@ -352,7 +358,7 @@ const AdminIcon = ({ className }) => (
   </svg>
 );
 
-const PendingIcon = ({ className }) => (
+const PendingIcon: FC<IconProps> = ({ className }) => (
   <svg
     width="16"
     height="16"
@@ -384,7 +390,7 @@ const PendingIcon = ({ className }) => (
   </svg>
 );
 
-const CloudburstLogo = () => (
+const CloudburstLogo: FC<IconProps> = () => (
   <svg
     width="30"
     height="22"
@@ -396,281 +402,281 @@ const CloudburstLogo = () => (
       <g id="Globe-2">
         <path
           id="Path-401-Copy"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M10.5438 7.05883L12.2172 6.15072L12.1419 4.46658L10.5438 3.66516L8.88401 4.50729L8.82355 6.08058L10.5438 7.05883Z"
           fill="#008DEA"
         />
         <path
           id="Path-402"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M8.29033 3.92351L10.0474 3.05282L10.0928 1.73395L8.66417 1.28564L7.06082 2.02401L6.74741 3.29727L8.29033 3.92351Z"
           fill="#0071BC"
         />
         <path
           id="Path-403"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M8.08589 0.329102H8.66609L8.48264 1.01754L6.98554 1.69419L5.88196 1.53948L6.20677 0.998475C6.4609 0.877343 6.75992 0.754706 7.1038 0.630565C7.44769 0.506424 7.77505 0.405936 8.08589 0.329102Z"
           fill="#008DEA"
         />
         <path
           id="Path-404-Copy"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M9.09503 12.0676L10.5604 11.267L12.0815 12.1919V13.8439L10.4824 14.6606L9.09503 13.8439V12.0676Z"
           fill="#0071BC"
         />
         <path
           id="Path-404-Copy-2"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M6.92303 7.9951L8.38837 7.19446L9.90946 8.11934V9.77141L8.31042 10.5881L6.92303 9.77141V7.9951Z"
           fill="#00EEFF"
         />
         <path
           id="Path-409"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M4.72815 6.50349L6.03256 7.24639L7.85679 6.11087L7.95041 4.48523L6.43868 3.80981L4.90829 4.8055L4.72815 6.50349Z"
           fill="#00EEFF"
         />
         <path
           id="Path-410"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M4.57573 4.34689L3.67996 3.97724L4.08733 2.83376L5.36874 1.9541L6.45005 2.11083L6.17249 3.36245L4.57573 4.34689Z"
           fill="#0071BC"
         />
         <path
           id="Path-411"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M3.77625 2.56422H4.06944L5.30517 1.69431L5.54095 1.33984C5.28216 1.48025 4.98804 1.66245 4.6586 1.88643C4.32916 2.11041 4.03504 2.33634 3.77625 2.56422Z"
           fill="#008DEA"
         />
         <path
           id="Path-417"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M10.7828 2.96957L12.5271 3.68571L13.9266 3.07503L13.6644 1.90835L12.177 1.35803L10.7532 1.84454L10.7828 2.96957Z"
           fill="#008DEA"
         />
         <path
           id="Path-417-Copy"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M13.2555 5.93686L14.761 6.65146L16.0181 6.08164L15.8212 4.69926L14.4464 3.93652L13.1674 4.52623L13.2555 5.93686Z"
           fill="#00EEFF"
         />
         <path
           id="Path-418"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M9.129 0.927801L10.5035 1.35805L11.9199 0.927801L11.8607 0.241492L10.6708 0L9.27615 0.286028L9.129 0.927801Z"
           fill="#00EEFF"
         />
         <path
           id="Path-419"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M16.7979 4.90853L17.744 4.46326L19.0207 5.48517L19.0552 5.65941C18.4077 5.93199 17.7688 6.2644 17.1386 6.65665C17.0913 6.61952 17.0561 6.59102 17.033 6.57116L16.7979 4.90853Z"
           fill="#008DEA"
         />
         <path
           id="Path-424"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M19.3429 5.47884L19.5693 5.34874L19.8433 5.19128C19.8826 5.25486 19.9127 5.30481 19.9335 5.34114L19.3429 5.47884Z"
           fill="#008DEA"
         />
         <path
           id="Path-425"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M19.5948 4.74838L19.1068 5.02422L17.8937 4.06868L17.4431 2.86904L17.94 2.7998C18.2986 3.15827 18.595 3.46653 18.8291 3.72459C19.0632 3.98265 19.3184 4.32391 19.5948 4.74838Z"
           fill="#0071BC"
         />
         <path
           id="Path-426"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M17.2258 3.83647L16.382 4.21196L14.7227 3.19728L14.4164 2.06789L15.4907 1.86304L16.8504 2.71624L17.2258 3.83647Z"
           fill="#00EEFF"
         />
         <path
           id="Path-427"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M17.5189 2.4374H17.0777L15.7833 1.61082L15.5787 1.1637C15.961 1.36607 16.2865 1.55461 16.5555 1.72932C16.8244 1.90403 17.1455 2.14006 17.5189 2.4374Z"
           fill="#008DEA"
         />
         <path
           id="Path-428"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M14.8918 0.844369L15.2 1.44546L14.0794 1.59513L12.6029 0.982467L12.4975 0.340576L13.2489 0.300659C13.6156 0.39758 13.8925 0.476808 14.0794 0.538344C14.2664 0.59988 14.5372 0.701888 14.8918 0.844369Z"
           fill="#0071BC"
         />
         <path
           id="Path-429"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M10.767 20.7244L12.3606 20.2781L14.0754 20.8212V21.3029L12.2458 21.448L10.724 21.3029L10.767 20.7244Z"
           fill="#00EEFF"
         />
         <path
           id="Path-429-Copy"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M14.6113 20.8211L16.2972 20.334L17.9098 20.8211V21.3028L16.1825 21.4478L14.6113 21.3028V20.8211Z"
           fill="#0071BC"
         />
         <path
           id="Path-429-Copy-3"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M18.4615 20.8211L20.1474 20.334L21.76 20.8211V21.3028L20.0327 21.4478L18.4615 21.3028V20.8211Z"
           fill="#008DEA"
         />
         <path
           id="Path-430"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M10.485 18.3134L12.2248 18.9463V19.8287L10.485 20.3947L8.98901 19.7666L8.89462 18.7701L10.485 18.3134Z"
           fill="#0071BC"
         />
         <path
           id="Path-430-Copy-3"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M14.4217 18.4492L16.1614 18.9464V19.8288L14.4217 20.3948L12.8313 19.7667V18.9059L14.4217 18.4492Z"
           fill="#008DEA"
         />
         <path
           id="Path-430-Copy-4"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M18.2681 18.5908L19.9623 19.1343V19.9644L18.2226 20.4698L16.7679 19.8975V19.0415L18.2681 18.5908Z"
           fill="#00EEFF"
         />
         <path
           id="Path-430-Copy-5"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M21.6981 18.7977L23.0042 19.2811V20.1095L21.9199 20.4861L20.4331 19.9645V19.1344L21.6981 18.7977Z"
           fill="#008DEA"
         />
         <path
           id="Path-432-Copy"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M6.27047 14.5248L7.73755 13.7195V11.9927L6.09151 10.9954L4.75113 11.8327L4.81874 13.551L6.27047 14.5248Z"
           fill="#008DEA"
         />
         <path
           id="Path-433"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M4.0479 11.0418L5.52212 10.0841V7.87842L4.32094 7.15955L2.85424 8.30632L2.78061 10.0841L4.0479 11.0418Z"
           fill="#008DEA"
         />
         <path
           id="Path-434"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M2.68255 7.65217L3.96509 6.59086L4.23484 4.99943L3.20806 4.61096L2.16833 5.52818L1.89075 7.02625L2.68255 7.65217Z"
           fill="#00EEFF"
         />
         <path
           id="Path-435"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M1.67719 4.98166L2.01499 5.16034L3.10879 4.15341L3.55213 3.03918H3.25856C2.87814 3.42131 2.58467 3.74264 2.37816 4.00318C2.17165 4.26372 1.93799 4.58988 1.67719 4.98166Z"
           fill="#00EEFF"
         />
         <path
           id="Path-436"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M5.34305 18.1818L6.508 17.7352L8.21075 18.6236L8.37795 19.7638L7.09511 20.0071L5.69021 19.2351L5.34305 18.1818Z"
           fill="#00EEFF"
         />
         <path
           id="Path-437"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M7.41187 20.3948L8.64276 20.1602L10.0948 20.6831L10.1382 21.2872L9.09694 21.3989L7.65978 20.9839L7.41187 20.3948Z"
           fill="#008DEA"
         />
         <path
           id="Path-438"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M7.06297 20.888L6.86047 20.3121L5.48553 19.5513L4.58661 19.5955C4.9437 19.8458 5.32989 20.0815 5.74517 20.3026C6.16045 20.5237 6.59972 20.7188 7.06297 20.888Z"
           fill="#0071BC"
         />
         <path
           id="Path-439"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M5.05883 19.0962L4.69147 18.035L3.33609 17.0629L2.69135 17.271L3.05333 18.1667L4.21841 19.1685L5.05883 19.0962Z"
           fill="#008DEA"
         />
         <path
           id="Path-440"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M2.28944 16.6829L1.26027 15.7096L0.965332 14.3668L1.48085 13.8907L2.56391 14.9431L2.83577 16.5041L2.28944 16.6829Z"
           fill="#00EEFF"
         />
         <path
           id="Path-441"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M4.90265 17.639L6.05704 17.1731L5.82486 15.4198L4.25611 14.3145L3.08911 14.9927L3.38864 16.5631L4.90265 17.639Z"
           fill="#008DEA"
         />
         <path
           id="Path-442"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M0.206473 15.9349L0.75002 16.8535L1.23371 16.3944L1.13576 14.6535L0.497135 13.9037L0.0267944 14.5856C0.0460177 14.8219 0.0674618 15.037 0.0911268 15.2309C0.114792 15.4249 0.153241 15.6595 0.206473 15.9349Z"
           fill="#00EEFF"
         />
         <path
           id="Path-443"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M0.630249 13.2995L0.696488 11.7168L1.53629 10.7665L2.2862 11.3855L2.21282 13.1791L1.28519 14.036L0.630249 13.2995Z"
           fill="#0071BC"
         />
         <path
           id="Path-444"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M0.391907 10.9304L0.589927 11.2387L1.48796 10.2043L1.80056 8.72187L1.40827 8.48816C1.16951 8.91371 0.969613 9.32342 0.808594 9.71729C0.647574 10.1112 0.508679 10.5155 0.391907 10.9304Z"
           fill="#008DEA"
         />
         <path
           id="Path-445"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M0.245682 11.5427L0.359595 11.7152L0.275288 13.321L0 13.7075C0.0111489 13.3083 0.0331665 12.9524 0.0660527 12.6396C0.0989389 12.3268 0.158815 11.9612 0.245682 11.5427Z"
           fill="#0071BC"
         />
         <path
           id="Path-446"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M2.76991 14.3748L3.86024 13.7095L3.77593 11.6979L2.49375 10.6826L1.56076 11.5908L1.69162 13.3798L2.76991 14.3748Z"
           fill="#00EEFF"
         />
         <path
           id="Path-447"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M2.50447 17.68L2.26608 17.0547L1.61353 16.4456C1.8001 16.7389 1.94859 16.9605 2.059 17.1104C2.1694 17.2604 2.3179 17.4502 2.50447 17.68Z"
           fill="#008DEA"
         />
@@ -678,260 +684,260 @@ const CloudburstLogo = () => (
       <g id="Globe-1">
         <path
           id="Path-399"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M25.2019 17.012L26.4451 16.1956L27.3086 16.6952L27.1273 17.8605L26.0298 18.6562L25.0482 18.2875L25.2019 17.012Z"
           fill="#008DEA"
         />
         <path
           id="Path-400"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M26.2455 18.9222L27.2763 18.1885L27.8046 18.3741L27.4939 19.1311L26.6457 19.8088L25.9629 19.7545L26.2455 18.9222Z"
           fill="#0071BC"
         />
         <path
           id="Path-401"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M21.8477 10.8133L23.2048 10.0795L23.1437 8.71853L21.8477 8.07092L20.5017 8.75144L20.4527 10.0228L21.8477 10.8133Z"
           fill="#008DEA"
         />
         <path
           id="Path-402_2"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M20.1734 8.35995L21.4857 7.70968L21.5195 6.7247L20.4526 6.38989L19.2552 6.94133L19.0211 7.89225L20.1734 8.35995Z"
           fill="#00EEFF"
         />
         <path
           id="Path-403_2"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M20.0207 5.67566H20.454L20.317 6.18981L19.1989 6.69515L18.3747 6.57961L18.6173 6.17557C18.8071 6.08511 19.0304 5.99352 19.2872 5.9008C19.544 5.80809 19.7885 5.73304 20.0207 5.67566Z"
           fill="#0071BC"
         />
         <path
           id="Path-404-Copy-3"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M20.6335 14.6224L21.7658 13.9819L22.9412 14.7218V16.0435L21.7056 16.6969L20.6335 16.0435V14.6224Z"
           fill="#00EEFF"
         />
         <path
           id="Path-406-Copy"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M23.4163 19.2661L24.8082 18.6199L25.7835 18.9573L25.4856 19.7432L24.4227 20.2896L23.4163 20.0444V19.2661Z"
           fill="#00EEFF"
         />
         <path
           id="Path-407"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M24.5817 20.6274L25.5978 20.1095H26.2306L26.1011 20.3721C25.8662 20.5135 25.61 20.6491 25.3324 20.779C25.0548 20.9088 24.7982 21.0118 24.5626 21.0877L24.3377 21.0664L24.5817 20.6274Z"
           fill="#008DEA"
         />
         <path
           id="Path-408-Copy"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M20.0905 13.5747L21.3122 12.8863V11.4091L20.1208 10.724L18.8688 11.4874L18.8789 12.8863L20.0905 13.5747Z"
           fill="#0071BC"
         />
         <path
           id="Path-409_2"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M17.5131 10.2869L18.4872 10.8417L19.8496 9.99366L19.9196 8.77957L18.7905 8.27515L17.6476 9.01876L17.5131 10.2869Z"
           fill="#008DEA"
         />
         <path
           id="Path-410_2"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M17.3992 8.6763L16.7302 8.40024L17.0345 7.54624L17.9915 6.88928L18.799 7.00633L18.5917 7.94108L17.3992 8.6763Z"
           fill="#00EEFF"
         />
         <path
           id="Path-411_2"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M16.8022 7.34483H17.0211L17.944 6.69515L18.1201 6.43042C17.9268 6.53528 17.7072 6.67135 17.4611 6.83863C17.2151 7.00591 16.9954 7.17464 16.8022 7.34483Z"
           fill="#0071BC"
         />
         <path
           id="Path-412"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M23.7603 10.1004L23.6876 8.71722L24.8329 8.1886L26.0946 8.9924L26.2671 10.3128L25.1245 10.9542L23.7603 10.1004Z"
           fill="#00EEFF"
         />
         <path
           id="Path-413"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M25.3419 11.3794L26.4288 10.7393L27.4892 11.5621L27.5674 12.9784L26.5649 13.7472L25.3419 12.928V11.3794Z"
           fill="#008DEA"
         />
         <path
           id="Path-414"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M26.9032 14.2434L27.8664 13.4937L28.629 14.1529L28.5281 15.4684L27.639 16.2504L26.7891 15.6934L26.9032 14.2434Z"
           fill="#0071BC"
         />
         <path
           id="Path-415"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M27.6781 16.6451L28.5712 15.8054L29.0715 16.1955L28.7948 17.2682L28.0367 18.0483L27.4637 17.8284L27.6781 16.6451Z"
           fill="#0071BC"
         />
         <path
           id="Path-416"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M27.8046 18.9986L28.1144 18.2845L28.8197 17.5704H28.8811C28.6885 17.8885 28.509 18.1538 28.3427 18.3663C28.1764 18.5788 27.997 18.7896 27.8046 18.9986Z"
           fill="#008DEA"
         />
         <path
           id="Path-417_2"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M22.0349 7.64764L23.3376 8.18248L24.3828 7.72641L24.187 6.85509L23.0761 6.44409L22.0128 6.80744L22.0349 7.64764Z"
           fill="#0071BC"
         />
         <path
           id="Path-418_2"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M20.7997 6.12272L21.8262 6.44405L22.884 6.12272L22.8398 5.61016L21.9512 5.42981L20.9096 5.64343L20.7997 6.12272Z"
           fill="#008DEA"
         />
         <path
           id="Path-419_2"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M26.5272 9.09573L27.2338 8.76318L28.1873 9.52638L28.4267 10.7392L27.7661 11.173L26.7027 10.3374L26.5272 9.09573Z"
           fill="#0071BC"
         />
         <path
           id="Path-420"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M27.9306 11.6235L27.9841 12.9926L28.7373 13.6771L29.2665 13.08V11.873L28.5986 11.1396L27.9306 11.6235Z"
           fill="#00EEFF"
         />
         <path
           id="Path-421"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M28.9572 14.1319L29.4782 13.4937L29.8139 13.9566L29.7881 15.0527L29.2426 15.8055L28.8345 15.446L28.9572 14.1319Z"
           fill="#008DEA"
         />
         <path
           id="Path-422"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M29.0753 17.2243L29.0237 17.1556L29.2757 16.1556L29.7375 15.5203C29.6364 15.8838 29.5362 16.1891 29.437 16.4361C29.3377 16.6832 29.2172 16.9459 29.0753 17.2243Z"
           fill="#0071BC"
         />
         <path
           id="Path-423"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M30 13.4702L29.9133 13.5332L29.5661 13.0514L29.5402 11.8311L29.7662 11.5392C29.8347 11.7951 29.8907 12.1026 29.9344 12.4617C29.9781 12.8207 30 13.1569 30 13.4702Z"
           fill="#0071BC"
         />
         <path
           id="Path-424_2"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M29.655 11.1395L29.3651 11.4528L28.7654 10.7687L28.5292 9.62296L28.903 9.4082C29.0155 9.58498 29.1517 9.85404 29.3117 10.2154C29.4716 10.5767 29.5861 10.8848 29.655 11.1395Z"
           fill="#008DEA"
         />
         <path
           id="Path-425_2"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M28.616 8.97601L28.2515 9.18202L27.3455 8.46839L27.009 7.57246L27.3801 7.52075C27.648 7.78847 27.8693 8.01869 28.0441 8.21141C28.219 8.40414 28.4096 8.65901 28.616 8.97601Z"
           fill="#0071BC"
         />
         <path
           id="Path-426_2"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M26.8468 8.29512L26.2166 8.57555L24.9773 7.81775L24.7486 6.97428L25.5509 6.82129L26.5664 7.45849L26.8468 8.29512Z"
           fill="#008DEA"
         />
         <path
           id="Path-427_2"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M27.0656 7.2502H26.7361L25.7694 6.63288L25.6166 6.29895C25.9021 6.45009 26.1453 6.5909 26.3461 6.72138C26.5469 6.85186 26.7868 7.02813 27.0656 7.2502Z"
           fill="#0071BC"
         />
         <path
           id="Path-428_2"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M25.1037 6.06048L25.3338 6.50939L24.4969 6.62118L23.3942 6.16362L23.3155 5.68423L23.8767 5.65442C24.1506 5.7268 24.3573 5.78597 24.4969 5.83193C24.6365 5.87789 24.8388 5.95407 25.1037 6.06048Z"
           fill="#00EEFF"
         />
         <path
           id="Path-429_2"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M21.9909 20.8998L23.0909 20.4861L24.1094 20.6918L23.8703 21.1418L23.0261 21.4479L21.9909 21.3396V20.8998Z"
           fill="#0071BC"
         />
         <path
           id="Path-433_2"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M17.0323 13.5747L18.0543 12.905V11.3625L17.2216 10.8597L16.2049 11.6617L16.1538 12.905L17.0323 13.5747Z"
           fill="#00EEFF"
         />
         <path
           id="Path-434_2"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M15.9853 11.1447L16.9432 10.3521L17.1446 9.16354L16.3778 8.87341L15.6013 9.55843L15.394 10.6772L15.9853 11.1447Z"
           fill="#0071BC"
         />
         <path
           id="Path-435_2"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M15.2345 9.1503L15.4868 9.28374L16.3037 8.53173L16.6348 7.69958H16.4155C16.1314 7.98497 15.9122 8.22495 15.758 8.41953C15.6038 8.61411 15.4293 8.8577 15.2345 9.1503Z"
           fill="#0071BC"
         />
         <path
           id="Path-442_2"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M14.1361 15.0473L14.542 15.7333L14.9033 15.3904L14.8301 14.0903L14.3532 13.5303L14.0019 14.0395C14.0162 14.216 14.0323 14.3767 14.0499 14.5215C14.0676 14.6663 14.0963 14.8416 14.1361 15.0473Z"
           fill="#0071BC"
         />
         <path
           id="Path-443_2"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M14.4526 13.0791L14.502 11.8971L15.1292 11.1874L15.6893 11.6497L15.6345 12.9892L14.9417 13.6292L14.4526 13.0791Z"
           fill="#008DEA"
         />
         <path
           id="Path-444_2"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M14.2746 11.3098L14.4225 11.5401L15.0932 10.7675L15.3266 9.66039L15.0337 9.48584C14.8553 9.80366 14.706 10.1096 14.5858 10.4038C14.4655 10.698 14.3618 11 14.2746 11.3098Z"
           fill="#008DEA"
         />
         <path
           id="Path-445_2"
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M14.1654 11.7671L14.2505 11.8959L14.1875 13.0952L13.9819 13.3838C13.9902 13.0857 14.0067 12.8199 14.0312 12.5863C14.0558 12.3527 14.1005 12.0796 14.1654 11.7671Z"
           fill="#0071BC"
         />
@@ -940,7 +946,7 @@ const CloudburstLogo = () => (
   </svg>
 );
 
-const CyberSainikLogo = () => (
+const CyberSainikLogo: FC<IconProps> = () => (
   <svg
     width="28"
     height="31"
@@ -989,127 +995,144 @@ const CyberSainikLogo = () => (
 const AvatarImage =
   'data:image/png;base64,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';
 
-export const Profile = () => (
-  <motion.div
-    initial={{ y: -20, opacity: 0 }}
-    animate={{ y: 0, opacity: 1 }}
-    className="mt-10 mb-10 sm:mx-auto sm:w-full sm:max-w-sm md:max-w-[800px]"
-  >
-    <Card className="w-full p-12">
-      <Stack>
-        <LogoIcon className="h-11 w-auto mb-2 mr-2" />
-        <div>
-          <h2 className="text-xl font-sans font-bold">Reablocks</h2>
-          <p className="opacity-60">github.com/reaviz</p>
-        </div>
-      </Stack>
-      <h1 className="mt-5 text-2xl font-sans font-bold">Profile Settings</h1>
-      <p className="opacity-60">
-        Customize and edit essential profile details.
-      </p>
-      <Divider />
-      <div className="grid grid-cols-2 gap-4">
-        <Stack direction="column" alignItems="start" dense>
-          <h3 className="text-1xl font-sans font-bold">Public Profile</h3>
-          <p className="opacity-60 text-sm">
-            This will be displayed on your profile.
-          </p>
-        </Stack>
+export const Profile = () => {
+  const [branding, setBranding] = useState('reports');
+
+  return (
+    <motion.div
+      initial={{ y: -20, opacity: 0 }}
+      animate={{ y: 0, opacity: 1 }}
+      className="mt-10 mb-10 sm:mx-auto sm:w-full sm:max-w-sm md:max-w-[800px]"
+    >
+      <Card className="w-full p-12">
         <Stack>
-          <Input
-            value="reablocks"
-            fullWidth
-            endAdornment={
+          <LogoIcon className="h-11 w-auto mb-2 mr-2" />
+          <div>
+            <h2 className="text-lg font-sans font-bold">Reablocks</h2>
+            <p className="opacity-60">github.com/reaviz</p>
+          </div>
+        </Stack>
+        <h1 className="mt-5 text-xl font-sans font-bold">Profile Settings</h1>
+        <p className="opacity-60">
+          Customize and edit essential profile details.
+        </p>
+        <Divider />
+        <div className="grid grid-cols-2 gap-4">
+          <Stack direction="column" alignItems="start" dense>
+            <h3 className="text-1xl font-sans font-bold">Public Profile</h3>
+            <p className="opacity-60 text-xs">
+              This will be displayed on your profile.
+            </p>
+          </Stack>
+          <Stack>
+            <Input
+              value="reablocks"
+              fullWidth
+              endAdornment={
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="14"
+                  height="14"
+                  fill="none"
+                >
+                  <path
+                    fill="#55BE24"
+                    d="M7 .333A6.67 6.67 0 0 0 .333 7 6.67 6.67 0 0 0 7 13.667 6.67 6.67 0 0 0 13.667 7 6.67 6.67 0 0 0 7 .333Zm0 12A5.34 5.34 0 0 1 1.667 7 5.34 5.34 0 0 1 7 1.667 5.34 5.34 0 0 1 12.333 7 5.34 5.34 0 0 1 7 12.333Zm3.06-8.28L5.667 8.447 3.94 6.727l-.94.94 2.667 2.666L11 5l-.94-.947Z"
+                  />
+                </svg>
+              }
+            />
+          </Stack>
+        </div>
+        <Divider />
+        <div className="grid grid-cols-2 gap-4">
+          <Stack direction="column" alignItems="start" dense>
+            <h3 className="text-1xl font-sans font-bold">Company Logo</h3>
+            <p className="opacity-60 text-sm">
+              Min 400 x 400 px, PNG or JPEG formats.
+            </p>
+          </Stack>
+          <Stack justifyContent="end">
+            <div className="p-2 flex h-full items-center rounded-sm ">
+              <Avatar className="h-10 w-10" name="Austin M" size={50} />
+            </div>
+            <div className="border w-full border-dotted rounded-sm text-sm opacity-75 text-center p-2 border-blue-500">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
-                width="14"
-                height="14"
+                width="24"
+                height="24"
                 fill="none"
+                className="mx-auto"
               >
                 <path
-                  fill="#55BE24"
-                  d="M7 .333A6.67 6.67 0 0 0 .333 7 6.67 6.67 0 0 0 7 13.667 6.67 6.67 0 0 0 13.667 7 6.67 6.67 0 0 0 7 .333Zm0 12A5.34 5.34 0 0 1 1.667 7 5.34 5.34 0 0 1 7 1.667 5.34 5.34 0 0 1 12.333 7 5.34 5.34 0 0 1 7 12.333Zm3.06-8.28L5.667 8.447 3.94 6.727l-.94.94 2.667 2.666L11 5l-.94-.947Z"
+                  fill="#C9C9D6"
+                  d="M14.063 4.125a5.77 5.77 0 0 0-4.9 2.694 3.87 3.87 0 0 0-.726-.069c-1.946 0-3.59 1.449-3.886 3.326a4.32 4.32 0 0 0-2.676 3.986c0 2.327 1.844 4.258 4.11 4.304.758.015 11.655.015 12.405 0 2.06-.042 3.735-1.804 3.735-3.928 0-1.58-.926-2.968-2.323-3.59a5.819 5.819 0 0 0-5.74-6.722Zm0 1.5a4.317 4.317 0 0 1 4.312 4.313c0 .397-.058.798-.171 1.194a.747.747 0 0 0 .547.937 2.426 2.426 0 0 1 1.874 2.368c0 1.314-1.016 2.403-2.265 2.429-.688.014-11.649.014-12.345 0-1.456-.03-2.64-1.287-2.64-2.803 0-1.265.852-2.38 2.074-2.711a.75.75 0 0 0 .554-.71A2.448 2.448 0 0 1 8.437 8.25c.28 0 .56.05.834.15a.75.75 0 0 0 .93-.371 4.288 4.288 0 0 1 3.861-2.404ZM12.4 9.375a.444.444 0 0 0-.325.166l-1.494 1.831a.369.369 0 0 0-.033.413.427.427 0 0 0 .376.215h.701v3a.75.75 0 0 0 1.5 0v-3h.705c.165 0 .315-.09.384-.23.07-.142.034-.3-.063-.425L12.74 9.513c-.076-.099-.21-.143-.34-.137Z"
                 />
               </svg>
-            }
-          />
-        </Stack>
-      </div>
-      <Divider />
-      <div className="grid grid-cols-2 gap-4">
-        <Stack direction="column" alignItems="start" dense>
-          <h3 className="text-1xl font-sans font-bold">Company Logo</h3>
-          <p className="opacity-60 text-sm">
-            Min 400 x 400 px, PNG or JPEG formats.
-          </p>
-        </Stack>
-        <Stack justifyContent="end">
-          <div className="p-2 flex h-full items-center rounded-sm ">
-            <Avatar className="h-10 w-10" name="Austin M" size={50} />
-          </div>
-          <div className="border w-full border-dotted rounded-sm text-sm opacity-75 text-center p-2 border-blue-500">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              fill="none"
-              className="mx-auto"
-            >
-              <path
-                fill="#C9C9D6"
-                d="M14.063 4.125a5.77 5.77 0 0 0-4.9 2.694 3.87 3.87 0 0 0-.726-.069c-1.946 0-3.59 1.449-3.886 3.326a4.32 4.32 0 0 0-2.676 3.986c0 2.327 1.844 4.258 4.11 4.304.758.015 11.655.015 12.405 0 2.06-.042 3.735-1.804 3.735-3.928 0-1.58-.926-2.968-2.323-3.59a5.819 5.819 0 0 0-5.74-6.722Zm0 1.5a4.317 4.317 0 0 1 4.312 4.313c0 .397-.058.798-.171 1.194a.747.747 0 0 0 .547.937 2.426 2.426 0 0 1 1.874 2.368c0 1.314-1.016 2.403-2.265 2.429-.688.014-11.649.014-12.345 0-1.456-.03-2.64-1.287-2.64-2.803 0-1.265.852-2.38 2.074-2.711a.75.75 0 0 0 .554-.71A2.448 2.448 0 0 1 8.437 8.25c.28 0 .56.05.834.15a.75.75 0 0 0 .93-.371 4.288 4.288 0 0 1 3.861-2.404ZM12.4 9.375a.444.444 0 0 0-.325.166l-1.494 1.831a.369.369 0 0 0-.033.413.427.427 0 0 0 .376.215h.701v3a.75.75 0 0 0 1.5 0v-3h.705c.165 0 .315-.09.384-.23.07-.142.034-.3-.063-.425L12.74 9.513c-.076-.099-.21-.143-.34-.137Z"
-              />
-            </svg>
-            Drag and drop or{' '}
-            <Button variant="text" size="small" color="primary" disablePadding>
-              Click to upload
-            </Button>
-          </div>
-        </Stack>
-      </div>
-      <Divider />
-      <div className="grid grid-cols-2 gap-4">
-        <Stack direction="column" alignItems="start" dense>
-          <h3 className="text-1xl font-sans font-bold">Branding</h3>
-          <p className="opacity-60 text-sm">
-            Add your logo to reports and emails.
-          </p>
-        </Stack>
-        <Stack direction="column" alignItems="start">
-          <Radio
-            size="small"
-            label={
-              <span className="text-sm">
-                <strong>Reports:</strong> Include my logo in summary reports.
-              </span>
-            }
-          />
-          <Radio
-            size="small"
-            label={
-              <span className="text-sm">
-                <strong>Emails:</strong> Include my logo in customer emails.
-              </span>
-            }
-          />
-        </Stack>
-      </div>
-      <Divider />
-      <div className="grid grid-cols-2 gap-4">
-        <h3 className="text-1xl font-sans font-bold">Social Profiles</h3>
-        <Stack justifyContent="end" direction="column">
-          <Input fullWidth value="reaviz" startAdornment="twitter.com/" />
-          <Input
-            fullWidth
-            value="goodcodeus"
-            startAdornment="linkedin.com/in/"
-          />
-          <Input fullWidth value="goodcodeus" startAdornment="dribbble.com/" />
-        </Stack>
-      </div>
-    </Card>
-  </motion.div>
-);
+              Drag and drop or{' '}
+              <Button
+                variant="text"
+                size="small"
+                color="primary"
+                disablePadding
+              >
+                Click to upload
+              </Button>
+            </div>
+          </Stack>
+        </div>
+        <Divider />
+        <div className="grid grid-cols-2 gap-4">
+          <Stack direction="column" alignItems="start" dense>
+            <h3 className="text-1xl font-sans font-bold">Branding</h3>
+            <p className="opacity-60 text-sm">
+              Add your logo to reports and emails.
+            </p>
+          </Stack>
+          <Stack direction="column" alignItems="start">
+            <Radio
+              checked={branding === 'reports'}
+              size="small"
+              label={
+                <span className="text-sm">
+                  <strong>Reports:</strong> Include my logo in summary reports.
+                </span>
+              }
+              onChange={() => setBranding('reports')}
+            />
+            <Radio
+              checked={branding === 'email'}
+              size="small"
+              label={
+                <span className="text-sm">
+                  <strong>Emails:</strong> Include my logo in customer emails.
+                </span>
+              }
+              onChange={() => setBranding('email')}
+            />
+          </Stack>
+        </div>
+        <Divider />
+        <div className="grid grid-cols-2 gap-4">
+          <h3 className="text-1xl font-sans font-bold">Social Profiles</h3>
+          <Stack justifyContent="end" direction="column">
+            <Input fullWidth value="reaviz" startAdornment="twitter.com/" />
+            <Input
+              fullWidth
+              value="goodcodeus"
+              startAdornment="linkedin.com/in/"
+            />
+            <Input
+              fullWidth
+              value="goodcodeus"
+              startAdornment="dribbble.com/"
+            />
+          </Stack>
+        </div>
+      </Card>
+    </motion.div>
+  );
+};
 
 export const Account = () => (
   <motion.div
@@ -1118,13 +1141,14 @@ export const Account = () => (
     className="flex flex-col justify-center grow sm:mx-auto sm:w-full"
   >
     <Card className="p-12 transition-colors min-w-[960px]">
-      <Tabs variant="secondary" selectedIndex={0}>
+      <Tabs size="large" variant="secondary" selectedIndex={0}>
         <TabList>
           <Tab>Profile</Tab>
           <Tab>Teams</Tab>
           <Tab>Billing</Tab>
         </TabList>
       </Tabs>
+      <Divider disableMargins />
       <TabPanel>
         <MotionGroup>
           <Stack
@@ -1135,30 +1159,28 @@ export const Account = () => (
             <Stack direction="column" alignItems="start" className="w-3/5">
               <Stack direction="column" alignItems="start" dense>
                 <Stack>
-                  <h2 className="text-2xl font-sans font-bold text-gray-100 light:text-gray-900">
+                  <h2 className="text-xl font-sans font-bold ttext-content-text-neutral-base">
                     Austin McDaniel
                   </h2>
-                  <Chip
-                    variant="filled"
-                    className="rounded-[20px] border-orange-500 bg-orange-950 light:bg-orange-100"
-                  >
+                  <Chip size="large" variant="outline" color="warning">
                     Admin
                   </Chip>
                 </Stack>
-                <p className="text-base text-gray-400 light:text-gray-600">
+                <p className="text-sm text-content-text-neutral-2">
                   CEO / Cyber Security Wizard
                 </p>
               </Stack>
 
               <MotionItem>
-                <Block className="min-w-[300px] mt-8 p-5 border rounded-sm border-gray-600 light:border-gray-300">
+                <Card className="min-w-[300px] mt-8 p-5 border rounded-sm">
                   <Stack direction="column" className="w-full gap-5">
                     <Stack justifyContent="spaceBetween" className="w-full">
                       <Chip
-                        variant="filled"
-                        className="bg-blue-950 px-3 py-1 border-blue-500 rounded-[20px] light:bg-blue-100"
+                        variant="outline"
+                        color="primary"
+                        size="large"
+                        start={<LocationIcon className="" />}
                       >
-                        <LocationIcon className="text-blue-500" />{' '}
                         <span className="pl-1">Florida</span>
                       </Chip>
                       <span>Miami</span>
@@ -1166,10 +1188,11 @@ export const Account = () => (
 
                     <Stack justifyContent="spaceBetween" className="w-full">
                       <Chip
-                        variant="filled"
-                        className="bg-blue-950 px-3 py-1 border-blue-500 rounded-[20px] light:bg-blue-100"
+                        variant="outline"
+                        color="primary"
+                        size="large"
+                        start={<EmailIcon className="" />}
                       >
-                        <EmailIcon className="text-blue-500" />{' '}
                         <span className="pl-1">Email</span>
                       </Chip>
                       <span>Austin@goodcode.us</span>
@@ -1177,10 +1200,11 @@ export const Account = () => (
 
                     <Stack justifyContent="spaceBetween" className="w-full">
                       <Chip
-                        variant="filled"
-                        className="bg-blue-950 px-3 py-1 border-blue-500 rounded-[20px] light:bg-blue-100"
+                        variant="outline"
+                        color="primary"
+                        size="large"
+                        start={<PhoneIcon className="" />}
                       >
-                        <PhoneIcon className="text-blue-500" />{' '}
                         <span className="pl-1">Phone</span>
                       </Chip>
                       <span>561-699-7050</span>
@@ -1188,30 +1212,30 @@ export const Account = () => (
 
                     <Stack justifyContent="spaceBetween" className="w-full">
                       <Chip
-                        variant="filled"
-                        className="bg-gray-950 px-3 py-1 border-gray-500 rounded-[20px] light:bg-white light:border-gray-200"
+                        variant="outline"
+                        size="large"
+                        start={<UserIcon className="" />}
                       >
-                        <UserIcon className="text-gray-300" />{' '}
                         <span className="pl-1">Joined</span>
                       </Chip>
                       <span>March 15, 2020</span>
                     </Stack>
                   </Stack>
-                </Block>
+                </Card>
               </MotionItem>
 
-              <Divider variant="secondary" className="mt-8" />
+              <Divider className="mt-8" />
 
               <Block className="mt-2">
-                <Stepper animated>
+                <Stepper animated activeStep={3}>
                   <Step>
                     <div className="flex flex-col gap-1">
-                      <span className="text-sm text-gray-400 light:text-gray-600">
+                      <span className="text-sm text-content-text-neutral-2">
                         03/01/2024, 8:00 AM
                       </span>
                       <span>
                         Austin{' '}
-                        <span className="text-gray-400 light:text-gray-600">
+                        <span className="text-content-text-neutral-2">
                           created ticket
                         </span>
                       </span>
@@ -1219,17 +1243,17 @@ export const Account = () => (
                   </Step>
                   <Step>
                     <div className="flex flex-col gap-1">
-                      <span className="text-sm text-gray-400 light:text-gray-600">
+                      <span className="text-sm text-content-text-neutral-2">
                         03/02/2024, 10:00 AM
                       </span>
                       <span>
                         Austin
-                        <span className="text-gray-400 light:text-gray-600">
+                        <span className="text-content-text-neutral-2">
                           {' '}
                           changed statues from{' '}
                         </span>
                         In Progress
-                        <span className="text-gray-400 light:text-gray-600">
+                        <span className="text-content-text-neutral-2">
                           {' '}
                           to{' '}
                         </span>
@@ -1239,47 +1263,45 @@ export const Account = () => (
                   </Step>
                   <Step>
                     <div className="flex flex-col gap-1">
-                      <span className="text-sm text-gray-400 light:text-gray-600">
+                      <span className="text-sm text-content-text-neutral-2">
                         03/03/2024, 10:10 AM
                       </span>
                       <span>
                         Austin
-                        <span className="text-gray-400 light:text-gray-600">
+                        <span className="text-content-text-neutral-2">
                           {' '}
                           changed statues from{' '}
                         </span>
                         Backlog
-                        <span className="text-gray-400 light:text-gray-600">
+                        <span className="text-content-text-neutral-2">
                           {' '}
                           to{' '}
                         </span>
                         In Progress
                       </span>
-                      <div className="p-[1px] bg-[linear-gradient(283deg,_#0d0dd2_0%,_rgba(23,_23,_255,_0.1)_100%)] text-gray-400 rounded-md">
-                        <div className="px-4 py-2 bg-gray-800 rounded-md light:bg-gray-200 light:text-gray-600">
-                          This looks fine, might've missed it but maybe we can
-                          add a link to the website where we also have the video
-                          of how to use the plug in? Otherwise this is a nice
-                          addition.
-                        </div>
-                      </div>
+                      <Card className="px-4 py-2">
+                        This looks fine, might&apos;ve missed it but maybe we
+                        can add a link to the website where we also have the
+                        video of how to use the plug in? Otherwise this is a
+                        nice addition.
+                      </Card>
                     </div>
                   </Step>
                 </Stepper>
               </Block>
             </Stack>
-            <Block className="w-2/5 min-w-[300px] mt-8 p-5 border rounded-sm border-gray-600 light:border-gray-300">
+            <Card className="w-2/5 min-w-[300px] mt-8 p-5">
               <MotionItem>
                 <img src={AvatarImage} className="h-full w-full" />
-                <h3 className="text-gray-100 my-2.5 font-bold light:text-gray-900">
+                <h3 className="text-content-text-neutral-base my-2.5 font-bold">
                   Teams
                   <span className="text-gray-400"> (2)</span>
                 </h3>
-                <Divider variant="secondary" />
+                <Divider />
                 <Stack justifyContent="spaceBetween">
                   <div className="inline-flex">
                     <SymbolIcon />
-                    <span className="px-2.5 text-base text-gray-100 light:text-gray-900">
+                    <span className="px-2.5 text-sm text-content-text-neutral-base">
                       GoodCode
                     </span>
                   </div>
@@ -1288,35 +1310,35 @@ export const Account = () => (
                 <Stack justifyContent="spaceBetween" className="mt-3">
                   <div className="inline-flex">
                     <SymbolIcon />
-                    <span className="px-2.5 text-base text-gray-100 light:text-gray-900">
+                    <span className="px-2.5 text-sm text-content-text-neutral-base">
                       GoodCode
                     </span>
                   </div>
                   <ChevronRightIcon />
                 </Stack>
 
-                <Divider variant="secondary" />
+                <Divider />
 
                 <Stack className="w-full">
                   <Stack direction="column" className="w-2/4" dense>
-                    <label className="text-[32px] text-gray-100 light:text-gray-900">
+                    <label className="text-[32px] text-content-text-neutral-base">
                       2 days
                     </label>
-                    <span className="font-semibold text-gray-400 light:text-gray-600">
+                    <span className="font-semibold text-content-text-neutral-2">
                       Avg turnaround time
                     </span>
                   </Stack>
                   <Stack direction="column" className="w-2/4" dense>
-                    <label className="text-[32px] text-gray-100 light:text-gray-900">
+                    <label className="text-[32px] text-content-text-neutral-base">
                       176
                     </label>
-                    <span className="font-semibold text-gray-400 light:text-gray-600">
+                    <span className="font-semibold text-content-text-neutral-2">
                       Hours saved
                     </span>
                   </Stack>
                 </Stack>
               </MotionItem>
-            </Block>
+            </Card>
           </Stack>
         </MotionGroup>
       </TabPanel>
@@ -1331,35 +1353,32 @@ export const Overview = () => (
     className="flex flex-col justify-center grow sm:mx-auto w-full"
   >
     <MotionGroup>
-      <Card className="p-8 transition-colors w-full min-w-[960px] max-w-[1200px] light:bg-gray-100">
+      <Card className="p-8 transition-colors w-full min-w-[960px] max-w-[1200px]">
         <Stack
           justifyContent="spaceBetween"
           alignItems="start"
           className="gap-5"
         >
           <Stack direction="column" alignItems="stretch" className="w-full">
-            <Block className="bg-gray-900 light:bg-white rounded-[20px] p-[30px]">
+            <Block className="bg-background-neutral-raised-6 rounded-[20px] p-[30px]">
               <Stack>
                 <Avatar
-                  src="https://goodcode.us/static/austin-d1a2c5249336c31662b8ee6d4e169b2b.jpg"
+                  src="https://avatars.githubusercontent.com/u/227909?s=96&v=4"
                   name="Austin McDaniel"
                   size={72}
                 />
                 <Stack direction="column" alignItems="start">
                   <Stack>
-                    <h2 className="text-2xl font-sans font-bold text-gray-100 light:text-gray-900">
+                    <h2 className="text-xl font-sans font-bold text-content-text-neutral-base">
                       Austin McDaniel
                     </h2>
-                    <Chip
-                      variant="filled"
-                      className="rounded-[20px] border-orange-500 bg-orange-950 light:bg-orange-100"
-                    >
+                    <Chip variant="outline" color="warning" size="large">
                       Admin
                     </Chip>
                   </Stack>
-                  <Stack className="text-gray-400 light:text-gray-600">
+                  <Stack className="text-content-text-neutral-2">
                     <span>CEO</span>
-                    <DotIcon className="text-white light:text-black" />
+                    <DotIcon className="" />
                     <span>Cyber Security Wizard</span>
                   </Stack>
                 </Stack>
@@ -1374,45 +1393,36 @@ export const Overview = () => (
                   Overview
                 </Button>
                 <Button
-                  className="px-3 bg-gray-700/40 light:bg-blue-200/40"
                   variant="filled"
                   color="secondary"
-                  startAdornment={
-                    <ListIcon className="text-white light:text-black" />
-                  }
+                  startAdornment={<ListIcon className="" />}
                 >
                   Notes
                 </Button>
                 <Button
-                  className="px-3 bg-gray-700/40 light:bg-blue-200/40"
                   variant="filled"
                   color="secondary"
-                  startAdornment={
-                    <TeamManageIcon className="text-white light:text-black" />
-                  }
+                  startAdornment={<TeamManageIcon className="" />}
                 >
                   Teams
                 </Button>
                 <Button
-                  className="px-3 bg-gray-700/40 light:bg-blue-200/40"
                   variant="filled"
                   color="secondary"
-                  startAdornment={
-                    <FilterIcon className="text-white light:text-black" />
-                  }
+                  startAdornment={<FilterIcon />}
                 >
                   History
                 </Button>
               </Stack>
             </Block>
             <MotionItem>
-              <Block className="bg-gray-900 light:bg-white rounded-[20px] p-[30px]">
+              <Block className="bg-background-neutral-raised-6 rounded-[20px] p-[30px]">
                 <Stack justifyContent="spaceBetween">
-                  <h3 className="text-lg font-bold">Personal Information</h3>
+                  <h3 className="text-base font-bold">Personal Information</h3>
                   <Button
                     variant="text"
                     color="primary"
-                    className="text-lg"
+                    className="text-base"
                     startAdornment={<EditIcon />}
                   >
                     Edit
@@ -1420,93 +1430,93 @@ export const Overview = () => (
                 </Stack>
                 <Block className="grid grid-cols-2 gap-4 mt-4">
                   <Stack alignItems="center">
-                    <Block className="border border-gray-600 light:border-gray-300 p-3 rounded-xs">
-                      <EmailIcon className="text-gray-300 light:text-gray-700" />
+                    <Block className="border border-stroke-neutral-3 p-3 rounded-xs">
+                      <EmailIcon className="text-content-text-neutral-2" />
                     </Block>
                     <div>
                       <Stack direction="column" alignItems="start" dense>
-                        <div className="pl-2 text-sm text-gray-100 light:text-gray-900">
+                        <div className="pl-2 text-sm text-content-text-neutral-base">
                           austin@goodcode.us
                         </div>
-                        <div className="pl-2 text-sm text-gray-400 light:text-gray-600">
+                        <div className="pl-2 text-sm text-content-text-neutral-2">
                           Email Address
                         </div>
                       </Stack>
                     </div>
                   </Stack>
                   <Stack alignItems="center">
-                    <Block className="border border-gray-600 light:border-gray-300 p-3 rounded-xs">
-                      <PhoneIcon className="text-gray-300 light:text-gray-700" />
+                    <Block className="border border-stroke-neutral-3 p-3 rounded-xs">
+                      <PhoneIcon className="text-content-text-neutral-2" />
                     </Block>
                     <div>
                       <Stack direction="column" alignItems="start" dense>
-                        <div className="pl-2 text-sm text-gray-100 light:text-gray-900">
+                        <div className="pl-2 text-sm text-content-text-neutral-base">
                           561-699-7050
                         </div>
-                        <div className="pl-2 text-sm text-gray-400 light:text-gray-600">
+                        <div className="pl-2 text-sm text-content-text-neutral-2">
                           Mobile
                         </div>
                       </Stack>
                     </div>
                   </Stack>
                   <Stack alignItems="center">
-                    <Block className="border border-gray-600 light:border-gray-300 p-3 rounded-xs">
-                      <LoginIcon className="text-gray-300 light:text-gray-700" />
+                    <Block className="border border-stroke-neutral-3 p-3 rounded-xs">
+                      <LoginIcon className="text-content-text-neutral-2" />
                     </Block>
                     <div>
                       <Stack direction="column" alignItems="start" dense>
-                        <div className="pl-2 text-sm text-gray-100 light:text-gray-900">
+                        <div className="pl-2 text-sm text-content-text-neutral-base">
                           Mar 15, 2024
                         </div>
-                        <div className="pl-2 text-sm text-gray-400 light:text-gray-600">
+                        <div className="pl-2 text-sm text-content-text-neutral-2">
                           Joined
                         </div>
                       </Stack>
                     </div>
                   </Stack>
                   <Stack alignItems="center">
-                    <Block className="border border-gray-600 light:border-gray-300 p-3 rounded-xs">
-                      <AdminIcon className="text-gray-300 light:text-gray-700" />
+                    <Block className="border border-stroke-neutral-3 p-3 rounded-xs">
+                      <AdminIcon className="text-content-text-neutral-2" />
                     </Block>
                     <div>
                       <Stack direction="column" alignItems="start" dense>
-                        <div className="pl-2 text-sm text-gray-100 light:text-gray-900">
+                        <div className="pl-2 text-sm text-content-text-neutral-base">
                           Admin
                         </div>
-                        <div className="pl-2 text-sm text-gray-400 light:text-gray-600">
+                        <div className="pl-2 text-sm text-content-text-neutral-2">
                           Role
                         </div>
                       </Stack>
                     </div>
                   </Stack>
                 </Block>
-                <Divider variant="secondary" className="my-1" />
-                <Block className="grid grid-cols-1 gap-4 mt-4">
+                <Divider />
+                <Block className="grid grid-cols-1 gap-4">
                   <Stack alignItems="center">
-                    <Block className="border border-gray-600 light:border-gray-300 p-3 rounded-xs">
-                      <LocationIcon className="text-gray-300 light:text-gray-700" />
+                    <Block className="border border-stroke-neutral-3 p-3 rounded-xs">
+                      <LocationIcon className="text-content-text-neutral-2" />
                     </Block>
                     <div>
                       <Stack direction="column" alignItems="start" dense>
-                        <div className="pl-2 text-sm text-gray-100 light:text-gray-900">
+                        <div className="pl-2 text-sm text-content-text-neutral-base">
                           United States of America
                         </div>
-                        <div className="pl-2 text-sm text-gray-400 light:text-gray-600">
+                        <div className="pl-2 text-sm text-content-text-neutral-2">
                           Location
                         </div>
                       </Stack>
                     </div>
                   </Stack>
                   <Stack alignItems="center">
-                    <Block className="border border-gray-600 light:border-gray-300 p-3 rounded-xs">
-                      <PendingIcon className="text-gray-300 light:text-gray-700" />
+                    <Block className="border border-stroke-neutral-3 p-3 rounded-xs">
+                      <PendingIcon className="text-content-text-neutral-2" />
                     </Block>
                     <div>
                       <Stack direction="column" alignItems="start" dense>
-                        <div className="pl-2 text-sm text-gray-100 light:text-gray-900">
+                        <div className="pl-2 text-sm text-content-text-neutral-base">
                           Management, Development, Code Reviews
                         </div>
-                        <div className="pl-2 text-sm text-gray-400 light:text-gray-600">
+                        <div className="pl-2 text-sm text-content-text-neutral-2">
                           Responsibilities
                         </div>
                       </Stack>
@@ -1517,55 +1527,55 @@ export const Overview = () => (
             </MotionItem>
 
             <MotionItem>
-              <Block className="bg-gray-900 light:bg-white rounded-[20px] p-[30px]">
-                <h3 className="text-lg font-bold align-middle">
+              <Block className="bg-background-neutral-raised-6 rounded-[20px] p-[30px]">
+                <h3 className="text-base font-bold align-middle">
                   <span>Teams</span>{' '}
-                  <div className="ml-2.5 inline-flex justify-center text-sm items-center w-8 h-8 rounded-full bg-gray-950 text-center border border-gray-700 light:bg-blue-100 light:border-blue-500">
+                  <div className="ml-2.5 inline-flex justify-center text-sm items-center w-8 h-8 rounded-full bg-background-neutral-raised-5 text-center border border-stroke-neutral-3">
                     3
                   </div>
                 </h3>
 
                 <Stack alignItems="center" className="mt-4 gap-4">
                   <Stack alignItems="center">
-                    <Block className="flex items-center justify-center mb-0 border border-gray-600 light:border-gray-300 p-[14px] w-[60px] h-[60px]">
+                    <Block className="flex items-center justify-center mb-0 border border-stroke-neutral-3 p-[14px] w-[60px] h-[60px]">
                       <SymbolIcon />
                     </Block>
                     <div>
                       <Stack direction="column" alignItems="start" dense>
-                        <div className="pl-2 text-sm text-gray-100 light:text-gray-900">
+                        <div className="pl-2 text-sm text-content-text-neutral-base">
                           Goodcode
                         </div>
-                        <div className="pl-2 text-sm text-gray-400 light:text-gray-600">
+                        <div className="pl-2 text-sm text-content-text-neutral-2">
                           Joined Mar 15, 2023
                         </div>
                       </Stack>
                     </div>
                   </Stack>
                   <Stack alignItems="center">
-                    <Block className="flex items-center justify-center mb-0 border border-gray-600 light:border-gray-300 p-[14px] w-[60px] h-[60px]">
+                    <Block className="flex items-center justify-center mb-0 border border-stroke-neutral-3 p-[14px] w-[60px] h-[60px]">
                       <CloudburstLogo />
                     </Block>
                     <div>
                       <Stack direction="column" alignItems="start" dense>
-                        <div className="pl-2 text-sm text-gray-100 light:text-gray-900">
+                        <div className="pl-2 text-sm text-content-text-neutral-base">
                           Cloudburst
                         </div>
-                        <div className="pl-2 text-sm text-gray-400 light:text-gray-600">
+                        <div className="pl-2 text-sm text-content-text-neutral-2">
                           Joined Mar 15, 2023
                         </div>
                       </Stack>
                     </div>
                   </Stack>
                   <Stack alignItems="center">
-                    <Block className="flex items-center justify-center mb-0 border border-gray-600 light:border-gray-300 p-[14px] w-[60px] h-[60px]">
+                    <Block className="flex items-center justify-center mb-0 border border-stroke-neutral-3 p-[14px] w-[60px] h-[60px]">
                       <CyberSainikLogo />
                     </Block>
                     <div>
                       <Stack direction="column" alignItems="start" dense>
-                        <div className="pl-2 text-sm text-gray-100 light:text-gray-900">
+                        <div className="pl-2 text-sm text-content-text-neutral-base">
                           Cyber Sainik
                         </div>
-                        <div className="pl-2 text-sm text-gray-400 light:text-gray-600">
+                        <div className="pl-2 text-sm text-content-text-neutral-2">
                           Joined Mar 15, 2023
                         </div>
                       </Stack>
@@ -1575,22 +1585,22 @@ export const Overview = () => (
               </Block>
             </MotionItem>
           </Stack>
-          <Block className="bg-gray-900 light:bg-white rounded-[20px] p-[30px] min-w-[360px]">
-            <h3 className="text-gray-100 light:text-gray-900 font-bold text-lg">
+          <Block className="bg-background-neutral-raised-6 rounded-[20px] p-[30px] min-w-[360px]">
+            <h3 className="text-content-text-neutral-base font-bold text-base">
               Latest Activity
             </h3>
 
             <Stepper activeStep={1} className="mt-4" animated>
               <Step label="v6.0">
                 <div className="flex flex-col gap-1">
-                  <span className="text-gray-100 light:text-gray-900">
+                  <span className="text-content-text-neutral-base">
                     New custom statuses for projects
                   </span>
-                  <span className="text-sm text-gray-400 light:text-gray-600">
+                  <span className="text-sm text-content-text-neutral-2">
                     <span>Austin McDaniel </span>
                     <DotIcon
                       size={4}
-                      className="inline text-gray-400 light:text-gray-600"
+                      className="inline text-content-text-neutral-2"
                     />
                     <span>1 hour ago</span>
                   </span>
@@ -1598,14 +1608,14 @@ export const Overview = () => (
               </Step>
               <Step label="v5.0">
                 <div className="flex flex-col gap-1">
-                  <span className="text-gray-100 light:text-gray-900">
+                  <span className="text-content-text-neutral-base">
                     Timeline UI overhaul
                   </span>
-                  <span className="text-sm text-gray-400 light:text-gray-600">
+                  <span className="text-sm text-content-text-neutral-2">
                     <span>Austin McDaniel </span>
                     <DotIcon
                       size={4}
-                      className="inline text-gray-400 light:text-gray-600"
+                      className="inline text-content-text-neutral-2"
                     />
                     <span>March 22, 2024</span>
                   </span>
@@ -1613,14 +1623,14 @@ export const Overview = () => (
               </Step>
               <Step label="v4.0">
                 <div className="flex flex-col gap-1">
-                  <span className="text-gray-100 light:text-gray-900">
+                  <span className="text-content-text-neutral-base">
                     Google calendar integration
                   </span>
-                  <span className="text-sm text-gray-400 light:text-gray-600">
+                  <span className="text-sm text-content-text-neutral-2">
                     <span>Austin McDaniel </span>
                     <DotIcon
                       size={4}
-                      className="inline text-gray-400 light:text-gray-600"
+                      className="inline text-content-text-neutral-2"
                     />
                     <span>March 21, 2024</span>
                   </span>
@@ -1628,14 +1638,14 @@ export const Overview = () => (
               </Step>
               <Step>
                 <div className="flex flex-col gap-1">
-                  <span className="text-gray-100 light:text-gray-900">
+                  <span className="text-content-text-neutral-base">
                     Branch-specific workflow automations
                   </span>
-                  <span className="text-sm text-gray-400 light:text-gray-600">
+                  <span className="text-sm text-content-text-neutral-2">
                     <span>Austin McDaniel </span>
                     <DotIcon
                       size={4}
-                      className="inline text-gray-400 light:text-gray-600"
+                      className="inline text-content-text-neutral-2"
                     />
                     <span>February 28, 2024</span>
                   </span>
@@ -1643,14 +1653,14 @@ export const Overview = () => (
               </Step>
               <Step>
                 <div className="flex flex-col gap-1">
-                  <span className="text-gray-100 light:text-gray-900">
+                  <span className="text-content-text-neutral-base">
                     Project time frames
                   </span>
-                  <span className="text-sm text-gray-400 light:text-gray-600">
+                  <span className="text-sm text-content-text-neutral-2">
                     <span>Austin McDaniel </span>
                     <DotIcon
                       size={4}
-                      className="inline text-gray-400 light:text-gray-600"
+                      className="inline text-content-text-neutral-2"
                     />
                     <span>February 15, 2024</span>
                   </span>
@@ -1658,14 +1668,14 @@ export const Overview = () => (
               </Step>
               <Step label="v3.0">
                 <div className="flex flex-col gap-1">
-                  <span className="text-gray-100 light:text-gray-900">
+                  <span className="text-content-text-neutral-base">
                     GitHub Issues Sync
                   </span>
-                  <span className="text-sm text-gray-400 light:text-gray-600">
+                  <span className="text-sm text-content-text-neutral-2">
                     <span>Austin McDaniel </span>
                     <DotIcon
                       size={4}
-                      className="inline text-gray-400 light:text-gray-600"
+                      className="inline text-content-text-neutral-2"
                     />
                     <span>February 10, 2024</span>
                   </span>
@@ -1698,22 +1708,27 @@ export const Settings = () => {
       animate={{ y: 0, opacity: 1 }}
       className="flex flex-col justify-center grow sm:mx-auto w-full"
     >
-      <Card className="p-8 transition-colors w-full min-w-[960px] max-w-[1200px] light:bg-gray-100">
+      <Card className="p-8 transition-colors w-full min-w-[960px] max-w-[1200px] ">
         <Stack alignItems="start">
-          <Block className="border border-gray-600 light:border-gray-300 p-3 rounded-xs">
-            <UserIcon className="text-gray-300 light:text-gray-700" />
+          <Block className="border border-stroke-neutral-3 p-3 rounded-xs">
+            <UserIcon className="" />
           </Block>
           <Stack alignItems="start" direction="column" className="gap-0" dense>
-            <h4 className="text-xl font-bold text-gray-100 light:text-gray-900">
+            <h4 className="text-lg font-bold text-content-text-neutral-base">
               Profile Settings
             </h4>
-            <div className="text-gray-400 light:text-gray-600">
+            <div className="text-content-text-neutral-2">
               Customize and edit essential profile details.
             </div>
           </Stack>
         </Stack>
 
-        <Tabs variant="secondary" selectedIndex={0} className="mt-8">
+        <Tabs
+          size="large"
+          variant="secondary"
+          selectedIndex={0}
+          className="mt-8"
+        >
           <TabList>
             <Tab>Profile Settings</Tab>
             <Tab>Users</Tab>
@@ -1734,7 +1749,7 @@ export const Settings = () => {
                   >
                     <Block>
                       <Stack justifyContent="end">
-                        <Block className="p-5 items-center rounded-full border border-gray-700 bg-gray-900 light:bg-gray-200 light:border-gray-300">
+                        <Block className="p-5 items-center rounded-full border border-stroke-neutral-3 bg-gradient-neutral-200">
                           <UserIcon size={32} className="h-10 w-10" />
                         </Block>
                         <Stack
@@ -1743,14 +1758,15 @@ export const Settings = () => {
                           className="gap-0"
                           dense
                         >
-                          <h6 className="text-lg text-gray-100 font-bold light:text-gray-900">
+                          <h6 className="text-base text-content-text-neutral-base font-bold">
                             Upload Image
                           </h6>
-                          <div className="text-gray-400 light:text-gray-600">
+                          <div className="text-content-text-neutral-2">
                             Min 400 x 400 px, PNG or JPEG formats.
                           </div>
 
                           <Button
+                            size="large"
                             variant="filled"
                             color="secondary"
                             className="mt-4"
@@ -1828,17 +1844,19 @@ export const Settings = () => {
                     </Block>
                     <Stack justifyContent="center">
                       <Button
+                        className="w-1/2"
+                        size="large"
                         variant="filled"
                         color="secondary"
-                        className="w-1/2 min-h-10"
                       >
                         Discard
                       </Button>
                       <Button
+                        className="w-1/2"
+                        size="large"
                         type="submit"
                         variant="filled"
                         color="primary"
-                        className="w-1/2 min-h-10 rounded-xs px-4 py-2 text-lg! bg-(image:--button-gradient) hover:bg-(image:--button-gradient-hover) focus:bg-(image:--button-gradient-focus) dark:bg-transparent! light:bg-primary light:hover:bg-none light:hover:bg-primary-hover light:focus:bg-primary-hover focus:outline-hidden transition-colors"
                         disabled={isSubmitting}
                       >
                         {isSubmitting ? 'Saving...' : 'Save'}
diff --git a/docs/blocks/administration/Team.story.tsx b/docs/blocks/administration/Team.story.tsx
index c1d6782f3..17f0a9b84 100644
--- a/docs/blocks/administration/Team.story.tsx
+++ b/docs/blocks/administration/Team.story.tsx
@@ -1,19 +1,16 @@
-import React, { useState } from 'react';
 import { motion } from 'motion/react';
+import React, { useState } from 'react';
 
-import { Card } from '../../../src/layout/Card';
-import { Tabs, Tab, TabList, TabPanel } from '../../../src/layout/Tabs';
+import { Pager } from '../../../src/data/Pager';
 import { Avatar } from '../../../src/elements/Avatar';
 import { Button } from '../../../src/elements/Button';
 import { IconButton } from '../../../src/elements/IconButton';
-import {
-  Checkbox,
-  CheckboxTheme,
-  checkboxTheme as defaultCheckboxTheme
-} from '../../../src/form/Checkbox';
-import { Stack } from '../../../src/layout/Stack';
-import { Divider } from '../../../src/layout';
+import { Checkbox } from '../../../src/form/Checkbox';
 import { Input } from '../../../src/form/Input';
+import { Divider } from '../../../src/layout';
+import { Card } from '../../../src/layout/Card';
+import { Stack } from '../../../src/layout/Stack';
+import { Tab, TabList, TabPanel, Tabs } from '../../../src/layout/Tabs';
 
 export default {
   title: 'Blocks/Administration/Team'
@@ -73,22 +70,6 @@ const GoodCodeLogo = () => (
 export const TeamGeneral = () => {
   const [checkedUsers, setCheckedUsers] = useState<number[]>([]);
 
-  const checkboxTheme: CheckboxTheme = {
-    ...defaultCheckboxTheme,
-    check: 'stroke-white',
-    boxVariants: {
-      ...defaultCheckboxTheme.boxVariants,
-      checked: {
-        fill: 'hsl(var(--twc-primary))',
-        stroke: 'hsla(var(--twc-primary))'
-      },
-      unchecked: {
-        fill: 'transparent',
-        stroke: 'hsl(var(--twc-surface))'
-      }
-    }
-  };
-
   return (
     <motion.div
       initial={{ y: -20, opacity: 0 }}
@@ -98,168 +79,134 @@ export const TeamGeneral = () => {
       <Card className="transition-colors p-12">
         <div className="flex flex-col gap-4">
           <div className="flex flex-col">
-            <h2 className="font-bold text-2xl">General</h2>
-            <p className="text-text-secondary text-base">
-              Effectively manage your team's workflow with our intuitive
+            <h2 className="font-bold text-xl">General</h2>
+            <p className="text-content-text-neutral-2 text-sm">
+              Effectively manage your team&apos;s workflow with our intuitive
               application. Streamline task delegation, monitor progress, and
               foster seamless collaboration among team members. Stay informed,
               stay connected, and drive productivity with ease.
             </p>
           </div>
-          <Tabs variant="secondary" selectedIndex={1}>
-            <TabList>
-              <Tab>Account Details</Tab>
-              <Tab>Users</Tab>
-              <Tab>Billing</Tab>
-              <Tab>Integrations</Tab>
-              <Tab>Notifications</Tab>
-            </TabList>
-          </Tabs>
-          <TabPanel>
-            <div className="flex w-full justify-between items-center mb-4">
-              <div className="flex flex-col">
-                <span className="font-bold">Users</span>
-                <span className="text-base text-text-secondary">
-                  Manage user accounts, permissions, and access levels within
-                  the app to ensure smooth operation and security.
-                </span>
+          <div>
+            <Tabs size="large" variant="secondary" selectedIndex={1}>
+              <TabList>
+                <Tab>Account Details</Tab>
+                <Tab>Users</Tab>
+                <Tab>Billing</Tab>
+                <Tab>Integrations</Tab>
+                <Tab>Notifications</Tab>
+              </TabList>
+            </Tabs>
+            <Divider disableMargins />
+            <TabPanel>
+              <div className="flex w-full justify-between items-center mb-4">
+                <div className="flex flex-col">
+                  <span className="font-bold">Users</span>
+                  <span className="text-sm text-content-text-neutral-2">
+                    Manage user accounts, permissions, and access levels within
+                    the app to ensure smooth operation and security.
+                  </span>
+                </div>
+                <Button
+                  variant="filled"
+                  color="primary"
+                  startAdornment={
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      fill="currentColor"
+                    >
+                      <path d="M12.6667 2H3.33333C2.59333 2 2 2.6 2 3.33333V12.6667C2 13.4 2.59333 14 3.33333 14H12.6667C13.4 14 14 13.4 14 12.6667V3.33333C14 2.6 13.4 2 12.6667 2ZM12.6667 12.6667H3.33333V3.33333H12.6667V12.6667ZM7.33333 11.3333H8.66667V8.66667H11.3333V7.33333H8.66667V4.66667H7.33333V7.33333H4.66667V8.66667H7.33333V11.3333Z" />
+                    </svg>
+                  }
+                >
+                  Add user
+                </Button>
               </div>
-              <Button
-                startAdornment={
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="16"
-                    height="16"
-                    viewBox="0 0 16 16"
-                    fill="currentColor"
-                  >
-                    <path d="M12.6667 2H3.33333C2.59333 2 2 2.6 2 3.33333V12.6667C2 13.4 2.59333 14 3.33333 14H12.6667C13.4 14 14 13.4 14 12.6667V3.33333C14 2.6 13.4 2 12.6667 2ZM12.6667 12.6667H3.33333V3.33333H12.6667V12.6667ZM7.33333 11.3333H8.66667V8.66667H11.3333V7.33333H8.66667V4.66667H7.33333V7.33333H4.66667V8.66667H7.33333V11.3333Z" />
-                  </svg>
-                }
-                className="font-semibold px-4 py-2 h-fit my-auto flex items-center gap-2 self-stretch bg-(image:--button-gradient) hover:bg-(image:--button-gradient-hover) focus:bg-(image:--button-gradient-focus) dark:bg-transparent! light:bg-primary light:hover:bg-none light:hover:bg-primary-hover light:focus:bg-primary-hover focus:outline-hidden transition-colors"
-              >
-                Add user
-              </Button>
-            </div>
-            <div className="flex flex-col w-full max-h-[400px] overflow-auto">
-              <table>
-                <tbody>
-                  {Array(10)
-                    .fill({
-                      name: 'Austin McDaniel',
-                      email: 'austin@goodcode.us',
-                      role: 'Admin'
-                    })
-                    .map((user, index) => (
-                      <>
-                        <tr
-                          className="border-b border-panel-accent hover:bg-panel-accent/40 transition-colors text-base text-text-secondary"
-                          key={index}
-                        >
-                          <td className="py-6 pl-4">
-                            <Checkbox
-                              theme={checkboxTheme}
-                              className="shrink-0"
-                              size="small"
-                              checked={checkedUsers.includes(index)}
-                              onChange={checked => {
-                                if (checked) {
-                                  setCheckedUsers([...checkedUsers, index]);
-                                } else {
-                                  setCheckedUsers(
-                                    checkedUsers.filter(i => i !== index)
-                                  );
-                                }
-                              }}
-                            />
-                          </td>
-                          <td className="py-6 pl-4">
-                            <div className="flex gap-2 items-center">
-                              <Avatar src="https://goodcode.us/static/austin-d1a2c5249336c31662b8ee6d4e169b2b.jpg" />
-                              {user.name}
-                            </div>
-                          </td>
-                          <td className="py-6 pl-4">
-                            <div className="flex gap-2 items-center">
-                              <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                width="16"
-                                height="16"
-                                viewBox="0 0 16 16"
-                                className="text-text-primary"
-                                fill="currentColor"
-                              >
-                                <path d="M8.00001 1.33334C4.32403 1.33334 1.33334 4.32403 1.33334 8.00001C1.33334 11.676 4.32403 14.6667 8.00001 14.6667C11.676 14.6667 14.6667 11.676 14.6667 8.00001C14.6667 4.32403 11.676 1.33334 8.00001 1.33334ZM8.00001 2.33334C11.1355 2.33334 13.6667 4.86447 13.6667 8.00001C13.6667 11.1355 11.1355 13.6667 8.00001 13.6667C4.86447 13.6667 2.33334 11.1355 2.33334 8.00001C2.33334 4.86447 4.86447 2.33334 8.00001 2.33334ZM8.00001 3.33334C5.42849 3.33334 3.33334 5.42849 3.33334 8.00001C3.33334 10.5715 5.42849 12.6667 8.00001 12.6667C8.57571 12.6667 9.12943 12.5622 9.63998 12.3705C9.70219 12.3479 9.7593 12.3133 9.80802 12.2685C9.85674 12.2237 9.89608 12.1698 9.92379 12.1097C9.95149 12.0496 9.96699 11.9846 9.9694 11.9185C9.97181 11.8524 9.96107 11.7864 9.93781 11.7245C9.91455 11.6626 9.87924 11.6059 9.8339 11.5577C9.78857 11.5095 9.73413 11.4708 9.67373 11.4438C9.61333 11.4168 9.54817 11.402 9.48203 11.4004C9.41589 11.3988 9.35008 11.4103 9.28842 11.4343C8.88831 11.5845 8.45497 11.6667 8.00001 11.6667C5.96886 11.6667 4.33334 10.0312 4.33334 8.00001C4.33334 5.96886 5.96886 4.33334 8.00001 4.33334C10.0312 4.33334 11.6667 5.96886 11.6667 8.00001V8.50001C11.6667 8.96608 11.2994 9.33334 10.8333 9.33334C10.3673 9.33334 10 8.96608 10 8.50001V6.16668C10.001 6.04387 9.95673 5.92501 9.87569 5.83274C9.79465 5.74046 9.68249 5.68124 9.56059 5.66635C9.43869 5.65147 9.31557 5.68196 9.21471 5.75202C9.11384 5.82208 9.04229 5.92681 9.01368 6.04623C8.67622 5.8081 8.27257 5.66668 7.83334 5.66668C6.61607 5.66668 5.66668 6.7425 5.66668 8.00001C5.66668 9.25752 6.61607 10.3333 7.83334 10.3333C8.45026 10.3333 8.99744 10.0561 9.38803 9.6198C9.72452 10.052 10.2478 10.3333 10.8333 10.3333C11.8399 10.3333 12.6667 9.5066 12.6667 8.50001V8.00001C12.6667 5.42849 10.5715 3.33334 8.00001 3.33334ZM7.83334 6.66668C8.45407 6.66668 9.00001 7.23552 9.00001 8.00001C9.00001 8.7645 8.45407 9.33334 7.83334 9.33334C7.21261 9.33334 6.66668 8.7645 6.66668 8.00001C6.66668 7.23552 7.21261 6.66668 7.83334 6.66668Z" />
-                              </svg>
-                              {user.email}
-                            </div>
-                          </td>
-                          <td className="py-6 pl-4">
-                            <div className="flex gap-2 items-center">
-                              <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                width="16"
-                                height="16"
-                                viewBox="0 0 16 16"
-                                className="text-text-primary"
-                                fill="currentColor"
-                              >
-                                <path d="M8.0163 0.666656C7.88737 0.662633 7.76188 0.708585 7.66604 0.794911C7.66604 0.794911 5.16341 2.99999 2.16669 2.99999C2.03408 3 1.90691 3.05268 1.81315 3.14645C1.71938 3.24022 1.6667 3.36738 1.66669 3.49999V7.58658C1.66669 9.81259 2.69649 13.4755 7.80601 15.6276C7.86742 15.6534 7.93339 15.6668 8.00002 15.6668C8.06665 15.6668 8.13262 15.6534 8.19403 15.6276C13.3035 13.4755 14.3334 9.81259 14.3334 7.58658V3.49999C14.3333 3.36738 14.2807 3.24022 14.1869 3.14645C14.0931 3.05268 13.966 3 13.8334 2.99999C10.8366 2.99999 8.334 0.794911 8.334 0.794911C8.24651 0.716081 8.134 0.670661 8.0163 0.666656ZM8.00002 1.80923C8.68768 2.36211 10.7038 3.77905 13.3334 3.95832V7.58658C13.3334 9.50066 12.5978 12.5886 8.00002 14.6087C3.40221 12.5886 2.66669 9.50066 2.66669 7.58658V3.95832C5.29627 3.77905 7.31237 2.36211 8.00002 1.80923ZM8.00002 3.99999C7.37502 3.99999 6.84296 4.25237 6.50132 4.63671C6.15969 5.02105 6.00002 5.51388 6.00002 5.99999C6.00002 6.4861 6.15969 6.97893 6.50132 7.36327C6.84296 7.74761 7.37502 7.99999 8.00002 7.99999C8.62502 7.99999 9.15708 7.74761 9.49872 7.36327C9.84035 6.97893 10 6.4861 10 5.99999C10 5.51388 9.84035 5.02105 9.49872 4.63671C9.15708 4.25237 8.62502 3.99999 8.00002 3.99999ZM8.00002 4.99999C8.37502 4.99999 8.59296 5.12261 8.75132 5.30077C8.90969 5.47893 9.00002 5.7361 9.00002 5.99999C9.00002 6.26388 8.90969 6.52105 8.75132 6.69921C8.59296 6.87737 8.37502 6.99999 8.00002 6.99999C7.62502 6.99999 7.40708 6.87737 7.24872 6.69921C7.09035 6.52105 7.00002 6.26388 7.00002 5.99999C7.00002 5.7361 7.09035 5.47893 7.24872 5.30077C7.40708 5.12261 7.62502 4.99999 8.00002 4.99999ZM6.16669 8.66666C5.52729 8.66666 5.00002 9.19393 5.00002 9.83332V10.1667C5.00002 10.3192 5.01798 10.4649 5.0508 10.6009C5.07261 10.691 5.11905 10.7733 5.18492 10.8385C5.90726 11.5533 6.9046 12 8.00002 12C9.09544 12 10.0928 11.5533 10.8151 10.8385C10.881 10.7733 10.9274 10.691 10.9492 10.6009C10.9821 10.4649 11 10.3192 11 10.1667V9.83332C11 9.19393 10.4727 8.66666 9.83335 8.66666H6.16669ZM6.16669 9.66666H9.83335C9.92729 9.66666 10 9.73938 10 9.83332V10.1667C10 10.1812 9.99612 10.1917 9.99546 10.2057C9.46207 10.6873 8.7741 11 8.00002 11C7.22594 11 6.53797 10.6873 6.00458 10.2057C6.00393 10.1917 6.00002 10.1812 6.00002 10.1667V9.83332C6.00002 9.73938 6.07275 9.66666 6.16669 9.66666Z" />
-                              </svg>
-                              {user.role}
-                            </div>
-                          </td>
-                        </tr>
-                      </>
-                    ))}
-                </tbody>
-              </table>
-            </div>
-            <div className="flex justify-between w-full mt-2 items-center">
-              <span className="text-text-secondary text-sm">
-                Showing 10 of 25
-              </span>
-              <Stack>
-                <IconButton variant="outline" className="w-10 h-10">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="16"
-                    height="16"
-                    viewBox="0 0 16 16"
-                    fill="currentColor"
-                  >
-                    <path d="M13.3334 7.33335H5.22002L8.94669 3.60669L8.00002 2.66669L2.66669 8.00002L8.00002 13.3334L8.94002 12.3934L5.22002 8.66669H13.3334V7.33335Z" />
-                  </svg>
-                </IconButton>
-                <Stack dense>
-                  <IconButton
-                    color="primary"
-                    variant="outline"
-                    className="w-10 h-10"
-                  >
-                    1
-                  </IconButton>
-                  <IconButton color="secondary" className="w-10 h-10">
-                    2
-                  </IconButton>
-                  <IconButton color="secondary" className="w-10 h-10">
-                    3
-                  </IconButton>
-                </Stack>
-                <IconButton variant="outline" className="w-10 h-10">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="16"
-                    height="16"
-                    viewBox="0 0 16 16"
-                    fill="currentColor"
-                  >
-                    <path d="M8.00002 2.66669L7.06002 3.60669L10.78 7.33335H2.66669V8.66669H10.78L7.06002 12.3934L8.00002 13.3334L13.3334 8.00002L8.00002 2.66669Z" />
-                  </svg>
-                </IconButton>
-              </Stack>
-            </div>
-          </TabPanel>
+              <div className="flex flex-col w-full max-h-[400px] overflow-auto">
+                <table>
+                  <tbody>
+                    {Array(10)
+                      .fill({
+                        name: 'Austin McDaniel',
+                        email: 'austin@goodcode.us',
+                        role: 'Admin'
+                      })
+                      .map((user, index) => (
+                        <>
+                          <tr
+                            className="border-b border-stroke-neutral-3 dark:hover:bg-[#11111e] light:hover:bg-[#e5e6ef] transition-colors text-sm text-content-text-neutral-2"
+                            key={index}
+                          >
+                            <td className="py-6 pl-4">
+                              <Checkbox
+                                className="shrink-0"
+                                size="small"
+                                checked={checkedUsers.includes(index)}
+                                onChange={checked => {
+                                  if (checked) {
+                                    setCheckedUsers([...checkedUsers, index]);
+                                  } else {
+                                    setCheckedUsers(
+                                      checkedUsers.filter(i => i !== index)
+                                    );
+                                  }
+                                }}
+                              />
+                            </td>
+                            <td className="py-6 pl-4">
+                              <div className="flex gap-2 items-center">
+                                <Avatar src="https://avatars.githubusercontent.com/u/227909?s=96&v=4" />
+                                {user.name}
+                              </div>
+                            </td>
+                            <td className="py-6 pl-4">
+                              <div className="flex gap-2 items-center">
+                                <svg
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  width="16"
+                                  height="16"
+                                  viewBox="0 0 16 16"
+                                  className="text-content-text-neutral-base"
+                                  fill="currentColor"
+                                >
+                                  <path d="M8.00001 1.33334C4.32403 1.33334 1.33334 4.32403 1.33334 8.00001C1.33334 11.676 4.32403 14.6667 8.00001 14.6667C11.676 14.6667 14.6667 11.676 14.6667 8.00001C14.6667 4.32403 11.676 1.33334 8.00001 1.33334ZM8.00001 2.33334C11.1355 2.33334 13.6667 4.86447 13.6667 8.00001C13.6667 11.1355 11.1355 13.6667 8.00001 13.6667C4.86447 13.6667 2.33334 11.1355 2.33334 8.00001C2.33334 4.86447 4.86447 2.33334 8.00001 2.33334ZM8.00001 3.33334C5.42849 3.33334 3.33334 5.42849 3.33334 8.00001C3.33334 10.5715 5.42849 12.6667 8.00001 12.6667C8.57571 12.6667 9.12943 12.5622 9.63998 12.3705C9.70219 12.3479 9.7593 12.3133 9.80802 12.2685C9.85674 12.2237 9.89608 12.1698 9.92379 12.1097C9.95149 12.0496 9.96699 11.9846 9.9694 11.9185C9.97181 11.8524 9.96107 11.7864 9.93781 11.7245C9.91455 11.6626 9.87924 11.6059 9.8339 11.5577C9.78857 11.5095 9.73413 11.4708 9.67373 11.4438C9.61333 11.4168 9.54817 11.402 9.48203 11.4004C9.41589 11.3988 9.35008 11.4103 9.28842 11.4343C8.88831 11.5845 8.45497 11.6667 8.00001 11.6667C5.96886 11.6667 4.33334 10.0312 4.33334 8.00001C4.33334 5.96886 5.96886 4.33334 8.00001 4.33334C10.0312 4.33334 11.6667 5.96886 11.6667 8.00001V8.50001C11.6667 8.96608 11.2994 9.33334 10.8333 9.33334C10.3673 9.33334 10 8.96608 10 8.50001V6.16668C10.001 6.04387 9.95673 5.92501 9.87569 5.83274C9.79465 5.74046 9.68249 5.68124 9.56059 5.66635C9.43869 5.65147 9.31557 5.68196 9.21471 5.75202C9.11384 5.82208 9.04229 5.92681 9.01368 6.04623C8.67622 5.8081 8.27257 5.66668 7.83334 5.66668C6.61607 5.66668 5.66668 6.7425 5.66668 8.00001C5.66668 9.25752 6.61607 10.3333 7.83334 10.3333C8.45026 10.3333 8.99744 10.0561 9.38803 9.6198C9.72452 10.052 10.2478 10.3333 10.8333 10.3333C11.8399 10.3333 12.6667 9.5066 12.6667 8.50001V8.00001C12.6667 5.42849 10.5715 3.33334 8.00001 3.33334ZM7.83334 6.66668C8.45407 6.66668 9.00001 7.23552 9.00001 8.00001C9.00001 8.7645 8.45407 9.33334 7.83334 9.33334C7.21261 9.33334 6.66668 8.7645 6.66668 8.00001C6.66668 7.23552 7.21261 6.66668 7.83334 6.66668Z" />
+                                </svg>
+                                {user.email}
+                              </div>
+                            </td>
+                            <td className="py-6 pl-4">
+                              <div className="flex gap-2 items-center">
+                                <svg
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  width="16"
+                                  height="16"
+                                  viewBox="0 0 16 16"
+                                  className="text-content-text-neutral-base"
+                                  fill="currentColor"
+                                >
+                                  <path d="M8.0163 0.666656C7.88737 0.662633 7.76188 0.708585 7.66604 0.794911C7.66604 0.794911 5.16341 2.99999 2.16669 2.99999C2.03408 3 1.90691 3.05268 1.81315 3.14645C1.71938 3.24022 1.6667 3.36738 1.66669 3.49999V7.58658C1.66669 9.81259 2.69649 13.4755 7.80601 15.6276C7.86742 15.6534 7.93339 15.6668 8.00002 15.6668C8.06665 15.6668 8.13262 15.6534 8.19403 15.6276C13.3035 13.4755 14.3334 9.81259 14.3334 7.58658V3.49999C14.3333 3.36738 14.2807 3.24022 14.1869 3.14645C14.0931 3.05268 13.966 3 13.8334 2.99999C10.8366 2.99999 8.334 0.794911 8.334 0.794911C8.24651 0.716081 8.134 0.670661 8.0163 0.666656ZM8.00002 1.80923C8.68768 2.36211 10.7038 3.77905 13.3334 3.95832V7.58658C13.3334 9.50066 12.5978 12.5886 8.00002 14.6087C3.40221 12.5886 2.66669 9.50066 2.66669 7.58658V3.95832C5.29627 3.77905 7.31237 2.36211 8.00002 1.80923ZM8.00002 3.99999C7.37502 3.99999 6.84296 4.25237 6.50132 4.63671C6.15969 5.02105 6.00002 5.51388 6.00002 5.99999C6.00002 6.4861 6.15969 6.97893 6.50132 7.36327C6.84296 7.74761 7.37502 7.99999 8.00002 7.99999C8.62502 7.99999 9.15708 7.74761 9.49872 7.36327C9.84035 6.97893 10 6.4861 10 5.99999C10 5.51388 9.84035 5.02105 9.49872 4.63671C9.15708 4.25237 8.62502 3.99999 8.00002 3.99999ZM8.00002 4.99999C8.37502 4.99999 8.59296 5.12261 8.75132 5.30077C8.90969 5.47893 9.00002 5.7361 9.00002 5.99999C9.00002 6.26388 8.90969 6.52105 8.75132 6.69921C8.59296 6.87737 8.37502 6.99999 8.00002 6.99999C7.62502 6.99999 7.40708 6.87737 7.24872 6.69921C7.09035 6.52105 7.00002 6.26388 7.00002 5.99999C7.00002 5.7361 7.09035 5.47893 7.24872 5.30077C7.40708 5.12261 7.62502 4.99999 8.00002 4.99999ZM6.16669 8.66666C5.52729 8.66666 5.00002 9.19393 5.00002 9.83332V10.1667C5.00002 10.3192 5.01798 10.4649 5.0508 10.6009C5.07261 10.691 5.11905 10.7733 5.18492 10.8385C5.90726 11.5533 6.9046 12 8.00002 12C9.09544 12 10.0928 11.5533 10.8151 10.8385C10.881 10.7733 10.9274 10.691 10.9492 10.6009C10.9821 10.4649 11 10.3192 11 10.1667V9.83332C11 9.19393 10.4727 8.66666 9.83335 8.66666H6.16669ZM6.16669 9.66666H9.83335C9.92729 9.66666 10 9.73938 10 9.83332V10.1667C10 10.1812 9.99612 10.1917 9.99546 10.2057C9.46207 10.6873 8.7741 11 8.00002 11C7.22594 11 6.53797 10.6873 6.00458 10.2057C6.00393 10.1917 6.00002 10.1812 6.00002 10.1667V9.83332C6.00002 9.73938 6.07275 9.66666 6.16669 9.66666Z" />
+                                </svg>
+                                {user.role}
+                              </div>
+                            </td>
+                          </tr>
+                        </>
+                      ))}
+                  </tbody>
+                </table>
+              </div>
+              <Pager
+                className="[&_div:first-child]:flex-1 pt-4"
+                page={2}
+                size={5}
+                total={15}
+                displayMode="all"
+              />
+            </TabPanel>
+          </div>
         </div>
       </Card>
     </motion.div>
@@ -275,7 +222,7 @@ export const TeamMinimal = () => {
     >
       <Card className="transition-colors p-12">
         <div className="flex gap-2 items-center justify-between">
-          <Tabs variant="secondary" selectedIndex={1}>
+          <Tabs size="large" variant="secondary" selectedIndex={1}>
             <TabList>
               <Tab>Account</Tab>
               <Tab>Users</Tab>
@@ -304,8 +251,8 @@ export const TeamMinimal = () => {
           <div className="flex w-full justify-between items-center">
             <div className="flex flex-col">
               <span className="font-bold">On teams</span>
-              <span className="text-base text-text-secondary">
-                You're currently on these teams.
+              <span className="text-sm text-content-text-neutral-2">
+                You&apos;re currently on these teams.
               </span>
             </div>
             <Button
@@ -320,12 +267,11 @@ export const TeamMinimal = () => {
                   <path d="M12.6667 2H3.33333C2.59333 2 2 2.6 2 3.33333V12.6667C2 13.4 2.59333 14 3.33333 14H12.6667C13.4 14 14 13.4 14 12.6667V3.33333C14 2.6 13.4 2 12.6667 2ZM12.6667 12.6667H3.33333V3.33333H12.6667V12.6667ZM7.33333 11.3333H8.66667V8.66667H11.3333V7.33333H8.66667V4.66667H7.33333V7.33333H4.66667V8.66667H7.33333V11.3333Z" />
                 </svg>
               }
-              className="font-semibold px-4 py-2 h-fit my-auto flex items-center gap-2 self-stretch bg-(image:--button-gradient) hover:bg-(image:--button-gradient-hover) focus:bg-(image:--button-gradient-focus) dark:bg-transparent! light:bg-primary light:hover:bg-none light:hover:bg-primary-hover light:focus:bg-primary-hover focus:outline-hidden transition-colors"
             >
               Add team member
             </Button>
           </div>
-          <div className="flex flex-col w-full rounded-xl border border-panel-accent p-6">
+          <Card className="flex flex-col w-full p-6">
             <div className="flex gap-2 justify-between items-center">
               <div className="flex gap-2 items-center">
                 <GoodCodeLogo />
@@ -333,7 +279,7 @@ export const TeamMinimal = () => {
               </div>
               <Button color="secondary">Leave</Button>
             </div>
-            <Divider className="my-4" variant="secondary" />
+            <Divider className="my-4" />
             <div className="flex gap-2 justify-between items-center">
               <div className="flex gap-2 items-center">
                 <GoodCodeLogo />
@@ -341,16 +287,16 @@ export const TeamMinimal = () => {
               </div>
               <Button color="secondary">Leave</Button>
             </div>
-          </div>
+          </Card>
           <div className="flex flex-col mt-4">
             <span className="font-bold">Your team</span>
-            <span className="text-base text-text-secondary">
+            <span className="text-sm text-content-text-neutral-2">
               Manage your existing team and change roles/permissions.
             </span>
           </div>
           <div className="rounded-xl overflow-auto max-h-[300px]">
             <table className="w-full">
-              <thead className="sticky top-0 left-0 text-left text-text-secondary text-base dark:bg-vulcan light:bg-gray-200">
+              <thead className="sticky z-1 top-0 left-0 text-left text-content-text-neutral-2 text-sm dark:bg-[#11111e] light:bg-[#e5e6ef]">
                 <tr>
                   <th className="py-6 pl-4">Name</th>
                   <th className="py-6 pl-4">Email</th>
@@ -367,12 +313,12 @@ export const TeamMinimal = () => {
                   .map((user, index) => (
                     <>
                       <tr
-                        className="border-b border-panel-accent hover:bg-panel-accent/40 transition-colors text-base text-text-secondary"
+                        className="border-b border-stroke-neutral-3 dark:hover:bg-[#11111e] light:hover:bg-[#e5e6ef] transition-colors text-sm text-content-text-neutral-2"
                         key={index}
                       >
                         <td className="py-6 pl-4">
                           <div className="flex gap-2 items-center">
-                            <Avatar src="https://goodcode.us/static/austin-d1a2c5249336c31662b8ee6d4e169b2b.jpg" />
+                            <Avatar src="https://avatars.githubusercontent.com/u/227909?s=96&v=4" />
                             {user.name}
                           </div>
                         </td>
@@ -383,7 +329,7 @@ export const TeamMinimal = () => {
                               width="16"
                               height="16"
                               viewBox="0 0 16 16"
-                              className="text-text-primary"
+                              className="text-content-text-neutral-base"
                               fill="currentColor"
                             >
                               <path d="M8.00001 1.33334C4.32403 1.33334 1.33334 4.32403 1.33334 8.00001C1.33334 11.676 4.32403 14.6667 8.00001 14.6667C11.676 14.6667 14.6667 11.676 14.6667 8.00001C14.6667 4.32403 11.676 1.33334 8.00001 1.33334ZM8.00001 2.33334C11.1355 2.33334 13.6667 4.86447 13.6667 8.00001C13.6667 11.1355 11.1355 13.6667 8.00001 13.6667C4.86447 13.6667 2.33334 11.1355 2.33334 8.00001C2.33334 4.86447 4.86447 2.33334 8.00001 2.33334ZM8.00001 3.33334C5.42849 3.33334 3.33334 5.42849 3.33334 8.00001C3.33334 10.5715 5.42849 12.6667 8.00001 12.6667C8.57571 12.6667 9.12943 12.5622 9.63998 12.3705C9.70219 12.3479 9.7593 12.3133 9.80802 12.2685C9.85674 12.2237 9.89608 12.1698 9.92379 12.1097C9.95149 12.0496 9.96699 11.9846 9.9694 11.9185C9.97181 11.8524 9.96107 11.7864 9.93781 11.7245C9.91455 11.6626 9.87924 11.6059 9.8339 11.5577C9.78857 11.5095 9.73413 11.4708 9.67373 11.4438C9.61333 11.4168 9.54817 11.402 9.48203 11.4004C9.41589 11.3988 9.35008 11.4103 9.28842 11.4343C8.88831 11.5845 8.45497 11.6667 8.00001 11.6667C5.96886 11.6667 4.33334 10.0312 4.33334 8.00001C4.33334 5.96886 5.96886 4.33334 8.00001 4.33334C10.0312 4.33334 11.6667 5.96886 11.6667 8.00001V8.50001C11.6667 8.96608 11.2994 9.33334 10.8333 9.33334C10.3673 9.33334 10 8.96608 10 8.50001V6.16668C10.001 6.04387 9.95673 5.92501 9.87569 5.83274C9.79465 5.74046 9.68249 5.68124 9.56059 5.66635C9.43869 5.65147 9.31557 5.68196 9.21471 5.75202C9.11384 5.82208 9.04229 5.92681 9.01368 6.04623C8.67622 5.8081 8.27257 5.66668 7.83334 5.66668C6.61607 5.66668 5.66668 6.7425 5.66668 8.00001C5.66668 9.25752 6.61607 10.3333 7.83334 10.3333C8.45026 10.3333 8.99744 10.0561 9.38803 9.6198C9.72452 10.052 10.2478 10.3333 10.8333 10.3333C11.8399 10.3333 12.6667 9.5066 12.6667 8.50001V8.00001C12.6667 5.42849 10.5715 3.33334 8.00001 3.33334ZM7.83334 6.66668C8.45407 6.66668 9.00001 7.23552 9.00001 8.00001C9.00001 8.7645 8.45407 9.33334 7.83334 9.33334C7.21261 9.33334 6.66668 8.7645 6.66668 8.00001C6.66668 7.23552 7.21261 6.66668 7.83334 6.66668Z" />
@@ -393,7 +339,7 @@ export const TeamMinimal = () => {
                         </td>
                         <td className="py-6 px-4 flex justify-end">
                           <Stack dense>
-                            <Button color="error">Delete</Button>
+                            <Button color="destructive">Delete</Button>
                             <Button color="secondary">Edit</Button>
                           </Stack>
                         </td>
@@ -403,50 +349,13 @@ export const TeamMinimal = () => {
               </tbody>
             </table>
           </div>
-          <div className="flex justify-between w-full mt-2 items-center">
-            <span className="text-text-secondary text-sm">
-              Showing 10 of 25
-            </span>
-            <Stack>
-              <IconButton variant="outline" className="w-10 h-10">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="16"
-                  height="16"
-                  viewBox="0 0 16 16"
-                  fill="currentColor"
-                >
-                  <path d="M13.3334 7.33335H5.22002L8.94669 3.60669L8.00002 2.66669L2.66669 8.00002L8.00002 13.3334L8.94002 12.3934L5.22002 8.66669H13.3334V7.33335Z" />
-                </svg>
-              </IconButton>
-              <Stack dense>
-                <IconButton
-                  color="primary"
-                  variant="outline"
-                  className="w-10 h-10"
-                >
-                  1
-                </IconButton>
-                <IconButton color="secondary" className="w-10 h-10">
-                  2
-                </IconButton>
-                <IconButton color="secondary" className="w-10 h-10">
-                  3
-                </IconButton>
-              </Stack>
-              <IconButton variant="outline" className="w-10 h-10">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="16"
-                  height="16"
-                  viewBox="0 0 16 16"
-                  fill="currentColor"
-                >
-                  <path d="M8.00002 2.66669L7.06002 3.60669L10.78 7.33335H2.66669V8.66669H10.78L7.06002 12.3934L8.00002 13.3334L13.3334 8.00002L8.00002 2.66669Z" />
-                </svg>
-              </IconButton>
-            </Stack>
-          </div>
+          <Pager
+            className="[&_div:first-child]:flex-1 pt-4"
+            page={2}
+            size={5}
+            total={15}
+            displayMode="all"
+          />
         </TabPanel>
       </Card>
     </motion.div>
@@ -457,22 +366,6 @@ export const TeamRoles = () => {
   const [checkedUsers, setCheckedUsers] = useState<number[]>([]);
   const [checkedAdmins, setCheckedAdmins] = useState<number[]>([]);
 
-  const checkboxTheme: CheckboxTheme = {
-    ...defaultCheckboxTheme,
-    check: 'stroke-white',
-    boxVariants: {
-      ...defaultCheckboxTheme.boxVariants,
-      checked: {
-        fill: 'hsl(var(--twc-primary))',
-        stroke: 'hsla(var(--twc-primary))'
-      },
-      unchecked: {
-        fill: 'transparent',
-        stroke: 'hsl(var(--twc-surface))'
-      }
-    }
-  };
-
   return (
     <motion.div
       initial={{ y: -20, opacity: 0 }}
@@ -483,8 +376,8 @@ export const TeamRoles = () => {
         <div className="flex flex-col gap-4">
           <div className="flex justify-between items-center">
             <div className="flex flex-col">
-              <h2 className="font-bold text-2xl">Team Members</h2>
-              <span className="text-text-secondary text-base">
+              <h2 className="font-bold text-xl">Team Members</h2>
+              <span className="text-content-text-neutral-2 text-sm">
                 Manage user accounts, permissions, and access levels within the
                 app to ensure smooth operation and security.
               </span>
@@ -506,22 +399,21 @@ export const TeamRoles = () => {
               <span className="whitespace-nowrap">Add Team Member</span>
             </Button>
           </div>
-          <Divider variant="secondary" />
+          <Divider />
           <div className="w-full flex gap-12  ">
             <div className="flex flex-col w-1/4">
               <span className="font-bold">Admins (3)</span>
-              <p className="text-text-secondary text-base">
+              <p className="text-content-text-neutral-2 text-sm">
                 Manage user accounts, permissions, and access levels within the
                 app to ensure smooth operation and security.
               </p>
             </div>
             <div className="flex-1 rounded-xl overflow-auto">
               <table className="w-full">
-                <thead className="text-left text-text-secondary text-base dark:bg-vulcan light:bg-gray-200">
+                <thead className="text-left z-1 text-content-text-neutral-2 text-sm dark:bg-[#11111e] light:bg-[#e5e6ef]">
                   <tr>
                     <th className="py-6 pl-4">
                       <Checkbox
-                        theme={checkboxTheme}
                         className="shrink-0"
                         size="small"
                         checked={checkedAdmins.length === 3}
@@ -552,12 +444,11 @@ export const TeamRoles = () => {
                     .map((user, index) => (
                       <>
                         <tr
-                          className="border-b border-panel-accent hover:bg-panel-accent/40 transition-colors text-base text-text-secondary"
+                          className="border-b border-stroke-neutral-3 dark:hover:bg-[#11111e] light:hover:bg-[#e5e6ef] transition-colors text-sm text-content-text-neutral-2"
                           key={index}
                         >
                           <td className="py-6 pl-4">
                             <Checkbox
-                              theme={checkboxTheme}
                               className="shrink-0"
                               size="small"
                               checked={checkedAdmins.includes(index)}
@@ -574,7 +465,7 @@ export const TeamRoles = () => {
                           </td>
                           <td className="py-6 pl-4">
                             <div className="flex gap-2 items-center">
-                              <Avatar src="https://goodcode.us/static/austin-d1a2c5249336c31662b8ee6d4e169b2b.jpg" />
+                              <Avatar src="https://avatars.githubusercontent.com/u/227909?s=96&v=4" />
                               {user.name}
                             </div>
                           </td>
@@ -585,7 +476,7 @@ export const TeamRoles = () => {
                                 width="16"
                                 height="16"
                                 viewBox="0 0 16 16"
-                                className="text-text-primary"
+                                className="text-content-text-neutral-base"
                                 fill="currentColor"
                               >
                                 <path d="M8.00001 1.33334C4.32403 1.33334 1.33334 4.32403 1.33334 8.00001C1.33334 11.676 4.32403 14.6667 8.00001 14.6667C11.676 14.6667 14.6667 11.676 14.6667 8.00001C14.6667 4.32403 11.676 1.33334 8.00001 1.33334ZM8.00001 2.33334C11.1355 2.33334 13.6667 4.86447 13.6667 8.00001C13.6667 11.1355 11.1355 13.6667 8.00001 13.6667C4.86447 13.6667 2.33334 11.1355 2.33334 8.00001C2.33334 4.86447 4.86447 2.33334 8.00001 2.33334ZM8.00001 3.33334C5.42849 3.33334 3.33334 5.42849 3.33334 8.00001C3.33334 10.5715 5.42849 12.6667 8.00001 12.6667C8.57571 12.6667 9.12943 12.5622 9.63998 12.3705C9.70219 12.3479 9.7593 12.3133 9.80802 12.2685C9.85674 12.2237 9.89608 12.1698 9.92379 12.1097C9.95149 12.0496 9.96699 11.9846 9.9694 11.9185C9.97181 11.8524 9.96107 11.7864 9.93781 11.7245C9.91455 11.6626 9.87924 11.6059 9.8339 11.5577C9.78857 11.5095 9.73413 11.4708 9.67373 11.4438C9.61333 11.4168 9.54817 11.402 9.48203 11.4004C9.41589 11.3988 9.35008 11.4103 9.28842 11.4343C8.88831 11.5845 8.45497 11.6667 8.00001 11.6667C5.96886 11.6667 4.33334 10.0312 4.33334 8.00001C4.33334 5.96886 5.96886 4.33334 8.00001 4.33334C10.0312 4.33334 11.6667 5.96886 11.6667 8.00001V8.50001C11.6667 8.96608 11.2994 9.33334 10.8333 9.33334C10.3673 9.33334 10 8.96608 10 8.50001V6.16668C10.001 6.04387 9.95673 5.92501 9.87569 5.83274C9.79465 5.74046 9.68249 5.68124 9.56059 5.66635C9.43869 5.65147 9.31557 5.68196 9.21471 5.75202C9.11384 5.82208 9.04229 5.92681 9.01368 6.04623C8.67622 5.8081 8.27257 5.66668 7.83334 5.66668C6.61607 5.66668 5.66668 6.7425 5.66668 8.00001C5.66668 9.25752 6.61607 10.3333 7.83334 10.3333C8.45026 10.3333 8.99744 10.0561 9.38803 9.6198C9.72452 10.052 10.2478 10.3333 10.8333 10.3333C11.8399 10.3333 12.6667 9.5066 12.6667 8.50001V8.00001C12.6667 5.42849 10.5715 3.33334 8.00001 3.33334ZM7.83334 6.66668C8.45407 6.66668 9.00001 7.23552 9.00001 8.00001C9.00001 8.7645 8.45407 9.33334 7.83334 9.33334C7.21261 9.33334 6.66668 8.7645 6.66668 8.00001C6.66668 7.23552 7.21261 6.66668 7.83334 6.66668Z" />
@@ -600,7 +491,7 @@ export const TeamRoles = () => {
                                 width="17"
                                 height="16"
                                 viewBox="0 0 17 16"
-                                className="text-text-primary"
+                                className="text-content-text-neutral-base"
                                 fill="currentColor"
                               >
                                 <path d="M13.3333 2.66671H12.6666V1.33337H11.3333V2.66671H5.99996V1.33337H4.66663V2.66671H3.99996C3.25996 2.66671 2.67329 3.26671 2.67329 4.00004L2.66663 13.3334C2.66663 14.0667 3.25996 14.6667 3.99996 14.6667H13.3333C14.0666 14.6667 14.6666 14.0667 14.6666 13.3334V4.00004C14.6666 3.26671 14.0666 2.66671 13.3333 2.66671ZM13.3333 13.3334H3.99996V6.66671H13.3333V13.3334ZM13.3333 5.33337H3.99996V4.00004H13.3333V5.33337ZM6.66663 9.33337H5.33329V8.00004H6.66663V9.33337ZM9.33329 9.33337H7.99996V8.00004H9.33329V9.33337ZM12 9.33337H10.6666V8.00004H12V9.33337ZM6.66663 12H5.33329V10.6667H6.66663V12ZM9.33329 12H7.99996V10.6667H9.33329V12ZM12 12H10.6666V10.6667H12V12Z" />
@@ -610,7 +501,7 @@ export const TeamRoles = () => {
                           </td>
                           <td className="py-6 pl-4">
                             <Stack dense>
-                              <IconButton variant="text">
+                              <IconButton variant="text" color="secondary">
                                 <svg
                                   xmlns="http://www.w3.org/2000/svg"
                                   width="16"
@@ -621,7 +512,7 @@ export const TeamRoles = () => {
                                   <path d="M6.83337 1.33329C6.75284 1.33226 6.67325 1.3507 6.60138 1.38703C6.5295 1.42336 6.46747 1.47652 6.42055 1.54198C6.37363 1.60744 6.34321 1.68326 6.33189 1.763C6.32056 1.84273 6.32867 1.92403 6.35551 1.99996H4.88025C4.26783 1.99996 3.69435 2.30644 3.35486 2.81637L2.5658 3.99996H2.50004C2.43379 3.99902 2.368 4.01126 2.30652 4.03597C2.24504 4.06068 2.18908 4.09736 2.14189 4.14388C2.09471 4.1904 2.05724 4.24584 2.03166 4.30697C2.00609 4.3681 1.99292 4.4337 1.99292 4.49996C1.99292 4.56622 2.00609 4.63182 2.03166 4.69295C2.05724 4.75408 2.09471 4.80952 2.14189 4.85604C2.18908 4.90256 2.24504 4.93924 2.30652 4.96395C2.368 4.98866 2.43379 5.0009 2.50004 4.99996H2.7546C2.79749 5.00644 2.84104 5.00732 2.88416 5.00256L3.70837 12.6953C3.80783 13.6227 4.59865 14.3333 5.53129 14.3333H10.4681C11.4008 14.3333 12.1916 13.6227 12.2911 12.6953L13.1159 5.00256C13.1582 5.00709 13.2008 5.00622 13.2429 4.99996H13.5C13.5663 5.0009 13.6321 4.98866 13.6936 4.96395C13.755 4.93924 13.811 4.90256 13.8582 4.85604C13.9054 4.80952 13.9428 4.75408 13.9684 4.69295C13.994 4.63182 14.0072 4.56622 14.0072 4.49996C14.0072 4.4337 13.994 4.3681 13.9684 4.30697C13.9428 4.24584 13.9054 4.1904 13.8582 4.14388C13.811 4.09736 13.755 4.06068 13.6936 4.03597C13.6321 4.01126 13.5663 3.99902 13.5 3.99996H13.4343L12.6452 2.81637C12.3055 2.30672 11.732 1.99996 11.1198 1.99996H9.64457C9.67141 1.92403 9.67952 1.84273 9.66819 1.763C9.65687 1.68326 9.62646 1.60744 9.57954 1.54198C9.53262 1.47652 9.47058 1.42336 9.3987 1.38703C9.32683 1.3507 9.24724 1.33226 9.16671 1.33329H6.83337ZM4.88025 2.99996H11.1198C11.399 2.99996 11.6583 3.1387 11.8132 3.37105L12.2325 3.99996H3.76762L4.18689 3.37105L4.18754 3.3704C4.34204 3.13834 4.60067 2.99996 4.88025 2.99996ZM3.89002 4.99996H12.1101L11.2969 12.5885C11.251 13.0164 10.8982 13.3333 10.4681 13.3333H5.53129C5.10126 13.3333 4.74905 13.0164 4.70317 12.5885L3.89002 4.99996Z" />
                                 </svg>
                               </IconButton>
-                              <IconButton variant="text">
+                              <IconButton variant="text" color="secondary">
                                 <svg
                                   xmlns="http://www.w3.org/2000/svg"
                                   width="16"
@@ -641,22 +532,21 @@ export const TeamRoles = () => {
               </table>
             </div>
           </div>
-          <Divider variant="secondary" />
+          <Divider />
           <div className="w-full flex gap-12">
             <div className="flex flex-col w-1/4">
               <span className="font-bold">Users (12)</span>
-              <p className="text-text-secondary text-base">
+              <p className="text-content-text-neutral-2 text-sm">
                 Manage user accounts, permissions, and access levels within the
                 app to ensure smooth operation and security.
               </p>
             </div>
             <div className="flex-1 rounded-xl overflow-auto h-[500px]">
               <table className="w-full">
-                <thead className="sticky top-0 left-0 text-left text-text-secondary text-base dark:bg-vulcan light:bg-gray-200">
+                <thead className="sticky z-1 top-0 left-0 text-left text-content-text-neutral-2 text-sm dark:bg-[#11111e] light:bg-[#e5e6ef]">
                   <tr>
                     <th className="py-6 pl-4">
                       <Checkbox
-                        theme={checkboxTheme}
                         className="shrink-0"
                         size="small"
                         checked={checkedUsers.length === 12}
@@ -687,12 +577,11 @@ export const TeamRoles = () => {
                     .map((user, index) => (
                       <>
                         <tr
-                          className="border-b border-panel-accent hover:bg-panel-accent/40 transition-colors text-base text-text-secondary"
+                          className="border-b border-stroke-neutral-3 dark:hover:bg-[#11111e] light:hover:bg-[#e5e6ef] transition-colors text-sm text-content-text-neutral-2"
                           key={index}
                         >
                           <td className="py-6 pl-4">
                             <Checkbox
-                              theme={checkboxTheme}
                               className="shrink-0"
                               size="small"
                               checked={checkedUsers.includes(index)}
@@ -709,7 +598,7 @@ export const TeamRoles = () => {
                           </td>
                           <td className="py-6 pl-4">
                             <div className="flex gap-2 items-center">
-                              <Avatar src="https://goodcode.us/static/austin-d1a2c5249336c31662b8ee6d4e169b2b.jpg" />
+                              <Avatar src="https://avatars.githubusercontent.com/u/227909?s=96&v=4" />
                               {user.name}
                             </div>
                           </td>
@@ -720,7 +609,7 @@ export const TeamRoles = () => {
                                 width="16"
                                 height="16"
                                 viewBox="0 0 16 16"
-                                className="text-text-primary"
+                                className="text-content-text-neutral-base"
                                 fill="currentColor"
                               >
                                 <path d="M8.00001 1.33334C4.32403 1.33334 1.33334 4.32403 1.33334 8.00001C1.33334 11.676 4.32403 14.6667 8.00001 14.6667C11.676 14.6667 14.6667 11.676 14.6667 8.00001C14.6667 4.32403 11.676 1.33334 8.00001 1.33334ZM8.00001 2.33334C11.1355 2.33334 13.6667 4.86447 13.6667 8.00001C13.6667 11.1355 11.1355 13.6667 8.00001 13.6667C4.86447 13.6667 2.33334 11.1355 2.33334 8.00001C2.33334 4.86447 4.86447 2.33334 8.00001 2.33334ZM8.00001 3.33334C5.42849 3.33334 3.33334 5.42849 3.33334 8.00001C3.33334 10.5715 5.42849 12.6667 8.00001 12.6667C8.57571 12.6667 9.12943 12.5622 9.63998 12.3705C9.70219 12.3479 9.7593 12.3133 9.80802 12.2685C9.85674 12.2237 9.89608 12.1698 9.92379 12.1097C9.95149 12.0496 9.96699 11.9846 9.9694 11.9185C9.97181 11.8524 9.96107 11.7864 9.93781 11.7245C9.91455 11.6626 9.87924 11.6059 9.8339 11.5577C9.78857 11.5095 9.73413 11.4708 9.67373 11.4438C9.61333 11.4168 9.54817 11.402 9.48203 11.4004C9.41589 11.3988 9.35008 11.4103 9.28842 11.4343C8.88831 11.5845 8.45497 11.6667 8.00001 11.6667C5.96886 11.6667 4.33334 10.0312 4.33334 8.00001C4.33334 5.96886 5.96886 4.33334 8.00001 4.33334C10.0312 4.33334 11.6667 5.96886 11.6667 8.00001V8.50001C11.6667 8.96608 11.2994 9.33334 10.8333 9.33334C10.3673 9.33334 10 8.96608 10 8.50001V6.16668C10.001 6.04387 9.95673 5.92501 9.87569 5.83274C9.79465 5.74046 9.68249 5.68124 9.56059 5.66635C9.43869 5.65147 9.31557 5.68196 9.21471 5.75202C9.11384 5.82208 9.04229 5.92681 9.01368 6.04623C8.67622 5.8081 8.27257 5.66668 7.83334 5.66668C6.61607 5.66668 5.66668 6.7425 5.66668 8.00001C5.66668 9.25752 6.61607 10.3333 7.83334 10.3333C8.45026 10.3333 8.99744 10.0561 9.38803 9.6198C9.72452 10.052 10.2478 10.3333 10.8333 10.3333C11.8399 10.3333 12.6667 9.5066 12.6667 8.50001V8.00001C12.6667 5.42849 10.5715 3.33334 8.00001 3.33334ZM7.83334 6.66668C8.45407 6.66668 9.00001 7.23552 9.00001 8.00001C9.00001 8.7645 8.45407 9.33334 7.83334 9.33334C7.21261 9.33334 6.66668 8.7645 6.66668 8.00001C6.66668 7.23552 7.21261 6.66668 7.83334 6.66668Z" />
@@ -735,7 +624,7 @@ export const TeamRoles = () => {
                                 width="17"
                                 height="16"
                                 viewBox="0 0 17 16"
-                                className="text-text-primary"
+                                className="text-content-text-neutral-base"
                                 fill="currentColor"
                               >
                                 <path d="M13.3333 2.66671H12.6666V1.33337H11.3333V2.66671H5.99996V1.33337H4.66663V2.66671H3.99996C3.25996 2.66671 2.67329 3.26671 2.67329 4.00004L2.66663 13.3334C2.66663 14.0667 3.25996 14.6667 3.99996 14.6667H13.3333C14.0666 14.6667 14.6666 14.0667 14.6666 13.3334V4.00004C14.6666 3.26671 14.0666 2.66671 13.3333 2.66671ZM13.3333 13.3334H3.99996V6.66671H13.3333V13.3334ZM13.3333 5.33337H3.99996V4.00004H13.3333V5.33337ZM6.66663 9.33337H5.33329V8.00004H6.66663V9.33337ZM9.33329 9.33337H7.99996V8.00004H9.33329V9.33337ZM12 9.33337H10.6666V8.00004H12V9.33337ZM6.66663 12H5.33329V10.6667H6.66663V12ZM9.33329 12H7.99996V10.6667H9.33329V12ZM12 12H10.6666V10.6667H12V12Z" />
@@ -745,7 +634,7 @@ export const TeamRoles = () => {
                           </td>
                           <td className="py-6 pl-4">
                             <Stack dense>
-                              <IconButton variant="text">
+                              <IconButton variant="text" color="secondary">
                                 <svg
                                   xmlns="http://www.w3.org/2000/svg"
                                   width="16"
@@ -756,7 +645,7 @@ export const TeamRoles = () => {
                                   <path d="M6.83337 1.33329C6.75284 1.33226 6.67325 1.3507 6.60138 1.38703C6.5295 1.42336 6.46747 1.47652 6.42055 1.54198C6.37363 1.60744 6.34321 1.68326 6.33189 1.763C6.32056 1.84273 6.32867 1.92403 6.35551 1.99996H4.88025C4.26783 1.99996 3.69435 2.30644 3.35486 2.81637L2.5658 3.99996H2.50004C2.43379 3.99902 2.368 4.01126 2.30652 4.03597C2.24504 4.06068 2.18908 4.09736 2.14189 4.14388C2.09471 4.1904 2.05724 4.24584 2.03166 4.30697C2.00609 4.3681 1.99292 4.4337 1.99292 4.49996C1.99292 4.56622 2.00609 4.63182 2.03166 4.69295C2.05724 4.75408 2.09471 4.80952 2.14189 4.85604C2.18908 4.90256 2.24504 4.93924 2.30652 4.96395C2.368 4.98866 2.43379 5.0009 2.50004 4.99996H2.7546C2.79749 5.00644 2.84104 5.00732 2.88416 5.00256L3.70837 12.6953C3.80783 13.6227 4.59865 14.3333 5.53129 14.3333H10.4681C11.4008 14.3333 12.1916 13.6227 12.2911 12.6953L13.1159 5.00256C13.1582 5.00709 13.2008 5.00622 13.2429 4.99996H13.5C13.5663 5.0009 13.6321 4.98866 13.6936 4.96395C13.755 4.93924 13.811 4.90256 13.8582 4.85604C13.9054 4.80952 13.9428 4.75408 13.9684 4.69295C13.994 4.63182 14.0072 4.56622 14.0072 4.49996C14.0072 4.4337 13.994 4.3681 13.9684 4.30697C13.9428 4.24584 13.9054 4.1904 13.8582 4.14388C13.811 4.09736 13.755 4.06068 13.6936 4.03597C13.6321 4.01126 13.5663 3.99902 13.5 3.99996H13.4343L12.6452 2.81637C12.3055 2.30672 11.732 1.99996 11.1198 1.99996H9.64457C9.67141 1.92403 9.67952 1.84273 9.66819 1.763C9.65687 1.68326 9.62646 1.60744 9.57954 1.54198C9.53262 1.47652 9.47058 1.42336 9.3987 1.38703C9.32683 1.3507 9.24724 1.33226 9.16671 1.33329H6.83337ZM4.88025 2.99996H11.1198C11.399 2.99996 11.6583 3.1387 11.8132 3.37105L12.2325 3.99996H3.76762L4.18689 3.37105L4.18754 3.3704C4.34204 3.13834 4.60067 2.99996 4.88025 2.99996ZM3.89002 4.99996H12.1101L11.2969 12.5885C11.251 13.0164 10.8982 13.3333 10.4681 13.3333H5.53129C5.10126 13.3333 4.74905 13.0164 4.70317 12.5885L3.89002 4.99996Z" />
                                 </svg>
                               </IconButton>
-                              <IconButton variant="text">
+                              <IconButton variant="text" color="secondary">
                                 <svg
                                   xmlns="http://www.w3.org/2000/svg"
                                   width="16"
diff --git a/docs/blocks/authentication/ForgotPassword.story.tsx b/docs/blocks/authentication/ForgotPassword.story.tsx
index 8d3b08f62..492c897ca 100644
--- a/docs/blocks/authentication/ForgotPassword.story.tsx
+++ b/docs/blocks/authentication/ForgotPassword.story.tsx
@@ -1,9 +1,10 @@
 import { motion } from 'motion/react';
 import React from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { Block, Card, Divider, Stack } from '../../../src/layout';
-import { Input } from '../../../src/form';
+
 import { Button } from '../../../src/elements/Button';
+import { Input } from '../../../src/form';
+import { Block, Card, Divider, Stack } from '../../../src/layout';
 
 export default {
   title: 'Blocks/Authentication/Forgot Password'
@@ -58,17 +59,17 @@ export const ForgotPassword = () => {
       <Card className="w-full p-12">
         <div className="flex flex-col items-center justify-center pt-2 mb-14">
           <LogoIcon className="h-11 w-auto mb-2" />
-          <h4 className="text-2xl font-sans font-bold mb-0">
+          <h4 className="text-xl font-sans font-bold mb-0">
             Reset your password
           </h4>
-          <span className="text-base text-text-secondary font-sans">
+          <span className="text-sm text-content-text-neutral-2 font-sans">
             Welcome to Reablocks, powered by Good Code
           </span>
         </div>
         <form onSubmit={handleSubmit(values => console.log('values', values))}>
           <Block
             className="mb-7"
-            labelClassName="text-sm font-medium mb-1"
+            labelClassName="text-xs font-medium mb-1"
             label="Email"
           >
             <Controller
@@ -129,27 +130,30 @@ export const ForgotPassword = () => {
               )}
             />
           </Block>
-          <Divider variant="secondary" />
+          <Divider />
           <Button
+            size="large"
             type="submit"
             fullWidth
             variant="filled"
             color="primary"
-            className="mt-7 rounded-xs px-4 py-2 flex items-center gap-2 self-stretch text-lg! bg-(image:--button-gradient) hover:bg-(image:--button-gradient-hover) focus:bg-(image:--button-gradient-focus) dark:bg-transparent! light:bg-primary light:hover:bg-none light:hover:bg-primary-hover light:focus:bg-primary-hover focus:outline-hidden transition-colors"
+            className="mt-7"
             disabled={isSubmitting}
+            startAdornment={
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+              >
+                <path
+                  d="M7.33333 4.66667L6.4 5.6L8.13333 7.33333H1.33333V8.66667H8.13333L6.4 10.4L7.33333 11.3333L10.6667 8L7.33333 4.66667ZM13.3333 12.6667H8V14H13.3333C14.0667 14 14.6667 13.4 14.6667 12.6667V3.33333C14.6667 2.6 14.0667 2 13.3333 2H8V3.33333H13.3333V12.6667Z"
+                  fill="white"
+                />
+              </svg>
+            }
           >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              viewBox="0 0 16 16"
-              fill="none"
-            >
-              <path
-                d="M7.33333 4.66667L6.4 5.6L8.13333 7.33333H1.33333V8.66667H8.13333L6.4 10.4L7.33333 11.3333L10.6667 8L7.33333 4.66667ZM13.3333 12.6667H8V14H13.3333C14.0667 14 14.6667 13.4 14.6667 12.6667V3.33333C14.6667 2.6 14.0667 2 13.3333 2H8V3.33333H13.3333V12.6667Z"
-                fill="white"
-              />
-            </svg>
             {isSubmitting ? 'Resetting...' : 'Reset Password'}
           </Button>
         </form>
@@ -177,12 +181,10 @@ export const ForgotPasswordFull = () => {
       >
         <LogoIcon className="h-11 w-auto mb-2" />
         <div className="w-full grow flex flex-col justify-center">
-          <h4 className="text-2xl font-sans font-bold mb-0">
-            Forgot Password?
-          </h4>
-          <span className="text-base text-text-secondary font-sans">
+          <h4 className="text-xl font-sans font-bold mb-0">Forgot Password?</h4>
+          <span className="text-sm text-content-text-neutral-2 font-sans">
             Forgot your password? No worries! Simply enter your email address
-            below, and we'll send you instructions on how to reset it.
+            below, and we&apos;ll send you instructions on how to reset it.
           </span>
           <form
             className="my-7"
@@ -207,31 +209,34 @@ export const ForgotPasswordFull = () => {
             </Block>
             <Stack direction="column">
               <Button
+                size="large"
                 type="submit"
                 fullWidth
                 variant="filled"
                 color="primary"
-                className="mt-7 rounded-xs px-4 py-2 flex items-center gap-2 self-stretch text-lg! bg-(image:--button-gradient) hover:bg-(image:--button-gradient-hover) focus:bg-(image:--button-gradient-focus) dark:bg-transparent! light:bg-primary light:hover:bg-none light:hover:bg-primary-hover light:focus:bg-primary-hover focus:outline-hidden transition-colors"
+                className="mt-7"
                 disabled={isSubmitting}
+                startAdornment={
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                  >
+                    <path
+                      d="M7.33333 4.66667L6.4 5.6L8.13333 7.33333H1.33333V8.66667H8.13333L6.4 10.4L7.33333 11.3333L10.6667 8L7.33333 4.66667ZM13.3333 12.6667H8V14H13.3333C14.0667 14 14.6667 13.4 14.6667 12.6667V3.33333C14.6667 2.6 14.0667 2 13.3333 2H8V3.33333H13.3333V12.6667Z"
+                      fill="white"
+                    />
+                  </svg>
+                }
               >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="16"
-                  height="16"
-                  viewBox="0 0 16 16"
-                  fill="none"
-                >
-                  <path
-                    d="M7.33333 4.66667L6.4 5.6L8.13333 7.33333H1.33333V8.66667H8.13333L6.4 10.4L7.33333 11.3333L10.6667 8L7.33333 4.66667ZM13.3333 12.6667H8V14H13.3333C14.0667 14 14.6667 13.4 14.6667 12.6667V3.33333C14.6667 2.6 14.0667 2 13.3333 2H8V3.33333H13.3333V12.6667Z"
-                    fill="white"
-                  />
-                </svg>
                 {isSubmitting ? 'Resetting...' : 'Reset Password'}
               </Button>
-              <Divider variant="secondary" />
-              <a href="#" className="text-primary text-lg font-semibold">
+              <Divider />
+              <Button size="large" variant="text">
                 Return to login
-              </a>
+              </Button>
             </Stack>
           </form>
         </div>
@@ -258,12 +263,10 @@ export const ForgotPasswordMinimal = () => {
     >
       <Card className="w-full p-12">
         <div className="flex flex-col items-center justify-center text-center pt-2 mb-14">
-          <h4 className="text-2xl font-sans font-bold mb-0">
-            Forgot Password?
-          </h4>
-          <span className="text-base text-text-secondary font-sans">
+          <h4 className="text-xl font-sans font-bold mb-0">Forgot Password?</h4>
+          <span className="text-base text-content-text-neutral-2 font-sans">
             Forgot your password? No worries! Simply enter your email address
-            below, and we'll send you instructions on how to reset it.
+            below, and we&apos;ll send you instructions on how to reset it.
           </span>
         </div>
         <form onSubmit={handleSubmit(values => console.log('values', values))}>
@@ -296,34 +299,37 @@ export const ForgotPasswordMinimal = () => {
             />
           </Block>
           <Button
+            size="large"
             type="submit"
             variant="filled"
             color="primary"
-            className="my-7 rounded-xs px-4 py-2 flex items-center gap-2 self-stretch text-lg! bg-(image:--button-gradient) hover:bg-(image:--button-gradient-hover) focus:bg-(image:--button-gradient-focus) dark:bg-transparent! light:bg-primary light:hover:bg-none light:hover:bg-primary-hover light:focus:bg-primary-hover focus:outline-hidden transition-colors"
+            className="my-7"
             disabled={isSubmitting}
             fullWidth
+            startAdornment={
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+              >
+                <path
+                  d="M11.3333 4.66675H8.66667V6.00008H11.3333C12.4333 6.00008 13.3333 6.90008 13.3333 8.00008C13.3333 9.10008 12.4333 10.0001 11.3333 10.0001H8.66667V11.3334H11.3333C13.1733 11.3334 14.6667 9.84008 14.6667 8.00008C14.6667 6.16008 13.1733 4.66675 11.3333 4.66675ZM7.33333 10.0001H4.66667C3.56667 10.0001 2.66667 9.10008 2.66667 8.00008C2.66667 6.90008 3.56667 6.00008 4.66667 6.00008H7.33333V4.66675H4.66667C2.82667 4.66675 1.33333 6.16008 1.33333 8.00008C1.33333 9.84008 2.82667 11.3334 4.66667 11.3334H7.33333V10.0001ZM5.33333 7.33341H10.6667V8.66675H5.33333V7.33341Z"
+                  fill="#C9C9D6"
+                />
+              </svg>
+            }
           >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              viewBox="0 0 16 16"
-              fill="none"
-            >
-              <path
-                d="M11.3333 4.66675H8.66667V6.00008H11.3333C12.4333 6.00008 13.3333 6.90008 13.3333 8.00008C13.3333 9.10008 12.4333 10.0001 11.3333 10.0001H8.66667V11.3334H11.3333C13.1733 11.3334 14.6667 9.84008 14.6667 8.00008C14.6667 6.16008 13.1733 4.66675 11.3333 4.66675ZM7.33333 10.0001H4.66667C3.56667 10.0001 2.66667 9.10008 2.66667 8.00008C2.66667 6.90008 3.56667 6.00008 4.66667 6.00008H7.33333V4.66675H4.66667C2.82667 4.66675 1.33333 6.16008 1.33333 8.00008C1.33333 9.84008 2.82667 11.3334 4.66667 11.3334H7.33333V10.0001ZM5.33333 7.33341H10.6667V8.66675H5.33333V7.33341Z"
-                fill="#C9C9D6"
-              />
-            </svg>
             {isSubmitting ? 'Sending...' : 'Get Link'}
           </Button>
           <Stack className="w-full" justifyContent="center">
-            <span className="text-sm text-text-secondary">
+            <span className="text-sm text-content-text-neutral-2">
               Remember password?
             </span>
-            <a href="#" className="text-primary text-lg font-semibold">
+            <Button size="large" variant="text">
               Log in
-            </a>
+            </Button>
           </Stack>
         </form>
       </Card>
@@ -350,12 +356,12 @@ export const ResetPassword = () => {
       >
         <Stack justifyContent="spaceBetween">
           <LogoIcon className="h-11 w-auto" />
-          <a href="#" className="text-lg text-primary font-semibold">
+          <Button variant="text" size="large">
             Create an account
-          </a>
+          </Button>
         </Stack>
         <div className="w-full flex flex-col grow items-center justify-center text-center pt-2 mb-14">
-          <div className="p-3 border border-secondary-inactive rounded-sm mb-3">
+          <div className="p-3 border border-stroke-neutral-3 rounded-sm mb-3">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="16"
@@ -366,10 +372,10 @@ export const ResetPassword = () => {
               <path d="M7.33333 11.9999H8.66667V10.6666H7.33333V11.9999ZM8 1.33325C4.32 1.33325 1.33333 4.31992 1.33333 7.99992C1.33333 11.6799 4.32 14.6666 8 14.6666C11.68 14.6666 14.6667 11.6799 14.6667 7.99992C14.6667 4.31992 11.68 1.33325 8 1.33325ZM8 13.3333C5.06 13.3333 2.66667 10.9399 2.66667 7.99992C2.66667 5.05992 5.06 2.66659 8 2.66659C10.94 2.66659 13.3333 5.05992 13.3333 7.99992C13.3333 10.9399 10.94 13.3333 8 13.3333ZM8 3.99992C6.52667 3.99992 5.33333 5.19325 5.33333 6.66658H6.66667C6.66667 5.93325 7.26667 5.33325 8 5.33325C8.73333 5.33325 9.33333 5.93325 9.33333 6.66658C9.33333 7.99992 7.33333 7.83325 7.33333 9.99992H8.66667C8.66667 8.49992 10.6667 8.33325 10.6667 6.66658C10.6667 5.19325 9.47333 3.99992 8 3.99992Z" />
             </svg>
           </div>
-          <h4 className="text-2xl font-sans font-bold mb-0">Reset Password?</h4>
-          <span className="text-base text-text-secondary font-sans">
+          <h4 className="text-xl font-sans font-bold mb-0">Reset Password?</h4>
+          <span className="text-base text-content-text-neutral-2 font-sans">
             Forgot your password? No worries! Simply enter your email address
-            below, and we'll send you instructions on how to reset it.
+            below, and we&apos;ll send you instructions on how to reset it.
           </span>
           <form
             onSubmit={handleSubmit(values => console.log('values', values))}
@@ -404,52 +410,57 @@ export const ResetPassword = () => {
               />
             </Block>
             <Button
+              size="large"
               type="submit"
               variant="filled"
               color="primary"
-              className="my-7 rounded-xs px-4 py-2 flex items-center gap-2 self-stretch text-lg! bg-(image:--button-gradient) hover:bg-(image:--button-gradient-hover) focus:bg-(image:--button-gradient-focus) dark:bg-transparent! light:bg-primary light:hover:bg-none light:hover:bg-primary-hover light:focus:bg-primary-hover focus:outline-hidden transition-colors"
+              className="my-7"
               disabled={isSubmitting}
               fullWidth
+              startAdornment={
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  fill="currentColor"
+                >
+                  <path d="M8 2.66675V0.666748L5.33333 3.33341L8 6.00008V4.00008C10.2067 4.00008 12 5.79342 12 8.00008C12 8.67342 11.8333 9.31342 11.5333 9.86675L12.5067 10.8401C13.0267 10.0201 13.3333 9.04675 13.3333 8.00008C13.3333 5.05341 10.9467 2.66675 8 2.66675ZM8 12.0001C5.79333 12.0001 4 10.2067 4 8.00008C4 7.32675 4.16667 6.68675 4.46667 6.13341L3.49333 5.16008C2.97333 5.98008 2.66667 6.95341 2.66667 8.00008C2.66667 10.9467 5.05333 13.3334 8 13.3334V15.3334L10.6667 12.6667L8 10.0001V12.0001Z" />
+                </svg>
+              }
             >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="currentColor"
-              >
-                <path d="M8 2.66675V0.666748L5.33333 3.33341L8 6.00008V4.00008C10.2067 4.00008 12 5.79342 12 8.00008C12 8.67342 11.8333 9.31342 11.5333 9.86675L12.5067 10.8401C13.0267 10.0201 13.3333 9.04675 13.3333 8.00008C13.3333 5.05341 10.9467 2.66675 8 2.66675ZM8 12.0001C5.79333 12.0001 4 10.2067 4 8.00008C4 7.32675 4.16667 6.68675 4.46667 6.13341L3.49333 5.16008C2.97333 5.98008 2.66667 6.95341 2.66667 8.00008C2.66667 10.9467 5.05333 13.3334 8 13.3334V15.3334L10.6667 12.6667L8 10.0001V12.0001Z" />
-              </svg>
               {isSubmitting ? 'Resetting...' : 'Reset Password'}
             </Button>
             <Stack
-              className="w-full text-primary"
+              className="w-full text-content-text-neutral-base"
               justifyContent="center"
               dense
             >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="currentColor"
-              >
-                <path d="M13.3333 7.33342H5.22L8.94667 3.60675L8 2.66675L2.66667 8.00008L8 13.3334L8.94 12.3934L5.22 8.66675H13.3333V7.33342Z" />
-              </svg>
-              <a
-                href="#"
-                className="inline-flex items-center text-lg font-semibold"
+              <Button
+                size="large"
+                variant="text"
+                startAdornment={
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="currentColor"
+                  >
+                    <path d="M13.3333 7.33342H5.22L8.94667 3.60675L8 2.66675L2.66667 8.00008L8 13.3334L8.94 12.3934L5.22 8.66675H13.3333V7.33342Z" />
+                  </svg>
+                }
               >
                 Back to log in
-              </a>
+              </Button>
             </Stack>
           </form>
         </div>
         <Stack justifyContent="center">
-          <div className="h-[4px] w-[60px] bg-primary rounded-sm" />
-          <div className="h-[4px] w-[60px] dark:bg-gray-800 light:bg-gray-300 rounded-sm" />
-          <div className="h-[4px] w-[60px] dark:bg-gray-800 light:bg-gray-300 rounded-sm" />
-          <div className="h-[4px] w-[60px] dark:bg-gray-800 light:bg-gray-300 rounded-sm" />
+          <div className="h-[4px] w-[60px] bg-background-brand-base rounded-sm" />
+          <div className="h-[4px] w-[60px] dark:bg-background-neutral-raised-4 rounded-sm" />
+          <div className="h-[4px] w-[60px] dark:bg-background-neutral-raised-4 rounded-sm" />
+          <div className="h-[4px] w-[60px] dark:bg-background-neutral-raised-4 rounded-sm" />
         </Stack>
       </Card>
     </motion.div>
@@ -471,7 +482,7 @@ export const ResetPasswordMinimal = () => {
     >
       <Card className="w-full p-12">
         <div className="flex flex-col items-center justify-center text-center pt-2 mb-10">
-          <div className="p-3 border border-secondary-inactive rounded-sm mb-3">
+          <div className="p-3 border border-stroke-neutral-3 rounded-sm mb-3">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="16"
@@ -482,10 +493,10 @@ export const ResetPasswordMinimal = () => {
               <path d="M7.33333 11.9999H8.66667V10.6666H7.33333V11.9999ZM8 1.33325C4.32 1.33325 1.33333 4.31992 1.33333 7.99992C1.33333 11.6799 4.32 14.6666 8 14.6666C11.68 14.6666 14.6667 11.6799 14.6667 7.99992C14.6667 4.31992 11.68 1.33325 8 1.33325ZM8 13.3333C5.06 13.3333 2.66667 10.9399 2.66667 7.99992C2.66667 5.05992 5.06 2.66659 8 2.66659C10.94 2.66659 13.3333 5.05992 13.3333 7.99992C13.3333 10.9399 10.94 13.3333 8 13.3333ZM8 3.99992C6.52667 3.99992 5.33333 5.19325 5.33333 6.66658H6.66667C6.66667 5.93325 7.26667 5.33325 8 5.33325C8.73333 5.33325 9.33333 5.93325 9.33333 6.66658C9.33333 7.99992 7.33333 7.83325 7.33333 9.99992H8.66667C8.66667 8.49992 10.6667 8.33325 10.6667 6.66658C10.6667 5.19325 9.47333 3.99992 8 3.99992Z" />
             </svg>
           </div>
-          <h4 className="text-2xl font-sans font-bold mb-0">Reset Password?</h4>
-          <span className="text-base text-text-secondary font-sans">
+          <h4 className="text-xl font-sans font-bold mb-0">Reset Password?</h4>
+          <span className="text-base text-content-text-neutral-2 font-sans">
             Forgot your password? No worries! Simply enter your email address
-            below, and we'll send you instructions on how to reset it.
+            below, and we&apos;ll send you instructions on how to reset it.
           </span>
         </div>
         <form onSubmit={handleSubmit(values => console.log('values', values))}>
@@ -518,43 +529,48 @@ export const ResetPasswordMinimal = () => {
             />
           </Block>
           <Button
+            size="large"
             type="submit"
             variant="filled"
             color="primary"
-            className="my-7 rounded-xs px-4 py-2 flex items-center gap-2 self-stretch text-lg! bg-(image:--button-gradient) hover:bg-(image:--button-gradient-hover) focus:bg-(image:--button-gradient-focus) dark:bg-transparent! light:bg-primary light:hover:bg-none light:hover:bg-primary-hover light:focus:bg-primary-hover focus:outline-hidden transition-colors"
+            className="my-7"
+            startAdornment={
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="currentColor"
+              >
+                <path d="M8 2.66675V0.666748L5.33333 3.33341L8 6.00008V4.00008C10.2067 4.00008 12 5.79342 12 8.00008C12 8.67342 11.8333 9.31342 11.5333 9.86675L12.5067 10.8401C13.0267 10.0201 13.3333 9.04675 13.3333 8.00008C13.3333 5.05341 10.9467 2.66675 8 2.66675ZM8 12.0001C5.79333 12.0001 4 10.2067 4 8.00008C4 7.32675 4.16667 6.68675 4.46667 6.13341L3.49333 5.16008C2.97333 5.98008 2.66667 6.95341 2.66667 8.00008C2.66667 10.9467 5.05333 13.3334 8 13.3334V15.3334L10.6667 12.6667L8 10.0001V12.0001Z" />
+              </svg>
+            }
             disabled={isSubmitting}
             fullWidth
           >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              viewBox="0 0 16 16"
-              fill="currentColor"
-            >
-              <path d="M8 2.66675V0.666748L5.33333 3.33341L8 6.00008V4.00008C10.2067 4.00008 12 5.79342 12 8.00008C12 8.67342 11.8333 9.31342 11.5333 9.86675L12.5067 10.8401C13.0267 10.0201 13.3333 9.04675 13.3333 8.00008C13.3333 5.05341 10.9467 2.66675 8 2.66675ZM8 12.0001C5.79333 12.0001 4 10.2067 4 8.00008C4 7.32675 4.16667 6.68675 4.46667 6.13341L3.49333 5.16008C2.97333 5.98008 2.66667 6.95341 2.66667 8.00008C2.66667 10.9467 5.05333 13.3334 8 13.3334V15.3334L10.6667 12.6667L8 10.0001V12.0001Z" />
-            </svg>
             {isSubmitting ? 'Sending...' : 'Reset Password'}
           </Button>
           <Stack className="w-full" justifyContent="center">
-            <span className="text-sm text-text-secondary">
+            <span className="text-sm text-content-text-neutral-2">
               Remember your password?
             </span>
-            <a
-              href="#"
-              className="inline-flex items-center gap-1 text-primary text-lg font-semibold"
+            <Button
+              size="large"
+              variant="text"
+              startAdornment={
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  fill="currentColor"
+                >
+                  <path d="M13.3333 7.33342H5.22L8.94667 3.60675L8 2.66675L2.66667 8.00008L8 13.3334L8.94 12.3934L5.22 8.66675H13.3333V7.33342Z" />
+                </svg>
+              }
             >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 16 16"
-                fill="currentColor"
-              >
-                <path d="M13.3333 7.33342H5.22L8.94667 3.60675L8 2.66675L2.66667 8.00008L8 13.3334L8.94 12.3934L5.22 8.66675H13.3333V7.33342Z" />
-              </svg>{' '}
               Go back
-            </a>
+            </Button>
           </Stack>
         </form>
       </Card>
diff --git a/docs/blocks/authentication/Login.story.tsx b/docs/blocks/authentication/Login.story.tsx
index 0ad5b820f..f8f0ed974 100644
--- a/docs/blocks/authentication/Login.story.tsx
+++ b/docs/blocks/authentication/Login.story.tsx
@@ -1,10 +1,10 @@
+import { motion } from 'motion/react';
 import React from 'react';
 import { Controller, useForm } from 'react-hook-form';
-import { motion } from 'motion/react';
 
-import { Block, Card, Divider, Stack } from '../../../src/layout';
-import { Checkbox, Input } from '../../../src/form';
 import { Button } from '../../../src/elements/Button';
+import { Checkbox, Input } from '../../../src/form';
+import { Block, Card, Divider, Stack } from '../../../src/layout';
 
 export default {
   title: 'Blocks/Authentication/Login'
@@ -59,10 +59,10 @@ export const Login = () => {
       <Card className="w-full p-12">
         <div className="flex flex-col items-center justify-center pt-2 mb-14">
           <LogoIcon className="h-11 w-auto mb-2" />
-          <h4 className="text-2xl font-sans font-bold mb-0">
+          <h4 className="text-xl font-sans font-bold mb-0">
             Log In or create account
           </h4>
-          <span className="text-base text-text-secondary font-sans">
+          <span className="text-sm text-content-text-neutral-2 font-sans">
             Welcome to Reablocks, powered by Good Code
           </span>
         </div>
@@ -82,11 +82,12 @@ export const Login = () => {
             />
           </Block>
           <Button
+            size="large"
             type="submit"
             variant="filled"
             color="primary"
             disabled={isSubmitting}
-            className="mt-7 rounded-xs px-4 py-2 flex items-center gap-2 self-stretch text-lg! bg-(image:--button-gradient) hover:bg-(image:--button-gradient-hover) focus:bg-(image:--button-gradient-focus) dark:bg-transparent! light:bg-primary light:hover:bg-none light:hover:bg-primary-hover light:focus:bg-primary-hover focus:outline-hidden transition-colors"
+            className="mt-7"
             startAdornment={
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -94,7 +95,7 @@ export const Login = () => {
                 height="16"
                 fill="none"
               >
-                <g clip-path="url(#a)">
+                <g clipPath="url(#a)">
                   <path
                     fill="#fff"
                     d="M7.833 4.667 6.9 5.6l1.733 1.733h-6.8v1.334h6.8L6.9 10.4l.933.933L11.167 8 7.833 4.667Zm6 8H8.5V14h5.333c.734 0 1.334-.6 1.334-1.333V3.333c0-.733-.6-1.333-1.334-1.333H8.5v1.333h5.333v9.334Z"
@@ -111,8 +112,9 @@ export const Login = () => {
           >
             {isSubmitting ? 'Logging in...' : 'Login'}
           </Button>
-          <Divider className="my-7" variant="secondary" />
+          <Divider className="my-7" />
           <Button
+            size="large"
             variant="outline"
             startAdornment={
               <svg
@@ -129,21 +131,15 @@ export const Login = () => {
           >
             Sign up with Google
           </Button>
-          <div className="mt-5 text-sm text-text-secondary flex items-center justify-center gap-2">
+          <div className="mt-5 text-xs text-content-text-neutral-2 flex items-center justify-center gap-2">
             By signing in, you agree to our
-            <a
-              href="#"
-              className="text-primary hover:text-primary-hover text-lg"
-            >
+            <Button variant="text" className="p-0">
               terms of service
-            </a>
+            </Button>
             and
-            <a
-              href="#"
-              className="text-primary hover:text-primary-hover text-lg"
-            >
+            <Button variant="text" className="p-0">
               privacy policy
-            </a>
+            </Button>
           </div>
         </form>
       </Card>
@@ -167,10 +163,10 @@ export const LoginBasic = () => {
       <Card className="w-full p-12">
         <div className="flex flex-col items-center justify-center pt-2 mb-14">
           <LogoIcon className="h-11 w-auto mb-2" />
-          <h4 className="text-2xl font-sans font-bold mb-0">
+          <h4 className="text-xl font-sans font-bold mb-0">
             Log In or create account
           </h4>
-          <span className="text-base text-text-secondary font-sans">
+          <span className="text-sm text-content-text-neutral-2 font-sans">
             Welcome to Reablocks, powered by Good Code
           </span>
         </div>
@@ -190,11 +186,12 @@ export const LoginBasic = () => {
             />
           </Block>
           <Button
+            size="large"
             type="submit"
             variant="filled"
             color="primary"
             disabled={isSubmitting}
-            className="mt-7 rounded-xs px-4 py-2 flex items-center gap-2 self-stretch text-lg! bg-(image:--button-gradient) hover:bg-(image:--button-gradient-hover) focus:bg-(image:--button-gradient-focus) dark:bg-transparent! light:bg-primary light:hover:bg-none light:hover:bg-primary-hover light:focus:bg-primary-hover focus:outline-hidden transition-colors"
+            className="mt-7"
             startAdornment={
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -202,7 +199,7 @@ export const LoginBasic = () => {
                 height="16"
                 fill="none"
               >
-                <g clip-path="url(#a)">
+                <g clipPath="url(#a)">
                   <path
                     fill="#fff"
                     d="M7.833 4.667 6.9 5.6l1.733 1.733h-6.8v1.334h6.8L6.9 10.4l.933.933L11.167 8 7.833 4.667Zm6 8H8.5V14h5.333c.734 0 1.334-.6 1.334-1.333V3.333c0-.733-.6-1.333-1.334-1.333H8.5v1.333h5.333v9.334Z"
@@ -219,8 +216,9 @@ export const LoginBasic = () => {
           >
             {isSubmitting ? 'Logging in...' : 'Login'}
           </Button>
-          <Divider className="my-7" variant="secondary" />
+          <Divider className="my-7" />
           <Button
+            size="large"
             variant="outline"
             startAdornment={
               <svg
@@ -237,21 +235,15 @@ export const LoginBasic = () => {
           >
             Sign up
           </Button>
-          <div className="mt-5 text-sm text-text-secondary flex items-center justify-center gap-2">
+          <div className="mt-5 text-sm text-content-text-neutral-2 flex items-center justify-center gap-2">
             By signing in, you agree to our
-            <a
-              href="#"
-              className="text-primary hover:text-primary-hover text-lg"
-            >
+            <Button variant="text" className="p-0">
               terms of service
-            </a>
+            </Button>
             and
-            <a
-              href="#"
-              className="text-primary hover:text-primary-hover text-lg"
-            >
+            <Button variant="text" className="p-0">
               privacy policy
-            </a>
+            </Button>
           </div>
         </form>
       </Card>
@@ -278,10 +270,10 @@ export const LoginFull = () => {
       >
         <div className="w-full grow flex flex-col justify-center">
           <LogoIcon className="h-11 mb-2 self-start w-auto" />
-          <h4 className="text-2xl font-sans font-bold mb-0">
+          <h4 className="text-xl font-sans font-bold mb-0">
             Log In or create account
           </h4>
-          <span className="text-base text-text-secondary font-sans">
+          <span className="text-sm text-content-text-neutral-2 font-sans">
             Welcome to Reablocks, powered by Good Code
           </span>
           <form
@@ -307,38 +299,42 @@ export const LoginFull = () => {
             </Block>
             <Stack direction="column">
               <Button
+                size="large"
                 type="submit"
                 variant="filled"
                 color="primary"
-                className="mt-7 rounded-xs px-4 py-2 font-semibold flex items-center gap-2 self-stretch text-lg! bg-(image:--button-gradient) hover:bg-(image:--button-gradient-hover) focus:bg-(image:--button-gradient-focus) dark:bg-transparent! light:bg-primary light:hover:bg-none light:hover:bg-primary-hover light:focus:bg-primary-hover focus:outline-hidden transition-colors"
+                className="mt-7"
                 disabled={isSubmitting}
                 fullWidth
+                startAdornment={
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                  >
+                    <path
+                      d="M7.33333 4.66667L6.4 5.6L8.13333 7.33333H1.33333V8.66667H8.13333L6.4 10.4L7.33333 11.3333L10.6667 8L7.33333 4.66667ZM13.3333 12.6667H8V14H13.3333C14.0667 14 14.6667 13.4 14.6667 12.6667V3.33333C14.6667 2.6 14.0667 2 13.3333 2H8V3.33333H13.3333V12.6667Z"
+                      fill="white"
+                    />
+                  </svg>
+                }
               >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="16"
-                  height="16"
-                  viewBox="0 0 16 16"
-                  fill="none"
-                >
-                  <path
-                    d="M7.33333 4.66667L6.4 5.6L8.13333 7.33333H1.33333V8.66667H8.13333L6.4 10.4L7.33333 11.3333L10.6667 8L7.33333 4.66667ZM13.3333 12.6667H8V14H13.3333C14.0667 14 14.6667 13.4 14.6667 12.6667V3.33333C14.6667 2.6 14.0667 2 13.3333 2H8V3.33333H13.3333V12.6667Z"
-                    fill="white"
-                  />
-                </svg>
                 {isSubmitting ? 'Logging in...' : 'Login'}
               </Button>
             </Stack>
             <Stack className="my-7">
-              <Divider variant="secondary" />
-              <span className="whitespace-nowrap text-sm dark:text-waterloo light:text-charade">
+              <Divider />
+              <span className="whitespace-nowrap text-sm text-content-text-neutral-2">
                 or with
               </span>
-              <Divider variant="secondary" />
+              <Divider />
             </Stack>
             <div className="flex flex-col w-full gap-4">
               <Button
-                className="px-4 py-2 font-semibold dark:bg-charade/40 dark:hover:bg-charade/60 dark:focus:bg-charade/60 light:bg-blue-200/40 light:hover:bg-blue-200/60 light:focus:bg-blue-200/60 light:text-vulcan focus:outline-hidden transition-colors"
+                size="large"
+                variant="outline"
                 startAdornment={
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -355,7 +351,8 @@ export const LoginFull = () => {
                 Sign in with Google
               </Button>
               <Button
-                className="px-4 py-2 font-semibold dark:bg-charade/40 dark:hover:bg-charade/60 dark:focus:bg-charade/60 light:bg-blue-200/40 light:hover:bg-blue-200/60 light:focus:bg-blue-200/60 light:text-vulcan focus:outline-hidden transition-colors"
+                size="large"
+                variant="outline"
                 startAdornment={
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -372,7 +369,8 @@ export const LoginFull = () => {
                 Sign up with Facebook
               </Button>
               <Button
-                className="px-4 py-2 font-semibold dark:bg-charade/40 dark:hover:bg-charade/60 dark:focus:bg-charade/60 light:bg-blue-200/40 light:hover:bg-blue-200/60 light:focus:bg-blue-200/60 light:text-vulcan focus:outline-hidden transition-colors"
+                size="large"
+                variant="outline"
                 startAdornment={
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -389,21 +387,15 @@ export const LoginFull = () => {
                 Sign up with Microsoft
               </Button>
             </div>
-            <div className="mt-5 text-sm text-text-secondary flex items-center justify-center gap-1.5">
+            <div className="mt-5 text-sm text-content-text-neutral-2 flex items-center justify-center gap-1.5">
               By signing in, you agree to our
-              <a
-                href="#"
-                className="text-primary hover:text-primary-hover text-sm"
-              >
+              <Button variant="text" className="p-0">
                 terms of service
-              </a>
+              </Button>
               and
-              <a
-                href="#"
-                className="text-primary hover:text-primary-hover text-sm"
-              >
+              <Button variant="text" className="p-0">
                 privacy policy
-              </a>
+              </Button>
             </div>
           </form>
         </div>
@@ -432,10 +424,10 @@ export const LoginPassword = () => {
       <Card className="w-full p-12">
         <div className="flex flex-col items-center justify-center pt-2 mb-14">
           <LogoIcon className="h-11 w-auto mb-2" />
-          <h4 className="text-2xl font-sans font-bold mb-0">
+          <h4 className="text-xl font-sans font-bold mb-0">
             Log In or create account
           </h4>
-          <span className="text-base text-text-secondary font-sans">
+          <span className="text-sm text-content-text-neutral-2 font-sans">
             Welcome to Reablocks, powered by Good Code
           </span>
         </div>
@@ -484,20 +476,16 @@ export const LoginPassword = () => {
                 />
               )}
             />
-            <a
-              href="#"
-              className="whitespace-nowrap text-primary hover:text-primary-hover"
-            >
-              Forgot your password?
-            </a>
+            <Button variant="text">Forgot your password?</Button>
           </Stack>
           <Divider className="my-7" variant="secondary" />
           <Button
+            size="large"
             type="submit"
             variant="filled"
             color="primary"
             disabled={isSubmitting}
-            className="mt-7 rounded-xs px-4 py-2 flex items-center gap-2 self-stretch text-lg! bg-(image:--button-gradient) hover:bg-(image:--button-gradient-hover) focus:bg-(image:--button-gradient-focus) dark:bg-transparent! light:bg-primary light:hover:bg-none light:hover:bg-primary-hover light:focus:bg-primary-hover focus:outline-hidden transition-colors"
+            className="mt-7"
             startAdornment={
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -505,7 +493,7 @@ export const LoginPassword = () => {
                 height="16"
                 fill="none"
               >
-                <g clip-path="url(#a)">
+                <g clipPath="url(#a)">
                   <path
                     fill="#fff"
                     d="M7.833 4.667 6.9 5.6l1.733 1.733h-6.8v1.334h6.8L6.9 10.4l.933.933L11.167 8 7.833 4.667Zm6 8H8.5V14h5.333c.734 0 1.334-.6 1.334-1.333V3.333c0-.733-.6-1.333-1.334-1.333H8.5v1.333h5.333v9.334Z"
@@ -522,14 +510,11 @@ export const LoginPassword = () => {
           >
             {isSubmitting ? 'Logging in...' : 'Login'}
           </Button>
-          <div className="mt-5 text-sm text-text-secondary flex items-center justify-center gap-2">
-            Don't have an account?
-            <a
-              href="#"
-              className="text-primary hover:text-primary-hover text-lg"
-            >
+          <div className="mt-5 text-sm text-content-text-neutral-2 flex items-center justify-center gap-2">
+            Don&apos;t have an account?
+            <Button variant="text" size="large">
               Sign up
-            </a>
+            </Button>
           </div>
         </form>
       </Card>
@@ -553,10 +538,10 @@ export const LoginSocial = () => {
       <Card className="w-full p-12">
         <div className="flex flex-col items-center justify-center pt-2 mb-14">
           <LogoIcon className="h-11 w-auto mb-2" />
-          <h4 className="text-2xl font-sans font-bold mb-0">
+          <h4 className="text-xl font-sans font-bold mb-0">
             Log In or create account
           </h4>
-          <span className="text-base text-text-secondary font-sans">
+          <span className="text-sm text-content-text-neutral-2 font-sans">
             Welcome to Reablocks, powered by Good Code
           </span>
         </div>
@@ -576,11 +561,12 @@ export const LoginSocial = () => {
             />
           </Block>
           <Button
+            size="large"
             type="submit"
             variant="filled"
             color="primary"
             disabled={isSubmitting}
-            className="mt-7 rounded-xs px-4 py-2 flex items-center gap-2 self-stretch text-lg! bg-(image:--button-gradient) hover:bg-(image:--button-gradient-hover) focus:bg-(image:--button-gradient-focus) dark:bg-transparent! light:bg-primary light:hover:bg-none light:hover:bg-primary-hover light:focus:bg-primary-hover focus:outline-hidden transition-colors"
+            className="mt-7"
             startAdornment={
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -588,7 +574,7 @@ export const LoginSocial = () => {
                 height="16"
                 fill="none"
               >
-                <g clip-path="url(#a)">
+                <g clipPath="url(#a)">
                   <path
                     fill="#fff"
                     d="M7.833 4.667 6.9 5.6l1.733 1.733h-6.8v1.334h6.8L6.9 10.4l.933.933L11.167 8 7.833 4.667Zm6 8H8.5V14h5.333c.734 0 1.334-.6 1.334-1.333V3.333c0-.733-.6-1.333-1.334-1.333H8.5v1.333h5.333v9.334Z"
@@ -606,14 +592,15 @@ export const LoginSocial = () => {
             {isSubmitting ? 'Logging in...' : 'Login'}
           </Button>
           <Stack className="my-7">
-            <Divider variant="secondary" />
-            <span className="whitespace-nowrap text-sm dark:text-waterloo light:text-charade">
+            <Divider />
+            <span className="whitespace-nowrap text-sm text-content-text-neutral-2">
               or with
             </span>
-            <Divider variant="secondary" />
+            <Divider />
           </Stack>
           <div className="flex flex-col w-full gap-4">
             <Button
+              size="large"
               variant="outline"
               startAdornment={
                 <svg
@@ -631,6 +618,7 @@ export const LoginSocial = () => {
               Sign in with Google
             </Button>
             <Button
+              size="large"
               variant="outline"
               startAdornment={
                 <svg
@@ -648,6 +636,7 @@ export const LoginSocial = () => {
               Sign up with Facebook
             </Button>
             <Button
+              size="large"
               variant="outline"
               startAdornment={
                 <svg
@@ -665,21 +654,15 @@ export const LoginSocial = () => {
               Sign up with Microsoft
             </Button>
           </div>
-          <div className="mt-5 text-sm text-text-secondary flex items-center justify-center gap-2">
+          <div className="mt-5 text-sm text-content-text-neutral-2 flex items-center justify-center gap-2">
             By signing in, you agree to our
-            <a
-              href="#"
-              className="text-primary hover:text-primary-hover text-lg"
-            >
+            <Button variant="text" className="p-0">
               terms of service
-            </a>
+            </Button>
             and
-            <a
-              href="#"
-              className="text-primary hover:text-primary-hover text-lg"
-            >
+            <Button variant="text" className="p-0">
               privacy policy
-            </a>
+            </Button>
           </div>
         </form>
       </Card>
diff --git a/docs/blocks/authentication/Mfa.story.tsx b/docs/blocks/authentication/Mfa.story.tsx
index a25089204..7f8b94ea3 100644
--- a/docs/blocks/authentication/Mfa.story.tsx
+++ b/docs/blocks/authentication/Mfa.story.tsx
@@ -1,12 +1,12 @@
-import React from 'react';
 import { motion } from 'motion/react';
+import React from 'react';
+import { Controller, useForm } from 'react-hook-form';
 
-import { Block } from '../../../src/layout/Block';
 import { Button } from '../../../src/elements/Button';
-import { Card } from '../../../src/layout/Card';
-import { Divider, Stack } from '../../../src/layout';
 import { Input } from '../../../src/form/Input';
-import { useForm, Controller } from 'react-hook-form';
+import { Divider, Stack } from '../../../src/layout';
+import { Block } from '../../../src/layout/Block';
+import { Card } from '../../../src/layout/Card';
 
 export default {
   title: 'Blocks/Authentication/MFA'
@@ -975,9 +975,9 @@ export const Mfa = () => {
       animate={{ y: 0, opacity: 1 }}
       className="mt-10 sm:mx-auto sm:w-full md:w-[600px]"
     >
-      <Card className="w-full">
+      <Card className="w-full p-7">
         <div className="flex flex-col items-center justify-center pt-2 pb-5 text-center">
-          <div className="p-3 border border-secondary-inactive rounded-sm mb-3">
+          <div className="p-3 border border-stroke-neutral-3 rounded-sm mb-3">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="16"
@@ -988,10 +988,10 @@ export const Mfa = () => {
               <path d="M3.49998 2C2.30665 2 1.33331 2.97333 1.33331 4.16667V7.83333C1.33331 9.02667 2.30665 10 3.49998 10H7.66665C7.81665 9.64 8.01324 9.30333 8.25323 9H3.49998C2.85665 9 2.33331 8.47667 2.33331 7.83333V4.16667C2.33331 3.52333 2.85665 3 3.49998 3H12.5C13.1433 3 13.6666 3.52333 13.6666 4.16667V7.82357C13.9966 7.99357 14.3035 8.20971 14.5768 8.45638C14.6335 8.25971 14.6666 8.05 14.6666 7.83333V4.16667C14.6666 2.97333 13.6933 2 12.5 2H3.49998ZM4.99998 5.33333C4.82317 5.33333 4.6536 5.40357 4.52858 5.5286C4.40355 5.65362 4.33331 5.82319 4.33331 6C4.33331 6.17681 4.40355 6.34638 4.52858 6.4714C4.6536 6.59643 4.82317 6.66667 4.99998 6.66667C5.17679 6.66667 5.34636 6.59643 5.47138 6.4714C5.59641 6.34638 5.66665 6.17681 5.66665 6C5.66665 5.82319 5.59641 5.65362 5.47138 5.5286C5.34636 5.40357 5.17679 5.33333 4.99998 5.33333ZM7.99998 5.33333C7.82317 5.33333 7.6536 5.40357 7.52858 5.5286C7.40355 5.65362 7.33331 5.82319 7.33331 6C7.33331 6.17681 7.40355 6.34638 7.52858 6.4714C7.6536 6.59643 7.82317 6.66667 7.99998 6.66667C8.17679 6.66667 8.34636 6.59643 8.47138 6.4714C8.59641 6.34638 8.66665 6.17681 8.66665 6C8.66665 5.82319 8.59641 5.65362 8.47138 5.5286C8.34636 5.40357 8.17679 5.33333 7.99998 5.33333ZM11 5.33333C10.8232 5.33333 10.6536 5.40357 10.5286 5.5286C10.4036 5.65362 10.3333 5.82319 10.3333 6C10.3333 6.17681 10.4036 6.34638 10.5286 6.4714C10.6536 6.59643 10.8232 6.66667 11 6.66667C11.1768 6.66667 11.3464 6.59643 11.4714 6.4714C11.5964 6.34638 11.6666 6.17681 11.6666 6C11.6666 5.82319 11.5964 5.65362 11.4714 5.5286C11.3464 5.40357 11.1768 5.33333 11 5.33333ZM11.6666 8C9.64165 8 7.99998 9.64167 7.99998 11.6667C7.99998 13.6917 9.64165 15.3333 11.6666 15.3333C13.6916 15.3333 15.3333 13.6917 15.3333 11.6667C15.3333 9.64167 13.6916 8 11.6666 8ZM11.6666 9.33333C12.308 9.33333 12.903 9.60163 13.3333 10.043V9.66667C13.3333 9.48267 13.4823 9.33333 13.6666 9.33333C13.851 9.33333 14 9.48267 14 9.66667V11C14 11.184 13.851 11.3333 13.6666 11.3333H12.3333C12.149 11.3333 12 11.184 12 11C12 10.816 12.149 10.6667 12.3333 10.6667H12.987C12.6786 10.2573 12.1963 10 11.6666 10C10.7476 10 9.99998 10.7477 9.99998 11.6667C9.99998 12.5857 10.7476 13.3333 11.6666 13.3333C12.37 13.3333 13.001 12.887 13.2363 12.2227C13.2976 12.049 13.4878 11.9579 13.6614 12.0195C13.8351 12.0812 13.9262 12.2713 13.8646 12.4447C13.5356 13.375 12.652 14 11.6666 14C10.3803 14 9.33331 12.9533 9.33331 11.6667C9.33331 10.38 10.3803 9.33333 11.6666 9.33333Z" />
             </svg>
           </div>
-          <h1 className="mt-2 mb-0 text-2xl font-sans font-bold">
+          <h1 className="mt-2 mb-0 text-xl font-sans font-bold">
             One Time Password
           </h1>
-          <div className="text-text-secondary text-base">
+          <div className="text-content-text-neutral-2 text-sm">
             Please verify your identity using your registered email or phone
             number and follow the prompts to complete the password reset
             process.
@@ -1018,64 +1018,71 @@ export const Mfa = () => {
             />
           </Block>
           <Button
+            size="large"
             type="submit"
             fullWidth
             variant="filled"
             color="primary"
-            className="mt-7 rounded-xs px-4 py-2 flex items-center gap-2 self-stretch text-lg! bg-(image:--button-gradient) hover:bg-(image:--button-gradient-hover) focus:bg-(image:--button-gradient-focus) dark:bg-transparent! light:bg-primary light:hover:bg-none light:hover:bg-primary-hover light:focus:bg-primary-hover focus:outline-hidden transition-colors"
+            className="mt-7"
             disabled={isSubmitting}
+            startAdornment={
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="currentColor"
+              >
+                <path d="M8.00002 2.66669V0.666687L5.33335 3.33335L8.00002 6.00002V4.00002C10.2067 4.00002 12 5.79335 12 8.00002C12 8.67335 11.8334 9.31335 11.5334 9.86669L12.5067 10.84C13.0267 10.02 13.3334 9.04669 13.3334 8.00002C13.3334 5.05335 10.9467 2.66669 8.00002 2.66669ZM8.00002 12C5.79335 12 4.00002 10.2067 4.00002 8.00002C4.00002 7.32669 4.16669 6.68669 4.46669 6.13335L3.49335 5.16002C2.97335 5.98002 2.66669 6.95335 2.66669 8.00002C2.66669 10.9467 5.05335 13.3334 8.00002 13.3334V15.3334L10.6667 12.6667L8.00002 10V12Z" />
+              </svg>
+            }
           >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              viewBox="0 0 16 16"
-              fill="currentColor"
-            >
-              <path d="M8.00002 2.66669V0.666687L5.33335 3.33335L8.00002 6.00002V4.00002C10.2067 4.00002 12 5.79335 12 8.00002C12 8.67335 11.8334 9.31335 11.5334 9.86669L12.5067 10.84C13.0267 10.02 13.3334 9.04669 13.3334 8.00002C13.3334 5.05335 10.9467 2.66669 8.00002 2.66669ZM8.00002 12C5.79335 12 4.00002 10.2067 4.00002 8.00002C4.00002 7.32669 4.16669 6.68669 4.46669 6.13335L3.49335 5.16002C2.97335 5.98002 2.66669 6.95335 2.66669 8.00002C2.66669 10.9467 5.05335 13.3334 8.00002 13.3334V15.3334L10.6667 12.6667L8.00002 10V12Z" />
-            </svg>
             {isSubmitting ? 'Verifying...' : 'Verify'}
           </Button>
-          <div className="text-center text-text-secondary text-sm mt-5">
+          <div className="text-center text-content-text-neutral-2 text-xs mt-5">
             Are you facing any problems with receiving the code?
           </div>
-          <div className="mt-2.5 mb-5 text-text-secondary text-sm flex items-center justify-center gap-5">
-            <a
-              href="#"
-              className="text-primary hover:text-primary-hover text-lg inline-flex items-center gap-2"
+          <div className="mt-2.5 mb-5 text-content-text-neutral-2 text-xs flex items-center justify-center gap-5">
+            <Button
+              size="large"
+              variant="text"
+              endAdornment={
+                <svg
+                  width="17"
+                  height="16"
+                  viewBox="0 0 17 16"
+                  fill="currentColor"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path d="M13.1667 5.33335L10.5 8.00002H12.5C12.5 10.2067 10.7067 12 8.50002 12C7.82669 12 7.18669 11.8334 6.63335 11.5334L5.66002 12.5067C6.48002 13.0267 7.45335 13.3334 8.50002 13.3334C11.4467 13.3334 13.8334 10.9467 13.8334 8.00002H15.8334L13.1667 5.33335ZM4.50002 8.00002C4.50002 5.79335 6.29335 4.00002 8.50002 4.00002C9.17335 4.00002 9.81335 4.16669 10.3667 4.46669L11.34 3.49335C10.52 2.97335 9.54669 2.66669 8.50002 2.66669C5.55335 2.66669 3.16669 5.05335 3.16669 8.00002H1.16669L3.83335 10.6667L6.50002 8.00002H4.50002Z" />
+                </svg>
+              }
             >
               Resend Code
-              <svg
-                width="17"
-                height="16"
-                viewBox="0 0 17 16"
-                fill="currentColor"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path d="M13.1667 5.33335L10.5 8.00002H12.5C12.5 10.2067 10.7067 12 8.50002 12C7.82669 12 7.18669 11.8334 6.63335 11.5334L5.66002 12.5067C6.48002 13.0267 7.45335 13.3334 8.50002 13.3334C11.4467 13.3334 13.8334 10.9467 13.8334 8.00002H15.8334L13.1667 5.33335ZM4.50002 8.00002C4.50002 5.79335 6.29335 4.00002 8.50002 4.00002C9.17335 4.00002 9.81335 4.16669 10.3667 4.46669L11.34 3.49335C10.52 2.97335 9.54669 2.66669 8.50002 2.66669C5.55335 2.66669 3.16669 5.05335 3.16669 8.00002H1.16669L3.83335 10.6667L6.50002 8.00002H4.50002Z" />
-              </svg>
-            </a>
+            </Button>
           </div>
-          <Divider variant="secondary" className="my-4" />
-          <div className="mt-5 text-text-secondary text-sm flex items-center justify-center gap-5">
-            <span className="text-text-secondary text-sm">
+          <Divider />
+          <div className="mt-5 text-content-text-neutral-2 text-xs flex items-center justify-center gap-5">
+            <span className="text-content-text-neutral-2 text-xs">
               Remember your password?
             </span>
-            <a
-              href="#"
-              className="text-primary hover:text-primary-hover text-lg inline-flex items-center gap-2"
+            <Button
+              size="large"
+              variant="text"
+              startAdornment={
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="17"
+                  height="16"
+                  viewBox="0 0 17 16"
+                  fill="currentColor"
+                >
+                  <path d="M13.8334 7.33335H5.72002L9.44669 3.60669L8.50002 2.66669L3.16669 8.00002L8.50002 13.3334L9.44002 12.3934L5.72002 8.66669H13.8334V7.33335Z" />
+                </svg>
+              }
             >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="17"
-                height="16"
-                viewBox="0 0 17 16"
-                fill="currentColor"
-              >
-                <path d="M13.8334 7.33335H5.72002L9.44669 3.60669L8.50002 2.66669L3.16669 8.00002L8.50002 13.3334L9.44002 12.3934L5.72002 8.66669H13.8334V7.33335Z" />
-              </svg>{' '}
               Go Back
-            </a>
+            </Button>
           </div>
         </form>
       </Card>
@@ -1099,12 +1106,12 @@ export const MfaLogin = () => {
       <Card className="w-full p-[50px]">
         <Stack justifyContent="spaceBetween">
           <LogoIcon className="h-[30px] w-auto" />
-          <a href="#" className="text-lg text-primary font-semibold">
+          <Button size="large" variant="text">
             New to Reablocks?
-          </a>
+          </Button>
         </Stack>
         <div className="flex flex-col items-center justify-center pb-5 mt-[190px] text-center">
-          <div className="p-3 bg-primary rounded-sm mb-3">
+          <div className="p-3 bg-background-brand-base rounded-sm mb-3">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="16"
@@ -1115,10 +1122,10 @@ export const MfaLogin = () => {
               <path d="M3.49998 2C2.30665 2 1.33331 2.97333 1.33331 4.16667V7.83333C1.33331 9.02667 2.30665 10 3.49998 10H7.66665C7.81665 9.64 8.01324 9.30333 8.25323 9H3.49998C2.85665 9 2.33331 8.47667 2.33331 7.83333V4.16667C2.33331 3.52333 2.85665 3 3.49998 3H12.5C13.1433 3 13.6666 3.52333 13.6666 4.16667V7.82357C13.9966 7.99357 14.3035 8.20971 14.5768 8.45638C14.6335 8.25971 14.6666 8.05 14.6666 7.83333V4.16667C14.6666 2.97333 13.6933 2 12.5 2H3.49998ZM4.99998 5.33333C4.82317 5.33333 4.6536 5.40357 4.52858 5.5286C4.40355 5.65362 4.33331 5.82319 4.33331 6C4.33331 6.17681 4.40355 6.34638 4.52858 6.4714C4.6536 6.59643 4.82317 6.66667 4.99998 6.66667C5.17679 6.66667 5.34636 6.59643 5.47138 6.4714C5.59641 6.34638 5.66665 6.17681 5.66665 6C5.66665 5.82319 5.59641 5.65362 5.47138 5.5286C5.34636 5.40357 5.17679 5.33333 4.99998 5.33333ZM7.99998 5.33333C7.82317 5.33333 7.6536 5.40357 7.52858 5.5286C7.40355 5.65362 7.33331 5.82319 7.33331 6C7.33331 6.17681 7.40355 6.34638 7.52858 6.4714C7.6536 6.59643 7.82317 6.66667 7.99998 6.66667C8.17679 6.66667 8.34636 6.59643 8.47138 6.4714C8.59641 6.34638 8.66665 6.17681 8.66665 6C8.66665 5.82319 8.59641 5.65362 8.47138 5.5286C8.34636 5.40357 8.17679 5.33333 7.99998 5.33333ZM11 5.33333C10.8232 5.33333 10.6536 5.40357 10.5286 5.5286C10.4036 5.65362 10.3333 5.82319 10.3333 6C10.3333 6.17681 10.4036 6.34638 10.5286 6.4714C10.6536 6.59643 10.8232 6.66667 11 6.66667C11.1768 6.66667 11.3464 6.59643 11.4714 6.4714C11.5964 6.34638 11.6666 6.17681 11.6666 6C11.6666 5.82319 11.5964 5.65362 11.4714 5.5286C11.3464 5.40357 11.1768 5.33333 11 5.33333ZM11.6666 8C9.64165 8 7.99998 9.64167 7.99998 11.6667C7.99998 13.6917 9.64165 15.3333 11.6666 15.3333C13.6916 15.3333 15.3333 13.6917 15.3333 11.6667C15.3333 9.64167 13.6916 8 11.6666 8ZM11.6666 9.33333C12.308 9.33333 12.903 9.60163 13.3333 10.043V9.66667C13.3333 9.48267 13.4823 9.33333 13.6666 9.33333C13.851 9.33333 14 9.48267 14 9.66667V11C14 11.184 13.851 11.3333 13.6666 11.3333H12.3333C12.149 11.3333 12 11.184 12 11C12 10.816 12.149 10.6667 12.3333 10.6667H12.987C12.6786 10.2573 12.1963 10 11.6666 10C10.7476 10 9.99998 10.7477 9.99998 11.6667C9.99998 12.5857 10.7476 13.3333 11.6666 13.3333C12.37 13.3333 13.001 12.887 13.2363 12.2227C13.2976 12.049 13.4878 11.9579 13.6614 12.0195C13.8351 12.0812 13.9262 12.2713 13.8646 12.4447C13.5356 13.375 12.652 14 11.6666 14C10.3803 14 9.33331 12.9533 9.33331 11.6667C9.33331 10.38 10.3803 9.33333 11.6666 9.33333Z" />
             </svg>
           </div>
-          <h1 className="mt-2 mb-0 text-2xl font-sans font-bold">
+          <h1 className="mt-2 mb-0 text-xl font-sans font-bold">
             Enter your code
           </h1>
-          <div className="text-text-secondary text-base">
+          <div className="text-content-text-neutral-2 text-sm">
             We sent a code to{' '}
             <a href="#" className="text-primary">
               austin@goodcode.us
@@ -1145,32 +1152,35 @@ export const MfaLogin = () => {
               )}
             />
           </Block>
-          <Stack justifyContent="spaceBetween" className="mb-[190px]">
-            <div className="text-center text-text-secondary text-base">
-              Didn't receive a email?
+          <Stack justifyContent="spaceBetween" className="mt-2 mb-[190px]">
+            <div className="text-center text-content-text-neutral-2 text-sm">
+              Didn&apos;t receive a email?
             </div>
-            <a
-              href="#"
-              className="text-primary hover:text-primary-hover text-lg inline-flex items-center gap-2"
+            <Button
+              variant="text"
+              className="p-0"
+              endAdornment={
+                <svg
+                  width="17"
+                  height="16"
+                  viewBox="0 0 17 16"
+                  fill="currentColor"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path d="M13.1667 5.33335L10.5 8.00002H12.5C12.5 10.2067 10.7067 12 8.50002 12C7.82669 12 7.18669 11.8334 6.63335 11.5334L5.66002 12.5067C6.48002 13.0267 7.45335 13.3334 8.50002 13.3334C11.4467 13.3334 13.8334 10.9467 13.8334 8.00002H15.8334L13.1667 5.33335ZM4.50002 8.00002C4.50002 5.79335 6.29335 4.00002 8.50002 4.00002C9.17335 4.00002 9.81335 4.16669 10.3667 4.46669L11.34 3.49335C10.52 2.97335 9.54669 2.66669 8.50002 2.66669C5.55335 2.66669 3.16669 5.05335 3.16669 8.00002H1.16669L3.83335 10.6667L6.50002 8.00002H4.50002Z" />
+                </svg>
+              }
             >
               Click to resend
-              <svg
-                width="17"
-                height="16"
-                viewBox="0 0 17 16"
-                fill="currentColor"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path d="M13.1667 5.33335L10.5 8.00002H12.5C12.5 10.2067 10.7067 12 8.50002 12C7.82669 12 7.18669 11.8334 6.63335 11.5334L5.66002 12.5067C6.48002 13.0267 7.45335 13.3334 8.50002 13.3334C11.4467 13.3334 13.8334 10.9467 13.8334 8.00002H15.8334L13.1667 5.33335ZM4.50002 8.00002C4.50002 5.79335 6.29335 4.00002 8.50002 4.00002C9.17335 4.00002 9.81335 4.16669 10.3667 4.46669L11.34 3.49335C10.52 2.97335 9.54669 2.66669 8.50002 2.66669C5.55335 2.66669 3.16669 5.05335 3.16669 8.00002H1.16669L3.83335 10.6667L6.50002 8.00002H4.50002Z" />
-              </svg>
-            </a>
+            </Button>
           </Stack>
           <Button
+            size="large"
             type="submit"
             fullWidth
             variant="filled"
             color="primary"
-            className="mt-7 rounded-xs px-4 py-2 flex items-center gap-2 self-stretch text-lg! bg-(image:--button-gradient) hover:bg-(image:--button-gradient-hover) focus:bg-(image:--button-gradient-focus) dark:bg-transparent! light:bg-primary light:hover:bg-none light:hover:bg-primary-hover light:focus:bg-primary-hover focus:outline-hidden transition-colors"
+            className="mt-7"
             disabled={isSubmitting}
           >
             Continue
@@ -1205,10 +1215,10 @@ export const MfaAuthenticator = () => {
     >
       <Card className="w-full p-[50px]">
         <div className="flex flex-col pt-2 pb-5">
-          <h1 className="mb-0 text-2xl font-sans font-bold">
+          <h1 className="mb-0 text-xl font-sans font-bold">
             Set up your two-factor authentication.
           </h1>
-          <div className="text-text-secondary">
+          <div className="text-content-text-neutral-2">
             Scan this code with your Google authenticator app to continue this
             process.
           </div>
@@ -1226,7 +1236,7 @@ export const MfaAuthenticator = () => {
                 <div className="grid grid-cols-7 items-center gap-4 mt-2">
                   {['', '', '', '', '', ''].map((value, idx) => (
                     <React.Fragment key={idx}>
-                      {idx === 3 && <Divider variant="secondary" />}
+                      {idx === 3 && <Divider />}
                       <Input
                         {...rest}
                         disabled={isSubmitting}
@@ -1239,21 +1249,22 @@ export const MfaAuthenticator = () => {
               )}
             />
           </Block>
-          <div className="grid grid-cols-2 gap-4">
+          <div className="grid grid-cols-2 gap-4 mt-7">
             <Button
-              variant="outline"
-              className="mt-7 rounded-xs px-4 py-2 flex items-center gap-2 self-stretch text-lg! hover:border-secondary-hover focus:border-secondary-hover focus:outline-hidden transition-colors"
+              size="large"
+              variant="filled"
+              color="secondary"
               disabled={isSubmitting}
               fullWidth
             >
               Discard
             </Button>
             <Button
+              size="large"
               type="submit"
               fullWidth
               variant="filled"
               color="primary"
-              className="mt-7 rounded-xs px-4 py-2 flex items-center gap-2 self-stretch text-lg! bg-(image:--button-gradient) hover:bg-(image:--button-gradient-hover) focus:bg-(image:--button-gradient-focus) dark:bg-transparent! light:bg-primary light:hover:bg-none light:hover:bg-primary-hover light:focus:bg-primary-hover focus:outline-hidden transition-colors"
               disabled={isSubmitting}
             >
               {isSubmitting ? 'Confirming...' : 'Confirm'}
diff --git a/docs/blocks/authentication/Register.story.tsx b/docs/blocks/authentication/Register.story.tsx
index 6ecd338e4..7bef97612 100644
--- a/docs/blocks/authentication/Register.story.tsx
+++ b/docs/blocks/authentication/Register.story.tsx
@@ -1,15 +1,15 @@
-import React, { useState } from 'react';
 import { motion } from 'motion/react';
-import { useForm, Controller } from 'react-hook-form';
+import React, { useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
 
-import { Block } from '../../../src/layout/Block';
 import { Button } from '../../../src/elements/Button';
-import { Card } from '../../../src/layout/Card';
-import { Divider, Stack } from '../../../src/layout';
+import { Select, SelectOption } from '../../../src/form';
 import { Input } from '../../../src/form/Input';
-import { Radio, radioTheme } from '../../../src/form/Radio';
+import { Radio } from '../../../src/form/Radio';
+import { Divider, Stack } from '../../../src/layout';
+import { Block } from '../../../src/layout/Block';
+import { Card } from '../../../src/layout/Card';
 import { cn } from '../../../src/utils';
-import { Select, SelectOption } from '../../../src/form';
 
 export default {
   title: 'Blocks/Authentication/Register'
@@ -46,16 +46,6 @@ const LogoIcon = ({ className }: { className?: string }) => (
   </svg>
 );
 
-const RadioTheme = {
-  ...radioTheme,
-  base: 'box-border leading-3',
-  radio: {
-    ...radioTheme.radio,
-    base: 'will-change-[border-color] inline-flex justify-center items-center box-border align-middle rounded-full bg-transparent border light:border-charade cursor-pointer focus-visible:outline-hidden focus-visible:border-primary-hover',
-    checked: 'border-primary'
-  }
-};
-
 export const Register = () => {
   const {
     control,
@@ -74,17 +64,17 @@ export const Register = () => {
           <div>
             <LogoIcon className="h-11 mb-2 w-auto" />
           </div>
-          <h4 className="text-2xl font-sans font-bold mb-0">
+          <h4 className="text-xl font-sans font-bold mb-0">
             Welcome to Reablocks
           </h4>
-          <p className="text-base text-text-secondary font-sans">
-            Welcome! Let's get started by creating your account. Please provide
-            your email address and choose a secure password to begin accessing
-            our platform's features.
+          <p className="text-sm text-content-text-neutral-2 font-sans">
+            Welcome! Let&apos;s get started by creating your account. Please
+            provide your email address and choose a secure password to begin
+            accessing our platform&apos;s features.
           </p>
         </div>
         <form
-          className="text-sm"
+          className="text-xs flex flex-col gap-4"
           onSubmit={handleSubmit(values => console.log('values', values))}
         >
           <Block label="Name">
@@ -156,40 +146,32 @@ export const Register = () => {
             />
           </Block>
           <Button
+            size="large"
             type="submit"
             fullWidth
             variant="filled"
             color="primary"
-            className="mt-5 mb-2 flex items-center gap-2 self-stretch text-lg! bg-(image:--button-gradient) hover:bg-(image:--button-gradient-hover) focus:bg-(image:--button-gradient-focus) dark:bg-transparent! light:bg-primary light:hover:bg-none light:hover:bg-primary-hover light:focus:bg-primary-hover focus:outline-hidden transition-colors"
+            className="mt-5"
             disabled={isSubmitting}
           >
             {isSubmitting ? 'Signing up...' : 'Sign up →'}
           </Button>
-          <div className="mt-5 text-sm text-text-secondary flex items-center justify-center gap-2">
+          <div className="text-xs text-content-text-neutral-2 flex items-center justify-center gap-2">
             By signing in, you agree to our
-            <a
-              href="#"
-              className="text-primary hover:text-primary-hover text-lg"
-            >
+            <Button variant="text" className="p-0">
               terms of service
-            </a>
+            </Button>
             and
-            <a
-              href="#"
-              className="text-primary hover:text-primary-hover text-lg"
-            >
+            <Button variant="text" className="p-0">
               privacy policy
-            </a>
+            </Button>
           </div>
-          <Divider className="mt-5 mb-5" variant="secondary" />
-          <div className="mt-5 text-text-secondary text-sm flex items-center justify-center gap-2">
+          <Divider disableMargins />
+          <div className="text-content-text-neutral-2 text-xs flex items-center justify-center gap-2">
             Already have an account?
-            <a
-              href="#"
-              className="text-primary hover:text-primary-hover text-lg"
-            >
+            <Button size="large" variant="text">
               Sign in
-            </a>
+            </Button>
           </div>
         </form>
       </Card>
@@ -216,10 +198,10 @@ export const RegisterFull = () => {
           <div>
             <LogoIcon className="h-11 mb-2 w-auto" />
           </div>
-          <h4 className="text-2xl font-sans font-bold mb-0">
+          <h4 className="text-xl font-sans font-bold mb-0">
             Welcome to Reablocks
           </h4>
-          <p className="text-base text-text-secondary font-sans">
+          <p className="text-sm text-content-text-neutral-2 font-sans">
             Excited to have you onboard! Start by creating your account to gain
             access to our platform. Simply provide your email, choose a
             password, and include any necessary information about your company
@@ -228,7 +210,7 @@ export const RegisterFull = () => {
           <Divider variant="secondary" className="mt-4" />
         </div>
         <form
-          className="text-sm"
+          className="text-xs flex flex-col gap-4"
           onSubmit={handleSubmit(values => console.log('values', values))}
         >
           <div className="grid grid-cols-2 gap-4">
@@ -310,29 +292,23 @@ export const RegisterFull = () => {
               />
             </Block>
           </div>
-          <h6 className="text-lg font-bold mb-4">Select a package</h6>
+          <h6 className="text-base font-bold">Select a package</h6>
           <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
             <Card
-              className={cn(
-                'p-5 dark:bg-vulcan hover:cursor-pointer dark:hover:bg-charade light:hover:athens-gray light:hover:border-vulcan/40 transition-colors',
-                {
-                  'border-primary dark:bg-black dark:hover:bg-black light:bg-athens-gray light:hover:border-primary':
-                    selection === 'starter'
-                }
-              )}
+              className={cn('p-5', {
+                'bg-background-neutral-inverse-raised-2':
+                  selection === 'starter'
+              })}
               onClick={() => setSelection('starter')}
             >
               <Stack justifyContent="spaceBetween">
-                <h6 className="text-lg font-bold">Starter</h6>
-                <Radio
-                  size="small"
-                  checked={selection === 'starter'}
-                  theme={RadioTheme}
-                />
+                <h6 className="text-base font-bold">Starter</h6>
+                <Radio size="small" checked={selection === 'starter'} />
               </Stack>
               <Stack direction="column" alignItems="start" dense>
                 <Stack dense>
                   <svg
+                    className="text-content-text-neutral-2"
                     xmlns="http://www.w3.org/2000/svg"
                     width="16"
                     height="17"
@@ -341,12 +317,13 @@ export const RegisterFull = () => {
                   >
                     <path d="M5.86332 10.9166L3.08332 8.13661L2.13666 9.07661L5.86332 12.8033L13.8633 4.80328L12.9233 3.86328L5.86332 10.9166Z" />
                   </svg>
-                  <span className="dark:text-waterloo light:text-charade">
+                  <span className="text-content-text-neutral-2">
                     Community support
                   </span>
                 </Stack>
                 <Stack dense>
                   <svg
+                    className="text-content-text-neutral-2"
                     xmlns="http://www.w3.org/2000/svg"
                     width="16"
                     height="17"
@@ -355,12 +332,13 @@ export const RegisterFull = () => {
                   >
                     <path d="M5.86332 10.9166L3.08332 8.13661L2.13666 9.07661L5.86332 12.8033L13.8633 4.80328L12.9233 3.86328L5.86332 10.9166Z" />
                   </svg>
-                  <span className="dark:text-waterloo light:text-charade">
+                  <span className="text-content-text-neutral-2">
                     Integration support
                   </span>
                 </Stack>
                 <Stack dense>
                   <svg
+                    className="text-content-text-neutral-2"
                     xmlns="http://www.w3.org/2000/svg"
                     width="16"
                     height="17"
@@ -369,34 +347,28 @@ export const RegisterFull = () => {
                   >
                     <path d="M5.86332 10.9166L3.08332 8.13661L2.13666 9.07661L5.86332 12.8033L13.8633 4.80328L12.9233 3.86328L5.86332 10.9166Z" />
                   </svg>
-                  <span className="dark:text-waterloo light:text-charade">
+                  <span className="text-content-text-neutral-2">
                     Figmas support
                   </span>
                 </Stack>
-                <h6 className="text-lg font-bold mt-2.5">Free</h6>
+                <h6 className="text-base font-bold mt-2.5">Free</h6>
               </Stack>
             </Card>
             <Card
-              className={cn(
-                'p-5 dark:bg-vulcan hover:cursor-pointer dark:hover:bg-charade light:hover:athens-gray light:hover:border-vulcan/40 transition-colors',
-                {
-                  'border-primary dark:bg-black dark:hover:bg-black light:bg-athens-gray light:hover:border-primary':
-                    selection === 'premium'
-                }
-              )}
+              className={cn('p-5', {
+                'bg-background-neutral-inverse-raised-2':
+                  selection === 'premium'
+              })}
               onClick={() => setSelection('premium')}
             >
               <Stack justifyContent="spaceBetween">
-                <h6 className="text-lg font-bold">Premium</h6>
-                <Radio
-                  size="small"
-                  checked={selection === 'premium'}
-                  theme={RadioTheme}
-                />
+                <h6 className="text-base font-bold">Premium</h6>
+                <Radio size="small" checked={selection === 'premium'} />
               </Stack>
               <Stack direction="column" alignItems="start" dense>
                 <Stack dense>
                   <svg
+                    className="text-content-text-neutral-2"
                     xmlns="http://www.w3.org/2000/svg"
                     width="16"
                     height="17"
@@ -405,12 +377,13 @@ export const RegisterFull = () => {
                   >
                     <path d="M5.86332 10.9166L3.08332 8.13661L2.13666 9.07661L5.86332 12.8033L13.8633 4.80328L12.9233 3.86328L5.86332 10.9166Z" />
                   </svg>
-                  <span className="dark:text-waterloo light:text-charade">
+                  <span className="text-content-text-neutral-2">
                     Community support
                   </span>
                 </Stack>
                 <Stack dense>
                   <svg
+                    className="text-content-text-neutral-2"
                     xmlns="http://www.w3.org/2000/svg"
                     width="16"
                     height="17"
@@ -419,12 +392,13 @@ export const RegisterFull = () => {
                   >
                     <path d="M5.86332 10.9166L3.08332 8.13661L2.13666 9.07661L5.86332 12.8033L13.8633 4.80328L12.9233 3.86328L5.86332 10.9166Z" />
                   </svg>
-                  <span className="dark:text-waterloo light:text-charade">
+                  <span className="text-content-text-neutral-2">
                     Integration support
                   </span>
                 </Stack>
                 <Stack dense>
                   <svg
+                    className="text-content-text-neutral-2"
                     xmlns="http://www.w3.org/2000/svg"
                     width="16"
                     height="17"
@@ -433,34 +407,28 @@ export const RegisterFull = () => {
                   >
                     <path d="M5.86332 10.9166L3.08332 8.13661L2.13666 9.07661L5.86332 12.8033L13.8633 4.80328L12.9233 3.86328L5.86332 10.9166Z" />
                   </svg>
-                  <span className="dark:text-waterloo light:text-charade">
+                  <span className="text-content-text-neutral-2">
                     Figmas support
                   </span>
                 </Stack>
-                <h6 className="text-lg font-bold mt-2.5">$1000/Month</h6>
+                <h6 className="text-base font-bold mt-2.5">$1000/Month</h6>
               </Stack>
             </Card>
             <Card
-              className={cn(
-                'p-5 dark:bg-vulcan hover:cursor-pointer dark:hover:bg-charade light:hover:athens-gray light:hover:border-vulcan/40 transition-colors',
-                {
-                  'border-primary dark:bg-black dark:hover:bg-black light:bg-athens-gray light:hover:border-primary':
-                    selection === 'enterprise'
-                }
-              )}
+              className={cn('p-5', {
+                'bg-background-neutral-inverse-raised-2':
+                  selection === 'enterprise'
+              })}
               onClick={() => setSelection('enterprise')}
             >
               <Stack justifyContent="spaceBetween">
-                <h6 className="text-lg font-bold">Enterprise</h6>
-                <Radio
-                  size="small"
-                  checked={selection === 'enterprise'}
-                  theme={RadioTheme}
-                />
+                <h6 className="text-base font-bold">Enterprise</h6>
+                <Radio size="small" checked={selection === 'enterprise'} />
               </Stack>
               <Stack direction="column" alignItems="start" dense>
                 <Stack dense>
                   <svg
+                    className="text-content-text-neutral-2"
                     xmlns="http://www.w3.org/2000/svg"
                     width="16"
                     height="17"
@@ -469,12 +437,13 @@ export const RegisterFull = () => {
                   >
                     <path d="M5.86332 10.9166L3.08332 8.13661L2.13666 9.07661L5.86332 12.8033L13.8633 4.80328L12.9233 3.86328L5.86332 10.9166Z" />
                   </svg>
-                  <span className="dark:text-waterloo light:text-charade">
+                  <span className="text-content-text-neutral-2">
                     Community support
                   </span>
                 </Stack>
                 <Stack dense>
                   <svg
+                    className="text-content-text-neutral-2"
                     xmlns="http://www.w3.org/2000/svg"
                     width="16"
                     height="17"
@@ -483,12 +452,13 @@ export const RegisterFull = () => {
                   >
                     <path d="M5.86332 10.9166L3.08332 8.13661L2.13666 9.07661L5.86332 12.8033L13.8633 4.80328L12.9233 3.86328L5.86332 10.9166Z" />
                   </svg>
-                  <span className="dark:text-waterloo light:text-charade">
+                  <span className="text-content-text-neutral-2">
                     Integration support
                   </span>
                 </Stack>
                 <Stack dense>
                   <svg
+                    className="text-content-text-neutral-2"
                     xmlns="http://www.w3.org/2000/svg"
                     width="16"
                     height="17"
@@ -497,31 +467,28 @@ export const RegisterFull = () => {
                   >
                     <path d="M5.86332 10.9166L3.08332 8.13661L2.13666 9.07661L5.86332 12.8033L13.8633 4.80328L12.9233 3.86328L5.86332 10.9166Z" />
                   </svg>
-                  <span className="dark:text-waterloo light:text-charade">
+                  <span className="text-content-text-neutral-2">
                     Figmas support
                   </span>
                 </Stack>
-                <h6 className="text-lg font-bold mt-2.5">Email for Price</h6>
+                <h6 className="text-base font-bold mt-2.5">Email for Price</h6>
               </Stack>
             </Card>
           </div>
           <Divider variant="secondary" className="mt-4" />
           <div className="flex flex-col items-center justify-between md:flex-row">
-            <div className="text-text-secondary text-sm flex items-center justify-center gap-2">
+            <div className="text-content-text-neutral-2 text-xs flex items-center justify-center gap-2">
               Already have an account?
-              <a
-                href="#"
-                className="text-primary hover:text-primary-hover text-lg"
-              >
+              <Button variant="text" size="large">
                 Sign in
-              </a>
+              </Button>
             </div>
             <div>
               <Button
+                size="large"
                 type="submit"
                 variant="filled"
                 color="primary"
-                className="mt-5 mb-2 px-4 py-2 flex items-center gap-2 self-stretch text-lg! bg-(image:--button-gradient) hover:bg-(image:--button-gradient-hover) focus:bg-(image:--button-gradient-focus) dark:bg-transparent! light:bg-primary light:hover:bg-none light:hover:bg-primary-hover light:focus:bg-primary-hover focus:outline-hidden transition-colors"
                 disabled={isSubmitting}
               >
                 {isSubmitting ? 'Creating...' : 'Create Account →'}
@@ -550,17 +517,17 @@ export const RegisterV2 = () => {
       <Card className="w-full p-12">
         <div className="flex flex-col items-center justify-center pt-2 mb-5">
           <LogoIcon className="h-11 w-auto mb-2" />
-          <h4 className="text-2xl font-sans font-bold mb-0 text-center">
+          <h4 className="text-xl font-sans font-bold mb-0 text-center">
             Welcome to Reablocks
           </h4>
-          <p className="text-base text-text-secondary font-sans text-center">
-            Welcome! Let's get started by creating your account. Please provide
-            your email address and choose a secure password to begin accessing
-            our platform's features.
+          <p className="text-sm text-content-text-neutral-2 font-sans text-center">
+            Welcome! Let&apos;s get started by creating your account. Please
+            provide your email address and choose a secure password to begin
+            accessing our platform&apos;s features.
           </p>
         </div>
         <form
-          className="text-sm"
+          className="text-xs flex flex-col gap-4"
           onSubmit={handleSubmit(values => console.log('values', values))}
         >
           <div className="grid grid-cols-2 gap-2.5">
@@ -653,40 +620,31 @@ export const RegisterV2 = () => {
             />
           </Block>
           <Button
+            size="large"
             type="submit"
             fullWidth
             variant="filled"
             color="primary"
-            className="mt-5 mb-2 flex items-center gap-2 self-stretch text-lg! bg-(image:--button-gradient) hover:bg-(image:--button-gradient-hover) focus:bg-(image:--button-gradient-focus) dark:bg-transparent! light:bg-primary light:hover:bg-none light:hover:bg-primary-hover light:focus:bg-primary-hover focus:outline-hidden transition-colors"
             disabled={isSubmitting}
           >
             {isSubmitting ? 'Creating...' : 'Create Account →'}
           </Button>
-          <div className="mt-5 text-sm text-text-secondary flex items-center justify-center gap-2">
+          <div className="text-xs text-content-text-neutral-2 flex items-center justify-center gap-2">
             By signing in, you agree to our
-            <a
-              href="#"
-              className="text-primary hover:text-primary-hover text-lg"
-            >
+            <Button variant="text" className="p-0">
               terms of service
-            </a>
+            </Button>
             and
-            <a
-              href="#"
-              className="text-primary hover:text-primary-hover text-lg"
-            >
+            <Button variant="text" className="p-0">
               privacy policy
-            </a>
+            </Button>
           </div>
-          <Divider className="mt-5 mb-5" variant="secondary" />
-          <div className="mt-5 text-text-secondary text-sm flex items-center justify-center gap-2">
+          <Divider />
+          <div className="text-content-text-neutral-2 text-xs flex items-center justify-center gap-2">
             Already have an account?
-            <a
-              href="#"
-              className="text-primary hover:text-primary-hover text-lg"
-            >
+            <Button variant="text" size="large">
               Sign in
-            </a>
+            </Button>
           </div>
         </form>
       </Card>
@@ -711,7 +669,7 @@ export const RegisterWithSocial = () => {
       <Card className="w-full p-12">
         <div className="flex flex-col items-center justify-center pt-2">
           <LogoIcon className="h-11 w-auto mb-2" />
-          <h4 className="text-2xl font-sans font-bold mb-0 text-center">
+          <h4 className="text-xl font-sans font-bold mb-0 text-center">
             Welcome to Reablocks
           </h4>
           <div className="grid grid-cols-2 w-full gap-4 mt-5">
@@ -739,13 +697,13 @@ export const RegisterWithSocial = () => {
             </Button>
           </div>
           <Stack className="w-full my-7">
-            <Divider variant="secondary" />
+            <Divider />
             or
-            <Divider variant="secondary" />
+            <Divider />
           </Stack>
         </div>
         <form
-          className="text-sm"
+          className="text-xs"
           onSubmit={handleSubmit(values => console.log('values', values))}
         >
           <Block className="mb-7">
@@ -834,48 +792,35 @@ export const RegisterWithSocial = () => {
             />
           </Block>
           <div className="text-right">
-            <a
-              href="#"
-              className="text-primary hover:text-primary-hover text-lg"
-            >
-              Forgot Password?
-            </a>
+            <Button variant="text">Forgot Password?</Button>
           </div>
           <Button
+            size="large"
             type="submit"
             fullWidth
             variant="filled"
             color="primary"
-            className="mt-7 mb-2 flex items-center gap-2 self-stretch text-lg! bg-(image:--button-gradient) hover:bg-(image:--button-gradient-hover) focus:bg-(image:--button-gradient-focus) dark:bg-transparent! light:bg-primary light:hover:bg-none light:hover:bg-primary-hover light:focus:bg-primary-hover focus:outline-hidden transition-colors"
+            className="mt-7"
             disabled={isSubmitting}
           >
             {isSubmitting ? 'Signing up...' : 'Sign up →'}
           </Button>
-          <div className="mt-5 text-sm text-text-secondary flex items-center justify-center gap-2">
+          <div className="mt-5 text-xs text-content-text-neutral-2 flex items-center justify-center gap-2">
             By signing in, you agree to our
-            <a
-              href="#"
-              className="text-primary hover:text-primary-hover text-lg"
-            >
+            <Button variant="text" className="p-0">
               terms of service
-            </a>
+            </Button>
             and
-            <a
-              href="#"
-              className="text-primary hover:text-primary-hover text-lg"
-            >
+            <Button variant="text" className="p-0">
               privacy policy
-            </a>
+            </Button>
           </div>
-          <Divider className="mt-5 mb-5" variant="secondary" />
-          <div className="mt-5 text-text-secondary text-sm flex items-center justify-center gap-2">
+          <Divider className="mt-5" />
+          <div className="text-content-text-neutral-2 text-xs flex items-center justify-center gap-2">
             Already have an account?
-            <a
-              href="#"
-              className="text-primary hover:text-primary-hover text-lg"
-            >
+            <Button variant="text" size="large">
               Sign in
-            </a>
+            </Button>
           </div>
         </form>
       </Card>
diff --git a/docs/blocks/foundation/EmptyState.story.tsx b/docs/blocks/foundation/EmptyState.story.tsx
index f8c0b4431..ce7589343 100644
--- a/docs/blocks/foundation/EmptyState.story.tsx
+++ b/docs/blocks/foundation/EmptyState.story.tsx
@@ -1,8 +1,9 @@
-import React from 'react';
 import { motion } from 'motion/react';
-import { Card, Divider } from '../../../src/layout';
+import React from 'react';
+
 import { Button } from '../../../src/elements/Button';
 import { Input } from '../../../src/form/Input';
+import { Card } from '../../../src/layout';
 
 export default {
   title: 'Blocks/Foundation/Empty State'
@@ -16,17 +17,18 @@ export const NoResults = () => (
   >
     <Card className="w-full px-12 md:px-24 py-12">
       <div className="w-full flex-col flex items-center text-center mb-8">
-        <span className="text-3xl font-bold">No Results Found</span>
-        <span className="text-text-secondary text-base">
+        <span className="text-2xl font-bold">No Results Found</span>
+        <span className="text-content-text-neutral-2 text-sm">
           There are no results matching your search criteria. Try adjusting your
-          filters or search terms to find what you're looking for.
+          filters or search terms to find what you&apos;re looking for.
         </span>
       </div>
       <motion.div
+        className="transition-colors p-6 rounded-md hover:bg-background-brand-4 border border-transparent hover:border-stroke-brand-base"
         initial={{ y: -20, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
       >
-        <a className="flex gap-4 py-4 cursor-pointer hover:underline">
+        <a className="flex gap-4 cursor-pointer">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="20"
@@ -39,7 +41,7 @@ export const NoResults = () => (
           <div className="flex flex-col gap-1 flex-1">
             <span className="font-bold">Documentation</span>
             <div>
-              <span className="text-base text-text-secondary inline-block">
+              <span className="text-sm text-content-text-neutral-2 inline-block">
                 Learn how to integrate our tools with your app.
               </span>
             </div>
@@ -55,14 +57,14 @@ export const NoResults = () => (
             <path d="M9.70504 6L8.29504 7.41L12.875 12L8.29504 16.59L9.70504 18L15.705 12L9.70504 6Z" />
           </svg>
         </a>
-        <Divider variant="secondary" />
       </motion.div>
       <motion.div
+        className="transition-colors p-6 rounded-md hover:bg-background-brand-4 border border-transparent hover:border-stroke-brand-base"
         initial={{ y: -20, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
         transition={{ delay: 0.1 }}
       >
-        <a className="flex gap-4 py-4 cursor-pointer hover:underline">
+        <a className="flex gap-4 cursor-pointer">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="20"
@@ -73,9 +75,9 @@ export const NoResults = () => (
             <path d="M4.6875 3.4375C3.65344 3.4375 2.8125 4.27844 2.8125 5.3125V14.6875C2.8125 15.7216 3.65344 16.5625 4.6875 16.5625H15.3125C16.3466 16.5625 17.1875 15.7216 17.1875 14.6875V5.3125C17.1875 4.27844 16.3466 3.4375 15.3125 3.4375H4.6875ZM4.0625 7.1875H15.9375V14.6875C15.9375 15.0322 15.6572 15.3125 15.3125 15.3125H4.6875C4.34281 15.3125 4.0625 15.0322 4.0625 14.6875V7.1875ZM6.875 9.0625C6.52969 9.0625 6.25 9.34219 6.25 9.6875C6.25 10.0328 6.52969 10.3125 6.875 10.3125C7.22031 10.3125 7.5 10.0328 7.5 9.6875C7.5 9.34219 7.22031 9.0625 6.875 9.0625ZM9.6875 9.0625C9.3425 9.0625 9.0625 9.3425 9.0625 9.6875C9.0625 10.0325 9.3425 10.3125 9.6875 10.3125H13.125C13.47 10.3125 13.75 10.0325 13.75 9.6875C13.75 9.3425 13.47 9.0625 13.125 9.0625H9.6875ZM6.875 11.875C6.52969 11.875 6.25 12.1547 6.25 12.5C6.25 12.8453 6.52969 13.125 6.875 13.125C7.22031 13.125 7.5 12.8453 7.5 12.5C7.5 12.1547 7.22031 11.875 6.875 11.875ZM9.6875 11.875C9.3425 11.875 9.0625 12.155 9.0625 12.5C9.0625 12.845 9.3425 13.125 9.6875 13.125H13.125C13.47 13.125 13.75 12.845 13.75 12.5C13.75 12.155 13.47 11.875 13.125 11.875H9.6875Z" />
           </svg>
           <div className="flex flex-col gap-1 flex-1">
-            <span className="font-bold">API's</span>
+            <span className="font-bold">API&apos;s</span>
             <div className="">
-              <span className="text-base text-text-secondary inline-block">
+              <span className="text-sm text-content-text-neutral-2 inline-block">
                 Explore all API references.
               </span>
             </div>
@@ -91,14 +93,14 @@ export const NoResults = () => (
             <path d="M9.70504 6L8.29504 7.41L12.875 12L8.29504 16.59L9.70504 18L15.705 12L9.70504 6Z" />
           </svg>
         </a>
-        <Divider variant="secondary" />
       </motion.div>
       <motion.div
+        className="transition-colors p-6 rounded-md hover:bg-background-brand-4 border border-transparent hover:border-stroke-brand-base"
         initial={{ y: -20, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
         transition={{ delay: 0.2 }}
       >
-        <a className="flex gap-4 py-4 cursor-pointer hover:underline">
+        <a className="flex gap-4 cursor-pointer">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="18"
@@ -111,7 +113,7 @@ export const NoResults = () => (
           <div className="flex flex-col gap-1 flex-1">
             <span className="font-bold">Guide</span>
             <div className="">
-              <span className="text-base text-text-secondary inline-block">
+              <span className="text-sm text-content-text-neutral-2 inline-block">
                 Easy-to-follow installation guides.
               </span>
             </div>
@@ -127,14 +129,14 @@ export const NoResults = () => (
             <path d="M9.70504 6L8.29504 7.41L12.875 12L8.29504 16.59L9.70504 18L15.705 12L9.70504 6Z" />
           </svg>
         </a>
-        <Divider variant="secondary" />
       </motion.div>
       <motion.div
+        className="transition-colors p-6 rounded-md hover:bg-background-brand-4 border border-transparent hover:border-stroke-brand-base"
         initial={{ y: -20, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
         transition={{ delay: 0.3 }}
       >
-        <a className="flex gap-4 py-4 cursor-pointer hover:underline">
+        <a className="flex gap-4 cursor-pointer">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="20"
@@ -147,7 +149,7 @@ export const NoResults = () => (
           <div className="flex flex-col gap-1 flex-1">
             <span className="font-bold">Blog</span>
             <div className="">
-              <span className="text-base text-text-secondary inline-block">
+              <span className="text-sm text-content-text-neutral-2 inline-block">
                 Read our latest news.
               </span>
             </div>
@@ -178,8 +180,8 @@ export const MissingInfo = () => (
       className="w-full px-12 md:px-24 py-12 md:py-28"
       contentClassName="flex flex-col gap-2 items-center text-center"
     >
-      <span className="text-3xl font-bold">Missing Info</span>
-      <span className="text-text-secondary text-base">
+      <span className="text-2xl font-bold">Missing Info</span>
+      <span className="text-content-text-neutral-2 text-sm">
         Oops! It seems like something is missing. Try adjusting your search
         criteria or check back later.
       </span>
@@ -200,7 +202,8 @@ export const MissingInfo = () => (
         placeholder="Search our site..."
       />
       <Button
-        className="mt-6 w-fit font-semibold px-4 py-2 border-none bg-(image:--button-gradient) hover:bg-(image:--button-gradient-hover) focus:bg-(image:--button-gradient-focus) dark:bg-transparent! light:bg-primary light:hover:bg-none light:hover:bg-primary-hover light:focus:bg-primary-hover focus:outline-hidden transition-colors"
+        size="large"
+        className="mt-6 w-fit"
         startAdornment={
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -241,13 +244,14 @@ export const NothingToDisplay = () => (
       >
         <path d="M19.4533 10.6666L16 14.12L12.5466 10.6666L10.6666 12.5466L14.12 16L10.6666 19.4533L12.5466 21.3333L16 17.88L19.4533 21.3333L21.3333 19.4533L17.88 16L21.3333 12.5466L19.4533 10.6666ZM16 2.66663C8.62663 2.66663 2.66663 8.62663 2.66663 16C2.66663 23.3733 8.62663 29.3333 16 29.3333C23.3733 29.3333 29.3333 23.3733 29.3333 16C29.3333 8.62663 23.3733 2.66663 16 2.66663ZM16 26.6666C10.12 26.6666 5.33329 21.88 5.33329 16C5.33329 10.12 10.12 5.33329 16 5.33329C21.88 5.33329 26.6666 10.12 26.6666 16C26.6666 21.88 21.88 26.6666 16 26.6666Z" />
       </svg>
-      <span className="text-xl font-bold">Nothing to display</span>
-      <span className="text-text-secondary text-base">
-        We couldn't find any data to show here. Try refining your search or come
-        back later to see if there's anything new.
+      <span className="text-lg font-bold">Nothing to display</span>
+      <span className="text-content-text-neutral-2 text-sm">
+        We couldn&apos;t find any data to show here. Try refining your search or
+        come back later to see if there&apos;s anything new.
       </span>
       <Button
-        className="mt-6 w-fit font-semibold px-4 py-2 border-none bg-(image:--button-gradient) hover:bg-(image:--button-gradient-hover) focus:bg-(image:--button-gradient-focus) dark:bg-transparent! light:bg-primary light:hover:bg-none light:hover:bg-primary-hover light:focus:bg-primary-hover focus:outline-hidden transition-colors"
+        size="large"
+        className="mt-6 w-fit"
         startAdornment={
           <svg
             xmlns="http://www.w3.org/2000/svg"
diff --git a/docs/blocks/foundation/NotFound.story.tsx b/docs/blocks/foundation/NotFound.story.tsx
index 094f4ae9a..c89ed9219 100644
--- a/docs/blocks/foundation/NotFound.story.tsx
+++ b/docs/blocks/foundation/NotFound.story.tsx
@@ -1,21 +1,16 @@
 import React from 'react';
-import {
-  Card,
-  Divider,
-  MotionGroup,
-  MotionItem,
-  Stack
-} from '../../../src/layout';
+
 import { Button } from '../../../src/elements/Button';
-import { Input } from '../../../src/form/Input';
-import { PageTitle } from '../../../src/typography';
 import { Chip } from '../../../src/elements/Chip';
+import { Input } from '../../../src/form/Input';
+import { Card, MotionGroup, MotionItem, Stack } from '../../../src/layout';
+import { Typography } from '../../../src/typography';
 
 export default {
   title: 'Blocks/Foundation/Not Found'
 };
 
-const GridPatternIcon = ({ className }) => (
+const GridPatternIcon = ({ className }: { className?: string }) => (
   <svg
     width="1349"
     height="959"
@@ -832,18 +827,18 @@ const GridPatternIcon = ({ className }) => (
 );
 
 export const NotFound = () => (
-  <div className="flex flex-row justify-center w-full md:min-w-[960px] min-h-[600px] relative dark:bg-black-pearl p-6">
+  <div className="flex flex-row justify-center w-full md:min-w-[960px] min-h-[600px] relative p-6">
     <div className="text-center">
-      <div className="absolute top-0 left-0 z-0 w-full leading-[600px] text-center text-transparent bg-clip-text text-[400px] opacity-30 bg-linear-to-r from-waterloo to-charade font-bold">
+      <div className="absolute top-0 left-0 z-0 w-full leading-[600px] text-center bg-clip-text text-[400px] opacity-10 font-bold">
         404
       </div>
       <div className="absolute top-0 left-0 w-full h-full dark:bg-[radial-gradient(circle,rgba(36,36,66,0.3)_2%,rgba(2,2,15,1)_80%)] light:bg-[radial-gradient(circle,rgba(224,224,232,0.3)_2%,rgba(247,247,250,1)_80%)]" />
       <div className="flex flex-col gap-3 h-full justify-center">
         <div className="grow" />
-        <div className="text-text-primary z-10 relative font-bold text-5xl!">
+        <div className="text-content-text-neutral-base z-10 relative font-bold text-4xl!">
           We lost this page
         </div>
-        <div className="dark:text-waterloo light:text-charade opacity-80 z-10 relative">
+        <div className="text-content-text-neutral-2 opacity-80 z-10 relative">
           The page you are looking for doesnt exist or has been moved.
         </div>
         <Input
@@ -857,7 +852,7 @@ export const NotFound = () => (
               height="16"
               fill="none"
             >
-              <g clip-path="url(#a)">
+              <g clipPath="url(#a)">
                 <path
                   fill="#242433"
                   d="M10.503 9.503h-.526l-.187-.18a4.314 4.314 0 0 0 1.047-2.82 4.333 4.333 0 1 0-4.334 4.334c1.074 0 2.06-.394 2.82-1.047l.18.187v.526l3.334 3.327.993-.993-3.327-3.334Zm-4 0c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3Z"
@@ -872,10 +867,7 @@ export const NotFound = () => (
           }
         />
         <div className="grow flex flex-col justify-center">
-          <Button
-            color="primary"
-            className="z-10 mx-auto relative rounded-xs px-4 py-2 flex items-center gap-2 self-stretch text-lg! bg-(image:--button-gradient) hover:bg-(image:--button-gradient-hover) focus:bg-(image:--button-gradient-focus) dark:bg-transparent! light:bg-primary light:hover:bg-none light:hover:bg-primary-hover light:focus:bg-primary-hover focus:outline-hidden transition-colors font-semibold"
-          >
+          <Button size="large" className="z-10 mx-auto relative">
             ← Back to Home
           </Button>
         </div>
@@ -885,9 +877,8 @@ export const NotFound = () => (
 );
 
 export const DoesNotExist = () => (
-  <div className="w-full dark:bg-black-pearl md:min-w-[960px] p-6 pt-0">
+  <div className="w-full bg-background-neutral-inverse-raised-2 md:min-w-[960px] p-6 pt-0">
     <MotionGroup className="bg-[radial-gradient(50%_6.33%_at_50%_0%,rgba(16,94,255,0.71)_0%,rgba(248,248,251,0)_85.19%)] pb-[50px]">
-      <Divider variant="secondary" />
       <MotionItem className="flex flex-col items-center p-12">
         <svg
           className="mb-14"
@@ -940,7 +931,8 @@ export const DoesNotExist = () => (
         </svg>
         <Chip
           color="primary"
-          className="rounded-full px-3 dark:text-athens-gray light:text-charade dark:bg-blue-950 light:bg-blue-100 gap-1"
+          variant="outline"
+          size="large"
           start={
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -958,17 +950,21 @@ export const DoesNotExist = () => (
         >
           404
         </Chip>
-        <PageTitle className="font-bold my-3 dark:text-athens-gray">
+        <Typography
+          variant="h1"
+          weight="bold"
+          color="secondary"
+          className="my-3"
+        >
           This page does not exist
-        </PageTitle>
-        <span className="dark:text-waterloo light:text-charade">
-          Sorry, we couldn't find the page you're looking for.
+        </Typography>
+        <span className="text-content-text-neutral-2">
+          Sorry, we couldn&apos;t find the page you&apos;re looking for.
         </span>
       </MotionItem>
       <div className="flex flex-col items-center w-full md:w-[600px] pb-[50px] m-auto">
-        <MotionItem className="flex gap-2.5 w-full p-6 border border-transparent dark:hover:[border-image:linear-gradient(to_top_left,#242433,#02020F)_10] light:hover:[border-image:linear-gradient(to_top_left,#E6E6F0,#FFFFFF)_10] hover:cursor-pointer transition-colors rounded-sm group/item">
+        <MotionItem className="flex gap-2.5 w-full p-6 hover:bg-background-brand-4 border border-transparent hover:border-stroke-brand-base hover:cursor-pointer transition-colors rounded-sm group/item">
           <svg
-            className="group-hover/item:fill-primary-active dark:fill-mystic transition-colors"
             xmlns="http://www.w3.org/2000/svg"
             width="20"
             height="20"
@@ -979,13 +975,12 @@ export const DoesNotExist = () => (
           </svg>
           <Stack direction="column" alignItems="start" dense>
             <span className="font-bold">Documentation</span>
-            <span className="dark:text-waterloo light:text-charade">
+            <span className="text-content-text-neutral-2">
               Learn how to integrate our tools with your app.
             </span>
           </Stack>
           <div className="grow self-center flex justify-end">
             <svg
-              className="dark:fill-mystic"
               xmlns="http://www.w3.org/2000/svg"
               width="24"
               height="24"
@@ -996,12 +991,8 @@ export const DoesNotExist = () => (
             </svg>
           </div>
         </MotionItem>
-        <MotionItem className="w-full">
-          <Divider variant="secondary" disableMargins />
-        </MotionItem>
-        <MotionItem className="flex gap-2.5 w-full p-6 border border-transparent dark:hover:[border-image:linear-gradient(to_top_left,#242433,#02020F)_10] light:hover:[border-image:linear-gradient(to_top_left,#E6E6F0,#FFFFFF)_10] hover:cursor-pointer transition-colors rounded-sm group/item">
+        <MotionItem className="flex gap-2.5 w-full p-6 hover:bg-background-brand-4 border border-transparent hover:border-stroke-brand-base hover:cursor-pointer transition-colors rounded-sm group/item">
           <svg
-            className="group-hover/item:fill-primary-active dark:fill-mystic transition-colors"
             xmlns="http://www.w3.org/2000/svg"
             width="20"
             height="20"
@@ -1012,13 +1003,12 @@ export const DoesNotExist = () => (
           </svg>
           <Stack direction="column" alignItems="start" dense>
             <span className="font-bold">APIs</span>
-            <span className="dark:text-waterloo light:text-charade">
+            <span className="text-content-text-neutral-2">
               Explore all API references
             </span>
           </Stack>
           <div className="grow self-center flex justify-end">
             <svg
-              className="dark:fill-mystic"
               xmlns="http://www.w3.org/2000/svg"
               width="24"
               height="24"
@@ -1029,12 +1019,8 @@ export const DoesNotExist = () => (
             </svg>
           </div>
         </MotionItem>
-        <MotionItem className="w-full">
-          <Divider variant="secondary" disableMargins />
-        </MotionItem>
-        <MotionItem className="flex gap-2.5 w-full p-6 border border-transparent dark:hover:[border-image:linear-gradient(to_top_left,#242433,#02020F)_10] light:hover:[border-image:linear-gradient(to_top_left,#E6E6F0,#FFFFFF)_10] hover:cursor-pointer transition-colors rounded-sm group/item">
+        <MotionItem className="flex gap-2.5 w-full p-6 hover:bg-background-brand-4 border border-transparent hover:border-stroke-brand-base hover:cursor-pointer transition-colors rounded-sm group/item">
           <svg
-            className="group-hover/item:fill-primary-active dark:fill-mystic transition-colors"
             xmlns="http://www.w3.org/2000/svg"
             width="20"
             height="20"
@@ -1045,13 +1031,12 @@ export const DoesNotExist = () => (
           </svg>
           <Stack direction="column" alignItems="start" dense>
             <span className="font-bold">Guide</span>
-            <span className="dark:text-waterloo light:text-charade">
+            <span className="text-content-text-neutral-2">
               Easy-to-follow installation guides.
             </span>
           </Stack>
           <div className="grow self-center flex justify-end">
             <svg
-              className="dark:fill-mystic"
               xmlns="http://www.w3.org/2000/svg"
               width="24"
               height="24"
@@ -1062,12 +1047,8 @@ export const DoesNotExist = () => (
             </svg>
           </div>
         </MotionItem>
-        <MotionItem className="w-full">
-          <Divider variant="secondary" disableMargins />
-        </MotionItem>
-        <MotionItem className="flex gap-2.5 w-full p-6 border border-transparent dark:hover:[border-image:linear-gradient(to_top_left,#242433,#02020F)_10] light:hover:[border-image:linear-gradient(to_top_left,#E6E6F0,#FFFFFF)_10] hover:cursor-pointer transition-colors rounded-sm group/item">
+        <MotionItem className="flex gap-2.5 w-full p-6 hover:bg-background-brand-4 border border-transparent hover:border-stroke-brand-base hover:cursor-pointer transition-colors rounded-sm group/item">
           <svg
-            className="group-hover/item:fill-primary-active dark:fill-mystic transition-colors"
             xmlns="http://www.w3.org/2000/svg"
             width="20"
             height="20"
@@ -1078,13 +1059,12 @@ export const DoesNotExist = () => (
           </svg>
           <Stack direction="column" alignItems="start" dense>
             <span className="font-bold">Blog</span>
-            <span className="dark:text-waterloo light:text-charade">
+            <span className="text-content-text-neutral-2">
               Read our latest news.
             </span>
           </Stack>
           <div className="grow self-center flex justify-end">
             <svg
-              className="dark:fill-mystic"
               xmlns="http://www.w3.org/2000/svg"
               width="24"
               height="24"
@@ -1096,11 +1076,8 @@ export const DoesNotExist = () => (
           </div>
         </MotionItem>
       </div>
-      <MotionItem>
-        <Button
-          color="primary"
-          className="z-10 mx-auto relative rounded-xs px-4 py-2 flex items-center gap-2 self-stretch text-lg! bg-(image:--button-gradient) hover:bg-(image:--button-gradient-hover) focus:bg-(image:--button-gradient-focus) dark:bg-transparent! light:bg-primary light:hover:bg-none light:hover:bg-primary-hover light:focus:bg-primary-hover focus:outline-hidden transition-colors font-semibold"
-        >
+      <MotionItem className="flex flex-col items-center">
+        <Button size="large" color="primary" className="z-10 mx-auto relative">
           ← Back to Home
         </Button>
       </MotionItem>
@@ -1109,36 +1086,29 @@ export const DoesNotExist = () => (
 );
 
 export const LostPage = () => (
-  <div className="flex flex-row justify-center w-full md:min-w-[960px] p-6 min-h-[800px] relative dark:bg-black-pearl">
+  <div className="flex flex-row justify-center w-full md:min-w-[960px] p-6 min-h-[800px] relative bg-background-neutral-inverse-raised-2">
     <div className="text-center w-full">
       <GridPatternIcon className="absolute top-0" />
-      <div className="flex flex-col gap-3 w-full h-full justify-center">
+      <div className="flex flex-col gap-3 w-full h-full justify-center items-center">
         <div>
-          <Chip
-            color="primary"
-            className="rounded-full px-3 dark:text-athens-gray light:text-charade dark:bg-blue-950 light:bg-blue-100 gap-1"
-          >
+          <Chip size="large" variant="outline" color="primary">
             404 Error
           </Chip>
         </div>
-        <div className="text-text-primary z-10 relative font-bold text-5xl!">
+        <div className="text-content-text-neutral-base z-10 relative font-bold text-4xl!">
           We lost this page
         </div>
-        <div className="dark:text-waterloo light:text-charade opacity-80 z-10 relative">
-          Let's find a better place for you to go.
+        <div className="text-content-text-neutral-2 opacity-80 z-10 relative">
+          Let&apos;s find a better place for you to go.
         </div>
-        <Button
-          color="primary"
-          className="z-10 mx-auto relative rounded-xs px-4 py-2 flex items-center gap-2 self-stretch text-lg! bg-(image:--button-gradient) hover:bg-(image:--button-gradient-hover) focus:bg-(image:--button-gradient-focus) dark:bg-transparent! light:bg-primary light:hover:bg-none light:hover:bg-primary-hover light:focus:bg-primary-hover focus:outline-hidden transition-colors font-semibold"
-        >
+        <Button size="large" color="primary" className="width-fit">
           ← Back to Home
         </Button>
         <MotionGroup className="mt-12 md:mt-[200px] w-full grid md:grid-cols-3 grid-cols-1 px-10">
           <MotionItem className="group/item">
-            <Card className="relative text-left border-transparent dark:group-hover/item:border-charade light:group-hover/item:border-mystic transition-colors">
+            <Card className="p-7 bg-transparent border-transparent hover:bg-background-brand-4 hover:border-stroke-brand-base transition-colors">
               <div className="flex flex-col gap-6 items-start">
                 <svg
-                  className="fill:secondary-hover group-hover/item:fill-primary transition-colors"
                   xmlns="http://www.w3.org/2000/svg"
                   width="20"
                   height="20"
@@ -1147,40 +1117,37 @@ export const LostPage = () => (
                 >
                   <path d="M8.34239 2.5C7.17168 2.5 6.22283 3.44886 6.22283 4.61957V5.67935H5.86957C4.69886 5.67935 3.75 6.62821 3.75 7.79891V16.6304C3.75 17.8011 4.69886 18.75 5.86957 18.75H11.875C13.0457 18.75 13.9946 17.8011 13.9946 16.6304V16.2772H15.0543C16.2251 16.2772 17.1739 15.3283 17.1739 14.1576V8.05834C17.1739 7.4963 16.9504 6.95751 16.5529 6.55974L13.1142 3.12097C12.7164 2.72355 12.1776 2.5 11.6156 2.5H8.34239ZM8.34239 3.91304H10.8152V6.73913C10.8152 7.90984 11.7641 8.8587 12.9348 8.8587H15.7609V14.1576C15.7609 14.548 15.4447 14.8641 15.0543 14.8641H8.34239C7.95204 14.8641 7.63587 14.548 7.63587 14.1576V4.61957C7.63587 4.22921 7.95204 3.91304 8.34239 3.91304ZM12.2283 4.23319L15.44 7.44565H12.9348C12.5444 7.44565 12.2283 7.12948 12.2283 6.73913V4.23319ZM5.86957 7.09239H6.22283V14.5109C6.22283 15.4862 7.01378 16.2772 7.98913 16.2772H12.5815V16.6304C12.5815 17.0208 12.2654 17.337 11.875 17.337H5.86957C5.47921 17.337 5.16304 17.0208 5.16304 16.6304V7.79891C5.16304 7.40856 5.47921 7.09239 5.86957 7.09239ZM9.79338 9.91848C9.44118 9.91848 9.11509 10.1591 9.05857 10.5063C8.98686 10.949 9.32622 11.3315 9.75543 11.3315H13.6034C13.9552 11.3315 14.2816 11.0909 14.3382 10.7437C14.4099 10.301 14.0705 9.91848 13.6413 9.91848H9.79338ZM9.79338 12.3913C9.44118 12.3913 9.11509 12.6319 9.05857 12.9792C8.98686 13.4218 9.32622 13.8043 9.75543 13.8043H13.6034C13.9552 13.8043 14.2816 13.5638 14.3382 13.2165C14.4099 12.7739 14.0705 12.3913 13.6413 12.3913H9.79338Z" />
                 </svg>
-                <div className="flex flex-col">
+                <div className="flex flex-col items-start">
                   <span className="font-bold">Documentation</span>
-                  <span className="text-base dark:text-waterloo light:text-charade">
+                  <span className="text-sm text-content-text-neutral-2">
                     Learn how to integrate our tools.
                   </span>
                 </div>
-                <a
-                  href="#"
-                  className="text-primary hover:text-primary-hover font-bold inline-flex items-center gap-2"
+                <Button
+                  variant="text"
+                  size="large"
+                  className="p-0"
+                  endAdornment={
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      fill="currentColor"
+                    >
+                      <path d="M8.00002 2.66663L7.06002 3.60663L10.78 7.33329H2.66669V8.66663H10.78L7.06002 12.3933L8.00002 13.3333L13.3334 7.99996L8.00002 2.66663Z" />
+                    </svg>
+                  }
                 >
                   Start learning
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="16"
-                    height="16"
-                    viewBox="0 0 16 16"
-                    fill="currentColor"
-                  >
-                    <path d="M8.00002 2.66663L7.06002 3.60663L10.78 7.33329H2.66669V8.66663H10.78L7.06002 12.3933L8.00002 13.3333L13.3334 7.99996L8.00002 2.66663Z" />
-                  </svg>
-                </a>
+                </Button>
               </div>
-              <Divider
-                className="absolute left-0 bottom-[0px] w-full opacity-0 group-hover/item:opacity-100 transition-opacity"
-                variant="secondary"
-                disableMargins
-              />
             </Card>
           </MotionItem>
           <MotionItem className="group/item">
-            <Card className="relative text-left border-transparent dark:group-hover/item:border-charade light:group-hover/item:border-mystic transition-colors">
+            <Card className="p-7 bg-transparent border-transparent hover:bg-background-brand-4 hover:border-stroke-brand-base transition-colors">
               <div className="flex flex-col gap-6 items-start">
                 <svg
-                  className="fill:secondary-hover group-hover/item:fill-primary transition-colors"
                   xmlns="http://www.w3.org/2000/svg"
                   width="20"
                   height="20"
@@ -1189,40 +1156,37 @@ export const LostPage = () => (
                 >
                   <path d="M9.16663 15H10.8333V13.3334H9.16663V15ZM9.99996 1.66669C5.39996 1.66669 1.66663 5.40002 1.66663 10C1.66663 14.6 5.39996 18.3334 9.99996 18.3334C14.6 18.3334 18.3333 14.6 18.3333 10C18.3333 5.40002 14.6 1.66669 9.99996 1.66669ZM9.99996 16.6667C6.32496 16.6667 3.33329 13.675 3.33329 10C3.33329 6.32502 6.32496 3.33335 9.99996 3.33335C13.675 3.33335 16.6666 6.32502 16.6666 10C16.6666 13.675 13.675 16.6667 9.99996 16.6667ZM9.99996 5.00002C8.15829 5.00002 6.66663 6.49169 6.66663 8.33335H8.33329C8.33329 7.41669 9.08329 6.66669 9.99996 6.66669C10.9166 6.66669 11.6666 7.41669 11.6666 8.33335C11.6666 10 9.16663 9.79169 9.16663 12.5H10.8333C10.8333 10.625 13.3333 10.4167 13.3333 8.33335C13.3333 6.49169 11.8416 5.00002 9.99996 5.00002Z" />
                 </svg>
-                <div className="flex flex-col">
+                <div className="flex flex-col items-start">
                   <span className="font-bold">Guide</span>
-                  <span className="text-base dark:text-waterloo light:text-charade">
+                  <span className="text-sm text-content-text-neutral-2">
                     Easy-to-follow installation guides.
                   </span>
                 </div>
-                <a
-                  href="#"
-                  className="text-primary hover:text-primary-hover font-bold inline-flex items-center gap-2"
+                <Button
+                  size="large"
+                  variant="text"
+                  className="p-0"
+                  endAdornment={
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      fill="currentColor"
+                    >
+                      <path d="M8.00002 2.66663L7.06002 3.60663L10.78 7.33329H2.66669V8.66663H10.78L7.06002 12.3933L8.00002 13.3333L13.3334 7.99996L8.00002 2.66663Z" />
+                    </svg>
+                  }
                 >
                   Start learning
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="16"
-                    height="16"
-                    viewBox="0 0 16 16"
-                    fill="currentColor"
-                  >
-                    <path d="M8.00002 2.66663L7.06002 3.60663L10.78 7.33329H2.66669V8.66663H10.78L7.06002 12.3933L8.00002 13.3333L13.3334 7.99996L8.00002 2.66663Z" />
-                  </svg>
-                </a>
+                </Button>
               </div>
-              <Divider
-                className="absolute left-0 bottom-[0px] w-full opacity-0 group-hover/item:opacity-100 transition-opacity"
-                variant="secondary"
-                disableMargins
-              />
             </Card>
           </MotionItem>
           <MotionItem className="group/item">
-            <Card className="relative text-left border-transparent dark:group-hover/item:border-charade light:group-hover/item:border-mystic transition-colors">
+            <Card className="p-7 bg-transparent border-transparent hover:bg-background-brand-4 hover:border-stroke-brand-base transition-colors">
               <div className="flex flex-col gap-6 items-start">
                 <svg
-                  className="fill:secondary-hover group-hover/item:fill-primary transition-colors"
                   xmlns="http://www.w3.org/2000/svg"
                   width="20"
                   height="20"
@@ -1231,33 +1195,31 @@ export const LostPage = () => (
                 >
                   <path d="M10 3.125C5.69219 3.125 2.1875 5.92191 2.1875 9.36035C2.1875 11.5082 3.54574 13.4703 5.77637 14.61C5.1398 15.6831 4.53233 16.5473 4.52515 16.5576C4.38358 16.7589 4.37328 17.0245 4.4989 17.2363C4.61265 17.4273 4.81787 17.5427 5.03662 17.5427C5.06037 17.5427 5.08428 17.5413 5.10803 17.5385C5.18959 17.5291 7.07768 17.2956 9.38049 15.5756C9.59049 15.589 9.79812 15.5957 10 15.5957C14.3078 15.5957 17.8125 12.7988 17.8125 9.36035C17.8125 5.92191 14.3078 3.125 10 3.125ZM10 4.375C13.6184 4.375 16.5625 6.61129 16.5625 9.36035C16.5625 12.1094 13.6184 14.3457 10 14.3457C9.75688 14.3457 9.50281 14.3349 9.245 14.3121C9.08875 14.2978 8.93175 14.344 8.80737 14.4409C7.94862 15.1069 7.15041 15.5385 6.50635 15.816C6.72978 15.456 6.97114 15.0523 7.2052 14.6326C7.2927 14.4766 7.30882 14.2905 7.24976 14.1217C7.19069 13.953 7.06228 13.8178 6.89697 13.75C4.76291 12.8741 3.4375 11.1916 3.4375 9.36035C3.4375 6.61129 6.38156 4.375 10 4.375ZM6.875 8.4375C6.35719 8.4375 5.9375 8.85719 5.9375 9.375C5.9375 9.89281 6.35719 10.3125 6.875 10.3125C7.39281 10.3125 7.8125 9.89281 7.8125 9.375C7.8125 8.85719 7.39281 8.4375 6.875 8.4375ZM10 8.4375C9.48219 8.4375 9.0625 8.85719 9.0625 9.375C9.0625 9.89281 9.48219 10.3125 10 10.3125C10.5178 10.3125 10.9375 9.89281 10.9375 9.375C10.9375 8.85719 10.5178 8.4375 10 8.4375ZM13.125 8.4375C12.6072 8.4375 12.1875 8.85719 12.1875 9.375C12.1875 9.89281 12.6072 10.3125 13.125 10.3125C13.6428 10.3125 14.0625 9.89281 14.0625 9.375C14.0625 8.85719 13.6428 8.4375 13.125 8.4375Z" />
                 </svg>
-                <div className="flex flex-col">
+                <div className="flex flex-col items-start">
                   <span className="font-bold">Blog</span>
-                  <span className="text-base dark:text-waterloo light:text-charade">
+                  <span className="text-sm text-content-text-neutral-2">
                     Read our latest news.
                   </span>
                 </div>
-                <a
-                  href="#"
-                  className="text-primary hover:text-primary-hover font-bold inline-flex items-center gap-2"
+                <Button
+                  size="large"
+                  variant="text"
+                  className="p-0"
+                  endAdornment={
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      fill="currentColor"
+                    >
+                      <path d="M8.00002 2.66663L7.06002 3.60663L10.78 7.33329H2.66669V8.66663H10.78L7.06002 12.3933L8.00002 13.3333L13.3334 7.99996L8.00002 2.66663Z" />
+                    </svg>
+                  }
                 >
                   View latest post
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="16"
-                    height="16"
-                    viewBox="0 0 16 16"
-                    fill="currentColor"
-                  >
-                    <path d="M8.00002 2.66663L7.06002 3.60663L10.78 7.33329H2.66669V8.66663H10.78L7.06002 12.3933L8.00002 13.3333L13.3334 7.99996L8.00002 2.66663Z" />
-                  </svg>
-                </a>
+                </Button>
               </div>
-              <Divider
-                className="absolute left-0 bottom-[0px] w-full opacity-0 group-hover/item:opacity-100 transition-opacity"
-                variant="secondary"
-                disableMargins
-              />
             </Card>
           </MotionItem>
         </MotionGroup>
diff --git a/docs/blocks/foundation/Support.story.tsx b/docs/blocks/foundation/Support.story.tsx
index a292cd6d5..2c2d5ad6a 100644
--- a/docs/blocks/foundation/Support.story.tsx
+++ b/docs/blocks/foundation/Support.story.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
 import { motion } from 'motion/react';
+import React from 'react';
 import { Controller, useForm } from 'react-hook-form';
 
-import { Block, Card } from '../../../src/layout';
-import { Input, Textarea } from '../../../src/form';
 import { Button } from '../../../src/elements/Button';
+import { Input, Textarea } from '../../../src/form';
+import { Block, Card } from '../../../src/layout';
 
 export default {
   title: 'Blocks/Foundation/Support'
@@ -23,16 +23,19 @@ export const Support = () => {
       animate={{ y: 0, opacity: 1 }}
       className="mt-10 sm:mx-auto sm:w-full md:w-[500px]"
     >
-      <Card className="w-full">
+      <Card className="p-7 w-full">
         <div className="flex flex-col items-center justify-center pt-2 pb-5 text-center">
-          <h1 className="mt-2 mb-0 text-2xl font-sans font-bold">
+          <h1 className="mt-2 mb-0 text-xl font-sans font-bold">
             Report an issue
           </h1>
-          <div className="text-text-secondary text-base">
+          <div className="text-content-text-neutral-2 text-sm">
             Found a bug? Please let us know so we can fix it.
           </div>
         </div>
-        <form onSubmit={handleSubmit(values => console.log('values', values))}>
+        <form
+          className="flex flex-col gap-4"
+          onSubmit={handleSubmit(values => console.log('values', values))}
+        >
           <Block label="Title">
             <Controller
               name="title"
@@ -82,11 +85,12 @@ export const Support = () => {
             />
           </Block>
           <Button
+            size="large"
             type="submit"
             fullWidth
             variant="filled"
             color="primary"
-            className="mt-5 flex items-center gap-2 self-stretch text-lg! bg-(image:--button-gradient) hover:bg-(image:--button-gradient-hover) focus:bg-(image:--button-gradient-focus) dark:bg-transparent! light:bg-none focus:outline-hidden transition-colors"
+            className="mt-2"
             disabled={isSubmitting}
           >
             {isSubmitting ? 'Sending Report...' : 'Send Report →'}
diff --git a/docs/blocks/foundation/Timeline.story.tsx b/docs/blocks/foundation/Timeline.story.tsx
index 62f023f51..09dba8661 100644
--- a/docs/blocks/foundation/Timeline.story.tsx
+++ b/docs/blocks/foundation/Timeline.story.tsx
@@ -1,5 +1,6 @@
 import { motion } from 'motion/react';
 import React from 'react';
+
 import {
   Avatar,
   Card,
@@ -21,16 +22,16 @@ export const ActivityTimeline = () => (
     animate={{ y: 0, opacity: 1 }}
     className="mt-10 sm:mx-auto sm:w-full md:w-[820px]"
   >
-    <Card className="w-full p-12">
+    <Card className="w-full p-12 bg-background-neutral-canvas-base border border-stroke-neutral-3">
       <Stepper continuous animated>
         <Step>
           <div className="flex flex-col gap-1">
-            <span className="text-sm text-gray-400 light:text-gray-600">
+            <span className="text-xs text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
               03/01/2024, 8:00 AM
             </span>
             <span className="font-medium">
               Austin{' '}
-              <span className="text-gray-400 light:text-gray-600 font-normal">
+              <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600 font-normal">
                 created ticket
               </span>
             </span>
@@ -38,17 +39,17 @@ export const ActivityTimeline = () => (
         </Step>
         <Step>
           <div className="flex flex-col gap-1">
-            <span className="text-sm text-gray-400 light:text-gray-600">
+            <span className="text-xs text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
               03/02/2024, 10:00 AM
             </span>
             <span className="font-medium">
               Austin
-              <span className="text-gray-400 light:text-gray-600 font-normal">
+              <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600 font-normal">
                 {' '}
                 changed statues from{' '}
               </span>
               Backlog
-              <span className="text-gray-400 light:text-gray-600 font-normal">
+              <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600 font-normal">
                 {' '}
                 to{' '}
               </span>
@@ -58,21 +59,21 @@ export const ActivityTimeline = () => (
         </Step>
         <Step>
           <div className="flex flex-col gap-2">
-            <span className="text-sm text-gray-400 light:text-gray-600">
+            <span className="text-xs text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
               03/03/2024, 10:15 AM
             </span>
             <span className="font-medium">
               Austin
-              <span className="text-gray-400 light:text-gray-600 font-normal">
+              <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600 font-normal">
                 {' '}
                 left a comment{' '}
               </span>
             </span>
-            <div className="mt-2 px-4 py-2 border border-solid border-blue-700 bg-vulcan light:bg-athens-gray rounded-md">
-              <div className="text-gray-400 light:text-gray-600 font-medium text-sm">
-                This looks fine, might've missed it but maybe we can add a link
-                to the website where we also have the video of how to use the
-                plug in? Otherwise this is a nice addition.
+            <div className="mt-2 px-4 py-2 border border-solid border-tags-colors-neutral-stroke-hover bg-inputs-colors-normal-background-resting rounded-md">
+              <div className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600 font-medium text-xs">
+                This looks fine, might&apos;ve missed it but maybe we can add a
+                link to the website where we also have the video of how to use
+                the plug in? Otherwise this is a nice addition.
               </div>
               <Divider
                 className="via-gray-500"
@@ -83,13 +84,22 @@ export const ActivityTimeline = () => (
                 <Textarea
                   fullWidth
                   placeholder="Leave a reply..."
-                  containerClassName="border-transparent bg-vulcan light:bg-athens-gray"
-                  className="text-sm! px-0"
-                  endAdornment={null}
+                  containerClassName="border-transparent placeholder:text-content-text-neutral-3 bg-background-neutral-raised-5 px-3"
+                  className="text-xs! px-0"
                 />
                 <IconButton className="text-secondary-inactive" variant="text">
-                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path id="Vector" d="M0.666748 6.00002L1.60675 6.94002L5.33342 3.22002V11.3334H6.66675V3.22002L10.3867 6.94669L11.3334 6.00002L6.00008 0.666687L0.666748 6.00002Z" fill="currentColor"/>
+                  <svg
+                    width="12"
+                    height="12"
+                    viewBox="0 0 12 12"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      id="Vector"
+                      d="M0.666748 6.00002L1.60675 6.94002L5.33342 3.22002V11.3334H6.66675V3.22002L10.3867 6.94669L11.3334 6.00002L6.00008 0.666687L0.666748 6.00002Z"
+                      fill="currentColor"
+                    />
                   </svg>
                 </IconButton>
               </Stack>
@@ -98,17 +108,17 @@ export const ActivityTimeline = () => (
         </Step>
         <Step>
           <div className="flex flex-col gap-1">
-            <span className="text-sm text-gray-400 light:text-gray-600">
+            <span className="text-xs text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
               03/01/2024, 8:00 AM
             </span>
             <span className="font-medium">
               Austin
-              <span className="text-gray-400 light:text-gray-600 font-normal">
+              <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600 font-normal">
                 {' '}
                 changed statues from{' '}
               </span>
               In Progress
-              <span className="text-gray-400 light:text-gray-600 font-normal">
+              <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600 font-normal">
                 {' '}
                 to{' '}
               </span>
@@ -118,18 +128,27 @@ export const ActivityTimeline = () => (
         </Step>
       </Stepper>
 
-      <div className="mt-2 px-4 py-2 border border-solid border-surface bg-vulcan light:bg-athens-gray rounded-md">
+      <div className="mt-2 px-4 py-2 border border-solid border-tags-colors-neutral-stroke-hover bg-inputs-colors-normal-background-resting rounded-md">
         <Stack>
           <Textarea
             fullWidth
             placeholder="Leave a comment..."
-            containerClassName="border-transparent bg-vulcan light:bg-athens-gray"
-            className="text-sm! px-0"
-            endAdornment={null}
+            containerClassName="border-transparent placeholder:text-content-text-neutral-3 bg-background-neutral-raised-5 px-3"
+            className="text-xs! px-0"
           />
           <IconButton className="text-secondary-inactive" variant="text">
-            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path id="Vector" d="M0.666748 6.00002L1.60675 6.94002L5.33342 3.22002V11.3334H6.66675V3.22002L10.3867 6.94669L11.3334 6.00002L6.00008 0.666687L0.666748 6.00002Z" fill="currentColor"/>
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 12 12"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                id="Vector"
+                d="M0.666748 6.00002L1.60675 6.94002L5.33342 3.22002V11.3334H6.66675V3.22002L10.3867 6.94669L11.3334 6.00002L6.00008 0.666687L0.666748 6.00002Z"
+                fill="currentColor"
+              />
             </svg>
           </IconButton>
         </Stack>
@@ -144,74 +163,80 @@ export const VersionHistory = () => (
     animate={{ y: 0, opacity: 1 }}
     className="mt-10 sm:mx-auto sm:w-full md:w-[560px]"
   >
-    <Card className="w-full p-12">
+    <Card className="w-full p-12 bg-background-neutral-canvas-base border border-stroke-neutral-3">
       <div className="w-full flex-row flex justify-between items-center text-center mb-8">
-        <span className="text-xl font-bold">Version History</span>
+        <span className="text-lg font-bold">Version History</span>
         <IconButton variant="text">
-          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path id="Vector" d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z" fill="currentColor"/>
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 14 14"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              id="Vector"
+              d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z"
+              fill="currentColor"
+            />
           </svg>
         </IconButton>
       </div>
       <div className="p-[1px] rounded-md [background-image:linear-gradient(-126.85deg,_rgba(30,_30,_46,_0)_63.1678%,_#2F6AFF_88.9438%)]">
-        <div className="bg-panel p-3 rounded-md">
+        <div className="bg-background-neutral-canvas-base p-3 rounded-md">
           <Stepper activeStep={1} animated>
             <Step label="v6.0">
               <Stack direction="column" alignItems="start" dense>
-                <span className="font-medium text-base">
+                <span className="font-medium text-sm">
                   New custom statuses for projects
                 </span>
-                <span className="font-normal text-sm text-waterloo light:text-gray-600">
+                <span className="font-normal text-xs text-content-text-neutral-2">
                   Austin McDaniel • 1 hour ago
                 </span>
               </Stack>
             </Step>
             <Step label="v5.0">
               <Stack direction="column" alignItems="start" dense>
-                <span className="font-medium text-base">
+                <span className="font-medium text-sm">
                   Timeline UI overhaul
                 </span>
-                <span className="font-normal text-sm text-waterloo light:text-gray-600">
+                <span className="font-normal text-xs text-content-text-neutral-2">
                   Austin McDaniel • March 22, 2024
                 </span>
               </Stack>
             </Step>
             <Step label="v4.0">
               <Stack direction="column" alignItems="start" dense>
-                <span className="font-medium text-base">
+                <span className="font-medium text-sm">
                   Google calendar integration
                 </span>
-                <span className="font-normal text-sm text-waterloo light:text-gray-600">
+                <span className="font-normal text-xs text-content-text-neutral-2">
                   Austin McDaniel • March 21, 2024
                 </span>
               </Stack>
             </Step>
             <Step>
               <Stack direction="column" alignItems="start" dense>
-                <span className="font-medium text-base">
+                <span className="font-medium text-sm">
                   Branch-specific workflow automations
                 </span>
-                <span className="font-normal text-sm text-waterloo light:text-gray-600">
+                <span className="font-normal text-xs text-content-text-neutral-2">
                   Austin McDaniel • February 28, 2024
                 </span>
               </Stack>
             </Step>
             <Step>
               <Stack direction="column" alignItems="start" dense>
-                <span className="font-medium text-base">
-                  Project time frames
-                </span>
-                <span className="font-normal text-sm text-waterloo light:text-gray-600">
+                <span className="font-medium text-sm">Project time frames</span>
+                <span className="font-normal text-xs text-content-text-neutral-2">
                   Austin McDaniel • February 15, 2024
                 </span>
               </Stack>
             </Step>
             <Step label="v3.0">
               <Stack direction="column" alignItems="start" dense>
-                <span className="font-medium text-base">
-                  GitHub Issues Sync
-                </span>
-                <span className="font-normal text-sm text-waterloo light:text-gray-600">
+                <span className="font-medium text-sm">GitHub Issues Sync</span>
+                <span className="font-normal text-xs text-content-text-neutral-2">
                   Austin McDaniel • February 10, 2024
                 </span>
               </Stack>
@@ -229,25 +254,38 @@ export const WorkspaceHistory = () => (
     animate={{ y: 0, opacity: 1 }}
     className="mt-10 sm:mx-auto sm:w-full md:w-[650px]"
   >
-    <Card className="w-full p-12">
+    <Card className="w-full p-12 bg-background-neutral-canvas-base border border-stroke-neutral-3">
       <Stack direction="column" alignItems="start">
         <div className="w-full flex-row flex justify-between items-center text-center">
-          <span className="text-xl font-bold">Workspace History</span>
+          <span className="text-lg font-bold">Workspace History</span>
           <IconButton variant="text">
-            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path id="Vector" d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z" fill="currentColor"/>
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 14 14"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                id="Vector"
+                d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z"
+                fill="currentColor"
+              />
             </svg>
           </IconButton>
         </div>
-        <span className="text-waterloo">Workspace History</span>
+        <span className="text-content-text-neutral-2">Workspace History</span>
       </Stack>
       <Stepper className="mt-8" animated>
         <Step>
           <Stack direction="row" className="relative -top-1.5">
-            <Avatar size={24} src="https://goodcode.us/static/austin-d1a2c5249336c31662b8ee6d4e169b2b.jpg" />
+            <Avatar
+              size={24}
+              src="https://avatars.githubusercontent.com/u/227909?s=96&v=4"
+            />
             <span className="font-medium">
               Austin{' '}
-              <span className="text-gray-400 light:text-gray-600 font-normal">
+              <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600 font-normal">
                 created workspace • 5 hour ago
               </span>
             </span>
@@ -255,14 +293,17 @@ export const WorkspaceHistory = () => (
         </Step>
         <Step>
           <Stack direction="row" className="relative -top-1.5">
-            <Avatar size={24} src="https://goodcode.us/static/austin-d1a2c5249336c31662b8ee6d4e169b2b.jpg" />
+            <Avatar
+              size={24}
+              src="https://avatars.githubusercontent.com/u/227909?s=96&v=4"
+            />
             <span className="font-medium">
               Kyle{' '}
-              <span className="text-gray-400 light:text-gray-600 font-normal">
+              <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600 font-normal">
                 renamed workspace to
               </span>{' '}
               Good Code{' '}
-              <span className="text-gray-400 light:text-gray-600 font-normal">
+              <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600 font-normal">
                 • 5 hour ago
               </span>
             </span>
@@ -270,14 +311,17 @@ export const WorkspaceHistory = () => (
         </Step>
         <Step>
           <Stack direction="row" className="relative -top-1.5">
-            <Avatar size={24} src="https://goodcode.us/static/austin-d1a2c5249336c31662b8ee6d4e169b2b.jpg" />
+            <Avatar
+              size={24}
+              src="https://avatars.githubusercontent.com/u/227909?s=96&v=4"
+            />
             <span className="font-medium">
               Laura{' '}
-              <span className="text-gray-400 light:text-gray-600 font-normal">
+              <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600 font-normal">
                 added
               </span>{' '}
               MYSQL{' '}
-              <span className="text-gray-400 light:text-gray-600 font-normal">
+              <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600 font-normal">
                 database • March 22, 2024
               </span>
             </span>
@@ -285,14 +329,17 @@ export const WorkspaceHistory = () => (
         </Step>
         <Step>
           <Stack direction="row" className="relative -top-1.5">
-            <Avatar size={24}  src="https://goodcode.us/static/austin-d1a2c5249336c31662b8ee6d4e169b2b.jpg" />
+            <Avatar
+              size={24}
+              src="https://avatars.githubusercontent.com/u/227909?s=96&v=4"
+            />
             <span className="font-medium">
               Lisa{' '}
-              <span className="text-gray-400 light:text-gray-600 font-normal">
+              <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600 font-normal">
                 changed access permission to
               </span>{' '}
               Private{' '}
-              <span className="text-gray-400 light:text-gray-600 font-normal">
+              <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600 font-normal">
                 • February 28, 2024
               </span>
             </span>
@@ -300,14 +347,17 @@ export const WorkspaceHistory = () => (
         </Step>
         <Step>
           <Stack direction="row" className="relative -top-1.5">
-            <Avatar size={24}  src="https://goodcode.us/static/austin-d1a2c5249336c31662b8ee6d4e169b2b.jpg" />
+            <Avatar
+              size={24}
+              src="https://avatars.githubusercontent.com/u/227909?s=96&v=4"
+            />
             <span className="font-medium">
               Kenneth{' '}
-              <span className="text-gray-400 light:text-gray-600 font-normal">
+              <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600 font-normal">
                 connected
               </span>{' '}
               GitHub{' '}
-              <span className="text-gray-400 light:text-gray-600 font-normal">
+              <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600 font-normal">
                 database • February 15, 2024
               </span>
             </span>
@@ -315,14 +365,17 @@ export const WorkspaceHistory = () => (
         </Step>
         <Step>
           <Stack direction="row" className="relative -top-1.5">
-            <Avatar size={24}  src="https://goodcode.us/static/austin-d1a2c5249336c31662b8ee6d4e169b2b.jpg" />
+            <Avatar
+              size={24}
+              src="https://avatars.githubusercontent.com/u/227909?s=96&v=4"
+            />
             <span className="font-medium">
               Carrington{' '}
-              <span className="text-gray-400 light:text-gray-600 font-normal">
+              <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600 font-normal">
                 renamed workspace to
               </span>{' '}
               Good Code Design{' '}
-              <span className="text-gray-400 light:text-gray-600 font-normal">
+              <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600 font-normal">
                 February 10, 2024
               </span>
             </span>
diff --git a/eslint.config.ts b/eslint.config.ts
index 6b65beb0e..c00d6ed64 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -1,97 +1,3 @@
-import {
-  defineConfig,
-  globalIgnores,
-} from 'eslint/config';
+import config from 'reaviz-lint-rules';
 
-import globals from 'globals';
-
-import {
-  fixupConfigRules,
-  fixupPluginRules,
-} from '@eslint/compat';
-
-import tsParser from '@typescript-eslint/parser';
-import react from 'eslint-plugin-react';
-import typescriptEslint from '@typescript-eslint/eslint-plugin';
-import noRelativeImportPaths from 'eslint-plugin-no-relative-import-paths';
-import js from '@eslint/js';
-
-import {
-  FlatCompat,
-} from '@eslint/eslintrc';
-
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-  recommendedConfig: js.configs.recommended,
-  allConfig: js.configs.all
-});
-
-module.exports = defineConfig([{
-  languageOptions: {
-    globals: {
-      ...globals.browser,
-    },
-
-    parser: tsParser,
-    'ecmaVersion': 12,
-    'sourceType': 'module',
-
-    parserOptions: {
-      'ecmaFeatures': {
-        'jsx': true,
-      },
-    },
-  },
-
-  extends: fixupConfigRules(compat.extends(
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:react-hooks/recommended',
-    'prettier',
-    'plugin:storybook/recommended',
-  )),
-
-  plugins: {
-    react: fixupPluginRules(react),
-    '@typescript-eslint': typescriptEslint,
-    'no-relative-import-paths': noRelativeImportPaths,
-  },
-
-  'rules': {
-    'react/display-name': 'off',
-    'no-unused-vars': [0],
-    'react/prop-types': [0],
-    'linebreak-style': ['error', 'unix'],
-    'quotes': ['error', 'single'],
-    'semi': ['error', 'always'],
-    'react/no-unknown-property': ['warn'],
-    'no-relative-import-paths/no-relative-import-paths': ['warn', {
-      'allowSameFolder': true,
-      'prefix': '@',
-      'rootDir': 'src',
-    }],
-
-    'arrow-body-style': ['warn', 'as-needed'],
-  },
-}, {
-  files: ['**/*.test.*'],
-
-  languageOptions: {
-    globals: {
-      ...globals.jest,
-    },
-  },
-}, globalIgnores([
-  'eslint.config.ts',
-  'vite.config.ts',
-  'dist/',
-  'storybook-static/',
-  'types/',
-  'docs/',
-  'demo/',
-  '.storybook/',
-  'coverage/',
-  'scripts/',
-  'src/**/*.story.tsx',
-  'src/**/*.test.ts',
-])]);
+export default config;
diff --git a/package-lock.json b/package-lock.json
index 46263feba..84d074bb0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "reablocks",
-  "version": "9.2.1",
+  "version": "10.0.0-alpha.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "reablocks",
-      "version": "9.2.1",
+      "version": "10.0.0-alpha.6",
       "license": "Apache-2.0",
       "dependencies": {
         "@floating-ui/react": "^0.27.16",
@@ -23,6 +23,8 @@
         "focus-trap-react": "^10.3.1",
         "fuse.js": "^6.6.2",
         "human-format": "^1.2.1",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.mergewith": "^4.6.2",
         "motion": "^12.23.12",
         "name-initials": "^0.1.3",
         "pluralize": "^8.0.0",
@@ -32,8 +34,6 @@
         "tailwind-merge": "^2.6.0"
       },
       "devDependencies": {
-        "@eslint/compat": "^1.3.2",
-        "@eslint/eslintrc": "^3.3.1",
         "@eslint/js": "^9.35.0",
         "@storybook/addon-docs": "^9.1.5",
         "@storybook/addon-essentials": "^9.0.0-alpha.12",
@@ -50,20 +50,25 @@
         "@tailwindcss/postcss": "^4.1.13",
         "@tailwindcss/vite": "^4.1.13",
         "@types/classnames": "^2.3.4",
+        "@types/lodash.clonedeep": "^4.5.9",
+        "@types/lodash.mergewith": "^4.6.9",
         "@types/node": "^22.18.1",
         "@types/react": "^18.3.24",
         "@types/react-dom": "^18.3.7",
-        "@typescript-eslint/eslint-plugin": "^8.43.0",
-        "@typescript-eslint/parser": "^8.43.0",
         "@vitejs/plugin-react": "^5.0.2",
         "@vitest/coverage-v8": "^3.2.4",
         "autoprefixer": "^10.4.21",
         "eslint": "^9.35.0",
         "eslint-config-prettier": "^10.1.8",
+        "eslint-plugin-import": "^2.32.0",
         "eslint-plugin-no-relative-import-paths": "^1.6.1",
+        "eslint-plugin-prettier": "^5.5.4",
         "eslint-plugin-react": "^7.37.5",
         "eslint-plugin-react-hooks": "^5.2.0",
+        "eslint-plugin-react-refresh": "^0.4.22",
+        "eslint-plugin-simple-import-sort": "^12.1.1",
         "eslint-plugin-storybook": "^9.1.5",
+        "eslint-plugin-unused-imports": "^4.2.0",
         "fast-glob": "^3.3.3",
         "globals": "^16.4.0",
         "husky": "^9.1.7",
@@ -76,11 +81,13 @@
         "react-docgen-typescript": "^2.4.0",
         "react-dom": "^18.0.0",
         "react-hook-form": "^7.62.0",
+        "reaviz-lint-rules": "^1.0.3",
         "rollup-plugin-peer-deps-external": "2.2.4",
         "storybook": "^9.1.5",
         "tailwindcss": "^4.1.13",
         "tw-colors": "^4.0.0-beta.1",
         "typescript": "^5.9.2",
+        "typescript-eslint": "^8.44.1",
         "typescript-rewrite-paths": "^1.3.1",
         "vite": "^7.1.5",
         "vite-plugin-checker": "^0.10.3",
@@ -211,16 +218,6 @@
         "url": "https://opencollective.com/babel"
       }
     },
-    "node_modules/@babel/core/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
     "node_modules/@babel/generator": {
       "version": "7.28.3",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.3.tgz",
@@ -255,16 +252,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      }
-    },
     "node_modules/@babel/helper-globals": {
       "version": "7.28.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
@@ -640,9 +627,9 @@
       }
     },
     "node_modules/@csstools/postcss-alpha-function": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-alpha-function/-/postcss-alpha-function-1.0.0.tgz",
-      "integrity": "sha512-r2L8KNg5Wriq5n8IUQcjzy2Rh37J5YjzP9iOyHZL5fxdWYHB08vqykHQa4wAzN/tXwDuCHnhQDGCtxfS76xn7g==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-alpha-function/-/postcss-alpha-function-1.0.1.tgz",
+      "integrity": "sha512-isfLLwksH3yHkFXfCI2Gcaqg7wGGHZZwunoJzEZk0yKYIokgre6hYVFibKL3SYAoR1kBXova8LB+JoO5vZzi9w==",
       "dev": true,
       "funding": [
         {
@@ -659,7 +646,7 @@
         "@csstools/css-color-parser": "^3.1.0",
         "@csstools/css-parser-algorithms": "^3.0.5",
         "@csstools/css-tokenizer": "^3.0.4",
-        "@csstools/postcss-progressive-custom-properties": "^4.2.0",
+        "@csstools/postcss-progressive-custom-properties": "^4.2.1",
         "@csstools/utilities": "^2.0.0"
       },
       "engines": {
@@ -697,9 +684,9 @@
       }
     },
     "node_modules/@csstools/postcss-color-function": {
-      "version": "4.0.11",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-color-function/-/postcss-color-function-4.0.11.tgz",
-      "integrity": "sha512-AtH22zLHTLm64HLdpv5EedT/zmYTm1MtdQbQhRZXxEB6iYtS6SrS1jLX3TcmUWMFzpumK/OVylCm3HcLms4slw==",
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-color-function/-/postcss-color-function-4.0.12.tgz",
+      "integrity": "sha512-yx3cljQKRaSBc2hfh8rMZFZzChaFgwmO2JfFgFr1vMcF3C/uyy5I4RFIBOIWGq1D+XbKCG789CGkG6zzkLpagA==",
       "dev": true,
       "funding": [
         {
@@ -716,7 +703,7 @@
         "@csstools/css-color-parser": "^3.1.0",
         "@csstools/css-parser-algorithms": "^3.0.5",
         "@csstools/css-tokenizer": "^3.0.4",
-        "@csstools/postcss-progressive-custom-properties": "^4.2.0",
+        "@csstools/postcss-progressive-custom-properties": "^4.2.1",
         "@csstools/utilities": "^2.0.0"
       },
       "engines": {
@@ -727,9 +714,9 @@
       }
     },
     "node_modules/@csstools/postcss-color-function-display-p3-linear": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-color-function-display-p3-linear/-/postcss-color-function-display-p3-linear-1.0.0.tgz",
-      "integrity": "sha512-7q+OuUqfowRrP84m/Jl0wv3pfCQyUTCW5MxDIux+/yty5IkUUHOTigCjrC0Fjy3OT0ncGLudHbfLWmP7E1arNA==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-color-function-display-p3-linear/-/postcss-color-function-display-p3-linear-1.0.1.tgz",
+      "integrity": "sha512-E5qusdzhlmO1TztYzDIi8XPdPoYOjoTY6HBYBCYSj+Gn4gQRBlvjgPQXzfzuPQqt8EhkC/SzPKObg4Mbn8/xMg==",
       "dev": true,
       "funding": [
         {
@@ -746,7 +733,7 @@
         "@csstools/css-color-parser": "^3.1.0",
         "@csstools/css-parser-algorithms": "^3.0.5",
         "@csstools/css-tokenizer": "^3.0.4",
-        "@csstools/postcss-progressive-custom-properties": "^4.2.0",
+        "@csstools/postcss-progressive-custom-properties": "^4.2.1",
         "@csstools/utilities": "^2.0.0"
       },
       "engines": {
@@ -757,9 +744,9 @@
       }
     },
     "node_modules/@csstools/postcss-color-mix-function": {
-      "version": "3.0.11",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-color-mix-function/-/postcss-color-mix-function-3.0.11.tgz",
-      "integrity": "sha512-cQpXBelpTx0YhScZM5Ve0jDCA4RzwFc7oNafzZOGgCHt/GQVYiU8Vevz9QJcwy/W0Pyi/BneY+KMjz23lI9r+Q==",
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-color-mix-function/-/postcss-color-mix-function-3.0.12.tgz",
+      "integrity": "sha512-4STERZfCP5Jcs13P1U5pTvI9SkgLgfMUMhdXW8IlJWkzOOOqhZIjcNhWtNJZes2nkBDsIKJ0CJtFtuaZ00moag==",
       "dev": true,
       "funding": [
         {
@@ -776,7 +763,7 @@
         "@csstools/css-color-parser": "^3.1.0",
         "@csstools/css-parser-algorithms": "^3.0.5",
         "@csstools/css-tokenizer": "^3.0.4",
-        "@csstools/postcss-progressive-custom-properties": "^4.2.0",
+        "@csstools/postcss-progressive-custom-properties": "^4.2.1",
         "@csstools/utilities": "^2.0.0"
       },
       "engines": {
@@ -787,9 +774,9 @@
       }
     },
     "node_modules/@csstools/postcss-color-mix-variadic-function-arguments": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-color-mix-variadic-function-arguments/-/postcss-color-mix-variadic-function-arguments-1.0.1.tgz",
-      "integrity": "sha512-c7hyBtbF+jlHIcUGVdWY06bHICgguV9ypfcELU3eU3W/9fiz2dxM8PqxQk2ndXYTzLnwPvNNqu1yCmQ++N6Dcg==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-color-mix-variadic-function-arguments/-/postcss-color-mix-variadic-function-arguments-1.0.2.tgz",
+      "integrity": "sha512-rM67Gp9lRAkTo+X31DUqMEq+iK+EFqsidfecmhrteErxJZb6tUoJBVQca1Vn1GpDql1s1rD1pKcuYzMsg7Z1KQ==",
       "dev": true,
       "funding": [
         {
@@ -806,7 +793,7 @@
         "@csstools/css-color-parser": "^3.1.0",
         "@csstools/css-parser-algorithms": "^3.0.5",
         "@csstools/css-tokenizer": "^3.0.4",
-        "@csstools/postcss-progressive-custom-properties": "^4.2.0",
+        "@csstools/postcss-progressive-custom-properties": "^4.2.1",
         "@csstools/utilities": "^2.0.0"
       },
       "engines": {
@@ -817,9 +804,38 @@
       }
     },
     "node_modules/@csstools/postcss-content-alt-text": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-content-alt-text/-/postcss-content-alt-text-2.0.7.tgz",
-      "integrity": "sha512-cq/zWaEkpcg3RttJ5+GdNwk26NwxY5KgqgtNL777Fdd28AVGHxuBvqmK4Jq4oKhW1NX4M2LbgYAVVN0NZ+/XYQ==",
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-content-alt-text/-/postcss-content-alt-text-2.0.8.tgz",
+      "integrity": "sha512-9SfEW9QCxEpTlNMnpSqFaHyzsiRpZ5J5+KqCu1u5/eEJAWsMhzT40qf0FIbeeglEvrGRMdDzAxMIz3wqoGSb+Q==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "license": "MIT-0",
+      "dependencies": {
+        "@csstools/css-parser-algorithms": "^3.0.5",
+        "@csstools/css-tokenizer": "^3.0.4",
+        "@csstools/postcss-progressive-custom-properties": "^4.2.1",
+        "@csstools/utilities": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-contrast-color-function": {
+      "version": "2.0.12",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-contrast-color-function/-/postcss-contrast-color-function-2.0.12.tgz",
+      "integrity": "sha512-YbwWckjK3qwKjeYz/CijgcS7WDUCtKTd8ShLztm3/i5dhh4NaqzsbYnhm4bjrpFpnLZ31jVcbK8YL77z3GBPzA==",
       "dev": true,
       "funding": [
         {
@@ -833,9 +849,10 @@
       ],
       "license": "MIT-0",
       "dependencies": {
+        "@csstools/css-color-parser": "^3.1.0",
         "@csstools/css-parser-algorithms": "^3.0.5",
         "@csstools/css-tokenizer": "^3.0.4",
-        "@csstools/postcss-progressive-custom-properties": "^4.2.0",
+        "@csstools/postcss-progressive-custom-properties": "^4.2.1",
         "@csstools/utilities": "^2.0.0"
       },
       "engines": {
@@ -929,9 +946,9 @@
       }
     },
     "node_modules/@csstools/postcss-gradients-interpolation-method": {
-      "version": "5.0.11",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-gradients-interpolation-method/-/postcss-gradients-interpolation-method-5.0.11.tgz",
-      "integrity": "sha512-8M3mcNTL3cGIJXDnvrJ2oWEcKi3zyw7NeYheFKePUlBmLYm1gkw9Rr/BA7lFONrOPeQA3yeMPldrrws6lqHrug==",
+      "version": "5.0.12",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-gradients-interpolation-method/-/postcss-gradients-interpolation-method-5.0.12.tgz",
+      "integrity": "sha512-jugzjwkUY0wtNrZlFeyXzimUL3hN4xMvoPnIXxoZqxDvjZRiSh+itgHcVUWzJ2VwD/VAMEgCLvtaJHX+4Vj3Ow==",
       "dev": true,
       "funding": [
         {
@@ -948,7 +965,7 @@
         "@csstools/css-color-parser": "^3.1.0",
         "@csstools/css-parser-algorithms": "^3.0.5",
         "@csstools/css-tokenizer": "^3.0.4",
-        "@csstools/postcss-progressive-custom-properties": "^4.2.0",
+        "@csstools/postcss-progressive-custom-properties": "^4.2.1",
         "@csstools/utilities": "^2.0.0"
       },
       "engines": {
@@ -959,9 +976,9 @@
       }
     },
     "node_modules/@csstools/postcss-hwb-function": {
-      "version": "4.0.11",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-hwb-function/-/postcss-hwb-function-4.0.11.tgz",
-      "integrity": "sha512-9meZbsVWTZkWsSBazQips3cHUOT29a/UAwFz0AMEXukvpIGGDR9+GMl3nIckWO5sPImsadu4F5Zy+zjt8QgCdA==",
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-hwb-function/-/postcss-hwb-function-4.0.12.tgz",
+      "integrity": "sha512-mL/+88Z53KrE4JdePYFJAQWFrcADEqsLprExCM04GDNgHIztwFzj0Mbhd/yxMBngq0NIlz58VVxjt5abNs1VhA==",
       "dev": true,
       "funding": [
         {
@@ -978,7 +995,7 @@
         "@csstools/css-color-parser": "^3.1.0",
         "@csstools/css-parser-algorithms": "^3.0.5",
         "@csstools/css-tokenizer": "^3.0.4",
-        "@csstools/postcss-progressive-custom-properties": "^4.2.0",
+        "@csstools/postcss-progressive-custom-properties": "^4.2.1",
         "@csstools/utilities": "^2.0.0"
       },
       "engines": {
@@ -989,9 +1006,9 @@
       }
     },
     "node_modules/@csstools/postcss-ic-unit": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-ic-unit/-/postcss-ic-unit-4.0.3.tgz",
-      "integrity": "sha512-RtYYm2qUIu9vAaHB0cC8rQGlOCQAUgEc2tMr7ewlGXYipBQKjoWmyVArqsk7SEr8N3tErq6P6UOJT3amaVof5Q==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-ic-unit/-/postcss-ic-unit-4.0.4.tgz",
+      "integrity": "sha512-yQ4VmossuOAql65sCPppVO1yfb7hDscf4GseF0VCA/DTDaBc0Wtf8MTqVPfjGYlT5+2buokG0Gp7y0atYZpwjg==",
       "dev": true,
       "funding": [
         {
@@ -1005,7 +1022,7 @@
       ],
       "license": "MIT-0",
       "dependencies": {
-        "@csstools/postcss-progressive-custom-properties": "^4.2.0",
+        "@csstools/postcss-progressive-custom-properties": "^4.2.1",
         "@csstools/utilities": "^2.0.0",
         "postcss-value-parser": "^4.2.0"
       },
@@ -1067,9 +1084,9 @@
       }
     },
     "node_modules/@csstools/postcss-light-dark-function": {
-      "version": "2.0.10",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-light-dark-function/-/postcss-light-dark-function-2.0.10.tgz",
-      "integrity": "sha512-g7Lwb294lSoNnyrwcqoooh9fTAp47rRNo+ILg7SLRSMU3K9ePIwRt566sNx+pehiCelv4E1ICaU1EwLQuyF2qw==",
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-light-dark-function/-/postcss-light-dark-function-2.0.11.tgz",
+      "integrity": "sha512-fNJcKXJdPM3Lyrbmgw2OBbaioU7yuKZtiXClf4sGdQttitijYlZMD5K7HrC/eF83VRWRrYq6OZ0Lx92leV2LFA==",
       "dev": true,
       "funding": [
         {
@@ -1085,7 +1102,7 @@
       "dependencies": {
         "@csstools/css-parser-algorithms": "^3.0.5",
         "@csstools/css-tokenizer": "^3.0.4",
-        "@csstools/postcss-progressive-custom-properties": "^4.2.0",
+        "@csstools/postcss-progressive-custom-properties": "^4.2.1",
         "@csstools/utilities": "^2.0.0"
       },
       "engines": {
@@ -1328,9 +1345,9 @@
       }
     },
     "node_modules/@csstools/postcss-oklab-function": {
-      "version": "4.0.11",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-oklab-function/-/postcss-oklab-function-4.0.11.tgz",
-      "integrity": "sha512-9f03ZGxZ2VmSCrM4SDXlAYP+Xpu4VFzemfQUQFL9OYxAbpvDy0FjDipZ0i8So1pgs8VIbQI0bNjFWgfdpGw8ig==",
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-oklab-function/-/postcss-oklab-function-4.0.12.tgz",
+      "integrity": "sha512-HhlSmnE1NKBhXsTnNGjxvhryKtO7tJd1w42DKOGFD6jSHtYOrsJTQDKPMwvOfrzUAk8t7GcpIfRyM7ssqHpFjg==",
       "dev": true,
       "funding": [
         {
@@ -1347,7 +1364,7 @@
         "@csstools/css-color-parser": "^3.1.0",
         "@csstools/css-parser-algorithms": "^3.0.5",
         "@csstools/css-tokenizer": "^3.0.4",
-        "@csstools/postcss-progressive-custom-properties": "^4.2.0",
+        "@csstools/postcss-progressive-custom-properties": "^4.2.1",
         "@csstools/utilities": "^2.0.0"
       },
       "engines": {
@@ -1358,9 +1375,9 @@
       }
     },
     "node_modules/@csstools/postcss-progressive-custom-properties": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-4.2.0.tgz",
-      "integrity": "sha512-fWCXRasX17N1NCPTCuwC3FJDV+Wc031f16cFuuMEfIsYJ1q5ABCa59W0C6VeMGqjNv6ldf37vvwXXAeaZjD9PA==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-4.2.1.tgz",
+      "integrity": "sha512-uPiiXf7IEKtUQXsxu6uWtOlRMXd2QWWy5fhxHDnPdXKCQckPP3E34ZgDoZ62r2iT+UOgWsSbM4NvHE5m3mAEdw==",
       "dev": true,
       "funding": [
         {
@@ -1412,9 +1429,9 @@
       }
     },
     "node_modules/@csstools/postcss-relative-color-syntax": {
-      "version": "3.0.11",
-      "resolved": "https://registry.npmjs.org/@csstools/postcss-relative-color-syntax/-/postcss-relative-color-syntax-3.0.11.tgz",
-      "integrity": "sha512-oQ5fZvkcBrWR+k6arHXk0F8FlkmD4IxM+rcGDLWrF2f31tWyEM3lSraeWAV0f7BGH6LIrqmyU3+Qo/1acfoJng==",
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-relative-color-syntax/-/postcss-relative-color-syntax-3.0.12.tgz",
+      "integrity": "sha512-0RLIeONxu/mtxRtf3o41Lq2ghLimw0w9ByLWnnEVuy89exmEEq8bynveBxNW3nyHqLAFEeNtVEmC1QK9MZ8Huw==",
       "dev": true,
       "funding": [
         {
@@ -1431,7 +1448,7 @@
         "@csstools/css-color-parser": "^3.1.0",
         "@csstools/css-parser-algorithms": "^3.0.5",
         "@csstools/css-tokenizer": "^3.0.4",
-        "@csstools/postcss-progressive-custom-properties": "^4.2.0",
+        "@csstools/postcss-progressive-custom-properties": "^4.2.1",
         "@csstools/utilities": "^2.0.0"
       },
       "engines": {
@@ -1671,9 +1688,9 @@
       }
     },
     "node_modules/@esbuild/aix-ppc64": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.9.tgz",
-      "integrity": "sha512-OaGtL73Jck6pBKjNIe24BnFE6agGl+6KxDtTfHhy1HmhthfKouEcOhqpSL64K4/0WCtbKFLOdzD/44cJ4k9opA==",
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.10.tgz",
+      "integrity": "sha512-0NFWnA+7l41irNuaSVlLfgNT12caWJVLzp5eAVhZ0z1qpxbockccEt3s+149rE64VUI3Ml2zt8Nv5JVc4QXTsw==",
       "cpu": [
         "ppc64"
       ],
@@ -1688,9 +1705,9 @@
       }
     },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.9.tgz",
-      "integrity": "sha512-5WNI1DaMtxQ7t7B6xa572XMXpHAaI/9Hnhk8lcxF4zVN4xstUgTlvuGDorBguKEnZO70qwEcLpfifMLoxiPqHQ==",
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.10.tgz",
+      "integrity": "sha512-dQAxF1dW1C3zpeCDc5KqIYuZ1tgAdRXNoZP7vkBIRtKZPYe2xVr/d3SkirklCHudW1B45tGiUlz2pUWDfbDD4w==",
       "cpu": [
         "arm"
       ],
@@ -1705,9 +1722,9 @@
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.9.tgz",
-      "integrity": "sha512-IDrddSmpSv51ftWslJMvl3Q2ZT98fUSL2/rlUXuVqRXHCs5EUF1/f+jbjF5+NG9UffUDMCiTyh8iec7u8RlTLg==",
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.10.tgz",
+      "integrity": "sha512-LSQa7eDahypv/VO6WKohZGPSJDq5OVOo3UoFR1E4t4Gj1W7zEQMUhI+lo81H+DtB+kP+tDgBp+M4oNCwp6kffg==",
       "cpu": [
         "arm64"
       ],
@@ -1722,9 +1739,9 @@
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.9.tgz",
-      "integrity": "sha512-I853iMZ1hWZdNllhVZKm34f4wErd4lMyeV7BLzEExGEIZYsOzqDWDf+y082izYUE8gtJnYHdeDpN/6tUdwvfiw==",
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.10.tgz",
+      "integrity": "sha512-MiC9CWdPrfhibcXwr39p9ha1x0lZJ9KaVfvzA0Wxwz9ETX4v5CHfF09bx935nHlhi+MxhA63dKRRQLiVgSUtEg==",
       "cpu": [
         "x64"
       ],
@@ -1739,9 +1756,9 @@
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.9.tgz",
-      "integrity": "sha512-XIpIDMAjOELi/9PB30vEbVMs3GV1v2zkkPnuyRRURbhqjyzIINwj+nbQATh4H9GxUgH1kFsEyQMxwiLFKUS6Rg==",
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.10.tgz",
+      "integrity": "sha512-JC74bdXcQEpW9KkV326WpZZjLguSZ3DfS8wrrvPMHgQOIEIG/sPXEN/V8IssoJhbefLRcRqw6RQH2NnpdprtMA==",
       "cpu": [
         "arm64"
       ],
@@ -1756,9 +1773,9 @@
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.9.tgz",
-      "integrity": "sha512-jhHfBzjYTA1IQu8VyrjCX4ApJDnH+ez+IYVEoJHeqJm9VhG9Dh2BYaJritkYK3vMaXrf7Ogr/0MQ8/MeIefsPQ==",
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.10.tgz",
+      "integrity": "sha512-tguWg1olF6DGqzws97pKZ8G2L7Ig1vjDmGTwcTuYHbuU6TTjJe5FXbgs5C1BBzHbJ2bo1m3WkQDbWO2PvamRcg==",
       "cpu": [
         "x64"
       ],
@@ -1773,9 +1790,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.9.tgz",
-      "integrity": "sha512-z93DmbnY6fX9+KdD4Ue/H6sYs+bhFQJNCPZsi4XWJoYblUqT06MQUdBCpcSfuiN72AbqeBFu5LVQTjfXDE2A6Q==",
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.10.tgz",
+      "integrity": "sha512-3ZioSQSg1HT2N05YxeJWYR+Libe3bREVSdWhEEgExWaDtyFbbXWb49QgPvFH8u03vUPX10JhJPcz7s9t9+boWg==",
       "cpu": [
         "arm64"
       ],
@@ -1790,9 +1807,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.9.tgz",
-      "integrity": "sha512-mrKX6H/vOyo5v71YfXWJxLVxgy1kyt1MQaD8wZJgJfG4gq4DpQGpgTB74e5yBeQdyMTbgxp0YtNj7NuHN0PoZg==",
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.10.tgz",
+      "integrity": "sha512-LLgJfHJk014Aa4anGDbh8bmI5Lk+QidDmGzuC2D+vP7mv/GeSN+H39zOf7pN5N8p059FcOfs2bVlrRr4SK9WxA==",
       "cpu": [
         "x64"
       ],
@@ -1807,9 +1824,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.9.tgz",
-      "integrity": "sha512-HBU2Xv78SMgaydBmdor38lg8YDnFKSARg1Q6AT0/y2ezUAKiZvc211RDFHlEZRFNRVhcMamiToo7bDx3VEOYQw==",
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.10.tgz",
+      "integrity": "sha512-oR31GtBTFYCqEBALI9r6WxoU/ZofZl962pouZRTEYECvNF/dtXKku8YXcJkhgK/beU+zedXfIzHijSRapJY3vg==",
       "cpu": [
         "arm"
       ],
@@ -1824,9 +1841,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.9.tgz",
-      "integrity": "sha512-BlB7bIcLT3G26urh5Dmse7fiLmLXnRlopw4s8DalgZ8ef79Jj4aUcYbk90g8iCa2467HX8SAIidbL7gsqXHdRw==",
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.10.tgz",
+      "integrity": "sha512-5luJWN6YKBsawd5f9i4+c+geYiVEw20FVW5x0v1kEMWNq8UctFjDiMATBxLvmmHA4bf7F6hTRaJgtghFr9iziQ==",
       "cpu": [
         "arm64"
       ],
@@ -1841,9 +1858,9 @@
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.9.tgz",
-      "integrity": "sha512-e7S3MOJPZGp2QW6AK6+Ly81rC7oOSerQ+P8L0ta4FhVi+/j/v2yZzx5CqqDaWjtPFfYz21Vi1S0auHrap3Ma3A==",
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.10.tgz",
+      "integrity": "sha512-NrSCx2Kim3EnnWgS4Txn0QGt0Xipoumb6z6sUtl5bOEZIVKhzfyp/Lyw4C1DIYvzeW/5mWYPBFJU3a/8Yr75DQ==",
       "cpu": [
         "ia32"
       ],
@@ -1858,9 +1875,9 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.9.tgz",
-      "integrity": "sha512-Sbe10Bnn0oUAB2AalYztvGcK+o6YFFA/9829PhOCUS9vkJElXGdphz0A3DbMdP8gmKkqPmPcMJmJOrI3VYB1JQ==",
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.10.tgz",
+      "integrity": "sha512-xoSphrd4AZda8+rUDDfD9J6FUMjrkTz8itpTITM4/xgerAZZcFW7Dv+sun7333IfKxGG8gAq+3NbfEMJfiY+Eg==",
       "cpu": [
         "loong64"
       ],
@@ -1875,9 +1892,9 @@
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.9.tgz",
-      "integrity": "sha512-YcM5br0mVyZw2jcQeLIkhWtKPeVfAerES5PvOzaDxVtIyZ2NUBZKNLjC5z3/fUlDgT6w89VsxP2qzNipOaaDyA==",
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.10.tgz",
+      "integrity": "sha512-ab6eiuCwoMmYDyTnyptoKkVS3k8fy/1Uvq7Dj5czXI6DF2GqD2ToInBI0SHOp5/X1BdZ26RKc5+qjQNGRBelRA==",
       "cpu": [
         "mips64el"
       ],
@@ -1892,9 +1909,9 @@
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.9.tgz",
-      "integrity": "sha512-++0HQvasdo20JytyDpFvQtNrEsAgNG2CY1CLMwGXfFTKGBGQT3bOeLSYE2l1fYdvML5KUuwn9Z8L1EWe2tzs1w==",
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.10.tgz",
+      "integrity": "sha512-NLinzzOgZQsGpsTkEbdJTCanwA5/wozN9dSgEl12haXJBzMTpssebuXR42bthOF3z7zXFWH1AmvWunUCkBE4EA==",
       "cpu": [
         "ppc64"
       ],
@@ -1909,9 +1926,9 @@
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.9.tgz",
-      "integrity": "sha512-uNIBa279Y3fkjV+2cUjx36xkx7eSjb8IvnL01eXUKXez/CBHNRw5ekCGMPM0BcmqBxBcdgUWuUXmVWwm4CH9kg==",
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.10.tgz",
+      "integrity": "sha512-FE557XdZDrtX8NMIeA8LBJX3dC2M8VGXwfrQWU7LB5SLOajfJIxmSdyL/gU1m64Zs9CBKvm4UAuBp5aJ8OgnrA==",
       "cpu": [
         "riscv64"
       ],
@@ -1926,9 +1943,9 @@
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.9.tgz",
-      "integrity": "sha512-Mfiphvp3MjC/lctb+7D287Xw1DGzqJPb/J2aHHcHxflUo+8tmN/6d4k6I2yFR7BVo5/g7x2Monq4+Yew0EHRIA==",
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.10.tgz",
+      "integrity": "sha512-3BBSbgzuB9ajLoVZk0mGu+EHlBwkusRmeNYdqmznmMc9zGASFjSsxgkNsqmXugpPk00gJ0JNKh/97nxmjctdew==",
       "cpu": [
         "s390x"
       ],
@@ -1943,9 +1960,9 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.9.tgz",
-      "integrity": "sha512-iSwByxzRe48YVkmpbgoxVzn76BXjlYFXC7NvLYq+b+kDjyyk30J0JY47DIn8z1MO3K0oSl9fZoRmZPQI4Hklzg==",
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.10.tgz",
+      "integrity": "sha512-QSX81KhFoZGwenVyPoberggdW1nrQZSvfVDAIUXr3WqLRZGZqWk/P4T8p2SP+de2Sr5HPcvjhcJzEiulKgnxtA==",
       "cpu": [
         "x64"
       ],
@@ -1960,9 +1977,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-arm64": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.9.tgz",
-      "integrity": "sha512-9jNJl6FqaUG+COdQMjSCGW4QiMHH88xWbvZ+kRVblZsWrkXlABuGdFJ1E9L7HK+T0Yqd4akKNa/lO0+jDxQD4Q==",
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.10.tgz",
+      "integrity": "sha512-AKQM3gfYfSW8XRk8DdMCzaLUFB15dTrZfnX8WXQoOUpUBQ+NaAFCP1kPS/ykbbGYz7rxn0WS48/81l9hFl3u4A==",
       "cpu": [
         "arm64"
       ],
@@ -1977,9 +1994,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.9.tgz",
-      "integrity": "sha512-RLLdkflmqRG8KanPGOU7Rpg829ZHu8nFy5Pqdi9U01VYtG9Y0zOG6Vr2z4/S+/3zIyOxiK6cCeYNWOFR9QP87g==",
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.10.tgz",
+      "integrity": "sha512-7RTytDPGU6fek/hWuN9qQpeGPBZFfB4zZgcz2VK2Z5VpdUxEI8JKYsg3JfO0n/Z1E/6l05n0unDCNc4HnhQGig==",
       "cpu": [
         "x64"
       ],
@@ -1994,9 +2011,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-arm64": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.9.tgz",
-      "integrity": "sha512-YaFBlPGeDasft5IIM+CQAhJAqS3St3nJzDEgsgFixcfZeyGPCd6eJBWzke5piZuZ7CtL656eOSYKk4Ls2C0FRQ==",
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.10.tgz",
+      "integrity": "sha512-5Se0VM9Wtq797YFn+dLimf2Zx6McttsH2olUBsDml+lm0GOCRVebRWUvDtkY4BWYv/3NgzS8b/UM3jQNh5hYyw==",
       "cpu": [
         "arm64"
       ],
@@ -2011,9 +2028,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.9.tgz",
-      "integrity": "sha512-1MkgTCuvMGWuqVtAvkpkXFmtL8XhWy+j4jaSO2wxfJtilVCi0ZE37b8uOdMItIHz4I6z1bWWtEX4CJwcKYLcuA==",
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.10.tgz",
+      "integrity": "sha512-XkA4frq1TLj4bEMB+2HnI0+4RnjbuGZfet2gs/LNs5Hc7D89ZQBHQ0gL2ND6Lzu1+QVkjp3x1gIcPKzRNP8bXw==",
       "cpu": [
         "x64"
       ],
@@ -2028,9 +2045,9 @@
       }
     },
     "node_modules/@esbuild/openharmony-arm64": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.9.tgz",
-      "integrity": "sha512-4Xd0xNiMVXKh6Fa7HEJQbrpP3m3DDn43jKxMjxLLRjWnRsfxjORYJlXPO4JNcXtOyfajXorRKY9NkOpTHptErg==",
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.10.tgz",
+      "integrity": "sha512-AVTSBhTX8Y/Fz6OmIVBip9tJzZEUcY8WLh7I59+upa5/GPhh2/aM6bvOMQySspnCCHvFi79kMtdJS1w0DXAeag==",
       "cpu": [
         "arm64"
       ],
@@ -2045,9 +2062,9 @@
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.9.tgz",
-      "integrity": "sha512-WjH4s6hzo00nNezhp3wFIAfmGZ8U7KtrJNlFMRKxiI9mxEK1scOMAaa9i4crUtu+tBr+0IN6JCuAcSBJZfnphw==",
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.10.tgz",
+      "integrity": "sha512-fswk3XT0Uf2pGJmOpDB7yknqhVkJQkAQOcW/ccVOtfx05LkbWOaRAtn5SaqXypeKQra1QaEa841PgrSL9ubSPQ==",
       "cpu": [
         "x64"
       ],
@@ -2062,9 +2079,9 @@
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.9.tgz",
-      "integrity": "sha512-mGFrVJHmZiRqmP8xFOc6b84/7xa5y5YvR1x8djzXpJBSv/UsNK6aqec+6JDjConTgvvQefdGhFDAs2DLAds6gQ==",
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.10.tgz",
+      "integrity": "sha512-ah+9b59KDTSfpaCg6VdJoOQvKjI33nTaQr4UluQwW7aEwZQsbMCfTmfEO4VyewOxx4RaDT/xCy9ra2GPWmO7Kw==",
       "cpu": [
         "arm64"
       ],
@@ -2079,9 +2096,9 @@
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.9.tgz",
-      "integrity": "sha512-b33gLVU2k11nVx1OhX3C8QQP6UHQK4ZtN56oFWvVXvz2VkDoe6fbG8TOgHFxEvqeqohmRnIHe5A1+HADk4OQww==",
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.10.tgz",
+      "integrity": "sha512-QHPDbKkrGO8/cz9LKVnJU22HOi4pxZnZhhA2HYHez5Pz4JeffhDjf85E57Oyco163GnzNCVkZK0b/n4Y0UHcSw==",
       "cpu": [
         "ia32"
       ],
@@ -2096,9 +2113,9 @@
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.9.tgz",
-      "integrity": "sha512-PPOl1mi6lpLNQxnGoyAfschAodRFYXJ+9fs6WHXz7CSWKbOqiMZsubC+BQsVKuul+3vKLuwTHsS2c2y9EoKwxQ==",
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.10.tgz",
+      "integrity": "sha512-9KpxSVFCu0iK1owoez6aC/s/EdUQLDN3adTxGCqxMVhrPDj6bt5dbrHDXUuq+Bs2vATFBBrQS5vdQ/Ed2P+nbw==",
       "cpu": [
         "x64"
       ],
@@ -2131,6 +2148,19 @@
         "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
       }
     },
+    "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
     "node_modules/@eslint-community/regexpp": {
       "version": "4.12.1",
       "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
@@ -2141,24 +2171,6 @@
         "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
       }
     },
-    "node_modules/@eslint/compat": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@eslint/compat/-/compat-1.3.2.tgz",
-      "integrity": "sha512-jRNwzTbd6p2Rw4sZ1CgWRS8YMtqG15YyZf7zvb6gY2rB2u6n+2Z+ELW0GtL0fQgyl0pr4Y/BzBfng/BdsereRA==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "peerDependencies": {
-        "eslint": "^8.40 || 9"
-      },
-      "peerDependenciesMeta": {
-        "eslint": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@eslint/config-array": {
       "version": "0.21.0",
       "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.0.tgz",
@@ -2174,30 +2186,6 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
-    "node_modules/@eslint/config-array/node_modules/brace-expansion": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
-      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/@eslint/config-array/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/@eslint/config-helpers": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.3.1.tgz",
@@ -2245,17 +2233,6 @@
         "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/@eslint/eslintrc/node_modules/brace-expansion": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
-      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
     "node_modules/@eslint/eslintrc/node_modules/globals": {
       "version": "14.0.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
@@ -2269,33 +2246,10 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@eslint/eslintrc/node_modules/ignore": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
-      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 4"
-      }
-    },
-    "node_modules/@eslint/eslintrc/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/@eslint/js": {
-      "version": "9.35.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.35.0.tgz",
-      "integrity": "sha512-30iXE9whjlILfWobBkNerJo+TXYsgVM5ERQwMcMKCHckHflCmf7wXDAHlARoWnh0s1U72WqlbeyE7iAcCzuCPw==",
+      "version": "9.36.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.36.0.tgz",
+      "integrity": "sha512-uhCbYtYynH30iZErszX78U+nR3pJU3RHGQ57NXy5QupD4SBVwDeU8TNBy+MjMngc1UyIW9noKqsRqfjQTBU2dw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -2597,9 +2551,9 @@
       }
     },
     "node_modules/@microsoft/api-extractor": {
-      "version": "7.52.12",
-      "resolved": "https://registry.npmjs.org/@microsoft/api-extractor/-/api-extractor-7.52.12.tgz",
-      "integrity": "sha512-f1UNgOLCMydwCJ+eZvH0dMxMq3lEEvXsLqlvDOdx136cRITK6xPES2xxgN/0NPCFpQad2HtMHxtPM9oGuqQx6g==",
+      "version": "7.52.13",
+      "resolved": "https://registry.npmjs.org/@microsoft/api-extractor/-/api-extractor-7.52.13.tgz",
+      "integrity": "sha512-K6/bBt8zZfn9yc06gNvA+/NlBGJC/iJlObpdufXHEJtqcD4Dln4ITCLZpwP3DNZ5NyBFeTkKdv596go3V72qlA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3101,6 +3055,19 @@
         "node": ">=14"
       }
     },
+    "node_modules/@pkgr/core": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.2.9.tgz",
+      "integrity": "sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/pkgr"
+      }
+    },
     "node_modules/@reaviz/react-use-fuzzy": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@reaviz/react-use-fuzzy/-/react-use-fuzzy-1.0.3.tgz",
@@ -3112,9 +3079,9 @@
       }
     },
     "node_modules/@rolldown/pluginutils": {
-      "version": "1.0.0-beta.34",
-      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.34.tgz",
-      "integrity": "sha512-LyAREkZHP5pMom7c24meKmJCdhf2hEyvam2q0unr3or9ydwDL+DJ8chTF6Av/RFPb3rH8UFBdMzO5MxTZW97oA==",
+      "version": "1.0.0-beta.38",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.38.tgz",
+      "integrity": "sha512-N/ICGKleNhA5nc9XXQG/kkKHJ7S55u0x0XUJbbkmdCnFuoRkM1Il12q9q0eX19+M7KKUEPw/daUPIRnxhcxAIw==",
       "dev": true,
       "license": "MIT"
     },
@@ -3142,9 +3109,9 @@
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.50.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.50.1.tgz",
-      "integrity": "sha512-HJXwzoZN4eYTdD8bVV22DN8gsPCAj3V20NHKOs8ezfXanGpmVPR7kalUHd+Y31IJp9stdB87VKPFbsGY3H/2ag==",
+      "version": "4.52.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.52.3.tgz",
+      "integrity": "sha512-h6cqHGZ6VdnwliFG1NXvMPTy/9PS3h8oLh7ImwR+kl+oYnQizgjxsONmmPSb2C66RksfkfIxEVtDSEcJiO0tqw==",
       "cpu": [
         "arm"
       ],
@@ -3156,9 +3123,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.50.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.50.1.tgz",
-      "integrity": "sha512-PZlsJVcjHfcH53mOImyt3bc97Ep3FJDXRpk9sMdGX0qgLmY0EIWxCag6EigerGhLVuL8lDVYNnSo8qnTElO4xw==",
+      "version": "4.52.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.52.3.tgz",
+      "integrity": "sha512-wd+u7SLT/u6knklV/ifG7gr5Qy4GUbH2hMWcDauPFJzmCZUAJ8L2bTkVXC2niOIxp8lk3iH/QX8kSrUxVZrOVw==",
       "cpu": [
         "arm64"
       ],
@@ -3170,9 +3137,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.50.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.50.1.tgz",
-      "integrity": "sha512-xc6i2AuWh++oGi4ylOFPmzJOEeAa2lJeGUGb4MudOtgfyyjr4UPNK+eEWTPLvmPJIY/pgw6ssFIox23SyrkkJw==",
+      "version": "4.52.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.52.3.tgz",
+      "integrity": "sha512-lj9ViATR1SsqycwFkJCtYfQTheBdvlWJqzqxwc9f2qrcVrQaF/gCuBRTiTolkRWS6KvNxSk4KHZWG7tDktLgjg==",
       "cpu": [
         "arm64"
       ],
@@ -3184,9 +3151,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.50.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.50.1.tgz",
-      "integrity": "sha512-2ofU89lEpDYhdLAbRdeyz/kX3Y2lpYc6ShRnDjY35bZhd2ipuDMDi6ZTQ9NIag94K28nFMofdnKeHR7BT0CATw==",
+      "version": "4.52.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.52.3.tgz",
+      "integrity": "sha512-+Dyo7O1KUmIsbzx1l+4V4tvEVnVQqMOIYtrxK7ncLSknl1xnMHLgn7gddJVrYPNZfEB8CIi3hK8gq8bDhb3h5A==",
       "cpu": [
         "x64"
       ],
@@ -3198,9 +3165,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.50.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.50.1.tgz",
-      "integrity": "sha512-wOsE6H2u6PxsHY/BeFHA4VGQN3KUJFZp7QJBmDYI983fgxq5Th8FDkVuERb2l9vDMs1D5XhOrhBrnqcEY6l8ZA==",
+      "version": "4.52.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.52.3.tgz",
+      "integrity": "sha512-u9Xg2FavYbD30g3DSfNhxgNrxhi6xVG4Y6i9Ur1C7xUuGDW3banRbXj+qgnIrwRN4KeJ396jchwy9bCIzbyBEQ==",
       "cpu": [
         "arm64"
       ],
@@ -3212,9 +3179,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.50.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.50.1.tgz",
-      "integrity": "sha512-A/xeqaHTlKbQggxCqispFAcNjycpUEHP52mwMQZUNqDUJFFYtPHCXS1VAG29uMlDzIVr+i00tSFWFLivMcoIBQ==",
+      "version": "4.52.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.52.3.tgz",
+      "integrity": "sha512-5M8kyi/OX96wtD5qJR89a/3x5x8x5inXBZO04JWhkQb2JWavOWfjgkdvUqibGJeNNaz1/Z1PPza5/tAPXICI6A==",
       "cpu": [
         "x64"
       ],
@@ -3226,9 +3193,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.50.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.50.1.tgz",
-      "integrity": "sha512-54v4okehwl5TaSIkpp97rAHGp7t3ghinRd/vyC1iXqXMfjYUTm7TfYmCzXDoHUPTTf36L8pr0E7YsD3CfB3ZDg==",
+      "version": "4.52.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.52.3.tgz",
+      "integrity": "sha512-IoerZJ4l1wRMopEHRKOO16e04iXRDyZFZnNZKrWeNquh5d6bucjezgd+OxG03mOMTnS1x7hilzb3uURPkJ0OfA==",
       "cpu": [
         "arm"
       ],
@@ -3240,9 +3207,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.50.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.50.1.tgz",
-      "integrity": "sha512-p/LaFyajPN/0PUHjv8TNyxLiA7RwmDoVY3flXHPSzqrGcIp/c2FjwPPP5++u87DGHtw+5kSH5bCJz0mvXngYxw==",
+      "version": "4.52.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.52.3.tgz",
+      "integrity": "sha512-ZYdtqgHTDfvrJHSh3W22TvjWxwOgc3ThK/XjgcNGP2DIwFIPeAPNsQxrJO5XqleSlgDux2VAoWQ5iJrtaC1TbA==",
       "cpu": [
         "arm"
       ],
@@ -3254,9 +3221,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.50.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.50.1.tgz",
-      "integrity": "sha512-2AbMhFFkTo6Ptna1zO7kAXXDLi7H9fGTbVaIq2AAYO7yzcAsuTNWPHhb2aTA6GPiP+JXh85Y8CiS54iZoj4opw==",
+      "version": "4.52.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.52.3.tgz",
+      "integrity": "sha512-NcViG7A0YtuFDA6xWSgmFb6iPFzHlf5vcqb2p0lGEbT+gjrEEz8nC/EeDHvx6mnGXnGCC1SeVV+8u+smj0CeGQ==",
       "cpu": [
         "arm64"
       ],
@@ -3268,9 +3235,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.50.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.50.1.tgz",
-      "integrity": "sha512-Cgef+5aZwuvesQNw9eX7g19FfKX5/pQRIyhoXLCiBOrWopjo7ycfB292TX9MDcDijiuIJlx1IzJz3IoCPfqs9w==",
+      "version": "4.52.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.52.3.tgz",
+      "integrity": "sha512-d3pY7LWno6SYNXRm6Ebsq0DJGoiLXTb83AIPCXl9fmtIQs/rXoS8SJxxUNtFbJ5MiOvs+7y34np77+9l4nfFMw==",
       "cpu": [
         "arm64"
       ],
@@ -3281,10 +3248,10 @@
         "linux"
       ]
     },
-    "node_modules/@rollup/rollup-linux-loongarch64-gnu": {
-      "version": "4.50.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.50.1.tgz",
-      "integrity": "sha512-RPhTwWMzpYYrHrJAS7CmpdtHNKtt2Ueo+BlLBjfZEhYBhK00OsEqM08/7f+eohiF6poe0YRDDd8nAvwtE/Y62Q==",
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.52.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.52.3.tgz",
+      "integrity": "sha512-3y5GA0JkBuirLqmjwAKwB0keDlI6JfGYduMlJD/Rl7fvb4Ni8iKdQs1eiunMZJhwDWdCvrcqXRY++VEBbvk6Eg==",
       "cpu": [
         "loong64"
       ],
@@ -3296,9 +3263,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-ppc64-gnu": {
-      "version": "4.50.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.50.1.tgz",
-      "integrity": "sha512-eSGMVQw9iekut62O7eBdbiccRguuDgiPMsw++BVUg+1K7WjZXHOg/YOT9SWMzPZA+w98G+Fa1VqJgHZOHHnY0Q==",
+      "version": "4.52.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.52.3.tgz",
+      "integrity": "sha512-AUUH65a0p3Q0Yfm5oD2KVgzTKgwPyp9DSXc3UA7DtxhEb/WSPfbG4wqXeSN62OG5gSo18em4xv6dbfcUGXcagw==",
       "cpu": [
         "ppc64"
       ],
@@ -3310,9 +3277,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.50.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.50.1.tgz",
-      "integrity": "sha512-S208ojx8a4ciIPrLgazF6AgdcNJzQE4+S9rsmOmDJkusvctii+ZvEuIC4v/xFqzbuP8yDjn73oBlNDgF6YGSXQ==",
+      "version": "4.52.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.52.3.tgz",
+      "integrity": "sha512-1makPhFFVBqZE+XFg3Dkq+IkQ7JvmUrwwqaYBL2CE+ZpxPaqkGaiWFEWVGyvTwZace6WLJHwjVh/+CXbKDGPmg==",
       "cpu": [
         "riscv64"
       ],
@@ -3324,9 +3291,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-musl": {
-      "version": "4.50.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.50.1.tgz",
-      "integrity": "sha512-3Ag8Ls1ggqkGUvSZWYcdgFwriy2lWo+0QlYgEFra/5JGtAd6C5Hw59oojx1DeqcA2Wds2ayRgvJ4qxVTzCHgzg==",
+      "version": "4.52.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.52.3.tgz",
+      "integrity": "sha512-OOFJa28dxfl8kLOPMUOQBCO6z3X2SAfzIE276fwT52uXDWUS178KWq0pL7d6p1kz7pkzA0yQwtqL0dEPoVcRWg==",
       "cpu": [
         "riscv64"
       ],
@@ -3338,9 +3305,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.50.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.50.1.tgz",
-      "integrity": "sha512-t9YrKfaxCYe7l7ldFERE1BRg/4TATxIg+YieHQ966jwvo7ddHJxPj9cNFWLAzhkVsbBvNA4qTbPVNsZKBO4NSg==",
+      "version": "4.52.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.52.3.tgz",
+      "integrity": "sha512-jMdsML2VI5l+V7cKfZx3ak+SLlJ8fKvLJ0Eoa4b9/vCUrzXKgoKxvHqvJ/mkWhFiyp88nCkM5S2v6nIwRtPcgg==",
       "cpu": [
         "s390x"
       ],
@@ -3352,9 +3319,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.50.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.50.1.tgz",
-      "integrity": "sha512-MCgtFB2+SVNuQmmjHf+wfI4CMxy3Tk8XjA5Z//A0AKD7QXUYFMQcns91K6dEHBvZPCnhJSyDWLApk40Iq/H3tA==",
+      "version": "4.52.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.52.3.tgz",
+      "integrity": "sha512-tPgGd6bY2M2LJTA1uGq8fkSPK8ZLYjDjY+ZLK9WHncCnfIz29LIXIqUgzCR0hIefzy6Hpbe8Th5WOSwTM8E7LA==",
       "cpu": [
         "x64"
       ],
@@ -3366,9 +3333,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.50.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.50.1.tgz",
-      "integrity": "sha512-nEvqG+0jeRmqaUMuwzlfMKwcIVffy/9KGbAGyoa26iu6eSngAYQ512bMXuqqPrlTyfqdlB9FVINs93j534UJrg==",
+      "version": "4.52.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.52.3.tgz",
+      "integrity": "sha512-BCFkJjgk+WFzP+tcSMXq77ymAPIxsX9lFJWs+2JzuZTLtksJ2o5hvgTdIcZ5+oKzUDMwI0PfWzRBYAydAHF2Mw==",
       "cpu": [
         "x64"
       ],
@@ -3380,9 +3347,9 @@
       ]
     },
     "node_modules/@rollup/rollup-openharmony-arm64": {
-      "version": "4.50.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.50.1.tgz",
-      "integrity": "sha512-RDsLm+phmT3MJd9SNxA9MNuEAO/J2fhW8GXk62G/B4G7sLVumNFbRwDL6v5NrESb48k+QMqdGbHgEtfU0LCpbA==",
+      "version": "4.52.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.52.3.tgz",
+      "integrity": "sha512-KTD/EqjZF3yvRaWUJdD1cW+IQBk4fbQaHYJUmP8N4XoKFZilVL8cobFSTDnjTtxWJQ3JYaMgF4nObY/+nYkumA==",
       "cpu": [
         "arm64"
       ],
@@ -3394,9 +3361,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.50.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.50.1.tgz",
-      "integrity": "sha512-hpZB/TImk2FlAFAIsoElM3tLzq57uxnGYwplg6WDyAxbYczSi8O2eQ+H2Lx74504rwKtZ3N2g4bCUkiamzS6TQ==",
+      "version": "4.52.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.52.3.tgz",
+      "integrity": "sha512-+zteHZdoUYLkyYKObGHieibUFLbttX2r+58l27XZauq0tcWYYuKUwY2wjeCN9oK1Um2YgH2ibd6cnX/wFD7DuA==",
       "cpu": [
         "arm64"
       ],
@@ -3408,9 +3375,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.50.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.50.1.tgz",
-      "integrity": "sha512-SXjv8JlbzKM0fTJidX4eVsH+Wmnp0/WcD8gJxIZyR6Gay5Qcsmdbi9zVtnbkGPG8v2vMR1AD06lGWy5FLMcG7A==",
+      "version": "4.52.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.52.3.tgz",
+      "integrity": "sha512-of1iHkTQSo3kr6dTIRX6t81uj/c/b15HXVsPcEElN5sS859qHrOepM5p9G41Hah+CTqSh2r8Bm56dL2z9UQQ7g==",
       "cpu": [
         "ia32"
       ],
@@ -3421,10 +3388,24 @@
         "win32"
       ]
     },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.52.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.52.3.tgz",
+      "integrity": "sha512-s0hybmlHb56mWVZQj8ra9048/WZTPLILKxcvcq+8awSZmyiSUZjjem1AhU3Tf4ZKpYhK4mg36HtHDOe8QJS5PQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.50.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.50.1.tgz",
-      "integrity": "sha512-StxAO/8ts62KZVRAm4JZYq9+NqNsV7RvimNK+YM7ry//zebEH6meuugqW/P5OFUCjyQgui+9fUxT6d5NShvMvA==",
+      "version": "4.52.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.52.3.tgz",
+      "integrity": "sha512-zGIbEVVXVtauFgl3MRwGWEN36P5ZGenHRMgNw88X5wEhEBpq0XrMEZwOn07+ICrwM17XO5xfMZqh0OldCH5VTA==",
       "cpu": [
         "x64"
       ],
@@ -3435,6 +3416,13 @@
         "win32"
       ]
     },
+    "node_modules/@rtsao/scc": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
+      "integrity": "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@rushstack/node-core-library": {
       "version": "5.14.0",
       "resolved": "https://registry.npmjs.org/@rushstack/node-core-library/-/node-core-library-5.14.0.tgz",
@@ -3624,16 +3612,16 @@
       }
     },
     "node_modules/@storybook/addon-docs": {
-      "version": "9.1.5",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-9.1.5.tgz",
-      "integrity": "sha512-q1j5RRElxFSnHOh60eS3dS2TAyAHzcQeH/2B9UXo6MUHu7HmhNpw3qt2YibIw0zEogHCvZhLNx6TNzSy+7wRUw==",
+      "version": "9.1.9",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-9.1.9.tgz",
+      "integrity": "sha512-76OHwsYCC6u8Nu5IUQ3E580BVnto6u4UgQC66inf+ot0+LI9fFPieg7fmcnQtYoFwiAyya3/JEwhY2GuFk7eMg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@mdx-js/react": "^3.0.0",
-        "@storybook/csf-plugin": "9.1.5",
+        "@storybook/csf-plugin": "9.1.9",
         "@storybook/icons": "^1.4.0",
-        "@storybook/react-dom-shim": "9.1.5",
+        "@storybook/react-dom-shim": "9.1.9",
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
         "ts-dedent": "^2.0.0"
@@ -3643,7 +3631,7 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^9.1.5"
+        "storybook": "^9.1.9"
       }
     },
     "node_modules/@storybook/addon-essentials": {
@@ -3777,9 +3765,9 @@
       }
     },
     "node_modules/@storybook/addon-themes": {
-      "version": "9.1.5",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-themes/-/addon-themes-9.1.5.tgz",
-      "integrity": "sha512-YGvI1RBkf46o0DTnPTkjfNSQKvhidtdiotyIPlfzheL4XlbOvnXrfkbv//dyweG2Lkl4+E8G2OAOY6kJwUJYyQ==",
+      "version": "9.1.9",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-themes/-/addon-themes-9.1.9.tgz",
+      "integrity": "sha512-XcK8hYJlGnIcX3vjAzE9drJ4f5HqHC2yonIggiO8hR8cwtF81DwnSttxDwnqEMLdqhosTssGuFWn7yau21WfnQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3790,17 +3778,17 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^9.1.5"
+        "storybook": "^9.1.9"
       }
     },
     "node_modules/@storybook/builder-vite": {
-      "version": "9.1.5",
-      "resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-9.1.5.tgz",
-      "integrity": "sha512-sgt/9+Yl/5O7Bj5hdbHfadN8e/e4CNiDZKDcbLOMpOjKKoqF8vm19I1QocWIAiKjTOhF+4E9v9LddjtAGnfqHQ==",
+      "version": "9.1.9",
+      "resolved": "https://registry.npmjs.org/@storybook/builder-vite/-/builder-vite-9.1.9.tgz",
+      "integrity": "sha512-tCQ2Bv07D0roTg6+c1dCrX6PmAwEpKkwX4eqq32vGYiQ0CTzWP1ivBUAzBvIIHD2FY/zLXzXSrDo/qtrQppCGw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@storybook/csf-plugin": "9.1.5",
+        "@storybook/csf-plugin": "9.1.9",
         "ts-dedent": "^2.0.0"
       },
       "funding": {
@@ -3808,14 +3796,14 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^9.1.5",
+        "storybook": "^9.1.9",
         "vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
       }
     },
     "node_modules/@storybook/csf-plugin": {
-      "version": "9.1.5",
-      "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-9.1.5.tgz",
-      "integrity": "sha512-PmHuF+j11Z7BxAI2/4wQYn0gH1d67gNvycyR+EWgp4P/AWam9wFbuI/T1R45CRQTV2/VrfGdts/tFrvo5kXWig==",
+      "version": "9.1.9",
+      "resolved": "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-9.1.9.tgz",
+      "integrity": "sha512-8tMZaGqer9PkPl7xRD/d97pgzl6Aw5/rWH+q8fAA09bvjLllKOlytj3vTckGJ4DlkKKXGvxoECG/n35AbJOYIA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3826,7 +3814,7 @@
         "url": "https://opencollective.com/storybook"
       },
       "peerDependencies": {
-        "storybook": "^9.1.5"
+        "storybook": "^9.1.9"
       }
     },
     "node_modules/@storybook/global": {
@@ -3837,9 +3825,9 @@
       "license": "MIT"
     },
     "node_modules/@storybook/icons": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@storybook/icons/-/icons-1.4.0.tgz",
-      "integrity": "sha512-Td73IeJxOyalzvjQL+JXx72jlIYHgs+REaHiREOqfpo3A2AYYG71AUbcv+lg7mEDIweKVCxsMQ0UKo634c8XeA==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@storybook/icons/-/icons-1.6.0.tgz",
+      "integrity": "sha512-hcFZIjW8yQz8O8//2WTIXylm5Xsgc+lW9ISLgUk1xGmptIJQRdlhVIXCpSyLrQaaRiyhQRaVg7l3BD9S216BHw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -3879,14 +3867,14 @@
       }
     },
     "node_modules/@storybook/react": {
-      "version": "9.1.5",
-      "resolved": "https://registry.npmjs.org/@storybook/react/-/react-9.1.5.tgz",
-      "integrity": "sha512-fBVP7Go09gzpImtaMcZ2DipLEWdWeTmz7BrACr3Z8uCyKcoH8/d1Wv0JgIiBo1UKDh5ZgYx5pLafaPNqmVAepg==",
+      "version": "9.1.9",
+      "resolved": "https://registry.npmjs.org/@storybook/react/-/react-9.1.9.tgz",
+      "integrity": "sha512-S06dZv8ebUmCrIP2GfIqD3g1F5LKBf0Lc1daSd2++2MI6i8zw8kZ8IAGg5bYrWb0nk56JHALCwXAzsGyRepEww==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@storybook/global": "^5.0.0",
-        "@storybook/react-dom-shim": "9.1.5"
+        "@storybook/react-dom-shim": "9.1.9"
       },
       "engines": {
         "node": ">=20.0.0"
@@ -3898,7 +3886,7 @@
       "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": "^9.1.5",
+        "storybook": "^9.1.9",
         "typescript": ">= 4.9.x"
       },
       "peerDependenciesMeta": {
@@ -3908,9 +3896,9 @@
       }
     },
     "node_modules/@storybook/react-dom-shim": {
-      "version": "9.1.5",
-      "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-9.1.5.tgz",
-      "integrity": "sha512-blSq9uzSYnfgEYPHYKgM5O14n8hbXNiXx2GiVJyDSg8QPNicbsBg+lCb1TC7/USfV26pNZr/lGNNKGkcCEN6Gw==",
+      "version": "9.1.9",
+      "resolved": "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-9.1.9.tgz",
+      "integrity": "sha512-RFaB+N63XXEEo8l5INlvWnqxDUH7UGZ++MOsFsVUqfn7lAzxfR9HcJTGN3WOyIDBoS0vD3+LfnplqFyQU/anuw==",
       "dev": true,
       "license": "MIT",
       "funding": {
@@ -3920,20 +3908,20 @@
       "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": "^9.1.5"
+        "storybook": "^9.1.9"
       }
     },
     "node_modules/@storybook/react-vite": {
-      "version": "9.1.5",
-      "resolved": "https://registry.npmjs.org/@storybook/react-vite/-/react-vite-9.1.5.tgz",
-      "integrity": "sha512-OYbkHHNCrn8MNPd+4KxMjcSR4M/YHa84h8sWDUHhKRTRtZFmj8i/QDW3E8tGx2BRLxXw3dTYe9J5UYBhJDDxFA==",
+      "version": "9.1.9",
+      "resolved": "https://registry.npmjs.org/@storybook/react-vite/-/react-vite-9.1.9.tgz",
+      "integrity": "sha512-k+wbLdM8963YkQmVSFEuigUfGZKEgUdA7tTazXGzkL65j0il93JbtFCso8spKePlgeQ2uD6RxbXUp+E3qLeRSw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@joshwooding/vite-plugin-react-docgen-typescript": "0.6.1",
         "@rollup/pluginutils": "^5.0.2",
-        "@storybook/builder-vite": "9.1.5",
-        "@storybook/react": "9.1.5",
+        "@storybook/builder-vite": "9.1.9",
+        "@storybook/react": "9.1.9",
         "find-up": "^7.0.0",
         "magic-string": "^0.30.0",
         "react-docgen": "^8.0.0",
@@ -3950,7 +3938,7 @@
       "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": "^9.1.5",
+        "storybook": "^9.1.9",
         "vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
       }
     },
@@ -4507,9 +4495,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide/node_modules/detect-libc": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
-      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.1.tgz",
+      "integrity": "sha512-ecqj/sy1jcK1uWrwpR67UhYrIFQ+5WlGxth34WquCbamhFA6hkkwiu37o6J5xCHdo1oixJRfVRw+ywV+Hq/0Aw==",
       "dev": true,
       "license": "Apache-2.0",
       "engines": {
@@ -4726,6 +4714,40 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/json5": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
+      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/lodash": {
+      "version": "4.17.20",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.20.tgz",
+      "integrity": "sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/lodash.clonedeep": {
+      "version": "4.5.9",
+      "resolved": "https://registry.npmjs.org/@types/lodash.clonedeep/-/lodash.clonedeep-4.5.9.tgz",
+      "integrity": "sha512-19429mWC+FyaAhOLzsS8kZUsI+/GmBAQ0HFiCPsKGU+7pBXOQWhyrY6xNNDwUSX8SMZMJvuFVMF9O5dQOlQK9Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
+    "node_modules/@types/lodash.mergewith": {
+      "version": "4.6.9",
+      "resolved": "https://registry.npmjs.org/@types/lodash.mergewith/-/lodash.mergewith-4.6.9.tgz",
+      "integrity": "sha512-fgkoCAOF47K7sxrQ7Mlud2TH023itugZs2bUg8h/KzT+BnZNrR2jAOmaokbLunHNnobXVWOezAeNn/lZqwxkcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
     "node_modules/@types/mdast": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
@@ -4751,9 +4773,9 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "22.18.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.18.1.tgz",
-      "integrity": "sha512-rzSDyhn4cYznVG+PCzGe1lwuMYJrcBS1fc3JqSa2PvtABwWo+dZ1ij5OVok3tqfpEBCBoaR4d7upFJk73HRJDw==",
+      "version": "22.18.7",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.18.7.tgz",
+      "integrity": "sha512-3E97nlWEVp2V6J7aMkR8eOnw/w0pArPwf/5/W0865f+xzBoGL/ZuHkTAKAGN7cOWNwd+sG+hZOqj+fjzeHS75g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4768,9 +4790,9 @@
       "license": "MIT"
     },
     "node_modules/@types/react": {
-      "version": "18.3.24",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.24.tgz",
-      "integrity": "sha512-0dLEBsA1kI3OezMBF8nSsb7Nk19ZnsyE1LLhB8r27KbgU5H4pvuqZLdtE+aUkJVoXgTVuA+iLIwmZ0TuK4tx6A==",
+      "version": "18.3.25",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.25.tgz",
+      "integrity": "sha512-oSVZmGtDPmRZtVDqvdKUi/qgCsWp5IDY29wp8na8Bj4B3cc99hfNzvNhlMkVVxctkAOGUA3Km7MMpBHAnWfcIA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4803,17 +4825,17 @@
       "license": "MIT"
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.43.0.tgz",
-      "integrity": "sha512-8tg+gt7ENL7KewsKMKDHXR1vm8tt9eMxjJBYINf6swonlWgkYn5NwyIgXpbbDxTNU5DgpDFfj95prcTq2clIQQ==",
+      "version": "8.45.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.45.0.tgz",
+      "integrity": "sha512-HC3y9CVuevvWCl/oyZuI47dOeDF9ztdMEfMH8/DW/Mhwa9cCLnK1oD7JoTVGW/u7kFzNZUKUoyJEqkaJh5y3Wg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "8.43.0",
-        "@typescript-eslint/type-utils": "8.43.0",
-        "@typescript-eslint/utils": "8.43.0",
-        "@typescript-eslint/visitor-keys": "8.43.0",
+        "@typescript-eslint/scope-manager": "8.45.0",
+        "@typescript-eslint/type-utils": "8.45.0",
+        "@typescript-eslint/utils": "8.45.0",
+        "@typescript-eslint/visitor-keys": "8.45.0",
         "graphemer": "^1.4.0",
         "ignore": "^7.0.0",
         "natural-compare": "^1.4.0",
@@ -4827,22 +4849,32 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^8.43.0",
+        "@typescript-eslint/parser": "^8.45.0",
         "eslint": "^8.57.0 || ^9.0.0",
         "typescript": ">=4.8.4 <6.0.0"
       }
     },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/@typescript-eslint/parser": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.43.0.tgz",
-      "integrity": "sha512-B7RIQiTsCBBmY+yW4+ILd6mF5h1FUwJsVvpqkrgpszYifetQ2Ke+Z4u6aZh0CblkUGIdR59iYVyXqqZGkZ3aBw==",
+      "version": "8.45.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.45.0.tgz",
+      "integrity": "sha512-TGf22kon8KW+DeKaUmOibKWktRY8b2NSAZNdtWh798COm1NWx8+xJ6iFBtk3IvLdv6+LGLJLRlyhrhEDZWargQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.43.0",
-        "@typescript-eslint/types": "8.43.0",
-        "@typescript-eslint/typescript-estree": "8.43.0",
-        "@typescript-eslint/visitor-keys": "8.43.0",
+        "@typescript-eslint/scope-manager": "8.45.0",
+        "@typescript-eslint/types": "8.45.0",
+        "@typescript-eslint/typescript-estree": "8.45.0",
+        "@typescript-eslint/visitor-keys": "8.45.0",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -4858,14 +4890,14 @@
       }
     },
     "node_modules/@typescript-eslint/project-service": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.43.0.tgz",
-      "integrity": "sha512-htB/+D/BIGoNTQYffZw4uM4NzzuolCoaA/BusuSIcC8YjmBYQioew5VUZAYdAETPjeed0hqCaW7EHg+Robq8uw==",
+      "version": "8.45.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.45.0.tgz",
+      "integrity": "sha512-3pcVHwMG/iA8afdGLMuTibGR7pDsn9RjDev6CCB+naRsSYs2pns5QbinF4Xqw6YC/Sj3lMrm/Im0eMfaa61WUg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/tsconfig-utils": "^8.43.0",
-        "@typescript-eslint/types": "^8.43.0",
+        "@typescript-eslint/tsconfig-utils": "^8.45.0",
+        "@typescript-eslint/types": "^8.45.0",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -4880,14 +4912,14 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.43.0.tgz",
-      "integrity": "sha512-daSWlQ87ZhsjrbMLvpuuMAt3y4ba57AuvadcR7f3nl8eS3BjRc8L9VLxFLk92RL5xdXOg6IQ+qKjjqNEimGuAg==",
+      "version": "8.45.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.45.0.tgz",
+      "integrity": "sha512-clmm8XSNj/1dGvJeO6VGH7EUSeA0FMs+5au/u3lrA3KfG8iJ4u8ym9/j2tTEoacAffdW1TVUzXO30W1JTJS7dA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.43.0",
-        "@typescript-eslint/visitor-keys": "8.43.0"
+        "@typescript-eslint/types": "8.45.0",
+        "@typescript-eslint/visitor-keys": "8.45.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -4898,9 +4930,9 @@
       }
     },
     "node_modules/@typescript-eslint/tsconfig-utils": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.43.0.tgz",
-      "integrity": "sha512-ALC2prjZcj2YqqL5X/bwWQmHA2em6/94GcbB/KKu5SX3EBDOsqztmmX1kMkvAJHzxk7TazKzJfFiEIagNV3qEA==",
+      "version": "8.45.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.45.0.tgz",
+      "integrity": "sha512-aFdr+c37sc+jqNMGhH+ajxPXwjv9UtFZk79k8pLoJ6p4y0snmYpPA52GuWHgt2ZF4gRRW6odsEj41uZLojDt5w==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -4915,15 +4947,15 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.43.0.tgz",
-      "integrity": "sha512-qaH1uLBpBuBBuRf8c1mLJ6swOfzCXryhKND04Igr4pckzSEW9JX5Aw9AgW00kwfjWJF0kk0ps9ExKTfvXfw4Qg==",
+      "version": "8.45.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.45.0.tgz",
+      "integrity": "sha512-bpjepLlHceKgyMEPglAeULX1vixJDgaKocp0RVJ5u4wLJIMNuKtUXIczpJCPcn2waII0yuvks/5m5/h3ZQKs0A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.43.0",
-        "@typescript-eslint/typescript-estree": "8.43.0",
-        "@typescript-eslint/utils": "8.43.0",
+        "@typescript-eslint/types": "8.45.0",
+        "@typescript-eslint/typescript-estree": "8.45.0",
+        "@typescript-eslint/utils": "8.45.0",
         "debug": "^4.3.4",
         "ts-api-utils": "^2.1.0"
       },
@@ -4940,9 +4972,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.43.0.tgz",
-      "integrity": "sha512-vQ2FZaxJpydjSZJKiSW/LJsabFFvV7KgLC5DiLhkBcykhQj8iK9BOaDmQt74nnKdLvceM5xmhaTF+pLekrxEkw==",
+      "version": "8.45.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.45.0.tgz",
+      "integrity": "sha512-WugXLuOIq67BMgQInIxxnsSyRLFxdkJEJu8r4ngLR56q/4Q5LrbfkFRH27vMTjxEK8Pyz7QfzuZe/G15qQnVRA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -4954,16 +4986,16 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.43.0.tgz",
-      "integrity": "sha512-7Vv6zlAhPb+cvEpP06WXXy/ZByph9iL6BQRBDj4kmBsW98AqEeQHlj/13X+sZOrKSo9/rNKH4Ul4f6EICREFdw==",
+      "version": "8.45.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.45.0.tgz",
+      "integrity": "sha512-GfE1NfVbLam6XQ0LcERKwdTTPlLvHvXXhOeUGC1OXi4eQBoyy1iVsW+uzJ/J9jtCz6/7GCQ9MtrQ0fml/jWCnA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/project-service": "8.43.0",
-        "@typescript-eslint/tsconfig-utils": "8.43.0",
-        "@typescript-eslint/types": "8.43.0",
-        "@typescript-eslint/visitor-keys": "8.43.0",
+        "@typescript-eslint/project-service": "8.45.0",
+        "@typescript-eslint/tsconfig-utils": "8.45.0",
+        "@typescript-eslint/types": "8.45.0",
+        "@typescript-eslint/visitor-keys": "8.45.0",
         "debug": "^4.3.4",
         "fast-glob": "^3.3.2",
         "is-glob": "^4.0.3",
@@ -4982,17 +5014,56 @@
         "typescript": ">=4.8.4 <6.0.0"
       }
     },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@typescript-eslint/utils": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.43.0.tgz",
-      "integrity": "sha512-S1/tEmkUeeswxd0GGcnwuVQPFWo8NzZTOMxCvw8BX7OMxnNae+i8Tm7REQen/SwUIPoPqfKn7EaZ+YLpiB3k9g==",
+      "version": "8.45.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.45.0.tgz",
+      "integrity": "sha512-bxi1ht+tLYg4+XV2knz/F7RVhU0k6VrSMc9sb8DQ6fyCTrGQLHfo7lDtN0QJjZjKkLA2ThrKuCdHEvLReqtIGg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.7.0",
-        "@typescript-eslint/scope-manager": "8.43.0",
-        "@typescript-eslint/types": "8.43.0",
-        "@typescript-eslint/typescript-estree": "8.43.0"
+        "@typescript-eslint/scope-manager": "8.45.0",
+        "@typescript-eslint/types": "8.45.0",
+        "@typescript-eslint/typescript-estree": "8.45.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -5007,13 +5078,13 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.43.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.43.0.tgz",
-      "integrity": "sha512-T+S1KqRD4sg/bHfLwrpF/K3gQLBM1n7Rp7OjjikjTEssI2YJzQpi5WXoynOaQ93ERIuq3O8RBTOUYDKszUCEHw==",
+      "version": "8.45.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.45.0.tgz",
+      "integrity": "sha512-qsaFBA3e09MIDAGFUrTk+dzqtfv1XPVz8t8d1f0ybTzrCY7BKiMC5cjrl1O/P7UmHsNyW90EYSkU/ZWpmXelag==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.43.0",
+        "@typescript-eslint/types": "8.45.0",
         "eslint-visitor-keys": "^4.2.1"
       },
       "engines": {
@@ -5024,30 +5095,17 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
-      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
     "node_modules/@vitejs/plugin-react": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.0.2.tgz",
-      "integrity": "sha512-tmyFgixPZCx2+e6VO9TNITWcCQl8+Nl/E8YbAyPVv85QCc7/A3JrdfG2A8gIzvVhWuzMOVrFW1aReaNxrI6tbw==",
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.0.4.tgz",
+      "integrity": "sha512-La0KD0vGkVkSk6K+piWDKRUyg8Rl5iAIKRMH0vMJI0Eg47bq1eOxmoObAaQG37WMW9MSyk7Cs8EIWwJC1PtzKA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/core": "^7.28.3",
+        "@babel/core": "^7.28.4",
         "@babel/plugin-transform-react-jsx-self": "^7.27.1",
         "@babel/plugin-transform-react-jsx-source": "^7.27.1",
-        "@rolldown/pluginutils": "1.0.0-beta.34",
+        "@rolldown/pluginutils": "1.0.0-beta.38",
         "@types/babel__core": "^7.20.5",
         "react-refresh": "^0.17.0"
       },
@@ -5247,14 +5305,14 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.5.21",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.21.tgz",
-      "integrity": "sha512-8i+LZ0vf6ZgII5Z9XmUvrCyEzocvWT+TeR2VBUVlzIH6Tyv57E20mPZ1bCS+tbejgUgmjrEh7q/0F0bibskAmw==",
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.22.tgz",
+      "integrity": "sha512-jQ0pFPmZwTEiRNSb+i9Ow/I/cHv2tXYqsnHKKyCQ08irI2kdF5qmYedmF8si8mA7zepUFmJ2hqzS8CQmNOWOkQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/parser": "^7.28.3",
-        "@vue/shared": "3.5.21",
+        "@babel/parser": "^7.28.4",
+        "@vue/shared": "3.5.22",
         "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.2.1"
@@ -5274,14 +5332,14 @@
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.5.21",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.21.tgz",
-      "integrity": "sha512-jNtbu/u97wiyEBJlJ9kmdw7tAr5Vy0Aj5CgQmo+6pxWNQhXZDPsRr1UWPN4v3Zf82s2H3kF51IbzZ4jMWAgPlQ==",
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.22.tgz",
+      "integrity": "sha512-W8RknzUM1BLkypvdz10OVsGxnMAuSIZs9Wdx1vzA3mL5fNMN15rhrSCLiTm6blWeACwUwizzPVqGJgOGBEN/hA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@vue/compiler-core": "3.5.21",
-        "@vue/shared": "3.5.21"
+        "@vue/compiler-core": "3.5.22",
+        "@vue/shared": "3.5.22"
       }
     },
     "node_modules/@vue/compiler-vue2": {
@@ -5320,10 +5378,36 @@
         }
       }
     },
+    "node_modules/@vue/language-core/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@vue/language-core/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/@vue/shared": {
-      "version": "3.5.21",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.21.tgz",
-      "integrity": "sha512-+2k1EQpnYuVuu3N7atWyG3/xoFWIVJZq4Mz8XNOdScFI0etES75fbny/oU4lKWk/577P1zmg0ioYvpGEDZ3DLw==",
+      "version": "3.5.22",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.22.tgz",
+      "integrity": "sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w==",
       "dev": true,
       "license": "MIT"
     },
@@ -5427,9 +5511,9 @@
       "license": "MIT"
     },
     "node_modules/ansi-escapes": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-7.1.0.tgz",
-      "integrity": "sha512-YdhtCd19sKRKfAAUsrcC1wzm4JuzJoiX4pOJqIoW2qmKj5WzG/dL8uUJ0361zaXtHqK7gEhOwtAtz7t3Yq3X5g==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-7.1.1.tgz",
+      "integrity": "sha512-Zhl0ErHcSRUaVfGUeUdDuLgpkEo8KIFjB4Y9uAc46ScOpdDiU1Dbyplh7qWJeJ/ZHpbyMSM26+X3BySgnIz40Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5573,6 +5657,28 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/array.prototype.findlastindex": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.6.tgz",
+      "integrity": "sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "es-shim-unscopables": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/array.prototype.flat": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz",
@@ -5712,6 +5818,16 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/async-generator-function": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/async-generator-function/-/async-generator-function-1.0.0.tgz",
+      "integrity": "sha512-+NAXNqgCrB95ya4Sr66i1CL2hqLVckAk7xwRYWdcm39/ELQ6YNn1aw5r0bdQtqNZgQpEWzc5yc/igXc7aL5SLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.21",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
@@ -5784,6 +5900,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.8.9",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.9.tgz",
+      "integrity": "sha512-hY/u2lxLrbecMEWSB0IpGzGyDyeoMFQhCvZd2jGFSE5I17Fh01sYUBPCJtkWERw7zrac9+cIghxm/ytJa2X8iA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.js"
+      }
+    },
     "node_modules/better-opn": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/better-opn/-/better-opn-3.0.2.tgz",
@@ -5817,13 +5943,14 @@
       "license": "MIT"
     },
     "node_modules/brace-expansion": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
-      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "balanced-match": "^1.0.0"
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
       }
     },
     "node_modules/braces": {
@@ -5840,9 +5967,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.25.4",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.25.4.tgz",
-      "integrity": "sha512-4jYpcjabC606xJ3kw2QwGEZKX0Aw7sgQdZCvIK9dhVSPh76BKo+C+btT1RRofH7B+8iNpEbgGNVWiLki5q93yg==",
+      "version": "4.26.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.26.2.tgz",
+      "integrity": "sha512-ECFzp6uFOSB+dcZ5BK/IBaGWssbSYBHvuMeMt3MMFyhI0Z8SqGgEkBLARgpRH3hutIgPVsALcMwbDrJqPxQ65A==",
       "dev": true,
       "funding": [
         {
@@ -5860,9 +5987,10 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "caniuse-lite": "^1.0.30001737",
-        "electron-to-chromium": "^1.5.211",
-        "node-releases": "^2.0.19",
+        "baseline-browser-mapping": "^2.8.3",
+        "caniuse-lite": "^1.0.30001741",
+        "electron-to-chromium": "^1.5.218",
+        "node-releases": "^2.0.21",
         "update-browserslist-db": "^1.1.3"
       },
       "bin": {
@@ -5956,9 +6084,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001741",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001741.tgz",
-      "integrity": "sha512-QGUGitqsc8ARjLdgAfxETDhRbJ0REsP6O3I96TAth/mVjh2cYzN2u+3AzPP3aVSm2FehEItaJw1xd+IGBXWeSw==",
+      "version": "1.0.30001746",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001746.tgz",
+      "integrity": "sha512-eA7Ys/DGw+pnkWWSE/id29f2IcPHVoE8wxtvE5JdvD2V28VTDPy1yEeo11Guz0sJ4ZeGRcm3uaTcAqK1LXaphA==",
       "dev": true,
       "funding": [
         {
@@ -6097,42 +6225,34 @@
       }
     },
     "node_modules/cli-truncate": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-4.0.0.tgz",
-      "integrity": "sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-5.1.0.tgz",
+      "integrity": "sha512-7JDGG+4Zp0CsknDCedl0DYdaeOhc46QNpXi3NLQblkZpXXgA6LncLDUUyvrjSvZeF3VRQa+KiMGomazQrC1V8g==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "slice-ansi": "^5.0.0",
-        "string-width": "^7.0.0"
+        "slice-ansi": "^7.1.0",
+        "string-width": "^8.0.0"
       },
       "engines": {
-        "node": ">=18"
+        "node": ">=20"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/cli-truncate/node_modules/emoji-regex": {
-      "version": "10.5.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.5.0.tgz",
-      "integrity": "sha512-lb49vf1Xzfx080OKA0o6l8DQQpV+6Vg95zyCJX9VB/BqKYlhG7N4wgROUUHRA+ZPUefLnteQOad7z1kT2bV7bg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/cli-truncate/node_modules/string-width": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
-      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-8.1.0.tgz",
+      "integrity": "sha512-Kxl3KJGb/gxkaUMOjRsQ8IrXiGW75O4E3RPjFIINOVH8AMl2SQ/yWdTzWwF3FevIX9LcMAjJW+GRwAlAbTSXdg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "emoji-regex": "^10.3.0",
-        "get-east-asian-width": "^1.0.0",
+        "get-east-asian-width": "^1.3.0",
         "strip-ansi": "^7.1.0"
       },
       "engines": {
-        "node": ">=18"
+        "node": ">=20"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -6173,9 +6293,9 @@
       "license": "MIT"
     },
     "node_modules/commander": {
-      "version": "14.0.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-14.0.0.tgz",
-      "integrity": "sha512-2uM9rYjPvyq39NwLRqaiLtWHyDC1FvryJDa2ATTVims5YAS4PupsEQsDvP14FqhFr0P49CYDugi59xaxJlTXRA==",
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-14.0.1.tgz",
+      "integrity": "sha512-2JkV3gUZUVrbNA+1sjBOYLsMZ5cEEl8GTFP2a4AVz5hvasAMCQ1D2l2le/cX+pV4N6ZU17zjUahLpIXRrnWL8A==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -6350,9 +6470,9 @@
       "license": "MIT"
     },
     "node_modules/cssdb": {
-      "version": "8.4.0",
-      "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-8.4.0.tgz",
-      "integrity": "sha512-lyATYGyvXwQ8h55WeQeEHXhI+47rl52pXSYkFK/ZrCbAJSgVIaPFjYc3RM8TpRHKk7W3wsAZImmLps+P5VyN9g==",
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-8.4.2.tgz",
+      "integrity": "sha512-PzjkRkRUS+IHDJohtxkIczlxPPZqRo0nXplsYXOMBRPjcVRjj1W4DfvRgshUYTVuUigU7ptVYkFJQ7abUB0nyg==",
       "dev": true,
       "funding": [
         {
@@ -6495,9 +6615,9 @@
       "license": "MIT"
     },
     "node_modules/debug": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
-      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -6634,16 +6754,16 @@
       }
     },
     "node_modules/doctrine": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
-      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
         "esutils": "^2.0.2"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=6.0.0"
       }
     },
     "node_modules/dom-accessibility-api": {
@@ -6688,9 +6808,9 @@
       "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.217",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.217.tgz",
-      "integrity": "sha512-Pludfu5iBxp9XzNl0qq2G87hdD17ZV7h5T4n6rQXDi3nCyloBV3jreE9+8GC6g4X/5yxqVgXEURpcLtM0WS4jA==",
+      "version": "1.5.227",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.227.tgz",
+      "integrity": "sha512-ITxuoPfJu3lsNWUi2lBM2PaBPYgH3uqmxut5vmBxgYvyI4AlJ6P3Cai1O76mOrkJCBzq0IxWg/NtqOrpu/0gKA==",
       "dev": true,
       "license": "ISC"
     },
@@ -6748,9 +6868,9 @@
       }
     },
     "node_modules/error-ex": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
-      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
+      "integrity": "sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -6953,9 +7073,9 @@
       ]
     },
     "node_modules/esbuild": {
-      "version": "0.25.9",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.9.tgz",
-      "integrity": "sha512-CRbODhYyQx3qp7ZEwzxOk4JBqmD/seJrzPa/cGjY1VtIn5E09Oi9/dB4JwctnfZ8Q8iT7rioVv5k/FNT/uf54g==",
+      "version": "0.25.10",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.10.tgz",
+      "integrity": "sha512-9RiGKvCwaqxO2owP61uQ4BgNborAQskMR6QusfWzQqv7AZOg5oGehdY2pRJMTKuwxd1IDBP4rSbI5lHzU7SMsQ==",
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
@@ -6966,32 +7086,32 @@
         "node": ">=18"
       },
       "optionalDependencies": {
-        "@esbuild/aix-ppc64": "0.25.9",
-        "@esbuild/android-arm": "0.25.9",
-        "@esbuild/android-arm64": "0.25.9",
-        "@esbuild/android-x64": "0.25.9",
-        "@esbuild/darwin-arm64": "0.25.9",
-        "@esbuild/darwin-x64": "0.25.9",
-        "@esbuild/freebsd-arm64": "0.25.9",
-        "@esbuild/freebsd-x64": "0.25.9",
-        "@esbuild/linux-arm": "0.25.9",
-        "@esbuild/linux-arm64": "0.25.9",
-        "@esbuild/linux-ia32": "0.25.9",
-        "@esbuild/linux-loong64": "0.25.9",
-        "@esbuild/linux-mips64el": "0.25.9",
-        "@esbuild/linux-ppc64": "0.25.9",
-        "@esbuild/linux-riscv64": "0.25.9",
-        "@esbuild/linux-s390x": "0.25.9",
-        "@esbuild/linux-x64": "0.25.9",
-        "@esbuild/netbsd-arm64": "0.25.9",
-        "@esbuild/netbsd-x64": "0.25.9",
-        "@esbuild/openbsd-arm64": "0.25.9",
-        "@esbuild/openbsd-x64": "0.25.9",
-        "@esbuild/openharmony-arm64": "0.25.9",
-        "@esbuild/sunos-x64": "0.25.9",
-        "@esbuild/win32-arm64": "0.25.9",
-        "@esbuild/win32-ia32": "0.25.9",
-        "@esbuild/win32-x64": "0.25.9"
+        "@esbuild/aix-ppc64": "0.25.10",
+        "@esbuild/android-arm": "0.25.10",
+        "@esbuild/android-arm64": "0.25.10",
+        "@esbuild/android-x64": "0.25.10",
+        "@esbuild/darwin-arm64": "0.25.10",
+        "@esbuild/darwin-x64": "0.25.10",
+        "@esbuild/freebsd-arm64": "0.25.10",
+        "@esbuild/freebsd-x64": "0.25.10",
+        "@esbuild/linux-arm": "0.25.10",
+        "@esbuild/linux-arm64": "0.25.10",
+        "@esbuild/linux-ia32": "0.25.10",
+        "@esbuild/linux-loong64": "0.25.10",
+        "@esbuild/linux-mips64el": "0.25.10",
+        "@esbuild/linux-ppc64": "0.25.10",
+        "@esbuild/linux-riscv64": "0.25.10",
+        "@esbuild/linux-s390x": "0.25.10",
+        "@esbuild/linux-x64": "0.25.10",
+        "@esbuild/netbsd-arm64": "0.25.10",
+        "@esbuild/netbsd-x64": "0.25.10",
+        "@esbuild/openbsd-arm64": "0.25.10",
+        "@esbuild/openbsd-x64": "0.25.10",
+        "@esbuild/openharmony-arm64": "0.25.10",
+        "@esbuild/sunos-x64": "0.25.10",
+        "@esbuild/win32-arm64": "0.25.10",
+        "@esbuild/win32-ia32": "0.25.10",
+        "@esbuild/win32-x64": "0.25.10"
       }
     },
     "node_modules/esbuild-register": {
@@ -7031,9 +7151,9 @@
       }
     },
     "node_modules/eslint": {
-      "version": "9.35.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.35.0.tgz",
-      "integrity": "sha512-QePbBFMJFjgmlE+cXAlbHZbHpdFVS2E/6vzCy7aKlebddvl1vadiC4JFV5u/wqTkNUwEV8WrQi257jf5f06hrg==",
+      "version": "9.36.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.36.0.tgz",
+      "integrity": "sha512-hB4FIzXovouYzwzECDcUkJ4OcfOEkXTv2zRY6B9bkwjx/cprAq0uvm1nl7zvQ0/TsUk0zQiN4uPfJpB9m+rPMQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -7043,7 +7163,7 @@
         "@eslint/config-helpers": "^0.3.1",
         "@eslint/core": "^0.15.2",
         "@eslint/eslintrc": "^3.3.1",
-        "@eslint/js": "9.35.0",
+        "@eslint/js": "9.36.0",
         "@eslint/plugin-kit": "^0.3.5",
         "@humanfs/node": "^0.16.6",
         "@humanwhocodes/module-importer": "^1.0.1",
@@ -7107,6 +7227,139 @@
         "eslint": ">=7.0.0"
       }
     },
+    "node_modules/eslint-import-resolver-node": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
+      "integrity": "sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^3.2.7",
+        "is-core-module": "^2.13.0",
+        "resolve": "^1.22.4"
+      }
+    },
+    "node_modules/eslint-import-resolver-node/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-module-utils": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.12.1.tgz",
+      "integrity": "sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^3.2.7"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependenciesMeta": {
+        "eslint": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-module-utils/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-plugin-import": {
+      "version": "2.32.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz",
+      "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rtsao/scc": "^1.1.0",
+        "array-includes": "^3.1.9",
+        "array.prototype.findlastindex": "^1.2.6",
+        "array.prototype.flat": "^1.3.3",
+        "array.prototype.flatmap": "^1.3.3",
+        "debug": "^3.2.7",
+        "doctrine": "^2.1.0",
+        "eslint-import-resolver-node": "^0.3.9",
+        "eslint-module-utils": "^2.12.1",
+        "hasown": "^2.0.2",
+        "is-core-module": "^2.16.1",
+        "is-glob": "^4.0.3",
+        "minimatch": "^3.1.2",
+        "object.fromentries": "^2.0.8",
+        "object.groupby": "^1.0.3",
+        "object.values": "^1.2.1",
+        "semver": "^6.3.1",
+        "string.prototype.trimend": "^1.0.9",
+        "tsconfig-paths": "^3.15.0"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/json5": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minimist": "^1.2.0"
+      },
+      "bin": {
+        "json5": "lib/cli.js"
+      }
+    },
+    "node_modules/eslint-plugin-import/node_modules/tsconfig-paths": {
+      "version": "3.15.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
+      "integrity": "sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/json5": "^0.0.29",
+        "json5": "^1.0.2",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
+      }
+    },
     "node_modules/eslint-plugin-no-relative-import-paths": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/eslint-plugin-no-relative-import-paths/-/eslint-plugin-no-relative-import-paths-1.6.1.tgz",
@@ -7114,6 +7367,37 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/eslint-plugin-prettier": {
+      "version": "5.5.4",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.5.4.tgz",
+      "integrity": "sha512-swNtI95SToIz05YINMA6Ox5R057IMAmWZ26GqPxusAp1TZzj+IdY9tXNWWD3vkF/wEqydCONcwjTFpxybBqZsg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prettier-linter-helpers": "^1.0.0",
+        "synckit": "^0.11.7"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-plugin-prettier"
+      },
+      "peerDependencies": {
+        "@types/eslint": ">=8.0.0",
+        "eslint": ">=8.0.0",
+        "eslint-config-prettier": ">= 7.0.0 <10.0.0 || >=10.1.0",
+        "prettier": ">=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/eslint": {
+          "optional": true
+        },
+        "eslint-config-prettier": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/eslint-plugin-react": {
       "version": "7.37.5",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.5.tgz",
@@ -7160,28 +7444,27 @@
         "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0"
       }
     },
-    "node_modules/eslint-plugin-react/node_modules/brace-expansion": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
-      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+    "node_modules/eslint-plugin-react-refresh": {
+      "version": "0.4.22",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.22.tgz",
+      "integrity": "sha512-atkAG6QaJMGoTLc4MDAP+rqZcfwQuTIh2IqHWFLy2TEjxr0MOK+5BSG4RzL2564AAPpZkDRsZXAUz68kjnU6Ug==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
+      "peerDependencies": {
+        "eslint": ">=8.40"
       }
     },
-    "node_modules/eslint-plugin-react/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+    "node_modules/eslint-plugin-react/node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
       "dev": true,
-      "license": "ISC",
+      "license": "Apache-2.0",
       "dependencies": {
-        "brace-expansion": "^1.1.7"
+        "esutils": "^2.0.2"
       },
       "engines": {
-        "node": "*"
+        "node": ">=0.10.0"
       }
     },
     "node_modules/eslint-plugin-react/node_modules/resolve": {
@@ -7202,20 +7485,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/eslint-plugin-react/node_modules/semver": {
-      "version": "6.3.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
-      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+    "node_modules/eslint-plugin-simple-import-sort": {
+      "version": "12.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-12.1.1.tgz",
+      "integrity": "sha512-6nuzu4xwQtE3332Uz0to+TxDQYRLTKRESSc2hefVT48Zc8JthmN23Gx9lnYhu0FtkRSL1oxny3kJ2aveVhmOVA==",
       "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
+      "license": "MIT",
+      "peerDependencies": {
+        "eslint": ">=5.0.0"
       }
     },
     "node_modules/eslint-plugin-storybook": {
-      "version": "9.1.5",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-storybook/-/eslint-plugin-storybook-9.1.5.tgz",
-      "integrity": "sha512-vCfaZ2Wk1N1vvK4vmNZoA6y2CYxJwbgIs6BE8/toPf4Z6hCAipoobP6a/30Rs0g/B2TSxTSj41TfrJKJrowpjQ==",
+      "version": "9.1.9",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-storybook/-/eslint-plugin-storybook-9.1.9.tgz",
+      "integrity": "sha512-2ZxaIR3ZfsBP4vqrC6fsCKM8pCbgTLRcBUm69g1yiJBKAbIHU8nQSsD6gpEPO3YFdRayGqzxnvwwWcXwtm5f5Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -7226,7 +7509,23 @@
       },
       "peerDependencies": {
         "eslint": ">=8",
-        "storybook": "^9.1.5"
+        "storybook": "^9.1.9"
+      }
+    },
+    "node_modules/eslint-plugin-unused-imports": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-unused-imports/-/eslint-plugin-unused-imports-4.2.0.tgz",
+      "integrity": "sha512-hLbJ2/wnjKq4kGA9AUaExVFIbNzyxYdVo49QZmKCnhk5pc9wcYRbfgLHvWJ8tnsdcseGhoUAddm9gn/lt+d74w==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@typescript-eslint/eslint-plugin": "^8.0.0-0 || ^7.0.0 || ^6.0.0 || ^5.0.0",
+        "eslint": "^9.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@typescript-eslint/eslint-plugin": {
+          "optional": true
+        }
       }
     },
     "node_modules/eslint-scope": {
@@ -7247,30 +7546,6 @@
       }
     },
     "node_modules/eslint-visitor-keys": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
-      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/eslint/node_modules/brace-expansion": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
-      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/eslint/node_modules/eslint-visitor-keys": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
       "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
@@ -7300,16 +7575,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/eslint/node_modules/ignore": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
-      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 4"
-      }
-    },
     "node_modules/eslint/node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -7326,19 +7591,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/eslint/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/eslint/node_modules/p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -7418,19 +7670,6 @@
         "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/espree/node_modules/eslint-visitor-keys": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
-      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
     "node_modules/esprima": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
@@ -7536,6 +7775,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-diff": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
+      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/fast-glob": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
@@ -7772,12 +8018,12 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "12.23.12",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.12.tgz",
-      "integrity": "sha512-6e78rdVtnBvlEVgu6eFEAgG9v3wLnYEboM8I5O5EXvfKC8gxGQB8wXJdhkMy10iVcn05jl6CNw7/HTsTCfwcWg==",
+      "version": "12.23.22",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.22.tgz",
+      "integrity": "sha512-ZgGvdxXCw55ZYvhoZChTlG6pUuehecgvEAJz0BHoC5pQKW1EC5xf1Mul1ej5+ai+pVY0pylyFfdl45qnM1/GsA==",
       "license": "MIT",
       "dependencies": {
-        "motion-dom": "^12.23.12",
+        "motion-dom": "^12.23.21",
         "motion-utils": "^12.23.6",
         "tslib": "^2.4.0"
       },
@@ -7799,9 +8045,9 @@
       }
     },
     "node_modules/fs-extra": {
-      "version": "11.3.1",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.1.tgz",
-      "integrity": "sha512-eXvGGwZ5CL17ZSwHWd3bbgk7UUpF6IFHtP57NYYakPvHOs8GDgDe5KJI36jIJzDkJ6eJjuzRA8eBQb6SkKue0g==",
+      "version": "11.3.2",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.2.tgz",
+      "integrity": "sha512-Xr9F6z6up6Ws+NjzMCZc6WXg2YFRlrLP9NQDO3VQrWrfiojdhS56TzueT88ze0uBdCTwEIhQ3ptnmKeWGFAe0A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -7878,6 +8124,16 @@
         "node": ">=10"
       }
     },
+    "node_modules/generator-function": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/generator-function/-/generator-function-2.0.0.tgz",
+      "integrity": "sha512-xPypGGincdfyl/AiSGa7GjXLkvld9V7GjZlowup9SHIJnQnHLFiLODCd/DqKOp0PBagbHJ68r1KJI9Mut7m4sA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -7902,17 +8158,20 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
-      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.1.tgz",
+      "integrity": "sha512-fk1ZVEeOX9hVZ6QzoBNEC55+Ucqg4sTVwrVuigZhuRPESVFpMyXnd3sbXvPOwp7Y9riVyANiqhEuRF0G1aVSeQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
+        "async-function": "^1.0.0",
+        "async-generator-function": "^1.0.0",
         "call-bind-apply-helpers": "^1.0.2",
         "es-define-property": "^1.0.1",
         "es-errors": "^1.3.0",
         "es-object-atoms": "^1.1.1",
         "function-bind": "^1.1.2",
+        "generator-function": "^2.0.0",
         "get-proto": "^1.0.1",
         "gopd": "^1.2.0",
         "has-symbols": "^1.1.0",
@@ -7989,7 +8248,33 @@
         "is-glob": "^4.0.3"
       },
       "engines": {
-        "node": ">=10.13.0"
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/glob/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/glob/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
     "node_modules/globals": {
@@ -8253,9 +8538,9 @@
       }
     },
     "node_modules/ignore": {
-      "version": "7.0.5",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
-      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -8522,13 +8807,16 @@
       }
     },
     "node_modules/is-fullwidth-code-point": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz",
-      "integrity": "sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-5.1.0.tgz",
+      "integrity": "sha512-5XHYaSyiqADb4RnZ1Bdad6cPp8Toise4TzEjcOYDHZkTCbKgiUl7WTUCpNWHuxmDt91wnsZBc9xinNzopv3JMQ==",
       "dev": true,
       "license": "MIT",
+      "dependencies": {
+        "get-east-asian-width": "^1.3.1"
+      },
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -8900,9 +9188,9 @@
       }
     },
     "node_modules/jiti": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.5.1.tgz",
-      "integrity": "sha512-twQoecYPiVA5K/h6SxtORw/Bs3ar+mLUtoPSc7iMXzQzK8d7eJ/R09wmTwAjiamETn1cXYPGfNnu7DMoHgu12w==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.0.tgz",
+      "integrity": "sha512-VXe6RjJkBPj0ohtqaO8vSWP3ZhAKo66fKrFNCll4BTcwljPLz03pCbaNKfzGP5MbrCYcbJ7v0nOYYwUzTEIdXQ==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -9329,28 +9617,15 @@
       }
     },
     "node_modules/lightningcss/node_modules/detect-libc": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
-      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.1.tgz",
+      "integrity": "sha512-ecqj/sy1jcK1uWrwpR67UhYrIFQ+5WlGxth34WquCbamhFA6hkkwiu37o6J5xCHdo1oixJRfVRw+ywV+Hq/0Aw==",
       "dev": true,
       "license": "Apache-2.0",
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/lilconfig": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
-      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antonk52"
-      }
-    },
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -9359,19 +9634,16 @@
       "license": "MIT"
     },
     "node_modules/lint-staged": {
-      "version": "16.1.6",
-      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-16.1.6.tgz",
-      "integrity": "sha512-U4kuulU3CKIytlkLlaHcGgKscNfJPNTiDF2avIUGFCv7K95/DCYQ7Ra62ydeRWmgQGg9zJYw2dzdbztwJlqrow==",
+      "version": "16.2.3",
+      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-16.2.3.tgz",
+      "integrity": "sha512-1OnJEESB9zZqsp61XHH2fvpS1es3hRCxMplF/AJUDa8Ho8VrscYDIuxGrj3m8KPXbcWZ8fT9XTMUhEQmOVKpKw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "chalk": "^5.6.0",
-        "commander": "^14.0.0",
-        "debug": "^4.4.1",
-        "lilconfig": "^3.1.3",
-        "listr2": "^9.0.3",
+        "commander": "^14.0.1",
+        "listr2": "^9.0.4",
         "micromatch": "^4.0.8",
-        "nano-spawn": "^1.0.2",
+        "nano-spawn": "^1.0.3",
         "pidtree": "^0.6.0",
         "string-argv": "^0.3.2",
         "yaml": "^2.8.1"
@@ -9386,27 +9658,14 @@
         "url": "https://opencollective.com/lint-staged"
       }
     },
-    "node_modules/lint-staged/node_modules/chalk": {
-      "version": "5.6.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.2.tgz",
-      "integrity": "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^12.17.0 || ^14.13 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
-      }
-    },
     "node_modules/listr2": {
-      "version": "9.0.3",
-      "resolved": "https://registry.npmjs.org/listr2/-/listr2-9.0.3.tgz",
-      "integrity": "sha512-0aeh5HHHgmq1KRdMMDHfhMWQmIT/m7nRDTlxlFqni2Sp0had9baqsjJRvDGdlvgd6NmPE0nPloOipiQJGFtTHQ==",
+      "version": "9.0.4",
+      "resolved": "https://registry.npmjs.org/listr2/-/listr2-9.0.4.tgz",
+      "integrity": "sha512-1wd/kpAdKRLwv7/3OKC8zZ5U8e/fajCfWMxacUvB79S5nLrYGPtUI/8chMQhn3LQjsRVErTb9i1ECAwW0ZIHnQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "cli-truncate": "^4.0.0",
+        "cli-truncate": "^5.0.0",
         "colorette": "^2.0.20",
         "eventemitter3": "^5.0.1",
         "log-update": "^6.1.0",
@@ -9514,6 +9773,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==",
+      "license": "MIT"
+    },
     "node_modules/lodash.foreach": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.foreach/-/lodash.foreach-4.5.0.tgz",
@@ -9528,6 +9793,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash.mergewith": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz",
+      "integrity": "sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==",
+      "license": "MIT"
+    },
     "node_modules/log-update": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/log-update/-/log-update-6.1.0.tgz",
@@ -9568,39 +9839,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/log-update/node_modules/is-fullwidth-code-point": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-5.1.0.tgz",
-      "integrity": "sha512-5XHYaSyiqADb4RnZ1Bdad6cPp8Toise4TzEjcOYDHZkTCbKgiUl7WTUCpNWHuxmDt91wnsZBc9xinNzopv3JMQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "get-east-asian-width": "^1.3.1"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/log-update/node_modules/slice-ansi": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-7.1.2.tgz",
-      "integrity": "sha512-iOBWFgUX7caIZiuutICxVgX1SdxwAVFFKwt1EvMYYec/NWO5meOJ6K5uQxhrYBdQJne4KxiqZc+KptFOWFSI9w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^6.2.1",
-        "is-fullwidth-code-point": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
-      }
-    },
     "node_modules/log-update/node_modules/string-width": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
@@ -9736,6 +9974,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/make-dir/node_modules/semver": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/map-or-similar": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/map-or-similar/-/map-or-similar-1.5.0.tgz",
@@ -10645,19 +10896,16 @@
       }
     },
     "node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
-        "brace-expansion": "^2.0.1"
+        "brace-expansion": "^1.1.7"
       },
       "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+        "node": "*"
       }
     },
     "node_modules/minimist": {
@@ -10681,9 +10929,9 @@
       }
     },
     "node_modules/minizlib": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.0.2.tgz",
-      "integrity": "sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.1.0.tgz",
+      "integrity": "sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -10693,22 +10941,6 @@
         "node": ">= 18"
       }
     },
-    "node_modules/mkdirp": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
-      "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "mkdirp": "dist/cjs/src/bin.js"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/mlly": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.0.tgz",
@@ -10742,12 +10974,12 @@
       }
     },
     "node_modules/motion": {
-      "version": "12.23.12",
-      "resolved": "https://registry.npmjs.org/motion/-/motion-12.23.12.tgz",
-      "integrity": "sha512-8jCD8uW5GD1csOoqh1WhH1A6j5APHVE15nuBkFeRiMzYBdRwyAHmSP/oXSuW0WJPZRXTFdBoG4hY9TFWNhhwng==",
+      "version": "12.23.22",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-12.23.22.tgz",
+      "integrity": "sha512-iSq6X9vLHbeYwmHvhK//+U74ROaPnZmBuy60XZzqNl0QtZkWfoZyMDHYnpKuWFv0sNMqHgED8aCXk94LCoQPGg==",
       "license": "MIT",
       "dependencies": {
-        "framer-motion": "^12.23.12",
+        "framer-motion": "^12.23.22",
         "tslib": "^2.4.0"
       },
       "peerDependencies": {
@@ -10768,9 +11000,9 @@
       }
     },
     "node_modules/motion-dom": {
-      "version": "12.23.12",
-      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.12.tgz",
-      "integrity": "sha512-RcR4fvMCTESQBD/uKQe49D5RUeDOokkGRmz4ceaJKDBgHYtZtntC/s2vLvY38gqGaytinij/yi3hMcWVcEF5Kw==",
+      "version": "12.23.21",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.21.tgz",
+      "integrity": "sha512-5xDXx/AbhrfgsQmSE7YESMn4Dpo6x5/DTZ4Iyy4xqDvVHWvFVoV+V2Ri2S/ksx+D40wrZ7gPYiMWshkdoqNgNQ==",
       "license": "MIT",
       "dependencies": {
         "motion-utils": "^12.23.6"
@@ -10870,9 +11102,9 @@
       "license": "MIT"
     },
     "node_modules/node-releases": {
-      "version": "2.0.20",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.20.tgz",
-      "integrity": "sha512-7gK6zSXEH6neM212JgfYFXe+GmZQM+fia5SsusuBIUgnPheLFBmIPhtFoAQRj8/7wASYQnbDlHPVwY0BefoFgA==",
+      "version": "2.0.21",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.21.tgz",
+      "integrity": "sha512-5b0pgg78U3hwXkCM8Z9b2FJdPZlr9Psr9V2gQPESdGHqbntyFJKFW4r5TeWGFzafGY3hzs1JC62VEQMbl1JFkw==",
       "dev": true,
       "license": "MIT"
     },
@@ -11034,6 +11266,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/object.groupby": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.3.tgz",
+      "integrity": "sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/object.values": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.1.tgz",
@@ -11454,9 +11701,9 @@
       }
     },
     "node_modules/postcss-color-functional-notation": {
-      "version": "7.0.11",
-      "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-7.0.11.tgz",
-      "integrity": "sha512-zfqoUSaHMko/k2PA9xnaydVTHqYv5vphq5Q2AHcG/dCdv/OkHYWcVWfVTBKZ526uzT8L7NghuvSw3C9PxlKnLg==",
+      "version": "7.0.12",
+      "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-7.0.12.tgz",
+      "integrity": "sha512-TLCW9fN5kvO/u38/uesdpbx3e8AkTYhMvDZYa9JpmImWuTE99bDQ7GU7hdOADIZsiI9/zuxfAJxny/khknp1Zw==",
       "dev": true,
       "funding": [
         {
@@ -11473,7 +11720,7 @@
         "@csstools/css-color-parser": "^3.1.0",
         "@csstools/css-parser-algorithms": "^3.0.5",
         "@csstools/css-tokenizer": "^3.0.4",
-        "@csstools/postcss-progressive-custom-properties": "^4.2.0",
+        "@csstools/postcss-progressive-custom-properties": "^4.2.1",
         "@csstools/utilities": "^2.0.0"
       },
       "engines": {
@@ -11652,9 +11899,9 @@
       }
     },
     "node_modules/postcss-double-position-gradients": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-6.0.3.tgz",
-      "integrity": "sha512-Dl0Z9sdbMwrPslgOaGBZRGo3TASmmgTcqcUODr82MTYyJk6devXZM6MlQjpQKMJqlLJ6oL1w78U7IXFdPA5+ug==",
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-6.0.4.tgz",
+      "integrity": "sha512-m6IKmxo7FxSP5nF2l63QbCC3r+bWpFUWmZXZf096WxG0m7Vl1Q1+ruFOhpdDRmKrRS+S3Jtk+TVk/7z0+BVK6g==",
       "dev": true,
       "funding": [
         {
@@ -11668,7 +11915,7 @@
       ],
       "license": "MIT-0",
       "dependencies": {
-        "@csstools/postcss-progressive-custom-properties": "^4.2.0",
+        "@csstools/postcss-progressive-custom-properties": "^4.2.1",
         "@csstools/utilities": "^2.0.0",
         "postcss-value-parser": "^4.2.0"
       },
@@ -11792,9 +12039,9 @@
       }
     },
     "node_modules/postcss-lab-function": {
-      "version": "7.0.11",
-      "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-7.0.11.tgz",
-      "integrity": "sha512-BEA4jId8uQe1gyjZZ6Bunb6ZsH2izks+v25AxQJDBtigXCjTLmCPWECwQpLTtcxH589MVxhs/9TAmRC6lUEmXQ==",
+      "version": "7.0.12",
+      "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-7.0.12.tgz",
+      "integrity": "sha512-tUcyRk1ZTPec3OuKFsqtRzW2Go5lehW29XA21lZ65XmzQkz43VY2tyWEC202F7W3mILOjw0voOiuxRGTsN+J9w==",
       "dev": true,
       "funding": [
         {
@@ -11811,7 +12058,7 @@
         "@csstools/css-color-parser": "^3.1.0",
         "@csstools/css-parser-algorithms": "^3.0.5",
         "@csstools/css-tokenizer": "^3.0.4",
-        "@csstools/postcss-progressive-custom-properties": "^4.2.0",
+        "@csstools/postcss-progressive-custom-properties": "^4.2.1",
         "@csstools/utilities": "^2.0.0"
       },
       "engines": {
@@ -11987,9 +12234,9 @@
       }
     },
     "node_modules/postcss-preset-env": {
-      "version": "10.3.1",
-      "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-10.3.1.tgz",
-      "integrity": "sha512-8ZOOWVwQ0iMpfEYkYo+U6W7fE2dJ/tP6dtEFwPJ66eB5JjnFupfYh+y6zo+vWDO72nGhKOVdxwhTjfzcSNRg4Q==",
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-10.4.0.tgz",
+      "integrity": "sha512-2kqpOthQ6JhxqQq1FSAAZGe9COQv75Aw8WbsOvQVNJ2nSevc9Yx/IKZGuZ7XJ+iOTtVon7LfO7ELRzg8AZ+sdw==",
       "dev": true,
       "funding": [
         {
@@ -12003,22 +12250,23 @@
       ],
       "license": "MIT-0",
       "dependencies": {
-        "@csstools/postcss-alpha-function": "^1.0.0",
+        "@csstools/postcss-alpha-function": "^1.0.1",
         "@csstools/postcss-cascade-layers": "^5.0.2",
-        "@csstools/postcss-color-function": "^4.0.11",
-        "@csstools/postcss-color-function-display-p3-linear": "^1.0.0",
-        "@csstools/postcss-color-mix-function": "^3.0.11",
-        "@csstools/postcss-color-mix-variadic-function-arguments": "^1.0.1",
-        "@csstools/postcss-content-alt-text": "^2.0.7",
+        "@csstools/postcss-color-function": "^4.0.12",
+        "@csstools/postcss-color-function-display-p3-linear": "^1.0.1",
+        "@csstools/postcss-color-mix-function": "^3.0.12",
+        "@csstools/postcss-color-mix-variadic-function-arguments": "^1.0.2",
+        "@csstools/postcss-content-alt-text": "^2.0.8",
+        "@csstools/postcss-contrast-color-function": "^2.0.12",
         "@csstools/postcss-exponential-functions": "^2.0.9",
         "@csstools/postcss-font-format-keywords": "^4.0.0",
         "@csstools/postcss-gamut-mapping": "^2.0.11",
-        "@csstools/postcss-gradients-interpolation-method": "^5.0.11",
-        "@csstools/postcss-hwb-function": "^4.0.11",
-        "@csstools/postcss-ic-unit": "^4.0.3",
+        "@csstools/postcss-gradients-interpolation-method": "^5.0.12",
+        "@csstools/postcss-hwb-function": "^4.0.12",
+        "@csstools/postcss-ic-unit": "^4.0.4",
         "@csstools/postcss-initial": "^2.0.1",
         "@csstools/postcss-is-pseudo-class": "^5.0.3",
-        "@csstools/postcss-light-dark-function": "^2.0.10",
+        "@csstools/postcss-light-dark-function": "^2.0.11",
         "@csstools/postcss-logical-float-and-clear": "^3.0.0",
         "@csstools/postcss-logical-overflow": "^2.0.0",
         "@csstools/postcss-logical-overscroll-behavior": "^2.0.0",
@@ -12028,10 +12276,10 @@
         "@csstools/postcss-media-queries-aspect-ratio-number-values": "^3.0.5",
         "@csstools/postcss-nested-calc": "^4.0.0",
         "@csstools/postcss-normalize-display-values": "^4.0.0",
-        "@csstools/postcss-oklab-function": "^4.0.11",
-        "@csstools/postcss-progressive-custom-properties": "^4.2.0",
+        "@csstools/postcss-oklab-function": "^4.0.12",
+        "@csstools/postcss-progressive-custom-properties": "^4.2.1",
         "@csstools/postcss-random-function": "^2.0.1",
-        "@csstools/postcss-relative-color-syntax": "^3.0.11",
+        "@csstools/postcss-relative-color-syntax": "^3.0.12",
         "@csstools/postcss-scope-pseudo-class": "^4.0.1",
         "@csstools/postcss-sign-functions": "^1.1.4",
         "@csstools/postcss-stepped-value-functions": "^4.0.9",
@@ -12039,27 +12287,27 @@
         "@csstools/postcss-trigonometric-functions": "^4.0.9",
         "@csstools/postcss-unset-value": "^4.0.0",
         "autoprefixer": "^10.4.21",
-        "browserslist": "^4.25.1",
+        "browserslist": "^4.26.0",
         "css-blank-pseudo": "^7.0.1",
         "css-has-pseudo": "^7.0.3",
         "css-prefers-color-scheme": "^10.0.0",
-        "cssdb": "^8.4.0",
+        "cssdb": "^8.4.2",
         "postcss-attribute-case-insensitive": "^7.0.1",
         "postcss-clamp": "^4.1.0",
-        "postcss-color-functional-notation": "^7.0.11",
+        "postcss-color-functional-notation": "^7.0.12",
         "postcss-color-hex-alpha": "^10.0.0",
         "postcss-color-rebeccapurple": "^10.0.0",
         "postcss-custom-media": "^11.0.6",
         "postcss-custom-properties": "^14.0.6",
         "postcss-custom-selectors": "^8.0.5",
         "postcss-dir-pseudo-class": "^9.0.1",
-        "postcss-double-position-gradients": "^6.0.3",
+        "postcss-double-position-gradients": "^6.0.4",
         "postcss-focus-visible": "^10.0.1",
         "postcss-focus-within": "^9.0.1",
         "postcss-font-variant": "^5.0.0",
         "postcss-gap-properties": "^6.0.0",
         "postcss-image-set-function": "^7.0.0",
-        "postcss-lab-function": "^7.0.11",
+        "postcss-lab-function": "^7.0.12",
         "postcss-logical": "^8.1.0",
         "postcss-nesting": "^13.0.2",
         "postcss-opacity-percentage": "^3.0.0",
@@ -12186,6 +12434,19 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/prettier-linter-helpers": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-diff": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/pretty-format": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
@@ -12327,19 +12588,6 @@
         "typescript": ">= 4.3.x"
       }
     },
-    "node_modules/react-docgen/node_modules/doctrine": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
-      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "esutils": "^2.0.2"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
     "node_modules/react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
@@ -12373,9 +12621,9 @@
       }
     },
     "node_modules/react-hook-form": {
-      "version": "7.62.0",
-      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.62.0.tgz",
-      "integrity": "sha512-7KWFejc98xqG/F4bAxpL41NB3o1nnvQO1RWZT3TqRZYL8RryQETGfEdVnJN2fy1crCiBLLjkRBVK05j24FxJGA==",
+      "version": "7.63.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.63.0.tgz",
+      "integrity": "sha512-ZwueDMvUeucovM2VjkCf7zIHcs1aAlDimZu2Hvel5C5907gUzMpm4xCrQXtRzCvsBqFjonB4m3x4LzCFI1ZKWA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -12436,6 +12684,31 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/reaviz-lint-rules": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/reaviz-lint-rules/-/reaviz-lint-rules-1.0.3.tgz",
+      "integrity": "sha512-RIntuaXm4E2mj8vJvE/H6sw6wDBqHL8++kNLfjbnBB98fEt9UoPUwsEdifGYqyy4tf8X/Q9ZOcPScbJ98DG4fw==",
+      "dev": true,
+      "engines": {
+        "node": ">=22",
+        "npm": ">=10.8.2"
+      },
+      "peerDependencies": {
+        "@eslint/js": "^9.35.0",
+        "eslint": "^9.35.0",
+        "eslint-config-prettier": "^10.1.8",
+        "eslint-plugin-import": "^2.32.0",
+        "eslint-plugin-no-relative-import-paths": "^1.6.1",
+        "eslint-plugin-prettier": "^5.5.4",
+        "eslint-plugin-react": "^7.37.5",
+        "eslint-plugin-react-hooks": "^5.2.0",
+        "eslint-plugin-react-refresh": "^0.4.22",
+        "eslint-plugin-simple-import-sort": "^12.1.1",
+        "eslint-plugin-storybook": "^9.1.5",
+        "eslint-plugin-unused-imports": "^4.2.0",
+        "typescript-eslint": "^8.44.1"
+      }
+    },
     "node_modules/recast": {
       "version": "0.23.11",
       "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.11.tgz",
@@ -12653,9 +12926,9 @@
       "license": "MIT"
     },
     "node_modules/rollup": {
-      "version": "4.50.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.50.1.tgz",
-      "integrity": "sha512-78E9voJHwnXQMiQdiqswVLZwJIzdBKJ1GdI5Zx6XwoFKUIk09/sSrr+05QFzvYb8q6Y9pPV45zzDuYa3907TZA==",
+      "version": "4.52.3",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.52.3.tgz",
+      "integrity": "sha512-RIDh866U8agLgiIcdpB+COKnlCreHJLfIhWC3LVflku5YHfpnsIKigRZeFfMfCc4dVcqNVfQQ5gO/afOck064A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -12669,27 +12942,28 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.50.1",
-        "@rollup/rollup-android-arm64": "4.50.1",
-        "@rollup/rollup-darwin-arm64": "4.50.1",
-        "@rollup/rollup-darwin-x64": "4.50.1",
-        "@rollup/rollup-freebsd-arm64": "4.50.1",
-        "@rollup/rollup-freebsd-x64": "4.50.1",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.50.1",
-        "@rollup/rollup-linux-arm-musleabihf": "4.50.1",
-        "@rollup/rollup-linux-arm64-gnu": "4.50.1",
-        "@rollup/rollup-linux-arm64-musl": "4.50.1",
-        "@rollup/rollup-linux-loongarch64-gnu": "4.50.1",
-        "@rollup/rollup-linux-ppc64-gnu": "4.50.1",
-        "@rollup/rollup-linux-riscv64-gnu": "4.50.1",
-        "@rollup/rollup-linux-riscv64-musl": "4.50.1",
-        "@rollup/rollup-linux-s390x-gnu": "4.50.1",
-        "@rollup/rollup-linux-x64-gnu": "4.50.1",
-        "@rollup/rollup-linux-x64-musl": "4.50.1",
-        "@rollup/rollup-openharmony-arm64": "4.50.1",
-        "@rollup/rollup-win32-arm64-msvc": "4.50.1",
-        "@rollup/rollup-win32-ia32-msvc": "4.50.1",
-        "@rollup/rollup-win32-x64-msvc": "4.50.1",
+        "@rollup/rollup-android-arm-eabi": "4.52.3",
+        "@rollup/rollup-android-arm64": "4.52.3",
+        "@rollup/rollup-darwin-arm64": "4.52.3",
+        "@rollup/rollup-darwin-x64": "4.52.3",
+        "@rollup/rollup-freebsd-arm64": "4.52.3",
+        "@rollup/rollup-freebsd-x64": "4.52.3",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.52.3",
+        "@rollup/rollup-linux-arm-musleabihf": "4.52.3",
+        "@rollup/rollup-linux-arm64-gnu": "4.52.3",
+        "@rollup/rollup-linux-arm64-musl": "4.52.3",
+        "@rollup/rollup-linux-loong64-gnu": "4.52.3",
+        "@rollup/rollup-linux-ppc64-gnu": "4.52.3",
+        "@rollup/rollup-linux-riscv64-gnu": "4.52.3",
+        "@rollup/rollup-linux-riscv64-musl": "4.52.3",
+        "@rollup/rollup-linux-s390x-gnu": "4.52.3",
+        "@rollup/rollup-linux-x64-gnu": "4.52.3",
+        "@rollup/rollup-linux-x64-musl": "4.52.3",
+        "@rollup/rollup-openharmony-arm64": "4.52.3",
+        "@rollup/rollup-win32-arm64-msvc": "4.52.3",
+        "@rollup/rollup-win32-ia32-msvc": "4.52.3",
+        "@rollup/rollup-win32-x64-gnu": "4.52.3",
+        "@rollup/rollup-win32-x64-msvc": "4.52.3",
         "fsevents": "~2.3.2"
       }
     },
@@ -12819,16 +13093,13 @@
       }
     },
     "node_modules/semver": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
-      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
       "dev": true,
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
       }
     },
     "node_modules/set-function-length": {
@@ -13000,17 +13271,17 @@
       }
     },
     "node_modules/slice-ansi": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-5.0.0.tgz",
-      "integrity": "sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==",
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-7.1.2.tgz",
+      "integrity": "sha512-iOBWFgUX7caIZiuutICxVgX1SdxwAVFFKwt1EvMYYec/NWO5meOJ6K5uQxhrYBdQJne4KxiqZc+KptFOWFSI9w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "ansi-styles": "^6.0.0",
-        "is-fullwidth-code-point": "^4.0.0"
+        "ansi-styles": "^6.2.1",
+        "is-fullwidth-code-point": "^5.0.0"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       },
       "funding": {
         "url": "https://github.com/chalk/slice-ansi?sponsor=1"
@@ -13104,9 +13375,9 @@
       }
     },
     "node_modules/storybook": {
-      "version": "9.1.5",
-      "resolved": "https://registry.npmjs.org/storybook/-/storybook-9.1.5.tgz",
-      "integrity": "sha512-cGwJ2AE6nxlwqQlOiI+HKX5qa7+FOV7Ha7Qa+GoASBIQSSnLfbY6UldgAxHCJGJOFtgW/wuqfDtNvni6sj1/OQ==",
+      "version": "9.1.9",
+      "resolved": "https://registry.npmjs.org/storybook/-/storybook-9.1.9.tgz",
+      "integrity": "sha512-KEazHA1iD2L8Fll+Kw9c/z0Pjv3Z+1GHYejmk+JlrIt+/mXDG2HVF7eelvk3tYCbuxqyuCL57pYhJUfkHwA6Fw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -13139,6 +13410,19 @@
         }
       }
     },
+    "node_modules/storybook/node_modules/semver": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/string-argv": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz",
@@ -13365,14 +13649,11 @@
       }
     },
     "node_modules/strip-indent": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-4.0.0.tgz",
-      "integrity": "sha512-mnVSV2l+Zv6BLpSD/8V87CW/y9EmmbYzGCIavsnsI6/nwn26DwffM/yztm30Z/I2DY9wdS3vXVCMnHDgZaVNoA==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-4.1.0.tgz",
+      "integrity": "sha512-OA95x+JPmL7kc7zCu+e+TeYxEiaIyndRx0OrBcK2QPPH09oAndr2ALvymxWA+Lx1PYYvFUm4O63pRkdJAaW96w==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "min-indent": "^1.0.1"
-      },
       "engines": {
         "node": ">=12"
       },
@@ -13394,9 +13675,9 @@
       }
     },
     "node_modules/strip-literal": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-3.0.0.tgz",
-      "integrity": "sha512-TcccoMhJOM3OebGhSBEmp3UZ2SfDMZUEBdRA/9ynfLi8yYajyWX3JiXArcJt4Umh4vISpspkQIY8ZZoCqjbviA==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-3.1.0.tgz",
+      "integrity": "sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -13453,6 +13734,22 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/synckit": {
+      "version": "0.11.11",
+      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.11.11.tgz",
+      "integrity": "sha512-MeQTA1r0litLUf0Rp/iisCaL8761lKAZHaimlbGK4j0HysC4PLfqygQj9srcs0m2RdtDYnF8UuYyKpbjHYp7Jw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@pkgr/core": "^0.2.9"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/synckit"
+      }
+    },
     "node_modules/tabbable": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
@@ -13491,17 +13788,16 @@
       }
     },
     "node_modules/tar": {
-      "version": "7.4.3",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-7.4.3.tgz",
-      "integrity": "sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==",
+      "version": "7.5.1",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.1.tgz",
+      "integrity": "sha512-nlGpxf+hv0v7GkWBK2V9spgactGOp0qvfWRxUMjqHyzrt3SgwE48DIv/FhqPHJYLHpgW1opq3nERbz5Anq7n1g==",
       "dev": true,
       "license": "ISC",
       "dependencies": {
         "@isaacs/fs-minipass": "^4.0.0",
         "chownr": "^3.0.0",
         "minipass": "^7.1.2",
-        "minizlib": "^3.0.1",
-        "mkdirp": "^3.0.1",
+        "minizlib": "^3.1.0",
         "yallist": "^5.0.0"
       },
       "engines": {
@@ -13533,6 +13829,32 @@
         "node": ">=18"
       }
     },
+    "node_modules/test-exclude/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/test-exclude/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/tiny-invariant": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
@@ -13592,9 +13914,9 @@
       }
     },
     "node_modules/tinyspy": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-4.0.3.tgz",
-      "integrity": "sha512-t2T/WLB2WRgZ9EpE4jgPJ9w+i66UZfDc8wHh0xrwiRNN+UwH98GIJkTeZqX9rg0i0ptwzqW+uYeIF0T4F8LR7A==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-4.0.4.tgz",
+      "integrity": "sha512-azl+t0z7pw/z958Gy9svOTuzqIk6xq+NSheJzn5MMWtWTFywIacg2wUlzKFGtt3cthx0r2SxMK0yzJOR0IES7Q==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -13856,6 +14178,30 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/typescript-eslint": {
+      "version": "8.45.0",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.45.0.tgz",
+      "integrity": "sha512-qzDmZw/Z5beNLUrXfd0HIW6MzIaAV5WNDxmMs9/3ojGOpYavofgNAAD/nC6tGV2PczIi0iw8vot2eAe/sBn7zg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/eslint-plugin": "8.45.0",
+        "@typescript-eslint/parser": "8.45.0",
+        "@typescript-eslint/typescript-estree": "8.45.0",
+        "@typescript-eslint/utils": "8.45.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
     "node_modules/typescript-rewrite-paths": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/typescript-rewrite-paths/-/typescript-rewrite-paths-1.3.1.tgz",
@@ -14152,9 +14498,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "7.1.5",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.5.tgz",
-      "integrity": "sha512-4cKBO9wR75r0BeIWWWId9XK9Lj6La5X846Zw9dFfzMRw38IlTk2iCcUt6hsyiDRcPidc55ZParFYDXi0nXOeLQ==",
+      "version": "7.1.7",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.7.tgz",
+      "integrity": "sha512-VbA8ScMvAISJNJVbRDTJdCwqQoAareR/wutevKanhR2/1EkoXVZVkkORaYm/tNVCjP/UDTKtcw3bAkwOUdedmA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
diff --git a/package.json b/package.json
index 8176c3271..f893f7ca3 100644
--- a/package.json
+++ b/package.json
@@ -1,16 +1,16 @@
 {
   "name": "reablocks",
-  "version": "9.2.2",
+  "version": "10.0.0-alpha.7",
   "description": "Component library for React",
   "scripts": {
     "build": "npm run build:js && npm run build:styles && npm run rewrite:stories && npm run build:docs",
     "build-storybook": "storybook build",
     "build:js": "vite build --mode library",
-    "build:styles": "npx @tailwindcss/cli -i ./src/index.css -o ./dist/index.css",
+    "build:styles": "npx @tailwindcss/cli -i src/assets/css/index.css -o ./dist/index.css",
     "build:docs": "node scripts/docs.js",
-    "rewrite:stories": "node scripts/stories.cjs",
-    "lint": "eslint --ext js,ts,tsx",
-    "lint:fix": "eslint --ext js,ts,tsx --fix src",
+    "rewrite:stories": "node scripts/stories.mjs",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "lint:prettier": "prettier --loglevel warn --write 'src/**/*.{ts,tsx,js,jsx}'",
     "prettier": "prettier --loglevel warn --write 'src/**/*.{ts,tsx,js,jsx}'",
     "start": "storybook dev -p 9009",
@@ -73,6 +73,8 @@
     "focus-trap-react": "^10.3.1",
     "fuse.js": "^6.6.2",
     "human-format": "^1.2.1",
+    "lodash.clonedeep": "^4.5.0",
+    "lodash.mergewith": "^4.6.2",
     "motion": "^12.23.12",
     "name-initials": "^0.1.3",
     "pluralize": "^8.0.0",
@@ -86,8 +88,6 @@
     "react-dom": ">=16"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.3.2",
-    "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.35.0",
     "@storybook/addon-docs": "^9.1.5",
     "@storybook/addon-essentials": "^9.0.0-alpha.12",
@@ -104,20 +104,25 @@
     "@tailwindcss/postcss": "^4.1.13",
     "@tailwindcss/vite": "^4.1.13",
     "@types/classnames": "^2.3.4",
+    "@types/lodash.clonedeep": "^4.5.9",
+    "@types/lodash.mergewith": "^4.6.9",
     "@types/node": "^22.18.1",
     "@types/react": "^18.3.24",
     "@types/react-dom": "^18.3.7",
-    "@typescript-eslint/eslint-plugin": "^8.43.0",
-    "@typescript-eslint/parser": "^8.43.0",
     "@vitejs/plugin-react": "^5.0.2",
     "@vitest/coverage-v8": "^3.2.4",
     "autoprefixer": "^10.4.21",
     "eslint": "^9.35.0",
     "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react-refresh": "^0.4.22",
     "eslint-plugin-no-relative-import-paths": "^1.6.1",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-storybook": "^9.1.5",
+    "eslint-plugin-unused-imports": "^4.2.0",
     "fast-glob": "^3.3.3",
     "globals": "^16.4.0",
     "husky": "^9.1.7",
@@ -130,11 +135,13 @@
     "react-docgen-typescript": "^2.4.0",
     "react-dom": "^18.0.0",
     "react-hook-form": "^7.62.0",
+    "reaviz-lint-rules": "^1.0.3",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "storybook": "^9.1.5",
     "tailwindcss": "^4.1.13",
     "tw-colors": "^4.0.0-beta.1",
     "typescript": "^5.9.2",
+    "typescript-eslint": "^8.44.1",
     "typescript-rewrite-paths": "^1.3.1",
     "vite": "^7.1.5",
     "vite-plugin-checker": "^0.10.3",
diff --git a/postcss.config.mjs b/postcss.config.mjs
index a34a3d560..50a4f5b92 100644
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -1,5 +1,5 @@
 export default {
   plugins: {
-    '@tailwindcss/postcss': {},
-  },
+    '@tailwindcss/postcss': {}
+  }
 };
diff --git a/scripts/docs.js b/scripts/docs.js
index bb929d3d5..cf9d14629 100644
--- a/scripts/docs.js
+++ b/scripts/docs.js
@@ -1,5 +1,5 @@
-import { readFileSync, writeFileSync } from 'fs';
 import fg from 'fast-glob';
+import { writeFileSync } from 'fs';
 import { resolve } from 'path';
 import docgen from 'react-docgen-typescript';
 
@@ -15,17 +15,19 @@ function buildDocs() {
   const options = {
     savePropValueAsString: true,
     // Skip generating docs for HTML attributes
-    propFilter: (prop) => {
+    propFilter: prop => {
       if (prop.declarations !== undefined && prop.declarations.length > 0) {
-        const hasPropAdditionalDescription = prop.declarations.find((declaration) => {
-          return !declaration.fileName.includes('node_modules');
-        });
-  
+        const hasPropAdditionalDescription = prop.declarations.find(
+          declaration => {
+            return !declaration.fileName.includes('node_modules');
+          }
+        );
+
         return Boolean(hasPropAdditionalDescription);
       }
-  
+
       return true;
-    },
+    }
   };
 
   const docgenWithTSConfig = docgen.withCustomConfig(
diff --git a/scripts/stories.cjs b/scripts/stories.mjs
similarity index 65%
rename from scripts/stories.cjs
rename to scripts/stories.mjs
index 783ecdbeb..ed08e7b11 100644
--- a/scripts/stories.cjs
+++ b/scripts/stories.mjs
@@ -1,7 +1,6 @@
-const fs = require('fs');
-const fg = require('fast-glob');
-const { rewritePaths } = require('typescript-rewrite-paths');
-const path = require('path');
+import fg from 'fast-glob';
+import fs from 'fs';
+import { rewritePaths } from 'typescript-rewrite-paths';
 
 /**
  * Replace all the paths in the stories from `./Block` to `reablocks`
@@ -10,11 +9,15 @@ function replacePaths() {
   // Grep all the stories
   const files = fg.sync(['dist/stories/*.tsx', 'dist/blocks/*.tsx']);
 
-  files.forEach((file) => {
+  files.forEach(file => {
     const code = fs.readFileSync(file, { encoding: 'utf-8' });
 
     const output = rewritePaths(code, path => {
-      if (path.startsWith('./') || path.startsWith('../') || path.startsWith('@/')) {
+      if (
+        path.startsWith('./') ||
+        path.startsWith('../') ||
+        path.startsWith('@/')
+      ) {
         console.info(`Replacing ${path} with reablocks`);
         return 'reablocks';
       }
diff --git a/src/assets/css/colors.css b/src/assets/css/colors.css
new file mode 100644
index 000000000..c81657197
--- /dev/null
+++ b/src/assets/css/colors.css
@@ -0,0 +1,528 @@
+:root,
+:host {
+  --color-neutrals-clear-dnt-clear: #ffffff00;
+  --color-neutrals-pure-black-dnt-50: #0000000a;
+  --color-neutrals-pure-black-dnt-100: #00000014;
+  --color-neutrals-pure-black-dnt-200: #0000001f;
+  --color-neutrals-pure-black-dnt-300: #00000033;
+  --color-neutrals-pure-black-dnt-400: #0000004d;
+  --color-neutrals-pure-black-dnt-500: #00000066;
+  --color-neutrals-pure-black-dnt-600: #00000080;
+  --color-neutrals-pure-black-dnt-700: #00000099;
+  --color-neutrals-pure-black-dnt-800: #000000b2;
+  --color-neutrals-pure-black-dnt-900: #000000cc;
+  --color-neutrals-pure-black-dnt-950: #000000e5;
+  --color-neutrals-pure-black-dnt-1000: #000000;
+  --color-neutrals-pure-white-dnt-50: #ffffff0a;
+  --color-neutrals-pure-white-dnt-100: #ffffff14;
+  --color-neutrals-pure-white-dnt-200: #ffffff1f;
+  --color-neutrals-pure-white-dnt-300: #ffffff33;
+  --color-neutrals-pure-white-dnt-400: #ffffff4d;
+  --color-neutrals-pure-white-dnt-500: #ffffff66;
+  --color-neutrals-pure-white-dnt-600: #ffffff80;
+  --color-neutrals-pure-white-dnt-700: #ffffff99;
+  --color-neutrals-pure-white-dnt-800: #ffffffb2;
+  --color-neutrals-pure-white-dnt-900: #ffffffcc;
+  --color-neutrals-pure-white-dnt-950: #ffffffe5;
+  --color-neutrals-pure-white-dnt-1000: #ffffff;
+  --color-neutrals-force-dusk-50: #f7f7fa;
+  --color-neutrals-force-dusk-100: #e6e6f0;
+  --color-neutrals-force-dusk-200: #c9c9d6;
+  --color-neutrals-force-dusk-300: #77778c;
+  --color-neutrals-force-dusk-400: #5c5c73;
+  --color-neutrals-force-dusk-500: #3a3a4d;
+  --color-neutrals-force-dusk-600: #242433;
+  --color-neutrals-force-dusk-700: #191927;
+  --color-neutrals-force-dusk-800: #11111f;
+  --color-neutrals-force-dusk-900: #02020f;
+  --color-neutrals-force-dusk-950: #010105;
+  --color-neutrals-force-dusk-1000: #000003;
+  --color-neutrals-darth-abyss-a-50: #0101050a;
+  --color-neutrals-darth-abyss-a-100: #01010514;
+  --color-neutrals-darth-abyss-a-200: #0101051f;
+  --color-neutrals-darth-abyss-a-300: #01010533;
+  --color-neutrals-darth-abyss-a-400: #0101054d;
+  --color-neutrals-darth-abyss-a-500: #01010566;
+  --color-neutrals-darth-abyss-a-600: #01010580;
+  --color-neutrals-darth-abyss-a-700: #01010599;
+  --color-neutrals-darth-abyss-a-800: #010105b2;
+  --color-neutrals-darth-abyss-a-900: #010105cc;
+  --color-neutrals-darth-abyss-a-950: #010105e5;
+  --color-neutrals-darth-abyss-a-1000: #010105;
+  --color-neutrals-nightblade-a-50: #0101010a;
+  --color-neutrals-nightblade-a-100: #01010114;
+  --color-neutrals-nightblade-a-200: #0101011f;
+  --color-neutrals-nightblade-a-300: #01010133;
+  --color-neutrals-nightblade-a-400: #0101014d;
+  --color-neutrals-nightblade-a-500: #01010166;
+  --color-neutrals-nightblade-a-600: #01010180;
+  --color-neutrals-nightblade-a-700: #01010199;
+  --color-neutrals-nightblade-a-800: #010101b2;
+  --color-neutrals-nightblade-a-900: #010101cc;
+  --color-neutrals-nightblade-a-950: #010101e5;
+  --color-neutrals-nightblade-a-1000: #010101;
+  --color-neutrals-darkstar-core-a-50: #0404060a;
+  --color-neutrals-duskwraith-a-50: #1b20230a;
+  --color-neutrals-duskwraith-a-100: #09090a14;
+  --color-neutrals-duskwraith-a-200: #09090a1f;
+  --color-neutrals-duskwraith-a-300: #09090a33;
+  --color-neutrals-duskwraith-a-400: #09090a4d;
+  --color-neutrals-duskwraith-a-500: #09090a66;
+  --color-neutrals-duskwraith-a-600: #09090a80;
+  --color-neutrals-duskwraith-a-700: #09090a99;
+  --color-neutrals-duskwraith-a-800: #09090ab2;
+  --color-neutrals-duskwraith-a-900: #09090acc;
+  --color-neutrals-duskwraith-a-950: #09090ae5;
+  --color-neutrals-duskwraith-a-1000: #09090a;
+  --color-neutrals-darkstar-core-a-100: #04040614;
+  --color-neutrals-darkstar-core-a-200: #0404061f;
+  --color-neutrals-darkstar-core-a-300: #04040633;
+  --color-neutrals-darkstar-core-a-400: #0404064d;
+  --color-neutrals-darkstar-core-a-500: #04040666;
+  --color-neutrals-darkstar-core-a-600: #04040680;
+  --color-neutrals-darkstar-core-a-700: #04040699;
+  --color-neutrals-darkstar-core-a-800: #040406b2;
+  --color-neutrals-darkstar-core-a-900: #040406cc;
+  --color-neutrals-darkstar-core-a-950: #040406e5;
+  --color-neutrals-darkstar-core-a-1000: #040406;
+  --color-neutrals-kyber-crystal-a-50: #e1e2e30a;
+  --color-neutrals-kyber-crystal-a-100: #e1e2e314;
+  --color-neutrals-kyber-crystal-a-200: #e1e2e31f;
+  --color-neutrals-kyber-crystal-a-300: #e1e2e333;
+  --color-neutrals-kyber-crystal-a-400: #e1e2e34d;
+  --color-neutrals-kyber-crystal-a-500: #e1e2e366;
+  --color-neutrals-kyber-crystal-a-600: #e1e2e380;
+  --color-neutrals-kyber-crystal-a-700: #e1e2e399;
+  --color-neutrals-kyber-crystal-a-800: #e1e2e3b2;
+  --color-neutrals-kyber-crystal-a-900: #e1e2e3cc;
+  --color-neutrals-kyber-crystal-a-950: #e1e2e3e5;
+  --color-neutrals-kyber-crystal-a-1000: #e1e2e3;
+  --color-blue-hyperstream-a-50: #105eff0a;
+  --color-blue-hyperstream-a-100: #105eff14;
+  --color-blue-hyperstream-a-200: #105eff1f;
+  --color-blue-hyperstream-a-300: #105eff33;
+  --color-blue-hyperstream-a-400: #105eff4d;
+  --color-blue-hyperstream-a-500: #105eff66;
+  --color-blue-hyperstream-a-600: #105eff80;
+  --color-blue-hyperstream-a-700: #105eff99;
+  --color-blue-hyperstream-a-800: #105effb2;
+  --color-blue-hyperstream-a-900: #105effcc;
+  --color-blue-hyperstream-a-950: #105effe5;
+  --color-blue-hyperstream-a-1000: #105eff;
+  --color-blue-hyperstream-50: #e7efff;
+  --color-blue-hyperstream-100: #c3d7ff;
+  --color-blue-hyperstream-200: #9fbfff;
+  --color-blue-hyperstream-300: #7ca6ff;
+  --color-blue-hyperstream-400: #588eff;
+  --color-blue-hyperstream-500: #3476ff;
+  --color-blue-hyperstream-600: #105eff;
+  --color-blue-hyperstream-700: #0c44b7;
+  --color-blue-hyperstream-800: #0a3793;
+  --color-blue-hyperstream-900: #082a70;
+  --color-blue-hyperstream-950: #061d4c;
+  --color-blue-hyperstream-1000: #041028;
+  --color-blue-astral-sabre-50: #d1e3ff;
+  --color-blue-astral-sabre-100: #93b5ff;
+  --color-blue-astral-sabre-200: #5471be;
+  --color-blue-astral-sabre-300: #5f7dcc;
+  --color-blue-astral-sabre-400: #4662ae;
+  --color-blue-astral-sabre-500: #38529c;
+  --color-blue-astral-sabre-600: #2b438d;
+  --color-blue-astral-sabre-700: #20377f;
+  --color-blue-astral-sabre-800: #162a71;
+  --color-blue-astral-sabre-900: #0c1c62;
+  --color-blue-astral-sabre-950: #050f45;
+  --color-blue-astral-sabre-1000: #030a35;
+  --color-blue-skybolt-a-50: #1c90e10a;
+  --color-blue-stellar-abyss-a-50: #050f450a;
+  --color-blue-stellar-abyss-a-100: #050f4514;
+  --color-blue-stellar-abyss-a-200: #050f451f;
+  --color-blue-stellar-abyss-a-300: #050f4533;
+  --color-blue-stellar-abyss-a-400: #050f454d;
+  --color-blue-stellar-abyss-a-500: #050f4566;
+  --color-blue-stellar-abyss-a-600: #050f4580;
+  --color-blue-stellar-abyss-a-700: #050f4599;
+  --color-blue-stellar-abyss-a-800: #050f45b2;
+  --color-blue-stellar-abyss-a-900: #050f45cc;
+  --color-blue-stellar-abyss-a-950: #050f45e5;
+  --color-blue-stellar-abyss-a-1000: #050f45;
+  --color-blue-skybolt-a-100: #1c90e114;
+  --color-blue-skybolt-a-200: #1c90e11f;
+  --color-blue-skybolt-a-300: #1c90e133;
+  --color-blue-skybolt-a-400: #1c90e14d;
+  --color-blue-skybolt-a-500: #1c90e166;
+  --color-blue-skybolt-a-600: #1c90e180;
+  --color-blue-skybolt-a-700: #1c90e199;
+  --color-blue-skybolt-a-800: #1c90e1b2;
+  --color-blue-skybolt-a-900: #1c90e1cc;
+  --color-blue-skybolt-a-950: #1c90e1e5;
+  --color-blue-skybolt-a-1000: #1c90e1;
+  --color-green-emerald-saber-a-50: #00c46f0a;
+  --color-green-emerald-saber-a-100: #00c46f14;
+  --color-green-emerald-saber-a-200: #00c46f1f;
+  --color-green-emerald-saber-a-300: #00c46f33;
+  --color-green-emerald-saber-a-400: #00c46f4d;
+  --color-green-emerald-saber-a-500: #00c46f66;
+  --color-green-emerald-saber-a-600: #00c46f80;
+  --color-green-emerald-saber-a-700: #00c46f99;
+  --color-green-emerald-saber-a-800: #00c46fb2;
+  --color-green-emerald-saber-a-900: #00c46fcc;
+  --color-green-emerald-saber-a-950: #00c46fe5;
+  --color-green-emerald-saber-a-1000: #00c46f;
+  --color-green-ion-sprout-50: #f4fae5;
+  --color-green-ion-sprout-100: #e3f3bf;
+  --color-green-ion-sprout-200: #c6e880;
+  --color-green-ion-sprout-300: #aadc40;
+  --color-green-ion-sprout-400: #8ed000;
+  --color-green-ion-sprout-500: #78b001;
+  --color-green-ion-sprout-600: #628f01;
+  --color-green-ion-sprout-700: #4c6f02;
+  --color-green-ion-sprout-800: #364e02;
+  --color-green-ion-sprout-900: #202e03;
+  --color-green-ion-sprout-950: #121a02;
+  --color-green-ion-sprout-1000: #050801;
+  --color-green-ion-sprout-a-50: #8ed0000a;
+  --color-green-ion-sprout-a-100: #8ed00014;
+  --color-green-ion-sprout-a-200: #8ed0001f;
+  --color-green-ion-sprout-a-300: #8ed00033;
+  --color-green-ion-sprout-a-400: #8ed0004d;
+  --color-green-ion-sprout-a-500: #8ed00066;
+  --color-green-ion-sprout-a-600: #8ed00080;
+  --color-green-ion-sprout-a-700: #8ed00099;
+  --color-green-ion-sprout-a-800: #8ed000b2;
+  --color-green-ion-sprout-a-900: #8ed000cc;
+  --color-green-ion-sprout-a-950: #8ed000e5;
+  --color-green-ion-sprout-a-1000: #8ed000;
+  --color-green-verdant-flux-50: #eef8e9;
+  --color-green-verdant-flux-100: #d5efc8;
+  --color-green-verdant-flux-200: #aadf91;
+  --color-green-verdant-flux-300: #80ce5b;
+  --color-green-verdant-flux-400: #55be24;
+  --color-green-verdant-flux-500: #469d1d;
+  --color-green-verdant-flux-600: #377c16;
+  --color-green-verdant-flux-700: #275c10;
+  --color-green-verdant-flux-800: #183b09;
+  --color-green-verdant-flux-900: #091a02;
+  --color-green-verdant-flux-950: #040d01;
+  --color-green-verdant-flux-1000: #020500;
+  --color-green-verdant-flux-a-50: #55be240a;
+  --color-green-verdant-flux-a-100: #55be2414;
+  --color-green-verdant-flux-a-200: #55be241f;
+  --color-green-verdant-flux-a-300: #55be2433;
+  --color-green-verdant-flux-a-400: #55be244d;
+  --color-green-verdant-flux-a-500: #55be2466;
+  --color-green-verdant-flux-a-600: #55be2480;
+  --color-green-verdant-flux-a-700: #55be2499;
+  --color-green-verdant-flux-a-800: #55be24b2;
+  --color-green-verdant-flux-a-900: #55be24cc;
+  --color-green-verdant-flux-a-950: #55be24e5;
+  --color-green-verdant-flux-a-1000: #55be24;
+  --color-red-infernal-blade-a-50: #fc12340a;
+  --color-red-infernal-blade-a-100: #fc123414;
+  --color-red-infernal-blade-a-200: #fc12341f;
+  --color-red-infernal-blade-a-300: #fc123433;
+  --color-red-infernal-blade-a-400: #fc12344d;
+  --color-red-infernal-blade-a-500: #fc123466;
+  --color-red-infernal-blade-a-600: #fc123480;
+  --color-red-infernal-blade-a-700: #fc123499;
+  --color-red-infernal-blade-a-800: #fc1234b2;
+  --color-red-infernal-blade-a-900: #fc1234cc;
+  --color-red-infernal-blade-a-950: #fc1234e5;
+  --color-red-infernal-blade-a-1000: #fc1234;
+  --color-red-malachor-50: #f7f2f2;
+  --color-red-malachor-100: #f0e4e4;
+  --color-red-malachor-200: #dfc6c6;
+  --color-red-malachor-300: #cda1a1;
+  --color-red-malachor-400: #ba7272;
+  --color-red-malachor-500: #a40808;
+  --color-red-malachor-600: #930707;
+  --color-red-malachor-700: #7f0606;
+  --color-red-malachor-800: #680505;
+  --color-red-malachor-900: #490404;
+  --color-red-malachor-950: #240202;
+  --color-red-malachor-1000: #0a0101;
+  --color-red-malachor-a-50: #a408080a;
+  --color-red-malachor-a-100: #a4080814;
+  --color-red-malachor-a-200: #a408081f;
+  --color-red-malachor-a-300: #a4080833;
+  --color-red-malachor-a-400: #a408084d;
+  --color-red-malachor-a-500: #a4080866;
+  --color-red-malachor-a-600: #a4080880;
+  --color-red-malachor-a-700: #a4080899;
+  --color-red-malachor-a-800: #a40808b2;
+  --color-red-malachor-a-900: #a40808cc;
+  --color-red-malachor-a-950: #a40808e5;
+  --color-red-malachor-a-1000: #a40808;
+  --color-red-crimson-wrath-50: #fce5e6;
+  --color-red-crimson-wrath-100: #f7bfc1;
+  --color-red-crimson-wrath-200: #f08083;
+  --color-red-crimson-wrath-300: #e84045;
+  --color-red-crimson-wrath-400: #e00007;
+  --color-red-crimson-wrath-500: #b70006;
+  --color-red-crimson-wrath-600: #8e0005;
+  --color-red-crimson-wrath-700: #660104;
+  --color-red-crimson-wrath-800: #3d0103;
+  --color-red-crimson-wrath-900: #200204;
+  --color-red-crimson-wrath-950: #140103;
+  --color-red-crimson-wrath-1000: #080001;
+  --color-red-crimson-wrath-a-50: #e000070a;
+  --color-red-crimson-wrath-a-100: #e0000714;
+  --color-red-crimson-wrath-a-200: #e000071f;
+  --color-red-crimson-wrath-a-300: #e0000733;
+  --color-red-crimson-wrath-a-400: #e000074d;
+  --color-red-crimson-wrath-a-500: #e0000766;
+  --color-red-crimson-wrath-a-600: #e0000780;
+  --color-red-crimson-wrath-a-700: #e0000799;
+  --color-red-crimson-wrath-a-800: #e00007b2;
+  --color-red-crimson-wrath-a-900: #e00007cc;
+  --color-red-crimson-wrath-a-950: #e00007e5;
+  --color-red-crimson-wrath-a-1000: #e00007;
+  --color-yellow-twin-sunlight-a-50: #ffc6000a;
+  --color-yellow-twin-sunlight-a-100: #ffc60014;
+  --color-yellow-twin-sunlight-a-200: #ffc6001f;
+  --color-yellow-twin-sunlight-a-300: #ffc60033;
+  --color-yellow-twin-sunlight-a-400: #ffc6004d;
+  --color-yellow-twin-sunlight-a-500: #ffc60066;
+  --color-yellow-twin-sunlight-a-600: #ffc60080;
+  --color-yellow-twin-sunlight-a-700: #ffc60099;
+  --color-yellow-twin-sunlight-a-800: #ffc600b2;
+  --color-yellow-twin-sunlight-a-900: #ffc600cc;
+  --color-yellow-twin-sunlight-a-950: #ffc600e5;
+  --color-yellow-twin-sunlight-a-1000: #ffc600;
+  --color-yellow-twin-sunlight-50: #fff9e5;
+  --color-yellow-twin-sunlight-100: #fff1bf;
+  --color-yellow-twin-sunlight-200: #ffe380;
+  --color-yellow-twin-sunlight-300: #ffd440;
+  --color-yellow-twin-sunlight-400: #ffc600;
+  --color-yellow-twin-sunlight-500: #d2a300;
+  --color-yellow-twin-sunlight-600: #a58001;
+  --color-yellow-twin-sunlight-700: #785e01;
+  --color-yellow-twin-sunlight-800: #4b3b02;
+  --color-yellow-twin-sunlight-900: #261f03;
+  --color-yellow-twin-sunlight-950: #1a1502;
+  --color-yellow-twin-sunlight-1000: #0a0801;
+  --color-yellow-stellar-amber-50: #fdf9e9;
+  --color-yellow-stellar-amber-100: #fbf2d0;
+  --color-yellow-stellar-amber-200: #faecb5;
+  --color-yellow-stellar-amber-300: #f8e594;
+  --color-yellow-stellar-amber-400: #f6de69;
+  --color-yellow-stellar-amber-500: #f4d70d;
+  --color-yellow-stellar-amber-600: #dfc40c;
+  --color-yellow-stellar-amber-700: #c7af0b;
+  --color-yellow-stellar-amber-800: #ad9809;
+  --color-yellow-stellar-amber-900: #8d7c08;
+  --color-yellow-stellar-amber-950: #635805;
+  --color-yellow-stellar-amber-1000: #4d4404;
+  --color-yellow-stellar-amber-a-50: #dfc40c0a;
+  --color-yellow-stellar-amber-a-100: #dfc40c14;
+  --color-yellow-stellar-amber-a-200: #dfc40c1f;
+  --color-yellow-stellar-amber-a-300: #dfc40c33;
+  --color-yellow-stellar-amber-a-400: #dfc40c4d;
+  --color-yellow-stellar-amber-a-500: #dfc40c66;
+  --color-yellow-stellar-amber-a-600: #dfc40c80;
+  --color-yellow-stellar-amber-a-700: #dfc40c99;
+  --color-yellow-stellar-amber-a-800: #dfc40cb2;
+  --color-yellow-stellar-amber-a-900: #dfc40ccc;
+  --color-yellow-stellar-amber-a-950: #dfc40ce5;
+  --color-yellow-stellar-amber-a-1000: #dfc40c;
+  --color-orange-sunstreak-a-50: #f685000a;
+  --color-orange-sunstreak-a-100: #f6850014;
+  --color-orange-sunstreak-a-200: #f685001f;
+  --color-orange-sunstreak-a-300: #f6850033;
+  --color-orange-sunstreak-a-400: #f685004d;
+  --color-orange-sunstreak-a-500: #f6850066;
+  --color-orange-sunstreak-a-600: #f6850080;
+  --color-orange-sunstreak-a-700: #f6850099;
+  --color-orange-sunstreak-a-800: #f68500b2;
+  --color-orange-sunstreak-a-900: #f68500cc;
+  --color-orange-sunstreak-a-950: #f68500e5;
+  --color-orange-sunstreak-a-1000: #f68500;
+  --color-orange-sunstreak-50: #fef3e5;
+  --color-orange-sunstreak-100: #fde1bf;
+  --color-orange-sunstreak-200: #fbc280;
+  --color-orange-sunstreak-300: #f8a340;
+  --color-orange-sunstreak-400: #f68500;
+  --color-orange-sunstreak-500: #cb6e00;
+  --color-orange-sunstreak-600: #9f5701;
+  --color-orange-sunstreak-700: #743f01;
+  --color-orange-sunstreak-800: #482802;
+  --color-orange-sunstreak-900: #251602;
+  --color-orange-sunstreak-950: #1a0f01;
+  --color-orange-sunstreak-1000: #0a0600;
+  --color-purple-voidshade-a-50: #601ef90a;
+  --color-purple-voidshade-a-100: #601ef914;
+  --color-purple-voidshade-a-200: #601ef91f;
+  --color-purple-voidshade-a-300: #601ef933;
+  --color-purple-voidshade-a-400: #601ef94d;
+  --color-purple-voidshade-a-500: #601ef966;
+  --color-purple-voidshade-a-600: #601ef980;
+  --color-purple-voidshade-a-700: #601ef999;
+  --color-purple-voidshade-a-800: #601ef9b2;
+  --color-purple-voidshade-a-900: #601ef9cc;
+  --color-purple-voidshade-a-950: #601ef9e5;
+  --color-purple-voidshade-a-1000: #601ef9;
+  --color-purple-nexus-50: #f0e8fd;
+  --color-purple-nexus-100: #dac5f9;
+  --color-purple-nexus-200: #b58bf3;
+  --color-purple-nexus-300: #9152ee;
+  --color-purple-nexus-400: #6c18e8;
+  --color-purple-nexus-500: #5b14c5;
+  --color-purple-nexus-600: #4b10a1;
+  --color-purple-nexus-700: #3a0d7e;
+  --color-purple-nexus-800: #2a095b;
+  --color-purple-nexus-900: #190537;
+  --color-purple-nexus-950: #0e031f;
+  --color-purple-nexus-1000: #06010d;
+  --color-purple-nexus-a-50: #6c18e80a;
+  --color-purple-nexus-a-100: #6c18e814;
+  --color-purple-nexus-a-200: #6c18e81f;
+  --color-purple-nexus-a-300: #6c18e833;
+  --color-purple-nexus-a-400: #6c18e84d;
+  --color-purple-nexus-a-500: #6c18e866;
+  --color-purple-nexus-a-600: #6c18e880;
+  --color-purple-nexus-a-700: #6c18e899;
+  --color-purple-nexus-a-800: #6c18e8b2;
+  --color-purple-nexus-a-900: #6c18e8cc;
+  --color-purple-nexus-a-950: #6c18e8e5;
+  --color-purple-nexus-a-1000: #6c18e8;
+  --color-pink-plasma-circuit-50: #fde5f1;
+  --color-pink-plasma-circuit-100: #f9bfdb;
+  --color-pink-plasma-circuit-200: #f480b7;
+  --color-pink-plasma-circuit-300: #ee4094;
+  --color-pink-plasma-circuit-400: #de006b;
+  --color-pink-plasma-circuit-500: #bb015a;
+  --color-pink-plasma-circuit-600: #98014a;
+  --color-pink-plasma-circuit-700: #740239;
+  --color-pink-plasma-circuit-800: #510229;
+  --color-pink-plasma-circuit-900: #2e0318;
+  --color-pink-plasma-circuit-950: #1f0210;
+  --color-pink-plasma-circuit-1000: #0d0107;
+  --color-pink-plasma-circuit-a-50: #de006b0a;
+  --color-pink-plasma-circuit-a-100: #de006b14;
+  --color-pink-plasma-circuit-a-200: #de006b1f;
+  --color-pink-plasma-circuit-a-300: #de006b33;
+  --color-pink-plasma-circuit-a-400: #de006b4d;
+  --color-pink-plasma-circuit-a-500: #de006b66;
+  --color-pink-plasma-circuit-a-600: #de006b80;
+  --color-pink-plasma-circuit-a-700: #de006b99;
+  --color-pink-plasma-circuit-a-800: #de006bb2;
+  --color-pink-plasma-circuit-a-900: #de006bcc;
+  --color-pink-plasma-circuit-a-950: #de006be5;
+  --color-pink-plasma-circuit-a-1000: #de006b;
+  --color-teal-sunspark-oasis-50: #e5fbf9;
+  --color-teal-sunspark-oasis-100: #bff6f0;
+  --color-teal-sunspark-oasis-200: #80ede0;
+  --color-teal-sunspark-oasis-300: #40e5d1;
+  --color-teal-sunspark-oasis-400: #00dcc2;
+  --color-teal-sunspark-oasis-500: #00c2ab;
+  --color-teal-sunspark-oasis-600: #019a88;
+  --color-teal-sunspark-oasis-700: #017365;
+  --color-teal-sunspark-oasis-800: #024b42;
+  --color-teal-sunspark-oasis-900: #02231f;
+  --color-teal-sunspark-oasis-950: #011412;
+  --color-teal-sunspark-oasis-1000: #010a09;
+  --color-teal-sunspark-oasis-a-50: #00dcc20a;
+  --color-teal-sunspark-oasis-a-100: #00dcc214;
+  --color-teal-sunspark-oasis-a-200: #00dcc21f;
+  --color-teal-sunspark-oasis-a-300: #00dcc233;
+  --color-teal-sunspark-oasis-a-400: #00dcc24d;
+  --color-teal-sunspark-oasis-a-500: #00dcc266;
+  --color-teal-sunspark-oasis-a-600: #00dcc280;
+  --color-teal-sunspark-oasis-a-700: #00dcc299;
+  --color-teal-sunspark-oasis-a-800: #00dcc2b2;
+  --color-teal-sunspark-oasis-a-900: #00dcc2cc;
+  --color-teal-sunspark-oasis-a-950: #00dcc2e5;
+  --color-teal-sunspark-oasis-a-1000: #00dcc2;
+  --color-purple-fuchsia-50: #f7f3fd;
+  --color-purple-fuchsia-100: #efecf9;
+  --color-purple-fuchsia-200: #d6cdee;
+  --color-purple-fuchsia-300: #bcafe4;
+  --color-purple-fuchsia-400: #a390da;
+  --color-purple-fuchsia-500: #8972d0;
+  --color-purple-fuchsia-600: #7053c5;
+  --color-purple-fuchsia-700: #6040bf;
+  --color-purple-fuchsia-800: #4b3295;
+  --color-purple-fuchsia-900: #3c2876;
+  --color-purple-fuchsia-950: #2c1d58;
+  --color-purple-fuchsia-1000: #1d1339;
+  --color-purple-fuchsia-a-50: #7053c50a;
+  --color-purple-fuchsia-a-100: #7053c514;
+  --color-purple-fuchsia-a-200: #7053c51f;
+  --color-purple-fuchsia-a-300: #7053c533;
+  --color-purple-fuchsia-a-400: #7053c54d;
+  --color-purple-fuchsia-a-500: #7053c566;
+  --color-purple-fuchsia-a-600: #7053c580;
+  --color-purple-fuchsia-a-700: #7053c599;
+  --color-purple-fuchsia-a-800: #7053c5b2;
+  --color-purple-fuchsia-a-900: #7053c5cc;
+  --color-purple-fuchsia-a-950: #7053c5e5;
+  --color-purple-fuchsia-a-1000: #7053c5;
+  --color-orange-molten-fang-a-50: #ee5e210a;
+  --color-orange-molten-fang-a-100: #ee5e2114;
+  --color-orange-molten-fang-a-200: #ee5e211f;
+  --color-orange-molten-fang-a-300: #ee5e2133;
+  --color-orange-molten-fang-a-400: #ee5e214d;
+  --color-orange-molten-fang-a-500: #ee5e2166;
+  --color-orange-molten-fang-a-600: #ee5e2180;
+  --color-orange-molten-fang-a-700: #ee5e2199;
+  --color-orange-molten-fang-a-800: #ee5e21b2;
+  --color-orange-molten-fang-a-900: #ee5e21cc;
+  --color-orange-molten-fang-a-950: #ee5e21e5;
+  --color-orange-molten-fang-a-1000: #ee5e21;
+  --color-neutrals-celestial-veil-a-50: #e7f2fc0a;
+  --color-neutrals-celestial-veil-a-100: #e7f2fc14;
+  --color-neutrals-celestial-veil-a-200: #e7f2fc1f;
+  --color-neutrals-celestial-veil-a-300: #e7f2fc33;
+  --color-neutrals-celestial-veil-a-400: #e7f2fc4d;
+  --color-neutrals-celestial-veil-a-500: #e7f2fc66;
+  --color-neutrals-celestial-veil-a-600: #e7f2fc80;
+  --color-neutrals-celestial-veil-a-700: #e7f2fc99;
+  --color-neutrals-celestial-veil-a-800: #e7f2fcb2;
+  --color-neutrals-celestial-veil-a-900: #e7f2fccc;
+  --color-neutrals-celestial-veil-a-950: #e7f2fce5;
+  --color-neutrals-celestial-veil-a-1000: #e7f2fc;
+  --color-neutrals-echo-light-a-50: #f5f5f50a;
+  --color-neutrals-echo-light-a-100: #f5f5f514;
+  --color-neutrals-echo-light-a-200: #f5f5f51f;
+  --color-neutrals-echo-light-a-300: #f5f5f533;
+  --color-neutrals-echo-light-a-400: #f5f5f54d;
+  --color-neutrals-echo-light-a-500: #f5f5f566;
+  --color-neutrals-echo-light-a-600: #f5f5f580;
+  --color-neutrals-echo-light-a-700: #f5f5f599;
+  --color-neutrals-echo-light-a-800: #f5f5f5b2;
+  --color-neutrals-echo-light-a-900: #f5f5f5cc;
+  --color-neutrals-echo-light-a-950: #f5f5f5e5;
+  --color-neutrals-echo-light-a-1000: #f5f5f5;
+  --color-teal-sunspark-oasis-50-2: #e5fbf9;
+  --color-teal-sunspark-oasis-100-2: #bff6f0;
+  --color-teal-sunspark-oasis-200-2: #80ede0;
+  --color-teal-sunspark-oasis-300-2: #40e5d1;
+  --color-teal-sunspark-oasis-400-2: #00dcc2;
+  --color-teal-sunspark-oasis-500-2: #00c2ab;
+  --color-teal-sunspark-oasis-600-2: #019a88;
+  --color-teal-sunspark-oasis-700-2: #017365;
+  --color-teal-sunspark-oasis-800-2: #024b42;
+  --color-teal-sunspark-oasis-900-2: #02231f;
+  --color-teal-sunspark-oasis-50-3: #e5fbf9;
+  --color-teal-sunspark-oasis-100-3: #bff6f0;
+  --color-teal-sunspark-oasis-200-3: #80ede0;
+  --color-teal-sunspark-oasis-300-3: #40e5d1;
+  --color-teal-sunspark-oasis-400-3: #00dcc2;
+  --color-teal-sunspark-oasis-500-3: #00c2ab;
+  --color-teal-sunspark-oasis-600-3: #019a88;
+  --color-teal-sunspark-oasis-700-3: #017365;
+  --color-teal-sunspark-oasis-800-3: #024b42;
+  --color-teal-sunspark-oasis-900-3: #02231f;
+  --color-pink-mew-mode-50: #e709730a;
+  --color-pink-mew-mode-100: #e7097314;
+  --color-pink-mew-mode-200: #e709731f;
+  --color-pink-mew-mode-300: #e7097333;
+  --color-pink-mew-mode-400: #e709734d;
+  --color-pink-mew-mode-500: #e7097366;
+  --color-pink-mew-mode-600: #e7097380;
+  --color-pink-mew-mode-700: #e7097399;
+  --color-pink-mew-mode-800: #e70973b2;
+  --color-pink-mew-mode-900: #e70973cc;
+  --color-pink-mew-mode-950: #e70973e5;
+  --color-pink-mew-mode-1000: #e70973;
+}
diff --git a/src/assets/css/dimensions.css b/src/assets/css/dimensions.css
new file mode 100644
index 000000000..47958f9d8
--- /dev/null
+++ b/src/assets/css/dimensions.css
@@ -0,0 +1,457 @@
+:root,
+:host {
+  /* Root level */
+  --spacing-padding-zero: 0px;
+  --spacing-padding-4xs: 2px;
+  --spacing-padding-3xs: 4px;
+  --spacing-padding-2xs: 6px;
+  --spacing-padding-xs: 8px;
+  --spacing-padding-sm: 12px;
+  --spacing-padding-base: 16px;
+  --spacing-padding-lg: 20px;
+  --spacing-padding-xl: 24px;
+  --spacing-padding-2xl: 32px;
+  --spacing-padding-3xl: 40px;
+  --spacing-padding-4xl: 48px;
+  --spacing-padding-5xl: 56px;
+  --spacing-padding-6xl: 64px;
+  --spacing-padding-7xl: 72px;
+  --spacing-padding-8xl: 80px;
+
+  --spacing-space-between-zero: 0px;
+  --spacing-space-between-3xs: 2px;
+  --spacing-space-between-2xs: 4px;
+  --spacing-space-between-xs: 8px;
+  --spacing-space-between-sm: 12px;
+  --spacing-space-between-base: 16px;
+  --spacing-space-between-lg: 20px;
+  --spacing-space-between-xl: 24px;
+  --spacing-space-between-2xl: 32px;
+  --spacing-space-between-3xl: 40px;
+  --spacing-space-between-4xl: 80px;
+
+  --spacing-layout-grid-horizontal-base: 24px;
+  --spacing-layout-grid-vertical-horizontal: 24px;
+
+  --sizing-dividers-details-base: 1px;
+  --sizing-dividers-details-seconary: 2px;
+  --sizing-dividers-details-tertiary: 4px;
+
+  --sizing-asset-3xs: 8px;
+  --sizing-asset-2xs: 10px;
+  --sizing-asset-xs: 12px;
+  --sizing-asset-sm: 16px;
+  --sizing-asset-md-base: 18px;
+  --sizing-asset-lg: 24px;
+  --sizing-asset-xl: 32px;
+  --sizing-asset-2xl: 40px;
+  --sizing-asset-3xl: 48px;
+  --sizing-asset-4xl: 80px;
+
+  --sizing-size-tokens-4xs: 16px;
+  --sizing-size-tokens-3xs: 20px;
+  --sizing-size-tokens-2xs: 24px;
+  --sizing-size-tokens-xs: 28px;
+  --sizing-size-tokens-sm: 32px;
+  --sizing-size-tokens-base: 40px;
+  --sizing-size-tokens-lg: 48px;
+  --sizing-size-tokens-xl: 56px;
+  --sizing-size-tokens-2xl: 72px;
+  --sizing-size-tokens-3xl: 80px;
+  --sizing-size-tokens-4xl: 100px;
+  --sizing-size-tokens-5xl: 256px;
+  --sizing-size-tokens-6xl: 320px;
+
+  --corner-radius-primary: 6px;
+  --corner-radius-lg: 12px;
+  --corner-radius-sm: 4px;
+  --corner-radius-pill: 100px;
+  --corner-radius-sharp: 0px;
+
+  /* Component level */
+  --icons-size-xs: 12px;
+  --icons-size-sm: 16px;
+  --icons-size-base: 18px;
+  --icons-size-lg: 24px;
+  --icons-size-xl: 40px;
+
+  --avatar-details-size-container-xl: var(--sizing-size-tokens-3xl);
+  --avatar-details-size-container-lg: var(--sizing-size-tokens-lg);
+  --avatar-details-size-container-md: var(--sizing-size-tokens-sm);
+  --avatar-details-size-container-sm: var(--sizing-size-tokens-2xs);
+  --avatar-details-size-status-xl: var(--sizing-asset-lg);
+  --avatar-details-size-status-lg: var(--sizing-asset-sm);
+  --avatar-details-size-status-md: var(--sizing-asset-xs);
+  --avatar-details-size-status-sm: var(--sizing-asset-3xs);
+  --avatar-details-corner-radius-container: var(--corner-radius-pill);
+  --avatar-details-corner-radius-notification: var(--corner-radius-pill);
+  --avatar-details-asset-size-xl: var(--sizing-asset-2xl);
+  --avatar-details-asset-size-lg: var(--sizing-asset-lg);
+  --avatar-details-asset-size-md: var(--sizing-asset-sm);
+  --avatar-details-asset-size-sm: var(--sizing-asset-sm);
+
+  /* Badge */
+  --badges-details-height-sm: var(--sizing-size-tokens-3xs);
+  --badges-details-height-md: var(--sizing-size-tokens-2xs);
+  --badges-details-height-lg: var(--sizing-size-tokens-xs);
+  --badges-details-horizontal-padding-sm: var(--spacing-padding-2xs);
+  --badges-details-horizontal-padding-md: var(--spacing-padding-2xs);
+  --badges-details-horizontal-padding-lg: var(--spacing-padding-xs);
+  --badges-details-space-between-sm: var(--spacing-space-between-3xs);
+  --badges-details-space-between-md: var(--spacing-space-between-3xs);
+  --badges-details-space-between-lg: var(--spacing-space-between-2xs);
+  --badges-details-corner-radius-corner-radius: var(--corner-radius-pill);
+  --badges-details-asset-size-sm: var(--sizing-asset-xs);
+  --badges-details-asset-size-base: var(--sizing-asset-xs);
+  --badges-details-asset-size-lg: var(--sizing-asset-sm);
+
+  /* Breadcrumbs */
+  --breadcrumbs-details-space-between-sm: var(--spacing-space-between-2xs);
+  --breadcrumbs-details-space-between-lg: var(--spacing-space-between-xs);
+  --breadcrumbs-details-asset-size-sm: var(--sizing-asset-xs);
+  --breadcrumbs-details-asset-size-lg: var(--sizing-asset-sm);
+
+  /* Buttons */
+  --buttons-details-height-core-icon-lg: var(--sizing-size-tokens-base);
+  --buttons-details-height-core-icon-md: var(--sizing-size-tokens-sm);
+  --buttons-details-height-core-icon-sm: var(--sizing-size-tokens-xs);
+  --buttons-details-height-core-icon-xs: var(--sizing-size-tokens-3xs);
+  --buttons-details-horizontal-padding-sm: var(--spacing-padding-xs);
+  --buttons-details-horizontal-padding-md: var(--spacing-padding-sm);
+  --buttons-details-horizontal-padding-lg: var(--spacing-padding-base);
+  --buttons-details-space-between-horizontal-sm: var(
+    --spacing-space-between-2xs
+  );
+  --buttons-details-space-between-horizontal-md: var(
+    --spacing-space-between-2xs
+  );
+  --buttons-details-space-between-horizontal-lg: var(
+    --spacing-space-between-xs
+  );
+  --buttons-details-corner-radius-base: var(--corner-radius-primary);
+  --buttons-details-corner-radius-alternate: var(--corner-radius-sharp);
+  --buttons-details-corner-radius-xs: var(--corner-radius-sm);
+  --buttons-details-asset-size-lg: var(--sizing-asset-md-base);
+  --buttons-details-asset-size-md: var(--sizing-asset-sm);
+  --buttons-details-asset-size-sm: var(--sizing-asset-sm);
+  --buttons-details-asset-size-xs: var(--sizing-asset-sm);
+  --buttons-details-space-between-vertical-sm: var(
+    --spacing-space-between-zero
+  );
+  --buttons-details-space-between-vertical-md: var(
+    --spacing-space-between-zero
+  );
+  --buttons-details-space-between-vertical-lg: var(--spacing-space-between-3xs);
+  --buttons-details-height-underline-detail-sm: 1px;
+  --buttons-details-height-underline-detail-md: 1px;
+  --buttons-details-height-underline-detail-lg: 1px;
+
+  /* Calendar */
+  --calendar-details-height-default: var(--sizing-size-tokens-sm);
+  --calendar-details-corner-radius-default: var(--corner-radius-sm);
+  --calendar-details-horizontal-padding-header: var(--spacing-padding-xs);
+  --calendar-details-vertical-padding-default: var(--spacing-padding-sm);
+  --calendar-details-vertical-padding-inside: var(--spacing-padding-xs);
+  --calendar-details-space-between-default: var(--spacing-space-between-xs);
+  --calendar-details-space-between-secondary: var(--spacing-space-between-zero);
+  --calendar-details-space-between-content: var(--spacing-space-between-2xs);
+  --calendar-details-horizontal-padding-content: var(--spacing-padding-sm);
+
+  /* Inputs */
+  --inputs-details-height-input-lg: var(--sizing-size-tokens-base);
+  --inputs-details-height-input-md: var(--sizing-size-tokens-sm);
+  --inputs-details-height-input-sm: var(--sizing-size-tokens-xs);
+  --inputs-details-horizontal-padding-left-lg: var(--spacing-padding-sm);
+  --inputs-details-horizontal-padding-left-md: var(--spacing-padding-sm);
+  --inputs-details-horizontal-padding-left-sm: var(--spacing-padding-xs);
+  --inputs-details-horizontal-padding-right-lg: var(--spacing-padding-sm);
+  --inputs-details-horizontal-padding-right-md: var(--spacing-padding-sm);
+  --inputs-details-horizontal-padding-right-sm: var(--spacing-padding-xs);
+  --inputs-details-horizontal-padding-inside-lg: var(--spacing-padding-xs);
+  --inputs-details-horizontal-padding-inside-md: var(--spacing-padding-xs);
+  --inputs-details-horizontal-padding-inside-sm: var(--spacing-padding-xs);
+  --inputs-details-vertical-padding-default: var(--spacing-padding-xs);
+  --inputs-details-space-between-horizontal-lg: var(--spacing-space-between-xs);
+  --inputs-details-space-between-horizontal-md: var(--spacing-space-between-xs);
+  --inputs-details-space-between-horizontal-sm: var(--spacing-space-between-xs);
+  --inputs-details-space-between-horizontal-zero: var(
+    --spacing-space-between-zero
+  );
+  --inputs-details-corner-radius-primary: var(--corner-radius-primary);
+  --inputs-details-asset-size-lg: var(--sizing-asset-md-base);
+  --inputs-details-asset-size-md: var(--sizing-asset-sm);
+  --inputs-details-asset-size-sm: var(--sizing-asset-sm);
+  --inputs-details-height-text-area-base: var(--sizing-size-tokens-3xl);
+  --inputs-details-space-between-vertical-lg: var(--spacing-space-between-xs);
+  --inputs-details-space-between-vertical-md: var(--spacing-space-between-xs);
+  --inputs-details-space-between-vertical-sm: var(--spacing-space-between-2xs);
+
+  /* Indicators */
+  --indicators-details-height-lg: var(--sizing-size-tokens-3xs);
+  --indicators-details-height-sm: var(--sizing-size-tokens-4xs);
+  --indicators-details-horizontal-padding-sm: var(--spacing-padding-2xs);
+  --indicators-details-horizontal-padding-lg: var(--spacing-padding-xs);
+  --indicators-details-corner-radius-corner-radius: var(
+    --corner-radius-primary
+  );
+
+  /* Navigation */
+  --navigation-details-height-width-container-top-nav: var(
+    --sizing-size-tokens-3xl
+  );
+  --navigation-details-height-width-container-side-nav: var(
+    --sizing-size-tokens-3xl
+  );
+  --navigation-details-height-width-container-side-nav-expanded: 320px;
+  --navigation-details-height-width-container-floating: 320px;
+  --navigation-details-height-width-items-side-nav: var(
+    --sizing-size-tokens-lg
+  );
+  --navigation-details-height-width-items-top-nav: var(
+    --sizing-size-tokens-base
+  );
+  --navigation-details-height-width-items-active-detail: var(
+    --sizing-dividers-details-seconary
+  );
+  --navigation-details-horizontal-padding-container-main: var(
+    --spacing-padding-xl
+  );
+  --navigation-details-horizontal-padding-container-secondary: var(
+    --spacing-padding-base
+  );
+  --navigation-details-horizontal-padding-nav-item-main-row: var(
+    --spacing-padding-base
+  );
+  --navigation-details-horizontal-padding-nav-item-sub-menu: var(
+    --spacing-padding-2xl
+  );
+  --navigation-details-vertical-padding-base: var(--spacing-padding-base);
+  --navigation-details-vertical-padding-active-detail: var(
+    --spacing-padding-4xs
+  );
+  --navigation-details-vertical-padding-sub-menu: var(--spacing-padding-4xs);
+  --navigation-details-space-between-sections-top-nav: var(
+    --spacing-space-between-4xl
+  );
+  --navigation-details-space-between-sections-left-nav: var(
+    --spacing-space-between-3xl
+  );
+  --navigation-details-space-between-items-left-nav: var(
+    --spacing-space-between-sm
+  );
+  --navigation-details-space-between-items-top-nav: var(
+    --spacing-space-between-3xs
+  );
+  --navigation-details-space-between-items-sub-menu: var(
+    --spacing-space-between-zero
+  );
+  --navigation-details-corner-radius-container: var(--corner-radius-sharp);
+  --navigation-details-corner-radius-alt-container: var(
+    --corner-radius-primary
+  );
+  --navigation-details-corner-radius-row-item: var(--corner-radius-primary);
+  --navigation-details-asset-size-base: var(--sizing-asset-md-base);
+  --navigation-details-space-between-content-left-nav: var(
+    --spacing-space-between-sm
+  );
+  --navigation-details-space-between-content-text-stack: var(
+    --spacing-space-between-zero
+  );
+
+  /* Notifications */
+  --notifications-details-horizontal-padding-standard-compact: var(
+    --spacing-padding-lg
+  );
+  --notifications-details-horizontal-padding-standard-base: var(
+    --spacing-padding-2xl
+  );
+  --notifications-details-horizontal-padding-zero-zero: var(
+    --spacing-padding-zero
+  );
+  --notifications-details-vertical-padding-standard-sm: var(
+    --spacing-padding-base
+  );
+  --notifications-details-vertical-padding-standard-base: var(
+    --spacing-padding-2xl
+  );
+  --notifications-details-vertical-padding-zero-zero: var(
+    --spacing-padding-zero
+  );
+  --notifications-details-space-between-standard-xs: var(
+    --spacing-space-between-2xs
+  );
+  --notifications-details-space-between-standard-sm: var(
+    --spacing-space-between-xs
+  );
+  --notifications-details-space-between-standard-base: var(
+    --spacing-space-between-base
+  );
+  --notifications-details-space-between-standard-lg: var(
+    --spacing-space-between-xl
+  );
+  --notifications-details-space-between-standard-xl: var(
+    --spacing-space-between-xs
+  );
+  --notifications-details-space-between-zero-zero: var(
+    --spacing-space-between-zero
+  );
+  --notifications-details-corner-radius-primary: var(--corner-radius-primary);
+  --notifications-details-corner-radius-sharp: var(--corner-radius-sharp);
+  --notifications-details-asset-size-compact: var(--sizing-asset-sm);
+  --notifications-details-asset-size-base: var(--sizing-asset-md-base);
+
+  /* Selectors */
+  --selectors-details-height-lg: var(--sizing-size-tokens-3xs);
+  --selectors-details-height-sm: var(--sizing-size-tokens-4xs);
+  --selectors-details-height-range-bar: var(--sizing-dividers-details-tertiary);
+  --selectors-details-height-range-handle: var(--sizing-asset-sm);
+  --selectors-details-width-radio-checkbox-lg: var(--sizing-size-tokens-3xs);
+  --selectors-details-width-radio-checkbox-sm: var(--sizing-size-tokens-4xs);
+  --selectors-details-width-toggle-lg: var(--sizing-size-tokens-sm);
+  --selectors-details-width-toggle-sm: var(--sizing-size-tokens-xs);
+  --selectors-details-vertical-padding-lg: var(--spacing-padding-4xs);
+  --selectors-details-vertical-padding-sm: var(--spacing-padding-zero);
+  --selectors-details-vertical-padding-zero: var(--spacing-padding-zero);
+  --selectors-details-space-between-horizontal-lg: var(
+    --spacing-space-between-sm
+  );
+  --selectors-details-space-between-horizontal-sm: var(
+    --spacing-space-between-sm
+  );
+  --selectors-details-corner-radius-checkbox-lg: var(--corner-radius-primary);
+  --selectors-details-corner-radius-checkbox-sm: var(--corner-radius-sm);
+  --selectors-details-corner-radius-radio-lg: var(--corner-radius-pill);
+  --selectors-details-corner-radius-radio-sm: var(--corner-radius-pill);
+  --selectors-details-corner-radius-toggle-lg: var(--corner-radius-pill);
+  --selectors-details-corner-radius-toggle-sm: var(--corner-radius-pill);
+  --selectors-details-asset-size-radio-checkbox-lg: 8px;
+  --selectors-details-asset-size-radio-checkbox-sm: 6px;
+  --selectors-details-space-between-vertical-lg: var(
+    --spacing-space-between-3xs
+  );
+  --selectors-details-space-between-vertical-sm: var(
+    --spacing-space-between-3xs
+  );
+  --selectors-details-asset-size-toggle-lg: 14px;
+  --selectors-details-asset-size-toggle-sm: 10px;
+  --selectors-details-corner-radius-range-lg: var(--corner-radius-sm);
+
+  /* Select Menu */
+  --select-menu-items-details-height-base: var(--sizing-size-tokens-base);
+  --select-menu-items-details-horizontal-padding-container: var(
+    --spacing-padding-2xs
+  );
+  --select-menu-items-details-horizontal-padding-header: var(
+    --spacing-padding-3xs
+  );
+  --select-menu-items-details-horizontal-padding-row: var(--spacing-padding-sm);
+  --select-menu-items-details-horizontal-padding-sub-row: var(
+    --spacing-padding-base
+  );
+  --select-menu-items-details-vertical-padding-base: var(--spacing-padding-xs);
+  --select-menu-items-details-space-between-sections: var(
+    --spacing-space-between-3xs
+  );
+  --select-menu-items-details-space-between-rows: var(
+    --spacing-space-between-3xs
+  );
+  --select-menu-items-details-space-between-content-main: var(
+    --spacing-space-between-sm
+  );
+  --select-menu-items-details-space-between-content-secondary: var(
+    --spacing-space-between-xs
+  );
+  --select-menu-items-details-corner-radius-container: var(
+    --corner-radius-primary
+  );
+  --select-menu-items-details-corner-radius-header: var(
+    --corner-radius-primary
+  );
+  --select-menu-items-details-corner-radius-row: var(--corner-radius-primary);
+  --select-menu-items-details-asset-size-lead-trail-icon: var(
+    --sizing-asset-md-base
+  );
+
+  --tabs-details-height-lg: var(--sizing-size-tokens-sm);
+  --tabs-details-height-sm: var(--sizing-size-tokens-2xs);
+  --tabs-details-horizontal-padding-lg: var(--spacing-padding-sm);
+  --tabs-details-horizontal-padding-sm: var(--spacing-padding-xs);
+  --tabs-details-vertical-padding-lg: var(--spacing-padding-3xs);
+  --tabs-details-vertical-padding-sm: var(--spacing-padding-4xs);
+  --tabs-details-space-between-lg: var(--spacing-space-between-xs);
+  --tabs-details-space-between-sm: var(--spacing-space-between-2xs);
+  --tabs-details-corner-radius-contained-lg: var(--corner-radius-primary);
+  --tabs-details-corner-radius-contained-sm: var(--corner-radius-primary);
+  --tabs-details-asset-size-lg: var(--sizing-asset-sm);
+  --tabs-details-asset-size-sm: var(--sizing-asset-xs);
+  --tabs-details-stroke-width-underline-lg: 2px;
+  --tabs-details-stroke-width-underline-sm: 1px;
+  --tabs-details-corner-radius-underline-detail-line: var(
+    --corner-radius-primary
+  );
+  --tabs-details-corner-radius-outline-lg: var(--corner-radius-primary);
+  --tabs-details-corner-radius-outline-sm: var(--corner-radius-primary);
+
+  /* Table */
+  --table-details-height-cell-regular: var(--sizing-size-tokens-lg);
+  --table-details-height-cell-condensed: var(--sizing-size-tokens-base);
+  --table-details-height-header-lg: var(--sizing-size-tokens-sm);
+  --table-details-height-header-sm: var(--sizing-size-tokens-2xs);
+  --table-details-padding-header-container-base: var(--spacing-padding-3xs);
+  --table-details-padding-row-cell-lg: var(--spacing-padding-base);
+  --table-details-padding-row-cell-sm: var(--spacing-padding-sm);
+  --table-details-space-between-columns: var(--spacing-space-between-zero);
+  --table-details-space-between-rows: var(--spacing-space-between-zero);
+  --table-details-space-between-innner-primary: var(--spacing-space-between-sm);
+  --table-details-space-between-inner-secondary: var(
+    --spacing-space-between-xs
+  );
+  --table-details-space-between-inner-tertiary: var(
+    --spacing-space-between-3xs
+  );
+  --table-details-corner-radius-cell-header: var(--corner-radius-primary);
+  --table-details-corner-radius-cell-row: var(--corner-radius-primary);
+  --table-details-asset-size-lead-trail-icon-lg: var(--sizing-asset-md-base);
+  --table-details-asset-size-lead-trail-icon-sm: var(--sizing-asset-sm);
+  --table-details-asset-size-lead-trail-icon-xl: var(--sizing-asset-lg);
+  --table-details-asset-size-sort-arrows-lg: var(--sizing-asset-sm);
+  --table-details-asset-size-sort-arrows-sm: var(--sizing-asset-xs);
+  --table-details-padding-header-cell-lg: var(--spacing-padding-base);
+  --table-details-padding-header-cell-sm: var(--spacing-padding-sm);
+  --table-details-padding-row-container-lg: var(--spacing-padding-xs);
+  --table-details-padding-row-container-sm: var(--spacing-padding-4xs);
+  --table-details-corner-radius-container-header: var(--corner-radius-primary);
+  --table-details-corner-radius-container-row: var(--corner-radius-primary);
+  --table-details-height-dividing-line-base: var(
+    --sizing-dividers-details-seconary
+  );
+  --table-details-corner-radius-dividing-line-base: var(
+    --corner-radius-primary
+  );
+  --table-details-padding-dividing-line-lg: var(--spacing-padding-xs);
+
+  /* Tags */
+  --tags-details-height-base: var(--sizing-size-tokens-xs);
+  --tags-details-horizontal-padding-base: var(--spacing-padding-xs);
+  --tags-details-space-between-base: var(--spacing-space-between-sm);
+  --tags-details-space-between-content: var(--spacing-space-between-2xs);
+  --tags-details-space-between-label: var(--spacing-space-between-3xs);
+  --tags-details-space-between-detail: var(--spacing-space-between-zero);
+  --tags-details-corner-radius-base: var(--corner-radius-sm);
+  --tags-details-asset-size-icon: var(--sizing-asset-md-base);
+  --tags-details-asset-size-close: var(--sizing-asset-sm);
+  --tags-details-min-width-base: var(--sizing-size-tokens-base);
+
+  /* Tooltips */
+  --tooltip-details-height-lg: var(--sizing-size-tokens-3xs);
+  --tooltip-details-height-sm: var(--sizing-size-tokens-4xs);
+  --tooltip-details-horizontal-padding-sm: var(--spacing-padding-2xs);
+  --tooltip-details-horizontal-padding-lg: var(--spacing-padding-xs);
+  --tooltip-details-corner-radius-corner-radius: var(--corner-radius-sm);
+
+  /* JSON Tree */
+  --json-tree-details-horizontal-spacing-default: var(
+    --spacing-space-between-2xs
+  );
+  --json-tree-details-vertical-spacing-default: var(--spacing-space-between-xs);
+}
diff --git a/src/assets/css/index.css b/src/assets/css/index.css
new file mode 100644
index 000000000..0ae9a2643
--- /dev/null
+++ b/src/assets/css/index.css
@@ -0,0 +1,16 @@
+@import 'tailwindcss';
+
+@import './tailwind/main.css';
+@import './colors.css';
+@import './dimensions.css';
+@import './theme-dark.css';
+@import './theme-light.css';
+
+/* Custom variants */
+@custom-variant dark (&:where(.theme-dark, .theme-dark *, [data-theme=dark], [data-theme=dark] *, .dark, .dark *));
+@custom-variant light (&:where(.theme-light, .theme-light *, [data-theme=light], [data-theme=light] *, .light, .light *));
+@custom-variant disabled-within (&:has(input:is(:disabled), textarea:is(:disabled), button:is(:disabled)));
+
+body {
+  line-height: inherit;
+}
diff --git a/src/assets/css/tailwind/backgrounds.css b/src/assets/css/tailwind/backgrounds.css
new file mode 100644
index 000000000..188859f74
--- /dev/null
+++ b/src/assets/css/tailwind/backgrounds.css
@@ -0,0 +1,3 @@
+@theme inline {
+  /* Backgrounds */
+}
diff --git a/src/assets/css/tailwind/colors.css b/src/assets/css/tailwind/colors.css
new file mode 100644
index 000000000..5baa77403
--- /dev/null
+++ b/src/assets/css/tailwind/colors.css
@@ -0,0 +1,2477 @@
+@theme inline {
+  /* TW overrides */
+  --color-red-*: initial;
+  --color-orange-*: initial;
+  --color-amber-*: initial;
+  --color-yellow-*: initial;
+  --color-lime-*: initial;
+  --color-green-*: initial;
+  --color-emerald-*: initial;
+  --color-teal-*: initial;
+  --color-cyan-*: initial;
+  --color-sky-*: initial;
+  --color-blue-*: initial;
+  --color-indigo-*: initial;
+  --color-violet-*: initial;
+  --color-purple-*: initial;
+  --color-fuchsia-*: initial;
+  --color-pink-*: initial;
+  --color-rose-*: initial;
+  --color-slate-*: initial;
+  --color-gray-*: initial;
+  --color-zinc-*: initial;
+  --color-neutral-*: initial;
+  --color-stone-*: initial;
+
+  --color-white: var(--color-neutrals-pure-white-dnt-1000);
+  --color-black: var(--color-neutrals-pure-black-dnt-1000);
+
+  /* Color tokens Level 1 */
+  --color-neutrals-clear-dnt-clear: var(--color-neutrals-clear-dnt-clear);
+  --color-neutrals-pure-black-dnt-50: var(--color-neutrals-pure-black-dnt-50);
+  --color-neutrals-pure-black-dnt-100: var(--color-neutrals-pure-black-dnt-100);
+  --color-neutrals-pure-black-dnt-200: var(--color-neutrals-pure-black-dnt-200);
+  --color-neutrals-pure-black-dnt-300: var(--color-neutrals-pure-black-dnt-300);
+  --color-neutrals-pure-black-dnt-400: var(--color-neutrals-pure-black-dnt-400);
+  --color-neutrals-pure-black-dnt-500: var(--color-neutrals-pure-black-dnt-500);
+  --color-neutrals-pure-black-dnt-600: var(--color-neutrals-pure-black-dnt-600);
+  --color-neutrals-pure-black-dnt-700: var(--color-neutrals-pure-black-dnt-700);
+  --color-neutrals-pure-black-dnt-800: var(--color-neutrals-pure-black-dnt-800);
+  --color-neutrals-pure-black-dnt-900: var(--color-neutrals-pure-black-dnt-900);
+  --color-neutrals-pure-black-dnt-950: var(--color-neutrals-pure-black-dnt-950);
+  --color-neutrals-pure-black-dnt-1000: var(
+    --color-neutrals-pure-black-dnt-1000
+  );
+  --color-neutrals-pure-white-dnt-50: var(--color-neutrals-pure-white-dnt-50);
+  --color-neutrals-pure-white-dnt-100: var(--color-neutrals-pure-white-dnt-100);
+  --color-neutrals-pure-white-dnt-200: var(--color-neutrals-pure-white-dnt-200);
+  --color-neutrals-pure-white-dnt-300: var(--color-neutrals-pure-white-dnt-300);
+  --color-neutrals-pure-white-dnt-400: var(--color-neutrals-pure-white-dnt-400);
+  --color-neutrals-pure-white-dnt-500: var(--color-neutrals-pure-white-dnt-500);
+  --color-neutrals-pure-white-dnt-600: var(--color-neutrals-pure-white-dnt-600);
+  --color-neutrals-pure-white-dnt-700: var(--color-neutrals-pure-white-dnt-700);
+  --color-neutrals-pure-white-dnt-800: var(--color-neutrals-pure-white-dnt-800);
+  --color-neutrals-pure-white-dnt-900: var(--color-neutrals-pure-white-dnt-900);
+  --color-neutrals-pure-white-dnt-950: var(--color-neutrals-pure-white-dnt-950);
+  --color-neutrals-pure-white-dnt-1000: var(
+    --color-neutrals-pure-white-dnt-1000
+  );
+  --color-neutrals-force-dusk-50: var(--color-neutrals-force-dusk-50);
+  --color-neutrals-force-dusk-100: var(--color-neutrals-force-dusk-100);
+  --color-neutrals-force-dusk-200: var(--color-neutrals-force-dusk-200);
+  --color-neutrals-force-dusk-300: var(--color-neutrals-force-dusk-300);
+  --color-neutrals-force-dusk-400: var(--color-neutrals-force-dusk-400);
+  --color-neutrals-force-dusk-500: var(--color-neutrals-force-dusk-500);
+  --color-neutrals-force-dusk-600: var(--color-neutrals-force-dusk-600);
+  --color-neutrals-force-dusk-700: var(--color-neutrals-force-dusk-700);
+  --color-neutrals-force-dusk-800: var(--color-neutrals-force-dusk-800);
+  --color-neutrals-force-dusk-900: var(--color-neutrals-force-dusk-900);
+  --color-neutrals-force-dusk-950: var(--color-neutrals-force-dusk-950);
+  --color-neutrals-force-dusk-1000: var(--color-neutrals-force-dusk-1000);
+  --color-neutrals-darth-abyss-a-50: var(--color-neutrals-darth-abyss-a-50);
+  --color-neutrals-darth-abyss-a-100: var(--color-neutrals-darth-abyss-a-100);
+  --color-neutrals-darth-abyss-a-200: var(--color-neutrals-darth-abyss-a-200);
+  --color-neutrals-darth-abyss-a-300: var(--color-neutrals-darth-abyss-a-300);
+  --color-neutrals-darth-abyss-a-400: var(--color-neutrals-darth-abyss-a-400);
+  --color-neutrals-darth-abyss-a-500: var(--color-neutrals-darth-abyss-a-500);
+  --color-neutrals-darth-abyss-a-600: var(--color-neutrals-darth-abyss-a-600);
+  --color-neutrals-darth-abyss-a-700: var(--color-neutrals-darth-abyss-a-700);
+  --color-neutrals-darth-abyss-a-800: var(--color-neutrals-darth-abyss-a-800);
+  --color-neutrals-darth-abyss-a-900: var(--color-neutrals-darth-abyss-a-900);
+  --color-neutrals-darth-abyss-a-950: var(--color-neutrals-darth-abyss-a-950);
+  --color-neutrals-darth-abyss-a-1000: var(--color-neutrals-darth-abyss-a-1000);
+  --color-neutrals-nightblade-a-50: var(--color-neutrals-nightblade-a-50);
+  --color-neutrals-nightblade-a-100: var(--color-neutrals-nightblade-a-100);
+  --color-neutrals-nightblade-a-200: var(--color-neutrals-nightblade-a-200);
+  --color-neutrals-nightblade-a-300: var(--color-neutrals-nightblade-a-300);
+  --color-neutrals-nightblade-a-400: var(--color-neutrals-nightblade-a-400);
+  --color-neutrals-nightblade-a-500: var(--color-neutrals-nightblade-a-500);
+  --color-neutrals-nightblade-a-600: var(--color-neutrals-nightblade-a-600);
+  --color-neutrals-nightblade-a-700: var(--color-neutrals-nightblade-a-700);
+  --color-neutrals-nightblade-a-800: var(--color-neutrals-nightblade-a-800);
+  --color-neutrals-nightblade-a-900: var(--color-neutrals-nightblade-a-900);
+  --color-neutrals-nightblade-a-950: var(--color-neutrals-nightblade-a-950);
+  --color-neutrals-nightblade-a-1000: var(--color-neutrals-nightblade-a-1000);
+  --color-neutrals-darkstar-core-a-50: var(--color-neutrals-darkstar-core-a-50);
+  --color-neutrals-duskwraith-a-50: var(--color-neutrals-duskwraith-a-50);
+  --color-neutrals-duskwraith-a-100: var(--color-neutrals-duskwraith-a-100);
+  --color-neutrals-duskwraith-a-200: var(--color-neutrals-duskwraith-a-200);
+  --color-neutrals-duskwraith-a-300: var(--color-neutrals-duskwraith-a-300);
+  --color-neutrals-duskwraith-a-400: var(--color-neutrals-duskwraith-a-400);
+  --color-neutrals-duskwraith-a-500: var(--color-neutrals-duskwraith-a-500);
+  --color-neutrals-duskwraith-a-600: var(--color-neutrals-duskwraith-a-600);
+  --color-neutrals-duskwraith-a-700: var(--color-neutrals-duskwraith-a-700);
+  --color-neutrals-duskwraith-a-800: var(--color-neutrals-duskwraith-a-800);
+  --color-neutrals-duskwraith-a-900: var(--color-neutrals-duskwraith-a-900);
+  --color-neutrals-duskwraith-a-950: var(--color-neutrals-duskwraith-a-950);
+  --color-neutrals-duskwraith-a-1000: var(--color-neutrals-duskwraith-a-1000);
+  --color-neutrals-darkstar-core-a-100: var(
+    --color-neutrals-darkstar-core-a-100
+  );
+  --color-neutrals-darkstar-core-a-200: var(
+    --color-neutrals-darkstar-core-a-200
+  );
+  --color-neutrals-darkstar-core-a-300: var(
+    --color-neutrals-darkstar-core-a-300
+  );
+  --color-neutrals-darkstar-core-a-400: var(
+    --color-neutrals-darkstar-core-a-400
+  );
+  --color-neutrals-darkstar-core-a-500: var(
+    --color-neutrals-darkstar-core-a-500
+  );
+  --color-neutrals-darkstar-core-a-600: var(
+    --color-neutrals-darkstar-core-a-600
+  );
+  --color-neutrals-darkstar-core-a-700: var(
+    --color-neutrals-darkstar-core-a-700
+  );
+  --color-neutrals-darkstar-core-a-800: var(
+    --color-neutrals-darkstar-core-a-800
+  );
+  --color-neutrals-darkstar-core-a-900: var(
+    --color-neutrals-darkstar-core-a-900
+  );
+  --color-neutrals-darkstar-core-a-950: var(
+    --color-neutrals-darkstar-core-a-950
+  );
+  --color-neutrals-darkstar-core-a-1000: var(
+    --color-neutrals-darkstar-core-a-1000
+  );
+  --color-neutrals-kyber-crystal-a-50: var(--color-neutrals-kyber-crystal-a-50);
+  --color-neutrals-kyber-crystal-a-100: var(
+    --color-neutrals-kyber-crystal-a-100
+  );
+  --color-neutrals-kyber-crystal-a-200: var(
+    --color-neutrals-kyber-crystal-a-200
+  );
+  --color-neutrals-kyber-crystal-a-300: var(
+    --color-neutrals-kyber-crystal-a-300
+  );
+  --color-neutrals-kyber-crystal-a-400: var(
+    --color-neutrals-kyber-crystal-a-400
+  );
+  --color-neutrals-kyber-crystal-a-500: var(
+    --color-neutrals-kyber-crystal-a-500
+  );
+  --color-neutrals-kyber-crystal-a-600: var(
+    --color-neutrals-kyber-crystal-a-600
+  );
+  --color-neutrals-kyber-crystal-a-700: var(
+    --color-neutrals-kyber-crystal-a-700
+  );
+  --color-neutrals-kyber-crystal-a-800: var(
+    --color-neutrals-kyber-crystal-a-800
+  );
+  --color-neutrals-kyber-crystal-a-900: var(
+    --color-neutrals-kyber-crystal-a-900
+  );
+  --color-neutrals-kyber-crystal-a-950: var(
+    --color-neutrals-kyber-crystal-a-950
+  );
+  --color-neutrals-kyber-crystal-a-1000: var(
+    --color-neutrals-kyber-crystal-a-1000
+  );
+  --color-blue-hyperstream-a-50: var(--color-blue-hyperstream-a-50);
+  --color-blue-hyperstream-a-100: var(--color-blue-hyperstream-a-100);
+  --color-blue-hyperstream-a-200: var(--color-blue-hyperstream-a-200);
+  --color-blue-hyperstream-a-300: var(--color-blue-hyperstream-a-300);
+  --color-blue-hyperstream-a-400: var(--color-blue-hyperstream-a-400);
+  --color-blue-hyperstream-a-500: var(--color-blue-hyperstream-a-500);
+  --color-blue-hyperstream-a-600: var(--color-blue-hyperstream-a-600);
+  --color-blue-hyperstream-a-700: var(--color-blue-hyperstream-a-700);
+  --color-blue-hyperstream-a-800: var(--color-blue-hyperstream-a-800);
+  --color-blue-hyperstream-a-900: var(--color-blue-hyperstream-a-900);
+  --color-blue-hyperstream-a-950: var(--color-blue-hyperstream-a-950);
+  --color-blue-hyperstream-a-1000: var(--color-blue-hyperstream-a-1000);
+  --color-blue-hyperstream-50: var(--color-blue-hyperstream-50);
+  --color-blue-hyperstream-100: var(--color-blue-hyperstream-100);
+  --color-blue-hyperstream-200: var(--color-blue-hyperstream-200);
+  --color-blue-hyperstream-300: var(--color-blue-hyperstream-300);
+  --color-blue-hyperstream-400: var(--color-blue-hyperstream-400);
+  --color-blue-hyperstream-500: var(--color-blue-hyperstream-500);
+  --color-blue-hyperstream-600: var(--color-blue-hyperstream-600);
+  --color-blue-hyperstream-700: var(--color-blue-hyperstream-700);
+  --color-blue-hyperstream-800: var(--color-blue-hyperstream-800);
+  --color-blue-hyperstream-900: var(--color-blue-hyperstream-900);
+  --color-blue-hyperstream-950: var(--color-blue-hyperstream-950);
+  --color-blue-hyperstream-1000: var(--color-blue-hyperstream-1000);
+  --color-blue-astral-sabre-50: var(--color-blue-astral-sabre-50);
+  --color-blue-astral-sabre-100: var(--color-blue-astral-sabre-100);
+  --color-blue-astral-sabre-200: var(--color-blue-astral-sabre-200);
+  --color-blue-astral-sabre-300: var(--color-blue-astral-sabre-300);
+  --color-blue-astral-sabre-400: var(--color-blue-astral-sabre-400);
+  --color-blue-astral-sabre-500: var(--color-blue-astral-sabre-500);
+  --color-blue-astral-sabre-600: var(--color-blue-astral-sabre-600);
+  --color-blue-astral-sabre-700: var(--color-blue-astral-sabre-700);
+  --color-blue-astral-sabre-800: var(--color-blue-astral-sabre-800);
+  --color-blue-astral-sabre-900: var(--color-blue-astral-sabre-900);
+  --color-blue-astral-sabre-950: var(--color-blue-astral-sabre-950);
+  --color-blue-astral-sabre-1000: var(--color-blue-astral-sabre-1000);
+  --color-blue-skybolt-a-50: var(--color-blue-skybolt-a-50);
+  --color-blue-stellar-abyss-a-50: var(--color-blue-stellar-abyss-a-50);
+  --color-blue-stellar-abyss-a-100: var(--color-blue-stellar-abyss-a-100);
+  --color-blue-stellar-abyss-a-200: var(--color-blue-stellar-abyss-a-200);
+  --color-blue-stellar-abyss-a-300: var(--color-blue-stellar-abyss-a-300);
+  --color-blue-stellar-abyss-a-400: var(--color-blue-stellar-abyss-a-400);
+  --color-blue-stellar-abyss-a-500: var(--color-blue-stellar-abyss-a-500);
+  --color-blue-stellar-abyss-a-600: var(--color-blue-stellar-abyss-a-600);
+  --color-blue-stellar-abyss-a-700: var(--color-blue-stellar-abyss-a-700);
+  --color-blue-stellar-abyss-a-800: var(--color-blue-stellar-abyss-a-800);
+  --color-blue-stellar-abyss-a-900: var(--color-blue-stellar-abyss-a-900);
+  --color-blue-stellar-abyss-a-950: var(--color-blue-stellar-abyss-a-950);
+  --color-blue-stellar-abyss-a-1000: var(--color-blue-stellar-abyss-a-1000);
+  --color-blue-skybolt-a-100: var(--color-blue-skybolt-a-100);
+  --color-blue-skybolt-a-200: var(--color-blue-skybolt-a-200);
+  --color-blue-skybolt-a-300: var(--color-blue-skybolt-a-300);
+  --color-blue-skybolt-a-400: var(--color-blue-skybolt-a-400);
+  --color-blue-skybolt-a-500: var(--color-blue-skybolt-a-500);
+  --color-blue-skybolt-a-600: var(--color-blue-skybolt-a-600);
+  --color-blue-skybolt-a-700: var(--color-blue-skybolt-a-700);
+  --color-blue-skybolt-a-800: var(--color-blue-skybolt-a-800);
+  --color-blue-skybolt-a-900: var(--color-blue-skybolt-a-900);
+  --color-blue-skybolt-a-950: var(--color-blue-skybolt-a-950);
+  --color-blue-skybolt-a-1000: var(--color-blue-skybolt-a-1000);
+  --color-green-emerald-saber-a-50: var(--color-green-emerald-saber-a-50);
+  --color-green-emerald-saber-a-100: var(--color-green-emerald-saber-a-100);
+  --color-green-emerald-saber-a-200: var(--color-green-emerald-saber-a-200);
+  --color-green-emerald-saber-a-300: var(--color-green-emerald-saber-a-300);
+  --color-green-emerald-saber-a-400: var(--color-green-emerald-saber-a-400);
+  --color-green-emerald-saber-a-500: var(--color-green-emerald-saber-a-500);
+  --color-green-emerald-saber-a-600: var(--color-green-emerald-saber-a-600);
+  --color-green-emerald-saber-a-700: var(--color-green-emerald-saber-a-700);
+  --color-green-emerald-saber-a-800: var(--color-green-emerald-saber-a-800);
+  --color-green-emerald-saber-a-900: var(--color-green-emerald-saber-a-900);
+  --color-green-emerald-saber-a-950: var(--color-green-emerald-saber-a-950);
+  --color-green-emerald-saber-a-1000: var(--color-green-emerald-saber-a-1000);
+  --color-green-ion-sprout-50: var(--color-green-ion-sprout-50);
+  --color-green-ion-sprout-100: var(--color-green-ion-sprout-100);
+  --color-green-ion-sprout-200: var(--color-green-ion-sprout-200);
+  --color-green-ion-sprout-300: var(--color-green-ion-sprout-300);
+  --color-green-ion-sprout-400: var(--color-green-ion-sprout-400);
+  --color-green-ion-sprout-500: var(--color-green-ion-sprout-500);
+  --color-green-ion-sprout-600: var(--color-green-ion-sprout-600);
+  --color-green-ion-sprout-700: var(--color-green-ion-sprout-700);
+  --color-green-ion-sprout-800: var(--color-green-ion-sprout-800);
+  --color-green-ion-sprout-900: var(--color-green-ion-sprout-900);
+  --color-green-ion-sprout-950: var(--color-green-ion-sprout-950);
+  --color-green-ion-sprout-1000: var(--color-green-ion-sprout-1000);
+  --color-green-ion-sprout-a-50: var(--color-green-ion-sprout-a-50);
+  --color-green-ion-sprout-a-100: var(--color-green-ion-sprout-a-100);
+  --color-green-ion-sprout-a-200: var(--color-green-ion-sprout-a-200);
+  --color-green-ion-sprout-a-300: var(--color-green-ion-sprout-a-300);
+  --color-green-ion-sprout-a-400: var(--color-green-ion-sprout-a-400);
+  --color-green-ion-sprout-a-500: var(--color-green-ion-sprout-a-500);
+  --color-green-ion-sprout-a-600: var(--color-green-ion-sprout-a-600);
+  --color-green-ion-sprout-a-700: var(--color-green-ion-sprout-a-700);
+  --color-green-ion-sprout-a-800: var(--color-green-ion-sprout-a-800);
+  --color-green-ion-sprout-a-900: var(--color-green-ion-sprout-a-900);
+  --color-green-ion-sprout-a-950: var(--color-green-ion-sprout-a-950);
+  --color-green-ion-sprout-a-1000: var(--color-green-ion-sprout-a-1000);
+  --color-green-verdant-flux-50: var(--color-green-verdant-flux-50);
+  --color-green-verdant-flux-100: var(--color-green-verdant-flux-100);
+  --color-green-verdant-flux-200: var(--color-green-verdant-flux-200);
+  --color-green-verdant-flux-300: var(--color-green-verdant-flux-300);
+  --color-green-verdant-flux-400: var(--color-green-verdant-flux-400);
+  --color-green-verdant-flux-500: var(--color-green-verdant-flux-500);
+  --color-green-verdant-flux-600: var(--color-green-verdant-flux-600);
+  --color-green-verdant-flux-700: var(--color-green-verdant-flux-700);
+  --color-green-verdant-flux-800: var(--color-green-verdant-flux-800);
+  --color-green-verdant-flux-900: var(--color-green-verdant-flux-900);
+  --color-green-verdant-flux-950: var(--color-green-verdant-flux-950);
+  --color-green-verdant-flux-1000: var(--color-green-verdant-flux-1000);
+  --color-green-verdant-flux-a-50: var(--color-green-verdant-flux-a-50);
+  --color-green-verdant-flux-a-100: var(--color-green-verdant-flux-a-100);
+  --color-green-verdant-flux-a-200: var(--color-green-verdant-flux-a-200);
+  --color-green-verdant-flux-a-300: var(--color-green-verdant-flux-a-300);
+  --color-green-verdant-flux-a-400: var(--color-green-verdant-flux-a-400);
+  --color-green-verdant-flux-a-500: var(--color-green-verdant-flux-a-500);
+  --color-green-verdant-flux-a-600: var(--color-green-verdant-flux-a-600);
+  --color-green-verdant-flux-a-700: var(--color-green-verdant-flux-a-700);
+  --color-green-verdant-flux-a-800: var(--color-green-verdant-flux-a-800);
+  --color-green-verdant-flux-a-900: var(--color-green-verdant-flux-a-900);
+  --color-green-verdant-flux-a-950: var(--color-green-verdant-flux-a-950);
+  --color-green-verdant-flux-a-1000: var(--color-green-verdant-flux-a-1000);
+  --color-red-infernal-blade-a-50: var(--color-red-infernal-blade-a-50);
+  --color-red-infernal-blade-a-100: var(--color-red-infernal-blade-a-100);
+  --color-red-infernal-blade-a-200: var(--color-red-infernal-blade-a-200);
+  --color-red-infernal-blade-a-300: var(--color-red-infernal-blade-a-300);
+  --color-red-infernal-blade-a-400: var(--color-red-infernal-blade-a-400);
+  --color-red-infernal-blade-a-500: var(--color-red-infernal-blade-a-500);
+  --color-red-infernal-blade-a-600: var(--color-red-infernal-blade-a-600);
+  --color-red-infernal-blade-a-700: var(--color-red-infernal-blade-a-700);
+  --color-red-infernal-blade-a-800: var(--color-red-infernal-blade-a-800);
+  --color-red-infernal-blade-a-900: var(--color-red-infernal-blade-a-900);
+  --color-red-infernal-blade-a-950: var(--color-red-infernal-blade-a-950);
+  --color-red-infernal-blade-a-1000: var(--color-red-infernal-blade-a-1000);
+  --color-red-malachor-50: var(--color-red-malachor-50);
+  --color-red-malachor-100: var(--color-red-malachor-100);
+  --color-red-malachor-200: var(--color-red-malachor-200);
+  --color-red-malachor-300: var(--color-red-malachor-300);
+  --color-red-malachor-400: var(--color-red-malachor-400);
+  --color-red-malachor-500: var(--color-red-malachor-500);
+  --color-red-malachor-600: var(--color-red-malachor-600);
+  --color-red-malachor-700: var(--color-red-malachor-700);
+  --color-red-malachor-800: var(--color-red-malachor-800);
+  --color-red-malachor-900: var(--color-red-malachor-900);
+  --color-red-malachor-950: var(--color-red-malachor-950);
+  --color-red-malachor-1000: var(--color-red-malachor-1000);
+  --color-red-malachor-a-50: var(--color-red-malachor-a-50);
+  --color-red-malachor-a-100: var(--color-red-malachor-a-100);
+  --color-red-malachor-a-200: var(--color-red-malachor-a-200);
+  --color-red-malachor-a-300: var(--color-red-malachor-a-300);
+  --color-red-malachor-a-400: var(--color-red-malachor-a-400);
+  --color-red-malachor-a-500: var(--color-red-malachor-a-500);
+  --color-red-malachor-a-600: var(--color-red-malachor-a-600);
+  --color-red-malachor-a-700: var(--color-red-malachor-a-700);
+  --color-red-malachor-a-800: var(--color-red-malachor-a-800);
+  --color-red-malachor-a-900: var(--color-red-malachor-a-900);
+  --color-red-malachor-a-950: var(--color-red-malachor-a-950);
+  --color-red-malachor-a-1000: var(--color-red-malachor-a-1000);
+  --color-red-crimson-wrath-50: var(--color-red-crimson-wrath-50);
+  --color-red-crimson-wrath-100: var(--color-red-crimson-wrath-100);
+  --color-red-crimson-wrath-200: var(--color-red-crimson-wrath-200);
+  --color-red-crimson-wrath-300: var(--color-red-crimson-wrath-300);
+  --color-red-crimson-wrath-400: var(--color-red-crimson-wrath-400);
+  --color-red-crimson-wrath-500: var(--color-red-crimson-wrath-500);
+  --color-red-crimson-wrath-600: var(--color-red-crimson-wrath-600);
+  --color-red-crimson-wrath-700: var(--color-red-crimson-wrath-700);
+  --color-red-crimson-wrath-800: var(--color-red-crimson-wrath-800);
+  --color-red-crimson-wrath-900: var(--color-red-crimson-wrath-900);
+  --color-red-crimson-wrath-950: var(--color-red-crimson-wrath-950);
+  --color-red-crimson-wrath-1000: var(--color-red-crimson-wrath-1000);
+  --color-red-crimson-wrath-a-50: var(--color-red-crimson-wrath-a-50);
+  --color-red-crimson-wrath-a-100: var(--color-red-crimson-wrath-a-100);
+  --color-red-crimson-wrath-a-200: var(--color-red-crimson-wrath-a-200);
+  --color-red-crimson-wrath-a-300: var(--color-red-crimson-wrath-a-300);
+  --color-red-crimson-wrath-a-400: var(--color-red-crimson-wrath-a-400);
+  --color-red-crimson-wrath-a-500: var(--color-red-crimson-wrath-a-500);
+  --color-red-crimson-wrath-a-600: var(--color-red-crimson-wrath-a-600);
+  --color-red-crimson-wrath-a-700: var(--color-red-crimson-wrath-a-700);
+  --color-red-crimson-wrath-a-800: var(--color-red-crimson-wrath-a-800);
+  --color-red-crimson-wrath-a-900: var(--color-red-crimson-wrath-a-900);
+  --color-red-crimson-wrath-a-950: var(--color-red-crimson-wrath-a-950);
+  --color-red-crimson-wrath-a-1000: var(--color-red-crimson-wrath-a-1000);
+  --color-yellow-twin-sunlight-a-50: var(--color-yellow-twin-sunlight-a-50);
+  --color-yellow-twin-sunlight-a-100: var(--color-yellow-twin-sunlight-a-100);
+  --color-yellow-twin-sunlight-a-200: var(--color-yellow-twin-sunlight-a-200);
+  --color-yellow-twin-sunlight-a-300: var(--color-yellow-twin-sunlight-a-300);
+  --color-yellow-twin-sunlight-a-400: var(--color-yellow-twin-sunlight-a-400);
+  --color-yellow-twin-sunlight-a-500: var(--color-yellow-twin-sunlight-a-500);
+  --color-yellow-twin-sunlight-a-600: var(--color-yellow-twin-sunlight-a-600);
+  --color-yellow-twin-sunlight-a-700: var(--color-yellow-twin-sunlight-a-700);
+  --color-yellow-twin-sunlight-a-800: var(--color-yellow-twin-sunlight-a-800);
+  --color-yellow-twin-sunlight-a-900: var(--color-yellow-twin-sunlight-a-900);
+  --color-yellow-twin-sunlight-a-950: var(--color-yellow-twin-sunlight-a-950);
+  --color-yellow-twin-sunlight-a-1000: var(--color-yellow-twin-sunlight-a-1000);
+  --color-yellow-twin-sunlight-50: var(--color-yellow-twin-sunlight-50);
+  --color-yellow-twin-sunlight-100: var(--color-yellow-twin-sunlight-100);
+  --color-yellow-twin-sunlight-200: var(--color-yellow-twin-sunlight-200);
+  --color-yellow-twin-sunlight-300: var(--color-yellow-twin-sunlight-300);
+  --color-yellow-twin-sunlight-400: var(--color-yellow-twin-sunlight-400);
+  --color-yellow-twin-sunlight-500: var(--color-yellow-twin-sunlight-500);
+  --color-yellow-twin-sunlight-600: var(--color-yellow-twin-sunlight-600);
+  --color-yellow-twin-sunlight-700: var(--color-yellow-twin-sunlight-700);
+  --color-yellow-twin-sunlight-800: var(--color-yellow-twin-sunlight-800);
+  --color-yellow-twin-sunlight-900: var(--color-yellow-twin-sunlight-900);
+  --color-yellow-twin-sunlight-950: var(--color-yellow-twin-sunlight-950);
+  --color-yellow-twin-sunlight-1000: var(--color-yellow-twin-sunlight-1000);
+  --color-yellow-stellar-amber-50: var(--color-yellow-stellar-amber-50);
+  --color-yellow-stellar-amber-100: var(--color-yellow-stellar-amber-100);
+  --color-yellow-stellar-amber-200: var(--color-yellow-stellar-amber-200);
+  --color-yellow-stellar-amber-300: var(--color-yellow-stellar-amber-300);
+  --color-yellow-stellar-amber-400: var(--color-yellow-stellar-amber-400);
+  --color-yellow-stellar-amber-500: var(--color-yellow-stellar-amber-500);
+  --color-yellow-stellar-amber-600: var(--color-yellow-stellar-amber-600);
+  --color-yellow-stellar-amber-700: var(--color-yellow-stellar-amber-700);
+  --color-yellow-stellar-amber-800: var(--color-yellow-stellar-amber-800);
+  --color-yellow-stellar-amber-900: var(--color-yellow-stellar-amber-900);
+  --color-yellow-stellar-amber-950: var(--color-yellow-stellar-amber-950);
+  --color-yellow-stellar-amber-1000: var(--color-yellow-stellar-amber-1000);
+  --color-yellow-stellar-amber-a-50: var(--color-yellow-stellar-amber-a-50);
+  --color-yellow-stellar-amber-a-100: var(--color-yellow-stellar-amber-a-100);
+  --color-yellow-stellar-amber-a-200: var(--color-yellow-stellar-amber-a-200);
+  --color-yellow-stellar-amber-a-300: var(--color-yellow-stellar-amber-a-300);
+  --color-yellow-stellar-amber-a-400: var(--color-yellow-stellar-amber-a-400);
+  --color-yellow-stellar-amber-a-500: var(--color-yellow-stellar-amber-a-500);
+  --color-yellow-stellar-amber-a-600: var(--color-yellow-stellar-amber-a-600);
+  --color-yellow-stellar-amber-a-700: var(--color-yellow-stellar-amber-a-700);
+  --color-yellow-stellar-amber-a-800: var(--color-yellow-stellar-amber-a-800);
+  --color-yellow-stellar-amber-a-900: var(--color-yellow-stellar-amber-a-900);
+  --color-yellow-stellar-amber-a-950: var(--color-yellow-stellar-amber-a-950);
+  --color-yellow-stellar-amber-a-1000: var(--color-yellow-stellar-amber-a-1000);
+  --color-orange-sunstreak-a-50: var(--color-orange-sunstreak-a-50);
+  --color-orange-sunstreak-a-100: var(--color-orange-sunstreak-a-100);
+  --color-orange-sunstreak-a-200: var(--color-orange-sunstreak-a-200);
+  --color-orange-sunstreak-a-300: var(--color-orange-sunstreak-a-300);
+  --color-orange-sunstreak-a-400: var(--color-orange-sunstreak-a-400);
+  --color-orange-sunstreak-a-500: var(--color-orange-sunstreak-a-500);
+  --color-orange-sunstreak-a-600: var(--color-orange-sunstreak-a-600);
+  --color-orange-sunstreak-a-700: var(--color-orange-sunstreak-a-700);
+  --color-orange-sunstreak-a-800: var(--color-orange-sunstreak-a-800);
+  --color-orange-sunstreak-a-900: var(--color-orange-sunstreak-a-900);
+  --color-orange-sunstreak-a-950: var(--color-orange-sunstreak-a-950);
+  --color-orange-sunstreak-a-1000: var(--color-orange-sunstreak-a-1000);
+  --color-orange-sunstreak-50: var(--color-orange-sunstreak-50);
+  --color-orange-sunstreak-100: var(--color-orange-sunstreak-100);
+  --color-orange-sunstreak-200: var(--color-orange-sunstreak-200);
+  --color-orange-sunstreak-300: var(--color-orange-sunstreak-300);
+  --color-orange-sunstreak-400: var(--color-orange-sunstreak-400);
+  --color-orange-sunstreak-500: var(--color-orange-sunstreak-500);
+  --color-orange-sunstreak-600: var(--color-orange-sunstreak-600);
+  --color-orange-sunstreak-700: var(--color-orange-sunstreak-700);
+  --color-orange-sunstreak-800: var(--color-orange-sunstreak-800);
+  --color-orange-sunstreak-900: var(--color-orange-sunstreak-900);
+  --color-orange-sunstreak-950: var(--color-orange-sunstreak-950);
+  --color-orange-sunstreak-1000: var(--color-orange-sunstreak-1000);
+  --color-purple-voidshade-a-50: var(--color-purple-voidshade-a-50);
+  --color-purple-voidshade-a-100: var(--color-purple-voidshade-a-100);
+  --color-purple-voidshade-a-200: var(--color-purple-voidshade-a-200);
+  --color-purple-voidshade-a-300: var(--color-purple-voidshade-a-300);
+  --color-purple-voidshade-a-400: var(--color-purple-voidshade-a-400);
+  --color-purple-voidshade-a-500: var(--color-purple-voidshade-a-500);
+  --color-purple-voidshade-a-600: var(--color-purple-voidshade-a-600);
+  --color-purple-voidshade-a-700: var(--color-purple-voidshade-a-700);
+  --color-purple-voidshade-a-800: var(--color-purple-voidshade-a-800);
+  --color-purple-voidshade-a-900: var(--color-purple-voidshade-a-900);
+  --color-purple-voidshade-a-950: var(--color-purple-voidshade-a-950);
+  --color-purple-voidshade-a-1000: var(--color-purple-voidshade-a-1000);
+  --color-purple-nexus-50: var(--color-purple-nexus-50);
+  --color-purple-nexus-100: var(--color-purple-nexus-100);
+  --color-purple-nexus-200: var(--color-purple-nexus-200);
+  --color-purple-nexus-300: var(--color-purple-nexus-300);
+  --color-purple-nexus-400: var(--color-purple-nexus-400);
+  --color-purple-nexus-500: var(--color-purple-nexus-500);
+  --color-purple-nexus-600: var(--color-purple-nexus-600);
+  --color-purple-nexus-700: var(--color-purple-nexus-700);
+  --color-purple-nexus-800: var(--color-purple-nexus-800);
+  --color-purple-nexus-900: var(--color-purple-nexus-900);
+  --color-purple-nexus-950: var(--color-purple-nexus-950);
+  --color-purple-nexus-1000: var(--color-purple-nexus-1000);
+  --color-purple-nexus-a-50: var(--color-purple-nexus-a-50);
+  --color-purple-nexus-a-100: var(--color-purple-nexus-a-100);
+  --color-purple-nexus-a-200: var(--color-purple-nexus-a-200);
+  --color-purple-nexus-a-300: var(--color-purple-nexus-a-300);
+  --color-purple-nexus-a-400: var(--color-purple-nexus-a-400);
+  --color-purple-nexus-a-500: var(--color-purple-nexus-a-500);
+  --color-purple-nexus-a-600: var(--color-purple-nexus-a-600);
+  --color-purple-nexus-a-700: var(--color-purple-nexus-a-700);
+  --color-purple-nexus-a-800: var(--color-purple-nexus-a-800);
+  --color-purple-nexus-a-900: var(--color-purple-nexus-a-900);
+  --color-purple-nexus-a-950: var(--color-purple-nexus-a-950);
+  --color-purple-nexus-a-1000: var(--color-purple-nexus-a-1000);
+  --color-pink-plasma-circuit-50: var(--color-pink-plasma-circuit-50);
+  --color-pink-plasma-circuit-100: var(--color-pink-plasma-circuit-100);
+  --color-pink-plasma-circuit-200: var(--color-pink-plasma-circuit-200);
+  --color-pink-plasma-circuit-300: var(--color-pink-plasma-circuit-300);
+  --color-pink-plasma-circuit-400: var(--color-pink-plasma-circuit-400);
+  --color-pink-plasma-circuit-500: var(--color-pink-plasma-circuit-500);
+  --color-pink-plasma-circuit-600: var(--color-pink-plasma-circuit-600);
+  --color-pink-plasma-circuit-700: var(--color-pink-plasma-circuit-700);
+  --color-pink-plasma-circuit-800: var(--color-pink-plasma-circuit-800);
+  --color-pink-plasma-circuit-900: var(--color-pink-plasma-circuit-900);
+  --color-pink-plasma-circuit-950: var(--color-pink-plasma-circuit-950);
+  --color-pink-plasma-circuit-1000: var(--color-pink-plasma-circuit-1000);
+  --color-pink-plasma-circuit-a-50: var(--color-pink-plasma-circuit-a-50);
+  --color-pink-plasma-circuit-a-100: var(--color-pink-plasma-circuit-a-100);
+  --color-pink-plasma-circuit-a-200: var(--color-pink-plasma-circuit-a-200);
+  --color-pink-plasma-circuit-a-300: var(--color-pink-plasma-circuit-a-300);
+  --color-pink-plasma-circuit-a-400: var(--color-pink-plasma-circuit-a-400);
+  --color-pink-plasma-circuit-a-500: var(--color-pink-plasma-circuit-a-500);
+  --color-pink-plasma-circuit-a-600: var(--color-pink-plasma-circuit-a-600);
+  --color-pink-plasma-circuit-a-700: var(--color-pink-plasma-circuit-a-700);
+  --color-pink-plasma-circuit-a-800: var(--color-pink-plasma-circuit-a-800);
+  --color-pink-plasma-circuit-a-900: var(--color-pink-plasma-circuit-a-900);
+  --color-pink-plasma-circuit-a-950: var(--color-pink-plasma-circuit-a-950);
+  --color-pink-plasma-circuit-a-1000: var(--color-pink-plasma-circuit-a-1000);
+  --color-teal-sunspark-oasis-50: var(--color-teal-sunspark-oasis-50);
+  --color-teal-sunspark-oasis-100: var(--color-teal-sunspark-oasis-100);
+  --color-teal-sunspark-oasis-200: var(--color-teal-sunspark-oasis-200);
+  --color-teal-sunspark-oasis-300: var(--color-teal-sunspark-oasis-300);
+  --color-teal-sunspark-oasis-400: var(--color-teal-sunspark-oasis-400);
+  --color-teal-sunspark-oasis-500: var(--color-teal-sunspark-oasis-500);
+  --color-teal-sunspark-oasis-600: var(--color-teal-sunspark-oasis-600);
+  --color-teal-sunspark-oasis-700: var(--color-teal-sunspark-oasis-700);
+  --color-teal-sunspark-oasis-800: var(--color-teal-sunspark-oasis-800);
+  --color-teal-sunspark-oasis-900: var(--color-teal-sunspark-oasis-900);
+  --color-teal-sunspark-oasis-950: var(--color-teal-sunspark-oasis-950);
+  --color-teal-sunspark-oasis-1000: var(--color-teal-sunspark-oasis-1000);
+  --color-teal-sunspark-oasis-a-50: var(--color-teal-sunspark-oasis-a-50);
+  --color-teal-sunspark-oasis-a-100: var(--color-teal-sunspark-oasis-a-100);
+  --color-teal-sunspark-oasis-a-200: var(--color-teal-sunspark-oasis-a-200);
+  --color-teal-sunspark-oasis-a-300: var(--color-teal-sunspark-oasis-a-300);
+  --color-teal-sunspark-oasis-a-400: var(--color-teal-sunspark-oasis-a-400);
+  --color-teal-sunspark-oasis-a-500: var(--color-teal-sunspark-oasis-a-500);
+  --color-teal-sunspark-oasis-a-600: var(--color-teal-sunspark-oasis-a-600);
+  --color-teal-sunspark-oasis-a-700: var(--color-teal-sunspark-oasis-a-700);
+  --color-teal-sunspark-oasis-a-800: var(--color-teal-sunspark-oasis-a-800);
+  --color-teal-sunspark-oasis-a-900: var(--color-teal-sunspark-oasis-a-900);
+  --color-teal-sunspark-oasis-a-950: var(--color-teal-sunspark-oasis-a-950);
+  --color-teal-sunspark-oasis-a-1000: var(--color-teal-sunspark-oasis-a-1000);
+  --color-purple-fuchsia-50: var(--color-purple-fuchsia-50);
+  --color-purple-fuchsia-100: var(--color-purple-fuchsia-100);
+  --color-purple-fuchsia-200: var(--color-purple-fuchsia-200);
+  --color-purple-fuchsia-300: var(--color-purple-fuchsia-300);
+  --color-purple-fuchsia-400: var(--color-purple-fuchsia-400);
+  --color-purple-fuchsia-500: var(--color-purple-fuchsia-500);
+  --color-purple-fuchsia-600: var(--color-purple-fuchsia-600);
+  --color-purple-fuchsia-700: var(--color-purple-fuchsia-700);
+  --color-purple-fuchsia-800: var(--color-purple-fuchsia-800);
+  --color-purple-fuchsia-900: var(--color-purple-fuchsia-900);
+  --color-purple-fuchsia-950: var(--color-purple-fuchsia-950);
+  --color-purple-fuchsia-1000: var(--color-purple-fuchsia-1000);
+  --color-purple-fuchsia-a-50: var(--color-purple-fuchsia-a-50);
+  --color-purple-fuchsia-a-100: var(--color-purple-fuchsia-a-100);
+  --color-purple-fuchsia-a-200: var(--color-purple-fuchsia-a-200);
+  --color-purple-fuchsia-a-300: var(--color-purple-fuchsia-a-300);
+  --color-purple-fuchsia-a-400: var(--color-purple-fuchsia-a-400);
+  --color-purple-fuchsia-a-500: var(--color-purple-fuchsia-a-500);
+  --color-purple-fuchsia-a-600: var(--color-purple-fuchsia-a-600);
+  --color-purple-fuchsia-a-700: var(--color-purple-fuchsia-a-700);
+  --color-purple-fuchsia-a-800: var(--color-purple-fuchsia-a-800);
+  --color-purple-fuchsia-a-900: var(--color-purple-fuchsia-a-900);
+  --color-purple-fuchsia-a-950: var(--color-purple-fuchsia-a-950);
+  --color-purple-fuchsia-a-1000: var(--color-purple-fuchsia-a-1000);
+  --color-orange-molten-fang-a-50: var(--color-orange-molten-fang-a-50);
+  --color-orange-molten-fang-a-100: var(--color-orange-molten-fang-a-100);
+  --color-orange-molten-fang-a-200: var(--color-orange-molten-fang-a-200);
+  --color-orange-molten-fang-a-300: var(--color-orange-molten-fang-a-300);
+  --color-orange-molten-fang-a-400: var(--color-orange-molten-fang-a-400);
+  --color-orange-molten-fang-a-500: var(--color-orange-molten-fang-a-500);
+  --color-orange-molten-fang-a-600: var(--color-orange-molten-fang-a-600);
+  --color-orange-molten-fang-a-700: var(--color-orange-molten-fang-a-700);
+  --color-orange-molten-fang-a-800: var(--color-orange-molten-fang-a-800);
+  --color-orange-molten-fang-a-900: var(--color-orange-molten-fang-a-900);
+  --color-orange-molten-fang-a-950: var(--color-orange-molten-fang-a-950);
+  --color-orange-molten-fang-a-1000: var(--color-orange-molten-fang-a-1000);
+  --color-neutrals-celestial-veil-a-50: var(
+    --color-neutrals-celestial-veil-a-50
+  );
+  --color-neutrals-celestial-veil-a-100: var(
+    --color-neutrals-celestial-veil-a-100
+  );
+  --color-neutrals-celestial-veil-a-200: var(
+    --color-neutrals-celestial-veil-a-200
+  );
+  --color-neutrals-celestial-veil-a-300: var(
+    --color-neutrals-celestial-veil-a-300
+  );
+  --color-neutrals-celestial-veil-a-400: var(
+    --color-neutrals-celestial-veil-a-400
+  );
+  --color-neutrals-celestial-veil-a-500: var(
+    --color-neutrals-celestial-veil-a-500
+  );
+  --color-neutrals-celestial-veil-a-600: var(
+    --color-neutrals-celestial-veil-a-600
+  );
+  --color-neutrals-celestial-veil-a-700: var(
+    --color-neutrals-celestial-veil-a-700
+  );
+  --color-neutrals-celestial-veil-a-800: var(
+    --color-neutrals-celestial-veil-a-800
+  );
+  --color-neutrals-celestial-veil-a-900: var(
+    --color-neutrals-celestial-veil-a-900
+  );
+  --color-neutrals-celestial-veil-a-950: var(
+    --color-neutrals-celestial-veil-a-950
+  );
+  --color-neutrals-celestial-veil-a-1000: var(
+    --color-neutrals-celestial-veil-a-1000
+  );
+  --color-neutrals-echo-light-a-50: var(--color-neutrals-echo-light-a-50);
+  --color-neutrals-echo-light-a-100: var(--color-neutrals-echo-light-a-100);
+  --color-neutrals-echo-light-a-200: var(--color-neutrals-echo-light-a-200);
+  --color-neutrals-echo-light-a-300: var(--color-neutrals-echo-light-a-300);
+  --color-neutrals-echo-light-a-400: var(--color-neutrals-echo-light-a-400);
+  --color-neutrals-echo-light-a-500: var(--color-neutrals-echo-light-a-500);
+  --color-neutrals-echo-light-a-600: var(--color-neutrals-echo-light-a-600);
+  --color-neutrals-echo-light-a-700: var(--color-neutrals-echo-light-a-700);
+  --color-neutrals-echo-light-a-800: var(--color-neutrals-echo-light-a-800);
+  --color-neutrals-echo-light-a-900: var(--color-neutrals-echo-light-a-900);
+  --color-neutrals-echo-light-a-950: var(--color-neutrals-echo-light-a-950);
+  --color-neutrals-echo-light-a-1000: var(--color-neutrals-echo-light-a-1000);
+  --color-teal-sunspark-oasis-50-2: var(--color-teal-sunspark-oasis-50-2);
+  --color-teal-sunspark-oasis-100-2: var(--color-teal-sunspark-oasis-100-2);
+  --color-teal-sunspark-oasis-200-2: var(--color-teal-sunspark-oasis-200-2);
+  --color-teal-sunspark-oasis-300-2: var(--color-teal-sunspark-oasis-300-2);
+  --color-teal-sunspark-oasis-400-2: var(--color-teal-sunspark-oasis-400-2);
+  --color-teal-sunspark-oasis-500-2: var(--color-teal-sunspark-oasis-500-2);
+  --color-teal-sunspark-oasis-600-2: var(--color-teal-sunspark-oasis-600-2);
+  --color-teal-sunspark-oasis-700-2: var(--color-teal-sunspark-oasis-700-2);
+  --color-teal-sunspark-oasis-800-2: var(--color-teal-sunspark-oasis-800-2);
+  --color-teal-sunspark-oasis-900-2: var(--color-teal-sunspark-oasis-900-2);
+  --color-teal-sunspark-oasis-50-3: var(--color-teal-sunspark-oasis-50-3);
+  --color-teal-sunspark-oasis-100-3: var(--color-teal-sunspark-oasis-100-3);
+  --color-teal-sunspark-oasis-200-3: var(--color-teal-sunspark-oasis-200-3);
+  --color-teal-sunspark-oasis-300-3: var(--color-teal-sunspark-oasis-300-3);
+  --color-teal-sunspark-oasis-400-3: var(--color-teal-sunspark-oasis-400-3);
+  --color-teal-sunspark-oasis-500-3: var(--color-teal-sunspark-oasis-500-3);
+  --color-teal-sunspark-oasis-600-3: var(--color-teal-sunspark-oasis-600-3);
+  --color-teal-sunspark-oasis-700-3: var(--color-teal-sunspark-oasis-700-3);
+  --color-teal-sunspark-oasis-800-3: var(--color-teal-sunspark-oasis-800-3);
+  --color-teal-sunspark-oasis-900-3: var(--color-teal-sunspark-oasis-900-3);
+  --color-pink-mew-mode-50: var(--color-pink-mew-mode-50);
+  --color-pink-mew-mode-100: var(--color-pink-mew-mode-100);
+  --color-pink-mew-mode-200: var(--color-pink-mew-mode-200);
+  --color-pink-mew-mode-300: var(--color-pink-mew-mode-300);
+  --color-pink-mew-mode-400: var(--color-pink-mew-mode-400);
+  --color-pink-mew-mode-500: var(--color-pink-mew-mode-500);
+  --color-pink-mew-mode-600: var(--color-pink-mew-mode-600);
+  --color-pink-mew-mode-700: var(--color-pink-mew-mode-700);
+  --color-pink-mew-mode-800: var(--color-pink-mew-mode-800);
+  --color-pink-mew-mode-900: var(--color-pink-mew-mode-900);
+  --color-pink-mew-mode-950: var(--color-pink-mew-mode-950);
+  --color-pink-mew-mode-1000: var(--color-pink-mew-mode-1000);
+
+  /* Color tokens Level 3 */
+  --color-background-basic-clear: var(--background-basic-clear);
+  --color-background-basic-black: var(--background-basic-black);
+  --color-background-basic-white: var(--background-basic-white);
+  --color-background-neutral-canvas-base: var(--background-neutral-canvas-base);
+  --color-background-neutral-raised-base: var(--background-neutral-raised-base);
+  --color-background-neutral-inverse-raised-base: var(
+    --background-neutral-inverse-raised-base
+  );
+  --color-background-neutral-inverse-raised-1: var(
+    --background-neutral-inverse-raised-1
+  );
+  --color-background-neutral-inverse-raised-2: var(
+    --background-neutral-inverse-raised-2
+  );
+  --color-background-neutral-inverse-raised-3: var(
+    --background-neutral-inverse-raised-3
+  );
+  --color-background-neutral-inverse-raised-4: var(
+    --background-neutral-inverse-raised-4
+  );
+  --color-background-neutral-inverse-raised-5: var(
+    --background-neutral-inverse-raised-5
+  );
+  --color-background-neutral-inverse-raised-6: var(
+    --background-neutral-inverse-raised-6
+  );
+  --color-background-neutral-raised-1: var(--background-neutral-raised-1);
+  --color-background-neutral-raised-2: var(--background-neutral-raised-2);
+  --color-background-neutral-raised-3: var(--background-neutral-raised-3);
+  --color-background-neutral-raised-4: var(--background-neutral-raised-4);
+  --color-background-neutral-raised-5: var(--background-neutral-raised-5);
+  --color-background-neutral-raised-6: var(--background-neutral-raised-6);
+  --color-background-brand-base: var(--background-brand-base);
+  --color-background-brand-1: var(--background-brand-1);
+  --color-background-brand-2: var(--background-brand-2);
+  --color-background-brand-3: var(--background-brand-3);
+  --color-background-brand-4: var(--background-brand-4);
+  --color-background-brand-5: var(--background-brand-5);
+  --color-background-semantic-success-base: var(
+    --background-semantic-success-base
+  );
+  --color-background-semantic-warning-base: var(
+    --background-semantic-warning-base
+  );
+  --color-background-semantic-warning-1: var(--background-semantic-warning-1);
+  --color-background-semantic-warning-2: var(--background-semantic-warning-2);
+  --color-background-semantic-warning-3: var(--background-semantic-warning-3);
+  --color-background-semantic-warning-4: var(--background-semantic-warning-4);
+  --color-background-semantic-warning-5: var(--background-semantic-warning-5);
+  --color-background-semantic-success-1: var(--background-semantic-success-1);
+  --color-background-semantic-success-2: var(--background-semantic-success-2);
+  --color-background-semantic-success-3: var(--background-semantic-success-3);
+  --color-background-semantic-success-4: var(--background-semantic-success-4);
+  --color-background-semantic-success-5: var(--background-semantic-success-5);
+  --color-background-semantic-info-base: var(--background-semantic-info-base);
+  --color-background-semantic-info-1: var(--background-semantic-info-1);
+  --color-background-semantic-info-2: var(--background-semantic-info-2);
+  --color-background-semantic-info-3: var(--background-semantic-info-3);
+  --color-background-semantic-info-4: var(--background-semantic-info-4);
+  --color-background-semantic-info-5: var(--background-semantic-info-5);
+  --color-background-semantic-error-base: var(--background-semantic-error-base);
+  --color-background-semantic-error-1: var(--background-semantic-error-1);
+  --color-background-semantic-error-2: var(--background-semantic-error-2);
+  --color-background-semantic-error-3: var(--background-semantic-error-3);
+  --color-background-semantic-error-4: var(--background-semantic-error-4);
+  --color-background-semantic-error-5: var(--background-semantic-error-5);
+  --color-background-accent-1-base: var(--background-accent-1-base);
+  --color-background-accent-1-1: var(--background-accent-1-1);
+  --color-background-accent-1-2: var(--background-accent-1-2);
+  --color-background-accent-1-3: var(--background-accent-1-3);
+  --color-background-accent-1-4: var(--background-accent-1-4);
+  --color-background-accent-1-5: var(--background-accent-1-5);
+  --color-background-accent-2-base: var(--background-accent-2-base);
+  --color-background-accent-2-1: var(--background-accent-2-1);
+  --color-background-accent-2-2: var(--background-accent-2-2);
+  --color-background-accent-2-3: var(--background-accent-2-3);
+  --color-background-accent-2-4: var(--background-accent-2-4);
+  --color-background-accent-2-5: var(--background-accent-2-5);
+  --color-background-accent-3-base: var(--background-accent-3-base);
+  --color-background-accent-3-1: var(--background-accent-3-1);
+  --color-background-accent-3-2: var(--background-accent-3-2);
+  --color-background-accent-3-3: var(--background-accent-3-3);
+  --color-background-accent-3-4: var(--background-accent-3-4);
+  --color-background-accent-3-5: var(--background-accent-3-5);
+  --color-stroke-basic-clear: var(--stroke-basic-clear);
+  --color-content-text-basic-clear: var(--content-text-basic-clear);
+  --color-gradient-neutral-50: var(--gradient-neutral-50);
+  --color-gradient-neutral-100: var(--gradient-neutral-100);
+  --color-gradient-neutral-200: var(--gradient-neutral-200);
+  --color-gradient-neutral-300: var(--gradient-neutral-300);
+  --color-gradient-neutral-400: var(--gradient-neutral-400);
+  --color-gradient-neutral-500: var(--gradient-neutral-500);
+  --color-gradient-neutral-700: var(--gradient-neutral-700);
+  --color-gradient-neutral-1000: var(--gradient-neutral-1000);
+  --color-gradient-brand-50: var(--gradient-brand-50);
+  --color-gradient-brand-100: var(--gradient-brand-100);
+  --color-gradient-brand-200: var(--gradient-brand-200);
+  --color-gradient-brand-300: var(--gradient-brand-300);
+  --color-gradient-brand-400: var(--gradient-brand-400);
+  --color-gradient-brand-500: var(--gradient-brand-500);
+  --color-gradient-brand-700: var(--gradient-brand-700);
+  --color-gradient-brand-1000: var(--gradient-brand-1000);
+  --color-content-text-basic-black: var(--content-text-basic-black);
+  --color-content-text-basic-white: var(--content-text-basic-white);
+  --color-content-text-neutral-base: var(--content-text-neutral-base);
+  --color-content-text-neutral-1: var(--content-text-neutral-1);
+  --color-content-text-neutral-2: var(--content-text-neutral-2);
+  --color-content-text-neutral-3: var(--content-text-neutral-3);
+  --color-content-text-neutral-4: var(--content-text-neutral-4);
+  --color-content-text-neutral-5: var(--content-text-neutral-5);
+  --color-content-text-on-color-dark-dark: var(
+    --content-text-on-color-dark-dark
+  );
+  --color-content-text-on-color-dark-light: var(
+    --content-text-on-color-dark-light
+  );
+  --color-content-text-on-color-light-dark: var(
+    --content-text-on-color-light-dark
+  );
+  --color-content-text-on-color-light-light: var(
+    --content-text-on-color-light-light
+  );
+  --color-content-text-inverse-base: var(--content-text-inverse-base);
+  --color-content-text-inverse-1: var(--content-text-inverse-1);
+  --color-content-text-inverse-2: var(--content-text-inverse-2);
+  --color-content-text-inverse-3: var(--content-text-inverse-3);
+  --color-content-text-inverse-4: var(--content-text-inverse-4);
+  --color-content-text-inverse-5: var(--content-text-inverse-5);
+  --color-content-text-brand-base: var(--content-text-brand-base);
+  --color-content-text-brand-1: var(--content-text-brand-1);
+  --color-content-text-brand-2: var(--content-text-brand-2);
+  --color-content-text-brand-3: var(--content-text-brand-3);
+  --color-content-text-brand-4: var(--content-text-brand-4);
+  --color-content-text-brand-5: var(--content-text-brand-5);
+  --color-content-text-semantic-success-base: var(
+    --content-text-semantic-success-base
+  );
+  --color-content-text-semantic-success-1: var(
+    --content-text-semantic-success-1
+  );
+  --color-content-text-semantic-success-2: var(
+    --content-text-semantic-success-2
+  );
+  --color-content-text-semantic-success-3: var(
+    --content-text-semantic-success-3
+  );
+  --color-content-text-semantic-success-4: var(
+    --content-text-semantic-success-4
+  );
+  --color-content-text-semantic-success-5: var(
+    --content-text-semantic-success-5
+  );
+  --color-content-text-semantic-warning-base: var(
+    --content-text-semantic-warning-base
+  );
+  --color-content-text-semantic-warning-1: var(
+    --content-text-semantic-warning-1
+  );
+  --color-content-text-semantic-warning-2: var(
+    --content-text-semantic-warning-2
+  );
+  --color-content-text-semantic-warning-3: var(
+    --content-text-semantic-warning-3
+  );
+  --color-content-text-semantic-warning-4: var(
+    --content-text-semantic-warning-4
+  );
+  --color-content-text-semantic-warning-5: var(
+    --content-text-semantic-warning-5
+  );
+  --color-content-text-semantic-error-base: var(
+    --content-text-semantic-error-base
+  );
+  --color-content-text-semantic-error-1: var(--content-text-semantic-error-1);
+  --color-content-text-semantic-error-2: var(--content-text-semantic-error-2);
+  --color-content-text-semantic-error-3: var(--content-text-semantic-error-3);
+  --color-content-text-semantic-error-4: var(--content-text-semantic-error-4);
+  --color-content-text-semantic-error-5: var(--content-text-semantic-error-5);
+  --color-content-text-semantic-info-base: var(
+    --content-text-semantic-info-base
+  );
+  --color-content-text-semantic-info-1: var(--content-text-semantic-info-1);
+  --color-content-text-semantic-info-2: var(--content-text-semantic-info-2);
+  --color-content-text-semantic-info-3: var(--content-text-semantic-info-3);
+  --color-content-text-semantic-info-4: var(--content-text-semantic-info-4);
+  --color-content-text-semantic-info-5: var(--content-text-semantic-info-5);
+  --color-content-text-accent-1-base: var(--content-text-accent-1-base);
+  --color-content-text-accent-1-1: var(--content-text-accent-1-1);
+  --color-content-text-accent-1-2: var(--content-text-accent-1-2);
+  --color-content-text-accent-1-3: var(--content-text-accent-1-3);
+  --color-content-text-accent-1-4: var(--content-text-accent-1-4);
+  --color-content-text-accent-1-5: var(--content-text-accent-1-5);
+  --color-content-text-accent-2-base: var(--content-text-accent-2-base);
+  --color-content-text-accent-2-1: var(--content-text-accent-2-1);
+  --color-content-text-accent-2-2: var(--content-text-accent-2-2);
+  --color-content-text-accent-2-3: var(--content-text-accent-2-3);
+  --color-content-text-accent-2-4: var(--content-text-accent-2-4);
+  --color-content-text-accent-2-5: var(--content-text-accent-2-5);
+  --color-content-text-accent-3-base: var(--content-text-accent-3-base);
+  --color-content-text-accent-3-1: var(--content-text-accent-3-1);
+  --color-content-text-accent-3-2: var(--content-text-accent-3-2);
+  --color-content-text-accent-3-3: var(--content-text-accent-3-3);
+  --color-content-text-accent-3-4: var(--content-text-accent-3-4);
+  --color-content-text-accent-3-5: var(--content-text-accent-3-5);
+  --color-content-assets-basic-clear: var(--content-assets-basic-clear);
+  --color-content-assets-basic-black: var(--content-assets-basic-black);
+  --color-content-assets-basic-white: var(--content-assets-basic-white);
+  --color-content-assets-neutral-base: var(--content-assets-neutral-base);
+  --color-content-assets-neutral-1: var(--content-assets-neutral-1);
+  --color-content-assets-neutral-2: var(--content-assets-neutral-2);
+  --color-content-assets-neutral-3: var(--content-assets-neutral-3);
+  --color-content-assets-neutral-4: var(--content-assets-neutral-4);
+  --color-content-assets-neutral-5: var(--content-assets-neutral-5);
+  --color-content-assets-on-color-dark-dark: var(
+    --content-assets-on-color-dark-dark
+  );
+  --color-content-assets-on-color-dark-light: var(
+    --content-assets-on-color-dark-light
+  );
+  --color-content-assets-on-color-light-dark: var(
+    --content-assets-on-color-light-dark
+  );
+  --color-content-assets-on-color-light-light: var(
+    --content-assets-on-color-light-light
+  );
+  --color-content-assets-inverse-base: var(--content-assets-inverse-base);
+  --color-content-assets-inverse-1: var(--content-assets-inverse-1);
+  --color-content-assets-inverse-2: var(--content-assets-inverse-2);
+  --color-content-assets-inverse-3: var(--content-assets-inverse-3);
+  --color-content-assets-inverse-4: var(--content-assets-inverse-4);
+  --color-content-assets-inverse-5: var(--content-assets-inverse-5);
+  --color-content-assets-brand-base: var(--content-assets-brand-base);
+  --color-content-assets-brand-1: var(--content-assets-brand-1);
+  --color-content-assets-brand-2: var(--content-assets-brand-2);
+  --color-content-assets-brand-3: var(--content-assets-brand-3);
+  --color-content-assets-brand-4: var(--content-assets-brand-4);
+  --color-content-assets-brand-5: var(--content-assets-brand-5);
+  --color-content-assets-semantic-success-base: var(
+    --content-assets-semantic-success-base
+  );
+  --color-content-assets-semantic-success-1: var(
+    --content-assets-semantic-success-1
+  );
+  --color-content-assets-semantic-success-2: var(
+    --content-assets-semantic-success-2
+  );
+  --color-content-assets-semantic-success-3: var(
+    --content-assets-semantic-success-3
+  );
+  --color-content-assets-semantic-success-4: var(
+    --content-assets-semantic-success-4
+  );
+  --color-content-assets-semantic-success-5: var(
+    --content-assets-semantic-success-5
+  );
+  --color-content-assets-semantic-warning-base: var(
+    --content-assets-semantic-warning-base
+  );
+  --color-content-assets-semantic-warning-1: var(
+    --content-assets-semantic-warning-1
+  );
+  --color-content-assets-semantic-warning-2: var(
+    --content-assets-semantic-warning-2
+  );
+  --color-content-assets-semantic-warning-3: var(
+    --content-assets-semantic-warning-3
+  );
+  --color-content-assets-semantic-warning-4: var(
+    --content-assets-semantic-warning-4
+  );
+  --color-content-assets-semantic-warning-5: var(
+    --content-assets-semantic-warning-5
+  );
+  --color-content-assets-semantic-error-base: var(
+    --content-assets-semantic-error-base
+  );
+  --color-content-assets-semantic-error-1: var(
+    --content-assets-semantic-error-1
+  );
+  --color-content-assets-semantic-error-2: var(
+    --content-assets-semantic-error-2
+  );
+  --color-content-assets-semantic-error-3: var(
+    --content-assets-semantic-error-3
+  );
+  --color-content-assets-semantic-error-4: var(
+    --content-assets-semantic-error-4
+  );
+  --color-content-assets-semantic-error-5: var(
+    --content-assets-semantic-error-5
+  );
+  --color-content-assets-semantic-info-base: var(
+    --content-assets-semantic-info-base
+  );
+  --color-content-assets-semantic-info-1: var(--content-assets-semantic-info-1);
+  --color-content-assets-semantic-info-2: var(--content-assets-semantic-info-2);
+  --color-content-assets-semantic-info-3: var(--content-assets-semantic-info-3);
+  --color-content-assets-semantic-info-4: var(--content-assets-semantic-info-4);
+  --color-content-assets-semantic-info-5: var(--content-assets-semantic-info-5);
+  --color-content-assets-accent-1-base: var(--content-assets-accent-1-base);
+  --color-content-assets-accent-1-1: var(--content-assets-accent-1-1);
+  --color-content-assets-accent-1-2: var(--content-assets-accent-1-2);
+  --color-content-assets-accent-1-3: var(--content-assets-accent-1-3);
+  --color-content-assets-accent-1-4: var(--content-assets-accent-1-4);
+  --color-content-assets-accent-1-5: var(--content-assets-accent-1-5);
+  --color-content-assets-accent-2-base: var(--content-assets-accent-2-base);
+  --color-content-assets-accent-2-1: var(--content-assets-accent-2-1);
+  --color-content-assets-accent-2-2: var(--content-assets-accent-2-2);
+  --color-content-assets-accent-2-3: var(--content-assets-accent-2-3);
+  --color-content-assets-accent-2-4: var(--content-assets-accent-2-4);
+  --color-content-assets-accent-2-5: var(--content-assets-accent-2-5);
+  --color-content-assets-accent-3-base: var(--content-assets-accent-3-base);
+  --color-content-assets-accent-3-1: var(--content-assets-accent-3-1);
+  --color-content-assets-accent-3-2: var(--content-assets-accent-3-2);
+  --color-content-assets-accent-3-3: var(--content-assets-accent-3-3);
+  --color-content-assets-accent-3-4: var(--content-assets-accent-3-4);
+  --color-content-assets-accent-3-5: var(--content-assets-accent-3-5);
+  --color-stroke-basic-black: var(--stroke-basic-black);
+  --color-stroke-basic-white: var(--stroke-basic-white);
+  --color-stroke-neutral-base: var(--stroke-neutral-base);
+  --color-stroke-neutral-1: var(--stroke-neutral-1);
+  --color-stroke-neutral-2: var(--stroke-neutral-2);
+  --color-stroke-neutral-3: var(--stroke-neutral-3);
+  --color-stroke-neutral-4: var(--stroke-neutral-4);
+  --color-stroke-neutral-5: var(--stroke-neutral-5);
+  --color-stroke-neutral-6: var(--stroke-neutral-6);
+  --color-stroke-brand-base: var(--stroke-brand-base);
+  --color-stroke-brand-1: var(--stroke-brand-1);
+  --color-stroke-brand-2: var(--stroke-brand-2);
+  --color-stroke-brand-3: var(--stroke-brand-3);
+  --color-stroke-brand-4: var(--stroke-brand-4);
+  --color-stroke-brand-5: var(--stroke-brand-5);
+  --color-stroke-semantic-success-base: var(--stroke-semantic-success-base);
+  --color-stroke-focused-highlight: var(--stroke-focused-highlight);
+  --color-stroke-semantic-success-1: var(--stroke-semantic-success-1);
+  --color-stroke-semantic-success-2: var(--stroke-semantic-success-2);
+  --color-stroke-semantic-success-3: var(--stroke-semantic-success-3);
+  --color-stroke-semantic-success-4: var(--stroke-semantic-success-4);
+  --color-stroke-semantic-success-5: var(--stroke-semantic-success-5);
+  --color-stroke-semantic-warning-base: var(--stroke-semantic-warning-base);
+  --color-stroke-semantic-warning-1: var(--stroke-semantic-warning-1);
+  --color-stroke-semantic-warning-2: var(--stroke-semantic-warning-2);
+  --color-stroke-semantic-warning-3: var(--stroke-semantic-warning-3);
+  --color-stroke-semantic-warning-4: var(--stroke-semantic-warning-4);
+  --color-stroke-semantic-warning-5: var(--stroke-semantic-warning-5);
+  --color-stroke-semantic-error-base: var(--stroke-semantic-error-base);
+  --color-stroke-semantic-error-1: var(--stroke-semantic-error-1);
+  --color-stroke-semantic-error-2: var(--stroke-semantic-error-2);
+  --color-stroke-semantic-error-3: var(--stroke-semantic-error-3);
+  --color-stroke-semantic-error-4: var(--stroke-semantic-error-4);
+  --color-stroke-semantic-error-5: var(--stroke-semantic-error-5);
+  --color-stroke-semantic-info-base: var(--stroke-semantic-info-base);
+  --color-stroke-semantic-info-1: var(--stroke-semantic-info-1);
+  --color-stroke-semantic-info-2: var(--stroke-semantic-info-2);
+  --color-stroke-semantic-info-3: var(--stroke-semantic-info-3);
+  --color-stroke-semantic-info-4: var(--stroke-semantic-info-4);
+  --color-stroke-semantic-info-5: var(--stroke-semantic-info-5);
+  --color-stroke-accent-1-base: var(--stroke-accent-1-base);
+  --color-stroke-accent-1-1: var(--stroke-accent-1-1);
+  --color-stroke-accent-1-2: var(--stroke-accent-1-2);
+  --color-stroke-accent-1-3: var(--stroke-accent-1-3);
+  --color-stroke-accent-1-4: var(--stroke-accent-1-4);
+  --color-stroke-accent-1-5: var(--stroke-accent-1-5);
+  --color-stroke-accent-2-base: var(--stroke-accent-2-base);
+  --color-stroke-accent-2-1: var(--stroke-accent-2-1);
+  --color-stroke-accent-2-2: var(--stroke-accent-2-2);
+  --color-stroke-accent-2-3: var(--stroke-accent-2-3);
+  --color-stroke-accent-2-4: var(--stroke-accent-2-4);
+  --color-stroke-accent-2-5: var(--stroke-accent-2-5);
+  --color-stroke-accent-3-base: var(--stroke-accent-3-base);
+  --color-stroke-accent-3-1: var(--stroke-accent-3-1);
+  --color-stroke-accent-3-2: var(--stroke-accent-3-2);
+  --color-stroke-accent-3-3: var(--stroke-accent-3-3);
+  --color-stroke-accent-3-4: var(--stroke-accent-3-4);
+  --color-stroke-accent-3-5: var(--stroke-accent-3-5);
+  --color-effects-focused-base: var(--effects-focused-base);
+  --color-effects-focused-secondary: var(--effects-focused-secondary);
+  --color-effects-shadows-base-xs: var(--effects-shadows-base-xs);
+  --color-effects-shadows-base-sm: var(--effects-shadows-base-sm);
+  --color-effects-shadows-base-base: var(--effects-shadows-base-base);
+  --color-effects-shadows-base-md: var(--effects-shadows-base-md);
+  --color-effects-shadows-base-lg: var(--effects-shadows-base-lg);
+  --color-effects-shadows-base-xl: var(--effects-shadows-base-xl);
+  --color-effects-shadows-base-2-xl: var(--effects-shadows-base-2-xl);
+  --color-effects-shadows-inverse-xs: var(--effects-shadows-inverse-xs);
+  --color-effects-shadows-inverse-sm: var(--effects-shadows-inverse-sm);
+  --color-effects-shadows-inverse-base: var(--effects-shadows-inverse-base);
+  --color-effects-shadows-inverse-md: var(--effects-shadows-inverse-md);
+  --color-effects-shadows-inverse-lg: var(--effects-shadows-inverse-lg);
+  --color-effects-shadows-inverse-xl: var(--effects-shadows-inverse-xl);
+  --color-effects-shadows-inverse-2-xl: var(--effects-shadows-inverse-2-xl);
+  --color-background-accent-4-base: var(--background-accent-4-base);
+  --color-background-accent-4-1: var(--background-accent-4-1);
+  --color-background-accent-4-2: var(--background-accent-4-2);
+  --color-background-accent-4-3: var(--background-accent-4-3);
+  --color-background-accent-4-4: var(--background-accent-4-4);
+  --color-background-accent-4-5: var(--background-accent-4-5);
+  --color-stroke-accent-4-base: var(--stroke-accent-4-base);
+  --color-stroke-accent-4-1: var(--stroke-accent-4-1);
+  --color-stroke-accent-4-2: var(--stroke-accent-4-2);
+  --color-stroke-accent-4-3: var(--stroke-accent-4-3);
+  --color-stroke-accent-4-4: var(--stroke-accent-4-4);
+  --color-stroke-accent-4-5: var(--stroke-accent-4-5);
+  --color-content-text-accent-4-base: var(--content-text-accent-4-base);
+  --color-content-text-accent-4-1: var(--content-text-accent-4-1);
+  --color-content-text-accent-4-2: var(--content-text-accent-4-2);
+  --color-content-text-accent-4-3: var(--content-text-accent-4-3);
+  --color-content-text-accent-4-4: var(--content-text-accent-4-4);
+  --color-content-text-accent-4-5: var(--content-text-accent-4-5);
+  --color-content-assets-accent-4-base: var(--content-assets-accent-4-base);
+  --color-content-assets-accent-4-1: var(--content-assets-accent-4-1);
+  --color-content-assets-accent-4-2: var(--content-assets-accent-4-2);
+  --color-content-assets-accent-4-3: var(--content-assets-accent-4-3);
+  --color-content-assets-accent-4-4: var(--content-assets-accent-4-4);
+  --color-content-assets-accent-4-5: var(--content-assets-accent-4-5);
+
+  /* Component tokens Level 4 */
+  --color-avatar-colors-background-container-resting: var(
+    --background-neutral-raised-5
+  );
+  --color-avatar-colors-background-container-hover: var(--background-brand-2);
+  --color-avatar-colors-background-container-selected: var(
+    --background-brand-1
+  );
+  --color-avatar-colors-background-status-success: var(
+    --background-semantic-success-base
+  );
+  --color-avatar-colors-background-status-error: var(
+    --background-semantic-error-base
+  );
+  --color-avatar-colors-stroke-container-resting: var(
+    --background-neutral-raised-4
+  );
+  --color-avatar-colors-assets-resting: var(--content-assets-neutral-1);
+  --color-avatar-colors-assets-hover: var(--content-assets-neutral-base);
+  --color-avatar-colors-assets-selected: var(--content-assets-neutral-base);
+  --color-avatar-colors-text-resting: var(--content-text-neutral-base);
+  --color-avatar-colors-text-hover: var(--content-text-neutral-base);
+  --color-avatar-colors-text-selected: var(--content-text-neutral-base);
+  --color-avatar-colors-stroke-container-hover: var(--stroke-brand-1);
+  --color-avatar-colors-stroke-container-selected: var(--stroke-brand-base);
+  --color-avatar-colors-stroke-status-cut-out: var(
+    --background-neutral-canvas-base
+  );
+  --color-badges-colors-solid-brand-background-standard: var(
+    --background-brand-base
+  );
+  --color-badges-colors-solid-brand-stroke-default: var(--stroke-basic-clear);
+  --color-badges-colors-solid-brand-text-default: var(
+    --content-text-on-color-dark-light
+  );
+  --color-badges-colors-solid-brand-assets-default: var(
+    --content-assets-on-color-dark-light
+  );
+  --color-breadcrumbs-colors-primary-text-resting: var(
+    --content-text-neutral-3
+  );
+  --color-breadcrumbs-colors-primary-text-hover: var(
+    --content-text-neutral-base
+  );
+  --color-breadcrumbs-colors-primary-text-selected: var(
+    --content-text-on-color-light-dark
+  );
+  --color-breadcrumbs-colors-primary-assets-resting: var(
+    --content-assets-neutral-3
+  );
+  --color-breadcrumbs-colors-primary-assets-hover: var(
+    --content-assets-neutral-base
+  );
+  --color-breadcrumbs-colors-primary-assets-selected: var(
+    --content-assets-brand-base
+  );
+  --color-buttons-colors-core-icon-primary-background-resting: var(
+    --background-brand-base
+  );
+  --color-buttons-colors-core-icon-primary-background-hover: var(
+    --background-brand-1
+  );
+  --color-buttons-colors-core-icon-primary-background-selected: var(
+    --background-brand-base
+  );
+  --color-buttons-colors-core-icon-primary-stroke-resting: var(
+    --stroke-brand-base
+  );
+  --color-buttons-colors-core-icon-primary-stroke-hover: var(--stroke-brand-1);
+  --color-buttons-colors-core-icon-primary-stroke-selected: var(
+    --stroke-brand-base
+  );
+  --color-buttons-colors-core-icon-primary-text-resting: var(
+    --content-text-on-color-light-light
+  );
+  --color-buttons-colors-core-icon-primary-text-hover: var(
+    --content-text-on-color-light-light
+  );
+  --color-buttons-colors-core-icon-primary-text-selected: var(
+    --content-text-on-color-light-light
+  );
+  --color-buttons-colors-core-icon-primary-assets-resting: var(
+    --content-assets-on-color-light-light
+  );
+  --color-buttons-colors-core-icon-primary-assets-on-hover: var(
+    --content-assets-on-color-light-light
+  );
+  --color-buttons-colors-core-icon-primary-assets-selected: var(
+    --content-assets-on-color-light-light
+  );
+  --color-buttons-colors-core-icon-secondary-background-resting: var(
+    --background-neutral-raised-5
+  );
+  --color-buttons-colors-core-icon-secondary-background-hover: var(
+    --background-neutral-raised-3
+  );
+  --color-buttons-colors-core-icon-secondary-background-selected: var(
+    --background-neutral-raised-2
+  );
+  --color-buttons-colors-core-icon-secondary-stroke-resting: var(
+    --stroke-basic-clear
+  );
+  --color-buttons-colors-core-icon-secondary-stroke-hover: var(
+    --stroke-basic-clear
+  );
+  --color-buttons-colors-core-icon-secondary-stroke-selected: var(
+    --stroke-basic-clear
+  );
+  --color-buttons-colors-core-icon-secondary-text-resting: var(
+    --content-text-neutral-base
+  );
+  --color-buttons-colors-core-icon-secondary-text-hover: var(
+    --content-text-neutral-base
+  );
+  --color-buttons-colors-core-icon-secondary-text-selected: var(
+    --content-text-neutral-base
+  );
+  --color-buttons-colors-core-icon-secondary-assets-resting: var(
+    --content-assets-neutral-1
+  );
+  --color-buttons-colors-core-icon-secondary-assets-hover: var(
+    --content-assets-neutral-base
+  );
+  --color-buttons-colors-core-icon-secondary-assets-selected: var(
+    --content-assets-neutral-base
+  );
+  --color-buttons-colors-core-icon-outline-background-resting: var(
+    --background-basic-clear
+  );
+  --color-buttons-colors-core-icon-outline-background-hover: var(
+    --background-basic-clear
+  );
+  --color-buttons-colors-core-icon-outline-background-selected: var(
+    --background-basic-clear
+  );
+  --color-buttons-colors-core-icon-outline-stroke-resting: var(
+    --stroke-neutral-2
+  );
+  --color-buttons-colors-core-icon-outline-stroke-hover: var(--stroke-brand-1);
+  --color-buttons-colors-core-icon-outline-stroke-selected: var(
+    --stroke-brand-base
+  );
+  --color-buttons-colors-core-icon-outline-text-resting: var(
+    --content-text-neutral-1
+  );
+  --color-buttons-colors-core-icon-outline-text-hover: var(
+    --content-text-brand-base
+  );
+  --color-buttons-colors-core-icon-outline-text-selected: var(
+    --content-text-brand-base
+  );
+  --color-buttons-colors-core-icon-outline-assets-resting: var(
+    --content-assets-neutral-1
+  );
+  --color-buttons-colors-core-icon-outline-assets-hover: var(
+    --content-assets-brand-base
+  );
+  --color-buttons-colors-core-icon-outline-assets-selected: var(
+    --content-assets-brand-base
+  );
+  --color-buttons-colors-core-icon-ghost-background-resting: var(
+    --background-basic-clear
+  );
+  --color-buttons-colors-core-icon-ghost-background-hover: var(
+    --background-brand-2
+  );
+  --color-buttons-colors-core-icon-ghost-background-selected: var(
+    --background-brand-1
+  );
+  --color-buttons-colors-core-icon-ghost-stroke-resting: var(
+    --stroke-basic-clear
+  );
+  --color-buttons-colors-core-icon-ghost-stroke-hover: var(
+    --stroke-basic-clear
+  );
+  --color-buttons-colors-core-icon-ghost-stroke-selected: var(
+    --stroke-basic-clear
+  );
+  --color-buttons-colors-core-icon-ghost-text-resting: var(
+    --content-text-neutral-1
+  );
+  --color-buttons-colors-core-icon-ghost-text-hover: var(
+    --content-text-on-color-light-light
+  );
+  --color-buttons-colors-core-icon-ghost-text-selected: var(
+    --content-text-on-color-light-light
+  );
+  --color-buttons-colors-core-icon-ghost-assets-resting: var(
+    --content-assets-neutral-1
+  );
+  --color-buttons-colors-core-icon-ghost-assets-hover: var(
+    --content-assets-on-color-light-light
+  );
+  --color-buttons-colors-core-icon-ghost-assets-selected: var(
+    --content-assets-on-color-light-light
+  );
+  --color-buttons-colors-link-primary-underline-detail-resting: var(
+    --stroke-basic-clear
+  );
+  --color-buttons-colors-link-primary-text-resting: var(
+    --content-text-brand-base
+  );
+  --color-buttons-colors-link-primary-text-hover: var(--content-text-neutral-1);
+  --color-buttons-colors-link-primary-text-selected: var(
+    --content-text-neutral-base
+  );
+  --color-buttons-colors-link-primary-assets-resting: var(
+    --content-assets-brand-base
+  );
+  --color-buttons-colors-link-primary-assets-hover: var(
+    --content-assets-neutral-1
+  );
+  --color-buttons-colors-link-primary-assets-selected: var(
+    --content-assets-neutral-base
+  );
+  --color-buttons-colors-link-primary-underline-detail-hover: var(
+    --stroke-basic-clear
+  );
+  --color-buttons-colors-link-primary-underline-detail-selected: var(
+    --stroke-basic-clear
+  );
+  --color-buttons-colors-link-secondary-underline-detail-resting: var(
+    --stroke-basic-clear
+  );
+  --color-buttons-colors-link-secondary-text-resting: var(
+    --content-text-neutral-base
+  );
+  --color-buttons-colors-link-secondary-text-hover: var(
+    --content-text-neutral-1
+  );
+  --color-buttons-colors-link-secondary-text-selected: var(
+    --content-text-neutral-base
+  );
+  --color-buttons-colors-link-secondary-assets-resting: var(
+    --content-assets-neutral-base
+  );
+  --color-buttons-colors-link-secondary-assets-hover: var(
+    --content-assets-neutral-1
+  );
+  --color-buttons-colors-link-secondary-assets-selected: var(
+    --content-assets-neutral-base
+  );
+  --color-buttons-colors-link-destructive-underline-detail-resting: var(
+    --stroke-basic-clear
+  );
+  --color-buttons-colors-link-destructive-underline-detail-hover: var(
+    --stroke-basic-clear
+  );
+  --color-buttons-colors-link-destructive-underline-detail-selected: var(
+    --stroke-basic-clear
+  );
+  --color-buttons-colors-link-destructive-text-resting: var(
+    --content-text-semantic-error-base
+  );
+  --color-buttons-colors-link-destructive-text-hover: var(
+    --content-text-semantic-error-1
+  );
+  --color-buttons-colors-link-destructive-text-selected: var(
+    --content-text-semantic-error-2
+  );
+  --color-buttons-colors-link-destructive-assets-resting: var(
+    --content-assets-semantic-error-base
+  );
+  --color-buttons-colors-link-destructive-assets-hover: var(
+    --content-assets-semantic-error-1
+  );
+  --color-buttons-colors-link-destructive-assets-selected: var(
+    --content-assets-semantic-error-2
+  );
+  --color-buttons-colors-link-secondary-underline-detail-hover: var(
+    --stroke-basic-clear
+  );
+  --color-buttons-colors-link-secondary-underline-detail-selected: var(
+    --stroke-basic-clear
+  );
+  --color-calendar-colors-container-background-default: var(
+    --background-neutral-inverse-raised-base
+  );
+  --color-calendar-colors-container-stroke-default: var(--stroke-neutral-5);
+  --color-calendar-colors-header-text-default: var(--content-text-neutral-1);
+  --color-calendar-colors-label-text-default: var(--content-text-neutral-3);
+  --color-calendar-colors-date-background-resting: var(
+    --background-neutral-inverse-raised-base
+  );
+  --color-calendar-colors-date-background-hover: var(--background-brand-2);
+  --color-calendar-colors-date-background-selected: var(
+    --background-brand-base
+  );
+  --color-calendar-colors-date-background-today: var(
+    --background-neutral-inverse-raised-base
+  );
+  --color-calendar-colors-date-background-range: var(--background-brand-4);
+  --color-calendar-colors-date-stroke-resting: var(--stroke-basic-clear);
+  --color-calendar-colors-date-stroke-hover: var(--stroke-basic-clear);
+  --color-calendar-colors-date-stroke-selected: var(--stroke-basic-clear);
+  --color-calendar-colors-date-stroke-today: var(--stroke-neutral-3);
+  --color-calendar-colors-date-text-resting: var(--content-text-neutral-1);
+  --color-calendar-colors-date-text-hover: var(
+    --content-text-on-color-light-dark
+  );
+  --color-calendar-colors-date-text-selected: var(
+    --content-text-on-color-light-dark
+  );
+  --color-calendar-colors-date-text-today: var(
+    --content-text-on-color-light-dark
+  );
+  --color-inputs-colors-normal-background-resting: var(
+    --background-neutral-raised-6
+  );
+  --color-inputs-colors-normal-background-hover: var(
+    --background-neutral-raised-5
+  );
+  --color-inputs-colors-normal-background-selected: var(--background-brand-5);
+  --color-inputs-colors-normal-stroke-resting: var(--stroke-neutral-3);
+  --color-inputs-colors-normal-stroke-hover: var(--stroke-brand-base);
+  --color-inputs-colors-normal-stroke-selected: var(--stroke-brand-1);
+  --color-inputs-colors-normal-text-label-resting: var(
+    --content-text-neutral-3
+  );
+  --color-inputs-colors-normal-text-label-hover: var(
+    --content-text-neutral-base
+  );
+  --color-inputs-colors-normal-text-label-selected: var(
+    --content-text-neutral-base
+  );
+  --color-inputs-colors-normal-text-label-filled: var(--content-text-neutral-3);
+  --color-inputs-colors-normal-assets-input-resting: var(
+    --content-assets-neutral-1
+  );
+  --color-inputs-colors-normal-assets-input-hover: var(
+    --content-assets-neutral-1
+  );
+  --color-inputs-colors-normal-assets-input-selected: var(
+    --content-assets-neutral-base
+  );
+  --color-indicators-colors-primary-background-resting: var(
+    --background-brand-3
+  );
+  --color-indicators-colors-primary-content-text-resting: var(
+    --content-text-on-color-light-light
+  );
+  --color-navigation-colors-background-container-base: var(
+    --background-neutral-raised-6
+  );
+  --color-navigation-colors-stroke-container-base: var(--stroke-neutral-5);
+  --color-navigation-colors-text-resting: var(--content-text-neutral-2);
+  --color-navigation-colors-text-user-resting: var(--content-text-neutral-base);
+  --color-navigation-colors-text-hover: var(--content-text-neutral-base);
+  --color-navigation-colors-text-selected: var(--content-text-neutral-base);
+  --color-navigation-colors-text-static: var(--content-text-neutral-3);
+  --color-navigation-colors-assets-resting: var(--content-assets-neutral-1);
+  --color-navigation-colors-assets-hover: var(--content-assets-neutral-base);
+  --color-navigation-colors-assets-selected: var(--content-assets-neutral-base);
+  --color-navigation-colors-assets-static: var(--content-assets-neutral-2);
+  --color-notifications-colors-background-neutral-resting: var(
+    --background-neutral-raised-6
+  );
+  --color-notifications-colors-stroke-neutral-resting: var(--stroke-neutral-4);
+  --color-notifications-colors-stroke-neutral-hover: var(
+    --background-neutral-raised-3
+  );
+  --color-notifications-colors-stroke-error-resting: var(
+    --background-semantic-error-4
+  );
+  --color-notifications-colors-stroke-error-hover: var(
+    --background-semantic-error-3
+  );
+  --color-notifications-colors-stroke-success-resting: var(
+    --stroke-semantic-success-4
+  );
+  --color-notifications-colors-stroke-success-hover: var(
+    --stroke-semantic-success-3
+  );
+  --color-notifications-colors-stroke-warning-resting: var(
+    --stroke-semantic-warning-4
+  );
+  --color-notifications-colors-stroke-warning-hover: var(
+    --stroke-semantic-warning-3
+  );
+  --color-notifications-colors-stroke-info-resting: var(
+    --stroke-semantic-info-4
+  );
+  --color-notifications-colors-stroke-info-hover: var(--stroke-semantic-info-3);
+  --color-notifications-colors-background-neutral-hover: var(
+    --background-neutral-raised-5
+  );
+  --color-notifications-colors-background-error-resting: var(
+    --background-semantic-error-5
+  );
+  --color-notifications-colors-background-error-hover: var(
+    --background-semantic-error-4
+  );
+  --color-notifications-colors-background-success-resting: var(
+    --background-semantic-success-5
+  );
+  --color-notifications-colors-background-success-hover: var(
+    --background-semantic-success-4
+  );
+  --color-notifications-colors-text-title-resting: var(
+    --content-text-neutral-base
+  );
+  --color-notifications-colors-text-normal-resting: var(
+    --content-text-neutral-3
+  );
+  --color-notifications-colors-text-static-resting: var(
+    --content-text-neutral-1
+  );
+  --color-notifications-colors-assets-normal-resting: var(
+    --content-assets-neutral-1
+  );
+  --color-notifications-colors-assets-neutral-static: var(
+    --content-assets-neutral-base
+  );
+  --color-notifications-colors-assets-normal-hover: var(
+    --content-assets-neutral-base
+  );
+  --color-notifications-colors-assets-normal-selected: var(
+    --content-assets-neutral-base
+  );
+  --color-notifications-colors-assets-destructive-resting: var(
+    --content-assets-semantic-error-base
+  );
+  --color-notifications-colors-assets-success-resting: var(
+    --content-assets-semantic-success-base
+  );
+  --color-select-menu-items-color-item-background-container-base: var(
+    --background-neutral-raised-6
+  );
+  --color-select-menu-items-color-item-background-header-resting: var(
+    --background-basic-clear
+  );
+  --color-select-menu-items-color-item-background-header-hover: var(
+    --background-basic-clear
+  );
+  --color-select-menu-items-color-item-background-header-selected: var(
+    --background-basic-clear
+  );
+  --color-select-menu-items-color-item-stroke-container-resting: var(
+    --stroke-neutral-5
+  );
+  --color-select-menu-items-color-item-stroke-header-resting: var(
+    --stroke-basic-clear
+  );
+  --color-select-menu-items-color-item-stroke-header-hover: var(
+    --stroke-basic-clear
+  );
+  --color-select-menu-items-color-item-stroke-header-selected: var(
+    --stroke-basic-clear
+  );
+  --color-select-menu-items-color-item-text-header-resting: var(
+    --content-text-neutral-3
+  );
+  --color-select-menu-items-color-item-text-header-hover: var(
+    --content-text-neutral-4
+  );
+  --color-select-menu-items-color-item-text-header-selected: var(
+    --content-text-neutral-4
+  );
+  --color-select-menu-items-color-item-text-row-resting: var(
+    --content-text-neutral-2
+  );
+  --color-select-menu-items-color-item-text-row-hover: var(
+    --content-text-neutral-base
+  );
+  --color-select-menu-items-color-item-text-row-selected: var(
+    --content-text-neutral-base
+  );
+  --color-select-menu-items-color-item-text-row-alt-selected: var(
+    --content-text-brand-base
+  );
+  --color-select-menu-items-color-item-text-row-static: var(
+    --content-text-neutral-3
+  );
+  --color-select-menu-items-color-item-assets-header-resting: var(
+    --content-assets-neutral-1
+  );
+  --color-select-menu-items-color-item-assets-header-hover: var(
+    --content-assets-neutral-base
+  );
+  --color-select-menu-items-color-item-assets-header-selected: var(
+    --content-assets-neutral-base
+  );
+  --color-select-menu-items-color-item-assets-row-resting: var(
+    --content-assets-neutral-base
+  );
+  --color-select-menu-items-color-item-assets-row-hover: var(
+    --content-assets-neutral-base
+  );
+  --color-select-menu-items-color-item-assets-row-selected: var(
+    --content-assets-neutral-base
+  );
+  --color-select-menu-items-color-item-assets-row-alt-selected: var(
+    --content-assets-brand-base
+  );
+  --color-select-menu-items-color-item-assets-row-trail-icon: var(
+    --content-assets-neutral-2
+  );
+  --color-selectors-colors-checkbox-not-selected-background-resting: var(
+    --background-neutral-raised-5
+  );
+  --color-selectors-colors-checkbox-not-selected-stroke-resting: var(
+    --stroke-neutral-4
+  );
+  --color-selectors-colors-checkbox-not-selected-stroke-hover: var(
+    --stroke-neutral-3
+  );
+  --color-selectors-colors-checkbox-not-selected-background-hover: var(
+    --background-neutral-raised-4
+  );
+  --color-selectors-colors-radio-not-selected-background-resting: var(
+    --background-neutral-raised-5
+  );
+  --color-selectors-colors-radio-not-selected-background-hover: var(
+    --background-neutral-raised-4
+  );
+  --color-selectors-colors-radio-not-selected-stroke-resting: var(
+    --stroke-neutral-4
+  );
+  --color-selectors-colors-radio-not-selected-stroke-hover: var(
+    --stroke-neutral-3
+  );
+  --color-selectors-colors-radio-selected-background-resting: var(
+    --background-basic-clear
+  );
+  --color-selectors-colors-radio-selected-background-hover: var(
+    --background-brand-4
+  );
+  --color-selectors-colors-radio-selected-stroke-resting: var(--stroke-brand-3);
+  --color-selectors-colors-radio-selected-stroke-hover: var(
+    --stroke-brand-base
+  );
+  --color-selectors-colors-radio-selected-assets-base: var(
+    --content-assets-brand-base
+  );
+  --color-selectors-colors-toggle-off-background-resting: var(
+    --background-neutral-raised-5
+  );
+  --color-selectors-colors-toggle-off-background-hover: var(
+    --background-neutral-raised-4
+  );
+  --color-selectors-colors-toggle-off-stroke-resting: var(--stroke-neutral-4);
+  --color-selectors-colors-toggle-off-stroke-hover: var(--stroke-neutral-3);
+  --color-selectors-colors-toggle-off-assets-resting: var(
+    --content-assets-neutral-base
+  );
+  --color-selectors-colors-toggle-off-assets-hover: var(
+    --content-assets-neutral-base
+  );
+  --color-selectors-colors-toggle-on-background-resting: var(
+    --background-brand-2
+  );
+  --color-selectors-colors-toggle-on-background-hover: var(
+    --background-brand-base
+  );
+  --color-selectors-colors-toggle-on-stroke-resting: var(--stroke-brand-3);
+  --color-selectors-colors-toggle-on-stroke-hover: var(--stroke-brand-3);
+  --color-selectors-colors-toggle-on-assets-resting: var(
+    --content-assets-on-color-light-light
+  );
+  --color-selectors-colors-toggle-on-assets-hover: var(
+    --content-assets-on-color-light-light
+  );
+  --color-selectors-colors-text-label-not-selected: var(
+    --content-text-neutral-base
+  );
+  --color-selectors-colors-text-label-selected: var(
+    --content-text-neutral-base
+  );
+  --color-tabs-colors-contained-background-resting: var(
+    --background-basic-clear
+  );
+  --color-tabs-colors-contained-background-hover: var(
+    --background-neutral-raised-5
+  );
+  --color-tabs-colors-contained-background-selected: var(--background-brand-3);
+  --color-tabs-colors-contained-background-selected-hover: var(
+    --background-brand-2
+  );
+  --color-tabs-colors-contained-stroke-resting: var(--stroke-basic-clear);
+  --color-tabs-colors-contained-stroke-hover: var(--stroke-basic-clear);
+  --color-tabs-colors-contained-stroke-selected: var(--stroke-basic-clear);
+  --color-tabs-colors-contained-stroke-selected-hover: var(
+    --stroke-basic-clear
+  );
+  --color-tabs-colors-contained-text-resting: var(--content-text-neutral-3);
+  --color-tabs-colors-contained-text-hover: var(--content-text-neutral-base);
+  --color-tabs-colors-contained-text-selected: var(
+    --content-text-on-color-light-light
+  );
+  --color-tabs-colors-contained-text-selected-hover: var(
+    --content-text-on-color-light-light
+  );
+  --color-tabs-colors-contained-assets-resting: var(--content-assets-neutral-3);
+  --color-tabs-colors-contained-assets-hover: var(
+    --content-assets-neutral-base
+  );
+  --color-tabs-colors-contained-assets-selected: var(
+    --content-assets-on-color-light-light
+  );
+  --color-tabs-colors-contained-assets-selected-hover: var(
+    --content-assets-on-color-light-light
+  );
+  --color-table-colors-background-header-container-resting: var(
+    --background-neutral-raised-5
+  );
+  --color-table-colors-background-header-container-hover: var(
+    --background-neutral-raised-4
+  );
+  --color-table-colors-background-header-container-selected: var(
+    --background-neutral-raised-3
+  );
+  --color-table-colors-background-row-container-resting: var(
+    --background-basic-clear
+  );
+  --color-table-colors-background-row-container-alternate-resting: var(
+    --background-basic-clear
+  );
+  --color-table-colors-background-row-container-hover: var(
+    --background-neutral-raised-6
+  );
+  --color-table-colors-background-row-container-selected: var(
+    --background-brand-5
+  );
+  --color-table-colors-stroke-header-container-resting: var(
+    --stroke-basic-clear
+  );
+  --color-table-colors-stroke-header-container-hover: var(--stroke-basic-clear);
+  --color-table-colors-stroke-header-container-selected: var(
+    --stroke-basic-clear
+  );
+  --color-table-colors-stroke-row-container-resting: var(--stroke-basic-clear);
+  --color-table-colors-stroke-divider-base: var(--stroke-neutral-5);
+  --color-table-colors-stroke-row-container-hover: var(--stroke-basic-clear);
+  --color-table-colors-stroke-row-container-selected: var(--stroke-brand-5);
+  --color-table-colors-text-header-resting: var(--content-text-neutral-1);
+  --color-table-colors-text-header-hover: var(--content-text-neutral-base);
+  --color-table-colors-text-header-selected: var(--content-text-neutral-base);
+  --color-table-colors-text-row-primary: var(--content-text-neutral-base);
+  --color-table-colors-text-row-secondary: var(--content-text-neutral-2);
+  --color-table-colors-text-row-tertiary: var(--content-text-neutral-3);
+  --color-tags-colors-neutral-background-resting: var(
+    --background-neutral-raised-5
+  );
+  --color-tags-colors-neutral-background-hover: var(
+    --background-neutral-raised-4
+  );
+  --color-tags-colors-neutral-background-selected: var(
+    --background-neutral-raised-3
+  );
+  --color-tags-colors-neutral-stroke-resting: var(--stroke-neutral-4);
+  --color-tags-colors-neutral-stroke-hover: var(--stroke-neutral-3);
+  --color-tags-colors-neutral-stroke-selected: var(--stroke-neutral-2);
+  --color-tags-colors-neutral-text-label-base: var(
+    --content-text-on-color-light-dark
+  );
+  --color-tags-colors-neutral-assets-lead-icon-base: var(
+    --content-assets-on-color-light-dark
+  );
+  --color-notifications-colors-assets-info-resting: var(
+    --content-assets-semantic-info-base
+  );
+  --color-notifications-colors-assets-warning-static: var(
+    --content-assets-semantic-warning-base
+  );
+  --color-notifications-colors-background-warning-resting: var(
+    --background-semantic-warning-5
+  );
+  --color-notifications-colors-background-warning-hover: var(
+    --background-semantic-warning-4
+  );
+  --color-notifications-colors-background-info-resting: var(
+    --background-semantic-info-5
+  );
+  --color-notifications-colors-background-info-hover: var(
+    --background-semantic-info-4
+  );
+  --color-buttons-colors-core-icon-destructive-background-resting: var(
+    --background-semantic-error-2
+  );
+  --color-buttons-colors-core-icon-destructive-background-hover: var(
+    --background-semantic-error-1
+  );
+  --color-buttons-colors-core-icon-destructive-background-selected: var(
+    --background-semantic-error-base
+  );
+  --color-buttons-colors-core-icon-destructive-stroke-resting: var(
+    --stroke-semantic-error-base
+  );
+  --color-buttons-colors-core-icon-destructive-stroke-hover: var(
+    --stroke-semantic-error-1
+  );
+  --color-buttons-colors-core-icon-destructive-stroke-selected: var(
+    --stroke-semantic-error-base
+  );
+  --color-buttons-colors-core-icon-destructive-text-resting: var(
+    --content-text-on-color-light-light
+  );
+  --color-buttons-colors-core-icon-destructive-text-hover: var(
+    --content-text-on-color-light-light
+  );
+  --color-buttons-colors-core-icon-destructive-text-selected: var(
+    --content-text-on-color-light-light
+  );
+  --color-buttons-colors-core-icon-destructive-assets-resting: var(
+    --content-assets-on-color-light-light
+  );
+  --color-buttons-colors-core-icon-destructive-assets-hover: var(
+    --content-assets-on-color-light-light
+  );
+  --color-buttons-colors-core-icon-destructive-assets-selected: var(
+    --content-assets-on-color-light-light
+  );
+  --color-badges-colors-solid-accent-background-standard: var(
+    --background-accent-1-base
+  );
+  --color-badges-colors-solid-accent-stroke-default: var(--stroke-basic-clear);
+  --color-badges-colors-solid-accent-text-default: var(
+    --content-text-on-color-dark-light
+  );
+  --color-badges-colors-solid-accent-assets-default: var(
+    --content-assets-on-color-dark-light
+  );
+  --color-badges-colors-solid-neutral-background-standard: var(
+    --background-neutral-raised-base
+  );
+  --color-badges-colors-solid-neutral-stroke-default: var(--stroke-basic-clear);
+  --color-badges-colors-solid-neutral-text-default: var(
+    --content-text-on-color-dark-light
+  );
+  --color-badges-colors-solid-neutral-assets-default: var(
+    --content-assets-on-color-dark-light
+  );
+  --color-badges-colors-solid-success-background-standard: var(
+    --background-semantic-success-base
+  );
+  --color-badges-colors-solid-success-stroke-default: var(--stroke-basic-clear);
+  --color-badges-colors-solid-success-text-default: var(
+    --content-text-on-color-dark-dark
+  );
+  --color-badges-colors-solid-success-assets-default: var(
+    --content-assets-on-color-dark-dark
+  );
+  --color-badges-colors-solid-warning-background-standard: var(
+    --background-semantic-warning-base
+  );
+  --color-badges-colors-solid-warning-stroke-default: var(--stroke-basic-clear);
+  --color-badges-colors-solid-warning-text-default: var(
+    --content-text-on-color-dark-dark
+  );
+  --color-badges-colors-solid-warning-assets-default: var(
+    --content-assets-on-color-dark-dark
+  );
+  --color-badges-colors-solid-error-background-standard: var(
+    --background-semantic-error-1
+  );
+  --color-badges-colors-solid-error-stroke-default: var(--stroke-basic-clear);
+  --color-badges-colors-solid-error-text-default: var(
+    --content-text-on-color-light-dark
+  );
+  --color-badges-colors-solid-error-assets-default: var(
+    --content-assets-on-color-light-dark
+  );
+  --color-badges-colors-solid-info-background-standard: var(
+    --background-semantic-info-base
+  );
+  --color-badges-colors-solid-info-stroke-default: var(--stroke-basic-clear);
+  --color-badges-colors-solid-info-text-default: var(
+    --content-text-on-color-dark-dark
+  );
+  --color-badges-colors-solid-info-assets-default: var(
+    --content-assets-on-color-dark-dark
+  );
+  --color-badges-colors-outline-brand-background-standard: var(
+    --background-brand-5
+  );
+  --color-badges-colors-outline-brand-stroke-default: var(--stroke-brand-1);
+  --color-badges-colors-outline-brand-text-default: var(
+    --content-text-on-color-light-dark
+  );
+  --color-badges-colors-outline-brand-assets-default: var(
+    --content-assets-on-color-light-dark
+  );
+  --color-badges-colors-outline-accent-background-standard: var(
+    --background-accent-1-5
+  );
+  --color-badges-colors-outline-accent-stroke-default: var(--stroke-accent-1-1);
+  --color-badges-colors-outline-accent-text-default: var(
+    --content-text-on-color-light-dark
+  );
+  --color-badges-colors-outline-accent-assets-default: var(
+    --content-assets-on-color-light-dark
+  );
+  --color-badges-colors-outline-neutral-background-standard: var(
+    --background-neutral-raised-5
+  );
+  --color-badges-colors-outline-neutral-stroke-default: var(--stroke-neutral-1);
+  --color-badges-colors-outline-neutral-assets-default: var(
+    --content-assets-neutral-base
+  );
+  --color-badges-colors-outline-neutral-text-default: var(
+    --content-text-neutral-base
+  );
+  --color-badges-colors-outline-success-background-standard: var(
+    --background-semantic-success-5
+  );
+  --color-badges-colors-outline-success-stroke-default: var(
+    --stroke-semantic-success-1
+  );
+  --color-badges-colors-outline-success-text-default: var(
+    --content-text-on-color-light-dark
+  );
+  --color-badges-colors-outline-success-assets-default: var(
+    --content-assets-on-color-light-dark
+  );
+  --color-badges-colors-outline-warning-background-standard: var(
+    --background-semantic-warning-5
+  );
+  --color-badges-colors-outline-warning-stroke-default: var(
+    --stroke-semantic-warning-1
+  );
+  --color-badges-colors-outline-warning-text-default: var(
+    --content-text-on-color-light-dark
+  );
+  --color-badges-colors-outline-warning-assets-default: var(
+    --content-assets-on-color-light-dark
+  );
+  --color-badges-colors-outline-error-background-standard: var(
+    --background-semantic-error-5
+  );
+  --color-badges-colors-outline-error-stroke-default: var(
+    --stroke-semantic-error-1
+  );
+  --color-badges-colors-outline-error-text-default: var(
+    --content-text-on-color-light-dark
+  );
+  --color-badges-colors-outline-error-assets-default: var(
+    --content-assets-on-color-light-dark
+  );
+  --color-badges-colors-outline-info-background-standard: var(
+    --background-semantic-info-5
+  );
+  --color-badges-colors-outline-info-stroke-default: var(
+    --stroke-semantic-info-1
+  );
+  --color-badges-colors-outline-info-text-default: var(
+    --content-text-on-color-light-dark
+  );
+  --color-badges-colors-outline-info-assets-default: var(
+    --content-assets-on-color-light-dark
+  );
+  --color-badges-colors-subtle-brand-background-standard: var(
+    --background-brand-4
+  );
+  --color-badges-colors-subtle-brand-stroke-default: var(--stroke-basic-clear);
+  --color-badges-colors-subtle-brand-text-default: var(
+    --content-text-on-color-light-dark
+  );
+  --color-badges-colors-subtle-brand-assets-default: var(
+    --content-assets-on-color-light-dark
+  );
+  --color-badges-colors-subtle-accent-background-standard: var(
+    --background-accent-1-4
+  );
+  --color-badges-colors-subtle-accent-stroke-default: var(--stroke-basic-clear);
+  --color-badges-colors-subtle-accent-text-default: var(
+    --content-text-on-color-light-dark
+  );
+  --color-badges-colors-subtle-accent-assets-default: var(
+    --content-assets-on-color-light-dark
+  );
+  --color-badges-colors-subtle-neutral-background-standard: var(
+    --background-neutral-raised-4
+  );
+  --color-badges-colors-subtle-neutral-stroke-default: var(
+    --stroke-basic-clear
+  );
+  --color-badges-colors-subtle-neutral-text-default: var(
+    --content-text-neutral-base
+  );
+  --color-badges-colors-subtle-neutral-assets-default: var(
+    --content-assets-neutral-base
+  );
+  --color-badges-colors-subtle-success-background-standard: var(
+    --background-semantic-success-4
+  );
+  --color-badges-colors-subtle-success-stroke-default: var(
+    --stroke-basic-clear
+  );
+  --color-badges-colors-subtle-success-text-default: var(
+    --content-text-on-color-light-dark
+  );
+  --color-badges-colors-subtle-success-assets-default: var(
+    --content-assets-on-color-light-dark
+  );
+  --color-badges-colors-subtle-warning-background-standard: var(
+    --background-semantic-warning-4
+  );
+  --color-badges-colors-subtle-warning-stroke-default: var(
+    --stroke-basic-clear
+  );
+  --color-badges-colors-subtle-warning-text-default: var(
+    --content-text-on-color-light-dark
+  );
+  --color-badges-colors-subtle-warning-assets-default: var(
+    --content-assets-on-color-light-dark
+  );
+  --color-badges-colors-subtle-error-background-standard: var(
+    --background-semantic-error-4
+  );
+  --color-badges-colors-subtle-error-stroke-default: var(--stroke-basic-clear);
+  --color-badges-colors-subtle-error-text-default: var(
+    --content-text-on-color-light-dark
+  );
+  --color-badges-colors-subtle-error-assets-default: var(
+    --content-assets-on-color-light-dark
+  );
+  --color-badges-colors-subtle-info-background-standard: var(
+    --background-semantic-info-4
+  );
+  --color-badges-colors-subtle-info-stroke-default: var(--stroke-basic-clear);
+  --color-badges-colors-subtle-info-text-default: var(
+    --content-text-on-color-light-dark
+  );
+  --color-badges-colors-subtle-info-assets-default: var(
+    --content-assets-on-color-light-dark
+  );
+  --color-indicators-colors-neutral-background-resting: var(
+    --background-neutral-raised-5
+  );
+  --color-indicators-colors-neutral-content-text-resting: var(
+    --content-text-neutral-base
+  );
+  --color-inputs-colors-normal-text-conditional-default: var(
+    --content-text-neutral-2
+  );
+  --color-inputs-colors-normal-text-input-text-resting: var(
+    --content-text-neutral-3
+  );
+  --color-inputs-colors-normal-text-input-text-hover: var(
+    --content-text-neutral-3
+  );
+  --color-inputs-colors-normal-text-input-text-selected: var(
+    --content-text-neutral-base
+  );
+  --color-inputs-colors-normal-text-input-text-filled: var(
+    --content-text-neutral-base
+  );
+  --color-inputs-colors-normal-text-static-text-default: var(
+    --content-text-neutral-1
+  );
+  --color-inputs-colors-normal-text-helper-default: var(
+    --content-text-neutral-3
+  );
+  --color-inputs-colors-normal-assets-tooltip-resting: var(
+    --content-assets-neutral-2
+  );
+  --color-inputs-colors-normal-assets-tooltip-hover: var(
+    --content-assets-neutral-1
+  );
+  --color-inputs-colors-normal-assets-tooltip-selected: var(
+    --content-assets-neutral-base
+  );
+  --color-inputs-colors-error-background-resting: var(
+    --background-semantic-error-5
+  );
+  --color-inputs-colors-error-background-hover: var(
+    --background-semantic-error-5
+  );
+  --color-inputs-colors-error-background-selected: var(
+    --background-semantic-error-4
+  );
+  --color-inputs-colors-error-stroke-resting: var(--stroke-semantic-error-3);
+  --color-inputs-colors-error-stroke-hover: var(--stroke-semantic-error-base);
+  --color-inputs-colors-error-stroke-selected: var(
+    --stroke-semantic-error-base
+  );
+  --color-inputs-colors-error-text-label-resting: var(--content-text-neutral-3);
+  --color-inputs-colors-error-text-label-hover: var(
+    --content-text-neutral-base
+  );
+  --color-inputs-colors-error-text-label-selected: var(
+    --content-text-neutral-base
+  );
+  --color-inputs-colors-error-text-label-filled: var(--content-text-neutral-3);
+  --color-inputs-colors-error-assets-input-resting: var(
+    --content-assets-neutral-1
+  );
+  --color-inputs-colors-error-assets-input-hover: var(
+    --content-assets-neutral-1
+  );
+  --color-inputs-colors-error-assets-input-selected: var(
+    --content-assets-neutral-base
+  );
+  --color-inputs-colors-error-text-conditional-default: var(
+    --content-text-neutral-3
+  );
+  --color-inputs-colors-error-text-input-text-resting: var(
+    --content-text-neutral-3
+  );
+  --color-inputs-colors-error-text-static-text-default: var(
+    --content-text-neutral-1
+  );
+  --color-inputs-colors-error-text-input-text-hover: var(
+    --content-text-neutral-3
+  );
+  --color-inputs-colors-error-text-input-text-selected: var(
+    --content-text-neutral-base
+  );
+  --color-inputs-colors-error-text-input-text-filled: var(
+    --content-text-neutral-base
+  );
+  --color-inputs-colors-error-text-helper-default: var(
+    --content-text-semantic-error-base
+  );
+  --color-inputs-colors-error-assets-tooltip-resting: var(
+    --content-assets-neutral-2
+  );
+  --color-inputs-colors-error-assets-tooltip-hover: var(
+    --content-assets-neutral-1
+  );
+  --color-inputs-colors-error-assets-tooltip-selected: var(
+    --content-assets-neutral-base
+  );
+  --color-inputs-colors-success-background-resting: var(
+    --background-semantic-success-5
+  );
+  --color-inputs-colors-success-background-hover: var(
+    --background-semantic-success-5
+  );
+  --color-inputs-colors-success-background-selected: var(
+    --background-semantic-success-4
+  );
+  --color-inputs-colors-success-stroke-resting: var(
+    --stroke-semantic-success-3
+  );
+  --color-inputs-colors-success-stroke-hover: var(
+    --stroke-semantic-success-base
+  );
+  --color-inputs-colors-success-stroke-selected: var(
+    --stroke-semantic-success-base
+  );
+  --color-inputs-colors-success-text-label-resting: var(
+    --content-text-neutral-3
+  );
+  --color-inputs-colors-success-text-label-hover: var(
+    --content-text-neutral-base
+  );
+  --color-inputs-colors-success-text-label-selected: var(
+    --content-text-neutral-base
+  );
+  --color-inputs-colors-success-text-label-filled: var(
+    --content-text-neutral-3
+  );
+  --color-inputs-colors-success-assets-input-resting: var(
+    --content-assets-neutral-1
+  );
+  --color-inputs-colors-success-assets-input-hover: var(
+    --content-assets-neutral-1
+  );
+  --color-inputs-colors-success-assets-input-selected: var(
+    --content-assets-neutral-base
+  );
+  --color-inputs-colors-success-text-conditional-default: var(
+    --content-text-neutral-3
+  );
+  --color-inputs-colors-success-text-input-text-resting: var(
+    --content-text-neutral-3
+  );
+  --color-inputs-colors-success-text-static-text-default: var(
+    --content-text-neutral-1
+  );
+  --color-inputs-colors-success-text-input-text-hover: var(
+    --content-text-neutral-3
+  );
+  --color-inputs-colors-success-text-input-text-selected: var(
+    --content-text-neutral-base
+  );
+  --color-inputs-colors-success-text-input-text-filled: var(
+    --content-text-neutral-base
+  );
+  --color-inputs-colors-success-text-helper-default: var(
+    --content-text-semantic-success-base
+  );
+  --color-inputs-colors-success-assets-tooltip-resting: var(
+    --content-assets-neutral-2
+  );
+  --color-inputs-colors-success-assets-tooltip-hover: var(
+    --content-assets-neutral-1
+  );
+  --color-inputs-colors-success-assets-tooltip-selected: var(
+    --content-assets-neutral-base
+  );
+  --color-selectors-colors-checkbox-selected-background-resting: var(
+    --background-brand-2
+  );
+  --color-selectors-colors-checkbox-selected-background-hover: var(
+    --background-brand-base
+  );
+  --color-selectors-colors-checkbox-selected-stroke-resting: var(
+    --stroke-brand-3
+  );
+  --color-selectors-colors-checkbox-selected-stroke-hover: var(
+    --stroke-brand-3
+  );
+  --color-selectors-colors-checkbox-selected-assets-base: var(
+    --content-assets-on-color-light-light
+  );
+  --color-selectors-colors-checkbox-selected-assets-hover: var(
+    --content-assets-on-color-light-light
+  );
+  --color-selectors-colors-text-description-not-selected: var(
+    --content-text-neutral-3
+  );
+  --color-selectors-colors-text-description-selected: var(
+    --content-text-neutral-3
+  );
+  --color-tags-colors-neutral-text-static-base: var(--content-text-neutral-3);
+  --color-tags-colors-neutral-assets-close-base: var(
+    --content-assets-neutral-3
+  );
+  --color-tags-colors-brand-background-resting: var(--background-brand-5);
+  --color-tags-colors-brand-background-hover: var(--background-brand-4);
+  --color-tags-colors-brand-background-selected: var(--background-brand-3);
+  --color-tags-colors-brand-stroke-resting: var(--stroke-brand-4);
+  --color-tags-colors-brand-stroke-hover: var(--stroke-brand-3);
+  --color-tags-colors-brand-stroke-selected: var(--stroke-brand-2);
+  --color-tags-colors-brand-text-label-base: var(
+    --content-text-on-color-light-dark
+  );
+  --color-tags-colors-brand-assets-lead-icon-base: var(
+    --content-assets-on-color-light-dark
+  );
+  --color-tags-colors-brand-text-static-base: var(--content-text-neutral-3);
+  --color-tags-colors-brand-assets-close-base: var(--content-assets-neutral-3);
+  --color-tags-colors-accent-background-resting: var(--background-accent-3-5);
+  --color-tags-colors-accent-background-hover: var(--background-accent-3-4);
+  --color-tags-colors-accent-background-selected: var(--background-accent-3-3);
+  --color-tags-colors-accent-stroke-resting: var(--stroke-accent-3-4);
+  --color-tags-colors-accent-stroke-hover: var(--stroke-accent-3-3);
+  --color-tags-colors-accent-stroke-selected: var(--stroke-accent-3-2);
+  --color-tags-colors-accent-text-label-base: var(
+    --content-text-on-color-light-dark
+  );
+  --color-tags-colors-accent-text-static-base: var(--content-text-neutral-3);
+  --color-tags-colors-accent-assets-lead-icon-base: var(
+    --content-assets-on-color-light-dark
+  );
+  --color-tags-colors-accent-assets-close-base: var(--content-assets-neutral-3);
+  --color-tags-colors-info-background-resting: var(
+    --background-semantic-info-5
+  );
+  --color-tags-colors-info-background-hover: var(--background-semantic-info-4);
+  --color-tags-colors-info-background-selected: var(
+    --background-semantic-info-3
+  );
+  --color-tags-colors-info-stroke-resting: var(--stroke-semantic-info-4);
+  --color-tags-colors-info-stroke-hover: var(--stroke-semantic-info-3);
+  --color-tags-colors-info-stroke-selected: var(--stroke-semantic-info-2);
+  --color-tags-colors-info-text-label-base: var(
+    --content-text-on-color-light-dark
+  );
+  --color-tags-colors-info-assets-lead-icon-base: var(
+    --content-assets-on-color-light-dark
+  );
+  --color-tags-colors-info-text-static-base: var(--content-text-neutral-3);
+  --color-tags-colors-info-assets-close-base: var(--content-assets-neutral-3);
+  --color-tags-colors-success-background-resting: var(
+    --background-semantic-success-5
+  );
+  --color-tags-colors-success-background-hover: var(
+    --background-semantic-success-4
+  );
+  --color-tags-colors-success-background-selected: var(
+    --background-semantic-success-3
+  );
+  --color-tags-colors-success-stroke-resting: var(--stroke-semantic-success-4);
+  --color-tags-colors-success-stroke-hover: var(--stroke-semantic-success-3);
+  --color-tags-colors-success-stroke-selected: var(--stroke-semantic-success-2);
+  --color-tags-colors-success-text-label-base: var(
+    --content-text-on-color-light-dark
+  );
+  --color-tags-colors-success-assets-lead-icon-base: var(
+    --content-assets-on-color-light-dark
+  );
+  --color-tags-colors-success-text-static-base: var(--content-text-neutral-3);
+  --color-tags-colors-success-assets-close-base: var(
+    --content-assets-neutral-3
+  );
+  --color-tags-colors-warning-background-resting: var(
+    --background-semantic-warning-5
+  );
+  --color-tags-colors-warning-background-hover: var(
+    --background-semantic-warning-4
+  );
+  --color-tags-colors-warning-background-selected: var(
+    --background-semantic-warning-3
+  );
+  --color-tags-colors-warning-stroke-resting: var(--stroke-semantic-warning-4);
+  --color-tags-colors-warning-stroke-hover: var(--stroke-semantic-warning-3);
+  --color-tags-colors-warning-stroke-selected: var(--stroke-semantic-warning-2);
+  --color-tags-colors-warning-text-label-base: var(
+    --content-text-on-color-light-dark
+  );
+  --color-tags-colors-warning-assets-lead-icon-base: var(
+    --content-assets-on-color-light-dark
+  );
+  --color-tags-colors-warning-text-static-base: var(--content-text-neutral-3);
+  --color-tags-colors-warning-assets-close-base: var(
+    --content-assets-neutral-3
+  );
+  --color-tags-colors-error-background-resting: var(
+    --background-semantic-error-5
+  );
+  --color-tags-colors-error-background-hover: var(
+    --background-semantic-error-4
+  );
+  --color-tags-colors-error-background-selected: var(
+    --background-semantic-error-3
+  );
+  --color-tags-colors-error-stroke-resting: var(--stroke-semantic-error-4);
+  --color-tags-colors-error-stroke-hover: var(--stroke-semantic-error-3);
+  --color-tags-colors-error-stroke-selected: var(--stroke-semantic-error-2);
+  --color-tags-colors-error-text-label-base: var(
+    --content-text-on-color-light-dark
+  );
+  --color-tags-colors-error-assets-lead-icon-base: var(
+    --content-assets-on-color-light-dark
+  );
+  --color-tags-colors-error-text-static-base: var(--content-text-neutral-3);
+  --color-tags-colors-error-assets-close-base: var(--content-assets-neutral-3);
+  --color-tabs-colors-underline-background-resting: var(
+    --background-basic-clear
+  );
+  --color-tabs-colors-underline-background-hover: var(--background-basic-clear);
+  --color-tabs-colors-underline-background-selected: var(
+    --background-basic-clear
+  );
+  --color-tabs-colors-underline-background-selected-hover: var(
+    --background-basic-clear
+  );
+  --color-tabs-colors-underline-stroke-resting: var(--stroke-basic-clear);
+  --color-tabs-colors-underline-stroke-hover: var(--stroke-basic-clear);
+  --color-tabs-colors-underline-stroke-selected: var(--stroke-brand-base);
+  --color-tabs-colors-underline-stroke-selected-hover: var(--stroke-brand-3);
+  --color-tabs-colors-underline-text-resting: var(--content-text-neutral-3);
+  --color-tabs-colors-underline-text-hover: var(--content-text-neutral-base);
+  --color-tabs-colors-underline-text-selected: var(--content-text-neutral-base);
+  --color-tabs-colors-underline-text-selected-hover: var(
+    --content-text-neutral-base
+  );
+  --color-tabs-colors-underline-assets-resting: var(--content-assets-neutral-3);
+  --color-tabs-colors-underline-assets-hover: var(
+    --content-assets-neutral-base
+  );
+  --color-tabs-colors-underline-assets-selected: var(
+    --content-assets-neutral-base
+  );
+  --color-tabs-colors-underline-assets-selected-hover: var(
+    --content-assets-neutral-base
+  );
+  --color-tabs-colors-outline-background-resting: var(--background-basic-clear);
+  --color-tabs-colors-outline-background-hover: var(
+    --background-neutral-raised-5
+  );
+  --color-tabs-colors-outline-background-selected: var(
+    --background-basic-clear
+  );
+  --color-tabs-colors-outline-background-selected-hover: var(
+    --background-neutral-raised-5
+  );
+  --color-tabs-colors-outline-stroke-resting: var(--stroke-neutral-5);
+  --color-tabs-colors-outline-stroke-hover: var(--stroke-neutral-5);
+  --color-tabs-colors-outline-stroke-selected: var(--stroke-brand-base);
+  --color-tabs-colors-outline-stroke-selected-hover: var(--stroke-brand-3);
+  --color-tabs-colors-outline-text-resting: var(--content-text-neutral-3);
+  --color-tabs-colors-outline-text-hover: var(--content-text-neutral-base);
+  --color-tabs-colors-outline-text-selected: var(--content-text-neutral-base);
+  --color-tabs-colors-outline-text-selected-hover: var(
+    --content-text-neutral-base
+  );
+  --color-tabs-colors-outline-assets-resting: var(--content-assets-neutral-3);
+  --color-tabs-colors-outline-assets-hover: var(--content-assets-neutral-base);
+  --color-tabs-colors-outline-assets-selected: var(
+    --content-assets-neutral-base
+  );
+  --color-tabs-colors-outline-assets-selected-hover: var(
+    --content-assets-neutral-base
+  );
+  --color-tabs-colors-text-only-background-resting: var(
+    --background-basic-clear
+  );
+  --color-tabs-colors-text-only-background-hover: var(--background-basic-clear);
+  --color-tabs-colors-text-only-background-selected: var(
+    --background-basic-clear
+  );
+  --color-tabs-colors-text-only-background-selected-hover: var(
+    --background-basic-clear
+  );
+  --color-tabs-colors-text-only-text-resting: var(--content-text-neutral-3);
+  --color-tabs-colors-text-only-text-hover: var(--content-text-neutral-base);
+  --color-tabs-colors-text-only-text-selected: var(--content-text-brand-base);
+  --color-tabs-colors-text-only-text-selected-hover: var(
+    --content-text-brand-1
+  );
+  --color-tabs-colors-text-only-assets-resting: var(--content-assets-neutral-3);
+  --color-tabs-colors-text-only-assets-hover: var(
+    --content-assets-neutral-base
+  );
+  --color-tabs-colors-text-only-assets-selected: var(
+    --content-assets-brand-base
+  );
+  --color-tabs-colors-text-only-assets-selected-hover: var(
+    --content-assets-brand-1
+  );
+  --color-tooltip-colors-brand-background-default: var(--background-brand-3);
+  --color-tooltip-colors-brand-text-default: var(
+    --content-text-on-color-light-light
+  );
+  --color-tooltip-colors-neutral-background-default: var(
+    --background-neutral-raised-5
+  );
+  --color-tooltip-colors-neutral-text-default: var(--content-text-neutral-base);
+  --color-json-tree-color-text-primary-resting: var(--content-text-brand-base);
+  --color-json-tree-color-text-primary-hover: var(--content-text-neutral-base);
+  --color-json-tree-color-text-secondary-resting: var(--content-text-neutral-2);
+  --color-json-tree-color-text-secondary-hover: var(
+    --content-text-neutral-base
+  );
+  --color-json-tree-color-asset-resting: var(--content-assets-brand-base);
+  --color-json-tree-color-asset-hover: var(--content-assets-neutral-base);
+  --color-selectors-colors-range-handles-background-resting: var(
+    --background-neutral-raised-base
+  );
+  --color-selectors-colors-range-handles-background-hover: var(
+    --background-brand-base
+  );
+  --color-selectors-colors-range-handles-background-active: var(
+    --background-brand-base
+  );
+  --color-selectors-colors-range-handles-stroke-resting: var(
+    --stroke-basic-clear
+  );
+  --color-selectors-colors-range-handles-stroke-hover: var(
+    --stroke-basic-clear
+  );
+  --color-selectors-colors-range-handles-stroke-active: var(
+    --stroke-basic-clear
+  );
+  --color-selectors-colors-range-bar-background-base: var(
+    --background-neutral-raised-4
+  );
+  --color-selectors-colors-range-bar-background-hover: var(
+    --background-neutral-raised-3
+  );
+  --color-selectors-colors-range-bar-background-active: var(
+    --background-neutral-raised-3
+  );
+  --color-selectors-colors-range-bar-background-active-section: var(
+    --background-brand-base
+  );
+  --color-table-colors-background-header-cell-resting: var(
+    --background-basic-clear
+  );
+  --color-table-colors-background-header-cell-hover: var(
+    --background-neutral-raised-4
+  );
+  --color-table-colors-background-header-cell-selected: var(
+    --background-neutral-raised-3
+  );
+  --color-table-colors-background-row-cell-resting: var(
+    --background-basic-clear
+  );
+  --color-table-colors-background-row-cell-hover: var(--background-basic-clear);
+  --color-table-colors-background-row-cell-selected: var(
+    --background-basic-clear
+  );
+  --color-table-colors-stroke-header-cell-resting: var(--stroke-basic-clear);
+  --color-table-colors-stroke-header-cell-hover: var(--stroke-basic-clear);
+  --color-table-colors-stroke-header-cell-selected: var(--stroke-basic-clear);
+  --color-table-colors-stroke-row-cell-resting: var(--stroke-basic-clear);
+  --color-table-colors-stroke-row-cell-hover: var(--stroke-basic-clear);
+  --color-table-colors-stroke-row-cell-selected: var(--stroke-basic-clear);
+  --color-table-colors-asset-header-resting: var(--content-text-neutral-1);
+  --color-table-colors-asset-header-hover: var(--content-text-neutral-base);
+  --color-table-colors-asset-header-selected: var(--content-text-neutral-base);
+  --color-table-colors-asset-row-primary: var(--content-text-neutral-base);
+  --color-table-colors-asset-row-secondary: var(--content-text-neutral-2);
+  --color-table-colors-asset-row-tertiary: var(--content-text-neutral-3);
+  --color-select-menu-items-color-item-background-row-resting: var(
+    --background-basic-clear
+  );
+  --color-select-menu-items-color-item-background-row-hover: var(
+    --background-neutral-raised-6
+  );
+  --color-select-menu-items-color-item-background-row-selected: var(
+    --background-brand-5
+  );
+  --color-select-menu-items-color-item-stroke-row-resting: var(
+    --stroke-basic-clear
+  );
+  --color-select-menu-items-color-item-stroke-row-hover: var(
+    --stroke-neutral-6
+  );
+  --color-select-menu-items-color-item-stroke-row-selected: var(
+    --stroke-brand-5
+  );
+  --color-navigation-colors-background-row-items-resting: var(
+    --background-basic-clear
+  );
+  --color-navigation-colors-background-row-items-hover: var(
+    --background-neutral-raised-5
+  );
+  --color-navigation-colors-background-row-items-selected: var(
+    --background-brand-3
+  );
+  --color-navigation-colors-background-row-items-top-nav-selected: var(
+    --background-basic-clear
+  );
+  --color-navigation-colors-stroke-row-items-resting: var(--stroke-basic-clear);
+  --color-navigation-colors-stroke-row-items-hover: var(--stroke-neutral-6);
+  --color-navigation-colors-stroke-row-items-selected: var(--stroke-brand-3);
+  --color-navigation-colors-stroke-row-items-top-nav-selected: var(
+    --stroke-basic-clear
+  );
+  --color-navigation-colors-stroke-detail-line-sub-menu: var(
+    --stroke-neutral-4
+  );
+  --color-navigation-colors-stroke-detail-line-resting: var(
+    --stroke-basic-clear
+  );
+  --color-navigation-colors-stroke-detail-line-hover: var(--stroke-basic-clear);
+  --color-navigation-colors-stroke-detail-line-active: var(--stroke-brand-base);
+}
diff --git a/src/assets/css/tailwind/fonts.css b/src/assets/css/tailwind/fonts.css
new file mode 100644
index 000000000..bef4e7598
--- /dev/null
+++ b/src/assets/css/tailwind/fonts.css
@@ -0,0 +1,38 @@
+@theme {
+  /* Font Families */
+  --font-sans: 'Proxima Nova', sans-serif;
+  --font-serif: 'Inter', serif;
+  --font-mono: 'Share Tech Mono', monospace;
+
+  /* Font Sizes */
+  --text-xxs: 0.625rem; /* 10px */
+  --text-xs: 0.75rem; /* 12px */
+  --text-sm: 0.875rem; /* 14px */
+  --text-base: 1rem; /* 16px */
+  --text-lg: 1.25rem; /* 20px */
+  --text-xl: 1.375rem; /* 22px */
+  --text-2xl: 1.5rem; /* 24px */
+  --text-3xl: 1.625rem; /* 26px */
+  --text-4xl: 1.75rem; /* 28px */
+  --text-5xl: 1.875rem; /* 30px */
+  --text-6xl: 2rem; /* 32px */
+  --text-7xl: 2.25rem; /* 36px */
+  --text-8xl: 2.5rem; /* 40px */
+  --text-9xl: 3.75rem; /* 60px */
+
+  /* Line Heights */
+  --text-xxs--line-height: 0.75rem; /* 12px */
+  --text-xs--line-height: 0.875rem; /* 14px */
+  --text-sm--line-height: 1.125rem; /* 18px */
+  --text-base--line-height: 1.5rem; /* 24px */
+  --text-lg--line-height: 1.5rem; /* 24px */
+  --text-xl--line-height: 1.75rem; /* 28px */
+  --text-2xl--line-height: 1.75rem; /* 28px */
+  --text-3xl--line-height: 1.75rem; /* 28px */
+  --text-4xl--line-height: 2rem; /* 32px */
+  --text-5xl--line-height: 2.125rem; /* 34px */
+  --text-6xl--line-height: 2.25rem; /* 36px */
+  --text-7xl--line-height: 2.5rem; /* 40px */
+  --text-8xl--line-height: 3rem; /* 48px */
+  --text-9xl--line-height: 4.5rem; /* 72px */
+}
diff --git a/src/assets/css/tailwind/main.css b/src/assets/css/tailwind/main.css
new file mode 100644
index 000000000..6710a9679
--- /dev/null
+++ b/src/assets/css/tailwind/main.css
@@ -0,0 +1,5 @@
+@import './backgrounds.css';
+@import './colors.css';
+@import './fonts.css';
+@import './other.css';
+@import './shadows.css';
diff --git a/src/assets/css/tailwind/other.css b/src/assets/css/tailwind/other.css
new file mode 100644
index 000000000..9efa63b79
--- /dev/null
+++ b/src/assets/css/tailwind/other.css
@@ -0,0 +1,25 @@
+@theme inline {
+  /* Corner Radius */
+  --radius-primary: var(--corner-radius-primary);
+  --radius-lg: var(--corner-radius-lg);
+  --radius-sm: var(--corner-radius-sm);
+  --radius-pill: var(--corner-radius-pill);
+  --radius-sharp: var(--corner-radius-sharp);
+
+  /* Blur */
+  --blur-0: 0rem;
+  --blur-half: 0.03125rem;
+  --blur-1: 0.0625rem;
+  --blur-2: 0.125rem;
+  --blur-4: 0.25rem;
+  --blur-6: 0.375rem;
+  --blur-8: 0.5rem;
+  --blur-10: 0.625rem;
+  --blur-12: 0.75rem;
+  --blur-14: 0.875rem;
+  --blur-16: 1rem;
+  --blur-18: 1.125rem;
+  --blur-20: 1.25rem;
+  --blur-50: 3.125rem;
+  --blur-100: 6.25rem;
+}
diff --git a/src/assets/css/tailwind/shadows.css b/src/assets/css/tailwind/shadows.css
new file mode 100644
index 000000000..278b26bad
--- /dev/null
+++ b/src/assets/css/tailwind/shadows.css
@@ -0,0 +1,17 @@
+@theme inline {
+  /* Shadow */
+  --drop-shadow-0: 0rem;
+  --drop-shadow-1: 0.0625rem;
+  --drop-shadow-2: 0.125rem;
+  --drop-shadow-4: 0.25rem;
+  --drop-shadow-6: 0.375rem;
+  --drop-shadow-8: 0.5rem;
+  --drop-shadow-10: 0.625rem;
+  --drop-shadow-12: 0.75rem;
+  --drop-shadow-14: 0.875rem;
+  --drop-shadow-16: 1rem;
+  --drop-shadow-18: 1.125rem;
+  --drop-shadow-20: 1.25rem;
+  --drop-shadow-40: 2.5rem;
+  --drop-shadow-60: 3.75rem;
+}
diff --git a/src/assets/css/theme-dark.css b/src/assets/css/theme-dark.css
new file mode 100644
index 000000000..4803f11ed
--- /dev/null
+++ b/src/assets/css/theme-dark.css
@@ -0,0 +1,359 @@
+:root,
+:host {
+  &.theme-dark,
+  &.dark {
+    --reablocks-theme: dark;
+
+    --background-basic-clear: var(--color-neutrals-clear-dnt-clear);
+    --background-basic-black: var(--color-neutrals-pure-black-dnt-1000);
+    --background-basic-white: var(--color-neutrals-pure-white-dnt-1000);
+    --background-neutral-canvas-base: var(--color-neutrals-darth-abyss-a-1000);
+    --background-neutral-raised-base: var(
+      --color-neutrals-kyber-crystal-a-1000
+    );
+    --background-neutral-inverse-raised-base: var(
+      --color-neutrals-darth-abyss-a-1000
+    );
+    --background-neutral-inverse-raised-1: var(
+      --color-neutrals-darth-abyss-a-900
+    );
+    --background-neutral-inverse-raised-2: var(
+      --color-neutrals-darth-abyss-a-600
+    );
+    --background-neutral-inverse-raised-3: var(
+      --color-neutrals-darth-abyss-a-400
+    );
+    --background-neutral-inverse-raised-4: var(
+      --color-neutrals-darth-abyss-a-300
+    );
+    --background-neutral-inverse-raised-5: var(
+      --color-neutrals-darth-abyss-a-100
+    );
+    --background-neutral-inverse-raised-6: var(
+      --color-neutrals-darth-abyss-a-50
+    );
+    --background-neutral-raised-1: var(--color-neutrals-kyber-crystal-a-900);
+    --background-neutral-raised-2: var(--color-neutrals-kyber-crystal-a-600);
+    --background-neutral-raised-3: var(--color-neutrals-kyber-crystal-a-400);
+    --background-neutral-raised-4: var(--color-neutrals-kyber-crystal-a-300);
+    --background-neutral-raised-5: var(--color-neutrals-kyber-crystal-a-100);
+    --background-neutral-raised-6: var(--color-neutrals-kyber-crystal-a-50);
+    --background-brand-base: var(--color-blue-hyperstream-a-1000);
+    --background-brand-1: var(--color-blue-hyperstream-a-900);
+    --background-brand-2: var(--color-blue-hyperstream-a-700);
+    --background-brand-3: var(--color-blue-hyperstream-a-500);
+    --background-brand-4: var(--color-blue-hyperstream-a-400);
+    --background-brand-5: var(--color-blue-hyperstream-a-200);
+    --background-semantic-success-base: var(--color-green-emerald-saber-a-1000);
+    --background-semantic-warning-base: var(--color-orange-sunstreak-a-1000);
+    --background-semantic-warning-1: var(--color-orange-sunstreak-a-900);
+    --background-semantic-warning-2: var(--color-orange-sunstreak-a-700);
+    --background-semantic-warning-3: var(--color-orange-sunstreak-a-500);
+    --background-semantic-warning-4: var(--color-orange-sunstreak-a-400);
+    --background-semantic-warning-5: var(--color-orange-sunstreak-a-200);
+    --background-semantic-success-1: var(--color-green-emerald-saber-a-900);
+    --background-semantic-success-2: var(--color-green-emerald-saber-a-700);
+    --background-semantic-success-3: var(--color-green-emerald-saber-a-500);
+    --background-semantic-success-4: var(--color-green-emerald-saber-a-400);
+    --background-semantic-success-5: var(--color-green-emerald-saber-a-200);
+    --background-semantic-info-base: var(--color-blue-skybolt-a-1000);
+    --background-semantic-info-1: var(--color-blue-skybolt-a-900);
+    --background-semantic-info-2: var(--color-blue-skybolt-a-700);
+    --background-semantic-info-3: var(--color-blue-skybolt-a-500);
+    --background-semantic-info-4: var(--color-blue-skybolt-a-400);
+    --background-semantic-info-5: var(--color-blue-skybolt-a-200);
+    --background-semantic-error-base: var(--color-red-crimson-wrath-a-1000);
+    --background-semantic-error-1: var(--color-red-crimson-wrath-a-900);
+    --background-semantic-error-2: var(--color-red-crimson-wrath-a-700);
+    --background-semantic-error-3: var(--color-red-crimson-wrath-a-500);
+    --background-semantic-error-4: var(--color-red-crimson-wrath-a-400);
+    --background-semantic-error-5: var(--color-red-crimson-wrath-a-200);
+    --background-accent-1-base: var(--color-purple-nexus-a-1000);
+    --background-accent-1-1: var(--color-purple-nexus-a-900);
+    --background-accent-1-2: var(--color-purple-nexus-a-700);
+    --background-accent-1-3: var(--color-purple-nexus-a-500);
+    --background-accent-1-4: var(--color-purple-nexus-a-400);
+    --background-accent-1-5: var(--color-purple-nexus-a-200);
+    --background-accent-2-base: var(--color-pink-plasma-circuit-a-1000);
+    --background-accent-2-1: var(--color-pink-plasma-circuit-a-900);
+    --background-accent-2-2: var(--color-pink-plasma-circuit-a-700);
+    --background-accent-2-3: var(--color-pink-plasma-circuit-a-500);
+    --background-accent-2-4: var(--color-pink-plasma-circuit-a-400);
+    --background-accent-2-5: var(--color-pink-plasma-circuit-a-200);
+    --background-accent-3-base: var(--color-teal-sunspark-oasis-a-1000);
+    --background-accent-3-1: var(--color-teal-sunspark-oasis-a-900);
+    --background-accent-3-2: var(--color-teal-sunspark-oasis-a-700);
+    --background-accent-3-3: var(--color-teal-sunspark-oasis-a-500);
+    --background-accent-3-4: var(--color-teal-sunspark-oasis-a-400);
+    --background-accent-3-5: var(--color-teal-sunspark-oasis-a-200);
+    --stroke-basic-clear: var(--color-neutrals-clear-dnt-clear);
+    --content-text-basic-clear: var(--color-neutrals-clear-dnt-clear);
+    --gradient-neutral-50: var(--color-neutrals-kyber-crystal-a-50);
+    --gradient-neutral-100: var(--color-neutrals-kyber-crystal-a-100);
+    --gradient-neutral-200: var(--color-neutrals-kyber-crystal-a-200);
+    --gradient-neutral-300: var(--color-neutrals-kyber-crystal-a-300);
+    --gradient-neutral-400: var(--color-neutrals-kyber-crystal-a-400);
+    --gradient-neutral-500: var(--color-neutrals-kyber-crystal-a-500);
+    --gradient-neutral-700: var(--color-neutrals-kyber-crystal-a-700);
+    --gradient-neutral-1000: var(--color-neutrals-kyber-crystal-a-1000);
+    --gradient-brand-50: var(--color-blue-hyperstream-a-50);
+    --gradient-brand-100: var(--color-blue-hyperstream-a-100);
+    --gradient-brand-200: var(--color-blue-hyperstream-a-200);
+    --gradient-brand-300: var(--color-blue-hyperstream-a-300);
+    --gradient-brand-400: var(--color-blue-hyperstream-a-400);
+    --gradient-brand-500: var(--color-blue-hyperstream-a-500);
+    --gradient-brand-700: var(--color-blue-hyperstream-a-700);
+    --gradient-brand-1000: var(--color-blue-hyperstream-a-1000);
+    --content-text-basic-black: var(--color-neutrals-pure-black-dnt-1000);
+    --content-text-basic-white: var(--color-neutrals-pure-white-dnt-1000);
+    --content-text-neutral-base: var(--color-neutrals-kyber-crystal-a-1000);
+    --content-text-neutral-1: var(--color-neutrals-kyber-crystal-a-900);
+    --content-text-neutral-2: var(--color-neutrals-kyber-crystal-a-800);
+    --content-text-neutral-3: var(--color-neutrals-kyber-crystal-a-500);
+    --content-text-neutral-4: var(--color-neutrals-kyber-crystal-a-300);
+    --content-text-neutral-5: var(--color-neutrals-kyber-crystal-a-200);
+    --content-text-on-color-dark-dark: var(--color-neutrals-darth-abyss-a-1000);
+    --content-text-on-color-dark-light: var(
+      --color-neutrals-darth-abyss-a-1000
+    );
+    --content-text-on-color-light-dark: var(
+      --color-neutrals-kyber-crystal-a-1000
+    );
+    --content-text-on-color-light-light: var(
+      --color-neutrals-kyber-crystal-a-1000
+    );
+    --content-text-inverse-base: var(--color-neutrals-darth-abyss-a-1000);
+    --content-text-inverse-1: var(--color-neutrals-darth-abyss-a-900);
+    --content-text-inverse-2: var(--color-neutrals-darth-abyss-a-800);
+    --content-text-inverse-3: var(--color-neutrals-darth-abyss-a-500);
+    --content-text-inverse-4: var(--color-neutrals-darth-abyss-a-300);
+    --content-text-inverse-5: var(--color-neutrals-darth-abyss-a-200);
+    --content-text-brand-base: var(--color-blue-hyperstream-a-1000);
+    --content-text-brand-1: var(--color-blue-hyperstream-a-700);
+    --content-text-brand-2: var(--color-blue-hyperstream-a-300);
+    --content-text-brand-3: var(--color-blue-hyperstream-a-200);
+    --content-text-brand-4: var(--color-blue-hyperstream-a-100);
+    --content-text-brand-5: var(--color-blue-hyperstream-a-50);
+    --content-text-semantic-success-base: var(
+      --color-green-emerald-saber-a-1000
+    );
+    --content-text-semantic-success-1: var(--color-green-emerald-saber-a-700);
+    --content-text-semantic-success-2: var(--color-green-emerald-saber-a-300);
+    --content-text-semantic-success-3: var(--color-green-emerald-saber-a-200);
+    --content-text-semantic-success-4: var(--color-green-emerald-saber-a-100);
+    --content-text-semantic-success-5: var(--color-green-emerald-saber-a-50);
+    --content-text-semantic-warning-base: var(--color-orange-sunstreak-a-1000);
+    --content-text-semantic-warning-1: var(--color-orange-sunstreak-a-700);
+    --content-text-semantic-warning-2: var(--color-orange-sunstreak-a-300);
+    --content-text-semantic-warning-3: var(--color-orange-sunstreak-a-200);
+    --content-text-semantic-warning-4: var(--color-orange-sunstreak-a-100);
+    --content-text-semantic-warning-5: var(--color-orange-sunstreak-a-50);
+    --content-text-semantic-error-base: var(--color-red-crimson-wrath-a-1000);
+    --content-text-semantic-error-1: var(--color-red-crimson-wrath-a-700);
+    --content-text-semantic-error-2: var(--color-red-crimson-wrath-a-300);
+    --content-text-semantic-error-3: var(--color-red-crimson-wrath-a-200);
+    --content-text-semantic-error-4: var(--color-red-crimson-wrath-a-100);
+    --content-text-semantic-error-5: var(--color-red-crimson-wrath-a-50);
+    --content-text-semantic-info-base: var(--color-blue-skybolt-a-1000);
+    --content-text-semantic-info-1: var(--color-blue-skybolt-a-700);
+    --content-text-semantic-info-2: var(--color-blue-skybolt-a-300);
+    --content-text-semantic-info-3: var(--color-blue-skybolt-a-200);
+    --content-text-semantic-info-4: var(--color-blue-skybolt-a-100);
+    --content-text-semantic-info-5: var(--color-blue-skybolt-a-50);
+    --content-text-accent-1-base: var(--color-purple-nexus-a-1000);
+    --content-text-accent-1-1: var(--color-purple-nexus-a-700);
+    --content-text-accent-1-2: var(--color-purple-nexus-a-300);
+    --content-text-accent-1-3: var(--color-purple-nexus-a-200);
+    --content-text-accent-1-4: var(--color-purple-nexus-a-100);
+    --content-text-accent-1-5: var(--color-purple-nexus-a-50);
+    --content-text-accent-2-base: var(--color-pink-plasma-circuit-a-1000);
+    --content-text-accent-2-1: var(--color-pink-plasma-circuit-a-700);
+    --content-text-accent-2-2: var(--color-pink-plasma-circuit-a-300);
+    --content-text-accent-2-3: var(--color-pink-plasma-circuit-a-200);
+    --content-text-accent-2-4: var(--color-pink-plasma-circuit-a-100);
+    --content-text-accent-2-5: var(--color-pink-plasma-circuit-a-50);
+    --content-text-accent-3-base: var(--color-teal-sunspark-oasis-a-1000);
+    --content-text-accent-3-1: var(--color-teal-sunspark-oasis-a-700);
+    --content-text-accent-3-2: var(--color-teal-sunspark-oasis-a-300);
+    --content-text-accent-3-3: var(--color-teal-sunspark-oasis-a-200);
+    --content-text-accent-3-4: var(--color-teal-sunspark-oasis-a-100);
+    --content-text-accent-3-5: var(--color-teal-sunspark-oasis-a-50);
+    --content-assets-basic-clear: var(--color-neutrals-clear-dnt-clear);
+    --content-assets-basic-black: var(--color-neutrals-pure-black-dnt-1000);
+    --content-assets-basic-white: var(--color-neutrals-pure-white-dnt-1000);
+    --content-assets-neutral-base: var(--color-neutrals-kyber-crystal-a-1000);
+    --content-assets-neutral-1: var(--color-neutrals-kyber-crystal-a-900);
+    --content-assets-neutral-2: var(--color-neutrals-kyber-crystal-a-800);
+    --content-assets-neutral-3: var(--color-neutrals-kyber-crystal-a-500);
+    --content-assets-neutral-4: var(--color-neutrals-kyber-crystal-a-300);
+    --content-assets-neutral-5: var(--color-neutrals-kyber-crystal-a-200);
+    --content-assets-on-color-dark-dark: var(
+      --color-neutrals-darth-abyss-a-1000
+    );
+    --content-assets-on-color-dark-light: var(
+      --color-neutrals-darth-abyss-a-1000
+    );
+    --content-assets-on-color-light-dark: var(
+      --color-neutrals-kyber-crystal-a-1000
+    );
+    --content-assets-on-color-light-light: var(
+      --color-neutrals-kyber-crystal-a-1000
+    );
+    --content-assets-inverse-base: var(--color-neutrals-darth-abyss-a-1000);
+    --content-assets-inverse-1: var(--color-neutrals-darth-abyss-a-900);
+    --content-assets-inverse-2: var(--color-neutrals-darth-abyss-a-800);
+    --content-assets-inverse-3: var(--color-neutrals-darth-abyss-a-500);
+    --content-assets-inverse-4: var(--color-neutrals-darth-abyss-a-300);
+    --content-assets-inverse-5: var(--color-neutrals-darth-abyss-a-200);
+    --content-assets-brand-base: var(--color-blue-hyperstream-a-1000);
+    --content-assets-brand-1: var(--color-blue-hyperstream-a-700);
+    --content-assets-brand-2: var(--color-blue-hyperstream-a-300);
+    --content-assets-brand-3: var(--color-blue-hyperstream-a-200);
+    --content-assets-brand-4: var(--color-blue-hyperstream-a-100);
+    --content-assets-brand-5: var(--color-blue-hyperstream-a-50);
+    --content-assets-semantic-success-base: var(
+      --color-green-emerald-saber-a-1000
+    );
+    --content-assets-semantic-success-1: var(--color-green-emerald-saber-a-700);
+    --content-assets-semantic-success-2: var(--color-green-emerald-saber-a-300);
+    --content-assets-semantic-success-3: var(--color-green-emerald-saber-a-50);
+    --content-assets-semantic-success-4: var(--color-green-emerald-saber-a-50);
+    --content-assets-semantic-success-5: var(--color-green-emerald-saber-a-50);
+    --content-assets-semantic-warning-base: var(
+      --color-orange-sunstreak-a-1000
+    );
+    --content-assets-semantic-warning-1: var(--color-orange-sunstreak-a-700);
+    --content-assets-semantic-warning-2: var(--color-orange-sunstreak-a-300);
+    --content-assets-semantic-warning-3: var(--color-orange-sunstreak-a-50);
+    --content-assets-semantic-warning-4: var(--color-orange-sunstreak-a-50);
+    --content-assets-semantic-warning-5: var(--color-orange-sunstreak-a-50);
+    --content-assets-semantic-error-base: var(--color-red-crimson-wrath-a-1000);
+    --content-assets-semantic-error-1: var(--color-red-crimson-wrath-a-700);
+    --content-assets-semantic-error-2: var(--color-red-crimson-wrath-a-300);
+    --content-assets-semantic-error-3: var(--color-red-crimson-wrath-a-50);
+    --content-assets-semantic-error-4: var(--color-red-crimson-wrath-a-50);
+    --content-assets-semantic-error-5: var(--color-red-crimson-wrath-a-50);
+    --content-assets-semantic-info-base: var(--color-blue-skybolt-a-1000);
+    --content-assets-semantic-info-1: var(--color-blue-skybolt-a-700);
+    --content-assets-semantic-info-2: var(--color-blue-skybolt-a-300);
+    --content-assets-semantic-info-3: var(--color-blue-skybolt-a-50);
+    --content-assets-semantic-info-4: var(--color-blue-skybolt-a-50);
+    --content-assets-semantic-info-5: var(--color-blue-skybolt-a-50);
+    --content-assets-accent-1-base: var(--color-purple-nexus-a-1000);
+    --content-assets-accent-1-1: var(--color-purple-nexus-a-700);
+    --content-assets-accent-1-2: var(--color-purple-nexus-a-300);
+    --content-assets-accent-1-3: var(--color-purple-nexus-a-200);
+    --content-assets-accent-1-4: var(--color-purple-nexus-a-100);
+    --content-assets-accent-1-5: var(--color-purple-nexus-a-50);
+    --content-assets-accent-2-base: var(--color-pink-plasma-circuit-a-1000);
+    --content-assets-accent-2-1: var(--color-pink-plasma-circuit-a-700);
+    --content-assets-accent-2-2: var(--color-pink-plasma-circuit-a-300);
+    --content-assets-accent-2-3: var(--color-pink-plasma-circuit-a-200);
+    --content-assets-accent-2-4: var(--color-pink-plasma-circuit-a-100);
+    --content-assets-accent-2-5: var(--color-pink-plasma-circuit-a-50);
+    --content-assets-accent-3-base: var(--color-teal-sunspark-oasis-a-1000);
+    --content-assets-accent-3-1: var(--color-teal-sunspark-oasis-a-700);
+    --content-assets-accent-3-2: var(--color-teal-sunspark-oasis-a-300);
+    --content-assets-accent-3-3: var(--color-teal-sunspark-oasis-a-200);
+    --content-assets-accent-3-4: var(--color-teal-sunspark-oasis-a-100);
+    --content-assets-accent-3-5: var(--color-teal-sunspark-oasis-a-50);
+    --stroke-basic-black: var(--color-neutrals-pure-black-dnt-1000);
+    --stroke-basic-white: var(--color-neutrals-pure-white-dnt-1000);
+    --stroke-neutral-base: var(--color-neutrals-kyber-crystal-a-1000);
+    --stroke-neutral-1: var(--color-neutrals-kyber-crystal-a-700);
+    --stroke-neutral-2: var(--color-neutrals-kyber-crystal-a-500);
+    --stroke-neutral-3: var(--color-neutrals-kyber-crystal-a-300);
+    --stroke-neutral-4: var(--color-neutrals-kyber-crystal-a-200);
+    --stroke-neutral-5: var(--color-neutrals-kyber-crystal-a-100);
+    --stroke-neutral-6: var(--color-neutrals-kyber-crystal-a-100);
+    --stroke-brand-base: var(--color-blue-hyperstream-a-1000);
+    --stroke-brand-1: var(--color-blue-hyperstream-a-900);
+    --stroke-brand-2: var(--color-blue-hyperstream-a-800);
+    --stroke-brand-3: var(--color-blue-hyperstream-a-500);
+    --stroke-brand-4: var(--color-blue-hyperstream-a-200);
+    --stroke-brand-5: var(--color-blue-hyperstream-a-100);
+    --stroke-semantic-success-base: var(--color-green-emerald-saber-a-1000);
+    --stroke-focused-highlight: var(--color-blue-hyperstream-a-500);
+    --stroke-semantic-success-1: var(--color-green-emerald-saber-a-900);
+    --stroke-semantic-success-2: var(--color-green-emerald-saber-a-800);
+    --stroke-semantic-success-3: var(--color-green-emerald-saber-a-500);
+    --stroke-semantic-success-4: var(--color-green-emerald-saber-a-200);
+    --stroke-semantic-success-5: var(--color-green-emerald-saber-a-100);
+    --stroke-semantic-warning-base: var(--color-orange-sunstreak-a-1000);
+    --stroke-semantic-warning-1: var(--color-orange-sunstreak-a-900);
+    --stroke-semantic-warning-2: var(--color-orange-sunstreak-a-800);
+    --stroke-semantic-warning-3: var(--color-orange-sunstreak-a-500);
+    --stroke-semantic-warning-4: var(--color-orange-sunstreak-a-200);
+    --stroke-semantic-warning-5: var(--color-orange-sunstreak-a-100);
+    --stroke-semantic-error-base: var(--color-red-crimson-wrath-a-1000);
+    --stroke-semantic-error-1: var(--color-red-crimson-wrath-a-900);
+    --stroke-semantic-error-2: var(--color-red-crimson-wrath-a-800);
+    --stroke-semantic-error-3: var(--color-red-crimson-wrath-a-500);
+    --stroke-semantic-error-4: var(--color-red-crimson-wrath-a-200);
+    --stroke-semantic-error-5: var(--color-red-crimson-wrath-a-100);
+    --stroke-semantic-info-base: var(--color-blue-skybolt-a-1000);
+    --stroke-semantic-info-1: var(--color-blue-skybolt-a-900);
+    --stroke-semantic-info-2: var(--color-blue-skybolt-a-800);
+    --stroke-semantic-info-3: var(--color-blue-skybolt-a-500);
+    --stroke-semantic-info-4: var(--color-blue-skybolt-a-200);
+    --stroke-semantic-info-5: var(--color-blue-skybolt-a-100);
+    --stroke-accent-1-base: var(--color-purple-nexus-a-1000);
+    --stroke-accent-1-1: var(--color-purple-nexus-a-900);
+    --stroke-accent-1-2: var(--color-purple-nexus-a-800);
+    --stroke-accent-1-3: var(--color-purple-nexus-a-500);
+    --stroke-accent-1-4: var(--color-purple-nexus-a-200);
+    --stroke-accent-1-5: var(--color-purple-nexus-a-100);
+    --stroke-accent-2-base: var(--color-pink-plasma-circuit-a-1000);
+    --stroke-accent-2-1: var(--color-pink-plasma-circuit-a-900);
+    --stroke-accent-2-2: var(--color-pink-plasma-circuit-a-800);
+    --stroke-accent-2-3: var(--color-pink-plasma-circuit-a-500);
+    --stroke-accent-2-4: var(--color-pink-plasma-circuit-a-200);
+    --stroke-accent-2-5: var(--color-pink-plasma-circuit-a-100);
+    --stroke-accent-3-base: var(--color-teal-sunspark-oasis-a-1000);
+    --stroke-accent-3-1: var(--color-teal-sunspark-oasis-a-900);
+    --stroke-accent-3-2: var(--color-teal-sunspark-oasis-a-800);
+    --stroke-accent-3-3: var(--color-teal-sunspark-oasis-a-500);
+    --stroke-accent-3-4: var(--color-teal-sunspark-oasis-a-200);
+    --stroke-accent-3-5: var(--color-teal-sunspark-oasis-a-100);
+    --effects-focused-base: var(--color-blue-hyperstream-a-1000);
+    --effects-focused-secondary: var(--color-blue-hyperstream-a-400);
+    --effects-shadows-base-xs: var(--color-neutrals-darth-abyss-a-200);
+    --effects-shadows-base-sm: var(--color-neutrals-darth-abyss-a-300);
+    --effects-shadows-base-base: var(--color-neutrals-darth-abyss-a-400);
+    --effects-shadows-base-md: var(--color-neutrals-darth-abyss-a-500);
+    --effects-shadows-base-lg: var(--color-neutrals-darth-abyss-a-600);
+    --effects-shadows-base-xl: var(--color-neutrals-darth-abyss-a-700);
+    --effects-shadows-base-2-xl: var(--color-neutrals-darth-abyss-a-800);
+    --effects-shadows-inverse-xs: var(--color-neutrals-kyber-crystal-a-200);
+    --effects-shadows-inverse-sm: var(--color-neutrals-kyber-crystal-a-300);
+    --effects-shadows-inverse-base: var(--color-neutrals-kyber-crystal-a-400);
+    --effects-shadows-inverse-md: var(--color-neutrals-kyber-crystal-a-500);
+    --effects-shadows-inverse-lg: var(--color-neutrals-kyber-crystal-a-600);
+    --effects-shadows-inverse-xl: var(--color-neutrals-kyber-crystal-a-700);
+    --effects-shadows-inverse-2-xl: var(--color-neutrals-kyber-crystal-a-800);
+    --background-accent-4-base: var(--color-orange-sunstreak-a-1000);
+    --background-accent-4-1: var(--color-orange-sunstreak-a-900);
+    --background-accent-4-2: var(--color-orange-sunstreak-a-700);
+    --background-accent-4-3: var(--color-orange-sunstreak-a-500);
+    --background-accent-4-4: var(--color-orange-sunstreak-a-400);
+    --background-accent-4-5: var(--color-orange-sunstreak-a-200);
+    --stroke-accent-4-base: var(--color-orange-sunstreak-a-1000);
+    --stroke-accent-4-1: var(--color-orange-sunstreak-a-900);
+    --stroke-accent-4-2: var(--color-orange-sunstreak-a-800);
+    --stroke-accent-4-3: var(--color-orange-sunstreak-a-500);
+    --stroke-accent-4-4: var(--color-orange-sunstreak-a-200);
+    --stroke-accent-4-5: var(--color-orange-sunstreak-a-100);
+    --content-text-accent-4-base: var(--color-orange-sunstreak-a-1000);
+    --content-text-accent-4-1: var(--color-orange-sunstreak-a-700);
+    --content-text-accent-4-2: var(--color-orange-sunstreak-a-300);
+    --content-text-accent-4-3: var(--color-orange-sunstreak-a-200);
+    --content-text-accent-4-4: var(--color-orange-sunstreak-a-100);
+    --content-text-accent-4-5: var(--color-orange-sunstreak-a-50);
+    --content-assets-accent-4-base: var(--color-orange-sunstreak-a-1000);
+    --content-assets-accent-4-1: var(--color-orange-sunstreak-a-700);
+    --content-assets-accent-4-2: var(--color-orange-sunstreak-a-300);
+    --content-assets-accent-4-3: var(--color-orange-sunstreak-a-200);
+    --content-assets-accent-4-4: var(--color-orange-sunstreak-a-100);
+    --content-assets-accent-4-5: var(--color-orange-sunstreak-a-50);
+  }
+}
diff --git a/src/assets/css/theme-light.css b/src/assets/css/theme-light.css
new file mode 100644
index 000000000..9bb74feb5
--- /dev/null
+++ b/src/assets/css/theme-light.css
@@ -0,0 +1,359 @@
+:root,
+:host {
+  &.theme-light,
+  &.light {
+    --reablocks-theme: light;
+
+    --background-basic-clear: var(--color-neutrals-clear-dnt-clear);
+    --background-basic-black: var(--color-neutrals-pure-black-dnt-1000);
+    --background-basic-white: var(--color-neutrals-pure-white-dnt-1000);
+    --background-neutral-canvas-base: var(
+      --color-neutrals-kyber-crystal-a-1000
+    );
+    --background-neutral-raised-base: var(--color-neutrals-darth-abyss-a-1000);
+    --background-neutral-inverse-raised-base: var(
+      --color-neutrals-kyber-crystal-a-1000
+    );
+    --background-neutral-inverse-raised-1: var(
+      --color-neutrals-kyber-crystal-a-900
+    );
+    --background-neutral-inverse-raised-2: var(
+      --color-neutrals-kyber-crystal-a-600
+    );
+    --background-neutral-inverse-raised-3: var(
+      --color-neutrals-kyber-crystal-a-400
+    );
+    --background-neutral-inverse-raised-4: var(
+      --color-neutrals-kyber-crystal-a-300
+    );
+    --background-neutral-inverse-raised-5: var(
+      --color-neutrals-kyber-crystal-a-100
+    );
+    --background-neutral-inverse-raised-6: var(
+      --color-neutrals-kyber-crystal-a-50
+    );
+    --background-neutral-raised-1: var(--color-neutrals-darth-abyss-a-900);
+    --background-neutral-raised-2: var(--color-neutrals-darth-abyss-a-600);
+    --background-neutral-raised-3: var(--color-neutrals-darth-abyss-a-400);
+    --background-neutral-raised-4: var(--color-neutrals-darth-abyss-a-300);
+    --background-neutral-raised-5: var(--color-neutrals-pure-white-dnt-1000);
+    --background-neutral-raised-6: var(--color-neutrals-pure-white-dnt-1000);
+    --background-brand-base: var(--color-blue-hyperstream-a-1000);
+    --background-brand-1: var(--color-blue-hyperstream-a-900);
+    --background-brand-2: var(--color-blue-hyperstream-a-700);
+    --background-brand-3: var(--color-blue-hyperstream-a-500);
+    --background-brand-4: var(--color-blue-hyperstream-a-400);
+    --background-brand-5: var(--color-blue-hyperstream-a-200);
+    --background-semantic-success-base: var(--color-green-emerald-saber-a-1000);
+    --background-semantic-warning-base: var(--color-orange-sunstreak-a-1000);
+    --background-semantic-warning-1: var(--color-orange-sunstreak-a-900);
+    --background-semantic-warning-2: var(--color-orange-sunstreak-a-700);
+    --background-semantic-warning-3: var(--color-orange-sunstreak-a-500);
+    --background-semantic-warning-4: var(--color-orange-sunstreak-a-400);
+    --background-semantic-warning-5: var(--color-orange-sunstreak-a-200);
+    --background-semantic-success-1: var(--color-green-emerald-saber-a-900);
+    --background-semantic-success-2: var(--color-green-emerald-saber-a-700);
+    --background-semantic-success-3: var(--color-green-emerald-saber-a-500);
+    --background-semantic-success-4: var(--color-green-emerald-saber-a-400);
+    --background-semantic-success-5: var(--color-green-emerald-saber-a-200);
+    --background-semantic-info-base: var(--color-blue-skybolt-a-1000);
+    --background-semantic-info-1: var(--color-blue-skybolt-a-900);
+    --background-semantic-info-2: var(--color-blue-skybolt-a-700);
+    --background-semantic-info-3: var(--color-blue-skybolt-a-500);
+    --background-semantic-info-4: var(--color-blue-skybolt-a-400);
+    --background-semantic-info-5: var(--color-blue-skybolt-a-200);
+    --background-semantic-error-base: var(--color-red-crimson-wrath-a-1000);
+    --background-semantic-error-1: var(--color-red-crimson-wrath-a-900);
+    --background-semantic-error-2: var(--color-red-crimson-wrath-a-700);
+    --background-semantic-error-3: var(--color-red-crimson-wrath-a-500);
+    --background-semantic-error-4: var(--color-red-crimson-wrath-a-400);
+    --background-semantic-error-5: var(--color-red-crimson-wrath-a-200);
+    --background-accent-1-base: var(--color-purple-nexus-a-1000);
+    --background-accent-1-1: var(--color-purple-nexus-a-900);
+    --background-accent-1-2: var(--color-purple-nexus-a-700);
+    --background-accent-1-3: var(--color-purple-nexus-a-500);
+    --background-accent-1-4: var(--color-purple-nexus-a-400);
+    --background-accent-1-5: var(--color-purple-nexus-a-200);
+    --background-accent-2-base: var(--color-pink-plasma-circuit-a-1000);
+    --background-accent-2-1: var(--color-pink-plasma-circuit-a-900);
+    --background-accent-2-2: var(--color-pink-plasma-circuit-a-700);
+    --background-accent-2-3: var(--color-pink-plasma-circuit-a-500);
+    --background-accent-2-4: var(--color-pink-plasma-circuit-a-400);
+    --background-accent-2-5: var(--color-pink-plasma-circuit-a-200);
+    --background-accent-3-base: var(--color-teal-sunspark-oasis-a-1000);
+    --background-accent-3-1: var(--color-teal-sunspark-oasis-a-900);
+    --background-accent-3-2: var(--color-teal-sunspark-oasis-a-700);
+    --background-accent-3-3: var(--color-teal-sunspark-oasis-a-500);
+    --background-accent-3-4: var(--color-teal-sunspark-oasis-a-400);
+    --background-accent-3-5: var(--color-teal-sunspark-oasis-a-200);
+    --stroke-basic-clear: var(--color-neutrals-clear-dnt-clear);
+    --content-text-basic-clear: var(--color-neutrals-clear-dnt-clear);
+    --gradient-neutral-50: var(--color-neutrals-darth-abyss-a-50);
+    --gradient-neutral-100: var(--color-neutrals-darth-abyss-a-100);
+    --gradient-neutral-200: var(--color-neutrals-darth-abyss-a-200);
+    --gradient-neutral-300: var(--color-neutrals-darth-abyss-a-300);
+    --gradient-neutral-400: var(--color-neutrals-darth-abyss-a-400);
+    --gradient-neutral-500: var(--color-neutrals-darth-abyss-a-500);
+    --gradient-neutral-700: var(--color-neutrals-darth-abyss-a-700);
+    --gradient-neutral-1000: var(--color-neutrals-darth-abyss-a-1000);
+    --gradient-brand-50: var(--color-blue-hyperstream-a-50);
+    --gradient-brand-100: var(--color-blue-hyperstream-a-100);
+    --gradient-brand-200: var(--color-blue-hyperstream-a-200);
+    --gradient-brand-300: var(--color-blue-hyperstream-a-300);
+    --gradient-brand-400: var(--color-blue-hyperstream-a-400);
+    --gradient-brand-500: var(--color-blue-hyperstream-a-500);
+    --gradient-brand-700: var(--color-blue-hyperstream-a-700);
+    --gradient-brand-1000: var(--color-blue-hyperstream-a-1000);
+    --content-text-basic-black: var(--color-neutrals-pure-black-dnt-1000);
+    --content-text-basic-white: var(--color-neutrals-pure-white-dnt-1000);
+    --content-text-neutral-base: var(--color-neutrals-darth-abyss-a-1000);
+    --content-text-neutral-1: var(--color-neutrals-darth-abyss-a-900);
+    --content-text-neutral-2: var(--color-neutrals-darth-abyss-a-800);
+    --content-text-neutral-3: var(--color-neutrals-darth-abyss-a-500);
+    --content-text-neutral-4: var(--color-neutrals-darth-abyss-a-300);
+    --content-text-neutral-5: var(--color-neutrals-darth-abyss-a-200);
+    --content-text-on-color-dark-dark: var(--color-neutrals-darth-abyss-a-1000);
+    --content-text-on-color-dark-light: var(
+      --color-neutrals-kyber-crystal-a-1000
+    );
+    --content-text-on-color-light-dark: var(
+      --color-neutrals-darth-abyss-a-1000
+    );
+    --content-text-on-color-light-light: var(
+      --color-neutrals-kyber-crystal-a-1000
+    );
+    --content-text-inverse-base: var(--color-neutrals-kyber-crystal-a-1000);
+    --content-text-inverse-1: var(--color-neutrals-kyber-crystal-a-900);
+    --content-text-inverse-2: var(--color-neutrals-kyber-crystal-a-800);
+    --content-text-inverse-3: var(--color-neutrals-kyber-crystal-a-500);
+    --content-text-inverse-4: var(--color-neutrals-kyber-crystal-a-300);
+    --content-text-inverse-5: var(--color-neutrals-kyber-crystal-a-200);
+    --content-text-brand-base: var(--color-blue-hyperstream-a-1000);
+    --content-text-brand-1: var(--color-blue-hyperstream-a-700);
+    --content-text-brand-2: var(--color-blue-hyperstream-a-300);
+    --content-text-brand-3: var(--color-blue-hyperstream-a-200);
+    --content-text-brand-4: var(--color-blue-hyperstream-a-100);
+    --content-text-brand-5: var(--color-blue-hyperstream-a-50);
+    --content-text-semantic-success-base: var(
+      --color-green-emerald-saber-a-1000
+    );
+    --content-text-semantic-success-1: var(--color-green-emerald-saber-a-700);
+    --content-text-semantic-success-2: var(--color-green-emerald-saber-a-300);
+    --content-text-semantic-success-3: var(--color-green-emerald-saber-a-200);
+    --content-text-semantic-success-4: var(--color-green-emerald-saber-a-100);
+    --content-text-semantic-success-5: var(--color-green-emerald-saber-a-50);
+    --content-text-semantic-warning-base: var(--color-orange-sunstreak-a-1000);
+    --content-text-semantic-warning-1: var(--color-orange-sunstreak-a-700);
+    --content-text-semantic-warning-2: var(--color-orange-sunstreak-a-300);
+    --content-text-semantic-warning-3: var(--color-orange-sunstreak-a-200);
+    --content-text-semantic-warning-4: var(--color-orange-sunstreak-a-100);
+    --content-text-semantic-warning-5: var(--color-orange-sunstreak-a-50);
+    --content-text-semantic-error-base: var(--color-red-crimson-wrath-a-1000);
+    --content-text-semantic-error-1: var(--color-red-crimson-wrath-a-700);
+    --content-text-semantic-error-2: var(--color-red-crimson-wrath-a-300);
+    --content-text-semantic-error-3: var(--color-red-crimson-wrath-a-200);
+    --content-text-semantic-error-4: var(--color-red-crimson-wrath-a-100);
+    --content-text-semantic-error-5: var(--color-red-crimson-wrath-a-50);
+    --content-text-semantic-info-base: var(--color-blue-skybolt-a-1000);
+    --content-text-semantic-info-1: var(--color-blue-skybolt-a-700);
+    --content-text-semantic-info-2: var(--color-blue-skybolt-a-300);
+    --content-text-semantic-info-3: var(--color-blue-skybolt-a-200);
+    --content-text-semantic-info-4: var(--color-blue-skybolt-a-100);
+    --content-text-semantic-info-5: var(--color-blue-skybolt-a-50);
+    --content-text-accent-1-base: var(--color-purple-nexus-a-1000);
+    --content-text-accent-1-1: var(--color-purple-nexus-a-700);
+    --content-text-accent-1-2: var(--color-purple-nexus-a-300);
+    --content-text-accent-1-3: var(--color-purple-nexus-a-200);
+    --content-text-accent-1-4: var(--color-purple-nexus-a-100);
+    --content-text-accent-1-5: var(--color-purple-nexus-a-50);
+    --content-text-accent-2-base: var(--color-pink-plasma-circuit-a-1000);
+    --content-text-accent-2-1: var(--color-pink-plasma-circuit-a-700);
+    --content-text-accent-2-2: var(--color-pink-plasma-circuit-a-300);
+    --content-text-accent-2-3: var(--color-pink-plasma-circuit-a-200);
+    --content-text-accent-2-4: var(--color-pink-plasma-circuit-a-100);
+    --content-text-accent-2-5: var(--color-pink-plasma-circuit-a-50);
+    --content-text-accent-3-base: var(--color-teal-sunspark-oasis-a-1000);
+    --content-text-accent-3-1: var(--color-teal-sunspark-oasis-a-700);
+    --content-text-accent-3-2: var(--color-teal-sunspark-oasis-a-300);
+    --content-text-accent-3-3: var(--color-teal-sunspark-oasis-a-200);
+    --content-text-accent-3-4: var(--color-teal-sunspark-oasis-a-100);
+    --content-text-accent-3-5: var(--color-teal-sunspark-oasis-a-50);
+    --content-assets-basic-clear: var(--color-neutrals-clear-dnt-clear);
+    --content-assets-basic-black: var(--color-neutrals-pure-black-dnt-1000);
+    --content-assets-basic-white: var(--color-neutrals-pure-white-dnt-1000);
+    --content-assets-neutral-base: var(--color-neutrals-darth-abyss-a-1000);
+    --content-assets-neutral-1: var(--color-neutrals-darth-abyss-a-900);
+    --content-assets-neutral-2: var(--color-neutrals-darth-abyss-a-800);
+    --content-assets-neutral-3: var(--color-neutrals-darth-abyss-a-500);
+    --content-assets-neutral-4: var(--color-neutrals-darth-abyss-a-300);
+    --content-assets-neutral-5: var(--color-neutrals-darth-abyss-a-200);
+    --content-assets-on-color-dark-dark: var(
+      --color-neutrals-darth-abyss-a-1000
+    );
+    --content-assets-on-color-dark-light: var(
+      --color-neutrals-kyber-crystal-a-1000
+    );
+    --content-assets-on-color-light-dark: var(
+      --color-neutrals-darth-abyss-a-1000
+    );
+    --content-assets-on-color-light-light: var(
+      --color-neutrals-kyber-crystal-a-1000
+    );
+    --content-assets-inverse-base: var(--color-neutrals-kyber-crystal-a-1000);
+    --content-assets-inverse-1: var(--color-neutrals-kyber-crystal-a-900);
+    --content-assets-inverse-2: var(--color-neutrals-kyber-crystal-a-800);
+    --content-assets-inverse-3: var(--color-neutrals-kyber-crystal-a-500);
+    --content-assets-inverse-4: var(--color-neutrals-kyber-crystal-a-300);
+    --content-assets-inverse-5: var(--color-neutrals-kyber-crystal-a-200);
+    --content-assets-brand-base: var(--color-blue-hyperstream-a-1000);
+    --content-assets-brand-1: var(--color-blue-hyperstream-a-700);
+    --content-assets-brand-2: var(--color-blue-hyperstream-a-300);
+    --content-assets-brand-3: var(--color-blue-hyperstream-a-200);
+    --content-assets-brand-4: var(--color-blue-hyperstream-a-100);
+    --content-assets-brand-5: var(--color-blue-hyperstream-a-50);
+    --content-assets-semantic-success-base: var(
+      --color-green-emerald-saber-a-1000
+    );
+    --content-assets-semantic-success-1: var(--color-green-emerald-saber-a-700);
+    --content-assets-semantic-success-2: var(--color-green-emerald-saber-a-300);
+    --content-assets-semantic-success-3: var(--color-green-emerald-saber-a-50);
+    --content-assets-semantic-success-4: var(--color-green-emerald-saber-a-50);
+    --content-assets-semantic-success-5: var(--color-green-emerald-saber-a-50);
+    --content-assets-semantic-warning-base: var(
+      --color-orange-sunstreak-a-1000
+    );
+    --content-assets-semantic-warning-1: var(--color-orange-sunstreak-a-700);
+    --content-assets-semantic-warning-2: var(--color-orange-sunstreak-a-300);
+    --content-assets-semantic-warning-3: var(--color-orange-sunstreak-a-50);
+    --content-assets-semantic-warning-4: var(--color-orange-sunstreak-a-50);
+    --content-assets-semantic-warning-5: var(--color-orange-sunstreak-a-50);
+    --content-assets-semantic-error-base: var(--color-red-crimson-wrath-a-1000);
+    --content-assets-semantic-error-1: var(--color-red-crimson-wrath-a-700);
+    --content-assets-semantic-error-2: var(--color-red-crimson-wrath-a-300);
+    --content-assets-semantic-error-3: var(--color-red-crimson-wrath-a-50);
+    --content-assets-semantic-error-4: var(--color-red-crimson-wrath-a-50);
+    --content-assets-semantic-error-5: var(--color-red-crimson-wrath-a-50);
+    --content-assets-semantic-info-base: var(--color-blue-skybolt-a-1000);
+    --content-assets-semantic-info-1: var(--color-blue-skybolt-a-700);
+    --content-assets-semantic-info-2: var(--color-blue-skybolt-a-300);
+    --content-assets-semantic-info-3: var(--color-blue-skybolt-a-50);
+    --content-assets-semantic-info-4: var(--color-blue-skybolt-a-50);
+    --content-assets-semantic-info-5: var(--color-blue-skybolt-a-50);
+    --content-assets-accent-1-base: var(--color-purple-nexus-a-1000);
+    --content-assets-accent-1-1: var(--color-purple-nexus-a-700);
+    --content-assets-accent-1-2: var(--color-purple-nexus-a-300);
+    --content-assets-accent-1-3: var(--color-purple-nexus-a-200);
+    --content-assets-accent-1-4: var(--color-purple-nexus-a-100);
+    --content-assets-accent-1-5: var(--color-purple-nexus-a-50);
+    --content-assets-accent-2-base: var(--color-pink-plasma-circuit-a-1000);
+    --content-assets-accent-2-1: var(--color-pink-plasma-circuit-a-700);
+    --content-assets-accent-2-2: var(--color-pink-plasma-circuit-a-300);
+    --content-assets-accent-2-3: var(--color-pink-plasma-circuit-a-200);
+    --content-assets-accent-2-4: var(--color-pink-plasma-circuit-a-100);
+    --content-assets-accent-2-5: var(--color-pink-plasma-circuit-a-50);
+    --content-assets-accent-3-base: var(--color-teal-sunspark-oasis-a-1000);
+    --content-assets-accent-3-1: var(--color-teal-sunspark-oasis-a-700);
+    --content-assets-accent-3-2: var(--color-teal-sunspark-oasis-a-300);
+    --content-assets-accent-3-3: var(--color-teal-sunspark-oasis-a-200);
+    --content-assets-accent-3-4: var(--color-teal-sunspark-oasis-a-100);
+    --content-assets-accent-3-5: var(--color-teal-sunspark-oasis-a-50);
+    --stroke-basic-black: var(--color-neutrals-pure-black-dnt-1000);
+    --stroke-basic-white: var(--color-neutrals-pure-white-dnt-1000);
+    --stroke-neutral-base: var(--color-neutrals-darth-abyss-a-1000);
+    --stroke-neutral-1: var(--color-neutrals-darth-abyss-a-700);
+    --stroke-neutral-2: var(--color-neutrals-darth-abyss-a-500);
+    --stroke-neutral-3: var(--color-neutrals-darth-abyss-a-300);
+    --stroke-neutral-4: var(--color-neutrals-darth-abyss-a-200);
+    --stroke-neutral-5: var(--color-neutrals-darth-abyss-a-100);
+    --stroke-neutral-6: var(--color-neutrals-darth-abyss-a-100);
+    --stroke-brand-base: var(--color-blue-hyperstream-a-1000);
+    --stroke-brand-1: var(--color-blue-hyperstream-a-900);
+    --stroke-brand-2: var(--color-blue-hyperstream-a-800);
+    --stroke-brand-3: var(--color-blue-hyperstream-a-500);
+    --stroke-brand-4: var(--color-blue-hyperstream-a-200);
+    --stroke-brand-5: var(--color-blue-hyperstream-a-100);
+    --stroke-semantic-success-base: var(--color-green-emerald-saber-a-1000);
+    --stroke-focused-highlight: var(--color-blue-hyperstream-a-500);
+    --stroke-semantic-success-1: var(--color-green-emerald-saber-a-900);
+    --stroke-semantic-success-2: var(--color-green-emerald-saber-a-800);
+    --stroke-semantic-success-3: var(--color-green-emerald-saber-a-500);
+    --stroke-semantic-success-4: var(--color-green-emerald-saber-a-200);
+    --stroke-semantic-success-5: var(--color-green-emerald-saber-a-100);
+    --stroke-semantic-warning-base: var(--color-orange-sunstreak-a-1000);
+    --stroke-semantic-warning-1: var(--color-orange-sunstreak-a-900);
+    --stroke-semantic-warning-2: var(--color-orange-sunstreak-a-600);
+    --stroke-semantic-warning-3: var(--color-orange-sunstreak-a-500);
+    --stroke-semantic-warning-4: var(--color-orange-sunstreak-a-200);
+    --stroke-semantic-warning-5: var(--color-orange-sunstreak-a-100);
+    --stroke-semantic-error-base: var(--color-red-crimson-wrath-a-1000);
+    --stroke-semantic-error-1: var(--color-red-crimson-wrath-a-900);
+    --stroke-semantic-error-2: var(--color-red-crimson-wrath-a-800);
+    --stroke-semantic-error-3: var(--color-red-crimson-wrath-a-500);
+    --stroke-semantic-error-4: var(--color-red-crimson-wrath-a-200);
+    --stroke-semantic-error-5: var(--color-red-crimson-wrath-a-100);
+    --stroke-semantic-info-base: var(--color-blue-skybolt-a-1000);
+    --stroke-semantic-info-1: var(--color-blue-skybolt-a-900);
+    --stroke-semantic-info-2: var(--color-blue-skybolt-a-800);
+    --stroke-semantic-info-3: var(--color-blue-skybolt-a-500);
+    --stroke-semantic-info-4: var(--color-blue-skybolt-a-200);
+    --stroke-semantic-info-5: var(--color-blue-skybolt-a-100);
+    --stroke-accent-1-base: var(--color-purple-nexus-a-1000);
+    --stroke-accent-1-1: var(--color-purple-nexus-a-900);
+    --stroke-accent-1-2: var(--color-purple-nexus-a-800);
+    --stroke-accent-1-3: var(--color-purple-nexus-a-500);
+    --stroke-accent-1-4: var(--color-purple-nexus-a-200);
+    --stroke-accent-1-5: var(--color-purple-nexus-a-100);
+    --stroke-accent-2-base: var(--color-pink-plasma-circuit-a-1000);
+    --stroke-accent-2-1: var(--color-pink-plasma-circuit-a-900);
+    --stroke-accent-2-2: var(--color-pink-plasma-circuit-a-800);
+    --stroke-accent-2-3: var(--color-pink-plasma-circuit-a-500);
+    --stroke-accent-2-4: var(--color-pink-plasma-circuit-a-200);
+    --stroke-accent-2-5: var(--color-pink-plasma-circuit-a-100);
+    --stroke-accent-3-base: var(--color-teal-sunspark-oasis-a-1000);
+    --stroke-accent-3-1: var(--color-teal-sunspark-oasis-a-900);
+    --stroke-accent-3-2: var(--color-teal-sunspark-oasis-a-800);
+    --stroke-accent-3-3: var(--color-teal-sunspark-oasis-a-500);
+    --stroke-accent-3-4: var(--color-teal-sunspark-oasis-a-200);
+    --stroke-accent-3-5: var(--color-teal-sunspark-oasis-a-100);
+    --effects-focused-base: var(--color-blue-hyperstream-a-1000);
+    --effects-focused-secondary: var(--color-blue-hyperstream-a-400);
+    --effects-shadows-base-xs: var(--color-neutrals-darth-abyss-a-200);
+    --effects-shadows-base-sm: var(--color-neutrals-darth-abyss-a-300);
+    --effects-shadows-base-base: var(--color-neutrals-darth-abyss-a-400);
+    --effects-shadows-base-md: var(--color-neutrals-darth-abyss-a-500);
+    --effects-shadows-base-lg: var(--color-neutrals-darth-abyss-a-600);
+    --effects-shadows-base-xl: var(--color-neutrals-darth-abyss-a-700);
+    --effects-shadows-base-2-xl: var(--color-neutrals-darth-abyss-a-800);
+    --effects-shadows-inverse-xs: var(--color-neutrals-darth-abyss-a-200);
+    --effects-shadows-inverse-sm: var(--color-neutrals-darth-abyss-a-300);
+    --effects-shadows-inverse-base: var(--color-neutrals-darth-abyss-a-400);
+    --effects-shadows-inverse-md: var(--color-neutrals-darth-abyss-a-500);
+    --effects-shadows-inverse-lg: var(--color-neutrals-darth-abyss-a-600);
+    --effects-shadows-inverse-xl: var(--color-neutrals-darth-abyss-a-700);
+    --effects-shadows-inverse-2-xl: var(--color-neutrals-darth-abyss-a-800);
+    --background-accent-4-base: var(--color-orange-sunstreak-a-1000);
+    --background-accent-4-1: var(--color-orange-sunstreak-a-900);
+    --background-accent-4-2: var(--color-orange-sunstreak-a-700);
+    --background-accent-4-3: var(--color-orange-sunstreak-a-500);
+    --background-accent-4-4: var(--color-orange-sunstreak-a-400);
+    --background-accent-4-5: var(--color-orange-sunstreak-a-200);
+    --stroke-accent-4-base: var(--color-orange-sunstreak-a-1000);
+    --stroke-accent-4-1: var(--color-orange-sunstreak-a-900);
+    --stroke-accent-4-2: var(--color-orange-sunstreak-a-800);
+    --stroke-accent-4-3: var(--color-orange-sunstreak-a-500);
+    --stroke-accent-4-4: var(--color-orange-sunstreak-a-200);
+    --stroke-accent-4-5: var(--color-orange-sunstreak-a-100);
+    --content-text-accent-4-base: var(--color-orange-sunstreak-a-1000);
+    --content-text-accent-4-1: var(--color-orange-sunstreak-a-700);
+    --content-text-accent-4-2: var(--color-orange-sunstreak-a-300);
+    --content-text-accent-4-3: var(--color-orange-sunstreak-a-200);
+    --content-text-accent-4-4: var(--color-orange-sunstreak-a-100);
+    --content-text-accent-4-5: var(--color-orange-sunstreak-a-50);
+    --content-assets-accent-4-base: var(--color-orange-sunstreak-a-1000);
+    --content-assets-accent-4-1: var(--color-orange-sunstreak-a-700);
+    --content-assets-accent-4-2: var(--color-orange-sunstreak-a-300);
+    --content-assets-accent-4-3: var(--color-orange-sunstreak-a-200);
+    --content-assets-accent-4-4: var(--color-orange-sunstreak-a-100);
+    --content-assets-accent-4-5: var(--color-orange-sunstreak-a-50);
+  }
+}
diff --git a/src/assets/icons/close.svg b/src/assets/icons/close.svg
new file mode 100644
index 000000000..baea97aa1
--- /dev/null
+++ b/src/assets/icons/close.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16">
+    <path d="M3.0843 3.0833a.6673.6673 0 0 1 .9433 0L7.9993 7.056l3.9736-3.9717a.6674.6674 0 0 1 .9434 0 .6672.6672 0 0 1 0 .9434L8.9427 7.9993l3.9726 3.9737a.667.667 0 0 1-.4707 1.1387v-.001a.6627.6627 0 0 1-.4717-.1953L7.9993 8.9417l-3.9727 3.9737a.6651.6651 0 0 1-.4707.1953.6627.6627 0 0 1-.4716-.1953.6674.6674 0 0 1 0-.9434l3.9726-3.9726-3.9726-3.9727a.6672.6672 0 0 1 0-.9434Z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/src/data/DataSize/DataSize.story.tsx b/src/data/DataSize/DataSize.story.tsx
index 824d51d1d..f5647562a 100644
--- a/src/data/DataSize/DataSize.story.tsx
+++ b/src/data/DataSize/DataSize.story.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment } from 'react';
+
 import { DataSize } from './DataSize';
 
 export default {
@@ -16,15 +17,15 @@ export const Simple = () => (
     <br />
     <DataSize value="434334434123" />
     <br />
-    <DataSize value={324344535345232} />
+    <DataSize value="324344535345232" />
     <br />
-    <DataSize value={324344535345232482} />
+    <DataSize value="324344535345232482" />
     <br />
-    <DataSize value={324344535345232482281} />
+    <DataSize value="324344535345232482281" />
     <br />
-    <DataSize value={32434453534523248228135} />
+    <DataSize value="32434453534523248228135" />
     <br />
-    <DataSize value={32434453534523248228123412} />
+    <DataSize value="32434453534523248228123412" />
   </Fragment>
 );
 
@@ -40,15 +41,15 @@ export const CustomScale = () => {
       <br />
       <DataSize value="434334434123" scale={scale} />
       <br />
-      <DataSize value={324344535345232} scale={scale} />
+      <DataSize value="324344535345232" scale={scale} />
       <br />
-      <DataSize value={324344535345232482} scale={scale} />
+      <DataSize value="324344535345232482" scale={scale} />
       <br />
-      <DataSize value={324344535345232482281} scale={scale} />
+      <DataSize value="324344535345232482281" scale={scale} />
       <br />
-      <DataSize value={32434453534523248228135} scale={scale} />
+      <DataSize value="32434453534523248228135" scale={scale} />
       <br />
-      <DataSize value={32434453534523248228123412} scale={scale} />
+      <DataSize value="32434453534523248228123412" scale={scale} />
     </Fragment>
   );
 };
diff --git a/src/data/DataSize/DataSize.tsx b/src/data/DataSize/DataSize.tsx
index 368e7ba8a..8b01badf4 100644
--- a/src/data/DataSize/DataSize.tsx
+++ b/src/data/DataSize/DataSize.tsx
@@ -1,5 +1,8 @@
-import React, { FC } from 'react';
-import { formatSize, FormatSizeTypes } from './utils';
+import type { FC } from 'react';
+import React from 'react';
+
+import type { FormatSizeTypes } from './utils';
+import { formatSize } from './utils';
 
 export interface DataSizeProps {
   /**
diff --git a/src/data/DataSize/utils.ts b/src/data/DataSize/utils.ts
index bceb07f8b..25c7e3050 100644
--- a/src/data/DataSize/utils.ts
+++ b/src/data/DataSize/utils.ts
@@ -18,7 +18,7 @@ export function formatSize(
   decimals = 2
 ) {
   let newSize = size;
-  var binaryScale = humanFormat.Scale.create(scale, 1024);
+  const binaryScale = humanFormat.Scale.create(scale, 1024);
 
   if (typeof size === 'string') {
     newSize = parseFloat(size as string);
diff --git a/src/data/DateFormat/DateFormat.story.tsx b/src/data/DateFormat/DateFormat.story.tsx
index cacf5acd5..b2072d1fe 100644
--- a/src/data/DateFormat/DateFormat.story.tsx
+++ b/src/data/DateFormat/DateFormat.story.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { DateFormat } from './DateFormat';
 
 export default {
diff --git a/src/data/DateFormat/DateFormat.tsx b/src/data/DateFormat/DateFormat.tsx
index 2f0e2ce58..a482d6853 100644
--- a/src/data/DateFormat/DateFormat.tsx
+++ b/src/data/DateFormat/DateFormat.tsx
@@ -1,17 +1,19 @@
+import type { FC } from 'react';
 import React, {
-  FC,
-  useState,
   useCallback,
   useEffect,
+  useMemo,
   useRef,
-  useMemo
+  useState
 } from 'react';
-import { formatRelative, getInterval } from './relative';
-import { safeFormat } from './formatting';
-import { twMerge } from 'tailwind-merge';
-import { DateFormatTheme } from './DateFormatTheme';
+
+import { twMerge } from '@/utils';
 import { useComponentTheme } from '@/utils';
 
+import type { DateFormatTheme } from './DateFormatTheme';
+import { safeFormat } from './formatting';
+import { formatRelative, getInterval } from './relative';
+
 export interface DateFormatProps {
   /**
    * Allow the user to toggle between relative and absolute time.
@@ -78,7 +80,7 @@ export const DateFormat: FC<DateFormatProps> = ({
 }) => {
   const [cache, setCache] = useState<string | null>(
     typeof window !== 'undefined'
-      ? window.localStorage.getItem(`DATES_${cacheKey}`) ?? null
+      ? (window.localStorage.getItem(`DATES_${cacheKey}`) ?? null)
       : null
   );
 
diff --git a/src/data/DateFormat/DateFormatTheme.ts b/src/data/DateFormat/DateFormatTheme.ts
index 8183d5578..6be1c85d1 100644
--- a/src/data/DateFormat/DateFormatTheme.ts
+++ b/src/data/DateFormat/DateFormatTheme.ts
@@ -3,16 +3,7 @@ export interface DateFormatTheme {
   interactive: string;
 }
 
-const baseTheme: DateFormatTheme = {
+export const dateFormatTheme: DateFormatTheme = {
   base: 'cursor-text',
   interactive: 'cursor-pointer hover:underline'
 };
-
-export const dateFormatTheme: DateFormatTheme = {
-  ...baseTheme
-};
-
-export const legacyDateFormatTheme: DateFormatTheme = {
-  ...baseTheme,
-  base: [baseTheme.base, 'text-[var(--color-primary)]'].join(' ')
-};
diff --git a/src/data/DateFormat/formatting.ts b/src/data/DateFormat/formatting.ts
index e5e663879..2398f86d0 100644
--- a/src/data/DateFormat/formatting.ts
+++ b/src/data/DateFormat/formatting.ts
@@ -1,4 +1,5 @@
-import { isValid, format as dateFnsFormat } from 'date-fns';
+import { format as dateFnsFormat, isValid } from 'date-fns';
+
 import { formatRelative } from './relative';
 
 export interface SafeFormatOptions {
diff --git a/src/data/Duration/Duration.story.tsx b/src/data/Duration/Duration.story.tsx
index 1dd55e835..2ff4f07c5 100644
--- a/src/data/Duration/Duration.story.tsx
+++ b/src/data/Duration/Duration.story.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment } from 'react';
+
 import { Duration } from './Duration';
 
 export default {
diff --git a/src/data/Duration/Duration.tsx b/src/data/Duration/Duration.tsx
index 8a6d2a452..264f318d6 100644
--- a/src/data/Duration/Duration.tsx
+++ b/src/data/Duration/Duration.tsx
@@ -1,5 +1,8 @@
-import React, { FC } from 'react';
-import { formatDuration, DurationFormatTypes } from './utils';
+import type { FC } from 'react';
+import React from 'react';
+
+import type { DurationFormatTypes } from './utils';
+import { formatDuration } from './utils';
 
 export interface DurationProps {
   /**
diff --git a/src/data/Ellipsis/Ellipsis.story.tsx b/src/data/Ellipsis/Ellipsis.story.tsx
index 5d2abd7c4..5b2fa77b2 100644
--- a/src/data/Ellipsis/Ellipsis.story.tsx
+++ b/src/data/Ellipsis/Ellipsis.story.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { Ellipsis } from './Ellipsis';
 
 export default {
diff --git a/src/data/Ellipsis/Ellipsis.tsx b/src/data/Ellipsis/Ellipsis.tsx
index 18c937cf5..88b6767fc 100644
--- a/src/data/Ellipsis/Ellipsis.tsx
+++ b/src/data/Ellipsis/Ellipsis.tsx
@@ -1,15 +1,17 @@
+import ellipsize from 'ellipsize';
+import type { FC } from 'react';
 import React, {
-  FC,
-  useState,
-  useRef,
-  useEffect,
   useCallback,
-  useMemo
+  useEffect,
+  useMemo,
+  useRef,
+  useState
 } from 'react';
-import ellipsize from 'ellipsize';
-import { EllipsisTheme } from './EllipsisTheme';
+
 import { useComponentTheme } from '@/utils';
 
+import type { EllipsisTheme } from './EllipsisTheme';
+
 export interface EllipsisProps {
   /**
    * The value to ellipsis.
diff --git a/src/data/Ellipsis/EllipsisTheme.ts b/src/data/Ellipsis/EllipsisTheme.ts
index ce8b51441..fcac003e7 100644
--- a/src/data/Ellipsis/EllipsisTheme.ts
+++ b/src/data/Ellipsis/EllipsisTheme.ts
@@ -2,14 +2,6 @@ export interface EllipsisTheme {
   dots: string;
 }
 
-const baseTheme: EllipsisTheme = {
-  dots: 'cursor-pointer opacity-50 text-[unset] p-0 border-[none] outline-hidden'
-};
-
 export const ellipsisTheme: EllipsisTheme = {
-  ...baseTheme
-};
-
-export const legacyEllipsisTheme: EllipsisTheme = {
-  ...baseTheme
+  dots: 'cursor-pointer opacity-50 text-[unset] p-0 border-[none] outline-hidden'
 };
diff --git a/src/data/InfinityList/InfinityList.tsx b/src/data/InfinityList/InfinityList.tsx
index 775817e34..744547cab 100644
--- a/src/data/InfinityList/InfinityList.tsx
+++ b/src/data/InfinityList/InfinityList.tsx
@@ -1,5 +1,8 @@
-import React, { FC, Children, Fragment } from 'react';
-import { useInfinityList, InfinityListInputs } from './useInfinityList';
+import type { FC } from 'react';
+import React, { Children, Fragment } from 'react';
+
+import type { InfinityListInputs } from './useInfinityList';
+import { useInfinityList } from './useInfinityList';
 
 export interface InfinityListProps extends Omit<InfinityListInputs, 'items'> {
   /**
diff --git a/src/data/Pager/Pager.story.tsx b/src/data/Pager/Pager.story.tsx
index 34acbb02b..321edb25b 100644
--- a/src/data/Pager/Pager.story.tsx
+++ b/src/data/Pager/Pager.story.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
-import { Pager } from './Pager';
-import { pagerTheme } from './PagerTheme';
+
+import { Pager } from '@/data';
+import { pagerTheme } from '@/data';
 
 export default {
   title: 'Components/Data/Pager',
@@ -16,7 +17,9 @@ export const ShowPages = () => {
       size={10}
       total={100}
       onPageChange={setPage}
-      displayMode="pages"
+      displayMode="all"
+      startArrow={null}
+      endArrow={null}
     />
   );
 };
diff --git a/src/data/Pager/Pager.tsx b/src/data/Pager/Pager.tsx
index e6dc41e32..01702102d 100644
--- a/src/data/Pager/Pager.tsx
+++ b/src/data/Pager/Pager.tsx
@@ -1,16 +1,19 @@
-import React, { FC, Fragment, ReactNode, useCallback } from 'react';
+import type { FC, ReactNode } from 'react';
+import React, { Fragment, useCallback } from 'react';
+
+import type { PagerTheme } from '@/data';
+import { FUZZY_RANGE, getItemsRange, getPageRange } from '@/data';
+import { Pluralize } from '@/data/Pluralize';
 import { Button } from '@/elements';
 import { Stack } from '@/layout';
-import { Text } from '@/typography';
-import { Pluralize } from '@/data/Pluralize';
+import { Typography } from '@/typography';
+import { useComponentTheme } from '@/utils';
+import { twMerge } from '@/utils';
+
 import EndArrow from './assets/arrow-end.svg?react';
 import NextArrow from './assets/arrow-next.svg?react';
 import PreviousArrow from './assets/arrow-previous.svg?react';
 import StartArrow from './assets/arrow-start.svg?react';
-import { FUZZY_RANGE, getItemsRange, getPageRange } from './utils';
-import { useComponentTheme } from '@/utils';
-import { twMerge } from 'tailwind-merge';
-import { PagerTheme } from './PagerTheme';
 
 export interface PagerProps {
   /**
@@ -128,23 +131,31 @@ export const Pager: FC<PagerProps> = ({
       {(displayMode === 'items' || displayMode === 'all') && (
         <div className={theme.pagerDisplayItems}>
           {pageCount === 1 && total > 0 && (
-            <Text>
+            <Typography variant="body" size="small">
               Showing {total === 1 ? total : `all ${total.toLocaleString()}`}{' '}
               <Pluralize count={total} singular="item" showCount={false} />
-            </Text>
+            </Typography>
           )}
           {pageCount > 1 && (
             <Stack className={theme.itemsDisplay} dense>
-              <Text>
-                <Text className={theme.showPageRange}>
+              <Typography variant="body" size="small">
+                <Typography
+                  variant="body"
+                  size="small"
+                  className={theme.showPageRange}
+                >
                   {startItem.toLocaleString()}-{endItem.toLocaleString()}
-                </Text>{' '}
+                </Typography>{' '}
                 of{' '}
-                <Text className={theme.totalCount}>
+                <Typography
+                  variant="body"
+                  size="small"
+                  className={theme.totalCount}
+                >
                   {total.toLocaleString()}
-                </Text>{' '}
+                </Typography>{' '}
                 <Pluralize count={total} singular="item" showCount={false} />
-              </Text>
+              </Typography>
             </Stack>
           )}
         </div>
@@ -152,7 +163,7 @@ export const Pager: FC<PagerProps> = ({
       {startArrow && (
         <Button
           className={twMerge(theme.control, theme.firstPage)}
-          variant="text"
+          variant="ghost"
           size="small"
           disablePadding
           title="First Page"
@@ -164,7 +175,7 @@ export const Pager: FC<PagerProps> = ({
       )}
       <Button
         className={twMerge(theme.control, theme.prevPage)}
-        variant="text"
+        variant="ghost"
         size="small"
         disablePadding
         title="Previous page"
@@ -182,7 +193,7 @@ export const Pager: FC<PagerProps> = ({
             <Fragment key={i}>
               {i >= startPage && i <= endPage && (
                 <Button
-                  variant="text"
+                  variant="ghost"
                   size="small"
                   disabled={page === i}
                   title={`Page ${(i + 1).toLocaleString()}`}
@@ -206,7 +217,7 @@ export const Pager: FC<PagerProps> = ({
       )}
       <Button
         className={twMerge(theme.control, theme.nextPage)}
-        variant="text"
+        variant="ghost"
         title="Next Page"
         size="small"
         disablePadding
@@ -221,7 +232,7 @@ export const Pager: FC<PagerProps> = ({
           size="small"
           title="Last Page"
           disablePadding
-          variant="text"
+          variant="ghost"
           onClick={() => onPageChange?.(pageCount - 1)}
           disabled={!canNext}
         >
diff --git a/src/data/Pager/PagerTheme.ts b/src/data/Pager/PagerTheme.ts
index dcdb322cc..a7199145c 100644
--- a/src/data/Pager/PagerTheme.ts
+++ b/src/data/Pager/PagerTheme.ts
@@ -19,51 +19,33 @@ export interface PagerTheme {
   nextPage: string;
 }
 
-const baseTheme: PagerTheme = {
-  base: 'items-center flex user-select-none',
+export const pagerTheme: PagerTheme = {
+  base: 'items-center flex user-select-none gap-5',
   pages: {
-    base: 'inline-flex',
+    base: 'inline-flex gap-1 text-sm',
     page: {
-      base: 'py-1',
-      active: 'font-bold'
+      base: `
+        text-xs text-buttons-colors-core-icon-ghost-text-resting py-2 min-w-8 transition-colors border
+        bg-buttons-colors-core-icon-ghost-background-resting hover:bg-buttons-colors-core-icon-ghost-background-hover focus-visible:bg-buttons-colors-core-icon-ghost-background-hover
+        border-buttons-colors-core-icon-ghost-stroke-resting hover:border-buttons-colors-core-icon-ghost-stroke-hover focus-visible:border-buttons-colors-core-icon-ghost-stroke-hover
+      `,
+      active:
+        'text-buttons-colors-core-icon-ghost-text-selected font-bold disabled:cursor-default disabled:opacity-100 disabled:bg-buttons-colors-core-icon-ghost-background-selected disabled:text-buttons-colors-core-icon-ghost-text-selected'
     }
   },
-  ellipsis: 'cursor-pointer',
-  pagerDisplayItems: 'mr-1.5',
-  itemsDisplay: '',
+  ellipsis:
+    'cursor-pointer text-buttons-colors-core-icon-ghost-text-resting min-w-8 flex items-baseline justify-center leading-8',
+  pagerDisplayItems: 'text-xs',
+  itemsDisplay: 'text-buttons-colors-core-icon-ghost-text-selected font-sm',
   showPageRange: '',
   totalCount: '',
-  control: '[&>svg]:w-5 [&>svg]:h-5',
+  control: `
+    min-size-8 p-2 [&>svg]:size-4 text-buttons-colors-core-icon-secondary-assets-resting transition-colors border
+    bg-buttons-colors-core-icon-secondary-background-resting hover:bg-buttons-colors-core-icon-secondary-background-hover focus-visible:bg-buttons-colors-core-icon-secondary-background-hover disabled:bg-buttons-colors-core-icon-secondary-background-resting
+    border-buttons-colors-core-icon-secondary-stroke-resting hover:buttons-colors-core-icon-secondary-stroke-hover focus-visible:buttons-colors-core-icon-secondary-stroke-hover disabled:border-buttons-colors-core-icon-secondary-stroke-resting
+  `,
   firstPage: '',
   prevPage: '',
   lastPage: '',
   nextPage: ''
 };
-
-export const pagerTheme: PagerTheme = {
-  ...(baseTheme as PagerTheme),
-  pages: {
-    ...baseTheme.pages,
-    page: {
-      base: [baseTheme.pages.page.base, 'text-slate-500'].join(' '),
-      active: [baseTheme.pages.page.active, 'text-text-primary!'].join(' ')
-    }
-  },
-  control: [
-    baseTheme.control,
-    'text-slate-200 light:text-slate-400 disabled:light:text-slate-300'
-  ].join(' '),
-  pagerDisplayItems: [baseTheme.pagerDisplayItems, 'text-slate-500'].join(' ')
-};
-
-export const legacyPagerTheme: PagerTheme = {
-  ...(baseTheme as PagerTheme),
-  pages: {
-    ...baseTheme.pages,
-    page: {
-      base: [baseTheme.pages.page.base, 'px-[var(--spacing-sm)]'].join(' '),
-      active: [baseTheme.pages.page.active, 'text-(--input-color)!'].join(' ')
-    }
-  },
-  pagerDisplayItems: ['text-[var(--gray-100)] mr-[var(--spacing-sm)]'].join(' ')
-};
diff --git a/src/data/Pager/index.ts b/src/data/Pager/index.ts
index 088e30d16..ae9cf4742 100644
--- a/src/data/Pager/index.ts
+++ b/src/data/Pager/index.ts
@@ -1,3 +1,3 @@
 export * from './Pager';
-export * from './utils';
 export * from './PagerTheme';
+export * from './utils';
diff --git a/src/data/Pluralize/Pluralize.story.tsx b/src/data/Pluralize/Pluralize.story.tsx
index 844b048d8..3f4fa26ef 100644
--- a/src/data/Pluralize/Pluralize.story.tsx
+++ b/src/data/Pluralize/Pluralize.story.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { Pluralize } from './Pluralize';
 
 export default {
diff --git a/src/data/Pluralize/Pluralize.tsx b/src/data/Pluralize/Pluralize.tsx
index 2960f24fa..c1c7c27c4 100644
--- a/src/data/Pluralize/Pluralize.tsx
+++ b/src/data/Pluralize/Pluralize.tsx
@@ -1,5 +1,8 @@
-import React, { FC, useMemo } from 'react';
-import { pluralize, PluralizeInputs } from './utils';
+import type { FC } from 'react';
+import React, { useMemo } from 'react';
+
+import type { PluralizeInputs } from './utils';
+import { pluralize } from './utils';
 
 export interface PluralizeProps extends PluralizeInputs {
   /**
diff --git a/src/data/Redact/Redact.tsx b/src/data/Redact/Redact.tsx
index 13c873136..79528c5b0 100644
--- a/src/data/Redact/Redact.tsx
+++ b/src/data/Redact/Redact.tsx
@@ -1,9 +1,12 @@
-import React, { FC, useMemo, useState } from 'react';
 import coverup from 'coverup';
-import { twMerge } from 'tailwind-merge';
-import { RedactTheme } from './RedactTheme';
+import type { FC } from 'react';
+import React, { useMemo, useState } from 'react';
+
+import { twMerge } from '@/utils';
 import { useComponentTheme } from '@/utils';
 
+import type { RedactTheme } from './RedactTheme';
+
 export interface RedactProps {
   /**
    * Classname of the element.
diff --git a/src/data/Redact/RedactTheme.ts b/src/data/Redact/RedactTheme.ts
index 5464ab23e..9a1a3598c 100644
--- a/src/data/Redact/RedactTheme.ts
+++ b/src/data/Redact/RedactTheme.ts
@@ -3,16 +3,7 @@ export interface RedactTheme {
   interactive: string;
 }
 
-const baseTheme: RedactTheme = {
+export const redactTheme: RedactTheme = {
   base: 'cursor-text',
   interactive: 'cursor-pointer hover:underline'
 };
-
-export const redactTheme: RedactTheme = {
-  ...baseTheme,
-  base: [baseTheme.base, 'text-text-primary'].join(' ')
-};
-
-export const legacyRedactTheme: RedactTheme = {
-  ...baseTheme
-};
diff --git a/src/data/Sort/DownArrowIcon.tsx b/src/data/Sort/DownArrowIcon.tsx
index f964d1303..c9f5ac0eb 100644
--- a/src/data/Sort/DownArrowIcon.tsx
+++ b/src/data/Sort/DownArrowIcon.tsx
@@ -1,4 +1,5 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
 
 interface DownArrowIconProps {
   className?: string;
diff --git a/src/data/Sort/Sort.story.tsx b/src/data/Sort/Sort.story.tsx
index e8750832b..49096b66b 100644
--- a/src/data/Sort/Sort.story.tsx
+++ b/src/data/Sort/Sort.story.tsx
@@ -1,13 +1,14 @@
 import React, { useState } from 'react';
+
 import { Sort } from './Sort';
-import { SortDirection } from './utils';
+import type { SortDirection } from './utils';
 
 export default {
   title: 'Components/Data/Sort',
   component: Sort
 };
 
-const NeutralIcon = ({ className }) => (
+const NeutralIcon = ({ className }: { className?: string }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="50"
@@ -25,7 +26,7 @@ const NeutralIcon = ({ className }) => (
   </svg>
 );
 
-const CustomIcon = ({ className }) => (
+const CustomIcon = ({ className }: { className?: string }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="50"
diff --git a/src/data/Sort/Sort.tsx b/src/data/Sort/Sort.tsx
index 70be19c4e..824ee9296 100644
--- a/src/data/Sort/Sort.tsx
+++ b/src/data/Sort/Sort.tsx
@@ -1,11 +1,15 @@
-import React, { FC, PropsWithChildren, useCallback } from 'react';
 import { AnimatePresence, motion } from 'motion/react';
-import { DownArrowIcon } from './DownArrowIcon';
-import { getNextDirection, SortDirection } from './utils';
-import { twMerge } from 'tailwind-merge';
-import { SortTheme } from './SortTheme';
+import type { FC, PropsWithChildren } from 'react';
+import React, { useCallback } from 'react';
+
+import { twMerge } from '@/utils';
 import { useComponentTheme } from '@/utils';
 
+import { DownArrowIcon } from './DownArrowIcon';
+import type { SortTheme } from './SortTheme';
+import type { SortDirection } from './utils';
+import { getNextDirection } from './utils';
+
 export interface SortProps extends PropsWithChildren {
   /**
    * Additional css classnames to apply
diff --git a/src/data/Sort/SortTheme.ts b/src/data/Sort/SortTheme.ts
index bba8e2f5e..525edb51b 100644
--- a/src/data/Sort/SortTheme.ts
+++ b/src/data/Sort/SortTheme.ts
@@ -8,25 +8,12 @@ export interface SortTheme {
   };
 }
 
-const baseTheme: SortTheme = {
+export const sortTheme: SortTheme = {
   base: 'cursor-pointer select-none flex items-center relative',
-  disabled: 'cursor-[initial]',
+  disabled: 'cursor-default',
   hasValue: 'cursor-not-allowed',
   icon: {
     base: 'w-4 h-4 align-middle mx-1.5 fill-current',
     ascending: 'rotate-180'
   }
 };
-
-export const sortTheme: SortTheme = {
-  ...baseTheme,
-  base: [baseTheme.base, 'text-text-primary'].join(' ')
-};
-
-export const legacySortTheme: SortTheme = {
-  ...baseTheme,
-  icon: {
-    ...baseTheme.icon,
-    base: 'h-[var(--sort-icon-size)] w-[var(--sort-icon-size)] mx-[var(--spacing-sm)] fill-[var(--sort-icon-color)]'
-  }
-};
diff --git a/src/data/index.ts b/src/data/index.ts
index d847faf05..1b97f328a 100644
--- a/src/data/index.ts
+++ b/src/data/index.ts
@@ -1,10 +1,10 @@
-export * from './Ellipsis';
-export * from './Pluralize';
+export * from '../elements/CommandPalette';
 export * from './DataSize';
-export * from './Redact';
+export * from './DateFormat';
 export * from './Duration';
+export * from './Ellipsis';
 export * from './InfinityList';
-export * from './DateFormat';
-export * from './Sort';
-export * from '../elements/CommandPalette';
 export * from './Pager';
+export * from './Pluralize';
+export * from './Redact';
+export * from './Sort';
diff --git a/src/elements/Arrow/Arrow.story.tsx b/src/elements/Arrow/Arrow.story.tsx
index 47493674f..9495c747c 100644
--- a/src/elements/Arrow/Arrow.story.tsx
+++ b/src/elements/Arrow/Arrow.story.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { Arrow } from './Arrow';
 
 export default {
diff --git a/src/elements/Arrow/Arrow.tsx b/src/elements/Arrow/Arrow.tsx
index f1e022f61..8a486d6a3 100644
--- a/src/elements/Arrow/Arrow.tsx
+++ b/src/elements/Arrow/Arrow.tsx
@@ -1,7 +1,10 @@
-import React, { FC } from 'react';
-import { ArrowTheme } from './ArrowTheme';
+import type { FC } from 'react';
+import React from 'react';
+
 import { useComponentTheme } from '@/utils';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@/utils';
+
+import type { ArrowTheme } from './ArrowTheme';
 
 export interface ArrowProps {
   /**
diff --git a/src/elements/Arrow/ArrowTheme.ts b/src/elements/Arrow/ArrowTheme.ts
index 05759c641..8cc1e4007 100644
--- a/src/elements/Arrow/ArrowTheme.ts
+++ b/src/elements/Arrow/ArrowTheme.ts
@@ -6,20 +6,10 @@ export interface ArrowTheme {
   left: string;
 }
 
-const baseTheme: ArrowTheme = {
+export const arrowTheme: ArrowTheme = {
   base: '',
   up: 'rotate-180',
   down: '',
   left: 'rotate-90',
   right: '-rotate-90'
 };
-
-export const arrowTheme: ArrowTheme = {
-  ...baseTheme,
-  base: [baseTheme.base, 'text-text-primary'].join(' ')
-};
-
-export const legacyArrowTheme: ArrowTheme = {
-  ...baseTheme,
-  base: [baseTheme.base].join(' ')
-};
diff --git a/src/elements/Avatar/Avatar.story.tsx b/src/elements/Avatar/Avatar.story.tsx
index 42ece4132..e5619529c 100644
--- a/src/elements/Avatar/Avatar.story.tsx
+++ b/src/elements/Avatar/Avatar.story.tsx
@@ -1,10 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
+
 import { Avatar } from './Avatar';
 
 export default {
   title: 'Components/Elements/Avatar',
-  component: Avatar
+  component: Avatar,
+  args: {
+    color: 'bg-avatar-colors-background-container-resting'
+  }
 } satisfies Meta<typeof Avatar>;
 
 export const Simple: StoryObj<typeof Avatar> = {
@@ -40,6 +44,15 @@ export const LargeRounded: StoryObj<typeof Avatar> = {
   }
 };
 
+export const Clickable: StoryObj<typeof Avatar> = {
+  args: {
+    name: 'Charlie',
+    size: 50,
+    rounded: true,
+    onClick: () => null
+  }
+};
+
 export const MultipleAvatars: StoryObj<typeof Avatar> = {
   render: args => (
     <div style={{ display: 'flex', gap: '1em' }}>
diff --git a/src/elements/Avatar/Avatar.tsx b/src/elements/Avatar/Avatar.tsx
index 1e2e89992..e89a34ac8 100644
--- a/src/elements/Avatar/Avatar.tsx
+++ b/src/elements/Avatar/Avatar.tsx
@@ -1,9 +1,12 @@
-import React, { FC, LegacyRef, forwardRef, useMemo } from 'react';
-import getInitials from 'name-initials';
 import { generateColor } from '@marko19907/string-to-color';
-import { twMerge } from 'tailwind-merge';
+import getInitials from 'name-initials';
+import type { FC, LegacyRef } from 'react';
+import React, { forwardRef, useMemo } from 'react';
+
+import { twMerge } from '@/utils';
 import { useComponentTheme } from '@/utils';
-import { AvatarTheme } from './AvatarTheme';
+
+import type { AvatarTheme } from './AvatarTheme';
 
 export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
@@ -98,7 +101,12 @@ export const Avatar: FC<AvatarProps> & AvatarRef = forwardRef<
     return (
       <div
         {...rest}
-        className={twMerge(theme.base, rounded && theme.rounded, className)}
+        className={twMerge(
+          theme.base,
+          rounded && theme.rounded,
+          rest.onClick && theme.clickable,
+          className
+        )}
         style={{
           width: `${size}px`,
           height: `${size}px`,
diff --git a/src/elements/Avatar/AvatarTheme.ts b/src/elements/Avatar/AvatarTheme.ts
index d57a44d1b..130fad1ed 100644
--- a/src/elements/Avatar/AvatarTheme.ts
+++ b/src/elements/Avatar/AvatarTheme.ts
@@ -1,22 +1,20 @@
 export interface AvatarTheme {
   base: string;
+  clickable: string;
   rounded: string;
 }
 
-const baseTheme: AvatarTheme = {
-  base: 'flex justify-center items-center bg-cover bg-center font-bold',
-  rounded: 'rounded-[50%]'
-};
-
 export const avatarTheme: AvatarTheme = {
-  ...baseTheme,
-  base: [baseTheme.base, 'text-white'].join(' ')
-};
-
-export const legacyAvatarTheme: AvatarTheme = {
-  ...baseTheme,
-  base: [
-    baseTheme.base,
-    'text-[var(--avatar-initials-color)] [border:_var(--avatar-border)]'
-  ].join(' ')
+  base: `
+    relative flex justify-center items-center bg-cover bg-center font-bold transition-colors
+    after:absolute after:inset-0 after:border
+    bg-avatar-colors-background-container-resting 
+    after:border-avatar-colors-stroke-container-resting
+  `,
+  clickable: `
+    hover:bg-avatar-colors-background-container-hover hover:after:border-avatar-colors-stroke-container-hover
+    focus-visible:bg-avatar-colors-background-container-hover focus-visible:after:border-avatar-colors-stroke-container-hover
+    cursor-pointer
+  `,
+  rounded: 'rounded-full after:rounded-full'
 };
diff --git a/src/elements/AvatarGroup/AvatarGroup.story.tsx b/src/elements/AvatarGroup/AvatarGroup.story.tsx
index 1de2cf58b..6e647ce38 100644
--- a/src/elements/AvatarGroup/AvatarGroup.story.tsx
+++ b/src/elements/AvatarGroup/AvatarGroup.story.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { Avatar } from '../Avatar';
 import { AvatarGroup } from './AvatarGroup';
 
diff --git a/src/elements/AvatarGroup/AvatarGroup.tsx b/src/elements/AvatarGroup/AvatarGroup.tsx
index 463797277..26f054d07 100644
--- a/src/elements/AvatarGroup/AvatarGroup.tsx
+++ b/src/elements/AvatarGroup/AvatarGroup.tsx
@@ -1,8 +1,11 @@
-import React, { Children, forwardRef, Ref } from 'react';
+import type { Ref } from 'react';
+import React, { Children, forwardRef } from 'react';
+
 import { useInfinityList } from '@/data';
-import { AvatarGroupTheme } from './AvatarGroupTheme';
 import { useComponentTheme } from '@/utils';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@/utils';
+
+import type { AvatarGroupTheme } from './AvatarGroupTheme';
 
 export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
diff --git a/src/elements/AvatarGroup/AvatarGroupTheme.ts b/src/elements/AvatarGroup/AvatarGroupTheme.ts
index 3942f1110..b473d2e8b 100644
--- a/src/elements/AvatarGroup/AvatarGroupTheme.ts
+++ b/src/elements/AvatarGroup/AvatarGroupTheme.ts
@@ -4,21 +4,8 @@ export interface AvatarGroupTheme {
   overflow: string;
 }
 
-const baseTheme: AvatarGroupTheme = {
-  base: 'flex items-center',
+export const avatarGroupTheme: AvatarGroupTheme = {
+  base: 'flex items-center text-avatar-colors-text-resting',
   avatar: '-ml-2.5',
   overflow: 'ml-[5px]'
 };
-
-export const avatarGroupTheme: AvatarGroupTheme = {
-  ...baseTheme,
-  base: [baseTheme.base, 'text-text-primary'].join(' ')
-};
-
-export const legacyAvatarGroupTheme: AvatarGroupTheme = {
-  ...baseTheme,
-  base: [
-    baseTheme.base,
-    'text-[var(--avatar-initials-color)] border-[var(--avatar-border)]'
-  ].join(' ')
-};
diff --git a/src/elements/Badge/Badge.story.tsx b/src/elements/Badge/Badge.story.tsx
index 633b83b22..e08a6f2fc 100644
--- a/src/elements/Badge/Badge.story.tsx
+++ b/src/elements/Badge/Badge.story.tsx
@@ -1,6 +1,7 @@
+import type { FC } from 'react';
 import { Fragment } from 'react';
+
 import { Notifications, NotificationsContext } from '../../layers';
-import { Text } from '../../typography';
 import { Button } from '../Button';
 import { Badge } from './Badge';
 
@@ -59,7 +60,7 @@ export const Custom = () => (
           {({ notifyError }) => (
             <Fragment>
               <Button
-                color="error"
+                color="destructive"
                 onClick={() => notifyError('You have 10 alerts!')}
               >
                 Alerts
@@ -72,7 +73,10 @@ export const Custom = () => (
   </>
 );
 
-const NotificationIcon = ({ height, width }) => (
+const NotificationIcon: FC<{
+  height?: number;
+  width?: number;
+}> = ({ height, width }) => (
   <div>
     <svg
       xmlns="http://www.w3.org/2000/svg"
diff --git a/src/elements/Badge/Badge.tsx b/src/elements/Badge/Badge.tsx
index f5e44bb4c..4b7c6d497 100644
--- a/src/elements/Badge/Badge.tsx
+++ b/src/elements/Badge/Badge.tsx
@@ -1,19 +1,18 @@
-import React, { FC, forwardRef, LegacyRef } from 'react';
 import { motion } from 'motion/react';
-import { BadgeTheme } from './BadgeTheme';
-import { useComponentTheme } from '@/utils';
-import { twMerge } from 'tailwind-merge';
+import type { FC, LegacyRef } from 'react';
+import React, { forwardRef } from 'react';
 
-export type BadgeColor = 'default' | 'primary' | 'secondary' | 'error';
+import { useComponentTheme } from '@/utils';
+import { twMerge } from '@/utils';
 
-export type BadgePlacement =
-  | 'top-start'
-  | 'top-end'
-  | 'bottom-end'
-  | 'bottom-start';
+import type {
+  BadgeColorTheme,
+  BadgePlacementTheme,
+  BadgeTheme
+} from './BadgeTheme';
 
 export interface BadgeProps
-  extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'content'> {
+  extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'content' | 'color'> {
   /**
    * The content of the badge.
    */
@@ -22,7 +21,7 @@ export interface BadgeProps
   /**
    * The color of the badge.
    */
-  color?: BadgeColor | string;
+  color?: keyof BadgeColorTheme;
 
   /**
    * Whether to disable the margins.
@@ -37,7 +36,7 @@ export interface BadgeProps
   /**
    * The placement of the badge.
    */
-  placement?: BadgePlacement;
+  placement?: keyof BadgePlacementTheme;
 
   /**
    * Theme for the Budge.
diff --git a/src/elements/Badge/BadgeTheme.ts b/src/elements/Badge/BadgeTheme.ts
index b409c8c2d..2d89bbc03 100644
--- a/src/elements/Badge/BadgeTheme.ts
+++ b/src/elements/Badge/BadgeTheme.ts
@@ -1,28 +1,32 @@
+export interface BadgeColorTheme {
+  default: string;
+  primary: string;
+  secondary: string;
+  error: string;
+  [key: string]: string;
+}
+
+export interface BadgePlacementTheme {
+  'top-start': string;
+  'top-end': string;
+  'bottom-start': string;
+  'bottom-end': string;
+}
+
 export interface BadgeTheme {
   base: string;
   disableMargins: string;
   badge: string;
   position: string;
-  colors: {
-    default: string;
-    primary: string;
-    secondary: string;
-    error: string;
-    [key: string]: string;
-  };
-  positions: {
-    'top-start': string;
-    'top-end': string;
-    'bottom-start': string;
-    'bottom-end': string;
-  };
+  colors: BadgeColorTheme;
+  positions: BadgePlacementTheme;
 }
 
-const baseTheme: Partial<BadgeTheme> = {
+export const badgeTheme: BadgeTheme = {
   base: 'relative inline-flex align-middle shrink-0 mx-2 my-0',
   disableMargins: 'm-0',
   badge: `flex flex-row flex-wrap justify-center content-center items-center absolute box-border
-   leading-none text-sm p-1.5 w-[18px] h-[18px] z-1 rounded-[50%] pointer-events-none `,
+   leading-none text-xs p-1.5 w-[18px] h-[18px] z-1 rounded-[50%] pointer-events-none `,
   position: 'translate-x-2/4 -translate-y-2/4 origin-[100%_0%] right-0 top-0',
   positions: {
     'top-start':
@@ -33,40 +37,11 @@ const baseTheme: Partial<BadgeTheme> = {
       'bottom-0 left-0 -translate-x-2/4 translate-y-2/4 origin-[0%_100%]',
     'bottom-end':
       'bottom-0 right-0 translate-x-2/4 translate-y-2/4 origin-[100%_100%]'
-  }
-};
-
-export const badgeTheme: BadgeTheme = {
-  base: baseTheme.base,
-  disableMargins: baseTheme.disableMargins,
-  badge: baseTheme.badge,
-  position: baseTheme.position,
-  positions: baseTheme.positions,
-  colors: {
-    default: 'bg-white text-black',
-    primary: 'bg-primary text-text-primary',
-    secondary: 'bg-secondary text-text-primary',
-    error: 'bg-error text-text-primary'
-  }
-};
-
-export const legacyBadgeTheme: BadgeTheme = {
-  base: baseTheme.base,
-  disableMargins: baseTheme.disableMargins,
-  badge: [
-    baseTheme.badge,
-    'p-[var(--spacing-xs)] rounded-[var(--badge-border-radius)] text-[var(--font-size-sm)]'
-  ].join(' '),
-  position: baseTheme.position,
-  positions: baseTheme.positions,
+  },
   colors: {
-    default:
-      'bg-[var(--badge-color-background-default)] text-[var(--badge-color-default)]',
-    primary:
-      'bg-[var(--badge-color-background-primary)] text-[var(--badge-color-primary)]',
-    secondary:
-      'bg-[var(--badge-color-background-secondary)] text-[var(--badge-color-secondary)]',
-    error:
-      'bg-[var(--badge-color-background-error)] text-[var(--badge-color-error)]'
+    default: 'bg-background-neutral-raised-base text-content-text-inverse-base',
+    primary: 'bg-background-brand-base text-content-text-inverse-base',
+    secondary: 'bg-background-neutral-raised-3 text-content-text-inverse-base',
+    error: 'bg-background-semantic-error-base text-content-text-inverse-base'
   }
 };
diff --git a/src/elements/Button/Button.story.tsx b/src/elements/Button/Button.story.tsx
index 5a8a76d51..7acfc8142 100644
--- a/src/elements/Button/Button.story.tsx
+++ b/src/elements/Button/Button.story.tsx
@@ -1,10 +1,10 @@
-import { Button } from './Button';
-import {
-  extendTheme,
-  PartialReablocksTheme
-} from '../../utils/Theme/themes/extendTheme';
+import { cn } from '@/utils';
+
 import { ThemeProvider } from '../../utils/Theme/ThemeProvider';
+import type { PartialReablocksTheme } from '../../utils/Theme/themes/extendTheme';
+import { extendTheme } from '../../utils/Theme/themes/extendTheme';
 import { theme } from '../../utils/Theme/themes/theme';
+import { Button } from './Button';
 
 export default {
   title: 'Components/Elements/Button',
@@ -12,76 +12,193 @@ export default {
 };
 
 export const Variants = () => (
-  <div style={{ display: 'flex', gap: 10 }}>
-    <Button variant="filled">Filled</Button>
-    <Button variant="outline">Outline</Button>
-    <Button variant="text">Text</Button>
+  <div className="flex items-center gap-2">
+    <Button variant="filled" color="primary">
+      Filled
+    </Button>
+    <Button variant="outline" color="primary">
+      Outline
+    </Button>
+    <Button variant="text" color="primary">
+      Text
+    </Button>
+    <Button variant="ghost" color="primary">
+      Ghost
+    </Button>
   </div>
 );
 
 export const Colors = () => (
-  <div className="light:bg-white p-24" style={{ display: 'flex', gap: 10 }}>
-    <Button>Default</Button>
-    <Button color="primary">Primary</Button>
-    <Button color="secondary">Secondary</Button>
-    <Button color="success">Success</Button>
-    <Button color="warning">Warning</Button>
-    <Button color="error">Error</Button>
-    <Button disabled>Disabled</Button>
-  </div>
-);
-
-export const TextColors = () => (
-  <div style={{ display: 'flex', gap: 10 }}>
-    <Button variant="text">Default</Button>
-    <Button variant="text" color="primary">
+  <div className="grid grid-cols-4 gap-2">
+    <div>Filled</div>
+    <Button color="primary" variant="filled" startAdornment={<BellIcon />}>
       Primary
     </Button>
-    <Button variant="text" color="secondary">
+    <Button color="secondary" variant="filled" startAdornment={<BellIcon />}>
       Secondary
     </Button>
-    <Button variant="text" color="success">
-      Success
+    <Button color="destructive" variant="filled" startAdornment={<BellIcon />}>
+      Destructive
     </Button>
-    <Button variant="text" color="warning">
-      Warning
+    <div>Outlined</div>
+    <Button color="primary" variant="outline" startAdornment={<BellIcon />}>
+      Primary
     </Button>
-    <Button variant="text" color="error">
-      Error
+    <Button color="secondary" variant="outline" startAdornment={<BellIcon />}>
+      Secondary
     </Button>
-    <Button variant="text" disabled>
-      Disabled
+    <Button color="destructive" variant="outline" startAdornment={<BellIcon />}>
+      Destructive
+    </Button>
+    <div>Text</div>
+    <Button color="primary" variant="text" startAdornment={<BellIcon />}>
+      Primary
+    </Button>
+    <Button color="secondary" variant="text" startAdornment={<BellIcon />}>
+      Secondary
+    </Button>
+    <Button color="destructive" variant="text" startAdornment={<BellIcon />}>
+      Destructive
+    </Button>
+    <div>Ghost</div>
+    <Button color="primary" variant="ghost" startAdornment={<BellIcon />}>
+      Primary
+    </Button>
+    <Button color="secondary" variant="ghost" startAdornment={<BellIcon />}>
+      Secondary
+    </Button>
+    <Button color="destructive" variant="ghost" startAdornment={<BellIcon />}>
+      Destructive
     </Button>
   </div>
 );
 
 export const Disabled = () => (
-  <div style={{ display: 'flex', gap: 10 }}>
-    <Button variant="filled" disabled>
-      Filled
-    </Button>
-    <Button variant="outline" disabled>
-      Outline
-    </Button>
-    <Button variant="text" disabled>
-      Text
-    </Button>
+  <div className="p-24 flex gap-2 flex-row">
+    <div className="flex flex-col gap-2">
+      <Button
+        disabled
+        color="primary"
+        variant="filled"
+        startAdornment={<BellIcon />}
+      >
+        Primary
+      </Button>
+      <Button
+        disabled
+        color="primary"
+        variant="outline"
+        startAdornment={<BellIcon />}
+      >
+        Primary
+      </Button>
+      <Button
+        disabled
+        color="primary"
+        variant="text"
+        startAdornment={<BellIcon />}
+      >
+        Primary
+      </Button>
+      <Button
+        disabled
+        color="primary"
+        variant="ghost"
+        startAdornment={<BellIcon />}
+      >
+        Primary
+      </Button>
+    </div>
+    <div className="flex flex-col gap-2">
+      <Button
+        disabled
+        color="secondary"
+        variant="filled"
+        startAdornment={<BellIcon />}
+      >
+        Secondary
+      </Button>
+      <Button
+        disabled
+        color="secondary"
+        variant="outline"
+        startAdornment={<BellIcon />}
+      >
+        Secondary
+      </Button>
+      <Button
+        disabled
+        color="secondary"
+        variant="text"
+        startAdornment={<BellIcon />}
+      >
+        Secondary
+      </Button>
+      <Button
+        disabled
+        color="secondary"
+        variant="ghost"
+        startAdornment={<BellIcon />}
+      >
+        Secondary
+      </Button>
+    </div>
+    <div className="flex flex-col gap-2">
+      <Button
+        disabled
+        color="destructive"
+        variant="filled"
+        startAdornment={<BellIcon />}
+      >
+        Destructive
+      </Button>
+      <Button
+        disabled
+        color="destructive"
+        variant="outline"
+        startAdornment={<BellIcon />}
+      >
+        Destructive
+      </Button>
+      <Button
+        disabled
+        color="destructive"
+        variant="text"
+        startAdornment={<BellIcon />}
+      >
+        Destructive
+      </Button>
+      <Button
+        disabled
+        color="destructive"
+        variant="ghost"
+        startAdornment={<BellIcon />}
+      >
+        Destructive
+      </Button>
+    </div>
   </div>
 );
 
 export const Sizes = () => (
   <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-    <Button size="small">Small</Button>
-    <Button size="medium">Medium</Button>
-    <Button size="large">Large</Button>
+    <Button color="primary" size="small" startAdornment={<BellIcon />}>
+      Small
+    </Button>
+    <Button color="primary" size="medium" startAdornment={<BellIcon />}>
+      Medium
+    </Button>
+    <Button color="primary" size="large" startAdornment={<BellIcon />}>
+      Large
+    </Button>
   </div>
 );
 
 export const FullWidth = () => (
-  <div
-    style={{ display: 'flex', width: '400px', alignItems: 'center', gap: 10 }}
-  >
-    <Button fullWidth>Full Width</Button>
+  <div className="flex w-[400px] items-center gap-2">
+    <Button color="primary" fullWidth>
+      Full Width
+    </Button>
   </div>
 );
 
@@ -124,17 +241,17 @@ export const CustomTheme = () => {
   const customTheme: PartialReablocksTheme = {
     components: {
       button: {
-        base: 'bg-lime-600 text-gray-300',
+        base: 'transition-colors text-neutrals-pure-white-dnt-900',
         sizes: {
           small: 'p-2',
           medium: 'p-3',
           large: 'p-4'
         },
         colors: {
-          default: {
-            filled: 'bg-lime-600 hover:bg-lime-700',
-            outline: 'border-lime-600',
-            text: 'text-gray-300'
+          primary: {
+            filled: 'bg-green-ion-sprout-500 hover:bg-green-ion-sprout-700',
+            outline: 'border-green-ion-sprout-600',
+            text: 'text-neutrals-pure-white-dnt-900'
           }
         }
       }
@@ -142,7 +259,14 @@ export const CustomTheme = () => {
   };
 
   return (
-    <ThemeProvider theme={extendTheme(theme, customTheme)}>
+    <ThemeProvider
+      theme={extendTheme(theme, customTheme, (source, target) => {
+        if (typeof source === 'string' && typeof target === 'string') {
+          return cn(source, target);
+        }
+        return undefined;
+      })}
+    >
       <div style={{ display: 'flex', gap: 10 }}>
         <Button variant="filled">Filled</Button>
         <Button variant="outline">Outline</Button>
@@ -164,7 +288,8 @@ export const CustomColor = () => {
       button: {
         colors: {
           gradient: {
-            filled: 'bg-linear-to-r from-cyan-500 to-blue-500'
+            filled:
+              'bg-linear-to-r from-blue-skybolt-a-500 to-blue-hyperstream-500'
           }
         }
       }
@@ -186,12 +311,13 @@ export const CustomVariant = () => {
           gradient: 'border rounded-lg'
         },
         colors: {
-          default: {
-            gradient: 'bg-linear-to-r from-cyan-500 to-blue-500 border-blue-500'
-          },
           primary: {
             gradient:
-              'bg-linear-to-r from-violet-500 to-fuchsia-500 border-violet-500'
+              'bg-linear-to-r from-blue-skybolt-a-500 to-blue-hyperstream-500 border-blue-hyperstream-500'
+          },
+          secondary: {
+            gradient:
+              'bg-linear-to-r from-pink-plasma-circuit-500 to-purple-fuchsia-a-500 border-pink-plasma-circuit-500'
           }
         }
       }
@@ -201,8 +327,10 @@ export const CustomVariant = () => {
   return (
     <ThemeProvider theme={extendTheme(theme, customTheme)}>
       <div style={{ display: 'flex', gap: 10 }}>
-        <Button variant="gradient">Gradient - Default</Button>
         <Button variant="gradient" color="primary">
+          Gradient - Default
+        </Button>
+        <Button variant="gradient" color="secondary">
           Gradient - Primary
         </Button>
       </div>
@@ -215,8 +343,8 @@ export const CustomSize = () => {
     components: {
       button: {
         sizes: {
-          xsmall: 'text-xs px-1 py-0.5',
-          xlarge: 'text-2xl px-6 py-3'
+          xsmall: 'text-xxs px-1 py-0.5',
+          xlarge: 'text-xl px-6 py-3'
         }
       }
     }
diff --git a/src/elements/Button/Button.tsx b/src/elements/Button/Button.tsx
index e37032d7b..f75e6523d 100644
--- a/src/elements/Button/Button.tsx
+++ b/src/elements/Button/Button.tsx
@@ -1,36 +1,37 @@
-import React, { FC, forwardRef, LegacyRef, useContext } from 'react';
 import { motion } from 'motion/react';
-import { ButtonGroupContext } from './ButtonGroupContext';
+import type { FC, LegacyRef } from 'react';
+import React, { forwardRef, useContext } from 'react';
+
 import { useComponentTheme } from '@/utils';
-import { twMerge } from 'tailwind-merge';
-import { ButtonTheme } from './ButtonTheme';
+import { twMerge } from '@/utils';
+
+import { ButtonGroupContext } from './ButtonGroupContext';
+import type {
+  ButtonColorTheme,
+  ButtonSizeTheme,
+  ButtonTheme,
+  ButtonVariantTheme
+} from './ButtonTheme';
 
 export interface ButtonProps
   extends Omit<
     React.ButtonHTMLAttributes<HTMLButtonElement>,
-    'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'
+    'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag' | 'color'
   > {
   /**
    * Color variation of the button.
    */
-  color?:
-    | 'default'
-    | 'primary'
-    | 'secondary'
-    | 'error'
-    | 'success'
-    | 'warning'
-    | string;
+  color?: keyof ButtonColorTheme;
 
   /**
    * Style variant of the button.
    */
-  variant?: 'filled' | 'outline' | 'text' | string;
+  variant?: keyof ButtonVariantTheme;
 
   /**
    * The size variation of the button.
    */
-  size?: 'small' | 'medium' | 'large' | string;
+  size?: keyof ButtonSizeTheme;
 
   /**
    * If true, the button will take up the full width of its container.
@@ -49,9 +50,15 @@ export interface ButtonProps
 
   /**
    * If true, the animation of the button will be disabled.
+   * @deprecated
    */
   disableAnimation?: boolean;
 
+  /**
+   * If false, the animation of the button will be disabled.
+   */
+  animated?: boolean;
+
   /**
    * Element to display before the Button content.
    */
@@ -78,12 +85,13 @@ export interface ButtonRef {
 export const Button: FC<ButtonProps & ButtonRef> = forwardRef(
   (
     {
-      color = 'default',
+      color = 'primary',
       variant = 'filled',
       children,
       fullWidth,
       size = 'medium',
       disableAnimation,
+      animated = true,
       className,
       disableMargins,
       disablePadding,
@@ -109,7 +117,9 @@ export const Button: FC<ButtonProps & ButtonRef> = forwardRef(
         type={type}
         disabled={disabled}
         ref={ref}
-        whileTap={{ scale: disabled || disableAnimation ? 1 : 0.9 }}
+        whileTap={{
+          scale: disabled || disableAnimation || !animated ? 1 : 0.9
+        }}
         data-variant={groupVariant || variant}
         className={twMerge(
           theme.base,
@@ -129,8 +139,8 @@ export const Button: FC<ButtonProps & ButtonRef> = forwardRef(
           <div
             className={twMerge(
               theme.adornment.base,
-              theme.adornment.start,
-              theme.adornment.sizes[size]
+              theme.adornment.sizes[size],
+              theme.adornment.start[size]
             )}
           >
             {startAdornment}
@@ -141,8 +151,8 @@ export const Button: FC<ButtonProps & ButtonRef> = forwardRef(
           <div
             className={twMerge(
               theme.adornment.base,
-              theme.adornment.end,
-              theme.adornment.sizes[size]
+              theme.adornment.sizes[size],
+              theme.adornment.end[size]
             )}
           >
             {endAdornment}
diff --git a/src/elements/Button/ButtonGroup.story.tsx b/src/elements/Button/ButtonGroup.story.tsx
index b21666883..d94cba3e1 100644
--- a/src/elements/Button/ButtonGroup.story.tsx
+++ b/src/elements/Button/ButtonGroup.story.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import { ButtonGroup } from './ButtonGroup';
+
 import { Button } from './Button';
+import { ButtonGroup } from './ButtonGroup';
 
 export default {
   title: 'Components/Elements/Button/Group',
@@ -49,6 +50,20 @@ export const Text = () => {
   );
 };
 
+export const Ghost = () => {
+  return (
+    <>
+      <ButtonGroup variant="ghost">
+        <Button>1</Button>
+        <Button>2</Button>
+        <Button>3</Button>
+        <Button>4</Button>
+        <Button>5</Button>
+      </ButtonGroup>
+    </>
+  );
+};
+
 export const Single = () => {
   return (
     <>
@@ -65,6 +80,11 @@ export const Single = () => {
       <ButtonGroup variant="text">
         <Button>One</Button>
       </ButtonGroup>
+      <br />
+      <br />
+      <ButtonGroup variant="ghost">
+        <Button>One</Button>
+      </ButtonGroup>
     </>
   );
 };
@@ -88,43 +108,11 @@ export const Double = () => {
         <Button>One</Button>
         <Button>Two</Button>
       </ButtonGroup>
-    </>
-  );
-};
-
-export const Colors = () => {
-  return (
-    <>
-      <ButtonGroup variant="filled">
-        <Button>Default</Button>
-        <Button color="primary">Primary</Button>
-        <Button color="secondary">Secondary</Button>
-        <Button color="success">Success</Button>
-        <Button color="warning">Warning</Button>
-        <Button color="error">Error</Button>
-        <Button disabled>Disabled</Button>
-      </ButtonGroup>
-      <br />
-      <br />
-      <ButtonGroup variant="outline">
-        <Button>Default</Button>
-        <Button color="primary">Primary</Button>
-        <Button color="secondary">Secondary</Button>
-        <Button color="success">Success</Button>
-        <Button color="warning">Warning</Button>
-        <Button color="error">Error</Button>
-        <Button disabled>Disabled</Button>
-      </ButtonGroup>
       <br />
       <br />
-      <ButtonGroup variant="text">
-        <Button>Default</Button>
-        <Button color="primary">Primary</Button>
-        <Button color="secondary">Secondary</Button>
-        <Button color="success">Success</Button>
-        <Button color="warning">Warning</Button>
-        <Button color="error">Error</Button>
-        <Button disabled>Disabled</Button>
+      <ButtonGroup variant="ghost">
+        <Button>One</Button>
+        <Button>Two</Button>
       </ButtonGroup>
     </>
   );
diff --git a/src/elements/Button/ButtonGroup.tsx b/src/elements/Button/ButtonGroup.tsx
index 95833f8dc..cefe75c9f 100644
--- a/src/elements/Button/ButtonGroup.tsx
+++ b/src/elements/Button/ButtonGroup.tsx
@@ -1,8 +1,8 @@
-import React, { FC, useMemo } from 'react';
-import {
-  ButtonGroupContext,
-  ButtonGroupContextProps
-} from './ButtonGroupContext';
+import type { FC } from 'react';
+import React, { useMemo } from 'react';
+
+import type { ButtonGroupContextProps } from './ButtonGroupContext';
+import { ButtonGroupContext } from './ButtonGroupContext';
 
 export interface ButtonGroupProps extends ButtonGroupContextProps {
   /**
diff --git a/src/elements/Button/ButtonGroupContext.ts b/src/elements/Button/ButtonGroupContext.ts
index a104d05fd..4028d23d0 100644
--- a/src/elements/Button/ButtonGroupContext.ts
+++ b/src/elements/Button/ButtonGroupContext.ts
@@ -1,10 +1,10 @@
-import { ReactNode, createContext } from 'react';
+import { createContext } from 'react';
 
 export interface ButtonGroupContextProps {
   /**
    * Style variant of the buttons.
    */
-  variant?: 'filled' | 'outline' | 'text';
+  variant?: 'filled' | 'outline' | 'text' | 'ghost';
 
   /**
    * The size variation of the buttons.
diff --git a/src/elements/Button/ButtonTheme.ts b/src/elements/Button/ButtonTheme.ts
index 703f4c9cf..0271f2dec 100644
--- a/src/elements/Button/ButtonTheme.ts
+++ b/src/elements/Button/ButtonTheme.ts
@@ -1,3 +1,25 @@
+export interface ButtonVariantTheme {
+  filled: string;
+  outline: string;
+  text: string;
+  ghost: string;
+  [key: string]: string;
+}
+
+export interface ButtonSizeTheme {
+  small: string;
+  medium: string;
+  large: string;
+  [key: string]: string;
+}
+
+export interface ButtonColorTheme {
+  primary: ButtonVariantTheme;
+  secondary: ButtonVariantTheme;
+  destructive: ButtonVariantTheme;
+  [key: string]: ButtonVariantTheme;
+}
+
 export interface ButtonTheme {
   base: string;
   disabled: string;
@@ -6,82 +28,25 @@ export interface ButtonTheme {
   groupText: string;
   adornment: {
     base: string;
-    start: string;
-    end: string;
-    sizes: {
-      small: string;
-      medium: string;
-      large: string;
-      [key: string]: string;
-    };
-  };
-  variants: {
-    filled: string;
-    outline: string;
-    text: string;
-    [key: string]: string;
-  };
-  colors: {
-    default: {
-      filled: string;
-      outline: string;
-      text: string;
-      [key: string]: string;
-    };
-    primary: {
-      filled: string;
-      outline: string;
-      text: string;
-      [key: string]: string;
-    };
-    secondary: {
-      filled: string;
-      outline: string;
-      text: string;
-      [key: string]: string;
-    };
-    success: {
-      filled: string;
-      outline: string;
-      text: string;
-      [key: string]: string;
-    };
-    warning: {
-      filled: string;
-      outline: string;
-      text: string;
-      [key: string]: string;
-    };
-    error: {
-      filled: string;
-      outline: string;
-      text: string;
-      [key: string]: string;
-    };
-    [key: string]: {
-      filled: string;
-      outline: string;
-      text: string;
-      [key: string]: string;
-    };
-  };
-  sizes: {
-    small: string;
-    medium: string;
-    large: string;
-    [key: string]: string;
-  };
-  iconSizes: {
-    small: string;
-    medium: string;
-    large: string;
-    [key: string]: string;
+    start: ButtonSizeTheme;
+    end: ButtonSizeTheme;
+    sizes: ButtonSizeTheme;
   };
+  variants: ButtonVariantTheme;
+  colors: ButtonColorTheme;
+  sizes: ButtonSizeTheme;
+  iconSizes: ButtonSizeTheme;
 }
 
-const baseTheme: Partial<ButtonTheme> = {
-  base: 'inline-flex whitespace-no-wrap select-none items-center justify-center px-2.5 py-1 rounded-xs font-sans cursor-pointer',
-  disabled: 'disabled:cursor-not-allowed',
+export const buttonTheme: ButtonTheme = {
+  base: `
+    inline-flex items-center justify-center font-sans 
+    cursor-pointer font-semibold whitespace-nowrap 
+    rounded-(--buttons-details-corner-radius-base) font-semibold cursor-pointer select-none transition-colors [&_svg]:transition-all focus-visible:outline-none
+  `,
+  disabled: `
+    disabled:opacity-40 disabled:cursor-not-allowed 
+  `,
   fullWidth: 'flex w-full',
   group:
     'rounded-none first:rounded-s last:rounded-e border-s-0 first:border-s',
@@ -89,165 +54,121 @@ const baseTheme: Partial<ButtonTheme> = {
     'border border-y-transparent border-l-transparent last:border-r-transparent hover:bg-initial',
   adornment: {
     base: 'flex',
-    start: 'pr-1',
-    end: 'pl-1',
-    sizes: {
-      small: '[&>svg]:w-3 [&>svg]:h-3',
-      medium: '[&>svg]:w-4 [&>svg]:h-4',
-      large: '[&>svg]:w-5 [&>svg]:h-5'
-    }
-  },
-  sizes: {
-    small: 'text-sm px-2 py-1 leading-[normal]',
-    medium: 'text-base px-4 py-2 leading-[normal]',
-    large: 'text-xl px-5 py-2.5 leading-[normal]'
-  },
-  iconSizes: {
-    small: 'px-2 py-1',
-    medium: 'px-4 py-2',
-    large: 'px-5 py-2.5'
-  }
-};
-
-export const buttonTheme: ButtonTheme = {
-  base: [baseTheme.base, 'text-text-primary font-semibold'].join(' '),
-  disabled: [
-    baseTheme.disabled,
-    'data-[variant=filled]:disabled:bg-gray-600 disabled:text-gray-400 border-gray-500'
-  ].join(' '),
-  fullWidth: baseTheme.fullWidth,
-  group: baseTheme.group,
-  groupText: baseTheme.groupText,
-  adornment: baseTheme.adornment,
-  sizes: baseTheme.sizes,
-  iconSizes: baseTheme.iconSizes,
-  variants: {
-    filled:
-      'bg-secondary hover:bg-border-secondary-hover border-secondary light:text-gray-100',
-    outline: 'border-grey border',
-    text: 'border-0'
-  },
-  colors: {
-    default: {
-      filled: 'bg-gray-800 hover:bg-gray-700 border-gray-800',
-      outline: 'border-secondary border',
-      text: 'text-text-primary'
-    },
-    primary: {
-      filled:
-        'bg-primary hover:bg-primary-hover border-primary text-text-primary',
-      outline: 'border border-primary',
-      text: 'text-primary hover:text-primary-hover'
-    },
-    secondary: {
-      filled: 'bg-secondary hover:bg-secondary-hover text-text-primary!',
-      outline: 'border border-secondary',
-      text: 'text-secondary hover:text-secondary-hover'
-    },
-    success: {
-      filled:
-        'bg-success hover:bg-success-hover border-success text-text-primary',
-      outline: 'border border-success',
-      text: 'text-success hover:text-success-hover'
+    start: {
+      small: 'pr-(--buttons-details-space-between-horizontal-sm)',
+      medium: 'pr-(--buttons-details-space-between-horizontal-md)',
+      large: 'pr-(--buttons-details-space-between-horizontal-lg)'
     },
-    warning: {
-      filled:
-        'bg-warning hover:bg-warning-hover border-warning text-text-primary',
-      outline: 'border border-warning',
-      text: 'text-warning hover:text-warning-hover'
+    end: {
+      small: 'pl-(--buttons-details-space-between-horizontal-sm)',
+      medium: 'pl-(--buttons-details-space-between-horizontal-md)',
+      large: 'pl-(--buttons-details-space-between-horizontal-lg)'
     },
-    error: {
-      filled: 'bg-error hover:bg-error-hover border-error text-text-primary',
-      outline: 'border border-error',
-      text: 'text-error hover:text-error-hover'
+    sizes: {
+      small: '[&>svg]:size-(--buttons-details-asset-size-sm)',
+      medium: '[&>svg]:size-(--buttons-details-asset-size-md)',
+      large: '[&>svg]:size-(--buttons-details-asset-size-lg)'
     }
-  }
-};
-
-export const legacyButtonTheme: ButtonTheme = {
-  base: [
-    baseTheme.base,
-    '[border:_var(--button-border)] rounded-[var(--button-border)] [font-family:_var(--button-font-family)] [font-weight:_var(--button-font-weight)]'
-  ].join(' '),
-  disabled: [
-    baseTheme.disabled,
-    'data-[variant=filled]:disabled:bg-[var(--disabled-background)] disabled:text-[var(--button-disabled-color-on-background)] border-[var(--disabled-background)]'
-  ].join(' '),
-  fullWidth: baseTheme.fullWidth,
-  group: baseTheme.group,
-  groupText: baseTheme.groupText,
+  },
   sizes: {
-    small: '[font-size:_var(--font-size-sm)] p-[var(--button-spacing-sm)]',
-    medium: '[font-size:_var(--font-size-md)] p-[var(--button-spacing-md)]',
-    large: '[font-size:_var(--font-size-lg)] p-[var(--button-spacing-lg)]'
+    small:
+      'h-(--buttons-details-height-core-icon-sm) text-xs px-(--buttons-details-horizontal-padding-sm)',
+    medium:
+      'h-(--buttons-details-height-core-icon-md) text-sm px-(--buttons-details-horizontal-padding-md)',
+    large:
+      'h-(--buttons-details-height-core-icon-lg) text-base px-(--buttons-details-horizontal-padding-lg)'
   },
   iconSizes: {
-    small: '[font-size:_var(--font-size-sm)] p-[var(--button-spacing-sm)]',
-    medium: '[font-size:_var(--font-size-md)] p-[var(--button-spacing-md)]',
-    large: '[font-size:_var(--font-size-lg)] p-[var(--button-spacing-lg)]'
-  },
-  adornment: {
-    ...baseTheme.adornment,
-    start: [
-      baseTheme.adornment.start,
-      '[padding-right:_calc(var(--list-item-spacing)_/_2)]'
-    ].join(' '),
-    end: [
-      baseTheme.adornment.start,
-      '[padding-left:_calc(var(--list-item-spacing)_/_2)]'
-    ].join(' '),
-    sizes: {
-      small:
-        '[&>svg]:w-[var(--button-adornment-size-sm)] [&>svg]:h-[var(--button-adornment-size-sm)]',
-      medium:
-        '[&>svg]:w-[var(--button-adornment-size-md)] [&>svg]:h-[var(--button-adornment-size-md)]',
-      large:
-        '[&>svg]:w-[var(--button-adornment-size-lg)] [&>svg]:h-[var(--button-adornment-size-lg)]'
-    }
+    xsmall:
+      'size-(--buttons-details-height-core-icon-xs) [&>svg]:size-(--buttons-details-asset-size-xs) px-0 py-0',
+    small:
+      'size-(--buttons-details-height-core-icon-sm) [&>svg]:size-(--buttons-details-asset-size-sm) px-0 py-0',
+    medium:
+      'size-(--buttons-details-height-core-icon-md) [&>svg]:size-(--buttons-details-asset-size-md) px-0 py-0',
+    large:
+      'size-(--buttons-details-height-core-icon-lg) [&>svg]:size-(--buttons-details-asset-size-lg) px-0 py-0'
   },
   variants: {
-    filled:
-      'bg-[var(--button-background)] text-[var(--button-color-on-background)] hover:bg-[var(--button-background-hover)] border-[var(--button-background)] hover:border-[var(--button-background-hover)]',
-    outline:
-      'border-[var(--button-background)] hover:border-[var(--button-background-hover)] text-[var(--button-color)] hover:text-[var(--button-color-hover)] border',
-    text: 'border-0'
+    filled: 'bg-secondary hover:bg-border-secondary-hover',
+    outline: 'border',
+    text: 'border-0',
+    ghost: ''
   },
   colors: {
-    default: {
-      filled:
-        'bg-[var(--button-background)] text-[var(--button-color-on-background)] hover:bg-[var(--button-background-hover)] border-[var(--button-background)] hover:border-[var(--button-background-hover)]',
-      outline: '',
-      text: 'text-[var(--button-color)] hover:text-[var(--button-color-hover)]'
-    },
     primary: {
-      filled:
-        'bg-[var(--primary-background)] hover:bg-[var(--primary-background-hover)] border-[var(--primary-background)] border-[var(--primary-background-hover)] text-[var(--button-color-on-background)]',
-      outline: '',
-      text: 'text-[var(--primary-color)] hover:text-[var(--primary-color-hover)]'
+      filled: `
+        bg-buttons-colors-core-icon-primary-background-resting border-buttons-colors-core-icon-primary-stroke-resting text-buttons-colors-core-icon-primary-text-resting [&_svg]:fill-buttons-colors-core-icon-primary-assets-resting
+        hover:bg-buttons-colors-core-icon-primary-background-hover hover:border-buttons-colors-core-icon-primary-stroke-hover hover:text-buttons-colors-core-icon-primary-text-hover hover:[&_svg]:fill-buttons-colors-core-icon-primary-assets-hover
+        focus-visible:bg-buttons-colors-core-icon-primary-background-selected focus-visible:border-buttons-colors-core-icon-primary-stroke-selected focus-visible:text-buttons-colors-core-icon-primary-text-selected focus-visible:[&_svg]:fill-buttons-colors-core-icon-primary-assets-selected
+        disabled:bg-buttons-colors-core-icon-primary-background-resting disabled:border-buttons-colors-core-icon-primary-stroke-resting disabled:text-buttons-colors-core-icon-primary-text-resting disabled:[&_svg]:fill-buttons-colors-core-icon-primary-assets-resting
+      `,
+      outline: `
+        bg-buttons-colors-core-icon-outline-background-resting border-buttons-colors-core-icon-outline-stroke-resting text-buttons-colors-core-icon-outline-text-resting [&_svg]:fill-buttons-colors-core-icon-outline-assets-resting
+        hover:bg-buttons-colors-core-icon-outline-background-hover hover:border-buttons-colors-core-icon-outline-stroke-hover hover:text-buttons-colors-core-icon-outline-text-hover hover:[&_svg]:fill-buttons-colors-core-icon-outline-assets-hover
+        focus-visible:bg-buttons-colors-core-icon-outline-background-selected focus-visible:border-buttons-colors-core-icon-outline-stroke-selected focus-visible:text-buttons-colors-core-icon-outline-text-selected focus-visible:[&_svg]:fill-buttons-colors-core-icon-outline-assets-selected
+        disabled:bg-buttons-colors-core-icon-outline-background-resting disabled:border-buttons-colors-core-icon-outline-stroke-resting disabled:text-buttons-colors-core-icon-outline-text-resting disabled:[&_svg]:fill-buttons-colors-core-icon-outline-assets-resting
+      `,
+      text: `
+        text-buttons-colors-link-primary-text-resting hover:text-buttons-colors-link-primary-text-hover focus-visible:text-buttons-colors-link-primary-text-selected
+        [&_svg]:fill-buttons-colors-link-primary-assets-resting hover:[&_svg]:fill-buttons-colors-link-primary-assets-hover focus-visible:[&_svg]:fill-buttons-colors-link-primary-assets-selected
+        disabled:text-buttons-colors-link-primary-text-resting disabled:[&_svg]:fill-buttons-colors-link-primary-assets-resting
+      `,
+      ghost: `
+        bg-buttons-colors-core-icon-ghost-background-resting border-buttons-colors-core-icon-ghost-stroke-resting text-buttons-colors-core-icon-ghost-text-resting [&_svg]:fill-buttons-colors-core-icon-ghost-assets-resting
+        hover:bg-buttons-colors-core-icon-ghost-background-hover hover:border-buttons-colors-core-icon-ghost-stroke-hover hover:text-buttons-colors-core-icon-ghost-text-hover hover:[&_svg]:fill-buttons-colors-core-icon-ghost-assets-hover
+        focus-visible:bg-buttons-colors-core-icon-ghost-background-selected focus-visible:border-buttons-colors-core-icon-ghost-stroke-selected focus-visible:text-buttons-colors-core-icon-ghost-text-selected focus-visible:[&_svg]:fill-buttons-colors-core-icon-ghost-assets-selected
+        disabled:bg-buttons-colors-core-icon-ghost-background-resting disabled:border-buttons-colors-core-icon-ghost-stroke-resting disabled:text-buttons-colors-core-icon-ghost-text-resting disabled:[&_svg]:fill-buttons-colors-core-icon-ghost-assets-resting
+      `
     },
     secondary: {
-      filled:
-        'bg-[var(--secondary-background)] hover:bg-[var(--secondary-background-hover)] border-[var(--secondary-background)] hover:border-[var(--secondary-background-hover)] text-[var(--button-color-on-background)]',
-      outline: '',
-      text: 'text-[var(--secondary-color)] hover:text-[var(--secondary-color-hover)]'
-    },
-    success: {
-      filled:
-        'bg-[var(--success-background)] hover:bg-[var(--success-background-hover)] border-[var(--success-background)] hover:border-[var(--success-background-hover)] text-[var(--button-color-on-background)]',
-      outline: '',
-      text: 'text-[var(--success-color)] hover:text-[var(--success-color-hover)]'
-    },
-    warning: {
-      filled:
-        'bg-[var(--warning-background)] hover:bg-[var(--warning-background-hover)] border-[var(--warning-background)] hover:border-[var(--warning-background-hover)] text-[var(--button-color-on-background)]',
-      outline: '',
-      text: 'text-[var(--warning-color)] hover:text-[var(--warning-color-hover)]'
+      filled: `
+        bg-buttons-colors-core-icon-secondary-background-resting border-buttons-colors-core-icon-secondary-stroke-resting text-buttons-colors-core-icon-secondary-text-resting [&_svg]:fill-buttons-colors-core-icon-secondary-assets-resting
+        hover:bg-buttons-colors-core-icon-secondary-background-hover hover:border-buttons-colors-core-icon-secondary-stroke-hover hover:text-buttons-colors-core-icon-secondary-text-hover hover:[&_svg]:fill-buttons-colors-core-icon-secondary-assets-hover
+        focus-visible:bg-buttons-colors-core-icon-secondary-background-selected focus-visible:border-buttons-colors-core-icon-secondary-stroke-selected focus-visible:text-buttons-colors-core-icon-secondary-text-selected focus-visible:[&_svg]:fill-buttons-colors-core-icon-secondary-assets-selected
+        disabled:bg-buttons-colors-core-icon-secondary-background-resting disabled:border-buttons-colors-core-icon-secondary-stroke-resting disabled:text-buttons-colors-core-icon-secondary-text-resting disabled:[&_svg]:fill-buttons-colors-core-icon-secondary-assets-resting
+      `,
+      outline: `
+        border-buttons-colors-core-icon-secondary-background-resting text-buttons-colors-core-icon-secondary-text-resting [&_svg]:fill-buttons-colors-core-icon-secondary-assets-resting
+        hover:border-buttons-colors-core-icon-secondary-background-hover hover:text-buttons-colors-core-icon-secondary-text-hover hover:[&_svg]:fill-buttons-colors-core-icon-secondary-assets-hover
+        focus-visible:border-buttons-colors-core-icon-secondary-background-selected focus-visible:text-buttons-colors-core-icon-secondary-text-selected focus-visible:[&_svg]:fill-buttons-colors-core-icon-secondary-assets-selected
+        disabled:border-buttons-colors-core-icon-secondary-background-resting disabled:text-buttons-colors-core-icon-secondary-text-resting disabled:[&_svg]:fill-buttons-colors-core-icon-secondary-assets-resting
+      `,
+      text: `
+        text-buttons-colors-link-secondary-text-resting hover:text-buttons-colors-link-secondary-text-hover focus-visible:text-buttons-colors-link-secondary-text-selected
+        [&_svg]:fill-buttons-colors-link-secondary-assets-resting hover:[&_svg]:fill-buttons-colors-link-secondary-assets-hover focus-visible:[&_svg]:fill-buttons-colors-link-secondary-assets-selected
+        disabled:text-buttons-colors-link-secondary-text-resting disabled:[&_svg]:fill-buttons-colors-link-secondary-assets-resting
+      `,
+      ghost: `
+        bg-buttons-colors-core-icon-ghost-background-resting border-buttons-colors-core-icon-ghost-stroke-resting text-buttons-colors-core-icon-ghost-text-resting [&_svg]:fill-buttons-colors-core-icon-ghost-assets-resting
+        hover:bg-buttons-colors-core-icon-secondary-background-hover hover:border-buttons-colors-core-icon-ghost-stroke-hover hover:text-buttons-colors-core-icon-secondary-text-hover hover:[&_svg]:fill-buttons-colors-core-icon-ghost-assets-hover
+        focus-visible:bg-buttons-colors-core-icon-secondary-background-selected focus-visible:border-buttons-colors-core-icon-secondary-stroke-selected focus-visible:-buttons-colors-core-icon-secondary-text-selected focus-visible:[&_svg]:fill-buttons-colors-core-icon-ghost-assets-selected
+        disabled:bg-buttons-colors-core-icon-ghost-background-resting disabled:border-buttons-colors-core-icon-ghost-stroke-resting disabled:text-buttons-colors-core-icon-secondary-text-resting disabled:[&_svg]:fill-buttons-colors-core-icon-ghost-assets-resting
+      `
     },
-    error: {
-      filled:
-        'bg-[var(--error-background)] hover:bg-[var(--error-background-hover)] border-[var(--error-background)] hover:border-[var(--error-background-hover)] text-[var(--button-color-on-background)]',
-      outline: '',
-      text: 'text-[var(--error-color)] hover:text-[var(--warning-error-hover)]'
+    destructive: {
+      filled: `
+        bg-buttons-colors-core-icon-destructive-background-resting border-buttons-colors-core-icon-destructive-stroke-resting text-buttons-colors-core-icon-destructive-text-resting [&_svg]:fill-buttons-colors-core-icon-destructive-assets-resting
+        hover:bg-buttons-colors-core-icon-destructive-background-hover hover:border-buttons-colors-core-icon-destructive-stroke-hover hover:text-buttons-colors-core-icon-destructive-text-hover hover:[&_svg]:fill-buttons-colors-core-icon-destructive-assets-hover
+        focus-visible:bg-buttons-colors-core-icon-destructive-background-selected focus-visible:border-buttons-colors-core-icon-destructive-stroke-selected focus-visible:text-buttons-colors-core-icon-primary-text-selected focus-visible:[&_svg]:fill-buttons-colors-core-icon-destructive-assets-selected
+        disabled:bg-buttons-colors-core-icon-destructive-background-resting disabled:border-buttons-colors-core-icon-destructive-stroke-resting disabled:text-buttons-colors-core-icon-destructive-text-resting disabled:[&_svg]:fill-buttons-colors-core-icon-destructive-assets-resting
+      `,
+      outline: `
+        border-buttons-colors-core-icon-destructive-stroke-resting text-buttons-colors-link-destructive-text-resting [&_svg]:fill-buttons-colors-link-destructive-assets-resting
+        hover:border-buttons-colors-core-icon-destructive-stroke-hover hover:text-buttons-colors-link-destructive-text-hover hover:[&_svg]:fill-buttons-colors-link-destructive-assets-hover
+        focus-visible:border-buttons-colors-core-icon-destructive-stroke-selected focus-visible:text-buttons-colors-link-destructive-text-selected focus-visible:[&_svg]:fill-buttons-colors-link-destructive-assets-selected
+        disabled:border-buttons-colors-core-icon-destructive-stroke-resting disabled:text-buttons-colors-link-destructive-text-resting disabled:[&_svg]:fill-buttons-colors-link-destructive-assets-resting
+      `,
+      text: `
+        text-buttons-colors-link-destructive-text-resting hover:text-buttons-colors-link-destructive-text-hover focus-visible:text-buttons-colors-link-destructive-text-selected
+        [&_svg]:fill-buttons-colors-link-destructive-assets-resting hover:[&_svg]:fill-buttons-colors-link-destructive-assets-hover focus-visible:[&_svg]:fill-buttons-colors-link-destructive-assets-selected
+        disabled:text-buttons-colors-link-destructive-text-resting disabled:[&_svg]:fill-buttons-colors-link-destructive-assets-resting
+      `,
+      ghost: `
+        bg-buttons-colors-core-icon-ghost-background-resting border-buttons-colors-core-icon-ghost-stroke-resting text-buttons-colors-core-icon-ghost-text-resting [&_svg]:fill-buttons-colors-core-icon-ghost-assets-resting
+        hover:bg-buttons-colors-core-icon-destructive-background-hover hover:border-buttons-colors-core-icon-ghost-stroke-hover hover:text-buttons-colors-core-icon-ghost-text-hover hover:[&_svg]:fill-buttons-colors-core-icon-ghost-assets-hover
+        focus-visible:bg-buttons-colors-core-icon-destructive-background-selected focus-visible:border-buttons-colors-core-icon-destructive-stroke-selected focus-visible:text-buttons-colors-core-icon-ghost-text-selected focus-visible:[&_svg]:fill-buttons-colors-core-icon-ghost-assets-selected
+        disabled:bg-buttons-colors-core-icon-ghost-background-resting disabled:border-buttons-colors-core-icon-ghost-stroke-resting disabled:text-buttons-colors-core-icon-ghost-text-resting disabled:[&_svg]:fill-buttons-colors-core-icon-ghost-assets-resting
+      `
     }
   }
 };
diff --git a/src/elements/Button/index.ts b/src/elements/Button/index.ts
index 2c1684f80..28ef82410 100644
--- a/src/elements/Button/index.ts
+++ b/src/elements/Button/index.ts
@@ -1,3 +1,3 @@
-export * from './ButtonTheme';
 export * from './Button';
 export * from './ButtonGroup';
+export * from './ButtonTheme';
diff --git a/src/elements/Chip/Chip.story.tsx b/src/elements/Chip/Chip.story.tsx
deleted file mode 100644
index dc64dd07a..000000000
--- a/src/elements/Chip/Chip.story.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-import { useState } from 'react';
-import { Chip } from './Chip';
-import { Stack } from '../../layout';
-import { ChipTheme, chipTheme } from './ChipTheme';
-
-export default {
-  title: 'Components/Elements/Chip',
-  component: Chip
-};
-
-export const Colors = () => (
-  <div style={{ display: 'flex', gap: 10 }}>
-    <Chip>Default</Chip>
-    <Chip color="primary">Primary</Chip>
-    <Chip color="secondary">Secondary</Chip>
-    <Chip color="error">Error</Chip>
-    <Chip color="success">Success</Chip>
-    <Chip color="warning">Warning</Chip>
-    <Chip color="info">Info</Chip>
-  </div>
-);
-
-export const Sizes = () => (
-  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-    <Chip size="small">Small</Chip>
-    <Chip>Medium</Chip>
-    <Chip size="large">Large</Chip>
-  </div>
-);
-
-export const Adornment = () => (
-  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-    <Chip start={<DemoIcon />}>Icon</Chip>
-    <Chip end={<DemoIcon />}>Icon</Chip>
-    <Chip start={'$'} end={<DemoIcon />}>
-      Icon
-    </Chip>
-  </div>
-);
-
-export const StartAdornment = () => <Chip start={<DemoIcon />}>Icon</Chip>;
-
-export const EndAdornment = () => <Chip end={<DemoIcon />}>Icon</Chip>;
-
-export const StartEndAdornment = () => (
-  <Chip start={'$'} end={<DemoIcon />}>
-    Icon
-  </Chip>
-);
-
-export const Variants = () => (
-  <div style={{ display: 'flex', gap: 10 }}>
-    <Chip variant="filled">Filled</Chip>
-    <Chip variant="outline">Outline</Chip>
-  </div>
-);
-
-export const Selectable = () => {
-  const [IsFilledSelected, setIsFilledSelected] = useState(false);
-  const [isOutlineSelected, setIsOutlineSelected] = useState(false);
-
-  return (
-    <Stack>
-      <Chip
-        onClick={() => setIsFilledSelected(!IsFilledSelected)}
-        selected={IsFilledSelected}
-      >
-        Selectable
-      </Chip>
-      <Chip
-        variant="outline"
-        onClick={() => setIsOutlineSelected(!isOutlineSelected)}
-        selected={isOutlineSelected}
-      >
-        Selectable
-      </Chip>
-    </Stack>
-  );
-};
-
-export const Disabled = () => (
-  <Stack>
-    <Chip disabled>Selectable</Chip>
-    <Chip variant="outline" disabled>
-      Selectable
-    </Chip>
-  </Stack>
-);
-
-const DemoIcon = () => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      fill="currentColor"
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M7.05037 2.43562C7.47505 1.70912 8.52499 1.70912 8.94967 2.43562L10.5591 5.18886L13.7314 5.81912C14.5791 5.98756 14.9104 7.02301 14.3178 7.65222L12.1512 9.95255L12.5125 13.0632C12.6106 13.9079 11.7541 14.5397 10.976 14.1966L8.00002 12.8845L5.02399 14.1966C4.24592 14.5397 3.38946 13.9079 3.48756 13.0632L3.84882 9.95255L1.68228 7.65222C1.08968 7.02301 1.42092 5.98756 2.26868 5.81912L5.44095 5.18886L7.05037 2.43562ZM8.00002 3.1889L6.34068 6.02753C6.25403 6.17577 6.10802 6.27978 5.93961 6.31324L2.67965 6.96093L4.9138 9.33306C5.03517 9.46193 5.09343 9.63781 5.07301 9.81365L4.69969 13.0282L7.75796 11.6797C7.91217 11.6117 8.08787 11.6117 8.24208 11.6797L11.3003 13.0282L10.927 9.81365C10.9066 9.63781 10.9649 9.46193 11.0862 9.33306L13.3204 6.96093L10.0604 6.31324C9.89202 6.27978 9.74601 6.17577 9.65936 6.02753L8.00002 3.1889Z"
-    />
-  </svg>
-);
-
-export const CustomTheme = () => {
-  const customTheme: ChipTheme = {
-    ...chipTheme,
-    base: `${chipTheme.base} rounded-full`,
-    colors: {
-      ...chipTheme?.colors,
-      secondary: {
-        ...chipTheme.colors.secondary,
-        variants: {
-          ...chipTheme.colors.secondary.variants,
-          filled: `${chipTheme?.colors?.secondary?.variants?.filled} dark:bg-gray-100 light:bg-gray-900 text-panel`
-        }
-      },
-      info: {
-        ...chipTheme.colors.info,
-        variants: {
-          ...chipTheme.colors.info.variants,
-          filled: `${chipTheme?.colors?.info?.variants?.filled} text-text-primary bg-info/10 border-info`
-        }
-      },
-      error: {
-        ...chipTheme.colors.error,
-        variants: {
-          ...chipTheme.colors.error.variants,
-          filled: `${chipTheme?.colors?.error?.variants?.filled} text-text-primary bg-error/10 border-error`
-        }
-      },
-      warning: {
-        ...chipTheme.colors.warning,
-        variants: {
-          ...chipTheme.colors.warning.variants,
-          filled: `${chipTheme?.colors?.warning?.variants?.filled} text-text-primary bg-warning/10 border-warning`
-        }
-      },
-      success: {
-        ...chipTheme.colors.success,
-        variants: {
-          ...chipTheme.colors.success.variants,
-          filled: `${chipTheme?.colors?.success?.variants?.filled} text-text-primary bg-success/10 border-success`
-        }
-      }
-    }
-  };
-
-  return (
-    <Stack>
-      <Chip theme={customTheme}>Default</Chip>
-      <Chip theme={customTheme} color="primary">
-        Primary
-      </Chip>
-      <Chip theme={customTheme} color="secondary">
-        Secondary
-      </Chip>
-      <Chip theme={customTheme} color="error">
-        Error
-      </Chip>
-      <Chip theme={customTheme} color="success">
-        Success
-      </Chip>
-      <Chip theme={customTheme} color="warning">
-        Warning
-      </Chip>
-      <Chip theme={customTheme} color="info">
-        Info
-      </Chip>
-    </Stack>
-  );
-};
diff --git a/src/elements/Chip/Chip.tsx b/src/elements/Chip/Chip.tsx
index 65537331b..ab2cde552 100644
--- a/src/elements/Chip/Chip.tsx
+++ b/src/elements/Chip/Chip.tsx
@@ -1,31 +1,40 @@
-import React, { FC, forwardRef, LegacyRef, ReactElement } from 'react';
-import { twMerge } from 'tailwind-merge';
-import { useComponentTheme } from '@/utils';
-import { ChipTheme } from './ChipTheme';
+import type { HTMLMotionProps } from 'motion/react';
+import { motion } from 'motion/react';
+import type { LegacyRef, ReactElement, ReactNode } from 'react';
+import React, { forwardRef } from 'react';
+
+import CloseIcon from '@/assets/icons/close.svg?react';
+import type {
+  ChipColorTheme,
+  ChipSizeTheme,
+  ChipTheme,
+  ChipTypeTheme,
+  ChipVariantTheme,
+  TagTypeThemeConfig
+} from '@/elements';
+import { twMerge } from '@/utils';
+import { cn, useComponentTheme } from '@/utils';
+
+export interface ChipProps extends Omit<HTMLMotionProps<'div'>, 'color'> {
+  /**
+   * Type of the chip, e.g., badge or tag.
+   */
+  type?: keyof ChipTypeTheme;
 
-export interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Color variant for the chip.
    */
-  color?:
-    | 'default'
-    | 'primary'
-    | 'secondary'
-    | 'error'
-    | 'success'
-    | 'warning'
-    | 'info'
-    | string;
+  color?: keyof ChipColorTheme;
 
   /**
    * Size variant for the chip.
    */
-  size?: 'small' | 'medium' | 'large' | string;
+  size?: keyof ChipSizeTheme;
 
   /**
    * Style variant for the chip.
    */
-  variant?: 'filled' | 'outline' | string;
+  variant?: keyof ChipVariantTheme;
 
   /**
    * Whether the chip is selected.
@@ -42,6 +51,11 @@ export interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   disableMargins?: boolean;
 
+  /**
+   * If false, the animation of the chip will be disabled.
+   */
+  animated?: boolean;
+
   /**
    * Content to display before the chip label.
    */
@@ -52,6 +66,16 @@ export interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   end?: ReactElement | string;
 
+  /**
+   * Close icon for the chip, typically used in closable chips.
+   */
+  closeIcon?: ReactElement;
+
+  /**
+   * Close handler for the chip, typically used in closable chips.
+   */
+  onClose?: () => void;
+
   /**
    * Theme for the Chip.
    */
@@ -65,10 +89,11 @@ export interface ChipRef {
   ref?: LegacyRef<HTMLDivElement>;
 }
 
-export const Chip: FC<ChipProps & ChipRef> = forwardRef(
+export const Chip = forwardRef<HTMLDivElement, ChipProps>(
   (
     {
       children,
+      type = 'badge',
       color = 'default',
       variant = 'filled',
       size = 'medium',
@@ -76,39 +101,43 @@ export const Chip: FC<ChipProps & ChipRef> = forwardRef(
       disabled,
       className,
       disableMargins,
+      animated = true,
       start,
       end,
+      closeIcon = <CloseIcon />,
+      onClose,
       onClick,
       theme: customTheme,
       ...rest
     },
     ref
   ) => {
-    const theme = useComponentTheme('chip', customTheme);
+    const theme = useComponentTheme('chip', customTheme).types[type];
+    const isClickable = type === 'tag' && onClick && !disabled;
 
     return (
-      <div
+      <motion.div
+        whileTap={{
+          scale: !isClickable || !animated || onClose ? 1 : 0.9
+        }}
         {...rest}
         ref={ref}
         tabIndex={onClick ? 0 : -1}
         onClick={!disabled ? onClick : undefined}
-        className={twMerge(
+        className={cn(
           theme.base,
           theme.variants[variant],
           theme.colors[color]?.base,
-          theme.colors[color]?.variants?.[variant],
+          theme.colors[color]?.variants?.[variant]?.base,
           theme.sizes[size],
-          theme.focus,
-          !!onClick && !disabled && theme.colors[color]?.selectable?.base,
-          !!onClick &&
-            !disabled &&
-            theme.colors[color]?.selectable?.variants?.[variant]?.base,
-          selected &&
-            theme.colors[color]?.selectable?.variants?.[variant]?.selected,
+          {
+            [theme.colors[color]?.variants?.[variant]?.selected]: selected,
+            [theme.colors[color]?.variants?.[variant]?.selectable]: isClickable,
+            'cursor-pointer': isClickable
+          },
           disableMargins && 'm-0',
-          'transition-colors duration-300 ease [&>svg]:transition-[fill] [&>svg]:will-change-[fill]',
-          className,
-          disabled && theme.disabled
+          disabled && type === 'tag' && (theme as TagTypeThemeConfig).disabled,
+          className
         )}
         aria-disabled={disabled}
       >
@@ -117,25 +146,42 @@ export const Chip: FC<ChipProps & ChipRef> = forwardRef(
             className={twMerge(
               theme.adornment.base,
               theme.adornment.start,
-              theme.adornment.sizes[size]
+              theme.adornment.sizes[size],
+              theme.colors[color]?.variants?.[variant]?.start
             )}
           >
             {start}
           </div>
         )}
-        <div className={'flex items-center'}>{children}</div>
+        <div className={theme.label}>{children as ReactNode}</div>
         {end && (
           <div
             className={twMerge(
               theme.adornment.base,
               theme.adornment.end,
-              theme.adornment.sizes[size]
+              theme.adornment.sizes[size],
+              theme.colors[color]?.variants?.[variant]?.end
             )}
           >
             {end}
           </div>
         )}
-      </div>
+        {onClose && (
+          <motion.button
+            whileTap={{ scale: disabled || !animated ? 1 : 0.9 }}
+            className={cn(
+              (theme as TagTypeThemeConfig).closeButton.base,
+              (theme as TagTypeThemeConfig).closeButton.sizes[size]
+            )}
+            onClick={e => {
+              e.stopPropagation();
+              onClose();
+            }}
+          >
+            {closeIcon}
+          </motion.button>
+        )}
+      </motion.div>
     );
   }
 );
diff --git a/src/elements/Chip/ChipBadge.story.tsx b/src/elements/Chip/ChipBadge.story.tsx
new file mode 100644
index 000000000..5bfcfaa8a
--- /dev/null
+++ b/src/elements/Chip/ChipBadge.story.tsx
@@ -0,0 +1,226 @@
+import type { ChipTheme } from '@/elements';
+import { chipTheme } from '@/elements';
+import { Stack } from '@/layout';
+import { cn, extendComponentTheme } from '@/utils';
+
+import { Chip } from './Chip';
+
+export default {
+  title: 'Components/Elements/Chip/Badge type',
+  component: Chip
+};
+
+export const Variants = () => (
+  <div style={{ display: 'flex', gap: 10 }}>
+    <Chip variant="filled">Filled</Chip>
+    <Chip variant="outline">Outline</Chip>
+  </div>
+);
+
+export const Colors = () => (
+  <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+    <div style={{ display: 'flex', gap: 10 }}>
+      <Chip start={<DemoIcon />}>Default</Chip>
+      <Chip color="primary" start={<DemoIcon />}>
+        Primary
+      </Chip>
+      <Chip color="secondary" start={<DemoIcon />}>
+        Secondary
+      </Chip>
+      <Chip color="error" start={<DemoIcon />}>
+        Error
+      </Chip>
+      <Chip color="success" start={<DemoIcon />}>
+        Success
+      </Chip>
+      <Chip color="warning" start={<DemoIcon />}>
+        Warning
+      </Chip>
+      <Chip color="info" start={<DemoIcon />}>
+        Info
+      </Chip>
+    </div>
+    <div style={{ display: 'flex', gap: 10 }}>
+      <Chip variant="outline" start={<DemoIcon />}>
+        Default
+      </Chip>
+      <Chip variant="outline" color="primary" start={<DemoIcon />}>
+        Primary
+      </Chip>
+      <Chip variant="outline" color="secondary" start={<DemoIcon />}>
+        Secondary
+      </Chip>
+      <Chip variant="outline" color="error" start={<DemoIcon />}>
+        Error
+      </Chip>
+      <Chip variant="outline" color="success" start={<DemoIcon />}>
+        Success
+      </Chip>
+      <Chip variant="outline" color="warning" start={<DemoIcon />}>
+        Warning
+      </Chip>
+      <Chip variant="outline" color="info" start={<DemoIcon />}>
+        Info
+      </Chip>
+    </div>
+    <div style={{ display: 'flex', gap: 10 }}>
+      <Chip variant="subtle">Default</Chip>
+      <Chip variant="subtle" color="primary" start={<DemoIcon />}>
+        Primary
+      </Chip>
+      <Chip variant="subtle" color="secondary" start={<DemoIcon />}>
+        Secondary
+      </Chip>
+      <Chip variant="subtle" color="error" start={<DemoIcon />}>
+        Error
+      </Chip>
+      <Chip variant="subtle" color="success" start={<DemoIcon />}>
+        Success
+      </Chip>
+      <Chip variant="subtle" color="warning" start={<DemoIcon />}>
+        Warning
+      </Chip>
+      <Chip variant="subtle" color="info" start={<DemoIcon />}>
+        Info
+      </Chip>
+    </div>
+  </div>
+);
+
+export const Sizes = () => (
+  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+    <Chip size="small">Small</Chip>
+    <Chip>Medium</Chip>
+    <Chip size="large">Large</Chip>
+  </div>
+);
+
+export const Adornment = () => (
+  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+    <Chip start={<DemoIcon />}>Icon</Chip>
+    <Chip end={<DemoIcon />}>Icon</Chip>
+    <Chip start={'$'} end={<DemoIcon />}>
+      Icon
+    </Chip>
+  </div>
+);
+
+export const StartAdornment = () => <Chip start={<DemoIcon />}>Icon</Chip>;
+
+export const EndAdornment = () => <Chip end={<DemoIcon />}>Icon</Chip>;
+
+export const StartEndAdornment = () => (
+  <Chip start={'$'} end={<DemoIcon />}>
+    Icon
+  </Chip>
+);
+
+const DemoIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7.05037 2.43562C7.47505 1.70912 8.52499 1.70912 8.94967 2.43562L10.5591 5.18886L13.7314 5.81912C14.5791 5.98756 14.9104 7.02301 14.3178 7.65222L12.1512 9.95255L12.5125 13.0632C12.6106 13.9079 11.7541 14.5397 10.976 14.1966L8.00002 12.8845L5.02399 14.1966C4.24592 14.5397 3.38946 13.9079 3.48756 13.0632L3.84882 9.95255L1.68228 7.65222C1.08968 7.02301 1.42092 5.98756 2.26868 5.81912L5.44095 5.18886L7.05037 2.43562ZM8.00002 3.1889L6.34068 6.02753C6.25403 6.17577 6.10802 6.27978 5.93961 6.31324L2.67965 6.96093L4.9138 9.33306C5.03517 9.46193 5.09343 9.63781 5.07301 9.81365L4.69969 13.0282L7.75796 11.6797C7.91217 11.6117 8.08787 11.6117 8.24208 11.6797L11.3003 13.0282L10.927 9.81365C10.9066 9.63781 10.9649 9.46193 11.0862 9.33306L13.3204 6.96093L10.0604 6.31324C9.89202 6.27978 9.74601 6.17577 9.65936 6.02753L8.00002 3.1889Z"
+    />
+  </svg>
+);
+
+export const CustomTheme = () => {
+  const customTheme = extendComponentTheme<ChipTheme>(
+    chipTheme,
+    {
+      types: {
+        badge: {
+          colors: {
+            default: {
+              variants: {
+                filled: {
+                  base: 'bg-neutrals-kyber-crystal-a-800'
+                }
+              }
+            },
+            primary: {
+              variants: {
+                filled: {
+                  base: 'bg-blue-hyperstream-800'
+                }
+              }
+            },
+            secondary: {
+              variants: {
+                filled: {
+                  base: 'bg-teal-sunspark-oasis-a-800'
+                }
+              }
+            },
+            success: {
+              variants: {
+                filled: {
+                  base: 'bg-green-emerald-saber-a-800'
+                }
+              }
+            },
+            error: {
+              variants: {
+                filled: {
+                  base: 'bg-pink-mew-mode-800'
+                }
+              }
+            },
+            warning: {
+              variants: {
+                filled: {
+                  base: 'bg-orange-sunstreak-a-800'
+                }
+              }
+            },
+            info: {
+              variants: {
+                filled: {
+                  base: 'bg-purple-nexus-a-800'
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    (source, target) => {
+      if (typeof source === 'string' && typeof target === 'string') {
+        return cn(source, target);
+      }
+      return undefined;
+    }
+  );
+
+  return (
+    <Stack>
+      <Chip theme={customTheme}>Default</Chip>
+      <Chip theme={customTheme} color="primary">
+        Primary
+      </Chip>
+      <Chip theme={customTheme} color="secondary">
+        Secondary
+      </Chip>
+      <Chip theme={customTheme} color="error">
+        Error
+      </Chip>
+      <Chip theme={customTheme} color="success">
+        Success
+      </Chip>
+      <Chip theme={customTheme} color="warning">
+        Warning
+      </Chip>
+      <Chip theme={customTheme} color="info">
+        Info
+      </Chip>
+    </Stack>
+  );
+};
diff --git a/src/elements/Chip/ChipTag.story.tsx b/src/elements/Chip/ChipTag.story.tsx
new file mode 100644
index 000000000..b43bea6c6
--- /dev/null
+++ b/src/elements/Chip/ChipTag.story.tsx
@@ -0,0 +1,432 @@
+import { useState } from 'react';
+
+import type { ChipTheme } from '@/elements';
+import { Button, chipTheme } from '@/elements';
+import { Stack } from '@/layout';
+import { cn, extendComponentTheme } from '@/utils';
+
+import { Chip } from './Chip';
+
+export default {
+  title: 'Components/Elements/Chip/Tag type',
+  component: Chip
+};
+
+export const Colors = () => (
+  <div style={{ display: 'flex', gap: 10 }}>
+    <Chip type="tag" variant="outline">
+      Default
+    </Chip>
+    <Chip type="tag" variant="outline" color="primary" start={<DemoIcon />}>
+      Primary
+    </Chip>
+    <Chip type="tag" variant="outline" color="secondary" start={<DemoIcon />}>
+      Secondary
+    </Chip>
+    <Chip type="tag" variant="outline" color="error" start={<DemoIcon />}>
+      Error
+    </Chip>
+    <Chip type="tag" variant="outline" color="success" start={<DemoIcon />}>
+      Success
+    </Chip>
+    <Chip type="tag" variant="outline" color="warning" start={<DemoIcon />}>
+      Warning
+    </Chip>
+    <Chip type="tag" variant="outline" color="info" start={<DemoIcon />}>
+      Info
+    </Chip>
+  </div>
+);
+
+export const Sizes = () => (
+  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+    <Chip start={<DemoIcon />} type="tag" variant="outline" size="small">
+      Small
+    </Chip>
+    <Chip start={<DemoIcon />} type="tag" variant="outline">
+      Medium
+    </Chip>
+    <Chip start={<DemoIcon />} type="tag" variant="outline" size="large">
+      Large
+    </Chip>
+  </div>
+);
+
+export const Adornment = () => (
+  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+    <Chip type="tag" variant="outline" start={<DemoIcon />}>
+      Icon
+    </Chip>
+    <Chip type="tag" variant="outline" end={<DemoIcon />}>
+      Icon
+    </Chip>
+    <Chip type="tag" variant="outline" start={'$'} end={<DemoIcon />}>
+      Icon
+    </Chip>
+  </div>
+);
+
+export const StartAdornment = () => (
+  <Chip type="tag" variant="outline" start={<DemoIcon />}>
+    Icon
+  </Chip>
+);
+
+export const EndAdornment = () => (
+  <Chip type="tag" variant="outline" end={<DemoIcon />}>
+    Icon
+  </Chip>
+);
+
+export const StartEndAdornment = () => (
+  <Chip type="tag" variant="outline" start={'$'} end={<DemoIcon />}>
+    Icon
+  </Chip>
+);
+
+export const Selectable = () => {
+  const [isDefaultSelected, setIsDefaultSelected] = useState(false);
+  const [isPrimarySelected, setIsPrimarySelected] = useState(false);
+  const [isSecondarySelected, setIsSecondarySelected] = useState(false);
+  const [isSuccessSelected, setIsSuccessSelected] = useState(false);
+  const [isWarningSelected, setIsWarningSelected] = useState(false);
+  const [isErrorSelected, setIsErrorSelected] = useState(false);
+  const [isInfoSelected, setIsInfoSelected] = useState(false);
+
+  return (
+    <Stack>
+      <Chip
+        type="tag"
+        variant="outline"
+        onClick={() => setIsDefaultSelected(!isDefaultSelected)}
+        selected={isDefaultSelected}
+        start={<DemoIcon />}
+      >
+        Default
+      </Chip>
+      <Chip
+        type="tag"
+        variant="outline"
+        color="primary"
+        onClick={() => setIsPrimarySelected(!isPrimarySelected)}
+        selected={isPrimarySelected}
+        start={<DemoIcon />}
+      >
+        Primary
+      </Chip>
+      <Chip
+        type="tag"
+        variant="outline"
+        color="secondary"
+        onClick={() => setIsSecondarySelected(!isSecondarySelected)}
+        selected={isSecondarySelected}
+        start={<DemoIcon />}
+      >
+        Secondary
+      </Chip>
+      <Chip
+        type="tag"
+        variant="outline"
+        color="success"
+        onClick={() => setIsSuccessSelected(!isSuccessSelected)}
+        selected={isSuccessSelected}
+        start={<DemoIcon />}
+      >
+        Success
+      </Chip>
+      <Chip
+        type="tag"
+        variant="outline"
+        color="warning"
+        onClick={() => setIsWarningSelected(!isWarningSelected)}
+        selected={isWarningSelected}
+        start={<DemoIcon />}
+      >
+        Warning
+      </Chip>
+      <Chip
+        type="tag"
+        variant="outline"
+        color="error"
+        onClick={() => setIsErrorSelected(!isErrorSelected)}
+        selected={isErrorSelected}
+        start={<DemoIcon />}
+      >
+        Error
+      </Chip>
+      <Chip
+        type="tag"
+        variant="outline"
+        color="info"
+        onClick={() => setIsInfoSelected(!isInfoSelected)}
+        selected={isInfoSelected}
+        start={<DemoIcon />}
+      >
+        Info
+      </Chip>
+    </Stack>
+  );
+};
+
+export const Closable = () => {
+  const [hidden, setHidden] = useState(false);
+
+  if (hidden)
+    return (
+      <Button size="small" onClick={() => setHidden(false)}>
+        Show
+      </Button>
+    );
+
+  return (
+    <Chip
+      start={<DemoIcon />}
+      type="tag"
+      variant="outline"
+      color="primary"
+      onClose={() => setHidden(true)}
+    >
+      Closable
+    </Chip>
+  );
+};
+export const Disabled = () => (
+  <Stack direction="column">
+    <Stack>
+      <Chip start={<DemoIcon />} type="tag" variant="outline" disabled>
+        Default
+      </Chip>
+      <Chip
+        start={<DemoIcon />}
+        type="tag"
+        variant="outline"
+        color="primary"
+        disabled
+      >
+        Primary
+      </Chip>
+      <Chip
+        start={<DemoIcon />}
+        type="tag"
+        variant="outline"
+        color="secondary"
+        disabled
+      >
+        Secondary
+      </Chip>
+      <Chip
+        start={<DemoIcon />}
+        type="tag"
+        variant="outline"
+        color="success"
+        disabled
+      >
+        Success
+      </Chip>
+      <Chip
+        start={<DemoIcon />}
+        type="tag"
+        variant="outline"
+        color="warning"
+        disabled
+      >
+        Warning
+      </Chip>
+      <Chip
+        start={<DemoIcon />}
+        type="tag"
+        variant="outline"
+        color="error"
+        disabled
+      >
+        Error
+      </Chip>
+      <Chip
+        start={<DemoIcon />}
+        type="tag"
+        variant="outline"
+        color="info"
+        disabled
+      >
+        Info
+      </Chip>
+    </Stack>
+    <Stack>
+      <Chip start={<DemoIcon />} type="tag" variant="outline" disabled selected>
+        Default
+      </Chip>
+      <Chip
+        start={<DemoIcon />}
+        type="tag"
+        variant="outline"
+        color="primary"
+        disabled
+        selected
+      >
+        Primary
+      </Chip>
+      <Chip
+        start={<DemoIcon />}
+        type="tag"
+        variant="outline"
+        color="secondary"
+        disabled
+        selected
+      >
+        Secondary
+      </Chip>
+      <Chip
+        start={<DemoIcon />}
+        type="tag"
+        variant="outline"
+        color="success"
+        disabled
+        selected
+      >
+        Success
+      </Chip>
+      <Chip
+        start={<DemoIcon />}
+        type="tag"
+        variant="outline"
+        color="warning"
+        disabled
+        selected
+      >
+        Warning
+      </Chip>
+      <Chip
+        start={<DemoIcon />}
+        type="tag"
+        variant="outline"
+        color="error"
+        disabled
+        selected
+      >
+        Error
+      </Chip>
+      <Chip
+        start={<DemoIcon />}
+        type="tag"
+        variant="outline"
+        color="info"
+        disabled
+        selected
+      >
+        Info
+      </Chip>
+    </Stack>
+  </Stack>
+);
+
+const DemoIcon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7.05037 2.43562C7.47505 1.70912 8.52499 1.70912 8.94967 2.43562L10.5591 5.18886L13.7314 5.81912C14.5791 5.98756 14.9104 7.02301 14.3178 7.65222L12.1512 9.95255L12.5125 13.0632C12.6106 13.9079 11.7541 14.5397 10.976 14.1966L8.00002 12.8845L5.02399 14.1966C4.24592 14.5397 3.38946 13.9079 3.48756 13.0632L3.84882 9.95255L1.68228 7.65222C1.08968 7.02301 1.42092 5.98756 2.26868 5.81912L5.44095 5.18886L7.05037 2.43562ZM8.00002 3.1889L6.34068 6.02753C6.25403 6.17577 6.10802 6.27978 5.93961 6.31324L2.67965 6.96093L4.9138 9.33306C5.03517 9.46193 5.09343 9.63781 5.07301 9.81365L4.69969 13.0282L7.75796 11.6797C7.91217 11.6117 8.08787 11.6117 8.24208 11.6797L11.3003 13.0282L10.927 9.81365C10.9066 9.63781 10.9649 9.46193 11.0862 9.33306L13.3204 6.96093L10.0604 6.31324C9.89202 6.27978 9.74601 6.17577 9.65936 6.02753L8.00002 3.1889Z"
+    />
+  </svg>
+);
+
+export const CustomTheme = () => {
+  const customTheme = extendComponentTheme<ChipTheme>(
+    chipTheme,
+    {
+      types: {
+        tag: {
+          colors: {
+            default: {
+              variants: {
+                outline: {
+                  base: 'bg-neutrals-kyber-crystal-a-200'
+                }
+              }
+            },
+            primary: {
+              variants: {
+                outline: {
+                  base: 'bg-blue-hyperstream-600'
+                }
+              }
+            },
+            secondary: {
+              variants: {
+                outline: {
+                  base: 'bg-teal-sunspark-oasis-a-600'
+                }
+              }
+            },
+            success: {
+              variants: {
+                outline: {
+                  base: 'bg-green-emerald-saber-a-600'
+                }
+              }
+            },
+            error: {
+              variants: {
+                outline: {
+                  base: 'bg-pink-mew-mode-600'
+                }
+              }
+            },
+            warning: {
+              variants: {
+                outline: {
+                  base: 'bg-orange-sunstreak-a-600'
+                }
+              }
+            },
+            info: {
+              variants: {
+                outline: {
+                  base: 'bg-purple-nexus-a-600'
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    (source, target) => {
+      if (typeof source === 'string' && typeof target === 'string') {
+        return cn(source, target);
+      }
+      return undefined;
+    }
+  );
+
+  return (
+    <Stack>
+      <Chip type="tag" variant="outline" theme={customTheme}>
+        Default
+      </Chip>
+      <Chip type="tag" variant="outline" theme={customTheme} color="primary">
+        Primary
+      </Chip>
+      <Chip type="tag" variant="outline" theme={customTheme} color="secondary">
+        Secondary
+      </Chip>
+      <Chip type="tag" variant="outline" theme={customTheme} color="error">
+        Error
+      </Chip>
+      <Chip type="tag" variant="outline" theme={customTheme} color="success">
+        Success
+      </Chip>
+      <Chip type="tag" variant="outline" theme={customTheme} color="warning">
+        Warning
+      </Chip>
+      <Chip type="tag" variant="outline" theme={customTheme} color="info">
+        Info
+      </Chip>
+    </Stack>
+  );
+};
diff --git a/src/elements/Chip/ChipTheme.ts b/src/elements/Chip/ChipTheme.ts
index ebfcf0fdb..039bd5593 100644
--- a/src/elements/Chip/ChipTheme.ts
+++ b/src/elements/Chip/ChipTheme.ts
@@ -1,356 +1,514 @@
-interface ThemeColor {
+interface ChipColorConfigTheme {
   base?: string;
   variants?: {
-    filled?: string;
-    outline?: string;
-    [key: string]: string;
-  };
-  selectable?: {
-    base?: string;
-    variants?: {
-      filled?: {
-        base?: string;
-        selected?: string;
-      };
-      outline?: {
-        base?: string;
-        selected?: string;
-      };
-      [key: string]: {
-        base?: string;
-        selected?: string;
-      };
+    filled?: {
+      base: string;
+      selected?: string;
+      selectable?: string;
+      start?: string;
+      end?: string;
+    };
+    outline?: {
+      base: string;
+      selected?: string;
+      selectable?: string;
+      start?: string;
+      end?: string;
+    };
+    [key: string]: {
+      base: string;
+      selected?: string;
+      selectable?: string;
+      start?: string;
+      end?: string;
     };
   };
 }
 
-export interface ChipTheme {
+export interface ChipSizeTheme {
+  small: string;
+  medium: string;
+  large: string;
+  [key: string]: string;
+}
+
+export interface ChipVariantTheme {
+  filled?: string;
+  outline?: string;
+  subtle?: string;
+  [key: string]: string;
+}
+
+export interface ChipColorTheme {
+  default?: ChipColorConfigTheme;
+  primary?: ChipColorConfigTheme;
+  secondary?: ChipColorConfigTheme;
+  success?: ChipColorConfigTheme;
+  warning?: ChipColorConfigTheme;
+  error?: ChipColorConfigTheme;
+  info?: ChipColorConfigTheme;
+  [key: string]: ChipColorConfigTheme;
+}
+
+export interface BadgeTypeThemeConfig {
   base: string;
+  label?: string;
   adornment: {
     base: string;
     start: string;
     end: string;
-    sizes: {
-      small: string;
-      medium: string;
-      large: string;
-      [key: string]: string;
-    };
-  };
-  variants: {
-    filled: string;
-    outline: string;
-    [key: string]: string;
+    sizes: ChipSizeTheme;
   };
-  colors: {
-    default?: ThemeColor;
-    primary?: ThemeColor;
-    secondary?: ThemeColor;
-    success?: ThemeColor;
-    warning?: ThemeColor;
-    error?: ThemeColor;
-    info?: ThemeColor;
-    [key: string]: ThemeColor;
-  };
-  sizes: {
-    small: string;
-    medium: string;
-    large: string;
-    [key: string]: string;
+  variants: ChipVariantTheme;
+  colors: ChipColorTheme;
+  sizes: ChipSizeTheme;
+}
+
+export interface TagTypeThemeConfig {
+  base: string;
+  label?: string;
+  adornment: {
+    base: string;
+    start: string;
+    end: string;
+    sizes: ChipSizeTheme;
   };
-  focus: string;
-  deleteButton: {
+  variants: ChipVariantTheme;
+  colors: ChipColorTheme;
+  sizes: ChipSizeTheme;
+  closeButton: {
     base: string;
-    sizes: {
-      small: string;
-      medium: string;
-      large: string;
-      [key: string]: string;
-    };
+    sizes: ChipSizeTheme;
   };
   disabled: string;
 }
 
-const baseTheme: Partial<ChipTheme> = {
-  base: `
-  inline-flex whitespace-no-wrap select-none items-center justify-center px-2.5 py-0.5
-  rounded-xs leading-none text-white transition-colors
-  duration-300 ease [&>svg]:transition-[fill] [&>svg]:will-change-[fill] font-medium
-  `,
-  colors: {
-    default: {
-      selectable: {
-        base: 'hover:cursor-pointer'
-      }
-    },
-    primary: {
-      selectable: {
-        base: 'hover:cursor-pointer'
-      }
-    },
-    secondary: {
-      selectable: {
-        base: 'hover:cursor-pointer'
-      }
-    },
-    success: {
-      selectable: {
-        base: 'hover:cursor-pointer'
-      }
-    },
-    warning: {
-      selectable: {
-        base: 'hover:cursor-pointer'
-      }
-    },
-    error: {
-      selectable: {
-        base: 'hover:cursor-pointer'
-      }
-    },
-    info: {
-      selectable: {
-        base: 'hover:cursor-pointer'
-      }
-    }
-  },
-  adornment: {
-    base: 'flex items-center justify-center',
-    start: 'mr-1',
-    end: 'ml-1',
-    sizes: {
-      small: '[&>svg]:w-3 [&>svg]:h-3',
-      medium: '[&>svg]:w-4 [&>svg]:h-4',
-      large: '[&>svg]:w-5 [&>svg]:h-5'
-    }
-  },
-  sizes: {
-    small: 'text-[10px] leading-[inherit] px-1 py-0.5',
-    medium: 'text-sm leading-[inherit] px-2 py-0.5',
-    large: 'text-base leading-[inherit] px-3 py-0.5'
-  },
-  focus:
-    'focus-visible:outline-dashed focus-visible:outline-1 focus-visible:outline-offset-2',
-  deleteButton: {
-    base: 'text-inherit',
-    sizes: {
-      small: 'leading-[10px] max-h-2.5',
-      medium: 'leading-3 max-h-3',
-      large: 'leading-[14px] max-h-3.5'
-    }
-  },
-  disabled: 'opacity-50 cursor-not-allowed'
-};
+export interface ChipTypeTheme {
+  badge: BadgeTypeThemeConfig;
+  tag: TagTypeThemeConfig;
+}
+
+export interface ChipTheme {
+  types: ChipTypeTheme;
+}
 
 export const chipTheme: ChipTheme = {
-  base: baseTheme.base,
-  adornment: baseTheme.adornment,
-  sizes: baseTheme.sizes,
-  focus: baseTheme.focus,
-  variants: {
-    filled: 'border border-transparent box-border',
-    outline: 'bg-transparent border hover:bg-transparent'
-  },
-  colors: {
-    default: {
-      variants: {
-        filled: 'bg-panel border-panel text-text-primary',
-        outline: 'text-text-primary dark:border-gray-100 light:border-gray-900'
-      },
-      selectable: {
-        base: `${baseTheme.colors.default.selectable.base}`,
-        variants: {
-          filled: {
-            base: 'hover:bg-primary-hover hover:border-primary-hover hover:text-panel',
-            selected: 'bg-primary text-panel'
-          },
-          outline: {
-            base: 'hover:text-primary-hover hover:border-panel-accent',
-            selected: 'border-panel-accent text-primary'
+  types: {
+    badge: {
+      base: 'inline-flex whitespace-nowrap border font-medium select-none items-center justify-center rounded-(--badges-details-corner-radius-corner-radius) transition-colors',
+      label: '',
+      colors: {
+        default: {
+          variants: {
+            filled: {
+              base: `
+                bg-badges-colors-solid-neutral-background-standard
+                border-badges-colors-solid-neutral-stroke-default
+                text-badges-colors-solid-neutral-text-default
+              `,
+              start: 'fill-badges-colors-solid-neutral-assets-default',
+              end: 'fill-badges-colors-solid-neutral-assets-default'
+            },
+            outline: {
+              base: `
+                bg-badges-colors-outline-neutral-background-standard
+                border-badges-colors-outline-neutral-stroke-default
+                text-badges-colors-outline-neutral-text-default
+              `,
+              start: 'fill-badges-colors-outline-neutral-assets-default',
+              end: 'fill-badges-colors-outline-neutral-assets-default'
+            },
+            subtle: {
+              base: `
+                bg-badges-colors-subtle-neutral-background-standard
+                border-badges-colors-subtle-neutral-stroke-default
+                text-badges-colors-subtle-neutral-text-default
+              `,
+              start: 'fill-badges-colors-subtle-neutral-assets-default',
+              end: 'fill-badges-colors-subtle-neutral-assets-default'
+            }
           }
-        }
-      }
-    },
-    primary: {
-      variants: {
-        outline: 'text-primary border-panel-accent',
-        filled: 'bg-primary border-primary text-panel'
-      },
-      selectable: {
-        base: `${baseTheme.colors.primary.selectable.base}`,
-        variants: {
-          filled: {
-            base: 'hover:bg-primary-hover hover:border-primary-hover hover:text-panel',
-            selected: 'bg-primary-hover'
-          },
-          outline: {
-            base: 'hover:text-primary-hover hover:border-primary',
-            selected: 'border-primary'
+        },
+        primary: {
+          variants: {
+            filled: {
+              base: `
+                bg-badges-colors-solid-brand-background-standard
+                border-badges-colors-solid-brand-stroke-default
+                text-badges-colors-solid-brand-text-default
+              `,
+              start: 'fill-badges-colors-solid-brand-assets-default',
+              end: 'fill-badges-colors-solid-brand-assets-default'
+            },
+            outline: {
+              base: `
+                bg-badges-colors-outline-brand-background-standard
+                border-badges-colors-outline-brand-stroke-default
+                text-badges-colors-outline-brand-text-default
+              `,
+              start: 'fill-badges-colors-outline-brand-assets-default',
+              end: 'fill-badges-colors-outline-brand-assets-default'
+            },
+            subtle: {
+              base: `
+                bg-badges-colors-subtle-brand-background-standard
+                border-badges-colors-subtle-brand-stroke-default
+                text-badges-colors-subtle-brand-text-default
+              `,
+              start: 'fill-badges-colors-subtle-brand-assets-default',
+              end: 'fill-badges-colors-subtle-brand-assets-default'
+            }
           }
-        }
-      }
-    },
-    secondary: {
-      variants: {
-        filled: 'bg-secondary border-secondary text-text-primary',
-        outline: 'text-secondary border-panel-accent'
-      },
-      selectable: {
-        base: `${baseTheme.colors.secondary.selectable.base}`,
-        variants: {
-          filled: {
-            base: 'hover:bg-secondary-hover hover:border-secondary-hover hover:text-panel',
-            selected: 'bg-secondary-hover text-panel'
-          },
-          outline: {
-            base: 'hover:text-secondary-hover hover:border-secondary',
-            selected: 'border-secondary'
+        },
+        secondary: {
+          variants: {
+            filled: {
+              base: `
+                bg-badges-colors-solid-accent-background-standard
+                border-badges-colors-solid-accent-stroke-default
+                text-badges-colors-solid-accent-text-default
+              `,
+              start: 'fill-badges-colors-solid-accent-assets-default',
+              end: 'fill-badges-colors-solid-accent-assets-default'
+            },
+            outline: {
+              base: `
+                bg-badges-colors-outline-accent-background-standard
+                border-badges-colors-outline-accent-stroke-default
+                text-badges-colors-outline-accent-text-default
+              `,
+              start: 'fill-badges-colors-outline-accent-assets-default',
+              end: 'fill-badges-colors-outline-accent-assets-default'
+            },
+            subtle: {
+              base: `
+                bg-badges-colors-subtle-accent-background-standard
+                border-badges-colors-subtle-accent-stroke-default
+                text-badges-colors-subtle-accent-text-default
+              `,
+              start: 'fill-badges-colors-subtle-accent-assets-default',
+              end: 'fill-badges-colors-subtle-accent-assets-default'
+            }
+          }
+        },
+        success: {
+          variants: {
+            filled: {
+              base: `
+                bg-badges-colors-solid-success-background-standard
+                border-badges-colors-solid-success-stroke-default
+                text-badges-colors-solid-success-text-default
+              `,
+              start: 'fill-badges-colors-solid-success-assets-default',
+              end: 'fill-badges-colors-solid-success-assets-default'
+            },
+            outline: {
+              base: `
+                bg-badges-colors-outline-success-background-standard
+                border-badges-colors-outline-success-stroke-default
+                text-badges-colors-outline-success-text-default
+              `,
+              start: 'fill-badges-colors-outline-success-assets-default',
+              end: 'fill-badges-colors-outline-success-assets-default'
+            },
+            subtle: {
+              base: `
+                bg-badges-colors-subtle-success-background-standard
+                border-badges-colors-subtle-success-stroke-default
+                text-badges-colors-subtle-success-text-default
+              `,
+              start: 'fill-badges-colors-subtle-success-assets-default',
+              end: 'fill-badges-colors-subtle-success-assets-default'
+            }
+          }
+        },
+        warning: {
+          variants: {
+            filled: {
+              base: `
+                bg-badges-colors-solid-warning-background-standard
+                border-badges-colors-solid-warning-stroke-default
+                text-badges-colors-solid-warning-text-default
+              `,
+              start: 'fill-badges-colors-solid-warning-assets-default',
+              end: 'fill-badges-colors-solid-warning-assets-default'
+            },
+            outline: {
+              base: `
+                bg-badges-colors-outline-warning-background-standard
+                border-badges-colors-outline-warning-stroke-default
+                text-badges-colors-outline-warning-text-default
+              `,
+              start: 'fill-badges-colors-outline-warning-assets-default',
+              end: 'fill-badges-colors-outline-warning-assets-default'
+            },
+            subtle: {
+              base: `
+                bg-badges-colors-subtle-warning-background-standard
+                border-badges-colors-subtle-warning-stroke-default
+                text-badges-colors-subtle-warning-text-default
+              `,
+              start: 'fill-badges-colors-subtle-warning-assets-default',
+              end: 'fill-badges-colors-subtle-warning-assets-default'
+            }
+          }
+        },
+        error: {
+          variants: {
+            filled: {
+              base: `
+                bg-badges-colors-solid-error-background-standard
+                border-badges-colors-solid-error-stroke-default
+                text-badges-colors-solid-error-text-default
+              `,
+              start: 'fill-badges-colors-solid-error-assets-default',
+              end: 'fill-badges-colors-solid-error-assets-default'
+            },
+            outline: {
+              base: `
+                bg-badges-colors-outline-error-background-standard
+                border-badges-colors-outline-error-stroke-default
+                text-badges-colors-outline-error-text-default
+              `,
+              start: 'fill-badges-colors-outline-error-assets-default',
+              end: 'fill-badges-colors-outline-error-assets-default'
+            },
+            subtle: {
+              base: `
+                bg-badges-colors-subtle-error-background-standard
+                border-badges-colors-subtle-error-stroke-default
+                text-badges-colors-subtle-error-text-default
+              `,
+              start: 'fill-badges-colors-subtle-error-assets-default',
+              end: 'fill-badges-colors-subtle-error-assets-default'
+            }
+          }
+        },
+        info: {
+          variants: {
+            filled: {
+              base: `
+                bg-badges-colors-solid-info-background-standard
+                border-badges-colors-solid-info-stroke-default
+                text-badges-colors-solid-info-text-default
+              `,
+              start: 'fill-badges-colors-solid-info-assets-default',
+              end: 'fill-badges-colors-solid-info-assets-default'
+            },
+            outline: {
+              base: `
+                bg-badges-colors-outline-info-background-standard
+                border-badges-colors-outline-info-stroke-default
+                text-badges-colors-outline-info-text-default
+              `,
+              start: 'fill-badges-colors-outline-info-assets-default',
+              end: 'fill-badges-colors-outline-info-assets-default'
+            },
+            subtle: {
+              base: `
+                bg-badges-colors-subtle-info-background-standard
+                border-badges-colors-subtle-info-stroke-default
+                text-badges-colors-subtle-info-text-default
+              `,
+              start: 'fill-badges-colors-subtle-info-assets-default',
+              end: 'fill-badges-colors-subtle-info-assets-default'
+            }
           }
         }
-      }
-    },
-    success: {
-      variants: {
-        filled: 'bg-success border-success text-panel',
-        outline: 'text-success border-panel-accent'
       },
-      selectable: {
-        base: `${baseTheme.colors.success.selectable.base}`,
-        variants: {
-          filled: {
-            base: 'hover:bg-success-hover hover:border-success-hover',
-            selected: 'bg-success-hover'
-          },
-          outline: {
-            base: 'hover:text-success-hover hover:border-success',
-            selected: 'border-success'
-          }
+      adornment: {
+        base: 'flex items-center justify-center',
+        start: '',
+        end: '',
+        sizes: {
+          small: '[&>svg]:size-(--badges-details-asset-size-sm)',
+          medium: '[&>svg]:size-(--badges-details-asset-size-md)',
+          large: '[&>svg]:size-(--badges-details-asset-size-lg)'
         }
+      },
+      sizes: {
+        small:
+          'h-(--badges-details-height-sm) text-xs gap-(--badges-details-space-between-sm) px-(--badges-details-horizontal-padding-sm)',
+        medium:
+          'h-(--badges-details-height-md) text-xs gap-(--badges-details-space-between-md) px-(--badges-details-horizontal-padding-md)',
+        large:
+          'h-(--badges-details-height-lg) text-md gap-(--badges-details-space-between-lg) px-(--badges-details-horizontal-padding-lg)'
+      },
+      variants: {
+        filled: '',
+        outline: '',
+        subtle: ''
       }
     },
-    warning: {
-      variants: {
-        filled: 'bg-warning border-warning text-panel',
-        outline: 'text-warning border-panel-accent'
-      },
-      selectable: {
-        base: `${baseTheme.colors.warning.selectable.base}`,
-        variants: {
-          filled: {
-            base: 'hover:bg-warning-hover hover:border-warning-hover hover:text-panel',
-            selected: 'bg-warning-hover'
-          },
-          outline: {
-            base: 'hover:text-warning-hover hover:border-warning',
-            selected: 'border-warning'
+    tag: {
+      base: 'inline-flex whitespace-nowrap border font-medium select-none items-center justify-center rounded-(--tags-details-corner-radius-base) transition-colors outline-none',
+      label: '',
+      colors: {
+        default: {
+          base: 'text-tags-colors-neutral-text-label-base',
+          variants: {
+            outline: {
+              base: `
+                border-tags-colors-neutral-stroke-resting bg-tags-colors-neutral-background-resting
+              `,
+              selected: `
+                border-tags-colors-neutral-stroke-selected bg-tags-colors-neutral-background-selected
+                hover:border-tags-colors-neutral-stroke-selected hover:bg-tags-colors-neutral-background-selected
+              `,
+              selectable: `
+                hover:border-tags-colors-neutral-stroke-hover hover:bg-tags-colors-neutral-background-hover
+                focus-visible:border-tags-colors-neutral-stroke-hover focus-visible:bg-tags-colors-neutral-background-hover
+              `,
+              start: 'text-tags-colors-neutral-assets-lead-icon-base',
+              end: 'text-tags-colors-neutral-assets-lead-icon-base'
+            }
+          }
+        },
+        primary: {
+          variants: {
+            outline: {
+              base: `
+                border-tags-colors-brand-stroke-resting bg-tags-colors-brand-background-resting
+              `,
+              selected: `
+                border-tags-colors-brand-stroke-selected bg-tags-colors-brand-background-selected
+                hover:border-tags-colors-brand-stroke-selected hover:bg-tags-colors-brand-background-selected
+              `,
+              selectable: `
+                hover:border-tags-colors-brand-stroke-hover hover:bg-tags-colors-brand-background-hover
+                focus-visible:border-tags-colors-brand-stroke-hover focus-visible:bg-tags-colors-brand-background-hover
+              `,
+              start: 'text-tags-colors-brand-assets-lead-icon-base',
+              end: 'text-tags-colors-brand-assets-lead-icon-base'
+            }
+          }
+        },
+        secondary: {
+          variants: {
+            outline: {
+              base: `
+                border-tags-colors-accent-stroke-resting bg-tags-colors-accent-background-resting
+              `,
+              selected: `
+                border-tags-colors-accent-stroke-selected bg-tags-colors-accent-background-selected
+                hover:border-tags-colors-accent-stroke-selected hover:bg-tags-colors-accent-background-selected
+              `,
+              selectable: `
+                hover:border-tags-colors-accent-stroke-hover hover:bg-tags-colors-accent-background-hover
+                focus-visible:border-tags-colors-accent-stroke-hover focus-visible:bg-tags-colors-accent-background-hover
+              `,
+              start: 'text-tags-colors-accent-assets-lead-icon-base',
+              end: 'text-tags-colors-accent-assets-lead-icon-base'
+            }
+          }
+        },
+        success: {
+          variants: {
+            outline: {
+              base: `
+                border-tags-colors-success-stroke-resting bg-tags-colors-success-background-resting
+              `,
+              selected: `
+                border-tags-colors-success-stroke-selected bg-tags-colors-success-background-selected
+                hover:border-tags-colors-success-stroke-selected hover:bg-tags-colors-success-background-selected
+              `,
+              selectable: `
+                hover:border-tags-colors-success-stroke-hover hover:bg-tags-colors-success-background-hover
+                focus-visible:border-tags-colors-success-stroke-hover focus-visible:bg-tags-colors-success-background-hover
+              `,
+              start: 'text-tags-colors-success-assets-lead-icon-base',
+              end: 'text-tags-colors-success-assets-lead-icon-base'
+            }
+          }
+        },
+        warning: {
+          variants: {
+            outline: {
+              base: `
+                border-tags-colors-warning-stroke-resting bg-tags-colors-warning-background-resting
+              `,
+              selected: `
+                border-tags-colors-warning-stroke-selected bg-tags-colors-warning-background-selected
+                hover:border-tags-colors-warning-stroke-selected hover:bg-tags-colors-warning-background-selected
+              `,
+              selectable: `
+                hover:border-tags-colors-warning-stroke-hover hover:bg-tags-colors-warning-background-hover
+                focus-visible:border-tags-colors-warning-stroke-hover focus-visible:bg-tags-colors-warning-background-hover
+              `,
+              start: 'text-tags-colors-warning-assets-lead-icon-base',
+              end: 'text-tags-colors-warning-assets-lead-icon-base'
+            }
+          }
+        },
+        error: {
+          variants: {
+            outline: {
+              base: `
+                border-tags-colors-error-stroke-resting bg-tags-colors-error-background-resting
+              `,
+              selected: `
+                border-tags-colors-error-stroke-selected bg-tags-colors-error-background-selected
+                hover:border-tags-colors-error-stroke-selected hover:bg-tags-colors-error-background-selected
+              `,
+              selectable: `
+                hover:border-tags-colors-error-stroke-hover hover:bg-tags-colors-error-background-hover
+                focus-visible:border-tags-colors-error-stroke-hover focus-visible:bg-tags-colors-error-background-hover
+              `,
+              start: 'text-tags-colors-error-assets-lead-icon-base',
+              end: 'text-tags-colors-error-assets-lead-icon-base'
+            }
+          }
+        },
+        info: {
+          variants: {
+            outline: {
+              base: `
+                border-tags-colors-info-stroke-resting bg-tags-colors-info-background-resting
+              `,
+              selected: `
+                border-tags-colors-info-stroke-selected bg-tags-colors-info-background-selected
+                hover:border-tags-colors-info-stroke-selected hover:bg-tags-colors-info-background-selected
+              `,
+              selectable: `
+                hover:border-tags-colors-info-stroke-hover hover:bg-tags-colors-info-background-hover
+                focus-visible:border-tags-colors-info-stroke-hover focus-visible:bg-tags-colors-info-background-hover
+              `,
+              start: 'text-tags-colors-info-assets-lead-icon-base',
+              end: 'text-tags-colors-info-assets-lead-icon-base'
+            }
           }
         }
-      }
-    },
-    error: {
-      variants: {
-        filled: 'bg-error border-error text-panel',
-        outline: 'text-error border-panel-accent'
       },
-      selectable: {
-        base: `${baseTheme.colors.error.selectable.base}`,
-        variants: {
-          filled: {
-            base: 'hover:bg-error-hover hover:border-error-hover hover:text-panel',
-            selected: 'bg-error-hover'
-          },
-          outline: {
-            base: 'hover:text-error-hover hover:border-error',
-            selected: 'border-error'
-          }
+      adornment: {
+        base: 'flex items-center justify-center',
+        start: '',
+        end: '',
+        sizes: {
+          small: '[&>svg]:size-(--tags-details-asset-size-icon)',
+          medium: '[&>svg]:size-(--tags-details-asset-size-icon)',
+          large: '[&>svg]:size-(--tags-details-asset-size-icon)'
         }
-      }
-    },
-    info: {
-      variants: {
-        filled: 'bg-info border-info text-panel',
-        outline: 'text-info border-panel-accent'
       },
-      selectable: {
-        base: `${baseTheme.colors.info.selectable.base}`,
-        variants: {
-          filled: {
-            base: 'hover:bg-info-hover hover:border-info-hover hover:text-panel',
-            selected: 'bg-info-hover'
-          },
-          outline: {
-            base: 'hover:text-info-hover hover:border-info',
-            selected: 'border-info'
-          }
+      sizes: {
+        small:
+          'h-(--tags-details-height-base) text-xxs gap-(--tags-details-space-between-base) px-(--tags-details-horizontal-padding-base)',
+        medium:
+          'h-(--tags-details-height-base) text-xs gap-(--tags-details-space-between-base) px-(--tags-details-horizontal-padding-base)',
+        large:
+          'h-(--tags-details-height-base) text-sm gap-(--tags-details-space-between-base) px-(--tags-details-horizontal-padding-base)'
+      },
+      closeButton: {
+        base: 'transition-colors ml-1 outline-none text-tags-colors-neutral-assets-close-base hover:text-tags-colors-neutral-text-label-base',
+        sizes: {
+          small: 'size-2 [*>svg]:size-(--tags-details-asset-size-close)',
+          medium: 'size-3 [*>svg]:size-(--tags-details-asset-size-close)',
+          large: 'size-3 [*>svg]:size-(--tags-details-asset-size-close)'
         }
+      },
+      disabled: 'cursor-not-allowed opacity-50',
+      variants: {
+        outline: ''
       }
     }
-  },
-  deleteButton: baseTheme.deleteButton,
-  disabled: baseTheme.disabled
-};
-
-export const legacyChipTheme: ChipTheme = {
-  base: [
-    baseTheme.base,
-    '[font-family:_var(--chip-font-family)] rounded-[var(--chip-border-radius)]'
-  ].join(' '),
-  adornment: {
-    ...baseTheme.adornment,
-    start: [baseTheme.adornment.start, 'pr-[var(--spacing-xs)]'].join(' '),
-    end: [baseTheme.adornment.end, 'pl-[var(--spacing-xs)]'].join(' ')
-  },
-  sizes: {
-    small: [baseTheme.sizes.small, 'p-[var(--spacing-xs)]'].join(' '),
-    medium: [
-      baseTheme.sizes.medium,
-      'py-[var(--spacing-xs)] px-[var(--spacing-md)]'
-    ].join(' '),
-    large: [baseTheme.sizes.large, 'p-[var(--spacing-md)]'].join(' ')
-  },
-  focus: baseTheme.focus,
-  variants: {
-    filled: '[&>svg]:fill-[var(--chip-color)]',
-    outline:
-      'bg-opacity-0 border hover:bg-transparent border-[var(--chip-background)] text-[var(--chip-color)] [&>svg]:fill-[var(--chip-color)]'
-  },
-  colors: {
-    default: {
-      base: 'bg-[var(--chip-background)] border-[var(--chip-background)] text-[var(--chip-color)] ',
-      variants: baseTheme.colors.default.variants,
-      selectable: baseTheme.colors.default.selectable
-    },
-    primary: {
-      base: 'bg-[color:var(--primary-background)] border-[color:var(--primary-background)]',
-      variants: baseTheme.colors.primary.variants,
-      selectable: baseTheme.colors.primary.selectable
-    },
-    secondary: {
-      base: 'bg-[color:var(--secondary-background)] border-[color:var(--secondary-background)]',
-      variants: baseTheme.colors.secondary.variants,
-      selectable: baseTheme.colors.secondary.selectable
-    },
-    success: {
-      base: 'bg-[color:var(--success-background)] border-[color:var(--success-background)]',
-      variants: baseTheme.colors.success.variants,
-      selectable: baseTheme.colors.success.selectable
-    },
-    warning: {
-      base: 'bg-[color:var(--warning-background)] border-[color:var(--warning-background)]',
-      variants: baseTheme.colors.warning.variants,
-      selectable: baseTheme.colors.warning.selectable
-    },
-    error: {
-      base: 'bg-[color:var(--error-background)] border-[color:var(--error-background)]',
-      variants: baseTheme.colors.error.variants,
-      selectable: baseTheme.colors.error.selectable
-    },
-    info: {
-      base: 'bg-[color:var(--info-background)] border-[color:var(--info-background)]',
-      variants: baseTheme.colors.info.variants,
-      selectable: baseTheme.colors.info.selectable
-    }
-  },
-  deleteButton: baseTheme.deleteButton,
-  disabled: baseTheme.disabled
+  }
 };
diff --git a/src/elements/Chip/DeletableChip.story.tsx b/src/elements/Chip/DeletableChip.story.tsx
deleted file mode 100644
index 1ed54fca2..000000000
--- a/src/elements/Chip/DeletableChip.story.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { DeletableChip } from './DeletableChip';
-
-export default {
-  title: 'Components/Elements/Chip/DeletableChip',
-  component: DeletableChip
-};
-
-export const Simple = () => (
-  <DeletableChip onDelete={() => console.log('on delete')}>
-    Deletable
-  </DeletableChip>
-);
-
-export const Sizes = () => (
-  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-    <DeletableChip size="small" onDelete={() => console.log('on delete')}>
-      Deletable
-    </DeletableChip>
-    <DeletableChip size="medium" onDelete={() => console.log('on delete')}>
-      Deletable
-    </DeletableChip>
-    <DeletableChip size="large" onDelete={() => console.log('on delete')}>
-      Deletable
-    </DeletableChip>
-  </div>
-);
diff --git a/src/elements/Chip/DeletableChip.tsx b/src/elements/Chip/DeletableChip.tsx
index c74d6f3f4..08d011b1c 100644
--- a/src/elements/Chip/DeletableChip.tsx
+++ b/src/elements/Chip/DeletableChip.tsx
@@ -1,11 +1,18 @@
-import React, { FC, forwardRef, ReactElement } from 'react';
-import { twMerge } from 'tailwind-merge';
+import type { ReactElement } from 'react';
+import React, { forwardRef } from 'react';
+
+import type { ChipTheme } from '@/elements';
 import { Button } from '@/elements/Button';
-import { Chip, ChipProps, ChipRef } from './Chip';
 import { CloseIcon } from '@/form';
-import { ChipTheme } from './ChipTheme';
+import { twMerge } from '@/utils';
 import { useComponentTheme } from '@/utils';
 
+import type { ChipProps } from './Chip';
+import { Chip } from './Chip';
+
+/**
+ * @deprecated
+ */
 export interface DeletableChipProps extends Omit<ChipProps, 'end'> {
   /**
    * Customize delete icon.
@@ -23,7 +30,10 @@ export interface DeletableChipProps extends Omit<ChipProps, 'end'> {
   theme?: ChipTheme;
 }
 
-export const DeletableChip: FC<DeletableChipProps & ChipRef> = forwardRef(
+/**
+ * @deprecated
+ */
+export const DeletableChip = forwardRef<HTMLDivElement, DeletableChipProps>(
   (
     {
       children,
@@ -52,8 +62,8 @@ export const DeletableChip: FC<DeletableChipProps & ChipRef> = forwardRef(
             variant="text"
             size={size}
             className={twMerge(
-              theme.deleteButton.base,
-              theme.deleteButton[size]
+              theme.types.tag.closeButton.base,
+              theme.types.tag.closeButton.sizes[size]
             )}
             onClick={event => {
               if (!disabled) {
diff --git a/src/elements/Chip/index.ts b/src/elements/Chip/index.ts
index 0d9febcda..4e9b86a6b 100644
--- a/src/elements/Chip/index.ts
+++ b/src/elements/Chip/index.ts
@@ -1,3 +1,3 @@
 export * from './Chip';
-export * from './DeletableChip';
 export * from './ChipTheme';
+export * from './DeletableChip';
diff --git a/src/elements/CommandPalette/CommandPalette.story.tsx b/src/elements/CommandPalette/CommandPalette.story.tsx
index 7aae65fee..5548993cc 100644
--- a/src/elements/CommandPalette/CommandPalette.story.tsx
+++ b/src/elements/CommandPalette/CommandPalette.story.tsx
@@ -1,10 +1,11 @@
-import { CommandPalette } from './CommandPalette';
-import { Dialog } from '../../layers/Dialog';
+import { CommandPalette } from '@/elements';
+import { CommandPaletteSection } from '@/elements';
+import { CommandPaletteItem } from '@/elements';
+import { Dialog } from '@/layers';
+import { Divider } from '@/layout';
+import { Stack } from '@/layout';
+
 import { Chip } from '../Chip';
-import { Divider } from '../../layout/Divider';
-import { Stack } from '../../layout/Stack';
-import { CommandPaletteSection } from './CommandPaletteSection';
-import { CommandPaletteItem } from './CommandPaletteItem';
 
 export default {
   title: 'Components/Data/Command Palette',
@@ -129,7 +130,14 @@ export const LongList = () => (
 );
 
 export const WithDialog = () => (
-  <Dialog open size={400} showCloseButton={false} disablePadding>
+  <Dialog
+    innerClassName="border-none!"
+    contentClassName="p-2!"
+    open
+    size={400}
+    showCloseButton={false}
+    disablePadding
+  >
     <CommandPalette placeholder="Type a command or search...">
       <CommandPaletteSection title="Recently Used" key="recent">
         <CommandPaletteItem key="home">Home</CommandPaletteItem>
diff --git a/src/elements/CommandPalette/CommandPalette.tsx b/src/elements/CommandPalette/CommandPalette.tsx
index e52bbda94..00ff97263 100644
--- a/src/elements/CommandPalette/CommandPalette.tsx
+++ b/src/elements/CommandPalette/CommandPalette.tsx
@@ -1,24 +1,15 @@
-import React, {
-  FC,
-  useState,
-  PropsWithChildren,
-  useEffect,
-  KeyboardEvent,
-  Children,
-  useRef,
-  ReactNode
-} from 'react';
-import { CommandPaletteInput } from './CommandPaletteInput';
-import {
-  DATA_ATTRIBUTE_INDEX,
-  HotkeyIem,
-  useFlattenedTree
-} from './useFlattenedTree';
-import { List, ListItem } from '@/layout/List';
+import type { FC, KeyboardEvent, PropsWithChildren, ReactNode } from 'react';
+import React, { Children, useEffect, useRef, useState } from 'react';
+
 import { Card } from '@/layout/Card';
+import { List, ListItem } from '@/layout/List';
 import { MotionGroup } from '@/layout/Motion';
 import { useComponentTheme } from '@/utils';
-import { CommandPaletteTheme } from './CommandPaletteTheme';
+
+import { CommandPaletteInput } from './CommandPaletteInput';
+import type { CommandPaletteTheme } from './CommandPaletteTheme';
+import type { HotkeyIem } from './useFlattenedTree';
+import { DATA_ATTRIBUTE_INDEX, useFlattenedTree } from './useFlattenedTree';
 
 export interface CommandPaletteProps extends PropsWithChildren {
   /**
diff --git a/src/elements/CommandPalette/CommandPaletteInput/CommandPaletteInput.tsx b/src/elements/CommandPalette/CommandPaletteInput/CommandPaletteInput.tsx
index 4db678631..1b8508006 100644
--- a/src/elements/CommandPalette/CommandPaletteInput/CommandPaletteInput.tsx
+++ b/src/elements/CommandPalette/CommandPaletteInput/CommandPaletteInput.tsx
@@ -1,18 +1,13 @@
-import React, {
-  FC,
-  KeyboardEvent,
-  FocusEvent,
-  ReactNode,
-  useEffect,
-  useLayoutEffect,
-  useRef
-} from 'react';
-import { SearchIcon } from './SearchIcon';
-import { HotkeyIem } from '@/elements/CommandPalette/useFlattenedTree';
-import { CommandPaletteTheme } from '@/elements/CommandPalette/CommandPaletteTheme';
-import { useComponentTheme } from '@/utils';
 import type { HandlerInterface, Key } from 'ctrl-keys';
 import { keys } from 'ctrl-keys';
+import type { FC, FocusEvent, KeyboardEvent, ReactNode } from 'react';
+import React, { useEffect, useLayoutEffect, useRef } from 'react';
+
+import type { CommandPaletteTheme } from '@/elements/CommandPalette/CommandPaletteTheme';
+import type { HotkeyIem } from '@/elements/CommandPalette/useFlattenedTree';
+import { useComponentTheme } from '@/utils';
+
+import { SearchIcon } from './SearchIcon';
 
 export interface CommandPaletteInputProps {
   /**
diff --git a/src/elements/CommandPalette/CommandPaletteInput/CommandPaletteInputTheme.ts b/src/elements/CommandPalette/CommandPaletteInput/CommandPaletteInputTheme.ts
index 31cc19ccd..306ec4b6e 100644
--- a/src/elements/CommandPalette/CommandPaletteInput/CommandPaletteInputTheme.ts
+++ b/src/elements/CommandPalette/CommandPaletteInput/CommandPaletteInputTheme.ts
@@ -4,29 +4,9 @@ export interface CommandPaletteInputTheme {
   icon: string;
 }
 
-const baseTheme: CommandPaletteInputTheme = {
-  base: 'flex w-full items-center border-b-2',
+export const commandPaletteInputTheme: CommandPaletteInputTheme = {
+  base: 'flex w-full items-center border-b-2 border-bottom border-stroke-neutral-1',
   input:
     'flex-1 border-0 box-border p-2.5 focus-within:outline-hidden focus-visible:outline-hidden',
   icon: 'w-4 h-4 ml-2.5'
 };
-
-export const commandPaletteInputTheme: CommandPaletteInputTheme = {
-  ...baseTheme,
-  base: [baseTheme.base, 'bg-panel border-bottom border-panel-accent'].join(
-    ' '
-  ),
-  input: [
-    baseTheme.input,
-    'bg-panel text-text-primary placeholder:placeholder-accent'
-  ].join(' ')
-};
-
-export const cssVarsCommandPaletteInputTheme: CommandPaletteInputTheme = {
-  ...baseTheme,
-  base: [baseTheme.base, 'border-[var(--body-background)]'].join(' '),
-  input: [
-    baseTheme.input,
-    'text-[var(--input-color)] placeholder:text-[var(--input-color-placeholder)] [padding:_var(--spacing-md)] [font-family:_var(--font-family)]'
-  ].join(' ')
-};
diff --git a/src/elements/CommandPalette/CommandPaletteInput/SearchIcon.tsx b/src/elements/CommandPalette/CommandPaletteInput/SearchIcon.tsx
index 99057e4f2..523d24938 100644
--- a/src/elements/CommandPalette/CommandPaletteInput/SearchIcon.tsx
+++ b/src/elements/CommandPalette/CommandPaletteInput/SearchIcon.tsx
@@ -1,4 +1,5 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
 
 export const SearchIcon: FC = () => (
   <svg
diff --git a/src/elements/CommandPalette/CommandPaletteItem/CommandPaletteItem.tsx b/src/elements/CommandPalette/CommandPaletteItem/CommandPaletteItem.tsx
index 7be5e4e09..cb4d0b9a6 100644
--- a/src/elements/CommandPalette/CommandPaletteItem/CommandPaletteItem.tsx
+++ b/src/elements/CommandPalette/CommandPaletteItem/CommandPaletteItem.tsx
@@ -1,10 +1,12 @@
 import React, { forwardRef } from 'react';
-import { ListItem, ListItemProps } from '@/layout';
-import { MotionItem } from '@/layout';
+
+import type { CommandPaletteTheme } from '@/elements/CommandPalette/CommandPaletteTheme';
 import { Kbd } from '@/elements/Kbd';
-import { twMerge } from 'tailwind-merge';
+import type { ListItemProps } from '@/layout';
+import { ListItem } from '@/layout';
+import { MotionItem } from '@/layout';
+import { twMerge } from '@/utils';
 import { useComponentTheme } from '@/utils';
-import { CommandPaletteTheme } from '@/elements/CommandPalette/CommandPaletteTheme';
 
 export interface CommandPaletteItemProps extends Omit<ListItemProps, 'theme'> {
   hotkey?: string;
diff --git a/src/elements/CommandPalette/CommandPaletteItem/CommandPaletteItemTheme.ts b/src/elements/CommandPalette/CommandPaletteItem/CommandPaletteItemTheme.ts
index 8fabde807..59b8f652a 100644
--- a/src/elements/CommandPalette/CommandPaletteItem/CommandPaletteItemTheme.ts
+++ b/src/elements/CommandPalette/CommandPaletteItem/CommandPaletteItemTheme.ts
@@ -4,25 +4,8 @@ export interface CommandPaletteItemTheme {
   clickable: string;
 }
 
-const baseTheme: CommandPaletteItemTheme = {
-  base: 'transition-colors ease-in-out duration-200',
-  active: '',
-  clickable: 'cursor-pointer'
-};
-
 export const commandPaletteItemTheme: CommandPaletteItemTheme = {
-  ...baseTheme,
-  active: [baseTheme.active, 'bg-primary text-text-primary'].join(' '),
-  clickable: [
-    baseTheme.clickable,
-    'hover:bg-primary-hover/70 dark:hover:bg-primary-hover dark:hover:text-white'
-  ].join(' ')
-};
-
-export const cssVarsCommandPaletteItemTheme: CommandPaletteItemTheme = {
-  ...baseTheme,
-  clickable: [
-    baseTheme.clickable,
-    'hover:bg-[var(--primary-background)] text-[var(--primary-color-hover)]'
-  ].join(' ')
+  base: 'transition-colors ease-in-out duration-200',
+  active: 'bg-background-brand-base',
+  clickable: 'cursor-pointer hover:bg-background-brand-base/70'
 };
diff --git a/src/elements/CommandPalette/CommandPaletteSection/CommandPaletteSection.tsx b/src/elements/CommandPalette/CommandPaletteSection/CommandPaletteSection.tsx
index c3972c0cb..99f053132 100644
--- a/src/elements/CommandPalette/CommandPaletteSection/CommandPaletteSection.tsx
+++ b/src/elements/CommandPalette/CommandPaletteSection/CommandPaletteSection.tsx
@@ -1,9 +1,11 @@
-import React, { PropsWithChildren, forwardRef } from 'react';
+import type { PropsWithChildren } from 'react';
+import React, { forwardRef } from 'react';
+
+import type { CommandPaletteTheme } from '@/elements/CommandPalette/CommandPaletteTheme';
 import { List, ListHeader } from '@/layout';
 import { MotionGroup, MotionItem } from '@/layout';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@/utils';
 import { useComponentTheme } from '@/utils';
-import { CommandPaletteTheme } from '@/elements/CommandPalette/CommandPaletteTheme';
 
 export interface CommandPaletteSectionProps extends PropsWithChildren {
   /**
diff --git a/src/elements/CommandPalette/CommandPaletteSection/CommandPaletteSectionTheme.ts b/src/elements/CommandPalette/CommandPaletteSection/CommandPaletteSectionTheme.ts
index ca7c66a54..4021957d4 100644
--- a/src/elements/CommandPalette/CommandPaletteSection/CommandPaletteSectionTheme.ts
+++ b/src/elements/CommandPalette/CommandPaletteSection/CommandPaletteSectionTheme.ts
@@ -10,10 +10,5 @@ const baseTheme: CommandPaletteSectionTheme = {
 
 export const commandPaletteSectionTheme: CommandPaletteSectionTheme = {
   ...baseTheme,
-  base: [baseTheme.base, 'bg-panel'].join(' ')
-};
-
-export const cssVarsCommandPaletteSectionTheme: CommandPaletteSectionTheme = {
-  ...baseTheme,
-  first: 'pt-[var(--spacing-md)]'
+  base: [baseTheme.base, 'bg-background-neutral-inverse-raised-1'].join(' ')
 };
diff --git a/src/elements/CommandPalette/CommandPaletteTheme.ts b/src/elements/CommandPalette/CommandPaletteTheme.ts
index 0b0e6b59c..836b3b1f0 100644
--- a/src/elements/CommandPalette/CommandPaletteTheme.ts
+++ b/src/elements/CommandPalette/CommandPaletteTheme.ts
@@ -1,18 +1,9 @@
-import {
-  CommandPaletteInputTheme,
-  cssVarsCommandPaletteInputTheme,
-  commandPaletteInputTheme
-} from './CommandPaletteInput';
-import {
-  CommandPaletteItemTheme,
-  cssVarsCommandPaletteItemTheme,
-  commandPaletteItemTheme
-} from './CommandPaletteItem';
-import {
-  CommandPaletteSectionTheme,
-  cssVarsCommandPaletteSectionTheme,
-  commandPaletteSectionTheme
-} from './CommandPaletteSection';
+import type { CommandPaletteInputTheme } from './CommandPaletteInput';
+import { commandPaletteInputTheme } from './CommandPaletteInput/CommandPaletteInputTheme';
+import type { CommandPaletteItemTheme } from './CommandPaletteItem';
+import { commandPaletteItemTheme } from './CommandPaletteItem/CommandPaletteItemTheme';
+import type { CommandPaletteSectionTheme } from './CommandPaletteSection';
+import { commandPaletteSectionTheme } from './CommandPaletteSection/CommandPaletteSectionTheme';
 
 export interface CommandPaletteTheme {
   base: string;
@@ -23,25 +14,11 @@ export interface CommandPaletteTheme {
   section: CommandPaletteSectionTheme;
 }
 
-const baseTheme: Partial<CommandPaletteTheme> = {
-  base: 'w-full border',
-  inner: 'max-h-[80vh] overflow-y-auto'
-};
-
 export const commandPaletteTheme: CommandPaletteTheme = {
-  base: [baseTheme.base, 'border-panel-accent'].join(' '),
-  inner: [baseTheme.inner, 'bg-panel border-0'].join(' '),
-  emptyContainer: 'bg-panel',
+  base: 'w-full border border-stroke-neutral-1',
+  inner: 'max-h-[80vh] overflow-y-auto border-0',
+  emptyContainer: '',
   input: commandPaletteInputTheme,
   item: commandPaletteItemTheme,
   section: commandPaletteSectionTheme
 };
-
-export const legacyCommandPaletteTheme: CommandPaletteTheme = {
-  base: [baseTheme.base, 'border-panel-accent'].join(' '),
-  inner: baseTheme.inner,
-  emptyContainer: '',
-  input: cssVarsCommandPaletteInputTheme,
-  item: cssVarsCommandPaletteItemTheme,
-  section: cssVarsCommandPaletteSectionTheme
-};
diff --git a/src/elements/CommandPalette/index.ts b/src/elements/CommandPalette/index.ts
index db8fa90d4..abd8e3acb 100644
--- a/src/elements/CommandPalette/index.ts
+++ b/src/elements/CommandPalette/index.ts
@@ -1,5 +1,5 @@
 export * from './CommandPalette';
+export * from './CommandPaletteInput';
 export * from './CommandPaletteItem';
 export * from './CommandPaletteSection';
-export * from './CommandPaletteInput';
 export * from './CommandPaletteTheme';
diff --git a/src/elements/CommandPalette/useFlattenedTree.ts b/src/elements/CommandPalette/useFlattenedTree.ts
index cfe9142a6..4a512356e 100644
--- a/src/elements/CommandPalette/useFlattenedTree.ts
+++ b/src/elements/CommandPalette/useFlattenedTree.ts
@@ -1,12 +1,11 @@
+import type { ReactNode, RefObject } from 'react';
 import {
   Children,
   cloneElement,
   isValidElement,
-  ReactNode,
-  RefObject,
+  useEffect,
   useRef,
-  useState,
-  useEffect
+  useState
 } from 'react';
 
 export const DATA_ATTRIBUTE_INDEX = 'keyboard_index';
@@ -35,7 +34,7 @@ export const useFlattenedTree = (
 
     Children.forEach(nodes, (child: ReactNode, index) => {
       if (isValidElement(child)) {
-        // @ts-ignore
+        // @ts-expect-error unexpected displayName
         if (child.type.displayName === 'CommandPaletteSection') {
           result.push(
             cloneElement(child, {
@@ -43,7 +42,7 @@ export const useFlattenedTree = (
               index
             })
           );
-          // @ts-ignore
+          // @ts-expect-error unexpected displayName
         } else if (child.type.displayName === 'CommandPaletteItem') {
           const index = itemsRef.current.length;
 
diff --git a/src/elements/IconButton/IconButton.story.tsx b/src/elements/IconButton/IconButton.story.tsx
index e75e11727..4b7cc3ca1 100644
--- a/src/elements/IconButton/IconButton.story.tsx
+++ b/src/elements/IconButton/IconButton.story.tsx
@@ -1,11 +1,9 @@
-import { IconButton } from './IconButton';
 import { Stack } from '../../layout';
-import {
-  extendTheme,
-  PartialReablocksTheme
-} from '../../utils/Theme/themes/extendTheme';
 import { ThemeProvider } from '../../utils/Theme/ThemeProvider';
+import type { PartialReablocksTheme } from '../../utils/Theme/themes/extendTheme';
+import { extendTheme } from '../../utils/Theme/themes/extendTheme';
 import { theme } from '../../utils/Theme/themes/theme';
+import { IconButton } from './IconButton';
 
 export default {
   title: 'Components/Elements/IconButton',
@@ -24,6 +22,23 @@ const BellIcon = () => (
   </svg>
 );
 
+export const Variants = () => (
+  <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
+    <IconButton size="medium">
+      <BellIcon />
+    </IconButton>
+    <IconButton size="medium" variant="outline">
+      <BellIcon />
+    </IconButton>
+    <IconButton size="medium" variant="text">
+      <BellIcon />
+    </IconButton>
+    <IconButton size="medium" variant="ghost">
+      <BellIcon />
+    </IconButton>
+  </div>
+);
+
 export const Sizes = () => (
   <Stack>
     <IconButton size="small">
@@ -38,102 +53,89 @@ export const Sizes = () => (
   </Stack>
 );
 
-export const ColorsBackground = () => (
+export const ColorsFilled = () => (
   <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
-    <IconButton size="medium" variant="filled">
-      <BellIcon />
-    </IconButton>
     <IconButton size="medium" variant="filled" color="primary">
       <BellIcon />
     </IconButton>
     <IconButton size="medium" variant="filled" color="secondary">
       <BellIcon />
     </IconButton>
-    <IconButton size="medium" variant="filled" color="success">
+    <IconButton size="medium" variant="filled" color="destructive">
       <BellIcon />
     </IconButton>
-    <IconButton size="medium" variant="filled" color="warning">
+  </div>
+);
+
+export const ColorsOutline = () => (
+  <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
+    <IconButton size="medium" variant="outline" color="primary">
       <BellIcon />
     </IconButton>
-    <IconButton size="medium" variant="filled" color="error">
+    <IconButton size="medium" variant="outline" color="secondary">
       <BellIcon />
     </IconButton>
-    <IconButton size="medium" variant="filled" disabled>
+    <IconButton size="medium" variant="outline" color="destructive">
       <BellIcon />
     </IconButton>
   </div>
 );
 
-export const ColorsIcons = () => (
+export const ColorsText = () => (
   <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
-    <IconButton size="medium" variant="text">
-      <BellIcon />
-    </IconButton>
     <IconButton size="medium" variant="text" color="primary">
       <BellIcon />
     </IconButton>
     <IconButton size="medium" variant="text" color="secondary">
       <BellIcon />
     </IconButton>
-    <IconButton size="medium" variant="text" color="success">
-      <BellIcon />
-    </IconButton>
-    <IconButton size="medium" variant="text" color="warning">
-      <BellIcon />
-    </IconButton>
-    <IconButton size="medium" variant="text" color="error">
-      <BellIcon />
-    </IconButton>
-    <IconButton size="medium" variant="text" disabled>
+    <IconButton size="medium" variant="text" color="destructive">
       <BellIcon />
     </IconButton>
   </div>
 );
 
-export const ColorsOutline = () => (
+export const ColorsGhost = () => (
   <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
-    <IconButton size="medium" variant="outline">
+    <IconButton size="medium" variant="ghost" color="primary">
       <BellIcon />
     </IconButton>
-    <IconButton size="medium" variant="outline" color="primary">
+    <IconButton size="medium" variant="ghost" color="secondary">
       <BellIcon />
     </IconButton>
-    <IconButton size="medium" variant="outline" color="secondary">
-      <BellIcon />
-    </IconButton>
-    <IconButton size="medium" variant="outline" color="success">
-      <BellIcon />
-    </IconButton>
-    <IconButton size="medium" variant="outline" color="warning">
-      <BellIcon />
-    </IconButton>
-    <IconButton size="medium" variant="outline" color="error">
-      <BellIcon />
-    </IconButton>
-    <IconButton size="medium" variant="outline" disabled>
+    <IconButton size="medium" variant="ghost" color="destructive">
       <BellIcon />
     </IconButton>
   </div>
 );
 
-export const Variants = () => (
+export const Disabled = () => (
   <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
-    <IconButton size="medium">
+    <IconButton disabled size="medium" variant="filled">
       <BellIcon />
     </IconButton>
-    <IconButton size="medium" variant="outline">
+    <IconButton disabled size="medium" variant="outline">
       <BellIcon />
     </IconButton>
-    <IconButton size="medium" variant="text">
+    <IconButton disabled size="medium" variant="text">
+      <BellIcon />
+    </IconButton>
+    <IconButton disabled size="medium" variant="ghost">
       <BellIcon />
     </IconButton>
   </div>
 );
 
-export const Square = () => {
+export const Custom = () => {
   const iconTheme: PartialReablocksTheme = {
     components: {
       button: {
+        colors: {
+          primary: {
+            filled:
+              'bg-pink-plasma-circuit-400 hover:bg-pink-plasma-circuit-600'
+          }
+        },
         iconSizes: {
           small: 'p-1',
           medium: 'p-2',
diff --git a/src/elements/IconButton/IconButton.tsx b/src/elements/IconButton/IconButton.tsx
index 7e060cbef..7b20d059e 100644
--- a/src/elements/IconButton/IconButton.tsx
+++ b/src/elements/IconButton/IconButton.tsx
@@ -1,10 +1,15 @@
-import React, { FC, forwardRef, Ref } from 'react';
-import { Button, ButtonProps, ButtonRef } from '@/elements/Button';
-import { twMerge } from 'tailwind-merge';
+import type { FC, Ref } from 'react';
+import React, { forwardRef } from 'react';
+
+import type { ButtonProps, ButtonRef } from '@/elements/Button';
+import { Button } from '@/elements/Button';
+import { twMerge } from '@/utils';
 import { useComponentTheme } from '@/utils';
 
-export interface IconButtonProps
-  extends Omit<ButtonProps, 'fullWidth' | 'startAdornment' | 'endAdornment'> {}
+export type IconButtonProps = Omit<
+  ButtonProps,
+  'fullWidth' | 'startAdornment' | 'endAdornment'
+>;
 
 export const IconButton: FC<IconButtonProps & ButtonRef> = forwardRef(
   (
diff --git a/src/elements/Kbd/Kbd.story.tsx b/src/elements/Kbd/Kbd.story.tsx
index ecf6a7392..542a53364 100644
--- a/src/elements/Kbd/Kbd.story.tsx
+++ b/src/elements/Kbd/Kbd.story.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { Kbd } from './Kbd';
 
 export default {
diff --git a/src/elements/Kbd/Kbd.tsx b/src/elements/Kbd/Kbd.tsx
index 910897280..36db0c835 100644
--- a/src/elements/Kbd/Kbd.tsx
+++ b/src/elements/Kbd/Kbd.tsx
@@ -1,9 +1,13 @@
-import React, { FC } from 'react';
-import { Chip, ChipProps } from '@/elements/Chip';
-import { getHotkeyText } from './utils';
+import type { FC } from 'react';
+import React from 'react';
+
+import type { ChipProps } from '@/elements/Chip';
+import { Chip } from '@/elements/Chip';
 import { useComponentTheme } from '@/utils';
-import { KbdTheme } from './KbdTheme';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@/utils';
+
+import type { KbdTheme } from './KbdTheme';
+import { getHotkeyText } from './utils';
 
 export interface KbdProps extends Omit<ChipProps, 'children' | 'theme'> {
   /**
diff --git a/src/elements/Kbd/KbdTheme.ts b/src/elements/Kbd/KbdTheme.ts
index d08c951e4..986afcab5 100644
--- a/src/elements/Kbd/KbdTheme.ts
+++ b/src/elements/Kbd/KbdTheme.ts
@@ -3,20 +3,7 @@ export interface KbdTheme {
   chip: string;
 }
 
-const baseTheme: KbdTheme = {
-  base: 'inline-flex gap-1 items-center',
-  chip: 'whitespace-nowrap rounded-sm font-mono'
-};
-
 export const kbdTheme: KbdTheme = {
-  ...baseTheme
-};
-
-export const legacyKbdTheme: KbdTheme = {
-  ...baseTheme,
-  base: [baseTheme.base, 'gap-[var(--spacing-sm)]'].join(' '),
-  chip: [
-    baseTheme.chip,
-    'rounded-[var(--border-radius-sm)] [font-family:_var(--mono-font-family)]'
-  ].join(' ')
+  base: 'inline-flex gap-1 items-center',
+  chip: 'whitespace-nowrap rounded-sm font-mono border-none bg-background-brand-3 text-content-text-neutral-base p-2!'
 };
diff --git a/src/elements/Loader/DotsLoader.story.tsx b/src/elements/Loader/DotsLoader.story.tsx
index 77e9f66a4..f67c584bd 100644
--- a/src/elements/Loader/DotsLoader.story.tsx
+++ b/src/elements/Loader/DotsLoader.story.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { DotsLoader } from './DotsLoader';
 
 export default {
diff --git a/src/elements/Loader/DotsLoader.tsx b/src/elements/Loader/DotsLoader.tsx
index 9dd507449..286da700e 100644
--- a/src/elements/Loader/DotsLoader.tsx
+++ b/src/elements/Loader/DotsLoader.tsx
@@ -1,8 +1,11 @@
-import React, { FC } from 'react';
 import { motion } from 'motion/react';
-import { DotsLoaderTheme } from './DotsLoaderTheme';
+import type { FC } from 'react';
+import React from 'react';
+
 import { useComponentTheme } from '@/utils';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@/utils';
+
+import type { DotsLoaderSizeTheme, DotsLoaderTheme } from './DotsLoaderTheme';
 
 export interface DotsLoaderProps {
   /**
@@ -18,7 +21,7 @@ export interface DotsLoaderProps {
   /**
    * The size of the loader.
    */
-  size?: 'small' | 'medium' | 'large' | string;
+  size?: keyof DotsLoaderSizeTheme;
 
   /**
    * Theme for the DotsLoader.
diff --git a/src/elements/Loader/DotsLoaderTheme.ts b/src/elements/Loader/DotsLoaderTheme.ts
index b88c8c218..cce10fd50 100644
--- a/src/elements/Loader/DotsLoaderTheme.ts
+++ b/src/elements/Loader/DotsLoaderTheme.ts
@@ -1,35 +1,22 @@
+export interface DotsLoaderSizeTheme {
+  small: string;
+  medium: string;
+  large: string;
+  [key: string]: string;
+}
+
 export interface DotsLoaderTheme {
   base: string;
   dot: string;
-  sizes: {
-    small: string;
-    medium: string;
-    large: string;
-    [key: string]: string;
-  };
+  sizes: DotsLoaderSizeTheme;
 }
 
-const baseTheme: DotsLoaderTheme = {
-  base: 'flex',
-  dot: 'rounded-[50%]',
-  sizes: {
-    small: 'w-1 h-1 m-1',
-    medium: 'w-1.5 h-1.5 m-1.5',
-    large: 'w-2 h-2 m-2'
-  }
-};
-
 export const dotsLoaderTheme: DotsLoaderTheme = {
-  ...baseTheme,
-  dot: [baseTheme.dot, 'light:bg-gray-900 dark:bg-gray-100'].join(' ')
-};
-
-export const legacyLoaderTheme: DotsLoaderTheme = {
-  ...baseTheme,
-  dot: [baseTheme.dot, 'bg-[var(--loader-background)]'].join(' '),
+  base: 'flex',
+  dot: 'rounded-[50%] bg-background-brand-base',
   sizes: {
-    small: 'w-1 h-1 ml-[var(--spacing-sm)]',
-    medium: 'w-1.5 h-1.5 ml-[var(--spacing-md)]',
-    large: 'w-2 h-2 ml-[var(--spacing-lg)]'
+    small: 'size-1 m-1',
+    medium: 'size-1.5 m-1.5',
+    large: 'size-2 m-2'
   }
 };
diff --git a/src/elements/Navigation/Navigation.story.tsx b/src/elements/Navigation/Navigation.story.tsx
new file mode 100644
index 000000000..b57269711
--- /dev/null
+++ b/src/elements/Navigation/Navigation.story.tsx
@@ -0,0 +1,592 @@
+import { useId, useState } from 'react';
+
+import type { NavigationTheme } from '@/elements';
+import { NavigationButton } from '@/elements/Navigation/NavigationButton';
+import { extendComponentTheme, useComponentTheme } from '@/utils';
+
+import { NavigationBar } from './NavigationBar';
+
+export default {
+  title: 'Components/Elements/Navigation',
+  component: NavigationBar
+};
+
+const logo = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="18"
+    height="24"
+    viewBox="0 0 18 24"
+    fill="none"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M17.6183 0L0.600098 11.9049L17.6183 24V13.0064L13.7985 10.545L11.6487 12L15.2263 14.3273V19.3114L4.80132 11.9049L17.6183 2.94899V0Z"
+      fill="url(#paint0_linear_15406_151)"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M17.6183 3.87683L6.22632 11.9115L14.4144 17.723V14.7166L10.28 12.0324L17.6183 6.85734V3.87683Z"
+      fill="url(#paint1_linear_15406_151)"
+    />
+    <defs>
+      <linearGradient
+        id="paint0_linear_15406_151"
+        x1="19.3201"
+        y1="5.95"
+        x2="7.17212"
+        y2="20.1628"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#105EFF" />
+        <stop offset="0.413357" stopColor="#009BFF" />
+        <stop offset="0.735652" stopColor="#105EFF" />
+        <stop offset="1" stopColor="#090E43" />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear_15406_151"
+        x1="7.99722"
+        y1="15.9999"
+        x2="19.0092"
+        y2="4.215"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#105EFF" />
+        <stop offset="0.413357" stopColor="#009BFF" />
+        <stop offset="0.735652" stopColor="#105EFF" />
+        <stop offset="1" stopColor="#090E43" />
+      </linearGradient>
+    </defs>
+  </svg>
+);
+
+const companyName = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="112"
+    height="12"
+    viewBox="0 0 112 12"
+    fill="none"
+  >
+    <path
+      d="M21.3063 0.109131C24.5605 0.109131 27.1985 2.74658 27.1985 6.00004C27.1985 9.2535 24.5605 11.8909 21.3063 11.8909C18.0521 11.8909 15.4141 9.2535 15.4141 6.00004C15.4141 2.74658 18.0521 0.109131 21.3063 0.109131ZM21.3063 2.00942C19.1019 2.00942 17.3148 3.79608 17.3148 6.00004C17.3148 8.204 19.1019 9.99066 21.3063 9.99066C23.5107 9.99066 25.2978 8.204 25.2978 6.00004C25.2978 3.79608 23.5107 2.00942 21.3063 2.00942ZM36.7021 0.109131C39.9563 0.109131 42.5943 2.74658 42.5943 6.00004C42.5943 9.2535 39.9563 11.8909 36.7021 11.8909C33.4479 11.8909 30.8099 9.2535 30.8099 6.00004C30.8099 2.74658 33.4479 0.109131 36.7021 0.109131ZM36.7021 2.00942C34.4976 2.00942 32.7106 3.79608 32.7106 6.00004C32.7106 8.204 34.4976 9.99066 36.7021 9.99066C38.9065 9.99066 40.6936 8.204 40.6936 6.00004C40.6936 3.79608 38.9065 2.00942 36.7021 2.00942ZM80.0384 0.109131C83.2925 0.109131 85.9306 2.74658 85.9306 6.00004C85.9306 9.2535 83.2925 11.8909 80.0384 11.8909C76.7842 11.8909 74.1462 9.2535 74.1462 6.00004C74.1462 2.74658 76.7842 0.109131 80.0384 0.109131ZM80.0384 2.00942C77.8339 2.00942 76.0469 3.79608 76.0469 6.00004C76.0469 8.204 77.8339 9.99066 80.0384 9.99066C82.2428 9.99066 84.0299 8.204 84.0299 6.00004C84.0299 3.79608 82.2428 2.00942 80.0384 2.00942ZM65.591 0.109131C67.6033 0.109131 69.4435 1.1271 70.524 2.7798L68.9337 3.81973C68.2006 2.69834 66.9552 2.00942 65.591 2.00942C63.3873 2.00942 61.6008 3.79608 61.6008 6.00004C61.6008 8.204 63.3873 9.99066 65.591 9.99066C66.9599 9.99066 68.2091 9.29691 68.941 8.16916L70.5348 9.20378C69.4561 10.8659 67.6103 11.8909 65.591 11.8909C62.3379 11.8909 59.7007 9.2535 59.7007 6.00004C59.7007 2.74658 62.3379 0.109131 65.591 0.109131ZM50.1972 0.29916C53.4432 0.29916 56.0894 2.84301 56.0894 6.00004C56.0894 9.15707 53.4432 11.7009 50.1972 11.7009H46.2057V9.80063H50.1972C52.4098 9.80063 54.1887 8.09053 54.1887 6.00004C54.1887 3.90955 52.4098 2.19945 50.1972 2.19945H46.2057V0.29916H50.1972ZM93.5334 0.29916C96.7794 0.29916 99.4256 2.84301 99.4256 6.00004C99.4256 9.15707 96.7794 11.7009 93.5334 11.7009H89.5419V9.80063H93.5334C95.746 9.80063 97.5249 8.09053 97.5249 6.00004C97.5249 3.90955 95.746 2.19945 93.5334 2.19945H89.5419V0.29916H93.5334ZM5.91052 0.109131C7.94911 0.109131 9.81018 1.15331 10.8843 2.8405L9.28083 3.86087C8.55206 2.71615 7.29246 2.00942 5.91052 2.00942C3.70608 2.00942 1.91902 3.79608 1.91902 6.00004C1.91902 8.204 3.70608 9.99066 5.91052 9.99066C7.61244 9.99066 9.06557 8.92497 9.63965 7.42526H5.69234V5.52505H11.7837L11.8027 6.00004C11.8027 9.2535 9.1647 11.8909 5.91052 11.8909C2.65634 11.8909 0.0183105 9.2535 0.0183105 6.00004C0.0183105 2.74658 2.65634 0.109131 5.91052 0.109131ZM103.037 2.19945H111.4V0.29916H103.037V2.19945ZM103.037 11.7009H111.4V9.80063H103.037V11.7009ZM103.037 6.95019H111.4V5.04989H103.037V6.95019Z"
+      fill="#E1E2E3"
+    />
+  </svg>
+);
+
+const HomeIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+  >
+    <path
+      d="M9 1C5.14 1 2 4.14 2 8V16.25C2 16.664 2.336 17 2.75 17C3.955 17 4.583 16.424 5.042 16.003C5.422 15.654 5.607 15.5 6 15.5C6.416 15.5 6.617 15.677 6.996 16.044C7.412 16.447 7.981 17 9 17C10.019 17 10.588 16.448 11.004 16.044C11.383 15.676 11.584 15.5 12 15.5C12.394 15.5 12.579 15.654 12.958 16.003C13.416 16.423 14.044 17 15.25 17C15.664 17 16 16.664 16 16.25V8C16 4.14 12.86 1 9 1ZM8.087 9.264C7.46 9.827 6.519 9.952 5.75 9.508C4.981 9.064 4.618 8.186 4.793 7.362C4.86 7.045 5.243 6.906 5.524 7.069L7.976 8.485C8.257 8.647 8.329 9.048 8.087 9.265V9.264ZM12.25 9.508C11.481 9.952 10.539 9.827 9.913 9.264C9.672 9.047 9.743 8.646 10.024 8.484L12.476 7.068C12.757 6.906 13.14 7.044 13.207 7.361C13.382 8.185 13.019 9.063 12.25 9.507V9.508Z"
+      fill="currentColor"
+      fillOpacity="0.8"
+    />
+  </svg>
+);
+
+const DashboardIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+  >
+    <path
+      d="M5.30176 8.47441C5.52876 7.90241 6.47027 7.90241 6.69727 8.47441L7.49902 10.5008L9.52539 11.3025C9.81225 11.4156 9.99897 11.6929 9.99902 11.9998C9.99902 12.3067 9.81025 12.584 9.52441 12.6971L7.49805 13.4988L6.69629 15.5262C6.58326 15.8121 6.30598 15.9998 5.99902 15.9998C5.69206 15.9998 5.41479 15.8121 5.30176 15.5262L4.5 13.4988L2.47363 12.6971C2.1868 12.584 1.99902 12.3067 1.99902 11.9998C1.99908 11.6929 2.18779 11.4156 2.47363 11.3025L4.5 10.5008L5.30176 8.47441ZM13.0254 11.3416C13.1627 10.9341 13.8364 10.9342 13.9736 11.3416L14.3955 12.6053L15.6582 13.0262H15.6592C15.863 13.0942 16.0009 13.2849 16.001 13.4998C16.001 13.7148 15.8632 13.9064 15.6592 13.9744L14.3965 14.3953L13.9746 15.658C13.9056 15.8619 13.7149 15.9998 13.5 15.9998C13.2851 15.9998 13.0934 15.8619 13.0254 15.658L12.6045 14.3953L11.3408 13.9744C11.1368 13.9064 10.999 13.7148 10.999 13.4998C10.9991 13.2849 11.137 13.0942 11.3408 13.0262L12.6045 12.6053L13.0254 11.3416ZM11.3018 2.47441C11.5288 1.90241 12.4703 1.90241 12.6973 2.47441L13.499 4.50077L15.5254 5.30253C15.8122 5.41556 15.999 5.69292 15.999 5.9998C15.999 6.30669 15.8103 6.58399 15.5244 6.69706L13.498 7.49882L12.6963 9.52616C12.5833 9.8121 12.306 9.9998 11.999 9.9998C11.6921 9.9998 11.4148 9.8121 11.3018 9.52616L10.5 7.49882L8.47363 6.69706C8.1868 6.58399 7.99902 6.30669 7.99902 5.9998C7.99908 5.69292 8.18779 5.41557 8.47363 5.30253L10.5 4.50077L11.3018 2.47441ZM4.02734 2.34159C4.16461 1.93415 4.83831 1.93415 4.97559 2.34159L5.39746 3.60527L6.66016 4.02616C6.86399 4.09422 7.0019 4.28493 7.00195 4.4998C7.00195 4.71479 6.86415 4.9064 6.66016 4.97441L5.39746 5.39531L4.97559 6.658C4.90653 6.8619 4.71591 6.9998 4.50098 6.9998C4.28604 6.9998 4.09442 6.8619 4.02637 6.658L3.60449 5.39531L2.3418 4.97441C2.13781 4.9064 2.00098 4.71479 2.00098 4.4998C2.00103 4.28494 2.13895 4.09422 2.34277 4.02616L3.60645 3.60527L4.02734 2.34159Z"
+      fill="currentColor"
+      fillOpacity="0.8"
+    />
+  </svg>
+);
+
+const AlertsIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+  >
+    <path
+      d="M14.25 1.5H3.75C2.233 1.5 1 2.733 1 4.25V11.25C1 12.767 2.233 14 3.75 14H5V16.25C5 16.538 5.165 16.801 5.425 16.926C5.528 16.976 5.639 17 5.75 17C5.917 17 6.083 16.944 6.219 16.835L9.763 14H14.25C15.767 14 17 12.767 17 11.25V4.25C17 2.733 15.767 1.5 14.25 1.5Z"
+      fill="currentColor"
+      fillOpacity="0.8"
+    />
+  </svg>
+);
+
+const IntelligenceIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12.939 3.52795L11.794 3.14595C11.609 3.08395 11.484 2.91095 11.484 2.71595C11.484 2.52095 11.609 2.34795 11.794 2.28595L12.939 1.90395L13.321 0.758945C13.444 0.388945 14.057 0.388945 14.181 0.758945L14.563 1.90395L15.708 2.28595C15.893 2.34795 16.018 2.52095 16.018 2.71595C16.018 2.91095 15.893 3.08395 15.708 3.14595L14.563 3.52795L14.181 4.67295C14.119 4.85794 13.946 4.98294 13.751 4.98294C13.556 4.98294 13.383 4.85794 13.321 4.67295L12.939 3.52795ZM6.43899 3.95894C6.32199 3.68094 6.04899 3.49994 5.74799 3.49994H5.56999C5.26799 3.49994 4.99499 3.68094 4.87899 3.95894L1.30899 12.4589C1.14799 12.8409 1.32799 13.2809 1.70999 13.4409C2.09199 13.6019 2.53099 13.4209 2.69199 13.0399L3.33899 11.4989H7.97999L8.62699 13.0399C8.74799 13.3269 9.02599 13.4989 9.31899 13.4989C9.41599 13.4989 9.51399 13.4799 9.60899 13.4399C9.99099 13.2799 10.171 12.8399 10.01 12.4579L6.43899 3.95894ZM3.96799 9.99994L5.65899 5.97494L7.34999 9.99994H3.96899H3.96799ZM16 11.9999H14.5V7.24994C14.5 6.83594 14.164 6.49994 13.75 6.49994H11.75C11.336 6.49994 11 6.83594 11 7.24994C11 7.66394 11.336 7.99994 11.75 7.99994H13V11.9999H11.75C11.336 11.9999 11 12.3359 11 12.7499C11 13.1639 11.336 13.4999 11.75 13.4999H16C16.414 13.4999 16.75 13.1639 16.75 12.7499C16.75 12.3359 16.414 11.9999 16 11.9999Z"
+      fill="currentColor"
+      fillOpacity="0.8"
+    />
+  </svg>
+);
+
+const ReportsIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+  >
+    <path
+      d="M4.25 6H8.25V1.25C8.25 0.836 8.586 0.5 9 0.5C9.414 0.5 9.75 0.836 9.75 1.25V6H8.25195V10.9395L6.53223 9.21875C6.23923 8.92576 5.7637 8.92575 5.4707 9.21875C5.17773 9.51175 5.17772 9.98728 5.4707 10.2803L8.4707 13.2803C8.6167 13.4273 8.80898 13.5 9.00098 13.5C9.19297 13.5 9.38525 13.4263 9.53125 13.2803L12.5312 10.2803C12.8243 9.98727 12.8243 9.51175 12.5312 9.21875C12.2382 8.92575 11.7627 8.92575 11.4697 9.21875L9.75 10.9395V6H13.75C15.267 6 16.5 7.233 16.5 8.75V13.75C16.5 15.267 15.267 16.5 13.75 16.5H4.25C2.733 16.5 1.5 15.267 1.5 13.75V8.75C1.5 7.233 2.733 6 4.25 6Z"
+      fill="currentColor"
+      fillOpacity="0.8"
+    />
+  </svg>
+);
+
+const HelpIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+  >
+    <path
+      d="M9 1C4.589 1 1 4.589 1 9C1 13.411 4.589 17 9 17C13.411 17 17 13.411 17 9C17 4.589 13.411 1 9 1ZM8.791 13.567C8.239 13.567 7.791 13.118 7.791 12.567C7.791 12.016 8.239 11.567 8.791 11.567C9.343 11.567 9.791 12.016 9.791 12.567C9.791 13.118 9.343 13.567 8.791 13.567ZM10.32 9.215C9.863 9.534 9.64 9.706 9.565 10.13C9.502 10.494 9.185 10.75 8.828 10.75C8.785 10.75 8.741 10.747 8.697 10.739C8.289 10.667 8.016 10.279 8.089 9.87C8.275 8.813 8.961 8.334 9.463 7.984C9.99 7.616 10.173 7.462 10.173 6.935C10.173 6.098 9.475 5.877 9.106 5.877C8.692 5.877 7.949 6.007 7.629 6.877C7.486 7.266 7.058 7.465 6.666 7.323C6.277 7.18 6.078 6.749 6.221 6.361C6.677 5.119 7.755 4.377 9.106 4.377C10.35 4.377 11.673 5.273 11.673 6.935C11.673 8.272 10.892 8.817 10.32 9.215Z"
+      fill="#E1E2E3"
+      fillOpacity="0.8"
+    />
+  </svg>
+);
+
+const SettingsIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+  >
+    <path
+      d="M16.5851 7.57902L15.7461 7.16002C15.5891 6.58402 15.3621 6.03802 15.0711 5.53102L15.3681 4.64102C15.4581 4.37102 15.3881 4.07402 15.1871 3.87302L14.1261 2.81202C13.9241 2.61002 13.6261 2.54102 13.3581 2.63102L12.4681 2.92802C11.9611 2.63702 11.4151 2.41102 10.8391 2.25302L10.4191 1.41402C10.2921 1.16002 10.0321 0.999023 9.74809 0.999023H8.24809C7.96409 0.999023 7.70409 1.16002 7.57709 1.41402L7.15709 2.25302C6.58109 2.41002 6.03509 2.63702 5.52809 2.92802L4.63809 2.63102C4.36809 2.54102 4.07209 2.61002 3.87009 2.81202L2.80909 3.87302C2.60809 4.07402 2.53809 4.37102 2.62809 4.64102L2.92509 5.53102C2.63409 6.03802 2.40809 6.58402 2.25009 7.16002L1.41109 7.57902C1.15709 7.70602 0.996094 7.96602 0.996094 8.25002V9.75002C0.996094 10.034 1.15709 10.294 1.41109 10.421L2.25009 10.84C2.40709 11.416 2.63409 11.962 2.92509 12.469L2.62809 13.359C2.53809 13.629 2.60809 13.926 2.80909 14.127L3.87009 15.188C4.01309 15.331 4.20409 15.408 4.40009 15.408C4.48009 15.408 4.56009 15.395 4.63709 15.369L5.52709 15.072C6.03409 15.363 6.58009 15.589 7.15609 15.747L7.57609 16.586C7.70309 16.84 7.96309 17.001 8.24709 17.001H9.74709C10.0311 17.001 10.2911 16.84 10.4181 16.586L10.8381 15.747C11.4141 15.59 11.9601 15.363 12.4671 15.072L13.3571 15.369C13.4351 15.395 13.5151 15.408 13.5941 15.408C13.7901 15.408 13.9811 15.331 14.1241 15.188L15.1851 14.127C15.3861 13.926 15.4561 13.629 15.3661 13.359L15.0691 12.469C15.3601 11.962 15.5861 11.416 15.7441 10.84L16.5831 10.421C16.8371 10.294 16.9981 10.034 16.9981 9.75002V8.25002C16.9981 7.96602 16.8371 7.70602 16.5831 7.57902H16.5851ZM9.00009 14.5C5.96709 14.5 3.50009 12.033 3.50009 9.00002C3.50009 5.96702 5.96709 3.50002 9.00009 3.50002C12.0331 3.50002 14.5001 5.96702 14.5001 9.00002C14.5001 12.033 12.0331 14.5 9.00009 14.5Z"
+      fill="#E1E2E3"
+      fillOpacity="0.8"
+    />
+  </svg>
+);
+
+export const Text = () => {
+  const [active, setActive] = useState<number>(1);
+  const id = useId();
+
+  return (
+    <NavigationBar
+      className="h-[600px]"
+      start={
+        <div className="flex gap-2 items-center">
+          {logo}
+          {companyName}
+        </div>
+      }
+      end={
+        <div className="flex flex-col gap-2">
+          <NavigationButton
+            animationLayoutId={id}
+            active={active === 6}
+            onClick={() => setActive(6)}
+          >
+            <div className="flex items-center gap-2">
+              <HelpIcon />
+              <span>Help</span>
+            </div>
+          </NavigationButton>
+          <NavigationButton
+            animationLayoutId={id}
+            active={active === 7}
+            onClick={() => setActive(7)}
+          >
+            <div className="flex items-center gap-2">
+              <SettingsIcon />
+              <span>Settings</span>
+            </div>
+          </NavigationButton>
+        </div>
+      }
+    >
+      <NavigationButton
+        animationLayoutId={id}
+        active={active === 1}
+        onClick={() => setActive(1)}
+      >
+        <div className="flex items-center gap-2">
+          <HomeIcon />
+          <span>Home</span>
+        </div>
+      </NavigationButton>
+      <NavigationButton
+        animationLayoutId={id}
+        active={active === 2}
+        onClick={() => setActive(2)}
+      >
+        <div className="flex items-center gap-2">
+          <DashboardIcon />
+          <span>Dashboard</span>
+        </div>
+      </NavigationButton>
+      <NavigationButton
+        animationLayoutId={id}
+        active={active === 3}
+        onClick={() => setActive(3)}
+      >
+        <div className="flex items-center gap-2">
+          <AlertsIcon />
+          <span>Alerts</span>
+        </div>
+      </NavigationButton>
+      <NavigationButton
+        animationLayoutId={id}
+        active={active === 4}
+        onClick={() => setActive(4)}
+      >
+        <div className="flex items-center gap-2">
+          <IntelligenceIcon />
+          <span>Intelligence</span>
+        </div>
+      </NavigationButton>
+      <NavigationButton
+        animationLayoutId={id}
+        disabled
+        active={active === 5}
+        onClick={() => setActive(5)}
+      >
+        <div className="flex items-center gap-2">
+          <ReportsIcon />
+          <span>Reports</span>
+        </div>
+      </NavigationButton>
+    </NavigationBar>
+  );
+};
+
+export const Icons = () => {
+  const [active, setActive] = useState<number>(1);
+  const id = useId();
+
+  return (
+    <NavigationBar
+      className="h-[600px]"
+      start={<div className="px-4">{logo}</div>}
+      end={
+        <div className="flex flex-col gap-2">
+          <NavigationButton
+            animationLayoutId={id}
+            active={active === 6}
+            onClick={() => setActive(6)}
+          >
+            <HelpIcon />
+          </NavigationButton>
+          <NavigationButton
+            animationLayoutId={id}
+            active={active === 7}
+            onClick={() => setActive(7)}
+          >
+            <SettingsIcon />
+          </NavigationButton>
+        </div>
+      }
+    >
+      <NavigationButton
+        animationLayoutId={id}
+        active={active === 1}
+        onClick={() => setActive(1)}
+      >
+        <HomeIcon />
+      </NavigationButton>
+      <NavigationButton
+        animationLayoutId={id}
+        active={active === 2}
+        onClick={() => setActive(2)}
+      >
+        <DashboardIcon />
+      </NavigationButton>
+      <NavigationButton
+        animationLayoutId={id}
+        active={active === 3}
+        onClick={() => setActive(3)}
+      >
+        <AlertsIcon />
+      </NavigationButton>
+      <NavigationButton
+        animationLayoutId={id}
+        active={active === 4}
+        onClick={() => setActive(4)}
+      >
+        <IntelligenceIcon />
+      </NavigationButton>
+      <NavigationButton
+        animationLayoutId={id}
+        disabled
+        active={active === 5}
+        onClick={() => setActive(5)}
+      >
+        <ReportsIcon />
+      </NavigationButton>
+    </NavigationBar>
+  );
+};
+
+export const Horizontal = () => {
+  const [active, setActive] = useState<number>(1);
+  const id = useId();
+
+  return (
+    <NavigationBar
+      direction="horizontal"
+      className="w-[800px]"
+      start={<div className="px-4">{logo}</div>}
+      end={
+        <div className="flex flex-row gap-2">
+          <NavigationButton
+            animationLayoutId={id}
+            variant="underline"
+            active={active === 6}
+            onClick={() => setActive(6)}
+          >
+            <HelpIcon />
+          </NavigationButton>
+          <NavigationButton
+            animationLayoutId={id}
+            variant="underline"
+            active={active === 7}
+            onClick={() => setActive(7)}
+          >
+            <SettingsIcon />
+          </NavigationButton>
+        </div>
+      }
+    >
+      <NavigationButton
+        animationLayoutId={id}
+        variant="underline"
+        active={active === 1}
+        onClick={() => setActive(1)}
+      >
+        <HomeIcon />
+      </NavigationButton>
+      <NavigationButton
+        animationLayoutId={id}
+        variant="underline"
+        active={active === 2}
+        onClick={() => setActive(2)}
+      >
+        <DashboardIcon />
+      </NavigationButton>
+      <NavigationButton
+        animationLayoutId={id}
+        variant="underline"
+        active={active === 3}
+        onClick={() => setActive(3)}
+      >
+        <AlertsIcon />
+      </NavigationButton>
+      <NavigationButton
+        animationLayoutId={id}
+        variant="underline"
+        active={active === 4}
+        onClick={() => setActive(4)}
+      >
+        <IntelligenceIcon />
+      </NavigationButton>
+      <NavigationButton
+        animationLayoutId={id}
+        disabled
+        variant="underline"
+        active={active === 5}
+        onClick={() => setActive(5)}
+      >
+        <ReportsIcon />
+      </NavigationButton>
+    </NavigationBar>
+  );
+};
+
+export const AnimationDisabled = () => {
+  const [active, setActive] = useState<number>(1);
+  const id = useId();
+
+  return (
+    <NavigationBar
+      className="h-[600px]"
+      start={<div className="px-4">{logo}</div>}
+      end={
+        <div className="flex flex-col gap-2">
+          <NavigationButton
+            animationLayoutId={id}
+            animated={false}
+            active={active === 6}
+            onClick={() => setActive(6)}
+          >
+            <HelpIcon />
+          </NavigationButton>
+          <NavigationButton
+            animationLayoutId={id}
+            animated={false}
+            active={active === 7}
+            onClick={() => setActive(7)}
+          >
+            <SettingsIcon />
+          </NavigationButton>
+        </div>
+      }
+    >
+      <NavigationButton
+        animationLayoutId={id}
+        animated={false}
+        active={active === 1}
+        onClick={() => setActive(1)}
+      >
+        <HomeIcon />
+      </NavigationButton>
+      <NavigationButton
+        animationLayoutId={id}
+        animated={false}
+        active={active === 2}
+        onClick={() => setActive(2)}
+      >
+        <DashboardIcon />
+      </NavigationButton>
+      <NavigationButton
+        animationLayoutId={id}
+        animated={false}
+        active={active === 3}
+        onClick={() => setActive(3)}
+      >
+        <AlertsIcon />
+      </NavigationButton>
+      <NavigationButton
+        animationLayoutId={id}
+        animated
+        active={active === 4}
+        onClick={() => setActive(4)}
+      >
+        <IntelligenceIcon />
+      </NavigationButton>
+      <NavigationButton
+        animationLayoutId={id}
+        animated={false}
+        active={active === 5}
+        onClick={() => setActive(5)}
+      >
+        <ReportsIcon />
+      </NavigationButton>
+    </NavigationBar>
+  );
+};
+
+export const CustomTheme = () => {
+  const [active, setActive] = useState<number>(1);
+  const id = useId();
+  const navigationTheme: NavigationTheme = useComponentTheme('navigation');
+
+  const customTheme: NavigationTheme = extendComponentTheme(navigationTheme, {
+    bar: {
+      base: 'flex flex-col p-4 gap-4 rounded-md shadow-[0_4px_20px_0_#e1e2e333_inset] bg-navigation-colors-background-container-base border border-navigation-colors-stroke-container-base'
+    },
+    button: {
+      variant: {
+        ghost: {
+          selection: `
+          absolute z-1 top-0 left-0 w-full h-full rounded-md border
+          border-red-infernal-blade-a-700 bg-red-infernal-blade-a-500
+          hover:border-red-infernal-blade-a-500 hover:bg-red-infernal-blade-a-500
+        `
+        }
+      }
+    }
+  });
+
+  return (
+    <NavigationBar
+      theme={customTheme}
+      className="h-[600px]"
+      start={<div className="px-4">{logo}</div>}
+      end={
+        <div className="flex flex-col gap-2">
+          <NavigationButton
+            animationLayoutId={id}
+            theme={customTheme}
+            active={active === 6}
+            onClick={() => setActive(6)}
+          >
+            <HelpIcon />
+          </NavigationButton>
+          <NavigationButton
+            animationLayoutId={id}
+            theme={customTheme}
+            active={active === 7}
+            onClick={() => setActive(7)}
+          >
+            <SettingsIcon />
+          </NavigationButton>
+        </div>
+      }
+    >
+      <NavigationButton
+        animationLayoutId={id}
+        theme={customTheme}
+        active={active === 1}
+        onClick={() => setActive(1)}
+      >
+        <HomeIcon />
+      </NavigationButton>
+      <NavigationButton
+        animationLayoutId={id}
+        theme={customTheme}
+        active={active === 2}
+        onClick={() => setActive(2)}
+      >
+        <DashboardIcon />
+      </NavigationButton>
+      <NavigationButton
+        animationLayoutId={id}
+        theme={customTheme}
+        active={active === 3}
+        onClick={() => setActive(3)}
+      >
+        <AlertsIcon />
+      </NavigationButton>
+      <NavigationButton
+        animationLayoutId={id}
+        theme={customTheme}
+        active={active === 4}
+        onClick={() => setActive(4)}
+      >
+        <IntelligenceIcon />
+      </NavigationButton>
+      <NavigationButton
+        animationLayoutId={id}
+        theme={customTheme}
+        active={active === 5}
+        onClick={() => setActive(5)}
+      >
+        <ReportsIcon />
+      </NavigationButton>
+    </NavigationBar>
+  );
+};
diff --git a/src/elements/Navigation/NavigationBar.tsx b/src/elements/Navigation/NavigationBar.tsx
new file mode 100644
index 000000000..5a47903de
--- /dev/null
+++ b/src/elements/Navigation/NavigationBar.tsx
@@ -0,0 +1,93 @@
+import type { FC, PropsWithChildren, ReactNode } from 'react';
+import React from 'react';
+
+import { cn, useComponentTheme } from '@/utils';
+
+import type {
+  NavigationBarDirectionTheme,
+  NavigationTheme
+} from './NavigationTheme';
+
+export interface NavigationBarProps extends PropsWithChildren {
+  /**
+   * Custom class names for the navigation bar and its sections.
+   */
+  className?: string;
+
+  /**
+   * Custom class names for the top section of the navigation bar.
+   */
+  classNameStart?: string;
+
+  /**
+   * Custom class names for the navigation section.
+   */
+  classNameNavigation?: string;
+
+  /**
+   * Custom class names for the bottom section of the navigation bar.
+   */
+  classNameEnd?: string;
+
+  /**
+   * Direction of the navigation bar layout.
+   */
+  direction?: keyof NavigationBarDirectionTheme;
+
+  /**
+   * Content to be displayed at the start of the navigation bar.
+   */
+  start?: ReactNode;
+
+  /**
+   * Content to be displayed at the end of the navigation bar.
+   */
+  end?: ReactNode;
+
+  /**
+   * Theme overrides for the navigation bar.
+   */
+  theme?: NavigationTheme;
+}
+
+export const NavigationBar: FC<NavigationBarProps> = ({
+  className,
+  classNameStart,
+  classNameNavigation,
+  classNameEnd,
+  direction = 'vertical',
+  start,
+  end,
+  children,
+  theme
+}) => {
+  const navigationTheme: NavigationTheme = useComponentTheme(
+    'navigation',
+    theme
+  );
+
+  return (
+    <nav
+      role="navigation"
+      className={cn(
+        navigationTheme.bar.base,
+        className,
+        navigationTheme.bar.direction?.[direction]
+      )}
+    >
+      <div className={cn(navigationTheme.bar.start, classNameStart)}>
+        {start}
+      </div>
+      <div
+        className={cn(
+          navigationTheme.bar.navigation,
+          classNameNavigation,
+          navigationTheme.bar.direction?.[direction]
+        )}
+      >
+        {children}
+      </div>
+      <div className={cn(navigationTheme.bar.end, classNameEnd)}>{end}</div>
+    </nav>
+  );
+};
diff --git a/src/elements/Navigation/NavigationButton.tsx b/src/elements/Navigation/NavigationButton.tsx
new file mode 100644
index 000000000..59417e8c9
--- /dev/null
+++ b/src/elements/Navigation/NavigationButton.tsx
@@ -0,0 +1,95 @@
+import { motion } from 'motion/react';
+import type { FC, PropsWithChildren } from 'react';
+import React from 'react';
+
+import { cn, useComponentTheme } from '@/utils';
+
+import type {
+  NavigationButtonVariantTheme,
+  NavigationTheme
+} from './NavigationTheme';
+
+interface NavigationButtonProps extends PropsWithChildren {
+  /**
+   * Custom class names for the navigation button.
+   */
+  className?: string;
+
+  /**
+   * Variant of the navigation button.
+   */
+  variant?: keyof NavigationButtonVariantTheme;
+
+  /**
+   * Indicates if the button is active.
+   */
+  active?: boolean;
+
+  /**
+   * Custom theme for the navigation button.
+   */
+  theme?: NavigationTheme;
+
+  /**
+   * Disables the button, preventing interaction.
+   */
+  disabled?: boolean;
+
+  /**
+   * If false, the animation of the button will be disabled.
+   */
+  animated?: boolean;
+
+  /**
+   * Unique identifier for the animation layout.
+   */
+  animationLayoutId?: string;
+
+  /**
+   * Callback function to handle click events on the button.
+   */
+  onClick?: () => void;
+}
+
+export const NavigationButton: FC<NavigationButtonProps> = ({
+  className,
+  active,
+  children,
+  theme,
+  disabled,
+  animated = true,
+  variant = 'ghost',
+  animationLayoutId,
+  onClick
+}) => {
+  const navigationTheme: NavigationTheme = useComponentTheme(
+    'navigation',
+    theme
+  );
+
+  return (
+    <div className={navigationTheme.button.base}>
+      {active && (
+        <motion.div
+          layoutId={
+            !animated ? undefined : (animationLayoutId ?? 'selected-nav-button')
+          }
+          className={navigationTheme.button.variant?.[variant]?.selection}
+        />
+      )}
+      <motion.button
+        disabled={disabled}
+        whileTap={{ scale: disabled || !animated || active ? 1 : 0.9 }}
+        className={cn(
+          navigationTheme.button?.variant?.[variant]?.content,
+          { [navigationTheme.button?.variant?.[variant]?.active]: active },
+          { [navigationTheme.button?.variant?.[variant]?.disabled]: disabled },
+          className
+        )}
+        onClick={onClick}
+      >
+        {children}
+      </motion.button>
+    </div>
+  );
+};
diff --git a/src/elements/Navigation/NavigationTheme.tsx b/src/elements/Navigation/NavigationTheme.tsx
new file mode 100644
index 000000000..4030c8a98
--- /dev/null
+++ b/src/elements/Navigation/NavigationTheme.tsx
@@ -0,0 +1,100 @@
+export interface NavigationButtonVariantConfigTheme {
+  content: string;
+  active: string;
+  selection: string;
+  disabled: string;
+}
+
+export interface NavigationBarDirectionTheme {
+  horizontal: string;
+  vertical: string;
+}
+
+export interface NavigationButtonVariantTheme {
+  ghost: NavigationButtonVariantConfigTheme;
+  underline: NavigationButtonVariantConfigTheme;
+  [key: string]: NavigationButtonVariantConfigTheme;
+}
+
+export interface NavigationTheme {
+  bar: {
+    base: string;
+    direction: NavigationBarDirectionTheme;
+    start: string;
+    navigation: string;
+    end: string;
+  };
+  button: {
+    base: string;
+    variant: NavigationButtonVariantTheme;
+  };
+}
+
+export const navigationTheme: NavigationTheme = {
+  bar: {
+    base: `
+    flex h-full w-full p-(--navigation-details-vertical-padding-base) border-r gap-(--navigation-details-space-between-sections-left-nav)
+    bg-navigation-colors-background-container-base border-navigation-colors-stroke-container-base
+  `,
+    direction: {
+      vertical: 'flex-col ',
+      horizontal: 'flex-row border-none p-0'
+    },
+    start: 'py-4',
+    navigation:
+      'flex-1 flex flex-col gap-(--navigation-details-space-between-items-left-nav)',
+    end: ''
+  },
+  button: {
+    base: 'group relative',
+    variant: {
+      ghost: {
+        content: `
+          w-full h-full outline-none relative z-10
+          p-(--navigation-details-horizontal-padding-nav-item-main-row) rounded-(--navigation-details-corner-radius-row-item) border border-transparent text-navigation-colors-text-resting 
+          hover:text-navigation-colors-text-hover hover:bg-navigation-colors-background-row-items-hover hover:border-navigation-colors-stroke-row-items-hover
+          focus-visible:text-navigation-colors-text-hover focus-visible:bg-navigation-colors-background-row-items-hover focus-visible:border-navigation-colors-stroke-row-items-hover
+          transition-colors ease-out duration-300
+        `,
+        active: `
+          text-navigation-colors-text-selected 
+          hover:text-navigation-colors-text-selected
+          focus-visible:text-navigation-colors-text-selected
+        `,
+        selection: `
+          absolute z-1 top-0 left-0 w-full h-full rounded-(--navigation-details-corner-radius-row-item) border
+          border-navigation-colors-stroke-row-items-selected bg-navigation-colors-background-row-items-selected
+          hover:border-navigation-colors-stroke-row-items-selected hover:bg-navigation-colors-background-row-items-selected
+          focus-visible:border-navigation-colors-stroke-row-items-selected focus-visible:bg-navigation-colors-background-row-items-selected
+        `,
+        disabled: `
+          opacity-40 cursor-not-allowed font-normal text-navigation-colors-text-resting bg-transparent border-transparent
+          hover:text-navigation-colors-text-resting hover:bg-transparent hover:border-transparent
+        `
+      },
+      underline: {
+        content: `
+          h-(--navigation-details-height-width-items-side-nav)
+          relative z-10 p-(--navigation-details-horizontal-padding-nav-item-main-row) outline-none
+          text-navigation-colors-text-resting 
+          hover:text-navigation-colors-text-hover
+          focus-visible:text-navigation-colors-text-hover
+          transition-colors ease-out duration-300
+        `,
+        active: `
+          font-semibold
+          text-navigation-colors-text-selected
+          hover:text-navigation-colors-text-selected
+          focus-visible:text-navigation-colors-text-selected
+        `,
+        selection: `
+          absolute z-1 bottom-0 w-full h-0.5 rounded-(--navigation-details-corner-radius-row-item) bg-navigation-colors-stroke-detail-line-active
+        `,
+        disabled: `
+          opacity-40 cursor-not-allowed font-normal text-navigation-colors-text-resting bg-transparent border-transparent
+          hover:text-navigation-colors-text-resting hover:bg-transparent hover:border-transparent
+        `
+      }
+    }
+  }
+};
diff --git a/src/elements/Navigation/index.ts b/src/elements/Navigation/index.ts
new file mode 100644
index 000000000..465d71ec4
--- /dev/null
+++ b/src/elements/Navigation/index.ts
@@ -0,0 +1,3 @@
+export * from './NavigationBar';
+export * from './NavigationButton';
+export * from './NavigationTheme';
diff --git a/src/elements/index.ts b/src/elements/index.ts
index 3296cd740..04b156a35 100644
--- a/src/elements/index.ts
+++ b/src/elements/index.ts
@@ -1,10 +1,11 @@
-export * from './Button';
-export * from './Chip';
-export * from './Loader';
+export * from './Arrow';
 export * from './Avatar';
 export * from './AvatarGroup';
-export * from './Kbd';
 export * from './Badge';
+export * from './Button';
+export * from './Chip';
 export * from './CommandPalette';
-export * from './Arrow';
 export * from './IconButton';
+export * from './Kbd';
+export * from './Loader';
+export * from './Navigation';
diff --git a/src/form/Calendar/Calendar.story.tsx b/src/form/Calendar/Calendar.story.tsx
index 7f196fc2a..99362e67e 100644
--- a/src/form/Calendar/Calendar.story.tsx
+++ b/src/form/Calendar/Calendar.story.tsx
@@ -1,25 +1,25 @@
-import { useState } from 'react';
-import { Card } from '../../layout/Card';
-import { Calendar } from './Calendar';
-import { CalendarRange } from './CalendarRange';
 import {
   add,
   addMonths,
   endOfMonth,
   format,
   startOfMonth,
-  sub,
-  subDays
+  sub
 } from 'date-fns';
-import { Divider } from '../../layout/Divider';
-import { Stack } from '../../layout/Stack';
+import { useState } from 'react';
+
+import { Calendar } from '@/form';
+import { CalendarRange } from '@/form';
 import {
   COMBINED_PRESETS,
   FUTURE_PRESETS,
   FUTURE_RANGE_PRESETS,
   PAST_PRESETS,
   PAST_RANGE_PRESETS
-} from './CalendarPresets';
+} from '@/form';
+import { Card } from '@/layout';
+import { Divider } from '@/layout';
+import { Stack } from '@/layout';
 
 const FOUR_DAYS_AGO = sub(new Date(), { days: 4 });
 const FIVE_DAYS_FROM_NOW = add(new Date(), { days: 5 });
@@ -109,6 +109,7 @@ export const Disabled = () => {
   return (
     <Card>
       <Calendar
+        showTime
         value={date}
         disabled
         onChange={(date: Date) => setDate(date)}
@@ -547,6 +548,7 @@ export const RangeWithDatePastPresets = () => {
           onChange={(newDate: [Date, Date]) => setRange(newDate)}
           showDayOfWeek
           showToday
+          showTime
           isRange
           preset={PAST_RANGE_PRESETS}
         />
diff --git a/src/form/Calendar/Calendar.tsx b/src/form/Calendar/Calendar.tsx
index 656a14628..ea10b3c25 100644
--- a/src/form/Calendar/Calendar.tsx
+++ b/src/form/Calendar/Calendar.tsx
@@ -1,43 +1,42 @@
-import {
-  AnimatePresence,
-  motion,
-  MotionNodeAnimationOptions
-} from 'motion/react';
-import React, { FC, useCallback, useMemo, useState } from 'react';
-import { Button } from '@/elements/Button';
 import {
   add,
   addYears,
   endOfDecade,
+  format,
+  getHours,
+  getMinutes,
   getMonth,
+  getSeconds,
   getYear,
-  min as minDate,
   max as maxDate,
+  min as minDate,
+  setHours,
+  setMinutes,
   setMonth,
+  setSeconds,
   setYear,
   startOfDecade,
   sub,
-  subYears,
-  format,
-  setSeconds,
-  setMinutes,
-  setHours,
-  getMinutes,
-  getSeconds,
-  getHours
+  subYears
 } from 'date-fns';
+import type { MotionNodeAnimationOptions } from 'motion/react';
+import { AnimatePresence, motion } from 'motion/react';
+import type { FC } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
+
+import { Button } from '@/elements/Button';
+import type { CalendarTheme, PresetOption } from '@/form';
+import { CalendarPresets } from '@/form';
+import { Stack } from '@/layout';
+import { Divider } from '@/layout/Divider';
+import { Typography } from '@/typography';
+import { twMerge, useComponentTheme } from '@/utils';
+
 import { CalendarDays } from './CalendarDays';
 import { CalendarMonths } from './CalendarMonths';
-import { CalendarYears } from './CalendarYears';
-import { SmallHeading } from '@/typography';
-import { twMerge } from 'tailwind-merge';
-import { cn, useComponentTheme } from '@/utils';
-import { CalendarTheme } from './CalendarTheme';
-import { Divider } from '@/layout/Divider';
 import { CalendarTimes } from './CalendarTimes';
+import { CalendarYears } from './CalendarYears';
 import { updateDateTime } from './utils';
-import { CalendarPresets, PresetOption } from './CalendarPresets';
-import { Stack } from '@/layout';
 
 export type CalendarViewType = 'days' | 'months' | 'years';
 
@@ -278,8 +277,7 @@ export const Calendar: FC<CalendarProps> = ({
           );
           onChange?.([rangeStart!, newRangeEnd]);
         } else {
-          const newRangeStart = newTimeDate;
-          onChange?.([newRangeStart, rangeEnd]);
+          onChange?.([newTimeDate, rangeEnd]);
         }
       }
     },
@@ -350,7 +348,7 @@ export const Calendar: FC<CalendarProps> = ({
               disablePadding
               fullWidth
             >
-              <SmallHeading disableMargins className={theme.title}>
+              <Typography variant="h6" className={theme.title}>
                 {view === 'days' && format(viewValue, 'MMMM')}
                 {view === 'months' && <>{yearValue}</>}
                 {view === 'years' && (
@@ -358,7 +356,7 @@ export const Calendar: FC<CalendarProps> = ({
                     {decadeStart.getFullYear()}-{decadeEnd.getFullYear()}
                   </>
                 )}
-              </SmallHeading>
+              </Typography>
             </Button>
             <Button
               variant="text"
@@ -434,6 +432,7 @@ export const Calendar: FC<CalendarProps> = ({
             value={
               isRange ? (rangeEnd ? rangeEnd : value?.[0]) : (value as Date)
             }
+            disabled={disabled}
             min={min}
             max={max === 'now' ? new Date() : max}
             theme={theme.time}
diff --git a/src/form/Calendar/CalendarDays/CalendarDays.tsx b/src/form/Calendar/CalendarDays/CalendarDays.tsx
index 7e9067e94..9ca8de8e1 100644
--- a/src/form/Calendar/CalendarDays/CalendarDays.tsx
+++ b/src/form/Calendar/CalendarDays/CalendarDays.tsx
@@ -1,6 +1,11 @@
-import React, { FC, useCallback, useMemo, useState } from 'react';
 import { endOfDay, isAfter, isBefore, isToday, startOfDay } from 'date-fns';
+import type { MotionNodeAnimationOptions } from 'motion/react';
+import { AnimatePresence, motion } from 'motion/react';
+import type { FC } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
+
 import { Button } from '@/elements';
+import type { CalendarTheme } from '@/form/Calendar/CalendarTheme';
 import {
   daysOfWeek,
   getDayAttributes,
@@ -8,13 +13,7 @@ import {
   isNextWeekEmpty,
   isPreviousWeekEmpty
 } from '@/form/Calendar/utils';
-import {
-  AnimatePresence,
-  motion,
-  MotionNodeAnimationOptions
-} from 'motion/react';
 import { cn, useComponentTheme } from '@/utils';
-import { CalendarTheme } from '@/form/Calendar/CalendarTheme';
 
 export interface CalendarDaysProps {
   /**
@@ -224,7 +223,7 @@ export const CalendarDays: FC<CalendarDaysProps> = ({
         isPreviousWeekEmpty(day.date, currentRange, hidePrevMonthDays);
 
       // Determine the color variant of the button
-      const colorVariant = isActive ? 'primary' : 'default';
+      const colorVariant = isActive ? 'primary' : 'secondary';
 
       // Determine the button variant
       const buttonVariant = isActive ? 'filled' : 'text';
diff --git a/src/form/Calendar/CalendarMonths/CalendarMonths.tsx b/src/form/Calendar/CalendarMonths/CalendarMonths.tsx
index 05381c98c..d1adbe4a5 100644
--- a/src/form/Calendar/CalendarMonths/CalendarMonths.tsx
+++ b/src/form/Calendar/CalendarMonths/CalendarMonths.tsx
@@ -1,8 +1,10 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
+
 import { Button } from '@/elements';
+import type { CalendarTheme } from '@/form/Calendar/CalendarTheme';
 import { monthNames } from '@/form/Calendar/utils';
 import { cn, useComponentTheme } from '@/utils';
-import { CalendarTheme } from '@/form/Calendar/CalendarTheme';
 
 export interface CalendarMonthsProps {
   /**
@@ -34,7 +36,7 @@ export const CalendarMonths: FC<CalendarMonthsProps> = ({
         <Button
           key={month}
           className={cn(months.month, { [months.selected]: value === i })}
-          color={value === i ? 'primary' : 'default'}
+          color={value === i ? 'primary' : 'secondary'}
           variant={value === i ? 'filled' : 'text'}
           disableMargins
           title={month}
diff --git a/src/form/Calendar/CalendarPresets/CalendarPresets.tsx b/src/form/Calendar/CalendarPresets/CalendarPresets.tsx
index e5cff29ab..c9271a075 100644
--- a/src/form/Calendar/CalendarPresets/CalendarPresets.tsx
+++ b/src/form/Calendar/CalendarPresets/CalendarPresets.tsx
@@ -1,8 +1,10 @@
-import React, { FC, Fragment } from 'react';
-import { cn, useComponentTheme } from '@/utils';
-import { CalendarTheme } from '@/form/Calendar/CalendarTheme';
-import { List, ListHeader, ListItem } from '@/layout';
+import type { FC } from 'react';
+import React, { Fragment } from 'react';
+
+import type { CalendarTheme } from '@/form/Calendar/CalendarTheme';
 import { isPresetActive } from '@/form/Calendar/utils';
+import { List, ListHeader, ListItem } from '@/layout';
+import { cn, useComponentTheme } from '@/utils';
 
 const DEFAULT_GROUP_NAME = 'Other';
 
diff --git a/src/form/Calendar/CalendarPresets/default-options.ts b/src/form/Calendar/CalendarPresets/default-options.ts
index 48e441d87..f322faa0c 100644
--- a/src/form/Calendar/CalendarPresets/default-options.ts
+++ b/src/form/Calendar/CalendarPresets/default-options.ts
@@ -1,25 +1,26 @@
 import {
+  addDays,
+  addMonths,
+  addWeeks,
+  addYears,
+  endOfDay,
+  endOfMonth,
+  endOfWeek,
+  endOfYear,
   setHours,
   setMinutes,
   setSeconds,
-  addDays,
   startOfDay,
-  subDays,
-  endOfDay,
-  startOfWeek,
-  subWeeks,
-  endOfWeek,
   startOfMonth,
-  subMonths,
-  endOfMonth,
+  startOfWeek,
   startOfYear,
-  subYears,
-  endOfYear,
-  addWeeks,
-  addMonths,
-  addYears
+  subDays,
+  subMonths,
+  subWeeks,
+  subYears
 } from 'date-fns';
-import { PresetOption } from './CalendarPresets';
+
+import type { PresetOption } from './CalendarPresets';
 
 export const TIME_PRESETS: PresetOption[] = [
   {
diff --git a/src/form/Calendar/CalendarRange.tsx b/src/form/Calendar/CalendarRange.tsx
index 638b8ff9e..0581fe722 100644
--- a/src/form/Calendar/CalendarRange.tsx
+++ b/src/form/Calendar/CalendarRange.tsx
@@ -1,21 +1,25 @@
-import React, { FC, Fragment, useCallback, useMemo, useState } from 'react';
 import {
   add,
   addMonths,
-  min as minDate,
+  format,
   max as maxDate,
-  sub,
-  format
+  min as minDate,
+  sub
 } from 'date-fns';
 import { AnimatePresence, motion } from 'motion/react';
+import type { FC } from 'react';
+import React, { Fragment, useCallback, useMemo, useState } from 'react';
+
 import { Button } from '@/elements';
-import { CalendarProps } from './Calendar';
-import { CalendarDays } from './CalendarDays';
-import { SmallHeading } from '@/typography';
 import { Divider, Stack } from '@/layout';
+import { SmallHeading } from '@/typography';
 import { useComponentTheme } from '@/utils';
-import { CalendarRangeTheme } from './CalendarRangeTheme';
-import { CalendarPresets, PresetOption } from './CalendarPresets';
+
+import type { CalendarProps } from './Calendar';
+import { CalendarDays } from './CalendarDays';
+import type { PresetOption } from './CalendarPresets';
+import { CalendarPresets } from './CalendarPresets';
+import type { CalendarRangeTheme } from './CalendarRangeTheme';
 
 export interface CalendarRangeProps
   extends Omit<
diff --git a/src/form/Calendar/CalendarRangeTheme.ts b/src/form/Calendar/CalendarRangeTheme.ts
index 4ecff5f58..5bccbba51 100644
--- a/src/form/Calendar/CalendarRangeTheme.ts
+++ b/src/form/Calendar/CalendarRangeTheme.ts
@@ -1,7 +1,7 @@
-import { CalendarTheme, calendarTheme } from './CalendarTheme';
+import type { CalendarTheme } from '@/form/Calendar/CalendarTheme';
+import { calendarTheme } from '@/form/Calendar/CalendarTheme';
 
-export interface CalendarRangeTheme
-  extends Omit<CalendarTheme, 'months' | 'years'> {}
+export type CalendarRangeTheme = Omit<CalendarTheme, 'months' | 'years'>;
 
 const baseTheme: Partial<CalendarRangeTheme> = {
   base: 'relative overflow-hidden',
@@ -20,17 +20,11 @@ export const calendarRangeTheme: CalendarRangeTheme = {
   header: baseTheme.header,
   title: baseTheme.title,
   content: baseTheme.content,
+  contentContainer: baseTheme.contentContainer,
   days: calendarTheme.days,
+  time: calendarTheme.time,
   presets: {
     ...calendarTheme.presets,
     divider: 'mx-1 h-[calc(100%-30px)] self-end'
   }
 };
-
-export const legacyCalendarRangeTheme: CalendarRangeTheme = {
-  base: baseTheme.base,
-  header: baseTheme.header,
-  title: baseTheme.title,
-  content: baseTheme.content,
-  days: calendarTheme.days
-};
diff --git a/src/form/Calendar/CalendarTheme.ts b/src/form/Calendar/CalendarTheme.ts
index c5f0c4f47..0ba23dbc4 100644
--- a/src/form/Calendar/CalendarTheme.ts
+++ b/src/form/Calendar/CalendarTheme.ts
@@ -5,9 +5,11 @@ export interface CalendarTheme {
     prev: string;
     mid: string;
     next: string;
+    divider?: string;
   };
   title: string;
   content: string;
+  contentContainer: string;
   days: {
     header: string;
     dayOfWeek: string;
@@ -33,7 +35,7 @@ export interface CalendarTheme {
     year: string;
     selected: string;
   };
-  time?: {
+  time: {
     base: string;
     wrapper: string;
     dividerTop: string;
@@ -58,7 +60,7 @@ export interface CalendarTheme {
       };
     };
   };
-  presets?: {
+  presets: {
     wrapper: string;
     divider: string;
     base: string;
@@ -70,183 +72,101 @@ export interface CalendarTheme {
   };
 }
 
-const baseTheme: CalendarTheme = {
-  base: 'relative overflow-hidden',
+export const calendarTheme: CalendarTheme = {
+  base: 'bg-calendar-colors-container-background-default relative overflow-hidden border rounded-(--calendar-details-corner-radius-default) border-calendar-colors-container-stroke-default [&>hr]:bg-calendar-colors-container-stroke-default',
   header: {
-    base: 'flex text-center justify-between mb-2 items-center',
-    prev: 'text-xl leading-4',
-    mid: '',
-    next: 'text-xl leading-4'
+    base: 'flex gap-(--calendar-details-space-between-default) text-center justify-between py-(--calendar-details-vertical-padding-default) px-(--calendar-details-horizontal-padding-header) items-center',
+    prev: 'text-lg leading-4 min-w-8 text-center text-buttons-colors-core-icon-ghost-assets-resting hover:text-buttons-colors-core-icon-ghost-assets-hover focus-visible:text-buttons-colors-core-icon-ghost-assets-hover',
+    mid: 'group',
+    next: 'text-lg leading-4 min-w-8 text-center text-buttons-colors-core-icon-ghost-assets-resting hover:text-buttons-colors-core-icon-ghost-assets-hover focus-visible:text-buttons-colors-core-icon-ghost-assets-hover',
+    divider: 'm-0 bg-calendar-colors-container-stroke-default'
   },
-  title: 'font-semibold leading-[normal]',
-  content: 'flex',
-
+  title:
+    'font-semibold text-base leading-8 text-calendar-colors-date-text-today group-hover:text-buttons-colors-core-icon-ghost-text-hover group-focus-visible:text-buttons-colors-core-icon-ghost-text-hover',
+  content: 'flex pt-2',
+  contentContainer: 'relative flex h-full max-h-80',
   days: {
-    header: 'text-center grid grid-cols-7 mb-1 pt-2 font-medium',
-    dayOfWeek: 'text-center font-medium',
-    week: 'grid grid-cols-7',
-    day: 'font-normal flex p-2 border',
-    outside: '',
-    startRangeDate: 'rounded-tl-md rounded-tr-none rounded-br-none',
-    cornerStartDateBottom: 'rounded-bl-none',
-    endRangeDate: 'rounded-br-md rounded-bl-none rounded-tl-none',
-    cornerEndDateTop: 'rounded-tr-none',
-    range: 'rounded-none',
-    selected: '',
-    hover: 'rounded-sm',
-    today: 'rounded-sm border'
+    header:
+      'pt-0 text-center grid grid-cols-7 gap-(--calendar-details-space-between-default) font-semibold text-calendar-colors-label-text-default px-(--calendar-details-horizontal-padding-content) pb-1',
+    dayOfWeek: 'flex items-center justify-center text-xs min-w-8 py-2',
+    week: 'grid grid-cols-7 gap-(--calendar-details-space-between-default) py-1 px-(--calendar-details-horizontal-padding-content) last:pb-(--calendar-details-horizontal-padding-content)',
+    day: `
+      font-normal text-xs flex p-2 rounded-(--calendar-details-corner-radius-default) size-8 border 
+      border-calendar-colors-date-stroke-resting focus-visible:border-calendar-colors-date-stroke-hover
+      text-calendar-colors-date-text-resting focus-visible:text-calendar-colors-date-text-hover
+      bg-calendar-colors-date-background-resting focus-visible:bg-calendar-colors-date-background-hover 
+    `,
+    outside: 'opacity-40',
+    startRangeDate: '',
+    cornerStartDateBottom: '',
+    endRangeDate: '',
+    cornerEndDateTop: '',
+    range: '',
+    selected:
+      'bg-calendar-colors-date-background-selected text-calendar-colors-date-text-selected',
+    hover:
+      'bg-calendar-colors-date-background-hover border-calendar-colors-date-stroke-hover text-calendar-colors-date-text-hover',
+    today: 'border-calendar-colors-date-stroke-today'
   },
-
   months: {
-    root: 'grid grid-cols-4 gap-2',
-    month: 'p-1.5',
-    selected: ''
+    root: 'grid grid-cols-4 gap-(--calendar-details-space-between-default)',
+    month: `
+          font-normal text-xs flex p-2 rounded-(--calendar-details-corner-radius-default) border 
+          border-calendar-colors-date-stroke-resting hover:border-calendar-colors-date-stroke-hove focus-visible:border-calendar-colors-date-stroke-hover
+          text-calendar-colors-date-text-resting hover:text-calendar-colors-date-text-hove focus-visible:text-calendar-colors-date-text-hover
+          bg-calendar-colors-date-background-resting hover:bg-calendar-colors-date-background-hover focus-visible:bg-calendar-colors-date-background-hover 
+        `,
+    selected:
+      'bg-calendar-colors-date-background-selected text-calendar-colors-date-text-selected'
   },
-
   years: {
-    root: 'grid grid-cols-4 gap-2',
-    year: 'p-1.5',
-    selected: ''
+    root: 'grid grid-cols-4 gap-(--calendar-details-space-between-default)',
+    year: `
+      font-normal text-xs flex p-2 rounded-(--calendar-details-corner-radius-default) border 
+      border-calendar-colors-date-stroke-resting hover:border-calendar-colors-date-stroke-hove focus-visible:border-calendar-colors-date-stroke-hover
+      text-calendar-colors-date-text-resting hover:text-calendar-colors-date-text-hove focus-visible:text-calendar-colors-date-text-hover
+      bg-calendar-colors-date-background-resting hover:bg-calendar-colors-date-background-hover focus-visible:bg-calendar-colors-date-background-hover 
+    `,
+    selected:
+      'bg-calendar-colors-date-background-selected text-calendar-colors-date-text-selected'
   },
-
   time: {
-    base: 'flex flex-col h-full gap-0',
-    wrapper: 'mt-4 bg-panel z-10 flex flex-row',
-    dividerTop: 'w-full',
-    dividerLeft: 'h-auto mt-2.5 mx-1 bg-surface z-10',
-    header: 'flex gap-4 px-0.5 pb-2.5 mb-2',
+    base: 'pr-1 flex flex-col h-full gap-0 text-xs text-buttons-colors-core-icon-ghost-assets-resting',
+    wrapper: 'z-10 flex flex-row',
+    dividerTop: 'hidden',
+    dividerLeft:
+      'h-auto mx-1 z-10 bg-calendar-colors-container-stroke-default mt-1',
+    header:
+      'flex gap-(--calendar-details-space-between-default) px-0.5 pb-2.5 mb-2',
     column: {
       base: 'w-6',
       wrapper: 'overflow-y-auto h-52',
       label: 'text-center text-xs text-gray-500',
       list: 'p-0 m-0 list-none',
-      scrollbar:
-        'scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 scrollbar-track-transparent hover:scrollbar-thumb-gray-400 dark:hover:scrollbar-thumb-gray-500'
+      scrollbar: ''
     },
     items: {
-      wrapper: 'flex flex-row flex-auto gap-0.25 pt-1 h-46',
+      wrapper: 'flex flex-row flex-auto gap-0.25 h-full pt-2',
       container: 'h-full',
-      list: 'relative h-full p-0 m-0 list-none overflow-y-auto [&::-webkit-scrollbar]:hidden scrollbar-none touch-pan-y',
-      divider: 'mx-0',
-      item: {
-        base: 'py-0.5 px-1.5 text-center select-none cursor-pointer rounded transition-colors duration-150',
-        selected: '',
-        disabled: 'cursor-not-allowed'
-      }
-    }
-  },
-  presets: {
-    wrapper: 'bg-panel z-10',
-    divider: 'mx-1 h-[calc(100%-26px)] self-end',
-    base: 'relative h-59 max-w-52 pr-1 overflow-y-auto [&::-webkit-scrollbar]:hidden scrollbar-none touch-pan-y space-y-0',
-    group: 'text-sm font-medium my-1 !pr-0 !pl-0',
-    item: {
-      base: 'text-sm p-1.5 my-0.5 duration-0',
-      active: ''
-    }
-  }
-};
-
-export const calendarTheme: CalendarTheme = {
-  ...baseTheme,
-  header: {
-    ...baseTheme.header,
-    base: [baseTheme.header.base, 'text-text-secondary'].join(' ')
-  },
-  days: {
-    ...baseTheme.days,
-    day: [
-      baseTheme.days.day,
-      'border-transparent text-text-secondary opacity-90 hover:bg-primary-hover hover:disabled:bg-transparent! hover:text-black disabled:text-text-secondary/60'
-    ].join(' '),
-    header: [baseTheme.days.header, 'text-text-secondary'].join(' '),
-    outside: [baseTheme.days.outside, 'opacity-40 text-text-secondary'].join(
-      ' '
-    ),
-    selected: [
-      baseTheme.days.selected,
-      'text-black border-transparent light:text-white light:border-transparent opacity-100'
-    ].join(' '),
-    hover: [
-      baseTheme.days.hover,
-      'bg-primary-active text-black border-transparent light:text-white opacity-100'
-    ].join(' '),
-    today: [baseTheme.days.today, 'border-panel-accent text-text-primary'].join(
-      ' '
-    )
-  },
-  months: {
-    ...baseTheme.months,
-    month: [
-      baseTheme.months.month,
-      'hover:bg-primary-hover hover:text-black border-transparent text-text-secondary light:hover:text-white'
-    ].join(' '),
-    selected: [
-      baseTheme.years.selected,
-      'border-transparent text-black light:text-white'
-    ].join(' ')
-  },
-  years: {
-    ...baseTheme.years,
-    year: [
-      baseTheme.years.year,
-      'hover:bg-primary-hover hover:text-black border-transparent text-text-secondary light:hover:text-white'
-    ].join(' '),
-    selected: [
-      baseTheme.years.selected,
-      'border-transparent text-black light:text-white'
-    ].join(' ')
-  },
-  time: {
-    ...baseTheme.time,
-    wrapper: [baseTheme.time.wrapper, 'border-panel-border'].join(' '),
-    items: {
-      ...baseTheme.time.items,
+      list: 'relative h-full m-0 list-none overflow-y-auto [&::-webkit-scrollbar]:hidden scrollbar-none touch-pan-y',
+      divider: 'mx-0 bg-calendar-colors-container-stroke-default',
       item: {
-        ...baseTheme.time.items.item,
-        base: [
-          baseTheme.time.items.item.base,
-          'text-text-secondary hover:bg-primary-hover hover:text-black'
-        ].join(' '),
-        selected: [
-          baseTheme.time.items.item.selected,
-          'bg-blue-500 text-white dark:bg-blue-600 dark:text-white'
-        ].join(' '),
-        disabled: [baseTheme.time.items.item.disabled, 'opacity-50'].join(' ')
+        base: 'bg-calendar-colors-date-background-resting py-1 px-1.5 text-center select-none cursor-pointer rounded transition-colors duration-150 hover:text-buttons-colors-core-icon-ghost-assets-hover hover:bg-calendar-colors-date-background-hover',
+        selected:
+          'bg-calendar-colors-date-background-selected text-calendar-colors-date-text-selected',
+        disabled:
+          'cursor-not-allowed opacity-50 hover:bg-transparent hover:text-calendar-colors-date-text-resting'
       }
     }
   },
   presets: {
-    ...baseTheme.presets,
-    group: [baseTheme.presets.group, '!text-gray-500 dark:text-gray-400'].join(
-      ' '
-    ),
+    wrapper: 'z-10 pl-2 py-1 items-start',
+    divider: 'mx-1 self-end bg-calendar-colors-container-stroke-default',
+    base: 'relative max-w-52 pr-1 overflow-y-auto [&::-webkit-scrollbar]:hidden scrollbar-none touch-pan-y space-y-0 h-full',
+    group: 'text-xs font-medium my-1 !pr-0 !pl-0',
     item: {
-      ...baseTheme.presets.item,
-      base: [
-        baseTheme.presets.item.base,
-        'hover:text-black dark:hover:bg-primary-hover hover:rounded-sm'
-      ].join(' '),
-      active: [
-        baseTheme.presets.item.active,
-        'bg-primary text-black rounded-sm'
-      ].join(' ')
+      base: 'text-xs p-1.5 my-0.5 duration-0 text-select-menu-items-color-item-text-row-resting ',
+      active: 'text-select-menu-items-color-item-text-row-selected'
     }
   }
 };
-
-export const legacyCalendarTheme: CalendarTheme = {
-  ...baseTheme,
-  header: {
-    ...baseTheme.header,
-    base: [
-      baseTheme.header.base,
-      'mb-[var(--spacing-sm)] mb-[var(--calendar-gap)]'
-    ].join(' ')
-  },
-  days: {
-    ...baseTheme.days,
-    header: [baseTheme.days.header, 'gap-[var(--calendar-gap)]'].join(' '),
-    outside: [baseTheme.days.outside, 'text-gray-100/60'].join(' ')
-  }
-};
diff --git a/src/form/Calendar/CalendarTimes/CalendarTimes.tsx b/src/form/Calendar/CalendarTimes/CalendarTimes.tsx
index f9bcf3c6c..a3f4b3137 100644
--- a/src/form/Calendar/CalendarTimes/CalendarTimes.tsx
+++ b/src/form/Calendar/CalendarTimes/CalendarTimes.tsx
@@ -1,5 +1,3 @@
-import React, { FC, useCallback, useMemo, useState } from 'react';
-import { AnimatePresence, motion } from 'motion/react';
 import {
   getHours,
   getMinutes,
@@ -12,11 +10,16 @@ import {
   setMinutes,
   setSeconds
 } from 'date-fns';
-import { TimeColumn } from './TimeColumn';
+import { AnimatePresence, motion } from 'motion/react';
+import type { FC } from 'react';
+import React, { useCallback, useMemo } from 'react';
+
 import type { CalendarTheme } from '@/form/Calendar/CalendarTheme';
 import { Divider } from '@/layout';
 import { cn } from '@/utils';
 
+import { TimeColumn } from './TimeColumn';
+
 export type AmPm = 'AM' | 'PM';
 
 export interface CalendarTimesProps {
@@ -25,6 +28,11 @@ export interface CalendarTimesProps {
    */
   value: Date;
 
+  /**
+   * Whether the time is disabled.
+   */
+  disabled?: boolean;
+
   /**
    * The minimum selectable date for the calendar.
    */
@@ -65,6 +73,7 @@ export const CalendarTimes: FC<CalendarTimesProps> = ({
   value,
   min,
   max,
+  disabled,
   onChange,
   theme: timeTheme,
   showDayOfWeek = false,
@@ -158,7 +167,7 @@ export const CalendarTimes: FC<CalendarTimesProps> = ({
 
   const hours = useMemo(() => {
     if (!value) return undefined;
-    let dayHours = getHours(safeDate);
+    const dayHours = getHours(safeDate);
 
     return is12HourCycle ? dayHours % 12 || 12 : dayHours;
   }, [value, safeDate, is12HourCycle]);
@@ -201,6 +210,7 @@ export const CalendarTimes: FC<CalendarTimesProps> = ({
             })}
           >
             <TimeColumn
+              disabled={disabled}
               theme={timeTheme}
               options={is12HourCycle ? HOURS_12 : HOURS_24}
               min={isSameDayWithMin ? getHours(min) : undefined}
@@ -215,6 +225,7 @@ export const CalendarTimes: FC<CalendarTimesProps> = ({
               className={timeTheme?.items.divider}
             />
             <TimeColumn
+              disabled={disabled}
               theme={timeTheme}
               options={MINUTES}
               min={
@@ -237,6 +248,7 @@ export const CalendarTimes: FC<CalendarTimesProps> = ({
               className={timeTheme?.items.divider}
             />
             <TimeColumn
+              disabled={disabled}
               theme={timeTheme}
               options={SECONDS}
               min={
@@ -261,6 +273,7 @@ export const CalendarTimes: FC<CalendarTimesProps> = ({
                   className={timeTheme?.items.divider}
                 />
                 <TimeColumn
+                  disabled={disabled}
                   theme={timeTheme}
                   options={['AM', 'PM']}
                   min={isSameDayWithMin ? getHours(min) : undefined}
diff --git a/src/form/Calendar/CalendarTimes/TimeColumn.tsx b/src/form/Calendar/CalendarTimes/TimeColumn.tsx
index 2b6d9faab..066a98586 100644
--- a/src/form/Calendar/CalendarTimes/TimeColumn.tsx
+++ b/src/form/Calendar/CalendarTimes/TimeColumn.tsx
@@ -1,4 +1,6 @@
-import React, { FC, useCallback, useEffect, useRef } from 'react';
+import type { FC } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
+
 import type { CalendarTheme } from '@/form/Calendar/CalendarTheme';
 import { cn } from '@/utils';
 
@@ -15,6 +17,11 @@ interface TimeColumnProps {
    */
   value?: number | AmPm;
 
+  /**
+   * Whether the column is disabled.
+   */
+  disabled?: boolean;
+
   /**
    * Minimum allowed time value
    */
@@ -49,6 +56,7 @@ interface TimeColumnProps {
 export const TimeColumn: FC<TimeColumnProps> = ({
   options,
   value,
+  disabled,
   min,
   max,
   theme,
@@ -124,7 +132,7 @@ export const TimeColumn: FC<TimeColumnProps> = ({
             ref={value === option ? selectedRef : null}
             className={cn(theme.items.item.base, {
               [theme.items.item.selected]: value === option,
-              [theme.items.item.disabled]: isOptionDisabled(option)
+              [theme.items.item.disabled]: isOptionDisabled(option) || disabled
             })}
             onClick={() => {
               if (isOptionDisabled(option)) {
@@ -134,7 +142,7 @@ export const TimeColumn: FC<TimeColumnProps> = ({
               onSelect(option);
             }}
             role="option"
-            aria-disabled={isOptionDisabled(option)}
+            aria-disabled={isOptionDisabled(option) || disabled}
             aria-selected={value === option}
           >
             {typeof option === 'number'
diff --git a/src/form/Calendar/CalendarYears/CalendarYears.tsx b/src/form/Calendar/CalendarYears/CalendarYears.tsx
index e6e26f7ff..0f94a57f3 100644
--- a/src/form/Calendar/CalendarYears/CalendarYears.tsx
+++ b/src/form/Calendar/CalendarYears/CalendarYears.tsx
@@ -1,13 +1,11 @@
-import React, { FC, useMemo } from 'react';
-import {
-  AnimatePresence,
-  motion,
-  MotionNodeAnimationOptions
-} from 'motion/react';
+import type { MotionNodeAnimationOptions } from 'motion/react';
+import { AnimatePresence, motion } from 'motion/react';
+import type { FC } from 'react';
+import React, { useMemo } from 'react';
+
 import { Button } from '@/elements';
+import type { CalendarTheme } from '@/form/Calendar/CalendarTheme';
 import { cn, useComponentTheme } from '@/utils';
-import { CalendarTheme } from '@/form/Calendar/CalendarTheme';
-import { twMerge } from 'tailwind-merge';
 
 export interface CalendarYearsProps {
   /**
@@ -97,7 +95,7 @@ export const CalendarYears: FC<CalendarYearsProps> = ({
           <Button
             key={year}
             className={cn(years.year, { [years.selected]: value === year })}
-            color={value === year ? 'primary' : 'default'}
+            color={value === year ? 'primary' : 'secondary'}
             variant={value === year ? 'filled' : 'text'}
             disableMargins
             title={year}
diff --git a/src/form/Calendar/index.ts b/src/form/Calendar/index.ts
index d9fd1f90d..0a1b4d959 100644
--- a/src/form/Calendar/index.ts
+++ b/src/form/Calendar/index.ts
@@ -1,5 +1,5 @@
 export * from './Calendar';
+export * from './CalendarPresets';
 export * from './CalendarRange';
-export * from './CalendarTheme';
 export * from './CalendarRangeTheme';
-export * from './CalendarPresets';
+export * from './CalendarTheme';
diff --git a/src/form/Calendar/utils.spec.ts b/src/form/Calendar/utils.spec.ts
index eaea929e9..4e6ad3015 100644
--- a/src/form/Calendar/utils.spec.ts
+++ b/src/form/Calendar/utils.spec.ts
@@ -1,16 +1,16 @@
 import { differenceInDays } from 'date-fns';
-import { describe, test, expect } from 'vitest';
+import { describe, expect, test } from 'vitest';
 import { vi } from 'vitest';
 
 import {
   getDayAttributes,
   getDayLabels,
+  getMonthNames,
   getWeeks,
   isNextWeekEmpty,
-  isPreviousWeekEmpty,
-  updateDateTime,
   isPresetActive,
-  getMonthNames
+  isPreviousWeekEmpty,
+  updateDateTime
 } from './utils';
 
 describe('getDayLabels', () => {
diff --git a/src/form/Calendar/utils.ts b/src/form/Calendar/utils.ts
index bcf34c042..1602305ba 100644
--- a/src/form/Calendar/utils.ts
+++ b/src/form/Calendar/utils.ts
@@ -1,30 +1,30 @@
 import {
   addDays,
+  differenceInMinutes,
+  differenceInSeconds,
+  endOfDay,
   format,
+  getDate,
   getDay,
   getDaysInMonth,
-  getDate,
+  getHours,
   getISODay,
+  getMinutes,
+  getSeconds,
   isAfter,
   isBefore,
-  isValid,
   isSameDay,
   isSameMonth,
-  startOfMonth,
-  min,
-  max,
-  subDays,
+  isValid,
   isWithinInterval,
-  endOfDay,
-  startOfDay,
-  getHours,
-  getMinutes,
-  getSeconds,
-  setMinutes,
+  max,
+  min,
   setHours,
+  setMinutes,
   setSeconds,
-  differenceInSeconds,
-  differenceInMinutes
+  startOfDay,
+  startOfMonth,
+  subDays
 } from 'date-fns';
 
 /**
@@ -99,10 +99,7 @@ export function getWeeks(
   let offset = getDay(day);
   const numOfWeeks = Math.ceil((daysInMonth + offset) / 7);
 
-  // @ts-ignore
-  const weeks: Day[][] = Array.apply(null, {
-    length: numOfWeeks
-  }).map(() => []);
+  const weeks: Day[][] = Array.from({ length: numOfWeeks }, () => []);
 
   const current = new Date();
 
@@ -259,8 +256,8 @@ export function updateDateTime(
       if (!isRange) {
         // For single date, inherit time from previous value
         const originalTimeSource = Array.isArray(currentDate)
-          ? currentDate[0] ?? new Date()
-          : currentDate ?? new Date();
+          ? (currentDate[0] ?? new Date())
+          : (currentDate ?? new Date());
         finalDate = setSeconds(
           setMinutes(
             setHours(newDate, getHours(originalTimeSource)),
@@ -272,8 +269,8 @@ export function updateDateTime(
         // For range, only inherit time for first date
         if (!rangeStart) {
           const originalTimeSource = Array.isArray(currentDate)
-            ? currentDate[0] ?? new Date()
-            : currentDate ?? new Date();
+            ? (currentDate[0] ?? new Date())
+            : (currentDate ?? new Date());
           finalDate = setSeconds(
             setMinutes(
               setHours(newDate, getHours(originalTimeSource)),
diff --git a/src/form/Checkbox/Checkbox.story.tsx b/src/form/Checkbox/Checkbox.story.tsx
index 084dbe0a5..bc330bf0c 100644
--- a/src/form/Checkbox/Checkbox.story.tsx
+++ b/src/form/Checkbox/Checkbox.story.tsx
@@ -1,6 +1,8 @@
+import { Fragment, useState } from 'react';
+
 import { Button } from '@/elements/Button';
 import { Dialog, useDialog } from '@/layers/Dialog';
-import { Fragment, useState } from 'react';
+
 import { Checkbox } from './Checkbox';
 
 export default {
diff --git a/src/form/Checkbox/Checkbox.tsx b/src/form/Checkbox/Checkbox.tsx
index fedea39b1..c3de294f1 100644
--- a/src/form/Checkbox/Checkbox.tsx
+++ b/src/form/Checkbox/Checkbox.tsx
@@ -1,17 +1,12 @@
-import { useComponentTheme } from '@/utils';
 import { motion, useMotionValue, useTransform } from 'motion/react';
-import React, {
-  FC,
-  forwardRef,
-  LegacyRef,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useState
-} from 'react';
-import { twMerge } from 'tailwind-merge';
+import type { LegacyRef, ReactNode } from 'react';
+import React, { forwardRef, useCallback, useEffect, useState } from 'react';
+
+import { useComponentTheme } from '@/utils';
+import { twMerge } from '@/utils';
+
 import { CheckboxLabel } from './CheckboxLabel';
-import { CheckboxTheme } from './CheckboxTheme';
+import type { CheckboxSizeTheme, CheckboxTheme } from './CheckboxTheme';
 
 export interface CheckboxProps {
   /**
@@ -42,7 +37,7 @@ export interface CheckboxProps {
   /**
    * Size of the checkbox.
    */
-  size?: 'small' | 'medium' | 'large' | string;
+  size?: keyof CheckboxSizeTheme;
 
   /**
    * Additional class names to apply to the checkbox.
@@ -97,7 +92,7 @@ export interface CheckboxRef {
   ref?: LegacyRef<HTMLDivElement>;
 }
 
-export const Checkbox: FC<CheckboxProps & CheckboxRef> = forwardRef(
+export const Checkbox = forwardRef<HTMLDivElement, CheckboxProps>(
   (
     {
       checked = false,
diff --git a/src/form/Checkbox/CheckboxLabel.tsx b/src/form/Checkbox/CheckboxLabel.tsx
index ac6cde03c..ecc41f9cf 100644
--- a/src/form/Checkbox/CheckboxLabel.tsx
+++ b/src/form/Checkbox/CheckboxLabel.tsx
@@ -1,10 +1,13 @@
-import React, { FC, ReactNode } from 'react';
-import { twMerge } from 'tailwind-merge';
-import { CheckboxTheme } from './CheckboxTheme';
+import type { FC, ReactNode } from 'react';
+import React from 'react';
+
+import { twMerge } from '@/utils';
+
+import type { CheckboxSizeTheme, CheckboxTheme } from './CheckboxTheme';
 
 interface CheckboxLabelProps {
   label: string | ReactNode;
-  size: 'small' | 'medium' | 'large' | string;
+  size: keyof CheckboxSizeTheme;
   disabled?: boolean;
   checked?: boolean;
   onChange?: () => void;
diff --git a/src/form/Checkbox/CheckboxTheme.ts b/src/form/Checkbox/CheckboxTheme.ts
index a9bd5217d..ccfa1f7a2 100644
--- a/src/form/Checkbox/CheckboxTheme.ts
+++ b/src/form/Checkbox/CheckboxTheme.ts
@@ -1,3 +1,10 @@
+export interface CheckboxSizeTheme {
+  small: string;
+  medium: string;
+  large: string;
+  [key: string]: string;
+}
+
 export interface CheckboxTheme {
   base: string;
   label: {
@@ -5,12 +12,7 @@ export interface CheckboxTheme {
     clickable: string;
     disabled: string;
     checked: string;
-    sizes: {
-      small: string;
-      medium: string;
-      large: string;
-      [key: string]: string;
-    };
+    sizes: CheckboxSizeTheme;
   };
   border: {
     base: string;
@@ -27,12 +29,7 @@ export interface CheckboxTheme {
     disabled: string;
     checked: string;
   };
-  sizes: {
-    small: string;
-    medium: string;
-    large: string;
-    [key: string]: string;
-  };
+  sizes: CheckboxSizeTheme;
   boxVariants: {
     hover: {
       strokeWidth: number;
@@ -53,119 +50,52 @@ export interface CheckboxTheme {
   };
 }
 
-const baseTheme: Partial<CheckboxTheme> = {
+export const checkboxTheme: CheckboxTheme = {
   base: 'inline-flex items-center w-full group',
   label: {
-    base: 'dark:text-gray-400 light:text-gray-700 ml-2.5 w-full',
-    checked: 'checked dark:text-gray-100 light:text-gray-900',
-    disabled: 'cursor-not-allowed dark:text-gray-600 light:text-gray-400',
-    clickable: 'cursor-pointer',
+    base: 'ml-3 w-full text-selectors-colors-text-description-not-selected whitespace-nowrap',
+    checked: 'checked text-selectors-colors-text-description-selected',
+    disabled: 'cursor-not-allowed opacity-40',
+    clickable: `
+          cursor-pointer transition-colors
+          group-hover:text-selectors-colors-text-label-selected group-focus-within:text-selectors-colors-text-label-selected
+        `,
     sizes: {
-      small: 'text-sm',
-      medium: 'text-base',
-      large: 'text-lg'
+      small: 'text-xs',
+      medium: 'text-sm',
+      large: 'text-base'
     }
   },
   check: {
-    base: 'stroke-white',
+    base: 'stroke-selectors-colors-checkbox-selected-assets-base group-hover:stroke-selectors-colors-checkbox-selected-assets-hover',
     checked: '',
     disabled: 'cursor-not-allowed'
   },
   border: {
-    base: 'stroke-gray-400 light:stroke-gray-700',
-    checked: 'stroke-blue-500',
-    disabled: 'cursor-not-allowed stroke-gray-500'
+    base: '',
+    checked: '',
+    disabled: 'cursor-not-allowed'
   },
   checkbox: {
-    base: 'fill-transparent flex items-center justify-center cursor-pointer focus-visible:outline-hidden',
-    checked: 'fill-blue-500 checked',
-    disabled: 'fill-transparent disabled'
+    base: `
+          flex items-center justify-center cursor-pointer border transition-colors focus-visible:outline-none
+          bg-selectors-colors-checkbox-not-selected-background-resting group-hover:bg-selectors-colors-checkbox-not-selected-background-hover group-focus-within:bg-selectors-colors-checkbox-not-selected-background-hover
+          border-selectors-colors-checkbox-not-selected-stroke-resting group-hover:border-selectors-colors-checkbox-not-selected-stroke-hover group-focus-within:border-selectors-colors-checkbox-not-selected-stroke-hover
+          [&>svg>path:first-child]:stroke-transparent [&>svg]:fill-transparent [&>svg]:outline-none
+        `,
+    checked: `
+          bg-selectors-colors-checkbox-selected-background-resting group-hover:bg-selectors-colors-checkbox-selected-background-hover group-focus-within:bg-selectors-colors-checkbox-selected-background-hover
+          border-selectors-colors-checkbox-selected-stroke-resting group-hover:border-selectors-colors-checkbox-selected-stroke-hover group-focus-within:border-selectors-colors-checkbox-selected-stroke-hover
+        `,
+    disabled:
+      'disabled cursor-not-allowed opacity-40 group-hover:bg-selectors-colors-checkbox-selected-resting'
   },
   sizes: {
-    small: '[&>svg]:w-3 [&>svg]:h-3',
-    medium: '[&>svg]:w-4 [&>svg]:h-4',
-    large: '[&>svg]:w-5 [&>svg]:h-5'
-  }
-};
-export const checkboxTheme: CheckboxTheme = {
-  ...baseTheme,
-  checkbox: {
-    ...baseTheme.checkbox,
-    base: [
-      baseTheme.checkbox.base,
-      'border border-surface',
-      '[&.checked.disabled]:fill-gray-400'
-    ].join(' '),
-    checked: [
-      baseTheme.checkbox.checked,
-      'group-hover:fill-blue-400',
-      'light:group-hover:fill-blue-600',
-      'light:group-hover:[&.disabled]:fill-gray-400'
-    ].join(' '),
-    disabled: [
-      baseTheme.checkbox.disabled,
-      'group-hover:transparent',
-      'light:group-hover:transparent'
-    ].join(' ')
-  },
-  check: {
-    ...baseTheme.check,
-    base: [
-      baseTheme.check.base,
-      'group-hover:stroke-black light:group-hover:stroke-white'
-    ].join(' '),
-    disabled: [
-      baseTheme.check.disabled,
-      'stroke-black light:stroke-white group-hover:stroke-black '
-    ].join(' ')
-  },
-  border: {
-    ...baseTheme.border,
-    base: [
-      baseTheme.border.base,
-      'dark:group-hover:stroke-blue-300',
-      'light:group-hover:stroke-blue-600'
-    ].join(' '),
-    disabled: [
-      baseTheme.border.disabled,
-      'dark:group-hover:stroke-gray-500',
-      'light:group-hover:stroke-gray-400'
-    ].join(' ')
-  },
-  label: {
-    ...baseTheme.label,
-    base: [
-      baseTheme.label.base,
-      'text-text-primary dark:group-hover:text-blue-300 light:group-hover:text-blue-400'
-    ].join(' '),
-    checked: [baseTheme.label.checked, 'group-hover:text-gray-100'].join(' '),
-    disabled: [
-      baseTheme.label.disabled,
-      'light:group-hover:text-gray-400',
-      'dark:group-hover:text-gray-600'
-    ].join(' ')
-  },
-  boxVariants: {
-    hover: {
-      strokeWidth: 1
-    },
-    pressed: { scale: 0.95 }
-  }
-} as CheckboxTheme;
-
-export const legacyCheckboxTheme: CheckboxTheme = {
-  ...baseTheme,
-  checkbox: { base: [baseTheme.checkbox, 'fill-transparent'].join(' ') },
-  check: {
-    base: [baseTheme.check.base, 'stroke-[var(--checkbox-check-stroke)]'].join(
-      ' '
-    )
-  },
-  label: {
-    ...baseTheme.label,
-    base: [
-      baseTheme.label.base,
-      'text-[var(--checkbox-label-color)] ml-[var(--spacing-md)]'
-    ].join(' ')
+    small:
+      '[&>svg]:size-(--selectors-details-width-radio-checkbox-sm) rounded-(--selectors-details-corner-radius-checkbox-sm)',
+    medium:
+      '[&>svg]:size-(--selectors-details-width-radio-checkbox-sm) rounded-(--selectors-details-corner-radius-checkbox-sm)',
+    large:
+      '[&>svg]:size-(--selectors-details-width-radio-checkbox-lg) rounded-(--selectors-details-corner-radius-checkbox-lg)'
   }
 } as CheckboxTheme;
diff --git a/src/form/DateInput/DateInput.story.tsx b/src/form/DateInput/DateInput.story.tsx
index 233fe31bd..d93a605e8 100644
--- a/src/form/DateInput/DateInput.story.tsx
+++ b/src/form/DateInput/DateInput.story.tsx
@@ -1,8 +1,9 @@
+import { useState } from 'react';
+
 import { DateFormat } from '../../data/DateFormat';
 import { Stack } from '../../layout/Stack';
-import { useState } from 'react';
-import { DateInput } from './DateInput';
 import { COMBINED_PRESETS, PAST_RANGE_PRESETS } from '../Calendar';
+import { DateInput } from './DateInput';
 
 export default {
   title: 'Components/Form/Date Input',
diff --git a/src/form/DateInput/DateInput.tsx b/src/form/DateInput/DateInput.tsx
index a7506efee..97b34d040 100644
--- a/src/form/DateInput/DateInput.tsx
+++ b/src/form/DateInput/DateInput.tsx
@@ -1,27 +1,20 @@
-import React, {
-  ChangeEvent,
-  FocusEvent,
-  FC,
-  ReactElement,
-  useCallback,
-  useEffect,
-  useRef,
-  useState
-} from 'react';
 import { format as formatDate, isValid, parse } from 'date-fns';
+import type { ChangeEvent, FC, FocusEvent, ReactElement } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 
+import CalendarIcon from '@/assets/icons/calendar.svg?react';
 import { IconButton } from '@/elements/IconButton';
+import type { DateInputTheme } from '@/form';
+import type { PresetOption } from '@/form/Calendar';
+import { Calendar } from '@/form/Calendar';
+import { isPresetActive } from '@/form/Calendar/utils';
+import type { InputProps, InputRef } from '@/form/Input';
+import { Input } from '@/form/Input';
 import { Menu } from '@/layers/Menu';
-import { Card } from '@/layout/Card';
-import { Placement } from '@/utils/Position';
-import { Calendar, PresetOption } from '@/form/Calendar';
-import { Input, InputProps, InputRef } from '@/form/Input';
-
-import CalendarIcon from '@/assets/icons/calendar.svg?react';
 import { List, ListItem } from '@/layout';
+import { Card } from '@/layout/Card';
 import { cn, useComponentTheme } from '@/utils';
-import { isPresetActive } from '@/form/Calendar/utils';
-import { DateInputTheme } from './DateInputTheme';
+import type { Placement } from '@/utils/Position';
 
 export type DateInputProps = Omit<InputProps, 'value' | 'onChange'> & {
   /**
@@ -176,7 +169,7 @@ export const DateInput: FC<DateInputProps> = ({
         theme={theme.input}
         endAdornment={
           <IconButton
-            className="px-0"
+            className="p-0"
             variant="text"
             onClick={() => setOpen(true)}
           >
diff --git a/src/form/DateInput/DateInputTheme.ts b/src/form/DateInput/DateInputTheme.ts
index eaa75e63a..1b1551798 100644
--- a/src/form/DateInput/DateInputTheme.ts
+++ b/src/form/DateInput/DateInputTheme.ts
@@ -1,5 +1,7 @@
-import { calendarTheme, CalendarTheme } from '@/form/Calendar';
-import { inputTheme, InputTheme } from '@/form/Input';
+import type { CalendarTheme } from '@/form/Calendar';
+import { calendarTheme } from '@/form/Calendar';
+import type { InputTheme } from '@/form/Input';
+import { inputTheme } from '@/form/Input';
 
 export interface DateInputTheme {
   input: InputTheme;
@@ -17,12 +19,10 @@ export const dateInputTheme: DateInputTheme = {
   input: inputTheme,
   calendar: calendarTheme,
   preset: {
-    list: 'w-full border border-panel-accent',
+    list: 'w-full',
     option: {
-      base: 'hover:bg-vulcan hover:text-mystic light:hover:bg-vulcan/5 light:hover:text-text-secondary',
-      active: 'bg-vulcan hover:text-mystic'
+      base: '',
+      active: ''
     }
   }
 };
-
-export const legacyDateInputTheme: DateInputTheme = dateInputTheme;
diff --git a/src/form/Input/DebouncedInput/DebouncedInput.story.tsx b/src/form/Input/DebouncedInput/DebouncedInput.story.tsx
index 05de4498a..39c3730e2 100644
--- a/src/form/Input/DebouncedInput/DebouncedInput.story.tsx
+++ b/src/form/Input/DebouncedInput/DebouncedInput.story.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+
 import { DebouncedInput } from './DebouncedInput';
 
 export default {
diff --git a/src/form/Input/DebouncedInput/DebouncedInput.tsx b/src/form/Input/DebouncedInput/DebouncedInput.tsx
index 3e71c2b90..37a42a688 100644
--- a/src/form/Input/DebouncedInput/DebouncedInput.tsx
+++ b/src/form/Input/DebouncedInput/DebouncedInput.tsx
@@ -1,5 +1,8 @@
-import React, { FC, forwardRef, Ref, useEffect, useRef, useState } from 'react';
-import { Input, InputProps, InputRef } from '@/form/Input/Input';
+import type { Ref } from 'react';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+
+import type { InputProps, InputRef } from '@/form/Input/Input';
+import { Input } from '@/form/Input/Input';
 
 export interface DebouncedInputProps extends InputProps {
   /**
diff --git a/src/form/Input/InlineInput/InlineInput.story.tsx b/src/form/Input/InlineInput/InlineInput.story.tsx
index 8aee12463..04e0875c7 100644
--- a/src/form/Input/InlineInput/InlineInput.story.tsx
+++ b/src/form/Input/InlineInput/InlineInput.story.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+
 import { InlineInput } from './InlineInput';
 
 export default {
@@ -9,7 +10,7 @@ export default {
 export const Basic = () => {
   const [text, setText] = useState('');
   return (
-    <div className="border border-blue-500 p-2">
+    <div className="border border-inputs-colors-normal-stroke-selected p-2">
       <InlineInput
         value={text}
         onChange={event => setText(event.target.value)}
diff --git a/src/form/Input/InlineInput/InlineInput.tsx b/src/form/Input/InlineInput/InlineInput.tsx
index ab93a90f5..62633f39f 100644
--- a/src/form/Input/InlineInput/InlineInput.tsx
+++ b/src/form/Input/InlineInput/InlineInput.tsx
@@ -1,11 +1,7 @@
-import React, {
-  forwardRef,
-  Ref,
-  InputHTMLAttributes,
-  FC,
-  LegacyRef
-} from 'react';
-import { InputTheme } from '@/form/Input/InputTheme';
+import type { FC, InputHTMLAttributes, LegacyRef, Ref } from 'react';
+import React, { forwardRef } from 'react';
+
+import type { InputTheme } from '@/form/Input/InputTheme';
 import { cn, useComponentTheme } from '@/utils';
 
 export interface InlineInputProps
diff --git a/src/form/Input/Input.story.tsx b/src/form/Input/Input.story.tsx
index 55e6dd5d2..baee7d06a 100644
--- a/src/form/Input/Input.story.tsx
+++ b/src/form/Input/Input.story.tsx
@@ -1,4 +1,5 @@
-import React, { useState } from 'react';
+import React from 'react';
+
 import { Input } from './Input';
 
 export default {
diff --git a/src/form/Input/Input.tsx b/src/form/Input/Input.tsx
index 3960c8b43..2c2ff2ce0 100644
--- a/src/form/Input/Input.tsx
+++ b/src/form/Input/Input.tsx
@@ -1,15 +1,17 @@
+import type { RefObject } from 'react';
 import React, {
   forwardRef,
-  RefObject,
   useImperativeHandle,
   useLayoutEffect,
   useRef,
   useState
 } from 'react';
-import { twMerge } from 'tailwind-merge';
-import { InputTheme } from './InputTheme';
+
+import { twMerge } from '@/utils';
 import { useComponentTheme } from '@/utils';
 
+import type { InputSizeTheme, InputTheme } from './InputTheme';
+
 export interface InputProps
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
   /**
@@ -35,7 +37,7 @@ export interface InputProps
   /**
    * Size of the input.
    */
-  size?: 'small' | 'medium' | 'large' | string;
+  size?: keyof InputSizeTheme;
 
   /**
    * Content to display before the input.
diff --git a/src/form/Input/InputTheme.ts b/src/form/Input/InputTheme.ts
index ad7c3d7f8..102bd4c4e 100644
--- a/src/form/Input/InputTheme.ts
+++ b/src/form/Input/InputTheme.ts
@@ -1,3 +1,10 @@
+export interface InputSizeTheme {
+  small: string;
+  medium: string;
+  large: string;
+  [key: string]: string;
+}
+
 export interface InputTheme {
   base: string;
   input: string;
@@ -6,12 +13,7 @@ export interface InputTheme {
   focused: string;
   fullWidth: string;
   error: string;
-  sizes: {
-    small: string;
-    medium: string;
-    large: string;
-    [key: string]: string;
-  };
+  sizes: InputSizeTheme;
   adornment: {
     base: string;
     start: string;
@@ -19,74 +21,49 @@ export interface InputTheme {
   };
 }
 
-const baseTheme: InputTheme = {
-  base: 'flex relative flex-row items-center flex-nowrap box-border transition-colors rounded-xs',
-  focused: '',
-  input:
-    'flex-1 font-normal font-sans bg-transparent border-0 p-0 m-0 disabled:pointer-events-none outline-hidden px-0.5 disabled:cursor-not-allowed disabled:text-disabled',
+export const inputTheme: InputTheme = {
+  base: 'group flex relative flex-row items-center flex-nowrap transition-colors rounded-(--inputs-details-corner-radius-primary) bg-inputs-colors-normal-background-resting border border-inputs-colors-normal-stroke-resting hover:border-inputs-colors-normal-stroke-hover',
+  focused:
+    'border-inputs-colors-normal-stroke-selected bg-inputs-colors-normal-background-selected [&_svg]:fill-inputs-colors-normal-assets-input-selected!',
+  input: `
+    flex-1 font-normal font-sans bg-transparent border-0 p-0 m-0 disabled:pointer-events-none outline-hidden disabled:cursor-not-allowed disabled:text-disabled transition-colors
+    placeholder:text-inputs-colors-normal-text-input-text-resting focus:placeholder:text-inputs-colors-normal-text-input-text-selected
+  `,
   inline: 'bg-transparent border-0 outline-hidden',
-  disabled: 'text-waterloo cursor-not-allowed',
+  disabled:
+    'cursor-not-allowed opacity-40 hover:border-inputs-colors-normal-stroke-resting',
   fullWidth: 'w-full',
-  error: 'border-error',
+  error: `
+    border-inputs-colors-error-stroke-resting bg-inputs-colors-error-background-resting [&>input]:text-inputs-colors-error-text-input-filled [&>input]:placeholder:text-inputs-colors-error-text-input-text-resting
+    hover:border-inputs-colors-error-stroke-hover hover:bg-inputs-colors-error-background-hover
+    focus-within:border-inputs-colors-error-stroke-selected focus-within:bg-inputs-colors-error-background-selected
+  `,
   sizes: {
-    small: '[&>input]:text-sm p-1 text-sm',
-    medium: '[&>input]:text-base px-2.5 py-1.5 text-base',
-    large: '[&>input]:text-lg p-5 text-lg'
+    small: `
+      h-(--inputs-details-height-input-sm)
+      pl-(--inputs-details-horizontal-padding-left-sm) pr-(--inputs-details-horizontal-padding-right-sm)
+      gap-(--inputs-details-space-between-horizontal-sm)
+      [&>input]:text-xs [&>input]:leading-4 [&_svg]:size-(--inputs-details-asset-size-sm)
+    `,
+    medium: `
+      h-(--inputs-details-height-input-md)
+      pl-(--inputs-details-horizontal-padding-left-md) pr-(--inputs-details-horizontal-padding-right-md)
+      gap-(--inputs-details-space-between-horizontal-md)
+      [&>input]:text-sm [&>input]:leading-4.5 [&_svg]:size-(--inputs-details-asset-size-md)
+    `,
+    large: `
+      h-(--inputs-details-height-input-lg)
+      pl-(--inputs-details-horizontal-padding-left-lg) pr-(--inputs-details-horizontal-padding-right-lg)
+      gap-(--inputs-details-space-between-horizontal-lg)
+      [&>input]:text-base [&>input]:leading-6 [&_svg]:size-(--inputs-details-asset-size-lg)
+    `
   },
   adornment: {
-    base: 'flex items-center justify-center [&>svg]:w-4 [&>svg]:h-4 [&>svg]:current-color',
-    start: 'pr-1.5',
-    end: 'pl-1.5'
-  }
-};
-
-export const inputTheme: InputTheme = {
-  ...baseTheme,
-  base: [
-    baseTheme.base,
-    'bg-panel border border-panel-accent text-text-primary hover:border-panel-accent light:hover:border-panel-accent',
-    'hover:after:bg-[radial-gradient(circle,_#105EFF_0%,_#105EFF_36%,_#242433_100%)] light:hover:after:bg-[radial-gradient(circle,_#105EFF_0%,_#105EFF_36%,_#E6E6F0_100%)]',
-    'hover:after:content-[""] hover:after:absolute hover:after:mx-1 hover:after:h-px after:z-2 hover:after:rounded-sm hover:after:-bottom-[1px] hover:after:inset-x-0.5'
-  ].join(' '),
-  focused: [
-    baseTheme.focused,
-    'focus-within:after:bg-[radial-gradient(circle,_#93B6FF_0%,_#105EFF_36%,_#3D3D4D_90%,_#242433_100%)] light:focus-within:after:bg-[radial-gradient(circle,_#105EFF_10%,_#93B6FF_36%,_#E6E6F0_90%)]',
-    'focus-within:after:content-[""] focus-within:after:absolute focus-within:after:mx-0 focus-within:after:h-px after:z-2 focus-within:after:rounded-sm focus-within:after:-bottom-[1px] focus-within:after:inset-x-0.5'
-  ].join(' '),
-  input: [baseTheme.input, 'placeholder-accent'].join(' '),
-  disabled: [
-    baseTheme.disabled,
-    'disabled-within:bg-dark-disabled disabled-within:after:content-none'
-  ].join(' '),
-  adornment: {
-    ...baseTheme.adornment,
-    base: [baseTheme.adornment.base, 'text-text-primary'].join(' ')
+    base: `
+      flex items-center justify-center transition-colors
+      [&>svg]:fill-inputs-colors-normal-assets-input-resting group-hover:[&>svg]:fill-inputs-colors-normal-assets-input-hover
+    `,
+    start: '',
+    end: ''
   }
 };
-
-export const legacyInputTheme: InputTheme = {
-  ...baseTheme,
-  base: [
-    baseTheme.base,
-    'bg-[var(--input-background)] rounded-[var(--input-border-radius)] [border:_var(--input-border)] focus-within:border-[var(--input-border-focus)]'
-  ].join(' '),
-  error: [baseTheme.error, 'border-[var(--error-background)]'].join(' '),
-  sizes: {
-    small: '[padding:_var(--input-spacing-sm)]',
-    medium: '[padding:_var(--input-spacing-md)]',
-    large: 'padding:_var(--input-spacing-lg)'
-  },
-  adornment: {
-    base: [
-      baseTheme.adornment.base,
-      '[&>svg]:w-[var(--input-adornment-size)] [&>svg]:h-[var(--input-adornment-size)] [&>svg]:fill-[var(--input-adornment-fill)]'
-    ].join(' '),
-    start: '[padding-right:_calc(var(--list-item-spacing)_/_2)]',
-    end: '[padding-left:_calc(var(--list-item-spacing)_/_2)]'
-  },
-  input: [
-    baseTheme.input,
-    'placeholder-[var(--input-color-placeholder)] '
-  ].join(' '),
-  disabled: [baseTheme.disabled, 'text-[var(--disabled-color)]'].join(' ')
-};
diff --git a/src/form/Input/index.ts b/src/form/Input/index.ts
index bcb87c3dd..94a030bc3 100644
--- a/src/form/Input/index.ts
+++ b/src/form/Input/index.ts
@@ -1,4 +1,4 @@
-export * from './Input';
-export * from './InlineInput';
 export * from './DebouncedInput';
+export * from './InlineInput';
+export * from './Input';
 export * from './InputTheme';
diff --git a/src/form/Radio/Radio.story.tsx b/src/form/Radio/Radio.story.tsx
index 9c0f58490..7084b511b 100644
--- a/src/form/Radio/Radio.story.tsx
+++ b/src/form/Radio/Radio.story.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment, useState } from 'react';
+
 import { Radio } from './Radio';
 
 export default {
diff --git a/src/form/Radio/Radio.tsx b/src/form/Radio/Radio.tsx
index 58d518714..96c929995 100644
--- a/src/form/Radio/Radio.tsx
+++ b/src/form/Radio/Radio.tsx
@@ -1,15 +1,11 @@
-import React, {
-  FC,
-  forwardRef,
-  LegacyRef,
-  ReactNode,
-  useContext,
-  useMemo
-} from 'react';
 import { motion } from 'motion/react';
-import { RadioGroupContext } from './RadioGroupContext';
+import type { LegacyRef, ReactNode } from 'react';
+import React, { forwardRef, useContext, useMemo } from 'react';
+
 import { cn, useComponentTheme } from '@/utils';
-import { RadioTheme } from './RadioTheme';
+
+import { RadioGroupContext } from './RadioGroupContext';
+import type { RadioSizeTheme, RadioTheme } from './RadioTheme';
 
 export interface RadioProps {
   /**
@@ -37,7 +33,7 @@ export interface RadioProps {
   /**
    * Size of the radio.
    */
-  size?: 'small' | 'medium' | 'large' | string;
+  size?: keyof RadioSizeTheme;
 
   /**
    * Event handler for when the radio is changed.
@@ -73,7 +69,7 @@ export interface RadioRef {
   ref?: LegacyRef<HTMLDivElement>;
 }
 
-export const Radio: FC<RadioProps & RadioRef> = forwardRef(
+export const Radio = forwardRef<HTMLDivElement, RadioProps>(
   (
     {
       checked: isRadioChecked,
diff --git a/src/form/Radio/RadioGroup.story.tsx b/src/form/Radio/RadioGroup.story.tsx
index bf6d24896..003092cad 100644
--- a/src/form/Radio/RadioGroup.story.tsx
+++ b/src/form/Radio/RadioGroup.story.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
-import { RadioGroup } from './RadioGroup';
+
 import { Radio } from './Radio';
+import { RadioGroup } from './RadioGroup';
 
 export default {
   title: 'Components/Form/Radio/Group',
diff --git a/src/form/Radio/RadioGroup.tsx b/src/form/Radio/RadioGroup.tsx
index 36c68ba99..10b8b94cc 100644
--- a/src/form/Radio/RadioGroup.tsx
+++ b/src/form/Radio/RadioGroup.tsx
@@ -1,5 +1,8 @@
-import React, { FC, useCallback, useMemo, useState } from 'react';
-import { RadioGroupContext, RadioGroupContextProps } from './RadioGroupContext';
+import type { FC } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
+
+import type { RadioGroupContextProps } from './RadioGroupContext';
+import { RadioGroupContext } from './RadioGroupContext';
 
 export interface RadioGroupProps extends RadioGroupContextProps {
   /**
diff --git a/src/form/Radio/RadioGroupContext.ts b/src/form/Radio/RadioGroupContext.ts
index ea8894b43..50b22b944 100644
--- a/src/form/Radio/RadioGroupContext.ts
+++ b/src/form/Radio/RadioGroupContext.ts
@@ -1,4 +1,4 @@
-import { ReactNode, createContext } from 'react';
+import { createContext } from 'react';
 
 export interface RadioGroupContextProps {
   /**
diff --git a/src/form/Radio/RadioTheme.ts b/src/form/Radio/RadioTheme.ts
index 0a3c7471d..1f8992c78 100644
--- a/src/form/Radio/RadioTheme.ts
+++ b/src/form/Radio/RadioTheme.ts
@@ -1,3 +1,9 @@
+export interface RadioSizeTheme {
+  small: string;
+  medium: string;
+  large: string;
+  [key: string]: string;
+}
 export interface RadioTheme {
   base: string;
   radio: {
@@ -8,12 +14,7 @@ export interface RadioTheme {
   indicator: {
     base: string;
     disabled: string;
-    sizes: {
-      small: string;
-      medium: string;
-      large: string;
-      [key: string]: string;
-    };
+    sizes: RadioSizeTheme;
   };
   label: {
     base: string;
@@ -21,107 +22,43 @@ export interface RadioTheme {
     checked: string;
     disabled: string;
   };
-  sizes: {
-    small: string;
-    medium: string;
-    large: string;
-    [key: string]: string;
-  };
+  sizes: RadioSizeTheme;
 }
 
-const baseTheme: RadioTheme = {
+export const radioTheme: RadioTheme = {
   base: 'box-border leading-none group',
   radio: {
-    base: 'will-change-[border-color] inline-flex justify-center items-center box-border align-middle rounded-[100%] bg-transparent border cursor-pointer',
-    disabled: 'cursor-not-allowed',
-    checked: ''
+    base: `
+          inline-flex justify-center items-center align-middle rounded-full box-content cursor-pointer transition-colors border focus-visible:outline-none
+          bg-selectors-colors-radio-not-selected-background-resting group-hover:bg-selectors-colors-radio-not-selected-background-hover group-focus-within:bg-selectors-colors-radio-not-selected-background-hover
+          border-selectors-colors-radio-not-selected-stroke-resting group-hover:border-selectors-colors-radio-not-selected-stroke-hover group-focus-within:border-selectors-colors-radio-not-selected-stroke-hover
+        `,
+    checked: `
+          bg-selectors-colors-radio-selected-background-resting group-hover:bg-selectors-colors-radio-selected-background-hover group-focus-within:bg-selectors-colors-radio-selected-background-hover
+          border-selectors-colors-radio-selected-stroke-resting group-hover:border-selectors-colors-radio-selected-stroke-hover group-focus-within:border-selectors-colors-radio-selected-stroke-hover
+        `,
+    disabled:
+      'cursor-not-allowed opacity-40 group-hover:bg-inherit group-focus-within:bg-inherit'
   },
   indicator: {
-    base: 'rounded-[100%]',
+    base: 'rounded-full bg-selectors-colors-radio-selected-assets-base',
     disabled: 'cursor-not-allowed',
     sizes: {
-      small: 'w-2 h-2',
-      medium: 'w-2.5 h-2.5',
-      large: 'w-3.5 h-3.5'
+      small: 'size-(--selectors-details-asset-size-radio-checkbox-sm)',
+      medium: 'size-(--selectors-details-asset-size-radio-checkbox-sm)',
+      large: 'size-(--selectors-details-asset-size-radio-checkbox-lg)'
     }
   },
   label: {
-    base: 'w-full align-middle ml-2.5',
-    clickable: 'cursor-pointer hover:text-blue-300',
-    disabled: 'cursor-not-allowed',
-    checked: ''
+    base: 'w-full align-middle ml-3 text-selectors-colors-text-label-not-selected',
+    clickable:
+      'cursor-pointer group-hover:text-selectors-colors-text-label-selected group-focus-within:text-selectors-colors-text-label-selected',
+    disabled: 'cursor-not-allowed opacity-40',
+    checked: 'text-selectors-colors-text-label-selected'
   },
   sizes: {
-    small: 'w-3 h-3',
-    medium: 'w-4 h-4',
-    large: 'w-5 h-5'
-  }
-};
-
-export const radioTheme: RadioTheme = {
-  ...baseTheme,
-  label: {
-    ...baseTheme.label,
-    base: [baseTheme.label.base, 'text-text-secondary'].join(' '),
-    checked: [baseTheme.label.checked, 'text-text-primary'].join(' '),
-    disabled: [baseTheme.label.disabled, 'text-secondary-inactive/40!'].join(
-      ' '
-    )
-  },
-  radio: {
-    ...baseTheme.radio,
-    base: [
-      baseTheme.radio.base,
-      'border-surface group-hover:border-primary-hover hover:border-primary-hover'
-    ].join(' '),
-    checked: [
-      baseTheme.radio.checked,
-      'border-primary-active group-hover:border-primary-hover'
-    ].join(' '),
-    disabled: [baseTheme.radio.disabled, 'border-secondary-inactive!'].join(' ')
-  },
-  indicator: {
-    ...baseTheme.indicator,
-    base: [
-      baseTheme.indicator.base,
-      'bg-primary group-hover:bg-primary-hover'
-    ].join(' '),
-    disabled: [baseTheme.indicator.disabled, 'bg-secondary-inactive!'].join(' ')
-  }
-};
-
-export const legacyRadioTheme: RadioTheme = {
-  ...baseTheme,
-  label: {
-    ...baseTheme.label,
-    base: [
-      baseTheme.label.base,
-      'text-[var(--radio-label-color)] ml-[var(--spacing-md)]'
-    ].join(' ')
-  },
-  radio: {
-    ...baseTheme.radio,
-    base: [
-      baseTheme.radio.base,
-      'bg-[var(--radio-background)] [border:_var(--radio-stroke-size)_solid_var(--radio-stroke)]'
-    ].join(' '),
-    checked: [
-      baseTheme.radio.checked,
-      'border-[var(--radio-stroke-active)]'
-    ].join(' ')
-  },
-  indicator: {
-    ...baseTheme.indicator,
-    base: [baseTheme.indicator.base, 'bg-[var(--radio-indicator-active)]'].join(
-      ' '
-    ),
-    sizes: {
-      small:
-        'w-[var(--radio-indicator-size,_6px)] h-[var(--radio-indicator-size,_6px)]',
-      medium:
-        'w-[var(--radio-indicator-size,_8px)] h-[var(--radio-indicator-size,_8px)]',
-      large:
-        'w-[var(--radio-indicator-size,_10px)] h-[var(--radio-indicator-size,_10px)]'
-    }
+    small: 'size-(--selectors-details-width-radio-checkbox-sm) p-0.5',
+    medium: 'size-(--selectors-details-width-radio-checkbox-sm) p-0.5',
+    large: 'size-(--selectors-details-width-radio-checkbox-lg) p-0.5'
   }
 };
diff --git a/src/form/Range/Range.story.tsx b/src/form/Range/Range.story.tsx
index 4f0e72911..0783250bd 100644
--- a/src/form/Range/Range.story.tsx
+++ b/src/form/Range/Range.story.tsx
@@ -1,8 +1,10 @@
-import { RangeDouble } from './RangeDouble';
 import React, { Fragment, useState } from 'react';
-import { RangeSingle } from './RangeSingle';
-import { useDrawer } from '@/layers';
+
 import { Button } from '@/elements';
+import { useDrawer } from '@/layers';
+
+import { RangeDouble } from './RangeDouble';
+import { RangeSingle } from './RangeSingle';
 
 export default {
   title: 'Components/Form/Range',
diff --git a/src/form/Range/RangeDouble.tsx b/src/form/Range/RangeDouble.tsx
index a71528569..dc7d4cfe6 100644
--- a/src/form/Range/RangeDouble.tsx
+++ b/src/form/Range/RangeDouble.tsx
@@ -1,17 +1,20 @@
+import { motion, useMotionValue } from 'motion/react';
+import type { FC } from 'react';
 import React, {
   useCallback,
   useEffect,
-  useRef,
-  useState,
-  FC,
+  useLayoutEffect,
   useMemo,
-  useLayoutEffect
+  useRef,
+  useState
 } from 'react';
-import { motion, useMotionValue } from 'motion/react';
-import { RangeProps, RangeTooltip } from './RangeTooltip';
-import { twMerge } from 'tailwind-merge';
+
+import { twMerge } from '@/utils';
 import { cn, useComponentTheme } from '@/utils';
-import { RangeTheme } from './RangeTheme';
+
+import type { RangeTheme } from './RangeTheme';
+import type { RangeProps } from './RangeTooltip';
+import { RangeTooltip } from './RangeTooltip';
 
 export const RangeDouble: FC<RangeProps<[number, number]>> = ({
   disabled,
@@ -81,7 +84,9 @@ export const RangeDouble: FC<RangeProps<[number, number]>> = ({
       if (newMin <= currentMax - minValueBetween) {
         setCurrentMin(newMin);
         minX.set(getPosition(newMin));
-        notifyChange && onChange?.([newMin, currentMax]);
+        if (notifyChange) {
+          onChange?.([newMin, currentMax]);
+        }
       }
     },
     [currentMax, min, minX, getPosition, onChange, minValueBetween]
@@ -93,7 +98,9 @@ export const RangeDouble: FC<RangeProps<[number, number]>> = ({
       if (newMax >= currentMin + minValueBetween) {
         setCurrentMax(newMax);
         maxX.set(getPosition(newMax));
-        notifyChange && onChange?.([currentMin, newMax]);
+        if (notifyChange) {
+          onChange?.([currentMin, newMax]);
+        }
       }
     },
     [currentMin, max, maxX, getPosition, onChange, minValueBetween]
diff --git a/src/form/Range/RangeSingle.tsx b/src/form/Range/RangeSingle.tsx
index 2d86679b7..448d0c94e 100644
--- a/src/form/Range/RangeSingle.tsx
+++ b/src/form/Range/RangeSingle.tsx
@@ -1,16 +1,19 @@
+import { motion, useMotionValue } from 'motion/react';
+import type { FC } from 'react';
 import React, {
   useCallback,
   useEffect,
+  useMemo,
   useRef,
-  useState,
-  FC,
-  useMemo
+  useState
 } from 'react';
-import { motion, useMotionValue } from 'motion/react';
-import { RangeProps, RangeTooltip } from './RangeTooltip';
-import { twMerge } from 'tailwind-merge';
+
+import { twMerge } from '@/utils';
 import { cn, useComponentTheme } from '@/utils';
-import { RangeTheme } from './RangeTheme';
+
+import type { RangeTheme } from './RangeTheme';
+import type { RangeProps } from './RangeTooltip';
+import { RangeTooltip } from './RangeTooltip';
 
 export interface RangeSingleProps extends RangeProps<number> {
   /**
diff --git a/src/form/Range/RangeTheme.ts b/src/form/Range/RangeTheme.ts
index c732af0a6..a953001d1 100644
--- a/src/form/Range/RangeTheme.ts
+++ b/src/form/Range/RangeTheme.ts
@@ -14,65 +14,27 @@ export interface RangeTheme {
   tooltip: string;
 }
 
-const baseTheme: RangeTheme = {
-  base: 'relative box-border w-full h-0.5',
-  drag: 'absolute w-4 h-4 -left-2 -top-2 rounded-full',
+export const rangeTheme: RangeTheme = {
+  base: `
+        group relative box-border w-full h-1 rounded-sm transition-colors
+        bg-selectors-colors-range-bar-background-base hover:bg-selectors-colors-range-bar-background-hover focus-within:bg-selectors-colors-range-bar-background-active
+      `,
+  drag: `
+        absolute size-4 -left-1.5 -top-1.5 rounded-sm border
+        border-selectors-colors-range-handles-stroke-resting hover:selectors-colors-range-handles-stroke-hover focus-visible:selectors-colors-range-handles-stroke-active
+        bg-selectors-colors-range-handles-background-resting hover:selectors-colors-range-handles-background-hover focus-visible:hover:selectors-colors-range-handles-background-active
+      `,
   inputWrapper: {
-    base: 'cursor-pointer inline-block relative h-full w-full rounded-full',
+    base: 'cursor-pointer inline-block relative size-full',
     disabled: 'cursor-not-allowed'
   },
   rangeHighlight: {
-    base: 'pointer-events-none h-0.5',
+    base: 'pointer-events-none h-1 bg-selectors-colors-range-bar-background-active-section rounded-sm',
     disabled: 'cursor-not-allowed'
   },
-  disabled: 'cursor-not-allowed',
+  disabled:
+    'cursor-not-allowed opacity-40 disabled:bg-selectors-colors-range-bar-background-base!',
   input: 'absolute left-[-9999px]', // The hidden input used for keyboard controls
   tooltip:
-    'absolute top-[-45px] whitespace-nowrap text-center left-2/4 rounded-lg p-2.5'
-};
-
-export const rangeTheme: RangeTheme = {
-  ...baseTheme,
-  base: [baseTheme.base, 'bg-surface light:bg-gray-200'].join(' '),
-  inputWrapper: {
-    ...baseTheme.inputWrapper,
-    base: [
-      baseTheme.inputWrapper.base,
-      'bg-primary-active hover:bg-primary-hover shadow-[0px_4px_4px_0px_rgba(0,0,0,0.20)]'
-    ].join(' '),
-    disabled: [
-      baseTheme.inputWrapper.disabled,
-      'bg-secondary-inactive hover:bg-secondary-inactive'
-    ].join(' ')
-  },
-  rangeHighlight: {
-    base: [baseTheme.rangeHighlight.base, 'bg-primary-active'].join(' '),
-    disabled: [baseTheme.rangeHighlight.disabled, 'bg-secondary-inactive'].join(
-      ' '
-    )
-  },
-  tooltip: [baseTheme.tooltip, 'text-text-primary bg-surface'].join(' ')
-};
-
-export const legacyRangeTheme: RangeTheme = {
-  ...baseTheme,
-  base: [
-    baseTheme.base,
-    'h-[var(--range-track-size)] bg-[var(--range-track-background)] rounded-[var(--range-track-border-radius)]'
-  ].join(' '),
-  drag: [
-    baseTheme.drag,
-    'top-[calc(-1_*_(var(--range-handle-size)_-_var(--range-track-size))_/_2)] left-[calc(-1_*_var(--range-handle-size)_/_2)] w-[var(--range-handle-size)] h-[var(--range-handle-size)] bg-[var(--range-handle-background)] rounded-[var(--range-handle-border-radius)]'
-  ].join(' '),
-  rangeHighlight: {
-    ...baseTheme.rangeHighlight,
-    base: [
-      baseTheme.rangeHighlight.base,
-      'h-[var(--range-track-size)] bg-[var(--range-track-active-background)]'
-    ].join(' ')
-  },
-  tooltip: [
-    baseTheme.tooltip,
-    'rounded-[var(--border-radius-md)] [padding:_var(--spacing-md)] bg-[var(--tooltip-background)] text-[var(--tooltip-color)]'
-  ].join(' ')
+    'absolute top-[-45px] whitespace-nowrap text-center text-xs font-semibold left-2/4 rounded-sm p-2 bg-tooltip-colors-neutral-background-default text-tooltip-colors-neutral-text-default'
 };
diff --git a/src/form/Range/RangeTooltip.tsx b/src/form/Range/RangeTooltip.tsx
index b978b589f..6a13d7507 100644
--- a/src/form/Range/RangeTooltip.tsx
+++ b/src/form/Range/RangeTooltip.tsx
@@ -1,8 +1,11 @@
-import React, { FC } from 'react';
 import { AnimatePresence, motion } from 'motion/react';
-import { RangeTheme } from './RangeTheme';
+import type { FC } from 'react';
+import React from 'react';
+
 import { useComponentTheme } from '@/utils';
 
+import type { RangeTheme } from './RangeTheme';
+
 export interface RangeProps<Value> {
   /**
    * Whether the range is disabled
diff --git a/src/form/Range/index.ts b/src/form/Range/index.ts
index 78c3e5f55..7ab659e52 100644
--- a/src/form/Range/index.ts
+++ b/src/form/Range/index.ts
@@ -1,4 +1,4 @@
-export * from './RangeTooltip';
 export * from './RangeDouble';
 export * from './RangeSingle';
 export * from './RangeTheme';
+export * from './RangeTooltip';
diff --git a/src/form/Select/MultiSelect.story.tsx b/src/form/Select/MultiSelect.story.tsx
index 2d2502bb4..80d4dc9c1 100644
--- a/src/form/Select/MultiSelect.story.tsx
+++ b/src/form/Select/MultiSelect.story.tsx
@@ -1,11 +1,12 @@
 import React, { Fragment, useEffect, useState } from 'react';
-import { Select } from './Select';
-import { SelectOption } from './SelectOption';
-import { SelectMenu } from './SelectMenu';
-import { SelectInput, SelectInputChip } from './SelectInput';
 
 import CheckIcon from '@/assets/icons/check_circle.svg?react';
 
+import { Select } from './Select';
+import { SelectInput, SelectInputChip } from './SelectInput';
+import { SelectMenu } from './SelectMenu';
+import { SelectOption } from './SelectOption';
+
 export default {
   title: 'Components/Form/Select/Multi',
   component: Select,
diff --git a/src/form/Select/Select.tsx b/src/form/Select/Select.tsx
index 1eb761ea4..553caa216 100644
--- a/src/form/Select/Select.tsx
+++ b/src/form/Select/Select.tsx
@@ -1,6 +1,7 @@
+import { useFuzzy } from '@reaviz/react-use-fuzzy';
+import type Fuse from 'fuse.js';
+import type { FC, ReactElement } from 'react';
 import React, {
-  FC,
-  ReactElement,
   useCallback,
   useEffect,
   useLayoutEffect,
@@ -8,20 +9,19 @@ import React, {
   useRef,
   useState
 } from 'react';
-import Fuse from 'fuse.js';
-import {
-  ConnectedOverlay,
-  ConnectedOverlayContentRef,
-  Placement
-} from '@/utils';
-import { CloneElement, useId } from '@/utils';
-import { SelectInput, SelectInputProps, SelectInputRef } from './SelectInput';
-import { SelectMenu, SelectMenuProps } from './SelectMenu';
-import { SelectOptionProps, SelectValue } from './SelectOption';
-import { useFuzzy } from '@reaviz/react-use-fuzzy';
-import { createOptions, getGroups, useWidth, keyNameToCode } from './utils';
 import isEqual from 'react-fast-compare';
 
+import type { ConnectedOverlayContentRef, Placement } from '@/utils';
+import { ConnectedOverlay } from '@/utils';
+import { CloneElement, useId } from '@/utils';
+
+import type { SelectInputProps, SelectInputRef } from './SelectInput';
+import { SelectInput } from './SelectInput';
+import type { SelectMenuProps } from './SelectMenu';
+import { SelectMenu } from './SelectMenu';
+import type { SelectOptionProps, SelectValue } from './SelectOption';
+import { createOptions, getGroups, keyNameToCode, useWidth } from './utils';
+
 export interface SelectProps {
   /**
    * The id of the select.
diff --git a/src/form/Select/SelectInput/SelectInput.tsx b/src/form/Select/SelectInput/SelectInput.tsx
index 7d85d4941..ad2e71530 100644
--- a/src/form/Select/SelectInput/SelectInput.tsx
+++ b/src/form/Select/SelectInput/SelectInput.tsx
@@ -1,24 +1,28 @@
+import type { FC, ReactElement, Ref, RefObject } from 'react';
 import React, {
-  FC,
-  ReactElement,
-  Ref,
-  RefObject,
   useCallback,
   useImperativeHandle,
   useMemo,
   useRef
 } from 'react';
-import { SelectOptionProps, SelectValue } from '@/form/Select/SelectOption';
+
+import { DotsLoader } from '@/elements/Loader/DotsLoader';
 import { InlineInput } from '@/form/Input';
-import { DownArrowIcon } from '@/form/Select/icons/DownArrowIcon';
 import { CloseIcon } from '@/form/Select/icons/CloseIcon';
-import { DotsLoader } from '@/elements/Loader/DotsLoader';
+import { DownArrowIcon } from '@/form/Select/icons/DownArrowIcon';
 import { RefreshIcon } from '@/form/Select/icons/RefreshIcon';
-import { SelectInputChip, SelectInputChipProps } from './SelectInputChip';
+import type {
+  SelectOptionProps,
+  SelectValue
+} from '@/form/Select/SelectOption';
+import type { SelectTheme } from '@/form/Select/SelectTheme';
 import { cn, useComponentTheme } from '@/utils';
-import { SelectTheme } from '@/form/Select/SelectTheme';
 import { CloneElement } from '@/utils';
 
+import type { SelectInputChipProps } from './SelectInputChip';
+import { SelectInputChip } from './SelectInputChip';
+import type { SelectInputSizeTheme } from './SelectInputTheme';
+
 export interface SelectInputProps {
   /**
    * The id of the select input.
@@ -133,7 +137,7 @@ export interface SelectInputProps {
   /**
    * The size of the select input.
    */
-  size?: 'small' | 'medium' | 'large' | string;
+  size?: keyof SelectInputSizeTheme;
 
   /**
    * The theme of the select input.
diff --git a/src/form/Select/SelectInput/SelectInputChip.tsx b/src/form/Select/SelectInput/SelectInputChip.tsx
index 20c6bfae4..13f3a2fce 100644
--- a/src/form/Select/SelectInput/SelectInputChip.tsx
+++ b/src/form/Select/SelectInput/SelectInputChip.tsx
@@ -1,10 +1,12 @@
-import React, { FC } from 'react';
-import { SelectOptionProps } from '@/form/Select/SelectOption';
 import ellipsize from 'ellipsize';
+import type { FC } from 'react';
+import React from 'react';
+
 import { CloseIcon } from '@/form/Select/icons';
-import { twMerge } from 'tailwind-merge';
+import type { SelectOptionProps } from '@/form/Select/SelectOption';
+import type { SelectTheme } from '@/form/Select/SelectTheme';
+import { twMerge } from '@/utils';
 import { useComponentTheme } from '@/utils';
-import { SelectTheme } from '@/form/Select/SelectTheme';
 
 export interface SelectInputChipProps {
   /**
diff --git a/src/form/Select/SelectInput/SelectInputTheme.ts b/src/form/Select/SelectInput/SelectInputTheme.ts
index b76dbdc37..cb4f12618 100644
--- a/src/form/Select/SelectInput/SelectInputTheme.ts
+++ b/src/form/Select/SelectInput/SelectInputTheme.ts
@@ -1,3 +1,10 @@
+export interface SelectInputSizeTheme {
+  small: string;
+  medium: string;
+  large: string;
+  [key: string]: string;
+}
+
 export interface SelectInputTheme {
   container: string;
   base: string;
@@ -33,35 +40,39 @@ export interface SelectInputTheme {
     disabled: string;
     removeButton: string;
   };
-  size: {
-    small: string;
-    medium: string;
-    large: string;
-    [key: string]: string;
-  };
+  size: SelectInputSizeTheme;
 }
 
-const baseTheme: SelectInputTheme = {
-  base: 'flex flex-nowrap items-center box-border border rounded-sm',
+export const selectInputTheme: SelectInputTheme = {
+  base: 'flex flex-nowrap items-center box-border border rounded-md border-inputs-colors-normal-stroke-resting',
   container: 'relative',
   inputContainer:
-    'flex-wrap flex items-center overflow-hidden flex-1 max-w-full [&>div]:max-w-full [&_.invisible]:text-ellipsis [&_.invisible]:overflow-hidden',
+    'flex-wrap flex items-center overflow-hidden flex-1 max-w-full [&>div]:max-w-full [&_.invisible]:text-ellipsis [&_.invisible]:overflow-hidden [&_.invisible]:invisible',
   input:
     'p-0 bg-transparent text-ellipsis align-middle max-w-full read-only:cursor-not-allowed focus:outline-hidden disabled:text-disabled',
   placeholder: '',
-  prefix: 'overflow-hidden whitespace-nowrap text-ellipsis',
+  prefix: 'overflow-hidden whitespace-nowrap text-ellipsis flex flex-wrap',
   suffix: {
     container: 'flex items-center justify-center',
-    button: 'disabled:cursor-not-allowed',
-    refresh: 'mr-1.5 [&>svg]:w-4 [&>svg]:h-4 [&>svg]:fill-text-secondary',
+    button:
+      'disabled:cursor-not-allowed focus-visible:outline-none [&_svg]:text-buttons-colors-core-icon-ghost-assets-resting focus-visible:[&_svg]:text-buttons-colors-core-icon-ghost-assets-selected',
+    refresh:
+      'mr-1.5 [&>svg]:w-4 [&>svg]:h-4 [&>svg]:text-inputs-colors-normal-assets-input-resting',
     loader: 'mr-2.5',
-    close: 'mr-1.5 [&>svg]:w-4 [&>svg]:h-4 [&>svg]:fill-text-secondary',
-    expand: '[&>svg]:w-4 [&>svg]:h-4 [&>svg]:fill-text-secondary'
+    close:
+      'mr-1.5 [&>svg]:w-4 [&>svg]:h-4 [&>svg]:text-inputs-colors-normal-assets-input-resting',
+    expand:
+      '[&>svg]:w-4 [&>svg]:h-4 [&>svg]:text-inputs-colors-normal-assets-input-resting'
   },
-  disabled: 'cursor-not-allowed text-disabled hover:after:content-none',
+  disabled:
+    'cursor-not-allowed text-disabled hover:after:content-none opacity-40',
   unfilterable: 'caret-transparent',
-  error: 'border border-solid',
-  open: 'rounded-sm rounded-ee-none rounded-es-none',
+  error: `
+    border-inputs-colors-error-stroke-resting bg-inputs-colors-error-background-resting [&>input]:text-inputs-colors-error-text-input-filled [&>input]:placeholder:text-inputs-colors-error-text-input-text-resting
+    hover:border-inputs-colors-error-stroke-hover hover:bg-inputs-colors-error-background-hover
+    focus-within:border-inputs-colors-error-stroke-selected focus-within:bg-inputs-colors-error-background-selected
+  `,
+  open: 'rounded-sm',
   single: {
     prefix: 'overflow-hidden whitespace-nowrap text-ellipsis max-w-full',
     inputContainer: 'flex-nowrap',
@@ -72,7 +83,7 @@ const baseTheme: SelectInputTheme = {
     inputContainer: 'flex-wrap'
   },
   chip: {
-    base: 'cursor-pointer flex text-sm leading-none box-border mr-1 px-1 py-1 rounded-sm border-solid border-transparent',
+    base: 'cursor-pointer flex text-xs leading-none box-border mr-1 px-1 py-1 rounded-sm border-solid border-transparent',
     hover: '',
     focused: 'focused:border-transparent focused:outline-none',
     disabled: 'disabled:cursor-not-allowed',
@@ -80,86 +91,10 @@ const baseTheme: SelectInputTheme = {
       'cursor-pointer leading-0 ml-1 p-0 border-0 [&>svg]:w-3 [&>svg]:h-3 [&>svg]:align-baseline [&>svg]:pointer-events-none'
   },
   size: {
-    small: 'py-1 px-2 text-sm min-h-8',
-    medium: 'py-2 px-3 text-base min-h-[35px]',
-    large: 'py-2 px-3 text-lg min-h-[42px]'
-  }
-};
-
-export const selectInputTheme: SelectInputTheme = {
-  ...baseTheme,
-  base: [
-    baseTheme.base,
-    'bg-panel text-text-primary border-panel-accent border-solid hover:border-panel-accent light:hover:border-panel-accent',
-    'hover:after:bg-[radial-gradient(circle,_#105EFF_0%,_#105EFF_36%,_#242433_100%)] light:hover:after:bg-[radial-gradient(circle,_#105EFF_0%,_#105EFF_36%,_#E6E6F0_100%)]',
-    'focus-within:after:bg-[radial-gradient(circle,_#93B6FF_0%,_#105EFF_36%,_#3D3D4D_90%,_#242433_100%)] light:focus-within:after:bg-[radial-gradient(circle,_#105EFF_10%,_#93B6FF_36%,_#E6E6F0_90%)]',
-    'hover:after:content-[""] hover:after:absolute hover:after:mx-1 hover:after:h-px after:z-2 hover:after:rounded-sm hover:after:-bottom-[0px] hover:after:inset-x-0.5',
-    'focus-within:after:content-[""] focus-within:after:absolute focus-within:after:mx-0 focus-within:after:h-px after:z-2 focus-within:after:rounded-sm focus-within:after:-bottom-[0px] focus-within:after:inset-x-0.5'
-  ].join(' '),
-  placeholder: [
-    baseTheme.placeholder,
-    'placeholder:text-secondary-content'
-  ].join(' '),
-  disabled: [
-    baseTheme.disabled,
-    'text-text-secondary/40 border-surface light:hover:border-surface'
-  ].join(' '),
-  error: [baseTheme.error, 'border-error light:border-error/20'].join(' '),
-  suffix: {
-    ...baseTheme.suffix,
-    button: [baseTheme.suffix.button, 'hover:cursor-pointer'].join(' ')
-  },
-  chip: {
-    ...baseTheme.chip,
-    base: [
-      baseTheme.chip.base,
-      '[&>svg]:fill-text-primary [&>svg]:disabled:fill-text-secondary/40'
-    ].join(' '),
-    hover: [baseTheme.chip.hover, 'hover:brightness-150'].join(' '),
-    focused: [baseTheme.chip.focused, 'border-panel-accent'].join(' '),
-    removeButton: [
-      baseTheme.chip.removeButton,
-      '[&>svg]:fill-text-primary [&>svg]:disabled:fill-text-secondary/40'
-    ].join(' ')
-  }
-};
-
-export const cssVarsSelectInputTheme: SelectInputTheme = {
-  ...baseTheme,
-  base: [
-    baseTheme.base,
-    'bg-[var(--select-input-background)] p-[var(--select-input-spacing)] rounded-[var(--select-input-border-radius)] [border:_var(--select-input-border)]'
-  ].join(' '),
-  disabled: [
-    baseTheme.disabled,
-    'text-[var(--select-input-disabled-color)]'
-  ].join(' '),
-  placeholder: [
-    baseTheme.placeholder,
-    'text-[var(--select-input-placeholder-color)]'
-  ].join(' '),
-  error: [baseTheme.error, 'border-[var(--select-input-error)]'].join(' '),
-  input: [baseTheme.input, 'text-[var(--select-input-color)]'].join(' '),
-  suffix: {
-    ...baseTheme.suffix,
-    close: [
-      baseTheme.suffix.close,
-      '[&>svg]:fill-[var(--select-input-icon-color)]'
-    ].join(' '),
-    expand: [
-      baseTheme.suffix.expand,
-      '[&>svg]:fill-[var(--select-input-icon-color)]'
-    ].join(' ')
-  },
-  chip: {
-    ...baseTheme.chip,
-    base: [
-      baseTheme.chip.base,
-      'bg-[var(--select-chip-background)] text-[var(--select-chip-color)] [border:_var(--select-chip-border)]'
-    ].join(' '),
-    removeButton: [
-      baseTheme.chip.removeButton,
-      '[&>svg]:fill-[var(--select-chip-icon-color)]'
-    ].join(' ')
+    small:
+      '[&_input]:text-xs [&_input]:leading-4 [&_svg]:size-4 px-2 py-[5px] gap-2',
+    medium:
+      '[&_input]:text-sm [&_input]:leading-4 [&_svg]:size-4 px-3 py-[7px] gap-2',
+    large: '[&_input]:text-base [&_svg]:size-4.5 px-3 py-[7px] gap-2'
   }
 };
diff --git a/src/form/Select/SelectMenu/SelectMenu.tsx b/src/form/Select/SelectMenu/SelectMenu.tsx
index 8c64ca9cd..38b183205 100644
--- a/src/form/Select/SelectMenu/SelectMenu.tsx
+++ b/src/form/Select/SelectMenu/SelectMenu.tsx
@@ -1,12 +1,18 @@
-import React, { FC, Fragment, ReactElement, useCallback } from 'react';
 import { motion } from 'motion/react';
-import { SelectOptionProps, SelectValue } from '@/form/Select/SelectOption';
+import type { FC, ReactElement } from 'react';
+import React, { Fragment, useCallback } from 'react';
 import Highlighter from 'react-highlight-words';
-import { GroupOptions, GroupOption } from '@/form/Select/utils';
+
+import type { SelectInputSizeTheme } from '@/form';
+import { CheckIcon } from '@/form/Select/icons/CheckIcon';
+import type {
+  SelectOptionProps,
+  SelectValue
+} from '@/form/Select/SelectOption';
+import type { SelectTheme } from '@/form/Select/SelectTheme';
+import type { GroupOption, GroupOptions } from '@/form/Select/utils';
 import { List, ListItem } from '@/layout';
 import { cn, useComponentTheme } from '@/utils';
-import { SelectTheme } from '@/form/Select/SelectTheme';
-import { CheckIcon } from '@/form/Select/icons/CheckIcon';
 
 export interface RenderCreateOptionArgs {
   text: string;
@@ -90,7 +96,7 @@ export interface SelectMenuProps {
   /**
    * The size of the select menu.
    */
-  size?: 'small' | 'medium' | 'large' | string;
+  size?: keyof SelectInputSizeTheme;
 
   /**
    * Icon displayed for checked elements of the list
diff --git a/src/form/Select/SelectMenu/SelectMenuTheme.ts b/src/form/Select/SelectMenu/SelectMenuTheme.ts
index 95fbefcde..261fd9b33 100644
--- a/src/form/Select/SelectMenu/SelectMenuTheme.ts
+++ b/src/form/Select/SelectMenu/SelectMenuTheme.ts
@@ -1,14 +1,11 @@
+import type { SelectInputSizeTheme } from '@/form/Select/SelectInput/SelectInputTheme';
+
 export interface SelectMenuTheme {
   base: string;
   groupItem: {
     base: string;
     title: string;
-    size: {
-      small: string;
-      medium: string;
-      large: string;
-      [key: string]: string;
-    };
+    size: SelectInputSizeTheme;
   };
   option: {
     base: string;
@@ -19,90 +16,33 @@ export interface SelectMenuTheme {
     checkIcon: string;
     content: string;
   };
-  size: {
-    small: string;
-    medium: string;
-    large: string;
-    [key: string]: string;
-  };
+  size: SelectInputSizeTheme;
 }
 
-const baseTheme: SelectMenuTheme = {
-  base: 'border border-solid rounded-b-md text-center will-change-[transform,opacity] min-w-[112px] max-h-[300px] overflow-y-auto text-left box-border',
+export const selectMenuTheme: SelectMenuTheme = {
+  base: 'border border-select-menu-items-color-item-stroke-container-resting rounded-md mt-2 bg-select-menu-items-color-item-background-container-base backdrop-blur-md min-w-[112px] max-h-[300px] overflow-y-auto text-left box-border [&>div]:gap-0.5',
   groupItem: {
-    base: 'p-0 border-0 first:pt-2 last:pb-2',
-    title: 'font-bold uppercase m-0 px-1.5 py-2.5',
-    size: {
-      small: 'px-2.5 text-sm',
-      medium: 'px-3 text-sm',
-      large: 'px-3.5 text-base'
-    }
+    base: 'p-0',
+    title:
+      'px-1 py-2 border rounded-md border-select-menu-items-color-item-stroke-header-resting text-select-menu-items-color-item-text-header-resting bg-select-menu-items-color-item-background-header-resting text-xxs font-semibold',
+    size: { small: '', medium: '', large: '' }
   },
   option: {
-    base: 'flex-1 whitespace-break-spaces break-words py-1.5 px-2.5',
-    hover: '',
-    selected: '',
-    active: '',
-    disabled: '',
+    base: 'flex-1 whitespace-break-spaces break-words border border-select-menu-items-color-item-stroke-row-resting rounded-md text-select-menu-items-color-item-text-row-resting',
+    hover:
+      'hover:border-select-menu-items-color-item-stroke-row-hover hover:bg-select-menu-items-color-item-background-row-hover hover:text-select-menu-items-color-item-text-row-selected',
+    selected:
+      'border-select-menu-items-color-item-stroke-row-selected bg-select-menu-items-color-item-background-row-selected hover:border-select-menu-items-color-item-stroke-row-selected hover:bg-select-menu-items-color-item-background-row-selected',
+    active:
+      'border-select-menu-items-color-item-stroke-row-hover bg-select-menu-items-color-item-background-row-hover',
+    disabled:
+      'hover:border-select-menu-items-color-item-stroke-row-resting hover:bg-select-menu-items-color-item-stroke-row-resting',
     checkIcon: 'ml-1',
     content: 'flex flex-row justify-between'
   },
   size: {
-    small: 'px-2.5 py-1.5 text-sm',
-    medium: 'px-4 py-2 text-base',
-    large: 'px-5 py-3 text-lg'
-  }
-};
-
-export const selectMenuTheme: SelectMenuTheme = {
-  ...baseTheme,
-  base: [
-    baseTheme.base,
-    'bg-panel text-text-primary border-panel-accent border-t-transparent'
-  ].join(' '),
-  groupItem: {
-    ...baseTheme.groupItem,
-    title: [baseTheme.groupItem.title, 'text-text-primary'].join(' ')
-  },
-  option: {
-    ...baseTheme.option,
-    base: [baseTheme.option.base, 'text-text-secondary '].join(' '),
-    hover: [
-      baseTheme.option.hover,
-      'hover:bg-vulcan hover:text-mystic light:hover:bg-vulcan/5 light:hover:text-text-secondary'
-    ].join(' '),
-    active: [baseTheme.option.active, 'bg-vulcan hover:text-mystic'].join(' '),
-    selected: [baseTheme.option.selected, 'text-primary-active'].join(' ')
-  }
-};
-
-export const cssVarsSelectMenuTheme: SelectMenuTheme = {
-  ...baseTheme,
-  base: [
-    baseTheme.base,
-    'bg-[var(--select-menu-background)] [border:_var(--select-menu-border)] rounded-[var(--select-menu-border-radius)]'
-  ].join(' '),
-  groupItem: {
-    ...baseTheme.groupItem,
-    title: [baseTheme.groupItem.title, 'text-gray-600'].join(' ')
-  },
-  option: {
-    ...baseTheme.option,
-    base: [
-      baseTheme.option.base,
-      'text-[var(--select-menu-item-color)] [padding:_var(--select-menu-item-spacing)]'
-    ].join(' '),
-    hover: [
-      baseTheme.option.hover,
-      'hover:bg-[var(--select-menu-item-active-background)] hover:text-[var(--select-menu-item-active-color)]'
-    ].join(' '),
-    active: [
-      baseTheme.option.active,
-      'hover:bg-[var(--select-menu-item-active-background)] text-[var(--select-menu-item-active-color)]'
-    ].join(' '),
-    selected: [
-      baseTheme.option.selected,
-      'bg-[var(--select-menu-item-selected-background)] text-[var(--select-menu-item-selected-color)]'
-    ].join(' ')
+    small: 'text-xs px-2 py-2',
+    medium: 'text-xs px-3 py-2',
+    large: 'text-sm px-3 py-2'
   }
 };
diff --git a/src/form/Select/SelectOption.tsx b/src/form/Select/SelectOption.tsx
index 867d16323..330443ec0 100644
--- a/src/form/Select/SelectOption.tsx
+++ b/src/form/Select/SelectOption.tsx
@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 
 export type SelectValue = SelectOptionProps | SelectOptionProps[] | null;
 
diff --git a/src/form/Select/SelectTheme.ts b/src/form/Select/SelectTheme.ts
index 969be896f..44f8e40df 100644
--- a/src/form/Select/SelectTheme.ts
+++ b/src/form/Select/SelectTheme.ts
@@ -1,13 +1,7 @@
-import {
-  cssVarsSelectInputTheme,
-  selectInputTheme,
-  SelectInputTheme
-} from './SelectInput';
-import {
-  cssVarsSelectMenuTheme,
-  selectMenuTheme,
-  SelectMenuTheme
-} from './SelectMenu';
+import type { SelectInputTheme } from '@/form/Select/SelectInput';
+import { selectInputTheme } from '@/form/Select/SelectInput';
+import type { SelectMenuTheme } from '@/form/Select/SelectMenu';
+import { selectMenuTheme } from '@/form/Select/SelectMenu';
 
 export interface SelectTheme {
   selectInput: SelectInputTheme;
@@ -18,8 +12,3 @@ export const selectTheme: SelectTheme = {
   selectInput: selectInputTheme,
   selectMenu: selectMenuTheme
 };
-
-export const legacySelectTheme: SelectTheme = {
-  selectInput: cssVarsSelectInputTheme,
-  selectMenu: cssVarsSelectMenuTheme
-};
diff --git a/src/form/Select/SingleSelect.story.tsx b/src/form/Select/SingleSelect.story.tsx
index 8d142a1e1..0c84d0658 100644
--- a/src/form/Select/SingleSelect.story.tsx
+++ b/src/form/Select/SingleSelect.story.tsx
@@ -1,10 +1,11 @@
 import React, { Fragment, useEffect, useState } from 'react';
+
+import { ListItem } from '../../layout/List/ListItem';
+import { Stack } from '../../layout/Stack';
 import { Select } from './Select';
-import { SelectOption } from './SelectOption';
-import { SelectMenu } from './SelectMenu';
 import { SelectInput, SelectInputChip } from './SelectInput';
-import { Stack } from '../../layout/Stack';
-import { ListItem } from '../../layout/List/ListItem';
+import { SelectMenu } from './SelectMenu';
+import { SelectOption } from './SelectOption';
 
 export default {
   title: 'Components/Form/Select/Single',
@@ -683,7 +684,9 @@ export const CustomCreatableOption = () => {
         menu={
           <SelectMenu
             renderCreateOption={({ text, onCreate }) => (
-              <ListItem onClick={onCreate}>➕&nbsp;Create "{text}"</ListItem>
+              <ListItem onClick={onCreate}>
+                ➕&nbsp;Create &quot;{text}&quot;
+              </ListItem>
             )}
           />
         }
diff --git a/src/form/Select/icons/CheckIcon.tsx b/src/form/Select/icons/CheckIcon.tsx
index 5a64f0ddd..9901b8b98 100644
--- a/src/form/Select/icons/CheckIcon.tsx
+++ b/src/form/Select/icons/CheckIcon.tsx
@@ -1,4 +1,5 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
 
 export type CheckIconProps = {
   className?: string;
diff --git a/src/form/Select/icons/CloseIcon.tsx b/src/form/Select/icons/CloseIcon.tsx
index 272a6dd8a..d7a710d2e 100644
--- a/src/form/Select/icons/CloseIcon.tsx
+++ b/src/form/Select/icons/CloseIcon.tsx
@@ -1,4 +1,5 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
 
 export type CloseIconProps = {
   height?: number;
diff --git a/src/form/Select/icons/DownArrowIcon.tsx b/src/form/Select/icons/DownArrowIcon.tsx
index e510b0767..3be957390 100644
--- a/src/form/Select/icons/DownArrowIcon.tsx
+++ b/src/form/Select/icons/DownArrowIcon.tsx
@@ -1,4 +1,5 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
 
 export const DownArrowIcon: FC = () => (
   <svg
diff --git a/src/form/Select/icons/RefreshIcon.tsx b/src/form/Select/icons/RefreshIcon.tsx
index fdf1b254f..ce8588b9e 100644
--- a/src/form/Select/icons/RefreshIcon.tsx
+++ b/src/form/Select/icons/RefreshIcon.tsx
@@ -1,4 +1,5 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
 
 export const RefreshIcon: FC = () => (
   <svg
diff --git a/src/form/Select/icons/index.ts b/src/form/Select/icons/index.ts
index 6ed5128cd..82cae8871 100644
--- a/src/form/Select/icons/index.ts
+++ b/src/form/Select/icons/index.ts
@@ -1,3 +1,3 @@
-export * from './DownArrowIcon';
 export * from './CloseIcon';
+export * from './DownArrowIcon';
 export * from './RefreshIcon';
diff --git a/src/form/Select/index.ts b/src/form/Select/index.ts
index 8e3771ff3..ba983b8c2 100644
--- a/src/form/Select/index.ts
+++ b/src/form/Select/index.ts
@@ -1,7 +1,7 @@
+export * from './icons';
 export * from './Select';
-export * from './SelectOption';
 export * from './SelectInput';
 export * from './SelectMenu';
-export * from './icons';
-export * from './utils';
+export * from './SelectOption';
 export * from './SelectTheme';
+export * from './utils';
diff --git a/src/form/Select/utils/grouping.ts b/src/form/Select/utils/grouping.ts
index 3bc5e043f..7091221b3 100644
--- a/src/form/Select/utils/grouping.ts
+++ b/src/form/Select/utils/grouping.ts
@@ -1,4 +1,4 @@
-import { SelectOptionProps } from '@/form/Select/SelectOption';
+import type { SelectOptionProps } from '@/form/Select/SelectOption';
 
 export interface GroupOptions {
   groups: GroupOption[];
diff --git a/src/form/Select/utils/index.ts b/src/form/Select/utils/index.ts
index fe9d377ae..a98b480d8 100644
--- a/src/form/Select/utils/index.ts
+++ b/src/form/Select/utils/index.ts
@@ -1,4 +1,4 @@
 export * from './grouping';
+export * from './keyboard';
 export * from './options';
 export * from './useWidth';
-export * from './keyboard';
diff --git a/src/form/Select/utils/keyboard.ts b/src/form/Select/utils/keyboard.ts
index f2dab579f..2aaffff20 100644
--- a/src/form/Select/utils/keyboard.ts
+++ b/src/form/Select/utils/keyboard.ts
@@ -98,5 +98,5 @@ export const keyNameToCode = {
   '[': 219,
   '\\': 220,
   ']': 221,
-  '\'': 222
+  "'": 222
 };
diff --git a/src/form/Select/utils/options.ts b/src/form/Select/utils/options.ts
index 5c8ed10e4..cc251c851 100644
--- a/src/form/Select/utils/options.ts
+++ b/src/form/Select/utils/options.ts
@@ -1,4 +1,5 @@
 import { Children } from 'react';
+
 import { SelectOption } from '@/form/Select/SelectOption';
 
 export function createOptions(children) {
diff --git a/src/form/Select/utils/useWidth.ts b/src/form/Select/utils/useWidth.ts
index 7d297de3c..de0e27c7b 100644
--- a/src/form/Select/utils/useWidth.ts
+++ b/src/form/Select/utils/useWidth.ts
@@ -1,11 +1,7 @@
-import {
-  RefObject,
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useState
-} from 'react';
-import { ConnectedOverlayContentRef } from '@/utils/Overlay';
+import type { RefObject } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
+
+import type { ConnectedOverlayContentRef } from '@/utils/Overlay';
 
 export const useWidth = (
   ref: RefObject<HTMLDivElement>,
diff --git a/src/form/Textarea/Textarea.story.tsx b/src/form/Textarea/Textarea.story.tsx
index 0e7fa96a8..8f89493e4 100644
--- a/src/form/Textarea/Textarea.story.tsx
+++ b/src/form/Textarea/Textarea.story.tsx
@@ -1,7 +1,9 @@
 import { useRef } from 'react';
+
+import { Button } from '@/elements';
+
 import { Stack } from '../../layout/Stack';
 import { Textarea } from './Textarea';
-import { Button } from '@/elements';
 
 export default {
   title: 'Components/Form/Textarea',
diff --git a/src/form/Textarea/Textarea.tsx b/src/form/Textarea/Textarea.tsx
index 98bf7d7f5..4492312b4 100644
--- a/src/form/Textarea/Textarea.tsx
+++ b/src/form/Textarea/Textarea.tsx
@@ -1,17 +1,18 @@
+import type { RefObject } from 'react';
 import React, {
   forwardRef,
-  RefObject,
   useImperativeHandle,
   useLayoutEffect,
   useRef
 } from 'react';
-import TextareaAutosize, {
-  TextareaAutosizeProps
-} from 'react-textarea-autosize';
-import { twMerge } from 'tailwind-merge';
-import { TextareaTheme } from './TextareaTheme';
+import type { TextareaAutosizeProps } from 'react-textarea-autosize';
+import TextareaAutosize from 'react-textarea-autosize';
+
+import { twMerge } from '@/utils';
 import { useComponentTheme } from '@/utils';
 
+import type { TextareaSizeTheme, TextareaTheme } from './TextareaTheme';
+
 export interface TextareaProps extends TextareaAutosizeProps {
   /**
    * Additional classname for the input container element.
@@ -31,7 +32,7 @@ export interface TextareaProps extends TextareaAutosizeProps {
   /**
    * Size of the field.
    */
-  size?: 'small' | 'medium' | 'large' | string;
+  size?: keyof TextareaSizeTheme;
 
   /**
    * Theme for the Textarea.
diff --git a/src/form/Textarea/TextareaTheme.ts b/src/form/Textarea/TextareaTheme.ts
index 7f2cc6fa8..293590139 100644
--- a/src/form/Textarea/TextareaTheme.ts
+++ b/src/form/Textarea/TextareaTheme.ts
@@ -1,4 +1,9 @@
-import { legacyInputTheme, inputTheme } from '@/form/Input/InputTheme';
+export interface TextareaSizeTheme {
+  small: string;
+  medium: string;
+  large: string;
+  [key: string]: string;
+}
 
 export interface TextareaTheme {
   base: string;
@@ -6,54 +11,29 @@ export interface TextareaTheme {
   fullWidth: string;
   error: string;
   disabled: string;
-  sizes: {
-    small: string;
-    medium: string;
-    large: string;
-    [key: string]: string;
-  };
+  sizes: TextareaSizeTheme;
 }
 
-const baseTheme: Partial<TextareaTheme> = {
-  input: 'resize-none read-only:cursor-not-allowed'
-};
-
 export const textareaTheme: TextareaTheme = {
-  ...baseTheme,
-  base: [
-    baseTheme.base,
-    inputTheme.base,
-    'disabled-within:hover:after:content-none'
-  ].join(' '),
-  input: [baseTheme.input, inputTheme.input].join(' '),
-  disabled: [baseTheme.disabled, inputTheme.disabled].join(' '),
-  fullWidth: inputTheme.fullWidth,
-  error: inputTheme.error,
-  sizes: inputTheme.sizes
-} as TextareaTheme;
-
-export const legacyTextareaTheme: TextareaTheme = {
-  ...baseTheme,
-  base: [
-    baseTheme.base,
-    legacyInputTheme.base,
-    'bg-[var(--textarea-background)] rounded-[var(--textarea-border-radius)] [border:_var(--textarea-border)] focus:border-[var(--textarea-border-focus)]'
-  ].join(' '),
-  input: [
-    baseTheme.input,
-    legacyInputTheme.input,
-    '[font-family:_var(--font-family)] text-[var(--textarea-color)] placeholder-[var(--textarea-color-placeholder)]'
-  ].join(' '),
-  disabled: [
-    baseTheme.disabled,
-    legacyInputTheme.disabled,
-    'text-[var(--disabled-color)]'
-  ].join(' '),
-  fullWidth: legacyInputTheme.fullWidth,
-  error: legacyInputTheme.error,
+  base: `
+    flex items-center transition-colors rounded-md border
+    border-inputs-colors-normal-stroke-resting bg-inputs-colors-normal-background-resting
+    hover:border-inputs-colors-normal-stroke-hover hover:bg-inputs-colors-normal-background-hover
+    focus-within:border-inputs-colors-normal-stroke-selected focus-within:bg-inputs-colors-normal-background-selected
+    disabled-within:hover:border-inputs-colors-normal-stroke-resting disabled-within:hover:bg-inputs-colors-normal-background-resting
+  `,
+  input: 'border-0 resize-none read-only:cursor-not-allowed outline-hidden',
+  fullWidth: 'w-full',
+  error: `
+    border-inputs-colors-error-stroke-resting bg-inputs-colors-error-background-resting
+    hover:border-inputs-colors-error-stroke-hover hover:bg-inputs-colors-error-background-hover
+    focus-within:border-inputs-colors-error-stroke-selected focus-within:bg-inputs-colors-error-background-selected
+    disabled-within:hover:border-inputs-colors-error-stroke-resting disabled-within:hover:bg-inputs-colors-error-background-resting
+  `,
+  disabled: 'cursor-not-allowed opacity-40',
   sizes: {
-    small: '[padding:_var(--textarea-spacing-sm)]',
-    medium: '[padding: var(--textarea-spacing-md)]',
-    large: 'padding: var(--textarea-spacing-lg)'
+    small: 'text-xs px-2 py-[3px]',
+    medium: 'text-sm px-3 py-[7px]',
+    large: 'text-base px-3 py-[7px]'
   }
 } as TextareaTheme;
diff --git a/src/form/Toggle/Toggle.story.tsx b/src/form/Toggle/Toggle.story.tsx
index 7d16fab63..f46c96296 100644
--- a/src/form/Toggle/Toggle.story.tsx
+++ b/src/form/Toggle/Toggle.story.tsx
@@ -1,6 +1,7 @@
-import { Toggle } from './Toggle';
 import React, { useState } from 'react';
 
+import { Toggle } from './Toggle';
+
 export default { title: 'Components/Form/Toggle', component: Toggle };
 
 export const Simple = () => {
@@ -10,7 +11,7 @@ export const Simple = () => {
 
 export const Disabled = () => (
   <div
-    className="bg-panel p-20"
+    className="p-20"
     style={{ display: 'flex', gap: '1rem', flexDirection: 'column' }}
   >
     <Toggle disabled checked />
diff --git a/src/form/Toggle/Toggle.tsx b/src/form/Toggle/Toggle.tsx
index f182b8718..d4bb3e61e 100644
--- a/src/form/Toggle/Toggle.tsx
+++ b/src/form/Toggle/Toggle.tsx
@@ -1,8 +1,12 @@
-import React, { FC, forwardRef, LegacyRef } from 'react';
-import { motion, MotionNodeAnimationOptions } from 'motion/react';
-import { ToggleTheme } from './ToggleTheme';
+import type { MotionNodeAnimationOptions } from 'motion/react';
+import { motion } from 'motion/react';
+import type { FC, LegacyRef } from 'react';
+import React, { forwardRef } from 'react';
+
 import { cn, useComponentTheme } from '@/utils';
 
+import type { ToggleSizeTheme, ToggleTheme } from './ToggleTheme';
+
 export interface ToggleProps {
   /**
    * Whether the toggle is checked or not.
@@ -32,7 +36,7 @@ export interface ToggleProps {
   /**
    * The size of the toggle.
    */
-  size?: 'small' | 'medium' | 'large' | string;
+  size?: keyof ToggleSizeTheme;
 
   /**
    * When the toggle is changed.
diff --git a/src/form/Toggle/ToggleTheme.ts b/src/form/Toggle/ToggleTheme.ts
index c4c23d78e..1694099fa 100644
--- a/src/form/Toggle/ToggleTheme.ts
+++ b/src/form/Toggle/ToggleTheme.ts
@@ -1,3 +1,10 @@
+export interface ToggleSizeTheme {
+  small: string;
+  medium: string;
+  large: string;
+  [key: string]: string;
+}
+
 export interface ToggleTheme {
   base: string;
   disabled: string;
@@ -5,83 +12,37 @@ export interface ToggleTheme {
   disabledAndChecked: string;
   handle: {
     base: string;
-    sizes: {
-      small: string;
-      medium: string;
-      large: string;
-      [key: string]: string;
-    };
+    sizes: ToggleSizeTheme;
     disabled: string;
     disabledAndChecked: string;
   };
-  sizes: {
-    small: string;
-    medium: string;
-    large: string;
-    [key: string]: string;
-  };
+  sizes: ToggleSizeTheme;
 }
 
-const baseTheme: ToggleTheme = {
-  base: 'flex items-center justify-start cursor-pointer bg-surface box-border border border-panel-accent rounded-full hover:bg-primary-hover transition-[background-color] ease-in-out duration-300',
-  disabled: 'cursor-not-allowed bg-transparent hover:bg-transparent',
-  checked: 'justify-end bg-primary',
+export const toggleTheme: ToggleTheme = {
+  base: 'group flex items-center justify-start cursor-pointer bg-selectors-colors-toggle-off-background-resting box-border border border-selectors-colors-toggle-off-stroke-resting rounded-full hover:bg-selectors-colors-toggle-off-background-hover focus-visible:bg-selectors-colors-toggle-off-background-hover transition-colors ease-in-out duration-300 focus-visible:outline-none',
+  disabled:
+    'cursor-not-allowed opacity-40 focus-visible:bg-selectors-colors-toggle-off-background-resting',
+  checked:
+    'justify-end bg-selectors-colors-toggle-on-background-resting hover:bg-selectors-colors-toggle-on-background-hover focus-visible:bg-selectors-colors-toggle-on-background-hover',
   disabledAndChecked:
-    'bg-secondary-inactive hover:bg-secondary-inactive light:bg-gray-400 light:hover:bg-gray-400',
+    'focus-visible:bg-selectors-colors-toggle-on-background-resting',
   handle: {
-    base: 'rounded-full bg-panel',
+    base: 'rounded-full bg-selectors-colors-toggle-off-assets-resting group-hover:bg-selectors-colors-toggle-off-assets-hover',
     sizes: {
-      small: 'w-3 h-full',
-      medium: 'w-5 h-full',
-      large: 'w-6 h-full'
+      small: 'size-(--selectors-details-asset-size-toggle-sm)',
+      medium: 'size-(--selectors-details-asset-size-toggle-sm)',
+      large: 'size-(--selectors-details-asset-size-toggle-lg)'
     },
-    disabled: 'bg-secondary-inactive light:bg-gray-400',
-    disabledAndChecked: 'bg-black light:bg-white'
+    disabled: '',
+    disabledAndChecked: 'bg-selectors-colors-toggle-on-assets-resting'
   },
-  sizes: {
-    small: 'w-8 h-4 p-px',
-    medium: 'w-12 h-6 p-px',
-    large: 'w-16 h-7 p-px'
-  }
-};
-
-export const toggleTheme = baseTheme;
-
-export const legacyToggleTheme: ToggleTheme = {
-  ...baseTheme,
-  base: [
-    baseTheme.base,
-    'bg-[var(--toggle-background)] rounded-[var(--toggle-border-radius)] [border:_var(--toggle-border)]'
-  ].join(' '),
-  disabled: [
-    baseTheme.disabled,
-    'opacity-[var(--toggle-disabled-opacity,0.8)] bg-[var(--toggle-disabled-background)]'
-  ].join(' '),
-  checked: [
-    baseTheme.checked,
-    'bg-[var(--toggle-background-checked)] [border:_var(--toggle-border-checked)]'
-  ].join(' '),
   sizes: {
     small:
-      'h-[calc(var(--toggle-height,35px)_/_2)] w-[calc(var(--toggle-width,55px)_/_2)] pt-[calc(var(--toggle-spacing)] pb-[2)]',
+      'w-(--selectors-details-width-toggle-sm) h-(--selectors-details-height-sm) p-0.5',
     medium:
-      'h-[calc(var(--toggle-height,35px)_/_1.5)] w-[calc(var(--toggle-width,55px)_/_1.5)] pt-[calc(var(--toggle-spacing)] pb-[1.5)]',
+      'w-(--selectors-details-width-toggle-sm) h-(--selectors-details-height-sm) p-0.5',
     large:
-      'h-[var(--toggle-height,35px)] w-[var(--toggle-width,55px)] pt-[var(--toggle-spacing)] pr-[var(--toggle-spacing)] pb-[var(--toggle-spacing)] pl-[var(--toggle-spacing)]'
-  },
-  handle: {
-    ...baseTheme.handle,
-    base: [
-      baseTheme.handle.base,
-      'bg-[var(--toggle-handle-background)] rounded-[var(--toggle-handle-border-radius)]'
-    ].join(' '),
-    sizes: {
-      small:
-        'h-[calc(var(--toggle-handle-size,25px)_/_2)] w-[calc(var(--toggle-handle-size,25px)_/_2)]',
-      medium:
-        'h-[calc(var(--toggle-handle-size,25px)_/_1.5)] w-[calc(var(--toggle-handle-size,25px)_/_1.5)]',
-      large:
-        'h-[var(--toggle-handle-size,25px)] w-[var(--toggle-handle-size,25px)]'
-    }
+      'w-(--selectors-details-width-toggle-lg) h-(--selectors-details-height-lg) p-0.5'
   }
 };
diff --git a/src/form/index.ts b/src/form/index.ts
index b6f611d75..c0df3e297 100644
--- a/src/form/index.ts
+++ b/src/form/index.ts
@@ -1,9 +1,9 @@
 export * from './Calendar';
 export * from './Checkbox';
+export * from './DateInput';
 export * from './Input';
 export * from './Radio';
 export * from './Range';
 export * from './Select';
 export * from './Textarea';
 export * from './Toggle';
-export * from './DateInput';
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index e864da732..000000000
--- a/src/index.css
+++ /dev/null
@@ -1,389 +0,0 @@
-@import 'tailwindcss';
-
-/* Color palette */
-:root,
-:host {
-  --reablocks-theme: dark;
-
-  /* Primary colors */
-  --primary: var(--color-blue-500);
-  --primary-active: var(--color-blue-500);
-  --primary-hover: var(--color-blue-400);
-  --primary-inactive: var(--color-blue-200);
-
-  /* Secondary colors */
-  --secondary: var(--color-charade);
-  --secondary-active: var(--color-charade);
-  --secondary-hover: var(--color-gray-700);
-  --secondary-inactive: var(--color-gray-600);
-
-  /* Success colors */
-  --success: var(--color-green-500);
-  --success-active: var(--color-green-500);
-  --success-hover: var(--color-green-400);
-  --success-background: var(--color-green-950);
-
-  /* Error colors */
-  --error: var(--color-red-500);
-  --error-active: var(--color-red-500);
-  --error-hover: var(--color-red-400);
-  --error-background: var(--color-red-950);
-
-  /* Warning colors */
-  --warning: var(--color-orange-500);
-  --warning-active: var(--color-orange-500);
-  --warning-hover: var(--color-orange-400);
-  --warning-background: var(--color-orange-950);
-
-  /* Info colors */
-  --info: var(--color-blue-500);
-  --info-active: var(--color-blue-500);
-  --info-hover: var(--color-blue-400);
-  --info-background: var(--color-blue-950);
-
-  /* Panel colors */
-  --panel: var(--color-black-pearl);
-  --panel-accent: var(--color-charade);
-
-  /* Surface colors */
-  --surface: var(--color-charade);
-  --surface-accent: var(--color-blue-500);
-
-  /* Text colors */
-  --text-primary: var(--color-athens-gray);
-  --text-secondary: var(--color-waterloo);
-
-  /* Custom Backgrounds */
-  --bottom-border-glow: radial-gradient(
-    circle at center,
-    var(--color-anakiwa) 0,
-    blue,
-    transparent 100%
-  );
-  --button-gradient: linear-gradient(
-    283deg,
-    #0808a5 0%,
-    rgba(8, 8, 165, 0) 100%
-  );
-  --button-gradient-hover: linear-gradient(
-    283deg,
-    #44f 0%,
-    rgba(23, 23, 255, 0.1) 100%
-  );
-  --button-gradient-focus: linear-gradient(
-    283deg,
-    #0d0dd2 0%,
-    rgba(23, 23, 255, 0.1) 100%
-  );
-
-  .theme-light,
-  &.theme-light,
-  [data-theme='light'],
-  &[data-theme='light'] {
-    --reablocks-theme: light;
-
-    /* Primary colors */
-    --primary: var(--color-blue-500);
-    --primary-active: var(--color-blue-500);
-    --primary-hover: var(--color-blue-600);
-    --primary-inactive: var(--color-gray-500);
-
-    /* Secondary colors */
-    --secondary: var(--color-blue-200);
-    --secondary-active: var(--color-blue-200);
-    --secondary-hover: var(--color-blue-300);
-    --secondary-inactive: var(--color-waterloo);
-
-    /* Success colors */
-    --success: var(--color-green-500);
-    --success-active: var(--color-green-500);
-    --success-hover: var(--color-green-600);
-    --success-background: var(--color-green-100);
-
-    /* Error colors */
-    --error: var(--color-red-500);
-    --error-active: var(--color-red-400);
-    --error-hover: var(--color-red-600);
-    --error-background: var(--color-red-100);
-
-    /* Warning colors */
-    --warning: var(--color-orange-500);
-    --warning-active: var(--color-orange-500);
-    --warning-hover: var(--color-orange-600);
-    --warning-background: var(--color-orange-100);
-
-    /* Info colors */
-    --info: var(--color-blue-500);
-    --info-active: var(--color-blue-500);
-    --info-hover: var(--color-blue-600);
-    --info-background: var(--color-blue-100);
-
-    /* Panel colors */
-    --panel: var(--color-white);
-    --panel-accent: var(--color-mystic);
-
-    /* Surface colors */
-    --surface: var(--color-gray-300);
-    --surface-accent: var(--color-blue-500);
-
-    /* Text colors */
-    --text-primary: var(--color-vulcan);
-    --text-secondary: var(--color-gray-700);
-  }
-}
-
-/* Custom variants */
-@custom-variant dark (&:where(.theme-dark, .theme-dark *, [data-theme=dark], [data-theme=dark] *));
-@custom-variant light (&:where(.theme-light, .theme-light *, [data-theme=light], [data-theme=light] *));
-@custom-variant disabled-within (&:has(input:is(:disabled), textarea:is(:disabled), button:is(:disabled)));
-
-/* Define theme tokens */
-@theme inline {
-  /* Fonts */
-  --font-sans: Inter, sans-serif;
-  --font-mono: Fira Code, monospace;
-
-  /* Font sizes */
-  --text-xs: 0.625rem; /* 10px */
-  --text-xs--line-height: 1rem;
-  --text-sm: 0.75rem; /* 12px */
-  --text-sm--line-height: 1rem;
-  --text-base: 0.875rem; /* 14px */
-  --text-base--line-height: 1.25rem;
-  --text-lg: 1rem; /* 16px */
-  --text-lg--line-height: 1.5rem;
-
-  /* Primary colors */
-  --color-primary: var(--primary);
-  --color-primary-active: var(--primary-active);
-  --color-primary-hover: var(--primary-hover);
-  --color-primary-inactive: var(--primary-inactive);
-
-  /* Secondary colors */
-  --color-secondary: var(--secondary);
-  --color-secondary-active: var(--secondary-active);
-  --color-secondary-hover: var(--secondary-hover);
-  --color-secondary-inactive: var(--secondary-inactive);
-
-  /* Success colors */
-  --color-success: var(--success);
-  --color-success-active: var(--success-active);
-  --color-success-hover: var(--success-hover);
-  --color-success-background: var(--success-background);
-
-  /* Error colors */
-  --color-error: var(--error);
-  --color-error-active: var(--error-active);
-  --color-error-hover: var(--error-hover);
-  --color-error-background: var(--error-background);
-
-  /* Warning colors */
-  --color-warning: var(--warning);
-  --color-warning-active: var(--warning-active);
-  --color-warning-hover: var(--warning-hover);
-  --color-warning-background: var(--warning-background);
-
-  /* Info colors */
-  --color-info: var(--info);
-  --color-info-active: var(--info-active);
-  --color-info-hover: var(--info-hover);
-  --color-info-background: var(--info-background);
-
-  /* Panel colors */
-  --color-panel: var(--panel);
-  --color-panel-accent: var(--panel-accent);
-
-  /* Surface colors */
-  --color-surface: var(--surface);
-  --color-surface-accent: var(--surface-accent);
-
-  /* Text colors */
-  --color-text-primary: var(--text-primary);
-  --color-text-secondary: var(--text-secondary);
-
-  /* Base colors */
-  --color-white: #ffffff;
-  --color-black: #000000;
-
-  /* Gray scale */
-  --color-gray-*: initial;
-  --color-gray-100: #f7f7fa;
-  --color-gray-200: #e6e6f0;
-  --color-gray-300: #c9c9d6;
-  --color-gray-400: #77778c;
-  --color-gray-500: #5c5c73;
-  --color-gray-600: #3d3d4d;
-  --color-gray-700: #242433;
-  --color-gray-800: #1e1e2e;
-  --color-gray-900: #11111f;
-  --color-gray-950: #02020f;
-
-  /* Magenta */
-  --color-magenta-*: initial;
-  --color-magenta-100: #fae5f6;
-  --color-magenta-200: #f1bfe9;
-  --color-magenta-300: #e480d3;
-  --color-magenta-400: #d740be;
-  --color-magenta-500: #c900a8;
-  --color-magenta-600: #ab018f;
-  --color-magenta-700: #8c0276;
-  --color-magenta-800: #6e025c;
-  --color-magenta-900: #4f0343;
-  --color-magenta-950: #31042a;
-
-  /* Pink */
-  --color-pink-*: initial;
-  --color-pink-100: #fde5f1;
-  --color-pink-200: #f9bfdb;
-  --color-pink-300: #f480b7;
-  --color-pink-400: #ee4094;
-  --color-pink-500: #de006b;
-  --color-pink-600: #bb015a;
-  --color-pink-700: #98014a;
-  --color-pink-800: #740239;
-  --color-pink-900: #510229;
-  --color-pink-950: #2e0318;
-
-  /* Lime */
-  --color-lime-*: initial;
-  --color-lime-100: #f4fae5;
-  --color-lime-200: #e3f3bf;
-  --color-lime-300: #c6e880;
-  --color-lime-400: #aadc40;
-  --color-lime-500: #8ed000;
-  --color-lime-600: #78b001;
-  --color-lime-700: #628f01;
-  --color-lime-800: #4c6f02;
-  --color-lime-900: #364e02;
-  --color-lime-950: #202e03;
-
-  /* Teal */
-  --color-teal-*: initial;
-  --color-teal-100: #e5fbf9;
-  --color-teal-200: #bff6f0;
-  --color-teal-300: #80ede0;
-  --color-teal-400: #40e5d1;
-  --color-teal-500: #00dcc2;
-  --color-teal-600: #00c2ab;
-  --color-teal-700: #019a88;
-  --color-teal-800: #017365;
-  --color-teal-900: #024b42;
-  --color-teal-950: #02231f;
-
-  /* Cyan */
-  --color-cyan-*: initial;
-  --color-cyan-100: #e5f9fe;
-  --color-cyan-200: #bff0fb;
-  --color-cyan-300: #80e2f8;
-  --color-cyan-400: #40d3f4;
-  --color-cyan-500: #00c5f0;
-  --color-cyan-600: #01a7cb;
-  --color-cyan-700: #0289a6;
-  --color-cyan-800: #036b82;
-  --color-cyan-900: #044d5d;
-  --color-cyan-950: #052f38;
-
-  /* Violet */
-  --color-violet-*: initial;
-  --color-violet-100: #f0e8fd;
-  --color-violet-200: #dac5f9;
-  --color-violet-300: #b58bf3;
-  --color-violet-400: #9152ee;
-  --color-violet-500: #6c18e8;
-  --color-violet-600: #5b14c5;
-  --color-violet-700: #4b10a1;
-  --color-violet-800: #3a0d7e;
-  --color-violet-900: #2a095b;
-  --color-violet-950: #190537;
-
-  /* Purple */
-  --color-purple-*: initial;
-  --color-purple-100: #f3e5fc;
-  --color-purple-200: #e2bff7;
-  --color-purple-300: #c580f0;
-  --color-purple-400: #a840e8;
-  --color-purple-500: #8b00e0;
-  --color-purple-600: #7501bc;
-  --color-purple-700: #5f0298;
-  --color-purple-800: #490274;
-  --color-purple-900: #330350;
-  --color-purple-950: #1d042d;
-
-  /* Red */
-  --color-red-*: initial;
-  --color-red-100: #fce5e6;
-  --color-red-200: #f7bfc1;
-  --color-red-300: #f08083;
-  --color-red-400: #e84045;
-  --color-red-500: #e00007;
-  --color-red-600: #b70006;
-  --color-red-700: #8e0005;
-  --color-red-800: #660104;
-  --color-red-900: #3d0103;
-  --color-red-950: #200204;
-
-  /* Orange */
-  --color-orange-*: initial;
-  --color-orange-100: #fef3e5;
-  --color-orange-200: #fde1bf;
-  --color-orange-300: #fbc280;
-  --color-orange-400: #f8a340;
-  --color-orange-500: #f68500;
-  --color-orange-600: #cb6e00;
-  --color-orange-700: #9f5701;
-  --color-orange-800: #743f01;
-  --color-orange-900: #482802;
-  --color-orange-950: #251602;
-
-  /* Yellow */
-  --color-yellow-*: initial;
-  --color-yellow-100: #fff9e5;
-  --color-yellow-200: #fff1bf;
-  --color-yellow-300: #ffe380;
-  --color-yellow-400: #ffd440;
-  --color-yellow-500: #ffc600;
-  --color-yellow-600: #d2a300;
-  --color-yellow-700: #a58001;
-  --color-yellow-800: #785e01;
-  --color-yellow-900: #4b3b02;
-  --color-yellow-950: #261f03;
-
-  /* Green */
-  --color-green-*: initial;
-  --color-green-100: #eef8e9;
-  --color-green-200: #d5efc8;
-  --color-green-300: #aadf91;
-  --color-green-400: #80ce5b;
-  --color-green-500: #55be24;
-  --color-green-600: #469d1d;
-  --color-green-700: #377c16;
-  --color-green-800: #275c10;
-  --color-green-900: #183b09;
-  --color-green-950: #091a02;
-
-  /* Blue */
-  --color-blue-*: initial;
-  --color-blue-100: #e7efff;
-  --color-blue-200: #c3d7ff;
-  --color-blue-300: #87aeff;
-  --color-blue-400: #4c86ff;
-  --color-blue-500: #105eff;
-  --color-blue-600: #0d4ed2;
-  --color-blue-700: #0a3da6;
-  --color-blue-800: #082d79;
-  --color-blue-900: #051c4c;
-  --color-blue-950: #041028;
-
-  /* Named colors */
-  --color-black-pearl: #02020f;
-  --color-athens-gray: #f7f7fa;
-  --color-mystic: #e6e6f0;
-  --color-vulcan: #11111f;
-  --color-charade: #242433;
-  --color-waterloo: #77778c;
-  --color-anakiwa: #93b6ff;
-}
-
-body {
-  line-height: inherit;
-}
diff --git a/src/index.ts b/src/index.ts
index d3ca5a28f..42901a7f8 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,7 +1,7 @@
-export * from './utils';
 export * from './data';
-export * from './form';
-export * from './layout';
 export * from './elements';
+export * from './form';
 export * from './layers';
+export * from './layout';
 export * from './typography';
+export * from './utils';
diff --git a/src/layers/Backdrop/Backdrop.tsx b/src/layers/Backdrop/Backdrop.tsx
index cd4b428f3..2f77c050b 100644
--- a/src/layers/Backdrop/Backdrop.tsx
+++ b/src/layers/Backdrop/Backdrop.tsx
@@ -1,8 +1,10 @@
-import React, { FC, MouseEvent } from 'react';
 import { motion } from 'motion/react';
+import type { FC, MouseEvent } from 'react';
+import React from 'react';
+
 import { cn, useComponentTheme } from '@/utils';
 
-import { BackdropTheme } from './BackdropTheme';
+import type { BackdropTheme } from './BackdropTheme';
 
 export interface BackdropProps {
   /**
diff --git a/src/layers/Backdrop/BackdropTheme.tsx b/src/layers/Backdrop/BackdropTheme.tsx
index da2720165..63afa5661 100644
--- a/src/layers/Backdrop/BackdropTheme.tsx
+++ b/src/layers/Backdrop/BackdropTheme.tsx
@@ -7,8 +7,3 @@ export const backdropTheme: BackdropTheme = {
   base: 'fixed top-0 left-0 w-full h-full opacity-0 select-none bg-black',
   opacity: 0.8
 };
-
-export const legacyBackdropTheme: BackdropTheme = {
-  base: 'fixed top-0 left-0 w-full h-full opacity-0 select-none bg-[var(--color-layer-transparent)]',
-  opacity: 0.8
-};
diff --git a/src/layers/Callout/Callout.story.tsx b/src/layers/Callout/Callout.story.tsx
index 31b7daa1f..aa920a1cf 100644
--- a/src/layers/Callout/Callout.story.tsx
+++ b/src/layers/Callout/Callout.story.tsx
@@ -1,16 +1,15 @@
 import React from 'react';
-import { Stack } from '@/layout';
-import { Text } from '@/typography';
 
+import CalendarIcon from '@/assets/icons/calendar.svg?react';
 import {
   Callout,
-  SuccessCallout,
-  WarningCallout,
   ErrorCallout,
-  InfoCallout
+  InfoCallout,
+  SuccessCallout,
+  WarningCallout
 } from '@/layers';
-
-import CalendarIcon from '@/assets/icons/calendar.svg?react';
+import { Stack } from '@/layout';
+import { Typography } from '@/typography';
 
 export default {
   title: 'Components/Layers/Callout',
@@ -47,13 +46,10 @@ export const CustomText = () => (
     <InfoCallout
       variant="info"
       text={
-        <Text>
-          You will need{' '}
-          <Text fontStyle="bold" color="warning">
-            admin
-          </Text>{' '}
+        <Typography>
+          You will need <Typography variant="button">admin</Typography>{' '}
           privileges to install and access this application.
-        </Text>
+        </Typography>
       }
     />
   </div>
diff --git a/src/layers/Callout/Callout.tsx b/src/layers/Callout/Callout.tsx
index 1bbad5f90..ac7f40eef 100644
--- a/src/layers/Callout/Callout.tsx
+++ b/src/layers/Callout/Callout.tsx
@@ -1,7 +1,10 @@
-import React, { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
+import React from 'react';
+
 import { Stack } from '@/layout';
 import { cn, useComponentTheme } from '@/utils';
-import { CalloutTheme } from './CalloutTheme';
+
+import type { CalloutTheme, CalloutVariantTheme } from './CalloutTheme';
 
 export interface CalloutProps {
   /**
@@ -17,7 +20,7 @@ export interface CalloutProps {
   /**
    * The variant of the callout.
    */
-  variant?: 'default' | 'success' | 'error' | 'warning' | 'info';
+  variant?: keyof CalloutVariantTheme;
 
   /**
    * The theme of the callout.
diff --git a/src/layers/Callout/CalloutTheme.ts b/src/layers/Callout/CalloutTheme.ts
index 787b88cdb..134851dfa 100644
--- a/src/layers/Callout/CalloutTheme.ts
+++ b/src/layers/Callout/CalloutTheme.ts
@@ -1,25 +1,20 @@
+export interface CalloutVariantTheme {
+  default: string;
+  success: string;
+  error: string;
+  warning: string;
+  info: string;
+  [key: string]: string;
+}
+
 export interface CalloutTheme {
   base: {
     common: string;
-    variant: {
-      default: string;
-      success: string;
-      error: string;
-      warning: string;
-      info: string;
-      [key: string]: string;
-    };
+    variant: CalloutVariantTheme;
   };
   icon: {
     common: string;
-    variant: {
-      default: string;
-      success: string;
-      error: string;
-      warning: string;
-      info: string;
-      [key: string]: string;
-    };
+    variant: CalloutVariantTheme;
   };
   text: string;
 }
@@ -28,24 +23,26 @@ export const calloutTheme: CalloutTheme = {
   base: {
     common: 'px-4 py-3 border-b',
     variant: {
-      default: 'bg-panel-background border-panel-accent',
-      success: 'bg-success-background border-success',
-      error: 'bg-error-background border-error',
-      warning: 'bg-warning-background border-warning',
-      info: 'bg-info-background border-info'
+      default:
+        'bg-notifications-colors-background-neutral-resting border-notifications-colors-stroke-neutral-resting',
+      success:
+        'bg-notifications-colors-background-success-resting border-notifications-colors-stroke-success-resting',
+      error:
+        'bg-notifications-colors-background-error-resting border-notifications-colors-stroke-error-resting',
+      warning:
+        'bg-notifications-colors-background-warning-resting border-notifications-colors-stroke-warning-resting',
+      info: 'bg-notifications-colors-background-info-resting border-notifications-colors-stroke-info-resting'
     }
   },
   icon: {
     common: '',
     variant: {
-      default: '',
-      success: 'text-success',
-      error: 'text-error',
-      warning: 'text-warning',
-      info: 'text-info'
+      default: 'text-notifications-colors-assets-neutral-resting',
+      success: 'text-notifications-colors-assets-success-resting',
+      error: 'text-notifications-colors-assets-destructive-resting',
+      warning: 'text-notifications-colors-assets-warning-static',
+      info: 'text-notifications-colors-assets-info-resting'
     }
   },
-  text: 'text-base'
+  text: 'text-notifications-colors-text-title-resting'
 };
-
-export const legacyCalloutTheme: CalloutTheme = calloutTheme;
diff --git a/src/layers/Callout/ErrorCallout.tsx b/src/layers/Callout/ErrorCallout.tsx
index 9494a140b..36cdf6e7b 100644
--- a/src/layers/Callout/ErrorCallout.tsx
+++ b/src/layers/Callout/ErrorCallout.tsx
@@ -1,8 +1,11 @@
-import React, { FC } from 'react';
-import { Callout, CalloutProps } from './Callout';
+import type { FC } from 'react';
+import React from 'react';
 
 import ErrorCircleIcon from '@/assets/icons/error_circle.svg?react';
 
+import type { CalloutProps } from './Callout';
+import { Callout } from './Callout';
+
 export const ErrorCallout: FC<CalloutProps> = ({ icon, ...rest }) => (
   <Callout icon={icon ?? <ErrorCircleIcon />} variant="error" {...rest} />
 );
diff --git a/src/layers/Callout/InfoCallout.tsx b/src/layers/Callout/InfoCallout.tsx
index 05fa2c447..75ac1ea86 100644
--- a/src/layers/Callout/InfoCallout.tsx
+++ b/src/layers/Callout/InfoCallout.tsx
@@ -1,8 +1,11 @@
-import React, { FC } from 'react';
-import { Callout, CalloutProps } from './Callout';
+import type { FC } from 'react';
+import React from 'react';
 
 import InfoIcon from '@/assets/icons/info.svg?react';
 
+import type { CalloutProps } from './Callout';
+import { Callout } from './Callout';
+
 export const InfoCallout: FC<CalloutProps> = ({ icon, ...rest }) => (
   <Callout icon={icon ?? <InfoIcon />} variant="info" {...rest} />
 );
diff --git a/src/layers/Callout/SuccessCallout.tsx b/src/layers/Callout/SuccessCallout.tsx
index 3b764ea96..52701cbd4 100644
--- a/src/layers/Callout/SuccessCallout.tsx
+++ b/src/layers/Callout/SuccessCallout.tsx
@@ -1,8 +1,11 @@
-import React, { FC } from 'react';
-import { Callout, CalloutProps } from './Callout';
+import type { FC } from 'react';
+import React from 'react';
 
 import CheckCircleIcon from '@/assets/icons/check_circle.svg?react';
 
+import type { CalloutProps } from './Callout';
+import { Callout } from './Callout';
+
 export const SuccessCallout: FC<CalloutProps> = ({ icon, ...rest }) => (
   <Callout icon={icon ?? <CheckCircleIcon />} variant="success" {...rest} />
 );
diff --git a/src/layers/Callout/WarningCallout.tsx b/src/layers/Callout/WarningCallout.tsx
index 75ad394b5..ec72e066b 100644
--- a/src/layers/Callout/WarningCallout.tsx
+++ b/src/layers/Callout/WarningCallout.tsx
@@ -1,8 +1,11 @@
-import React, { FC } from 'react';
-import { Callout, CalloutProps } from './Callout';
+import type { FC } from 'react';
+import React from 'react';
 
 import WarningIcon from '@/assets/icons/warning.svg?react';
 
+import type { CalloutProps } from './Callout';
+import { Callout } from './Callout';
+
 export const WarningCallout: FC<CalloutProps> = ({ icon, ...rest }) => (
   <Callout icon={icon ?? <WarningIcon />} variant="warning" {...rest} />
 );
diff --git a/src/layers/Callout/index.ts b/src/layers/Callout/index.ts
index 1532a6347..324ce525f 100644
--- a/src/layers/Callout/index.ts
+++ b/src/layers/Callout/index.ts
@@ -1,6 +1,6 @@
 export * from './Callout';
 export * from './CalloutTheme';
-export * from './SuccessCallout';
 export * from './ErrorCallout';
-export * from './WarningCallout';
 export * from './InfoCallout';
+export * from './SuccessCallout';
+export * from './WarningCallout';
diff --git a/src/layers/ConfirmDialog/ConfirmDialog.story.tsx b/src/layers/ConfirmDialog/ConfirmDialog.story.tsx
index 7f3eeab70..1e135a06a 100644
--- a/src/layers/ConfirmDialog/ConfirmDialog.story.tsx
+++ b/src/layers/ConfirmDialog/ConfirmDialog.story.tsx
@@ -1,8 +1,11 @@
-import { useCallback, useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { ConfirmDialog, ConfirmDialogProps } from './ConfirmDialog';
+import { useCallback, useState } from 'react';
+
 import { Button } from '@/elements/Button';
 
+import type { ConfirmDialogProps } from './ConfirmDialog';
+import { ConfirmDialog } from './ConfirmDialog';
+
 const meta: Meta<typeof ConfirmDialog> = {
   title: 'Components/Layers/Confirm Dialog',
   component: ConfirmDialog,
@@ -22,8 +25,10 @@ type Story = StoryObj<ConfirmDialogProps>;
 
 export const Default: Story = {
   render: args => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [isOpen, setIsOpen] = useState<boolean>(false);
 
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const handleConfirm = useCallback(
       function (): void {
         if (args.onConfirm) {
@@ -34,6 +39,7 @@ export const Default: Story = {
       [args, setIsOpen]
     );
 
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const handleCancel = useCallback(
       function (): void {
         if (args.onCancel) {
diff --git a/src/layers/ConfirmDialog/ConfirmDialog.tsx b/src/layers/ConfirmDialog/ConfirmDialog.tsx
index acb525f8b..80ccde59e 100644
--- a/src/layers/ConfirmDialog/ConfirmDialog.tsx
+++ b/src/layers/ConfirmDialog/ConfirmDialog.tsx
@@ -1,7 +1,9 @@
 // ConfirmDialog.tsx
-import React, { ReactNode } from 'react';
-import { Dialog } from '@/layers/Dialog';
+import type { ReactNode } from 'react';
+import React from 'react';
+
 import { Button } from '@/elements/Button';
+import { Dialog } from '@/layers/Dialog';
 
 export interface ConfirmDialogProps {
   /**
diff --git a/src/layers/ConfirmDialog/useConfirmDialog.tsx b/src/layers/ConfirmDialog/useConfirmDialog.tsx
index 4bddb236c..a83a2b1c9 100644
--- a/src/layers/ConfirmDialog/useConfirmDialog.tsx
+++ b/src/layers/ConfirmDialog/useConfirmDialog.tsx
@@ -1,5 +1,7 @@
-import React, { useState, useCallback, ReactNode } from 'react';
-import { ConfirmDialog, ConfirmDialogProps } from './ConfirmDialog';
+import React, { useCallback, useState } from 'react';
+
+import type { ConfirmDialogProps } from './ConfirmDialog';
+import { ConfirmDialog } from './ConfirmDialog';
 
 export type OpenConfirmDialogProps = Omit<ConfirmDialogProps, 'open'>;
 
diff --git a/src/layers/ContextMenu/ContextMenu.story.tsx b/src/layers/ContextMenu/ContextMenu.story.tsx
index 12e010a6d..dd35d1e54 100644
--- a/src/layers/ContextMenu/ContextMenu.story.tsx
+++ b/src/layers/ContextMenu/ContextMenu.story.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { Button } from '../../elements/Button';
 import { Card } from '../../layout/Card';
 import { List, ListItem } from '../../layout/List';
diff --git a/src/layers/ContextMenu/ContextMenu.tsx b/src/layers/ContextMenu/ContextMenu.tsx
index 016f6e4e1..cfa1e9022 100644
--- a/src/layers/ContextMenu/ContextMenu.tsx
+++ b/src/layers/ContextMenu/ContextMenu.tsx
@@ -1,13 +1,17 @@
-import React, { FC, ReactNode, useState, useCallback, useEffect } from 'react';
+import creteGlobalStateHook from 'create-global-state-hook';
+import FocusTrap from 'focus-trap-react';
 import { motion } from 'motion/react';
-import { ConnectedOverlay, ConnectedOverlayProps } from '@/utils';
+import type { FC, ReactNode } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
+
+import type { ConnectedOverlayProps } from '@/utils';
+import { ConnectedOverlay } from '@/utils';
 import { useId } from '@/utils';
-import FocusTrap from 'focus-trap-react';
-import creteGlobalStateHook from 'create-global-state-hook';
-import { twMerge } from 'tailwind-merge';
-import { ContextMenuTheme } from './ContextMenuTheme';
+import { twMerge } from '@/utils';
 import { useComponentTheme } from '@/utils';
 
+import type { ContextMenuTheme } from './ContextMenuTheme';
+
 const useGlobalMenuState = creteGlobalStateHook<any[]>([]);
 
 export interface ContextMenuContentProps {
diff --git a/src/layers/ContextMenu/ContextMenuTheme.ts b/src/layers/ContextMenu/ContextMenuTheme.ts
index 8b1722a0a..31270ee7a 100644
--- a/src/layers/ContextMenu/ContextMenuTheme.ts
+++ b/src/layers/ContextMenu/ContextMenuTheme.ts
@@ -2,14 +2,6 @@ export interface ContextMenuTheme {
   enabled: string;
 }
 
-const baseTheme: ContextMenuTheme = {
-  enabled: 'cursor-context-menu'
-};
-
 export const contextMenuTheme: ContextMenuTheme = {
-  ...baseTheme
-};
-
-export const legacyContextMenuTheme: ContextMenuTheme = {
-  ...baseTheme
+  enabled: 'cursor-context-menu'
 };
diff --git a/src/layers/Dialog/Dialog.story.tsx b/src/layers/Dialog/Dialog.story.tsx
index b5bb42d7e..bb3331e5d 100644
--- a/src/layers/Dialog/Dialog.story.tsx
+++ b/src/layers/Dialog/Dialog.story.tsx
@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
-import { MotionProps } from 'motion/react';
-import { Dialog } from './Dialog';
-import { useDialog } from './useDialog';
+
 import { Button } from '../../elements';
 import { Stack } from '../../layout';
+import { Dialog } from './Dialog';
+import { useDialog } from './useDialog';
 
 export default {
   title: 'Components/Layers/Dialog',
@@ -27,7 +27,9 @@ export const CustomHeader = () => {
   return (
     <div style={{ textAlign: 'center', margin: '50px' }}>
       <Button onClick={toggleOpen}>Open</Button>
-      <Dialog header={<h3 className="text-2xl">What's up</h3>}>Hello</Dialog>
+      <Dialog header={<h3 className="text-xl">What&apos;s up</h3>}>
+        Hello
+      </Dialog>
     </div>
   );
 };
@@ -101,7 +103,9 @@ export const ConfirmDialog = () => {
         header="Whats up"
         footer={
           <Stack justifyContent="end" className="w-full">
-            <Button>Cancel</Button>
+            <Button variant="outline" color="secondary">
+              Cancel
+            </Button>
             <Button color="primary">Save</Button>
           </Stack>
         }
diff --git a/src/layers/Dialog/Dialog.tsx b/src/layers/Dialog/Dialog.tsx
index 6c6607eef..3eb69f209 100644
--- a/src/layers/Dialog/Dialog.tsx
+++ b/src/layers/Dialog/Dialog.tsx
@@ -1,18 +1,23 @@
-import React, { FC, ReactElement } from 'react';
-import { GlobalOverlay, GlobalOverlayProps } from '@/utils/Overlay';
-import { useId, CloneElement, cn } from '@/utils';
 import FocusTrap from 'focus-trap-react';
-import {
-  motion,
+import type {
   MotionNodeAnimationOptions,
   MotionProps,
   TargetAndTransition,
   Transition,
   VariantLabels
 } from 'motion/react';
-import { DialogHeader, DialogHeaderProps } from './DialogHeader';
+import { motion } from 'motion/react';
+import type { FC, ReactElement } from 'react';
+import React from 'react';
+
+import { CloneElement, cn, useId } from '@/utils';
 import { useComponentTheme } from '@/utils';
-import { DialogTheme } from './DialogTheme';
+import type { GlobalOverlayProps } from '@/utils/Overlay';
+import { GlobalOverlay } from '@/utils/Overlay';
+
+import type { DialogHeaderProps } from './DialogHeader';
+import { DialogHeader } from './DialogHeader';
+import type { DialogTheme } from './DialogTheme';
 
 export interface DialogProps
   extends Omit<GlobalOverlayProps, 'children'>,
diff --git a/src/layers/Dialog/DialogHeader.tsx b/src/layers/Dialog/DialogHeader.tsx
index 231286913..778385e01 100644
--- a/src/layers/Dialog/DialogHeader.tsx
+++ b/src/layers/Dialog/DialogHeader.tsx
@@ -1,7 +1,10 @@
-import React, { FC } from 'react';
-import { twMerge } from 'tailwind-merge';
+import type { FC } from 'react';
+import React from 'react';
+
+import { twMerge } from '@/utils';
 import { useComponentTheme } from '@/utils';
-import { DialogTheme } from './DialogTheme';
+
+import type { DialogTheme } from './DialogTheme';
 
 export interface DialogHeaderProps {
   /**
diff --git a/src/layers/Dialog/DialogTheme.tsx b/src/layers/Dialog/DialogTheme.tsx
index 8606ef049..99dc12f7a 100644
--- a/src/layers/Dialog/DialogTheme.tsx
+++ b/src/layers/Dialog/DialogTheme.tsx
@@ -10,36 +10,20 @@ export interface DialogTheme {
   };
 }
 
-const baseTheme: DialogTheme = {
-  base: 'justify-center items-center flex pointer-events-none top-0 left-0 w-full h-full fixed will-change-transform will-change-opacity',
-  inner:
-    'flex flex-col box-border outline-0 pointer-events-auto overflow-auto max-w-[80vw] max-h-[80vh]',
-  content: 'p-[20px] flex-auto overflow-auto',
-  footer: 'flex p-[20px] pb-[10px]',
-  header: {
-    base: 'flex justify-between pt-[20px] px-[20px] pb-[10px]',
-    text: 'flex-1 m-0 p-0 inline-flex text-3xl font-bold',
-    closeButton:
-      'p-0 m-0 ml-[15px] opacity-80 h-auto w-auto inline-flex bg-none border-none cursor-pointer items-center text-[16px] focus:outline-hidden'
-  }
-};
-
 export const dialogTheme: DialogTheme = {
-  ...baseTheme,
-  inner: [
-    baseTheme.inner,
-    'bg-panel text-text-primary border border-panel-accent rounded-sm shadow-2xl'
-  ].join(' '),
+  base: 'justify-center items-center flex pointer-events-none top-0 left-0 size-full fixed',
+  inner: `
+      flex flex-col box-border outline-0 pointer-events-auto overflow-auto max-w-[80vw] max-h-[80vh] rounded-(--notifications-details-corner-radius-primary) border backdrop-blur-lg
+      border-stroke-brand-base bg-background-neutral-canvas-base
+    `,
+  content: 'p-4 flex-auto overflow-auto text-content-text-on-color-light-dark',
+  footer: 'flex flex-row-reverse gap-2 p-4',
   header: {
-    ...baseTheme.header,
-    closeButton: [baseTheme.header.closeButton, 'text-text-primary'].join(' ')
+    base: 'flex justify-between p-4',
+    text: 'flex-1 m-0 p-0 inline-flex text-lg leading-6 font-bold text-content-text-on-color-light-dark',
+    closeButton: `
+      p-0 m-0 ml-[15px] size-auto inline-flex bg-none border-none cursor-pointer items-center text-[16px] focus:outline-hidden
+      text-color-content-assets-neutral-base
+    `
   }
 };
-
-export const legacyDialogTheme: DialogTheme = {
-  ...baseTheme,
-  inner: [
-    baseTheme.inner,
-    'bg-[var(--dialog-background)] text-[var(--dialog-color)]'
-  ].join(' ')
-};
diff --git a/src/layers/Dialog/index.ts b/src/layers/Dialog/index.ts
index 8838d014e..48ff70f4a 100644
--- a/src/layers/Dialog/index.ts
+++ b/src/layers/Dialog/index.ts
@@ -1,4 +1,4 @@
 export * from './Dialog';
-export * from './useDialog';
 export * from './DialogHeader';
 export * from './DialogTheme';
+export * from './useDialog';
diff --git a/src/layers/Dialog/useDialog.tsx b/src/layers/Dialog/useDialog.tsx
index 4f26c0f82..6e5fc383d 100644
--- a/src/layers/Dialog/useDialog.tsx
+++ b/src/layers/Dialog/useDialog.tsx
@@ -1,5 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { Dialog, DialogProps } from './Dialog';
+
+import type { DialogProps } from './Dialog';
+import { Dialog } from './Dialog';
 
 type DialogOptions =
   | {
diff --git a/src/layers/Drawer/Drawer.story.tsx b/src/layers/Drawer/Drawer.story.tsx
index 3262b2bfb..3d7028229 100644
--- a/src/layers/Drawer/Drawer.story.tsx
+++ b/src/layers/Drawer/Drawer.story.tsx
@@ -1,7 +1,8 @@
 import React, { Fragment, useState } from 'react';
-import { useDrawer } from './useDrawer';
-import { Drawer } from './Drawer';
+
 import { Button } from '../../elements';
+import { Drawer } from './Drawer';
+import { useDrawer } from './useDrawer';
 
 export default {
   title: 'Components/Layers/Drawer',
diff --git a/src/layers/Drawer/Drawer.tsx b/src/layers/Drawer/Drawer.tsx
index 2977f75a3..e3ad1e223 100644
--- a/src/layers/Drawer/Drawer.tsx
+++ b/src/layers/Drawer/Drawer.tsx
@@ -1,20 +1,25 @@
-import React, { FC, ReactElement, useState } from 'react';
 import FocusTrap from 'focus-trap-react';
-import { useId, CloneElement } from '@/utils';
-import { GlobalOverlay, GlobalOverlayProps } from '@/utils/Overlay';
-import {
-  motion,
+import type {
   MotionNodeAnimationOptions,
   MotionProps,
   TargetAndTransition,
   Transition,
   VariantLabels
 } from 'motion/react';
-import { variants } from './variants';
-import { DrawerHeader, DrawerHeaderProps } from './DrawerHeader';
-import { twMerge } from 'tailwind-merge';
-import { DrawerTheme } from './DrawerTheme';
+import { motion } from 'motion/react';
+import type { FC, ReactElement } from 'react';
+import React from 'react';
+
+import { CloneElement, useId } from '@/utils';
+import { twMerge } from '@/utils';
 import { useComponentTheme } from '@/utils';
+import type { GlobalOverlayProps } from '@/utils/Overlay';
+import { GlobalOverlay } from '@/utils/Overlay';
+
+import type { DrawerHeaderProps } from './DrawerHeader';
+import { DrawerHeader } from './DrawerHeader';
+import type { DrawerTheme } from './DrawerTheme';
+import { variants } from './variants';
 
 export interface DrawerProps
   extends Omit<GlobalOverlayProps, 'children'>,
diff --git a/src/layers/Drawer/DrawerHeader.tsx b/src/layers/Drawer/DrawerHeader.tsx
index d7f7d41c2..c52d779ef 100644
--- a/src/layers/Drawer/DrawerHeader.tsx
+++ b/src/layers/Drawer/DrawerHeader.tsx
@@ -1,7 +1,10 @@
-import React, { FC } from 'react';
-import { twMerge } from 'tailwind-merge';
+import type { FC } from 'react';
+import React from 'react';
+
+import { twMerge } from '@/utils';
 import { useComponentTheme } from '@/utils';
-import { DrawerTheme } from './DrawerTheme';
+
+import type { DrawerTheme } from './DrawerTheme';
 
 export interface DrawerHeaderProps {
   /**
diff --git a/src/layers/Drawer/DrawerTheme.ts b/src/layers/Drawer/DrawerTheme.ts
index 59d408438..87f7898b8 100644
--- a/src/layers/Drawer/DrawerTheme.ts
+++ b/src/layers/Drawer/DrawerTheme.ts
@@ -18,16 +18,16 @@ export interface DrawerTheme {
   };
 }
 
-const baseTheme: DrawerTheme = {
+export const drawerTheme: DrawerTheme = {
   base: 'fixed overflow-y-auto overflow-x-hidden',
   header: {
-    base: 'flex items-center justify-between px-8 py-5 text-3xl font-bold',
+    base: 'flex items-center justify-between px-8 py-5 text-2xl font-bold',
     text: 'flex-1 m-0'
   },
   content: 'px-8 py-5',
   disablePadding: 'p-0',
   closeButton: {
-    base: 'opacity-80 h-auto w-auto min-w-[auto] min-h-[auto] cursor-pointer text-base p-0 border-0 focus:outline-hidden',
+    base: 'opacity-80 h-auto w-auto min-w-[auto] min-h-[auto] cursor-pointer text-sm p-0 border-0 focus:outline-hidden',
     headerless: 'absolute right-5 top-5'
   },
   positions: {
@@ -37,20 +37,3 @@ const baseTheme: DrawerTheme = {
     start: 'h-full inset-y-0 left-0'
   }
 };
-
-export const drawerTheme: DrawerTheme = {
-  ...baseTheme,
-  base: [baseTheme.base, 'bg-panel text-text-primary'].join(' ')
-};
-
-export const legacyDrawerTheme: DrawerTheme = {
-  ...baseTheme,
-  base: [
-    baseTheme.base,
-    'bg-[var(--drawer-background)] text-[var(--drawer-color)]'
-  ].join(' '),
-  closeButton: {
-    ...baseTheme.closeButton,
-    base: [baseTheme.closeButton.base, 'text-[var(--drawer-color)]'].join(' ')
-  }
-};
diff --git a/src/layers/Drawer/index.ts b/src/layers/Drawer/index.ts
index e711cca5e..553135274 100644
--- a/src/layers/Drawer/index.ts
+++ b/src/layers/Drawer/index.ts
@@ -1,4 +1,4 @@
 export * from './Drawer';
-export * from './useDrawer';
 export * from './DrawerHeader';
 export * from './DrawerTheme';
+export * from './useDrawer';
diff --git a/src/layers/Drawer/useDrawer.tsx b/src/layers/Drawer/useDrawer.tsx
index da60c9806..f39229cbc 100644
--- a/src/layers/Drawer/useDrawer.tsx
+++ b/src/layers/Drawer/useDrawer.tsx
@@ -1,5 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { Drawer, DrawerProps } from './Drawer';
+
+import type { DrawerProps } from './Drawer';
+import { Drawer } from './Drawer';
 
 type DrawerOptions =
   | {
diff --git a/src/layers/Menu/Menu.story.tsx b/src/layers/Menu/Menu.story.tsx
index 8de1c8971..eeca949b0 100644
--- a/src/layers/Menu/Menu.story.tsx
+++ b/src/layers/Menu/Menu.story.tsx
@@ -1,10 +1,13 @@
 import React, { Fragment, useRef, useState } from 'react';
-import { Card } from '../../layout/Card';
-import { List, ListItem } from '../../layout/List';
+
+import { Button } from '@/elements';
+import type { NestedMenuRef } from '@/layers';
+import { NestedMenu } from '@/layers';
+import { useMenu } from '@/layers';
+import { Card } from '@/layout';
+import { List, ListItem } from '@/layout';
+
 import { Menu } from './Menu';
-import { NestedMenu, NestedMenuRef } from './NestedMenu';
-import { useMenu } from './useMenu';
-import { Button } from '../../elements/Button';
 
 export default {
   title: 'Components/Layers/Menu',
diff --git a/src/layers/Menu/Menu.tsx b/src/layers/Menu/Menu.tsx
index 16e884327..d5cab8b19 100644
--- a/src/layers/Menu/Menu.tsx
+++ b/src/layers/Menu/Menu.tsx
@@ -1,13 +1,19 @@
-import React, { FC, forwardRef, LegacyRef, useMemo } from 'react';
+import type { MiddlewareState } from '@floating-ui/react';
+import { size } from '@floating-ui/react';
 import FocusTrap from 'focus-trap-react';
-import { MiddlewareState, size } from '@floating-ui/react';
-import { ConnectedOverlay, OverlayEvent } from '@/utils/Overlay';
-import { Modifiers, Placement } from '@/utils/Position';
+import type { MotionNodeAnimationOptions } from 'motion/react';
+import { motion } from 'motion/react';
+import type { FC, LegacyRef } from 'react';
+import React, { forwardRef, useMemo } from 'react';
+
 import { useId } from '@/utils';
-import { motion, MotionNodeAnimationOptions } from 'motion/react';
-import { twMerge } from 'tailwind-merge';
-import { MenuTheme } from './MenuTheme';
+import { twMerge } from '@/utils';
 import { useComponentTheme } from '@/utils';
+import type { OverlayEvent } from '@/utils/Overlay';
+import { ConnectedOverlay } from '@/utils/Overlay';
+import type { Modifiers, Placement } from '@/utils/Position';
+
+import type { MenuTheme } from './MenuTheme';
 
 export interface MenuProps {
   /**
diff --git a/src/layers/Menu/MenuTheme.tsx b/src/layers/Menu/MenuTheme.tsx
index 89e064ecc..a2975c19b 100644
--- a/src/layers/Menu/MenuTheme.tsx
+++ b/src/layers/Menu/MenuTheme.tsx
@@ -3,16 +3,7 @@ export interface MenuTheme {
   inner: string;
 }
 
-const baseTheme: MenuTheme = {
-  base: 'relative min-w-[112px] max-w-[500px] p-px',
-  inner: 'focus:outline-hidden'
-};
-
 export const menuTheme: MenuTheme = {
-  ...baseTheme,
-  inner: [baseTheme.inner, 'text-text-primary bg-panel'].join(' ')
-};
-
-export const legacyMenuTheme: MenuTheme = {
-  ...baseTheme
+  base: 'relative min-w-[112px] max-w-[500px] border border-select-menu-items-color-item-stroke-container-resting rounded-md mt-2 bg-select-menu-items-color-item-background-container-base backdrop-blur-md',
+  inner: 'focus:outline-hidden'
 };
diff --git a/src/layers/Menu/NestedMenu.tsx b/src/layers/Menu/NestedMenu.tsx
index 7eec6aa2f..cd97ba1bc 100644
--- a/src/layers/Menu/NestedMenu.tsx
+++ b/src/layers/Menu/NestedMenu.tsx
@@ -1,3 +1,5 @@
+import classNames from 'classnames';
+import type { MotionNodeAnimationOptions } from 'motion';
 import React, {
   forwardRef,
   Fragment,
@@ -6,11 +8,11 @@ import React, {
   useRef,
   useState
 } from 'react';
-import { OverlayEvent } from '@/utils/Overlay';
-import { Placement } from '@/utils/Position';
+
+import type { OverlayEvent } from '@/utils/Overlay';
+import type { Placement } from '@/utils/Position';
+
 import { Menu } from './Menu';
-import classNames from 'classnames';
-import { MotionNodeAnimationOptions } from 'motion';
 
 export interface NestedMenuRef {
   /**
diff --git a/src/layers/Menu/index.ts b/src/layers/Menu/index.ts
index 58d1bc31e..fc0fdb9fc 100644
--- a/src/layers/Menu/index.ts
+++ b/src/layers/Menu/index.ts
@@ -1,4 +1,4 @@
 export * from './Menu';
-export * from './useMenu';
-export * from './NestedMenu';
 export * from './MenuTheme';
+export * from './NestedMenu';
+export * from './useMenu';
diff --git a/src/layers/Menu/useMenu.tsx b/src/layers/Menu/useMenu.tsx
index 87484c1ee..ea03ca817 100644
--- a/src/layers/Menu/useMenu.tsx
+++ b/src/layers/Menu/useMenu.tsx
@@ -1,5 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Menu, MenuProps } from './Menu';
+
+import type { MenuProps } from './Menu';
+import { Menu } from './Menu';
 
 type MenuOptions =
   | {
diff --git a/src/layers/Notification/Notification.story.tsx b/src/layers/Notification/Notification.story.tsx
index ab664ff47..1f52309ac 100644
--- a/src/layers/Notification/Notification.story.tsx
+++ b/src/layers/Notification/Notification.story.tsx
@@ -1,7 +1,10 @@
-import React, { FC, Fragment } from 'react';
-import { NotificationComponentProps, Notifications } from './Notifications';
-import { NotificationsContext } from './NotificationsContext';
-import { Button } from '../../elements';
+import type { FC } from 'react';
+import React, { Fragment } from 'react';
+
+import { Button } from '@/elements';
+import type { NotificationComponentProps } from '@/layers';
+import { Notifications } from '@/layers';
+import { NotificationsContext } from '@/layers';
 
 export default {
   title: 'Components/Layers/Notification',
@@ -106,21 +109,18 @@ export const Variants = () => (
       }) => (
         <Fragment>
           <Button
-            color="success"
             className="mx-1"
             onClick={() => notifySuccess('Something good happened!')}
           >
             Success
           </Button>
           <Button
-            color="error"
             className="mx-1"
             onClick={() => notifyError('Something bad happened!')}
           >
             Error
           </Button>
           <Button
-            color="warning"
             className="mx-1"
             onClick={() => notifyWarning('Something questionable happened!')}
           >
@@ -180,7 +180,7 @@ export const CustomIcon = () => (
                     viewBox="0 0 19 26"
                     fill="none"
                   >
-                    <g clip-path="url(#clip0_2375_7604)">
+                    <g clipPath="url(#clip0_2375_7604)">
                       <path
                         fillRule="evenodd"
                         clipRule="evenodd"
@@ -257,21 +257,18 @@ export const CustomComponent = () => (
             Custom Default
           </Button>
           <Button
-            color="success"
             className="mx-1"
             onClick={() => notify('Success', { variant: 'success' })}
           >
             Custom Success
           </Button>
           <Button
-            color="warning"
             className="mx-1"
             onClick={() => notify('Warning', { variant: 'warning' })}
           >
             Custom Warning
           </Button>
           <Button
-            color="error"
             className="mx-1"
             onClick={() => notify('Error', { variant: 'error' })}
           >
diff --git a/src/layers/Notification/Notification.tsx b/src/layers/Notification/Notification.tsx
index 6ab075479..777723b15 100644
--- a/src/layers/Notification/Notification.tsx
+++ b/src/layers/Notification/Notification.tsx
@@ -1,10 +1,13 @@
-import React, { FC, ReactNode, useCallback, useEffect, useRef } from 'react';
-import { NotificationOptions } from './NotificationsContext';
 import { motion } from 'motion/react';
-import { twMerge } from 'tailwind-merge';
-import { NotificationTheme } from './NotificationTheme';
+import type { FC, ReactNode } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
+
+import { twMerge } from '@/utils';
 import { useComponentTheme } from '@/utils';
 
+import type { NotificationOptions } from './NotificationsContext';
+import type { NotificationTheme } from './NotificationTheme';
+
 export interface NotificationProps extends NotificationOptions {
   /**
    * Unique identifier for the notification.
diff --git a/src/layers/Notification/NotificationTheme.ts b/src/layers/Notification/NotificationTheme.ts
index aa390fcab..7b1c00230 100644
--- a/src/layers/Notification/NotificationTheme.ts
+++ b/src/layers/Notification/NotificationTheme.ts
@@ -1,26 +1,32 @@
+export interface NotificationVariantTheme {
+  default: {
+    base: string;
+    icon?: string;
+  };
+  success: {
+    base: string;
+    icon?: string;
+  };
+  error: {
+    base: string;
+    icon?: string;
+  };
+  warning: {
+    base: string;
+    icon?: string;
+  };
+  info: {
+    base: string;
+    icon?: string;
+  };
+}
+
 export interface NotificationTheme {
   container: string;
   positions: string;
   notification: {
     base: string;
-    variants: {
-      success: {
-        base: string;
-        icon?: string;
-      };
-      error: {
-        base: string;
-        icon?: string;
-      };
-      warning: {
-        base: string;
-        icon?: string;
-      };
-      info: {
-        base: string;
-        icon?: string;
-      };
-    };
+    variants: NotificationVariantTheme;
     header: string;
     content: string;
     body: string;
@@ -30,87 +36,60 @@ export interface NotificationTheme {
   };
 }
 
-const baseTheme: NotificationTheme = {
+export const notificationTheme: NotificationTheme = {
   container: '',
   positions:
     'fixed z-9998 h-auto -translate-x-2/4 mb-1 px-24 py-0 left-2/4 bottom-0',
   notification: {
-    base: 'flex relative text-base min-w-[400px] rounded-xs mb-2.5 py-2 px-4',
+    base: `
+          flex relative text-sm min-w-[400px] rounded-(--notifications-details-corner-radius-primary)
+          mb-2.5 p-(--notifications-details-vertical-padding-standard-sm) border backdrop-blur-xl transition-colors
+          border-notifications-colors-stroke-neutral-resting hover:border-notifications-colors-stroke-neutral-hover
+          bg-notifications-colors-background-neutral-resting hover:bg-notifications-colors-background-neutral-hover
+        `,
     variants: {
+      default: {
+        base: ''
+      },
       success: {
-        base: 'bg-success-background border border-success',
-        icon: 'text-success h-4 w-4'
+        base: `
+          border-notifications-colors-stroke-success-resting hover:border-notifications-colors-stroke-success-hover
+          bg-notifications-colors-background-success-resting hover:bg-notifications-colors-background-success-hover
+        `,
+        icon: 'text-notifications-colors-assets-success-resting size-(--notifications-details-asset-size-base)'
       },
       error: {
-        base: 'bg-error-background border border-error',
-        icon: 'text-error h-4 w-4'
+        base: `
+          border-notifications-colors-stroke-error-resting hover:border-notifications-colors-stroke-error-hover
+          bg-notifications-colors-background-error-resting hover:bg-notifications-colors-background-error-hover
+        `,
+        icon: 'text-notifications-colors-assets-destructive-resting size-(--notifications-details-asset-size-base)'
       },
       warning: {
-        base: 'bg-warning-background border border-warning',
-        icon: 'text-warning h-4 w-4'
+        base: `
+          border-notifications-colors-stroke-warning-resting hover:border-notifications-colors-stroke-warning-hover
+          bg-notifications-colors-background-warning-resting hover:bg-notifications-colors-background-warning-hover
+        `,
+        icon: 'text-notifications-colors-assets-warning-static size-(--notifications-details-asset-size-base)'
       },
       info: {
-        base: 'bg-info-background border border-info',
-        icon: 'text-info h-4 w-4'
+        base: `
+          border-notifications-colors-stroke-info-resting hover:border-notifications-colors-stroke-info-hover
+          bg-notifications-colors-background-info-resting hover:bg-notifications-colors-background-info-hover
+        `,
+        icon: 'text-notifications-colors-assets-info-resting size-(--notifications-details-asset-size-base)'
       }
     },
     content: 'inline-flex items-start flex-1 flex-col justify-center',
-    header: 'text-base flex gap-2 items-center',
+    header:
+      'text-sm flex gap-(--notifications-details-space-between-standard-sm) items-center text-notifications-colors-text-title-resting',
     closeContainer: 'inline-flex items-center',
-    action: 'ml-auto mr-2 items-center flex',
-    closeButton:
-      'cursor-pointer text-sm font-semibold m-0 border-0 text-text-primary hover:text-text-primary/70',
-    body: 'opacity-70 text-sm mt-1'
-  }
-};
-
-export const notificationTheme: NotificationTheme = {
-  ...baseTheme,
-  notification: {
-    ...baseTheme.notification,
-    base: [
-      baseTheme.notification.base,
-      'bg-panel text-text-primary border-panel-accent border'
-    ].join(' ')
-  }
-};
-
-export const legacyNotificationTheme: NotificationTheme = {
-  ...baseTheme,
-  notification: {
-    ...baseTheme.notification,
-    base: [
-      baseTheme.notification.base,
-      'bg-[var(--notification-background)] border-[var(--notification-border)] text-[var(--notification-color)]'
-    ].join(' '),
-    closeButton: [
-      baseTheme.notification.closeButton,
-      'text-[var(--color-on-notification)]'
-    ].join(' '),
-    body: [
-      baseTheme.notification.body,
-      'text-[var(--color-on-notification)]'
-    ].join(' '),
-    variants: {
-      ...baseTheme.notification.variants,
-      success: {
-        base: [
-          baseTheme.notification.variants.success,
-          'text-[var(--notification-color-success)]'
-        ].join(' ')
-      },
-      error: {
-        base: [
-          baseTheme.notification.variants.error,
-          'text-[var(--notification-color-error)]'
-        ].join(' ')
-      },
-      warning: {
-        base: [
-          baseTheme.notification.variants.error,
-          'text-[var(--notification-color-warning)]'
-        ].join(' ')
-      }
-    }
+    action:
+      'ml-auto mr-(--notifications-details-space-between-standard-sm) items-center flex',
+    closeButton: `
+      size-(--notifications-details-asset-size-compact) cursor-pointer text-xs font-semibold
+      m-0 border-0 text-notifications-colors-assets-normal-resting hover:opacity-70 transition-opacity
+    `,
+    body: 'text-xxs mt-(--notifications-details-space-between-standard-sm) text-notifications-colors-text-normal-resting'
   }
 };
diff --git a/src/layers/Notification/Notifications.tsx b/src/layers/Notification/Notifications.tsx
index d4910ef9b..8e2fcdd29 100644
--- a/src/layers/Notification/Notifications.tsx
+++ b/src/layers/Notification/Notifications.tsx
@@ -1,31 +1,25 @@
-import React, {
-  Fragment,
-  FC,
-  ReactNode,
-  useState,
-  useCallback,
-  useMemo,
-  JSXElementConstructor
-} from 'react';
 import { AnimatePresence, motion } from 'motion/react';
-import { twMerge } from 'tailwind-merge';
+import type { FC, JSXElementConstructor, ReactNode } from 'react';
+import React, { Fragment, useCallback, useMemo, useState } from 'react';
 
-import { Notification } from './Notification';
-import {
-  NotificationOptions,
-  NotificationsContext,
-  NotificationVariants
-} from './NotificationsContext';
-import { NotificationTheme } from './NotificationTheme';
-import { useComponentTheme } from '@/utils';
-import InfoIcon from '@/assets/icons/info.svg?react';
 import CheckCircleIcon from '@/assets/icons/check_circle.svg?react';
-import WarningIcon from '@/assets/icons/warning.svg?react';
 import ErrorCircleIcon from '@/assets/icons/error_circle.svg?react';
+import InfoIcon from '@/assets/icons/info.svg?react';
+import WarningIcon from '@/assets/icons/warning.svg?react';
+import { twMerge } from '@/utils';
+import { useComponentTheme } from '@/utils';
+
+import { Notification } from './Notification';
+import type { NotificationOptions } from './NotificationsContext';
+import { NotificationsContext } from './NotificationsContext';
+import type {
+  NotificationTheme,
+  NotificationVariantTheme
+} from './NotificationTheme';
 
 export interface NotificationComponentProps {
   message: string;
-  variant: NotificationVariants;
+  variant: keyof NotificationVariantTheme;
   onClose?: () => void;
 }
 
@@ -37,10 +31,10 @@ export interface NotificationsProps {
   children?: ReactNode;
   className?: string;
   components?: {
-    [variant in NotificationVariants]?: JSXElementConstructor<NotificationComponentProps>;
+    [variant in keyof NotificationVariantTheme]?: JSXElementConstructor<NotificationComponentProps>;
   };
   icons?: {
-    [variant in NotificationVariants]?:
+    [variant in keyof NotificationVariantTheme]?:
       | string
       | React.JSX.Element
       | React.JSX.Element[];
diff --git a/src/layers/Notification/NotificationsContext.tsx b/src/layers/Notification/NotificationsContext.tsx
index 28b043021..1c86b8303 100644
--- a/src/layers/Notification/NotificationsContext.tsx
+++ b/src/layers/Notification/NotificationsContext.tsx
@@ -1,18 +1,14 @@
-import React, { createContext } from 'react';
+import type React from 'react';
+import { createContext } from 'react';
 
-export type NotificationVariants =
-  | 'default'
-  | 'success'
-  | 'warning'
-  | 'error'
-  | 'info';
+import type { NotificationVariantTheme } from '@/layers';
 
 export interface NotificationOptions {
   title?: string | React.JSX.Element | React.JSX.Element[];
   body?: string | React.JSX.Element | React.JSX.Element[];
   timeout?: number;
   showClose?: boolean;
-  variant?: NotificationVariants;
+  variant?: keyof NotificationVariantTheme;
   className?: string;
   icon?: string | React.JSX.Element | React.JSX.Element[];
   action?: string | React.JSX.Element | React.JSX.Element[];
diff --git a/src/layers/Notification/index.tsx b/src/layers/Notification/index.tsx
index 8f5d3a1a0..a9c6ac1f3 100644
--- a/src/layers/Notification/index.tsx
+++ b/src/layers/Notification/index.tsx
@@ -1,5 +1,5 @@
+export * from './Notification';
 export * from './Notifications';
 export * from './NotificationsContext';
-export * from './useNotification';
-export * from './Notification';
 export * from './NotificationTheme';
+export * from './useNotification';
diff --git a/src/layers/Notification/useNotification.ts b/src/layers/Notification/useNotification.ts
index 28b08f3f8..cfc51a1e3 100644
--- a/src/layers/Notification/useNotification.ts
+++ b/src/layers/Notification/useNotification.ts
@@ -1,4 +1,5 @@
 import { useContext } from 'react';
+
 import { NotificationsContext } from './NotificationsContext';
 
 export const useNotification = () => {
diff --git a/src/layers/Popover/Popover.story.tsx b/src/layers/Popover/Popover.story.tsx
index 27e8c4efc..2f55aa663 100644
--- a/src/layers/Popover/Popover.story.tsx
+++ b/src/layers/Popover/Popover.story.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import { Popover } from './Popover';
+
 import { Button } from '../../elements';
+import { Popover } from './Popover';
 
 export default {
   title: 'Components/Layers/Popover',
diff --git a/src/layers/Popover/Popover.tsx b/src/layers/Popover/Popover.tsx
index d4bb19ff2..b4617087d 100644
--- a/src/layers/Popover/Popover.tsx
+++ b/src/layers/Popover/Popover.tsx
@@ -1,11 +1,15 @@
-import React, { FC } from 'react';
-import { TooltipProps, Tooltip } from '@/layers/Tooltip';
 import FocusTrap from 'focus-trap-react';
+import type { FC } from 'react';
+import React from 'react';
+
+import type { TooltipProps } from '@/layers/Tooltip';
+import { Tooltip } from '@/layers/Tooltip';
 import { useId } from '@/utils';
-import { twMerge } from 'tailwind-merge';
-import { PopoverTheme } from './PopoverTheme';
+import { twMerge } from '@/utils';
 import { useComponentTheme } from '@/utils';
 
+import type { PopoverTheme } from './PopoverTheme';
+
 type FocusTargetValueOrFalse = HTMLElement | SVGElement | string | false;
 
 type FocusTargetOrFalse =
diff --git a/src/layers/Popover/PopoverTheme.ts b/src/layers/Popover/PopoverTheme.ts
index 06436d3b8..903ee0608 100644
--- a/src/layers/Popover/PopoverTheme.ts
+++ b/src/layers/Popover/PopoverTheme.ts
@@ -3,20 +3,7 @@ export interface PopoverTheme {
   disablePadding: string;
 }
 
-const baseTheme: PopoverTheme = {
+export const popoverTheme: PopoverTheme = {
   base: 'whitespace-nowrap text-center will-change-[transform,opacity] p-1.5 rounded-sm',
   disablePadding: 'p-0'
 };
-
-export const popoverTheme: PopoverTheme = {
-  ...baseTheme,
-  base: [baseTheme.base, 'bg-panel text-text-primary'].join(' ')
-};
-
-export const legacyPopoverTheme: PopoverTheme = {
-  ...baseTheme,
-  base: [
-    baseTheme.base,
-    'text-[color:var(--popover-color)] rounded-[var(--popover-border-radius)] pt-[var(--popover-spacing)] pr-[var(--popover-spacing)] pb-[var(--popover-spacing)] pl-[var(--popover-spacing)] bg-[var(--popover-background)]'
-  ].join(' ')
-};
diff --git a/src/layers/Tooltip/Tooltip.story.tsx b/src/layers/Tooltip/Tooltip.story.tsx
index 634433f05..42f069b70 100644
--- a/src/layers/Tooltip/Tooltip.story.tsx
+++ b/src/layers/Tooltip/Tooltip.story.tsx
@@ -1,8 +1,10 @@
 import React from 'react';
-import { Tooltip } from './Tooltip';
+
 import { Button } from '../../elements';
 import { extendComponentTheme } from '../../utils';
-import { tooltipTheme, TooltipTheme } from './TooltipTheme';
+import { Tooltip } from './Tooltip';
+import type { TooltipTheme } from './TooltipTheme';
+import { tooltipTheme } from './TooltipTheme';
 
 export default { title: 'Components/Layers/Tooltip', component: Tooltip };
 
@@ -96,7 +98,7 @@ export const CustomAnimation = () => {
 
 export const CustomTheme = () => {
   const customTheme = extendComponentTheme<TooltipTheme>(tooltipTheme, {
-    base: 'rounded-sm bg-green-800 text-white font-bold p-3 text-base'
+    base: 'rounded-sm bg-green-800 text-white font-bold p-3 text-sm'
   });
 
   return (
diff --git a/src/layers/Tooltip/Tooltip.tsx b/src/layers/Tooltip/Tooltip.tsx
index bc9dc5170..688633981 100644
--- a/src/layers/Tooltip/Tooltip.tsx
+++ b/src/layers/Tooltip/Tooltip.tsx
@@ -1,11 +1,16 @@
-import React, { FC, useState, useRef, useEffect, ReactNode } from 'react';
-import { ConnectedOverlay, TriggerTypes } from '@/utils/Overlay';
-import { Modifiers, Placement, ReferenceObject } from '@/utils/Position';
-import { motion, MotionNodeAnimationOptions } from 'motion/react';
-import { twMerge } from 'tailwind-merge';
-import { useTooltipState } from './useTooltipState';
-import { TooltipTheme } from './TooltipTheme';
+import type { MotionNodeAnimationOptions } from 'motion/react';
+import { motion } from 'motion/react';
+import type { FC, ReactNode } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+
+import { twMerge } from '@/utils';
 import { useComponentTheme } from '@/utils';
+import type { TriggerTypes } from '@/utils/Overlay';
+import { ConnectedOverlay } from '@/utils/Overlay';
+import type { Modifiers, Placement, ReferenceObject } from '@/utils/Position';
+
+import type { TooltipTheme } from './TooltipTheme';
+import { useTooltipState } from './useTooltipState';
 
 export interface TooltipProps {
   /**
diff --git a/src/layers/Tooltip/TooltipTheme.ts b/src/layers/Tooltip/TooltipTheme.ts
index 1341b79fe..7c91650dc 100644
--- a/src/layers/Tooltip/TooltipTheme.ts
+++ b/src/layers/Tooltip/TooltipTheme.ts
@@ -3,20 +3,7 @@ export interface TooltipTheme {
   disablePointer: string;
 }
 
-const baseTheme: TooltipTheme = {
-  base: 'whitespace-nowrap text-center will-change-[transform,opacity] p-1.5 rounded-sm',
-  disablePointer: 'pointer-events-none'
-};
-
 export const tooltipTheme: TooltipTheme = {
-  ...baseTheme,
-  base: [baseTheme.base, 'bg-panel-accent text-text-primary'].join(' ')
-};
-
-export const legacyTooltipTheme: TooltipTheme = {
-  ...baseTheme,
-  base: [
-    baseTheme.base,
-    'text-[color:var(--tooltip-color)] rounded-[var(--tooltip-border-radius)] border-[length:var(--tooltip-border)] pt-[var(--tooltip-spacing)] pr-[var(--tooltip-spacing)] pb-[var(--tooltip-spacing)] pl-[var(--tooltip-spacing)] bg-[var(--tooltip-background)]'
-  ].join(' ')
+  base: 'text-tooltip-colors-neutral-text-default bg-tooltip-colors-neutral-background-default whitespace-nowrap text-center will-change-[transform,opacity] p-1.5 rounded-sm',
+  disablePointer: 'pointer-events-none'
 };
diff --git a/src/layers/index.ts b/src/layers/index.ts
index abf12b6c6..7c43b837f 100644
--- a/src/layers/index.ts
+++ b/src/layers/index.ts
@@ -1,10 +1,10 @@
-export * from './Tooltip';
-export * from './Popover';
+export * from './Backdrop';
+export * from './Callout';
+export * from './ConfirmDialog';
+export * from './ContextMenu';
 export * from './Dialog';
 export * from './Drawer';
 export * from './Menu';
-export * from './ContextMenu';
 export * from './Notification';
-export * from './Backdrop';
-export * from './Callout';
-export * from './ConfirmDialog';
+export * from './Popover';
+export * from './Tooltip';
diff --git a/src/layout/Block/Block.story.tsx b/src/layout/Block/Block.story.tsx
index f9b0c73f6..f32fa4427 100644
--- a/src/layout/Block/Block.story.tsx
+++ b/src/layout/Block/Block.story.tsx
@@ -1,6 +1,7 @@
-import { Block } from './Block';
 import React from 'react';
 
+import { Block } from './Block';
+
 export default {
   title: 'Components/Layout/Block',
   component: Block
diff --git a/src/layout/Block/Block.tsx b/src/layout/Block/Block.tsx
index 71303321d..d24ccc30f 100644
--- a/src/layout/Block/Block.tsx
+++ b/src/layout/Block/Block.tsx
@@ -1,8 +1,11 @@
-import React, { FC } from 'react';
-import { twMerge } from 'tailwind-merge';
-import { BlockTheme } from './BlockTheme';
+import type { FC } from 'react';
+import React from 'react';
+
+import { twMerge } from '@/utils';
 import { useComponentTheme } from '@/utils';
 
+import type { BlockTheme } from './BlockTheme';
+
 export interface BlockProps extends React.HTMLAttributes<HTMLElement> {
   /**
    * Label to display on the block.
diff --git a/src/layout/Block/BlockTheme.ts b/src/layout/Block/BlockTheme.ts
index 141b27a7a..3fb2ca1db 100644
--- a/src/layout/Block/BlockTheme.ts
+++ b/src/layout/Block/BlockTheme.ts
@@ -14,43 +14,18 @@ export interface BlockTheme {
   };
 }
 
-const baseTheme: BlockTheme = {
-  base: 'mb-2.5',
-  disableMargin: 'mb-0',
-  label: 'text-sm',
+export const blockTheme: BlockTheme = {
+  base: '',
+  disableMargin: 'm-0',
+  label: 'text-xs leading-none font-semibold text-content-text-neutral-3',
   centerAlign: 'items-center',
   endAlign: 'items-end',
   horizontal: {
     base: 'flex flex-row items-baseline',
-    label: 'mr-0.5 whitespace-nowrap'
+    label: 'mr-2 whitespace-nowrap'
   },
   vertical: {
     base: 'block',
-    label: 'block mb-0.5'
-  }
-};
-
-export const blockTheme: BlockTheme = {
-  ...baseTheme
-};
-
-export const legacyBlockTheme: BlockTheme = {
-  ...baseTheme,
-  base: 'mb-[var(--block-spacing)]',
-  label: [
-    baseTheme.label,
-    '[font-size:_var(--block-label-size)] [font-weight:_var(--block-label-weight)]'
-  ].join(' '),
-  horizontal: {
-    ...baseTheme.horizontal,
-    label: [baseTheme.horizontal.label, 'mr-[var(--block-label-spacing)]'].join(
-      ' '
-    )
-  },
-  vertical: {
-    ...baseTheme.vertical,
-    label: [baseTheme.vertical.label, 'mb-[var(--block-label-spacing)]'].join(
-      ' '
-    )
+    label: 'block mb-2'
   }
 };
diff --git a/src/layout/Breadcrumbs/BreadcrumbItem.tsx b/src/layout/Breadcrumbs/BreadcrumbItem.tsx
index 83daab942..512f27f51 100644
--- a/src/layout/Breadcrumbs/BreadcrumbItem.tsx
+++ b/src/layout/Breadcrumbs/BreadcrumbItem.tsx
@@ -1,7 +1,13 @@
-import React, { FC } from 'react';
+import type { FC, LiHTMLAttributes } from 'react';
+import React from 'react';
+
 import { cn } from '@/utils';
 
-export const BreadcrumbItem: FC<React.LiHTMLAttributes<HTMLLIElement>> = ({
+interface BreadcrumbItemProps extends LiHTMLAttributes<HTMLLIElement> {
+  className?: string;
+}
+
+export const BreadcrumbItem: FC<BreadcrumbItemProps> = ({
   className,
   ...rest
 }) => <li className={cn('flex gap-2 items-center', className)} {...rest} />;
diff --git a/src/layout/Breadcrumbs/BreadcrumbLink.tsx b/src/layout/Breadcrumbs/BreadcrumbLink.tsx
index c03a53bdc..98cb558cf 100644
--- a/src/layout/Breadcrumbs/BreadcrumbLink.tsx
+++ b/src/layout/Breadcrumbs/BreadcrumbLink.tsx
@@ -1,6 +1,9 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
+
 import { cn, useComponentTheme } from '@/utils';
-import { BreadcrumbsTheme } from './BreadcrumbsTheme';
+
+import type { BreadcrumbsTheme } from './BreadcrumbsTheme';
 
 export interface BreadcrumbLinkProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
diff --git a/src/layout/Breadcrumbs/BreadcrumbList.tsx b/src/layout/Breadcrumbs/BreadcrumbList.tsx
index a41cf5349..ce10ed90c 100644
--- a/src/layout/Breadcrumbs/BreadcrumbList.tsx
+++ b/src/layout/Breadcrumbs/BreadcrumbList.tsx
@@ -1,6 +1,9 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
+
 import { cn, useComponentTheme } from '@/utils';
-import { BreadcrumbsTheme } from './BreadcrumbsTheme';
+
+import type { BreadcrumbsTheme } from './BreadcrumbsTheme';
 
 export interface BreadcrumbListProps
   extends React.OlHTMLAttributes<HTMLOListElement> {
diff --git a/src/layout/Breadcrumbs/BreadcrumbPage.tsx b/src/layout/Breadcrumbs/BreadcrumbPage.tsx
index 8dfeef259..1a3dada10 100644
--- a/src/layout/Breadcrumbs/BreadcrumbPage.tsx
+++ b/src/layout/Breadcrumbs/BreadcrumbPage.tsx
@@ -1,6 +1,9 @@
+import type { FC } from 'react';
+import React from 'react';
+
 import { cn, useComponentTheme } from '@/utils';
-import React, { FC } from 'react';
-import { BreadcrumbsTheme } from './BreadcrumbsTheme';
+
+import type { BreadcrumbsTheme } from './BreadcrumbsTheme';
 
 export interface BreadcrumbPageProps
   extends React.HTMLAttributes<HTMLSpanElement> {
diff --git a/src/layout/Breadcrumbs/BreadcrumbSeparator.tsx b/src/layout/Breadcrumbs/BreadcrumbSeparator.tsx
index bc36b5a02..fbeea06ed 100644
--- a/src/layout/Breadcrumbs/BreadcrumbSeparator.tsx
+++ b/src/layout/Breadcrumbs/BreadcrumbSeparator.tsx
@@ -1,7 +1,10 @@
+import type { FC } from 'react';
+import React from 'react';
+
 import { Arrow } from '@/elements';
 import { cn, useComponentTheme } from '@/utils';
-import React, { FC } from 'react';
-import { BreadcrumbsTheme } from './BreadcrumbsTheme';
+
+import type { BreadcrumbsTheme } from './BreadcrumbsTheme';
 
 export interface BreadcrumbSeparatorProps
   extends React.LiHTMLAttributes<HTMLLIElement> {
diff --git a/src/layout/Breadcrumbs/Breadcrumbs.story.tsx b/src/layout/Breadcrumbs/Breadcrumbs.story.tsx
index 9ca275305..e391bf432 100644
--- a/src/layout/Breadcrumbs/Breadcrumbs.story.tsx
+++ b/src/layout/Breadcrumbs/Breadcrumbs.story.tsx
@@ -3,8 +3,8 @@ import {
   BreadcrumbLink,
   BreadcrumbList,
   BreadcrumbPage,
-  BreadcrumbSeparator,
-  Breadcrumbs
+  Breadcrumbs,
+  BreadcrumbSeparator
 } from './';
 
 export default {
diff --git a/src/layout/Breadcrumbs/Breadcrumbs.tsx b/src/layout/Breadcrumbs/Breadcrumbs.tsx
index efb566657..dbb607420 100644
--- a/src/layout/Breadcrumbs/Breadcrumbs.tsx
+++ b/src/layout/Breadcrumbs/Breadcrumbs.tsx
@@ -1,6 +1,9 @@
+import type { FC } from 'react';
+import React from 'react';
+
 import { cn, useComponentTheme } from '@/utils';
-import React, { FC } from 'react';
-import { BreadcrumbsTheme } from './BreadcrumbsTheme';
+
+import type { BreadcrumbsTheme } from './BreadcrumbsTheme';
 
 export interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement> {
   theme?: BreadcrumbsTheme;
diff --git a/src/layout/Breadcrumbs/BreadcrumbsTheme.ts b/src/layout/Breadcrumbs/BreadcrumbsTheme.ts
index deb4144cc..993262ba7 100644
--- a/src/layout/Breadcrumbs/BreadcrumbsTheme.ts
+++ b/src/layout/Breadcrumbs/BreadcrumbsTheme.ts
@@ -7,11 +7,10 @@ export interface BreadcrumbsTheme {
 }
 
 export const breadcrumbsTheme: BreadcrumbsTheme = {
-  base: '',
-  separator: '[&>svg]:size-3.5',
-  list: 'flex gap-2 items-center',
-  link: 'hover:text-text-primary text-text-secondary transition-colors',
-  activePage: 'text-primary pointer-events-none'
+  base: 'text-breadcrumbs-colors-primary-text-resting',
+  separator: '[&>svg]:size-(--breadcrumbs-details-asset-size-sm)',
+  list: 'flex gap-(--breadcrumbs-details-space-between-lg) items-center',
+  link: 'hover:text-breadcrumbs-colors-primary-text-hover transition-colors',
+  activePage:
+    'text-breadcrumbs-colors-primary-text-selected pointer-events-none'
 };
-
-export const legacyBreadcrumbTheme: BreadcrumbsTheme = breadcrumbsTheme;
diff --git a/src/layout/Breadcrumbs/index.ts b/src/layout/Breadcrumbs/index.ts
index ec61eadbe..793b58117 100644
--- a/src/layout/Breadcrumbs/index.ts
+++ b/src/layout/Breadcrumbs/index.ts
@@ -1,7 +1,7 @@
-export * from './Breadcrumbs';
-export * from './BreadcrumbsTheme';
 export * from './BreadcrumbItem';
 export * from './BreadcrumbLink';
 export * from './BreadcrumbList';
-export * from './BreadcrumbSeparator';
 export * from './BreadcrumbPage';
+export * from './Breadcrumbs';
+export * from './BreadcrumbSeparator';
+export * from './BreadcrumbsTheme';
diff --git a/src/layout/Card/Card.story.tsx b/src/layout/Card/Card.story.tsx
index fada8431e..b64d219fd 100644
--- a/src/layout/Card/Card.story.tsx
+++ b/src/layout/Card/Card.story.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { Card } from './Card';
 
 export default {
diff --git a/src/layout/Card/Card.tsx b/src/layout/Card/Card.tsx
index cfcae553d..7a21a3c64 100644
--- a/src/layout/Card/Card.tsx
+++ b/src/layout/Card/Card.tsx
@@ -1,8 +1,11 @@
-import React, { forwardRef, LegacyRef, FC, PropsWithChildren } from 'react';
-import { twMerge } from 'tailwind-merge';
-import { CardTheme } from './CardTheme';
+import type { FC, LegacyRef, PropsWithChildren } from 'react';
+import React, { forwardRef } from 'react';
+
+import { twMerge } from '@/utils';
 import { useComponentTheme } from '@/utils';
 
+import type { CardTheme } from './CardTheme';
+
 export interface CardProps extends React.DOMAttributes<any> {
   /**
    * Disable the padding of the card.
diff --git a/src/layout/Card/CardTheme.tsx b/src/layout/Card/CardTheme.tsx
index 340f44410..5b59d9b73 100644
--- a/src/layout/Card/CardTheme.tsx
+++ b/src/layout/Card/CardTheme.tsx
@@ -6,27 +6,10 @@ export interface CardTheme {
   content: string;
 }
 
-const baseTheme: CardTheme = {
-  base: 'relative flex flex-col p-7 rounded-xs',
+export const cardTheme: CardTheme = {
+  base: 'relative flex flex-col p-1.5 rounded-md bg-background-neutral-inverse-raised-4 border border-stroke-neutral-3',
   disablePadding: 'p-0',
   header: 'flex items-center',
-  headerText: 'text-sm font-medium mt-0 mb-1',
+  headerText: 'text-xs font-medium mt-0 mb-1',
   content: 'flex-1'
 };
-
-export const cardTheme: CardTheme = {
-  ...baseTheme,
-  base: [
-    baseTheme.base,
-    'bg-panel border border-panel-accent text-text-primary'
-  ].join(' ')
-};
-
-export const legacyCardTheme: CardTheme = {
-  ...baseTheme,
-  base: [
-    baseTheme.base,
-    '[padding:_var(--card-spacing)] bg-[var(--card-background)] text-[var(--card-color)] [border:_var(--card-border)] rounded-[var(--card-border-radius)]'
-  ].join(' '),
-  headerText: [baseTheme.headerText, 'mb-[var(--spacing-md)]'].join(' ')
-};
diff --git a/src/layout/Card/index.ts b/src/layout/Card/index.ts
index e44e0576e..ba6664fb8 100644
--- a/src/layout/Card/index.ts
+++ b/src/layout/Card/index.ts
@@ -1,2 +1,2 @@
-export * from './CardTheme';
 export * from './Card';
+export * from './CardTheme';
diff --git a/src/layout/Collapse/Collapse.story.tsx b/src/layout/Collapse/Collapse.story.tsx
index eee02a895..2b9f2e40b 100644
--- a/src/layout/Collapse/Collapse.story.tsx
+++ b/src/layout/Collapse/Collapse.story.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
-import { Collapse } from './Collapse';
+
 import { Button } from '../../elements';
+import { Collapse } from './Collapse';
 
 export default {
   title: 'Components/Layout/Collapse',
diff --git a/src/layout/Collapse/Collapse.tsx b/src/layout/Collapse/Collapse.tsx
index 101458a08..18cb20e8b 100644
--- a/src/layout/Collapse/Collapse.tsx
+++ b/src/layout/Collapse/Collapse.tsx
@@ -1,12 +1,12 @@
-import React, { FC } from 'react';
-import {
-  motion,
-  AnimatePresence,
-  MotionNodeAnimationOptions
-} from 'motion/react';
-import { CollapseTheme } from './CollapseTheme';
+import type { MotionNodeAnimationOptions } from 'motion/react';
+import { AnimatePresence, motion } from 'motion/react';
+import type { FC } from 'react';
+import React from 'react';
+
 import { useComponentTheme } from '@/utils';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@/utils';
+
+import type { CollapseTheme } from './CollapseTheme';
 
 const VARIANTS = {
   open: { opacity: 1, height: 'auto' },
diff --git a/src/layout/Collapse/CollapseTheme.ts b/src/layout/Collapse/CollapseTheme.ts
index 22eb41112..898bfb3ef 100644
--- a/src/layout/Collapse/CollapseTheme.ts
+++ b/src/layout/Collapse/CollapseTheme.ts
@@ -2,14 +2,6 @@ export interface CollapseTheme {
   base: string;
 }
 
-const baseTheme: CollapseTheme = {
-  base: 'will-change-[height,opacity] overflow-hidden'
-};
-
 export const collapseTheme: CollapseTheme = {
-  ...baseTheme
-};
-
-export const legacyCollapseTheme: CollapseTheme = {
-  ...baseTheme
+  base: 'will-change-[height,opacity] overflow-hidden'
 };
diff --git a/src/layout/Divider/Divider.story.tsx b/src/layout/Divider/Divider.story.tsx
index f5958a031..cc7c591aa 100644
--- a/src/layout/Divider/Divider.story.tsx
+++ b/src/layout/Divider/Divider.story.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { Divider } from './Divider';
 
 export default {
diff --git a/src/layout/Divider/Divider.tsx b/src/layout/Divider/Divider.tsx
index 7cea7ccff..27a6d1b32 100644
--- a/src/layout/Divider/Divider.tsx
+++ b/src/layout/Divider/Divider.tsx
@@ -1,7 +1,14 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
+
 import { useComponentTheme } from '@/utils';
-import { twMerge } from 'tailwind-merge';
-import { DividerTheme } from './DividerTheme';
+import { twMerge } from '@/utils';
+
+import type {
+  DividerOrientationTheme,
+  DividerTheme,
+  DividerVariantTheme
+} from './DividerTheme';
 
 export interface DividerProps {
   /**
@@ -18,7 +25,7 @@ export interface DividerProps {
   /**
    * Orientation of the divider.
    */
-  orientation?: 'horizontal' | 'vertical';
+  orientation?: keyof DividerOrientationTheme;
 
   /**
    * Additional style attributes. Recommend to use css classes over this.
@@ -33,7 +40,7 @@ export interface DividerProps {
   /**
    * Variant of the divider.
    */
-  variant?: 'primary' | 'secondary';
+  variant?: keyof DividerVariantTheme;
 }
 
 export const Divider: FC<DividerProps> = ({
diff --git a/src/layout/Divider/DividerTheme.ts b/src/layout/Divider/DividerTheme.ts
index d9bc2f668..b829c25be 100644
--- a/src/layout/Divider/DividerTheme.ts
+++ b/src/layout/Divider/DividerTheme.ts
@@ -1,44 +1,30 @@
+export interface DividerOrientationTheme {
+  vertical?: string;
+  horizontal?: string;
+}
+
+export interface DividerVariantTheme {
+  primary?: string;
+  secondary?: string;
+  [key: string]: string;
+}
+
 export interface DividerTheme {
   base?: string;
-  orientation?: {
-    vertical?: string;
-    horizontal?: string;
-  };
-  variant?: {
-    primary?: string;
-    secondary?: string;
-  };
+  orientation?: DividerOrientationTheme;
+  variant?: DividerVariantTheme;
   disableMargins?: string;
 }
 
-const baseTheme: DividerTheme = {
+export const dividerTheme: DividerTheme = {
   base: 'border-none',
   orientation: {
     horizontal: 'h-px w-full my-2.5',
     vertical: 'w-px h-full mx-2.5'
   },
   variant: {
-    primary: 'bg-surface',
+    primary: 'bg-stroke-neutral-5',
     secondary: 'bg-linear-to-r from-transparent to-transparent via-blue-500'
   },
   disableMargins: 'my-0 mx-0'
 };
-
-export const dividerTheme = {
-  ...baseTheme
-};
-
-export const legacyDividerTheme = {
-  ...baseTheme,
-  base: [baseTheme.base, 'bg-[var(--divider-background)]'].join(' '),
-  orientation: {
-    horizontal: [
-      baseTheme.orientation.horizontal,
-      'my-[var(--divider-spacing)]'
-    ].join(' '),
-    vertical: [
-      baseTheme.orientation.vertical,
-      ' mx-[var(--divider-spacing)]'
-    ].join(' ')
-  }
-};
diff --git a/src/layout/List/List.tsx b/src/layout/List/List.tsx
index 203a67fb6..53c10114f 100644
--- a/src/layout/List/List.tsx
+++ b/src/layout/List/List.tsx
@@ -1,7 +1,10 @@
-import React, { FC, forwardRef, InputHTMLAttributes, LegacyRef } from 'react';
-import { twMerge } from 'tailwind-merge';
+import type { FC, InputHTMLAttributes, LegacyRef } from 'react';
+import React, { forwardRef } from 'react';
+
+import { twMerge } from '@/utils';
 import { useComponentTheme } from '@/utils';
-import { ListTheme } from './ListTheme';
+
+import type { ListTheme } from './ListTheme';
 
 export type ListProps = InputHTMLAttributes<HTMLDivElement> & {
   /**
diff --git a/src/layout/List/ListHeader/ListHeader.tsx b/src/layout/List/ListHeader/ListHeader.tsx
index d687012ac..cca0c25df 100644
--- a/src/layout/List/ListHeader/ListHeader.tsx
+++ b/src/layout/List/ListHeader/ListHeader.tsx
@@ -1,8 +1,10 @@
-import React, { FC, InputHTMLAttributes } from 'react';
-import { Sub } from '@/typography';
-import { ListTheme } from '@/layout/List/ListTheme';
+import type { FC, InputHTMLAttributes } from 'react';
+import React from 'react';
+
+import type { ListTheme } from '@/layout/List/ListTheme';
+import { Typography } from '@/typography';
 import { useComponentTheme } from '@/utils';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@/utils';
 
 export type ListHeaderProps = InputHTMLAttributes<HTMLDivElement> & {
   /**
@@ -19,8 +21,13 @@ export const ListHeader: FC<ListHeaderProps> = ({
 }) => {
   const theme: ListTheme = useComponentTheme('list', customTheme);
   return (
-    <Sub {...(rest as any)} className={twMerge(className, theme.header)}>
+    <Typography
+      variant="button"
+      size="small"
+      {...(rest as any)}
+      className={twMerge(className, theme.header)}
+    >
       {children}
-    </Sub>
+    </Typography>
   );
 };
diff --git a/src/layout/List/ListItem/ListItem.tsx b/src/layout/List/ListItem/ListItem.tsx
index 25b0d7256..57e1512d6 100644
--- a/src/layout/List/ListItem/ListItem.tsx
+++ b/src/layout/List/ListItem/ListItem.tsx
@@ -1,5 +1,7 @@
-import React, { FC, InputHTMLAttributes, LegacyRef, forwardRef } from 'react';
-import { ListTheme } from '@/layout/List/ListTheme';
+import type { FC, InputHTMLAttributes, LegacyRef } from 'react';
+import React, { forwardRef } from 'react';
+
+import type { ListTheme } from '@/layout/List/ListTheme';
 import { cn, useComponentTheme } from '@/utils';
 
 export interface ListItemProps extends InputHTMLAttributes<HTMLDivElement> {
diff --git a/src/layout/List/ListTheme.ts b/src/layout/List/ListTheme.ts
index 526f503a8..4c7168162 100644
--- a/src/layout/List/ListTheme.ts
+++ b/src/layout/List/ListTheme.ts
@@ -24,19 +24,22 @@ export interface ListTheme {
   };
 }
 
-const baseTheme: ListTheme = {
-  base: 'flex flex-col',
-  header: 'pl-2 pr-2',
+export const listTheme = {
+  base: 'flex flex-col gap-1 p-(--select-menu-items-details-horizontal-padding-container)',
+  header:
+    'px-1 py-2 border rounded-md border-select-menu-items-color-item-stroke-header-resting text-select-menu-items-color-item-text-header-resting bg-select-menu-items-color-item-background-header-resting text-xs font-semibold',
   listItem: {
-    base: 'items-center flex p-2.5 relative rounded-none',
-    disabled: 'cursor-not-allowed pointer-events-none',
-    active: '',
+    base: 'items-center flex relative rounded-none flex-1 px-3 py-2.5 whitespace-break-spaces break-words border border-select-menu-items-color-item-stroke-row-resting rounded-md text-xs outline-none',
+    disabled:
+      'cursor-not-allowed opacity-40 hover:border-select-menu-items-color-item-stroke-row-resting hover:bg-select-menu-items-color-item-stroke-row-resting',
+    active:
+      'border-select-menu-items-color-item-stroke-row-selected bg-select-menu-items-color-item-background-row-selected hover:border-select-menu-items-color-item-stroke-row-selected hover:bg-select-menu-items-color-item-background-row-selected',
     clickable:
-      'cursor-pointer transition-color duration-300 ease-linear transition-bg duration-300 ease-linear hover:color-inherit hover:bg-transparent',
+      'cursor-pointer hover:border-select-menu-items-color-item-stroke-row-hover hover:bg-select-menu-items-color-item-background-row-hover focus-visible:border-select-menu-items-color-item-stroke-row-hover focus-visible:bg-select-menu-items-color-item-background-row-hover',
     disablePadding: 'p-0',
-    disableGutters: 'pl-0 pr-0',
+    disableGutters: 'px-0',
     dense: {
-      base: 'p-1',
+      base: 'px-1',
       content: '',
       startAdornment: 'pr-[calc(5/2)]',
       endAdornment: 'pl-[calc(5/2)]'
@@ -50,75 +53,3 @@ const baseTheme: ListTheme = {
     content: 'overflow-wrap break-word word-wrap break-all flex-1'
   }
 };
-
-export const listTheme = {
-  ...baseTheme,
-  base: [baseTheme.base, 'text-text-primary'].join(' '),
-  header: [baseTheme.header, 'text-text-primary'].join(' '),
-  listItem: {
-    ...baseTheme.listItem,
-    base: [
-      baseTheme.listItem.base,
-      'hover:bg-panel-accent hover:text-mystic light:hover:bg-vulcan/5 light:hover:text-text-secondary [&:has(h3)]:hover:bg-transparent'
-    ].join(' '),
-    active: [
-      baseTheme.listItem.active,
-      'text-primary-active hover:text-mystic'
-    ].join(' '),
-    disabled: [
-      baseTheme.listItem.disabled,
-      'opacity-40 text-text-secondary'
-    ].join(' ')
-  }
-};
-
-export const legacyListTheme = {
-  ...baseTheme,
-  base: [baseTheme.base, 'text-[var(--list-item-color)]'].join(' '),
-  header: [
-    baseTheme.header,
-    'pl-[var(--spacing-md)] pr-[var(--spacing-md)]'
-  ].join(' '),
-
-  listItem: {
-    ...baseTheme.listItem,
-    base: [
-      baseTheme.listItem.base,
-      'p-[var(--list-item-spacing)] text-[var(--list-item-color)] rounded-[var(--list-item-border-radius)]'
-    ].join(' '),
-    clickable: [
-      baseTheme.listItem.clickable,
-      'hover:text-[var(--list-item-color-active)] hover:bg-[var(--list-item-background-active)]'
-    ].join(' '),
-    dense: {
-      ...baseTheme.listItem.dense,
-      base: [
-        baseTheme.listItem.dense.base,
-        '[padding:_var(--list-item-dense-spacing)]'
-      ].join(' '),
-      startAdornment: [
-        baseTheme.listItem.dense.startAdornment,
-        '[padding-right:_calc(var(--spacing-md)_/_2)]'
-      ].join(' '),
-      endAdornment: [
-        baseTheme.listItem.dense.endAdornment,
-        '[padding-left:_calc(var(--spacing-md)_/_2)]'
-      ].join(' ')
-    },
-    adornment: {
-      ...baseTheme.listItem.adornment,
-      start: [
-        baseTheme.listItem.adornment.start,
-        '[padding-right:_calc(var(--spacing-sm)_/_2)]'
-      ].join(' '),
-      end: [
-        baseTheme.listItem.adornment.start,
-        '[padding-left:_calc(var(--spacing-sm)_/_2)]'
-      ].join(' '),
-      svg: [
-        baseTheme.listItem.adornment.svg,
-        'fill:[var(--list-item-adornment-fill)]'
-      ].join(' ')
-    }
-  }
-};
diff --git a/src/layout/List/index.ts b/src/layout/List/index.ts
index 1a123207a..ba517f0f1 100644
--- a/src/layout/List/index.ts
+++ b/src/layout/List/index.ts
@@ -1,4 +1,4 @@
 export * from './List';
-export * from './ListItem';
 export * from './ListHeader';
+export * from './ListItem';
 export * from './ListTheme';
diff --git a/src/layout/Motion/Motion.story.tsx b/src/layout/Motion/Motion.story.tsx
index 05c8e5f35..04e958d3f 100644
--- a/src/layout/Motion/Motion.story.tsx
+++ b/src/layout/Motion/Motion.story.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+
 import { MotionGroup } from './MotionGroup';
 import { MotionItem } from './MotionItem';
 
diff --git a/src/layout/Motion/MotionGroup.tsx b/src/layout/Motion/MotionGroup.tsx
index 459ee5ee6..0fa370aa0 100644
--- a/src/layout/Motion/MotionGroup.tsx
+++ b/src/layout/Motion/MotionGroup.tsx
@@ -1,5 +1,7 @@
-import React, { FC, ReactNode } from 'react';
-import { HTMLMotionProps, motion } from 'motion/react';
+import type { HTMLMotionProps } from 'motion/react';
+import { motion } from 'motion/react';
+import type { FC, ReactNode } from 'react';
+import React from 'react';
 
 export const groupVariants = {
   initial: {
diff --git a/src/layout/Motion/MotionItem.tsx b/src/layout/Motion/MotionItem.tsx
index 3b4095455..d214dc010 100644
--- a/src/layout/Motion/MotionItem.tsx
+++ b/src/layout/Motion/MotionItem.tsx
@@ -1,5 +1,7 @@
-import React, { FC, ReactNode } from 'react';
-import { HTMLMotionProps, motion } from 'motion/react';
+import type { HTMLMotionProps } from 'motion/react';
+import { motion } from 'motion/react';
+import type { FC, ReactNode } from 'react';
+import React from 'react';
 
 export const verticalVariant = {
   initial: {
diff --git a/src/layout/Stack/Stack.story.tsx b/src/layout/Stack/Stack.story.tsx
index b1611f288..aadc47769 100644
--- a/src/layout/Stack/Stack.story.tsx
+++ b/src/layout/Stack/Stack.story.tsx
@@ -1,6 +1,7 @@
-import { Stack } from './Stack';
 import React from 'react';
 
+import { Stack } from './Stack';
+
 export default {
   title: 'Components/Layout/Stack',
   components: Stack
diff --git a/src/layout/Stack/Stack.tsx b/src/layout/Stack/Stack.tsx
index 4952ac9e2..b86fb5b2c 100644
--- a/src/layout/Stack/Stack.tsx
+++ b/src/layout/Stack/Stack.tsx
@@ -1,7 +1,10 @@
-import React, { FC, forwardRef, HTMLAttributes, LegacyRef } from 'react';
+import type { FC, HTMLAttributes, LegacyRef } from 'react';
+import React, { forwardRef } from 'react';
+
 import { useComponentTheme } from '@/utils';
-import { twMerge } from 'tailwind-merge';
-import { StackTheme } from './StackTheme';
+import { twMerge } from '@/utils';
+
+import type { StackTheme } from './StackTheme';
 
 export interface StackProps extends HTMLAttributes<HTMLDivElement> {
   /**
diff --git a/src/layout/Stack/StackTheme.ts b/src/layout/Stack/StackTheme.ts
index e5c715c8f..20cc64ba7 100644
--- a/src/layout/Stack/StackTheme.ts
+++ b/src/layout/Stack/StackTheme.ts
@@ -22,7 +22,7 @@ export interface StackTheme {
   };
 }
 
-const baseTheme: StackTheme = {
+export const stackTheme: StackTheme = {
   base: 'flex items-center gap-2.5',
   dense: 'gap-1',
   inline: 'inline-flex',
@@ -45,14 +45,3 @@ const baseTheme: StackTheme = {
     spaceBetween: 'justify-between'
   }
 };
-
-export const stackTheme = {
-  ...baseTheme,
-  base: [baseTheme.base, 'text-text-primary'].join(' ')
-};
-
-export const legacyStackTheme = {
-  ...baseTheme,
-  base: [baseTheme.base, 'gap-[var(--stack-gap)]'].join(' '),
-  dense: [baseTheme.dense, 'gap-[var(--stack-dense-gap)]'].join(' ')
-};
diff --git a/src/layout/Stepper/Step.tsx b/src/layout/Stepper/Step.tsx
index 1bbe2501f..c25c4978d 100644
--- a/src/layout/Stepper/Step.tsx
+++ b/src/layout/Stepper/Step.tsx
@@ -1,4 +1,5 @@
-import React, { FC, PropsWithChildren } from 'react';
+import type { FC, PropsWithChildren } from 'react';
+import React from 'react';
 
 export interface StepProps extends PropsWithChildren {
   /**
diff --git a/src/layout/Stepper/Stepper.story.tsx b/src/layout/Stepper/Stepper.story.tsx
index 466582d40..e0684b7c3 100644
--- a/src/layout/Stepper/Stepper.story.tsx
+++ b/src/layout/Stepper/Stepper.story.tsx
@@ -1,4 +1,5 @@
-import { Stepper } from './Stepper';
+import { Stepper } from '@/layout';
+
 import { Step } from './Step';
 
 export default { title: 'Components/Layout/Stepper', component: Stepper };
@@ -7,12 +8,12 @@ export const Markers = () => (
   <Stepper activeStep={2}>
     <Step>
       <div className="flex flex-col gap-1">
-        <span className="text-sm text-gray-400 light:text-gray-600">
+        <span className="text-xs text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
           03/01/2024, 8:00 AM
         </span>
         <span>
           Austin{' '}
-          <span className="text-gray-400 light:text-gray-600">
+          <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
             created ticket
           </span>
         </span>
@@ -20,39 +21,46 @@ export const Markers = () => (
     </Step>
     <Step>
       <div className="flex flex-col gap-1">
-        <span className="text-sm text-gray-400 light:text-gray-600">
+        <span className="text-xs text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
           03/01/2024, 8:00 AM
         </span>
         <span>
           Austin
-          <span className="text-gray-400 light:text-gray-600">
+          <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
             {' '}
             changed statues from{' '}
           </span>
           Backlog
-          <span className="text-gray-400 light:text-gray-600"> to </span>In
-          Progress
+          <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
+            {' '}
+            to{' '}
+          </span>
+          In Progress
         </span>
-        <div className="px-4 py-2 border border-solid border-blue-700 bg-surface rounded-md">
-          This looks fine, might've missed it but maybe we can add a link to the
-          website where we also have the video of how to use the plug in?
+        <div className="px-4 py-2 border border-solid border-tags-colors-neutral-stroke-hover bg-inputs-colors-normal-background-resting rounded-md">
+          This looks fine, might&apos;ve missed it but maybe we can add a link
+          to the website where we also have the video of how to use the plug in?
           Otherwise this is a nice addition.
         </div>
       </div>
     </Step>
     <Step>
       <div className="flex flex-col gap-1">
-        <span className="text-sm text-gray-400 light:text-gray-600">
+        <span className="text-xs text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
           03/01/2024, 8:00 AM
         </span>
         <span>
           Austin
-          <span className="text-gray-400 light:text-gray-600">
+          <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
             {' '}
             changed statues from{' '}
           </span>
           In Progress
-          <span className="text-gray-400 light:text-gray-600"> to </span>Done
+          <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
+            {' '}
+            to{' '}
+          </span>
+          Done
         </span>
       </div>
     </Step>
@@ -63,12 +71,12 @@ export const Numbered = () => (
   <Stepper variant="numbered" activeStep={2}>
     <Step>
       <div className="flex flex-col gap-1">
-        <span className="text-sm text-gray-400 light:text-gray-600">
+        <span className="text-xs text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
           03/01/2024, 8:00 AM
         </span>
         <span>
           Austin{' '}
-          <span className="text-gray-400 light:text-gray-600">
+          <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
             created ticket
           </span>
         </span>
@@ -76,39 +84,46 @@ export const Numbered = () => (
     </Step>
     <Step>
       <div className="flex flex-col gap-1">
-        <span className="text-sm text-gray-400 light:text-gray-600">
+        <span className="text-xs text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
           03/01/2024, 8:00 AM
         </span>
         <span>
           Austin
-          <span className="text-gray-400 light:text-gray-600">
+          <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
             {' '}
             changed statues from{' '}
           </span>
           Backlog
-          <span className="text-gray-400 light:text-gray-600"> to </span>In
-          Progress
+          <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
+            {' '}
+            to{' '}
+          </span>
+          In Progress
         </span>
-        <div className="px-4 py-2 border border-solid border-blue-700 bg-surface rounded-md">
-          This looks fine, might've missed it but maybe we can add a link to the
-          website where we also have the video of how to use the plug in?
+        <div className="px-4 py-2 border border-solid border-tags-colors-neutral-stroke-hover bg-inputs-colors-normal-background-resting rounded-md">
+          This looks fine, might&apos;ve missed it but maybe we can add a link
+          to the website where we also have the video of how to use the plug in?
           Otherwise this is a nice addition.
         </div>
       </div>
     </Step>
     <Step>
       <div className="flex flex-col gap-1">
-        <span className="text-sm text-gray-400 light:text-gray-600">
+        <span className="text-xs text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
           03/01/2024, 8:00 AM
         </span>
         <span>
           Austin
-          <span className="text-gray-400 light:text-gray-600">
+          <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
             {' '}
             changed statues from{' '}
           </span>
           In Progress
-          <span className="text-gray-400 light:text-gray-600"> to </span>Done
+          <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
+            {' '}
+            to{' '}
+          </span>
+          Done
         </span>
       </div>
     </Step>
@@ -116,15 +131,15 @@ export const Numbered = () => (
 );
 
 export const Labels = () => (
-  <Stepper>
+  <Stepper activeStep={2}>
     <Step label="v6.8">
       <div className="flex flex-col gap-1">
-        <span className="text-sm text-gray-400 light:text-gray-600">
+        <span className="text-xs text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
           03/01/2024, 8:00 AM
         </span>
         <span>
           Austin{' '}
-          <span className="text-gray-400 light:text-gray-600">
+          <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
             created ticket
           </span>
         </span>
@@ -132,39 +147,46 @@ export const Labels = () => (
     </Step>
     <Step label="v6.9">
       <div className="flex flex-col gap-1">
-        <span className="text-sm text-gray-400 light:text-gray-600">
+        <span className="text-xs text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
           03/01/2024, 8:00 AM
         </span>
         <span>
           Austin
-          <span className="text-gray-400 light:text-gray-600">
+          <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
             {' '}
             changed statues from{' '}
           </span>
           Backlog
-          <span className="text-gray-400 light:text-gray-600"> to </span>In
-          Progress
+          <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
+            {' '}
+            to{' '}
+          </span>
+          In Progress
         </span>
-        <div className="px-4 py-2 border border-solid border-blue-700 bg-surface rounded-md">
-          This looks fine, might've missed it but maybe we can add a link to the
-          website where we also have the video of how to use the plug in?
+        <div className="px-4 py-2 border border-solid border-tags-colors-neutral-stroke-hover bg-inputs-colors-normal-background-resting rounded-md">
+          This looks fine, might&apos;ve missed it but maybe we can add a link
+          to the website where we also have the video of how to use the plug in?
           Otherwise this is a nice addition.
         </div>
       </div>
     </Step>
     <Step label="v7.0">
       <div className="flex flex-col gap-1">
-        <span className="text-sm text-gray-400 light:text-gray-600">
+        <span className="text-xs text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
           03/01/2024, 8:00 AM
         </span>
         <span>
           Austin
-          <span className="text-gray-400 light:text-gray-600">
+          <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
             {' '}
             changed statues from{' '}
           </span>
           In Progress
-          <span className="text-gray-400 light:text-gray-600"> to </span>Done
+          <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
+            {' '}
+            to{' '}
+          </span>
+          Done
         </span>
       </div>
     </Step>
@@ -175,12 +197,12 @@ export const Mixed = () => (
   <Stepper activeStep={3}>
     <Step label="v6.8">
       <div className="flex flex-col gap-1">
-        <span className="text-sm text-gray-400 light:text-gray-600">
+        <span className="text-xs text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
           03/01/2024, 8:00 AM
         </span>
         <span>
           Austin{' '}
-          <span className="text-gray-400 light:text-gray-600">
+          <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
             created ticket
           </span>
         </span>
@@ -188,39 +210,46 @@ export const Mixed = () => (
     </Step>
     <Step>
       <div className="flex flex-col gap-1">
-        <span className="text-sm text-gray-400 light:text-gray-600">
+        <span className="text-xs text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
           03/01/2024, 8:00 AM
         </span>
         <span>
           Austin
-          <span className="text-gray-400 light:text-gray-600">
+          <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
             {' '}
             changed statues from{' '}
           </span>
           Backlog
-          <span className="text-gray-400 light:text-gray-600"> to </span>In
-          Progress
+          <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
+            {' '}
+            to{' '}
+          </span>
+          In Progress
         </span>
-        <div className="px-4 py-2 border border-solid border-blue-700 bg-surface rounded-md">
-          This looks fine, might've missed it but maybe we can add a link to the
-          website where we also have the video of how to use the plug in?
+        <div className="px-4 py-2 border border-solid border-tags-colors-neutral-stroke-hover bg-inputs-colors-normal-background-resting rounded-md">
+          This looks fine, might&apos;ve missed it but maybe we can add a link
+          to the website where we also have the video of how to use the plug in?
           Otherwise this is a nice addition.
         </div>
       </div>
     </Step>
     <Step label="v7.0">
       <div className="flex flex-col gap-1">
-        <span className="text-sm text-gray-400 light:text-gray-600">
+        <span className="text-xs text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
           03/01/2024, 8:00 AM
         </span>
         <span>
           Austin
-          <span className="text-gray-400 light:text-gray-600">
+          <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
             {' '}
             changed statues from{' '}
           </span>
           In Progress
-          <span className="text-gray-400 light:text-gray-600"> to </span>Done
+          <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
+            {' '}
+            to{' '}
+          </span>
+          Done
         </span>
       </div>
     </Step>
@@ -231,12 +260,12 @@ export const Animated = () => (
   <Stepper animated activeStep={2}>
     <Step>
       <div className="flex flex-col gap-1">
-        <span className="text-sm text-gray-400 light:text-gray-600">
+        <span className="text-xs text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
           03/01/2024, 8:00 AM
         </span>
         <span>
           Austin{' '}
-          <span className="text-gray-400 light:text-gray-600">
+          <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
             created ticket
           </span>
         </span>
@@ -244,39 +273,46 @@ export const Animated = () => (
     </Step>
     <Step>
       <div className="flex flex-col gap-1">
-        <span className="text-sm text-gray-400 light:text-gray-600">
+        <span className="text-xs text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
           03/01/2024, 8:00 AM
         </span>
         <span>
           Austin
-          <span className="text-gray-400 light:text-gray-600">
+          <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
             {' '}
             changed statues from{' '}
           </span>
           Backlog
-          <span className="text-gray-400 light:text-gray-600"> to </span>In
-          Progress
+          <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
+            {' '}
+            to{' '}
+          </span>
+          In Progress
         </span>
-        <div className="px-4 py-2 border border-solid border-blue-700 bg-surface rounded-md">
-          This looks fine, might've missed it but maybe we can add a link to the
-          website where we also have the video of how to use the plug in?
+        <div className="px-4 py-2 border border-solid border-tags-colors-neutral-stroke-hover bg-inputs-colors-normal-background-resting rounded-md">
+          This looks fine, might&apos;ve missed it but maybe we can add a link
+          to the website where we also have the video of how to use the plug in?
           Otherwise this is a nice addition.
         </div>
       </div>
     </Step>
     <Step>
       <div className="flex flex-col gap-1">
-        <span className="text-sm text-gray-400 light:text-gray-600">
+        <span className="text-xs text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
           03/01/2024, 8:00 AM
         </span>
         <span>
           Austin
-          <span className="text-gray-400 light:text-gray-600">
+          <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
             {' '}
             changed statues from{' '}
           </span>
           In Progress
-          <span className="text-gray-400 light:text-gray-600"> to </span>Done
+          <span className="text-neutrals-pure-white-dnt-400 light:text-neutrals-pure-black-dnt-600">
+            {' '}
+            to{' '}
+          </span>
+          Done
         </span>
       </div>
     </Step>
@@ -337,9 +373,9 @@ export const CustomAnimation = () => {
             Progress
           </span>
           <div className="px-4 py-2 border border-solid border-blue-700 bg-surface rounded-md">
-            This looks fine, might've missed it but maybe we can add a link to
-            the website where we also have the video of how to use the plug in?
-            Otherwise this is a nice addition.
+            This looks fine, might&apos;ve missed it but maybe we can add a link
+            to the website where we also have the video of how to use the plug
+            in? Otherwise this is a nice addition.
           </div>
         </div>
       </Step>
diff --git a/src/layout/Stepper/Stepper.tsx b/src/layout/Stepper/Stepper.tsx
index b9a9d8dda..3eac40eeb 100644
--- a/src/layout/Stepper/Stepper.tsx
+++ b/src/layout/Stepper/Stepper.tsx
@@ -1,9 +1,13 @@
-import { MotionGroup, MotionItem, StepperTheme } from '@/layout';
+import type { MotionNodeAnimationOptions } from 'motion';
+import type { FC, PropsWithChildren } from 'react';
+import React, { Children, Fragment } from 'react';
+
+import type { StepperTheme } from '@/layout';
+import { MotionGroup, MotionItem } from '@/layout';
 import { cn, useComponentTheme } from '@/utils';
-import React, { Children, FC, Fragment, PropsWithChildren } from 'react';
-import { MotionNodeAnimationOptions } from 'motion';
 
-import { Step, StepProps } from './Step';
+import type { StepProps } from './Step';
+import { Step } from './Step';
 
 export interface StepperProps extends PropsWithChildren {
   /**
@@ -74,47 +78,53 @@ export const Stepper: FC<StepperProps> = ({
       {childrenStepProps.map((props: StepProps, index) => (
         <Fragment key={index}>
           <div
-            className={cn(theme.step.base, {
+            className={cn(theme.step.base.common, {
               'border-transparent': index === totalSteps && !continuous,
-              [theme.step.active]: index < activeStep - 1
+              [theme.step.active]: index < activeStep - 1,
+              [theme.step.base.dot]: variant === 'default',
+              [theme.step.base.circle]: variant === 'numbered' || props.label
             })}
           >
-            <MotionItem>
-              <div className={theme.step.marker.container}>
-                {/* Numbered marker */}
-                {variant === 'numbered' && (
-                  <div
-                    className={cn(theme.step.marker.label.base, {
-                      [theme.step.marker.label.active]: index < activeStep
-                    })}
-                  >
-                    {index + 1}
-                  </div>
-                )}
-                {/* Labeled marker */}
-                {variant !== 'numbered' && props.label && (
-                  <div
-                    className={cn(theme.step.marker.label.base, {
-                      [theme.step.marker.label.active]: index < activeStep
-                    })}
-                  >
-                    <div
-                      className={cn(theme.step.marker.base, {
-                        [theme.step.marker.active]: index < activeStep
-                      })}
-                    />
-                    {props.label}
-                  </div>
-                )}
-                {/* Dot marker */}
-                {variant !== 'numbered' && !props.label && (
+            <MotionItem
+              className={cn(theme.step.marker.container.common, {
+                [theme.step.marker.container.dot]: variant === 'default',
+                [theme.step.marker.container.circle]:
+                  variant === 'numbered' || props.label
+              })}
+            >
+              {/* Numbered marker */}
+              {variant === 'numbered' && (
+                <div
+                  className={cn(theme.step.marker.label.base, {
+                    [theme.step.marker.label.active]: index < activeStep
+                  })}
+                >
+                  {index + 1}
+                </div>
+              )}
+              {/* Labeled marker */}
+              {variant !== 'numbered' && props.label && (
+                <div
+                  className={cn(theme.step.marker.label.base, {
+                    [theme.step.marker.label.active]: index < activeStep
+                  })}
+                >
                   <div
                     className={cn(theme.step.marker.base, {
                       [theme.step.marker.active]: index < activeStep
                     })}
                   />
-                )}
-              </div>
+                  {props.label}
+                </div>
+              )}
+              {/* Dot marker */}
+              {variant !== 'numbered' && !props.label && (
+                <div
+                  className={cn(theme.step.marker.base, {
+                    [theme.step.marker.active]: index < activeStep
+                  })}
+                />
+              )}
             </MotionItem>
           </div>
           <MotionItem>
diff --git a/src/layout/Stepper/StepperTheme.tsx b/src/layout/Stepper/StepperTheme.tsx
index c66024042..c7d7f7d35 100644
--- a/src/layout/Stepper/StepperTheme.tsx
+++ b/src/layout/Stepper/StepperTheme.tsx
@@ -1,9 +1,17 @@
 export interface StepperTheme {
   base: string;
   step: {
-    base: string;
+    base: {
+      common: string;
+      dot: string;
+      circle: string;
+    };
     marker: {
-      container: string;
+      container: {
+        common: string;
+        dot: string;
+        circle: string;
+      };
       base: string;
       active: string;
       label: {
@@ -19,20 +27,26 @@ export interface StepperTheme {
 export const stepperTheme: StepperTheme = {
   base: 'grid grid-cols-[min-content_1fr] gap-x-3',
   step: {
-    base: 'border-l border-solid border-panel-accent translate-x-1/2',
+    base: {
+      common: 'border-l border-solid border-stroke-neutral-2 translate-x-1/2',
+      dot: 'mt-4',
+      circle: 'mt-10'
+    },
     marker: {
-      base: 'rounded-full w-[9px] h-[9px] bg-surface',
-      container:
-        'w-max pt-1 pb-0.5 backdrop-blur-md -translate-x-[calc(50%+0.5px)]',
-      active: 'bg-info',
+      base: 'rounded-full w-2.5 h-2.5 bg-content-assets-neutral-3',
+      container: {
+        common:
+          'text-content-text-on-color-light-dark w-max relative bg-transparent -translate-x-[calc(50%+0.5px)]',
+        dot: '-top-3',
+        circle: '-top-8.5'
+      },
+      active: 'border border-stroke-brand-1 bg-background-brand-base',
       label: {
-        base: 'flex flex-row items-center gap-1 border border-solid border-surface px-3 py-1 rounded-[20px]',
-        active: 'border-info bg-info-background'
+        base: 'flex flex-row items-center gap-1 border border-content-assets-neutral-3 px-3 py-1 rounded-[20px]',
+        active: 'border-stroke-brand-1 bg-background-brand-5'
       }
     },
-    active: 'border-primary',
+    active: 'border-stroke-brand-1',
     content: 'pb-6'
   }
 };
-
-export const legacyStepperTheme: StepperTheme = stepperTheme;
diff --git a/src/layout/Stepper/index.ts b/src/layout/Stepper/index.ts
index f77b1d331..2369ebb0a 100644
--- a/src/layout/Stepper/index.ts
+++ b/src/layout/Stepper/index.ts
@@ -1,3 +1,3 @@
+export * from './Step';
 export * from './Stepper';
 export * from './StepperTheme';
-export * from './Step';
diff --git a/src/layout/Tabs/Tab.tsx b/src/layout/Tabs/Tab.tsx
index 471b694f2..dbd454949 100644
--- a/src/layout/Tabs/Tab.tsx
+++ b/src/layout/Tabs/Tab.tsx
@@ -1,8 +1,11 @@
-import React, { FC, PropsWithChildren } from 'react';
-import { Button } from '@/elements/Button';
-import { TabsTheme } from './TabsTheme';
-import { useComponentTheme, cn } from '@/utils';
 import { motion } from 'motion/react';
+import type { FC, PropsWithChildren, ReactElement } from 'react';
+import React from 'react';
+
+import { Button } from '@/elements/Button';
+import { cn, useComponentTheme } from '@/utils';
+
+import type { TabSizeTheme, TabsTheme, TabVariantTheme } from './TabsTheme';
 
 export interface TabProps extends PropsWithChildren {
   /**
@@ -47,7 +50,23 @@ export interface TabProps extends PropsWithChildren {
    *
    * @private
    */
-  size?: 'small' | 'medium' | 'large' | string;
+  size?: keyof TabSizeTheme;
+
+  /**
+   * The variant of the tab.
+   * @private
+   */
+  variant?: keyof TabVariantTheme;
+
+  /**
+   * Element to display before the Button content.
+   */
+  start?: ReactElement;
+
+  /**
+   * Element to display after the Button content.
+   */
+  end?: ReactElement;
 
   /**
    * Theme for the Tabs.
@@ -62,23 +81,31 @@ export const Tab: FC<TabProps> = ({
   containerClassName,
   className,
   disabled,
-  onSelect,
   size = 'medium',
+  variant = 'primary',
+  start,
+  end,
+  onSelect,
   theme: customTheme
 }) => {
-  const theme: TabsTheme = useComponentTheme('tabs', customTheme);
+  const tabTheme: TabsTheme = useComponentTheme('tabs', customTheme);
 
   return (
-    <span className={cn(theme.list.tab.base, containerClassName)}>
+    <span className={cn(tabTheme.list.tab.base, containerClassName)}>
       <Button
+        startAdornment={start}
+        endAdornment={end}
         className={cn(
-          theme.list.tab.button,
+          tabTheme.list.tab.button,
+          tabTheme.list.variant?.[variant]?.button,
           className,
           {
-            [theme.list.tab.disabled]: disabled,
-            [theme.list.tab.selected]: selected
+            [tabTheme.list.tab.disabled]: disabled,
+            [tabTheme.list.tab.selected]: selected,
+            [tabTheme.list.variant?.[variant]?.selected]: selected,
+            [tabTheme.list.variant?.[variant]?.disabled]: disabled
           },
-          theme.list.tab.size?.[size]
+          tabTheme.list.tab.size?.[size]
         )}
         disabled={disabled}
         role="tab"
@@ -96,8 +123,9 @@ export const Tab: FC<TabProps> = ({
       {selected && (
         <motion.div
           className={cn(
-            theme.list.indicator?.base,
-            theme.list.indicator?.size?.[size]
+            tabTheme.list.indicator?.base,
+            tabTheme.list.indicator?.size?.[size],
+            tabTheme.list.variant?.[variant]?.indicator
           )}
           layoutId={`${id}-tabs-underline`}
         />
diff --git a/src/layout/Tabs/TabList.tsx b/src/layout/Tabs/TabList.tsx
index 6ff0c023c..8137c068f 100644
--- a/src/layout/Tabs/TabList.tsx
+++ b/src/layout/Tabs/TabList.tsx
@@ -1,7 +1,10 @@
-import React, { FC, PropsWithChildren, Children } from 'react';
-import { Tab } from './Tab';
+import type { FC, PropsWithChildren } from 'react';
+import React, { Children } from 'react';
+
 import { cn, useComponentTheme } from '@/utils';
-import { TabsTheme } from './TabsTheme';
+
+import { Tab } from './Tab';
+import type { TabSizeTheme, TabsTheme, TabVariantTheme } from './TabsTheme';
 
 export interface TabListProps extends PropsWithChildren {
   /**
@@ -37,13 +40,13 @@ export interface TabListProps extends PropsWithChildren {
    * The variant of the tabs.
    * @private
    */
-  variant?: 'primary' | 'secondary';
+  variant?: keyof TabVariantTheme;
 
   /**
    * The size of the tabs.
    * @private
    */
-  size?: 'small' | 'medium' | 'large' | string;
+  size?: keyof TabSizeTheme;
 
   /**
    * Theme for the Tabs.
@@ -81,8 +84,9 @@ export const TabList: FC<TabListProps> = ({
           {...rest}
           id={id}
           selected={index === selectedIndex}
-          onSelect={() => onSelect(index)}
           size={size}
+          variant={variant}
+          onSelect={() => onSelect(index)}
         >
           {children}
         </Tab>
diff --git a/src/layout/Tabs/TabPanel.tsx b/src/layout/Tabs/TabPanel.tsx
index 4fe87a81e..d576d9187 100644
--- a/src/layout/Tabs/TabPanel.tsx
+++ b/src/layout/Tabs/TabPanel.tsx
@@ -1,8 +1,11 @@
-import React, { FC, PropsWithChildren } from 'react';
-import { twMerge } from 'tailwind-merge';
-import { TabsTheme } from './TabsTheme';
+import type { FC, PropsWithChildren } from 'react';
+import React from 'react';
+
+import { twMerge } from '@/utils';
 import { useComponentTheme } from '@/utils';
 
+import type { TabsTheme } from './TabsTheme';
+
 export interface TabPanelProps extends PropsWithChildren {
   /**
    * The class name to be added to the tab panel.
diff --git a/src/layout/Tabs/Tabs.story.tsx b/src/layout/Tabs/Tabs.story.tsx
index b79c3e4d6..2fb554286 100644
--- a/src/layout/Tabs/Tabs.story.tsx
+++ b/src/layout/Tabs/Tabs.story.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import { Tabs } from './Tabs';
-import { TabList } from './TabList';
+
 import { Tab } from './Tab';
+import { TabList } from './TabList';
 import { TabPanel } from './TabPanel';
-import { Stack } from '../Stack';
+import { Tabs } from './Tabs';
 
 export default {
   title: 'Components/Layout/Tabs',
@@ -15,6 +15,23 @@ export default {
   }
 };
 
+const Icon = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7.05037 2.43562C7.47505 1.70912 8.52499 1.70912 8.94967 2.43562L10.5591 5.18886L13.7314 5.81912C14.5791 5.98756 14.9104 7.02301 14.3178 7.65222L12.1512 9.95255L12.5125 13.0632C12.6106 13.9079 11.7541 14.5397 10.976 14.1966L8.00002 12.8845L5.02399 14.1966C4.24592 14.5397 3.38946 13.9079 3.48756 13.0632L3.84882 9.95255L1.68228 7.65222C1.08968 7.02301 1.42092 5.98756 2.26868 5.81912L5.44095 5.18886L7.05037 2.43562ZM8.00002 3.1889L6.34068 6.02753C6.25403 6.17577 6.10802 6.27978 5.93961 6.31324L2.67965 6.96093L4.9138 9.33306C5.03517 9.46193 5.09343 9.63781 5.07301 9.81365L4.69969 13.0282L7.75796 11.6797C7.91217 11.6117 8.08787 11.6117 8.24208 11.6797L11.3003 13.0282L10.927 9.81365C10.9066 9.63781 10.9649 9.46193 11.0862 9.33306L13.3204 6.96093L10.0604 6.31324C9.89202 6.27978 9.74601 6.17577 9.65936 6.02753L8.00002 3.1889Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
 export const Simple = () => (
   <Tabs>
     <TabList>
@@ -32,9 +49,12 @@ export const Variants = () => (
   <div className="flex flex-col gap-12">
     <Tabs variant="primary">
       <TabList>
-        <Tab>Tab 1</Tab>
-        <Tab>Tab 2</Tab>
-        <Tab>Tab 3</Tab>
+        <Tab start={<Icon />}>Tab 1</Tab>
+        <Tab start={<Icon />}>Tab 2</Tab>
+        <Tab start={<Icon />}>Tab 3</Tab>
+        <Tab start={<Icon />} disabled>
+          Tab 4
+        </Tab>
       </TabList>
       <TabPanel>This is content for primary tab 1</TabPanel>
       <TabPanel>This is content for primary tab 2</TabPanel>
@@ -42,14 +62,43 @@ export const Variants = () => (
     </Tabs>
     <Tabs variant="secondary">
       <TabList>
-        <Tab>Tab 1</Tab>
-        <Tab>Tab 2</Tab>
-        <Tab>Tab 3</Tab>
+        <Tab start={<Icon />}>Tab 1</Tab>
+        <Tab start={<Icon />}>Tab 2</Tab>
+        <Tab start={<Icon />}>Tab 3</Tab>
+        <Tab start={<Icon />} disabled>
+          Tab 4
+        </Tab>
       </TabList>
       <TabPanel>This is content for secondary tab 1</TabPanel>
       <TabPanel>This is content for secondary tab 2</TabPanel>
       <TabPanel>This is content for secondary tab 3</TabPanel>
     </Tabs>
+    <Tabs variant="outlined">
+      <TabList>
+        <Tab start={<Icon />}>Tab 1</Tab>
+        <Tab start={<Icon />}>Tab 2</Tab>
+        <Tab start={<Icon />}>Tab 3</Tab>
+        <Tab start={<Icon />} disabled>
+          Tab 4
+        </Tab>
+      </TabList>
+      <TabPanel>This is content for outlined tab 1</TabPanel>
+      <TabPanel>This is content for outlined tab 2</TabPanel>
+      <TabPanel>This is content for outlined tab 3</TabPanel>
+    </Tabs>
+    <Tabs variant="text">
+      <TabList>
+        <Tab start={<Icon />}>Tab 1</Tab>
+        <Tab start={<Icon />}>Tab 2</Tab>
+        <Tab start={<Icon />}>Tab 3</Tab>
+        <Tab start={<Icon />} disabled>
+          Tab 4
+        </Tab>
+      </TabList>
+      <TabPanel>This is content for text tab 1</TabPanel>
+      <TabPanel>This is content for text tab 2</TabPanel>
+      <TabPanel>This is content for text tab 3</TabPanel>
+    </Tabs>
   </div>
 );
 
diff --git a/src/layout/Tabs/Tabs.tsx b/src/layout/Tabs/Tabs.tsx
index 139ef31bc..bb2d29da7 100644
--- a/src/layout/Tabs/Tabs.tsx
+++ b/src/layout/Tabs/Tabs.tsx
@@ -1,19 +1,14 @@
-import React, {
-  Children,
-  FC,
-  Fragment,
-  PropsWithChildren,
-  useEffect,
-  useMemo,
-  useState
-} from 'react';
-import { useId } from '@/utils';
-import { twMerge } from 'tailwind-merge';
 import { AnimatePresence } from 'motion/react';
+import type { FC, PropsWithChildren } from 'react';
+import React, { Children, Fragment, useEffect, useMemo, useState } from 'react';
+
+import { useId } from '@/utils';
+import { twMerge } from '@/utils';
 import { useComponentTheme } from '@/utils/Theme/hooks';
-import { TabsTheme } from './TabsTheme';
-import { TabPanel } from './TabPanel';
+
 import { TabList } from './TabList';
+import { TabPanel } from './TabPanel';
+import type { TabSizeTheme, TabsTheme, TabVariantTheme } from './TabsTheme';
 
 export interface TabsProps extends PropsWithChildren {
   /**
@@ -44,12 +39,12 @@ export interface TabsProps extends PropsWithChildren {
   /**
    * The variant of the tabs.
    */
-  variant?: 'primary' | 'secondary';
+  variant?: keyof TabVariantTheme;
 
   /**
    * The size of the tabs.
    */
-  size?: 'small' | 'medium' | 'large' | string;
+  size?: keyof TabSizeTheme;
 
   /**
    * The callback to be called when a tab is selected.
diff --git a/src/layout/Tabs/TabsTheme.ts b/src/layout/Tabs/TabsTheme.ts
index 057c8c6a1..96c95e13d 100644
--- a/src/layout/Tabs/TabsTheme.ts
+++ b/src/layout/Tabs/TabsTheme.ts
@@ -1,78 +1,141 @@
+interface TabVariantConfigTheme {
+  divider?: string;
+  button?: string;
+  selected?: string;
+  disabled?: string;
+  indicator?: string;
+}
+
+export interface TabVariantTheme {
+  primary: TabVariantConfigTheme;
+  secondary: TabVariantConfigTheme;
+  outlined?: TabVariantConfigTheme;
+  text?: TabVariantConfigTheme;
+  [key: string]: TabVariantConfigTheme;
+}
+
+export interface TabSizeTheme {
+  small: string;
+  medium: string;
+  large: string;
+  [key: string]: string;
+}
+
 export interface TabsTheme {
   base: string;
   list: {
     base: string;
     indicator: {
       base: string;
-      size: {
-        small: string;
-        medium: string;
-        large: string;
-        [key: string]: string;
-      };
+      size: TabSizeTheme;
     };
     divider: string;
-    variant: {
-      primary: {
-        divider: string;
-      };
-      secondary: {
-        divider: string;
-      };
-    };
+    variant: TabVariantTheme;
     tab: {
       base: string;
       button: string;
       selected: string;
       disabled: string;
-      size: {
-        small: string;
-        medium: string;
-        large: string;
-        [key: string]: string;
-      };
+      size: TabSizeTheme;
     };
   };
   panel: string;
 }
 
-const baseTheme: TabsTheme = {
+export const tabsTheme: TabsTheme = {
   base: 'flex flex-col',
   list: {
     base: 'flex text-center flex-wrap -mb-px',
     indicator: {
-      base: 'bg-primary absolute bottom-0 left-0 right-0',
+      base: 'transition-colors',
       size: {
-        small: 'h-0.5',
-        medium: 'h-0.5',
-        large: 'h-1'
+        small: 'h-(--tabs-details-stroke-width-underline-sm)',
+        medium: 'h-(--tabs-details-stroke-width-underline-sm)',
+        large: 'h-(--tabs-details-stroke-width-underline-lg)'
       }
     },
     divider: 'w-full h-px border-0',
     variant: {
       primary: {
-        divider: 'bg-surface'
+        button: `
+          text-tabs-colors-contained-text-resting
+          hover:text-tabs-colors-contained-text-hover hover:border-tabs-colors-contained-background-hover hover:bg-tabs-colors-contained-background-hover
+          focus-visible:text-tabs-colors-contained-text-hover focus-visible:border-tabs-colors-contained-background-hover focus-visible:bg-tabs-colors-contained-background-hover
+          [&_svg]:text-tabs-colors-contained-assets-resting hover:[&_svg]:text-tabs-colors-contained-assets-hover focus-visible:[&_svg]:text-tabs-colors-contained-assets-hover
+        `,
+        selected: `
+          text-tabs-colors-contained-text-selected bg-tabs-colors-contained-background-selected text-tabs-colors-contained-text-selected
+          hover:text-tabs-colors-contained-text-selected-hover hover:bg-tabs-colors-contained-background-selected-hover 
+          focus-visible:text-tabs-colors-contained-text-selected-hover focus-visible:bg-tabs-colors-contained-background-selected-hover 
+          [&_svg]:text-tabs-colors-contained-assets-selected
+          hover:[&_svg]:text-tabs-colors-contained-assets-selected-hover focus-visible:[&_svg]:text-tabs-colors-contained-assets-selected-hover
+        `,
+        disabled:
+          'disabled:text-tabs-colors-contained-text-resting hover:text-tabs-colors-contained-text-resting disabled:[&_svg]:text-tabs-colors-contained-assets-resting disabled:bg-transparent disabled:hover:bg-transparent'
       },
       secondary: {
-        divider: 'bg-linear-to-r from-transparent to-transparent via-primary'
+        indicator:
+          'bg-tabs-colors-underline-stroke-selected group-hover:bg-tabs-colors-underline-stroke-selected-hover absolute bottom-0 left-0 right-0',
+        button: `
+          text-tabs-colors-underline-text-resting border-tabs-colors-underline-background-resting border-b rounded-none
+          hover:border-tabs-colors-underline-background-hover hover:text-tabs-colors-underline-text-hover
+          focus-visible:text-tabs-colors-underline-text-hover
+          [&_svg]:text-tabs-colors-underline-assets-resting hover:[&_svg]:text-tabs-colors-underline-assets-hover focus-visible:[&_svg]:text-tabs-colors-underline-assets-hover
+        `,
+        selected:
+          'text-tabs-colors-underline-text-selected group-hover:text-tabs-colors-underline-text-selected-hover [&_svg]:text-tabs-colors-underline-assets-selected',
+        disabled:
+          'disabled:text-tabs-colors-underline-text-resting hover:text-tabs-colors-underline-text-resting disabled:[&_svg]:text-tabs-colors-underline-assets-resting'
+      },
+      outlined: {
+        button: `
+          border border-tabs-colors-outline-stroke-resting text-tabs-colors-outline-text-resting
+          hover:text-tabs-colors-outline-text-hover hover:bg-tabs-colors-outline-background-hover hover:border-tabs-colors-outline-stroke-hover
+          focus-visible:text-tabs-colors-outline-text-hover focus-visible:bg-tabs-colors-outline-background-hover focus-visible:border-tabs-colors-outline-stroke-hover
+          [&_svg]:text-tabs-colors-outline-assets-resting hover:[&_svg]:text-tabs-colors-outline-assets-hover focus-visible:[&_svg]:text-tabs-colors-outline-assets-hover
+        `,
+        selected: `
+          text-tabs-colors-outline-text-selected bg-tabs-colors-outline-background-selected border-tabs-colors-outline-stroke-selected
+          hover:text-tabs-colors-outline-text-selected-hover hover:bg-tabs-colors-outline-background-selected-hover hover:border-tabs-colors-outline-stroke-selected-hover
+          focus-visible:text-tabs-colors-outline-text-selected-hover focus-visible:bg-tabs-colors-outline-background-selected-hover focus-visible:border-tabs-colors-outline-stroke-selected-hover
+          [&_svg]:text-tabs-colors-outline-assets-selected hover:[&_svg]:text-tabs-colors-outline-assets-selected-hover focus-visible:[&_svg]:text-tabs-colors-outline-assets-selected-hover
+        `,
+        disabled:
+          'disabled:text-tabs-colors-outline-text-resting hover:text-tabs-colors-outline-text-resting disabled:[&_svg]:text-tabs-colors-outline-assets-resting disabled:bg-transparent disabled:hover:bg-transparent'
+      },
+      text: {
+        button: `
+          text-tabs-colors-text-only-text-resting
+          hover:text-tabs-colors-text-only-text-hover
+          focus-visible:text-tabs-colors-text-only-text-hover
+          [&_svg]:text-tabs-colors-text-only-assets-resting
+          hover:[&_svg]:text-tabs-colors-text-only-assets-hover
+        `,
+        selected: `
+          text-tabs-colors-text-only-text-selected
+          hover:text-tabs-colors-text-only-text-selected-hover
+          focus-visible:text-tabs-colors-text-only-text-selected-hover
+          [&_svg]:text-tabs-colors-text-only-assets-selected
+          hover:[&_svg]:text-tabs-colors-text-only-assets-selected-hover
+        `,
+        disabled:
+          'disabled:text-tabs-colors-text-only-text-resting hover:text-tabs-colors-text-only-text-resting disabled:[&_svg]:text-tabs-colors-text-only-assets-resting'
       }
     },
     tab: {
-      base: 'relative',
-      button:
-        'transition-colors text-text-secondary font-bold hover:text-primary-hover',
-      selected: 'text-text-primary',
+      base: 'group relative',
+      button: 'transition-colors [&_svg]:transition-colors',
+      selected: '',
       disabled: 'cursor-not-allowed opacity-40',
       size: {
-        small: 'pb-1 text-sm',
-        medium: 'pb-2 text-lg',
-        large: 'pb-4 text-xl'
+        small:
+          'h-(--tabs-details-height-sm) px-(--tabs-details-horizontal-padding-sm) text-xxs font-semibold',
+        medium:
+          'h-(--tabs-details-height-lg) px-(--tabs-details-horizontal-padding-sm) text-xs font-semibold',
+        large:
+          'h-(--tabs-details-height-lg) px-(--tabs-details-horizontal-padding-lg) text-sm font-semibold'
       }
     }
   },
-  panel: 'mt-2'
+  panel: 'mt-4'
 };
-
-export const tabsTheme = baseTheme;
-
-export const legacyTabsTheme: TabsTheme = baseTheme;
diff --git a/src/layout/Tabs/index.ts b/src/layout/Tabs/index.ts
index c5fe65399..3eade0877 100644
--- a/src/layout/Tabs/index.ts
+++ b/src/layout/Tabs/index.ts
@@ -1,5 +1,5 @@
-export * from './Tabs';
-export * from './TabList';
 export * from './Tab';
+export * from './TabList';
 export * from './TabPanel';
+export * from './Tabs';
 export * from './TabsTheme';
diff --git a/src/layout/Tree/JsonTree/JsonTree.story.tsx b/src/layout/Tree/JsonTree/JsonTree.story.tsx
index ea8ebde35..a2bf0f891 100644
--- a/src/layout/Tree/JsonTree/JsonTree.story.tsx
+++ b/src/layout/Tree/JsonTree/JsonTree.story.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { JsonTree } from './JsonTree';
 
 export default {
diff --git a/src/layout/Tree/JsonTree/JsonTree.tsx b/src/layout/Tree/JsonTree/JsonTree.tsx
index 2f0d670a5..80aa776b6 100644
--- a/src/layout/Tree/JsonTree/JsonTree.tsx
+++ b/src/layout/Tree/JsonTree/JsonTree.tsx
@@ -1,5 +1,8 @@
-import React, { FC, useMemo } from 'react';
+import type { FC } from 'react';
+import React from 'react';
+
 import { Tree } from '@/layout/Tree/Tree';
+
 import { JsonTreeNode } from './JsonTreeNode';
 import { parseJsonTree } from './utils';
 
diff --git a/src/layout/Tree/JsonTree/JsonTreeNode.tsx b/src/layout/Tree/JsonTree/JsonTreeNode.tsx
index 960889cfc..d9a2cfd2d 100644
--- a/src/layout/Tree/JsonTree/JsonTreeNode.tsx
+++ b/src/layout/Tree/JsonTree/JsonTreeNode.tsx
@@ -1,11 +1,14 @@
-import React, { FC, useCallback, useMemo } from 'react';
-import { TreeNode } from '@/layout/Tree/TreeNode';
-import { JsonTreeData } from './utils';
-import { useComponentTheme } from '@/utils/Theme/hooks';
-import { JsonTreeTheme } from './JsonTreeTheme';
-import { twMerge } from 'tailwind-merge';
+import type { FC } from 'react';
+import React, { useCallback, useMemo } from 'react';
+
 import { Ellipsis } from '@/data/Ellipsis';
 import { useInfinityList } from '@/data/InfinityList';
+import { TreeNode } from '@/layout/Tree/TreeNode';
+import { twMerge } from '@/utils';
+import { useComponentTheme } from '@/utils/Theme/hooks';
+
+import type { JsonTreeTheme } from './JsonTreeTheme';
+import type { JsonTreeData } from './utils';
 
 export interface JsonTreeNodeProps {
   /**
diff --git a/src/layout/Tree/JsonTree/JsonTreeTheme.ts b/src/layout/Tree/JsonTree/JsonTreeTheme.ts
index 3dcdf3820..af6f504eb 100644
--- a/src/layout/Tree/JsonTree/JsonTreeTheme.ts
+++ b/src/layout/Tree/JsonTree/JsonTreeTheme.ts
@@ -11,15 +11,12 @@ export interface JsonTreeTheme {
 
 export const jsonTreeTheme: JsonTreeTheme = {
   node: {
-    label: 'font-mono text-anakiwa light:text-blue-500',
-    delimiter: 'pr-1',
-    symbol: 'px-1 opacity-50 font-mono',
-    value: '',
+    label:
+      'font-mono text-xs font-normal text-json-tree-color-text-primary-resting',
+    delimiter: 'pr-1 text-xs font-normal',
+    symbol: 'px-1 opacity-50 font-mono text-xs font-normal',
+    value: 'text-json-tree-color-text-secondary-resting text-xs font-normal',
     count: 'opacity-50'
   },
   pager: 'opacity-50 cursor-pointer pl-4'
 };
-
-export const legacyJsonTreeTheme: JsonTreeTheme = {
-  ...jsonTreeTheme
-};
diff --git a/src/layout/Tree/Tree.story.tsx b/src/layout/Tree/Tree.story.tsx
index 4458213dc..be7d24f23 100644
--- a/src/layout/Tree/Tree.story.tsx
+++ b/src/layout/Tree/Tree.story.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { Tree } from './Tree';
 import { TreeNode } from './TreeNode';
 
diff --git a/src/layout/Tree/Tree.tsx b/src/layout/Tree/Tree.tsx
index b6f26f964..33afa1e7b 100644
--- a/src/layout/Tree/Tree.tsx
+++ b/src/layout/Tree/Tree.tsx
@@ -1,9 +1,13 @@
-import React, { FC, PropsWithChildren, useMemo } from 'react';
+import type { FC, PropsWithChildren } from 'react';
+import React, { useMemo } from 'react';
+
 import { Arrow } from '@/elements/Arrow';
-import { TreeContext, TreeContextProps } from './TreeContext';
-import { TreeTheme } from './TreeTheme';
 import { useComponentTheme } from '@/utils';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@/utils';
+
+import type { TreeContextProps } from './TreeContext';
+import { TreeContext } from './TreeContext';
+import type { TreeTheme } from './TreeTheme';
 
 export type TreeProps = {
   /**
diff --git a/src/layout/Tree/TreeContext.ts b/src/layout/Tree/TreeContext.ts
index 157e1c8f6..fa5d625ac 100644
--- a/src/layout/Tree/TreeContext.ts
+++ b/src/layout/Tree/TreeContext.ts
@@ -1,4 +1,4 @@
-import { ReactNode, createContext, useContext } from 'react';
+import { createContext } from 'react';
 
 export interface TreeContextProps {
   /**
diff --git a/src/layout/Tree/TreeNode.tsx b/src/layout/Tree/TreeNode.tsx
index a730379ed..966a8126d 100644
--- a/src/layout/Tree/TreeNode.tsx
+++ b/src/layout/Tree/TreeNode.tsx
@@ -1,20 +1,20 @@
+import type { FC, PropsWithChildren, ReactNode } from 'react';
 import React, {
   Children,
-  ReactNode,
-  FC,
-  useState,
-  useEffect,
   useCallback,
   useContext,
-  PropsWithChildren
+  useEffect,
+  useState
 } from 'react';
+
 import { Button } from '@/elements/Button';
 import { Collapse } from '@/layout/Collapse';
-import { TreeContext } from './TreeContext';
-import { twMerge } from 'tailwind-merge';
-import { TreeTheme } from './TreeTheme';
+import { twMerge } from '@/utils';
 import { useComponentTheme } from '@/utils';
 
+import { TreeContext } from './TreeContext';
+import type { TreeTheme } from './TreeTheme';
+
 export interface TreeNodeProps extends PropsWithChildren {
   /**
    * Label to display for the node
diff --git a/src/layout/Tree/TreeTheme.ts b/src/layout/Tree/TreeTheme.ts
index 56d002182..1324f9fdf 100644
--- a/src/layout/Tree/TreeTheme.ts
+++ b/src/layout/Tree/TreeTheme.ts
@@ -17,45 +17,22 @@ export interface TreeTheme {
   subtree: string;
 }
 
-const baseTheme: TreeTheme = {
+export const treeTheme: TreeTheme = {
   base: 'relative m-0 p-0 list-none',
   tree: 'border pt-1 pb-1 px-3 border-solid border-transparent',
-  arrow: 'w-3 h-3',
+  arrow:
+    'size-4.5 p-1 transition-colors text-json-tree-color-asset-resting hover:text-json-tree-color-asset-hover',
   node: {
-    base: 'pt-0.5 m-0 list-style-none first:pt-0 last:pb-0',
+    base: 'pt-2 m-0 list-style-none first:pt-0 last:pb-0',
     collapsed: '-rotate-90',
-    disabled: 'opacity-60',
-    leaf: 'pl-4',
-    label: '',
+    disabled: 'opacity-40',
+    leaf: 'pl-5.5',
+    label: 'flex items-center',
     button: {
-      base: 'min-w-[auto] min-h-[auto] w-auto h-auto transition-transform duration-100 ease-in-out ml-0 mr-1 my-0 p-0',
+      base: 'min-w-[auto] min-h-[auto] size-auto transition-transform duration-100 ease-in-out ml-0 mr-1 my-0 p-0',
       icon: 'align-middle block h-2 w-2 m-0.5'
     }
   },
   nodeBlock: 'flex items-center',
   subtree: 'relative ml-5 mr-0 mt-1 mb-0 p-0'
 };
-
-export const treeTheme: TreeTheme = {
-  ...baseTheme,
-  arrow: [baseTheme.arrow, 'fill-text-primary'].join(' '),
-  node: {
-    ...baseTheme.node,
-    base: [baseTheme.node.base, 'text-text-primary'].join(' '),
-    button: {
-      ...baseTheme.node.button,
-      icon: [baseTheme.node.button.icon, 'fill-text-primary'].join(' ')
-    }
-  }
-};
-
-export const legacyTreeTheme: TreeTheme = {
-  ...baseTheme,
-  node: {
-    ...baseTheme.node,
-    button: {
-      ...baseTheme.node.button,
-      icon: [baseTheme.node.button.icon, 'fill-[var(--white)]'].join(' ')
-    }
-  }
-};
diff --git a/src/layout/Tree/index.tsx b/src/layout/Tree/index.tsx
index 7ba552c0f..99a78d1c0 100644
--- a/src/layout/Tree/index.tsx
+++ b/src/layout/Tree/index.tsx
@@ -1,4 +1,4 @@
+export * from './JsonTree';
 export * from './Tree';
 export * from './TreeNode';
 export * from './TreeTheme';
-export * from './JsonTree';
diff --git a/src/layout/VerticalSpacer/VerticalSpacer.story.tsx b/src/layout/VerticalSpacer/VerticalSpacer.story.tsx
index b3134e3ff..5811708d7 100644
--- a/src/layout/VerticalSpacer/VerticalSpacer.story.tsx
+++ b/src/layout/VerticalSpacer/VerticalSpacer.story.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { VerticalSpacer } from './VerticalSpacer';
 
 export default {
diff --git a/src/layout/VerticalSpacer/VerticalSpacer.tsx b/src/layout/VerticalSpacer/VerticalSpacer.tsx
index 4c99d1753..e5c11c7c8 100644
--- a/src/layout/VerticalSpacer/VerticalSpacer.tsx
+++ b/src/layout/VerticalSpacer/VerticalSpacer.tsx
@@ -1,13 +1,19 @@
-import React, { FC, forwardRef, HTMLAttributes, LegacyRef } from 'react';
-import { twMerge } from 'tailwind-merge';
+import type { FC, HTMLAttributes, LegacyRef } from 'react';
+import React, { forwardRef } from 'react';
+
+import { twMerge } from '@/utils';
 import { useComponentTheme } from '@/utils';
-import { VerticalSpacerTheme } from './VerticalSpacerTheme';
+
+import type {
+  VerticalSpacerSizeTheme,
+  VerticalSpacerTheme
+} from './VerticalSpacerTheme';
 
 export interface VerticalSpacerProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * The amount of space to add.
    */
-  space: VerticalSpaceType;
+  space: keyof VerticalSpacerSizeTheme;
 
   /**
    * Theme for the VerticalSpacer.
@@ -15,15 +21,6 @@ export interface VerticalSpacerProps extends HTMLAttributes<HTMLDivElement> {
   theme?: VerticalSpacerTheme;
 }
 
-export type VerticalSpaceType =
-  | 'xs'
-  | 'sm'
-  | 'md'
-  | 'lg'
-  | 'xl'
-  | 'xxl'
-  | string;
-
 export interface VerticalSpacerRef {
   /**
    * Reference to the HTML div element.
diff --git a/src/layout/VerticalSpacer/VerticalSpacerTheme.ts b/src/layout/VerticalSpacer/VerticalSpacerTheme.ts
index 383087477..5e8720b72 100644
--- a/src/layout/VerticalSpacer/VerticalSpacerTheme.ts
+++ b/src/layout/VerticalSpacer/VerticalSpacerTheme.ts
@@ -1,17 +1,19 @@
+export interface VerticalSpacerSizeTheme {
+  xs: string;
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
+  xxl: string;
+  [key: string]: string;
+}
+
 export interface VerticalSpacerTheme {
   base: string;
-  size: {
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    xxl: string;
-    [key: string]: string;
-  };
+  size: VerticalSpacerSizeTheme;
 }
 
-const baseTheme: VerticalSpacerTheme = {
+export const verticalSpacerTheme = {
   base: '',
   size: {
     xs: 'h-0.5',
@@ -22,19 +24,3 @@ const baseTheme: VerticalSpacerTheme = {
     xxl: 'h-8'
   }
 };
-
-export const verticalSpacerTheme = {
-  ...baseTheme
-};
-
-export const legacyVerticalSpacerTheme = {
-  ...baseTheme,
-  size: {
-    xs: 'h-[var(--spacing-xs)]',
-    sm: 'h-[var(--spacing-sm)]',
-    md: 'h-[var(--spacing-md)]',
-    lg: 'h-[var(--spacing-lg)]',
-    xl: 'h-[var(--spacing-xl)]',
-    xxl: 'h-[var(--spacing-xxl)]'
-  }
-};
diff --git a/src/layout/index.ts b/src/layout/index.ts
index 59f0a852d..890a65d80 100644
--- a/src/layout/index.ts
+++ b/src/layout/index.ts
@@ -1,12 +1,12 @@
+export * from './Block';
+export * from './Breadcrumbs';
+export * from './Card';
 export * from './Collapse';
-export * from './Motion';
 export * from './Divider';
 export * from './List';
-export * from './Block';
-export * from './Card';
+export * from './Motion';
 export * from './Stack';
+export * from './Stepper';
+export * from './Tabs';
 export * from './Tree';
 export * from './VerticalSpacer';
-export * from './Tabs';
-export * from './Breadcrumbs';
-export * from './Stepper';
diff --git a/src/typography/PageTitle/PageTitle.story.tsx b/src/typography/PageTitle/PageTitle.story.tsx
deleted file mode 100644
index 5b7532d96..000000000
--- a/src/typography/PageTitle/PageTitle.story.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { PageTitle } from './PageTitle';
-import React from 'react';
-
-export default {
-  title: 'Components/Typography/PageTitle',
-  component: PageTitle
-};
-
-export const Simple = () => <PageTitle>Hello world</PageTitle>;
-
-export const Colors = () => (
-  <div style={{ display: 'flex', flexDirection: 'column' }}>
-    <PageTitle>Default</PageTitle>
-    <PageTitle color="primary">Primary</PageTitle>
-    <PageTitle color="secondary">Secondary</PageTitle>
-    <PageTitle color="error">Error</PageTitle>
-    <PageTitle color="success">Success</PageTitle>
-    <PageTitle color="warning">Warning</PageTitle>
-    <PageTitle color="info">Info</PageTitle>
-  </div>
-);
-
-export const NoMargins = () => (
-  <>
-    <PageTitle disableMargins>Hello world</PageTitle>
-    <PageTitle disableMargins>Hello world</PageTitle>
-  </>
-);
-
-export const Monospace = () => (
-  <PageTitle variant="mono">Hello world</PageTitle>
-);
diff --git a/src/typography/PageTitle/PageTitle.tsx b/src/typography/PageTitle/PageTitle.tsx
index 15bfc1409..818349edc 100644
--- a/src/typography/PageTitle/PageTitle.tsx
+++ b/src/typography/PageTitle/PageTitle.tsx
@@ -1,8 +1,13 @@
-import React, { FC, forwardRef, LegacyRef } from 'react';
+import type { FC, LegacyRef } from 'react';
+import React, { forwardRef } from 'react';
+
+import type { TypographyThemeDeprecated } from '@/typography/TypographyThemeDeprecated';
 import { useComponentTheme } from '@/utils';
-import { twMerge } from 'tailwind-merge';
-import { TypographyTheme } from '@/typography/TypographyTheme';
+import { twMerge } from '@/utils';
 
+/**
+ * @deprecated
+ */
 export interface PageTitleProps
   extends React.HTMLAttributes<HTMLHeadingElement> {
   /**
@@ -31,9 +36,12 @@ export interface PageTitleProps
   /**
    * Theme for the Typography.
    */
-  theme?: TypographyTheme;
+  theme?: TypographyThemeDeprecated;
 }
 
+/**
+ * @deprecated
+ */
 export interface PageTitleRef {
   /**
    * Reference to the HTML heading element.
@@ -41,6 +49,9 @@ export interface PageTitleRef {
   ref?: LegacyRef<HTMLHeadingElement>;
 }
 
+/**
+ * @deprecated
+ */
 export const PageTitle: FC<PageTitleProps & PageTitleRef> = forwardRef(
   (
     {
@@ -54,7 +65,10 @@ export const PageTitle: FC<PageTitleProps & PageTitleRef> = forwardRef(
     }: PageTitleProps,
     ref
   ) => {
-    const theme: TypographyTheme = useComponentTheme('typography', customTheme);
+    const theme: TypographyThemeDeprecated = useComponentTheme(
+      'typography_deprecated',
+      customTheme
+    );
 
     return (
       <h1
diff --git a/src/typography/PrimaryHeading/PrimaryHeading.story.tsx b/src/typography/PrimaryHeading/PrimaryHeading.story.tsx
deleted file mode 100644
index 3644a07b6..000000000
--- a/src/typography/PrimaryHeading/PrimaryHeading.story.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { PrimaryHeading } from './PrimaryHeading';
-import React from 'react';
-
-export default {
-  title: 'Components/Typography/PrimaryHeading',
-  component: PrimaryHeading
-};
-
-export const Simple = () => <PrimaryHeading>Hello world</PrimaryHeading>;
-
-export const Colors = () => (
-  <div style={{ display: 'flex', flexDirection: 'column' }}>
-    <PrimaryHeading>Default</PrimaryHeading>
-    <PrimaryHeading color="primary">Primary</PrimaryHeading>
-    <PrimaryHeading color="secondary">Secondary</PrimaryHeading>
-    <PrimaryHeading color="error">Error</PrimaryHeading>
-    <PrimaryHeading color="success">Success</PrimaryHeading>
-    <PrimaryHeading color="warning">Warning</PrimaryHeading>
-    <PrimaryHeading color="info">Info</PrimaryHeading>
-  </div>
-);
-
-export const NoMargins = () => (
-  <>
-    <PrimaryHeading disableMargins>Hello world</PrimaryHeading>
-    <PrimaryHeading disableMargins>Hello world</PrimaryHeading>
-  </>
-);
-
-export const Monospace = () => (
-  <PrimaryHeading variant="mono">Hello world</PrimaryHeading>
-);
diff --git a/src/typography/PrimaryHeading/PrimaryHeading.tsx b/src/typography/PrimaryHeading/PrimaryHeading.tsx
index 94e0aba1c..69142c46a 100644
--- a/src/typography/PrimaryHeading/PrimaryHeading.tsx
+++ b/src/typography/PrimaryHeading/PrimaryHeading.tsx
@@ -1,8 +1,13 @@
-import React, { FC, forwardRef, LegacyRef } from 'react';
-import { twMerge } from 'tailwind-merge';
+import type { FC, LegacyRef } from 'react';
+import React, { forwardRef } from 'react';
+
+import type { TypographyThemeDeprecated } from '@/typography/TypographyThemeDeprecated';
+import { twMerge } from '@/utils';
 import { useComponentTheme } from '@/utils';
-import { TypographyTheme } from '@/typography/TypographyTheme';
 
+/**
+ * @deprecated
+ */
 export interface PrimaryHeadingProps
   extends React.HTMLAttributes<HTMLHeadingElement> {
   /**
@@ -31,8 +36,12 @@ export interface PrimaryHeadingProps
   /**
    * Theme for the Typography.
    */
-  theme?: TypographyTheme;
+  theme?: TypographyThemeDeprecated;
 }
+
+/**
+ * @deprecated
+ */
 export interface PrimaryHeadingRef {
   /**
    * Reference to the HTML heading element.
@@ -40,6 +49,9 @@ export interface PrimaryHeadingRef {
   ref?: LegacyRef<HTMLHeadingElement>;
 }
 
+/**
+ * @deprecated
+ */
 export const PrimaryHeading: FC<PrimaryHeadingProps & PrimaryHeadingRef> =
   forwardRef(
     (
@@ -54,8 +66,8 @@ export const PrimaryHeading: FC<PrimaryHeadingProps & PrimaryHeadingRef> =
       }: PrimaryHeadingProps,
       ref
     ) => {
-      const theme: TypographyTheme = useComponentTheme(
-        'typography',
+      const theme: TypographyThemeDeprecated = useComponentTheme(
+        'typography_deprecated',
         customTheme
       );
 
diff --git a/src/typography/SecondaryHeading/SecondaryHeading.story.tsx b/src/typography/SecondaryHeading/SecondaryHeading.story.tsx
deleted file mode 100644
index aa75c5a5c..000000000
--- a/src/typography/SecondaryHeading/SecondaryHeading.story.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { SecondaryHeading } from './SecondaryHeading';
-import React from 'react';
-
-export default {
-  title: 'Components/Typography/SecondaryHeading',
-  component: SecondaryHeading
-};
-
-export const Simple = () => <SecondaryHeading>Hello world</SecondaryHeading>;
-
-export const Colors = () => (
-  <div style={{ display: 'flex', flexDirection: 'column' }}>
-    <SecondaryHeading>Default</SecondaryHeading>
-    <SecondaryHeading color="primary">Primary</SecondaryHeading>
-    <SecondaryHeading color="secondary">Secondary</SecondaryHeading>
-    <SecondaryHeading color="error">Error</SecondaryHeading>
-    <SecondaryHeading color="success">Success</SecondaryHeading>
-    <SecondaryHeading color="warning">Warning</SecondaryHeading>
-    <SecondaryHeading color="info">Info</SecondaryHeading>
-  </div>
-);
-
-export const NoMargins = () => (
-  <>
-    <SecondaryHeading disableMargins>Hello world</SecondaryHeading>
-    <SecondaryHeading disableMargins>Hello world</SecondaryHeading>
-  </>
-);
-
-export const Monospace = () => (
-  <SecondaryHeading variant="mono">Hello world</SecondaryHeading>
-);
diff --git a/src/typography/SecondaryHeading/SecondaryHeading.tsx b/src/typography/SecondaryHeading/SecondaryHeading.tsx
index 316ea5e1c..a48d7661c 100644
--- a/src/typography/SecondaryHeading/SecondaryHeading.tsx
+++ b/src/typography/SecondaryHeading/SecondaryHeading.tsx
@@ -1,8 +1,13 @@
-import React, { FC, forwardRef, LegacyRef } from 'react';
+import type { FC, LegacyRef } from 'react';
+import React, { forwardRef } from 'react';
+
+import type { TypographyThemeDeprecated } from '@/typography/TypographyThemeDeprecated';
 import { useComponentTheme } from '@/utils';
-import { twMerge } from 'tailwind-merge';
-import { TypographyTheme } from '@/typography/TypographyTheme';
+import { twMerge } from '@/utils';
 
+/**
+ * @deprecated
+ */
 export interface SecondaryHeadingProps
   extends React.HTMLAttributes<HTMLHeadingElement> {
   /**
@@ -31,9 +36,12 @@ export interface SecondaryHeadingProps
   /**
    * Theme for the Typography.
    */
-  theme?: TypographyTheme;
+  theme?: TypographyThemeDeprecated;
 }
 
+/**
+ * @deprecated
+ */
 export interface SecondaryHeadingRef {
   /**
    * Reference to the HTML heading element.
@@ -41,6 +49,9 @@ export interface SecondaryHeadingRef {
   ref?: LegacyRef<HTMLHeadingElement>;
 }
 
+/**
+ * @deprecated
+ */
 export const SecondaryHeading: FC<SecondaryHeadingProps & SecondaryHeadingRef> =
   forwardRef(
     (
@@ -55,8 +66,8 @@ export const SecondaryHeading: FC<SecondaryHeadingProps & SecondaryHeadingRef> =
       }: SecondaryHeadingProps,
       ref
     ) => {
-      const theme: TypographyTheme = useComponentTheme(
-        'typography',
+      const theme: TypographyThemeDeprecated = useComponentTheme(
+        'typography_deprecated',
         customTheme
       );
 
diff --git a/src/typography/SmallHeading/SmallHeading.story.tsx b/src/typography/SmallHeading/SmallHeading.story.tsx
deleted file mode 100644
index 8268367d0..000000000
--- a/src/typography/SmallHeading/SmallHeading.story.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { SmallHeading } from './SmallHeading';
-import React from 'react';
-
-export default {
-  title: 'Components/Typography/SmallHeading',
-  component: SmallHeading
-};
-
-export const Simple = () => <SmallHeading>Hello world</SmallHeading>;
-
-export const Colors = () => (
-  <div style={{ display: 'flex', flexDirection: 'column' }}>
-    <SmallHeading>Default</SmallHeading>
-    <SmallHeading color="primary">Primary</SmallHeading>
-    <SmallHeading color="secondary">Secondary</SmallHeading>
-    <SmallHeading color="error">Error</SmallHeading>
-    <SmallHeading color="success">Success</SmallHeading>
-    <SmallHeading color="warning">Warning</SmallHeading>
-    <SmallHeading color="info">Info</SmallHeading>
-  </div>
-);
-
-export const NoMargins = () => (
-  <>
-    <SmallHeading disableMargins>Hello world</SmallHeading>
-    <SmallHeading disableMargins>Hello world</SmallHeading>
-  </>
-);
-
-export const Monospace = () => (
-  <SmallHeading variant="mono">Hello world</SmallHeading>
-);
diff --git a/src/typography/SmallHeading/SmallHeading.tsx b/src/typography/SmallHeading/SmallHeading.tsx
index b61084fb9..4c6b6b7b9 100644
--- a/src/typography/SmallHeading/SmallHeading.tsx
+++ b/src/typography/SmallHeading/SmallHeading.tsx
@@ -1,7 +1,9 @@
-import React, { FC, forwardRef, LegacyRef } from 'react';
+import type { FC, LegacyRef } from 'react';
+import React, { forwardRef } from 'react';
+
+import type { TypographyThemeDeprecated } from '@/typography/TypographyThemeDeprecated';
 import { useComponentTheme } from '@/utils';
-import { twMerge } from 'tailwind-merge';
-import { TypographyTheme } from '@/typography/TypographyTheme';
+import { twMerge } from '@/utils';
 
 export type SmallHeadingColors =
   | 'default'
@@ -13,6 +15,9 @@ export type SmallHeadingColors =
   | 'info'
   | string;
 
+/**
+ * @deprecated
+ */
 export interface SmallHeadingProps
   extends React.HTMLAttributes<HTMLHeadingElement> {
   /**
@@ -33,9 +38,12 @@ export interface SmallHeadingProps
   /**
    * Theme for the Typography.
    */
-  theme?: TypographyTheme;
+  theme?: TypographyThemeDeprecated;
 }
 
+/**
+ * @deprecated
+ */
 export interface SmallHeadingRef {
   /**
    * Reference to the HTML heading element.
@@ -43,6 +51,9 @@ export interface SmallHeadingRef {
   ref?: LegacyRef<HTMLHeadingElement>;
 }
 
+/**
+ * @deprecated
+ */
 export const SmallHeading: FC<SmallHeadingProps & SmallHeadingRef> = forwardRef(
   (
     {
@@ -56,7 +67,10 @@ export const SmallHeading: FC<SmallHeadingProps & SmallHeadingRef> = forwardRef(
     }: SmallHeadingProps,
     ref
   ) => {
-    const theme: TypographyTheme = useComponentTheme('typography', customTheme);
+    const theme: TypographyThemeDeprecated = useComponentTheme(
+      'typography_deprecated',
+      customTheme
+    );
 
     return (
       <h5
diff --git a/src/typography/Sub/Sub.story.tsx b/src/typography/Sub/Sub.story.tsx
deleted file mode 100644
index 7458ae5ef..000000000
--- a/src/typography/Sub/Sub.story.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Sub } from './Sub';
-import React from 'react';
-
-export default {
-  title: 'Components/Typography/Sub',
-  component: Sub
-};
-
-export const Simple = () => <Sub>Hello world</Sub>;
-
-export const Colors = () => (
-  <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
-    <Sub>Default</Sub>
-    <Sub color="primary">Primary</Sub>
-    <Sub color="secondary">Secondary</Sub>
-    <Sub color="error">Error</Sub>
-    <Sub color="success">Success</Sub>
-    <Sub color="warning">Warning</Sub>
-    <Sub color="info">Info</Sub>
-  </div>
-);
-
-export const NoMargins = () => (
-  <>
-    <Sub disableMargins>Hello world</Sub>
-    <Sub disableMargins>Hello world</Sub>
-  </>
-);
-
-export const Monospace = () => <Sub variant="mono">Hello world</Sub>;
diff --git a/src/typography/Sub/Sub.tsx b/src/typography/Sub/Sub.tsx
index ff5e4bb4f..b20cfba3b 100644
--- a/src/typography/Sub/Sub.tsx
+++ b/src/typography/Sub/Sub.tsx
@@ -1,8 +1,13 @@
-import React, { FC, forwardRef, LegacyRef } from 'react';
+import type { FC, LegacyRef } from 'react';
+import React, { forwardRef } from 'react';
+
+import type { TypographyThemeDeprecated } from '@/typography/TypographyThemeDeprecated';
 import { useComponentTheme } from '@/utils';
-import { twMerge } from 'tailwind-merge';
-import { TypographyTheme } from '@/typography/TypographyTheme';
+import { twMerge } from '@/utils';
 
+/**
+ * @deprecated
+ */
 export interface SubProps extends React.HTMLAttributes<HTMLHeadingElement> {
   /**
    * Color variation of the text.
@@ -30,9 +35,12 @@ export interface SubProps extends React.HTMLAttributes<HTMLHeadingElement> {
   /**
    * Theme for the Typography.
    */
-  theme?: TypographyTheme;
+  theme?: TypographyThemeDeprecated;
 }
 
+/**
+ * @deprecated
+ */
 export interface SubRef {
   /**
    * Reference to the HTML heading element.
@@ -40,6 +48,9 @@ export interface SubRef {
   ref?: LegacyRef<HTMLHeadingElement>;
 }
 
+/**
+ * @deprecated
+ */
 export const Sub: FC<SubProps & SubRef> = forwardRef(
   (
     {
@@ -53,7 +64,10 @@ export const Sub: FC<SubProps & SubRef> = forwardRef(
     }: SubProps,
     ref
   ) => {
-    const theme: TypographyTheme = useComponentTheme('typography', customTheme);
+    const theme: TypographyThemeDeprecated = useComponentTheme(
+      'typography_deprecated',
+      customTheme
+    );
 
     return (
       <h6
diff --git a/src/typography/Text/Text.story.tsx b/src/typography/Text/Text.story.tsx
deleted file mode 100644
index 1b2caa822..000000000
--- a/src/typography/Text/Text.story.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Text } from './Text';
-import React from 'react';
-
-export default {
-  title: 'Components/Typography/Text',
-  component: Text
-};
-
-export const Simple = () => <Text>Hello world</Text>;
-
-export const Colors = () => (
-  <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
-    <Text>Default</Text>
-    <Text color="primary">Primary</Text>
-    <Text color="secondary">Secondary</Text>
-    <Text color="error">Error</Text>
-    <Text color="success">Success</Text>
-    <Text color="warning">Warning</Text>
-    <Text color="info">Info</Text>
-  </div>
-);
-
-export const Monospace = () => <Text variant="mono">Hello world</Text>;
-
-export const Bold = () => <Text fontStyle="bold">Bold</Text>;
-
-export const ExtraBold = () => <Text fontStyle="extraBold">Extra Bold</Text>;
-
-export const Thin = () => <Text fontStyle="thin">Thin</Text>;
-
-export const Italic = () => <Text fontStyle="italic">Italic</Text>;
diff --git a/src/typography/Text/Text.tsx b/src/typography/Text/Text.tsx
index 0cb1c2996..e2bea9019 100644
--- a/src/typography/Text/Text.tsx
+++ b/src/typography/Text/Text.tsx
@@ -1,7 +1,9 @@
-import React, { FC, forwardRef, LegacyRef } from 'react';
+import type { FC, LegacyRef } from 'react';
+import React, { forwardRef } from 'react';
+
+import type { TypographyThemeDeprecated } from '@/typography/TypographyThemeDeprecated';
 import { useComponentTheme } from '@/utils';
-import { twMerge } from 'tailwind-merge';
-import { TypographyTheme } from '@/typography/TypographyTheme';
+import { twMerge } from '@/utils';
 
 export interface TextProps extends React.HTMLAttributes<HTMLSpanElement> {
   /**
@@ -27,7 +29,7 @@ export interface TextProps extends React.HTMLAttributes<HTMLSpanElement> {
   /**
    * Theme for the Typography.
    */
-  theme?: TypographyTheme;
+  theme?: TypographyThemeDeprecated;
 }
 
 export interface TextRef {
@@ -50,7 +52,10 @@ export const Text: FC<TextProps & TextRef> = forwardRef(
     }: TextProps,
     ref
   ) => {
-    const theme: TypographyTheme = useComponentTheme('typography', customTheme);
+    const theme: TypographyThemeDeprecated = useComponentTheme(
+      'typography_deprecated',
+      customTheme
+    );
 
     return (
       <span
diff --git a/src/typography/Typography.story.tsx b/src/typography/Typography.story.tsx
new file mode 100644
index 000000000..f46994656
--- /dev/null
+++ b/src/typography/Typography.story.tsx
@@ -0,0 +1,355 @@
+import React from 'react';
+
+import { Divider } from '@/layout';
+import { Typography } from '@/typography/Typography';
+
+export default {
+  title: 'Components/Typography',
+  component: Typography
+};
+
+export const Heading = () => (
+  <div className="grid grid-cols-[50px_250px_1fr] gap-4 auto-rows-[40px] justify-center items-center">
+    <Typography variant="h1">H1</Typography>
+    <Typography variant="label" size="medium" weight="bold" color="secondary">
+      Proxima Nova | Regular | 40 / 48 / 0
+    </Typography>
+    <Typography variant="h1" className="truncate">
+      Quantum flux stabilizer online protocol
+    </Typography>
+    <Typography variant="h1" size="medium" weight="medium">
+      H1
+    </Typography>
+    <Typography variant="label" size="medium" weight="bold" color="secondary">
+      Proxima Nova | Medium | 40 / 48 / 0
+    </Typography>
+    <Typography variant="h1" size="medium" weight="medium" className="truncate">
+      Quantum flux stabilizer online protocol
+    </Typography>
+    <Typography variant="h1" size="medium" weight="bold">
+      H1
+    </Typography>
+    <Typography variant="label" size="medium" weight="bold" color="secondary">
+      Proxima Nova | Bold | 40 / 48 / 0
+    </Typography>
+    <Typography variant="h1" size="medium" weight="bold" className="truncate">
+      Quantum flux stabilizer online protocol
+    </Typography>
+    <Divider />
+    <Divider />
+    <Divider />
+    <Typography variant="h2">H2</Typography>
+    <Typography variant="label" size="medium" weight="bold" color="secondary">
+      Proxima Nova | Regular | 32 / 36 / 0
+    </Typography>
+    <Typography variant="h2" className="truncate">
+      Quantum flux stabilizer online protocol
+    </Typography>
+    <Typography variant="h2" size="medium" weight="medium">
+      H2
+    </Typography>
+    <Typography variant="label" size="medium" weight="bold" color="secondary">
+      Proxima Nova | Medium | 32 / 36 / 0
+    </Typography>
+    <Typography variant="h2" size="medium" weight="medium" className="truncate">
+      Quantum flux stabilizer online protocol
+    </Typography>
+    <Typography variant="h2" size="medium" weight="bold">
+      H2
+    </Typography>
+    <Typography variant="label" size="medium" weight="bold" color="secondary">
+      Proxima Nova | Bold | 32 / 36 / 0
+    </Typography>
+    <Typography variant="h2" size="medium" weight="bold" className="truncate">
+      Quantum flux stabilizer online protocol
+    </Typography>
+    <Divider />
+    <Divider />
+    <Divider />
+    <Typography variant="h3">H3</Typography>
+    <Typography variant="label" size="medium" weight="bold" color="secondary">
+      Proxima Nova | Regular | 28 / 32 / 0
+    </Typography>
+    <Typography variant="h3" className="truncate">
+      Quantum flux stabilizer online protocol
+    </Typography>
+    <Typography variant="h3" size="medium" weight="medium">
+      H3
+    </Typography>
+    <Typography variant="label" size="medium" weight="bold" color="secondary">
+      Proxima Nova | Medium | 28 / 32 / 0
+    </Typography>
+    <Typography variant="h3" size="medium" weight="medium" className="truncate">
+      Quantum flux stabilizer online protocol
+    </Typography>
+    <Typography variant="h3" size="medium" weight="bold">
+      H3
+    </Typography>
+    <Typography variant="label" size="medium" weight="bold" color="secondary">
+      Proxima Nova | Bold | 28 / 32 / 0
+    </Typography>
+    <Typography variant="h3" size="medium" weight="bold" className="truncate">
+      Quantum flux stabilizer online protocol
+    </Typography>
+    <Divider />
+    <Divider />
+    <Divider />
+    <Typography variant="h4">H4</Typography>
+    <Typography variant="label" size="medium" weight="bold" color="secondary">
+      Proxima Nova | Regular | 24 / 28 / 0
+    </Typography>
+    <Typography variant="h4" className="truncate">
+      Quantum flux stabilizer online protocol
+    </Typography>
+    <Typography variant="h4" size="medium" weight="medium">
+      H4
+    </Typography>
+    <Typography variant="label" size="medium" weight="bold" color="secondary">
+      Proxima Nova | Medium | 24 / 28 / 0
+    </Typography>
+    <Typography variant="h4" size="medium" weight="medium" className="truncate">
+      Quantum flux stabilizer online protocol
+    </Typography>
+    <Typography variant="h4" size="medium" weight="bold">
+      H4
+    </Typography>
+    <Typography variant="label" size="medium" weight="bold" color="secondary">
+      Proxima Nova | Bold | 24 / 28 / 0
+    </Typography>
+    <Typography variant="h4" size="medium" weight="bold" className="truncate">
+      Quantum flux stabilizer online protocol
+    </Typography>
+    <Divider />
+    <Divider />
+    <Divider />
+    <Typography variant="h5">H5</Typography>
+    <Typography variant="label" size="medium" weight="bold" color="secondary">
+      Proxima Nova | Regular | 20 / 24 / 0
+    </Typography>
+    <Typography variant="h5" className="truncate">
+      Quantum flux stabilizer online protocol
+    </Typography>
+    <Typography variant="h5" size="medium" weight="medium">
+      H5
+    </Typography>
+    <Typography variant="label" size="medium" weight="bold" color="secondary">
+      Proxima Nova | Medium | 20 / 24 / 0
+    </Typography>
+    <Typography variant="h5" size="medium" weight="medium" className="truncate">
+      Quantum flux stabilizer online protocol
+    </Typography>
+    <Typography variant="h5" size="medium" weight="bold">
+      H5
+    </Typography>
+    <Typography variant="label" size="medium" weight="bold" color="secondary">
+      Proxima Nova | Bold | 20 / 24 / 0
+    </Typography>
+    <Typography variant="h5" size="medium" weight="bold" className="truncate">
+      Quantum flux stabilizer online protocol
+    </Typography>
+    <Divider />
+    <Divider />
+    <Divider />
+    <Typography variant="h6">H6</Typography>
+    <Typography variant="label" size="medium" weight="bold" color="secondary">
+      Proxima Nova | Regular | 16 / 24 / 0
+    </Typography>
+    <Typography variant="h6" className="truncate">
+      Quantum flux stabilizer online protocol
+    </Typography>
+    <Typography variant="h6" size="medium" weight="medium">
+      H6
+    </Typography>
+    <Typography variant="label" size="medium" weight="bold" color="secondary">
+      Proxima Nova | Medium | 16 / 24 / 0
+    </Typography>
+    <Typography variant="h6" size="medium" weight="medium" className="truncate">
+      Quantum flux stabilizer online protocol
+    </Typography>
+    <Typography variant="h6" size="medium" weight="bold">
+      H6
+    </Typography>
+    <Typography variant="label" size="medium" weight="bold" color="secondary">
+      Proxima Nova | Bold | 16 / 24 / 0
+    </Typography>
+    <Typography variant="h6" size="medium" weight="bold" className="truncate">
+      Quantum flux stabilizer online protocol
+    </Typography>
+  </div>
+);
+
+export const Body = () => (
+  <div className="grid grid-cols-[150px_250px_1fr] gap-6 auto-rows-[20px] justify-center items-center">
+    <Typography variant="body" size="large" weight="regular">
+      Body Large
+    </Typography>
+    <Typography variant="label" size="medium" weight="bold" color="secondary">
+      Inter | Regular | 16 / 24 / 0
+    </Typography>
+    <Typography
+      variant="body"
+      size="large"
+      weight="regular"
+      className="truncate"
+    >
+      Quantum flux stabilizer online protocol
+    </Typography>
+    <Typography variant="body" size="large" weight="medium">
+      Body Large
+    </Typography>
+    <Typography variant="label" size="medium" weight="bold" color="secondary">
+      Inter | Medium | 16 / 24 / 0
+    </Typography>
+    <Typography
+      variant="body"
+      size="large"
+      weight="medium"
+      className="truncate"
+    >
+      Quantum flux stabilizer online protocol
+    </Typography>
+    <Divider />
+    <Divider />
+    <Divider />
+    <Typography variant="body">Body Medium</Typography>
+    <Typography variant="label" size="medium" weight="bold" color="secondary">
+      Inter | Regular | 14 / 18 / 0
+    </Typography>
+    <Typography variant="body" className="truncate">
+      Quantum flux stabilizer online protocol
+    </Typography>
+    <Typography variant="body" size="medium" weight="medium">
+      Body Medium
+    </Typography>
+    <Typography variant="label" size="medium" weight="bold" color="secondary">
+      Inter | Medium | 14 / 18 / 0
+    </Typography>
+    <Typography
+      variant="body"
+      size="medium"
+      weight="medium"
+      className="truncate"
+    >
+      Quantum flux stabilizer online protocol
+    </Typography>
+    <Divider />
+    <Divider />
+    <Divider />
+    <Typography variant="body" size="small" weight="regular">
+      Body Small
+    </Typography>
+    <Typography variant="label" size="medium" weight="bold" color="secondary">
+      Inter | Regular | 12 / 14 / 0
+    </Typography>
+    <Typography
+      variant="body"
+      size="small"
+      weight="regular"
+      className="truncate"
+    >
+      Quantum flux stabilizer online protocol
+    </Typography>
+    <Typography variant="body" size="small" weight="medium">
+      Body Small
+    </Typography>
+    <Typography variant="label" size="medium" weight="bold" color="secondary">
+      Inter | Medium | 12 / 14 / 0
+    </Typography>
+    <Typography
+      variant="body"
+      size="small"
+      weight="medium"
+      className="truncate"
+    >
+      Quantum flux stabilizer online protocol
+    </Typography>
+  </div>
+);
+
+export const Button = () => (
+  <div className="grid grid-cols-[150px_250px_1fr] gap-6 auto-rows-[20px] justify-center items-center">
+    <Typography variant="button" size="large">
+      Button Large
+    </Typography>
+    <Typography variant="label" size="medium" weight="bold" color="secondary">
+      Inter | Semi Bold | 16 / 24 / 0
+    </Typography>
+    <Typography variant="button" size="large" className="truncate">
+      Quantum flux stabilizer online protocol
+    </Typography>
+    <Divider />
+    <Divider />
+    <Divider />
+    <Typography variant="button" size="medium">
+      Button Medium
+    </Typography>
+    <Typography variant="label" size="medium" weight="bold" color="secondary">
+      Inter | Semi Bold | 14 / 18 / 0
+    </Typography>
+    <Typography variant="button" size="medium" className="truncate">
+      Quantum flux stabilizer online protocol
+    </Typography>
+    <Divider />
+    <Divider />
+    <Divider />
+    <Typography variant="button" size="small">
+      Button Small
+    </Typography>
+    <Typography variant="label" size="medium" weight="bold" color="secondary">
+      Inter | Semi Bold | 12 / 14 / 0
+    </Typography>
+    <Typography variant="button" size="small" className="truncate">
+      Quantum flux stabilizer online protocol
+    </Typography>
+  </div>
+);
+
+export const Label = () => (
+  <div className="grid grid-cols-[150px_250px_1fr] gap-6 auto-rows-[20px] justify-center items-center">
+    <Typography variant="label" size="large">
+      Label Large
+    </Typography>
+    <Typography variant="label" size="medium" weight="bold" color="secondary">
+      Inter | Semi Bold | 14 / 14 / 0
+    </Typography>
+    <Typography variant="label" size="large" className="truncate">
+      Quantum flux stabilizer online protocol
+    </Typography>
+    <Divider />
+    <Divider />
+    <Divider />
+    <Typography variant="label" size="medium">
+      Label Medium
+    </Typography>
+    <Typography variant="label" size="medium" weight="bold" color="secondary">
+      Inter | Semi Bold | 12 / 12 / 0
+    </Typography>
+    <Typography variant="label" size="medium" className="truncate">
+      Quantum flux stabilizer online protocol
+    </Typography>
+    <Divider />
+    <Divider />
+    <Divider />
+    <Typography variant="label" size="small">
+      Label Small
+    </Typography>
+    <Typography variant="label" size="medium" weight="bold" color="secondary">
+      Inter | Semi Bold | 10 / 12 / 0
+    </Typography>
+    <Typography variant="label" size="small" className="truncate">
+      Quantum flux stabilizer online protocol
+    </Typography>
+  </div>
+);
+
+export const Monospace = () => (
+  <div className="grid grid-cols-[150px_250px_1fr] gap-6 auto-rows-[20px] justify-center items-center">
+    <Typography variant="monospace">Monospace</Typography>
+    <Typography variant="label" size="medium" weight="bold" color="secondary">
+      Share Tech Mono | Medium | 10 / 12 / 0
+    </Typography>
+    <Typography variant="monospace" className="truncate">
+      Quantum flux stabilizer online protocol
+    </Typography>
+  </div>
+);
diff --git a/src/typography/Typography.tsx b/src/typography/Typography.tsx
new file mode 100644
index 000000000..ab6ba98e1
--- /dev/null
+++ b/src/typography/Typography.tsx
@@ -0,0 +1,72 @@
+import type {
+  FC,
+  FunctionComponent,
+  HTMLAttributes,
+  PropsWithChildren
+} from 'react';
+import React from 'react';
+
+import type {
+  TypographyColor,
+  TypographySize,
+  TypographyTheme,
+  TypographyWeight
+} from '@/typography/TypographyTheme';
+import { cn, useComponentTheme } from '@/utils';
+
+const COMPONENTS_MAP: Record<string, string> = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h6',
+  h6: 'h6',
+  body: 'span',
+  label: 'label',
+  button: 'span',
+  monospace: 'span'
+};
+
+export interface TypographyProps
+  extends PropsWithChildren,
+    Omit<HTMLAttributes<HTMLElement>, 'color'> {
+  className?: string;
+  color?: keyof TypographyColor;
+  variant?: keyof TypographyTheme['variant'];
+  size?: keyof TypographySize;
+  weight?: keyof TypographyWeight;
+  theme?: TypographyTheme;
+}
+
+export const Typography: FC<TypographyProps> = ({
+  children,
+  color = 'primary',
+  variant = 'body',
+  size = 'medium',
+  weight = 'regular',
+  theme: customTheme,
+  className,
+  ...rest
+}) => {
+  const theme: TypographyTheme = useComponentTheme('typography', customTheme);
+
+  const Component = COMPONENTS_MAP[variant] as unknown as FunctionComponent<
+    HTMLAttributes<HTMLElement>
+  >;
+
+  return (
+    <Component
+      {...rest}
+      className={cn(
+        theme?.base,
+        theme?.variant?.[variant]?.base,
+        theme?.variant?.[variant]?.size?.[size],
+        theme?.color?.[color],
+        theme?.weight?.[weight],
+        className
+      )}
+    >
+      {children}
+    </Component>
+  );
+};
diff --git a/src/typography/TypographyTheme.ts b/src/typography/TypographyTheme.ts
index 9d969e55b..5e8f6355e 100644
--- a/src/typography/TypographyTheme.ts
+++ b/src/typography/TypographyTheme.ts
@@ -1,86 +1,112 @@
-export interface TypographyTheme {
+export interface TypographySize {
+  small?: string;
+  medium?: string;
+  large?: string;
+  [key: string]: string;
+}
+
+export interface TypographyWeight {
+  thin?: string;
+  extralight?: string;
+  light?: string;
+  regular?: string;
+  medium?: string;
+  semibold?: string;
+  bold?: string;
+  extrabold?: string;
+  black?: string;
+  [key: string]: string;
+}
+
+export interface TypographyColor {
+  primary?: string;
+  secondary?: string;
+  [key: string]: string;
+}
+
+interface TypographyVariant {
   base?: string;
-  text?: {
-    thin?: string;
-    bold?: string;
-    extraBold?: string;
-    italic?: string;
-  };
-  variant?: {
-    default?: string;
-    mono?: string;
-  };
-  colors?: {
-    primary: string;
-    secondary: string;
-    success: string;
-    warning: string;
-    error: string;
-    info: string;
-    [key: string]: string;
+  size?: TypographySize;
+}
+
+export interface TypographyTheme {
+  base: string;
+  color?: TypographyColor;
+  weight?: TypographyWeight;
+  variant: {
+    h1?: TypographyVariant;
+    h2?: TypographyVariant;
+    h3?: TypographyVariant;
+    h4?: TypographyVariant;
+    h5?: TypographyVariant;
+    h6?: TypographyVariant;
+    body?: TypographyVariant;
+    label?: TypographyVariant;
+    button?: TypographyVariant;
+    monospace?: TypographyVariant;
+    [key: string]: TypographyVariant;
   };
-  sub: string;
-  smallHeading: string;
-  secondaryHeading: string;
-  primaryHeading: string;
-  pageTitle: string;
-  disableMargins?: string;
 }
 
-const baseTheme: TypographyTheme = {
-  text: {
+export const typographyTheme: TypographyTheme = {
+  base: '',
+  color: {
+    primary: 'text-content-text-neutral-base',
+    secondary: 'text-content-text-neutral-2'
+  },
+  weight: {
     thin: 'font-thin',
-    bold: 'font-semibold',
-    extraBold: 'font-extrabold',
-    italic: 'italic'
+    extralight: 'font-extralight',
+    light: 'font-light',
+    regular: 'font-normal',
+    medium: 'font-medium',
+    semibold: 'font-semibold',
+    bold: 'font-bold',
+    extrabold: 'font-extrabold',
+    black: 'font-black'
   },
   variant: {
-    default: '',
-    mono: 'font-mono'
-  },
-  colors: {
-    primary: 'text-primary',
-    secondary: 'text-secondary',
-    success: 'text-success',
-    warning: 'text-warning',
-    error: 'text-error',
-    info: 'text-info'
-  },
-  sub: 'text-sm font-semibold mb-0.5',
-  smallHeading: 'text-base font-normal mb-1',
-  secondaryHeading: 'text-3xl font-normal mb-1',
-  primaryHeading: 'text-3xl font-extrabold mb-1',
-  pageTitle: 'text-[40px] font-semibold mb-5',
-  disableMargins: 'm-0'
-};
-
-export const typographyTheme = {
-  ...baseTheme
-};
-
-export const legacyTypographyTheme = {
-  ...baseTheme,
-  colors: {
-    primary: 'text-[var(--primary-color)]',
-    secondary: 'text-[var(--secondary-color)]',
-    success: 'text-[var(--success-color)]',
-    warning: 'text-[var(--warning-color)]',
-    error: 'text-[var(--error-color)]',
-    info: 'text-[var(--info-color)]'
-  },
-  pageTitle:
-    '[font-family:_var(--font-family)] [font-size:_var(--page-title-font-size)] [font-weight:_var(--page-title-font-weight)] color-[var(--page-title-color)] m-[var(--page-title-margin)]',
-  primaryHeading:
-    '[font-family:_var(--font-family)] [font-size:_var(--primary-heading-font-size)] [font-weight:_var(--primary-heading-font-weight)] text-[var(--primary-heading-color)] m-[var(--primary-heading-margin)]',
-  secondaryHeading:
-    '[font-family:_var(--font-family)] [font-size:_var(--secondary-heading-font-size)] [font-weight:_var(--secondary-heading-font-weight)] text-[var(--secondary-heading-color)] m-[var(--secondary-heading-margin)]',
-  smallHeading:
-    '[font-family:_var(--font-family)] [font-size:_var(--small-heading-font-size)] [font-weight:_var(--small-heading-font-weight)] text-[var(--small-heading-color)] m-[var(--small-heading-margin)]',
-  sub: '[font-size:_var(--sub-font-size)] [font-weight:_var(--sub-font-weight)] text-[var(--sub-color)] m-[var(--sub-margin)]',
-  text: {
-    ...baseTheme.text,
-    thin: '[font-weight:_var(--font-weight-thin)]',
-    bold: '[font-weight:_var(--font-weight-bold)]',
-    extraBold: '[font-weight:_var(--font-weight-extraBold)]'
+    h1: {
+      base: 'font-sans text-8xl font-normal'
+    },
+    h2: {
+      base: 'font-sans text-6xl font-normal'
+    },
+    h3: {
+      base: 'font-sans text-4xl font-normal'
+    },
+    h4: {
+      base: 'font-sans text-2xl font-normal'
+    },
+    h5: {
+      base: 'font-sans text-lg font-normal'
+    },
+    h6: {
+      base: 'font-sans text-base font-normal'
+    },
+    body: {
+      base: 'font-serif text-sm font-normal',
+      size: {
+        large: 'text-base leading-6',
+        small: 'text-xs leading-3.5'
+      }
+    },
+    button: {
+      base: 'font-serif text-sm font-semibold',
+      size: {
+        large: 'text-base',
+        small: 'text-xs'
+      }
+    },
+    label: {
+      base: 'font-serif text-xs font-semibold',
+      size: {
+        large: 'text-sm',
+        small: 'text-xxs'
+      }
+    },
+    monospace: {
+      base: 'font-mono font-medium text-xxs'
+    }
   }
 };
diff --git a/src/typography/TypographyThemeDeprecated.ts b/src/typography/TypographyThemeDeprecated.ts
new file mode 100644
index 000000000..79975042e
--- /dev/null
+++ b/src/typography/TypographyThemeDeprecated.ts
@@ -0,0 +1,55 @@
+export interface TypographyThemeDeprecated {
+  base?: string;
+  text?: {
+    thin?: string;
+    bold?: string;
+    extraBold?: string;
+    italic?: string;
+  };
+  variant?: {
+    default?: string;
+    mono?: string;
+  };
+  colors?: {
+    primary: string;
+    secondary: string;
+    success: string;
+    warning: string;
+    error: string;
+    info: string;
+    [key: string]: string;
+  };
+  sub: string;
+  smallHeading: string;
+  secondaryHeading: string;
+  primaryHeading: string;
+  pageTitle: string;
+  disableMargins?: string;
+}
+
+export const typographyThemeDeprecated = {
+  text: {
+    thin: 'font-thin',
+    bold: 'font-semibold',
+    extraBold: 'font-extrabold',
+    italic: 'italic'
+  },
+  variant: {
+    default: '',
+    mono: 'font-mono'
+  },
+  colors: {
+    primary: 'text-primary',
+    secondary: 'text-secondary',
+    success: 'text-success',
+    warning: 'text-warning',
+    error: 'text-error',
+    info: 'text-info'
+  },
+  sub: 'text-sm font-semibold mb-0.5',
+  smallHeading: 'text-sm font-normal mb-1',
+  secondaryHeading: 'text-2xl font-normal mb-1',
+  primaryHeading: 'text-2xl font-extrabold mb-1',
+  pageTitle: 'text-[40px] font-semibold mb-5',
+  disableMargins: 'm-0'
+};
diff --git a/src/typography/index.ts b/src/typography/index.ts
index 0403d7cc0..795dea295 100644
--- a/src/typography/index.ts
+++ b/src/typography/index.ts
@@ -4,4 +4,6 @@ export * from './SecondaryHeading';
 export * from './SmallHeading';
 export * from './Sub';
 export * from './Text';
+export * from './Typography';
 export * from './TypographyTheme';
+export * from './TypographyThemeDeprecated';
diff --git a/src/utils/CloneElement.tsx b/src/utils/CloneElement.tsx
index fc735dd69..b01cf5e06 100644
--- a/src/utils/CloneElement.tsx
+++ b/src/utils/CloneElement.tsx
@@ -1,5 +1,5 @@
-import { cloneElement, useMemo } from 'react';
 import classNames from 'classnames';
+import { cloneElement, useMemo } from 'react';
 
 interface CloneElementProps {
   element: any;
diff --git a/src/utils/ExitListener/ExitListener.story.tsx b/src/utils/ExitListener/ExitListener.story.tsx
index 3b56818e0..ec9e07edf 100644
--- a/src/utils/ExitListener/ExitListener.story.tsx
+++ b/src/utils/ExitListener/ExitListener.story.tsx
@@ -1,7 +1,10 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+
+import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
-import { useExitListener } from './useExitListener';
 import { useRef, useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+
+import { useExitListener } from './useExitListener';
 
 const meta: Meta = {
   title: 'Components/Utils/Exit Listener'
diff --git a/src/utils/ExitListener/useExitListener.tsx b/src/utils/ExitListener/useExitListener.tsx
index 862c40640..3c326cafc 100644
--- a/src/utils/ExitListener/useExitListener.tsx
+++ b/src/utils/ExitListener/useExitListener.tsx
@@ -1,4 +1,5 @@
-import { MutableRefObject, RefObject, useEffect } from 'react';
+import type { MutableRefObject, RefObject } from 'react';
+import { useEffect } from 'react';
 
 interface ExitListenerOptions {
   /**
diff --git a/src/utils/Overlay/ConnectedOverlay/ConnectedOverlay.story.tsx b/src/utils/Overlay/ConnectedOverlay/ConnectedOverlay.story.tsx
index 6688f8464..2630ae457 100644
--- a/src/utils/Overlay/ConnectedOverlay/ConnectedOverlay.story.tsx
+++ b/src/utils/Overlay/ConnectedOverlay/ConnectedOverlay.story.tsx
@@ -1,7 +1,11 @@
-import { Meta, StoryObj } from '@storybook/react';
-import React, { useState, useRef } from 'react';
-import { ConnectedOverlay } from './ConnectedOverlay';
+/* eslint-disable react-hooks/rules-of-hooks */
+
+import type { Meta, StoryObj } from '@storybook/react';
 import { motion } from 'motion/react';
+import type { FC, PropsWithChildren } from 'react';
+import React, { useRef, useState } from 'react';
+
+import { ConnectedOverlay } from './ConnectedOverlay';
 
 const meta: Meta<typeof ConnectedOverlay> = {
   title: 'Components/Utils/Overlay/Connected Overlay',
@@ -80,7 +84,10 @@ export const DefaultOpen: Story = {
   }
 };
 
-const Tooltip = ({ children, content }) => {
+const Tooltip: FC<PropsWithChildren & { content?: string }> = ({
+  children,
+  content
+}) => {
   const timeout = React.useRef<any>();
   const [open, setOpen] = React.useState(false);
 
@@ -258,7 +265,10 @@ export const MenuInMenuExample: Story = {
   }
 };
 
-const ContextMenu = ({ children, content }) => {
+const ContextMenu: FC<PropsWithChildren<{ content: any }>> = ({
+  children,
+  content
+}) => {
   const timeout = React.useRef<any>();
   const [open, setOpen] = React.useState(false);
 
diff --git a/src/utils/Overlay/ConnectedOverlay/ConnectedOverlay.tsx b/src/utils/Overlay/ConnectedOverlay/ConnectedOverlay.tsx
index 7e698fa10..41f4ebaa0 100644
--- a/src/utils/Overlay/ConnectedOverlay/ConnectedOverlay.tsx
+++ b/src/utils/Overlay/ConnectedOverlay/ConnectedOverlay.tsx
@@ -1,21 +1,20 @@
+import { AnimatePresence } from 'motion/react';
 import React, {
-  FC,
-  useRef,
-  useEffect,
-  Fragment,
   forwardRef,
-  LegacyRef,
+  Fragment,
+  useEffect,
   useImperativeHandle,
-  useMemo
+  useMemo,
+  useRef
 } from 'react';
-import { TriggerTypes, OverlayTrigger } from '@/utils/Overlay/OverlayTrigger';
-import { Modifiers, Placement, ReferenceProp } from '@/utils/Position';
-import { AnimatePresence } from 'motion/react';
+
 import { OverlayContext } from '@/utils/Overlay/OverlayContext';
-import {
-  ConnectedOverlayContent,
-  ConnectedOverlayContentRef
-} from './ConnectedOverlayContent';
+import type { TriggerTypes } from '@/utils/Overlay/OverlayTrigger';
+import { OverlayTrigger } from '@/utils/Overlay/OverlayTrigger';
+import type { Modifiers, Placement, ReferenceProp } from '@/utils/Position';
+
+import type { ConnectedOverlayContentRef } from './ConnectedOverlayContent';
+import { ConnectedOverlayContent } from './ConnectedOverlayContent';
 
 export interface OverlayEvent {
   /**
@@ -116,11 +115,10 @@ export interface ConnectedOverlayProps {
   onClose?: (event?: any) => void;
 }
 
-export const ConnectedOverlay: FC<
-  ConnectedOverlayProps & {
-    ref?: LegacyRef<ConnectedOverlayContentRef>;
-  }
-> = forwardRef(
+export const ConnectedOverlay = forwardRef<
+  ConnectedOverlayContentRef,
+  ConnectedOverlayProps
+>(
   (
     {
       reference,
diff --git a/src/utils/Overlay/ConnectedOverlay/ConnectedOverlayContent.tsx b/src/utils/Overlay/ConnectedOverlay/ConnectedOverlayContent.tsx
index 9ae3b6719..1158844ff 100644
--- a/src/utils/Overlay/ConnectedOverlay/ConnectedOverlayContent.tsx
+++ b/src/utils/Overlay/ConnectedOverlay/ConnectedOverlayContent.tsx
@@ -1,15 +1,15 @@
+import type { RefObject } from 'react';
 import React, {
-  FC,
   forwardRef,
-  useImperativeHandle,
-  RefObject,
-  useState,
   useCallback,
-  LegacyRef
+  useImperativeHandle,
+  useState
 } from 'react';
+
 import { useExitListener } from '@/utils/ExitListener';
-import { Modifiers, Placement, usePosition } from '@/utils/Position';
 import { OverlayPortal, portals } from '@/utils/Overlay/OverlayPortal';
+import type { Modifiers, Placement } from '@/utils/Position';
+import { usePosition } from '@/utils/Position';
 import { useId } from '@/utils/useId';
 
 export interface ConnectedOverlayContentRef {
@@ -73,11 +73,10 @@ export interface ConnectedOverlayContentProps {
   onClose?: (event?: any) => void;
 }
 
-export const ConnectedOverlayContent: FC<
-  ConnectedOverlayContentProps & {
-    ref?: LegacyRef<ConnectedOverlayContentRef>;
-  }
-> = forwardRef(
+export const ConnectedOverlayContent = forwardRef<
+  ConnectedOverlayContentRef,
+  ConnectedOverlayContentProps
+>(
   (
     {
       triggerRef,
diff --git a/src/utils/Overlay/GlobalOverlay/GlobalOverlay.story.tsx b/src/utils/Overlay/GlobalOverlay/GlobalOverlay.story.tsx
index 6695af250..db9a5f6e6 100644
--- a/src/utils/Overlay/GlobalOverlay/GlobalOverlay.story.tsx
+++ b/src/utils/Overlay/GlobalOverlay/GlobalOverlay.story.tsx
@@ -1,8 +1,12 @@
-import { Meta, StoryObj } from '@storybook/react';
-import React, { Fragment, useState } from 'react';
-import { GlobalOverlay } from './GlobalOverlay';
+/* eslint-disable react-hooks/rules-of-hooks */
+
+import type { Meta, StoryObj } from '@storybook/react';
 import { motion } from 'motion/react';
+import type { FC, PropsWithChildren } from 'react';
+import React, { Fragment, useState } from 'react';
+
 import { useOverlay } from '../useOverlay';
+import { GlobalOverlay } from './GlobalOverlay';
 
 const meta: Meta<typeof GlobalOverlay> = {
   title: 'Components/Utils/Overlay/Global Overlay',
@@ -173,7 +177,9 @@ export const DialogExample: Story = {
   }
 };
 
-const Dialog = ({ visible, header, children, onClose }) => (
+const Dialog: FC<
+  PropsWithChildren<{ visible: boolean; header: string; onClose: () => void }>
+> = ({ visible, header, children, onClose }) => (
   <GlobalOverlay open={visible} onClose={onClose}>
     {({ overlayIndex }) => (
       <div
diff --git a/src/utils/Overlay/GlobalOverlay/GlobalOverlay.tsx b/src/utils/Overlay/GlobalOverlay/GlobalOverlay.tsx
index 8c227722f..f903650f8 100644
--- a/src/utils/Overlay/GlobalOverlay/GlobalOverlay.tsx
+++ b/src/utils/Overlay/GlobalOverlay/GlobalOverlay.tsx
@@ -1,13 +1,15 @@
-import React, { FC, Fragment, useCallback, useEffect, useRef } from 'react';
 import {
-  disableBodyScroll,
-  clearAllBodyScrollLocks
+  clearAllBodyScrollLocks,
+  disableBodyScroll
 } from 'body-scroll-lock-upgrade';
-import { OverlayContext } from '@/utils/Overlay/OverlayContext';
 import { AnimatePresence } from 'motion/react';
-import { OverlayPortal } from '@/utils/Overlay/OverlayPortal';
-import { useExitListener } from '@/utils/ExitListener';
+import type { FC } from 'react';
+import React, { Fragment, useCallback, useEffect, useRef } from 'react';
+
 import { Backdrop } from '@/layers/Backdrop';
+import { useExitListener } from '@/utils/ExitListener';
+import { OverlayContext } from '@/utils/Overlay/OverlayContext';
+import { OverlayPortal } from '@/utils/Overlay/OverlayPortal';
 
 export interface GlobalOverlayProps {
   /**
@@ -111,6 +113,7 @@ export const GlobalOverlay: FC<GlobalOverlayProps> = ({
                     className={backdropClassName}
                   />
                 )}
+                {/* eslint-disable-next-line react/no-unknown-property */}
                 <div body-scroll-lock-ignore="true">
                   {children({ overlayIndex, portalIndex })}
                 </div>
diff --git a/src/utils/Overlay/OverlayPortal/OverlayPortal.story.tsx b/src/utils/Overlay/OverlayPortal/OverlayPortal.story.tsx
index fd178c598..794a1938c 100644
--- a/src/utils/Overlay/OverlayPortal/OverlayPortal.story.tsx
+++ b/src/utils/Overlay/OverlayPortal/OverlayPortal.story.tsx
@@ -1,5 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
+
 import { OverlayPortal } from './OverlayPortal';
 
 const meta: Meta<typeof OverlayPortal> = {
diff --git a/src/utils/Overlay/OverlayPortal/OverlayPortal.tsx b/src/utils/Overlay/OverlayPortal/OverlayPortal.tsx
index 23e2a48ff..a68fd19f3 100644
--- a/src/utils/Overlay/OverlayPortal/OverlayPortal.tsx
+++ b/src/utils/Overlay/OverlayPortal/OverlayPortal.tsx
@@ -1,14 +1,13 @@
+import type { CSSProperties, LegacyRef } from 'react';
 import React, {
-  CSSProperties,
-  FC,
   forwardRef,
-  LegacyRef,
   useImperativeHandle,
   useRef,
   useState
 } from 'react';
-import { useId } from '@/utils/useId';
+
 import { Portal } from '@/utils/Portal';
+import { useId } from '@/utils/useId';
 
 // NOTE: This should not be used by external consumers.
 export const portals: string[] = [];
@@ -84,63 +83,54 @@ export interface OverlayPortalProps {
   onUnmount?: () => void;
 }
 
-export const OverlayPortal: FC<OverlayPortalProps & OverlayPortalRef> =
-  forwardRef(
-    (
-      {
-        className,
-        children,
-        onMount,
-        onUnmount,
-        appendToBody = true,
-        id,
-        style
-      },
-      ref
-    ) => {
-      let portalId = useId(id);
-
-      const [portalIndex, setPortalIndex] = useState<number | null>(null);
-      const [overlayIndex, setOverlayIndex] = useState<number | null>(null);
-      const portalRef = useRef<any | null>(null);
-
-      useImperativeHandle(ref, () => portalRef.current);
-
-      return (
-        <Portal
-          className={className}
-          ref={portalRef}
-          style={style}
-          onMount={() => {
-            portals.push(portalId);
-
-            let pidx = portals.indexOf(portalId);
-            setPortalIndex(pidx);
-
-            const overlayIdx = START_INDEX + pidx * 2 + 1;
-            setOverlayIndex(overlayIdx);
-
-            onMount?.({
-              portalId,
-              overlayIndex: overlayIdx,
-              portalIndex: pidx,
-              backdropIndex: overlayIdx
-            });
-          }}
-          onUnmount={() => {
-            onUnmount?.();
-            portals.splice(portals.indexOf(portalId), 1);
-            setPortalIndex(null);
-            setOverlayIndex(null);
-          }}
-        >
-          {children({
-            overlayIndex: overlayIndex as number,
-            portalIndex: portalIndex as number,
-            backdropIndex: overlayIndex as number,
-            portalId
-          })}
-        </Portal>
-      );
-    }
-  );
+export const OverlayPortal = forwardRef<HTMLElement, OverlayPortalProps>(
+  (
+    { className, children, onMount, onUnmount, appendToBody = true, id, style },
+    ref
+  ) => {
+    const portalId = useId(id);
+
+    const [portalIndex, setPortalIndex] = useState<number | null>(null);
+    const [overlayIndex, setOverlayIndex] = useState<number | null>(null);
+    const portalRef = useRef<any | null>(null);
+
+    useImperativeHandle(ref, () => portalRef.current);
+
+    return (
+      <Portal
+        className={className}
+        ref={portalRef}
+        style={style}
+        onMount={() => {
+          portals.push(portalId);
+
+          const pidx = portals.indexOf(portalId);
+          setPortalIndex(pidx);
+
+          const overlayIdx = START_INDEX + pidx * 2 + 1;
+          setOverlayIndex(overlayIdx);
+
+          onMount?.({
+            portalId,
+            overlayIndex: overlayIdx,
+            portalIndex: pidx,
+            backdropIndex: overlayIdx
+          });
+        }}
+        onUnmount={() => {
+          onUnmount?.();
+          portals.splice(portals.indexOf(portalId), 1);
+          setPortalIndex(null);
+          setOverlayIndex(null);
+        }}
+      >
+        {children({
+          overlayIndex: overlayIndex as number,
+          portalIndex: portalIndex as number,
+          backdropIndex: overlayIndex as number,
+          portalId
+        })}
+      </Portal>
+    );
+  }
+);
diff --git a/src/utils/Overlay/OverlayTrigger.story.tsx b/src/utils/Overlay/OverlayTrigger.story.tsx
index 594e765df..d28291e15 100644
--- a/src/utils/Overlay/OverlayTrigger.story.tsx
+++ b/src/utils/Overlay/OverlayTrigger.story.tsx
@@ -1,4 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
+
 import { OverlayTrigger } from './OverlayTrigger';
 
 const meta: Meta<typeof OverlayTrigger> = {
diff --git a/src/utils/Overlay/OverlayTrigger.tsx b/src/utils/Overlay/OverlayTrigger.tsx
index eb35f1d78..7db89b008 100644
--- a/src/utils/Overlay/OverlayTrigger.tsx
+++ b/src/utils/Overlay/OverlayTrigger.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, forwardRef, FC, LegacyRef } from 'react';
+import React, { forwardRef, useCallback } from 'react';
 
 export type TriggerTypes = 'hover' | 'click' | 'contextmenu' | 'focus' | 'key';
 
@@ -49,11 +49,7 @@ export interface OverlayTriggerProps {
   onClose?: (event: OverlayTriggerEvent) => void;
 }
 
-export const OverlayTrigger: FC<
-  OverlayTriggerProps & {
-    ref: LegacyRef<HTMLSpanElement>;
-  }
-> = forwardRef(
+export const OverlayTrigger = forwardRef<HTMLSpanElement, OverlayTriggerProps>(
   (
     {
       children,
diff --git a/src/utils/Overlay/index.ts b/src/utils/Overlay/index.ts
index 8ea126b49..99223c347 100644
--- a/src/utils/Overlay/index.ts
+++ b/src/utils/Overlay/index.ts
@@ -1,6 +1,6 @@
+export * from './ConnectedOverlay';
 export * from './GlobalOverlay';
+export * from './OverlayContext';
 export * from './OverlayPortal';
 export * from './OverlayTrigger';
-export * from './ConnectedOverlay';
-export * from './OverlayContext';
 export * from './useOverlay';
diff --git a/src/utils/Overlay/useOverlay.tsx b/src/utils/Overlay/useOverlay.tsx
index 0bd5c7bc3..191e98abd 100644
--- a/src/utils/Overlay/useOverlay.tsx
+++ b/src/utils/Overlay/useOverlay.tsx
@@ -1,4 +1,5 @@
 import { useContext } from 'react';
+
 import { OverlayContext } from './OverlayContext';
 
 /**
diff --git a/src/utils/Portal/Portal.story.tsx b/src/utils/Portal/Portal.story.tsx
index 65f0f3847..d09e82426 100644
--- a/src/utils/Portal/Portal.story.tsx
+++ b/src/utils/Portal/Portal.story.tsx
@@ -1,5 +1,8 @@
-import { Meta, StoryObj } from '@storybook/react';
-import React, { useState, useRef } from 'react';
+/* eslint-disable react-hooks/rules-of-hooks */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useRef, useState } from 'react';
+
 import { Portal } from './Portal';
 
 const meta: Meta<typeof Portal> = {
diff --git a/src/utils/Portal/Portal.ts b/src/utils/Portal/Portal.ts
index 094aef2e1..e17d1089f 100644
--- a/src/utils/Portal/Portal.ts
+++ b/src/utils/Portal/Portal.ts
@@ -1,15 +1,15 @@
-import React, { CSSProperties } from 'react';
+import type { CSSProperties } from 'react';
+import type React from 'react';
+import type { FC, LegacyRef, PropsWithChildren } from 'react';
 import {
-  useImperativeHandle,
   forwardRef,
-  FC,
-  PropsWithChildren,
-  useLayoutEffect,
-  useRef,
   useEffect,
-  LegacyRef
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef
 } from 'react';
 import { createPortal } from 'react-dom';
+
 import { useUnmount } from '@/utils/useUnmount';
 
 export interface PortalProps extends PropsWithChildren {
diff --git a/src/utils/Position/Position.story.tsx b/src/utils/Position/Position.story.tsx
index 5a9d510ae..966b11d81 100644
--- a/src/utils/Position/Position.story.tsx
+++ b/src/utils/Position/Position.story.tsx
@@ -1,5 +1,6 @@
-import { Meta } from '@storybook/react';
-import React, { useRef, useState } from 'react';
+import type { Meta } from '@storybook/react';
+import React, { useState } from 'react';
+
 import { usePosition } from './usePosition';
 
 const meta: Meta = {
diff --git a/src/utils/Position/usePosition.tsx b/src/utils/Position/usePosition.tsx
index 361224016..b396cfb42 100644
--- a/src/utils/Position/usePosition.tsx
+++ b/src/utils/Position/usePosition.tsx
@@ -1,19 +1,16 @@
-import {
-  useLayoutEffect,
-  RefObject,
-  useCallback,
-  useEffect,
-  useMemo
-} from 'react';
-import {
-  useFloating,
-  Placement as FloatingUIPlacement,
+import type {
   Middleware,
+  Placement as FloatingUIPlacement
+} from '@floating-ui/react';
+import {
+  autoUpdate,
   flip,
   limitShift,
   shift,
-  autoUpdate
+  useFloating
 } from '@floating-ui/react';
+import type { RefObject } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo } from 'react';
 
 export type Placement = FloatingUIPlacement;
 export type Modifiers = Middleware[];
diff --git a/src/utils/Theme/Theme.story.tsx b/src/utils/Theme/Theme.story.tsx
index 12ea735da..935061218 100644
--- a/src/utils/Theme/Theme.story.tsx
+++ b/src/utils/Theme/Theme.story.tsx
@@ -1,21 +1,22 @@
 import React from 'react';
+
 import {
-  TypographyBlocks,
-  ColorBlocks,
-  SpacingBlocks,
   BorderBlocks,
+  ColorBlocks,
+  ComponentBlocks,
   IconBlocks,
   ShadowBlocks,
-  ComponentBlocks
+  SpacingBlocks,
+  TypographyBlocks
 } from './blocks';
-import favoriteIcon from './icon-demo.svg';
 import { useTheme } from './hooks/useTheme';
+import favoriteIcon from './icon-demo.svg';
 import { extractTheme } from './themes/extractTheme';
 
 export default {
   title: 'Components/Theme',
   decorators: [
-    Story => {
+    (Story, context) => {
       const { tokens } = useTheme();
 
       const {
@@ -38,6 +39,7 @@ export default {
             fontFamily={fontFamily}
             fontSize={fontSize}
             fontWeight={fontWeight}
+            theme={context?.globals?.theme}
           />
         </div>
       );
@@ -45,8 +47,8 @@ export default {
   ]
 };
 
-export const Colors = (_: unknown, { colors }) => {
-  return <ColorBlocks colors={colors} />;
+export const Colors = (_: unknown, { colors, theme }) => {
+  return <ColorBlocks colors={colors} theme={theme} />;
 };
 
 export const Typography = (
diff --git a/src/utils/Theme/ThemeProvider.tsx b/src/utils/Theme/ThemeProvider.tsx
index c5c82ff0f..f3671f11c 100644
--- a/src/utils/Theme/ThemeProvider.tsx
+++ b/src/utils/Theme/ThemeProvider.tsx
@@ -1,14 +1,11 @@
 'use client';
 
-import React, {
-  createContext,
-  FC,
-  PropsWithChildren,
-  useEffect,
-  useState
-} from 'react';
+import type { FC, PropsWithChildren } from 'react';
+import React, { createContext, useEffect, useState } from 'react';
+
 import { getThemeVariables, mergeDeep, observeThemeSwitcher } from './helpers';
-import { ReablocksTheme, theme as defaultTheme } from './themes/theme';
+import type { ReablocksTheme } from './themes/theme';
+import { theme as defaultTheme } from './themes/theme';
 
 export interface ThemeContextProps {
   theme: ReablocksTheme;
@@ -21,6 +18,7 @@ export const ThemeContext = createContext<ThemeContextProps>(null);
 
 interface ThemeProviderProps extends PropsWithChildren {
   theme: ReablocksTheme;
+  twMergeConfig?: any;
 }
 
 export const ThemeProvider: FC<ThemeProviderProps> = ({ children, theme }) => {
diff --git a/src/utils/Theme/blocks/BorderBlocks.tsx b/src/utils/Theme/blocks/BorderBlocks.tsx
index bdabb65e5..4c0ffd390 100644
--- a/src/utils/Theme/blocks/BorderBlocks.tsx
+++ b/src/utils/Theme/blocks/BorderBlocks.tsx
@@ -1,6 +1,10 @@
 import React from 'react';
 
-export const BorderBlocks = ({ borders }) => (
+export const BorderBlocks = ({
+  borders
+}: {
+  borders: { [key: string]: string };
+}) => (
   <div
     style={{
       padding: '2px 4px',
diff --git a/src/utils/Theme/blocks/ColorBlocks.tsx b/src/utils/Theme/blocks/ColorBlocks.tsx
index d986ff155..adda32b26 100644
--- a/src/utils/Theme/blocks/ColorBlocks.tsx
+++ b/src/utils/Theme/blocks/ColorBlocks.tsx
@@ -1,5 +1,6 @@
-import React, { FC, useMemo } from 'react';
 import chroma from 'chroma-js';
+import type { FC } from 'react';
+import React, { useMemo } from 'react';
 
 export interface ColorBlockProps {
   name: string;
@@ -7,6 +8,20 @@ export interface ColorBlockProps {
   className?: string;
 }
 
+const COLOR_TOKENS = [
+  'white',
+  'black',
+  'neutrals',
+  'blue',
+  'green',
+  'orange',
+  'pink',
+  'purple',
+  'red',
+  'teal',
+  'yellow'
+];
+
 export const ColorBlock: FC<ColorBlockProps> = ({ name, color, className }) => (
   <div
     key={name}
@@ -58,13 +73,15 @@ interface ColorPaletteBlockProps {
   color: string;
   className?: string;
   showName?: boolean;
+  theme: string;
 }
 
 export const ColorPaletteBlock: FC<ColorPaletteBlockProps> = ({
   name,
   color,
   className,
-  showName = true
+  showName = true,
+  theme = 'dark'
 }) => {
   let fontColor = 'var(--body-color)';
   if (!name.includes('overlay')) {
@@ -80,10 +97,13 @@ export const ColorPaletteBlock: FC<ColorPaletteBlockProps> = ({
 
     if (valid) {
       const colorInstance = isOklch ? chroma.oklch(oklchColor) : chroma(color);
+      const luminance = colorInstance.luminance();
+      const alpha = colorInstance.alpha();
+      const effectiveLuminance =
+        alpha * luminance + (1 - alpha) * (theme === 'light' ? 1 : 0);
+
       fontColor =
-        colorInstance.luminance() >= 0.3
-          ? colorInstance.darken(100).css()
-          : colorInstance.brighten(100).css();
+        effectiveLuminance > 0.5 ? 'var(--color-black)' : 'var(--color-white)';
     }
   }
 
@@ -92,7 +112,8 @@ export const ColorPaletteBlock: FC<ColorPaletteBlockProps> = ({
       key={name}
       className={className}
       style={{
-        borderRight: 'solid 1px var(--border-color)'
+        border: 'solid 1px var(--border-color)',
+        margin: '-0.5px'
       }}
     >
       <div
@@ -134,6 +155,7 @@ export interface ColorPaletteBlocksProps {
   className?: string;
   token?: string | null;
   showNames?: boolean;
+  theme: string;
 }
 
 const extractColorName = (colorToken: string): string => {
@@ -145,7 +167,8 @@ export const ColorPaletteBlocks: FC<ColorPaletteBlocksProps> = ({
   name,
   colors,
   className,
-  showNames = true
+  showNames = true,
+  theme
 }) => (
   <div
     className={className}
@@ -153,14 +176,16 @@ export const ColorPaletteBlocks: FC<ColorPaletteBlocksProps> = ({
       marginBottom: '24px'
     }}
   >
-    <h3 style={{ fontWeight: 500, margin: 0 }}>{name}</h3>
+    <h3 style={{ textTransform: 'capitalize', fontWeight: 500, margin: 0 }}>
+      {name}
+    </h3>
     <div
       style={{
         display: 'grid',
         overflow: 'hidden',
         borderRadius: '6px',
         border: 'solid 1px var(--border-color)',
-        gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))'
+        gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))'
       }}
     >
       {typeof colors === 'string' && (
@@ -174,6 +199,7 @@ export const ColorPaletteBlocks: FC<ColorPaletteBlocksProps> = ({
               name={color.replace('--color-', '')}
               color={colors[color]}
               showName={showNames}
+              theme={theme}
             />
           ))}
         </>
@@ -185,7 +211,13 @@ export const ColorPaletteBlocks: FC<ColorPaletteBlocksProps> = ({
   </div>
 );
 
-export const ColorBlocks = ({ colors }: { colors: Record<string, string> }) => {
+export const ColorBlocks = ({
+  colors,
+  theme
+}: {
+  colors: Record<string, string>;
+  theme: string;
+}) => {
   const groupedColors = useMemo((): Record<string, Record<string, string>> => {
     const groups = Object.keys(colors).reduce(
       (acc, token) => {
@@ -200,9 +232,26 @@ export const ColorBlocks = ({ colors }: { colors: Record<string, string> }) => {
       {} as Record<string, Record<string, string>>
     );
 
-    const sortedGroupNames = Object.keys(groups).sort(
-      (a, b) => Object.keys(groups[a]).length - Object.keys(groups[b]).length
-    );
+    const sortedGroupNames = Object.keys(groups).sort((a, b) => {
+      const indexA = COLOR_TOKENS.indexOf(a);
+      const indexB = COLOR_TOKENS.indexOf(b);
+
+      const aIsColor = indexA !== -1;
+      const bIsColor = indexB !== -1;
+
+      // Both are colors → sort by token order
+      if (aIsColor && bIsColor) {
+        return indexA - indexB;
+      }
+
+      // Only A is a color → A comes first
+      if (aIsColor) return -1;
+
+      // Only B is a color → B comes first
+      if (bIsColor) return 1;
+
+      return a.localeCompare(b); // both are non-color → sort alphabetically
+    });
 
     return sortedGroupNames.reduce(
       (sorted, groupName) => {
@@ -228,6 +277,7 @@ export const ColorBlocks = ({ colors }: { colors: Record<string, string> }) => {
               key={key}
               name={extractColorName(key)}
               colors={groupedColors[key]}
+              theme={theme}
             />
           ))}
         </>
diff --git a/src/utils/Theme/blocks/ComponentBlocks.tsx b/src/utils/Theme/blocks/ComponentBlocks.tsx
index f9a4419ca..a2d6acba8 100644
--- a/src/utils/Theme/blocks/ComponentBlocks.tsx
+++ b/src/utils/Theme/blocks/ComponentBlocks.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
-import { ReablocksTheme } from '@/utils/Theme/themes';
-import { JsonTree } from '@/layout/Tree';
+
 import { Button } from '@/elements';
 import { Notifications, NotificationsContext } from '@/layers';
+import { JsonTree } from '@/layout/Tree';
+import type { ReablocksTheme } from '@/utils/Theme/themes';
 
 export const ComponentBlocks = ({
   components
@@ -44,7 +45,7 @@ export const ComponentBlocks = ({
                     size="small"
                     color="secondary"
                     variant="outline"
-                    className="absolute right-0 bottom-0 text-xs"
+                    className="absolute right-0 bottom-0 text-xxs"
                     onClick={async () => {
                       try {
                         await navigator.clipboard.writeText(
diff --git a/src/utils/Theme/blocks/IconBlocks.tsx b/src/utils/Theme/blocks/IconBlocks.tsx
index 4377f7be8..2cf1b8e1b 100644
--- a/src/utils/Theme/blocks/IconBlocks.tsx
+++ b/src/utils/Theme/blocks/IconBlocks.tsx
@@ -1,4 +1,5 @@
-import React, { FC, Suspense } from 'react';
+import type { FC } from 'react';
+import React, { Suspense } from 'react';
 
 export interface IconBlockProps {
   name: string;
diff --git a/src/utils/Theme/blocks/PaletteBlocks.tsx b/src/utils/Theme/blocks/PaletteBlocks.tsx
index 353bf70f0..12cbaf1eb 100644
--- a/src/utils/Theme/blocks/PaletteBlocks.tsx
+++ b/src/utils/Theme/blocks/PaletteBlocks.tsx
@@ -1,4 +1,6 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
+
 import { ColorBlock } from './ColorBlocks';
 
 export interface PaletteBlocksProps {
diff --git a/src/utils/Theme/blocks/ShadowBlocks.tsx b/src/utils/Theme/blocks/ShadowBlocks.tsx
index 750e23d20..dee138981 100644
--- a/src/utils/Theme/blocks/ShadowBlocks.tsx
+++ b/src/utils/Theme/blocks/ShadowBlocks.tsx
@@ -1,6 +1,10 @@
 import React from 'react';
 
-export const ShadowBlocks = ({ shadows }) => (
+export const ShadowBlocks = ({
+  shadows
+}: {
+  shadows: { [key: string]: string };
+}) => (
   <div
     style={{
       padding: '4px 8px',
diff --git a/src/utils/Theme/blocks/SpacingBlocks.tsx b/src/utils/Theme/blocks/SpacingBlocks.tsx
index f68733ad1..431f491c2 100644
--- a/src/utils/Theme/blocks/SpacingBlocks.tsx
+++ b/src/utils/Theme/blocks/SpacingBlocks.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-export const SpacingBlocks = ({ spacings }) => {
+export const SpacingBlocks = ({ spacings }: any) => {
   const steps = Array.from({ length: 20 }, (_, index) => index + 1);
   steps.unshift(0.5);
   steps.push(...[24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96]);
diff --git a/src/utils/Theme/blocks/TypographyBlocks.tsx b/src/utils/Theme/blocks/TypographyBlocks.tsx
index 5f203aa1b..79a3cf2e8 100644
--- a/src/utils/Theme/blocks/TypographyBlocks.tsx
+++ b/src/utils/Theme/blocks/TypographyBlocks.tsx
@@ -1,4 +1,5 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
 
 export interface TypographyLetterBlockProps {
   fontFamily: string;
diff --git a/src/utils/Theme/blocks/index.ts b/src/utils/Theme/blocks/index.ts
index 49af898ee..a8b83f0b7 100644
--- a/src/utils/Theme/blocks/index.ts
+++ b/src/utils/Theme/blocks/index.ts
@@ -1,8 +1,8 @@
-export * from './ColorBlocks';
-export * from './TypographyBlocks';
-export * from './SpacingBlocks';
-export * from './PaletteBlocks';
 export * from './BorderBlocks';
-export * from './ShadowBlocks';
+export * from './ColorBlocks';
 export * from './ComponentBlocks';
 export * from './IconBlocks';
+export * from './PaletteBlocks';
+export * from './ShadowBlocks';
+export * from './SpacingBlocks';
+export * from './TypographyBlocks';
diff --git a/src/utils/Theme/helpers/cloneDeep.ts b/src/utils/Theme/helpers/cloneDeep.ts
index ea2544aab..a4c440a1f 100644
--- a/src/utils/Theme/helpers/cloneDeep.ts
+++ b/src/utils/Theme/helpers/cloneDeep.ts
@@ -1,18 +1,8 @@
-import { isObject } from './isObject';
+import clone from 'lodash.clonedeep';
 
 /**
  * Deep clone an object.
  */
 export function cloneDeep<T>(source: T): T {
-  if (!isObject(source)) {
-    return source;
-  }
-
-  const output: Record<string, unknown> = {};
-
-  for (const key in source) {
-    output[key] = cloneDeep(source[key]);
-  }
-
-  return output as T;
+  return clone<T>(source);
 }
diff --git a/src/utils/Theme/helpers/cn.ts b/src/utils/Theme/helpers/cn.ts
index 90a6cbd5b..2e8af270f 100644
--- a/src/utils/Theme/helpers/cn.ts
+++ b/src/utils/Theme/helpers/cn.ts
@@ -1,5 +1,6 @@
 import classNames from 'classnames';
-import { twMerge } from 'tailwind-merge';
+
+import { twMerge } from '@/utils';
 
 /**
  * Classnames and tailwind merge helper function.
diff --git a/src/utils/Theme/helpers/index.ts b/src/utils/Theme/helpers/index.ts
index c438beb1a..6bcdd469e 100644
--- a/src/utils/Theme/helpers/index.ts
+++ b/src/utils/Theme/helpers/index.ts
@@ -1,5 +1,6 @@
 export * from './cloneDeep';
+export * from './cn';
 export * from './isObject';
 export * from './mergeDeep';
-export * from './cn';
 export * from './tokenUtils';
+export * from './twMerge';
diff --git a/src/utils/Theme/helpers/mergeDeep.ts b/src/utils/Theme/helpers/mergeDeep.ts
index d91bc184b..aee0ebfbd 100644
--- a/src/utils/Theme/helpers/mergeDeep.ts
+++ b/src/utils/Theme/helpers/mergeDeep.ts
@@ -1,36 +1,16 @@
-import { cloneDeep } from './cloneDeep';
-import { isObject } from './isObject';
+import mergeWith from 'lodash.mergewith';
 
 /**
  * Merge and deep copy the values of all the enumerable own properties of target object from source object to a new object
  * @param target The target object to get properties from.
  * @param source The source object from which to copy properties.
+ * @param mergeFunction
  * @return A new merged and deep copied object.
  */
 export function mergeDeep<T extends object, S extends object>(
   target: T,
-  source: S
+  source: S,
+  mergeFunction?: (objValue: any, srcValue: any, key: string) => string
 ): T & S {
-  if (isObject(source) && Object.keys(source).length === 0) {
-    return cloneDeep({ ...target, ...source });
-  }
-
-  const output = { ...target, ...source };
-
-  if (isObject(source) && isObject(target)) {
-    for (const key in source) {
-      if (isObject(source[key]) && key in target && isObject(target[key])) {
-        (output as Record<string, unknown>)[key] = mergeDeep(
-          target[key] as object,
-          source[key] as object
-        );
-      } else {
-        (output as Record<string, unknown>)[key] = isObject(source[key])
-          ? cloneDeep(source[key])
-          : source[key];
-      }
-    }
-  }
-
-  return output;
+  return mergeWith({}, target, source, mergeFunction);
 }
diff --git a/src/utils/Theme/helpers/twMerge.ts b/src/utils/Theme/helpers/twMerge.ts
new file mode 100644
index 000000000..76a77fc99
--- /dev/null
+++ b/src/utils/Theme/helpers/twMerge.ts
@@ -0,0 +1,11 @@
+import { extendTailwindMerge } from 'tailwind-merge';
+
+const TW_MERGE_CONFIG = {
+  extend: {
+    classGroups: {
+      'font-size': ['text-xxs']
+    }
+  }
+};
+
+export const twMerge = extendTailwindMerge(TW_MERGE_CONFIG);
diff --git a/src/utils/Theme/hooks/index.ts b/src/utils/Theme/hooks/index.ts
index b625a28d9..de8868385 100644
--- a/src/utils/Theme/hooks/index.ts
+++ b/src/utils/Theme/hooks/index.ts
@@ -1,2 +1,2 @@
-export * from './useTheme';
 export * from './useComponentTheme';
+export * from './useTheme';
diff --git a/src/utils/Theme/hooks/useComponentTheme.ts b/src/utils/Theme/hooks/useComponentTheme.ts
index dd691d92c..dbefb9ce8 100644
--- a/src/utils/Theme/hooks/useComponentTheme.ts
+++ b/src/utils/Theme/hooks/useComponentTheme.ts
@@ -1,5 +1,6 @@
+import type { ReablocksTheme } from '@/utils/Theme/themes/theme';
+
 import { useTheme } from './useTheme';
-import { ReablocksTheme } from '@/utils/Theme/themes/theme';
 
 /**
  * Hook to get the theme for a specific component.
@@ -7,8 +8,8 @@ import { ReablocksTheme } from '@/utils/Theme/themes/theme';
  * @param customTheme
  * @returns theme object
  */
-export const useComponentTheme = <T extends any>(
-  component: string,
+export const useComponentTheme = <T extends object>(
+  component: keyof ReablocksTheme['components'],
   customTheme?: T
 ): T => {
   const context = useTheme();
@@ -21,7 +22,7 @@ export const useComponentTheme = <T extends any>(
     throw new Error('useTheme must be used within a ThemeProvider');
   }
 
-  const componentTheme = context.theme.components[component];
+  const componentTheme = context.theme.components[component as string];
   if (!componentTheme) {
     throw new Error(`Component ${component} does not exist in theme`);
   }
diff --git a/src/utils/Theme/hooks/useTheme.ts b/src/utils/Theme/hooks/useTheme.ts
index 2f5d6a239..cb487a14e 100644
--- a/src/utils/Theme/hooks/useTheme.ts
+++ b/src/utils/Theme/hooks/useTheme.ts
@@ -1,5 +1,7 @@
 import { useContext } from 'react';
-import { ThemeContext, ThemeContextProps } from '@/utils/Theme/ThemeProvider';
+
+import type { ThemeContextProps } from '@/utils/Theme/ThemeProvider';
+import { ThemeContext } from '@/utils/Theme/ThemeProvider';
 
 /**
  * Hook to get the theme context.
diff --git a/src/utils/Theme/index.ts b/src/utils/Theme/index.ts
index d30365999..8ded6e4b4 100644
--- a/src/utils/Theme/index.ts
+++ b/src/utils/Theme/index.ts
@@ -1,6 +1,5 @@
-export * from './types';
-export * from './themes';
 export * from './blocks';
+export * from './helpers';
 export * from './hooks';
 export * from './ThemeProvider';
-export * from './helpers';
+export * from './themes';
diff --git a/src/utils/Theme/themes/extendCoponentTheme.ts b/src/utils/Theme/themes/extendCoponentTheme.ts
index 5a57a768a..c84e04b12 100644
--- a/src/utils/Theme/themes/extendCoponentTheme.ts
+++ b/src/utils/Theme/themes/extendCoponentTheme.ts
@@ -1,14 +1,12 @@
+import type { DeepPartial } from '@/utils';
 import { mergeDeep } from '@/utils/Theme/helpers';
 
-type DeepPartial<T> = {
-  [P in keyof T]?: DeepPartial<T[P]>;
-};
-
 /**
  * Performs a merge deep on the component theme.
  */
 
-export const extendComponentTheme = <T extends Object>(
+export const extendComponentTheme = <T extends object>(
   defaultTheme: T,
-  theme: DeepPartial<T>
-) => mergeDeep(defaultTheme, theme);
+  theme: DeepPartial<T>,
+  mergeFunction?: (objValue: any, srcValue: any, key: string) => string
+) => mergeDeep(defaultTheme, theme, mergeFunction);
diff --git a/src/utils/Theme/themes/extendTheme.spec.ts b/src/utils/Theme/themes/extendTheme.spec.ts
new file mode 100644
index 000000000..003473695
--- /dev/null
+++ b/src/utils/Theme/themes/extendTheme.spec.ts
@@ -0,0 +1,69 @@
+import { describe, expect, it } from 'vitest';
+
+import { cn } from '@/utils/Theme/helpers';
+import type { ReablocksTheme } from '@/utils/Theme/themes/theme';
+
+import type { PartialReablocksTheme } from './extendTheme';
+import { extendTheme } from './extendTheme';
+
+describe('extendTheme', () => {
+  const defaultTheme: PartialReablocksTheme = {
+    components: {
+      button: {
+        sizes: {
+          small: 'text-xs px-2 py-[5px]',
+          medium: 'text-sm px-3 py-[7px]'
+        }
+      }
+    }
+  };
+
+  it('should return the default theme when no overrides are provided', () => {
+    const result = extendTheme(defaultTheme as ReablocksTheme, {});
+
+    expect(result).toEqual(defaultTheme);
+  });
+
+  it('should fully override small property', () => {
+    const theme: PartialReablocksTheme = {
+      components: {
+        button: {
+          sizes: {
+            small: 'text-lg'
+          }
+        }
+      }
+    };
+
+    const result = extendTheme(defaultTheme as ReablocksTheme, theme);
+
+    expect(result.components.button.sizes.small).toBe('text-lg');
+    expect(result.components.button.sizes.medium).toBe('text-sm px-3 py-[7px]');
+  });
+
+  it('should override class only of small property', () => {
+    const theme: PartialReablocksTheme = {
+      components: {
+        button: {
+          sizes: {
+            small: 'text-lg'
+          }
+        }
+      }
+    };
+
+    const result = extendTheme(
+      defaultTheme as ReablocksTheme,
+      theme,
+      (source, target) => {
+        if (typeof source === 'string' && typeof target === 'string') {
+          return cn(source, target);
+        }
+        return undefined;
+      }
+    );
+
+    expect(result.components.button.sizes.small).toBe('px-2 py-[5px] text-lg');
+    expect(result.components.button.sizes.medium).toBe('text-sm px-3 py-[7px]');
+  });
+});
diff --git a/src/utils/Theme/themes/extendTheme.ts b/src/utils/Theme/themes/extendTheme.ts
index 15e7fd172..007c54f7d 100644
--- a/src/utils/Theme/themes/extendTheme.ts
+++ b/src/utils/Theme/themes/extendTheme.ts
@@ -1,7 +1,8 @@
-import { ReablocksTheme } from './theme';
 import { mergeDeep } from '@/utils/Theme/helpers';
 
-type DeepPartial<T> = {
+import type { ReablocksTheme } from './theme';
+
+export type DeepPartial<T> = {
   [P in keyof T]?: DeepPartial<T[P]>;
 };
 
@@ -12,5 +13,6 @@ export type PartialReablocksTheme = DeepPartial<ReablocksTheme>;
  */
 export const extendTheme = (
   defaultTheme: ReablocksTheme,
-  theme: PartialReablocksTheme
-) => mergeDeep(defaultTheme, theme);
+  theme: PartialReablocksTheme,
+  mergeFunction?: (objValue: any, srcValue: any, key: string) => string
+) => mergeDeep(defaultTheme, theme, mergeFunction);
diff --git a/src/utils/Theme/themes/index.ts b/src/utils/Theme/themes/index.ts
index feea564d9..91754854b 100644
--- a/src/utils/Theme/themes/index.ts
+++ b/src/utils/Theme/themes/index.ts
@@ -1,4 +1,5 @@
-export * from './theme';
-export * from './extendTheme';
 export * from './extendCoponentTheme';
+export * from './extendTheme';
 export * from './extractTheme';
+export * from './theme';
+export * from './themeV9';
diff --git a/src/utils/Theme/themes/theme.ts b/src/utils/Theme/themes/theme.ts
index fedc5fffb..99106e460 100644
--- a/src/utils/Theme/themes/theme.ts
+++ b/src/utils/Theme/themes/theme.ts
@@ -1,158 +1,108 @@
+import type {
+  DateFormatTheme,
+  EllipsisTheme,
+  PagerTheme,
+  RedactTheme,
+  SortTheme
+} from '@/data';
+import { dateFormatTheme } from '@/data/DateFormat/DateFormatTheme';
+import { ellipsisTheme } from '@/data/Ellipsis/EllipsisTheme';
+import { pagerTheme } from '@/data/Pager/PagerTheme';
+import { redactTheme } from '@/data/Redact/RedactTheme';
+import { sortTheme } from '@/data/Sort/SortTheme';
 import {
-  buttonTheme,
-  ButtonTheme,
-  CommandPaletteTheme,
-  commandPaletteTheme,
-  AvatarTheme,
-  avatarTheme,
-  KbdTheme,
-  kbdTheme,
-  AvatarGroupTheme,
-  avatarGroupTheme,
-  BadgeTheme,
-  badgeTheme,
-  DotsLoaderTheme,
-  dotsLoaderTheme,
-  ArrowTheme,
-  arrowTheme,
-  chipTheme,
-  ChipTheme,
-  legacyAvatarTheme,
-  legacyAvatarGroupTheme,
-  legacyArrowTheme,
-  legacyBadgeTheme,
-  legacyButtonTheme,
-  legacyChipTheme,
-  legacyLoaderTheme,
-  legacyKbdTheme,
-  legacyCommandPaletteTheme
+  type ArrowTheme,
+  type AvatarGroupTheme,
+  type AvatarTheme,
+  type BadgeTheme,
+  type ButtonTheme,
+  type ChipTheme,
+  type CommandPaletteTheme,
+  type DotsLoaderTheme,
+  type KbdTheme,
+  type NavigationTheme
 } from '@/elements';
-
-import {
+import { arrowTheme } from '@/elements/Arrow/ArrowTheme';
+import { avatarTheme } from '@/elements/Avatar/AvatarTheme';
+import { avatarGroupTheme } from '@/elements/AvatarGroup/AvatarGroupTheme';
+import { badgeTheme } from '@/elements/Badge/BadgeTheme';
+import { buttonTheme } from '@/elements/Button/ButtonTheme';
+import { chipTheme } from '@/elements/Chip/ChipTheme';
+import { commandPaletteTheme } from '@/elements/CommandPalette/CommandPaletteTheme';
+import { kbdTheme } from '@/elements/Kbd/KbdTheme';
+import { dotsLoaderTheme } from '@/elements/Loader/DotsLoaderTheme';
+import { navigationTheme } from '@/elements/Navigation/NavigationTheme';
+import type {
+  CalendarRangeTheme,
+  CalendarTheme,
   CheckboxTheme,
-  checkboxTheme,
-  inputTheme,
-  radioTheme,
-  rangeTheme,
-  selectTheme,
-  textareaTheme,
-  toggleTheme,
+  DateInputTheme,
   InputTheme,
   RadioTheme,
   RangeTheme,
   SelectTheme,
   TextareaTheme,
-  ToggleTheme,
-  CalendarTheme,
-  calendarTheme,
-  CalendarRangeTheme,
-  calendarRangeTheme,
-  legacyCheckboxTheme,
-  legacySelectTheme,
-  legacyInputTheme,
-  legacyCalendarTheme,
-  legacyCalendarRangeTheme,
-  legacyTextareaTheme,
-  legacyRadioTheme,
-  legacyRangeTheme,
-  legacyToggleTheme,
-  DateInputTheme,
-  dateInputTheme,
-  legacyDateInputTheme
+  ToggleTheme
 } from '@/form';
-
-import {
+import { calendarRangeTheme } from '@/form/Calendar/CalendarRangeTheme';
+import { calendarTheme } from '@/form/Calendar/CalendarTheme';
+import { checkboxTheme } from '@/form/Checkbox/CheckboxTheme';
+import { dateInputTheme } from '@/form/DateInput/DateInputTheme';
+import { inputTheme } from '@/form/Input/InputTheme';
+import { radioTheme } from '@/form/Radio/RadioTheme';
+import { rangeTheme } from '@/form/Range/RangeTheme';
+import { selectTheme } from '@/form/Select/SelectTheme';
+import { textareaTheme } from '@/form/Textarea/TextareaTheme';
+import { toggleTheme } from '@/form/Toggle/ToggleTheme';
+import type {
+  BackdropTheme,
+  CalloutTheme,
   ContextMenuTheme,
-  legacyContextMenuTheme,
-  legacyDialogTheme,
-  legacyDrawerTheme,
-  legacyMenuTheme,
-  legacyNotificationTheme,
-  legacyPopoverTheme,
-  legacyTooltipTheme,
-  contextMenuTheme,
-  dialogTheme,
-  drawerTheme,
-  menuTheme,
-  notificationTheme,
-  popoverTheme,
-  tooltipTheme,
   DialogTheme,
   DrawerTheme,
   MenuTheme,
   NotificationTheme,
   PopoverTheme,
-  TooltipTheme,
-  CalloutTheme,
-  calloutTheme,
-  legacyCalloutTheme,
-  BackdropTheme,
-  backdropTheme,
-  legacyBackdropTheme
+  TooltipTheme
 } from '@/layers';
-
-import {
+import { backdropTheme } from '@/layers/Backdrop/BackdropTheme';
+import { calloutTheme } from '@/layers/Callout/CalloutTheme';
+import { contextMenuTheme } from '@/layers/ContextMenu/ContextMenuTheme';
+import { dialogTheme } from '@/layers/Dialog/DialogTheme';
+import { drawerTheme } from '@/layers/Drawer/DrawerTheme';
+import { menuTheme } from '@/layers/Menu/MenuTheme';
+import { notificationTheme } from '@/layers/Notification/NotificationTheme';
+import { popoverTheme } from '@/layers/Popover/PopoverTheme';
+import { tooltipTheme } from '@/layers/Tooltip/TooltipTheme';
+import type {
   BlockTheme,
+  BreadcrumbsTheme,
+  CardTheme,
   CollapseTheme,
-  blockTheme,
-  collapseTheme,
-  dividerTheme,
-  treeTheme,
   DividerTheme,
-  TabsTheme,
-  tabsTheme,
-  TreeTheme,
-  legacyBlockTheme,
-  legacyListTheme,
-  verticalSpacerTheme,
-  VerticalSpacerTheme,
-  CardTheme,
-  cardTheme,
-  listTheme,
+  JsonTreeTheme,
   ListTheme,
-  stackTheme,
   StackTheme,
-  legacyStackTheme,
-  legacyCardTheme,
-  legacyVerticalSpacerTheme,
-  legacyCollapseTheme,
-  legacyTreeTheme,
-  legacyTabsTheme,
-  legacyDividerTheme,
-  JsonTreeTheme,
-  jsonTreeTheme,
-  legacyJsonTreeTheme,
-  breadcrumbsTheme,
-  BreadcrumbsTheme,
-  legacyBreadcrumbTheme,
   StepperTheme,
-  stepperTheme,
-  legacyStepperTheme
+  TabsTheme,
+  TreeTheme,
+  VerticalSpacerTheme
 } from '@/layout';
-
-import {
-  legacyTypographyTheme,
-  typographyTheme,
-  TypographyTheme
-} from '@/typography';
-
-import {
-  ellipsisTheme,
-  EllipsisTheme,
-  PagerTheme,
-  pagerTheme,
-  RedactTheme,
-  redactTheme,
-  SortTheme,
-  sortTheme,
-  DateFormatTheme,
-  dateFormatTheme,
-  legacyDateFormatTheme,
-  legacyEllipsisTheme,
-  legacySortTheme,
-  legacyRedactTheme,
-  legacyPagerTheme
-} from '@/data';
+import { blockTheme } from '@/layout/Block/BlockTheme';
+import { breadcrumbsTheme } from '@/layout/Breadcrumbs/BreadcrumbsTheme';
+import { cardTheme } from '@/layout/Card/CardTheme';
+import { collapseTheme } from '@/layout/Collapse/CollapseTheme';
+import { dividerTheme } from '@/layout/Divider/DividerTheme';
+import { listTheme } from '@/layout/List/ListTheme';
+import { stackTheme } from '@/layout/Stack/StackTheme';
+import { stepperTheme } from '@/layout/Stepper/StepperTheme';
+import { tabsTheme } from '@/layout/Tabs/TabsTheme';
+import { jsonTreeTheme } from '@/layout/Tree/JsonTree/JsonTreeTheme';
+import { treeTheme } from '@/layout/Tree/TreeTheme';
+import { verticalSpacerTheme } from '@/layout/VerticalSpacer/VerticalSpacerTheme';
+import type { TypographyTheme, TypographyThemeDeprecated } from '@/typography';
+import { typographyTheme } from '@/typography/TypographyTheme';
+import { typographyThemeDeprecated } from '@/typography/TypographyThemeDeprecated';
 
 export interface ReablocksTheme {
   components: {
@@ -187,6 +137,7 @@ export interface ReablocksTheme {
     commandPalette: CommandPaletteTheme;
     collapse: CollapseTheme;
     textarea: TextareaTheme;
+    typography_deprecated: TypographyThemeDeprecated;
     typography: TypographyTheme;
     radio: RadioTheme;
     range: RangeTheme;
@@ -202,6 +153,7 @@ export interface ReablocksTheme {
     stepper: StepperTheme;
     callout: CalloutTheme;
     backdrop: BackdropTheme;
+    navigation: NavigationTheme;
   };
 }
 
@@ -238,6 +190,7 @@ export const theme: ReablocksTheme = {
     commandPalette: commandPaletteTheme,
     collapse: collapseTheme,
     textarea: textareaTheme,
+    typography_deprecated: typographyThemeDeprecated,
     typography: typographyTheme,
     radio: radioTheme,
     range: rangeTheme,
@@ -252,57 +205,7 @@ export const theme: ReablocksTheme = {
     breadcrumbs: breadcrumbsTheme,
     stepper: stepperTheme,
     callout: calloutTheme,
-    backdrop: backdropTheme
-  }
-};
-
-export const legacyThemeVars: ReablocksTheme = {
-  components: {
-    avatar: legacyAvatarTheme,
-    avatarGroup: legacyAvatarGroupTheme,
-    arrow: legacyArrowTheme,
-    badge: legacyBadgeTheme,
-    button: legacyButtonTheme,
-    block: legacyBlockTheme,
-    chip: legacyChipTheme,
-    contextMenu: legacyContextMenuTheme,
-    checkbox: legacyCheckboxTheme,
-    dateFormat: legacyDateFormatTheme,
-    dialog: legacyDialogTheme,
-    divider: legacyDividerTheme,
-    dotsLoader: legacyLoaderTheme,
-    drawer: legacyDrawerTheme,
-    ellipsis: legacyEllipsisTheme,
-    select: legacySelectTheme,
-    list: legacyListTheme,
-    menu: legacyMenuTheme,
-    sort: legacySortTheme,
-    stack: legacyStackTheme,
-    card: legacyCardTheme,
-    kbd: legacyKbdTheme,
-    verticalSpacer: legacyVerticalSpacerTheme,
-    notification: legacyNotificationTheme,
-    input: legacyInputTheme,
-    dateInput: legacyDateInputTheme,
-    calendar: legacyCalendarTheme,
-    calendarRange: legacyCalendarRangeTheme,
-    commandPalette: legacyCommandPaletteTheme,
-    collapse: legacyCollapseTheme,
-    textarea: legacyTextareaTheme,
-    typography: legacyTypographyTheme,
-    radio: legacyRadioTheme,
-    range: legacyRangeTheme,
-    redact: legacyRedactTheme,
-    toggle: legacyToggleTheme,
-    tooltip: legacyTooltipTheme,
-    tree: legacyTreeTheme,
-    popover: legacyPopoverTheme,
-    pager: legacyPagerTheme,
-    tabs: legacyTabsTheme,
-    jsonTree: legacyJsonTreeTheme,
-    breadcrumbs: legacyBreadcrumbTheme,
-    stepper: legacyStepperTheme,
-    callout: legacyCalloutTheme,
-    backdrop: legacyBackdropTheme
+    backdrop: backdropTheme,
+    navigation: navigationTheme
   }
 };
diff --git a/src/utils/Theme/themes/themeV9.ts b/src/utils/Theme/themes/themeV9.ts
new file mode 100644
index 000000000..807b0a06b
--- /dev/null
+++ b/src/utils/Theme/themes/themeV9.ts
@@ -0,0 +1,1443 @@
+import type { ReablocksTheme } from '@/utils';
+
+export const themeV9: ReablocksTheme = {
+  components: {
+    avatar: {
+      base: 'flex justify-center items-center bg-cover bg-center font-bold text-white',
+      rounded: 'rounded-[50%]',
+      clickable: 'cursor-pointer'
+    },
+    avatarGroup: {
+      base: 'flex items-center text-text-primary',
+      avatar: '-ml-2.5',
+      overflow: 'ml-[5px]'
+    },
+    arrow: {
+      base: ' text-text-primary',
+      up: 'rotate-x180',
+      down: '',
+      left: 'rotate-90',
+      right: '-rotate-90'
+    },
+    backdrop: {
+      base: 'fixed top-0 left-0 w-full h-full opacity-0 select-none bg-black',
+      opacity: 0.8
+    },
+    badge: {
+      base: 'relative inline-flex align-middle shrink-0 mx-2 my-0',
+      disableMargins: 'm-0',
+      badge:
+        'flex flex-row flex-wrap justify-center content-center items-center absolute box-border leading-none text-sm p-1.5 w-[18px] h-[18px] z-1 rounded-[50%] pointer-events-none ',
+      position:
+        'translate-x-2/4 -translate-y-2/4 origin-[100%_0%] right-0 top-0',
+      positions: {
+        'top-start':
+          'top-0 left-0 -translate-x-2/4 -translate-y-2/4 origin-[0%_0%]',
+        'top-end':
+          'top-0 right-0 translate-x-2/4 -translate-y-2/4 origin-[100%_0%]',
+        'bottom-start':
+          'bottom-0 left-0 -translate-x-2/4 translate-y-2/4 origin-[0%_100%]',
+        'bottom-end':
+          'bottom-0 right-0 translate-x-2/4 translate-y-2/4 origin-[100%_100%]'
+      },
+      colors: {
+        default: 'bg-white text-black',
+        primary: 'bg-primary text-text-primary',
+        secondary: 'bg-secondary text-text-primary',
+        error: 'bg-error text-text-primary'
+      }
+    },
+    block: {
+      base: 'mb-2.5',
+      disableMargin: 'mb-0',
+      label: 'text-sm',
+      centerAlign: 'items-center',
+      endAlign: 'items-end',
+      horizontal: {
+        base: 'flex flex-row items-baseline',
+        label: 'mr-0.5 whitespace-nowrap'
+      },
+      vertical: {
+        base: 'block',
+        label: 'block mb-0.5'
+      }
+    },
+    breadcrumbs: {
+      base: '',
+      separator: '[&>svg]:size-3.5',
+      list: 'flex gap-2 items-center',
+      link: 'hover:text-text-primary text-text-secondary transition-colors',
+      activePage: 'text-primary pointer-events-none'
+    },
+    button: {
+      base: 'inline-flex whitespace-no-wrap select-none items-center justify-center px-2.5 py-1 rounded-xs font-sans cursor-pointer text-text-primary font-semibold',
+      disabled:
+        'disabled:cursor-not-allowed data-[variant=filled]:disabled:bg-gray-600 disabled:text-gray-400 border-gray-500',
+      fullWidth: 'flex w-full',
+      group:
+        'rounded-none first:rounded-s last:rounded-e border-s-0 first:border-s',
+      groupText:
+        'border border-y-transparent border-l-transparent last:border-r-transparent hover:bg-initial',
+      adornment: {
+        base: 'flex',
+        start: {
+          small: 'pr-1',
+          medium: 'pr-1',
+          large: 'pr-1'
+        },
+        end: {
+          small: 'pr-1',
+          medium: 'pr-1',
+          large: 'pr-1'
+        },
+        sizes: {
+          small: '[&>svg]:w-3 [&>svg]:h-3',
+          medium: '[&>svg]:w-4 [&>svg]:h-4',
+          large: '[&>svg]:w-5 [&>svg]:h-5'
+        }
+      },
+      sizes: {
+        small: 'text-sm px-2 py-1 leading-[normal]',
+        medium: 'text-base px-4 py-2 leading-[normal]',
+        large: 'text-xl px-5 py-2.5 leading-[normal]'
+      },
+      iconSizes: {
+        small: 'px-2 py-1',
+        medium: 'px-4 py-2',
+        large: 'px-5 py-2.5'
+      },
+      variants: {
+        filled:
+          'bg-secondary hover:bg-border-secondary-hover border-secondary light:text-gray-100',
+        outline: 'border-grey border',
+        text: 'border-0',
+        ghost: ''
+      },
+      colors: {
+        default: {
+          filled: 'bg-gray-800 hover:bg-gray-700 border-gray-800',
+          outline: 'border-secondary border',
+          text: 'text-text-primary',
+          ghost: ''
+        },
+        primary: {
+          filled:
+            'bg-primary hover:bg-primary-hover border-primary text-text-primary',
+          outline: 'border border-primary',
+          text: 'text-primary hover:text-primary-hover',
+          ghost: ''
+        },
+        secondary: {
+          filled: 'bg-secondary hover:bg-secondary-hover text-text-primary!',
+          outline: 'border border-secondary',
+          text: 'text-secondary hover:text-secondary-hover',
+          ghost: ''
+        },
+        success: {
+          filled:
+            'bg-success hover:bg-success-hover border-success text-text-primary',
+          outline: 'border border-success',
+          text: 'text-success hover:text-success-hover',
+          ghost: ''
+        },
+        warning: {
+          filled:
+            'bg-warning hover:bg-warning-hover border-warning text-text-primary',
+          outline: 'border border-warning',
+          text: 'text-warning hover:text-warning-hover',
+          ghost: ''
+        },
+        error: {
+          filled:
+            'bg-error hover:bg-error-hover border-error text-text-primary',
+          outline: 'border border-error',
+          text: 'text-error hover:text-error-hover',
+          ghost: ''
+        },
+        destructive: {
+          filled:
+            'bg-error hover:bg-error-hover border-error text-text-primary',
+          outline: 'border border-error',
+          text: 'text-error hover:text-error-hover',
+          ghost: ''
+        }
+      }
+    },
+    calendar: {
+      base: 'relative overflow-hidden',
+      header: {
+        base: 'flex text-center justify-between mb-2 items-center text-text-secondary',
+        prev: 'text-xl leading-4',
+        mid: '',
+        next: 'text-xl leading-4'
+      },
+      title: 'font-semibold leading-[normal]',
+      content: 'flex',
+      contentContainer: '',
+      days: {
+        header:
+          'text-center grid grid-cols-7 mb-1 pt-2 font-medium text-text-secondary',
+        dayOfWeek: 'text-center font-medium',
+        week: 'grid grid-cols-7',
+        day: 'font-normal flex p-2 border border-transparent text-text-secondary opacity-90 hover:bg-primary-hover hover:disabled:bg-transparent! hover:text-black disabled:text-text-secondary/60',
+        outside: ' opacity-40 text-text-secondary',
+        startRangeDate: 'rounded-tl-md rounded-tr-none rounded-br-none',
+        cornerStartDateBottom: 'rounded-bl-none',
+        endRangeDate: 'rounded-br-md rounded-bl-none rounded-tl-none',
+        cornerEndDateTop: 'rounded-tr-none',
+        range: 'rounded-none',
+        selected:
+          ' text-black border-transparent light:text-white light:border-transparent opacity-100',
+        hover:
+          'rounded-sm bg-primary-active text-black border-transparent light:text-white opacity-100',
+        today: 'rounded-sm border border-panel-accent text-text-primary'
+      },
+      months: {
+        root: 'grid grid-cols-4 gap-2',
+        month:
+          'p-1.5 hover:bg-primary-hover hover:text-black border-transparent text-text-secondary light:hover:text-white',
+        selected: ' border-transparent text-black light:text-white'
+      },
+      years: {
+        root: 'grid grid-cols-4 gap-2',
+        year: 'p-1.5 hover:bg-primary-hover hover:text-black border-transparent text-text-secondary light:hover:text-white',
+        selected: ' border-transparent text-black light:text-white'
+      },
+      time: {
+        base: 'flex flex-col h-full gap-0',
+        wrapper: 'mt-4 bg-panel z-10 flex flex-row border-panel-border',
+        dividerTop: 'w-full',
+        dividerLeft: 'h-auto mt-2.5 mx-1 bg-surface z-10',
+        header: 'flex gap-4 px-0.5 pb-2.5 mb-2',
+        column: {
+          base: 'w-6',
+          wrapper: 'overflow-y-auto h-52',
+          label: 'text-center text-xs text-gray-500',
+          list: 'p-0 m-0 list-none',
+          scrollbar:
+            'scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 scrollbar-track-transparent hover:scrollbar-thumb-gray-400 dark:hover:scrollbar-thumb-gray-500'
+        },
+        items: {
+          wrapper: 'flex flex-row flex-auto gap-0.25 pt-1 h-46',
+          container: 'h-full',
+          list: 'relative h-full p-0 m-0 list-none overflow-y-auto [&::-webkit-scrollbar]:hidden scrollbar-none touch-pan-y',
+          divider: 'mx-0',
+          item: {
+            base: 'py-0.5 px-1.5 text-center select-none cursor-pointer rounded transition-colors duration-150 text-text-secondary hover:bg-primary-hover hover:text-black',
+            selected:
+              ' bg-blue-500 text-white dark:bg-blue-600 dark:text-white',
+            disabled: 'cursor-not-allowed opacity-50'
+          }
+        }
+      },
+      presets: {
+        wrapper: 'bg-panel z-10',
+        divider: 'mx-1 h-[calc(100%-26px)] self-end',
+        base: 'relative h-59 max-w-52 pr-1 overflow-y-auto [&::-webkit-scrollbar]:hidden scrollbar-none touch-pan-y space-y-0',
+        group:
+          'text-sm font-medium my-1 !pr-0 !pl-0 !text-gray-500 dark:text-gray-400',
+        item: {
+          base: 'text-sm p-1.5 my-0.5 duration-0 hover:text-black dark:hover:bg-primary-hover hover:rounded-sm',
+          active: ' bg-primary text-black rounded-sm'
+        }
+      }
+    },
+    calendarRange: {
+      base: 'relative overflow-hidden',
+      header: {
+        base: 'flex text-center justify-between mb-2 items-center',
+        prev: '',
+        mid: '',
+        next: ''
+      },
+      title: 'font-semibold flex grow justify-around',
+      content: 'flex gap-4',
+      contentContainer: '',
+      days: {
+        header:
+          'text-center grid grid-cols-7 mb-1 pt-2 font-medium text-text-secondary',
+        dayOfWeek: 'text-center font-medium',
+        week: 'grid grid-cols-7',
+        day: 'font-normal flex p-2 border border-transparent text-text-secondary opacity-90 hover:bg-primary-hover hover:disabled:bg-transparent! hover:text-black disabled:text-text-secondary/60',
+        outside: ' opacity-40 text-text-secondary',
+        startRangeDate: 'rounded-tl-md rounded-tr-none rounded-br-none',
+        cornerStartDateBottom: 'rounded-bl-none',
+        endRangeDate: 'rounded-br-md rounded-bl-none rounded-tl-none',
+        cornerEndDateTop: 'rounded-tr-none',
+        range: 'rounded-none',
+        selected:
+          ' text-black border-transparent light:text-white light:border-transparent opacity-100',
+        hover:
+          'rounded-sm bg-primary-active text-black border-transparent light:text-white opacity-100',
+        today: 'rounded-sm border border-panel-accent text-text-primary'
+      },
+      presets: {
+        wrapper: 'bg-panel z-10',
+        divider: 'mx-1 h-[calc(100%-30px)] self-end',
+        base: 'relative h-59 max-w-52 pr-1 overflow-y-auto [&::-webkit-scrollbar]:hidden scrollbar-none touch-pan-y space-y-0',
+        group:
+          'text-sm font-medium my-1 !pr-0 !pl-0 !text-gray-500 dark:text-gray-400',
+        item: {
+          base: 'text-sm p-1.5 my-0.5 duration-0 hover:text-black dark:hover:bg-primary-hover hover:rounded-sm',
+          active: ' bg-primary text-black rounded-sm'
+        }
+      },
+      time: {
+        base: 'flex flex-col h-full gap-0',
+        wrapper: 'mt-4 bg-panel z-10 flex flex-row border-panel-border',
+        dividerTop: 'w-full',
+        dividerLeft: 'h-auto mt-2.5 mx-1 bg-surface z-10',
+        header: 'flex gap-4 px-0.5 pb-2.5 mb-2',
+        column: {
+          base: 'w-6',
+          wrapper: 'overflow-y-auto h-52',
+          label: 'text-center text-xs text-gray-500',
+          list: 'p-0 m-0 list-none',
+          scrollbar:
+            'scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 scrollbar-track-transparent hover:scrollbar-thumb-gray-400 dark:hover:scrollbar-thumb-gray-500'
+        },
+        items: {
+          wrapper: 'flex flex-row flex-auto gap-0.25 pt-1 h-46',
+          container: 'h-full',
+          list: 'relative h-full p-0 m-0 list-none overflow-y-auto [&::-webkit-scrollbar]:hidden scrollbar-none touch-pan-y',
+          divider: 'mx-0',
+          item: {
+            base: 'py-0.5 px-1.5 text-center select-none cursor-pointer rounded transition-colors duration-150 text-text-secondary hover:bg-primary-hover hover:text-black',
+            selected:
+              ' bg-blue-500 text-white dark:bg-blue-600 dark:text-white',
+            disabled: 'cursor-not-allowed opacity-50'
+          }
+        }
+      }
+    },
+    card: {
+      base: 'relative flex flex-col p-7 rounded-xs bg-panel border border-panel-accent text-text-primary',
+      disablePadding: 'p-0',
+      header: 'flex items-center',
+      headerText: 'text-sm font-medium mt-0 mb-1',
+      content: 'flex-1'
+    },
+    callout: {
+      base: {
+        common: 'px-4 py-3 border-b',
+        variant: {
+          default: 'bg-panel-background border-panel-accent',
+          success: 'bg-success-background border-success',
+          error: 'bg-error-background border-error',
+          warning: 'bg-warning-background border-warning',
+          info: 'bg-info-background border-info'
+        }
+      },
+      icon: {
+        common: '',
+        variant: {
+          default: '',
+          success: 'text-success',
+          error: 'text-error',
+          warning: 'text-warning',
+          info: 'text-info'
+        }
+      },
+      text: 'text-base'
+    },
+    checkbox: {
+      base: 'inline-flex items-center w-full group',
+      label: {
+        base: 'dark:text-gray-400 light:text-gray-700 ml-2.5 w-full text-text-primary dark:group-hover:text-blue-300 light:group-hover:text-blue-400',
+        checked:
+          'checked dark:text-gray-100 light:text-gray-900 group-hover:text-gray-100',
+        disabled:
+          'cursor-not-allowed dark:text-gray-600 light:text-gray-400 light:group-hover:text-gray-400 dark:group-hover:text-gray-600',
+        clickable: 'cursor-pointer',
+        sizes: {
+          small: 'text-sm',
+          medium: 'text-base',
+          large: 'text-lg'
+        }
+      },
+      check: {
+        base: 'stroke-white group-hover:stroke-black light:group-hover:stroke-white',
+        checked: '',
+        disabled:
+          'cursor-not-allowed stroke-black light:stroke-white group-hover:stroke-black '
+      },
+      border: {
+        base: 'stroke-gray-400 light:stroke-gray-700 dark:group-hover:stroke-blue-300 light:group-hover:stroke-blue-600',
+        checked: 'stroke-blue-500',
+        disabled:
+          'cursor-not-allowed stroke-gray-500 dark:group-hover:stroke-gray-500 light:group-hover:stroke-gray-400'
+      },
+      checkbox: {
+        base: 'fill-transparent flex items-center justify-center cursor-pointer focus-visible:outline-hidden border border-surface [&.checked.disabled]:fill-gray-400',
+        checked:
+          'fill-blue-500 checked group-hover:fill-blue-400 light:group-hover:fill-blue-600 light:group-hover:[&.disabled]:fill-gray-400',
+        disabled:
+          'fill-transparent disabled group-hover:transparent light:group-hover:transparent'
+      },
+      sizes: {
+        small: '[&>svg]:w-3 [&>svg]:h-3',
+        medium: '[&>svg]:w-4 [&>svg]:h-4',
+        large: '[&>svg]:w-5 [&>svg]:h-5'
+      },
+      boxVariants: {
+        hover: {
+          stroke: '',
+          fill: '',
+          strokeWidth: 1
+        },
+        pressed: {
+          scale: 0.95
+        },
+        checked: {
+          stroke: '',
+          fill: ''
+        },
+        unchecked: {
+          stroke: '',
+          fill: ''
+        }
+      }
+    },
+    chip: {
+      types: {
+        badge: {
+          base: 'inline-flex whitespace-no-wrap select-none items-center justify-center px-2.5 py-0.5 rounded-xs leading-none text-white transition-colors duration-300 ease [&>svg]:transition-[fill] [&>svg]:will-change-[fill] font-medium',
+          adornment: {
+            base: 'flex items-center justify-center',
+            start: 'mr-1',
+            end: 'ml-1',
+            sizes: {
+              small: '[&>svg]:w-3 [&>svg]:h-3',
+              medium: '[&>svg]:w-4 [&>svg]:h-4',
+              large: '[&>svg]:w-5 [&>svg]:h-5'
+            }
+          },
+          sizes: {
+            small: 'text-[10px] leading-[inherit] px-1 py-0.5',
+            medium: 'text-sm leading-[inherit] px-2 py-0.5',
+            large: 'text-base leading-[inherit] px-3 py-0.5'
+          },
+          variants: {
+            filled: 'border border-transparent box-border',
+            outline: 'bg-transparent border hover:bg-transparent'
+          },
+          colors: {
+            default: {
+              variants: {
+                filled: {
+                  base: 'bg-panel border-panel text-text-primary',
+                  selectable:
+                    'hover:bg-primary-hover hover:border-primary-hover hover:text-panel',
+                  selected: 'bg-primary text-panel'
+                },
+                outline: {
+                  base: 'text-text-primary dark:border-gray-100 light:border-gray-900',
+                  selected: 'border-panel-accent text-primary',
+                  selectable:
+                    'hover:text-primary-hover hover:border-panel-accent'
+                }
+              }
+            },
+            primary: {
+              variants: {
+                filled: {
+                  base: 'bg-primary border-primary text-panel',
+                  selectable:
+                    'hover:bg-primary-hover hover:border-primary-hover hover:text-panel',
+                  selected: 'bg-primary-hover'
+                },
+                outline: {
+                  base: 'text-primary border-panel-accent',
+                  selectable: 'hover:text-primary-hover hover:border-primary',
+                  selected: 'border-primary'
+                }
+              }
+            },
+            secondary: {
+              variants: {
+                filled: {
+                  base: 'bg-secondary border-secondary text-text-primary',
+                  selectable:
+                    'hover:bg-secondary-hover hover:border-secondary-hover hover:text-panel',
+                  selected: 'bg-secondary-hover text-panel'
+                },
+                outline: {
+                  base: 'text-secondary border-panel-accent',
+                  selectable:
+                    'hover:text-secondary-hover hover:border-secondary',
+                  selected: 'border-secondary'
+                }
+              }
+            },
+            success: {
+              variants: {
+                filled: {
+                  base: 'bg-success border-success text-panel',
+                  selected: 'bg-success-hover',
+                  selectable:
+                    'hover:bg-success-hover hover:border-success-hover'
+                },
+                outline: {
+                  base: 'text-success border-panel-accent',
+                  selected: 'border-success',
+                  selectable: 'hover:text-success-hover hover:border-success'
+                }
+              }
+            },
+            warning: {
+              variants: {
+                filled: {
+                  base: 'bg-warning border-warning text-panel',
+                  selectable:
+                    'hover:bg-warning-hover hover:border-warning-hover hover:text-panel',
+                  selected: 'bg-warning-hover'
+                },
+                outline: {
+                  base: 'text-warning border-panel-accent',
+                  selectable: 'hover:text-warning-hover hover:border-warning',
+                  selected: 'border-warning'
+                }
+              }
+            },
+            error: {
+              variants: {
+                filled: {
+                  base: 'bg-error border-error text-panel',
+                  selectable:
+                    'hover:bg-error-hover hover:border-error-hover hover:text-panel',
+                  selected: 'bg-error-hover'
+                },
+                outline: {
+                  base: 'text-error border-panel-accent',
+                  selectable: 'hover:text-error-hover hover:border-error',
+                  selected: 'border-error'
+                }
+              }
+            },
+            info: {
+              variants: {
+                filled: {
+                  base: 'bg-info border-info text-panel',
+                  selectable:
+                    'hover:bg-info-hover hover:border-info-hover hover:text-panel',
+                  selected: 'bg-info-hover'
+                },
+                outline: {
+                  base: 'text-info border-panel-accent',
+                  selectable: 'hover:text-info-hover hover:border-info',
+                  selected: 'border-info'
+                }
+              }
+            }
+          }
+        },
+        tag: {
+          base: 'inline-flex whitespace-no-wrap select-none items-center justify-center px-2.5 py-0.5 rounded-xs leading-none text-white transition-colors duration-300 ease [&>svg]:transition-[fill] [&>svg]:will-change-[fill] font-medium',
+          adornment: {
+            base: 'flex items-center justify-center',
+            start: 'mr-1',
+            end: 'ml-1',
+            sizes: {
+              small: '[&>svg]:w-3 [&>svg]:h-3',
+              medium: '[&>svg]:w-4 [&>svg]:h-4',
+              large: '[&>svg]:w-5 [&>svg]:h-5'
+            }
+          },
+          sizes: {
+            small: 'text-[10px] leading-[inherit] px-1 py-0.5',
+            medium: 'text-sm leading-[inherit] px-2 py-0.5',
+            large: 'text-base leading-[inherit] px-3 py-0.5'
+          },
+          variants: {
+            filled: 'border border-transparent box-border',
+            outline: 'bg-transparent border hover:bg-transparent'
+          },
+          colors: {
+            default: {
+              variants: {
+                filled: {
+                  base: 'bg-panel border-panel text-text-primary',
+                  selectable:
+                    'hover:bg-primary-hover hover:border-primary-hover hover:text-panel',
+                  selected: 'bg-primary text-panel'
+                },
+                outline: {
+                  base: 'text-text-primary dark:border-gray-100 light:border-gray-900',
+                  selectable:
+                    'hover:text-primary-hover hover:border-panel-accent',
+                  selected: 'border-panel-accent text-primary'
+                }
+              }
+            },
+            primary: {
+              variants: {
+                outline: {
+                  base: 'text-primary border-panel-accent',
+                  selectable:
+                    'hover:bg-primary-hover hover:border-primary-hover hover:text-panel',
+                  selected: 'bg-primary-hover'
+                },
+                filled: {
+                  base: 'bg-primary border-primary text-panel',
+                  selectable: 'hover:text-primary-hover hover:border-primary',
+                  selected: 'border-primary'
+                }
+              }
+            },
+            secondary: {
+              variants: {
+                filled: {
+                  base: 'bg-secondary border-secondary text-text-primary',
+                  selectable:
+                    'hover:bg-secondary-hover hover:border-secondary-hover hover:text-panel',
+                  selected: 'bg-secondary-hover text-panel'
+                },
+                outline: {
+                  base: 'text-secondary border-panel-accent',
+                  selectable:
+                    'hover:text-secondary-hover hover:border-secondary',
+                  selected: 'border-secondary'
+                }
+              }
+            },
+            success: {
+              variants: {
+                filled: {
+                  base: 'bg-success border-success text-panel',
+                  selectable:
+                    'hover:bg-success-hover hover:border-success-hover',
+                  selected: 'bg-success-hover'
+                },
+                outline: {
+                  base: 'text-success border-panel-accent',
+                  selectable: 'hover:text-success-hover hover:border-success',
+                  selected: 'border-success'
+                }
+              }
+            },
+            warning: {
+              variants: {
+                filled: {
+                  base: 'bg-warning border-warning text-panel',
+                  selectable:
+                    'hover:bg-warning-hover hover:border-warning-hover hover:text-panel',
+                  selected: 'bg-warning-hover'
+                },
+                outline: {
+                  base: 'text-warning border-panel-accent',
+                  selectable: 'hover:text-warning-hover hover:border-warning',
+                  selected: 'border-warning'
+                }
+              }
+            },
+            error: {
+              variants: {
+                filled: {
+                  base: 'bg-error border-error text-panel',
+                  selectable:
+                    'hover:bg-error-hover hover:border-error-hover hover:text-panel',
+                  selected: 'border-error'
+                },
+                outline: {
+                  base: 'text-error border-panel-accent',
+                  selectable: 'hover:text-error-hover hover:border-error',
+                  selected: 'border-error'
+                }
+              }
+            },
+            info: {
+              variants: {
+                filled: {
+                  base: 'bg-info border-info text-panel',
+                  selectable:
+                    'hover:bg-info-hover hover:border-info-hover hover:text-panel',
+                  selected: 'bg-info-hover'
+                },
+                outline: {
+                  base: 'text-info border-panel-accent',
+                  selected: 'hover:text-info-hover hover:border-info',
+                  selectable: 'border-info'
+                }
+              }
+            }
+          },
+          closeButton: {
+            base: 'text-inherit',
+            sizes: {
+              small: 'leading-[10px] max-h-2.5',
+              medium: 'leading-3 max-h-3',
+              large: 'leading-[14px] max-h-3.5'
+            }
+          },
+          disabled: 'opacity-50 cursor-not-allowed'
+        }
+      }
+    },
+    contextMenu: {
+      enabled: 'cursor-context-menu'
+    },
+    commandPalette: {
+      base: 'w-full border border-panel-accent',
+      inner: 'max-h-[80vh] overflow-y-auto bg-panel border-0',
+      emptyContainer: 'bg-panel',
+      input: {
+        base: 'flex w-full items-center border-b-2 bg-panel border-bottom border-panel-accent',
+        input:
+          'flex-1 border-0 box-border p-2.5 focus-within:outline-hidden focus-visible:outline-hidden bg-panel text-text-primary placeholder:placeholder-accent',
+        icon: 'w-4 h-4 ml-2.5'
+      },
+      item: {
+        base: 'transition-colors ease-in-out duration-200',
+        active: ' bg-primary text-text-primary',
+        clickable:
+          'cursor-pointer hover:bg-primary-hover/70 dark:hover:bg-primary-hover dark:hover:text-white'
+      },
+      section: {
+        base: ' bg-panel',
+        first: 'pt-2.5'
+      }
+    },
+    collapse: {
+      base: 'will-change-[height,opacity] overflow-hidden'
+    },
+    dateFormat: {
+      base: 'cursor-text',
+      interactive: 'cursor-pointer hover:underline'
+    },
+    dateInput: {
+      input: {
+        base: 'flex relative flex-row items-center flex-nowrap box-border transition-colors rounded-xs bg-panel border border-panel-accent text-text-primary hover:border-panel-accent light:hover:border-panel-accent hover:after:bg-[radial-gradient(circle,_#105EFF_0%,_#105EFF_36%,_#242433_100%)] light:hover:after:bg-[radial-gradient(circle,_#105EFF_0%,_#105EFF_36%,_#E6E6F0_100%)] hover:after:content-[""] hover:after:absolute hover:after:mx-1 hover:after:h-px after:z-2 hover:after:rounded-sm hover:after:-bottom-[1px] hover:after:inset-x-0.5',
+        focused:
+          ' focus-within:after:bg-[radial-gradient(circle,_#93B6FF_0%,_#105EFF_36%,_#3D3D4D_90%,_#242433_100%)] light:focus-within:after:bg-[radial-gradient(circle,_#105EFF_10%,_#93B6FF_36%,_#E6E6F0_90%)] focus-within:after:content-[""] focus-within:after:absolute focus-within:after:mx-0 focus-within:after:h-px after:z-2 focus-within:after:rounded-sm focus-within:after:-bottom-[1px] focus-within:after:inset-x-0.5',
+        input:
+          'flex-1 font-normal font-sans bg-transparent border-0 p-0 m-0 disabled:pointer-events-none outline-hidden px-0.5 disabled:cursor-not-allowed disabled:text-disabled placeholder-accent',
+        inline: 'bg-transparent border-0 outline-hidden',
+        disabled:
+          'text-waterloo cursor-not-allowed disabled-within:bg-dark-disabled disabled-within:after:content-none',
+        fullWidth: 'w-full',
+        error: 'border-error',
+        sizes: {
+          small: '[&>input]:text-sm p-1 text-sm',
+          medium: '[&>input]:text-base px-2.5 py-1.5 text-base',
+          large: '[&>input]:text-lg p-5 text-lg'
+        },
+        adornment: {
+          base: 'flex items-center justify-center [&>svg]:w-4 [&>svg]:h-4 [&>svg]:current-color text-text-primary',
+          start: 'pr-1.5',
+          end: 'pl-1.5'
+        }
+      },
+      calendar: {
+        base: 'relative overflow-hidden',
+        header: {
+          base: 'flex text-center justify-between mb-2 items-center text-text-secondary',
+          prev: 'text-xl leading-4',
+          mid: '',
+          next: 'text-xl leading-4'
+        },
+        title: 'font-semibold leading-[normal]',
+        content: 'flex',
+        contentContainer: '',
+        days: {
+          header:
+            'text-center grid grid-cols-7 mb-1 pt-2 font-medium text-text-secondary',
+          dayOfWeek: 'text-center font-medium',
+          week: 'grid grid-cols-7',
+          day: 'font-normal flex p-2 border border-transparent text-text-secondary opacity-90 hover:bg-primary-hover hover:disabled:bg-transparent! hover:text-black disabled:text-text-secondary/60',
+          outside: ' opacity-40 text-text-secondary',
+          startRangeDate: 'rounded-tl-md rounded-tr-none rounded-br-none',
+          cornerStartDateBottom: 'rounded-bl-none',
+          endRangeDate: 'rounded-br-md rounded-bl-none rounded-tl-none',
+          cornerEndDateTop: 'rounded-tr-none',
+          range: 'rounded-none',
+          selected:
+            ' text-black border-transparent light:text-white light:border-transparent opacity-100',
+          hover:
+            'rounded-sm bg-primary-active text-black border-transparent light:text-white opacity-100',
+          today: 'rounded-sm border border-panel-accent text-text-primary'
+        },
+        months: {
+          root: 'grid grid-cols-4 gap-2',
+          month:
+            'p-1.5 hover:bg-primary-hover hover:text-black border-transparent text-text-secondary light:hover:text-white',
+          selected: ' border-transparent text-black light:text-white'
+        },
+        years: {
+          root: 'grid grid-cols-4 gap-2',
+          year: 'p-1.5 hover:bg-primary-hover hover:text-black border-transparent text-text-secondary light:hover:text-white',
+          selected: ' border-transparent text-black light:text-white'
+        },
+        time: {
+          base: 'flex flex-col h-full gap-0',
+          wrapper: 'mt-4 bg-panel z-10 flex flex-row border-panel-border',
+          dividerTop: 'w-full',
+          dividerLeft: 'h-auto mt-2.5 mx-1 bg-surface z-10',
+          header: 'flex gap-4 px-0.5 pb-2.5 mb-2',
+          column: {
+            base: 'w-6',
+            wrapper: 'overflow-y-auto h-52',
+            label: 'text-center text-xs text-gray-500',
+            list: 'p-0 m-0 list-none',
+            scrollbar:
+              'scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-600 scrollbar-track-transparent hover:scrollbar-thumb-gray-400 dark:hover:scrollbar-thumb-gray-500'
+          },
+          items: {
+            wrapper: 'flex flex-row flex-auto gap-0.25 pt-1 h-46',
+            container: 'h-full',
+            list: 'relative h-full p-0 m-0 list-none overflow-y-auto [&::-webkit-scrollbar]:hidden scrollbar-none touch-pan-y',
+            divider: 'mx-0',
+            item: {
+              base: 'py-0.5 px-1.5 text-center select-none cursor-pointer rounded transition-colors duration-150 text-text-secondary hover:bg-primary-hover hover:text-black',
+              selected:
+                ' bg-blue-500 text-white dark:bg-blue-600 dark:text-white',
+              disabled: 'cursor-not-allowed opacity-50'
+            }
+          }
+        },
+        presets: {
+          wrapper: 'bg-panel z-10',
+          divider: 'mx-1 h-[calc(100%-26px)] self-end',
+          base: 'relative h-59 max-w-52 pr-1 overflow-y-auto [&::-webkit-scrollbar]:hidden scrollbar-none touch-pan-y space-y-0',
+          group:
+            'text-sm font-medium my-1 !pr-0 !pl-0 !text-gray-500 dark:text-gray-400',
+          item: {
+            base: 'text-sm p-1.5 my-0.5 duration-0 hover:text-black dark:hover:bg-primary-hover hover:rounded-sm',
+            active: ' bg-primary text-black rounded-sm'
+          }
+        }
+      },
+      preset: {
+        list: 'w-full border border-panel-accent',
+        option: {
+          base: 'hover:bg-vulcan hover:text-mystic light:hover:bg-vulcan/5 light:hover:text-text-secondary',
+          active: 'bg-vulcan hover:text-mystic'
+        }
+      }
+    },
+    dialog: {
+      base: 'justify-center items-center flex pointer-events-none top-0 left-0 w-full h-full fixed will-change-transform will-change-opacity',
+      inner:
+        'flex flex-col box-border outline-0 pointer-events-auto overflow-auto max-w-[80vw] max-h-[80vh] bg-panel text-text-primary border border-panel-accent rounded-sm shadow-2xl',
+      content: 'p-[20px] flex-auto overflow-auto',
+      footer: 'flex p-[20px] pb-[10px]',
+      header: {
+        base: 'flex justify-between pt-[20px] px-[20px] pb-[10px]',
+        text: 'flex-1 m-0 p-0 inline-flex text-3xl font-bold',
+        closeButton:
+          'p-0 m-0 ml-[15px] opacity-80 h-auto w-auto inline-flex bg-none border-none cursor-pointer items-center text-[16px] focus:outline-hidden text-text-primary'
+      }
+    },
+    divider: {
+      base: 'border-none',
+      orientation: {
+        horizontal: 'h-px w-full my-2.5',
+        vertical: 'w-px h-full mx-2.5'
+      },
+      variant: {
+        primary: 'bg-surface',
+        secondary: 'bg-linear-to-r from-transparent to-transparent via-blue-500'
+      },
+      disableMargins: 'my-0 mx-0'
+    },
+    dotsLoader: {
+      base: 'flex',
+      dot: 'rounded-[50%] light:bg-gray-900 dark:bg-gray-100',
+      sizes: {
+        small: 'w-1 h-1 m-1',
+        medium: 'w-1.5 h-1.5 m-1.5',
+        large: 'w-2 h-2 m-2'
+      }
+    },
+    drawer: {
+      base: 'fixed overflow-y-auto overflow-x-hidden bg-panel text-text-primary',
+      header: {
+        base: 'flex items-center justify-between px-8 py-5 text-3xl font-bold',
+        text: 'flex-1 m-0'
+      },
+      content: 'px-8 py-5',
+      disablePadding: 'p-0',
+      closeButton: {
+        base: 'opacity-80 h-auto w-auto min-w-[auto] min-h-[auto] cursor-pointer text-base p-0 border-0 focus:outline-hidden',
+        headerless: 'absolute right-5 top-5'
+      },
+      positions: {
+        top: 'w-full inset-x-0 top-0',
+        end: 'h-full inset-y-0 right-0',
+        bottom: 'w-full inset-x-0 bottom-0',
+        start: 'h-full inset-y-0 left-0'
+      }
+    },
+    ellipsis: {
+      dots: 'cursor-pointer opacity-50 text-[unset] p-0 border-[none] outline-hidden'
+    },
+    input: {
+      base: 'flex relative flex-row items-center flex-nowrap box-border transition-colors rounded-xs bg-panel border border-panel-accent text-text-primary hover:border-panel-accent light:hover:border-panel-accent hover:after:bg-[radial-gradient(circle,_#105EFF_0%,_#105EFF_36%,_#242433_100%)] light:hover:after:bg-[radial-gradient(circle,_#105EFF_0%,_#105EFF_36%,_#E6E6F0_100%)] hover:after:content-[""] hover:after:absolute hover:after:mx-1 hover:after:h-px after:z-2 hover:after:rounded-sm hover:after:-bottom-[1px] hover:after:inset-x-0.5',
+      focused:
+        ' focus-within:after:bg-[radial-gradient(circle,_#93B6FF_0%,_#105EFF_36%,_#3D3D4D_90%,_#242433_100%)] light:focus-within:after:bg-[radial-gradient(circle,_#105EFF_10%,_#93B6FF_36%,_#E6E6F0_90%)] focus-within:after:content-[""] focus-within:after:absolute focus-within:after:mx-0 focus-within:after:h-px after:z-2 focus-within:after:rounded-sm focus-within:after:-bottom-[1px] focus-within:after:inset-x-0.5',
+      input:
+        'flex-1 font-normal font-sans bg-transparent border-0 p-0 m-0 disabled:pointer-events-none outline-hidden px-0.5 disabled:cursor-not-allowed disabled:text-disabled placeholder-accent',
+      inline: 'bg-transparent border-0 outline-hidden',
+      disabled:
+        'text-waterloo cursor-not-allowed disabled-within:bg-dark-disabled disabled-within:after:content-none',
+      fullWidth: 'w-full',
+      error: 'border-error',
+      sizes: {
+        small: '[&>input]:text-sm p-1 text-sm',
+        medium: '[&>input]:text-base px-2.5 py-1.5 text-base',
+        large: '[&>input]:text-lg p-5 text-lg'
+      },
+      adornment: {
+        base: 'flex items-center justify-center [&>svg]:w-4 [&>svg]:h-4 [&>svg]:current-color text-text-primary',
+        start: 'pr-1.5',
+        end: 'pl-1.5'
+      }
+    },
+    jsonTree: {
+      node: {
+        label: 'font-mono text-anakiwa light:text-blue-500',
+        delimiter: 'pr-1',
+        symbol: 'px-1 opacity-50 font-mono',
+        value: '',
+        count: 'opacity-50'
+      },
+      pager: 'opacity-50 cursor-pointer pl-4'
+    },
+    kbd: {
+      base: 'inline-flex gap-1 items-center',
+      chip: 'whitespace-nowrap rounded-sm font-mono'
+    },
+    list: {
+      base: 'flex flex-col text-text-primary',
+      header: 'pl-2 pr-2 text-text-primary',
+      listItem: {
+        base: 'items-center flex p-2.5 relative rounded-none hover:bg-panel-accent hover:text-mystic light:hover:bg-vulcan/5 light:hover:text-text-secondary [&:has(h3)]:hover:bg-transparent',
+        disabled:
+          'cursor-not-allowed pointer-events-none opacity-40 text-text-secondary',
+        active: ' text-primary-active hover:text-mystic',
+        clickable:
+          'cursor-pointer transition-color duration-300 ease-linear transition-bg duration-300 ease-linear hover:color-inherit hover:bg-transparent',
+        disablePadding: 'p-0',
+        disableGutters: 'pl-0 pr-0',
+        dense: {
+          base: 'p-1',
+          content: '',
+          startAdornment: 'pr-[calc(5/2)]',
+          endAdornment: 'pl-[calc(5/2)]'
+        },
+        adornment: {
+          base: 'items-center flex',
+          start: 'pr-1',
+          end: 'pl-1',
+          svg: 'fill-current'
+        },
+        content: 'overflow-wrap break-word word-wrap break-all flex-1'
+      }
+    },
+    menu: {
+      base: 'relative min-w-[112px] max-w-[500px] p-px',
+      inner: 'focus:outline-hidden text-text-primary bg-panel'
+    },
+    notification: {
+      container: '',
+      positions:
+        'fixed z-9998 h-auto -translate-x-2/4 mb-1 px-24 py-0 left-2/4 bottom-0',
+      notification: {
+        base: 'flex relative text-base min-w-[400px] rounded-xs mb-2.5 py-2 px-4 bg-panel text-text-primary border-panel-accent border',
+        variants: {
+          default: {
+            base: '',
+            icon: ''
+          },
+          success: {
+            base: 'bg-success-background border border-success',
+            icon: 'text-success h-4 w-4'
+          },
+          error: {
+            base: 'bg-error-background border border-error',
+            icon: 'text-error h-4 w-4'
+          },
+          warning: {
+            base: 'bg-warning-background border border-warning',
+            icon: 'text-warning h-4 w-4'
+          },
+          info: {
+            base: 'bg-info-background border border-info',
+            icon: 'text-info h-4 w-4'
+          }
+        },
+        content: 'inline-flex items-start flex-1 flex-col justify-center',
+        header: 'text-base flex gap-2 items-center',
+        closeContainer: 'inline-flex items-center',
+        action: 'ml-auto mr-2 items-center flex',
+        closeButton:
+          'cursor-pointer text-sm font-semibold m-0 border-0 text-text-primary hover:text-text-primary/70',
+        body: 'opacity-70 text-sm mt-1'
+      }
+    },
+    navigation: {
+      bar: {
+        base: `
+          flex h-full w-full p-4 border-r gap-4
+          bg-navigation-colors-background-container-base border-navigation-colors-stroke-container-base
+        `,
+        direction: {
+          vertical: 'flex-col ',
+          horizontal: 'flex-row border-none pb-0'
+        },
+        start: 'pt-4',
+        navigation: 'flex-1 flex flex-col gap-2',
+        end: ''
+      },
+      button: {
+        base: 'group relative',
+        variant: {
+          ghost: {
+            content: `
+              w-full h-full outline-none relative z-10
+              p-4 rounded-md border border-transparent text-navigation-colors-text-resting 
+              hover:text-navigation-colors-text-hover hover:bg-navigation-colors-background-row-items-hover hover:border-navigation-colors-stroke-row-items-hover
+              focus-visible:text-navigation-colors-text-hover focus-visible:bg-navigation-colors-background-row-items-hover focus-visible:border-navigation-colors-stroke-row-items-hover
+              transition-colors ease-out duration-300
+            `,
+            active: `
+              text-navigation-colors-text-selected 
+              hover:text-navigation-colors-text-selected
+              focus-visible:text-navigation-colors-text-selected
+            `,
+            selection: `
+              absolute z-1 top-0 left-0 w-full h-full rounded-md border
+              border-navigation-colors-stroke-row-items-selected bg-navigation-colors-background-row-items-selected
+              hover:border-navigation-colors-stroke-row-items-selected hover:bg-navigation-colors-background-row-items-selected
+              focus-visible:border-navigation-colors-stroke-row-items-selected focus-visible:bg-navigation-colors-background-row-items-selected
+            `,
+            disabled: `
+              opacity-40 cursor-not-allowed font-normal text-navigation-colors-text-resting bg-transparent border-transparent
+              hover:text-navigation-colors-text-resting hover:bg-transparent hover:border-transparent
+            `
+          },
+          underline: {
+            content: `
+              relative z-10 p-4 pb-8 outline-none
+              text-navigation-colors-text-resting 
+              hover:text-navigation-colors-text-hover
+              focus-visible:text-navigation-colors-text-hover
+              transition-colors ease-out duration-300
+            `,
+            active: `
+              font-semibold
+              text-navigation-colors-text-selected
+              hover:text-navigation-colors-text-selected
+              focus-visible:text-navigation-colors-text-selected
+            `,
+            selection: `
+              absolute z-1 bottom-0 w-full h-0.5 rounded-md bg-navigation-colors-stroke-detail-line-active
+            `,
+            disabled: `
+              opacity-40 cursor-not-allowed font-normal text-navigation-colors-text-resting bg-transparent border-transparent
+              hover:text-navigation-colors-text-resting hover:bg-transparent hover:border-transparent
+            `
+          }
+        }
+      }
+    },
+    pager: {
+      base: 'items-center flex user-select-none',
+      pages: {
+        base: 'inline-flex',
+        page: {
+          base: 'py-1 text-slate-500',
+          active: 'font-bold text-text-primary!'
+        }
+      },
+      ellipsis: 'cursor-pointer',
+      pagerDisplayItems: 'mr-1.5 text-slate-500',
+      itemsDisplay: '',
+      showPageRange: '',
+      totalCount: '',
+      control:
+        '[&>svg]:w-5 [&>svg]:h-5 text-slate-200 light:text-slate-400 disabled:light:text-slate-300',
+      firstPage: '',
+      prevPage: '',
+      lastPage: '',
+      nextPage: ''
+    },
+    popover: {
+      base: 'whitespace-nowrap text-center will-change-[transform,opacity] p-1.5 rounded-sm bg-panel text-text-primary',
+      disablePadding: 'p-0'
+    },
+    radio: {
+      base: 'box-border leading-none group',
+      radio: {
+        base: 'will-change-[border-color] inline-flex justify-center items-center box-border align-middle rounded-[100%] bg-transparent border cursor-pointer border-surface group-hover:border-primary-hover hover:border-primary-hover',
+        disabled: 'cursor-not-allowed border-secondary-inactive!',
+        checked: ' border-primary-active group-hover:border-primary-hover'
+      },
+      indicator: {
+        base: 'rounded-[100%] bg-primary group-hover:bg-primary-hover',
+        disabled: 'cursor-not-allowed bg-secondary-inactive!',
+        sizes: {
+          small: 'w-2 h-2',
+          medium: 'w-2.5 h-2.5',
+          large: 'w-3.5 h-3.5'
+        }
+      },
+      label: {
+        base: 'w-full align-middle ml-2.5 text-text-secondary',
+        clickable: 'cursor-pointer hover:text-blue-300',
+        disabled: 'cursor-not-allowed text-secondary-inactive/40!',
+        checked: ' text-text-primary'
+      },
+      sizes: {
+        small: 'w-3 h-3',
+        medium: 'w-4 h-4',
+        large: 'w-5 h-5'
+      }
+    },
+    range: {
+      base: 'relative box-border w-full h-0.5 bg-surface light:bg-gray-200',
+      drag: 'absolute w-4 h-4 -left-2 -top-2 rounded-full',
+      inputWrapper: {
+        base: 'cursor-pointer inline-block relative h-full w-full rounded-full bg-primary-active hover:bg-primary-hover shadow-[0px_4px_4px_0px_rgba(0,0,0,0.20)]',
+        disabled:
+          'cursor-not-allowed bg-secondary-inactive hover:bg-secondary-inactive'
+      },
+      rangeHighlight: {
+        base: 'pointer-events-none h-0.5 bg-primary-active',
+        disabled: 'cursor-not-allowed bg-secondary-inactive'
+      },
+      disabled: 'cursor-not-allowed',
+      input: 'absolute left-[-9999px]',
+      tooltip:
+        'absolute top-[-45px] whitespace-nowrap text-center left-2/4 rounded-lg p-2.5 text-text-primary bg-surface'
+    },
+    redact: {
+      base: 'cursor-text text-text-primary',
+      interactive: 'cursor-pointer hover:underline'
+    },
+    sort: {
+      base: 'cursor-pointer select-none flex items-center relative text-text-primary',
+      disabled: 'cursor-[initial]',
+      hasValue: 'cursor-not-allowed',
+      icon: {
+        base: 'w-4 h-4 align-middle mx-1.5 fill-current',
+        ascending: 'rotate-180'
+      }
+    },
+    select: {
+      selectInput: {
+        base: 'flex flex-nowrap items-center box-border border rounded-sm bg-panel text-text-primary border-panel-accent border-solid hover:border-panel-accent light:hover:border-panel-accent hover:after:bg-[radial-gradient(circle,_#105EFF_0%,_#105EFF_36%,_#242433_100%)] light:hover:after:bg-[radial-gradient(circle,_#105EFF_0%,_#105EFF_36%,_#E6E6F0_100%)] focus-within:after:bg-[radial-gradient(circle,_#93B6FF_0%,_#105EFF_36%,_#3D3D4D_90%,_#242433_100%)] light:focus-within:after:bg-[radial-gradient(circle,_#105EFF_10%,_#93B6FF_36%,_#E6E6F0_90%)] hover:after:content-[""] hover:after:absolute hover:after:mx-1 hover:after:h-px after:z-2 hover:after:rounded-sm hover:after:-bottom-[0px] hover:after:inset-x-0.5 focus-within:after:content-[""] focus-within:after:absolute focus-within:after:mx-0 focus-within:after:h-px after:z-2 focus-within:after:rounded-sm focus-within:after:-bottom-[0px] focus-within:after:inset-x-0.5',
+        container: 'relative',
+        inputContainer:
+          'flex-wrap flex items-center overflow-hidden flex-1 max-w-full [&>div]:max-w-full [&_.invisible]:text-ellipsis [&_.invisible]:overflow-hidden',
+        input:
+          'p-0 bg-transparent text-ellipsis align-middle max-w-full read-only:cursor-not-allowed focus:outline-hidden disabled:text-disabled',
+        placeholder: ' placeholder:text-secondary-content',
+        prefix: 'overflow-hidden whitespace-nowrap text-ellipsis',
+        suffix: {
+          container: 'flex items-center justify-center',
+          button: 'disabled:cursor-not-allowed hover:cursor-pointer',
+          refresh: 'mr-1.5 [&>svg]:w-4 [&>svg]:h-4 [&>svg]:fill-text-secondary',
+          loader: 'mr-2.5',
+          close: 'mr-1.5 [&>svg]:w-4 [&>svg]:h-4 [&>svg]:fill-text-secondary',
+          expand: '[&>svg]:w-4 [&>svg]:h-4 [&>svg]:fill-text-secondary'
+        },
+        disabled:
+          'cursor-not-allowed text-disabled hover:after:content-none text-text-secondary/40 border-surface light:hover:border-surface',
+        unfilterable: 'caret-transparent',
+        error: 'border border-solid border-error light:border-error/20',
+        open: 'rounded-sm rounded-ee-none rounded-es-none',
+        single: {
+          prefix: 'overflow-hidden whitespace-nowrap text-ellipsis max-w-full',
+          inputContainer: 'flex-nowrap',
+          input: 'max-w-full'
+        },
+        multiple: {
+          prefix: 'contents',
+          inputContainer: 'flex-wrap'
+        },
+        chip: {
+          base: 'cursor-pointer flex text-sm leading-none box-border mr-1 px-1 py-1 rounded-sm border-solid border-transparent [&>svg]:fill-text-primary [&>svg]:disabled:fill-text-secondary/40',
+          hover: ' hover:brightness-150',
+          focused:
+            'focused:border-transparent focused:outline-none border-panel-accent',
+          disabled: 'disabled:cursor-not-allowed',
+          removeButton:
+            'cursor-pointer leading-0 ml-1 p-0 border-0 [&>svg]:w-3 [&>svg]:h-3 [&>svg]:align-baseline [&>svg]:pointer-events-none [&>svg]:fill-text-primary [&>svg]:disabled:fill-text-secondary/40'
+        },
+        size: {
+          small: 'py-1 px-2 text-sm min-h-8',
+          medium: 'py-2 px-3 text-base min-h-[35px]',
+          large: 'py-2 px-3 text-lg min-h-[42px]'
+        }
+      },
+      selectMenu: {
+        base: 'border border-solid rounded-b-md text-center will-change-[transform,opacity] min-w-[112px] max-h-[300px] overflow-y-auto text-left box-border bg-panel text-text-primary border-panel-accent border-t-transparent',
+        groupItem: {
+          base: 'p-0 border-0 first:pt-2 last:pb-2',
+          title: 'font-bold uppercase m-0 px-1.5 py-2.5 text-text-primary',
+          size: {
+            small: 'px-2.5 text-sm',
+            medium: 'px-3 text-sm',
+            large: 'px-3.5 text-base'
+          }
+        },
+        option: {
+          base: 'flex-1 whitespace-break-spaces break-words py-1.5 px-2.5 text-text-secondary ',
+          hover:
+            ' hover:bg-vulcan hover:text-mystic light:hover:bg-vulcan/5 light:hover:text-text-secondary',
+          selected: ' text-primary-active',
+          active: ' bg-vulcan hover:text-mystic',
+          disabled: '',
+          checkIcon: 'ml-1',
+          content: 'flex flex-row justify-between'
+        },
+        size: {
+          small: 'px-2.5 py-1.5 text-sm',
+          medium: 'px-4 py-2 text-base',
+          large: 'px-5 py-3 text-lg'
+        }
+      }
+    },
+    stack: {
+      base: 'flex items-center gap-2.5 text-text-primary',
+      dense: 'gap-1',
+      inline: 'inline-flex',
+      direction: {
+        row: 'flex-row',
+        column: 'flex-col',
+        rowReverse: 'flex-row-reverse',
+        columnReverse: 'flex-col-reverse'
+      },
+      alignItems: {
+        start: 'items-start',
+        end: 'items-end',
+        center: 'items-center',
+        stretch: 'items-stretch'
+      },
+      justifyContent: {
+        start: 'justify-start',
+        end: 'justify-end',
+        center: 'justify-center',
+        spaceBetween: 'justify-between'
+      }
+    },
+    stepper: {
+      base: 'grid grid-cols-[min-content_1fr] gap-x-3',
+      step: {
+        base: {
+          common: 'border-l border-solid border-panel-accent translate-x-1/2',
+          dot: '',
+          circle: ''
+        },
+        marker: {
+          base: 'rounded-full w-[9px] h-[9px] bg-surface',
+          container: {
+            common:
+              'w-max pt-1 pb-0.5 backdrop-blur-md -translate-x-[calc(50%+0.5px)]',
+            dot: '',
+            circle: ''
+          },
+          active: 'bg-info',
+          label: {
+            base: 'flex flex-row items-center gap-1 border border-solid border-surface px-3 py-1 rounded-[20px]',
+            active: 'border-info bg-info-background'
+          }
+        },
+        active: 'border-primary',
+        content: 'pb-6'
+      }
+    },
+    tabs: {
+      base: 'flex flex-col',
+      list: {
+        base: 'flex text-center flex-wrap -mb-px',
+        indicator: {
+          base: 'bg-primary absolute bottom-0 left-0 right-0',
+          size: {
+            small: 'h-0.5',
+            medium: 'h-0.5',
+            large: 'h-1'
+          }
+        },
+        divider: 'w-full h-px border-0',
+        variant: {
+          primary: {
+            divider: 'bg-surface'
+          },
+          secondary: {
+            divider:
+              'bg-linear-to-r from-transparent to-transparent via-primary'
+          }
+        },
+        tab: {
+          base: 'relative',
+          button:
+            'transition-colors text-text-secondary font-bold hover:text-primary-hover',
+          selected: 'text-text-primary',
+          disabled: 'cursor-not-allowed opacity-40',
+          size: {
+            small: 'pb-1 text-sm',
+            medium: 'pb-2 text-lg',
+            large: 'pb-4 text-xl'
+          }
+        }
+      },
+      panel: 'mt-2'
+    },
+    textarea: {
+      input:
+        'resize-none read-only:cursor-not-allowed flex-1 font-normal font-sans bg-transparent border-0 p-0 m-0 disabled:pointer-events-none outline-hidden px-0.5 disabled:cursor-not-allowed disabled:text-disabled placeholder-accent',
+      base: ' flex relative flex-row items-center flex-nowrap box-border transition-colors rounded-xs bg-panel border border-panel-accent text-text-primary hover:border-panel-accent light:hover:border-panel-accent hover:after:bg-[radial-gradient(circle,_#105EFF_0%,_#105EFF_36%,_#242433_100%)] light:hover:after:bg-[radial-gradient(circle,_#105EFF_0%,_#105EFF_36%,_#E6E6F0_100%)] hover:after:content-[""] hover:after:absolute hover:after:mx-1 hover:after:h-px after:z-2 hover:after:rounded-sm hover:after:-bottom-[1px] hover:after:inset-x-0.5 disabled-within:hover:after:content-none',
+      disabled:
+        ' text-waterloo cursor-not-allowed disabled-within:bg-dark-disabled disabled-within:after:content-none',
+      fullWidth: 'w-full',
+      error: 'border-error',
+      sizes: {
+        small: '[&>input]:text-sm p-1 text-sm',
+        medium: '[&>input]:text-base px-2.5 py-1.5 text-base',
+        large: '[&>input]:text-lg p-5 text-lg'
+      }
+    },
+    toggle: {
+      base: 'flex items-center justify-start cursor-pointer bg-surface box-border border border-panel-accent rounded-full hover:bg-primary-hover transition-[background-color] ease-in-out duration-300',
+      disabled: 'cursor-not-allowed bg-transparent hover:bg-transparent',
+      checked: 'justify-end bg-primary',
+      disabledAndChecked:
+        'bg-secondary-inactive hover:bg-secondary-inactive light:bg-gray-400 light:hover:bg-gray-400',
+      handle: {
+        base: 'rounded-full bg-panel',
+        sizes: {
+          small: 'w-3 h-full',
+          medium: 'w-5 h-full',
+          large: 'w-6 h-full'
+        },
+        disabled: 'bg-secondary-inactive light:bg-gray-400',
+        disabledAndChecked: 'bg-black light:bg-white'
+      },
+      sizes: {
+        small: 'w-8 h-4 p-px',
+        medium: 'w-12 h-6 p-px',
+        large: 'w-16 h-7 p-px'
+      }
+    },
+    tooltip: {
+      base: 'whitespace-nowrap text-center will-change-[transform,opacity] p-1.5 rounded-sm bg-panel-accent text-text-primary',
+      disablePointer: 'pointer-events-none'
+    },
+    tree: {
+      base: 'relative m-0 p-0 list-none',
+      tree: 'border pt-1 pb-1 px-3 border-solid border-transparent',
+      arrow: 'w-3 h-3 fill-text-primary',
+      node: {
+        base: 'pt-0.5 m-0 list-style-none first:pt-0 last:pb-0 text-text-primary',
+        collapsed: '-rotate-90',
+        disabled: 'opacity-60',
+        leaf: 'pl-4',
+        label: '',
+        button: {
+          base: 'min-w-[auto] min-h-[auto] w-auto h-auto transition-transform duration-100 ease-in-out ml-0 mr-1 my-0 p-0',
+          icon: 'align-middle block h-2 w-2 m-0.5 fill-text-primary'
+        }
+      },
+      nodeBlock: 'flex items-center',
+      subtree: 'relative ml-5 mr-0 mt-1 mb-0 p-0'
+    },
+    typography: {
+      base: '',
+      color: {
+        primary: 'text-primary',
+        secondary: 'text-secondary'
+      },
+      weight: {
+        thin: 'font-thin',
+        extralight: 'font-extralight',
+        light: 'font-light',
+        regular: 'font-normal',
+        medium: 'font-medium',
+        semibold: 'font-semibold',
+        bold: 'font-bold',
+        extrabold: 'font-extrabold',
+        black: 'font-black'
+      },
+      variant: {
+        h1: {
+          base: 'font-sans text-5xl font-normal leading-12'
+        },
+        h2: {
+          base: 'font-sans text-4xl font-normal leading-9'
+        },
+        h3: {
+          base: 'font-sans text-3xl font-normal leading-8'
+        },
+        h4: {
+          base: 'font-sans text-2xl font-normal leading-7'
+        },
+        h5: {
+          base: 'font-sans text-xl font-normal leading-6'
+        },
+        h6: {
+          base: 'font-sans text-lg font-normal leading-6'
+        },
+        body: {
+          base: 'font-serif text-base font-normal leading-4.5',
+          size: {
+            large: 'text-lg leading-6',
+            small: 'text-sm leading-3.5'
+          }
+        },
+        button: {
+          base: 'font-serif text-base font-semibold leading-4.5',
+          size: {
+            large: 'text-lg leading-6',
+            small: 'text-sm leading-3.5'
+          }
+        },
+        label: {
+          base: 'font-serif text-sm font-semibold leading-3',
+          size: {
+            large: 'text-md leading-3.5',
+            small: 'text-xs'
+          }
+        },
+        monospace: {
+          base: 'font-mono font-medium text-xs leading-3'
+        }
+      }
+    },
+    typography_deprecated: {
+      base: '',
+      text: {
+        thin: 'font-thin',
+        bold: 'font-semibold',
+        extraBold: 'font-extrabold',
+        italic: 'italic'
+      },
+      variant: {},
+      colors: {
+        primary: 'text-primary',
+        secondary: 'text-secondary',
+        success: 'text-success',
+        warning: 'text-warning',
+        error: 'text-error',
+        info: 'text-info'
+      },
+      sub: 'text-sm font-semibold mb-0.5',
+      smallHeading: 'text-base font-normal mb-1',
+      secondaryHeading: 'text-3xl font-normal mb-1',
+      primaryHeading: 'text-3xl font-extrabold mb-1',
+      pageTitle: 'text-[40px] font-semibold mb-5',
+      disableMargins: 'm-0'
+    },
+    verticalSpacer: {
+      base: '',
+      size: {
+        xs: 'h-0.5',
+        sm: 'h-1.5',
+        md: 'h-2.5',
+        lg: 'h-5',
+        xl: 'h-6',
+        xxl: 'h-8'
+      }
+    }
+  }
+};
diff --git a/src/utils/Theme/types.ts b/src/utils/Theme/types.ts
deleted file mode 100644
index 10a852f45..000000000
--- a/src/utils/Theme/types.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-export interface Palette {
-  background?: string;
-  color?: string;
-  'background-hover'?: string;
-  'color-hover'?: string;
-}
-
-export interface Palettes {
-  body?: Palette;
-  primary?: Palette;
-  secondary?: Palette;
-  error?: Palette;
-  warning?: Palette;
-  success?: Palette;
-  info?: Palette;
-  disabled?: Palette;
-}
-
-export interface Scale {
-  50?: string;
-  100?: string;
-  200?: string;
-  300?: string;
-  400?: string;
-  500?: string;
-  600?: string;
-  700?: string;
-  800?: string;
-  900?: string;
-}
-
-export interface Sizes {
-  xs?: number | string;
-  sm?: number | string;
-  md?: number | string;
-  lg?: number | string;
-  xl?: number | string;
-  xxl?: number | string;
-}
-
-export interface Weights {
-  thin?: string;
-  normal?: string;
-  bold?: string;
-  extraBold?: string;
-}
-
-export type Color = Scale;
-
-export type Spacings = Sizes;
-
-export interface Borders {
-  radius?: Sizes;
-}
-
-export type Shadows = Scale;
-
-export interface Colors {
-  black?: string;
-  white?: string;
-  red?: Color;
-  purple?: Color;
-  blue?: Color;
-  green?: Color;
-  yellow?: Color;
-  orange?: Color;
-  gray?: Color;
-  pink?: Color;
-  slate?: Color;
-  overlay?: Color;
-  primary?: Color;
-  secondary?: Color;
-}
-
-export interface FontFamilies {
-  fontFamily?: string;
-  monoFontFamily?: string;
-}
-
-export interface Typography {
-  families?: FontFamilies;
-  sizes?: Sizes;
-  weights?: Weights;
-}
-
-export interface Components {
-  [key: string]: {
-    [key: string]: string;
-  };
-}
-
-export type Gradients = Omit<Colors, 'overlay'>;
-
-export interface Theme {
-  palettes?: Palettes;
-  colors?: Colors;
-  spacings?: Spacings;
-  borders?: Borders;
-  gradients?: Gradients;
-  shadows?: Shadows;
-  typography?: Typography;
-  components?: Components;
-}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 305f52384..298df5040 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,9 +1,9 @@
+export * from './CloneElement';
 export * from './ExitListener';
 export * from './Overlay';
 export * from './Portal';
 export * from './Position';
 export * from './Theme';
+export * from './useCursor';
 export * from './useId';
-export * from './CloneElement';
 export * from './useUserSelect';
-export * from './useCursor';
diff --git a/vite.config.ts b/vite.config.ts
index f807e2430..004a4a3db 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -38,6 +38,14 @@ export default defineConfig(({ mode }) =>
             {
               src: 'docs/blocks/**/*.story.tsx',
               dest: 'blocks/'
+            },
+            {
+              src: 'src/assets/css/*.css',
+              dest: 'styles'
+            },
+            {
+              src: 'src/assets/css/tailwind/*.css',
+              dest: 'styles/tailwind'
             }
           ]
         })