diff --git a/demo/react-app-new/package-lock.json b/demo/react-app-new/package-lock.json
index 78b4b52e6..c774f58f3 100644
--- a/demo/react-app-new/package-lock.json
+++ b/demo/react-app-new/package-lock.json
@@ -12,8 +12,8 @@
         "@toruslabs/constants": "^14.0.0",
         "@toruslabs/eslint-config-react": "^3.4.3",
         "@toruslabs/ethereum-controllers": "^6.1.3",
-        "@toruslabs/vue-components": "^7.8.3",
-        "@toruslabs/vue-icons": "^7.6.2",
+        "@toruslabs/react-components": "file:toruslabs-react-components-1.0.0.tgz",
+        "@web3auth/account-abstraction-provider": "file:../../packages/providers/account-abstraction-provider",
         "@web3auth/auth": "^9.4.0",
         "@web3auth/auth-adapter": "file:../../packages/adapters/auth-adapter",
         "@web3auth/base": "file:../../packages/base",
@@ -39,7 +39,6 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-i18next": "^15.0.2",
-        "usehooks-ts": "^3.1.0",
         "web3": "^4.13.0"
       },
       "devDependencies": {
@@ -59,12 +58,12 @@
     },
     "../../packages/adapters/auth-adapter": {
       "name": "@web3auth/auth-adapter",
-      "version": "9.0.2",
+      "version": "9.3.0",
       "license": "ISC",
       "dependencies": {
-        "@web3auth/auth": "^9.3.3",
-        "@web3auth/base": "^9.0.2",
-        "@web3auth/base-provider": "^9.0.2",
+        "@web3auth/auth": "^9.4.1",
+        "@web3auth/base": "^9.3.0",
+        "@web3auth/base-provider": "^9.3.0",
         "deepmerge": "^4.3.1"
       },
       "engines": {
@@ -77,11 +76,11 @@
     },
     "../../packages/adapters/base-evm-adapter": {
       "name": "@web3auth/base-evm-adapter",
-      "version": "9.0.2",
+      "version": "9.3.0",
       "license": "ISC",
       "dependencies": {
-        "@toruslabs/base-controllers": "^6.1.2",
-        "@web3auth/base": "^9.0.2"
+        "@toruslabs/base-controllers": "^6.2.2",
+        "@web3auth/base": "^9.3.0"
       },
       "engines": {
         "node": ">=18.x",
@@ -93,11 +92,11 @@
     },
     "../../packages/adapters/base-solana-adapter": {
       "name": "@web3auth/base-solana-adapter",
-      "version": "9.0.2",
+      "version": "9.3.0",
       "license": "ISC",
       "dependencies": {
-        "@toruslabs/base-controllers": "^6.1.2",
-        "@web3auth/base": "^9.0.2",
+        "@toruslabs/base-controllers": "^6.2.2",
+        "@web3auth/base": "^9.3.0",
         "bs58": "^5.0.0"
       },
       "devDependencies": {
@@ -113,14 +112,14 @@
     },
     "../../packages/adapters/coinbase-adapter": {
       "name": "@web3auth/coinbase-adapter",
-      "version": "9.0.2",
+      "version": "9.3.0",
       "license": "ISC",
       "dependencies": {
-        "@web3auth/base": "^9.0.2",
-        "@web3auth/base-evm-adapter": "^9.0.2"
+        "@web3auth/base": "^9.3.0",
+        "@web3auth/base-evm-adapter": "^9.3.0"
       },
       "devDependencies": {
-        "@coinbase/wallet-sdk": "^4.0.4"
+        "@coinbase/wallet-sdk": "^4.1.0"
       },
       "engines": {
         "node": ">=18.x",
@@ -133,12 +132,12 @@
     },
     "../../packages/adapters/default-evm-adapter": {
       "name": "@web3auth/default-evm-adapter",
-      "version": "9.1.0",
+      "version": "9.3.0",
       "license": "ISC",
       "dependencies": {
-        "@web3auth/base": "^9.0.2",
-        "@web3auth/base-evm-adapter": "^9.0.2",
-        "@web3auth/wallet-connect-v2-adapter": "^9.1.0",
+        "@web3auth/base": "^9.3.0",
+        "@web3auth/base-evm-adapter": "^9.3.0",
+        "@web3auth/wallet-connect-v2-adapter": "^9.3.0",
         "mipd": "^0.0.7"
       },
       "engines": {
@@ -151,18 +150,19 @@
     },
     "../../packages/adapters/default-solana-adapter": {
       "name": "@web3auth/default-solana-adapter",
-      "version": "9.1.0",
+      "version": "9.3.0",
       "license": "ISC",
       "dependencies": {
         "@solana/wallet-standard-features": "^1.2.0",
-        "@solana/web3.js": "^1.95.3",
+        "@solana/web3.js": "^1.95.4",
         "@wallet-standard/app": "^1.0.1",
         "@wallet-standard/base": "^1.0.1",
         "@wallet-standard/features": "^1.0.3",
-        "@web3auth/auth": "^9.3.3",
-        "@web3auth/base": "^9.0.2",
-        "@web3auth/base-solana-adapter": "^9.0.2",
-        "@web3auth/solana-provider": "^9.0.2",
+        "@web3auth/auth": "^9.4.1",
+        "@web3auth/base": "^9.3.0",
+        "@web3auth/base-solana-adapter": "^9.3.0",
+        "@web3auth/solana-provider": "^9.3.0",
+        "@web3auth/wallet-connect-v2-adapter": "^9.3.0",
         "bn.js": "^5.2.1"
       },
       "engines": {
@@ -175,12 +175,12 @@
     },
     "../../packages/adapters/torus-evm-adapter": {
       "name": "@web3auth/torus-evm-adapter",
-      "version": "9.0.2",
+      "version": "9.3.0",
       "license": "ISC",
       "dependencies": {
         "@toruslabs/torus-embed": "^5.0.0",
-        "@web3auth/base": "^9.0.2",
-        "@web3auth/base-evm-adapter": "^9.0.2"
+        "@web3auth/base": "^9.3.0",
+        "@web3auth/base-evm-adapter": "^9.3.0"
       },
       "engines": {
         "node": ">=18.x",
@@ -192,14 +192,14 @@
     },
     "../../packages/adapters/torus-solana-adapter": {
       "name": "@web3auth/torus-solana-adapter",
-      "version": "9.0.2",
+      "version": "9.3.0",
       "license": "ISC",
       "dependencies": {
         "@toruslabs/solana-embed": "^2.1.0",
-        "@web3auth/base": "^9.0.2",
-        "@web3auth/base-provider": "^9.0.2",
-        "@web3auth/base-solana-adapter": "^9.0.2",
-        "@web3auth/solana-provider": "^9.0.2"
+        "@web3auth/base": "^9.3.0",
+        "@web3auth/base-provider": "^9.3.0",
+        "@web3auth/base-solana-adapter": "^9.3.0",
+        "@web3auth/solana-provider": "^9.3.0"
       },
       "engines": {
         "node": ">=18.x",
@@ -212,19 +212,25 @@
     },
     "../../packages/adapters/wallet-connect-v2-adapter": {
       "name": "@web3auth/wallet-connect-v2-adapter",
-      "version": "9.1.0",
+      "version": "9.3.0",
       "license": "ISC",
       "dependencies": {
-        "@walletconnect/sign-client": "^2.16.1",
-        "@walletconnect/types": "^2.16.1",
-        "@walletconnect/utils": "^2.16.1",
-        "@web3auth/auth": "^9.3.3",
-        "@web3auth/base": "^9.0.2",
-        "@web3auth/base-evm-adapter": "^9.0.2",
-        "@web3auth/base-provider": "^9.0.2",
-        "@web3auth/ethereum-provider": "^9.0.2",
+        "@solana/web3.js": "^1.95.4",
+        "@toruslabs/base-controllers": "^6.2.2",
+        "@walletconnect/sign-client": "^2.17.1",
+        "@walletconnect/types": "^2.17.1",
+        "@walletconnect/utils": "^2.17.1",
+        "@web3auth/auth": "^9.4.1",
+        "@web3auth/base": "^9.3.0",
+        "@web3auth/base-provider": "^9.3.0",
+        "@web3auth/ethereum-provider": "^9.3.0",
+        "@web3auth/solana-provider": "^9.3.0",
+        "bs58": "^5.0.0",
         "deepmerge": "^4.3.1"
       },
+      "devDependencies": {
+        "@types/bs58": "^4.0.4"
+      },
       "engines": {
         "node": ">=18.x",
         "npm": ">=9.x"
@@ -235,13 +241,13 @@
     },
     "../../packages/base": {
       "name": "@web3auth/base",
-      "version": "9.0.2",
+      "version": "9.3.0",
       "license": "ISC",
       "dependencies": {
-        "@toruslabs/base-controllers": "^6.1.2",
+        "@toruslabs/base-controllers": "^6.2.2",
         "@toruslabs/constants": "^14.0.0",
         "@toruslabs/http-helpers": "^7.0.0",
-        "@web3auth/auth": "^9.3.3",
+        "@web3auth/auth": "^9.4.1",
         "jwt-decode": "^4.0.0",
         "loglevel": "^1.9.2",
         "ts-custom-error": "^3.3.1"
@@ -256,15 +262,15 @@
     },
     "../../packages/composables/modal-vue-composables": {
       "name": "@web3auth/modal-vue-composables",
-      "version": "9.1.0",
+      "version": "9.3.1",
       "license": "ISC",
       "dependencies": {
-        "@web3auth/base": "^9.0.2",
-        "@web3auth/modal": "^9.1.0"
+        "@web3auth/base": "^9.3.0",
+        "@web3auth/modal": "^9.3.1"
       },
       "devDependencies": {
-        "@web3auth/auth": "^9.3.3",
-        "@web3auth/auth-adapter": "^9.0.2"
+        "@web3auth/auth": "^9.4.1",
+        "@web3auth/auth-adapter": "^9.3.0"
       },
       "engines": {
         "node": ">=18.x",
@@ -277,23 +283,24 @@
     },
     "../../packages/modal": {
       "name": "@web3auth/modal",
-      "version": "9.1.0",
+      "version": "9.3.1",
       "license": "ISC",
       "dependencies": {
-        "@web3auth/auth-adapter": "^9.0.2",
-        "@web3auth/base": "^9.0.2",
-        "@web3auth/base-provider": "^9.0.2",
-        "@web3auth/no-modal": "^9.1.0",
-        "@web3auth/ui": "^9.0.2",
+        "@web3auth/auth-adapter": "^9.3.0",
+        "@web3auth/base": "^9.3.0",
+        "@web3auth/base-provider": "^9.3.0",
+        "@web3auth/no-modal": "^9.3.1",
+        "@web3auth/ui": "^9.3.1",
         "deepmerge": "^4.3.1"
       },
       "devDependencies": {
         "@svgr/webpack": "^8.1.0",
         "@toruslabs/isomorphic-style-loader": "^5.3.3",
-        "@web3auth/auth": "^9.3.3",
-        "@web3auth/wallet-connect-v2-adapter": "^9.1.0",
+        "@web3auth/account-abstraction-provider": "^9.3.1",
+        "@web3auth/auth": "^9.4.1",
+        "@web3auth/wallet-connect-v2-adapter": "^9.3.0",
         "css-loader": "^7.1.2",
-        "postcss-prefix-selector": "^1.16.1",
+        "postcss-prefix-selector": "^2.1.0",
         "style-loader": "^4.0.0",
         "url-loader": "^4.1.1"
       },
@@ -313,17 +320,18 @@
     },
     "../../packages/no-modal": {
       "name": "@web3auth/no-modal",
-      "version": "9.1.0",
+      "version": "9.3.1",
       "license": "ISC",
       "dependencies": {
-        "@web3auth/auth": "^9.3.3",
-        "@web3auth/base": "^9.0.2",
-        "@web3auth/base-provider": "^9.0.2",
+        "@web3auth/auth": "^9.4.1",
+        "@web3auth/base": "^9.3.0",
+        "@web3auth/base-provider": "^9.3.0",
         "deepmerge": "^4.3.1"
       },
       "devDependencies": {
-        "@web3auth/auth-adapter": "^9.0.2",
-        "@web3auth/wallet-connect-v2-adapter": "^9.1.0"
+        "@web3auth/account-abstraction-provider": "^9.3.1",
+        "@web3auth/auth-adapter": "^9.3.0",
+        "@web3auth/wallet-connect-v2-adapter": "^9.3.0"
       },
       "engines": {
         "node": ">=18.x",
@@ -345,13 +353,13 @@
     },
     "../../packages/plugins/solana-wallet-connector-plugin": {
       "name": "@web3auth/solana-wallet-connector-plugin",
-      "version": "9.1.0",
+      "version": "9.3.1",
       "license": "ISC",
       "dependencies": {
         "@toruslabs/solana-embed": "^2.1.0",
-        "@web3auth/auth": "^9.3.3",
-        "@web3auth/base": "^9.0.2",
-        "@web3auth/no-modal": "^9.1.0",
+        "@web3auth/auth": "^9.4.1",
+        "@web3auth/base": "^9.3.0",
+        "@web3auth/no-modal": "^9.3.1",
         "loglevel": "^1.9.2"
       },
       "engines": {
@@ -364,17 +372,17 @@
     },
     "../../packages/plugins/wallet-services-plugin": {
       "name": "@web3auth/wallet-services-plugin",
-      "version": "9.1.0",
+      "version": "9.3.1",
       "license": "ISC",
       "dependencies": {
-        "@web3auth/auth": "^9.3.3",
-        "@web3auth/base": "^9.0.2",
-        "@web3auth/no-modal": "^9.1.0",
-        "@web3auth/ws-embed": "^3.0.0",
+        "@web3auth/auth": "^9.4.1",
+        "@web3auth/base": "^9.3.0",
+        "@web3auth/no-modal": "^9.3.1",
+        "@web3auth/ws-embed": "^3.1.0",
         "loglevel": "^1.9.2"
       },
       "devDependencies": {
-        "@toruslabs/ethereum-controllers": "^6.1.3"
+        "@toruslabs/ethereum-controllers": "^6.2.2"
       },
       "engines": {
         "node": ">=18.x",
@@ -384,14 +392,36 @@
         "@babel/runtime": "^7.x"
       }
     },
+    "../../packages/providers/account-abstraction-provider": {
+      "version": "9.3.1",
+      "license": "ISC",
+      "dependencies": {
+        "@ethereumjs/util": "^9.1.0",
+        "@toruslabs/base-controllers": "^6.2.2",
+        "@web3auth/auth": "^9.4.1",
+        "@web3auth/base": "^9.3.0",
+        "@web3auth/base-provider": "^9.3.0",
+        "@web3auth/ethereum-provider": "^9.3.0",
+        "ethers": "^6.13.4",
+        "permissionless": "^0.2.13",
+        "viem": "^2.21.36"
+      },
+      "engines": {
+        "node": ">=18.x",
+        "npm": ">=9.x"
+      },
+      "peerDependencies": {
+        "@babel/runtime": "7.x"
+      }
+    },
     "../../packages/providers/base-provider": {
       "name": "@web3auth/base-provider",
-      "version": "9.0.2",
+      "version": "9.3.0",
       "license": "ISC",
       "dependencies": {
-        "@toruslabs/base-controllers": "^6.1.2",
-        "@web3auth/auth": "^9.3.3",
-        "@web3auth/base": "^9.0.2",
+        "@toruslabs/base-controllers": "^6.2.2",
+        "@web3auth/auth": "^9.4.1",
+        "@web3auth/base": "^9.3.0",
         "json-rpc-random-id": "^1.0.1"
       },
       "devDependencies": {
@@ -407,26 +437,26 @@
     },
     "../../packages/providers/ethereum-provider": {
       "name": "@web3auth/ethereum-provider",
-      "version": "9.0.2",
+      "version": "9.3.0",
       "license": "ISC",
       "dependencies": {
         "@ethereumjs/util": "^9.1.0",
-        "@toruslabs/base-controllers": "^6.1.2",
+        "@toruslabs/base-controllers": "^6.2.2",
         "@toruslabs/eccrypto": "^5.0.4",
         "@toruslabs/http-helpers": "^7.0.0",
-        "@web3auth/auth": "^9.3.3",
-        "@web3auth/base": "^9.0.2",
-        "@web3auth/base-provider": "^9.0.2",
+        "@web3auth/auth": "^9.4.1",
+        "@web3auth/base": "^9.3.0",
+        "@web3auth/base-provider": "^9.3.0",
         "assert": "^2.1.0",
         "bignumber.js": "^9.1.2",
         "bn.js": "^5.2.1",
-        "ethers": "^6.13.2",
+        "ethers": "^6.13.4",
         "jsonschema": "^1.4.1"
       },
       "devDependencies": {
         "@types/bn.js": "^5.1.6",
         "@types/json-rpc-random-id": "^1.0.3",
-        "@walletconnect/types": "^2.16.1"
+        "@walletconnect/types": "^2.17.1"
       },
       "engines": {
         "node": ">=18.x",
@@ -438,20 +468,20 @@
     },
     "../../packages/providers/solana-provider": {
       "name": "@web3auth/solana-provider",
-      "version": "9.0.2",
+      "version": "9.3.0",
       "license": "ISC",
       "dependencies": {
-        "@toruslabs/base-controllers": "^6.1.2",
+        "@toruslabs/base-controllers": "^6.2.2",
         "@toruslabs/tweetnacl-js": "^1.0.4",
-        "@web3auth/auth": "^9.3.3",
-        "@web3auth/base": "^9.0.2",
-        "@web3auth/base-provider": "^9.0.2",
+        "@web3auth/auth": "^9.4.1",
+        "@web3auth/base": "^9.3.0",
+        "@web3auth/base-provider": "^9.3.0",
         "bn.js": "^5.2.1",
         "bs58": "^5.0.0",
         "json-rpc-random-id": "^1.0.1"
       },
       "devDependencies": {
-        "@solana/web3.js": "^1.95.3",
+        "@solana/web3.js": "^1.95.4",
         "@types/bn.js": "^5.1.6",
         "@types/bs58": "^4.0.4",
         "@types/json-rpc-random-id": "^1.0.3"
@@ -465,6 +495,11 @@
         "@solana/web3.js": "^1.x"
       }
     },
+    "node_modules/@adobe/css-tools": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.0.tgz",
+      "integrity": "sha512-Ff9+ksdQQB3rMncgqDK78uLznstjyfIf2Arnh22pW8kBpLs6rpKDwgnZT46hin5Hl1WzazzK64DOrhSwYpS7bQ=="
+    },
     "node_modules/@adraffy/ens-normalize": {
       "version": "1.10.1",
       "resolved": "https://registry.npmjs.org/@adraffy/ens-normalize/-/ens-normalize-1.10.1.tgz",
@@ -498,7 +533,6 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.7.tgz",
       "integrity": "sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==",
-      "dev": true,
       "dependencies": {
         "@babel/highlight": "^7.24.7",
         "picocolors": "^1.0.0"
@@ -634,6 +668,7 @@
       "version": "7.24.8",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
       "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==",
+      "dev": true,
       "engines": {
         "node": ">=6.9.0"
       }
@@ -672,7 +707,6 @@
       "version": "7.24.7",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.7.tgz",
       "integrity": "sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==",
-      "dev": true,
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.24.7",
         "chalk": "^2.4.2",
@@ -687,6 +721,7 @@
       "version": "7.25.6",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.6.tgz",
       "integrity": "sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==",
+      "dev": true,
       "dependencies": {
         "@babel/types": "^7.25.6"
       },
@@ -783,6 +818,7 @@
       "version": "7.25.6",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.6.tgz",
       "integrity": "sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==",
+      "dev": true,
       "dependencies": {
         "@babel/helper-string-parser": "^7.24.8",
         "@babel/helper-validator-identifier": "^7.24.7",
@@ -799,7 +835,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "aix"
@@ -815,7 +850,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -831,7 +865,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -847,7 +880,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -863,7 +895,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -879,7 +910,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -895,7 +925,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -911,7 +940,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -927,7 +955,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -943,7 +970,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -959,7 +985,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -975,7 +1000,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -991,7 +1015,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1007,7 +1030,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1023,7 +1045,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1039,7 +1060,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1055,7 +1075,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1071,7 +1090,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "netbsd"
@@ -1087,7 +1105,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "openbsd"
@@ -1103,7 +1120,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "sunos"
@@ -1119,7 +1135,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -1135,7 +1150,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -1151,7 +1165,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -1249,6 +1262,54 @@
         "node": ">=18"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz",
+      "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.12",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.12.tgz",
+      "integrity": "sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.8"
+      }
+    },
+    "node_modules/@floating-ui/react": {
+      "version": "0.26.27",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.27.tgz",
+      "integrity": "sha512-jLP72x0Kr2CgY6eTYi/ra3VA9LOkTo4C+DUTrbFgFOExKy3omYVmwMjNKqxAHdsnyLS96BIDLcO2SlnsNf8KUQ==",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.1.2",
+        "@floating-ui/utils": "^0.2.8",
+        "tabbable": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
+      "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
+      "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.13.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
@@ -1365,21 +1426,6 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
-    "node_modules/@mertasan/tailwindcss-variables": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/@mertasan/tailwindcss-variables/-/tailwindcss-variables-2.7.0.tgz",
-      "integrity": "sha512-rKPhxi/0r6XWP0+OjPmsfrloX/TtQmvONj2Pr3Nl8BNBznQVP3M9sphguDBUDC0AiKYx2xgup3XzAhlIDLPLIA==",
-      "dependencies": {
-        "lodash": "^4.17.21"
-      },
-      "engines": {
-        "node": ">=12.13.0"
-      },
-      "peerDependencies": {
-        "autoprefixer": "^10.0.2",
-        "postcss": "^8.0.9"
-      }
-    },
     "node_modules/@microsoft/tsdoc": {
       "version": "0.15.0",
       "resolved": "https://registry.npmjs.org/@microsoft/tsdoc/-/tsdoc-0.15.0.tgz",
@@ -2311,6 +2357,111 @@
         "@stablelib/wipe": "^1.0.1"
       }
     },
+    "node_modules/@storybook/core": {
+      "version": "8.4.1",
+      "resolved": "https://registry.npmjs.org/@storybook/core/-/core-8.4.1.tgz",
+      "integrity": "sha512-q3Q4OFBj7MHHbIFYk/Beejlqv5j7CC3+VWhGcr0TK3SGvdCIZ7EliYuc5JIOgDlEPsnTIk+lkgWI4LAA9mLzSw==",
+      "peer": true,
+      "dependencies": {
+        "@storybook/csf": "^0.1.11",
+        "better-opn": "^3.0.2",
+        "browser-assert": "^1.2.1",
+        "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0",
+        "esbuild-register": "^3.5.0",
+        "jsdoc-type-pratt-parser": "^4.0.0",
+        "process": "^0.11.10",
+        "recast": "^0.23.5",
+        "semver": "^7.6.2",
+        "util": "^0.12.5",
+        "ws": "^8.2.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "prettier": "^2 || ^3"
+      },
+      "peerDependenciesMeta": {
+        "prettier": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@storybook/core/node_modules/semver": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "peer": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@storybook/csf": {
+      "version": "0.1.11",
+      "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.11.tgz",
+      "integrity": "sha512-dHYFQH3mA+EtnCkHXzicbLgsvzYjcDJ1JWsogbItZogkPHgSJM/Wr71uMkcvw8v9mmCyP4NpXJuu6bPoVsOnzg==",
+      "dependencies": {
+        "type-fest": "^2.19.0"
+      }
+    },
+    "node_modules/@storybook/csf/node_modules/type-fest": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "engines": {
+        "node": ">=12.20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@storybook/global": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@storybook/global/-/global-5.0.0.tgz",
+      "integrity": "sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ=="
+    },
+    "node_modules/@storybook/instrumenter": {
+      "version": "8.4.1",
+      "resolved": "https://registry.npmjs.org/@storybook/instrumenter/-/instrumenter-8.4.1.tgz",
+      "integrity": "sha512-MgrhrLVW78jqno+Dh9h9Es06Ja3867TlrIUd8B3K3U1hsCFUQuFKXJBuGjNJF8U0QJY/aSIRnAgUBurHdVkPcw==",
+      "dependencies": {
+        "@storybook/global": "^5.0.0",
+        "@vitest/utils": "^2.1.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^8.4.1"
+      }
+    },
+    "node_modules/@storybook/test": {
+      "version": "8.4.1",
+      "resolved": "https://registry.npmjs.org/@storybook/test/-/test-8.4.1.tgz",
+      "integrity": "sha512-najn9kCxB8NaHykhD7Fv+Iq0FnxmIJYOJlYiI8NMgVLwaSDFf6gnqAY6HHVPRqkhej8TuT1L2e2RxKqzWEB+mA==",
+      "dependencies": {
+        "@storybook/csf": "^0.1.11",
+        "@storybook/global": "^5.0.0",
+        "@storybook/instrumenter": "8.4.1",
+        "@testing-library/dom": "10.4.0",
+        "@testing-library/jest-dom": "6.5.0",
+        "@testing-library/user-event": "14.5.2",
+        "@vitest/expect": "2.0.5",
+        "@vitest/spy": "2.0.5"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "storybook": "^8.4.1"
+      }
+    },
     "node_modules/@swc/helpers": {
       "version": "0.5.13",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.13.tgz",
@@ -2319,12 +2470,191 @@
         "tslib": "^2.4.0"
       }
     },
-    "node_modules/@tailwindcss/container-queries": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/container-queries/-/container-queries-0.1.1.tgz",
-      "integrity": "sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==",
+    "node_modules/@testing-library/dom": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
+      "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "chalk": "^4.1.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/aria-query": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/@testing-library/dom/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@testing-library/jest-dom": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.5.0.tgz",
+      "integrity": "sha512-xGGHpBXYSHUUr6XsKBfs85TWlYKpTc37cSBBVrXcib2MkHLboWlkClhWF37JKlDb9KEq3dHs+f2xR7XJEWGBxA==",
+      "dependencies": {
+        "@adobe/css-tools": "^4.4.0",
+        "aria-query": "^5.0.0",
+        "chalk": "^3.0.0",
+        "css.escape": "^1.5.1",
+        "dom-accessibility-api": "^0.6.3",
+        "lodash": "^4.17.21",
+        "redent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/chalk": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+      "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/dom-accessibility-api": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz",
+      "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w=="
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@testing-library/user-event": {
+      "version": "14.5.2",
+      "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.2.tgz",
+      "integrity": "sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==",
+      "engines": {
+        "node": ">=12",
+        "npm": ">=6"
+      },
       "peerDependencies": {
-        "tailwindcss": ">=3.2.0"
+        "@testing-library/dom": ">=7.21.4"
       }
     },
     "node_modules/@toruslabs/base-controllers": {
@@ -2725,6 +3055,28 @@
         "@babel/runtime": "7.x"
       }
     },
+    "node_modules/@toruslabs/react-components": {
+      "version": "1.0.0",
+      "resolved": "file:toruslabs-react-components-1.0.0.tgz",
+      "integrity": "sha512-Q97KMV60vWG+sR604wMz4YzmYUsWH3DI4SykTph5/U28Xa50l+sUAtnJiH+e7V7NtR5ZY4gVVywvG0DZatYiZQ==",
+      "dependencies": {
+        "@floating-ui/react": "^0.26.24",
+        "@storybook/test": "^8.1.10",
+        "class-variance-authority": "^0.7.0",
+        "clsx": "^2.1.1",
+        "react-icons": "^5.2.1",
+        "tailwind-merge": "^2.4.0"
+      },
+      "engines": {
+        "node": ">=18.x",
+        "npm": ">=9.x"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "tailwindcss": "^3.4.6"
+      }
+    },
     "node_modules/@toruslabs/secure-pub-sub": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@toruslabs/secure-pub-sub/-/secure-pub-sub-1.0.0.tgz",
@@ -2787,37 +3139,10 @@
       "resolved": "https://registry.npmjs.org/@toruslabs/tweetnacl-js/-/tweetnacl-js-1.0.4.tgz",
       "integrity": "sha512-h8fVemW5pstsKbm/fTx+y61dZkh5Pepy/92lsyKp83KErf96jT+w4LGx4nEgeAVrdYQDTLg2tO7vu/boEb23Iw=="
     },
-    "node_modules/@toruslabs/vue-components": {
-      "version": "7.8.4",
-      "resolved": "https://registry.npmjs.org/@toruslabs/vue-components/-/vue-components-7.8.4.tgz",
-      "integrity": "sha512-IHRsG/6KCf9voXDVAp65wr9KUirTAZi+7r8BqWl28YbRKsQeTgOVLqT34CDhMAtWSPUBTXOBmaB9w0aXxJU6bQ==",
-      "dependencies": {
-        "@mertasan/tailwindcss-variables": "^2.7.0",
-        "@tailwindcss/container-queries": "^0.1.1",
-        "@toruslabs/vue-icons": "^7.6.2",
-        "@vuelidate/core": "^2.0.3",
-        "daisyui": "^4.12.2"
-      },
-      "engines": {
-        "node": ">=18.x",
-        "npm": ">=9.x"
-      },
-      "peerDependencies": {
-        "tailwindcss": "^3.3.3",
-        "vue": "^3.x"
-      }
-    },
-    "node_modules/@toruslabs/vue-icons": {
-      "version": "7.6.2",
-      "resolved": "https://registry.npmjs.org/@toruslabs/vue-icons/-/vue-icons-7.6.2.tgz",
-      "integrity": "sha512-Yz702Rwg/aXoAyzk2DNzwQRUe+tjGkanrKYK1rpydfmiItJ8CNOWfZs8/7xhtMWlIZWmnWjDKzfgppcFtV7K6A==",
-      "engines": {
-        "node": ">=18.x",
-        "npm": ">=9.x"
-      },
-      "peerDependencies": {
-        "vue": "^3.x"
-      }
+    "node_modules/@types/aria-query": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
+      "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw=="
     },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
@@ -2871,8 +3196,7 @@
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
-      "dev": true
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
     },
     "node_modules/@types/json5": {
       "version": "0.0.29",
@@ -3164,146 +3488,86 @@
         "vite": "^4.2.0 || ^5.0.0"
       }
     },
-    "node_modules/@vue/compiler-core": {
-      "version": "3.5.8",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.8.tgz",
-      "integrity": "sha512-Uzlxp91EPjfbpeO5KtC0KnXPkuTfGsNDeaKQJxQN718uz+RqDYarEf7UhQJGK+ZYloD2taUbHTI2J4WrUaZQNA==",
-      "peer": true,
-      "dependencies": {
-        "@babel/parser": "^7.25.3",
-        "@vue/shared": "3.5.8",
-        "entities": "^4.5.0",
-        "estree-walker": "^2.0.2",
-        "source-map-js": "^1.2.0"
-      }
-    },
-    "node_modules/@vue/compiler-dom": {
-      "version": "3.5.8",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.8.tgz",
-      "integrity": "sha512-GUNHWvoDSbSa5ZSHT9SnV5WkStWfzJwwTd6NMGzilOE/HM5j+9EB9zGXdtu/fCNEmctBqMs6C9SvVPpVPuk1Eg==",
-      "peer": true,
-      "dependencies": {
-        "@vue/compiler-core": "3.5.8",
-        "@vue/shared": "3.5.8"
-      }
-    },
-    "node_modules/@vue/compiler-sfc": {
-      "version": "3.5.8",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.8.tgz",
-      "integrity": "sha512-taYpngQtSysrvO9GULaOSwcG5q821zCoIQBtQQSx7Uf7DxpR6CIHR90toPr9QfDD2mqHQPCSgoWBvJu0yV9zjg==",
-      "peer": true,
-      "dependencies": {
-        "@babel/parser": "^7.25.3",
-        "@vue/compiler-core": "3.5.8",
-        "@vue/compiler-dom": "3.5.8",
-        "@vue/compiler-ssr": "3.5.8",
-        "@vue/shared": "3.5.8",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.30.11",
-        "postcss": "^8.4.47",
-        "source-map-js": "^1.2.0"
-      }
-    },
-    "node_modules/@vue/compiler-ssr": {
-      "version": "3.5.8",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.8.tgz",
-      "integrity": "sha512-W96PtryNsNG9u0ZnN5Q5j27Z/feGrFV6zy9q5tzJVyJaLiwYxvC0ek4IXClZygyhjm+XKM7WD9pdKi/wIRVC/Q==",
-      "peer": true,
+    "node_modules/@vitest/expect": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.0.5.tgz",
+      "integrity": "sha512-yHZtwuP7JZivj65Gxoi8upUN2OzHTi3zVfjwdpu2WrvCZPLwsJ2Ey5ILIPccoW23dd/zQBlJ4/dhi7DWNyXCpA==",
       "dependencies": {
-        "@vue/compiler-dom": "3.5.8",
-        "@vue/shared": "3.5.8"
+        "@vitest/spy": "2.0.5",
+        "@vitest/utils": "2.0.5",
+        "chai": "^5.1.1",
+        "tinyrainbow": "^1.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
       }
     },
-    "node_modules/@vue/reactivity": {
-      "version": "3.5.8",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.8.tgz",
-      "integrity": "sha512-mlgUyFHLCUZcAYkqvzYnlBRCh0t5ZQfLYit7nukn1GR96gc48Bp4B7OIcSfVSvlG1k3BPfD+p22gi1t2n9tsXg==",
-      "peer": true,
+    "node_modules/@vitest/expect/node_modules/@vitest/pretty-format": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.0.5.tgz",
+      "integrity": "sha512-h8k+1oWHfwTkyTkb9egzwNMfJAEx4veaPSnMeKbVSjp4euqGSbQlm5+6VHwTr7u4FJslVVsUG5nopCaAYdOmSQ==",
       "dependencies": {
-        "@vue/shared": "3.5.8"
+        "tinyrainbow": "^1.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
       }
     },
-    "node_modules/@vue/runtime-core": {
-      "version": "3.5.8",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.8.tgz",
-      "integrity": "sha512-fJuPelh64agZ8vKkZgp5iCkPaEqFJsYzxLk9vSC0X3G8ppknclNDr61gDc45yBGTaN5Xqc1qZWU3/NoaBMHcjQ==",
-      "peer": true,
+    "node_modules/@vitest/expect/node_modules/@vitest/utils": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.0.5.tgz",
+      "integrity": "sha512-d8HKbqIcya+GR67mkZbrzhS5kKhtp8dQLcmRZLGTscGVg7yImT82cIrhtn2L8+VujWcy6KZweApgNmPsTAO/UQ==",
       "dependencies": {
-        "@vue/reactivity": "3.5.8",
-        "@vue/shared": "3.5.8"
+        "@vitest/pretty-format": "2.0.5",
+        "estree-walker": "^3.0.3",
+        "loupe": "^3.1.1",
+        "tinyrainbow": "^1.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
       }
     },
-    "node_modules/@vue/runtime-dom": {
-      "version": "3.5.8",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.8.tgz",
-      "integrity": "sha512-DpAUz+PKjTZPUOB6zJgkxVI3GuYc2iWZiNeeHQUw53kdrparSTG6HeXUrYDjaam8dVsCdvQxDz6ZWxnyjccUjQ==",
-      "peer": true,
+    "node_modules/@vitest/expect/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
       "dependencies": {
-        "@vue/reactivity": "3.5.8",
-        "@vue/runtime-core": "3.5.8",
-        "@vue/shared": "3.5.8",
-        "csstype": "^3.1.3"
+        "@types/estree": "^1.0.0"
       }
     },
-    "node_modules/@vue/server-renderer": {
-      "version": "3.5.8",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.8.tgz",
-      "integrity": "sha512-7AmC9/mEeV9mmXNVyUIm1a1AjUhyeeGNbkLh39J00E7iPeGks8OGRB5blJiMmvqSh8SkaS7jkLWSpXtxUCeagA==",
-      "peer": true,
+    "node_modules/@vitest/pretty-format": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.1.4.tgz",
+      "integrity": "sha512-L95zIAkEuTDbUX1IsjRl+vyBSLh3PwLLgKpghl37aCK9Jvw0iP+wKwIFhfjdUtA2myLgjrG6VU6JCFLv8q/3Ww==",
       "dependencies": {
-        "@vue/compiler-ssr": "3.5.8",
-        "@vue/shared": "3.5.8"
+        "tinyrainbow": "^1.2.0"
       },
-      "peerDependencies": {
-        "vue": "3.5.8"
+      "funding": {
+        "url": "https://opencollective.com/vitest"
       }
     },
-    "node_modules/@vue/shared": {
-      "version": "3.5.8",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.8.tgz",
-      "integrity": "sha512-mJleSWbAGySd2RJdX1RBtcrUBX6snyOc0qHpgk3lGi4l9/P/3ny3ELqFWqYdkXIwwNN/kdm8nD9ky8o6l/Lx2A==",
-      "peer": true
-    },
-    "node_modules/@vuelidate/core": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@vuelidate/core/-/core-2.0.3.tgz",
-      "integrity": "sha512-AN6l7KF7+mEfyWG0doT96z+47ljwPpZfi9/JrNMkOGLFv27XVZvKzRLXlmDPQjPl/wOB1GNnHuc54jlCLRNqGA==",
+    "node_modules/@vitest/spy": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-2.0.5.tgz",
+      "integrity": "sha512-c/jdthAhvJdpfVuaexSrnawxZz6pywlTPe84LUB2m/4t3rl2fTo9NFGBG4oWgaD+FTgDDV8hJ/nibT7IfH3JfA==",
       "dependencies": {
-        "vue-demi": "^0.13.11"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^2.0.0 || >=3.0.0"
+        "tinyspy": "^3.0.0"
       },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
+      "funding": {
+        "url": "https://opencollective.com/vitest"
       }
     },
-    "node_modules/@vuelidate/core/node_modules/vue-demi": {
-      "version": "0.13.11",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
-      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
-      "hasInstallScript": true,
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
+    "node_modules/@vitest/utils": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.1.4.tgz",
+      "integrity": "sha512-MXDnZn0Awl2S86PSNIim5PWXgIAx8CIkzu35mBdSApUip6RFOGXBCf3YFyeEu8n1IHk4bWD46DeYFu9mQlFIRg==",
+      "dependencies": {
+        "@vitest/pretty-format": "2.1.4",
+        "loupe": "^3.1.2",
+        "tinyrainbow": "^1.2.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
+        "url": "https://opencollective.com/vitest"
       }
     },
     "node_modules/@walletconnect/core": {
@@ -3648,6 +3912,10 @@
       "optional": true,
       "peer": true
     },
+    "node_modules/@web3auth/account-abstraction-provider": {
+      "resolved": "../../packages/providers/account-abstraction-provider",
+      "link": true
+    },
     "node_modules/@web3auth/auth": {
       "version": "9.4.0",
       "resolved": "https://registry.npmjs.org/@web3auth/auth/-/auth-9.4.0.tgz",
@@ -4095,7 +4363,6 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^1.9.0"
       },
@@ -4300,6 +4567,26 @@
         "util": "^0.12.5"
       }
     },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/ast-types": {
+      "version": "0.16.1",
+      "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.16.1.tgz",
+      "integrity": "sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==",
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/ast-types-flow": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz",
@@ -4327,6 +4614,7 @@
       "version": "10.4.20",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
       "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -4429,6 +4717,18 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/better-opn": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/better-opn/-/better-opn-3.0.2.tgz",
+      "integrity": "sha512-aVNobHnJqLiUelTaHat9DZ1qM2w0C0Eym4LPI/3JxOnSokGVdsl1T1kN7TFvsEAD8G47A6VKQ0TVHqbBnYMJlQ==",
+      "peer": true,
+      "dependencies": {
+        "open": "^8.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/bigint-buffer": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/bigint-buffer/-/bigint-buffer-1.1.5.tgz",
@@ -4521,10 +4821,17 @@
       "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
       "integrity": "sha512-cKV8tMCEpQs4hK/ik71d6LrPOnpkpGBR0wzxqr68g2m/LB2GxVYQroAjMJZRVM1Y4BCjCKc3vAamxSzOY2RP+w=="
     },
+    "node_modules/browser-assert": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/browser-assert/-/browser-assert-1.2.1.tgz",
+      "integrity": "sha512-nfulgvOR6S4gt9UKCeGJOuSGBPGiFT6oQ/2UBnvTY/5aQ1PnksW72fhZkM30DzoRRv2WpwZf1vHHEr3mtuXIWQ==",
+      "peer": true
+    },
     "node_modules/browserslist": {
       "version": "4.23.3",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.3.tgz",
       "integrity": "sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -4634,6 +4941,7 @@
       "version": "1.0.30001662",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001662.tgz",
       "integrity": "sha512-sgMUVwLmGseH8ZIrm1d51UbrhqMCH3jvS7gF/M6byuHOnKyLOBL7W8yz5V02OHwgLGA36o/AFhWzzh4uc5aqTA==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -4649,11 +4957,25 @@
         }
       ]
     },
+    "node_modules/chai": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-5.1.2.tgz",
+      "integrity": "sha512-aGtmf24DW6MLHHG5gCx4zaI3uBq3KRtxeVs0DjFH6Z0rDNbsvTxFASFvdj79pxjxZ8/5u3PIiN3IwEIQkiiuPw==",
+      "dependencies": {
+        "assertion-error": "^2.0.1",
+        "check-error": "^2.1.1",
+        "deep-eql": "^5.0.1",
+        "loupe": "^3.1.0",
+        "pathval": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
       "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -4663,6 +4985,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/check-error": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz",
+      "integrity": "sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==",
+      "engines": {
+        "node": ">= 16"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -4707,6 +5037,25 @@
         "consola": "^3.2.3"
       }
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz",
+      "integrity": "sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==",
+      "dependencies": {
+        "clsx": "2.0.0"
+      },
+      "funding": {
+        "url": "https://joebell.co.uk"
+      }
+    },
+    "node_modules/class-variance-authority/node_modules/clsx": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/classnames": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
@@ -4730,6 +5079,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
@@ -4746,7 +5103,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
       "dependencies": {
         "color-name": "1.1.3"
       }
@@ -4884,14 +5240,10 @@
         }
       }
     },
-    "node_modules/css-selector-tokenizer": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
-      "integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==",
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "fastparse": "^1.1.2"
-      }
+    "node_modules/css.escape": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
+      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg=="
     },
     "node_modules/cssesc": {
       "version": "3.0.0",
@@ -4907,33 +5259,8 @@
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
-    },
-    "node_modules/culori": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz",
-      "integrity": "sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==",
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      }
-    },
-    "node_modules/daisyui": {
-      "version": "4.12.10",
-      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.12.10.tgz",
-      "integrity": "sha512-jp1RAuzbHhGdXmn957Z2XsTZStXGHzFfF0FgIOZj3Wv9sH7OZgLfXTRZNfKVYxltGUOBsG1kbWAdF5SrqjebvA==",
-      "dependencies": {
-        "css-selector-tokenizer": "^0.8",
-        "culori": "^3",
-        "picocolors": "^1",
-        "postcss-js": "^4"
-      },
-      "engines": {
-        "node": ">=16.9.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/daisyui"
-      }
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "dev": true
     },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
@@ -5014,6 +5341,14 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/deep-eql": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz",
+      "integrity": "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/deep-equal": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.3.tgz",
@@ -5074,6 +5409,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/define-lazy-prop": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/define-properties": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
@@ -5108,6 +5452,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/destr": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/destr/-/destr-2.0.3.tgz",
@@ -5167,6 +5519,11 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-accessibility-api": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
+      "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg=="
+    },
     "node_modules/duplexify": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-4.1.3.tgz",
@@ -5203,7 +5560,8 @@
     "node_modules/electron-to-chromium": {
       "version": "1.5.25",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.25.tgz",
-      "integrity": "sha512-kMb204zvK3PsSlgvvwzI3wBIcAw15tRkYk+NQdsjdDtcQWTp2RABbMQ9rUBy8KNEOM+/E6ep+XC3AykiWZld4g=="
+      "integrity": "sha512-kMb204zvK3PsSlgvvwzI3wBIcAw15tRkYk+NQdsjdDtcQWTp2RABbMQ9rUBy8KNEOM+/E6ep+XC3AykiWZld4g==",
+      "dev": true
     },
     "node_modules/elliptic": {
       "version": "6.5.7",
@@ -5278,18 +5636,6 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/entities": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
-      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "peer": true,
-      "engines": {
-        "node": ">=0.12"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/entities?sponsor=1"
-      }
-    },
     "node_modules/es-abstract": {
       "version": "1.23.3",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz",
@@ -5476,7 +5822,6 @@
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
       "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
-      "dev": true,
       "hasInstallScript": true,
       "bin": {
         "esbuild": "bin/esbuild"
@@ -5510,10 +5855,23 @@
         "@esbuild/win32-x64": "0.21.5"
       }
     },
+    "node_modules/esbuild-register": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/esbuild-register/-/esbuild-register-3.6.0.tgz",
+      "integrity": "sha512-H2/S7Pm8a9CL1uhp9OvjwrBh5Pvx0H8qVOxNu8Wed9Y7qv56MPtq+GGM8RJpq6glYJn9Wspr8uw7l55uyinNeg==",
+      "peer": true,
+      "dependencies": {
+        "debug": "^4.3.4"
+      },
+      "peerDependencies": {
+        "esbuild": ">=0.12 <1"
+      }
+    },
     "node_modules/escalade": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
       "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -5522,7 +5880,6 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "dev": true,
       "engines": {
         "node": ">=0.8.0"
       }
@@ -6176,6 +6533,19 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/esprima": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "peer": true,
+      "bin": {
+        "esparse": "bin/esparse.js",
+        "esvalidate": "bin/esvalidate.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/esquery": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
@@ -6206,12 +6576,6 @@
         "node": ">=4.0"
       }
     },
-    "node_modules/estree-walker": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
-      "peer": true
-    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -6420,11 +6784,6 @@
       "resolved": "https://registry.npmjs.org/fast-stable-stringify/-/fast-stable-stringify-1.0.0.tgz",
       "integrity": "sha512-wpYMUmFu5f00Sm0cj2pfivpmawLZ0NKdviQ4w9zJeR8JVtOpOxHmLaJuj0vxvGqMJQWyP/COUkF75/57OKyRag=="
     },
-    "node_modules/fastparse": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
-      "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ=="
-    },
     "node_modules/fastq": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
@@ -6530,6 +6889,7 @@
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
       "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "dev": true,
       "engines": {
         "node": "*"
       },
@@ -6812,7 +7172,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -7018,6 +7377,14 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/indent-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz",
+      "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -7646,6 +8013,15 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/jsdoc-type-pratt-parser": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-4.1.0.tgz",
+      "integrity": "sha512-Hicd6JK5Njt2QB6XYFS7ok9e37O8AYk3jTcppG4YVQnYjOemymvTcmc7OWsmq/Qqj5TdRFO5/x/tIPmBeRtGHg==",
+      "peer": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/jsesc": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
@@ -7879,11 +8255,6 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
-    "node_modules/lodash.debounce": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
-    },
     "node_modules/lodash.isequal": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
@@ -7917,6 +8288,11 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/loupe": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.2.tgz",
+      "integrity": "sha512-23I4pFZHmAemUnz8WZXbYRSKYj801VDaNv9ETuMh7IrMc7VuVVSo+Z9iLE3ni30+U48iDWfi30d3twAXBYmnCg=="
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -7926,13 +8302,12 @@
         "yallist": "^3.0.2"
       }
     },
-    "node_modules/magic-string": {
-      "version": "0.30.11",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
-      "integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==",
-      "peer": true,
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.5.0"
+    "node_modules/lz-string": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+      "bin": {
+        "lz-string": "bin/bin.js"
       }
     },
     "node_modules/merge-stream": {
@@ -7988,6 +8363,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/min-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -8149,7 +8532,8 @@
     "node_modules/node-releases": {
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
-      "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g=="
+      "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==",
+      "dev": true
     },
     "node_modules/normalize-path": {
       "version": "3.0.0",
@@ -8163,6 +8547,7 @@
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
       "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -8380,6 +8765,50 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/open": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
+      "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
+      "peer": true,
+      "dependencies": {
+        "define-lazy-prop": "^2.0.0",
+        "is-docker": "^2.1.1",
+        "is-wsl": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/open/node_modules/is-docker": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+      "peer": true,
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/open/node_modules/is-wsl": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+      "peer": true,
+      "dependencies": {
+        "is-docker": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -8504,6 +8933,14 @@
       "optional": true,
       "peer": true
     },
+    "node_modules/pathval": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/pathval/-/pathval-2.0.0.tgz",
+      "integrity": "sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==",
+      "engines": {
+        "node": ">= 14.16"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
@@ -8777,6 +9214,35 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/pretty-format/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/pretty-format/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+    },
     "node_modules/process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
@@ -8925,6 +9391,14 @@
         }
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
+      "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -8996,6 +9470,34 @@
         "node": ">= 12.13.0"
       }
     },
+    "node_modules/recast": {
+      "version": "0.23.9",
+      "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.9.tgz",
+      "integrity": "sha512-Hx/BGIbwj+Des3+xy5uAtAbdCyqK9y9wbBcDFDYanLS9JnMqf7OeF87HQwUimE87OEc72mr6tkKUKMBBL+hF9Q==",
+      "peer": true,
+      "dependencies": {
+        "ast-types": "^0.16.1",
+        "esprima": "~4.0.0",
+        "source-map": "~0.6.1",
+        "tiny-invariant": "^1.3.3",
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/redent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
+      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+      "dependencies": {
+        "indent-string": "^4.0.0",
+        "strip-indent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
@@ -9430,6 +9932,15 @@
         "atomic-sleep": "^1.0.0"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -9476,6 +9987,32 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/storybook": {
+      "version": "8.4.1",
+      "resolved": "https://registry.npmjs.org/storybook/-/storybook-8.4.1.tgz",
+      "integrity": "sha512-0tfFIFghjho9FtnFoiJMoxhcs2iIdvEF81GTSVnTsDVJrYA84nB+FxN3UY1fT0BcQ8BFlbf+OhSjZL7ufqqWKA==",
+      "peer": true,
+      "dependencies": {
+        "@storybook/core": "8.4.1"
+      },
+      "bin": {
+        "getstorybook": "bin/index.cjs",
+        "sb": "bin/index.cjs",
+        "storybook": "bin/index.cjs"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/storybook"
+      },
+      "peerDependencies": {
+        "prettier": "^2 || ^3"
+      },
+      "peerDependenciesMeta": {
+        "prettier": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/stream-shift": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.3.tgz",
@@ -9694,6 +10231,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/strip-indent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+      "dependencies": {
+        "min-indent": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -9738,7 +10286,6 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
       "dependencies": {
         "has-flag": "^3.0.0"
       },
@@ -9785,6 +10332,20 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+    },
+    "node_modules/tailwind-merge": {
+      "version": "2.5.4",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.4.tgz",
+      "integrity": "sha512-0q8cfZHMu9nuYP/b5Shb7Y7Sh1B7Nnl5GqNr1U+n2p6+mybvRtayrQ+0042Z5byvTA8ihjlP8Odo8/VnHbZu4Q==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.12",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.12.tgz",
@@ -9873,10 +10434,33 @@
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
       "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg=="
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "peer": true
+    },
+    "node_modules/tinyrainbow": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-1.2.0.tgz",
+      "integrity": "sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tinyspy": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-3.0.2.tgz",
+      "integrity": "sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
       "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -10256,6 +10840,7 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
       "integrity": "sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -10296,20 +10881,6 @@
         "punycode": "^2.1.0"
       }
     },
-    "node_modules/usehooks-ts": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-3.1.0.tgz",
-      "integrity": "sha512-bBIa7yUyPhE1BCc0GmR96VU/15l/9gP1Ch5mYdLcFBaFGQsdmXkvjV0TtOqW1yUd6VjIwDunm+flSciCQXujiw==",
-      "dependencies": {
-        "lodash.debounce": "^4.0.8"
-      },
-      "engines": {
-        "node": ">=16.15.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0  || ^17 || ^18"
-      }
-    },
     "node_modules/utf-8-validate": {
       "version": "5.0.10",
       "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz",
@@ -10415,27 +10986,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/vue": {
-      "version": "3.5.8",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.8.tgz",
-      "integrity": "sha512-hvuvuCy51nP/1fSRvrrIqTLSvrSyz2Pq+KQ8S8SXCxTWVE0nMaOnSDnSOxV1eYmGfvK7mqiwvd1C59CEEz7dAQ==",
-      "peer": true,
-      "dependencies": {
-        "@vue/compiler-dom": "3.5.8",
-        "@vue/compiler-sfc": "3.5.8",
-        "@vue/runtime-dom": "3.5.8",
-        "@vue/server-renderer": "3.5.8",
-        "@vue/shared": "3.5.8"
-      },
-      "peerDependencies": {
-        "typescript": "*"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/web3": {
       "version": "4.13.0",
       "resolved": "https://registry.npmjs.org/web3/-/web3-4.13.0.tgz",
diff --git a/demo/react-app-new/package.json b/demo/react-app-new/package.json
index bf2cab234..9cb2f171e 100644
--- a/demo/react-app-new/package.json
+++ b/demo/react-app-new/package.json
@@ -14,8 +14,8 @@
     "@toruslabs/constants": "^14.0.0",
     "@toruslabs/eslint-config-react": "^3.4.3",
     "@toruslabs/ethereum-controllers": "^6.1.3",
-    "@toruslabs/vue-components": "^7.8.3",
-    "@toruslabs/vue-icons": "^7.6.2",
+    "@toruslabs/react-components": "file:toruslabs-react-components-1.0.0.tgz",
+    "@web3auth/account-abstraction-provider": "file:../../packages/providers/account-abstraction-provider",
     "@web3auth/auth": "^9.4.0",
     "@web3auth/auth-adapter": "file:../../packages/adapters/auth-adapter",
     "@web3auth/base": "file:../../packages/base",
@@ -41,7 +41,6 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^15.0.2",
-    "usehooks-ts": "^3.1.0",
     "web3": "^4.13.0"
   },
   "devDependencies": {
diff --git a/demo/react-app-new/src/MainView.tsx b/demo/react-app-new/src/MainView.tsx
index 928768205..5b8fa2ad0 100644
--- a/demo/react-app-new/src/MainView.tsx
+++ b/demo/react-app-new/src/MainView.tsx
@@ -6,9 +6,9 @@ import AppDashboard from "./components/AppDashboard";
 
 function Main() {
 
-  const { web3authContextConfig } = useAppContext();
+  const { web3authConfig } = useAppContext();
   return (
-    <Web3AuthProvider config={web3authContextConfig}>
+    <Web3AuthProvider config={web3authConfig}>
       <AppHeader />
       <main className="flex-1 p-1">
         <div className="relative">
diff --git a/demo/react-app-new/src/components/AppDashboard.tsx b/demo/react-app-new/src/components/AppDashboard.tsx
index 048616e17..188a19f29 100644
--- a/demo/react-app-new/src/components/AppDashboard.tsx
+++ b/demo/react-app-new/src/components/AppDashboard.tsx
@@ -23,7 +23,7 @@ const AppDashboard: React.FC = () => {
     const ethServices = chainNamespace === CHAIN_NAMESPACES.EIP155;
     const solServices = chainNamespace === CHAIN_NAMESPACES.SOLANA;
     const walletServices =
-      chainNamespace === CHAIN_NAMESPACES.EIP155 && walletPlugin.enable && web3Auth?.connectedAdapterName === WALLET_ADAPTERS.AUTH;
+      chainNamespace === CHAIN_NAMESPACES.EIP155 && walletPlugin?.enable && web3Auth?.connectedAdapterName === WALLET_ADAPTERS.AUTH;
     return {
       dashboard,
       ethServices,
diff --git a/demo/react-app-new/src/components/AppHeader.tsx b/demo/react-app-new/src/components/AppHeader.tsx
index 93a2342b8..5b9b74d40 100644
--- a/demo/react-app-new/src/components/AppHeader.tsx
+++ b/demo/react-app-new/src/components/AppHeader.tsx
@@ -1,11 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { useWeb3Auth } from "@web3auth/modal-react-hooks";
 import { useTranslation } from 'react-i18next';
-import { useAppContext } from '../context';
-import { Button } from './CommonUI';
+import { Button } from '@toruslabs/react-components';
 
 const AppHeader: React.FC = () => {
-  const { network } = useAppContext();
   const { t } = useTranslation();
   const { status, logout, isConnected } = useWeb3Auth();
 
@@ -31,18 +29,18 @@ const AppHeader: React.FC = () => {
         <a href="#" className="flex items-center space-x-3 rtl:space-x-reverse">
           <img src="/web3auth.svg" className="h-8" alt="W3A Logo" />
         </a>
-        <div className="flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
+        <div className="flex space-x-3 rtl:space-x-reverse">
           {isDisplay.btnLogout ? (
-            <Button onClick={onLogout}>
+            <Button onClick={onLogout} pill size="sm">
               {t('app.btnLogout')}
             </Button>
           ) : (
-            <Button onClick={()=>{}}>
+            <Button onClick={()=>{}} pill block size="sm" variant="secondary">
               {t('app.documentation')}
             </Button>
           )}
         </div>
-        <div id="navbar-sticky" className="items-center justify-between w-full md:flex md:w-auto md:order-1">
+        <div id="navbar-sticky" className="items-center justify-between w-full">
           {isDisplay.appHeading && (
             <div className="max-sm:w-full">
               <h1 className="leading-tight text-3xl font-extrabold">{t('app.title')}</h1>
diff --git a/demo/react-app-new/src/components/AppSettings.tsx b/demo/react-app-new/src/components/AppSettings.tsx
index 3f7449271..30c724835 100644
--- a/demo/react-app-new/src/components/AppSettings.tsx
+++ b/demo/react-app-new/src/components/AppSettings.tsx
@@ -2,38 +2,53 @@ import React, { useEffect, useState } from "react";
 import { useWeb3Auth } from "@web3auth/modal-react-hooks";
 import { useTranslation } from "react-i18next";
 import { useAppContext } from "../context";
-import useOptions from "../hooks/useOptions";
 import {
+  CHAIN_NAMESPACES,
   ChainNamespaceType,
   WEB3AUTH_NETWORK_TYPE,
 } from "@web3auth/base";
 
-import { Button, Card, ColorPicker, Select, Tabs, Tag, TextField, Toggle } from "./CommonUI";
+import { Card, ColorPicker, Tabs, Tag, TextInput, Toggle } from "./CommonUI";
+import { Select, Button } from "@toruslabs/react-components";
 import { LANGUAGE_TYPE, LOGIN_PROVIDER_TYPE } from "@web3auth/auth";
 
 const AppSettings: React.FC = () => {
   const {
-    network,
-    chainNamespace,
-    chain,
-    adapters,
     setNetWork,
+    chainNamespace,
     setChainNamespace,
     setChain,
     setAdapters,
     whiteLabel,
     setWhiteLabel,
     loginProviders,
-    setLoginProviders,
     loginMethods,
+    setLoginProviders,
     setLoginMethods,
     walletPlugin,
     setWalletPlugin,
+    showWalletDiscovery,
+    setShowWalletDiscovery,
+    networkOptions,
+    chainNamespaceOptions,
+    chainOptions,
+    adapterOptions,
+    loginProviderOptions,
+    languageOptions,
+
+    useAccountAbstractionProvider,
+    setUseAccountAbstractionProvider,
+    useAAWithExternalWallet,
+    setUseAAWithExternalWallet,
+    bundlerUrl,
+    paymasterUrl,
+    setBundlerUrl,
+    setPaymasterUrl,
+    smartAccountTypeOptions,
+    setSmartAccountType,
   } = useAppContext();
   const { t } = useTranslation();
-  const { status, logout, isConnected, isInitialized, connect } = useWeb3Auth();
-
-  const { networkOptions, chainNamespaceOptions, chainOptions, adapterOptions, loginProviderOptions, languageOptions } = useOptions();
+  const { status, isConnected, isInitialized, connect } = useWeb3Auth();
 
   const [activeTab, setActiveTab] = useState("General");
 
@@ -41,115 +56,74 @@ const AppSettings: React.FC = () => {
     setActiveTab(tab);
   };
 
-  const onChangeAdapters = (value: string[]) => {
-    const [adapter] = value;
-    const adaps = adapters || [];
-    if (adaps.includes(adapter)) {
-      setAdapters(adaps.filter((x) => x !== adapter));
-    } else {
-      setAdapters(adaps.concat(adapter));
-    }
+  const onChangeLoginMethods = (loginProvider: LOGIN_PROVIDER_TYPE, params: {
+    name?: string,
+    description?: string,
+    logoHover?: string,
+    logoLight?: string,
+    logoDark?: string,
+    mainOption?: boolean,
+    showOnModal?: boolean,
+    showOnDesktop?: boolean,
+    showOnMobile?: boolean,
+  }) => {
+    const method = loginMethods?.[loginProvider];
+    setLoginMethods({ ...loginMethods, [loginProvider]: { ...method, ...params } });
   };
 
-  const onChangeLoginProviders = (value: string[]) => {
-    const [loginProvider] = value;
+  const onChangeAppName = (value: string) => {
+    setWhiteLabel({ config: { ...whiteLabel?.config, appName: value } });
+  }
 
-    const providers = loginProviders || [];
+  const onChangeAppUrl = (value: string) => {
+    setWhiteLabel({ config: { ...whiteLabel?.config, appUrl: value } });
+  }
 
-    if (providers.includes(loginProvider as LOGIN_PROVIDER_TYPE)) {
-      setLoginProviders(providers.filter((x) => x !== loginProvider));
-    } else {
-      setLoginProviders(providers.concat(loginProvider as LOGIN_PROVIDER_TYPE));
-    }
-  };
+  const onChangeLogoLight = (value: string) => {
+    setWhiteLabel({ config: { ...whiteLabel?.config, logoLight: value } });
+  }
 
-  const onChangeLoginMethods = (loginProvider: LOGIN_PROVIDER_TYPE, fieldName: string, value: string) => {
-    const method = loginMethods?.[loginProvider];
-    switch (fieldName) {
-      case "name":
-        setLoginMethods({ ...loginMethods, [loginProvider]: { ...method, name: value } });
-        break;
-      case "description":
-        setLoginMethods({ ...loginMethods, [loginProvider]: { ...method, description: value } });
-        break;
-      case "logoHover":
-        setLoginMethods({ ...loginMethods, [loginProvider]: { ...method, logoHover: value } });
-        break;
-      case "logoLight":
-        setLoginMethods({ ...loginMethods, [loginProvider]: { ...method, logoLight: value } });
-        break;
-      case "logoDark":
-        setLoginMethods({ ...loginMethods, [loginProvider]: { ...method, logoDark: value } });
-        break;
-      case "mainOption":
-        setLoginMethods({ ...loginMethods, [loginProvider]: { ...method, mainOption: !method?.mainOption } });
-        break;
-      case "showOnModal":
-        setLoginMethods({ ...loginMethods, [loginProvider]: { ...method, showOnModal: !method?.showOnModal } });
-        break;
-      case "showOnDesktop":
-        setLoginMethods({ ...loginMethods, [loginProvider]: { ...method, showOnDesktop: !method?.showOnDesktop } });
-        break;
-      case "showOnMobile":
-        setLoginMethods({ ...loginMethods, [loginProvider]: { ...method, showOnMobile: !method?.showOnMobile } });
-        break;
-      default:
-        break;
-    }
-  };
+  const onChangeLogoDark = (value: string) => {
+    setWhiteLabel({ config: { ...whiteLabel?.config, logoDark: value } });
+  }
 
-  const onToggle = (fieldName: string) => {
-    switch (fieldName) {
-      case "whiteLabel.enable":
-        setWhiteLabel({ enable: !whiteLabel?.enable, config: whiteLabel?.config });
-        break;
-      case "whiteLabel.config.useLogoLoader":
-        setWhiteLabel({ enable: whiteLabel?.enable, config: { ...whiteLabel?.config, useLogoLoader: !whiteLabel?.config?.useLogoLoader } });
-        break;
-      case "walletPlugin.enable":
-        setWalletPlugin({ enable: !walletPlugin?.enable, logoLight: walletPlugin?.logoLight, logoDark: walletPlugin?.logoDark });
-        break;
-      default:
-        break;
-    }
-  };
+  const onChangePrimary = (value: string) => {
+    setWhiteLabel({ config: { ...whiteLabel?.config, theme: { ...whiteLabel?.config?.theme, primary: value } } });
+  }
 
-  const onTextFieldChange = (fieldName: string, value: string) => {
-    switch (fieldName) {
-      case "whiteLabel.config.appName":
-        setWhiteLabel({ enable: whiteLabel?.enable, config: { ...whiteLabel?.config, appName: value } });
-        break;
-      case "whiteLabel.config.appUrl":
-        setWhiteLabel({ enable: whiteLabel?.enable, config: { ...whiteLabel?.config, appUrl: value } });
-        break;
-      case "whiteLabel.config.logoLight":
-        setWhiteLabel({ enable: whiteLabel?.enable, config: { ...whiteLabel?.config, logoLight: value } });
-        break;
-      case "whiteLabel.config.logoDark":
-        setWhiteLabel({ enable: whiteLabel?.enable, config: { ...whiteLabel?.config, logoDark: value } });
-        break;
-      case "whiteLabel.config.primary":
-        setWhiteLabel({ enable: whiteLabel?.enable, config: { ...whiteLabel?.config, theme: { ...whiteLabel?.config?.theme, primary: value } } });
-        break;
-      case "whiteLabel.config.primaryColor":
-        setWhiteLabel({ enable: whiteLabel?.enable, config: { ...whiteLabel?.config, theme: { ...whiteLabel?.config?.theme, onPrimary: value } } });
-        break;
-      case "walletPlugin.logoLight":
-        setWalletPlugin({ enable: walletPlugin?.enable, logoLight: value, logoDark: walletPlugin?.logoDark });
-        break;
-      case "walletPlugin.logoDark":
-        setWalletPlugin({ enable: walletPlugin?.enable, logoLight: walletPlugin?.logoLight, logoDark: value });
-        break;
-      
-      default:
-        break;
-    }
-  };
+  const onChangePrimaryColor = (value: string) => {
+    setWhiteLabel({ config: { ...whiteLabel?.config, theme: { ...whiteLabel?.config?.theme, onPrimary: value } } });
+  }
+
+  const onChangeWalletLogoLight = (value: string) => {
+    setWalletPlugin({ enable: walletPlugin?.enable, logoLight: value, logoDark: walletPlugin?.logoDark });
+  }
+
+  const onChangeWalletLogoDark = (value: string) => {
+    setWalletPlugin({ enable: walletPlugin?.enable, logoLight: walletPlugin?.logoLight, logoDark: value });
+  }
 
   const onChangLanguage = (value: string) => {
     setWhiteLabel({ enable: whiteLabel?.enable, config: { ...whiteLabel?.config, defaultLanguage: value as LANGUAGE_TYPE } });
   }
 
+  const onToggleShowWalletDiscovery = () => {
+    setShowWalletDiscovery(!showWalletDiscovery);
+  }
+
+  const onToggleEnableWhiteLabel = () => {
+    setWhiteLabel({ enable: !whiteLabel?.enable });
+  }
+
+  const onToggleUseLogoLoader = () => {
+    setWhiteLabel({ config: { ...whiteLabel?.config, useLogoLoader: !whiteLabel?.config?.useLogoLoader } });
+  }
+  
+  const onToggleEnableWalletPlugin = () => {
+    setWalletPlugin({ enable: !walletPlugin?.enable });
+  }
+
+
   return !isConnected && (
     <div className="grid grid-cols-8 gap-0">
       <div className="col-span-0 sm:col-span-1 lg:col-span-2"></div>
@@ -160,61 +134,94 @@ const AppSettings: React.FC = () => {
           &nbsp;
           <Tag text={isInitialized ? "INITIALIZED" : "NOT_INITIALIZE_YET"} />
         </div>
-        <Tabs tabs={["General", "WhiteLabel", "Login Provider", "Wallet Plugin"]} activeTab={activeTab} onTabClick={handleTabClick} />
+        <Tabs tabs={["General", "WhiteLabel", "Login Provider", "Wallet Plugin", chainNamespace === CHAIN_NAMESPACES.EIP155 ? "Account Abstraction Provider" : ""]} activeTab={activeTab} onTabClick={handleTabClick} />
         {activeTab === "General" && (
           <Card className="grid grid-cols-1 gap-2 py-4 px-4 shadow-none">
             <Select
+              block
+              inputSize="md"
               label={t('app.network')}
+              onChange={(value) => setNetWork(value as WEB3AUTH_NETWORK_TYPE)}
               options={networkOptions}
-              onChange={(value) => setNetWork(value[0] as WEB3AUTH_NETWORK_TYPE)}
-              value={[network]}
+              pill
+              placeholder="Select an network"
+              showArrow
             />
             <Select
+              block
+              inputSize="md"
               label={t('app.chainNamespace')}
               options={chainNamespaceOptions}
-              value={[chainNamespace]}
-              onChange={(value) => setChainNamespace(value[0] as ChainNamespaceType)}
+              pill
+              placeholder="Select an chain namespace"
+              showArrow
+              onChange={(value) => 
+                setChainNamespace(value as ChainNamespaceType)}
+            />
+            <Select 
+              block
+              inputSize="md"
+              label={t('app.chain')} 
+              options={chainOptions} 
+              pill
+              placeholder="Select an chain"
+              showArrow
+              onChange={(value) => setChain(value as string)} 
             />
-            <Select label={t('app.chain')} options={chainOptions} value={[chain]} onChange={(value) => setChain(value[0])} />
-            <Select label={t('app.adapters')} options={adapterOptions} value={adapters} onChange={onChangeAdapters} multiple={true} />
+            <Select 
+              block
+              inputSize="md"
+              label={t('app.adapters')} 
+              options={adapterOptions} 
+              pill
+              placeholder="Select an adapters"
+              showArrow
+              onChange={(value) => setAdapters(value as string[])} 
+              multiple={true} 
+            />
+            <Toggle label={t("app.showWalletDiscovery")} isOn={Boolean(showWalletDiscovery)} onToggle={() => onToggleShowWalletDiscovery()} />
           </Card>
         )}
         {activeTab === "WhiteLabel" && (
           <Card className="grid grid-cols-1 sm:grid-cols-2 gap-2 py-4 px-4 shadow-none">
-            <Toggle label={t("app.whiteLabel.title")} isOn={Boolean(whiteLabel?.enable)} onToggle={() => onToggle("whiteLabel.enable")} />
+            <Toggle label={t("app.whiteLabel.title")} isOn={Boolean(whiteLabel?.enable)} onToggle={() => onToggleEnableWhiteLabel()} />
             <Toggle
               label={t("app.whiteLabel.useLogoLoader")}
               isOn={Boolean(whiteLabel?.config?.useLogoLoader)}
-              onToggle={() => onToggle("whiteLabel.config.useLogoLoader")}
+              onToggle={() => onToggleUseLogoLoader()}
               disabled={!whiteLabel?.enable}
             />
-            <TextField
+            <TextInput
               label={t("app.whiteLabel.appName")}
               value={whiteLabel?.config?.appName || ""}
-              onChange={(value) => onTextFieldChange("whiteLabel.config.appName", value)}
+              onChange={(value) => onChangeAppName(value)}
               disabled={!whiteLabel?.enable}
             />
             <Select
+              block
+              filterPlaceholder="Filter languages..."
+              inputSize="md"
               label={t("app.whiteLabel.defaultLanguage")}
               options={languageOptions}
-              value={[whiteLabel?.config?.defaultLanguage || ''] as LANGUAGE_TYPE[]}
               onChange={(value) => onChangLanguage(value[0])}
               disabled={!whiteLabel?.enable}
             />
-            <TextField className="col-span-2" label={t("app.whiteLabel.appUrl")} value={whiteLabel?.config?.appUrl || ""} onChange={(value) => onTextFieldChange("whiteLabel.config.appUrl", value)} disabled={!whiteLabel?.enable} />
-            <TextField label={t("app.whiteLabel.logoLight")} value={whiteLabel?.config?.logoLight || ""} onChange={(value) => onTextFieldChange("whiteLabel.config.logoLight", value)} disabled={!whiteLabel?.enable} />
-            <TextField label={t("app.whiteLabel.logoDark")} value={whiteLabel?.config?.logoDark || ""} onChange={(value) => onTextFieldChange("whiteLabel.config.logoDark", value)} disabled={!whiteLabel?.enable}/>
-            <ColorPicker label={t("app.whiteLabel.primary")} color={whiteLabel?.config?.theme?.primary || ""} onChange={(value) => onTextFieldChange("whiteLabel.config.primary", value)} disabled={!whiteLabel?.enable} />
-            <ColorPicker label={t("app.whiteLabel.primaryColor")} color={whiteLabel?.config?.theme?.onPrimary || ""} onChange={(value) => onTextFieldChange("whiteLabel.config.primaryColor", value)} disabled={!whiteLabel?.enable} />
+            <TextInput className="col-span-2" label={t("app.whiteLabel.appUrl")} value={whiteLabel?.config?.appUrl || ""} onChange={(value) => onChangeAppUrl(value)} disabled={!whiteLabel?.enable} />
+            <TextInput label={t("app.whiteLabel.logoLight")} value={whiteLabel?.config?.logoLight || ""} onChange={(value) => onChangeLogoLight(value)} disabled={!whiteLabel?.enable} />
+            <TextInput label={t("app.whiteLabel.logoDark")} value={whiteLabel?.config?.logoDark || ""} onChange={(value) => onChangeLogoDark(value)} disabled={!whiteLabel?.enable}/>
+            <ColorPicker label={t("app.whiteLabel.primary")} color={whiteLabel?.config?.theme?.primary || ""} onChange={(value) => onChangePrimary(value)} disabled={!whiteLabel?.enable} />
+            <ColorPicker label={t("app.whiteLabel.primaryColor")} color={whiteLabel?.config?.theme?.onPrimary || ""} onChange={(value) => onChangePrimaryColor(value)} disabled={!whiteLabel?.enable} />
           </Card>
         )}
         {activeTab === "Login Provider" && (
           <Card className="grid grid-cols-1 gap-2 py-4 px-4 shadow-none">
             <Select
+              block
+              filterPlaceholder="Filter login providers..."
+              inputSize="md"
               label={t('app.loginProviderTitle')}
               options={loginProviderOptions}
-              value={loginProviders}
-              onChange={onChangeLoginProviders}
+              onChange={(value) => setLoginProviders(value as LOGIN_PROVIDER_TYPE[])}
               multiple={true}
             />
             {(loginProviders || []).map((p, index) => {
@@ -223,39 +230,39 @@ const AppSettings: React.FC = () => {
               return (
                 <Card key={index} className="px-4 py-4 grid grid-cols-1 sm:grid-cols-2 gap-2 shadow-none border">
                   <div className="font-bold leading-tight text-left sm:col-span-2">{p}</div>
-                  <Toggle label={t("app.loginProvider.mainOption")} isOn={mainOption} onToggle={() => onChangeLoginMethods(p, "mainOption", "")} />
-                  <TextField label={t("app.loginProvider.name")} value={name} onChange={(value) => onChangeLoginMethods(p, "name", value)} />
-                  <TextField
+                  <Toggle label={t("app.loginProvider.mainOption")} isOn={mainOption} onToggle={() => onChangeLoginMethods(p, { mainOption: !method?.mainOption })} />
+                  <TextInput label={t("app.loginProvider.name")} value={name} onChange={(value) => onChangeLoginMethods(p, { name: value })} />
+                  <TextInput
                     label={t("app.loginProvider.description")}
                     value={description}
-                    onChange={(value) => onChangeLoginMethods(p, "description", value)}
+                    onChange={(value) => onChangeLoginMethods(p, { description: value })}
                   />
-                  <TextField
+                  <TextInput
                     label={t("app.loginProvider.logoHover")}
                     value={logoHover}
-                    onChange={(value) => onChangeLoginMethods(p, "logoHover", value)}
+                    onChange={(value) => onChangeLoginMethods(p, { logoHover: value })}
                   />
-                  <TextField
+                  <TextInput
                     label={t("app.loginProvider.logoLight")}
                     value={logoLight}
-                    onChange={(value) => onChangeLoginMethods(p, "logoLight", value)}
+                    onChange={(value) => onChangeLoginMethods(p, { logoLight: value })}
                   />
-                  <TextField
+                  <TextInput
                     label={t("app.loginProvider.logoDark")}
                     value={logoDark}
-                    onChange={(value) => onChangeLoginMethods(p, "logoDark", value)}
+                    onChange={(value) => onChangeLoginMethods(p, { logoDark: value })}
                   />
 
-                  <Toggle label={t("app.loginProvider.showOnModal")} isOn={showOnModal} onToggle={() => onChangeLoginMethods(p, "showOnModal", "")} />
+                  <Toggle label={t("app.loginProvider.showOnModal")} isOn={showOnModal} onToggle={() => onChangeLoginMethods(p, { showOnModal: !method?.showOnModal })} />
                   <Toggle
                     label={t("app.loginProvider.showOnDesktop")}
                     isOn={showOnDesktop}
-                    onToggle={() => onChangeLoginMethods(p, "showOnDesktop", "")}
+                    onToggle={() => onChangeLoginMethods(p, { showOnDesktop: !method?.showOnDesktop })}
                   />
                   <Toggle
                     label={t("app.loginProvider.showOnMobile")}
                     isOn={showOnMobile}
-                    onToggle={() => onChangeLoginMethods(p, "showOnMobile", "")}
+                    onToggle={() => onChangeLoginMethods(p, { showOnMobile: !method?.showOnMobile })}
                   />
                 </Card>
               );
@@ -264,23 +271,40 @@ const AppSettings: React.FC = () => {
         )}
         {activeTab === "Wallet Plugin" && (
           <Card className="grid grid-cols-1 gap-2 py-4 px-4 shadow-none">
-            <Toggle label={t("app.walletPlugin.enable")} isOn={Boolean(walletPlugin?.enable)} onToggle={() => onToggle("walletPlugin.enable")} />
-            <TextField
+            <Toggle label={t("app.walletPlugin.enable")} isOn={Boolean(walletPlugin?.enable)} onToggle={() => onToggleEnableWalletPlugin()} />
+            <TextInput
               label={t("app.walletPlugin.logoLight")}
               value={walletPlugin?.logoLight || ""}
-              onChange={(value) => onTextFieldChange("walletPlugin.logoLight", value)}
+              onChange={(value) => onChangeWalletLogoLight(value)}
               disabled={!walletPlugin?.enable}
             />
-            <TextField
+            <TextInput
               label={t("app.walletPlugin.logoDark")}
               value={walletPlugin?.logoDark || ""}
-              onChange={(value) => onTextFieldChange("walletPlugin.logoDark", value)}
+              onChange={(value) => onChangeWalletLogoDark(value)}
               disabled={!walletPlugin?.enable}
             />
           </Card>
         )}
+        {activeTab === "Account Abstraction Provider" && chainNamespace === CHAIN_NAMESPACES.EIP155 && (
+          <Card className="grid grid-cols-1 gap-2 py-4 px-4 shadow-none">
+            <Toggle label={t("app.useAccountAbstractionProvider")} isOn={Boolean(useAccountAbstractionProvider)} onToggle={() => setUseAccountAbstractionProvider(!useAccountAbstractionProvider)} />
+            <Toggle disabled={!useAccountAbstractionProvider} label={t("app.useAAWithExternalWallet")} isOn={Boolean(useAAWithExternalWallet)} onToggle={() => setUseAAWithExternalWallet(!useAAWithExternalWallet)} />
+            <Select
+              block
+              filterPlaceholder="Filter smart account types..."
+              inputSize="md"
+              label={t("app.smartAccountType")}
+              options={smartAccountTypeOptions}
+              onChange={(value) => setSmartAccountType(value as string)}
+              disabled={!useAccountAbstractionProvider} 
+            />
+            <TextInput label={t("app.bundlerUrl")} value={bundlerUrl} onChange={(value) => setBundlerUrl(value)} disabled={!useAccountAbstractionProvider} />
+            <TextInput label={t("app.paymasterUrl")} value={paymasterUrl} onChange={(value) => setPaymasterUrl(value)} disabled={!useAccountAbstractionProvider} />
+          </Card>
+        )}
         <div className="flex justify-center">
-          <Button onClick={connect} className="w-full !h-auto group py-3 rounded-full flex items-center justify-center">
+          <Button onClick={connect} pill size="sm">
             Connect
           </Button>
         </div>
diff --git a/demo/react-app-new/src/components/CommonUI.tsx b/demo/react-app-new/src/components/CommonUI.tsx
index 328440b5c..2aa2aaf00 100644
--- a/demo/react-app-new/src/components/CommonUI.tsx
+++ b/demo/react-app-new/src/components/CommonUI.tsx
@@ -9,7 +9,7 @@ export const Tag: React.FC<{ text: string | null }> = ({ text }) => {
 };
 
 export const Card: React.FC<{ children?: React.ReactNode, className: string, id?: string }> = ({ children, className, id }) => {
-  const classes = `rounded overflow-hidden shadow-lg h-auto ${className}`;
+  const classes = `rounded shadow-lg h-auto ${className}`;
   return (
     <div className={classes} id={id}>
       {children}
@@ -89,22 +89,22 @@ export const Toggle: React.FC<{ isOn: boolean; onToggle: () => void; label: stri
     <div className="flex items-center">
       <div
         onClick={!disabled ? onToggle : undefined}
-        className={`w-14 h-8 flex items-center rounded-full p-1 cursor-pointer ${
-          isOn ? 'bg-blue-500' : 'bg-gray-300'
+        className={`w-9 h-5 flex items-center rounded-full p-0.5 cursor-pointer ${
+          isOn ? 'bg-emerald-300' : 'bg-gray-300'
         } ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
       >
         <div
-          className={`bg-white w-6 h-6 rounded-full shadow-md transform duration-300 ease-in-out ${
-            isOn ? 'translate-x-6' : ''
+          className={`bg-white w-4 h-4 rounded-full shadow-md transform duration-300 ease-in-out ${
+            isOn ? 'translate-x-4' : ''
           }`}
         ></div>
       </div>
-      <span className={`ml-3 text-gray-700 ${disabled ? 'opacity-50' : ''}`}>{label}</span>
+      <span className={`ml-2 text-sm text-gray-700 ${disabled ? 'opacity-50' : ''}`}>{label}</span>
     </div>
   );
 };
 
-export const TextField: React.FC<{
+export const TextInput: React.FC<{
   label: string;
   value: string;
   onChange: (value: string) => void;
diff --git a/demo/react-app-new/src/config.ts b/demo/react-app-new/src/config.ts
index 9057506a2..7f8ee3193 100644
--- a/demo/react-app-new/src/config.ts
+++ b/demo/react-app-new/src/config.ts
@@ -4,17 +4,17 @@ import { CHAIN_NAMESPACES, ChainNamespaceType, CustomChainConfig, IAdapter, IBas
 import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
 import { WalletServicesPlugin } from "@web3auth/wallet-services-plugin";
 
-export const languageOptions: { label: string; value: LANGUAGE_TYPE }[] = [
-  { label: "English", value: LANGUAGES.en },
-  { label: "German", value: LANGUAGES.de },
-  { label: "Japanese", value: LANGUAGES.ja },
-  { label: "Korean", value: LANGUAGES.ko },
-  { label: "Mandarin", value: LANGUAGES.zh },
-  { label: "Spanish", value: LANGUAGES.es },
-  { label: "French", value: LANGUAGES.fr },
-  { label: "Portuguese", value: LANGUAGES.pt },
-  { label: "Dutch", value: LANGUAGES.nl },
-  { label: "Turkish", value: LANGUAGES.tr },
+export const languageOptions: { name: string; value: LANGUAGE_TYPE }[] = [
+  { name: "English", value: LANGUAGES.en },
+  { name: "German", value: LANGUAGES.de },
+  { name: "Japanese", value: LANGUAGES.ja },
+  { name: "Korean", value: LANGUAGES.ko },
+  { name: "Mandarin", value: LANGUAGES.zh },
+  { name: "Spanish", value: LANGUAGES.es },
+  { name: "French", value: LANGUAGES.fr },
+  { name: "Portuguese", value: LANGUAGES.pt },
+  { name: "Dutch", value: LANGUAGES.nl },
+  { name: "Turkish", value: LANGUAGES.tr },
 ];
 
 export const getV4TypedData = (chainId: string): SignTypedDataMessageV4 => ({
@@ -49,7 +49,7 @@ export const getV4TypedData = (chainId: string): SignTypedDataMessageV4 => ({
 });
 
 
-export const networkOptions = Object.values(WEB3AUTH_NETWORK).map((x) => ({ label: x, value: x }));
+export const networkOptions = Object.values(WEB3AUTH_NETWORK).map((x) => ({ name: x, value: x }));
 
 export const clientIds: Record<WEB3AUTH_NETWORK_TYPE, string> = {
   [WEB3AUTH_NETWORK.MAINNET]: "BJRZ6qdDTbj6Vd5YXvV994TYCqY42-PxldCetmvGTUdoq6pkCqdpuC1DIehz76zuYdaq1RJkXGHuDraHRhCQHvA",
@@ -72,6 +72,15 @@ export const chainConfigs: Record<ChainNamespaceType, CustomChainConfig[]> = {
       ticker: "ETH",
       tickerName: "Ethereum",
     },
+    {
+      chainNamespace: CHAIN_NAMESPACES.EIP155,
+      rpcTarget: "https://rpc.ankr.com/eth_sepolia",
+      blockExplorerUrl: "https://sepolia.etherscan.io",
+      logo: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
+      chainId: "0xaa36a7",
+      ticker: "ETH",
+      tickerName: "Sepolia Testnet",
+    },
     {
       chainNamespace: CHAIN_NAMESPACES.EIP155,
       rpcTarget: "https://data-seed-prebsc-2-s3.binance.org:8545",
@@ -84,16 +93,16 @@ export const chainConfigs: Record<ChainNamespaceType, CustomChainConfig[]> = {
     },
     {
       chainNamespace: CHAIN_NAMESPACES.EIP155,
-      rpcTarget: "https://rpc-mumbai.maticvigil.com",
-      blockExplorerUrl: "https://mumbai-explorer.matic.today",
-      logo: "https://cryptologos.cc/logos/polygon-matic-logo.png",
-      chainId: "0x13881",
-      displayName: "Polygon Mumbai Testnet",
-      ticker: "matic",
-      tickerName: "matic",
+      chainId: "0x13882",
+      rpcTarget: "https://rpc.ankr.com/polygon_amoy",
+      displayName: "Polygon Amoy Testnet",
+      blockExplorerUrl: "https://amoy.polygonscan.com/",
+      ticker: "POL",
+      tickerName: "Polygon Ecosystem Token",
     },
   ],
   [CHAIN_NAMESPACES.SOLANA]: [
+    // Ref: https://namespaces.chainagnostic.org/solana/caip10
     {
       chainNamespace: CHAIN_NAMESPACES.SOLANA,
       rpcTarget: "https://api.devnet.solana.com",
@@ -101,7 +110,16 @@ export const chainConfigs: Record<ChainNamespaceType, CustomChainConfig[]> = {
       logo: "https://cryptologos.cc/logos/solana-sol-logo.png",
       chainId: "0x3",
       ticker: "SOL",
-      tickerName: "Solana",
+      tickerName: "Solana Devnet",
+    },
+    {
+      chainNamespace: CHAIN_NAMESPACES.SOLANA,
+      rpcTarget: "https://api.devnet.solana.com",
+      blockExplorerUrl: "https://explorer.solana.com",
+      logo: "https://cryptologos.cc/logos/solana-sol-logo.png",
+      chainId: "0x1",
+      ticker: "SOL",
+      tickerName: "Solana Mainnet",
     },
   ],
   [CHAIN_NAMESPACES.CASPER]: [],
@@ -109,11 +127,12 @@ export const chainConfigs: Record<ChainNamespaceType, CustomChainConfig[]> = {
   [CHAIN_NAMESPACES.OTHER]: [],
 };
 
-export const chainNamespaceOptions = Object.values(CHAIN_NAMESPACES).filter(x => chainConfigs[x].length > 0).map((x) => ({ label: x, value: x }));
+
+export const chainNamespaceOptions = Object.values(CHAIN_NAMESPACES).filter(x => chainConfigs[x].length > 0).map((x) => ({ name: x, value: x }));
 
 export const loginProviderOptions = Object.values(LOGIN_PROVIDER)
   .filter((x) => x !== "jwt" && x !== "webauthn")
-  .map((x) => ({ label: x.replaceAll("_", " "), value: x }));
+  .map((x) => ({ name: x.replaceAll("_", " "), value: x }));
 
 const intialNetwork = WEB3AUTH_NETWORK.SAPPHIRE_DEVNET;
 const initalChainId = "0x1";
@@ -152,4 +171,32 @@ export const web3authInitialConfig = {
     },
   },
 
-}
\ No newline at end of file
+}
+
+export const initWhiteLabel: WhiteLabelData = {
+  appName: "HelloDemo",
+  appUrl: "http://localhost:8080",
+  logoDark: "https://images.web3auth.io/example-hello.svg", // dark logo for light background
+  logoLight: "https://images.web3auth.io/example-hello-light.svg", // light logo for dark background
+  mode: "auto",
+  defaultLanguage: "en",
+  theme: {
+    primary: "#5DF0EB",
+    onPrimary: "black",
+  },
+};
+
+export const getDefaultBundlerUrl = (chainId: string): string => {
+  return `https://api.pimlico.io/v2/${Number(chainId)}/rpc?apikey=${process.env.PIMLICO_API_KEY}`;
+};
+
+export type SmartAccountType = "safe" | "kernel" | "biconomy" | "trust";
+
+export const SmartAccountOptions: { name: string; value: SmartAccountType }[] = [
+  { name: "Safe", value: "safe" },
+  { name: "Biconomy", value: "biconomy" },
+  { name: "Kernel", value: "kernel" },
+  { name: "Trust", value: "trust" },
+  // { name: "Light", value: "light" },
+  // { name: "Simple", value: "simple" },
+];
diff --git a/demo/react-app-new/src/context/AppContext.tsx b/demo/react-app-new/src/context/AppContext.tsx
index b3e23bfbf..72d3ac16f 100644
--- a/demo/react-app-new/src/context/AppContext.tsx
+++ b/demo/react-app-new/src/context/AppContext.tsx
@@ -1,10 +1,9 @@
 import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { LOGIN_PROVIDER, LOGIN_PROVIDER_TYPE, WhiteLabelData } from "@web3auth/auth";
-import { CHAIN_NAMESPACES, ChainNamespaceType, CustomChainConfig, IAdapter, IBaseProvider, IPlugin, WALLET_ADAPTER_TYPE, WALLET_ADAPTERS, WEB3AUTH_NETWORK, WEB3AUTH_NETWORK_TYPE } from "@web3auth/base";
-import { useSessionStorage } from 'usehooks-ts'
+import { CHAIN_NAMESPACES, ChainNamespaceType, CustomChainConfig, IAdapter, IBaseProvider, IPlugin, IProvider, WALLET_ADAPTER_TYPE, WALLET_ADAPTERS, WEB3AUTH_NETWORK, WEB3AUTH_NETWORK_TYPE } from "@web3auth/base";
 import { Web3AuthContextConfig } from '@web3auth/modal-react-hooks';
 import { type ModalConfig, type Web3Auth, type Web3AuthOptions } from "@web3auth/modal";
-import { chainConfigs, clientIds, web3authInitialConfig } from '@/config';
+import { chainConfigs, chainNamespaceOptions, clientIds, getDefaultBundlerUrl, initWhiteLabel, languageOptions, loginProviderOptions, networkOptions, SmartAccountOptions, web3authInitialConfig } from '../config';
 import { EthereumPrivateKeyProvider } from '@web3auth/ethereum-provider';
 import { SolanaPrivateKeyProvider } from "@web3auth/solana-provider";
 import { CommonPrivateKeyProvider } from "@web3auth/base-provider";
@@ -15,6 +14,9 @@ import { getInjectedAdapters as getInjectedSolanaAdapters } from "@web3auth/defa
 import { TorusWalletAdapter } from "@web3auth/torus-evm-adapter";
 import { WalletConnectV2Adapter } from "@web3auth/wallet-connect-v2-adapter";
 import { SolanaWalletAdapter } from "@web3auth/torus-solana-adapter";
+import { AccountAbstractionProvider, ISmartAccount, KernelSmartAccount, SafeSmartAccount, TrustSmartAccount } from '@web3auth/account-abstraction-provider';
+import { BiconomySmartAccount } from '@web3auth/account-abstraction-provider';
+
 
 interface AppConfigSettings {
   name: string;
@@ -29,52 +31,64 @@ interface AppConfigSettings {
 }
 
 interface Option {
-  label: string;
+  name: string;
   value: string;
 }
 
 type AppContextType = {
+  // values for the form
   network: WEB3AUTH_NETWORK_TYPE;
-  setNetWork: (network: WEB3AUTH_NETWORK_TYPE) => void;
   chainNamespace: ChainNamespaceType;
-  setChainNamespace: (chainNamespace: ChainNamespaceType) => void;
   chain: string;
-  setChain: (chain: string) => void;
   whiteLabel: {
-    enable: boolean;
-    config: WhiteLabelData;
+    enable?: boolean;
+    config?: WhiteLabelData;
   };
-  setWhiteLabel: (whiteLabel: { enable: boolean; config: WhiteLabelData }) => void;
   loginProviders: LOGIN_PROVIDER_TYPE[];
-  setLoginProviders: (loginProviders: LOGIN_PROVIDER_TYPE[]) => void;
   adapters: string[];
-  setAdapters: (adapters: string[]) => void;
+  showWalletDiscovery: boolean;
   loginMethods: Record<LOGIN_PROVIDER_TYPE, AppConfigSettings>;
-  setLoginMethods: (loginMethods: Record<LOGIN_PROVIDER_TYPE, AppConfigSettings>) => void;
   walletPlugin: {
-    enable: boolean;
-    logoDark: string;
-    logoLight: string;
+    enable?: boolean;
+    logoDark?: string;
+    logoLight?: string;
   };
-  setWalletPlugin: (walletPlugin: { enable: boolean; logoDark: string; logoLight: string }) => void;
-  web3authContextConfig: Web3AuthContextConfig;
-};
+  useAccountAbstractionProvider: boolean;
+  useAAWithExternalWallet: boolean;
+  smartAccountType: string;
+  bundlerUrl: string;
+  paymasterUrl: string;
 
-const initWhiteLabel: WhiteLabelData = {
-  appName: "HelloDemo",
-  appUrl: "http://localhost:8080",
-  logoDark: "https://images.web3auth.io/example-hello.svg", // dark logo for light background
-  logoLight: "https://images.web3auth.io/example-hello-light.svg", // light logo for dark background
-  mode: "auto",
-  defaultLanguage: "en",
-  theme: {
-    primary: "#5DF0EB",
-    onPrimary: "black",
-  },
+  // setters for the form
+  setNetWork: (network: WEB3AUTH_NETWORK_TYPE) => void;
+  setChainNamespace: (chainNamespace: ChainNamespaceType) => void;
+  setChain: (chain: string) => void;
+  setWhiteLabel: (whiteLabel: { enable?: boolean; config?: WhiteLabelData }) => void;
+  setLoginProviders: (loginProviders: LOGIN_PROVIDER_TYPE[]) => void;
+  setAdapters: (adapters: string[]) => void;
+  setLoginMethods: (loginMethods: Record<LOGIN_PROVIDER_TYPE, AppConfigSettings>) => void;
+  setWalletPlugin: (walletPlugin: { enable?: boolean; logoDark?: string; logoLight?: string }) => void;
+  setShowWalletDiscovery: (showWalletDiscovery: boolean) => void;
+  setUseAccountAbstractionProvider: (useAccountAbstractionProvider: boolean) => void;
+  setUseAAWithExternalWallet: (useAAWithExternalWallet: boolean) => void;
+  setSmartAccountType: (smartAccountType: string) => void;
+  setBundlerUrl: (bundlerUrl: string) => void;
+  setPaymasterUrl: (paymasterUrl: string) => void;
+
+  // Web3Auth Config
+  web3authConfig: Web3AuthContextConfig;
+ 
+  // Options for the form
+  networkOptions: Option[];
+  chainNamespaceOptions: Option[];
+  chainOptions: Option[];
+  adapterOptions: Option[];
+  loginMethodOptions: Option[];
+  languageOptions: Option[];
+  loginProviderOptions: Option[];
+  smartAccountTypeOptions: Option[];
+  
 };
-const loginProviderOptions = Object.values(LOGIN_PROVIDER)
-  .filter((x) => x !== "jwt" && x !== "webauthn")
-  .map((x) => ({ name: x.replaceAll("_", " "), value: x }));
 
 const defaultLoginMethod: Record<LOGIN_PROVIDER_TYPE, AppConfigSettings> = loginProviderOptions.reduce(
   (acc, curr) => ({
@@ -110,6 +124,16 @@ const AppContext = createContext<AppContextType>({
     logoLight: "",
     logoDark: "",
   },
+  showWalletDiscovery: true,
+
+  useAccountAbstractionProvider: false,
+  useAAWithExternalWallet: true,
+  smartAccountType: "",
+  bundlerUrl: "",
+  paymasterUrl: "",
+
+  web3authConfig: {} as Web3AuthContextConfig,
+
   setNetWork: () => {},
   setChainNamespace: () => {},
   setChain: () => {},
@@ -118,85 +142,92 @@ const AppContext = createContext<AppContextType>({
   setAdapters: () => {},
   setLoginMethods: () => {},
   setWalletPlugin: () => {},
+  setShowWalletDiscovery: () => {},
+  setUseAccountAbstractionProvider: () => {},
+  setUseAAWithExternalWallet: () => {},
+  setSmartAccountType: () => {},
+  setBundlerUrl: () => {},
+  setPaymasterUrl: () => {},
 
-  web3authContextConfig: web3authInitialConfig,
+  networkOptions: [],
+  chainNamespaceOptions: [],
+  chainOptions: [],
+  adapterOptions: [],
+  loginMethodOptions: [],
+  languageOptions: [],
+  loginProviderOptions: [],
+  smartAccountTypeOptions: [],
 });
 
 export const AppProvider: React.FC<{ children: React.ReactNode}> = ({ children }) => {
 
+  // General tab
   const [network, setNetWork] = useState<WEB3AUTH_NETWORK_TYPE>(WEB3AUTH_NETWORK.TESTNET);
   const [chainNamespace, setChainNamespace] = useState<ChainNamespaceType>(CHAIN_NAMESPACES.EIP155);
   const [chain, setChain] = useState<string>("0x1");
-  const [whiteLabel, setWhiteLabel] = useState<{ enable: boolean; config: WhiteLabelData }>({
+  const [adapters, setAdapters] = useState<string[]>([]);
+  const [showWalletDiscovery, setShowWalletDiscovery] = useState<boolean>(true);
+
+  // Whitelabel tab
+  const [whiteLabel, setWhiteLabel] = useState<{ enable?: boolean; config?: WhiteLabelData }>({
     enable: false,
     config: initWhiteLabel,
   });
+
+  // Login Providers tab
   const [loginProviders, setLoginProviders] = useState<LOGIN_PROVIDER_TYPE[]>([]);
-  const [adapters, setAdapters] = useState<string[]>([]);
   const [loginMethods, setLoginMethods] = useState<Record<LOGIN_PROVIDER_TYPE, AppConfigSettings>>(defaultLoginMethod);
-  const [walletPlugin, setWalletPlugin] = useState<{ enable: boolean; logoDark: string; logoLight: string }>({
+
+  // Wallet Plugin tab
+  const [walletPlugin, setWalletPlugin] = useState<{ enable?: boolean; logoDark?: string; logoLight?: string }>({
     enable: false,
     logoDark: "",
     logoLight: "",
   });
 
-  const [formData, setFormData, clearFormData] = useSessionStorage<AppContextType>('formData', {} as AppContextType);
-
-  const getExternalAdapterByName = async (name: string): Promise<IAdapter<unknown>[]> => {
-    switch (name) {
-      case "coinbase":
-        return [new CoinbaseAdapter() as IAdapter<unknown>];
-      // case "auth":
-      //   return new AuthAdapter();
-      case "torus-evm":
-        return [new TorusWalletAdapter()];
-      case "torus-solana":
-        return [new SolanaWalletAdapter() as IAdapter<unknown>];
-      case "wallet-connect-v2":
-        return [new WalletConnectV2Adapter({ adapterSettings: { walletConnectInitOptions: { projectId: "d3c63f19f9582f8ba48e982057eb096b" } } }) as IAdapter<unknown>];
-      case "injected-evm":
-        return getInjectedEvmAdapters({ options: web3authOptions });
-      case "injected-solana":
-        return getInjectedSolanaAdapters({ options: web3authOptions });
-      default:
-        return [];
-    }
-  };
-  
-  const [web3authAdapters, setWeb3authAdapters] = useState<IAdapter<unknown>[]>([]);
+  // Account Abstraction tab
+  const [useAccountAbstractionProvider, setUseAccountAbstractionProvider] = useState<boolean>(false);
+  const [useAAWithExternalWallet, setUseAAWithExternalWallet] = useState<boolean>(true);
+  const [smartAccountType, setSmartAccountType] = useState<string>("biconomy");
+  const [bundlerUrl, setBundlerUrl] = useState<string>("");
+  const [paymasterUrl, setPaymasterUrl] = useState<string>("");
 
+  // External Adapters manipulation
+  const [externalAdapters, setExternalAdapters] = useState<IAdapter<unknown>[]>([]);
   useEffect(() => {
     const fetchAdapters = async () => {
       let newAdapters: IAdapter<unknown>[] = [];
       for (let i = 0; i < adapters.length; i += 1) {
-        // eslint-disable-next-line no-await-in-loop
         newAdapters = newAdapters.concat(await getExternalAdapterByName(adapters[i]));
       }
-      setWeb3authAdapters(newAdapters);
+      setExternalAdapters(newAdapters);
     };
-
     fetchAdapters();
   }, [adapters]);
-  
-  const web3authPlugins = useMemo<IPlugin[]>(() => {
-    if (chainNamespace !== CHAIN_NAMESPACES.EIP155 || !walletPlugin.enable) return [];
-    const { logoDark, logoLight } = formData.walletPlugin;
+
+
+  // Wallet Plugins manipulation  
+  const walletPlugins = useMemo<IPlugin[]>(() => {
+    if (chainNamespace !== CHAIN_NAMESPACES.EIP155 || !walletPlugin?.enable) return [];
+    const { logoDark, logoLight } = walletPlugin;
     const walletServicesPlugin = new WalletServicesPlugin({
       walletInitOptions: { whiteLabel: { showWidgetButton: true, logoDark: logoDark || "logo", logoLight: logoLight || "logo" } },
     });
     return [walletServicesPlugin];
   }, [walletPlugin, chainNamespace]);
-
+  
+  // Modal Params manipulation
   const loginMethodsConfig = useMemo(() => {
-    if (loginProviders?.length === 0) return undefined;
+    if (loginProviders.length === 0) return undefined;
   
-    if (loginMethods && !Object.values(loginMethods).some((x) => x.showOnModal)) {
+    if (!Object.values(loginMethods).some((x) => x.showOnModal)) {
       return undefined;
     }
-
-    return loginMethods;
-  }, [loginProviders, loginMethods]);
-
+  
+    const loginMethodsConfig = JSON.parse(JSON.stringify(loginMethods));
+    return loginMethodsConfig;
+  }, [loginProviders]);
+  
   const modalParams = useMemo(() => {
     const modalConfig = {
       [WALLET_ADAPTERS.AUTH]: {
@@ -205,16 +236,12 @@ export const AppProvider: React.FC<{ children: React.ReactNode}> = ({ children }
       },
     };
     return modalConfig;
-  },[loginMethodsConfig]);
-  
-  const chainConfig = useMemo<CustomChainConfig>(() => {
-    if(!chainNamespace || !chain || !chainConfigs[chainNamespace as ChainNamespaceType].length) return chainConfigs[CHAIN_NAMESPACES.EIP155][0];
+  }, [loginMethodsConfig]);
 
-    return chainConfigs[chainNamespace as ChainNamespaceType].find((x) => x.chainId === chain)
-      || chainConfigs[chainNamespace as ChainNamespaceType][0]
 
-  } , [chainNamespace, chain]);
+  const chainConfig = useMemo(() => chainConfigs[chainNamespace as ChainNamespaceType].find((x) => x.chainId === chain) || chainConfigs[chainNamespace as ChainNamespaceType][0], [chainNamespace, chain]);
 
+  // Populate the private key provider based on the chain selected
   const privateKeyProvider = useMemo<IBaseProvider<string>>(() => {
     switch (chainNamespace) {
       case CHAIN_NAMESPACES.EIP155:
@@ -235,77 +262,157 @@ export const AppProvider: React.FC<{ children: React.ReactNode}> = ({ children }
             chainConfig,
           },
         });
+      }
+  }, [chainNamespace, chainConfig]);
+
+  // Account Abstraction Provider
+  const showAAProviderSettings = useMemo(() => chainNamespace === CHAIN_NAMESPACES.EIP155, [chainNamespace]);
+  const accountAbstractionProvider = useMemo((): IBaseProvider<IProvider> | undefined => {
+    if (!showAAProviderSettings || !useAccountAbstractionProvider) return undefined;
+  
+    const chainConfig = chainConfigs[chainNamespace as ChainNamespaceType].find((x) => x.chainId === chain)!;
+    // setup aa provider
+    let smartAccountInit: ISmartAccount;
+    switch (smartAccountType) {
+      case "biconomy":
+        smartAccountInit = new BiconomySmartAccount();
+        break;
+      case "kernel":
+        smartAccountInit = new KernelSmartAccount();
+        break;
+      case "trust":
+        smartAccountInit = new TrustSmartAccount();
+        break;
+      // case "light":
+      //   smartAccountInit = new LightSmartAccount();
+      //   break;
+      // case "simple":
+      //   smartAccountInit = new SimpleSmartAccount();
+      //   break;
+      case "safe":
+      default:
+        smartAccountInit = new SafeSmartAccount();
+        break;
     }
-  }, [chainNamespace, chain]);
+  
+    return new AccountAbstractionProvider({
+      config: {
+        chainConfig,
+        bundlerConfig: { url: bundlerUrl ?? getDefaultBundlerUrl(chainConfig.chainId) },
+        paymasterConfig: paymasterUrl
+          ? {
+              url: paymasterUrl,
+            }
+          : undefined,
+        smartAccountInit,
+      },
+    });
+  }, [chainNamespace, chain, useAAWithExternalWallet, useAccountAbstractionProvider]);
 
+  // Web3Auth Options
   const web3authOptions = useMemo<Web3AuthOptions>(() => {
     return {
-      clientId: clientIds[network || WEB3AUTH_NETWORK.TESTNET],
-      privateKeyProvider,
+      clientId: clientIds[network],
+      privateKeyProvider: privateKeyProvider,
       web3AuthNetwork: network,
       uiConfig: whiteLabel?.enable ? { ...whiteLabel.config } : undefined,
-      enableLogging: true,
+      accountAbstractionProvider: accountAbstractionProvider,
+      useAAWithExternalWallet: useAAWithExternalWallet,
+      // TODO: Add more options
+      // chainConfig?: CustomChainConfig;
+      // enableLogging?: boolean;
+      // storageKey?: "session" | "local";
+      // sessionTime?: number;
+      // useCoreKitKey?: boolean;
+      enableLogging: false,
     };
-  }, [network, privateKeyProvider, whiteLabel]);
+  },[network, privateKeyProvider, whiteLabel, useAAWithExternalWallet, accountAbstractionProvider]);
 
-  const web3authContextConfig = useMemo<Web3AuthContextConfig>(() => ({
-    adapters: web3authAdapters,
-    plugins: web3authPlugins,
+  // Web3Auth Config
+  const web3authConfig = useMemo<Web3AuthContextConfig>(() => ({
+    adapters: externalAdapters,
+    plugins: walletPlugins,
     modalConfig: modalParams,
     web3AuthOptions: web3authOptions,
-  }), [web3authAdapters, web3authPlugins, modalParams, web3authOptions]);
-
+    hideWalletDiscovery: !showWalletDiscovery,
+  }), [externalAdapters, walletPlugins, modalParams, web3authOptions, showWalletDiscovery]); 
 
-  useEffect(() => {
-    setFormData(
-      {
-        ...formData,
-        network,
-        chainNamespace,
-        chain,
-        whiteLabel,
-        loginProviders,
-        adapters,
-        loginMethods,
-        walletPlugin,
-      }
-    )
+  const getExternalAdapterByName = async (name: string): Promise<IAdapter<unknown>[]> => {
+    switch (name) {
+      case "coinbase":
+        return [new CoinbaseAdapter() as IAdapter<unknown>];
+      // case "auth":
+      //   return new AuthAdapter();
+      case "torus-evm":
+        return [new TorusWalletAdapter()];
+      case "torus-solana":
+        return [new SolanaWalletAdapter() as IAdapter<unknown>];
+      case "wallet-connect-v2":
+        return [new WalletConnectV2Adapter({ adapterSettings: { walletConnectInitOptions: { projectId: "d3c63f19f9582f8ba48e982057eb096b" } } }) as IAdapter<unknown>];
+      case "injected-evm":
+        return getInjectedEvmAdapters({ options: web3authOptions });
+      case "injected-solana":
+        return getInjectedSolanaAdapters({ options: web3authOptions });
+      default:
+        return [];
+    }
+  };
 
-  }, [network, chainNamespace, chain, whiteLabel, loginProviders, adapters, loginMethods, walletPlugin]);
+  const chainOptions = useMemo(() => chainConfigs[chainNamespace as ChainNamespaceType].map((x) => ({ name: `${x.chainId} ${x.tickerName}`, value: x.chainId })), [chainNamespace]);
 
-  useEffect(() => {
-    if(formData) {
-      setNetWork(formData.network);
-      setChainNamespace(formData.chainNamespace);
-      setChain(formData.chain);
-      setWhiteLabel(formData.whiteLabel);
-      setLoginProviders(formData.loginProviders);
-      setAdapters(formData.adapters);
-      setLoginMethods(formData.loginMethods);
-      setWalletPlugin(formData.walletPlugin);
-    }
-  }, []);
+  const adapterOptions = useMemo(() => chainNamespace === CHAIN_NAMESPACES.EIP155 ? [
+    { name: "coinbase-adapter", value: "coinbase" },
+    { name: "torus-evm-adapter", value: "torus-evm" },
+    { name: "wallet-connect-v2-adapter", value: "wallet-connect-v2" },
+    { name: "injected-adapters", value: "injected-evm" },
+  ] : [
+    { name: "torus-solana-adapter", value: "torus-solana" },
+    { name: "injected-adapters", value: "injected-solana" },
+  ], [chainNamespace]);
 
   return (
     <AppContext.Provider value={{ 
-      network, 
-      setNetWork,
+      web3authConfig,
+
+      network,
       chainNamespace,
-      setChainNamespace,
       chain,
-      setChain,
       whiteLabel,
-      setWhiteLabel,
       loginProviders,
-      setLoginProviders,
       adapters,
-      setAdapters,
       loginMethods,
-      setLoginMethods,
       walletPlugin,
+      showWalletDiscovery,
+      useAccountAbstractionProvider,
+      useAAWithExternalWallet,
+      smartAccountType,
+      bundlerUrl,
+      paymasterUrl,
+
+      setNetWork,
+      setChainNamespace,
+      setChain,
+      setWhiteLabel,
+      setLoginProviders,
+      setAdapters,
+      setLoginMethods,
       setWalletPlugin,
+      setShowWalletDiscovery,
+      setUseAccountAbstractionProvider,
+      setUseAAWithExternalWallet,
+      setSmartAccountType,
+      setBundlerUrl,
+      setPaymasterUrl,
+
+      networkOptions,
+      chainNamespaceOptions,
+      chainOptions,
+      adapterOptions,
+      loginProviderOptions,
+      loginMethodOptions: loginProviderOptions,
+      languageOptions: languageOptions,
+      smartAccountTypeOptions: SmartAccountOptions,
 
-      web3authContextConfig,
     }}>
       {children}
     </AppContext.Provider>
diff --git a/demo/react-app-new/src/hooks/useOptions.ts b/demo/react-app-new/src/hooks/useOptions.ts
deleted file mode 100644
index 85b46eed5..000000000
--- a/demo/react-app-new/src/hooks/useOptions.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { useAppContext } from '@/context';
-import { useState, useEffect } from 'react';
-import { CHAIN_NAMESPACES, ChainNamespaceType, CustomChainConfig, WEB3AUTH_NETWORK, WEB3AUTH_NETWORK_TYPE } from "@web3auth/base";
-
-import { networkOptions, chainNamespaceOptions, chainConfigs, loginProviderOptions, languageOptions } from '../config'
-import { log } from 'console';
-
-interface Option {
-  label: string;
-  value: string;
-}
-
-const useOptions = () => {
-  const { chainNamespace, chain } = useAppContext();
-
-  const [chainOptions, setChainOptions] = useState<Option[]>([]);
-  const [adapterOptions, setAdapterOptions] = useState<Option[]>([]);
-
-  useEffect(() => {
-    if(!chainConfigs[chainNamespace as ChainNamespaceType]?.length) return;
-    setChainOptions( chainConfigs[chainNamespace as ChainNamespaceType].map((x) => ({
-      label: `${x.chainId} ${x.tickerName}`,
-      value: x.chainId,
-    })) );
-    setAdapterOptions(
-      chainNamespace === CHAIN_NAMESPACES.EIP155 
-        ?
-          [
-            { label: "coinbase-adapter", value: "coinbase" },
-            { label: "torus-evm-adapter", value: "torus-evm" },
-            { label: "wallet-connect-v2-adapter", value: "wallet-connect-v2" },
-            { label: "injected-adapters", value: "injected-evm" },
-          ]
-        :
-          [
-            { label: "torus-solana-adapter", value: "torus-solana" },
-            { label: "injected-adapters", value: "injected-solana" },
-          ]
-  )
-  }, [chainNamespace, chain]);
-
-  return {
-    networkOptions,
-    chainNamespaceOptions,
-    chainOptions,
-    adapterOptions,
-    loginProviderOptions,
-    languageOptions,
-  };
-};
-
-export default useOptions;
\ No newline at end of file
diff --git a/demo/react-app-new/src/translations/en.json b/demo/react-app-new/src/translations/en.json
index 8900a2c0f..af3753a55 100644
--- a/demo/react-app-new/src/translations/en.json
+++ b/demo/react-app-new/src/translations/en.json
@@ -10,6 +10,12 @@
     "adapters": "Adapters",
     "greeting": "Let's configure Web3Auth!",
     "enableWalletServicePlugin": "Enable Wallet Service Plugin",
+    "showWalletDiscovery": "Show Wallet Discovery",
+    "useAccountAbstractionProvider": "Account Abstraction Provider",
+    "useAAWithExternalWallet": "Use Account Abstraction Provider with External Wallet",
+    "smartAccountType": "Smart Account Type",
+    "bundlerUrl": "Bundler URL",
+    "paymasterUrl": "Paymaster URL",
     "walletPlugin": {
       "title": "Wallet Service Plugin",
       "logoLight": "Logo Light",