@web3auth/modal 10.16.0 → 11.0.0-beta.1

package/dist/lib.esm/packages/modal/src/ui/{components → containers}/Login/Login.js

@@ -2,50 +2,30 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import HCaptcha from '@hcaptcha/react-hcaptcha';
 import { AUTH_CONNECTION } from '@web3auth/auth';
 import { WALLET_CONNECTORS, ANALYTICS_EVENTS, log, WalletLoginError } from '@web3auth/no-modal';
-import { useContext, useState, useRef, useEffect, useMemo, useCallback } from 'react';
+import { useContext, useState, useRef, useMemo, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import Image from '../../components/Image/Image.js';
+import SocialLoginList from '../../components/SocialLoginList/SocialLoginList.js';
 import { capitalizeFirstLetter, CAPTCHA_SITE_KEY } from '../../config.js';
-import { DEFAULT_LOGO_DARK, DEFAULT_LOGO_LIGHT } from '../../constants.js';
+import { PAGES, DEFAULT_LOGO_DARK, DEFAULT_LOGO_LIGHT } from '../../constants.js';
 import { AnalyticsContext } from '../../context/AnalyticsContext.js';
-import { RootContext } from '../../context/RootContext.js';
+import { useModalState } from '../../context/ModalStateContext.js';
+import { useBodyState } from '../../context/RootContext.js';
+import { useWidget } from '../../context/WidgetContext.js';
 import { createPasswordlessHandler } from '../../handlers/factory.js';
 import { isTestAccountPattern } from '../../helper/testAccounts.js';
 import i18nInstance from '../../localeImport.js';
 import { cn, getUserCountry, getIcons, validatePhoneNumber } from '../../utils.js';
-import Image from '../Image/Image.js';
-import SocialLoginList from '../SocialLoginList/SocialLoginList.js';
 import LoginOtp from './LoginOtp/LoginOtp.js';
 import LoginPasswordLess from './LoginPasswordLess/LoginPasswordLess.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 const restrictedLoginMethods = [AUTH_CONNECTION.SMS_PASSWORDLESS, AUTH_CONNECTION.EMAIL_PASSWORDLESS, AUTH_CONNECTION.AUTHENTICATOR, AUTH_CONNECTION.PASSKEYS, AUTH_CONNECTION.TELEGRAM, AUTH_CONNECTION.CUSTOM];
 function Login(props) {
-  // TODO: add appName, isEmailPrimary, isExternalPrimary
   const {
-    web3authClientId,
-    web3authNetwork,
-    authBuildEnv,
-    appLogo,
-    isModalVisible,
-    handleSocialLoginHeight,
-    socialLoginsConfig,
     installedExternalWalletConfig,
-    isDark,
-    handleSocialLoginClick,
     totalExternalWallets,
-    remainingUndisplayedWallets,
-    isEmailPasswordLessLoginVisible,
-    isSmsPasswordLessLoginVisible,
-    handleExternalWalletBtnClick,
-    handleExternalWalletClick,
-    areSocialLoginsVisible,
-    showPasswordLessInput,
-    showExternalWalletButton,
-    showExternalWalletCount,
-    showInstalledExternalWallets,
-    logoAlignment = "center",
-    buttonRadius = "pill",
-    deviceDetails
+    remainingUndisplayedWallets
   } = props;
   const [t] = useTranslation(undefined, {
     i18n: i18nInstance
@@ -53,19 +33,47 @@ function Login(props) {
   const {
     bodyState,
     setBodyState
-  } = useContext(RootContext);
+  } = useBodyState();
   const {
     analytics
   } = useContext(AnalyticsContext);
+  const {
+    appLogo,
+    deviceDetails,
+    uiConfig,
+    isDark
+  } = useWidget();
+  // TODO: add appName, isEmailPrimary, isExternalPrimary
+  const {
+    modalState,
+    setModalState,
+    areSocialLoginsVisible,
+    isEmailPasswordLessLoginVisible,
+    isSmsPasswordLessLoginVisible,
+    showPasswordLessInput,
+    showExternalWalletButton,
+    handleShowExternalWallets,
+    preHandleSocialLoginClick: handleSocialLoginClick,
+    preHandleExternalWalletClick: handleExternalWalletClick
+  } = useModalState();
+  const {
+    modalVisibility: isModalVisible,
+    socialLoginsConfig
+  } = modalState;
+  const {
+    buttonRadiusType: buttonRadius,
+    logoAlignment,
+    displayInstalledExternalWallets: showInstalledExternalWallets,
+    displayExternalWalletsCount: showExternalWalletCount,
+    web3authClientId,
+    web3authNetwork,
+    authBuildEnv
+  } = uiConfig;
   const [countryCode, setCountryCode] = useState("");
   const [countryFlag, setCountryFlag] = useState("");
   const [passwordlessErrorMessage, setPasswordlessErrorMessage] = useState("");
   const [otpErrorMessage, setOtpErrorMessage] = useState("");
   const [expandSocialLogins, setExpandSocialLogins] = useState(false);
-  const [canShowMore, setCanShowMore] = useState(false);
-  const [visibleRow, setVisibleRow] = useState([]);
-  const [otherRow, setOtherRow] = useState([]);
-  const [mainOptionsRow, setMainOptionsRow] = useState([]);
   const [isPasswordLessCtaClicked, setIsPasswordLessCtaClicked] = useState(false);
   const [showOtpFlow, setShowOtpFlow] = useState(false);
   const [authConnection, setAuthConnection] = useState(undefined);
@@ -78,9 +86,13 @@ function Login(props) {
   const handleSocialLoginExpand = () => {
     setExpandSocialLogins(prev => !prev);
     setIsPasswordLessCtaClicked(false);
-    handleSocialLoginHeight();
   };
-  useEffect(() => {
+  const {
+    visibleRow,
+    otherRow,
+    mainOptionsRow,
+    canShowMore
+  } = useMemo(() => {
     const maxOptions = Object.keys(socialLoginsConfig.loginMethods).filter(loginMethodKey => {
       return socialLoginsConfig.loginMethods[loginMethodKey].showOnModal && !restrictedLoginMethods.includes(loginMethodKey);
     });
@@ -133,7 +145,6 @@ function Login(props) {
         isDark,
         isPrimaryBtn,
         name: name === "Twitter" ? "X" : name,
-        connector: socialLoginsConfig.connector,
         loginParams: {
           authConnection: connectorConfig.authConnection || method,
           authConnectionId: connectorConfig.authConnectionId,
@@ -151,11 +162,13 @@ function Login(props) {
       }
       otherRows.push(rows);
     });
-    setVisibleRow(visibleRows);
-    setOtherRow(otherRows);
-    setMainOptionsRow(mainOptionsRows);
-    setCanShowMore(maxOptions.length > 4); // Update the state based on the condition
-  }, [socialLoginsConfig, isDark, buttonRadius]);
+    return {
+      visibleRow: visibleRows,
+      otherRow: otherRows,
+      mainOptionsRow: mainOptionsRows,
+      canShowMore: maxOptions.length > 4
+    };
+  }, [socialLoginsConfig, isDark]);
   const handleCustomLogin = async (authConnection, loginHint) => {
     try {
       const handler = createPasswordlessHandler(authConnection, {
@@ -201,7 +214,6 @@ function Login(props) {
         const connectorConfig = socialLoginsConfig.loginMethods[AUTH_CONNECTION.EMAIL_PASSWORDLESS];
         if (connectorConfig.isDefault) {
           return handleSocialLoginClick({
-            connector: socialLoginsConfig.connector,
             loginParams: {
               authConnection: AUTH_CONNECTION.EMAIL_PASSWORDLESS,
               authConnectionId: connectorConfig.authConnectionId,
@@ -224,7 +236,6 @@ function Login(props) {
         const connectorConfig = socialLoginsConfig.loginMethods[AUTH_CONNECTION.SMS_PASSWORDLESS];
         if (connectorConfig.isDefault) {
           return handleSocialLoginClick({
-            connector: socialLoginsConfig.connector,
             loginParams: {
               authConnection: AUTH_CONNECTION.SMS_PASSWORDLESS,
               authConnectionId: connectorConfig.authConnectionId,
@@ -240,7 +251,7 @@ function Login(props) {
         }
       }
     }
-    setPasswordlessErrorMessage(invalidInputErrorMessage);
+    setPasswordlessErrorMessage(getInvalidInputErrorMessage());
     setIsPasswordLessLoading(false);
     return undefined;
   };
@@ -254,11 +265,11 @@ function Login(props) {
     if (isEmailPasswordLessLoginVisible) return "name@example.com";
     return "+(00)123456";
   }, [isEmailPasswordLessLoginVisible, isSmsPasswordLessLoginVisible]);
-  const invalidInputErrorMessage = useMemo(() => {
+  const getInvalidInputErrorMessage = () => {
     if (isEmailPasswordLessLoginVisible && isSmsPasswordLessLoginVisible) return t("modal.errors-invalid-number-email");
     if (isEmailPasswordLessLoginVisible) return t("modal.errors-invalid-email");
     return t("modal.errors-invalid-number");
-  }, [isEmailPasswordLessLoginVisible, isSmsPasswordLessLoginVisible, t]);
+  };
   useEffect(() => {
     const getLocation = async () => {
       const result = await getUserCountry();
@@ -282,7 +293,6 @@ function Login(props) {
       if (result !== null && result !== void 0 && (_result$data = result.data) !== null && _result$data !== void 0 && _result$data.id_token) {
         var _result$data2;
         return handleSocialLoginClick({
-          connector: socialLoginsConfig.connector,
           loginParams: {
             authConnection: authConnection,
             authConnectionId: connectorConfig.authConnectionId,
@@ -301,6 +311,12 @@ function Login(props) {
       setOtpLoading(false);
     }
   };
+  const handleExternalWalletBtnClick = useCallback(flag => {
+    setModalState(_objectSpread(_objectSpread({}, modalState), {}, {
+      currentPage: PAGES.WALLET_LIST
+    }));
+    handleShowExternalWallets(flag);
+  }, [modalState, setModalState, handleShowExternalWallets]);
 
   /**
    * Installed wallet click logic:
@@ -322,23 +338,22 @@ function Login(props) {
       total_external_wallets: totalExternalWallets
     });
     log.info("handleInstalledWalletClick", wallet);
-    // for non-injected Metamask on desktop, show QR code to connect
+
+    // for non-injected MetaMask on desktop, navigate to ConnectWallet page with pre-selected wallet
     if (wallet.name === WALLET_CONNECTORS.METAMASK && !wallet.hasInjectedWallet && deviceDetails.platform === "desktop") {
       handleExternalWalletClick({
         connector: wallet.name
       });
-      // We should show QR code only if the wallet is not installed.
+      // Set pre-selected wallet and navigate to ConnectWallet page
       setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
-        metamaskQrCode: {
-          show: true,
-          wallet: wallet
-        }
+        preSelectedWallet: wallet
       }));
+      handleExternalWalletBtnClick(true);
       return;
     }
 
     // when having multiple namespaces, ask user to select one
-    if (((_wallet$chainNamespac = wallet.chainNamespaces) === null || _wallet$chainNamespac === void 0 ? void 0 : _wallet$chainNamespac.length) > 1) {
+    if (((_wallet$chainNamespac = wallet.chainNamespaces) === null || _wallet$chainNamespac === void 0 ? void 0 : _wallet$chainNamespac.length) > 1 && wallet.name !== WALLET_CONNECTORS.METAMASK) {
       setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
         multiChainSelector: {
           show: true,
@@ -363,10 +378,11 @@ function Login(props) {
     });
     setIsPasswordLessCtaClicked(false);
     e === null || e === void 0 || e.preventDefault();
-    if (handleExternalWalletBtnClick) handleExternalWalletBtnClick(true);
+    handleExternalWalletBtnClick(true);
   }, [analytics, handleExternalWalletBtnClick, installedExternalWallets.length, totalExternalWallets]);
   useEffect(() => {
     if (showExternalWalletButton && !areSocialLoginsVisible && !showPasswordLessInput) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional
       handleConnectWallet();
     }
   }, [showExternalWalletButton, areSocialLoginsVisible, showPasswordLessInput, handleConnectWallet]);
@@ -410,25 +426,25 @@ function Login(props) {
   };
   const externalWalletSection = () => {
     return /*#__PURE__*/jsxs("div", {
-      className: cn("w3a--flex w3a--w-full w3a--flex-col w3a--items-start w3a--justify-start w3a--gap-y-2"),
+      className: cn("wta:flex wta:w-full wta:flex-col wta:items-start wta:justify-start wta:gap-y-2"),
       children: [installedExternalWallets.length > 0 && installedExternalWallets.map(wallet => /*#__PURE__*/jsxs("button", {
         type: "button",
-        className: cn("w3a--btn !w3a--justify-between w3a--group w3a--relative w3a--overflow-hidden", {
-          "w3a--rounded-full": buttonRadius === "pill",
-          "w3a--rounded-lg": buttonRadius === "rounded",
-          "w3a--rounded-none": buttonRadius === "square"
+        className: cn("w3a--btn wta:justify-between! wta:group wta:relative wta:overflow-hidden", {
+          "wta:rounded-full": buttonRadius === "pill",
+          "wta:rounded-lg": buttonRadius === "rounded",
+          "wta:rounded-none": buttonRadius === "square"
         }),
         onClick: () => handleInstalledWalletClick(wallet),
         children: [/*#__PURE__*/jsx("p", {
-          className: "w3a--max-w-[180px] w3a--truncate w3a--text-base w3a--font-normal w3a--text-app-gray-700 dark:w3a--text-app-white",
+          className: "wta:max-w-[180px] wta:truncate wta:text-base wta:font-normal wta:text-app-gray-700 wta:dark:text-app-white",
           children: wallet.displayName
         }), /*#__PURE__*/jsxs("div", {
-          className: "w3a--absolute w3a--right-4 w3a--top-1/2 w3a--flex w3a--w-auto -w3a--translate-y-1/2 w3a--items-center w3a--gap-x-2 w3a--transition-all w3a--duration-300 group-hover:w3a--translate-x-6 group-hover:w3a--opacity-0",
+          className: "wta:absolute wta:right-4 wta:top-1/2 wta:flex wta:w-auto wta:-translate-y-1/2 wta:items-center wta:gap-x-2 wta:transition-all wta:duration-300 wta:group-hover:translate-x-6 wta:group-hover:opacity-0",
           children: [wallet.hasInjectedWallet && /*#__PURE__*/jsx("span", {
-            className: "w3a--inline-flex w3a--items-center w3a--rounded-md w3a--bg-app-primary-100 w3a--px-2 w3a--py-1 w3a--text-xs w3a--font-medium w3a--text-app-primary-800  dark:w3a--border dark:w3a--border-app-primary-400 dark:w3a--bg-transparent dark:w3a--text-app-primary-400",
+            className: "wta:inline-flex wta:items-center wta:rounded-md wta:bg-app-primary-100 wta:px-2 wta:py-1 wta:text-xs wta:font-medium wta:text-app-primary-800  wta:dark:border wta:dark:border-app-primary-400 wta:dark:bg-transparent wta:dark:text-app-primary-400",
             children: t("modal.external.installed")
           }), /*#__PURE__*/jsx("figure", {
-            className: "w3a--size-5",
+            className: "wta:size-5",
             children: /*#__PURE__*/jsx(Image, {
               imageData: wallet.icon,
               imageId: `login-${wallet.name}`,
@@ -442,28 +458,28 @@ function Login(props) {
           })]
         }), /*#__PURE__*/jsx("img", {
           id: "injected-wallet-arrow",
-          className: "w3a--absolute w3a--right-4 w3a--top-1/2 -w3a--translate-x-10 -w3a--translate-y-1/2 w3a--opacity-0 w3a--transition-all w3a--duration-300 group-hover:w3a--translate-x-0 group-hover:w3a--opacity-100",
+          className: "wta:absolute wta:right-4 wta:top-1/2 wta:-translate-x-10 wta:-translate-y-1/2 wta:opacity-0 wta:transition-all wta:duration-300 wta:group-hover:translate-x-0 wta:group-hover:opacity-100",
           src: getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
           alt: "arrow"
         })]
       }, wallet.name)), remainingUndisplayedWallets > 0 && /*#__PURE__*/jsxs("button", {
         type: "button",
-        className: cn("w3a--btn !w3a--justify-between w3a--group w3a--relative w3a--overflow-hidden", {
-          "w3a--rounded-full": buttonRadius === "pill",
-          "w3a--rounded-lg": buttonRadius === "rounded",
-          "w3a--rounded-none": buttonRadius === "square"
+        className: cn("w3a--btn wta:justify-between! wta:group wta:relative wta:overflow-hidden", {
+          "wta:rounded-full": buttonRadius === "pill",
+          "wta:rounded-lg": buttonRadius === "rounded",
+          "wta:rounded-none": buttonRadius === "square"
         }),
         onClick: handleConnectWallet,
         children: [/*#__PURE__*/jsx("p", {
-          className: "w3a--text-base w3a--font-normal w3a--text-app-gray-900 dark:w3a--text-app-white",
+          className: "wta:text-base wta:font-normal wta:text-app-gray-900 wta:dark:text-app-white",
           children: t("modal.external.all-wallets")
         }), showExternalWalletCount && /*#__PURE__*/jsx("div", {
           id: "external-wallet-count",
-          className: "w3a--absolute w3a--right-4 w3a--top-1/2 w3a--w-auto -w3a--translate-y-1/2 w3a--rounded-full w3a--bg-app-primary-100 w3a--px-2.5 w3a--py-0.5 w3a--text-xs w3a--font-medium w3a--text-app-primary-800 w3a--transition-all w3a--delay-300 w3a--duration-300 group-hover:w3a--translate-x-6 group-hover:w3a--opacity-0 group-hover:w3a--delay-0 dark:w3a--border dark:w3a--border-app-primary-500 dark:w3a--bg-transparent dark:w3a--text-app-primary-500",
+          className: "wta:absolute wta:right-4 wta:top-1/2 wta:w-auto wta:-translate-y-1/2 wta:rounded-full wta:bg-app-primary-100 wta:px-2.5 wta:py-0.5 wta:text-xs wta:font-medium wta:text-app-primary-800 wta:transition-all wta:delay-300 wta:duration-300 wta:group-hover:translate-x-6 wta:group-hover:opacity-0 wta:group-hover:delay-0 wta:dark:border wta:dark:border-app-primary-500 wta:dark:bg-transparent wta:dark:text-app-primary-500",
           children: remainingUndisplayedWallets
         }), /*#__PURE__*/jsx("img", {
           id: "external-wallet-arrow",
-          className: "w3a--absolute w3a--right-4 w3a--top-1/2 -w3a--translate-x-10 -w3a--translate-y-1/2 w3a--opacity-0 w3a--transition-all w3a--duration-300 group-hover:w3a--translate-x-0 group-hover:w3a--opacity-100",
+          className: "wta:absolute wta:right-4 wta:top-1/2 wta:-translate-x-10 wta:-translate-y-1/2 wta:opacity-0 wta:transition-all wta:duration-300 wta:group-hover:translate-x-0 wta:group-hover:opacity-100",
           src: getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
           alt: "arrow"
         })]
@@ -473,14 +489,14 @@ function Login(props) {
   const headerLogo = [DEFAULT_LOGO_DARK, DEFAULT_LOGO_LIGHT].includes(appLogo) ? "" : appLogo;
   const delimiter = index => {
     return /*#__PURE__*/jsxs("div", {
-      className: cn("w3a--flex w3a--w-full w3a--items-center w3a--gap-x-2", headerLogo ? "w3a--my-2" : "w3a--my-4"),
+      className: cn("wta:flex wta:w-full wta:items-center wta:gap-x-2", headerLogo ? "wta:my-2" : "wta:my-4"),
       children: [/*#__PURE__*/jsx("div", {
-        className: "w3a--h-px w3a--w-full w3a--bg-app-gray-200 dark:w3a--bg-app-gray-500"
+        className: "wta:h-px wta:w-full wta:bg-app-gray-200 wta:dark:bg-app-gray-500"
       }), /*#__PURE__*/jsx("p", {
-        className: "w3a--text-xs w3a--font-normal w3a--uppercase w3a--text-app-gray-400 dark:w3a--text-app-gray-400",
+        className: "wta:text-xs wta:font-normal wta:uppercase wta:text-app-gray-400 wta:dark:text-app-gray-400",
         children: "or"
       }), /*#__PURE__*/jsx("div", {
-        className: "w3a--h-px w3a--w-full w3a--bg-app-gray-200 dark:w3a--bg-app-gray-500"
+        className: "wta:h-px wta:w-full wta:bg-app-gray-200 wta:dark:bg-app-gray-500"
       })]
     }, `section-delimiter-${index}`);
   };
@@ -530,18 +546,18 @@ function Login(props) {
   };
   const socialLoginExpandedView = () => socialLoginSection(otherRow);
   return /*#__PURE__*/jsxs("div", {
-    className: "w3a--flex w3a--flex-col w3a--items-center w3a--gap-y-4 w3a--p-2",
+    className: "wta:flex wta:flex-col wta:items-center wta:gap-y-4 wta:p-2",
     children: [/*#__PURE__*/jsxs("div", {
-      className: cn("w3a--flex w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-2 w3a--pt-6", logoAlignment === "center" ? "" : "w3a--w-full"),
+      className: cn("wta:flex wta:flex-col wta:items-center wta:justify-center wta:gap-y-2 wta:pt-6", logoAlignment === "center" ? "" : "wta:w-full"),
       children: [headerLogo && /*#__PURE__*/jsx("figure", {
-        className: cn("w3a--mx-auto w3a--h-12 w3a--w-[200px]", logoAlignment === "center" ? "w3a--flex w3a--justify-center w3a--items-center" : "w3a--ml-0 w3a--w-auto"),
+        className: cn("wta:mx-auto wta:h-12 wta:w-[200px]", logoAlignment === "center" ? "wta:flex wta:justify-center wta:items-center" : "wta:ml-0 wta:w-auto"),
         children: /*#__PURE__*/jsx("img", {
           src: headerLogo,
           alt: "Logo",
-          className: "w3a--size-full w3a--object-contain"
+          className: "wta:size-full wta:object-contain"
         })
       }), /*#__PURE__*/jsx("p", {
-        className: cn("w3a--text-app-gray-900 dark:w3a--text-app-white", logoAlignment === "center" ? "w3a--text-center" : "w3a--text-left w3a--w-full w3a--ml-4", headerLogo ? "w3a--text-lg w3a--font-semibold" : "w3a--text-3xl w3a--font-medium"),
+        className: cn("wta:text-app-gray-900 wta:dark:text-app-white", logoAlignment === "center" ? "wta:text-center" : "wta:text-left wta:w-full wta:ml-4", headerLogo ? "wta:text-lg wta:font-semibold" : "wta:text-3xl wta:font-medium"),
         children: t("modal.social.sign-in")
       })]
     }), /*#__PURE__*/jsx(HCaptcha, {
@@ -555,10 +571,10 @@ function Login(props) {
       onError: () => setCaptchaError("passwordless.captcha-default-error"),
       onChalExpired: () => setCaptchaError("passwordless.captcha-default-error")
     }), captchaError && showCaptcha && /*#__PURE__*/jsx("p", {
-      className: "-w3a--mt-2 w3a--w-full w3a--pl-6 w3a--text-start w3a--text-xs w3a--font-normal w3a--text-app-red-500 dark:w3a--text-app-red-400",
+      className: "wta:-mt-2 wta:w-full wta:pl-6 wta:text-start wta:text-xs wta:font-normal wta:text-app-red-500 wta:dark:text-app-red-400",
       children: t(captchaError)
     }), !showCaptcha && /*#__PURE__*/jsxs("div", {
-      className: "w3a--flex w3a--w-full w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-2",
+      className: "wta:flex wta:w-full wta:flex-col wta:items-center wta:justify-center wta:gap-y-2",
       children: [!expandSocialLogins && defaultView(), expandSocialLogins && socialLoginExpandedView()]
     })]
   });

package/dist/lib.esm/packages/modal/src/ui/{components → containers}/Login/LoginOtp/LoginOtp.js

@@ -1,9 +1,9 @@
 import { AUTH_CONNECTION } from '@web3auth/auth';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import OtpInput$1 from '../../../components/Otp/Otp.js';
 import i18nInstance from '../../../localeImport.js';
 import { getIcons } from '../../../utils.js';
-import OtpInput$1 from '../../Otp/Otp.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 /**
@@ -33,16 +33,16 @@ function OtpInput(props) {
   }, [loginHint, authConnection, countryFlag]);
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx("div", {
-      className: "w3a--mr-auto w3a--flex w3a--w-full w3a--items-start w3a--justify-start",
+      className: "wta:mr-auto wta:flex wta:w-full wta:items-start wta:justify-start",
       children: /*#__PURE__*/jsx("button", {
         type: "button",
-        className: "w3a--z-20 w3a--flex w3a--size-5 w3a--cursor-pointer w3a--items-center w3a--justify-center w3a--rounded-full",
+        className: "wta:z-20 wta:flex wta:size-5 wta:cursor-pointer wta:items-center wta:justify-center wta:rounded-full",
         onClick: () => setShowOtpFlow(false),
         children: /*#__PURE__*/jsx("svg", {
           xmlns: "http://www.w3.org/2000/svg",
           fill: "none",
           viewBox: "0 0 20 20",
-          className: "w3a--text-app-gray-900 dark:w3a--text-app-white",
+          className: "wta:text-app-gray-900 wta:dark:text-app-white",
           children: /*#__PURE__*/jsx("path", {
             fill: "currentColor",
             fillRule: "evenodd",
@@ -52,23 +52,23 @@ function OtpInput(props) {
         })
       })
     }), /*#__PURE__*/jsxs("div", {
-      className: "-w3a--mt-10 w3a--flex w3a--size-full w3a--flex-1 w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4",
+      className: "wta:-mt-10 wta:flex wta:size-full wta:flex-1 wta:flex-col wta:items-center wta:justify-center wta:gap-y-4",
       children: [/*#__PURE__*/jsx("img", {
         src: getIcons(isMobileOtp ? "sms-otp-light" : "email-otp-light"),
         alt: "otp",
-        className: "w3a--size-auto"
+        className: "wta:size-auto"
       }), /*#__PURE__*/jsxs("div", {
-        className: "w3a--mx-auto -w3a--mt-6 w3a--flex w3a--w-full w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-2",
+        className: "wta:mx-auto wta:-mt-6 wta:flex wta:w-full wta:flex-col wta:items-center wta:justify-center wta:gap-y-2",
         children: [/*#__PURE__*/jsx("p", {
-          className: "w3a--text-lg w3a--font-bold w3a--text-app-gray-900 dark:w3a--text-app-white",
+          className: "wta:text-lg wta:font-bold wta:text-app-gray-900 wta:dark:text-app-white",
           children: isMobileOtp ? t("modal.otp.mobile-title") : t("modal.otp.email-title")
         }), /*#__PURE__*/jsxs("div", {
-          className: "w3a--mx-auto w3a--flex w3a--w-full w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-1",
+          className: "wta:mx-auto wta:flex wta:w-full wta:flex-col wta:items-center wta:justify-center wta:gap-y-1",
           children: [/*#__PURE__*/jsx("p", {
-            className: "w3a--text-center w3a--text-sm w3a--font-normal w3a--text-app-gray-500 dark:w3a--text-app-gray-300",
+            className: "wta:text-center wta:text-sm wta:font-normal wta:text-app-gray-500 wta:dark:text-app-gray-300",
             children: isMobileOtp ? t("modal.otp.mobile-subtext") : t("modal.otp.email-subtext")
           }), /*#__PURE__*/jsx("p", {
-            className: "w3a--text-center w3a--text-sm w3a--font-normal w3a--text-app-gray-500 dark:w3a--text-app-gray-300",
+            className: "wta:text-center wta:text-sm wta:font-normal wta:text-app-gray-500 wta:dark:text-app-gray-300",
             children: isMobileOtp ? parsedLoginHint : t("modal.otp.email-subtext-example", {
               email: parsedLoginHint
             })
@@ -102,7 +102,7 @@ function LoginOtp(props) {
     countryFlag
   } = props;
   return /*#__PURE__*/jsx("div", {
-    className: "w3a--flex w3a--size-full w3a--flex-1 w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4",
+    className: "wta:flex wta:size-full wta:flex-1 wta:flex-col wta:items-center wta:justify-center wta:gap-y-4",
     children: /*#__PURE__*/jsx(OtpInput, {
       errorMessage: errorMessage,
       setShowOtpFlow: setShowOtpFlow,

package/dist/lib.esm/packages/modal/src/ui/{components → containers}/Login/LoginPasswordLess/LoginPasswordLess.js

@@ -1,8 +1,8 @@
 import { useRef, useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
+import PulseLoader from '../../../components/PulseLoader/PulseLoader.js';
 import i18nInstance from '../../../localeImport.js';
 import { getIcons, cn } from '../../../utils.js';
-import PulseLoader from '../../PulseLoader/PulseLoader.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 function LoginPasswordLess(props) {
@@ -57,22 +57,22 @@ function LoginPasswordLess(props) {
   if (!isPasswordLessCtaClicked) {
     return /*#__PURE__*/jsxs("button", {
       type: "button",
-      className: cn("w3a--btn !w3a--justify-between w3a--relative w3a--group w3a--overflow-hidden", {
-        "w3a--rounded-full": buttonRadius === "pill",
-        "w3a--rounded-lg": buttonRadius === "rounded",
-        "w3a--rounded-none": buttonRadius === "square"
+      className: cn("w3a--btn wta:justify-between! wta:relative wta:group wta:overflow-hidden", {
+        "wta:rounded-full": buttonRadius === "pill",
+        "wta:rounded-lg": buttonRadius === "rounded",
+        "wta:rounded-none": buttonRadius === "square"
       }),
       onClick: () => {
         setIsPasswordLessCtaClicked(true);
       },
       children: [/*#__PURE__*/jsx("p", {
-        className: "w3a--text-app-gray-900 dark:w3a--text-app-white",
+        className: "wta:text-app-gray-900 wta:dark:text-app-white",
         children: t("modal.passwordless.title", {
           title
         })
       }), /*#__PURE__*/jsx("img", {
         id: "passwordless-arrow",
-        className: "w3a--absolute w3a--right-4 w3a--top-1/2 -w3a--translate-x-6 -w3a--translate-y-1/2 w3a--opacity-0 w3a--transition-all w3a--duration-300 group-hover:w3a--translate-x-0 group-hover:w3a--opacity-100",
+        className: "wta:absolute wta:right-4 wta:top-1/2 wta:-translate-x-6 wta:-translate-y-1/2 wta:opacity-0 wta:transition-all wta:duration-300 wta:group-hover:translate-x-0 wta:group-hover:opacity-100",
         src: getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
         alt: "arrow"
       })]
@@ -80,10 +80,10 @@ function LoginPasswordLess(props) {
   }
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsxs("div", {
-      className: cn("w3a--input", isInputFocused && "!w3a--border-app-primary-600", {
-        "w3a--rounded-full": buttonRadius === "pill",
-        "w3a--rounded-lg": buttonRadius === "rounded",
-        "w3a--rounded-none": buttonRadius === "square"
+      className: cn("w3a--input", isInputFocused && "wta:border-app-primary-600!", {
+        "wta:rounded-full": buttonRadius === "pill",
+        "wta:rounded-lg": buttonRadius === "rounded",
+        "wta:rounded-none": buttonRadius === "square"
       }),
       children: [/*#__PURE__*/jsx("input", {
         ref: inputRef,
@@ -98,12 +98,12 @@ function LoginPasswordLess(props) {
           setIsInputFocused(false);
         },
         type: "text",
-        className: cn("w3a--w-full w3a--appearance-none w3a--bg-transparent w3a--text-app-gray-900 w3a--outline-none placeholder:w3a--text-xs placeholder:w3a--text-app-gray-400 focus:w3a--outline-none active:w3a--outline-none dark:w3a--text-app-white dark:placeholder:w3a--text-app-gray-500"),
+        className: cn("wta:w-full wta:appearance-none wta:bg-transparent wta:text-app-gray-900 wta:outline-none wta:placeholder:text-xs wta:placeholder:text-app-gray-400 wta:focus:outline-none wta:active:outline-none wta:dark:text-app-white wta:dark:placeholder:text-app-gray-500"),
         onKeyDown: e => handleEnter(e),
         disabled: isPasswordLessLoading
       }), isPasswordLessLoading && /*#__PURE__*/jsx(PulseLoader, {}), inputValue && !isPasswordLessLoading && /*#__PURE__*/jsx("button", {
         type: "button",
-        className: "w3a--appearance-none",
+        className: "wta:appearance-none",
         onClick: onFormSubmit,
         children: /*#__PURE__*/jsx("img", {
           src: getIcons(isDark ? "chevron-right-dark" : "chevron-right-light"),
@@ -111,7 +111,7 @@ function LoginPasswordLess(props) {
         })
       })]
     }), errorMessage && !isInputFocused && isPasswordLessCtaClicked && /*#__PURE__*/jsx("p", {
-      className: "w3a--w-full w3a--pl-6 w3a--text-start w3a--text-xs w3a--font-normal w3a--text-app-red-500 dark:w3a--text-app-red-400",
+      className: "wta:w-full wta:pl-6 wta:text-start wta:text-xs wta:font-normal wta:text-app-red-500 wta:dark:text-app-red-400",
       children: errorMessage
     })]
   });