diff --git a/package.json b/package.json
index 9e8c607..7b165e9 100644
--- a/package.json
+++ b/package.json
@@ -5,21 +5,24 @@
   "files": [
     "dist"
   ],
+  "main": "dist/index.js",
+  "module": "dist/index.mjs.js",
   "scripts": {
     "build": "tsup --config tsup.config.ts",
     "lint": "eslint src --ext .ts,tsx,js,jsx",
     "lint:types": "tsc --noEmit",
     "prettier:write": "prettier --w src",
     "clean": "rm -rf dist",
-    "build:css": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --minify"
+    "build:css": "npx @tailwindcss/cli -i ./src/styles.css -o ./dist/styles.css --minify"
   },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "require": "./dist/index.js",
+      "default": "./dist/index.mjs"
     },
-    "./style.css": "./dist/style.css"
+    "./styles.css": "./dist/styles.css"
   },
   "repository": {
     "type": "git",
@@ -34,14 +37,15 @@
     "agents"
   ],
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.0.17",
     "@types/bn.js": "^5.1.6",
     "@types/node": "^20.17.9",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
-    "autoprefixer": "^10.4.20",
-    "postcss": "^8.4.49",
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.2",
     "prettier": "^3.4.2",
-    "tailwindcss": "^3.4.16",
+    "tailwindcss": "^4.0.17",
     "tsup": "^8.3.5",
     "typescript": "^5.7.2"
   },
@@ -56,26 +60,26 @@
     "@mintbase-js/data": "^0.6.5",
     "@mintbase-js/rpc": "^0.6.5",
     "@near-wallet-selector/core": "^8.9.14",
-    "@radix-ui/react-accordion": "^1.2.2",
-    "@radix-ui/react-label": "^2.1.1",
-    "@radix-ui/react-slot": "^1.1.1",
-    "@radix-ui/react-switch": "^1.1.2",
-    "@radix-ui/react-tooltip": "^1.1.4",
+    "@radix-ui/react-accordion": "^1.2.3",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-switch": "^1.1.3",
+    "@radix-ui/react-tooltip": "^1.1.8",
     "ai": "4.1.2",
     "bn.js": "^5.2.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.462.0",
+    "lucide-react": "^0.484.0",
     "near-api-js": "4.0.3",
     "near-safe": "0.9.8",
     "openai": "^4.73.1",
     "openapi-types": "^12.1.3",
     "react-lottie-player": "^2.1.0",
     "react-markdown": "^9.0.1",
-    "recharts": "^2.15.0",
+    "recharts": "^2.15.1",
     "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",
-    "tailwind-merge": "^2.6.0",
+    "tailwind-merge": "^3.0.2",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^1.1.1",
     "viem": "^2.21.52",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a7df2f1..4ceb2aa 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -27,19 +27,19 @@ importers:
         specifier: ^8.9.14
         version: 8.10.0(near-api-js@4.0.3)
       '@radix-ui/react-accordion':
-        specifier: ^1.2.2
+        specifier: ^1.2.3
         version: 1.2.3(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-label':
-        specifier: ^2.1.1
+        specifier: ^2.1.2
         version: 2.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-slot':
-        specifier: ^1.1.1
+        specifier: ^1.1.2
         version: 1.1.2(@types/react@18.3.18)(react@18.3.1)
       '@radix-ui/react-switch':
-        specifier: ^1.1.2
+        specifier: ^1.1.3
         version: 1.1.3(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-tooltip':
-        specifier: ^1.1.4
+        specifier: ^1.1.8
         version: 1.1.8(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       ai:
         specifier: 4.1.2
@@ -54,8 +54,8 @@ importers:
         specifier: ^2.1.1
         version: 2.1.1
       lucide-react:
-        specifier: ^0.462.0
-        version: 0.462.0(react@18.3.1)
+        specifier: ^0.484.0
+        version: 0.484.0(react@18.3.1)
       near-api-js:
         specifier: 4.0.3
         version: 4.0.3
@@ -81,7 +81,7 @@ importers:
         specifier: ^9.0.1
         version: 9.0.3(@types/react@18.3.18)(react@18.3.1)
       recharts:
-        specifier: ^2.15.0
+        specifier: ^2.15.1
         version: 2.15.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       remark-gfm:
         specifier: ^4.0.0
@@ -90,11 +90,11 @@ importers:
         specifier: ^6.0.0
         version: 6.0.0
       tailwind-merge:
-        specifier: ^2.6.0
-        version: 2.6.0
+        specifier: ^3.0.2
+        version: 3.0.2
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.17)
+        version: 1.0.7(tailwindcss@4.0.17)
       vaul:
         specifier: ^1.1.1
         version: 1.1.2(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -108,6 +108,9 @@ importers:
         specifier: ^3.24.1
         version: 3.24.2
     devDependencies:
+      '@tailwindcss/postcss':
+        specifier: ^4.0.17
+        version: 4.0.17
       '@types/bn.js':
         specifier: ^5.1.6
         version: 5.1.6
@@ -121,20 +124,20 @@ importers:
         specifier: ^18.2.0
         version: 18.3.5(@types/react@18.3.18)
       autoprefixer:
-        specifier: ^10.4.20
-        version: 10.4.20(postcss@8.5.2)
+        specifier: ^10.4.21
+        version: 10.4.21(postcss@8.5.2)
       postcss:
-        specifier: ^8.4.49
+        specifier: ^8.5.2
         version: 8.5.2
       prettier:
         specifier: ^3.4.2
         version: 3.5.1
       tailwindcss:
-        specifier: ^3.4.16
-        version: 3.4.17
+        specifier: ^4.0.17
+        version: 4.0.17
       tsup:
         specifier: ^8.3.5
-        version: 8.3.6(jiti@1.21.7)(postcss@8.5.2)(typescript@5.7.3)(yaml@2.7.0)
+        version: 8.3.6(jiti@2.4.2)(postcss@8.5.2)(typescript@5.7.3)(yaml@2.7.0)
       typescript:
         specifier: ^5.7.2
         version: 5.7.3
@@ -223,6 +226,10 @@ packages:
     resolution: {integrity: sha512-aA63XwOkcl4xxQa3HjPMqOP6LiK0ZDv3mUPYEFXkpHbaFjtGggE1A61FjFzJnB+p7/oy2gA8E+rcBNl/zC1tMg==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/runtime@7.27.0':
+    resolution: {integrity: sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==}
+    engines: {node: '>=6.9.0'}
+
   '@coinbase/wallet-sdk@3.9.3':
     resolution: {integrity: sha512-N/A2DRIf0Y3PHc1XAMvbBUu4zisna6qAdqABMZwBMNEfWrXpAwx16pZGkYCLGE+Rvv1edbcB2LYDRnACNcmCiw==}
 
@@ -712,18 +719,6 @@ packages:
     resolution: {integrity: sha512-B8XBPsn4vT/KJAGqDzbwztd+6Yte3P4V7iafm24bxgDe/mlRuK6xmWPuCNrKt2vDafZ8MfJLlchDG/vYafQEjQ==}
     engines: {node: ^14.21.3 || >=16}
 
-  '@nodelib/fs.scandir@2.1.5':
-    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
-    engines: {node: '>= 8'}
-
-  '@nodelib/fs.stat@2.0.5':
-    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
-    engines: {node: '>= 8'}
-
-  '@nodelib/fs.walk@1.2.8':
-    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
-    engines: {node: '>= 8'}
-
   '@opentelemetry/api@1.9.0':
     resolution: {integrity: sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==}
     engines: {node: '>=8.0.0'}
@@ -1233,6 +1228,82 @@ packages:
   '@stablelib/x25519@1.0.3':
     resolution: {integrity: sha512-KnTbKmUhPhHavzobclVJQG5kuivH+qDLpe84iRqX3CLrKp881cF160JvXJ+hjn1aMyCwYOKeIZefIH/P5cJoRw==}
 
+  '@tailwindcss/node@4.0.17':
+    resolution: {integrity: sha512-LIdNwcqyY7578VpofXyqjH6f+3fP4nrz7FBLki5HpzqjYfXdF2m/eW18ZfoKePtDGg90Bvvfpov9d2gy5XVCbg==}
+
+  '@tailwindcss/oxide-android-arm64@4.0.17':
+    resolution: {integrity: sha512-3RfO0ZK64WAhop+EbHeyxGThyDr/fYhxPzDbEQjD2+v7ZhKTb2svTWy+KK+J1PHATus2/CQGAGp7pHY/8M8ugg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.0.17':
+    resolution: {integrity: sha512-e1uayxFQCCDuzTk9s8q7MC5jFN42IY7nzcr5n0Mw/AcUHwD6JaBkXnATkD924ZsHyPDvddnusIEvkgLd2CiREg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.0.17':
+    resolution: {integrity: sha512-d6z7HSdOKfXQ0HPlVx1jduUf/YtBuCCtEDIEFeBCzgRRtDsUuRtofPqxIVaSCUTOk5+OfRLonje6n9dF6AH8wQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.0.17':
+    resolution: {integrity: sha512-EjrVa6lx3wzXz3l5MsdOGtYIsRjgs5Mru6lDv4RuiXpguWeOb3UzGJ7vw7PEzcFadKNvNslEQqoAABeMezprxQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.0.17':
+    resolution: {integrity: sha512-65zXfCOdi8wuaY0Ye6qMR5LAXokHYtrGvo9t/NmxvSZtCCitXV/gzJ/WP5ksXPhff1SV5rov0S+ZIZU+/4eyCQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.0.17':
+    resolution: {integrity: sha512-+aaq6hJ8ioTdbJV5IA1WjWgLmun4T7eYLTvJIToiXLHy5JzUERRbIZjAcjgK9qXMwnvuu7rqpxzej+hGoEcG5g==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.0.17':
+    resolution: {integrity: sha512-/FhWgZCdUGAeYHYnZKekiOC0aXFiBIoNCA0bwzkICiMYS5Rtx2KxFfMUXQVnl4uZRblG5ypt5vpPhVaXgGk80w==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.0.17':
+    resolution: {integrity: sha512-gELJzOHK6GDoIpm/539Golvk+QWZjxQcbkKq9eB2kzNkOvrP0xc5UPgO9bIMNt1M48mO8ZeNenCMGt6tfkvVBg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.0.17':
+    resolution: {integrity: sha512-68NwxcJrZn94IOW4TysMIbYv5AlM6So1luTlbYUDIGnKma1yTFGBRNEJ+SacJ3PZE2rgcTBNRHX1TB4EQ/XEHw==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.0.17':
+    resolution: {integrity: sha512-AkBO8efP2/7wkEXkNlXzRD4f/7WerqKHlc6PWb5v0jGbbm22DFBLbIM19IJQ3b+tNewQZa+WnPOaGm0SmwMNjw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.0.17':
+    resolution: {integrity: sha512-7/DTEvXcoWlqX0dAlcN0zlmcEu9xSermuo7VNGX9tJ3nYMdo735SHvbrHDln1+LYfF6NhJ3hjbpbjkMOAGmkDg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.0.17':
+    resolution: {integrity: sha512-B4OaUIRD2uVrULpAD1Yksx2+wNarQr2rQh65nXqaqbLY1jCd8fO+3KLh/+TH4Hzh2NTHQvgxVbPdUDOtLk7vAw==}
+    engines: {node: '>= 10'}
+
+  '@tailwindcss/postcss@4.0.17':
+    resolution: {integrity: sha512-qeJbRTB5FMZXmuJF+eePd235EGY6IyJZF0Bh0YM6uMcCI4L9Z7dy+lPuLAhxOJzxnajsbjPoDAKOuAqZRtf1PQ==}
+
   '@tanstack/query-core@5.66.3':
     resolution: {integrity: sha512-+2iDxH7UFdtwcry766aJszGmbByQDIzTltJ3oQAZF9bhCxHCIN3yDwHa6qDCZxcpMGvUphCRx/RYJvLbM8mucQ==}
 
@@ -1527,9 +1598,6 @@ packages:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
 
-  arg@5.0.2:
-    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
-
   aria-hidden@1.2.4:
     resolution: {integrity: sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==}
     engines: {node: '>=10'}
@@ -1544,8 +1612,8 @@ packages:
     resolution: {integrity: sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==}
     engines: {node: '>=8.0.0'}
 
-  autoprefixer@10.4.20:
-    resolution: {integrity: sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==}
+  autoprefixer@10.4.21:
+    resolution: {integrity: sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==}
     engines: {node: ^10 || ^12 || >=14}
     hasBin: true
     peerDependencies:
@@ -1632,16 +1700,12 @@ packages:
     resolution: {integrity: sha512-YTd+6wGlNlPxSuri7Y6X8tY2dmm12UMH66RpKMhiX6rsk5wXXnYgbUcOt8kiS31/AjfoTOvCsE+w8nZQLQnzHA==}
     engines: {node: '>= 0.4'}
 
-  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-lite@1.0.30001700:
-    resolution: {integrity: sha512-2S6XIXwaE7K7erT8dY+kLQcpa5ms63XlRkMkReXjle+kf6c5g38vyMl+Z5y8dSxOFDhcFe+nxnn261PLxBSQsQ==}
+  caniuse-lite@1.0.30001707:
+    resolution: {integrity: sha512-3qtRjw/HQSMlDWf+X79N206fepf4SOOU6SQLMaq/0KkZLmSjPxAkBOQQ+FxbHKfHmYLZFfdWsO3KA90ceHPSnw==}
 
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
@@ -1734,11 +1798,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==}
 
@@ -1851,24 +1910,22 @@ packages:
   detect-browser@5.3.0:
     resolution: {integrity: sha512-53rsFbGdwMwlF7qvCt0ypLM5V5/Mbl0szB7GPN8y9NCcbknYOeVVXdrXEq+90IwAfrrzt6Hd+u2E2ntakICU8w==}
 
+  detect-libc@2.0.3:
+    resolution: {integrity: sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==}
+    engines: {node: '>=8'}
+
   detect-node-es@1.1.0:
     resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
 
   devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
 
-  didyoumean@1.2.2:
-    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-
   diff-match-patch@1.0.5:
     resolution: {integrity: sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==}
 
   dijkstrajs@1.0.3:
     resolution: {integrity: sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==}
 
-  dlv@1.1.3:
-    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
-
   dom-helpers@5.2.1:
     resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
 
@@ -1886,8 +1943,8 @@ packages:
     resolution: {integrity: sha512-zBdtR4K+wbj10bWPpIOF9DW+eFYQu8miU5ypunh0t4Bvt83ZPlEWgT5Dq/0G6uwEXumZKjfb5BZxYUZQ2Hzn/Q==}
     engines: {bun: '>=1', deno: '>=2', node: '>=16'}
 
-  electron-to-chromium@1.5.101:
-    resolution: {integrity: sha512-L0ISiQrP/56Acgu4/i/kfPwWSgrzYZUnQrC0+QPFuhqlLP1Ir7qzPPDVS9BcKIyWTRU8+o6CC8dKw38tSWhYIA==}
+  electron-to-chromium@1.5.124:
+    resolution: {integrity: sha512-riELkpDUqBi00gqreV3RIGoowxGrfueEKBd6zPdOk/I8lvuFpBGNkYoHof3zUHbiTBsIU8oxdIIL/WNrAG1/7A==}
 
   elliptic@6.5.4:
     resolution: {integrity: sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==}
@@ -1917,6 +1974,10 @@ packages:
     resolution: {integrity: sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==}
     engines: {node: '>=10.0.0'}
 
+  enhanced-resolve@5.18.1:
+    resolution: {integrity: sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==}
+    engines: {node: '>=10.13.0'}
+
   es-define-property@1.0.1:
     resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
     engines: {node: '>= 0.4'}
@@ -2008,10 +2069,6 @@ packages:
     resolution: {integrity: sha512-V7/RktU11J3I36Nwq2JnZEM7tNm17eBJz+u25qdxBZeCKiX6BkVSZQjwWIr+IobgnZy+ag73tTZgZi7tr0LrBw==}
     engines: {node: '>=6.0.0'}
 
-  fast-glob@3.3.3:
-    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
-    engines: {node: '>=8.6.0'}
-
   fast-redact@3.5.0:
     resolution: {integrity: sha512-dwsoQlS7h9hMeYUq1W++23NDcBLV4KqONnITDV9DjfS3q1SgDGVrBdvvTLUotWtPSD7asWDV9/CmsZPy8Hf70A==}
     engines: {node: '>=6'}
@@ -2019,9 +2076,6 @@ packages:
   fast-safe-stringify@2.1.1:
     resolution: {integrity: sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==}
 
-  fastq@1.19.0:
-    resolution: {integrity: sha512-7SFSRCNjBQIZH/xZR3iy5iQYR8aGBE0h3VG6/cwlbrpdciNYBMotQav8c1XI3HjHH+NikUpP53nPdlZSdWmFzA==}
-
   fdir@6.4.3:
     resolution: {integrity: sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==}
     peerDependencies:
@@ -2102,10 +2156,6 @@ packages:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
 
-  glob-parent@6.0.2:
-    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
-    engines: {node: '>=10.13.0'}
-
   glob@10.4.5:
     resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
     hasBin: true
@@ -2114,6 +2164,9 @@ packages:
     resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
     engines: {node: '>= 0.4'}
 
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
   graphql-request@5.2.0:
     resolution: {integrity: sha512-pLhKIvnMyBERL0dtFI3medKqWOz/RhHdcgbZ+hMMIb32mEPa5MJSzS4AuXxfI4sRAu6JVVk5tvXuGfCWl9JYWQ==}
     peerDependencies:
@@ -2206,10 +2259,6 @@ packages:
     resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
     engines: {node: '>= 0.4'}
 
-  is-core-module@2.16.1:
-    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
-    engines: {node: '>= 0.4'}
-
   is-decimal@2.0.1:
     resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==}
 
@@ -2278,8 +2327,8 @@ packages:
   jackspeak@3.4.3:
     resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
 
-  jiti@1.21.7:
-    resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
+  jiti@2.4.2:
+    resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
     hasBin: true
 
   joycon@3.1.1:
@@ -2325,6 +2374,70 @@ packages:
   keyvaluestorage-interface@1.0.0:
     resolution: {integrity: sha512-8t6Q3TclQ4uZynJY9IGr2+SsIGwK9JHcO6ootkHCGA0CrQCRy+VkouYNO2xicET6b9al7QKzpebNow+gkpCL8g==}
 
+  lightningcss-darwin-arm64@1.29.2:
+    resolution: {integrity: sha512-cK/eMabSViKn/PG8U/a7aCorpeKLMlK0bQeNHmdb7qUnBkNPnL+oV5DjJUo0kqWsJUapZsM4jCfYItbqBDvlcA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.29.2:
+    resolution: {integrity: sha512-j5qYxamyQw4kDXX5hnnCKMf3mLlHvG44f24Qyi2965/Ycz829MYqjrVg2H8BidybHBp9kom4D7DR5VqCKDXS0w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.29.2:
+    resolution: {integrity: sha512-wDk7M2tM78Ii8ek9YjnY8MjV5f5JN2qNVO+/0BAGZRvXKtQrBC4/cn4ssQIpKIPP44YXw6gFdpUF+Ps+RGsCwg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.29.2:
+    resolution: {integrity: sha512-IRUrOrAF2Z+KExdExe3Rz7NSTuuJ2HvCGlMKoquK5pjvo2JY4Rybr+NrKnq0U0hZnx5AnGsuFHjGnNT14w26sg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.29.2:
+    resolution: {integrity: sha512-KKCpOlmhdjvUTX/mBuaKemp0oeDIBBLFiU5Fnqxh1/DZ4JPZi4evEH7TKoSBFOSOV3J7iEmmBaw/8dpiUvRKlQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.29.2:
+    resolution: {integrity: sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.29.2:
+    resolution: {integrity: sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.29.2:
+    resolution: {integrity: sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.29.2:
+    resolution: {integrity: sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.29.2:
+    resolution: {integrity: sha512-EdIUW3B2vLuHmv7urfzMI/h2fmlnOQBk1xlsDxkN1tCWKjNFjfLhGxYk8C8mzpSfr+A6jFFIi8fU6LbQGsRWjA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.29.2:
+    resolution: {integrity: sha512-6b6gd/RUXKaw5keVdSEtqFVdzWnU5jMxTUjA2bVcMNPLwSQ08Sv/UodBVtETLCn7k4S1Ibxwh7k68IwLZPgKaA==}
+    engines: {node: '>= 12.0.0'}
+
   lilconfig@3.1.3:
     resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
     engines: {node: '>=14'}
@@ -2375,10 +2488,10 @@ packages:
   lru_map@0.4.1:
     resolution: {integrity: sha512-I+lBvqMMFfqaV8CJCISjI3wbjmwVu/VyOoU7+qtu9d7ioW5klMgsTTiUOUp+DJvfTTzKXoPbyC6YfgkNcyPSOg==}
 
-  lucide-react@0.462.0:
-    resolution: {integrity: sha512-NTL7EbAao9IFtuSivSZgrAh4fZd09Lr+6MTkqIxuHaH2nnYiYIzXPo06cOxHg9wKLdj6LL8TByG4qpePqwgx/g==}
+  lucide-react@0.484.0:
+    resolution: {integrity: sha512-oZy8coK9kZzvqhSgfbGkPtTgyjpBvs3ukLgDPv14dSOZtBtboryWF5o8i3qen7QbGg7JhiJBz5mK1p8YoMZTLQ==}
     peerDependencies:
-      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
   markdown-table@3.0.4:
     resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
@@ -2435,10 +2548,6 @@ packages:
   mdast-util-to-string@4.0.0:
     resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
 
-  merge2@1.4.1:
-    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
-    engines: {node: '>= 8'}
-
   micro-ftch@0.3.1:
     resolution: {integrity: sha512-/0LLxhzP0tfiR5hcQebtudP56gUurs2CLkGarnCiB/OqEyUFQ6U3paQi/tgLv0hBJYt2rnr9MNpxz4fiiugstg==}
 
@@ -2529,10 +2638,6 @@ packages:
   micromark@4.0.1:
     resolution: {integrity: sha512-eBPdkcoCNvYcxQOAKAlceo5SNdzZWfF+FcSupREAzdAh9rRmE239CEQAiTwIgblwnoM8zzj35sZ5ZwvSEOF6Kw==}
 
-  micromatch@4.0.8:
-    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
-    engines: {node: '>=8.6'}
-
   mime-db@1.52.0:
     resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
     engines: {node: '>= 0.6'}
@@ -2658,10 +2763,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'}
-
   ofetch@1.4.1:
     resolution: {integrity: sha512-QZj2DfGplQAr2oj9KzceK9Hwz6Whxazmn85yYeVuS3u9XTMOGMRx0kO95MQ+vLsj/S/NwBDMMLU5hpxvI6Tklw==}
 
@@ -2723,9 +2824,6 @@ packages:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
 
-  path-parse@1.0.7:
-    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
-
   path-scurry@1.11.1:
     resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
     engines: {node: '>=16 || 14 >=14.18'}
@@ -2741,10 +2839,6 @@ packages:
     resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
     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'}
@@ -2779,30 +2873,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.0.1:
-    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
-    engines: {node: ^12 || ^14 || >= 16}
-    peerDependencies:
-      postcss: ^8.4.21
-
-  postcss-load-config@4.0.2:
-    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
-    engines: {node: '>= 14'}
-    peerDependencies:
-      postcss: '>=8.0.9'
-      ts-node: '>=9.0.0'
-    peerDependenciesMeta:
-      postcss:
-        optional: true
-      ts-node:
-        optional: true
-
   postcss-load-config@6.0.1:
     resolution: {integrity: sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==}
     engines: {node: '>= 18'}
@@ -2821,16 +2891,6 @@ packages:
       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==}
 
@@ -2841,6 +2901,9 @@ packages:
   preact@10.26.0:
     resolution: {integrity: sha512-6ugi/Mb7lyV5RA6KlnijFyDLMU253i7L0RRiObIzDoqj59KT9iTeNJbA/YGw6M7jP4vxaab0DOA8DgodTOA6EQ==}
 
+  preact@10.26.4:
+    resolution: {integrity: sha512-KJhO7LBFTjP71d83trW+Ilnjbo+ySsaAgCfXOXUlmGzJ4ygYPWmysm77yg4emwfmoz3b22yvH5IsVFHbhUaH5w==}
+
   prettier@3.5.1:
     resolution: {integrity: sha512-hPpFQvHwL3Qv5AdRvBFMhnKo4tYxp0ReXiPn2bxkiohEX6mBeBwEpBSQTkD458RaaDKQMYSp4hX4UtfUTA5wDw==}
     engines: {node: '>=14'}
@@ -2877,9 +2940,6 @@ packages:
     resolution: {integrity: sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg==}
     engines: {node: '>=6'}
 
-  queue-microtask@1.2.3:
-    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
-
   quick-format-unescaped@4.0.4:
     resolution: {integrity: sha512-tYC1Q1hgyRuHgloV/YXs2w15unPVh8qfu/qCTfhTYamaw7fyhumKa2yGpdSo87vY32rIclj+4fWYQXUMs9EHvg==}
 
@@ -2958,9 +3018,6 @@ packages:
     resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
     engines: {node: '>=0.10.0'}
 
-  read-cache@1.0.0:
-    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
-
   readable-stream@2.3.8:
     resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
 
@@ -3019,15 +3076,6 @@ packages:
     resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
     engines: {node: '>=8'}
 
-  resolve@1.22.10:
-    resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
-    engines: {node: '>= 0.4'}
-    hasBin: true
-
-  reusify@1.0.4:
-    resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
-    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
-
   rfdc@1.4.1:
     resolution: {integrity: sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==}
 
@@ -3036,9 +3084,6 @@ packages:
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
-  run-parallel@1.2.0:
-    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
-
   rxjs@7.8.1:
     resolution: {integrity: sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==}
 
@@ -3175,27 +3220,25 @@ packages:
     resolution: {integrity: sha512-7JpaAoX2NGyoFlI9NBh66BQXGONc+uE+MRS5i2iOBKuS4e+ccgMDjATgZldkah+33DakBxDHiss9kvUcGAO8UQ==}
     engines: {node: '>=14.0.0'}
 
-  supports-preserve-symlinks-flag@1.0.0:
-    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
-    engines: {node: '>= 0.4'}
-
   swr@2.3.2:
     resolution: {integrity: sha512-RosxFpiabojs75IwQ316DGoDRmOqtiAj0tg8wCcbEu4CiLZBs/a9QNtHV7TUfDXmmlgqij/NqzKq/eLelyv9xA==}
     peerDependencies:
       react: ^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  tailwind-merge@2.6.0:
-    resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==}
+  tailwind-merge@3.0.2:
+    resolution: {integrity: sha512-l7z+OYZ7mu3DTqrL88RiKrKIqO3NcpEO8V/Od04bNpvk0kiIFndGEoqfuzvj4yuhRkHKjRkII2z+KS2HfPcSxw==}
 
   tailwindcss-animate@1.0.7:
     resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders'
 
-  tailwindcss@3.4.17:
-    resolution: {integrity: sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
+  tailwindcss@4.0.17:
+    resolution: {integrity: sha512-OErSiGzRa6rLiOvaipsDZvLMSpsBZ4ysB4f0VKGXUrjw2jfkJRd6kjRKV2+ZmTCNvwtvgdDam5D7w6WXsdLJZw==}
+
+  tapable@2.2.1:
+    resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
+    engines: {node: '>=6'}
 
   thenify-all@1.6.0:
     resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
@@ -3376,8 +3419,8 @@ packages:
       uploadthing:
         optional: true
 
-  update-browserslist-db@1.1.2:
-    resolution: {integrity: sha512-PPypAm5qvlD7XMZC3BujecnaOxwhrtoFR+Dqkk5Aa/6DssiH0ibKoketaj9w8LP7Bont1rYeoV5plxD7RTEPRg==}
+  update-browserslist-db@1.1.3:
+    resolution: {integrity: sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==}
     hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
@@ -3690,6 +3733,10 @@ snapshots:
     dependencies:
       regenerator-runtime: 0.14.1
 
+  '@babel/runtime@7.27.0':
+    dependencies:
+      regenerator-runtime: 0.14.1
+
   '@coinbase/wallet-sdk@3.9.3':
     dependencies:
       bn.js: 5.2.1
@@ -3699,7 +3746,7 @@ snapshots:
       eth-json-rpc-filters: 6.0.1
       eventemitter3: 5.0.1
       keccak: 3.0.4
-      preact: 10.26.0
+      preact: 10.26.4
       sha.js: 2.4.11
     transitivePeerDependencies:
       - supports-color
@@ -4416,18 +4463,6 @@ snapshots:
 
   '@noble/hashes@1.7.1': {}
 
-  '@nodelib/fs.scandir@2.1.5':
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      run-parallel: 1.2.0
-
-  '@nodelib/fs.stat@2.0.5': {}
-
-  '@nodelib/fs.walk@1.2.8':
-    dependencies:
-      '@nodelib/fs.scandir': 2.1.5
-      fastq: 1.19.0
-
   '@opentelemetry/api@1.9.0': {}
 
   '@paulmillr/qr@0.2.1': {}
@@ -4910,6 +4945,68 @@ snapshots:
       '@stablelib/random': 1.0.2
       '@stablelib/wipe': 1.0.1
 
+  '@tailwindcss/node@4.0.17':
+    dependencies:
+      enhanced-resolve: 5.18.1
+      jiti: 2.4.2
+      tailwindcss: 4.0.17
+
+  '@tailwindcss/oxide-android-arm64@4.0.17':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.0.17':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.0.17':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.0.17':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.0.17':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.0.17':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.0.17':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.0.17':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.0.17':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.0.17':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.0.17':
+    optional: true
+
+  '@tailwindcss/oxide@4.0.17':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.0.17
+      '@tailwindcss/oxide-darwin-arm64': 4.0.17
+      '@tailwindcss/oxide-darwin-x64': 4.0.17
+      '@tailwindcss/oxide-freebsd-x64': 4.0.17
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.0.17
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.0.17
+      '@tailwindcss/oxide-linux-arm64-musl': 4.0.17
+      '@tailwindcss/oxide-linux-x64-gnu': 4.0.17
+      '@tailwindcss/oxide-linux-x64-musl': 4.0.17
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.0.17
+      '@tailwindcss/oxide-win32-x64-msvc': 4.0.17
+
+  '@tailwindcss/postcss@4.0.17':
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.0.17
+      '@tailwindcss/oxide': 4.0.17
+      lightningcss: 1.29.2
+      postcss: 8.5.2
+      tailwindcss: 4.0.17
+
   '@tanstack/query-core@5.66.3': {}
 
   '@tanstack/react-query@5.66.3(react@18.3.1)':
@@ -5787,8 +5884,6 @@ snapshots:
       normalize-path: 3.0.0
       picomatch: 2.3.1
 
-  arg@5.0.2: {}
-
   aria-hidden@1.2.4:
     dependencies:
       tslib: 2.8.1
@@ -5801,10 +5896,10 @@ snapshots:
 
   atomic-sleep@1.0.0: {}
 
-  autoprefixer@10.4.20(postcss@8.5.2):
+  autoprefixer@10.4.21(postcss@8.5.2):
     dependencies:
       browserslist: 4.24.4
-      caniuse-lite: 1.0.30001700
+      caniuse-lite: 1.0.30001707
       fraction.js: 4.3.7
       normalize-range: 0.1.2
       picocolors: 1.1.1
@@ -5847,10 +5942,10 @@ snapshots:
 
   browserslist@4.24.4:
     dependencies:
-      caniuse-lite: 1.0.30001700
-      electron-to-chromium: 1.5.101
+      caniuse-lite: 1.0.30001707
+      electron-to-chromium: 1.5.124
       node-releases: 2.0.19
-      update-browserslist-db: 1.1.2(browserslist@4.24.4)
+      update-browserslist-db: 1.1.3(browserslist@4.24.4)
 
   bs58@4.0.0:
     dependencies:
@@ -5889,11 +5984,9 @@ snapshots:
       call-bind-apply-helpers: 1.0.2
       get-intrinsic: 1.2.7
 
-  camelcase-css@2.0.1: {}
-
   camelcase@5.3.1: {}
 
-  caniuse-lite@1.0.30001700: {}
+  caniuse-lite@1.0.30001707: {}
 
   ccount@2.0.1: {}
 
@@ -5983,8 +6076,6 @@ snapshots:
     dependencies:
       uncrypto: 0.1.3
 
-  cssesc@3.0.0: {}
-
   csstype@3.1.3: {}
 
   d3-array@3.2.4:
@@ -6067,23 +6158,21 @@ snapshots:
 
   detect-browser@5.3.0: {}
 
+  detect-libc@2.0.3: {}
+
   detect-node-es@1.1.0: {}
 
   devlop@1.1.0:
     dependencies:
       dequal: 2.0.3
 
-  didyoumean@1.2.2: {}
-
   diff-match-patch@1.0.5: {}
 
   dijkstrajs@1.0.3: {}
 
-  dlv@1.1.3: {}
-
   dom-helpers@5.2.1:
     dependencies:
-      '@babel/runtime': 7.26.9
+      '@babel/runtime': 7.27.0
       csstype: 3.1.3
 
   dunder-proto@1.0.1:
@@ -6108,7 +6197,7 @@ snapshots:
       '@noble/curves': 1.8.1
       '@noble/hashes': 1.7.1
 
-  electron-to-chromium@1.5.101: {}
+  electron-to-chromium@1.5.124: {}
 
   elliptic@6.5.4:
     dependencies:
@@ -6164,6 +6253,11 @@ snapshots:
 
   engine.io-parser@5.2.3: {}
 
+  enhanced-resolve@5.18.1:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.2.1
+
   es-define-property@1.0.1: {}
 
   es-errors@1.3.0: {}
@@ -6274,22 +6368,10 @@ snapshots:
 
   fast-equals@5.2.2: {}
 
-  fast-glob@3.3.3:
-    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-redact@3.5.0: {}
 
   fast-safe-stringify@2.1.1: {}
 
-  fastq@1.19.0:
-    dependencies:
-      reusify: 1.0.4
-
   fdir@6.4.3(picomatch@4.0.2):
     optionalDependencies:
       picomatch: 4.0.2
@@ -6376,10 +6458,6 @@ snapshots:
     dependencies:
       is-glob: 4.0.3
 
-  glob-parent@6.0.2:
-    dependencies:
-      is-glob: 4.0.3
-
   glob@10.4.5:
     dependencies:
       foreground-child: 3.3.0
@@ -6391,6 +6469,8 @@ snapshots:
 
   gopd@1.2.0: {}
 
+  graceful-fs@4.2.11: {}
+
   graphql-request@5.2.0(graphql@16.10.0):
     dependencies:
       '@graphql-typed-document-node/core': 3.2.0(graphql@16.10.0)
@@ -6513,10 +6593,6 @@ snapshots:
 
   is-callable@1.2.7: {}
 
-  is-core-module@2.16.1:
-    dependencies:
-      hasown: 2.0.2
-
   is-decimal@2.0.1: {}
 
   is-extglob@2.1.1: {}
@@ -6586,7 +6662,7 @@ snapshots:
     optionalDependencies:
       '@pkgjs/parseargs': 0.11.0
 
-  jiti@1.21.7: {}
+  jiti@2.4.2: {}
 
   joycon@3.1.1: {}
 
@@ -6625,6 +6701,51 @@ snapshots:
 
   keyvaluestorage-interface@1.0.0: {}
 
+  lightningcss-darwin-arm64@1.29.2:
+    optional: true
+
+  lightningcss-darwin-x64@1.29.2:
+    optional: true
+
+  lightningcss-freebsd-x64@1.29.2:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.29.2:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.29.2:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.29.2:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.29.2:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.29.2:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.29.2:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.29.2:
+    optional: true
+
+  lightningcss@1.29.2:
+    dependencies:
+      detect-libc: 2.0.3
+    optionalDependencies:
+      lightningcss-darwin-arm64: 1.29.2
+      lightningcss-darwin-x64: 1.29.2
+      lightningcss-freebsd-x64: 1.29.2
+      lightningcss-linux-arm-gnueabihf: 1.29.2
+      lightningcss-linux-arm64-gnu: 1.29.2
+      lightningcss-linux-arm64-musl: 1.29.2
+      lightningcss-linux-x64-gnu: 1.29.2
+      lightningcss-linux-x64-musl: 1.29.2
+      lightningcss-win32-arm64-msvc: 1.29.2
+      lightningcss-win32-x64-msvc: 1.29.2
+
   lilconfig@3.1.3: {}
 
   lines-and-columns@1.2.4: {}
@@ -6669,7 +6790,7 @@ snapshots:
 
   lru_map@0.4.1: {}
 
-  lucide-react@0.462.0(react@18.3.1):
+  lucide-react@0.484.0(react@18.3.1):
     dependencies:
       react: 18.3.1
 
@@ -6842,8 +6963,6 @@ snapshots:
     dependencies:
       '@types/mdast': 4.0.4
 
-  merge2@1.4.1: {}
-
   micro-ftch@0.3.1: {}
 
   micromark-core-commonmark@2.0.2:
@@ -7047,11 +7166,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  micromatch@4.0.8:
-    dependencies:
-      braces: 3.0.3
-      picomatch: 2.3.1
-
   mime-db@1.52.0: {}
 
   mime-types@2.1.35:
@@ -7240,8 +7354,6 @@ snapshots:
 
   object-assign@4.1.1: {}
 
-  object-hash@3.0.0: {}
-
   ofetch@1.4.1:
     dependencies:
       destr: 2.0.3
@@ -7313,8 +7425,6 @@ snapshots:
 
   path-key@3.1.1: {}
 
-  path-parse@1.0.7: {}
-
   path-scurry@1.11.1:
     dependencies:
       lru-cache: 10.4.3
@@ -7326,8 +7436,6 @@ snapshots:
 
   picomatch@4.0.2: {}
 
-  pify@2.3.0: {}
-
   pify@3.0.0: {}
 
   pify@5.0.0: {}
@@ -7361,43 +7469,14 @@ snapshots:
 
   possible-typed-array-names@1.1.0: {}
 
-  postcss-import@15.1.0(postcss@8.5.2):
-    dependencies:
-      postcss: 8.5.2
-      postcss-value-parser: 4.2.0
-      read-cache: 1.0.0
-      resolve: 1.22.10
-
-  postcss-js@4.0.1(postcss@8.5.2):
-    dependencies:
-      camelcase-css: 2.0.1
-      postcss: 8.5.2
-
-  postcss-load-config@4.0.2(postcss@8.5.2):
+  postcss-load-config@6.0.1(jiti@2.4.2)(postcss@8.5.2)(yaml@2.7.0):
     dependencies:
       lilconfig: 3.1.3
-      yaml: 2.7.0
     optionalDependencies:
-      postcss: 8.5.2
-
-  postcss-load-config@6.0.1(jiti@1.21.7)(postcss@8.5.2)(yaml@2.7.0):
-    dependencies:
-      lilconfig: 3.1.3
-    optionalDependencies:
-      jiti: 1.21.7
+      jiti: 2.4.2
       postcss: 8.5.2
       yaml: 2.7.0
 
-  postcss-nested@6.2.0(postcss@8.5.2):
-    dependencies:
-      postcss: 8.5.2
-      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.5.2:
@@ -7408,6 +7487,8 @@ snapshots:
 
   preact@10.26.0: {}
 
+  preact@10.26.4: {}
+
   prettier@3.5.1: {}
 
   process-nextick-args@2.0.1: {}
@@ -7445,8 +7526,6 @@ snapshots:
       split-on-first: 1.1.0
       strict-uri-encode: 2.0.0
 
-  queue-microtask@1.2.3: {}
-
   quick-format-unescaped@4.0.4: {}
 
   radix3@1.1.2: {}
@@ -7526,7 +7605,7 @@ snapshots:
 
   react-transition-group@4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      '@babel/runtime': 7.26.9
+      '@babel/runtime': 7.27.0
       dom-helpers: 5.2.1
       loose-envify: 1.4.0
       prop-types: 15.8.1
@@ -7537,10 +7616,6 @@ snapshots:
     dependencies:
       loose-envify: 1.4.0
 
-  read-cache@1.0.0:
-    dependencies:
-      pify: 2.3.0
-
   readable-stream@2.3.8:
     dependencies:
       core-util-is: 1.0.3
@@ -7633,14 +7708,6 @@ snapshots:
 
   resolve-from@5.0.0: {}
 
-  resolve@1.22.10:
-    dependencies:
-      is-core-module: 2.16.1
-      path-parse: 1.0.7
-      supports-preserve-symlinks-flag: 1.0.0
-
-  reusify@1.0.4: {}
-
   rfdc@1.4.1: {}
 
   rollup@4.34.8:
@@ -7668,10 +7735,6 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.34.8
       fsevents: 2.3.3
 
-  run-parallel@1.2.0:
-    dependencies:
-      queue-microtask: 1.2.3
-
   rxjs@7.8.1:
     dependencies:
       tslib: 2.8.1
@@ -7817,46 +7880,21 @@ snapshots:
 
   superstruct@1.0.4: {}
 
-  supports-preserve-symlinks-flag@1.0.0: {}
-
   swr@2.3.2(react@18.3.1):
     dependencies:
       dequal: 2.0.3
       react: 18.3.1
       use-sync-external-store: 1.4.0(react@18.3.1)
 
-  tailwind-merge@2.6.0: {}
+  tailwind-merge@3.0.2: {}
 
-  tailwindcss-animate@1.0.7(tailwindcss@3.4.17):
+  tailwindcss-animate@1.0.7(tailwindcss@4.0.17):
     dependencies:
-      tailwindcss: 3.4.17
+      tailwindcss: 4.0.17
 
-  tailwindcss@3.4.17:
-    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.2
-      postcss-import: 15.1.0(postcss@8.5.2)
-      postcss-js: 4.0.1(postcss@8.5.2)
-      postcss-load-config: 4.0.2(postcss@8.5.2)
-      postcss-nested: 6.2.0(postcss@8.5.2)
-      postcss-selector-parser: 6.1.2
-      resolve: 1.22.10
-      sucrase: 3.35.0
-    transitivePeerDependencies:
-      - ts-node
+  tailwindcss@4.0.17: {}
+
+  tapable@2.2.1: {}
 
   thenify-all@1.6.0:
     dependencies:
@@ -7905,7 +7943,7 @@ snapshots:
 
   tslib@2.8.1: {}
 
-  tsup@8.3.6(jiti@1.21.7)(postcss@8.5.2)(typescript@5.7.3)(yaml@2.7.0):
+  tsup@8.3.6(jiti@2.4.2)(postcss@8.5.2)(typescript@5.7.3)(yaml@2.7.0):
     dependencies:
       bundle-require: 5.1.0(esbuild@0.24.2)
       cac: 6.7.14
@@ -7915,7 +7953,7 @@ snapshots:
       esbuild: 0.24.2
       joycon: 3.1.1
       picocolors: 1.1.1
-      postcss-load-config: 6.0.1(jiti@1.21.7)(postcss@8.5.2)(yaml@2.7.0)
+      postcss-load-config: 6.0.1(jiti@2.4.2)(postcss@8.5.2)(yaml@2.7.0)
       resolve-from: 5.0.0
       rollup: 4.34.8
       source-map: 0.8.0-beta.0
@@ -7999,7 +8037,7 @@ snapshots:
     optionalDependencies:
       idb-keyval: 6.2.1
 
-  update-browserslist-db@1.1.2(browserslist@4.24.4):
+  update-browserslist-db@1.1.3(browserslist@4.24.4):
     dependencies:
       browserslist: 4.24.4
       escalade: 3.2.0
@@ -8220,7 +8258,8 @@ snapshots:
 
   y18n@4.0.3: {}
 
-  yaml@2.7.0: {}
+  yaml@2.7.0:
+    optional: true
 
   yargs-parser@18.1.3:
     dependencies:
diff --git a/postcss.config.ts b/postcss.config.ts
index fbe14a4..27ae1c9 100644
--- a/postcss.config.ts
+++ b/postcss.config.ts
@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 };
\ No newline at end of file
diff --git a/src/components/chat/AgentPill.tsx b/src/components/chat/AgentPill.tsx
index db4410e..beb34fd 100644
--- a/src/components/chat/AgentPill.tsx
+++ b/src/components/chat/AgentPill.tsx
@@ -8,7 +8,7 @@ export const AgentPill = forwardRef<HTMLDivElement, AgentPillProps>(
   ({ name }, ref) => (
     <div
       ref={ref}
-      className='bitte-w-fit bitte-rounded-full bitte-border bitte-border-dashed bitte-border-gray-40 bitte-px-2 bitte-py-1 bitte-text-xs bitte-font-semibold bitte-uppercase bitte-text-purple-400 bitte-mb-2 lg:bitte-mb-0 lg:bitte-absolute lg:bitte-left-2 lg:bitte-top-1/2 lg:bitte--translate-y-1/2'
+      className='bitte:w-fit bitte:rounded-full bitte:border bitte:border-dashed bitte:border-gray-40 bitte:px-2 bitte:py-1 bitte:text-xs bitte:font-semibold bitte:uppercase bitte:text-purple-400 bitte:mb-2 bitte:lg:mb-0 bitte:lg:absolute bitte:lg:left-2 bitte:lg:top-1/2 bitte:lg:-translate-y-1/2'
     >
       {name}
     </div>
diff --git a/src/components/chat/BitteSpinner.tsx b/src/components/chat/BitteSpinner.tsx
index b24aef8..9a74784 100644
--- a/src/components/chat/BitteSpinner.tsx
+++ b/src/components/chat/BitteSpinner.tsx
@@ -1,4 +1,4 @@
-import Lottie from "react-lottie-player/dist/LottiePlayerLight";
+import Lottie from "react-lottie-player/dist/LottiePlayerLight.js";
 
 import { Color } from "../../lib/animation-colors/colors";
 import { hexToRgb } from "../../lib/animation-colors/hex-to-rgb";
diff --git a/src/components/chat/ChatContent.tsx b/src/components/chat/ChatContent.tsx
index 123c60e..071448b 100644
--- a/src/components/chat/ChatContent.tsx
+++ b/src/components/chat/ChatContent.tsx
@@ -192,7 +192,7 @@ export const ChatContent = ({
   }, [messages.length, isInProgress, options?.prompt, append]);
 
   return (
-    <div className='bitte-relative bitte-w-full bitte-h-full bitte-flex bitte-flex-col bitte-gap-4'>
+    <div className='bitte:relative bitte:w-full bitte:h-full bitte:flex bitte:flex-col bitte:gap-4'>
       {/* Main chat container */}
       <ChatContainer
         style={{
@@ -204,7 +204,7 @@ export const ChatContent = ({
           <Button
             size='icon'
             variant='outline'
-            className='bitte-absolute bitte-bottom-2 bitte-left-1/2 bitte--translate-x-1/2 hover:bitte-bg-inherit bitte-z-[99]'
+            className='bitte:absolute bitte:bottom-2 bitte:left-1/2 bitte:-translate-x-1/2 bitte:hover:bg-inherit bitte:z-99'
             style={{
               backgroundColor: generalBackground,
               borderRadius: "9999px",
@@ -212,7 +212,7 @@ export const ChatContent = ({
             onClick={scrollToBottomHandler}
           >
             <ArrowDown
-              className='bitte-h-4 bitte-w-4'
+              className='bitte:h-4 bitte:w-4'
               style={{ color: textColor }}
             />
           </Button>
@@ -220,34 +220,34 @@ export const ChatContent = ({
 
         <div
           ref={messagesRef}
-          className='bitte-absolute bitte-inset-0 bitte-flex bitte-h-full bitte-w-full bitte-justify-center bitte-overflow-y-auto bitte-overflow-x-hidden bitte-p-4'
+          className='bitte:absolute bitte:inset-0 bitte:flex bitte:h-full bitte:w-full bitte:justify-center bitte:overflow-y-auto bitte:overflow-x-hidden bitte:p-4'
         >
           <div
             className={cn(
-              "bitte-mx-auto bitte-flex bitte-w-full bitte-flex-col md:bitte-mx-24 2xl:bitte-mx-56",
+              "bitte:mx-auto bitte:flex bitte:w-full bitte:flex-col bitte:md:mx-24 bitte:2xl:mx-56",
               !!agentId
-                ? "bitte-h-[calc(100%-240px)]"
-                : "bitte-h-[calc(100%-208px)]"
+                ? "bitte:h-[calc(100%-240px)]"
+                : "bitte:h-[calc(100%-208px)]"
             )}
           >
             {messages.length === 0 &&
               (options?.customComponents?.welcomeMessageComponent ? (
                 options.customComponents.welcomeMessageComponent
               ) : (
-                <div className='bitte-flex bitte-flex-col bitte-gap-4 bitte-items-center bitte-justify-center bitte-absolute bitte-left-1/2 bitte--translate-x-1/2 bitte-top-1/2 bitte--translate-y-1/2 bitte-text-center bitte-w-full'>
+                <div className='bitte:flex bitte:flex-col bitte:gap-4 bitte:items-center bitte:justify-center bitte:absolute bitte:left-1/2 bitte:-translate-x-1/2 bitte:top-1/2 bitte:-translate-y-1/2 bitte:text-center bitte:w-full'>
                   <img
-                    className='bitte-mx-auto bitte-mb-4'
+                    className='bitte:mx-auto bitte:mb-4'
                     src={BITTE_IMG || "/placeholder.svg"}
                     alt='Bitte'
                   />
-                  <div className='bitte-mb-14 bitte-text-[20px] bitte-font-medium bitte-text-gray-40'>
+                  <div className='bitte:mb-14 bitte:text-[20px] bitte:font-medium bitte:text-gray-40'>
                     Execute Transactions with AI
                   </div>
                 </div>
               ))}
 
             <div
-              className='bitte-flex bitte-w-full bitte-flex-col bitte-gap-4 bitte-py-6'
+              className='bitte:flex bitte:w-full bitte:flex-col bitte:gap-4 bitte:py-6'
               style={{ color: textColor }}
             >
               {groupedMessages?.map((messages: Message[]) => {
@@ -274,7 +274,7 @@ export const ChatContent = ({
               })}
 
               {error && (
-                <div className='bitte-flex bitte-flex-col bitte-items-center bitte-justify-center bitte-space-y-2 bitte-px-6 bitte-pb-6 bitte-text-center bitte-text-sm'>
+                <div className='bitte:flex bitte:flex-col bitte:items-center bitte:justify-center bitte:space-y-2 bitte:px-6 bitte:pb-6 bitte:text-center bitte:text-sm'>
                   {!accountId && !evmAddress ? (
                     <p>
                       An error occurred. <br />
diff --git a/src/components/chat/ChatInput.tsx b/src/components/chat/ChatInput.tsx
index a79a6fa..d4f0b3e 100644
--- a/src/components/chat/ChatInput.tsx
+++ b/src/components/chat/ChatInput.tsx
@@ -53,11 +53,11 @@ export const SmartActionsInput = ({
 
   return (
     <form
-      className='bitte-relative bitte-mb-0 bitte-flex bitte-w-full bitte-items-center bitte-justify-center bitte-gap-4 max-lg:bitte-flex-wrap'
+      className='bitte:relative bitte:mb-0 bitte:flex bitte:w-full bitte:items-center bitte:justify-center bitte:gap-4 bitte:max-lg:flex-wrap'
       style={{ color: textColor }}
       onSubmit={handleSubmit}
     >
-      <div className='bitte-w-full bitte-relative'>
+      <div className='bitte:w-full bitte:relative'>
         <AgentPill name={agentName || previousAgentName} ref={agentNameRef} />
 
         <Textarea
@@ -67,7 +67,7 @@ export const SmartActionsInput = ({
             background: backgroundColor,
             borderColor: borderColor,
           }}
-          className='bitte-h-[42px] bitte-w-full bitte-resize-none bitte-min-h-0 textarea-chat'
+          className='bitte:h-[42px] bitte:w-full bitte:resize-none bitte:min-h-0 textarea-chat'
           onChange={handleChange}
           onKeyDown={(e: React.KeyboardEvent<HTMLTextAreaElement>) => {
             if (e.key === "Enter" && !e.shiftKey && !isLoading) {
@@ -78,9 +78,9 @@ export const SmartActionsInput = ({
           value={input}
         />
       </div>
-      <div className='bitte-flex bitte-gap-2 bitte-w-full lg:bitte-contents'>
+      <div className='bitte:flex bitte:gap-2 bitte:w-full bitte:lg:contents'>
         {mobileInputExtraButton ? (
-          <div className='bitte-w-full lg:bitte-hidden'>
+          <div className='bitte:w-full bitte:lg:hidden'>
             {mobileInputExtraButton}
           </div>
         ) : null}
diff --git a/src/components/chat/CodeBlock.tsx b/src/components/chat/CodeBlock.tsx
index 17aa442..9dc53db 100644
--- a/src/components/chat/CodeBlock.tsx
+++ b/src/components/chat/CodeBlock.tsx
@@ -6,10 +6,10 @@ interface CodeBlockProps {
 
 export const CodeBlock = ({ content }: CodeBlockProps) => {
   return (
-    <div className="bitte-w-full">
-      <pre className="bitte-disable-scrollbars bitte-w-full bitte-overflow-x-auto bitte-rounded-lg bitte-bg-secondary bitte-p-4 bitte-text-secondary-foreground">
+    <div className="bitte:w-full">
+      <pre className="bitte-disable-scrollbars bitte:w-full bitte:overflow-x-auto bitte:rounded-lg bitte:bg-secondary bitte:p-4 bitte:text-secondary-foreground">
         <code
-          className="bitte-block bitte-w-[400px] bitte-font-mono bitte-text-sm"
+          className="bitte:block bitte:w-[400px] bitte:font-mono bitte:text-sm"
           aria-label='Code example'
         >
           {content}
diff --git a/src/components/chat/CopyStandard.tsx b/src/components/chat/CopyStandard.tsx
index 4834076..8b0f8fd 100644
--- a/src/components/chat/CopyStandard.tsx
+++ b/src/components/chat/CopyStandard.tsx
@@ -27,9 +27,9 @@ export const CopyStandard = ({
   };
 
   return (
-    <div id='copy' className="bitte-cursor-pointer bitte-p-2.5" onClick={handleCopyLink}>
+    <div id='copy' className="bitte:cursor-pointer bitte:p-2.5" onClick={handleCopyLink}>
       <span
-        className={`bitte-relative bitte-flex bitte-items-center bitte-justify-center bitte-gap-2 ${textSize ? `bitte-text-${textSize}` : "bitte-text-base"}`}
+        className={`bitte:relative bitte:flex bitte:items-center bitte:justify-center bitte:gap-2 ${textSize ? `bitte-text-${textSize}` : "bitte:text-base"}`}
       >
         {showLinkCopiedText
           ? "Copied"
@@ -39,7 +39,7 @@ export const CopyStandard = ({
               text,
               isMobile ? charSize ?? 18 : charSize ?? 35
             )}{" "}
-        <CopyIcon size={16} className="bitte-text-shad-blue-100" />
+        <CopyIcon size={16} className="bitte:text-shad-blue-100" />
       </span>
     </div>
   );
diff --git a/src/components/chat/ErrorBoundary.tsx b/src/components/chat/ErrorBoundary.tsx
index b841689..a6ced5e 100644
--- a/src/components/chat/ErrorBoundary.tsx
+++ b/src/components/chat/ErrorBoundary.tsx
@@ -22,7 +22,7 @@ export class ErrorBoundary extends React.Component<Props, State> {
   render() {
     if (this.state.hasError) {
       return (
-        <p className="bitte-my-4 bitte-overflow-auto bitte-text-center bitte-text-text-secondary">
+        <p className="bitte:my-4 bitte:overflow-auto bitte:text-center bitte:text-text-secondary">
           Something went wrong
         </p>
       );
diff --git a/src/components/chat/LoadingMessage.tsx b/src/components/chat/LoadingMessage.tsx
index 9877d72..3e793b8 100644
--- a/src/components/chat/LoadingMessage.tsx
+++ b/src/components/chat/LoadingMessage.tsx
@@ -1,8 +1,8 @@
 import { BitteSpinner } from "./BitteSpinner";
 
 const LoadingMessage = ({ color }: { color: string }) => (
-  <div className='bitte-flex bitte-flex-col bitte-items-center bitte-justify-center'>
-    <div className='bitte-flex bitte-w-full bitte-items-center bitte-justify-center'>
+  <div className='bitte:flex bitte:flex-col bitte:items-center bitte:justify-center'>
+    <div className='bitte:flex bitte:w-full bitte:items-center bitte:justify-center'>
       <BitteSpinner width={100} height={100} color={color} />
     </div>
   </div>
diff --git a/src/components/chat/MarkdownTable.tsx b/src/components/chat/MarkdownTable.tsx
index 08ca78e..4d1280d 100644
--- a/src/components/chat/MarkdownTable.tsx
+++ b/src/components/chat/MarkdownTable.tsx
@@ -31,13 +31,13 @@ export const MarkdownTable = ({ content }: { content: string }) => {
   );
 
   return (
-    <Table className="bitte-mt-4 bitte-w-full">
+    <Table className="bitte:mt-4 bitte:w-full">
       <TableHeader>
-        <TableRow className="bitte-border-none hover:bitte-bg-transparent">
+        <TableRow className="bitte:border-none bitte:hover:bg-transparent">
           {cells[0].map((header, index) => (
             <TableHead
               key={index}
-              className="bitte-whitespace-nowrap bitte-px-4 bitte-text-left text-[12px] bitte-font-medium"
+              className="bitte:whitespace-nowrap bitte:px-4 bitte:text-left text-[12px] bitte:font-medium"
             >
               {header}
             </TableHead>
@@ -46,7 +46,7 @@ export const MarkdownTable = ({ content }: { content: string }) => {
       </TableHeader>
       <TableBody>
         {cells.slice(1).map((row, rowIndex) => (
-          <TableRow key={rowIndex} className="bitte-border-none hover:bitte-bg-transparent">
+          <TableRow key={rowIndex} className="bitte:border-none bitte:hover:bg-transparent">
             {row.map((cell, cellIndex) => {
               const linkMatchQuery = cell.match(/\[Link\]\((.*)\)/);
               const linkValue = linkMatchQuery?.[1];
@@ -59,28 +59,28 @@ export const MarkdownTable = ({ content }: { content: string }) => {
               return (
                 <TableCell
                   key={cellIndex}
-                  className="bitte-whitespace-nowrap bitte-px-4 bitte-text-left"
+                  className="bitte:whitespace-nowrap bitte:px-4 bitte:text-left"
                 >
-                  <div className="bitte-max-w-[250px] bitte-break-words">
+                  <div className="bitte:max-w-[250px] bitte:break-words">
                     {linkValue ? (
                       <a href={linkValue} target='_blank'>
                         <Button
                           variant='ghost'
-                          className="bitte-flex bitte-items-center bitte-gap-2 bitte-p-0 bitte-text-shad-blue-100 hover:text-shad-blue-100"
+                          className="bitte:flex bitte:items-center bitte:gap-2 bitte:p-0 bitte:text-shad-blue-100 hover:text-shad-blue-100"
                         >
                           View
-                          <ArrowUpRight className="bitte-h-4 bitte-w-4" />
+                          <ArrowUpRight className="bitte:h-4 bitte:w-4" />
                         </Button>
                       </a>
                     ) : imageMatch ? (
-                      <div className="bitte-relative bitte-h-24 bitte-w-24">
+                      <div className="bitte:relative bitte:h-24 bitte:w-24">
                         <img
                           src={`${IMAGE_API}${imageValue}`}
                           alt={`result-${cellIndex}`}
                         />
                       </div>
                     ) : (
-                      <div className="bitte-truncate">{cell}</div>
+                      <div className="bitte:truncate">{cell}</div>
                     )}
                   </div>
                 </TableCell>
diff --git a/src/components/chat/Message.tsx b/src/components/chat/Message.tsx
index 32f0d15..59801b7 100644
--- a/src/components/chat/Message.tsx
+++ b/src/components/chat/Message.tsx
@@ -23,7 +23,7 @@ const LinkRenderer = ({
       href={href as string}
       target='_blank'
       rel='noopener noreferrer'
-      className="bitte-text-blue-300"
+      className="bitte:text-blue-300"
       {...props}
     >
       {children}
@@ -36,7 +36,7 @@ export const SAMessage = memo(({ content }: { content: string }) => {
     <MarkdownTable content={content} />
   ) : (
     <MemoizedReactMarkdown
-      className="bitte-prose bitte-dark:prose-invert bitte-prose-p:leading-relaxed bitte-prose-pre:p-0 bitte-break-words"
+      className="bitte-prose bitte-dark:prose-invert bitte-prose-p:leading-relaxed bitte-prose-pre:p-0 bitte:break-words"
       remarkPlugins={[remarkGfm, remarkMath]}
       components={{
         a: LinkRenderer,
diff --git a/src/components/chat/MessageGroup.tsx b/src/components/chat/MessageGroup.tsx
index 47d21a9..eafe7b1 100644
--- a/src/components/chat/MessageGroup.tsx
+++ b/src/components/chat/MessageGroup.tsx
@@ -150,7 +150,7 @@ export const MessageGroup = ({
           return (
             <ErrorBoundary key={`${groupKey}-${message.id}`}>
               {evmSignRequest ? (
-                <div className='bitte-my-4'>
+                <div className='bitte:my-4'>
                   <EvmTxCard
                     evmData={evmSignRequest}
                     borderColor={borderColor}
@@ -162,7 +162,7 @@ export const MessageGroup = ({
                   />
                 </div>
               ) : (
-                <div className='bitte-my-4'>
+                <div className='bitte:my-4'>
                   <ReviewTransaction
                     chatId={chatId}
                     creator={creator}
@@ -204,9 +204,9 @@ export const MessageGroup = ({
         }}
         uniqueKey={uniqueKey}
       >
-        <div className='bitte-mt-6 bitte-flex bitte-w-full bitte-flex-col bitte-gap-2'>
+        <div className='bitte:mt-6 bitte:flex bitte:w-full bitte:flex-col bitte:gap-2'>
           {message.content && (
-            <div className='bitte-flex bitte-flex-col bitte-gap-4'>
+            <div className='bitte:flex bitte:flex-col bitte:gap-4'>
               <SAMessage content={message.content} />
             </div>
           )}
@@ -218,13 +218,13 @@ export const MessageGroup = ({
 
             return (
               <div key={`${toolCallId}-${index}`}>
-                <div className='bitte-flex bitte-w-full bitte-items-center bitte-justify-between bitte-text-[12px]'>
+                <div className='bitte:flex bitte:w-full bitte:items-center bitte:justify-between bitte:text-[12px]'>
                   <div>Tool Call</div>
-                  <div className='bitte-rounded bitte-bg-shad-white-10 bitte-px-2 bitte-py-1'>
+                  <div className='bitte:rounded bitte:bg-shad-white-10 bitte:px-2 bitte:py-1'>
                     <code>{toolName}</code>
                   </div>
                 </div>
-                <div className='bitte-p-4'>
+                <div className='bitte:p-4'>
                   {(() => {
                     if (state === "result") {
                       if (!result.data) {
@@ -239,13 +239,13 @@ export const MessageGroup = ({
                           return (
                             <img
                               src={result?.data?.url}
-                              className='bitte-w-full'
+                              className='bitte:w-full'
                             />
                           );
                         }
                         case BittePrimitiveName.CREATE_DROP: {
                           return (
-                            <div className='bitte-flex bitte-items-center bitte-justify-center bitte-gap-2'>
+                            <div className='bitte:flex bitte:items-center bitte:justify-center bitte:gap-2'>
                               <Button asChild variant='link'>
                                 <a
                                   href={`/claim/${result.data}`}
@@ -306,7 +306,7 @@ export const MessageGroup = ({
                 </div>
 
                 <div
-                  className='bitte-mt-2 bitte-border-t'
+                  className='bitte:mt-2 bitte:border-t'
                   style={{ borderColor: borderColor }}
                 />
               </div>
diff --git a/src/components/chat/default-components/DefaultChatContainer.tsx b/src/components/chat/default-components/DefaultChatContainer.tsx
index 3214aa8..c290d09 100644
--- a/src/components/chat/default-components/DefaultChatContainer.tsx
+++ b/src/components/chat/default-components/DefaultChatContainer.tsx
@@ -5,7 +5,7 @@ const DefaultChatContainer = ({
   style,
 }: ChatContainerComponentProps) => (
   <div
-    className='bitte-chat-main bitte-text-start bitte-flex-1 bitte-relative bitte-min-h-[360px] bitte-w-full bitte-overflow-hidden lg:bitte-rounded-md bitte-border-t bitte-border-b lg:bitte-border bitte-pl-6'
+    className='bitte-chat-main bitte:text-start bitte:flex-1 bitte:relative bitte:min-h-[360px] bitte:w-full bitte:overflow-hidden bitte:lg:rounded-md bitte:border-t bitte:border-b bitte:lg:border bitte:pl-6'
     style={{
       backgroundColor: style?.backgroundColor,
       borderColor: style?.borderColor,
diff --git a/src/components/chat/default-components/DefaultInputContainer.tsx b/src/components/chat/default-components/DefaultInputContainer.tsx
index f83d1ee..1806532 100644
--- a/src/components/chat/default-components/DefaultInputContainer.tsx
+++ b/src/components/chat/default-components/DefaultInputContainer.tsx
@@ -2,7 +2,7 @@ import { InputContainerProps } from "../../../types";
 
 const DefaultInputContainer = ({ children, style }: InputContainerProps) => (
   <div
-    className='lg:bitte-rounded-md bitte-border-t bitte-border-b lg:bitte-border bitte-p-6 bitte-w-full'
+    className='bitte:lg:rounded-md bitte:border-t bitte:border-b bitte:lg:border bitte:p-6 bitte:w-full'
     style={{
       backgroundColor: style?.backgroundColor,
       borderColor: style?.borderColor,
diff --git a/src/components/chat/default-components/DefaultLoadingIndicator.tsx b/src/components/chat/default-components/DefaultLoadingIndicator.tsx
index a09d53b..dea9fdd 100644
--- a/src/components/chat/default-components/DefaultLoadingIndicator.tsx
+++ b/src/components/chat/default-components/DefaultLoadingIndicator.tsx
@@ -4,7 +4,7 @@ import { BitteSpinner } from "../BitteSpinner";
 const DefaultLoadingIndicator = ({
   textColor,
 }: LoadingIndicatorComponentProps) => (
-  <div className='bitte-flex bitte-w-full bitte-flex-col bitte-items-center bitte-justify-center'>
+  <div className='bitte:flex bitte:w-full bitte:flex-col bitte:items-center bitte:justify-center'>
     <BitteSpinner width={100} height={100} color={textColor || "#FFFFFF"} />
   </div>
 );
diff --git a/src/components/chat/default-components/DefaultMessageContainer.tsx b/src/components/chat/default-components/DefaultMessageContainer.tsx
index bea4fa9..ad000a1 100644
--- a/src/components/chat/default-components/DefaultMessageContainer.tsx
+++ b/src/components/chat/default-components/DefaultMessageContainer.tsx
@@ -21,7 +21,7 @@ const DefaultMessageContainer = ({
   uniqueKey,
 }: MessageGroupComponentProps) => (
   <Card
-    className='bitte-p-6'
+    className='bitte:p-6'
     style={{
       backgroundColor: style.backgroundColor,
       borderColor: style.borderColor,
@@ -32,15 +32,15 @@ const DefaultMessageContainer = ({
       type='single'
       defaultValue={uniqueKey}
       collapsible
-      className='bitte-w-full'
+      className='bitte:w-full'
     >
-      <AccordionItem value={uniqueKey} className='bitte-border-0'>
-        <AccordionTrigger className='bitte-p-0'>
-          <div className='bitte-flex bitte-items-center bitte-justify-center bitte-gap-2'>
+      <AccordionItem value={uniqueKey} className='bitte:border-0'>
+        <AccordionTrigger className='bitte:p-0'>
+          <div className='bitte:flex bitte:items-center bitte:justify-center bitte:gap-2'>
             {isUser ? (
               <>
-                <MessageSquare className='bitte-h-[18px] bitte-w-[18px]' />
-                <p className='bitte-text-[14px]'>{userName}</p>
+                <MessageSquare className='bitte:h-[18px] bitte:w-[18px]' />
+                <p className='bitte:text-[14px]'>{userName}</p>
               </>
             ) : (
               <>
@@ -48,14 +48,14 @@ const DefaultMessageContainer = ({
                   src={message.agentImage || "/placeholder.svg"}
                   fallbackSrc={BITTE_BLACK_IMG}
                   className={cn(
-                    "bitte-h-[18px] bitte-w-[18px] bitte-rounded",
+                    "bitte:h-[18px] bitte:w-[18px] bitte:rounded",
                     message.agentImage === BITTE_BLACK_IMG
-                      ? "bitte-invert-0 bitte-dark:invert"
+                      ? "bitte:invert-0 bitte-dark:invert"
                       : "bitte-dark:bg-card-list"
                   )}
                   alt={`${message.agentId} icon`}
                 />
-                <p className='bitte-text-[14px]'>
+                <p className='bitte:text-[14px]'>
                   {message.agentName || formatAgentId(message.agentId ?? "Bitte Assistant")}
                 </p>
               </>
@@ -63,7 +63,7 @@ const DefaultMessageContainer = ({
           </div>
         </AccordionTrigger>
         <AccordionContent
-          className='bitte-mt-6 bitte-border-t bitte-pb-0'
+          className='bitte:mt-6 bitte:border-t bitte:pb-0'
           style={{ borderColor: style.borderColor }}
         >
           {children}
diff --git a/src/components/chat/default-components/DefaultSendButtonComponent.tsx b/src/components/chat/default-components/DefaultSendButtonComponent.tsx
index 12e3a56..7f4d081 100644
--- a/src/components/chat/default-components/DefaultSendButtonComponent.tsx
+++ b/src/components/chat/default-components/DefaultSendButtonComponent.tsx
@@ -11,11 +11,11 @@ const DefaultSendButton = ({
   <Button
     type='submit'
     disabled={!input || isLoading}
-    className='bitte-h-[42px] bitte-w-full lg:bitte-w-[42px] bitte-p-0 disabled:bitte-opacity-20'
+    className='bitte:h-[42px] bitte:w-full bitte:lg:w-[42px] bitte:p-0 bitte:disabled:opacity-20'
     style={{ backgroundColor: buttonColor, color: textColor }}
   >
-    <ArrowUp className='bitte-h-[16px] bitte-w-[16px] bitte-hidden lg:bitte-block' />
-    <span className='lg:bitte-hidden'>Send</span>
+    <ArrowUp className='bitte:h-[16px] bitte:w-[16px] bitte:hidden bitte:lg:block' />
+    <span className='bitte:lg:hidden'>Send</span>
   </Button>
 );
 
diff --git a/src/components/chat/default-components/DefaultTxApproveButton.tsx b/src/components/chat/default-components/DefaultTxApproveButton.tsx
index 429ba6a..e3c2e9e 100644
--- a/src/components/chat/default-components/DefaultTxApproveButton.tsx
+++ b/src/components/chat/default-components/DefaultTxApproveButton.tsx
@@ -7,7 +7,7 @@ const DefaultTxApproveButton: React.FC<TransactionButtonProps> = ({
   isLoading,
   label,
 }) => (
-  <Button className='bitte-w-1/2' onClick={onClick} disabled={disabled}>
+  <Button className='bitte:w-1/2' onClick={onClick} disabled={disabled}>
     {isLoading ? "Confirming..." : label || "Approve"}
   </Button>
 );
diff --git a/src/components/chat/default-components/DefaultTxContainer.tsx b/src/components/chat/default-components/DefaultTxContainer.tsx
index 477ee79..b611912 100644
--- a/src/components/chat/default-components/DefaultTxContainer.tsx
+++ b/src/components/chat/default-components/DefaultTxContainer.tsx
@@ -6,7 +6,7 @@ const DefaultTxContainer: React.FC<TransactionContainerProps> = ({
   style,
 }) => (
   <Card
-    className='bitte-mb-8 bitte-flex bitte-flex-col bitte-justify-center bitte-w-full'
+    className='bitte:mb-8 bitte:flex bitte:flex-col bitte:justify-center bitte:w-full'
     style={{
       backgroundColor: style.backgroundColor,
       borderColor: style.borderColor,
diff --git a/src/components/chat/default-components/DefaultTxDeclineButton.tsx b/src/components/chat/default-components/DefaultTxDeclineButton.tsx
index 43ae308..9a5de3d 100644
--- a/src/components/chat/default-components/DefaultTxDeclineButton.tsx
+++ b/src/components/chat/default-components/DefaultTxDeclineButton.tsx
@@ -8,7 +8,7 @@ const DefaultTxDeclineButton: React.FC<TransactionButtonProps> = ({
 }) => (
   <Button
     variant='outline'
-    className='bitte-w-1/2'
+    className='bitte:w-1/2'
     onClick={onClick}
     disabled={disabled}
   >
diff --git a/src/components/chat/transactions/EvmTxCard.tsx b/src/components/chat/transactions/EvmTxCard.tsx
index 4165f10..f7254b2 100644
--- a/src/components/chat/transactions/EvmTxCard.tsx
+++ b/src/components/chat/transactions/EvmTxCard.tsx
@@ -51,7 +51,7 @@ export const EvmTxCard = ({
 
   if (!evmData)
     return (
-      <p className='bitte-my-4 bitte-overflow-auto bitte-text-center'>
+      <p className='bitte:my-4 bitte:overflow-auto bitte:text-center'>
         Unable to create evm transaction.
       </p>
     );
@@ -61,7 +61,7 @@ export const EvmTxCard = ({
     !evmData.params.every(isValidEvmParams)
   ) {
     return (
-      <p className='bitte-my-4 bitte-overflow-auto bitte-text-center'>
+      <p className='bitte:my-4 bitte:overflow-auto bitte:text-center'>
         Invalid EVM transaction parameters.
       </p>
     );
@@ -106,15 +106,15 @@ export const EvmTxCard = ({
       }}
     >
       <CardHeader
-        className='bitte-border-b bitte-p-4 bitte-text-center bitte-md:p-6'
+        className='bitte:border-b bitte:p-4 bitte:text-center bitte-md:p-6'
         style={{ borderColor: borderColor }}
       >
-        <p className='bitte-text-xl bitte-font-semibold'>EVM Transaction</p>
+        <p className='bitte:text-xl bitte:font-semibold'>EVM Transaction</p>
       </CardHeader>
       <div>
         {evmData ? (
-          <div className='bitte-p-6'>
-            <div className='bitte-flex bitte-flex-col bitte-gap-6 bitte-text-sm'>
+          <div className='bitte:p-6'>
+            <div className='bitte:flex bitte:flex-col bitte:gap-6 bitte:text-sm'>
               <TransactionDetail
                 label='Chain ID'
                 value={shortenString(
@@ -129,16 +129,16 @@ export const EvmTxCard = ({
                     key={`tx-${transaction.to}-${index}`}
                     value={`transaction-${index}`}
                   >
-                    <AccordionTrigger className='bitte-pt-0'>
-                      <div className='bitte-flex bitte-items-center bitte-justify-between bitte-text-sm'>
+                    <AccordionTrigger className='bitte:pt-0'>
+                      <div className='bitte:flex bitte:items-center bitte:justify-between bitte:text-sm'>
                         <p>Transaction {index + 1}</p>
                       </div>
                     </AccordionTrigger>
-                    <AccordionContent className='bitte-flex bitte-flex-col bitte-gap-6'>
+                    <AccordionContent className='bitte:flex bitte:flex-col bitte:gap-6'>
                       {transaction.to && (
                         <TransactionDetail
                           label='To'
-                          className='bitte--mr-2.5'
+                          className='bitte:-mr-2.5'
                           value={
                             <CopyStandard
                               text={transaction.to}
@@ -176,12 +176,12 @@ export const EvmTxCard = ({
       </div>
 
       {errorMsg ? (
-        <div className='bitte-flex bitte-flex-col bitte-items-center bitte-gap-4 bitte-px-6 bitte-pb-6 bitte-text-center bitte-text-sm'>
-          <p className='bitte-text-red-300'>
+        <div className='bitte:flex bitte:flex-col bitte:items-center bitte:gap-4 bitte:px-6 bitte:pb-6 bitte:text-center bitte:text-sm'>
+          <p className='bitte:text-red-300'>
             An error occurred trying to execute your transaction: {errorMsg}.
           </p>
           <Button
-            className='bitte-w-1/2'
+            className='bitte:w-1/2'
             variant='outline'
             onClick={() => {
               setErrorMsg("");
@@ -201,7 +201,7 @@ export const EvmTxCard = ({
         />
       ) : null}
       {!isLoading && !errorMsg && !txHash ? (
-        <CardFooter className='bitte-flex bitte-items-center bitte-gap-6'>
+        <CardFooter className='bitte:flex bitte:items-center bitte:gap-6'>
           <>
             <DeclineButton
               onClick={() => {
diff --git a/src/components/chat/transactions/ReviewSignMessage.tsx b/src/components/chat/transactions/ReviewSignMessage.tsx
index 41f9383..0f99bd6 100644
--- a/src/components/chat/transactions/ReviewSignMessage.tsx
+++ b/src/components/chat/transactions/ReviewSignMessage.tsx
@@ -162,25 +162,25 @@ export const ReviewSignMessage = ({
       }}
     >
       <CardHeader
-        className='bitte-border-b bitte-text-center'
+        className='bitte:border-b bitte:text-center'
         style={{ borderColor: borderColor }}
       >
-        <p className='bitte-text-[20px] bitte-font-semibold'>Sign Message</p>
+        <p className='bitte:text-[20px] bitte:font-semibold'>Sign Message</p>
       </CardHeader>
 
       <CardContent>
-        <div className='bitte-border-b' style={{ borderColor: borderColor }}>
-          <div className='bitte-flex bitte-flex-col bitte-gap-6 bitte-p-6'>
-            <div className='bitte-flex bitte-items-center bitte-justify-between bitte-text-[14px]'>
+        <div className='bitte:border-b' style={{ borderColor: borderColor }}>
+          <div className='bitte:flex bitte:flex-col bitte:gap-6 bitte:p-6'>
+            <div className='bitte:flex bitte:items-center bitte:justify-between bitte:text-[14px]'>
               <div style={{ color: textColor }}>Message</div>
               <div style={{ color: textColor }}>{message}</div>
             </div>
-            <div className='bitte-flex bitte-items-center bitte-justify-between bitte-text-[14px]'>
+            <div className='bitte:flex bitte:items-center bitte:justify-between bitte:text-[14px]'>
               <div style={{ color: textColor }}>Nonce</div>
               <div style={{ color: textColor }}>{nonce}</div>
             </div>
             {recipient ? (
-              <div className='bitte-flex bitte-items-center bitte-justify-between bitte-text-[14px]'>
+              <div className='bitte:flex bitte:items-center bitte:justify-between bitte:text-[14px]'>
                 <div style={{ color: textColor }}>Recipient</div>
                 <div style={{ color: textColor }}>{recipient}</div>
               </div>
@@ -189,9 +189,9 @@ export const ReviewSignMessage = ({
         </div>
 
         {result && !loading ? (
-          <CardContent className='bitte-pt-6'>
-            <div className='bitte-flex bitte-flex-col bitte-items-center bitte-gap-4 bitte-px-6 bitte-pb-6 bitte-text-center bitte-text-sm'>
-              <div className='bitte-flex bitte-justify-end'>
+          <CardContent className='bitte:pt-6'>
+            <div className='bitte:flex bitte:flex-col bitte:items-center bitte:gap-4 bitte:px-6 bitte:pb-6 bitte:text-center bitte:text-sm'>
+              <div className='bitte:flex bitte:justify-end'>
                 <CopyStandard
                   text={result.signature}
                   textSize='sm'
@@ -205,12 +205,12 @@ export const ReviewSignMessage = ({
       </CardContent>
 
       {errorMsg && !loading ? (
-        <div className='bitte-flex bitte-flex-col bitte-items-center bitte-gap-4 bitte-px-6 bitte-pb-6 bitte-text-center bitte-text-sm'>
-          <p className='bitte-text-red-300'>
+        <div className='bitte:flex bitte:flex-col bitte:items-center bitte:gap-4 bitte:px-6 bitte:pb-6 bitte:text-center bitte:text-sm'>
+          <p className='bitte:text-red-300'>
             An error occurred while signing the message: {errorMsg}
           </p>
           <Button
-            className='bitte-w-1/2'
+            className='bitte:w-1/2'
             variant='outline'
             onClick={() => setErrorMsg("")}
           >
@@ -222,7 +222,7 @@ export const ReviewSignMessage = ({
       {loading ? <LoadingMessage color={textColor} /> : null}
 
       {!loading && !result && !errorMsg ? (
-        <CardFooter className='bitte-flex bitte-items-center bitte-gap-6'>
+        <CardFooter className='bitte:flex bitte:items-center bitte:gap-6'>
           <DeclineButton
             onClick={() => addToolResult({ error: "User declined to sign" })}
           />
diff --git a/src/components/chat/transactions/ReviewTransaction.tsx b/src/components/chat/transactions/ReviewTransaction.tsx
index df8fe6a..cbdf2b4 100644
--- a/src/components/chat/transactions/ReviewTransaction.tsx
+++ b/src/components/chat/transactions/ReviewTransaction.tsx
@@ -1,5 +1,5 @@
 import { Transaction } from "@near-wallet-selector/core";
-import BN from "bn.js";
+import BN from "bn.js/lib/bn.js";
 import { SafeEncodedSignRequest } from "near-safe";
 import { useEffect, useState } from "react";
 import { useAccountBalance } from "../../../hooks/useAccountBalance";
@@ -103,7 +103,7 @@ export const ReviewTransaction = ({
 
   if (!transactions || transactions.length === 0) {
     return (
-      <p className='bitte-my-4 bitte-overflow-auto bitte-text-center'>
+      <p className='bitte:my-4 bitte:overflow-auto bitte:text-center'>
         Unable to create transaction.
       </p>
     );
@@ -172,19 +172,19 @@ export const ReviewTransaction = ({
       }}
     >
       <CardHeader
-        className='bitte-border-b bitte-text-center'
+        className='bitte:border-b bitte:text-center'
         style={{ borderColor: borderColor }}
       >
-        <p className='bitte-text-[20px] bitte-font-semibold'>
+        <p className='bitte:text-[20px] bitte:font-semibold'>
           Review Transaction
         </p>
       </CardHeader>
 
       <div>
         {isMint && txImage ? (
-          <div className='bitte-border-b' style={{ borderColor: borderColor }}>
-            <div className='bitte-p-6'>
-              <div className='bitte-flex bitte-items-center bitte-justify-between bitte-text-[14px]'>
+          <div className='bitte:border-b' style={{ borderColor: borderColor }}>
+            <div className='bitte:p-6'>
+              <div className='bitte:flex bitte:items-center bitte:justify-between bitte:text-[14px]'>
                 <div>Asset</div>
                 <img
                   src={`${
@@ -194,47 +194,47 @@ export const ReviewTransaction = ({
                   }`}
                   width={64}
                   height={64}
-                  className='bitte-rounded-md'
+                  className='bitte:rounded-md'
                 />
               </div>
             </div>
           </div>
         ) : null}
-        <div className='bitte-p-6'>
-          <div className='bitte-flex bitte-items-center bitte-justify-between bitte-text-[14px]'>
+        <div className='bitte:p-6'>
+          <div className='bitte:flex bitte:items-center bitte:justify-between bitte:text-[14px]'>
             <div>Tx Type</div>
 
             <TxnBadge transactionType={transactionType} />
           </div>
         </div>
-        <div className='bitte-flex bitte-flex-col bitte-gap-6 bitte-p-6'>
-          <div className='bitte-flex bitte-items-center bitte-justify-between bitte-text-[14px]'>
+        <div className='bitte:flex bitte:flex-col bitte:gap-6 bitte:p-6'>
+          <div className='bitte:flex bitte:items-center bitte:justify-between bitte:text-[14px]'>
             <div>Amount</div>
-            <div className='bitte-font-semibold'>{totalDeposit} NEAR</div>
+            <div className='bitte:font-semibold'>{totalDeposit} NEAR</div>
           </div>
-          <div className='bitte-flex bitte-items-center bitte-justify-between bitte-text-[14px]'>
+          <div className='bitte:flex bitte:items-center bitte:justify-between bitte:text-[14px]'>
             <div>From</div>
             <div>{accountId}</div>
           </div>
-          <div className='bitte-flex bitte-items-center bitte-justify-between bitte-text-[14px]'>
+          <div className='bitte:flex bitte:items-center bitte:justify-between bitte:text-[14px]'>
             <div>To</div>
             <div>{to}</div>
           </div>
         </div>
 
         {warnings && warnings.length > 0 && (
-          <div className='bitte-px-6 bitte-pb-8'>
+          <div className='bitte:px-6 bitte:pb-8'>
             <div
-              className='bitte-border-t bitte-p-4'
+              className='bitte:border-t bitte:p-4'
               style={{ borderColor: borderColor }}
             />
             {warnings.map((warning, index) => (
               <div
                 key={index}
-                className='bitte-flex bitte-items-center bitte-justify-between bitte-text-sm'
+                className='bitte:flex bitte:items-center bitte:justify-between bitte:text-sm'
               >
-                <div className='bitte-text-red-500'>Warning</div>
-                <div className='bitte-text-gray-800'>{warning.message}</div>
+                <div className='bitte:text-red-500'>Warning</div>
+                <div className='bitte:text-gray-800'>{warning.message}</div>
               </div>
             ))}
           </div>
@@ -254,12 +254,12 @@ export const ReviewTransaction = ({
       </div>
 
       {errorMsg && !loading ? (
-        <div className='bitte-flex bitte-flex-col bitte-items-center bitte-gap-4 bitte-px-6 bitte-pb-6 bitte-text-center bitte-text-sm'>
-          <p className='bitte-text-red-300'>
+        <div className='bitte:flex bitte:flex-col bitte:items-center bitte:gap-4 bitte:px-6 bitte:pb-6 bitte:text-center bitte:text-sm'>
+          <p className='bitte:text-red-300'>
             An error occurred trying to execute your transaction: {errorMsg}.
           </p>
           <Button
-            className='bitte-w-1/2'
+            className='bitte:w-1/2'
             variant='outline'
             onClick={() => {
               setErrorMsg("");
@@ -275,7 +275,7 @@ export const ReviewTransaction = ({
         <TransactionResult result={result} accountId={accountId} />
       ) : null}
       {!loading && !result && !errorMsg && accountId ? (
-        <CardFooter className='bitte-flex bitte-items-center bitte-gap-6'>
+        <CardFooter className='bitte:flex bitte:items-center bitte:gap-6'>
           <>
             <DeclineButton
               onClick={() => {
diff --git a/src/components/chat/transactions/ShowDetailsBtn.tsx b/src/components/chat/transactions/ShowDetailsBtn.tsx
index df1b88b..4e6992c 100644
--- a/src/components/chat/transactions/ShowDetailsBtn.tsx
+++ b/src/components/chat/transactions/ShowDetailsBtn.tsx
@@ -11,7 +11,7 @@ export const ShowDetailsBtn = ({
 }): JSX.Element => {
   return (
     <div
-      className="bitte-flex bitte-cursor-pointer bitte-items-center bitte-justify-center bitte-gap-2 bitte-bg-shad-white-30 bitte-py-4"
+      className="bitte:flex bitte:cursor-pointer bitte:items-center bitte:justify-center bitte:gap-2 bitte:bg-shad-white-30 bitte:py-4"
       onClick={() => setShowDetails(!showDetails)}
     >
       {showDetails ? (
@@ -19,7 +19,7 @@ export const ShowDetailsBtn = ({
       ) : (
         <ChevronsUpDown width={16} height={16} />
       )}
-      <span className="bitte-text-[12px]">{displayName}</span>
+      <span className="bitte:text-[12px]">{displayName}</span>
     </div>
   );
 };
diff --git a/src/components/chat/transactions/TransactionDetail.tsx b/src/components/chat/transactions/TransactionDetail.tsx
index 9c1ea9e..1166cfd 100644
--- a/src/components/chat/transactions/TransactionDetail.tsx
+++ b/src/components/chat/transactions/TransactionDetail.tsx
@@ -8,9 +8,9 @@ export const TransactionDetail = ({
   className?: string;
 }) => (
   <div
-    className={`bitte-flex bitte-items-center bitte-justify-between bitte-text-sm ${className}`}
+    className={`bitte:flex bitte:items-center bitte:justify-between bitte:text-sm ${className}`}
   >
-    <div className='bitte-text-text-secondary'>{label}</div>
-    <div className='bitte-break-all'>{value}</div>
+    <div className='bitte:text-text-secondary'>{label}</div>
+    <div className='bitte:break-all'>{value}</div>
   </div>
 );
diff --git a/src/components/chat/transactions/TransactionResult.tsx b/src/components/chat/transactions/TransactionResult.tsx
index 4cc243d..c9f8345 100644
--- a/src/components/chat/transactions/TransactionResult.tsx
+++ b/src/components/chat/transactions/TransactionResult.tsx
@@ -12,19 +12,19 @@ export const TransactionResult = ({
     : null;
 
   return (
-    <div className="bitte-mt-4">
-      <p className="bitte-text-center bitte-text-[14px] bitte-font-semibold">
+    <div className="bitte:mt-4">
+      <p className="bitte:text-center bitte:text-[14px] bitte:font-semibold">
         Transaction success
       </p>
       <div
-        className="bitte-flex bitte-flex-col bitte-gap-4 bitte-p-6 bitte-text-[14px]"
+        className="bitte:flex bitte:flex-col bitte:gap-4 bitte:p-6 bitte:text-[14px]"
         style={{ color: textColor }}
       >
         {evm?.txHash && scanUrl && (
-          <div className="bitte-flex bitte-items-center bitte-justify-between bitte-px-6 bitte-text-[14px]">
+          <div className="bitte:flex bitte:items-center bitte:justify-between bitte:px-6 bitte:text-[14px]">
             <div>EVM Transaction</div>
             <a
-              className="bitte-flex bitte-gap-1 bitte-items-center"
+              className="bitte:flex bitte:gap-1 bitte:items-center"
               href={scanUrl}
               target='_blank'
               rel='noopener noreferrer'
@@ -38,11 +38,11 @@ export const TransactionResult = ({
           near.receipts.map((receipt: any) => (
             <div
               key={receipt.transaction.hash}
-              className="bitte-flex bitte-items-center bitte-justify-between bitte-px-6 bitte-text-[14px]"
+              className="bitte:flex bitte:items-center bitte:justify-between bitte:px-6 bitte:text-[14px]"
             >
               <div>Near Transaction</div>
               <a
-                className="bitte-flex bitte-gap-1 bitte-items-center"
+                className="bitte:flex bitte:gap-1 bitte:items-center"
                 href={getNearblocksURL(accountId, receipt.transaction.hash)}
                 target='_blank'
                 rel='noopener noreferrer'
diff --git a/src/components/chat/transactions/TxAccordion.tsx b/src/components/chat/transactions/TxAccordion.tsx
index b1801d5..34c26a4 100644
--- a/src/components/chat/transactions/TxAccordion.tsx
+++ b/src/components/chat/transactions/TxAccordion.tsx
@@ -18,14 +18,14 @@ const TxAccordion = ({
 
   return (
     <>
-      <div className="bitte-flex bitte-items-center bitte-justify-between">
-        <div className="bitte-text-[14px] bitte-text-text-secondary">{label}</div>
+      <div className="bitte:flex bitte:items-center bitte:justify-between">
+        <div className="bitte:text-[14px] bitte:text-text-secondary">{label}</div>
 
-        <div className="bitte-flex bitte-cursor-pointer bitte-gap-0.5" onClick={toggleAccordion}>
-          <span className="bitte-flex bitte-items-center bitte-justify-center bitte-bg-shad-white-10 bitte-p-1 bitte-px-2 bitte-text-[14px] bitte-text-text-primary">
+        <div className="bitte:flex bitte:cursor-pointer bitte:gap-0.5" onClick={toggleAccordion}>
+          <span className="bitte:flex bitte:items-center bitte:justify-center bitte:bg-shad-white-10 bitte:p-1 bitte:px-2 bitte:text-[14px] bitte:text-text-primary">
             <code>{methodName}</code>
           </span>
-          <div className="bitte-flex bitte-w-[30px] bitte-items-center bitte-justify-center bitte-rounded-r-sm bitte-bg-shad-white-10 bitte-text-text-primary">
+          <div className="bitte:flex bitte:w-[30px] bitte:items-center bitte:justify-center bitte:rounded-r-sm bitte:bg-shad-white-10 bitte:text-text-primary">
             <ChevronDown
               className={`${isOpen ? "rotate-180" : ""}`}
               width={16}
@@ -34,7 +34,7 @@ const TxAccordion = ({
         </div>
       </div>
 
-      {isOpen && <div className="bitte-mt-2 bitte-w-full">{children}</div>}
+      {isOpen && <div className="bitte:mt-2 bitte:w-full">{children}</div>}
     </>
   );
 };
diff --git a/src/components/chat/transactions/TxnBadge.tsx b/src/components/chat/transactions/TxnBadge.tsx
index 6e36d16..ee658fa 100644
--- a/src/components/chat/transactions/TxnBadge.tsx
+++ b/src/components/chat/transactions/TxnBadge.tsx
@@ -8,36 +8,36 @@ const TxnBadge = ({ transactionType }: { transactionType: string }) => {
   switch (transactionType) {
     case "nft_batch_mint":
     case "mint":
-      styleClass = "bitte-bg-shad-white-10 bitte-text-shad-slate-20";
+      styleClass = "bitte:bg-shad-white-10 bitte:text-shad-slate-20";
       displayName = "Mint";
       break;
     case "nft_transfer":
-      styleClass = "bitte-bg-shad-bg-light-blue-10 bitte-text-shad-blue-100";
+      styleClass = "bitte:bg-shad-bg-light-blue-10 bitte:text-shad-blue-100";
       displayName = "Transfer";
       break;
     case "nft_approve":
-      styleClass = "bitte-bg-light-purple bitte-text-purple-100";
+      styleClass = "bitte:bg-light-purple bitte:text-purple-100";
       displayName = "List";
       break;
     case "nft_batch_burn":
-      styleClass = "bitte-bg-shad-error-5 bitte-text-shad-error";
+      styleClass = "bitte:bg-shad-error-5 bitte:text-shad-error";
       displayName = "Burn";
       break;
     case "buy":
-      styleClass = "bitte-bg-shad-light-green bitte-text-shad-green-20";
+      styleClass = "bitte:bg-shad-light-green bitte:text-shad-green-20";
       displayName = "Buy";
       break;
     case "ft_transfer":
     case "Send":
-      styleClass = "bitte-bg-shad-light-green bitte-text-shad-green-20";
+      styleClass = "bitte:bg-shad-light-green bitte:text-shad-green-20";
       displayName = "Send";
       break;
     default: // Default styles
-      styleClass = "bitte-bg-shad-white-10 bitte-text-shad-slate-20";
+      styleClass = "bitte:bg-shad-white-10 bitte:text-shad-slate-20";
       displayName = transactionType; // Default to raw transaction type if not matched
   }
 
-  return <Badge className={`bitte-px-2 ${styleClass}`}>{displayName}</Badge>;
+  return <Badge className={`bitte:px-2 ${styleClass}`}>{displayName}</Badge>;
 };
 
 export default TxnBadge;
diff --git a/src/components/chat/transactions/TxnDetail.tsx b/src/components/chat/transactions/TxnDetail.tsx
index 1fe3f83..a8df5a0 100644
--- a/src/components/chat/transactions/TxnDetail.tsx
+++ b/src/components/chat/transactions/TxnDetail.tsx
@@ -28,17 +28,17 @@ export const TxnDetail = ({
   return (
     <>
       {!!showDetails && (
-        <div className="bitte-flex bitte-flex-col">
+        <div className="bitte:flex bitte:flex-col">
           {transaction?.actions?.[0].type === "FunctionCall" && (
-            <div className="bitte-relative bitte-flex bitte-w-full bitte-flex-col bitte-gap-4 bitte-rounded bitte-p-6">
+            <div className="bitte:relative bitte:flex bitte:w-full bitte:flex-col bitte:gap-4 bitte:rounded bitte:p-6">
               {showTitle ? (
-                <span className="bitte-text-sm bitte-font-semibold">Contract Details</span>
+                <span className="bitte:text-sm bitte:font-semibold">Contract Details</span>
               ) : null}
-              <div className="bitte-flex bitte-flex-col bitte-items-start bitte-justify-start bitte-gap-2 bitte-text-sm bitte-md:flex-row bitte-md:items-center bitte-md:justify-between bitte-md:gap-0 bitte-md:space-x-4">
+              <div className="bitte:flex bitte:flex-col bitte:items-start bitte:justify-start bitte:gap-2 bitte:text-sm bitte-md:flex-row bitte-md:items-center bitte-md:justify-between bitte-md:gap-0 bitte-md:space-x-4">
                 <span>For Contract</span>
-                <span className="bitte-cursor-pointer">
+                <span className="bitte:cursor-pointer">
                   <a
-                    className="bitte-flex bitte-gap-1 bitte-items-center"
+                    className="bitte:flex bitte:gap-1 bitte:items-center"
                     href={getNearblocksURL(accountId, undefined, contractName)}
                     target='_blank'
                   >
@@ -50,8 +50,8 @@ export const TxnDetail = ({
               {method && (
                 <>
                   <TxAccordion label='Function Call' methodName={method}>
-                    <div className="bitte-overflow-x-auto bitte-rounded bitte-bg-shad-white-10 bitte-p-2 bitte-text-sm">
-                      <pre className="bitte-p-2 bitte-md:p-4">
+                    <div className="bitte:overflow-x-auto bitte:rounded bitte:bg-shad-white-10 bitte:p-2 bitte:text-sm">
+                      <pre className="bitte:p-2 bitte-md:p-4">
                         <code>
                           {JSON.stringify(
                             transaction?.actions?.[0].params?.args,
diff --git a/src/components/chat/transactions/TxnDetailMultipleAction.tsx b/src/components/chat/transactions/TxnDetailMultipleAction.tsx
index 674b583..2721262 100644
--- a/src/components/chat/transactions/TxnDetailMultipleAction.tsx
+++ b/src/components/chat/transactions/TxnDetailMultipleAction.tsx
@@ -14,8 +14,8 @@ const DetailMethods = ({
   return (
     <>
       <TxAccordion label='Function Call' methodName={method}>
-        <div className="bitte-overflow-x-auto bitte-rounded bitte-bg-shad-white-10 bitte-p-2 bitte-text-sm">
-          <pre className="bitte-p-2 md:bitte-p-4">
+        <div className="bitte:overflow-x-auto bitte:rounded bitte:bg-shad-white-10 bitte:p-2 bitte:text-sm">
+          <pre className="bitte:p-2 bitte:md:p-4">
             <code>{JSON.stringify(action, null, 2)}</code>
           </pre>
         </div>
@@ -42,15 +42,15 @@ export const TxnDetailMultipleAction = ({
   return (
     <>
       {showDetails && (
-        <div className="bitte-flex bitte-flex-col">
+        <div className="bitte:flex bitte:flex-col">
           {transaction?.actions?.[0].type === "FunctionCall" && (
-            <div className="bitte-relative bitte-flex bitte-w-full bitte-flex-col bitte-gap-4 bitte-rounded bitte-p-6">
-              <span className="bitte-text-sm bitte-font-semibold">Contract Details</span>
-              <div className="bitte-flex bitte-flex-col bitte-items-start bitte-justify-start bitte-gap-2 bitte-text-sm bitte-md:flex-row bitte-md:items-center bitte-md:justify-between bitte-md:gap-0 bitte-md:space-x-4">
+            <div className="bitte:relative bitte:flex bitte:w-full bitte:flex-col bitte:gap-4 bitte:rounded bitte:p-6">
+              <span className="bitte:text-sm bitte:font-semibold">Contract Details</span>
+              <div className="bitte:flex bitte:flex-col bitte:items-start bitte:justify-start bitte:gap-2 bitte:text-sm bitte-md:flex-row bitte-md:items-center bitte-md:justify-between bitte-md:gap-0 bitte-md:space-x-4">
                 <span>For Contract</span>
-                <span className="bitte-cursor-pointer">
+                <span className="bitte:cursor-pointer">
                   <a
-                    className="bitte-flex bitte-gap-1 bitte-items-center"
+                    className="bitte:flex bitte:gap-1 bitte:items-center"
                     href={getNearblocksURL(accountId, undefined, contractName)}
                     target='_blank'
                   >
diff --git a/src/components/chat/transactions/TxnFees.tsx b/src/components/chat/transactions/TxnFees.tsx
index 9cf7399..f7cc1ff 100644
--- a/src/components/chat/transactions/TxnFees.tsx
+++ b/src/components/chat/transactions/TxnFees.tsx
@@ -27,31 +27,31 @@ export const TxnFees = ({
     operation?.operation === "relay" || operation?.operation === "sponsor";
 
   return (
-    <div className="bitte-px-6">
+    <div className="bitte:px-6">
       <div
-        className="bitte-relative bitte-mb-1 bitte-flex bitte-w-full bitte-flex-col bitte-gap-4 bitte-rounded bitte-border-b bitte-border-slate-200 bitte-py-6"
+        className="bitte:relative bitte:mb-1 bitte:flex bitte:w-full bitte:flex-col bitte:gap-4 bitte:rounded bitte:border-b bitte:border-slate-200 bitte:py-6"
         style={{ borderColor: borderColor }}
       >
-        <span className="bitte-text-sm bitte-font-semibold">Network Fees</span>
-        <div className="bitte-flex bitte-flex-col bitte-items-start bitte-justify-start bitte-text-sm md:bitte-flex-row md:bitte-items-center md:bitte-justify-between md:bitte-gap-0 md:bitte-space-x-4">
+        <span className="bitte:text-sm bitte:font-semibold">Network Fees</span>
+        <div className="bitte:flex bitte:flex-col bitte:items-start bitte:justify-start bitte:text-sm bitte:md:flex-row bitte:md:items-center bitte:md:justify-between bitte:md:gap-0 bitte:md:space-x-4">
           <span>Estimated Fees</span>
-          <div className="bitte-flex bitte-flex-col">
-            <span className={` ${showNoTxnFeeHighlight ? "bitte-line-through" : ""}`}>
+          <div className="bitte:flex bitte:flex-col">
+            <span className={` ${showNoTxnFeeHighlight ? "bitte:line-through" : ""}`}>
               {Number(totalGas).toFixed(5)} NEAR
             </span>
             {showNoTxnFeeHighlight ? (
-              <span className="bitte-text-end bitte-text-shad-green-30">0 NEAR</span>
+              <span className="bitte:text-end bitte:text-shad-green-30">0 NEAR</span>
             ) : null}
           </div>
         </div>
-        <div className="bitte-flex bitte-flex-col bitte-items-start bitte-justify-start bitte-text-sm md:bitte-flex-row md:ibitte-tems-center md:bitte-justify-between md:bitte-gap-0 md:bitte-space-x-4">
+        <div className="bitte:flex bitte:flex-col bitte:items-start bitte:justify-start bitte:text-sm bitte:md:flex-row md:ibitte-tems-center bitte:md:justify-between bitte:md:gap-0 bitte:md:space-x-4">
           <span>Fee Limit</span>
           <span>
             {feeLimitTgas} {""}
             Tgas
           </span>
         </div>
-        <div className="bitte-flex bitte-flex-col bitte-items-start bitte-justify-start bitte-text-sm md:bitte-flex-row md:bitte-items-center md:bitte-justify-between md:bitte-gap-0 md:bitte-space-x-4">
+        <div className="bitte:flex bitte:flex-col bitte:items-start bitte:justify-start bitte:text-sm bitte:md:flex-row bitte:md:items-center bitte:md:justify-between bitte:md:gap-0 bitte:md:space-x-4">
           <span>Deposit</span>
           <span>
             {totalDeposit} {""}
diff --git a/src/components/chat/transactions/TxnListWrapper.tsx b/src/components/chat/transactions/TxnListWrapper.tsx
index 9e79374..d2fa4f0 100644
--- a/src/components/chat/transactions/TxnListWrapper.tsx
+++ b/src/components/chat/transactions/TxnListWrapper.tsx
@@ -17,8 +17,8 @@ export const TxnListWrapper = ({
   borderColor
 }: TransactionListProps): JSX.Element => {
   return (
-    <div className="bitte-mx-auto bitte-flex bitte-w-full bitte-flex-col bitte-gap-1">
-      <div className="bitte-flex bitte-w-full bitte-flex-col bitte-justify-center bitte-rounded">
+    <div className="bitte:mx-auto bitte:flex bitte:w-full bitte:flex-col bitte:gap-1">
+      <div className="bitte:flex bitte:w-full bitte:flex-col bitte:justify-center bitte:rounded">
         <ShowDetailsBtn
           setShowDetails={setShowTxnDetail}
           showDetails={showTxnDetail}
diff --git a/src/components/chat/transactions/multiple-transactions/MultipleTxnSingleAction.tsx b/src/components/chat/transactions/multiple-transactions/MultipleTxnSingleAction.tsx
index 1f0b9f6..1e7236d 100644
--- a/src/components/chat/transactions/multiple-transactions/MultipleTxnSingleAction.tsx
+++ b/src/components/chat/transactions/multiple-transactions/MultipleTxnSingleAction.tsx
@@ -24,7 +24,7 @@ export const MultipleTxnSingleActionDetail = ({
         };
 
         return (
-          <div className="bitte-mb-1" key={idx}>
+          <div className="bitte:mb-1" key={idx}>
             <TxnDetail
               accountId={accountId}
               showTitle={idx === 0}
diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
index 505bab7..19bcf27 100644
--- a/src/components/ui/accordion.tsx
+++ b/src/components/ui/accordion.tsx
@@ -22,17 +22,17 @@ const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
 >(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className='bitte-flex'>
+  <AccordionPrimitive.Header className='bitte:flex'>
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        "bitte-flex bitte-flex-1 bitte-items-center bitte-justify-between bitte-text-sm bitte-font-medium bitte-transition-all bitte-text-left [&[data-state=open]>svg]:bitte-rotate-180",
+        "bitte:flex bitte:flex-1 bitte:items-center bitte:justify-between bitte:text-sm bitte:font-medium bitte:transition-all bitte:text-left bitte:[&[data-state=open]>svg]:rotate-180",
         className
       )}
       {...props}
     >
       {children}
-      <ChevronDown className='bitte-h-4 bitte-w-4 bitte-shrink-0 bitte-text-muted-foreground bitte-transition-transform bitte-duration-200' />
+      <ChevronDown className='bitte:h-4 bitte:w-4 bitte:shrink-0 bitte:text-muted-foreground bitte:transition-transform bitte:duration-200' />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ));
@@ -44,10 +44,10 @@ const AccordionContent = React.forwardRef<
 >(({ className, children, style, ...props }, ref) => (
   <AccordionPrimitive.Content
     ref={ref}
-    className='bitte-overflow-hidden bitte-text-sm data-[state=closed]:bitte-animate-accordion-up data-[state=open]:bitte-animate-accordion-down'
+    className='bitte:overflow-hidden bitte:text-sm bitte:data-[state=closed]:animate-accordion-up bitte:data-[state=open]:animate-accordion-down'
     {...props}
   >
-    <div className={cn("bitte-pb-4 bitte-pt-0", className)} style={style}>
+    <div className={cn("bitte:pb-4 bitte:pt-0", className)} style={style}>
       {children}
     </div>
   </AccordionPrimitive.Content>
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
index bd65a2c..8732af7 100644
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@@ -4,17 +4,17 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "../../lib/utils"
 
 const badgeVariants = cva(
-  "bitte-inline-flex bitte-items-center bitte-rounded-md bitte-border bitte-px-2.5 bitte-py-0.5 bitte-text-xs bitte-font-semibold bitte-transition-colors focus:bitte-outline-none focus:bitte-ring-2 focus:bitte-ring-ring focus:bitte-ring-offset-2",
+  "bitte:inline-flex bitte:items-center bitte:rounded-md bitte:border bitte:px-2.5 bitte:py-0.5 bitte:text-xs bitte:font-semibold bitte:transition-colors bitte:focus:outline-hidden bitte:focus:ring-2 bitte:focus:ring-ring bitte:focus:ring-offset-2",
   {
     variants: {
       variant: {
         default:
-          "bitte-border-transparent bitte-bg-primary bitte-text-primary-foreground bitte-shadow hover:bitte-bg-primary/80",
+          "bitte:border-transparent bitte:bg-primary bitte:text-primary-foreground bitte:shadow bitte:hover:bg-primary/80",
         secondary:
-          "bitte-border-transparent bitte-bg-secondary bitte-text-secondary-foreground hover:bitte-bg-secondary/80",
+          "bitte:border-transparent bitte:bg-secondary bitte:text-secondary-foreground bitte:hover:bg-secondary/80",
         destructive:
-          "bitte-border-transparent bitte-bg-destructive bitte-text-destructive-foreground bitte-shadow hover:bitte-bg-destructive/80",
-        outline: "bitte-text-foreground",
+          "bitte:border-transparent bitte:bg-destructive bitte:text-destructive-foreground bitte:shadow bitte:hover:bg-destructive/80",
+        outline: "bitte:text-foreground",
       },
     },
     defaultVariants: {
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 4748f4d..6cb3e31 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -5,26 +5,26 @@ import * as React from "react";
 import { cn } from "../../lib/utils";
 
 const buttonVariants = cva(
-  "bitte-inline-flex bitte-items-center bitte-justify-center bitte-gap-2 bitte-whitespace-nowrap bitte-rounded-md bitte-text-sm bitte-font-medium bitte-transition-colors focus-visible:bitte-outline-none focus-visible:bitte-ring-1 focus-visible:bitte-ring-ring disabled:bitte-pointer-events-none disabled:bitte-opacity-50 [&_svg]:bitte-pointer-events-none [&_svg]:bitte-size-4 [&_svg]:bitte-shrink-0",
+  "bitte:inline-flex bitte:items-center bitte:justify-center bitte:gap-2 bitte:whitespace-nowrap bitte:rounded-md bitte:text-sm bitte:font-medium bitte:transition-colors bitte:focus-visible:outline-hidden bitte:focus-visible:ring-1 bitte:focus-visible:ring-ring bitte:disabled:pointer-events-none bitte:disabled:opacity-50 bitte:[&_svg]:pointer-events-none bitte:[&_svg]:size-4 bitte:[&_svg]:shrink-0",
   {
     variants: {
       variant: {
         default:
-          "bitte-bg-white bitte-text-black bitte-shadow hover:bitte-bg-opacity-80",
+          "bitte:bg-white bitte:text-black bitte:shadow bitte:hover:bg-opacity-80",
         destructive:
-          "bitte-bg-destructive bitte-text-destructive-foreground bitte-shadow-sm hover:bitte-bg-destructive/90",
+          "bitte:bg-destructive bitte:text-destructive-foreground bitte:shadow-sm bitte:hover:bg-destructive/90",
         outline:
-          "bitte-border bitte-border-input bitte-bg-transparent bitte-shadow-sm hover:bitte-bg-accent hover:bitte-text-accent-foreground",
+          "bitte:border bitte:border-input bitte:bg-transparent bitte:shadow-sm bitte:hover:bg-accent bitte:hover:text-accent-foreground",
         secondary:
-          "bitte-bg-secondary bitte-text-secondary-foreground bitte-shadow-sm hover:bitte-bg-secondary/80",
-        ghost: "hover:bitte-bg-accent hover:bitte-text-accent-foreground",
-        link: "bitte-text-primary bitte-underline-offset-4 hover:bitte-underline",
+          "bitte:bg-secondary bitte:text-secondary-foreground bitte:shadow-sm bitte:hover:bg-secondary/80",
+        ghost: "bitte:hover:bg-accent bitte:hover:text-accent-foreground",
+        link: "bitte:text-primary bitte:underline-offset-4 bitte:hover:underline",
       },
       size: {
-        default: "bitte-h-9 bitte-px-4 bitte-py-2",
-        sm: "bitte-h-8 bitte-rounded-md bitte-px-3 bitte-text-xs",
-        lg: "bitte-h-10 bitte-rounded-md bitte-px-8",
-        icon: "bitte-h-9 bitte-w-9",
+        default: "bitte:h-9 bitte:px-4 bitte:py-2",
+        sm: "bitte:h-8 bitte:rounded-md bitte:px-3 bitte:text-xs",
+        lg: "bitte:h-10 bitte:rounded-md bitte:px-8",
+        icon: "bitte:h-9 bitte:w-9",
       },
     },
     defaultVariants: {
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index e4bf518..caf8bcf 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "bitte-rounded-md bitte-border bitte-bg-card bitte-text-card-foreground bitte-shadow sm:bitte-min-w-[320px] xl:bitte-min-w-[500px]",
+      "bitte:rounded-md bitte:border bitte:bg-card bitte:text-card-foreground bitte:shadow bitte:sm:min-w-[320px] bitte:xl:min-w-[500px]",
       className
     )}
     style={style}
@@ -25,7 +25,7 @@ const CardHeader = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "bitte-flex bitte-flex-col bitte-space-y-1.5 bitte-p-6",
+      "bitte:flex bitte:flex-col bitte:space-y-1.5 bitte:p-6",
       className
     )}
     style={style}
@@ -41,7 +41,7 @@ const CardTitle = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "bitte-font-semibold bitte-leading-none bitte-tracking-tight",
+      "bitte:font-semibold bitte:leading-none bitte:tracking-tight",
       className
     )}
     {...props}
@@ -55,7 +55,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("bitte-text-sm bitte-text-muted-foreground", className)}
+    className={cn("bitte:text-sm bitte:text-muted-foreground", className)}
     {...props}
   />
 ));
@@ -65,7 +65,7 @@ const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("bitte-p-6 bitte-pt-0", className)} {...props} />
+  <div ref={ref} className={cn("bitte:p-6 bitte:pt-0", className)} {...props} />
 ));
 CardContent.displayName = "CardContent";
 
@@ -76,7 +76,7 @@ const CardFooter = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "bitte-flex bitte-items-center bitte-p-6 bitte-pt-0",
+      "bitte:flex bitte:items-center bitte:p-6 bitte:pt-0",
       className
     )}
     {...props}
diff --git a/src/components/ui/chart.tsx b/src/components/ui/chart.tsx
index 6106a01..2b95215 100644
--- a/src/components/ui/chart.tsx
+++ b/src/components/ui/chart.tsx
@@ -49,7 +49,7 @@ const ChartContainer = React.forwardRef<
         data-chart={chartId}
         ref={ref}
         className={cn(
-          "bitte-flex bitte-aspect-video bitte-justify-center bitte-text-xs [&_.recharts-cartesian-axis-tick_text]:bitte-fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke=#ccc]]:bitte-stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:bitte-stroke-border [&_.recharts-dot[stroke=#fff]]:bitte-stroke-transparent [&_.recharts-layer]:bitte-outline-none [&_.recharts-polar-grid_[stroke=#ccc]]:bitte-stroke-border [&_.recharts-radial-bar-background-sector]:bitte-fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:bitte-fill-muted [&_.recharts-reference-line_[stroke=#ccc]]:bitte-stroke-border [&_.recharts-sector[stroke=#fff]]:bitte-stroke-transparent [&_.recharts-sector]:bitte-outline-none [&_.recharts-surface]:bitte-outline-none",
+          "bitte:flex bitte:aspect-video bitte:justify-center bitte:text-xs bitte:[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground bitte:[&_.recharts-cartesian-grid_line[stroke=#ccc]]:stroke-border/50 bitte:[&_.recharts-curve.recharts-tooltip-cursor]:stroke-border bitte:[&_.recharts-dot[stroke=#fff]]:stroke-transparent bitte:[&_.recharts-layer]:outline-hidden bitte:[&_.recharts-polar-grid_[stroke=#ccc]]:stroke-border bitte:[&_.recharts-radial-bar-background-sector]:fill-muted bitte:[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted bitte:[&_.recharts-reference-line_[stroke=#ccc]]:stroke-border bitte:[&_.recharts-sector[stroke=#fff]]:stroke-transparent bitte:[&_.recharts-sector]:outline-hidden bitte:[&_.recharts-surface]:outline-hidden",
           className
         )}
         {...props}
@@ -145,7 +145,7 @@ const ChartTooltipContent = React.forwardRef<
 
       if (labelFormatter) {
         return (
-          <div className={cn("bitte-font-medium", labelClassName)}>
+          <div className={cn("bitte:font-medium", labelClassName)}>
             {labelFormatter(value, payload)}
           </div>
         );
@@ -156,7 +156,7 @@ const ChartTooltipContent = React.forwardRef<
       }
 
       return (
-        <div className={cn("bitte-font-medium", labelClassName)}>{value}</div>
+        <div className={cn("bitte:font-medium", labelClassName)}>{value}</div>
       );
     }, [
       label,
@@ -178,12 +178,12 @@ const ChartTooltipContent = React.forwardRef<
       <div
         ref={ref}
         className={cn(
-          "bitte-grid bitte-min-w-[8rem] bitte-items-start bitte-gap-1.5 bitte-rounded-lg bitte-border bitte-border-border/50 bitte-bg-background bitte-px-2.5 bitte-py-1.5 bitte-text-xs bitte-shadow-xl",
+          "bitte:grid bitte:min-w-[8rem] bitte:items-start bitte:gap-1.5 bitte:rounded-lg bitte:border bitte:border-border/50 bitte:bg-background bitte:px-2.5 bitte:py-1.5 bitte:text-xs bitte:shadow-xl",
           className
         )}
       >
         {!nestLabel ? tooltipLabel : null}
-        <div className='bitte-grid bitte-gap-1.5'>
+        <div className='bitte:grid bitte:gap-1.5'>
           {payload.map((item, index) => {
             const key = `${nameKey || item.name || item.dataKey || "value"}`;
             const itemConfig = getPayloadConfigFromPayload(config, item, key);
@@ -193,8 +193,8 @@ const ChartTooltipContent = React.forwardRef<
               <div
                 key={item.dataKey}
                 className={cn(
-                  "bitte-flex bitte-w-full bitte-flex-wrap bitte-items-stretch bitte-gap-2 [&>svg]:bitte-h-2.5 [&>svg]:bitte-w-2.5 [&>svg]:bitte-text-muted-foreground",
-                  indicator === "dot" && "bitte-items-center"
+                  "bitte:flex bitte:w-full bitte:flex-wrap bitte:items-stretch bitte:gap-2 bitte:[&>svg]:h-2.5 bitte:[&>svg]:w-2.5 bitte:[&>svg]:text-muted-foreground",
+                  indicator === "dot" && "bitte:items-center"
                 )}
               >
                 {formatter && item?.value !== undefined && item.name ? (
@@ -207,13 +207,13 @@ const ChartTooltipContent = React.forwardRef<
                       !hideIndicator && (
                         <div
                           className={cn(
-                            "bitte-shrink-0 bitte-rounded-[2px] bitte-border-[--color-border] bitte-bg-[--color-bg]",
+                            "bitte:shrink-0 bitte:rounded-[2px] bitte:border-(--color-border) bitte:bg-(--color-bg)",
                             {
-                              "bitte-h-2.5 bitte-w-2.5": indicator === "dot",
-                              "bitte-w-1": indicator === "line",
-                              "bitte-w-0 bitte-border-[1.5px] bitte-border-dashed bitte-bg-transparent":
+                              "bitte:h-2.5 bitte:w-2.5": indicator === "dot",
+                              "bitte:w-1": indicator === "line",
+                              "bitte:w-0 bitte:border-[1.5px] bitte:border-dashed bitte:bg-transparent":
                                 indicator === "dashed",
-                              "bitte-my-0.5": nestLabel && indicator === "dashed",
+                              "bitte:my-0.5": nestLabel && indicator === "dashed",
                             }
                           )}
                           style={
@@ -227,18 +227,18 @@ const ChartTooltipContent = React.forwardRef<
                     )}
                     <div
                       className={cn(
-                        "bitte-flex bitte-flex-1 bitte-justify-between bitte-leading-none",
-                        nestLabel ? "bitte-items-end" : "bitte-items-center"
+                        "bitte:flex bitte:flex-1 bitte:justify-between bitte:leading-none",
+                        nestLabel ? "bitte:items-end" : "bitte:items-center"
                       )}
                     >
-                      <div className='bitte-grid bitte-gap-1.5'>
+                      <div className='bitte:grid bitte:gap-1.5'>
                         {nestLabel ? tooltipLabel : null}
-                        <span className='bitte-text-muted-foreground'>
+                        <span className='bitte:text-muted-foreground'>
                           {itemConfig?.label || item.name}
                         </span>
                       </div>
                       {item.value && (
-                        <span className='bitte-font-mono bitte-font-medium bitte-tabular-nums bitte-text-foreground'>
+                        <span className='bitte:font-mono bitte:font-medium bitte:tabular-nums bitte:text-foreground'>
                           {item.value.toLocaleString()}
                         </span>
                       )}
@@ -279,8 +279,8 @@ const ChartLegendContent = React.forwardRef<
       <div
         ref={ref}
         className={cn(
-          "bitte-flex bitte-items-center bitte-justify-center bitte-gap-4",
-          verticalAlign === "top" ? "bitte-pb-3" : "bitte-pt-3",
+          "bitte:flex bitte:items-center bitte:justify-center bitte:gap-4",
+          verticalAlign === "top" ? "bitte:pb-3" : "bitte:pt-3",
           className
         )}
       >
@@ -292,14 +292,14 @@ const ChartLegendContent = React.forwardRef<
             <div
               key={item.value}
               className={cn(
-                "bitte-flex bitte-items-center bitte-gap-1.5 [&>svg]:bitte-h-3 [&>svg]:bitte-w-3 [&>svg]:bitte-text-muted-foreground"
+                "bitte:flex bitte:items-center bitte:gap-1.5 bitte:[&>svg]:h-3 bitte:[&>svg]:w-3 bitte:[&>svg]:text-muted-foreground"
               )}
             >
               {itemConfig?.icon && !hideIcon ? (
                 <itemConfig.icon />
               ) : (
                 <div
-                  className='bitte-h-2 bitte-w-2 bitte-shrink-0 bitte-rounded-[2px]'
+                  className='bitte:h-2 bitte:w-2 bitte:shrink-0 bitte:rounded-[2px]'
                   style={{
                     backgroundColor: item.color,
                   }}
diff --git a/src/components/ui/charts/AreaChart.tsx b/src/components/ui/charts/AreaChart.tsx
index 2aed9e2..9e01ba6 100644
--- a/src/components/ui/charts/AreaChart.tsx
+++ b/src/components/ui/charts/AreaChart.tsx
@@ -21,7 +21,7 @@ export const AreaChart = ({
   return (
     <ChartContainer
       config={chartConfig}
-      className='bitte-min-h-[200px] bitte-w-full bitte-select-none'
+      className='bitte:min-h-[200px] bitte:w-full bitte:select-none'
     >
       <RechartsAreaChart data={chartData} accessibilityLayer>
         <CartesianGrid vertical={false} strokeOpacity={0.2} syncWithTicks />
diff --git a/src/components/ui/charts/BarChart.tsx b/src/components/ui/charts/BarChart.tsx
index f88b820..b968b62 100644
--- a/src/components/ui/charts/BarChart.tsx
+++ b/src/components/ui/charts/BarChart.tsx
@@ -20,7 +20,7 @@ export const BarChart = ({
   return (
     <ChartContainer
       config={chartConfig}
-      className='bitte-min-h-[200px] bitte-w-full bitte-select-none'
+      className='bitte:min-h-[200px] bitte:w-full bitte:select-none'
     >
       <RechartsBarChart data={chartData}>
         <CartesianGrid vertical={false} strokeOpacity={0.2} syncWithTicks />
diff --git a/src/components/ui/charts/CandleChart.tsx b/src/components/ui/charts/CandleChart.tsx
index a437cc7..4eb3121 100644
--- a/src/components/ui/charts/CandleChart.tsx
+++ b/src/components/ui/charts/CandleChart.tsx
@@ -41,8 +41,8 @@ export const CandleChart = ({
       wickBottom: Math.abs(low - candleLow),
       candleHeight,
       candleColor: up
-        ? "bitte-fill-shad-green-success"
-        : "bitte-fill-shad-red-100", // Using literal hex colors instead of class names
+        ? "bitte:fill-shad-green-success"
+        : "bitte:fill-shad-red-100", // Using literal hex colors instead of class names
       diff: point.close - point.open,
       diffPercent: ((point.close - point.open) / point.open) * 100,
     };
@@ -67,7 +67,7 @@ export const CandleChart = ({
   return (
     <ChartContainer
       config={chartConfig}
-      className='bitte-min-h-[200px] bitte-w-full bitte-select-none'
+      className='bitte:min-h-[200px] bitte:w-full bitte:select-none'
     >
       <ComposedChart
         data={data}
@@ -112,7 +112,7 @@ export const CandleChart = ({
                 );
 
                 return (
-                  <div className='bitte--mb-4 bitte-grid bitte-grid-cols-2 bitte-gap-2'>
+                  <div className='bitte:-mb-4 bitte:grid bitte:grid-cols-2 bitte:gap-2'>
                     <p style={{ color: entry.payload.candleColor }}>
                       {diff > 0 ? "+" : ""}
                       {valueFormatter(diff)}
@@ -123,7 +123,7 @@ export const CandleChart = ({
                     </p>
                     {values.map((value, index) => (
                       <p key={TOOLTIP_LABELS[index]}>
-                        <span className='bitte-text-muted-foreground'>
+                        <span className='bitte:text-muted-foreground'>
                           {TOOLTIP_LABELS[index]}:
                         </span>{" "}
                         {valueFormatter(value)}
diff --git a/src/components/ui/charts/ChartWrapper.tsx b/src/components/ui/charts/ChartWrapper.tsx
index 1241cbc..f130451 100644
--- a/src/components/ui/charts/ChartWrapper.tsx
+++ b/src/components/ui/charts/ChartWrapper.tsx
@@ -81,12 +81,12 @@ export const ChartWrapper = memo(
     );
 
     return (
-      <Card className='max-lg:bitte--mx-4 max-lg:bitte-p-2'>
-        <CardHeader className='max-lg:bitte-p-2'>
+      <Card className='bitte:max-lg:-mx-4 bitte:max-lg:p-2'>
+        <CardHeader className='bitte:max-lg:p-2'>
           <CardTitle>{title}</CardTitle>
           <CardDescription>{description}</CardDescription>
         </CardHeader>
-        <CardContent className='bitte-pb-0 max-lg:bitte-p-2'>
+        <CardContent className='bitte:pb-0 bitte:max-lg:p-2'>
           <ChartComponent
             chartConfig={chartConfig}
             timeKey={timeKey}
@@ -97,16 +97,16 @@ export const ChartWrapper = memo(
           />
         </CardContent>
         {showMetricData ? (
-          <CardFooter className='bitte-pt-2'>
-            <div className='bitte-grid bitte-w-full bitte-grid-cols-2 bitte-gap-2 bitte-text-sm'>
+          <CardFooter className='bitte:pt-2'>
+            <div className='bitte:grid bitte:w-full bitte:grid-cols-2 bitte:gap-2 bitte:text-sm'>
               {metricData.map(
                 ({ metric, percentageChange, isPositive, isCandle }) => (
-                  <div key={metric} className='bitte-grid bitte-gap-2'>
-                    <div className='bitte-flex bitte-items-center bitte-gap-2 bitte-font-medium bitte-leading-none'>
+                  <div key={metric} className='bitte:grid bitte:gap-2'>
+                    <div className='bitte:flex bitte:items-center bitte:gap-2 bitte:font-medium bitte:leading-none'>
                       {isCandle ? null : (
-                        <div className='bitte-flex bitte-items-center bitte-gap-2'>
+                        <div className='bitte:flex bitte:items-center bitte:gap-2'>
                           <div
-                            className='bitte-size-4 bitte-rounded-sm'
+                            className='bitte:size-4 bitte:rounded-sm'
                             style={{
                               backgroundColor: chartConfig[metric].color,
                             }}
@@ -117,15 +117,15 @@ export const ChartWrapper = memo(
                       {isPositive ? "Trending Up" : "Trending Down"} by{" "}
                       {Math.abs(percentageChange).toFixed(1)}%{" "}
                       {isPositive ? (
-                        <TrendingUp className='bitte-size-4 bitte-text-shad-green-success' />
+                        <TrendingUp className='bitte:size-4 bitte:text-shad-green-success' />
                       ) : (
-                        <TrendingDown className='bitte-size-4 bitte-text-shad-red-100' />
+                        <TrendingDown className='bitte:size-4 bitte:text-shad-red-100' />
                       )}
                     </div>
                   </div>
                 )
               )}
-              <div className='bitte-col-span-2 bitte-flex bitte-items-center bitte-gap-2 bitte-leading-none bitte-text-muted-foreground'>
+              <div className='bitte:col-span-2 bitte:flex bitte:items-center bitte:gap-2 bitte:leading-none bitte:text-muted-foreground'>
                 {startDate} - {endDate}
               </div>
             </div>
diff --git a/src/components/ui/charts/LineChart.tsx b/src/components/ui/charts/LineChart.tsx
index 82f25d4..29073ca 100644
--- a/src/components/ui/charts/LineChart.tsx
+++ b/src/components/ui/charts/LineChart.tsx
@@ -25,7 +25,7 @@ export const LineChart = ({
   return (
     <ChartContainer
       config={chartConfig}
-      className='bitte-min-h-[200px] bitte-w-full bitte-select-none'
+      className='bitte:min-h-[200px] bitte:w-full bitte:select-none'
     >
       <RechartsLineChart data={chartData}>
         <CartesianGrid strokeOpacity={0.2} syncWithTicks />
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
index 49f4da4..e982128 100644
--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@@ -6,10 +6,10 @@ const Table = React.forwardRef<
   HTMLTableElement,
   React.HTMLAttributes<HTMLTableElement>
 >(({ className, ...props }, ref) => (
-  <div className="bitte-relative bitte-w-full bitte-overflow-auto">
+  <div className="bitte:relative bitte:w-full bitte:overflow-auto">
     <table
       ref={ref}
-      className={cn("bitte-w-full bitte-caption-bottom bitte-text-sm", className)}
+      className={cn("bitte:w-full bitte:caption-bottom bitte:text-sm", className)}
       {...props}
     />
   </div>
@@ -20,7 +20,7 @@ const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:bitte-border-b", className)} {...props} />
+  <thead ref={ref} className={cn("bitte:[&_tr]:border-b", className)} {...props} />
 ))
 TableHeader.displayName = "TableHeader"
 
@@ -30,7 +30,7 @@ const TableBody = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tbody
     ref={ref}
-    className={cn("[&_tr:last-child]:bitte-border-0", className)}
+    className={cn("bitte:[&_tr:last-child]:border-0", className)}
     {...props}
   />
 ))
@@ -43,7 +43,7 @@ const TableFooter = React.forwardRef<
   <tfoot
     ref={ref}
     className={cn(
-      "bitte-border-t bitte-bg-muted/50 bitte-font-medium [&>tr]:last:bitte-border-b-0",
+      "bitte:border-t bitte:bg-muted/50 bitte:font-medium bitte:last:[&>tr]:border-b-0",
       className
     )}
     {...props}
@@ -58,7 +58,7 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      "bitte-border-b bitte-transition-colors hover:bitte-bg-muted/50 data-[state=selected]:bitte-bg-muted",
+      "bitte:border-b bitte:transition-colors bitte:hover:bg-muted/50 bitte:data-[state=selected]:bg-muted",
       className
     )}
     {...props}
@@ -73,7 +73,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "bitte-h-10 bitte-px-2 bitte-text-left bitte-align-middle bitte-font-medium bitte-text-muted-foreground [&:has([role=checkbox])]:bitte-pr-0 [&>[role=checkbox]]:bitte-translate-y-[2px]",
+      "bitte:h-10 bitte:px-2 bitte:text-left bitte:align-middle bitte:font-medium bitte:text-muted-foreground bitte:[&:has([role=checkbox])]:pr-0 bitte:[&>[role=checkbox]]:translate-y-[2px]",
       className
     )}
     {...props}
@@ -88,7 +88,7 @@ const TableCell = React.forwardRef<
   <td
     ref={ref}
     className={cn(
-      "bitte-p-2 bitte-align-middle [&:has([role=checkbox])]:bitte-pr-0 [&>[role=checkbox]]:bitte-translate-y-[2px]",
+      "bitte:p-2 bitte:align-middle bitte:[&:has([role=checkbox])]:pr-0 bitte:[&>[role=checkbox]]:translate-y-[2px]",
       className
     )}
     {...props}
@@ -102,7 +102,7 @@ const TableCaption = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <caption
     ref={ref}
-    className={cn("bitte-mt-4 bitte-text-sm bitte-text-muted-foreground", className)}
+    className={cn("bitte:mt-4 bitte:text-sm bitte:text-muted-foreground", className)}
     {...props}
   />
 ))
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index a955f8a..5f123dc 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<
   return (
     <textarea
       className={cn(
-        "bitte-flex bitte-w-full bitte-rounded-md bitte-border bitte-border-input bitte-bg-transparent bitte-px-3 bitte-py-2 bitte-text-base bitte-shadow-sm placeholder:bitte-text-muted-foreground focus-visible:bitte-outline-none focus-visible:bitte-ring-1 focus-visible:bitte-ring-ring disabled:bitte-cursor-not-allowed disabled:bitte-opacity-50",
+        "bitte:flex bitte:w-full bitte:rounded-md bitte:border bitte:border-input bitte:bg-transparent bitte:px-3 bitte:py-2 bitte:text-base bitte:shadow-sm bitte:placeholder:text-muted-foreground bitte:focus-visible:outline-hidden bitte:focus-visible:ring-1 bitte:focus-visible:ring-ring bitte:disabled:cursor-not-allowed bitte:disabled:opacity-50",
         className
       )}
       ref={ref}
diff --git a/src/global.d.ts b/src/global.d.ts
new file mode 100644
index 0000000..82463a1
--- /dev/null
+++ b/src/global.d.ts
@@ -0,0 +1,4 @@
+declare module "bn.js/lib/bn.js" {
+  import BN from  "bn.js/lib/bn.js";
+  export default BN;
+}
\ No newline at end of file
diff --git a/src/hooks/useTxnFees.ts b/src/hooks/useTxnFees.ts
index 0a24b78..d5c1ce8 100644
--- a/src/hooks/useTxnFees.ts
+++ b/src/hooks/useTxnFees.ts
@@ -1,6 +1,6 @@
 import { Transaction } from "@near-wallet-selector/core";
-import BN from "bn.js";
-import { formatNearAmount } from "near-api-js/lib/utils/format";
+import BN from  "bn.js/lib/bn.js";
+import { formatNearAmount } from "near-api-js/lib/utils/format.js";
 import { formatUnits } from "viem";
 import { removeTrailingZeros } from "../lib/utils";
 import { Cost } from "../types";
diff --git a/src/hooks/useTxnPrice.ts b/src/hooks/useTxnPrice.ts
index f95a252..c03f9b3 100644
--- a/src/hooks/useTxnPrice.ts
+++ b/src/hooks/useTxnPrice.ts
@@ -1,11 +1,11 @@
-import { getLatestGasPrice } from "@mintbase-js/rpc/lib/methods/getLatestGasPrice";
+import { getLatestGasPrice } from "@mintbase-js/rpc/lib/methods/getLatestGasPrice.js";
 import {
   Action,
   FunctionCallAction,
   Transaction,
 } from "@near-wallet-selector/core";
 import BN from "bn.js/";
-import { formatNearAmount } from "near-api-js/lib/utils/format";
+import { formatNearAmount } from "near-api-js/lib/utils/format.js";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { RPC_URL } from "../lib/constants";
 import { Cost } from "../types";
diff --git a/src/index.ts b/src/index.ts
index 5c0f258..9916d85 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,2 @@
-import "./style.css";
-
 export * from "./components";
 export * from "./types";
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 18b903e..1da85ee 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,6 +1,6 @@
-import BN from "bn.js";
+import BN from "bn.js/lib/bn.js";
 import { clsx, type ClassValue } from "clsx";
-import { formatNearAmount } from "near-api-js/lib/utils/format";
+import { formatNearAmount } from "near-api-js/lib/utils/format.js";
 import { twMerge } from "tailwind-merge";
 import { Cost } from "../types/types";
 
diff --git a/src/style.css b/src/styles.css
similarity index 54%
rename from src/style.css
rename to src/styles.css
index dfbc41c..888bd33 100644
--- a/src/style.css
+++ b/src/styles.css
@@ -1,10 +1,64 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss' prefix(bitte);
 
-@media (max-width: 1024px) {
-  .textarea-chat {
-    padding-left: 16px !important;
+@plugin 'tailwindcss-animate';
+
+@custom-variant dark (&:is(class *));
+
+@theme {
+  --breakpoint-sm: 480px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 976px;
+  --breakpoint-xl: 1440px;
+  --breakpoint-xxl: 1920px;
+
+  --color-background: var(--background);
+
+  --color-secondary: var(--secondary);
+
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+}
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
+
+@layer utilities {
+  @media (max-width: 1024px) {
+    .textarea-chat {
+      padding-left: 16px !important;
+    }
   }
 }
 
diff --git a/src/types/transaction.ts b/src/types/transaction.ts
index e4f9026..f5178f9 100644
--- a/src/types/transaction.ts
+++ b/src/types/transaction.ts
@@ -2,7 +2,7 @@ import type {
   FinalExecutionOutcome,
   Transaction,
 } from "@near-wallet-selector/core";
-import BN from "bn.js";
+import BN from  "bn.js/lib/bn.js";
 import { Account } from "near-api-js";
 import { SafeEncodedSignRequest } from "near-safe";
 import { SuccessInfo } from "../hooks/useTransaction";
diff --git a/src/types/types.ts b/src/types/types.ts
index d37f85d..e21ff28 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -11,7 +11,7 @@ import { AssistantTool, FunctionTool } from "openai/resources/beta/assistants";
 import { FunctionDefinition } from "openai/resources/index";
 import { OpenAPIV3 } from "openapi-types";
 
-import BN from "bn.js";
+import BN from  "bn.js/lib/bn.js";
 import { Account } from "near-api-js/lib/account";
 import { SignRequestData } from "near-safe";
 import { Hex } from "viem";
diff --git a/tailwind.config.ts b/tailwind.config.ts
deleted file mode 100644
index 9603662..0000000
--- a/tailwind.config.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import type { Config } from "tailwindcss";
-
-export default {
-  content: ["./src/**/*.{js,jsx,ts,tsx}"],
-  theme: {
-    extend: {
-      screens: {
-        sm: "480px",
-        md: "768px",
-        lg: "976px",
-        xl: "1440px",
-        xxl: "1920px",
-      },
-      colors: {
-        background: "var(--background)",
-        secondary: {
-          DEFAULT: "var(--secondary)",
-        },
-      },
-      keyframes: {
-        "accordion-down": {
-          from: {
-            height: "0",
-          },
-          to: {
-            height: "var(--radix-accordion-content-height)",
-          },
-        },
-        "accordion-up": {
-          from: {
-            height: "var(--radix-accordion-content-height)",
-          },
-          to: {
-            height: "0",
-          },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-      },
-    },
-  },
-  darkMode: ["class", "class"],
-  plugins: [require("tailwindcss-animate")],
-  prefix: "bitte-",
-} satisfies Config;
diff --git a/tsup.config.ts b/tsup.config.ts
index e9f3107..27cfb5f 100644
--- a/tsup.config.ts
+++ b/tsup.config.ts
@@ -1,12 +1,12 @@
 import { defineConfig } from 'tsup'
 
-
 export default defineConfig({
-  entry: ['src/index.ts'],
+  entry: ['src/index.ts'], // Your main entry point
   format: ['cjs', 'esm'],
   dts: true,
   clean: true,
   external: ['react', 'react-dom'],
+  noExternal: ['bn.js'],
   minify: true,
   outDir: 'dist',
   sourcemap: true,
@@ -21,6 +21,7 @@ export default defineConfig({
     options.assetNames = '[name]';
   },
   loader: {
-    '.css': 'copy',
+    '.css': 'copy', // Ensures CSS files are copied to dist
   },
-});
\ No newline at end of file
+  onSuccess: 'npx @tailwindcss/cli -i ./src/styles.css -o ./dist/styles.css', // Compiles Tailwind CSS
+});