From 592434abc6ff6d7c0b0fd4b2affece399f66d7f5 Mon Sep 17 00:00:00 2001
From: Ted Palmer <etpalmer17@gmail.com>
Date: Tue, 10 Feb 2026 09:48:40 -0800
Subject: [PATCH 01/25] feat: changeset

---
 .changeset/fair-cats-obey.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/fair-cats-obey.md

diff --git a/.changeset/fair-cats-obey.md b/.changeset/fair-cats-obey.md
new file mode 100644
index 000000000..b1b773634
--- /dev/null
+++ b/.changeset/fair-cats-obey.md
@@ -0,0 +1,6 @@
+---
+'@relayprotocol/relay-kit-hooks': patch
+'@relayprotocol/relay-kit-ui': patch
+---
+
+Refactor deposit address transaction tracking to use requests API

From d7cda02fe7972751f2322c3694810c924e5a752f Mon Sep 17 00:00:00 2001
From: Ted Palmer <etpalmer17@gmail.com>
Date: Fri, 20 Feb 2026 14:44:40 -0500
Subject: [PATCH 02/25] wip: pandacss -> tailwind

---
 packages/ui/package.json                      |   22 +-
 packages/ui/panda.config.ts                   |  389 -----
 packages/ui/postcss.config.mjs                |    6 +
 packages/ui/scripts/scope-css.mjs             |   50 +
 .../ui/src/components/common/AmountInput.tsx  |   27 +-
 .../src/components/common/BalanceDisplay.tsx  |    4 +-
 .../src/components/common/CopyToClipBoard.tsx |   29 +-
 .../components/common/CustomAddressModal.tsx  |   74 +-
 .../ui/src/components/common/ErrorWell.tsx    |   43 +-
 .../src/components/common/LoadingSpinner.tsx  |   28 +-
 packages/ui/src/components/common/Modal.tsx   |   94 +-
 .../components/common/MultiWalletDropdown.tsx |   89 +-
 .../components/common/PercentageButtons.tsx   |   50 +-
 .../common/SlippageToleranceConfig.tsx        |  178 +--
 .../ui/src/components/common/StepIcon.tsx     |    8 +-
 .../common/TokenSelector/ChainFilter.tsx      |  153 +-
 .../common/TokenSelector/ChainFilterRow.tsx   |   76 +-
 .../TokenSelector/ChainFilterSidebar.tsx      |  144 +-
 .../common/TokenSelector/ChainShortcuts.tsx   |   41 +-
 .../TokenSelector/CompactChainFilter.tsx      |  101 +-
 .../TokenSelector/MobileChainSelector.tsx     |  150 +-
 .../common/TokenSelector/PaymentMethod.tsx    |  135 +-
 .../common/TokenSelector/PaymentTokenList.tsx |  104 +-
 .../common/TokenSelector/SuggestedTokens.tsx  |   35 +-
 .../common/TokenSelector/TagPill.tsx          |   10 +-
 .../common/TokenSelector/TokenList.tsx        |   93 +-
 .../common/TokenSelector/TokenSelector.tsx    |  109 +-
 .../triggers/PaymentMethodTrigger.tsx         |   57 +-
 .../TokenSelector/triggers/TokenTrigger.tsx   |   44 +-
 .../TransactionModal/DepositAddressModal.tsx  |   14 +-
 .../TransactionModal/TransactionModal.tsx     |   17 +-
 .../steps/ApprovalPlusSwapStep.tsx            |   91 +-
 .../steps/DepositAddressValidatingStep.tsx    |   14 +-
 .../TransactionModal/steps/ErrorStep.tsx      |   76 +-
 .../steps/SwapConfirmationStep.tsx            |  175 +-
 .../steps/SwapSuccessStep.tsx                 |  160 +-
 .../steps/TransactionsByChain.tsx             |   17 +-
 .../steps/WaitingForDepositStep.tsx           |  122 +-
 .../common/UnverifiedTokenModal.tsx           |   62 +-
 .../components/primitives/AccessibleList.tsx  |   42 +-
 .../ui/src/components/primitives/Anchor.tsx   |   86 +-
 packages/ui/src/components/primitives/Box.tsx |   16 +-
 .../ui/src/components/primitives/Button.tsx   |  220 +--
 .../src/components/primitives/ChainIcon.tsx   |   21 +-
 .../components/primitives/ChainTokenIcon.tsx  |   49 +-
 .../src/components/primitives/Collapsible.tsx |   60 +-
 .../ui/src/components/primitives/Dialog.tsx   |  161 +-
 .../ui/src/components/primitives/Dropdown.tsx |   65 +-
 .../ui/src/components/primitives/Flex.tsx     |   91 +-
 .../ui/src/components/primitives/Input.tsx    |  120 +-
 .../ui/src/components/primitives/Pill.tsx     |   91 +-
 .../ui/src/components/primitives/Skeleton.tsx |   22 +-
 .../components/primitives/SlippageButton.tsx  |   14 +-
 .../ui/src/components/primitives/Switch.tsx   |   74 +-
 .../ui/src/components/primitives/Tabs.tsx     |   74 +-
 .../ui/src/components/primitives/Text.tsx     |  151 +-
 .../ui/src/components/primitives/Tooltip.tsx  |   59 +-
 .../src/components/widgets/FeeBreakdown.tsx   |  167 +-
 .../widgets/FetchingQuoteLoader.tsx           |   20 +-
 .../OnrampWidget/modals/OnrampModal.tsx       |    9 +-
 .../modals/steps/OnrampConfirmingStep.tsx     |   36 +-
 .../modals/steps/OnrampMoonPayStep.tsx        |   64 +-
 .../steps/OnrampProcessingPassthroughStep.tsx |   59 +-
 .../modals/steps/OnrampProcessingStepUI.tsx   |  126 +-
 .../modals/steps/OnrampSuccessStep.tsx        |   62 +-
 .../OnrampWidget/widget/FiatCurrencyModal.tsx |  136 +-
 .../widgets/OnrampWidget/widget/index.tsx     |  162 +-
 .../components/widgets/PriceImpactTooltip.tsx |   30 +-
 .../ui/src/components/widgets/SwapButton.tsx  |   25 +-
 .../widgets/SwapWidget/GasTopUpSection.tsx    |   12 +-
 .../widgets/SwapWidget/PriceImpact.tsx        |    8 +-
 .../components/widgets/SwapWidget/index.tsx   |  204 +--
 .../widgets/TokenSelectorContainer.tsx        |   22 +-
 .../widgets/TokenWidget/AmountModeToggle.tsx  |   16 +-
 .../TokenWidget/AmountSectionHeader.tsx       |    2 +-
 .../widgets/TokenWidget/BuyTabContent.tsx     |   68 +-
 .../TokenWidget/DestinationWalletSelector.tsx |   15 +-
 .../widgets/TokenWidget/FeeBreakdownInfo.tsx  |   72 +-
 .../TokenWidget/FeeBreakdownTooltip.tsx       |   22 +-
 .../widgets/TokenWidget/SectionContainer.tsx  |   33 +-
 .../widgets/TokenWidget/SellTabContent.tsx    |   75 +-
 .../TokenWidget/TransactionDetailsFooter.tsx  |   32 +-
 .../widgets/TokenWidget/widget/index.tsx      |   78 +-
 .../components/widgets/WidgetErrorWell.tsx    |  143 +-
 packages/ui/src/styles/base.css               |  852 ++++++++++
 packages/ui/src/utils/cn.ts                   |    6 +
 packages/ui/tailwind.config.ts                |  112 ++
 pnpm-lock.yaml                                | 1407 ++++-------------
 88 files changed, 2999 insertions(+), 5583 deletions(-)
 delete mode 100644 packages/ui/panda.config.ts
 create mode 100644 packages/ui/postcss.config.mjs
 create mode 100644 packages/ui/scripts/scope-css.mjs
 create mode 100644 packages/ui/src/styles/base.css
 create mode 100644 packages/ui/src/utils/cn.ts
 create mode 100644 packages/ui/tailwind.config.ts

diff --git a/packages/ui/package.json b/packages/ui/package.json
index df7e686e2..63636e52b 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -29,29 +29,28 @@
       "import": "./_esm/src/index.js",
       "require": "./_cjs/src/index.js"
     },
-    "./styles.css": "./dist/styles.css",
-    "./panda.buildinfo.json": "./dist/panda.buildinfo.json"
+    "./styles.css": "./dist/styles.css"
   },
   "scripts": {
     "prebuild": "node scripts/version.mjs",
-    "build": "pnpm run prebuild && pnpm run lint && pnpm prepare && pnpm run clean && pnpm run build:cjs && pnpm run build:esm && pnpm run build:types && pnpm run build:panda",
+    "build": "pnpm run prebuild && pnpm run lint && pnpm run clean && pnpm run build:css && pnpm run build:cjs && pnpm run build:esm && pnpm run build:types && pnpm run copy:css",
     "build:cjs": "tsc --project ./tsconfig.build.json --module commonjs --outDir ./_cjs --removeComments --verbatimModuleSyntax false && printf '{\"type\":\"commonjs\"}' > ./_cjs/package.json",
     "build:esm": "tsc --project ./tsconfig.build.json --module es2020 --outDir ./_esm && printf '{\"type\": \"module\",\"sideEffects\":false}' > ./_esm/package.json",
     "build:types": "tsc --project ./tsconfig.build.json --module esnext --outDir ./_types --declarationDir ./_types --emitDeclarationOnly --declaration --declarationMap",
-    "build:panda": "mkdir -p dist && panda cssgen --outfile dist/styles.css && cp dist/styles.css _cjs/src && cp dist/styles.css _esm/src && panda ship --outfile dist/panda.buildinfo.json",
-    "dev": "concurrently \"pnpm run clean\" \"pnpm run dev:esm\" \"pnpm run dev:types\"",
+    "build:css": "mkdir -p dist && tailwindcss -i src/styles/base.css -o dist/styles.css --config tailwind.config.ts --minify && node scripts/scope-css.mjs",
+    "copy:css": "cp dist/styles.css _cjs/src && cp dist/styles.css _esm/src",
+    "dev": "concurrently \"pnpm run clean\" \"pnpm run dev:esm\" \"pnpm run dev:types\" \"pnpm run dev:css\"",
     "dev:esm": "tsc --watch --project ./tsconfig.build.json --module es2020 --outDir ./_esm && printf '{\"type\": \"module\",\"sideEffects\":false}' > ./_esm/package.json",
     "dev:types": "tsc --watch --project ./tsconfig.build.json --module esnext --outDir ./_types --declarationDir ./_types --emitDeclarationOnly --declaration --declarationMap",
+    "dev:css": "tailwindcss -i src/styles/base.css -o dist/styles.css --config tailwind.config.ts --watch",
     "clean": "rimraf ./_esm ./_cjs ./_types",
     "typecheck": "tsc --noEmit",
-    "prepare": "panda codegen",
     "lint": "pnpm eslint"
   },
   "devDependencies": {
-    "@csstools/postcss-cascade-layers": "^4.0.6",
     "@eslint/js": "^9.5.0",
-    "@pandacss/dev": "^0.40.0",
     "@types/eslint__js": "^8.42.3",
+    "autoprefixer": "^10.4.0",
     "eslint": "~8.57.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-react": "^7.34.2",
@@ -60,6 +59,7 @@
     "node-fetch": "^3.3.2",
     "postcss": "^8",
     "rimraf": "^5.0.5",
+    "tailwindcss": "^3.4.0",
     "typescript": "5.4.5",
     "typescript-eslint": "^7.13.1",
     "@types/react": "^19.0.0",
@@ -92,15 +92,15 @@
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@radix-ui/react-visually-hidden": "^1.1.2",
-    "@relayprotocol/relay-design-system": "workspace:^",
     "@relayprotocol/relay-kit-hooks": "workspace:*",
     "@relayprotocol/relay-sdk": "workspace:*",
     "axios": "^1.7.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
     "dayjs": "^1.11.11",
-    "framer-motion": "^11.2.10",
     "fuse.js": "^7.0.0",
-    "pandacss-preset-radix-colors": "^0.2.0",
     "qrcode.react": "^4.1.0",
+    "tailwind-merge": "^2.2.0",
     "usehooks-ts": "^3.1.0"
   },
   "keywords": [
diff --git a/packages/ui/panda.config.ts b/packages/ui/panda.config.ts
deleted file mode 100644
index f742faf46..000000000
--- a/packages/ui/panda.config.ts
+++ /dev/null
@@ -1,389 +0,0 @@
-import { defineConfig } from '@pandacss/dev'
-import radixColorsPreset from 'pandacss-preset-radix-colors'
-import postcss from 'postcss'
-import postcssCascadeLayers from '@csstools/postcss-cascade-layers'
-
-export const Colors = {
-  // Gray
-  gray1: { value: '{colors.slate.1}' },
-  gray2: { value: '{colors.slate.2}' },
-  gray3: { value: '{colors.slate.3}' },
-  gray4: { value: '{colors.slate.4}' },
-  gray5: { value: '{colors.slate.5}' },
-  gray6: { value: '{colors.slate.6}' },
-  gray7: { value: '{colors.slate.7}' },
-  gray8: { value: '{colors.slate.8}' },
-  gray9: { value: '{colors.slate.9}' },
-  gray10: { value: '{colors.slate.10}' },
-  gray11: { value: '{colors.slate.11}' },
-  gray12: { value: '{colors.slate.12}' },
-  // BlackA
-  blackA10: { value: '{colors.black.a.10}' },
-  // Blue
-  blue12: { value: '{colors.blue.12}' },
-  // Red
-  red2: { value: '{colors.tomato.2}' },
-  red3: { value: '{colors.tomato.3}' },
-  red4: { value: '{colors.tomato.4}' },
-  red5: { value: '{colors.tomato.5}' },
-  red6: { value: '{colors.tomato.6}' },
-  red9: { value: '{colors.tomato.9}' },
-  red10: { value: '{colors.tomato.10}' },
-  red11: { value: '{colors.tomato.11}' },
-  red12: { value: '{colors.tomato.12}' },
-  // Green
-  green2: { value: '{colors.grass.2}' },
-  green3: { value: '{colors.grass.3}' },
-  green9: { value: '{colors.grass.9}' },
-  green10: { value: '{colors.grass.10}' },
-  green11: { value: '{colors.grass.11}' },
-  green12: { value: '{colors.grass.12}' },
-  // Yellow
-  yellow9: { value: '{colors.yellow.9}' },
-  yellow10: { value: '{colors.yellow.10}' },
-  yellow11: { value: '{colors.yellow.11}' },
-  yellow12: { value: '{colors.yellow.12}' },
-  // Amber
-  amber2: { value: '{colors.amber.2}' },
-  amber3: { value: '{colors.amber.3}' },
-  amber4: { value: '{colors.amber.4}' },
-  amber9: { value: '{colors.amber.9}' },
-  amber10: { value: '{colors.amber.10}' },
-  amber11: { value: '{colors.amber.11}' },
-  amber12: { value: '{colors.amber.12}' }
-}
-
-export default defineConfig({
-  jsxFramework: 'react',
-  // Whether to use css reset
-  preflight: {
-    scope: '.relay-kit-reset'
-  },
-
-  // Where to look for your css declarations
-  include: ['./src/**/*.{js,jsx,ts,tsx}', './pages/**/*.{js,jsx,ts,tsx}'],
-
-  // Files to exclude
-  exclude: [],
-
-  hooks: {
-    'cssgen:done': ({ artifact, content }) => {
-      if (artifact === 'styles.css') {
-        return postcss([postcssCascadeLayers()]).process(content).css
-      }
-    }
-  },
-
-  presets: [
-    radixColorsPreset({
-      darkMode: {
-        condition: '.dark &'
-      },
-      colorScales: [
-        'amber',
-        'grass',
-        'slate',
-        'gray',
-        'tomato',
-        'black',
-        'yellow',
-        'blue'
-      ]
-    }),
-    // Re-add the panda preset if you want to keep
-    // the default keyframes, breakpoints, tokens
-    // and textStyles provided by PandaCSS
-    '@pandacss/preset-panda'
-  ],
-
-  conditions: {
-    extend: {
-      dark: '.dark &, [data-theme="dark"] &',
-      light: '.light &',
-      typeNumber: '&[type=number]',
-      placeholder_parent: '&[placeholder]',
-      spinButtons: '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button',
-      data_state_active: '&[data-state="active"]',
-      data_state_open: '&[data-state="open"]',
-      data_state_open_child: '[data-state=open] &',
-      data_state_closed: '&[data-state="closed"]',
-      data_swipe_move: '&[data-swipe="move"]',
-      data_swipe_cancel: '&[data-swipe="cancel"]',
-      data_swipe_end: '&[data-swipe="end"]',
-      data_state_checked: '&[data-state="checked"]'
-    }
-  },
-  prefix: 'relay',
-
-  // Useful for theme customization
-  theme: {
-    tokens: {
-      spacing: {
-        1: { value: '4px' },
-        2: { value: '8px' },
-        3: { value: '12px' },
-        4: { value: '16px' },
-        5: { value: '32px' },
-        6: { value: '64px' },
-        'widget-card-section-gutter': { value: '6px' }
-      },
-      fonts: {
-        body: { value: 'var(--font-inter), sans-serif' },
-        heading: { value: 'var(--font-inter), sans-serif' }
-      },
-      colors: Colors,
-      gradients: {
-        success: { value: 'linear-gradient(to right, #30A46C, #0ADF79)' }
-      }
-    },
-
-    semanticTokens: {
-      colors: {
-        primary1: {
-          value: { base: '{colors.violet.1}', _dark: '{colors.violetDark.1}' }
-        },
-        primary2: {
-          value: { base: '{colors.violet.2}', _dark: '{colors.violetDark.2}' }
-        },
-        primary3: {
-          value: { base: '{colors.violet.3}', _dark: '{colors.violetDark.3}' }
-        },
-        primary4: {
-          value: { base: '{colors.violet.4}', _dark: '{colors.violetDark.4}' }
-        },
-        primary5: {
-          value: { base: '{colors.violet.5}', _dark: '{colors.violetDark.5}' }
-        },
-        primary6: {
-          value: { base: '{colors.violet.6}', _dark: '{colors.violetDark.6}' }
-        },
-        primary7: {
-          value: { base: '{colors.violet.7}', _dark: '{colors.violetDark.7}' }
-        },
-        primary8: {
-          value: { base: '{colors.violet.8}', _dark: '{colors.violetDark.8}' }
-        },
-        primary9: {
-          value: { base: '{colors.violet.9}', _dark: '{colors.violetDark.9}' }
-        },
-        primary10: {
-          value: {
-            base: '{colors.violet.10}',
-            _dark: '{colors.violetDark.10}'
-          }
-        },
-        primary11: {
-          value: {
-            base: '{colors.violet.11}',
-            _dark: '{colors.violetDark.11}'
-          }
-        },
-        primary12: {
-          value: {
-            base: '{colors.violet.12}',
-            _dark: '{colors.violetDark.12}'
-          }
-        },
-        'primary-color': { value: { base: '{colors.primary9}' } },
-        'focus-color': { value: { base: '{colors.primary7}' } },
-        'subtle-background-color': { value: { base: '{colors.gray.1}' } },
-        'subtle-border-color': { value: { base: '{colors.gray.5}' } },
-
-        // Text
-        'text-default': { value: { base: '{colors.gray.12}' } },
-        'text-subtle': { value: { base: '{colors.gray.11}' } },
-        'text-subtle-secondary': { value: { base: '{colors.gray.11}' } },
-        'text-error': { value: { base: '{colors.tomato.12}' } },
-        'text-success': { value: { base: '{colors.grass.11}' } },
-
-        // Primary Button
-        'primary-button-background': { value: { base: '{colors.primary9}' } },
-        'primary-button-color': { value: { base: 'white' } },
-        'primary-button-hover-background': {
-          value: { base: '{colors.primary10}' }
-        },
-        'primary-button-hover-color': {
-          value: { base: 'white' }
-        },
-
-        // Secondary Button
-        'secondary-button-background': { value: { base: '{colors.primary3}' } },
-        'secondary-button-color': { value: { base: '{colors.gray12}' } },
-        'secondary-button-hover-background': {
-          value: { base: '{colors.primary4}' }
-        },
-        'secondary-button-hover-color': {
-          value: { base: '{colors.gray12}' }
-        },
-
-        // Disabled Button
-        'button-disabled-background': {
-          value: { base: '{colors.gray.8}' }
-        },
-        'button-disabled-color': {
-          value: { base: '{colors.gray.11}' }
-        },
-
-        // Input
-        'input-background': {
-          value: { base: '{colors.gray.3}' }
-        },
-        'input-color': { value: { base: '{colors.gray.12}' } },
-
-        // Anchor
-        'anchor-color': { value: { base: '{colors.primary11}' } },
-        'anchor-hover-color': { value: { base: '{colors.primary9}' } },
-
-        // Dropdown
-        'dropdown-background': { value: { base: '{colors.gray.3}' } },
-
-        // Widget
-        'widget-background': {
-          value: { base: 'white', _dark: '{colors.gray.1}' }
-        },
-        'widget-card-background': { value: { base: '{colors.gray.1}' } },
-        'widget-selector-background': { value: { base: '{colors.gray.2}' } },
-        'widget-selector-hover-background': {
-          value: { base: '{colors.gray.3}' }
-        },
-        'widget-swap-currency-button-border-color': {
-          value: { base: '{colors.primary4}' }
-        },
-
-        // Modal
-        'modal-background': {
-          value: { base: 'white', _dark: '{colors.gray.1}' }
-        },
-
-        // Skeleton
-        'skeleton-background': { value: { base: '{colors.gray.3}' } }
-      },
-      radii: {
-        'widget-border-radius': { value: { base: '16px' } },
-        'widget-card-border-radius': { value: '12px' },
-        'modal-border-radius': { value: { base: '16px' } },
-        'input-border-radius': { value: { base: '8px' } },
-        'dropdown-border-radius': { value: { base: '8px' } },
-        'widget-swap-currency-button-border-radius': { value: { base: '8px' } }
-      },
-      borders: {
-        'widget-border': { value: { base: '0px solid white' } },
-        'modal-border': { value: { base: '0px solid white' } },
-        'dropdown-border': { value: { base: '1px solid {colors.gray5}' } },
-        'widget-swap-currency-button-border-width': {
-          value: { base: '2px' }
-        },
-        'widget-card-border': {
-          value: { base: '1px solid {colors.primary4}' }
-        }
-      },
-      shadows: {
-        'widget-box-shadow': {
-          value: { base: '0px 4px 30px rgba(0, 0, 0, 0.10)' }
-        }
-      }
-    },
-    extend: {
-      tokens: {
-        colors: {
-          violet: {
-            1: { value: '#FDFDFF' },
-            2: { value: '#F7F8FF' },
-            3: { value: '#EFF1FF' },
-            4: { value: '#E4E7FF' },
-            5: { value: '#D7DBFF' },
-            6: { value: '#C8CCFF' },
-            7: { value: '#B4B8FF' },
-            8: { value: '#989AFF' },
-            9: { value: '#4615C8' },
-            10: { value: '#3B00B4' },
-            11: { value: '#5A45DF' },
-            12: { value: '#2A226E' }
-          },
-          violetDark: {
-            1: { value: '#0E0E23' },
-            2: { value: '#141331' },
-            3: { value: '#216' },
-            4: { value: '#2F0093' },
-            5: { value: '#3800A8' },
-            6: { value: '#4016B8' },
-            7: { value: '#4C24D1' },
-            8: { value: '#5B2AF9' },
-            9: { value: '#4615C8' },
-            10: { value: '#3901AA' },
-            11: { value: '#A7AAFF' },
-            12: { value: '#DBDEFF' }
-          }
-        }
-      },
-      breakpoints: {
-        sm: '600px',
-        md: '900px',
-        lg: '1200px',
-        xl: '1400px',
-        bp300: '300px',
-        bp400: '400px',
-        bp500: '500px',
-        bp600: '600px',
-        bp700: '700px',
-        bp800: '800px',
-        bp900: '900px',
-        bp1000: '1000px',
-        bp1100: '1100px',
-        bp1200: '1200px',
-        bp1300: '1300px',
-        bp1400: '1400px',
-        bp1500: '1500px'
-      },
-      semanticTokens: {
-        colors: {
-          prose: {
-            body: {
-              value: '{colors.slate.12}'
-            }
-          }
-        }
-      }
-    },
-    keyframes: {
-      pulse: {
-        '50%': {
-          opacity: '0.5'
-        }
-      },
-      'pulse-shadow': {
-        '0%': { boxShadow: '0 0 0 0px {colors.primary4}' },
-        '100%': { boxShadow: '0 0 0 6px {colors.primary4}' }
-      },
-      spin: {
-        '100%': {
-          transform: 'rotate(360deg)'
-        }
-      },
-      collapsibleSlideDown: {
-        from: { height: 0 },
-        to: { height: 'var(--radix-collapsible-content-height)' }
-      },
-      collapsibleSlideUp: {
-        from: { height: 'var(--radix-collapsible-content-height)' },
-        to: { height: 0 }
-      }
-    }
-  },
-  layers: {
-    base: 'panda_base',
-    recipes: 'panda_recipes',
-    reset: 'panda_reset',
-    tokens: 'panda_tokens',
-    utilities: 'panda_utilities'
-  },
-
-  // The output directory for your css system
-  outdir: '../design-system',
-  importMap: {
-    css: '@relayprotocol/relay-design-system/css',
-    recipes: '@relayprotocol/relay-design-system/recipes',
-    patterns: '@relayprotocol/relay-design-system/patterns',
-    jsx: '@relayprotocol/relay-design-system/jsx'
-  }
-})
diff --git a/packages/ui/postcss.config.mjs b/packages/ui/postcss.config.mjs
new file mode 100644
index 000000000..2b75bd8a7
--- /dev/null
+++ b/packages/ui/postcss.config.mjs
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+}
diff --git a/packages/ui/scripts/scope-css.mjs b/packages/ui/scripts/scope-css.mjs
new file mode 100644
index 000000000..bf921919f
--- /dev/null
+++ b/packages/ui/scripts/scope-css.mjs
@@ -0,0 +1,50 @@
+/**
+ * Post-processes dist/styles.css to scope Tailwind's global
+ * `*, ::before, ::after` and `::backdrop` CSS variable initialization
+ * blocks to `.relay-kit-reset`. This prevents the component library
+ * from polluting the consuming app's global CSS namespace.
+ */
+import { readFileSync, writeFileSync } from 'fs'
+import { resolve, dirname } from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const cssPath = resolve(__dirname, '../dist/styles.css')
+
+let css = readFileSync(cssPath, 'utf-8')
+
+// Pattern: `*, :after, :before { --tw-*: ...; --tw-*: ...; }`
+// This block only contains --tw-* CSS custom property declarations.
+// Scope it to .relay-kit-reset so it doesn't apply globally.
+css = css.replace(
+  /(\*\s*,\s*(?::after|::after)\s*,\s*(?::before|::before))\s*\{([^}]*)\}/g,
+  (match, selector, body) => {
+    // Only scope if the block contains exclusively --tw-* declarations
+    const declarations = body.split(';').map((d) => d.trim()).filter(Boolean)
+    const allTwVars = declarations.every((d) => d.startsWith('--tw-'))
+    if (allTwVars) {
+      const scoped = selector
+        .split(',')
+        .map((s) => `.relay-kit-reset ${s.trim()}`)
+        .join(',')
+      return `${scoped}{${body}}`
+    }
+    return match
+  }
+)
+
+// Pattern: `::backdrop { --tw-*: ...; }`
+css = css.replace(
+  /(?<!\S)(::backdrop)\s*\{([^}]*)\}/g,
+  (match, selector, body) => {
+    const declarations = body.split(';').map((d) => d.trim()).filter(Boolean)
+    const allTwVars = declarations.every((d) => d.startsWith('--tw-'))
+    if (allTwVars) {
+      return `.relay-kit-reset ${selector}{${body}}`
+    }
+    return match
+  }
+)
+
+writeFileSync(cssPath, css)
+console.log('Scoped Tailwind base variables to .relay-kit-reset')
diff --git a/packages/ui/src/components/common/AmountInput.tsx b/packages/ui/src/components/common/AmountInput.tsx
index 3413a0472..3be055c98 100644
--- a/packages/ui/src/components/common/AmountInput.tsx
+++ b/packages/ui/src/components/common/AmountInput.tsx
@@ -1,5 +1,6 @@
 import type { ComponentPropsWithoutRef, FC } from 'react'
 import { Input } from '../primitives/index.js'
+import { cn } from '../../utils/cn.js'
 
 type Props = {
   value: string
@@ -23,24 +24,14 @@ const AmountInput: FC<Props> = ({
       pattern="^[0-9]+(\.[0-9]*)?$"
       ellipsify
       size="large"
-      className="ph-no-capture"
-      css={{
-        width: '100%',
-        background: 'none',
-        backgroundColor: 'transparent',
-        fontWeight: '600',
-        fontSize: 32,
-        px: '0 !important',
-        py: '1',
-        _focus: {
-          boxShadow: 'none',
-          outline: 'none'
-        },
-        _placeholder: {
-          color: 'gray12'
-        },
-        ...inputProps.css
-      }}
+      className={cn(
+        'ph-no-capture',
+        'relay-w-full relay-bg-none relay-bg-transparent relay-font-semibold relay-text-[32px]',
+        '!relay-px-0 relay-py-1',
+        'focus:relay-shadow-none focus:relay-outline-none',
+        'placeholder:relay-text-[color:var(--relay-colors-gray12)]',
+        inputProps.className
+      )}
       placeholder={inputProps.placeholder ?? '0'}
       value={prefixSymbol ? `${prefixSymbol}${value}` : value}
       onChange={
diff --git a/packages/ui/src/components/common/BalanceDisplay.tsx b/packages/ui/src/components/common/BalanceDisplay.tsx
index 61ce2d2dc..e723abf70 100644
--- a/packages/ui/src/components/common/BalanceDisplay.tsx
+++ b/packages/ui/src/components/common/BalanceDisplay.tsx
@@ -35,7 +35,7 @@ export const BalanceDisplay: FC<BalanceDisplayProps> = ({
 
   if (pending) {
     return (
-      <Flex align="center" css={{ height: 18 }}>
+      <Flex align="center" className="relay-h-[18px]">
         <Text style={textStyle} color={'red'}>
           {hideBalanceLabel ? 'pending' : 'Balance: pending'}
         </Text>
@@ -44,7 +44,7 @@ export const BalanceDisplay: FC<BalanceDisplayProps> = ({
   }
 
   return (
-    <Flex align="center" css={{ height: 18 }}>
+    <Flex align="center" className="relay-h-[18px]">
       {isConnected ? (
         <>
           {isLoading ? (
diff --git a/packages/ui/src/components/common/CopyToClipBoard.tsx b/packages/ui/src/components/common/CopyToClipBoard.tsx
index 64010f432..5ecfd6ae2 100644
--- a/packages/ui/src/components/common/CopyToClipBoard.tsx
+++ b/packages/ui/src/components/common/CopyToClipBoard.tsx
@@ -2,7 +2,6 @@ import { type FC, useState } from 'react'
 import { Button, Text } from '../primitives/index.js'
 import Tooltip from '../primitives/Tooltip.js'
 import { useCopyToClipboard } from 'usehooks-ts'
-import { AnimatePresence, motion } from 'framer-motion'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faCheck, faCopy } from '@fortawesome/free-solid-svg-icons'
 
@@ -42,27 +41,15 @@ export const CopyToClipBoard: FC<CopyToClipBoardProps> = ({ text }) => {
           setOpen(true)
           setTimeout(() => setOpen(false), 1000)
         }}
-        css={{ color: 'gray9', _hover: { color: 'gray11' } }}
+        className="relay-text-[color:var(--relay-colors-gray9)] hover:relay-text-[color:var(--relay-colors-gray11)]"
       >
-        <AnimatePresence initial={false} mode="wait">
-          <motion.span
-            transition={{
-              type: 'spring',
-              duration: 0.15,
-              bounce: 0
-            }}
-            initial={{ opacity: 0, scale: 0 }}
-            animate={{ opacity: 1, scale: 1 }}
-            exit={{ opacity: 0, scale: 0 }}
-            key={isCopied ? 'Copied' : 'Copy'}
-          >
-            {isCopied ? (
-              <FontAwesomeIcon icon={faCheck} width={16} height={16} />
-            ) : (
-              <FontAwesomeIcon icon={faCopy} width={16} height={16} />
-            )}
-          </motion.span>
-        </AnimatePresence>
+        <span className="relay-inline-flex relay-transition-transform relay-duration-150">
+          {isCopied ? (
+            <FontAwesomeIcon icon={faCheck} width={16} height={16} />
+          ) : (
+            <FontAwesomeIcon icon={faCopy} width={16} height={16} />
+          )}
+        </span>
       </Button>
     </Tooltip>
   )
diff --git a/packages/ui/src/components/common/CustomAddressModal.tsx b/packages/ui/src/components/common/CustomAddressModal.tsx
index a8d586ca8..83d92d6fd 100644
--- a/packages/ui/src/components/common/CustomAddressModal.tsx
+++ b/packages/ui/src/components/common/CustomAddressModal.tsx
@@ -172,39 +172,23 @@ export const CustomAddressModal: FC<Props> = ({
       trigger={null}
       open={open}
       onOpenChange={onOpenChange}
-      css={{
-        overflow: 'hidden'
-      }}
+      className="relay-overflow-hidden"
     >
       <Flex
         direction="column"
-        css={{
-          width: '100%',
-          height: '100%',
-          gap: '4',
-          sm: {
-            width: 386
-          }
-        }}
+        className="relay-w-full relay-h-full relay-gap-4 sm:relay-w-[386px]"
       >
         <Text style="h6">To Address</Text>
-        <Flex direction="column" css={{ gap: '2', position: 'relative' }}>
+        <Flex direction="column" className="relay-gap-2 relay-relative">
           <Flex
-            css={{
-              position: 'relative',
-              display: 'inline-block'
-            }}
+            className="relay-relative relay-inline-block"
           >
             <Input
               type="text"
               inputMode="text"
               autoComplete="off"
               autoCorrect="off"
-              className="ph-no-capture"
-              css={{
-                width: '100%',
-                height: 48
-              }}
+              className="ph-no-capture relay-w-full relay-h-12"
               inputStyle={{
                 paddingRight: input.length > 0 ? '42px' : '16px'
               }}
@@ -226,23 +210,7 @@ export const CustomAddressModal: FC<Props> = ({
               <Button
                 color="ghost"
                 size="none"
-                css={{
-                  position: 'absolute',
-                  right: '8px',
-                  top: '50%',
-                  transform: 'translateY(-50%)',
-                  width: '24px',
-                  height: '24px',
-                  minWidth: '24px',
-                  minHeight: '24px',
-                  padding: '0',
-                  borderRadius: '4px',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  backgroundColor: 'gray3',
-                  color: 'gray8'
-                }}
+                className="relay-absolute relay-right-2 relay-top-1/2 -relay-translate-y-1/2 relay-w-6 relay-h-6 relay-min-w-[24px] relay-min-h-[24px] relay-p-0 relay-rounded relay-flex relay-items-center relay-justify-center relay-bg-[var(--relay-colors-gray3)] relay-text-[color:var(--relay-colors-gray8)]"
                 onMouseDown={(e) => {
                   e.preventDefault() // Prevent input from losing focus
                 }}
@@ -254,13 +222,9 @@ export const CustomAddressModal: FC<Props> = ({
               </Button>
             )}
             {isLoading && (
-              <LoadingSpinner
-                css={{
-                  right: 2,
-                  top: 3,
-                  position: 'absolute'
-                }}
-              />
+              <div className="relay-absolute relay-right-2 relay-top-[12px]">
+                <LoadingSpinner />
+              </div>
             )}
           </Flex>
           {isLighterError ? (
@@ -282,7 +246,7 @@ export const CustomAddressModal: FC<Props> = ({
 
           {didResolveLighterFromEvm && resolvedLighterIndex ? (
             <Flex
-              css={{ bg: 'green2', p: '2', borderRadius: 8, gap: '2' }}
+              className="relay-bg-[var(--relay-colors-green2)] relay-p-2 relay-rounded-lg relay-gap-2"
               align="center"
             >
               <FontAwesomeIcon
@@ -299,7 +263,7 @@ export const CustomAddressModal: FC<Props> = ({
 
           {!connectedAddressSet && address && isConnected ? (
             <Flex
-              css={{ bg: 'amber2', p: '2', borderRadius: 8, gap: '2' }}
+              className="relay-bg-[var(--relay-colors-amber2)] relay-p-2 relay-rounded-lg relay-gap-2"
               align="center"
             >
               <FontAwesomeIcon
@@ -307,7 +271,7 @@ export const CustomAddressModal: FC<Props> = ({
                 color="#FFA01C"
                 width={16}
                 height={16}
-                style={{ flexShrink: 0 }}
+                className="relay-shrink-0"
               />
               <Text style="subtitle3" color="warning">
                 This isn't the connected wallet address. Please ensure that the
@@ -319,7 +283,7 @@ export const CustomAddressModal: FC<Props> = ({
           {!multiWalletSupportEnabled && isConnected ? (
             connectedAddressSet ? (
               <Flex
-                css={{ bg: 'green2', p: '2', borderRadius: 8, gap: '2' }}
+                className="relay-bg-[var(--relay-colors-green2)] relay-p-2 relay-rounded-lg relay-gap-2"
                 align="center"
               >
                 <FontAwesomeIcon
@@ -345,20 +309,14 @@ export const CustomAddressModal: FC<Props> = ({
           {filteredRecentCustomAddresses.length > 0 ? (
             <>
               <Text style="subtitle2">Recent addresses</Text>
-              <Flex css={{ gap: '2', flexWrap: 'wrap' }} align="center">
+              <Flex className="relay-gap-2 relay-flex-wrap" align="center">
                 {filteredRecentCustomAddresses.map((address) => (
                   <Pill
                     key={address}
                     color="transparent"
                     bordered
                     radius="squared"
-                    css={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      gap: '6px',
-                      cursor: 'pointer',
-                      px: '8px'
-                    }}
+                    className="relay-flex relay-items-center relay-gap-[6px] relay-cursor-pointer relay-px-2"
                     onClick={() => {
                       onConfirmed(address)
                       onOpenChange(false)
@@ -386,7 +344,7 @@ export const CustomAddressModal: FC<Props> = ({
           disabled={
             isLoading || !isValidAddress(toChain?.vmType, address, toChain?.id)
           }
-          css={{ justifyContent: 'center' }}
+          className="relay-justify-center"
           onClick={() => {
             if (isValidAddress(toChain?.vmType, address, toChain?.id)) {
               // Save the address to custom addresses if it's not a connected wallet address
diff --git a/packages/ui/src/components/common/ErrorWell.tsx b/packages/ui/src/components/common/ErrorWell.tsx
index 2f19aab05..62337670d 100644
--- a/packages/ui/src/components/common/ErrorWell.tsx
+++ b/packages/ui/src/components/common/ErrorWell.tsx
@@ -2,6 +2,7 @@ import * as React from 'react'
 import { Text } from '../primitives/index.js'
 import type { AxiosError } from 'axios'
 import type { RelayChain } from '@relayprotocol/relay-sdk'
+import { cn } from '../../utils/cn.js'
 
 interface Props {
   error?: Error | null | AxiosError
@@ -45,39 +46,21 @@ const ErrorWell: React.FC<Props> = ({ error, hasTxHashes, fromChain }) => {
     typeof renderedErrorMessage === 'string' &&
     renderedErrorMessage.length > 280
 
-  // subtle scroll style
-  const scrollStyles = shouldScrollErrorMessage
-    ? {
-        maxHeight: 'min(36vh, 220px)',
-        overflowY: 'auto',
-        px: '1',
-        scrollbarWidth: 'thin' as const,
-        scrollbarColor: 'var(--relay-colors-gray5) transparent',
-        '&::-webkit-scrollbar': {
-          width: '6px',
-          background: 'transparent'
-        },
-        '&::-webkit-scrollbar-track': {
-          background: 'transparent'
-        },
-        '&::-webkit-scrollbar-thumb': {
-          backgroundColor: 'var(--relay-colors-gray5)',
-          borderRadius: '999px'
-        }
-      }
-    : {}
-
   return (
     <Text
       style="subtitle1"
-      css={{
-        my: '4',
-        textAlign: 'center',
-        width: '100%',
-        wordBreak: 'break-word',
-        overflowWrap: 'anywhere',
-        ...scrollStyles
-      }}
+      className={cn(
+        'relay-my-4 relay-text-center relay-w-full relay-break-words',
+        '[overflow-wrap:anywhere]',
+        shouldScrollErrorMessage && [
+          'relay-max-h-[min(36vh,220px)] relay-overflow-y-auto relay-px-1',
+          '[scrollbar-width:thin]',
+          '[scrollbar-color:var(--relay-colors-gray5)_transparent]',
+          '[&::-webkit-scrollbar]:relay-w-[6px] [&::-webkit-scrollbar]:relay-bg-transparent',
+          '[&::-webkit-scrollbar-track]:relay-bg-transparent',
+          '[&::-webkit-scrollbar-thumb]:relay-bg-[var(--relay-colors-gray5)] [&::-webkit-scrollbar-thumb]:relay-rounded-full'
+        ]
+      )}
     >
       {renderedErrorMessage}
     </Text>
diff --git a/packages/ui/src/components/common/LoadingSpinner.tsx b/packages/ui/src/components/common/LoadingSpinner.tsx
index 77af3f4a8..2839e1168 100644
--- a/packages/ui/src/components/common/LoadingSpinner.tsx
+++ b/packages/ui/src/components/common/LoadingSpinner.tsx
@@ -1,9 +1,5 @@
 import { useContext, type FC, type SVGProps } from 'react'
-import {
-  cva,
-  css as designCss,
-  type Styles
-} from '@relayprotocol/relay-design-system/css'
+import { cn } from '../../utils/cn.js'
 import { ProviderOptionsContext } from '../../providers/RelayKitProvider.js'
 
 const SpinnerSVG: FC<SVGProps<SVGSVGElement>> = (props) => {
@@ -21,22 +17,15 @@ const SpinnerSVG: FC<SVGProps<SVGSVGElement>> = (props) => {
   )
 }
 
-const LoadingSpinnerCss = cva({
-  base: {
-    animation: 'spin 1s linear infinite',
-    fill: 'primary-color'
-  }
-})
-
-export const LoadingSpinner: FC<{ css?: Styles }> = ({ css }) => {
+export const LoadingSpinner: FC<{ className?: string }> = ({ className }) => {
   const providerOptionsContext = useContext(ProviderOptionsContext)
   if (providerOptionsContext.loader) {
     return (
-      <div className={designCss(css)}>
+      <div className={cn(className)}>
         {providerOptionsContext.loader({
-          width: (css as any)?.width ?? 20,
-          height: (css as any)?.height ?? 20,
-          fill: (css as any)?.fill
+          width: 20,
+          height: 20,
+          fill: undefined
         })}
       </div>
     )
@@ -44,7 +33,10 @@ export const LoadingSpinner: FC<{ css?: Styles }> = ({ css }) => {
 
   return (
     <SpinnerSVG
-      className={designCss(LoadingSpinnerCss.raw(), designCss.raw(css))}
+      className={cn(
+        'relay-animate-spin relay-fill-[var(--relay-colors-primary-color)]',
+        className
+      )}
     />
   )
 }
diff --git a/packages/ui/src/components/common/Modal.tsx b/packages/ui/src/components/common/Modal.tsx
index 0421c0839..a95f5d978 100644
--- a/packages/ui/src/components/common/Modal.tsx
+++ b/packages/ui/src/components/common/Modal.tsx
@@ -1,4 +1,4 @@
-import type { ComponentPropsWithoutRef, FC, ReactNode } from 'react'
+import type { ComponentPropsWithoutRef, CSSProperties, FC, ReactNode } from 'react'
 import { AnimatedContent, Overlay } from '../primitives/Dialog.js'
 import {
   Root as DialogRoot,
@@ -9,12 +9,11 @@ import {
 import { Button } from '../primitives/index.js'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark'
-import type { SystemStyleObject } from '@relayprotocol/relay-design-system/types'
-import { AnimatePresence } from 'framer-motion'
 
 type ModalProps = {
   trigger?: ReactNode
-  css?: SystemStyleObject
+  className?: string
+  contentStyle?: CSSProperties
   overlayZIndex?: number
   showCloseButton?: boolean
   disableAnimation?: boolean
@@ -33,7 +32,8 @@ export const Modal: FC<
     >
 > = ({
   trigger,
-  css,
+  className,
+  contentStyle,
   overlayZIndex = 10000000,
   showCloseButton = true,
   disableAnimation = false,
@@ -43,61 +43,43 @@ export const Modal: FC<
   return (
     <DialogRoot modal={true} {...props}>
       <DialogTrigger asChild>{trigger}</DialogTrigger>
-      <AnimatePresence>
-        {props.open ? (
-          <DialogPortal forceMount>
-            <Overlay
+      {props.open ? (
+        <DialogPortal forceMount>
+          <Overlay
+            forceMount
+            className="relay-fixed relay-inset-0 relay-bg-[var(--relay-colors-blackA10)]"
+            style={{ zIndex: overlayZIndex }}
+          >
+            <AnimatedContent
               forceMount
-              css={{
-                position: 'fixed',
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                backgroundColor: 'blackA10'
-              }}
-              style={{ zIndex: overlayZIndex }}
+              className={`relay-border relay-border-solid relay-border-[var(--relay-colors-subtle-border-color)] relay-p-4 ${className ?? ''}`}
+              style={contentStyle}
+              disableAnimation={disableAnimation}
+              onPointerDownOutside={props.onPointerDownOutside}
+              onOpenAutoFocus={props.onOpenAutoFocus}
             >
-              <AnimatedContent
-                forceMount
-                css={{
-                  '--borderColor': 'colors.subtle-border-color',
-                  border: '1px solid var(--borderColor)',
-                  padding: '4',
-                  ...css
-                }}
-                disableAnimation={disableAnimation}
-                onPointerDownOutside={props.onPointerDownOutside}
-                onOpenAutoFocus={props.onOpenAutoFocus}
-              >
-                {showCloseButton ? (
-                  <DialogClose
-                    asChild
-                    style={{
-                      position: 'absolute',
-                      right: 10,
-                      top: 12,
-                      zIndex: 10
+              {showCloseButton ? (
+                <DialogClose
+                  asChild
+                  className="relay-absolute relay-right-[10px] relay-top-[12px] relay-z-10"
+                >
+                  <Button
+                    color="ghost"
+                    size="none"
+                    className="relay-text-[color:var(--relay-colors-gray9)] relay-p-2"
+                    onClick={(e) => {
+                      props.onCloseButtonClicked?.(e)
                     }}
                   >
-                    <Button
-                      color="ghost"
-                      size="none"
-                      css={{ color: 'gray9', p: '2' }}
-                      onClick={(e) => {
-                        props.onCloseButtonClicked?.(e)
-                      }}
-                    >
-                      <FontAwesomeIcon icon={faXmark} width={16} height={16} />
-                    </Button>
-                  </DialogClose>
-                ) : null}
-                {children}
-              </AnimatedContent>
-            </Overlay>
-          </DialogPortal>
-        ) : null}
-      </AnimatePresence>
+                    <FontAwesomeIcon icon={faXmark} width={16} height={16} />
+                  </Button>
+                </DialogClose>
+              ) : null}
+              {children}
+            </AnimatedContent>
+          </Overlay>
+        </DialogPortal>
+      ) : null}
     </DialogRoot>
   )
 }
diff --git a/packages/ui/src/components/common/MultiWalletDropdown.tsx b/packages/ui/src/components/common/MultiWalletDropdown.tsx
index 26b8cd987..57c5e03b0 100644
--- a/packages/ui/src/components/common/MultiWalletDropdown.tsx
+++ b/packages/ui/src/components/common/MultiWalletDropdown.tsx
@@ -15,6 +15,7 @@ import {
   isWalletVmTypeCompatible
 } from '../../utils/address.js'
 import { ProviderOptionsContext } from '../../providers/RelayKitProvider.js'
+import { cn } from '../../utils/cn.js'
 
 type MultiWalletDropdownProps = {
   context: 'origin' | 'destination'
@@ -119,6 +120,9 @@ export const MultiWalletDropdown: FC<MultiWalletDropdownProps> = ({
 
   const shouldShowEns = isEnsCapableVmType && Boolean(displayName)
 
+  const dropdownItemClassName =
+    'relay-rounded-lg relay-gap-2 relay-cursor-pointer relay-p-2 relay-transition-[backdrop-filter] relay-duration-[250ms] relay-ease-linear hover:relay-brightness-[0.98] relay-shrink-0 relay-content-center relay-w-full'
+
   return (
     <Dropdown
       open={showDropdown ? open : false}
@@ -149,43 +153,28 @@ export const MultiWalletDropdown: FC<MultiWalletDropdownProps> = ({
           }}
           size="none"
           corners="pill"
-          css={{
-            gap: '2',
-            px: '2 !important',
-            py: '1',
-            cursor: 'pointer',
-            display: 'flex',
-            alignContent: 'center'
-          }}
+          className="relay-gap-2 !relay-px-2 relay-py-1 relay-cursor-pointer relay-flex relay-content-center"
           data-testid={testId}
         >
-          <Flex align="center" css={{ gap: '1', flexShrink: 1, minWidth: 0 }}>
+          <Flex align="center" className="relay-gap-1 relay-shrink relay-min-w-0">
             {isSupportedSelectedWallet && selectedWallet?.walletLogoUrl ? (
               <img
                 src={selectedWallet.walletLogoUrl}
-                style={{
-                  width: 16,
-                  height: 16,
-                  borderRadius: 4,
-                  flexShrink: 0
-                }}
+                className="relay-w-[16px] relay-h-[16px] relay-rounded-[4px] relay-shrink-0"
               />
             ) : selectedWalletAddress && !selectedWallet ? (
-              <Box css={{ color: 'amber11', flexShrink: 0 }}>
+              <Box className="relay-text-[color:var(--relay-colors-amber11)] relay-shrink-0">
                 <FontAwesomeIcon icon={faClipboard} width={16} height={16} />
               </Box>
             ) : null}
             <Text
               style="subtitle2"
-              css={{
-                color:
-                  !selectedWallet && selectedWalletAddress
-                    ? 'amber11'
-                    : 'anchor-color',
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis'
-              }}
+              className={cn(
+                !selectedWallet && selectedWalletAddress
+                  ? 'relay-text-[color:var(--relay-colors-amber11)]'
+                  : 'relay-text-[color:var(--relay-colors-anchor-color)]',
+                'relay-whitespace-nowrap relay-overflow-hidden relay-text-ellipsis'
+              )}
             >
               {isSupportedSelectedWallet &&
               selectedWalletAddress &&
@@ -198,13 +187,12 @@ export const MultiWalletDropdown: FC<MultiWalletDropdownProps> = ({
           </Flex>
           {showDropdown && (
             <Box
-              css={{
-                color:
-                  !selectedWallet && selectedWalletAddress
-                    ? 'amber11'
-                    : 'anchor-color',
-                flexShrink: 0
-              }}
+              className={cn(
+                !selectedWallet && selectedWalletAddress
+                  ? 'relay-text-[color:var(--relay-colors-amber11)]'
+                  : 'relay-text-[color:var(--relay-colors-anchor-color)]',
+                'relay-shrink-0'
+              )}
             >
               <FontAwesomeIcon icon={faChevronDown} width={14} height={14} />
             </Box>
@@ -215,10 +203,10 @@ export const MultiWalletDropdown: FC<MultiWalletDropdownProps> = ({
         sideOffset: 12,
         alignOffset: -12,
         align: 'end',
-        css: { maxWidth: 248, p: 0 }
+        className: 'relay-max-w-[248px] relay-p-0'
       }}
     >
-      <Flex direction="column" css={{ borderRadius: 12, p: '1', gap: '1' }}>
+      <Flex direction="column" className="relay-rounded-[12px] relay-p-1 relay-gap-1">
         {filteredWallets.map((wallet, idx) => {
           return (
             <DropdownMenuItem
@@ -234,16 +222,15 @@ export const MultiWalletDropdown: FC<MultiWalletDropdownProps> = ({
                 setOpen(false)
                 onSelect(wallet)
               }}
-              css={{
-                ...DropdownItemBaseStyle,
-                '--borderColor': 'colors.gray.6',
-                border: '1px solid var(--borderColor)'
-              }}
+              className={cn(
+                dropdownItemClassName,
+                'relay-border relay-border-solid relay-border-[var(--relay-colors-gray-6)]'
+              )}
             >
               {wallet.walletLogoUrl ? (
                 <img
                   src={wallet.walletLogoUrl}
-                  style={{ width: 16, height: 16, borderRadius: 4 }}
+                  className="relay-w-[16px] relay-h-[16px] relay-rounded-[4px]"
                 />
               ) : null}
 
@@ -254,9 +241,7 @@ export const MultiWalletDropdown: FC<MultiWalletDropdownProps> = ({
 
         <DropdownMenuItem
           aria-label="Connect a new wallet"
-          css={{
-            ...DropdownItemBaseStyle
-          }}
+          className={dropdownItemClassName}
           onClick={() => {
             onAnalyticEvent?.(EventNames.WALLET_SELECTOR_SELECT, {
               context: 'link_option'
@@ -270,9 +255,7 @@ export const MultiWalletDropdown: FC<MultiWalletDropdownProps> = ({
         {context === 'destination' && !disablePasteWalletAddressOption ? (
           <DropdownMenuItem
             aria-label="Paste wallet address"
-            css={{
-              ...DropdownItemBaseStyle
-            }}
+            className={dropdownItemClassName}
             onClick={() => {
               onAnalyticEvent?.(EventNames.WALLET_SELECTOR_SELECT, {
                 context: 'custom_option'
@@ -288,18 +271,4 @@ export const MultiWalletDropdown: FC<MultiWalletDropdownProps> = ({
   )
 }
 
-const DropdownItemBaseStyle = {
-  borderRadius: 8,
-  gap: '2',
-  cursor: 'pointer',
-  p: '2',
-  transition: 'backdrop-filter 250ms linear',
-  _hover: {
-    backdropFilter: 'brightness(98%)'
-  },
-  flexShrink: 0,
-  alignContent: 'center',
-  width: '100%'
-}
-
 export type { MultiWalletDropdownProps }
diff --git a/packages/ui/src/components/common/PercentageButtons.tsx b/packages/ui/src/components/common/PercentageButtons.tsx
index 6fd50b895..ea8761561 100644
--- a/packages/ui/src/components/common/PercentageButtons.tsx
+++ b/packages/ui/src/components/common/PercentageButtons.tsx
@@ -6,6 +6,7 @@ import {
   MAX_INPUT_BUFFER_BPS,
   MIN_INPUT_BUFFER_UNITS
 } from '../../constants/maxAmountBuffer.js'
+import { cn } from '../../utils/cn.js'
 
 type PercentageButtonsProps = {
   balance: bigint
@@ -21,7 +22,7 @@ type PercentageButtonsProps = {
   isFromNative?: boolean
   variant?: 'desktop' | 'mobile'
   percentages?: number[]
-  buttonStyles?: Record<string, any>
+  buttonClassName?: string
 }
 
 export const PercentageButtons: FC<PercentageButtonsProps> = ({
@@ -33,7 +34,7 @@ export const PercentageButtons: FC<PercentageButtonsProps> = ({
   isFromNative,
   variant = 'desktop',
   percentages = [20, 50],
-  buttonStyles: customButtonStyles
+  buttonClassName: customButtonClassName
 }) => {
   const getExecutionBuffer = (amount: bigint) => {
     if (amount <= 0n) return 0n
@@ -47,24 +48,21 @@ export const PercentageButtons: FC<PercentageButtonsProps> = ({
 
   const isMobile = variant === 'mobile'
 
-  const defaultButtonStyles = {
-    fontSize: isMobile ? 14 : 12,
-    fontWeight: '500',
-    px: '1',
-    py: isMobile ? '6px' : '1',
-    minHeight: isMobile ? 'auto' : '23px',
-    lineHeight: '100%',
-    backgroundColor: 'widget-selector-background',
-    border: 'none',
-    borderRadius: isMobile ? '6px' : '12px',
-    flex: isMobile ? '1' : 'none',
-    justifyContent: 'center',
-    _hover: {
-      backgroundColor: 'widget-selector-hover-background'
-    }
-  }
+  const defaultButtonClassName = cn(
+    isMobile ? 'relay-text-[14px]' : 'relay-text-[12px]',
+    'relay-font-medium relay-px-1',
+    isMobile ? 'relay-py-[6px]' : 'relay-py-1',
+    isMobile ? '' : 'relay-min-h-[23px]',
+    'relay-leading-none',
+    'relay-bg-[var(--relay-colors-widget-selector-background)]',
+    'relay-border-none',
+    isMobile ? 'relay-rounded-[6px]' : 'relay-rounded-[12px]',
+    isMobile ? 'relay-flex-1' : '',
+    'relay-justify-center',
+    'hover:relay-bg-[var(--relay-colors-widget-selector-hover-background)]'
+  )
 
-  const buttonStyles = customButtonStyles || defaultButtonStyles
+  const buttonClassName = customButtonClassName || defaultButtonClassName
 
   const handleMaxClick = async () => {
     if (!balance || !fromChain) return
@@ -113,17 +111,17 @@ export const PercentageButtons: FC<PercentageButtonsProps> = ({
 
   return (
     <Flex
-      css={{
-        gap: '1',
-        width: isMobile ? '100%' : 'auto',
-        mb: isMobile ? '1' : '0'
-      }}
+      className={cn(
+        'relay-gap-1',
+        isMobile ? 'relay-w-full' : 'relay-w-auto',
+        isMobile ? 'relay-mb-1' : 'relay-mb-0'
+      )}
     >
       {percentages.map((percent) => (
         <Button
           key={percent}
           aria-label={`${percent}%`}
-          css={buttonStyles}
+          className={buttonClassName}
           color="white"
           disabled={!balance || balance === 0n}
           onClick={() => {
@@ -139,7 +137,7 @@ export const PercentageButtons: FC<PercentageButtonsProps> = ({
 
       <Button
         aria-label="MAX"
-        css={buttonStyles}
+        className={buttonClassName}
         color="white"
         disabled={!balance || balance === 0n}
         onMouseEnter={handleMaxMouseEnter}
diff --git a/packages/ui/src/components/common/SlippageToleranceConfig.tsx b/packages/ui/src/components/common/SlippageToleranceConfig.tsx
index ac7dfbb20..71c199c40 100644
--- a/packages/ui/src/components/common/SlippageToleranceConfig.tsx
+++ b/packages/ui/src/components/common/SlippageToleranceConfig.tsx
@@ -22,11 +22,17 @@ import {
   ratingToColor,
   type SlippageToleranceMode
 } from '../../utils/slippage.js'
+
+const tokenToColor = (token: string | undefined): string | undefined => {
+  if (!token) return undefined
+  return `var(--relay-colors-${token})`
+}
 import { EventNames } from '../../constants/events.js'
 import { useDebounceValue, useMediaQuery } from 'usehooks-ts'
 import useFallbackState from '../../hooks/useFallbackState.js'
 import { Modal } from './Modal.js'
 import { convertBpsToPercent } from '../../utils/numbers.js'
+import { cn } from '../../utils/cn.js'
 
 type SlippageToleranceConfigProps = {
   open?: boolean
@@ -80,34 +86,29 @@ const SlippageTabs: FC<SlippageTabsProps> = ({
           setDisplayValue(undefined)
         }
       }}
-      css={{
-        display: 'flex',
-        flexDirection: 'column',
-        width: '100%',
-        gap: isTokenWidget ? '4px' : '3',
-        sm: {
-          gap: isTokenWidget ? '4px' : '2'
-        }
-      }}
+      className={cn(
+        'relay-flex relay-flex-col relay-w-full',
+        isTokenWidget ? 'relay-gap-1' : 'relay-gap-3 sm:relay-gap-2'
+      )}
     >
-      <TabsList css={{ width: '100%' }}>
-        <TabsTrigger value="Auto" css={{ width: '50%' }}>
+      <TabsList className="relay-w-full">
+        <TabsTrigger value="Auto" className="relay-w-1/2">
           Auto
         </TabsTrigger>
-        <TabsTrigger value="Custom" css={{ width: '50%' }}>
+        <TabsTrigger value="Custom" className="relay-w-1/2">
           Custom
         </TabsTrigger>
       </TabsList>
 
-      <TabsContent value="Auto" css={{ width: '100%' }}>
+      <TabsContent value="Auto" className="relay-w-full">
         <Text
           style={isTokenWidget ? 'body3' : 'body2'}
           color="subtle"
-          css={
+          className={cn(
             isTokenWidget
-              ? { lineHeight: 'normal', fontSize: '12px' }
-              : { lineHeight: '14px', sm: { fontSize: '12px' } }
-          }
+              ? 'relay-leading-normal relay-text-xs'
+              : 'relay-leading-[14px] sm:relay-text-xs'
+          )}
         >
           We'll set the slippage automatically to minimize the failure rate.
         </Text>
@@ -115,42 +116,16 @@ const SlippageTabs: FC<SlippageTabsProps> = ({
 
       <TabsContent
         value="Custom"
-        css={{
-          display: 'flex',
-          width: '100%',
-          overflow: 'hidden',
-          flexDirection: 'column',
-          gap: '1'
-        }}
+        className="relay-flex relay-w-full relay-overflow-hidden relay-flex-col relay-gap-1"
       >
         {/* Mobile shortcut buttons */}
         <Flex
-          css={{
-            display: 'none',
-            smDown: {
-              display: 'flex',
-              width: '100%',
-              gap: '2',
-              mb: '2'
-            }
-          }}
+          className="relay-hidden max-[520px]:relay-flex max-[520px]:relay-w-full max-[520px]:relay-gap-2 max-[520px]:relay-mb-2"
         >
           <Button
             color="ghost"
             size="small"
-            css={{
-              flex: 1,
-              minHeight: 32,
-              backgroundColor: 'gray3',
-              fontWeight: 500,
-              fontSize: 14,
-              py: 2,
-              borderRadius: '6px',
-              justifyContent: 'center',
-              '&:hover': {
-                backgroundColor: 'gray5'
-              }
-            }}
+            className="relay-flex-1 relay-min-h-8 relay-bg-[var(--relay-colors-gray3)] relay-font-medium relay-text-sm relay-py-[2px] relay-rounded-[6px] relay-justify-center hover:relay-bg-[var(--relay-colors-gray5)]"
             onClick={() => handleInputChange('1')}
           >
             1%
@@ -158,19 +133,7 @@ const SlippageTabs: FC<SlippageTabsProps> = ({
           <Button
             color="ghost"
             size="small"
-            css={{
-              flex: 1,
-              minHeight: 32,
-              backgroundColor: 'gray3',
-              fontWeight: 500,
-              fontSize: 14,
-              py: 2,
-              borderRadius: '6px',
-              justifyContent: 'center',
-              '&:hover': {
-                backgroundColor: 'gray5'
-              }
-            }}
+            className="relay-flex-1 relay-min-h-8 relay-bg-[var(--relay-colors-gray3)] relay-font-medium relay-text-sm relay-py-[2px] relay-rounded-[6px] relay-justify-center hover:relay-bg-[var(--relay-colors-gray5)]"
             onClick={() => handleInputChange('2')}
           >
             2%
@@ -178,26 +141,14 @@ const SlippageTabs: FC<SlippageTabsProps> = ({
           <Button
             color="ghost"
             size="small"
-            css={{
-              flex: 1,
-              minHeight: 32,
-              backgroundColor: 'gray3',
-              fontWeight: 500,
-              fontSize: 14,
-              py: 2,
-              borderRadius: '6px',
-              justifyContent: 'center',
-              '&:hover': {
-                backgroundColor: 'gray5'
-              }
-            }}
+            className="relay-flex-1 relay-min-h-8 relay-bg-[var(--relay-colors-gray3)] relay-font-medium relay-text-sm relay-py-[2px] relay-rounded-[6px] relay-justify-center hover:relay-bg-[var(--relay-colors-gray5)]"
             onClick={() => handleInputChange('5')}
           >
             5%
           </Button>
         </Flex>
 
-        <Flex css={{ display: 'flex', width: '100%', position: 'relative' }}>
+        <Flex className="relay-flex relay-w-full relay-relative">
           <Input
             ref={inputRef}
             value={displayValue || ''}
@@ -219,43 +170,27 @@ const SlippageTabs: FC<SlippageTabsProps> = ({
               }
             }}
             placeholder="2"
-            containerCss={{
-              width: '100%'
-            }}
-            css={{
-              height: '36px',
-              pr: '28px !important',
-              border: 'none',
-              textAlign: 'right',
-              width: '100%',
-              smDown: {
-                backgroundColor: 'transparent',
-                '--borderColor': 'colors.gray.5',
-                border: '1px solid var(--borderColor)'
-              },
-              color: slippageRatingColor
-            }}
+            containerClassName="relay-w-full"
+            className={cn(
+              'relay-h-9 !relay-pr-7 relay-border-none relay-text-right relay-w-full',
+              'max-[520px]:relay-bg-transparent max-[520px]:relay-border max-[520px]:relay-border-solid max-[520px]:relay-border-[var(--relay-colors-gray-5)]'
+            )}
+            style={{ color: tokenToColor(slippageRatingColor) }}
           />
           <Box
-            css={{
-              position: 'absolute',
-              right: 8,
-              top: '50%',
-              transform: 'translateY(-50%)',
-              color: slippageRatingColor
-            }}
+            className="relay-absolute relay-right-2 relay-top-1/2 -relay-translate-y-1/2"
           >
-            %
+            <span style={{ color: tokenToColor(slippageRatingColor) }}>%</span>
           </Box>
         </Flex>
 
         {slippageRating === 'very-high' ? (
-          <Text style="body3" css={{ color: 'red11' }}>
+          <Text style="body3" className="relay-text-[color:var(--relay-colors-red11)]">
             Very high slippage
           </Text>
         ) : null}
         {slippageRating === 'high' ? (
-          <Text style="body3" css={{ color: 'amber11' }}>
+          <Text style="body3" className="relay-text-[color:var(--relay-colors-amber11)]">
             High slippage
           </Text>
         ) : null}
@@ -392,15 +327,7 @@ export const SlippageToleranceConfig: FC<SlippageToleranceConfigProps> = ({
         aria-label="Slippage Tolerance Configuration"
         color="ghost"
         size="none"
-        css={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          gap: '4px',
-          borderRadius: '8px',
-          padding: '4px 6px',
-          backgroundColor: 'gray3'
-        }}
+        className="relay-flex relay-items-center relay-justify-center relay-gap-1 relay-rounded-lg relay-px-[6px] relay-py-1 relay-bg-[var(--relay-colors-gray3)]"
       >
         <Text style="subtitle3" color="subtle">
           Slippage
@@ -414,22 +341,11 @@ export const SlippageToleranceConfig: FC<SlippageToleranceConfigProps> = ({
         aria-label="Slippage Tolerance Configuration"
         color="ghost"
         size="none"
-        css={{
-          alignItems: 'center',
-          justifyContent: 'center',
-          gap: '1',
-          bg: 'subtle-background-color',
-          color: slippageRatingColor ?? 'gray9',
-          p: '2',
-          borderRadius: 12,
-          border: '1px solid',
-          borderColor: 'gray5',
-          height: '36px',
-          px: '10px'
-        }}
+        className="relay-items-center relay-justify-center relay-gap-1 relay-bg-[var(--relay-colors-subtle-background-color)] relay-p-2 relay-rounded-[12px] relay-border relay-border-solid relay-border-[var(--relay-colors-gray5)] relay-h-9 relay-px-[10px]"
+        style={{ color: tokenToColor(slippageRatingColor) ?? 'var(--relay-colors-gray9)' }}
       >
         {open === false && displayValue && (
-          <Text style="subtitle2" css={{ color: slippageRatingColor }}>
+          <Text style="subtitle2" className={slippageRatingColor ? `relay-text-[color:var(--relay-colors-${slippageRatingColor})]` : undefined}>
             {displayValue}%
           </Text>
         )}
@@ -463,13 +379,9 @@ export const SlippageToleranceConfig: FC<SlippageToleranceConfigProps> = ({
             }
           }}
           trigger={triggerButton}
-          css={{
-            width: '100%',
-            minHeight: '262px',
-            maxHeight: '90vh'
-          }}
+          className="relay-w-full relay-min-h-[262px] relay-max-h-[90vh]"
         >
-          <Flex direction="column" css={{ width: '100%', gap: '4' }}>
+          <Flex direction="column" className="relay-w-full relay-gap-4">
             <Text style="h6">Max Slippage</Text>
 
             <Text style="body3" color="subtle">
@@ -493,7 +405,7 @@ export const SlippageToleranceConfig: FC<SlippageToleranceConfigProps> = ({
           contentProps={{
             align: 'end',
             sideOffset: 5,
-            css: { maxWidth: 188, mx: 0 },
+            className: 'relay-max-w-[188px] relay-mx-0',
             avoidCollisions: false,
             onCloseAutoFocus: (e) => {
               e.preventDefault()
@@ -502,22 +414,22 @@ export const SlippageToleranceConfig: FC<SlippageToleranceConfigProps> = ({
         >
           <Flex
             direction="column"
-            css={{ width: '100%', gap: '2', maxWidth: 188 }}
+            className="relay-w-full relay-gap-2 relay-max-w-[188px]"
           >
-            <Flex direction="row" css={{ gap: '1', alignItems: 'center' }}>
+            <Flex direction="row" className="relay-gap-1 relay-items-center">
               <Text style="subtitle3">Max Slippage</Text>
               <Tooltip
                 content={
                   <Text
                     style="tiny"
-                    css={{ display: 'inline-block', maxWidth: 190 }}
+                    className="relay-inline-block relay-max-w-[190px]"
                   >
                     If the price exceeds the maximum slippage percentage, the
                     transaction will revert.
                   </Text>
                 }
               >
-                <Box css={{ color: 'gray8' }}>
+                <Box className="relay-text-[color:var(--relay-colors-gray8)]">
                   <FontAwesomeIcon icon={faInfoCircle} width={14} height={14} />
                 </Box>
               </Tooltip>
diff --git a/packages/ui/src/components/common/StepIcon.tsx b/packages/ui/src/components/common/StepIcon.tsx
index 1fddd3593..01b2ee6f9 100644
--- a/packages/ui/src/components/common/StepIcon.tsx
+++ b/packages/ui/src/components/common/StepIcon.tsx
@@ -39,13 +39,7 @@ export const StepIcon: FC<StepIconProps> = ({ stepId, chainId }) => {
 
   return (
     <Flex
-      css={{
-        borderRadius: '100px',
-        padding: '8px',
-        width: '32px',
-        height: '32px',
-        gap: '2'
-      }}
+      className="relay-rounded-[100px] relay-p-2 relay-w-8 relay-h-8 relay-gap-2"
     >
       {getIconForStep()}
     </Flex>
diff --git a/packages/ui/src/components/common/TokenSelector/ChainFilter.tsx b/packages/ui/src/components/common/TokenSelector/ChainFilter.tsx
index 90d674e80..cb51af085 100644
--- a/packages/ui/src/components/common/TokenSelector/ChainFilter.tsx
+++ b/packages/ui/src/components/common/TokenSelector/ChainFilter.tsx
@@ -27,6 +27,7 @@ import {
 import Tooltip from '../../../components/primitives/Tooltip.js'
 import { EventNames } from '../../../constants/events.js'
 import { ChainSearchInput } from './ChainFilterRow.js'
+import { cn } from '../../../utils/cn.js'
 
 export type ChainFilterValue =
   | RelayChain
@@ -90,26 +91,15 @@ const ChainFilter: FC<Props> = ({
           aria-label={`Chain filter`}
           color="ghost"
           size="none"
-          css={{
-            gap: '2',
-            height: 40,
-            width: '100%',
-            px: '4 !important',
-            cursor: 'pointer',
-            display: 'flex',
-            alignContent: 'center',
-            lineHeight: '20px',
-            backgroundColor: 'dropdown-background',
-            borderRadius: 'dropdown-border-radius'
-          }}
+          className="relay-gap-2 relay-h-[40px] relay-w-full !relay-px-4 relay-cursor-pointer relay-flex relay-content-center relay-leading-[20px] relay-bg-[var(--relay-colors-dropdown-background)] relay-rounded-dropdown"
         >
-          <Flex align="center" css={{ gap: '2' }}>
+          <Flex align="center" className="relay-gap-2">
             {value.id ? (
               <ChainIcon
                 chainId={value.id}
                 width={20}
                 height={20}
-                css={{ borderRadius: 4, overflow: 'hidden' }}
+                className="relay-rounded-[4px] relay-overflow-hidden"
               />
             ) : (
               <AllChainsLogo style={{ width: 20, height: 20 }} />
@@ -120,12 +110,10 @@ const ChainFilter: FC<Props> = ({
           </Flex>
           <Text
             style="body1"
-            css={{
-              color: 'gray9',
-              marginLeft: 'auto',
-              transform: open ? 'rotate(180deg)' : 'rotate(0)',
-              width: 12
-            }}
+            className={cn(
+              'relay-text-[color:var(--relay-colors-gray9)] relay-ml-auto relay-w-[12px]',
+              open ? 'relay-rotate-180' : 'relay-rotate-0'
+            )}
           >
             <FontAwesomeIcon icon={faChevronDown} />
           </Text>
@@ -134,19 +122,14 @@ const ChainFilter: FC<Props> = ({
       contentProps={{
         align: 'start',
         avoidCollisions: false,
-        css: {
-          p: 0,
-          width: 'var(--radix-dropdown-menu-trigger-width)',
-          minWidth: 'var(--radix-dropdown-menu-trigger-width)',
-          mx: '0'
-        },
+        className: 'relay-p-0 relay-mx-0',
         style: {
           width: 'var(--radix-popper-anchor-width)',
           minWidth: 'var(--radix-popper-anchor-width)'
         }
       }}
     >
-      <Flex direction="column" css={{ p: '2' }}>
+      <Flex direction="column" className="relay-p-2">
         <ChainSearchInput
           value={chainSearchInput}
           onChange={setChainSearchInput}
@@ -154,12 +137,8 @@ const ChainFilter: FC<Props> = ({
         />
         <Flex
           direction="column"
-          css={{
-            overflowY: 'auto',
-            borderRadius: 8,
-            maxHeight: 290,
-            scrollbarColor: 'var(--relay-colors-gray5) transparent'
-          }}
+          className="relay-overflow-y-auto relay-rounded-[8px] relay-max-h-[290px]"
+          style={{ scrollbarColor: 'var(--relay-colors-gray5) transparent' }}
         >
           {filteredChains ? (
             filteredChains.length > 0 ? (
@@ -173,15 +152,7 @@ const ChainFilter: FC<Props> = ({
                       onSelect(chain)
                       setChainSearchInput('')
                     }}
-                    css={{
-                      padding: '8px',
-                      borderRadius: 4,
-                      cursor: 'pointer',
-                      backgroundColor: 'modal-background',
-                      _hover: {
-                        backgroundColor: 'gray3'
-                      }
-                    }}
+                    className="relay-p-[8px] relay-rounded-[4px] relay-cursor-pointer relay-bg-[var(--relay-colors-modal-background)] hover:relay-bg-[var(--relay-colors-gray3)]"
                   >
                     <ChainFilterRow
                       chain={chain}
@@ -193,7 +164,7 @@ const ChainFilter: FC<Props> = ({
                 )
               })
             ) : (
-              <Text style="body1" css={{ p: '2', textAlign: 'center' }}>
+              <Text style="body1" className="relay-p-2 relay-text-center">
                 No results.
               </Text>
             )
@@ -206,15 +177,7 @@ const ChainFilter: FC<Props> = ({
                     onSelect(allChainsOption)
                     setChainSearchInput('')
                   }}
-                  css={{
-                    padding: '8px',
-                    borderRadius: 4,
-                    cursor: 'pointer',
-                    backgroundColor: 'modal-background',
-                    _hover: {
-                      backgroundColor: 'gray3'
-                    }
-                  }}
+                  className="relay-p-[8px] relay-rounded-[4px] relay-cursor-pointer relay-bg-[var(--relay-colors-modal-background)] hover:relay-bg-[var(--relay-colors-gray3)]"
                 >
                   <ChainFilterRow
                     chain={allChainsOption}
@@ -225,8 +188,8 @@ const ChainFilter: FC<Props> = ({
 
               {starredChains.length > 0 && (
                 <>
-                  <Flex align="center" css={{ px: '2', py: '1', gap: '1' }}>
-                    <Box css={{ color: 'primary9' }}>
+                  <Flex align="center" className="relay-px-2 relay-py-1 relay-gap-1">
+                    <Box className="relay-text-[color:var(--relay-colors-primary9)]">
                       <FontAwesomeIcon icon={faStar} width={12} height={12} />
                     </Box>
                     <Text style="subtitle2" color="subtle">
@@ -237,7 +200,7 @@ const ChainFilter: FC<Props> = ({
                         <Text style="body3">Long-press to star a chain</Text>
                       }
                     >
-                      <Box css={{ color: 'gray9' }}>
+                      <Box className="relay-text-[color:var(--relay-colors-gray9)]">
                         <FontAwesomeIcon
                           icon={faInfoCircle}
                           width={12}
@@ -256,15 +219,7 @@ const ChainFilter: FC<Props> = ({
                           onSelect(chain)
                           setChainSearchInput('')
                         }}
-                        css={{
-                          padding: '8px',
-                          borderRadius: 4,
-                          cursor: 'pointer',
-                          backgroundColor: 'modal-background',
-                          _hover: {
-                            backgroundColor: 'gray3'
-                          }
-                        }}
+                        className="relay-p-[8px] relay-rounded-[4px] relay-cursor-pointer relay-bg-[var(--relay-colors-modal-background)] hover:relay-bg-[var(--relay-colors-gray3)]"
                       >
                         <ChainFilterRow
                           chain={chain}
@@ -279,7 +234,7 @@ const ChainFilter: FC<Props> = ({
                 </>
               )}
 
-              <Text style="subtitle2" color="subtle" css={{ px: '2', py: '1' }}>
+              <Text style="subtitle2" color="subtle" className="relay-px-2 relay-py-1">
                 Chains A-Z
               </Text>
               {alphabeticalChains.map((chain) => {
@@ -292,15 +247,7 @@ const ChainFilter: FC<Props> = ({
                       onSelect(chain)
                       setChainSearchInput('')
                     }}
-                    css={{
-                      padding: '8px',
-                      borderRadius: 4,
-                      cursor: 'pointer',
-                      backgroundColor: 'modal-background',
-                      _hover: {
-                        backgroundColor: 'gray3'
-                      }
-                    }}
+                    className="relay-p-[8px] relay-rounded-[4px] relay-cursor-pointer relay-bg-[var(--relay-colors-modal-background)] hover:relay-bg-[var(--relay-colors-gray3)]"
                   >
                     <ChainFilterRow
                       chain={chain}
@@ -424,13 +371,7 @@ const ChainFilterRow: FC<ChainFilterRowProps> = ({
     return (
       <Flex
         align="center"
-        css={{
-          gap: '2',
-          cursor: 'pointer',
-          flexShrink: 0,
-          alignContent: 'center',
-          width: '100%'
-        }}
+        className="relay-gap-2 relay-cursor-pointer relay-shrink-0 relay-content-center relay-w-full"
       >
         <AllChainsLogo style={{ width: 24, height: 24 }} />
         <Text style="subtitle2">{chain.name}</Text>
@@ -439,7 +380,7 @@ const ChainFilterRow: FC<ChainFilterRowProps> = ({
   }
 
   return (
-    <div style={{ position: 'relative', width: '100%' }}>
+    <div className="relay-relative relay-w-full">
       <Flex
         align="center"
         onContextMenu={(e) => {
@@ -455,25 +396,14 @@ const ChainFilterRow: FC<ChainFilterRowProps> = ({
         onTouchStart={handleTouchStart}
         onTouchEnd={handleTouchEnd}
         onTouchMove={handleTouchMove}
-        css={{
-          gap: '2',
-          cursor: 'pointer',
-          flexShrink: 0,
-          alignContent: 'center',
-          width: '100%',
-          position: 'relative',
-          userSelect: 'none'
-        }}
-        style={{
-          WebkitUserSelect: 'none'
-        }}
+        className="relay-gap-2 relay-cursor-pointer relay-shrink-0 relay-content-center relay-w-full relay-relative relay-select-none"
       >
         <ChainIcon chainId={chain.id} square width={24} height={24} />
         <Text style="subtitle2">
           {('displayName' in chain && chain.displayName) || chain.name}
         </Text>
         {showStar && isStarred && (
-          <Box css={{ color: 'primary9' }}>
+          <Box className="relay-text-[color:var(--relay-colors-primary9)]">
             <FontAwesomeIcon icon={faStar} width={12} height={12} />
           </Box>
         )}
@@ -483,14 +413,7 @@ const ChainFilterRow: FC<ChainFilterRowProps> = ({
       {dropdownOpen && (
         <div
           ref={dropdownRef}
-          style={{
-            position: 'absolute',
-            top: '100%',
-            left: 0,
-            marginTop: '4px',
-            minWidth: 160,
-            zIndex: 999999
-          }}
+          className="relay-absolute relay-top-full relay-left-0 relay-mt-1 relay-min-w-[160px] relay-z-[999999]"
           onClick={(e) => {
             e.stopPropagation()
             handleToggleStar()
@@ -499,28 +422,18 @@ const ChainFilterRow: FC<ChainFilterRowProps> = ({
           onTouchStart={(e) => e.stopPropagation()}
         >
           <Flex
-            css={{
-              alignItems: 'center',
-              gap: '8px',
-              padding: '8px',
-              borderRadius: 12,
-              cursor: 'pointer',
-              backgroundColor: 'gray1',
-              '--borderColor': 'colors.subtle-border-color',
-              border: '1px solid var(--borderColor)',
-              _hover: {
-                backgroundColor: 'gray2'
-              }
-            }}
+            className="relay-items-center relay-gap-[8px] relay-p-[8px] relay-rounded-[12px] relay-cursor-pointer relay-bg-[var(--relay-colors-gray1)] relay-border relay-border-solid relay-border-[var(--relay-colors-subtle-border-color)] hover:relay-bg-[var(--relay-colors-gray2)]"
           >
             <Box
-              css={{
-                color: isStarred ? 'gray8' : 'primary9'
-              }}
+              className={cn(
+                isStarred
+                  ? 'relay-text-[color:var(--relay-colors-gray8)]'
+                  : 'relay-text-[color:var(--relay-colors-primary9)]'
+              )}
             >
               <FontAwesomeIcon icon={faStar} width={16} height={16} />
             </Box>
-            <Text style="subtitle1" css={{ lineHeight: '20px' }}>
+            <Text style="subtitle1" className="relay-leading-[20px]">
               {isStarred ? 'Unstar chain' : 'Star chain'}
             </Text>
           </Flex>
diff --git a/packages/ui/src/components/common/TokenSelector/ChainFilterRow.tsx b/packages/ui/src/components/common/TokenSelector/ChainFilterRow.tsx
index 517921306..0198f411a 100644
--- a/packages/ui/src/components/common/TokenSelector/ChainFilterRow.tsx
+++ b/packages/ui/src/components/common/TokenSelector/ChainFilterRow.tsx
@@ -18,6 +18,7 @@ import {
   toggleStarredChain
 } from '../../../utils/localStorage.js'
 import { EventNames } from '../../../constants/events.js'
+import { cn } from '../../../utils/cn.js'
 
 export type ChainFilterRowProps = {
   chain: ChainFilterValue
@@ -89,13 +90,7 @@ export const ChainFilterRow: FC<ChainFilterRowProps> = ({
     return (
       <Flex
         align="center"
-        css={{
-          gap: '2',
-          cursor: 'pointer',
-          flexShrink: 0,
-          alignContent: 'center',
-          width: '100%'
-        }}
+        className="relay-gap-2 relay-cursor-pointer relay-shrink-0 relay-content-center relay-w-full"
       >
         <AllChainsLogo style={{ width: 24, height: 24 }} />
         <Text style="subtitle2">{chain.name}</Text>
@@ -104,32 +99,21 @@ export const ChainFilterRow: FC<ChainFilterRowProps> = ({
   }
 
   return (
-    <div style={{ position: 'relative', width: '100%' }}>
+    <div className="relay-relative relay-w-full">
       <Flex
         align="center"
         onContextMenu={(e) => {
           e.preventDefault()
           setDropdownOpen(true)
         }}
-        css={{
-          gap: '2',
-          cursor: 'pointer',
-          flexShrink: 0,
-          alignContent: 'center',
-          width: '100%',
-          position: 'relative',
-          userSelect: 'none'
-        }}
-        style={{
-          WebkitUserSelect: 'none'
-        }}
+        className="relay-gap-2 relay-cursor-pointer relay-shrink-0 relay-content-center relay-w-full relay-relative relay-select-none"
       >
         <ChainIcon chainId={chain.id} square width={24} height={24} />
         <Text style="subtitle2">
           {('displayName' in chain && chain.displayName) || chain.name}
         </Text>
         {showStar && isStarred && (
-          <Box css={{ color: 'primary9' }}>
+          <Box className="relay-text-[color:var(--relay-colors-primary9)]">
             <FontAwesomeIcon icon={faStar} width={12} height={12} />
           </Box>
         )}
@@ -140,14 +124,7 @@ export const ChainFilterRow: FC<ChainFilterRowProps> = ({
       {dropdownOpen && (
         <div
           ref={dropdownRef}
-          style={{
-            position: 'absolute',
-            top: '100%',
-            left: 0,
-            marginTop: '4px',
-            minWidth: 140,
-            zIndex: 9999
-          }}
+          className="relay-absolute relay-top-full relay-left-0 relay-mt-1 relay-min-w-[140px] relay-z-[9999]"
           onClick={(e) => {
             e.stopPropagation()
             handleToggleStar()
@@ -156,27 +133,18 @@ export const ChainFilterRow: FC<ChainFilterRowProps> = ({
           onTouchStart={(e) => e.stopPropagation()}
         >
           <Flex
-            css={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: '6px',
-              padding: '3',
-              borderRadius: 12,
-              cursor: 'pointer',
-              backgroundColor: 'modal-background',
-              _hover: {
-                backgroundColor: 'gray2'
-              }
-            }}
+            className="relay-flex relay-items-center relay-gap-[6px] relay-p-3 relay-rounded-[12px] relay-cursor-pointer relay-bg-[var(--relay-colors-modal-background)] hover:relay-bg-[var(--relay-colors-gray2)]"
           >
             <Box
-              css={{
-                color: isStarred ? 'gray8' : 'primary9'
-              }}
+              className={cn(
+                isStarred
+                  ? 'relay-text-[color:var(--relay-colors-gray8)]'
+                  : 'relay-text-[color:var(--relay-colors-primary9)]'
+              )}
             >
               <FontAwesomeIcon icon={faStar} width={16} height={16} />
             </Box>
-            <Text style="subtitle1" css={{ lineHeight: '20px' }}>
+            <Text style="subtitle1" className="relay-leading-[20px]">
               {isStarred ? 'Unstar chain' : 'Star chain'}
             </Text>
           </Flex>
@@ -201,24 +169,12 @@ export const ChainSearchInput = forwardRef<
     ref={ref}
     placeholder={placeholder}
     icon={
-      <Box css={{ color: 'gray9' }}>
+      <Box className="relay-text-[color:var(--relay-colors-gray9)]">
         <FontAwesomeIcon icon={faMagnifyingGlass} width={16} height={16} />
       </Box>
     }
-    containerCss={{
-      width: '100%',
-      height: 40,
-      mb: '2'
-    }}
-    css={{
-      width: '100%',
-      _placeholder_parent: {
-        textOverflow: 'ellipsis'
-      },
-      '--borderColor': 'colors.subtle-border-color',
-      border: '1px solid var(--borderColor)',
-      backgroundColor: 'modal-background'
-    }}
+    containerClassName="relay-w-full relay-h-[40px] relay-mb-2"
+    className="relay-w-full relay-border relay-border-solid relay-border-[var(--relay-colors-subtle-border-color)] relay-bg-[var(--relay-colors-modal-background)] [&::placeholder]:relay-text-ellipsis"
     value={value}
     onChange={(e) => onChange((e.target as HTMLInputElement).value)}
     onKeyDown={onKeyDown}
diff --git a/packages/ui/src/components/common/TokenSelector/ChainFilterSidebar.tsx b/packages/ui/src/components/common/TokenSelector/ChainFilterSidebar.tsx
index ca253764d..0fb31b982 100644
--- a/packages/ui/src/components/common/TokenSelector/ChainFilterSidebar.tsx
+++ b/packages/ui/src/components/common/TokenSelector/ChainFilterSidebar.tsx
@@ -30,6 +30,7 @@ import {
 } from '../../../utils/localStorage.js'
 import Tooltip from '../../../components/primitives/Tooltip.js'
 import { ChainSearchInput } from './ChainFilterRow.js'
+import { cn } from '../../../utils/cn.js'
 
 type ChainFilterSidebarProps = {
   options: (RelayChain | { id: undefined; name: string })[]
@@ -111,14 +112,7 @@ export const ChainFilterSidebar: FC<ChainFilterSidebarProps> = ({
   return (
     <Flex
       direction="column"
-      css={{
-        maxWidth: 212,
-        flexShrink: 0,
-        gap: '1',
-        bg: 'gray3',
-        borderRadius: 12,
-        p: '3'
-      }}
+      className="relay-max-w-[212px] relay-shrink-0 relay-gap-1 relay-bg-[var(--relay-colors-gray3)] relay-rounded-[12px] relay-p-3"
     >
       <AccessibleList
         onSelect={(selectedValue) => {
@@ -150,12 +144,7 @@ export const ChainFilterSidebar: FC<ChainFilterSidebarProps> = ({
             }
           }
         }}
-        css={{
-          display: 'flex',
-          flexDirection: 'column',
-          width: '100%',
-          height: '100%'
-        }}
+        className="relay-flex relay-flex-col relay-w-full relay-h-full"
       >
         <AccessibleListItem value="input" asChild>
           <ChainSearchInput
@@ -168,12 +157,8 @@ export const ChainFilterSidebar: FC<ChainFilterSidebarProps> = ({
 
         <Flex
           direction="column"
-          css={{
-            flex: 1,
-            overflowY: 'auto',
-            gap: '1',
-            scrollbarColor: 'var(--relay-colors-gray5) transparent'
-          }}
+          className="relay-flex-1 relay-overflow-y-auto relay-gap-1"
+          style={{ scrollbarColor: 'var(--relay-colors-gray5) transparent' }}
         >
           {filteredChains ? (
             // Show search results without sections
@@ -226,27 +211,12 @@ export const ChainFilterSidebar: FC<ChainFilterSidebarProps> = ({
                           }
                         }}
                         ref={isSameChainSelected ? activeChainRef : null}
-                        css={{
-                          p: '2',
-                          display: 'flex',
-                          alignItems: 'center',
-                          gap: '2',
-                          position: 'relative',
-                          ...(isSameChainSelected && {
-                            backgroundColor: 'gray6'
-                          }),
-                          transition: 'backdrop-filter 250ms linear',
-                          _hover: {
-                            backgroundColor:
-                              isSameChainSelected
-                                ? 'gray6'
-                                : 'gray/10'
-                          },
-                          '--focusColor': 'colors.focus-color',
-                          _focus: {
-                            boxShadow: 'inset 0 0 0 2px var(--focusColor)'
-                          }
-                        }}
+                        className={cn(
+                          'relay-p-2 relay-flex relay-items-center relay-gap-2 relay-relative relay-transition-[backdrop-filter] relay-duration-[250ms] relay-ease-linear focus:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)]',
+                          isSameChainSelected
+                            ? 'relay-bg-[var(--relay-colors-gray6)] hover:relay-bg-[var(--relay-colors-gray6)]'
+                            : 'hover:relay-bg-[rgba(var(--relay-colors-gray-rgb,0,0,0),0.1)]'
+                        )}
                       >
                         <ChainIcon
                           chainId={sameChainOption.id}
@@ -265,8 +235,8 @@ export const ChainFilterSidebar: FC<ChainFilterSidebarProps> = ({
 
               {starredChains.length > 0 && (
                 <>
-                  <Flex align="center" css={{ px: '2', py: '1', gap: '1' }}>
-                    <Box css={{ color: 'primary9' }}>
+                  <Flex align="center" className="relay-px-2 relay-py-1 relay-gap-1">
+                    <Box className="relay-text-[color:var(--relay-colors-primary9)]">
                       <FontAwesomeIcon icon={faStar} width={12} height={12} />
                     </Box>
                     <Text style="subtitle2" color="subtle">
@@ -277,7 +247,7 @@ export const ChainFilterSidebar: FC<ChainFilterSidebarProps> = ({
                         <Text style="body3">Right-click to star a chain</Text>
                       }
                     >
-                      <Box css={{ color: 'gray9' }}>
+                      <Box className="relay-text-[color:var(--relay-colors-gray9)]">
                         <FontAwesomeIcon
                           icon={faInfoCircle}
                           width={12}
@@ -313,7 +283,7 @@ export const ChainFilterSidebar: FC<ChainFilterSidebarProps> = ({
                 </>
               )}
 
-              <Text style="subtitle2" color="subtle" css={{ px: '2', py: '1' }}>
+              <Text style="subtitle2" color="subtle" className="relay-px-2 relay-py-1">
                 Chains A-Z
               </Text>
               {alphabeticalChains.map((chain) => {
@@ -433,24 +403,12 @@ const ChainFilterRow: FC<ChainFilterRowProps> = ({
           size="none"
           onClick={onClick}
           ref={isActive ? activeChainRef : null}
-          css={{
-            p: '2',
-            display: 'flex',
-            alignItems: 'center',
-            gap: '2',
-            position: 'relative',
-            ...(isActive && {
-              backgroundColor: 'gray6'
-            }),
-            transition: 'backdrop-filter 250ms linear',
-            _hover: {
-              backgroundColor: isActive ? 'gray6' : 'gray/10'
-            },
-            '--focusColor': 'colors.focus-color',
-            _focus: {
-              boxShadow: 'inset 0 0 0 2px var(--focusColor)'
-            }
-          }}
+          className={cn(
+            'relay-p-2 relay-flex relay-items-center relay-gap-2 relay-relative relay-transition-[backdrop-filter] relay-duration-[250ms] relay-ease-linear focus:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)]',
+            isActive
+              ? 'relay-bg-[var(--relay-colors-gray6)] hover:relay-bg-[var(--relay-colors-gray6)]'
+              : 'hover:relay-bg-[rgba(var(--relay-colors-gray-rgb,0,0,0),0.1)]'
+          )}
         >
           <AllChainsLogo style={{ width: 24, height: 24 }} />
           <Text style="subtitle1" ellipsify>
@@ -462,7 +420,7 @@ const ChainFilterRow: FC<ChainFilterRowProps> = ({
   }
 
   return (
-    <Flex css={{ position: 'relative', width: '100%' }}>
+    <Flex className="relay-relative relay-w-full">
       <AccessibleListItem value={value} asChild>
         <Button
           color="ghost"
@@ -486,31 +444,19 @@ const ChainFilterRow: FC<ChainFilterRowProps> = ({
               }
             }
           }}
-          css={{
-            p: '2',
-            display: 'flex',
-            alignItems: 'center',
-            gap: '2',
-            width: '100%',
-            ...(isActive && {
-              backgroundColor: 'gray6'
-            }),
-            transition: 'backdrop-filter 250ms linear',
-            _hover: {
-              backgroundColor: isActive ? 'gray6' : 'gray/10'
-            },
-            '--focusColor': 'colors.focus-color',
-            _focus: {
-              boxShadow: 'inset 0 0 0 2px var(--focusColor)'
-            }
-          }}
+          className={cn(
+            'relay-p-2 relay-flex relay-items-center relay-gap-2 relay-w-full relay-transition-[backdrop-filter] relay-duration-[250ms] relay-ease-linear focus:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)]',
+            isActive
+              ? 'relay-bg-[var(--relay-colors-gray6)] hover:relay-bg-[var(--relay-colors-gray6)]'
+              : 'hover:relay-bg-[rgba(var(--relay-colors-gray-rgb,0,0,0),0.1)]'
+          )}
         >
           <ChainIcon chainId={chain.id} square width={24} height={24} />
           <Text style="subtitle1" ellipsify>
             {('displayName' in chain && chain.displayName) || chain.name}
           </Text>
           {showStar && isStarred && (
-            <Box css={{ color: 'primary9' }}>
+            <Box className="relay-text-[color:var(--relay-colors-primary9)]">
               <FontAwesomeIcon icon={faStar} width={16} height={16} />
             </Box>
           )}
@@ -521,14 +467,7 @@ const ChainFilterRow: FC<ChainFilterRowProps> = ({
       {dropdownOpen && (
         <div
           ref={dropdownRef}
-          style={{
-            position: 'absolute',
-            top: '100%',
-            left: 0,
-            marginTop: '4px',
-            minWidth: 140,
-            zIndex: 9999
-          }}
+          className="relay-absolute relay-top-full relay-left-0 relay-mt-1 relay-min-w-[140px] relay-z-[9999]"
           onClick={(e) => {
             e.stopPropagation()
             handleToggleStar()
@@ -537,27 +476,18 @@ const ChainFilterRow: FC<ChainFilterRowProps> = ({
           onTouchStart={(e) => e.stopPropagation()}
         >
           <Flex
-            css={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: '6px',
-              padding: '3',
-              borderRadius: 12,
-              cursor: 'pointer',
-              backgroundColor: 'modal-background',
-              _hover: {
-                backgroundColor: 'gray2'
-              }
-            }}
+            className="relay-flex relay-items-center relay-gap-[6px] relay-p-3 relay-rounded-[12px] relay-cursor-pointer relay-bg-[var(--relay-colors-modal-background)] hover:relay-bg-[var(--relay-colors-gray2)]"
           >
             <Box
-              css={{
-                color: isStarred ? 'gray8' : 'primary9'
-              }}
+              className={cn(
+                isStarred
+                  ? 'relay-text-[color:var(--relay-colors-gray8)]'
+                  : 'relay-text-[color:var(--relay-colors-primary9)]'
+              )}
             >
               <FontAwesomeIcon icon={faStar} width={16} height={16} />
             </Box>
-            <Text style="subtitle1" css={{ lineHeight: '20px' }}>
+            <Text style="subtitle1" className="relay-leading-[20px]">
               {isStarred ? 'Unstar chain' : 'Star chain'}
             </Text>
           </Flex>
diff --git a/packages/ui/src/components/common/TokenSelector/ChainShortcuts.tsx b/packages/ui/src/components/common/TokenSelector/ChainShortcuts.tsx
index 5a8d4a970..007c2f716 100644
--- a/packages/ui/src/components/common/TokenSelector/ChainShortcuts.tsx
+++ b/packages/ui/src/components/common/TokenSelector/ChainShortcuts.tsx
@@ -6,6 +6,7 @@ import type { ChainFilterValue } from './ChainFilter.js'
 import type { RelayChain } from '@relayprotocol/relay-sdk'
 import { groupChains } from '../../../utils/tokenSelector.js'
 import { EventNames } from '../../../constants/events.js'
+import { cn } from '../../../utils/cn.js'
 
 type ChainShortcutsProps = {
   options: (RelayChain | { id: undefined; name: string })[]
@@ -92,7 +93,7 @@ export const ChainShortcuts: FC<ChainShortcutsProps> = ({
   }
 
   return (
-    <Flex css={{ gap: '2', width: '100%', overflowX: 'auto', py: '2' }}>
+    <Flex className="relay-gap-2 relay-w-full relay-overflow-x-auto relay-py-2">
       {shortcutChains.map((chain) => (
         <ChainShortcutButton
           key={chain.id?.toString() ?? 'all-chains'}
@@ -106,20 +107,7 @@ export const ChainShortcuts: FC<ChainShortcutsProps> = ({
         color="ghost"
         size="none"
         onClick={onMoreClick}
-        css={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: '1',
-          px: '2',
-          py: '10px',
-          height: '40px',
-          borderRadius: '8px',
-          backgroundColor: 'dropdown-background',
-          color: 'gray9',
-          _hover: {
-            backgroundColor: 'gray3'
-          }
-        }}
+        className="relay-flex relay-items-center relay-gap-1 relay-px-2 relay-py-[10px] relay-h-[40px] relay-rounded-[8px] relay-bg-[var(--relay-colors-dropdown-background)] relay-text-[color:var(--relay-colors-gray9)] hover:relay-bg-[var(--relay-colors-gray3)]"
       >
         <Text style="subtitle1" color="subtle">
           More
@@ -146,29 +134,22 @@ const ChainShortcutButton: FC<ChainShortcutButtonProps> = ({
       color="ghost"
       size="none"
       onClick={onClick}
-      css={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        gap: '1',
-        py: '2',
-        px: '3',
-        borderRadius: '12px',
-        backgroundColor: isSelected ? 'gray6' : 'dropdown-background',
-        _hover: {
-          backgroundColor: isSelected ? 'gray6' : 'gray3'
-        }
-      }}
+      className={cn(
+        'relay-flex relay-flex-col relay-items-center relay-gap-1 relay-py-2 relay-px-3 relay-rounded-[12px]',
+        isSelected
+          ? 'relay-bg-[var(--relay-colors-gray6)] hover:relay-bg-[var(--relay-colors-gray6)]'
+          : 'relay-bg-[var(--relay-colors-dropdown-background)] hover:relay-bg-[var(--relay-colors-gray3)]'
+      )}
     >
       {chain.id ? (
         <ChainIcon
           chainId={chain.id}
           width={24}
           height={24}
-          css={{ borderRadius: '4px', overflow: 'hidden' }}
+          className="relay-rounded-[4px] relay-overflow-hidden"
         />
       ) : (
-        <Text style="subtitle1" css={{ height: '24px', width: '20px' }}>
+        <Text style="subtitle1" className="relay-h-[24px] relay-w-[20px]">
           All
         </Text>
       )}
diff --git a/packages/ui/src/components/common/TokenSelector/CompactChainFilter.tsx b/packages/ui/src/components/common/TokenSelector/CompactChainFilter.tsx
index 8d8b995e6..e41a072ab 100644
--- a/packages/ui/src/components/common/TokenSelector/CompactChainFilter.tsx
+++ b/packages/ui/src/components/common/TokenSelector/CompactChainFilter.tsx
@@ -32,33 +32,19 @@ const ChainFilterTrigger = forwardRef<
     aria-label="Chain filter"
     color="ghost"
     size="none"
-    css={{
-      display: 'flex',
-      alignItems: 'center',
-      gap: '6px',
-      height: 40,
-      px: '12px',
-      cursor: 'pointer',
-      backgroundColor: 'dropdown-background',
-      borderRadius: 'dropdown-border-radius',
-      flexShrink: 0,
-      '--focusColor': 'colors.focus-color',
-      _focusVisible: {
-        boxShadow: 'inset 0 0 0 2px var(--focusColor)'
-      }
-    }}
+    className="relay-flex relay-items-center relay-gap-[6px] relay-h-[40px] relay-px-[12px] relay-cursor-pointer relay-bg-[var(--relay-colors-dropdown-background)] relay-rounded-dropdown relay-shrink-0 focus-visible:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)]"
   >
     {value.id ? (
       <ChainIcon
         chainId={value.id}
         width={20}
         height={20}
-        css={{ borderRadius: 4, overflow: 'hidden' }}
+        className="relay-rounded-[4px] relay-overflow-hidden"
       />
     ) : (
       <AllChainsLogo style={{ width: 20, height: 20 }} />
     )}
-    <Box css={{ color: 'gray9' }}>
+    <Box className="relay-text-[color:var(--relay-colors-gray9)]">
       <FontAwesomeIcon
         icon={faChevronDown}
         width={12}
@@ -166,15 +152,10 @@ export const CompactChainFilter: FC<CompactChainFilterProps> = ({
       contentProps={{
         align: 'end',
         avoidCollisions: false,
-        css: {
-          p: 0,
-          minWidth: '100%',
-          maxWidth: '100%',
-          mx: '0'
-        }
+        className: 'relay-p-0 relay-min-w-full relay-max-w-full relay-mx-0'
       }}
     >
-      <Flex direction="column" css={{ p: '2' }} data-chain-dropdown="true">
+      <Flex direction="column" className="relay-p-2" data-chain-dropdown="true">
         <ChainSearchInput
           ref={searchInputRef}
           value={chainSearchInput}
@@ -186,12 +167,8 @@ export const CompactChainFilter: FC<CompactChainFilterProps> = ({
         />
         <Flex
           direction="column"
-          css={{
-            overflowY: 'auto',
-            borderRadius: 8,
-            maxHeight: 290,
-            scrollbarColor: 'var(--relay-colors-gray5) transparent'
-          }}
+          className="relay-overflow-y-auto relay-rounded-[8px] relay-max-h-[290px]"
+          style={{ scrollbarColor: 'var(--relay-colors-gray5) transparent' }}
         >
           {filteredChains ? (
             filteredChains.length > 0 ? (
@@ -206,19 +183,7 @@ export const CompactChainFilter: FC<CompactChainFilterProps> = ({
                       setOpen(false)
                       setChainSearchInput('')
                     }}
-                    css={{
-                      padding: '8px',
-                      borderRadius: 4,
-                      cursor: 'pointer',
-                      backgroundColor: 'modal-background',
-                      outline: 'none',
-                      _hover: {
-                        backgroundColor: 'gray3'
-                      },
-                      _focus: {
-                        backgroundColor: 'gray3'
-                      }
-                    }}
+                    className="relay-p-[8px] relay-rounded-[4px] relay-cursor-pointer relay-bg-[var(--relay-colors-modal-background)] relay-outline-none hover:relay-bg-[var(--relay-colors-gray3)] focus:relay-bg-[var(--relay-colors-gray3)]"
                   >
                     <ChainFilterRow
                       chain={chain}
@@ -230,7 +195,7 @@ export const CompactChainFilter: FC<CompactChainFilterProps> = ({
                 )
               })
             ) : (
-              <Text style="body1" css={{ p: '2', textAlign: 'center' }}>
+              <Text style="body1" className="relay-p-2 relay-text-center">
                 No results.
               </Text>
             )
@@ -244,19 +209,7 @@ export const CompactChainFilter: FC<CompactChainFilterProps> = ({
                     onSelect(allChainsOption)
                     setChainSearchInput('')
                   }}
-                  css={{
-                    padding: '8px',
-                    borderRadius: 4,
-                    cursor: 'pointer',
-                    backgroundColor: 'modal-background',
-                    outline: 'none',
-                    _hover: {
-                      backgroundColor: 'gray3'
-                    },
-                    _focus: {
-                      backgroundColor: 'gray3'
-                    }
-                  }}
+                  className="relay-p-[8px] relay-rounded-[4px] relay-cursor-pointer relay-bg-[var(--relay-colors-modal-background)] relay-outline-none hover:relay-bg-[var(--relay-colors-gray3)] focus:relay-bg-[var(--relay-colors-gray3)]"
                 >
                   <ChainFilterRow
                     chain={allChainsOption}
@@ -267,8 +220,8 @@ export const CompactChainFilter: FC<CompactChainFilterProps> = ({
 
               {starredChains.length > 0 && (
                 <>
-                  <Flex align="center" css={{ px: '2', py: '1', gap: '1' }}>
-                    <Box css={{ color: 'primary9' }}>
+                  <Flex align="center" className="relay-px-2 relay-py-1 relay-gap-1">
+                    <Box className="relay-text-[color:var(--relay-colors-primary9)]">
                       <FontAwesomeIcon icon={faStar} width={12} height={12} />
                     </Box>
                     <Text style="subtitle2" color="subtle">
@@ -286,19 +239,7 @@ export const CompactChainFilter: FC<CompactChainFilterProps> = ({
                           setOpen(false)
                           setChainSearchInput('')
                         }}
-                        css={{
-                          padding: '8px',
-                          borderRadius: 4,
-                          cursor: 'pointer',
-                          backgroundColor: 'modal-background',
-                          outline: 'none',
-                          _hover: {
-                            backgroundColor: 'gray3'
-                          },
-                          _focus: {
-                            backgroundColor: 'gray3'
-                          }
-                        }}
+                        className="relay-p-[8px] relay-rounded-[4px] relay-cursor-pointer relay-bg-[var(--relay-colors-modal-background)] relay-outline-none hover:relay-bg-[var(--relay-colors-gray3)] focus:relay-bg-[var(--relay-colors-gray3)]"
                       >
                         <ChainFilterRow
                           chain={chain}
@@ -313,7 +254,7 @@ export const CompactChainFilter: FC<CompactChainFilterProps> = ({
                 </>
               )}
 
-              <Text style="subtitle2" color="subtle" css={{ px: '2', py: '1' }}>
+              <Text style="subtitle2" color="subtle" className="relay-px-2 relay-py-1">
                 Chains A-Z
               </Text>
               {alphabeticalChains.map((chain: ChainFilterValue) => {
@@ -327,19 +268,7 @@ export const CompactChainFilter: FC<CompactChainFilterProps> = ({
                       setOpen(false)
                       setChainSearchInput('')
                     }}
-                    css={{
-                      padding: '8px',
-                      borderRadius: 4,
-                      cursor: 'pointer',
-                      backgroundColor: 'modal-background',
-                      outline: 'none',
-                      _hover: {
-                        backgroundColor: 'gray3'
-                      },
-                      _focus: {
-                        backgroundColor: 'gray3'
-                      }
-                    }}
+                    className="relay-p-[8px] relay-rounded-[4px] relay-cursor-pointer relay-bg-[var(--relay-colors-modal-background)] relay-outline-none hover:relay-bg-[var(--relay-colors-gray3)] focus:relay-bg-[var(--relay-colors-gray3)]"
                   >
                     <ChainFilterRow
                       chain={chain}
diff --git a/packages/ui/src/components/common/TokenSelector/MobileChainSelector.tsx b/packages/ui/src/components/common/TokenSelector/MobileChainSelector.tsx
index fde4070db..b5ad4b395 100644
--- a/packages/ui/src/components/common/TokenSelector/MobileChainSelector.tsx
+++ b/packages/ui/src/components/common/TokenSelector/MobileChainSelector.tsx
@@ -36,6 +36,7 @@ import {
   toggleStarredChain
 } from '../../../utils/localStorage.js'
 import Tooltip from '../../../components/primitives/Tooltip.js'
+import { cn } from '../../../utils/cn.js'
 
 type MobileChainSelectorProps = {
   options: (RelayChain | { id: undefined; name: string })[]
@@ -106,34 +107,18 @@ export const MobileChainSelector: FC<MobileChainSelectorProps> = ({
   return (
     <Flex
       direction="column"
-      css={{
-        width: '100%',
-        height: '100%',
-        gap: '3'
-      }}
+      className="relay-w-full relay-h-full relay-gap-3"
     >
       {/* Header with back button, search, and close */}
       <Flex
         align="center"
-        css={{
-          gap: '1',
-          width: '100%'
-        }}
+        className="relay-gap-1 relay-w-full"
       >
         <Button
           color="ghost"
           size="none"
           onClick={onBack}
-          css={{
-            p: '2',
-            borderRadius: '8px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            minWidth: '40px',
-            height: '40px',
-            color: 'gray9'
-          }}
+          className="relay-p-2 relay-rounded-[8px] relay-flex relay-items-center relay-justify-center relay-min-w-[40px] relay-h-[40px] relay-text-[color:var(--relay-colors-gray9)]"
         >
           <FontAwesomeIcon icon={faArrowLeft} width={16} height={16} />
         </Button>
@@ -141,7 +126,7 @@ export const MobileChainSelector: FC<MobileChainSelectorProps> = ({
         <Input
           placeholder="Search a chain"
           icon={
-            <Box css={{ color: 'gray9' }}>
+            <Box className="relay-text-[color:var(--relay-colors-gray9)]">
               <FontAwesomeIcon
                 icon={faMagnifyingGlass}
                 width={16}
@@ -149,16 +134,8 @@ export const MobileChainSelector: FC<MobileChainSelectorProps> = ({
               />
             </Box>
           }
-          containerCss={{
-            flex: 1,
-            height: 40
-          }}
-          css={{
-            width: '100%',
-            _placeholder_parent: {
-              textOverflow: 'ellipsis'
-            }
-          }}
+          containerClassName="relay-flex-1 relay-h-[40px]"
+          className="relay-w-full [&::placeholder]:relay-text-ellipsis"
           value={chainSearchInput}
           onChange={(e) =>
             setChainSearchInput((e.target as HTMLInputElement).value)
@@ -169,16 +146,7 @@ export const MobileChainSelector: FC<MobileChainSelectorProps> = ({
           color="ghost"
           size="none"
           onClick={onClose}
-          css={{
-            p: '2',
-            borderRadius: '8px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            minWidth: '40px',
-            height: '40px',
-            color: 'gray9'
-          }}
+          className="relay-p-2 relay-rounded-[8px] relay-flex relay-items-center relay-justify-center relay-min-w-[40px] relay-h-[40px] relay-text-[color:var(--relay-colors-gray9)]"
         >
           <FontAwesomeIcon icon={faXmark} width={16} height={16} />
         </Button>
@@ -214,14 +182,7 @@ export const MobileChainSelector: FC<MobileChainSelectorProps> = ({
             }
           }
         }}
-        css={{
-          display: 'flex',
-          flexDirection: 'column',
-          width: '100%',
-          flex: 1,
-          overflowY: 'auto',
-          scrollbarColor: 'var(--relay-colors-gray5) transparent'
-        }}
+        className="relay-flex relay-flex-col relay-w-full relay-flex-1 relay-overflow-y-auto [scrollbar-color:var(--relay-colors-gray5)_transparent]"
       >
         {filteredChains ? (
           // Show search results without sections
@@ -253,19 +214,7 @@ export const MobileChainSelector: FC<MobileChainSelectorProps> = ({
                 <Button
                   color="ghost"
                   size="none"
-                  css={{
-                    py: '3',
-                    px: '2',
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '2',
-                    width: '100%',
-                    height: '56px',
-                    borderRadius: '12px',
-                    _hover: {
-                      backgroundColor: 'gray3'
-                    }
-                  }}
+                  className="relay-py-3 relay-px-2 relay-flex relay-items-center relay-gap-2 relay-w-full relay-h-[56px] relay-rounded-[12px] hover:relay-bg-[var(--relay-colors-gray3)]"
                 >
                   <ChainIcon
                     chainId={sameChainOption.id}
@@ -280,8 +229,8 @@ export const MobileChainSelector: FC<MobileChainSelectorProps> = ({
 
             {starredChains.length > 0 && (
               <>
-                <Flex align="center" css={{ py: '2', gap: '2' }}>
-                  <Box css={{ color: 'primary9' }}>
+                <Flex align="center" className="relay-py-2 relay-gap-2">
+                  <Box className="relay-text-[color:var(--relay-colors-primary9)]">
                     <FontAwesomeIcon icon={faStar} width={16} height={16} />
                   </Box>
                   <Text style="subtitle1" color="subtle">
@@ -292,7 +241,7 @@ export const MobileChainSelector: FC<MobileChainSelectorProps> = ({
                       <Text style="body3">Long-press to star a chain</Text>
                     }
                   >
-                    <Box css={{ color: 'gray9' }}>
+                    <Box className="relay-text-[color:var(--relay-colors-gray9)]">
                       <FontAwesomeIcon
                         icon={faInfoCircle}
                         width={14}
@@ -318,7 +267,7 @@ export const MobileChainSelector: FC<MobileChainSelectorProps> = ({
               </>
             )}
 
-            <Text style="subtitle1" color="subtle" css={{ py: '2' }}>
+            <Text style="subtitle1" color="subtle" className="relay-py-2">
               Chains A-Z
             </Text>
             {alphabeticalChains.map((chain) => {
@@ -453,19 +402,7 @@ const MobileChainRow: FC<MobileChainRowProps> = ({
         <Button
           color="ghost"
           size="none"
-          css={{
-            py: '3',
-            px: '2',
-            display: 'flex',
-            alignItems: 'center',
-            gap: '2',
-            width: '100%',
-            height: '56px',
-            borderRadius: '12px',
-            _hover: {
-              backgroundColor: 'gray3'
-            }
-          }}
+          className="relay-py-3 relay-px-2 relay-flex relay-items-center relay-gap-2 relay-w-full relay-h-[56px] relay-rounded-[12px] hover:relay-bg-[var(--relay-colors-gray3)]"
         >
           <AllChainsLogo style={{ width: 24, height: 24 }} />
           <Text style="subtitle1">{chain.name}</Text>
@@ -475,7 +412,7 @@ const MobileChainRow: FC<MobileChainRowProps> = ({
   }
 
   return (
-    <div style={{ position: 'relative', width: '100%' }}>
+    <div className="relay-relative relay-w-full">
       <AccessibleListItem value={value} asChild>
         <Button
           color="ghost"
@@ -493,30 +430,14 @@ const MobileChainRow: FC<MobileChainRowProps> = ({
           onTouchStart={handleTouchStart}
           onTouchEnd={handleTouchEnd}
           onTouchMove={handleTouchMove}
-          css={{
-            py: '3',
-            px: '2',
-            display: 'flex',
-            alignItems: 'center',
-            gap: '2',
-            width: '100%',
-            height: '56px',
-            borderRadius: '12px',
-            userSelect: 'none',
-            _hover: {
-              backgroundColor: 'gray3'
-            }
-          }}
-          style={{
-            WebkitUserSelect: 'none'
-          }}
+          className="relay-py-3 relay-px-2 relay-flex relay-items-center relay-gap-2 relay-w-full relay-h-[56px] relay-rounded-[12px] relay-select-none hover:relay-bg-[var(--relay-colors-gray3)]"
         >
           <ChainIcon chainId={chain.id} square width={24} height={24} />
-          <Text style="subtitle1" css={{ flex: 1, textAlign: 'left' }}>
+          <Text style="subtitle1" className="relay-flex-1 relay-text-left">
             {('displayName' in chain && chain.displayName) || chain.name}
           </Text>
           {showStar && isStarred && (
-            <Box css={{ color: 'primary9' }}>
+            <Box className="relay-text-[color:var(--relay-colors-primary9)]">
               <FontAwesomeIcon icon={faStar} width={16} height={16} />
             </Box>
           )}
@@ -527,14 +448,7 @@ const MobileChainRow: FC<MobileChainRowProps> = ({
       {dropdownOpen && (
         <div
           ref={dropdownRef}
-          style={{
-            position: 'absolute',
-            top: '100%',
-            left: 0,
-            marginTop: '4px',
-            minWidth: 160,
-            zIndex: 999999
-          }}
+          className="relay-absolute relay-top-full relay-left-0 relay-mt-1 relay-min-w-[160px] relay-z-[999999]"
           onClick={(e) => {
             e.stopPropagation()
             handleToggleStar()
@@ -543,28 +457,18 @@ const MobileChainRow: FC<MobileChainRowProps> = ({
           onTouchStart={(e) => e.stopPropagation()}
         >
           <Flex
-            css={{
-              alignItems: 'center',
-              gap: '8px',
-              padding: '8px',
-              borderRadius: 12,
-              cursor: 'pointer',
-              backgroundColor: 'gray1',
-              '--borderColor': 'colors.subtle-border-color',
-              border: '1px solid var(--borderColor)',
-              _hover: {
-                backgroundColor: 'gray2'
-              }
-            }}
+            className="relay-items-center relay-gap-[8px] relay-p-[8px] relay-rounded-[12px] relay-cursor-pointer relay-bg-[var(--relay-colors-gray1)] relay-border relay-border-solid relay-border-[var(--relay-colors-subtle-border-color)] hover:relay-bg-[var(--relay-colors-gray2)]"
           >
             <Box
-              css={{
-                color: isStarred ? 'gray8' : 'primary9'
-              }}
+              className={cn(
+                isStarred
+                  ? 'relay-text-[color:var(--relay-colors-gray8)]'
+                  : 'relay-text-[color:var(--relay-colors-primary9)]'
+              )}
             >
               <FontAwesomeIcon icon={faStar} width={16} height={16} />
             </Box>
-            <Text style="subtitle1" css={{ lineHeight: '20px' }}>
+            <Text style="subtitle1" className="relay-leading-[20px]">
               {isStarred ? 'Unstar chain' : 'Star chain'}
             </Text>
           </Flex>
diff --git a/packages/ui/src/components/common/TokenSelector/PaymentMethod.tsx b/packages/ui/src/components/common/TokenSelector/PaymentMethod.tsx
index 3904bc941..847fd17c8 100644
--- a/packages/ui/src/components/common/TokenSelector/PaymentMethod.tsx
+++ b/packages/ui/src/components/common/TokenSelector/PaymentMethod.tsx
@@ -494,51 +494,20 @@ const PaymentMethod: FC<PaymentMethodProps> = ({
   const paymentMethodContent = (
     <Flex
       direction="column"
-      css={{
-        width: '100%',
-        height: '100%',
-        gap: '3',
-        overflowY: 'hidden',
-        minWidth: 0,
-        maxWidth: '100%'
-      }}
+      className="relay-w-full relay-h-full relay-gap-3 relay-overflow-y-hidden relay-min-w-0 relay-max-w-full"
     >
       {/* Header with back button */}
-      <Flex align="center" css={{ gap: '1' }}>
+      <Flex align="center" className="relay-gap-1">
         <Button
           color="ghost"
           size="none"
           onClick={() => onOpenChange(false)}
-          css={{
-            py: '1',
-            px: '0',
-            minWidth: 'auto',
-            color: 'gray9',
-            cursor: 'pointer',
-            borderRadius: 8,
-            display: 'flex',
-            alignItems: 'center',
-            gap: '1',
-            '--focusColor': 'colors.focus-color',
-            _focusVisible: {
-              boxShadow: 'inset 0 0 0 2px var(--focusColor)'
-            },
-            '@media(min-width: 660px)': {
-              p: '0'
-            }
-          }}
+          className="relay-py-1 relay-px-0 relay-min-w-[auto] relay-text-[color:var(--relay-colors-gray9)] relay-cursor-pointer relay-rounded-[8px] relay-flex relay-items-center relay-gap-1 focus-visible:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)] min-[660px]:relay-p-0"
         >
           <FontAwesomeIcon icon={faChevronLeft} width={20} height={20} />
           <Text
             style="subtitle1"
-            css={{
-              color: 'text-subtle',
-              '@media(min-width: 660px)': {
-                fontSize: '14px',
-                color: 'text-default',
-                lineHeight: '20px'
-              }
-            }}
+            className="relay-text-[color:var(--relay-colors-text-subtle)] min-[660px]:relay-text-[14px] min-[660px]:relay-text-[color:var(--relay-colors-text-default)] min-[660px]:relay-leading-[20px]"
           >
             {context === 'from' ? 'Pay with' : 'Sell to'}
           </Text>
@@ -546,13 +515,7 @@ const PaymentMethod: FC<PaymentMethodProps> = ({
       </Flex>
 
       <Flex
-        css={{
-          flex: 1,
-          gap: '3',
-          overflow: 'hidden',
-          minWidth: 0,
-          maxWidth: '100%'
-        }}
+        className="relay-flex-1 relay-gap-3 relay-overflow-hidden relay-min-w-0 relay-max-w-full"
       >
         {/* Main Token Content */}
         <AccessibleList
@@ -575,53 +538,29 @@ const PaymentMethod: FC<PaymentMethodProps> = ({
               handleTokenSelection(selectedToken)
             }
           }}
-          css={{
-            display: 'flex',
-            flexDirection: 'column',
-            width: '100%',
-            minWidth: 0,
-            maxWidth: '100%',
-            height: '100%'
-          }}
+          className="relay-flex relay-flex-col relay-w-full relay-min-w-0 relay-max-w-full relay-h-full"
         >
           {/* Search Input Section - Fixed */}
           <Flex
             direction="column"
             align="start"
-            css={{
-              width: '100%',
-              gap: '2',
-              background: 'modal-background',
-              minWidth: 0,
-              maxWidth: '100%'
-            }}
+            className="relay-w-full relay-gap-2 relay-bg-[var(--relay-colors-modal-background)] relay-min-w-0 relay-max-w-full"
           >
             {/* Search input and Chain Filter Button Row */}
             <Flex
               align="center"
-              css={{
-                width: '100%',
-                gap: '2',
-                minWidth: 0,
-                alignItems: 'center',
-                height: 40
-              }}
+              className="relay-w-full relay-gap-2 relay-min-w-0 relay-items-center relay-h-[40px]"
             >
               <AccessibleListItem
                 value="input"
                 asChild
-                css={{
-                  flex: 1,
-                  minWidth: 0,
-                  display: 'flex',
-                  alignItems: 'center'
-                }}
+                className="relay-flex-1 relay-min-w-0 relay-flex relay-items-center"
               >
                 <Input
                   ref={setTokenSearchInputElement}
                   placeholder="Search for a token"
                   icon={
-                    <Box css={{ color: 'gray9' }}>
+                    <Box className="relay-text-[color:var(--relay-colors-gray9)]">
                       <FontAwesomeIcon
                         icon={faMagnifyingGlass}
                         width={16}
@@ -629,16 +568,8 @@ const PaymentMethod: FC<PaymentMethodProps> = ({
                       />
                     </Box>
                   }
-                  containerCss={{
-                    width: '100%',
-                    height: 40
-                  }}
-                  css={{
-                    width: '100%',
-                    _placeholder_parent: {
-                      textOverflow: 'ellipsis'
-                    }
-                  }}
+                  containerClassName="relay-w-full relay-h-[40px]"
+                  className="relay-w-full [&::placeholder]:relay-text-ellipsis"
                   onChange={(e) => {
                     const value = (e.target as HTMLInputElement).value
 
@@ -676,15 +607,8 @@ const PaymentMethod: FC<PaymentMethodProps> = ({
           <Flex
             key={chainFilter.id ?? 'all'}
             direction="column"
-            css={{
-              flex: 1,
-              overflowY: 'auto',
-              gap: '3',
-              pt: '2',
-              scrollbarColor: 'var(--relay-colors-gray5) transparent',
-              minWidth: 0,
-              maxWidth: '100%'
-            }}
+            className="relay-flex-1 relay-overflow-y-auto relay-gap-3 relay-pt-2 relay-min-w-0 relay-max-w-full"
+            style={{ scrollbarColor: 'var(--relay-colors-gray5) transparent' }}
           >
             {/* Suggested Tokens */}
             {chainFilter.id &&
@@ -720,7 +644,7 @@ const PaymentMethod: FC<PaymentMethodProps> = ({
                 chainFilterId={chainFilter.id}
               />
             ) : (
-              <Flex direction="column" css={{ gap: '3' }}>
+              <Flex direction="column" className="relay-gap-3">
                 {(() => {
                   const hasLoadedBalanceData = Boolean(duneTokens)
                   const userTokensReady = !isLoadingUserTokens
@@ -799,10 +723,10 @@ const PaymentMethod: FC<PaymentMethodProps> = ({
               <Flex
                 direction="column"
                 align="center"
-                css={{ py: '5', maxWidth: 312, alignSelf: 'center' }}
+                className="relay-py-5 relay-max-w-[312px] relay-self-center"
               >
                 {!chainFilter?.id && isSearchTermValidAddress && (
-                  <Box css={{ color: 'gray8', mb: '2' }}>
+                  <Box className="relay-text-[color:var(--relay-colors-gray8)] relay-mb-2">
                     <FontAwesomeIcon
                       icon={faFolderOpen}
                       size="xl"
@@ -814,7 +738,7 @@ const PaymentMethod: FC<PaymentMethodProps> = ({
                 <Text
                   color="subtle"
                   style="body2"
-                  css={{ textAlign: 'center' }}
+                  className="relay-text-center"
                 >
                   {!chainFilter?.id && isSearchTermValidAddress
                     ? 'No results. Switch to the desired chain to search by contract.'
@@ -836,18 +760,7 @@ const PaymentMethod: FC<PaymentMethodProps> = ({
           <div onClick={() => onOpenChange(true)}>{trigger}</div>
           {open && (
             <Box
-              css={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                zIndex: 100,
-                background: 'widget-background',
-                display: 'flex',
-                flexDirection: 'column',
-                overflow: 'hidden'
-              }}
+              className="relay-absolute relay-top-0 relay-left-0 relay-right-0 relay-bottom-0 relay-z-[100] relay-bg-[var(--relay-colors-widget-background)] relay-flex relay-flex-col relay-overflow-hidden"
             >
               {paymentMethodContent}
             </Box>
@@ -862,15 +775,11 @@ const PaymentMethod: FC<PaymentMethodProps> = ({
           onOpenChange={onOpenChange}
           showCloseButton={false}
           trigger={trigger}
-          css={{
-            p: '4',
-            display: 'flex',
-            flexDirection: 'column',
+          className="relay-p-4 relay-flex relay-flex-col relay-min-w-0 relay-box-border"
+          contentStyle={{
             height: 'min(85vh, 540px)',
             width: 'min(400px, 100vw)',
-            maxWidth: 'min(400px, 100vw)',
-            minWidth: 0,
-            boxSizing: 'border-box'
+            maxWidth: 'min(400px, 100vw)'
           }}
         >
           {paymentMethodContent}
diff --git a/packages/ui/src/components/common/TokenSelector/PaymentTokenList.tsx b/packages/ui/src/components/common/TokenSelector/PaymentTokenList.tsx
index e11390aa1..dd5242e68 100644
--- a/packages/ui/src/components/common/TokenSelector/PaymentTokenList.tsx
+++ b/packages/ui/src/components/common/TokenSelector/PaymentTokenList.tsx
@@ -15,6 +15,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons'
 import { formatBN, formatDollar } from '../../../utils/numbers.js'
 import type { EnhancedToken } from '../../../hooks/useEnhancedTokensList.js'
+import { cn } from '../../../utils/cn.js'
 
 type PaymentTokenListProps = {
   title: string
@@ -50,27 +51,14 @@ export const PaymentTokenList: FC<PaymentTokenListProps> = ({
           <Flex
             key={index}
             align="center"
-            css={{
-              gap: '2',
-              py: '2',
-              px: '0',
-              width: '100%',
-              '@media(min-width: 660px)': {
-                px: '2'
-              }
-            }}
+            className="relay-gap-2 relay-py-2 relay-px-0 relay-w-full min-[660px]:relay-px-2"
           >
             <Skeleton
-              css={{
-                width: 40,
-                height: 40,
-                borderRadius: '50%',
-                flexShrink: 0
-              }}
+              className="relay-w-[40px] relay-h-[40px] relay-rounded-[50%] relay-shrink-0"
             />
-            <Flex direction="column" css={{ gap: '2px', flexGrow: 1 }}>
-              <Skeleton css={{ width: '60%', height: 16 }} />
-              <Skeleton css={{ width: '40%', height: 16 }} />
+            <Flex direction="column" className="relay-gap-[2px] relay-grow">
+              <Skeleton className="relay-w-[60%] relay-h-[16px]" />
+              <Skeleton className="relay-w-[40%] relay-h-[16px]" />
             </Flex>
           </Flex>
         ))}
@@ -80,7 +68,7 @@ export const PaymentTokenList: FC<PaymentTokenListProps> = ({
 
   if (tokens.length > 0)
     return (
-      <Flex direction="column" css={{ gap: '1', width: '100%' }}>
+      <Flex direction="column" className="relay-gap-1 relay-w-full">
         <Text style="subtitle2" color="subtle">
           {title}
         </Text>
@@ -96,38 +84,8 @@ export const PaymentTokenList: FC<PaymentTokenListProps> = ({
             <AccessibleListItem value={value} key={value} asChild>
               <Button
                 color="ghost"
-                css={{
-                  gap: '2',
-                  cursor: 'pointer',
-                  px: '0',
-                  py: '2',
-                  transition: 'backdrop-filter 250ms linear',
-                  '@media(min-width: 660px)': {
-                    px: '2'
-                  },
-                  _hover: {
-                    backgroundColor: 'gray/10'
-                  },
-                  flexShrink: 0,
-                  alignContent: 'center',
-                  display: 'flex',
-                  width: '100%',
-                  '--focusColor': 'colors.focus-color',
-                  _focusVisible: {
-                    boxShadow: 'inset 0 0 0 2px var(--focusColor)'
-                  },
-                  '&[data-state="on"]': {
-                    boxShadow: 'inset 0 0 0 2px var(--focusColor)'
-                  },
-                  _active: {
-                    boxShadow: 'inset 0 0 0 2px var(--focusColor)'
-                  },
-                  _focusWithin: {
-                    boxShadow: 'inset 0 0 0 2px var(--focusColor)'
-                  },
-                  scrollSnapAlign: 'start',
-                  opacity
-                }}
+                className="relay-gap-2 relay-cursor-pointer relay-px-0 relay-py-2 relay-transition-[backdrop-filter] relay-duration-[250ms] relay-ease-linear min-[660px]:relay-px-2 hover:relay-bg-[rgba(var(--relay-colors-gray-rgb,0,0,0),0.1)] relay-shrink-0 relay-content-center relay-flex relay-w-full focus-visible:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)] [&[data-state=on]]:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)] active:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)] focus-within:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)] relay-snap-start"
+                style={{ opacity }}
               >
                 <ChainTokenIcon
                   chainId={token.chainId}
@@ -138,40 +96,26 @@ export const PaymentTokenList: FC<PaymentTokenListProps> = ({
                 <Flex
                   direction="column"
                   align="start"
-                  css={{ gap: '2px', maxWidth: '100%', minWidth: 0 }}
+                  className="relay-gap-[2px] relay-max-w-full relay-min-w-0"
                 >
-                  <Flex align="center" css={{ gap: '1', maxWidth: '100%' }}>
+                  <Flex align="center" className="relay-gap-1 relay-max-w-full">
                     <Text
                       style="h6"
                       ellipsify
-                      css={{
-                        gap: '1',
-                        alignItems: 'center'
-                      }}
+                      className="relay-gap-1 relay-items-center"
                     >
                       {token.symbol}
                     </Text>
                     {token.isGasCurrency && chainFilterId && (
                       <Text
                         style="subtitle3"
-                        css={{
-                          px: '6px',
-                          py: '4px',
-                          borderRadius: '100px',
-                          backgroundColor: 'gray3',
-                          whiteSpace: 'nowrap',
-                          flexShrink: 0,
-                          lineHeight: '12px',
-                          'button:hover &': {
-                            backgroundColor: 'gray5'
-                          }
-                        }}
+                        className="relay-px-[6px] relay-py-[4px] relay-rounded-[100px] relay-bg-[var(--relay-colors-gray3)] relay-whitespace-nowrap relay-shrink-0 relay-leading-[12px] [button:hover_&]:relay-bg-[var(--relay-colors-gray5)]"
                       >
                         Gas Token
                       </Text>
                     )}
                   </Flex>
-                  <Flex align="center" css={{ gap: '1', maxWidth: '100%' }}>
+                  <Flex align="center" className="relay-gap-1 relay-max-w-full">
                     <Text style="subtitle3" color="subtle" ellipsify>
                       {token.chain?.displayName ||
                         token.chain?.name ||
@@ -179,7 +123,7 @@ export const PaymentTokenList: FC<PaymentTokenListProps> = ({
                     </Text>
 
                     {!token.verified ? (
-                      <Box css={{ color: 'gray8' }}>
+                      <Box className="relay-text-[color:var(--relay-colors-gray8)]">
                         <FontAwesomeIcon
                           icon={faExclamationTriangle}
                           width={14}
@@ -194,12 +138,12 @@ export const PaymentTokenList: FC<PaymentTokenListProps> = ({
                   <Flex
                     direction="column"
                     align="end"
-                    css={{ gap: '2px', ml: 'auto', flexShrink: 0 }}
+                    className="relay-gap-[2px] relay-ml-auto relay-shrink-0"
                   >
                     {isLoadingBalances ? (
                       <>
-                        <Skeleton css={{ ml: 'auto', width: 60 }} />
-                        <Skeleton css={{ ml: 'auto', width: 60 }} />
+                        <Skeleton className="relay-ml-auto relay-w-[60px]" />
+                        <Skeleton className="relay-ml-auto relay-w-[60px]" />
                       </>
                     ) : (
                       <>
@@ -231,7 +175,7 @@ export const PaymentTokenList: FC<PaymentTokenListProps> = ({
             color="grey"
             size="small"
             corners="pill"
-            css={{ ml: 'auto', minHeight: 24, px: '2', py: '1' }}
+            className="relay-ml-auto relay-min-h-[24px] relay-px-2 relay-py-1"
             onClick={() => setTokensExpanded(!tokensExpanded)}
           >
             <Text style="subtitle3" color="subtle">
@@ -239,12 +183,10 @@ export const PaymentTokenList: FC<PaymentTokenListProps> = ({
             </Text>
             <Text
               style="body1"
-              css={{
-                color: 'gray9',
-                marginLeft: 'auto',
-                transform: tokensExpanded ? 'rotate(180deg)' : 'rotate(0)',
-                width: 12
-              }}
+              className={cn(
+                'relay-text-[color:var(--relay-colors-gray9)] relay-ml-auto relay-w-[12px]',
+                tokensExpanded ? 'relay-rotate-180' : 'relay-rotate-0'
+              )}
             >
               <FontAwesomeIcon icon={faChevronDown} />
             </Text>
diff --git a/packages/ui/src/components/common/TokenSelector/SuggestedTokens.tsx b/packages/ui/src/components/common/TokenSelector/SuggestedTokens.tsx
index 4761e4002..d3a9c077e 100644
--- a/packages/ui/src/components/common/TokenSelector/SuggestedTokens.tsx
+++ b/packages/ui/src/components/common/TokenSelector/SuggestedTokens.tsx
@@ -46,13 +46,7 @@ export const SuggestedTokens: FC<SuggestedTokensProps> = ({
 
   return (
     <Flex
-      css={{
-        width: '100%',
-        alignItems: 'center',
-        flexWrap: 'wrap',
-        gap: '1',
-        my: '2'
-      }}
+      className="relay-w-full relay-items-center relay-flex-wrap relay-gap-1 relay-my-2"
     >
       {suggestedTokens.map((token, idx) => (
         <AccessibleListItem
@@ -69,32 +63,7 @@ export const SuggestedTokens: FC<SuggestedTokensProps> = ({
             }}
             color="ghost"
             size="none"
-            css={{
-              display: 'flex',
-              flexShrink: 0,
-              cursor: 'pointer',
-              outline: 'none',
-              p: '1',
-              pr: '2',
-              gap: 1,
-              alignItems: 'center',
-              '--borderColor': 'colors.gray5',
-              border: '1px solid var(--borderColor)',
-              borderRadius: '100px',
-              '--focusColor': 'colors.focus-color',
-              _focusVisible: {
-                boxShadow: 'inset 0 0 0 2px var(--focusColor)'
-              },
-              '&[data-state="on"]': {
-                boxShadow: 'inset 0 0 0 2px var(--focusColor)'
-              },
-              _active: {
-                boxShadow: 'inset 0 0 0 2px var(--focusColor)'
-              },
-              _focusWithin: {
-                boxShadow: 'inset 0 0 0 2px var(--focusColor)'
-              }
-            }}
+            className="relay-flex relay-shrink-0 relay-cursor-pointer relay-outline-none relay-p-1 relay-pr-2 relay-gap-[1px] relay-items-center relay-border relay-border-solid relay-border-[var(--relay-colors-gray5)] relay-rounded-[100px] focus-visible:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)] [&[data-state=on]]:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)] active:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)] focus-within:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)]"
           >
             <ChainTokenIcon
               chainId={token.chainId}
diff --git a/packages/ui/src/components/common/TokenSelector/TagPill.tsx b/packages/ui/src/components/common/TokenSelector/TagPill.tsx
index 378577af6..b40923610 100644
--- a/packages/ui/src/components/common/TokenSelector/TagPill.tsx
+++ b/packages/ui/src/components/common/TokenSelector/TagPill.tsx
@@ -9,15 +9,7 @@ export const TagPill: FC<TagPillProps> = ({ tag }) => {
   return (
     <Text
       style="subtitle3"
-      css={{
-        backgroundColor: 'primary5',
-        color: 'primary11',
-        px: '6px',
-        py: '4px',
-        borderRadius: '100px',
-        fontStyle: 'italic',
-        lineHeight: '100%'
-      }}
+      className="relay-bg-[var(--relay-colors-primary5)] relay-text-[color:var(--relay-colors-primary11)] relay-px-[6px] relay-py-[4px] relay-rounded-[100px] relay-italic relay-leading-[100%]"
     >
       {tag}
     </Text>
diff --git a/packages/ui/src/components/common/TokenSelector/TokenList.tsx b/packages/ui/src/components/common/TokenSelector/TokenList.tsx
index 1ebfce571..501c85019 100644
--- a/packages/ui/src/components/common/TokenSelector/TokenList.tsx
+++ b/packages/ui/src/components/common/TokenSelector/TokenList.tsx
@@ -17,6 +17,7 @@ import {
 import { formatBN, formatDollar } from '../../../utils/numbers.js'
 import { truncateAddress } from '../../../utils/truncate.js'
 import type { EnhancedToken } from '../../../hooks/useEnhancedTokensList.js'
+import { cn } from '../../../utils/cn.js'
 
 type TokenListProps = {
   title: string
@@ -48,19 +49,14 @@ export const TokenList: FC<TokenListProps> = ({
           <Flex
             key={index}
             align="center"
-            css={{ gap: '2', p: '2', width: '100%' }}
+            className="relay-gap-2 relay-p-2 relay-w-full"
           >
             <Skeleton
-              css={{
-                width: 40,
-                height: 40,
-                borderRadius: '50%',
-                flexShrink: 0
-              }}
+              className="relay-w-[40px] relay-h-[40px] relay-rounded-[50%] relay-shrink-0"
             />
-            <Flex direction="column" css={{ gap: '2px', flexGrow: 1 }}>
-              <Skeleton css={{ width: '60%', height: 16 }} />
-              <Skeleton css={{ width: '40%', height: 16 }} />
+            <Flex direction="column" className="relay-gap-[2px] relay-grow">
+              <Skeleton className="relay-w-[60%] relay-h-[16px]" />
+              <Skeleton className="relay-w-[40%] relay-h-[16px]" />
             </Flex>
           </Flex>
         ))}
@@ -70,7 +66,7 @@ export const TokenList: FC<TokenListProps> = ({
 
   if (tokens.length > 0)
     return (
-      <Flex direction="column" css={{ gap: '1', width: '100%' }}>
+      <Flex direction="column" className="relay-gap-1 relay-w-full">
         <Text style="subtitle2" color="subtle">
           {title}
         </Text>
@@ -86,34 +82,7 @@ export const TokenList: FC<TokenListProps> = ({
             <AccessibleListItem value={value} key={value} asChild>
               <Button
                 color="ghost"
-                css={{
-                  gap: '2',
-                  cursor: 'pointer',
-                  px: '2',
-                  py: '2',
-                  transition: 'backdrop-filter 250ms linear',
-                  _hover: {
-                    backgroundColor: 'gray/10'
-                  },
-                  flexShrink: 0,
-                  alignContent: 'center',
-                  display: 'flex',
-                  width: '100%',
-                  '--focusColor': 'colors.focus-color',
-                  _focusVisible: {
-                    boxShadow: 'inset 0 0 0 2px var(--focusColor)'
-                  },
-                  '&[data-state="on"]': {
-                    boxShadow: 'inset 0 0 0 2px var(--focusColor)'
-                  },
-                  _active: {
-                    boxShadow: 'inset 0 0 0 2px var(--focusColor)'
-                  },
-                  _focusWithin: {
-                    boxShadow: 'inset 0 0 0 2px var(--focusColor)'
-                  },
-                  scrollSnapAlign: 'start'
-                }}
+                className="relay-gap-2 relay-cursor-pointer relay-px-2 relay-py-2 relay-transition-[backdrop-filter] relay-duration-[250ms] relay-ease-linear hover:relay-bg-[rgba(var(--relay-colors-gray-rgb,0,0,0),0.1)] relay-shrink-0 relay-content-center relay-flex relay-w-full focus-visible:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)] [&[data-state=on]]:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)] active:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)] focus-within:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)] relay-snap-start"
               >
                 <ChainTokenIcon
                   chainId={token.chainId}
@@ -124,40 +93,26 @@ export const TokenList: FC<TokenListProps> = ({
                 <Flex
                   direction="column"
                   align="start"
-                  css={{ gap: '2px', maxWidth: '100%', minWidth: 0 }}
+                  className="relay-gap-[2px] relay-max-w-full relay-min-w-0"
                 >
-                  <Flex align="center" css={{ gap: '1', maxWidth: '100%' }}>
+                  <Flex align="center" className="relay-gap-1 relay-max-w-full">
                     <Text
                       style="h6"
                       ellipsify
-                      css={{
-                        gap: '1',
-                        alignItems: 'center'
-                      }}
+                      className="relay-gap-1 relay-items-center"
                     >
                       {token.symbol}
                     </Text>
                     {token.isGasCurrency && chainFilterId && (
                       <Text
                         style="subtitle3"
-                        css={{
-                          px: '6px',
-                          py: '4px',
-                          borderRadius: '100px',
-                          backgroundColor: 'gray3',
-                          whiteSpace: 'nowrap',
-                          flexShrink: 0,
-                          lineHeight: '12px',
-                          'button:hover &': {
-                            backgroundColor: 'gray5'
-                          }
-                        }}
+                        className="relay-px-[6px] relay-py-[4px] relay-rounded-[100px] relay-bg-[var(--relay-colors-gray3)] relay-whitespace-nowrap relay-shrink-0 relay-leading-[12px] [button:hover_&]:relay-bg-[var(--relay-colors-gray5)]"
                       >
                         Gas Token
                       </Text>
                     )}
                   </Flex>
-                  <Flex align="center" css={{ gap: '1', maxWidth: '100%' }}>
+                  <Flex align="center" className="relay-gap-1 relay-max-w-full">
                     <Text
                       style="subtitle3"
                       color={chainFilterId ? 'subtle' : undefined}
@@ -172,13 +127,13 @@ export const TokenList: FC<TokenListProps> = ({
                       style="subtitle3"
                       color="subtle"
                       ellipsify
-                      css={{ textWrap: 'nowrap' }}
+                      className="relay-whitespace-nowrap"
                     >
                       {truncateAddress(token.address)}
                     </Text>
 
                     {!token.verified ? (
-                      <Box css={{ color: 'gray8' }}>
+                      <Box className="relay-text-[color:var(--relay-colors-gray8)]">
                         <FontAwesomeIcon
                           icon={faExclamationTriangle}
                           width={14}
@@ -193,12 +148,12 @@ export const TokenList: FC<TokenListProps> = ({
                   <Flex
                     direction="column"
                     align="end"
-                    css={{ gap: '2px', ml: 'auto', flexShrink: 0 }}
+                    className="relay-gap-[2px] relay-ml-auto relay-shrink-0"
                   >
                     {isLoadingBalances ? (
                       <>
-                        <Skeleton css={{ ml: 'auto', width: 60 }} />
-                        <Skeleton css={{ ml: 'auto', width: 60 }} />
+                        <Skeleton className="relay-ml-auto relay-w-[60px]" />
+                        <Skeleton className="relay-ml-auto relay-w-[60px]" />
                       </>
                     ) : (
                       <>
@@ -230,7 +185,7 @@ export const TokenList: FC<TokenListProps> = ({
             color="grey"
             size="small"
             corners="pill"
-            css={{ ml: 'auto', minHeight: 24, px: '2', py: '1' }}
+            className="relay-ml-auto relay-min-h-[24px] relay-px-2 relay-py-1"
             onClick={() => setTokensExpanded(!tokensExpanded)}
           >
             <Text style="subtitle3" color="subtle">
@@ -238,12 +193,10 @@ export const TokenList: FC<TokenListProps> = ({
             </Text>
             <Text
               style="body1"
-              css={{
-                color: 'gray9',
-                marginLeft: 'auto',
-                transform: tokensExpanded ? 'rotate(180deg)' : 'rotate(0)',
-                width: 12
-              }}
+              className={cn(
+                'relay-text-[color:var(--relay-colors-gray9)] relay-ml-auto relay-w-[12px]',
+                tokensExpanded ? 'relay-rotate-180' : 'relay-rotate-0'
+              )}
             >
               <FontAwesomeIcon icon={faChevronDown} />
             </Text>
diff --git a/packages/ui/src/components/common/TokenSelector/TokenSelector.tsx b/packages/ui/src/components/common/TokenSelector/TokenSelector.tsx
index fb71483f9..6d37e6c6d 100644
--- a/packages/ui/src/components/common/TokenSelector/TokenSelector.tsx
+++ b/packages/ui/src/components/common/TokenSelector/TokenSelector.tsx
@@ -575,26 +575,21 @@ const TokenSelector: FC<TokenSelectorProps> = ({
             }
           }}
           trigger={trigger}
-          css={{
-            p: '4',
-            display: 'flex',
-            flexDirection: 'column',
+          className="relay-p-4 relay-flex relay-flex-col relay-w-full relay-max-w-full sm:relay-max-w-full"
+          contentStyle={{
             height: isDesktop ? 'min(85vh, 600px)' : '100%',
             maxHeight: isDesktop ? 'min(85vh, 600px)' : '100%',
-            borderRadius: isDesktop ? 'modal-border-radius' : '0px',
-            width: '100%',
-            maxWidth: '100%',
-            sm: {
-              maxWidth: '100%'
-            },
-            '@media(min-width: 660px)': {
-              minWidth: isDesktop
-                ? hasMultipleConfiguredChainIds
-                  ? 660
-                  : 408
-                : 400,
-              maxWidth: isDesktop && hasMultipleConfiguredChainIds ? 660 : 408
-            }
+            borderRadius: isDesktop ? 'var(--relay-radii-modal-border-radius)' : '0px',
+            minWidth: isDesktop
+              ? hasMultipleConfiguredChainIds
+                ? 660
+                : 408
+              : undefined,
+            maxWidth: isDesktop
+              ? hasMultipleConfiguredChainIds
+                ? 660
+                : 408
+              : undefined
           }}
         >
           {!isDesktop && mobileView === 'chains' ? (
@@ -617,16 +612,11 @@ const TokenSelector: FC<TokenSelectorProps> = ({
           ) : (
             <Flex
               direction="column"
-              css={{
-                width: '100%',
-                height: '100%',
-                gap: '3',
-                overflowY: 'hidden'
-              }}
+              className="relay-w-full relay-h-full relay-gap-3 relay-overflow-y-hidden"
             >
               {isDesktop && <Text style="h6">Select Token</Text>}
 
-              <Flex css={{ flex: 1, gap: '3', overflow: 'hidden' }}>
+              <Flex className="relay-flex-1 relay-gap-3 relay-overflow-hidden">
                 {/* Desktop Chain Filter Sidebar */}
                 {isDesktop &&
                 (!configuredChainIds || hasMultipleConfiguredChainIds) ? (
@@ -667,37 +657,24 @@ const TokenSelector: FC<TokenSelectorProps> = ({
                       handleTokenSelection(selectedToken)
                     }
                   }}
-                  css={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    width: '100%',
-                    minWidth: 0,
-                    height: '100%'
-                  }}
+                  className="relay-flex relay-flex-col relay-w-full relay-min-w-0 relay-h-full"
                 >
                   {/* Search Input Section - Fixed */}
                   <Flex
                     direction="column"
                     align="start"
-                    css={{
-                      width: '100%',
-                      gap: '2',
-                      background: 'modal-background'
-                    }}
+                    className="relay-w-full relay-gap-2 relay-bg-[var(--relay-colors-modal-background)]"
                   >
                     <Flex
                       align="center"
-                      css={{
-                        width: '100%',
-                        gap: '2'
-                      }}
+                      className="relay-w-full relay-gap-2"
                     >
                       <AccessibleListItem value="input" asChild>
                         <Input
                           ref={setTokenSearchInputElement}
                           placeholder="Search for a token or paste address"
                           icon={
-                            <Box css={{ color: 'gray9' }}>
+                            <Box className="relay-text-[color:var(--relay-colors-gray9)]">
                               <FontAwesomeIcon
                                 icon={faMagnifyingGlass}
                                 width={16}
@@ -705,17 +682,8 @@ const TokenSelector: FC<TokenSelectorProps> = ({
                               />
                             </Box>
                           }
-                          containerCss={{
-                            width: '100%',
-                            height: 40,
-                            mb: isDesktop ? '1' : '0'
-                          }}
-                          css={{
-                            width: '100%',
-                            _placeholder_parent: {
-                              textOverflow: 'ellipsis'
-                            }
-                          }}
+                          containerClassName={`relay-w-full relay-h-[40px] ${isDesktop ? 'relay-mb-1' : 'relay-mb-0'}`}
+                          className="relay-w-full [&::placeholder]:relay-text-ellipsis"
                           value={tokenSearchInput}
                           onChange={(e) => {
                             const value = (e.target as HTMLInputElement).value
@@ -740,16 +708,7 @@ const TokenSelector: FC<TokenSelectorProps> = ({
                           color="ghost"
                           size="none"
                           onClick={() => onOpenChange(false)}
-                          css={{
-                            p: '2',
-                            borderRadius: '8px',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            minWidth: '40px',
-                            height: '40px',
-                            color: 'gray9'
-                          }}
+                          className="relay-p-2 relay-rounded-[8px] relay-flex relay-items-center relay-justify-center relay-min-w-[40px] relay-h-[40px] relay-text-[color:var(--relay-colors-gray9)]"
                         >
                           <FontAwesomeIcon
                             icon={faXmark}
@@ -777,11 +736,7 @@ const TokenSelector: FC<TokenSelectorProps> = ({
                     {!isDesktop && chainFilter.id !== undefined ? (
                       <Flex
                         align="center"
-                        css={{
-                          gap: '2',
-                          pb: '1',
-                          width: '100%'
-                        }}
+                        className="relay-gap-2 relay-pb-1 relay-w-full"
                       >
                         <Text style="subtitle2" color="subtle">
                           Tokens on{' '}
@@ -797,14 +752,8 @@ const TokenSelector: FC<TokenSelectorProps> = ({
                   <Flex
                     key={chainFilter.id ?? 'all'}
                     direction="column"
-                    css={{
-                      flex: 1,
-                      overflowY: 'auto',
-                      gap: '3',
-                      pt:
-                        !isDesktop && chainFilter.id !== undefined ? '0' : '2',
-                      scrollbarColor: 'var(--relay-colors-gray5) transparent'
-                    }}
+                    className={`relay-flex-1 relay-overflow-y-auto relay-gap-3 ${!isDesktop && chainFilter.id !== undefined ? 'relay-pt-0' : 'relay-pt-2'}`}
+                    style={{ scrollbarColor: 'var(--relay-colors-gray5) transparent' }}
                   >
                     {/* Suggested Tokens */}
                     {chainFilter.id &&
@@ -832,7 +781,7 @@ const TokenSelector: FC<TokenSelectorProps> = ({
                         chainFilterId={chainFilter.id}
                       />
                     ) : (
-                      <Flex direction="column" css={{ gap: '3' }}>
+                      <Flex direction="column" className="relay-gap-3">
                         {[
                           {
                             title: 'Your Tokens',
@@ -887,10 +836,10 @@ const TokenSelector: FC<TokenSelectorProps> = ({
                       <Flex
                         direction="column"
                         align="center"
-                        css={{ py: '5', maxWidth: 312, alignSelf: 'center' }}
+                        className="relay-py-5 relay-max-w-[312px] relay-self-center"
                       >
                         {!chainFilter?.id && isSearchTermValidAddress && (
-                          <Box css={{ color: 'gray8', mb: '2' }}>
+                          <Box className="relay-text-[color:var(--relay-colors-gray8)] relay-mb-2">
                             <FontAwesomeIcon
                               icon={faFolderOpen}
                               size="xl"
@@ -902,7 +851,7 @@ const TokenSelector: FC<TokenSelectorProps> = ({
                         <Text
                           color="subtle"
                           style="body2"
-                          css={{ textAlign: 'center' }}
+                          className="relay-text-center"
                         >
                           {!chainFilter?.id && isSearchTermValidAddress
                             ? 'No results. Switch to the desired chain to search by contract.'
diff --git a/packages/ui/src/components/common/TokenSelector/triggers/PaymentMethodTrigger.tsx b/packages/ui/src/components/common/TokenSelector/triggers/PaymentMethodTrigger.tsx
index 7faac658c..8767d91d2 100644
--- a/packages/ui/src/components/common/TokenSelector/triggers/PaymentMethodTrigger.tsx
+++ b/packages/ui/src/components/common/TokenSelector/triggers/PaymentMethodTrigger.tsx
@@ -78,67 +78,47 @@ export const PaymentMethodTrigger: FC<PaymentMethodTriggerProps> = ({
     <Button
       color="white"
       corners="pill"
-      css={{
-        height: 50,
-        minHeight: 50,
-        width: '220px',
-        flexShrink: 0,
-        overflow: 'hidden',
-        borderRadius: '12px',
-        padding: '12px',
-        backgroundColor: 'widget-selector-background',
-        border: 'none',
-        _hover: {
-          backgroundColor: 'widget-selector-hover-background'
-        }
-      }}
+      className="relay-h-[50px] relay-min-h-[50px] relay-w-[220px] relay-shrink-0 relay-overflow-hidden relay-rounded-[12px] relay-p-[12px] relay-bg-[var(--relay-colors-widget-selector-background)] relay-border-none hover:relay-bg-[var(--relay-colors-widget-selector-hover-background)]"
       data-testid={testId}
     >
-      <Flex align="center" justify="between" css={{ width: '100%' }}>
-        <Flex align="center" css={{ gap: '2' }}>
+      <Flex align="center" justify="between" className="relay-w-full">
+        <Flex align="center" className="relay-gap-2">
           <ChainTokenIcon
             chainId={token.chainId}
             tokenlogoURI={token.logoURI}
             tokenSymbol={token.symbol}
             chainIconSize={14}
-            css={{ width: 32, height: 32 }}
+            className="relay-w-[32px] relay-h-[32px]"
           />
           <Flex
             direction="column"
             align="start"
-            css={{ maxWidth: 150, minWidth: 60, flex: 1, gap: '4px' }}
+            className="relay-max-w-[150px] relay-min-w-[60px] relay-flex-1 relay-gap-[4px]"
           >
             <Text
               style="h6"
               ellipsify
-              css={{ maxWidth: '100%', lineHeight: 'normal' }}
+              className="relay-max-w-full relay-leading-normal"
             >
               {token.symbol}
             </Text>
             {showSkeleton ? (
               <Skeleton
-                css={{
-                  width: 70,
-                  height: 12,
-                  borderRadius: 4
-                }}
+                className="relay-w-[70px] relay-h-[12px] relay-rounded-[4px]"
               />
             ) : (
               <Text
                 style="subtitle3"
                 color="subtle"
                 ellipsify
-                css={{
-                  lineHeight: 'normal',
-                  maxWidth: '100%'
-                }}
+                className="relay-leading-normal relay-max-w-full"
               >
                 {balanceText}
               </Text>
             )}
           </Flex>
         </Flex>
-        <Box css={{ color: 'gray9', width: 14, flexShrink: 0 }}>
+        <Box className="relay-text-[color:var(--relay-colors-gray9)] relay-w-[14px] relay-shrink-0">
           <FontAwesomeIcon icon={faChevronRight} width={14} />
         </Box>
       </Flex>
@@ -147,25 +127,12 @@ export const PaymentMethodTrigger: FC<PaymentMethodTriggerProps> = ({
     <Button
       color="white"
       corners="pill"
-      css={{
-        height: 50,
-        minHeight: 50,
-        width: '220px',
-        flexShrink: 0,
-        overflow: 'hidden',
-        borderRadius: '12px',
-        padding: '12px',
-        backgroundColor: 'widget-selector-background',
-        border: 'none',
-        _hover: {
-          backgroundColor: 'widget-selector-hover-background'
-        }
-      }}
+      className="relay-h-[50px] relay-min-h-[50px] relay-w-[220px] relay-shrink-0 relay-overflow-hidden relay-rounded-[12px] relay-p-[12px] relay-bg-[var(--relay-colors-widget-selector-background)] relay-border-none hover:relay-bg-[var(--relay-colors-widget-selector-hover-background)]"
       data-testid={testId}
     >
-      <Flex align="center" justify="between" css={{ width: '100%' }}>
+      <Flex align="center" justify="between" className="relay-w-full">
         <Text style="h6">Select a token</Text>
-        <Box css={{ color: 'gray9', width: 14, flexShrink: 0 }}>
+        <Box className="relay-text-[color:var(--relay-colors-gray9)] relay-w-[14px] relay-shrink-0">
           <FontAwesomeIcon icon={faChevronRight} width={14} />
         </Box>
       </Flex>
diff --git a/packages/ui/src/components/common/TokenSelector/triggers/TokenTrigger.tsx b/packages/ui/src/components/common/TokenSelector/triggers/TokenTrigger.tsx
index cca526b9f..ae7006378 100644
--- a/packages/ui/src/components/common/TokenSelector/triggers/TokenTrigger.tsx
+++ b/packages/ui/src/components/common/TokenSelector/triggers/TokenTrigger.tsx
@@ -33,52 +33,36 @@ export const TokenTrigger: FC<TokenTriggerProps> = ({
       color="white"
       corners="pill"
       disabled={locked}
-      css={{
-        height: 50,
-        minHeight: 50,
-        width: 'max-content',
-        flexShrink: 0,
-        overflow: 'hidden',
-        px: '3',
-        py: '2',
-        backgroundColor: 'widget-selector-background',
-        border: 'none',
-        _hover: {
-          backgroundColor: 'widget-selector-hover-background'
-        },
-        _disabled: {
-          backgroundColor: 'widget-selector-background'
-        }
-      }}
+      className="relay-h-[50px] relay-min-h-[50px] relay-w-max relay-shrink-0 relay-overflow-hidden relay-px-3 relay-py-2 relay-bg-[var(--relay-colors-widget-selector-background)] relay-border-none hover:relay-bg-[var(--relay-colors-widget-selector-hover-background)] disabled:relay-bg-[var(--relay-colors-widget-selector-background)]"
       data-testid={testId}
     >
-      <Flex align="center" css={{ gap: '2' }}>
+      <Flex align="center" className="relay-gap-2">
         <ChainTokenIcon
           chainId={token.chainId}
           tokenlogoURI={token.logoURI}
           tokenSymbol={token.symbol}
-          css={{ width: 32, height: 32 }}
+          className="relay-w-[32px] relay-h-[32px]"
         />
         <Flex
           direction="column"
           align="start"
-          css={{ maxWidth: 100, minWidth: 60 }}
+          className="relay-max-w-[100px] relay-min-w-[60px]"
         >
-          <Text style="h6" ellipsify css={{ maxWidth: '100%' }}>
+          <Text style="h6" ellipsify className="relay-max-w-full">
             {token.symbol}
           </Text>
           <Text
             style="subtitle3"
             ellipsify
             color="subtle"
-            css={{ lineHeight: '15px', maxWidth: '100%' }}
+            className="relay-leading-[15px] relay-max-w-full"
           >
             {chain?.displayName}
           </Text>
         </Flex>
       </Flex>
       {locked ? null : (
-        <Box css={{ color: 'gray11', width: 14, flexShrink: 0 }}>
+        <Box className="relay-text-[color:var(--relay-colors-gray11)] relay-w-[14px] relay-shrink-0">
           <FontAwesomeIcon icon={faChevronRight} width={14} />
         </Box>
       )}
@@ -88,20 +72,10 @@ export const TokenTrigger: FC<TokenTriggerProps> = ({
       color={address ? 'primary' : 'secondary'}
       corners="pill"
       cta={true}
-      css={{
-        height: 50,
-        minHeight: 50,
-        width: 'max-content',
-        flexShrink: 0,
-        overflow: 'hidden',
-        px: '3',
-        py: '2',
-        fontWeight: 700,
-        fontSize: '16px'
-      }}
+      className="relay-h-[50px] relay-min-h-[50px] relay-w-max relay-shrink-0 relay-overflow-hidden relay-px-3 relay-py-2 relay-font-bold relay-text-[16px]"
     >
       Select Token
-      <Box css={{ width: 14 }}>
+      <Box className="relay-w-[14px]">
         <FontAwesomeIcon icon={faChevronRight} width={14} />
       </Box>
     </Button>
diff --git a/packages/ui/src/components/common/TransactionModal/DepositAddressModal.tsx b/packages/ui/src/components/common/TransactionModal/DepositAddressModal.tsx
index 60aa15a82..78d461d3e 100644
--- a/packages/ui/src/components/common/TransactionModal/DepositAddressModal.tsx
+++ b/packages/ui/src/components/common/TransactionModal/DepositAddressModal.tsx
@@ -167,11 +167,7 @@ const InnerDepositAddressModal: FC<InnerDepositAddressModalProps> = ({
       trigger={null}
       open={open}
       onOpenChange={onOpenChange}
-      css={{
-        overflow: 'hidden',
-        p: '4',
-        maxWidth: '412px !important'
-      }}
+      className="relay-overflow-hidden relay-p-4 !relay-max-w-[412px]"
       showCloseButton={true}
       onPointerDownOutside={(e) => {
         const dynamicModalElements = Array.from(
@@ -188,13 +184,9 @@ const InnerDepositAddressModal: FC<InnerDepositAddressModalProps> = ({
     >
       <Flex
         direction="column"
-        css={{
-          width: '100%',
-          height: '100%',
-          gap: isWaitingForDeposit ? '3' : '4'
-        }}
+        className={`relay-w-full relay-h-full ${isWaitingForDeposit ? 'relay-gap-3' : 'relay-gap-4'}`}
       >
-        <Text style="h6" css={{ mb: 8 }}>
+        <Text style="h6" className="relay-mb-2">
           {isWaitingForDeposit ? 'Manual Transfer' : 'Trade Details'}
         </Text>
 
diff --git a/packages/ui/src/components/common/TransactionModal/TransactionModal.tsx b/packages/ui/src/components/common/TransactionModal/TransactionModal.tsx
index b57f6f312..b8945bda2 100644
--- a/packages/ui/src/components/common/TransactionModal/TransactionModal.tsx
+++ b/packages/ui/src/components/common/TransactionModal/TransactionModal.tsx
@@ -235,14 +235,7 @@ const InnerTransactionModal: FC<InnerTransactionModalProps> = ({
       trigger={null}
       open={open}
       onOpenChange={onOpenChange}
-      css={{
-        overflow: 'hidden',
-        p: '4',
-        maxWidth: '412px !important',
-        '@media(max-width: 520px)': {
-          maxWidth: 'unset !important'
-        }
-      }}
+      className="relay-overflow-hidden relay-p-4 !relay-max-w-[412px] max-[520px]:!relay-max-w-[unset]"
       showCloseButton={true}
       onPointerDownOutside={(e) => {
         const dynamicModalElements = Array.from(
@@ -259,13 +252,9 @@ const InnerTransactionModal: FC<InnerTransactionModalProps> = ({
     >
       <Flex
         direction="column"
-        css={{
-          width: '100%',
-          height: '100%',
-          gap: '3'
-        }}
+        className="relay-w-full relay-h-full relay-gap-3"
       >
-        <Text style="h6" css={{ mb: 8 }}>
+        <Text style="h6" className="relay-mb-2">
           Transaction Details
         </Text>
         {progressStep === TransactionProgressStep.Confirmation ||
diff --git a/packages/ui/src/components/common/TransactionModal/steps/ApprovalPlusSwapStep.tsx b/packages/ui/src/components/common/TransactionModal/steps/ApprovalPlusSwapStep.tsx
index d99b9deaf..b79a634b3 100644
--- a/packages/ui/src/components/common/TransactionModal/steps/ApprovalPlusSwapStep.tsx
+++ b/packages/ui/src/components/common/TransactionModal/steps/ApprovalPlusSwapStep.tsx
@@ -18,6 +18,7 @@ import { faRepeat } from '@fortawesome/free-solid-svg-icons'
 import { truncateAddress } from '../../../../utils/truncate.js'
 import { getTxBlockExplorerUrl } from '../../../../utils/getTxBlockExplorerUrl.js'
 import useRelayClient from '../../../../hooks/useRelayClient.js'
+import { cn } from '../../../../utils/cn.js'
 
 type ApprovalPlusSwapStepProps = {
   fromToken?: Token
@@ -45,28 +46,22 @@ export const ApprovalPlusSwapStep: FC<ApprovalPlusSwapStepProps> = ({
         align="center"
         justify="between"
         direction="column"
-        css={{ flexShrink: 0, bp500: { flexDirection: 'row' } }}
+        className="relay-shrink-0 bp500:relay-flex-row"
       >
         <Flex
           direction="column"
-          css={{
-            backgroundColor: 'subtle-background-color',
-            p: '12px 16px',
-            borderRadius: 12,
-            gap: 1,
-            width: '100%'
-          }}
+          className="relay-bg-[var(--relay-colors-subtle-background-color)] relay-rounded-[12px] relay-gap-1 relay-w-full relay-py-[12px] relay-px-[16px]"
         >
           <Flex
             direction="column"
             align="start"
-            css={{ gap: '1', cursor: 'pointer' }}
+            className="relay-gap-1 relay-cursor-pointer"
           >
             <ChainTokenIcon
               chainId={fromToken?.chainId}
               tokenlogoURI={fromToken?.logoURI}
               tokenSymbol={fromToken?.symbol}
-              css={{ height: 32, width: 32 }}
+              className="relay-h-[32px] relay-w-[32px]"
             />
             <Text style="h6" ellipsify>
               {fromAmountFormatted} {fromToken?.symbol}
@@ -78,34 +73,24 @@ export const ApprovalPlusSwapStep: FC<ApprovalPlusSwapStepProps> = ({
         </Flex>
         <Text
           style="body1"
-          css={{
-            color: 'gray9',
-            p: '0 16px',
-            bp400Down: { transform: 'rotate(90deg)' }
-          }}
+          className="relay-text-[color:var(--relay-colors-gray9)] relay-px-4 relay-py-0 bp400Down:relay-rotate-90"
         >
           <FontAwesomeIcon icon={faArrowRight} width={16} />
         </Text>
         <Flex
           direction="column"
-          css={{
-            backgroundColor: 'subtle-background-color',
-            p: '12px 16px',
-            borderRadius: 12,
-            gap: 1,
-            width: '100%'
-          }}
+          className="relay-bg-[var(--relay-colors-subtle-background-color)] relay-rounded-[12px] relay-gap-1 relay-w-full relay-py-[12px] relay-px-[16px]"
         >
           <Flex
             direction="column"
             align="start"
-            css={{ gap: '1', cursor: 'pointer' }}
+            className="relay-gap-1 relay-cursor-pointer"
           >
             <ChainTokenIcon
               chainId={toToken?.chainId}
               tokenlogoURI={toToken?.logoURI}
               tokenSymbol={toToken?.symbol}
-              css={{ height: 32, width: 32 }}
+              className="relay-h-[32px] relay-w-[32px]"
             />
             <Text style="h6" ellipsify>
               {toAmountFormatted} {toToken?.symbol}
@@ -118,14 +103,7 @@ export const ApprovalPlusSwapStep: FC<ApprovalPlusSwapStepProps> = ({
       </Flex>
       <Flex
         direction="column"
-        css={{
-          '--borderColor': 'colors.gray3',
-          border: '1px solid var(--borderColor)',
-          borderRadius: 12,
-          p: '3',
-          height: 260,
-          gap: '8px'
-        }}
+        className="relay-border relay-border-solid relay-border-[var(--relay-colors-gray3)] relay-rounded-[12px] relay-p-3 relay-gap-2 relay-h-[260px]"
       >
         {steps?.map((step, index) => {
           const isCurrentStep =
@@ -153,41 +131,36 @@ export const ApprovalPlusSwapStep: FC<ApprovalPlusSwapStepProps> = ({
               <Flex
                 align="center"
                 justify="between"
-                css={{ width: '100%', gap: '3' }}
+                className="relay-w-full relay-gap-3"
               >
-                <Flex align="center" css={{ gap: '2', height: 40 }}>
+                <Flex align="center" className="relay-gap-2 relay-h-[40px]">
                   {step.id === 'approve' ? (
                     <ChainTokenIcon
                       chainId={fromToken?.chainId}
                       tokenlogoURI={fromToken?.logoURI}
                       tokenSymbol={fromToken?.symbol}
-                      css={{
-                        borderRadius: 9999999,
-                        flexShrink: 0,
-                        filter: isCurrentStep ? 'none' : 'grayscale(100%)'
-                      }}
+                      className={cn(
+                        'relay-rounded-full relay-shrink-0',
+                        !isCurrentStep && 'relay-grayscale'
+                      )}
                     />
                   ) : (
                     <Flex
-                      css={{
-                        height: 32,
-                        width: 32,
-                        borderRadius: 9999999,
-                        flexShrink: 0,
-                        backgroundColor: isCurrentStep ? 'primary5' : 'gray5',
-                        color: isCurrentStep ? 'primary8' : 'gray9',
-                        alignItems: 'center',
-                        justifyContent: 'center'
-                      }}
+                      className={cn(
+                        'relay-rounded-full relay-shrink-0 relay-items-center relay-justify-center relay-h-[32px] relay-w-[32px]',
+                        isCurrentStep
+                          ? 'relay-bg-[var(--relay-colors-primary5)] relay-text-[color:var(--relay-colors-primary8)]'
+                          : 'relay-bg-[var(--relay-colors-gray5)] relay-text-[color:var(--relay-colors-gray9)]'
+                      )}
                     >
                       <FontAwesomeIcon icon={faRepeat} width={16} />
                     </Flex>
                   )}
-                  <Flex direction="column" css={{ gap: '2px' }}>
+                  <Flex direction="column" className="relay-gap-[2px]">
                     <Text style="subtitle2">{stepTitle}</Text>
                     {isApproveStep && !hasTxHash && (
                       <Anchor
-                        css={{ fontSize: 12 }}
+                        className="relay-text-[12px]"
                         href="https://support.relay.link/en/articles/10371133-why-do-i-have-to-approve-a-token"
                         target="_blank"
                       >
@@ -206,7 +179,7 @@ export const ApprovalPlusSwapStep: FC<ApprovalPlusSwapStepProps> = ({
                             key={txHash}
                             href={txUrl}
                             target="_blank"
-                            css={{ fontSize: 12 }}
+                            className="relay-text-[12px]"
                           >
                             View Tx: {truncateAddress(txHash, '...', 6, 4)}
                           </Anchor>
@@ -218,12 +191,12 @@ export const ApprovalPlusSwapStep: FC<ApprovalPlusSwapStepProps> = ({
                 <Flex>
                   {isCurrentStep && hasTxHash ? (
                     <LoadingSpinner
-                      css={{ height: 16, width: 16, fill: 'gray9' }}
+                      className="relay-h-4 relay-w-4 relay-fill-[var(--relay-colors-gray9)]"
                     />
                   ) : step?.items?.every(
                       (item) => item.status === 'complete'
                     ) ? (
-                    <Box css={{ color: 'green9' }}>
+                    <Box className="relay-text-[color:var(--relay-colors-green9)]">
                       <FontAwesomeIcon icon={faCheck} width={16} />
                     </Box>
                   ) : null}
@@ -231,14 +204,8 @@ export const ApprovalPlusSwapStep: FC<ApprovalPlusSwapStepProps> = ({
               </Flex>
 
               {index !== (steps?.length || 0) - 1 && (
-                <Box css={{ height: '14px', pl: '16px', marginTop: '12px' }}>
-                  <Box
-                    css={{
-                      width: '1px',
-                      height: '100%',
-                      backgroundColor: 'gray11'
-                    }}
-                  />
+                <Box className="relay-pl-4 relay-h-[14px] relay-mt-3">
+                  <Box className="relay-h-full relay-w-px relay-bg-[var(--relay-colors-gray11)]" />
                 </Box>
               )}
             </Box>
diff --git a/packages/ui/src/components/common/TransactionModal/steps/DepositAddressValidatingStep.tsx b/packages/ui/src/components/common/TransactionModal/steps/DepositAddressValidatingStep.tsx
index c0bae385b..3960a54ab 100644
--- a/packages/ui/src/components/common/TransactionModal/steps/DepositAddressValidatingStep.tsx
+++ b/packages/ui/src/components/common/TransactionModal/steps/DepositAddressValidatingStep.tsx
@@ -23,15 +23,15 @@ export const DepositAddressValidatingStep: FC<
     <>
       <Flex direction="column" align="center" justify="between">
         <LoadingSpinner
-          css={{ height: 40, width: 40, fill: 'primary-color' }}
+          className="relay-h-10 relay-w-10 relay-fill-[var(--relay-colors-primary-color)]"
         />
-        <Text style="subtitle2" css={{ mt: '4', mb: '2', textAlign: 'center' }}>
+        <Text style="subtitle2" className="relay-mt-4 relay-mb-2 relay-text-center">
           Funds received. Your transaction is now in progress.
         </Text>
         <Text
           color="subtle"
           style="body2"
-          css={{ mt: 12, textAlign: 'center' }}
+          className="relay-mt-3 relay-text-center"
         >
           Feel free to leave at any time, you can track your progress within the{' '}
           <Anchor
@@ -47,14 +47,10 @@ export const DepositAddressValidatingStep: FC<
       </Flex>
       <Button
         disabled={true}
-        css={{
-          color: 'button-disabled-color !important',
-          mt: 8,
-          justifyContent: 'center'
-        }}
+        className="relay-text-[color:var(--relay-colors-button-disabled-color)_!important] relay-mt-2 relay-justify-center"
       >
         <LoadingSpinner
-          css={{ height: 16, width: 16, fill: 'button-disabled-color' }}
+          className="relay-h-4 relay-w-4 relay-fill-[var(--relay-colors-button-disabled-color)]"
         />
         Validating Transaction
       </Button>
diff --git a/packages/ui/src/components/common/TransactionModal/steps/ErrorStep.tsx b/packages/ui/src/components/common/TransactionModal/steps/ErrorStep.tsx
index 40935c659..310824d7f 100644
--- a/packages/ui/src/components/common/TransactionModal/steps/ErrorStep.tsx
+++ b/packages/ui/src/components/common/TransactionModal/steps/ErrorStep.tsx
@@ -1,6 +1,5 @@
 import { type FC } from 'react'
 import { Box, Button, Flex, Text } from '../../../primitives/index.js'
-import { motion } from 'framer-motion'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faCircleExclamation } from '@fortawesome/free-solid-svg-icons/faCircleExclamation'
 import { faArrowRight } from '@fortawesome/free-solid-svg-icons/faArrowRight'
@@ -109,47 +108,39 @@ export const ErrorStep: FC<ErrorStepProps> = ({
       direction="column"
       align="center"
       justify="between"
-      css={{ width: '100%' }}
+      className="relay-w-full"
     >
-      <motion.div
-        initial={{ scale: 0 }}
-        animate={{ scale: 1 }}
-        transition={{
-          type: 'spring',
-          stiffness: 260,
-          damping: 20
-        }}
-      >
+      <div className="relay-animate-content-fade-in">
         {isRefund ? (
-          <Box css={{ color: 'gray9', mr: '$2' }}>
-            <FontAwesomeIcon icon={faRotateRight} style={{ height: 40 }} />
+          <Box className="relay-mr-2 relay-text-[color:var(--relay-colors-gray9)]">
+            <FontAwesomeIcon icon={faRotateRight} className="relay-h-[40px]" />
           </Box>
         ) : null}
 
         {!isRefund && isSolverStatusTimeout ? (
-          <Box css={{ color: 'amber9', mr: '$2' }}>
+          <Box className="relay-mr-2 relay-text-[color:var(--relay-colors-amber9)]">
             <FontAwesomeIcon
               icon={faCircleExclamation}
-              style={{ height: 40 }}
+              className="relay-h-[40px]"
             />
           </Box>
         ) : null}
 
         {!isRefund && !isSolverStatusTimeout ? (
-          <Box css={{ color: 'red9', mr: '$2' }}>
-            <FontAwesomeIcon icon={faCircleXmark} style={{ height: 40 }} />
+          <Box className="relay-mr-2 relay-text-[color:var(--relay-colors-red9)]">
+            <FontAwesomeIcon icon={faCircleXmark} className="relay-h-[40px]" />
           </Box>
         ) : null}
-      </motion.div>
+      </div>
 
       {isRefund ? (
         transaction?.data?.failReason === 'UNKNOWN' ||
         !transaction?.data?.failReason ? (
           <Flex
             direction="column"
-            css={{ my: '4', textAlign: 'center', alignItems: 'center' }}
+            className="relay-my-4 relay-text-center relay-items-center"
           >
-            <Text style="subtitle1" css={{ mb: '16px' }}>
+            <Text style="subtitle1" className="relay-mb-4">
               It looks like an unknown issue occurred during the transaction.
               {fromToken && fromAmountFormatted && fromChain
                 ? ` We've refunded ${fromAmountFormatted} ${fromToken.symbol} on ${fromChain.displayName}.`
@@ -157,11 +148,11 @@ export const ErrorStep: FC<ErrorStepProps> = ({
             </Text>
 
             {/* Transaction Pills */}
-            <Flex css={{ alignItems: 'center', gap: '2' }}>
+            <Flex className="relay-items-center relay-gap-2">
               {fromToken && fromChain ? (
                 <Pill
                   color="gray"
-                  css={{ alignItems: 'center', py: '2', px: '3' }}
+                  className="relay-items-center relay-py-2 relay-px-3"
                 >
                   <ChainTokenIcon
                     chainId={fromChain.id}
@@ -169,7 +160,7 @@ export const ErrorStep: FC<ErrorStepProps> = ({
                     tokenSymbol={fromToken.symbol}
                     size="base"
                   />
-                  <Text style="subtitle1" css={{ ml: '2' }}>
+                  <Text style="subtitle1" className="relay-ml-2">
                     {fromAmountFormatted} {fromToken.symbol}
                   </Text>
                 </Pill>
@@ -177,16 +168,14 @@ export const ErrorStep: FC<ErrorStepProps> = ({
                 <Text style="subtitle1">?</Text>
               )}
 
-              <Flex
-                css={{ alignItems: 'center', justifyContent: 'center', p: '2' }}
-              >
-                <FontAwesomeIcon style={{ width: 14 }} icon={faArrowRight} />
+              <Flex className="relay-items-center relay-justify-center relay-p-2">
+                <FontAwesomeIcon className="relay-w-[14px]" icon={faArrowRight} />
               </Flex>
 
               {toToken && toChain ? (
                 <Pill
                   color="gray"
-                  css={{ alignItems: 'center', py: '2', px: '3' }}
+                  className="relay-items-center relay-py-2 relay-px-3"
                 >
                   <ChainTokenIcon
                     chainId={toChain.id}
@@ -194,7 +183,7 @@ export const ErrorStep: FC<ErrorStepProps> = ({
                     tokenSymbol={toToken.symbol}
                     size="base"
                   />
-                  <Text style="subtitle1" css={{ ml: '2' }}>
+                  <Text style="subtitle1" className="relay-ml-2">
                     {toAmountFormatted} {toToken.symbol}
                   </Text>
                 </Pill>
@@ -204,7 +193,7 @@ export const ErrorStep: FC<ErrorStepProps> = ({
             </Flex>
           </Flex>
         ) : (
-          <Text style="subtitle2" css={{ my: '4', textAlign: 'center' }}>
+          <Text style="subtitle2" className="relay-my-4 relay-text-center">
             <RefundReason reasonCode={transaction?.data?.failReason} />
             {refundDetails
               ? ` We've refunded ${refundDetails.amountFormatted} ${refundDetails.currency?.symbol} on ${refundChain?.displayName}.`
@@ -222,15 +211,7 @@ export const ErrorStep: FC<ErrorStepProps> = ({
         <>
           <Flex
             direction="column"
-            css={{
-              p: '3',
-              '--borderColor': 'colors.subtle-border-color',
-              border: '1px solid var(--borderColor)',
-              gap: '3',
-              width: '100%',
-              borderRadius: 12,
-              mb: 24
-            }}
+            className="relay-p-3 relay-border relay-border-solid relay-border-[var(--relay-colors-subtle-border-color)] relay-gap-3 relay-w-full relay-rounded-[12px] relay-mb-6"
           >
             <TransactionsByChain
               allTxHashes={allTxHashes}
@@ -242,7 +223,7 @@ export const ErrorStep: FC<ErrorStepProps> = ({
             />
           </Flex>
 
-          <Flex css={{ gap: '3', width: '100%' }}>
+          <Flex className="relay-gap-3 relay-w-full">
             <Button
               color="secondary"
               cta={true}
@@ -254,10 +235,7 @@ export const ErrorStep: FC<ErrorStepProps> = ({
                   '_blank'
                 )
               }}
-              css={{
-                justifyContent: 'center',
-                whiteSpace: 'nowrap'
-              }}
+              className="relay-justify-center relay-whitespace-nowrap"
             >
               View Details
             </Button>
@@ -266,10 +244,7 @@ export const ErrorStep: FC<ErrorStepProps> = ({
               onClick={() => {
                 onOpenChange(false)
               }}
-              css={{
-                justifyContent: 'center',
-                width: '100%'
-              }}
+              className="relay-justify-center relay-w-full"
             >
               Done
             </Button>
@@ -281,10 +256,7 @@ export const ErrorStep: FC<ErrorStepProps> = ({
           onClick={() => {
             onOpenChange(false)
           }}
-          css={{
-            justifyContent: 'center',
-            width: '100%'
-          }}
+          className="relay-justify-center relay-w-full"
         >
           Done
         </Button>
diff --git a/packages/ui/src/components/common/TransactionModal/steps/SwapConfirmationStep.tsx b/packages/ui/src/components/common/TransactionModal/steps/SwapConfirmationStep.tsx
index c9b4a5eee..363957431 100644
--- a/packages/ui/src/components/common/TransactionModal/steps/SwapConfirmationStep.tsx
+++ b/packages/ui/src/components/common/TransactionModal/steps/SwapConfirmationStep.tsx
@@ -11,6 +11,7 @@ import { formatBN } from '../../../../utils/numbers.js'
 import { getTxBlockExplorerUrl } from '../../../../utils/getTxBlockExplorerUrl.js'
 import useRelayClient from '../../../../hooks/useRelayClient.js'
 import { StepIcon } from '../../StepIcon.js'
+import { cn } from '../../../../utils/cn.js'
 
 type SwapConfirmationStepProps = {
   fromToken?: Token
@@ -80,68 +81,48 @@ export const SwapConfirmationStep: FC<SwapConfirmationStepProps> = ({
         align="center"
         justify="between"
         direction="column"
-        css={{ flexShrink: 0, bp500: { flexDirection: 'row' } }}
+        className="relay-shrink-0 bp500:relay-flex-row"
       >
         <Flex
           direction="row"
-          css={{
-            backgroundColor: 'subtle-background-color',
-            p: '12px 16px',
-            borderRadius: 12,
-            gap: 2,
-            width: '100%',
-            alignItems: 'center',
-            bp500: { flexDirection: 'column', gap: 1, alignItems: 'flex-start' }
-          }}
+          className="relay-bg-[var(--relay-colors-subtle-background-color)] relay-rounded-[12px] relay-gap-2 relay-w-full relay-items-center bp500:relay-flex-col bp500:relay-gap-1 bp500:relay-items-start relay-py-[12px] relay-px-[16px]"
         >
           <ChainTokenIcon
             chainId={fromToken?.chainId}
             tokenlogoURI={fromToken?.logoURI}
             tokenSymbol={fromToken?.symbol}
-            css={{ height: 32, width: 32 }}
+            className="relay-h-[32px] relay-w-[32px]"
           />
-          <Flex direction="column" align="start" css={{ gap: '1' }}>
+          <Flex direction="column" align="start" className="relay-gap-1">
             <Text color="subtle" style="subtitle2">
               {fromChain?.displayName}
             </Text>
-            <Text style="h6" ellipsify css={{ lineHeight: '20px' }}>
+            <Text style="h6" ellipsify className="relay-leading-[20px]">
               {fromAmountFormatted} {fromToken?.symbol}
             </Text>
           </Flex>
         </Flex>
         <Text
           style="body1"
-          css={{
-            color: 'gray9',
-            p: '0 12px',
-            bp400Down: { transform: 'rotate(90deg)', p: '12px 0' }
-          }}
+          className="relay-text-[color:var(--relay-colors-gray9)] relay-px-3 relay-py-0 bp400Down:relay-rotate-90 bp400Down:relay-py-3 bp400Down:relay-px-0"
         >
           <FontAwesomeIcon icon={faArrowRight} width={16} />
         </Text>
         <Flex
           direction="row"
-          css={{
-            backgroundColor: 'subtle-background-color',
-            p: '12px 16px',
-            borderRadius: 12,
-            gap: 2,
-            width: '100%',
-            alignItems: 'center',
-            bp500: { flexDirection: 'column', gap: 1, alignItems: 'flex-start' }
-          }}
+          className="relay-bg-[var(--relay-colors-subtle-background-color)] relay-rounded-[12px] relay-gap-2 relay-w-full relay-items-center bp500:relay-flex-col bp500:relay-gap-1 bp500:relay-items-start relay-py-[12px] relay-px-[16px]"
         >
           <ChainTokenIcon
             chainId={toToken?.chainId}
             tokenlogoURI={toToken?.logoURI}
             tokenSymbol={toToken?.symbol}
-            css={{ height: 32, width: 32 }}
+            className="relay-h-[32px] relay-w-[32px]"
           />
-          <Flex direction="column" align="start" css={{ gap: '1' }}>
+          <Flex direction="column" align="start" className="relay-gap-1">
             <Text color="subtle" style="subtitle2">
               {toChain?.displayName}
             </Text>
-            <Text style="h6" ellipsify css={{ lineHeight: '20px' }}>
+            <Text style="h6" ellipsify className="relay-leading-[20px]">
               {toAmountFormatted} {toToken?.symbol}
             </Text>
           </Flex>
@@ -151,14 +132,7 @@ export const SwapConfirmationStep: FC<SwapConfirmationStepProps> = ({
         <Flex
           direction="row"
           justify="between"
-          css={{
-            backgroundColor: 'subtle-background-color',
-            p: '12px 16px',
-            borderRadius: 12,
-            gap: 2,
-            width: '100%',
-            alignItems: 'center'
-          }}
+          className="relay-bg-[var(--relay-colors-subtle-background-color)] relay-rounded-[12px] relay-gap-2 relay-w-full relay-items-center relay-py-[12px] relay-px-[16px]"
         >
           <Text style="subtitle2" color="subtle">
             Additional Gas
@@ -170,28 +144,15 @@ export const SwapConfirmationStep: FC<SwapConfirmationStepProps> = ({
       ) : null}
       <Flex
         direction="column"
-        css={{
-          '--borderColor': 'colors.gray3',
-          border: '1px solid var(--borderColor)',
-          borderRadius: 12,
-          px: '3',
-          py: '2',
-          gap: '1'
-        }}
+        className="relay-border relay-border-solid relay-border-[var(--relay-colors-gray3)] relay-rounded-[12px] relay-px-3 relay-py-2 relay-gap-1"
       >
         {formattedSteps.map((step, index) => (
           <Box key={step.id}>
             <StepRow {...step} />
 
             {index !== formattedSteps.length - 1 && (
-              <Box css={{ height: '14px', pl: '12px', marginTop: '4px' }}>
-                <Box
-                  css={{
-                    width: '1px',
-                    height: '100%',
-                    backgroundColor: 'gray7'
-                  }}
-                />
+              <Box className="relay-pl-3 relay-h-[14px] relay-mt-[4px]">
+                <Box className="relay-h-full relay-w-px relay-bg-[var(--relay-colors-gray7)]" />
               </Box>
             )}
           </Box>
@@ -231,37 +192,30 @@ export const StepRow: FC<StepRowProps> = ({
   const relayClient = useRelayClient()
   const chains = relayClient?.chains
   return (
-    <Flex align="center" justify="between" css={{ width: '100%', gap: '3' }}>
-      <Flex align="center" css={{ gap: '3', height: 40 }}>
+    <Flex align="center" justify="between" className="relay-w-full relay-gap-3">
+      <Flex align="center" className="relay-gap-3 relay-h-[40px]">
         <Flex
           data-active={isActive && !isCompleted}
-          css={{
-            height: 30,
-            width: 30,
-            borderRadius: 9999999,
-            flexShrink: 0,
-            alignItems: 'center',
-            justifyContent: 'center',
-            backgroundColor: isCompleted
-              ? 'green3'
+          className={cn(
+            'relay-shrink-0 relay-items-center relay-justify-center relay-rounded-full relay-h-[30px] relay-w-[30px]',
+            isCompleted
+              ? 'relay-bg-[var(--relay-colors-green3)]'
               : isActive
-                ? 'primary6'
-                : 'gray5',
-            color:
-              isActive && !isCompleted
-                ? 'primary11'
-                : isCompleted
-                  ? 'green11'
-                  : isActive
-                    ? 'primary11'
-                    : 'gray9',
+                ? 'relay-bg-[var(--relay-colors-primary6)]'
+                : 'relay-bg-[var(--relay-colors-gray5)]'
+          )}
+          style={{
+            color: isActive && !isCompleted
+              ? 'var(--relay-colors-primary11)'
+              : isCompleted
+                ? 'var(--relay-colors-green11)'
+                : isActive
+                  ? 'var(--relay-colors-primary11)'
+                  : 'var(--relay-colors-gray9)',
             animation:
               isActive && !isCompleted
                 ? 'pulse-shadow 1s infinite alternate-reverse'
-                : 'none',
-            '& > *': {
-              color: isCompleted ? 'green11' : isActive ? 'primary11' : 'gray9'
-            }
+                : 'none'
           }}
         >
           {isCompleted ? (
@@ -270,13 +224,13 @@ export const StepRow: FC<StepRowProps> = ({
             <StepIcon stepId={id} chainId={chainId} />
           )}
         </Flex>
-        <Flex direction="column" css={{ gap: '2px' }}>
+        <Flex direction="column" className="relay-gap-[2px]">
           <Text style="subtitle2" color={isActive ? undefined : 'subtle'}>
             {action}
           </Text>
 
           {subText && (
-            <Flex align="center" css={{ gap: '6px' }}>
+            <Flex align="center" className="relay-gap-[6px]">
               {(() => {
                 // Handle "Success: txhash" case with split colors and link
                 if (subText.startsWith('Success:')) {
@@ -289,8 +243,11 @@ export const StepRow: FC<StepRowProps> = ({
                       : undefined
 
                   return (
-                    <Flex align="center" css={{ gap: '4px' }}>
-                      <Text style="subtitle3" css={{ color: 'green11' }}>
+                    <Flex align="center" className="relay-gap-[4px]">
+                      <Text
+                        style="subtitle3"
+                        className="relay-text-[color:var(--relay-colors-green11)]"
+                      >
                         {successText}:
                       </Text>
                       {hashPart &&
@@ -299,20 +256,20 @@ export const StepRow: FC<StepRowProps> = ({
                             href={txUrl}
                             target="_blank"
                             rel="noopener noreferrer"
-                            style={{
-                              color: 'var(--colors-primary11)',
-                              textDecoration: 'none'
-                            }}
+                            className="relay-text-[color:var(--colors-primary11)] relay-no-underline"
                           >
                             <Text
                               style="subtitle3"
-                              css={{ color: 'primary11' }}
+                              className="relay-text-[color:var(--relay-colors-primary11)]"
                             >
                               {hashPart}
                             </Text>
                           </a>
                         ) : (
-                          <Text style="subtitle3" css={{ color: 'primary11' }}>
+                          <Text
+                            style="subtitle3"
+                            className="relay-text-[color:var(--relay-colors-primary11)]"
+                          >
                             {hashPart}
                           </Text>
                         ))}
@@ -335,8 +292,11 @@ export const StepRow: FC<StepRowProps> = ({
                       : undefined
 
                   return (
-                    <Flex align="center" css={{ gap: '4px' }}>
-                      <Text style="subtitle3" css={{ color: 'primary11' }}>
+                    <Flex align="center" className="relay-gap-[4px]">
+                      <Text
+                        style="subtitle3"
+                        className="relay-text-[color:var(--relay-colors-primary11)]"
+                      >
                         {labelText}:
                       </Text>
                       {hashPart &&
@@ -345,20 +305,20 @@ export const StepRow: FC<StepRowProps> = ({
                             href={txUrl}
                             target="_blank"
                             rel="noopener noreferrer"
-                            style={{
-                              color: 'var(--colors-primary11)',
-                              textDecoration: 'none'
-                            }}
+                            className="relay-text-[color:var(--colors-primary11)] relay-no-underline"
                           >
                             <Text
                               style="subtitle3"
-                              css={{ color: 'primary11' }}
+                              className="relay-text-[color:var(--relay-colors-primary11)]"
                             >
                               {hashPart}
                             </Text>
                           </a>
                         ) : (
-                          <Text style="subtitle3" css={{ color: 'primary11' }}>
+                          <Text
+                            style="subtitle3"
+                            className="relay-text-[color:var(--relay-colors-primary11)]"
+                          >
                             {hashPart}
                           </Text>
                         ))}
@@ -369,23 +329,22 @@ export const StepRow: FC<StepRowProps> = ({
                 return (
                   <Text
                     style="subtitle3"
-                    css={{
-                      color:
-                        subTextColor === 'slate10'
-                          ? 'slate10'
-                          : subTextColor === 'subtle'
-                            ? 'text-subtle'
-                            : subTextColor === 'green11'
-                              ? 'green11'
-                              : 'primary11'
-                    }}
+                    className={cn(
+                      subTextColor === 'slate10'
+                        ? 'relay-text-[color:var(--relay-colors-slate10)]'
+                        : subTextColor === 'subtle'
+                          ? 'relay-text-[color:var(--relay-colors-text-subtle)]'
+                          : subTextColor === 'green11'
+                            ? 'relay-text-[color:var(--relay-colors-green11)]'
+                            : 'relay-text-[color:var(--relay-colors-primary11)]'
+                    )}
                   >
                     {subText}
                   </Text>
                 )
               })()}
               {showSubTextSpinner && (
-                <LoadingSpinner css={{ height: 12, width: 12 }} />
+                <LoadingSpinner className="relay-h-3 relay-w-3" />
               )}
             </Flex>
           )}
diff --git a/packages/ui/src/components/common/TransactionModal/steps/SwapSuccessStep.tsx b/packages/ui/src/components/common/TransactionModal/steps/SwapSuccessStep.tsx
index 5949df40a..5aaaa4bcc 100644
--- a/packages/ui/src/components/common/TransactionModal/steps/SwapSuccessStep.tsx
+++ b/packages/ui/src/components/common/TransactionModal/steps/SwapSuccessStep.tsx
@@ -9,7 +9,6 @@ import {
   Skeleton,
   Anchor
 } from '../../../primitives/index.js'
-import { motion } from 'framer-motion'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { type TxHashes } from '../TransactionModalRenderer.js'
 import { type Token } from '../../../../types/index.js'
@@ -168,28 +167,14 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
   return isDelayedTx ? (
     <>
       <Flex direction="column" align="center" justify="between">
-        <motion.div
-          initial={{ scale: 0 }}
-          animate={{ scale: 1 }}
-          transition={{
-            type: 'spring',
-            stiffness: 260,
-            damping: 20
-          }}
-        >
+        <div className="relay-animate-content-fade-in">
           <Flex
             align="center"
             justify="center"
-            css={{
-              height: 80,
-              width: 78,
-              position: 'relative',
-              backgroundColor: 'amber2',
-              borderRadius: '999999px'
-            }}
+            className="relay-relative relay-rounded-full relay-h-[80px] relay-w-[78px] relay-bg-[var(--relay-colors-amber2)]"
           >
             <svg
-              style={{ position: 'absolute', top: 7, left: 0, zIndex: 0 }}
+              className="relay-absolute relay-top-[7px] relay-left-0 relay-z-0"
               width="76"
               height="80"
               viewBox="0 0 64 54"
@@ -208,21 +193,26 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
               />
             </svg>
 
-            <Box css={{ color: 'amber9', mr: '$2', zIndex: 1 }}>
-              <FontAwesomeIcon icon={faClockFour} style={{ height: 32 }} />
+            <Box
+              className="relay-z-[1] relay-text-[color:var(--relay-colors-amber9)] relay-mr-2"
+            >
+              <FontAwesomeIcon icon={faClockFour} className="relay-h-[32px]" />
             </Box>
           </Flex>
-        </motion.div>
+        </div>
 
-        <Text style="subtitle1" css={{ my: '4', textAlign: 'center' }}>
+        <Text
+          style="subtitle1"
+          className="relay-my-4 relay-text-center"
+        >
           {isBitcoinOrigin || isBitcoinDestination
             ? `Bitcoin confirmation takes ${estimatedMinutes} minutes. Track progress on the transaction page.`
             : `Processing bridge, this will take ~${estimatedMinutes} ${estimatedMinutes === 1 ? 'min' : 'mins'}.`}
         </Text>
 
-        <Flex align="center" css={{ gap: '2', mb: 24 }}>
+        <Flex align="center" className="relay-gap-2 relay-mb-[24px]">
           {fromChain ? (
-            <Pill color="gray" css={{ alignItems: 'center', py: '2', px: '3' }}>
+            <Pill color="gray" className="relay-items-center relay-py-2 relay-px-3">
               <ChainTokenIcon
                 chainId={fromChain.id}
                 tokenlogoURI={fromTokenLogoUri}
@@ -230,20 +220,18 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
                 size="sm"
                 chainRadius={2.5}
               />
-              <Text style="subtitle1" css={{ ml: '2' }}>
+              <Text style="subtitle1" className="relay-ml-2">
                 {_fromAmountFormatted} {_fromToken?.symbol}
               </Text>
             </Pill>
           ) : (
             <Text style="subtitle1">?</Text>
           )}
-          <Flex
-            css={{ alignItems: 'center', justifyContent: 'center', p: '2' }}
-          >
-            <FontAwesomeIcon style={{ width: 14 }} icon={faArrowRight} />
+          <Flex className="relay-items-center relay-justify-center relay-p-2">
+            <FontAwesomeIcon className="relay-w-[14px]" icon={faArrowRight} />
           </Flex>
           {toChain ? (
-            <Pill color="gray" css={{ alignItems: 'center', py: '2', px: '3' }}>
+            <Pill color="gray" className="relay-items-center relay-py-2 relay-px-3">
               <ChainTokenIcon
                 chainId={toChain.id}
                 tokenlogoURI={toTokenLogoUri}
@@ -251,7 +239,7 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
                 size="sm"
                 chainRadius={2.5}
               />
-              <Text style="subtitle1" css={{ ml: '2' }}>
+              <Text style="subtitle1" className="relay-ml-2">
                 {_toAmountFormatted} {_toToken?.symbol}
               </Text>
             </Pill>
@@ -260,13 +248,8 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
           )}
         </Flex>
         <Text
-          css={{
-            background: 'gray2',
-            p: '4',
-            borderRadius: 12,
-            textAlign: 'center'
-          }}
           style="body2"
+          className="relay-rounded-[12px] relay-text-center relay-p-4 relay-bg-[var(--relay-colors-gray2)]"
         >
           You can close this modal while it finalizes on the blockchain. The
           transaction will continue in the background.
@@ -287,7 +270,7 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
                 <Anchor
                   href={txUrl}
                   target="_blank"
-                  css={{ mt: '12px', textAlign: 'center', fontSize: '14px' }}
+                  className="relay-text-center relay-text-[14px] relay-mt-[12px]"
                 >
                   View Refund Tx: {truncatedHash}
                 </Anchor>
@@ -298,7 +281,7 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
               <Text
                 style="body3"
                 color="subtle"
-                css={{ mt: '12px', textAlign: 'center' }}
+                className="relay-text-center relay-mt-3"
               >
                 Fetching refund transaction...
               </Text>
@@ -317,7 +300,7 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
               <Anchor
                 href={txUrl}
                 target="_blank"
-                css={{ mt: '12px', textAlign: 'center', fontSize: '14px' }}
+                className="relay-text-center relay-text-[14px] relay-mt-[12px]"
               >
                 View Tx: {truncatedHash}
               </Anchor>
@@ -331,14 +314,7 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
       {!delayedTxUrl ? (
         <Flex
           direction="column"
-          css={{
-            p: '3',
-            '--borderColor': 'colors.subtle-border-color',
-            border: '1px solid var(--borderColor)',
-            gap: '3',
-            width: '100%',
-            borderRadius: 12
-          }}
+          className="relay-p-3 relay-border relay-border-solid relay-border-[var(--relay-colors-subtle-border-color)] relay-gap-3 relay-w-full relay-rounded-[12px]"
         >
           <TransactionsByChain
             allTxHashes={allTxHashes}
@@ -349,29 +325,23 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
         </Flex>
       ) : null}
 
-      <Flex css={{ width: '100%', mt: 8, gap: '3' }}>
+      <Flex className="relay-w-full relay-gap-3 relay-mt-[8px]">
         <Button
           cta={true}
           color={'secondary'}
           onClick={() => {
             onOpenChange(false)
           }}
-          css={{
-            justifyContent: 'center',
-            width: '100%'
-          }}
+          className="relay-justify-center relay-w-full"
         >
           Done
         </Button>
         {delayedTxUrl ? (
-          <a href={delayedTxUrl} style={{ width: '100%' }} target="_blank">
+          <a href={delayedTxUrl} className="relay-w-full" target="_blank">
             <Button
               cta={true}
               color={'primary'}
-              css={{
-                justifyContent: 'center',
-                width: 'max-content'
-              }}
+              className="relay-justify-center relay-w-max"
             >
               Track Progress
             </Button>
@@ -382,48 +352,25 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
   ) : (
     <>
       <Flex direction="column" align="center" justify="between">
-        <motion.div
-          initial={{ scale: 0 }}
-          animate={{ scale: 1 }}
-          transition={{
-            type: 'spring',
-            stiffness: 260,
-            damping: 20
-          }}
-        >
+        <div className="relay-animate-content-fade-in">
           <Flex align="center">
             <RelayIcon />
             <Flex
               align="center"
               justify="center"
-              css={{
-                width: 40,
-                height: 40,
-                backgroundColor: 'green9',
-                color: 'white',
-                borderRadius: '100px',
-                '--borderColor': 'white',
-                border: '2px solid var(--borderColor)',
-                ml: '-8px'
-              }}
+              className="relay-rounded-full relay-border-2 relay-border-solid relay-border-white relay-w-[40px] relay-h-[40px] relay-bg-[var(--relay-colors-green9)] relay-text-white relay-ml-[-8px]"
             >
               <FontAwesomeIcon
                 icon={faCheck}
-                style={{ height: 20, color: 'white' }}
+                className="relay-h-[20px] relay-text-white"
               />
             </Flex>
           </Flex>
-        </motion.div>
+        </div>
 
         <Text
           style="h6"
-          css={{
-            my: '12px',
-            textAlign: 'center',
-            '& .green-time': {
-              color: 'green11'
-            }
-          }}
+          className="relay-text-center relay-my-3 [&_.green-time]:relay-text-[color:var(--relay-colors-green11)]"
         >
           {fillTime && fillTime !== '-' ? (
             <>
@@ -436,22 +383,15 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
 
         <Flex
           direction="column"
-          css={{
-            gap: '3',
-            padding: '3',
-            '--borderColor': 'colors.slate.5',
-            border: '1px solid var(--borderColor)',
-            borderRadius: 12,
-            width: '100%'
-          }}
+          className="relay-gap-3 relay-p-3 relay-border relay-border-solid relay-border-[var(--relay-colors-slate-5)] relay-rounded-[12px] relay-w-full"
         >
           {_fromToken ? (
-            <Flex direction="column" css={{ gap: '4px' }}>
+            <Flex direction="column" className="relay-gap-[4px]">
               <Text style="subtitle2" color="subtle">
                 Sent
               </Text>
               <Flex justify="between">
-                <Flex align="center" css={{ gap: '4px' }}>
+                <Flex align="center" className="relay-gap-[4px]">
                   <ChainTokenIcon
                     size="sm"
                     chainId={_fromToken.chainId}
@@ -461,7 +401,7 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
                   />
                   {isLoadingTransaction ? (
                     <Skeleton
-                      css={{ height: 24, width: 60, background: 'gray5' }}
+                      className="relay-h-[24px] relay-w-[60px] relay-bg-[var(--relay-colors-gray5)]"
                     />
                   ) : (
                     <Text style="h6">
@@ -481,7 +421,7 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
                       <Anchor
                         href={txUrl}
                         target="_blank"
-                        css={{ color: 'primary11', fontSize: '14px' }}
+                        className="relay-text-[color:var(--relay-colors-primary11)] relay-text-[14px]"
                       >
                         {truncateAddress(txHash, '...', 6, 4)}
                       </Anchor>
@@ -494,12 +434,12 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
           )}
 
           {_toToken ? (
-            <Flex direction="column" css={{ gap: '4px' }}>
+            <Flex direction="column" className="relay-gap-[4px]">
               <Text style="subtitle2" color="subtle">
                 Received
               </Text>
               <Flex justify="between">
-                <Flex align="center" css={{ gap: '4px' }}>
+                <Flex align="center" className="relay-gap-[4px]">
                   <ChainTokenIcon
                     size="sm"
                     chainId={_toToken.chainId}
@@ -509,7 +449,7 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
                   />
                   {isLoadingTransaction ? (
                     <Skeleton
-                      css={{ height: 24, width: 60, background: 'gray5' }}
+                      className="relay-h-[24px] relay-w-[60px] relay-bg-[var(--relay-colors-gray5)]"
                     />
                   ) : (
                     <Text style="h6">
@@ -528,7 +468,7 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
                       <Anchor
                         href={txUrl}
                         target="_blank"
-                        css={{ color: 'primary11', fontSize: '14px' }}
+                        className="relay-text-[color:var(--relay-colors-primary11)] relay-text-[14px]"
                       >
                         {truncateAddress(txHash, '...', 6, 4)}
                       </Anchor>
@@ -538,7 +478,7 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
 
               {/* Additional Gas - positioned below transaction hash with 8px spacing */}
               {formattedGasTopUpAmount && gasTopUpAmountCurrency ? (
-                <Flex align="center" css={{ gap: '4px', mt: '4px' }}>
+                <Flex align="center" className="relay-gap-[4px] relay-mt-[4px]">
                   <ChainTokenIcon
                     size="sm"
                     chainId={gasTopUpAmountCurrency.chainId}
@@ -561,11 +501,11 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
         </Flex>
       </Flex>
 
-      <Flex css={{ width: '100%', gap: '3' }}>
+      <Flex className="relay-w-full relay-gap-3">
         {requestId ? (
           <a
             href={`${baseTransactionUrl}/transaction/${requestId}`}
-            style={{ width: '100%' }}
+            className="relay-w-full"
             target="_blank"
             onClick={(e) => {
               e.stopPropagation()
@@ -574,10 +514,7 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
             <Button
               color="secondary"
               cta={true}
-              css={{
-                justifyContent: 'center',
-                width: 'max-content'
-              }}
+              className="relay-justify-center relay-w-max"
             >
               View Details
             </Button>
@@ -588,10 +525,7 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
           onClick={() => {
             onOpenChange(false)
           }}
-          css={{
-            justifyContent: 'center',
-            width: '100%'
-          }}
+          className="relay-justify-center relay-w-full"
         >
           Done
         </Button>
diff --git a/packages/ui/src/components/common/TransactionModal/steps/TransactionsByChain.tsx b/packages/ui/src/components/common/TransactionModal/steps/TransactionsByChain.tsx
index 750e34627..1a04be64f 100644
--- a/packages/ui/src/components/common/TransactionModal/steps/TransactionsByChain.tsx
+++ b/packages/ui/src/components/common/TransactionModal/steps/TransactionsByChain.tsx
@@ -100,26 +100,21 @@ export const TransactionsByChain: FC<TransactionsByChainProps> = ({
 
   // Return single container with all transactions
   return (
-    <Flex direction="column" css={{ gap: '3' }}>
+    <Flex direction="column" className="relay-gap-3">
       {transactions.map((transaction, idx) => (
-        <Flex justify="between" css={{ alignItems: 'center' }} key={idx}>
-          <Flex css={{ alignItems: 'center', gap: '2' }}>
+        <Flex justify="between" className="relay-items-center" key={idx}>
+          <Flex className="relay-items-center relay-gap-2">
             <Text style="subtitle2" color="subtle">
               {transaction.label}
             </Text>
             {transaction.isRefund ? (
               <Pill
                 color="gray"
-                css={{
-                  py: '1',
-                  px: '6px',
-                  display: 'flex',
-                  alignItems: 'center'
-                }}
+                className="relay-py-1 relay-px-[6px] relay-flex relay-items-center"
               >
                 <FontAwesomeIcon
                   icon={faRotateRight}
-                  style={{ width: 16, height: 16, marginRight: 4 }}
+                  className="relay-w-[16px] relay-h-[16px] relay-mr-[4px]"
                   color="#889096"
                 />{' '}
                 <Text style="subtitle3">Refunded</Text>
@@ -181,7 +176,7 @@ export const TransactionsByChain: FC<TransactionsByChainProps> = ({
           transaction.txHashes.length === 0 &&
           isSolverStatusTimeout ? (
             <Flex direction="column">
-              <Skeleton css={{ height: 20 }} />
+              <Skeleton className="relay-h-[20px]" />
             </Flex>
           ) : null}
         </Flex>
diff --git a/packages/ui/src/components/common/TransactionModal/steps/WaitingForDepositStep.tsx b/packages/ui/src/components/common/TransactionModal/steps/WaitingForDepositStep.tsx
index 2e95437ee..df44315f8 100644
--- a/packages/ui/src/components/common/TransactionModal/steps/WaitingForDepositStep.tsx
+++ b/packages/ui/src/components/common/TransactionModal/steps/WaitingForDepositStep.tsx
@@ -56,19 +56,11 @@ export const WaitingForDepositStep: FC<WaitingForDepositStepProps> = ({
     <>
       <Flex
         direction="column"
-        css={{
-          '--borderColor': 'colors.subtle-border-color',
-          border: '1px solid var(--borderColor)',
-          borderRadius: 8,
-          px: '2',
-          py: '3',
-          mb: '3',
-          gap: '2'
-        }}
+        className="relay-border relay-border-solid relay-border-[var(--relay-colors-subtle-border-color)] relay-rounded-[8px] relay-px-2 relay-py-3 relay-mb-3 relay-gap-2"
       >
         <Text style="body2">
           Transfer funds manually from your {fromChain?.displayName} wallet to
-          Relay’s deposit address to complete the bridge.
+          Relay's deposit address to complete the bridge.
         </Text>
         <Anchor
           href="https://support.relay.link/en/articles/10269920-how-do-deposit-addresses-work"
@@ -77,37 +69,29 @@ export const WaitingForDepositStep: FC<WaitingForDepositStepProps> = ({
           Learn More
         </Anchor>
       </Flex>
-      <Flex css={{ gap: '1' }}>
-        <Flex css={{ gap: '1', width: '100%' }} direction="column">
+      <Flex className="relay-gap-1">
+        <Flex className="relay-gap-1 relay-w-full" direction="column">
           <Text style="subtitle2">Network</Text>
           <Pill
             color="gray"
-            css={{
-              display: 'flex',
-              alignItems: 'center',
-              py: '2'
-            }}
+            className="relay-flex relay-items-center relay-py-2"
             radius="squared"
           >
             <ChainIcon chainId={fromChain?.id} height={20} width={20} />
             <Text style="h6">{fromChain?.displayName}</Text>
           </Pill>
         </Flex>
-        <Flex css={{ gap: '1', width: '100%' }} direction="column">
+        <Flex className="relay-gap-1 relay-w-full" direction="column">
           <Text style="subtitle2">Amount to transfer</Text>
           <Pill
             color="gray"
-            css={{
-              display: 'flex',
-              alignItems: 'center',
-              py: '2'
-            }}
+            className="relay-flex relay-items-center relay-py-2"
             radius="squared"
           >
             {fromAmountFormatted ? (
               <>
                 {' '}
-                <Text style="h6" css={{ fontWeight: '500', mr: '1' }}>
+                <Text style="h6" className="relay-font-medium relay-mr-1">
                   {fromAmountFormatted}
                 </Text>
                 <img
@@ -115,14 +99,12 @@ export const WaitingForDepositStep: FC<WaitingForDepositStepProps> = ({
                   src={fromToken?.logoURI}
                   width={20}
                   height={20}
-                  style={{
-                    borderRadius: 9999
-                  }}
+                  className="relay-rounded-full"
                 />
                 <Text style="h6">{fromToken?.symbol}</Text>
               </>
             ) : (
-              <Skeleton css={{ height: 24, width: '100%' }} />
+              <Skeleton className="relay-h-[24px] relay-w-full" />
             )}{' '}
           </Pill>
         </Flex>
@@ -131,85 +113,55 @@ export const WaitingForDepositStep: FC<WaitingForDepositStepProps> = ({
       <Pill
         radius="rounded"
         color="gray"
-        css={{ display: 'flex', alignItems: 'center', gap: '3', p: '3' }}
+        className="relay-flex relay-items-center relay-gap-3 relay-p-3"
       >
         {isFetchingQuote ? (
-          <Skeleton css={{ height: 21, width: '100%' }} />
+          <Skeleton className="relay-h-[21px] relay-w-full" />
         ) : (
           <>
-            <Text style="subtitle2" css={{ marginRight: 'auto' }}>
+            <Text style="subtitle2" className="relay-mr-auto">
               {truncateAddress(depositAddress, '...', 28, 4)}
             </Text>
             {qrcodeUrl ? (
               <Popover>
-                <PopoverTrigger style={{ cursor: 'pointer' }}>
-                  <Box css={{ color: 'gray9' }}>
+                <PopoverTrigger className="relay-cursor-pointer">
+                  <Box className="relay-text-[color:var(--relay-colors-gray9)]">
                     <FontAwesomeIcon
                       icon={faQrcode}
-                      style={{ width: 16, height: 16 }}
+                      className="relay-w-[16px] relay-h-[16px]"
                     />
                   </Box>
                 </PopoverTrigger>
                 <PopoverPortal>
-                  <PopoverContent style={{ zIndex: 9999 }} sideOffset={4}>
-                    <Box
-                      css={{
-                        boxShadow: '0px 1px 5px rgba(0,0,0,0.2)',
-                        borderRadius: 8,
-                        overflow: 'hidden',
-                        transition: 'transform 0.3s ease',
-                        '&:hover': {
-                          transform: 'scale(1.25)'
-                        }
-                      }}
+                  <PopoverContent className="relay-z-[9999]" sideOffset={4}>
+                    <div
+                      className="relay-rounded-[8px] relay-overflow-hidden relay-transition-transform relay-duration-300 relay-ease-in-out hover:relay-scale-125 relay-shadow-[0px_1px_5px_rgba(0,0,0,0.2)]"
                     >
-                      <Box
-                        css={{
-                          background: 'modal-background',
-                          p: '2'
-                        }}
+                      <div
+                        className="relay-p-2 relay-bg-[var(--relay-colors-modal-background)]"
                       >
                         <Flex
-                          css={{ margin: '0 auto', width: 105, height: 105 }}
+                          className="relay-mx-auto relay-w-[105px] relay-h-[105px]"
                         >
                           <Flex
-                            css={{
-                              position: 'absolute',
-                              width: 105,
-                              height: 105,
-                              alignItems: 'center',
-                              justifyContent: 'center'
-                            }}
+                            className="relay-absolute relay-items-center relay-justify-center relay-w-[105px] relay-h-[105px]"
                           >
                             <Flex
-                              css={{
-                                position: 'relative',
-                                zIndex: '999',
-                                transform: 'translate3d(0,0,0)'
-                              }}
+                              className="relay-relative relay-z-[999] relay-transform-gpu"
                             >
                               <ChainIcon
                                 chainId={fromChain?.id}
                                 height={14}
                                 width={14}
-                                css={{
-                                  borderRadius: 4,
-                                  border: '1.5px solid white',
-                                  position: 'absolute',
-                                  bottom: 0,
-                                  right: 0
-                                }}
+                                className="relay-absolute relay-bottom-0 relay-right-0 relay-border relay-border-solid relay-border-white"
+                                borderRadius={4}
                               />
                               <img
                                 alt={fromToken?.name}
                                 src={fromToken?.logoURI}
                                 width={33}
                                 height={33}
-                                style={{
-                                  borderRadius: '100%',
-                                  border: '1.5px solid white',
-                                  background: 'white'
-                                }}
+                                className="relay-rounded-full relay-border-[1.5px] relay-border-solid relay-border-white relay-bg-white"
                               />
                             </Flex>
                           </Flex>
@@ -219,20 +171,16 @@ export const WaitingForDepositStep: FC<WaitingForDepositStepProps> = ({
                             height={105}
                             level={'H'}
                             imageSettings={{
-                              src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAhCAYAAAC803lsAAAMP2lDQ1BJQ0MgUHJvZmlsZQAASImVVwdYU8kWnluSkEBoAQSkhN4EESkBpITQQu8INkISIJQQA0HFjiwquBZULGBDV0UUrIDYETuLYu8LKgrKuliwK29SQNd95Xvn++be//5z5j9nzp1bBgC1kxyRKBtVByBHmC+OCfKjj09KppN6AAJQQAE6wJLDzRMxo6LCALSh89/t3U3oDe2avVTrn/3/1TR4/DwuAEgUxKm8PG4OxAcBwKu4InE+AEQpbzYtXyTFsAEtMUwQ4kVSnC7HVVKcKsd7ZT5xMSyIWwFQUuFwxOkAqF6BPL2Amw41VPshdhTyBEIA1OgQe+fk5PIgToHYGvqIIJbqM1J/0En/m2bqsCaHkz6M5XORmZK/IE+UzZnxf5bjf1tOtmQohiVsKhni4BjpnGHdbmflhkqxCsR9wtSISIg1If4g4Mn8IUYpGZLgeLk/asDNY8GawbsMUEcexz8UYgOIA4XZEWEKPjVNEMiGGK4QdLognx0HsS7Ei/h5AbEKn83i3BhFLLQhTcxiKvjzHLEsrjTWQ0lWPFOh/zqDz1boY6qFGXGJEFMgNi8QJERArAqxQ15WbKjCZ1xhBitiyEcsiZHmbw5xDF8Y5CfXxwrSxIExCv/SnLyh+WKbMwTsCAXen58RFyyvD9bK5cjyh3PBrvCFzPghHX7e+LChufD4/gHyuWM9fGF8rELngyjfL0Y+FqeIsqMU/rgpPztIyptC7JxXEKsYiyfkwwUp18fTRPlRcfI88cJMTkiUPB98OQgDLOAP6EACWyrIBZlA0N7X2Aev5D2BgAPEIB3wgb2CGRqRKOsRwmMsKAR/QsQHecPj/GS9fFAA+a/DrPxoD9JkvQWyEVngKcQ5IBRkw2uJbJRwOFoCeAIZwT+ic2DjwnyzYZP2/3t+iP3OMCETpmAkQxHpakOexACiPzGYGEi0wfVxb9wTD4NHX9iccAbuPjSP7/6Ep4QOwiPCDUIn4c4UQZH4pyzDQSfUD1TUIvXHWuCWUNMF98O9oDpUxnVwfWCPO8M4TNwHRnaBLEuRt7Qq9J+0/zaDH+6Gwo/sSEbJI8i+ZOufR6raqroMq0hr/WN95LmmDtebNdzzc3zWD9XnwXPoz57YIuwAdg47hV3AjmKNgI6dwJqwNuyYFA+vriey1TUULUaWTxbUEfwj3tCdlVYyz7HWsdfxi7wvnz9d+o4GrFzRDLEgPSOfzoRfBD6dLeQ6jKI7OTo5AyD9vshfX2+iZd8NRKftO7fgDwC8TgwODh75zoWcAGCfG3z8D3/nrBnw06EMwPnDXIm4QM7h0gMBviXU4JOmB4yAGbCG83ECrsAT+IIAEAIiQRxIApNh9hlwnYvBNDALzAcloAwsB6vBerAJbAU7wR6wHzSCo+AUOAsugSvgBrgHV083eAH6wTvwGUEQEkJFaIgeYoxYIHaIE8JAvJEAJAyJQZKQFCQdESISZBayAClDypH1yBakBtmHHEZOIReQDuQO0oX0Iq+RTyiGqqBaqCFqiY5GGSgTDUXj0EloOjoVLUSL0aXoWrQa3Y02oKfQS+gNtBN9gQ5gAFPGdDATzB5jYCwsEkvG0jAxNgcrxSqwaqwOa4b3+RrWifVhH3EiTsPpuD1cwcF4PM7Fp+Jz8CX4enwn3oC34tfwLrwf/0agEgwIdgQPApswnpBOmEYoIVQQthMOEc7AZ6mb8I5IJOoQrYhu8FlMImYSZxKXEDcQ64kniR3Ex8QBEomkR7IjeZEiSRxSPqmEtI60m3SCdJXUTfqgpKxkrOSkFKiUrCRUKlKqUNqldFzpqtIzpc9kdbIF2YMcSeaRZ5CXkbeRm8mXyd3kzxQNihXFixJHyaTMp6yl1FHOUO5T3igrK5squytHKwuU5ymvVd6rfF65S/mjiqaKrQpLZaKKRGWpyg6Vkyp3VN5QqVRLqi81mZpPXUqtoZ6mPqR+UKWpOqiyVXmqc1UrVRtUr6q+VCOrWagx1SarFapVqB1Qu6zWp05Wt1RnqXPU56hXqh9Wv6U+oEHTGKMRqZGjsURjl8YFjR5NkqalZoAmT7NYc6vmac3HNIxmRmPRuLQFtG20M7RuLaKWlRZbK1OrTGuPVrtWv7amtrN2gvZ07UrtY9qdOpiOpQ5bJ1tnmc5+nZs6n0YYjmCO4I9YPKJuxNUR73VH6vrq8nVLdet1b+h+0qPrBehl6a3Qa9R7oI/r2+pH60/T36h/Rr9vpNZIz5HckaUj94+8a4Aa2BrEGMw02GrQZjBgaGQYZCgyXGd42rDPSMfI1yjTaJXRcaNeY5qxt7HAeJXxCePndG06k55NX0tvpfebGJgEm0hMtpi0m3w2tTKNNy0yrTd9YEYxY5ilma0yazHrNzc2DzefZV5rfteCbMGwyLBYY3HO4r2llWWi5ULLRsseK10rtlWhVa3VfWuqtY/1VOtq6+s2RBuGTZbNBpsrtqiti22GbaXtZTvUztVOYLfBrmMUYZT7KOGo6lG37FXsmfYF9rX2XQ46DmEORQ6NDi9Hm49OHr1i9LnR3xxdHLMdtzneG6M5JmRM0ZjmMa+dbJ24TpVO18dSxwaOnTu2aewrZztnvvNG59suNJdwl4UuLS5fXd1cxa51rr1u5m4pblVutxhajCjGEsZ5d4K7n/tc96PuHz1cPfI99nv85WnvmeW5y7NnnNU4/rht4x57mXpxvLZ4dXrTvVO8N3t3+pj4cHyqfR75mvnyfLf7PmPaMDOZu5kv/Rz9xH6H/N6zPFizWSf9Mf8g/1L/9gDNgPiA9QEPA00D0wNrA/uDXIJmBp0MJgSHBq8IvsU2ZHPZNez+ELeQ2SGtoSqhsaHrQx+F2YaJw5rD0fCQ8JXh9yMsIoQRjZEgkh25MvJBlFXU1Kgj0cToqOjK6KcxY2JmxZyLpcVOid0V+y7OL25Z3L1463hJfEuCWsLEhJqE94n+ieWJneNHj589/lKSfpIgqSmZlJyQvD15YELAhNUTuie6TCyZeHOS1aTpky5M1p+cPfnYFLUpnCkHUggpiSm7Ur5wIjnVnIFUdmpVaj+XxV3DfcHz5a3i9fK9+OX8Z2leaeVpPele6SvTezN8Mioy+gQswXrBq8zgzE2Z77Mis3ZkDWYnZtfnKOWk5BwWagqzhK25RrnTcztEdqISUedUj6mrp/aLQ8Xb85C8SXlN+VrwR75NYi35RdJV4F1QWfBhWsK0A9M1pgunt82wnbF4xrPCwMLfZuIzuTNbZpnMmj+razZz9pY5yJzUOS1zzeYWz+2eFzRv53zK/Kz5vxc5FpUXvV2QuKC52LB4XvHjX4J+qS1RLRGX3FrouXDTInyRYFH74rGL1y3+VsorvVjmWFZR9mUJd8nFX8f8uvbXwaVpS9uXuS7buJy4XLj85gqfFTvLNcoLyx+vDF/ZsIq+qnTV29VTVl+ocK7YtIayRrKmc23Y2qZ15uuWr/uyPmP9jUq/yvoqg6rFVe838DZc3ei7sW6T4aayTZ82Czbf3hK0paHasrpiK3Frwdan2xK2nfuN8VvNdv3tZdu/7hDu6NwZs7O1xq2mZpfBrmW1aK2ktnf3xN1X9vjvaaqzr9tSr1Nfthfslex9vi9l3839oftbDjAO1B20OFh1iHaotAFpmNHQ35jR2NmU1NRxOORwS7Nn86EjDkd2HDU5WnlM+9iy45TjxccHTxSeGDgpOtl3Kv3U45YpLfdOjz99vTW6tf1M6JnzZwPPnj7HPHfivNf5oxc8Lhy+yLjYeMn1UkObS9uh311+P9Tu2t5w2e1y0xX3K80d4zqOX/W5euqa/7Wz19nXL92IuNFxM/7m7VsTb3Xe5t3uuZN959Xdgruf7827T7hf+kD9QcVDg4fVf9j8Ud/p2nmsy7+r7VHso3uPuY9fPMl78qW7+Cn1acUz42c1PU49R3sDe688n/C8+4Xoxee+kj81/qx6af3y4F++f7X1j+/vfiV+Nfh6yRu9NzveOr9tGYgaePgu593n96Uf9D7s/Mj4eO5T4qdnn6d9IX1Z+9Xma/O30G/3B3MGB0UcMUf2K4DBhqalAfB6BwDUJABocH9GmSDf/8kMke9ZZQj8JyzfI8rMFYA6+P8e3Qf/bm4BsHcb3H5BfbWJAERRAYhzB+jYscNtaK8m21dKjQj3AZujv6bmpIJ/Y/I95w95/3wGUlVn8PP5XwFtfFZdDkCYAAAAlmVYSWZNTQAqAAAACAAFARIAAwAAAAEAAQAAARoABQAAAAEAAABKARsABQAAAAEAAABSASgAAwAAAAEAAgAAh2kABAAAAAEAAABaAAAAAAAAAJAAAAABAAAAkAAAAAEAA5KGAAcAAAASAAAAhKACAAQAAAABAAAAIqADAAQAAAABAAAAIQAAAABBU0NJSQAAAFNjcmVlbnNob3Qpdkf5AAAACXBIWXMAABYlAAAWJQFJUiTwAAAC12lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNi4wLjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MTk0PC9leGlmOlBpeGVsWERpbWVuc2lvbj4KICAgICAgICAgPGV4aWY6VXNlckNvbW1lbnQ+U2NyZWVuc2hvdDwvZXhpZjpVc2VyQ29tbWVudD4KICAgICAgICAgPGV4aWY6UGl4ZWxZRGltZW5zaW9uPjE4NjwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgICAgIDx0aWZmOlJlc29sdXRpb25Vbml0PjI8L3RpZmY6UmVzb2x1dGlvblVuaXQ+CiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjE0NDwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgICAgPHRpZmY6WFJlc29sdXRpb24+MTQ0PC90aWZmOlhSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4Kmj5GzQAAACtJREFUWAnt0DEBAAAAwqD1T20ND4hAYcCAAQMGDBgwYMCAAQMGDBgwcDEwEakAAc3C1KAAAAAASUVORK5CYII=',
+                              src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAhCAYAAAC803lsAAAMP2lDQ1BJQ0MgUHJvZmlsZQAASImVVwdYU8kWnluSkEBoAQSkhN4EESkBpITQQu8INkISIJQQA0HFjiwquBZULGBDV0UUrIDYETuLYu8LKgrKuliwK29SQNd95Xvn++be//5z5j9nzp1bBgC1kxyRKBtVByBHmC+OCfKjj09KppN6AAJQQAE6wJLDzRMxo6LCALSh89/t3U3oDe2avVTrn/3/1TR4/DwuAEgUxKm8PG4OxAcBwKu4InE+AEQpbzYtXyTFsAEtMUwQ4kVSnC7HVVKcKsd7ZT5xMSyIWwFQUuFwxOkAqF6BPL2Amw41VPshdhTyBEIA1OgQe+fk5PIgToHYGvqIIJbqM1J/0En/m2bqsCaHkz6M5XORmZK/IE+UzZnxf5bjf1tOtmQohiVsKhni4BjpnGHdbmflhkqxCsR9wtSISIg1If4g4Mn8IUYpGZLgeLk/asDNY8GawbsMUEcexz8UYgOIA4XZEWEKPjVNEMiGGK4QdLognx0HsS7Ei/h5AbEKn83i3BhFLLQhTcxiKvjzHLEsrjTWQ0lWPFOh/zqDz1boY6qFGXGJEFMgNi8QJERArAqxQ15WbKjCZ1xhBitiyEcsiZHmbw5xDF8Y5CfXxwrSxIExCv/SnLyh+WKbMwTsCAXen58RFyyvD9bK5cjyh3PBrvCFzPghHX7e+LChufD4/gHyuWM9fGF8rELngyjfL0Y+FqeIsqMU/rgpPztIyptC7JxXEKsYiyfkwwUp18fTRPlRcfI88cJMTkiUPB98OQgDLOAP6EACWyrIBZlA0N7X2Aev5D2BgAPEIB3wgb2CGRqRKOsRwmMsKAR/QsQHecPj/GS9fFAA+a/DrPxoD9JkvQWyEVngKcQ5IBRkw2uJbJRwOFoCeAIZwT+ic2DjwnyzYZP2/3t+iP3OMCETpmAkQxHpakOexACiPzGYGEi0wfVxb9wTD4NHX9iccAbuPjSP7/6Ep4QOwiPCDUIn4c4UQZH4pyzDQSfUD1TUIvXHWuCWUNMF98O9oDpUxnVwfWCPO8M4TNwHRnaBLEuRt7Qq9J+0/zaDH+6Gwo/sSEbJI8i+ZOufR6raqroMq0hr/WN95LmmDtebNdzzc3zWD9XnwXPoz57YIuwAdg47hV3AjmKNgI6dwJqwNuyYFA+vriey1TUULUaWTxbUEfwj3tCdlVYyz7HWsdfxi7wvnz9d+o4GrFzRDLEgPSOfzoRfBD6dLeQ6jKI7OTo5AyD9vshfX2+iZd8NRKftO7fgDwC8TgwODh75zoWcAGCfG3z8B3/nrBnw06EMwPnDXIm4QM7h0gMBviXU4JOmB4yAGbCG83ECrsAT+IIAEAIiQRxIApNh9hlwnYvBNDALzAcloAwsB6vBerAJbAU7wR6wHzSCo+AUOAsugSvgBrgHV083eAH6wTvwGUEQEkJFaIgeYoxYIHaIE8JAvJEAJAyJQZKQFCQdESISZBayAClDypH1yBakBtmHHEZOIReQDuQO0oX0Iq+RTyiGqqBaqCFqiY5GGSgTDUXj0EloOjoVLUSL0aXoWrQa3Y02oKfQS+gNtBN9gQ5gAFPGdDATzB5jYCwsEkvG0jAxNgcrxSqwaqwOa4b3+RrWifVhH3EiTsPpuD1cwcF4PM7Fp+Jz8CX4enwn3oC34tfwLrwf/0agEgwIdgQPApswnpBOmEYoIVQQthMOEc7AZ6mb8I5IJOoQrYhu8FlMImYSZxKXEDcQ64kniR3Ex8QBEomkR7IjeZEiSRxSPqmEtI60m3SCdJXUTfqgpKxkrOSkFKiUrCRUKlKqUNqldFzpqtIzpc9kdbIF2YMcSeaRZ5CXkbeRm8mXyd3kzxQNihXFixJHyaTMp6yl1FHOUO5T3igrK5squytHKwuU5ymvVd6rfF65S/mjiqaKrQpLZaKKRGWpyg6Vkyp3VN5QqVRLqi81mZpPXUqtoZ6mPqR+UKWpOqiyVXmqc1UrVRtUr6q+VCOrWagx1SarFapVqB1Qu6zWp05Wt1RnqXPU56hXqh9Wv6U+oEHTGKMRqZGjsURjl8YFjR5NkqalZoAmT7NYc6vmac3HNIxmRmPRuLQFtG20M7RuLaKWlRZbK1OrTGuPVrtWv7amtrN2gvZ07UrtY9qdOpiOpQ5bJ1tnmc5+nZs6n0YYjmCO4I9YPKJuxNUR77VH6vrq8nVLdet1b+h+0qPrBehl6a3Qa9R7oI/r2+pH60/T36h/Rr9vpNZIz5HckaUj94+8a4Aa2BrEGMw02GrQZjBgaGQYZCgyXGd42rDPSMfI1yjTaJXRcaNeY5qxt7HAeJXxCePndG06k55NX0tvpfebGJgEm0hMtpi0m3w2tTKNNy0yrTd9YEYxY5ilma0yazHrNzc2DzefZV5rfteCbMGwyLBYY3HO4r2llWWi5ULLRsseK10rtlWhVa3VfWuqtY/1VOtq6+s2RBuGTZbNBpsrtqiti22GbaXtZTvUztVOYLfBrmMUYZT7KOGo6lG37FXsmfYF9rX2XQ46DmEORQ6NDi9Hm49OHr1i9LnR3xxdHLMdtzneG6M5JmRM0ZjmMa+dbJ24TpVO18dSxwaOnTu2aewrZztnvvNG59suNJdwl4UuLS5fXd1cxa51rr1u5m4pblVutxhajCjGEsZ5d4K7n/tc96PuHz1cPfI99nv85WnvmeW5y7NnnNU4/rht4x57mXpxvLZ4dXrTvVO8N3t3+pj4cHyqfR75mvnyfLf7PmPaMDOZu5kv/Rz9xH6H/N6zPFizWSf9Mf8g/1L/9gDNgPiA9QEPA00D0wNrA/uDXIJmBp0MJgSHBq8IvsU2ZHPZNez+ELeQ2SGtoSqhsaHrQx+F2YaJw5rD0fCQ8JXh9yMsIoQRjZEgkh25MvJBlFXU1Kgj0cToqOjK6KcxY2JmxZyLpcVOid0V+y7OL25Z3L1463hJfEuCWsLEhJqE94n+ieWJneNHj589/lKSfpIgqSmZlJyQvD15YELAhNUTuie6TCyZeHOS1aTpky5M1p+cPfnYFLUpnCkHUggpiSm7Ur5wIjnVnIFUdmpVaj+XxV3DfcHz5a3i9fK9+OX8Z2leaeVpPele6SvTezN8Mioy+gQswXrBq8zgzE2Z77Mis3ZkDWYnZtfnKOWk5BwWagqzhK25RrnTcztEdqISUedUj6mrp/aLQ8Xb85C8SXlN+VrwR75NYi35RdJV4F1QWfBhWsK0A9M1pgunt82wnbF4xrPCwMLfZuIzuTNbZpnMmj+razZz9pY5yJzUOS1zzeYWz+2eFzRv53zK/Kz5vxc5FpUXvV2QuKC52LB4XvHjX4J+qS1RLRGX3FrouXDTInyRYFH74rGL1y3+VsorvVjmWFZR9mUJd8nFX8f8uvbXwaVpS9uXuS7buJy4XLj85gqfFTvLNcoLyx+vDF/ZsIq+qnTV29VTVl+ocK7YtIayRrKmc23Y2qZ15uuWr/uyPmP9jUq/yvoqg6rFVe838DZc3ei7sW6T4aayTZ82Czbf3hK0paHasrpiK3Frwdan2xK2nfuN8VvNdv3tZdu/7hDu6NwZs7O1xq2mZpfBrmW1aK2ktnf3xN1X9vjvaaqzr9tSr1Nfthfslex9vi9l3839oftbDjAO1B20OFh1iHaotAFpmNHQ35jR2NmU1NRxOORwS7Nn86EjDkd2HDU5WnlM+9iy45TjxccHTxSeGDgpOtl3Kv3U45YpLfdOjz99vTW6tf1M6JnzZwPPnj7HPHfivNf5oxc8Lhy+yLjYeMn1UkObS9uh311+P9Tu2t5w2e1y0xX3K80d4zqOX/W5euqa/7Wz19nXL92IuNFxM/7m7VsTb3Xe5t3uuZN959Xdgruf7827T7hf+kD9QcVDg4fVf9j8Ud/p2nmsy7+r7VHso3uPuY9fPMl78qW7+Cn1acUz42c1PU49R3sDe688n/C8+4Xoxee+kj81/qx6af3y4F++f7X1j+/vfiV+Nfh6yRu9NzveOr9tGYgaePgu593n96Uf9D7s/Mj4eO5T4qdnn6d9IX1Z+9Xma/O30G/3B3MGB0UcMUf2K4DBhqalAfB6BwDUJABocH9GmSDf/8kMke9ZZQj8JyzfI8rMFYA6+P8e3Qf/bm4BsHcb3H5BfbWJAERRAYhzB+jYscNtaK8m21dKjQj3AZujv6bmpIJ/Y/I95w95/3wGUlVn8PP5XwFtfFZdDkCYAAAAlmVYSWZNTQAqAAAACAAFARIAAwAAAAEAAQAAARoABQAAAAEAAABKARsABQAAAAEAAABSASgAAwAAAAEAAgAAh2kABAAAAAEAAABaAAAAAAAAAJAAAAABAAAAkAAAAAEAA5KGAAcAAAASAAAAhKACAAQAAAABAAAAIqADAAQAAAABAAAAIQAAAABBU0NJSQAAAFNjcmVlbnNob3Qpdkf5AAAACXBIWXMAABYlAAAWJQFJUiTwAAAC12lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNi4wLjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MTk0PC9leGlmOlBpeGVsWERpbWVuc2lvbj4KICAgICAgICAgPGV4aWY6VXNlckNvbW1lbnQ+U2NyZWVuc2hvdDwvZXhpZjpVc2VyQ29tbWVudD4KICAgICAgICAgPGV4aWY6UGl4ZWxZRGltZW5zaW9uPjE4NjwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgICAgIDx0aWZmOlJlc29sdXRpb25Vbml0PjI8L3RpZmY6UmVzb2x1dGlvblVuaXQ+CiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjE0NDwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgICAgPHRpZmY6WFJlc29sdXRpb24+MTQ0PC90aWZmOlhSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4Kmj5GzQAAACtJREFUWAnt0DEBAAAAwqD1T20ND4hAYcCAAQMGDBgwYMCAAQMGDBgwcDEwEakAAc3C1KAAAAAASUVORK5CYII=',
                               height: 33,
                               width: 33,
                               excavate: true
                             }}
-                            style={{
-                              margin: '0 auto',
-                              width: 105,
-                              height: 105
-                            }}
+                            className="relay-mx-auto relay-w-[105px] relay-h-[105px]"
                           />
                         </Flex>
-                      </Box>
-                    </Box>
+                      </div>
+                    </div>
                   </PopoverContent>
                 </PopoverPortal>
               </Popover>
@@ -243,14 +191,10 @@ export const WaitingForDepositStep: FC<WaitingForDepositStepProps> = ({
       </Pill>
       <Button
         disabled={true}
-        css={{
-          color: 'button-disabled-color !important',
-          mt: 8,
-          justifyContent: 'center'
-        }}
+        className="relay-text-[color:var(--relay-colors-button-disabled-color)_!important] relay-mt-2 relay-justify-center"
       >
         <LoadingSpinner
-          css={{ height: 16, width: 16, fill: 'button-disabled-color' }}
+          className="relay-h-4 relay-w-4 relay-fill-[var(--relay-colors-button-disabled-color)]"
         />
         Waiting for you to transfer funds
       </Button>
diff --git a/packages/ui/src/components/common/UnverifiedTokenModal.tsx b/packages/ui/src/components/common/UnverifiedTokenModal.tsx
index be6af4ecc..24aebc32d 100644
--- a/packages/ui/src/components/common/UnverifiedTokenModal.tsx
+++ b/packages/ui/src/components/common/UnverifiedTokenModal.tsx
@@ -15,6 +15,7 @@ import {
   setRelayUiKitData
 } from '../../utils/localStorage.js'
 import { EventNames } from '../../constants/events.js'
+import { cn } from '../../utils/cn.js'
 
 type UnverifiedTokenModalProps = {
   open: boolean
@@ -51,68 +52,48 @@ export const UnverifiedTokenModal: FC<UnverifiedTokenModalProps> = ({
       onCloseButtonClicked={() => {
         onDecline?.(data?.token, data?.context)
       }}
-      css={{
-        overflow: 'hidden',
-        zIndex: 10000001
-      }}
+      className="relay-overflow-hidden relay-z-[10000001]"
       overlayZIndex={10000001}
     >
       <Flex
         direction="column"
-        css={{
-          width: '100%',
-          height: '100%',
-          gap: '4',
-          sm: {
-            width: 370
-          }
-        }}
+        className="relay-w-full relay-h-full relay-gap-4 sm:relay-w-[370px]"
       >
         <Text style="h6">Unverified Token</Text>
-        <Flex align="center" direction="column" css={{ gap: '4' }}>
+        <Flex align="center" direction="column" className="relay-gap-4">
           <Flex align="center" justify="center">
             {isValidTokenLogo ? (
               <img
                 src={data?.token.logoURI}
                 alt={data?.token?.name}
-                style={{ width: '48px', height: '48px', borderRadius: 9999 }}
+                className="relay-w-[48px] relay-h-[48px] relay-rounded-full"
               />
             ) : null}
             <Flex
               align="center"
-              css={{
-                width: '48px',
-                height: '48px',
-                background: 'amber3',
-                borderRadius: 9999,
-                p: '3',
-                marginLeft: isValidTokenLogo ? '-20px' : '0'
-              }}
+              className={cn(
+                'relay-w-12 relay-h-12 relay-bg-[var(--relay-colors-amber3)] relay-rounded-full relay-p-3',
+                isValidTokenLogo ? '-relay-ml-5' : 'relay-ml-0'
+              )}
             >
-              <Box css={{ color: 'amber9' }}>
+              <Box className="relay-text-[color:var(--relay-colors-amber9)]">
                 <FontAwesomeIcon
                   icon={faExclamationTriangle}
                   width={24}
                   height={24}
-                  style={{ width: 24, height: 24 }}
+                  className="relay-w-[24px] relay-h-[24px]"
                 />
               </Box>
             </Flex>
           </Flex>
-          <Text style="subtitle2" color="subtle" css={{ textAlign: 'center' }}>
-            This token isn’t traded on leading U.S. centralized exchanges or
+          <Text style="subtitle2" color="subtle" className="relay-text-center">
+            This token isn't traded on leading U.S. centralized exchanges or
             frequently swapped on major DEXes. Always conduct your own research
             before trading.
           </Text>
           <Flex
             align="center"
-            css={{
-              gap: '3',
-              p: '3',
-              bg: 'gray2',
-              borderRadius: '12px',
-              width: '100%'
-            }}
+            className="relay-gap-3 relay-p-3 relay-bg-[var(--relay-colors-gray2)] relay-rounded-[12px] relay-w-full"
           >
             <Text style="subtitle2" ellipsify>
               {data?.token?.address}
@@ -122,26 +103,21 @@ export const UnverifiedTokenModal: FC<UnverifiedTokenModalProps> = ({
             <Anchor
               href={`${chain?.explorerUrl}/token/${data?.token?.address}`}
               target="_blank"
-              css={{ height: '14px' }}
+              className="relay-h-[14px]"
             >
-              <Box css={{ color: 'gray9', _hover: { color: 'gray11' } }}>
+              <Box className="relay-text-[color:var(--relay-colors-gray9)] hover:relay-text-[color:var(--relay-colors-gray11)]">
                 <FontAwesomeIcon icon={faExternalLink} />
               </Box>
             </Anchor>
           </Flex>
-          <Flex css={{ gap: '3', width: '100%' }}>
+          <Flex className="relay-gap-3 relay-w-full">
             <Button
               onClick={() => {
                 onDecline?.(data?.token, data?.context)
                 onOpenChange(false)
               }}
               color="ghost"
-              css={{
-                flex: 1,
-                justifyContent: 'center',
-                bg: 'gray3',
-                _hover: { bg: 'gray4' }
-              }}
+              className="relay-flex-1 relay-justify-center relay-bg-[var(--relay-colors-gray3)] hover:relay-bg-[var(--relay-colors-gray4)]"
             >
               Cancel
             </Button>
@@ -168,7 +144,7 @@ export const UnverifiedTokenModal: FC<UnverifiedTokenModalProps> = ({
                 onAcceptToken(data?.token, data?.context)
               }}
               color="warning"
-              css={{ flex: 1, justifyContent: 'center', px: '16px' }}
+              className="relay-flex-1 relay-justify-center relay-px-4"
             >
               I Understand
             </Button>
diff --git a/packages/ui/src/components/primitives/AccessibleList.tsx b/packages/ui/src/components/primitives/AccessibleList.tsx
index 5a753bce6..90886f854 100644
--- a/packages/ui/src/components/primitives/AccessibleList.tsx
+++ b/packages/ui/src/components/primitives/AccessibleList.tsx
@@ -1,49 +1,24 @@
 import React, { forwardRef, type FC } from 'react'
 import * as ToggleGroup from '@radix-ui/react-toggle-group'
-import {
-  cva,
-  css as designCss,
-  type Styles
-} from '@relayprotocol/relay-design-system/css'
-
-const AccessibleListContainerCss = cva({
-  base: {
-    display: 'flex',
-    flexDirection: 'column'
-  }
-})
-
-const AccessibleListItemCss = cva({
-  base: {
-    display: 'flex',
-    alignItems: 'center',
-    position: 'relative',
-    userSelect: 'none',
-    cursor: 'pointer',
-    '&[data-state=on]': {}
-  }
-})
+import { cn } from '../../utils/cn.js'
 
 type AccessibleListProps = {
   children: React.ReactNode
   onSelect: (value: string) => void
-  css?: Styles
+  className?: string
 }
 
 export const AccessibleList: FC<AccessibleListProps> = ({
   children,
   onSelect,
-  css
+  className
 }) => {
   return (
     <ToggleGroup.Root
       type="single"
       loop={false}
       onValueChange={onSelect}
-      className={designCss(
-        AccessibleListContainerCss.raw(),
-        designCss.raw(css)
-      )}
+      className={cn('relay-flex relay-flex-col', className)}
     >
       {children}
     </ToggleGroup.Root>
@@ -53,18 +28,21 @@ export const AccessibleList: FC<AccessibleListProps> = ({
 type AccessibleListItemProps = {
   children: React.ReactNode
   value: string
-  css?: Styles
+  className?: string
   asChild?: boolean
 }
 
 export const AccessibleListItem = forwardRef<
   HTMLButtonElement,
   AccessibleListItemProps
->(({ children, value, css, asChild, ...props }, forwardedRef) => {
+>(({ children, value, className, asChild, ...props }, forwardedRef) => {
   return (
     <ToggleGroup.Item
       value={value}
-      className={designCss(AccessibleListItemCss.raw(), designCss.raw(css))}
+      className={cn(
+        'relay-flex relay-items-center relay-relative relay-select-none relay-cursor-pointer',
+        className
+      )}
       asChild={asChild}
       {...props}
       ref={forwardedRef}
diff --git a/packages/ui/src/components/primitives/Anchor.tsx b/packages/ui/src/components/primitives/Anchor.tsx
index f1c71bbb3..194143218 100644
--- a/packages/ui/src/components/primitives/Anchor.tsx
+++ b/packages/ui/src/components/primitives/Anchor.tsx
@@ -1,80 +1,50 @@
-import {
-  cva,
-  css as designCss,
-  type Styles
-} from '@relayprotocol/relay-design-system/css'
+import { cva, type VariantProps } from 'class-variance-authority'
 import type { AnchorHTMLAttributes, ButtonHTMLAttributes, FC } from 'react'
+import { cn } from '../../utils/cn.js'
 
-const AnchorStyle = cva({
-  base: {
-    cursor: 'pointer',
-    width: 'max-content',
-    fontWeight: 500,
-    fontSize: 14,
-    color: 'anchor-color',
-    _hover: {
-      color: 'anchor-hover-color'
-    },
-    '--focusColor': 'colors.focus-color',
-    _focusVisible: {
-      boxShadow: '0 0 0 2px var(--focusColor)',
-      outline: 'none',
-      borderRadius: '4px'
-    }
-  },
-  variants: {
-    color: {
-      gray: {
-        color: 'gray11',
-        _hover: { color: 'gray12' }
-      },
-      base: {
-        color: 'anchor-color',
-        _hover: {
-          color: 'anchor-hover-color'
-        }
+const anchorVariants = cva(
+  [
+    'relay-cursor-pointer relay-w-max relay-font-medium relay-text-[14px]',
+    'relay-text-[color:var(--relay-colors-anchor-color)]',
+    'hover:relay-text-[color:var(--relay-colors-anchor-hover-color)]',
+    'focus-visible:relay-shadow-[0_0_0_2px_var(--relay-colors-focus-color)] focus-visible:relay-outline-none focus-visible:relay-rounded-[4px]'
+  ].join(' '),
+  {
+    variants: {
+      color: {
+        gray: 'relay-text-[color:var(--relay-colors-gray11)] hover:relay-text-[color:var(--relay-colors-gray12)]',
+        base: 'relay-text-[color:var(--relay-colors-anchor-color)] hover:relay-text-[color:var(--relay-colors-anchor-hover-color)]',
+        black: 'relay-text-[color:var(--relay-colors-gray12)] hover:relay-text-[color:var(--relay-colors-gray12)]'
       },
-      black: {
-        color: 'gray12',
-        _hover: {
-          color: 'gray12'
-        }
+      weight: {
+        heavy: 'relay-font-black',
+        bold: 'relay-font-bold',
+        semi_bold: 'relay-font-semibold'
       }
-    },
-    weight: {
-      heavy: { fontWeight: 900 },
-      bold: { fontWeight: 700 },
-      semi_bold: { fontWeight: 600 }
     }
   }
-})
+)
 
-type AnchorCssProps = Parameters<typeof AnchorStyle>['0']
+type AnchorVariantProps = VariantProps<typeof anchorVariants>
 
 const Anchor: FC<
-  AnchorHTMLAttributes<HTMLAnchorElement> & AnchorCssProps & { css?: Styles }
-> = ({ css, weight, color, ...props }) => {
+  AnchorHTMLAttributes<HTMLAnchorElement> & AnchorVariantProps & { className?: string }
+> = ({ className, weight, color, ...props }) => {
   return (
     <a
       {...props}
-      className={designCss(
-        AnchorStyle.raw({ weight, color }),
-        designCss.raw(css)
-      )}
-    ></a>
+      className={cn(anchorVariants({ weight, color }), className)}
+    />
   )
 }
 
 export const AnchorButton: FC<
-  ButtonHTMLAttributes<HTMLButtonElement> & AnchorCssProps & { css?: Styles }
-> = ({ css, weight, color, children, ...props }) => {
+  ButtonHTMLAttributes<HTMLButtonElement> & AnchorVariantProps & { className?: string }
+> = ({ className, weight, color, children, ...props }) => {
   return (
     <button
       {...props}
-      className={designCss(
-        AnchorStyle.raw({ weight, color }),
-        designCss.raw(css)
-      )}
+      className={cn(anchorVariants({ weight, color }), className)}
     >
       {children}
     </button>
diff --git a/packages/ui/src/components/primitives/Box.tsx b/packages/ui/src/components/primitives/Box.tsx
index b231b6003..9fb17d1fe 100644
--- a/packages/ui/src/components/primitives/Box.tsx
+++ b/packages/ui/src/components/primitives/Box.tsx
@@ -1,19 +1,11 @@
-import {
-  cva,
-  css as designCss,
-  type Styles
-} from '@relayprotocol/relay-design-system/css'
 import type { FC, PropsWithChildren } from 'react'
-
-const BoxCss = cva({})
-
-type BoxCssProps = Parameters<typeof BoxCss>['0']
+import { cn } from '../../utils/cn.js'
 
 const Box: FC<
-  { css?: Styles; id?: string } & BoxCssProps & PropsWithChildren
-> = ({ css, children, id, ...props }) => {
+  { className?: string; id?: string } & PropsWithChildren
+> = ({ className, children, id }) => {
   return (
-    <div className={designCss(BoxCss.raw(props), designCss.raw(css))} id={id}>
+    <div className={cn(className)} id={id}>
       {children}
     </div>
   )
diff --git a/packages/ui/src/components/primitives/Button.tsx b/packages/ui/src/components/primitives/Button.tsx
index eda70643d..cfe1761f3 100644
--- a/packages/ui/src/components/primitives/Button.tsx
+++ b/packages/ui/src/components/primitives/Button.tsx
@@ -1,163 +1,99 @@
-import {
-  cva,
-  css as designCss,
-  type Styles
-} from '@relayprotocol/relay-design-system/css'
+import { cva, type VariantProps } from 'class-variance-authority'
 import { forwardRef, type ButtonHTMLAttributes } from 'react'
+import { cn } from '../../utils/cn.js'
 
-const ButtonCss = cva({
-  base: {
-    cursor: 'pointer',
-    outline: 'none',
-    fontFamily: 'body',
-    fontWeight: 700,
-    fontSize: 16,
-    transition: 'background-color 250ms linear',
-    gap: '2',
-    display: 'inline-flex',
-    alignItems: 'center',
-    lineHeight: '20px',
-    '--focusColor': 'colors.focus-color',
-    _focusVisible: {
-      boxShadow: '0 0 0 2px var(--focusColor)'
-    },
-    _disabled: {
-      cursor: 'not-allowed',
-      backgroundColor: 'button-disabled-background',
-      color: 'button-disabled-color',
-      _hover: {
-        backgroundColor: 'button-disabled-background',
-        color: 'button-disabled-color'
-      }
-    }
-  },
-  variants: {
-    color: {
-      primary: {
-        backgroundColor: 'primary-button-background',
-        color: 'primary-button-color',
-        '&:hover': {
-          backgroundColor: 'primary-button-hover-background',
-          color: 'primary-button-hover-color'
-        }
-      },
-      secondary: {
-        backgroundColor: 'primary4',
-        color: 'primary12',
-        '&:hover': {
-          backgroundColor: 'secondary-button-hover-background',
-          color: 'secondary-button-hover-color'
-        }
-      },
-      ghost: {
-        color: 'text-default',
-        backgroundColor: 'transparent'
-      },
-      white: {
-        '--borderColor': 'colors.subtle-border-color',
-        backgroundColor: 'widget-background',
-        transition: 'filter 250ms linear',
-        '&:hover': {
-          filter: 'brightness(97%)'
-        },
-        border: '1px solid var(--borderColor)'
-      },
-      error: {
-        backgroundColor: 'red9',
-        color: 'white',
-        '&:hover': {
-          backgroundColor: 'red10'
-        }
-      },
-      warning: {
-        backgroundColor: 'amber3',
-        color: 'amber11',
-        '&:hover': {
-          backgroundColor: 'amber4',
-          color: 'amber11'
-        }
-      },
-      grey: {
-        backgroundColor: 'gray3',
-        color: 'gray11',
-        '&:hover': {
-          backgroundColor: 'gray4'
-        }
-      }
-    },
-    corners: {
-      square: {
-        borderRadius: 0
+const buttonVariants = cva(
+  [
+    'relay-cursor-pointer relay-outline-none relay-font-body relay-font-bold relay-text-[16px]',
+    'relay-transition-[background-color] relay-duration-[250ms] relay-ease-linear',
+    'relay-gap-2 relay-inline-flex relay-items-center relay-leading-[20px]',
+    'focus-visible:relay-shadow-[0_0_0_2px_var(--relay-colors-focus-color)]',
+    'disabled:relay-cursor-not-allowed disabled:relay-bg-[var(--relay-colors-button-disabled-background)] disabled:relay-text-[color:var(--relay-colors-button-disabled-color)]',
+    'disabled:hover:relay-bg-[var(--relay-colors-button-disabled-background)] disabled:hover:relay-text-[color:var(--relay-colors-button-disabled-color)]'
+  ].join(' '),
+  {
+    variants: {
+      color: {
+        primary: [
+          'relay-bg-[var(--relay-colors-primary-button-background)]',
+          'relay-text-[color:var(--relay-colors-primary-button-color)]',
+          'hover:relay-bg-[var(--relay-colors-primary-button-hover-background)]',
+          'hover:relay-text-[color:var(--relay-colors-primary-button-hover-color)]'
+        ].join(' '),
+        secondary: [
+          'relay-bg-[var(--relay-colors-primary4)]',
+          'relay-text-[color:var(--relay-colors-primary12)]',
+          'hover:relay-bg-[var(--relay-colors-secondary-button-hover-background)]',
+          'hover:relay-text-[color:var(--relay-colors-secondary-button-hover-color)]'
+        ].join(' '),
+        ghost: 'relay-text-[color:var(--relay-colors-text-default)] relay-bg-transparent',
+        white: [
+          'relay-bg-[var(--relay-colors-widget-background)]',
+          'relay-transition-[filter] relay-duration-[250ms] relay-ease-linear',
+          'hover:relay-brightness-[0.97]',
+          'relay-border relay-border-solid relay-border-[var(--relay-colors-subtle-border-color)]'
+        ].join(' '),
+        error: [
+          'relay-bg-[var(--relay-colors-red9)] relay-text-white',
+          'hover:relay-bg-[var(--relay-colors-red10)]'
+        ].join(' '),
+        warning: [
+          'relay-bg-[var(--relay-colors-amber3)]',
+          'relay-text-[color:var(--relay-colors-amber11)]',
+          'hover:relay-bg-[var(--relay-colors-amber4)]',
+          'hover:relay-text-[color:var(--relay-colors-amber11)]'
+        ].join(' '),
+        grey: [
+          'relay-bg-[var(--relay-colors-gray3)]',
+          'relay-text-[color:var(--relay-colors-gray11)]',
+          'hover:relay-bg-[var(--relay-colors-gray4)]'
+        ].join(' ')
       },
-      rounded: {
-        borderRadius: 12
+      corners: {
+        square: 'relay-rounded-none',
+        rounded: 'relay-rounded-[12px]',
+        pill: 'relay-rounded-full',
+        circle: 'relay-rounded-full relay-items-center relay-justify-center'
       },
-      pill: {
-        borderRadius: 99999
+      size: {
+        none: '',
+        xs: 'relay-p-3 relay-leading-[16px] relay-min-h-[40px]',
+        small: 'relay-px-3 relay-py-2 relay-leading-[12px] relay-min-h-[40px]',
+        medium: 'relay-px-5 relay-py-3 relay-min-h-[44px]',
+        large: 'relay-px-5 relay-py-4 relay-min-h-[52px]'
       },
-      circle: {
-        borderRadius: '99999px',
-        alignItems: 'center',
-        justifyContent: 'center'
+      cta: {
+        true: [
+          '[&:not(:disabled)]:relay-font-heading',
+          '[&:not(:disabled)]:relay-font-bold',
+          '[&:not(:disabled)]:relay-uppercase',
+          '[&:not(:disabled)]:relay-italic'
+        ].join(' ')
       }
     },
-    size: {
-      none: {},
-      xs: {
-        p: '3',
-        lineHeight: '16px',
-        minHeight: 40
-      },
-      small: {
-        px: '3',
-        py: '2',
-        lineHeight: '12px',
-        minHeight: 40
-      },
-      medium: {
-        px: '5',
-        py: '3',
-        minHeight: 44
-      },
-      large: {
-        px: '5',
-        py: '4',
-        minHeight: 52
-      }
-    },
-    cta: {
-      true: {
-        '&:not(:disabled)': {
-          fontFamily: 'heading',
-          fontWeight: 700,
-          textTransform: 'uppercase',
-          fontStyle: 'var(--relay-fonts-button-cta-font-style, italic)'
-        }
-      }
+    defaultVariants: {
+      color: 'primary',
+      corners: 'rounded',
+      size: 'medium'
     }
-  },
-  defaultVariants: {
-    color: 'primary',
-    corners: 'rounded',
-    size: 'medium'
   }
-})
+)
 
-type ButtonCssProps = Parameters<typeof ButtonCss>['0']
+export type ButtonVariantProps = VariantProps<typeof buttonVariants>
 
 const Button = forwardRef<
   HTMLButtonElement,
-  Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'ref'> &
-    ButtonCssProps & { css?: Styles }
->(({ css, children, ...props }, forwardedRef) => {
+  Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'ref' | 'color'> &
+    ButtonVariantProps & { className?: string }
+>(({ className, children, ...props }, forwardedRef) => {
   const { color, size, corners, cta, ...buttonProps } = { ...props }
   return (
     <button
       {...buttonProps}
       ref={forwardedRef}
-      className={designCss(
-        ButtonCss.raw({ color, size, corners, cta }),
-        designCss.raw(css)
+      className={cn(
+        buttonVariants({ color, size, corners, cta }),
+        className
       )}
     >
       {children}
diff --git a/packages/ui/src/components/primitives/ChainIcon.tsx b/packages/ui/src/components/primitives/ChainIcon.tsx
index f58b0367b..3747e45a0 100644
--- a/packages/ui/src/components/primitives/ChainIcon.tsx
+++ b/packages/ui/src/components/primitives/ChainIcon.tsx
@@ -1,21 +1,20 @@
 import { useContext, type FC } from 'react'
-import { Flex } from './index.js'
 import useRelayClient from '../../hooks/useRelayClient.js'
-import type { Styles } from '@relayprotocol/relay-design-system/css'
 import { ProviderOptionsContext } from '../../providers/RelayKitProvider.js'
+import { cn } from '../../utils/cn.js'
 
 type Props = {
   chainId?: number
   height?: number
   width?: number
-  css?: Styles
+  className?: string
   square?: boolean
   borderRadius?: number
 }
 
 const ChainIcon: FC<Props> = ({
   chainId,
-  css = {},
+  className,
   height = 14,
   width = 14,
   square = true,
@@ -37,12 +36,8 @@ const ChainIcon: FC<Props> = ({
     square && icon ? icon.replace('/icons/', '/icons/square/') : icon
 
   return iconUrl ? (
-    <Flex
-      css={{
-        display: 'flex',
-        flexShrink: 0,
-        ...css
-      }}
+    <div
+      className={cn('relay-flex relay-shrink-0', className)}
       style={{
         height: height,
         width: width,
@@ -55,12 +50,12 @@ const ChainIcon: FC<Props> = ({
           alt={`Chain #${chainId}`}
           style={{
             borderRadius: square ? borderRadius : 0,
-            width: css && css.width ? Number(css.width) : '100%',
-            height: css && css.height ? Number(css.height) : '100%'
+            width: '100%',
+            height: '100%'
           }}
         />
       ) : null}
-    </Flex>
+    </div>
   ) : null
 }
 
diff --git a/packages/ui/src/components/primitives/ChainTokenIcon.tsx b/packages/ui/src/components/primitives/ChainTokenIcon.tsx
index 71cf551b6..0ce153e18 100644
--- a/packages/ui/src/components/primitives/ChainTokenIcon.tsx
+++ b/packages/ui/src/components/primitives/ChainTokenIcon.tsx
@@ -1,9 +1,7 @@
 import { type FC } from 'react'
-import Flex from './Flex.js'
 import ChainIcon from './ChainIcon.js'
-import Box from './Box.js'
 import Text from './Text.js'
-import type { Styles } from '@relayprotocol/relay-design-system/css'
+import { cn } from '../../utils/cn.js'
 
 type Size = 'sm' | 'base' | 'md' | 'lg'
 
@@ -11,7 +9,7 @@ type ChainTokenProps = {
   chainId?: number
   tokenlogoURI?: string
   tokenSymbol?: string
-  css?: Styles
+  className?: string
   size?: Size
   chainRadius?: number
   chainIconSize?: number
@@ -40,7 +38,7 @@ export const ChainTokenIcon: FC<ChainTokenProps> = ({
   chainId,
   tokenlogoURI,
   tokenSymbol,
-  css = {},
+  className,
   size = 'md',
   chainRadius = 4,
   chainIconSize
@@ -50,15 +48,15 @@ export const ChainTokenIcon: FC<ChainTokenProps> = ({
   const chainSize = chainIconSize ?? dimensions.chain
 
   return chainId ? (
-    <Flex
-      css={{
-        position: 'relative',
-        flexShrink: 0,
+    <div
+      className={cn(
+        'relay-relative relay-shrink-0 relay-overflow-hidden',
+        className
+      )}
+      style={{
         width: dimensions.token,
         height: dimensions.token,
-        overflow: 'hidden',
-        borderRadius: chainRadius,
-        ...css
+        borderRadius: chainRadius
       }}
     >
       {isValidTokenLogo ? (
@@ -73,36 +71,23 @@ export const ChainTokenIcon: FC<ChainTokenProps> = ({
           }}
         />
       ) : tokenSymbol ? (
-        <Box
-          css={{
+        <div
+          className="relay-rounded-[50%] relay-bg-[var(--relay-colors-primary4)] relay-text-[color:var(--relay-colors-primary8)] relay-flex relay-items-center relay-justify-center"
+          style={{
             width: dimensions.token,
-            height: dimensions.token,
-            borderRadius: '50%',
-            backgroundColor: 'primary4',
-            color: 'primary8',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center'
+            height: dimensions.token
           }}
         >
           <Text style="h6">{tokenSymbol?.charAt(0).toUpperCase()}</Text>
-        </Box>
+        </div>
       ) : null}
       <ChainIcon
         chainId={chainId}
         width={chainSize}
         height={chainSize}
         borderRadius={chainRadius}
-        css={{
-          position: 'absolute',
-          right: 0,
-          bottom: 0,
-          overflow: 'hidden',
-          '--borderColor': 'colors.modal-background',
-          border: '1px solid var(--borderColor)',
-          backgroundColor: 'modal-background'
-        }}
+        className="relay-absolute relay-right-0 relay-bottom-0 relay-overflow-hidden relay-border relay-border-solid relay-border-[var(--relay-colors-modal-background)] relay-bg-[var(--relay-colors-modal-background)]"
       />
-    </Flex>
+    </div>
   ) : null
 }
diff --git a/packages/ui/src/components/primitives/Collapsible.tsx b/packages/ui/src/components/primitives/Collapsible.tsx
index a7d5f78f4..4ca9250b5 100644
--- a/packages/ui/src/components/primitives/Collapsible.tsx
+++ b/packages/ui/src/components/primitives/Collapsible.tsx
@@ -1,54 +1,27 @@
 import * as Collapsible from '@radix-ui/react-collapsible'
-import {
-  cva,
-  css as designCss,
-  type Styles
-} from '@relayprotocol/relay-design-system/css'
 import {
   forwardRef,
   type ComponentPropsWithoutRef,
   type ElementRef,
   type PropsWithChildren
 } from 'react'
-
-const CollapsibleContentCss = cva({
-  base: {
-    overflow: 'hidden',
-    _data_state_open: {
-      animation: `collapsibleSlideDown 300ms cubic-bezier(0.87, 0, 0.13, 1)`
-    },
-    _data_state_closed: {
-      animation: `collapsibleSlideUp 300ms cubic-bezier(0.87, 0, 0.13, 1)`
-    }
-  }
-})
-
-const CollapsibleRootCss = cva({
-  base: {
-    width: '100%'
-  }
-})
-
-const CollapsibleTriggerCss = cva({
-  base: {
-    width: '100%',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    cursor: 'pointer'
-  }
-})
+import { cn } from '../../utils/cn.js'
 
 const CollapsibleContent = forwardRef<
   ElementRef<typeof Collapsible.CollapsibleContent>,
   ComponentPropsWithoutRef<typeof Collapsible.CollapsibleContent> &
-    PropsWithChildren & { css?: Styles }
->(({ children, css, ...props }, forwardedRef) => {
+    PropsWithChildren & { className?: string }
+>(({ children, className, ...props }, forwardedRef) => {
   return (
     <Collapsible.CollapsibleContent
       ref={forwardedRef}
       {...props}
-      className={designCss(CollapsibleContentCss.raw(), designCss.raw(css))}
+      className={cn(
+        'relay-overflow-hidden',
+        'data-[state=open]:relay-animate-collapsible-down',
+        'data-[state=closed]:relay-animate-collapsible-up',
+        className
+      )}
     >
       {children}
     </Collapsible.CollapsibleContent>
@@ -58,13 +31,13 @@ const CollapsibleContent = forwardRef<
 const CollapsibleRoot = forwardRef<
   ElementRef<typeof Collapsible.Root>,
   ComponentPropsWithoutRef<typeof Collapsible.Root> &
-    PropsWithChildren & { css?: Styles }
->(({ children, css, ...props }, forwardedRef) => {
+    PropsWithChildren & { className?: string }
+>(({ children, className, ...props }, forwardedRef) => {
   return (
     <Collapsible.Root
       ref={forwardedRef}
       {...props}
-      className={designCss(CollapsibleRootCss.raw(), designCss.raw(css))}
+      className={cn('relay-w-full', className)}
     >
       {children}
     </Collapsible.Root>
@@ -74,13 +47,16 @@ const CollapsibleRoot = forwardRef<
 const CollapsibleTrigger = forwardRef<
   ElementRef<typeof Collapsible.Trigger>,
   ComponentPropsWithoutRef<typeof Collapsible.Trigger> &
-    PropsWithChildren & { css?: Styles }
->(({ children, css, ...props }, forwardedRef) => {
+    PropsWithChildren & { className?: string }
+>(({ children, className, ...props }, forwardedRef) => {
   return (
     <Collapsible.Trigger
       ref={forwardedRef}
       {...props}
-      className={designCss(CollapsibleTriggerCss.raw(), designCss.raw(css))}
+      className={cn(
+        'relay-w-full relay-flex relay-items-center relay-justify-between relay-cursor-pointer',
+        className
+      )}
     >
       {children}
     </Collapsible.Trigger>
diff --git a/packages/ui/src/components/primitives/Dialog.tsx b/packages/ui/src/components/primitives/Dialog.tsx
index bfeb28685..2d24ae376 100644
--- a/packages/ui/src/components/primitives/Dialog.tsx
+++ b/packages/ui/src/components/primitives/Dialog.tsx
@@ -1,5 +1,4 @@
 import * as DialogPrimitive from '@radix-ui/react-dialog'
-import { motion, AnimatePresence } from 'framer-motion'
 import type {
   ComponentPropsWithoutRef,
   ElementRef,
@@ -9,63 +8,35 @@ import type {
 } from 'react'
 import { forwardRef, useState } from 'react'
 import { useMediaQuery } from 'usehooks-ts'
-import {
-  cva,
-  css as designCss,
-  type Styles
-} from '@relayprotocol/relay-design-system/css'
+import { cn } from '../../utils/cn.js'
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
 
-const OverlayStyle = cva({
-  base: {
-    position: 'fixed',
-    inset: 0
-  }
-})
-
 const Overlay = forwardRef<
   ElementRef<typeof DialogPrimitive.Overlay>,
   ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> &
-    PropsWithChildren & { css?: Styles }
->(({ children, css, ...props }, forwardedRef) => {
+    PropsWithChildren & { className?: string }
+>(({ children, className, ...props }, forwardedRef) => {
   return (
     <DialogPrimitive.Overlay
       ref={forwardedRef}
       {...props}
-      className={`${designCss(
-        OverlayStyle.raw(),
-        designCss.raw(css)
-      )} relay-kit-reset`}
+      className={cn('relay-fixed relay-inset-0', className, 'relay-kit-reset')}
     >
       {children}
     </DialogPrimitive.Overlay>
   )
 })
 
-const ContentCss = cva({
-  base: {
-    backgroundColor: 'modal-background',
-    borderRadius: 'modal-border-radius',
-    border: 'modal-border',
-    position: 'fixed',
-    left: '50%',
-    top: '100%',
-    minWidth: '90vw',
-    maxWidth: '100vw',
-    sm: {
-      minWidth: '400px',
-      maxWidth: '532px'
-    },
-    maxHeight: '85vh',
-    overflowY: 'auto',
-    _focus: { outline: 'none' },
-    '@media(max-width: 520px)': {
-      borderBottomRightRadius: 0,
-      borderBottomLeftRadius: 0,
-      width: '100%'
-    }
-  }
-})
+const contentBase = [
+  'relay-bg-[var(--relay-colors-modal-background)]',
+  'relay-rounded-modal',
+  'relay-border-modal',
+  'relay-fixed relay-left-1/2',
+  'relay-min-w-[90vw] relay-max-w-[100vw]',
+  'sm:relay-min-w-[400px] sm:relay-max-w-[532px]',
+  'relay-max-h-[85vh] relay-overflow-y-auto',
+  'focus:relay-outline-none'
+].join(' ')
 
 const Content = forwardRef<
   ElementRef<typeof DialogPrimitive.DialogContent>,
@@ -76,7 +47,7 @@ const Content = forwardRef<
     <DialogPrimitive.DialogContent
       ref={forwardedRef}
       {...props}
-      className={ContentCss()}
+      className={cn(contentBase, 'relay-top-full')}
     >
       {children}
     </DialogPrimitive.DialogContent>
@@ -86,71 +57,39 @@ const Content = forwardRef<
 const AnimatedContent = forwardRef<
   ElementRef<typeof DialogPrimitive.DialogContent>,
   ComponentPropsWithoutRef<typeof DialogPrimitive.DialogContent> &
-    PropsWithChildren & { css?: Styles; disableAnimation?: boolean }
->(({ children, css, disableAnimation = false, ...props }, forwardedRef) => {
+    PropsWithChildren & { className?: string; disableAnimation?: boolean }
+>(({ children, className, disableAnimation = false, ...props }, forwardedRef) => {
   const isMobile = useMediaQuery('(max-width: 520px)')
-  const isMobileSlideUpEnabled = isMobile && !disableAnimation
+  const isMobileSlideUp = isMobile && !disableAnimation
+
+  const mobileClasses = [
+    'relay-bottom-0 relay-top-auto relay-left-0',
+    'relay-translate-x-0',
+    'relay-animate-dialog-slide-up',
+    'data-[state=closed]:relay-animate-dialog-slide-down',
+    'max-[520px]:relay-rounded-b-none max-[520px]:relay-w-full'
+  ].join(' ')
+
+  const desktopClasses = [
+    'relay-top-1/2 -relay-translate-x-1/2 -relay-translate-y-1/2',
+    'relay-animate-dialog-fade-in',
+    'data-[state=closed]:relay-animate-dialog-fade-out'
+  ].join(' ')
 
-  const animation = isMobileSlideUpEnabled
-    ? {
-        initial: {
-          opacity: 0,
-          bottom: '-100%',
-          top: 'auto',
-          left: 0
-        },
-        animate: {
-          opacity: 1,
-          bottom: 0,
-          top: 'auto',
-          left: 0
-        },
-        exit: {
-          opacity: 0,
-          bottom: '-100%',
-          top: 'auto',
-          left: 0
-        }
-      }
-    : {
-        initial: {
-          opacity: 0,
-          top: '50%',
-          transform: 'translateX(-50%) translateY(-50%)'
-        },
-        animate: {
-          opacity: 1,
-          top: '50%',
-          transform: 'translateX(-50%) translateY(-50%)'
-        },
-        exit: {
-          opacity: 0,
-          top: '50%',
-          transform: 'translateX(-50%) translateY(-50%)'
-        }
-      }
   return (
     <DialogPrimitive.DialogContent
-      className={designCss(ContentCss.raw(props), designCss.raw(css))}
-      forceMount
-      asChild
+      ref={forwardedRef}
+      className={cn(
+        contentBase,
+        isMobileSlideUp ? mobileClasses : desktopClasses,
+        className
+      )}
       {...props}
     >
-      <motion.div
-        key={isMobile + 'modal'}
-        ref={forwardedRef}
-        transition={{
-          type: isMobileSlideUpEnabled ? 'tween' : undefined,
-          duration: isMobileSlideUpEnabled ? 0.2 : 0.1,
-          ease: isMobileSlideUpEnabled ? undefined : 'linear'
-        }}
-        {...animation}
-      >
-        <VisuallyHidden>
-          <DialogPrimitive.Title>Title</DialogPrimitive.Title>
-        </VisuallyHidden>
-        {children}
-      </motion.div>
+      <VisuallyHidden>
+        <DialogPrimitive.Title>Title</DialogPrimitive.Title>
+      </VisuallyHidden>
+      {children}
     </DialogPrimitive.DialogContent>
   )
 })
@@ -173,15 +112,13 @@ const Dialog = forwardRef<
       <DialogPrimitive.DialogTrigger asChild>
         {trigger}
       </DialogPrimitive.DialogTrigger>
-      <AnimatePresence>
-        {open ? (
-          <DialogPrimitive.DialogPortal forceMount {...portalProps}>
-            <AnimatedContent ref={forwardedRef} forceMount {...props}>
-              {children}
-            </AnimatedContent>
-          </DialogPrimitive.DialogPortal>
-        ) : null}
-      </AnimatePresence>
+      {open ? (
+        <DialogPrimitive.DialogPortal {...portalProps}>
+          <AnimatedContent ref={forwardedRef} {...props}>
+            {children}
+          </AnimatedContent>
+        </DialogPrimitive.DialogPortal>
+      ) : null}
     </DialogPrimitive.Root>
   )
 })
diff --git a/packages/ui/src/components/primitives/Dropdown.tsx b/packages/ui/src/components/primitives/Dropdown.tsx
index 4fbc5e8c4..4ae1085dd 100644
--- a/packages/ui/src/components/primitives/Dropdown.tsx
+++ b/packages/ui/src/components/primitives/Dropdown.tsx
@@ -6,72 +6,51 @@ import {
   useState
 } from 'react'
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
-import {
-  cva,
-  css as designCss,
-  type Styles
-} from '@relayprotocol/relay-design-system/css'
-
-const DropdownMenuContentCss = cva({
-  base: {
-    mx: '4',
-    p: '3',
-    borderRadius: 8,
-    zIndex: 10000002,
-    background: 'modal-background',
-    boxShadow: '0px 0px 50px 0px #0000001F',
-    border: 'dropdown-border'
-  }
-})
+import { cn } from '../../utils/cn.js'
 
 const DropdownMenuContent = forwardRef<
   ElementRef<typeof DropdownMenuPrimitive.DropdownMenuContent>,
   ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.DropdownMenuContent> & {
-    css?: Styles
+    className?: string
   }
->(({ children, css, ...props }, forwardedRef) => {
+>(({ children, className, ...props }, forwardedRef) => {
   return (
     <DropdownMenuPrimitive.DropdownMenuContent
       {...props}
       ref={forwardedRef}
-      className={designCss(DropdownMenuContentCss.raw(), designCss.raw(css))}
+      className={cn(
+        'relay-mx-4 relay-p-3 relay-rounded-[8px] relay-z-[10000002]',
+        'relay-bg-[var(--relay-colors-modal-background)]',
+        'relay-shadow-[0px_0px_50px_0px_#0000001F]',
+        'relay-border-dropdown',
+        className
+      )}
     >
       {children}
     </DropdownMenuPrimitive.DropdownMenuContent>
   )
 })
 
-const DropdownMenuItemCss = cva({
-  base: {
-    display: 'flex',
-    alignItems: 'center',
-    fontSize: 16,
-    color: 'text-default',
-    background: 'modal-background',
-    p: '3',
-    outline: 'none',
-    cursor: 'pointer',
-    transition: 'background-color 150ms linear',
-    _hover: {
-      backgroundColor: 'gray/10'
-    },
-    '&:focus': {
-      backgroundColor: 'gray/10'
-    }
-  }
-})
-
 const DropdownMenuItem = forwardRef<
   ElementRef<typeof DropdownMenuPrimitive.DropdownMenuItem>,
   ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.DropdownMenuItem> & {
-    css?: Styles
+    className?: string
   }
->(({ children, css, ...props }, forwardedRef) => {
+>(({ children, className, ...props }, forwardedRef) => {
   return (
     <DropdownMenuPrimitive.DropdownMenuItem
       {...props}
       ref={forwardedRef}
-      className={designCss(DropdownMenuItemCss.raw(), designCss.raw(css))}
+      className={cn(
+        'relay-flex relay-items-center relay-text-[16px]',
+        'relay-text-[color:var(--relay-colors-text-default)]',
+        'relay-bg-[var(--relay-colors-modal-background)]',
+        'relay-p-3 relay-outline-none relay-cursor-pointer',
+        'relay-transition-[background-color] relay-duration-150 relay-ease-linear',
+        'hover:relay-bg-[var(--relay-colors-gray-10)]/10',
+        'focus:relay-bg-[var(--relay-colors-gray-10)]/10',
+        className
+      )}
     >
       {children}
     </DropdownMenuPrimitive.DropdownMenuItem>
diff --git a/packages/ui/src/components/primitives/Flex.tsx b/packages/ui/src/components/primitives/Flex.tsx
index 9392d790e..1a08b52a7 100644
--- a/packages/ui/src/components/primitives/Flex.tsx
+++ b/packages/ui/src/components/primitives/Flex.tsx
@@ -1,90 +1,50 @@
-import {
-  cva,
-  css as designCss,
-  type Styles
-} from '@relayprotocol/relay-design-system/css'
+import { cva, type VariantProps } from 'class-variance-authority'
 import type {
   FC,
   PropsWithChildren,
   CSSProperties,
   HTMLAttributes
 } from 'react'
+import { cn } from '../../utils/cn.js'
 
-export const FlexCss = cva({
-  base: {
-    display: 'flex'
-  },
+export const flexVariants = cva('relay-flex', {
   variants: {
     align: {
-      start: {
-        alignItems: 'flex-start'
-      },
-      center: {
-        alignItems: 'center'
-      },
-      end: {
-        alignItems: 'flex-end'
-      },
-      stretch: {
-        alignItems: 'stretch'
-      },
-      baseline: {
-        alignItems: 'baseline'
-      },
-      normal: {
-        alignItems: 'normal'
-      }
+      start: 'relay-items-start',
+      center: 'relay-items-center',
+      end: 'relay-items-end',
+      stretch: 'relay-items-stretch',
+      baseline: 'relay-items-baseline',
+      normal: 'relay-items-[normal]'
     },
     justify: {
-      start: {
-        justifyContent: 'flex-start'
-      },
-      center: {
-        justifyContent: 'center'
-      },
-      end: {
-        justifyContent: 'flex-end'
-      },
-      between: {
-        justifyContent: 'space-between'
-      }
+      start: 'relay-justify-start',
+      center: 'relay-justify-center',
+      end: 'relay-justify-end',
+      between: 'relay-justify-between'
     },
     direction: {
-      row: {
-        flexDirection: 'row'
-      },
-      column: {
-        flexDirection: 'column'
-      },
-      rowReverse: {
-        flexDirection: 'row-reverse'
-      },
-      columnReverse: {
-        flexDirection: 'column-reverse'
-      }
+      row: 'relay-flex-row',
+      column: 'relay-flex-col',
+      rowReverse: 'relay-flex-row-reverse',
+      columnReverse: 'relay-flex-col-reverse'
     },
     wrap: {
-      noWrap: {
-        flexWrap: 'nowrap'
-      },
-      wrap: {
-        flexWrap: 'wrap'
-      },
-      wrapReverse: {
-        flexWrap: 'wrap-reverse'
-      }
+      noWrap: 'relay-flex-nowrap',
+      wrap: 'relay-flex-wrap',
+      wrapReverse: 'relay-flex-wrap-reverse'
     }
   }
 })
 
-type FlexCssProps = Parameters<typeof FlexCss>['0']
+export type FlexVariantProps = VariantProps<typeof flexVariants>
 
 const Flex: FC<
-  { css?: Styles; style?: CSSProperties; id?: string } & FlexCssProps &
+  { className?: string; style?: CSSProperties; id?: string } & FlexVariantProps &
     PropsWithChildren &
     Omit<HTMLAttributes<HTMLDivElement>, 'className'>
 > = ({
-  css,
+  className,
   style,
   children,
   id,
@@ -96,10 +56,7 @@ const Flex: FC<
 }) => {
   return (
     <div
-      className={designCss(
-        FlexCss.raw({ align, justify, direction, wrap }),
-        designCss.raw(css)
-      )}
+      className={cn(flexVariants({ align, justify, direction, wrap }), className)}
       style={style}
       id={id}
       {...htmlProps}
diff --git a/packages/ui/src/components/primitives/Input.tsx b/packages/ui/src/components/primitives/Input.tsx
index 66b74b96e..b4f13868c 100644
--- a/packages/ui/src/components/primitives/Input.tsx
+++ b/packages/ui/src/components/primitives/Input.tsx
@@ -1,58 +1,31 @@
 import React, { forwardRef } from 'react'
-import Flex from './Flex.js'
 import type { HTMLProps, PropsWithChildren, ReactNode } from 'react'
-import {
-  cva,
-  css as designCss,
-  type Styles
-} from '@relayprotocol/relay-design-system/css'
-import Box from './Box.js'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../../utils/cn.js'
 
-const StyledInputCss = cva({
-  base: {
-    px: 16,
-    py: 12,
-    borderRadius: 'input-border-radius',
-    fontFamily: 'body',
-    fontSize: 16,
-    color: 'input-color',
-    backgroundColor: 'input-background',
-    _placeholder: {
-      color: 'gray10'
-    },
-    '--focusColor': 'colors.focus-color',
-    _focus: {
-      boxShadow: 'inset 0 0 0 2px var(--focusColor)',
-      outline: 'none'
-    },
-    _disabled: {
-      cursor: 'not-allowed'
-    },
-    _spinButtons: {
-      WebkitAppearance: 'none'
-    }
-  },
-
-  variants: {
-    size: {
-      large: {
-        fontSize: 32,
-        lineHeight: '42px'
-      }
-    },
-    ellipsify: {
-      true: {
-        textOverflow: 'ellipsis',
-        overflow: 'hidden',
-        whiteSpace: 'nowrap'
+const inputVariants = cva(
+  [
+    'relay-px-4 relay-py-3 relay-rounded-input relay-font-body relay-text-[16px]',
+    'relay-text-[color:var(--relay-colors-input-color)]',
+    'relay-bg-[var(--relay-colors-input-background)]',
+    'placeholder:relay-text-[color:var(--relay-colors-gray10)]',
+    'focus:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)] focus:relay-outline-none',
+    'disabled:relay-cursor-not-allowed',
+    '[&::-webkit-outer-spin-button]:relay-appearance-none [&::-webkit-inner-spin-button]:relay-appearance-none'
+  ].join(' '),
+  {
+    variants: {
+      size: {
+        large: 'relay-text-[32px] relay-leading-[42px]'
+      },
+      ellipsify: {
+        true: 'relay-text-ellipsis relay-overflow-hidden relay-whitespace-nowrap'
       }
     }
   }
-})
+)
 
-type StyledInputCssVariants = NonNullable<
-  Parameters<(typeof StyledInputCss)['raw']>['0']
->
+type InputVariants = VariantProps<typeof inputVariants>
 
 const Input = forwardRef<
   HTMLInputElement,
@@ -60,20 +33,20 @@ const Input = forwardRef<
     PropsWithChildren & {
       icon?: ReactNode
       iconPosition?: 'left' | 'right'
-      iconCss?: Styles
-      containerCss?: Styles
+      iconClassName?: string
+      containerClassName?: string
       inputStyle?: React.CSSProperties
-    } & { css?: Styles } & StyledInputCssVariants
+    } & { className?: string } & InputVariants
 >(
   (
     {
       children,
       icon,
       iconPosition,
-      iconCss,
-      containerCss,
+      iconClassName,
+      containerClassName,
       inputStyle,
-      css,
+      className,
       ...props
     },
     ref
@@ -81,27 +54,21 @@ const Input = forwardRef<
     const { size, ellipsify, style, ...inputProps } = props
 
     return (
-      <Flex
-        css={{
-          ...containerCss
-        }}
-        style={{ ...style }}
-      >
+      <div className={cn('relay-flex', containerClassName)} style={style}>
         {icon && (
-          <Flex css={{ position: 'relative' }}>
-            <Box
-              css={{
-                position: 'absolute',
-                top: 12,
-                left: iconPosition === 'right' ? 'unset' : 16,
-                right: iconPosition === 'right' ? 16 : 'unset',
-                zIndex: 0,
-                ...iconCss
-              }}
+          <div className="relay-flex relay-relative">
+            <div
+              className={cn(
+                'relay-absolute relay-top-[12px] relay-z-0',
+                iconPosition === 'right'
+                  ? 'relay-right-4 relay-left-[unset]'
+                  : 'relay-left-4 relay-right-[unset]',
+                iconClassName
+              )}
             >
               {icon}
-            </Box>
-          </Flex>
+            </div>
+          </div>
         )}
         <input
           {...inputProps}
@@ -112,14 +79,9 @@ const Input = forwardRef<
             paddingRight: icon && iconPosition === 'right' ? 42 : 16,
             ...inputStyle
           }}
-          className={designCss(
-            StyledInputCss.raw({ size, ellipsify }),
-            designCss.raw({
-              ...css
-            })
-          )}
+          className={cn(inputVariants({ size, ellipsify }), className)}
         />
-      </Flex>
+      </div>
     )
   }
 )
diff --git a/packages/ui/src/components/primitives/Pill.tsx b/packages/ui/src/components/primitives/Pill.tsx
index a82e86682..5e2502d7b 100644
--- a/packages/ui/src/components/primitives/Pill.tsx
+++ b/packages/ui/src/components/primitives/Pill.tsx
@@ -1,81 +1,44 @@
-import {
-  cva,
-  css as designCss,
-  type Styles
-} from '@relayprotocol/relay-design-system/css'
+import { cva, type VariantProps } from 'class-variance-authority'
 import type { FC, HTMLAttributes } from 'react'
-import type { FlexCss } from './Flex.js'
+import { cn } from '../../utils/cn.js'
 
-export const PillStyle = cva({
-  base: {
-    display: 'flex',
-    background: 'subtle-background-color',
-    px: '3',
-    py: '1',
-    gap: '1'
-  },
-  variants: {
-    color: {
-      red: {
-        background: 'red3',
-        color: 'red11'
+export const pillVariants = cva(
+  'relay-flex relay-bg-[var(--relay-colors-subtle-background-color)] relay-px-3 relay-py-1 relay-gap-1',
+  {
+    variants: {
+      color: {
+        red: 'relay-bg-[var(--relay-colors-red3)] relay-text-[color:var(--relay-colors-red11)]',
+        gray: 'relay-bg-[var(--relay-colors-gray2)] relay-text-[color:var(--relay-colors-gray8)]',
+        green: 'relay-bg-[var(--relay-colors-green3)] relay-text-[color:var(--relay-colors-green12)]',
+        amber: 'relay-bg-[var(--relay-colors-amber2)] relay-text-[color:var(--relay-colors-amber9)]',
+        transparent: 'relay-bg-transparent relay-text-[color:var(--relay-colors-gray12)]',
+        primary: 'relay-bg-[var(--relay-colors-primary3)] relay-text-[color:var(--relay-colors-primary12)]'
       },
-      gray: {
-        background: 'gray2',
-        color: 'gray8'
+      radius: {
+        pill: 'relay-rounded-[25px]',
+        rounded: 'relay-rounded-[12px]',
+        squared: 'relay-rounded-[8px]'
       },
-      green: {
-        background: 'green3',
-        color: 'green12'
-      },
-      amber: {
-        background: 'amber2',
-        color: 'amber9'
-      },
-      transparent: {
-        background: 'none',
-        color: 'gray12'
-      },
-      primary: {
-        background: 'primary3',
-        color: 'primary12'
-      }
-    },
-    radius: {
-      pill: {
-        borderRadius: 25
-      },
-      rounded: {
-        borderRadius: 12
-      },
-      squared: {
-        borderRadius: 8
+      bordered: {
+        true: 'relay-border relay-border-solid relay-border-[var(--relay-colors-gray-6)]'
       }
     },
-    bordered: {
-      true: {
-        '--borderColor': 'colors.gray.6',
-        border: '1px solid var(--borderColor)'
-      }
+    defaultVariants: {
+      radius: 'pill'
     }
-  },
-  defaultVariants: {
-    radius: 'pill'
   }
-})
+)
 
-type PillProps = Parameters<typeof PillStyle>['0']
+type PillVariantProps = VariantProps<typeof pillVariants>
 
 export const Pill: FC<
-  HTMLAttributes<HTMLDivElement> & {
-    css?: Parameters<(typeof FlexCss)['raw']>[0] & Styles
-  } & PillProps
-> = ({ css, ...props }) => {
+  HTMLAttributes<HTMLDivElement> & { className?: string } & PillVariantProps
+> = ({ className, color, radius, bordered, ...props }) => {
   return (
     <div
       {...props}
-      className={designCss(PillStyle.raw(props), designCss.raw(css))}
-    ></div>
+      className={cn(pillVariants({ color, radius, bordered }), className)}
+    />
   )
 }
 
diff --git a/packages/ui/src/components/primitives/Skeleton.tsx b/packages/ui/src/components/primitives/Skeleton.tsx
index da99a2bdc..7c24d924e 100644
--- a/packages/ui/src/components/primitives/Skeleton.tsx
+++ b/packages/ui/src/components/primitives/Skeleton.tsx
@@ -1,23 +1,17 @@
 import type { FC } from 'react'
-import Flex from './Flex.js'
-import { type Styles } from '@relayprotocol/relay-design-system/css'
+import { cn } from '../../utils/cn.js'
 
 type SkeletonProps = {
-  css?: Styles
+  className?: string
 }
 
-const Skeleton: FC<SkeletonProps> = ({ css }) => {
+const Skeleton: FC<SkeletonProps> = ({ className }) => {
   return (
-    <Flex
-      css={{
-        animationName: 'pulse',
-        backgroundColor: 'skeleton-background',
-        borderRadius: 8,
-        width: 100,
-        height: 12,
-        animation: 'pulse 3s ease-in-out infinite',
-        ...css
-      }}
+    <div
+      className={cn(
+        'relay-flex relay-animate-pulse relay-bg-[var(--relay-colors-skeleton-background)] relay-rounded-[8px] relay-w-[100px] relay-h-[12px]',
+        className
+      )}
     />
   )
 }
diff --git a/packages/ui/src/components/primitives/SlippageButton.tsx b/packages/ui/src/components/primitives/SlippageButton.tsx
index 5eb38618c..8e8ef73a8 100644
--- a/packages/ui/src/components/primitives/SlippageButton.tsx
+++ b/packages/ui/src/components/primitives/SlippageButton.tsx
@@ -31,19 +31,7 @@ export const SlippageButton: FC<SlippageButtonProps> = ({
       aria-label="Slippage Settings"
       size="none"
       color="ghost"
-      css={{
-        display: 'flex',
-        borderRadius: '8px',
-        alignItems: 'center',
-        gap: '4px',
-        justifyContent: 'center',
-        p: '1',
-        _hover: {
-          backgroundColor: 'gray2'
-        },
-        backgroundColor: 'gray3',
-        padding: '4px 6px'
-      }}
+      className="relay-flex relay-rounded-[8px] relay-items-center relay-gap-[4px] relay-justify-center relay-p-1 hover:relay-bg-[var(--relay-colors-gray2)] relay-bg-[var(--relay-colors-gray3)] relay-px-[6px] relay-py-[4px]"
       onClick={() => {
         onOpenSlippageConfig?.()
       }}
diff --git a/packages/ui/src/components/primitives/Switch.tsx b/packages/ui/src/components/primitives/Switch.tsx
index eb936f3ca..9a044fc64 100644
--- a/packages/ui/src/components/primitives/Switch.tsx
+++ b/packages/ui/src/components/primitives/Switch.tsx
@@ -1,79 +1,51 @@
 import * as Switch from '@radix-ui/react-switch'
-import {
-  cva,
-  css as designCss,
-  type Styles
-} from '@relayprotocol/relay-design-system/css'
 import {
   type ElementRef,
   forwardRef,
   type ComponentPropsWithoutRef
 } from 'react'
-
-const StyledSwitchCss = cva({
-  base: {
-    cursor: 'pointer',
-    width: '38px',
-    height: '20px',
-    backgroundColor: 'gray7',
-    borderRadius: '9999px',
-    position: 'relative',
-    WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
-    display: 'flex',
-    alignItems: 'center',
-    padding: '0 10px',
-    transition: 'background-color 250ms',
-    "&[data-state='checked']": {
-      backgroundColor: 'primary-button-background'
-    }
-  }
-})
+import { cn } from '../../utils/cn.js'
 
 export const StyledSwitch = forwardRef<
   ElementRef<typeof Switch.Root>,
-  ComponentPropsWithoutRef<typeof Switch.Root> & { css?: Styles }
->(({ children, css, ...props }, forwardedRef) => {
+  ComponentPropsWithoutRef<typeof Switch.Root> & { className?: string }
+>(({ children, className, ...props }, forwardedRef) => {
   return (
     <Switch.Root
       ref={forwardedRef}
       {...props}
-      className={designCss(StyledSwitchCss.raw(), designCss.raw(css))}
+      className={cn(
+        'relay-cursor-pointer relay-w-[38px] relay-h-[20px]',
+        'relay-bg-[var(--relay-colors-gray7)] relay-rounded-full',
+        'relay-relative relay-flex relay-items-center relay-px-[10px]',
+        'relay-transition-[background-color] relay-duration-[250ms]',
+        "data-[state='checked']:relay-bg-[var(--relay-colors-primary-button-background)]",
+        className
+      )}
     >
       {children}
     </Switch.Root>
   )
 })
 
-const StyledThumbCss = cva({
-  base: {
-    display: 'block',
-    width: '17.5px',
-    height: '17.5px',
-    backgroundColor: 'gray1',
-    borderRadius: '9999px',
-    zIndex: 1,
-    '--borderColor': 'colors.gray.8',
-    border: '1px solid var(--borderColor)',
-    transition: 'transform 100ms',
-    transform: 'translateX(0px)',
-    willChange: 'transform',
-    position: 'absolute',
-    left: '2px',
-    "&[data-state='checked']": {
-      transform: 'translateX(17px)'
-    }
-  }
-})
-
 export const StyledThumb = forwardRef<
   ElementRef<typeof Switch.Root>,
-  ComponentPropsWithoutRef<typeof Switch.Root> & { css?: Styles }
->(({ children, css, ...props }, forwardedRef) => {
+  ComponentPropsWithoutRef<typeof Switch.Root> & { className?: string }
+>(({ children, className, ...props }, forwardedRef) => {
   return (
     <Switch.Thumb
       ref={forwardedRef}
       {...props}
-      className={designCss(StyledThumbCss.raw(), designCss.raw(css))}
+      className={cn(
+        'relay-block relay-w-[17.5px] relay-h-[17.5px]',
+        'relay-bg-[var(--relay-colors-gray1)] relay-rounded-full',
+        'relay-z-[1] relay-border relay-border-solid relay-border-[var(--relay-colors-gray-8)]',
+        'relay-transition-transform relay-duration-100',
+        'relay-translate-x-0 relay-will-change-transform',
+        'relay-absolute relay-left-[2px]',
+        "data-[state='checked']:relay-translate-x-[17px]",
+        className
+      )}
     />
   )
 })
diff --git a/packages/ui/src/components/primitives/Tabs.tsx b/packages/ui/src/components/primitives/Tabs.tsx
index 5f2147e3d..4bf74a004 100644
--- a/packages/ui/src/components/primitives/Tabs.tsx
+++ b/packages/ui/src/components/primitives/Tabs.tsx
@@ -1,58 +1,26 @@
 import * as TabsPrimitive from '@radix-ui/react-tabs'
-import {
-  cva,
-  css as designCss,
-  type Styles
-} from '@relayprotocol/relay-design-system/css'
 import {
   forwardRef,
   type ComponentPropsWithoutRef,
   type ElementRef
 } from 'react'
-
-const TabsListCss = cva({
-  base: {
-    display: 'flex',
-    alignItems: 'center',
-    borderRadius: 8,
-    p: '1',
-    backgroundColor: 'gray2',
-    border: 'none'
-  }
-})
-
-const TabsTriggerCss = cva({
-  base: {
-    width: '100%',
-    fontWeight: '500',
-    fontSize: '14px',
-    cursor: 'pointer',
-    py: '2px',
-    color: 'gray12',
-    borderRadius: 8,
-    backgroundColor: 'transparent',
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    borderColor: 'transparent',
-    '&[data-state="active"]': {
-      backgroundColor: 'subtle-background-color',
-      '--borderColor': 'colors.gray.5',
-      borderColor: 'var(--borderColor)'
-    }
-  }
-})
+import { cn } from '../../utils/cn.js'
 
 const TabsList = forwardRef<
   ElementRef<typeof TabsPrimitive.List>,
   ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
-    css?: Styles
+    className?: string
   }
->(({ children, css, ...props }, forwardedRef) => {
+>(({ children, className, ...props }, forwardedRef) => {
   return (
     <TabsPrimitive.List
       {...props}
       ref={forwardedRef}
-      className={designCss(TabsListCss.raw(), designCss.raw(css))}
+      className={cn(
+        'relay-flex relay-items-center relay-rounded-[8px] relay-p-1',
+        'relay-bg-[var(--relay-colors-gray2)] relay-border-none',
+        className
+      )}
     >
       {children}
     </TabsPrimitive.List>
@@ -62,14 +30,22 @@ const TabsList = forwardRef<
 const TabsTrigger = forwardRef<
   ElementRef<typeof TabsPrimitive.Trigger>,
   ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
-    css?: Styles
+    className?: string
   }
->(({ children, css, ...props }, forwardedRef) => {
+>(({ children, className, ...props }, forwardedRef) => {
   return (
     <TabsPrimitive.Trigger
       {...props}
       ref={forwardedRef}
-      className={designCss(TabsTriggerCss.raw(), designCss.raw(css))}
+      className={cn(
+        'relay-w-full relay-font-medium relay-text-[14px] relay-cursor-pointer',
+        'relay-py-[2px] relay-text-[color:var(--relay-colors-gray12)]',
+        'relay-rounded-[8px] relay-bg-transparent',
+        'relay-border relay-border-solid relay-border-transparent',
+        'data-[state=active]:relay-bg-[var(--relay-colors-subtle-background-color)]',
+        'data-[state=active]:relay-border-[var(--relay-colors-gray-5)]',
+        className
+      )}
     >
       {children}
     </TabsPrimitive.Trigger>
@@ -79,14 +55,14 @@ const TabsTrigger = forwardRef<
 const TabsContent = forwardRef<
   ElementRef<typeof TabsPrimitive.Content>,
   ComponentPropsWithoutRef<typeof TabsPrimitive.Content> & {
-    css?: Styles
+    className?: string
   }
->(({ children, css, ...props }, forwardedRef) => {
+>(({ children, className, ...props }, forwardedRef) => {
   return (
     <TabsPrimitive.Content
       {...props}
       ref={forwardedRef}
-      className={designCss(designCss.raw(css))}
+      className={cn(className)}
     >
       {children}
     </TabsPrimitive.Content>
@@ -96,14 +72,14 @@ const TabsContent = forwardRef<
 const TabsRoot = forwardRef<
   ElementRef<typeof TabsPrimitive.Root>,
   ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {
-    css?: Styles
+    className?: string
   }
->(({ children, css, ...props }, forwardedRef) => {
+>(({ children, className, ...props }, forwardedRef) => {
   return (
     <TabsPrimitive.Root
       {...props}
       ref={forwardedRef}
-      className={designCss(designCss.raw(css))}
+      className={cn(className)}
     >
       {children}
     </TabsPrimitive.Root>
diff --git a/packages/ui/src/components/primitives/Text.tsx b/packages/ui/src/components/primitives/Text.tsx
index f11998c25..1c546f285 100644
--- a/packages/ui/src/components/primitives/Text.tsx
+++ b/packages/ui/src/components/primitives/Text.tsx
@@ -1,122 +1,57 @@
-import {
-  cva,
-  css as designCss,
-  type Styles
-} from '@relayprotocol/relay-design-system/css'
+import { cva, type VariantProps } from 'class-variance-authority'
 import type { FC, PropsWithChildren } from 'react'
+import { cn } from '../../utils/cn.js'
 
-const TextCss = cva({
-  base: {
-    color: 'text-default',
-    fontFamily: 'body'
-  },
-  variants: {
-    style: {
-      h1: {
-        fontWeight: 800,
-        fontSize: '64px',
-        fontFamily: 'heading'
-      },
-      h2: {
-        fontWeight: 700,
-        fontSize: '48px'
-      },
-      h3: {
-        fontWeight: 700,
-        fontSize: '32px'
-      },
-      h4: {
-        fontWeight: 700,
-        fontSize: '24px'
-      },
-      h5: {
-        fontWeight: 700,
-        fontSize: '20px'
-      },
-      h6: {
-        fontWeight: 700,
-        fontSize: '16px'
-      },
-      subtitle1: {
-        fontWeight: 500,
-        fontSize: '16px'
-      },
-      subtitle2: {
-        fontWeight: 500,
-        fontSize: '14px'
-      },
-      subtitle3: {
-        fontWeight: 500,
-        fontSize: '12px'
-      },
-      body1: {
-        fontWeight: 400,
-        fontSize: '16px'
-      },
-      body2: {
-        fontWeight: 400,
-        fontSize: '14px'
-      },
-      body3: {
-        fontWeight: 400,
-        fontSize: '12px'
-      },
-      tiny: {
-        fontWeight: 500,
-        fontSize: 10,
-        color: 'gray11'
-      }
-    },
-    color: {
-      subtle: {
-        color: 'text-subtle'
-      },
-      subtleSecondary: {
-        color: 'text-subtle-secondary'
-      },
-      error: {
-        color: 'text-error'
-      },
-      red: {
-        color: 'red11'
-      },
-      blue: {
-        color: 'blue12'
-      },
-      success: {
-        color: 'text-success'
-      },
-      warning: {
-        color: 'amber12'
-      },
-      warningSecondary: {
-        color: 'amber11'
-      }
-    },
-    italic: {
-      true: {
-        fontStyle: 'italic'
-      }
-    },
-    ellipsify: {
-      true: {
-        textOverflow: 'ellipsis',
-        overflow: 'hidden',
-        whiteSpace: 'nowrap'
+const textVariants = cva(
+  'relay-text-[color:var(--relay-colors-text-default)] relay-font-body',
+  {
+    variants: {
+      style: {
+        h1: 'relay-font-[800] relay-text-[64px] relay-font-heading',
+        h2: 'relay-font-bold relay-text-[48px]',
+        h3: 'relay-font-bold relay-text-[32px]',
+        h4: 'relay-font-bold relay-text-[24px]',
+        h5: 'relay-font-bold relay-text-[20px]',
+        h6: 'relay-font-bold relay-text-[16px]',
+        subtitle1: 'relay-font-medium relay-text-[16px]',
+        subtitle2: 'relay-font-medium relay-text-[14px]',
+        subtitle3: 'relay-font-medium relay-text-[12px]',
+        body1: 'relay-font-normal relay-text-[16px]',
+        body2: 'relay-font-normal relay-text-[14px]',
+        body3: 'relay-font-normal relay-text-[12px]',
+        tiny:
+          'relay-font-medium relay-text-[10px] relay-text-[color:var(--relay-colors-gray11)]'
+      },
+      color: {
+        subtle: 'relay-text-[color:var(--relay-colors-text-subtle)]',
+        subtleSecondary:
+          'relay-text-[color:var(--relay-colors-text-subtle-secondary)]',
+        error: 'relay-text-[color:var(--relay-colors-text-error)]',
+        red: 'relay-text-[color:var(--relay-colors-red11)]',
+        blue: 'relay-text-[color:var(--relay-colors-blue12)]',
+        success: 'relay-text-[color:var(--relay-colors-text-success)]',
+        warning: 'relay-text-[color:var(--relay-colors-amber12)]',
+        warningSecondary: 'relay-text-[color:var(--relay-colors-amber11)]'
+      },
+      italic: {
+        true: 'relay-italic'
+      },
+      ellipsify: {
+        true: 'relay-text-ellipsis relay-overflow-hidden relay-whitespace-nowrap'
       }
     }
   }
-})
+)
 
-type TextCssProps = Parameters<typeof TextCss>['0']
+export type TextVariantProps = VariantProps<typeof textVariants>
 
-const Text: FC<{ css?: Styles } & TextCssProps & PropsWithChildren> = ({
-  css,
+const Text: FC<{ className?: string } & TextVariantProps & PropsWithChildren> = ({
+  className,
   children,
   ...props
 }) => {
   return (
-    <div className={designCss(TextCss.raw(props), designCss.raw(css))}>
+    <div className={cn(textVariants(props), className)}>
       {children}
     </div>
   )
diff --git a/packages/ui/src/components/primitives/Tooltip.tsx b/packages/ui/src/components/primitives/Tooltip.tsx
index c0499314e..1b0ddc603 100644
--- a/packages/ui/src/components/primitives/Tooltip.tsx
+++ b/packages/ui/src/components/primitives/Tooltip.tsx
@@ -1,20 +1,7 @@
 import * as TooltipPrimitive from '@radix-ui/react-tooltip'
 import * as Popover from '@radix-ui/react-popover'
 import { useMediaQuery } from 'usehooks-ts'
-import Box from './Box.js'
-import { cva } from '@relayprotocol/relay-design-system/css'
-
-const TooltipArrowStyle = cva({
-  base: {
-    fill: 'modal-background'
-  }
-})
-
-const PopoverArrow = cva({
-  base: {
-    fill: 'modal-background'
-  }
-})
+import { cn } from '../../utils/cn.js'
 
 const Tooltip = ({
   children,
@@ -42,24 +29,14 @@ const Tooltip = ({
           style={{ zIndex: 10000003, outline: 'none', maxWidth: '100vw' }}
           {...props}
         >
-          <Popover.Arrow className={PopoverArrow()} />
-          <Box
-            css={{
-              zIndex: 10000004,
-              boxShadow: '0px 1px 5px rgba(0,0,0,0.2)',
-              borderRadius: 8,
-              overflow: 'hidden'
-            }}
+          <Popover.Arrow className="relay-fill-[var(--relay-colors-modal-background)]" />
+          <div
+            className="relay-z-[10000004] relay-shadow-[0px_1px_5px_rgba(0,0,0,0.2)] relay-rounded-[8px] relay-overflow-hidden"
           >
-            <Box
-              css={{
-                background: 'modal-background',
-                p: '2'
-              }}
-            >
+            <div className="relay-bg-[var(--relay-colors-modal-background)] relay-p-2">
               {content}
-            </Box>
-          </Box>
+            </div>
+          </div>
         </Popover.Content>
       </Popover.Root>
     )
@@ -82,24 +59,14 @@ const Tooltip = ({
           style={{ zIndex: 10000003 }}
           {...props}
         >
-          <div className={TooltipArrowStyle()}></div>
-          <Box
-            css={{
-              zIndex: 10000004,
-              boxShadow: '0px 1px 5px rgba(0,0,0,0.2)',
-              borderRadius: 8,
-              overflow: 'hidden'
-            }}
+          <div className="relay-fill-[var(--relay-colors-modal-background)]" />
+          <div
+            className="relay-z-[10000004] relay-shadow-[0px_1px_5px_rgba(0,0,0,0.2)] relay-rounded-[8px] relay-overflow-hidden"
           >
-            <Box
-              css={{
-                background: 'modal-background',
-                p: '2'
-              }}
-            >
+            <div className="relay-bg-[var(--relay-colors-modal-background)] relay-p-2">
               {content}
-            </Box>
-          </Box>
+            </div>
+          </div>
         </TooltipPrimitive.Content>
       </TooltipPrimitive.Root>
     </TooltipPrimitive.Provider>
diff --git a/packages/ui/src/components/widgets/FeeBreakdown.tsx b/packages/ui/src/components/widgets/FeeBreakdown.tsx
index 78a95b8f0..7177b4349 100644
--- a/packages/ui/src/components/widgets/FeeBreakdown.tsx
+++ b/packages/ui/src/components/widgets/FeeBreakdown.tsx
@@ -17,6 +17,7 @@ import { PriceImpactTooltip } from './PriceImpactTooltip.js'
 import { getSlippageRating, ratingToColor } from '../../utils/slippage.js'
 import Tooltip from '../primitives/Tooltip.js'
 import React from 'react'
+import { cn } from '../../utils/cn.js'
 
 type Props = Pick<
   ChildrenProps,
@@ -102,12 +103,12 @@ const FeeBreakdown: FC<Props> = ({
       value: (
         <Flex
           align="center"
-          css={{
-            gap: '1',
+          className="relay-gap-1"
+          style={{
             color:
               timeEstimate && timeEstimate.time <= 30
-                ? '{colors.grass.9}'
-                : '{colors.amber.9}'
+                ? 'var(--relay-colors-grass-9)'
+                : 'var(--relay-colors-amber-9)'
           }}
         >
           <FontAwesomeIcon icon={faClock} width={16} />
@@ -118,11 +119,11 @@ const FeeBreakdown: FC<Props> = ({
     {
       title: 'Network cost',
       value: (
-        <Flex align="center" css={{ gap: '1' }}>
+        <Flex align="center" className="relay-gap-1">
           <FontAwesomeIcon
             icon={faGasPump}
             width={16}
-            style={{ color: '#C1C8CD' }}
+            className="relay-text-[#C1C8CD]"
           />
           <Text style="subtitle2">{originGasFeeFormatted}</Text>
         </Flex>
@@ -137,12 +138,16 @@ const FeeBreakdown: FC<Props> = ({
         >
           {
             <div>
-              <Flex align="center" css={{ gap: '1', color: 'gray8' }}>
+              <Flex
+                align="center"
+                className="relay-gap-1 relay-text-[color:var(--relay-colors-gray8)]"
+              >
                 <Text
                   style="subtitle2"
-                  css={{
-                    color: isHighPriceImpact ? 'red11' : undefined
-                  }}
+                  className={cn(
+                    isHighPriceImpact &&
+                      'relay-text-[color:var(--relay-colors-red11)]'
+                  )}
                 >
                   {feeBreakdown?.totalFees?.priceImpactPercentage}
                 </Text>
@@ -150,10 +155,7 @@ const FeeBreakdown: FC<Props> = ({
                   icon={faInfoCircle}
                   width={14}
                   height={14}
-                  style={{
-                    display: 'inline-block',
-                    marginLeft: 4
-                  }}
+                  className="relay-inline-block relay-ml-[4px]"
                 />
               </Flex>
             </div>
@@ -168,25 +170,11 @@ const FeeBreakdown: FC<Props> = ({
       return (
         <Box
           id={'fee-breakdown-section'}
-          css={{
-            borderRadius: 'widget-card-border-radius',
-            backgroundColor: 'widget-background',
-            border: 'widget-card-border',
-            overflow: 'hidden',
-            mb: 'widget-card-section-gutter'
-          }}
+          className="relay-rounded-[var(--relay-radii-widget-card-border-radius)] relay-bg-[var(--relay-colors-widget-background)] relay-border-widget-card relay-overflow-hidden relay-mb-[var(--relay-spacing-widget-card-section-gutter)]"
         >
-          <FetchingQuoteLoader
-            isLoading={isFetchingQuote}
-            containerCss={{
-              mt: 0,
-              mb: 0,
-              px: '4',
-              py: '3',
-              width: '100%',
-              justifyContent: 'center'
-            }}
-          />
+          <div className="relay-mt-0 relay-mb-0 relay-px-4 relay-py-3 relay-w-full relay-flex relay-justify-center">
+            <FetchingQuoteLoader isLoading={isFetchingQuote} />
+          </div>
         </Box>
       )
     } else {
@@ -196,39 +184,27 @@ const FeeBreakdown: FC<Props> = ({
 
   return (
     <Flex
-      css={{
-        borderRadius: 'widget-card-border-radius',
-        borderBottomRadius: isOpen ? '0' : 'widget-card-border-radius',
-        backgroundColor: 'widget-background',
-        border: 'widget-card-border',
-        borderBottom: isOpen ? 'none' : 'widget-card-border',
-        overflow: 'hidden',
-        transition: 'border-radius 300ms, border-bottom 0s',
-        transitionDelay: isOpen ? '0s, 0s' : '0s, 300ms',
-        mb: 'widget-card-section-gutter'
+      className={cn(
+        'relay-rounded-[var(--relay-radii-widget-card-border-radius)] relay-bg-[var(--relay-colors-widget-background)] relay-overflow-hidden relay-mb-[var(--relay-spacing-widget-card-section-gutter)]',
+        'relay-border-widget-card relay-transition-[border-radius,border-bottom]',
+        isOpen && 'relay-rounded-b-none'
+      )}
+      style={{
+        borderBottom: isOpen ? 'none' : undefined,
+        transitionDuration: '300ms, 0s',
+        transitionDelay: isOpen ? '0s, 0s' : '0s, 300ms'
       }}
       direction="column"
     >
-      <Flex justify="between" align="center" css={{ p: '3', pb: '0' }}>
+      <Flex justify="between" align="center" className="relay-p-3 relay-pb-0">
         <Text style="subtitle2">Max Slippage</Text>
-        <Flex align="center" css={{ gap: '2' }}>
+        <Flex align="center" className="relay-gap-2">
           {isAutoSlippage ? (
             <Button
               aria-label="Auto"
-              css={{
-                fontSize: 12,
-                fontWeight: '500',
-                px: '1',
-                py: '1',
-                minHeight: '23px',
-                lineHeight: '100%',
-                backgroundColor: 'widget-selector-background',
-                border: 'none',
-                _hover: {
-                  backgroundColor: 'widget-selector-hover-background'
-                }
-              }}
+              className="relay-text-[12px] relay-font-medium relay-px-1 relay-py-1 relay-min-h-[23px] relay-leading-[100%] relay-bg-[var(--relay-colors-widget-selector-background)] relay-border-none hover:relay-bg-[var(--relay-colors-widget-selector-hover-background)]"
               color="white"
+              size="none"
               onClick={(e) => {
                 e.preventDefault()
                 onOpenSlippageConfig?.()
@@ -242,7 +218,7 @@ const FeeBreakdown: FC<Props> = ({
             align="end"
             content={
               minimumAmountFormatted ? (
-                <Flex direction="row" css={{ gap: '2' }}>
+                <Flex direction="row" className="relay-gap-2">
                   <Text style="subtitle2" color="subtle">
                     Min. received
                   </Text>
@@ -253,8 +229,16 @@ const FeeBreakdown: FC<Props> = ({
               ) : null
             }
           >
-            <Text style="subtitle2" css={{ color: slippageRatingColor }}>
-              {slippage}%
+            <Text style="subtitle2">
+              <span
+                style={{
+                  color: slippageRatingColor
+                    ? `var(--relay-colors-${slippageRatingColor})`
+                    : undefined
+                }}
+              >
+                {slippage}%
+              </span>
             </Text>
           </Tooltip>
         </Flex>
@@ -264,20 +248,10 @@ const FeeBreakdown: FC<Props> = ({
           <Flex
             justify="between"
             align="center"
-            css={{
-              flexDirection: 'row',
-              gap: '2',
-              width: '100%',
-              p: '3'
-            }}
+            className="relay-flex-row relay-gap-2 relay-w-full relay-p-3"
           >
             <span
-              style={{
-                cursor: 'pointer',
-                flexShrink: 1,
-                overflow: 'hidden',
-                height: 21
-              }}
+              className="relay-cursor-pointer relay-shrink relay-overflow-hidden relay-h-[21px]"
               onClick={(e) => {
                 setRateMode(rateMode === 'input' ? 'output' : 'input')
                 e.preventDefault()
@@ -292,26 +266,25 @@ const FeeBreakdown: FC<Props> = ({
             </span>
 
             <Flex
-              css={{
-                gap: '2',
+              className="relay-gap-2 relay-shrink-0"
+              style={{
                 color:
                   timeEstimate && timeEstimate.time <= 30
-                    ? '{colors.grass.9}'
-                    : '{colors.amber.9}',
-                flexShrink: 0
+                    ? 'var(--relay-colors-grass-9)'
+                    : 'var(--relay-colors-amber-9)'
               }}
               align="center"
             >
               {!isOpen && timeEstimate && timeEstimate?.time !== 0 ? (
                 <>
                   <FontAwesomeIcon icon={faClock} width={16} />
-                  <Text style="subtitle2" css={{ flexShrink: 0 }}>
+                  <Text style="subtitle2" className="relay-shrink-0">
                     ~ {timeEstimate?.formattedTime}
                   </Text>
                   <Flex
                     justify="center"
                     align="center"
-                    css={{ color: 'gray6', height: 4 }}
+                    className="relay-text-[color:var(--relay-colors-gray6)] relay-h-[4px]"
                   >
                     &#8226;
                   </Flex>
@@ -322,40 +295,28 @@ const FeeBreakdown: FC<Props> = ({
                   <FontAwesomeIcon
                     icon={faGasPump}
                     width={16}
-                    style={{ color: '#C1C8CD' }}
+                    className="relay-text-[#C1C8CD]"
                   />
-                  <Text style="subtitle2" css={{ flexShrink: 0 }}>
+                  <Text style="subtitle2" className="relay-shrink-0">
                     {originGasFeeFormatted}
                   </Text>
                 </>
               )}
-              <Box
-                css={{
-                  marginLeft: '2',
-                  transition: 'transform 300ms',
-                  transform: isOpen ? 'rotate(-180deg)' : 'rotate(0)',
-                  color: 'gray9'
+              <div
+                className="relay-ml-2 relay-transition-transform relay-duration-300 relay-text-[color:var(--relay-colors-gray9)]"
+                style={{
+                  transform: isOpen ? 'rotate(-180deg)' : 'rotate(0)'
                 }}
               >
                 <FontAwesomeIcon icon={faChevronDown} width={12} />
-              </Box>
+              </div>
             </Flex>
           </Flex>
         </CollapsibleTrigger>
-        <CollapsibleContent
-          css={{
-            borderRadius: '0 0 12px 12px'
-          }}
-        >
+        <CollapsibleContent className="relay-rounded-b-[12px]">
           <Flex
             direction="column"
-            css={{
-              px: '3',
-              pb: '3',
-              pt: '0',
-              gap: '2',
-              backgroundColor: 'widget-background'
-            }}
+            className="relay-px-3 relay-pb-3 relay-pt-0 relay-gap-2 relay-bg-[var(--relay-colors-widget-background)]"
           >
             {breakdown.map((item) => {
               return (
@@ -363,12 +324,12 @@ const FeeBreakdown: FC<Props> = ({
                   <Flex
                     justify="between"
                     align="center"
-                    css={{ width: '100%', gap: '4' }}
+                    className="relay-w-full relay-gap-4"
                   >
                     <Text
                       style="subtitle2"
                       color={'subtle'}
-                      css={{ alignSelf: 'flex-start' }}
+                      className="relay-self-start"
                     >
                       {item.title}
                     </Text>
@@ -407,7 +368,7 @@ const ConversionRate: FC<ConversionRateProps> = ({
   const shouldShowTooltip = rateText.length > 22
 
   const content = (
-    <div style={{ width: '100%', minWidth: 0 }}>
+    <div className="relay-w-full relay-min-w-0">
       <Text style="subtitle2" ellipsify>
         {rateText}
       </Text>
diff --git a/packages/ui/src/components/widgets/FetchingQuoteLoader.tsx b/packages/ui/src/components/widgets/FetchingQuoteLoader.tsx
index 88a2c9b4f..122e97ac6 100644
--- a/packages/ui/src/components/widgets/FetchingQuoteLoader.tsx
+++ b/packages/ui/src/components/widgets/FetchingQuoteLoader.tsx
@@ -1,14 +1,14 @@
 import { type FC } from 'react'
 import { Flex, Text } from '../primitives/index.js'
 import { LoadingSpinner } from '../common/LoadingSpinner.js'
-import type { Styles } from '@relayprotocol/relay-design-system/css'
+import { cn } from '../../utils/cn.js'
 
 type Props = {
   isLoading: boolean
-  containerCss?: Styles
+  containerClassName?: string
 }
 
-const FetchingQuoteLoader: FC<Props> = ({ isLoading, containerCss }) => {
+const FetchingQuoteLoader: FC<Props> = ({ isLoading, containerClassName }) => {
   if (!isLoading) {
     return null
   }
@@ -16,16 +16,12 @@ const FetchingQuoteLoader: FC<Props> = ({ isLoading, containerCss }) => {
   return (
     <Flex
       align="center"
-      css={{
-        gap: 14,
-        mb: '3',
-        mt: '1',
-        p: '3 0',
-        m: '0 auto',
-        ...containerCss
-      }}
+      className={cn(
+        'relay-gap-[14px] relay-mb-3 relay-mt-1 relay-py-3 relay-mx-auto',
+        containerClassName
+      )}
     >
-      <LoadingSpinner css={{ height: 16, width: 16 }} />
+      <LoadingSpinner className="relay-h-4 relay-w-4" />
       <Text style="subtitle2">Fetching the best price</Text>
     </Flex>
   )
diff --git a/packages/ui/src/components/widgets/OnrampWidget/modals/OnrampModal.tsx b/packages/ui/src/components/widgets/OnrampWidget/modals/OnrampModal.tsx
index b0d8af898..e9164a84a 100644
--- a/packages/ui/src/components/widgets/OnrampWidget/modals/OnrampModal.tsx
+++ b/packages/ui/src/components/widgets/OnrampWidget/modals/OnrampModal.tsx
@@ -425,14 +425,7 @@ export const OnrampModal: FC<OnrampModalProps> = ({
         }
         onOpenChange(open)
       }}
-      css={{
-        overflow: 'hidden',
-        p: '4',
-        maxWidth: '412px !important',
-        '@media(max-width: 520px)': {
-          maxWidth: 'unset !important'
-        }
-      }}
+      className="relay-overflow-hidden relay-p-4 !relay-max-w-[412px] max-[520px]:!relay-max-w-[unset]"
     >
       {step === OnrampStep.Confirming ? (
         <OnrampConfirmingStep
diff --git a/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampConfirmingStep.tsx b/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampConfirmingStep.tsx
index e27882f7c..779223f4b 100644
--- a/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampConfirmingStep.tsx
+++ b/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampConfirmingStep.tsx
@@ -1,7 +1,6 @@
 import type { FC } from 'react'
 import {
   Anchor,
-  Box,
   Button,
   ChainTokenIcon,
   Flex,
@@ -47,27 +46,16 @@ export const OnrampConfirmingStep: FC<OnrampConfirmingStepProps> = ({
   return (
     <Flex
       direction="column"
-      css={{
-        width: '100%',
-        height: '100%',
-        gap: '4'
-      }}
+      className="relay-w-full relay-h-full relay-gap-4"
     >
       <Text style="h6">
         Buy {toToken?.symbol} ({toChain?.displayName})
       </Text>
       <Flex
         direction="column"
-        css={{
-          width: '100%',
-          overflow: 'hidden',
-          borderRadius: 'widget-card-border-radius',
-          '--borderColor': 'colors.subtle-border-color',
-          border: '1px solid var(--borderColor)',
-          p: '4'
-        }}
+        className="relay-w-full relay-overflow-hidden relay-p-4 relay-rounded-widget-card relay-border relay-border-solid relay-border-[var(--relay-colors-subtle-border-color)]"
       >
-        <Flex align="center" css={{ gap: '2' }}>
+        <Flex align="center" className="relay-gap-2">
           <ChainTokenIcon
             chainId={fromToken?.chainId}
             tokenlogoURI={fromToken?.logoURI}
@@ -78,16 +66,10 @@ export const OnrampConfirmingStep: FC<OnrampConfirmingStepProps> = ({
             your card
           </Text>
         </Flex>
-        <Box
-          css={{
-            height: 24,
-            width: 1,
-            background: 'gray5',
-            my: '5px',
-            ml: 4
-          }}
+        <div
+          className="relay-ml-[16px] relay-h-[24px] relay-w-px relay-bg-[var(--relay-colors-gray5)] relay-mt-[5px] relay-mb-[5px]"
         />
-        <Flex align="center" css={{ gap: '2' }}>
+        <Flex align="center" className="relay-gap-2">
           <ChainTokenIcon
             chainId={toToken?.chainId}
             tokenlogoURI={toToken?.logoURI}
@@ -105,7 +87,7 @@ export const OnrampConfirmingStep: FC<OnrampConfirmingStepProps> = ({
         <Anchor
           href="https://support.relay.link/en/articles/10517947-fiat-on-ramps"
           target="_blank"
-          css={{ ml: '1' }}
+          className="relay-ml-1"
         >
           Learn more
         </Anchor>
@@ -113,7 +95,7 @@ export const OnrampConfirmingStep: FC<OnrampConfirmingStepProps> = ({
       <Button
         cta={true}
         disabled={!depositAddress || isFetchingQuote}
-        css={{ justifyContent: 'center' }}
+        className="relay-justify-center"
         onClick={(e) => {
           onAnalyticEvent?.(EventNames.ONRAMP_CTA_CLICKED, {
             recipient,
@@ -130,7 +112,7 @@ export const OnrampConfirmingStep: FC<OnrampConfirmingStepProps> = ({
       >
         {!depositAddress || isFetchingQuote ? (
           <LoadingSpinner
-            css={{ height: 16, width: 16, fill: 'button-disabled-color' }}
+            className="relay-h-[16px] relay-w-[16px] relay-fill-[var(--relay-colors-button-disabled-color)]"
           />
         ) : (
           `Purchase ${fromToken?.symbol} (${fromChain?.displayName})`
diff --git a/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampMoonPayStep.tsx b/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampMoonPayStep.tsx
index c87ea09a0..0a17a5f14 100644
--- a/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampMoonPayStep.tsx
+++ b/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampMoonPayStep.tsx
@@ -1,6 +1,5 @@
 import { lazy, memo, Suspense, useEffect, type FC } from 'react'
 import {
-  Box,
   ChainTokenIcon,
   Flex,
   Text
@@ -185,14 +184,13 @@ export const OnrampMoonPayStep: FC<OnrampMoonPayStepProps> = ({
     <Flex
       direction="column"
       id="onramp-moonpay-step"
-      css={{
-        width: '100%',
-        height: '100%',
+      className="relay-w-full relay-h-full"
+      style={{
         position: step === OnrampStep.Moonpay ? undefined : 'fixed',
         top: step === OnrampStep.Moonpay ? undefined : '-100%'
       }}
     >
-      <Text style="h6" css={{ mb: '2' }}>
+      <Text style="h6" className="relay-mb-2">
         {!isPassthrough
           ? `Buy ${toToken?.symbol} (${toChain?.displayName})`
           : 'Checkout'}
@@ -200,46 +198,26 @@ export const OnrampMoonPayStep: FC<OnrampMoonPayStepProps> = ({
       {!isPassthrough ? (
         <Flex
           align="center"
-          css={{
-            width: '100%',
-            overflow: 'hidden',
-            borderRadius: 'widget-card-border-radius',
-            '--borderColor': 'colors.subtle-border-color',
-            border: '1px solid var(--borderColor)',
-            p: '4',
-            gap: 2,
-            mb: '2'
-          }}
+          className="relay-w-full relay-overflow-hidden relay-p-4 relay-gap-2 relay-mb-2 relay-rounded-widget-card relay-border relay-border-solid relay-border-[var(--relay-colors-subtle-border-color)]"
         >
-          <Box
-            css={{ position: 'relative', width: 48, height: 52, flexShrink: 0 }}
+          <div
+            className="relay-relative relay-shrink-0 relay-w-[48px] relay-h-[52px]"
           >
-            <ChainTokenIcon
-              chainId={toToken?.chainId}
-              tokenlogoURI={toToken?.logoURI}
-              tokenSymbol={toToken?.symbol}
-              css={{
-                width: 32,
-                height: 32,
-                position: 'absolute',
-                top: 0,
-                right: 0,
-                zIndex: 1
-              }}
-            />
-            <ChainTokenIcon
-              chainId={fromToken?.chainId}
-              tokenlogoURI={fromToken?.logoURI}
-              tokenSymbol={fromToken?.symbol}
-              css={{
-                width: 32,
-                height: 32,
-                position: 'absolute',
-                bottom: 0,
-                left: 0
-              }}
-            />
-          </Box>
+            <div className="relay-absolute relay-top-0 relay-right-0 relay-z-[1]">
+              <ChainTokenIcon
+                chainId={toToken?.chainId}
+                tokenlogoURI={toToken?.logoURI}
+                tokenSymbol={toToken?.symbol}
+              />
+            </div>
+            <div className="relay-absolute relay-bottom-0 relay-left-0">
+              <ChainTokenIcon
+                chainId={fromToken?.chainId}
+                tokenlogoURI={fromToken?.logoURI}
+                tokenSymbol={fromToken?.symbol}
+              />
+            </div>
+          </div>
           <Text style="subtitle2">
             Purchase {fromToken?.symbol} ({fromChain?.displayName}) via your
             card for Relay to convert to {toToken?.symbol} (
diff --git a/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampProcessingPassthroughStep.tsx b/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampProcessingPassthroughStep.tsx
index f83341ec4..2e0651183 100644
--- a/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampProcessingPassthroughStep.tsx
+++ b/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampProcessingPassthroughStep.tsx
@@ -1,7 +1,6 @@
 import type { FC } from 'react'
 import {
   Anchor,
-  Box,
   ChainTokenIcon,
   Flex,
   Text
@@ -25,33 +24,20 @@ export const OnrampProcessingPassthroughStep: FC<
   return (
     <Flex
       direction="column"
-      css={{
-        width: '100%',
-        height: '100%'
-      }}
+      className="relay-w-full relay-h-full"
     >
-      <Text style="h6" css={{ mb: '4' }}>
+      <Text style="h6" className="relay-mb-4">
         Processing Transaction
       </Text>
       <Flex
         align="center"
-        css={{
-          width: '100%',
-          p: '3',
-          mb: '2',
-          gap: '2',
-          background: 'gray2',
-          borderRadius: 12
-        }}
+        className="relay-w-full relay-p-3 relay-mb-2 relay-gap-2 relay-rounded-[12px] relay-bg-[var(--relay-colors-gray2)]"
       >
         <ChainTokenIcon
           chainId={toToken?.chainId}
           tokenlogoURI={toToken?.logoURI}
           tokenSymbol={toToken?.symbol}
-          css={{
-            width: 32,
-            height: 32
-          }}
+          className="relay-w-[32px] relay-h-[32px]"
         />
         <Flex align="start" direction="column">
           <Text style="h6">
@@ -66,38 +52,21 @@ export const OnrampProcessingPassthroughStep: FC<
         direction="column"
         justify="center"
         align="center"
-        css={{
-          py: '4',
-          px: '3',
-          borderRadius: 'widget-card-border-radius',
-          '--borderColor': 'colors.subtle-border-color',
-          border: '1px solid var(--borderColor)'
-        }}
+        className="relay-py-4 relay-px-3 relay-rounded-widget-card relay-border relay-border-solid relay-border-[var(--relay-colors-subtle-border-color)]"
       >
-        <Box css={{ position: 'relative', width: 40, height: 40 }}>
-          <MoonPayLogo style={{ borderRadius: 12, width: 40, height: 40 }} />
+        <div className="relay-relative relay-w-[40px] relay-h-[40px]">
+          <MoonPayLogo className="relay-rounded-[12px] relay-w-[40px] relay-h-[40px]" />
           <Flex
             align="center"
             justify="center"
-            css={{
-              width: 24,
-              height: 24,
-              borderRadius: '100%',
-              overflow: 'hidden',
-              background: 'primary3',
-              position: 'absolute',
-              bottom: '-6px',
-              right: '-6px',
-              '--borderColor': 'colors.modal-background',
-              border: '2px solid var(--borderColor)'
-            }}
+            className="relay-absolute relay-rounded-full relay-overflow-hidden relay-w-[24px] relay-h-[24px] relay-bg-[var(--relay-colors-primary3)] -relay-bottom-[6px] -relay-right-[6px] relay-border-2 relay-border-solid relay-border-[var(--relay-colors-modal-background)]"
           >
             <LoadingSpinner
-              css={{ height: 16, width: 16, fill: 'primary-color' }}
+              className="relay-h-[16px] relay-w-[16px] relay-fill-[var(--relay-colors-primary-color)]"
             />
           </Flex>
-        </Box>
-        <Text style="subtitle2" css={{ mt: '24px', textAlign: 'center' }}>
+        </div>
+        <Text style="subtitle2" className="relay-mt-[24px] relay-text-center">
           Finalizing your purchase through MoonPay, it may take a few minutes to
           process.
         </Text>
@@ -105,14 +74,14 @@ export const OnrampProcessingPassthroughStep: FC<
           <Anchor
             href={moonpayTxUrl}
             target="_blank"
-            css={{ display: 'flex', alignItems: 'center', gap: '1', mt: '2' }}
+            className="relay-flex relay-items-center relay-gap-1 relay-mt-2"
           >
             Track MoonPay transaction{' '}
-            <FontAwesomeIcon icon={faUpRightFromSquare} style={{ width: 14 }} />
+            <FontAwesomeIcon icon={faUpRightFromSquare} className="relay-w-[14px]" />
           </Anchor>
         ) : null}
       </Flex>
-      <Text style="body2" color="subtle" css={{ mt: '2' }}>
+      <Text style="body2" color="subtle" className="relay-mt-2">
         Feel free to leave at any time, MoonPay will email you with updates.
       </Text>
     </Flex>
diff --git a/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampProcessingStepUI.tsx b/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampProcessingStepUI.tsx
index ff10aed0d..2ae71f067 100644
--- a/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampProcessingStepUI.tsx
+++ b/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampProcessingStepUI.tsx
@@ -69,41 +69,29 @@ export const OnrampProcessingStepUI: FC<OnrampProcessingStepUIProps> = ({
   return (
     <Flex
       direction="column"
-      css={{
-        width: '100%',
-        height: '100%'
-      }}
+      className="relay-w-full relay-h-full"
     >
-      <Text style="h6" css={{ mb: '4' }}>
+      <Text style="h6" className="relay-mb-4">
         Processing Transaction
       </Text>
       <Flex
         direction="column"
-        css={{
-          width: '100%',
-          overflow: 'hidden',
-          borderRadius: 'widget-card-border-radius',
-          '--borderColor': 'colors.subtle-border-color',
-          border: '1px solid var(--borderColor)',
-          p: '4',
-          mb: '4'
-        }}
+        className="relay-w-full relay-overflow-hidden relay-p-4 relay-mb-4 relay-rounded-widget-card relay-border relay-border-solid relay-border-[var(--relay-colors-subtle-border-color)]"
       >
-        <Flex align="center" css={{ gap: '2' }}>
-          <ChainTokenIcon
-            chainId={fromToken?.chainId}
-            tokenlogoURI={fromToken?.logoURI}
-            tokenSymbol={fromToken?.symbol}
-            css={{
-              width: 32,
-              height: 32,
-              filter:
-                processingStep === OnrampProcessingStep.Relaying
-                  ? 'grayscale(1)'
-                  : 'none'
-            }}
-          />
-          <Flex css={{ gap: '1' }} direction="column">
+        <Flex align="center" className="relay-gap-2">
+          <div style={{
+            filter:
+              processingStep === OnrampProcessingStep.Relaying
+                ? 'grayscale(1)'
+                : 'none'
+          }}>
+            <ChainTokenIcon
+              chainId={fromToken?.chainId}
+              tokenlogoURI={fromToken?.logoURI}
+              tokenSymbol={fromToken?.symbol}
+            />
+          </div>
+          <Flex className="relay-gap-1" direction="column">
             <Text
               style="subtitle1"
               color={
@@ -120,23 +108,23 @@ export const OnrampProcessingStepUI: FC<OnrampProcessingStepUIProps> = ({
               <Anchor
                 href={moonpayTxUrl}
                 target="_blank"
-                css={{ display: 'flex', alignItems: 'center', gap: '1' }}
+                className="relay-flex relay-items-center relay-gap-1"
               >
                 Track MoonPay transaction{' '}
                 <FontAwesomeIcon
                   icon={faUpRightFromSquare}
-                  style={{ width: 14 }}
+                  className="relay-w-[14px]"
                 />
               </Anchor>
             ) : null}
           </Flex>
           {processingStep === OnrampProcessingStep.Relaying ? (
-            <Box css={{ color: 'green9', ml: 'auto' }}>
-              <FontAwesomeIcon icon={faCheck} style={{ height: 16 }} />
+            <Box className="relay-text-[color:var(--relay-colors-green9)] relay-ml-auto">
+              <FontAwesomeIcon icon={faCheck} className="relay-h-[16px]" />
             </Box>
           ) : (
             <LoadingSpinner
-              css={{ height: 20, width: 20, fill: 'gray9', ml: 'auto' }}
+              className="relay-h-[20px] relay-w-[20px] relay-fill-[var(--relay-colors-gray9)] relay-ml-auto"
             />
           )}
         </Flex>
@@ -144,17 +132,7 @@ export const OnrampProcessingStepUI: FC<OnrampProcessingStepUIProps> = ({
           delayedMoonpayTx ? (
             <Flex
               direction="column"
-              css={{
-                width: '100%',
-                overflow: 'hidden',
-                borderRadius: 'widget-card-border-radius',
-                '--borderColor': 'colors.subtle-border-color',
-                border: '1px solid var(--borderColor)',
-                p: '2',
-                mb: '6px',
-                gap: '3',
-                mt: '6px'
-              }}
+              className="relay-w-full relay-overflow-hidden relay-p-2 relay-mb-[6px] relay-gap-3 relay-mt-[6px] relay-rounded-widget-card relay-border relay-border-solid relay-border-[var(--relay-colors-subtle-border-color)]"
             >
               <Text color="warning" style="subtitle2">
                 Looks like its taking longer than expected. Please go to MoonPay
@@ -163,12 +141,7 @@ export const OnrampProcessingStepUI: FC<OnrampProcessingStepUIProps> = ({
               <Button
                 cta={true}
                 color="warning"
-                css={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: '2',
-                  justifyContent: 'center'
-                }}
+                className="relay-flex relay-items-center relay-gap-2 relay-justify-center"
                 onClick={(e) => {
                   window.open(moonpayTxUrl, '_blank')
                 }}
@@ -176,7 +149,7 @@ export const OnrampProcessingStepUI: FC<OnrampProcessingStepUIProps> = ({
                 Go to MoonPay{' '}
                 <FontAwesomeIcon
                   icon={faArrowUpRightFromSquare}
-                  style={{ width: 16, height: 16 }}
+                  className="relay-w-[16px] relay-h-[16px]"
                 />
               </Button>
             </Flex>
@@ -184,7 +157,7 @@ export const OnrampProcessingStepUI: FC<OnrampProcessingStepUIProps> = ({
             <Pill
               radius="rounded"
               color="gray"
-              css={{ width: '100%', py: '2', px: '3', mt: '6px' }}
+              className="relay-w-full relay-py-2 relay-px-3 relay-mt-[6px]"
             >
               <Text style="subtitle2" color="subtle">
                 It might take a few minutes for the MoonPay transaction to
@@ -194,34 +167,25 @@ export const OnrampProcessingStepUI: FC<OnrampProcessingStepUIProps> = ({
           )
         ) : null}
 
-        <Box
-          css={{
-            height: 24,
-            width: 1,
-            background: 'gray5',
-            my: '5px',
-            ml: 4
-          }}
+        <div
+          className="relay-ml-[16px] relay-h-[24px] relay-w-px relay-bg-[var(--relay-colors-gray5)] relay-mt-[5px] relay-mb-[5px]"
         />
         <Flex
           align="center"
-          css={{
-            gap: '2'
-          }}
+          className="relay-gap-2"
         >
-          <ChainTokenIcon
-            chainId={toToken?.chainId}
-            tokenlogoURI={toToken?.logoURI}
-            css={{
-              width: 32,
-              height: 32,
-              filter:
-                processingStep === OnrampProcessingStep.Relaying
-                  ? 'none'
-                  : 'grayscale(1)'
-            }}
-          />
-          <Flex css={{ gap: '1' }} direction="column">
+          <div style={{
+            filter:
+              processingStep === OnrampProcessingStep.Relaying
+                ? 'none'
+                : 'grayscale(1)'
+          }}>
+            <ChainTokenIcon
+              chainId={toToken?.chainId}
+              tokenlogoURI={toToken?.logoURI}
+            />
+          </div>
+          <Flex className="relay-gap-1" direction="column">
             <Text
               style="subtitle1"
               color={
@@ -238,7 +202,7 @@ export const OnrampProcessingStepUI: FC<OnrampProcessingStepUIProps> = ({
               <Anchor
                 href={fillTxUrl}
                 target="_blank"
-                css={{ display: 'flex', alignItems: 'center', gap: '1' }}
+                className="relay-flex relay-items-center relay-gap-1"
               >
                 View Tx: {truncateAddress(fillTxHash)}
               </Anchor>
@@ -246,7 +210,7 @@ export const OnrampProcessingStepUI: FC<OnrampProcessingStepUIProps> = ({
           </Flex>
           {processingStep === OnrampProcessingStep.Relaying ? (
             <LoadingSpinner
-              css={{ height: 16, width: 16, fill: 'gray9', ml: 'auto' }}
+              className="relay-h-[16px] relay-w-[16px] relay-fill-[var(--relay-colors-gray9)] relay-ml-auto"
             />
           ) : null}
         </Flex>
@@ -257,7 +221,7 @@ export const OnrampProcessingStepUI: FC<OnrampProcessingStepUIProps> = ({
           <Anchor
             href={`${baseTransactionUrl}/transaction/${requestId}`}
             target="_blank"
-            css={{ ml: '1' }}
+            className="relay-ml-1"
           >
             transaction page
           </Anchor>
@@ -271,7 +235,7 @@ export const OnrampProcessingStepUI: FC<OnrampProcessingStepUIProps> = ({
           <Anchor
             href="https://support.relay.link/en/articles/10517947-fiat-on-ramps"
             target="_blank"
-            css={{ ml: '1' }}
+            className="relay-ml-1"
           >
             Learn more
           </Anchor>
diff --git a/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampSuccessStep.tsx b/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampSuccessStep.tsx
index 3e3aee160..b9959d636 100644
--- a/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampSuccessStep.tsx
+++ b/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampSuccessStep.tsx
@@ -1,5 +1,4 @@
 import type { FC } from 'react'
-import { motion } from 'framer-motion'
 import {
   Anchor,
   Box,
@@ -39,72 +38,53 @@ export const OnrampSuccessStep: FC<OnrampSuccessStepProps> = ({
   return (
     <Flex
       direction="column"
-      css={{
-        width: '100%',
-        height: '100%'
-      }}
+      className="relay-w-full relay-h-full"
     >
-      <Text style="h6" css={{ mb: '4' }}>
+      <Text style="h6" className="relay-mb-4">
         Transaction Details
       </Text>
       <Flex direction="column" align="center" justify="between">
-        <motion.div
-          initial={{ scale: 0 }}
-          animate={{ scale: 1 }}
-          transition={{
-            type: 'spring',
-            stiffness: 260,
-            damping: 20
-          }}
-        >
+        <div className="relay-animate-content-fade-in">
           <Flex
             align="center"
             justify="center"
-            css={{
-              height: 80,
-              width: 80,
-              backgroundColor: 'green2',
-              '--borderColor': 'colors.green10',
-              border: '6px solid var(--borderColor)',
-              borderRadius: '999999px',
-              position: 'relative'
-            }}
+            className="relay-relative relay-rounded-full relay-h-[80px] relay-w-[80px] relay-bg-[var(--relay-colors-green2)] relay-border-[6px] relay-border-solid relay-border-[var(--relay-colors-green10)]"
           >
-            <Box css={{ color: 'green9', mr: '$2' }}>
-              <FontAwesomeIcon icon={faCheck} style={{ height: 40 }} />
+            <Box className="relay-text-[color:var(--relay-colors-green9)] relay-mr-[8px]">
+              <FontAwesomeIcon icon={faCheck} className="relay-h-[40px]" />
             </Box>
           </Flex>
-        </motion.div>
+        </div>
 
-        <Text style="subtitle1" css={{ mt: '4', textAlign: 'center' }}>
+        <Text style="subtitle1" className="relay-mt-4 relay-text-center">
           Successfully purchased
         </Text>
         <Pill
           color="gray"
-          css={{ alignItems: 'center', my: '4', py: '2', px: '3', gap: '2' }}
+          className="relay-items-center relay-my-4 relay-py-2 relay-px-3 relay-gap-2"
         >
           <ChainTokenIcon
             chainId={toToken.chainId}
             tokenlogoURI={toToken.logoURI}
             tokenSymbol={toToken.symbol}
-            css={{ height: 32, width: 32 }}
+            className="relay-h-[32px] relay-w-[32px]"
           />
           {isLoadingTransaction ? (
-            <Skeleton css={{ height: 24, width: 60, background: 'gray5' }} />
+            <Skeleton className="relay-h-[24px] relay-w-[60px] relay-bg-[var(--relay-colors-gray5)]" />
           ) : (
             <Text style="subtitle1" ellipsify>
               {toAmountFormatted} {toToken.symbol}
             </Text>
           )}
         </Pill>
-        <Flex direction="column" css={{ gap: '2' }} align="center">
+        <Flex direction="column" className="relay-gap-2" align="center">
           <Anchor
             href={moonpayTxUrl}
             target="_blank"
-            css={{ display: 'flex', alignItems: 'center', gap: '1' }}
+            className="relay-flex relay-items-center relay-gap-1"
           >
             View MoonPay transaction{' '}
-            <FontAwesomeIcon icon={faUpRightFromSquare} style={{ width: 14 }} />
+            <FontAwesomeIcon icon={faUpRightFromSquare} className="relay-w-[14px]" />
           </Anchor>
           {fillTxUrl ? (
             <Anchor href={fillTxUrl} target="_blank">
@@ -113,11 +93,11 @@ export const OnrampSuccessStep: FC<OnrampSuccessStepProps> = ({
           ) : null}
         </Flex>
       </Flex>
-      <Flex css={{ width: '100%', mt: '24px', gap: '3' }}>
+      <Flex className="relay-w-full relay-mt-[24px] relay-gap-3">
         {fillTxHash ? (
           <a
             href={`${baseTransactionUrl}/transaction/${fillTxHash}`}
-            style={{ width: '100%' }}
+            className="relay-w-full"
             target="_blank"
             onClick={(e) => {
               e.stopPropagation()
@@ -126,10 +106,7 @@ export const OnrampSuccessStep: FC<OnrampSuccessStepProps> = ({
             <Button
               cta={true}
               color="secondary"
-              css={{
-                justifyContent: 'center',
-                width: 'max-content'
-              }}
+              className="relay-justify-center relay-w-max"
             >
               View Details
             </Button>
@@ -140,10 +117,7 @@ export const OnrampSuccessStep: FC<OnrampSuccessStepProps> = ({
           onClick={() => {
             onOpenChange(false)
           }}
-          css={{
-            justifyContent: 'center',
-            width: '100%'
-          }}
+          className="relay-justify-center relay-w-full"
         >
           Done
         </Button>
diff --git a/packages/ui/src/components/widgets/OnrampWidget/widget/FiatCurrencyModal.tsx b/packages/ui/src/components/widgets/OnrampWidget/widget/FiatCurrencyModal.tsx
index 74a23d9ff..6eee61137 100644
--- a/packages/ui/src/components/widgets/OnrampWidget/widget/FiatCurrencyModal.tsx
+++ b/packages/ui/src/components/widgets/OnrampWidget/widget/FiatCurrencyModal.tsx
@@ -18,6 +18,7 @@ import useMoonPayCurrencies, {
   type MoonPayFiatCurrency
 } from '../../../../hooks/useMoonPayCurrencies.js'
 import moonpayFiatCurrencies from '../../../../constants/moonPayFiatCurrencies.js'
+import { cn } from '../../../../utils/cn.js'
 
 type Props = {
   moonPayApiKey: string
@@ -88,33 +89,17 @@ const FiatCurrencyModal: FC<Props> = ({
         <Button
           color="white"
           corners="pill"
-          css={{
-            height: 28,
-            minHeight: 28,
-            width: 'max-content',
-            flexShrink: 0,
-            overflow: 'hidden',
-            gap: '1',
-            display: 'flex',
-            alignItems: 'center',
-            py: '1',
-            px: '2',
-            backgroundColor: 'gray2',
-            border: 'none',
-            _hover: {
-              backgroundColor: 'gray3'
-            }
-          }}
+          className="relay-h-[28px] relay-min-h-[28px] relay-w-max relay-shrink-0 relay-overflow-hidden relay-gap-1 relay-flex relay-items-center relay-py-1 relay-px-2 relay-bg-[var(--relay-colors-gray2)] relay-border-none hover:relay-bg-[var(--relay-colors-gray3)]"
         >
           <img
             alt="currency-icon"
             src={fiatCurrency.icon}
-            style={{ width: 16, height: 16, borderRadius: '50%' }}
+            className="relay-w-[16px] relay-h-[16px] relay-rounded-full"
           />
           <Text style="subtitle2" color="subtle">
             {fiatCurrency.code.toUpperCase()}
           </Text>
-          <Box css={{ color: 'gray9', width: 14 }}>
+          <Box className="relay-text-[color:var(--relay-colors-gray9)] relay-w-[14px]">
             <FontAwesomeIcon icon={faChevronDown} width={14} />
           </Box>
         </Button>
@@ -128,23 +113,11 @@ const FiatCurrencyModal: FC<Props> = ({
         }
         setOpen(open)
       }}
-      css={{
-        overflow: 'hidden',
-        p: '4',
-        maxWidth: '100vw',
-        maxHeight: '450px !important',
-        height: 450,
-        sm: {
-          maxWidth: '400px !important'
-        }
-      }}
+      className="relay-overflow-hidden relay-p-4 relay-max-w-[100vw] !relay-max-h-[450px] relay-h-[450px] sm:!relay-max-w-[400px]"
     >
       <Text
         style="h6"
-        css={{
-          width: '100%',
-          textAlign: 'left'
-        }}
+        className="relay-w-full relay-text-left"
       >
         Select a currency
       </Text>
@@ -160,30 +133,16 @@ const FiatCurrencyModal: FC<Props> = ({
             setOpen(false)
           }
         }}
-        css={{
-          display: 'flex',
-          flexDirection: 'column',
-          width: '100%',
-          gap: '1',
-          height: 'calc(100% - 24px)',
-          overflowY: 'auto',
-          scrollPaddingTop: '40px'
-        }}
+        className="relay-flex relay-flex-col relay-w-full relay-gap-1 relay-overflow-y-auto relay-h-[calc(100%-24px)] relay-scroll-pt-[40px]"
       >
         <AccessibleListItem value="input" asChild>
           <Box
-            css={{
-              bg: 'modal-background',
-              position: 'sticky',
-              py: '2',
-              zIndex: 1,
-              top: 0
-            }}
+            className="relay-sticky relay-py-2 relay-z-[1] relay-top-0 relay-bg-[var(--relay-colors-modal-background)]"
           >
             <Input
               placeholder="Search for a currency"
               icon={
-                <Box css={{ color: 'gray9' }}>
+                <Box className="relay-text-[color:var(--relay-colors-gray9)]">
                   <FontAwesomeIcon
                     icon={faMagnifyingGlass}
                     width={16}
@@ -191,17 +150,9 @@ const FiatCurrencyModal: FC<Props> = ({
                   />
                 </Box>
               }
-              containerCss={{
-                width: '100%',
-                height: 40,
-                scrollSnapAlign: 'start'
-              }}
-              css={{
-                width: '100%',
-                _placeholder_parent: {
-                  textOverflow: 'ellipsis'
-                }
-              }}
+              containerClassName="relay-w-full"
+              style={{ scrollSnapAlign: 'start' }}
+              className="relay-w-full relay-h-[40px]"
               value={currencySearchInput}
               onChange={(e) => {
                 setCurrencySearchInput((e.target as HTMLInputElement).value)
@@ -220,55 +171,30 @@ const FiatCurrencyModal: FC<Props> = ({
               <Button
                 color="ghost"
                 size="none"
-                css={{
-                  scrollSnapAlign: 'start',
-                  p: '2',
-                  mb: i + 1 < (fiatCurrencies?.length ?? 0) ? '1' : 0,
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: '2',
-                  position: 'relative',
-                  ...(active && {
-                    _before: {
-                      content: '""',
-                      position: 'absolute',
-                      borderRadius: 8,
-                      top: 0,
-                      left: 0,
-                      width: '100%',
-                      height: '100%',
-                      opacity: 0.15,
-                      backgroundColor: 'primary-color',
-                      zIndex: -1
-                    }
-                  }),
-                  transition: 'backdrop-filter 250ms linear',
-                  _hover: {
-                    backgroundColor: active ? '' : 'gray/10'
-                  },
-                  '--focusColor': 'colors.focus-color',
-                  _focusVisible: {
-                    boxShadow: 'inset 0 0 0 2px var(--focusColor)'
-                  },
-                  '&[data-state="on"]': {
-                    boxShadow: 'inset 0 0 0 2px var(--focusColor)'
-                  },
-                  _active: {
-                    boxShadow: 'inset 0 0 0 2px var(--focusColor)'
-                  },
-                  _focusWithin: {
-                    boxShadow: 'inset 0 0 0 2px var(--focusColor)'
-                  }
-                }}
+                className={cn(
+                  'relay-p-2 relay-flex relay-items-center relay-gap-2 relay-relative',
+                  'relay-transition-[backdrop-filter] relay-duration-[250ms] relay-ease-linear',
+                  'focus-visible:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)]',
+                  '[&[data-state=on]]:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)]',
+                  'active:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)]',
+                  !active && 'hover:relay-bg-[rgba(128,128,128,0.1)]',
+                  i + 1 < (fiatCurrencies?.length ?? 0) ? 'relay-mb-1' : ''
+                )}
+                style={{ scrollSnapAlign: 'start' }}
               >
-                <Flex align="center" css={{ gap: '2' }}>
+                {active ? (
+                  <div
+                    className="relay-absolute relay-rounded-[8px] relay-top-0 relay-left-0 relay-w-full relay-h-full relay-opacity-[0.15] relay-z-[-1] relay-bg-[var(--relay-colors-primary-color)]"
+                  />
+                ) : null}
+                <Flex align="center" className="relay-gap-2">
                   <img
                     src={currency.icon}
                     alt={`${currency.name} icon`}
-                    style={{ width: 32, height: 32, borderRadius: '50%' }}
+                    className="relay-w-[32px] relay-h-[32px] relay-rounded-full"
                   />
                   <Flex
-                    css={{ gap: '2px', textAlign: 'left' }}
+                    className="relay-gap-[2px] relay-text-left"
                     direction="column"
                   >
                     <Text style="subtitle2">{currency.name}</Text>
@@ -283,7 +209,7 @@ const FiatCurrencyModal: FC<Props> = ({
         })}
         {/* Empty State */}
         {filteredCurrencies.length === 0 ? (
-          <Text style="subtitle2" css={{ textAlign: 'center', py: '5' }}>
+          <Text style="subtitle2" className="relay-text-center relay-py-5">
             No results found.
           </Text>
         ) : null}
diff --git a/packages/ui/src/components/widgets/OnrampWidget/widget/index.tsx b/packages/ui/src/components/widgets/OnrampWidget/widget/index.tsx
index cb51cf592..cf7d0dfa7 100644
--- a/packages/ui/src/components/widgets/OnrampWidget/widget/index.tsx
+++ b/packages/ui/src/components/widgets/OnrampWidget/widget/index.tsx
@@ -199,35 +199,20 @@ const OnrampWidget: FC<OnrampWidgetProps> = ({
 
         return (
           <div
-            className="relay-kit-reset"
-            style={{ maxWidth: 408, minWidth: 320, width: '100%' }}
+            className="relay-kit-reset relay-max-w-[408px] relay-min-w-[320px] relay-w-full"
           >
             <Flex
               direction="column"
-              css={{
-                gap: '2',
-                border: 'widget-border',
-                width: '100%'
-              }}
+              className="relay-gap-2 relay-w-full relay-border-widget"
             >
               <Flex
                 direction="column"
-                css={{
-                  width: '100%',
-                  overflow: 'hidden',
-                  borderRadius: 'widget-card-border-radius',
-                  backgroundColor: 'widget-background',
-                  border: 'widget-card-border',
-                  mb: 'widget-card-section-gutter',
-                  px: '4',
-                  pt: '40px',
-                  pb: '24px'
-                }}
+                className="relay-w-full relay-overflow-hidden relay-px-4 relay-pt-[40px] relay-pb-[24px] relay-rounded-widget-card relay-bg-[var(--relay-colors-widget-background)] relay-border-widget-card relay-mb-[var(--relay-spacing-widget-card-section-gutter)]"
               >
                 <Text
                   style="subtitle2"
                   color="subtle"
-                  css={{ textAlign: 'center' }}
+                  className="relay-text-center"
                 >
                   Enter an amount
                 </Text>
@@ -333,7 +318,8 @@ const OnrampWidget: FC<OnrampWidgetProps> = ({
                     }
                     input.style.caretColor = 'initial'
                   }}
-                  css={{
+                  className="relay-text-center relay-whitespace-pre"
+                  inputStyle={{
                     fontWeight: '700',
                     fontSize: 48,
                     lineHeight: '58px',
@@ -342,18 +328,12 @@ const OnrampWidget: FC<OnrampWidgetProps> = ({
                       amount === '' || amountToToken === ''
                         ? '-36px'
                         : undefined,
-                    whiteSpace: 'pre',
-                    _placeholder: {
-                      color: 'text-subtle'
-                    }
-                  }}
-                  containerCss={{
-                    mb: '2',
-                    width: '100%'
+                    whiteSpace: 'pre'
                   }}
+                  containerClassName="relay-mb-2 relay-w-full"
                 />
                 {notEnoughFiat ? (
-                  <Text color="red" css={{ mb: 24, textAlign: 'center' }}>
+                  <Text color="red" className="relay-mb-[24px] relay-text-center">
                     Minimum amount is{' '}
                     {displayCurrency && minAmountCurrency
                       ? `${minAmountCurrency} ${token.symbol}`
@@ -361,15 +341,7 @@ const OnrampWidget: FC<OnrampWidgetProps> = ({
                   </Text>
                 ) : undefined}
                 <button
-                  style={{
-                    gap: '8px',
-                    cursor: 'pointer',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    marginBottom: '16px',
-                    alignSelf: 'center'
-                  }}
+                  className="relay-gap-2 relay-cursor-pointer relay-flex relay-items-center relay-justify-center relay-mb-[16px] relay-self-center"
                   onClick={() => {
                     const _displayCurrency = !displayCurrency
                     setDisplayCurrency(_displayCurrency)
@@ -391,16 +363,14 @@ const OnrampWidget: FC<OnrampWidgetProps> = ({
                       : `${amountToTokenFormatted} ${token.symbol}`}
                   </Text>
                   <Flex
-                    css={{
-                      color: 'gray8'
-                    }}
+                    className="relay-text-[color:var(--relay-colors-gray8)]"
                   >
                     <FontAwesomeIcon
-                      style={{ height: 14 }}
+                      className="relay-h-[14px]"
                       icon={faArrowUpLong}
                     />
                     <FontAwesomeIcon
-                      style={{ height: 14 }}
+                      className="relay-h-[14px]"
                       icon={faArrowDownLong}
                     />
                   </Flex>
@@ -419,38 +389,18 @@ const OnrampWidget: FC<OnrampWidgetProps> = ({
                   context="to"
                   trigger={
                     <div
-                      style={{
-                        width: 'max-content',
-                        margin: '0 auto',
-                        marginBottom: '16px'
-                      }}
+                      className="relay-w-max relay-mx-auto relay-mb-[16px]"
                       data-testid="onramp-token-select-button"
                     >
                       <TokenTrigger token={token} />
                     </div>
                   }
                 />
-                <Flex css={{ gap: '2', margin: '0 auto' }}>
+                <Flex className="relay-gap-2 relay-mx-auto">
                   <Button
                     color="white"
                     corners="pill"
-                    css={{
-                      minHeight: 28,
-                      px: 3,
-                      py: 1,
-                      _light: {
-                        filter:
-                          amount === '100' && !displayCurrency
-                            ? 'brightness(97%)'
-                            : undefined
-                      },
-                      _dark: {
-                        filter:
-                          amount === '100' && !displayCurrency
-                            ? 'brightness(130%)'
-                            : undefined
-                      }
-                    }}
+                    className="relay-min-h-[28px] relay-px-3 relay-py-1"
                     onClick={() => {
                       setDisplayCurrency(false)
                       setInputValue('100', false)
@@ -461,23 +411,7 @@ const OnrampWidget: FC<OnrampWidgetProps> = ({
                   <Button
                     color="white"
                     corners="pill"
-                    css={{
-                      minHeight: 28,
-                      px: 3,
-                      py: 1,
-                      _light: {
-                        filter:
-                          amount === '300' && !displayCurrency
-                            ? 'brightness(97%)'
-                            : undefined
-                      },
-                      _dark: {
-                        filter:
-                          amount === '300' && !displayCurrency
-                            ? 'brightness(130%)'
-                            : undefined
-                      }
-                    }}
+                    className="relay-min-h-[28px] relay-px-3 relay-py-1"
                     onClick={() => {
                       setDisplayCurrency(false)
                       setInputValue('300', false)
@@ -488,23 +422,7 @@ const OnrampWidget: FC<OnrampWidgetProps> = ({
                   <Button
                     color="white"
                     corners="pill"
-                    css={{
-                      minHeight: 28,
-                      px: 3,
-                      py: 1,
-                      _light: {
-                        filter:
-                          amount === '1000' && !displayCurrency
-                            ? 'brightness(97%)'
-                            : undefined
-                      },
-                      _dark: {
-                        filter:
-                          amount === '1000' && !displayCurrency
-                            ? 'brightness(130%)'
-                            : undefined
-                      }
-                    }}
+                    className="relay-min-h-[28px] relay-px-3 relay-py-1"
                     onClick={() => {
                       setDisplayCurrency(false)
                       setInputValue('1000', false)
@@ -517,17 +435,9 @@ const OnrampWidget: FC<OnrampWidgetProps> = ({
             </Flex>
             <Flex
               direction="column"
-              css={{
-                width: '100%',
-                overflow: 'hidden',
-                borderRadius: 'widget-card-border-radius',
-                backgroundColor: 'widget-background',
-                border: 'widget-card-border',
-                mb: 'widget-card-section-gutter',
-                p: '4'
-              }}
+              className="relay-w-full relay-overflow-hidden relay-p-4 relay-rounded-widget-card relay-bg-[var(--relay-colors-widget-background)] relay-border-widget-card relay-mb-[var(--relay-spacing-widget-card-section-gutter)]"
             >
-              <Flex justify="between" align="center" css={{ mb: '2' }}>
+              <Flex justify="between" align="center" className="relay-mb-2">
                 <Text color="subtle" style="subtitle2">
                   Recipient
                 </Text>
@@ -571,19 +481,14 @@ const OnrampWidget: FC<OnrampWidgetProps> = ({
                     }
                     corners="pill"
                     size="none"
-                    css={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      px: '2',
-                      py: '1'
-                    }}
+                    className="relay-flex relay-items-center relay-px-2 relay-py-1"
                     onClick={() => {
                       setAddressModalOpen(true)
                       onAnalyticEvent?.(EventNames.SWAP_ADDRESS_MODAL_CLICKED)
                     }}
                   >
                     {isValidRecipient && !isRecipientLinked ? (
-                      <Box css={{ color: 'amber11' }}>
+                      <Box className="relay-text-[color:var(--relay-colors-amber11)]">
                         <FontAwesomeIcon
                           icon={faClipboard}
                           width={16}
@@ -593,12 +498,11 @@ const OnrampWidget: FC<OnrampWidgetProps> = ({
                     ) : null}
                     <Text
                       style="subtitle2"
-                      css={{
-                        color:
-                          isValidRecipient && !isRecipientLinked
-                            ? 'amber11'
-                            : 'anchor-color'
-                      }}
+                      className={
+                        isValidRecipient && !isRecipientLinked
+                          ? 'relay-text-[color:var(--relay-colors-amber11)]'
+                          : 'relay-text-[color:var(--relay-colors-anchor-color)]'
+                      }
                     >
                       {!isValidRecipient ? `Enter Address` : toDisplayName}
                     </Text>
@@ -610,15 +514,9 @@ const OnrampWidget: FC<OnrampWidgetProps> = ({
                   Paying with
                 </Text>
                 <Flex
-                  css={{
-                    alignItems: 'center',
-                    gap: '2',
-                    ml: 'auto',
-                    mr: '2',
-                    color: 'gray9'
-                  }}
+                  className="relay-items-center relay-gap-2 relay-ml-auto relay-mr-2 relay-text-[color:var(--relay-colors-gray9)]"
                 >
-                  <FontAwesomeIcon style={{ width: 16 }} icon={faCreditCard} />
+                  <FontAwesomeIcon className="relay-w-[16px]" icon={faCreditCard} />
                   <Text style="subtitle2">Card</Text>
                 </Flex>
                 {/* Hiding this until issues are resolved with MoonPay
@@ -631,7 +529,7 @@ const OnrampWidget: FC<OnrampWidgetProps> = ({
             </Flex>
             <Button
               cta={true}
-              css={{ width: '100%', justifyContent: 'center' }}
+              className="relay-w-full relay-justify-center"
               disabled={notEnoughFiat}
               onClick={() => {
                 if (!recipient && toChainWalletVMSupported) {
diff --git a/packages/ui/src/components/widgets/PriceImpactTooltip.tsx b/packages/ui/src/components/widgets/PriceImpactTooltip.tsx
index f747fe6ba..00e484c50 100644
--- a/packages/ui/src/components/widgets/PriceImpactTooltip.tsx
+++ b/packages/ui/src/components/widgets/PriceImpactTooltip.tsx
@@ -1,5 +1,5 @@
 import type { FC, ReactNode } from 'react'
-import { Anchor, Flex, Text, Box } from '../primitives/index.js'
+import { Anchor, Flex, Text } from '../primitives/index.js'
 import Tooltip from '../primitives/Tooltip.js'
 import type { ChildrenProps } from '../widgets/SwapWidgetRenderer.js'
 
@@ -22,14 +22,14 @@ export const PriceImpactTooltip: FC<PriceImpactTooltipProps> = ({
   return (
     <Tooltip
       content={
-        <Flex css={{ minWidth: 200 }} direction="column">
-          <Flex align="center" css={{ width: '100%' }}>
-            <Text style="subtitle3" css={{ mr: 'auto' }}>
+        <Flex className="relay-min-w-[200px]" direction="column">
+          <Flex align="center" className="relay-w-full">
+            <Text style="subtitle3" className="relay-mr-auto">
               Total Price Impact{' '}
             </Text>
             <Text
               style="subtitle3"
-              css={{ mr: '1', ml: '2' }}
+              className="relay-mr-1 relay-ml-2"
               color={feeBreakdown?.totalFees?.priceImpactColor}
             >
               {feeBreakdown?.totalFees.priceImpact}
@@ -41,17 +41,11 @@ export const PriceImpactTooltip: FC<PriceImpactTooltipProps> = ({
               ({feeBreakdown?.totalFees.priceImpactPercentage})
             </Text>
           </Flex>
-          <Box
-            css={{
-              width: '100%',
-              height: 1,
-              backgroundColor: 'slate.6',
-              marginTop: '2',
-              marginBottom: '2'
-            }}
+          <div
+            className="relay-w-full relay-h-px relay-bg-[var(--relay-colors-slate-6)] relay-my-2"
           />
-          <Flex align="center" css={{ width: '100%' }}>
-            <Text style="subtitle3" color="subtle" css={{ mr: 'auto' }}>
+          <Flex align="center" className="relay-w-full">
+            <Text style="subtitle3" color="subtle" className="relay-mr-auto">
               Swap Impact
             </Text>
             <Text
@@ -66,8 +60,8 @@ export const PriceImpactTooltip: FC<PriceImpactTooltipProps> = ({
               return null
             }
             return (
-              <Flex key={fee.id} align="center" css={{ width: '100%' }}>
-                <Text style="subtitle3" color="subtle" css={{ mr: 'auto' }}>
+              <Flex key={fee.id} align="center" className="relay-w-full">
+                <Text style="subtitle3" color="subtle" className="relay-mr-auto">
                   {fee.name}
                 </Text>
                 {feeBreakdown.isGasSponsored && fee.usd.value === 0 ? (
@@ -88,7 +82,7 @@ export const PriceImpactTooltip: FC<PriceImpactTooltipProps> = ({
             href="https://docs.relay.link/references/api/api_core_concepts/fees#relay-fees"
             target="_blank"
             rel="noopener noreferrer"
-            css={{ color: 'primary11', fontSize: 12 }}
+            className="relay-text-[color:var(--relay-colors-primary11)] relay-text-[12px]"
           >
             Learn more about the fees
           </Anchor>
diff --git a/packages/ui/src/components/widgets/SwapButton.tsx b/packages/ui/src/components/widgets/SwapButton.tsx
index 2eb5d2f7e..8d7e00bff 100644
--- a/packages/ui/src/components/widgets/SwapButton.tsx
+++ b/packages/ui/src/components/widgets/SwapButton.tsx
@@ -3,6 +3,7 @@ import { Button } from '../primitives/index.js'
 import { useMounted } from '../../hooks/index.js'
 import type { ChildrenProps } from './SwapWidgetRenderer.js'
 import { EventNames } from '../../constants/events.js'
+import { cn } from '../../utils/cn.js'
 
 type SwapButtonProps = {
   transactionModalOpen: boolean
@@ -95,13 +96,11 @@ const SwapButton: FC<SwapButtonProps> = ({
 
     return (
       <Button
-        css={{
-          justifyContent: 'center',
-          width: tokenWidgetMode ? '100%' : undefined,
-          ...(!tokenWidgetMode && {
-            textTransform: 'none'
-          })
-        }}
+        className={cn(
+          'relay-justify-center',
+          tokenWidgetMode ? 'relay-w-full' : '',
+          !tokenWidgetMode && 'relay-normal-case'
+        )}
         color={showHighPriceImpactWarning ? 'error' : 'primary'}
         aria-label={context}
         cta={true}
@@ -121,13 +120,11 @@ const SwapButton: FC<SwapButtonProps> = ({
   return (
     <Button
       cta={true}
-      css={{
-        justifyContent: 'center',
-        width: tokenWidgetMode ? '100%' : undefined,
-        ...(!tokenWidgetMode && {
-          textTransform: 'none'
-        })
-      }}
+      className={cn(
+        'relay-justify-center',
+        tokenWidgetMode ? 'relay-w-full' : '',
+        !tokenWidgetMode && 'relay-normal-case'
+      )}
       aria-label="Connect wallet"
       onClick={() => {
         if (!onConnectWallet) {
diff --git a/packages/ui/src/components/widgets/SwapWidget/GasTopUpSection.tsx b/packages/ui/src/components/widgets/SwapWidget/GasTopUpSection.tsx
index 2b5f61d22..6726c4b42 100644
--- a/packages/ui/src/components/widgets/SwapWidget/GasTopUpSection.tsx
+++ b/packages/ui/src/components/widgets/SwapWidget/GasTopUpSection.tsx
@@ -39,7 +39,7 @@ const GasTopUpSection: FC<Props> = ({
   return (
     <Pill
       color="primary"
-      css={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}
+      className="relay-flex relay-items-center relay-cursor-pointer"
       onClick={() => {
         onGasTopUpEnabled(!gasTopUpEnabled)
       }}
@@ -48,10 +48,7 @@ const GasTopUpSection: FC<Props> = ({
         <>
           <Text
             style="subtitle2"
-            css={{
-              color: 'primary12',
-              mr: '2'
-            }}
+            className="relay-text-[color:var(--relay-colors-primary12)] relay-mr-2"
           >
             +
             {gasTopUpAmount
@@ -74,10 +71,7 @@ const GasTopUpSection: FC<Props> = ({
         <>
           <Text
             style="subtitle2"
-            css={{
-              color: 'primary12',
-              mr: '6px'
-            }}
+            className="relay-text-[color:var(--relay-colors-primary12)] relay-mr-[6px]"
           >
             Add Gas (Balance:{' '}
             {gasTopUpBalance
diff --git a/packages/ui/src/components/widgets/SwapWidget/PriceImpact.tsx b/packages/ui/src/components/widgets/SwapWidget/PriceImpact.tsx
index 8c642ba80..80777f0ac 100644
--- a/packages/ui/src/components/widgets/SwapWidget/PriceImpact.tsx
+++ b/packages/ui/src/components/widgets/SwapWidget/PriceImpact.tsx
@@ -21,7 +21,7 @@ export const PriceImpact: FC<{
       quote?.details?.totalImpact?.percent === '0'
     ) {
       return (
-        <Flex css={{ gap: '2px' }}>
+        <Flex className="relay-gap-[2px]">
           <Text style="subtitle3" color="subtle">
             (
           </Text>
@@ -31,9 +31,7 @@ export const PriceImpact: FC<{
           <Text
             style="subtitle3"
             color="subtle"
-            css={{
-              textDecoration: 'line-through'
-            }}
+            className="relay-line-through"
           >
             0.01%
           </Text>
@@ -44,7 +42,7 @@ export const PriceImpact: FC<{
       )
     } else if (feeBreakdown?.isGasSponsored) {
       return (
-        <Flex css={{ gap: '2px' }}>
+        <Flex className="relay-gap-[2px]">
           <Text style="subtitle3" color="subtle">
             (
           </Text>
diff --git a/packages/ui/src/components/widgets/SwapWidget/index.tsx b/packages/ui/src/components/widgets/SwapWidget/index.tsx
index 6cba4db4a..79a6db3d6 100644
--- a/packages/ui/src/components/widgets/SwapWidget/index.tsx
+++ b/packages/ui/src/components/widgets/SwapWidget/index.tsx
@@ -1,4 +1,5 @@
 import { Flex, Button, Text, Box } from '../../primitives/index.js'
+import { cn } from '../../../utils/cn.js'
 import {
   useCallback,
   useContext,
@@ -740,22 +741,16 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                 return (
                   <Flex
                     direction="column"
-                    css={{
-                      width: '100%',
-                      overflow: 'hidden',
-                      border: 'widget-border',
-                      minWidth: 320,
-                      maxWidth: 408
-                    }}
+                    className="relay-w-full relay-overflow-hidden relay-min-w-[320px] relay-max-w-[408px] relay-border-widget"
                   >
                     <TokenSelectorContainer
-                      css={{ backgroundColor: 'widget-background' }}
+                      className="relay-bg-[var(--relay-colors-widget-background)]"
                       id={'from-token-section'}
                     >
                       <Flex
                         align="center"
                         justify="between"
-                        css={{ gap: '2', width: '100%' }}
+                        className="relay-gap-2 relay-w-full"
                       >
                         <Text style="subtitle2" color="subtle">
                           Sell
@@ -795,7 +790,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                       <Flex
                         align="center"
                         justify="between"
-                        css={{ gap: '4', width: '100%' }}
+                        className="relay-gap-4 relay-w-full"
                       >
                         <AmountInput
                           autoFocus={!disableInputAutoFocus}
@@ -831,23 +826,12 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                           onFocus={() => {
                             onAnalyticEvent?.(EventNames.SWAP_INPUT_FOCUSED)
                           }}
-                          css={{
-                            fontWeight: '700',
-                            fontSize: 32,
-                            lineHeight: '36px',
-                            py: 0,
-                            color:
-                              isFetchingQuote && tradeType === 'EXPECTED_OUTPUT'
-                                ? 'text-subtle'
-                                : 'input-color',
-                            _placeholder: {
-                              color:
-                                isFetchingQuote &&
-                                tradeType === 'EXPECTED_OUTPUT'
-                                  ? 'text-subtle'
-                                  : 'input-color'
-                            }
-                          }}
+                          className={cn(
+                            'relay-font-bold relay-text-[32px] relay-leading-[36px] relay-py-0',
+                            isFetchingQuote && tradeType === 'EXPECTED_OUTPUT'
+                              ? 'relay-text-[color:var(--relay-colors-text-subtle)] placeholder:relay-text-[color:var(--relay-colors-text-subtle)]'
+                              : 'relay-text-[color:var(--relay-colors-input-color)] placeholder:relay-text-[color:var(--relay-colors-input-color)]'
+                          )}
                         />
                         <TokenSelector
                           address={address}
@@ -892,7 +876,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                           }
                           popularChainIds={popularChainIds}
                           trigger={
-                            <div style={{ width: 'max-content' }}>
+                            <div className="relay-w-max">
                               <TokenTrigger
                                 token={fromToken}
                                 locked={lockFromToken}
@@ -905,16 +889,16 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                       </Flex>
                       <Flex
                         direction="column"
-                        css={{ gap: '3', width: '100%' }}
+                        className="relay-gap-3 relay-w-full"
                       >
                         <Flex
                           align="center"
                           justify="between"
-                          css={{ gap: '3', width: '100%' }}
+                          className="relay-gap-3 relay-w-full"
                         >
                           <Flex
                             align="center"
-                            css={{ gap: '4px', _hover: { cursor: 'pointer' } }}
+                            className="relay-gap-[4px] hover:relay-cursor-pointer"
                             onClick={() => {
                               toggleInputMode()
                             }}
@@ -922,11 +906,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                             <Text
                               style="subtitle3"
                               color="subtleSecondary"
-                              css={{
-                                minHeight: 18,
-                                display: 'flex',
-                                alignItems: 'center'
-                              }}
+                              className="relay-min-h-[18px] relay-flex relay-items-center"
                             >
                               {isUsdInputMode ? (
                                 fromToken ? (
@@ -939,12 +919,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                                       `${formatNumber(amountInputValue, 4, false)} ${fromToken.symbol}`
                                     ) : (
                                       <Box
-                                        css={{
-                                          width: 45,
-                                          height: 12,
-                                          backgroundColor: 'gray7',
-                                          borderRadius: 'widget-border-radius'
-                                        }}
+                                        className="relay-w-[45px] relay-h-[12px] relay-bg-[var(--relay-colors-gray7)] relay-rounded-[var(--relay-radii-widget-border-radius)]"
                                       />
                                     )
                                   ) : (
@@ -962,12 +937,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                                 amountInputValue &&
                                 Number(amountInputValue) > 0 ? (
                                 <Box
-                                  css={{
-                                    width: 45,
-                                    height: 12,
-                                    backgroundColor: 'gray7',
-                                    borderRadius: 'widget-border-radius'
-                                  }}
+                                  className="relay-w-[45px] relay-h-[12px] relay-bg-[var(--relay-colors-gray7)] relay-rounded-[var(--relay-radii-widget-border-radius)]"
                                 />
                               ) : inputAmountUsd &&
                                 inputAmountUsd > 0 &&
@@ -982,16 +952,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                               aria-label="Switch Input Mode"
                               size="none"
                               color="ghost"
-                              css={{
-                                color: 'gray11',
-                                alignSelf: 'center',
-                                justifyContent: 'center',
-                                width: '20px',
-                                height: '20px',
-                                borderRadius: '100px',
-                                padding: '4px',
-                                backgroundColor: 'gray3'
-                              }}
+                              className="relay-text-[color:var(--relay-colors-gray11)] relay-self-center relay-justify-center relay-w-[20px] relay-h-[20px] relay-rounded-[100px] relay-p-[4px] relay-bg-[var(--relay-colors-gray3)]"
                               onClick={toggleInputMode}
                             >
                               <SwitchIcon width={16} height={10} />
@@ -1000,7 +961,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
 
                           <Flex
                             align="center"
-                            css={{ gap: '3', marginLeft: 'auto', height: 23 }}
+                            className="relay-gap-3 relay-ml-auto relay-h-[23px]"
                           >
                             {fromToken ? (
                               <BalanceDisplay
@@ -1018,7 +979,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                                 pending={fromBalancePending}
                               />
                             ) : (
-                              <Flex css={{ height: 18 }} />
+                              <Flex className="relay-h-[18px]" />
                             )}
 
                             {/* Desktop Percentage Buttons - Hidden on Mobile */}
@@ -1026,10 +987,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                             (fromChain?.vmType === 'evm' ||
                               fromChain?.vmType === 'svm') ? (
                               <Box
-                                css={{
-                                  display: 'none',
-                                  sm: { display: 'block' }
-                                }}
+                                className="relay-hidden sm:relay-block"
                               >
                                 <PercentageButtons
                                   balance={fromBalance}
@@ -1050,7 +1008,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                         (fromChain?.vmType === 'evm' ||
                           fromChain?.vmType === 'svm') ? (
                           <Box
-                            css={{ display: 'block', sm: { display: 'none' } }}
+                            className="relay-block sm:relay-hidden"
                           >
                             <PercentageButtons
                               balance={fromBalance}
@@ -1066,13 +1024,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                       </Flex>
                     </TokenSelectorContainer>
                     <Box
-                      css={{
-                        position: 'relative',
-                        my: -13,
-                        mx: 'auto',
-                        height: 32,
-                        width: 32
-                      }}
+                      className="relay-relative relay-my-[-13px] relay-mx-auto relay-h-[32px] relay-w-[32px]"
                     >
                       {hasLockedToken ||
                       ((isSvmSwap || isBvmSwap) &&
@@ -1081,22 +1033,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                           aria-label="Swap Tokens Direction"
                           size="none"
                           color="white"
-                          css={{
-                            mt: '4px',
-                            color: 'gray9',
-                            alignSelf: 'center',
-                            justifyContent: 'center',
-                            width: '100%',
-                            height: '100%',
-                            '--borderWidth':
-                              'borders.widget-swap-currency-button-border-width',
-                            '--borderColor':
-                              'colors.widget-swap-currency-button-border-color',
-                            border: `var(--borderWidth) solid var(--borderColor)`,
-                            zIndex: 10,
-                            borderRadius:
-                              'widget-swap-currency-button-border-radius'
-                          }}
+                          className="relay-mt-[4px] relay-text-[color:var(--relay-colors-gray9)] relay-self-center relay-justify-center relay-w-full relay-h-full relay-z-10 relay-border-[length:var(--relay-borders-widget-swap-currency-button-border-width)] relay-border-solid relay-border-[color:var(--relay-colors-widget-swap-currency-button-border-color)] relay-rounded-swap-btn"
                           onClick={() => {
                             if (fromToken || toToken) {
                               if (isUsdInputMode) {
@@ -1143,14 +1080,11 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                       )}
                     </Box>
                     <TokenSelectorContainer
-                      css={{
-                        backgroundColor: 'widget-background',
-                        mb: 'widget-card-section-gutter'
-                      }}
+                      className="relay-bg-[var(--relay-colors-widget-background)] relay-mb-[var(--relay-spacing-widget-card-section-gutter)]"
                       id={'to-token-section'}
                     >
                       <Flex
-                        css={{ width: '100%' }}
+                        className="relay-w-full"
                         align="center"
                         justify="between"
                       >
@@ -1201,12 +1135,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                             }
                             corners="pill"
                             size="none"
-                            css={{
-                              display: 'flex',
-                              alignItems: 'center',
-                              px: '2',
-                              py: '1'
-                            }}
+                            className="relay-flex relay-items-center relay-px-2 relay-py-1"
                             onClick={() => {
                               setAddressModalOpen(true)
                               onAnalyticEvent?.(
@@ -1217,7 +1146,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                             {isValidToAddress &&
                             multiWalletSupportEnabled &&
                             !isRecipientLinked ? (
-                              <Box css={{ color: 'amber11' }}>
+                              <Box className="relay-text-[color:var(--relay-colors-amber11)]">
                                 <FontAwesomeIcon
                                   icon={faClipboard}
                                   width={16}
@@ -1227,14 +1156,13 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                             ) : null}
                             <Text
                               style="subtitle2"
-                              css={{
-                                color:
-                                  isValidToAddress &&
-                                  multiWalletSupportEnabled &&
-                                  !isRecipientLinked
-                                    ? 'amber11'
-                                    : 'anchor-color'
-                              }}
+                              className={cn(
+                                isValidToAddress &&
+                                multiWalletSupportEnabled &&
+                                !isRecipientLinked
+                                  ? 'relay-text-[color:var(--relay-colors-amber11)]'
+                                  : 'relay-text-[color:var(--relay-colors-anchor-color)]'
+                              )}
                             >
                               {!isValidToAddress
                                 ? `Enter Address`
@@ -1247,7 +1175,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                       <Flex
                         align="center"
                         justify="between"
-                        css={{ gap: '4', width: '100%' }}
+                        className="relay-gap-4 relay-w-full"
                       >
                         <AmountInput
                           prefixSymbol={isUsdInputMode ? '$' : undefined}
@@ -1282,27 +1210,12 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                           onFocus={() => {
                             onAnalyticEvent?.(EventNames.SWAP_OUTPUT_FOCUSED)
                           }}
-                          css={{
-                            fontWeight: '700',
-                            fontSize: 32,
-                            color:
-                              isFetchingQuote && tradeType === 'EXACT_INPUT'
-                                ? 'text-subtle'
-                                : 'input-color',
-                            _placeholder: {
-                              color:
-                                isFetchingQuote && tradeType === 'EXACT_INPUT'
-                                  ? 'text-subtle'
-                                  : 'input-color'
-                            },
-                            _disabled: {
-                              cursor: 'not-allowed',
-                              _placeholder: {
-                                color: 'gray10'
-                              },
-                              color: 'gray10'
-                            }
-                          }}
+                          className={cn(
+                            'relay-font-bold relay-text-[32px] disabled:relay-cursor-not-allowed disabled:relay-text-[color:var(--relay-colors-gray10)] disabled:placeholder:relay-text-[color:var(--relay-colors-gray10)]',
+                            isFetchingQuote && tradeType === 'EXACT_INPUT'
+                              ? 'relay-text-[color:var(--relay-colors-text-subtle)] placeholder:relay-text-[color:var(--relay-colors-text-subtle)]'
+                              : 'relay-text-[color:var(--relay-colors-input-color)] placeholder:relay-text-[color:var(--relay-colors-input-color)]'
+                          )}
                         />
                         <TokenSelector
                           address={recipient}
@@ -1329,7 +1242,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                           context="to"
                           multiWalletSupportEnabled={multiWalletSupportEnabled}
                           trigger={
-                            <div style={{ width: 'max-content' }}>
+                            <div className="relay-w-max">
                               <TokenTrigger
                                 token={toToken}
                                 locked={lockToToken}
@@ -1379,14 +1292,11 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                       <Flex
                         align="center"
                         justify="between"
-                        css={{ gap: '3', width: '100%' }}
+                        className="relay-gap-3 relay-w-full"
                       >
                         <Flex
                           align="center"
-                          css={{
-                            gap: '1',
-                            minHeight: 18
-                          }}
+                          className="relay-gap-1 relay-min-h-[18px]"
                         >
                           <Text style="subtitle3" color="subtleSecondary">
                             {isUsdInputMode ? (
@@ -1399,12 +1309,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                                     `${formatNumber(amountOutputValue, 4, false)} ${toToken.symbol}`
                                   ) : (
                                     <Box
-                                      css={{
-                                        width: 45,
-                                        height: 12,
-                                        backgroundColor: 'gray7',
-                                        borderRadius: 'widget-border-radius'
-                                      }}
+                                      className="relay-w-[45px] relay-h-[12px] relay-bg-[var(--relay-colors-gray7)] relay-rounded-[var(--relay-radii-widget-border-radius)]"
                                     />
                                   )
                                 ) : (
@@ -1423,12 +1328,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                               amountOutputValue &&
                               Number(amountOutputValue) > 0 ? (
                               <Box
-                                css={{
-                                  width: 45,
-                                  height: 12,
-                                  backgroundColor: 'gray7',
-                                  borderRadius: 'widget-border-radius'
-                                }}
+                                className="relay-w-[45px] relay-h-[12px] relay-bg-[var(--relay-colors-gray7)] relay-rounded-[var(--relay-radii-widget-border-radius)]"
                               />
                             ) : toToken &&
                               outputAmountUsd &&
@@ -1447,7 +1347,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                             quote={quote}
                           />
                         </Flex>
-                        <Flex css={{ marginLeft: 'auto' }}>
+                        <Flex className="relay-ml-auto">
                           {toToken ? (
                             <BalanceDisplay
                               isLoading={isLoadingToBalance}
@@ -1463,7 +1363,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                               pending={toBalancePending}
                             />
                           ) : (
-                            <Flex css={{ height: 18 }} />
+                            <Flex className="relay-h-[18px]" />
                           )}
                         </Flex>
                       </Flex>
@@ -1494,9 +1394,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                       isCapacityExceededError={isCapacityExceededError}
                       isCouldNotExecuteError={isCouldNotExecuteError}
                       relayerFeeProportion={relayerFeeProportion}
-                      containerCss={{
-                        mb: 'widget-card-section-gutter'
-                      }}
+                      containerClassName="relay-mb-[var(--relay-spacing-widget-card-section-gutter)]"
                       recipientWalletSupportsChain={
                         recipientWalletSupportsChain
                       }
diff --git a/packages/ui/src/components/widgets/TokenSelectorContainer.tsx b/packages/ui/src/components/widgets/TokenSelectorContainer.tsx
index f096d242f..dea1b740f 100644
--- a/packages/ui/src/components/widgets/TokenSelectorContainer.tsx
+++ b/packages/ui/src/components/widgets/TokenSelectorContainer.tsx
@@ -1,27 +1,19 @@
 import { type FC, type PropsWithChildren } from 'react'
 import { Flex } from '../primitives/index.js'
-import { type Styles } from '@relayprotocol/relay-design-system/css'
+import { cn } from '../../utils/cn.js'
 
 const TokenSelectorContainer: FC<
-  PropsWithChildren & { css?: Styles; id?: string }
-> = ({ children, css, id }) => {
+  PropsWithChildren & { className?: string; id?: string }
+> = ({ children, className, id }) => {
   return (
     <Flex
       align="center"
       justify="between"
       id={id}
-      css={{
-        width: '100%',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'start',
-        backgroundColor: 'widget-card-background',
-        border: 'widget-card-border',
-        gap: '3',
-        p: '12px 12px',
-        borderRadius: 'widget-card-border-radius',
-        ...css
-      }}
+      className={cn(
+        'relay-w-full relay-flex relay-flex-col relay-items-start relay-bg-[var(--relay-colors-widget-card-background)] relay-border-widget-card relay-gap-3 relay-p-3 relay-rounded-[var(--relay-radii-widget-card-border-radius)]',
+        className
+      )}
     >
       {children}
     </Flex>
diff --git a/packages/ui/src/components/widgets/TokenWidget/AmountModeToggle.tsx b/packages/ui/src/components/widgets/TokenWidget/AmountModeToggle.tsx
index 831f46cce..0a079c148 100644
--- a/packages/ui/src/components/widgets/TokenWidget/AmountModeToggle.tsx
+++ b/packages/ui/src/components/widgets/TokenWidget/AmountModeToggle.tsx
@@ -26,10 +26,7 @@ const AmountModeToggle: FC<AmountModeToggleProps> = ({
   return (
     <Flex
       align="center"
-      css={{
-        gap: '8px',
-        _hover: { cursor: 'pointer' }
-      }}
+      className="relay-gap-[8px] hover:relay-cursor-pointer"
       onClick={() => {
         onToggle()
       }}
@@ -39,16 +36,7 @@ const AmountModeToggle: FC<AmountModeToggleProps> = ({
         aria-label={buttonAriaLabel}
         size="none"
         color="ghost"
-        css={{
-          color: 'gray11',
-          alignSelf: 'center',
-          justifyContent: 'center',
-          width: '20px',
-          height: '20px',
-          borderRadius: '100px',
-          padding: '4px',
-          backgroundColor: 'gray3'
-        }}
+        className="relay-text-[color:var(--relay-colors-gray11)] relay-self-center relay-justify-center relay-w-[20px] relay-h-[20px] relay-rounded-[100px] relay-p-[4px] relay-bg-[var(--relay-colors-gray3)]"
         onClick={() => {
           onToggle()
         }}
diff --git a/packages/ui/src/components/widgets/TokenWidget/AmountSectionHeader.tsx b/packages/ui/src/components/widgets/TokenWidget/AmountSectionHeader.tsx
index 79e25d745..2e9198c83 100644
--- a/packages/ui/src/components/widgets/TokenWidget/AmountSectionHeader.tsx
+++ b/packages/ui/src/components/widgets/TokenWidget/AmountSectionHeader.tsx
@@ -17,7 +17,7 @@ const AmountSectionHeader: FC<AmountSectionHeaderProps> = ({
   onAnalyticEvent,
   onOpenSlippageConfig
 }) => (
-  <Flex align="center" justify="between" css={{ gap: '2', width: '100%' }}>
+  <Flex align="center" justify="between" className="relay-gap-2 relay-w-full">
     <Text style="subtitle2">{label}</Text>
     <SlippageToleranceConfig
       label="Slippage"
diff --git a/packages/ui/src/components/widgets/TokenWidget/BuyTabContent.tsx b/packages/ui/src/components/widgets/TokenWidget/BuyTabContent.tsx
index 9e96c67e4..b1599c5ac 100644
--- a/packages/ui/src/components/widgets/TokenWidget/BuyTabContent.tsx
+++ b/packages/ui/src/components/widgets/TokenWidget/BuyTabContent.tsx
@@ -1,6 +1,7 @@
 import { TabsContent } from '../../primitives/Tabs.js'
 import { Flex, Text } from '../../primitives/index.js'
 import AmountInput from '../../common/AmountInput.js'
+import { cn } from '../../../utils/cn.js'
 import {
   formatFixedLength,
   formatNumber,
@@ -8,7 +9,6 @@ import {
 } from '../../../utils/numbers.js'
 import { PriceImpact } from '../SwapWidget/PriceImpact.js'
 import { BalanceDisplay } from '../../common/BalanceDisplay.js'
-import { Divider } from '@relayprotocol/relay-design-system/jsx'
 import { MultiWalletDropdown } from '../../common/MultiWalletDropdown.js'
 import PaymentMethod from '../../common/TokenSelector/PaymentMethod.js'
 import { EventNames } from '../../../constants/events.js'
@@ -273,10 +273,7 @@ const BuyTabContent: FC<BuyTabContentProps> = ({
   return (
     <TabsContent value="buy">
       <SectionContainer
-        css={{
-          border: { base: 'none', md: '1px solid' },
-          borderColor: { base: 'transparent', md: 'slate.4' }
-        }}
+        className="relay-border-none md:relay-border md:relay-border-solid md:relay-border-[var(--relay-colors-slate4)]"
         id={'buy-token-section'}
         isPaymentMethodOpen={isPaymentMethodOpen}
         paymentMethodMinHeight={paymentMethodMinHeight}
@@ -288,7 +285,7 @@ const BuyTabContent: FC<BuyTabContentProps> = ({
           onSlippageToleranceChange={onSlippageToleranceChange}
           onAnalyticEvent={onAnalyticEvent}
         />
-        <Flex align="center" justify="between" css={{ width: '100%' }}>
+        <Flex align="center" justify="between" className="relay-w-full">
           <AmountInput
             prefixSymbol={isUsdInputMode ? '$' : undefined}
             value={
@@ -322,42 +319,23 @@ const BuyTabContent: FC<BuyTabContentProps> = ({
             onClick={() => {
               onAnalyticEvent?.(EventNames.SWAP_OUTPUT_FOCUSED)
             }}
-            css={{
-              fontWeight: '700',
-              fontSize: 32,
-              lineHeight: '32px',
-              py: 0,
-              color:
-                isFetchingQuote && tradeType === 'EXACT_INPUT'
-                  ? 'text-subtle'
-                  : 'input-color',
-              _placeholder: {
-                color:
-                  isFetchingQuote && tradeType === 'EXACT_INPUT'
-                    ? 'text-subtle'
-                    : 'input-color'
-              },
-              _disabled: {
-                cursor: 'not-allowed',
-                _placeholder: {
-                  color: 'gray10'
-                },
-                color: 'gray10'
-              }
-            }}
+            className={cn(
+              'relay-font-bold relay-text-[32px] relay-leading-[32px] relay-py-0',
+              'disabled:relay-cursor-not-allowed disabled:relay-text-[color:var(--relay-colors-gray10)] disabled:placeholder:relay-text-[color:var(--relay-colors-gray10)]',
+              isFetchingQuote && tradeType === 'EXACT_INPUT'
+                ? 'relay-text-[color:var(--relay-colors-text-subtle)] placeholder:relay-text-[color:var(--relay-colors-text-subtle)]'
+                : 'relay-text-[color:var(--relay-colors-input-color)] placeholder:relay-text-[color:var(--relay-colors-input-color)]'
+            )}
           />
         </Flex>
         <Flex
           align="center"
           justify="between"
-          css={{ gap: '3', width: '100%' }}
+          className="relay-gap-3 relay-w-full"
         >
           <Flex
             align="center"
-            css={{
-              gap: '3',
-              minHeight: 18
-            }}
+            className="relay-gap-3 relay-min-h-[18px]"
           >
             <AmountModeToggle onToggle={toggleInputMode}>
               {isUsdInputMode
@@ -392,7 +370,7 @@ const BuyTabContent: FC<BuyTabContentProps> = ({
               quote={quote}
             />
           </Flex>
-          <Flex css={{ marginLeft: 'auto' }}>
+          <Flex className="relay-ml-auto">
             {toToken ? (
               <BalanceDisplay
                 hideBalanceLabel={false}
@@ -410,14 +388,14 @@ const BuyTabContent: FC<BuyTabContentProps> = ({
                 size="sm"
               />
             ) : (
-              <Flex css={{ height: 18 }} />
+              <Flex style={{ height: 18 }} />
             )}
           </Flex>
         </Flex>
 
-        <Divider color="gray4" />
+        <hr className="relay-w-full relay-border-[var(--relay-colors-gray4)] relay-border-t relay-border-solid relay-border-b-0 relay-border-x-0" />
 
-        <Flex align="center" css={{ width: '100%', gap: '2' }}>
+        <Flex align="center" className="relay-w-full relay-gap-2">
           <Text style="subtitle2" color="subtle">
             Pay with
           </Text>
@@ -459,7 +437,7 @@ const BuyTabContent: FC<BuyTabContentProps> = ({
           ) : null}
         </Flex>
 
-        <Flex align="center" css={{ width: '100%', gap: '32px' }}>
+        <Flex align="center" className="relay-w-full relay-gap-8">
           <PaymentMethod
             address={address}
             isValidAddress={isValidFromAddress}
@@ -492,7 +470,7 @@ const BuyTabContent: FC<BuyTabContentProps> = ({
               </div>
             }
           />
-          <Flex css={{ marginLeft: 'auto' }}>
+          <Flex className="relay-ml-auto">
             <FeeBreakdownInfo
               isLoading={Boolean(isLoadingPayWith)}
               amountUsd={currencyInAmountUsd}
@@ -505,9 +483,9 @@ const BuyTabContent: FC<BuyTabContentProps> = ({
           </Flex>
         </Flex>
 
-        <Divider color="gray4" />
+        <hr className="relay-w-full relay-border-[var(--relay-colors-gray4)] relay-border-t relay-border-solid relay-border-b-0 relay-border-x-0" />
 
-        <Flex direction="column" css={{ gap: '2', width: '100%' }}>
+        <Flex direction="column" className="relay-gap-2 relay-w-full">
           <DestinationWalletSelector
             label="Send to"
             isMultiWalletEnabled={multiWalletSupportEnabled}
@@ -575,11 +553,11 @@ const BuyTabContent: FC<BuyTabContentProps> = ({
             toChainWalletVMSupported={toChainWalletVMSupported}
             recipientLinkedWallet={recipientLinkedWallet}
             toChainVmType={toChainVmType}
-            containerCss={{ width: '100%', marginBottom: 0 }}
+            containerClassName="relay-w-full relay-mb-0"
           />
         </Flex>
 
-        <Flex css={{ width: '100%' }}>
+        <Flex className="relay-w-full">
           <SwapButton
             context="Buy"
             transactionModalOpen={transactionModalOpen}
@@ -613,7 +591,7 @@ const BuyTabContent: FC<BuyTabContentProps> = ({
           />
         </Flex>
 
-        <Flex css={{ width: '100%', marginTop: '-8px' }}>
+        <Flex className="relay-w-full" style={{ marginTop: '-8px' }}>
           <TransactionDetailsFooter
             timeEstimate={timeEstimate}
             feeBreakdown={feeBreakdown}
diff --git a/packages/ui/src/components/widgets/TokenWidget/DestinationWalletSelector.tsx b/packages/ui/src/components/widgets/TokenWidget/DestinationWalletSelector.tsx
index 5baa655fb..38bb954ca 100644
--- a/packages/ui/src/components/widgets/TokenWidget/DestinationWalletSelector.tsx
+++ b/packages/ui/src/components/widgets/TokenWidget/DestinationWalletSelector.tsx
@@ -28,7 +28,7 @@ export const DestinationWalletSelector: FC<DestinationWalletSelectorProps> = ({
   fallback
 }) => {
   return (
-    <Flex align="center" css={{ width: '100%', gap: '2' }}>
+    <Flex align="center" className="relay-w-full relay-gap-2">
       <Text style="subtitle2" color="subtle">
         {label}
       </Text>
@@ -39,24 +39,17 @@ export const DestinationWalletSelector: FC<DestinationWalletSelectorProps> = ({
           color={fallback.highlighted ? 'warning' : 'secondary'}
           corners="pill"
           size="none"
-          css={{
-            display: 'flex',
-            alignItems: 'center',
-            px: '2',
-            py: '1'
-          }}
+          className="relay-flex relay-items-center relay-px-2 relay-py-1"
           onClick={fallback.onClick}
         >
           {fallback.showClipboard ? (
-            <Box css={{ color: 'amber11' }}>
+            <Box className="relay-text-[color:var(--relay-colors-amber11)]">
               <FontAwesomeIcon icon={faClipboard} width={16} height={16} />
             </Box>
           ) : null}
           <Text
             style="subtitle2"
-            css={{
-              color: fallback.highlighted ? 'amber11' : 'anchor-color'
-            }}
+            className={fallback.highlighted ? 'relay-text-[color:var(--relay-colors-amber11)]' : 'relay-text-[color:var(--relay-colors-anchor-color)]'}
           >
             {fallback.text}
           </Text>
diff --git a/packages/ui/src/components/widgets/TokenWidget/FeeBreakdownInfo.tsx b/packages/ui/src/components/widgets/TokenWidget/FeeBreakdownInfo.tsx
index df87c81da..d0f20b1e8 100644
--- a/packages/ui/src/components/widgets/TokenWidget/FeeBreakdownInfo.tsx
+++ b/packages/ui/src/components/widgets/TokenWidget/FeeBreakdownInfo.tsx
@@ -33,25 +33,16 @@ export const FeeBreakdownInfo: FC<FeeBreakdownInfoProps> = ({
       direction="column"
       align="end"
       justify={!token ? 'center' : 'start'}
-      css={{
-        gap: '1',
-        minHeight: 42
-      }}
+      className="relay-gap-1 relay-min-h-[42px]"
     >
-      <Flex align="center" css={{ gap: '1', minWidth: 0 }}>
+      <Flex align="center" className="relay-gap-1 relay-min-w-0">
         {isLoading ? (
-          <Skeleton css={{ width: 90, height: 20 }} />
+          <Skeleton className="relay-w-[90px] relay-h-[20px]" />
         ) : amountUsd && Number(amountUsd) > 0 ? (
           <>
             <Text
               style="h6"
-              css={{
-                textAlign: 'right',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-                minWidth: 0
-              }}
+              className="relay-text-right relay-overflow-hidden relay-text-ellipsis relay-whitespace-nowrap relay-min-w-0"
             >
               {formatDollarCompact(Number(amountUsd))} total
             </Text>
@@ -61,17 +52,7 @@ export const FeeBreakdownInfo: FC<FeeBreakdownInfoProps> = ({
               fromToken={token}
               tooltipProps={{ side: 'top', align: 'end' }}
             >
-              <Box
-                css={{
-                  color: 'gray8',
-                  width: 16,
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  cursor: 'pointer',
-                  flexShrink: 0
-                }}
-              >
+              <Box className="relay-text-[color:var(--relay-colors-gray8)] relay-w-[16px] relay-flex relay-items-center relay-justify-center relay-cursor-pointer relay-shrink-0">
                 <FontAwesomeIcon icon={faInfoCircle} />
               </Box>
             </FeeBreakdownTooltip>
@@ -79,46 +60,27 @@ export const FeeBreakdownInfo: FC<FeeBreakdownInfoProps> = ({
         ) : token ? (
           <Text
             style="h6"
-            css={{
-              textAlign: 'right',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap',
-              lineHeight: 'normal',
-              minWidth: 0
-            }}
+            className="relay-text-right relay-overflow-hidden relay-text-ellipsis relay-whitespace-nowrap relay-leading-normal relay-min-w-0"
           >
             $0 total
           </Text>
         ) : (
           <Text
             style="h6"
-            css={{
-              textAlign: 'right',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap',
-              minWidth: 0
-            }}
+            className="relay-text-right relay-overflow-hidden relay-text-ellipsis relay-whitespace-nowrap relay-min-w-0"
           >
             - total
           </Text>
         )}
       </Flex>
       {isLoading ? (
-        <Skeleton css={{ width: 70, height: 14 }} />
+        <Skeleton className="relay-w-[70px] relay-h-[14px]" />
       ) : amountUsd && Number(amountUsd) > 0 ? (
         token && tokenAmountFormatted && Number(tokenAmountFormatted) > 0 ? (
           <Text
             style="subtitle3"
             color="subtleSecondary"
-            css={{
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap',
-              minWidth: 0,
-              maxWidth: '100%'
-            }}
+            className="relay-overflow-hidden relay-text-ellipsis relay-whitespace-nowrap relay-min-w-0 relay-max-w-full"
           >
             {formatNumber(tokenAmountFormatted, 4, true)} {token.symbol}
           </Text>
@@ -126,13 +88,7 @@ export const FeeBreakdownInfo: FC<FeeBreakdownInfoProps> = ({
           <Text
             style="subtitle3"
             color="subtleSecondary"
-            css={{
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap',
-              minWidth: 0,
-              maxWidth: '100%'
-            }}
+            className="relay-overflow-hidden relay-text-ellipsis relay-whitespace-nowrap relay-min-w-0 relay-max-w-full"
           >
             {formatNumber(fallbackTokenAmount, 4, true)} {token.symbol}
           </Text>
@@ -141,13 +97,7 @@ export const FeeBreakdownInfo: FC<FeeBreakdownInfoProps> = ({
         <Text
           style="subtitle3"
           color="subtleSecondary"
-          css={{
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-            minWidth: 0,
-            maxWidth: '100%'
-          }}
+          className="relay-overflow-hidden relay-text-ellipsis relay-whitespace-nowrap relay-min-w-0 relay-max-w-full"
         >
           0.00 {token.symbol}
         </Text>
diff --git a/packages/ui/src/components/widgets/TokenWidget/FeeBreakdownTooltip.tsx b/packages/ui/src/components/widgets/TokenWidget/FeeBreakdownTooltip.tsx
index 9c9d1a655..822197b72 100644
--- a/packages/ui/src/components/widgets/TokenWidget/FeeBreakdownTooltip.tsx
+++ b/packages/ui/src/components/widgets/TokenWidget/FeeBreakdownTooltip.tsx
@@ -80,11 +80,11 @@ export const FeeBreakdownTooltip: FC<FeeBreakdownTooltipProps> = ({
   return (
     <Tooltip
       content={
-        <Flex css={{ minWidth: 240 }} direction="column">
+        <Flex className="relay-min-w-[240px]" direction="column">
           {/* Token Amount Row */}
           {fromToken && currencyInAmount && tokenAmountFormatted !== '-' && (
-            <Flex align="center" css={{ width: '100%', mb: '2' }}>
-              <Text style="subtitle2" color="subtle" css={{ mr: 'auto' }}>
+            <Flex align="center" className="relay-w-full relay-mb-2">
+              <Text style="subtitle2" color="subtle" className="relay-mr-auto">
                 {currencyInAmountFormatted && currencyInAmountFormatted !== '-'
                   ? `${formatNumber(currencyInAmountFormatted, 4, true)} ${fromToken.symbol}`
                   : fromToken.symbol}
@@ -95,8 +95,8 @@ export const FeeBreakdownTooltip: FC<FeeBreakdownTooltipProps> = ({
 
           {/* Relay Fee Row */}
           {relayFeeUsd !== undefined && relayFeeFormatted !== '-' && (
-            <Flex align="center" css={{ width: '100%', mb: '2' }}>
-              <Text style="subtitle2" color="subtle" css={{ mr: 'auto' }}>
+            <Flex align="center" className="relay-w-full relay-mb-2">
+              <Text style="subtitle2" color="subtle" className="relay-mr-auto">
                 {relayFee?.name ?? 'Relay Fee'}
               </Text>
               {feeBreakdown?.isGasSponsored && relayFeeUsd === 0 ? (
@@ -111,8 +111,8 @@ export const FeeBreakdownTooltip: FC<FeeBreakdownTooltipProps> = ({
 
           {/* Swap Impact Row */}
           {swapImpactUsd !== undefined && swapImpactFormatted !== '-' && (
-            <Flex align="center" css={{ width: '100%', mb: '2' }}>
-              <Text style="subtitle2" color="subtle" css={{ mr: 'auto' }}>
+            <Flex align="center" className="relay-w-full relay-mb-2">
+              <Text style="subtitle2" color="subtle" className="relay-mr-auto">
                 Swap Impact
               </Text>
               <Text style="subtitle2">{swapImpactFormatted}</Text>
@@ -121,8 +121,8 @@ export const FeeBreakdownTooltip: FC<FeeBreakdownTooltipProps> = ({
 
           {/* Execution Fee Row */}
           {executionFeeUsd !== undefined && executionFeeFormatted !== '-' && (
-            <Flex align="center" css={{ width: '100%', mb: '2' }}>
-              <Text style="subtitle2" color="subtle" css={{ mr: 'auto' }}>
+            <Flex align="center" className="relay-w-full relay-mb-2">
+              <Text style="subtitle2" color="subtle" className="relay-mr-auto">
                 {executionFeeLabel}
               </Text>
               {feeBreakdown?.isGasSponsored && executionFeeUsd === 0 ? (
@@ -137,8 +137,8 @@ export const FeeBreakdownTooltip: FC<FeeBreakdownTooltipProps> = ({
 
           {/* App Fee Row */}
           {appFee && appFeeUsd !== undefined && appFeeFormatted !== '-' && (
-            <Flex align="center" css={{ width: '100%' }}>
-              <Text style="subtitle2" color="subtle" css={{ mr: 'auto' }}>
+            <Flex align="center" className="relay-w-full">
+              <Text style="subtitle2" color="subtle" className="relay-mr-auto">
                 {appFee.name}
               </Text>
               {feeBreakdown?.isGasSponsored && appFeeUsd === 0 ? (
diff --git a/packages/ui/src/components/widgets/TokenWidget/SectionContainer.tsx b/packages/ui/src/components/widgets/TokenWidget/SectionContainer.tsx
index 2ea52f447..4c6995b8d 100644
--- a/packages/ui/src/components/widgets/TokenWidget/SectionContainer.tsx
+++ b/packages/ui/src/components/widgets/TokenWidget/SectionContainer.tsx
@@ -1,9 +1,9 @@
 import { type FC, type PropsWithChildren } from 'react'
 import { Flex } from '../../primitives/index.js'
-import { type Styles } from '@relayprotocol/relay-design-system/css'
+import { cn } from '../../../utils/cn.js'
 
 type SectionContainerProps = PropsWithChildren & {
-  css?: Styles
+  className?: string
   id?: string
   isPaymentMethodOpen?: boolean
   paymentMethodMinHeight?: string
@@ -11,7 +11,7 @@ type SectionContainerProps = PropsWithChildren & {
 
 const SectionContainer: FC<SectionContainerProps> = ({
   children,
-  css,
+  className,
   id,
   isPaymentMethodOpen = false,
   paymentMethodMinHeight = '85vh'
@@ -21,22 +21,17 @@ const SectionContainer: FC<SectionContainerProps> = ({
       align="center"
       justify="between"
       id={id}
-      css={{
-        width: '100%',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'start',
-        backgroundColor: { base: 'transparent', md: 'widget-card-background' },
-        border: 'widget-card-border',
-        gap: '4',
-        paddingY: { base: '12px', md: '16px' },
-        paddingX: { base: '0', md: '16px' },
-        borderRadius: { base: '0', md: 'widget-card-border-radius' },
-        minHeight: {
-          base: isPaymentMethodOpen ? paymentMethodMinHeight : 'auto',
-          md: 'auto'
-        },
-        ...css
+      className={cn(
+        'relay-w-full relay-flex relay-flex-col relay-items-start relay-border-widget-card relay-gap-4',
+        'relay-bg-transparent md:relay-bg-[var(--relay-colors-widget-card-background)]',
+        'relay-py-3 md:relay-py-4',
+        'relay-px-0 md:relay-px-4',
+        'relay-rounded-none md:relay-rounded-[var(--relay-radii-widget-card-border-radius)]',
+        'md:relay-min-h-[auto]',
+        className
+      )}
+      style={{
+        minHeight: isPaymentMethodOpen ? paymentMethodMinHeight : 'auto'
       }}
     >
       {children}
diff --git a/packages/ui/src/components/widgets/TokenWidget/SellTabContent.tsx b/packages/ui/src/components/widgets/TokenWidget/SellTabContent.tsx
index 82a8de113..7aa5198e8 100644
--- a/packages/ui/src/components/widgets/TokenWidget/SellTabContent.tsx
+++ b/packages/ui/src/components/widgets/TokenWidget/SellTabContent.tsx
@@ -1,13 +1,13 @@
 import { TabsContent } from '../../primitives/Tabs.js'
 import { Flex, Box } from '../../primitives/index.js'
 import AmountInput from '../../common/AmountInput.js'
+import { cn } from '../../../utils/cn.js'
 import {
   formatFixedLength,
   formatNumber,
   formatDollar
 } from '../../../utils/numbers.js'
 import { EventNames } from '../../../constants/events.js'
-import { Divider } from '@relayprotocol/relay-design-system/jsx'
 import { MultiWalletDropdown } from '../../common/MultiWalletDropdown.js'
 import PaymentMethod from '../../common/TokenSelector/PaymentMethod.js'
 import { PaymentMethodTrigger } from '../../common/TokenSelector/triggers/PaymentMethodTrigger.js'
@@ -335,10 +335,7 @@ const SellTabContent: FC<SellTabContentProps> = ({
   return (
     <TabsContent value="sell">
       <SectionContainer
-        css={{
-          border: { base: 'none', md: '1px solid' },
-          borderColor: { base: 'transparent', md: 'slate.4' }
-        }}
+        className="relay-border-none md:relay-border md:relay-border-solid md:relay-border-[var(--relay-colors-slate4)]"
         id={'sell-token-section'}
         isPaymentMethodOpen={isPaymentMethodOpen}
         paymentMethodMinHeight={paymentMethodMinHeight}
@@ -350,7 +347,7 @@ const SellTabContent: FC<SellTabContentProps> = ({
           onSlippageToleranceChange={onSlippageToleranceChange}
           onAnalyticEvent={onAnalyticEvent}
         />
-        <Flex align="center" justify="between" css={{ width: '100%' }}>
+        <Flex align="center" justify="between" className="relay-w-full">
           <AmountInput
             prefixSymbol={isUsdInputMode ? '$' : undefined}
             value={
@@ -384,38 +381,25 @@ const SellTabContent: FC<SellTabContentProps> = ({
             onClick={() => {
               onAnalyticEvent?.(EventNames.SWAP_INPUT_FOCUSED)
             }}
-            css={{
-              fontWeight: '700',
-              fontSize: 32,
-              lineHeight: '32px',
-              py: 0,
-              color:
-                isFetchingQuote && tradeType === 'EXPECTED_OUTPUT'
-                  ? 'text-subtle'
-                  : 'input-color',
-              _placeholder: {
-                color:
-                  isFetchingQuote && tradeType === 'EXPECTED_OUTPUT'
-                    ? 'text-subtle'
-                    : 'input-color'
-              }
-            }}
+            className={cn(
+              'relay-font-bold relay-text-[32px] relay-leading-[32px] relay-py-0',
+              isFetchingQuote && tradeType === 'EXPECTED_OUTPUT'
+                ? 'relay-text-[color:var(--relay-colors-text-subtle)] placeholder:relay-text-[color:var(--relay-colors-text-subtle)]'
+                : 'relay-text-[color:var(--relay-colors-input-color)] placeholder:relay-text-[color:var(--relay-colors-input-color)]'
+            )}
           />
         </Flex>
-        <Flex direction="column" css={{ gap: '3', width: '100%' }}>
+        <Flex direction="column" className="relay-gap-3 relay-w-full">
           <Flex
             align="center"
             justify="between"
-            css={{ gap: '3', width: '100%' }}
+            className="relay-gap-3 relay-w-full"
           >
             <AmountModeToggle
               onToggle={toggleInputMode}
               textProps={{
-                css: {
-                  minHeight: 18,
-                  display: 'flex',
-                  alignItems: 'center'
-                }
+                className:
+                  'relay-min-h-[18px] relay-flex relay-items-center'
               }}
             >
               {isUsdInputMode
@@ -443,7 +427,7 @@ const SellTabContent: FC<SellTabContentProps> = ({
             </AmountModeToggle>
           </Flex>
 
-          <Flex align="center" css={{ width: '100%', gap: '3' }}>
+          <Flex align="center" className="relay-w-full relay-gap-3">
             {multiWalletSupportEnabled === true ? (
               <MultiWalletDropdown
                 context="origin"
@@ -483,11 +467,7 @@ const SellTabContent: FC<SellTabContentProps> = ({
 
             <Flex
               align="center"
-              css={{
-                gap: '8px',
-                marginLeft: 'auto',
-                flexShrink: 0
-              }}
+              className="relay-gap-2 relay-ml-auto relay-shrink-0"
             >
               {(() => {
                 const displayToken = fromToken || toToken
@@ -525,17 +505,12 @@ const SellTabContent: FC<SellTabContentProps> = ({
                     size="sm"
                   />
                 ) : (
-                  <Flex css={{ height: 18 }} />
+                  <Flex style={{ height: 18 }} />
                 )
               })()}
               {/* Desktop Percentage Buttons - Hidden on Mobile */}
               {fromBalance && fromBalance > 0n && onMaxAmountClicked ? (
-                <Box
-                  css={{
-                    display: 'none',
-                    sm: { display: 'block' }
-                  }}
-                >
+                <Box className="relay-hidden sm:relay-block">
                   <PercentageButtons
                     balance={fromBalance}
                     onPercentageClick={onMaxAmountClicked}
@@ -553,7 +528,7 @@ const SellTabContent: FC<SellTabContentProps> = ({
 
           {/* Mobile Percentage Buttons - Hidden on Desktop */}
           {fromBalance && fromBalance > 0n && onMaxAmountClicked ? (
-            <Box css={{ display: 'block', sm: { display: 'none' } }}>
+            <Box className="relay-block sm:relay-hidden">
               <PercentageButtons
                 balance={fromBalance}
                 onPercentageClick={onMaxAmountClicked}
@@ -568,7 +543,7 @@ const SellTabContent: FC<SellTabContentProps> = ({
           ) : null}
         </Flex>
 
-        <Divider color="gray4" />
+        <hr className="relay-w-full relay-border-[var(--relay-colors-gray4)] relay-border-t relay-border-solid relay-border-b-0 relay-border-x-0" />
 
         <DestinationWalletSelector
           label="Sell to"
@@ -627,8 +602,8 @@ const SellTabContent: FC<SellTabContentProps> = ({
           }}
         />
 
-        <Flex direction="column" css={{ gap: '2', width: '100%' }}>
-          <Flex align="center" css={{ width: '100%', gap: '32px' }}>
+        <Flex direction="column" className="relay-gap-2 relay-w-full">
+          <Flex align="center" className="relay-w-full relay-gap-8">
             <PaymentMethod
               address={recipient}
               isValidAddress={isValidToAddress}
@@ -663,7 +638,7 @@ const SellTabContent: FC<SellTabContentProps> = ({
                 </div>
               }
             />
-            <Flex css={{ marginLeft: 'auto' }}>
+            <Flex className="relay-ml-auto">
               <FeeBreakdownInfo
                 isLoading={Boolean(isLoadingOutput)}
                 amountUsd={currencyOutAmountUsd}
@@ -689,11 +664,11 @@ const SellTabContent: FC<SellTabContentProps> = ({
             toChainWalletVMSupported={toChainWalletVMSupported}
             recipientLinkedWallet={recipientLinkedWallet}
             toChainVmType={toChainVmType}
-            containerCss={{ width: '100%', marginBottom: 0 }}
+            containerClassName="relay-w-full relay-mb-0"
           />
         </Flex>
 
-        <Flex css={{ width: '100%' }}>
+        <Flex className="relay-w-full">
           <SwapButton
             context="Sell"
             transactionModalOpen={transactionModalOpen}
@@ -727,7 +702,7 @@ const SellTabContent: FC<SellTabContentProps> = ({
           />
         </Flex>
 
-        <Flex css={{ width: '100%', marginTop: '-8px' }}>
+        <Flex className="relay-w-full" style={{ marginTop: '-8px' }}>
           <TransactionDetailsFooter
             timeEstimate={timeEstimate}
             feeBreakdown={feeBreakdown}
diff --git a/packages/ui/src/components/widgets/TokenWidget/TransactionDetailsFooter.tsx b/packages/ui/src/components/widgets/TokenWidget/TransactionDetailsFooter.tsx
index 053f32b8b..0c45583e0 100644
--- a/packages/ui/src/components/widgets/TokenWidget/TransactionDetailsFooter.tsx
+++ b/packages/ui/src/components/widgets/TokenWidget/TransactionDetailsFooter.tsx
@@ -45,23 +45,16 @@ const TransactionDetailsFooter: FC<TransactionDetailsFooterProps> = ({
   const showDivider = timeEstimate && timeEstimate.time !== 0 && hasNetworkCost
 
   return (
-    <Flex justify="center" align="center" css={{ gap: '6px', width: '100%' }}>
+    <Flex justify="center" align="center" className="relay-gap-[6px] relay-w-full">
       {timeEstimate && timeEstimate.time !== 0 ? (
         <>
-          <Flex align="center" css={{ gap: '2' }}>
+          <Flex align="center" className="relay-gap-2">
             <Box
-              css={{
-                color: clockColor,
-                width: 14,
-                height: 14,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center'
-              }}
+              className={`relay-w-[14px] relay-h-[14px] relay-flex relay-items-center relay-justify-center relay-text-[color:var(--relay-colors-${clockColor})]`}
             >
               <FontAwesomeIcon icon={faClock} />
             </Box>
-            <Text style="subtitle3" css={{ lineHeight: 'normal' }}>
+            <Text style="subtitle3" className="relay-leading-normal">
               {timeLabel}
             </Text>
           </Flex>
@@ -69,7 +62,7 @@ const TransactionDetailsFooter: FC<TransactionDetailsFooterProps> = ({
             <Flex
               justify="center"
               align="center"
-              css={{ color: 'gray6', height: 4 }}
+              className="relay-text-[color:var(--relay-colors-gray6)] relay-h-[4px]"
             >
               &#8226;
             </Flex>
@@ -77,20 +70,11 @@ const TransactionDetailsFooter: FC<TransactionDetailsFooterProps> = ({
         </>
       ) : null}
       {hasNetworkCost ? (
-        <Flex align="center" css={{ gap: '2' }}>
-          <Box
-            css={{
-              color: 'gray9',
-              width: 14,
-              height: 14,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center'
-            }}
-          >
+        <Flex align="center" className="relay-gap-2">
+          <Box className="relay-text-[color:var(--relay-colors-gray9)] relay-w-[14px] relay-h-[14px] relay-flex relay-items-center relay-justify-center">
             <FontAwesomeIcon icon={faGasPump} />
           </Box>
-          <Text style="subtitle3" css={{ lineHeight: 'normal' }}>
+          <Text style="subtitle3" className="relay-leading-normal">
             {networkCostLabel}
           </Text>
         </Flex>
diff --git a/packages/ui/src/components/widgets/TokenWidget/widget/index.tsx b/packages/ui/src/components/widgets/TokenWidget/widget/index.tsx
index 9c14b5f8c..253845230 100644
--- a/packages/ui/src/components/widgets/TokenWidget/widget/index.tsx
+++ b/packages/ui/src/components/widgets/TokenWidget/widget/index.tsx
@@ -1222,7 +1222,7 @@ const TokenWidget: FC<TokenWidgetProps> = ({
                 return (
                   <Flex
                     direction="column"
-                    css={{ gap: '3', width: '100%', position: 'relative' }}
+                    className="relay-gap-3 relay-w-full relay-relative"
                   >
                     <TabsRoot
                       value={activeTab}
@@ -1237,88 +1237,24 @@ const TokenWidget: FC<TokenWidgetProps> = ({
                     >
                       <Flex
                         direction="column"
-                        css={{
-                          width: '100%',
-                          overflow: 'hidden',
-                          border: 'widget-border',
-                          minWidth: { base: 320, md: 400 },
-                          maxWidth: 408
-                        }}
+                        className="relay-w-full relay-overflow-hidden relay-border-[var(--relay-borders-widget-border)] relay-min-w-[320px] md:relay-min-w-[400px] relay-max-w-[408px]"
                       >
                         <TabsList
-                          css={{
-                            backgroundColor: 'transparent',
-                            p: '0',
-                            mb: '2'
-                          }}
+                          className="relay-bg-transparent relay-p-0 relay-mb-2"
                         >
                           <TabsTrigger
                             value="buy"
-                            css={{
-                              padding: '12px',
-                              background: 'none',
-                              border: '1px solid transparent',
-                              color: 'text-subtle',
-                              '&[data-state="active"]': {
-                                background: 'widget-background',
-                                borderRadius: '12px',
-                                borderColor: 'slate.4',
-                                color: 'text-default'
-                              },
-                              '&:not([data-state="active"])': {
-                                _hover: {
-                                  backgroundColor: 'transparent !important'
-                                }
-                              },
-                              _dark: {
-                                '&[data-state="active"]': {
-                                  background: 'widget-background',
-                                  borderColor: 'gray.4'
-                                },
-                                '&:not([data-state="active"])': {
-                                  _hover: {
-                                    backgroundColor: 'transparent !important'
-                                  }
-                                }
-                              }
-                            }}
+                            className="relay-p-3 relay-bg-none relay-border relay-border-solid relay-border-transparent relay-text-[color:var(--relay-colors-text-subtle)] data-[state=active]:relay-bg-[var(--relay-colors-widget-background)] data-[state=active]:relay-rounded-[12px] data-[state=active]:relay-border-[var(--relay-colors-slate4)] data-[state=active]:relay-text-[color:var(--relay-colors-text-default)] dark:data-[state=active]:relay-border-[var(--relay-colors-gray4)]"
                           >
-                            <Text style="subtitle1" css={{ color: 'inherit' }}>
+                            <Text style="subtitle1" className="relay-text-[color:inherit]">
                               Buy
                             </Text>
                           </TabsTrigger>
                           <TabsTrigger
                             value="sell"
-                            css={{
-                              padding: '12px',
-                              background: 'none',
-                              border: '1px solid transparent',
-                              color: 'text-subtle',
-                              '&[data-state="active"]': {
-                                background: 'widget-background',
-                                borderRadius: '12px',
-                                borderColor: 'slate.4',
-                                color: 'text-default'
-                              },
-                              '&:not([data-state="active"])': {
-                                _hover: {
-                                  backgroundColor: 'transparent !important'
-                                }
-                              },
-                              _dark: {
-                                '&[data-state="active"]': {
-                                  background: 'widget-background',
-                                  borderColor: 'gray.4'
-                                },
-                                '&:not([data-state="active"])': {
-                                  _hover: {
-                                    backgroundColor: 'transparent !important'
-                                  }
-                                }
-                              }
-                            }}
+                            className="relay-p-3 relay-bg-none relay-border relay-border-solid relay-border-transparent relay-text-[color:var(--relay-colors-text-subtle)] data-[state=active]:relay-bg-[var(--relay-colors-widget-background)] data-[state=active]:relay-rounded-[12px] data-[state=active]:relay-border-[var(--relay-colors-slate4)] data-[state=active]:relay-text-[color:var(--relay-colors-text-default)] dark:data-[state=active]:relay-border-[var(--relay-colors-gray4)]"
                           >
-                            <Text style="subtitle1" css={{ color: 'inherit' }}>
+                            <Text style="subtitle1" className="relay-text-[color:inherit]">
                               Sell
                             </Text>
                           </TabsTrigger>
diff --git a/packages/ui/src/components/widgets/WidgetErrorWell.tsx b/packages/ui/src/components/widgets/WidgetErrorWell.tsx
index ce61bdcf5..469ebf968 100644
--- a/packages/ui/src/components/widgets/WidgetErrorWell.tsx
+++ b/packages/ui/src/components/widgets/WidgetErrorWell.tsx
@@ -7,7 +7,7 @@ import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons/faExclama
 import { type Currency } from '../../constants/currencies.js'
 import Tooltip from '../primitives/Tooltip.js'
 import { useMediaQuery } from 'usehooks-ts'
-import type { Styles } from '@relayprotocol/relay-design-system/css'
+import { cn } from '../../utils/cn.js'
 import type { QuoteResponse } from '@relayprotocol/relay-kit-hooks'
 import type { LinkedWallet } from '../../types/index.js'
 import { faRoute } from '@fortawesome/free-solid-svg-icons'
@@ -21,7 +21,7 @@ type Props = {
   isHighRelayerServiceFee?: boolean
   isCapacityExceededError?: boolean
   isCouldNotExecuteError?: boolean
-  containerCss?: Styles
+  containerClassName?: string
   recipientWalletSupportsChain?: boolean | null
   recipient?: string
   toChainWalletVMSupported?: boolean
@@ -38,7 +38,7 @@ export const WidgetErrorWell: FC<Props> = ({
   isHighRelayerServiceFee,
   isCapacityExceededError,
   isCouldNotExecuteError,
-  containerCss,
+  containerClassName,
   recipientWalletSupportsChain,
   recipient,
   toChainWalletVMSupported,
@@ -72,23 +72,14 @@ export const WidgetErrorWell: FC<Props> = ({
       <Flex
         align="center"
         justify="between"
-        css={{
-          gap: '2',
-          p: '3',
-          width: '100%',
-          borderRadius: 'widget-card-border-radius',
-          backgroundColor: 'widget-background',
-          border: 'widget-card-border',
-          overflow: 'hidden',
-          mb: 'widget-card-section-gutter'
-        }}
+        className="relay-gap-2 relay-p-3 relay-w-full relay-rounded-[var(--relay-radii-widget-card-border-radius)] relay-bg-[var(--relay-colors-widget-background)] relay-border-widget-card relay-overflow-hidden relay-mb-[var(--relay-spacing-widget-card-section-gutter)]"
       >
         <Text style="subtitle2">Route</Text>
-        <Flex align="center" css={{ gap: '1' }}>
+        <Flex align="center" className="relay-gap-1">
           <Text style="subtitle2" color="subtle">
             No available routes
           </Text>
-          <Box css={{ color: 'gray11', width: 14, flexShrink: 0 }}>
+          <Box className="relay-text-[color:var(--relay-colors-gray11)] relay-w-[14px] relay-shrink-0">
             <FontAwesomeIcon icon={faRoute} width={14} />
           </Box>
         </Flex>
@@ -98,10 +89,10 @@ export const WidgetErrorWell: FC<Props> = ({
 
   /*
    * Show wallet incompatibility warning when:
-   * • Wallet doesn't support destination chain
-   * • Valid recipient address (not dead/burn address)
-   * • Destination chain supports wallet's VM type
-   * • Wallet VM type matches destination chain VM
+   * - Wallet doesn't support destination chain
+   * - Valid recipient address (not dead/burn address)
+   * - Destination chain supports wallet's VM type
+   * - Wallet VM type matches destination chain VM
    */
   if (
     !recipientWalletSupportsChain &&
@@ -114,22 +105,16 @@ export const WidgetErrorWell: FC<Props> = ({
     return (
       <Flex
         align="center"
-        css={{
-          gap: '2',
-          p: '3',
-          backgroundColor: 'amber2',
-          '--borderColor': 'colors.amber4',
-          border: '1px solid var(--borderColor)',
-          borderRadius: 12,
-          mb: '3',
-          ...containerCss
-        }}
+        className={cn(
+          'relay-gap-2 relay-p-3 relay-bg-[var(--relay-colors-amber2)] relay-border relay-border-solid relay-border-[var(--relay-colors-amber4)] relay-rounded-[12px] relay-mb-3',
+          containerClassName
+        )}
         id={'widget-error-well-section'}
       >
-        <Box css={{ color: 'amber9' }}>
+        <Box className="relay-text-[color:var(--relay-colors-amber9)]">
           <FontAwesomeIcon icon={faExclamationCircle} width={16} />
         </Box>
-        <Text style="subtitle3" css={{ color: 'amber12' }}>
+        <Text style="subtitle3" className="relay-text-[color:var(--relay-colors-amber12)]">
           Your selected wallet doesn't support the destination chain. Please
           choose a different wallet.
         </Text>
@@ -141,22 +126,16 @@ export const WidgetErrorWell: FC<Props> = ({
     return (
       <Flex
         align="center"
-        css={{
-          gap: '2',
-          p: '3',
-          backgroundColor: 'red2',
-          '--borderColor': 'colors.red4',
-          border: '1px solid var(--borderColor)',
-          borderRadius: 12,
-          mb: '3',
-          ...containerCss
-        }}
+        className={cn(
+          'relay-gap-2 relay-p-3 relay-bg-[var(--relay-colors-red2)] relay-border relay-border-solid relay-border-[var(--relay-colors-red4)] relay-rounded-[12px] relay-mb-3',
+          containerClassName
+        )}
         id={'widget-error-well-section'}
       >
-        <Box css={{ color: 'red10' }}>
+        <Box className="relay-text-[color:var(--relay-colors-red10)]">
           <FontAwesomeIcon icon={faExclamationCircle} width={16} />
         </Box>
-        <Text style="subtitle3" css={{ color: 'red12' }}>
+        <Text style="subtitle3" className="relay-text-[color:var(--relay-colors-red12)]">
           {fetchQuoteErrorMessage}
         </Text>
       </Flex>
@@ -174,7 +153,7 @@ export const WidgetErrorWell: FC<Props> = ({
         content={
           <Text
             style="subtitle3"
-            css={{ maxWidth: 215, display: 'inline-block' }}
+            className="relay-max-w-[215px] relay-inline-block"
           >
             We recommend increasing the amount or waiting for the gas fee to be
             lower.
@@ -183,23 +162,16 @@ export const WidgetErrorWell: FC<Props> = ({
       >
         <Flex
           align="center"
-          css={{
-            gap: '2',
-            py: '3',
-            px: '3',
-            backgroundColor: 'amber2',
-            '--borderColor': 'colors.amber4',
-            border: '1px solid var(--borderColor)',
-            borderRadius: 12,
-            mb: '3',
-            ...containerCss
-          }}
+          className={cn(
+            'relay-gap-2 relay-py-3 relay-px-3 relay-bg-[var(--relay-colors-amber2)] relay-border relay-border-solid relay-border-[var(--relay-colors-amber4)] relay-rounded-[12px] relay-mb-3',
+            containerClassName
+          )}
           id={'widget-error-well-section'}
         >
-          <Box css={{ color: 'amber10' }}>
+          <Box className="relay-text-[color:var(--relay-colors-amber10)]">
             <FontAwesomeIcon icon={faExclamationCircle} width={16} />
           </Box>
-          <Text style="subtitle3" css={{ color: 'amber12' }}>
+          <Text style="subtitle3" className="relay-text-[color:var(--relay-colors-amber12)]">
             Fees exceed 40% of the received amount.
           </Text>
         </Flex>
@@ -211,23 +183,16 @@ export const WidgetErrorWell: FC<Props> = ({
     return (
       <Flex
         align="center"
-        css={{
-          gap: '2',
-          py: '2',
-          px: '3',
-          backgroundColor: 'amber2',
-          '--borderColor': 'colors.amber4',
-          border: '1px solid var(--borderColor)',
-          borderRadius: 12,
-          mb: '3',
-          ...containerCss
-        }}
+        className={cn(
+          'relay-gap-2 relay-py-2 relay-px-3 relay-bg-[var(--relay-colors-amber2)] relay-border relay-border-solid relay-border-[var(--relay-colors-amber4)] relay-rounded-[12px] relay-mb-3',
+          containerClassName
+        )}
         id={'widget-error-well-section'}
       >
-        <Box css={{ color: 'amber10' }}>
+        <Box className="relay-text-[color:var(--relay-colors-amber10)]">
           <FontAwesomeIcon icon={faExclamationCircle} width={16} />
         </Box>
-        <Text style="subtitle3" css={{ color: 'amber12' }}>
+        <Text style="subtitle3" className="relay-text-[color:var(--relay-colors-amber12)]">
           The price impact is currently high (
           {quote?.details?.totalImpact?.percent}%).
         </Text>
@@ -239,23 +204,16 @@ export const WidgetErrorWell: FC<Props> = ({
     return (
       <Flex
         align="center"
-        css={{
-          gap: '2',
-          py: '2',
-          px: '3',
-          backgroundColor: 'amber2',
-          '--borderColor': 'colors.amber4',
-          border: '1px solid var(--borderColor)',
-          borderRadius: 12,
-          mb: '3',
-          ...containerCss
-        }}
+        className={cn(
+          'relay-gap-2 relay-py-2 relay-px-3 relay-bg-[var(--relay-colors-amber2)] relay-border relay-border-solid relay-border-[var(--relay-colors-amber4)] relay-rounded-[12px] relay-mb-3',
+          containerClassName
+        )}
         id={'widget-error-well-section'}
       >
-        <Box css={{ color: 'amber10' }}>
+        <Box className="relay-text-[color:var(--relay-colors-amber10)]">
           <FontAwesomeIcon icon={faExclamationCircle} width={16} />
         </Box>
-        <Text style="subtitle3" css={{ color: 'amber12' }}>
+        <Text style="subtitle3" className="relay-text-[color:var(--relay-colors-amber12)]">
           Unable to detect token price. Please confirm expected output before
           submitting.
         </Text>
@@ -267,23 +225,16 @@ export const WidgetErrorWell: FC<Props> = ({
     return (
       <Flex
         align="center"
-        css={{
-          gap: '2',
-          py: '3',
-          px: '3',
-          backgroundColor: 'amber2',
-          '--borderColor': 'colors.amber4',
-          border: '1px solid var(--borderColor)',
-          borderRadius: 12,
-          mb: '3',
-          ...containerCss
-        }}
+        className={cn(
+          'relay-gap-2 relay-py-3 relay-px-3 relay-bg-[var(--relay-colors-amber2)] relay-border relay-border-solid relay-border-[var(--relay-colors-amber4)] relay-rounded-[12px] relay-mb-3',
+          containerClassName
+        )}
         id={'widget-error-well-section'}
       >
-        <Box css={{ color: 'amber10' }}>
+        <Box className="relay-text-[color:var(--relay-colors-amber10)]">
           <FontAwesomeIcon icon={faExclamationCircle} width={16} />
         </Box>
-        <Text style="subtitle3" css={{ color: 'amber12' }}>
+        <Text style="subtitle3" className="relay-text-[color:var(--relay-colors-amber12)]">
           Due to high demand, Relayer fees have temporarily been increased.
         </Text>
       </Flex>
diff --git a/packages/ui/src/styles/base.css b/packages/ui/src/styles/base.css
new file mode 100644
index 000000000..735c6f112
--- /dev/null
+++ b/packages/ui/src/styles/base.css
@@ -0,0 +1,852 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ===================================================================
+   Keyframes
+   =================================================================== */
+@keyframes pulse {
+  50% { opacity: 0.5; }
+}
+
+@keyframes pulse-shadow {
+  0% { box-shadow: 0 0 0 0px var(--relay-colors-primary4); }
+  100% { box-shadow: 0 0 0 6px var(--relay-colors-primary4); }
+}
+
+@keyframes spin {
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes collapsibleSlideDown {
+  from { height: 0; }
+  to { height: var(--radix-collapsible-content-height); }
+}
+
+@keyframes collapsibleSlideUp {
+  from { height: var(--radix-collapsible-content-height); }
+  to { height: 0; }
+}
+
+@keyframes dialog-slide-up {
+  from { opacity: 0; bottom: -100%; }
+  to { opacity: 1; bottom: 0; }
+}
+
+@keyframes dialog-slide-down {
+  from { opacity: 1; bottom: 0; }
+  to { opacity: 0; bottom: -100%; }
+}
+
+@keyframes dialog-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes dialog-fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes content-fade-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* ===================================================================
+   CSS Reset (scoped to .relay-kit-reset)
+   Wrapped in @layer base so it appears BEFORE @tailwind utilities
+   in the output. This ensures utility classes always win over the reset.
+   =================================================================== */
+@layer base {
+
+.relay-kit-reset {
+  --font-fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  -webkit-text-size-adjust: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  -webkit-tap-highlight-color: transparent;
+  line-height: 1.5;
+  font-family: var(--relay-fonts-body, var(--font-fallback));
+}
+
+.relay-kit-reset *,
+.relay-kit-reset ::before,
+.relay-kit-reset ::after,
+.relay-kit-reset ::backdrop,
+.relay-kit-reset ::file-selector-button {
+  margin: 0px;
+  padding: 0px;
+  box-sizing: border-box;
+  border-width: 0px;
+  border-style: solid;
+  border-color: currentColor;
+}
+
+.relay-kit-reset img,
+.relay-kit-reset svg,
+.relay-kit-reset video,
+.relay-kit-reset canvas,
+.relay-kit-reset audio,
+.relay-kit-reset iframe,
+.relay-kit-reset embed,
+.relay-kit-reset object {
+  display: block;
+  vertical-align: middle;
+}
+
+.relay-kit-reset img,
+.relay-kit-reset video {
+  max-width: 100%;
+  height: auto;
+}
+
+.relay-kit-reset h1,
+.relay-kit-reset h2,
+.relay-kit-reset h3,
+.relay-kit-reset h4,
+.relay-kit-reset h5,
+.relay-kit-reset h6 {
+  text-wrap: balance;
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+.relay-kit-reset p,
+.relay-kit-reset h1,
+.relay-kit-reset h2,
+.relay-kit-reset h3,
+.relay-kit-reset h4,
+.relay-kit-reset h5,
+.relay-kit-reset h6 {
+  overflow-wrap: break-word;
+}
+
+.relay-kit-reset ol,
+.relay-kit-reset ul,
+.relay-kit-reset menu {
+  list-style: none;
+}
+
+.relay-kit-reset button,
+.relay-kit-reset input:where([type='button'], [type='reset'], [type='submit']),
+.relay-kit-reset ::file-selector-button {
+  appearance: button;
+  -webkit-appearance: button;
+}
+
+.relay-kit-reset button,
+.relay-kit-reset input,
+.relay-kit-reset optgroup,
+.relay-kit-reset select,
+.relay-kit-reset textarea,
+.relay-kit-reset ::file-selector-button {
+  font: inherit;
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+  background: transparent;
+}
+
+.relay-kit-reset ::placeholder {
+  opacity: 1;
+  color: color-mix(in srgb, currentColor 50%, transparent);
+}
+
+.relay-kit-reset textarea {
+  resize: vertical;
+}
+
+.relay-kit-reset table {
+  text-indent: 0px;
+  border-collapse: collapse;
+  border-color: inherit;
+}
+
+.relay-kit-reset summary {
+  display: list-item;
+}
+
+.relay-kit-reset a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+.relay-kit-reset abbr:where([title]) {
+  text-decoration: underline dotted;
+}
+
+.relay-kit-reset code,
+.relay-kit-reset kbd,
+.relay-kit-reset samp,
+.relay-kit-reset pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    'Liberation Mono', 'Courier New', monospace;
+  font-size: 1em;
+}
+
+.relay-kit-reset ::-webkit-search-decoration,
+.relay-kit-reset ::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+}
+
+.relay-kit-reset ::-webkit-inner-spin-button,
+.relay-kit-reset ::-webkit-outer-spin-button {
+  height: auto;
+}
+
+.relay-kit-reset [hidden] {
+  display: none !important;
+}
+
+.relay-kit-reset img {
+  border-style: none;
+}
+
+.relay-kit-reset small {
+  font-size: 80%;
+}
+
+.relay-kit-reset b,
+.relay-kit-reset strong {
+  font-weight: bolder;
+}
+
+/* ===================================================================
+   Token Definitions — Light Mode (default)
+   =================================================================== */
+:root {
+  /* --- Spacing --- */
+  --relay-spacing-1: 4px;
+  --relay-spacing-2: 8px;
+  --relay-spacing-3: 12px;
+  --relay-spacing-4: 16px;
+  --relay-spacing-5: 32px;
+  --relay-spacing-6: 64px;
+  --relay-spacing-widget-card-section-gutter: 6px;
+
+  /* --- Fonts --- */
+  --relay-fonts-body: var(--font-inter), sans-serif;
+  --relay-fonts-heading: var(--font-inter), sans-serif;
+
+  /* --- Gradients --- */
+  --relay-gradients-success: linear-gradient(to right, #30A46C, #0ADF79);
+
+  /* --- Radii --- */
+  --relay-radii-widget-border-radius: 16px;
+  --relay-radii-widget-card-border-radius: 12px;
+  --relay-radii-modal-border-radius: 16px;
+  --relay-radii-input-border-radius: 8px;
+  --relay-radii-dropdown-border-radius: 8px;
+  --relay-radii-widget-swap-currency-button-border-radius: 8px;
+
+  /* --- Borders --- */
+  --relay-borders-widget-border: 0px solid white;
+  --relay-borders-modal-border: 0px solid white;
+  --relay-borders-dropdown-border: 1px solid var(--relay-colors-gray5);
+  --relay-borders-widget-swap-currency-button-border-width: 2px;
+  --relay-borders-widget-card-border: 1px solid var(--relay-colors-primary4);
+
+  /* --- Shadows --- */
+  --relay-shadows-widget-box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.10);
+
+  /* ===================================================================
+     Custom Violet Scale (primary)
+     =================================================================== */
+  --relay-colors-violet-1: #FDFDFF;
+  --relay-colors-violet-2: #F7F8FF;
+  --relay-colors-violet-3: #EFF1FF;
+  --relay-colors-violet-4: #E4E7FF;
+  --relay-colors-violet-5: #D7DBFF;
+  --relay-colors-violet-6: #C8CCFF;
+  --relay-colors-violet-7: #B4B8FF;
+  --relay-colors-violet-8: #989AFF;
+  --relay-colors-violet-9: #4615C8;
+  --relay-colors-violet-10: #3B00B4;
+  --relay-colors-violet-11: #5A45DF;
+  --relay-colors-violet-12: #2A226E;
+
+  --relay-colors-violet-dark-1: #0E0E23;
+  --relay-colors-violet-dark-2: #141331;
+  --relay-colors-violet-dark-3: #002216;
+  --relay-colors-violet-dark-4: #2F0093;
+  --relay-colors-violet-dark-5: #3800A8;
+  --relay-colors-violet-dark-6: #4016B8;
+  --relay-colors-violet-dark-7: #4C24D1;
+  --relay-colors-violet-dark-8: #5B2AF9;
+  --relay-colors-violet-dark-9: #4615C8;
+  --relay-colors-violet-dark-10: #3901AA;
+  --relay-colors-violet-dark-11: #A7AAFF;
+  --relay-colors-violet-dark-12: #DBDEFF;
+
+  /* ===================================================================
+     Radix Slate Scale
+     =================================================================== */
+  --relay-colors-slate-light-1: hsl(206, 30.0%, 98.8%);
+  --relay-colors-slate-light-2: hsl(210, 16.7%, 97.6%);
+  --relay-colors-slate-light-3: hsl(209, 13.3%, 95.3%);
+  --relay-colors-slate-light-4: hsl(209, 12.2%, 93.2%);
+  --relay-colors-slate-light-5: hsl(208, 11.7%, 91.1%);
+  --relay-colors-slate-light-6: hsl(208, 11.3%, 88.9%);
+  --relay-colors-slate-light-7: hsl(207, 11.1%, 85.9%);
+  --relay-colors-slate-light-8: hsl(205, 10.7%, 78.0%);
+  --relay-colors-slate-light-9: hsl(206, 6.0%, 56.1%);
+  --relay-colors-slate-light-10: hsl(206, 5.8%, 52.3%);
+  --relay-colors-slate-light-11: hsl(206, 6.0%, 43.5%);
+  --relay-colors-slate-light-12: hsl(206, 24.0%, 9.0%);
+
+  --relay-colors-slate-dark-1: hsl(200, 7.0%, 8.8%);
+  --relay-colors-slate-dark-2: hsl(195, 7.1%, 11.0%);
+  --relay-colors-slate-dark-3: hsl(197, 6.8%, 13.6%);
+  --relay-colors-slate-dark-4: hsl(198, 6.6%, 15.8%);
+  --relay-colors-slate-dark-5: hsl(199, 6.4%, 17.9%);
+  --relay-colors-slate-dark-6: hsl(201, 6.2%, 20.5%);
+  --relay-colors-slate-dark-7: hsl(203, 6.0%, 24.3%);
+  --relay-colors-slate-dark-8: hsl(207, 5.6%, 31.6%);
+  --relay-colors-slate-dark-9: hsl(206, 6.0%, 43.9%);
+  --relay-colors-slate-dark-10: hsl(206, 5.2%, 49.5%);
+  --relay-colors-slate-dark-11: hsl(206, 6.0%, 63.0%);
+  --relay-colors-slate-dark-12: hsl(210, 6.0%, 93.0%);
+
+  --relay-colors-slate-1: var(--relay-colors-slate-light-1);
+  --relay-colors-slate-2: var(--relay-colors-slate-light-2);
+  --relay-colors-slate-3: var(--relay-colors-slate-light-3);
+  --relay-colors-slate-4: var(--relay-colors-slate-light-4);
+  --relay-colors-slate-5: var(--relay-colors-slate-light-5);
+  --relay-colors-slate-6: var(--relay-colors-slate-light-6);
+  --relay-colors-slate-7: var(--relay-colors-slate-light-7);
+  --relay-colors-slate-8: var(--relay-colors-slate-light-8);
+  --relay-colors-slate-9: var(--relay-colors-slate-light-9);
+  --relay-colors-slate-10: var(--relay-colors-slate-light-10);
+  --relay-colors-slate-11: var(--relay-colors-slate-light-11);
+  --relay-colors-slate-12: var(--relay-colors-slate-light-12);
+
+  /* ===================================================================
+     Radix Gray Scale
+     =================================================================== */
+  --relay-colors-gray-light-1: hsl(0, 0%, 99.0%);
+  --relay-colors-gray-light-2: hsl(0, 0%, 97.3%);
+  --relay-colors-gray-light-3: hsl(0, 0%, 95.1%);
+  --relay-colors-gray-light-4: hsl(0, 0%, 93.0%);
+  --relay-colors-gray-light-5: hsl(0, 0%, 90.9%);
+  --relay-colors-gray-light-6: hsl(0, 0%, 88.7%);
+  --relay-colors-gray-light-7: hsl(0, 0%, 85.8%);
+  --relay-colors-gray-light-8: hsl(0, 0%, 78.0%);
+  --relay-colors-gray-light-9: hsl(0, 0%, 56.1%);
+  --relay-colors-gray-light-10: hsl(0, 0%, 52.3%);
+  --relay-colors-gray-light-11: hsl(0, 0%, 43.5%);
+  --relay-colors-gray-light-12: hsl(0, 0%, 9.0%);
+
+  --relay-colors-gray-dark-1: hsl(0, 0%, 8.5%);
+  --relay-colors-gray-dark-2: hsl(0, 0%, 11.0%);
+  --relay-colors-gray-dark-3: hsl(0, 0%, 13.6%);
+  --relay-colors-gray-dark-4: hsl(0, 0%, 15.8%);
+  --relay-colors-gray-dark-5: hsl(0, 0%, 17.9%);
+  --relay-colors-gray-dark-6: hsl(0, 0%, 20.5%);
+  --relay-colors-gray-dark-7: hsl(0, 0%, 24.3%);
+  --relay-colors-gray-dark-8: hsl(0, 0%, 31.2%);
+  --relay-colors-gray-dark-9: hsl(0, 0%, 43.9%);
+  --relay-colors-gray-dark-10: hsl(0, 0%, 49.4%);
+  --relay-colors-gray-dark-11: hsl(0, 0%, 62.8%);
+  --relay-colors-gray-dark-12: hsl(0, 0%, 93.0%);
+
+  --relay-colors-gray-1: var(--relay-colors-gray-light-1);
+  --relay-colors-gray-2: var(--relay-colors-gray-light-2);
+  --relay-colors-gray-3: var(--relay-colors-gray-light-3);
+  --relay-colors-gray-4: var(--relay-colors-gray-light-4);
+  --relay-colors-gray-5: var(--relay-colors-gray-light-5);
+  --relay-colors-gray-6: var(--relay-colors-gray-light-6);
+  --relay-colors-gray-7: var(--relay-colors-gray-light-7);
+  --relay-colors-gray-8: var(--relay-colors-gray-light-8);
+  --relay-colors-gray-9: var(--relay-colors-gray-light-9);
+  --relay-colors-gray-10: var(--relay-colors-gray-light-10);
+  --relay-colors-gray-11: var(--relay-colors-gray-light-11);
+  --relay-colors-gray-12: var(--relay-colors-gray-light-12);
+
+  /* ===================================================================
+     Radix Tomato Scale (Red)
+     =================================================================== */
+  --relay-colors-tomato-light-1: hsl(10, 100%, 99.4%);
+  --relay-colors-tomato-light-2: hsl(8, 100%, 98.4%);
+  --relay-colors-tomato-light-3: hsl(8, 100%, 96.6%);
+  --relay-colors-tomato-light-4: hsl(8, 100%, 94.3%);
+  --relay-colors-tomato-light-5: hsl(8, 92.8%, 91.0%);
+  --relay-colors-tomato-light-6: hsl(9, 84.7%, 86.3%);
+  --relay-colors-tomato-light-7: hsl(10, 77.3%, 79.5%);
+  --relay-colors-tomato-light-8: hsl(10, 71.6%, 71.0%);
+  --relay-colors-tomato-light-9: hsl(10, 78.0%, 54.0%);
+  --relay-colors-tomato-light-10: hsl(10, 71.5%, 50.0%);
+  --relay-colors-tomato-light-11: hsl(10, 82.0%, 43.5%);
+  --relay-colors-tomato-light-12: hsl(10, 50.0%, 13.5%);
+
+  --relay-colors-tomato-dark-1: hsl(10, 23.0%, 9.4%);
+  --relay-colors-tomato-dark-2: hsl(9, 44.8%, 11.4%);
+  --relay-colors-tomato-dark-3: hsl(8, 52.0%, 15.3%);
+  --relay-colors-tomato-dark-4: hsl(7, 56.3%, 18.0%);
+  --relay-colors-tomato-dark-5: hsl(7, 60.1%, 20.6%);
+  --relay-colors-tomato-dark-6: hsl(8, 64.8%, 24.0%);
+  --relay-colors-tomato-dark-7: hsl(8, 71.2%, 29.1%);
+  --relay-colors-tomato-dark-8: hsl(10, 80.2%, 35.7%);
+  --relay-colors-tomato-dark-9: hsl(10, 78.0%, 54.0%);
+  --relay-colors-tomato-dark-10: hsl(10, 81.7%, 59.0%);
+  --relay-colors-tomato-dark-11: hsl(10, 85.0%, 62.8%);
+  --relay-colors-tomato-dark-12: hsl(10, 89.0%, 96.0%);
+
+  --relay-colors-tomato-1: var(--relay-colors-tomato-light-1);
+  --relay-colors-tomato-2: var(--relay-colors-tomato-light-2);
+  --relay-colors-tomato-3: var(--relay-colors-tomato-light-3);
+  --relay-colors-tomato-4: var(--relay-colors-tomato-light-4);
+  --relay-colors-tomato-5: var(--relay-colors-tomato-light-5);
+  --relay-colors-tomato-6: var(--relay-colors-tomato-light-6);
+  --relay-colors-tomato-7: var(--relay-colors-tomato-light-7);
+  --relay-colors-tomato-8: var(--relay-colors-tomato-light-8);
+  --relay-colors-tomato-9: var(--relay-colors-tomato-light-9);
+  --relay-colors-tomato-10: var(--relay-colors-tomato-light-10);
+  --relay-colors-tomato-11: var(--relay-colors-tomato-light-11);
+  --relay-colors-tomato-12: var(--relay-colors-tomato-light-12);
+
+  /* ===================================================================
+     Radix Grass Scale (Green)
+     =================================================================== */
+  --relay-colors-grass-light-1: hsl(116, 50.0%, 98.9%);
+  --relay-colors-grass-light-2: hsl(120, 60.0%, 97.1%);
+  --relay-colors-grass-light-3: hsl(120, 53.6%, 94.8%);
+  --relay-colors-grass-light-4: hsl(121, 47.5%, 91.4%);
+  --relay-colors-grass-light-5: hsl(122, 42.6%, 86.5%);
+  --relay-colors-grass-light-6: hsl(124, 39.0%, 79.7%);
+  --relay-colors-grass-light-7: hsl(126, 37.1%, 70.2%);
+  --relay-colors-grass-light-8: hsl(131, 38.1%, 56.3%);
+  --relay-colors-grass-light-9: hsl(131, 41.0%, 46.5%);
+  --relay-colors-grass-light-10: hsl(132, 43.1%, 42.2%);
+  --relay-colors-grass-light-11: hsl(133, 50.0%, 32.5%);
+  --relay-colors-grass-light-12: hsl(130, 30.0%, 14.9%);
+
+  --relay-colors-grass-dark-1: hsl(146, 30.0%, 7.4%);
+  --relay-colors-grass-dark-2: hsl(136, 33.3%, 8.8%);
+  --relay-colors-grass-dark-3: hsl(137, 36.0%, 11.4%);
+  --relay-colors-grass-dark-4: hsl(137, 37.6%, 13.7%);
+  --relay-colors-grass-dark-5: hsl(136, 38.7%, 16.0%);
+  --relay-colors-grass-dark-6: hsl(135, 39.6%, 19.1%);
+  --relay-colors-grass-dark-7: hsl(134, 40.3%, 23.8%);
+  --relay-colors-grass-dark-8: hsl(131, 40.1%, 30.8%);
+  --relay-colors-grass-dark-9: hsl(131, 41.0%, 46.5%);
+  --relay-colors-grass-dark-10: hsl(131, 39.0%, 52.1%);
+  --relay-colors-grass-dark-11: hsl(131, 43.0%, 57.2%);
+  --relay-colors-grass-dark-12: hsl(137, 72.0%, 94.0%);
+
+  --relay-colors-grass-1: var(--relay-colors-grass-light-1);
+  --relay-colors-grass-2: var(--relay-colors-grass-light-2);
+  --relay-colors-grass-3: var(--relay-colors-grass-light-3);
+  --relay-colors-grass-4: var(--relay-colors-grass-light-4);
+  --relay-colors-grass-5: var(--relay-colors-grass-light-5);
+  --relay-colors-grass-6: var(--relay-colors-grass-light-6);
+  --relay-colors-grass-7: var(--relay-colors-grass-light-7);
+  --relay-colors-grass-8: var(--relay-colors-grass-light-8);
+  --relay-colors-grass-9: var(--relay-colors-grass-light-9);
+  --relay-colors-grass-10: var(--relay-colors-grass-light-10);
+  --relay-colors-grass-11: var(--relay-colors-grass-light-11);
+  --relay-colors-grass-12: var(--relay-colors-grass-light-12);
+
+  /* ===================================================================
+     Radix Amber Scale
+     =================================================================== */
+  --relay-colors-amber-light-1: hsl(39, 70.0%, 99.0%);
+  --relay-colors-amber-light-2: hsl(40, 100%, 96.5%);
+  --relay-colors-amber-light-3: hsl(44, 100%, 91.7%);
+  --relay-colors-amber-light-4: hsl(43, 100%, 86.8%);
+  --relay-colors-amber-light-5: hsl(42, 100%, 81.8%);
+  --relay-colors-amber-light-6: hsl(38, 99.7%, 76.3%);
+  --relay-colors-amber-light-7: hsl(36, 86.1%, 67.1%);
+  --relay-colors-amber-light-8: hsl(35, 85.2%, 55.1%);
+  --relay-colors-amber-light-9: hsl(39, 100%, 57.0%);
+  --relay-colors-amber-light-10: hsl(35, 100%, 55.5%);
+  --relay-colors-amber-light-11: hsl(30, 100%, 34.0%);
+  --relay-colors-amber-light-12: hsl(20, 80.0%, 17.0%);
+
+  --relay-colors-amber-dark-1: hsl(36, 100%, 6.1%);
+  --relay-colors-amber-dark-2: hsl(35, 100%, 7.6%);
+  --relay-colors-amber-dark-3: hsl(32, 100%, 10.2%);
+  --relay-colors-amber-dark-4: hsl(32, 100%, 12.4%);
+  --relay-colors-amber-dark-5: hsl(33, 100%, 14.6%);
+  --relay-colors-amber-dark-6: hsl(35, 100%, 17.1%);
+  --relay-colors-amber-dark-7: hsl(35, 91.0%, 21.6%);
+  --relay-colors-amber-dark-8: hsl(36, 100%, 25.5%);
+  --relay-colors-amber-dark-9: hsl(39, 100%, 57.0%);
+  --relay-colors-amber-dark-10: hsl(43, 100%, 64.0%);
+  --relay-colors-amber-dark-11: hsl(39, 90.0%, 49.8%);
+  --relay-colors-amber-dark-12: hsl(39, 97.0%, 93.2%);
+
+  --relay-colors-amber-1: var(--relay-colors-amber-light-1);
+  --relay-colors-amber-2: var(--relay-colors-amber-light-2);
+  --relay-colors-amber-3: var(--relay-colors-amber-light-3);
+  --relay-colors-amber-4: var(--relay-colors-amber-light-4);
+  --relay-colors-amber-5: var(--relay-colors-amber-light-5);
+  --relay-colors-amber-6: var(--relay-colors-amber-light-6);
+  --relay-colors-amber-7: var(--relay-colors-amber-light-7);
+  --relay-colors-amber-8: var(--relay-colors-amber-light-8);
+  --relay-colors-amber-9: var(--relay-colors-amber-light-9);
+  --relay-colors-amber-10: var(--relay-colors-amber-light-10);
+  --relay-colors-amber-11: var(--relay-colors-amber-light-11);
+  --relay-colors-amber-12: var(--relay-colors-amber-light-12);
+
+  /* ===================================================================
+     Radix Yellow Scale
+     =================================================================== */
+  --relay-colors-yellow-light-1: hsl(60, 54.0%, 98.5%);
+  --relay-colors-yellow-light-2: hsl(52, 100%, 95.5%);
+  --relay-colors-yellow-light-3: hsl(55, 100%, 90.9%);
+  --relay-colors-yellow-light-4: hsl(54, 100%, 86.6%);
+  --relay-colors-yellow-light-5: hsl(52, 97.9%, 82.0%);
+  --relay-colors-yellow-light-6: hsl(50, 89.4%, 76.1%);
+  --relay-colors-yellow-light-7: hsl(47, 80.4%, 68.0%);
+  --relay-colors-yellow-light-8: hsl(48, 100%, 46.1%);
+  --relay-colors-yellow-light-9: hsl(53, 92.0%, 50.0%);
+  --relay-colors-yellow-light-10: hsl(50, 100%, 48.5%);
+  --relay-colors-yellow-light-11: hsl(42, 100%, 29.0%);
+  --relay-colors-yellow-light-12: hsl(40, 55.0%, 13.5%);
+
+  --relay-colors-yellow-dark-1: hsl(45, 100%, 5.5%);
+  --relay-colors-yellow-dark-2: hsl(46, 100%, 6.7%);
+  --relay-colors-yellow-dark-3: hsl(45, 100%, 8.7%);
+  --relay-colors-yellow-dark-4: hsl(45, 100%, 10.4%);
+  --relay-colors-yellow-dark-5: hsl(47, 100%, 12.1%);
+  --relay-colors-yellow-dark-6: hsl(49, 100%, 14.3%);
+  --relay-colors-yellow-dark-7: hsl(49, 90.3%, 18.4%);
+  --relay-colors-yellow-dark-8: hsl(50, 100%, 22.0%);
+  --relay-colors-yellow-dark-9: hsl(53, 92.0%, 50.0%);
+  --relay-colors-yellow-dark-10: hsl(54, 100%, 68.0%);
+  --relay-colors-yellow-dark-11: hsl(48, 100%, 47.0%);
+  --relay-colors-yellow-dark-12: hsl(53, 100%, 91.0%);
+
+  --relay-colors-yellow-1: var(--relay-colors-yellow-light-1);
+  --relay-colors-yellow-2: var(--relay-colors-yellow-light-2);
+  --relay-colors-yellow-3: var(--relay-colors-yellow-light-3);
+  --relay-colors-yellow-4: var(--relay-colors-yellow-light-4);
+  --relay-colors-yellow-5: var(--relay-colors-yellow-light-5);
+  --relay-colors-yellow-6: var(--relay-colors-yellow-light-6);
+  --relay-colors-yellow-7: var(--relay-colors-yellow-light-7);
+  --relay-colors-yellow-8: var(--relay-colors-yellow-light-8);
+  --relay-colors-yellow-9: var(--relay-colors-yellow-light-9);
+  --relay-colors-yellow-10: var(--relay-colors-yellow-light-10);
+  --relay-colors-yellow-11: var(--relay-colors-yellow-light-11);
+  --relay-colors-yellow-12: var(--relay-colors-yellow-light-12);
+
+  /* ===================================================================
+     Radix Blue Scale
+     =================================================================== */
+  --relay-colors-blue-light-1: hsl(206, 100%, 99.2%);
+  --relay-colors-blue-light-2: hsl(210, 100%, 98.0%);
+  --relay-colors-blue-light-3: hsl(209, 100%, 96.5%);
+  --relay-colors-blue-light-4: hsl(210, 98.8%, 94.0%);
+  --relay-colors-blue-light-5: hsl(209, 95.0%, 90.1%);
+  --relay-colors-blue-light-6: hsl(209, 81.2%, 84.5%);
+  --relay-colors-blue-light-7: hsl(208, 77.5%, 76.9%);
+  --relay-colors-blue-light-8: hsl(206, 81.9%, 65.3%);
+  --relay-colors-blue-light-9: hsl(206, 100%, 50.0%);
+  --relay-colors-blue-light-10: hsl(208, 100%, 47.3%);
+  --relay-colors-blue-light-11: hsl(211, 100%, 43.2%);
+  --relay-colors-blue-light-12: hsl(211, 100%, 15.0%);
+
+  --relay-colors-blue-dark-1: hsl(212, 35.0%, 9.2%);
+  --relay-colors-blue-dark-2: hsl(216, 50.0%, 11.8%);
+  --relay-colors-blue-dark-3: hsl(214, 59.4%, 15.3%);
+  --relay-colors-blue-dark-4: hsl(214, 65.8%, 17.9%);
+  --relay-colors-blue-dark-5: hsl(213, 71.2%, 20.2%);
+  --relay-colors-blue-dark-6: hsl(212, 77.4%, 23.1%);
+  --relay-colors-blue-dark-7: hsl(211, 85.1%, 27.4%);
+  --relay-colors-blue-dark-8: hsl(211, 89.7%, 34.1%);
+  --relay-colors-blue-dark-9: hsl(206, 100%, 50.0%);
+  --relay-colors-blue-dark-10: hsl(209, 100%, 60.6%);
+  --relay-colors-blue-dark-11: hsl(210, 100%, 66.1%);
+  --relay-colors-blue-dark-12: hsl(206, 98.0%, 95.8%);
+
+  --relay-colors-blue-1: var(--relay-colors-blue-light-1);
+  --relay-colors-blue-2: var(--relay-colors-blue-light-2);
+  --relay-colors-blue-3: var(--relay-colors-blue-light-3);
+  --relay-colors-blue-4: var(--relay-colors-blue-light-4);
+  --relay-colors-blue-5: var(--relay-colors-blue-light-5);
+  --relay-colors-blue-6: var(--relay-colors-blue-light-6);
+  --relay-colors-blue-7: var(--relay-colors-blue-light-7);
+  --relay-colors-blue-8: var(--relay-colors-blue-light-8);
+  --relay-colors-blue-9: var(--relay-colors-blue-light-9);
+  --relay-colors-blue-10: var(--relay-colors-blue-light-10);
+  --relay-colors-blue-11: var(--relay-colors-blue-light-11);
+  --relay-colors-blue-12: var(--relay-colors-blue-light-12);
+
+  /* ===================================================================
+     Radix Black Alpha Scale
+     =================================================================== */
+  --relay-colors-black-a-1: hsla(0, 0%, 0%, 0.012);
+  --relay-colors-black-a-2: hsla(0, 0%, 0%, 0.027);
+  --relay-colors-black-a-3: hsla(0, 0%, 0%, 0.047);
+  --relay-colors-black-a-4: hsla(0, 0%, 0%, 0.071);
+  --relay-colors-black-a-5: hsla(0, 0%, 0%, 0.090);
+  --relay-colors-black-a-6: hsla(0, 0%, 0%, 0.114);
+  --relay-colors-black-a-7: hsla(0, 0%, 0%, 0.141);
+  --relay-colors-black-a-8: hsla(0, 0%, 0%, 0.220);
+  --relay-colors-black-a-9: hsla(0, 0%, 0%, 0.439);
+  --relay-colors-black-a-10: hsla(0, 0%, 0%, 0.478);
+  --relay-colors-black-a-11: hsla(0, 0%, 0%, 0.565);
+  --relay-colors-black-a-12: hsla(0, 0%, 0%, 0.910);
+
+  /* ===================================================================
+     Panda Token Aliases (gray1–12 → slate scale)
+     =================================================================== */
+  --relay-colors-gray1: var(--relay-colors-slate-1);
+  --relay-colors-gray2: var(--relay-colors-slate-2);
+  --relay-colors-gray3: var(--relay-colors-slate-3);
+  --relay-colors-gray4: var(--relay-colors-slate-4);
+  --relay-colors-gray5: var(--relay-colors-slate-5);
+  --relay-colors-gray6: var(--relay-colors-slate-6);
+  --relay-colors-gray7: var(--relay-colors-slate-7);
+  --relay-colors-gray8: var(--relay-colors-slate-8);
+  --relay-colors-gray9: var(--relay-colors-slate-9);
+  --relay-colors-gray10: var(--relay-colors-slate-10);
+  --relay-colors-gray11: var(--relay-colors-slate-11);
+  --relay-colors-gray12: var(--relay-colors-slate-12);
+
+  --relay-colors-blackA10: var(--relay-colors-black-a-10);
+  --relay-colors-blue12: var(--relay-colors-blue-12);
+
+  --relay-colors-red2: var(--relay-colors-tomato-2);
+  --relay-colors-red3: var(--relay-colors-tomato-3);
+  --relay-colors-red4: var(--relay-colors-tomato-4);
+  --relay-colors-red5: var(--relay-colors-tomato-5);
+  --relay-colors-red6: var(--relay-colors-tomato-6);
+  --relay-colors-red9: var(--relay-colors-tomato-9);
+  --relay-colors-red10: var(--relay-colors-tomato-10);
+  --relay-colors-red11: var(--relay-colors-tomato-11);
+  --relay-colors-red12: var(--relay-colors-tomato-12);
+
+  --relay-colors-green2: var(--relay-colors-grass-2);
+  --relay-colors-green3: var(--relay-colors-grass-3);
+  --relay-colors-green9: var(--relay-colors-grass-9);
+  --relay-colors-green10: var(--relay-colors-grass-10);
+  --relay-colors-green11: var(--relay-colors-grass-11);
+  --relay-colors-green12: var(--relay-colors-grass-12);
+
+  --relay-colors-yellow9: var(--relay-colors-yellow-9);
+  --relay-colors-yellow10: var(--relay-colors-yellow-10);
+  --relay-colors-yellow11: var(--relay-colors-yellow-11);
+  --relay-colors-yellow12: var(--relay-colors-yellow-12);
+
+  --relay-colors-amber2: var(--relay-colors-amber-2);
+  --relay-colors-amber3: var(--relay-colors-amber-3);
+  --relay-colors-amber4: var(--relay-colors-amber-4);
+  --relay-colors-amber9: var(--relay-colors-amber-9);
+  --relay-colors-amber10: var(--relay-colors-amber-10);
+  --relay-colors-amber11: var(--relay-colors-amber-11);
+  --relay-colors-amber12: var(--relay-colors-amber-12);
+
+  /* ===================================================================
+     Primary Scale (semantic → violet)
+     =================================================================== */
+  --relay-colors-primary1: var(--relay-colors-violet-1);
+  --relay-colors-primary2: var(--relay-colors-violet-2);
+  --relay-colors-primary3: var(--relay-colors-violet-3);
+  --relay-colors-primary4: var(--relay-colors-violet-4);
+  --relay-colors-primary5: var(--relay-colors-violet-5);
+  --relay-colors-primary6: var(--relay-colors-violet-6);
+  --relay-colors-primary7: var(--relay-colors-violet-7);
+  --relay-colors-primary8: var(--relay-colors-violet-8);
+  --relay-colors-primary9: var(--relay-colors-violet-9);
+  --relay-colors-primary10: var(--relay-colors-violet-10);
+  --relay-colors-primary11: var(--relay-colors-violet-11);
+  --relay-colors-primary12: var(--relay-colors-violet-12);
+
+  /* ===================================================================
+     Semantic Color Tokens
+     =================================================================== */
+  --relay-colors-primary-color: var(--relay-colors-primary9);
+  --relay-colors-focus-color: var(--relay-colors-primary7);
+  --relay-colors-subtle-background-color: var(--relay-colors-gray-1);
+  --relay-colors-subtle-border-color: var(--relay-colors-gray-5);
+
+  /* Text */
+  --relay-colors-text-default: var(--relay-colors-gray-12);
+  --relay-colors-text-subtle: var(--relay-colors-gray-11);
+  --relay-colors-text-subtle-secondary: var(--relay-colors-gray-11);
+  --relay-colors-text-error: var(--relay-colors-tomato-12);
+  --relay-colors-text-success: var(--relay-colors-grass-11);
+
+  /* Buttons */
+  --relay-colors-primary-button-background: var(--relay-colors-primary9);
+  --relay-colors-primary-button-color: white;
+  --relay-colors-primary-button-hover-background: var(--relay-colors-primary10);
+  --relay-colors-primary-button-hover-color: white;
+  --relay-colors-secondary-button-background: var(--relay-colors-primary3);
+  --relay-colors-secondary-button-color: var(--relay-colors-gray12);
+  --relay-colors-secondary-button-hover-background: var(--relay-colors-primary4);
+  --relay-colors-secondary-button-hover-color: var(--relay-colors-gray12);
+  --relay-colors-button-disabled-background: var(--relay-colors-gray-8);
+  --relay-colors-button-disabled-color: var(--relay-colors-gray-11);
+
+  /* Input */
+  --relay-colors-input-background: var(--relay-colors-gray-3);
+  --relay-colors-input-color: var(--relay-colors-gray-12);
+
+  /* Anchor */
+  --relay-colors-anchor-color: var(--relay-colors-primary11);
+  --relay-colors-anchor-hover-color: var(--relay-colors-primary9);
+
+  /* Dropdown */
+  --relay-colors-dropdown-background: var(--relay-colors-gray-3);
+
+  /* Widget */
+  --relay-colors-widget-background: white;
+  --relay-colors-widget-card-background: var(--relay-colors-gray-1);
+  --relay-colors-widget-selector-background: var(--relay-colors-gray-2);
+  --relay-colors-widget-selector-hover-background: var(--relay-colors-gray-3);
+  --relay-colors-widget-swap-currency-button-border-color: var(--relay-colors-primary4);
+
+  /* Modal */
+  --relay-colors-modal-background: white;
+
+  /* Skeleton */
+  --relay-colors-skeleton-background: var(--relay-colors-gray-3);
+
+  /* Prose */
+  --relay-colors-prose-body: var(--relay-colors-slate-12);
+}
+
+/* ===================================================================
+   Dark Mode Overrides
+   =================================================================== */
+:where(.dark, [data-theme="dark"]) {
+  /* Primary → violet dark */
+  --relay-colors-primary1: var(--relay-colors-violet-dark-1);
+  --relay-colors-primary2: var(--relay-colors-violet-dark-2);
+  --relay-colors-primary3: var(--relay-colors-violet-dark-3);
+  --relay-colors-primary4: var(--relay-colors-violet-dark-4);
+  --relay-colors-primary5: var(--relay-colors-violet-dark-5);
+  --relay-colors-primary6: var(--relay-colors-violet-dark-6);
+  --relay-colors-primary7: var(--relay-colors-violet-dark-7);
+  --relay-colors-primary8: var(--relay-colors-violet-dark-8);
+  --relay-colors-primary9: var(--relay-colors-violet-dark-9);
+  --relay-colors-primary10: var(--relay-colors-violet-dark-10);
+  --relay-colors-primary11: var(--relay-colors-violet-dark-11);
+  --relay-colors-primary12: var(--relay-colors-violet-dark-12);
+
+  /* Widget/Modal backgrounds */
+  --relay-colors-widget-background: var(--relay-colors-gray-1);
+  --relay-colors-modal-background: var(--relay-colors-gray-1);
+
+  /* Radix scale dark overrides */
+  --relay-colors-amber-1: var(--relay-colors-amber-dark-1);
+  --relay-colors-amber-2: var(--relay-colors-amber-dark-2);
+  --relay-colors-amber-3: var(--relay-colors-amber-dark-3);
+  --relay-colors-amber-4: var(--relay-colors-amber-dark-4);
+  --relay-colors-amber-5: var(--relay-colors-amber-dark-5);
+  --relay-colors-amber-6: var(--relay-colors-amber-dark-6);
+  --relay-colors-amber-7: var(--relay-colors-amber-dark-7);
+  --relay-colors-amber-8: var(--relay-colors-amber-dark-8);
+  --relay-colors-amber-9: var(--relay-colors-amber-dark-9);
+  --relay-colors-amber-10: var(--relay-colors-amber-dark-10);
+  --relay-colors-amber-11: var(--relay-colors-amber-dark-11);
+  --relay-colors-amber-12: var(--relay-colors-amber-dark-12);
+
+  --relay-colors-blue-1: var(--relay-colors-blue-dark-1);
+  --relay-colors-blue-2: var(--relay-colors-blue-dark-2);
+  --relay-colors-blue-3: var(--relay-colors-blue-dark-3);
+  --relay-colors-blue-4: var(--relay-colors-blue-dark-4);
+  --relay-colors-blue-5: var(--relay-colors-blue-dark-5);
+  --relay-colors-blue-6: var(--relay-colors-blue-dark-6);
+  --relay-colors-blue-7: var(--relay-colors-blue-dark-7);
+  --relay-colors-blue-8: var(--relay-colors-blue-dark-8);
+  --relay-colors-blue-9: var(--relay-colors-blue-dark-9);
+  --relay-colors-blue-10: var(--relay-colors-blue-dark-10);
+  --relay-colors-blue-11: var(--relay-colors-blue-dark-11);
+  --relay-colors-blue-12: var(--relay-colors-blue-dark-12);
+
+  --relay-colors-grass-1: var(--relay-colors-grass-dark-1);
+  --relay-colors-grass-2: var(--relay-colors-grass-dark-2);
+  --relay-colors-grass-3: var(--relay-colors-grass-dark-3);
+  --relay-colors-grass-4: var(--relay-colors-grass-dark-4);
+  --relay-colors-grass-5: var(--relay-colors-grass-dark-5);
+  --relay-colors-grass-6: var(--relay-colors-grass-dark-6);
+  --relay-colors-grass-7: var(--relay-colors-grass-dark-7);
+  --relay-colors-grass-8: var(--relay-colors-grass-dark-8);
+  --relay-colors-grass-9: var(--relay-colors-grass-dark-9);
+  --relay-colors-grass-10: var(--relay-colors-grass-dark-10);
+  --relay-colors-grass-11: var(--relay-colors-grass-dark-11);
+  --relay-colors-grass-12: var(--relay-colors-grass-dark-12);
+
+  --relay-colors-gray-1: var(--relay-colors-gray-dark-1);
+  --relay-colors-gray-2: var(--relay-colors-gray-dark-2);
+  --relay-colors-gray-3: var(--relay-colors-gray-dark-3);
+  --relay-colors-gray-4: var(--relay-colors-gray-dark-4);
+  --relay-colors-gray-5: var(--relay-colors-gray-dark-5);
+  --relay-colors-gray-6: var(--relay-colors-gray-dark-6);
+  --relay-colors-gray-7: var(--relay-colors-gray-dark-7);
+  --relay-colors-gray-8: var(--relay-colors-gray-dark-8);
+  --relay-colors-gray-9: var(--relay-colors-gray-dark-9);
+  --relay-colors-gray-10: var(--relay-colors-gray-dark-10);
+  --relay-colors-gray-11: var(--relay-colors-gray-dark-11);
+  --relay-colors-gray-12: var(--relay-colors-gray-dark-12);
+
+  --relay-colors-slate-1: var(--relay-colors-slate-dark-1);
+  --relay-colors-slate-2: var(--relay-colors-slate-dark-2);
+  --relay-colors-slate-3: var(--relay-colors-slate-dark-3);
+  --relay-colors-slate-4: var(--relay-colors-slate-dark-4);
+  --relay-colors-slate-5: var(--relay-colors-slate-dark-5);
+  --relay-colors-slate-6: var(--relay-colors-slate-dark-6);
+  --relay-colors-slate-7: var(--relay-colors-slate-dark-7);
+  --relay-colors-slate-8: var(--relay-colors-slate-dark-8);
+  --relay-colors-slate-9: var(--relay-colors-slate-dark-9);
+  --relay-colors-slate-10: var(--relay-colors-slate-dark-10);
+  --relay-colors-slate-11: var(--relay-colors-slate-dark-11);
+  --relay-colors-slate-12: var(--relay-colors-slate-dark-12);
+
+  --relay-colors-tomato-1: var(--relay-colors-tomato-dark-1);
+  --relay-colors-tomato-2: var(--relay-colors-tomato-dark-2);
+  --relay-colors-tomato-3: var(--relay-colors-tomato-dark-3);
+  --relay-colors-tomato-4: var(--relay-colors-tomato-dark-4);
+  --relay-colors-tomato-5: var(--relay-colors-tomato-dark-5);
+  --relay-colors-tomato-6: var(--relay-colors-tomato-dark-6);
+  --relay-colors-tomato-7: var(--relay-colors-tomato-dark-7);
+  --relay-colors-tomato-8: var(--relay-colors-tomato-dark-8);
+  --relay-colors-tomato-9: var(--relay-colors-tomato-dark-9);
+  --relay-colors-tomato-10: var(--relay-colors-tomato-dark-10);
+  --relay-colors-tomato-11: var(--relay-colors-tomato-dark-11);
+  --relay-colors-tomato-12: var(--relay-colors-tomato-dark-12);
+
+  --relay-colors-yellow-1: var(--relay-colors-yellow-dark-1);
+  --relay-colors-yellow-2: var(--relay-colors-yellow-dark-2);
+  --relay-colors-yellow-3: var(--relay-colors-yellow-dark-3);
+  --relay-colors-yellow-4: var(--relay-colors-yellow-dark-4);
+  --relay-colors-yellow-5: var(--relay-colors-yellow-dark-5);
+  --relay-colors-yellow-6: var(--relay-colors-yellow-dark-6);
+  --relay-colors-yellow-7: var(--relay-colors-yellow-dark-7);
+  --relay-colors-yellow-8: var(--relay-colors-yellow-dark-8);
+  --relay-colors-yellow-9: var(--relay-colors-yellow-dark-9);
+  --relay-colors-yellow-10: var(--relay-colors-yellow-dark-10);
+  --relay-colors-yellow-11: var(--relay-colors-yellow-dark-11);
+  --relay-colors-yellow-12: var(--relay-colors-yellow-dark-12);
+}
+
+} /* end @layer base */
+
+/* ===================================================================
+   Custom Utility Classes — Border Shorthands
+   These CSS variables contain full border declarations (width + style + color)
+   and must be applied via the `border` shorthand property, not `border-width`.
+   =================================================================== */
+@layer utilities {
+  .relay-border-widget-card {
+    border: var(--relay-borders-widget-card-border);
+  }
+  .relay-border-widget {
+    border: var(--relay-borders-widget-border);
+  }
+  .relay-border-modal {
+    border: var(--relay-borders-modal-border);
+  }
+  .relay-border-dropdown {
+    border: var(--relay-borders-dropdown-border);
+  }
+}
diff --git a/packages/ui/src/utils/cn.ts b/packages/ui/src/utils/cn.ts
new file mode 100644
index 000000000..d32b0fe65
--- /dev/null
+++ b/packages/ui/src/utils/cn.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/packages/ui/tailwind.config.ts b/packages/ui/tailwind.config.ts
new file mode 100644
index 000000000..b3a6134ec
--- /dev/null
+++ b/packages/ui/tailwind.config.ts
@@ -0,0 +1,112 @@
+import type { Config } from 'tailwindcss'
+
+export default {
+  prefix: 'relay-',
+  darkMode: ['class', '[data-theme="dark"]'],
+  content: ['./src/**/*.{ts,tsx}'],
+  theme: {
+    screens: {
+      sm: '600px',
+      md: '900px',
+      lg: '1200px',
+      xl: '1400px',
+      bp300: '300px',
+      bp400: '400px',
+      bp500: '500px',
+      bp600: '600px',
+      bp700: '700px',
+      bp800: '800px',
+      bp900: '900px',
+      bp1000: '1000px',
+      bp1100: '1100px',
+      bp1200: '1200px',
+      bp1300: '1300px',
+      bp1400: '1400px',
+      bp1500: '1500px'
+    },
+    extend: {
+      spacing: {
+        1: '4px',
+        2: '8px',
+        3: '12px',
+        4: '16px',
+        5: '32px',
+        6: '64px',
+        'widget-card-section-gutter': '6px'
+      },
+      fontFamily: {
+        body: 'var(--relay-fonts-body)',
+        heading: 'var(--relay-fonts-heading)'
+      },
+      borderRadius: {
+        widget: 'var(--relay-radii-widget-border-radius)',
+        'widget-card': 'var(--relay-radii-widget-card-border-radius)',
+        modal: 'var(--relay-radii-modal-border-radius)',
+        input: 'var(--relay-radii-input-border-radius)',
+        dropdown: 'var(--relay-radii-dropdown-border-radius)',
+        'swap-btn': 'var(--relay-radii-widget-swap-currency-button-border-radius)'
+      },
+      boxShadow: {
+        widget: 'var(--relay-shadows-widget-box-shadow)'
+      },
+      keyframes: {
+        pulse: {
+          '50%': { opacity: '0.5' }
+        },
+        'pulse-shadow': {
+          '0%': { boxShadow: '0 0 0 0px var(--relay-colors-primary4)' },
+          '100%': { boxShadow: '0 0 0 6px var(--relay-colors-primary4)' }
+        },
+        spin: {
+          '100%': { transform: 'rotate(360deg)' }
+        },
+        collapsibleSlideDown: {
+          from: { height: '0' },
+          to: { height: 'var(--radix-collapsible-content-height)' }
+        },
+        collapsibleSlideUp: {
+          from: { height: 'var(--radix-collapsible-content-height)' },
+          to: { height: '0' }
+        },
+        'dialog-slide-up': {
+          from: { opacity: '0', bottom: '-100%' },
+          to: { opacity: '1', bottom: '0' }
+        },
+        'dialog-slide-down': {
+          from: { opacity: '1', bottom: '0' },
+          to: { opacity: '0', bottom: '-100%' }
+        },
+        'dialog-fade-in': {
+          from: { opacity: '0' },
+          to: { opacity: '1' }
+        },
+        'dialog-fade-out': {
+          from: { opacity: '1' },
+          to: { opacity: '0' }
+        },
+        'content-fade-in': {
+          from: { opacity: '0', transform: 'translateY(4px)' },
+          to: { opacity: '1', transform: 'translateY(0)' }
+        }
+      },
+      animation: {
+        pulse: 'pulse 3s ease-in-out infinite',
+        'pulse-shadow': 'pulse-shadow 1s ease-in-out infinite alternate',
+        spin: 'spin 1s linear infinite',
+        'collapsible-down':
+          'collapsibleSlideDown 300ms cubic-bezier(0.87, 0, 0.13, 1)',
+        'collapsible-up':
+          'collapsibleSlideUp 300ms cubic-bezier(0.87, 0, 0.13, 1)',
+        'dialog-slide-up': 'dialog-slide-up 200ms ease-out',
+        'dialog-slide-down': 'dialog-slide-down 200ms ease-in',
+        'dialog-fade-in': 'dialog-fade-in 100ms linear',
+        'dialog-fade-out': 'dialog-fade-out 100ms linear',
+        'content-fade-in': 'content-fade-in 300ms ease-out'
+      }
+    }
+  },
+  corePlugins: {
+    preflight: false
+  },
+  plugins: []
+} satisfies Config
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 93f616c64..1bc674d93 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -393,9 +393,6 @@ importers:
       '@radix-ui/react-visually-hidden':
         specifier: ^1.1.2
         version: 1.1.2(@types/react-dom@19.1.8(@types/react@19.1.11))(@types/react@19.1.11)(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
-      '@relayprotocol/relay-design-system':
-        specifier: workspace:^
-        version: link:../design-system
       '@relayprotocol/relay-kit-hooks':
         specifier: workspace:*
         version: link:../hooks
@@ -408,18 +405,18 @@ importers:
       axios:
         specifier: ^1.7.2
         version: 1.7.9
+      class-variance-authority:
+        specifier: ^0.7.0
+        version: 0.7.1
+      clsx:
+        specifier: ^2.1.0
+        version: 2.1.1
       dayjs:
         specifier: ^1.11.11
         version: 1.11.13
-      framer-motion:
-        specifier: ^11.2.10
-        version: 11.18.2(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
       fuse.js:
         specifier: ^7.0.0
         version: 7.1.0
-      pandacss-preset-radix-colors:
-        specifier: ^0.2.0
-        version: 0.2.0(@pandacss/dev@0.40.1(typescript@5.4.5))(@radix-ui/colors@0.1.9)
       qrcode.react:
         specifier: ^4.1.0
         version: 4.2.0(react@19.1.1)
@@ -429,6 +426,9 @@ importers:
       react-dom:
         specifier: ^19.0.0
         version: 19.1.1(react@19.1.1)
+      tailwind-merge:
+        specifier: ^2.2.0
+        version: 2.6.1
       usehooks-ts:
         specifier: ^3.1.0
         version: 3.1.1(react@19.1.1)
@@ -439,15 +439,9 @@ importers:
         specifier: ^2.15.6
         version: 2.15.6(@tanstack/query-core@5.66.4)(@tanstack/react-query@5.66.9(react@19.1.1))(@types/react@19.1.11)(bufferutil@4.0.9)(react@19.1.1)(typescript@5.4.5)(utf-8-validate@5.0.10)(viem@2.29.4(bufferutil@4.0.9)(typescript@5.4.5)(utf-8-validate@5.0.10)(zod@3.22.4))(zod@3.22.4)
     devDependencies:
-      '@csstools/postcss-cascade-layers':
-        specifier: ^4.0.6
-        version: 4.0.6(postcss@8.5.3)
       '@eslint/js':
         specifier: ^9.5.0
         version: 9.20.0
-      '@pandacss/dev':
-        specifier: ^0.40.0
-        version: 0.40.1(typescript@5.4.5)
       '@types/eslint__js':
         specifier: ^8.42.3
         version: 8.42.3
@@ -457,6 +451,9 @@ importers:
       '@types/react-dom':
         specifier: ^19.0.0
         version: 19.1.8(@types/react@19.1.11)
+      autoprefixer:
+        specifier: ^10.4.0
+        version: 10.4.24(postcss@8.5.3)
       eslint:
         specifier: ~8.57.0
         version: 8.57.1
@@ -481,6 +478,9 @@ importers:
       rimraf:
         specifier: ^5.0.5
         version: 5.0.10
+      tailwindcss:
+        specifier: ^3.4.0
+        version: 3.4.19
       typescript:
         specifier: 5.4.5
         version: 5.4.5
@@ -526,18 +526,9 @@ packages:
   '@adraffy/ens-normalize@1.9.0':
     resolution: {integrity: sha512-iowxq3U30sghZotgl4s/oJRci6WPBfNO5YYgk2cIOMCHr3LeGPcsZjCEr+33Q4N+oV3OABDAtA+pyvWjbvBifQ==}
 
-  '@babel/helper-string-parser@7.25.9':
-    resolution: {integrity: sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/helper-validator-identifier@7.25.9':
-    resolution: {integrity: sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==}
-    engines: {node: '>=6.9.0'}
-
-  '@babel/parser@7.26.9':
-    resolution: {integrity: sha512-81NWa1njQblgZbQHxWHpxxCzNsa3ZwvFqpUg7P+NNUU6f3UU2jBEg4OlF/J6rl8+PQGh1q6/zWScd001YwcA5A==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
+  '@alloc/quick-lru@5.2.0':
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
 
   '@babel/runtime@7.26.10':
     resolution: {integrity: sha512-2WJMeRQPHKSPemqk/awGrAiuFfzBmOIPXKizAsVhWH9YJqLZ0H+HS4c8loHGgW6utJ3E/ejXQUsiGaQy2NZ9Fw==}
@@ -547,10 +538,6 @@ packages:
     resolution: {integrity: sha512-aA63XwOkcl4xxQa3HjPMqOP6LiK0ZDv3mUPYEFXkpHbaFjtGggE1A61FjFzJnB+p7/oy2gA8E+rcBNl/zC1tMg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/types@7.26.9':
-    resolution: {integrity: sha512-Y3IR1cRnOxOCDvMmNiym7XpXQ93iGDDPHx+Zj+NM+rg0fBaShfQLkg+hKPaZCEvg5N/LeCo4+Rj/i3FuJsIQaw==}
-    engines: {node: '>=6.9.0'}
-
   '@base-org/account@1.1.1':
     resolution: {integrity: sha512-IfVJPrDPhHfqXRDb89472hXkpvJuQQR7FDI9isLPHEqSYt/45whIoBxSPgZ0ssTt379VhQo4+87PWI1DoLSfAQ==}
 
@@ -618,14 +605,6 @@ packages:
   '@changesets/write@0.4.0':
     resolution: {integrity: sha512-CdTLvIOPiCNuH71pyDu3rA+Q0n65cmAbXnwWH84rKGiFumFzkmHNT8KHTMEchcxN+Kl8I54xGUhJ7l3E7X396Q==}
 
-  '@clack/core@0.3.5':
-    resolution: {integrity: sha512-5cfhQNH+1VQ2xLQlmzXMqUoiaH0lRBq9/CLW9lTyMbuKLC3+xEK01tHVvyut++mLOn5urSHmkm6I0Lg9MaJSTQ==}
-
-  '@clack/prompts@0.7.0':
-    resolution: {integrity: sha512-0MhX9/B4iL6Re04jPrttDm+BsP8y6mS7byuv0BvXgdXhbV5PdlsHt55dvNsuBCPZ7xq1oTAOOuotR9NFbQyMSA==}
-    bundledDependencies:
-      - is-unicode-supported
-
   '@coinbase/wallet-sdk@3.9.3':
     resolution: {integrity: sha512-N/A2DRIf0Y3PHc1XAMvbBUu4zisna6qAdqABMZwBMNEfWrXpAwx16pZGkYCLGE+Rvv1edbcB2LYDRnACNcmCiw==}
 
@@ -635,18 +614,6 @@ packages:
   '@coinbase/wallet-sdk@4.3.7':
     resolution: {integrity: sha512-z6e5XDw6EF06RqkeyEa+qD0dZ2ZbLci99vx3zwDY//XO8X7166tqKJrR2XlQnzVmtcUuJtCd5fCvr9Cu6zzX7w==}
 
-  '@csstools/postcss-cascade-layers@4.0.6':
-    resolution: {integrity: sha512-Xt00qGAQyqAODFiFEJNkTpSUz5VfYqnDLECdlA/Vv17nl/OIV5QfTRHGAXrBGG5YcJyHpJ+GF9gF/RZvOQz4oA==}
-    engines: {node: ^14 || ^16 || >=18}
-    peerDependencies:
-      postcss: ^8.4
-
-  '@csstools/selector-specificity@3.1.1':
-    resolution: {integrity: sha512-a7cxGcJ2wIlMFLlh8z2ONm+715QkPHiyJcxwQlKOz/03GPw1COpfhcmC9wm4xlZfp//jWHNNMwzjtqHXVWU9KA==}
-    engines: {node: ^14 || ^16 || >=18}
-    peerDependencies:
-      postcss-selector-parser: ^6.0.13
-
   '@dynamic-labs-connectors/abstract-global-wallet-evm@4.4.3':
     resolution: {integrity: sha512-RWhLizlDfzrSCzw43BJMPYHJpmS+l14cSvLl3WWQk6Q7N9zWlqgenmjXG6KP+p33a+8c9JSFJcV3lJ/z+dkhVw==}
     peerDependencies:
@@ -854,276 +821,138 @@ packages:
   '@emnapi/runtime@1.4.5':
     resolution: {integrity: sha512-++LApOtY0pEEz1zrd9vy1/zXVaVJJ/EbAF3u0fXIzPJEDtnITsBGbbK0EkM72amhl/R5b+5xx0Y/QhcVOpuulg==}
 
-  '@esbuild/aix-ppc64@0.20.2':
-    resolution: {integrity: sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==}
-    engines: {node: '>=12'}
-    cpu: [ppc64]
-    os: [aix]
-
   '@esbuild/aix-ppc64@0.21.5':
     resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
     engines: {node: '>=12'}
     cpu: [ppc64]
     os: [aix]
 
-  '@esbuild/android-arm64@0.20.2':
-    resolution: {integrity: sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [android]
-
   '@esbuild/android-arm64@0.21.5':
     resolution: {integrity: sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [android]
 
-  '@esbuild/android-arm@0.20.2':
-    resolution: {integrity: sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [android]
-
   '@esbuild/android-arm@0.21.5':
     resolution: {integrity: sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==}
     engines: {node: '>=12'}
     cpu: [arm]
     os: [android]
 
-  '@esbuild/android-x64@0.20.2':
-    resolution: {integrity: sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [android]
-
   '@esbuild/android-x64@0.21.5':
     resolution: {integrity: sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [android]
 
-  '@esbuild/darwin-arm64@0.20.2':
-    resolution: {integrity: sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [darwin]
-
   '@esbuild/darwin-arm64@0.21.5':
     resolution: {integrity: sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [darwin]
 
-  '@esbuild/darwin-x64@0.20.2':
-    resolution: {integrity: sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [darwin]
-
   '@esbuild/darwin-x64@0.21.5':
     resolution: {integrity: sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [darwin]
 
-  '@esbuild/freebsd-arm64@0.20.2':
-    resolution: {integrity: sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [freebsd]
-
   '@esbuild/freebsd-arm64@0.21.5':
     resolution: {integrity: sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [freebsd]
 
-  '@esbuild/freebsd-x64@0.20.2':
-    resolution: {integrity: sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [freebsd]
-
   '@esbuild/freebsd-x64@0.21.5':
     resolution: {integrity: sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [freebsd]
 
-  '@esbuild/linux-arm64@0.20.2':
-    resolution: {integrity: sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [linux]
-
   '@esbuild/linux-arm64@0.21.5':
     resolution: {integrity: sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [linux]
 
-  '@esbuild/linux-arm@0.20.2':
-    resolution: {integrity: sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [linux]
-
   '@esbuild/linux-arm@0.21.5':
     resolution: {integrity: sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==}
     engines: {node: '>=12'}
     cpu: [arm]
     os: [linux]
 
-  '@esbuild/linux-ia32@0.20.2':
-    resolution: {integrity: sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [linux]
-
   '@esbuild/linux-ia32@0.21.5':
     resolution: {integrity: sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [linux]
 
-  '@esbuild/linux-loong64@0.20.2':
-    resolution: {integrity: sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==}
-    engines: {node: '>=12'}
-    cpu: [loong64]
-    os: [linux]
-
   '@esbuild/linux-loong64@0.21.5':
     resolution: {integrity: sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==}
     engines: {node: '>=12'}
     cpu: [loong64]
     os: [linux]
 
-  '@esbuild/linux-mips64el@0.20.2':
-    resolution: {integrity: sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==}
-    engines: {node: '>=12'}
-    cpu: [mips64el]
-    os: [linux]
-
   '@esbuild/linux-mips64el@0.21.5':
     resolution: {integrity: sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==}
     engines: {node: '>=12'}
     cpu: [mips64el]
     os: [linux]
 
-  '@esbuild/linux-ppc64@0.20.2':
-    resolution: {integrity: sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==}
-    engines: {node: '>=12'}
-    cpu: [ppc64]
-    os: [linux]
-
   '@esbuild/linux-ppc64@0.21.5':
     resolution: {integrity: sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==}
     engines: {node: '>=12'}
     cpu: [ppc64]
     os: [linux]
 
-  '@esbuild/linux-riscv64@0.20.2':
-    resolution: {integrity: sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==}
-    engines: {node: '>=12'}
-    cpu: [riscv64]
-    os: [linux]
-
   '@esbuild/linux-riscv64@0.21.5':
     resolution: {integrity: sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==}
     engines: {node: '>=12'}
     cpu: [riscv64]
     os: [linux]
 
-  '@esbuild/linux-s390x@0.20.2':
-    resolution: {integrity: sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==}
-    engines: {node: '>=12'}
-    cpu: [s390x]
-    os: [linux]
-
   '@esbuild/linux-s390x@0.21.5':
     resolution: {integrity: sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==}
     engines: {node: '>=12'}
     cpu: [s390x]
     os: [linux]
 
-  '@esbuild/linux-x64@0.20.2':
-    resolution: {integrity: sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [linux]
-
   '@esbuild/linux-x64@0.21.5':
     resolution: {integrity: sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [linux]
 
-  '@esbuild/netbsd-x64@0.20.2':
-    resolution: {integrity: sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [netbsd]
-
   '@esbuild/netbsd-x64@0.21.5':
     resolution: {integrity: sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [netbsd]
 
-  '@esbuild/openbsd-x64@0.20.2':
-    resolution: {integrity: sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [openbsd]
-
   '@esbuild/openbsd-x64@0.21.5':
     resolution: {integrity: sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [openbsd]
 
-  '@esbuild/sunos-x64@0.20.2':
-    resolution: {integrity: sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [sunos]
-
   '@esbuild/sunos-x64@0.21.5':
     resolution: {integrity: sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [sunos]
 
-  '@esbuild/win32-arm64@0.20.2':
-    resolution: {integrity: sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [win32]
-
   '@esbuild/win32-arm64@0.21.5':
     resolution: {integrity: sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [win32]
 
-  '@esbuild/win32-ia32@0.20.2':
-    resolution: {integrity: sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [win32]
-
   '@esbuild/win32-ia32@0.21.5':
     resolution: {integrity: sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [win32]
 
-  '@esbuild/win32-x64@0.20.2':
-    resolution: {integrity: sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [win32]
-
   '@esbuild/win32-x64@0.21.5':
     resolution: {integrity: sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==}
     engines: {node: '>=12'}
@@ -1410,144 +1239,170 @@ packages:
     resolution: {integrity: sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-arm64@1.2.0':
     resolution: {integrity: sha512-RXwd0CgG+uPRX5YYrkzKyalt2OJYRiJQ8ED/fi1tq9WQW2jsQIn0tqrlR5l5dr/rjqq6AHAxURhj2DVjyQWSOA==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-arm@1.0.5':
     resolution: {integrity: sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-arm@1.2.0':
     resolution: {integrity: sha512-mWd2uWvDtL/nvIzThLq3fr2nnGfyr/XMXlq8ZJ9WMR6PXijHlC3ksp0IpuhK6bougvQrchUAfzRLnbsen0Cqvw==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-ppc64@1.2.0':
     resolution: {integrity: sha512-Xod/7KaDDHkYu2phxxfeEPXfVXFKx70EAFZ0qyUdOjCcxbjqyJOEUpDe6RIyaunGxT34Anf9ue/wuWOqBW2WcQ==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-s390x@1.0.4':
     resolution: {integrity: sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-s390x@1.2.0':
     resolution: {integrity: sha512-eMKfzDxLGT8mnmPJTNMcjfO33fLiTDsrMlUVcp6b96ETbnJmd4uvZxVJSKPQfS+odwfVaGifhsB07J1LynFehw==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-x64@1.0.4':
     resolution: {integrity: sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linux-x64@1.2.0':
     resolution: {integrity: sha512-ZW3FPWIc7K1sH9E3nxIGB3y3dZkpJlMnkk7z5tu1nSkBoCgw2nSRTFHI5pB/3CQaJM0pdzMF3paf9ckKMSE9Tg==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-libvips-linuxmusl-arm64@1.0.4':
     resolution: {integrity: sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-libvips-linuxmusl-arm64@1.2.0':
     resolution: {integrity: sha512-UG+LqQJbf5VJ8NWJ5Z3tdIe/HXjuIdo4JeVNADXBFuG7z9zjoegpzzGIyV5zQKi4zaJjnAd2+g2nna8TZvuW9Q==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-libvips-linuxmusl-x64@1.0.4':
     resolution: {integrity: sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-libvips-linuxmusl-x64@1.2.0':
     resolution: {integrity: sha512-SRYOLR7CXPgNze8akZwjoGBoN1ThNZoqpOgfnOxmWsklTGVfJiGJoC/Lod7aNMGA1jSsKWM1+HRX43OP6p9+6Q==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-linux-arm64@0.33.5':
     resolution: {integrity: sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-arm64@0.34.3':
     resolution: {integrity: sha512-QdrKe3EvQrqwkDrtuTIjI0bu6YEJHTgEeqdzI3uWJOH6G1O8Nl1iEeVYRGdj1h5I21CqxSvQp1Yv7xeU3ZewbA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-arm@0.33.5':
     resolution: {integrity: sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-arm@0.34.3':
     resolution: {integrity: sha512-oBK9l+h6KBN0i3dC8rYntLiVfW8D8wH+NPNT3O/WBHeW0OQWCjfWksLUaPidsrDKpJgXp3G3/hkmhptAW0I3+A==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-ppc64@0.34.3':
     resolution: {integrity: sha512-GLtbLQMCNC5nxuImPR2+RgrviwKwVql28FWZIW1zWruy6zLgA5/x2ZXk3mxj58X/tszVF69KK0Is83V8YgWhLA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-s390x@0.33.5':
     resolution: {integrity: sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-s390x@0.34.3':
     resolution: {integrity: sha512-3gahT+A6c4cdc2edhsLHmIOXMb17ltffJlxR0aC2VPZfwKoTGZec6u5GrFgdR7ciJSsHT27BD3TIuGcuRT0KmQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-x64@0.33.5':
     resolution: {integrity: sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linux-x64@0.34.3':
     resolution: {integrity: sha512-8kYso8d806ypnSq3/Ly0QEw90V5ZoHh10yH0HnrzOCr6DKAPI6QVHvwleqMkVQ0m+fc7EH8ah0BB0QPuWY6zJQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@img/sharp-linuxmusl-arm64@0.33.5':
     resolution: {integrity: sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-linuxmusl-arm64@0.34.3':
     resolution: {integrity: sha512-vAjbHDlr4izEiXM1OTggpCcPg9tn4YriK5vAjowJsHwdBIdx0fYRsURkxLG2RLm9gyBq66gwtWI8Gx0/ov+JKQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-linuxmusl-x64@0.33.5':
     resolution: {integrity: sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-linuxmusl-x64@0.34.3':
     resolution: {integrity: sha512-gCWUn9547K5bwvOn9l5XGAEjVTTRji4aPTqLzGXHvIr6bIDZKNTA34seMPgM0WmSf+RYBH411VavCejp3PkOeQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@img/sharp-wasm32@0.33.5':
     resolution: {integrity: sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==}
@@ -1808,24 +1663,28 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@next/swc-linux-arm64-musl@15.5.7':
     resolution: {integrity: sha512-nfymt+SE5cvtTrG9u1wdoxBr9bVB7mtKTcj0ltRn6gkP/2Nu1zM5ei8rwP9qKQP0Y//umK+TtkKgNtfboBxRrw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@next/swc-linux-x64-gnu@15.5.7':
     resolution: {integrity: sha512-hvXcZvCaaEbCZcVzcY7E1uXN9xWZfFvkNHwbe/n4OkRhFWrs1J1QV+4U1BN06tXLdaS4DazEGXwgqnu/VMcmqw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@next/swc-linux-x64-musl@15.5.7':
     resolution: {integrity: sha512-4IUO539b8FmF0odY6/SqANJdgwn1xs1GkPO5doZugwZ3ETF6JUdckk7RGmsfSf7ws8Qb2YB5It33mvNL/0acqA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@next/swc-win32-arm64-msvc@15.5.7':
     resolution: {integrity: sha512-CpJVTkYI3ZajQkC5vajM7/ApKJUOlm6uP4BknM3XKvJ7VXAvCqSjSLmM0LKdYzn6nBJVSjdclx8nYJSa3xlTgQ==}
@@ -1944,52 +1803,6 @@ packages:
   '@openzeppelin/contracts@4.9.6':
     resolution: {integrity: sha512-xSmezSupL+y9VkHZJGDoCBpmnB2ogM13ccaYDWqJTfS3dbuHkgjuwDFUmaFauBCboQMGB/S5UqUl2y54X99BmA==}
 
-  '@pandacss/config@0.40.1':
-    resolution: {integrity: sha512-Pzm0GpsrV8OoXgrBJ+V7aaKG39ytbLex1XsRKY6JThkAAz0rE2P8k4nbSQU8WXuG7mbOijBKYybi/cxRAIUL1w==}
-
-  '@pandacss/core@0.40.1':
-    resolution: {integrity: sha512-12Eu6ReCYZYu6Y/cX5YvGUS8eJkCVJYR8njWAqJmSg+rg/vqmkAM+KL8qdYw95WiTzih1dPaSq+MqkiX3N9hUg==}
-
-  '@pandacss/dev@0.40.1':
-    resolution: {integrity: sha512-61vy1KjwfVdWTaQtwY4ghmvwPhcRRVnfwpAG5S/kogw0p1rIp7a8vDHi31CjbPxO4qccjhNNzVVGDzaqnzHf+w==}
-    hasBin: true
-
-  '@pandacss/extractor@0.40.1':
-    resolution: {integrity: sha512-eHTAiNBLPxOYsf4pqbwhxjqejzaYx6EGFvdxznKohO++ihPgoph4/zl6WZx+/Ncb/IcHKMXpIBghQmmE68LIyA==}
-
-  '@pandacss/generator@0.40.1':
-    resolution: {integrity: sha512-kidMyFPVuJYue4uah9uL4iNdhCPikTPCsc8j9IwrcrKPT6uhLqdeBQEF3Kxs0Pik8v+cMaDV0BSSceCujxHzhA==}
-
-  '@pandacss/is-valid-prop@0.40.1':
-    resolution: {integrity: sha512-YcWecr6zecEiCqRi/zoCONcokG64T2LiEOCEYZMhqX9ma/KsKNd4oZO6r001/1ZUSBSVD6ZIb95h/N4gctfayg==}
-
-  '@pandacss/logger@0.40.1':
-    resolution: {integrity: sha512-UnxDZGWj4e2Cl9XJWBp5WTJiWmfXIbyYLXt0tOlVIGTiBfZtsqVnT/uD3g71QSJgyUCyYqCx/zHJTIsKIm2/HQ==}
-
-  '@pandacss/node@0.40.1':
-    resolution: {integrity: sha512-r00E85hAFmU49H0JgEwRqf2R5P6CIAydLcTTGrqYEvC8NrP2Y2vsnNENYwDT6PChAzjIZxtZK5myYki3qkfWTA==}
-
-  '@pandacss/parser@0.40.1':
-    resolution: {integrity: sha512-tcBw29Qzxe7BSyf3G76d4ux8rCnqzg4kIApOZQFPrPLGzkc6/TO59HQr3gz8YQbD0HhO2QzjnUkVwCuOpCJoOQ==}
-
-  '@pandacss/postcss@0.40.1':
-    resolution: {integrity: sha512-PunPSjbDYRw9ljLf4iGKpndAxUkDhptaVATVhHALA1zC31qjF86/ZQRTvMpbBKkIi18x0WKW4lQVA7NFb7+iYg==}
-
-  '@pandacss/preset-base@0.40.1':
-    resolution: {integrity: sha512-uPevTES6MonoCSLa5BLHcIkj0hJE6Nynlnaqyen4BPESJFh+ylzVjQa8K3RpOAtD6phVgWsjf21cjmKfnxo+0Q==}
-
-  '@pandacss/preset-panda@0.40.1':
-    resolution: {integrity: sha512-rNw+mfU3rhQzOgUkKTZqQ6y0qRMua5Z8AVuWUrSPYCERsxmbdAVrdoOfkCjiZ+Kf+nWGumlDca9IWxI5vYlSMw==}
-
-  '@pandacss/shared@0.40.1':
-    resolution: {integrity: sha512-FBI2AaaYQZoA7TU/qa9z4FVGU3eQDC/cXobTOzmvewpVb+kFSjPo9hralYAViq+5EFRAJOFM7NMqQH0Enitjnw==}
-
-  '@pandacss/token-dictionary@0.40.1':
-    resolution: {integrity: sha512-vpeGGJMd1dasGD2siEqSxtg9wAYNHVnafJSL+QCtarRSwVf9/ETw48md6CvGX7Iq6mfUpNJaa1JkBmhnQUVuNg==}
-
-  '@pandacss/types@0.40.1':
-    resolution: {integrity: sha512-znHd2Qc9zv/3e86CkM04Dv5b3dTymucfAvbvkUrvz4AT1KME7BQ1YEQRpaXgdE4UI5waV+Rv0Tx7Dmtt//4yWQ==}
-
   '@paulmillr/qr@0.2.1':
     resolution: {integrity: sha512-IHnV6A+zxU7XwmKFinmYjUcwlyK9+xkG3/s9KcQhI9BjQKycrJ1JRO+FbNYPwZiPKW3je/DR0k7w8/gLa5eaxQ==}
     deprecated: 'The package is now available as "qr": npm install qr'
@@ -2462,51 +2275,61 @@ packages:
     resolution: {integrity: sha512-A4iphFGNkWRd+5m3VIGuqHnG3MVnqKe7Al57u9mwgbyZ2/xF9Jio72MaY7xxh+Y87VAHmGQr73qoKL9HPbXj1g==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.34.8':
     resolution: {integrity: sha512-S0lqKLfTm5u+QTxlFiAnb2J/2dgQqRy/XvziPtDd1rKZFXHTyYLoVL58M/XFwDI01AQCDIevGLbQrMAtdyanpA==}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.34.8':
     resolution: {integrity: sha512-jpz9YOuPiSkL4G4pqKrus0pn9aYwpImGkosRKwNi+sJSkz+WU3anZe6hi73StLOQdfXYXC7hUfsQlTnjMd3s1A==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.34.8':
     resolution: {integrity: sha512-KdSfaROOUJXgTVxJNAZ3KwkRc5nggDk+06P6lgi1HLv1hskgvxHUKZ4xtwHkVYJ1Rep4GNo+uEfycCRRxht7+Q==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-loongarch64-gnu@4.34.8':
     resolution: {integrity: sha512-NyF4gcxwkMFRjgXBM6g2lkT58OWztZvw5KkV2K0qqSnUEqCVcqdh2jN4gQrTn/YUpAcNKyFHfoOZEer9nwo6uQ==}
     cpu: [loong64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-powerpc64le-gnu@4.34.8':
     resolution: {integrity: sha512-LMJc999GkhGvktHU85zNTDImZVUCJ1z/MbAJTnviiWmmjyckP5aQsHtcujMjpNdMZPT2rQEDBlJfubhs3jsMfw==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.34.8':
     resolution: {integrity: sha512-xAQCAHPj8nJq1PI3z8CIZzXuXCstquz7cIOL73HHdXiRcKk8Ywwqtx2wrIy23EcTn4aZ2fLJNBB8d0tQENPCmw==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-s390x-gnu@4.34.8':
     resolution: {integrity: sha512-DdePVk1NDEuc3fOe3dPPTb+rjMtuFw89gw6gVWxQFAuEqqSdDKnrwzZHrUYdac7A7dXl9Q2Vflxpme15gUWQFA==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.34.8':
     resolution: {integrity: sha512-8y7ED8gjxITUltTUEJLQdgpbPh1sUQ0kMTmufRF/Ns5tI9TNMNlhWtmPKKHCU0SilX+3MJkZ0zERYYGIVBYHIA==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.34.8':
     resolution: {integrity: sha512-SCXcP0ZpGFIe7Ge+McxY5zKxiEI5ra+GT3QRxL0pMMtxPfpyLAKleZODi1zdRHkz5/BhueUrYtYVgubqe9JBNQ==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-win32-arm64-msvc@4.34.8':
     resolution: {integrity: sha512-YHYsgzZgFJzTRbth4h7Or0m5O74Yda+hLin0irAIobkLQFRQd1qWmnoVfwmKm9TXIZVAD0nZ+GEb2ICicLyCnQ==}
@@ -2828,9 +2651,6 @@ packages:
   '@tronweb3/walletconnect-tron@3.0.0':
     resolution: {integrity: sha512-aYFbUsZHYumdGXt+1VN4mN9Cjr1+GWYr7cXOLawoQ1WqiHOlAiovSnsTpGhUFLn2FZV8m6rdnXTZ59S/0Mv9mw==}
 
-  '@ts-morph/common@0.22.0':
-    resolution: {integrity: sha512-HqNBuV/oIlMKdkLshXd1zKBqNQCsuPEsgQOkfFQ/eUKjRlwndXW1AjN9LVkBEIukm00gGXSRmfkl0Wv5VXLnlw==}
-
   '@turnkey/api-key-stamper@0.4.7':
     resolution: {integrity: sha512-/0/kW7v+uCnmHnGMoHSXn4Vb/MxLAIivGxX/T0L4vVoIiJalQmqcCtgiWnPWZDiJNGjMKp+jd/8j6VXgbVVozg==}
     engines: {node: '>=18.0.0'}
@@ -2914,9 +2734,6 @@ packages:
   '@types/node@12.20.55':
     resolution: {integrity: sha512-J8xLz7q2OFulZ2cyGTLE1TbbZcjpno7FaN6zdJNrgAdrJ+DZzh/uFR6YrTb4C+nXakvud8Q4+rbhoIWlYQbUFQ==}
 
-  '@types/node@17.0.45':
-    resolution: {integrity: sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==}
-
   '@types/node@22.13.4':
     resolution: {integrity: sha512-ywP2X0DYtX3y08eFVx5fNIw7/uIv8hYUKgXoK8oayJlLnKcRfEYCxWMVE1XagUdVtCJlZT1AU4LXEABW+L1Peg==}
 
@@ -3024,24 +2841,9 @@ packages:
   '@vitest/utils@1.6.1':
     resolution: {integrity: sha512-jOrrUvXM4Av9ZWiG1EajNto0u96kWAhJ1LmPmJhXXQx/32MecEKd10pOLYgS2BQx1TgkGhloPU1ArDW2vvaY6g==}
 
-  '@vue/compiler-core@3.4.19':
-    resolution: {integrity: sha512-gj81785z0JNzRcU0Mq98E56e4ltO1yf8k5PQ+tV/7YHnbZkrM0fyFyuttnN8ngJZjbpofWE/m4qjKBiLl8Ju4w==}
-
-  '@vue/compiler-dom@3.4.19':
-    resolution: {integrity: sha512-vm6+cogWrshjqEHTzIDCp72DKtea8Ry/QVpQRYoyTIg9k7QZDX6D8+HGURjtmatfgM8xgCFtJJaOlCaRYRK3QA==}
-
-  '@vue/compiler-sfc@3.4.19':
-    resolution: {integrity: sha512-LQ3U4SN0DlvV0xhr1lUsgLCYlwQfUfetyPxkKYu7dkfvx7g3ojrGAkw0AERLOKYXuAGnqFsEuytkdcComei3Yg==}
-
-  '@vue/compiler-ssr@3.4.19':
-    resolution: {integrity: sha512-P0PLKC4+u4OMJ8sinba/5Z/iDT84uMRRlrWzadgLA69opCpI1gG4N55qDSC+dedwq2fJtzmGald05LWR5TFfLw==}
-
   '@vue/reactivity@3.5.17':
     resolution: {integrity: sha512-l/rmw2STIscWi7SNJp708FK4Kofs97zc/5aEPQh4bOsReD/8ICuBcEmS7KGwDj5ODQLYWVN2lNibKJL1z5b+Lw==}
 
-  '@vue/shared@3.4.19':
-    resolution: {integrity: sha512-/KliRRHMF6LoiThEy+4c1Z4KB/gbPrGjWwJR+crg2otgrf/egKzRaCPvJ51S5oetgsgXLfc4Rm5ZgrKHZrtMSw==}
-
   '@vue/shared@3.5.17':
     resolution: {integrity: sha512-CabR+UN630VnsJO/jHWYBC1YVXyMq94KKp6iF5MQgZJs5I8cmjw6oVMO1oDbtBkENSHSSn/UadWlW/OAgdmKrg==}
 
@@ -3417,10 +3219,16 @@ packages:
     resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
     engines: {node: '>=12'}
 
+  any-promise@1.3.0:
+    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
+
   anymatch@3.1.3:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
 
+  arg@5.0.2:
+    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
+
   argon2id@1.0.1:
     resolution: {integrity: sha512-rsiD3lX+0L0CsiZARp3bf9EGxprtuWAT7PpiJd+Fk53URV0/USOQkBIP1dLTV8t6aui0ECbymQ9W9YCcTd6XgA==}
 
@@ -3490,6 +3298,13 @@ packages:
     resolution: {integrity: sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==}
     engines: {node: '>=8.0.0'}
 
+  autoprefixer@10.4.24:
+    resolution: {integrity: sha512-uHZg7N9ULTVbutaIsDRoUkoS8/h3bdsmVJYZ5l3wv8Cp/6UIIoRDm90hZ+BwxUj/hGBEzLxdHNSKuFpn8WOyZw==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
+
   available-typed-arrays@1.0.7:
     resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
     engines: {node: '>= 0.4'}
@@ -3531,6 +3346,11 @@ packages:
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
+  baseline-browser-mapping@2.10.0:
+    resolution: {integrity: sha512-lIyg0szRfYbiy67j9KN8IyeD7q7hcmqnJ1ddWmNt19ItGpNN64mnllmxUNFIOdOm6by97jlL6wfpTTJrmnjWAA==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
   bech32@1.1.4:
     resolution: {integrity: sha512-s0IrSOzLlbvX7yp4WBfPITzpAU8sqQcpsmwXDiKwrG4r491vwCO/XpejasRNl0piBMe/DvP4Tz0mIS/X1DPJBQ==}
 
@@ -3609,8 +3429,8 @@ packages:
   brorand@1.1.0:
     resolution: {integrity: sha512-cKV8tMCEpQs4hK/ik71d6LrPOnpkpGBR0wzxqr68g2m/LB2GxVYQroAjMJZRVM1Y4BCjCKc3vAamxSzOY2RP+w==}
 
-  browserslist@4.23.0:
-    resolution: {integrity: sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==}
+  browserslist@4.28.1:
+    resolution: {integrity: sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
@@ -3639,9 +3459,6 @@ packages:
     resolution: {integrity: sha512-WDtdLmJvAuNNPzByAYpRo2rF1Mmradw6gvWsQKf63476DDXmomT9zUiGypLcG4ibIM67vhAj8jJRdbmEws2Aqw==}
     engines: {node: '>=6.14.2'}
 
-  bundle-n-require@1.1.1:
-    resolution: {integrity: sha512-EB2wFjXF106LQLe/CYnKCMCdLeTW47AtcEtUfiqAOgr2a08k0+YgRklur2aLfEYHlhz6baMskZ8L2U92Hh0vyA==}
-
   bundle-name@4.1.0:
     resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
     engines: {node: '>=18'}
@@ -3670,16 +3487,20 @@ packages:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
 
+  camelcase-css@2.0.1:
+    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
+    engines: {node: '>= 6'}
+
   camelcase@5.3.1:
     resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
     engines: {node: '>=6'}
 
-  caniuse-api@3.0.0:
-    resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
-
   caniuse-lite@1.0.30001700:
     resolution: {integrity: sha512-2S6XIXwaE7K7erT8dY+kLQcpa5ms63XlRkMkReXjle+kf6c5g38vyMl+Z5y8dSxOFDhcFe+nxnn261PLxBSQsQ==}
 
+  caniuse-lite@1.0.30001770:
+    resolution: {integrity: sha512-x/2CLQ1jHENRbHg5PSId2sXq1CIO1CISvwWAj027ltMVG2UNgW+w9oH2+HzgEIRFembL8bUlXtfbBHR1fCg2xw==}
+
   chai@4.5.0:
     resolution: {integrity: sha512-RITGBfijLkBddZvnn8jdqoTypxvqbOLYQkGGxXzeFjVHvudaPw0HNFD9x928/eUwYWd2dPCugVqspGALTZZQKw==}
     engines: {node: '>=4'}
@@ -3710,6 +3531,9 @@ packages:
     resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==}
     engines: {node: '>=8'}
 
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
   client-only@0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
 
@@ -3724,8 +3548,9 @@ packages:
     resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==}
     engines: {node: '>=6'}
 
-  code-block-writer@12.0.0:
-    resolution: {integrity: sha512-q4dMFMlXtKR3XNBHyMHt/3pwYNA69EDk00lloMOaaUMKPUXBw6lpXtbu3MMVG6/uOihGnRDOlkyqsONEUj60+w==}
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
 
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
@@ -3756,6 +3581,10 @@ packages:
   commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
+  commander@4.1.1:
+    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
+    engines: {node: '>= 6'}
+
   commander@5.1.0:
     resolution: {integrity: sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==}
     engines: {node: '>= 6'}
@@ -3813,10 +3642,6 @@ packages:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
-  crosspath@2.0.0:
-    resolution: {integrity: sha512-ju88BYCQ2uvjO2bR+SsgLSTwTSctU+6Vp2ePbKPgSCZyy4MWZxYsT738DlKVRE5utUjobjPRm1MkTYKJxCmpTA==}
-    engines: {node: '>=14.9.0'}
-
   crossws@0.3.4:
     resolution: {integrity: sha512-uj0O1ETYX1Bh6uSgktfPvwDiPYGQ3aI4qVsaC/LWpkIzGj1nUYm5FK3K+t11oOlpN01lGbprFCH4wBlKdJjVgw==}
 
@@ -3825,12 +3650,6 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
-  cssnano-utils@5.0.0:
-    resolution: {integrity: sha512-Uij0Xdxc24L6SirFr25MlwC2rCFX6scyUmuKpzI+JQ7cyqDEwD42fJ0xfB3yLfOnRDU5LKGgjQ9FA6LYh76GWQ==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.31
-
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
@@ -3976,6 +3795,9 @@ packages:
   detect-node-es@1.1.0:
     resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
 
+  didyoumean@1.2.2:
+    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
+
   diff-sequences@29.6.3:
     resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -3987,6 +3809,9 @@ packages:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
 
+  dlv@1.1.3:
+    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
+
   doctrine@2.1.0:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
     engines: {node: '>=0.10.0'}
@@ -4015,8 +3840,8 @@ packages:
   effect@3.17.13:
     resolution: {integrity: sha512-JMz5oBxs/6mu4FP9Csjub4jYMUwMLrp+IzUmSDVIzn2NoeoyOXMl7x1lghfr3dLKWffWrdnv/d8nFFdgrHXPqw==}
 
-  electron-to-chromium@1.5.102:
-    resolution: {integrity: sha512-eHhqaja8tE/FNpIiBrvBjFV/SSKpyWHLvxuR9dPTdo+3V9ppdLmFB7ZZQ98qNovcngPLYIz0oOBF9P0FfZef5Q==}
+  electron-to-chromium@1.5.302:
+    resolution: {integrity: sha512-sM6HAN2LyK82IyPBpznDRqlTQAtuSaO+ShzFiWTvoMJLHyZ+Y39r8VMfHzwbU8MVBzQ4Wdn85+wlZl2TLGIlwg==}
 
   elliptic@6.5.4:
     resolution: {integrity: sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==}
@@ -4052,10 +3877,6 @@ packages:
     resolution: {integrity: sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==}
     engines: {node: '>=8.6'}
 
-  entities@4.5.0:
-    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
-    engines: {node: '>=0.12'}
-
   es-abstract@1.23.9:
     resolution: {integrity: sha512-py07lI0wjxAC/DcfK1S6G7iANonniZwTISvdPzk9hzeH0IZIshbuuFxLIU96OyF89Yb9hiqWn8M/bY83KY5vzA==}
     engines: {node: '>= 0.4'}
@@ -4100,20 +3921,11 @@ packages:
   es6-promisify@5.0.0:
     resolution: {integrity: sha512-C+d6UdsYDk0lMebHNR4S2NybQMMngAOnOwYBQjTOiv0MkoJMP0Myw2mgpDLBcpfCmRLxyFqYhS/CfOENq4SJhQ==}
 
-  esbuild@0.20.2:
-    resolution: {integrity: sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==}
-    engines: {node: '>=12'}
-    hasBin: true
-
   esbuild@0.21.5:
     resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==}
     engines: {node: '>=12'}
     hasBin: true
 
-  escalade@3.1.2:
-    resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==}
-    engines: {node: '>=6'}
-
   escalade@3.2.0:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
@@ -4206,9 +4018,6 @@ packages:
     resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
     engines: {node: '>=4.0'}
 
-  estree-walker@2.0.2:
-    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
-
   estree-walker@3.0.3:
     resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
 
@@ -4287,10 +4096,6 @@ packages:
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
-  fast-glob@3.3.2:
-    resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
-    engines: {node: '>=8.6.0'}
-
   fast-glob@3.3.3:
     resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
     engines: {node: '>=8.6.0'}
@@ -4317,6 +4122,15 @@ packages:
   fastq@1.19.0:
     resolution: {integrity: sha512-7SFSRCNjBQIZH/xZR3iy5iQYR8aGBE0h3VG6/cwlbrpdciNYBMotQav8c1XI3HjHH+NikUpP53nPdlZSdWmFzA==}
 
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
   fetch-blob@3.2.0:
     resolution: {integrity: sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==}
     engines: {node: ^12.20 || >= 14.13}
@@ -4328,16 +4142,9 @@ packages:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
 
-  file-size@1.0.0:
-    resolution: {integrity: sha512-tLIdonWTpABkU6Axg2yGChYdrOsy4V8xcm0IcyAP8fSsu6jiXLm5pgs083e4sq5fzNRZuAYolUbZyYmPvCKfwQ==}
-
   file-uri-to-path@1.0.0:
     resolution: {integrity: sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==}
 
-  filesize@10.1.2:
-    resolution: {integrity: sha512-Dx770ai81ohflojxhU+oG+Z2QGvKdYxgEr9OSA8UVrqhwNHjfH9A8f5NKfg83fEH8ZFA5N5llJo5T3PIoZ4CRA==}
-    engines: {node: '>= 10.4.0'}
-
   fill-range@7.1.1:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
@@ -4358,9 +4165,6 @@ packages:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
 
-  find-yarn-workspace-root2@1.2.16:
-    resolution: {integrity: sha512-hr6hb1w8ePMpPVUK39S4RlwJzi+xPLuVuG8XlwXU3KD5Yn3qgBWVfy3AzNlDhWvE1EORCE65/Qm26rFQt3VLVA==}
-
   flat-cache@3.2.0:
     resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -4413,28 +4217,13 @@ packages:
   fp-ts@2.16.11:
     resolution: {integrity: sha512-LaI+KaX2NFkfn1ZGHoKCmcfv7yrZsC3b8NtWsTVQeHkq4F27vI5igUuO53sxqDEa2gNQMHFPmpojDw/1zmUK7w==}
 
-  framer-motion@11.18.2:
-    resolution: {integrity: sha512-5F5Och7wrvtLVElIpclDT0CBzMVg3dL22B64aZwHtsIY8RB4mXICLrkajK4G9R+ieSAGcgrLeae2SeUTg2pr6w==}
-    peerDependencies:
-      '@emotion/is-prop-valid': '*'
-      react: ^18.0.0 || ^19.0.0
-      react-dom: ^18.0.0 || ^19.0.0
-    peerDependenciesMeta:
-      '@emotion/is-prop-valid':
-        optional: true
-      react:
-        optional: true
-      react-dom:
-        optional: true
+  fraction.js@5.3.4:
+    resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
 
   fresh@0.5.2:
     resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
     engines: {node: '>= 0.6'}
 
-  fs-extra@11.2.0:
-    resolution: {integrity: sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==}
-    engines: {node: '>=14.14'}
-
   fs-extra@7.0.1:
     resolution: {integrity: sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==}
     engines: {node: '>=6 <7 || >=8'}
@@ -4589,9 +4378,6 @@ packages:
   hoist-non-react-statics@3.3.2:
     resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
 
-  hookable@5.5.3:
-    resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
-
   hpke-js@1.6.1:
     resolution: {integrity: sha512-lIYfHM7jxUBamBHFxuy7iZbDMgDhIqW/T9DTg1dNnIZbwheZ9p3MWe+5IZXj2p2Jmqcixkh9IdAhjv/H4CMY2A==}
     engines: {node: '>=16.0.0'}
@@ -4807,10 +4593,6 @@ packages:
     resolution: {integrity: sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==}
     engines: {node: '>= 0.4'}
 
-  is-what@4.1.16:
-    resolution: {integrity: sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==}
-    engines: {node: '>=12.13'}
-
   is-windows@1.0.2:
     resolution: {integrity: sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==}
     engines: {node: '>=0.10.0'}
@@ -4863,14 +4645,15 @@ packages:
   jackspeak@3.4.3:
     resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
 
-  javascript-stringify@2.1.0:
-    resolution: {integrity: sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg==}
-
   jayson@4.1.3:
     resolution: {integrity: sha512-LtXh5aYZodBZ9Fc3j6f2w+MTNcnxteMOrb+QgIouguGOulWi0lieEkOUg+HkjjFs0DGoWDds6bi4E9hpNFLulQ==}
     engines: {node: '>=8'}
     hasBin: true
 
+  jiti@1.21.7:
+    resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
+    hasBin: true
+
   js-base64@3.7.8:
     resolution: {integrity: sha512-hNngCeKxIUQiEUN3GPJOkz4wF/YvdUdbNL9hsBcMQTkKzboD7T/q3OYOuuPZLUE6dBxSGpwhk5mwuDud7JVAow==}
 
@@ -4914,15 +4697,9 @@ packages:
     resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
     hasBin: true
 
-  jsonc-parser@3.3.1:
-    resolution: {integrity: sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==}
-
   jsonfile@4.0.0:
     resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}
 
-  jsonfile@6.1.0:
-    resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
-
   jsonparse@1.3.1:
     resolution: {integrity: sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==}
     engines: {'0': node >= 0.2.0}
@@ -4944,10 +4721,6 @@ packages:
   keyvaluestorage-interface@1.0.0:
     resolution: {integrity: sha512-8t6Q3TclQ4uZynJY9IGr2+SsIGwK9JHcO6ootkHCGA0CrQCRy+VkouYNO2xicET6b9al7QKzpebNow+gkpCL8g==}
 
-  kleur@4.1.5:
-    resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
-    engines: {node: '>=6'}
-
   levn@0.4.1:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
@@ -4981,24 +4754,28 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.23.0:
     resolution: {integrity: sha512-cU00LGb6GUXCwof6ACgSMKo3q7XYbsyTj0WsKHLi1nw7pV0NCq8nFTn6ZRBYLoKiV8t+jWl0Hv8KkgymmK5L5g==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.23.0:
     resolution: {integrity: sha512-q4jdx5+5NfB0/qMbXbOmuC6oo7caPnFghJbIAV90cXZqgV8Am3miZhC4p+sQVdacqxfd+3nrle4C8icR3p1AYw==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.23.0:
     resolution: {integrity: sha512-G9Ri3qpmF4qef2CV/80dADHKXRAQeQXpQTLx7AiQrBYQHqBjB75oxqj06FCIe5g4hNCqLPnM9fsO4CyiT1sFSQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-win32-x64-msvc@1.23.0:
     resolution: {integrity: sha512-1rcBDJLU+obPPJM6qR5fgBUiCdZwZLafZM5f9kwjFLkb/UBNIzmae39uCSmh71nzPCTXZqHbvwu23OWnWEz+eg==}
@@ -5010,6 +4787,13 @@ packages:
     resolution: {integrity: sha512-SEArWKMHhqn/0QzOtclIwH5pXIYQOUEkF8DgICd/105O+GCgd7jxjNod/QPnBCSWvpRHQBGVz5fQ9uScby03zA==}
     engines: {node: '>= 12.0.0'}
 
+  lilconfig@3.1.3:
+    resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
+    engines: {node: '>=14'}
+
+  lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+
   lit-element@3.3.3:
     resolution: {integrity: sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==}
 
@@ -5028,10 +4812,6 @@ packages:
   lit@3.3.0:
     resolution: {integrity: sha512-DGVsqsOIHBww2DqnuZzW7QsuCdahp50ojuDaBPC7jUDRpYoH0z7kHBBYZewRzer75FwtrkmkKk7iOAwSaWdBmw==}
 
-  load-yaml-file@0.2.0:
-    resolution: {integrity: sha512-OfCBkGEw4nN6JLtgRidPX6QxjBQGQf72q3si2uvqyFEMbycSFFHwAZeXx6cJgFM9wmLrf9zBwCP3Ivqa+LLZPw==}
-    engines: {node: '>=6'}
-
   local-pkg@0.5.1:
     resolution: {integrity: sha512-9rrA30MRRP3gBD3HTGnC6cDFpaE1kVDWxWgqWJUN0RvDNAo+Nz/9GxB+nHOH0ifbVFy0hSA1V6vFDvnx54lTEQ==}
     engines: {node: '>=14'}
@@ -5054,24 +4834,15 @@ packages:
     resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==}
     deprecated: This package is deprecated. Use require('node:util').isDeepStrictEqual instead.
 
-  lodash.memoize@4.1.2:
-    resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==}
-
   lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
 
   lodash.startcase@4.4.0:
     resolution: {integrity: sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==}
 
-  lodash.uniq@4.5.0:
-    resolution: {integrity: sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==}
-
   lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
 
-  look-it-up@2.1.0:
-    resolution: {integrity: sha512-nMoGWW2HurtuJf6XAL56FWTDCWLOTSsanrgwOyaR5Y4e3zfG5N/0cU5xWZSEU3tBxhQugRbV1xL9jb+ug7yZww==}
-
   loose-envify@1.4.0:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
@@ -5082,9 +4853,6 @@ packages:
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
-  magic-string@0.30.10:
-    resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==}
-
   magic-string@0.30.17:
     resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
 
@@ -5096,10 +4864,6 @@ packages:
     resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
     engines: {node: '>= 0.6'}
 
-  merge-anything@5.1.7:
-    resolution: {integrity: sha512-eRtbOb1N5iyH0tkQDAoQ4Ipsp/5qSR79Dzrz8hEPxRX10RWWR/iQXdoKmBSRCThY1Fh5EhISDtpSc93fpxUniQ==}
-    engines: {node: '>=12.13'}
-
   merge-descriptors@1.0.3:
     resolution: {integrity: sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==}
 
@@ -5117,9 +4881,6 @@ packages:
   micro-ftch@0.3.1:
     resolution: {integrity: sha512-/0LLxhzP0tfiR5hcQebtudP56gUurs2CLkGarnCiB/OqEyUFQ6U3paQi/tgLv0hBJYt2rnr9MNpxz4fiiugstg==}
 
-  microdiff@1.3.2:
-    resolution: {integrity: sha512-pKy60S2febliZIbwdfEQKTtL5bLNxOyiRRmD400gueYl9XcHyNGxzHSlJWn9IMHwYXT0yohPYL08+bGozVk8cQ==}
-
   micromatch@4.0.8:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
@@ -5169,20 +4930,9 @@ packages:
       typescript:
         optional: true
 
-  mkdirp@3.0.1:
-    resolution: {integrity: sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==}
-    engines: {node: '>=10'}
-    hasBin: true
-
   mlly@1.7.4:
     resolution: {integrity: sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==}
 
-  motion-dom@11.18.1:
-    resolution: {integrity: sha512-g76KvA001z+atjfxczdRtw/RXOM3OMSdd1f4DL77qCTF/+avrRJiawSG4yDibEQ215sr9kpinSlX2pCTJ9zbhw==}
-
-  motion-utils@11.18.1:
-    resolution: {integrity: sha512-49Kt+HKjtbJKLtgO/LKj9Ld+6vw9BjH5d9sc40R/kVyH8GLAXgT42M2NnuPcJNuA3s9ZfZBUcwIgpmZWGEE+hA==}
-
   motion@10.16.2:
     resolution: {integrity: sha512-p+PurYqfUdcJZvtnmAqu5fJgV2kR0uLFQuBKtLeFVTrYEVllI99tiOTSefVNYuip9ELTEkepIIDftNdze76NAQ==}
 
@@ -5203,6 +4953,9 @@ packages:
   multiformats@9.9.0:
     resolution: {integrity: sha512-HoMUjhH9T8DDBNT+6xzkrd9ga/XiBI4xLr58LJACwK6G3HTOPeMz4nB4KJs33L2BelrIJa7P0VuNaVF3hMYfjg==}
 
+  mz@2.7.0:
+    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
+
   nanoclone@0.2.1:
     resolution: {integrity: sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==}
 
@@ -5258,10 +5011,6 @@ packages:
     engines: {node: '>=10.5.0'}
     deprecated: Use your platform's native DOMException instead
 
-  node-eval@2.0.0:
-    resolution: {integrity: sha512-Ap+L9HznXAVeJj3TJ1op6M6bg5xtTq8L5CU/PJxtkhea/DrIxdTknGKIECKd/v/Lgql95iuMAYvIzBNd0pmcMg==}
-    engines: {node: '>= 4'}
-
   node-fetch-native@1.6.6:
     resolution: {integrity: sha512-8Mc2HhqPdlIfedsuZoc3yioPuzp6b+L5jRCRY1QzuWZh2EGJVQrGppC6V6cF0bLdbW0+O2YpqCA25aF/1lvipQ==}
 
@@ -5285,8 +5034,8 @@ packages:
   node-mock-http@1.0.0:
     resolution: {integrity: sha512-0uGYQ1WQL1M5kKvGRXWQ3uZCHtLTO8hln3oBjIusM75WoesZ909uQJs/Hb946i2SS+Gsrhkaa6iAO17jRIv6DQ==}
 
-  node-releases@2.0.19:
-    resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}
+  node-releases@2.0.27:
+    resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
 
   normalize-path@3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
@@ -5303,6 +5052,10 @@ packages:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
 
+  object-hash@3.0.0:
+    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
+    engines: {node: '>= 6'}
+
   object-inspect@1.13.4:
     resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
     engines: {node: '>= 0.4'}
@@ -5311,10 +5064,6 @@ packages:
     resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
     engines: {node: '>= 0.4'}
 
-  object-path@0.11.8:
-    resolution: {integrity: sha512-YJjNZrlXJFM42wTBn6zgOJVar9KFJvzx6sTWDte8sWZF//cnjl0BxHNpfZx+ZffXX63A9q0b1zsFiBX4g4X5KA==}
-    engines: {node: '>= 10.12.0'}
-
   object.assign@4.1.7:
     resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
     engines: {node: '>= 0.4'}
@@ -5380,9 +5129,6 @@ packages:
   outdent@0.5.0:
     resolution: {integrity: sha512-/jHxFIzoMXdqPzTaCpFzAAWhpkSjZPF4Vsn6jAfNpmbH/ymsmd7Qc6VE9BGn0L6YMj6uwpQLxCECpus4ukKS9Q==}
 
-  outdent@0.8.0:
-    resolution: {integrity: sha512-KiOAIsdpUTcAXuykya5fnVVT+/5uS0Q1mrkRHcF89tpieSmY33O/tmc54CqwA+bfhbtEfZUNLHaPUiB9X3jt1A==}
-
   own-keys@1.0.1:
     resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
     engines: {node: '>= 0.4'}
@@ -5466,12 +5212,6 @@ packages:
   package-manager-detector@0.2.9:
     resolution: {integrity: sha512-+vYvA/Y31l8Zk8dwxHhL3JfTuHPm6tlxM2A3GeQyl7ovYnSp1+mzAxClxaOr0qO1TtPxbQxetI7v5XqKLJZk7Q==}
 
-  pandacss-preset-radix-colors@0.2.0:
-    resolution: {integrity: sha512-I2HIibzgKvgub6ckriHJDXwehwIOOfnPEeN1wNlcfAodA9a1CzSe6A+eMuZC7XrxXKia5vV0UTomPKsLcC3P6Q==}
-    peerDependencies:
-      '@pandacss/dev': '>=0.0.1'
-      '@radix-ui/colors': '>=0.1.0'
-
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
@@ -5480,9 +5220,6 @@ packages:
     resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
     engines: {node: '>= 0.8'}
 
-  path-browserify@1.0.1:
-    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
-
   path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -5522,9 +5259,6 @@ packages:
   pathval@1.1.1:
     resolution: {integrity: sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==}
 
-  perfect-debounce@1.0.0:
-    resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
-
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -5532,6 +5266,14 @@ packages:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
 
+  picomatch@4.0.3:
+    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
+    engines: {node: '>=12'}
+
+  pify@2.3.0:
+    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
+    engines: {node: '>=0.10.0'}
+
   pify@3.0.0:
     resolution: {integrity: sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==}
     engines: {node: '>=4'}
@@ -5554,20 +5296,13 @@ packages:
     resolution: {integrity: sha512-dMACeu63HtRLmCG8VKdy4cShCPKaYDR4youZqoSWLxl5Gu99HUw8bw75thbPv9Nip+H+QYX8o3ZJbTdVZZ2TVg==}
     hasBin: true
 
-  pkg-dir@4.2.0:
-    resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==}
-    engines: {node: '>=8'}
-
-  pkg-types@1.0.3:
-    resolution: {integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==}
+  pirates@4.0.7:
+    resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
+    engines: {node: '>= 6'}
 
   pkg-types@1.3.1:
     resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
 
-  pluralize@8.0.0:
-    resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
-    engines: {node: '>=4'}
-
   pngjs@5.0.0:
     resolution: {integrity: sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==}
     engines: {node: '>=10.13.0'}
@@ -5603,46 +5338,42 @@ packages:
     resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
     engines: {node: '>= 0.4'}
 
-  postcss-discard-duplicates@7.0.0:
-    resolution: {integrity: sha512-bAnSuBop5LpAIUmmOSsuvtKAAKREB6BBIYStWUTGq8oG5q9fClDMMuY8i4UPI/cEcDx2TN+7PMnXYIId20UVDw==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.31
-
-  postcss-discard-empty@7.0.0:
-    resolution: {integrity: sha512-e+QzoReTZ8IAwhnSdp/++7gBZ/F+nBq9y6PomfwORfP7q9nBpK5AMP64kOt0bA+lShBFbBDcgpJ3X4etHg4lzA==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+  postcss-import@15.1.0:
+    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
+    engines: {node: '>=14.0.0'}
     peerDependencies:
-      postcss: ^8.4.31
+      postcss: ^8.0.0
 
-  postcss-merge-rules@7.0.0:
-    resolution: {integrity: sha512-Zty3VlOsD6VSjBMu6PiHCVpLegtBT/qtZRVBcSeyEZ6q1iU5qTYT0WtEoLRV+YubZZguS5/ycfP+NRiKfjv6aw==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+  postcss-js@4.1.0:
+    resolution: {integrity: sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==}
+    engines: {node: ^12 || ^14 || >= 16}
     peerDependencies:
-      postcss: ^8.4.31
+      postcss: ^8.4.21
 
-  postcss-minify-selectors@7.0.0:
-    resolution: {integrity: sha512-f00CExZhD6lNw2vTZbcnmfxVgaVKzUw6IRsIFX3JTT8GdsoABc1WnhhGwL1i8YPJ3sSWw39fv7XPtvLb+3Uitw==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
+  postcss-load-config@6.0.1:
+    resolution: {integrity: sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==}
+    engines: {node: '>= 18'}
     peerDependencies:
-      postcss: ^8.4.31
+      jiti: '>=1.21.0'
+      postcss: '>=8.0.9'
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+      postcss:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
 
-  postcss-nested@6.0.1:
-    resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
+  postcss-nested@6.2.0:
+    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
     engines: {node: '>=12.0'}
     peerDependencies:
       postcss: ^8.2.14
 
-  postcss-normalize-whitespace@7.0.0:
-    resolution: {integrity: sha512-37/toN4wwZErqohedXYqWgvcHUGlT8O/m2jVkAfAe9Bd4MzRqlBmXrJRePH0e9Wgnz2X7KymTgTOaaFizQe3AQ==}
-    engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
-    peerDependencies:
-      postcss: ^8.4.31
-
-  postcss-selector-parser@6.0.16:
-    resolution: {integrity: sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==}
-    engines: {node: '>=4'}
-
   postcss-selector-parser@6.1.2:
     resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
     engines: {node: '>=4'}
@@ -5654,10 +5385,6 @@ packages:
     resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
     engines: {node: ^10 || ^12 || >=14}
 
-  postcss@8.4.38:
-    resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==}
-    engines: {node: ^10 || ^12 || >=14}
-
   postcss@8.5.3:
     resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==}
     engines: {node: ^10 || ^12 || >=14}
@@ -5668,10 +5395,6 @@ packages:
   preact@10.26.2:
     resolution: {integrity: sha512-0gNmv4qpS9HaN3+40CLBAnKe0ZfyE4ZWo5xKlC1rVrr0ckkEvJvAQqKaHANdFKsGstoxrY4AItZ7kZSGVoVjgg==}
 
-  preferred-pm@3.1.2:
-    resolution: {integrity: sha512-nk7dKrcW8hfCZ4H6klWcdRknBOXWzNQByJ0oJyX97BOupsYD+FzLS4hflgEu/uPUEHZCuRfMxzCBsuWd7OzT8Q==}
-    engines: {node: '>=10'}
-
   prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
@@ -5681,11 +5404,6 @@ packages:
     engines: {node: '>=10.13.0'}
     hasBin: true
 
-  prettier@3.2.5:
-    resolution: {integrity: sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==}
-    engines: {node: '>=14'}
-    hasBin: true
-
   prettier@3.5.3:
     resolution: {integrity: sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==}
     engines: {node: '>=14'}
@@ -5854,6 +5572,9 @@ packages:
     resolution: {integrity: sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==}
     engines: {node: '>=0.10.0'}
 
+  read-cache@1.0.0:
+    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
+
   read-yaml-file@1.1.0:
     resolution: {integrity: sha512-VIMnQi/Z4HT2Fxuwg5KrY174U1VdUIASQVWXXyqtNRtxSr9IYkn1rsI6Tb6HsrHCmB7gVpNwX6JxPTHcH6IoTA==}
     engines: {node: '>=6'}
@@ -6078,9 +5799,6 @@ packages:
     resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==}
     engines: {node: '>= 10'}
 
-  sisteransi@1.0.5:
-    resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
-
   slash@3.0.0:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
@@ -6210,6 +5928,11 @@ packages:
       babel-plugin-macros:
         optional: true
 
+  sucrase@3.35.1:
+    resolution: {integrity: sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    hasBin: true
+
   superstruct@1.0.4:
     resolution: {integrity: sha512-7JpaAoX2NGyoFlI9NBh66BQXGONc+uE+MRS5i2iOBKuS4e+ccgMDjATgZldkah+33DakBxDHiss9kvUcGAO8UQ==}
     engines: {node: '>=14.0.0'}
@@ -6234,6 +5957,14 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  tailwind-merge@2.6.1:
+    resolution: {integrity: sha512-Oo6tHdpZsGpkKG88HJ8RR1rg/RdnEkQEfMoEk2x1XRI3F1AxeU+ijRXpiVUF4UbLfcxxRGw6TbUINKYdWVsQTQ==}
+
+  tailwindcss@3.4.19:
+    resolution: {integrity: sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
   term-size@2.2.1:
     resolution: {integrity: sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==}
     engines: {node: '>=8'}
@@ -6253,6 +5984,13 @@ packages:
   text-table@0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
 
+  thenify-all@1.6.0:
+    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
+    engines: {node: '>=0.8'}
+
+  thenify@3.3.1:
+    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
+
   thread-stream@0.15.2:
     resolution: {integrity: sha512-UkEhKIg2pD+fjkHQKyJO3yoIvAP3N6RlNFt2dUhcS1FGvCD1cQa1M/PGknCLFIyZdtJOWQjejp7bdNqmN7zwdA==}
 
@@ -6265,6 +6003,10 @@ packages:
   tinybench@2.9.0:
     resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
 
+  tinyglobby@0.2.15:
+    resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
+    engines: {node: '>=12.0.0'}
+
   tinypool@0.8.4:
     resolution: {integrity: sha512-i11VH5gS6IFeLY3gMBQ00/MmLncVP7JLXOw1vlgkytLmJK7QnEr7NXf0LBdxfmNPAeyetukOk0bOYrJrFGjYJQ==}
     engines: {node: '>=14.0.0'}
@@ -6318,31 +6060,8 @@ packages:
     peerDependencies:
       typescript: '>=4.2.0'
 
-  ts-evaluator@1.2.0:
-    resolution: {integrity: sha512-ncSGek1p92bj2ifB7s9UBgryHCkU9vwC5d+Lplt12gT9DH+e41X8dMoHRQjIMeAvyG7j9dEnuHmwgOtuRIQL+Q==}
-    engines: {node: '>=14.19.0'}
-    peerDependencies:
-      jsdom: '>=14.x || >=15.x || >=16.x || >=17.x || >=18.x || >=19.x || >=20.x || >=21.x || >=22.x'
-      typescript: '>=3.2.x || >= 4.x || >= 5.x'
-    peerDependenciesMeta:
-      jsdom:
-        optional: true
-
-  ts-morph@21.0.1:
-    resolution: {integrity: sha512-dbDtVdEAncKctzrVZ+Nr7kHpHkv+0JDJb2MjjpBaj8bFeCkePU9rHfMklmhuLFnpeq/EJZk2IhStY6NzqgjOkg==}
-
-  ts-pattern@5.0.8:
-    resolution: {integrity: sha512-aafbuAQOTEeWmA7wtcL94w6I89EgLD7F+IlWkr596wYxeb0oveWDO5dQpv85YP0CGbxXT/qXBIeV6IYLcoZ2uA==}
-
-  tsconfck@3.0.2:
-    resolution: {integrity: sha512-6lWtFjwuhS3XI4HsX4Zg0izOI3FU/AI9EGVlPEUMDIhvLPMD4wkiof0WCoDgW7qY+Dy198g4d9miAqUHWHFH6Q==}
-    engines: {node: ^18 || >=20}
-    hasBin: true
-    peerDependencies:
-      typescript: ^5.0.0
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+  ts-interface-checker@0.1.13:
+    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
 
   tsconfig-paths@3.15.0:
     resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
@@ -6410,11 +6129,6 @@ packages:
       typescript:
         optional: true
 
-  typescript@5.3.3:
-    resolution: {integrity: sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==}
-    engines: {node: '>=14.17'}
-    hasBin: true
-
   typescript@5.4.5:
     resolution: {integrity: sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==}
     engines: {node: '>=14.17'}
@@ -6461,10 +6175,6 @@ packages:
     resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==}
     engines: {node: '>= 4.0.0'}
 
-  universalify@2.0.1:
-    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
-    engines: {node: '>= 10.0.0'}
-
   unpipe@1.0.0:
     resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
     engines: {node: '>= 0.8'}
@@ -6528,8 +6238,8 @@ packages:
       uploadthing:
         optional: true
 
-  update-browserslist-db@1.1.2:
-    resolution: {integrity: sha512-PPypAm5qvlD7XMZC3BujecnaOxwhrtoFR+Dqkk5Aa/6DssiH0ibKoketaj9w8LP7Bont1rYeoV5plxD7RTEPRg==}
+  update-browserslist-db@1.2.3:
+    resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
     hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
@@ -6811,10 +6521,6 @@ packages:
   which-module@2.0.1:
     resolution: {integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==}
 
-  which-pm@2.0.0:
-    resolution: {integrity: sha512-Lhs9Pmyph0p5n5Z3mVnN0yWcbQYUAD7rbQUiMsQxOJ3T57k7RFe35SUwWMf7dsbDZks1uOmw4AecB/JMDj3v/w==}
-    engines: {node: '>=8.15'}
-
   which-typed-array@1.1.18:
     resolution: {integrity: sha512-qEcY+KJYlWyLH9vNbsr6/5j59AXk5ni5aakf8ldzBvGde6Iz4sxZGkJyWSAueTG7QhOvNRYb1lDdFmL5Td0QKA==}
     engines: {node: '>= 0.4'}
@@ -7105,13 +6811,7 @@ snapshots:
 
   '@adraffy/ens-normalize@1.9.0': {}
 
-  '@babel/helper-string-parser@7.25.9': {}
-
-  '@babel/helper-validator-identifier@7.25.9': {}
-
-  '@babel/parser@7.26.9':
-    dependencies:
-      '@babel/types': 7.26.9
+  '@alloc/quick-lru@5.2.0': {}
 
   '@babel/runtime@7.26.10':
     dependencies:
@@ -7121,11 +6821,6 @@ snapshots:
     dependencies:
       regenerator-runtime: 0.14.1
 
-  '@babel/types@7.26.9':
-    dependencies:
-      '@babel/helper-string-parser': 7.25.9
-      '@babel/helper-validator-identifier': 7.25.9
-
   '@base-org/account@1.1.1(@types/react@19.1.11)(bufferutil@4.0.9)(react@19.1.1)(typescript@5.4.5)(use-sync-external-store@1.4.0(react@19.1.1))(utf-8-validate@5.0.10)(zod@3.22.4)':
     dependencies:
       '@noble/hashes': 1.4.0
@@ -7301,17 +6996,6 @@ snapshots:
       human-id: 4.1.1
       prettier: 2.8.8
 
-  '@clack/core@0.3.5':
-    dependencies:
-      picocolors: 1.1.1
-      sisteransi: 1.0.5
-
-  '@clack/prompts@0.7.0':
-    dependencies:
-      '@clack/core': 0.3.5
-      picocolors: 1.1.1
-      sisteransi: 1.0.5
-
   '@coinbase/wallet-sdk@3.9.3':
     dependencies:
       bn.js: 5.2.1
@@ -7346,22 +7030,6 @@ snapshots:
       - utf-8-validate
       - zod
 
-  '@csstools/postcss-cascade-layers@4.0.6(postcss@8.4.38)':
-    dependencies:
-      '@csstools/selector-specificity': 3.1.1(postcss-selector-parser@6.1.2)
-      postcss: 8.4.38
-      postcss-selector-parser: 6.1.2
-
-  '@csstools/postcss-cascade-layers@4.0.6(postcss@8.5.3)':
-    dependencies:
-      '@csstools/selector-specificity': 3.1.1(postcss-selector-parser@6.1.2)
-      postcss: 8.5.3
-      postcss-selector-parser: 6.1.2
-
-  '@csstools/selector-specificity@3.1.1(postcss-selector-parser@6.1.2)':
-    dependencies:
-      postcss-selector-parser: 6.1.2
-
   '@dynamic-labs-connectors/abstract-global-wallet-evm@4.4.3(b34ec69d333a12139709a062bb5c7ec0)':
     dependencies:
       '@abstract-foundation/agw-client': 1.6.2(abitype@1.1.0(typescript@5.4.5)(zod@3.22.4))(typescript@5.4.5)(viem@2.29.4(bufferutil@4.0.9)(typescript@5.4.5)(utf-8-validate@5.0.10)(zod@3.22.4))
@@ -8223,141 +7891,72 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
-  '@esbuild/aix-ppc64@0.20.2':
-    optional: true
-
   '@esbuild/aix-ppc64@0.21.5':
     optional: true
 
-  '@esbuild/android-arm64@0.20.2':
-    optional: true
-
   '@esbuild/android-arm64@0.21.5':
     optional: true
 
-  '@esbuild/android-arm@0.20.2':
-    optional: true
-
   '@esbuild/android-arm@0.21.5':
     optional: true
 
-  '@esbuild/android-x64@0.20.2':
-    optional: true
-
   '@esbuild/android-x64@0.21.5':
     optional: true
 
-  '@esbuild/darwin-arm64@0.20.2':
-    optional: true
-
   '@esbuild/darwin-arm64@0.21.5':
     optional: true
 
-  '@esbuild/darwin-x64@0.20.2':
-    optional: true
-
   '@esbuild/darwin-x64@0.21.5':
     optional: true
 
-  '@esbuild/freebsd-arm64@0.20.2':
-    optional: true
-
   '@esbuild/freebsd-arm64@0.21.5':
     optional: true
 
-  '@esbuild/freebsd-x64@0.20.2':
-    optional: true
-
   '@esbuild/freebsd-x64@0.21.5':
     optional: true
 
-  '@esbuild/linux-arm64@0.20.2':
-    optional: true
-
-  '@esbuild/linux-arm64@0.21.5':
-    optional: true
-
-  '@esbuild/linux-arm@0.20.2':
+  '@esbuild/linux-arm64@0.21.5':
     optional: true
 
   '@esbuild/linux-arm@0.21.5':
     optional: true
 
-  '@esbuild/linux-ia32@0.20.2':
-    optional: true
-
   '@esbuild/linux-ia32@0.21.5':
     optional: true
 
-  '@esbuild/linux-loong64@0.20.2':
-    optional: true
-
   '@esbuild/linux-loong64@0.21.5':
     optional: true
 
-  '@esbuild/linux-mips64el@0.20.2':
-    optional: true
-
   '@esbuild/linux-mips64el@0.21.5':
     optional: true
 
-  '@esbuild/linux-ppc64@0.20.2':
-    optional: true
-
   '@esbuild/linux-ppc64@0.21.5':
     optional: true
 
-  '@esbuild/linux-riscv64@0.20.2':
-    optional: true
-
   '@esbuild/linux-riscv64@0.21.5':
     optional: true
 
-  '@esbuild/linux-s390x@0.20.2':
-    optional: true
-
   '@esbuild/linux-s390x@0.21.5':
     optional: true
 
-  '@esbuild/linux-x64@0.20.2':
-    optional: true
-
   '@esbuild/linux-x64@0.21.5':
     optional: true
 
-  '@esbuild/netbsd-x64@0.20.2':
-    optional: true
-
   '@esbuild/netbsd-x64@0.21.5':
     optional: true
 
-  '@esbuild/openbsd-x64@0.20.2':
-    optional: true
-
   '@esbuild/openbsd-x64@0.21.5':
     optional: true
 
-  '@esbuild/sunos-x64@0.20.2':
-    optional: true
-
   '@esbuild/sunos-x64@0.21.5':
     optional: true
 
-  '@esbuild/win32-arm64@0.20.2':
-    optional: true
-
   '@esbuild/win32-arm64@0.21.5':
     optional: true
 
-  '@esbuild/win32-ia32@0.20.2':
-    optional: true
-
   '@esbuild/win32-ia32@0.21.5':
     optional: true
 
-  '@esbuild/win32-x64@0.20.2':
-    optional: true
-
   '@esbuild/win32-x64@0.21.5':
     optional: true
 
@@ -8935,13 +8534,10 @@ snapshots:
       '@jridgewell/set-array': 1.2.1
       '@jridgewell/sourcemap-codec': 1.5.0
       '@jridgewell/trace-mapping': 0.3.25
-    optional: true
 
-  '@jridgewell/resolve-uri@3.1.2':
-    optional: true
+  '@jridgewell/resolve-uri@3.1.2': {}
 
-  '@jridgewell/set-array@1.2.1':
-    optional: true
+  '@jridgewell/set-array@1.2.1': {}
 
   '@jridgewell/source-map@0.3.6':
     dependencies:
@@ -8955,7 +8551,6 @@ snapshots:
     dependencies:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.0
-    optional: true
 
   '@ledgerhq/devices@6.27.1':
     dependencies:
@@ -9426,166 +9021,6 @@ snapshots:
 
   '@openzeppelin/contracts@4.9.6': {}
 
-  '@pandacss/config@0.40.1':
-    dependencies:
-      '@pandacss/logger': 0.40.1
-      '@pandacss/preset-base': 0.40.1
-      '@pandacss/preset-panda': 0.40.1
-      '@pandacss/shared': 0.40.1
-      '@pandacss/types': 0.40.1
-      bundle-n-require: 1.1.1
-      escalade: 3.1.2
-      merge-anything: 5.1.7
-      microdiff: 1.3.2
-      typescript: 5.3.3
-
-  '@pandacss/core@0.40.1':
-    dependencies:
-      '@csstools/postcss-cascade-layers': 4.0.6(postcss@8.4.38)
-      '@pandacss/is-valid-prop': 0.40.1
-      '@pandacss/logger': 0.40.1
-      '@pandacss/shared': 0.40.1
-      '@pandacss/token-dictionary': 0.40.1
-      '@pandacss/types': 0.40.1
-      browserslist: 4.23.0
-      hookable: 5.5.3
-      lightningcss: 1.23.0
-      lodash.merge: 4.6.2
-      outdent: 0.8.0
-      postcss: 8.4.38
-      postcss-discard-duplicates: 7.0.0(postcss@8.4.38)
-      postcss-discard-empty: 7.0.0(postcss@8.4.38)
-      postcss-merge-rules: 7.0.0(postcss@8.4.38)
-      postcss-minify-selectors: 7.0.0(postcss@8.4.38)
-      postcss-nested: 6.0.1(postcss@8.4.38)
-      postcss-normalize-whitespace: 7.0.0(postcss@8.4.38)
-      postcss-selector-parser: 6.0.16
-      ts-pattern: 5.0.8
-
-  '@pandacss/dev@0.40.1(typescript@5.4.5)':
-    dependencies:
-      '@clack/prompts': 0.7.0
-      '@pandacss/config': 0.40.1
-      '@pandacss/logger': 0.40.1
-      '@pandacss/node': 0.40.1(typescript@5.4.5)
-      '@pandacss/postcss': 0.40.1(typescript@5.4.5)
-      '@pandacss/preset-panda': 0.40.1
-      '@pandacss/shared': 0.40.1
-      '@pandacss/token-dictionary': 0.40.1
-      '@pandacss/types': 0.40.1
-      cac: 6.7.14
-    transitivePeerDependencies:
-      - jsdom
-      - typescript
-
-  '@pandacss/extractor@0.40.1(typescript@5.4.5)':
-    dependencies:
-      '@pandacss/shared': 0.40.1
-      ts-evaluator: 1.2.0(typescript@5.4.5)
-      ts-morph: 21.0.1
-    transitivePeerDependencies:
-      - jsdom
-      - typescript
-
-  '@pandacss/generator@0.40.1':
-    dependencies:
-      '@pandacss/core': 0.40.1
-      '@pandacss/is-valid-prop': 0.40.1
-      '@pandacss/logger': 0.40.1
-      '@pandacss/shared': 0.40.1
-      '@pandacss/token-dictionary': 0.40.1
-      '@pandacss/types': 0.40.1
-      javascript-stringify: 2.1.0
-      outdent: 0.8.0
-      pluralize: 8.0.0
-      postcss: 8.4.38
-      ts-pattern: 5.0.8
-
-  '@pandacss/is-valid-prop@0.40.1': {}
-
-  '@pandacss/logger@0.40.1':
-    dependencies:
-      '@pandacss/types': 0.40.1
-      kleur: 4.1.5
-
-  '@pandacss/node@0.40.1(typescript@5.4.5)':
-    dependencies:
-      '@pandacss/config': 0.40.1
-      '@pandacss/core': 0.40.1
-      '@pandacss/extractor': 0.40.1(typescript@5.4.5)
-      '@pandacss/generator': 0.40.1
-      '@pandacss/logger': 0.40.1
-      '@pandacss/parser': 0.40.1(typescript@5.4.5)
-      '@pandacss/shared': 0.40.1
-      '@pandacss/token-dictionary': 0.40.1
-      '@pandacss/types': 0.40.1
-      browserslist: 4.23.0
-      chokidar: 3.6.0
-      fast-glob: 3.3.2
-      file-size: 1.0.0
-      filesize: 10.1.2
-      fs-extra: 11.2.0
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      lodash.merge: 4.6.2
-      look-it-up: 2.1.0
-      outdent: 0.8.0
-      perfect-debounce: 1.0.0
-      pkg-types: 1.0.3
-      pluralize: 8.0.0
-      postcss: 8.4.38
-      preferred-pm: 3.1.2
-      prettier: 3.2.5
-      ts-morph: 21.0.1
-      ts-pattern: 5.0.8
-      tsconfck: 3.0.2(typescript@5.4.5)
-    transitivePeerDependencies:
-      - jsdom
-      - typescript
-
-  '@pandacss/parser@0.40.1(typescript@5.4.5)':
-    dependencies:
-      '@pandacss/config': 0.40.1
-      '@pandacss/core': 0.40.1
-      '@pandacss/extractor': 0.40.1(typescript@5.4.5)
-      '@pandacss/logger': 0.40.1
-      '@pandacss/shared': 0.40.1
-      '@pandacss/types': 0.40.1
-      '@vue/compiler-sfc': 3.4.19
-      magic-string: 0.30.10
-      ts-morph: 21.0.1
-      ts-pattern: 5.0.8
-    transitivePeerDependencies:
-      - jsdom
-      - typescript
-
-  '@pandacss/postcss@0.40.1(typescript@5.4.5)':
-    dependencies:
-      '@pandacss/node': 0.40.1(typescript@5.4.5)
-      postcss: 8.4.38
-    transitivePeerDependencies:
-      - jsdom
-      - typescript
-
-  '@pandacss/preset-base@0.40.1':
-    dependencies:
-      '@pandacss/types': 0.40.1
-
-  '@pandacss/preset-panda@0.40.1':
-    dependencies:
-      '@pandacss/types': 0.40.1
-
-  '@pandacss/shared@0.40.1': {}
-
-  '@pandacss/token-dictionary@0.40.1':
-    dependencies:
-      '@pandacss/logger': 0.40.1
-      '@pandacss/shared': 0.40.1
-      '@pandacss/types': 0.40.1
-      ts-pattern: 5.0.8
-
-  '@pandacss/types@0.40.1': {}
-
   '@paulmillr/qr@0.2.1': {}
 
   '@pkgjs/parseargs@0.11.0':
@@ -10894,13 +10329,6 @@ snapshots:
       - utf-8-validate
       - zod
 
-  '@ts-morph/common@0.22.0':
-    dependencies:
-      fast-glob: 3.3.2
-      minimatch: 9.0.5
-      mkdirp: 3.0.1
-      path-browserify: 1.0.1
-
   '@turnkey/api-key-stamper@0.4.7':
     dependencies:
       '@noble/curves': 1.9.2
@@ -11047,8 +10475,6 @@ snapshots:
 
   '@types/node@12.20.55': {}
 
-  '@types/node@17.0.45': {}
-
   '@types/node@22.13.4':
     dependencies:
       undici-types: 6.20.0
@@ -11200,42 +10626,10 @@ snapshots:
       loupe: 2.3.7
       pretty-format: 29.7.0
 
-  '@vue/compiler-core@3.4.19':
-    dependencies:
-      '@babel/parser': 7.26.9
-      '@vue/shared': 3.4.19
-      entities: 4.5.0
-      estree-walker: 2.0.2
-      source-map-js: 1.2.1
-
-  '@vue/compiler-dom@3.4.19':
-    dependencies:
-      '@vue/compiler-core': 3.4.19
-      '@vue/shared': 3.4.19
-
-  '@vue/compiler-sfc@3.4.19':
-    dependencies:
-      '@babel/parser': 7.26.9
-      '@vue/compiler-core': 3.4.19
-      '@vue/compiler-dom': 3.4.19
-      '@vue/compiler-ssr': 3.4.19
-      '@vue/shared': 3.4.19
-      estree-walker: 2.0.2
-      magic-string: 0.30.10
-      postcss: 8.5.3
-      source-map-js: 1.2.1
-
-  '@vue/compiler-ssr@3.4.19':
-    dependencies:
-      '@vue/compiler-dom': 3.4.19
-      '@vue/shared': 3.4.19
-
   '@vue/reactivity@3.5.17':
     dependencies:
       '@vue/shared': 3.5.17
 
-  '@vue/shared@3.4.19': {}
-
   '@vue/shared@3.5.17': {}
 
   '@wagmi/chains@1.0.0(typescript@5.4.5)':
@@ -12603,11 +11997,15 @@ snapshots:
 
   ansi-styles@6.2.1: {}
 
+  any-promise@1.3.0: {}
+
   anymatch@3.1.3:
     dependencies:
       normalize-path: 3.0.0
       picomatch: 2.3.1
 
+  arg@5.0.2: {}
+
   argon2id@1.0.1: {}
 
   argparse@1.0.10:
@@ -12700,6 +12098,15 @@ snapshots:
 
   atomic-sleep@1.0.0: {}
 
+  autoprefixer@10.4.24(postcss@8.5.3):
+    dependencies:
+      browserslist: 4.28.1
+      caniuse-lite: 1.0.30001770
+      fraction.js: 5.3.4
+      picocolors: 1.1.1
+      postcss: 8.5.3
+      postcss-value-parser: 4.2.0
+
   available-typed-arrays@1.0.7:
     dependencies:
       possible-typed-array-names: 1.1.0
@@ -12765,6 +12172,8 @@ snapshots:
 
   base64-js@1.5.1: {}
 
+  baseline-browser-mapping@2.10.0: {}
+
   bech32@1.1.4: {}
 
   bech32@2.0.0: {}
@@ -12867,12 +12276,13 @@ snapshots:
 
   brorand@1.1.0: {}
 
-  browserslist@4.23.0:
+  browserslist@4.28.1:
     dependencies:
-      caniuse-lite: 1.0.30001700
-      electron-to-chromium: 1.5.102
-      node-releases: 2.0.19
-      update-browserslist-db: 1.1.2(browserslist@4.23.0)
+      baseline-browser-mapping: 2.10.0
+      caniuse-lite: 1.0.30001770
+      electron-to-chromium: 1.5.302
+      node-releases: 2.0.27
+      update-browserslist-db: 1.2.3(browserslist@4.28.1)
 
   bs58@4.0.1:
     dependencies:
@@ -12908,11 +12318,6 @@ snapshots:
     dependencies:
       node-gyp-build: 4.8.4
 
-  bundle-n-require@1.1.1:
-    dependencies:
-      esbuild: 0.20.2
-      node-eval: 2.0.0
-
   bundle-name@4.1.0:
     dependencies:
       run-applescript: 7.0.0
@@ -12940,17 +12345,14 @@ snapshots:
 
   callsites@3.1.0: {}
 
-  camelcase@5.3.1: {}
+  camelcase-css@2.0.1: {}
 
-  caniuse-api@3.0.0:
-    dependencies:
-      browserslist: 4.23.0
-      caniuse-lite: 1.0.30001700
-      lodash.memoize: 4.1.2
-      lodash.uniq: 4.5.0
+  camelcase@5.3.1: {}
 
   caniuse-lite@1.0.30001700: {}
 
+  caniuse-lite@1.0.30001770: {}
+
   chai@4.5.0:
     dependencies:
       assertion-error: 1.1.0
@@ -12992,6 +12394,10 @@ snapshots:
 
   ci-info@3.9.0: {}
 
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
   client-only@0.0.1: {}
 
   cliui@6.0.0:
@@ -13008,7 +12414,7 @@ snapshots:
 
   clsx@1.2.1: {}
 
-  code-block-writer@12.0.0: {}
+  clsx@2.1.1: {}
 
   color-convert@2.0.1:
     dependencies:
@@ -13036,6 +12442,8 @@ snapshots:
 
   commander@2.20.3: {}
 
+  commander@4.1.1: {}
+
   commander@5.1.0: {}
 
   concat-map@0.0.1: {}
@@ -13094,20 +12502,12 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
-  crosspath@2.0.0:
-    dependencies:
-      '@types/node': 17.0.45
-
   crossws@0.3.4:
     dependencies:
       uncrypto: 0.1.3
 
   cssesc@3.0.0: {}
 
-  cssnano-utils@5.0.0(postcss@8.4.38):
-    dependencies:
-      postcss: 8.4.38
-
   csstype@3.1.3: {}
 
   data-uri-to-buffer@4.0.1: {}
@@ -13205,12 +12605,15 @@ snapshots:
 
   detect-indent@6.1.0: {}
 
-  detect-libc@1.0.3: {}
+  detect-libc@1.0.3:
+    optional: true
 
   detect-libc@2.0.4: {}
 
   detect-node-es@1.1.0: {}
 
+  didyoumean@1.2.2: {}
+
   diff-sequences@29.6.3: {}
 
   dijkstrajs@1.0.3: {}
@@ -13219,6 +12622,8 @@ snapshots:
     dependencies:
       path-type: 4.0.0
 
+  dlv@1.1.3: {}
+
   doctrine@2.1.0:
     dependencies:
       esutils: 2.0.3
@@ -13256,7 +12661,7 @@ snapshots:
       '@standard-schema/spec': 1.0.0
       fast-check: 3.23.2
 
-  electron-to-chromium@1.5.102: {}
+  electron-to-chromium@1.5.302: {}
 
   elliptic@6.5.4:
     dependencies:
@@ -13301,8 +12706,6 @@ snapshots:
       ansi-colors: 4.1.3
       strip-ansi: 6.0.1
 
-  entities@4.5.0: {}
-
   es-abstract@1.23.9:
     dependencies:
       array-buffer-byte-length: 1.0.2
@@ -13411,32 +12814,6 @@ snapshots:
     dependencies:
       es6-promise: 4.2.8
 
-  esbuild@0.20.2:
-    optionalDependencies:
-      '@esbuild/aix-ppc64': 0.20.2
-      '@esbuild/android-arm': 0.20.2
-      '@esbuild/android-arm64': 0.20.2
-      '@esbuild/android-x64': 0.20.2
-      '@esbuild/darwin-arm64': 0.20.2
-      '@esbuild/darwin-x64': 0.20.2
-      '@esbuild/freebsd-arm64': 0.20.2
-      '@esbuild/freebsd-x64': 0.20.2
-      '@esbuild/linux-arm': 0.20.2
-      '@esbuild/linux-arm64': 0.20.2
-      '@esbuild/linux-ia32': 0.20.2
-      '@esbuild/linux-loong64': 0.20.2
-      '@esbuild/linux-mips64el': 0.20.2
-      '@esbuild/linux-ppc64': 0.20.2
-      '@esbuild/linux-riscv64': 0.20.2
-      '@esbuild/linux-s390x': 0.20.2
-      '@esbuild/linux-x64': 0.20.2
-      '@esbuild/netbsd-x64': 0.20.2
-      '@esbuild/openbsd-x64': 0.20.2
-      '@esbuild/sunos-x64': 0.20.2
-      '@esbuild/win32-arm64': 0.20.2
-      '@esbuild/win32-ia32': 0.20.2
-      '@esbuild/win32-x64': 0.20.2
-
   esbuild@0.21.5:
     optionalDependencies:
       '@esbuild/aix-ppc64': 0.21.5
@@ -13463,8 +12840,6 @@ snapshots:
       '@esbuild/win32-ia32': 0.21.5
       '@esbuild/win32-x64': 0.21.5
 
-  escalade@3.1.2: {}
-
   escalade@3.2.0: {}
 
   escape-html@1.0.3: {}
@@ -13612,8 +12987,6 @@ snapshots:
 
   estraverse@5.3.0: {}
 
-  estree-walker@2.0.2: {}
-
   estree-walker@3.0.3:
     dependencies:
       '@types/estree': 1.0.6
@@ -13782,14 +13155,6 @@ snapshots:
 
   fast-deep-equal@3.1.3: {}
 
-  fast-glob@3.3.2:
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      '@nodelib/fs.walk': 1.2.8
-      glob-parent: 5.1.2
-      merge2: 1.4.1
-      micromatch: 4.0.8
-
   fast-glob@3.3.3:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -13814,6 +13179,10 @@ snapshots:
     dependencies:
       reusify: 1.0.4
 
+  fdir@6.5.0(picomatch@4.0.3):
+    optionalDependencies:
+      picomatch: 4.0.3
+
   fetch-blob@3.2.0:
     dependencies:
       node-domexception: 1.0.0
@@ -13825,12 +13194,8 @@ snapshots:
     dependencies:
       flat-cache: 3.2.0
 
-  file-size@1.0.0: {}
-
   file-uri-to-path@1.0.0: {}
 
-  filesize@10.1.2: {}
-
   fill-range@7.1.1:
     dependencies:
       to-regex-range: 5.0.1
@@ -13859,11 +13224,6 @@ snapshots:
       locate-path: 6.0.0
       path-exists: 4.0.0
 
-  find-yarn-workspace-root2@1.2.16:
-    dependencies:
-      micromatch: 4.0.8
-      pkg-dir: 4.2.0
-
   flat-cache@3.2.0:
     dependencies:
       flatted: 3.3.3
@@ -13921,23 +13281,10 @@ snapshots:
 
   fp-ts@2.16.11: {}
 
-  framer-motion@11.18.2(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
-    dependencies:
-      motion-dom: 11.18.1
-      motion-utils: 11.18.1
-      tslib: 2.8.1
-    optionalDependencies:
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
+  fraction.js@5.3.4: {}
 
   fresh@0.5.2: {}
 
-  fs-extra@11.2.0:
-    dependencies:
-      graceful-fs: 4.2.11
-      jsonfile: 6.1.0
-      universalify: 2.0.1
-
   fs-extra@7.0.1:
     dependencies:
       graceful-fs: 4.2.11
@@ -14122,8 +13469,6 @@ snapshots:
     dependencies:
       react-is: 16.13.1
 
-  hookable@5.5.3: {}
-
   hpke-js@1.6.1:
     dependencies:
       '@hpke/chacha20poly1305': 1.6.1
@@ -14333,8 +13678,6 @@ snapshots:
       call-bound: 1.0.3
       get-intrinsic: 1.2.7
 
-  is-what@4.1.16: {}
-
   is-windows@1.0.2: {}
 
   is-wsl@3.1.0:
@@ -14401,8 +13744,6 @@ snapshots:
     optionalDependencies:
       '@pkgjs/parseargs': 0.11.0
 
-  javascript-stringify@2.1.0: {}
-
   jayson@4.1.3(bufferutil@4.0.9)(utf-8-validate@5.0.10):
     dependencies:
       '@types/connect': 3.4.38
@@ -14421,6 +13762,8 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
+  jiti@1.21.7: {}
+
   js-base64@3.7.8: {}
 
   js-sha3@0.8.0: {}
@@ -14457,18 +13800,10 @@ snapshots:
     dependencies:
       minimist: 1.2.8
 
-  jsonc-parser@3.3.1: {}
-
   jsonfile@4.0.0:
     optionalDependencies:
       graceful-fs: 4.2.11
 
-  jsonfile@6.1.0:
-    dependencies:
-      universalify: 2.0.1
-    optionalDependencies:
-      graceful-fs: 4.2.11
-
   jsonparse@1.3.1: {}
 
   jsontokens@4.0.1:
@@ -14496,8 +13831,6 @@ snapshots:
 
   keyvaluestorage-interface@1.0.0: {}
 
-  kleur@4.1.5: {}
-
   levn@0.4.1:
     dependencies:
       prelude-ls: 1.2.1
@@ -14543,6 +13876,11 @@ snapshots:
       lightningcss-linux-x64-gnu: 1.23.0
       lightningcss-linux-x64-musl: 1.23.0
       lightningcss-win32-x64-msvc: 1.23.0
+    optional: true
+
+  lilconfig@3.1.3: {}
+
+  lines-and-columns@1.2.4: {}
 
   lit-element@3.3.3:
     dependencies:
@@ -14576,13 +13914,6 @@ snapshots:
       lit-element: 4.2.0
       lit-html: 3.3.0
 
-  load-yaml-file@0.2.0:
-    dependencies:
-      graceful-fs: 4.2.11
-      js-yaml: 3.14.1
-      pify: 4.0.1
-      strip-bom: 3.0.0
-
   local-pkg@0.5.1:
     dependencies:
       mlly: 1.7.4
@@ -14602,18 +13933,12 @@ snapshots:
 
   lodash.isequal@4.5.0: {}
 
-  lodash.memoize@4.1.2: {}
-
   lodash.merge@4.6.2: {}
 
   lodash.startcase@4.4.0: {}
 
-  lodash.uniq@4.5.0: {}
-
   lodash@4.17.21: {}
 
-  look-it-up@2.1.0: {}
-
   loose-envify@1.4.0:
     dependencies:
       js-tokens: 4.0.0
@@ -14624,10 +13949,6 @@ snapshots:
 
   lru-cache@10.4.3: {}
 
-  magic-string@0.30.10:
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.0
-
   magic-string@0.30.17:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
@@ -14636,10 +13957,6 @@ snapshots:
 
   media-typer@0.3.0: {}
 
-  merge-anything@5.1.7:
-    dependencies:
-      is-what: 4.1.16
-
   merge-descriptors@1.0.3: {}
 
   merge-stream@2.0.0: {}
@@ -14650,8 +13967,6 @@ snapshots:
 
   micro-ftch@0.3.1: {}
 
-  microdiff@1.3.2: {}
-
   micromatch@4.0.8:
     dependencies:
       braces: 3.0.3
@@ -14687,8 +14002,6 @@ snapshots:
     optionalDependencies:
       typescript: 5.4.5
 
-  mkdirp@3.0.1: {}
-
   mlly@1.7.4:
     dependencies:
       acorn: 8.14.0
@@ -14696,12 +14009,6 @@ snapshots:
       pkg-types: 1.3.1
       ufo: 1.5.4
 
-  motion-dom@11.18.1:
-    dependencies:
-      motion-utils: 11.18.1
-
-  motion-utils@11.18.1: {}
-
   motion@10.16.2:
     dependencies:
       '@motionone/animation': 10.18.0
@@ -14721,6 +14028,12 @@ snapshots:
 
   multiformats@9.9.0: {}
 
+  mz@2.7.0:
+    dependencies:
+      any-promise: 1.3.0
+      object-assign: 4.1.1
+      thenify-all: 1.6.0
+
   nanoclone@0.2.1: {}
 
   nanoid@3.3.8: {}
@@ -14772,10 +14085,6 @@ snapshots:
 
   node-domexception@1.0.0: {}
 
-  node-eval@2.0.0:
-    dependencies:
-      path-is-absolute: 1.0.1
-
   node-fetch-native@1.6.6: {}
 
   node-fetch@2.7.0:
@@ -14792,7 +14101,7 @@ snapshots:
 
   node-mock-http@1.0.0: {}
 
-  node-releases@2.0.19: {}
+  node-releases@2.0.27: {}
 
   normalize-path@3.0.0: {}
 
@@ -14808,12 +14117,12 @@ snapshots:
 
   object-assign@4.1.1: {}
 
+  object-hash@3.0.0: {}
+
   object-inspect@1.13.4: {}
 
   object-keys@1.1.1: {}
 
-  object-path@0.11.8: {}
-
   object.assign@4.1.7:
     dependencies:
       call-bind: 1.0.8
@@ -14906,8 +14215,6 @@ snapshots:
 
   outdent@0.5.0: {}
 
-  outdent@0.8.0: {}
-
   own-keys@1.0.1:
     dependencies:
       get-intrinsic: 1.2.7
@@ -15034,19 +14341,12 @@ snapshots:
 
   package-manager-detector@0.2.9: {}
 
-  pandacss-preset-radix-colors@0.2.0(@pandacss/dev@0.40.1(typescript@5.4.5))(@radix-ui/colors@0.1.9):
-    dependencies:
-      '@pandacss/dev': 0.40.1(typescript@5.4.5)
-      '@radix-ui/colors': 0.1.9
-
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
 
   parseurl@1.3.3: {}
 
-  path-browserify@1.0.1: {}
-
   path-exists@4.0.0: {}
 
   path-is-absolute@1.0.1: {}
@@ -15072,12 +14372,14 @@ snapshots:
 
   pathval@1.1.1: {}
 
-  perfect-debounce@1.0.0: {}
-
   picocolors@1.1.1: {}
 
   picomatch@2.3.1: {}
 
+  picomatch@4.0.3: {}
+
+  pify@2.3.0: {}
+
   pify@3.0.0: {}
 
   pify@4.0.1: {}
@@ -15105,15 +14407,7 @@ snapshots:
       sonic-boom: 2.8.0
       thread-stream: 0.15.2
 
-  pkg-dir@4.2.0:
-    dependencies:
-      find-up: 4.1.0
-
-  pkg-types@1.0.3:
-    dependencies:
-      jsonc-parser: 3.3.1
-      mlly: 1.7.4
-      pathe: 1.1.2
+  pirates@4.0.7: {}
 
   pkg-types@1.3.1:
     dependencies:
@@ -15121,8 +14415,6 @@ snapshots:
       mlly: 1.7.4
       pathe: 2.0.3
 
-  pluralize@8.0.0: {}
-
   pngjs@5.0.0: {}
 
   pony-cause@2.1.11: {}
@@ -15152,41 +14444,29 @@ snapshots:
 
   possible-typed-array-names@1.1.0: {}
 
-  postcss-discard-duplicates@7.0.0(postcss@8.4.38):
-    dependencies:
-      postcss: 8.4.38
-
-  postcss-discard-empty@7.0.0(postcss@8.4.38):
-    dependencies:
-      postcss: 8.4.38
-
-  postcss-merge-rules@7.0.0(postcss@8.4.38):
-    dependencies:
-      browserslist: 4.23.0
-      caniuse-api: 3.0.0
-      cssnano-utils: 5.0.0(postcss@8.4.38)
-      postcss: 8.4.38
-      postcss-selector-parser: 6.0.16
-
-  postcss-minify-selectors@7.0.0(postcss@8.4.38):
+  postcss-import@15.1.0(postcss@8.5.3):
     dependencies:
-      postcss: 8.4.38
-      postcss-selector-parser: 6.0.16
+      postcss: 8.5.3
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.10
 
-  postcss-nested@6.0.1(postcss@8.4.38):
+  postcss-js@4.1.0(postcss@8.5.3):
     dependencies:
-      postcss: 8.4.38
-      postcss-selector-parser: 6.0.16
+      camelcase-css: 2.0.1
+      postcss: 8.5.3
 
-  postcss-normalize-whitespace@7.0.0(postcss@8.4.38):
+  postcss-load-config@6.0.1(jiti@1.21.7)(postcss@8.5.3):
     dependencies:
-      postcss: 8.4.38
-      postcss-value-parser: 4.2.0
+      lilconfig: 3.1.3
+    optionalDependencies:
+      jiti: 1.21.7
+      postcss: 8.5.3
 
-  postcss-selector-parser@6.0.16:
+  postcss-nested@6.2.0(postcss@8.5.3):
     dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
+      postcss: 8.5.3
+      postcss-selector-parser: 6.1.2
 
   postcss-selector-parser@6.1.2:
     dependencies:
@@ -15201,12 +14481,6 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
-  postcss@8.4.38:
-    dependencies:
-      nanoid: 3.3.8
-      picocolors: 1.1.1
-      source-map-js: 1.2.1
-
   postcss@8.5.3:
     dependencies:
       nanoid: 3.3.8
@@ -15217,19 +14491,10 @@ snapshots:
 
   preact@10.26.2: {}
 
-  preferred-pm@3.1.2:
-    dependencies:
-      find-up: 5.0.0
-      find-yarn-workspace-root2: 1.2.16
-      path-exists: 4.0.0
-      which-pm: 2.0.0
-
   prelude-ls@1.2.1: {}
 
   prettier@2.8.8: {}
 
-  prettier@3.2.5: {}
-
   prettier@3.5.3: {}
 
   pretty-format@29.7.0:
@@ -15391,6 +14656,10 @@ snapshots:
 
   react@19.1.1: {}
 
+  read-cache@1.0.0:
+    dependencies:
+      pify: 2.3.0
+
   read-yaml-file@1.1.0:
     dependencies:
       graceful-fs: 4.2.11
@@ -15739,8 +15008,6 @@ snapshots:
       mrmime: 2.0.1
       totalist: 3.0.1
 
-  sisteransi@1.0.5: {}
-
   slash@3.0.0: {}
 
   socket.io-client@4.8.1(bufferutil@4.0.9)(utf-8-validate@5.0.10):
@@ -15886,6 +15153,16 @@ snapshots:
       client-only: 0.0.1
       react: 19.1.1
 
+  sucrase@3.35.1:
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.8
+      commander: 4.1.1
+      lines-and-columns: 1.2.4
+      mz: 2.7.0
+      pirates: 4.0.7
+      tinyglobby: 0.2.15
+      ts-interface-checker: 0.1.13
+
   superstruct@1.0.4: {}
 
   superstruct@2.0.2: {}
@@ -15902,6 +15179,36 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  tailwind-merge@2.6.1: {}
+
+  tailwindcss@3.4.19:
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      arg: 5.0.2
+      chokidar: 3.6.0
+      didyoumean: 1.2.2
+      dlv: 1.1.3
+      fast-glob: 3.3.3
+      glob-parent: 6.0.2
+      is-glob: 4.0.3
+      jiti: 1.21.7
+      lilconfig: 3.1.3
+      micromatch: 4.0.8
+      normalize-path: 3.0.0
+      object-hash: 3.0.0
+      picocolors: 1.1.1
+      postcss: 8.5.3
+      postcss-import: 15.1.0(postcss@8.5.3)
+      postcss-js: 4.1.0(postcss@8.5.3)
+      postcss-load-config: 6.0.1(jiti@1.21.7)(postcss@8.5.3)
+      postcss-nested: 6.2.0(postcss@8.5.3)
+      postcss-selector-parser: 6.1.2
+      resolve: 1.22.10
+      sucrase: 3.35.1
+    transitivePeerDependencies:
+      - tsx
+      - yaml
+
   term-size@2.2.1: {}
 
   terser@5.39.0:
@@ -15918,6 +15225,14 @@ snapshots:
 
   text-table@0.2.0: {}
 
+  thenify-all@1.6.0:
+    dependencies:
+      thenify: 3.3.1
+
+  thenify@3.3.1:
+    dependencies:
+      any-promise: 1.3.0
+
   thread-stream@0.15.2:
     dependencies:
       real-require: 0.1.0
@@ -15928,6 +15243,11 @@ snapshots:
 
   tinybench@2.9.0: {}
 
+  tinyglobby@0.2.15:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+
   tinypool@0.8.4: {}
 
   tinyspy@2.2.1: {}
@@ -15978,23 +15298,7 @@ snapshots:
     dependencies:
       typescript: 5.4.5
 
-  ts-evaluator@1.2.0(typescript@5.4.5):
-    dependencies:
-      ansi-colors: 4.1.3
-      crosspath: 2.0.0
-      object-path: 0.11.8
-      typescript: 5.4.5
-
-  ts-morph@21.0.1:
-    dependencies:
-      '@ts-morph/common': 0.22.0
-      code-block-writer: 12.0.0
-
-  ts-pattern@5.0.8: {}
-
-  tsconfck@3.0.2(typescript@5.4.5):
-    optionalDependencies:
-      typescript: 5.4.5
+  ts-interface-checker@0.1.13: {}
 
   tsconfig-paths@3.15.0:
     dependencies:
@@ -16076,8 +15380,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  typescript@5.3.3: {}
-
   typescript@5.4.5: {}
 
   ufo@1.5.4: {}
@@ -16115,8 +15417,6 @@ snapshots:
 
   universalify@0.1.2: {}
 
-  universalify@2.0.1: {}
-
   unpipe@1.0.0: {}
 
   unstorage@1.15.0(idb-keyval@6.2.1):
@@ -16132,9 +15432,9 @@ snapshots:
     optionalDependencies:
       idb-keyval: 6.2.1
 
-  update-browserslist-db@1.1.2(browserslist@4.23.0):
+  update-browserslist-db@1.2.3(browserslist@4.28.1):
     dependencies:
-      browserslist: 4.23.0
+      browserslist: 4.28.1
       escalade: 3.2.0
       picocolors: 1.1.1
 
@@ -16515,11 +15815,6 @@ snapshots:
 
   which-module@2.0.1: {}
 
-  which-pm@2.0.0:
-    dependencies:
-      load-yaml-file: 0.2.0
-      path-exists: 4.0.0
-
   which-typed-array@1.1.18:
     dependencies:
       available-typed-arrays: 1.0.7

From 9df34db267d4c571bcb99dcac39ef1d9d3940b51 Mon Sep 17 00:00:00 2001
From: Ted Palmer <etpalmer17@gmail.com>
Date: Mon, 2 Mar 2026 00:26:13 -0500
Subject: [PATCH 03/25] fine tune migration

---
 .../providers/RelayKitProviderWrapper.tsx     |   4 +-
 demo/pages/_app.tsx                           |  10 +-
 demo/pages/ui/swap.tsx                        |  48 ++++---
 .../ui/src/components/common/AmountInput.tsx  |   4 +-
 .../src/components/common/CopyToClipBoard.tsx |   3 +-
 .../components/common/CustomAddressModal.tsx  |   2 +-
 .../components/common/MultiWalletDropdown.tsx |  43 ++++---
 .../components/common/PercentageButtons.tsx   |  14 +-
 .../common/SlippageToleranceConfig.tsx        |  29 +++--
 .../TokenSelector/ChainFilterSidebar.tsx      |  24 ++--
 .../common/TokenSelector/ChainShortcuts.tsx   |   2 +-
 .../common/TokenSelector/SuggestedTokens.tsx  |   3 +-
 .../common/TokenSelector/TokenList.tsx        |   5 +-
 .../common/TokenSelector/TokenSelector.tsx    |   2 +-
 .../TokenSelector/triggers/TokenTrigger.tsx   |   6 +-
 .../common/UnverifiedTokenModal.tsx           |   8 +-
 .../ui/src/components/primitives/Button.tsx   |   8 +-
 .../ui/src/components/primitives/Dialog.tsx   |  39 ++++--
 .../ui/src/components/primitives/Dropdown.tsx |   7 +-
 .../ui/src/components/primitives/Input.tsx    |   7 +-
 .../ui/src/components/primitives/Pill.tsx     |   2 +-
 .../ui/src/components/primitives/Switch.tsx   |   4 +-
 .../ui/src/components/primitives/Tooltip.tsx  |   7 +-
 .../src/components/widgets/FeeBreakdown.tsx   |   7 +-
 .../ui/src/components/widgets/SwapButton.tsx  |   6 +-
 .../components/widgets/SwapWidget/index.tsx   |   7 +-
 packages/ui/src/styles/base.css               | 120 +++++++++---------
 packages/ui/src/utils/theme.ts                |  19 ++-
 packages/ui/tailwind.config.ts                |  22 +++-
 29 files changed, 280 insertions(+), 182 deletions(-)

diff --git a/demo/components/providers/RelayKitProviderWrapper.tsx b/demo/components/providers/RelayKitProviderWrapper.tsx
index 1347fca07..d3a7f71b5 100644
--- a/demo/components/providers/RelayKitProviderWrapper.tsx
+++ b/demo/components/providers/RelayKitProviderWrapper.tsx
@@ -69,8 +69,8 @@ export const RelayKitProviderWrapper: FC<{
         }
       }}
       theme={{
-        font: 'Barlow, -apple-system, Helvetica, sans-serif',
-        fontHeading: 'Chivo, -apple-system, Helvetica, sans-serif',
+        font: 'var(--font-inter), -apple-system, Helvetica, sans-serif',
+        fontHeading: 'var(--font-inter), -apple-system, Helvetica, sans-serif',
         buttons: {
           cta: {
             fontStyle: 'italic'
diff --git a/demo/pages/_app.tsx b/demo/pages/_app.tsx
index 11f97c831..e9a6206cd 100644
--- a/demo/pages/_app.tsx
+++ b/demo/pages/_app.tsx
@@ -35,7 +35,7 @@ import { AbstractEvmWalletConnectors } from '@dynamic-labs-connectors/abstract-g
 import { MoonPayProvider } from 'context/MoonpayProvider'
 import { queryRelayChains } from '@relayprotocol/relay-kit-hooks'
 import { RelayKitProviderWrapper } from 'components/providers/RelayKitProviderWrapper'
-import { Barlow, Chivo } from 'next/font/google'
+import { Barlow, Chivo, Inter } from 'next/font/google'
 import { Porto } from 'porto'
 
 Porto.create()
@@ -55,6 +55,13 @@ export const barlow = Barlow({
   variable: '--font-barlow'
 })
 
+export const inter = Inter({
+  weight: ['400', '500', '600', '700'],
+  display: 'swap',
+  subsets: ['latin'],
+  variable: '--font-inter'
+})
+
 type AppWrapperProps = {
   children: ReactNode
   dynamicChains: RelayChain[]
@@ -114,6 +121,7 @@ const AppWrapper: FC<AppWrapperProps> = ({ children, dynamicChains }) => {
         :root {
           --font-chivo: ${chivo.style.fontFamily};
           --font-barlow: ${barlow.style.fontFamily};
+          --font-inter: ${inter.style.fontFamily};
         }
       `
 
diff --git a/demo/pages/ui/swap.tsx b/demo/pages/ui/swap.tsx
index 675a3b4ee..64d5ad934 100644
--- a/demo/pages/ui/swap.tsx
+++ b/demo/pages/ui/swap.tsx
@@ -200,7 +200,10 @@ const SwapWidgetPage: NextPage = () => {
   return (
     <Layout
       styles={{
-        background: theme === 'light' ? 'rgba(245, 242, 255, 1)' : '#1c172b'
+        background:
+          theme === 'light'
+            ? 'linear-gradient(135deg, rgba(245, 242, 255, 1) 0%, rgba(235, 230, 255, 1) 100%)'
+            : 'linear-gradient(135deg, #1c172b 0%, #0f0d1a 100%)'
       }}
     >
       <Head>
@@ -212,17 +215,20 @@ const SwapWidgetPage: NextPage = () => {
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'center',
-          justifyContent: 'center',
-          paddingTop: 50,
-          paddingInline: '10px',
-          gap: 20
+          justifyContent: 'flex-start',
+          paddingTop: 40,
+          paddingBottom: 40,
+          paddingInline: '16px',
+          gap: 24
         }}
       >
         <div
           style={{
             display: 'flex',
             flexDirection: 'column',
-            gap: 8
+            gap: 8,
+            width: '100%',
+            maxWidth: 420
           }}
         >
           <div
@@ -379,29 +385,38 @@ const SwapWidgetPage: NextPage = () => {
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'center',
-          marginTop: '40px',
-          gap: '20px'
+          gap: '16px',
+          width: '100%',
+          maxWidth: 420,
+          marginTop: '8px',
+          padding: '20px',
+          borderRadius: '12px',
+          background: theme === 'light' ? 'rgba(255,255,255,0.7)' : 'rgba(255,255,255,0.05)',
+          backdropFilter: 'blur(8px)',
+          border: theme === 'light' ? '1px solid rgba(0,0,0,0.06)' : '1px solid rgba(255,255,255,0.08)',
+          fontSize: '14px'
         }}
       >
-        <div>
-          <label>Single Chain Mode: </label>
+        <div style={{ fontWeight: 600, fontSize: '13px', textTransform: 'uppercase', letterSpacing: '0.5px', opacity: 0.5, width: '100%' }}>
+          Config
+        </div>
+
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', width: '100%' }}>
           <input
             type="checkbox"
+            id="single-chain"
             checked={singleChainMode}
             onChange={(e) => setSingleChainMode(e.target.checked)}
           />
+          <label htmlFor="single-chain">Single Chain Mode</label>
         </div>
 
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
-          <div style={{ fontWeight: 'bold', marginBottom: '5px' }}>
-            Supported Wallet VMs:
-          </div>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px 16px', width: '100%' }}>
           {WALLET_VM_TYPES.map((vm) => (
             <div
               key={vm}
-              style={{ display: 'flex', alignItems: 'center', gap: '10px' }}
+              style={{ display: 'flex', alignItems: 'center', gap: '6px' }}
             >
-              <label htmlFor={`vm-${vm}`}>{vm.toUpperCase()}: </label>
               <input
                 id={`vm-${vm}`}
                 type="checkbox"
@@ -416,6 +431,7 @@ const SwapWidgetPage: NextPage = () => {
                   }
                 }}
               />
+              <label htmlFor={`vm-${vm}`} style={{ fontSize: '13px' }}>{vm.toUpperCase()}</label>
             </div>
           ))}
         </div>
diff --git a/packages/ui/src/components/common/AmountInput.tsx b/packages/ui/src/components/common/AmountInput.tsx
index 3be055c98..27121bc24 100644
--- a/packages/ui/src/components/common/AmountInput.tsx
+++ b/packages/ui/src/components/common/AmountInput.tsx
@@ -26,8 +26,8 @@ const AmountInput: FC<Props> = ({
       size="large"
       className={cn(
         'ph-no-capture',
-        'relay-w-full relay-bg-none relay-bg-transparent relay-font-semibold relay-text-[32px]',
-        '!relay-px-0 relay-py-1',
+        'relay-w-full relay-bg-none relay-bg-transparent relay-font-bold relay-text-[32px]',
+        '!relay-px-0 !relay-py-0',
         'focus:relay-shadow-none focus:relay-outline-none',
         'placeholder:relay-text-[color:var(--relay-colors-gray12)]',
         inputProps.className
diff --git a/packages/ui/src/components/common/CopyToClipBoard.tsx b/packages/ui/src/components/common/CopyToClipBoard.tsx
index 5ecfd6ae2..7114f83f4 100644
--- a/packages/ui/src/components/common/CopyToClipBoard.tsx
+++ b/packages/ui/src/components/common/CopyToClipBoard.tsx
@@ -41,7 +41,8 @@ export const CopyToClipBoard: FC<CopyToClipBoardProps> = ({ text }) => {
           setOpen(true)
           setTimeout(() => setOpen(false), 1000)
         }}
-        className="relay-text-[color:var(--relay-colors-gray9)] hover:relay-text-[color:var(--relay-colors-gray11)]"
+        style={{ color: 'var(--relay-colors-gray9)' }}
+        className="hover:!relay-text-[color:var(--relay-colors-gray11)]"
       >
         <span className="relay-inline-flex relay-transition-transform relay-duration-150">
           {isCopied ? (
diff --git a/packages/ui/src/components/common/CustomAddressModal.tsx b/packages/ui/src/components/common/CustomAddressModal.tsx
index 83d92d6fd..7c8293e4d 100644
--- a/packages/ui/src/components/common/CustomAddressModal.tsx
+++ b/packages/ui/src/components/common/CustomAddressModal.tsx
@@ -181,7 +181,7 @@ export const CustomAddressModal: FC<Props> = ({
         <Text style="h6">To Address</Text>
         <Flex direction="column" className="relay-gap-2 relay-relative">
           <Flex
-            className="relay-relative relay-inline-block"
+            className="relay-relative relay-w-full"
           >
             <Input
               type="text"
diff --git a/packages/ui/src/components/common/MultiWalletDropdown.tsx b/packages/ui/src/components/common/MultiWalletDropdown.tsx
index 57c5e03b0..65a8f331a 100644
--- a/packages/ui/src/components/common/MultiWalletDropdown.tsx
+++ b/packages/ui/src/components/common/MultiWalletDropdown.tsx
@@ -169,33 +169,34 @@ export const MultiWalletDropdown: FC<MultiWalletDropdownProps> = ({
             ) : null}
             <Text
               style="subtitle2"
-              className={cn(
-                !selectedWallet && selectedWalletAddress
-                  ? 'relay-text-[color:var(--relay-colors-amber11)]'
-                  : 'relay-text-[color:var(--relay-colors-anchor-color)]',
-                'relay-whitespace-nowrap relay-overflow-hidden relay-text-ellipsis'
-              )}
+              className="relay-whitespace-nowrap relay-overflow-hidden relay-text-ellipsis"
             >
-              {isSupportedSelectedWallet &&
-              selectedWalletAddress &&
-              selectedWalletAddress != ''
-                ? shouldShowEns
-                  ? displayName
-                  : truncateAddress(selectedWalletAddress)
-                : 'Select wallet'}
+              <span style={{
+                color: !selectedWallet && selectedWalletAddress
+                  ? 'var(--relay-colors-amber11)'
+                  : 'var(--relay-colors-primary9)'
+              }}>
+                {isSupportedSelectedWallet &&
+                selectedWalletAddress &&
+                selectedWalletAddress != ''
+                  ? shouldShowEns
+                    ? displayName
+                    : truncateAddress(selectedWalletAddress)
+                  : 'Select wallet'}
+              </span>
             </Text>
           </Flex>
           {showDropdown && (
-            <Box
-              className={cn(
-                !selectedWallet && selectedWalletAddress
-                  ? 'relay-text-[color:var(--relay-colors-amber11)]'
-                  : 'relay-text-[color:var(--relay-colors-anchor-color)]',
-                'relay-shrink-0'
-              )}
+            <div
+              className="relay-shrink-0"
+              style={{
+                color: !selectedWallet && selectedWalletAddress
+                  ? 'var(--relay-colors-amber11)'
+                  : 'var(--relay-colors-primary9)'
+              }}
             >
               <FontAwesomeIcon icon={faChevronDown} width={14} height={14} />
-            </Box>
+            </div>
           )}
         </Button>
       }
diff --git a/packages/ui/src/components/common/PercentageButtons.tsx b/packages/ui/src/components/common/PercentageButtons.tsx
index ea8761561..b31529f18 100644
--- a/packages/ui/src/components/common/PercentageButtons.tsx
+++ b/packages/ui/src/components/common/PercentageButtons.tsx
@@ -49,10 +49,10 @@ export const PercentageButtons: FC<PercentageButtonsProps> = ({
   const isMobile = variant === 'mobile'
 
   const defaultButtonClassName = cn(
-    isMobile ? 'relay-text-[14px]' : 'relay-text-[12px]',
-    'relay-font-medium relay-px-1',
-    isMobile ? 'relay-py-[6px]' : 'relay-py-1',
-    isMobile ? '' : 'relay-min-h-[23px]',
+    'relay-font-medium',
+    isMobile ? 'relay-px-[4px] relay-py-[6px]' : 'relay-p-[4px]',
+    isMobile ? 'relay-h-[26px]' : 'relay-h-[23px]',
+    'relay-min-h-0',
     'relay-leading-none',
     'relay-bg-[var(--relay-colors-widget-selector-background)]',
     'relay-border-none',
@@ -62,6 +62,8 @@ export const PercentageButtons: FC<PercentageButtonsProps> = ({
     'hover:relay-bg-[var(--relay-colors-widget-selector-hover-background)]'
   )
 
+  const buttonFontSize = isMobile ? '14px' : '12px'
+
   const buttonClassName = customButtonClassName || defaultButtonClassName
 
   const handleMaxClick = async () => {
@@ -123,6 +125,8 @@ export const PercentageButtons: FC<PercentageButtonsProps> = ({
           aria-label={`${percent}%`}
           className={buttonClassName}
           color="white"
+          size="none"
+          style={{ fontSize: buttonFontSize }}
           disabled={!balance || balance === 0n}
           onClick={() => {
             if (balance && balance > 0n) {
@@ -139,6 +143,8 @@ export const PercentageButtons: FC<PercentageButtonsProps> = ({
         aria-label="MAX"
         className={buttonClassName}
         color="white"
+        size="none"
+        style={{ fontSize: buttonFontSize }}
         disabled={!balance || balance === 0n}
         onMouseEnter={handleMaxMouseEnter}
         onClick={handleMaxClick}
diff --git a/packages/ui/src/components/common/SlippageToleranceConfig.tsx b/packages/ui/src/components/common/SlippageToleranceConfig.tsx
index 71c199c40..5c730c1c1 100644
--- a/packages/ui/src/components/common/SlippageToleranceConfig.tsx
+++ b/packages/ui/src/components/common/SlippageToleranceConfig.tsx
@@ -123,25 +123,25 @@ const SlippageTabs: FC<SlippageTabsProps> = ({
           className="relay-hidden max-[520px]:relay-flex max-[520px]:relay-w-full max-[520px]:relay-gap-2 max-[520px]:relay-mb-2"
         >
           <Button
-            color="ghost"
-            size="small"
-            className="relay-flex-1 relay-min-h-8 relay-bg-[var(--relay-colors-gray3)] relay-font-medium relay-text-sm relay-py-[2px] relay-rounded-[6px] relay-justify-center hover:relay-bg-[var(--relay-colors-gray5)]"
+            color="grey"
+            size="none"
+            className="relay-flex-1 relay-min-h-0 relay-h-[28px] relay-font-medium relay-text-sm relay-rounded-[6px] relay-justify-center"
             onClick={() => handleInputChange('1')}
           >
             1%
           </Button>
           <Button
-            color="ghost"
-            size="small"
-            className="relay-flex-1 relay-min-h-8 relay-bg-[var(--relay-colors-gray3)] relay-font-medium relay-text-sm relay-py-[2px] relay-rounded-[6px] relay-justify-center hover:relay-bg-[var(--relay-colors-gray5)]"
+            color="grey"
+            size="none"
+            className="relay-flex-1 relay-min-h-0 relay-h-[28px] relay-font-medium relay-text-sm relay-rounded-[6px] relay-justify-center"
             onClick={() => handleInputChange('2')}
           >
             2%
           </Button>
           <Button
-            color="ghost"
-            size="small"
-            className="relay-flex-1 relay-min-h-8 relay-bg-[var(--relay-colors-gray3)] relay-font-medium relay-text-sm relay-py-[2px] relay-rounded-[6px] relay-justify-center hover:relay-bg-[var(--relay-colors-gray5)]"
+            color="grey"
+            size="none"
+            className="relay-flex-1 relay-min-h-0 relay-h-[28px] relay-font-medium relay-text-sm relay-rounded-[6px] relay-justify-center"
             onClick={() => handleInputChange('5')}
           >
             5%
@@ -341,8 +341,11 @@ export const SlippageToleranceConfig: FC<SlippageToleranceConfigProps> = ({
         aria-label="Slippage Tolerance Configuration"
         color="ghost"
         size="none"
-        className="relay-items-center relay-justify-center relay-gap-1 relay-bg-[var(--relay-colors-subtle-background-color)] relay-p-2 relay-rounded-[12px] relay-border relay-border-solid relay-border-[var(--relay-colors-gray5)] relay-h-9 relay-px-[10px]"
-        style={{ color: tokenToColor(slippageRatingColor) ?? 'var(--relay-colors-gray9)' }}
+        className="relay-items-center relay-justify-center relay-gap-1 relay-p-2 relay-rounded-[12px] relay-border relay-border-solid relay-border-[var(--relay-colors-gray5)] relay-h-9 relay-px-[10px]"
+        style={{
+          color: tokenToColor(slippageRatingColor) ?? 'var(--relay-colors-gray9)',
+          backgroundColor: 'var(--relay-colors-widget-card-background)'
+        }}
       >
         {open === false && displayValue && (
           <Text style="subtitle2" className={slippageRatingColor ? `relay-text-[color:var(--relay-colors-${slippageRatingColor})]` : undefined}>
@@ -368,7 +371,7 @@ export const SlippageToleranceConfig: FC<SlippageToleranceConfigProps> = ({
   }
 
   return (
-    <div className="relay-kit-reset">
+    <div className="relay-kit-reset relay-inline-flex">
       {isMobile ? (
         <Modal
           open={open}
@@ -405,7 +408,7 @@ export const SlippageToleranceConfig: FC<SlippageToleranceConfigProps> = ({
           contentProps={{
             align: 'end',
             sideOffset: 5,
-            className: 'relay-max-w-[188px] relay-mx-0',
+            className: 'relay-max-w-[188px] relay-mx-0 relay-p-3',
             avoidCollisions: false,
             onCloseAutoFocus: (e) => {
               e.preventDefault()
diff --git a/packages/ui/src/components/common/TokenSelector/ChainFilterSidebar.tsx b/packages/ui/src/components/common/TokenSelector/ChainFilterSidebar.tsx
index 0fb31b982..5f40d855b 100644
--- a/packages/ui/src/components/common/TokenSelector/ChainFilterSidebar.tsx
+++ b/packages/ui/src/components/common/TokenSelector/ChainFilterSidebar.tsx
@@ -212,11 +212,10 @@ export const ChainFilterSidebar: FC<ChainFilterSidebarProps> = ({
                         }}
                         ref={isSameChainSelected ? activeChainRef : null}
                         className={cn(
-                          'relay-p-2 relay-flex relay-items-center relay-gap-2 relay-relative relay-transition-[backdrop-filter] relay-duration-[250ms] relay-ease-linear focus:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)]',
-                          isSameChainSelected
-                            ? 'relay-bg-[var(--relay-colors-gray6)] hover:relay-bg-[var(--relay-colors-gray6)]'
-                            : 'hover:relay-bg-[rgba(var(--relay-colors-gray-rgb,0,0,0),0.1)]'
+                          'relay-p-2 relay-flex relay-items-center relay-gap-2 relay-relative relay-transition-colors relay-duration-150 relay-outline-none relay-rounded-lg relay-focus-inset',
+                          !isSameChainSelected && 'hover:relay-bg-[rgba(var(--relay-colors-gray-rgb,0,0,0),0.1)]'
                         )}
+                        style={isSameChainSelected ? { backgroundColor: 'var(--relay-colors-gray6)' } : undefined}
                       >
                         <ChainIcon
                           chainId={sameChainOption.id}
@@ -404,11 +403,13 @@ const ChainFilterRow: FC<ChainFilterRowProps> = ({
           onClick={onClick}
           ref={isActive ? activeChainRef : null}
           className={cn(
-            'relay-p-2 relay-flex relay-items-center relay-gap-2 relay-relative relay-transition-[backdrop-filter] relay-duration-[250ms] relay-ease-linear focus:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)]',
-            isActive
-              ? 'relay-bg-[var(--relay-colors-gray6)] hover:relay-bg-[var(--relay-colors-gray6)]'
-              : 'hover:relay-bg-[rgba(var(--relay-colors-gray-rgb,0,0,0),0.1)]'
+            'relay-p-2 relay-flex relay-items-center relay-gap-2 relay-relative relay-transition-colors relay-duration-150 relay-outline-none relay-rounded-lg relay-focus-inset',
+            !isActive && 'hover:relay-bg-[rgba(var(--relay-colors-gray-rgb,0,0,0),0.1)]'
           )}
+          style={{
+            ...(isActive ? { backgroundColor: 'var(--relay-colors-gray6)' } : undefined),
+            boxShadow: 'none'
+          }}
         >
           <AllChainsLogo style={{ width: 24, height: 24 }} />
           <Text style="subtitle1" ellipsify>
@@ -445,11 +446,10 @@ const ChainFilterRow: FC<ChainFilterRowProps> = ({
             }
           }}
           className={cn(
-            'relay-p-2 relay-flex relay-items-center relay-gap-2 relay-w-full relay-transition-[backdrop-filter] relay-duration-[250ms] relay-ease-linear focus:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)]',
-            isActive
-              ? 'relay-bg-[var(--relay-colors-gray6)] hover:relay-bg-[var(--relay-colors-gray6)]'
-              : 'hover:relay-bg-[rgba(var(--relay-colors-gray-rgb,0,0,0),0.1)]'
+            'relay-p-2 relay-flex relay-items-center relay-gap-2 relay-w-full relay-transition-colors relay-duration-150 relay-outline-none relay-rounded-lg relay-focus-inset',
+            !isActive && 'hover:relay-bg-[rgba(var(--relay-colors-gray-rgb,0,0,0),0.1)]'
           )}
+          style={isActive ? { backgroundColor: 'var(--relay-colors-gray6)' } : undefined}
         >
           <ChainIcon chainId={chain.id} square width={24} height={24} />
           <Text style="subtitle1" ellipsify>
diff --git a/packages/ui/src/components/common/TokenSelector/ChainShortcuts.tsx b/packages/ui/src/components/common/TokenSelector/ChainShortcuts.tsx
index 007c2f716..f38238859 100644
--- a/packages/ui/src/components/common/TokenSelector/ChainShortcuts.tsx
+++ b/packages/ui/src/components/common/TokenSelector/ChainShortcuts.tsx
@@ -93,7 +93,7 @@ export const ChainShortcuts: FC<ChainShortcutsProps> = ({
   }
 
   return (
-    <Flex className="relay-gap-2 relay-w-full relay-overflow-x-auto relay-py-2">
+    <Flex className="relay-gap-2 relay-w-full relay-overflow-x-auto relay-py-2 relay-px-2 relay-rounded-[12px]" style={{ backgroundColor: 'var(--relay-colors-gray3)' }}>
       {shortcutChains.map((chain) => (
         <ChainShortcutButton
           key={chain.id?.toString() ?? 'all-chains'}
diff --git a/packages/ui/src/components/common/TokenSelector/SuggestedTokens.tsx b/packages/ui/src/components/common/TokenSelector/SuggestedTokens.tsx
index d3a9c077e..bfecf6708 100644
--- a/packages/ui/src/components/common/TokenSelector/SuggestedTokens.tsx
+++ b/packages/ui/src/components/common/TokenSelector/SuggestedTokens.tsx
@@ -63,7 +63,8 @@ export const SuggestedTokens: FC<SuggestedTokensProps> = ({
             }}
             color="ghost"
             size="none"
-            className="relay-flex relay-shrink-0 relay-cursor-pointer relay-outline-none relay-p-1 relay-pr-2 relay-gap-[1px] relay-items-center relay-border relay-border-solid relay-border-[var(--relay-colors-gray5)] relay-rounded-[100px] focus-visible:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)] [&[data-state=on]]:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)] active:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)] focus-within:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)]"
+            corners="pill"
+            className="relay-flex relay-shrink-0 relay-cursor-pointer relay-outline-none relay-py-1 relay-pl-1 relay-pr-2 relay-gap-[1px] relay-items-center relay-border relay-border-solid relay-border-[var(--relay-colors-gray5)] relay-focus-inset"
           >
             <ChainTokenIcon
               chainId={token.chainId}
diff --git a/packages/ui/src/components/common/TokenSelector/TokenList.tsx b/packages/ui/src/components/common/TokenSelector/TokenList.tsx
index 501c85019..c9ec296c5 100644
--- a/packages/ui/src/components/common/TokenSelector/TokenList.tsx
+++ b/packages/ui/src/components/common/TokenSelector/TokenList.tsx
@@ -52,7 +52,7 @@ export const TokenList: FC<TokenListProps> = ({
             className="relay-gap-2 relay-p-2 relay-w-full"
           >
             <Skeleton
-              className="relay-w-[40px] relay-h-[40px] relay-rounded-[50%] relay-shrink-0"
+              className="relay-w-[40px] relay-h-[40px] !relay-rounded-full relay-shrink-0"
             />
             <Flex direction="column" className="relay-gap-[2px] relay-grow">
               <Skeleton className="relay-w-[60%] relay-h-[16px]" />
@@ -82,7 +82,8 @@ export const TokenList: FC<TokenListProps> = ({
             <AccessibleListItem value={value} key={value} asChild>
               <Button
                 color="ghost"
-                className="relay-gap-2 relay-cursor-pointer relay-px-2 relay-py-2 relay-transition-[backdrop-filter] relay-duration-[250ms] relay-ease-linear hover:relay-bg-[rgba(var(--relay-colors-gray-rgb,0,0,0),0.1)] relay-shrink-0 relay-content-center relay-flex relay-w-full focus-visible:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)] [&[data-state=on]]:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)] active:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)] focus-within:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)] relay-snap-start"
+                size="none"
+                className="relay-gap-2 relay-cursor-pointer relay-p-3 relay-h-[58px] relay-rounded-lg relay-transition-colors relay-duration-150 hover:relay-bg-[rgba(var(--relay-colors-gray-rgb,0,0,0),0.1)] relay-shrink-0 relay-content-center relay-flex relay-w-full relay-outline-none relay-snap-start relay-focus-inset"
               >
                 <ChainTokenIcon
                   chainId={token.chainId}
diff --git a/packages/ui/src/components/common/TokenSelector/TokenSelector.tsx b/packages/ui/src/components/common/TokenSelector/TokenSelector.tsx
index 6d37e6c6d..a38a71bd9 100644
--- a/packages/ui/src/components/common/TokenSelector/TokenSelector.tsx
+++ b/packages/ui/src/components/common/TokenSelector/TokenSelector.tsx
@@ -575,7 +575,7 @@ const TokenSelector: FC<TokenSelectorProps> = ({
             }
           }}
           trigger={trigger}
-          className="relay-p-4 relay-flex relay-flex-col relay-w-full relay-max-w-full sm:relay-max-w-full"
+          className="relay-p-2 relay-flex relay-flex-col relay-w-full relay-max-w-full sm:relay-max-w-full"
           contentStyle={{
             height: isDesktop ? 'min(85vh, 600px)' : '100%',
             maxHeight: isDesktop ? 'min(85vh, 600px)' : '100%',
diff --git a/packages/ui/src/components/common/TokenSelector/triggers/TokenTrigger.tsx b/packages/ui/src/components/common/TokenSelector/triggers/TokenTrigger.tsx
index ae7006378..752bd699e 100644
--- a/packages/ui/src/components/common/TokenSelector/triggers/TokenTrigger.tsx
+++ b/packages/ui/src/components/common/TokenSelector/triggers/TokenTrigger.tsx
@@ -32,8 +32,9 @@ export const TokenTrigger: FC<TokenTriggerProps> = ({
     <Button
       color="white"
       corners="pill"
+      size="none"
       disabled={locked}
-      className="relay-h-[50px] relay-min-h-[50px] relay-w-max relay-shrink-0 relay-overflow-hidden relay-px-3 relay-py-2 relay-bg-[var(--relay-colors-widget-selector-background)] relay-border-none hover:relay-bg-[var(--relay-colors-widget-selector-hover-background)] disabled:relay-bg-[var(--relay-colors-widget-selector-background)]"
+      className="relay-w-max relay-shrink-0 relay-overflow-hidden relay-px-3 relay-py-2 relay-bg-[var(--relay-colors-widget-selector-background)] relay-border-none hover:relay-bg-[var(--relay-colors-widget-selector-hover-background)] disabled:relay-bg-[var(--relay-colors-widget-selector-background)] relay-transition-colors relay-duration-150"
       data-testid={testId}
     >
       <Flex align="center" className="relay-gap-2">
@@ -71,8 +72,9 @@ export const TokenTrigger: FC<TokenTriggerProps> = ({
     <Button
       color={address ? 'primary' : 'secondary'}
       corners="pill"
+      size="none"
       cta={true}
-      className="relay-h-[50px] relay-min-h-[50px] relay-w-max relay-shrink-0 relay-overflow-hidden relay-px-3 relay-py-2 relay-font-bold relay-text-[16px]"
+      className="relay-w-max relay-shrink-0 relay-overflow-hidden relay-px-3 relay-py-2 relay-font-bold relay-text-[16px]"
     >
       Select Token
       <Box className="relay-w-[14px]">
diff --git a/packages/ui/src/components/common/UnverifiedTokenModal.tsx b/packages/ui/src/components/common/UnverifiedTokenModal.tsx
index 24aebc32d..eed33baf3 100644
--- a/packages/ui/src/components/common/UnverifiedTokenModal.tsx
+++ b/packages/ui/src/components/common/UnverifiedTokenModal.tsx
@@ -116,13 +116,15 @@ export const UnverifiedTokenModal: FC<UnverifiedTokenModalProps> = ({
                 onDecline?.(data?.token, data?.context)
                 onOpenChange(false)
               }}
-              color="ghost"
-              className="relay-flex-1 relay-justify-center relay-bg-[var(--relay-colors-gray3)] hover:relay-bg-[var(--relay-colors-gray4)]"
+              color="grey"
+              size="small"
+              className="relay-flex-1 relay-justify-center relay-whitespace-nowrap"
             >
               Cancel
             </Button>
             <Button
               cta={true}
+              size="small"
               onClick={() => {
                 if (data?.token) {
                   const tokenIdentifier = `${data?.token.chainId}:${data?.token.address}`
@@ -144,7 +146,7 @@ export const UnverifiedTokenModal: FC<UnverifiedTokenModalProps> = ({
                 onAcceptToken(data?.token, data?.context)
               }}
               color="warning"
-              className="relay-flex-1 relay-justify-center relay-px-4"
+              className="relay-flex-1 relay-justify-center relay-px-4 relay-whitespace-nowrap"
             >
               I Understand
             </Button>
diff --git a/packages/ui/src/components/primitives/Button.tsx b/packages/ui/src/components/primitives/Button.tsx
index cfe1761f3..44be38141 100644
--- a/packages/ui/src/components/primitives/Button.tsx
+++ b/packages/ui/src/components/primitives/Button.tsx
@@ -5,11 +5,13 @@ import { cn } from '../../utils/cn.js'
 const buttonVariants = cva(
   [
     'relay-cursor-pointer relay-outline-none relay-font-body relay-font-bold relay-text-[16px]',
-    'relay-transition-[background-color] relay-duration-[250ms] relay-ease-linear',
+    'relay-transition-all relay-duration-200 relay-ease-out relay-select-none',
     'relay-gap-2 relay-inline-flex relay-items-center relay-leading-[20px]',
-    'focus-visible:relay-shadow-[0_0_0_2px_var(--relay-colors-focus-color)]',
+    'focus-visible:relay-ring-2 focus-visible:relay-ring-[var(--relay-colors-focus-color)] focus-visible:relay-ring-offset-2',
+    'active:relay-scale-[0.98]',
     'disabled:relay-cursor-not-allowed disabled:relay-bg-[var(--relay-colors-button-disabled-background)] disabled:relay-text-[color:var(--relay-colors-button-disabled-color)]',
-    'disabled:hover:relay-bg-[var(--relay-colors-button-disabled-background)] disabled:hover:relay-text-[color:var(--relay-colors-button-disabled-color)]'
+    'disabled:hover:relay-bg-[var(--relay-colors-button-disabled-background)] disabled:hover:relay-text-[color:var(--relay-colors-button-disabled-color)]',
+    'disabled:active:relay-scale-100'
   ].join(' '),
   {
     variants: {
diff --git a/packages/ui/src/components/primitives/Dialog.tsx b/packages/ui/src/components/primitives/Dialog.tsx
index 2d24ae376..26c81a9e2 100644
--- a/packages/ui/src/components/primitives/Dialog.tsx
+++ b/packages/ui/src/components/primitives/Dialog.tsx
@@ -20,7 +20,12 @@ const Overlay = forwardRef<
     <DialogPrimitive.Overlay
       ref={forwardedRef}
       {...props}
-      className={cn('relay-fixed relay-inset-0', className, 'relay-kit-reset')}
+      className={cn(
+        'relay-fixed relay-inset-0 relay-bg-black/50 relay-backdrop-blur-sm',
+        'relay-animate-overlay-fade-in data-[state=closed]:relay-animate-overlay-fade-out',
+        className,
+        'relay-kit-reset'
+      )}
     >
       {children}
     </DialogPrimitive.Overlay>
@@ -31,9 +36,8 @@ const contentBase = [
   'relay-bg-[var(--relay-colors-modal-background)]',
   'relay-rounded-modal',
   'relay-border-modal',
-  'relay-fixed relay-left-1/2',
-  'relay-min-w-[90vw] relay-max-w-[100vw]',
-  'sm:relay-min-w-[400px] sm:relay-max-w-[532px]',
+  'relay-shadow-xl',
+  'relay-fixed',
   'relay-max-h-[85vh] relay-overflow-y-auto',
   'focus:relay-outline-none'
 ].join(' ')
@@ -61,19 +65,26 @@ const AnimatedContent = forwardRef<
 >(({ children, className, disableAnimation = false, ...props }, forwardedRef) => {
   const isMobile = useMediaQuery('(max-width: 520px)')
   const isMobileSlideUp = isMobile && !disableAnimation
+  const isMobileFullScreen = isMobile && disableAnimation
 
-  const mobileClasses = [
-    'relay-bottom-0 relay-top-auto relay-left-0',
-    'relay-translate-x-0',
+  const mobileSlideUpClasses = [
+    'relay-bottom-0 relay-top-auto relay-left-0 relay-w-full',
     'relay-animate-dialog-slide-up',
     'data-[state=closed]:relay-animate-dialog-slide-down',
-    'max-[520px]:relay-rounded-b-none max-[520px]:relay-w-full'
+    'max-[520px]:relay-rounded-b-none'
+  ].join(' ')
+
+  const mobileFullScreenClasses = [
+    'relay-top-0 relay-left-0 relay-w-full relay-h-full',
+    'relay-max-h-full relay-rounded-none'
   ].join(' ')
 
   const desktopClasses = [
-    'relay-top-1/2 -relay-translate-x-1/2 -relay-translate-y-1/2',
-    'relay-animate-dialog-fade-in',
-    'data-[state=closed]:relay-animate-dialog-fade-out'
+    'relay-left-1/2 relay-top-1/2',
+    'relay-min-w-[90vw] relay-max-w-[100vw]',
+    'sm:relay-min-w-[400px] sm:relay-max-w-[532px]',
+    'relay-animate-scale-in',
+    'data-[state=closed]:relay-animate-scale-out'
   ].join(' ')
 
   return (
@@ -81,7 +92,11 @@ const AnimatedContent = forwardRef<
       ref={forwardedRef}
       className={cn(
         contentBase,
-        isMobileSlideUp ? mobileClasses : desktopClasses,
+        isMobileFullScreen
+          ? mobileFullScreenClasses
+          : isMobileSlideUp
+            ? mobileSlideUpClasses
+            : desktopClasses,
         className
       )}
       {...props}
diff --git a/packages/ui/src/components/primitives/Dropdown.tsx b/packages/ui/src/components/primitives/Dropdown.tsx
index 4ae1085dd..0cd5e7a16 100644
--- a/packages/ui/src/components/primitives/Dropdown.tsx
+++ b/packages/ui/src/components/primitives/Dropdown.tsx
@@ -19,10 +19,11 @@ const DropdownMenuContent = forwardRef<
       {...props}
       ref={forwardedRef}
       className={cn(
-        'relay-mx-4 relay-p-3 relay-rounded-[8px] relay-z-[10000002]',
+        'relay-mx-4 relay-p-0 relay-rounded-[8px] relay-z-[10000002]',
         'relay-bg-[var(--relay-colors-modal-background)]',
-        'relay-shadow-[0px_0px_50px_0px_#0000001F]',
+        'relay-shadow-lg',
         'relay-border-dropdown',
+        'relay-animate-content-fade-in',
         className
       )}
     >
@@ -45,7 +46,7 @@ const DropdownMenuItem = forwardRef<
         'relay-flex relay-items-center relay-text-[16px]',
         'relay-text-[color:var(--relay-colors-text-default)]',
         'relay-bg-[var(--relay-colors-modal-background)]',
-        'relay-p-3 relay-outline-none relay-cursor-pointer',
+        'relay-p-2 relay-outline-none relay-cursor-pointer',
         'relay-transition-[background-color] relay-duration-150 relay-ease-linear',
         'hover:relay-bg-[var(--relay-colors-gray-10)]/10',
         'focus:relay-bg-[var(--relay-colors-gray-10)]/10',
diff --git a/packages/ui/src/components/primitives/Input.tsx b/packages/ui/src/components/primitives/Input.tsx
index b4f13868c..a456a8c9c 100644
--- a/packages/ui/src/components/primitives/Input.tsx
+++ b/packages/ui/src/components/primitives/Input.tsx
@@ -5,10 +5,11 @@ import { cn } from '../../utils/cn.js'
 
 const inputVariants = cva(
   [
-    'relay-px-4 relay-py-3 relay-rounded-input relay-font-body relay-text-[16px]',
+    'relay-w-full relay-px-4 relay-py-3 relay-rounded-input relay-font-body relay-text-[16px]',
     'relay-text-[color:var(--relay-colors-input-color)]',
     'relay-bg-[var(--relay-colors-input-background)]',
-    'placeholder:relay-text-[color:var(--relay-colors-gray10)]',
+    'placeholder:relay-text-[color:var(--relay-colors-gray9)]',
+    'relay-transition-shadow relay-duration-200',
     'focus:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)] focus:relay-outline-none',
     'disabled:relay-cursor-not-allowed',
     '[&::-webkit-outer-spin-button]:relay-appearance-none [&::-webkit-inner-spin-button]:relay-appearance-none'
@@ -59,7 +60,7 @@ const Input = forwardRef<
           <div className="relay-flex relay-relative">
             <div
               className={cn(
-                'relay-absolute relay-top-[12px] relay-z-0',
+                'relay-absolute relay-top-[12px] relay-z-10',
                 iconPosition === 'right'
                   ? 'relay-right-4 relay-left-[unset]'
                   : 'relay-left-4 relay-right-[unset]',
diff --git a/packages/ui/src/components/primitives/Pill.tsx b/packages/ui/src/components/primitives/Pill.tsx
index 5e2502d7b..58014b6eb 100644
--- a/packages/ui/src/components/primitives/Pill.tsx
+++ b/packages/ui/src/components/primitives/Pill.tsx
@@ -3,7 +3,7 @@ import type { FC, HTMLAttributes } from 'react'
 import { cn } from '../../utils/cn.js'
 
 export const pillVariants = cva(
-  'relay-flex relay-bg-[var(--relay-colors-subtle-background-color)] relay-px-3 relay-py-1 relay-gap-1',
+  'relay-flex relay-bg-[var(--relay-colors-subtle-background-color)] relay-px-3 relay-py-1 relay-gap-1 relay-transition-colors relay-duration-150',
   {
     variants: {
       color: {
diff --git a/packages/ui/src/components/primitives/Switch.tsx b/packages/ui/src/components/primitives/Switch.tsx
index 9a044fc64..913857d0e 100644
--- a/packages/ui/src/components/primitives/Switch.tsx
+++ b/packages/ui/src/components/primitives/Switch.tsx
@@ -18,7 +18,7 @@ export const StyledSwitch = forwardRef<
         'relay-cursor-pointer relay-w-[38px] relay-h-[20px]',
         'relay-bg-[var(--relay-colors-gray7)] relay-rounded-full',
         'relay-relative relay-flex relay-items-center relay-px-[10px]',
-        'relay-transition-[background-color] relay-duration-[250ms]',
+        'relay-transition-all relay-duration-200',
         "data-[state='checked']:relay-bg-[var(--relay-colors-primary-button-background)]",
         className
       )}
@@ -39,7 +39,7 @@ export const StyledThumb = forwardRef<
       className={cn(
         'relay-block relay-w-[17.5px] relay-h-[17.5px]',
         'relay-bg-[var(--relay-colors-gray1)] relay-rounded-full',
-        'relay-z-[1] relay-border relay-border-solid relay-border-[var(--relay-colors-gray-8)]',
+        'relay-z-[1] relay-border relay-border-solid relay-border-[var(--relay-colors-gray-8)] relay-shadow-sm',
         'relay-transition-transform relay-duration-100',
         'relay-translate-x-0 relay-will-change-transform',
         'relay-absolute relay-left-[2px]',
diff --git a/packages/ui/src/components/primitives/Tooltip.tsx b/packages/ui/src/components/primitives/Tooltip.tsx
index 1b0ddc603..2470d62a0 100644
--- a/packages/ui/src/components/primitives/Tooltip.tsx
+++ b/packages/ui/src/components/primitives/Tooltip.tsx
@@ -31,7 +31,7 @@ const Tooltip = ({
         >
           <Popover.Arrow className="relay-fill-[var(--relay-colors-modal-background)]" />
           <div
-            className="relay-z-[10000004] relay-shadow-[0px_1px_5px_rgba(0,0,0,0.2)] relay-rounded-[8px] relay-overflow-hidden"
+            className="relay-z-[10000004] relay-shadow-md relay-rounded-[8px] relay-overflow-hidden"
           >
             <div className="relay-bg-[var(--relay-colors-modal-background)] relay-p-2">
               {content}
@@ -57,11 +57,12 @@ const Tooltip = ({
           side="bottom"
           align="center"
           style={{ zIndex: 10000003 }}
+          className="relay-animate-content-fade-in"
           {...props}
         >
-          <div className="relay-fill-[var(--relay-colors-modal-background)]" />
+          <TooltipPrimitive.Arrow className="relay-fill-[var(--relay-colors-modal-background)]" />
           <div
-            className="relay-z-[10000004] relay-shadow-[0px_1px_5px_rgba(0,0,0,0.2)] relay-rounded-[8px] relay-overflow-hidden"
+            className="relay-z-[10000004] relay-shadow-md relay-rounded-[8px] relay-overflow-hidden"
           >
             <div className="relay-bg-[var(--relay-colors-modal-background)] relay-p-2">
               {content}
diff --git a/packages/ui/src/components/widgets/FeeBreakdown.tsx b/packages/ui/src/components/widgets/FeeBreakdown.tsx
index 7177b4349..ea161ab45 100644
--- a/packages/ui/src/components/widgets/FeeBreakdown.tsx
+++ b/packages/ui/src/components/widgets/FeeBreakdown.tsx
@@ -172,8 +172,8 @@ const FeeBreakdown: FC<Props> = ({
           id={'fee-breakdown-section'}
           className="relay-rounded-[var(--relay-radii-widget-card-border-radius)] relay-bg-[var(--relay-colors-widget-background)] relay-border-widget-card relay-overflow-hidden relay-mb-[var(--relay-spacing-widget-card-section-gutter)]"
         >
-          <div className="relay-mt-0 relay-mb-0 relay-px-4 relay-py-3 relay-w-full relay-flex relay-justify-center">
-            <FetchingQuoteLoader isLoading={isFetchingQuote} />
+          <div className="relay-mt-0 relay-mb-0 relay-px-3 relay-py-[12px] relay-w-full relay-flex relay-justify-center">
+            <FetchingQuoteLoader isLoading={isFetchingQuote} containerClassName="!relay-my-0 !relay-py-0" />
           </div>
         </Box>
       )
@@ -202,7 +202,8 @@ const FeeBreakdown: FC<Props> = ({
           {isAutoSlippage ? (
             <Button
               aria-label="Auto"
-              className="relay-text-[12px] relay-font-medium relay-px-1 relay-py-1 relay-min-h-[23px] relay-leading-[100%] relay-bg-[var(--relay-colors-widget-selector-background)] relay-border-none hover:relay-bg-[var(--relay-colors-widget-selector-hover-background)]"
+              className="relay-font-medium relay-px-[6px] relay-py-[2px] relay-min-h-0 relay-leading-[100%] relay-bg-[var(--relay-colors-widget-selector-background)] relay-border-none hover:relay-bg-[var(--relay-colors-widget-selector-hover-background)]"
+              style={{ fontSize: '12px' }}
               color="white"
               size="none"
               onClick={(e) => {
diff --git a/packages/ui/src/components/widgets/SwapButton.tsx b/packages/ui/src/components/widgets/SwapButton.tsx
index 8d7e00bff..124b2637b 100644
--- a/packages/ui/src/components/widgets/SwapButton.tsx
+++ b/packages/ui/src/components/widgets/SwapButton.tsx
@@ -97,8 +97,7 @@ const SwapButton: FC<SwapButtonProps> = ({
     return (
       <Button
         className={cn(
-          'relay-justify-center',
-          tokenWidgetMode ? 'relay-w-full' : '',
+          'relay-justify-center relay-w-full',
           !tokenWidgetMode && 'relay-normal-case'
         )}
         color={showHighPriceImpactWarning ? 'error' : 'primary'}
@@ -121,8 +120,7 @@ const SwapButton: FC<SwapButtonProps> = ({
     <Button
       cta={true}
       className={cn(
-        'relay-justify-center',
-        tokenWidgetMode ? 'relay-w-full' : '',
+        'relay-justify-center relay-w-full',
         !tokenWidgetMode && 'relay-normal-case'
       )}
       aria-label="Connect wallet"
diff --git a/packages/ui/src/components/widgets/SwapWidget/index.tsx b/packages/ui/src/components/widgets/SwapWidget/index.tsx
index 79a6db3d6..215bd3050 100644
--- a/packages/ui/src/components/widgets/SwapWidget/index.tsx
+++ b/packages/ui/src/components/widgets/SwapWidget/index.tsx
@@ -741,7 +741,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                 return (
                   <Flex
                     direction="column"
-                    className="relay-w-full relay-overflow-hidden relay-min-w-[320px] relay-max-w-[408px] relay-border-widget"
+                    className="relay-w-full relay-overflow-hidden relay-min-w-[320px] relay-max-w-[408px]"
                   >
                     <TokenSelectorContainer
                       className="relay-bg-[var(--relay-colors-widget-background)]"
@@ -952,7 +952,8 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                               aria-label="Switch Input Mode"
                               size="none"
                               color="ghost"
-                              className="relay-text-[color:var(--relay-colors-gray11)] relay-self-center relay-justify-center relay-w-[20px] relay-h-[20px] relay-rounded-[100px] relay-p-[4px] relay-bg-[var(--relay-colors-gray3)]"
+                              className="relay-self-center relay-justify-center relay-w-[20px] relay-h-[20px] relay-rounded-[100px] relay-p-[4px]"
+                              style={{ color: 'var(--relay-colors-gray9)', backgroundColor: 'var(--relay-colors-gray3)' }}
                               onClick={toggleInputMode}
                             >
                               <SwitchIcon width={16} height={10} />
@@ -1033,7 +1034,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                           aria-label="Swap Tokens Direction"
                           size="none"
                           color="white"
-                          className="relay-mt-[4px] relay-text-[color:var(--relay-colors-gray9)] relay-self-center relay-justify-center relay-w-full relay-h-full relay-z-10 relay-border-[length:var(--relay-borders-widget-swap-currency-button-border-width)] relay-border-solid relay-border-[color:var(--relay-colors-widget-swap-currency-button-border-color)] relay-rounded-swap-btn"
+                          className="relay-mt-[4px] relay-text-[color:var(--relay-colors-gray9)] relay-self-center relay-justify-center relay-w-full relay-h-full relay-z-10 relay-border-[length:var(--relay-borders-widget-swap-currency-button-border-width)] relay-border-solid relay-border-[color:var(--relay-colors-widget-swap-currency-button-border-color)] relay-rounded-swap-btn hover:relay-text-[color:var(--relay-colors-gray11)] hover:relay-bg-[var(--relay-colors-gray-2)]"
                           onClick={() => {
                             if (fromToken || toToken) {
                               if (isUsdInputMode) {
diff --git a/packages/ui/src/styles/base.css b/packages/ui/src/styles/base.css
index 735c6f112..9db442679 100644
--- a/packages/ui/src/styles/base.css
+++ b/packages/ui/src/styles/base.css
@@ -53,6 +53,26 @@
   to { opacity: 1; transform: translateY(0); }
 }
 
+@keyframes scale-in {
+  from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
+  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+}
+
+@keyframes scale-out {
+  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
+  to { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
+}
+
+@keyframes overlay-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes overlay-fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
 /* ===================================================================
    CSS Reset (scoped to .relay-kit-reset)
    Wrapped in @layer base so it appears BEFORE @tailwind utilities
@@ -74,11 +94,7 @@
   font-family: var(--relay-fonts-body, var(--font-fallback));
 }
 
-.relay-kit-reset *,
-.relay-kit-reset ::before,
-.relay-kit-reset ::after,
-.relay-kit-reset ::backdrop,
-.relay-kit-reset ::file-selector-button {
+.relay-kit-reset :where(*, ::before, ::after, ::backdrop, ::file-selector-button) {
   margin: 0px;
   padding: 0px;
   box-sizing: border-box;
@@ -87,64 +103,36 @@
   border-color: currentColor;
 }
 
-.relay-kit-reset img,
-.relay-kit-reset svg,
-.relay-kit-reset video,
-.relay-kit-reset canvas,
-.relay-kit-reset audio,
-.relay-kit-reset iframe,
-.relay-kit-reset embed,
-.relay-kit-reset object {
+.relay-kit-reset :where(img, svg, video, canvas, audio, iframe, embed, object) {
   display: block;
   vertical-align: middle;
 }
 
-.relay-kit-reset img,
-.relay-kit-reset video {
+.relay-kit-reset :where(img, video) {
   max-width: 100%;
   height: auto;
 }
 
-.relay-kit-reset h1,
-.relay-kit-reset h2,
-.relay-kit-reset h3,
-.relay-kit-reset h4,
-.relay-kit-reset h5,
-.relay-kit-reset h6 {
+.relay-kit-reset :where(h1, h2, h3, h4, h5, h6) {
   text-wrap: balance;
   font-size: inherit;
   font-weight: inherit;
 }
 
-.relay-kit-reset p,
-.relay-kit-reset h1,
-.relay-kit-reset h2,
-.relay-kit-reset h3,
-.relay-kit-reset h4,
-.relay-kit-reset h5,
-.relay-kit-reset h6 {
+.relay-kit-reset :where(p, h1, h2, h3, h4, h5, h6) {
   overflow-wrap: break-word;
 }
 
-.relay-kit-reset ol,
-.relay-kit-reset ul,
-.relay-kit-reset menu {
+.relay-kit-reset :where(ol, ul, menu) {
   list-style: none;
 }
 
-.relay-kit-reset button,
-.relay-kit-reset input:where([type='button'], [type='reset'], [type='submit']),
-.relay-kit-reset ::file-selector-button {
+.relay-kit-reset :where(button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button) {
   appearance: button;
   -webkit-appearance: button;
 }
 
-.relay-kit-reset button,
-.relay-kit-reset input,
-.relay-kit-reset optgroup,
-.relay-kit-reset select,
-.relay-kit-reset textarea,
-.relay-kit-reset ::file-selector-button {
+.relay-kit-reset :where(button, input, optgroup, select, textarea, ::file-selector-button) {
   font: inherit;
   font-feature-settings: inherit;
   font-variation-settings: inherit;
@@ -153,67 +141,61 @@
   background: transparent;
 }
 
-.relay-kit-reset ::placeholder {
+.relay-kit-reset :where(::placeholder) {
   opacity: 1;
   color: color-mix(in srgb, currentColor 50%, transparent);
 }
 
-.relay-kit-reset textarea {
+.relay-kit-reset :where(textarea) {
   resize: vertical;
 }
 
-.relay-kit-reset table {
+.relay-kit-reset :where(table) {
   text-indent: 0px;
   border-collapse: collapse;
   border-color: inherit;
 }
 
-.relay-kit-reset summary {
+.relay-kit-reset :where(summary) {
   display: list-item;
 }
 
-.relay-kit-reset a {
+.relay-kit-reset :where(a) {
   color: inherit;
   text-decoration: inherit;
 }
 
-.relay-kit-reset abbr:where([title]) {
+.relay-kit-reset :where(abbr[title]) {
   text-decoration: underline dotted;
 }
 
-.relay-kit-reset code,
-.relay-kit-reset kbd,
-.relay-kit-reset samp,
-.relay-kit-reset pre {
+.relay-kit-reset :where(code, kbd, samp, pre) {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
     'Liberation Mono', 'Courier New', monospace;
   font-size: 1em;
 }
 
-.relay-kit-reset ::-webkit-search-decoration,
-.relay-kit-reset ::-webkit-search-cancel-button {
+.relay-kit-reset :where(::-webkit-search-decoration, ::-webkit-search-cancel-button) {
   -webkit-appearance: none;
 }
 
-.relay-kit-reset ::-webkit-inner-spin-button,
-.relay-kit-reset ::-webkit-outer-spin-button {
+.relay-kit-reset :where(::-webkit-inner-spin-button, ::-webkit-outer-spin-button) {
   height: auto;
 }
 
-.relay-kit-reset [hidden] {
+.relay-kit-reset :where([hidden]) {
   display: none !important;
 }
 
-.relay-kit-reset img {
+.relay-kit-reset :where(img) {
   border-style: none;
 }
 
-.relay-kit-reset small {
+.relay-kit-reset :where(small) {
   font-size: 80%;
 }
 
-.relay-kit-reset b,
-.relay-kit-reset strong {
+.relay-kit-reset :where(b, strong) {
   font-weight: bolder;
 }
 
@@ -643,6 +625,14 @@
   --relay-colors-amber11: var(--relay-colors-amber-11);
   --relay-colors-amber12: var(--relay-colors-amber-12);
 
+  --relay-colors-slate4: var(--relay-colors-slate-4);
+  --relay-colors-slate5: var(--relay-colors-slate-5);
+  --relay-colors-slate6: var(--relay-colors-slate-6);
+  --relay-colors-slate10: var(--relay-colors-slate-10);
+
+  /* RGB triplet for composable opacity */
+  --relay-colors-gray-rgb: 143, 143, 143;
+
   /* ===================================================================
      Primary Scale (semantic → violet)
      =================================================================== */
@@ -717,7 +707,7 @@
 /* ===================================================================
    Dark Mode Overrides
    =================================================================== */
-:where(.dark, [data-theme="dark"]) {
+.dark, [data-theme="dark"] {
   /* Primary → violet dark */
   --relay-colors-primary1: var(--relay-colors-violet-dark-1);
   --relay-colors-primary2: var(--relay-colors-violet-dark-2);
@@ -827,6 +817,9 @@
   --relay-colors-yellow-10: var(--relay-colors-yellow-dark-10);
   --relay-colors-yellow-11: var(--relay-colors-yellow-dark-11);
   --relay-colors-yellow-12: var(--relay-colors-yellow-dark-12);
+
+  /* RGB triplet for composable opacity (dark) */
+  --relay-colors-gray-rgb: 112, 112, 112;
 }
 
 } /* end @layer base */
@@ -850,3 +843,10 @@
     border: var(--relay-borders-dropdown-border);
   }
 }
+
+/* High-specificity inset focus ring — matches old PandaCSS :not(#\#) pattern */
+.relay-focus-inset:is(:focus-visible, [data-focus]) {
+  box-shadow: inset 0 0 0 2px var(--relay-colors-focus-color) !important;
+  outline: none !important;
+  --tw-ring-shadow: 0 0 #0000 !important;
+}
diff --git a/packages/ui/src/utils/theme.ts b/packages/ui/src/utils/theme.ts
index bea87666c..f99093736 100644
--- a/packages/ui/src/utils/theme.ts
+++ b/packages/ui/src/utils/theme.ts
@@ -13,6 +13,23 @@ export function getValueFromKey(obj: any, key: string): any {
   return value
 }
 
+// Pattern matching known token references (e.g. "primary9", "gray12", "white", "black")
+const TOKEN_REF_PATTERN =
+  /^(primary|gray|red|green|amber|yellow|blue|violet|slate|tomato|grass)\d{1,2}$/
+
+const RAW_CSS_PATTERN =
+  /^(#|rgb|hsl|oklch|lch|lab|hwb|color\(|var\()|(\d+(\.\d+)?(px|rem|em|%|vh|vw|ch|ex|cap|ic|lh|rlh|vi|vb|vmin|vmax|svw|svh|lvw|lvh|dvw|dvh|cqw|cqh|deg|grad|rad|turn|s|ms))/i
+
+const NAMED_COLORS = new Set(['white', 'black', 'transparent', 'currentColor', 'inherit'])
+
+function resolveThemeValue(value: string): string {
+  if (NAMED_COLORS.has(value)) return value
+  if (RAW_CSS_PATTERN.test(value)) return value
+  if (TOKEN_REF_PATTERN.test(value)) return `var(--relay-colors-${value})`
+  // Fallback: treat as raw CSS value
+  return value
+}
+
 // Generate CSS variables based on theme and overrides
 export const generateCssVars = (
   theme?: RelayKitTheme,
@@ -34,7 +51,7 @@ export const generateCssVars = (
         if (typeof value === 'object' && value !== null) {
           processTheme(value, fullKey + '.')
         } else if (cssVarOverride && value) {
-          cssString += `${cssVarOverride}:${value};\n`
+          cssString += `${cssVarOverride}:${resolveThemeValue(String(value))};\n`
         }
       }
     }
diff --git a/packages/ui/tailwind.config.ts b/packages/ui/tailwind.config.ts
index b3a6134ec..6354f5169 100644
--- a/packages/ui/tailwind.config.ts
+++ b/packages/ui/tailwind.config.ts
@@ -87,6 +87,22 @@ export default {
         'content-fade-in': {
           from: { opacity: '0', transform: 'translateY(4px)' },
           to: { opacity: '1', transform: 'translateY(0)' }
+        },
+        'scale-in': {
+          from: { opacity: '0', transform: 'translate(-50%, -50%) scale(0.95)' },
+          to: { opacity: '1', transform: 'translate(-50%, -50%) scale(1)' }
+        },
+        'scale-out': {
+          from: { opacity: '1', transform: 'translate(-50%, -50%) scale(1)' },
+          to: { opacity: '0', transform: 'translate(-50%, -50%) scale(0.95)' }
+        },
+        'overlay-fade-in': {
+          from: { opacity: '0' },
+          to: { opacity: '1' }
+        },
+        'overlay-fade-out': {
+          from: { opacity: '1' },
+          to: { opacity: '0' }
         }
       },
       animation: {
@@ -101,7 +117,11 @@ export default {
         'dialog-slide-down': 'dialog-slide-down 200ms ease-in',
         'dialog-fade-in': 'dialog-fade-in 100ms linear',
         'dialog-fade-out': 'dialog-fade-out 100ms linear',
-        'content-fade-in': 'content-fade-in 300ms ease-out'
+        'content-fade-in': 'content-fade-in 250ms cubic-bezier(0.16, 1, 0.3, 1)',
+        'scale-in': 'scale-in 200ms cubic-bezier(0.16, 1, 0.3, 1) forwards',
+        'scale-out': 'scale-out 150ms ease-in forwards',
+        'overlay-fade-in': 'overlay-fade-in 150ms ease-out',
+        'overlay-fade-out': 'overlay-fade-out 150ms ease-in'
       }
     }
   },

From 1d441e74ead465225d836bc165e755a26b3213e9 Mon Sep 17 00:00:00 2001
From: Ted Palmer <etpalmer17@gmail.com>
Date: Mon, 2 Mar 2026 11:46:28 -0500
Subject: [PATCH 04/25] customization sidebar and adjustments

---
 demo/components/CustomizeSidebar.tsx          | 777 ++++++++++++++++++
 .../providers/RelayKitProviderWrapper.tsx     |  34 +-
 demo/context/customizeContext.tsx             |  91 ++
 demo/pages/_app.tsx                           |  21 +-
 demo/pages/ui/swap.tsx                        |  70 +-
 .../components/common/MultiWalletDropdown.tsx |   6 +-
 .../common/TokenSelector/SuggestedTokens.tsx  |   2 +-
 .../ui/src/components/primitives/Button.tsx   |  11 +-
 .../ui/src/components/primitives/Dialog.tsx   |   2 +-
 .../ui/src/components/primitives/Dropdown.tsx |   4 +-
 .../ui/src/components/primitives/Input.tsx    |   2 +-
 .../ui/src/components/primitives/Tooltip.tsx  |   4 +-
 .../components/widgets/SwapWidget/index.tsx   |   2 +-
 .../ui/src/providers/RelayKitProvider.tsx     |   1 +
 packages/ui/src/styles/base.css               |  16 +
 packages/ui/src/themes/RelayKitTheme.ts       |   1 +
 16 files changed, 940 insertions(+), 104 deletions(-)
 create mode 100644 demo/components/CustomizeSidebar.tsx
 create mode 100644 demo/context/customizeContext.tsx

diff --git a/demo/components/CustomizeSidebar.tsx b/demo/components/CustomizeSidebar.tsx
new file mode 100644
index 000000000..25ee1019f
--- /dev/null
+++ b/demo/components/CustomizeSidebar.tsx
@@ -0,0 +1,777 @@
+import { FC, useCallback, useEffect, useRef, useState } from 'react'
+import { useCustomize } from 'context/customizeContext'
+import { useTheme } from 'next-themes'
+import {
+  MAINNET_RELAY_API,
+  TESTNET_RELAY_API,
+  ChainVM
+} from '@relayprotocol/relay-sdk'
+
+const WALLET_VM_TYPES = [
+  'evm',
+  'bvm',
+  'svm',
+  'suivm',
+  'tvm',
+  'hypevm'
+] as const
+
+type CustomizeSidebarProps = {
+  singleChainMode: boolean
+  setSingleChainMode: (value: boolean) => void
+  supportedWalletVMs: ChainVM[]
+  setSupportedWalletVMs: (
+    value: ChainVM[] | ((prev: ChainVM[]) => ChainVM[])
+  ) => void
+}
+
+// --- Color manipulation utilities ---
+function hexToHsl(hex: string): [number, number, number] {
+  const r = parseInt(hex.slice(1, 3), 16) / 255
+  const g = parseInt(hex.slice(3, 5), 16) / 255
+  const b = parseInt(hex.slice(5, 7), 16) / 255
+  const max = Math.max(r, g, b),
+    min = Math.min(r, g, b)
+  let h = 0,
+    s = 0
+  const l = (max + min) / 2
+  if (max !== min) {
+    const d = max - min
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+    if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6
+    else if (max === g) h = ((b - r) / d + 2) / 6
+    else h = ((r - g) / d + 4) / 6
+  }
+  return [h * 360, s * 100, l * 100]
+}
+
+function hslToHex(h: number, s: number, l: number): string {
+  h /= 360
+  s /= 100
+  l /= 100
+  const hue2rgb = (p: number, q: number, t: number) => {
+    if (t < 0) t += 1
+    if (t > 1) t -= 1
+    if (t < 1 / 6) return p + (q - p) * 6 * t
+    if (t < 1 / 2) return q
+    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6
+    return p
+  }
+  let r, g, b
+  if (s === 0) {
+    r = g = b = l
+  } else {
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s
+    const p = 2 * l - q
+    r = hue2rgb(p, q, h + 1 / 3)
+    g = hue2rgb(p, q, h)
+    b = hue2rgb(p, q, h - 1 / 3)
+  }
+  const toHex = (n: number) =>
+    Math.round(Math.min(255, Math.max(0, n * 255)))
+      .toString(16)
+      .padStart(2, '0')
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`
+}
+
+/** Darken a hex color by a percentage (0-100) */
+function darken(hex: string, amount: number): string {
+  try {
+    const [h, s, l] = hexToHsl(hex)
+    return hslToHex(h, s, Math.max(0, l - amount))
+  } catch {
+    return hex
+  }
+}
+
+/** Lighten a hex color by a percentage (0-100) */
+function lighten(hex: string, amount: number): string {
+  try {
+    const [h, s, l] = hexToHsl(hex)
+    return hslToHex(h, s, Math.min(100, l + amount))
+  } catch {
+    return hex
+  }
+}
+
+// Default colors that approximate the actual CSS variable values
+const LIGHT_DEFAULTS: Record<string, string> = {
+  primaryColor: '#7c65c1',
+  focusColor: '#9b8ce0',
+  subtleBackgroundColor: '#fcfcfc',
+  subtleBorderColor: '#e6e6e6',
+  'text.default': '#1a1a1a',
+  'text.subtle': '#6f6f6f',
+  'widget.background': '#ffffff',
+  'widget.card.background': '#fcfcfc',
+  'widget.selector.background': '#f5f5f5',
+  'buttons.primary.background': '#7c65c1',
+  'buttons.primary.color': '#ffffff',
+  'buttons.secondary.background': '#ede9f6',
+  'buttons.secondary.color': '#4615c8',
+  'input.background': '#f0f0f0',
+  'modal.background': '#fcfcfc',
+  'anchor.color': '#4615c8'
+}
+
+const DARK_DEFAULTS: Record<string, string> = {
+  primaryColor: '#9b8ce0',
+  focusColor: '#7c65c1',
+  subtleBackgroundColor: '#111111',
+  subtleBorderColor: '#333333',
+  'text.default': '#ececec',
+  'text.subtle': '#a0a0a0',
+  'widget.background': '#1a1a1a',
+  'widget.card.background': '#111111',
+  'widget.selector.background': '#222222',
+  'buttons.primary.background': '#9b8ce0',
+  'buttons.primary.color': '#ffffff',
+  'buttons.secondary.background': '#2a2440',
+  'buttons.secondary.color': '#c4b8f3',
+  'input.background': '#2a2a2a',
+  'modal.background': '#111111',
+  'anchor.color': '#c4b8f3'
+}
+
+// Debounced color input — renders immediately but debounces context updates
+const ColorInput: FC<{
+  label: string
+  value: string
+  defaultValue: string
+  onChange: (value: string) => void
+  onClear: () => void
+}> = ({ label, value, defaultValue, onChange, onClear }) => {
+  const [localValue, setLocalValue] = useState(value || defaultValue)
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const isOverridden = !!value
+
+  // Sync from external changes (e.g. reset button)
+  useEffect(() => {
+    setLocalValue(value || defaultValue)
+  }, [value, defaultValue])
+
+  const handleChange = useCallback(
+    (newValue: string) => {
+      setLocalValue(newValue)
+      if (timerRef.current) clearTimeout(timerRef.current)
+      timerRef.current = setTimeout(() => {
+        onChange(newValue)
+      }, 150)
+    },
+    [onChange]
+  )
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current)
+    }
+  }, [])
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+      <input
+        type="color"
+        value={localValue}
+        onChange={(e) => handleChange(e.target.value)}
+        style={{
+          width: 28,
+          height: 28,
+          border: 'none',
+          borderRadius: 6,
+          cursor: 'pointer',
+          padding: 0,
+          background: 'transparent'
+        }}
+      />
+      <span style={{ flex: 1, fontSize: 13 }}>{label}</span>
+      {isOverridden && (
+        <button
+          onClick={onClear}
+          style={{
+            fontSize: 11,
+            padding: '2px 6px',
+            borderRadius: 4,
+            border: '1px solid currentColor',
+            background: 'transparent',
+            cursor: 'pointer',
+            opacity: 0.4
+          }}
+        >
+          Reset
+        </button>
+      )}
+    </div>
+  )
+}
+
+const SectionTitle: FC<{ children: React.ReactNode }> = ({ children }) => (
+  <div
+    style={{
+      fontSize: 11,
+      fontWeight: 600,
+      textTransform: 'uppercase',
+      letterSpacing: '0.5px',
+      opacity: 0.5,
+      marginBottom: 4
+    }}
+  >
+    {children}
+  </div>
+)
+
+const SubLabel: FC<{ children: React.ReactNode }> = ({ children }) => (
+  <div style={{ fontSize: 11, opacity: 0.4, marginTop: 6, marginBottom: -2 }}>
+    {children}
+  </div>
+)
+
+export const CustomizeSidebar: FC<CustomizeSidebarProps> = ({
+  singleChainMode,
+  setSingleChainMode,
+  supportedWalletVMs,
+  setSupportedWalletVMs
+}) => {
+  const [open, setOpen] = useState(false)
+  const { resolvedTheme } = useTheme()
+  const isDark = resolvedTheme === 'dark'
+  const defaults = isDark ? DARK_DEFAULTS : LIGHT_DEFAULTS
+  const {
+    themeOverrides,
+    updateThemeValue,
+    setThemeOverrides,
+    relayApi,
+    setRelayApi,
+    websocketsEnabled,
+    setWebsocketsEnabled
+  } = useCustomize()
+
+  const getNestedValue = (path: string): string => {
+    const keys = path.split('.')
+    let obj: any = themeOverrides
+    for (const key of keys) {
+      if (!obj || typeof obj !== 'object') return ''
+      obj = obj[key]
+    }
+    return typeof obj === 'string' ? obj : ''
+  }
+
+  // Auto-derive hover state from a base color
+  const deriveHover = useCallback(
+    (baseHex: string) => {
+      return isDark ? lighten(baseHex, 8) : darken(baseHex, 8)
+    },
+    [isDark]
+  )
+
+  // When setting a base color, also auto-set its hover variant
+  const setWithHover = useCallback(
+    (basePath: string, hoverPath: string, value: string) => {
+      updateThemeValue(basePath, value)
+      updateThemeValue(hoverPath, deriveHover(value))
+    },
+    [updateThemeValue, deriveHover]
+  )
+
+  const clearWithHover = useCallback(
+    (basePath: string, hoverPath: string) => {
+      updateThemeValue(basePath, undefined)
+      updateThemeValue(hoverPath, undefined)
+    },
+    [updateThemeValue]
+  )
+
+  const sidebarBg = isDark ? '#111' : '#fff'
+  const sidebarBorder = isDark
+    ? 'rgba(255,255,255,0.1)'
+    : 'rgba(0,0,0,0.08)'
+  const sidebarText = isDark ? '#e5e5e5' : '#1a1a1a'
+
+  return (
+    <>
+      {/* Toggle button */}
+      <button
+        onClick={() => setOpen(!open)}
+        style={{
+          position: 'fixed',
+          left: open ? 296 : 0,
+          top: '50%',
+          transform: 'translateY(-50%)',
+          zIndex: 1000,
+          background: isDark ? '#222' : '#fff',
+          border: `1px solid ${sidebarBorder}`,
+          borderLeft: open ? 'none' : `1px solid ${sidebarBorder}`,
+          borderRadius: '0 8px 8px 0',
+          padding: '12px 8px',
+          cursor: 'pointer',
+          writingMode: 'vertical-rl',
+          fontSize: 12,
+          fontWeight: 600,
+          letterSpacing: '0.5px',
+          color: sidebarText,
+          transition: 'left 0.2s ease',
+          boxShadow: isDark
+            ? '2px 0 8px rgba(0,0,0,0.3)'
+            : '2px 0 8px rgba(0,0,0,0.06)'
+        }}
+      >
+        Customize
+      </button>
+
+      {/* Sidebar panel */}
+      <div
+        style={{
+          position: 'fixed',
+          top: 0,
+          left: open ? 0 : -296,
+          width: 296,
+          height: '100vh',
+          background: sidebarBg,
+          borderRight: `1px solid ${sidebarBorder}`,
+          color: sidebarText,
+          zIndex: 999,
+          transition: 'left 0.2s ease',
+          overflowY: 'auto',
+          display: 'flex',
+          flexDirection: 'column'
+        }}
+      >
+        {/* Header */}
+        <div
+          style={{
+            padding: '16px 20px',
+            borderBottom: `1px solid ${sidebarBorder}`,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between'
+          }}
+        >
+          <span style={{ fontSize: 15, fontWeight: 600 }}>Customize</span>
+          <button
+            onClick={() => setOpen(false)}
+            style={{
+              background: 'none',
+              border: 'none',
+              cursor: 'pointer',
+              fontSize: 18,
+              color: sidebarText,
+              opacity: 0.5,
+              padding: '0 4px'
+            }}
+          >
+            ×
+          </button>
+        </div>
+
+        {/* Theme Colors */}
+        <div
+          style={{
+            padding: '16px 20px',
+            borderBottom: `1px solid ${sidebarBorder}`,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 10
+          }}
+        >
+          <SectionTitle>Colors</SectionTitle>
+
+          <ColorInput
+            label="Primary Color"
+            value={getNestedValue('primaryColor')}
+            defaultValue={defaults['primaryColor']}
+            onChange={(v) => updateThemeValue('primaryColor', v)}
+            onClear={() => updateThemeValue('primaryColor', undefined)}
+          />
+
+          <ColorInput
+            label="Focus Color"
+            value={getNestedValue('focusColor')}
+            defaultValue={defaults['focusColor']}
+            onChange={(v) => updateThemeValue('focusColor', v)}
+            onClear={() => updateThemeValue('focusColor', undefined)}
+          />
+
+          <SubLabel>Text</SubLabel>
+
+          <ColorInput
+            label="Default Text"
+            value={getNestedValue('text.default')}
+            defaultValue={defaults['text.default']}
+            onChange={(v) => updateThemeValue('text.default', v)}
+            onClear={() => updateThemeValue('text.default', undefined)}
+          />
+
+          <ColorInput
+            label="Subtle Text"
+            value={getNestedValue('text.subtle')}
+            defaultValue={defaults['text.subtle']}
+            onChange={(v) => updateThemeValue('text.subtle', v)}
+            onClear={() => updateThemeValue('text.subtle', undefined)}
+          />
+
+          <ColorInput
+            label="Anchor/Link"
+            value={getNestedValue('anchor.color')}
+            defaultValue={defaults['anchor.color']}
+            onChange={(v) => {
+              updateThemeValue('anchor.color', v)
+              updateThemeValue('anchor.hover.color', deriveHover(v))
+            }}
+            onClear={() => {
+              updateThemeValue('anchor.color', undefined)
+              updateThemeValue('anchor.hover.color', undefined)
+            }}
+          />
+        </div>
+
+        {/* Buttons */}
+        <div
+          style={{
+            padding: '16px 20px',
+            borderBottom: `1px solid ${sidebarBorder}`,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 10
+          }}
+        >
+          <SectionTitle>Buttons</SectionTitle>
+
+          <SubLabel>Primary (hover auto-derived)</SubLabel>
+
+          <ColorInput
+            label="Background"
+            value={getNestedValue('buttons.primary.background')}
+            defaultValue={defaults['buttons.primary.background']}
+            onChange={(v) =>
+              setWithHover(
+                'buttons.primary.background',
+                'buttons.primary.hover.background',
+                v
+              )
+            }
+            onClear={() =>
+              clearWithHover(
+                'buttons.primary.background',
+                'buttons.primary.hover.background'
+              )
+            }
+          />
+
+          <ColorInput
+            label="Text Color"
+            value={getNestedValue('buttons.primary.color')}
+            defaultValue={defaults['buttons.primary.color']}
+            onChange={(v) => {
+              updateThemeValue('buttons.primary.color', v)
+              updateThemeValue('buttons.primary.hover.color', v)
+            }}
+            onClear={() => {
+              updateThemeValue('buttons.primary.color', undefined)
+              updateThemeValue('buttons.primary.hover.color', undefined)
+            }}
+          />
+
+          <SubLabel>Secondary (hover auto-derived)</SubLabel>
+
+          <ColorInput
+            label="Background"
+            value={getNestedValue('buttons.secondary.background')}
+            defaultValue={defaults['buttons.secondary.background']}
+            onChange={(v) =>
+              setWithHover(
+                'buttons.secondary.background',
+                'buttons.secondary.hover.background',
+                v
+              )
+            }
+            onClear={() =>
+              clearWithHover(
+                'buttons.secondary.background',
+                'buttons.secondary.hover.background'
+              )
+            }
+          />
+
+          <ColorInput
+            label="Text Color"
+            value={getNestedValue('buttons.secondary.color')}
+            defaultValue={defaults['buttons.secondary.color']}
+            onChange={(v) => {
+              updateThemeValue('buttons.secondary.color', v)
+              updateThemeValue('buttons.secondary.hover.color', v)
+            }}
+            onClear={() => {
+              updateThemeValue('buttons.secondary.color', undefined)
+              updateThemeValue('buttons.secondary.hover.color', undefined)
+            }}
+          />
+
+          {/* CTA italic toggle */}
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+            <input
+              type="checkbox"
+              id="cta-italic"
+              checked={getNestedValue('buttons.cta.fontStyle') === 'italic'}
+              onChange={(e) =>
+                updateThemeValue(
+                  'buttons.cta.fontStyle',
+                  e.target.checked ? 'italic' : 'normal'
+                )
+              }
+            />
+            <label htmlFor="cta-italic" style={{ fontSize: 13 }}>
+              Italic CTA Button
+            </label>
+          </div>
+        </div>
+
+        {/* Surfaces */}
+        <div
+          style={{
+            padding: '16px 20px',
+            borderBottom: `1px solid ${sidebarBorder}`,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 10
+          }}
+        >
+          <SectionTitle>Surfaces</SectionTitle>
+
+          <ColorInput
+            label="Widget Background"
+            value={getNestedValue('widget.background')}
+            defaultValue={defaults['widget.background']}
+            onChange={(v) => updateThemeValue('widget.background', v)}
+            onClear={() => updateThemeValue('widget.background', undefined)}
+          />
+
+          <ColorInput
+            label="Card Background"
+            value={getNestedValue('widget.card.background')}
+            defaultValue={defaults['widget.card.background']}
+            onChange={(v) => updateThemeValue('widget.card.background', v)}
+            onClear={() =>
+              updateThemeValue('widget.card.background', undefined)
+            }
+          />
+
+          <ColorInput
+            label="Selector Background"
+            value={getNestedValue('widget.selector.background')}
+            defaultValue={defaults['widget.selector.background']}
+            onChange={(v) =>
+              setWithHover(
+                'widget.selector.background',
+                'widget.selector.hover.background',
+                v
+              )
+            }
+            onClear={() =>
+              clearWithHover(
+                'widget.selector.background',
+                'widget.selector.hover.background'
+              )
+            }
+          />
+
+          <ColorInput
+            label="Input Background"
+            value={getNestedValue('input.background')}
+            defaultValue={defaults['input.background']}
+            onChange={(v) => updateThemeValue('input.background', v)}
+            onClear={() => updateThemeValue('input.background', undefined)}
+          />
+
+          <ColorInput
+            label="Modal Background"
+            value={getNestedValue('modal.background')}
+            defaultValue={defaults['modal.background']}
+            onChange={(v) => updateThemeValue('modal.background', v)}
+            onClear={() => updateThemeValue('modal.background', undefined)}
+          />
+
+          <ColorInput
+            label="Subtle BG"
+            value={getNestedValue('subtleBackgroundColor')}
+            defaultValue={defaults['subtleBackgroundColor']}
+            onChange={(v) => updateThemeValue('subtleBackgroundColor', v)}
+            onClear={() =>
+              updateThemeValue('subtleBackgroundColor', undefined)
+            }
+          />
+
+          <ColorInput
+            label="Subtle Border"
+            value={getNestedValue('subtleBorderColor')}
+            defaultValue={defaults['subtleBorderColor']}
+            onChange={(v) => updateThemeValue('subtleBorderColor', v)}
+            onClear={() => updateThemeValue('subtleBorderColor', undefined)}
+          />
+
+          {/* Border radius */}
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+            <span style={{ flex: 1, fontSize: 13 }}>Border Radius</span>
+            <input
+              type="range"
+              min={0}
+              max={24}
+              value={(() => {
+                const v = parseInt(getNestedValue('widget.card.borderRadius'))
+                return isNaN(v) ? 12 : v
+              })()}
+              onChange={(e) => {
+                const val = `${e.target.value}px`
+                updateThemeValue('widget.borderRadius', val)
+                updateThemeValue('widget.card.borderRadius', val)
+                updateThemeValue('modal.borderRadius', val)
+                updateThemeValue('input.borderRadius', val)
+                updateThemeValue('dropdown.borderRadius', val)
+                updateThemeValue('widget.swap.currency.button.borderRadius', val)
+                updateThemeValue('buttons.borderRadius', val)
+              }}
+              style={{ width: 80 }}
+            />
+            <span style={{ fontSize: 11, opacity: 0.5, width: 30 }}>
+              {(() => {
+                const v = parseInt(getNestedValue('widget.card.borderRadius'))
+                return isNaN(v) ? 12 : v
+              })()}px
+            </span>
+          </div>
+
+          {/* Reset all button */}
+          <button
+            onClick={() => setThemeOverrides({})}
+            style={{
+              fontSize: 12,
+              padding: '6px 12px',
+              borderRadius: 6,
+              border: `1px solid ${sidebarBorder}`,
+              background: 'transparent',
+              cursor: 'pointer',
+              color: sidebarText,
+              opacity: 0.7,
+              marginTop: 4
+            }}
+          >
+            Reset All Theme
+          </button>
+        </div>
+
+        {/* Widget Config */}
+        <div
+          style={{
+            padding: '16px 20px',
+            borderBottom: `1px solid ${sidebarBorder}`,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 10
+          }}
+        >
+          <SectionTitle>Config</SectionTitle>
+
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+            <input
+              type="checkbox"
+              id="sidebar-single-chain"
+              checked={singleChainMode}
+              onChange={(e) => setSingleChainMode(e.target.checked)}
+            />
+            <label htmlFor="sidebar-single-chain" style={{ fontSize: 13 }}>
+              Single Chain Mode
+            </label>
+          </div>
+
+          <div style={{ fontSize: 12, opacity: 0.5, marginTop: 2 }}>
+            Wallet VMs
+          </div>
+          <div
+            style={{
+              display: 'flex',
+              flexWrap: 'wrap',
+              gap: '6px 12px'
+            }}
+          >
+            {WALLET_VM_TYPES.map((vm) => (
+              <div
+                key={vm}
+                style={{ display: 'flex', alignItems: 'center', gap: 6 }}
+              >
+                <input
+                  id={`sidebar-vm-${vm}`}
+                  type="checkbox"
+                  checked={supportedWalletVMs.includes(vm)}
+                  onChange={(e) => {
+                    if (e.target.checked) {
+                      setSupportedWalletVMs((prev) => [...prev, vm])
+                    } else {
+                      setSupportedWalletVMs((prev) =>
+                        prev.filter((item) => item !== vm)
+                      )
+                    }
+                  }}
+                />
+                <label
+                  htmlFor={`sidebar-vm-${vm}`}
+                  style={{ fontSize: 13 }}
+                >
+                  {vm.toUpperCase()}
+                </label>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Global / Provider Settings */}
+        <div
+          style={{
+            padding: '16px 20px',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 10
+          }}
+        >
+          <SectionTitle>Global</SectionTitle>
+
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+            <span style={{ fontSize: 13, flex: 1 }}>API</span>
+            <select
+              value={
+                relayApi === TESTNET_RELAY_API ? 'testnets' : 'mainnets'
+              }
+              onChange={(e) => {
+                setRelayApi(
+                  e.target.value === 'testnets'
+                    ? TESTNET_RELAY_API
+                    : MAINNET_RELAY_API
+                )
+              }}
+              style={{
+                fontSize: 13,
+                padding: '4px 8px',
+                borderRadius: 6,
+                border: `1px solid ${sidebarBorder}`,
+                background: 'transparent',
+                color: sidebarText
+              }}
+            >
+              <option value="mainnets">Mainnet</option>
+              <option value="testnets">Testnet</option>
+            </select>
+          </div>
+
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+            <input
+              type="checkbox"
+              id="sidebar-websockets"
+              checked={websocketsEnabled}
+              onChange={(e) => setWebsocketsEnabled(e.target.checked)}
+            />
+            <label htmlFor="sidebar-websockets" style={{ fontSize: 13 }}>
+              WebSockets
+            </label>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/demo/components/providers/RelayKitProviderWrapper.tsx b/demo/components/providers/RelayKitProviderWrapper.tsx
index d3a7f71b5..e2b58e159 100644
--- a/demo/components/providers/RelayKitProviderWrapper.tsx
+++ b/demo/components/providers/RelayKitProviderWrapper.tsx
@@ -6,7 +6,8 @@ import {
 import { RelayKitProvider } from '@relayprotocol/relay-kit-ui'
 import { useTheme } from 'next-themes'
 import { useRouter } from 'next/router'
-import { FC, ReactNode, useEffect, useState } from 'react'
+import { FC, ReactNode, useMemo } from 'react'
+import { useCustomize } from 'context/customizeContext'
 
 const DEFAULT_APP_FEES = [
   {
@@ -15,6 +16,11 @@ const DEFAULT_APP_FEES = [
   }
 ]
 
+const BASE_THEME = {
+  font: 'var(--font-inter), -apple-system, Helvetica, sans-serif',
+  fontHeading: 'var(--font-inter), -apple-system, Helvetica, sans-serif'
+}
+
 export const RelayKitProviderWrapper: FC<{
   relayApi?: string
   dynamicChains: RelayChain[]
@@ -22,16 +28,16 @@ export const RelayKitProviderWrapper: FC<{
 }> = ({ relayApi, dynamicChains, children }) => {
   const { theme } = useTheme()
   const router = useRouter()
-  const [websocketsEnabled, setWebsocketsEnabled] = useState(false)
+  const { themeOverrides, websocketsEnabled } = useCustomize()
   const appFeesEnabled = router.query.appFees === 'true'
 
-  // Handle websocket configuration from query params
-  useEffect(() => {
-    const websocketParam = router.query.websockets as string
-    if (websocketParam !== undefined) {
-      setWebsocketsEnabled(websocketParam === 'true')
-    }
-  }, [router.query.websockets])
+  const mergedTheme = useMemo(
+    () => ({
+      ...BASE_THEME,
+      ...themeOverrides
+    }),
+    [themeOverrides]
+  )
 
   return (
     <RelayKitProvider
@@ -68,15 +74,7 @@ export const RelayKitProviderWrapper: FC<{
           console.log('message', message, level)
         }
       }}
-      theme={{
-        font: 'var(--font-inter), -apple-system, Helvetica, sans-serif',
-        fontHeading: 'var(--font-inter), -apple-system, Helvetica, sans-serif',
-        buttons: {
-          cta: {
-            fontStyle: 'italic'
-          }
-        }
-      }}
+      theme={mergedTheme}
     >
       {children}
     </RelayKitProvider>
diff --git a/demo/context/customizeContext.tsx b/demo/context/customizeContext.tsx
new file mode 100644
index 000000000..e31a34d68
--- /dev/null
+++ b/demo/context/customizeContext.tsx
@@ -0,0 +1,91 @@
+import {
+  createContext,
+  FC,
+  ReactNode,
+  useContext,
+  useState,
+  useCallback,
+  useMemo
+} from 'react'
+import type { RelayKitTheme } from '@relayprotocol/relay-kit-ui'
+import { MAINNET_RELAY_API, TESTNET_RELAY_API } from '@relayprotocol/relay-sdk'
+
+type CustomizeState = {
+  themeOverrides: Partial<RelayKitTheme>
+  setThemeOverrides: (overrides: Partial<RelayKitTheme>) => void
+  updateThemeValue: (path: string, value: string | undefined) => void
+  relayApi: string
+  setRelayApi: (api: string) => void
+  websocketsEnabled: boolean
+  setWebsocketsEnabled: (enabled: boolean) => void
+}
+
+const CustomizeContext = createContext<CustomizeState>({
+  themeOverrides: {},
+  setThemeOverrides: () => {},
+  updateThemeValue: () => {},
+  relayApi: MAINNET_RELAY_API,
+  setRelayApi: () => {},
+  websocketsEnabled: false,
+  setWebsocketsEnabled: () => {}
+})
+
+export const useCustomize = () => useContext(CustomizeContext)
+
+export const CustomizeProvider: FC<{ children: ReactNode }> = ({
+  children
+}) => {
+  const [themeOverrides, setThemeOverrides] = useState<
+    Partial<RelayKitTheme>
+  >({
+    buttons: {
+      cta: {
+        fontStyle: 'italic'
+      }
+    }
+  })
+  const [relayApi, setRelayApi] = useState(MAINNET_RELAY_API)
+  const [websocketsEnabled, setWebsocketsEnabled] = useState(false)
+
+  const updateThemeValue = useCallback(
+    (path: string, value: string | undefined) => {
+      setThemeOverrides((prev) => {
+        const next = { ...prev }
+        const keys = path.split('.')
+        let obj: any = next
+        for (let i = 0; i < keys.length - 1; i++) {
+          if (!obj[keys[i]]) obj[keys[i]] = {}
+          else obj[keys[i]] = { ...obj[keys[i]] }
+          obj = obj[keys[i]]
+        }
+        const lastKey = keys[keys.length - 1]
+        if (value === undefined || value === '') {
+          delete obj[lastKey]
+        } else {
+          obj[lastKey] = value
+        }
+        return next
+      })
+    },
+    []
+  )
+
+  const value = useMemo(
+    () => ({
+      themeOverrides,
+      setThemeOverrides,
+      updateThemeValue,
+      relayApi,
+      setRelayApi,
+      websocketsEnabled,
+      setWebsocketsEnabled
+    }),
+    [themeOverrides, updateThemeValue, relayApi, websocketsEnabled]
+  )
+
+  return (
+    <CustomizeContext.Provider value={value}>
+      {children}
+    </CustomizeContext.Provider>
+  )
+}
diff --git a/demo/pages/_app.tsx b/demo/pages/_app.tsx
index e9a6206cd..de4be4fb3 100644
--- a/demo/pages/_app.tsx
+++ b/demo/pages/_app.tsx
@@ -3,7 +3,7 @@ import '../fonts.css'
 import '../global.css'
 
 import type { AppProps, AppContext } from 'next/app'
-import React, { ReactNode, FC, useState, useEffect } from 'react'
+import React, { ReactNode, FC, useEffect } from 'react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { createConfig, http, WagmiProvider } from 'wagmi'
 import { Chain, mainnet, optimism, base, zora } from 'wagmi/chains'
@@ -33,6 +33,7 @@ import { EclipseWalletConnectors } from '@dynamic-labs/eclipse'
 import { TronWalletConnectors } from '@dynamic-labs/tron'
 import { AbstractEvmWalletConnectors } from '@dynamic-labs-connectors/abstract-global-wallet-evm'
 import { MoonPayProvider } from 'context/MoonpayProvider'
+import { CustomizeProvider, useCustomize } from 'context/customizeContext'
 import { queryRelayChains } from '@relayprotocol/relay-kit-hooks'
 import { RelayKitProviderWrapper } from 'components/providers/RelayKitProviderWrapper'
 import { Barlow, Chivo, Inter } from 'next/font/google'
@@ -73,14 +74,14 @@ const queryClient = new QueryClient()
 
 const AppWrapper: FC<AppWrapperProps> = ({ children, dynamicChains }) => {
   const { walletFilter, setWalletFilter } = useWalletFilter()
+  const { relayApi, setRelayApi } = useCustomize()
   const router = useRouter()
-  const [relayApi, setRelayApi] = useState(MAINNET_RELAY_API)
 
   useEffect(() => {
     const isTestnet = router.query.api === 'testnets'
     const newApi = isTestnet ? TESTNET_RELAY_API : MAINNET_RELAY_API
     if (relayApi !== newApi) {
-      setRelayApi(isTestnet ? TESTNET_RELAY_API : MAINNET_RELAY_API)
+      setRelayApi(newApi)
     }
   }, [router.query.api])
 
@@ -130,7 +131,7 @@ const AppWrapper: FC<AppWrapperProps> = ({ children, dynamicChains }) => {
   }, [])
 
   return (
-    <div>
+    <div style={{ fontFamily: 'var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif' }}>
       <ThemeProvider
         attribute="class"
         defaultTheme="light"
@@ -198,11 +199,13 @@ type MyAppProps = AppProps & {
 function MyApp({ Component, pageProps }: MyAppProps) {
   return (
     <WalletFilterProvider>
-      <QueryClientProvider client={queryClient}>
-        <AppWrapper dynamicChains={pageProps.dynamicChains}>
-          <Component {...pageProps} />
-        </AppWrapper>
-      </QueryClientProvider>
+      <CustomizeProvider>
+        <QueryClientProvider client={queryClient}>
+          <AppWrapper dynamicChains={pageProps.dynamicChains}>
+            <Component {...pageProps} />
+          </AppWrapper>
+        </QueryClientProvider>
+      </CustomizeProvider>
     </WalletFilterProvider>
   )
 }
diff --git a/demo/pages/ui/swap.tsx b/demo/pages/ui/swap.tsx
index 64d5ad934..28be9ae45 100644
--- a/demo/pages/ui/swap.tsx
+++ b/demo/pages/ui/swap.tsx
@@ -35,6 +35,7 @@ import { adaptSuiWallet } from '@relayprotocol/relay-sui-wallet-adapter'
 import { adaptTronWallet } from '@relayprotocol/relay-tron-wallet-adapter'
 import Head from 'next/head'
 import { isTronWallet, TronWallet } from '@dynamic-labs/tron'
+import { CustomizeSidebar } from 'components/CustomizeSidebar'
 
 const WALLET_VM_TYPES = ['evm', 'bvm', 'svm', 'suivm', 'tvm', 'hypevm'] as const
 
@@ -200,10 +201,7 @@ const SwapWidgetPage: NextPage = () => {
   return (
     <Layout
       styles={{
-        background:
-          theme === 'light'
-            ? 'linear-gradient(135deg, rgba(245, 242, 255, 1) 0%, rgba(235, 230, 255, 1) 100%)'
-            : 'linear-gradient(135deg, #1c172b 0%, #0f0d1a 100%)'
+        background: theme === 'light' ? '#F7F8FF' : '#000'
       }}
     >
       <Head>
@@ -228,7 +226,7 @@ const SwapWidgetPage: NextPage = () => {
             flexDirection: 'column',
             gap: 8,
             width: '100%',
-            maxWidth: 420
+            maxWidth: 400
           }}
         >
           <div
@@ -380,62 +378,12 @@ const SwapWidgetPage: NextPage = () => {
           />
         </div>
       </div>
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          gap: '16px',
-          width: '100%',
-          maxWidth: 420,
-          marginTop: '8px',
-          padding: '20px',
-          borderRadius: '12px',
-          background: theme === 'light' ? 'rgba(255,255,255,0.7)' : 'rgba(255,255,255,0.05)',
-          backdropFilter: 'blur(8px)',
-          border: theme === 'light' ? '1px solid rgba(0,0,0,0.06)' : '1px solid rgba(255,255,255,0.08)',
-          fontSize: '14px'
-        }}
-      >
-        <div style={{ fontWeight: 600, fontSize: '13px', textTransform: 'uppercase', letterSpacing: '0.5px', opacity: 0.5, width: '100%' }}>
-          Config
-        </div>
-
-        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', width: '100%' }}>
-          <input
-            type="checkbox"
-            id="single-chain"
-            checked={singleChainMode}
-            onChange={(e) => setSingleChainMode(e.target.checked)}
-          />
-          <label htmlFor="single-chain">Single Chain Mode</label>
-        </div>
-
-        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px 16px', width: '100%' }}>
-          {WALLET_VM_TYPES.map((vm) => (
-            <div
-              key={vm}
-              style={{ display: 'flex', alignItems: 'center', gap: '6px' }}
-            >
-              <input
-                id={`vm-${vm}`}
-                type="checkbox"
-                checked={supportedWalletVMs.includes(vm)}
-                onChange={(e) => {
-                  if (e.target.checked) {
-                    setSupportedWalletVMs((prev) => [...prev, vm])
-                  } else {
-                    setSupportedWalletVMs((prev) =>
-                      prev.filter((item) => item !== vm)
-                    )
-                  }
-                }}
-              />
-              <label htmlFor={`vm-${vm}`} style={{ fontSize: '13px' }}>{vm.toUpperCase()}</label>
-            </div>
-          ))}
-        </div>
-      </div>
+      <CustomizeSidebar
+        singleChainMode={singleChainMode}
+        setSingleChainMode={setSingleChainMode}
+        supportedWalletVMs={supportedWalletVMs}
+        setSupportedWalletVMs={setSupportedWalletVMs}
+      />
     </Layout>
   )
 }
diff --git a/packages/ui/src/components/common/MultiWalletDropdown.tsx b/packages/ui/src/components/common/MultiWalletDropdown.tsx
index 65a8f331a..e2b275b07 100644
--- a/packages/ui/src/components/common/MultiWalletDropdown.tsx
+++ b/packages/ui/src/components/common/MultiWalletDropdown.tsx
@@ -121,7 +121,7 @@ export const MultiWalletDropdown: FC<MultiWalletDropdownProps> = ({
   const shouldShowEns = isEnsCapableVmType && Boolean(displayName)
 
   const dropdownItemClassName =
-    'relay-rounded-lg relay-gap-2 relay-cursor-pointer relay-p-2 relay-transition-[backdrop-filter] relay-duration-[250ms] relay-ease-linear hover:relay-brightness-[0.98] relay-shrink-0 relay-content-center relay-w-full'
+    'relay-rounded-lg relay-gap-2 relay-cursor-pointer relay-p-2 relay-transition-[background-color] relay-duration-150 relay-ease-linear hover:relay-bg-[var(--relay-colors-gray3)] relay-shrink-0 relay-content-center relay-w-full'
 
   return (
     <Dropdown
@@ -174,7 +174,7 @@ export const MultiWalletDropdown: FC<MultiWalletDropdownProps> = ({
               <span style={{
                 color: !selectedWallet && selectedWalletAddress
                   ? 'var(--relay-colors-amber11)'
-                  : 'var(--relay-colors-primary9)'
+                  : 'var(--relay-colors-primary11)'
               }}>
                 {isSupportedSelectedWallet &&
                 selectedWalletAddress &&
@@ -192,7 +192,7 @@ export const MultiWalletDropdown: FC<MultiWalletDropdownProps> = ({
               style={{
                 color: !selectedWallet && selectedWalletAddress
                   ? 'var(--relay-colors-amber11)'
-                  : 'var(--relay-colors-primary9)'
+                  : 'var(--relay-colors-primary11)'
               }}
             >
               <FontAwesomeIcon icon={faChevronDown} width={14} height={14} />
diff --git a/packages/ui/src/components/common/TokenSelector/SuggestedTokens.tsx b/packages/ui/src/components/common/TokenSelector/SuggestedTokens.tsx
index bfecf6708..2fe86b6d4 100644
--- a/packages/ui/src/components/common/TokenSelector/SuggestedTokens.tsx
+++ b/packages/ui/src/components/common/TokenSelector/SuggestedTokens.tsx
@@ -64,7 +64,7 @@ export const SuggestedTokens: FC<SuggestedTokensProps> = ({
             color="ghost"
             size="none"
             corners="pill"
-            className="relay-flex relay-shrink-0 relay-cursor-pointer relay-outline-none relay-py-1 relay-pl-1 relay-pr-2 relay-gap-[1px] relay-items-center relay-border relay-border-solid relay-border-[var(--relay-colors-gray5)] relay-focus-inset"
+            className="relay-flex relay-shrink-0 relay-cursor-pointer relay-outline-none relay-py-1 relay-pl-1 relay-pr-2 relay-gap-[1px] relay-items-center relay-border relay-border-solid relay-border-[var(--relay-colors-gray5)] relay-focus-inset relay-transition-none"
           >
             <ChainTokenIcon
               chainId={token.chainId}
diff --git a/packages/ui/src/components/primitives/Button.tsx b/packages/ui/src/components/primitives/Button.tsx
index 44be38141..288b60ccd 100644
--- a/packages/ui/src/components/primitives/Button.tsx
+++ b/packages/ui/src/components/primitives/Button.tsx
@@ -53,7 +53,7 @@ const buttonVariants = cva(
       },
       corners: {
         square: 'relay-rounded-none',
-        rounded: 'relay-rounded-[12px]',
+        rounded: 'relay-rounded-[var(--relay-radii-button-border-radius)]',
         pill: 'relay-rounded-full',
         circle: 'relay-rounded-full relay-items-center relay-justify-center'
       },
@@ -69,7 +69,7 @@ const buttonVariants = cva(
           '[&:not(:disabled)]:relay-font-heading',
           '[&:not(:disabled)]:relay-font-bold',
           '[&:not(:disabled)]:relay-uppercase',
-          '[&:not(:disabled)]:relay-italic'
+          'relay-cta-font-style'
         ].join(' ')
       }
     },
@@ -85,9 +85,9 @@ export type ButtonVariantProps = VariantProps<typeof buttonVariants>
 
 const Button = forwardRef<
   HTMLButtonElement,
-  Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'ref' | 'color'> &
-    ButtonVariantProps & { className?: string }
->(({ className, children, ...props }, forwardedRef) => {
+  Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'ref' | 'color' | 'style'> &
+    ButtonVariantProps & { className?: string; style?: React.CSSProperties }
+>(({ className, children, style, ...props }, forwardedRef) => {
   const { color, size, corners, cta, ...buttonProps } = { ...props }
   return (
     <button
@@ -97,6 +97,7 @@ const Button = forwardRef<
         buttonVariants({ color, size, corners, cta }),
         className
       )}
+      style={style}
     >
       {children}
     </button>
diff --git a/packages/ui/src/components/primitives/Dialog.tsx b/packages/ui/src/components/primitives/Dialog.tsx
index 26c81a9e2..fdeb43b69 100644
--- a/packages/ui/src/components/primitives/Dialog.tsx
+++ b/packages/ui/src/components/primitives/Dialog.tsx
@@ -34,7 +34,7 @@ const Overlay = forwardRef<
 
 const contentBase = [
   'relay-bg-[var(--relay-colors-modal-background)]',
-  'relay-rounded-modal',
+  'relay-rounded-[var(--relay-radii-modal-border-radius)]',
   'relay-border-modal',
   'relay-shadow-xl',
   'relay-fixed',
diff --git a/packages/ui/src/components/primitives/Dropdown.tsx b/packages/ui/src/components/primitives/Dropdown.tsx
index 0cd5e7a16..c63755b39 100644
--- a/packages/ui/src/components/primitives/Dropdown.tsx
+++ b/packages/ui/src/components/primitives/Dropdown.tsx
@@ -48,8 +48,8 @@ const DropdownMenuItem = forwardRef<
         'relay-bg-[var(--relay-colors-modal-background)]',
         'relay-p-2 relay-outline-none relay-cursor-pointer',
         'relay-transition-[background-color] relay-duration-150 relay-ease-linear',
-        'hover:relay-bg-[var(--relay-colors-gray-10)]/10',
-        'focus:relay-bg-[var(--relay-colors-gray-10)]/10',
+        'hover:relay-bg-[var(--relay-colors-gray3)]',
+        'focus:relay-bg-[var(--relay-colors-gray3)]',
         className
       )}
     >
diff --git a/packages/ui/src/components/primitives/Input.tsx b/packages/ui/src/components/primitives/Input.tsx
index a456a8c9c..65984257e 100644
--- a/packages/ui/src/components/primitives/Input.tsx
+++ b/packages/ui/src/components/primitives/Input.tsx
@@ -55,7 +55,7 @@ const Input = forwardRef<
     const { size, ellipsify, style, ...inputProps } = props
 
     return (
-      <div className={cn('relay-flex', containerClassName)} style={style}>
+      <div className={cn('relay-flex relay-w-full', containerClassName)} style={style}>
         {icon && (
           <div className="relay-flex relay-relative">
             <div
diff --git a/packages/ui/src/components/primitives/Tooltip.tsx b/packages/ui/src/components/primitives/Tooltip.tsx
index 2470d62a0..71f1c1f30 100644
--- a/packages/ui/src/components/primitives/Tooltip.tsx
+++ b/packages/ui/src/components/primitives/Tooltip.tsx
@@ -31,7 +31,7 @@ const Tooltip = ({
         >
           <Popover.Arrow className="relay-fill-[var(--relay-colors-modal-background)]" />
           <div
-            className="relay-z-[10000004] relay-shadow-md relay-rounded-[8px] relay-overflow-hidden"
+            className="relay-z-[10000004] relay-shadow-md relay-rounded-[8px] relay-overflow-hidden relay-border-modal"
           >
             <div className="relay-bg-[var(--relay-colors-modal-background)] relay-p-2">
               {content}
@@ -62,7 +62,7 @@ const Tooltip = ({
         >
           <TooltipPrimitive.Arrow className="relay-fill-[var(--relay-colors-modal-background)]" />
           <div
-            className="relay-z-[10000004] relay-shadow-md relay-rounded-[8px] relay-overflow-hidden"
+            className="relay-z-[10000004] relay-shadow-md relay-rounded-[8px] relay-overflow-hidden relay-border-modal"
           >
             <div className="relay-bg-[var(--relay-colors-modal-background)] relay-p-2">
               {content}
diff --git a/packages/ui/src/components/widgets/SwapWidget/index.tsx b/packages/ui/src/components/widgets/SwapWidget/index.tsx
index 215bd3050..bac45adc5 100644
--- a/packages/ui/src/components/widgets/SwapWidget/index.tsx
+++ b/packages/ui/src/components/widgets/SwapWidget/index.tsx
@@ -1034,7 +1034,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                           aria-label="Swap Tokens Direction"
                           size="none"
                           color="white"
-                          className="relay-mt-[4px] relay-text-[color:var(--relay-colors-gray9)] relay-self-center relay-justify-center relay-w-full relay-h-full relay-z-10 relay-border-[length:var(--relay-borders-widget-swap-currency-button-border-width)] relay-border-solid relay-border-[color:var(--relay-colors-widget-swap-currency-button-border-color)] relay-rounded-swap-btn hover:relay-text-[color:var(--relay-colors-gray11)] hover:relay-bg-[var(--relay-colors-gray-2)]"
+                          className="relay-mt-[4px] relay-text-[color:var(--relay-colors-gray9)] relay-self-center relay-justify-center relay-w-full relay-h-full relay-z-10 relay-border-[length:var(--relay-borders-widget-swap-currency-button-border-width)] relay-border-solid !relay-border-[color:var(--relay-colors-widget-swap-currency-button-border-color)] relay-rounded-swap-btn hover:relay-text-[color:var(--relay-colors-gray11)] hover:relay-bg-[var(--relay-colors-gray-2)]"
                           onClick={() => {
                             if (fromToken || toToken) {
                               if (isUsdInputMode) {
diff --git a/packages/ui/src/providers/RelayKitProvider.tsx b/packages/ui/src/providers/RelayKitProvider.tsx
index 9dc6f64b3..13e8e28e9 100644
--- a/packages/ui/src/providers/RelayKitProvider.tsx
+++ b/packages/ui/src/providers/RelayKitProvider.tsx
@@ -85,6 +85,7 @@ export const themeOverrides: ThemeOverridesMap = {
     success: '--relay-colors-text-success'
   },
   buttons: {
+    borderRadius: '--relay-radii-button-border-radius',
     primary: {
       color: '--relay-colors-primary-button-color',
       background: '--relay-colors-primary-button-background',
diff --git a/packages/ui/src/styles/base.css b/packages/ui/src/styles/base.css
index 9db442679..401b11d0a 100644
--- a/packages/ui/src/styles/base.css
+++ b/packages/ui/src/styles/base.css
@@ -215,6 +215,7 @@
   /* --- Fonts --- */
   --relay-fonts-body: var(--font-inter), sans-serif;
   --relay-fonts-heading: var(--font-inter), sans-serif;
+  --relay-fonts-button-cta-font-style: normal;
 
   /* --- Gradients --- */
   --relay-gradients-success: linear-gradient(to right, #30A46C, #0ADF79);
@@ -223,6 +224,7 @@
   --relay-radii-widget-border-radius: 16px;
   --relay-radii-widget-card-border-radius: 12px;
   --relay-radii-modal-border-radius: 16px;
+  --relay-radii-button-border-radius: 12px;
   --relay-radii-input-border-radius: 8px;
   --relay-radii-dropdown-border-radius: 8px;
   --relay-radii-widget-swap-currency-button-border-radius: 8px;
@@ -820,6 +822,17 @@
 
   /* RGB triplet for composable opacity (dark) */
   --relay-colors-gray-rgb: 112, 112, 112;
+
+  /* Widget selector (token trigger) */
+  --relay-colors-widget-selector-background: #202425;
+  --relay-colors-widget-selector-hover-background: #2a2d2e;
+
+  /* Dark mode borders — grey instead of purple/invisible */
+  --relay-borders-modal-border: 1px solid var(--relay-colors-gray5);
+  --relay-borders-widget-border: 1px solid var(--relay-colors-gray5);
+  --relay-borders-widget-card-border: 1px solid var(--relay-colors-gray5);
+  --relay-borders-dropdown-border: 1px solid var(--relay-colors-gray5);
+  --relay-colors-widget-swap-currency-button-border-color: var(--relay-colors-gray5);
 }
 
 } /* end @layer base */
@@ -842,6 +855,9 @@
   .relay-border-dropdown {
     border: var(--relay-borders-dropdown-border);
   }
+  .relay-cta-font-style:not(:disabled) {
+    font-style: var(--relay-fonts-button-cta-font-style);
+  }
 }
 
 /* High-specificity inset focus ring — matches old PandaCSS :not(#\#) pattern */
diff --git a/packages/ui/src/themes/RelayKitTheme.ts b/packages/ui/src/themes/RelayKitTheme.ts
index 9ef82f51d..3340ecee0 100644
--- a/packages/ui/src/themes/RelayKitTheme.ts
+++ b/packages/ui/src/themes/RelayKitTheme.ts
@@ -23,6 +23,7 @@ export interface RelayKitTheme {
     success?: string
   }
   buttons?: {
+    borderRadius?: string
     primary?: Button
     secondary?: Button
     disabled?: {

From 30eb11a509e53c6324a41d51ac47e120757e1688 Mon Sep 17 00:00:00 2001
From: Ted Palmer <etpalmer17@gmail.com>
Date: Mon, 2 Mar 2026 12:03:27 -0500
Subject: [PATCH 05/25] Remove api and websocket config from sidebar

---
 demo/components/CustomizeSidebar.tsx | 50 ++--------------------------
 1 file changed, 2 insertions(+), 48 deletions(-)

diff --git a/demo/components/CustomizeSidebar.tsx b/demo/components/CustomizeSidebar.tsx
index 25ee1019f..5e79a3c7c 100644
--- a/demo/components/CustomizeSidebar.tsx
+++ b/demo/components/CustomizeSidebar.tsx
@@ -1,11 +1,7 @@
 import { FC, useCallback, useEffect, useRef, useState } from 'react'
 import { useCustomize } from 'context/customizeContext'
 import { useTheme } from 'next-themes'
-import {
-  MAINNET_RELAY_API,
-  TESTNET_RELAY_API,
-  ChainVM
-} from '@relayprotocol/relay-sdk'
+import { ChainVM } from '@relayprotocol/relay-sdk'
 
 const WALLET_VM_TYPES = [
   'evm',
@@ -238,11 +234,7 @@ export const CustomizeSidebar: FC<CustomizeSidebarProps> = ({
   const {
     themeOverrides,
     updateThemeValue,
-    setThemeOverrides,
-    relayApi,
-    setRelayApi,
-    websocketsEnabled,
-    setWebsocketsEnabled
+    setThemeOverrides
   } = useCustomize()
 
   const getNestedValue = (path: string): string => {
@@ -732,44 +724,6 @@ export const CustomizeSidebar: FC<CustomizeSidebarProps> = ({
         >
           <SectionTitle>Global</SectionTitle>
 
-          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-            <span style={{ fontSize: 13, flex: 1 }}>API</span>
-            <select
-              value={
-                relayApi === TESTNET_RELAY_API ? 'testnets' : 'mainnets'
-              }
-              onChange={(e) => {
-                setRelayApi(
-                  e.target.value === 'testnets'
-                    ? TESTNET_RELAY_API
-                    : MAINNET_RELAY_API
-                )
-              }}
-              style={{
-                fontSize: 13,
-                padding: '4px 8px',
-                borderRadius: 6,
-                border: `1px solid ${sidebarBorder}`,
-                background: 'transparent',
-                color: sidebarText
-              }}
-            >
-              <option value="mainnets">Mainnet</option>
-              <option value="testnets">Testnet</option>
-            </select>
-          </div>
-
-          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-            <input
-              type="checkbox"
-              id="sidebar-websockets"
-              checked={websocketsEnabled}
-              onChange={(e) => setWebsocketsEnabled(e.target.checked)}
-            />
-            <label htmlFor="sidebar-websockets" style={{ fontSize: 13 }}>
-              WebSockets
-            </label>
-          </div>
         </div>
       </div>
     </>

From 0f7e4acba6124342b6a5b128773fda492f76057a Mon Sep 17 00:00:00 2001
From: Ted Palmer <etpalmer17@gmail.com>
Date: Mon, 2 Mar 2026 15:59:22 -0500
Subject: [PATCH 06/25] clean up

---
 demo/components/CustomizeSidebar.tsx          |   4 +-
 packages/ui/QA_TEST_PLAN.md                   | 203 ++++++++++++++++++
 .../widgets/OnrampWidget/widget/index.tsx     |   9 +-
 3 files changed, 211 insertions(+), 5 deletions(-)
 create mode 100644 packages/ui/QA_TEST_PLAN.md

diff --git a/demo/components/CustomizeSidebar.tsx b/demo/components/CustomizeSidebar.tsx
index 5e79a3c7c..0cadb7869 100644
--- a/demo/components/CustomizeSidebar.tsx
+++ b/demo/components/CustomizeSidebar.tsx
@@ -279,7 +279,7 @@ export const CustomizeSidebar: FC<CustomizeSidebarProps> = ({
   const sidebarText = isDark ? '#e5e5e5' : '#1a1a1a'
 
   return (
-    <>
+    <div className="hidden md:contents">
       {/* Toggle button */}
       <button
         onClick={() => setOpen(!open)}
@@ -726,6 +726,6 @@ export const CustomizeSidebar: FC<CustomizeSidebarProps> = ({
 
         </div>
       </div>
-    </>
+    </div>
   )
 }
diff --git a/packages/ui/QA_TEST_PLAN.md b/packages/ui/QA_TEST_PLAN.md
new file mode 100644
index 000000000..2db3ae233
--- /dev/null
+++ b/packages/ui/QA_TEST_PLAN.md
@@ -0,0 +1,203 @@
+# UI Test Plan — Panda CSS → Tailwind Migration
+
+Goal: Verify zero visual/functional regressions after the CSS migration. This plan is designed to minimize QA effort by testing the highest-impact surfaces first and using a matrix approach to avoid redundant passes.
+
+---
+
+## Testing Matrix
+
+We have 4 dimensions. Instead of testing every combination (explosion), we use a **primary path + targeted sweeps** approach.
+
+| Dimension | Options |
+|-----------|---------|
+| **Viewport** | Desktop (1280px+), Mobile (375px) |
+| **Theme** | Light, Dark |
+| **Browser** | Chrome, Safari, Firefox |
+| **Widget** | SwapWidget, OnrampWidget, TokenWidget |
+
+**Strategy:**
+- Do the full flow walkthroughs on **Chrome Desktop, Light + Dark**
+- Do a **mobile sweep** on Chrome + Safari (iOS) for responsive-specific behavior
+- Do a **Firefox spot-check** on desktop only (it shares Gecko layout, unlikely to diverge from Chrome on Tailwind)
+
+---
+
+## Phase 1: Core Flows (Chrome Desktop, Light + Dark)
+
+These are the critical happy paths. Each should be tested in both light and dark mode.
+
+### 1.1 SwapWidget — Full Swap Flow
+**Page:** `/ui/swap`
+
+- [ ] Widget renders with correct background, border-radius, border, box-shadow
+- [ ] Token panels (sell/buy) have correct card background and borders
+- [ ] Click "Select Token" → TokenSelector dialog opens (centered, scale animation)
+- [ ] ChainFilter sidebar: search works, chains render with square icons, scrollable
+- [ ] ChainFilter starring: right-click a chain → star popover appears, chain moves to "Starred"
+- [ ] Suggested token pills render with border, no lingering focus ring after click
+- [ ] Token list: hover highlights, scroll works, keyboard nav (arrow keys from search)
+- [ ] Select an unverified token → UnverifiedTokenModal appears with warning
+- [ ] Accept unverified token → modal closes, token selected, persisted in localStorage
+- [ ] Enter amount → quote fetches, fee breakdown populates
+- [ ] USD mode toggle (⇅ button) switches between token/USD input
+- [ ] Swap arrow button: correct border (matches widget card border), hover state works
+- [ ] Swap arrow click → tokens swap positions, amounts recalculate
+- [ ] SlippageConfig: opens, Auto/Custom tabs work, color-coded rating displays
+- [ ] Fee breakdown: collapsible, slippage row always visible, price impact tooltip works
+- [ ] CTA button: "Connect Wallet" / "Swap" — italic when enabled, normal when disabled
+- [ ] Percentage buttons (25/50/75/100%) apply correct amounts
+- [ ] Multi-wallet dropdown: renders for sell side (OriginWalletSelector) and buy side (RecipientSelector)
+- [ ] CustomAddressModal: input spans full width, ENS resolution works, recent addresses show
+
+### 1.2 OnrampWidget
+**Page:** `/ui/onramp`
+
+- [ ] Widget renders with correct theming
+- [ ] Quick amount buttons ($100/$300/$1000) work
+- [ ] Token selector opens and functions correctly
+- [ ] USD/Token toggle works
+- [ ] Address entry works
+- [ ] CTA button states render correctly
+
+### 1.3 TokenWidget (Buy/Sell Tabs)
+**Page:** `/ui/token`
+
+- [ ] Tabs render and switch between Buy/Sell
+- [ ] Active tab indicator styled correctly
+- [ ] Both tab flows work: select token → enter amount → destination → swap
+- [ ] AmountModeToggle works in both tabs
+- [ ] Fee breakdown displays correctly
+
+### 1.4 Chain-Locked Mode
+**Page:** `/ui/chain`
+
+- [ ] Widget renders with locked destination chain (Base)
+- [ ] Token selector respects chain lock
+- [ ] Swap flow completes normally
+
+### 1.5 Deposit Address Flow
+**Page:** `/ui/depositAddresses`
+
+- [ ] Deposit address modal renders
+- [ ] Waiting for deposit step displays correctly
+- [ ] Copy address button works
+
+---
+
+## Phase 2: Dark Mode Sweep (Chrome Desktop)
+
+Run through Phase 1 flows again in dark mode, focusing on these known dark-mode-specific items:
+
+- [ ] Widget background switches to dark gray (`gray-1`)
+- [ ] Token selector trigger background is `#202425` (not the light gray)
+- [ ] Borders switch from primary4 (violet) to gray5 (visible gray)
+- [ ] Swap arrow border matches widget card border (gray5 in dark)
+- [ ] Text colors flip correctly (gray-12 for primary text)
+- [ ] All modals have correct dark backgrounds and borders
+- [ ] Fee breakdown card background correct
+- [ ] Tooltip/popover backgrounds correct
+- [ ] Input backgrounds correct (gray-3 dark variant)
+- [ ] Skeleton loading states use correct dark gray
+- [ ] No white flashes or light-mode colors bleeding through
+
+---
+
+## Phase 3: Mobile Sweep (Chrome + Safari iOS, 375px width)
+
+Test these on both light and dark mode on at least one pass.
+
+### 3.1 Dialog Behavior
+- [ ] All modals render as **bottom-sheet** (slide up from bottom, not centered)
+- [ ] Bottom-sheet animation is smooth (no janky translate conflicts)
+- [ ] Full-screen modals (TokenSelector) take full viewport
+- [ ] Swipe/tap outside to dismiss works
+
+### 3.2 TokenSelector — Mobile Layout
+- [ ] Renders in **tabbed mode** (not sidebar), with "Tokens" / "Chains" tabs
+- [ ] MobileChainSelector strip renders at top with horizontal scroll
+- [ ] Chain search works in mobile view
+- [ ] Keyboard doesn't cause layout jumps
+
+### 3.3 Tooltip → Popover Conversion
+- [ ] All tooltips render as **click-to-open popovers** on mobile (not hover)
+- [ ] Price impact tooltip, fee breakdown tooltips all tappable
+- [ ] Popover dismisses on outside tap
+
+### 3.4 Responsive Layouts
+- [ ] Widget fills viewport width correctly
+- [ ] Percentage buttons use mobile variant (taller, flex-1)
+- [ ] PercentageButtons don't overflow
+- [ ] CustomAddressModal input is full width
+- [ ] Text doesn't overflow or get clipped
+- [ ] Swap arrow button centered correctly between panels
+
+### 3.5 Safari-Specific
+- [ ] No iOS input zoom (font-size >= 16px on inputs)
+- [ ] Bottom-sheet doesn't conflict with Safari's bottom bar
+- [ ] `-webkit-appearance: none` on inputs (spin buttons hidden)
+- [ ] Animations use `-webkit-` prefixes where needed (autoprefixer should handle)
+
+---
+
+## Phase 4: Firefox Spot-Check (Desktop only)
+
+Quick pass through the SwapWidget flow:
+
+- [ ] Widget renders correctly (borders, radius, shadows)
+- [ ] TokenSelector dialog opens with correct animation
+- [ ] All CSS variables resolve correctly
+- [ ] Focus ring (box-shadow inset) renders correctly
+- [ ] Scrollbar styling acceptable (Firefox uses system scrollbars)
+- [ ] Animations play smoothly
+
+---
+
+## Phase 5: Customize Sidebar (Demo-specific)
+
+**Page:** `/ui/swap` with sidebar open
+
+- [ ] Theme color pickers work (primary, text, backgrounds)
+- [ ] Border radius slider updates ALL elements: widget, card, modal, input, dropdown, swap button, buttons
+- [ ] Italic CTA toggle: ON → enabled buttons italic, disabled buttons normal
+- [ ] Dark/Light mode toggle updates all theme variables
+- [ ] Reset button clears all overrides
+- [ ] Single chain mode toggle works
+- [ ] Wallet VM type checkboxes work
+
+---
+
+## Quick Reference: What Changed in Migration
+
+Components that had the most styling changes (highest regression risk):
+
+| Component | Risk | Why |
+|-----------|------|-----|
+| **Dialog** | High | Animation system rewritten (keyframes + bottom-sheet) |
+| **Button** | High | All variants rewritten with CVA, CTA font-style logic changed |
+| **TokenSelector** | High | Complex responsive layout, ChainFilter interactions |
+| **SwapWidget** | Medium | Many nested styled components, swap arrow border |
+| **FeeBreakdown** | Medium | Collapsible animation, tooltip positioning |
+| **Input** | Medium | Focus ring changed from border to box-shadow |
+| **Tooltip** | Medium | Dual-mode (hover/click) with different components |
+| **SuggestedTokens** | Low | Pill styling, focus ring fix |
+| **Dropdown** | Low | Simple Radix wrapper |
+| **Pill/Switch** | Low | Minimal styling |
+
+---
+
+## Recommended QA Assignment
+
+Split across 2 people to minimize total time:
+
+**Person A (Desktop focus):**
+- Phase 1 (all flows, light mode) — ~45 min
+- Phase 2 (dark mode sweep) — ~20 min
+- Phase 4 (Firefox spot-check) — ~10 min
+- Phase 5 (Customize sidebar) — ~15 min
+
+**Person B (Mobile focus):**
+- Phase 1.1 on mobile (swap flow only) — ~20 min
+- Phase 3 (full mobile sweep, Chrome + Safari) — ~30 min
+- Phase 2 on mobile (dark mode) — ~15 min
+
+**Total: ~2.5 hours combined, ~1.5 hours per person**
diff --git a/packages/ui/src/components/widgets/OnrampWidget/widget/index.tsx b/packages/ui/src/components/widgets/OnrampWidget/widget/index.tsx
index cf7d0dfa7..efc61981d 100644
--- a/packages/ui/src/components/widgets/OnrampWidget/widget/index.tsx
+++ b/packages/ui/src/components/widgets/OnrampWidget/widget/index.tsx
@@ -400,7 +400,8 @@ const OnrampWidget: FC<OnrampWidgetProps> = ({
                   <Button
                     color="white"
                     corners="pill"
-                    className="relay-min-h-[28px] relay-px-3 relay-py-1"
+                    size="none"
+                    className="relay-h-[30px] relay-px-[14px] relay-py-[4px] relay-text-[14px]"
                     onClick={() => {
                       setDisplayCurrency(false)
                       setInputValue('100', false)
@@ -411,7 +412,8 @@ const OnrampWidget: FC<OnrampWidgetProps> = ({
                   <Button
                     color="white"
                     corners="pill"
-                    className="relay-min-h-[28px] relay-px-3 relay-py-1"
+                    size="none"
+                    className="relay-h-[30px] relay-px-[14px] relay-py-[4px] relay-text-[14px]"
                     onClick={() => {
                       setDisplayCurrency(false)
                       setInputValue('300', false)
@@ -422,7 +424,8 @@ const OnrampWidget: FC<OnrampWidgetProps> = ({
                   <Button
                     color="white"
                     corners="pill"
-                    className="relay-min-h-[28px] relay-px-3 relay-py-1"
+                    size="none"
+                    className="relay-h-[30px] relay-px-[14px] relay-py-[4px] relay-text-[14px]"
                     onClick={() => {
                       setDisplayCurrency(false)
                       setInputValue('1000', false)

From 85e2da2565479ccc0a4220081051c900caefc1a5 Mon Sep 17 00:00:00 2001
From: Ted Palmer <etpalmer17@gmail.com>
Date: Mon, 2 Mar 2026 16:10:11 -0500
Subject: [PATCH 07/25] Hide customize sidebar on mobile

---
 demo/components/CustomizeSidebar.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/demo/components/CustomizeSidebar.tsx b/demo/components/CustomizeSidebar.tsx
index 0cadb7869..dc0cbb908 100644
--- a/demo/components/CustomizeSidebar.tsx
+++ b/demo/components/CustomizeSidebar.tsx
@@ -279,7 +279,9 @@ export const CustomizeSidebar: FC<CustomizeSidebarProps> = ({
   const sidebarText = isDark ? '#e5e5e5' : '#1a1a1a'
 
   return (
-    <div className="hidden md:contents">
+    <>
+      <style>{`.customize-sidebar { display: none; } @media (min-width: 768px) { .customize-sidebar { display: contents; } }`}</style>
+      <div className="customize-sidebar">
       {/* Toggle button */}
       <button
         onClick={() => setOpen(!open)}
@@ -726,6 +728,7 @@ export const CustomizeSidebar: FC<CustomizeSidebarProps> = ({
 
         </div>
       </div>
-    </div>
+      </div>
+    </>
   )
 }

From 778c35ea03ca643a2ae7eff6163fbdff9d0c3d88 Mon Sep 17 00:00:00 2001
From: Ted Palmer <etpalmer17@gmail.com>
Date: Mon, 2 Mar 2026 16:22:56 -0500
Subject: [PATCH 08/25] fixes

---
 packages/ui/src/components/widgets/FeeBreakdown.tsx | 13 ++-----------
 .../src/components/widgets/PriceImpactTooltip.tsx   |  2 +-
 2 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/packages/ui/src/components/widgets/FeeBreakdown.tsx b/packages/ui/src/components/widgets/FeeBreakdown.tsx
index ea161ab45..9f8991551 100644
--- a/packages/ui/src/components/widgets/FeeBreakdown.tsx
+++ b/packages/ui/src/components/widgets/FeeBreakdown.tsx
@@ -184,16 +184,7 @@ const FeeBreakdown: FC<Props> = ({
 
   return (
     <Flex
-      className={cn(
-        'relay-rounded-[var(--relay-radii-widget-card-border-radius)] relay-bg-[var(--relay-colors-widget-background)] relay-overflow-hidden relay-mb-[var(--relay-spacing-widget-card-section-gutter)]',
-        'relay-border-widget-card relay-transition-[border-radius,border-bottom]',
-        isOpen && 'relay-rounded-b-none'
-      )}
-      style={{
-        borderBottom: isOpen ? 'none' : undefined,
-        transitionDuration: '300ms, 0s',
-        transitionDelay: isOpen ? '0s, 0s' : '0s, 300ms'
-      }}
+      className="relay-rounded-[var(--relay-radii-widget-card-border-radius)] relay-bg-[var(--relay-colors-widget-background)] relay-overflow-hidden relay-mb-[var(--relay-spacing-widget-card-section-gutter)] relay-border-widget-card"
       direction="column"
     >
       <Flex justify="between" align="center" className="relay-p-3 relay-pb-0">
@@ -314,7 +305,7 @@ const FeeBreakdown: FC<Props> = ({
             </Flex>
           </Flex>
         </CollapsibleTrigger>
-        <CollapsibleContent className="relay-rounded-b-[12px]">
+        <CollapsibleContent>
           <Flex
             direction="column"
             className="relay-px-3 relay-pb-3 relay-pt-0 relay-gap-2 relay-bg-[var(--relay-colors-widget-background)]"
diff --git a/packages/ui/src/components/widgets/PriceImpactTooltip.tsx b/packages/ui/src/components/widgets/PriceImpactTooltip.tsx
index 00e484c50..eeeacff44 100644
--- a/packages/ui/src/components/widgets/PriceImpactTooltip.tsx
+++ b/packages/ui/src/components/widgets/PriceImpactTooltip.tsx
@@ -82,7 +82,7 @@ export const PriceImpactTooltip: FC<PriceImpactTooltipProps> = ({
             href="https://docs.relay.link/references/api/api_core_concepts/fees#relay-fees"
             target="_blank"
             rel="noopener noreferrer"
-            className="relay-text-[color:var(--relay-colors-primary11)] relay-text-[12px]"
+            className="relay-text-[color:var(--relay-colors-primary11)] !relay-text-[12px]"
           >
             Learn more about the fees
           </Anchor>

From ec05df1363b16403f4d9cca2c9848a335f976301 Mon Sep 17 00:00:00 2001
From: Ted Palmer <etpalmer17@gmail.com>
Date: Tue, 3 Mar 2026 10:24:16 -0500
Subject: [PATCH 09/25] feedback

---
 packages/ui/src/components/common/CustomAddressModal.tsx  | 2 +-
 .../ui/src/components/common/SlippageToleranceConfig.tsx  | 8 ++++----
 .../components/common/TokenSelector/ChainShortcuts.tsx    | 8 ++++----
 .../ui/src/components/common/TokenSelector/TokenList.tsx  | 6 +++---
 .../common/TokenSelector/triggers/TokenTrigger.tsx        | 2 +-
 packages/ui/src/components/primitives/Button.tsx          | 2 +-
 packages/ui/src/components/primitives/Input.tsx           | 2 +-
 packages/ui/src/components/primitives/Text.tsx            | 6 +++++-
 packages/ui/src/components/primitives/Tooltip.tsx         | 6 ++----
 packages/ui/src/styles/base.css                           | 5 +++++
 10 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/packages/ui/src/components/common/CustomAddressModal.tsx b/packages/ui/src/components/common/CustomAddressModal.tsx
index 7c8293e4d..d9e7ea3b3 100644
--- a/packages/ui/src/components/common/CustomAddressModal.tsx
+++ b/packages/ui/src/components/common/CustomAddressModal.tsx
@@ -210,7 +210,7 @@ export const CustomAddressModal: FC<Props> = ({
               <Button
                 color="ghost"
                 size="none"
-                className="relay-absolute relay-right-2 relay-top-1/2 -relay-translate-y-1/2 relay-w-6 relay-h-6 relay-min-w-[24px] relay-min-h-[24px] relay-p-0 relay-rounded relay-flex relay-items-center relay-justify-center relay-bg-[var(--relay-colors-gray3)] relay-text-[color:var(--relay-colors-gray8)]"
+                className="relay-absolute relay-right-[8px] relay-top-1/2 -relay-translate-y-1/2 !relay-w-[24px] !relay-h-[24px] !relay-min-w-0 !relay-min-h-0 !relay-leading-none relay-p-0 relay-rounded relay-flex relay-items-center relay-justify-center relay-bg-[var(--relay-colors-gray3)] !relay-text-[color:var(--relay-colors-gray8)]"
                 onMouseDown={(e) => {
                   e.preventDefault() // Prevent input from losing focus
                 }}
diff --git a/packages/ui/src/components/common/SlippageToleranceConfig.tsx b/packages/ui/src/components/common/SlippageToleranceConfig.tsx
index 5c730c1c1..8f48144c7 100644
--- a/packages/ui/src/components/common/SlippageToleranceConfig.tsx
+++ b/packages/ui/src/components/common/SlippageToleranceConfig.tsx
@@ -175,7 +175,7 @@ const SlippageTabs: FC<SlippageTabsProps> = ({
               'relay-h-9 !relay-pr-7 relay-border-none relay-text-right relay-w-full',
               'max-[520px]:relay-bg-transparent max-[520px]:relay-border max-[520px]:relay-border-solid max-[520px]:relay-border-[var(--relay-colors-gray-5)]'
             )}
-            style={{ color: tokenToColor(slippageRatingColor) }}
+            inputStyle={{ color: tokenToColor(slippageRatingColor) }}
           />
           <Box
             className="relay-absolute relay-right-2 relay-top-1/2 -relay-translate-y-1/2"
@@ -185,12 +185,12 @@ const SlippageTabs: FC<SlippageTabsProps> = ({
         </Flex>
 
         {slippageRating === 'very-high' ? (
-          <Text style="body3" className="relay-text-[color:var(--relay-colors-red11)]">
+          <Text style="body3" color="red">
             Very high slippage
           </Text>
         ) : null}
         {slippageRating === 'high' ? (
-          <Text style="body3" className="relay-text-[color:var(--relay-colors-amber11)]">
+          <Text style="body3" color="warningSecondary">
             High slippage
           </Text>
         ) : null}
@@ -348,7 +348,7 @@ export const SlippageToleranceConfig: FC<SlippageToleranceConfigProps> = ({
         }}
       >
         {open === false && displayValue && (
-          <Text style="subtitle2" className={slippageRatingColor ? `relay-text-[color:var(--relay-colors-${slippageRatingColor})]` : undefined}>
+          <Text style="subtitle2" color={slippageRatingColor === 'red11' ? 'red' : slippageRatingColor === 'amber11' ? 'warningSecondary' : undefined}>
             {displayValue}%
           </Text>
         )}
diff --git a/packages/ui/src/components/common/TokenSelector/ChainShortcuts.tsx b/packages/ui/src/components/common/TokenSelector/ChainShortcuts.tsx
index f38238859..ff00553bf 100644
--- a/packages/ui/src/components/common/TokenSelector/ChainShortcuts.tsx
+++ b/packages/ui/src/components/common/TokenSelector/ChainShortcuts.tsx
@@ -93,7 +93,7 @@ export const ChainShortcuts: FC<ChainShortcutsProps> = ({
   }
 
   return (
-    <Flex className="relay-gap-2 relay-w-full relay-overflow-x-auto relay-py-2 relay-px-2 relay-rounded-[12px]" style={{ backgroundColor: 'var(--relay-colors-gray3)' }}>
+    <Flex className="relay-gap-2 relay-w-full relay-overflow-x-auto relay-py-2 relay-px-2 relay-items-center">
       {shortcutChains.map((chain) => (
         <ChainShortcutButton
           key={chain.id?.toString() ?? 'all-chains'}
@@ -107,7 +107,7 @@ export const ChainShortcuts: FC<ChainShortcutsProps> = ({
         color="ghost"
         size="none"
         onClick={onMoreClick}
-        className="relay-flex relay-items-center relay-gap-1 relay-px-2 relay-py-[10px] relay-h-[40px] relay-rounded-[8px] relay-bg-[var(--relay-colors-dropdown-background)] relay-text-[color:var(--relay-colors-gray9)] hover:relay-bg-[var(--relay-colors-gray3)]"
+        className="relay-flex relay-items-center relay-gap-1 relay-px-2 relay-rounded-[8px] !relay-bg-[var(--relay-colors-gray3)] relay-text-[color:var(--relay-colors-gray9)] hover:!relay-bg-[var(--relay-colors-gray4)] relay-h-[40px]"
       >
         <Text style="subtitle1" color="subtle">
           More
@@ -137,8 +137,8 @@ const ChainShortcutButton: FC<ChainShortcutButtonProps> = ({
       className={cn(
         'relay-flex relay-flex-col relay-items-center relay-gap-1 relay-py-2 relay-px-3 relay-rounded-[12px]',
         isSelected
-          ? 'relay-bg-[var(--relay-colors-gray6)] hover:relay-bg-[var(--relay-colors-gray6)]'
-          : 'relay-bg-[var(--relay-colors-dropdown-background)] hover:relay-bg-[var(--relay-colors-gray3)]'
+          ? '!relay-bg-[var(--relay-colors-gray5)] hover:!relay-bg-[var(--relay-colors-gray5)]'
+          : '!relay-bg-[var(--relay-colors-gray3)] hover:!relay-bg-[var(--relay-colors-gray4)]'
       )}
     >
       {chain.id ? (
diff --git a/packages/ui/src/components/common/TokenSelector/TokenList.tsx b/packages/ui/src/components/common/TokenSelector/TokenList.tsx
index c9ec296c5..0fa0711ed 100644
--- a/packages/ui/src/components/common/TokenSelector/TokenList.tsx
+++ b/packages/ui/src/components/common/TokenSelector/TokenList.tsx
@@ -184,9 +184,9 @@ export const TokenList: FC<TokenListProps> = ({
         {showMoreButton && (
           <Button
             color="grey"
-            size="small"
+            size="none"
             corners="pill"
-            className="relay-ml-auto relay-min-h-[24px] relay-px-2 relay-py-1"
+            className="relay-ml-auto relay-h-[24px] relay-px-2 relay-py-1"
             onClick={() => setTokensExpanded(!tokensExpanded)}
           >
             <Text style="subtitle3" color="subtle">
@@ -195,7 +195,7 @@ export const TokenList: FC<TokenListProps> = ({
             <Text
               style="body1"
               className={cn(
-                'relay-text-[color:var(--relay-colors-gray9)] relay-ml-auto relay-w-[12px]',
+                '!relay-text-[color:var(--relay-colors-gray9)] relay-ml-auto relay-w-[12px]',
                 tokensExpanded ? 'relay-rotate-180' : 'relay-rotate-0'
               )}
             >
diff --git a/packages/ui/src/components/common/TokenSelector/triggers/TokenTrigger.tsx b/packages/ui/src/components/common/TokenSelector/triggers/TokenTrigger.tsx
index 752bd699e..ae5bf1e3f 100644
--- a/packages/ui/src/components/common/TokenSelector/triggers/TokenTrigger.tsx
+++ b/packages/ui/src/components/common/TokenSelector/triggers/TokenTrigger.tsx
@@ -63,7 +63,7 @@ export const TokenTrigger: FC<TokenTriggerProps> = ({
         </Flex>
       </Flex>
       {locked ? null : (
-        <Box className="relay-text-[color:var(--relay-colors-gray11)] relay-w-[14px] relay-shrink-0">
+        <Box className="relay-text-[color:var(--relay-colors-gray9)] relay-w-[14px] relay-shrink-0">
           <FontAwesomeIcon icon={faChevronRight} width={14} />
         </Box>
       )}
diff --git a/packages/ui/src/components/primitives/Button.tsx b/packages/ui/src/components/primitives/Button.tsx
index 288b60ccd..3a357156c 100644
--- a/packages/ui/src/components/primitives/Button.tsx
+++ b/packages/ui/src/components/primitives/Button.tsx
@@ -28,7 +28,7 @@ const buttonVariants = cva(
           'hover:relay-bg-[var(--relay-colors-secondary-button-hover-background)]',
           'hover:relay-text-[color:var(--relay-colors-secondary-button-hover-color)]'
         ].join(' '),
-        ghost: 'relay-text-[color:var(--relay-colors-text-default)] relay-bg-transparent',
+        ghost: 'relay-bg-transparent',
         white: [
           'relay-bg-[var(--relay-colors-widget-background)]',
           'relay-transition-[filter] relay-duration-[250ms] relay-ease-linear',
diff --git a/packages/ui/src/components/primitives/Input.tsx b/packages/ui/src/components/primitives/Input.tsx
index 65984257e..6a886c7d0 100644
--- a/packages/ui/src/components/primitives/Input.tsx
+++ b/packages/ui/src/components/primitives/Input.tsx
@@ -8,7 +8,7 @@ const inputVariants = cva(
     'relay-w-full relay-px-4 relay-py-3 relay-rounded-input relay-font-body relay-text-[16px]',
     'relay-text-[color:var(--relay-colors-input-color)]',
     'relay-bg-[var(--relay-colors-input-background)]',
-    'placeholder:relay-text-[color:var(--relay-colors-gray9)]',
+    'placeholder:relay-text-[color:var(--relay-colors-gray9)] relay-placeholder-ellipsis',
     'relay-transition-shadow relay-duration-200',
     'focus:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)] focus:relay-outline-none',
     'disabled:relay-cursor-not-allowed',
diff --git a/packages/ui/src/components/primitives/Text.tsx b/packages/ui/src/components/primitives/Text.tsx
index 1c546f285..948bc5d11 100644
--- a/packages/ui/src/components/primitives/Text.tsx
+++ b/packages/ui/src/components/primitives/Text.tsx
@@ -3,7 +3,7 @@ import type { FC, PropsWithChildren } from 'react'
 import { cn } from '../../utils/cn.js'
 
 const textVariants = cva(
-  'relay-text-[color:var(--relay-colors-text-default)] relay-font-body',
+  'relay-font-body',
   {
     variants: {
       style: {
@@ -23,6 +23,7 @@ const textVariants = cva(
           'relay-font-medium relay-text-[10px] relay-text-[color:var(--relay-colors-gray11)]'
       },
       color: {
+        default: 'relay-text-[color:var(--relay-colors-text-default)]',
         subtle: 'relay-text-[color:var(--relay-colors-text-subtle)]',
         subtleSecondary:
           'relay-text-[color:var(--relay-colors-text-subtle-secondary)]',
@@ -39,6 +40,9 @@ const textVariants = cva(
       ellipsify: {
         true: 'relay-text-ellipsis relay-overflow-hidden relay-whitespace-nowrap'
       }
+    },
+    defaultVariants: {
+      color: 'default'
     }
   }
 )
diff --git a/packages/ui/src/components/primitives/Tooltip.tsx b/packages/ui/src/components/primitives/Tooltip.tsx
index 71f1c1f30..3be2a3fdc 100644
--- a/packages/ui/src/components/primitives/Tooltip.tsx
+++ b/packages/ui/src/components/primitives/Tooltip.tsx
@@ -29,9 +29,8 @@ const Tooltip = ({
           style={{ zIndex: 10000003, outline: 'none', maxWidth: '100vw' }}
           {...props}
         >
-          <Popover.Arrow className="relay-fill-[var(--relay-colors-modal-background)]" />
           <div
-            className="relay-z-[10000004] relay-shadow-md relay-rounded-[8px] relay-overflow-hidden relay-border-modal"
+            className="relay-z-[10000004] relay-shadow-[0_2px_12px_rgba(0,0,0,0.12)] relay-rounded-[8px] relay-overflow-hidden relay-border-modal"
           >
             <div className="relay-bg-[var(--relay-colors-modal-background)] relay-p-2">
               {content}
@@ -60,9 +59,8 @@ const Tooltip = ({
           className="relay-animate-content-fade-in"
           {...props}
         >
-          <TooltipPrimitive.Arrow className="relay-fill-[var(--relay-colors-modal-background)]" />
           <div
-            className="relay-z-[10000004] relay-shadow-md relay-rounded-[8px] relay-overflow-hidden relay-border-modal"
+            className="relay-z-[10000004] relay-shadow-[0_2px_12px_rgba(0,0,0,0.12)] relay-rounded-[8px] relay-overflow-hidden relay-border-modal"
           >
             <div className="relay-bg-[var(--relay-colors-modal-background)] relay-p-2">
               {content}
diff --git a/packages/ui/src/styles/base.css b/packages/ui/src/styles/base.css
index 401b11d0a..4e1a671bd 100644
--- a/packages/ui/src/styles/base.css
+++ b/packages/ui/src/styles/base.css
@@ -858,6 +858,11 @@
   .relay-cta-font-style:not(:disabled) {
     font-style: var(--relay-fonts-button-cta-font-style);
   }
+  .relay-placeholder-ellipsis::placeholder {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
 }
 
 /* High-specificity inset focus ring — matches old PandaCSS :not(#\#) pattern */

From 2decb69cd499f1627d9531a28a39bb33961eeb29 Mon Sep 17 00:00:00 2001
From: Ted Palmer <etpalmer17@gmail.com>
Date: Tue, 3 Mar 2026 12:08:29 -0500
Subject: [PATCH 10/25] Fix deposit address qr code + gas top up

---
 .../steps/ApprovalPlusSwapStep.tsx            |   3 +-
 .../steps/SwapConfirmationStep.tsx            |  31 ++---
 .../steps/WaitingForDepositStep.tsx           | 108 +++++++++++-------
 .../ui/src/components/primitives/Pill.tsx     |   4 +-
 .../ui/src/components/primitives/Text.tsx     |   6 +-
 .../widgets/SwapWidget/GasTopUpSection.tsx    |  10 +-
 .../components/widgets/WidgetErrorWell.tsx    |  12 +-
 7 files changed, 103 insertions(+), 71 deletions(-)

diff --git a/packages/ui/src/components/common/TransactionModal/steps/ApprovalPlusSwapStep.tsx b/packages/ui/src/components/common/TransactionModal/steps/ApprovalPlusSwapStep.tsx
index b79a634b3..7e61b2e18 100644
--- a/packages/ui/src/components/common/TransactionModal/steps/ApprovalPlusSwapStep.tsx
+++ b/packages/ui/src/components/common/TransactionModal/steps/ApprovalPlusSwapStep.tsx
@@ -73,7 +73,8 @@ export const ApprovalPlusSwapStep: FC<ApprovalPlusSwapStepProps> = ({
         </Flex>
         <Text
           style="body1"
-          className="relay-text-[color:var(--relay-colors-gray9)] relay-px-4 relay-py-0 bp400Down:relay-rotate-90"
+          color="subtle"
+          className="relay-px-4 relay-py-0 bp400Down:relay-rotate-90"
         >
           <FontAwesomeIcon icon={faArrowRight} width={16} />
         </Text>
diff --git a/packages/ui/src/components/common/TransactionModal/steps/SwapConfirmationStep.tsx b/packages/ui/src/components/common/TransactionModal/steps/SwapConfirmationStep.tsx
index 363957431..447258d9d 100644
--- a/packages/ui/src/components/common/TransactionModal/steps/SwapConfirmationStep.tsx
+++ b/packages/ui/src/components/common/TransactionModal/steps/SwapConfirmationStep.tsx
@@ -104,7 +104,8 @@ export const SwapConfirmationStep: FC<SwapConfirmationStepProps> = ({
         </Flex>
         <Text
           style="body1"
-          className="relay-text-[color:var(--relay-colors-gray9)] relay-px-3 relay-py-0 bp400Down:relay-rotate-90 bp400Down:relay-py-3 bp400Down:relay-px-0"
+          color="subtle"
+          className="relay-px-3 relay-py-0 bp400Down:relay-rotate-90 bp400Down:relay-py-3 bp400Down:relay-px-0"
         >
           <FontAwesomeIcon icon={faArrowRight} width={16} />
         </Text>
@@ -246,7 +247,7 @@ export const StepRow: FC<StepRowProps> = ({
                     <Flex align="center" className="relay-gap-[4px]">
                       <Text
                         style="subtitle3"
-                        className="relay-text-[color:var(--relay-colors-green11)]"
+                        color="green"
                       >
                         {successText}:
                       </Text>
@@ -256,11 +257,11 @@ export const StepRow: FC<StepRowProps> = ({
                             href={txUrl}
                             target="_blank"
                             rel="noopener noreferrer"
-                            className="relay-text-[color:var(--colors-primary11)] relay-no-underline"
+                            className="relay-no-underline"
                           >
                             <Text
                               style="subtitle3"
-                              className="relay-text-[color:var(--relay-colors-primary11)]"
+                              color="primary"
                             >
                               {hashPart}
                             </Text>
@@ -268,7 +269,7 @@ export const StepRow: FC<StepRowProps> = ({
                         ) : (
                           <Text
                             style="subtitle3"
-                            className="relay-text-[color:var(--relay-colors-primary11)]"
+                            color="primary"
                           >
                             {hashPart}
                           </Text>
@@ -295,7 +296,7 @@ export const StepRow: FC<StepRowProps> = ({
                     <Flex align="center" className="relay-gap-[4px]">
                       <Text
                         style="subtitle3"
-                        className="relay-text-[color:var(--relay-colors-primary11)]"
+                        color="primary"
                       >
                         {labelText}:
                       </Text>
@@ -305,11 +306,11 @@ export const StepRow: FC<StepRowProps> = ({
                             href={txUrl}
                             target="_blank"
                             rel="noopener noreferrer"
-                            className="relay-text-[color:var(--colors-primary11)] relay-no-underline"
+                            className="relay-no-underline"
                           >
                             <Text
                               style="subtitle3"
-                              className="relay-text-[color:var(--relay-colors-primary11)]"
+                              color="primary"
                             >
                               {hashPart}
                             </Text>
@@ -317,7 +318,7 @@ export const StepRow: FC<StepRowProps> = ({
                         ) : (
                           <Text
                             style="subtitle3"
-                            className="relay-text-[color:var(--relay-colors-primary11)]"
+                            color="primary"
                           >
                             {hashPart}
                           </Text>
@@ -329,15 +330,15 @@ export const StepRow: FC<StepRowProps> = ({
                 return (
                   <Text
                     style="subtitle3"
-                    className={cn(
+                    color={
                       subTextColor === 'slate10'
-                        ? 'relay-text-[color:var(--relay-colors-slate10)]'
+                        ? 'slate'
                         : subTextColor === 'subtle'
-                          ? 'relay-text-[color:var(--relay-colors-text-subtle)]'
+                          ? 'subtle'
                           : subTextColor === 'green11'
-                            ? 'relay-text-[color:var(--relay-colors-green11)]'
-                            : 'relay-text-[color:var(--relay-colors-primary11)]'
-                    )}
+                            ? 'green'
+                            : 'primary'
+                    }
                   >
                     {subText}
                   </Text>
diff --git a/packages/ui/src/components/common/TransactionModal/steps/WaitingForDepositStep.tsx b/packages/ui/src/components/common/TransactionModal/steps/WaitingForDepositStep.tsx
index df44315f8..fa2b3d029 100644
--- a/packages/ui/src/components/common/TransactionModal/steps/WaitingForDepositStep.tsx
+++ b/packages/ui/src/components/common/TransactionModal/steps/WaitingForDepositStep.tsx
@@ -25,6 +25,10 @@ import {
   PopoverTrigger
 } from '@radix-ui/react-popover'
 
+// Transparent 1x1 PNG used as placeholder for QR code center image
+const TRANSPARENT_PNG =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQI12NgAAIABQABNjN9GQAAAABJRU5ErkJggg=='
+
 type WaitingForDepositStepProps = {
   fromToken?: Token
   fromChain?: RelayChain
@@ -133,52 +137,70 @@ export const WaitingForDepositStep: FC<WaitingForDepositStepProps> = ({
                   </Box>
                 </PopoverTrigger>
                 <PopoverPortal>
-                  <PopoverContent className="relay-z-[9999]" sideOffset={4}>
+                  <PopoverContent
+                    sideOffset={4}
+                    align="end"
+                    side="top"
+                    avoidCollisions={false}
+                    style={{ zIndex: 10000001 }}
+                  >
                     <div
-                      className="relay-rounded-[8px] relay-overflow-hidden relay-transition-transform relay-duration-300 relay-ease-in-out hover:relay-scale-125 relay-shadow-[0px_1px_5px_rgba(0,0,0,0.2)]"
+                      style={{
+                        borderRadius: 8,
+                        padding: 8,
+                        backgroundColor: 'var(--relay-colors-modal-background)',
+                        boxShadow: '0px 1px 5px rgba(0,0,0,0.2)'
+                      }}
                     >
-                      <div
-                        className="relay-p-2 relay-bg-[var(--relay-colors-modal-background)]"
-                      >
-                        <Flex
-                          className="relay-mx-auto relay-w-[105px] relay-h-[105px]"
+                      <div style={{ position: 'relative', width: 105, height: 105 }}>
+                        <QRCodeCanvas
+                          value={qrcodeUrl}
+                          width={105}
+                          height={105}
+                          level={'H'}
+                          imageSettings={{
+                            src: TRANSPARENT_PNG,
+                            height: 33,
+                            width: 33,
+                            excavate: true
+                          }}
+                          style={{ display: 'block', width: 105, height: 105 }}
+                        />
+                        <div
+                          style={{
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            width: 105,
+                            height: 105,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            pointerEvents: 'none'
+                          }}
                         >
-                          <Flex
-                            className="relay-absolute relay-items-center relay-justify-center relay-w-[105px] relay-h-[105px]"
-                          >
-                            <Flex
-                              className="relay-relative relay-z-[999] relay-transform-gpu"
-                            >
-                              <ChainIcon
-                                chainId={fromChain?.id}
-                                height={14}
-                                width={14}
-                                className="relay-absolute relay-bottom-0 relay-right-0 relay-border relay-border-solid relay-border-white"
-                                borderRadius={4}
-                              />
-                              <img
-                                alt={fromToken?.name}
-                                src={fromToken?.logoURI}
-                                width={33}
-                                height={33}
-                                className="relay-rounded-full relay-border-[1.5px] relay-border-solid relay-border-white relay-bg-white"
-                              />
-                            </Flex>
-                          </Flex>
-                          <QRCodeCanvas
-                            value={qrcodeUrl}
-                            width={105}
-                            height={105}
-                            level={'H'}
-                            imageSettings={{
-                              src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAhCAYAAAC803lsAAAMP2lDQ1BJQ0MgUHJvZmlsZQAASImVVwdYU8kWnluSkEBoAQSkhN4EESkBpITQQu8INkISIJQQA0HFjiwquBZULGBDV0UUrIDYETuLYu8LKgrKuliwK29SQNd95Xvn++be//5z5j9nzp1bBgC1kxyRKBtVByBHmC+OCfKjj09KppN6AAJQQAE6wJLDzRMxo6LCALSh89/t3U3oDe2avVTrn/3/1TR4/DwuAEgUxKm8PG4OxAcBwKu4InE+AEQpbzYtXyTFsAEtMUwQ4kVSnC7HVVKcKsd7ZT5xMSyIWwFQUuFwxOkAqF6BPL2Amw41VPshdhTyBEIA1OgQe+fk5PIgToHYGvqIIJbqM1J/0En/m2bqsCaHkz6M5XORmZK/IE+UzZnxf5bjf1tOtmQohiVsKhni4BjpnGHdbmflhkqxCsR9wtSISIg1If4g4Mn8IUYpGZLgeLk/asDNY8GawbsMUEcexz8UYgOIA4XZEWEKPjVNEMiGGK4QdLognx0HsS7Ei/h5AbEKn83i3BhFLLQhTcxiKvjzHLEsrjTWQ0lWPFOh/zqDz1boY6qFGXGJEFMgNi8QJERArAqxQ15WbKjCZ1xhBitiyEcsiZHmbw5xDF8Y5CfXxwrSxIExCv/SnLyh+WKbMwTsCAXen58RFyyvD9bK5cjyh3PBrvCFzPghHX7e+LChufD4/gHyuWM9fGF8rELngyjfL0Y+FqeIsqMU/rgpPztIyptC7JxXEKsYiyfkwwUp18fTRPlRcfI88cJMTkiUPB98OQgDLOAP6EACWyrIBZlA0N7X2Aev5D2BgAPEIB3wgb2CGRqRKOsRwmMsKAR/QsQHecPj/GS9fFAA+a/DrPxoD9JkvQWyEVngKcQ5IBRkw2uJbJRwOFoCeAIZwT+ic2DjwnyzYZP2/3t+iP3OMCETpmAkQxHpakOexACiPzGYGEi0wfVxb9wTD4NHX9iccAbuPjSP7/6Ep4QOwiPCDUIn4c4UQZH4pyzDQSfUD1TUIvXHWuCWUNMF98O9oDpUxnVwfWCPO8M4TNwHRnaBLEuRt7Qq9J+0/zaDH+6Gwo/sSEbJI8i+ZOufR6raqroMq0hr/WN95LmmDtebNdzzc3zWD9XnwXPoz57YIuwAdg47hV3AjmKNgI6dwJqwNuyYFA+vriey1TUULUaWTxbUEfwj3tCdlVYyz7HWsdfxi7wvnz9d+o4GrFzRDLEgPSOfzoRfBD6dLeQ6jKI7OTo5AyD9vshfX2+iZd8NRKftO7fgDwC8TgwODh75zoWcAGCfG3z8B3/nrBnw06EMwPnDXIm4QM7h0gMBviXU4JOmB4yAGbCG83ECrsAT+IIAEAIiQRxIApNh9hlwnYvBNDALzAcloAwsB6vBerAJbAU7wR6wHzSCo+AUOAsugSvgBrgHV083eAH6wTvwGUEQEkJFaIgeYoxYIHaIE8JAvJEAJAyJQZKQFCQdESISZBayAClDypH1yBakBtmHHEZOIReQDuQO0oX0Iq+RTyiGqqBaqCFqiY5GGSgTDUXj0EloOjoVLUSL0aXoWrQa3Y02oKfQS+gNtBN9gQ5gAFPGdDATzB5jYCwsEkvG0jAxNgcrxSqwaqwOa4b3+RrWifVhH3EiTsPpuD1cwcF4PM7Fp+Jz8CX4enwn3oC34tfwLrwf/0agEgwIdgQPApswnpBOmEYoIVQQthMOEc7AZ6mb8I5IJOoQrYhu8FlMImYSZxKXEDcQ64kniR3Ex8QBEomkR7IjeZEiSRxSPqmEtI60m3SCdJXUTfqgpKxkrOSkFKiUrCRUKlKqUNqldFzpqtIzpc9kdbIF2YMcSeaRZ5CXkbeRm8mXyd3kzxQNihXFixJHyaTMp6yl1FHOUO5T3igrK5squytHKwuU5ymvVd6rfF65S/mjiqaKrQpLZaKKRGWpyg6Vkyp3VN5QqVRLqi81mZpPXUqtoZ6mPqR+UKWpOqiyVXmqc1UrVRtUr6q+VCOrWagx1SarFapVqB1Qu6zWp05Wt1RnqXPU56hXqh9Wv6U+oEHTGKMRqZGjsURjl8YFjR5NkqalZoAmT7NYc6vmac3HNIxmRmPRuLQFtG20M7RuLaKWlRZbK1OrTGuPVrtWv7amtrN2gvZ07UrtY9qdOpiOpQ5bJ1tnmc5+nZs6n0YYjmCO4I9YPKJuxNUR77VH6vrq8nVLdet1b+h+0qPrBehl6a3Qa9R7oI/r2+pH60/T36h/Rr9vpNZIz5HckaUj94+8a4Aa2BrEGMw02GrQZjBgaGQYZCgyXGd42rDPSMfI1yjTaJXRcaNeY5qxt7HAeJXxCePndG06k55NX0tvpfebGJgEm0hMtpi0m3w2tTKNNy0yrTd9YEYxY5ilma0yazHrNzc2DzefZV5rfteCbMGwyLBYY3HO4r2llWWi5ULLRsseK10rtlWhVa3VfWuqtY/1VOtq6+s2RBuGTZbNBpsrtqiti22GbaXtZTvUztVOYLfBrmMUYZT7KOGo6lG37FXsmfYF9rX2XQ46DmEORQ6NDi9Hm49OHr1i9LnR3xxdHLMdtzneG6M5JmRM0ZjmMa+dbJ24TpVO18dSxwaOnTu2aewrZztnvvNG59suNJdwl4UuLS5fXd1cxa51rr1u5m4pblVutxhajCjGEsZ5d4K7n/tc96PuHz1cPfI99nv85WnvmeW5y7NnnNU4/rht4x57mXpxvLZ4dXrTvVO8N3t3+pj4cHyqfR75mvnyfLf7PmPaMDOZu5kv/Rz9xH6H/N6zPFizWSf9Mf8g/1L/9gDNgPiA9QEPA00D0wNrA/uDXIJmBp0MJgSHBq8IvsU2ZHPZNez+ELeQ2SGtoSqhsaHrQx+F2YaJw5rD0fCQ8JXh9yMsIoQRjZEgkh25MvJBlFXU1Kgj0cToqOjK6KcxY2JmxZyLpcVOid0V+y7OL25Z3L1463hJfEuCWsLEhJqE94n+ieWJneNHj589/lKSfpIgqSmZlJyQvD15YELAhNUTuie6TCyZeHOS1aTpky5M1p+cPfnYFLUpnCkHUggpiSm7Ur5wIjnVnIFUdmpVaj+XxV3DfcHz5a3i9fK9+OX8Z2leaeVpPele6SvTezN8Mioy+gQswXrBq8zgzE2Z77Mis3ZkDWYnZtfnKOWk5BwWagqzhK25RrnTcztEdqISUedUj6mrp/aLQ8Xb85C8SXlN+VrwR75NYi35RdJV4F1QWfBhWsK0A9M1pgunt82wnbF4xrPCwMLfZuIzuTNbZpnMmj+razZz9pY5yJzUOS1zzeYWz+2eFzRv53zK/Kz5vxc5FpUXvV2QuKC52LB4XvHjX4J+qS1RLRGX3FrouXDTInyRYFH74rGL1y3+VsorvVjmWFZR9mUJd8nFX8f8uvbXwaVpS9uXuS7buJy4XLj85gqfFTvLNcoLyx+vDF/ZsIq+qnTV29VTVl+ocK7YtIayRrKmc23Y2qZ15uuWr/uyPmP9jUq/yvoqg6rFVe838DZc3ei7sW6T4aayTZ82Czbf3hK0paHasrpiK3Frwdan2xK2nfuN8VvNdv3tZdu/7hDu6NwZs7O1xq2mZpfBrmW1aK2ktnf3xN1X9vjvaaqzr9tSr1Nfthfslex9vi9l3839oftbDjAO1B20OFh1iHaotAFpmNHQ35jR2NmU1NRxOORwS7Nn86EjDkd2HDU5WnlM+9iy45TjxccHTxSeGDgpOtl3Kv3U45YpLfdOjz99vTW6tf1M6JnzZwPPnj7HPHfivNf5oxc8Lhy+yLjYeMn1UkObS9uh311+P9Tu2t5w2e1y0xX3K80d4zqOX/W5euqa/7Wz19nXL92IuNFxM/7m7VsTb3Xe5t3uuZN959Xdgruf7827T7hf+kD9QcVDg4fVf9j8Ud/p2nmsy7+r7VHso3uPuY9fPMl78qW7+Cn1acUz42c1PU49R3sDe688n/C8+4Xoxee+kj81/qx6af3y4F++f7X1j+/vfiV+Nfh6yRu9NzveOr9tGYgaePgu593n96Uf9D7s/Mj4eO5T4qdnn6d9IX1Z+9Xma/O30G/3B3MGB0UcMUf2K4DBhqalAfB6BwDUJABocH9GmSDf/8kMke9ZZQj8JyzfI8rMFYA6+P8e3Qf/bm4BsHcb3H5BfbWJAERRAYhzB+jYscNtaK8m21dKjQj3AZujv6bmpIJ/Y/I95w95/3wGUlVn8PP5XwFtfFZdDkCYAAAAlmVYSWZNTQAqAAAACAAFARIAAwAAAAEAAQAAARoABQAAAAEAAABKARsABQAAAAEAAABSASgAAwAAAAEAAgAAh2kABAAAAAEAAABaAAAAAAAAAJAAAAABAAAAkAAAAAEAA5KGAAcAAAASAAAAhKACAAQAAAABAAAAIqADAAQAAAABAAAAIQAAAABBU0NJSQAAAFNjcmVlbnNob3Qpdkf5AAAACXBIWXMAABYlAAAWJQFJUiTwAAAC12lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNi4wLjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+MTk0PC9leGlmOlBpeGVsWERpbWVuc2lvbj4KICAgICAgICAgPGV4aWY6VXNlckNvbW1lbnQ+U2NyZWVuc2hvdDwvZXhpZjpVc2VyQ29tbWVudD4KICAgICAgICAgPGV4aWY6UGl4ZWxZRGltZW5zaW9uPjE4NjwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgICAgIDx0aWZmOlJlc29sdXRpb25Vbml0PjI8L3RpZmY6UmVzb2x1dGlvblVuaXQ+CiAgICAgICAgIDx0aWZmOllSZXNvbHV0aW9uPjE0NDwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgICAgPHRpZmY6WFJlc29sdXRpb24+MTQ0PC90aWZmOlhSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4Kmj5GzQAAACtJREFUWAnt0DEBAAAAwqD1T20ND4hAYcCAAQMGDBgwYMCAAQMGDBgwcDEwEakAAc3C1KAAAAAASUVORK5CYII=',
-                              height: 33,
-                              width: 33,
-                              excavate: true
-                            }}
-                            className="relay-mx-auto relay-w-[105px] relay-h-[105px]"
-                          />
-                        </Flex>
+                          <div style={{ position: 'relative' }}>
+                            <img
+                              alt={fromToken?.name}
+                              src={fromToken?.logoURI}
+                              width={33}
+                              height={33}
+                              style={{
+                                borderRadius: '50%',
+                                border: '1.5px solid white',
+                                backgroundColor: 'white',
+                                display: 'block'
+                              }}
+                            />
+                            <ChainIcon
+                              chainId={fromChain?.id}
+                              height={14}
+                              width={14}
+                              className="relay-absolute relay-bottom-0 relay-right-0 relay-border relay-border-solid relay-border-white"
+                              borderRadius={4}
+                            />
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </PopoverContent>
diff --git a/packages/ui/src/components/primitives/Pill.tsx b/packages/ui/src/components/primitives/Pill.tsx
index 58014b6eb..97e0b680d 100644
--- a/packages/ui/src/components/primitives/Pill.tsx
+++ b/packages/ui/src/components/primitives/Pill.tsx
@@ -3,10 +3,11 @@ import type { FC, HTMLAttributes } from 'react'
 import { cn } from '../../utils/cn.js'
 
 export const pillVariants = cva(
-  'relay-flex relay-bg-[var(--relay-colors-subtle-background-color)] relay-px-3 relay-py-1 relay-gap-1 relay-transition-colors relay-duration-150',
+  'relay-flex relay-px-3 relay-py-1 relay-gap-1 relay-transition-colors relay-duration-150',
   {
     variants: {
       color: {
+        default: 'relay-bg-[var(--relay-colors-subtle-background-color)]',
         red: 'relay-bg-[var(--relay-colors-red3)] relay-text-[color:var(--relay-colors-red11)]',
         gray: 'relay-bg-[var(--relay-colors-gray2)] relay-text-[color:var(--relay-colors-gray8)]',
         green: 'relay-bg-[var(--relay-colors-green3)] relay-text-[color:var(--relay-colors-green12)]',
@@ -24,6 +25,7 @@ export const pillVariants = cva(
       }
     },
     defaultVariants: {
+      color: 'default',
       radius: 'pill'
     }
   }
diff --git a/packages/ui/src/components/primitives/Text.tsx b/packages/ui/src/components/primitives/Text.tsx
index 948bc5d11..71ad8f3fd 100644
--- a/packages/ui/src/components/primitives/Text.tsx
+++ b/packages/ui/src/components/primitives/Text.tsx
@@ -32,7 +32,11 @@ const textVariants = cva(
         blue: 'relay-text-[color:var(--relay-colors-blue12)]',
         success: 'relay-text-[color:var(--relay-colors-text-success)]',
         warning: 'relay-text-[color:var(--relay-colors-amber12)]',
-        warningSecondary: 'relay-text-[color:var(--relay-colors-amber11)]'
+        warningSecondary: 'relay-text-[color:var(--relay-colors-amber11)]',
+        primary: 'relay-text-[color:var(--relay-colors-primary11)]',
+        primary12: 'relay-text-[color:var(--relay-colors-primary12)]',
+        green: 'relay-text-[color:var(--relay-colors-green11)]',
+        slate: 'relay-text-[color:var(--relay-colors-slate10)]'
       },
       italic: {
         true: 'relay-italic'
diff --git a/packages/ui/src/components/widgets/SwapWidget/GasTopUpSection.tsx b/packages/ui/src/components/widgets/SwapWidget/GasTopUpSection.tsx
index 6726c4b42..35d9e4b78 100644
--- a/packages/ui/src/components/widgets/SwapWidget/GasTopUpSection.tsx
+++ b/packages/ui/src/components/widgets/SwapWidget/GasTopUpSection.tsx
@@ -39,7 +39,7 @@ const GasTopUpSection: FC<Props> = ({
   return (
     <Pill
       color="primary"
-      className="relay-flex relay-items-center relay-cursor-pointer"
+      className="relay-flex relay-items-center relay-cursor-pointer relay-self-start"
       onClick={() => {
         onGasTopUpEnabled(!gasTopUpEnabled)
       }}
@@ -48,7 +48,8 @@ const GasTopUpSection: FC<Props> = ({
         <>
           <Text
             style="subtitle2"
-            className="relay-text-[color:var(--relay-colors-primary12)] relay-mr-2"
+            className="relay-mr-2"
+            color="primary12"
           >
             +
             {gasTopUpAmount
@@ -62,7 +63,7 @@ const GasTopUpSection: FC<Props> = ({
             size="sm"
             chainRadius={2}
           />
-          <Text style="subtitle2" ellipsify>
+          <Text style="subtitle2" color="primary12" ellipsify>
             {toChain?.currency?.symbol}
           </Text>
           <FontAwesomeIcon icon={faClose} />
@@ -71,7 +72,8 @@ const GasTopUpSection: FC<Props> = ({
         <>
           <Text
             style="subtitle2"
-            className="relay-text-[color:var(--relay-colors-primary12)] relay-mr-[6px]"
+            className="relay-mr-[6px]"
+            color="primary12"
           >
             Add Gas (Balance:{' '}
             {gasTopUpBalance
diff --git a/packages/ui/src/components/widgets/WidgetErrorWell.tsx b/packages/ui/src/components/widgets/WidgetErrorWell.tsx
index 469ebf968..e650562ae 100644
--- a/packages/ui/src/components/widgets/WidgetErrorWell.tsx
+++ b/packages/ui/src/components/widgets/WidgetErrorWell.tsx
@@ -114,7 +114,7 @@ export const WidgetErrorWell: FC<Props> = ({
         <Box className="relay-text-[color:var(--relay-colors-amber9)]">
           <FontAwesomeIcon icon={faExclamationCircle} width={16} />
         </Box>
-        <Text style="subtitle3" className="relay-text-[color:var(--relay-colors-amber12)]">
+        <Text style="subtitle3" color="warning">
           Your selected wallet doesn't support the destination chain. Please
           choose a different wallet.
         </Text>
@@ -135,7 +135,7 @@ export const WidgetErrorWell: FC<Props> = ({
         <Box className="relay-text-[color:var(--relay-colors-red10)]">
           <FontAwesomeIcon icon={faExclamationCircle} width={16} />
         </Box>
-        <Text style="subtitle3" className="relay-text-[color:var(--relay-colors-red12)]">
+        <Text style="subtitle3" color="error">
           {fetchQuoteErrorMessage}
         </Text>
       </Flex>
@@ -171,7 +171,7 @@ export const WidgetErrorWell: FC<Props> = ({
           <Box className="relay-text-[color:var(--relay-colors-amber10)]">
             <FontAwesomeIcon icon={faExclamationCircle} width={16} />
           </Box>
-          <Text style="subtitle3" className="relay-text-[color:var(--relay-colors-amber12)]">
+          <Text style="subtitle3" color="warning">
             Fees exceed 40% of the received amount.
           </Text>
         </Flex>
@@ -192,7 +192,7 @@ export const WidgetErrorWell: FC<Props> = ({
         <Box className="relay-text-[color:var(--relay-colors-amber10)]">
           <FontAwesomeIcon icon={faExclamationCircle} width={16} />
         </Box>
-        <Text style="subtitle3" className="relay-text-[color:var(--relay-colors-amber12)]">
+        <Text style="subtitle3" color="warning">
           The price impact is currently high (
           {quote?.details?.totalImpact?.percent}%).
         </Text>
@@ -213,7 +213,7 @@ export const WidgetErrorWell: FC<Props> = ({
         <Box className="relay-text-[color:var(--relay-colors-amber10)]">
           <FontAwesomeIcon icon={faExclamationCircle} width={16} />
         </Box>
-        <Text style="subtitle3" className="relay-text-[color:var(--relay-colors-amber12)]">
+        <Text style="subtitle3" color="warning">
           Unable to detect token price. Please confirm expected output before
           submitting.
         </Text>
@@ -234,7 +234,7 @@ export const WidgetErrorWell: FC<Props> = ({
         <Box className="relay-text-[color:var(--relay-colors-amber10)]">
           <FontAwesomeIcon icon={faExclamationCircle} width={16} />
         </Box>
-        <Text style="subtitle3" className="relay-text-[color:var(--relay-colors-amber12)]">
+        <Text style="subtitle3" color="warning">
           Due to high demand, Relayer fees have temporarily been increased.
         </Text>
       </Flex>

From 6ca823e5f361fff55dbdd1b99f4a86cf73415d05 Mon Sep 17 00:00:00 2001
From: Ted Palmer <etpalmer17@gmail.com>
Date: Tue, 3 Mar 2026 12:19:54 -0500
Subject: [PATCH 11/25] Remove TokenWidget

---
 demo/pages/index.tsx                          |    1 -
 demo/pages/ui/token/[[...params]].tsx         |  604 -------
 demo/tsconfig.json                            |    3 -
 packages/ui/package.json                      |    5 -
 .../common/SlippageToleranceConfig.tsx        |   76 +-
 .../widgets/TokenWidget/AmountModeToggle.tsx  |   50 -
 .../TokenWidget/AmountSectionHeader.tsx       |   35 -
 .../widgets/TokenWidget/BuyTabContent.tsx     |  606 -------
 .../TokenWidget/DestinationWalletSelector.tsx |   62 -
 .../widgets/TokenWidget/FeeBreakdownInfo.tsx  |  107 --
 .../TokenWidget/FeeBreakdownTooltip.tsx       |  160 --
 .../widgets/TokenWidget/SectionContainer.tsx  |   42 -
 .../widgets/TokenWidget/SellTabContent.tsx    |  717 --------
 .../TokenWidget/TransactionDetailsFooter.tsx  |   86 -
 .../TokenWidget/hooks/useWalletGuards.ts      |  190 --
 .../components/widgets/TokenWidget/index.ts   |    2 -
 .../widget/TokenWidgetRenderer.tsx            | 1244 -------------
 .../widgets/TokenWidget/widget/index.tsx      | 1576 -----------------
 18 files changed, 24 insertions(+), 5542 deletions(-)
 delete mode 100644 demo/pages/ui/token/[[...params]].tsx
 delete mode 100644 packages/ui/src/components/widgets/TokenWidget/AmountModeToggle.tsx
 delete mode 100644 packages/ui/src/components/widgets/TokenWidget/AmountSectionHeader.tsx
 delete mode 100644 packages/ui/src/components/widgets/TokenWidget/BuyTabContent.tsx
 delete mode 100644 packages/ui/src/components/widgets/TokenWidget/DestinationWalletSelector.tsx
 delete mode 100644 packages/ui/src/components/widgets/TokenWidget/FeeBreakdownInfo.tsx
 delete mode 100644 packages/ui/src/components/widgets/TokenWidget/FeeBreakdownTooltip.tsx
 delete mode 100644 packages/ui/src/components/widgets/TokenWidget/SectionContainer.tsx
 delete mode 100644 packages/ui/src/components/widgets/TokenWidget/SellTabContent.tsx
 delete mode 100644 packages/ui/src/components/widgets/TokenWidget/TransactionDetailsFooter.tsx
 delete mode 100644 packages/ui/src/components/widgets/TokenWidget/hooks/useWalletGuards.ts
 delete mode 100644 packages/ui/src/components/widgets/TokenWidget/index.ts
 delete mode 100644 packages/ui/src/components/widgets/TokenWidget/widget/TokenWidgetRenderer.tsx
 delete mode 100644 packages/ui/src/components/widgets/TokenWidget/widget/index.tsx

diff --git a/demo/pages/index.tsx b/demo/pages/index.tsx
index f6e50650e..ccb6e7068 100644
--- a/demo/pages/index.tsx
+++ b/demo/pages/index.tsx
@@ -21,7 +21,6 @@ const Index: NextPage = () => {
         </h2>
         <nav style={{ display: 'flex', gap: 15 }}>
           <Link href="/ui/swap">SwapWidget</Link>
-          <Link href="/ui/token">TokenWidget</Link>
           <Link href="/ui/chain">ChainWidget</Link>
           <Link href="/ui/onramp">OnrampWidget</Link>
           <Link href="/ui/depositAddresses">Deposit Addresses</Link>
diff --git a/demo/pages/ui/token/[[...params]].tsx b/demo/pages/ui/token/[[...params]].tsx
deleted file mode 100644
index 94d96f11c..000000000
--- a/demo/pages/ui/token/[[...params]].tsx
+++ /dev/null
@@ -1,604 +0,0 @@
-import type { NextPage, GetServerSideProps } from 'next'
-import { TokenWidget } from '@relayprotocol/relay-kit-ui/TokenWidget'
-import { useRelayClient } from '@relayprotocol/relay-kit-ui'
-import { Layout } from 'components/Layout'
-import { useTheme } from 'next-themes'
-import { useRouter } from 'next/router'
-import {
-  useDynamicContext,
-  useDynamicEvents,
-  useDynamicModals,
-  useSwitchWallet,
-  useUserWallets,
-  type Wallet
-} from '@dynamic-labs/sdk-react-core'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { isEthereumWallet } from '@dynamic-labs/ethereum'
-import { isSolanaWallet } from '@dynamic-labs/solana'
-import { adaptSolanaWallet } from '@relayprotocol/relay-svm-wallet-adapter'
-import {
-  adaptViemWallet,
-  ASSETS_RELAY_API,
-  type AdaptedWallet,
-  type ChainVM
-} from '@relayprotocol/relay-sdk'
-import type { RelayChain } from '@relayprotocol/relay-sdk'
-import { useWalletFilter } from 'context/walletFilter'
-import { adaptBitcoinWallet } from '@relayprotocol/relay-bitcoin-wallet-adapter'
-import { isBitcoinWallet } from '@dynamic-labs/bitcoin'
-import { convertToLinkedWallet } from 'utils/dynamic'
-import { isEclipseWallet } from '@dynamic-labs/eclipse'
-import type { LinkedWallet, Token } from '@relayprotocol/relay-kit-ui'
-import { isSuiWallet, type SuiWallet } from '@dynamic-labs/sui'
-import { adaptSuiWallet } from '@relayprotocol/relay-sui-wallet-adapter'
-import { useTokenList } from '@relayprotocol/relay-kit-hooks'
-import Head from 'next/head'
-
-const WALLET_VM_TYPES: Exclude<ChainVM, 'hypevm'>[] = [
-  'evm',
-  'bvm',
-  'svm',
-  'suivm',
-  'tvm'
-]
-
-const TokenWidgetPage: NextPage = () => {
-  const router = useRouter()
-  const relayClient = useRelayClient()
-  useDynamicEvents('walletAdded', (newWallet) => {
-    if (linkWalletPromise) {
-      linkWalletPromise?.resolve(convertToLinkedWallet(newWallet))
-      setLinkWalletPromise(undefined)
-    }
-  })
-
-  const [fromToken, setFromToken] = useState<Token | undefined>()
-  const [toToken, setToToken] = useState<Token | undefined>()
-
-  const [hasInitialized, setHasInitialized] = useState(false)
-
-  const { setWalletFilter } = useWalletFilter()
-  const { setShowAuthFlow, primaryWallet, sdkHasLoaded } = useDynamicContext()
-  const { theme } = useTheme()
-  const [singleChainMode, setSingleChainMode] = useState(false)
-  const [supportedWalletVMs, setSupportedWalletVMs] = useState<
-    Exclude<ChainVM, 'hypevm'>[]
-  >([...WALLET_VM_TYPES])
-  const _switchWallet = useSwitchWallet()
-  const { setShowLinkNewWalletModal } = useDynamicModals()
-  const userWallets = useUserWallets()
-  const wallets = useRef<Wallet<any>[]>([])
-  const switchWallet =
-    useRef<(walletId: string) => Promise<void> | undefined>(undefined)
-  const [wallet, setWallet] = useState<AdaptedWallet | undefined>()
-  const [linkWalletPromise, setLinkWalletPromise] = useState<
-    | {
-        resolve: (value: LinkedWallet) => void
-        reject: () => void
-        params: { chain?: RelayChain; direction: 'to' | 'from' }
-      }
-    | undefined
-  >()
-  const walletsLoading = !sdkHasLoaded
-
-  // Parse URL params for token
-  const [urlTokenAddress, setUrlTokenAddress] = useState<string | undefined>()
-  const [urlTokenChainId, setUrlTokenChainId] = useState<number | undefined>()
-
-  const [tokenNotFound, setTokenNotFound] = useState(false)
-  const [activeTab, setActiveTab] = useState<'buy' | 'sell'>('buy')
-
-  const queryEnabled = !!(urlTokenAddress && urlTokenChainId && relayClient)
-
-  const isChainSupported = relayClient?.chains?.some(
-    (chain) => chain.id === urlTokenChainId
-  )
-
-  const { data: tokenListFromUrl } = useTokenList(
-    relayClient?.baseApiUrl,
-    urlTokenAddress && urlTokenChainId && isChainSupported
-      ? {
-          chainIds: [urlTokenChainId],
-          address: urlTokenAddress,
-          limit: 1,
-          referrer: relayClient?.source
-        }
-      : undefined,
-    {
-      enabled: queryEnabled && isChainSupported,
-      retry: 1,
-      retryDelay: 1000,
-      staleTime: 0
-    }
-  )
-
-  const { data: externalTokenListFromUrl } = useTokenList(
-    relayClient?.baseApiUrl,
-    urlTokenAddress && urlTokenChainId && isChainSupported
-      ? {
-          chainIds: [urlTokenChainId],
-          address: urlTokenAddress,
-          limit: 1,
-          useExternalSearch: true,
-          referrer: relayClient?.source
-        }
-      : undefined,
-    {
-      enabled: queryEnabled && isChainSupported,
-      retry: 1,
-      retryDelay: 1000,
-      staleTime: 0
-    }
-  )
-
-  // Resolve URL params to Token object
-  const urlToken = useMemo(() => {
-    const apiToken = tokenListFromUrl?.[0] || externalTokenListFromUrl?.[0]
-
-    if (!apiToken && urlTokenAddress && urlTokenChainId) {
-      const isTargetUSDC =
-        urlTokenAddress.toLowerCase() ===
-          '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913'.toLowerCase() &&
-        urlTokenChainId === 8453
-
-      if (isTargetUSDC) {
-        return {
-          chainId: 8453,
-          address: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913',
-          name: 'USD Coin',
-          symbol: 'USDC',
-          decimals: 6,
-          logoURI: `${ASSETS_RELAY_API}/icons/currencies/usdc.png`,
-          verified: true
-        } as Token
-      }
-
-      return undefined
-    }
-
-    if (!apiToken) {
-      return undefined
-    }
-
-    return {
-      chainId: apiToken.chainId!,
-      address: apiToken.address!,
-      name: apiToken.name!,
-      symbol: apiToken.symbol!,
-      decimals: apiToken.decimals!,
-      logoURI: apiToken.metadata?.logoURI ?? '',
-      verified: apiToken.metadata?.verified ?? false
-    } as Token
-  }, [
-    tokenListFromUrl,
-    externalTokenListFromUrl,
-    urlTokenAddress,
-    urlTokenChainId
-  ])
-
-  const linkedWallets = useMemo(() => {
-    const _wallets = userWallets.reduce((linkedWallets, wallet) => {
-      linkedWallets.push(convertToLinkedWallet(wallet))
-      return linkedWallets
-    }, [] as LinkedWallet[])
-    wallets.current = userWallets
-    return _wallets
-  }, [userWallets])
-
-  useEffect(() => {
-    if (!router.isReady) {
-      return
-    }
-
-    const params = router.query.params
-    const [addressParam, chainParam] = Array.isArray(params) ? params : []
-
-    if (!addressParam || !chainParam) {
-      setUrlTokenAddress(undefined)
-      setUrlTokenChainId(undefined)
-      return
-    }
-
-    const rawAddress = Array.isArray(addressParam)
-      ? addressParam[0]
-      : addressParam
-    const rawChain = Array.isArray(chainParam) ? chainParam[0] : chainParam
-
-    const decodedAddress = decodeURIComponent(rawAddress)
-    const chainId = Number(rawChain)
-
-    if (!Number.isNaN(chainId)) {
-      setUrlTokenAddress(decodedAddress)
-      setUrlTokenChainId(chainId)
-      setTokenNotFound(false)
-    }
-  }, [router.isReady, router.query.params])
-
-  const updateDemoUrlWithRawParams = useCallback(
-    (address: string, chainId: number) => {
-      if (!router.isReady) {
-        return
-      }
-
-      const encodedAddress = encodeURIComponent(address)
-      const chainParam = chainId.toString()
-      const nextPath = `/ui/token/${encodedAddress}/${chainParam}`
-
-      router.replace(
-        {
-          pathname: '/ui/token/[[...params]]',
-          query: { params: [address, chainParam] }
-        },
-        nextPath,
-        { shallow: true }
-      )
-    },
-    [router]
-  )
-
-  const handleAnalyticEvent = useCallback((eventName: string, data?: any) => {
-    console.log('Analytic Event', eventName, data)
-  }, [])
-
-  useEffect(() => {
-    switchWallet.current = _switchWallet
-  }, [_switchWallet])
-
-  useEffect(() => {
-    if (!hasInitialized && router.isReady && relayClient) {
-      const params = router.query.params
-      const hasParams = Array.isArray(params) && params.length >= 2
-
-      if (!hasParams) {
-        const targetAddress = '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913'
-        const targetChainId = 8453
-
-        setUrlTokenAddress(targetAddress)
-        setUrlTokenChainId(targetChainId)
-        updateDemoUrlWithRawParams(targetAddress, targetChainId)
-      }
-
-      setHasInitialized(true)
-    }
-  }, [
-    hasInitialized,
-    router.isReady,
-    relayClient,
-    router.query.params,
-    updateDemoUrlWithRawParams
-  ])
-
-  useEffect(() => {
-    if (urlTokenAddress && urlTokenChainId && !urlToken && relayClient) {
-      const timer = setTimeout(() => {
-        if (!urlToken) {
-          setTokenNotFound(true)
-        }
-      }, 2000)
-
-      return () => clearTimeout(timer)
-    } else if (urlToken) {
-      setTokenNotFound(false)
-    }
-  }, [urlTokenAddress, urlTokenChainId, urlToken, relayClient])
-
-  useEffect(() => {
-    const adaptWallet = async () => {
-      try {
-        if (primaryWallet !== null) {
-          let adaptedWallet: AdaptedWallet | undefined
-          if (isEthereumWallet(primaryWallet)) {
-            const walletClient = await primaryWallet.getWalletClient()
-            adaptedWallet = adaptViemWallet(walletClient)
-          } else if (isBitcoinWallet(primaryWallet)) {
-            const wallet = convertToLinkedWallet(primaryWallet)
-            const publicKey = primaryWallet.additionalAddresses.find(
-              ({ address, type }) =>
-                address === wallet.address && type === 'payment'
-            )?.publicKey
-            adaptedWallet = adaptBitcoinWallet(
-              wallet.address,
-              async (_address, _psbt, dynamicParams) => {
-                try {
-                  // Request the wallet to sign the PSBT
-                  const response = await primaryWallet.signPsbt(dynamicParams)
-
-                  if (!response) {
-                    throw 'Missing psbt response'
-                  }
-                  return response.signedPsbt
-                } catch (e) {
-                  throw e
-                }
-              },
-              publicKey
-            )
-          } else if (
-            isSolanaWallet(primaryWallet) ||
-            isEclipseWallet(primaryWallet)
-          ) {
-            const connection = await (primaryWallet as any).getConnection()
-            const signer = await (primaryWallet as any).getSigner()
-            const _chainId = isEclipseWallet(primaryWallet)
-              ? 9286185
-              : 792703809
-            adaptedWallet = adaptSolanaWallet(
-              primaryWallet.address,
-              _chainId,
-              connection,
-              signer.signAndSendTransaction
-            )
-          } else if (isSuiWallet(primaryWallet)) {
-            const suiWallet = primaryWallet as SuiWallet
-            const walletClient = await suiWallet.getWalletClient()
-
-            if (!walletClient) {
-              throw 'Unable to setup Sui wallet'
-            }
-
-            adaptedWallet = adaptSuiWallet(
-              suiWallet.address,
-              103665049, // @TODO: handle sui testnet
-              walletClient as any,
-              async (tx) => {
-                const signedTransaction = await suiWallet.signTransaction(tx)
-
-                const executionResult =
-                  await walletClient.executeTransactionBlock({
-                    options: {},
-                    signature: signedTransaction.signature,
-                    transactionBlock: signedTransaction.bytes
-                  })
-
-                return executionResult
-              }
-            )
-          }
-
-          setWallet(adaptedWallet)
-        } else {
-          setWallet(undefined)
-        }
-      } catch (e) {
-        setWallet(undefined)
-      }
-    }
-    adaptWallet()
-  }, [primaryWallet, primaryWallet?.address])
-
-  return (
-    <Layout
-      styles={{
-        background: theme === 'light' ? 'white' : '#111113'
-      }}
-    >
-      <Head>
-        <title>Token Widget</title>
-        <meta name="description" content="Token Widget" />
-      </Head>
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
-          paddingTop: 50,
-          paddingInline: '10px',
-          gap: 20
-        }}
-      >
-        <div
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            gap: 20
-          }}
-        >
-          <div
-            style={{
-              display: 'flex',
-              gap: 12,
-              padding: '12px 16px',
-              background:
-                theme === 'light'
-                  ? 'rgba(255, 255, 255, 0.8)'
-                  : 'rgba(28, 23, 43, 0.8)',
-              borderRadius: 16,
-              border: `1px solid ${
-                theme === 'light'
-                  ? 'rgba(148, 163, 184, 0.2)'
-                  : 'rgba(148, 163, 184, 0.1)'
-              }`
-            }}
-          >
-            <button
-              onClick={() => setActiveTab('buy')}
-              style={{
-                padding: '10px 20px',
-                borderRadius: 12,
-                border: 'none',
-                background: activeTab === 'buy' ? '#4f46e5' : '#94a3b8',
-                color: 'white',
-                fontWeight: 600,
-                cursor: 'pointer',
-                transition: 'all 0.2s',
-                opacity: activeTab === 'buy' ? 1 : 0.6
-              }}
-            >
-              Open Buy Tab
-            </button>
-            <button
-              onClick={() => setActiveTab('sell')}
-              style={{
-                padding: '10px 20px',
-                borderRadius: 12,
-                border: 'none',
-                background: activeTab === 'sell' ? '#4f46e5' : '#94a3b8',
-                color: 'white',
-                fontWeight: 600,
-                cursor: 'pointer',
-                transition: 'all 0.2s',
-                opacity: activeTab === 'sell' ? 1 : 0.6
-              }}
-            >
-              Open Sell Tab
-            </button>
-          </div>
-          <TokenWidget
-            key={`swap-widget-${singleChainMode ? 'single' : 'multi'}-chain`}
-            lockChainId={singleChainMode ? 8453 : undefined}
-            singleChainMode={singleChainMode}
-            supportedWalletVMs={supportedWalletVMs}
-            toToken={urlToken || toToken}
-            setToToken={setToToken}
-            fromToken={fromToken}
-            setFromToken={setFromToken}
-            lockToToken={!!urlToken}
-            activeTab={activeTab}
-            setActiveTab={setActiveTab}
-            wallet={wallet}
-            multiWalletSupportEnabled={true}
-            linkedWallets={linkedWallets}
-            walletsLoading={walletsLoading}
-            onLinkNewWallet={({ chain, direction }) => {
-              if (linkWalletPromise) {
-                linkWalletPromise.reject()
-                setLinkWalletPromise(undefined)
-              }
-              if (chain?.vmType === 'evm') {
-                setWalletFilter('EVM')
-              } else if (chain?.id === 792703809) {
-                setWalletFilter('SOL')
-              } else if (chain?.id === 8253038) {
-                setWalletFilter('BTC')
-              } else if (chain?.id === 9286185) {
-                setWalletFilter('ECLIPSE')
-              } else if (chain?.vmType === 'suivm') {
-                setWalletFilter('SUI')
-              } else if (chain?.vmType === 'tvm') {
-                setWalletFilter('TRON')
-              } else {
-                setWalletFilter(undefined)
-              }
-              const promise = new Promise<LinkedWallet>((resolve, reject) => {
-                setLinkWalletPromise({
-                  resolve,
-                  reject,
-                  params: {
-                    chain,
-                    direction
-                  }
-                })
-              })
-              setShowLinkNewWalletModal(true)
-              return promise
-            }}
-            onSetPrimaryWallet={async (address: string) => {
-              //In some cases there's a race condition between connecting the wallet and having it available to switch to so we need to poll for it
-              const maxAttempts = 20
-              let attemptCount = 0
-              const timer = setInterval(async () => {
-                attemptCount++
-                const newPrimaryWallet = wallets.current?.find(
-                  (wallet) =>
-                    wallet.address === address ||
-                    wallet.additionalAddresses.find(
-                      (_address) => _address.address === address
-                    )
-                )
-                if (attemptCount >= maxAttempts) {
-                  clearInterval(timer)
-                  return
-                }
-                if (!newPrimaryWallet || !switchWallet.current) {
-                  return
-                }
-                try {
-                  await switchWallet.current(newPrimaryWallet?.id)
-                  clearInterval(timer)
-                } catch (e) {}
-              }, 200)
-            }}
-            onConnectWallet={() => {
-              setShowAuthFlow(true)
-            }}
-            onAnalyticEvent={handleAnalyticEvent}
-            onFromTokenChange={(token) => {
-              setFromToken(token)
-              if (token) {
-                setTokenNotFound(false)
-              }
-            }}
-            onToTokenChange={(token) => {
-              setToToken(token)
-              if (token) {
-                setTokenNotFound(false)
-              }
-            }}
-            onSwapError={(e, data) => {
-              console.log('onSwapError Triggered', e, data)
-            }}
-            onSwapSuccess={(data) => {
-              console.log('onSwapSuccess Triggered', data)
-            }}
-            onUnverifiedTokenDecline={(
-              token: Token,
-              context: 'from' | 'to'
-            ) => {
-              console.log('User declined unverified token:', {
-                symbol: token.symbol,
-                address: token.address,
-                chainId: token.chainId,
-                context: context
-              })
-              // Redirect to swap page
-              router.push('/ui/swap')
-            }}
-            slippageTolerance={undefined}
-            onOpenSlippageConfig={() => {
-              // setSlippageToleranceConfigOpen(true)
-            }}
-          />
-          {tokenNotFound ? (
-            <div
-              style={{
-                display: 'flex',
-                flexDirection: 'column',
-                gap: 8,
-                width: '100%',
-                maxWidth: 400
-              }}
-            >
-              <p
-                style={{
-                  margin: 0,
-                  padding: '8px 12px',
-                  borderRadius: 12,
-                  background: 'rgba(255, 231, 231, 0.6)',
-                  color: '#9f1239',
-                  fontSize: 14,
-                  textAlign: 'center'
-                }}
-              >
-                {!isChainSupported && urlTokenChainId
-                  ? `Chain ${urlTokenChainId} is not supported by Relay. Please select a token from a supported chain.`
-                  : 'Token from URL was not found on the specified chain. Please select a token manually to continue.'}
-              </p>
-            </div>
-          ) : null}
-        </div>
-      </div>
-    </Layout>
-  )
-}
-
-export const getServerSideProps: GetServerSideProps = async () => {
-  return {
-    props: {
-      ssr: true
-    }
-  }
-}
-
-export default TokenWidgetPage
diff --git a/demo/tsconfig.json b/demo/tsconfig.json
index 259fff311..8698d42ea 100644
--- a/demo/tsconfig.json
+++ b/demo/tsconfig.json
@@ -35,9 +35,6 @@
   "paths": {
       "@relayprotocol/relay-kit-ui/OnrampWidget": [
         "./node_modules/@relayprotocol/relay-kit-ui/_esm/src/components/widgets/OnrampWidget/index.js"
-      ],
-      "@relayprotocol/relay-kit-ui/TokenWidget": [
-        "./node_modules/@relayprotocol/relay-kit-ui/_esm/src/components/widgets/TokenWidget/index.js"
       ]
     }
 }
\ No newline at end of file
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 63636e52b..7d08633e7 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -19,11 +19,6 @@
       "import": "./_esm/src/components/widgets/OnrampWidget/index.js",
       "require": "./_cjs/src/components/widgets/OnrampWidget/index.js"
     },
-    "./TokenWidget": {
-      "types": "./_types/src/components/widgets/TokenWidget/index.d.ts",
-      "import": "./_esm/src/components/widgets/TokenWidget/index.js",
-      "require": "./_cjs/src/components/widgets/TokenWidget/index.js"
-    },
     ".": {
       "types": "./_types/src/index.d.ts",
       "import": "./_esm/src/index.js",
diff --git a/packages/ui/src/components/common/SlippageToleranceConfig.tsx b/packages/ui/src/components/common/SlippageToleranceConfig.tsx
index 8f48144c7..fe2c3a94a 100644
--- a/packages/ui/src/components/common/SlippageToleranceConfig.tsx
+++ b/packages/ui/src/components/common/SlippageToleranceConfig.tsx
@@ -45,7 +45,6 @@ type SlippageToleranceConfigProps = {
   onOpenSlippageConfig?: () => void
   showGearIcon?: boolean
   showLabel?: boolean
-  widgetType?: 'token' | 'swap'
 }
 
 type SlippageTabsProps = {
@@ -59,7 +58,6 @@ type SlippageTabsProps = {
   slippageRating: string | undefined
   slippageRatingColor: string | undefined
   inputRef: React.RefObject<HTMLInputElement | null>
-  widgetType?: 'token' | 'swap'
 }
 
 const SlippageTabs: FC<SlippageTabsProps> = ({
@@ -72,11 +70,9 @@ const SlippageTabs: FC<SlippageTabsProps> = ({
   handleClose,
   slippageRating,
   slippageRatingColor,
-  inputRef,
-  widgetType
+  inputRef
 }) => {
   const isMobile = useMediaQuery('(max-width: 520px)')
-  const isTokenWidget = widgetType === 'token'
   return (
     <TabsRoot
       value={mode}
@@ -86,10 +82,7 @@ const SlippageTabs: FC<SlippageTabsProps> = ({
           setDisplayValue(undefined)
         }
       }}
-      className={cn(
-        'relay-flex relay-flex-col relay-w-full',
-        isTokenWidget ? 'relay-gap-1' : 'relay-gap-3 sm:relay-gap-2'
-      )}
+      className="relay-flex relay-flex-col relay-w-full relay-gap-3 sm:relay-gap-2"
     >
       <TabsList className="relay-w-full">
         <TabsTrigger value="Auto" className="relay-w-1/2">
@@ -102,13 +95,9 @@ const SlippageTabs: FC<SlippageTabsProps> = ({
 
       <TabsContent value="Auto" className="relay-w-full">
         <Text
-          style={isTokenWidget ? 'body3' : 'body2'}
+          style="body2"
           color="subtle"
-          className={cn(
-            isTokenWidget
-              ? 'relay-leading-normal relay-text-xs'
-              : 'relay-leading-[14px] sm:relay-text-xs'
-          )}
+          className="relay-leading-[14px] sm:relay-text-xs"
         >
           We'll set the slippage automatically to minimize the failure rate.
         </Text>
@@ -209,8 +198,7 @@ export const SlippageToleranceConfig: FC<SlippageToleranceConfigProps> = ({
   label = 'Slippage',
   onOpenSlippageConfig,
   showGearIcon = true,
-  showLabel = false,
-  widgetType
+  showLabel = false
 }) => {
   const isMobile = useMediaQuery('(max-width: 520px)')
   const [displayValue, setDisplayValue] = useState<string | undefined>(() =>
@@ -321,40 +309,25 @@ export const SlippageToleranceConfig: FC<SlippageToleranceConfigProps> = ({
     })
   }
 
-  const triggerButton =
-    widgetType === 'token' ? (
-      <Button
-        aria-label="Slippage Tolerance Configuration"
-        color="ghost"
-        size="none"
-        className="relay-flex relay-items-center relay-justify-center relay-gap-1 relay-rounded-lg relay-px-[6px] relay-py-1 relay-bg-[var(--relay-colors-gray3)]"
-      >
-        <Text style="subtitle3" color="subtle">
-          Slippage
-        </Text>
-        <Text style="subtitle3">
-          {displayValue ? `${displayValue}%` : 'Auto'}
+  const triggerButton = (
+    <Button
+      aria-label="Slippage Tolerance Configuration"
+      color="ghost"
+      size="none"
+      className="relay-items-center relay-justify-center relay-gap-1 relay-p-2 relay-rounded-[12px] relay-border relay-border-solid relay-border-[var(--relay-colors-gray5)] relay-h-9 relay-px-[10px]"
+      style={{
+        color: tokenToColor(slippageRatingColor) ?? 'var(--relay-colors-gray9)',
+        backgroundColor: 'var(--relay-colors-widget-card-background)'
+      }}
+    >
+      {open === false && displayValue && (
+        <Text style="subtitle2" color={slippageRatingColor === 'red11' ? 'red' : slippageRatingColor === 'amber11' ? 'warningSecondary' : undefined}>
+          {displayValue}%
         </Text>
-      </Button>
-    ) : (
-      <Button
-        aria-label="Slippage Tolerance Configuration"
-        color="ghost"
-        size="none"
-        className="relay-items-center relay-justify-center relay-gap-1 relay-p-2 relay-rounded-[12px] relay-border relay-border-solid relay-border-[var(--relay-colors-gray5)] relay-h-9 relay-px-[10px]"
-        style={{
-          color: tokenToColor(slippageRatingColor) ?? 'var(--relay-colors-gray9)',
-          backgroundColor: 'var(--relay-colors-widget-card-background)'
-        }}
-      >
-        {open === false && displayValue && (
-          <Text style="subtitle2" color={slippageRatingColor === 'red11' ? 'red' : slippageRatingColor === 'amber11' ? 'warningSecondary' : undefined}>
-            {displayValue}%
-          </Text>
-        )}
-        <FontAwesomeIcon icon={faGear} />
-      </Button>
-    )
+      )}
+      <FontAwesomeIcon icon={faGear} />
+    </Button>
+  )
 
   const slippageTabsProps = {
     mode,
@@ -366,8 +339,7 @@ export const SlippageToleranceConfig: FC<SlippageToleranceConfigProps> = ({
     handleClose,
     slippageRating,
     slippageRatingColor,
-    inputRef,
-    widgetType
+    inputRef
   }
 
   return (
diff --git a/packages/ui/src/components/widgets/TokenWidget/AmountModeToggle.tsx b/packages/ui/src/components/widgets/TokenWidget/AmountModeToggle.tsx
deleted file mode 100644
index 0a079c148..000000000
--- a/packages/ui/src/components/widgets/TokenWidget/AmountModeToggle.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { type ComponentPropsWithoutRef, type FC, type ReactNode } from 'react'
-import { Flex, Text, Button } from '../../primitives/index.js'
-import { SwitchIcon } from '../../../icons/index.js'
-
-type TextProps = Omit<ComponentPropsWithoutRef<typeof Text>, 'children'>
-
-type AmountModeToggleProps = {
-  children: ReactNode
-  onToggle: () => void
-  textProps?: TextProps
-  buttonAriaLabel?: string
-}
-
-const AmountModeToggle: FC<AmountModeToggleProps> = ({
-  children,
-  onToggle,
-  textProps,
-  buttonAriaLabel = 'Switch Input Mode'
-}) => {
-  const mergedTextProps: TextProps = {
-    style: 'subtitle3',
-    color: 'subtleSecondary',
-    ...textProps
-  }
-
-  return (
-    <Flex
-      align="center"
-      className="relay-gap-[8px] hover:relay-cursor-pointer"
-      onClick={() => {
-        onToggle()
-      }}
-    >
-      <Text {...mergedTextProps}>{children}</Text>
-      <Button
-        aria-label={buttonAriaLabel}
-        size="none"
-        color="ghost"
-        className="relay-text-[color:var(--relay-colors-gray11)] relay-self-center relay-justify-center relay-w-[20px] relay-h-[20px] relay-rounded-[100px] relay-p-[4px] relay-bg-[var(--relay-colors-gray3)]"
-        onClick={() => {
-          onToggle()
-        }}
-      >
-        <SwitchIcon width={16} height={10} />
-      </Button>
-    </Flex>
-  )
-}
-
-export default AmountModeToggle
diff --git a/packages/ui/src/components/widgets/TokenWidget/AmountSectionHeader.tsx b/packages/ui/src/components/widgets/TokenWidget/AmountSectionHeader.tsx
deleted file mode 100644
index 2e9198c83..000000000
--- a/packages/ui/src/components/widgets/TokenWidget/AmountSectionHeader.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { type FC } from 'react'
-import { Flex, Text } from '../../primitives/index.js'
-import { SlippageToleranceConfig } from '../../common/SlippageToleranceConfig.js'
-
-type AmountSectionHeaderProps = {
-  label: string
-  slippageTolerance?: string
-  onSlippageToleranceChange?: (value: string | undefined) => void
-  onAnalyticEvent?: (eventName: string, data?: any) => void
-  onOpenSlippageConfig?: () => void
-}
-
-const AmountSectionHeader: FC<AmountSectionHeaderProps> = ({
-  label,
-  slippageTolerance,
-  onSlippageToleranceChange,
-  onAnalyticEvent,
-  onOpenSlippageConfig
-}) => (
-  <Flex align="center" justify="between" className="relay-gap-2 relay-w-full">
-    <Text style="subtitle2">{label}</Text>
-    <SlippageToleranceConfig
-      label="Slippage"
-      showGearIcon={false}
-      showLabel={true}
-      currentSlippageTolerance={slippageTolerance}
-      setSlippageTolerance={onSlippageToleranceChange ?? (() => {})}
-      onAnalyticEvent={onAnalyticEvent}
-      onOpenSlippageConfig={onOpenSlippageConfig}
-      widgetType="token"
-    />
-  </Flex>
-)
-
-export default AmountSectionHeader
diff --git a/packages/ui/src/components/widgets/TokenWidget/BuyTabContent.tsx b/packages/ui/src/components/widgets/TokenWidget/BuyTabContent.tsx
deleted file mode 100644
index b1599c5ac..000000000
--- a/packages/ui/src/components/widgets/TokenWidget/BuyTabContent.tsx
+++ /dev/null
@@ -1,606 +0,0 @@
-import { TabsContent } from '../../primitives/Tabs.js'
-import { Flex, Text } from '../../primitives/index.js'
-import AmountInput from '../../common/AmountInput.js'
-import { cn } from '../../../utils/cn.js'
-import {
-  formatFixedLength,
-  formatNumber,
-  formatDollar
-} from '../../../utils/numbers.js'
-import { PriceImpact } from '../SwapWidget/PriceImpact.js'
-import { BalanceDisplay } from '../../common/BalanceDisplay.js'
-import { MultiWalletDropdown } from '../../common/MultiWalletDropdown.js'
-import PaymentMethod from '../../common/TokenSelector/PaymentMethod.js'
-import { EventNames } from '../../../constants/events.js'
-import { isChainLocked } from '../../../utils/tokenSelector.js'
-import { useState } from 'react'
-import type { Dispatch, FC, SetStateAction } from 'react'
-import type { TradeType, ChildrenProps } from './widget/TokenWidgetRenderer.js'
-import type { Token, LinkedWallet } from '../../../types/index.js'
-import type { RelayChain } from '@relayprotocol/relay-sdk'
-import { isDeadAddress, tronDeadAddress } from '@relayprotocol/relay-sdk'
-import SwapButton from '../SwapButton.js'
-import { PaymentMethodTrigger } from '../../common/TokenSelector/triggers/PaymentMethodTrigger.js'
-import AmountSectionHeader from './AmountSectionHeader.js'
-import AmountModeToggle from './AmountModeToggle.js'
-import TransactionDetailsFooter from './TransactionDetailsFooter.js'
-import SectionContainer from './SectionContainer.js'
-import { WidgetErrorWell } from '../WidgetErrorWell.js'
-import { FeeBreakdownInfo } from './FeeBreakdownInfo.js'
-import { DestinationWalletSelector } from './DestinationWalletSelector.js'
-
-type LinkNewWalletHandler = (params: {
-  chain?: RelayChain
-  direction: 'to' | 'from'
-}) => Promise<LinkedWallet> | void
-
-type ChildrenPropsSubset = Pick<
-  ChildrenProps,
-  | 'quote'
-  | 'isFetchingQuote'
-  | 'isLoadingToTokenPrice'
-  | 'toTokenPriceData'
-  | 'setTradeType'
-  | 'setAmountOutputValue'
-  | 'setAmountInputValue'
-  | 'debouncedAmountOutputControls'
-  | 'feeBreakdown'
-  | 'isLoadingFromBalance'
-  | 'fromBalance'
-  | 'fromBalancePending'
-  | 'toBalance'
-  | 'isLoadingToBalance'
-  | 'toBalancePending'
-  | 'address'
-  | 'timeEstimate'
-  | 'toChainWalletVMSupported'
-  | 'recipient'
-  | 'setCustomToAddress'
-  | 'setDestinationAddressOverride'
-  | 'isValidToAddress'
-  | 'isRecipientLinked'
-  | 'toDisplayName'
-  | 'isValidFromAddress'
-  | 'fromChainWalletVMSupported'
-  | 'supportedWalletVMs'
-  | 'transactionModalOpen'
-  | 'hasInsufficientBalance'
-  | 'isInsufficientLiquidityError'
-  | 'recipientWalletSupportsChain'
-  | 'isSameCurrencySameRecipientSwap'
-  | 'debouncedInputAmountValue'
-  | 'debouncedOutputAmountValue'
-  | 'error'
-  | 'relayerFeeProportion'
-  | 'highRelayerServiceFee'
-  | 'isCapacityExceededError'
-  | 'isCouldNotExecuteError'
-  | 'ctaCopy'
->
-
-type BuyTabContentProps = ChildrenPropsSubset & {
-  // Slippage configuration
-  slippageTolerance?: string
-  onOpenSlippageConfig?: () => void
-  onSlippageToleranceChange?: (value: string | undefined) => void
-
-  // Input/output state
-  isUsdInputMode: boolean
-  usdOutputValue: string
-  tradeType: TradeType
-  amountOutputValue: string
-  amountInputValue: string
-  outputAmountUsd: number | null
-  setUsdOutputValue: (value: string) => void
-  setUsdInputValue: (value: string) => void
-
-  // Tokens
-  toToken?: Token
-  fromToken?: Token
-  handleSetFromToken: (token?: Token) => void
-  handleSetToToken: (token?: Token) => void
-
-  // Wallet and address management
-  multiWalletSupportEnabled: boolean
-  linkedWallets?: LinkedWallet[]
-  onSetPrimaryWallet?: (address: string) => void
-  setOriginAddressOverride: Dispatch<SetStateAction<ChildrenProps['address']>>
-  setAddressModalOpen: Dispatch<SetStateAction<boolean>>
-  disablePasteWalletAddressOption?: boolean
-
-  // Chain configuration
-  toChain?: RelayChain
-  fromChain?: RelayChain
-  lockToToken: boolean
-  lockFromToken: boolean
-  isSingleChainLocked: boolean
-  lockChainId?: number
-  popularChainIds?: number[]
-
-  // Modal states
-  depositAddressModalOpen: boolean
-
-  // UI state and actions
-  showHighPriceImpactWarning: boolean
-  disableSwapButton?: boolean
-  toggleInputMode: () => void
-  onPrimaryAction: () => void
-
-  // Event handlers
-  onAnalyticEvent?: (eventName: string, data?: any) => void
-  onConnectWallet?: () => void
-  onLinkNewWallet?: LinkNewWalletHandler
-
-  // Additional props not covered by ChildrenProps
-  recipientLinkedWallet?: LinkedWallet
-  toChainVmType?: string
-
-  // Payment method configuration
-  paymentMethodMinHeight?: string
-}
-
-const BuyTabContent: FC<BuyTabContentProps> = ({
-  slippageTolerance,
-  onOpenSlippageConfig,
-  onSlippageToleranceChange,
-  isUsdInputMode,
-  usdOutputValue,
-  tradeType,
-  amountOutputValue,
-  amountInputValue,
-  toToken,
-  fromToken,
-  quote,
-  isFetchingQuote,
-  isLoadingToTokenPrice,
-  outputAmountUsd,
-  toTokenPriceData,
-  setUsdOutputValue,
-  setTradeType,
-  setAmountOutputValue,
-  setAmountInputValue,
-  setUsdInputValue,
-  debouncedAmountOutputControls,
-  onAnalyticEvent,
-  feeBreakdown,
-  isLoadingFromBalance,
-  fromBalance,
-  fromBalancePending,
-  toBalance,
-  isLoadingToBalance,
-  toBalancePending,
-  address,
-  timeEstimate,
-  multiWalletSupportEnabled,
-  toChainWalletVMSupported,
-  fromChain,
-  disablePasteWalletAddressOption,
-  recipient,
-  setCustomToAddress,
-  setDestinationAddressOverride,
-  onConnectWallet,
-  onLinkNewWallet,
-  linkedWallets,
-  toChain,
-  isValidToAddress,
-  isRecipientLinked,
-  setAddressModalOpen,
-  toDisplayName,
-  isValidFromAddress,
-  fromChainWalletVMSupported,
-  supportedWalletVMs,
-  handleSetFromToken,
-  handleSetToToken,
-  onSetPrimaryWallet,
-  setOriginAddressOverride,
-  lockToToken,
-  lockFromToken,
-  isSingleChainLocked,
-  lockChainId,
-  popularChainIds,
-  transactionModalOpen,
-  depositAddressModalOpen,
-  hasInsufficientBalance,
-  isInsufficientLiquidityError,
-  recipientWalletSupportsChain,
-  isSameCurrencySameRecipientSwap,
-  debouncedInputAmountValue,
-  debouncedOutputAmountValue,
-  showHighPriceImpactWarning,
-  disableSwapButton,
-  toggleInputMode,
-  onPrimaryAction,
-  error,
-  relayerFeeProportion,
-  highRelayerServiceFee,
-  isCapacityExceededError,
-  isCouldNotExecuteError,
-  recipientLinkedWallet,
-  toChainVmType,
-  ctaCopy,
-  paymentMethodMinHeight = '85vh'
-}) => {
-  const [isPaymentMethodOpen, setIsPaymentMethodOpen] = useState(false)
-  const displayCta = [
-    'Swap',
-    'Confirm',
-    'Bridge',
-    'Send',
-    'Wrap',
-    'Unwrap'
-  ].includes(ctaCopy)
-    ? 'Buy'
-    : ctaCopy
-
-  const fromChainId = fromToken?.chainId
-  const lockedChainIds = isSingleChainLocked
-    ? lockChainId !== undefined
-      ? [lockChainId]
-      : undefined
-    : isChainLocked(
-          fromChainId,
-          lockChainId,
-          toToken?.chainId,
-          lockFromToken
-        ) && fromChainId !== undefined
-      ? [fromChainId]
-      : undefined
-
-  const hasSelectedTokens = Boolean(fromToken && toToken)
-  const invalidAmount =
-    !quote ||
-    Number(debouncedInputAmountValue) === 0 ||
-    Number(debouncedOutputAmountValue) === 0 ||
-    !hasSelectedTokens
-
-  const hasValidOutputAmount =
-    toToken && amountOutputValue && Number(amountOutputValue) > 0
-
-  const currencyInAmountUsd = quote?.details?.currencyIn?.amountUsd
-  const currencyInAmountFormatted = quote?.details?.currencyIn?.amountFormatted
-
-  const isLoadingPayWith =
-    hasValidOutputAmount && isFetchingQuote && fromToken && !currencyInAmountUsd
-
-  const isSameTokenSameRecipient =
-    fromToken?.address === toToken?.address &&
-    fromToken?.chainId === toToken?.chainId &&
-    address === recipient
-
-  const isInputDisabled =
-    !toToken || !fromChainWalletVMSupported || isSameTokenSameRecipient
-
-  return (
-    <TabsContent value="buy">
-      <SectionContainer
-        className="relay-border-none md:relay-border md:relay-border-solid md:relay-border-[var(--relay-colors-slate4)]"
-        id={'buy-token-section'}
-        isPaymentMethodOpen={isPaymentMethodOpen}
-        paymentMethodMinHeight={paymentMethodMinHeight}
-      >
-        <AmountSectionHeader
-          label="Amount"
-          slippageTolerance={slippageTolerance}
-          onOpenSlippageConfig={onOpenSlippageConfig}
-          onSlippageToleranceChange={onSlippageToleranceChange}
-          onAnalyticEvent={onAnalyticEvent}
-        />
-        <Flex align="center" justify="between" className="relay-w-full">
-          <AmountInput
-            prefixSymbol={isUsdInputMode ? '$' : undefined}
-            value={
-              isUsdInputMode
-                ? usdOutputValue
-                : tradeType === 'EXPECTED_OUTPUT'
-                  ? amountOutputValue
-                  : amountOutputValue
-                    ? formatFixedLength(amountOutputValue, 8)
-                    : amountOutputValue
-            }
-            setValue={(value) => {
-              if (isUsdInputMode) {
-                setUsdOutputValue(value)
-                setTradeType('EXPECTED_OUTPUT')
-                if (Number(value) === 0) {
-                  setAmountInputValue('')
-                  setUsdInputValue('')
-                  debouncedAmountOutputControls.flush()
-                }
-              } else {
-                setAmountOutputValue(value)
-                setTradeType('EXPECTED_OUTPUT')
-                if (Number(value) === 0) {
-                  setAmountInputValue('')
-                  debouncedAmountOutputControls.flush()
-                }
-              }
-            }}
-            disabled={isInputDisabled}
-            onClick={() => {
-              onAnalyticEvent?.(EventNames.SWAP_OUTPUT_FOCUSED)
-            }}
-            className={cn(
-              'relay-font-bold relay-text-[32px] relay-leading-[32px] relay-py-0',
-              'disabled:relay-cursor-not-allowed disabled:relay-text-[color:var(--relay-colors-gray10)] disabled:placeholder:relay-text-[color:var(--relay-colors-gray10)]',
-              isFetchingQuote && tradeType === 'EXACT_INPUT'
-                ? 'relay-text-[color:var(--relay-colors-text-subtle)] placeholder:relay-text-[color:var(--relay-colors-text-subtle)]'
-                : 'relay-text-[color:var(--relay-colors-input-color)] placeholder:relay-text-[color:var(--relay-colors-input-color)]'
-            )}
-          />
-        </Flex>
-        <Flex
-          align="center"
-          justify="between"
-          className="relay-gap-3 relay-w-full"
-        >
-          <Flex
-            align="center"
-            className="relay-gap-3 relay-min-h-[18px]"
-          >
-            <AmountModeToggle onToggle={toggleInputMode}>
-              {isUsdInputMode
-                ? toToken
-                  ? usdOutputValue && Number(usdOutputValue) > 0
-                    ? amountOutputValue && !isLoadingToTokenPrice
-                      ? `${formatNumber(amountOutputValue, 4, false)} ${toToken.symbol}`
-                      : '...'
-                    : `0 ${toToken.symbol}`
-                  : null
-                : toToken &&
-                    quote?.details?.currencyOut?.amountUsd &&
-                    !isFetchingQuote
-                  ? formatDollar(Number(quote.details.currencyOut.amountUsd))
-                  : toToken &&
-                      isLoadingToTokenPrice &&
-                      amountOutputValue &&
-                      Number(amountOutputValue) > 0
-                    ? '...'
-                    : toToken &&
-                        outputAmountUsd &&
-                        outputAmountUsd > 0 &&
-                        toTokenPriceData?.price &&
-                        toTokenPriceData.price > 0
-                      ? formatDollar(outputAmountUsd)
-                      : '$0.00'}
-            </AmountModeToggle>
-            <PriceImpact
-              toToken={toToken}
-              isFetchingQuote={isFetchingQuote}
-              feeBreakdown={feeBreakdown}
-              quote={quote}
-            />
-          </Flex>
-          <Flex className="relay-ml-auto">
-            {toToken ? (
-              <BalanceDisplay
-                hideBalanceLabel={false}
-                displaySymbol={false}
-                isLoading={isLoadingToBalance}
-                balance={toBalance}
-                decimals={toToken?.decimals}
-                symbol={toToken?.symbol}
-                isConnected={
-                  !isDeadAddress(recipient) &&
-                  recipient !== tronDeadAddress &&
-                  recipient !== undefined
-                }
-                pending={toBalancePending}
-                size="sm"
-              />
-            ) : (
-              <Flex style={{ height: 18 }} />
-            )}
-          </Flex>
-        </Flex>
-
-        <hr className="relay-w-full relay-border-[var(--relay-colors-gray4)] relay-border-t relay-border-solid relay-border-b-0 relay-border-x-0" />
-
-        <Flex align="center" className="relay-w-full relay-gap-2">
-          <Text style="subtitle2" color="subtle">
-            Pay with
-          </Text>
-          {multiWalletSupportEnabled && fromChainWalletVMSupported ? (
-            <MultiWalletDropdown
-              context="origin"
-              disablePasteWalletAddressOption={disablePasteWalletAddressOption}
-              selectedWalletAddress={address}
-              onSelect={(wallet) => {
-                setOriginAddressOverride(wallet.address)
-                onSetPrimaryWallet?.(wallet.address)
-
-                if (wallet.address !== address) {
-                  handleSetFromToken(undefined)
-                }
-              }}
-              chain={fromChain}
-              disableWalletFiltering={true}
-              onLinkNewWallet={() => {
-                if (!address && fromChainWalletVMSupported) {
-                  onConnectWallet?.()
-                } else {
-                  onLinkNewWallet?.({
-                    chain: fromChain,
-                    direction: 'from'
-                  })?.then((wallet) => {
-                    if (wallet) {
-                      setOriginAddressOverride(wallet.address)
-                      onSetPrimaryWallet?.(wallet.address)
-                    }
-                  })
-                }
-              }}
-              setAddressModalOpen={setAddressModalOpen}
-              wallets={linkedWallets ?? []}
-              onAnalyticEvent={onAnalyticEvent}
-              testId="origin-wallet-select-button"
-            />
-          ) : null}
-        </Flex>
-
-        <Flex align="center" className="relay-w-full relay-gap-8">
-          <PaymentMethod
-            address={address}
-            isValidAddress={isValidFromAddress}
-            token={fromToken}
-            onAnalyticEvent={onAnalyticEvent}
-            fromChainWalletVMSupported={fromChainWalletVMSupported}
-            supportedWalletVMs={supportedWalletVMs}
-            linkedWallets={linkedWallets}
-            multiWalletSupportEnabled={multiWalletSupportEnabled}
-            context="from"
-            setToken={(token) => {
-              handleSetFromToken(token)
-            }}
-            lockedChainIds={lockedChainIds}
-            chainIdsFilter={
-              !fromChainWalletVMSupported && toToken
-                ? [toToken.chainId]
-                : undefined
-            }
-            popularChainIds={popularChainIds}
-            onPaymentMethodOpenChange={setIsPaymentMethodOpen}
-            trigger={
-              <div>
-                <PaymentMethodTrigger
-                  token={fromToken}
-                  address={address}
-                  testId="origin-token-select-button"
-                  balanceLabel="available"
-                />
-              </div>
-            }
-          />
-          <Flex className="relay-ml-auto">
-            <FeeBreakdownInfo
-              isLoading={Boolean(isLoadingPayWith)}
-              amountUsd={currencyInAmountUsd}
-              tokenAmountFormatted={currencyInAmountFormatted}
-              fallbackTokenAmount={amountInputValue}
-              quote={quote}
-              feeBreakdown={feeBreakdown}
-              token={fromToken}
-            />
-          </Flex>
-        </Flex>
-
-        <hr className="relay-w-full relay-border-[var(--relay-colors-gray4)] relay-border-t relay-border-solid relay-border-b-0 relay-border-x-0" />
-
-        <Flex direction="column" className="relay-gap-2 relay-w-full">
-          <DestinationWalletSelector
-            label="Send to"
-            isMultiWalletEnabled={multiWalletSupportEnabled}
-            walletSupported={toChainWalletVMSupported}
-            dropdownProps={{
-              disablePasteWalletAddressOption,
-              selectedWalletAddress: recipient,
-              onSelect: (wallet) => {
-                setDestinationAddressOverride(wallet.address)
-                setCustomToAddress(undefined)
-              },
-              chain: toChain,
-              disableWalletFiltering: false,
-              onLinkNewWallet: () => {
-                if (!address && toChainWalletVMSupported) {
-                  onConnectWallet?.()
-                } else {
-                  onLinkNewWallet?.({
-                    chain: toChain,
-                    direction: 'to'
-                  })?.then((wallet) => {
-                    if (!wallet) {
-                      return
-                    }
-                    setDestinationAddressOverride(wallet.address)
-                    setCustomToAddress(undefined)
-                  })
-                }
-              },
-              setAddressModalOpen,
-              wallets: linkedWallets ?? [],
-              onAnalyticEvent,
-              testId: 'destination-wallet-select-button'
-            }}
-            fallback={{
-              highlighted: Boolean(
-                isValidToAddress &&
-                  multiWalletSupportEnabled &&
-                  !isRecipientLinked
-              ),
-              text: !isValidToAddress ? 'Enter Address' : (toDisplayName ?? ''),
-              onClick: () => {
-                setDestinationAddressOverride(undefined)
-                setAddressModalOpen(true)
-                onAnalyticEvent?.(EventNames.SWAP_ADDRESS_MODAL_CLICKED)
-              },
-              showClipboard: Boolean(
-                isValidToAddress &&
-                  multiWalletSupportEnabled &&
-                  !isRecipientLinked
-              )
-            }}
-          />
-          <WidgetErrorWell
-            hasInsufficientBalance={hasInsufficientBalance}
-            error={error}
-            quote={quote}
-            currency={fromToken}
-            relayerFeeProportion={relayerFeeProportion}
-            isHighRelayerServiceFee={highRelayerServiceFee}
-            isCapacityExceededError={isCapacityExceededError}
-            isCouldNotExecuteError={isCouldNotExecuteError}
-            recipientWalletSupportsChain={recipientWalletSupportsChain}
-            recipient={recipient}
-            toChainWalletVMSupported={toChainWalletVMSupported}
-            recipientLinkedWallet={recipientLinkedWallet}
-            toChainVmType={toChainVmType}
-            containerClassName="relay-w-full relay-mb-0"
-          />
-        </Flex>
-
-        <Flex className="relay-w-full">
-          <SwapButton
-            context="Buy"
-            transactionModalOpen={transactionModalOpen}
-            depositAddressModalOpen={depositAddressModalOpen}
-            showHighPriceImpactWarning={showHighPriceImpactWarning}
-            disableSwapButton={disableSwapButton}
-            tokenWidgetMode={true}
-            hasValidAmount={!invalidAmount}
-            quote={quote}
-            address={address}
-            hasInsufficientBalance={hasInsufficientBalance}
-            isInsufficientLiquidityError={isInsufficientLiquidityError}
-            debouncedInputAmountValue={debouncedInputAmountValue}
-            debouncedOutputAmountValue={debouncedOutputAmountValue}
-            isSameCurrencySameRecipientSwap={isSameCurrencySameRecipientSwap}
-            ctaCopy={displayCta}
-            isValidFromAddress={isValidFromAddress}
-            isValidToAddress={isValidToAddress}
-            fromChainWalletVMSupported={fromChainWalletVMSupported}
-            recipientWalletSupportsChain={recipientWalletSupportsChain}
-            isFetchingQuote={isFetchingQuote}
-            onClick={() => {
-              onAnalyticEvent?.('TOKEN_BUY_CLICKED', {
-                token: toToken,
-                amount: amountOutputValue
-              })
-              onPrimaryAction()
-            }}
-            onConnectWallet={onConnectWallet}
-            onAnalyticEvent={onAnalyticEvent}
-          />
-        </Flex>
-
-        <Flex className="relay-w-full" style={{ marginTop: '-8px' }}>
-          <TransactionDetailsFooter
-            timeEstimate={timeEstimate}
-            feeBreakdown={feeBreakdown}
-            quote={quote}
-          />
-        </Flex>
-      </SectionContainer>
-    </TabsContent>
-  )
-}
-
-export default BuyTabContent
diff --git a/packages/ui/src/components/widgets/TokenWidget/DestinationWalletSelector.tsx b/packages/ui/src/components/widgets/TokenWidget/DestinationWalletSelector.tsx
deleted file mode 100644
index 38bb954ca..000000000
--- a/packages/ui/src/components/widgets/TokenWidget/DestinationWalletSelector.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import type { FC } from 'react'
-import { Flex, Text, Button, Box } from '../../primitives/index.js'
-import {
-  MultiWalletDropdown,
-  type MultiWalletDropdownProps
-} from '../../common/MultiWalletDropdown.js'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faClipboard } from '@fortawesome/free-solid-svg-icons'
-
-type DestinationWalletSelectorProps = {
-  label: string
-  isMultiWalletEnabled: boolean
-  walletSupported: boolean
-  dropdownProps: Omit<MultiWalletDropdownProps, 'context'>
-  fallback: {
-    highlighted: boolean
-    text: string
-    onClick: () => void
-    showClipboard?: boolean
-  }
-}
-
-export const DestinationWalletSelector: FC<DestinationWalletSelectorProps> = ({
-  label,
-  isMultiWalletEnabled,
-  walletSupported,
-  dropdownProps,
-  fallback
-}) => {
-  return (
-    <Flex align="center" className="relay-w-full relay-gap-2">
-      <Text style="subtitle2" color="subtle">
-        {label}
-      </Text>
-      {isMultiWalletEnabled && walletSupported ? (
-        <MultiWalletDropdown context="destination" {...dropdownProps} />
-      ) : (
-        <Button
-          color={fallback.highlighted ? 'warning' : 'secondary'}
-          corners="pill"
-          size="none"
-          className="relay-flex relay-items-center relay-px-2 relay-py-1"
-          onClick={fallback.onClick}
-        >
-          {fallback.showClipboard ? (
-            <Box className="relay-text-[color:var(--relay-colors-amber11)]">
-              <FontAwesomeIcon icon={faClipboard} width={16} height={16} />
-            </Box>
-          ) : null}
-          <Text
-            style="subtitle2"
-            className={fallback.highlighted ? 'relay-text-[color:var(--relay-colors-amber11)]' : 'relay-text-[color:var(--relay-colors-anchor-color)]'}
-          >
-            {fallback.text}
-          </Text>
-        </Button>
-      )}
-    </Flex>
-  )
-}
-
-export type { DestinationWalletSelectorProps }
diff --git a/packages/ui/src/components/widgets/TokenWidget/FeeBreakdownInfo.tsx b/packages/ui/src/components/widgets/TokenWidget/FeeBreakdownInfo.tsx
deleted file mode 100644
index d0f20b1e8..000000000
--- a/packages/ui/src/components/widgets/TokenWidget/FeeBreakdownInfo.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import type { FC } from 'react'
-import { Box, Flex, Text } from '../../primitives/index.js'
-import Skeleton from '../../primitives/Skeleton.js'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'
-import { formatDollarCompact, formatNumber } from '../../../utils/numbers.js'
-import { FeeBreakdownTooltip } from './FeeBreakdownTooltip.js'
-import type { QuoteResponse } from '@relayprotocol/relay-kit-hooks'
-import type { FeeBreakdown } from '../../../types/FeeBreakdown.js'
-import type { Token } from '../../../types/index.js'
-
-type FeeBreakdownInfoProps = {
-  isLoading: boolean
-  amountUsd?: string
-  tokenAmountFormatted?: string
-  fallbackTokenAmount?: string
-  quote?: QuoteResponse
-  feeBreakdown?: FeeBreakdown | null
-  token?: Token
-}
-
-export const FeeBreakdownInfo: FC<FeeBreakdownInfoProps> = ({
-  isLoading,
-  amountUsd,
-  tokenAmountFormatted,
-  fallbackTokenAmount,
-  quote,
-  feeBreakdown,
-  token
-}) => {
-  return (
-    <Flex
-      direction="column"
-      align="end"
-      justify={!token ? 'center' : 'start'}
-      className="relay-gap-1 relay-min-h-[42px]"
-    >
-      <Flex align="center" className="relay-gap-1 relay-min-w-0">
-        {isLoading ? (
-          <Skeleton className="relay-w-[90px] relay-h-[20px]" />
-        ) : amountUsd && Number(amountUsd) > 0 ? (
-          <>
-            <Text
-              style="h6"
-              className="relay-text-right relay-overflow-hidden relay-text-ellipsis relay-whitespace-nowrap relay-min-w-0"
-            >
-              {formatDollarCompact(Number(amountUsd))} total
-            </Text>
-            <FeeBreakdownTooltip
-              quote={quote}
-              feeBreakdown={feeBreakdown}
-              fromToken={token}
-              tooltipProps={{ side: 'top', align: 'end' }}
-            >
-              <Box className="relay-text-[color:var(--relay-colors-gray8)] relay-w-[16px] relay-flex relay-items-center relay-justify-center relay-cursor-pointer relay-shrink-0">
-                <FontAwesomeIcon icon={faInfoCircle} />
-              </Box>
-            </FeeBreakdownTooltip>
-          </>
-        ) : token ? (
-          <Text
-            style="h6"
-            className="relay-text-right relay-overflow-hidden relay-text-ellipsis relay-whitespace-nowrap relay-leading-normal relay-min-w-0"
-          >
-            $0 total
-          </Text>
-        ) : (
-          <Text
-            style="h6"
-            className="relay-text-right relay-overflow-hidden relay-text-ellipsis relay-whitespace-nowrap relay-min-w-0"
-          >
-            - total
-          </Text>
-        )}
-      </Flex>
-      {isLoading ? (
-        <Skeleton className="relay-w-[70px] relay-h-[14px]" />
-      ) : amountUsd && Number(amountUsd) > 0 ? (
-        token && tokenAmountFormatted && Number(tokenAmountFormatted) > 0 ? (
-          <Text
-            style="subtitle3"
-            color="subtleSecondary"
-            className="relay-overflow-hidden relay-text-ellipsis relay-whitespace-nowrap relay-min-w-0 relay-max-w-full"
-          >
-            {formatNumber(tokenAmountFormatted, 4, true)} {token.symbol}
-          </Text>
-        ) : token && fallbackTokenAmount && Number(fallbackTokenAmount) > 0 ? (
-          <Text
-            style="subtitle3"
-            color="subtleSecondary"
-            className="relay-overflow-hidden relay-text-ellipsis relay-whitespace-nowrap relay-min-w-0 relay-max-w-full"
-          >
-            {formatNumber(fallbackTokenAmount, 4, true)} {token.symbol}
-          </Text>
-        ) : null
-      ) : token ? (
-        <Text
-          style="subtitle3"
-          color="subtleSecondary"
-          className="relay-overflow-hidden relay-text-ellipsis relay-whitespace-nowrap relay-min-w-0 relay-max-w-full"
-        >
-          0.00 {token.symbol}
-        </Text>
-      ) : null}
-    </Flex>
-  )
-}
diff --git a/packages/ui/src/components/widgets/TokenWidget/FeeBreakdownTooltip.tsx b/packages/ui/src/components/widgets/TokenWidget/FeeBreakdownTooltip.tsx
deleted file mode 100644
index 822197b72..000000000
--- a/packages/ui/src/components/widgets/TokenWidget/FeeBreakdownTooltip.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-import type { FC, ReactNode } from 'react'
-import { Flex, Text } from '../../primitives/index.js'
-import Tooltip from '../../primitives/Tooltip.js'
-import type { QuoteResponse } from '@relayprotocol/relay-kit-hooks'
-import type { FeeBreakdown } from '../../../types/FeeBreakdown.js'
-import { formatDollar, formatNumber } from '../../../utils/numbers.js'
-
-type FeeBreakdownTooltipProps = {
-  quote?: QuoteResponse
-  feeBreakdown?: FeeBreakdown
-  fromToken?: { symbol: string }
-  children: ReactNode
-  tooltipProps?: any
-}
-
-export const FeeBreakdownTooltip: FC<FeeBreakdownTooltipProps> = ({
-  quote,
-  feeBreakdown,
-  fromToken,
-  children,
-  tooltipProps
-}) => {
-  const currencyInAmount = quote?.details?.currencyIn?.amountUsd
-  const currencyInAmountFormatted = quote?.details?.currencyIn?.amountFormatted
-  const expandedPriceImpact = quote?.details?.expandedPriceImpact
-
-  // Relay fee
-  const relayFee = feeBreakdown?.breakdown?.find(
-    (fee) => fee.id === 'relayer-fee'
-  )
-  const relayFeeUsd =
-    relayFee?.usd.value ??
-    (expandedPriceImpact?.relay?.usd !== undefined
-      ? Number(expandedPriceImpact.relay.usd)
-      : undefined)
-
-  // Swap impact
-  const swapImpactUsd =
-    feeBreakdown?.totalFees?.swapImpact?.value ??
-    (expandedPriceImpact?.swap?.usd !== undefined
-      ? Number(expandedPriceImpact.swap.usd)
-      : undefined)
-
-  // Execution fee
-  const executionFee = feeBreakdown?.breakdown?.find(
-    (fee) => fee.id === 'destination-gas'
-  )
-  const executionFeeUsd =
-    executionFee?.usd.value ??
-    (expandedPriceImpact?.execution?.usd !== undefined
-      ? Number(expandedPriceImpact.execution.usd)
-      : undefined)
-
-  const executionFeeLabel = executionFee?.name ?? 'Execution Fee'
-
-  // App fee
-  const appFee = feeBreakdown?.breakdown?.find((fee) => fee.id === 'app-fee')
-  const appFeeUsd =
-    appFee?.usd.value ??
-    (expandedPriceImpact?.app?.usd !== undefined
-      ? Number(expandedPriceImpact.app.usd)
-      : undefined)
-
-  const tokenAmountFormatted = formatDollar(
-    currencyInAmount !== undefined ? Number(currencyInAmount) : undefined
-  )
-  const relayFeeFormatted = formatDollar(
-    relayFeeUsd !== undefined ? Math.abs(relayFeeUsd) : undefined
-  )
-  const swapImpactFormatted = formatDollar(
-    swapImpactUsd !== undefined ? Math.abs(swapImpactUsd) : undefined
-  )
-  const executionFeeFormatted = formatDollar(
-    executionFeeUsd !== undefined ? Math.abs(executionFeeUsd) : undefined
-  )
-  const appFeeFormatted =
-    appFee?.usd.formatted ??
-    formatDollar(appFeeUsd !== undefined ? Math.abs(appFeeUsd) : undefined)
-
-  return (
-    <Tooltip
-      content={
-        <Flex className="relay-min-w-[240px]" direction="column">
-          {/* Token Amount Row */}
-          {fromToken && currencyInAmount && tokenAmountFormatted !== '-' && (
-            <Flex align="center" className="relay-w-full relay-mb-2">
-              <Text style="subtitle2" color="subtle" className="relay-mr-auto">
-                {currencyInAmountFormatted && currencyInAmountFormatted !== '-'
-                  ? `${formatNumber(currencyInAmountFormatted, 4, true)} ${fromToken.symbol}`
-                  : fromToken.symbol}
-              </Text>
-              <Text style="subtitle2">{tokenAmountFormatted}</Text>
-            </Flex>
-          )}
-
-          {/* Relay Fee Row */}
-          {relayFeeUsd !== undefined && relayFeeFormatted !== '-' && (
-            <Flex align="center" className="relay-w-full relay-mb-2">
-              <Text style="subtitle2" color="subtle" className="relay-mr-auto">
-                {relayFee?.name ?? 'Relay Fee'}
-              </Text>
-              {feeBreakdown?.isGasSponsored && relayFeeUsd === 0 ? (
-                <Text style="subtitle2" color="success">
-                  Free
-                </Text>
-              ) : (
-                <Text style="subtitle2">{relayFeeFormatted}</Text>
-              )}
-            </Flex>
-          )}
-
-          {/* Swap Impact Row */}
-          {swapImpactUsd !== undefined && swapImpactFormatted !== '-' && (
-            <Flex align="center" className="relay-w-full relay-mb-2">
-              <Text style="subtitle2" color="subtle" className="relay-mr-auto">
-                Swap Impact
-              </Text>
-              <Text style="subtitle2">{swapImpactFormatted}</Text>
-            </Flex>
-          )}
-
-          {/* Execution Fee Row */}
-          {executionFeeUsd !== undefined && executionFeeFormatted !== '-' && (
-            <Flex align="center" className="relay-w-full relay-mb-2">
-              <Text style="subtitle2" color="subtle" className="relay-mr-auto">
-                {executionFeeLabel}
-              </Text>
-              {feeBreakdown?.isGasSponsored && executionFeeUsd === 0 ? (
-                <Text style="subtitle2" color="success">
-                  Free
-                </Text>
-              ) : (
-                <Text style="subtitle2">{executionFeeFormatted}</Text>
-              )}
-            </Flex>
-          )}
-
-          {/* App Fee Row */}
-          {appFee && appFeeUsd !== undefined && appFeeFormatted !== '-' && (
-            <Flex align="center" className="relay-w-full">
-              <Text style="subtitle2" color="subtle" className="relay-mr-auto">
-                {appFee.name}
-              </Text>
-              {feeBreakdown?.isGasSponsored && appFeeUsd === 0 ? (
-                <Text style="subtitle2" color="success">
-                  Free
-                </Text>
-              ) : (
-                <Text style="subtitle2">{appFeeFormatted}</Text>
-              )}
-            </Flex>
-          )}
-        </Flex>
-      }
-      {...tooltipProps}
-    >
-      {children}
-    </Tooltip>
-  )
-}
diff --git a/packages/ui/src/components/widgets/TokenWidget/SectionContainer.tsx b/packages/ui/src/components/widgets/TokenWidget/SectionContainer.tsx
deleted file mode 100644
index 4c6995b8d..000000000
--- a/packages/ui/src/components/widgets/TokenWidget/SectionContainer.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { type FC, type PropsWithChildren } from 'react'
-import { Flex } from '../../primitives/index.js'
-import { cn } from '../../../utils/cn.js'
-
-type SectionContainerProps = PropsWithChildren & {
-  className?: string
-  id?: string
-  isPaymentMethodOpen?: boolean
-  paymentMethodMinHeight?: string
-}
-
-const SectionContainer: FC<SectionContainerProps> = ({
-  children,
-  className,
-  id,
-  isPaymentMethodOpen = false,
-  paymentMethodMinHeight = '85vh'
-}) => {
-  return (
-    <Flex
-      align="center"
-      justify="between"
-      id={id}
-      className={cn(
-        'relay-w-full relay-flex relay-flex-col relay-items-start relay-border-widget-card relay-gap-4',
-        'relay-bg-transparent md:relay-bg-[var(--relay-colors-widget-card-background)]',
-        'relay-py-3 md:relay-py-4',
-        'relay-px-0 md:relay-px-4',
-        'relay-rounded-none md:relay-rounded-[var(--relay-radii-widget-card-border-radius)]',
-        'md:relay-min-h-[auto]',
-        className
-      )}
-      style={{
-        minHeight: isPaymentMethodOpen ? paymentMethodMinHeight : 'auto'
-      }}
-    >
-      {children}
-    </Flex>
-  )
-}
-
-export default SectionContainer
diff --git a/packages/ui/src/components/widgets/TokenWidget/SellTabContent.tsx b/packages/ui/src/components/widgets/TokenWidget/SellTabContent.tsx
deleted file mode 100644
index 7aa5198e8..000000000
--- a/packages/ui/src/components/widgets/TokenWidget/SellTabContent.tsx
+++ /dev/null
@@ -1,717 +0,0 @@
-import { TabsContent } from '../../primitives/Tabs.js'
-import { Flex, Box } from '../../primitives/index.js'
-import AmountInput from '../../common/AmountInput.js'
-import { cn } from '../../../utils/cn.js'
-import {
-  formatFixedLength,
-  formatNumber,
-  formatDollar
-} from '../../../utils/numbers.js'
-import { EventNames } from '../../../constants/events.js'
-import { MultiWalletDropdown } from '../../common/MultiWalletDropdown.js'
-import PaymentMethod from '../../common/TokenSelector/PaymentMethod.js'
-import { PaymentMethodTrigger } from '../../common/TokenSelector/triggers/PaymentMethodTrigger.js'
-import { useMemo, useRef, useEffect, useState } from 'react'
-import type { Dispatch, FC, SetStateAction } from 'react'
-import type { TradeType, ChildrenProps } from './widget/TokenWidgetRenderer.js'
-import type { Token, LinkedWallet } from '../../../types/index.js'
-import {
-  isDeadAddress,
-  tronDeadAddress,
-  type RelayChain,
-  type ChainVM
-} from '@relayprotocol/relay-sdk'
-import SwapButton from '../SwapButton.js'
-import { BalanceDisplay } from '../../common/BalanceDisplay.js'
-import AmountSectionHeader from './AmountSectionHeader.js'
-import AmountModeToggle from './AmountModeToggle.js'
-import TransactionDetailsFooter from './TransactionDetailsFooter.js'
-import SectionContainer from './SectionContainer.js'
-import { WidgetErrorWell } from '../WidgetErrorWell.js'
-import { FeeBreakdownInfo } from './FeeBreakdownInfo.js'
-import { DestinationWalletSelector } from './DestinationWalletSelector.js'
-import { PercentageButtons } from '../../common/PercentageButtons.js'
-import type { PublicClient } from 'viem'
-
-type LinkNewWalletHandler = (params: {
-  chain?: RelayChain
-  direction: 'to' | 'from'
-}) => Promise<LinkedWallet> | void
-
-type SellChildrenPropsSubset = Pick<
-  ChildrenProps,
-  | 'quote'
-  | 'isFetchingQuote'
-  | 'fromTokenPriceData'
-  | 'isLoadingFromTokenPrice'
-  | 'setTradeType'
-  | 'setAmountInputValue'
-  | 'setAmountOutputValue'
-  | 'debouncedAmountInputControls'
-  | 'feeBreakdown'
-  | 'fromBalance'
-  | 'isLoadingFromBalance'
-  | 'toBalance'
-  | 'isLoadingToBalance'
-  | 'toBalancePending'
-  | 'hasInsufficientBalance'
-  | 'address'
-  | 'timeEstimate'
-  | 'fromBalancePending'
-  | 'fromChainWalletVMSupported'
-  | 'transactionModalOpen'
-  | 'isValidFromAddress'
-  | 'isValidToAddress'
-  | 'toChainWalletVMSupported'
-  | 'isInsufficientLiquidityError'
-  | 'recipientWalletSupportsChain'
-  | 'recipient'
-  | 'setCustomToAddress'
-  | 'setDestinationAddressOverride'
-  | 'isRecipientLinked'
-  | 'isSameCurrencySameRecipientSwap'
-  | 'debouncedInputAmountValue'
-  | 'debouncedOutputAmountValue'
-  | 'toDisplayName'
-  | 'error'
-  | 'relayerFeeProportion'
-  | 'highRelayerServiceFee'
-  | 'isCapacityExceededError'
-  | 'isCouldNotExecuteError'
-  | 'supportedWalletVMs'
-  | 'ctaCopy'
->
-
-type SellTabContentProps = SellChildrenPropsSubset & {
-  // Slippage configuration
-  slippageTolerance?: string
-  onOpenSlippageConfig?: () => void
-  onSlippageToleranceChange?: (value: string | undefined) => void
-
-  // Input/output state
-  isUsdInputMode: boolean
-  usdInputValue: string
-  tradeType: TradeType
-  amountInputValue: string
-  amountOutputValue: string
-  conversionRate: number | null
-  inputAmountUsd: number | null
-  toggleInputMode: () => void
-  setUsdInputValue: (value: string) => void
-  setTokenInputCache: (value: string) => void
-  setUsdOutputValue: (value: string) => void
-
-  // Tokens
-  fromToken?: Token
-  toToken?: Token
-  handleSetFromToken: (token?: Token) => void
-  handleSetToToken: (token?: Token) => void
-
-  // Wallet and address management
-  multiWalletSupportEnabled: boolean
-  linkedWallets?: LinkedWallet[]
-  onSetPrimaryWallet?: (address: string) => void
-  setOriginAddressOverride: Dispatch<SetStateAction<ChildrenProps['address']>>
-  setAddressModalOpen: Dispatch<SetStateAction<boolean>>
-  disablePasteWalletAddressOption?: boolean
-
-  // Chain configuration
-  fromChain?: RelayChain
-  toChain?: RelayChain
-  lockToToken: boolean
-  lockFromToken: boolean
-  isSingleChainLocked: boolean
-  lockChainId?: number
-  popularChainIds?: number[]
-
-  // Modal states
-  depositAddressModalOpen: boolean
-
-  // UI state and actions
-  showHighPriceImpactWarning: boolean
-  disableSwapButton?: boolean
-  percentOptions?: number[]
-  onMaxAmountClicked?: (
-    amount: bigint,
-    label: string,
-    feeBuffer?: bigint
-  ) => void
-  onPrimaryAction: () => void
-  publicClient?: PublicClient | null
-  isFromNative?: boolean
-  getFeeBufferAmount?: (
-    vmType: ChainVM | undefined | null,
-    chainId: number | undefined | null,
-    balance: bigint,
-    publicClient: PublicClient | null
-  ) => Promise<bigint>
-
-  // Event handlers
-  onAnalyticEvent?: (eventName: string, data?: any) => void
-  onConnectWallet?: () => void
-  onLinkNewWallet?: LinkNewWalletHandler
-
-  // Additional props not covered by ChildrenProps
-  recipientLinkedWallet?: LinkedWallet
-  toChainVmType?: string
-
-  // Payment method configuration
-  paymentMethodMinHeight?: string
-}
-
-const SellTabContent: FC<SellTabContentProps> = ({
-  slippageTolerance,
-  onOpenSlippageConfig,
-  onSlippageToleranceChange,
-  isUsdInputMode,
-  usdInputValue,
-  tradeType,
-  amountInputValue,
-  amountOutputValue,
-  conversionRate,
-  fromToken,
-  toToken,
-  quote,
-  isFetchingQuote,
-  inputAmountUsd,
-  fromTokenPriceData,
-  isLoadingFromTokenPrice,
-  toggleInputMode,
-  setUsdInputValue,
-  setTradeType,
-  setTokenInputCache,
-  setAmountInputValue,
-  setAmountOutputValue,
-  setUsdOutputValue,
-  debouncedAmountInputControls,
-  onAnalyticEvent,
-  feeBreakdown,
-  fromBalance,
-  isLoadingFromBalance,
-  toBalance,
-  isLoadingToBalance,
-  toBalancePending,
-  hasInsufficientBalance,
-  address,
-  timeEstimate,
-  fromBalancePending,
-  multiWalletSupportEnabled,
-  fromChainWalletVMSupported,
-  disablePasteWalletAddressOption,
-  onSetPrimaryWallet,
-  setOriginAddressOverride,
-  fromChain,
-  toChain,
-  onConnectWallet,
-  onLinkNewWallet,
-  linkedWallets,
-  setAddressModalOpen,
-  transactionModalOpen,
-  depositAddressModalOpen,
-  isValidFromAddress,
-  isValidToAddress,
-  toChainWalletVMSupported,
-  isInsufficientLiquidityError,
-  recipientWalletSupportsChain,
-  recipient,
-  setCustomToAddress,
-  setDestinationAddressOverride,
-  isRecipientLinked,
-  isSameCurrencySameRecipientSwap,
-  debouncedInputAmountValue,
-  debouncedOutputAmountValue,
-  showHighPriceImpactWarning,
-  disableSwapButton,
-  percentOptions,
-  onMaxAmountClicked,
-  publicClient,
-  isFromNative,
-  getFeeBufferAmount,
-  onPrimaryAction,
-  toDisplayName,
-  error,
-  relayerFeeProportion,
-  highRelayerServiceFee,
-  isCapacityExceededError,
-  isCouldNotExecuteError,
-  recipientLinkedWallet,
-  toChainVmType,
-  supportedWalletVMs,
-  lockToToken,
-  lockFromToken,
-  isSingleChainLocked,
-  lockChainId,
-  popularChainIds,
-  handleSetFromToken,
-  handleSetToToken,
-  ctaCopy,
-  paymentMethodMinHeight = '85vh'
-}) => {
-  const [isPaymentMethodOpen, setIsPaymentMethodOpen] = useState(false)
-  const selectedPaymentVmType = useMemo(
-    () => toChain?.vmType ?? toChainVmType,
-    [toChain, toChainVmType]
-  )
-  const recipientVmType = recipientLinkedWallet?.vmType
-
-  // Keep a ref to track the current toToken to avoid infinite loops
-  const toTokenRef = useRef(toToken)
-  toTokenRef.current = toToken
-
-  const hasAutoSelectedDestination = useRef(false)
-
-  // Auto-select the user's primary wallet as the destination for selling
-  useEffect(() => {
-    if (
-      !hasAutoSelectedDestination.current &&
-      multiWalletSupportEnabled &&
-      address &&
-      isValidFromAddress &&
-      !recipient
-    ) {
-      setDestinationAddressOverride(address)
-      hasAutoSelectedDestination.current = true
-    }
-  }, [
-    multiWalletSupportEnabled,
-    address,
-    isValidFromAddress,
-    recipient,
-    setDestinationAddressOverride
-  ])
-
-  // Smart auto-selection for destination token when selling to same wallet
-  useEffect(() => {
-    if (
-      recipient === address &&
-      fromToken &&
-      !toToken &&
-      isValidToAddress &&
-      multiWalletSupportEnabled
-    ) {
-      // let user manually select the destination token
-    }
-  }, [
-    recipient,
-    address,
-    fromToken,
-    toToken,
-    isValidToAddress,
-    multiWalletSupportEnabled
-  ])
-
-  const displayCta = [
-    'Swap',
-    'Confirm',
-    'Bridge',
-    'Send',
-    'Wrap',
-    'Unwrap'
-  ].includes(ctaCopy)
-    ? 'Sell'
-    : ctaCopy
-
-  const hasSelectedTokens = Boolean(fromToken)
-  const invalidAmount =
-    !quote ||
-    Number(debouncedInputAmountValue) === 0 ||
-    Number(debouncedOutputAmountValue) === 0 ||
-    !hasSelectedTokens
-
-  const chainIdsFilterForDestination =
-    !toChainWalletVMSupported && fromToken ? [fromToken.chainId] : undefined
-
-  const hasValidInputAmount =
-    fromToken && amountInputValue && Number(amountInputValue) > 0
-
-  const currencyOutAmountUsd = quote?.details?.currencyOut?.amountUsd
-  const currencyOutAmountFormatted =
-    quote?.details?.currencyOut?.amountFormatted
-
-  // Only show skeleton on initial load, not on subsequent fetches
-  const isLoadingOutput =
-    hasValidInputAmount && isFetchingQuote && toToken && !currencyOutAmountUsd
-
-  return (
-    <TabsContent value="sell">
-      <SectionContainer
-        className="relay-border-none md:relay-border md:relay-border-solid md:relay-border-[var(--relay-colors-slate4)]"
-        id={'sell-token-section'}
-        isPaymentMethodOpen={isPaymentMethodOpen}
-        paymentMethodMinHeight={paymentMethodMinHeight}
-      >
-        <AmountSectionHeader
-          label="Amount"
-          slippageTolerance={slippageTolerance}
-          onOpenSlippageConfig={onOpenSlippageConfig}
-          onSlippageToleranceChange={onSlippageToleranceChange}
-          onAnalyticEvent={onAnalyticEvent}
-        />
-        <Flex align="center" justify="between" className="relay-w-full">
-          <AmountInput
-            prefixSymbol={isUsdInputMode ? '$' : undefined}
-            value={
-              isUsdInputMode
-                ? usdInputValue
-                : tradeType === 'EXACT_INPUT'
-                  ? amountInputValue
-                  : amountInputValue
-                    ? formatFixedLength(amountInputValue, 8)
-                    : amountInputValue
-            }
-            setValue={(value) => {
-              if (isUsdInputMode) {
-                setUsdInputValue(value)
-                setTradeType('EXACT_INPUT')
-                setTokenInputCache('')
-                if (Number(value) === 0) {
-                  setAmountOutputValue('')
-                  setUsdOutputValue('')
-                  debouncedAmountInputControls.flush()
-                }
-              } else {
-                setAmountInputValue(value)
-                setTradeType('EXACT_INPUT')
-                if (Number(value) === 0) {
-                  setAmountOutputValue('')
-                  debouncedAmountInputControls.flush()
-                }
-              }
-            }}
-            onClick={() => {
-              onAnalyticEvent?.(EventNames.SWAP_INPUT_FOCUSED)
-            }}
-            className={cn(
-              'relay-font-bold relay-text-[32px] relay-leading-[32px] relay-py-0',
-              isFetchingQuote && tradeType === 'EXPECTED_OUTPUT'
-                ? 'relay-text-[color:var(--relay-colors-text-subtle)] placeholder:relay-text-[color:var(--relay-colors-text-subtle)]'
-                : 'relay-text-[color:var(--relay-colors-input-color)] placeholder:relay-text-[color:var(--relay-colors-input-color)]'
-            )}
-          />
-        </Flex>
-        <Flex direction="column" className="relay-gap-3 relay-w-full">
-          <Flex
-            align="center"
-            justify="between"
-            className="relay-gap-3 relay-w-full"
-          >
-            <AmountModeToggle
-              onToggle={toggleInputMode}
-              textProps={{
-                className:
-                  'relay-min-h-[18px] relay-flex relay-items-center'
-              }}
-            >
-              {isUsdInputMode
-                ? fromToken
-                  ? usdInputValue && Number(usdInputValue) > 0
-                    ? amountInputValue &&
-                      conversionRate &&
-                      !isLoadingFromTokenPrice
-                      ? `${formatNumber(amountInputValue, 4, false)} ${fromToken.symbol}`
-                      : '...'
-                    : `0 ${fromToken.symbol}`
-                  : null
-                : quote?.details?.currencyIn?.amountUsd && !isFetchingQuote
-                  ? formatDollar(Number(quote.details.currencyIn.amountUsd))
-                  : isLoadingFromTokenPrice &&
-                      amountInputValue &&
-                      Number(amountInputValue) > 0
-                    ? '...'
-                    : inputAmountUsd &&
-                        inputAmountUsd > 0 &&
-                        fromTokenPriceData?.price &&
-                        fromTokenPriceData.price > 0
-                      ? formatDollar(inputAmountUsd)
-                      : '$0.00'}
-            </AmountModeToggle>
-          </Flex>
-
-          <Flex align="center" className="relay-w-full relay-gap-3">
-            {multiWalletSupportEnabled === true ? (
-              <MultiWalletDropdown
-                context="origin"
-                selectedWalletAddress={address}
-                disablePasteWalletAddressOption={
-                  disablePasteWalletAddressOption
-                }
-                onSelect={(wallet) => {
-                  setOriginAddressOverride(wallet.address)
-                  onSetPrimaryWallet?.(wallet.address)
-                }}
-                chain={fromChain}
-                disableWalletFiltering={false}
-                onLinkNewWallet={() => {
-                  if (!address && fromChainWalletVMSupported) {
-                    onConnectWallet?.()
-                  } else {
-                    onLinkNewWallet?.({
-                      chain: fromChain,
-                      direction: 'from'
-                    })?.then((wallet) => {
-                      if (wallet) {
-                        setOriginAddressOverride(wallet.address)
-                        onSetPrimaryWallet?.(wallet.address)
-                      }
-                    })
-                  }
-                }}
-                setAddressModalOpen={setAddressModalOpen}
-                wallets={linkedWallets ?? []}
-                onAnalyticEvent={onAnalyticEvent}
-                testId="origin-wallet-select-button"
-              />
-            ) : (
-              <Box />
-            )}
-
-            <Flex
-              align="center"
-              className="relay-gap-2 relay-ml-auto relay-shrink-0"
-            >
-              {(() => {
-                const displayToken = fromToken || toToken
-                const displayBalance = fromToken
-                  ? fromBalance
-                  : toToken && recipient !== address
-                    ? fromBalance
-                    : toBalance
-                const displayBalancePending = fromToken
-                  ? fromBalancePending
-                  : toToken && recipient !== address
-                    ? fromBalancePending
-                    : toBalancePending
-                const isLoadingDisplayBalance = fromToken
-                  ? isLoadingFromBalance
-                  : toToken && recipient !== address
-                    ? isLoadingFromBalance
-                    : isLoadingToBalance
-
-                return displayToken ? (
-                  <BalanceDisplay
-                    hideBalanceLabel={false}
-                    displaySymbol={false}
-                    isLoading={isLoadingDisplayBalance}
-                    balance={displayBalance}
-                    decimals={displayToken?.decimals}
-                    symbol={displayToken?.symbol}
-                    hasInsufficientBalance={hasInsufficientBalance}
-                    isConnected={
-                      !isDeadAddress(address) &&
-                      address !== tronDeadAddress &&
-                      address !== undefined
-                    }
-                    pending={displayBalancePending}
-                    size="sm"
-                  />
-                ) : (
-                  <Flex style={{ height: 18 }} />
-                )
-              })()}
-              {/* Desktop Percentage Buttons - Hidden on Mobile */}
-              {fromBalance && fromBalance > 0n && onMaxAmountClicked ? (
-                <Box className="relay-hidden sm:relay-block">
-                  <PercentageButtons
-                    balance={fromBalance}
-                    onPercentageClick={onMaxAmountClicked}
-                    getFeeBufferAmount={getFeeBufferAmount}
-                    fromChain={fromChain}
-                    publicClient={publicClient}
-                    isFromNative={isFromNative}
-                    percentages={percentOptions}
-                    variant="desktop"
-                  />
-                </Box>
-              ) : null}
-            </Flex>
-          </Flex>
-
-          {/* Mobile Percentage Buttons - Hidden on Desktop */}
-          {fromBalance && fromBalance > 0n && onMaxAmountClicked ? (
-            <Box className="relay-block sm:relay-hidden">
-              <PercentageButtons
-                balance={fromBalance}
-                onPercentageClick={onMaxAmountClicked}
-                getFeeBufferAmount={getFeeBufferAmount}
-                fromChain={fromChain}
-                publicClient={publicClient}
-                isFromNative={isFromNative}
-                percentages={percentOptions}
-                variant="mobile"
-              />
-            </Box>
-          ) : null}
-        </Flex>
-
-        <hr className="relay-w-full relay-border-[var(--relay-colors-gray4)] relay-border-t relay-border-solid relay-border-b-0 relay-border-x-0" />
-
-        <DestinationWalletSelector
-          label="Sell to"
-          isMultiWalletEnabled={multiWalletSupportEnabled}
-          walletSupported={toChainWalletVMSupported}
-          dropdownProps={{
-            selectedWalletAddress: recipient,
-            disablePasteWalletAddressOption,
-            onSelect: (wallet) => {
-              setDestinationAddressOverride(wallet.address)
-              setCustomToAddress(undefined)
-              handleSetToToken(undefined)
-            },
-            chain: toChain,
-            disableWalletFiltering: true,
-            onLinkNewWallet: () => {
-              if (!address && toChainWalletVMSupported) {
-                onConnectWallet?.()
-              } else {
-                onLinkNewWallet?.({
-                  chain: toChain,
-                  direction: 'to'
-                })?.then((wallet) => {
-                  if (!wallet) return
-                  setDestinationAddressOverride(wallet.address)
-                  setCustomToAddress(undefined)
-                  // Always reset payment method when linking new wallets (like buy tab)
-                  handleSetToToken(undefined)
-                })
-              }
-            },
-            setAddressModalOpen,
-            wallets: linkedWallets ?? [],
-            onAnalyticEvent,
-            testId: 'destination-wallet-select-button'
-          }}
-          fallback={{
-            highlighted: Boolean(
-              isValidToAddress &&
-                multiWalletSupportEnabled &&
-                !isRecipientLinked
-            ),
-            text: !isValidToAddress
-              ? 'Enter Address'
-              : (toDisplayName ?? recipient ?? 'Select wallet'),
-            onClick: () => {
-              setDestinationAddressOverride(undefined)
-              setAddressModalOpen(true)
-              onAnalyticEvent?.(EventNames.SWAP_ADDRESS_MODAL_CLICKED)
-            },
-            showClipboard: Boolean(
-              isValidToAddress &&
-                multiWalletSupportEnabled &&
-                !isRecipientLinked
-            )
-          }}
-        />
-
-        <Flex direction="column" className="relay-gap-2 relay-w-full">
-          <Flex align="center" className="relay-w-full relay-gap-8">
-            <PaymentMethod
-              address={recipient}
-              isValidAddress={isValidToAddress}
-              token={toToken}
-              onAnalyticEvent={onAnalyticEvent}
-              multiWalletSupportEnabled={multiWalletSupportEnabled}
-              fromChainWalletVMSupported={toChainWalletVMSupported}
-              supportedWalletVMs={supportedWalletVMs}
-              popularChainIds={popularChainIds}
-              chainIdsFilter={chainIdsFilterForDestination}
-              linkedWallets={linkedWallets}
-              context="to"
-              onPaymentMethodOpenChange={setIsPaymentMethodOpen}
-              setToken={(token) => {
-                if (
-                  token?.address === fromToken?.address &&
-                  token?.chainId === fromToken?.chainId &&
-                  recipient === address
-                ) {
-                  return
-                }
-                handleSetToToken(token)
-              }}
-              trigger={
-                <div>
-                  <PaymentMethodTrigger
-                    token={toToken}
-                    address={recipient}
-                    testId="payment-method-select-button"
-                    balanceLabel="balance"
-                  />
-                </div>
-              }
-            />
-            <Flex className="relay-ml-auto">
-              <FeeBreakdownInfo
-                isLoading={Boolean(isLoadingOutput)}
-                amountUsd={currencyOutAmountUsd}
-                tokenAmountFormatted={currencyOutAmountFormatted}
-                fallbackTokenAmount={amountOutputValue}
-                quote={quote}
-                feeBreakdown={feeBreakdown}
-                token={toToken}
-              />
-            </Flex>
-          </Flex>
-          <WidgetErrorWell
-            hasInsufficientBalance={hasInsufficientBalance}
-            error={error}
-            quote={quote}
-            currency={fromToken}
-            relayerFeeProportion={relayerFeeProportion}
-            isHighRelayerServiceFee={highRelayerServiceFee}
-            isCapacityExceededError={isCapacityExceededError}
-            isCouldNotExecuteError={isCouldNotExecuteError}
-            recipientWalletSupportsChain={recipientWalletSupportsChain}
-            recipient={recipient}
-            toChainWalletVMSupported={toChainWalletVMSupported}
-            recipientLinkedWallet={recipientLinkedWallet}
-            toChainVmType={toChainVmType}
-            containerClassName="relay-w-full relay-mb-0"
-          />
-        </Flex>
-
-        <Flex className="relay-w-full">
-          <SwapButton
-            context="Sell"
-            transactionModalOpen={transactionModalOpen}
-            depositAddressModalOpen={depositAddressModalOpen}
-            showHighPriceImpactWarning={showHighPriceImpactWarning}
-            disableSwapButton={disableSwapButton}
-            tokenWidgetMode={true}
-            hasValidAmount={!invalidAmount}
-            quote={quote}
-            address={address}
-            hasInsufficientBalance={hasInsufficientBalance}
-            isInsufficientLiquidityError={isInsufficientLiquidityError}
-            debouncedInputAmountValue={debouncedInputAmountValue}
-            debouncedOutputAmountValue={debouncedOutputAmountValue}
-            isSameCurrencySameRecipientSwap={isSameCurrencySameRecipientSwap}
-            ctaCopy={displayCta}
-            isValidFromAddress={isValidFromAddress}
-            isValidToAddress={isValidToAddress}
-            fromChainWalletVMSupported={fromChainWalletVMSupported}
-            recipientWalletSupportsChain={recipientWalletSupportsChain}
-            isFetchingQuote={isFetchingQuote}
-            onClick={() => {
-              onAnalyticEvent?.('TOKEN_SELL_CLICKED', {
-                token: fromToken,
-                amount: amountInputValue
-              })
-              onPrimaryAction()
-            }}
-            onConnectWallet={onConnectWallet}
-            onAnalyticEvent={onAnalyticEvent}
-          />
-        </Flex>
-
-        <Flex className="relay-w-full" style={{ marginTop: '-8px' }}>
-          <TransactionDetailsFooter
-            timeEstimate={timeEstimate}
-            feeBreakdown={feeBreakdown}
-            quote={quote}
-          />
-        </Flex>
-      </SectionContainer>
-    </TabsContent>
-  )
-}
-
-export default SellTabContent
diff --git a/packages/ui/src/components/widgets/TokenWidget/TransactionDetailsFooter.tsx b/packages/ui/src/components/widgets/TokenWidget/TransactionDetailsFooter.tsx
deleted file mode 100644
index 0c45583e0..000000000
--- a/packages/ui/src/components/widgets/TokenWidget/TransactionDetailsFooter.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { type FC } from 'react'
-import { Flex, Box, Text } from '../../primitives/index.js'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faClock, faGasPump } from '@fortawesome/free-solid-svg-icons'
-import type { QuoteResponse } from '@relayprotocol/relay-kit-hooks'
-import type { FeeBreakdown } from '../../../types/FeeBreakdown.js'
-import { formatDollar } from '../../../utils/numbers.js'
-
-type TransactionDetailsFooterProps = {
-  timeEstimate?: { time: number; formattedTime: string }
-  feeBreakdown?: FeeBreakdown | null
-  quote?: QuoteResponse
-}
-
-const TransactionDetailsFooter: FC<TransactionDetailsFooterProps> = ({
-  timeEstimate,
-  feeBreakdown,
-  quote
-}) => {
-  const hasEstimate = timeEstimate !== undefined && (timeEstimate.time ?? 0) > 0
-  const isLongEstimate = hasEstimate && (timeEstimate?.time ?? 0) >= 600
-  const clockColor = hasEstimate
-    ? isLongEstimate
-      ? 'amber9'
-      : 'green9'
-    : 'gray9'
-
-  const timeLabel = hasEstimate ? `~${timeEstimate?.formattedTime}` : '—'
-
-  const originGas = feeBreakdown?.breakdown?.find(
-    (fee) => fee.id === 'origin-gas'
-  )
-  const networkCostUsd =
-    originGas?.usd.value ??
-    (quote?.fees?.gas?.amountUsd !== undefined
-      ? -Number(quote.fees.gas.amountUsd)
-      : undefined)
-
-  const networkCostLabel = formatDollar(
-    networkCostUsd !== undefined ? Math.abs(networkCostUsd) : undefined
-  )
-
-  const hasNetworkCost =
-    networkCostUsd !== undefined && networkCostLabel !== '-'
-  const showDivider = timeEstimate && timeEstimate.time !== 0 && hasNetworkCost
-
-  return (
-    <Flex justify="center" align="center" className="relay-gap-[6px] relay-w-full">
-      {timeEstimate && timeEstimate.time !== 0 ? (
-        <>
-          <Flex align="center" className="relay-gap-2">
-            <Box
-              className={`relay-w-[14px] relay-h-[14px] relay-flex relay-items-center relay-justify-center relay-text-[color:var(--relay-colors-${clockColor})]`}
-            >
-              <FontAwesomeIcon icon={faClock} />
-            </Box>
-            <Text style="subtitle3" className="relay-leading-normal">
-              {timeLabel}
-            </Text>
-          </Flex>
-          {showDivider ? (
-            <Flex
-              justify="center"
-              align="center"
-              className="relay-text-[color:var(--relay-colors-gray6)] relay-h-[4px]"
-            >
-              &#8226;
-            </Flex>
-          ) : null}
-        </>
-      ) : null}
-      {hasNetworkCost ? (
-        <Flex align="center" className="relay-gap-2">
-          <Box className="relay-text-[color:var(--relay-colors-gray9)] relay-w-[14px] relay-h-[14px] relay-flex relay-items-center relay-justify-center">
-            <FontAwesomeIcon icon={faGasPump} />
-          </Box>
-          <Text style="subtitle3" className="relay-leading-normal">
-            {networkCostLabel}
-          </Text>
-        </Flex>
-      ) : null}
-    </Flex>
-  )
-}
-
-export default TransactionDetailsFooter
diff --git a/packages/ui/src/components/widgets/TokenWidget/hooks/useWalletGuards.ts b/packages/ui/src/components/widgets/TokenWidget/hooks/useWalletGuards.ts
deleted file mode 100644
index dd096852e..000000000
--- a/packages/ui/src/components/widgets/TokenWidget/hooks/useWalletGuards.ts
+++ /dev/null
@@ -1,190 +0,0 @@
-import { useEffect } from 'react'
-import type { Dispatch, SetStateAction } from 'react'
-import type { RelayChain } from '@relayprotocol/relay-sdk'
-import type { LinkedWallet } from '../../../../types/index.js'
-import type { RelayKitProviderProps } from '../../../../providers/RelayKitProvider.js'
-import {
-  addressesEqual,
-  findSupportedWallet
-} from '../../../../utils/address.js'
-
-type Params = {
-  multiWalletSupportEnabled: boolean
-  allowUnsupportedOrigin: boolean
-  allowUnsupportedRecipient: boolean
-  fromChain?: RelayChain
-  toChain?: RelayChain
-  address?: string
-  recipient?: string
-  linkedWallets?: LinkedWallet[]
-  connectorKeyOverrides?: RelayKitProviderProps['options']['vmConnectorKeyOverrides']
-  onSetPrimaryWallet?: (address: string) => void
-  isValidFromAddress: boolean
-  isValidToAddress: boolean
-  setOriginAddressOverride: Dispatch<SetStateAction<string | undefined>>
-  setCustomToAddress: Dispatch<SetStateAction<string | undefined>>
-  disablePasteWalletAddressOption?: boolean
-  customToAddress?: string
-  originAddressOverride?: string
-  destinationAddressOverride?: string
-  setDestinationAddressOverride: Dispatch<SetStateAction<string | undefined>>
-}
-
-export const useWalletGuards = ({
-  multiWalletSupportEnabled,
-  allowUnsupportedOrigin,
-  allowUnsupportedRecipient,
-  fromChain,
-  toChain,
-  address,
-  recipient,
-  linkedWallets,
-  connectorKeyOverrides,
-  onSetPrimaryWallet,
-  isValidFromAddress,
-  isValidToAddress,
-  setOriginAddressOverride,
-  setCustomToAddress,
-  disablePasteWalletAddressOption,
-  customToAddress,
-  originAddressOverride,
-  destinationAddressOverride,
-  setDestinationAddressOverride
-}: Params) => {
-  useEffect(() => {
-    if (
-      !allowUnsupportedOrigin &&
-      multiWalletSupportEnabled &&
-      fromChain &&
-      address &&
-      linkedWallets &&
-      !isValidFromAddress
-    ) {
-      const supportedAddress = findSupportedWallet(
-        fromChain,
-        address,
-        linkedWallets,
-        connectorKeyOverrides
-      )
-      if (supportedAddress) {
-        setOriginAddressOverride(undefined)
-        onSetPrimaryWallet?.(supportedAddress)
-      }
-    }
-
-    if (
-      !allowUnsupportedRecipient &&
-      multiWalletSupportEnabled &&
-      toChain &&
-      recipient &&
-      linkedWallets &&
-      !isValidToAddress
-    ) {
-      const supportedAddress = findSupportedWallet(
-        toChain,
-        recipient,
-        linkedWallets,
-        connectorKeyOverrides
-      )
-      if (supportedAddress) {
-        setCustomToAddress(supportedAddress)
-      } else {
-        setCustomToAddress(undefined)
-      }
-    }
-  }, [
-    allowUnsupportedOrigin,
-    allowUnsupportedRecipient,
-    multiWalletSupportEnabled,
-    fromChain?.id,
-    toChain?.id,
-    address,
-    recipient,
-    linkedWallets,
-    onSetPrimaryWallet,
-    isValidFromAddress,
-    isValidToAddress,
-    connectorKeyOverrides,
-    setOriginAddressOverride,
-    setCustomToAddress
-  ])
-
-  useEffect(() => {
-    if (!disablePasteWalletAddressOption || !customToAddress) {
-      return
-    }
-
-    const isLinkedWallet = linkedWallets?.some((wallet) =>
-      addressesEqual(wallet.vmType, wallet.address, customToAddress)
-    )
-
-    if (!isLinkedWallet) {
-      setCustomToAddress(undefined)
-    }
-  }, [
-    disablePasteWalletAddressOption,
-    customToAddress,
-    linkedWallets,
-    setCustomToAddress
-  ])
-
-  useEffect(() => {
-    if (
-      destinationAddressOverride &&
-      customToAddress &&
-      destinationAddressOverride !== customToAddress
-    ) {
-      setDestinationAddressOverride(undefined)
-    }
-  }, [
-    destinationAddressOverride,
-    customToAddress,
-    setDestinationAddressOverride
-  ])
-
-  useEffect(() => {
-    if (!multiWalletSupportEnabled) {
-      if (originAddressOverride !== undefined) {
-        setOriginAddressOverride(undefined)
-      }
-      if (destinationAddressOverride !== undefined) {
-        setDestinationAddressOverride(undefined)
-      }
-      return
-    }
-
-    if (originAddressOverride) {
-      const originExists = linkedWallets?.some((wallet) =>
-        addressesEqual(wallet.vmType, wallet.address, originAddressOverride)
-      )
-
-      if (!originExists) {
-        setOriginAddressOverride(undefined)
-      }
-    }
-
-    if (destinationAddressOverride) {
-      const destinationMatches = linkedWallets?.some((wallet) =>
-        addressesEqual(
-          wallet.vmType,
-          wallet.address,
-          destinationAddressOverride
-        )
-      )
-
-      if (!destinationMatches) {
-        setDestinationAddressOverride(undefined)
-      }
-    }
-  }, [
-    multiWalletSupportEnabled,
-    linkedWallets,
-    originAddressOverride,
-    destinationAddressOverride,
-    setOriginAddressOverride,
-    setDestinationAddressOverride,
-    allowUnsupportedOrigin
-  ])
-}
-
-export type { Params as UseWalletGuardsParams }
diff --git a/packages/ui/src/components/widgets/TokenWidget/index.ts b/packages/ui/src/components/widgets/TokenWidget/index.ts
deleted file mode 100644
index d981eeb9f..000000000
--- a/packages/ui/src/components/widgets/TokenWidget/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as TokenWidget } from './widget/index.js'
-export type { TokenWidgetProps } from './widget/index.js'
\ No newline at end of file
diff --git a/packages/ui/src/components/widgets/TokenWidget/widget/TokenWidgetRenderer.tsx b/packages/ui/src/components/widgets/TokenWidget/widget/TokenWidgetRenderer.tsx
deleted file mode 100644
index 617b7b00b..000000000
--- a/packages/ui/src/components/widgets/TokenWidget/widget/TokenWidgetRenderer.tsx
+++ /dev/null
@@ -1,1244 +0,0 @@
-import type { Dispatch, FC, ReactNode, SetStateAction } from 'react'
-import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
-import {
-  useCurrencyBalance,
-  useRelayClient,
-  useDebounceState,
-  useWalletAddress,
-  useDisconnected,
-  usePreviousValueChange,
-  useIsWalletCompatible,
-  useFallbackState,
-  useDisplayName,
-  useLighterAccount,
-  useExplicitDeposit
-} from '../../../../hooks/index.js'
-import type { Address, WalletClient } from 'viem'
-import { formatUnits, parseUnits } from 'viem'
-import { useAccount, useWalletClient } from 'wagmi'
-import { useCapabilities } from 'wagmi/experimental'
-import type { Token } from '../../../../types/index.js'
-import { useQueryClient } from '@tanstack/react-query'
-import type { ChainVM, Execute } from '@relayprotocol/relay-sdk'
-import {
-  calculatePriceTimeEstimate,
-  calculateRelayerFeeProportionUsd,
-  extractQuoteId,
-  getCurrentStep,
-  getSwapEventData,
-  isHighRelayerServiceFeeUsd,
-  parseFees
-} from '../../../../utils/quote.js'
-import { useQuote, useTokenPrice } from '@relayprotocol/relay-kit-hooks'
-import { EventNames } from '../../../../constants/events.js'
-import { ProviderOptionsContext } from '../../../../providers/RelayKitProvider.js'
-import type { DebouncedState } from 'usehooks-ts'
-import type { AdaptedWallet } from '@relayprotocol/relay-sdk'
-import type { LinkedWallet } from '../../../../types/index.js'
-import {
-  addressesEqual,
-  addressWithFallback,
-  isValidAddress,
-  isChainVmTypeSupported,
-  isWalletVmTypeCompatible
-} from '../../../../utils/address.js'
-import { adaptViemWallet } from '@relayprotocol/relay-sdk'
-import { errorToJSON } from '../../../../utils/errors.js'
-import { useSwapButtonCta } from '../../../../hooks/widget/useSwapButtonCta.js'
-import { sha256 } from '../../../../utils/hashing.js'
-import { get15MinuteInterval } from '../../../../utils/time.js'
-import { isLighterAddress } from '../../../../utils/lighter.js'
-import type { FeeBreakdown } from '../../../../types/FeeBreakdown.js'
-
-export type TradeType = 'EXACT_INPUT' | 'EXPECTED_OUTPUT'
-
-type TokenWidgetRendererProps = {
-  transactionModalOpen: boolean
-  setTransactionModalOpen: React.Dispatch<React.SetStateAction<boolean>>
-  depositAddressModalOpen: boolean
-  children: (props: ChildrenProps) => ReactNode
-  fromToken?: Token
-  setFromToken?: (token?: Token) => void
-  toToken?: Token
-  setToToken?: (token?: Token) => void
-  defaultToAddress?: Address
-  defaultAmount?: string
-  defaultTradeType?: TradeType
-  slippageTolerance?: string
-  context: 'Swap' | 'Deposit' | 'Withdraw'
-  wallet?: AdaptedWallet
-  linkedWallets?: LinkedWallet[]
-  multiWalletSupportEnabled?: boolean
-  supportedWalletVMs: Omit<ChainVM, 'hypevm' | 'lvm'>[]
-  onConnectWallet?: () => void
-  onAnalyticEvent?: (eventName: string, data?: any) => void
-  onSwapError?: (error: string, data?: Execute) => void
-  useSecureBaseUrl?: (parameters: Parameters<typeof useQuote>['2']) => boolean
-}
-
-export type ChildrenProps = {
-  quote?: ReturnType<typeof useQuote>['data']
-  steps: Execute['steps'] | null
-  setSteps: Dispatch<React.SetStateAction<Execute['steps'] | null>>
-  swap: () => void
-  transactionModalOpen: boolean
-  details: null | Execute['details']
-  feeBreakdown: FeeBreakdown | null
-  fromToken?: Token
-  setFromToken: Dispatch<React.SetStateAction<Token | undefined>>
-  toToken?: Token
-  setToToken: Dispatch<React.SetStateAction<Token | undefined>>
-  swapError: Error | null
-  error: Error | null
-  toDisplayName?: string
-  address?: Address | string
-  originAddressOverride?: Address | string
-  setOriginAddressOverride: Dispatch<
-    React.SetStateAction<Address | string | undefined>
-  >
-  recipient?: Address | string
-  destinationAddressOverride?: Address | string
-  customToAddress?: Address | string
-  setCustomToAddress: Dispatch<
-    React.SetStateAction<Address | string | undefined>
-  >
-  setDestinationAddressOverride: Dispatch<
-    React.SetStateAction<Address | string | undefined>
-  >
-  tradeType: TradeType
-  setTradeType: Dispatch<React.SetStateAction<TradeType>>
-  isSameCurrencySameRecipientSwap: boolean
-  allowUnsupportedOrigin: boolean
-  setAllowUnsupportedOrigin: Dispatch<React.SetStateAction<boolean>>
-  allowUnsupportedRecipient: boolean
-  setAllowUnsupportedRecipient: Dispatch<React.SetStateAction<boolean>>
-  amountInputValue: string
-  debouncedInputAmountValue: string
-  setAmountInputValue: (value: string) => void
-  debouncedAmountInputControls: DebouncedState<(value: string) => void>
-  amountOutputValue: string
-  debouncedOutputAmountValue: string
-  setAmountOutputValue: (value: string) => void
-  debouncedAmountOutputControls: DebouncedState<(value: string) => void>
-  toBalance?: bigint
-  toBalancePending?: boolean
-  fromBalance?: bigint
-  fromBalancePending?: boolean
-  isFetchingQuote: boolean
-  isLoadingToBalance: boolean
-  isLoadingFromBalance: boolean
-  highRelayerServiceFee: boolean
-  relayerFeeProportion: bigint
-  hasInsufficientBalance: boolean
-  isInsufficientLiquidityError?: boolean
-  isCapacityExceededError?: boolean
-  isCouldNotExecuteError?: boolean
-  ctaCopy: string
-  isFromNative: boolean
-  slippageTolerance?: string
-  timeEstimate?: { time: number; formattedTime: string }
-  isSvmSwap: boolean
-  isBvmSwap: boolean
-  isValidFromAddress: boolean
-  isValidToAddress: boolean
-  supportedWalletVMs: Omit<ChainVM, 'hypevm' | 'lvm'>[]
-  fromChainWalletVMSupported: boolean
-  toChainWalletVMSupported: boolean
-  isRecipientLinked?: boolean
-  recipientWalletSupportsChain?: boolean
-  quoteInProgress: null | Execute
-  setQuoteInProgress: Dispatch<React.SetStateAction<null | Execute>>
-  linkedWallet?: LinkedWallet
-  quoteParameters?: Parameters<typeof useQuote>['2']
-  invalidateBalanceQueries: () => void
-  invalidateQuoteQuery: () => void
-  setDetails: Dispatch<React.SetStateAction<Execute['details'] | null>>
-  setSwapError: Dispatch<React.SetStateAction<Error | null>>
-  abortController: AbortController | null
-  fromTokenPriceData: ReturnType<typeof useTokenPrice>['data']
-  isLoadingFromTokenPrice: boolean
-  toTokenPriceData: ReturnType<typeof useTokenPrice>['data']
-  isLoadingToTokenPrice: boolean
-}
-
-// shared query options for useTokenPrice
-const tokenPriceQueryOptions = {
-  staleTime: 60 * 1000, // 1 minute
-  refetchInterval: 30 * 1000, // 30 seconds
-  refetchOnWindowFocus: false
-}
-
-const TokenWidgetRenderer: FC<TokenWidgetRendererProps> = ({
-  transactionModalOpen,
-  setTransactionModalOpen,
-  depositAddressModalOpen,
-  fromToken: _fromToken,
-  setFromToken: _setFromToken,
-  toToken: _toToken,
-  setToToken: _setToToken,
-  defaultToAddress,
-  defaultAmount,
-  defaultTradeType,
-  slippageTolerance,
-  context,
-  wallet,
-  multiWalletSupportEnabled = false,
-  linkedWallets,
-  supportedWalletVMs,
-  useSecureBaseUrl,
-  children,
-  onAnalyticEvent,
-  onSwapError
-}) => {
-  const [fromToken, setFromToken] = useFallbackState(
-    _setFromToken ? _fromToken : undefined,
-    _setFromToken
-      ? [
-          _fromToken,
-          _setFromToken as Dispatch<SetStateAction<Token | undefined>>
-        ]
-      : undefined
-  )
-  const [toToken, setToToken] = useFallbackState(
-    _setToToken ? _toToken : undefined,
-    _setToToken
-      ? [_toToken, _setToToken as Dispatch<SetStateAction<Token | undefined>>]
-      : undefined
-  )
-  const providerOptionsContext = useContext(ProviderOptionsContext)
-  const connectorKeyOverrides = providerOptionsContext.vmConnectorKeyOverrides
-  const relayClient = useRelayClient()
-  const { connector } = useAccount()
-  const walletClient = useWalletClient()
-  const [customToAddress, setCustomToAddress] = useState<
-    Address | string | undefined
-  >(defaultToAddress)
-  const [destinationAddressOverride, setDestinationAddressOverride] = useState<
-    Address | string | undefined
-  >(undefined)
-  const [originAddressOverride, setOriginAddressOverride] = useState<
-    Address | string | undefined
-  >(undefined)
-  const [allowUnsupportedOrigin, setAllowUnsupportedOrigin] =
-    useState<boolean>(false)
-  const [allowUnsupportedRecipient, setAllowUnsupportedRecipient] =
-    useState<boolean>(false)
-  const defaultAddress = useWalletAddress(wallet, linkedWallets)
-
-  const [tradeType, setTradeType] = useState<'EXACT_INPUT' | 'EXPECTED_OUTPUT'>(
-    defaultTradeType ?? 'EXACT_INPUT'
-  )
-  const queryClient = useQueryClient()
-  const [steps, setSteps] = useState<null | Execute['steps']>(null)
-  const [quoteInProgress, setQuoteInProgress] = useState<null | Execute>(null)
-  const [waitingForSteps, setWaitingForSteps] = useState(false)
-  const [details, setDetails] = useState<null | Execute['details']>(null)
-  const [abortController, setAbortController] =
-    useState<AbortController | null>(null)
-
-  const {
-    value: amountInputValue,
-    debouncedValue: debouncedInputAmountValue,
-    setValue: setAmountInputValue,
-    debouncedControls: debouncedAmountInputControls
-  } = useDebounceState<string>(
-    !defaultTradeType || defaultTradeType === 'EXACT_INPUT'
-      ? (defaultAmount ?? '')
-      : '',
-    500
-  )
-  const {
-    value: amountOutputValue,
-    debouncedValue: debouncedOutputAmountValue,
-    setValue: setAmountOutputValue,
-    debouncedControls: debouncedAmountOutputControls
-  } = useDebounceState<string>(
-    defaultTradeType === 'EXPECTED_OUTPUT' ? (defaultAmount ?? '') : '',
-    500
-  )
-
-  const [swapError, setSwapError] = useState<Error | null>(null)
-
-  const toChain = useMemo(
-    () => relayClient?.chains?.find((chain) => chain.id === toToken?.chainId),
-    [relayClient?.chains, toToken?.chainId]
-  )
-
-  const fromChain = useMemo(
-    () => relayClient?.chains?.find((chain) => chain.id === fromToken?.chainId),
-    [relayClient?.chains, fromToken?.chainId]
-  )
-
-  const fromChainWalletVMSupported = useMemo(
-    () =>
-      isChainVmTypeSupported(fromChain?.vmType, supportedWalletVMs) ||
-      fromChain?.id === 1337,
-    [fromChain?.vmType, fromChain?.id, supportedWalletVMs]
-  )
-
-  const toChainWalletVMSupported = useMemo(
-    () => isChainVmTypeSupported(toChain?.vmType, supportedWalletVMs),
-    [toChain?.vmType, supportedWalletVMs]
-  )
-
-  // Automatically select the correct wallet address based on fromToken's chain VM
-  // In sell mode (no fromChain), use toChain to find compatible wallet
-  const address = useMemo(() => {
-    if (!multiWalletSupportEnabled || !linkedWallets?.length) {
-      return defaultAddress
-    }
-
-    if (originAddressOverride) {
-      return originAddressOverride
-    }
-
-    const targetChain = fromChain || toChain
-    if (!targetChain) {
-      return defaultAddress
-    }
-
-    const isCompatibleWallet = (wallet: LinkedWallet) =>
-      isWalletVmTypeCompatible(wallet.vmType, targetChain.vmType) &&
-      isValidAddress(
-        targetChain.vmType,
-        wallet.address,
-        targetChain.id,
-        wallet.connector,
-        connectorKeyOverrides
-      )
-
-    const activeLinkedWallet = linkedWallets.find((wallet) =>
-      addressesEqual(wallet.vmType, wallet.address, defaultAddress)
-    )
-
-    if (activeLinkedWallet && isCompatibleWallet(activeLinkedWallet)) {
-      return activeLinkedWallet.address
-    }
-
-    const compatibleWallet = linkedWallets.find(isCompatibleWallet)
-
-    return compatibleWallet?.address || defaultAddress
-  }, [
-    multiWalletSupportEnabled,
-    originAddressOverride,
-    fromChain,
-    toChain,
-    linkedWallets,
-    defaultAddress,
-    connectorKeyOverrides
-  ])
-
-  const defaultRecipient = useMemo(() => {
-    const _linkedWallet = linkedWallets?.find(
-      (linkedWallet) =>
-        address ===
-        (linkedWallet.vmType === 'evm'
-          ? linkedWallet.address.toLowerCase()
-          : linkedWallet.address)
-    )
-    const _isValidToAddress = isValidAddress(
-      toChain?.vmType,
-      customToAddress ?? '',
-      toChain?.id,
-      !customToAddress && _linkedWallet?.address === address
-        ? _linkedWallet?.connector
-        : undefined,
-      connectorKeyOverrides
-    )
-
-    if (
-      multiWalletSupportEnabled &&
-      toChain &&
-      linkedWallets &&
-      !_isValidToAddress
-    ) {
-      // Find a compatible wallet, excluding the origin wallet
-      const supportedWallet = linkedWallets.find(
-        (wallet) =>
-          wallet.address !== address &&
-          isValidAddress(
-            toChain.vmType,
-            wallet.address,
-            toChain.id,
-            wallet.connector,
-            connectorKeyOverrides
-          )
-      )
-
-      return supportedWallet?.address
-    }
-
-    return undefined
-  }, [
-    multiWalletSupportEnabled,
-    toChain,
-    customToAddress,
-    address,
-    linkedWallets,
-    setCustomToAddress,
-    connectorKeyOverrides
-  ])
-
-  const recipient =
-    destinationAddressOverride ??
-    customToAddress ??
-    defaultRecipient ??
-    (!allowUnsupportedRecipient && address ? address : undefined)
-
-  const {
-    value: fromBalance,
-    queryKey: fromBalanceQueryKey,
-    isLoading: isLoadingFromBalance,
-    isError: fromBalanceErrorFetching,
-    isDuneBalance: fromBalanceIsDune,
-    hasPendingBalance: fromBalancePending
-  } = useCurrencyBalance({
-    chain: fromChain,
-    address: address,
-    currency: fromToken?.address ? (fromToken.address as Address) : undefined,
-    enabled: fromToken !== undefined,
-    refreshInterval: undefined,
-    wallet
-  })
-
-  const {
-    value: toBalance,
-    queryKey: toBalanceQueryKey,
-    isLoading: isLoadingToBalance,
-    isDuneBalance: toBalanceIsDune,
-    hasPendingBalance: toBalancePending
-  } = useCurrencyBalance({
-    chain: toChain,
-    address: recipient,
-    currency: toToken?.address ? (toToken.address as Address) : undefined,
-    enabled:
-      toToken !== undefined && recipient !== undefined && recipient !== '',
-    refreshInterval: undefined,
-    wallet
-  })
-
-  const invalidateBalanceQueries = useCallback(() => {
-    const invalidatePeriodically = (invalidateFn: () => void) => {
-      let maxRefreshes = 4
-      let refreshCount = 0
-      const timer = setInterval(() => {
-        if (maxRefreshes === refreshCount) {
-          clearInterval(timer)
-          return
-        }
-        refreshCount++
-        invalidateFn()
-      }, 3000)
-    }
-
-    queryClient.invalidateQueries({ queryKey: ['useDuneBalances'] })
-
-    // Dune balances are sometimes stale, because of this we need to aggressively fetch them
-    // for a predetermined period to make sure we get back a fresh response
-    if (fromBalanceIsDune) {
-      invalidatePeriodically(() => {
-        queryClient.invalidateQueries({ queryKey: fromBalanceQueryKey })
-      })
-    } else {
-      queryClient.invalidateQueries({ queryKey: fromBalanceQueryKey })
-    }
-    if (toBalanceIsDune) {
-      invalidatePeriodically(() => {
-        queryClient.invalidateQueries({ queryKey: toBalanceQueryKey })
-      })
-    } else {
-      queryClient.invalidateQueries({ queryKey: toBalanceQueryKey })
-    }
-  }, [
-    queryClient,
-    fromBalanceQueryKey,
-    toBalanceQueryKey,
-    toBalanceIsDune,
-    fromBalanceIsDune,
-    address
-  ])
-  const { data: capabilities } = useCapabilities({
-    query: {
-      enabled:
-        connector &&
-        (connector.id === 'coinbaseWalletSDK' || connector.id === 'coinbase')
-    }
-  })
-  const hasAuxiliaryFundsSupport = Boolean(
-    fromToken?.chainId
-      ? capabilities?.[fromToken?.chainId]?.auxiliaryFunds?.supported
-      : false
-  )
-
-  const isSvmSwap = fromChain?.vmType === 'svm' || toChain?.vmType === 'svm'
-  const isBvmSwap = fromChain?.vmType === 'bvm' || toChain?.vmType === 'bvm'
-  const linkedWallet = linkedWallets?.find(
-    (linkedWallet) =>
-      address ===
-        (linkedWallet.vmType === 'evm'
-          ? linkedWallet.address.toLowerCase()
-          : linkedWallet.address) || linkedWallet.address === address
-  )
-
-  const isRecipientLinked =
-    (recipient
-      ? linkedWallets?.find((wallet) => wallet.address === recipient)
-      : undefined) !== undefined
-
-  const isValidFromAddress = useMemo(
-    () =>
-      isValidAddress(
-        fromChain?.vmType,
-        address ?? '',
-        fromChain?.id,
-        linkedWallet?.connector,
-        connectorKeyOverrides
-      ),
-    [
-      fromChain?.vmType,
-      address,
-      fromChain?.id,
-      linkedWallet?.connector,
-      connectorKeyOverrides
-    ]
-  )
-  const fromAddressWithFallback = addressWithFallback(
-    fromChain?.vmType,
-    address,
-    fromChain?.id,
-    linkedWallet?.connector,
-    connectorKeyOverrides
-  )
-
-  const isValidToAddress = useMemo(
-    () => isValidAddress(toChain?.vmType, recipient ?? '', toChain?.id),
-    [toChain?.vmType, recipient, toChain?.id]
-  )
-
-  const toAddressWithFallback = addressWithFallback(
-    toChain?.vmType,
-    recipient,
-    toChain?.id
-  )
-
-  const { displayName: toDisplayName } = useDisplayName(
-    recipient,
-    toChain?.vmType,
-    toChain?.id
-  )
-
-  const [currentSlippageTolerance, setCurrentSlippageTolerance] = useState<
-    string | undefined
-  >(slippageTolerance)
-
-  useEffect(() => {
-    setCurrentSlippageTolerance(slippageTolerance)
-  }, [slippageTolerance])
-
-  //  Retrieve the price of the `from` token
-  const { data: fromTokenPriceData, isLoading: isLoadingFromTokenPrice } =
-    useTokenPrice(
-      relayClient?.baseApiUrl,
-      {
-        address: fromToken?.address ?? '',
-        chainId: fromToken?.chainId ?? 0,
-        referrer: relayClient?.source
-      },
-      {
-        enabled: !!(fromToken?.address && fromToken.chainId),
-        ...tokenPriceQueryOptions
-      }
-    )
-
-  // Retrieve the price of the `to` token
-  const { data: toTokenPriceData, isLoading: isLoadingToTokenPrice } =
-    useTokenPrice(
-      relayClient?.baseApiUrl,
-      {
-        address: toToken?.address ?? '',
-        chainId: toToken?.chainId ?? 0,
-        referrer: relayClient?.source
-      },
-      {
-        enabled: !!(toToken?.address && toToken.chainId),
-        ...tokenPriceQueryOptions
-      }
-    )
-
-  const isFromNative = fromToken?.address === fromChain?.currency?.address
-
-  const explicitDeposit = useExplicitDeposit(
-    wallet,
-    fromToken?.chainId,
-    fromChain?.vmType,
-    address
-  )
-
-  const shouldSetQuoteParameters = fromToken && toToken
-
-  const quoteParameters: Parameters<typeof useQuote>['2'] =
-    shouldSetQuoteParameters
-      ? {
-          user: fromAddressWithFallback,
-          originChainId: fromToken.chainId,
-          destinationChainId: toToken.chainId,
-          originCurrency: fromToken.address,
-          destinationCurrency: toToken.address,
-          recipient: toAddressWithFallback,
-          tradeType,
-          appFees: providerOptionsContext.appFees,
-          amount:
-            tradeType === 'EXACT_INPUT'
-              ? parseUnits(
-                  debouncedInputAmountValue,
-                  fromToken.decimals
-                ).toString()
-              : parseUnits(
-                  debouncedOutputAmountValue,
-                  toToken.decimals
-                ).toString(),
-          referrer: relayClient?.source ?? undefined,
-          useDepositAddress:
-            !fromChainWalletVMSupported || fromToken?.chainId === 1337,
-          refundTo: fromToken?.chainId === 1337 ? address : undefined,
-          slippageTolerance: slippageTolerance,
-          ...(linkedWallet?.vmType === 'bvm' && wallet?.metadata?.publicKey
-            ? {
-                additionalData: {
-                  userPublicKey: wallet?.metadata?.publicKey
-                }
-              }
-            : {}),
-          ...(explicitDeposit !== undefined &&
-            fromChain?.vmType === 'evm' && {
-              explicitDeposit: explicitDeposit
-            })
-        }
-      : undefined
-
-  const onQuoteRequested: Parameters<typeof useQuote>['3'] = (
-    options,
-    config
-  ) => {
-    const interval = get15MinuteInterval()
-    const quoteRequestId = sha256({ ...options, interval })
-    onAnalyticEvent?.(EventNames.QUOTE_REQUESTED, {
-      parameters: options,
-      wallet_connector: linkedWallet?.connector,
-      chain_id_in: options?.originChainId,
-      chain_id_out: options?.destinationChainId,
-      http_config: config,
-      quote_request_id: quoteRequestId
-    })
-  }
-
-  const onQuoteReceived: Parameters<typeof useQuote>['4'] = (
-    { details, steps },
-    options
-  ) => {
-    const interval = get15MinuteInterval()
-    const quoteRequestId = sha256({ ...options, interval })
-    onAnalyticEvent?.(EventNames.QUOTE_RECEIVED, {
-      parameters: options,
-      wallet_connector: linkedWallet?.connector,
-      amount_in: details?.currencyIn?.amountFormatted,
-      amount_in_raw: details?.currencyIn?.amount,
-      currency_in: details?.currencyIn?.currency?.symbol,
-      chain_id_in: details?.currencyIn?.currency?.chainId,
-      amount_out: details?.currencyOut?.amountFormatted,
-      amount_out_raw: details?.currencyOut?.amount,
-      currency_out: details?.currencyOut?.currency?.symbol,
-      chain_id_out: details?.currencyOut?.currency?.chainId,
-      slippage_tolerance_destination_percentage:
-        details?.slippageTolerance?.destination?.percent,
-      slippage_tolerance_origin_percentage:
-        details?.slippageTolerance?.origin?.percent,
-      steps,
-      quote_request_id: quoteRequestId,
-      quote_id: steps ? extractQuoteId(steps) : undefined
-    })
-  }
-
-  const quoteFetchingEnabled = Boolean(
-    relayClient &&
-      ((tradeType === 'EXACT_INPUT' &&
-        debouncedInputAmountValue &&
-        debouncedInputAmountValue.length > 0 &&
-        Number(debouncedInputAmountValue) !== 0) ||
-        (tradeType === 'EXPECTED_OUTPUT' &&
-          debouncedOutputAmountValue &&
-          debouncedOutputAmountValue.length > 0 &&
-          Number(debouncedOutputAmountValue) !== 0)) &&
-      fromToken !== undefined &&
-      toToken !== undefined &&
-      !transactionModalOpen &&
-      !depositAddressModalOpen
-  )
-
-  const quoteRefetchInterval =
-    !transactionModalOpen &&
-    !depositAddressModalOpen &&
-    debouncedInputAmountValue === amountInputValue &&
-    debouncedOutputAmountValue === amountOutputValue
-      ? 12000
-      : undefined
-
-  const handleQuoteError = (e: any) => {
-    const errorMessage = errorToJSON(
-      e?.response?.data?.message ? new Error(e?.response?.data?.message) : e
-    )
-    const interval = get15MinuteInterval()
-    const quoteRequestId = sha256({ ...quoteParameters, interval })
-    onAnalyticEvent?.(EventNames.QUOTE_ERROR, {
-      wallet_connector: linkedWallet?.connector,
-      error_message: errorMessage,
-      parameters: quoteParameters,
-      quote_request_id: quoteRequestId,
-      status_code: e.response.status ?? e.status ?? ''
-    })
-  }
-
-  const {
-    data: quote,
-    error: quoteError,
-    isFetching: isFetchingQuote,
-    executeQuote: executeSwap,
-    queryKey: quoteQueryKey
-  } = useQuote(
-    relayClient ? relayClient : undefined,
-    wallet,
-    quoteParameters,
-    onQuoteRequested,
-    onQuoteReceived,
-    {
-      refetchOnWindowFocus: false,
-      enabled: Boolean(quoteFetchingEnabled && quoteParameters !== undefined),
-      refetchInterval: quoteRefetchInterval
-    },
-    handleQuoteError,
-    undefined,
-    useSecureBaseUrl?.(quoteParameters)
-      ? providerOptionsContext?.secureBaseUrl
-      : undefined
-  )
-
-  const invalidateQuoteQuery = useCallback(() => {
-    queryClient.invalidateQueries({ queryKey: quoteQueryKey })
-  }, [queryClient, quoteQueryKey])
-
-  const derivedError =
-    quote ||
-    (isFetchingQuote &&
-      Boolean(quoteFetchingEnabled && quoteParameters !== undefined))
-      ? null
-      : quoteError
-  const error = derivedError
-
-  useDisconnected(address, () => {
-    setCustomToAddress(undefined)
-    setOriginAddressOverride(undefined)
-    setDestinationAddressOverride(undefined)
-  })
-
-  // Auto-select Lighter account when switching to LVM chain
-  const isLighterChain = toChain?.vmType === 'lvm'
-  const { data: connectedLighterAccount } = useLighterAccount(
-    isLighterChain && address ? address : undefined
-  )
-
-  useEffect(() => {
-    if (
-      isLighterChain &&
-      connectedLighterAccount?.index &&
-      // Only auto-set if no valid Lighter address is already set
-      (!customToAddress || !isLighterAddress(customToAddress))
-    ) {
-      setCustomToAddress(connectedLighterAccount.index.toString())
-    }
-  }, [isLighterChain, connectedLighterAccount, customToAddress])
-
-  useEffect(() => {
-    if (tradeType === 'EXACT_INPUT') {
-      const amountOut = quote?.details?.currencyOut?.amount ?? ''
-      setAmountOutputValue(
-        amountOut !== ''
-          ? formatUnits(
-              BigInt(amountOut),
-              Number(quote?.details?.currencyOut?.currency?.decimals ?? 18)
-            )
-          : ''
-      )
-    } else if (tradeType === 'EXPECTED_OUTPUT') {
-      const amountIn = quote?.details?.currencyIn?.amount ?? ''
-      setAmountInputValue(
-        amountIn !== ''
-          ? formatUnits(
-              BigInt(amountIn),
-              Number(quote?.details?.currencyIn?.currency?.decimals ?? 18)
-            )
-          : ''
-      )
-    }
-    debouncedAmountInputControls.flush()
-    debouncedAmountOutputControls.flush()
-  }, [quote, tradeType])
-
-  const feeBreakdown = useMemo(() => {
-    const chains = relayClient?.chains
-    const fromChain = chains?.find((chain) => chain.id === fromToken?.chainId)
-    const toChain = chains?.find((chain) => chain.id === toToken?.chainId)
-    return fromToken && toToken && fromChain && toChain && quote
-      ? parseFees(toChain, fromChain, quote)
-      : null
-  }, [quote, fromToken, toToken, relayClient])
-
-  const totalAmount = BigInt(quote?.details?.currencyIn?.amount ?? 0n)
-
-  const hasInsufficientBalance = Boolean(
-    !fromBalanceErrorFetching &&
-      totalAmount &&
-      address &&
-      (fromBalance ?? 0n) < totalAmount &&
-      !hasAuxiliaryFundsSupport &&
-      fromChainWalletVMSupported
-  )
-
-  const fetchQuoteErrorMessage = error
-    ? error?.message
-      ? (error?.message as string)
-      : 'Unknown Error'
-    : null
-  const fetchQuoteDataErrorMessage = error
-    ? (error as any)?.response?.data?.message
-      ? ((error as any)?.response?.data.message as string)
-      : 'Unknown Error'
-    : null
-  const isInsufficientLiquidityError = Boolean(
-    fetchQuoteErrorMessage?.includes('No quotes available')
-  )
-  const isCapacityExceededError =
-    fetchQuoteDataErrorMessage?.includes(
-      'Amount is higher than the available liquidity'
-    ) || fetchQuoteDataErrorMessage?.includes('Insufficient relayer liquidity')
-  const isCouldNotExecuteError =
-    fetchQuoteDataErrorMessage?.includes('Could not execute')
-  const highRelayerServiceFee = isHighRelayerServiceFeeUsd(quote)
-  const relayerFeeProportion = calculateRelayerFeeProportionUsd(quote)
-  const timeEstimate = calculatePriceTimeEstimate(quote?.details)
-
-  const recipientWalletSupportsChain = useIsWalletCompatible(
-    toChain?.id,
-    recipient,
-    linkedWallets,
-    onAnalyticEvent
-  )
-
-  const isSameCurrencySameRecipientSwap =
-    fromToken?.address === toToken?.address &&
-    fromToken?.chainId === toToken?.chainId &&
-    address === recipient
-
-  const ctaCopy = useSwapButtonCta({
-    fromToken,
-    toToken,
-    multiWalletSupportEnabled,
-    isValidFromAddress,
-    fromChainWalletVMSupported,
-    isValidToAddress,
-    toChainWalletVMSupported,
-    fromChain,
-    toChain,
-    isSameCurrencySameRecipientSwap,
-    debouncedInputAmountValue,
-    debouncedOutputAmountValue,
-    hasInsufficientBalance,
-    isInsufficientLiquidityError,
-    quote,
-    operation: quote?.details?.operation
-  })
-
-  usePreviousValueChange(
-    isCapacityExceededError,
-    !isFetchingQuote,
-    (capacityExceeded) => {
-      if (capacityExceeded) {
-        onAnalyticEvent?.(EventNames.CTA_MAX_CAPACITY_PROMPTED, {
-          inputAmount: debouncedInputAmountValue,
-          outputAmount: debouncedOutputAmountValue
-        })
-      }
-    }
-  )
-
-  const swap = useCallback(async () => {
-    let submittedEvents: string[] = []
-
-    const swapErrorHandler = (
-      error: any,
-      currentSteps?: Execute['steps'] | null
-    ) => {
-      const errorMessage = errorToJSON(
-        error?.response?.data?.message
-          ? new Error(error?.response?.data?.message)
-          : error
-      )
-      if (
-        error &&
-        ((typeof error.message === 'string' &&
-          error.message.includes('rejected')) ||
-          (typeof error === 'string' && error.includes('rejected')) ||
-          (typeof error === 'string' && error.includes('Approval Denied')) ||
-          (typeof error === 'string' && error.includes('denied transaction')) ||
-          (typeof error.message === 'string' &&
-            error.message.includes('Approval Denied')) ||
-          (typeof error.message === 'string' &&
-            error.message.includes('Plugin Closed')) ||
-          (typeof error.message === 'string' &&
-            error.message.includes('denied transaction')) ||
-          (typeof error.message === 'string' &&
-            error.message.includes('Failed to initialize request') &&
-            fromChain?.id === 2741)) // Abstract @TODO: remove once privy improves handling rejected transactions
-      ) {
-        // Close the transaction modal if the user rejects the tx
-        setTransactionModalOpen(false)
-        onAnalyticEvent?.(EventNames.USER_REJECTED_WALLET, {
-          error_message: errorMessage
-        })
-        return
-      }
-
-      const { step, stepItem } = getCurrentStep(currentSteps)
-      const swapEventData = {
-        ...getSwapEventData(
-          quote?.details,
-          quote?.fees,
-          currentSteps ?? null,
-          linkedWallet?.connector,
-          quoteParameters
-        ),
-        error_message: errorMessage
-      }
-      const isApproval = step?.id === 'approve'
-      const errorEvent = isApproval
-        ? EventNames.APPROVAL_ERROR
-        : EventNames.DEPOSIT_ERROR
-
-      //Filter out receipt/deposit transaction errors, those are approval/deposit errors
-      const isTransactionConfirmationError =
-        (error &&
-          typeof error.message === 'string' &&
-          error.message.includes('TransactionConfirmationError')) ||
-        (error.name && error.name.includes('TransactionConfirmationError'))
-      if (
-        stepItem?.receipt &&
-        stepItem.check &&
-        !isTransactionConfirmationError &&
-        (typeof stepItem.receipt === 'object' && 'status' in stepItem.receipt
-          ? stepItem.receipt.status !== 'reverted'
-          : true) &&
-        (!stepItem.checkStatus || stepItem.checkStatus !== 'unknown')
-      ) {
-        //In some cases there's a race condition where an error is thrown before the steps get a chance to call
-        //the callback which triggers the success event. This is a workaround to ensure the success event is triggered when
-        //we have a receipt and require a fill check if we haven't already send the success event.
-        const successEvent = isApproval
-          ? EventNames.APPROVAL_SUCCESS
-          : EventNames.DEPOSIT_SUCCESS
-        if (!submittedEvents.includes(successEvent)) {
-          onAnalyticEvent?.(successEvent, swapEventData)
-          submittedEvents.push(successEvent)
-          //To preserve the order of events we need to delay sending the fill error event but mark that we did send it to avoid duplicates
-          setTimeout(() => {
-            onAnalyticEvent?.(EventNames.FILL_ERROR, swapEventData)
-          }, 20)
-        } else {
-          onAnalyticEvent?.(EventNames.FILL_ERROR, swapEventData)
-        }
-      } else if (
-        !stepItem?.receipt ||
-        (typeof stepItem.receipt === 'object' &&
-          'status' in stepItem.receipt &&
-          stepItem.receipt.status === 'reverted')
-      ) {
-        onAnalyticEvent?.(errorEvent, swapEventData)
-      } else {
-        onAnalyticEvent?.(EventNames.SWAP_ERROR, swapEventData)
-      }
-
-      setSwapError(errorMessage)
-      onSwapError?.(errorMessage, { ...quote, steps: currentSteps } as Execute)
-    }
-
-    try {
-      const swapEventData = getSwapEventData(
-        quote?.details,
-        quote?.fees,
-        quote?.steps ? (quote?.steps as Execute['steps']) : null,
-        linkedWallet?.connector,
-        quoteParameters
-      )
-      onAnalyticEvent?.(EventNames.SWAP_CTA_CLICKED, swapEventData)
-      setWaitingForSteps(true)
-
-      if (!executeSwap) {
-        throw 'Missing a quote'
-      }
-
-      if (!wallet && !walletClient.data) {
-        throw 'Missing a wallet'
-      }
-
-      setSteps(quote?.steps as Execute['steps'])
-      setQuoteInProgress(quote as Execute)
-      setTransactionModalOpen(true)
-
-      const _wallet =
-        wallet ?? adaptViemWallet(walletClient.data as WalletClient)
-
-      const activeWalletChainId = await _wallet?.getChainId()
-      const activeWalletChain = relayClient?.chains?.find(
-        (chain) => chain.id === activeWalletChainId
-      )
-      let targetChainId = fromToken?.chainId
-      //Special case for Hyperliquid, to sign txs on an evm chain
-      if (fromToken?.chainId === 1337) {
-        targetChainId =
-          activeWalletChain?.vmType !== 'evm' ? 1 : activeWalletChainId
-      }
-
-      if (fromToken && targetChainId && targetChainId !== activeWalletChainId) {
-        onAnalyticEvent?.(EventNames.SWAP_SWITCH_NETWORK, {
-          activeWalletChainId,
-          ...swapEventData
-        })
-        await _wallet?.switchChain(targetChainId)
-      }
-
-      let _currentSteps: Execute['steps'] | undefined = undefined
-
-      const execPromise = executeSwap(({ steps: currentSteps }) => {
-        setSteps(currentSteps)
-        _currentSteps = currentSteps
-
-        const { step, stepItem } = getCurrentStep(currentSteps)
-        const swapEventData = getSwapEventData(
-          quote?.details,
-          quote?.fees,
-          currentSteps,
-          linkedWallet?.connector,
-          quoteParameters
-        )
-        if (step && stepItem) {
-          //@ts-ignore
-          const isApproval = step.id === 'approve' || step.id === 'approval'
-          let submittedEvent = isApproval
-            ? EventNames.APPROVAL_SUBMITTED
-            : EventNames.DEPOSIT_SUBMITTED
-          const successEvent = isApproval
-            ? EventNames.APPROVAL_SUCCESS
-            : EventNames.DEPOSIT_SUCCESS
-          const isBatchTransaction = Boolean(
-            Array.isArray(step.items) &&
-              step.items.length > 1 &&
-              wallet?.handleBatchTransactionStep
-          )
-          if (!isApproval && isBatchTransaction) {
-            submittedEvent = EventNames.BATCH_TX_SUBMITTED
-          }
-          if (
-            !submittedEvents.includes(submittedEvent) &&
-            !stepItem.receipt &&
-            stepItem?.txHashes &&
-            stepItem?.txHashes?.length > 0
-          ) {
-            submittedEvents.push(submittedEvent)
-            onAnalyticEvent?.(submittedEvent, swapEventData)
-          } else if (
-            !submittedEvents.includes(successEvent) &&
-            ((stepItem.receipt &&
-              !(
-                typeof stepItem.receipt === 'object' &&
-                'status' in stepItem.receipt &&
-                stepItem.receipt.status === 'reverted'
-              )) ||
-              stepItem.checkStatus === 'pending')
-          ) {
-            onAnalyticEvent?.(successEvent, swapEventData)
-            submittedEvents.push(successEvent)
-          }
-
-          if (
-            stepItem.status === 'complete' &&
-            stepItem.check &&
-            !submittedEvents.includes(EventNames.FILL_SUCCESS)
-          ) {
-            //Sometimes a fill may be quicker than the tx receipt is available, so we need to handle this scenario
-            if (
-              !submittedEvents.includes(EventNames.DEPOSIT_SUCCESS) &&
-              !isBatchTransaction
-            ) {
-              onAnalyticEvent?.(EventNames.DEPOSIT_SUCCESS, swapEventData)
-              submittedEvents.push(EventNames.DEPOSIT_SUCCESS)
-              //To preserve the order of events we need to delay sending the fill success event but mark that we did send it to avoid duplicates
-              setTimeout(() => {
-                onAnalyticEvent?.(EventNames.FILL_SUCCESS, swapEventData)
-              }, 20)
-            } else {
-              onAnalyticEvent?.(EventNames.FILL_SUCCESS, swapEventData)
-            }
-            submittedEvents.push(EventNames.FILL_SUCCESS)
-          }
-        } else if (
-          currentSteps?.every((step) =>
-            step.items?.every((item) => item.status === 'complete')
-          ) &&
-          !submittedEvents.includes(EventNames.FILL_SUCCESS)
-        ) {
-          //Sometimes a fill may be quicker than the tx receipt is available, so we need to handle this scenario
-          if (
-            !submittedEvents.includes(EventNames.DEPOSIT_SUCCESS) &&
-            !submittedEvents.includes(EventNames.BATCH_TX_SUBMITTED)
-          ) {
-            onAnalyticEvent?.(EventNames.DEPOSIT_SUCCESS, swapEventData)
-            submittedEvents.push(EventNames.DEPOSIT_SUCCESS)
-            //To preserve the order of events we need to delay sending the fill success event but mark that we did send it to avoid duplicates
-            setTimeout(() => {
-              onAnalyticEvent?.(EventNames.FILL_SUCCESS, swapEventData)
-            }, 20)
-          } else {
-            onAnalyticEvent?.(EventNames.FILL_SUCCESS, swapEventData)
-          }
-          submittedEvents.push(EventNames.FILL_SUCCESS)
-        }
-      })
-
-      // Store the AbortController for potential cancellation immediately
-      if (
-        execPromise &&
-        typeof execPromise === 'object' &&
-        'abortController' in execPromise
-      ) {
-        setAbortController((execPromise as any).abortController)
-      }
-
-      execPromise
-        ?.catch((error: any) => {
-          swapErrorHandler(error, _currentSteps)
-        })
-        .finally(() => {
-          setWaitingForSteps(false)
-          setAbortController(null)
-          invalidateBalanceQueries()
-        })
-    } catch (error: any) {
-      swapErrorHandler(error)
-      setWaitingForSteps(false)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    relayClient,
-    address,
-    connector,
-    wallet,
-    walletClient,
-    fromToken,
-    toToken,
-    customToAddress,
-    recipient,
-    debouncedInputAmountValue,
-    debouncedOutputAmountValue,
-    tradeType,
-    waitingForSteps,
-    executeSwap,
-    setSteps,
-    setQuoteInProgress,
-    invalidateBalanceQueries,
-    linkedWallet,
-    abortController
-  ])
-
-  return (
-    <>
-      {children({
-        quote,
-        steps,
-        setSteps,
-        swap,
-        transactionModalOpen,
-        feeBreakdown,
-        fromToken,
-        setFromToken,
-        toToken,
-        setToToken,
-        swapError,
-        error,
-        toDisplayName,
-        address,
-        originAddressOverride,
-        setOriginAddressOverride,
-        recipient,
-        destinationAddressOverride,
-        customToAddress,
-        setCustomToAddress,
-        setDestinationAddressOverride,
-        tradeType,
-        setTradeType,
-        details,
-        isSameCurrencySameRecipientSwap,
-        allowUnsupportedOrigin,
-        setAllowUnsupportedOrigin,
-        allowUnsupportedRecipient,
-        setAllowUnsupportedRecipient,
-        debouncedInputAmountValue,
-        debouncedAmountInputControls,
-        setAmountInputValue,
-        amountInputValue,
-        amountOutputValue,
-        debouncedOutputAmountValue,
-        debouncedAmountOutputControls,
-        setAmountOutputValue,
-        toBalance,
-        toBalancePending,
-        isLoadingToBalance,
-        isFetchingQuote,
-        isLoadingFromBalance,
-        fromBalance,
-        fromBalancePending,
-        highRelayerServiceFee,
-        relayerFeeProportion,
-        hasInsufficientBalance,
-        isInsufficientLiquidityError,
-        isCapacityExceededError,
-        isCouldNotExecuteError,
-        ctaCopy,
-        isFromNative,
-        slippageTolerance: currentSlippageTolerance,
-        timeEstimate,
-        isSvmSwap,
-        isBvmSwap,
-        isValidFromAddress,
-        isValidToAddress,
-        supportedWalletVMs,
-        fromChainWalletVMSupported,
-        toChainWalletVMSupported,
-        isRecipientLinked,
-        recipientWalletSupportsChain,
-        invalidateBalanceQueries,
-        invalidateQuoteQuery,
-        setDetails,
-        setSwapError,
-        quoteInProgress,
-        setQuoteInProgress,
-        linkedWallet,
-        quoteParameters,
-        abortController,
-        fromTokenPriceData,
-        toTokenPriceData,
-        isLoadingFromTokenPrice,
-        isLoadingToTokenPrice
-      })}
-    </>
-  )
-}
-
-export default TokenWidgetRenderer
diff --git a/packages/ui/src/components/widgets/TokenWidget/widget/index.tsx b/packages/ui/src/components/widgets/TokenWidget/widget/index.tsx
deleted file mode 100644
index 253845230..000000000
--- a/packages/ui/src/components/widgets/TokenWidget/widget/index.tsx
+++ /dev/null
@@ -1,1576 +0,0 @@
-import { Flex, Text } from '../../../primitives/index.js'
-import { TabsRoot, TabsList, TabsTrigger } from '../../../primitives/Tabs.js'
-import {
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type FC,
-  type Dispatch,
-  type SetStateAction
-} from 'react'
-import { useRelayClient } from '../../../../hooks/index.js'
-import useFallbackState from '../../../../hooks/useFallbackState.js'
-import type { Address } from 'viem'
-import { formatUnits } from 'viem'
-import { usePublicClient } from 'wagmi'
-import type { LinkedWallet, Token } from '../../../../types/index.js'
-import {
-  ASSETS_RELAY_API,
-  type ChainVM,
-  type Execute,
-  type RelayChain
-} from '@relayprotocol/relay-sdk'
-import { EventNames } from '../../../../constants/events.js'
-import WidgetContainer from '../../WidgetContainer.js'
-import type { AdaptedWallet } from '@relayprotocol/relay-sdk'
-import { ProviderOptionsContext } from '../../../../providers/RelayKitProvider.js'
-import { findBridgableToken } from '../../../../utils/tokens.js'
-import { UnverifiedTokenModal } from '../../../common/UnverifiedTokenModal.js'
-import { alreadyAcceptedToken } from '../../../../utils/localStorage.js'
-import { calculateUsdValue, getSwapEventData } from '../../../../utils/quote.js'
-import { getFeeBufferAmount } from '../../../../utils/nativeMaxAmount.js'
-import TokenWidgetRenderer, { type TradeType } from './TokenWidgetRenderer.js'
-import BuyTabContent from '../BuyTabContent.js'
-import SellTabContent from '../SellTabContent.js'
-import { useQuote } from '@relayprotocol/relay-kit-hooks'
-import { useWalletGuards } from '../hooks/useWalletGuards.js'
-import {
-  isChainVmTypeSupported,
-  isWalletVmTypeCompatible
-} from '../../../../utils/address.js'
-
-type BaseTokenWidgetProps = {
-  fromToken?: Token
-  setFromToken?: (token?: Token) => void
-  toToken?: Token
-  setToToken?: (token?: Token) => void
-  activeTab?: 'buy' | 'sell'
-  setActiveTab?: (tab: 'buy' | 'sell') => void
-  defaultToAddress?: Address
-  defaultAmount?: string
-  defaultTradeType?: 'EXACT_INPUT' | 'EXPECTED_OUTPUT'
-  slippageTolerance?: string
-  lockToToken?: boolean
-  lockFromToken?: boolean
-  lockChainId?: number
-  singleChainMode?: boolean
-  wallet?: AdaptedWallet
-  supportedWalletVMs: Omit<ChainVM, 'hypevm' | 'lvm'>[]
-  disableInputAutoFocus?: boolean
-  popularChainIds?: number[]
-  disablePasteWalletAddressOption?: boolean
-  useSecureBaseUrl?: (parameters: Parameters<typeof useQuote>['2']) => boolean
-  onOpenSlippageConfig?: () => void
-  walletsLoading?: boolean
-  paymentMethodMinHeight?: string
-  onFromTokenChange?: (token?: Token) => void
-  onToTokenChange?: (token?: Token) => void
-  onConnectWallet?: () => void
-  onAnalyticEvent?: (eventName: string, data?: any) => void
-  onSwapValidating?: (data: Execute) => void
-  onSwapSuccess?: (data: Execute) => void
-  onSwapError?: (error: string, data?: Execute) => void
-  onUnverifiedTokenDecline?: (token: Token, context: 'from' | 'to') => void
-}
-
-type MultiWalletDisabledProps = BaseTokenWidgetProps & {
-  multiWalletSupportEnabled?: false
-  linkedWallets?: never
-  onSetPrimaryWallet?: never
-  onLinkNewWallet?: never
-}
-
-type MultiWalletEnabledProps = BaseTokenWidgetProps & {
-  multiWalletSupportEnabled: true
-  linkedWallets?: LinkedWallet[]
-  onSetPrimaryWallet?: (address: string) => void
-  onLinkNewWallet: (params: {
-    chain?: RelayChain
-    direction: 'to' | 'from'
-  }) => Promise<LinkedWallet> | void
-}
-
-export type TokenWidgetProps =
-  | MultiWalletDisabledProps
-  | MultiWalletEnabledProps
-
-const BASE_USDC_ADDRESS = '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913'
-
-const BASE_USDC_TOKEN: Token = {
-  chainId: 8453,
-  address: BASE_USDC_ADDRESS,
-  name: 'USD Coin',
-  symbol: 'USDC',
-  decimals: 6,
-  logoURI: `${ASSETS_RELAY_API}/icons/currencies/usdc.png`,
-  verified: true
-}
-
-const isBaseUsdcToken = (token?: Token) =>
-  token?.chainId === BASE_USDC_TOKEN.chainId &&
-  token?.address?.toLowerCase() === BASE_USDC_ADDRESS
-
-const COMPATIBLE_WALLET_VMS: ChainVM[] = [
-  'evm',
-  'suivm',
-  'tvm',
-  'hypevm',
-  'svm',
-  'bvm'
-]
-
-const TokenWidget: FC<TokenWidgetProps> = ({
-  fromToken: externalFromToken,
-  setFromToken: setExternalFromToken,
-  toToken: externalToToken,
-  setToToken: setExternalToToken,
-  activeTab: externalActiveTab,
-  setActiveTab: setExternalActiveTab,
-  defaultToAddress,
-  defaultAmount,
-  defaultTradeType,
-  slippageTolerance,
-  onOpenSlippageConfig,
-  lockToToken = false,
-  lockFromToken = false,
-  lockChainId,
-  singleChainMode = false,
-  wallet,
-  multiWalletSupportEnabled = false,
-  linkedWallets,
-  supportedWalletVMs,
-  disableInputAutoFocus = false,
-  popularChainIds,
-  disablePasteWalletAddressOption,
-  useSecureBaseUrl,
-  paymentMethodMinHeight = '85vh',
-  onSetPrimaryWallet,
-  onLinkNewWallet,
-  onFromTokenChange,
-  onToTokenChange,
-  onConnectWallet,
-  onAnalyticEvent: _onAnalyticEvent,
-  onSwapSuccess,
-  onSwapValidating,
-  onSwapError,
-  onUnverifiedTokenDecline,
-  walletsLoading = false
-}) => {
-  const onAnalyticEvent = useCallback(
-    (eventName: string, data?: any) => {
-      try {
-        _onAnalyticEvent?.(eventName, data)
-      } catch (e) {
-        console.error('Error in onAnalyticEvent', eventName, data, e)
-      }
-    },
-    [_onAnalyticEvent]
-  )
-  const relayClient = useRelayClient()
-  const providerOptionsContext = useContext(ProviderOptionsContext)
-  const connectorKeyOverrides = providerOptionsContext.vmConnectorKeyOverrides
-  const [transactionModalOpen, setTransactionModalOpen] = useState(false)
-  const [depositAddressModalOpen, setDepositAddressModalOpen] = useState(false)
-  const [addressModalOpen, setAddressModalOpen] = useState(false)
-  const [pendingSuccessFlush, setPendingSuccessFlush] = useState(false)
-  const [unverifiedTokens, setUnverifiedTokens] = useState<
-    { token: Token; context: 'to' | 'from' }[]
-  >([])
-  const declinedTokensRef = useRef<Set<string>>(new Set())
-
-  const [fromToken, setFromToken] = useState<Token | undefined>(
-    externalFromToken
-  )
-  const [toToken, setToToken] = useState<Token | undefined>(externalToToken)
-
-  useEffect(() => {
-    setFromToken(externalFromToken)
-  }, [externalFromToken])
-
-  useEffect(() => {
-    setToToken(externalToToken)
-  }, [externalToToken])
-
-  const updateFromToken = useCallback(
-    (token: Token | undefined) => {
-      setFromToken(token)
-      setExternalFromToken?.(token)
-    },
-    [setExternalFromToken]
-  )
-
-  const updateToToken = useCallback(
-    (token: Token | undefined) => {
-      setToToken(token)
-      setExternalToToken?.(token)
-    },
-    [setExternalToToken]
-  )
-
-  const [activeTab, setActiveTab] = useFallbackState<'buy' | 'sell'>(
-    setExternalActiveTab && externalActiveTab ? externalActiveTab : 'buy',
-    setExternalActiveTab && externalActiveTab
-      ? [
-          externalActiveTab,
-          setExternalActiveTab as Dispatch<SetStateAction<'buy' | 'sell'>>
-        ]
-      : undefined
-  )
-  const [isUsdInputMode, setIsUsdInputMode] = useState(activeTab === 'buy')
-  const [usdInputValue, setUsdInputValue] = useState('')
-  const [usdOutputValue, setUsdOutputValue] = useState('')
-  const [tokenInputCache, setTokenInputCache] = useState('')
-  const tabTokenStateRef = useRef<{
-    buy: { fromToken?: Token; toToken?: Token }
-    sell: { fromToken?: Token; toToken?: Token }
-  }>({ buy: {}, sell: {} })
-  const prevActiveTabRef = useRef<'buy' | 'sell'>(activeTab)
-  const autoSelectedFromTokenRef = useRef(false)
-  const tabRecipientRef = useRef<{
-    buy: { override?: string; custom?: string }
-    sell: { override?: string; custom?: string }
-  }>({ buy: {}, sell: {} })
-  const setTradeTypeRef = useRef<((tradeType: TradeType) => void) | null>(null)
-  const tradeTypeRef = useRef<TradeType>(defaultTradeType ?? 'EXPECTED_OUTPUT')
-
-  const hasLockedToken = lockFromToken || lockToToken
-  const isSingleChainLocked = singleChainMode && lockChainId !== undefined
-  const [localSlippageTolerance, setLocalSlippageTolerance] = useState<
-    string | undefined
-  >(slippageTolerance)
-
-  useEffect(() => {
-    setLocalSlippageTolerance(slippageTolerance)
-  }, [slippageTolerance])
-
-  useEffect(() => {
-    const desiredTradeType: TradeType =
-      activeTab === 'buy' ? 'EXPECTED_OUTPUT' : 'EXACT_INPUT'
-
-    if (tradeTypeRef.current !== desiredTradeType) {
-      setTradeTypeRef.current?.(desiredTradeType)
-    }
-  }, [activeTab])
-
-  const handleOpenSlippageConfig = () => {
-    onOpenSlippageConfig?.()
-  }
-
-  const handleSlippageToleranceChange = (value: string | undefined) => {
-    setLocalSlippageTolerance(value)
-  }
-
-  const computedDefaultTradeType: TradeType =
-    defaultTradeType ??
-    (activeTab === 'buy' ? 'EXPECTED_OUTPUT' : 'EXACT_INPUT')
-
-  //Handle unverified tokens
-  useEffect(() => {
-    const tokensToVerify: { token: Token; context: 'to' | 'from' }[] = []
-
-    const getTokenKey = (token: Token) =>
-      `${token.chainId}:${token.address.toLowerCase()}`
-
-    if (fromToken && 'verified' in fromToken && !fromToken.verified) {
-      if (alreadyAcceptedToken(fromToken)) {
-        setFromToken({ ...fromToken, verified: true })
-      } else if (!declinedTokensRef.current.has(getTokenKey(fromToken))) {
-        tokensToVerify.push({ token: fromToken, context: 'from' })
-      }
-    }
-
-    if (toToken && 'verified' in toToken && !toToken.verified) {
-      if (alreadyAcceptedToken(toToken)) {
-        setToToken({ ...toToken, verified: true })
-      } else if (!declinedTokensRef.current.has(getTokenKey(toToken))) {
-        tokensToVerify.push({ token: toToken, context: 'to' })
-      }
-    }
-
-    if (tokensToVerify.length > 0) {
-      setUnverifiedTokens((prev) => [...prev, ...tokensToVerify])
-
-      tokensToVerify.forEach(({ context }) => {
-        if (context === 'from') {
-          setFromToken(undefined)
-        } else {
-          setToToken(undefined)
-        }
-      })
-    }
-  }, [fromToken, toToken])
-
-  return (
-    <TokenWidgetRenderer
-      context="Swap"
-      transactionModalOpen={transactionModalOpen}
-      setTransactionModalOpen={setTransactionModalOpen}
-      depositAddressModalOpen={depositAddressModalOpen}
-      defaultAmount={defaultAmount}
-      defaultToAddress={defaultToAddress}
-      defaultTradeType={computedDefaultTradeType}
-      toToken={toToken}
-      setToToken={updateToToken}
-      fromToken={fromToken}
-      setFromToken={updateFromToken}
-      slippageTolerance={localSlippageTolerance}
-      wallet={wallet}
-      linkedWallets={linkedWallets}
-      multiWalletSupportEnabled={multiWalletSupportEnabled}
-      onSwapError={onSwapError}
-      onAnalyticEvent={onAnalyticEvent}
-      supportedWalletVMs={supportedWalletVMs}
-      useSecureBaseUrl={useSecureBaseUrl}
-    >
-      {({
-        quote,
-        steps,
-        swap,
-        setSteps,
-        feeBreakdown,
-        fromToken,
-        setFromToken,
-        toToken,
-        setToToken,
-        error,
-        toDisplayName,
-        address,
-        originAddressOverride: _originAddressOverride,
-        setOriginAddressOverride,
-        recipient,
-        customToAddress,
-        setCustomToAddress,
-        destinationAddressOverride,
-        setDestinationAddressOverride,
-        tradeType,
-        setTradeType,
-        isSameCurrencySameRecipientSwap,
-        allowUnsupportedOrigin,
-        setAllowUnsupportedOrigin,
-        allowUnsupportedRecipient,
-        setAllowUnsupportedRecipient,
-        debouncedInputAmountValue,
-        debouncedAmountInputControls,
-        setAmountInputValue,
-        amountInputValue,
-        amountOutputValue,
-        debouncedOutputAmountValue,
-        debouncedAmountOutputControls,
-        setAmountOutputValue,
-        toBalance,
-        toBalancePending,
-        isLoadingToBalance,
-        isFetchingQuote,
-        isLoadingFromBalance,
-        fromBalance,
-        fromBalancePending,
-        highRelayerServiceFee,
-        relayerFeeProportion,
-        hasInsufficientBalance,
-        isInsufficientLiquidityError,
-        isCapacityExceededError,
-        isCouldNotExecuteError,
-        ctaCopy,
-        isFromNative,
-        timeEstimate,
-        isSvmSwap,
-        isBvmSwap,
-        isValidFromAddress,
-        isValidToAddress,
-        slippageTolerance,
-        fromChainWalletVMSupported,
-        toChainWalletVMSupported,
-        isRecipientLinked,
-        swapError,
-        recipientWalletSupportsChain,
-        linkedWallet,
-        quoteParameters,
-        setSwapError,
-        invalidateBalanceQueries,
-        invalidateQuoteQuery,
-        quoteInProgress,
-        setQuoteInProgress,
-        abortController,
-        fromTokenPriceData,
-        toTokenPriceData,
-        isLoadingFromTokenPrice,
-        isLoadingToTokenPrice
-      }) => {
-        setTradeTypeRef.current = setTradeType
-        tradeTypeRef.current = tradeType
-
-        useEffect(() => {
-          if (prevActiveTabRef.current !== activeTab) {
-            return
-          }
-          tabTokenStateRef.current[activeTab] = {
-            fromToken,
-            toToken
-          }
-        }, [activeTab, fromToken, toToken])
-
-        useEffect(() => {
-          tabRecipientRef.current[activeTab] = {
-            override:
-              typeof destinationAddressOverride === 'string'
-                ? destinationAddressOverride
-                : undefined,
-            custom:
-              typeof customToAddress === 'string' ? customToAddress : undefined
-          }
-        }, [activeTab, destinationAddressOverride, customToAddress])
-
-        useEffect(() => {
-          setAllowUnsupportedOrigin(activeTab === 'buy')
-          setAllowUnsupportedRecipient(activeTab === 'sell')
-        }, [activeTab, setAllowUnsupportedOrigin, setAllowUnsupportedRecipient])
-
-        // Auto-select first compatible wallet in buy tab when toToken is set and no destination is selected
-        useEffect(() => {
-          if (
-            activeTab === 'buy' &&
-            toToken &&
-            multiWalletSupportEnabled &&
-            linkedWallets &&
-            linkedWallets.length > 0 &&
-            !destinationAddressOverride &&
-            !customToAddress
-          ) {
-            // Find the destination chain for filtering compatible wallets
-            const toChain = relayClient?.chains?.find(
-              (c) => c.id === toToken.chainId
-            )
-
-            if (toChain) {
-              // Filter wallets compatible with the destination chain VM type
-              const compatibleWallets = linkedWallets.filter((wallet) => {
-                return isWalletVmTypeCompatible(wallet.vmType, toChain.vmType)
-              })
-
-              // Auto-select the first compatible wallet (prefer the current address if compatible)
-              const currentAddressWallet = compatibleWallets.find(
-                (w) => w.address.toLowerCase() === address?.toLowerCase()
-              )
-              const walletToSelect =
-                currentAddressWallet || compatibleWallets[0]
-
-              if (walletToSelect) {
-                setDestinationAddressOverride(walletToSelect.address)
-              }
-            }
-          }
-        }, [
-          activeTab,
-          toToken,
-          multiWalletSupportEnabled,
-          linkedWallets,
-          destinationAddressOverride,
-          customToAddress,
-          relayClient?.chains,
-          setDestinationAddressOverride,
-          address
-        ])
-
-        // Calculate the USD value of the input amount
-        const inputAmountUsd = useMemo(() => {
-          return (
-            calculateUsdValue(fromTokenPriceData?.price, amountInputValue) ??
-            null
-          )
-        }, [fromTokenPriceData, amountInputValue])
-
-        // Calculate the USD value of the output amount
-        const outputAmountUsd = useMemo(() => {
-          return (
-            calculateUsdValue(toTokenPriceData?.price, amountOutputValue) ??
-            null
-          )
-        }, [toTokenPriceData, amountOutputValue])
-
-        const percentageOptions = [20, 50]
-
-        const handleMaxAmountClicked = async (
-          amount: bigint,
-          percent: string,
-          bufferAmount?: bigint
-        ) => {
-          if (fromToken) {
-            const formattedAmount = formatUnits(amount, fromToken?.decimals)
-            setAmountInputValue(formattedAmount)
-            setTradeType('EXACT_INPUT')
-            debouncedAmountOutputControls.cancel()
-            debouncedAmountInputControls.flush()
-            onAnalyticEvent?.(EventNames.MAX_AMOUNT_CLICKED, {
-              percent: percent,
-              bufferAmount: bufferAmount ? bufferAmount.toString() : '0',
-              chainType: fromChain?.vmType
-            })
-
-            if (isUsdInputMode && conversionRate) {
-              const numericTokenAmount = Number(formattedAmount)
-              if (!isNaN(numericTokenAmount)) {
-                const usdEquivalent = numericTokenAmount * conversionRate
-                setUsdInputValue(usdEquivalent.toFixed(2))
-              }
-            }
-          }
-        }
-
-        const fromChain = relayClient?.chains?.find(
-          (chain) => chain.id === fromToken?.chainId
-        )
-
-        const toChain = relayClient?.chains?.find(
-          (chain) => chain.id === toToken?.chainId
-        )
-
-        const handleSetToToken = useCallback(
-          (token?: Token) => {
-            if (!token) {
-              updateToToken(undefined)
-              onToTokenChange?.(undefined)
-              return
-            }
-
-            let _token = token
-            if (!fromChainWalletVMSupported) {
-              const newToChain = relayClient?.chains.find(
-                (chain) => token?.chainId == chain.id
-              )
-              if (newToChain) {
-                const _toToken = findBridgableToken(newToChain, _token)
-                if (_toToken && _toToken.address != _token?.address) {
-                  _token = _toToken
-                }
-              }
-            }
-            updateToToken(_token)
-            onToTokenChange?.(_token)
-          },
-          [
-            fromChainWalletVMSupported,
-            onToTokenChange,
-            relayClient,
-            updateToToken
-          ]
-        )
-
-        const handleSetFromToken = useCallback(
-          (token?: Token) => {
-            if (!token) {
-              updateFromToken(undefined)
-              onFromTokenChange?.(undefined)
-              return
-            }
-
-            let _token = token
-            const newFromChain = relayClient?.chains.find(
-              (chain) => token?.chainId == chain.id
-            )
-
-            if (
-              newFromChain?.vmType &&
-              !isChainVmTypeSupported(newFromChain?.vmType, supportedWalletVMs)
-            ) {
-              setTradeType('EXACT_INPUT')
-
-              const _toToken = findBridgableToken(toChain, toToken)
-
-              if (_toToken && _toToken?.address != toToken?.address) {
-                handleSetToToken(_toToken)
-              }
-
-              const _fromToken = findBridgableToken(newFromChain, _token)
-              if (_fromToken && _fromToken.address != _token?.address) {
-                _token = _fromToken
-              }
-            }
-
-            updateFromToken(_token)
-            onFromTokenChange?.(_token)
-          },
-          [
-            handleSetToToken,
-            onFromTokenChange,
-            relayClient,
-            updateFromToken,
-            setTradeType,
-            supportedWalletVMs,
-            toChain,
-            toToken
-          ]
-        )
-
-        // Get public client for the fromChain to estimate gas
-        const publicClient = usePublicClient({ chainId: fromChain?.id })
-
-        // Seed fromToken on sell tab if empty but we have a token available
-        useEffect(() => {
-          if (activeTab !== 'sell') return
-          if (fromToken) return
-
-          const candidateFromToken =
-            tabTokenStateRef.current.sell?.fromToken ??
-            tabTokenStateRef.current.buy?.toToken ??
-            toToken
-
-          if (candidateFromToken) {
-            handleSetFromToken(candidateFromToken)
-          }
-        }, [activeTab, fromToken, toToken, handleSetFromToken])
-
-        useWalletGuards({
-          multiWalletSupportEnabled,
-          allowUnsupportedOrigin,
-          allowUnsupportedRecipient,
-          fromChain,
-          toChain,
-          address,
-          recipient,
-          linkedWallets,
-          connectorKeyOverrides,
-          onSetPrimaryWallet,
-          isValidFromAddress,
-          isValidToAddress,
-          setOriginAddressOverride,
-          setCustomToAddress,
-          disablePasteWalletAddressOption,
-          customToAddress: customToAddress as string | undefined,
-          originAddressOverride: _originAddressOverride as string | undefined,
-          destinationAddressOverride: destinationAddressOverride as
-            | string
-            | undefined,
-          setDestinationAddressOverride
-        })
-
-        const isAutoSlippage = slippageTolerance === undefined
-
-        const isHighPriceImpact =
-          Number(quote?.details?.totalImpact?.percent) < -3.5
-        const totalImpactUsd = quote?.details?.totalImpact?.usd
-        const showHighPriceImpactWarning = Boolean(
-          isHighPriceImpact && totalImpactUsd && Number(totalImpactUsd) <= -10
-        )
-
-        // Calculate conversion rate
-        const conversionRate = useMemo(() => {
-          if (isUsdInputMode) {
-            // When in USD input mode, the conversion rate is the price of the fromToken.
-            if (fromTokenPriceData?.price && fromTokenPriceData.price > 0) {
-              return fromTokenPriceData.price
-            } else {
-              // If no price data, or price is 0, return null to avoid stale calculations.
-              return null
-            }
-          } else {
-            // When in token input mode, calculate rate from quote if available.
-            if (
-              amountInputValue &&
-              Number(amountInputValue) > 0 &&
-              quote?.details?.currencyIn?.amountUsd
-            ) {
-              const tokenVal = Number(amountInputValue)
-              const usdVal = Number(quote.details.currencyIn.amountUsd)
-              if (tokenVal > 0 && usdVal > 0) {
-                const rate = usdVal / tokenVal
-                return rate
-              } else {
-                return null
-              }
-            } else {
-              // If in token mode and token input is cleared or zero, return null
-              return null
-            }
-          }
-        }, [
-          isUsdInputMode,
-          fromTokenPriceData?.price,
-          quote?.details?.currencyIn?.amountUsd,
-          amountInputValue
-        ])
-
-        // toggle between token and usd input mode
-        const toggleInputMode = () => {
-          if (!isUsdInputMode) {
-            // Switching TO USD mode
-            let newUsdInputValue = ''
-            let newUsdOutputValue = ''
-
-            // Calculate USD input value
-            if (
-              quote?.details?.currencyIn?.amountUsd &&
-              Number(quote.details.currencyIn.amountUsd) > 0
-            ) {
-              newUsdInputValue = String(
-                Number(quote.details.currencyIn.amountUsd)
-              )
-            } else if (inputAmountUsd && inputAmountUsd > 0) {
-              newUsdInputValue = inputAmountUsd.toFixed(2)
-            } else if (
-              amountInputValue &&
-              Number(amountInputValue) > 0 &&
-              conversionRate &&
-              conversionRate > 0
-            ) {
-              newUsdInputValue = (
-                Number(amountInputValue) * conversionRate
-              ).toFixed(2)
-            }
-
-            // Calculate USD output value
-            if (
-              quote?.details?.currencyOut?.amountUsd &&
-              Number(quote.details.currencyOut.amountUsd) > 0
-            ) {
-              newUsdOutputValue = String(
-                Number(quote.details.currencyOut.amountUsd)
-              )
-            } else if (outputAmountUsd && outputAmountUsd > 0) {
-              newUsdOutputValue = outputAmountUsd.toFixed(2)
-            } else if (
-              amountOutputValue &&
-              Number(amountOutputValue) > 0 &&
-              toTokenPriceData?.price &&
-              toTokenPriceData.price > 0
-            ) {
-              newUsdOutputValue = (
-                Number(amountOutputValue) * toTokenPriceData.price
-              ).toFixed(2)
-            }
-
-            setTokenInputCache(amountInputValue)
-            setUsdInputValue(newUsdInputValue)
-            setUsdOutputValue(newUsdOutputValue)
-            setIsUsdInputMode(true)
-
-            // Default to EXACT_INPUT unless we're currently in EXPECTED_OUTPUT mode with a valid USD output value
-            if (tradeType !== 'EXPECTED_OUTPUT' || !newUsdOutputValue) {
-              setTradeType('EXACT_INPUT')
-            }
-          } else {
-            // Switching FROM USD mode
-            if (!usdInputValue && tokenInputCache) {
-              setAmountInputValue(tokenInputCache)
-            }
-            setUsdInputValue('')
-            setUsdOutputValue('')
-            setIsUsdInputMode(false)
-            // Maintain current trade type when switching back to token mode
-          }
-        }
-
-        //Update token input value when USD input changes in USD mode
-        useEffect(() => {
-          if (isUsdInputMode) {
-            if (conversionRate && conversionRate > 0 && usdInputValue) {
-              const usdValue = Number(usdInputValue)
-              if (!isNaN(usdValue) && usdValue > 0) {
-                const tokenEquivalent = (usdValue / conversionRate).toFixed(
-                  fromToken?.decimals ?? 8
-                )
-                setAmountInputValue(tokenEquivalent)
-              }
-            } else if (usdInputValue === '' || Number(usdInputValue) === 0) {
-              setAmountInputValue('')
-            }
-          }
-        }, [
-          isUsdInputMode,
-          usdInputValue,
-          conversionRate,
-          setAmountInputValue,
-          fromToken?.decimals
-        ])
-
-        //Update token output value when USD output changes in USD mode
-        useEffect(() => {
-          if (isUsdInputMode && tradeType === 'EXPECTED_OUTPUT') {
-            if (
-              toTokenPriceData?.price &&
-              toTokenPriceData.price > 0 &&
-              usdOutputValue
-            ) {
-              const usdValue = Number(usdOutputValue)
-              if (!isNaN(usdValue) && usdValue > 0) {
-                const tokenEquivalent = (
-                  usdValue / toTokenPriceData.price
-                ).toFixed(toToken?.decimals ?? 8)
-                setAmountOutputValue(tokenEquivalent)
-              }
-            } else if (usdOutputValue === '' || Number(usdOutputValue) === 0) {
-              setAmountOutputValue('')
-            }
-          }
-        }, [
-          isUsdInputMode,
-          tradeType,
-          usdOutputValue,
-          toTokenPriceData?.price,
-          setAmountOutputValue,
-          toToken?.decimals
-        ])
-
-        //Update USD output value when in USD mode
-        useEffect(() => {
-          if (isUsdInputMode) {
-            // For EXPECTED_OUTPUT, don't override user's typed value
-            if (tradeType === 'EXPECTED_OUTPUT') {
-              // User is controlling the output value directly
-              return
-            }
-
-            // For EXACT_INPUT, update based on quote or calculations
-            if (quote?.details?.currencyOut?.amountUsd && !isFetchingQuote) {
-              // Use quote USD value when available
-              const quoteUsdValue = Number(quote.details.currencyOut.amountUsd)
-              if (!isNaN(quoteUsdValue) && quoteUsdValue >= 0) {
-                setUsdOutputValue(quoteUsdValue.toFixed(2))
-              }
-            } else if (
-              toTokenPriceData?.price &&
-              toTokenPriceData.price > 0 &&
-              amountOutputValue &&
-              Number(amountOutputValue) > 0
-            ) {
-              // Fallback to direct token price calculation
-              const tokenAmount = Number(amountOutputValue)
-              const usdEquivalent = tokenAmount * toTokenPriceData.price
-              if (!isNaN(usdEquivalent) && usdEquivalent >= 0) {
-                setUsdOutputValue(usdEquivalent.toFixed(2))
-              }
-            } else if (!amountOutputValue || Number(amountOutputValue) === 0) {
-              setUsdOutputValue('')
-            }
-          }
-        }, [
-          isUsdInputMode,
-          tradeType,
-          quote?.details?.currencyOut?.amountUsd,
-          isFetchingQuote,
-          toTokenPriceData?.price,
-          amountOutputValue
-        ])
-
-        //Update USD input value when in EXPECTED_OUTPUT mode
-        useEffect(() => {
-          if (isUsdInputMode && tradeType === 'EXPECTED_OUTPUT') {
-            if (quote?.details?.currencyIn?.amountUsd && !isFetchingQuote) {
-              // Use quote USD value when available
-              const quoteUsdValue = Number(quote.details.currencyIn.amountUsd)
-              if (!isNaN(quoteUsdValue) && quoteUsdValue >= 0) {
-                setUsdInputValue(quoteUsdValue.toFixed(2))
-              }
-            } else if (!amountInputValue || Number(amountInputValue) === 0) {
-              setUsdInputValue('')
-            }
-          }
-        }, [
-          isUsdInputMode,
-          tradeType,
-          quote?.details?.currencyIn?.amountUsd,
-          isFetchingQuote,
-          amountInputValue
-        ])
-
-        const recipientLinkedWallet = linkedWallets?.find(
-          (wallet) => wallet.address === recipient
-        )
-
-        const handlePrimaryAction = () => {
-          if (fromChainWalletVMSupported) {
-            if (!isValidToAddress || !isValidFromAddress) {
-              if (
-                multiWalletSupportEnabled &&
-                (isValidToAddress ||
-                  (!isValidToAddress && toChainWalletVMSupported))
-              ) {
-                const chain = !isValidFromAddress ? fromChain : toChain
-                if (!address) {
-                  onConnectWallet?.()
-                } else {
-                  onLinkNewWallet?.({
-                    chain,
-                    direction: !isValidFromAddress ? 'from' : 'to'
-                  })?.then((wallet) => {
-                    if (!isValidFromAddress) {
-                      onSetPrimaryWallet?.(wallet.address)
-                    } else {
-                      setDestinationAddressOverride(wallet.address)
-                      setCustomToAddress(undefined)
-                    }
-                  })
-                }
-              } else {
-                setAddressModalOpen(true)
-              }
-            } else {
-              swap()
-            }
-          } else {
-            if (!isValidToAddress) {
-              if (multiWalletSupportEnabled && toChainWalletVMSupported) {
-                if (!address) {
-                  onConnectWallet?.()
-                } else {
-                  onLinkNewWallet?.({
-                    chain: toChain,
-                    direction: 'to'
-                  })?.then((wallet) => {
-                    if (!wallet) {
-                      return
-                    }
-                    setDestinationAddressOverride(wallet.address)
-                    setCustomToAddress(undefined)
-                  })
-                }
-              } else {
-                setAddressModalOpen(true)
-              }
-            } else {
-              const swapEventData = getSwapEventData(
-                quote?.details,
-                quote?.fees,
-                quote?.steps ? (quote?.steps as Execute['steps']) : null,
-                linkedWallet?.connector,
-                quoteParameters
-              )
-              onAnalyticEvent?.(EventNames.SWAP_CTA_CLICKED, swapEventData)
-              setDepositAddressModalOpen(true)
-            }
-          }
-        }
-
-        const linkedWalletsLoading =
-          multiWalletSupportEnabled && linkedWallets === undefined
-        const walletAddressLoading = Boolean(wallet && !address)
-
-        useEffect(() => {
-          if (walletsLoading || linkedWalletsLoading || walletAddressLoading) {
-            return
-          }
-
-          const hasLinkedCompatibleWallet =
-            linkedWallets?.some(
-              (wallet) =>
-                wallet?.vmType && COMPATIBLE_WALLET_VMS.includes(wallet.vmType)
-            ) ?? false
-          const hasCompatibleWallet =
-            Boolean(address && isValidFromAddress) || hasLinkedCompatibleWallet
-          const baseSelected = isBaseUsdcToken(fromToken)
-
-          if (activeTab === 'buy' && !fromToken && !hasCompatibleWallet) {
-            handleSetFromToken(BASE_USDC_TOKEN)
-            autoSelectedFromTokenRef.current = true
-            return
-          }
-
-          if (autoSelectedFromTokenRef.current && !baseSelected) {
-            autoSelectedFromTokenRef.current = false
-          }
-
-          if (
-            autoSelectedFromTokenRef.current &&
-            (activeTab !== 'buy' || hasCompatibleWallet)
-          ) {
-            if (baseSelected) {
-              handleSetFromToken(undefined)
-            }
-            autoSelectedFromTokenRef.current = false
-          }
-        }, [
-          activeTab,
-          address,
-          handleSetFromToken,
-          linkedWallets,
-          fromToken,
-          isValidFromAddress,
-          linkedWalletsLoading,
-          multiWalletSupportEnabled,
-          walletAddressLoading,
-          walletsLoading
-        ])
-
-        const handleTabChange = useCallback(
-          (nextTab: 'buy' | 'sell', updateActiveTab: boolean) => {
-            const prevTab = prevActiveTabRef.current ?? activeTab
-
-            if (nextTab === prevTab && !updateActiveTab) {
-              return
-            }
-
-            setAllowUnsupportedOrigin(nextTab === 'buy')
-            setAllowUnsupportedRecipient(nextTab === 'sell')
-
-            if (nextTab !== prevTab) {
-              const storedNextState = tabTokenStateRef.current[nextTab] ?? {}
-              const storedNextRecipient = tabRecipientRef.current[nextTab] ?? {}
-
-              const prevFromToken = fromToken
-              const prevToToken = toToken
-
-              tabTokenStateRef.current[prevTab] = {
-                fromToken: prevFromToken,
-                toToken: prevToToken
-              }
-              tabRecipientRef.current[prevTab] = {
-                override:
-                  typeof destinationAddressOverride === 'string'
-                    ? destinationAddressOverride
-                    : undefined,
-                custom:
-                  typeof customToAddress === 'string'
-                    ? customToAddress
-                    : undefined
-              }
-
-              let nextFromToken: Token | undefined
-              let nextToToken: Token | undefined
-
-              if (nextTab === 'sell') {
-                // Selling the page token: default to previously viewed token (prevToToken)
-                nextFromToken =
-                  storedNextState.fromToken ??
-                  prevToToken ??
-                  prevFromToken ??
-                  undefined
-                // Payout token should remain empty unless user explicitly selected it on sell
-                nextToToken = storedNextState.toToken ?? undefined
-              } else {
-                // Buying the page token: default output token is prev page token
-                nextToToken =
-                  storedNextState.toToken ??
-                  prevFromToken ??
-                  prevToToken ??
-                  undefined
-                // Payment method stays empty unless explicitly chosen on buy
-                nextFromToken = storedNextState.fromToken ?? undefined
-              }
-
-              handleSetFromToken(nextFromToken)
-              handleSetToToken(nextToToken)
-              setDestinationAddressOverride(storedNextRecipient.override)
-              setCustomToAddress(storedNextRecipient.custom)
-
-              // Auto-select first compatible wallet in buy tab if no destination is set
-              if (
-                nextTab === 'buy' &&
-                multiWalletSupportEnabled &&
-                linkedWallets &&
-                linkedWallets.length > 0 &&
-                !storedNextRecipient.override &&
-                !storedNextRecipient.custom
-              ) {
-                const toChainForRecipient = relayClient?.chains?.find(
-                  (c) => c.id === nextToToken?.chainId
-                )
-
-                if (toChainForRecipient) {
-                  const compatibleWallets = linkedWallets.filter(
-                    (wallet) =>
-                      isWalletVmTypeCompatible(
-                        wallet.vmType,
-                        toChainForRecipient.vmType
-                      )
-                  )
-
-                  if (compatibleWallets.length > 0) {
-                    setDestinationAddressOverride(compatibleWallets[0].address)
-                  }
-                }
-              }
-
-              setAmountInputValue('')
-              setAmountOutputValue('')
-              setUsdInputValue('')
-              setUsdOutputValue('')
-              setTokenInputCache('')
-              setIsUsdInputMode(nextTab === 'buy')
-              debouncedAmountInputControls.cancel()
-              debouncedAmountOutputControls.cancel()
-              setOriginAddressOverride(undefined)
-            }
-
-            if (updateActiveTab) {
-              setActiveTab(nextTab)
-            }
-
-            const desiredTradeType: TradeType =
-              nextTab === 'buy' ? 'EXPECTED_OUTPUT' : 'EXACT_INPUT'
-
-            if (tradeType !== desiredTradeType) {
-              setTradeType(desiredTradeType)
-            }
-
-            prevActiveTabRef.current = nextTab
-          },
-          [
-            activeTab,
-            customToAddress,
-            debouncedAmountInputControls,
-            debouncedAmountOutputControls,
-            destinationAddressOverride,
-            fromToken,
-            handleSetFromToken,
-            handleSetToToken,
-            linkedWallets,
-            multiWalletSupportEnabled,
-            relayClient?.chains,
-            setActiveTab,
-            setAllowUnsupportedOrigin,
-            setAllowUnsupportedRecipient,
-            setAmountInputValue,
-            setAmountOutputValue,
-            setCustomToAddress,
-            setDestinationAddressOverride,
-            setIsUsdInputMode,
-            setOriginAddressOverride,
-            setTokenInputCache,
-            setTradeType,
-            setUsdInputValue,
-            setUsdOutputValue,
-            toToken,
-            tradeType
-          ]
-        )
-
-        useEffect(() => {
-          if (prevActiveTabRef.current === activeTab) {
-            return
-          }
-
-          handleTabChange(activeTab, false)
-        }, [activeTab, handleTabChange])
-
-        return (
-          <>
-            <WidgetContainer
-              steps={steps}
-              setSteps={setSteps}
-              quoteInProgress={quoteInProgress}
-              setQuoteInProgress={setQuoteInProgress}
-              transactionModalOpen={transactionModalOpen}
-              setTransactionModalOpen={setTransactionModalOpen}
-              depositAddressModalOpen={depositAddressModalOpen}
-              setDepositAddressModalOpen={setDepositAddressModalOpen}
-              addressModalOpen={addressModalOpen}
-              setAddressModalOpen={setAddressModalOpen}
-              fromToken={fromToken}
-              fromChain={fromChain}
-              toToken={toToken}
-              toChain={toChain}
-              address={address}
-              recipient={recipient}
-              amountInputValue={amountInputValue}
-              amountOutputValue={amountOutputValue}
-              debouncedInputAmountValue={debouncedInputAmountValue}
-              debouncedOutputAmountValue={debouncedOutputAmountValue}
-              tradeType={tradeType}
-              onTransactionModalOpenChange={(open) => {
-                if (!open) {
-                  if (pendingSuccessFlush) {
-                    setPendingSuccessFlush(false)
-                  } else if (steps) {
-                    invalidateQuoteQuery()
-                  }
-                  // Abort ongoing execution
-                  if (abortController) {
-                    abortController.abort()
-                  }
-                  setSwapError(null)
-                  setSteps(null)
-                  setQuoteInProgress(null)
-                } else if (pendingSuccessFlush) {
-                  setPendingSuccessFlush(false)
-                }
-              }}
-              onDepositAddressModalOpenChange={(open) => {
-                if (!open) {
-                  setSwapError(null)
-                  if (pendingSuccessFlush) {
-                    setPendingSuccessFlush(false)
-                  } else {
-                    invalidateQuoteQuery()
-                  }
-                } else if (pendingSuccessFlush) {
-                  setPendingSuccessFlush(false)
-                }
-              }}
-              slippageTolerance={localSlippageTolerance}
-              swapError={swapError}
-              setSwapError={setSwapError}
-              onSwapSuccess={(data) => {
-                setPendingSuccessFlush(true)
-                setAmountInputValue('')
-                setAmountOutputValue('')
-                onSwapSuccess?.(data)
-              }}
-              onSwapValidating={onSwapValidating}
-              onAnalyticEvent={onAnalyticEvent}
-              invalidateBalanceQueries={invalidateBalanceQueries}
-              invalidateQuoteQuery={invalidateQuoteQuery}
-              customToAddress={customToAddress}
-              setCustomToAddress={setCustomToAddress}
-              timeEstimate={timeEstimate}
-              wallet={wallet}
-              linkedWallets={linkedWallets}
-              multiWalletSupportEnabled={multiWalletSupportEnabled}
-            >
-              {() => {
-                return (
-                  <Flex
-                    direction="column"
-                    className="relay-gap-3 relay-w-full relay-relative"
-                  >
-                    <TabsRoot
-                      value={activeTab}
-                      onValueChange={(value) => {
-                        const nextTab = value as 'buy' | 'sell'
-                        handleTabChange(nextTab, true)
-
-                        onAnalyticEvent?.('TAB_SWITCHED', {
-                          tab: value
-                        })
-                      }}
-                    >
-                      <Flex
-                        direction="column"
-                        className="relay-w-full relay-overflow-hidden relay-border-[var(--relay-borders-widget-border)] relay-min-w-[320px] md:relay-min-w-[400px] relay-max-w-[408px]"
-                      >
-                        <TabsList
-                          className="relay-bg-transparent relay-p-0 relay-mb-2"
-                        >
-                          <TabsTrigger
-                            value="buy"
-                            className="relay-p-3 relay-bg-none relay-border relay-border-solid relay-border-transparent relay-text-[color:var(--relay-colors-text-subtle)] data-[state=active]:relay-bg-[var(--relay-colors-widget-background)] data-[state=active]:relay-rounded-[12px] data-[state=active]:relay-border-[var(--relay-colors-slate4)] data-[state=active]:relay-text-[color:var(--relay-colors-text-default)] dark:data-[state=active]:relay-border-[var(--relay-colors-gray4)]"
-                          >
-                            <Text style="subtitle1" className="relay-text-[color:inherit]">
-                              Buy
-                            </Text>
-                          </TabsTrigger>
-                          <TabsTrigger
-                            value="sell"
-                            className="relay-p-3 relay-bg-none relay-border relay-border-solid relay-border-transparent relay-text-[color:var(--relay-colors-text-subtle)] data-[state=active]:relay-bg-[var(--relay-colors-widget-background)] data-[state=active]:relay-rounded-[12px] data-[state=active]:relay-border-[var(--relay-colors-slate4)] data-[state=active]:relay-text-[color:var(--relay-colors-text-default)] dark:data-[state=active]:relay-border-[var(--relay-colors-gray4)]"
-                          >
-                            <Text style="subtitle1" className="relay-text-[color:inherit]">
-                              Sell
-                            </Text>
-                          </TabsTrigger>
-                        </TabsList>
-
-                        <BuyTabContent
-                          {...{
-                            // Slippage configuration
-                            slippageTolerance: localSlippageTolerance,
-                            onOpenSlippageConfig: handleOpenSlippageConfig,
-                            onSlippageToleranceChange:
-                              handleSlippageToleranceChange,
-
-                            // Input/output state
-                            isUsdInputMode,
-                            usdOutputValue,
-                            tradeType,
-                            amountOutputValue,
-                            amountInputValue,
-                            outputAmountUsd,
-                            setUsdOutputValue,
-                            setTradeType,
-                            setAmountOutputValue,
-                            setAmountInputValue,
-                            setUsdInputValue,
-                            toggleInputMode,
-                            debouncedAmountOutputControls,
-
-                            // Tokens and pricing
-                            toToken,
-                            fromToken,
-                            quote,
-                            isFetchingQuote,
-                            isLoadingToTokenPrice,
-                            toTokenPriceData,
-                            handleSetFromToken,
-                            handleSetToToken,
-
-                            // Balance information
-                            feeBreakdown,
-                            isLoadingFromBalance,
-                            fromBalance,
-                            fromBalancePending,
-                            toBalance,
-                            isLoadingToBalance,
-                            toBalancePending,
-                            hasInsufficientBalance,
-
-                            // Wallet and address management
-                            address,
-                            multiWalletSupportEnabled,
-                            linkedWallets,
-                            onSetPrimaryWallet,
-                            setOriginAddressOverride,
-                            onConnectWallet,
-                            onLinkNewWallet,
-                            disablePasteWalletAddressOption,
-                            setAddressModalOpen,
-
-                            // Chain and VM support
-                            fromChain,
-                            toChain,
-                            toChainWalletVMSupported,
-                            fromChainWalletVMSupported,
-                            supportedWalletVMs,
-
-                            // Recipient configuration
-                            recipient,
-                            setCustomToAddress,
-                            setDestinationAddressOverride,
-                            isValidToAddress,
-                            isRecipientLinked,
-                            toDisplayName,
-                            isValidFromAddress,
-                            recipientWalletSupportsChain,
-                            recipientLinkedWallet,
-
-                            // Chain and token locking
-                            lockToToken,
-                            lockFromToken,
-                            isSingleChainLocked,
-                            lockChainId,
-                            popularChainIds,
-
-                            // Modal states
-                            transactionModalOpen,
-                            depositAddressModalOpen,
-
-                            // Error and validation states
-                            error,
-                            isInsufficientLiquidityError,
-                            isSameCurrencySameRecipientSwap,
-                            isCapacityExceededError,
-                            isCouldNotExecuteError,
-
-                            // UI state and interactions
-                            showHighPriceImpactWarning,
-                            onPrimaryAction: handlePrimaryAction,
-                            debouncedInputAmountValue,
-                            debouncedOutputAmountValue,
-
-                            // Fee and estimation
-                            timeEstimate,
-                            relayerFeeProportion,
-                            highRelayerServiceFee,
-
-                            // Event handling and misc
-                            onAnalyticEvent,
-                            toChainVmType: toChain?.vmType,
-                            ctaCopy,
-
-                            // Payment method configuration
-                            paymentMethodMinHeight
-                          }}
-                        />
-
-                        <SellTabContent
-                          {...{
-                            // Slippage configuration
-                            slippageTolerance: localSlippageTolerance,
-                            onOpenSlippageConfig: handleOpenSlippageConfig,
-                            onSlippageToleranceChange:
-                              handleSlippageToleranceChange,
-
-                            // Input/output state
-                            isUsdInputMode,
-                            usdInputValue,
-                            tradeType,
-                            amountInputValue,
-                            amountOutputValue,
-                            conversionRate,
-                            inputAmountUsd,
-                            setUsdInputValue,
-                            setTradeType,
-                            setTokenInputCache,
-                            setAmountInputValue,
-                            setAmountOutputValue,
-                            setUsdOutputValue,
-                            toggleInputMode,
-                            debouncedAmountInputControls,
-
-                            // Tokens and pricing
-                            fromToken,
-                            toToken,
-                            quote,
-                            isFetchingQuote,
-                            fromTokenPriceData,
-                            isLoadingFromTokenPrice,
-                            handleSetFromToken,
-                            handleSetToToken,
-
-                            // Balance information
-                            feeBreakdown,
-                            fromBalance,
-                            isLoadingFromBalance,
-                            toBalance,
-                            isLoadingToBalance,
-                            toBalancePending,
-                            hasInsufficientBalance,
-                            fromBalancePending,
-
-                            // Wallet and address management
-                            address,
-                            multiWalletSupportEnabled,
-                            linkedWallets,
-                            onSetPrimaryWallet,
-                            setOriginAddressOverride,
-                            onConnectWallet,
-                            onLinkNewWallet,
-                            disablePasteWalletAddressOption,
-                            setAddressModalOpen,
-
-                            // Chain and VM support
-                            fromChain,
-                            toChain,
-                            fromChainWalletVMSupported,
-                            toChainWalletVMSupported,
-                            supportedWalletVMs,
-
-                            // Recipient configuration
-                            recipient,
-                            setCustomToAddress,
-                            setDestinationAddressOverride,
-                            isValidToAddress,
-                            isRecipientLinked,
-                            toDisplayName,
-                            isValidFromAddress,
-                            recipientWalletSupportsChain,
-                            recipientLinkedWallet,
-
-                            // Chain and token locking
-                            lockToToken,
-                            lockFromToken,
-                            isSingleChainLocked,
-                            lockChainId,
-                            popularChainIds,
-
-                            // Modal states
-                            transactionModalOpen,
-                            depositAddressModalOpen,
-
-                            // Error and validation states
-                            error,
-                            isInsufficientLiquidityError,
-                            isSameCurrencySameRecipientSwap,
-                            isCapacityExceededError,
-                            isCouldNotExecuteError,
-
-                            // UI state and interactions
-                            showHighPriceImpactWarning,
-                            onPrimaryAction: handlePrimaryAction,
-                            debouncedInputAmountValue,
-                            debouncedOutputAmountValue,
-                            percentOptions: percentageOptions,
-                            onMaxAmountClicked: handleMaxAmountClicked,
-                            publicClient,
-                            isFromNative,
-                            getFeeBufferAmount,
-
-                            // Fee and estimation
-                            timeEstimate,
-                            relayerFeeProportion,
-                            highRelayerServiceFee,
-
-                            // Event handling and misc
-                            onAnalyticEvent,
-                            toChainVmType: toChain?.vmType,
-                            ctaCopy,
-
-                            // Payment method configuration
-                            paymentMethodMinHeight
-                          }}
-                        />
-                      </Flex>
-                    </TabsRoot>
-                  </Flex>
-                )
-              }}
-            </WidgetContainer>
-            <UnverifiedTokenModal
-              open={unverifiedTokens.length > 0}
-              onOpenChange={() => {}}
-              data={
-                unverifiedTokens.length > 0 ? unverifiedTokens[0] : undefined
-              }
-              onDecline={(token, context) => {
-                if (token) {
-                  // Track declined tokens to prevent re-prompting
-                  const tokenKey = `${token.chainId}:${token.address.toLowerCase()}`
-                  declinedTokensRef.current.add(tokenKey)
-
-                  onUnverifiedTokenDecline?.(token, context as 'from' | 'to')
-                }
-                setUnverifiedTokens((prev) =>
-                  prev.filter(
-                    (unverifiedToken) =>
-                      !(
-                        unverifiedToken.context === context &&
-                        unverifiedToken.token.address === token?.address &&
-                        unverifiedToken.token.chainId === token?.chainId
-                      )
-                  )
-                )
-              }}
-              onAcceptToken={(token, context) => {
-                if (token) {
-                  if (context === 'to') {
-                    onAnalyticEvent?.(EventNames.SWAP_TOKEN_SELECT, {
-                      direction: 'output',
-                      token_symbol: token.symbol
-                    })
-                    if (
-                      token.address === fromToken?.address &&
-                      token.chainId === fromToken?.chainId &&
-                      address === recipient &&
-                      (!lockToToken || !fromToken)
-                    ) {
-                      handleSetToToken(fromToken)
-                      handleSetFromToken(toToken)
-                    } else {
-                      handleSetToToken(token)
-                    }
-                  } else if (context === 'from') {
-                    onAnalyticEvent?.(EventNames.SWAP_TOKEN_SELECT, {
-                      direction: 'input',
-                      token_symbol: token.symbol
-                    })
-                    if (
-                      token.address === toToken?.address &&
-                      token.chainId === toToken?.chainId &&
-                      address === recipient &&
-                      (!lockToToken || !fromToken)
-                    ) {
-                      handleSetFromToken(toToken)
-                      handleSetToToken(fromToken)
-                    } else {
-                      handleSetFromToken(token)
-                    }
-                  }
-                }
-                setUnverifiedTokens((prev) =>
-                  prev.filter(
-                    (unverifiedToken) =>
-                      !(
-                        unverifiedToken.token.address === token?.address &&
-                        unverifiedToken.token.chainId === token?.chainId
-                      )
-                  )
-                )
-              }}
-            />
-          </>
-        )
-      }}
-    </TokenWidgetRenderer>
-  )
-}
-
-export default TokenWidget

From 5d0487af6934807ce45e535a7b36b2e27203ea9d Mon Sep 17 00:00:00 2001
From: Ted Palmer <etpalmer17@gmail.com>
Date: Tue, 3 Mar 2026 12:38:34 -0500
Subject: [PATCH 12/25] Remove design-system

---
 .gitignore                          |  5 ----
 packages/design-system/package.json | 42 -----------------------------
 packages/ui/src/styles/base.css     |  6 +++--
 packages/ui/tsconfig.json           |  4 +--
 4 files changed, 5 insertions(+), 52 deletions(-)
 delete mode 100644 packages/design-system/package.json

diff --git a/.gitignore b/.gitignore
index ddc181637..da905d254 100644
--- a/.gitignore
+++ b/.gitignore
@@ -179,10 +179,5 @@ dist
 _cjs
 _esm
 _types
-## Panda
-styled-system
-styled-system-studio
 dist
-design-system
-!design-system/package.json
 **/src/version.ts
\ No newline at end of file
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
deleted file mode 100644
index 0588b9f77..000000000
--- a/packages/design-system/package.json
+++ /dev/null
@@ -1,42 +0,0 @@
-{
-  "name": "@relayprotocol/relay-design-system",
-  "description": "This package is auto-generated by Panda CSS",
-  "version": "1.0.0",
-  "type": "module",
-  "exports": {
-    "./css": {
-      "types": "./css/index.d.ts",
-      "require": "./css/index.mjs",
-      "import": "./css/index.mjs"
-    },
-    "./jsx": {
-      "types": "./jsx/index.d.ts",
-      "require": "./jsx/index.mjs",
-      "import": "./jsx/index.mjs"
-    },
-    "./patterns": {
-      "types": "./patterns/index.d.ts",
-      "require": "./patterns/index.mjs",
-      "import": "./patterns/index.mjs"
-    },
-    "./recipes": {
-      "types": "./recipes/index.d.ts",
-      "require": "./recipes/index.mjs",
-      "import": "./recipes/index.mjs"
-    },
-    "./themes": {
-      "types": "./themes/index.d.ts",
-      "require": "./themes/index.mjs",
-      "import": "./themes/index.mjs"
-    },
-    "./tokens": {
-      "types": "./tokens/index.d.ts",
-      "require": "./tokens/index.mjs",
-      "import": "./tokens/index.mjs"
-    },
-    "./types": {
-      "types": "./types/index.d.ts"
-    },
-    "./styles.css": "./styles.css"
-  }
-}
\ No newline at end of file
diff --git a/packages/ui/src/styles/base.css b/packages/ui/src/styles/base.css
index 4e1a671bd..45534e17a 100644
--- a/packages/ui/src/styles/base.css
+++ b/packages/ui/src/styles/base.css
@@ -865,8 +865,10 @@
   }
 }
 
-/* High-specificity inset focus ring — matches old PandaCSS :not(#\#) pattern */
-.relay-focus-inset:is(:focus-visible, [data-focus]) {
+/* Inset focus ring for keyboard-navigable list items.
+   Uses :focus (not :focus-visible) for Firefox compatibility —
+   Firefox won't trigger :focus-visible on programmatic .focus() calls. */
+.relay-focus-inset:is(:focus, [data-focus]) {
   box-shadow: inset 0 0 0 2px var(--relay-colors-focus-color) !important;
   outline: none !important;
   --tw-ring-shadow: 0 0 #0000 !important;
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index c11dc19ae..53466b5de 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -9,9 +9,7 @@
       "~sdk/*": ["./src/*"],
       "@relayprotocol/relay-sdk": ["./packages/sdk/src"],
       "@relayprotocol/relay-kit-ui": ["./packages/ui/src"],
-      "@relayprotocol/relay-kit-hooks": ["./packages/hooks/src"],
-      "@relayprotocol/relay-design-system": ["./packages/design-system"],
-      "@relayprotocol/relay-design-system/OnrampWidget": ["./packages/ui/src/components/widgets/OnrampWidget"],
+      "@relayprotocol/relay-kit-hooks": ["./packages/hooks/src"]
     }
   },
   "watchOptions": {

From 8b11996b80c9f920fd2d00f80cd1347dcb66cd9a Mon Sep 17 00:00:00 2001
From: Ted Palmer <etpalmer17@gmail.com>
Date: Tue, 3 Mar 2026 13:27:07 -0500
Subject: [PATCH 13/25] Fix widget container bg and token selector

---
 .../providers/RelayKitProviderWrapper.tsx       |  2 +-
 demo/pages/_app.tsx                             |  7 ++++++-
 demo/pages/ui/swap.tsx                          | 17 +++++++++--------
 .../TokenSelector/triggers/TokenTrigger.tsx     |  4 ++--
 packages/ui/src/styles/base.css                 |  3 ++-
 5 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/demo/components/providers/RelayKitProviderWrapper.tsx b/demo/components/providers/RelayKitProviderWrapper.tsx
index e2b58e159..586a7e793 100644
--- a/demo/components/providers/RelayKitProviderWrapper.tsx
+++ b/demo/components/providers/RelayKitProviderWrapper.tsx
@@ -18,7 +18,7 @@ const DEFAULT_APP_FEES = [
 
 const BASE_THEME = {
   font: 'var(--font-inter), -apple-system, Helvetica, sans-serif',
-  fontHeading: 'var(--font-inter), -apple-system, Helvetica, sans-serif'
+  fontHeading: 'Chivo, -apple-system, Helvetica, sans-serif'
 }
 
 export const RelayKitProviderWrapper: FC<{
diff --git a/demo/pages/_app.tsx b/demo/pages/_app.tsx
index de4be4fb3..3a0d205fc 100644
--- a/demo/pages/_app.tsx
+++ b/demo/pages/_app.tsx
@@ -131,7 +131,12 @@ const AppWrapper: FC<AppWrapperProps> = ({ children, dynamicChains }) => {
   }, [])
 
   return (
-    <div style={{ fontFamily: 'var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif' }}>
+    <div
+      style={{
+        fontFamily:
+          'var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif'
+      }}
+    >
       <ThemeProvider
         attribute="class"
         defaultTheme="light"
diff --git a/demo/pages/ui/swap.tsx b/demo/pages/ui/swap.tsx
index 28be9ae45..4b101228c 100644
--- a/demo/pages/ui/swap.tsx
+++ b/demo/pages/ui/swap.tsx
@@ -46,14 +46,15 @@ const SwapWidgetPage: NextPage = () => {
       setLinkWalletPromise(undefined)
     }
   })
-  const [fromToken, setFromToken] = useState<Token | undefined>({
-    chainId: 8453,
-    address: '0x0000000000000000000000000000000000000000',
-    decimals: 18,
-    name: 'ETH',
-    symbol: 'ETH',
-    logoURI: 'https://assets.relay.link/icons/currencies/eth.png'
-  })
+  const [fromToken, setFromToken] = useState<Token | undefined>()
+  //   {
+  //   chainId: 8453,
+  //   address: '0x0000000000000000000000000000000000000000',
+  //   decimals: 18,
+  //   name: 'ETH',
+  //   symbol: 'ETH',
+  //   logoURI: 'https://assets.relay.link/icons/currencies/eth.png'
+  // }
   const [toToken, setToToken] = useState<Token | undefined>({
     chainId: 10,
     address: '0x0000000000000000000000000000000000000000',
diff --git a/packages/ui/src/components/common/TokenSelector/triggers/TokenTrigger.tsx b/packages/ui/src/components/common/TokenSelector/triggers/TokenTrigger.tsx
index ae5bf1e3f..f713f1d2f 100644
--- a/packages/ui/src/components/common/TokenSelector/triggers/TokenTrigger.tsx
+++ b/packages/ui/src/components/common/TokenSelector/triggers/TokenTrigger.tsx
@@ -34,7 +34,7 @@ export const TokenTrigger: FC<TokenTriggerProps> = ({
       corners="pill"
       size="none"
       disabled={locked}
-      className="relay-w-max relay-shrink-0 relay-overflow-hidden relay-px-3 relay-py-2 relay-bg-[var(--relay-colors-widget-selector-background)] relay-border-none hover:relay-bg-[var(--relay-colors-widget-selector-hover-background)] disabled:relay-bg-[var(--relay-colors-widget-selector-background)] relay-transition-colors relay-duration-150"
+      className="relay-w-max relay-h-[50px] relay-shrink-0 relay-overflow-hidden relay-px-3 relay-bg-[var(--relay-colors-widget-selector-background)] relay-border-none hover:relay-bg-[var(--relay-colors-widget-selector-hover-background)] disabled:relay-bg-[var(--relay-colors-widget-selector-background)] relay-transition-colors relay-duration-150"
       data-testid={testId}
     >
       <Flex align="center" className="relay-gap-2">
@@ -74,7 +74,7 @@ export const TokenTrigger: FC<TokenTriggerProps> = ({
       corners="pill"
       size="none"
       cta={true}
-      className="relay-w-max relay-shrink-0 relay-overflow-hidden relay-px-3 relay-py-2 relay-font-bold relay-text-[16px]"
+      className="relay-w-max relay-h-[50px] relay-shrink-0 relay-overflow-hidden relay-px-3 relay-font-bold relay-text-[16px]"
     >
       Select Token
       <Box className="relay-w-[14px]">
diff --git a/packages/ui/src/styles/base.css b/packages/ui/src/styles/base.css
index 45534e17a..c2854f9af 100644
--- a/packages/ui/src/styles/base.css
+++ b/packages/ui/src/styles/base.css
@@ -691,7 +691,7 @@
 
   /* Widget */
   --relay-colors-widget-background: white;
-  --relay-colors-widget-card-background: var(--relay-colors-gray-1);
+  --relay-colors-widget-card-background: white;
   --relay-colors-widget-selector-background: var(--relay-colors-gray-2);
   --relay-colors-widget-selector-hover-background: var(--relay-colors-gray-3);
   --relay-colors-widget-swap-currency-button-border-color: var(--relay-colors-primary4);
@@ -726,6 +726,7 @@
 
   /* Widget/Modal backgrounds */
   --relay-colors-widget-background: var(--relay-colors-gray-1);
+  --relay-colors-widget-card-background: var(--relay-colors-gray-1);
   --relay-colors-modal-background: var(--relay-colors-gray-1);
 
   /* Radix scale dark overrides */

From c86ffd18a00d9e8b509343a864fa5781da163f70 Mon Sep 17 00:00:00 2001
From: Ted Palmer <etpalmer17@gmail.com>
Date: Tue, 3 Mar 2026 14:15:28 -0500
Subject: [PATCH 14/25] fix buton issue

---
 packages/ui/src/components/primitives/Button.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/ui/src/components/primitives/Button.tsx b/packages/ui/src/components/primitives/Button.tsx
index 3a357156c..55b320e79 100644
--- a/packages/ui/src/components/primitives/Button.tsx
+++ b/packages/ui/src/components/primitives/Button.tsx
@@ -8,10 +8,8 @@ const buttonVariants = cva(
     'relay-transition-all relay-duration-200 relay-ease-out relay-select-none',
     'relay-gap-2 relay-inline-flex relay-items-center relay-leading-[20px]',
     'focus-visible:relay-ring-2 focus-visible:relay-ring-[var(--relay-colors-focus-color)] focus-visible:relay-ring-offset-2',
-    'active:relay-scale-[0.98]',
     'disabled:relay-cursor-not-allowed disabled:relay-bg-[var(--relay-colors-button-disabled-background)] disabled:relay-text-[color:var(--relay-colors-button-disabled-color)]',
-    'disabled:hover:relay-bg-[var(--relay-colors-button-disabled-background)] disabled:hover:relay-text-[color:var(--relay-colors-button-disabled-color)]',
-    'disabled:active:relay-scale-100'
+    'disabled:hover:relay-bg-[var(--relay-colors-button-disabled-background)] disabled:hover:relay-text-[color:var(--relay-colors-button-disabled-color)]'
   ].join(' '),
   {
     variants: {

From 346d984bbffcfb066739b6467065ae76ce2ab945 Mon Sep 17 00:00:00 2001
From: Ted Palmer <etpalmer17@gmail.com>
Date: Tue, 3 Mar 2026 14:17:22 -0500
Subject: [PATCH 15/25] add back from token to demo

---
 demo/pages/ui/swap.tsx | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/demo/pages/ui/swap.tsx b/demo/pages/ui/swap.tsx
index 4b101228c..28be9ae45 100644
--- a/demo/pages/ui/swap.tsx
+++ b/demo/pages/ui/swap.tsx
@@ -46,15 +46,14 @@ const SwapWidgetPage: NextPage = () => {
       setLinkWalletPromise(undefined)
     }
   })
-  const [fromToken, setFromToken] = useState<Token | undefined>()
-  //   {
-  //   chainId: 8453,
-  //   address: '0x0000000000000000000000000000000000000000',
-  //   decimals: 18,
-  //   name: 'ETH',
-  //   symbol: 'ETH',
-  //   logoURI: 'https://assets.relay.link/icons/currencies/eth.png'
-  // }
+  const [fromToken, setFromToken] = useState<Token | undefined>({
+    chainId: 8453,
+    address: '0x0000000000000000000000000000000000000000',
+    decimals: 18,
+    name: 'ETH',
+    symbol: 'ETH',
+    logoURI: 'https://assets.relay.link/icons/currencies/eth.png'
+  })
   const [toToken, setToToken] = useState<Token | undefined>({
     chainId: 10,
     address: '0x0000000000000000000000000000000000000000',

From 86845aab78cbe036adc0655ec34e146cc0ea0703 Mon Sep 17 00:00:00 2001
From: Ted Palmer <etpalmer17@gmail.com>
Date: Tue, 3 Mar 2026 14:25:33 -0500
Subject: [PATCH 16/25] Update dark3 color

---
 packages/ui/src/styles/base.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/styles/base.css b/packages/ui/src/styles/base.css
index c2854f9af..ccdaa1f66 100644
--- a/packages/ui/src/styles/base.css
+++ b/packages/ui/src/styles/base.css
@@ -257,7 +257,7 @@
 
   --relay-colors-violet-dark-1: #0E0E23;
   --relay-colors-violet-dark-2: #141331;
-  --relay-colors-violet-dark-3: #002216;
+  --relay-colors-violet-dark-3: #216;
   --relay-colors-violet-dark-4: #2F0093;
   --relay-colors-violet-dark-5: #3800A8;
   --relay-colors-violet-dark-6: #4016B8;

From fcd4bc75b8617b7b032625b3cf17990ef63aa1ed Mon Sep 17 00:00:00 2001
From: Ted Palmer <etpalmer17@gmail.com>
Date: Tue, 3 Mar 2026 14:27:55 -0500
Subject: [PATCH 17/25] Add back but down scale on press

---
 packages/ui/src/components/primitives/Button.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/primitives/Button.tsx b/packages/ui/src/components/primitives/Button.tsx
index 55b320e79..3a357156c 100644
--- a/packages/ui/src/components/primitives/Button.tsx
+++ b/packages/ui/src/components/primitives/Button.tsx
@@ -8,8 +8,10 @@ const buttonVariants = cva(
     'relay-transition-all relay-duration-200 relay-ease-out relay-select-none',
     'relay-gap-2 relay-inline-flex relay-items-center relay-leading-[20px]',
     'focus-visible:relay-ring-2 focus-visible:relay-ring-[var(--relay-colors-focus-color)] focus-visible:relay-ring-offset-2',
+    'active:relay-scale-[0.98]',
     'disabled:relay-cursor-not-allowed disabled:relay-bg-[var(--relay-colors-button-disabled-background)] disabled:relay-text-[color:var(--relay-colors-button-disabled-color)]',
-    'disabled:hover:relay-bg-[var(--relay-colors-button-disabled-background)] disabled:hover:relay-text-[color:var(--relay-colors-button-disabled-color)]'
+    'disabled:hover:relay-bg-[var(--relay-colors-button-disabled-background)] disabled:hover:relay-text-[color:var(--relay-colors-button-disabled-color)]',
+    'disabled:active:relay-scale-100'
   ].join(' '),
   {
     variants: {

From 7628f360d673b540466fe43920fb2fb1e1c8ae3a Mon Sep 17 00:00:00 2001
From: Ted Palmer <etpalmer17@gmail.com>
Date: Tue, 3 Mar 2026 14:58:39 -0500
Subject: [PATCH 18/25] Update animate in icon

---
 .../common/TransactionModal/steps/ErrorStep.tsx           | 2 +-
 .../common/TransactionModal/steps/SwapSuccessStep.tsx     | 4 ++--
 packages/ui/tailwind.config.ts                            | 8 ++++++++
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/common/TransactionModal/steps/ErrorStep.tsx b/packages/ui/src/components/common/TransactionModal/steps/ErrorStep.tsx
index 310824d7f..14b0d6d02 100644
--- a/packages/ui/src/components/common/TransactionModal/steps/ErrorStep.tsx
+++ b/packages/ui/src/components/common/TransactionModal/steps/ErrorStep.tsx
@@ -110,7 +110,7 @@ export const ErrorStep: FC<ErrorStepProps> = ({
       justify="between"
       className="relay-w-full"
     >
-      <div className="relay-animate-content-fade-in">
+      <div className="relay-animate-icon-pop-in">
         {isRefund ? (
           <Box className="relay-mr-2 relay-text-[color:var(--relay-colors-gray9)]">
             <FontAwesomeIcon icon={faRotateRight} className="relay-h-[40px]" />
diff --git a/packages/ui/src/components/common/TransactionModal/steps/SwapSuccessStep.tsx b/packages/ui/src/components/common/TransactionModal/steps/SwapSuccessStep.tsx
index 5aaaa4bcc..eb0a7845a 100644
--- a/packages/ui/src/components/common/TransactionModal/steps/SwapSuccessStep.tsx
+++ b/packages/ui/src/components/common/TransactionModal/steps/SwapSuccessStep.tsx
@@ -167,7 +167,7 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
   return isDelayedTx ? (
     <>
       <Flex direction="column" align="center" justify="between">
-        <div className="relay-animate-content-fade-in">
+        <div className="relay-animate-icon-pop-in">
           <Flex
             align="center"
             justify="center"
@@ -352,7 +352,7 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
   ) : (
     <>
       <Flex direction="column" align="center" justify="between">
-        <div className="relay-animate-content-fade-in">
+        <div className="relay-animate-icon-pop-in">
           <Flex align="center">
             <RelayIcon />
             <Flex
diff --git a/packages/ui/tailwind.config.ts b/packages/ui/tailwind.config.ts
index 6354f5169..a2806d9ab 100644
--- a/packages/ui/tailwind.config.ts
+++ b/packages/ui/tailwind.config.ts
@@ -88,6 +88,13 @@ export default {
           from: { opacity: '0', transform: 'translateY(4px)' },
           to: { opacity: '1', transform: 'translateY(0)' }
         },
+        'icon-pop-in': {
+          '0%': { transform: 'scale(0)' },
+          '50%': { transform: 'scale(1.12)' },
+          '70%': { transform: 'scale(0.95)' },
+          '85%': { transform: 'scale(1.03)' },
+          '100%': { transform: 'scale(1)' }
+        },
         'scale-in': {
           from: { opacity: '0', transform: 'translate(-50%, -50%) scale(0.95)' },
           to: { opacity: '1', transform: 'translate(-50%, -50%) scale(1)' }
@@ -118,6 +125,7 @@ export default {
         'dialog-fade-in': 'dialog-fade-in 100ms linear',
         'dialog-fade-out': 'dialog-fade-out 100ms linear',
         'content-fade-in': 'content-fade-in 250ms cubic-bezier(0.16, 1, 0.3, 1)',
+        'icon-pop-in': 'icon-pop-in 600ms cubic-bezier(0.22, 1, 0.36, 1)',
         'scale-in': 'scale-in 200ms cubic-bezier(0.16, 1, 0.3, 1) forwards',
         'scale-out': 'scale-out 150ms ease-in forwards',
         'overlay-fade-in': 'overlay-fade-in 150ms ease-out',

From 05c4d7ef60345d0a8d65a472c007b505b9715d8f Mon Sep 17 00:00:00 2001
From: Ted Palmer <etpalmer17@gmail.com>
Date: Tue, 3 Mar 2026 15:01:36 -0500
Subject: [PATCH 19/25] feat: changeset

---
 .changeset/rich-eagles-roll.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/rich-eagles-roll.md

diff --git a/.changeset/rich-eagles-roll.md b/.changeset/rich-eagles-roll.md
new file mode 100644
index 000000000..03646df12
--- /dev/null
+++ b/.changeset/rich-eagles-roll.md
@@ -0,0 +1,5 @@
+---
+'@relayprotocol/relay-kit-ui': major
+---
+
+Migrate styling system from Panda CSS to Tailwind CSS

From 71425cf0c62630f9f1193e76773a811903158eb7 Mon Sep 17 00:00:00 2001
From: Ted Palmer <etpalmer17@gmail.com>
Date: Tue, 3 Mar 2026 16:50:07 -0500
Subject: [PATCH 20/25] Upgrade to tailwind v4

---
 packages/ui/package.json                      |  11 +-
 packages/ui/postcss.config.mjs                |   3 +-
 packages/ui/scripts/scope-css.mjs             |  52 +-
 .../ui/src/components/common/AmountInput.tsx  |   8 +-
 .../src/components/common/BalanceDisplay.tsx  |   4 +-
 .../src/components/common/CopyToClipBoard.tsx |   2 +-
 .../components/common/CustomAddressModal.tsx  |  28 +-
 .../ui/src/components/common/ErrorWell.tsx    |  10 +-
 .../src/components/common/LoadingSpinner.tsx  |   2 +-
 packages/ui/src/components/common/Modal.tsx   |   8 +-
 .../components/common/MultiWalletDropdown.tsx |  22 +-
 .../components/common/PercentageButtons.tsx   |  28 +-
 .../common/SlippageToleranceConfig.tsx        |  50 +-
 .../ui/src/components/common/StepIcon.tsx     |   2 +-
 .../common/TokenSelector/ChainFilter.tsx      |  52 +-
 .../common/TokenSelector/ChainFilterRow.tsx   |  24 +-
 .../TokenSelector/ChainFilterSidebar.tsx      |  40 +-
 .../common/TokenSelector/ChainShortcuts.tsx   |  14 +-
 .../TokenSelector/CompactChainFilter.tsx      |  28 +-
 .../TokenSelector/MobileChainSelector.tsx     |  46 +-
 .../common/TokenSelector/PaymentMethod.tsx    |  38 +-
 .../common/TokenSelector/PaymentTokenList.tsx |  38 +-
 .../common/TokenSelector/SuggestedTokens.tsx  |   4 +-
 .../common/TokenSelector/TagPill.tsx          |   2 +-
 .../common/TokenSelector/TokenList.tsx        |  40 +-
 .../common/TokenSelector/TokenSelector.tsx    |  48 +-
 .../triggers/PaymentMethodTrigger.tsx         |  24 +-
 .../TokenSelector/triggers/TokenTrigger.tsx   |  18 +-
 .../TransactionModal/DepositAddressModal.tsx  |   6 +-
 .../DepositAddressModalRenderer.tsx           |   2 +-
 .../TransactionModal/TransactionModal.tsx     |   6 +-
 .../steps/ApprovalPlusSwapStep.tsx            |  46 +-
 .../steps/DepositAddressValidatingStep.tsx    |  10 +-
 .../TransactionModal/steps/ErrorStep.tsx      |  46 +-
 .../steps/SwapConfirmationStep.tsx            |  54 +-
 .../steps/SwapSuccessStep.tsx                 |  80 +-
 .../steps/TransactionsByChain.tsx             |  12 +-
 .../steps/WaitingForDepositStep.tsx           |  36 +-
 .../common/UnverifiedTokenModal.tsx           |  32 +-
 .../components/primitives/AccessibleList.tsx  |   4 +-
 .../ui/src/components/primitives/Anchor.tsx   |  20 +-
 .../ui/src/components/primitives/Button.tsx   |  84 +-
 .../src/components/primitives/ChainIcon.tsx   |   2 +-
 .../components/primitives/ChainTokenIcon.tsx  |   6 +-
 .../src/components/primitives/Collapsible.tsx |  10 +-
 .../ui/src/components/primitives/Dialog.tsx   |  42 +-
 .../ui/src/components/primitives/Dropdown.tsx |  24 +-
 .../ui/src/components/primitives/Flex.tsx     |  36 +-
 .../ui/src/components/primitives/Input.tsx    |  30 +-
 .../ui/src/components/primitives/Pill.tsx     |  24 +-
 .../ui/src/components/primitives/Skeleton.tsx |   2 +-
 .../components/primitives/SlippageButton.tsx  |   2 +-
 .../ui/src/components/primitives/Switch.tsx   |  24 +-
 .../ui/src/components/primitives/Tabs.tsx     |  16 +-
 .../ui/src/components/primitives/Text.tsx     |  58 +-
 .../ui/src/components/primitives/Tooltip.tsx  |  10 +-
 .../src/components/widgets/FeeBreakdown.tsx   |  52 +-
 .../widgets/FetchingQuoteLoader.tsx           |   4 +-
 .../OnrampWidget/modals/OnrampModal.tsx       |   2 +-
 .../modals/steps/OnrampConfirmingStep.tsx     |  16 +-
 .../modals/steps/OnrampMoonPayStep.tsx        |  12 +-
 .../steps/OnrampProcessingPassthroughStep.tsx |  26 +-
 .../modals/steps/OnrampProcessingStepUI.tsx   |  42 +-
 .../modals/steps/OnrampSuccessStep.tsx        |  34 +-
 .../OnrampWidget/widget/FiatCurrencyModal.tsx |  44 +-
 .../widgets/OnrampWidget/widget/index.tsx     |  50 +-
 .../components/widgets/PriceImpactTooltip.tsx |  20 +-
 .../ui/src/components/widgets/SwapButton.tsx  |   8 +-
 .../widgets/SwapWidget/GasTopUpSection.tsx    |   6 +-
 .../widgets/SwapWidget/PriceImpact.tsx        |   6 +-
 .../components/widgets/SwapWidget/index.tsx   |  78 +-
 .../widgets/TokenSelectorContainer.tsx        |   2 +-
 .../components/widgets/WidgetErrorWell.tsx    |  32 +-
 packages/ui/src/styles/base.css               | 116 ++-
 packages/ui/src/utils/cn.ts                   |   6 +-
 packages/ui/src/utils/steps.ts                |   4 +-
 packages/ui/tailwind.config.ts                | 140 ---
 pnpm-lock.yaml                                | 853 ++++++++++--------
 78 files changed, 1472 insertions(+), 1451 deletions(-)
 delete mode 100644 packages/ui/tailwind.config.ts

diff --git a/packages/ui/package.json b/packages/ui/package.json
index 7d08633e7..af3ccfc22 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -32,12 +32,12 @@
     "build:cjs": "tsc --project ./tsconfig.build.json --module commonjs --outDir ./_cjs --removeComments --verbatimModuleSyntax false && printf '{\"type\":\"commonjs\"}' > ./_cjs/package.json",
     "build:esm": "tsc --project ./tsconfig.build.json --module es2020 --outDir ./_esm && printf '{\"type\": \"module\",\"sideEffects\":false}' > ./_esm/package.json",
     "build:types": "tsc --project ./tsconfig.build.json --module esnext --outDir ./_types --declarationDir ./_types --emitDeclarationOnly --declaration --declarationMap",
-    "build:css": "mkdir -p dist && tailwindcss -i src/styles/base.css -o dist/styles.css --config tailwind.config.ts --minify && node scripts/scope-css.mjs",
+    "build:css": "mkdir -p dist && npx @tailwindcss/cli -i src/styles/base.css -o dist/styles.css --minify && node scripts/scope-css.mjs",
     "copy:css": "cp dist/styles.css _cjs/src && cp dist/styles.css _esm/src",
     "dev": "concurrently \"pnpm run clean\" \"pnpm run dev:esm\" \"pnpm run dev:types\" \"pnpm run dev:css\"",
     "dev:esm": "tsc --watch --project ./tsconfig.build.json --module es2020 --outDir ./_esm && printf '{\"type\": \"module\",\"sideEffects\":false}' > ./_esm/package.json",
     "dev:types": "tsc --watch --project ./tsconfig.build.json --module esnext --outDir ./_types --declarationDir ./_types --emitDeclarationOnly --declaration --declarationMap",
-    "dev:css": "tailwindcss -i src/styles/base.css -o dist/styles.css --config tailwind.config.ts --watch",
+    "dev:css": "npx @tailwindcss/cli -i src/styles/base.css -o dist/styles.css --watch",
     "clean": "rimraf ./_esm ./_cjs ./_types",
     "typecheck": "tsc --noEmit",
     "lint": "pnpm eslint"
@@ -45,7 +45,8 @@
   "devDependencies": {
     "@eslint/js": "^9.5.0",
     "@types/eslint__js": "^8.42.3",
-    "autoprefixer": "^10.4.0",
+    "@tailwindcss/cli": "^4.0.0",
+    "@tailwindcss/postcss": "^4.0.0",
     "eslint": "~8.57.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-react": "^7.34.2",
@@ -54,7 +55,7 @@
     "node-fetch": "^3.3.2",
     "postcss": "^8",
     "rimraf": "^5.0.5",
-    "tailwindcss": "^3.4.0",
+    "tailwindcss": "^4.0.0",
     "typescript": "5.4.5",
     "typescript-eslint": "^7.13.1",
     "@types/react": "^19.0.0",
@@ -95,7 +96,7 @@
     "dayjs": "^1.11.11",
     "fuse.js": "^7.0.0",
     "qrcode.react": "^4.1.0",
-    "tailwind-merge": "^2.2.0",
+    "tailwind-merge": "^3.0.0",
     "usehooks-ts": "^3.1.0"
   },
   "keywords": [
diff --git a/packages/ui/postcss.config.mjs b/packages/ui/postcss.config.mjs
index 2b75bd8a7..1d5a3b24f 100644
--- a/packages/ui/postcss.config.mjs
+++ b/packages/ui/postcss.config.mjs
@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {}
+    '@tailwindcss/postcss': {}
   }
 }
diff --git a/packages/ui/scripts/scope-css.mjs b/packages/ui/scripts/scope-css.mjs
index bf921919f..9f1fae746 100644
--- a/packages/ui/scripts/scope-css.mjs
+++ b/packages/ui/scripts/scope-css.mjs
@@ -1,8 +1,16 @@
 /**
- * Post-processes dist/styles.css to scope Tailwind's global
- * `*, ::before, ::after` and `::backdrop` CSS variable initialization
- * blocks to `.relay-kit-reset`. This prevents the component library
- * from polluting the consuming app's global CSS namespace.
+ * Post-processes dist/styles.css to scope Tailwind v4's global
+ * CSS declarations to `.relay-kit-reset`. This prevents the component
+ * library from polluting the consuming app's global CSS namespace.
+ *
+ * Tailwind v4 generates:
+ * 1. @layer theme { :root, :host { --relay-* } }
+ *    → Scope :root,:host to .relay-kit-reset
+ * 2. @property --tw-* { ... }
+ *    → Cannot be scoped (global by CSS spec). Low risk since
+ *      they use inherits:false and --tw-* names.
+ * 3. @layer properties { @supports(...) { *, ::before, ::after, ::backdrop { --tw-* } } }
+ *    → Scope to .relay-kit-reset (fallback for browsers without @property)
  */
 import { readFileSync, writeFileSync } from 'fs'
 import { resolve, dirname } from 'path'
@@ -13,38 +21,32 @@ const cssPath = resolve(__dirname, '../dist/styles.css')
 
 let css = readFileSync(cssPath, 'utf-8')
 
-// Pattern: `*, :after, :before { --tw-*: ...; --tw-*: ...; }`
-// This block only contains --tw-* CSS custom property declarations.
-// Scope it to .relay-kit-reset so it doesn't apply globally.
+// 1. Scope the theme layer's `:root, :host` block.
+// Pattern: `@layer theme { :root, :host { ... } }`
+// We scope each selector to `.relay-kit-reset`.
 css = css.replace(
-  /(\*\s*,\s*(?::after|::after)\s*,\s*(?::before|::before))\s*\{([^}]*)\}/g,
-  (match, selector, body) => {
-    // Only scope if the block contains exclusively --tw-* declarations
-    const declarations = body.split(';').map((d) => d.trim()).filter(Boolean)
-    const allTwVars = declarations.every((d) => d.startsWith('--tw-'))
-    if (allTwVars) {
-      const scoped = selector
-        .split(',')
-        .map((s) => `.relay-kit-reset ${s.trim()}`)
-        .join(',')
-      return `${scoped}{${body}}`
-    }
-    return match
-  }
+  /(@layer\s+theme\s*\{)\s*(:root\s*,\s*:host)\s*\{/,
+  '$1\n  .relay-kit-reset {'
 )
 
-// Pattern: `::backdrop { --tw-*: ...; }`
+// 2. Scope the properties layer's `*, ::before, ::after, ::backdrop` block.
+// Pattern: `*, ::before, ::after, ::backdrop { --tw-*: ...; }`
+// This is inside @layer properties { @supports(...) { ... } }
 css = css.replace(
-  /(?<!\S)(::backdrop)\s*\{([^}]*)\}/g,
+  /(\*\s*,\s*::before\s*,\s*::after\s*,\s*::backdrop)\s*\{([^}]*--tw-[^}]*)\}/g,
   (match, selector, body) => {
     const declarations = body.split(';').map((d) => d.trim()).filter(Boolean)
     const allTwVars = declarations.every((d) => d.startsWith('--tw-'))
     if (allTwVars) {
-      return `.relay-kit-reset ${selector}{${body}}`
+      const scoped = selector
+        .split(',')
+        .map((s) => `.relay-kit-reset ${s.trim()}`)
+        .join(', ')
+      return `${scoped} {${body}}`
     }
     return match
   }
 )
 
 writeFileSync(cssPath, css)
-console.log('Scoped Tailwind base variables to .relay-kit-reset')
+console.log('Scoped Tailwind v4 base variables to .relay-kit-reset')
diff --git a/packages/ui/src/components/common/AmountInput.tsx b/packages/ui/src/components/common/AmountInput.tsx
index 27121bc24..2e2747ce5 100644
--- a/packages/ui/src/components/common/AmountInput.tsx
+++ b/packages/ui/src/components/common/AmountInput.tsx
@@ -26,10 +26,10 @@ const AmountInput: FC<Props> = ({
       size="large"
       className={cn(
         'ph-no-capture',
-        'relay-w-full relay-bg-none relay-bg-transparent relay-font-bold relay-text-[32px]',
-        '!relay-px-0 !relay-py-0',
-        'focus:relay-shadow-none focus:relay-outline-none',
-        'placeholder:relay-text-[color:var(--relay-colors-gray12)]',
+        'relay:w-full relay:bg-none relay:bg-transparent relay:font-bold relay:text-[32px]',
+        'relay:!px-0 relay:!py-0',
+        'relay:focus:shadow-none relay:focus:outline-none',
+        'relay:placeholder:text-[color:var(--relay-colors-gray12)]',
         inputProps.className
       )}
       placeholder={inputProps.placeholder ?? '0'}
diff --git a/packages/ui/src/components/common/BalanceDisplay.tsx b/packages/ui/src/components/common/BalanceDisplay.tsx
index e723abf70..9056f4517 100644
--- a/packages/ui/src/components/common/BalanceDisplay.tsx
+++ b/packages/ui/src/components/common/BalanceDisplay.tsx
@@ -35,7 +35,7 @@ export const BalanceDisplay: FC<BalanceDisplayProps> = ({
 
   if (pending) {
     return (
-      <Flex align="center" className="relay-h-[18px]">
+      <Flex align="center" className="relay:h-[18px]">
         <Text style={textStyle} color={'red'}>
           {hideBalanceLabel ? 'pending' : 'Balance: pending'}
         </Text>
@@ -44,7 +44,7 @@ export const BalanceDisplay: FC<BalanceDisplayProps> = ({
   }
 
   return (
-    <Flex align="center" className="relay-h-[18px]">
+    <Flex align="center" className="relay:h-[18px]">
       {isConnected ? (
         <>
           {isLoading ? (
diff --git a/packages/ui/src/components/common/CopyToClipBoard.tsx b/packages/ui/src/components/common/CopyToClipBoard.tsx
index 7114f83f4..f469be220 100644
--- a/packages/ui/src/components/common/CopyToClipBoard.tsx
+++ b/packages/ui/src/components/common/CopyToClipBoard.tsx
@@ -44,7 +44,7 @@ export const CopyToClipBoard: FC<CopyToClipBoardProps> = ({ text }) => {
         style={{ color: 'var(--relay-colors-gray9)' }}
         className="hover:!relay-text-[color:var(--relay-colors-gray11)]"
       >
-        <span className="relay-inline-flex relay-transition-transform relay-duration-150">
+        <span className="relay:inline-flex relay:transition-transform relay:duration-150">
           {isCopied ? (
             <FontAwesomeIcon icon={faCheck} width={16} height={16} />
           ) : (
diff --git a/packages/ui/src/components/common/CustomAddressModal.tsx b/packages/ui/src/components/common/CustomAddressModal.tsx
index d9e7ea3b3..563448f50 100644
--- a/packages/ui/src/components/common/CustomAddressModal.tsx
+++ b/packages/ui/src/components/common/CustomAddressModal.tsx
@@ -172,23 +172,23 @@ export const CustomAddressModal: FC<Props> = ({
       trigger={null}
       open={open}
       onOpenChange={onOpenChange}
-      className="relay-overflow-hidden"
+      className="relay:overflow-hidden"
     >
       <Flex
         direction="column"
-        className="relay-w-full relay-h-full relay-gap-4 sm:relay-w-[386px]"
+        className="relay:w-full relay:h-full relay:gap-4 relay:sm:w-[386px]"
       >
         <Text style="h6">To Address</Text>
-        <Flex direction="column" className="relay-gap-2 relay-relative">
+        <Flex direction="column" className="relay:gap-2 relay:relative">
           <Flex
-            className="relay-relative relay-w-full"
+            className="relay:relative relay:w-full"
           >
             <Input
               type="text"
               inputMode="text"
               autoComplete="off"
               autoCorrect="off"
-              className="ph-no-capture relay-w-full relay-h-12"
+              className="ph-no-capture relay:w-full relay:h-12"
               inputStyle={{
                 paddingRight: input.length > 0 ? '42px' : '16px'
               }}
@@ -210,7 +210,7 @@ export const CustomAddressModal: FC<Props> = ({
               <Button
                 color="ghost"
                 size="none"
-                className="relay-absolute relay-right-[8px] relay-top-1/2 -relay-translate-y-1/2 !relay-w-[24px] !relay-h-[24px] !relay-min-w-0 !relay-min-h-0 !relay-leading-none relay-p-0 relay-rounded relay-flex relay-items-center relay-justify-center relay-bg-[var(--relay-colors-gray3)] !relay-text-[color:var(--relay-colors-gray8)]"
+                className="relay:absolute relay:right-[8px] relay:top-1/2 relay:-translate-y-1/2 relay:!w-[24px] relay:!h-[24px] relay:!min-w-0 relay:!min-h-0 relay:!leading-none relay:p-0 relay:rounded relay:flex relay:items-center relay:justify-center relay:bg-[var(--relay-colors-gray3)] relay:!text-[color:var(--relay-colors-gray8)]"
                 onMouseDown={(e) => {
                   e.preventDefault() // Prevent input from losing focus
                 }}
@@ -222,7 +222,7 @@ export const CustomAddressModal: FC<Props> = ({
               </Button>
             )}
             {isLoading && (
-              <div className="relay-absolute relay-right-2 relay-top-[12px]">
+              <div className="relay:absolute relay:right-2 relay:top-[12px]">
                 <LoadingSpinner />
               </div>
             )}
@@ -246,7 +246,7 @@ export const CustomAddressModal: FC<Props> = ({
 
           {didResolveLighterFromEvm && resolvedLighterIndex ? (
             <Flex
-              className="relay-bg-[var(--relay-colors-green2)] relay-p-2 relay-rounded-lg relay-gap-2"
+              className="relay:bg-[var(--relay-colors-green2)] relay:p-2 relay:rounded-lg relay:gap-2"
               align="center"
             >
               <FontAwesomeIcon
@@ -263,7 +263,7 @@ export const CustomAddressModal: FC<Props> = ({
 
           {!connectedAddressSet && address && isConnected ? (
             <Flex
-              className="relay-bg-[var(--relay-colors-amber2)] relay-p-2 relay-rounded-lg relay-gap-2"
+              className="relay:bg-[var(--relay-colors-amber2)] relay:p-2 relay:rounded-lg relay:gap-2"
               align="center"
             >
               <FontAwesomeIcon
@@ -271,7 +271,7 @@ export const CustomAddressModal: FC<Props> = ({
                 color="#FFA01C"
                 width={16}
                 height={16}
-                className="relay-shrink-0"
+                className="relay:shrink-0"
               />
               <Text style="subtitle3" color="warning">
                 This isn't the connected wallet address. Please ensure that the
@@ -283,7 +283,7 @@ export const CustomAddressModal: FC<Props> = ({
           {!multiWalletSupportEnabled && isConnected ? (
             connectedAddressSet ? (
               <Flex
-                className="relay-bg-[var(--relay-colors-green2)] relay-p-2 relay-rounded-lg relay-gap-2"
+                className="relay:bg-[var(--relay-colors-green2)] relay:p-2 relay:rounded-lg relay:gap-2"
                 align="center"
               >
                 <FontAwesomeIcon
@@ -309,14 +309,14 @@ export const CustomAddressModal: FC<Props> = ({
           {filteredRecentCustomAddresses.length > 0 ? (
             <>
               <Text style="subtitle2">Recent addresses</Text>
-              <Flex className="relay-gap-2 relay-flex-wrap" align="center">
+              <Flex className="relay:gap-2 relay:flex-wrap" align="center">
                 {filteredRecentCustomAddresses.map((address) => (
                   <Pill
                     key={address}
                     color="transparent"
                     bordered
                     radius="squared"
-                    className="relay-flex relay-items-center relay-gap-[6px] relay-cursor-pointer relay-px-2"
+                    className="relay:flex relay:items-center relay:gap-[6px] relay:cursor-pointer relay:px-2"
                     onClick={() => {
                       onConfirmed(address)
                       onOpenChange(false)
@@ -344,7 +344,7 @@ export const CustomAddressModal: FC<Props> = ({
           disabled={
             isLoading || !isValidAddress(toChain?.vmType, address, toChain?.id)
           }
-          className="relay-justify-center"
+          className="relay:justify-center"
           onClick={() => {
             if (isValidAddress(toChain?.vmType, address, toChain?.id)) {
               // Save the address to custom addresses if it's not a connected wallet address
diff --git a/packages/ui/src/components/common/ErrorWell.tsx b/packages/ui/src/components/common/ErrorWell.tsx
index 62337670d..2c0e0693d 100644
--- a/packages/ui/src/components/common/ErrorWell.tsx
+++ b/packages/ui/src/components/common/ErrorWell.tsx
@@ -50,15 +50,15 @@ const ErrorWell: React.FC<Props> = ({ error, hasTxHashes, fromChain }) => {
     <Text
       style="subtitle1"
       className={cn(
-        'relay-my-4 relay-text-center relay-w-full relay-break-words',
+        'relay:my-4 relay:text-center relay:w-full relay:break-words',
         '[overflow-wrap:anywhere]',
         shouldScrollErrorMessage && [
-          'relay-max-h-[min(36vh,220px)] relay-overflow-y-auto relay-px-1',
+          'relay:max-h-[min(36vh,220px)] relay:overflow-y-auto relay:px-1',
           '[scrollbar-width:thin]',
           '[scrollbar-color:var(--relay-colors-gray5)_transparent]',
-          '[&::-webkit-scrollbar]:relay-w-[6px] [&::-webkit-scrollbar]:relay-bg-transparent',
-          '[&::-webkit-scrollbar-track]:relay-bg-transparent',
-          '[&::-webkit-scrollbar-thumb]:relay-bg-[var(--relay-colors-gray5)] [&::-webkit-scrollbar-thumb]:relay-rounded-full'
+          'relay:[&::-webkit-scrollbar]:w-[6px] relay:[&::-webkit-scrollbar]:bg-transparent',
+          'relay:[&::-webkit-scrollbar-track]:bg-transparent',
+          'relay:[&::-webkit-scrollbar-thumb]:bg-[var(--relay-colors-gray5)] relay:[&::-webkit-scrollbar-thumb]:rounded-full'
         ]
       )}
     >
diff --git a/packages/ui/src/components/common/LoadingSpinner.tsx b/packages/ui/src/components/common/LoadingSpinner.tsx
index 2839e1168..410a1adaf 100644
--- a/packages/ui/src/components/common/LoadingSpinner.tsx
+++ b/packages/ui/src/components/common/LoadingSpinner.tsx
@@ -34,7 +34,7 @@ export const LoadingSpinner: FC<{ className?: string }> = ({ className }) => {
   return (
     <SpinnerSVG
       className={cn(
-        'relay-animate-spin relay-fill-[var(--relay-colors-primary-color)]',
+        'relay:animate-spin relay:fill-[var(--relay-colors-primary-color)]',
         className
       )}
     />
diff --git a/packages/ui/src/components/common/Modal.tsx b/packages/ui/src/components/common/Modal.tsx
index a95f5d978..6365273b9 100644
--- a/packages/ui/src/components/common/Modal.tsx
+++ b/packages/ui/src/components/common/Modal.tsx
@@ -47,12 +47,12 @@ export const Modal: FC<
         <DialogPortal forceMount>
           <Overlay
             forceMount
-            className="relay-fixed relay-inset-0 relay-bg-[var(--relay-colors-blackA10)]"
+            className="relay:fixed relay:inset-0 relay:bg-[var(--relay-colors-blackA10)]"
             style={{ zIndex: overlayZIndex }}
           >
             <AnimatedContent
               forceMount
-              className={`relay-border relay-border-solid relay-border-[var(--relay-colors-subtle-border-color)] relay-p-4 ${className ?? ''}`}
+              className={`relay:border relay:border-solid relay:border-[var(--relay-colors-subtle-border-color)] relay:p-4 ${className ?? ''}`}
               style={contentStyle}
               disableAnimation={disableAnimation}
               onPointerDownOutside={props.onPointerDownOutside}
@@ -61,12 +61,12 @@ export const Modal: FC<
               {showCloseButton ? (
                 <DialogClose
                   asChild
-                  className="relay-absolute relay-right-[10px] relay-top-[12px] relay-z-10"
+                  className="relay:absolute relay:right-[10px] relay:top-[12px] relay:z-10"
                 >
                   <Button
                     color="ghost"
                     size="none"
-                    className="relay-text-[color:var(--relay-colors-gray9)] relay-p-2"
+                    className="relay:text-[color:var(--relay-colors-gray9)] relay:p-2"
                     onClick={(e) => {
                       props.onCloseButtonClicked?.(e)
                     }}
diff --git a/packages/ui/src/components/common/MultiWalletDropdown.tsx b/packages/ui/src/components/common/MultiWalletDropdown.tsx
index e2b275b07..e8a6a0375 100644
--- a/packages/ui/src/components/common/MultiWalletDropdown.tsx
+++ b/packages/ui/src/components/common/MultiWalletDropdown.tsx
@@ -121,7 +121,7 @@ export const MultiWalletDropdown: FC<MultiWalletDropdownProps> = ({
   const shouldShowEns = isEnsCapableVmType && Boolean(displayName)
 
   const dropdownItemClassName =
-    'relay-rounded-lg relay-gap-2 relay-cursor-pointer relay-p-2 relay-transition-[background-color] relay-duration-150 relay-ease-linear hover:relay-bg-[var(--relay-colors-gray3)] relay-shrink-0 relay-content-center relay-w-full'
+    'relay:rounded-lg relay:gap-2 relay:cursor-pointer relay:p-2 relay:transition-[background-color] relay:duration-150 relay:ease-linear relay:hover:bg-[var(--relay-colors-gray3)] relay:shrink-0 relay:content-center relay:w-full'
 
   return (
     <Dropdown
@@ -153,23 +153,23 @@ export const MultiWalletDropdown: FC<MultiWalletDropdownProps> = ({
           }}
           size="none"
           corners="pill"
-          className="relay-gap-2 !relay-px-2 relay-py-1 relay-cursor-pointer relay-flex relay-content-center"
+          className="relay:gap-2 relay:!px-2 relay:py-1 relay:cursor-pointer relay:flex relay:content-center"
           data-testid={testId}
         >
-          <Flex align="center" className="relay-gap-1 relay-shrink relay-min-w-0">
+          <Flex align="center" className="relay:gap-1 relay:shrink relay:min-w-0">
             {isSupportedSelectedWallet && selectedWallet?.walletLogoUrl ? (
               <img
                 src={selectedWallet.walletLogoUrl}
-                className="relay-w-[16px] relay-h-[16px] relay-rounded-[4px] relay-shrink-0"
+                className="relay:w-[16px] relay:h-[16px] relay:rounded-[4px] relay:shrink-0"
               />
             ) : selectedWalletAddress && !selectedWallet ? (
-              <Box className="relay-text-[color:var(--relay-colors-amber11)] relay-shrink-0">
+              <Box className="relay:text-[color:var(--relay-colors-amber11)] relay:shrink-0">
                 <FontAwesomeIcon icon={faClipboard} width={16} height={16} />
               </Box>
             ) : null}
             <Text
               style="subtitle2"
-              className="relay-whitespace-nowrap relay-overflow-hidden relay-text-ellipsis"
+              className="relay:whitespace-nowrap relay:overflow-hidden relay:text-ellipsis"
             >
               <span style={{
                 color: !selectedWallet && selectedWalletAddress
@@ -188,7 +188,7 @@ export const MultiWalletDropdown: FC<MultiWalletDropdownProps> = ({
           </Flex>
           {showDropdown && (
             <div
-              className="relay-shrink-0"
+              className="relay:shrink-0"
               style={{
                 color: !selectedWallet && selectedWalletAddress
                   ? 'var(--relay-colors-amber11)'
@@ -204,10 +204,10 @@ export const MultiWalletDropdown: FC<MultiWalletDropdownProps> = ({
         sideOffset: 12,
         alignOffset: -12,
         align: 'end',
-        className: 'relay-max-w-[248px] relay-p-0'
+        className: 'relay:max-w-[248px] relay:p-0'
       }}
     >
-      <Flex direction="column" className="relay-rounded-[12px] relay-p-1 relay-gap-1">
+      <Flex direction="column" className="relay:rounded-[12px] relay:p-1 relay:gap-1">
         {filteredWallets.map((wallet, idx) => {
           return (
             <DropdownMenuItem
@@ -225,13 +225,13 @@ export const MultiWalletDropdown: FC<MultiWalletDropdownProps> = ({
               }}
               className={cn(
                 dropdownItemClassName,
-                'relay-border relay-border-solid relay-border-[var(--relay-colors-gray-6)]'
+                'relay:border relay:border-solid relay:border-[var(--relay-colors-gray-6)]'
               )}
             >
               {wallet.walletLogoUrl ? (
                 <img
                   src={wallet.walletLogoUrl}
-                  className="relay-w-[16px] relay-h-[16px] relay-rounded-[4px]"
+                  className="relay:w-[16px] relay:h-[16px] relay:rounded-[4px]"
                 />
               ) : null}
 
diff --git a/packages/ui/src/components/common/PercentageButtons.tsx b/packages/ui/src/components/common/PercentageButtons.tsx
index b31529f18..76b3962e2 100644
--- a/packages/ui/src/components/common/PercentageButtons.tsx
+++ b/packages/ui/src/components/common/PercentageButtons.tsx
@@ -49,17 +49,17 @@ export const PercentageButtons: FC<PercentageButtonsProps> = ({
   const isMobile = variant === 'mobile'
 
   const defaultButtonClassName = cn(
-    'relay-font-medium',
-    isMobile ? 'relay-px-[4px] relay-py-[6px]' : 'relay-p-[4px]',
-    isMobile ? 'relay-h-[26px]' : 'relay-h-[23px]',
-    'relay-min-h-0',
-    'relay-leading-none',
-    'relay-bg-[var(--relay-colors-widget-selector-background)]',
-    'relay-border-none',
-    isMobile ? 'relay-rounded-[6px]' : 'relay-rounded-[12px]',
-    isMobile ? 'relay-flex-1' : '',
-    'relay-justify-center',
-    'hover:relay-bg-[var(--relay-colors-widget-selector-hover-background)]'
+    'relay:font-medium',
+    isMobile ? 'relay:px-[4px] relay:py-[6px]' : 'relay:p-[4px]',
+    isMobile ? 'relay:h-[26px]' : 'relay:h-[23px]',
+    'relay:min-h-0',
+    'relay:leading-none',
+    'relay:bg-[var(--relay-colors-widget-selector-background)]',
+    'relay:border-none',
+    isMobile ? 'relay:rounded-[6px]' : 'relay:rounded-[12px]',
+    isMobile ? 'relay:flex-1' : '',
+    'relay:justify-center',
+    'relay:hover:bg-[var(--relay-colors-widget-selector-hover-background)]'
   )
 
   const buttonFontSize = isMobile ? '14px' : '12px'
@@ -114,9 +114,9 @@ export const PercentageButtons: FC<PercentageButtonsProps> = ({
   return (
     <Flex
       className={cn(
-        'relay-gap-1',
-        isMobile ? 'relay-w-full' : 'relay-w-auto',
-        isMobile ? 'relay-mb-1' : 'relay-mb-0'
+        'relay:gap-1',
+        isMobile ? 'relay:w-full' : 'relay:w-auto',
+        isMobile ? 'relay:mb-1' : 'relay:mb-0'
       )}
     >
       {percentages.map((percent) => (
diff --git a/packages/ui/src/components/common/SlippageToleranceConfig.tsx b/packages/ui/src/components/common/SlippageToleranceConfig.tsx
index fe2c3a94a..fe420e540 100644
--- a/packages/ui/src/components/common/SlippageToleranceConfig.tsx
+++ b/packages/ui/src/components/common/SlippageToleranceConfig.tsx
@@ -82,22 +82,22 @@ const SlippageTabs: FC<SlippageTabsProps> = ({
           setDisplayValue(undefined)
         }
       }}
-      className="relay-flex relay-flex-col relay-w-full relay-gap-3 sm:relay-gap-2"
+      className="relay:flex relay:flex-col relay:w-full relay:gap-3 relay:sm:gap-2"
     >
-      <TabsList className="relay-w-full">
-        <TabsTrigger value="Auto" className="relay-w-1/2">
+      <TabsList className="relay:w-full">
+        <TabsTrigger value="Auto" className="relay:w-1/2">
           Auto
         </TabsTrigger>
-        <TabsTrigger value="Custom" className="relay-w-1/2">
+        <TabsTrigger value="Custom" className="relay:w-1/2">
           Custom
         </TabsTrigger>
       </TabsList>
 
-      <TabsContent value="Auto" className="relay-w-full">
+      <TabsContent value="Auto" className="relay:w-full">
         <Text
           style="body2"
           color="subtle"
-          className="relay-leading-[14px] sm:relay-text-xs"
+          className="relay:leading-[14px] relay:sm:text-xs"
         >
           We'll set the slippage automatically to minimize the failure rate.
         </Text>
@@ -105,16 +105,16 @@ const SlippageTabs: FC<SlippageTabsProps> = ({
 
       <TabsContent
         value="Custom"
-        className="relay-flex relay-w-full relay-overflow-hidden relay-flex-col relay-gap-1"
+        className="relay:flex relay:w-full relay:overflow-hidden relay:flex-col relay:gap-1"
       >
         {/* Mobile shortcut buttons */}
         <Flex
-          className="relay-hidden max-[520px]:relay-flex max-[520px]:relay-w-full max-[520px]:relay-gap-2 max-[520px]:relay-mb-2"
+          className="relay:hidden relay:max-[520px]:flex relay:max-[520px]:w-full relay:max-[520px]:gap-2 relay:max-[520px]:mb-2"
         >
           <Button
             color="grey"
             size="none"
-            className="relay-flex-1 relay-min-h-0 relay-h-[28px] relay-font-medium relay-text-sm relay-rounded-[6px] relay-justify-center"
+            className="relay:flex-1 relay:min-h-0 relay:h-[28px] relay:font-medium relay:text-sm relay:rounded-[6px] relay:justify-center"
             onClick={() => handleInputChange('1')}
           >
             1%
@@ -122,7 +122,7 @@ const SlippageTabs: FC<SlippageTabsProps> = ({
           <Button
             color="grey"
             size="none"
-            className="relay-flex-1 relay-min-h-0 relay-h-[28px] relay-font-medium relay-text-sm relay-rounded-[6px] relay-justify-center"
+            className="relay:flex-1 relay:min-h-0 relay:h-[28px] relay:font-medium relay:text-sm relay:rounded-[6px] relay:justify-center"
             onClick={() => handleInputChange('2')}
           >
             2%
@@ -130,14 +130,14 @@ const SlippageTabs: FC<SlippageTabsProps> = ({
           <Button
             color="grey"
             size="none"
-            className="relay-flex-1 relay-min-h-0 relay-h-[28px] relay-font-medium relay-text-sm relay-rounded-[6px] relay-justify-center"
+            className="relay:flex-1 relay:min-h-0 relay:h-[28px] relay:font-medium relay:text-sm relay:rounded-[6px] relay:justify-center"
             onClick={() => handleInputChange('5')}
           >
             5%
           </Button>
         </Flex>
 
-        <Flex className="relay-flex relay-w-full relay-relative">
+        <Flex className="relay:flex relay:w-full relay:relative">
           <Input
             ref={inputRef}
             value={displayValue || ''}
@@ -159,15 +159,15 @@ const SlippageTabs: FC<SlippageTabsProps> = ({
               }
             }}
             placeholder="2"
-            containerClassName="relay-w-full"
+            containerClassName="relay:w-full"
             className={cn(
-              'relay-h-9 !relay-pr-7 relay-border-none relay-text-right relay-w-full',
-              'max-[520px]:relay-bg-transparent max-[520px]:relay-border max-[520px]:relay-border-solid max-[520px]:relay-border-[var(--relay-colors-gray-5)]'
+              'relay:h-9 relay:!pr-7 relay:border-none relay:text-right relay:w-full',
+              'relay:max-[520px]:bg-transparent relay:max-[520px]:border relay:max-[520px]:border-solid relay:max-[520px]:border-[var(--relay-colors-gray-5)]'
             )}
             inputStyle={{ color: tokenToColor(slippageRatingColor) }}
           />
           <Box
-            className="relay-absolute relay-right-2 relay-top-1/2 -relay-translate-y-1/2"
+            className="relay:absolute relay:right-2 relay:top-1/2 relay:-translate-y-1/2"
           >
             <span style={{ color: tokenToColor(slippageRatingColor) }}>%</span>
           </Box>
@@ -314,7 +314,7 @@ export const SlippageToleranceConfig: FC<SlippageToleranceConfigProps> = ({
       aria-label="Slippage Tolerance Configuration"
       color="ghost"
       size="none"
-      className="relay-items-center relay-justify-center relay-gap-1 relay-p-2 relay-rounded-[12px] relay-border relay-border-solid relay-border-[var(--relay-colors-gray5)] relay-h-9 relay-px-[10px]"
+      className="relay:items-center relay:justify-center relay:gap-1 relay:p-2 relay:rounded-[12px] relay:border relay:border-solid relay:border-[var(--relay-colors-gray5)] relay:h-9 relay:px-[10px]"
       style={{
         color: tokenToColor(slippageRatingColor) ?? 'var(--relay-colors-gray9)',
         backgroundColor: 'var(--relay-colors-widget-card-background)'
@@ -343,7 +343,7 @@ export const SlippageToleranceConfig: FC<SlippageToleranceConfigProps> = ({
   }
 
   return (
-    <div className="relay-kit-reset relay-inline-flex">
+    <div className="relay-kit-reset relay:inline-flex">
       {isMobile ? (
         <Modal
           open={open}
@@ -354,9 +354,9 @@ export const SlippageToleranceConfig: FC<SlippageToleranceConfigProps> = ({
             }
           }}
           trigger={triggerButton}
-          className="relay-w-full relay-min-h-[262px] relay-max-h-[90vh]"
+          className="relay:w-full relay:min-h-[262px] relay:max-h-[90vh]"
         >
-          <Flex direction="column" className="relay-w-full relay-gap-4">
+          <Flex direction="column" className="relay:w-full relay:gap-4">
             <Text style="h6">Max Slippage</Text>
 
             <Text style="body3" color="subtle">
@@ -380,7 +380,7 @@ export const SlippageToleranceConfig: FC<SlippageToleranceConfigProps> = ({
           contentProps={{
             align: 'end',
             sideOffset: 5,
-            className: 'relay-max-w-[188px] relay-mx-0 relay-p-3',
+            className: 'relay:max-w-[188px] relay:mx-0 relay:p-3',
             avoidCollisions: false,
             onCloseAutoFocus: (e) => {
               e.preventDefault()
@@ -389,22 +389,22 @@ export const SlippageToleranceConfig: FC<SlippageToleranceConfigProps> = ({
         >
           <Flex
             direction="column"
-            className="relay-w-full relay-gap-2 relay-max-w-[188px]"
+            className="relay:w-full relay:gap-2 relay:max-w-[188px]"
           >
-            <Flex direction="row" className="relay-gap-1 relay-items-center">
+            <Flex direction="row" className="relay:gap-1 relay:items-center">
               <Text style="subtitle3">Max Slippage</Text>
               <Tooltip
                 content={
                   <Text
                     style="tiny"
-                    className="relay-inline-block relay-max-w-[190px]"
+                    className="relay:inline-block relay:max-w-[190px]"
                   >
                     If the price exceeds the maximum slippage percentage, the
                     transaction will revert.
                   </Text>
                 }
               >
-                <Box className="relay-text-[color:var(--relay-colors-gray8)]">
+                <Box className="relay:text-[color:var(--relay-colors-gray8)]">
                   <FontAwesomeIcon icon={faInfoCircle} width={14} height={14} />
                 </Box>
               </Tooltip>
diff --git a/packages/ui/src/components/common/StepIcon.tsx b/packages/ui/src/components/common/StepIcon.tsx
index 01b2ee6f9..96157202b 100644
--- a/packages/ui/src/components/common/StepIcon.tsx
+++ b/packages/ui/src/components/common/StepIcon.tsx
@@ -39,7 +39,7 @@ export const StepIcon: FC<StepIconProps> = ({ stepId, chainId }) => {
 
   return (
     <Flex
-      className="relay-rounded-[100px] relay-p-2 relay-w-8 relay-h-8 relay-gap-2"
+      className="relay:rounded-[100px] relay:p-2 relay:w-8 relay:h-8 relay:gap-2"
     >
       {getIconForStep()}
     </Flex>
diff --git a/packages/ui/src/components/common/TokenSelector/ChainFilter.tsx b/packages/ui/src/components/common/TokenSelector/ChainFilter.tsx
index cb51af085..78f292ec0 100644
--- a/packages/ui/src/components/common/TokenSelector/ChainFilter.tsx
+++ b/packages/ui/src/components/common/TokenSelector/ChainFilter.tsx
@@ -91,15 +91,15 @@ const ChainFilter: FC<Props> = ({
           aria-label={`Chain filter`}
           color="ghost"
           size="none"
-          className="relay-gap-2 relay-h-[40px] relay-w-full !relay-px-4 relay-cursor-pointer relay-flex relay-content-center relay-leading-[20px] relay-bg-[var(--relay-colors-dropdown-background)] relay-rounded-dropdown"
+          className="relay:gap-2 relay:h-[40px] relay:w-full relay:!px-4 relay:cursor-pointer relay:flex relay:content-center relay:leading-[20px] relay:bg-[var(--relay-colors-dropdown-background)] relay:rounded-dropdown"
         >
-          <Flex align="center" className="relay-gap-2">
+          <Flex align="center" className="relay:gap-2">
             {value.id ? (
               <ChainIcon
                 chainId={value.id}
                 width={20}
                 height={20}
-                className="relay-rounded-[4px] relay-overflow-hidden"
+                className="relay:rounded-[4px] relay:overflow-hidden"
               />
             ) : (
               <AllChainsLogo style={{ width: 20, height: 20 }} />
@@ -111,8 +111,8 @@ const ChainFilter: FC<Props> = ({
           <Text
             style="body1"
             className={cn(
-              'relay-text-[color:var(--relay-colors-gray9)] relay-ml-auto relay-w-[12px]',
-              open ? 'relay-rotate-180' : 'relay-rotate-0'
+              'relay:text-[color:var(--relay-colors-gray9)] relay:ml-auto relay:w-[12px]',
+              open ? 'relay:rotate-180' : 'relay:rotate-0'
             )}
           >
             <FontAwesomeIcon icon={faChevronDown} />
@@ -122,14 +122,14 @@ const ChainFilter: FC<Props> = ({
       contentProps={{
         align: 'start',
         avoidCollisions: false,
-        className: 'relay-p-0 relay-mx-0',
+        className: 'relay:p-0 relay:mx-0',
         style: {
           width: 'var(--radix-popper-anchor-width)',
           minWidth: 'var(--radix-popper-anchor-width)'
         }
       }}
     >
-      <Flex direction="column" className="relay-p-2">
+      <Flex direction="column" className="relay:p-2">
         <ChainSearchInput
           value={chainSearchInput}
           onChange={setChainSearchInput}
@@ -137,7 +137,7 @@ const ChainFilter: FC<Props> = ({
         />
         <Flex
           direction="column"
-          className="relay-overflow-y-auto relay-rounded-[8px] relay-max-h-[290px]"
+          className="relay:overflow-y-auto relay:rounded-[8px] relay:max-h-[290px]"
           style={{ scrollbarColor: 'var(--relay-colors-gray5) transparent' }}
         >
           {filteredChains ? (
@@ -152,7 +152,7 @@ const ChainFilter: FC<Props> = ({
                       onSelect(chain)
                       setChainSearchInput('')
                     }}
-                    className="relay-p-[8px] relay-rounded-[4px] relay-cursor-pointer relay-bg-[var(--relay-colors-modal-background)] hover:relay-bg-[var(--relay-colors-gray3)]"
+                    className="relay:p-[8px] relay:rounded-[4px] relay:cursor-pointer relay:bg-[var(--relay-colors-modal-background)] relay:hover:bg-[var(--relay-colors-gray3)]"
                   >
                     <ChainFilterRow
                       chain={chain}
@@ -164,7 +164,7 @@ const ChainFilter: FC<Props> = ({
                 )
               })
             ) : (
-              <Text style="body1" className="relay-p-2 relay-text-center">
+              <Text style="body1" className="relay:p-2 relay:text-center">
                 No results.
               </Text>
             )
@@ -177,7 +177,7 @@ const ChainFilter: FC<Props> = ({
                     onSelect(allChainsOption)
                     setChainSearchInput('')
                   }}
-                  className="relay-p-[8px] relay-rounded-[4px] relay-cursor-pointer relay-bg-[var(--relay-colors-modal-background)] hover:relay-bg-[var(--relay-colors-gray3)]"
+                  className="relay:p-[8px] relay:rounded-[4px] relay:cursor-pointer relay:bg-[var(--relay-colors-modal-background)] relay:hover:bg-[var(--relay-colors-gray3)]"
                 >
                   <ChainFilterRow
                     chain={allChainsOption}
@@ -188,8 +188,8 @@ const ChainFilter: FC<Props> = ({
 
               {starredChains.length > 0 && (
                 <>
-                  <Flex align="center" className="relay-px-2 relay-py-1 relay-gap-1">
-                    <Box className="relay-text-[color:var(--relay-colors-primary9)]">
+                  <Flex align="center" className="relay:px-2 relay:py-1 relay:gap-1">
+                    <Box className="relay:text-[color:var(--relay-colors-primary9)]">
                       <FontAwesomeIcon icon={faStar} width={12} height={12} />
                     </Box>
                     <Text style="subtitle2" color="subtle">
@@ -200,7 +200,7 @@ const ChainFilter: FC<Props> = ({
                         <Text style="body3">Long-press to star a chain</Text>
                       }
                     >
-                      <Box className="relay-text-[color:var(--relay-colors-gray9)]">
+                      <Box className="relay:text-[color:var(--relay-colors-gray9)]">
                         <FontAwesomeIcon
                           icon={faInfoCircle}
                           width={12}
@@ -219,7 +219,7 @@ const ChainFilter: FC<Props> = ({
                           onSelect(chain)
                           setChainSearchInput('')
                         }}
-                        className="relay-p-[8px] relay-rounded-[4px] relay-cursor-pointer relay-bg-[var(--relay-colors-modal-background)] hover:relay-bg-[var(--relay-colors-gray3)]"
+                        className="relay:p-[8px] relay:rounded-[4px] relay:cursor-pointer relay:bg-[var(--relay-colors-modal-background)] relay:hover:bg-[var(--relay-colors-gray3)]"
                       >
                         <ChainFilterRow
                           chain={chain}
@@ -234,7 +234,7 @@ const ChainFilter: FC<Props> = ({
                 </>
               )}
 
-              <Text style="subtitle2" color="subtle" className="relay-px-2 relay-py-1">
+              <Text style="subtitle2" color="subtle" className="relay:px-2 relay:py-1">
                 Chains A-Z
               </Text>
               {alphabeticalChains.map((chain) => {
@@ -247,7 +247,7 @@ const ChainFilter: FC<Props> = ({
                       onSelect(chain)
                       setChainSearchInput('')
                     }}
-                    className="relay-p-[8px] relay-rounded-[4px] relay-cursor-pointer relay-bg-[var(--relay-colors-modal-background)] hover:relay-bg-[var(--relay-colors-gray3)]"
+                    className="relay:p-[8px] relay:rounded-[4px] relay:cursor-pointer relay:bg-[var(--relay-colors-modal-background)] relay:hover:bg-[var(--relay-colors-gray3)]"
                   >
                     <ChainFilterRow
                       chain={chain}
@@ -371,7 +371,7 @@ const ChainFilterRow: FC<ChainFilterRowProps> = ({
     return (
       <Flex
         align="center"
-        className="relay-gap-2 relay-cursor-pointer relay-shrink-0 relay-content-center relay-w-full"
+        className="relay:gap-2 relay:cursor-pointer relay:shrink-0 relay:content-center relay:w-full"
       >
         <AllChainsLogo style={{ width: 24, height: 24 }} />
         <Text style="subtitle2">{chain.name}</Text>
@@ -380,7 +380,7 @@ const ChainFilterRow: FC<ChainFilterRowProps> = ({
   }
 
   return (
-    <div className="relay-relative relay-w-full">
+    <div className="relay:relative relay:w-full">
       <Flex
         align="center"
         onContextMenu={(e) => {
@@ -396,14 +396,14 @@ const ChainFilterRow: FC<ChainFilterRowProps> = ({
         onTouchStart={handleTouchStart}
         onTouchEnd={handleTouchEnd}
         onTouchMove={handleTouchMove}
-        className="relay-gap-2 relay-cursor-pointer relay-shrink-0 relay-content-center relay-w-full relay-relative relay-select-none"
+        className="relay:gap-2 relay:cursor-pointer relay:shrink-0 relay:content-center relay:w-full relay:relative relay:select-none"
       >
         <ChainIcon chainId={chain.id} square width={24} height={24} />
         <Text style="subtitle2">
           {('displayName' in chain && chain.displayName) || chain.name}
         </Text>
         {showStar && isStarred && (
-          <Box className="relay-text-[color:var(--relay-colors-primary9)]">
+          <Box className="relay:text-[color:var(--relay-colors-primary9)]">
             <FontAwesomeIcon icon={faStar} width={12} height={12} />
           </Box>
         )}
@@ -413,7 +413,7 @@ const ChainFilterRow: FC<ChainFilterRowProps> = ({
       {dropdownOpen && (
         <div
           ref={dropdownRef}
-          className="relay-absolute relay-top-full relay-left-0 relay-mt-1 relay-min-w-[160px] relay-z-[999999]"
+          className="relay:absolute relay:top-full relay:left-0 relay:mt-1 relay:min-w-[160px] relay:z-[999999]"
           onClick={(e) => {
             e.stopPropagation()
             handleToggleStar()
@@ -422,18 +422,18 @@ const ChainFilterRow: FC<ChainFilterRowProps> = ({
           onTouchStart={(e) => e.stopPropagation()}
         >
           <Flex
-            className="relay-items-center relay-gap-[8px] relay-p-[8px] relay-rounded-[12px] relay-cursor-pointer relay-bg-[var(--relay-colors-gray1)] relay-border relay-border-solid relay-border-[var(--relay-colors-subtle-border-color)] hover:relay-bg-[var(--relay-colors-gray2)]"
+            className="relay:items-center relay:gap-[8px] relay:p-[8px] relay:rounded-[12px] relay:cursor-pointer relay:bg-[var(--relay-colors-gray1)] relay:border relay:border-solid relay:border-[var(--relay-colors-subtle-border-color)] relay:hover:bg-[var(--relay-colors-gray2)]"
           >
             <Box
               className={cn(
                 isStarred
-                  ? 'relay-text-[color:var(--relay-colors-gray8)]'
-                  : 'relay-text-[color:var(--relay-colors-primary9)]'
+                  ? 'relay:text-[color:var(--relay-colors-gray8)]'
+                  : 'relay:text-[color:var(--relay-colors-primary9)]'
               )}
             >
               <FontAwesomeIcon icon={faStar} width={16} height={16} />
             </Box>
-            <Text style="subtitle1" className="relay-leading-[20px]">
+            <Text style="subtitle1" className="relay:leading-[20px]">
               {isStarred ? 'Unstar chain' : 'Star chain'}
             </Text>
           </Flex>
diff --git a/packages/ui/src/components/common/TokenSelector/ChainFilterRow.tsx b/packages/ui/src/components/common/TokenSelector/ChainFilterRow.tsx
index 0198f411a..979202d76 100644
--- a/packages/ui/src/components/common/TokenSelector/ChainFilterRow.tsx
+++ b/packages/ui/src/components/common/TokenSelector/ChainFilterRow.tsx
@@ -90,7 +90,7 @@ export const ChainFilterRow: FC<ChainFilterRowProps> = ({
     return (
       <Flex
         align="center"
-        className="relay-gap-2 relay-cursor-pointer relay-shrink-0 relay-content-center relay-w-full"
+        className="relay:gap-2 relay:cursor-pointer relay:shrink-0 relay:content-center relay:w-full"
       >
         <AllChainsLogo style={{ width: 24, height: 24 }} />
         <Text style="subtitle2">{chain.name}</Text>
@@ -99,21 +99,21 @@ export const ChainFilterRow: FC<ChainFilterRowProps> = ({
   }
 
   return (
-    <div className="relay-relative relay-w-full">
+    <div className="relay:relative relay:w-full">
       <Flex
         align="center"
         onContextMenu={(e) => {
           e.preventDefault()
           setDropdownOpen(true)
         }}
-        className="relay-gap-2 relay-cursor-pointer relay-shrink-0 relay-content-center relay-w-full relay-relative relay-select-none"
+        className="relay:gap-2 relay:cursor-pointer relay:shrink-0 relay:content-center relay:w-full relay:relative relay:select-none"
       >
         <ChainIcon chainId={chain.id} square width={24} height={24} />
         <Text style="subtitle2">
           {('displayName' in chain && chain.displayName) || chain.name}
         </Text>
         {showStar && isStarred && (
-          <Box className="relay-text-[color:var(--relay-colors-primary9)]">
+          <Box className="relay:text-[color:var(--relay-colors-primary9)]">
             <FontAwesomeIcon icon={faStar} width={12} height={12} />
           </Box>
         )}
@@ -124,7 +124,7 @@ export const ChainFilterRow: FC<ChainFilterRowProps> = ({
       {dropdownOpen && (
         <div
           ref={dropdownRef}
-          className="relay-absolute relay-top-full relay-left-0 relay-mt-1 relay-min-w-[140px] relay-z-[9999]"
+          className="relay:absolute relay:top-full relay:left-0 relay:mt-1 relay:min-w-[140px] relay:z-[9999]"
           onClick={(e) => {
             e.stopPropagation()
             handleToggleStar()
@@ -133,18 +133,18 @@ export const ChainFilterRow: FC<ChainFilterRowProps> = ({
           onTouchStart={(e) => e.stopPropagation()}
         >
           <Flex
-            className="relay-flex relay-items-center relay-gap-[6px] relay-p-3 relay-rounded-[12px] relay-cursor-pointer relay-bg-[var(--relay-colors-modal-background)] hover:relay-bg-[var(--relay-colors-gray2)]"
+            className="relay:flex relay:items-center relay:gap-[6px] relay:p-3 relay:rounded-[12px] relay:cursor-pointer relay:bg-[var(--relay-colors-modal-background)] relay:hover:bg-[var(--relay-colors-gray2)]"
           >
             <Box
               className={cn(
                 isStarred
-                  ? 'relay-text-[color:var(--relay-colors-gray8)]'
-                  : 'relay-text-[color:var(--relay-colors-primary9)]'
+                  ? 'relay:text-[color:var(--relay-colors-gray8)]'
+                  : 'relay:text-[color:var(--relay-colors-primary9)]'
               )}
             >
               <FontAwesomeIcon icon={faStar} width={16} height={16} />
             </Box>
-            <Text style="subtitle1" className="relay-leading-[20px]">
+            <Text style="subtitle1" className="relay:leading-[20px]">
               {isStarred ? 'Unstar chain' : 'Star chain'}
             </Text>
           </Flex>
@@ -169,12 +169,12 @@ export const ChainSearchInput = forwardRef<
     ref={ref}
     placeholder={placeholder}
     icon={
-      <Box className="relay-text-[color:var(--relay-colors-gray9)]">
+      <Box className="relay:flex relay:text-[color:var(--relay-colors-gray9)]">
         <FontAwesomeIcon icon={faMagnifyingGlass} width={16} height={16} />
       </Box>
     }
-    containerClassName="relay-w-full relay-h-[40px] relay-mb-2"
-    className="relay-w-full relay-border relay-border-solid relay-border-[var(--relay-colors-subtle-border-color)] relay-bg-[var(--relay-colors-modal-background)] [&::placeholder]:relay-text-ellipsis"
+    containerClassName="relay:w-full relay:h-[40px] relay:mb-2"
+    className="relay:w-full relay:border relay:border-solid relay:border-[var(--relay-colors-subtle-border-color)] relay:bg-[var(--relay-colors-modal-background)] relay:[&::placeholder]:text-ellipsis"
     value={value}
     onChange={(e) => onChange((e.target as HTMLInputElement).value)}
     onKeyDown={onKeyDown}
diff --git a/packages/ui/src/components/common/TokenSelector/ChainFilterSidebar.tsx b/packages/ui/src/components/common/TokenSelector/ChainFilterSidebar.tsx
index 5f40d855b..557f2ae39 100644
--- a/packages/ui/src/components/common/TokenSelector/ChainFilterSidebar.tsx
+++ b/packages/ui/src/components/common/TokenSelector/ChainFilterSidebar.tsx
@@ -112,7 +112,7 @@ export const ChainFilterSidebar: FC<ChainFilterSidebarProps> = ({
   return (
     <Flex
       direction="column"
-      className="relay-max-w-[212px] relay-shrink-0 relay-gap-1 relay-bg-[var(--relay-colors-gray3)] relay-rounded-[12px] relay-p-3"
+      className="relay:max-w-[212px] relay:shrink-0 relay:gap-1 relay:bg-[var(--relay-colors-gray3)] relay:rounded-[12px] relay:p-3"
     >
       <AccessibleList
         onSelect={(selectedValue) => {
@@ -144,7 +144,7 @@ export const ChainFilterSidebar: FC<ChainFilterSidebarProps> = ({
             }
           }
         }}
-        className="relay-flex relay-flex-col relay-w-full relay-h-full"
+        className="relay:flex relay:flex-col relay:w-full relay:h-full"
       >
         <AccessibleListItem value="input" asChild>
           <ChainSearchInput
@@ -157,7 +157,7 @@ export const ChainFilterSidebar: FC<ChainFilterSidebarProps> = ({
 
         <Flex
           direction="column"
-          className="relay-flex-1 relay-overflow-y-auto relay-gap-1"
+          className="relay:flex-1 relay:overflow-y-auto relay:gap-1"
           style={{ scrollbarColor: 'var(--relay-colors-gray5) transparent' }}
         >
           {filteredChains ? (
@@ -212,8 +212,8 @@ export const ChainFilterSidebar: FC<ChainFilterSidebarProps> = ({
                         }}
                         ref={isSameChainSelected ? activeChainRef : null}
                         className={cn(
-                          'relay-p-2 relay-flex relay-items-center relay-gap-2 relay-relative relay-transition-colors relay-duration-150 relay-outline-none relay-rounded-lg relay-focus-inset',
-                          !isSameChainSelected && 'hover:relay-bg-[rgba(var(--relay-colors-gray-rgb,0,0,0),0.1)]'
+                          'relay:p-2 relay:flex relay:items-center relay:gap-2 relay:relative relay:transition-colors relay:duration-150 relay:outline-none relay:rounded-lg relay:focus-inset',
+                          !isSameChainSelected && 'relay:hover:bg-[rgba(var(--relay-colors-gray-rgb,0,0,0),0.1)]'
                         )}
                         style={isSameChainSelected ? { backgroundColor: 'var(--relay-colors-gray6)' } : undefined}
                       >
@@ -234,8 +234,8 @@ export const ChainFilterSidebar: FC<ChainFilterSidebarProps> = ({
 
               {starredChains.length > 0 && (
                 <>
-                  <Flex align="center" className="relay-px-2 relay-py-1 relay-gap-1">
-                    <Box className="relay-text-[color:var(--relay-colors-primary9)]">
+                  <Flex align="center" className="relay:px-2 relay:py-1 relay:gap-1">
+                    <Box className="relay:text-[color:var(--relay-colors-primary9)]">
                       <FontAwesomeIcon icon={faStar} width={12} height={12} />
                     </Box>
                     <Text style="subtitle2" color="subtle">
@@ -246,7 +246,7 @@ export const ChainFilterSidebar: FC<ChainFilterSidebarProps> = ({
                         <Text style="body3">Right-click to star a chain</Text>
                       }
                     >
-                      <Box className="relay-text-[color:var(--relay-colors-gray9)]">
+                      <Box className="relay:text-[color:var(--relay-colors-gray9)]">
                         <FontAwesomeIcon
                           icon={faInfoCircle}
                           width={12}
@@ -282,7 +282,7 @@ export const ChainFilterSidebar: FC<ChainFilterSidebarProps> = ({
                 </>
               )}
 
-              <Text style="subtitle2" color="subtle" className="relay-px-2 relay-py-1">
+              <Text style="subtitle2" color="subtle" className="relay:px-2 relay:py-1">
                 Chains A-Z
               </Text>
               {alphabeticalChains.map((chain) => {
@@ -403,8 +403,8 @@ const ChainFilterRow: FC<ChainFilterRowProps> = ({
           onClick={onClick}
           ref={isActive ? activeChainRef : null}
           className={cn(
-            'relay-p-2 relay-flex relay-items-center relay-gap-2 relay-relative relay-transition-colors relay-duration-150 relay-outline-none relay-rounded-lg relay-focus-inset',
-            !isActive && 'hover:relay-bg-[rgba(var(--relay-colors-gray-rgb,0,0,0),0.1)]'
+            'relay:p-2 relay:flex relay:items-center relay:gap-2 relay:relative relay:transition-colors relay:duration-150 relay:outline-none relay:rounded-lg relay:focus-inset',
+            !isActive && 'relay:hover:bg-[rgba(var(--relay-colors-gray-rgb,0,0,0),0.1)]'
           )}
           style={{
             ...(isActive ? { backgroundColor: 'var(--relay-colors-gray6)' } : undefined),
@@ -421,7 +421,7 @@ const ChainFilterRow: FC<ChainFilterRowProps> = ({
   }
 
   return (
-    <Flex className="relay-relative relay-w-full">
+    <Flex className="relay:relative relay:w-full">
       <AccessibleListItem value={value} asChild>
         <Button
           color="ghost"
@@ -446,8 +446,8 @@ const ChainFilterRow: FC<ChainFilterRowProps> = ({
             }
           }}
           className={cn(
-            'relay-p-2 relay-flex relay-items-center relay-gap-2 relay-w-full relay-transition-colors relay-duration-150 relay-outline-none relay-rounded-lg relay-focus-inset',
-            !isActive && 'hover:relay-bg-[rgba(var(--relay-colors-gray-rgb,0,0,0),0.1)]'
+            'relay:p-2 relay:flex relay:items-center relay:gap-2 relay:w-full relay:transition-colors relay:duration-150 relay:outline-none relay:rounded-lg relay:focus-inset',
+            !isActive && 'relay:hover:bg-[rgba(var(--relay-colors-gray-rgb,0,0,0),0.1)]'
           )}
           style={isActive ? { backgroundColor: 'var(--relay-colors-gray6)' } : undefined}
         >
@@ -456,7 +456,7 @@ const ChainFilterRow: FC<ChainFilterRowProps> = ({
             {('displayName' in chain && chain.displayName) || chain.name}
           </Text>
           {showStar && isStarred && (
-            <Box className="relay-text-[color:var(--relay-colors-primary9)]">
+            <Box className="relay:text-[color:var(--relay-colors-primary9)]">
               <FontAwesomeIcon icon={faStar} width={16} height={16} />
             </Box>
           )}
@@ -467,7 +467,7 @@ const ChainFilterRow: FC<ChainFilterRowProps> = ({
       {dropdownOpen && (
         <div
           ref={dropdownRef}
-          className="relay-absolute relay-top-full relay-left-0 relay-mt-1 relay-min-w-[140px] relay-z-[9999]"
+          className="relay:absolute relay:top-full relay:left-0 relay:mt-1 relay:min-w-[140px] relay:z-[9999]"
           onClick={(e) => {
             e.stopPropagation()
             handleToggleStar()
@@ -476,18 +476,18 @@ const ChainFilterRow: FC<ChainFilterRowProps> = ({
           onTouchStart={(e) => e.stopPropagation()}
         >
           <Flex
-            className="relay-flex relay-items-center relay-gap-[6px] relay-p-3 relay-rounded-[12px] relay-cursor-pointer relay-bg-[var(--relay-colors-modal-background)] hover:relay-bg-[var(--relay-colors-gray2)]"
+            className="relay:flex relay:items-center relay:gap-[6px] relay:p-3 relay:rounded-[12px] relay:cursor-pointer relay:bg-[var(--relay-colors-modal-background)] relay:hover:bg-[var(--relay-colors-gray2)]"
           >
             <Box
               className={cn(
                 isStarred
-                  ? 'relay-text-[color:var(--relay-colors-gray8)]'
-                  : 'relay-text-[color:var(--relay-colors-primary9)]'
+                  ? 'relay:text-[color:var(--relay-colors-gray8)]'
+                  : 'relay:text-[color:var(--relay-colors-primary9)]'
               )}
             >
               <FontAwesomeIcon icon={faStar} width={16} height={16} />
             </Box>
-            <Text style="subtitle1" className="relay-leading-[20px]">
+            <Text style="subtitle1" className="relay:leading-[20px]">
               {isStarred ? 'Unstar chain' : 'Star chain'}
             </Text>
           </Flex>
diff --git a/packages/ui/src/components/common/TokenSelector/ChainShortcuts.tsx b/packages/ui/src/components/common/TokenSelector/ChainShortcuts.tsx
index ff00553bf..2dacca5b9 100644
--- a/packages/ui/src/components/common/TokenSelector/ChainShortcuts.tsx
+++ b/packages/ui/src/components/common/TokenSelector/ChainShortcuts.tsx
@@ -93,7 +93,7 @@ export const ChainShortcuts: FC<ChainShortcutsProps> = ({
   }
 
   return (
-    <Flex className="relay-gap-2 relay-w-full relay-overflow-x-auto relay-py-2 relay-px-2 relay-items-center">
+    <Flex className="relay:gap-2 relay:w-full relay:overflow-x-auto relay:py-2 relay:px-2 relay:items-center">
       {shortcutChains.map((chain) => (
         <ChainShortcutButton
           key={chain.id?.toString() ?? 'all-chains'}
@@ -107,7 +107,7 @@ export const ChainShortcuts: FC<ChainShortcutsProps> = ({
         color="ghost"
         size="none"
         onClick={onMoreClick}
-        className="relay-flex relay-items-center relay-gap-1 relay-px-2 relay-rounded-[8px] !relay-bg-[var(--relay-colors-gray3)] relay-text-[color:var(--relay-colors-gray9)] hover:!relay-bg-[var(--relay-colors-gray4)] relay-h-[40px]"
+        className="relay:flex relay:items-center relay:gap-1 relay:px-2 relay:rounded-[8px] relay:!bg-[var(--relay-colors-gray3)] relay:text-[color:var(--relay-colors-gray9)] hover:!relay-bg-[var(--relay-colors-gray4)] relay:h-[40px]"
       >
         <Text style="subtitle1" color="subtle">
           More
@@ -135,10 +135,10 @@ const ChainShortcutButton: FC<ChainShortcutButtonProps> = ({
       size="none"
       onClick={onClick}
       className={cn(
-        'relay-flex relay-flex-col relay-items-center relay-gap-1 relay-py-2 relay-px-3 relay-rounded-[12px]',
+        'relay:flex relay:flex-col relay:items-center relay:gap-1 relay:py-2 relay:px-3 relay:rounded-[12px]',
         isSelected
-          ? '!relay-bg-[var(--relay-colors-gray5)] hover:!relay-bg-[var(--relay-colors-gray5)]'
-          : '!relay-bg-[var(--relay-colors-gray3)] hover:!relay-bg-[var(--relay-colors-gray4)]'
+          ? 'relay:!bg-[var(--relay-colors-gray5)] hover:!relay-bg-[var(--relay-colors-gray5)]'
+          : 'relay:!bg-[var(--relay-colors-gray3)] hover:!relay-bg-[var(--relay-colors-gray4)]'
       )}
     >
       {chain.id ? (
@@ -146,10 +146,10 @@ const ChainShortcutButton: FC<ChainShortcutButtonProps> = ({
           chainId={chain.id}
           width={24}
           height={24}
-          className="relay-rounded-[4px] relay-overflow-hidden"
+          className="relay:rounded-[4px] relay:overflow-hidden"
         />
       ) : (
-        <Text style="subtitle1" className="relay-h-[24px] relay-w-[20px]">
+        <Text style="subtitle1" className="relay:h-[24px] relay:w-[20px]">
           All
         </Text>
       )}
diff --git a/packages/ui/src/components/common/TokenSelector/CompactChainFilter.tsx b/packages/ui/src/components/common/TokenSelector/CompactChainFilter.tsx
index e41a072ab..a6604319b 100644
--- a/packages/ui/src/components/common/TokenSelector/CompactChainFilter.tsx
+++ b/packages/ui/src/components/common/TokenSelector/CompactChainFilter.tsx
@@ -32,19 +32,19 @@ const ChainFilterTrigger = forwardRef<
     aria-label="Chain filter"
     color="ghost"
     size="none"
-    className="relay-flex relay-items-center relay-gap-[6px] relay-h-[40px] relay-px-[12px] relay-cursor-pointer relay-bg-[var(--relay-colors-dropdown-background)] relay-rounded-dropdown relay-shrink-0 focus-visible:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)]"
+    className="relay:flex relay:items-center relay:gap-[6px] relay:h-[40px] relay:px-[12px] relay:cursor-pointer relay:bg-[var(--relay-colors-dropdown-background)] relay:rounded-dropdown relay:shrink-0 relay:focus-visible:shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)]"
   >
     {value.id ? (
       <ChainIcon
         chainId={value.id}
         width={20}
         height={20}
-        className="relay-rounded-[4px] relay-overflow-hidden"
+        className="relay:rounded-[4px] relay:overflow-hidden"
       />
     ) : (
       <AllChainsLogo style={{ width: 20, height: 20 }} />
     )}
-    <Box className="relay-text-[color:var(--relay-colors-gray9)]">
+    <Box className="relay:text-[color:var(--relay-colors-gray9)]">
       <FontAwesomeIcon
         icon={faChevronDown}
         width={12}
@@ -152,10 +152,10 @@ export const CompactChainFilter: FC<CompactChainFilterProps> = ({
       contentProps={{
         align: 'end',
         avoidCollisions: false,
-        className: 'relay-p-0 relay-min-w-full relay-max-w-full relay-mx-0'
+        className: 'relay:p-0 relay:min-w-full relay:max-w-full relay:mx-0'
       }}
     >
-      <Flex direction="column" className="relay-p-2" data-chain-dropdown="true">
+      <Flex direction="column" className="relay:p-2" data-chain-dropdown="true">
         <ChainSearchInput
           ref={searchInputRef}
           value={chainSearchInput}
@@ -167,7 +167,7 @@ export const CompactChainFilter: FC<CompactChainFilterProps> = ({
         />
         <Flex
           direction="column"
-          className="relay-overflow-y-auto relay-rounded-[8px] relay-max-h-[290px]"
+          className="relay:overflow-y-auto relay:rounded-[8px] relay:max-h-[290px]"
           style={{ scrollbarColor: 'var(--relay-colors-gray5) transparent' }}
         >
           {filteredChains ? (
@@ -183,7 +183,7 @@ export const CompactChainFilter: FC<CompactChainFilterProps> = ({
                       setOpen(false)
                       setChainSearchInput('')
                     }}
-                    className="relay-p-[8px] relay-rounded-[4px] relay-cursor-pointer relay-bg-[var(--relay-colors-modal-background)] relay-outline-none hover:relay-bg-[var(--relay-colors-gray3)] focus:relay-bg-[var(--relay-colors-gray3)]"
+                    className="relay:p-[8px] relay:rounded-[4px] relay:cursor-pointer relay:bg-[var(--relay-colors-modal-background)] relay:outline-none relay:hover:bg-[var(--relay-colors-gray3)] relay:focus:bg-[var(--relay-colors-gray3)]"
                   >
                     <ChainFilterRow
                       chain={chain}
@@ -195,7 +195,7 @@ export const CompactChainFilter: FC<CompactChainFilterProps> = ({
                 )
               })
             ) : (
-              <Text style="body1" className="relay-p-2 relay-text-center">
+              <Text style="body1" className="relay:p-2 relay:text-center">
                 No results.
               </Text>
             )
@@ -209,7 +209,7 @@ export const CompactChainFilter: FC<CompactChainFilterProps> = ({
                     onSelect(allChainsOption)
                     setChainSearchInput('')
                   }}
-                  className="relay-p-[8px] relay-rounded-[4px] relay-cursor-pointer relay-bg-[var(--relay-colors-modal-background)] relay-outline-none hover:relay-bg-[var(--relay-colors-gray3)] focus:relay-bg-[var(--relay-colors-gray3)]"
+                  className="relay:p-[8px] relay:rounded-[4px] relay:cursor-pointer relay:bg-[var(--relay-colors-modal-background)] relay:outline-none relay:hover:bg-[var(--relay-colors-gray3)] relay:focus:bg-[var(--relay-colors-gray3)]"
                 >
                   <ChainFilterRow
                     chain={allChainsOption}
@@ -220,8 +220,8 @@ export const CompactChainFilter: FC<CompactChainFilterProps> = ({
 
               {starredChains.length > 0 && (
                 <>
-                  <Flex align="center" className="relay-px-2 relay-py-1 relay-gap-1">
-                    <Box className="relay-text-[color:var(--relay-colors-primary9)]">
+                  <Flex align="center" className="relay:px-2 relay:py-1 relay:gap-1">
+                    <Box className="relay:text-[color:var(--relay-colors-primary9)]">
                       <FontAwesomeIcon icon={faStar} width={12} height={12} />
                     </Box>
                     <Text style="subtitle2" color="subtle">
@@ -239,7 +239,7 @@ export const CompactChainFilter: FC<CompactChainFilterProps> = ({
                           setOpen(false)
                           setChainSearchInput('')
                         }}
-                        className="relay-p-[8px] relay-rounded-[4px] relay-cursor-pointer relay-bg-[var(--relay-colors-modal-background)] relay-outline-none hover:relay-bg-[var(--relay-colors-gray3)] focus:relay-bg-[var(--relay-colors-gray3)]"
+                        className="relay:p-[8px] relay:rounded-[4px] relay:cursor-pointer relay:bg-[var(--relay-colors-modal-background)] relay:outline-none relay:hover:bg-[var(--relay-colors-gray3)] relay:focus:bg-[var(--relay-colors-gray3)]"
                       >
                         <ChainFilterRow
                           chain={chain}
@@ -254,7 +254,7 @@ export const CompactChainFilter: FC<CompactChainFilterProps> = ({
                 </>
               )}
 
-              <Text style="subtitle2" color="subtle" className="relay-px-2 relay-py-1">
+              <Text style="subtitle2" color="subtle" className="relay:px-2 relay:py-1">
                 Chains A-Z
               </Text>
               {alphabeticalChains.map((chain: ChainFilterValue) => {
@@ -268,7 +268,7 @@ export const CompactChainFilter: FC<CompactChainFilterProps> = ({
                       setOpen(false)
                       setChainSearchInput('')
                     }}
-                    className="relay-p-[8px] relay-rounded-[4px] relay-cursor-pointer relay-bg-[var(--relay-colors-modal-background)] relay-outline-none hover:relay-bg-[var(--relay-colors-gray3)] focus:relay-bg-[var(--relay-colors-gray3)]"
+                    className="relay:p-[8px] relay:rounded-[4px] relay:cursor-pointer relay:bg-[var(--relay-colors-modal-background)] relay:outline-none relay:hover:bg-[var(--relay-colors-gray3)] relay:focus:bg-[var(--relay-colors-gray3)]"
                   >
                     <ChainFilterRow
                       chain={chain}
diff --git a/packages/ui/src/components/common/TokenSelector/MobileChainSelector.tsx b/packages/ui/src/components/common/TokenSelector/MobileChainSelector.tsx
index b5ad4b395..eb78e949e 100644
--- a/packages/ui/src/components/common/TokenSelector/MobileChainSelector.tsx
+++ b/packages/ui/src/components/common/TokenSelector/MobileChainSelector.tsx
@@ -107,18 +107,18 @@ export const MobileChainSelector: FC<MobileChainSelectorProps> = ({
   return (
     <Flex
       direction="column"
-      className="relay-w-full relay-h-full relay-gap-3"
+      className="relay:w-full relay:h-full relay:gap-3"
     >
       {/* Header with back button, search, and close */}
       <Flex
         align="center"
-        className="relay-gap-1 relay-w-full"
+        className="relay:gap-1 relay:w-full"
       >
         <Button
           color="ghost"
           size="none"
           onClick={onBack}
-          className="relay-p-2 relay-rounded-[8px] relay-flex relay-items-center relay-justify-center relay-min-w-[40px] relay-h-[40px] relay-text-[color:var(--relay-colors-gray9)]"
+          className="relay:p-2 relay:rounded-[8px] relay:flex relay:items-center relay:justify-center relay:min-w-[40px] relay:h-[40px] relay:text-[color:var(--relay-colors-gray9)]"
         >
           <FontAwesomeIcon icon={faArrowLeft} width={16} height={16} />
         </Button>
@@ -126,7 +126,7 @@ export const MobileChainSelector: FC<MobileChainSelectorProps> = ({
         <Input
           placeholder="Search a chain"
           icon={
-            <Box className="relay-text-[color:var(--relay-colors-gray9)]">
+            <Box className="relay:flex relay:text-[color:var(--relay-colors-gray9)]">
               <FontAwesomeIcon
                 icon={faMagnifyingGlass}
                 width={16}
@@ -134,8 +134,8 @@ export const MobileChainSelector: FC<MobileChainSelectorProps> = ({
               />
             </Box>
           }
-          containerClassName="relay-flex-1 relay-h-[40px]"
-          className="relay-w-full [&::placeholder]:relay-text-ellipsis"
+          containerClassName="relay:flex-1 relay:h-[40px]"
+          className="relay:w-full relay:[&::placeholder]:text-ellipsis"
           value={chainSearchInput}
           onChange={(e) =>
             setChainSearchInput((e.target as HTMLInputElement).value)
@@ -146,7 +146,7 @@ export const MobileChainSelector: FC<MobileChainSelectorProps> = ({
           color="ghost"
           size="none"
           onClick={onClose}
-          className="relay-p-2 relay-rounded-[8px] relay-flex relay-items-center relay-justify-center relay-min-w-[40px] relay-h-[40px] relay-text-[color:var(--relay-colors-gray9)]"
+          className="relay:p-2 relay:rounded-[8px] relay:flex relay:items-center relay:justify-center relay:min-w-[40px] relay:h-[40px] relay:text-[color:var(--relay-colors-gray9)]"
         >
           <FontAwesomeIcon icon={faXmark} width={16} height={16} />
         </Button>
@@ -182,7 +182,7 @@ export const MobileChainSelector: FC<MobileChainSelectorProps> = ({
             }
           }
         }}
-        className="relay-flex relay-flex-col relay-w-full relay-flex-1 relay-overflow-y-auto [scrollbar-color:var(--relay-colors-gray5)_transparent]"
+        className="relay:flex relay:flex-col relay:w-full relay:flex-1 relay:overflow-y-auto [scrollbar-color:var(--relay-colors-gray5)_transparent]"
       >
         {filteredChains ? (
           // Show search results without sections
@@ -214,7 +214,7 @@ export const MobileChainSelector: FC<MobileChainSelectorProps> = ({
                 <Button
                   color="ghost"
                   size="none"
-                  className="relay-py-3 relay-px-2 relay-flex relay-items-center relay-gap-2 relay-w-full relay-h-[56px] relay-rounded-[12px] hover:relay-bg-[var(--relay-colors-gray3)]"
+                  className="relay:py-3 relay:px-2 relay:flex relay:items-center relay:gap-2 relay:w-full relay:h-[56px] relay:rounded-[12px] relay:hover:bg-[var(--relay-colors-gray3)]"
                 >
                   <ChainIcon
                     chainId={sameChainOption.id}
@@ -229,8 +229,8 @@ export const MobileChainSelector: FC<MobileChainSelectorProps> = ({
 
             {starredChains.length > 0 && (
               <>
-                <Flex align="center" className="relay-py-2 relay-gap-2">
-                  <Box className="relay-text-[color:var(--relay-colors-primary9)]">
+                <Flex align="center" className="relay:py-2 relay:gap-2">
+                  <Box className="relay:text-[color:var(--relay-colors-primary9)]">
                     <FontAwesomeIcon icon={faStar} width={16} height={16} />
                   </Box>
                   <Text style="subtitle1" color="subtle">
@@ -241,7 +241,7 @@ export const MobileChainSelector: FC<MobileChainSelectorProps> = ({
                       <Text style="body3">Long-press to star a chain</Text>
                     }
                   >
-                    <Box className="relay-text-[color:var(--relay-colors-gray9)]">
+                    <Box className="relay:text-[color:var(--relay-colors-gray9)]">
                       <FontAwesomeIcon
                         icon={faInfoCircle}
                         width={14}
@@ -267,7 +267,7 @@ export const MobileChainSelector: FC<MobileChainSelectorProps> = ({
               </>
             )}
 
-            <Text style="subtitle1" color="subtle" className="relay-py-2">
+            <Text style="subtitle1" color="subtle" className="relay:py-2">
               Chains A-Z
             </Text>
             {alphabeticalChains.map((chain) => {
@@ -402,7 +402,7 @@ const MobileChainRow: FC<MobileChainRowProps> = ({
         <Button
           color="ghost"
           size="none"
-          className="relay-py-3 relay-px-2 relay-flex relay-items-center relay-gap-2 relay-w-full relay-h-[56px] relay-rounded-[12px] hover:relay-bg-[var(--relay-colors-gray3)]"
+          className="relay:py-3 relay:px-2 relay:flex relay:items-center relay:gap-2 relay:w-full relay:h-[56px] relay:rounded-[12px] relay:hover:bg-[var(--relay-colors-gray3)]"
         >
           <AllChainsLogo style={{ width: 24, height: 24 }} />
           <Text style="subtitle1">{chain.name}</Text>
@@ -412,7 +412,7 @@ const MobileChainRow: FC<MobileChainRowProps> = ({
   }
 
   return (
-    <div className="relay-relative relay-w-full">
+    <div className="relay:relative relay:w-full">
       <AccessibleListItem value={value} asChild>
         <Button
           color="ghost"
@@ -430,14 +430,14 @@ const MobileChainRow: FC<MobileChainRowProps> = ({
           onTouchStart={handleTouchStart}
           onTouchEnd={handleTouchEnd}
           onTouchMove={handleTouchMove}
-          className="relay-py-3 relay-px-2 relay-flex relay-items-center relay-gap-2 relay-w-full relay-h-[56px] relay-rounded-[12px] relay-select-none hover:relay-bg-[var(--relay-colors-gray3)]"
+          className="relay:py-3 relay:px-2 relay:flex relay:items-center relay:gap-2 relay:w-full relay:h-[56px] relay:rounded-[12px] relay:select-none relay:hover:bg-[var(--relay-colors-gray3)]"
         >
           <ChainIcon chainId={chain.id} square width={24} height={24} />
-          <Text style="subtitle1" className="relay-flex-1 relay-text-left">
+          <Text style="subtitle1" className="relay:flex-1 relay:text-left">
             {('displayName' in chain && chain.displayName) || chain.name}
           </Text>
           {showStar && isStarred && (
-            <Box className="relay-text-[color:var(--relay-colors-primary9)]">
+            <Box className="relay:text-[color:var(--relay-colors-primary9)]">
               <FontAwesomeIcon icon={faStar} width={16} height={16} />
             </Box>
           )}
@@ -448,7 +448,7 @@ const MobileChainRow: FC<MobileChainRowProps> = ({
       {dropdownOpen && (
         <div
           ref={dropdownRef}
-          className="relay-absolute relay-top-full relay-left-0 relay-mt-1 relay-min-w-[160px] relay-z-[999999]"
+          className="relay:absolute relay:top-full relay:left-0 relay:mt-1 relay:min-w-[160px] relay:z-[999999]"
           onClick={(e) => {
             e.stopPropagation()
             handleToggleStar()
@@ -457,18 +457,18 @@ const MobileChainRow: FC<MobileChainRowProps> = ({
           onTouchStart={(e) => e.stopPropagation()}
         >
           <Flex
-            className="relay-items-center relay-gap-[8px] relay-p-[8px] relay-rounded-[12px] relay-cursor-pointer relay-bg-[var(--relay-colors-gray1)] relay-border relay-border-solid relay-border-[var(--relay-colors-subtle-border-color)] hover:relay-bg-[var(--relay-colors-gray2)]"
+            className="relay:items-center relay:gap-[8px] relay:p-[8px] relay:rounded-[12px] relay:cursor-pointer relay:bg-[var(--relay-colors-gray1)] relay:border relay:border-solid relay:border-[var(--relay-colors-subtle-border-color)] relay:hover:bg-[var(--relay-colors-gray2)]"
           >
             <Box
               className={cn(
                 isStarred
-                  ? 'relay-text-[color:var(--relay-colors-gray8)]'
-                  : 'relay-text-[color:var(--relay-colors-primary9)]'
+                  ? 'relay:text-[color:var(--relay-colors-gray8)]'
+                  : 'relay:text-[color:var(--relay-colors-primary9)]'
               )}
             >
               <FontAwesomeIcon icon={faStar} width={16} height={16} />
             </Box>
-            <Text style="subtitle1" className="relay-leading-[20px]">
+            <Text style="subtitle1" className="relay:leading-[20px]">
               {isStarred ? 'Unstar chain' : 'Star chain'}
             </Text>
           </Flex>
diff --git a/packages/ui/src/components/common/TokenSelector/PaymentMethod.tsx b/packages/ui/src/components/common/TokenSelector/PaymentMethod.tsx
index 847fd17c8..ba63da8a4 100644
--- a/packages/ui/src/components/common/TokenSelector/PaymentMethod.tsx
+++ b/packages/ui/src/components/common/TokenSelector/PaymentMethod.tsx
@@ -494,20 +494,20 @@ const PaymentMethod: FC<PaymentMethodProps> = ({
   const paymentMethodContent = (
     <Flex
       direction="column"
-      className="relay-w-full relay-h-full relay-gap-3 relay-overflow-y-hidden relay-min-w-0 relay-max-w-full"
+      className="relay:w-full relay:h-full relay:gap-3 relay:overflow-y-hidden relay:min-w-0 relay:max-w-full"
     >
       {/* Header with back button */}
-      <Flex align="center" className="relay-gap-1">
+      <Flex align="center" className="relay:gap-1">
         <Button
           color="ghost"
           size="none"
           onClick={() => onOpenChange(false)}
-          className="relay-py-1 relay-px-0 relay-min-w-[auto] relay-text-[color:var(--relay-colors-gray9)] relay-cursor-pointer relay-rounded-[8px] relay-flex relay-items-center relay-gap-1 focus-visible:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)] min-[660px]:relay-p-0"
+          className="relay:py-1 relay:px-0 relay:min-w-[auto] relay:text-[color:var(--relay-colors-gray9)] relay:cursor-pointer relay:rounded-[8px] relay:flex relay:items-center relay:gap-1 relay:focus-visible:shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)] relay:min-[660px]:p-0"
         >
           <FontAwesomeIcon icon={faChevronLeft} width={20} height={20} />
           <Text
             style="subtitle1"
-            className="relay-text-[color:var(--relay-colors-text-subtle)] min-[660px]:relay-text-[14px] min-[660px]:relay-text-[color:var(--relay-colors-text-default)] min-[660px]:relay-leading-[20px]"
+            className="relay:text-[color:var(--relay-colors-text-subtle)] relay:min-[660px]:text-[14px] relay:min-[660px]:text-[color:var(--relay-colors-text-default)] relay:min-[660px]:leading-[20px]"
           >
             {context === 'from' ? 'Pay with' : 'Sell to'}
           </Text>
@@ -515,7 +515,7 @@ const PaymentMethod: FC<PaymentMethodProps> = ({
       </Flex>
 
       <Flex
-        className="relay-flex-1 relay-gap-3 relay-overflow-hidden relay-min-w-0 relay-max-w-full"
+        className="relay:flex-1 relay:gap-3 relay:overflow-hidden relay:min-w-0 relay:max-w-full"
       >
         {/* Main Token Content */}
         <AccessibleList
@@ -538,29 +538,29 @@ const PaymentMethod: FC<PaymentMethodProps> = ({
               handleTokenSelection(selectedToken)
             }
           }}
-          className="relay-flex relay-flex-col relay-w-full relay-min-w-0 relay-max-w-full relay-h-full"
+          className="relay:flex relay:flex-col relay:w-full relay:min-w-0 relay:max-w-full relay:h-full"
         >
           {/* Search Input Section - Fixed */}
           <Flex
             direction="column"
             align="start"
-            className="relay-w-full relay-gap-2 relay-bg-[var(--relay-colors-modal-background)] relay-min-w-0 relay-max-w-full"
+            className="relay:w-full relay:gap-2 relay:bg-[var(--relay-colors-modal-background)] relay:min-w-0 relay:max-w-full"
           >
             {/* Search input and Chain Filter Button Row */}
             <Flex
               align="center"
-              className="relay-w-full relay-gap-2 relay-min-w-0 relay-items-center relay-h-[40px]"
+              className="relay:w-full relay:gap-2 relay:min-w-0 relay:items-center relay:h-[40px]"
             >
               <AccessibleListItem
                 value="input"
                 asChild
-                className="relay-flex-1 relay-min-w-0 relay-flex relay-items-center"
+                className="relay:flex-1 relay:min-w-0 relay:flex relay:items-center"
               >
                 <Input
                   ref={setTokenSearchInputElement}
                   placeholder="Search for a token"
                   icon={
-                    <Box className="relay-text-[color:var(--relay-colors-gray9)]">
+                    <Box className="relay:flex relay:text-[color:var(--relay-colors-gray9)]">
                       <FontAwesomeIcon
                         icon={faMagnifyingGlass}
                         width={16}
@@ -568,8 +568,8 @@ const PaymentMethod: FC<PaymentMethodProps> = ({
                       />
                     </Box>
                   }
-                  containerClassName="relay-w-full relay-h-[40px]"
-                  className="relay-w-full [&::placeholder]:relay-text-ellipsis"
+                  containerClassName="relay:w-full relay:h-[40px]"
+                  className="relay:w-full relay:[&::placeholder]:text-ellipsis"
                   onChange={(e) => {
                     const value = (e.target as HTMLInputElement).value
 
@@ -607,7 +607,7 @@ const PaymentMethod: FC<PaymentMethodProps> = ({
           <Flex
             key={chainFilter.id ?? 'all'}
             direction="column"
-            className="relay-flex-1 relay-overflow-y-auto relay-gap-3 relay-pt-2 relay-min-w-0 relay-max-w-full"
+            className="relay:flex-1 relay:overflow-y-auto relay:gap-3 relay:pt-2 relay:min-w-0 relay:max-w-full"
             style={{ scrollbarColor: 'var(--relay-colors-gray5) transparent' }}
           >
             {/* Suggested Tokens */}
@@ -644,7 +644,7 @@ const PaymentMethod: FC<PaymentMethodProps> = ({
                 chainFilterId={chainFilter.id}
               />
             ) : (
-              <Flex direction="column" className="relay-gap-3">
+              <Flex direction="column" className="relay:gap-3">
                 {(() => {
                   const hasLoadedBalanceData = Boolean(duneTokens)
                   const userTokensReady = !isLoadingUserTokens
@@ -723,10 +723,10 @@ const PaymentMethod: FC<PaymentMethodProps> = ({
               <Flex
                 direction="column"
                 align="center"
-                className="relay-py-5 relay-max-w-[312px] relay-self-center"
+                className="relay:py-5 relay:max-w-[312px] relay:self-center"
               >
                 {!chainFilter?.id && isSearchTermValidAddress && (
-                  <Box className="relay-text-[color:var(--relay-colors-gray8)] relay-mb-2">
+                  <Box className="relay:text-[color:var(--relay-colors-gray8)] relay:mb-2">
                     <FontAwesomeIcon
                       icon={faFolderOpen}
                       size="xl"
@@ -738,7 +738,7 @@ const PaymentMethod: FC<PaymentMethodProps> = ({
                 <Text
                   color="subtle"
                   style="body2"
-                  className="relay-text-center"
+                  className="relay:text-center"
                 >
                   {!chainFilter?.id && isSearchTermValidAddress
                     ? 'No results. Switch to the desired chain to search by contract.'
@@ -760,7 +760,7 @@ const PaymentMethod: FC<PaymentMethodProps> = ({
           <div onClick={() => onOpenChange(true)}>{trigger}</div>
           {open && (
             <Box
-              className="relay-absolute relay-top-0 relay-left-0 relay-right-0 relay-bottom-0 relay-z-[100] relay-bg-[var(--relay-colors-widget-background)] relay-flex relay-flex-col relay-overflow-hidden"
+              className="relay:absolute relay:top-0 relay:left-0 relay:right-0 relay:bottom-0 relay:z-[100] relay:bg-[var(--relay-colors-widget-background)] relay:flex relay:flex-col relay:overflow-hidden"
             >
               {paymentMethodContent}
             </Box>
@@ -775,7 +775,7 @@ const PaymentMethod: FC<PaymentMethodProps> = ({
           onOpenChange={onOpenChange}
           showCloseButton={false}
           trigger={trigger}
-          className="relay-p-4 relay-flex relay-flex-col relay-min-w-0 relay-box-border"
+          className="relay:p-4 relay:flex relay:flex-col relay:min-w-0 relay:box-border"
           contentStyle={{
             height: 'min(85vh, 540px)',
             width: 'min(400px, 100vw)',
diff --git a/packages/ui/src/components/common/TokenSelector/PaymentTokenList.tsx b/packages/ui/src/components/common/TokenSelector/PaymentTokenList.tsx
index dd5242e68..6b48d1bc4 100644
--- a/packages/ui/src/components/common/TokenSelector/PaymentTokenList.tsx
+++ b/packages/ui/src/components/common/TokenSelector/PaymentTokenList.tsx
@@ -51,14 +51,14 @@ export const PaymentTokenList: FC<PaymentTokenListProps> = ({
           <Flex
             key={index}
             align="center"
-            className="relay-gap-2 relay-py-2 relay-px-0 relay-w-full min-[660px]:relay-px-2"
+            className="relay:gap-2 relay:py-2 relay:px-0 relay:w-full relay:min-[660px]:px-2"
           >
             <Skeleton
-              className="relay-w-[40px] relay-h-[40px] relay-rounded-[50%] relay-shrink-0"
+              className="relay:w-[40px] relay:h-[40px] relay:rounded-[50%] relay:shrink-0"
             />
-            <Flex direction="column" className="relay-gap-[2px] relay-grow">
-              <Skeleton className="relay-w-[60%] relay-h-[16px]" />
-              <Skeleton className="relay-w-[40%] relay-h-[16px]" />
+            <Flex direction="column" className="relay:gap-[2px] relay:grow">
+              <Skeleton className="relay:w-[60%] relay:h-[16px]" />
+              <Skeleton className="relay:w-[40%] relay:h-[16px]" />
             </Flex>
           </Flex>
         ))}
@@ -68,7 +68,7 @@ export const PaymentTokenList: FC<PaymentTokenListProps> = ({
 
   if (tokens.length > 0)
     return (
-      <Flex direction="column" className="relay-gap-1 relay-w-full">
+      <Flex direction="column" className="relay:gap-1 relay:w-full">
         <Text style="subtitle2" color="subtle">
           {title}
         </Text>
@@ -84,7 +84,7 @@ export const PaymentTokenList: FC<PaymentTokenListProps> = ({
             <AccessibleListItem value={value} key={value} asChild>
               <Button
                 color="ghost"
-                className="relay-gap-2 relay-cursor-pointer relay-px-0 relay-py-2 relay-transition-[backdrop-filter] relay-duration-[250ms] relay-ease-linear min-[660px]:relay-px-2 hover:relay-bg-[rgba(var(--relay-colors-gray-rgb,0,0,0),0.1)] relay-shrink-0 relay-content-center relay-flex relay-w-full focus-visible:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)] [&[data-state=on]]:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)] active:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)] focus-within:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)] relay-snap-start"
+                className="relay:gap-2 relay:cursor-pointer relay:px-0 relay:py-2 relay:transition-[backdrop-filter] relay:duration-[250ms] relay:ease-linear relay:min-[660px]:px-2 relay:hover:bg-[rgba(var(--relay-colors-gray-rgb,0,0,0),0.1)] relay:shrink-0 relay:content-center relay:flex relay:w-full relay:focus-visible:shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)] relay:[&[data-state=on]]:shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)] relay:active:shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)] relay:focus-within:shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)] relay:snap-start"
                 style={{ opacity }}
               >
                 <ChainTokenIcon
@@ -96,26 +96,26 @@ export const PaymentTokenList: FC<PaymentTokenListProps> = ({
                 <Flex
                   direction="column"
                   align="start"
-                  className="relay-gap-[2px] relay-max-w-full relay-min-w-0"
+                  className="relay:gap-[2px] relay:max-w-full relay:min-w-0"
                 >
-                  <Flex align="center" className="relay-gap-1 relay-max-w-full">
+                  <Flex align="center" className="relay:gap-1 relay:max-w-full">
                     <Text
                       style="h6"
                       ellipsify
-                      className="relay-gap-1 relay-items-center"
+                      className="relay:gap-1 relay:items-center"
                     >
                       {token.symbol}
                     </Text>
                     {token.isGasCurrency && chainFilterId && (
                       <Text
                         style="subtitle3"
-                        className="relay-px-[6px] relay-py-[4px] relay-rounded-[100px] relay-bg-[var(--relay-colors-gray3)] relay-whitespace-nowrap relay-shrink-0 relay-leading-[12px] [button:hover_&]:relay-bg-[var(--relay-colors-gray5)]"
+                        className="relay:px-[6px] relay:py-[4px] relay:rounded-[100px] relay:bg-[var(--relay-colors-gray3)] relay:whitespace-nowrap relay:shrink-0 relay:leading-[12px] relay:[button:hover_&]:bg-[var(--relay-colors-gray5)]"
                       >
                         Gas Token
                       </Text>
                     )}
                   </Flex>
-                  <Flex align="center" className="relay-gap-1 relay-max-w-full">
+                  <Flex align="center" className="relay:gap-1 relay:max-w-full">
                     <Text style="subtitle3" color="subtle" ellipsify>
                       {token.chain?.displayName ||
                         token.chain?.name ||
@@ -123,7 +123,7 @@ export const PaymentTokenList: FC<PaymentTokenListProps> = ({
                     </Text>
 
                     {!token.verified ? (
-                      <Box className="relay-text-[color:var(--relay-colors-gray8)]">
+                      <Box className="relay:text-[color:var(--relay-colors-gray8)]">
                         <FontAwesomeIcon
                           icon={faExclamationTriangle}
                           width={14}
@@ -138,12 +138,12 @@ export const PaymentTokenList: FC<PaymentTokenListProps> = ({
                   <Flex
                     direction="column"
                     align="end"
-                    className="relay-gap-[2px] relay-ml-auto relay-shrink-0"
+                    className="relay:gap-[2px] relay:ml-auto relay:shrink-0"
                   >
                     {isLoadingBalances ? (
                       <>
-                        <Skeleton className="relay-ml-auto relay-w-[60px]" />
-                        <Skeleton className="relay-ml-auto relay-w-[60px]" />
+                        <Skeleton className="relay:ml-auto relay:w-[60px]" />
+                        <Skeleton className="relay:ml-auto relay:w-[60px]" />
                       </>
                     ) : (
                       <>
@@ -175,7 +175,7 @@ export const PaymentTokenList: FC<PaymentTokenListProps> = ({
             color="grey"
             size="small"
             corners="pill"
-            className="relay-ml-auto relay-min-h-[24px] relay-px-2 relay-py-1"
+            className="relay:ml-auto relay:min-h-[24px] relay:px-2 relay:py-1"
             onClick={() => setTokensExpanded(!tokensExpanded)}
           >
             <Text style="subtitle3" color="subtle">
@@ -184,8 +184,8 @@ export const PaymentTokenList: FC<PaymentTokenListProps> = ({
             <Text
               style="body1"
               className={cn(
-                'relay-text-[color:var(--relay-colors-gray9)] relay-ml-auto relay-w-[12px]',
-                tokensExpanded ? 'relay-rotate-180' : 'relay-rotate-0'
+                'relay:text-[color:var(--relay-colors-gray9)] relay:ml-auto relay:w-[12px]',
+                tokensExpanded ? 'relay:rotate-180' : 'relay:rotate-0'
               )}
             >
               <FontAwesomeIcon icon={faChevronDown} />
diff --git a/packages/ui/src/components/common/TokenSelector/SuggestedTokens.tsx b/packages/ui/src/components/common/TokenSelector/SuggestedTokens.tsx
index 2fe86b6d4..cfb1aaf97 100644
--- a/packages/ui/src/components/common/TokenSelector/SuggestedTokens.tsx
+++ b/packages/ui/src/components/common/TokenSelector/SuggestedTokens.tsx
@@ -46,7 +46,7 @@ export const SuggestedTokens: FC<SuggestedTokensProps> = ({
 
   return (
     <Flex
-      className="relay-w-full relay-items-center relay-flex-wrap relay-gap-1 relay-my-2"
+      className="relay:w-full relay:items-center relay:flex-wrap relay:gap-1 relay:my-2"
     >
       {suggestedTokens.map((token, idx) => (
         <AccessibleListItem
@@ -64,7 +64,7 @@ export const SuggestedTokens: FC<SuggestedTokensProps> = ({
             color="ghost"
             size="none"
             corners="pill"
-            className="relay-flex relay-shrink-0 relay-cursor-pointer relay-outline-none relay-py-1 relay-pl-1 relay-pr-2 relay-gap-[1px] relay-items-center relay-border relay-border-solid relay-border-[var(--relay-colors-gray5)] relay-focus-inset relay-transition-none"
+            className="relay:flex relay:shrink-0 relay:cursor-pointer relay:outline-none relay:py-1 relay:pl-1 relay:pr-2 relay:gap-[1px] relay:items-center relay:border relay:border-solid relay:border-[var(--relay-colors-gray5)] relay:focus-inset relay:transition-none"
           >
             <ChainTokenIcon
               chainId={token.chainId}
diff --git a/packages/ui/src/components/common/TokenSelector/TagPill.tsx b/packages/ui/src/components/common/TokenSelector/TagPill.tsx
index b40923610..21f720b47 100644
--- a/packages/ui/src/components/common/TokenSelector/TagPill.tsx
+++ b/packages/ui/src/components/common/TokenSelector/TagPill.tsx
@@ -9,7 +9,7 @@ export const TagPill: FC<TagPillProps> = ({ tag }) => {
   return (
     <Text
       style="subtitle3"
-      className="relay-bg-[var(--relay-colors-primary5)] relay-text-[color:var(--relay-colors-primary11)] relay-px-[6px] relay-py-[4px] relay-rounded-[100px] relay-italic relay-leading-[100%]"
+      className="relay:bg-[var(--relay-colors-primary5)] relay:text-[color:var(--relay-colors-primary11)] relay:px-[6px] relay:py-[4px] relay:rounded-[100px] relay:italic relay:leading-[100%]"
     >
       {tag}
     </Text>
diff --git a/packages/ui/src/components/common/TokenSelector/TokenList.tsx b/packages/ui/src/components/common/TokenSelector/TokenList.tsx
index 0fa0711ed..433406eb4 100644
--- a/packages/ui/src/components/common/TokenSelector/TokenList.tsx
+++ b/packages/ui/src/components/common/TokenSelector/TokenList.tsx
@@ -49,14 +49,14 @@ export const TokenList: FC<TokenListProps> = ({
           <Flex
             key={index}
             align="center"
-            className="relay-gap-2 relay-p-2 relay-w-full"
+            className="relay:gap-2 relay:p-2 relay:w-full"
           >
             <Skeleton
-              className="relay-w-[40px] relay-h-[40px] !relay-rounded-full relay-shrink-0"
+              className="relay:w-[40px] relay:h-[40px] relay:!rounded-full relay:shrink-0"
             />
-            <Flex direction="column" className="relay-gap-[2px] relay-grow">
-              <Skeleton className="relay-w-[60%] relay-h-[16px]" />
-              <Skeleton className="relay-w-[40%] relay-h-[16px]" />
+            <Flex direction="column" className="relay:gap-[2px] relay:grow">
+              <Skeleton className="relay:w-[60%] relay:h-[16px]" />
+              <Skeleton className="relay:w-[40%] relay:h-[16px]" />
             </Flex>
           </Flex>
         ))}
@@ -66,7 +66,7 @@ export const TokenList: FC<TokenListProps> = ({
 
   if (tokens.length > 0)
     return (
-      <Flex direction="column" className="relay-gap-1 relay-w-full">
+      <Flex direction="column" className="relay:gap-1 relay:w-full">
         <Text style="subtitle2" color="subtle">
           {title}
         </Text>
@@ -83,7 +83,7 @@ export const TokenList: FC<TokenListProps> = ({
               <Button
                 color="ghost"
                 size="none"
-                className="relay-gap-2 relay-cursor-pointer relay-p-3 relay-h-[58px] relay-rounded-lg relay-transition-colors relay-duration-150 hover:relay-bg-[rgba(var(--relay-colors-gray-rgb,0,0,0),0.1)] relay-shrink-0 relay-content-center relay-flex relay-w-full relay-outline-none relay-snap-start relay-focus-inset"
+                className="relay:gap-2 relay:cursor-pointer relay:p-3 relay:h-[58px] relay:rounded-lg relay:transition-colors relay:duration-150 relay:hover:bg-[rgba(var(--relay-colors-gray-rgb,0,0,0),0.1)] relay:shrink-0 relay:content-center relay:flex relay:w-full relay:outline-none relay:snap-start relay:focus-inset"
               >
                 <ChainTokenIcon
                   chainId={token.chainId}
@@ -94,26 +94,26 @@ export const TokenList: FC<TokenListProps> = ({
                 <Flex
                   direction="column"
                   align="start"
-                  className="relay-gap-[2px] relay-max-w-full relay-min-w-0"
+                  className="relay:gap-[2px] relay:max-w-full relay:min-w-0"
                 >
-                  <Flex align="center" className="relay-gap-1 relay-max-w-full">
+                  <Flex align="center" className="relay:gap-1 relay:max-w-full">
                     <Text
                       style="h6"
                       ellipsify
-                      className="relay-gap-1 relay-items-center"
+                      className="relay:gap-1 relay:items-center"
                     >
                       {token.symbol}
                     </Text>
                     {token.isGasCurrency && chainFilterId && (
                       <Text
                         style="subtitle3"
-                        className="relay-px-[6px] relay-py-[4px] relay-rounded-[100px] relay-bg-[var(--relay-colors-gray3)] relay-whitespace-nowrap relay-shrink-0 relay-leading-[12px] [button:hover_&]:relay-bg-[var(--relay-colors-gray5)]"
+                        className="relay:px-[6px] relay:py-[4px] relay:rounded-[100px] relay:bg-[var(--relay-colors-gray3)] relay:whitespace-nowrap relay:shrink-0 relay:leading-[12px] relay:[button:hover_&]:bg-[var(--relay-colors-gray5)]"
                       >
                         Gas Token
                       </Text>
                     )}
                   </Flex>
-                  <Flex align="center" className="relay-gap-1 relay-max-w-full">
+                  <Flex align="center" className="relay:gap-1 relay:max-w-full">
                     <Text
                       style="subtitle3"
                       color={chainFilterId ? 'subtle' : undefined}
@@ -128,13 +128,13 @@ export const TokenList: FC<TokenListProps> = ({
                       style="subtitle3"
                       color="subtle"
                       ellipsify
-                      className="relay-whitespace-nowrap"
+                      className="relay:whitespace-nowrap"
                     >
                       {truncateAddress(token.address)}
                     </Text>
 
                     {!token.verified ? (
-                      <Box className="relay-text-[color:var(--relay-colors-gray8)]">
+                      <Box className="relay:text-[color:var(--relay-colors-gray8)]">
                         <FontAwesomeIcon
                           icon={faExclamationTriangle}
                           width={14}
@@ -149,12 +149,12 @@ export const TokenList: FC<TokenListProps> = ({
                   <Flex
                     direction="column"
                     align="end"
-                    className="relay-gap-[2px] relay-ml-auto relay-shrink-0"
+                    className="relay:gap-[2px] relay:ml-auto relay:shrink-0"
                   >
                     {isLoadingBalances ? (
                       <>
-                        <Skeleton className="relay-ml-auto relay-w-[60px]" />
-                        <Skeleton className="relay-ml-auto relay-w-[60px]" />
+                        <Skeleton className="relay:ml-auto relay:w-[60px]" />
+                        <Skeleton className="relay:ml-auto relay:w-[60px]" />
                       </>
                     ) : (
                       <>
@@ -186,7 +186,7 @@ export const TokenList: FC<TokenListProps> = ({
             color="grey"
             size="none"
             corners="pill"
-            className="relay-ml-auto relay-h-[24px] relay-px-2 relay-py-1"
+            className="relay:ml-auto relay:h-[24px] relay:px-2 relay:py-1"
             onClick={() => setTokensExpanded(!tokensExpanded)}
           >
             <Text style="subtitle3" color="subtle">
@@ -195,8 +195,8 @@ export const TokenList: FC<TokenListProps> = ({
             <Text
               style="body1"
               className={cn(
-                '!relay-text-[color:var(--relay-colors-gray9)] relay-ml-auto relay-w-[12px]',
-                tokensExpanded ? 'relay-rotate-180' : 'relay-rotate-0'
+                'relay:!text-[color:var(--relay-colors-gray9)] relay:ml-auto relay:w-[12px]',
+                tokensExpanded ? 'relay:rotate-180' : 'relay:rotate-0'
               )}
             >
               <FontAwesomeIcon icon={faChevronDown} />
diff --git a/packages/ui/src/components/common/TokenSelector/TokenSelector.tsx b/packages/ui/src/components/common/TokenSelector/TokenSelector.tsx
index a38a71bd9..1286392f6 100644
--- a/packages/ui/src/components/common/TokenSelector/TokenSelector.tsx
+++ b/packages/ui/src/components/common/TokenSelector/TokenSelector.tsx
@@ -30,7 +30,10 @@ import { UnverifiedTokenModal } from '../UnverifiedTokenModal.js'
 import { useEnhancedTokensList } from '../../../hooks/useEnhancedTokensList.js'
 import { TokenList } from './TokenList.js'
 import { UnsupportedDepositAddressChainIds } from '../../../constants/depositAddresses.js'
-import { getRelayUiKitData, getStarredChainIds } from '../../../utils/localStorage.js'
+import {
+  getRelayUiKitData,
+  getStarredChainIds
+} from '../../../utils/localStorage.js'
 import { isValidAddress as isValidAddressUtil } from '../../../utils/address.js'
 import {
   AccessibleList,
@@ -575,11 +578,13 @@ const TokenSelector: FC<TokenSelectorProps> = ({
             }
           }}
           trigger={trigger}
-          className="relay-p-2 relay-flex relay-flex-col relay-w-full relay-max-w-full sm:relay-max-w-full"
+          className="relay:p-4 relay:flex relay:flex-col relay:w-full relay:max-w-full relay:sm:max-w-full"
           contentStyle={{
             height: isDesktop ? 'min(85vh, 600px)' : '100%',
             maxHeight: isDesktop ? 'min(85vh, 600px)' : '100%',
-            borderRadius: isDesktop ? 'var(--relay-radii-modal-border-radius)' : '0px',
+            borderRadius: isDesktop
+              ? 'var(--relay-radii-modal-border-radius)'
+              : '0px',
             minWidth: isDesktop
               ? hasMultipleConfiguredChainIds
                 ? 660
@@ -612,11 +617,11 @@ const TokenSelector: FC<TokenSelectorProps> = ({
           ) : (
             <Flex
               direction="column"
-              className="relay-w-full relay-h-full relay-gap-3 relay-overflow-y-hidden"
+              className="relay:w-full relay:h-full relay:gap-3 relay:overflow-y-hidden"
             >
               {isDesktop && <Text style="h6">Select Token</Text>}
 
-              <Flex className="relay-flex-1 relay-gap-3 relay-overflow-hidden">
+              <Flex className="relay:flex-1 relay:gap-3 relay:overflow-hidden">
                 {/* Desktop Chain Filter Sidebar */}
                 {isDesktop &&
                 (!configuredChainIds || hasMultipleConfiguredChainIds) ? (
@@ -657,24 +662,21 @@ const TokenSelector: FC<TokenSelectorProps> = ({
                       handleTokenSelection(selectedToken)
                     }
                   }}
-                  className="relay-flex relay-flex-col relay-w-full relay-min-w-0 relay-h-full"
+                  className="relay:flex relay:flex-col relay:w-full relay:min-w-0 relay:h-full"
                 >
                   {/* Search Input Section - Fixed */}
                   <Flex
                     direction="column"
                     align="start"
-                    className="relay-w-full relay-gap-2 relay-bg-[var(--relay-colors-modal-background)]"
+                    className="relay:w-full relay:gap-2 relay:bg-[var(--relay-colors-modal-background)]"
                   >
-                    <Flex
-                      align="center"
-                      className="relay-w-full relay-gap-2"
-                    >
+                    <Flex align="center" className="relay:w-full relay:gap-2">
                       <AccessibleListItem value="input" asChild>
                         <Input
                           ref={setTokenSearchInputElement}
                           placeholder="Search for a token or paste address"
                           icon={
-                            <Box className="relay-text-[color:var(--relay-colors-gray9)]">
+                            <Box className="relay:flex relay:text-[color:var(--relay-colors-gray9)]">
                               <FontAwesomeIcon
                                 icon={faMagnifyingGlass}
                                 width={16}
@@ -682,8 +684,8 @@ const TokenSelector: FC<TokenSelectorProps> = ({
                               />
                             </Box>
                           }
-                          containerClassName={`relay-w-full relay-h-[40px] ${isDesktop ? 'relay-mb-1' : 'relay-mb-0'}`}
-                          className="relay-w-full [&::placeholder]:relay-text-ellipsis"
+                          containerClassName={`relay:w-full relay:h-[40px] ${isDesktop ? 'relay:mb-1' : 'relay:mb-0'}`}
+                          className="relay:w-full relay:[&::placeholder]:text-ellipsis"
                           value={tokenSearchInput}
                           onChange={(e) => {
                             const value = (e.target as HTMLInputElement).value
@@ -708,7 +710,7 @@ const TokenSelector: FC<TokenSelectorProps> = ({
                           color="ghost"
                           size="none"
                           onClick={() => onOpenChange(false)}
-                          className="relay-p-2 relay-rounded-[8px] relay-flex relay-items-center relay-justify-center relay-min-w-[40px] relay-h-[40px] relay-text-[color:var(--relay-colors-gray9)]"
+                          className="relay:p-2 relay:rounded-[8px] relay:flex relay:items-center relay:justify-center relay:min-w-[40px] relay:h-[40px] relay:text-[color:var(--relay-colors-gray9)]"
                         >
                           <FontAwesomeIcon
                             icon={faXmark}
@@ -736,7 +738,7 @@ const TokenSelector: FC<TokenSelectorProps> = ({
                     {!isDesktop && chainFilter.id !== undefined ? (
                       <Flex
                         align="center"
-                        className="relay-gap-2 relay-pb-1 relay-w-full"
+                        className="relay:gap-2 relay:pb-1 relay:w-full"
                       >
                         <Text style="subtitle2" color="subtle">
                           Tokens on{' '}
@@ -752,8 +754,10 @@ const TokenSelector: FC<TokenSelectorProps> = ({
                   <Flex
                     key={chainFilter.id ?? 'all'}
                     direction="column"
-                    className={`relay-flex-1 relay-overflow-y-auto relay-gap-3 ${!isDesktop && chainFilter.id !== undefined ? 'relay-pt-0' : 'relay-pt-2'}`}
-                    style={{ scrollbarColor: 'var(--relay-colors-gray5) transparent' }}
+                    className={`relay:flex-1 relay:overflow-y-auto relay:gap-3 ${!isDesktop && chainFilter.id !== undefined ? 'relay:pt-0' : 'relay:pt-2'}`}
+                    style={{
+                      scrollbarColor: 'var(--relay-colors-gray5) transparent'
+                    }}
                   >
                     {/* Suggested Tokens */}
                     {chainFilter.id &&
@@ -781,7 +785,7 @@ const TokenSelector: FC<TokenSelectorProps> = ({
                         chainFilterId={chainFilter.id}
                       />
                     ) : (
-                      <Flex direction="column" className="relay-gap-3">
+                      <Flex direction="column" className="relay:gap-3">
                         {[
                           {
                             title: 'Your Tokens',
@@ -836,10 +840,10 @@ const TokenSelector: FC<TokenSelectorProps> = ({
                       <Flex
                         direction="column"
                         align="center"
-                        className="relay-py-5 relay-max-w-[312px] relay-self-center"
+                        className="relay:py-5 relay:max-w-[312px] relay:self-center"
                       >
                         {!chainFilter?.id && isSearchTermValidAddress && (
-                          <Box className="relay-text-[color:var(--relay-colors-gray8)] relay-mb-2">
+                          <Box className="relay:text-[color:var(--relay-colors-gray8)] relay:mb-2">
                             <FontAwesomeIcon
                               icon={faFolderOpen}
                               size="xl"
@@ -851,7 +855,7 @@ const TokenSelector: FC<TokenSelectorProps> = ({
                         <Text
                           color="subtle"
                           style="body2"
-                          className="relay-text-center"
+                          className="relay:text-center"
                         >
                           {!chainFilter?.id && isSearchTermValidAddress
                             ? 'No results. Switch to the desired chain to search by contract.'
diff --git a/packages/ui/src/components/common/TokenSelector/triggers/PaymentMethodTrigger.tsx b/packages/ui/src/components/common/TokenSelector/triggers/PaymentMethodTrigger.tsx
index 8767d91d2..430326512 100644
--- a/packages/ui/src/components/common/TokenSelector/triggers/PaymentMethodTrigger.tsx
+++ b/packages/ui/src/components/common/TokenSelector/triggers/PaymentMethodTrigger.tsx
@@ -78,47 +78,47 @@ export const PaymentMethodTrigger: FC<PaymentMethodTriggerProps> = ({
     <Button
       color="white"
       corners="pill"
-      className="relay-h-[50px] relay-min-h-[50px] relay-w-[220px] relay-shrink-0 relay-overflow-hidden relay-rounded-[12px] relay-p-[12px] relay-bg-[var(--relay-colors-widget-selector-background)] relay-border-none hover:relay-bg-[var(--relay-colors-widget-selector-hover-background)]"
+      className="relay:h-[50px] relay:min-h-[50px] relay:w-[220px] relay:shrink-0 relay:overflow-hidden relay:rounded-[12px] relay:p-[12px] relay:bg-[var(--relay-colors-widget-selector-background)] relay:border-none relay:hover:bg-[var(--relay-colors-widget-selector-hover-background)]"
       data-testid={testId}
     >
-      <Flex align="center" justify="between" className="relay-w-full">
-        <Flex align="center" className="relay-gap-2">
+      <Flex align="center" justify="between" className="relay:w-full">
+        <Flex align="center" className="relay:gap-2">
           <ChainTokenIcon
             chainId={token.chainId}
             tokenlogoURI={token.logoURI}
             tokenSymbol={token.symbol}
             chainIconSize={14}
-            className="relay-w-[32px] relay-h-[32px]"
+            className="relay:w-[32px] relay:h-[32px]"
           />
           <Flex
             direction="column"
             align="start"
-            className="relay-max-w-[150px] relay-min-w-[60px] relay-flex-1 relay-gap-[4px]"
+            className="relay:max-w-[150px] relay:min-w-[60px] relay:flex-1 relay:gap-[4px]"
           >
             <Text
               style="h6"
               ellipsify
-              className="relay-max-w-full relay-leading-normal"
+              className="relay:max-w-full relay:leading-normal"
             >
               {token.symbol}
             </Text>
             {showSkeleton ? (
               <Skeleton
-                className="relay-w-[70px] relay-h-[12px] relay-rounded-[4px]"
+                className="relay:w-[70px] relay:h-[12px] relay:rounded-[4px]"
               />
             ) : (
               <Text
                 style="subtitle3"
                 color="subtle"
                 ellipsify
-                className="relay-leading-normal relay-max-w-full"
+                className="relay:leading-normal relay:max-w-full"
               >
                 {balanceText}
               </Text>
             )}
           </Flex>
         </Flex>
-        <Box className="relay-text-[color:var(--relay-colors-gray9)] relay-w-[14px] relay-shrink-0">
+        <Box className="relay:text-[color:var(--relay-colors-gray9)] relay:w-[14px] relay:shrink-0">
           <FontAwesomeIcon icon={faChevronRight} width={14} />
         </Box>
       </Flex>
@@ -127,12 +127,12 @@ export const PaymentMethodTrigger: FC<PaymentMethodTriggerProps> = ({
     <Button
       color="white"
       corners="pill"
-      className="relay-h-[50px] relay-min-h-[50px] relay-w-[220px] relay-shrink-0 relay-overflow-hidden relay-rounded-[12px] relay-p-[12px] relay-bg-[var(--relay-colors-widget-selector-background)] relay-border-none hover:relay-bg-[var(--relay-colors-widget-selector-hover-background)]"
+      className="relay:h-[50px] relay:min-h-[50px] relay:w-[220px] relay:shrink-0 relay:overflow-hidden relay:rounded-[12px] relay:p-[12px] relay:bg-[var(--relay-colors-widget-selector-background)] relay:border-none relay:hover:bg-[var(--relay-colors-widget-selector-hover-background)]"
       data-testid={testId}
     >
-      <Flex align="center" justify="between" className="relay-w-full">
+      <Flex align="center" justify="between" className="relay:w-full">
         <Text style="h6">Select a token</Text>
-        <Box className="relay-text-[color:var(--relay-colors-gray9)] relay-w-[14px] relay-shrink-0">
+        <Box className="relay:text-[color:var(--relay-colors-gray9)] relay:w-[14px] relay:shrink-0">
           <FontAwesomeIcon icon={faChevronRight} width={14} />
         </Box>
       </Flex>
diff --git a/packages/ui/src/components/common/TokenSelector/triggers/TokenTrigger.tsx b/packages/ui/src/components/common/TokenSelector/triggers/TokenTrigger.tsx
index f713f1d2f..ca4d3523c 100644
--- a/packages/ui/src/components/common/TokenSelector/triggers/TokenTrigger.tsx
+++ b/packages/ui/src/components/common/TokenSelector/triggers/TokenTrigger.tsx
@@ -34,36 +34,36 @@ export const TokenTrigger: FC<TokenTriggerProps> = ({
       corners="pill"
       size="none"
       disabled={locked}
-      className="relay-w-max relay-h-[50px] relay-shrink-0 relay-overflow-hidden relay-px-3 relay-bg-[var(--relay-colors-widget-selector-background)] relay-border-none hover:relay-bg-[var(--relay-colors-widget-selector-hover-background)] disabled:relay-bg-[var(--relay-colors-widget-selector-background)] relay-transition-colors relay-duration-150"
+      className="relay:w-max relay:h-[50px] relay:shrink-0 relay:overflow-hidden relay:px-3 relay:bg-[var(--relay-colors-widget-selector-background)] relay:border-none relay:hover:bg-[var(--relay-colors-widget-selector-hover-background)] relay:disabled:bg-[var(--relay-colors-widget-selector-background)] relay:transition-colors relay:duration-150"
       data-testid={testId}
     >
-      <Flex align="center" className="relay-gap-2">
+      <Flex align="center" className="relay:gap-2">
         <ChainTokenIcon
           chainId={token.chainId}
           tokenlogoURI={token.logoURI}
           tokenSymbol={token.symbol}
-          className="relay-w-[32px] relay-h-[32px]"
+          className="relay:w-[32px] relay:h-[32px]"
         />
         <Flex
           direction="column"
           align="start"
-          className="relay-max-w-[100px] relay-min-w-[60px]"
+          className="relay:max-w-[100px] relay:min-w-[60px]"
         >
-          <Text style="h6" ellipsify className="relay-max-w-full">
+          <Text style="h6" ellipsify className="relay:max-w-full">
             {token.symbol}
           </Text>
           <Text
             style="subtitle3"
             ellipsify
             color="subtle"
-            className="relay-leading-[15px] relay-max-w-full"
+            className="relay:leading-[15px] relay:max-w-full"
           >
             {chain?.displayName}
           </Text>
         </Flex>
       </Flex>
       {locked ? null : (
-        <Box className="relay-text-[color:var(--relay-colors-gray9)] relay-w-[14px] relay-shrink-0">
+        <Box className="relay:text-[color:var(--relay-colors-gray9)] relay:w-[14px] relay:shrink-0">
           <FontAwesomeIcon icon={faChevronRight} width={14} />
         </Box>
       )}
@@ -74,10 +74,10 @@ export const TokenTrigger: FC<TokenTriggerProps> = ({
       corners="pill"
       size="none"
       cta={true}
-      className="relay-w-max relay-h-[50px] relay-shrink-0 relay-overflow-hidden relay-px-3 relay-font-bold relay-text-[16px]"
+      className="relay:w-max relay:h-[50px] relay:shrink-0 relay:overflow-hidden relay:px-3 relay:font-bold relay:text-[16px]"
     >
       Select Token
-      <Box className="relay-w-[14px]">
+      <Box className="relay:w-[14px]">
         <FontAwesomeIcon icon={faChevronRight} width={14} />
       </Box>
     </Button>
diff --git a/packages/ui/src/components/common/TransactionModal/DepositAddressModal.tsx b/packages/ui/src/components/common/TransactionModal/DepositAddressModal.tsx
index 78d461d3e..249393238 100644
--- a/packages/ui/src/components/common/TransactionModal/DepositAddressModal.tsx
+++ b/packages/ui/src/components/common/TransactionModal/DepositAddressModal.tsx
@@ -167,7 +167,7 @@ const InnerDepositAddressModal: FC<InnerDepositAddressModalProps> = ({
       trigger={null}
       open={open}
       onOpenChange={onOpenChange}
-      className="relay-overflow-hidden relay-p-4 !relay-max-w-[412px]"
+      className="relay:overflow-hidden relay:p-4 relay:!max-w-[412px]"
       showCloseButton={true}
       onPointerDownOutside={(e) => {
         const dynamicModalElements = Array.from(
@@ -184,9 +184,9 @@ const InnerDepositAddressModal: FC<InnerDepositAddressModalProps> = ({
     >
       <Flex
         direction="column"
-        className={`relay-w-full relay-h-full ${isWaitingForDeposit ? 'relay-gap-3' : 'relay-gap-4'}`}
+        className={`relay:w-full relay:h-full ${isWaitingForDeposit ? 'relay:gap-3' : 'relay:gap-4'}`}
       >
-        <Text style="h6" className="relay-mb-2">
+        <Text style="h6" className="relay:mb-2">
           {isWaitingForDeposit ? 'Manual Transfer' : 'Trade Details'}
         </Text>
 
diff --git a/packages/ui/src/components/common/TransactionModal/DepositAddressModalRenderer.tsx b/packages/ui/src/components/common/TransactionModal/DepositAddressModalRenderer.tsx
index ba86998ca..4dbad030a 100644
--- a/packages/ui/src/components/common/TransactionModal/DepositAddressModalRenderer.tsx
+++ b/packages/ui/src/components/common/TransactionModal/DepositAddressModalRenderer.tsx
@@ -171,7 +171,7 @@ export const DepositAddressModalRenderer: FC<Props> = ({
       })
       queryQuote(relayClient?.baseApiUrl, quoteParameters, {
         headers: {
-          'relay-sdk-version': relayClient?.version ?? 'unknown',
+          'relay:sdk-version': relayClient?.version ?? 'unknown',
           'relay-kit-ui-version': relayClient?.uiVersion ?? 'unknown'
         }
       })
diff --git a/packages/ui/src/components/common/TransactionModal/TransactionModal.tsx b/packages/ui/src/components/common/TransactionModal/TransactionModal.tsx
index b8945bda2..e1dc37873 100644
--- a/packages/ui/src/components/common/TransactionModal/TransactionModal.tsx
+++ b/packages/ui/src/components/common/TransactionModal/TransactionModal.tsx
@@ -235,7 +235,7 @@ const InnerTransactionModal: FC<InnerTransactionModalProps> = ({
       trigger={null}
       open={open}
       onOpenChange={onOpenChange}
-      className="relay-overflow-hidden relay-p-4 !relay-max-w-[412px] max-[520px]:!relay-max-w-[unset]"
+      className="relay:overflow-hidden relay:p-4 relay:!max-w-[412px] max-[520px]:!relay-max-w-[unset]"
       showCloseButton={true}
       onPointerDownOutside={(e) => {
         const dynamicModalElements = Array.from(
@@ -252,9 +252,9 @@ const InnerTransactionModal: FC<InnerTransactionModalProps> = ({
     >
       <Flex
         direction="column"
-        className="relay-w-full relay-h-full relay-gap-3"
+        className="relay:w-full relay:h-full relay:gap-3"
       >
-        <Text style="h6" className="relay-mb-2">
+        <Text style="h6" className="relay:mb-2">
           Transaction Details
         </Text>
         {progressStep === TransactionProgressStep.Confirmation ||
diff --git a/packages/ui/src/components/common/TransactionModal/steps/ApprovalPlusSwapStep.tsx b/packages/ui/src/components/common/TransactionModal/steps/ApprovalPlusSwapStep.tsx
index 7e61b2e18..8305efd18 100644
--- a/packages/ui/src/components/common/TransactionModal/steps/ApprovalPlusSwapStep.tsx
+++ b/packages/ui/src/components/common/TransactionModal/steps/ApprovalPlusSwapStep.tsx
@@ -46,22 +46,22 @@ export const ApprovalPlusSwapStep: FC<ApprovalPlusSwapStepProps> = ({
         align="center"
         justify="between"
         direction="column"
-        className="relay-shrink-0 bp500:relay-flex-row"
+        className="relay:shrink-0 relay:bp500:flex-row"
       >
         <Flex
           direction="column"
-          className="relay-bg-[var(--relay-colors-subtle-background-color)] relay-rounded-[12px] relay-gap-1 relay-w-full relay-py-[12px] relay-px-[16px]"
+          className="relay:bg-[var(--relay-colors-subtle-background-color)] relay:rounded-[12px] relay:gap-1 relay:w-full relay:py-[12px] relay:px-[16px]"
         >
           <Flex
             direction="column"
             align="start"
-            className="relay-gap-1 relay-cursor-pointer"
+            className="relay:gap-1 relay:cursor-pointer"
           >
             <ChainTokenIcon
               chainId={fromToken?.chainId}
               tokenlogoURI={fromToken?.logoURI}
               tokenSymbol={fromToken?.symbol}
-              className="relay-h-[32px] relay-w-[32px]"
+              className="relay:h-[32px] relay:w-[32px]"
             />
             <Text style="h6" ellipsify>
               {fromAmountFormatted} {fromToken?.symbol}
@@ -74,24 +74,24 @@ export const ApprovalPlusSwapStep: FC<ApprovalPlusSwapStepProps> = ({
         <Text
           style="body1"
           color="subtle"
-          className="relay-px-4 relay-py-0 bp400Down:relay-rotate-90"
+          className="relay:px-4 relay:py-0 relay:bp400Down:rotate-90"
         >
           <FontAwesomeIcon icon={faArrowRight} width={16} />
         </Text>
         <Flex
           direction="column"
-          className="relay-bg-[var(--relay-colors-subtle-background-color)] relay-rounded-[12px] relay-gap-1 relay-w-full relay-py-[12px] relay-px-[16px]"
+          className="relay:bg-[var(--relay-colors-subtle-background-color)] relay:rounded-[12px] relay:gap-1 relay:w-full relay:py-[12px] relay:px-[16px]"
         >
           <Flex
             direction="column"
             align="start"
-            className="relay-gap-1 relay-cursor-pointer"
+            className="relay:gap-1 relay:cursor-pointer"
           >
             <ChainTokenIcon
               chainId={toToken?.chainId}
               tokenlogoURI={toToken?.logoURI}
               tokenSymbol={toToken?.symbol}
-              className="relay-h-[32px] relay-w-[32px]"
+              className="relay:h-[32px] relay:w-[32px]"
             />
             <Text style="h6" ellipsify>
               {toAmountFormatted} {toToken?.symbol}
@@ -104,7 +104,7 @@ export const ApprovalPlusSwapStep: FC<ApprovalPlusSwapStepProps> = ({
       </Flex>
       <Flex
         direction="column"
-        className="relay-border relay-border-solid relay-border-[var(--relay-colors-gray3)] relay-rounded-[12px] relay-p-3 relay-gap-2 relay-h-[260px]"
+        className="relay:border relay:border-solid relay:border-[var(--relay-colors-gray3)] relay:rounded-[12px] relay:p-3 relay:gap-2 relay:h-[260px]"
       >
         {steps?.map((step, index) => {
           const isCurrentStep =
@@ -132,36 +132,36 @@ export const ApprovalPlusSwapStep: FC<ApprovalPlusSwapStepProps> = ({
               <Flex
                 align="center"
                 justify="between"
-                className="relay-w-full relay-gap-3"
+                className="relay:w-full relay:gap-3"
               >
-                <Flex align="center" className="relay-gap-2 relay-h-[40px]">
+                <Flex align="center" className="relay:gap-2 relay:h-[40px]">
                   {step.id === 'approve' ? (
                     <ChainTokenIcon
                       chainId={fromToken?.chainId}
                       tokenlogoURI={fromToken?.logoURI}
                       tokenSymbol={fromToken?.symbol}
                       className={cn(
-                        'relay-rounded-full relay-shrink-0',
-                        !isCurrentStep && 'relay-grayscale'
+                        'relay:rounded-full relay:shrink-0',
+                        !isCurrentStep && 'relay:grayscale'
                       )}
                     />
                   ) : (
                     <Flex
                       className={cn(
-                        'relay-rounded-full relay-shrink-0 relay-items-center relay-justify-center relay-h-[32px] relay-w-[32px]',
+                        'relay:rounded-full relay:shrink-0 relay:items-center relay:justify-center relay:h-[32px] relay:w-[32px]',
                         isCurrentStep
-                          ? 'relay-bg-[var(--relay-colors-primary5)] relay-text-[color:var(--relay-colors-primary8)]'
-                          : 'relay-bg-[var(--relay-colors-gray5)] relay-text-[color:var(--relay-colors-gray9)]'
+                          ? 'relay:bg-[var(--relay-colors-primary5)] relay:text-[color:var(--relay-colors-primary8)]'
+                          : 'relay:bg-[var(--relay-colors-gray5)] relay:text-[color:var(--relay-colors-gray9)]'
                       )}
                     >
                       <FontAwesomeIcon icon={faRepeat} width={16} />
                     </Flex>
                   )}
-                  <Flex direction="column" className="relay-gap-[2px]">
+                  <Flex direction="column" className="relay:gap-[2px]">
                     <Text style="subtitle2">{stepTitle}</Text>
                     {isApproveStep && !hasTxHash && (
                       <Anchor
-                        className="relay-text-[12px]"
+                        className="relay:text-[12px]"
                         href="https://support.relay.link/en/articles/10371133-why-do-i-have-to-approve-a-token"
                         target="_blank"
                       >
@@ -180,7 +180,7 @@ export const ApprovalPlusSwapStep: FC<ApprovalPlusSwapStepProps> = ({
                             key={txHash}
                             href={txUrl}
                             target="_blank"
-                            className="relay-text-[12px]"
+                            className="relay:text-[12px]"
                           >
                             View Tx: {truncateAddress(txHash, '...', 6, 4)}
                           </Anchor>
@@ -192,12 +192,12 @@ export const ApprovalPlusSwapStep: FC<ApprovalPlusSwapStepProps> = ({
                 <Flex>
                   {isCurrentStep && hasTxHash ? (
                     <LoadingSpinner
-                      className="relay-h-4 relay-w-4 relay-fill-[var(--relay-colors-gray9)]"
+                      className="relay:h-4 relay:w-4 relay:fill-[var(--relay-colors-gray9)]"
                     />
                   ) : step?.items?.every(
                       (item) => item.status === 'complete'
                     ) ? (
-                    <Box className="relay-text-[color:var(--relay-colors-green9)]">
+                    <Box className="relay:text-[color:var(--relay-colors-green9)]">
                       <FontAwesomeIcon icon={faCheck} width={16} />
                     </Box>
                   ) : null}
@@ -205,8 +205,8 @@ export const ApprovalPlusSwapStep: FC<ApprovalPlusSwapStepProps> = ({
               </Flex>
 
               {index !== (steps?.length || 0) - 1 && (
-                <Box className="relay-pl-4 relay-h-[14px] relay-mt-3">
-                  <Box className="relay-h-full relay-w-px relay-bg-[var(--relay-colors-gray11)]" />
+                <Box className="relay:pl-4 relay:h-[14px] relay:mt-3">
+                  <Box className="relay:h-full relay:w-px relay:bg-[var(--relay-colors-gray11)]" />
                 </Box>
               )}
             </Box>
diff --git a/packages/ui/src/components/common/TransactionModal/steps/DepositAddressValidatingStep.tsx b/packages/ui/src/components/common/TransactionModal/steps/DepositAddressValidatingStep.tsx
index 3960a54ab..cba453c80 100644
--- a/packages/ui/src/components/common/TransactionModal/steps/DepositAddressValidatingStep.tsx
+++ b/packages/ui/src/components/common/TransactionModal/steps/DepositAddressValidatingStep.tsx
@@ -23,15 +23,15 @@ export const DepositAddressValidatingStep: FC<
     <>
       <Flex direction="column" align="center" justify="between">
         <LoadingSpinner
-          className="relay-h-10 relay-w-10 relay-fill-[var(--relay-colors-primary-color)]"
+          className="relay:h-10 relay:w-10 relay:fill-[var(--relay-colors-primary-color)]"
         />
-        <Text style="subtitle2" className="relay-mt-4 relay-mb-2 relay-text-center">
+        <Text style="subtitle2" className="relay:mt-4 relay:mb-2 relay:text-center">
           Funds received. Your transaction is now in progress.
         </Text>
         <Text
           color="subtle"
           style="body2"
-          className="relay-mt-3 relay-text-center"
+          className="relay:mt-3 relay:text-center"
         >
           Feel free to leave at any time, you can track your progress within the{' '}
           <Anchor
@@ -47,10 +47,10 @@ export const DepositAddressValidatingStep: FC<
       </Flex>
       <Button
         disabled={true}
-        className="relay-text-[color:var(--relay-colors-button-disabled-color)_!important] relay-mt-2 relay-justify-center"
+        className="relay:text-[color:var(--relay-colors-button-disabled-color)_!important] relay:mt-2 relay:justify-center"
       >
         <LoadingSpinner
-          className="relay-h-4 relay-w-4 relay-fill-[var(--relay-colors-button-disabled-color)]"
+          className="relay:h-4 relay:w-4 relay:fill-[var(--relay-colors-button-disabled-color)]"
         />
         Validating Transaction
       </Button>
diff --git a/packages/ui/src/components/common/TransactionModal/steps/ErrorStep.tsx b/packages/ui/src/components/common/TransactionModal/steps/ErrorStep.tsx
index 14b0d6d02..4ffa16adf 100644
--- a/packages/ui/src/components/common/TransactionModal/steps/ErrorStep.tsx
+++ b/packages/ui/src/components/common/TransactionModal/steps/ErrorStep.tsx
@@ -108,27 +108,27 @@ export const ErrorStep: FC<ErrorStepProps> = ({
       direction="column"
       align="center"
       justify="between"
-      className="relay-w-full"
+      className="relay:w-full"
     >
-      <div className="relay-animate-icon-pop-in">
+      <div className="relay:animate-icon-pop-in">
         {isRefund ? (
-          <Box className="relay-mr-2 relay-text-[color:var(--relay-colors-gray9)]">
-            <FontAwesomeIcon icon={faRotateRight} className="relay-h-[40px]" />
+          <Box className="relay:mr-2 relay:text-[color:var(--relay-colors-gray9)]">
+            <FontAwesomeIcon icon={faRotateRight} style={{ height: 40 }} />
           </Box>
         ) : null}
 
         {!isRefund && isSolverStatusTimeout ? (
-          <Box className="relay-mr-2 relay-text-[color:var(--relay-colors-amber9)]">
+          <Box className="relay:mr-2 relay:text-[color:var(--relay-colors-amber9)]">
             <FontAwesomeIcon
               icon={faCircleExclamation}
-              className="relay-h-[40px]"
+              style={{ height: 40 }}
             />
           </Box>
         ) : null}
 
         {!isRefund && !isSolverStatusTimeout ? (
-          <Box className="relay-mr-2 relay-text-[color:var(--relay-colors-red9)]">
-            <FontAwesomeIcon icon={faCircleXmark} className="relay-h-[40px]" />
+          <Box className="relay:mr-2 relay:text-[color:var(--relay-colors-red9)]">
+            <FontAwesomeIcon icon={faCircleXmark} style={{ height: 40 }} />
           </Box>
         ) : null}
       </div>
@@ -138,9 +138,9 @@ export const ErrorStep: FC<ErrorStepProps> = ({
         !transaction?.data?.failReason ? (
           <Flex
             direction="column"
-            className="relay-my-4 relay-text-center relay-items-center"
+            className="relay:my-4 relay:text-center relay:items-center"
           >
-            <Text style="subtitle1" className="relay-mb-4">
+            <Text style="subtitle1" className="relay:mb-4">
               It looks like an unknown issue occurred during the transaction.
               {fromToken && fromAmountFormatted && fromChain
                 ? ` We've refunded ${fromAmountFormatted} ${fromToken.symbol} on ${fromChain.displayName}.`
@@ -148,11 +148,11 @@ export const ErrorStep: FC<ErrorStepProps> = ({
             </Text>
 
             {/* Transaction Pills */}
-            <Flex className="relay-items-center relay-gap-2">
+            <Flex className="relay:items-center relay:gap-2">
               {fromToken && fromChain ? (
                 <Pill
                   color="gray"
-                  className="relay-items-center relay-py-2 relay-px-3"
+                  className="relay:items-center relay:py-2 relay:px-3"
                 >
                   <ChainTokenIcon
                     chainId={fromChain.id}
@@ -160,7 +160,7 @@ export const ErrorStep: FC<ErrorStepProps> = ({
                     tokenSymbol={fromToken.symbol}
                     size="base"
                   />
-                  <Text style="subtitle1" className="relay-ml-2">
+                  <Text style="subtitle1" className="relay:ml-2">
                     {fromAmountFormatted} {fromToken.symbol}
                   </Text>
                 </Pill>
@@ -168,14 +168,14 @@ export const ErrorStep: FC<ErrorStepProps> = ({
                 <Text style="subtitle1">?</Text>
               )}
 
-              <Flex className="relay-items-center relay-justify-center relay-p-2">
-                <FontAwesomeIcon className="relay-w-[14px]" icon={faArrowRight} />
+              <Flex className="relay:items-center relay:justify-center relay:p-2">
+                <FontAwesomeIcon style={{ width: 14 }} icon={faArrowRight} />
               </Flex>
 
               {toToken && toChain ? (
                 <Pill
                   color="gray"
-                  className="relay-items-center relay-py-2 relay-px-3"
+                  className="relay:items-center relay:py-2 relay:px-3"
                 >
                   <ChainTokenIcon
                     chainId={toChain.id}
@@ -183,7 +183,7 @@ export const ErrorStep: FC<ErrorStepProps> = ({
                     tokenSymbol={toToken.symbol}
                     size="base"
                   />
-                  <Text style="subtitle1" className="relay-ml-2">
+                  <Text style="subtitle1" className="relay:ml-2">
                     {toAmountFormatted} {toToken.symbol}
                   </Text>
                 </Pill>
@@ -193,7 +193,7 @@ export const ErrorStep: FC<ErrorStepProps> = ({
             </Flex>
           </Flex>
         ) : (
-          <Text style="subtitle2" className="relay-my-4 relay-text-center">
+          <Text style="subtitle2" className="relay:my-4 relay:text-center">
             <RefundReason reasonCode={transaction?.data?.failReason} />
             {refundDetails
               ? ` We've refunded ${refundDetails.amountFormatted} ${refundDetails.currency?.symbol} on ${refundChain?.displayName}.`
@@ -211,7 +211,7 @@ export const ErrorStep: FC<ErrorStepProps> = ({
         <>
           <Flex
             direction="column"
-            className="relay-p-3 relay-border relay-border-solid relay-border-[var(--relay-colors-subtle-border-color)] relay-gap-3 relay-w-full relay-rounded-[12px] relay-mb-6"
+            className="relay:p-3 relay:border relay:border-solid relay:border-[var(--relay-colors-subtle-border-color)] relay:gap-3 relay:w-full relay:rounded-[12px] relay:mb-6"
           >
             <TransactionsByChain
               allTxHashes={allTxHashes}
@@ -223,7 +223,7 @@ export const ErrorStep: FC<ErrorStepProps> = ({
             />
           </Flex>
 
-          <Flex className="relay-gap-3 relay-w-full">
+          <Flex className="relay:gap-3 relay:w-full">
             <Button
               color="secondary"
               cta={true}
@@ -235,7 +235,7 @@ export const ErrorStep: FC<ErrorStepProps> = ({
                   '_blank'
                 )
               }}
-              className="relay-justify-center relay-whitespace-nowrap"
+              className="relay:justify-center relay:whitespace-nowrap"
             >
               View Details
             </Button>
@@ -244,7 +244,7 @@ export const ErrorStep: FC<ErrorStepProps> = ({
               onClick={() => {
                 onOpenChange(false)
               }}
-              className="relay-justify-center relay-w-full"
+              className="relay:justify-center relay:w-full"
             >
               Done
             </Button>
@@ -256,7 +256,7 @@ export const ErrorStep: FC<ErrorStepProps> = ({
           onClick={() => {
             onOpenChange(false)
           }}
-          className="relay-justify-center relay-w-full"
+          className="relay:justify-center relay:w-full"
         >
           Done
         </Button>
diff --git a/packages/ui/src/components/common/TransactionModal/steps/SwapConfirmationStep.tsx b/packages/ui/src/components/common/TransactionModal/steps/SwapConfirmationStep.tsx
index 447258d9d..d963a1cde 100644
--- a/packages/ui/src/components/common/TransactionModal/steps/SwapConfirmationStep.tsx
+++ b/packages/ui/src/components/common/TransactionModal/steps/SwapConfirmationStep.tsx
@@ -81,23 +81,23 @@ export const SwapConfirmationStep: FC<SwapConfirmationStepProps> = ({
         align="center"
         justify="between"
         direction="column"
-        className="relay-shrink-0 bp500:relay-flex-row"
+        className="relay:shrink-0 relay:bp500:flex-row"
       >
         <Flex
           direction="row"
-          className="relay-bg-[var(--relay-colors-subtle-background-color)] relay-rounded-[12px] relay-gap-2 relay-w-full relay-items-center bp500:relay-flex-col bp500:relay-gap-1 bp500:relay-items-start relay-py-[12px] relay-px-[16px]"
+          className="relay:bg-[var(--relay-colors-subtle-background-color)] relay:rounded-[12px] relay:gap-2 relay:w-full relay:items-center relay:bp500:flex-col relay:bp500:gap-1 relay:bp500:items-start relay:py-[12px] relay:px-[16px]"
         >
           <ChainTokenIcon
             chainId={fromToken?.chainId}
             tokenlogoURI={fromToken?.logoURI}
             tokenSymbol={fromToken?.symbol}
-            className="relay-h-[32px] relay-w-[32px]"
+            className="relay:h-[32px] relay:w-[32px]"
           />
-          <Flex direction="column" align="start" className="relay-gap-1">
+          <Flex direction="column" align="start" className="relay:gap-1">
             <Text color="subtle" style="subtitle2">
               {fromChain?.displayName}
             </Text>
-            <Text style="h6" ellipsify className="relay-leading-[20px]">
+            <Text style="h6" ellipsify className="relay:leading-[20px]">
               {fromAmountFormatted} {fromToken?.symbol}
             </Text>
           </Flex>
@@ -105,25 +105,25 @@ export const SwapConfirmationStep: FC<SwapConfirmationStepProps> = ({
         <Text
           style="body1"
           color="subtle"
-          className="relay-px-3 relay-py-0 bp400Down:relay-rotate-90 bp400Down:relay-py-3 bp400Down:relay-px-0"
+          className="relay:px-3 relay:py-0 relay:bp400Down:rotate-90 relay:bp400Down:py-3 relay:bp400Down:px-0"
         >
           <FontAwesomeIcon icon={faArrowRight} width={16} />
         </Text>
         <Flex
           direction="row"
-          className="relay-bg-[var(--relay-colors-subtle-background-color)] relay-rounded-[12px] relay-gap-2 relay-w-full relay-items-center bp500:relay-flex-col bp500:relay-gap-1 bp500:relay-items-start relay-py-[12px] relay-px-[16px]"
+          className="relay:bg-[var(--relay-colors-subtle-background-color)] relay:rounded-[12px] relay:gap-2 relay:w-full relay:items-center relay:bp500:flex-col relay:bp500:gap-1 relay:bp500:items-start relay:py-[12px] relay:px-[16px]"
         >
           <ChainTokenIcon
             chainId={toToken?.chainId}
             tokenlogoURI={toToken?.logoURI}
             tokenSymbol={toToken?.symbol}
-            className="relay-h-[32px] relay-w-[32px]"
+            className="relay:h-[32px] relay:w-[32px]"
           />
-          <Flex direction="column" align="start" className="relay-gap-1">
+          <Flex direction="column" align="start" className="relay:gap-1">
             <Text color="subtle" style="subtitle2">
               {toChain?.displayName}
             </Text>
-            <Text style="h6" ellipsify className="relay-leading-[20px]">
+            <Text style="h6" ellipsify className="relay:leading-[20px]">
               {toAmountFormatted} {toToken?.symbol}
             </Text>
           </Flex>
@@ -133,7 +133,7 @@ export const SwapConfirmationStep: FC<SwapConfirmationStepProps> = ({
         <Flex
           direction="row"
           justify="between"
-          className="relay-bg-[var(--relay-colors-subtle-background-color)] relay-rounded-[12px] relay-gap-2 relay-w-full relay-items-center relay-py-[12px] relay-px-[16px]"
+          className="relay:bg-[var(--relay-colors-subtle-background-color)] relay:rounded-[12px] relay:gap-2 relay:w-full relay:items-center relay:py-[12px] relay:px-[16px]"
         >
           <Text style="subtitle2" color="subtle">
             Additional Gas
@@ -145,15 +145,15 @@ export const SwapConfirmationStep: FC<SwapConfirmationStepProps> = ({
       ) : null}
       <Flex
         direction="column"
-        className="relay-border relay-border-solid relay-border-[var(--relay-colors-gray3)] relay-rounded-[12px] relay-px-3 relay-py-2 relay-gap-1"
+        className="relay:border relay:border-solid relay:border-[var(--relay-colors-gray3)] relay:rounded-[12px] relay:px-3 relay:py-2 relay:gap-1"
       >
         {formattedSteps.map((step, index) => (
           <Box key={step.id}>
             <StepRow {...step} />
 
             {index !== formattedSteps.length - 1 && (
-              <Box className="relay-pl-3 relay-h-[14px] relay-mt-[4px]">
-                <Box className="relay-h-full relay-w-px relay-bg-[var(--relay-colors-gray7)]" />
+              <Box className="relay:pl-3 relay:h-[14px] relay:mt-[4px]">
+                <Box className="relay:h-full relay:w-px relay:bg-[var(--relay-colors-gray7)]" />
               </Box>
             )}
           </Box>
@@ -193,17 +193,17 @@ export const StepRow: FC<StepRowProps> = ({
   const relayClient = useRelayClient()
   const chains = relayClient?.chains
   return (
-    <Flex align="center" justify="between" className="relay-w-full relay-gap-3">
-      <Flex align="center" className="relay-gap-3 relay-h-[40px]">
+    <Flex align="center" justify="between" className="relay:w-full relay:gap-3">
+      <Flex align="center" className="relay:gap-3 relay:h-[40px]">
         <Flex
           data-active={isActive && !isCompleted}
           className={cn(
-            'relay-shrink-0 relay-items-center relay-justify-center relay-rounded-full relay-h-[30px] relay-w-[30px]',
+            'relay:shrink-0 relay:items-center relay:justify-center relay:rounded-full relay:h-[30px] relay:w-[30px]',
             isCompleted
-              ? 'relay-bg-[var(--relay-colors-green3)]'
+              ? 'relay:bg-[var(--relay-colors-green3)]'
               : isActive
-                ? 'relay-bg-[var(--relay-colors-primary6)]'
-                : 'relay-bg-[var(--relay-colors-gray5)]'
+                ? 'relay:bg-[var(--relay-colors-primary6)]'
+                : 'relay:bg-[var(--relay-colors-gray5)]'
           )}
           style={{
             color: isActive && !isCompleted
@@ -225,13 +225,13 @@ export const StepRow: FC<StepRowProps> = ({
             <StepIcon stepId={id} chainId={chainId} />
           )}
         </Flex>
-        <Flex direction="column" className="relay-gap-[2px]">
+        <Flex direction="column" className="relay:gap-[2px]">
           <Text style="subtitle2" color={isActive ? undefined : 'subtle'}>
             {action}
           </Text>
 
           {subText && (
-            <Flex align="center" className="relay-gap-[6px]">
+            <Flex align="center" className="relay:gap-[6px]">
               {(() => {
                 // Handle "Success: txhash" case with split colors and link
                 if (subText.startsWith('Success:')) {
@@ -244,7 +244,7 @@ export const StepRow: FC<StepRowProps> = ({
                       : undefined
 
                   return (
-                    <Flex align="center" className="relay-gap-[4px]">
+                    <Flex align="center" className="relay:gap-[4px]">
                       <Text
                         style="subtitle3"
                         color="green"
@@ -257,7 +257,7 @@ export const StepRow: FC<StepRowProps> = ({
                             href={txUrl}
                             target="_blank"
                             rel="noopener noreferrer"
-                            className="relay-no-underline"
+                            className="relay:no-underline"
                           >
                             <Text
                               style="subtitle3"
@@ -293,7 +293,7 @@ export const StepRow: FC<StepRowProps> = ({
                       : undefined
 
                   return (
-                    <Flex align="center" className="relay-gap-[4px]">
+                    <Flex align="center" className="relay:gap-[4px]">
                       <Text
                         style="subtitle3"
                         color="primary"
@@ -306,7 +306,7 @@ export const StepRow: FC<StepRowProps> = ({
                             href={txUrl}
                             target="_blank"
                             rel="noopener noreferrer"
-                            className="relay-no-underline"
+                            className="relay:no-underline"
                           >
                             <Text
                               style="subtitle3"
@@ -345,7 +345,7 @@ export const StepRow: FC<StepRowProps> = ({
                 )
               })()}
               {showSubTextSpinner && (
-                <LoadingSpinner className="relay-h-3 relay-w-3" />
+                <LoadingSpinner className="relay:h-3 relay:w-3" />
               )}
             </Flex>
           )}
diff --git a/packages/ui/src/components/common/TransactionModal/steps/SwapSuccessStep.tsx b/packages/ui/src/components/common/TransactionModal/steps/SwapSuccessStep.tsx
index eb0a7845a..2bb0f4e92 100644
--- a/packages/ui/src/components/common/TransactionModal/steps/SwapSuccessStep.tsx
+++ b/packages/ui/src/components/common/TransactionModal/steps/SwapSuccessStep.tsx
@@ -167,14 +167,14 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
   return isDelayedTx ? (
     <>
       <Flex direction="column" align="center" justify="between">
-        <div className="relay-animate-icon-pop-in">
+        <div className="relay:animate-icon-pop-in">
           <Flex
             align="center"
             justify="center"
-            className="relay-relative relay-rounded-full relay-h-[80px] relay-w-[78px] relay-bg-[var(--relay-colors-amber2)]"
+            className="relay:relative relay:rounded-full relay:h-[80px] relay:w-[78px] relay:bg-[var(--relay-colors-amber2)]"
           >
             <svg
-              className="relay-absolute relay-top-[7px] relay-left-0 relay-z-0"
+              className="relay:absolute relay:top-[7px] relay:left-0 relay:z-0"
               width="76"
               height="80"
               viewBox="0 0 64 54"
@@ -194,25 +194,25 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
             </svg>
 
             <Box
-              className="relay-z-[1] relay-text-[color:var(--relay-colors-amber9)] relay-mr-2"
+              className="relay:z-[1] relay:text-[color:var(--relay-colors-amber9)] relay:mr-2"
             >
-              <FontAwesomeIcon icon={faClockFour} className="relay-h-[32px]" />
+              <FontAwesomeIcon icon={faClockFour} style={{ height: 32 }} />
             </Box>
           </Flex>
         </div>
 
         <Text
           style="subtitle1"
-          className="relay-my-4 relay-text-center"
+          className="relay:my-4 relay:text-center"
         >
           {isBitcoinOrigin || isBitcoinDestination
             ? `Bitcoin confirmation takes ${estimatedMinutes} minutes. Track progress on the transaction page.`
             : `Processing bridge, this will take ~${estimatedMinutes} ${estimatedMinutes === 1 ? 'min' : 'mins'}.`}
         </Text>
 
-        <Flex align="center" className="relay-gap-2 relay-mb-[24px]">
+        <Flex align="center" className="relay:gap-2 relay:mb-[24px]">
           {fromChain ? (
-            <Pill color="gray" className="relay-items-center relay-py-2 relay-px-3">
+            <Pill color="gray" className="relay:items-center relay:py-2 relay:px-3">
               <ChainTokenIcon
                 chainId={fromChain.id}
                 tokenlogoURI={fromTokenLogoUri}
@@ -220,18 +220,18 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
                 size="sm"
                 chainRadius={2.5}
               />
-              <Text style="subtitle1" className="relay-ml-2">
+              <Text style="subtitle1" className="relay:ml-2">
                 {_fromAmountFormatted} {_fromToken?.symbol}
               </Text>
             </Pill>
           ) : (
             <Text style="subtitle1">?</Text>
           )}
-          <Flex className="relay-items-center relay-justify-center relay-p-2">
-            <FontAwesomeIcon className="relay-w-[14px]" icon={faArrowRight} />
+          <Flex className="relay:items-center relay:justify-center relay:p-2">
+            <FontAwesomeIcon style={{ width: 14 }} icon={faArrowRight} />
           </Flex>
           {toChain ? (
-            <Pill color="gray" className="relay-items-center relay-py-2 relay-px-3">
+            <Pill color="gray" className="relay:items-center relay:py-2 relay:px-3">
               <ChainTokenIcon
                 chainId={toChain.id}
                 tokenlogoURI={toTokenLogoUri}
@@ -239,7 +239,7 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
                 size="sm"
                 chainRadius={2.5}
               />
-              <Text style="subtitle1" className="relay-ml-2">
+              <Text style="subtitle1" className="relay:ml-2">
                 {_toAmountFormatted} {_toToken?.symbol}
               </Text>
             </Pill>
@@ -249,7 +249,7 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
         </Flex>
         <Text
           style="body2"
-          className="relay-rounded-[12px] relay-text-center relay-p-4 relay-bg-[var(--relay-colors-gray2)]"
+          className="relay:rounded-[12px] relay:text-center relay:p-4 relay:bg-[var(--relay-colors-gray2)]"
         >
           You can close this modal while it finalizes on the blockchain. The
           transaction will continue in the background.
@@ -270,7 +270,7 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
                 <Anchor
                   href={txUrl}
                   target="_blank"
-                  className="relay-text-center relay-text-[14px] relay-mt-[12px]"
+                  className="relay:text-center relay:text-[14px] relay:mt-[12px]"
                 >
                   View Refund Tx: {truncatedHash}
                 </Anchor>
@@ -281,7 +281,7 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
               <Text
                 style="body3"
                 color="subtle"
-                className="relay-text-center relay-mt-3"
+                className="relay:text-center relay:mt-3"
               >
                 Fetching refund transaction...
               </Text>
@@ -300,7 +300,7 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
               <Anchor
                 href={txUrl}
                 target="_blank"
-                className="relay-text-center relay-text-[14px] relay-mt-[12px]"
+                className="relay:text-center relay:text-[14px] relay:mt-[12px]"
               >
                 View Tx: {truncatedHash}
               </Anchor>
@@ -314,7 +314,7 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
       {!delayedTxUrl ? (
         <Flex
           direction="column"
-          className="relay-p-3 relay-border relay-border-solid relay-border-[var(--relay-colors-subtle-border-color)] relay-gap-3 relay-w-full relay-rounded-[12px]"
+          className="relay:p-3 relay:border relay:border-solid relay:border-[var(--relay-colors-subtle-border-color)] relay:gap-3 relay:w-full relay:rounded-[12px]"
         >
           <TransactionsByChain
             allTxHashes={allTxHashes}
@@ -325,23 +325,23 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
         </Flex>
       ) : null}
 
-      <Flex className="relay-w-full relay-gap-3 relay-mt-[8px]">
+      <Flex className="relay:w-full relay:gap-3 relay:mt-[8px]">
         <Button
           cta={true}
           color={'secondary'}
           onClick={() => {
             onOpenChange(false)
           }}
-          className="relay-justify-center relay-w-full"
+          className="relay:justify-center relay:w-full"
         >
           Done
         </Button>
         {delayedTxUrl ? (
-          <a href={delayedTxUrl} className="relay-w-full" target="_blank">
+          <a href={delayedTxUrl} className="relay:w-full" target="_blank">
             <Button
               cta={true}
               color={'primary'}
-              className="relay-justify-center relay-w-max"
+              className="relay:justify-center relay:w-max"
             >
               Track Progress
             </Button>
@@ -352,17 +352,17 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
   ) : (
     <>
       <Flex direction="column" align="center" justify="between">
-        <div className="relay-animate-icon-pop-in">
+        <div className="relay:animate-icon-pop-in">
           <Flex align="center">
             <RelayIcon />
             <Flex
               align="center"
               justify="center"
-              className="relay-rounded-full relay-border-2 relay-border-solid relay-border-white relay-w-[40px] relay-h-[40px] relay-bg-[var(--relay-colors-green9)] relay-text-white relay-ml-[-8px]"
+              className="relay:rounded-full relay:border-2 relay:border-solid relay:border-white relay:w-[40px] relay:h-[40px] relay:bg-[var(--relay-colors-green9)] relay:text-white relay:ml-[-8px]"
             >
               <FontAwesomeIcon
                 icon={faCheck}
-                className="relay-h-[20px] relay-text-white"
+                className="relay:h-[20px] relay:text-white"
               />
             </Flex>
           </Flex>
@@ -370,7 +370,7 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
 
         <Text
           style="h6"
-          className="relay-text-center relay-my-3 [&_.green-time]:relay-text-[color:var(--relay-colors-green11)]"
+          className="relay:text-center relay:my-3 relay:[&_.green-time]:text-[color:var(--relay-colors-green11)]"
         >
           {fillTime && fillTime !== '-' ? (
             <>
@@ -383,15 +383,15 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
 
         <Flex
           direction="column"
-          className="relay-gap-3 relay-p-3 relay-border relay-border-solid relay-border-[var(--relay-colors-slate-5)] relay-rounded-[12px] relay-w-full"
+          className="relay:gap-3 relay:p-3 relay:border relay:border-solid relay:border-[var(--relay-colors-slate-5)] relay:rounded-[12px] relay:w-full"
         >
           {_fromToken ? (
-            <Flex direction="column" className="relay-gap-[4px]">
+            <Flex direction="column" className="relay:gap-[4px]">
               <Text style="subtitle2" color="subtle">
                 Sent
               </Text>
               <Flex justify="between">
-                <Flex align="center" className="relay-gap-[4px]">
+                <Flex align="center" className="relay:gap-[4px]">
                   <ChainTokenIcon
                     size="sm"
                     chainId={_fromToken.chainId}
@@ -401,7 +401,7 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
                   />
                   {isLoadingTransaction ? (
                     <Skeleton
-                      className="relay-h-[24px] relay-w-[60px] relay-bg-[var(--relay-colors-gray5)]"
+                      className="relay:h-[24px] relay:w-[60px] relay:bg-[var(--relay-colors-gray5)]"
                     />
                   ) : (
                     <Text style="h6">
@@ -421,7 +421,7 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
                       <Anchor
                         href={txUrl}
                         target="_blank"
-                        className="relay-text-[color:var(--relay-colors-primary11)] relay-text-[14px]"
+                        className="relay:text-[color:var(--relay-colors-primary11)] relay:text-[14px]"
                       >
                         {truncateAddress(txHash, '...', 6, 4)}
                       </Anchor>
@@ -434,12 +434,12 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
           )}
 
           {_toToken ? (
-            <Flex direction="column" className="relay-gap-[4px]">
+            <Flex direction="column" className="relay:gap-[4px]">
               <Text style="subtitle2" color="subtle">
                 Received
               </Text>
               <Flex justify="between">
-                <Flex align="center" className="relay-gap-[4px]">
+                <Flex align="center" className="relay:gap-[4px]">
                   <ChainTokenIcon
                     size="sm"
                     chainId={_toToken.chainId}
@@ -449,7 +449,7 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
                   />
                   {isLoadingTransaction ? (
                     <Skeleton
-                      className="relay-h-[24px] relay-w-[60px] relay-bg-[var(--relay-colors-gray5)]"
+                      className="relay:h-[24px] relay:w-[60px] relay:bg-[var(--relay-colors-gray5)]"
                     />
                   ) : (
                     <Text style="h6">
@@ -468,7 +468,7 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
                       <Anchor
                         href={txUrl}
                         target="_blank"
-                        className="relay-text-[color:var(--relay-colors-primary11)] relay-text-[14px]"
+                        className="relay:text-[color:var(--relay-colors-primary11)] relay:text-[14px]"
                       >
                         {truncateAddress(txHash, '...', 6, 4)}
                       </Anchor>
@@ -478,7 +478,7 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
 
               {/* Additional Gas - positioned below transaction hash with 8px spacing */}
               {formattedGasTopUpAmount && gasTopUpAmountCurrency ? (
-                <Flex align="center" className="relay-gap-[4px] relay-mt-[4px]">
+                <Flex align="center" className="relay:gap-[4px] relay:mt-[4px]">
                   <ChainTokenIcon
                     size="sm"
                     chainId={gasTopUpAmountCurrency.chainId}
@@ -501,11 +501,11 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
         </Flex>
       </Flex>
 
-      <Flex className="relay-w-full relay-gap-3">
+      <Flex className="relay:w-full relay:gap-3">
         {requestId ? (
           <a
             href={`${baseTransactionUrl}/transaction/${requestId}`}
-            className="relay-w-full"
+            className="relay:w-full"
             target="_blank"
             onClick={(e) => {
               e.stopPropagation()
@@ -514,7 +514,7 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
             <Button
               color="secondary"
               cta={true}
-              className="relay-justify-center relay-w-max"
+              className="relay:justify-center relay:w-max"
             >
               View Details
             </Button>
@@ -525,7 +525,7 @@ export const SwapSuccessStep: FC<SwapSuccessStepProps> = ({
           onClick={() => {
             onOpenChange(false)
           }}
-          className="relay-justify-center relay-w-full"
+          className="relay:justify-center relay:w-full"
         >
           Done
         </Button>
diff --git a/packages/ui/src/components/common/TransactionModal/steps/TransactionsByChain.tsx b/packages/ui/src/components/common/TransactionModal/steps/TransactionsByChain.tsx
index 1a04be64f..c06e6fa7b 100644
--- a/packages/ui/src/components/common/TransactionModal/steps/TransactionsByChain.tsx
+++ b/packages/ui/src/components/common/TransactionModal/steps/TransactionsByChain.tsx
@@ -100,21 +100,21 @@ export const TransactionsByChain: FC<TransactionsByChainProps> = ({
 
   // Return single container with all transactions
   return (
-    <Flex direction="column" className="relay-gap-3">
+    <Flex direction="column" className="relay:gap-3">
       {transactions.map((transaction, idx) => (
-        <Flex justify="between" className="relay-items-center" key={idx}>
-          <Flex className="relay-items-center relay-gap-2">
+        <Flex justify="between" className="relay:items-center" key={idx}>
+          <Flex className="relay:items-center relay:gap-2">
             <Text style="subtitle2" color="subtle">
               {transaction.label}
             </Text>
             {transaction.isRefund ? (
               <Pill
                 color="gray"
-                className="relay-py-1 relay-px-[6px] relay-flex relay-items-center"
+                className="relay:py-1 relay:px-[6px] relay:flex relay:items-center"
               >
                 <FontAwesomeIcon
                   icon={faRotateRight}
-                  className="relay-w-[16px] relay-h-[16px] relay-mr-[4px]"
+                  className="relay:w-[16px] relay:h-[16px] relay:mr-[4px]"
                   color="#889096"
                 />{' '}
                 <Text style="subtitle3">Refunded</Text>
@@ -176,7 +176,7 @@ export const TransactionsByChain: FC<TransactionsByChainProps> = ({
           transaction.txHashes.length === 0 &&
           isSolverStatusTimeout ? (
             <Flex direction="column">
-              <Skeleton className="relay-h-[20px]" />
+              <Skeleton className="relay:h-[20px]" />
             </Flex>
           ) : null}
         </Flex>
diff --git a/packages/ui/src/components/common/TransactionModal/steps/WaitingForDepositStep.tsx b/packages/ui/src/components/common/TransactionModal/steps/WaitingForDepositStep.tsx
index fa2b3d029..f183a4853 100644
--- a/packages/ui/src/components/common/TransactionModal/steps/WaitingForDepositStep.tsx
+++ b/packages/ui/src/components/common/TransactionModal/steps/WaitingForDepositStep.tsx
@@ -60,7 +60,7 @@ export const WaitingForDepositStep: FC<WaitingForDepositStepProps> = ({
     <>
       <Flex
         direction="column"
-        className="relay-border relay-border-solid relay-border-[var(--relay-colors-subtle-border-color)] relay-rounded-[8px] relay-px-2 relay-py-3 relay-mb-3 relay-gap-2"
+        className="relay:border relay:border-solid relay:border-[var(--relay-colors-subtle-border-color)] relay:rounded-[8px] relay:px-2 relay:py-3 relay:mb-3 relay:gap-2"
       >
         <Text style="body2">
           Transfer funds manually from your {fromChain?.displayName} wallet to
@@ -73,29 +73,29 @@ export const WaitingForDepositStep: FC<WaitingForDepositStepProps> = ({
           Learn More
         </Anchor>
       </Flex>
-      <Flex className="relay-gap-1">
-        <Flex className="relay-gap-1 relay-w-full" direction="column">
+      <Flex className="relay:gap-1">
+        <Flex className="relay:gap-1 relay:w-full" direction="column">
           <Text style="subtitle2">Network</Text>
           <Pill
             color="gray"
-            className="relay-flex relay-items-center relay-py-2"
+            className="relay:flex relay:items-center relay:py-2"
             radius="squared"
           >
             <ChainIcon chainId={fromChain?.id} height={20} width={20} />
             <Text style="h6">{fromChain?.displayName}</Text>
           </Pill>
         </Flex>
-        <Flex className="relay-gap-1 relay-w-full" direction="column">
+        <Flex className="relay:gap-1 relay:w-full" direction="column">
           <Text style="subtitle2">Amount to transfer</Text>
           <Pill
             color="gray"
-            className="relay-flex relay-items-center relay-py-2"
+            className="relay:flex relay:items-center relay:py-2"
             radius="squared"
           >
             {fromAmountFormatted ? (
               <>
                 {' '}
-                <Text style="h6" className="relay-font-medium relay-mr-1">
+                <Text style="h6" className="relay:font-medium relay:mr-1">
                   {fromAmountFormatted}
                 </Text>
                 <img
@@ -103,12 +103,12 @@ export const WaitingForDepositStep: FC<WaitingForDepositStepProps> = ({
                   src={fromToken?.logoURI}
                   width={20}
                   height={20}
-                  className="relay-rounded-full"
+                  className="relay:rounded-full"
                 />
                 <Text style="h6">{fromToken?.symbol}</Text>
               </>
             ) : (
-              <Skeleton className="relay-h-[24px] relay-w-full" />
+              <Skeleton className="relay:h-[24px] relay:w-full" />
             )}{' '}
           </Pill>
         </Flex>
@@ -117,22 +117,22 @@ export const WaitingForDepositStep: FC<WaitingForDepositStepProps> = ({
       <Pill
         radius="rounded"
         color="gray"
-        className="relay-flex relay-items-center relay-gap-3 relay-p-3"
+        className="relay:flex relay:items-center relay:gap-3 relay:p-3"
       >
         {isFetchingQuote ? (
-          <Skeleton className="relay-h-[21px] relay-w-full" />
+          <Skeleton className="relay:h-[21px] relay:w-full" />
         ) : (
           <>
-            <Text style="subtitle2" className="relay-mr-auto">
+            <Text style="subtitle2" className="relay:mr-auto">
               {truncateAddress(depositAddress, '...', 28, 4)}
             </Text>
             {qrcodeUrl ? (
               <Popover>
-                <PopoverTrigger className="relay-cursor-pointer">
-                  <Box className="relay-text-[color:var(--relay-colors-gray9)]">
+                <PopoverTrigger className="relay:cursor-pointer">
+                  <Box className="relay:text-[color:var(--relay-colors-gray9)]">
                     <FontAwesomeIcon
                       icon={faQrcode}
-                      className="relay-w-[16px] relay-h-[16px]"
+                      className="relay:w-[16px] relay:h-[16px]"
                     />
                   </Box>
                 </PopoverTrigger>
@@ -196,7 +196,7 @@ export const WaitingForDepositStep: FC<WaitingForDepositStepProps> = ({
                               chainId={fromChain?.id}
                               height={14}
                               width={14}
-                              className="relay-absolute relay-bottom-0 relay-right-0 relay-border relay-border-solid relay-border-white"
+                              className="relay:absolute relay:bottom-0 relay:right-0 relay:border relay:border-solid relay:border-white"
                               borderRadius={4}
                             />
                           </div>
@@ -213,10 +213,10 @@ export const WaitingForDepositStep: FC<WaitingForDepositStepProps> = ({
       </Pill>
       <Button
         disabled={true}
-        className="relay-text-[color:var(--relay-colors-button-disabled-color)_!important] relay-mt-2 relay-justify-center"
+        className="relay:text-[color:var(--relay-colors-button-disabled-color)_!important] relay:mt-2 relay:justify-center"
       >
         <LoadingSpinner
-          className="relay-h-4 relay-w-4 relay-fill-[var(--relay-colors-button-disabled-color)]"
+          className="relay:h-4 relay:w-4 relay:fill-[var(--relay-colors-button-disabled-color)]"
         />
         Waiting for you to transfer funds
       </Button>
diff --git a/packages/ui/src/components/common/UnverifiedTokenModal.tsx b/packages/ui/src/components/common/UnverifiedTokenModal.tsx
index eed33baf3..137f6f091 100644
--- a/packages/ui/src/components/common/UnverifiedTokenModal.tsx
+++ b/packages/ui/src/components/common/UnverifiedTokenModal.tsx
@@ -52,48 +52,46 @@ export const UnverifiedTokenModal: FC<UnverifiedTokenModalProps> = ({
       onCloseButtonClicked={() => {
         onDecline?.(data?.token, data?.context)
       }}
-      className="relay-overflow-hidden relay-z-[10000001]"
+      className="relay:overflow-hidden relay:z-[10000001]"
       overlayZIndex={10000001}
     >
       <Flex
         direction="column"
-        className="relay-w-full relay-h-full relay-gap-4 sm:relay-w-[370px]"
+        className="relay:w-full relay:h-full relay:gap-4 relay:sm:w-[370px]"
       >
         <Text style="h6">Unverified Token</Text>
-        <Flex align="center" direction="column" className="relay-gap-4">
+        <Flex align="center" direction="column" className="relay:gap-4">
           <Flex align="center" justify="center">
             {isValidTokenLogo ? (
               <img
                 src={data?.token.logoURI}
                 alt={data?.token?.name}
-                className="relay-w-[48px] relay-h-[48px] relay-rounded-full"
+                className="relay:w-[48px] relay:h-[48px] relay:rounded-full"
               />
             ) : null}
             <Flex
               align="center"
               className={cn(
-                'relay-w-12 relay-h-12 relay-bg-[var(--relay-colors-amber3)] relay-rounded-full relay-p-3',
-                isValidTokenLogo ? '-relay-ml-5' : 'relay-ml-0'
+                'relay:w-12 relay:h-12 relay:bg-[var(--relay-colors-amber3)] relay:rounded-full relay:p-3',
+                isValidTokenLogo ? 'relay:-ml-5' : 'relay:ml-0'
               )}
             >
-              <Box className="relay-text-[color:var(--relay-colors-amber9)]">
+              <Box className="relay:flex relay:text-[color:var(--relay-colors-amber9)]">
                 <FontAwesomeIcon
                   icon={faExclamationTriangle}
-                  width={24}
-                  height={24}
-                  className="relay-w-[24px] relay-h-[24px]"
+                  style={{ width: 24, height: 24 }}
                 />
               </Box>
             </Flex>
           </Flex>
-          <Text style="subtitle2" color="subtle" className="relay-text-center">
+          <Text style="subtitle2" color="subtle" className="relay:text-center">
             This token isn't traded on leading U.S. centralized exchanges or
             frequently swapped on major DEXes. Always conduct your own research
             before trading.
           </Text>
           <Flex
             align="center"
-            className="relay-gap-3 relay-p-3 relay-bg-[var(--relay-colors-gray2)] relay-rounded-[12px] relay-w-full"
+            className="relay:gap-3 relay:p-3 relay:bg-[var(--relay-colors-gray2)] relay:rounded-[12px] relay:w-full"
           >
             <Text style="subtitle2" ellipsify>
               {data?.token?.address}
@@ -103,14 +101,14 @@ export const UnverifiedTokenModal: FC<UnverifiedTokenModalProps> = ({
             <Anchor
               href={`${chain?.explorerUrl}/token/${data?.token?.address}`}
               target="_blank"
-              className="relay-h-[14px]"
+              className="relay:h-[14px]"
             >
-              <Box className="relay-text-[color:var(--relay-colors-gray9)] hover:relay-text-[color:var(--relay-colors-gray11)]">
+              <Box className="relay:flex relay:text-[color:var(--relay-colors-gray9)] relay:hover:text-[color:var(--relay-colors-gray11)]">
                 <FontAwesomeIcon icon={faExternalLink} />
               </Box>
             </Anchor>
           </Flex>
-          <Flex className="relay-gap-3 relay-w-full">
+          <Flex className="relay:gap-3 relay:w-full">
             <Button
               onClick={() => {
                 onDecline?.(data?.token, data?.context)
@@ -118,7 +116,7 @@ export const UnverifiedTokenModal: FC<UnverifiedTokenModalProps> = ({
               }}
               color="grey"
               size="small"
-              className="relay-flex-1 relay-justify-center relay-whitespace-nowrap"
+              className="relay:flex-1 relay:justify-center relay:whitespace-nowrap"
             >
               Cancel
             </Button>
@@ -146,7 +144,7 @@ export const UnverifiedTokenModal: FC<UnverifiedTokenModalProps> = ({
                 onAcceptToken(data?.token, data?.context)
               }}
               color="warning"
-              className="relay-flex-1 relay-justify-center relay-px-4 relay-whitespace-nowrap"
+              className="relay:flex-1 relay:justify-center relay:px-4 relay:whitespace-nowrap"
             >
               I Understand
             </Button>
diff --git a/packages/ui/src/components/primitives/AccessibleList.tsx b/packages/ui/src/components/primitives/AccessibleList.tsx
index 90886f854..a039e383c 100644
--- a/packages/ui/src/components/primitives/AccessibleList.tsx
+++ b/packages/ui/src/components/primitives/AccessibleList.tsx
@@ -18,7 +18,7 @@ export const AccessibleList: FC<AccessibleListProps> = ({
       type="single"
       loop={false}
       onValueChange={onSelect}
-      className={cn('relay-flex relay-flex-col', className)}
+      className={cn('relay:flex relay:flex-col', className)}
     >
       {children}
     </ToggleGroup.Root>
@@ -40,7 +40,7 @@ export const AccessibleListItem = forwardRef<
     <ToggleGroup.Item
       value={value}
       className={cn(
-        'relay-flex relay-items-center relay-relative relay-select-none relay-cursor-pointer',
+        'relay:flex relay:items-center relay:relative relay:select-none relay:cursor-pointer',
         className
       )}
       asChild={asChild}
diff --git a/packages/ui/src/components/primitives/Anchor.tsx b/packages/ui/src/components/primitives/Anchor.tsx
index 194143218..e299121ca 100644
--- a/packages/ui/src/components/primitives/Anchor.tsx
+++ b/packages/ui/src/components/primitives/Anchor.tsx
@@ -4,22 +4,22 @@ import { cn } from '../../utils/cn.js'
 
 const anchorVariants = cva(
   [
-    'relay-cursor-pointer relay-w-max relay-font-medium relay-text-[14px]',
-    'relay-text-[color:var(--relay-colors-anchor-color)]',
-    'hover:relay-text-[color:var(--relay-colors-anchor-hover-color)]',
-    'focus-visible:relay-shadow-[0_0_0_2px_var(--relay-colors-focus-color)] focus-visible:relay-outline-none focus-visible:relay-rounded-[4px]'
+    'relay:cursor-pointer relay:w-max relay:font-medium relay:text-[14px]',
+    'relay:text-[color:var(--relay-colors-anchor-color)]',
+    'relay:hover:text-[color:var(--relay-colors-anchor-hover-color)]',
+    'relay:focus-visible:shadow-[0_0_0_2px_var(--relay-colors-focus-color)] relay:focus-visible:outline-none relay:focus-visible:rounded-[4px]'
   ].join(' '),
   {
     variants: {
       color: {
-        gray: 'relay-text-[color:var(--relay-colors-gray11)] hover:relay-text-[color:var(--relay-colors-gray12)]',
-        base: 'relay-text-[color:var(--relay-colors-anchor-color)] hover:relay-text-[color:var(--relay-colors-anchor-hover-color)]',
-        black: 'relay-text-[color:var(--relay-colors-gray12)] hover:relay-text-[color:var(--relay-colors-gray12)]'
+        gray: 'relay:text-[color:var(--relay-colors-gray11)] relay:hover:text-[color:var(--relay-colors-gray12)]',
+        base: 'relay:text-[color:var(--relay-colors-anchor-color)] relay:hover:text-[color:var(--relay-colors-anchor-hover-color)]',
+        black: 'relay:text-[color:var(--relay-colors-gray12)] relay:hover:text-[color:var(--relay-colors-gray12)]'
       },
       weight: {
-        heavy: 'relay-font-black',
-        bold: 'relay-font-bold',
-        semi_bold: 'relay-font-semibold'
+        heavy: 'relay:font-black',
+        bold: 'relay:font-bold',
+        semi_bold: 'relay:font-semibold'
       }
     }
   }
diff --git a/packages/ui/src/components/primitives/Button.tsx b/packages/ui/src/components/primitives/Button.tsx
index 3a357156c..7a5c89693 100644
--- a/packages/ui/src/components/primitives/Button.tsx
+++ b/packages/ui/src/components/primitives/Button.tsx
@@ -4,72 +4,72 @@ import { cn } from '../../utils/cn.js'
 
 const buttonVariants = cva(
   [
-    'relay-cursor-pointer relay-outline-none relay-font-body relay-font-bold relay-text-[16px]',
-    'relay-transition-all relay-duration-200 relay-ease-out relay-select-none',
-    'relay-gap-2 relay-inline-flex relay-items-center relay-leading-[20px]',
-    'focus-visible:relay-ring-2 focus-visible:relay-ring-[var(--relay-colors-focus-color)] focus-visible:relay-ring-offset-2',
-    'active:relay-scale-[0.98]',
-    'disabled:relay-cursor-not-allowed disabled:relay-bg-[var(--relay-colors-button-disabled-background)] disabled:relay-text-[color:var(--relay-colors-button-disabled-color)]',
-    'disabled:hover:relay-bg-[var(--relay-colors-button-disabled-background)] disabled:hover:relay-text-[color:var(--relay-colors-button-disabled-color)]',
-    'disabled:active:relay-scale-100'
+    'relay:cursor-pointer relay:outline-none relay:font-body relay:font-bold relay:text-[16px]',
+    'relay:transition-all relay:duration-200 relay:ease-out relay:select-none',
+    'relay:gap-2 relay:inline-flex relay:items-center relay:leading-[20px]',
+    'relay:focus-visible:ring-2 relay:focus-visible:ring-[var(--relay-colors-focus-color)] relay:focus-visible:ring-offset-2',
+    'relay:active:scale-[0.98]',
+    'relay:disabled:cursor-not-allowed relay:disabled:bg-[var(--relay-colors-button-disabled-background)] relay:disabled:text-[color:var(--relay-colors-button-disabled-color)]',
+    'relay:disabled:hover:bg-[var(--relay-colors-button-disabled-background)] relay:disabled:hover:text-[color:var(--relay-colors-button-disabled-color)]',
+    'relay:disabled:active:scale-100'
   ].join(' '),
   {
     variants: {
       color: {
         primary: [
-          'relay-bg-[var(--relay-colors-primary-button-background)]',
-          'relay-text-[color:var(--relay-colors-primary-button-color)]',
-          'hover:relay-bg-[var(--relay-colors-primary-button-hover-background)]',
-          'hover:relay-text-[color:var(--relay-colors-primary-button-hover-color)]'
+          'relay:bg-[var(--relay-colors-primary-button-background)]',
+          'relay:text-[color:var(--relay-colors-primary-button-color)]',
+          'relay:hover:bg-[var(--relay-colors-primary-button-hover-background)]',
+          'relay:hover:text-[color:var(--relay-colors-primary-button-hover-color)]'
         ].join(' '),
         secondary: [
-          'relay-bg-[var(--relay-colors-primary4)]',
-          'relay-text-[color:var(--relay-colors-primary12)]',
-          'hover:relay-bg-[var(--relay-colors-secondary-button-hover-background)]',
-          'hover:relay-text-[color:var(--relay-colors-secondary-button-hover-color)]'
+          'relay:bg-[var(--relay-colors-primary4)]',
+          'relay:text-[color:var(--relay-colors-primary12)]',
+          'relay:hover:bg-[var(--relay-colors-secondary-button-hover-background)]',
+          'relay:hover:text-[color:var(--relay-colors-secondary-button-hover-color)]'
         ].join(' '),
-        ghost: 'relay-bg-transparent',
+        ghost: 'relay:bg-transparent',
         white: [
-          'relay-bg-[var(--relay-colors-widget-background)]',
-          'relay-transition-[filter] relay-duration-[250ms] relay-ease-linear',
-          'hover:relay-brightness-[0.97]',
-          'relay-border relay-border-solid relay-border-[var(--relay-colors-subtle-border-color)]'
+          'relay:bg-[var(--relay-colors-widget-background)]',
+          'relay:transition-[filter] relay:duration-[250ms] relay:ease-linear',
+          'relay:hover:brightness-[0.97]',
+          'relay:border relay:border-solid relay:border-[var(--relay-colors-subtle-border-color)]'
         ].join(' '),
         error: [
-          'relay-bg-[var(--relay-colors-red9)] relay-text-white',
-          'hover:relay-bg-[var(--relay-colors-red10)]'
+          'relay:bg-[var(--relay-colors-red9)] relay:text-white',
+          'relay:hover:bg-[var(--relay-colors-red10)]'
         ].join(' '),
         warning: [
-          'relay-bg-[var(--relay-colors-amber3)]',
-          'relay-text-[color:var(--relay-colors-amber11)]',
-          'hover:relay-bg-[var(--relay-colors-amber4)]',
-          'hover:relay-text-[color:var(--relay-colors-amber11)]'
+          'relay:bg-[var(--relay-colors-amber3)]',
+          'relay:text-[color:var(--relay-colors-amber11)]',
+          'relay:hover:bg-[var(--relay-colors-amber4)]',
+          'relay:hover:text-[color:var(--relay-colors-amber11)]'
         ].join(' '),
         grey: [
-          'relay-bg-[var(--relay-colors-gray3)]',
-          'relay-text-[color:var(--relay-colors-gray11)]',
-          'hover:relay-bg-[var(--relay-colors-gray4)]'
+          'relay:bg-[var(--relay-colors-gray3)]',
+          'relay:text-[color:var(--relay-colors-gray11)]',
+          'relay:hover:bg-[var(--relay-colors-gray4)]'
         ].join(' ')
       },
       corners: {
-        square: 'relay-rounded-none',
-        rounded: 'relay-rounded-[var(--relay-radii-button-border-radius)]',
-        pill: 'relay-rounded-full',
-        circle: 'relay-rounded-full relay-items-center relay-justify-center'
+        square: 'relay:rounded-none',
+        rounded: 'relay:rounded-[var(--relay-radii-button-border-radius)]',
+        pill: 'relay:rounded-full',
+        circle: 'relay:rounded-full relay:items-center relay:justify-center'
       },
       size: {
         none: '',
-        xs: 'relay-p-3 relay-leading-[16px] relay-min-h-[40px]',
-        small: 'relay-px-3 relay-py-2 relay-leading-[12px] relay-min-h-[40px]',
-        medium: 'relay-px-5 relay-py-3 relay-min-h-[44px]',
-        large: 'relay-px-5 relay-py-4 relay-min-h-[52px]'
+        xs: 'relay:p-3 relay:leading-[16px] relay:min-h-[40px]',
+        small: 'relay:px-3 relay:py-2 relay:leading-[12px] relay:min-h-[40px]',
+        medium: 'relay:px-5 relay:py-3 relay:min-h-[44px]',
+        large: 'relay:px-5 relay:py-4 relay:min-h-[52px]'
       },
       cta: {
         true: [
-          '[&:not(:disabled)]:relay-font-heading',
-          '[&:not(:disabled)]:relay-font-bold',
-          '[&:not(:disabled)]:relay-uppercase',
-          'relay-cta-font-style'
+          'relay:[&:not(:disabled)]:font-heading',
+          'relay:[&:not(:disabled)]:font-bold',
+          'relay:[&:not(:disabled)]:uppercase',
+          'relay:cta-font-style'
         ].join(' ')
       }
     },
diff --git a/packages/ui/src/components/primitives/ChainIcon.tsx b/packages/ui/src/components/primitives/ChainIcon.tsx
index 3747e45a0..d0d279250 100644
--- a/packages/ui/src/components/primitives/ChainIcon.tsx
+++ b/packages/ui/src/components/primitives/ChainIcon.tsx
@@ -37,7 +37,7 @@ const ChainIcon: FC<Props> = ({
 
   return iconUrl ? (
     <div
-      className={cn('relay-flex relay-shrink-0', className)}
+      className={cn('relay:flex relay:shrink-0', className)}
       style={{
         height: height,
         width: width,
diff --git a/packages/ui/src/components/primitives/ChainTokenIcon.tsx b/packages/ui/src/components/primitives/ChainTokenIcon.tsx
index 0ce153e18..e7e6cd1fa 100644
--- a/packages/ui/src/components/primitives/ChainTokenIcon.tsx
+++ b/packages/ui/src/components/primitives/ChainTokenIcon.tsx
@@ -50,7 +50,7 @@ export const ChainTokenIcon: FC<ChainTokenProps> = ({
   return chainId ? (
     <div
       className={cn(
-        'relay-relative relay-shrink-0 relay-overflow-hidden',
+        'relay:relative relay:shrink-0 relay:overflow-hidden',
         className
       )}
       style={{
@@ -72,7 +72,7 @@ export const ChainTokenIcon: FC<ChainTokenProps> = ({
         />
       ) : tokenSymbol ? (
         <div
-          className="relay-rounded-[50%] relay-bg-[var(--relay-colors-primary4)] relay-text-[color:var(--relay-colors-primary8)] relay-flex relay-items-center relay-justify-center"
+          className="relay:rounded-[50%] relay:bg-[var(--relay-colors-primary4)] relay:text-[color:var(--relay-colors-primary8)] relay:flex relay:items-center relay:justify-center"
           style={{
             width: dimensions.token,
             height: dimensions.token
@@ -86,7 +86,7 @@ export const ChainTokenIcon: FC<ChainTokenProps> = ({
         width={chainSize}
         height={chainSize}
         borderRadius={chainRadius}
-        className="relay-absolute relay-right-0 relay-bottom-0 relay-overflow-hidden relay-border relay-border-solid relay-border-[var(--relay-colors-modal-background)] relay-bg-[var(--relay-colors-modal-background)]"
+        className="relay:absolute relay:right-0 relay:bottom-0 relay:overflow-hidden relay:border relay:border-solid relay:border-[var(--relay-colors-modal-background)] relay:bg-[var(--relay-colors-modal-background)]"
       />
     </div>
   ) : null
diff --git a/packages/ui/src/components/primitives/Collapsible.tsx b/packages/ui/src/components/primitives/Collapsible.tsx
index 4ca9250b5..25e223c6d 100644
--- a/packages/ui/src/components/primitives/Collapsible.tsx
+++ b/packages/ui/src/components/primitives/Collapsible.tsx
@@ -17,9 +17,9 @@ const CollapsibleContent = forwardRef<
       ref={forwardedRef}
       {...props}
       className={cn(
-        'relay-overflow-hidden',
-        'data-[state=open]:relay-animate-collapsible-down',
-        'data-[state=closed]:relay-animate-collapsible-up',
+        'relay:overflow-hidden',
+        'relay:data-[state=open]:animate-collapsible-down',
+        'relay:data-[state=closed]:animate-collapsible-up',
         className
       )}
     >
@@ -37,7 +37,7 @@ const CollapsibleRoot = forwardRef<
     <Collapsible.Root
       ref={forwardedRef}
       {...props}
-      className={cn('relay-w-full', className)}
+      className={cn('relay:w-full', className)}
     >
       {children}
     </Collapsible.Root>
@@ -54,7 +54,7 @@ const CollapsibleTrigger = forwardRef<
       ref={forwardedRef}
       {...props}
       className={cn(
-        'relay-w-full relay-flex relay-items-center relay-justify-between relay-cursor-pointer',
+        'relay:w-full relay:flex relay:items-center relay:justify-between relay:cursor-pointer',
         className
       )}
     >
diff --git a/packages/ui/src/components/primitives/Dialog.tsx b/packages/ui/src/components/primitives/Dialog.tsx
index fdeb43b69..cd370da58 100644
--- a/packages/ui/src/components/primitives/Dialog.tsx
+++ b/packages/ui/src/components/primitives/Dialog.tsx
@@ -21,8 +21,8 @@ const Overlay = forwardRef<
       ref={forwardedRef}
       {...props}
       className={cn(
-        'relay-fixed relay-inset-0 relay-bg-black/50 relay-backdrop-blur-sm',
-        'relay-animate-overlay-fade-in data-[state=closed]:relay-animate-overlay-fade-out',
+        'relay:fixed relay:inset-0 relay:bg-black/50 relay:backdrop-blur-sm',
+        'relay:animate-overlay-fade-in relay:data-[state=closed]:animate-overlay-fade-out',
         className,
         'relay-kit-reset'
       )}
@@ -33,13 +33,13 @@ const Overlay = forwardRef<
 })
 
 const contentBase = [
-  'relay-bg-[var(--relay-colors-modal-background)]',
-  'relay-rounded-[var(--relay-radii-modal-border-radius)]',
-  'relay-border-modal',
-  'relay-shadow-xl',
-  'relay-fixed',
-  'relay-max-h-[85vh] relay-overflow-y-auto',
-  'focus:relay-outline-none'
+  'relay:bg-[var(--relay-colors-modal-background)]',
+  'relay:rounded-[var(--relay-radii-modal-border-radius)]',
+  'relay:border-modal',
+  'relay:shadow-xl',
+  'relay:fixed',
+  'relay:max-h-[85vh] relay:overflow-y-auto',
+  'relay:focus:outline-none'
 ].join(' ')
 
 const Content = forwardRef<
@@ -51,7 +51,7 @@ const Content = forwardRef<
     <DialogPrimitive.DialogContent
       ref={forwardedRef}
       {...props}
-      className={cn(contentBase, 'relay-top-full')}
+      className={cn(contentBase, 'relay:top-full')}
     >
       {children}
     </DialogPrimitive.DialogContent>
@@ -68,23 +68,23 @@ const AnimatedContent = forwardRef<
   const isMobileFullScreen = isMobile && disableAnimation
 
   const mobileSlideUpClasses = [
-    'relay-bottom-0 relay-top-auto relay-left-0 relay-w-full',
-    'relay-animate-dialog-slide-up',
-    'data-[state=closed]:relay-animate-dialog-slide-down',
-    'max-[520px]:relay-rounded-b-none'
+    'relay:bottom-0 relay:top-auto relay:left-0 relay:w-full',
+    'relay:animate-dialog-slide-up',
+    'relay:data-[state=closed]:animate-dialog-slide-down',
+    'relay:max-[520px]:rounded-b-none'
   ].join(' ')
 
   const mobileFullScreenClasses = [
-    'relay-top-0 relay-left-0 relay-w-full relay-h-full',
-    'relay-max-h-full relay-rounded-none'
+    'relay:top-0 relay:left-0 relay:w-full relay:h-full',
+    'relay:max-h-full relay:rounded-none'
   ].join(' ')
 
   const desktopClasses = [
-    'relay-left-1/2 relay-top-1/2',
-    'relay-min-w-[90vw] relay-max-w-[100vw]',
-    'sm:relay-min-w-[400px] sm:relay-max-w-[532px]',
-    'relay-animate-scale-in',
-    'data-[state=closed]:relay-animate-scale-out'
+    'relay:left-1/2 relay:top-1/2',
+    'relay:min-w-[90vw] relay:max-w-[100vw]',
+    'relay:sm:min-w-[400px] relay:sm:max-w-[532px]',
+    'relay:animate-scale-in',
+    'relay:data-[state=closed]:animate-scale-out'
   ].join(' ')
 
   return (
diff --git a/packages/ui/src/components/primitives/Dropdown.tsx b/packages/ui/src/components/primitives/Dropdown.tsx
index c63755b39..d78cd7f8c 100644
--- a/packages/ui/src/components/primitives/Dropdown.tsx
+++ b/packages/ui/src/components/primitives/Dropdown.tsx
@@ -19,11 +19,11 @@ const DropdownMenuContent = forwardRef<
       {...props}
       ref={forwardedRef}
       className={cn(
-        'relay-mx-4 relay-p-0 relay-rounded-[8px] relay-z-[10000002]',
-        'relay-bg-[var(--relay-colors-modal-background)]',
-        'relay-shadow-lg',
-        'relay-border-dropdown',
-        'relay-animate-content-fade-in',
+        'relay:mx-4 relay:p-0 relay:rounded-[8px] relay:z-[10000002]',
+        'relay:bg-[var(--relay-colors-modal-background)]',
+        'relay:shadow-lg',
+        'relay:border-dropdown',
+        'relay:animate-content-fade-in',
         className
       )}
     >
@@ -43,13 +43,13 @@ const DropdownMenuItem = forwardRef<
       {...props}
       ref={forwardedRef}
       className={cn(
-        'relay-flex relay-items-center relay-text-[16px]',
-        'relay-text-[color:var(--relay-colors-text-default)]',
-        'relay-bg-[var(--relay-colors-modal-background)]',
-        'relay-p-2 relay-outline-none relay-cursor-pointer',
-        'relay-transition-[background-color] relay-duration-150 relay-ease-linear',
-        'hover:relay-bg-[var(--relay-colors-gray3)]',
-        'focus:relay-bg-[var(--relay-colors-gray3)]',
+        'relay:flex relay:items-center relay:text-[16px]',
+        'relay:text-[color:var(--relay-colors-text-default)]',
+        'relay:bg-[var(--relay-colors-modal-background)]',
+        'relay:p-2 relay:outline-none relay:cursor-pointer',
+        'relay:transition-[background-color] relay:duration-150 relay:ease-linear',
+        'relay:hover:bg-[var(--relay-colors-gray3)]',
+        'relay:focus:bg-[var(--relay-colors-gray3)]',
         className
       )}
     >
diff --git a/packages/ui/src/components/primitives/Flex.tsx b/packages/ui/src/components/primitives/Flex.tsx
index 1a08b52a7..b4ff46832 100644
--- a/packages/ui/src/components/primitives/Flex.tsx
+++ b/packages/ui/src/components/primitives/Flex.tsx
@@ -7,32 +7,32 @@ import type {
 } from 'react'
 import { cn } from '../../utils/cn.js'
 
-export const flexVariants = cva('relay-flex', {
+export const flexVariants = cva('relay:flex', {
   variants: {
     align: {
-      start: 'relay-items-start',
-      center: 'relay-items-center',
-      end: 'relay-items-end',
-      stretch: 'relay-items-stretch',
-      baseline: 'relay-items-baseline',
-      normal: 'relay-items-[normal]'
+      start: 'relay:items-start',
+      center: 'relay:items-center',
+      end: 'relay:items-end',
+      stretch: 'relay:items-stretch',
+      baseline: 'relay:items-baseline',
+      normal: 'relay:items-[normal]'
     },
     justify: {
-      start: 'relay-justify-start',
-      center: 'relay-justify-center',
-      end: 'relay-justify-end',
-      between: 'relay-justify-between'
+      start: 'relay:justify-start',
+      center: 'relay:justify-center',
+      end: 'relay:justify-end',
+      between: 'relay:justify-between'
     },
     direction: {
-      row: 'relay-flex-row',
-      column: 'relay-flex-col',
-      rowReverse: 'relay-flex-row-reverse',
-      columnReverse: 'relay-flex-col-reverse'
+      row: 'relay:flex-row',
+      column: 'relay:flex-col',
+      rowReverse: 'relay:flex-row-reverse',
+      columnReverse: 'relay:flex-col-reverse'
     },
     wrap: {
-      noWrap: 'relay-flex-nowrap',
-      wrap: 'relay-flex-wrap',
-      wrapReverse: 'relay-flex-wrap-reverse'
+      noWrap: 'relay:flex-nowrap',
+      wrap: 'relay:flex-wrap',
+      wrapReverse: 'relay:flex-wrap-reverse'
     }
   }
 })
diff --git a/packages/ui/src/components/primitives/Input.tsx b/packages/ui/src/components/primitives/Input.tsx
index 6a886c7d0..4e1400279 100644
--- a/packages/ui/src/components/primitives/Input.tsx
+++ b/packages/ui/src/components/primitives/Input.tsx
@@ -5,22 +5,22 @@ import { cn } from '../../utils/cn.js'
 
 const inputVariants = cva(
   [
-    'relay-w-full relay-px-4 relay-py-3 relay-rounded-input relay-font-body relay-text-[16px]',
-    'relay-text-[color:var(--relay-colors-input-color)]',
-    'relay-bg-[var(--relay-colors-input-background)]',
-    'placeholder:relay-text-[color:var(--relay-colors-gray9)] relay-placeholder-ellipsis',
-    'relay-transition-shadow relay-duration-200',
-    'focus:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)] focus:relay-outline-none',
-    'disabled:relay-cursor-not-allowed',
-    '[&::-webkit-outer-spin-button]:relay-appearance-none [&::-webkit-inner-spin-button]:relay-appearance-none'
+    'relay:w-full relay:px-4 relay:py-3 relay:rounded-input relay:font-body relay:text-[16px]',
+    'relay:text-[color:var(--relay-colors-input-color)]',
+    'relay:bg-[var(--relay-colors-input-background)]',
+    'relay:placeholder:text-[color:var(--relay-colors-gray9)] relay:placeholder-ellipsis',
+    'relay:transition-shadow relay:duration-200',
+    'relay:focus:shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)] relay:focus:outline-none',
+    'relay:disabled:cursor-not-allowed',
+    'relay:[&::-webkit-outer-spin-button]:appearance-none relay:[&::-webkit-inner-spin-button]:appearance-none'
   ].join(' '),
   {
     variants: {
       size: {
-        large: 'relay-text-[32px] relay-leading-[42px]'
+        large: 'relay:text-[32px] relay:leading-[42px]'
       },
       ellipsify: {
-        true: 'relay-text-ellipsis relay-overflow-hidden relay-whitespace-nowrap'
+        true: 'relay:text-ellipsis relay:overflow-hidden relay:whitespace-nowrap'
       }
     }
   }
@@ -55,15 +55,15 @@ const Input = forwardRef<
     const { size, ellipsify, style, ...inputProps } = props
 
     return (
-      <div className={cn('relay-flex relay-w-full', containerClassName)} style={style}>
+      <div className={cn('relay:flex relay:w-full', containerClassName)} style={style}>
         {icon && (
-          <div className="relay-flex relay-relative">
+          <div className="relay:flex relay:relative">
             <div
               className={cn(
-                'relay-absolute relay-top-[12px] relay-z-10',
+                'relay:absolute relay:top-[12px] relay:z-10 relay:flex relay:items-center',
                 iconPosition === 'right'
-                  ? 'relay-right-4 relay-left-[unset]'
-                  : 'relay-left-4 relay-right-[unset]',
+                  ? 'relay:right-4 relay:left-[unset]'
+                  : 'relay:left-4 relay:right-[unset]',
                 iconClassName
               )}
             >
diff --git a/packages/ui/src/components/primitives/Pill.tsx b/packages/ui/src/components/primitives/Pill.tsx
index 97e0b680d..be39e6a2f 100644
--- a/packages/ui/src/components/primitives/Pill.tsx
+++ b/packages/ui/src/components/primitives/Pill.tsx
@@ -3,25 +3,25 @@ import type { FC, HTMLAttributes } from 'react'
 import { cn } from '../../utils/cn.js'
 
 export const pillVariants = cva(
-  'relay-flex relay-px-3 relay-py-1 relay-gap-1 relay-transition-colors relay-duration-150',
+  'relay:flex relay:px-3 relay:py-1 relay:gap-1 relay:transition-colors relay:duration-150',
   {
     variants: {
       color: {
-        default: 'relay-bg-[var(--relay-colors-subtle-background-color)]',
-        red: 'relay-bg-[var(--relay-colors-red3)] relay-text-[color:var(--relay-colors-red11)]',
-        gray: 'relay-bg-[var(--relay-colors-gray2)] relay-text-[color:var(--relay-colors-gray8)]',
-        green: 'relay-bg-[var(--relay-colors-green3)] relay-text-[color:var(--relay-colors-green12)]',
-        amber: 'relay-bg-[var(--relay-colors-amber2)] relay-text-[color:var(--relay-colors-amber9)]',
-        transparent: 'relay-bg-transparent relay-text-[color:var(--relay-colors-gray12)]',
-        primary: 'relay-bg-[var(--relay-colors-primary3)] relay-text-[color:var(--relay-colors-primary12)]'
+        default: 'relay:bg-[var(--relay-colors-subtle-background-color)]',
+        red: 'relay:bg-[var(--relay-colors-red3)] relay:text-[color:var(--relay-colors-red11)]',
+        gray: 'relay:bg-[var(--relay-colors-gray2)] relay:text-[color:var(--relay-colors-gray8)]',
+        green: 'relay:bg-[var(--relay-colors-green3)] relay:text-[color:var(--relay-colors-green12)]',
+        amber: 'relay:bg-[var(--relay-colors-amber2)] relay:text-[color:var(--relay-colors-amber9)]',
+        transparent: 'relay:bg-transparent relay:text-[color:var(--relay-colors-gray12)]',
+        primary: 'relay:bg-[var(--relay-colors-primary3)] relay:text-[color:var(--relay-colors-primary12)]'
       },
       radius: {
-        pill: 'relay-rounded-[25px]',
-        rounded: 'relay-rounded-[12px]',
-        squared: 'relay-rounded-[8px]'
+        pill: 'relay:rounded-[25px]',
+        rounded: 'relay:rounded-[12px]',
+        squared: 'relay:rounded-[8px]'
       },
       bordered: {
-        true: 'relay-border relay-border-solid relay-border-[var(--relay-colors-gray-6)]'
+        true: 'relay:border relay:border-solid relay:border-[var(--relay-colors-gray-6)]'
       }
     },
     defaultVariants: {
diff --git a/packages/ui/src/components/primitives/Skeleton.tsx b/packages/ui/src/components/primitives/Skeleton.tsx
index 7c24d924e..677e1af38 100644
--- a/packages/ui/src/components/primitives/Skeleton.tsx
+++ b/packages/ui/src/components/primitives/Skeleton.tsx
@@ -9,7 +9,7 @@ const Skeleton: FC<SkeletonProps> = ({ className }) => {
   return (
     <div
       className={cn(
-        'relay-flex relay-animate-pulse relay-bg-[var(--relay-colors-skeleton-background)] relay-rounded-[8px] relay-w-[100px] relay-h-[12px]',
+        'relay:flex relay:animate-pulse relay:bg-[var(--relay-colors-skeleton-background)] relay:rounded-[8px] relay:w-[100px] relay:h-[12px]',
         className
       )}
     />
diff --git a/packages/ui/src/components/primitives/SlippageButton.tsx b/packages/ui/src/components/primitives/SlippageButton.tsx
index 8e8ef73a8..caccfc644 100644
--- a/packages/ui/src/components/primitives/SlippageButton.tsx
+++ b/packages/ui/src/components/primitives/SlippageButton.tsx
@@ -31,7 +31,7 @@ export const SlippageButton: FC<SlippageButtonProps> = ({
       aria-label="Slippage Settings"
       size="none"
       color="ghost"
-      className="relay-flex relay-rounded-[8px] relay-items-center relay-gap-[4px] relay-justify-center relay-p-1 hover:relay-bg-[var(--relay-colors-gray2)] relay-bg-[var(--relay-colors-gray3)] relay-px-[6px] relay-py-[4px]"
+      className="relay:flex relay:rounded-[8px] relay:items-center relay:gap-[4px] relay:justify-center relay:p-1 relay:hover:bg-[var(--relay-colors-gray2)] relay:bg-[var(--relay-colors-gray3)] relay:px-[6px] relay:py-[4px]"
       onClick={() => {
         onOpenSlippageConfig?.()
       }}
diff --git a/packages/ui/src/components/primitives/Switch.tsx b/packages/ui/src/components/primitives/Switch.tsx
index 913857d0e..751f3f053 100644
--- a/packages/ui/src/components/primitives/Switch.tsx
+++ b/packages/ui/src/components/primitives/Switch.tsx
@@ -15,11 +15,11 @@ export const StyledSwitch = forwardRef<
       ref={forwardedRef}
       {...props}
       className={cn(
-        'relay-cursor-pointer relay-w-[38px] relay-h-[20px]',
-        'relay-bg-[var(--relay-colors-gray7)] relay-rounded-full',
-        'relay-relative relay-flex relay-items-center relay-px-[10px]',
-        'relay-transition-all relay-duration-200',
-        "data-[state='checked']:relay-bg-[var(--relay-colors-primary-button-background)]",
+        'relay:cursor-pointer relay:w-[38px] relay:h-[20px]',
+        'relay:bg-[var(--relay-colors-gray7)] relay:rounded-full',
+        'relay:relative relay:flex relay:items-center relay:px-[10px]',
+        'relay:transition-all relay:duration-200',
+        "relay:data-[state='checked']:bg-[var(--relay-colors-primary-button-background)]",
         className
       )}
     >
@@ -37,13 +37,13 @@ export const StyledThumb = forwardRef<
       ref={forwardedRef}
       {...props}
       className={cn(
-        'relay-block relay-w-[17.5px] relay-h-[17.5px]',
-        'relay-bg-[var(--relay-colors-gray1)] relay-rounded-full',
-        'relay-z-[1] relay-border relay-border-solid relay-border-[var(--relay-colors-gray-8)] relay-shadow-sm',
-        'relay-transition-transform relay-duration-100',
-        'relay-translate-x-0 relay-will-change-transform',
-        'relay-absolute relay-left-[2px]',
-        "data-[state='checked']:relay-translate-x-[17px]",
+        'relay:block relay:w-[17.5px] relay:h-[17.5px]',
+        'relay:bg-[var(--relay-colors-gray1)] relay:rounded-full',
+        'relay:z-[1] relay:border relay:border-solid relay:border-[var(--relay-colors-gray-8)] relay:shadow-sm',
+        'relay:transition-transform relay:duration-100',
+        'relay:translate-x-0 relay:will-change-transform',
+        'relay:absolute relay:left-[2px]',
+        "relay:data-[state='checked']:translate-x-[17px]",
         className
       )}
     />
diff --git a/packages/ui/src/components/primitives/Tabs.tsx b/packages/ui/src/components/primitives/Tabs.tsx
index 4bf74a004..c0a9baf58 100644
--- a/packages/ui/src/components/primitives/Tabs.tsx
+++ b/packages/ui/src/components/primitives/Tabs.tsx
@@ -17,8 +17,8 @@ const TabsList = forwardRef<
       {...props}
       ref={forwardedRef}
       className={cn(
-        'relay-flex relay-items-center relay-rounded-[8px] relay-p-1',
-        'relay-bg-[var(--relay-colors-gray2)] relay-border-none',
+        'relay:flex relay:items-center relay:rounded-[8px] relay:p-1',
+        'relay:bg-[var(--relay-colors-gray2)] relay:border-none',
         className
       )}
     >
@@ -38,12 +38,12 @@ const TabsTrigger = forwardRef<
       {...props}
       ref={forwardedRef}
       className={cn(
-        'relay-w-full relay-font-medium relay-text-[14px] relay-cursor-pointer',
-        'relay-py-[2px] relay-text-[color:var(--relay-colors-gray12)]',
-        'relay-rounded-[8px] relay-bg-transparent',
-        'relay-border relay-border-solid relay-border-transparent',
-        'data-[state=active]:relay-bg-[var(--relay-colors-subtle-background-color)]',
-        'data-[state=active]:relay-border-[var(--relay-colors-gray-5)]',
+        'relay:w-full relay:font-medium relay:text-[14px] relay:cursor-pointer',
+        'relay:py-[2px] relay:text-[color:var(--relay-colors-gray12)]',
+        'relay:rounded-[8px] relay:bg-transparent',
+        'relay:border relay:border-solid relay:border-transparent',
+        'relay:data-[state=active]:bg-[var(--relay-colors-subtle-background-color)]',
+        'relay:data-[state=active]:border-[var(--relay-colors-gray-5)]',
         className
       )}
     >
diff --git a/packages/ui/src/components/primitives/Text.tsx b/packages/ui/src/components/primitives/Text.tsx
index 71ad8f3fd..ecec1b694 100644
--- a/packages/ui/src/components/primitives/Text.tsx
+++ b/packages/ui/src/components/primitives/Text.tsx
@@ -3,46 +3,46 @@ import type { FC, PropsWithChildren } from 'react'
 import { cn } from '../../utils/cn.js'
 
 const textVariants = cva(
-  'relay-font-body',
+  'relay:font-body',
   {
     variants: {
       style: {
-        h1: 'relay-font-[800] relay-text-[64px] relay-font-heading',
-        h2: 'relay-font-bold relay-text-[48px]',
-        h3: 'relay-font-bold relay-text-[32px]',
-        h4: 'relay-font-bold relay-text-[24px]',
-        h5: 'relay-font-bold relay-text-[20px]',
-        h6: 'relay-font-bold relay-text-[16px]',
-        subtitle1: 'relay-font-medium relay-text-[16px]',
-        subtitle2: 'relay-font-medium relay-text-[14px]',
-        subtitle3: 'relay-font-medium relay-text-[12px]',
-        body1: 'relay-font-normal relay-text-[16px]',
-        body2: 'relay-font-normal relay-text-[14px]',
-        body3: 'relay-font-normal relay-text-[12px]',
+        h1: 'relay:font-[800] relay:text-[64px] relay:font-heading',
+        h2: 'relay:font-bold relay:text-[48px]',
+        h3: 'relay:font-bold relay:text-[32px]',
+        h4: 'relay:font-bold relay:text-[24px]',
+        h5: 'relay:font-bold relay:text-[20px]',
+        h6: 'relay:font-bold relay:text-[16px]',
+        subtitle1: 'relay:font-medium relay:text-[16px]',
+        subtitle2: 'relay:font-medium relay:text-[14px]',
+        subtitle3: 'relay:font-medium relay:text-[12px]',
+        body1: 'relay:font-normal relay:text-[16px]',
+        body2: 'relay:font-normal relay:text-[14px]',
+        body3: 'relay:font-normal relay:text-[12px]',
         tiny:
-          'relay-font-medium relay-text-[10px] relay-text-[color:var(--relay-colors-gray11)]'
+          'relay:font-medium relay:text-[10px] relay:text-[color:var(--relay-colors-gray11)]'
       },
       color: {
-        default: 'relay-text-[color:var(--relay-colors-text-default)]',
-        subtle: 'relay-text-[color:var(--relay-colors-text-subtle)]',
+        default: 'relay:text-[color:var(--relay-colors-text-default)]',
+        subtle: 'relay:text-[color:var(--relay-colors-text-subtle)]',
         subtleSecondary:
-          'relay-text-[color:var(--relay-colors-text-subtle-secondary)]',
-        error: 'relay-text-[color:var(--relay-colors-text-error)]',
-        red: 'relay-text-[color:var(--relay-colors-red11)]',
-        blue: 'relay-text-[color:var(--relay-colors-blue12)]',
-        success: 'relay-text-[color:var(--relay-colors-text-success)]',
-        warning: 'relay-text-[color:var(--relay-colors-amber12)]',
-        warningSecondary: 'relay-text-[color:var(--relay-colors-amber11)]',
-        primary: 'relay-text-[color:var(--relay-colors-primary11)]',
-        primary12: 'relay-text-[color:var(--relay-colors-primary12)]',
-        green: 'relay-text-[color:var(--relay-colors-green11)]',
-        slate: 'relay-text-[color:var(--relay-colors-slate10)]'
+          'relay:text-[color:var(--relay-colors-text-subtle-secondary)]',
+        error: 'relay:text-[color:var(--relay-colors-text-error)]',
+        red: 'relay:text-[color:var(--relay-colors-red11)]',
+        blue: 'relay:text-[color:var(--relay-colors-blue12)]',
+        success: 'relay:text-[color:var(--relay-colors-text-success)]',
+        warning: 'relay:text-[color:var(--relay-colors-amber12)]',
+        warningSecondary: 'relay:text-[color:var(--relay-colors-amber11)]',
+        primary: 'relay:text-[color:var(--relay-colors-primary11)]',
+        primary12: 'relay:text-[color:var(--relay-colors-primary12)]',
+        green: 'relay:text-[color:var(--relay-colors-green11)]',
+        slate: 'relay:text-[color:var(--relay-colors-slate10)]'
       },
       italic: {
-        true: 'relay-italic'
+        true: 'relay:italic'
       },
       ellipsify: {
-        true: 'relay-text-ellipsis relay-overflow-hidden relay-whitespace-nowrap'
+        true: 'relay:text-ellipsis relay:overflow-hidden relay:whitespace-nowrap'
       }
     },
     defaultVariants: {
diff --git a/packages/ui/src/components/primitives/Tooltip.tsx b/packages/ui/src/components/primitives/Tooltip.tsx
index 3be2a3fdc..89d2413fa 100644
--- a/packages/ui/src/components/primitives/Tooltip.tsx
+++ b/packages/ui/src/components/primitives/Tooltip.tsx
@@ -30,9 +30,9 @@ const Tooltip = ({
           {...props}
         >
           <div
-            className="relay-z-[10000004] relay-shadow-[0_2px_12px_rgba(0,0,0,0.12)] relay-rounded-[8px] relay-overflow-hidden relay-border-modal"
+            className="relay:z-[10000004] relay:shadow-[0_2px_12px_rgba(0,0,0,0.12)] relay:rounded-[8px] relay:overflow-hidden relay:border-modal"
           >
-            <div className="relay-bg-[var(--relay-colors-modal-background)] relay-p-2">
+            <div className="relay:bg-[var(--relay-colors-modal-background)] relay:p-2">
               {content}
             </div>
           </div>
@@ -56,13 +56,13 @@ const Tooltip = ({
           side="bottom"
           align="center"
           style={{ zIndex: 10000003 }}
-          className="relay-animate-content-fade-in"
+          className="relay:animate-content-fade-in"
           {...props}
         >
           <div
-            className="relay-z-[10000004] relay-shadow-[0_2px_12px_rgba(0,0,0,0.12)] relay-rounded-[8px] relay-overflow-hidden relay-border-modal"
+            className="relay:z-[10000004] relay:shadow-[0_2px_12px_rgba(0,0,0,0.12)] relay:rounded-[8px] relay:overflow-hidden relay:border-modal"
           >
-            <div className="relay-bg-[var(--relay-colors-modal-background)] relay-p-2">
+            <div className="relay:bg-[var(--relay-colors-modal-background)] relay:p-2">
               {content}
             </div>
           </div>
diff --git a/packages/ui/src/components/widgets/FeeBreakdown.tsx b/packages/ui/src/components/widgets/FeeBreakdown.tsx
index 9f8991551..c33dad997 100644
--- a/packages/ui/src/components/widgets/FeeBreakdown.tsx
+++ b/packages/ui/src/components/widgets/FeeBreakdown.tsx
@@ -103,7 +103,7 @@ const FeeBreakdown: FC<Props> = ({
       value: (
         <Flex
           align="center"
-          className="relay-gap-1"
+          className="relay:gap-1"
           style={{
             color:
               timeEstimate && timeEstimate.time <= 30
@@ -119,11 +119,11 @@ const FeeBreakdown: FC<Props> = ({
     {
       title: 'Network cost',
       value: (
-        <Flex align="center" className="relay-gap-1">
+        <Flex align="center" className="relay:gap-1">
           <FontAwesomeIcon
             icon={faGasPump}
             width={16}
-            className="relay-text-[#C1C8CD]"
+            className="relay:text-[#C1C8CD]"
           />
           <Text style="subtitle2">{originGasFeeFormatted}</Text>
         </Flex>
@@ -140,13 +140,13 @@ const FeeBreakdown: FC<Props> = ({
             <div>
               <Flex
                 align="center"
-                className="relay-gap-1 relay-text-[color:var(--relay-colors-gray8)]"
+                className="relay:gap-1 relay:text-[color:var(--relay-colors-gray8)]"
               >
                 <Text
                   style="subtitle2"
                   className={cn(
                     isHighPriceImpact &&
-                      'relay-text-[color:var(--relay-colors-red11)]'
+                      'relay:text-[color:var(--relay-colors-red11)]'
                   )}
                 >
                   {feeBreakdown?.totalFees?.priceImpactPercentage}
@@ -155,7 +155,7 @@ const FeeBreakdown: FC<Props> = ({
                   icon={faInfoCircle}
                   width={14}
                   height={14}
-                  className="relay-inline-block relay-ml-[4px]"
+                  className="relay:inline-block relay:ml-[4px]"
                 />
               </Flex>
             </div>
@@ -170,10 +170,10 @@ const FeeBreakdown: FC<Props> = ({
       return (
         <Box
           id={'fee-breakdown-section'}
-          className="relay-rounded-[var(--relay-radii-widget-card-border-radius)] relay-bg-[var(--relay-colors-widget-background)] relay-border-widget-card relay-overflow-hidden relay-mb-[var(--relay-spacing-widget-card-section-gutter)]"
+          className="relay:rounded-[var(--relay-radii-widget-card-border-radius)] relay:bg-[var(--relay-colors-widget-background)] relay:border-widget-card relay:overflow-hidden relay:mb-[var(--relay-spacing-widget-card-section-gutter)]"
         >
-          <div className="relay-mt-0 relay-mb-0 relay-px-3 relay-py-[12px] relay-w-full relay-flex relay-justify-center">
-            <FetchingQuoteLoader isLoading={isFetchingQuote} containerClassName="!relay-my-0 !relay-py-0" />
+          <div className="relay:mt-0 relay:mb-0 relay:px-3 relay:py-[12px] relay:w-full relay:flex relay:justify-center">
+            <FetchingQuoteLoader isLoading={isFetchingQuote} containerClassName="relay:!my-0 relay:!py-0" />
           </div>
         </Box>
       )
@@ -184,16 +184,16 @@ const FeeBreakdown: FC<Props> = ({
 
   return (
     <Flex
-      className="relay-rounded-[var(--relay-radii-widget-card-border-radius)] relay-bg-[var(--relay-colors-widget-background)] relay-overflow-hidden relay-mb-[var(--relay-spacing-widget-card-section-gutter)] relay-border-widget-card"
+      className="relay:rounded-[var(--relay-radii-widget-card-border-radius)] relay:bg-[var(--relay-colors-widget-background)] relay:overflow-hidden relay:mb-[var(--relay-spacing-widget-card-section-gutter)] relay:border-widget-card"
       direction="column"
     >
-      <Flex justify="between" align="center" className="relay-p-3 relay-pb-0">
+      <Flex justify="between" align="center" className="relay:p-3 relay:pb-0">
         <Text style="subtitle2">Max Slippage</Text>
-        <Flex align="center" className="relay-gap-2">
+        <Flex align="center" className="relay:gap-2">
           {isAutoSlippage ? (
             <Button
               aria-label="Auto"
-              className="relay-font-medium relay-px-[6px] relay-py-[2px] relay-min-h-0 relay-leading-[100%] relay-bg-[var(--relay-colors-widget-selector-background)] relay-border-none hover:relay-bg-[var(--relay-colors-widget-selector-hover-background)]"
+              className="relay:font-medium relay:px-[6px] relay:py-[2px] relay:min-h-0 relay:leading-[20px] relay:bg-[var(--relay-colors-widget-selector-background)] relay:border-none relay:hover:bg-[var(--relay-colors-widget-selector-hover-background)]"
               style={{ fontSize: '12px' }}
               color="white"
               size="none"
@@ -210,7 +210,7 @@ const FeeBreakdown: FC<Props> = ({
             align="end"
             content={
               minimumAmountFormatted ? (
-                <Flex direction="row" className="relay-gap-2">
+                <Flex direction="row" className="relay:gap-2">
                   <Text style="subtitle2" color="subtle">
                     Min. received
                   </Text>
@@ -240,10 +240,10 @@ const FeeBreakdown: FC<Props> = ({
           <Flex
             justify="between"
             align="center"
-            className="relay-flex-row relay-gap-2 relay-w-full relay-p-3"
+            className="relay:flex-row relay:gap-2 relay:w-full relay:p-3"
           >
             <span
-              className="relay-cursor-pointer relay-shrink relay-overflow-hidden relay-h-[21px]"
+              className="relay:cursor-pointer relay:shrink relay:overflow-hidden relay:h-[21px]"
               onClick={(e) => {
                 setRateMode(rateMode === 'input' ? 'output' : 'input')
                 e.preventDefault()
@@ -258,7 +258,7 @@ const FeeBreakdown: FC<Props> = ({
             </span>
 
             <Flex
-              className="relay-gap-2 relay-shrink-0"
+              className="relay:gap-2 relay:shrink-0"
               style={{
                 color:
                   timeEstimate && timeEstimate.time <= 30
@@ -270,13 +270,13 @@ const FeeBreakdown: FC<Props> = ({
               {!isOpen && timeEstimate && timeEstimate?.time !== 0 ? (
                 <>
                   <FontAwesomeIcon icon={faClock} width={16} />
-                  <Text style="subtitle2" className="relay-shrink-0">
+                  <Text style="subtitle2" className="relay:shrink-0">
                     ~ {timeEstimate?.formattedTime}
                   </Text>
                   <Flex
                     justify="center"
                     align="center"
-                    className="relay-text-[color:var(--relay-colors-gray6)] relay-h-[4px]"
+                    className="relay:text-[color:var(--relay-colors-gray6)] relay:h-[4px]"
                   >
                     &#8226;
                   </Flex>
@@ -287,15 +287,15 @@ const FeeBreakdown: FC<Props> = ({
                   <FontAwesomeIcon
                     icon={faGasPump}
                     width={16}
-                    className="relay-text-[#C1C8CD]"
+                    className="relay:text-[#C1C8CD]"
                   />
-                  <Text style="subtitle2" className="relay-shrink-0">
+                  <Text style="subtitle2" className="relay:shrink-0">
                     {originGasFeeFormatted}
                   </Text>
                 </>
               )}
               <div
-                className="relay-ml-2 relay-transition-transform relay-duration-300 relay-text-[color:var(--relay-colors-gray9)]"
+                className="relay:ml-2 relay:transition-transform relay:duration-300 relay:text-[color:var(--relay-colors-gray9)]"
                 style={{
                   transform: isOpen ? 'rotate(-180deg)' : 'rotate(0)'
                 }}
@@ -308,7 +308,7 @@ const FeeBreakdown: FC<Props> = ({
         <CollapsibleContent>
           <Flex
             direction="column"
-            className="relay-px-3 relay-pb-3 relay-pt-0 relay-gap-2 relay-bg-[var(--relay-colors-widget-background)]"
+            className="relay:px-3 relay:pb-3 relay:pt-0 relay:gap-2 relay:bg-[var(--relay-colors-widget-background)]"
           >
             {breakdown.map((item) => {
               return (
@@ -316,12 +316,12 @@ const FeeBreakdown: FC<Props> = ({
                   <Flex
                     justify="between"
                     align="center"
-                    className="relay-w-full relay-gap-4"
+                    className="relay:w-full relay:gap-4"
                   >
                     <Text
                       style="subtitle2"
                       color={'subtle'}
-                      className="relay-self-start"
+                      className="relay:self-start"
                     >
                       {item.title}
                     </Text>
@@ -360,7 +360,7 @@ const ConversionRate: FC<ConversionRateProps> = ({
   const shouldShowTooltip = rateText.length > 22
 
   const content = (
-    <div className="relay-w-full relay-min-w-0">
+    <div className="relay:w-full relay:min-w-0">
       <Text style="subtitle2" ellipsify>
         {rateText}
       </Text>
diff --git a/packages/ui/src/components/widgets/FetchingQuoteLoader.tsx b/packages/ui/src/components/widgets/FetchingQuoteLoader.tsx
index 122e97ac6..bfb549ae1 100644
--- a/packages/ui/src/components/widgets/FetchingQuoteLoader.tsx
+++ b/packages/ui/src/components/widgets/FetchingQuoteLoader.tsx
@@ -17,11 +17,11 @@ const FetchingQuoteLoader: FC<Props> = ({ isLoading, containerClassName }) => {
     <Flex
       align="center"
       className={cn(
-        'relay-gap-[14px] relay-mb-3 relay-mt-1 relay-py-3 relay-mx-auto',
+        'relay:gap-[14px] relay:mb-3 relay:mt-1 relay:py-3 relay:mx-auto',
         containerClassName
       )}
     >
-      <LoadingSpinner className="relay-h-4 relay-w-4" />
+      <LoadingSpinner className="relay:h-4 relay:w-4" />
       <Text style="subtitle2">Fetching the best price</Text>
     </Flex>
   )
diff --git a/packages/ui/src/components/widgets/OnrampWidget/modals/OnrampModal.tsx b/packages/ui/src/components/widgets/OnrampWidget/modals/OnrampModal.tsx
index e9164a84a..5b902f89c 100644
--- a/packages/ui/src/components/widgets/OnrampWidget/modals/OnrampModal.tsx
+++ b/packages/ui/src/components/widgets/OnrampWidget/modals/OnrampModal.tsx
@@ -425,7 +425,7 @@ export const OnrampModal: FC<OnrampModalProps> = ({
         }
         onOpenChange(open)
       }}
-      className="relay-overflow-hidden relay-p-4 !relay-max-w-[412px] max-[520px]:!relay-max-w-[unset]"
+      className="relay:overflow-hidden relay:p-4 relay:!max-w-[412px] max-[520px]:!relay-max-w-[unset]"
     >
       {step === OnrampStep.Confirming ? (
         <OnrampConfirmingStep
diff --git a/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampConfirmingStep.tsx b/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampConfirmingStep.tsx
index 779223f4b..271705a27 100644
--- a/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampConfirmingStep.tsx
+++ b/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampConfirmingStep.tsx
@@ -46,16 +46,16 @@ export const OnrampConfirmingStep: FC<OnrampConfirmingStepProps> = ({
   return (
     <Flex
       direction="column"
-      className="relay-w-full relay-h-full relay-gap-4"
+      className="relay:w-full relay:h-full relay:gap-4"
     >
       <Text style="h6">
         Buy {toToken?.symbol} ({toChain?.displayName})
       </Text>
       <Flex
         direction="column"
-        className="relay-w-full relay-overflow-hidden relay-p-4 relay-rounded-widget-card relay-border relay-border-solid relay-border-[var(--relay-colors-subtle-border-color)]"
+        className="relay:w-full relay:overflow-hidden relay:p-4 relay:rounded-widget-card relay:border relay:border-solid relay:border-[var(--relay-colors-subtle-border-color)]"
       >
-        <Flex align="center" className="relay-gap-2">
+        <Flex align="center" className="relay:gap-2">
           <ChainTokenIcon
             chainId={fromToken?.chainId}
             tokenlogoURI={fromToken?.logoURI}
@@ -67,9 +67,9 @@ export const OnrampConfirmingStep: FC<OnrampConfirmingStepProps> = ({
           </Text>
         </Flex>
         <div
-          className="relay-ml-[16px] relay-h-[24px] relay-w-px relay-bg-[var(--relay-colors-gray5)] relay-mt-[5px] relay-mb-[5px]"
+          className="relay:ml-[16px] relay:h-[24px] relay:w-px relay:bg-[var(--relay-colors-gray5)] relay:mt-[5px] relay:mb-[5px]"
         />
-        <Flex align="center" className="relay-gap-2">
+        <Flex align="center" className="relay:gap-2">
           <ChainTokenIcon
             chainId={toToken?.chainId}
             tokenlogoURI={toToken?.logoURI}
@@ -87,7 +87,7 @@ export const OnrampConfirmingStep: FC<OnrampConfirmingStepProps> = ({
         <Anchor
           href="https://support.relay.link/en/articles/10517947-fiat-on-ramps"
           target="_blank"
-          className="relay-ml-1"
+          className="relay:ml-1"
         >
           Learn more
         </Anchor>
@@ -95,7 +95,7 @@ export const OnrampConfirmingStep: FC<OnrampConfirmingStepProps> = ({
       <Button
         cta={true}
         disabled={!depositAddress || isFetchingQuote}
-        className="relay-justify-center"
+        className="relay:justify-center"
         onClick={(e) => {
           onAnalyticEvent?.(EventNames.ONRAMP_CTA_CLICKED, {
             recipient,
@@ -112,7 +112,7 @@ export const OnrampConfirmingStep: FC<OnrampConfirmingStepProps> = ({
       >
         {!depositAddress || isFetchingQuote ? (
           <LoadingSpinner
-            className="relay-h-[16px] relay-w-[16px] relay-fill-[var(--relay-colors-button-disabled-color)]"
+            className="relay:h-[16px] relay:w-[16px] relay:fill-[var(--relay-colors-button-disabled-color)]"
           />
         ) : (
           `Purchase ${fromToken?.symbol} (${fromChain?.displayName})`
diff --git a/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampMoonPayStep.tsx b/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampMoonPayStep.tsx
index 0a17a5f14..1338e4ad8 100644
--- a/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampMoonPayStep.tsx
+++ b/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampMoonPayStep.tsx
@@ -184,13 +184,13 @@ export const OnrampMoonPayStep: FC<OnrampMoonPayStepProps> = ({
     <Flex
       direction="column"
       id="onramp-moonpay-step"
-      className="relay-w-full relay-h-full"
+      className="relay:w-full relay:h-full"
       style={{
         position: step === OnrampStep.Moonpay ? undefined : 'fixed',
         top: step === OnrampStep.Moonpay ? undefined : '-100%'
       }}
     >
-      <Text style="h6" className="relay-mb-2">
+      <Text style="h6" className="relay:mb-2">
         {!isPassthrough
           ? `Buy ${toToken?.symbol} (${toChain?.displayName})`
           : 'Checkout'}
@@ -198,19 +198,19 @@ export const OnrampMoonPayStep: FC<OnrampMoonPayStepProps> = ({
       {!isPassthrough ? (
         <Flex
           align="center"
-          className="relay-w-full relay-overflow-hidden relay-p-4 relay-gap-2 relay-mb-2 relay-rounded-widget-card relay-border relay-border-solid relay-border-[var(--relay-colors-subtle-border-color)]"
+          className="relay:w-full relay:overflow-hidden relay:p-4 relay:gap-2 relay:mb-2 relay:rounded-widget-card relay:border relay:border-solid relay:border-[var(--relay-colors-subtle-border-color)]"
         >
           <div
-            className="relay-relative relay-shrink-0 relay-w-[48px] relay-h-[52px]"
+            className="relay:relative relay:shrink-0 relay:w-[48px] relay:h-[52px]"
           >
-            <div className="relay-absolute relay-top-0 relay-right-0 relay-z-[1]">
+            <div className="relay:absolute relay:top-0 relay:right-0 relay:z-[1]">
               <ChainTokenIcon
                 chainId={toToken?.chainId}
                 tokenlogoURI={toToken?.logoURI}
                 tokenSymbol={toToken?.symbol}
               />
             </div>
-            <div className="relay-absolute relay-bottom-0 relay-left-0">
+            <div className="relay:absolute relay:bottom-0 relay:left-0">
               <ChainTokenIcon
                 chainId={fromToken?.chainId}
                 tokenlogoURI={fromToken?.logoURI}
diff --git a/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampProcessingPassthroughStep.tsx b/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampProcessingPassthroughStep.tsx
index 2e0651183..b50373a9b 100644
--- a/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampProcessingPassthroughStep.tsx
+++ b/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampProcessingPassthroughStep.tsx
@@ -24,20 +24,20 @@ export const OnrampProcessingPassthroughStep: FC<
   return (
     <Flex
       direction="column"
-      className="relay-w-full relay-h-full"
+      className="relay:w-full relay:h-full"
     >
-      <Text style="h6" className="relay-mb-4">
+      <Text style="h6" className="relay:mb-4">
         Processing Transaction
       </Text>
       <Flex
         align="center"
-        className="relay-w-full relay-p-3 relay-mb-2 relay-gap-2 relay-rounded-[12px] relay-bg-[var(--relay-colors-gray2)]"
+        className="relay:w-full relay:p-3 relay:mb-2 relay:gap-2 relay:rounded-[12px] relay:bg-[var(--relay-colors-gray2)]"
       >
         <ChainTokenIcon
           chainId={toToken?.chainId}
           tokenlogoURI={toToken?.logoURI}
           tokenSymbol={toToken?.symbol}
-          className="relay-w-[32px] relay-h-[32px]"
+          className="relay:w-[32px] relay:h-[32px]"
         />
         <Flex align="start" direction="column">
           <Text style="h6">
@@ -52,21 +52,21 @@ export const OnrampProcessingPassthroughStep: FC<
         direction="column"
         justify="center"
         align="center"
-        className="relay-py-4 relay-px-3 relay-rounded-widget-card relay-border relay-border-solid relay-border-[var(--relay-colors-subtle-border-color)]"
+        className="relay:py-4 relay:px-3 relay:rounded-widget-card relay:border relay:border-solid relay:border-[var(--relay-colors-subtle-border-color)]"
       >
-        <div className="relay-relative relay-w-[40px] relay-h-[40px]">
-          <MoonPayLogo className="relay-rounded-[12px] relay-w-[40px] relay-h-[40px]" />
+        <div className="relay:relative relay:w-[40px] relay:h-[40px]">
+          <MoonPayLogo className="relay:rounded-[12px] relay:w-[40px] relay:h-[40px]" />
           <Flex
             align="center"
             justify="center"
-            className="relay-absolute relay-rounded-full relay-overflow-hidden relay-w-[24px] relay-h-[24px] relay-bg-[var(--relay-colors-primary3)] -relay-bottom-[6px] -relay-right-[6px] relay-border-2 relay-border-solid relay-border-[var(--relay-colors-modal-background)]"
+            className="relay:absolute relay:rounded-full relay:overflow-hidden relay:w-[24px] relay:h-[24px] relay:bg-[var(--relay-colors-primary3)] relay:-bottom-[6px] relay:-right-[6px] relay:border-2 relay:border-solid relay:border-[var(--relay-colors-modal-background)]"
           >
             <LoadingSpinner
-              className="relay-h-[16px] relay-w-[16px] relay-fill-[var(--relay-colors-primary-color)]"
+              className="relay:h-[16px] relay:w-[16px] relay:fill-[var(--relay-colors-primary-color)]"
             />
           </Flex>
         </div>
-        <Text style="subtitle2" className="relay-mt-[24px] relay-text-center">
+        <Text style="subtitle2" className="relay:mt-[24px] relay:text-center">
           Finalizing your purchase through MoonPay, it may take a few minutes to
           process.
         </Text>
@@ -74,14 +74,14 @@ export const OnrampProcessingPassthroughStep: FC<
           <Anchor
             href={moonpayTxUrl}
             target="_blank"
-            className="relay-flex relay-items-center relay-gap-1 relay-mt-2"
+            className="relay:flex relay:items-center relay:gap-1 relay:mt-2"
           >
             Track MoonPay transaction{' '}
-            <FontAwesomeIcon icon={faUpRightFromSquare} className="relay-w-[14px]" />
+            <FontAwesomeIcon icon={faUpRightFromSquare} style={{ width: 14 }} />
           </Anchor>
         ) : null}
       </Flex>
-      <Text style="body2" color="subtle" className="relay-mt-2">
+      <Text style="body2" color="subtle" className="relay:mt-2">
         Feel free to leave at any time, MoonPay will email you with updates.
       </Text>
     </Flex>
diff --git a/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampProcessingStepUI.tsx b/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampProcessingStepUI.tsx
index 2ae71f067..6af3195f2 100644
--- a/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampProcessingStepUI.tsx
+++ b/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampProcessingStepUI.tsx
@@ -69,16 +69,16 @@ export const OnrampProcessingStepUI: FC<OnrampProcessingStepUIProps> = ({
   return (
     <Flex
       direction="column"
-      className="relay-w-full relay-h-full"
+      className="relay:w-full relay:h-full"
     >
-      <Text style="h6" className="relay-mb-4">
+      <Text style="h6" className="relay:mb-4">
         Processing Transaction
       </Text>
       <Flex
         direction="column"
-        className="relay-w-full relay-overflow-hidden relay-p-4 relay-mb-4 relay-rounded-widget-card relay-border relay-border-solid relay-border-[var(--relay-colors-subtle-border-color)]"
+        className="relay:w-full relay:overflow-hidden relay:p-4 relay:mb-4 relay:rounded-widget-card relay:border relay:border-solid relay:border-[var(--relay-colors-subtle-border-color)]"
       >
-        <Flex align="center" className="relay-gap-2">
+        <Flex align="center" className="relay:gap-2">
           <div style={{
             filter:
               processingStep === OnrampProcessingStep.Relaying
@@ -91,7 +91,7 @@ export const OnrampProcessingStepUI: FC<OnrampProcessingStepUIProps> = ({
               tokenSymbol={fromToken?.symbol}
             />
           </div>
-          <Flex className="relay-gap-1" direction="column">
+          <Flex className="relay:gap-1" direction="column">
             <Text
               style="subtitle1"
               color={
@@ -108,23 +108,23 @@ export const OnrampProcessingStepUI: FC<OnrampProcessingStepUIProps> = ({
               <Anchor
                 href={moonpayTxUrl}
                 target="_blank"
-                className="relay-flex relay-items-center relay-gap-1"
+                className="relay:flex relay:items-center relay:gap-1"
               >
                 Track MoonPay transaction{' '}
                 <FontAwesomeIcon
                   icon={faUpRightFromSquare}
-                  className="relay-w-[14px]"
+                  className="relay:w-[14px]"
                 />
               </Anchor>
             ) : null}
           </Flex>
           {processingStep === OnrampProcessingStep.Relaying ? (
-            <Box className="relay-text-[color:var(--relay-colors-green9)] relay-ml-auto">
-              <FontAwesomeIcon icon={faCheck} className="relay-h-[16px]" />
+            <Box className="relay:text-[color:var(--relay-colors-green9)] relay:ml-auto">
+              <FontAwesomeIcon icon={faCheck} style={{ height: 16 }} />
             </Box>
           ) : (
             <LoadingSpinner
-              className="relay-h-[20px] relay-w-[20px] relay-fill-[var(--relay-colors-gray9)] relay-ml-auto"
+              className="relay:h-[20px] relay:w-[20px] relay:fill-[var(--relay-colors-gray9)] relay:ml-auto"
             />
           )}
         </Flex>
@@ -132,7 +132,7 @@ export const OnrampProcessingStepUI: FC<OnrampProcessingStepUIProps> = ({
           delayedMoonpayTx ? (
             <Flex
               direction="column"
-              className="relay-w-full relay-overflow-hidden relay-p-2 relay-mb-[6px] relay-gap-3 relay-mt-[6px] relay-rounded-widget-card relay-border relay-border-solid relay-border-[var(--relay-colors-subtle-border-color)]"
+              className="relay:w-full relay:overflow-hidden relay:p-2 relay:mb-[6px] relay:gap-3 relay:mt-[6px] relay:rounded-widget-card relay:border relay:border-solid relay:border-[var(--relay-colors-subtle-border-color)]"
             >
               <Text color="warning" style="subtitle2">
                 Looks like its taking longer than expected. Please go to MoonPay
@@ -141,7 +141,7 @@ export const OnrampProcessingStepUI: FC<OnrampProcessingStepUIProps> = ({
               <Button
                 cta={true}
                 color="warning"
-                className="relay-flex relay-items-center relay-gap-2 relay-justify-center"
+                className="relay:flex relay:items-center relay:gap-2 relay:justify-center"
                 onClick={(e) => {
                   window.open(moonpayTxUrl, '_blank')
                 }}
@@ -149,7 +149,7 @@ export const OnrampProcessingStepUI: FC<OnrampProcessingStepUIProps> = ({
                 Go to MoonPay{' '}
                 <FontAwesomeIcon
                   icon={faArrowUpRightFromSquare}
-                  className="relay-w-[16px] relay-h-[16px]"
+                  className="relay:w-[16px] relay:h-[16px]"
                 />
               </Button>
             </Flex>
@@ -157,7 +157,7 @@ export const OnrampProcessingStepUI: FC<OnrampProcessingStepUIProps> = ({
             <Pill
               radius="rounded"
               color="gray"
-              className="relay-w-full relay-py-2 relay-px-3 relay-mt-[6px]"
+              className="relay:w-full relay:py-2 relay:px-3 relay:mt-[6px]"
             >
               <Text style="subtitle2" color="subtle">
                 It might take a few minutes for the MoonPay transaction to
@@ -168,11 +168,11 @@ export const OnrampProcessingStepUI: FC<OnrampProcessingStepUIProps> = ({
         ) : null}
 
         <div
-          className="relay-ml-[16px] relay-h-[24px] relay-w-px relay-bg-[var(--relay-colors-gray5)] relay-mt-[5px] relay-mb-[5px]"
+          className="relay:ml-[16px] relay:h-[24px] relay:w-px relay:bg-[var(--relay-colors-gray5)] relay:mt-[5px] relay:mb-[5px]"
         />
         <Flex
           align="center"
-          className="relay-gap-2"
+          className="relay:gap-2"
         >
           <div style={{
             filter:
@@ -185,7 +185,7 @@ export const OnrampProcessingStepUI: FC<OnrampProcessingStepUIProps> = ({
               tokenlogoURI={toToken?.logoURI}
             />
           </div>
-          <Flex className="relay-gap-1" direction="column">
+          <Flex className="relay:gap-1" direction="column">
             <Text
               style="subtitle1"
               color={
@@ -202,7 +202,7 @@ export const OnrampProcessingStepUI: FC<OnrampProcessingStepUIProps> = ({
               <Anchor
                 href={fillTxUrl}
                 target="_blank"
-                className="relay-flex relay-items-center relay-gap-1"
+                className="relay:flex relay:items-center relay:gap-1"
               >
                 View Tx: {truncateAddress(fillTxHash)}
               </Anchor>
@@ -210,7 +210,7 @@ export const OnrampProcessingStepUI: FC<OnrampProcessingStepUIProps> = ({
           </Flex>
           {processingStep === OnrampProcessingStep.Relaying ? (
             <LoadingSpinner
-              className="relay-h-[16px] relay-w-[16px] relay-fill-[var(--relay-colors-gray9)] relay-ml-auto"
+              className="relay:h-[16px] relay:w-[16px] relay:fill-[var(--relay-colors-gray9)] relay:ml-auto"
             />
           ) : null}
         </Flex>
@@ -221,7 +221,7 @@ export const OnrampProcessingStepUI: FC<OnrampProcessingStepUIProps> = ({
           <Anchor
             href={`${baseTransactionUrl}/transaction/${requestId}`}
             target="_blank"
-            className="relay-ml-1"
+            className="relay:ml-1"
           >
             transaction page
           </Anchor>
@@ -235,7 +235,7 @@ export const OnrampProcessingStepUI: FC<OnrampProcessingStepUIProps> = ({
           <Anchor
             href="https://support.relay.link/en/articles/10517947-fiat-on-ramps"
             target="_blank"
-            className="relay-ml-1"
+            className="relay:ml-1"
           >
             Learn more
           </Anchor>
diff --git a/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampSuccessStep.tsx b/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampSuccessStep.tsx
index b9959d636..40880b6c5 100644
--- a/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampSuccessStep.tsx
+++ b/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampSuccessStep.tsx
@@ -38,53 +38,53 @@ export const OnrampSuccessStep: FC<OnrampSuccessStepProps> = ({
   return (
     <Flex
       direction="column"
-      className="relay-w-full relay-h-full"
+      className="relay:w-full relay:h-full"
     >
-      <Text style="h6" className="relay-mb-4">
+      <Text style="h6" className="relay:mb-4">
         Transaction Details
       </Text>
       <Flex direction="column" align="center" justify="between">
-        <div className="relay-animate-content-fade-in">
+        <div className="relay:animate-content-fade-in">
           <Flex
             align="center"
             justify="center"
-            className="relay-relative relay-rounded-full relay-h-[80px] relay-w-[80px] relay-bg-[var(--relay-colors-green2)] relay-border-[6px] relay-border-solid relay-border-[var(--relay-colors-green10)]"
+            className="relay:relative relay:rounded-full relay:h-[80px] relay:w-[80px] relay:bg-[var(--relay-colors-green2)] relay:border-[6px] relay:border-solid relay:border-[var(--relay-colors-green10)]"
           >
-            <Box className="relay-text-[color:var(--relay-colors-green9)] relay-mr-[8px]">
-              <FontAwesomeIcon icon={faCheck} className="relay-h-[40px]" />
+            <Box className="relay:text-[color:var(--relay-colors-green9)] relay:mr-[8px]">
+              <FontAwesomeIcon icon={faCheck} style={{ height: 40 }} />
             </Box>
           </Flex>
         </div>
 
-        <Text style="subtitle1" className="relay-mt-4 relay-text-center">
+        <Text style="subtitle1" className="relay:mt-4 relay:text-center">
           Successfully purchased
         </Text>
         <Pill
           color="gray"
-          className="relay-items-center relay-my-4 relay-py-2 relay-px-3 relay-gap-2"
+          className="relay:items-center relay:my-4 relay:py-2 relay:px-3 relay:gap-2"
         >
           <ChainTokenIcon
             chainId={toToken.chainId}
             tokenlogoURI={toToken.logoURI}
             tokenSymbol={toToken.symbol}
-            className="relay-h-[32px] relay-w-[32px]"
+            className="relay:h-[32px] relay:w-[32px]"
           />
           {isLoadingTransaction ? (
-            <Skeleton className="relay-h-[24px] relay-w-[60px] relay-bg-[var(--relay-colors-gray5)]" />
+            <Skeleton className="relay:h-[24px] relay:w-[60px] relay:bg-[var(--relay-colors-gray5)]" />
           ) : (
             <Text style="subtitle1" ellipsify>
               {toAmountFormatted} {toToken.symbol}
             </Text>
           )}
         </Pill>
-        <Flex direction="column" className="relay-gap-2" align="center">
+        <Flex direction="column" className="relay:gap-2" align="center">
           <Anchor
             href={moonpayTxUrl}
             target="_blank"
-            className="relay-flex relay-items-center relay-gap-1"
+            className="relay:flex relay:items-center relay:gap-1"
           >
             View MoonPay transaction{' '}
-            <FontAwesomeIcon icon={faUpRightFromSquare} className="relay-w-[14px]" />
+            <FontAwesomeIcon icon={faUpRightFromSquare} style={{ width: 14 }} />
           </Anchor>
           {fillTxUrl ? (
             <Anchor href={fillTxUrl} target="_blank">
@@ -93,11 +93,11 @@ export const OnrampSuccessStep: FC<OnrampSuccessStepProps> = ({
           ) : null}
         </Flex>
       </Flex>
-      <Flex className="relay-w-full relay-mt-[24px] relay-gap-3">
+      <Flex className="relay:w-full relay:mt-[24px] relay:gap-3">
         {fillTxHash ? (
           <a
             href={`${baseTransactionUrl}/transaction/${fillTxHash}`}
-            className="relay-w-full"
+            className="relay:w-full"
             target="_blank"
             onClick={(e) => {
               e.stopPropagation()
@@ -106,7 +106,7 @@ export const OnrampSuccessStep: FC<OnrampSuccessStepProps> = ({
             <Button
               cta={true}
               color="secondary"
-              className="relay-justify-center relay-w-max"
+              className="relay:justify-center relay:w-max"
             >
               View Details
             </Button>
@@ -117,7 +117,7 @@ export const OnrampSuccessStep: FC<OnrampSuccessStepProps> = ({
           onClick={() => {
             onOpenChange(false)
           }}
-          className="relay-justify-center relay-w-full"
+          className="relay:justify-center relay:w-full"
         >
           Done
         </Button>
diff --git a/packages/ui/src/components/widgets/OnrampWidget/widget/FiatCurrencyModal.tsx b/packages/ui/src/components/widgets/OnrampWidget/widget/FiatCurrencyModal.tsx
index 6eee61137..b700b6777 100644
--- a/packages/ui/src/components/widgets/OnrampWidget/widget/FiatCurrencyModal.tsx
+++ b/packages/ui/src/components/widgets/OnrampWidget/widget/FiatCurrencyModal.tsx
@@ -89,17 +89,17 @@ const FiatCurrencyModal: FC<Props> = ({
         <Button
           color="white"
           corners="pill"
-          className="relay-h-[28px] relay-min-h-[28px] relay-w-max relay-shrink-0 relay-overflow-hidden relay-gap-1 relay-flex relay-items-center relay-py-1 relay-px-2 relay-bg-[var(--relay-colors-gray2)] relay-border-none hover:relay-bg-[var(--relay-colors-gray3)]"
+          className="relay:h-[28px] relay:min-h-[28px] relay:w-max relay:shrink-0 relay:overflow-hidden relay:gap-1 relay:flex relay:items-center relay:py-1 relay:px-2 relay:bg-[var(--relay-colors-gray2)] relay:border-none relay:hover:bg-[var(--relay-colors-gray3)]"
         >
           <img
             alt="currency-icon"
             src={fiatCurrency.icon}
-            className="relay-w-[16px] relay-h-[16px] relay-rounded-full"
+            className="relay:w-[16px] relay:h-[16px] relay:rounded-full"
           />
           <Text style="subtitle2" color="subtle">
             {fiatCurrency.code.toUpperCase()}
           </Text>
-          <Box className="relay-text-[color:var(--relay-colors-gray9)] relay-w-[14px]">
+          <Box className="relay:text-[color:var(--relay-colors-gray9)] relay:w-[14px]">
             <FontAwesomeIcon icon={faChevronDown} width={14} />
           </Box>
         </Button>
@@ -113,11 +113,11 @@ const FiatCurrencyModal: FC<Props> = ({
         }
         setOpen(open)
       }}
-      className="relay-overflow-hidden relay-p-4 relay-max-w-[100vw] !relay-max-h-[450px] relay-h-[450px] sm:!relay-max-w-[400px]"
+      className="relay:overflow-hidden relay:p-4 relay:max-w-[100vw] relay:!max-h-[450px] relay:h-[450px] sm:!relay-max-w-[400px]"
     >
       <Text
         style="h6"
-        className="relay-w-full relay-text-left"
+        className="relay:w-full relay:text-left"
       >
         Select a currency
       </Text>
@@ -133,16 +133,16 @@ const FiatCurrencyModal: FC<Props> = ({
             setOpen(false)
           }
         }}
-        className="relay-flex relay-flex-col relay-w-full relay-gap-1 relay-overflow-y-auto relay-h-[calc(100%-24px)] relay-scroll-pt-[40px]"
+        className="relay:flex relay:flex-col relay:w-full relay:gap-1 relay:overflow-y-auto relay:h-[calc(100%-24px)] relay:scroll-pt-[40px]"
       >
         <AccessibleListItem value="input" asChild>
           <Box
-            className="relay-sticky relay-py-2 relay-z-[1] relay-top-0 relay-bg-[var(--relay-colors-modal-background)]"
+            className="relay:sticky relay:py-2 relay:z-[1] relay:top-0 relay:bg-[var(--relay-colors-modal-background)]"
           >
             <Input
               placeholder="Search for a currency"
               icon={
-                <Box className="relay-text-[color:var(--relay-colors-gray9)]">
+                <Box className="relay:flex relay:text-[color:var(--relay-colors-gray9)]">
                   <FontAwesomeIcon
                     icon={faMagnifyingGlass}
                     width={16}
@@ -150,9 +150,9 @@ const FiatCurrencyModal: FC<Props> = ({
                   />
                 </Box>
               }
-              containerClassName="relay-w-full"
+              containerClassName="relay:w-full"
               style={{ scrollSnapAlign: 'start' }}
-              className="relay-w-full relay-h-[40px]"
+              className="relay:w-full relay:h-[40px]"
               value={currencySearchInput}
               onChange={(e) => {
                 setCurrencySearchInput((e.target as HTMLInputElement).value)
@@ -172,29 +172,29 @@ const FiatCurrencyModal: FC<Props> = ({
                 color="ghost"
                 size="none"
                 className={cn(
-                  'relay-p-2 relay-flex relay-items-center relay-gap-2 relay-relative',
-                  'relay-transition-[backdrop-filter] relay-duration-[250ms] relay-ease-linear',
-                  'focus-visible:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)]',
-                  '[&[data-state=on]]:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)]',
-                  'active:relay-shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)]',
-                  !active && 'hover:relay-bg-[rgba(128,128,128,0.1)]',
-                  i + 1 < (fiatCurrencies?.length ?? 0) ? 'relay-mb-1' : ''
+                  'relay:p-2 relay:flex relay:items-center relay:gap-2 relay:relative',
+                  'relay:transition-[backdrop-filter] relay:duration-[250ms] relay:ease-linear',
+                  'relay:focus-visible:shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)]',
+                  'relay:[&[data-state=on]]:shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)]',
+                  'relay:active:shadow-[inset_0_0_0_2px_var(--relay-colors-focus-color)]',
+                  !active && 'relay:hover:bg-[rgba(128,128,128,0.1)]',
+                  i + 1 < (fiatCurrencies?.length ?? 0) ? 'relay:mb-1' : ''
                 )}
                 style={{ scrollSnapAlign: 'start' }}
               >
                 {active ? (
                   <div
-                    className="relay-absolute relay-rounded-[8px] relay-top-0 relay-left-0 relay-w-full relay-h-full relay-opacity-[0.15] relay-z-[-1] relay-bg-[var(--relay-colors-primary-color)]"
+                    className="relay:absolute relay:rounded-[8px] relay:top-0 relay:left-0 relay:w-full relay:h-full relay:opacity-[0.15] relay:z-[-1] relay:bg-[var(--relay-colors-primary-color)]"
                   />
                 ) : null}
-                <Flex align="center" className="relay-gap-2">
+                <Flex align="center" className="relay:gap-2">
                   <img
                     src={currency.icon}
                     alt={`${currency.name} icon`}
-                    className="relay-w-[32px] relay-h-[32px] relay-rounded-full"
+                    className="relay:w-[32px] relay:h-[32px] relay:rounded-full"
                   />
                   <Flex
-                    className="relay-gap-[2px] relay-text-left"
+                    className="relay:gap-[2px] relay:text-left"
                     direction="column"
                   >
                     <Text style="subtitle2">{currency.name}</Text>
@@ -209,7 +209,7 @@ const FiatCurrencyModal: FC<Props> = ({
         })}
         {/* Empty State */}
         {filteredCurrencies.length === 0 ? (
-          <Text style="subtitle2" className="relay-text-center relay-py-5">
+          <Text style="subtitle2" className="relay:text-center relay:py-5">
             No results found.
           </Text>
         ) : null}
diff --git a/packages/ui/src/components/widgets/OnrampWidget/widget/index.tsx b/packages/ui/src/components/widgets/OnrampWidget/widget/index.tsx
index efc61981d..3ea621d70 100644
--- a/packages/ui/src/components/widgets/OnrampWidget/widget/index.tsx
+++ b/packages/ui/src/components/widgets/OnrampWidget/widget/index.tsx
@@ -199,20 +199,20 @@ const OnrampWidget: FC<OnrampWidgetProps> = ({
 
         return (
           <div
-            className="relay-kit-reset relay-max-w-[408px] relay-min-w-[320px] relay-w-full"
+            className="relay-kit-reset relay:max-w-[408px] relay:min-w-[320px] relay:w-full"
           >
             <Flex
               direction="column"
-              className="relay-gap-2 relay-w-full relay-border-widget"
+              className="relay:gap-2 relay:w-full relay:border-widget"
             >
               <Flex
                 direction="column"
-                className="relay-w-full relay-overflow-hidden relay-px-4 relay-pt-[40px] relay-pb-[24px] relay-rounded-widget-card relay-bg-[var(--relay-colors-widget-background)] relay-border-widget-card relay-mb-[var(--relay-spacing-widget-card-section-gutter)]"
+                className="relay:w-full relay:overflow-hidden relay:px-4 relay:pt-[40px] relay:pb-[24px] relay:rounded-widget-card relay:bg-[var(--relay-colors-widget-background)] relay:border-widget-card relay:mb-[var(--relay-spacing-widget-card-section-gutter)]"
               >
                 <Text
                   style="subtitle2"
                   color="subtle"
-                  className="relay-text-center"
+                  className="relay:text-center"
                 >
                   Enter an amount
                 </Text>
@@ -318,7 +318,7 @@ const OnrampWidget: FC<OnrampWidgetProps> = ({
                     }
                     input.style.caretColor = 'initial'
                   }}
-                  className="relay-text-center relay-whitespace-pre"
+                  className="relay:text-center relay:whitespace-pre"
                   inputStyle={{
                     fontWeight: '700',
                     fontSize: 48,
@@ -330,10 +330,10 @@ const OnrampWidget: FC<OnrampWidgetProps> = ({
                         : undefined,
                     whiteSpace: 'pre'
                   }}
-                  containerClassName="relay-mb-2 relay-w-full"
+                  containerClassName="relay:mb-2 relay:w-full"
                 />
                 {notEnoughFiat ? (
-                  <Text color="red" className="relay-mb-[24px] relay-text-center">
+                  <Text color="red" className="relay:mb-[24px] relay:text-center">
                     Minimum amount is{' '}
                     {displayCurrency && minAmountCurrency
                       ? `${minAmountCurrency} ${token.symbol}`
@@ -341,7 +341,7 @@ const OnrampWidget: FC<OnrampWidgetProps> = ({
                   </Text>
                 ) : undefined}
                 <button
-                  className="relay-gap-2 relay-cursor-pointer relay-flex relay-items-center relay-justify-center relay-mb-[16px] relay-self-center"
+                  className="relay:gap-2 relay:cursor-pointer relay:flex relay:items-center relay:justify-center relay:mb-[16px] relay:self-center"
                   onClick={() => {
                     const _displayCurrency = !displayCurrency
                     setDisplayCurrency(_displayCurrency)
@@ -363,14 +363,14 @@ const OnrampWidget: FC<OnrampWidgetProps> = ({
                       : `${amountToTokenFormatted} ${token.symbol}`}
                   </Text>
                   <Flex
-                    className="relay-text-[color:var(--relay-colors-gray8)]"
+                    className="relay:text-[color:var(--relay-colors-gray8)]"
                   >
                     <FontAwesomeIcon
-                      className="relay-h-[14px]"
+                      className="relay:h-[14px]"
                       icon={faArrowUpLong}
                     />
                     <FontAwesomeIcon
-                      className="relay-h-[14px]"
+                      className="relay:h-[14px]"
                       icon={faArrowDownLong}
                     />
                   </Flex>
@@ -389,19 +389,19 @@ const OnrampWidget: FC<OnrampWidgetProps> = ({
                   context="to"
                   trigger={
                     <div
-                      className="relay-w-max relay-mx-auto relay-mb-[16px]"
+                      className="relay:w-max relay:mx-auto relay:mb-[16px]"
                       data-testid="onramp-token-select-button"
                     >
                       <TokenTrigger token={token} />
                     </div>
                   }
                 />
-                <Flex className="relay-gap-2 relay-mx-auto">
+                <Flex className="relay:gap-2 relay:mx-auto">
                   <Button
                     color="white"
                     corners="pill"
                     size="none"
-                    className="relay-h-[30px] relay-px-[14px] relay-py-[4px] relay-text-[14px]"
+                    className="relay:h-[30px] relay:px-[14px] relay:py-[4px] relay:text-[14px]"
                     onClick={() => {
                       setDisplayCurrency(false)
                       setInputValue('100', false)
@@ -413,7 +413,7 @@ const OnrampWidget: FC<OnrampWidgetProps> = ({
                     color="white"
                     corners="pill"
                     size="none"
-                    className="relay-h-[30px] relay-px-[14px] relay-py-[4px] relay-text-[14px]"
+                    className="relay:h-[30px] relay:px-[14px] relay:py-[4px] relay:text-[14px]"
                     onClick={() => {
                       setDisplayCurrency(false)
                       setInputValue('300', false)
@@ -425,7 +425,7 @@ const OnrampWidget: FC<OnrampWidgetProps> = ({
                     color="white"
                     corners="pill"
                     size="none"
-                    className="relay-h-[30px] relay-px-[14px] relay-py-[4px] relay-text-[14px]"
+                    className="relay:h-[30px] relay:px-[14px] relay:py-[4px] relay:text-[14px]"
                     onClick={() => {
                       setDisplayCurrency(false)
                       setInputValue('1000', false)
@@ -438,9 +438,9 @@ const OnrampWidget: FC<OnrampWidgetProps> = ({
             </Flex>
             <Flex
               direction="column"
-              className="relay-w-full relay-overflow-hidden relay-p-4 relay-rounded-widget-card relay-bg-[var(--relay-colors-widget-background)] relay-border-widget-card relay-mb-[var(--relay-spacing-widget-card-section-gutter)]"
+              className="relay:w-full relay:overflow-hidden relay:p-4 relay:rounded-widget-card relay:bg-[var(--relay-colors-widget-background)] relay:border-widget-card relay:mb-[var(--relay-spacing-widget-card-section-gutter)]"
             >
-              <Flex justify="between" align="center" className="relay-mb-2">
+              <Flex justify="between" align="center" className="relay:mb-2">
                 <Text color="subtle" style="subtitle2">
                   Recipient
                 </Text>
@@ -484,14 +484,14 @@ const OnrampWidget: FC<OnrampWidgetProps> = ({
                     }
                     corners="pill"
                     size="none"
-                    className="relay-flex relay-items-center relay-px-2 relay-py-1"
+                    className="relay:flex relay:items-center relay:px-2 relay:py-1"
                     onClick={() => {
                       setAddressModalOpen(true)
                       onAnalyticEvent?.(EventNames.SWAP_ADDRESS_MODAL_CLICKED)
                     }}
                   >
                     {isValidRecipient && !isRecipientLinked ? (
-                      <Box className="relay-text-[color:var(--relay-colors-amber11)]">
+                      <Box className="relay:text-[color:var(--relay-colors-amber11)]">
                         <FontAwesomeIcon
                           icon={faClipboard}
                           width={16}
@@ -503,8 +503,8 @@ const OnrampWidget: FC<OnrampWidgetProps> = ({
                       style="subtitle2"
                       className={
                         isValidRecipient && !isRecipientLinked
-                          ? 'relay-text-[color:var(--relay-colors-amber11)]'
-                          : 'relay-text-[color:var(--relay-colors-anchor-color)]'
+                          ? 'relay:text-[color:var(--relay-colors-amber11)]'
+                          : 'relay:text-[color:var(--relay-colors-anchor-color)]'
                       }
                     >
                       {!isValidRecipient ? `Enter Address` : toDisplayName}
@@ -517,9 +517,9 @@ const OnrampWidget: FC<OnrampWidgetProps> = ({
                   Paying with
                 </Text>
                 <Flex
-                  className="relay-items-center relay-gap-2 relay-ml-auto relay-mr-2 relay-text-[color:var(--relay-colors-gray9)]"
+                  className="relay:items-center relay:gap-2 relay:ml-auto relay:mr-2 relay:text-[color:var(--relay-colors-gray9)]"
                 >
-                  <FontAwesomeIcon className="relay-w-[16px]" icon={faCreditCard} />
+                  <FontAwesomeIcon style={{ width: 16 }} icon={faCreditCard} />
                   <Text style="subtitle2">Card</Text>
                 </Flex>
                 {/* Hiding this until issues are resolved with MoonPay
@@ -532,7 +532,7 @@ const OnrampWidget: FC<OnrampWidgetProps> = ({
             </Flex>
             <Button
               cta={true}
-              className="relay-w-full relay-justify-center"
+              className="relay:w-full relay:justify-center"
               disabled={notEnoughFiat}
               onClick={() => {
                 if (!recipient && toChainWalletVMSupported) {
diff --git a/packages/ui/src/components/widgets/PriceImpactTooltip.tsx b/packages/ui/src/components/widgets/PriceImpactTooltip.tsx
index eeeacff44..33947610b 100644
--- a/packages/ui/src/components/widgets/PriceImpactTooltip.tsx
+++ b/packages/ui/src/components/widgets/PriceImpactTooltip.tsx
@@ -22,14 +22,14 @@ export const PriceImpactTooltip: FC<PriceImpactTooltipProps> = ({
   return (
     <Tooltip
       content={
-        <Flex className="relay-min-w-[200px]" direction="column">
-          <Flex align="center" className="relay-w-full">
-            <Text style="subtitle3" className="relay-mr-auto">
+        <Flex className="relay:min-w-[200px]" direction="column">
+          <Flex align="center" className="relay:w-full">
+            <Text style="subtitle3" className="relay:mr-auto">
               Total Price Impact{' '}
             </Text>
             <Text
               style="subtitle3"
-              className="relay-mr-1 relay-ml-2"
+              className="relay:mr-1 relay:ml-2"
               color={feeBreakdown?.totalFees?.priceImpactColor}
             >
               {feeBreakdown?.totalFees.priceImpact}
@@ -42,10 +42,10 @@ export const PriceImpactTooltip: FC<PriceImpactTooltipProps> = ({
             </Text>
           </Flex>
           <div
-            className="relay-w-full relay-h-px relay-bg-[var(--relay-colors-slate-6)] relay-my-2"
+            className="relay:w-full relay:h-px relay:bg-[var(--relay-colors-slate-6)] relay:my-2"
           />
-          <Flex align="center" className="relay-w-full">
-            <Text style="subtitle3" color="subtle" className="relay-mr-auto">
+          <Flex align="center" className="relay:w-full">
+            <Text style="subtitle3" color="subtle" className="relay:mr-auto">
               Swap Impact
             </Text>
             <Text
@@ -60,8 +60,8 @@ export const PriceImpactTooltip: FC<PriceImpactTooltipProps> = ({
               return null
             }
             return (
-              <Flex key={fee.id} align="center" className="relay-w-full">
-                <Text style="subtitle3" color="subtle" className="relay-mr-auto">
+              <Flex key={fee.id} align="center" className="relay:w-full">
+                <Text style="subtitle3" color="subtle" className="relay:mr-auto">
                   {fee.name}
                 </Text>
                 {feeBreakdown.isGasSponsored && fee.usd.value === 0 ? (
@@ -82,7 +82,7 @@ export const PriceImpactTooltip: FC<PriceImpactTooltipProps> = ({
             href="https://docs.relay.link/references/api/api_core_concepts/fees#relay-fees"
             target="_blank"
             rel="noopener noreferrer"
-            className="relay-text-[color:var(--relay-colors-primary11)] !relay-text-[12px]"
+            className="relay:text-[color:var(--relay-colors-primary11)] relay:!text-[12px]"
           >
             Learn more about the fees
           </Anchor>
diff --git a/packages/ui/src/components/widgets/SwapButton.tsx b/packages/ui/src/components/widgets/SwapButton.tsx
index 124b2637b..e55a4febc 100644
--- a/packages/ui/src/components/widgets/SwapButton.tsx
+++ b/packages/ui/src/components/widgets/SwapButton.tsx
@@ -97,8 +97,8 @@ const SwapButton: FC<SwapButtonProps> = ({
     return (
       <Button
         className={cn(
-          'relay-justify-center relay-w-full',
-          !tokenWidgetMode && 'relay-normal-case'
+          'relay:justify-center relay:w-full',
+          !tokenWidgetMode && 'relay:normal-case'
         )}
         color={showHighPriceImpactWarning ? 'error' : 'primary'}
         aria-label={context}
@@ -120,8 +120,8 @@ const SwapButton: FC<SwapButtonProps> = ({
     <Button
       cta={true}
       className={cn(
-        'relay-justify-center relay-w-full',
-        !tokenWidgetMode && 'relay-normal-case'
+        'relay:justify-center relay:w-full',
+        !tokenWidgetMode && 'relay:normal-case'
       )}
       aria-label="Connect wallet"
       onClick={() => {
diff --git a/packages/ui/src/components/widgets/SwapWidget/GasTopUpSection.tsx b/packages/ui/src/components/widgets/SwapWidget/GasTopUpSection.tsx
index 35d9e4b78..bb022c9fd 100644
--- a/packages/ui/src/components/widgets/SwapWidget/GasTopUpSection.tsx
+++ b/packages/ui/src/components/widgets/SwapWidget/GasTopUpSection.tsx
@@ -39,7 +39,7 @@ const GasTopUpSection: FC<Props> = ({
   return (
     <Pill
       color="primary"
-      className="relay-flex relay-items-center relay-cursor-pointer relay-self-start"
+      className="relay:flex relay:items-center relay:cursor-pointer relay:self-start"
       onClick={() => {
         onGasTopUpEnabled(!gasTopUpEnabled)
       }}
@@ -48,7 +48,7 @@ const GasTopUpSection: FC<Props> = ({
         <>
           <Text
             style="subtitle2"
-            className="relay-mr-2"
+            className="relay:mr-2"
             color="primary12"
           >
             +
@@ -72,7 +72,7 @@ const GasTopUpSection: FC<Props> = ({
         <>
           <Text
             style="subtitle2"
-            className="relay-mr-[6px]"
+            className="relay:mr-[6px]"
             color="primary12"
           >
             Add Gas (Balance:{' '}
diff --git a/packages/ui/src/components/widgets/SwapWidget/PriceImpact.tsx b/packages/ui/src/components/widgets/SwapWidget/PriceImpact.tsx
index 80777f0ac..e2a2021f7 100644
--- a/packages/ui/src/components/widgets/SwapWidget/PriceImpact.tsx
+++ b/packages/ui/src/components/widgets/SwapWidget/PriceImpact.tsx
@@ -21,7 +21,7 @@ export const PriceImpact: FC<{
       quote?.details?.totalImpact?.percent === '0'
     ) {
       return (
-        <Flex className="relay-gap-[2px]">
+        <Flex className="relay:gap-[2px]">
           <Text style="subtitle3" color="subtle">
             (
           </Text>
@@ -31,7 +31,7 @@ export const PriceImpact: FC<{
           <Text
             style="subtitle3"
             color="subtle"
-            className="relay-line-through"
+            className="relay:line-through"
           >
             0.01%
           </Text>
@@ -42,7 +42,7 @@ export const PriceImpact: FC<{
       )
     } else if (feeBreakdown?.isGasSponsored) {
       return (
-        <Flex className="relay-gap-[2px]">
+        <Flex className="relay:gap-[2px]">
           <Text style="subtitle3" color="subtle">
             (
           </Text>
diff --git a/packages/ui/src/components/widgets/SwapWidget/index.tsx b/packages/ui/src/components/widgets/SwapWidget/index.tsx
index bac45adc5..445999c5c 100644
--- a/packages/ui/src/components/widgets/SwapWidget/index.tsx
+++ b/packages/ui/src/components/widgets/SwapWidget/index.tsx
@@ -741,16 +741,16 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                 return (
                   <Flex
                     direction="column"
-                    className="relay-w-full relay-overflow-hidden relay-min-w-[320px] relay-max-w-[408px]"
+                    className="relay:w-full relay:overflow-hidden relay:min-w-[320px] relay:max-w-[408px]"
                   >
                     <TokenSelectorContainer
-                      className="relay-bg-[var(--relay-colors-widget-background)]"
+                      className="relay:bg-[var(--relay-colors-widget-background)]"
                       id={'from-token-section'}
                     >
                       <Flex
                         align="center"
                         justify="between"
-                        className="relay-gap-2 relay-w-full"
+                        className="relay:gap-2 relay:w-full"
                       >
                         <Text style="subtitle2" color="subtle">
                           Sell
@@ -790,7 +790,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                       <Flex
                         align="center"
                         justify="between"
-                        className="relay-gap-4 relay-w-full"
+                        className="relay:gap-4 relay:w-full"
                       >
                         <AmountInput
                           autoFocus={!disableInputAutoFocus}
@@ -827,10 +827,10 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                             onAnalyticEvent?.(EventNames.SWAP_INPUT_FOCUSED)
                           }}
                           className={cn(
-                            'relay-font-bold relay-text-[32px] relay-leading-[36px] relay-py-0',
+                            'relay:font-bold relay:text-[32px] relay:leading-[36px] relay:py-0',
                             isFetchingQuote && tradeType === 'EXPECTED_OUTPUT'
-                              ? 'relay-text-[color:var(--relay-colors-text-subtle)] placeholder:relay-text-[color:var(--relay-colors-text-subtle)]'
-                              : 'relay-text-[color:var(--relay-colors-input-color)] placeholder:relay-text-[color:var(--relay-colors-input-color)]'
+                              ? 'relay:text-[color:var(--relay-colors-text-subtle)] relay:placeholder:text-[color:var(--relay-colors-text-subtle)]'
+                              : 'relay:text-[color:var(--relay-colors-input-color)] relay:placeholder:text-[color:var(--relay-colors-input-color)]'
                           )}
                         />
                         <TokenSelector
@@ -876,7 +876,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                           }
                           popularChainIds={popularChainIds}
                           trigger={
-                            <div className="relay-w-max">
+                            <div className="relay:w-max">
                               <TokenTrigger
                                 token={fromToken}
                                 locked={lockFromToken}
@@ -889,16 +889,16 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                       </Flex>
                       <Flex
                         direction="column"
-                        className="relay-gap-3 relay-w-full"
+                        className="relay:gap-3 relay:w-full"
                       >
                         <Flex
                           align="center"
                           justify="between"
-                          className="relay-gap-3 relay-w-full"
+                          className="relay:gap-3 relay:w-full"
                         >
                           <Flex
                             align="center"
-                            className="relay-gap-[4px] hover:relay-cursor-pointer"
+                            className="relay:gap-[4px] relay:hover:cursor-pointer"
                             onClick={() => {
                               toggleInputMode()
                             }}
@@ -906,7 +906,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                             <Text
                               style="subtitle3"
                               color="subtleSecondary"
-                              className="relay-min-h-[18px] relay-flex relay-items-center"
+                              className="relay:min-h-[18px] relay:flex relay:items-center"
                             >
                               {isUsdInputMode ? (
                                 fromToken ? (
@@ -919,7 +919,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                                       `${formatNumber(amountInputValue, 4, false)} ${fromToken.symbol}`
                                     ) : (
                                       <Box
-                                        className="relay-w-[45px] relay-h-[12px] relay-bg-[var(--relay-colors-gray7)] relay-rounded-[var(--relay-radii-widget-border-radius)]"
+                                        className="relay:w-[45px] relay:h-[12px] relay:bg-[var(--relay-colors-gray7)] relay:rounded-[var(--relay-radii-widget-border-radius)]"
                                       />
                                     )
                                   ) : (
@@ -937,7 +937,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                                 amountInputValue &&
                                 Number(amountInputValue) > 0 ? (
                                 <Box
-                                  className="relay-w-[45px] relay-h-[12px] relay-bg-[var(--relay-colors-gray7)] relay-rounded-[var(--relay-radii-widget-border-radius)]"
+                                  className="relay:w-[45px] relay:h-[12px] relay:bg-[var(--relay-colors-gray7)] relay:rounded-[var(--relay-radii-widget-border-radius)]"
                                 />
                               ) : inputAmountUsd &&
                                 inputAmountUsd > 0 &&
@@ -952,7 +952,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                               aria-label="Switch Input Mode"
                               size="none"
                               color="ghost"
-                              className="relay-self-center relay-justify-center relay-w-[20px] relay-h-[20px] relay-rounded-[100px] relay-p-[4px]"
+                              className="relay:self-center relay:justify-center relay:w-[20px] relay:h-[20px] relay:rounded-[100px] relay:p-[4px]"
                               style={{ color: 'var(--relay-colors-gray9)', backgroundColor: 'var(--relay-colors-gray3)' }}
                               onClick={toggleInputMode}
                             >
@@ -962,7 +962,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
 
                           <Flex
                             align="center"
-                            className="relay-gap-3 relay-ml-auto relay-h-[23px]"
+                            className="relay:gap-3 relay:ml-auto relay:h-[23px]"
                           >
                             {fromToken ? (
                               <BalanceDisplay
@@ -980,7 +980,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                                 pending={fromBalancePending}
                               />
                             ) : (
-                              <Flex className="relay-h-[18px]" />
+                              <Flex className="relay:h-[18px]" />
                             )}
 
                             {/* Desktop Percentage Buttons - Hidden on Mobile */}
@@ -988,7 +988,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                             (fromChain?.vmType === 'evm' ||
                               fromChain?.vmType === 'svm') ? (
                               <Box
-                                className="relay-hidden sm:relay-block"
+                                className="relay:hidden relay:sm:block"
                               >
                                 <PercentageButtons
                                   balance={fromBalance}
@@ -1009,7 +1009,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                         (fromChain?.vmType === 'evm' ||
                           fromChain?.vmType === 'svm') ? (
                           <Box
-                            className="relay-block sm:relay-hidden"
+                            className="relay:block relay:sm:hidden"
                           >
                             <PercentageButtons
                               balance={fromBalance}
@@ -1025,7 +1025,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                       </Flex>
                     </TokenSelectorContainer>
                     <Box
-                      className="relay-relative relay-my-[-13px] relay-mx-auto relay-h-[32px] relay-w-[32px]"
+                      className="relay:relative relay:my-[-13px] relay:mx-auto relay:h-[32px] relay:w-[32px]"
                     >
                       {hasLockedToken ||
                       ((isSvmSwap || isBvmSwap) &&
@@ -1034,7 +1034,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                           aria-label="Swap Tokens Direction"
                           size="none"
                           color="white"
-                          className="relay-mt-[4px] relay-text-[color:var(--relay-colors-gray9)] relay-self-center relay-justify-center relay-w-full relay-h-full relay-z-10 relay-border-[length:var(--relay-borders-widget-swap-currency-button-border-width)] relay-border-solid !relay-border-[color:var(--relay-colors-widget-swap-currency-button-border-color)] relay-rounded-swap-btn hover:relay-text-[color:var(--relay-colors-gray11)] hover:relay-bg-[var(--relay-colors-gray-2)]"
+                          className="relay:mt-[4px] relay:text-[color:var(--relay-colors-gray9)] relay:self-center relay:justify-center relay:w-full relay:h-full relay:z-10 relay:border-[length:var(--relay-borders-widget-swap-currency-button-border-width)] relay:border-solid relay:!border-[color:var(--relay-colors-widget-swap-currency-button-border-color)] relay:rounded-swap-btn relay:hover:text-[color:var(--relay-colors-gray11)] relay:hover:bg-[var(--relay-colors-gray-2)]"
                           onClick={() => {
                             if (fromToken || toToken) {
                               if (isUsdInputMode) {
@@ -1081,11 +1081,11 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                       )}
                     </Box>
                     <TokenSelectorContainer
-                      className="relay-bg-[var(--relay-colors-widget-background)] relay-mb-[var(--relay-spacing-widget-card-section-gutter)]"
+                      className="relay:bg-[var(--relay-colors-widget-background)] relay:mb-[var(--relay-spacing-widget-card-section-gutter)]"
                       id={'to-token-section'}
                     >
                       <Flex
-                        className="relay-w-full"
+                        className="relay:w-full"
                         align="center"
                         justify="between"
                       >
@@ -1136,7 +1136,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                             }
                             corners="pill"
                             size="none"
-                            className="relay-flex relay-items-center relay-px-2 relay-py-1"
+                            className="relay:flex relay:items-center relay:px-2 relay:py-1"
                             onClick={() => {
                               setAddressModalOpen(true)
                               onAnalyticEvent?.(
@@ -1147,7 +1147,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                             {isValidToAddress &&
                             multiWalletSupportEnabled &&
                             !isRecipientLinked ? (
-                              <Box className="relay-text-[color:var(--relay-colors-amber11)]">
+                              <Box className="relay:text-[color:var(--relay-colors-amber11)]">
                                 <FontAwesomeIcon
                                   icon={faClipboard}
                                   width={16}
@@ -1161,8 +1161,8 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                                 isValidToAddress &&
                                 multiWalletSupportEnabled &&
                                 !isRecipientLinked
-                                  ? 'relay-text-[color:var(--relay-colors-amber11)]'
-                                  : 'relay-text-[color:var(--relay-colors-anchor-color)]'
+                                  ? 'relay:text-[color:var(--relay-colors-amber11)]'
+                                  : 'relay:text-[color:var(--relay-colors-anchor-color)]'
                               )}
                             >
                               {!isValidToAddress
@@ -1176,7 +1176,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                       <Flex
                         align="center"
                         justify="between"
-                        className="relay-gap-4 relay-w-full"
+                        className="relay:gap-4 relay:w-full"
                       >
                         <AmountInput
                           prefixSymbol={isUsdInputMode ? '$' : undefined}
@@ -1212,10 +1212,10 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                             onAnalyticEvent?.(EventNames.SWAP_OUTPUT_FOCUSED)
                           }}
                           className={cn(
-                            'relay-font-bold relay-text-[32px] disabled:relay-cursor-not-allowed disabled:relay-text-[color:var(--relay-colors-gray10)] disabled:placeholder:relay-text-[color:var(--relay-colors-gray10)]',
+                            'relay:font-bold relay:text-[32px] relay:disabled:cursor-not-allowed relay:disabled:text-[color:var(--relay-colors-gray10)] relay:disabled:placeholder:text-[color:var(--relay-colors-gray10)]',
                             isFetchingQuote && tradeType === 'EXACT_INPUT'
-                              ? 'relay-text-[color:var(--relay-colors-text-subtle)] placeholder:relay-text-[color:var(--relay-colors-text-subtle)]'
-                              : 'relay-text-[color:var(--relay-colors-input-color)] placeholder:relay-text-[color:var(--relay-colors-input-color)]'
+                              ? 'relay:text-[color:var(--relay-colors-text-subtle)] relay:placeholder:text-[color:var(--relay-colors-text-subtle)]'
+                              : 'relay:text-[color:var(--relay-colors-input-color)] relay:placeholder:text-[color:var(--relay-colors-input-color)]'
                           )}
                         />
                         <TokenSelector
@@ -1243,7 +1243,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                           context="to"
                           multiWalletSupportEnabled={multiWalletSupportEnabled}
                           trigger={
-                            <div className="relay-w-max">
+                            <div className="relay:w-max">
                               <TokenTrigger
                                 token={toToken}
                                 locked={lockToToken}
@@ -1293,11 +1293,11 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                       <Flex
                         align="center"
                         justify="between"
-                        className="relay-gap-3 relay-w-full"
+                        className="relay:gap-3 relay:w-full"
                       >
                         <Flex
                           align="center"
-                          className="relay-gap-1 relay-min-h-[18px]"
+                          className="relay:gap-1 relay:min-h-[18px]"
                         >
                           <Text style="subtitle3" color="subtleSecondary">
                             {isUsdInputMode ? (
@@ -1310,7 +1310,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                                     `${formatNumber(amountOutputValue, 4, false)} ${toToken.symbol}`
                                   ) : (
                                     <Box
-                                      className="relay-w-[45px] relay-h-[12px] relay-bg-[var(--relay-colors-gray7)] relay-rounded-[var(--relay-radii-widget-border-radius)]"
+                                      className="relay:w-[45px] relay:h-[12px] relay:bg-[var(--relay-colors-gray7)] relay:rounded-[var(--relay-radii-widget-border-radius)]"
                                     />
                                   )
                                 ) : (
@@ -1329,7 +1329,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                               amountOutputValue &&
                               Number(amountOutputValue) > 0 ? (
                               <Box
-                                className="relay-w-[45px] relay-h-[12px] relay-bg-[var(--relay-colors-gray7)] relay-rounded-[var(--relay-radii-widget-border-radius)]"
+                                className="relay:w-[45px] relay:h-[12px] relay:bg-[var(--relay-colors-gray7)] relay:rounded-[var(--relay-radii-widget-border-radius)]"
                               />
                             ) : toToken &&
                               outputAmountUsd &&
@@ -1348,7 +1348,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                             quote={quote}
                           />
                         </Flex>
-                        <Flex className="relay-ml-auto">
+                        <Flex className="relay:ml-auto">
                           {toToken ? (
                             <BalanceDisplay
                               isLoading={isLoadingToBalance}
@@ -1364,7 +1364,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                               pending={toBalancePending}
                             />
                           ) : (
-                            <Flex className="relay-h-[18px]" />
+                            <Flex className="relay:h-[18px]" />
                           )}
                         </Flex>
                       </Flex>
@@ -1395,7 +1395,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                       isCapacityExceededError={isCapacityExceededError}
                       isCouldNotExecuteError={isCouldNotExecuteError}
                       relayerFeeProportion={relayerFeeProportion}
-                      containerClassName="relay-mb-[var(--relay-spacing-widget-card-section-gutter)]"
+                      containerClassName="relay:mb-[var(--relay-spacing-widget-card-section-gutter)]"
                       recipientWalletSupportsChain={
                         recipientWalletSupportsChain
                       }
diff --git a/packages/ui/src/components/widgets/TokenSelectorContainer.tsx b/packages/ui/src/components/widgets/TokenSelectorContainer.tsx
index dea1b740f..86912aff8 100644
--- a/packages/ui/src/components/widgets/TokenSelectorContainer.tsx
+++ b/packages/ui/src/components/widgets/TokenSelectorContainer.tsx
@@ -11,7 +11,7 @@ const TokenSelectorContainer: FC<
       justify="between"
       id={id}
       className={cn(
-        'relay-w-full relay-flex relay-flex-col relay-items-start relay-bg-[var(--relay-colors-widget-card-background)] relay-border-widget-card relay-gap-3 relay-p-3 relay-rounded-[var(--relay-radii-widget-card-border-radius)]',
+        'relay:w-full relay:flex relay:flex-col relay:items-start relay:bg-[var(--relay-colors-widget-card-background)] relay:border-widget-card relay:gap-3 relay:p-3 relay:rounded-[var(--relay-radii-widget-card-border-radius)]',
         className
       )}
     >
diff --git a/packages/ui/src/components/widgets/WidgetErrorWell.tsx b/packages/ui/src/components/widgets/WidgetErrorWell.tsx
index e650562ae..d53007279 100644
--- a/packages/ui/src/components/widgets/WidgetErrorWell.tsx
+++ b/packages/ui/src/components/widgets/WidgetErrorWell.tsx
@@ -72,14 +72,14 @@ export const WidgetErrorWell: FC<Props> = ({
       <Flex
         align="center"
         justify="between"
-        className="relay-gap-2 relay-p-3 relay-w-full relay-rounded-[var(--relay-radii-widget-card-border-radius)] relay-bg-[var(--relay-colors-widget-background)] relay-border-widget-card relay-overflow-hidden relay-mb-[var(--relay-spacing-widget-card-section-gutter)]"
+        className="relay:gap-2 relay:p-3 relay:w-full relay:rounded-[var(--relay-radii-widget-card-border-radius)] relay:bg-[var(--relay-colors-widget-background)] relay:border-widget-card relay:overflow-hidden relay:mb-[var(--relay-spacing-widget-card-section-gutter)]"
       >
         <Text style="subtitle2">Route</Text>
-        <Flex align="center" className="relay-gap-1">
+        <Flex align="center" className="relay:gap-1">
           <Text style="subtitle2" color="subtle">
             No available routes
           </Text>
-          <Box className="relay-text-[color:var(--relay-colors-gray11)] relay-w-[14px] relay-shrink-0">
+          <Box className="relay:text-[color:var(--relay-colors-gray11)] relay:w-[14px] relay:shrink-0">
             <FontAwesomeIcon icon={faRoute} width={14} />
           </Box>
         </Flex>
@@ -106,12 +106,12 @@ export const WidgetErrorWell: FC<Props> = ({
       <Flex
         align="center"
         className={cn(
-          'relay-gap-2 relay-p-3 relay-bg-[var(--relay-colors-amber2)] relay-border relay-border-solid relay-border-[var(--relay-colors-amber4)] relay-rounded-[12px] relay-mb-3',
+          'relay:gap-2 relay:p-3 relay:bg-[var(--relay-colors-amber2)] relay:border relay:border-solid relay:border-[var(--relay-colors-amber4)] relay:rounded-[12px] relay:mb-3',
           containerClassName
         )}
         id={'widget-error-well-section'}
       >
-        <Box className="relay-text-[color:var(--relay-colors-amber9)]">
+        <Box className="relay:text-[color:var(--relay-colors-amber9)]">
           <FontAwesomeIcon icon={faExclamationCircle} width={16} />
         </Box>
         <Text style="subtitle3" color="warning">
@@ -127,12 +127,12 @@ export const WidgetErrorWell: FC<Props> = ({
       <Flex
         align="center"
         className={cn(
-          'relay-gap-2 relay-p-3 relay-bg-[var(--relay-colors-red2)] relay-border relay-border-solid relay-border-[var(--relay-colors-red4)] relay-rounded-[12px] relay-mb-3',
+          'relay:gap-2 relay:p-3 relay:bg-[var(--relay-colors-red2)] relay:border relay:border-solid relay:border-[var(--relay-colors-red4)] relay:rounded-[12px] relay:mb-3',
           containerClassName
         )}
         id={'widget-error-well-section'}
       >
-        <Box className="relay-text-[color:var(--relay-colors-red10)]">
+        <Box className="relay:text-[color:var(--relay-colors-red10)]">
           <FontAwesomeIcon icon={faExclamationCircle} width={16} />
         </Box>
         <Text style="subtitle3" color="error">
@@ -153,7 +153,7 @@ export const WidgetErrorWell: FC<Props> = ({
         content={
           <Text
             style="subtitle3"
-            className="relay-max-w-[215px] relay-inline-block"
+            className="relay:max-w-[215px] relay:inline-block"
           >
             We recommend increasing the amount or waiting for the gas fee to be
             lower.
@@ -163,12 +163,12 @@ export const WidgetErrorWell: FC<Props> = ({
         <Flex
           align="center"
           className={cn(
-            'relay-gap-2 relay-py-3 relay-px-3 relay-bg-[var(--relay-colors-amber2)] relay-border relay-border-solid relay-border-[var(--relay-colors-amber4)] relay-rounded-[12px] relay-mb-3',
+            'relay:gap-2 relay:py-3 relay:px-3 relay:bg-[var(--relay-colors-amber2)] relay:border relay:border-solid relay:border-[var(--relay-colors-amber4)] relay:rounded-[12px] relay:mb-3',
             containerClassName
           )}
           id={'widget-error-well-section'}
         >
-          <Box className="relay-text-[color:var(--relay-colors-amber10)]">
+          <Box className="relay:text-[color:var(--relay-colors-amber10)]">
             <FontAwesomeIcon icon={faExclamationCircle} width={16} />
           </Box>
           <Text style="subtitle3" color="warning">
@@ -184,12 +184,12 @@ export const WidgetErrorWell: FC<Props> = ({
       <Flex
         align="center"
         className={cn(
-          'relay-gap-2 relay-py-2 relay-px-3 relay-bg-[var(--relay-colors-amber2)] relay-border relay-border-solid relay-border-[var(--relay-colors-amber4)] relay-rounded-[12px] relay-mb-3',
+          'relay:gap-2 relay:py-2 relay:px-3 relay:bg-[var(--relay-colors-amber2)] relay:border relay:border-solid relay:border-[var(--relay-colors-amber4)] relay:rounded-[12px] relay:mb-3',
           containerClassName
         )}
         id={'widget-error-well-section'}
       >
-        <Box className="relay-text-[color:var(--relay-colors-amber10)]">
+        <Box className="relay:text-[color:var(--relay-colors-amber10)]">
           <FontAwesomeIcon icon={faExclamationCircle} width={16} />
         </Box>
         <Text style="subtitle3" color="warning">
@@ -205,12 +205,12 @@ export const WidgetErrorWell: FC<Props> = ({
       <Flex
         align="center"
         className={cn(
-          'relay-gap-2 relay-py-2 relay-px-3 relay-bg-[var(--relay-colors-amber2)] relay-border relay-border-solid relay-border-[var(--relay-colors-amber4)] relay-rounded-[12px] relay-mb-3',
+          'relay:gap-2 relay:py-2 relay:px-3 relay:bg-[var(--relay-colors-amber2)] relay:border relay:border-solid relay:border-[var(--relay-colors-amber4)] relay:rounded-[12px] relay:mb-3',
           containerClassName
         )}
         id={'widget-error-well-section'}
       >
-        <Box className="relay-text-[color:var(--relay-colors-amber10)]">
+        <Box className="relay:text-[color:var(--relay-colors-amber10)]">
           <FontAwesomeIcon icon={faExclamationCircle} width={16} />
         </Box>
         <Text style="subtitle3" color="warning">
@@ -226,12 +226,12 @@ export const WidgetErrorWell: FC<Props> = ({
       <Flex
         align="center"
         className={cn(
-          'relay-gap-2 relay-py-3 relay-px-3 relay-bg-[var(--relay-colors-amber2)] relay-border relay-border-solid relay-border-[var(--relay-colors-amber4)] relay-rounded-[12px] relay-mb-3',
+          'relay:gap-2 relay:py-3 relay:px-3 relay:bg-[var(--relay-colors-amber2)] relay:border relay:border-solid relay:border-[var(--relay-colors-amber4)] relay:rounded-[12px] relay:mb-3',
           containerClassName
         )}
         id={'widget-error-well-section'}
       >
-        <Box className="relay-text-[color:var(--relay-colors-amber10)]">
+        <Box className="relay:text-[color:var(--relay-colors-amber10)]">
           <FontAwesomeIcon icon={faExclamationCircle} width={16} />
         </Box>
         <Text style="subtitle3" color="warning">
diff --git a/packages/ui/src/styles/base.css b/packages/ui/src/styles/base.css
index ccdaa1f66..bf36799b2 100644
--- a/packages/ui/src/styles/base.css
+++ b/packages/ui/src/styles/base.css
@@ -1,6 +1,67 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@layer theme, base, components, utilities;
+@import "tailwindcss/theme.css" layer(theme) prefix(relay);
+@import "tailwindcss/utilities.css" layer(utilities) prefix(relay);
+
+@custom-variant dark (&:where(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *));
+
+@theme {
+  --breakpoint-*: initial;
+  --breakpoint-sm: 600px;
+  --breakpoint-md: 900px;
+  --breakpoint-lg: 1200px;
+  --breakpoint-xl: 1400px;
+  --breakpoint-bp300: 300px;
+  --breakpoint-bp400: 400px;
+  --breakpoint-bp500: 500px;
+  --breakpoint-bp600: 600px;
+  --breakpoint-bp700: 700px;
+  --breakpoint-bp800: 800px;
+  --breakpoint-bp900: 900px;
+  --breakpoint-bp1000: 1000px;
+  --breakpoint-bp1100: 1100px;
+  --breakpoint-bp1200: 1200px;
+  --breakpoint-bp1300: 1300px;
+  --breakpoint-bp1400: 1400px;
+  --breakpoint-bp1500: 1500px;
+}
+
+@theme extend {
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 32px;
+  --spacing-6: 64px;
+  --spacing-widget-card-section-gutter: 6px;
+
+  --font-body: var(--relay-fonts-body);
+  --font-heading: var(--relay-fonts-heading);
+
+  --radius-widget: var(--relay-radii-widget-border-radius);
+  --radius-widget-card: var(--relay-radii-widget-card-border-radius);
+  --radius-modal: var(--relay-radii-modal-border-radius);
+  --radius-input: var(--relay-radii-input-border-radius);
+  --radius-dropdown: var(--relay-radii-dropdown-border-radius);
+  --radius-swap-btn: var(--relay-radii-widget-swap-currency-button-border-radius);
+
+  --shadow-widget: var(--relay-shadows-widget-box-shadow);
+
+  --animate-pulse: pulse 3s ease-in-out infinite;
+  --animate-pulse-shadow: pulse-shadow 1s ease-in-out infinite alternate;
+  --animate-spin: spin 1s linear infinite;
+  --animate-collapsible-down: collapsibleSlideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
+  --animate-collapsible-up: collapsibleSlideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
+  --animate-dialog-slide-up: dialog-slide-up 200ms ease-out;
+  --animate-dialog-slide-down: dialog-slide-down 200ms ease-in;
+  --animate-dialog-fade-in: dialog-fade-in 100ms linear;
+  --animate-dialog-fade-out: dialog-fade-out 100ms linear;
+  --animate-content-fade-in: content-fade-in 250ms cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-icon-pop-in: icon-pop-in 600ms cubic-bezier(0.22, 1, 0.36, 1);
+  --animate-scale-in: scale-in 200ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+  --animate-scale-out: scale-out 150ms ease-in forwards;
+  --animate-overlay-fade-in: overlay-fade-in 150ms ease-out;
+  --animate-overlay-fade-out: overlay-fade-out 150ms ease-in;
+}
 
 /* ===================================================================
    Keyframes
@@ -53,6 +114,14 @@
   to { opacity: 1; transform: translateY(0); }
 }
 
+@keyframes icon-pop-in {
+  0% { transform: scale(0); }
+  50% { transform: scale(1.12); }
+  70% { transform: scale(0.95); }
+  85% { transform: scale(1.03); }
+  100% { transform: scale(1); }
+}
+
 @keyframes scale-in {
   from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
   to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@@ -843,23 +912,25 @@
    These CSS variables contain full border declarations (width + style + color)
    and must be applied via the `border` shorthand property, not `border-width`.
    =================================================================== */
-@layer utilities {
-  .relay-border-widget-card {
-    border: var(--relay-borders-widget-card-border);
-  }
-  .relay-border-widget {
-    border: var(--relay-borders-widget-border);
-  }
-  .relay-border-modal {
-    border: var(--relay-borders-modal-border);
-  }
-  .relay-border-dropdown {
-    border: var(--relay-borders-dropdown-border);
-  }
-  .relay-cta-font-style:not(:disabled) {
+@utility border-widget-card {
+  border: var(--relay-borders-widget-card-border);
+}
+@utility border-widget {
+  border: var(--relay-borders-widget-border);
+}
+@utility border-modal {
+  border: var(--relay-borders-modal-border);
+}
+@utility border-dropdown {
+  border: var(--relay-borders-dropdown-border);
+}
+@utility cta-font-style {
+  &:not(:disabled) {
     font-style: var(--relay-fonts-button-cta-font-style);
   }
-  .relay-placeholder-ellipsis::placeholder {
+}
+@utility placeholder-ellipsis {
+  &::placeholder {
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
@@ -869,8 +940,9 @@
 /* Inset focus ring for keyboard-navigable list items.
    Uses :focus (not :focus-visible) for Firefox compatibility —
    Firefox won't trigger :focus-visible on programmatic .focus() calls. */
-.relay-focus-inset:is(:focus, [data-focus]) {
-  box-shadow: inset 0 0 0 2px var(--relay-colors-focus-color) !important;
-  outline: none !important;
-  --tw-ring-shadow: 0 0 #0000 !important;
+@utility focus-inset {
+  &:is(:focus, [data-focus]) {
+    box-shadow: inset 0 0 0 2px var(--relay-colors-focus-color) !important;
+    outline: none !important;
+  }
 }
diff --git a/packages/ui/src/utils/cn.ts b/packages/ui/src/utils/cn.ts
index d32b0fe65..41c031dd5 100644
--- a/packages/ui/src/utils/cn.ts
+++ b/packages/ui/src/utils/cn.ts
@@ -1,5 +1,9 @@
 import { type ClassValue, clsx } from 'clsx'
-import { twMerge } from 'tailwind-merge'
+import { extendTailwindMerge } from 'tailwind-merge'
+
+const twMerge = extendTailwindMerge({
+  prefix: 'relay',
+})
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
diff --git a/packages/ui/src/utils/steps.ts b/packages/ui/src/utils/steps.ts
index 17a34933d..270c0987d 100644
--- a/packages/ui/src/utils/steps.ts
+++ b/packages/ui/src/utils/steps.ts
@@ -615,8 +615,8 @@ export const formatTransactionSteps = ({
     )
 
     result.push({
-      id: 'relay-processing',
-      action: getDisplayActionText('relay-processing'),
+      id: 'relay:processing',
+      action: getDisplayActionText('relay:processing'),
       isActive: Boolean(relayStepActive),
       isCompleted: Boolean(relayStepCompleted),
       isWalletAction: false,
diff --git a/packages/ui/tailwind.config.ts b/packages/ui/tailwind.config.ts
deleted file mode 100644
index a2806d9ab..000000000
--- a/packages/ui/tailwind.config.ts
+++ /dev/null
@@ -1,140 +0,0 @@
-import type { Config } from 'tailwindcss'
-
-export default {
-  prefix: 'relay-',
-  darkMode: ['class', '[data-theme="dark"]'],
-  content: ['./src/**/*.{ts,tsx}'],
-  theme: {
-    screens: {
-      sm: '600px',
-      md: '900px',
-      lg: '1200px',
-      xl: '1400px',
-      bp300: '300px',
-      bp400: '400px',
-      bp500: '500px',
-      bp600: '600px',
-      bp700: '700px',
-      bp800: '800px',
-      bp900: '900px',
-      bp1000: '1000px',
-      bp1100: '1100px',
-      bp1200: '1200px',
-      bp1300: '1300px',
-      bp1400: '1400px',
-      bp1500: '1500px'
-    },
-    extend: {
-      spacing: {
-        1: '4px',
-        2: '8px',
-        3: '12px',
-        4: '16px',
-        5: '32px',
-        6: '64px',
-        'widget-card-section-gutter': '6px'
-      },
-      fontFamily: {
-        body: 'var(--relay-fonts-body)',
-        heading: 'var(--relay-fonts-heading)'
-      },
-      borderRadius: {
-        widget: 'var(--relay-radii-widget-border-radius)',
-        'widget-card': 'var(--relay-radii-widget-card-border-radius)',
-        modal: 'var(--relay-radii-modal-border-radius)',
-        input: 'var(--relay-radii-input-border-radius)',
-        dropdown: 'var(--relay-radii-dropdown-border-radius)',
-        'swap-btn': 'var(--relay-radii-widget-swap-currency-button-border-radius)'
-      },
-      boxShadow: {
-        widget: 'var(--relay-shadows-widget-box-shadow)'
-      },
-      keyframes: {
-        pulse: {
-          '50%': { opacity: '0.5' }
-        },
-        'pulse-shadow': {
-          '0%': { boxShadow: '0 0 0 0px var(--relay-colors-primary4)' },
-          '100%': { boxShadow: '0 0 0 6px var(--relay-colors-primary4)' }
-        },
-        spin: {
-          '100%': { transform: 'rotate(360deg)' }
-        },
-        collapsibleSlideDown: {
-          from: { height: '0' },
-          to: { height: 'var(--radix-collapsible-content-height)' }
-        },
-        collapsibleSlideUp: {
-          from: { height: 'var(--radix-collapsible-content-height)' },
-          to: { height: '0' }
-        },
-        'dialog-slide-up': {
-          from: { opacity: '0', bottom: '-100%' },
-          to: { opacity: '1', bottom: '0' }
-        },
-        'dialog-slide-down': {
-          from: { opacity: '1', bottom: '0' },
-          to: { opacity: '0', bottom: '-100%' }
-        },
-        'dialog-fade-in': {
-          from: { opacity: '0' },
-          to: { opacity: '1' }
-        },
-        'dialog-fade-out': {
-          from: { opacity: '1' },
-          to: { opacity: '0' }
-        },
-        'content-fade-in': {
-          from: { opacity: '0', transform: 'translateY(4px)' },
-          to: { opacity: '1', transform: 'translateY(0)' }
-        },
-        'icon-pop-in': {
-          '0%': { transform: 'scale(0)' },
-          '50%': { transform: 'scale(1.12)' },
-          '70%': { transform: 'scale(0.95)' },
-          '85%': { transform: 'scale(1.03)' },
-          '100%': { transform: 'scale(1)' }
-        },
-        'scale-in': {
-          from: { opacity: '0', transform: 'translate(-50%, -50%) scale(0.95)' },
-          to: { opacity: '1', transform: 'translate(-50%, -50%) scale(1)' }
-        },
-        'scale-out': {
-          from: { opacity: '1', transform: 'translate(-50%, -50%) scale(1)' },
-          to: { opacity: '0', transform: 'translate(-50%, -50%) scale(0.95)' }
-        },
-        'overlay-fade-in': {
-          from: { opacity: '0' },
-          to: { opacity: '1' }
-        },
-        'overlay-fade-out': {
-          from: { opacity: '1' },
-          to: { opacity: '0' }
-        }
-      },
-      animation: {
-        pulse: 'pulse 3s ease-in-out infinite',
-        'pulse-shadow': 'pulse-shadow 1s ease-in-out infinite alternate',
-        spin: 'spin 1s linear infinite',
-        'collapsible-down':
-          'collapsibleSlideDown 300ms cubic-bezier(0.87, 0, 0.13, 1)',
-        'collapsible-up':
-          'collapsibleSlideUp 300ms cubic-bezier(0.87, 0, 0.13, 1)',
-        'dialog-slide-up': 'dialog-slide-up 200ms ease-out',
-        'dialog-slide-down': 'dialog-slide-down 200ms ease-in',
-        'dialog-fade-in': 'dialog-fade-in 100ms linear',
-        'dialog-fade-out': 'dialog-fade-out 100ms linear',
-        'content-fade-in': 'content-fade-in 250ms cubic-bezier(0.16, 1, 0.3, 1)',
-        'icon-pop-in': 'icon-pop-in 600ms cubic-bezier(0.22, 1, 0.36, 1)',
-        'scale-in': 'scale-in 200ms cubic-bezier(0.16, 1, 0.3, 1) forwards',
-        'scale-out': 'scale-out 150ms ease-in forwards',
-        'overlay-fade-in': 'overlay-fade-in 150ms ease-out',
-        'overlay-fade-out': 'overlay-fade-out 150ms ease-in'
-      }
-    }
-  },
-  corePlugins: {
-    preflight: false
-  },
-  plugins: []
-} satisfies Config
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1bc674d93..661425b0d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -151,8 +151,6 @@ importers:
         specifier: 5.4.5
         version: 5.4.5
 
-  packages/design-system: {}
-
   packages/hooks:
     dependencies:
       '@relayprotocol/relay-sdk':
@@ -347,7 +345,7 @@ importers:
         version: 5.4.5
       vitest:
         specifier: ^1.6.0
-        version: 1.6.1(@types/node@22.13.4)(@vitest/ui@1.6.1)(lightningcss@1.23.0)(terser@5.39.0)
+        version: 1.6.1(@types/node@22.13.4)(@vitest/ui@1.6.1)(lightningcss@1.31.1)(terser@5.39.0)
 
   packages/ui:
     dependencies:
@@ -427,8 +425,8 @@ importers:
         specifier: ^19.0.0
         version: 19.1.1(react@19.1.1)
       tailwind-merge:
-        specifier: ^2.2.0
-        version: 2.6.1
+        specifier: ^3.0.0
+        version: 3.5.0
       usehooks-ts:
         specifier: ^3.1.0
         version: 3.1.1(react@19.1.1)
@@ -442,6 +440,12 @@ importers:
       '@eslint/js':
         specifier: ^9.5.0
         version: 9.20.0
+      '@tailwindcss/cli':
+        specifier: ^4.0.0
+        version: 4.2.1
+      '@tailwindcss/postcss':
+        specifier: ^4.0.0
+        version: 4.2.1
       '@types/eslint__js':
         specifier: ^8.42.3
         version: 8.42.3
@@ -451,9 +455,6 @@ importers:
       '@types/react-dom':
         specifier: ^19.0.0
         version: 19.1.8(@types/react@19.1.11)
-      autoprefixer:
-        specifier: ^10.4.0
-        version: 10.4.24(postcss@8.5.3)
       eslint:
         specifier: ~8.57.0
         version: 8.57.1
@@ -479,8 +480,8 @@ importers:
         specifier: ^5.0.5
         version: 5.0.10
       tailwindcss:
-        specifier: ^3.4.0
-        version: 3.4.19
+        specifier: ^4.0.0
+        version: 4.2.1
       typescript:
         specifier: 5.4.5
         version: 5.4.5
@@ -1456,6 +1457,9 @@ packages:
     resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==}
     engines: {node: '>=6.0.0'}
 
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
   '@jridgewell/resolve-uri@3.1.2':
     resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
@@ -1470,6 +1474,9 @@ packages:
   '@jridgewell/sourcemap-codec@1.5.0':
     resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
 
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
   '@jridgewell/trace-mapping@0.3.25':
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
 
@@ -1803,6 +1810,94 @@ packages:
   '@openzeppelin/contracts@4.9.6':
     resolution: {integrity: sha512-xSmezSupL+y9VkHZJGDoCBpmnB2ogM13ccaYDWqJTfS3dbuHkgjuwDFUmaFauBCboQMGB/S5UqUl2y54X99BmA==}
 
+  '@parcel/watcher-android-arm64@2.5.6':
+    resolution: {integrity: sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  '@parcel/watcher-darwin-arm64@2.5.6':
+    resolution: {integrity: sha512-Z2ZdrnwyXvvvdtRHLmM4knydIdU9adO3D4n/0cVipF3rRiwP+3/sfzpAwA/qKFL6i1ModaabkU7IbpeMBgiVEA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@parcel/watcher-darwin-x64@2.5.6':
+    resolution: {integrity: sha512-HgvOf3W9dhithcwOWX9uDZyn1lW9R+7tPZ4sug+NGrGIo4Rk1hAXLEbcH1TQSqxts0NYXXlOWqVpvS1SFS4fRg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@parcel/watcher-freebsd-x64@2.5.6':
+    resolution: {integrity: sha512-vJVi8yd/qzJxEKHkeemh7w3YAn6RJCtYlE4HPMoVnCpIXEzSrxErBW5SJBgKLbXU3WdIpkjBTeUNtyBVn8TRng==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@parcel/watcher-linux-arm-glibc@2.5.6':
+    resolution: {integrity: sha512-9JiYfB6h6BgV50CCfasfLf/uvOcJskMSwcdH1PHH9rvS1IrNy8zad6IUVPVUfmXr+u+Km9IxcfMLzgdOudz9EQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+    libc: [glibc]
+
+  '@parcel/watcher-linux-arm-musl@2.5.6':
+    resolution: {integrity: sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm]
+    os: [linux]
+    libc: [musl]
+
+  '@parcel/watcher-linux-arm64-glibc@2.5.6':
+    resolution: {integrity: sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@parcel/watcher-linux-arm64-musl@2.5.6':
+    resolution: {integrity: sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@parcel/watcher-linux-x64-glibc@2.5.6':
+    resolution: {integrity: sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@parcel/watcher-linux-x64-musl@2.5.6':
+    resolution: {integrity: sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@parcel/watcher-win32-arm64@2.5.6':
+    resolution: {integrity: sha512-3ukyebjc6eGlw9yRt678DxVF7rjXatWiHvTXqphZLvo7aC5NdEgFufVwjFfY51ijYEWpXbqF5jtrK275z52D4Q==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@parcel/watcher-win32-ia32@2.5.6':
+    resolution: {integrity: sha512-k35yLp1ZMwwee3Ez/pxBi5cf4AoBKYXj00CZ80jUz5h8prpiaQsiRPKQMxoLstNuqe2vR4RNPEAEcjEFzhEz/g==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@parcel/watcher-win32-x64@2.5.6':
+    resolution: {integrity: sha512-hbQlYcCq5dlAX9Qx+kFb0FHue6vbjlf0FrNzSKdYK2APUf7tGfGxQCk2ihEREmbR6ZMc0MVAD5RIX/41gpUzTw==}
+    engines: {node: '>= 10.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  '@parcel/watcher@2.5.6':
+    resolution: {integrity: sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==}
+    engines: {node: '>= 10.0.0'}
+
   '@paulmillr/qr@0.2.1':
     resolution: {integrity: sha512-IHnV6A+zxU7XwmKFinmYjUcwlyK9+xkG3/s9KcQhI9BjQKycrJ1JRO+FbNYPwZiPKW3je/DR0k7w8/gLa5eaxQ==}
     deprecated: 'The package is now available as "qr": npm install qr'
@@ -2569,6 +2664,102 @@ packages:
   '@swc/helpers@0.5.15':
     resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
 
+  '@tailwindcss/cli@4.2.1':
+    resolution: {integrity: sha512-b7MGn51IA80oSG+7fuAgzfQ+7pZBgjzbqwmiv6NO7/+a1sev32cGqnwhscT7h0EcAvMa9r7gjRylqOH8Xhc4DA==}
+    hasBin: true
+
+  '@tailwindcss/node@4.2.1':
+    resolution: {integrity: sha512-jlx6sLk4EOwO6hHe1oCGm1Q4AN/s0rSrTTPBGPM0/RQ6Uylwq17FuU8IeJJKEjtc6K6O07zsvP+gDO6MMWo7pg==}
+
+  '@tailwindcss/oxide-android-arm64@4.2.1':
+    resolution: {integrity: sha512-eZ7G1Zm5EC8OOKaesIKuw77jw++QJ2lL9N+dDpdQiAB/c/B2wDh0QPFHbkBVrXnwNugvrbJFk1gK2SsVjwWReg==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.2.1':
+    resolution: {integrity: sha512-q/LHkOstoJ7pI1J0q6djesLzRvQSIfEto148ppAd+BVQK0JYjQIFSK3JgYZJa+Yzi0DDa52ZsQx2rqytBnf8Hw==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.2.1':
+    resolution: {integrity: sha512-/f/ozlaXGY6QLbpvd/kFTro2l18f7dHKpB+ieXz+Cijl4Mt9AI2rTrpq7V+t04nK+j9XBQHnSMdeQRhbGyt6fw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.2.1':
+    resolution: {integrity: sha512-5e/AkgYJT/cpbkys/OU2Ei2jdETCLlifwm7ogMC7/hksI2fC3iiq6OcXwjibcIjPung0kRtR3TxEITkqgn0TcA==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.1':
+    resolution: {integrity: sha512-Uny1EcVTTmerCKt/1ZuKTkb0x8ZaiuYucg2/kImO5A5Y/kBz41/+j0gxUZl+hTF3xkWpDmHX+TaWhOtba2Fyuw==}
+    engines: {node: '>= 20'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.2.1':
+    resolution: {integrity: sha512-CTrwomI+c7n6aSSQlsPL0roRiNMDQ/YzMD9EjcR+H4f0I1SQ8QqIuPnsVp7QgMkC1Qi8rtkekLkOFjo7OlEFRQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.2.1':
+    resolution: {integrity: sha512-WZA0CHRL/SP1TRbA5mp9htsppSEkWuQ4KsSUumYQnyl8ZdT39ntwqmz4IUHGN6p4XdSlYfJwM4rRzZLShHsGAQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.2.1':
+    resolution: {integrity: sha512-qMFzxI2YlBOLW5PhblzuSWlWfwLHaneBE0xHzLrBgNtqN6mWfs+qYbhryGSXQjFYB1Dzf5w+LN5qbUTPhW7Y5g==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.2.1':
+    resolution: {integrity: sha512-5r1X2FKnCMUPlXTWRYpHdPYUY6a1Ar/t7P24OuiEdEOmms5lyqjDRvVY1yy9Rmioh+AunQ0rWiOTPE8F9A3v5g==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.2.1':
+    resolution: {integrity: sha512-MGFB5cVPvshR85MTJkEvqDUnuNoysrsRxd6vnk1Lf2tbiqNlXpHYZqkqOQalydienEWOHHFyyuTSYRsLfxFJ2Q==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.2.1':
+    resolution: {integrity: sha512-YlUEHRHBGnCMh4Nj4GnqQyBtsshUPdiNroZj8VPkvTZSoHsilRCwXcVKnG9kyi0ZFAS/3u+qKHBdDc81SADTRA==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.2.1':
+    resolution: {integrity: sha512-rbO34G5sMWWyrN/idLeVxAZgAKWrn5LiR3/I90Q9MkA67s6T1oB0xtTe+0heoBvHSpbU9Mk7i6uwJnpo4u21XQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.2.1':
+    resolution: {integrity: sha512-yv9jeEFWnjKCI6/T3Oq50yQEOqmpmpfzG1hcZsAOaXFQPfzWprWrlHSdGPEF3WQTi8zu8ohC9Mh9J470nT5pUw==}
+    engines: {node: '>= 20'}
+
+  '@tailwindcss/postcss@4.2.1':
+    resolution: {integrity: sha512-OEwGIBnXnj7zJeonOh6ZG9woofIjGrd2BORfvE5p9USYKDCZoQmfqLcfNiRWoJlRWLdNPn2IgVZuWAOM4iTYMw==}
+
   '@tanstack/query-core@5.66.4':
     resolution: {integrity: sha512-skM/gzNX4shPkqmdTCSoHtJAPMTtmIJNS0hE+xwTTUVYwezArCT34NMermABmBVUg5Ls5aiUXEDXfqwR1oVkcA==}
 
@@ -3219,16 +3410,10 @@ packages:
     resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
     engines: {node: '>=12'}
 
-  any-promise@1.3.0:
-    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
-
   anymatch@3.1.3:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
 
-  arg@5.0.2:
-    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
-
   argon2id@1.0.1:
     resolution: {integrity: sha512-rsiD3lX+0L0CsiZARp3bf9EGxprtuWAT7PpiJd+Fk53URV0/USOQkBIP1dLTV8t6aui0ECbymQ9W9YCcTd6XgA==}
 
@@ -3298,13 +3483,6 @@ packages:
     resolution: {integrity: sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==}
     engines: {node: '>=8.0.0'}
 
-  autoprefixer@10.4.24:
-    resolution: {integrity: sha512-uHZg7N9ULTVbutaIsDRoUkoS8/h3bdsmVJYZ5l3wv8Cp/6UIIoRDm90hZ+BwxUj/hGBEzLxdHNSKuFpn8WOyZw==}
-    engines: {node: ^10 || ^12 || >=14}
-    hasBin: true
-    peerDependencies:
-      postcss: ^8.1.0
-
   available-typed-arrays@1.0.7:
     resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
     engines: {node: '>= 0.4'}
@@ -3346,11 +3524,6 @@ packages:
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
-  baseline-browser-mapping@2.10.0:
-    resolution: {integrity: sha512-lIyg0szRfYbiy67j9KN8IyeD7q7hcmqnJ1ddWmNt19ItGpNN64mnllmxUNFIOdOm6by97jlL6wfpTTJrmnjWAA==}
-    engines: {node: '>=6.0.0'}
-    hasBin: true
-
   bech32@1.1.4:
     resolution: {integrity: sha512-s0IrSOzLlbvX7yp4WBfPITzpAU8sqQcpsmwXDiKwrG4r491vwCO/XpejasRNl0piBMe/DvP4Tz0mIS/X1DPJBQ==}
 
@@ -3429,11 +3602,6 @@ packages:
   brorand@1.1.0:
     resolution: {integrity: sha512-cKV8tMCEpQs4hK/ik71d6LrPOnpkpGBR0wzxqr68g2m/LB2GxVYQroAjMJZRVM1Y4BCjCKc3vAamxSzOY2RP+w==}
 
-  browserslist@4.28.1:
-    resolution: {integrity: sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==}
-    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
-    hasBin: true
-
   bs58@4.0.1:
     resolution: {integrity: sha512-Ok3Wdf5vOIlBrgCvTq96gBkJw+JUEzdBgyaza5HLtPm7yTHkjRy8+JzNyHF7BHa0bNWOQIp3m5YF0nnFcOIKLw==}
 
@@ -3487,10 +3655,6 @@ packages:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
 
-  camelcase-css@2.0.1:
-    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
-    engines: {node: '>= 6'}
-
   camelcase@5.3.1:
     resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
     engines: {node: '>=6'}
@@ -3498,9 +3662,6 @@ packages:
   caniuse-lite@1.0.30001700:
     resolution: {integrity: sha512-2S6XIXwaE7K7erT8dY+kLQcpa5ms63XlRkMkReXjle+kf6c5g38vyMl+Z5y8dSxOFDhcFe+nxnn261PLxBSQsQ==}
 
-  caniuse-lite@1.0.30001770:
-    resolution: {integrity: sha512-x/2CLQ1jHENRbHg5PSId2sXq1CIO1CISvwWAj027ltMVG2UNgW+w9oH2+HzgEIRFembL8bUlXtfbBHR1fCg2xw==}
-
   chai@4.5.0:
     resolution: {integrity: sha512-RITGBfijLkBddZvnn8jdqoTypxvqbOLYQkGGxXzeFjVHvudaPw0HNFD9x928/eUwYWd2dPCugVqspGALTZZQKw==}
     engines: {node: '>=4'}
@@ -3581,10 +3742,6 @@ packages:
   commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
-  commander@4.1.1:
-    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
-    engines: {node: '>= 6'}
-
   commander@5.1.0:
     resolution: {integrity: sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==}
     engines: {node: '>= 6'}
@@ -3645,11 +3802,6 @@ packages:
   crossws@0.3.4:
     resolution: {integrity: sha512-uj0O1ETYX1Bh6uSgktfPvwDiPYGQ3aI4qVsaC/LWpkIzGj1nUYm5FK3K+t11oOlpN01lGbprFCH4wBlKdJjVgw==}
 
-  cssesc@3.0.0:
-    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
-    engines: {node: '>=4'}
-    hasBin: true
-
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
@@ -3783,11 +3935,6 @@ packages:
     resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==}
     engines: {node: '>=8'}
 
-  detect-libc@1.0.3:
-    resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
-    engines: {node: '>=0.10'}
-    hasBin: true
-
   detect-libc@2.0.4:
     resolution: {integrity: sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==}
     engines: {node: '>=8'}
@@ -3795,9 +3942,6 @@ packages:
   detect-node-es@1.1.0:
     resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
 
-  didyoumean@1.2.2:
-    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-
   diff-sequences@29.6.3:
     resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -3809,9 +3953,6 @@ packages:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
 
-  dlv@1.1.3:
-    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
-
   doctrine@2.1.0:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
     engines: {node: '>=0.10.0'}
@@ -3840,9 +3981,6 @@ packages:
   effect@3.17.13:
     resolution: {integrity: sha512-JMz5oBxs/6mu4FP9Csjub4jYMUwMLrp+IzUmSDVIzn2NoeoyOXMl7x1lghfr3dLKWffWrdnv/d8nFFdgrHXPqw==}
 
-  electron-to-chromium@1.5.302:
-    resolution: {integrity: sha512-sM6HAN2LyK82IyPBpznDRqlTQAtuSaO+ShzFiWTvoMJLHyZ+Y39r8VMfHzwbU8MVBzQ4Wdn85+wlZl2TLGIlwg==}
-
   elliptic@6.5.4:
     resolution: {integrity: sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==}
 
@@ -3873,6 +4011,10 @@ packages:
     resolution: {integrity: sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==}
     engines: {node: '>=10.0.0'}
 
+  enhanced-resolve@5.20.0:
+    resolution: {integrity: sha512-/ce7+jQ1PQ6rVXwe+jKEg5hW5ciicHwIQUagZkp6IufBoY3YDgdTTY1azVs0qoRgVmvsNB+rbjLJxDAeHHtwsQ==}
+    engines: {node: '>=10.13.0'}
+
   enquirer@2.4.1:
     resolution: {integrity: sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==}
     engines: {node: '>=8.6'}
@@ -4122,15 +4264,6 @@ packages:
   fastq@1.19.0:
     resolution: {integrity: sha512-7SFSRCNjBQIZH/xZR3iy5iQYR8aGBE0h3VG6/cwlbrpdciNYBMotQav8c1XI3HjHH+NikUpP53nPdlZSdWmFzA==}
 
-  fdir@6.5.0:
-    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
-    engines: {node: '>=12.0.0'}
-    peerDependencies:
-      picomatch: ^3 || ^4
-    peerDependenciesMeta:
-      picomatch:
-        optional: true
-
   fetch-blob@3.2.0:
     resolution: {integrity: sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==}
     engines: {node: ^12.20 || >= 14.13}
@@ -4217,9 +4350,6 @@ packages:
   fp-ts@2.16.11:
     resolution: {integrity: sha512-LaI+KaX2NFkfn1ZGHoKCmcfv7yrZsC3b8NtWsTVQeHkq4F27vI5igUuO53sxqDEa2gNQMHFPmpojDw/1zmUK7w==}
 
-  fraction.js@5.3.4:
-    resolution: {integrity: sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==}
-
   fresh@0.5.2:
     resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
     engines: {node: '>= 0.6'}
@@ -4650,8 +4780,8 @@ packages:
     engines: {node: '>=8'}
     hasBin: true
 
-  jiti@1.21.7:
-    resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
+  jiti@2.6.1:
+    resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
     hasBin: true
 
   js-base64@3.7.8:
@@ -4725,74 +4855,79 @@ packages:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
 
-  lightningcss-darwin-arm64@1.23.0:
-    resolution: {integrity: sha512-kl4Pk3Q2lnE6AJ7Qaij47KNEfY2/UXRZBT/zqGA24B8qwkgllr/j7rclKOf1axcslNXvvUdztjo4Xqh39Yq1aA==}
+  lightningcss-android-arm64@1.31.1:
+    resolution: {integrity: sha512-HXJF3x8w9nQ4jbXRiNppBCqeZPIAfUo8zE/kOEGbW5NZvGc/K7nMxbhIr+YlFlHW5mpbg/YFPdbnCh1wAXCKFg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-darwin-arm64@1.31.1:
+    resolution: {integrity: sha512-02uTEqf3vIfNMq3h/z2cJfcOXnQ0GRwQrkmPafhueLb2h7mqEidiCzkE4gBMEH65abHRiQvhdcQ+aP0D0g67sg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [darwin]
 
-  lightningcss-darwin-x64@1.23.0:
-    resolution: {integrity: sha512-KeRFCNoYfDdcolcFXvokVw+PXCapd2yHS1Diko1z1BhRz/nQuD5XyZmxjWdhmhN/zj5sH8YvWsp0/lPLVzqKpg==}
+  lightningcss-darwin-x64@1.31.1:
+    resolution: {integrity: sha512-1ObhyoCY+tGxtsz1lSx5NXCj3nirk0Y0kB/g8B8DT+sSx4G9djitg9ejFnjb3gJNWo7qXH4DIy2SUHvpoFwfTA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [darwin]
 
-  lightningcss-freebsd-x64@1.23.0:
-    resolution: {integrity: sha512-xhnhf0bWPuZxcqknvMDRFFo2TInrmQRWZGB0f6YoAsZX8Y+epfjHeeOIGCfAmgF0DgZxHwYc8mIR5tQU9/+ROA==}
+  lightningcss-freebsd-x64@1.31.1:
+    resolution: {integrity: sha512-1RINmQKAItO6ISxYgPwszQE1BrsVU5aB45ho6O42mu96UiZBxEXsuQ7cJW4zs4CEodPUioj/QrXW1r9pLUM74A==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [freebsd]
 
-  lightningcss-linux-arm-gnueabihf@1.23.0:
-    resolution: {integrity: sha512-fBamf/bULvmWft9uuX+bZske236pUZEoUlaHNBjnueaCTJ/xd8eXgb0cEc7S5o0Nn6kxlauMBnqJpF70Bgq3zg==}
+  lightningcss-linux-arm-gnueabihf@1.31.1:
+    resolution: {integrity: sha512-OOCm2//MZJ87CdDK62rZIu+aw9gBv4azMJuA8/KB74wmfS3lnC4yoPHm0uXZ/dvNNHmnZnB8XLAZzObeG0nS1g==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm]
     os: [linux]
 
-  lightningcss-linux-arm64-gnu@1.23.0:
-    resolution: {integrity: sha512-RS7sY77yVLOmZD6xW2uEHByYHhQi5JYWmgVumYY85BfNoVI3DupXSlzbw+b45A9NnVKq45+oXkiN6ouMMtTwfg==}
+  lightningcss-linux-arm64-gnu@1.31.1:
+    resolution: {integrity: sha512-WKyLWztD71rTnou4xAD5kQT+982wvca7E6QoLpoawZ1gP9JM0GJj4Tp5jMUh9B3AitHbRZ2/H3W5xQmdEOUlLg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  lightningcss-linux-arm64-musl@1.23.0:
-    resolution: {integrity: sha512-cU00LGb6GUXCwof6ACgSMKo3q7XYbsyTj0WsKHLi1nw7pV0NCq8nFTn6ZRBYLoKiV8t+jWl0Hv8KkgymmK5L5g==}
+  lightningcss-linux-arm64-musl@1.31.1:
+    resolution: {integrity: sha512-mVZ7Pg2zIbe3XlNbZJdjs86YViQFoJSpc41CbVmKBPiGmC4YrfeOyz65ms2qpAobVd7WQsbW4PdsSJEMymyIMg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  lightningcss-linux-x64-gnu@1.23.0:
-    resolution: {integrity: sha512-q4jdx5+5NfB0/qMbXbOmuC6oo7caPnFghJbIAV90cXZqgV8Am3miZhC4p+sQVdacqxfd+3nrle4C8icR3p1AYw==}
+  lightningcss-linux-x64-gnu@1.31.1:
+    resolution: {integrity: sha512-xGlFWRMl+0KvUhgySdIaReQdB4FNudfUTARn7q0hh/V67PVGCs3ADFjw+6++kG1RNd0zdGRlEKa+T13/tQjPMA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  lightningcss-linux-x64-musl@1.23.0:
-    resolution: {integrity: sha512-G9Ri3qpmF4qef2CV/80dADHKXRAQeQXpQTLx7AiQrBYQHqBjB75oxqj06FCIe5g4hNCqLPnM9fsO4CyiT1sFSQ==}
+  lightningcss-linux-x64-musl@1.31.1:
+    resolution: {integrity: sha512-eowF8PrKHw9LpoZii5tdZwnBcYDxRw2rRCyvAXLi34iyeYfqCQNA9rmUM0ce62NlPhCvof1+9ivRaTY6pSKDaA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  lightningcss-win32-x64-msvc@1.23.0:
-    resolution: {integrity: sha512-1rcBDJLU+obPPJM6qR5fgBUiCdZwZLafZM5f9kwjFLkb/UBNIzmae39uCSmh71nzPCTXZqHbvwu23OWnWEz+eg==}
+  lightningcss-win32-arm64-msvc@1.31.1:
+    resolution: {integrity: sha512-aJReEbSEQzx1uBlQizAOBSjcmr9dCdL3XuC/6HLXAxmtErsj2ICo5yYggg1qOODQMtnjNQv2UHb9NpOuFtYe4w==}
     engines: {node: '>= 12.0.0'}
-    cpu: [x64]
+    cpu: [arm64]
     os: [win32]
 
-  lightningcss@1.23.0:
-    resolution: {integrity: sha512-SEArWKMHhqn/0QzOtclIwH5pXIYQOUEkF8DgICd/105O+GCgd7jxjNod/QPnBCSWvpRHQBGVz5fQ9uScby03zA==}
+  lightningcss-win32-x64-msvc@1.31.1:
+    resolution: {integrity: sha512-I9aiFrbd7oYHwlnQDqr1Roz+fTz61oDDJX7n9tYF9FJymH1cIN1DtKw3iYt6b8WZgEjoNwVSncwF4wx/ZedMhw==}
     engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
 
-  lilconfig@3.1.3:
-    resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
-    engines: {node: '>=14'}
-
-  lines-and-columns@1.2.4:
-    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+  lightningcss@1.31.1:
+    resolution: {integrity: sha512-l51N2r93WmGUye3WuFoN5k10zyvrVs0qfKBhyC5ogUQ6Ew6JUSswh78mbSO+IU3nTWsyOArqPCcShdQSadghBQ==}
+    engines: {node: '>= 12.0.0'}
 
   lit-element@3.3.3:
     resolution: {integrity: sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==}
@@ -4856,6 +4991,9 @@ packages:
   magic-string@0.30.17:
     resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
 
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -4953,12 +5091,14 @@ packages:
   multiformats@9.9.0:
     resolution: {integrity: sha512-HoMUjhH9T8DDBNT+6xzkrd9ga/XiBI4xLr58LJACwK6G3HTOPeMz4nB4KJs33L2BelrIJa7P0VuNaVF3hMYfjg==}
 
-  mz@2.7.0:
-    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
-
   nanoclone@0.2.1:
     resolution: {integrity: sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==}
 
+  nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
   nanoid@3.3.8:
     resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -5006,6 +5146,9 @@ packages:
   node-addon-api@2.0.2:
     resolution: {integrity: sha512-Ntyt4AIXyaLIuMHF6IOoTakB3K+RWxwtsHNRxllEoA6vPwP9o4866g6YWDLUdnucilZhmkxiHwHr11gAENw+QA==}
 
+  node-addon-api@7.1.1:
+    resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
+
   node-domexception@1.0.0:
     resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
     engines: {node: '>=10.5.0'}
@@ -5034,9 +5177,6 @@ packages:
   node-mock-http@1.0.0:
     resolution: {integrity: sha512-0uGYQ1WQL1M5kKvGRXWQ3uZCHtLTO8hln3oBjIusM75WoesZ909uQJs/Hb946i2SS+Gsrhkaa6iAO17jRIv6DQ==}
 
-  node-releases@2.0.27:
-    resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
-
   normalize-path@3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
@@ -5052,10 +5192,6 @@ packages:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
 
-  object-hash@3.0.0:
-    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
-    engines: {node: '>= 6'}
-
   object-inspect@1.13.4:
     resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
     engines: {node: '>= 0.4'}
@@ -5270,10 +5406,6 @@ packages:
     resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
     engines: {node: '>=12'}
 
-  pify@2.3.0:
-    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
-    engines: {node: '>=0.10.0'}
-
   pify@3.0.0:
     resolution: {integrity: sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==}
     engines: {node: '>=4'}
@@ -5296,10 +5428,6 @@ packages:
     resolution: {integrity: sha512-dMACeu63HtRLmCG8VKdy4cShCPKaYDR4youZqoSWLxl5Gu99HUw8bw75thbPv9Nip+H+QYX8o3ZJbTdVZZ2TVg==}
     hasBin: true
 
-  pirates@4.0.7:
-    resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
-    engines: {node: '>= 6'}
-
   pkg-types@1.3.1:
     resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
 
@@ -5338,49 +5466,6 @@ packages:
     resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
     engines: {node: '>= 0.4'}
 
-  postcss-import@15.1.0:
-    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      postcss: ^8.0.0
-
-  postcss-js@4.1.0:
-    resolution: {integrity: sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==}
-    engines: {node: ^12 || ^14 || >= 16}
-    peerDependencies:
-      postcss: ^8.4.21
-
-  postcss-load-config@6.0.1:
-    resolution: {integrity: sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==}
-    engines: {node: '>= 18'}
-    peerDependencies:
-      jiti: '>=1.21.0'
-      postcss: '>=8.0.9'
-      tsx: ^4.8.1
-      yaml: ^2.4.2
-    peerDependenciesMeta:
-      jiti:
-        optional: true
-      postcss:
-        optional: true
-      tsx:
-        optional: true
-      yaml:
-        optional: true
-
-  postcss-nested@6.2.0:
-    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
-    engines: {node: '>=12.0'}
-    peerDependencies:
-      postcss: ^8.2.14
-
-  postcss-selector-parser@6.1.2:
-    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
-    engines: {node: '>=4'}
-
-  postcss-value-parser@4.2.0:
-    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
-
   postcss@8.4.31:
     resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
     engines: {node: ^10 || ^12 || >=14}
@@ -5389,6 +5474,10 @@ packages:
     resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==}
     engines: {node: ^10 || ^12 || >=14}
 
+  postcss@8.5.8:
+    resolution: {integrity: sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==}
+    engines: {node: ^10 || ^12 || >=14}
+
   preact@10.24.2:
     resolution: {integrity: sha512-1cSoF0aCC8uaARATfrlz4VCBqE8LwZwRfLgkxJOQwAlQt6ayTmi0D9OF7nXid1POI5SZidFuG9CnlXbDfLqY/Q==}
 
@@ -5572,9 +5661,6 @@ packages:
     resolution: {integrity: sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==}
     engines: {node: '>=0.10.0'}
 
-  read-cache@1.0.0:
-    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
-
   read-yaml-file@1.1.0:
     resolution: {integrity: sha512-VIMnQi/Z4HT2Fxuwg5KrY174U1VdUIASQVWXXyqtNRtxSr9IYkn1rsI6Tb6HsrHCmB7gVpNwX6JxPTHcH6IoTA==}
     engines: {node: '>=6'}
@@ -5928,11 +6014,6 @@ packages:
       babel-plugin-macros:
         optional: true
 
-  sucrase@3.35.1:
-    resolution: {integrity: sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==}
-    engines: {node: '>=16 || 14 >=14.17'}
-    hasBin: true
-
   superstruct@1.0.4:
     resolution: {integrity: sha512-7JpaAoX2NGyoFlI9NBh66BQXGONc+uE+MRS5i2iOBKuS4e+ccgMDjATgZldkah+33DakBxDHiss9kvUcGAO8UQ==}
     engines: {node: '>=14.0.0'}
@@ -5957,13 +6038,15 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
-  tailwind-merge@2.6.1:
-    resolution: {integrity: sha512-Oo6tHdpZsGpkKG88HJ8RR1rg/RdnEkQEfMoEk2x1XRI3F1AxeU+ijRXpiVUF4UbLfcxxRGw6TbUINKYdWVsQTQ==}
+  tailwind-merge@3.5.0:
+    resolution: {integrity: sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==}
 
-  tailwindcss@3.4.19:
-    resolution: {integrity: sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
+  tailwindcss@4.2.1:
+    resolution: {integrity: sha512-/tBrSQ36vCleJkAOsy9kbNTgaxvGbyOamC30PRePTQe/o1MFwEKHQk4Cn7BNGaPtjp+PuUrByJehM1hgxfq4sw==}
+
+  tapable@2.3.0:
+    resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
+    engines: {node: '>=6'}
 
   term-size@2.2.1:
     resolution: {integrity: sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==}
@@ -5984,13 +6067,6 @@ packages:
   text-table@0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
 
-  thenify-all@1.6.0:
-    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
-    engines: {node: '>=0.8'}
-
-  thenify@3.3.1:
-    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
-
   thread-stream@0.15.2:
     resolution: {integrity: sha512-UkEhKIg2pD+fjkHQKyJO3yoIvAP3N6RlNFt2dUhcS1FGvCD1cQa1M/PGknCLFIyZdtJOWQjejp7bdNqmN7zwdA==}
 
@@ -6003,10 +6079,6 @@ packages:
   tinybench@2.9.0:
     resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
 
-  tinyglobby@0.2.15:
-    resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
-    engines: {node: '>=12.0.0'}
-
   tinypool@0.8.4:
     resolution: {integrity: sha512-i11VH5gS6IFeLY3gMBQ00/MmLncVP7JLXOw1vlgkytLmJK7QnEr7NXf0LBdxfmNPAeyetukOk0bOYrJrFGjYJQ==}
     engines: {node: '>=14.0.0'}
@@ -6060,9 +6132,6 @@ packages:
     peerDependencies:
       typescript: '>=4.2.0'
 
-  ts-interface-checker@0.1.13:
-    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
-
   tsconfig-paths@3.15.0:
     resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
 
@@ -6238,12 +6307,6 @@ packages:
       uploadthing:
         optional: true
 
-  update-browserslist-db@1.2.3:
-    resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
-    hasBin: true
-    peerDependencies:
-      browserslist: '>= 4.21.0'
-
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
@@ -8535,6 +8598,11 @@ snapshots:
       '@jridgewell/sourcemap-codec': 1.5.0
       '@jridgewell/trace-mapping': 0.3.25
 
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.8
+      '@jridgewell/trace-mapping': 0.3.25
+
   '@jridgewell/resolve-uri@3.1.2': {}
 
   '@jridgewell/set-array@1.2.1': {}
@@ -8547,6 +8615,8 @@ snapshots:
 
   '@jridgewell/sourcemap-codec@1.5.0': {}
 
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
   '@jridgewell/trace-mapping@0.3.25':
     dependencies:
       '@jridgewell/resolve-uri': 3.1.2
@@ -9021,6 +9091,66 @@ snapshots:
 
   '@openzeppelin/contracts@4.9.6': {}
 
+  '@parcel/watcher-android-arm64@2.5.6':
+    optional: true
+
+  '@parcel/watcher-darwin-arm64@2.5.6':
+    optional: true
+
+  '@parcel/watcher-darwin-x64@2.5.6':
+    optional: true
+
+  '@parcel/watcher-freebsd-x64@2.5.6':
+    optional: true
+
+  '@parcel/watcher-linux-arm-glibc@2.5.6':
+    optional: true
+
+  '@parcel/watcher-linux-arm-musl@2.5.6':
+    optional: true
+
+  '@parcel/watcher-linux-arm64-glibc@2.5.6':
+    optional: true
+
+  '@parcel/watcher-linux-arm64-musl@2.5.6':
+    optional: true
+
+  '@parcel/watcher-linux-x64-glibc@2.5.6':
+    optional: true
+
+  '@parcel/watcher-linux-x64-musl@2.5.6':
+    optional: true
+
+  '@parcel/watcher-win32-arm64@2.5.6':
+    optional: true
+
+  '@parcel/watcher-win32-ia32@2.5.6':
+    optional: true
+
+  '@parcel/watcher-win32-x64@2.5.6':
+    optional: true
+
+  '@parcel/watcher@2.5.6':
+    dependencies:
+      detect-libc: 2.0.4
+      is-glob: 4.0.3
+      node-addon-api: 7.1.1
+      picomatch: 4.0.3
+    optionalDependencies:
+      '@parcel/watcher-android-arm64': 2.5.6
+      '@parcel/watcher-darwin-arm64': 2.5.6
+      '@parcel/watcher-darwin-x64': 2.5.6
+      '@parcel/watcher-freebsd-x64': 2.5.6
+      '@parcel/watcher-linux-arm-glibc': 2.5.6
+      '@parcel/watcher-linux-arm-musl': 2.5.6
+      '@parcel/watcher-linux-arm64-glibc': 2.5.6
+      '@parcel/watcher-linux-arm64-musl': 2.5.6
+      '@parcel/watcher-linux-x64-glibc': 2.5.6
+      '@parcel/watcher-linux-x64-musl': 2.5.6
+      '@parcel/watcher-win32-arm64': 2.5.6
+      '@parcel/watcher-win32-ia32': 2.5.6
+      '@parcel/watcher-win32-x64': 2.5.6
+
   '@paulmillr/qr@0.2.1': {}
 
   '@pkgjs/parseargs@0.11.0':
@@ -10065,6 +10195,85 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  '@tailwindcss/cli@4.2.1':
+    dependencies:
+      '@parcel/watcher': 2.5.6
+      '@tailwindcss/node': 4.2.1
+      '@tailwindcss/oxide': 4.2.1
+      enhanced-resolve: 5.20.0
+      mri: 1.2.0
+      picocolors: 1.1.1
+      tailwindcss: 4.2.1
+
+  '@tailwindcss/node@4.2.1':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.20.0
+      jiti: 2.6.1
+      lightningcss: 1.31.1
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.2.1
+
+  '@tailwindcss/oxide-android-arm64@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide@4.2.1':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.2.1
+      '@tailwindcss/oxide-darwin-arm64': 4.2.1
+      '@tailwindcss/oxide-darwin-x64': 4.2.1
+      '@tailwindcss/oxide-freebsd-x64': 4.2.1
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.2.1
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.2.1
+      '@tailwindcss/oxide-linux-arm64-musl': 4.2.1
+      '@tailwindcss/oxide-linux-x64-gnu': 4.2.1
+      '@tailwindcss/oxide-linux-x64-musl': 4.2.1
+      '@tailwindcss/oxide-wasm32-wasi': 4.2.1
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.2.1
+      '@tailwindcss/oxide-win32-x64-msvc': 4.2.1
+
+  '@tailwindcss/postcss@4.2.1':
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.2.1
+      '@tailwindcss/oxide': 4.2.1
+      postcss: 8.5.8
+      tailwindcss: 4.2.1
+
   '@tanstack/query-core@5.66.4': {}
 
   '@tanstack/react-query@5.66.9(react@19.1.1)':
@@ -10617,7 +10826,7 @@ snapshots:
       pathe: 1.1.2
       picocolors: 1.1.1
       sirv: 2.0.4
-      vitest: 1.6.1(@types/node@22.13.4)(@vitest/ui@1.6.1)(lightningcss@1.23.0)(terser@5.39.0)
+      vitest: 1.6.1(@types/node@22.13.4)(@vitest/ui@1.6.1)(lightningcss@1.31.1)(terser@5.39.0)
 
   '@vitest/utils@1.6.1':
     dependencies:
@@ -11997,15 +12206,11 @@ snapshots:
 
   ansi-styles@6.2.1: {}
 
-  any-promise@1.3.0: {}
-
   anymatch@3.1.3:
     dependencies:
       normalize-path: 3.0.0
       picomatch: 2.3.1
 
-  arg@5.0.2: {}
-
   argon2id@1.0.1: {}
 
   argparse@1.0.10:
@@ -12098,15 +12303,6 @@ snapshots:
 
   atomic-sleep@1.0.0: {}
 
-  autoprefixer@10.4.24(postcss@8.5.3):
-    dependencies:
-      browserslist: 4.28.1
-      caniuse-lite: 1.0.30001770
-      fraction.js: 5.3.4
-      picocolors: 1.1.1
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
-
   available-typed-arrays@1.0.7:
     dependencies:
       possible-typed-array-names: 1.1.0
@@ -12172,8 +12368,6 @@ snapshots:
 
   base64-js@1.5.1: {}
 
-  baseline-browser-mapping@2.10.0: {}
-
   bech32@1.1.4: {}
 
   bech32@2.0.0: {}
@@ -12276,14 +12470,6 @@ snapshots:
 
   brorand@1.1.0: {}
 
-  browserslist@4.28.1:
-    dependencies:
-      baseline-browser-mapping: 2.10.0
-      caniuse-lite: 1.0.30001770
-      electron-to-chromium: 1.5.302
-      node-releases: 2.0.27
-      update-browserslist-db: 1.2.3(browserslist@4.28.1)
-
   bs58@4.0.1:
     dependencies:
       base-x: 3.0.10
@@ -12345,14 +12531,10 @@ snapshots:
 
   callsites@3.1.0: {}
 
-  camelcase-css@2.0.1: {}
-
   camelcase@5.3.1: {}
 
   caniuse-lite@1.0.30001700: {}
 
-  caniuse-lite@1.0.30001770: {}
-
   chai@4.5.0:
     dependencies:
       assertion-error: 1.1.0
@@ -12442,8 +12624,6 @@ snapshots:
 
   commander@2.20.3: {}
 
-  commander@4.1.1: {}
-
   commander@5.1.0: {}
 
   concat-map@0.0.1: {}
@@ -12506,8 +12686,6 @@ snapshots:
     dependencies:
       uncrypto: 0.1.3
 
-  cssesc@3.0.0: {}
-
   csstype@3.1.3: {}
 
   data-uri-to-buffer@4.0.1: {}
@@ -12605,15 +12783,10 @@ snapshots:
 
   detect-indent@6.1.0: {}
 
-  detect-libc@1.0.3:
-    optional: true
-
   detect-libc@2.0.4: {}
 
   detect-node-es@1.1.0: {}
 
-  didyoumean@1.2.2: {}
-
   diff-sequences@29.6.3: {}
 
   dijkstrajs@1.0.3: {}
@@ -12622,8 +12795,6 @@ snapshots:
     dependencies:
       path-type: 4.0.0
 
-  dlv@1.1.3: {}
-
   doctrine@2.1.0:
     dependencies:
       esutils: 2.0.3
@@ -12661,8 +12832,6 @@ snapshots:
       '@standard-schema/spec': 1.0.0
       fast-check: 3.23.2
 
-  electron-to-chromium@1.5.302: {}
-
   elliptic@6.5.4:
     dependencies:
       bn.js: 4.12.1
@@ -12701,6 +12870,11 @@ snapshots:
 
   engine.io-parser@5.2.3: {}
 
+  enhanced-resolve@5.20.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.3.0
+
   enquirer@2.4.1:
     dependencies:
       ansi-colors: 4.1.3
@@ -13179,10 +13353,6 @@ snapshots:
     dependencies:
       reusify: 1.0.4
 
-  fdir@6.5.0(picomatch@4.0.3):
-    optionalDependencies:
-      picomatch: 4.0.3
-
   fetch-blob@3.2.0:
     dependencies:
       node-domexception: 1.0.0
@@ -13281,8 +13451,6 @@ snapshots:
 
   fp-ts@2.16.11: {}
 
-  fraction.js@5.3.4: {}
-
   fresh@0.5.2: {}
 
   fs-extra@7.0.1:
@@ -13762,7 +13930,7 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
-  jiti@1.21.7: {}
+  jiti@2.6.1: {}
 
   js-base64@3.7.8: {}
 
@@ -13836,51 +14004,54 @@ snapshots:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
-  lightningcss-darwin-arm64@1.23.0:
+  lightningcss-android-arm64@1.31.1:
     optional: true
 
-  lightningcss-darwin-x64@1.23.0:
+  lightningcss-darwin-arm64@1.31.1:
     optional: true
 
-  lightningcss-freebsd-x64@1.23.0:
+  lightningcss-darwin-x64@1.31.1:
     optional: true
 
-  lightningcss-linux-arm-gnueabihf@1.23.0:
+  lightningcss-freebsd-x64@1.31.1:
     optional: true
 
-  lightningcss-linux-arm64-gnu@1.23.0:
+  lightningcss-linux-arm-gnueabihf@1.31.1:
     optional: true
 
-  lightningcss-linux-arm64-musl@1.23.0:
+  lightningcss-linux-arm64-gnu@1.31.1:
     optional: true
 
-  lightningcss-linux-x64-gnu@1.23.0:
+  lightningcss-linux-arm64-musl@1.31.1:
     optional: true
 
-  lightningcss-linux-x64-musl@1.23.0:
+  lightningcss-linux-x64-gnu@1.31.1:
     optional: true
 
-  lightningcss-win32-x64-msvc@1.23.0:
+  lightningcss-linux-x64-musl@1.31.1:
     optional: true
 
-  lightningcss@1.23.0:
-    dependencies:
-      detect-libc: 1.0.3
-    optionalDependencies:
-      lightningcss-darwin-arm64: 1.23.0
-      lightningcss-darwin-x64: 1.23.0
-      lightningcss-freebsd-x64: 1.23.0
-      lightningcss-linux-arm-gnueabihf: 1.23.0
-      lightningcss-linux-arm64-gnu: 1.23.0
-      lightningcss-linux-arm64-musl: 1.23.0
-      lightningcss-linux-x64-gnu: 1.23.0
-      lightningcss-linux-x64-musl: 1.23.0
-      lightningcss-win32-x64-msvc: 1.23.0
+  lightningcss-win32-arm64-msvc@1.31.1:
     optional: true
 
-  lilconfig@3.1.3: {}
+  lightningcss-win32-x64-msvc@1.31.1:
+    optional: true
 
-  lines-and-columns@1.2.4: {}
+  lightningcss@1.31.1:
+    dependencies:
+      detect-libc: 2.0.4
+    optionalDependencies:
+      lightningcss-android-arm64: 1.31.1
+      lightningcss-darwin-arm64: 1.31.1
+      lightningcss-darwin-x64: 1.31.1
+      lightningcss-freebsd-x64: 1.31.1
+      lightningcss-linux-arm-gnueabihf: 1.31.1
+      lightningcss-linux-arm64-gnu: 1.31.1
+      lightningcss-linux-arm64-musl: 1.31.1
+      lightningcss-linux-x64-gnu: 1.31.1
+      lightningcss-linux-x64-musl: 1.31.1
+      lightningcss-win32-arm64-msvc: 1.31.1
+      lightningcss-win32-x64-msvc: 1.31.1
 
   lit-element@3.3.3:
     dependencies:
@@ -13953,6 +14124,10 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
   math-intrinsics@1.1.0: {}
 
   media-typer@0.3.0: {}
@@ -14028,14 +14203,10 @@ snapshots:
 
   multiformats@9.9.0: {}
 
-  mz@2.7.0:
-    dependencies:
-      any-promise: 1.3.0
-      object-assign: 4.1.1
-      thenify-all: 1.6.0
-
   nanoclone@0.2.1: {}
 
+  nanoid@3.3.11: {}
+
   nanoid@3.3.8: {}
 
   natural-compare@1.4.0: {}
@@ -14083,6 +14254,8 @@ snapshots:
 
   node-addon-api@2.0.2: {}
 
+  node-addon-api@7.1.1: {}
+
   node-domexception@1.0.0: {}
 
   node-fetch-native@1.6.6: {}
@@ -14101,8 +14274,6 @@ snapshots:
 
   node-mock-http@1.0.0: {}
 
-  node-releases@2.0.27: {}
-
   normalize-path@3.0.0: {}
 
   npm-run-path@5.3.0:
@@ -14117,8 +14288,6 @@ snapshots:
 
   object-assign@4.1.1: {}
 
-  object-hash@3.0.0: {}
-
   object-inspect@1.13.4: {}
 
   object-keys@1.1.1: {}
@@ -14378,8 +14547,6 @@ snapshots:
 
   picomatch@4.0.3: {}
 
-  pify@2.3.0: {}
-
   pify@3.0.0: {}
 
   pify@4.0.1: {}
@@ -14407,8 +14574,6 @@ snapshots:
       sonic-boom: 2.8.0
       thread-stream: 0.15.2
 
-  pirates@4.0.7: {}
-
   pkg-types@1.3.1:
     dependencies:
       confbox: 0.1.8
@@ -14444,37 +14609,6 @@ snapshots:
 
   possible-typed-array-names@1.1.0: {}
 
-  postcss-import@15.1.0(postcss@8.5.3):
-    dependencies:
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
-      read-cache: 1.0.0
-      resolve: 1.22.10
-
-  postcss-js@4.1.0(postcss@8.5.3):
-    dependencies:
-      camelcase-css: 2.0.1
-      postcss: 8.5.3
-
-  postcss-load-config@6.0.1(jiti@1.21.7)(postcss@8.5.3):
-    dependencies:
-      lilconfig: 3.1.3
-    optionalDependencies:
-      jiti: 1.21.7
-      postcss: 8.5.3
-
-  postcss-nested@6.2.0(postcss@8.5.3):
-    dependencies:
-      postcss: 8.5.3
-      postcss-selector-parser: 6.1.2
-
-  postcss-selector-parser@6.1.2:
-    dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
-
-  postcss-value-parser@4.2.0: {}
-
   postcss@8.4.31:
     dependencies:
       nanoid: 3.3.8
@@ -14487,6 +14621,12 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  postcss@8.5.8:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
   preact@10.24.2: {}
 
   preact@10.26.2: {}
@@ -14656,10 +14796,6 @@ snapshots:
 
   react@19.1.1: {}
 
-  read-cache@1.0.0:
-    dependencies:
-      pify: 2.3.0
-
   read-yaml-file@1.1.0:
     dependencies:
       graceful-fs: 4.2.11
@@ -15153,16 +15289,6 @@ snapshots:
       client-only: 0.0.1
       react: 19.1.1
 
-  sucrase@3.35.1:
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.8
-      commander: 4.1.1
-      lines-and-columns: 1.2.4
-      mz: 2.7.0
-      pirates: 4.0.7
-      tinyglobby: 0.2.15
-      ts-interface-checker: 0.1.13
-
   superstruct@1.0.4: {}
 
   superstruct@2.0.2: {}
@@ -15179,35 +15305,11 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  tailwind-merge@2.6.1: {}
+  tailwind-merge@3.5.0: {}
 
-  tailwindcss@3.4.19:
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      arg: 5.0.2
-      chokidar: 3.6.0
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.3.3
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      jiti: 1.21.7
-      lilconfig: 3.1.3
-      micromatch: 4.0.8
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.1.1
-      postcss: 8.5.3
-      postcss-import: 15.1.0(postcss@8.5.3)
-      postcss-js: 4.1.0(postcss@8.5.3)
-      postcss-load-config: 6.0.1(jiti@1.21.7)(postcss@8.5.3)
-      postcss-nested: 6.2.0(postcss@8.5.3)
-      postcss-selector-parser: 6.1.2
-      resolve: 1.22.10
-      sucrase: 3.35.1
-    transitivePeerDependencies:
-      - tsx
-      - yaml
+  tailwindcss@4.2.1: {}
+
+  tapable@2.3.0: {}
 
   term-size@2.2.1: {}
 
@@ -15225,14 +15327,6 @@ snapshots:
 
   text-table@0.2.0: {}
 
-  thenify-all@1.6.0:
-    dependencies:
-      thenify: 3.3.1
-
-  thenify@3.3.1:
-    dependencies:
-      any-promise: 1.3.0
-
   thread-stream@0.15.2:
     dependencies:
       real-require: 0.1.0
@@ -15243,11 +15337,6 @@ snapshots:
 
   tinybench@2.9.0: {}
 
-  tinyglobby@0.2.15:
-    dependencies:
-      fdir: 6.5.0(picomatch@4.0.3)
-      picomatch: 4.0.3
-
   tinypool@0.8.4: {}
 
   tinyspy@2.2.1: {}
@@ -15298,8 +15387,6 @@ snapshots:
     dependencies:
       typescript: 5.4.5
 
-  ts-interface-checker@0.1.13: {}
-
   tsconfig-paths@3.15.0:
     dependencies:
       '@types/json5': 0.0.29
@@ -15432,12 +15519,6 @@ snapshots:
     optionalDependencies:
       idb-keyval: 6.2.1
 
-  update-browserslist-db@1.2.3(browserslist@4.28.1):
-    dependencies:
-      browserslist: 4.28.1
-      escalade: 3.2.0
-      picocolors: 1.1.1
-
   uri-js@4.4.1:
     dependencies:
       punycode: 2.3.1
@@ -15667,13 +15748,13 @@ snapshots:
       - utf-8-validate
       - zod
 
-  vite-node@1.6.1(@types/node@22.13.4)(lightningcss@1.23.0)(terser@5.39.0):
+  vite-node@1.6.1(@types/node@22.13.4)(lightningcss@1.31.1)(terser@5.39.0):
     dependencies:
       cac: 6.7.14
       debug: 4.4.0
       pathe: 1.1.2
       picocolors: 1.1.1
-      vite: 5.4.14(@types/node@22.13.4)(lightningcss@1.23.0)(terser@5.39.0)
+      vite: 5.4.14(@types/node@22.13.4)(lightningcss@1.31.1)(terser@5.39.0)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -15685,7 +15766,7 @@ snapshots:
       - supports-color
       - terser
 
-  vite@5.4.14(@types/node@22.13.4)(lightningcss@1.23.0)(terser@5.39.0):
+  vite@5.4.14(@types/node@22.13.4)(lightningcss@1.31.1)(terser@5.39.0):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.5.3
@@ -15693,10 +15774,10 @@ snapshots:
     optionalDependencies:
       '@types/node': 22.13.4
       fsevents: 2.3.3
-      lightningcss: 1.23.0
+      lightningcss: 1.31.1
       terser: 5.39.0
 
-  vitest@1.6.1(@types/node@22.13.4)(@vitest/ui@1.6.1)(lightningcss@1.23.0)(terser@5.39.0):
+  vitest@1.6.1(@types/node@22.13.4)(@vitest/ui@1.6.1)(lightningcss@1.31.1)(terser@5.39.0):
     dependencies:
       '@vitest/expect': 1.6.1
       '@vitest/runner': 1.6.1
@@ -15715,8 +15796,8 @@ snapshots:
       strip-literal: 2.1.1
       tinybench: 2.9.0
       tinypool: 0.8.4
-      vite: 5.4.14(@types/node@22.13.4)(lightningcss@1.23.0)(terser@5.39.0)
-      vite-node: 1.6.1(@types/node@22.13.4)(lightningcss@1.23.0)(terser@5.39.0)
+      vite: 5.4.14(@types/node@22.13.4)(lightningcss@1.31.1)(terser@5.39.0)
+      vite-node: 1.6.1(@types/node@22.13.4)(lightningcss@1.31.1)(terser@5.39.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 22.13.4

From 93078d2d11c38b6b0fc4bd56f5334e272e41fd61 Mon Sep 17 00:00:00 2001
From: Ted Palmer <etpalmer17@gmail.com>
Date: Tue, 3 Mar 2026 17:13:55 -0500
Subject: [PATCH 21/25] fixes

---
 packages/ui/src/components/common/CopyToClipBoard.tsx       | 2 +-
 .../src/components/common/TokenSelector/ChainShortcuts.tsx  | 6 +++---
 .../common/TransactionModal/DepositAddressModalRenderer.tsx | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/components/common/CopyToClipBoard.tsx b/packages/ui/src/components/common/CopyToClipBoard.tsx
index f469be220..37d8324d0 100644
--- a/packages/ui/src/components/common/CopyToClipBoard.tsx
+++ b/packages/ui/src/components/common/CopyToClipBoard.tsx
@@ -42,7 +42,7 @@ export const CopyToClipBoard: FC<CopyToClipBoardProps> = ({ text }) => {
           setTimeout(() => setOpen(false), 1000)
         }}
         style={{ color: 'var(--relay-colors-gray9)' }}
-        className="hover:!relay-text-[color:var(--relay-colors-gray11)]"
+        className="relay:hover:!text-[color:var(--relay-colors-gray11)]"
       >
         <span className="relay:inline-flex relay:transition-transform relay:duration-150">
           {isCopied ? (
diff --git a/packages/ui/src/components/common/TokenSelector/ChainShortcuts.tsx b/packages/ui/src/components/common/TokenSelector/ChainShortcuts.tsx
index 2dacca5b9..379c523a2 100644
--- a/packages/ui/src/components/common/TokenSelector/ChainShortcuts.tsx
+++ b/packages/ui/src/components/common/TokenSelector/ChainShortcuts.tsx
@@ -107,7 +107,7 @@ export const ChainShortcuts: FC<ChainShortcutsProps> = ({
         color="ghost"
         size="none"
         onClick={onMoreClick}
-        className="relay:flex relay:items-center relay:gap-1 relay:px-2 relay:rounded-[8px] relay:!bg-[var(--relay-colors-gray3)] relay:text-[color:var(--relay-colors-gray9)] hover:!relay-bg-[var(--relay-colors-gray4)] relay:h-[40px]"
+        className="relay:flex relay:items-center relay:gap-1 relay:px-2 relay:rounded-[8px] relay:!bg-[var(--relay-colors-gray3)] relay:text-[color:var(--relay-colors-gray9)] relay:hover:!bg-[var(--relay-colors-gray4)] relay:h-[40px]"
       >
         <Text style="subtitle1" color="subtle">
           More
@@ -137,8 +137,8 @@ const ChainShortcutButton: FC<ChainShortcutButtonProps> = ({
       className={cn(
         'relay:flex relay:flex-col relay:items-center relay:gap-1 relay:py-2 relay:px-3 relay:rounded-[12px]',
         isSelected
-          ? 'relay:!bg-[var(--relay-colors-gray5)] hover:!relay-bg-[var(--relay-colors-gray5)]'
-          : 'relay:!bg-[var(--relay-colors-gray3)] hover:!relay-bg-[var(--relay-colors-gray4)]'
+          ? 'relay:!bg-[var(--relay-colors-gray5)] relay:hover:!bg-[var(--relay-colors-gray5)]'
+          : 'relay:!bg-[var(--relay-colors-gray3)] relay:hover:!bg-[var(--relay-colors-gray4)]'
       )}
     >
       {chain.id ? (
diff --git a/packages/ui/src/components/common/TransactionModal/DepositAddressModalRenderer.tsx b/packages/ui/src/components/common/TransactionModal/DepositAddressModalRenderer.tsx
index 4dbad030a..ba86998ca 100644
--- a/packages/ui/src/components/common/TransactionModal/DepositAddressModalRenderer.tsx
+++ b/packages/ui/src/components/common/TransactionModal/DepositAddressModalRenderer.tsx
@@ -171,7 +171,7 @@ export const DepositAddressModalRenderer: FC<Props> = ({
       })
       queryQuote(relayClient?.baseApiUrl, quoteParameters, {
         headers: {
-          'relay:sdk-version': relayClient?.version ?? 'unknown',
+          'relay-sdk-version': relayClient?.version ?? 'unknown',
           'relay-kit-ui-version': relayClient?.uiVersion ?? 'unknown'
         }
       })

From 76bb916e088b0d90be5aa6ba1c65758a3a66f130 Mon Sep 17 00:00:00 2001
From: Ted Palmer <41527174+ted-palmer@users.noreply.github.com>
Date: Wed, 4 Mar 2026 09:04:09 -0500
Subject: [PATCH 22/25] Delete .changeset/fair-cats-obey.md

---
 .changeset/fair-cats-obey.md | 6 ------
 1 file changed, 6 deletions(-)
 delete mode 100644 .changeset/fair-cats-obey.md

diff --git a/.changeset/fair-cats-obey.md b/.changeset/fair-cats-obey.md
deleted file mode 100644
index b1b773634..000000000
--- a/.changeset/fair-cats-obey.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-'@relayprotocol/relay-kit-hooks': patch
-'@relayprotocol/relay-kit-ui': patch
----
-
-Refactor deposit address transaction tracking to use requests API

From 4d3390c344da458bde126720fca180823c9f9439 Mon Sep 17 00:00:00 2001
From: Ted Palmer <etpalmer17@gmail.com>
Date: Wed, 4 Mar 2026 09:32:55 -0500
Subject: [PATCH 23/25] fixes

---
 .gitignore                                                    | 2 ++
 .../ui/src/components/common/TokenSelector/TokenSelector.tsx  | 2 +-
 packages/ui/src/components/primitives/Input.tsx               | 2 +-
 packages/ui/src/utils/steps.ts                                | 4 ++--
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/.gitignore b/.gitignore
index da905d254..a857c830a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,5 @@
+.claude/worktrees
+
 # Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore
 
 # Logs
diff --git a/packages/ui/src/components/common/TokenSelector/TokenSelector.tsx b/packages/ui/src/components/common/TokenSelector/TokenSelector.tsx
index 1286392f6..59a80f5d9 100644
--- a/packages/ui/src/components/common/TokenSelector/TokenSelector.tsx
+++ b/packages/ui/src/components/common/TokenSelector/TokenSelector.tsx
@@ -685,7 +685,7 @@ const TokenSelector: FC<TokenSelectorProps> = ({
                             </Box>
                           }
                           containerClassName={`relay:w-full relay:h-[40px] ${isDesktop ? 'relay:mb-1' : 'relay:mb-0'}`}
-                          className="relay:w-full relay:[&::placeholder]:text-ellipsis"
+                          className="relay:w-full relay:cursor-text relay:[&::placeholder]:text-ellipsis"
                           value={tokenSearchInput}
                           onChange={(e) => {
                             const value = (e.target as HTMLInputElement).value
diff --git a/packages/ui/src/components/primitives/Input.tsx b/packages/ui/src/components/primitives/Input.tsx
index 4e1400279..ebb25073d 100644
--- a/packages/ui/src/components/primitives/Input.tsx
+++ b/packages/ui/src/components/primitives/Input.tsx
@@ -5,7 +5,7 @@ import { cn } from '../../utils/cn.js'
 
 const inputVariants = cva(
   [
-    'relay:w-full relay:px-4 relay:py-3 relay:rounded-input relay:font-body relay:text-[16px]',
+    'relay:w-full relay:px-4 relay:py-3 relay:rounded-input relay:font-body relay:text-[16px] relay:cursor-text',
     'relay:text-[color:var(--relay-colors-input-color)]',
     'relay:bg-[var(--relay-colors-input-background)]',
     'relay:placeholder:text-[color:var(--relay-colors-gray9)] relay:placeholder-ellipsis',
diff --git a/packages/ui/src/utils/steps.ts b/packages/ui/src/utils/steps.ts
index 270c0987d..17a34933d 100644
--- a/packages/ui/src/utils/steps.ts
+++ b/packages/ui/src/utils/steps.ts
@@ -615,8 +615,8 @@ export const formatTransactionSteps = ({
     )
 
     result.push({
-      id: 'relay:processing',
-      action: getDisplayActionText('relay:processing'),
+      id: 'relay-processing',
+      action: getDisplayActionText('relay-processing'),
       isActive: Boolean(relayStepActive),
       isCompleted: Boolean(relayStepCompleted),
       isWalletAction: false,

From faf9be2c2bda04b3a3be2e375be0363688f89abb Mon Sep 17 00:00:00 2001
From: Ted Palmer <41527174+ted-palmer@users.noreply.github.com>
Date: Wed, 4 Mar 2026 09:47:28 -0500
Subject: [PATCH 24/25] Delete packages/ui/QA_TEST_PLAN.md

---
 packages/ui/QA_TEST_PLAN.md | 203 ------------------------------------
 1 file changed, 203 deletions(-)
 delete mode 100644 packages/ui/QA_TEST_PLAN.md

diff --git a/packages/ui/QA_TEST_PLAN.md b/packages/ui/QA_TEST_PLAN.md
deleted file mode 100644
index 2db3ae233..000000000
--- a/packages/ui/QA_TEST_PLAN.md
+++ /dev/null
@@ -1,203 +0,0 @@
-# UI Test Plan — Panda CSS → Tailwind Migration
-
-Goal: Verify zero visual/functional regressions after the CSS migration. This plan is designed to minimize QA effort by testing the highest-impact surfaces first and using a matrix approach to avoid redundant passes.
-
----
-
-## Testing Matrix
-
-We have 4 dimensions. Instead of testing every combination (explosion), we use a **primary path + targeted sweeps** approach.
-
-| Dimension | Options |
-|-----------|---------|
-| **Viewport** | Desktop (1280px+), Mobile (375px) |
-| **Theme** | Light, Dark |
-| **Browser** | Chrome, Safari, Firefox |
-| **Widget** | SwapWidget, OnrampWidget, TokenWidget |
-
-**Strategy:**
-- Do the full flow walkthroughs on **Chrome Desktop, Light + Dark**
-- Do a **mobile sweep** on Chrome + Safari (iOS) for responsive-specific behavior
-- Do a **Firefox spot-check** on desktop only (it shares Gecko layout, unlikely to diverge from Chrome on Tailwind)
-
----
-
-## Phase 1: Core Flows (Chrome Desktop, Light + Dark)
-
-These are the critical happy paths. Each should be tested in both light and dark mode.
-
-### 1.1 SwapWidget — Full Swap Flow
-**Page:** `/ui/swap`
-
-- [ ] Widget renders with correct background, border-radius, border, box-shadow
-- [ ] Token panels (sell/buy) have correct card background and borders
-- [ ] Click "Select Token" → TokenSelector dialog opens (centered, scale animation)
-- [ ] ChainFilter sidebar: search works, chains render with square icons, scrollable
-- [ ] ChainFilter starring: right-click a chain → star popover appears, chain moves to "Starred"
-- [ ] Suggested token pills render with border, no lingering focus ring after click
-- [ ] Token list: hover highlights, scroll works, keyboard nav (arrow keys from search)
-- [ ] Select an unverified token → UnverifiedTokenModal appears with warning
-- [ ] Accept unverified token → modal closes, token selected, persisted in localStorage
-- [ ] Enter amount → quote fetches, fee breakdown populates
-- [ ] USD mode toggle (⇅ button) switches between token/USD input
-- [ ] Swap arrow button: correct border (matches widget card border), hover state works
-- [ ] Swap arrow click → tokens swap positions, amounts recalculate
-- [ ] SlippageConfig: opens, Auto/Custom tabs work, color-coded rating displays
-- [ ] Fee breakdown: collapsible, slippage row always visible, price impact tooltip works
-- [ ] CTA button: "Connect Wallet" / "Swap" — italic when enabled, normal when disabled
-- [ ] Percentage buttons (25/50/75/100%) apply correct amounts
-- [ ] Multi-wallet dropdown: renders for sell side (OriginWalletSelector) and buy side (RecipientSelector)
-- [ ] CustomAddressModal: input spans full width, ENS resolution works, recent addresses show
-
-### 1.2 OnrampWidget
-**Page:** `/ui/onramp`
-
-- [ ] Widget renders with correct theming
-- [ ] Quick amount buttons ($100/$300/$1000) work
-- [ ] Token selector opens and functions correctly
-- [ ] USD/Token toggle works
-- [ ] Address entry works
-- [ ] CTA button states render correctly
-
-### 1.3 TokenWidget (Buy/Sell Tabs)
-**Page:** `/ui/token`
-
-- [ ] Tabs render and switch between Buy/Sell
-- [ ] Active tab indicator styled correctly
-- [ ] Both tab flows work: select token → enter amount → destination → swap
-- [ ] AmountModeToggle works in both tabs
-- [ ] Fee breakdown displays correctly
-
-### 1.4 Chain-Locked Mode
-**Page:** `/ui/chain`
-
-- [ ] Widget renders with locked destination chain (Base)
-- [ ] Token selector respects chain lock
-- [ ] Swap flow completes normally
-
-### 1.5 Deposit Address Flow
-**Page:** `/ui/depositAddresses`
-
-- [ ] Deposit address modal renders
-- [ ] Waiting for deposit step displays correctly
-- [ ] Copy address button works
-
----
-
-## Phase 2: Dark Mode Sweep (Chrome Desktop)
-
-Run through Phase 1 flows again in dark mode, focusing on these known dark-mode-specific items:
-
-- [ ] Widget background switches to dark gray (`gray-1`)
-- [ ] Token selector trigger background is `#202425` (not the light gray)
-- [ ] Borders switch from primary4 (violet) to gray5 (visible gray)
-- [ ] Swap arrow border matches widget card border (gray5 in dark)
-- [ ] Text colors flip correctly (gray-12 for primary text)
-- [ ] All modals have correct dark backgrounds and borders
-- [ ] Fee breakdown card background correct
-- [ ] Tooltip/popover backgrounds correct
-- [ ] Input backgrounds correct (gray-3 dark variant)
-- [ ] Skeleton loading states use correct dark gray
-- [ ] No white flashes or light-mode colors bleeding through
-
----
-
-## Phase 3: Mobile Sweep (Chrome + Safari iOS, 375px width)
-
-Test these on both light and dark mode on at least one pass.
-
-### 3.1 Dialog Behavior
-- [ ] All modals render as **bottom-sheet** (slide up from bottom, not centered)
-- [ ] Bottom-sheet animation is smooth (no janky translate conflicts)
-- [ ] Full-screen modals (TokenSelector) take full viewport
-- [ ] Swipe/tap outside to dismiss works
-
-### 3.2 TokenSelector — Mobile Layout
-- [ ] Renders in **tabbed mode** (not sidebar), with "Tokens" / "Chains" tabs
-- [ ] MobileChainSelector strip renders at top with horizontal scroll
-- [ ] Chain search works in mobile view
-- [ ] Keyboard doesn't cause layout jumps
-
-### 3.3 Tooltip → Popover Conversion
-- [ ] All tooltips render as **click-to-open popovers** on mobile (not hover)
-- [ ] Price impact tooltip, fee breakdown tooltips all tappable
-- [ ] Popover dismisses on outside tap
-
-### 3.4 Responsive Layouts
-- [ ] Widget fills viewport width correctly
-- [ ] Percentage buttons use mobile variant (taller, flex-1)
-- [ ] PercentageButtons don't overflow
-- [ ] CustomAddressModal input is full width
-- [ ] Text doesn't overflow or get clipped
-- [ ] Swap arrow button centered correctly between panels
-
-### 3.5 Safari-Specific
-- [ ] No iOS input zoom (font-size >= 16px on inputs)
-- [ ] Bottom-sheet doesn't conflict with Safari's bottom bar
-- [ ] `-webkit-appearance: none` on inputs (spin buttons hidden)
-- [ ] Animations use `-webkit-` prefixes where needed (autoprefixer should handle)
-
----
-
-## Phase 4: Firefox Spot-Check (Desktop only)
-
-Quick pass through the SwapWidget flow:
-
-- [ ] Widget renders correctly (borders, radius, shadows)
-- [ ] TokenSelector dialog opens with correct animation
-- [ ] All CSS variables resolve correctly
-- [ ] Focus ring (box-shadow inset) renders correctly
-- [ ] Scrollbar styling acceptable (Firefox uses system scrollbars)
-- [ ] Animations play smoothly
-
----
-
-## Phase 5: Customize Sidebar (Demo-specific)
-
-**Page:** `/ui/swap` with sidebar open
-
-- [ ] Theme color pickers work (primary, text, backgrounds)
-- [ ] Border radius slider updates ALL elements: widget, card, modal, input, dropdown, swap button, buttons
-- [ ] Italic CTA toggle: ON → enabled buttons italic, disabled buttons normal
-- [ ] Dark/Light mode toggle updates all theme variables
-- [ ] Reset button clears all overrides
-- [ ] Single chain mode toggle works
-- [ ] Wallet VM type checkboxes work
-
----
-
-## Quick Reference: What Changed in Migration
-
-Components that had the most styling changes (highest regression risk):
-
-| Component | Risk | Why |
-|-----------|------|-----|
-| **Dialog** | High | Animation system rewritten (keyframes + bottom-sheet) |
-| **Button** | High | All variants rewritten with CVA, CTA font-style logic changed |
-| **TokenSelector** | High | Complex responsive layout, ChainFilter interactions |
-| **SwapWidget** | Medium | Many nested styled components, swap arrow border |
-| **FeeBreakdown** | Medium | Collapsible animation, tooltip positioning |
-| **Input** | Medium | Focus ring changed from border to box-shadow |
-| **Tooltip** | Medium | Dual-mode (hover/click) with different components |
-| **SuggestedTokens** | Low | Pill styling, focus ring fix |
-| **Dropdown** | Low | Simple Radix wrapper |
-| **Pill/Switch** | Low | Minimal styling |
-
----
-
-## Recommended QA Assignment
-
-Split across 2 people to minimize total time:
-
-**Person A (Desktop focus):**
-- Phase 1 (all flows, light mode) — ~45 min
-- Phase 2 (dark mode sweep) — ~20 min
-- Phase 4 (Firefox spot-check) — ~10 min
-- Phase 5 (Customize sidebar) — ~15 min
-
-**Person B (Mobile focus):**
-- Phase 1.1 on mobile (swap flow only) — ~20 min
-- Phase 3 (full mobile sweep, Chrome + Safari) — ~30 min
-- Phase 2 on mobile (dark mode) — ~15 min
-
-**Total: ~2.5 hours combined, ~1.5 hours per person**

From c812b3186c12c02793db287002f2cb0438a37488 Mon Sep 17 00:00:00 2001
From: Ted Palmer <etpalmer17@gmail.com>
Date: Wed, 4 Mar 2026 10:35:05 -0500
Subject: [PATCH 25/25] update token row padding

---
 packages/ui/src/components/common/TokenSelector/TokenList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/common/TokenSelector/TokenList.tsx b/packages/ui/src/components/common/TokenSelector/TokenList.tsx
index 433406eb4..9ff17a08c 100644
--- a/packages/ui/src/components/common/TokenSelector/TokenList.tsx
+++ b/packages/ui/src/components/common/TokenSelector/TokenList.tsx
@@ -83,7 +83,7 @@ export const TokenList: FC<TokenListProps> = ({
               <Button
                 color="ghost"
                 size="none"
-                className="relay:gap-2 relay:cursor-pointer relay:p-3 relay:h-[58px] relay:rounded-lg relay:transition-colors relay:duration-150 relay:hover:bg-[rgba(var(--relay-colors-gray-rgb,0,0,0),0.1)] relay:shrink-0 relay:content-center relay:flex relay:w-full relay:outline-none relay:snap-start relay:focus-inset"
+                className="relay:gap-2 relay:cursor-pointer relay:p-2 relay:h-[58px] relay:rounded-lg relay:transition-colors relay:duration-150 relay:hover:bg-[rgba(var(--relay-colors-gray-rgb,0,0,0),0.1)] relay:shrink-0 relay:content-center relay:flex relay:w-full relay:outline-none relay:snap-start relay:focus-inset"
               >
                 <ChainTokenIcon
                   chainId={token.chainId}