@web3auth/modal 10.0.0-beta.0 → 10.0.0-beta.1

package/dist/modal.umd.min.js.LICENSE.txt

@@ -62,9 +62,9 @@ PERFORMANCE OF THIS SOFTWARE.
 
 /**
  * @license React
- * react-dom.production.min.js
+ * react-dom.production.js
  *
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -72,9 +72,9 @@ PERFORMANCE OF THIS SOFTWARE.
 
 /**
  * @license React
- * react-jsx-runtime.production.min.js
+ * react-jsx-runtime.production.js
  *
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -82,9 +82,9 @@ PERFORMANCE OF THIS SOFTWARE.
 
 /**
  * @license React
- * react.production.min.js
+ * react.production.js
  *
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -92,9 +92,9 @@ PERFORMANCE OF THIS SOFTWARE.
 
 /**
  * @license React
- * scheduler.production.min.js
+ * scheduler.production.js
  *
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3auth/modal",
-  "version": "10.0.0-beta.0",
+  "version": "10.0.0-beta.1",
   "description": "Multi chain wallet aggregator for web3Auth",
   "keywords": [
     "web3Auth/ui",
@@ -41,8 +41,8 @@
   },
   "peerDependencies": {
     "@babel/runtime": "^7.x",
-    "react": "^18.x",
-    "react-dom": "^18.x",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19",
     "vue": "^3.x"
   },
   "devDependencies": {
@@ -55,16 +55,16 @@
     "@toruslabs/eslint-config-react": "^4.1.1",
     "@toruslabs/isomorphic-style-loader": "^5.4.0",
     "@toruslabs/vue-components": "^8.0.0",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.0.12",
+    "@types/react-dom": "^19.0.4",
     "autoprefixer": "^10.4.21",
     "css-loader": "^7.1.2",
     "live-server": "^1.2.2",
     "postcss": "^8.5.3",
     "postcss-loader": "^8.1.1",
     "postcss-prefix-selector": "^2.1.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19",
     "rollup-plugin-postcss": "^4.0.2",
     "style-loader": "^4.0.0",
     "tailwindcss": "^3.4.17",
@@ -72,16 +72,19 @@
     "vue": "^3.5.13"
   },
   "dependencies": {
+    "@hcaptcha/react-hcaptcha": "^1.12.0",
     "@toruslabs/http-helpers": "^8.1.1",
     "@web3auth/auth": "^10.2.3",
-    "@web3auth/no-modal": "^10.0.0-beta.0",
+    "@web3auth/no-modal": "^10.0.0-beta.1",
     "bowser": "^2.11.0",
     "classnames": "^2.5.1",
+    "clsx": "^2.1.1",
     "copy-to-clipboard": "^3.3.3",
     "deepmerge": "^4.3.1",
-    "i18next": "^23.16.8",
+    "i18next": "^24.2.3",
     "react-i18next": "^15.4.1",
-    "react-qrcode-logo": "^3.0.0"
+    "react-qrcode-logo": "^3.0.0",
+    "tailwind-merge": "^3.0.2"
   },
   "exports": {
     ".": {
@@ -127,5 +130,5 @@
     "type": "git",
     "url": "git+https://github.com/Web3Auth/Web3Auth.git"
   },
-  "gitHead": "827d490e28e2c77805995cbb2db5eb849350a7c8"
+  "gitHead": "bf100ac6d05a53acee76944e3de4a7b8766845d8"
 }

package/dist/lib.cjs/packages/modal/src/ui/assets/arrow-left-dark.svg.js

@@ -1,7 +0,0 @@
-'use strict';
-
-require('react');
-
-var ArrowDark = "data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.33333%2015.8333L2.5%209.99992M2.5%209.99992L8.33333%204.16659M2.5%209.99992L17.5%209.99992%22%20stroke%3D%22%239CA3AF%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
-
-module.exports = ArrowDark;

package/dist/lib.cjs/packages/modal/src/ui/assets/arrow-left-light.svg.js

@@ -1,7 +0,0 @@
-'use strict';
-
-require('react');
-
-var ArrowLight = "data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.33333%2015.8333L2.5%209.99995M2.5%209.99995L8.33333%204.16662M2.5%209.99995L17.5%209.99995%22%20stroke%3D%22%236B7280%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
-
-module.exports = ArrowLight;

package/dist/lib.cjs/packages/modal/src/ui/assets/x-dark.svg.js

@@ -1,7 +0,0 @@
-'use strict';
-
-require('react');
-
-var XDark = "data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M0.292787%201.29299C0.480314%201.10552%200.734622%201.0002%200.999786%201.0002C1.26495%201.0002%201.51926%201.10552%201.70679%201.29299L5.99979%205.58599L10.2928%201.29299C10.385%201.19748%2010.4954%201.1213%2010.6174%201.06889C10.7394%201.01648%2010.8706%200.988893%2011.0034%200.987739C11.1362%200.986585%2011.2678%201.01189%2011.3907%201.06217C11.5136%201.11245%2011.6253%201.1867%2011.7192%201.28059C11.8131%201.37449%2011.8873%201.48614%2011.9376%201.60904C11.9879%201.73193%2012.0132%201.86361%2012.012%201.99639C12.0109%202.12917%2011.9833%202.26039%2011.9309%202.38239C11.8785%202.5044%2011.8023%202.61474%2011.7068%202.70699L7.41379%206.99999L11.7068%2011.293C11.8889%2011.4816%2011.9897%2011.7342%2011.9875%2011.9964C11.9852%2012.2586%2011.88%2012.5094%2011.6946%2012.6948C11.5092%2012.8802%2011.2584%2012.9854%2010.9962%2012.9877C10.734%2012.9899%2010.4814%2012.8891%2010.2928%2012.707L5.99979%208.41399L1.70679%2012.707C1.51818%2012.8891%201.26558%2012.9899%201.00339%2012.9877C0.741188%2012.9854%200.490376%2012.8802%200.304968%2012.6948C0.11956%2012.5094%200.0143906%2012.2586%200.0121121%2011.9964C0.00983372%2011.7342%200.110629%2011.4816%200.292787%2011.293L4.58579%206.99999L0.292787%202.70699C0.105316%202.51946%200%202.26515%200%201.99999C0%201.73483%200.105316%201.48052%200.292787%201.29299V1.29299Z%22%20fill%3D%22%239CA3AF%22%2F%3E%3C%2Fsvg%3E";
-
-module.exports = XDark;

package/dist/lib.cjs/packages/modal/src/ui/assets/x-light.svg.js

@@ -1,7 +0,0 @@
-'use strict';
-
-require('react');
-
-var XLight = "data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M0.292787%201.29299C0.480314%201.10552%200.734622%201.0002%200.999786%201.0002C1.26495%201.0002%201.51926%201.10552%201.70679%201.29299L5.99979%205.58599L10.2928%201.29299C10.385%201.19748%2010.4954%201.1213%2010.6174%201.06889C10.7394%201.01648%2010.8706%200.988893%2011.0034%200.987739C11.1362%200.986585%2011.2678%201.01189%2011.3907%201.06217C11.5136%201.11245%2011.6253%201.1867%2011.7192%201.28059C11.8131%201.37449%2011.8873%201.48614%2011.9376%201.60904C11.9879%201.73193%2012.0132%201.86361%2012.012%201.99639C12.0109%202.12917%2011.9833%202.26039%2011.9309%202.38239C11.8785%202.5044%2011.8023%202.61474%2011.7068%202.70699L7.41379%206.99999L11.7068%2011.293C11.8889%2011.4816%2011.9897%2011.7342%2011.9875%2011.9964C11.9852%2012.2586%2011.88%2012.5094%2011.6946%2012.6948C11.5092%2012.8802%2011.2584%2012.9854%2010.9962%2012.9877C10.734%2012.9899%2010.4814%2012.8891%2010.2928%2012.707L5.99979%208.41399L1.70679%2012.707C1.51818%2012.8891%201.26558%2012.9899%201.00339%2012.9877C0.741188%2012.9854%200.490376%2012.8802%200.304968%2012.6948C0.11956%2012.5094%200.0143906%2012.2586%200.0121121%2011.9964C0.00983372%2011.7342%200.110629%2011.4816%200.292787%2011.293L4.58579%206.99999L0.292787%202.70699C0.105316%202.51946%200%202.26515%200%201.99999C0%201.73483%200.105316%201.48052%200.292787%201.29299V1.29299Z%22%20fill%3D%22%236B7280%22%2F%3E%3C%2Fsvg%3E";
-
-module.exports = XLight;

package/dist/lib.cjs/packages/modal/src/ui/components/AdapterLoader.js

@@ -1,108 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var noModal = require('@web3auth/no-modal');
-var React = require('react');
-var reactI18next = require('react-i18next');
-var interfaces = require('../interfaces.js');
-var localeImport = require('../localeImport.js');
-var Icon = require('./Icon.js');
-var Image = require('./Image.js');
-
-const closeIcon = jsxRuntime.jsx(Icon, {
-  iconName: "x-light",
-  darkIconName: "close"
-});
-function DetailedLoader(props) {
-  const {
-    connector,
-    appLogo,
-    message,
-    modalStatus,
-    connectorName,
-    onClose
-  } = props;
-  const providerIcon = connector === "twitter" ? jsxRuntime.jsx(Image, {
-    imageId: "login-x-dark"
-  }) : jsxRuntime.jsx(Image, {
-    imageId: `login-${connector}`,
-    height: "30",
-    width: "30"
-  });
-  const [t] = reactI18next.useTranslation(undefined, {
-    i18n: localeImport
-  });
-  React.useEffect(() => {
-    noModal.log.debug("adapter loader re-rendering");
-    if (modalStatus === interfaces.MODAL_STATUS.CONNECTED) {
-      setTimeout(() => {
-        onClose();
-      }, 3000);
-    }
-  }, [modalStatus, onClose]);
-  return modalStatus !== interfaces.MODAL_STATUS.INITIALIZED ? jsxRuntime.jsxs("div", {
-    className: "w3ajs-modal-loader w3a-modal__loader w3a--h-full",
-    children: [jsxRuntime.jsx("div", {
-      className: "w3a-modal__loader-content",
-      children: jsxRuntime.jsxs("div", {
-        className: "w3a-modal__loader-info",
-        children: [modalStatus === interfaces.MODAL_STATUS.CONNECTING && jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [jsxRuntime.jsxs("div", {
-            className: "w3a-modal__loader-bridge",
-            children: [jsxRuntime.jsxs("div", {
-              className: "w3a-modal__loader-app-logo",
-              children: [jsxRuntime.jsx("img", {
-                src: appLogo,
-                className: "w3a--block dark:w3a--hidden w3a--h-10 w3a--w-10",
-                alt: ""
-              }), jsxRuntime.jsx("img", {
-                src: appLogo,
-                className: "w3a--hidden dark:w3a--block w3a--h-10 w3a--w-10",
-                alt: ""
-              })]
-            }), jsxRuntime.jsx("div", {
-              className: "w3a-modal__connector",
-              children: jsxRuntime.jsxs("div", {
-                className: "w3a-modal__connector-beat",
-                children: [jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {}), jsxRuntime.jsx("div", {})]
-              })
-            }), jsxRuntime.jsx("div", {
-              className: "w3a-modal__loader-social-logo",
-              children: providerIcon
-            })]
-          }), jsxRuntime.jsxs("div", {
-            children: [jsxRuntime.jsx("div", {
-              className: "w3a-modal__loader-bridge-message",
-              children: t("modal.adapter-loader.message1", {
-                adapter: connectorName
-              })
-            }), jsxRuntime.jsx("div", {
-              className: "w3a-modal__loader-bridge-message",
-              children: t("modal.adapter-loader.message2", {
-                adapter: connectorName
-              })
-            })]
-          })]
-        }), modalStatus === noModal.CONNECTOR_STATUS.CONNECTED && jsxRuntime.jsxs("div", {
-          className: "w3a--flex w3a--flex-col w3a--items-center",
-          children: [jsxRuntime.jsx(Icon, {
-            iconName: "connected"
-          }), jsxRuntime.jsx("div", {
-            className: "w3ajs-modal-loader__message w3a-spinner-message w3a--mt-4",
-            children: message
-          })]
-        }), modalStatus === noModal.CONNECTOR_STATUS.ERRORED && jsxRuntime.jsx("div", {
-          className: "w3ajs-modal-loader__message w3a-spinner-message w3a-spinner-message--error",
-          children: message
-        })]
-      })
-    }), (modalStatus === noModal.CONNECTOR_STATUS.CONNECTED || modalStatus === noModal.CONNECTOR_STATUS.ERRORED) && jsxRuntime.jsx("button", {
-      type: "button",
-      className: "w3a-header__button w3ajs-loader-close-btn",
-      onClick: onClose,
-      children: closeIcon
-    })]
-  }) : null;
-}
-
-module.exports = DetailedLoader;

package/dist/lib.cjs/packages/modal/src/ui/components/Button/styles.css.js

@@ -1,8 +0,0 @@
-'use strict';
-
-var styleInject_es = require('../../../../../../node_modules/style-inject/dist/style-inject.es.js');
-
-var css_248z = ".w3a-parent-container #w3a-modal button.t-btn,.w3a-parent-container a.t-btn{align-items:center;display:flex;justify-content:center;transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:linear}.w3a-parent-container #w3a-modal button.t-btn:not(.t-btn-text):disabled,.w3a-parent-container a.t-btn:not(.t-btn-text):disabled{background-color:var(--app-gray-300);border-width:0;color:var(--app-gray-400)}.w3a-parent-container #w3a-modal button.t-btn:not(.t-btn-text):hover:disabled,.w3a-parent-container a.t-btn:not(.t-btn-text):hover:disabled{background-color:var(--app-gray-300);border-color:var(--app-gray-300);color:var(--app-gray-400)}.w3a-parent-container #w3a-modal button.t-btn:not(.t-btn-text):active:disabled,.w3a-parent-container a.t-btn:not(.t-btn-text):active:disabled{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-offset-width:0px;background-color:var(--app-gray-300);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);outline-width:0}.w3a-parent-container #w3a-modal button.t-btn:not(.t-btn-text):disabled:is(.w3a--dark *),.w3a-parent-container a.t-btn:not(.t-btn-text):disabled:is(.w3a--dark *){background-color:var(--app-gray-700);color:var(--app-gray-600)}.w3a-parent-container #w3a-modal .size-xs{font-size:.75rem;height:32px;line-height:1rem;padding:.5rem .75rem}.w3a-parent-container #w3a-modal .size-sm{font-size:.875rem;height:36px;line-height:1.25rem;padding:.5rem .75rem}.w3a-parent-container #w3a-modal .size-md{font-size:.875rem;height:42px;line-height:1.25rem;padding:.625rem 1.25rem}.w3a-parent-container #w3a-modal .size-lg{font-size:1rem;height:48px;line-height:1.5rem;padding:.75rem 1.25rem}.w3a-parent-container #w3a-modal .size-xl{font-size:1rem;height:52px;line-height:1.5rem;padding:.875rem 1rem}.w3a-parent-container #w3a-modal .t-btn.t-btn-primary{background-color:var(--app-primary-600);color:var(--app-on-primary);outline:2px solid #0000;outline-offset:2px}.w3a-parent-container #w3a-modal .t-btn.t-btn-primary:hover{background-color:var(--app-primary-700)}.w3a-parent-container #w3a-modal .t-btn.t-btn-primary:focus-visible{outline-color:var(--app-primary-600);outline-offset:1px;outline-style:solid;outline-width:1px}.w3a-parent-container #w3a-modal .t-btn.t-btn-primary:active{background-color:var(--app-primary-600);outline-color:var(--app-primary-600);outline-offset:1px;outline-style:solid;outline-width:1px}.w3a-parent-container #w3a-modal .t-btn.t-btn-primary:is(.w3a--dark *){background-color:var(--app-primary-500)}.w3a-parent-container #w3a-modal .t-btn.t-btn-primary:hover:is(.w3a--dark *){background-color:var(--app-primary-400)}.w3a-parent-container #w3a-modal .t-btn.t-btn-primary:focus-visible:is(.w3a--dark *){outline-color:var(--app-primary-500)}.w3a-parent-container #w3a-modal .t-btn.t-btn-primary:active:is(.w3a--dark *){background-color:var(--app-primary-500);outline-color:var(--app-primary-500)}.w3a-parent-container #w3a-modal .t-btn.t-btn-secondary{background-color:initial;border-color:var(--app-gray-500);border-width:1px;color:var(--app-gray-600);outline:2px solid #0000;outline-offset:2px}.w3a-parent-container #w3a-modal .t-btn.t-btn-secondary:hover{background-color:var(--app-gray-200)}.w3a-parent-container #w3a-modal .t-btn.t-btn-secondary:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-color:var(--app-primary-600);background-color:initial;border-color:var(--app-primary-600);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.w3a-parent-container #w3a-modal .t-btn.t-btn-secondary:active{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-color:var(--app-primary-600);background-color:initial;border-color:var(--app-primary-600);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.w3a-parent-container #w3a-modal .t-btn.t-btn-secondary:is(.w3a--dark *){border-color:var(--app-gray-300);color:var(--app-white)}.w3a-parent-container #w3a-modal .t-btn.t-btn-secondary:hover:is(.w3a--dark *){background-color:var(--app-gray-700)}.w3a-parent-container #w3a-modal .t-btn.t-btn-secondary:focus-visible:is(.w3a--dark *){--tw-ring-color:var(--app-primary-500);background-color:initial;border-color:var(--app-primary-500)}.w3a-parent-container #w3a-modal .t-btn.t-btn-secondary:active:is(.w3a--dark *){--tw-ring-color:var(--app-primary-500);background-color:initial;border-color:var(--app-primary-500)}.w3a-parent-container #w3a-modal .t-btn.t-btn-tertiary{background-color:var(--app-gray-200);color:var(--app-gray-800)}.w3a-parent-container #w3a-modal .t-btn.t-btn-tertiary:hover{background-color:var(--app-gray-300)}.w3a-parent-container #w3a-modal .t-btn.t-btn-tertiary:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-color:var(--app-primary-600);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.w3a-parent-container #w3a-modal .t-btn.t-btn-tertiary:active{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-color:var(--app-primary-600);background-color:var(--app-gray-200);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.w3a-parent-container #w3a-modal .t-btn.t-btn-tertiary:is(.w3a--dark *){background-color:var(--app-gray-500);color:var(--app-white)}.w3a-parent-container #w3a-modal .t-btn.t-btn-tertiary:hover:is(.w3a--dark *){background-color:var(--app-gray-400)}.w3a-parent-container #w3a-modal .t-btn.t-btn-tertiary:focus-visible:is(.w3a--dark *){--tw-ring-color:var(--app-primary-500)}.w3a-parent-container #w3a-modal .t-btn.t-btn-tertiary:active:is(.w3a--dark *){--tw-ring-color:var(--app-primary-500);background-color:var(--app-gray-500)}.w3a-parent-container #w3a-modal .t-btn.t-btn-text{color:var(--app-primary-600)}.w3a-parent-container #w3a-modal .t-btn.t-btn-text:hover{color:var(--app-primary-800);text-decoration-line:underline}.w3a-parent-container #w3a-modal .t-btn.t-btn-text:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-color:var(--app-primary-600);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.w3a-parent-container #w3a-modal .t-btn.t-btn-text:active{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);--tw-ring-color:var(--app-primary-600);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);color:var(--app-primary-600)}.w3a-parent-container #w3a-modal .t-btn.t-btn-text:disabled{color:var(--app-gray-400);text-decoration-line:none}.w3a-parent-container #w3a-modal .t-btn.t-btn-text:is(.w3a--dark *){color:var(--app-primary-500)}.w3a-parent-container #w3a-modal .t-btn.t-btn-text:hover:is(.w3a--dark *){color:var(--app-primary-400)}.w3a-parent-container #w3a-modal .t-btn.t-btn-text:disabled:is(.w3a--dark *){color:var(--app-gray-600)}.w3a-parent-container #w3a-modal .btn-link{text-decoration-line:none}.w3a-parent-container #w3a-modal button.t-btn:hover>.hover-icon{display:block;transition:display .15s;transition-timing-function:cubic-bezier(0,.54,.63,.99)}.w3a-parent-container #w3a-modal button.t-btn:hover>.image-icon{display:none;transition:display .15s;transition-timing-function:cubic-bezier(0,.54,.63,.99)}";
-styleInject_es(css_248z);
-
-module.exports = css_248z;

package/dist/lib.cjs/packages/modal/src/ui/components/ExternalWallet/ExternalWalletButton.js

@@ -1,44 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var reactI18next = require('react-i18next');
-var localeImport = require('../../localeImport.js');
-var Button = require('../Button/Button.js');
-var Image = require('../Image.js');
-
-function ExternalWalletButton(props) {
-  const {
-    button,
-    handleWalletClick
-  } = props;
-  const [t] = reactI18next.useTranslation(undefined, {
-    i18n: localeImport
-  });
-  return jsxRuntime.jsxs(Button, {
-    variant: "tertiary",
-    type: "button",
-    onClick: () => handleWalletClick(button),
-    className: "w3a--w-full w3a--rounded-xl w3a--size-xl !w3a--justify-between w3a--items-center wallet-btn",
-    title: button.name,
-    children: [jsxRuntime.jsxs("div", {
-      className: "w3a--flex w3a--items-center",
-      children: [jsxRuntime.jsx(Image, {
-        imageId: `login-${button.name}`,
-        hoverImageId: `login-${button.name}`,
-        fallbackImageId: "wallet",
-        height: "24",
-        width: "24",
-        isButton: true,
-        extension: button.imgExtension
-      }), jsxRuntime.jsx("p", {
-        className: "w3a--ml-2 w3a--text-left w3a--text-sm",
-        children: button.displayName
-      })]
-    }), button.hasInjectedWallet && jsxRuntime.jsx("span", {
-      className: "w3a--inline-flex w3a--items-center w3a--rounded-lg w3a--px-2 w3a--py-1 w3a--text-xs w3a--font-medium w3a--bg-app-primary-100 w3a--text-app-primary-800",
-      children: t("modal.external.installed")
-    })]
-  });
-}
-
-module.exports = ExternalWalletButton;

package/dist/lib.cjs/packages/modal/src/ui/components/ExternalWallet/ExternalWalletConnect.js

@@ -1,67 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var reactI18next = require('react-i18next');
-var interfaces = require('../../interfaces.js');
-var localeImport = require('../../localeImport.js');
-var Button = require('../Button/Button.js');
-var Loader = require('../Loader.js');
-var WalletConnect = require('../WalletConnect.js');
-var ExternalWalletHeader = require('./ExternalWalletHeader.js');
-var ExternalWalletInstall = require('./ExternalWalletInstall.js');
-
-function ExternalWalletConnect(props) {
-  const {
-    connectButton,
-    walletConnectUri,
-    goBack,
-    closeModal
-  } = props;
-  const [isWalletDownloadShown, setIsWalletDownloadShown] = React.useState(false);
-  const [t] = reactI18next.useTranslation(undefined, {
-    i18n: localeImport
-  });
-  const showWalletDownload = () => {
-    setIsWalletDownloadShown(true);
-  };
-  return jsxRuntime.jsx("div", {
-    children: isWalletDownloadShown ? jsxRuntime.jsx("div", {
-      children: jsxRuntime.jsx(ExternalWalletInstall, {
-        connectButton: connectButton,
-        goBack: () => setIsWalletDownloadShown(false),
-        closeModal: closeModal
-      })
-    }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [jsxRuntime.jsx(ExternalWalletHeader, {
-        title: connectButton.displayName,
-        goBack: goBack,
-        closeModal: closeModal
-      }), !walletConnectUri ? jsxRuntime.jsx(Loader, {
-        modalStatus: interfaces.MODAL_STATUS.CONNECTING,
-        canEmit: false
-      }) : jsxRuntime.jsx(WalletConnect, {
-        walletConnectUri: walletConnectUri,
-        logoImage: `https://images.web3auth.io/login-${connectButton.name}.${connectButton.imgExtension}`,
-        primaryColor: connectButton.walletRegistryItem.primaryColor
-      }), connectButton.hasInstallLinks && jsxRuntime.jsxs("div", {
-        className: "w3a--flex w3a--flex-row w3a--items-center w3a--justify-between w3a--gap-2 w3a--bg-app-gray-50 dark:w3a--bg-app-gray-700 w3a--text-app-gray-900 dark:w3a--text-app-white w3a--px-3 w3a--py-2 w3a--rounded-xl",
-        children: [jsxRuntime.jsxs("span", {
-          className: "w3a--text-sm w3a--truncate w3a--flex-grow-0",
-          children: [t("modal.external.dont-have"), " ", jsxRuntime.jsx("span", {
-            children: connectButton.displayName
-          }), "?"]
-        }), jsxRuntime.jsx(Button, {
-          type: "button",
-          variant: "secondary",
-          size: "xs",
-          className: "w3a--flex-grow-1 w3a--flex-shrink-0",
-          onClick: showWalletDownload,
-          children: t("modal.external.get-wallet")
-        })]
-      })]
-    })
-  });
-}
-
-module.exports = ExternalWalletConnect;

package/dist/lib.cjs/packages/modal/src/ui/components/ExternalWallet/ExternalWalletDetails.js

@@ -1,43 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var ExternalWalletChainNamespace = require('./ExternalWalletChainNamespace.js');
-var ExternalWalletConnect = require('./ExternalWalletConnect.js');
-var ExternalWalletInstall = require('./ExternalWalletInstall.js');
-
-function ExternalWalletDetail(props) {
-  const {
-    connectButton,
-    walletConnectUri,
-    goBack,
-    closeModal,
-    handleExternalWalletClick
-  } = props;
-  // Select chain namespace for injected wallets
-  if (connectButton.hasInjectedWallet) {
-    return jsxRuntime.jsx(ExternalWalletChainNamespace, {
-      handleExternalWalletClick: handleExternalWalletClick,
-      button: connectButton,
-      goBack: goBack,
-      closeModal: closeModal
-    });
-  }
-  return jsxRuntime.jsx("div", {
-    children: connectButton.hasWalletConnect ?
-    // Wallet Connect
-    jsxRuntime.jsx(ExternalWalletConnect, {
-      connectButton: connectButton,
-      walletConnectUri: walletConnectUri,
-      goBack: goBack,
-      closeModal: closeModal
-    }) :
-    // Download wallets
-    jsxRuntime.jsx(ExternalWalletInstall, {
-      connectButton: connectButton,
-      goBack: goBack,
-      closeModal: closeModal
-    })
-  });
-}
-
-module.exports = ExternalWalletDetail;

package/dist/lib.cjs/packages/modal/src/ui/components/ExternalWallet/ExternalWalletHeader.js

@@ -1,46 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var Icon = require('../Icon.js');
-
-function ExternalWalletHeader(props) {
-  const {
-    title,
-    goBack,
-    closeModal,
-    disableBackButton
-  } = props;
-  return jsxRuntime.jsxs("div", {
-    className: "w3a--flex w3a--flex-row w3a--justify-center w3a--items-center w3a--gap-1",
-    children: [jsxRuntime.jsx("div", {
-      className: "w3a--flex-grow-1 w3a--flex-shrink-0 w3a--items-center w3a--justify-start w3a--mr-auto",
-      children: !disableBackButton && jsxRuntime.jsx("button", {
-        type: "button",
-        className: "w3a-external-back w3ajs-external-back",
-        onClick: goBack,
-        children: jsxRuntime.jsx(Icon, {
-          iconName: "arrow-left-light",
-          darkIconName: "arrow-left-dark",
-          width: "16",
-          height: "16"
-        })
-      })
-    }), jsxRuntime.jsx("div", {
-      className: "w3a-header__title w3a--flex-grow-0 w3a--flex-shrink w3a--truncate w3a--mr-6",
-      children: title
-    }), jsxRuntime.jsx("div", {
-      className: "w3a--flex-grow-1 w3a--flex-shrink-0 w3a--items-center w3a--justify-end w3a--ml-auto",
-      children: jsxRuntime.jsx("button", {
-        type: "button",
-        onClick: closeModal,
-        className: "w3a-header__button_wallet w3ajs-close-btn",
-        children: jsxRuntime.jsx(Icon, {
-          iconName: "x-light",
-          darkIconName: "x-dark"
-        })
-      })
-    })]
-  });
-}
-
-module.exports = ExternalWalletHeader;

package/dist/lib.cjs/packages/modal/src/ui/components/ExternalWallet/ExternalWalletInstall.js

@@ -1,167 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var Bowser = require('bowser');
-var React = require('react');
-var reactI18next = require('react-i18next');
-var localeImport = require('../../localeImport.js');
-var Button = require('../Button/Button.js');
-var Image = require('../Image.js');
-var ExternalWalletHeader = require('./ExternalWalletHeader.js');
-
-const getBrowserExtensionUrl = (browserType, walletId) => {
-  if (walletId !== null && walletId !== void 0 && walletId.startsWith("https://")) return walletId;
-  switch (browserType) {
-    case "chrome":
-      return `https://chrome.google.com/webstore/detail/${walletId}`;
-    case "firefox":
-      return `https://addons.mozilla.org/firefox/addon/${walletId}`;
-    case "edge":
-      return `https://microsoftedge.microsoft.com/addons/detail/${walletId}`;
-    default:
-      return null;
-  }
-};
-const getMobileInstallLink = (os, appId) => {
-  if (appId !== null && appId !== void 0 && appId.includes("https://")) {
-    return appId;
-  }
-  switch (os) {
-    case "android":
-      return `https://play.google.com/store/apps/details?id=${appId}`;
-    case "ios":
-      return `https://apps.apple.com/app/safepal-wallet/${appId}`;
-    default:
-      return "";
-  }
-};
-const getOsName = os => {
-  switch (os) {
-    case "ios":
-      return "iOS";
-    case "android":
-      return "Android";
-    default:
-      return "";
-  }
-};
-const getBrowserName = browser => {
-  return browser.charAt(0).toUpperCase() + browser.slice(1);
-};
-function ExternalWalletInstall(props) {
-  const {
-    connectButton,
-    goBack,
-    closeModal
-  } = props;
-  const [t] = reactI18next.useTranslation(undefined, {
-    i18n: localeImport
-  });
-  const deviceDetails = React.useMemo(() => {
-    const browser = Bowser.getParser(window.navigator.userAgent);
-    return {
-      platform: browser.getPlatformType(),
-      browser: browser.getBrowserName().toLowerCase(),
-      os: browser.getOSName()
-    };
-  }, []);
-  const mobileInstallLinks = () => {
-    const installConfig = connectButton.walletRegistryItem.app || {};
-    const installLinks = Object.keys(installConfig).reduce((acc, os) => {
-      if (!["android", "ios"].includes(os)) return acc;
-      const appId = installConfig[os];
-      if (!appId) return acc;
-      const appUrl = getMobileInstallLink(os, appId);
-      if (!appUrl) return acc;
-      const logoLight = `${os}-light`;
-      const logoDark = `${os}-dark`;
-      acc.push(jsxRuntime.jsx("li", {
-        className: "w3a--w-full",
-        children: jsxRuntime.jsx("a", {
-          href: appUrl,
-          rel: "noopener noreferrer",
-          target: "_blank",
-          children: jsxRuntime.jsxs(Button, {
-            type: "button",
-            variant: "tertiary",
-            className: "w3a--w-full !w3a--justify-start w3a--flex w3a--items-center w3a--gap-2 wallet-link-btn",
-            children: [jsxRuntime.jsx(Image, {
-              imageId: logoLight,
-              darkImageId: logoDark,
-              hoverImageId: logoLight,
-              darkHoverImageId: logoDark,
-              height: "28",
-              width: "28",
-              isButton: true
-            }), jsxRuntime.jsx("span", {
-              className: "w3a--text-sm w3a--font-medium",
-              children: t("modal.external.install-mobile-app", {
-                os: getOsName(os)
-              })
-            })]
-          })
-        })
-      }, os));
-      return acc;
-    }, []);
-    return installLinks;
-  };
-  const desktopInstallLinks = () => {
-    // if browser is brave, use chrome extension
-    const browserType = deviceDetails.browser === "brave" ? "chrome" : deviceDetails.browser;
-    const browserExtensionConfig = connectButton.walletRegistryItem.app || {};
-    const extensionForCurrentBrowser = browserExtensionConfig.browser && browserExtensionConfig.browser.includes(browserType) ? browserExtensionConfig.browser : undefined;
-    const browserExtensionId = browserExtensionConfig[browserType] || extensionForCurrentBrowser;
-    const browserExtensionUrl = browserExtensionId ? getBrowserExtensionUrl(browserType, browserExtensionId) : null;
-    const installLink = browserExtensionUrl ? jsxRuntime.jsx("li", {
-      children: jsxRuntime.jsx("a", {
-        href: browserExtensionUrl,
-        rel: "noopener noreferrer",
-        target: "_blank",
-        children: jsxRuntime.jsxs(Button, {
-          type: "button",
-          variant: "tertiary",
-          className: "w3a--w-full !w3a--justify-start w3a--flex w3a--items-center w3a--gap-2 wallet-link-btn",
-          children: [jsxRuntime.jsx(Image, {
-            imageId: deviceDetails.browser,
-            darkImageId: deviceDetails.browser,
-            hoverImageId: deviceDetails.browser,
-            darkHoverImageId: deviceDetails.browser,
-            height: "30",
-            width: "30",
-            isButton: true
-          }), jsxRuntime.jsx("span", {
-            className: "w3a--text-sm w3a--font-medium",
-            children: t("modal.external.install-browser-extension", {
-              browser: getBrowserName(deviceDetails.browser)
-            })
-          })]
-        })
-      })
-    }, deviceDetails.browser) : null;
-    return [installLink, ...mobileInstallLinks()];
-  };
-  return jsxRuntime.jsxs("div", {
-    children: [jsxRuntime.jsx(ExternalWalletHeader, {
-      title: `${t("modal.external.get")} ${connectButton.displayName}`,
-      goBack: goBack,
-      closeModal: closeModal
-    }), jsxRuntime.jsx("div", {
-      className: "w3a--flex w3a--justify-center w3a--my-6",
-      children: jsxRuntime.jsx(Image, {
-        imageId: `login-${connectButton.name}`,
-        hoverImageId: `login-${connectButton.name}`,
-        fallbackImageId: "wallet",
-        height: "100",
-        width: "100",
-        isButton: true,
-        extension: connectButton.imgExtension
-      })
-    }), jsxRuntime.jsx("ul", {
-      className: "w3a--flex w3a--flex-col w3a--gap-3",
-      children: deviceDetails.platform === "desktop" ? desktopInstallLinks() : mobileInstallLinks()
-    })]
-  });
-}
-
-module.exports = ExternalWalletInstall;