@getpara/react-sdk 1.2.0 → 1.3.1-dev.1

package/dist/modal/components/AddFunds/AddFunds.js

@@ -1,147 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { EnabledFlow, getOnRampAssets, getOnRampNetworks, OnRampProvider, OnRampPurchaseType, toAssetInfoArray, WalletType, } from '@getpara/web-sdk';
-import { CenteredText, FilledDisabledInput, Heading, InnerStepContainer, QRContainer, StepContainer } from '../common.js';
-import { CpslButton, CpslDivider, CpslIcon, CpslIdenticon, CpslQrCode, CpslSpinner, CpslTab, CpslTabs, CpslText, } from '@getpara/react-components';
-import { useModalStore, useThemeStore } from '../../stores/index.js';
-import { useEffect, useMemo } from 'react';
-import { OnRampProviderButton } from '../OnRampComponents/OnRampProviderButton.js';
-import { isMobile } from '@getpara/web-sdk';
-import { useActiveWallet } from '../../hooks/useActiveWallet.js';
-import { getAddFundsStep, ModalStep } from '../../utils/steps.js';
-import { motion, AnimatePresence } from 'framer-motion';
-import { useExternalWallets } from '../../providers/ExternalWalletContext.js';
-import { getNetworkFromChainId, getNetworkOrMainNetEquivalent, useCopyToClipboard } from '@getpara/react-common';
-import { formatNetworkList } from '../../utils/stringFormatters.js';
-import styled from 'styled-components';
-import { useInternalClient } from '../../../provider/hooks/utils/useInternalClient.js';
-const TABS = [
-    [EnabledFlow.BUY, 'isBuyEnabled', 'creditCard', 'Buy'],
-    [EnabledFlow.RECEIVE, 'isReceiveEnabled', 'qrCode', 'Receive'],
-    [EnabledFlow.WITHDRAW, 'isWithdrawEnabled', 'arrowCircleBrokenDownLeft', 'Withdraw'],
-];
-const GENERIC_WALLET = {
-    [WalletType.EVM]: 'Ethereum or EVM-based L2s',
-    [WalletType.SOLANA]: 'Solana',
-    [WalletType.COSMOS]: 'Cosmos',
-};
-export const AddFunds = () => {
-    const [isCopied, copy] = useCopyToClipboard();
-    const para = useInternalClient();
-    const appName = useThemeStore(state => state.appName);
-    const onRampConfig = useModalStore(state => state.onRampConfig);
-    const hideWallets = useThemeStore(state => state.hideWallets);
-    const storedTab = useModalStore(state => state.accountAddFundTab);
-    const setStep = useModalStore(state => state.setStep);
-    const setOnRampPurchase = useModalStore(state => state.setOnRampPurchase);
-    const { chainId } = useExternalWallets();
-    const activeWallet = useActiveWallet();
-    const tabs = TABS.filter(([, key]) => !!onRampConfig[key]);
-    const isMultiFlow = tabs.length > 1;
-    const tab = storedTab !== null && storedTab !== void 0 ? storedTab : tabs[0][0];
-    const address = useMemo(() => (activeWallet ? para.getDisplayAddress(activeWallet.id, { addressType: activeWallet.type }) : ''), [para, activeWallet === null || activeWallet === void 0 ? void 0 : activeWallet.id, activeWallet === null || activeWallet === void 0 ? void 0 : activeWallet.type]);
-    const onSetTab = (event) => {
-        setStep(getAddFundsStep(event.detail.tab));
-    };
-    const onCopy = () => {
-        copy(address);
-    };
-    const [allowedNetworks, allowedAssets, isProviderAllowed] = useMemo(() => {
-        if (!onRampConfig || !activeWallet) {
-            return [[], [], {}];
-        }
-        const action = tab === EnabledFlow.BUY ? OnRampPurchaseType.BUY : OnRampPurchaseType.SELL;
-        const detectedNetwork = getNetworkFromChainId(chainId);
-        const isExternal = activeWallet.isExternal && !!detectedNetwork;
-        const allowedNetworks = isExternal
-            ? [getNetworkOrMainNetEquivalent(detectedNetwork, onRampConfig.testMode)]
-            : getOnRampNetworks(onRampConfig.assetInfo, {
-                walletType: activeWallet.type,
-                allowed: onRampConfig.allowedAssets ? Object.keys(onRampConfig.allowedAssets) : undefined,
-            });
-        const allowedAssetsLookup = allowedNetworks.reduce((acc, network) => {
-            var _a;
-            const configValue = (_a = onRampConfig.allowedAssets) === null || _a === void 0 ? void 0 : _a[network];
-            const allowed = configValue === true ? undefined : configValue;
-            return Object.assign(Object.assign({}, acc), { [network]: getOnRampAssets(onRampConfig.assetInfo, { walletType: activeWallet.type, network, allowed }) });
-        }, {});
-        const isProviderAllowed = onRampConfig.providers.reduce((acc, id) => {
-            const hasMatch = toAssetInfoArray(onRampConfig.assetInfo).some(([type, network, asset, validProviders]) => {
-                var _a, _b;
-                return (type === activeWallet.type &&
-                    allowedNetworks.includes(network) &&
-                    (!allowedAssetsLookup[network] || allowedAssetsLookup[network].includes(asset)) &&
-                    !!((_b = (_a = validProviders[id]) === null || _a === void 0 ? void 0 : _a[1]) === null || _b === void 0 ? void 0 : _b[action]));
-            });
-            return Object.assign(Object.assign({}, acc), { [id]: hasMatch });
-        }, {});
-        return [allowedNetworks, [...new Set(Object.values(allowedAssetsLookup).flat())], isProviderAllowed];
-    }, [activeWallet === null || activeWallet === void 0 ? void 0 : activeWallet.type, activeWallet === null || activeWallet === void 0 ? void 0 : activeWallet.isExternal, tab, onRampConfig.assetInfo, onRampConfig.allowedAssets, chainId]);
-    useEffect(() => {
-        setOnRampPurchase(undefined);
-    }, []);
-    useEffect(() => {
-        setOnRampPurchase(undefined);
-    }, []);
-    if (!onRampConfig || !activeWallet) {
-        return (_jsx(SpinnerContainer, { children: _jsx(CpslSpinner, {}) }));
-    }
-    useEffect(() => {
-        setOnRampPurchase(undefined);
-    }, []);
-    return (_jsxs(StepContainer, { children: [isMultiFlow && (_jsx(InnerStepContainer, { children: _jsx(CpslTabs, { selectedTab: tab, onCpslTabsChanged: onSetTab, children: TABS.map(([tab, _, icon, title]) => (_jsxs(CpslTab, { tab: tab, children: [_jsx(CpslIcon, { slot: "start", icon: icon }), title] }, tab))) }) })), _jsx(_Fragment, { children: [EnabledFlow.BUY, EnabledFlow.WITHDRAW].includes(tab) ? (_jsxs(_Fragment, { children: [_jsx(Heading, { variant: "headingS", weight: "bold", children: "Choose Provider" }), _jsxs($InnerStepContainer, { children: [_jsxs(NoProviders, { isHidden: Object.values(isProviderAllowed).some(v => !!v), variant: "bodyM", children: ["No providers are available for this ", hideWallets ? 'account' : 'wallet'] }), _jsx(AnimatePresence, { children: onRampConfig.providers.map((id, index) => {
-                                        return isProviderAllowed[id] ? (_jsx(motion.div, { style: { width: '100%' }, layout: true, initial: { opacity: 0, transform: 'translateX(25px)' }, animate: { opacity: 1, transform: 'none' }, exit: { opacity: 0, transform: 'translateX(-25px)' }, transition: { duration: 0.2 }, children: _jsx(OnRampProviderButton, { config: onRampConfig, index: index, onClick: () => __awaiter(void 0, void 0, void 0, function* () {
-                                                    var _a;
-                                                    if (!(activeWallet === null || activeWallet === void 0 ? void 0 : activeWallet.type))
-                                                        return;
-                                                    const isPopup = id !== OnRampProvider.RAMP;
-                                                    const { onRampPurchase: newOnRampPurchase } = yield para.initiateOnRampTransaction({
-                                                        walletId: activeWallet.isExternal ? undefined : activeWallet.id,
-                                                        externalWalletAddress: activeWallet.isExternal ? activeWallet.id : undefined,
-                                                        shouldOpenPopup: isPopup,
-                                                        params: {
-                                                            type: tab === EnabledFlow.BUY ? OnRampPurchaseType.BUY : OnRampPurchaseType.SELL,
-                                                            walletType: activeWallet.type,
-                                                            provider: id,
-                                                            networks: allowedNetworks,
-                                                            assets: allowedAssets,
-                                                            defaultNetwork: onRampConfig.defaultOnRampNetwork,
-                                                            defaultAsset: onRampConfig.defaultOnRampAsset,
-                                                            fiatQuantity: (_a = onRampConfig.defaultBuyAmount) === null || _a === void 0 ? void 0 : _a[0],
-                                                            testMode: onRampConfig.testMode,
-                                                        },
-                                                    });
-                                                    setOnRampPurchase(Object.assign(Object.assign({}, newOnRampPurchase), { fiat: 'USD' }));
-                                                    !isPopup && setStep(ModalStep.ADD_FUNDS_AWAITING);
-                                                }) }, id) }, id)) : null;
-                                    }) })] })] })) : (_jsxs(_Fragment, { children: [_jsx(InnerStepContainer, { children: _jsxs(FilledDisabledInput, { noAutoDisable: true, readonly: true, placeholder: address, children: [_jsx(CpslIdenticon, { slot: "start", size: "32px", hash: para.getIdenticonHash(activeWallet.id, activeWallet.type) }), _jsx(CpslButton, { slot: "end", variant: "ghost", onClick: onCopy, children: _jsx(CpslIcon, { icon: isCopied ? 'check' : 'copy' }) })] }, address) }), !isMobile() && (_jsxs(_Fragment, { children: [_jsx(CpslDivider, { children: "or" }), _jsxs(InnerStepContainer, { children: [_jsx(QRContainer, { children: !address ? _jsx(CpslSpinner, { size: 100 }) : _jsx(CpslQrCode, { url: address }, address) }), _jsx(CpslText, { weight: "semiBold", color: "secondary", children: "Scan with your crypto wallet" })] })] })), _jsxs(InnerStepContainer, { children: [_jsxs(CenteredText, { weight: "semiBold", children: [(!!onRampConfig.allowedAssets && allowedNetworks.length > 0) || hideWallets
-                                            ? (appName !== null && appName !== void 0 ? appName : 'This App')
-                                            : 'This Wallet', ' ', "Only Supports:"] }), _jsx(CenteredText, { weight: "medium", color: "secondary", children: !!onRampConfig.allowedAssets && allowedNetworks.length > 0
-                                        ? formatNetworkList(allowedNetworks)
-                                        : GENERIC_WALLET[activeWallet.type] })] })] })) })] }));
-};
-const SpinnerContainer = styled(StepContainer) `
-  margin: 50% 0;
-`;
-const $InnerStepContainer = styled(InnerStepContainer) `
-  position: relative;
-  min-height: 270px;
-`;
-const NoProviders = styled(CpslText) `
-  width: 100%;
-  text-align: center;
-  visibility: ${({ isHidden }) => (isHidden ? 'hidden' : 'visible')};
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  transition: visibility 0.2s;
-`;

package/dist/modal/components/AddFunds/AddFundsAwaiting.js

@@ -1,65 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { StepContainer } from '../common.js';
-import { OnRampProvider } from '@getpara/web-sdk';
-import { useModalStore, useThemeStore } from '../../stores/index.js';
-import { lazy, useEffect, useMemo, useState } from 'react';
-import { ModalStep } from '../../utils/steps.js';
-import { RampEmbed, StripeEmbed } from '@getpara/react-common';
-import styled from 'styled-components';
-import { useGoBack } from '../../hooks/useGoBack.js';
-import { useInternalClient } from '../../../provider/hooks/utils/useInternalClient.js';
-const STEPS = {
-    CANCELLED: ModalStep.ADD_FUNDS_FAILURE,
-    FINISHED: ModalStep.ADD_FUNDS_SUCCESS,
-};
-export const AddFundsAwaiting = () => {
-    const setStep = useModalStore(state => state.setStep);
-    const goBack = useGoBack();
-    const onRampConfig = useModalStore(state => state.onRampConfig);
-    const onRampPurchase = useModalStore(state => state.onRampPurchase);
-    const setOnRampPurchase = useModalStore(state => state.setOnRampPurchase);
-    const para = useInternalClient();
-    const appName = useThemeStore(state => state.appName);
-    const isDark = useThemeStore(state => state.isDark);
-    const [MoonPayEmbed, setMoonPayEmbed] = useState(null);
-    const props = {
-        para,
-        appName,
-        onRampConfig,
-        onRampPurchase: onRampPurchase,
-        isDark,
-        isEmbedded: true,
-        setOnRampPurchase,
-        onClose: goBack,
-    };
-    useEffect(() => {
-        const _MoonPayEmbed = lazy(() => import(`./MoonPayEmbed.js`));
-        setMoonPayEmbed(_MoonPayEmbed);
-    }, []);
-    const onRampEmbed = useMemo(() => {
-        if (!onRampPurchase.id) {
-            return null;
-        }
-        switch (onRampPurchase === null || onRampPurchase === void 0 ? void 0 : onRampPurchase.provider) {
-            case OnRampProvider.STRIPE:
-                return _jsx(StripeEmbed, Object.assign({}, props));
-            case OnRampProvider.MOONPAY:
-                return !MoonPayEmbed || typeof window === 'undefined' ? null : _jsx(MoonPayEmbed, Object.assign({}, props));
-            case OnRampProvider.RAMP:
-                return _jsx(RampEmbed, Object.assign({ apiKey: onRampConfig.rampApiKey }, props));
-        }
-    }, [onRampPurchase === null || onRampPurchase === void 0 ? void 0 : onRampPurchase.provider, MoonPayEmbed]);
-    useEffect(() => {
-        let timeoutId;
-        if ((onRampPurchase === null || onRampPurchase === void 0 ? void 0 : onRampPurchase.status) && ['CANCELLED', 'FINISHED'].includes(onRampPurchase.status)) {
-            timeoutId = setTimeout(() => {
-                setStep(STEPS[onRampPurchase.status]);
-            }, 5000);
-        }
-        return () => clearTimeout(timeoutId);
-    }, [onRampPurchase === null || onRampPurchase === void 0 ? void 0 : onRampPurchase.status]);
-    return _jsx(Container, { "$wide": true, children: onRampEmbed });
-};
-const Container = styled(StepContainer) `
-  flex: 1;
-`;

package/dist/modal/components/AddFunds/AddFundsDone.js

@@ -1,26 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Heading, HeroIcon, InnerStepContainer, StepContainer } from '../common.js';
-import { useModalStore, useThemeStore } from '../../stores/index.js';
-import { useMemo } from 'react';
-import { CpslButton, CpslText } from '@getpara/react-components';
-import { getAddFundsStep } from '../../utils/steps.js';
-export const AddFundsDone = ({ isSuccess, onClose }) => {
-    const hideWallets = useThemeStore(state => state.hideWallets);
-    const setStep = useModalStore(state => state.setStep);
-    const onRampPurchase = useModalStore(state => state.onRampPurchase);
-    const accountAddFundTab = useModalStore(state => state.accountAddFundTab);
-    const formatter = useMemo(() => {
-        return new Intl.NumberFormat('en-US', {
-            style: 'currency',
-            currency: (onRampPurchase === null || onRampPurchase === void 0 ? void 0 : onRampPurchase.fiat) || 'USD',
-        });
-    }, [onRampPurchase === null || onRampPurchase === void 0 ? void 0 : onRampPurchase.fiat]);
-    const heading = isSuccess ? 'Transaction Successful' : 'Something Went Wrong';
-    const text = isSuccess
-        ? `${formatter.format(parseFloat(onRampPurchase === null || onRampPurchase === void 0 ? void 0 : onRampPurchase.fiatQuantity))} is now available in your ${hideWallets ? 'account' : 'wallet'}.`
-        : `No funds were added to your ${hideWallets ? 'account' : 'wallet'}.`;
-    const buttonText = isSuccess ? 'Done' : 'Try Again';
-    return (_jsxs(StepContainer, { children: [_jsx(HeroIcon, { icon: "checkCircleFilled" }), _jsxs(InnerStepContainer, { children: [_jsx(Heading, { variant: "headingS", weight: "bold", children: heading }), _jsx(CpslText, { variant: "bodyS", color: "secondary", children: text })] }), _jsx(CpslButton, { fullWidth: true, onClick: () => {
-                    isSuccess ? onClose() : setStep(getAddFundsStep(accountAddFundTab));
-                }, children: buttonText })] }));
-};

package/dist/modal/components/AddFunds/MoonPayEmbed.js

@@ -1,2 +0,0 @@
-import { MoonPayEmbed } from '@getpara/react-common';
-export default MoonPayEmbed;

package/dist/modal/components/AddFunds/index.js

@@ -1,3 +0,0 @@
-export * from './AddFunds.js';
-export * from './AddFundsAwaiting.js';
-export * from './AddFundsDone.js';

package/dist/modal/components/AuthInput/AuthInput.js

@@ -1,221 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CpslButton, CpslIcon, CpslInput, CpslSelect, CpslSelectItem, CpslSpinner, CpslText, } from '@getpara/react-components';
-import { useRef, useState } from 'react';
-import styled from 'styled-components';
-import countryCodes from './countryCodes.js';
-import { useModalStore, useUserInfoStore } from '../../stores/index.js';
-import { EMAIL_REGEX, MOBILE_SIZE } from '../../constants/constants.js';
-import { useDropdownPosition } from './hooks/useDropdownPosition.js';
-import { ModalStep } from '../../utils/steps.js';
-import { defaultPhoneMask, phoneMasks } from './phoneMasks.js';
-import { AuthMethod } from '@getpara/web-sdk';
-import { useInternalClient } from '../../../provider/hooks/utils/useInternalClient.js';
-const DEFAULT_COUNTRY = { label: 'United States', value: '+1', selectedLabel: 'US', icon: 'US' };
-export const AuthInput = ({ disableEmailLogin, disablePhoneLogin }) => {
-    var _a;
-    const inputRef = useRef(null);
-    const { dropdownMaxHeight, dropdownWidth } = useDropdownPosition(inputRef);
-    const para = useInternalClient();
-    const setAuthInfo = useUserInfoStore(state => state.setAuthInfo);
-    const authInfo = useUserInfoStore(state => state.getAuthInfo());
-    const setFlow = useModalStore(state => state.setFlow);
-    const setStep = useModalStore(state => state.setStep);
-    const setSupportedAuthMethods = useModalStore(state => state.setSupportedAuthMethods);
-    const setBiometricLocationHints = useModalStore(state => state.setBiometricLocationHints);
-    const [countryCode, setCountryCode] = useState(((authInfo === null || authInfo === void 0 ? void 0 : authInfo.authType) === 'phone' ? authInfo.auth.countryCode : '+1'));
-    const [identifier, setIdentifier] = useState((() => {
-        if (!authInfo || ['telegramUserId', 'farcasterUsername'].includes(authInfo.authType)) {
-            return '';
-        }
-        if (authInfo.authType !== 'phone') {
-            return authInfo.identifier;
-        }
-        return authInfo.auth.phone;
-    })());
-    const [identifierType, setIdentifierType] = useState(authInfo && (authInfo.authType === 'email' || authInfo.authType === 'phone') ? authInfo.authType : undefined);
-    const [matchedCountryCode, setMatchedCountryCode] = useState(DEFAULT_COUNTRY);
-    const [isLoggingIn, setIsLoggingIn] = useState(false);
-    const [error, setError] = useState('');
-    const [search, setSearch] = useState('');
-    const isEmail = identifierType === 'email';
-    const isPhone = identifierType === 'phone';
-    const isUnknown = !identifierType;
-    const filteredCountryCodes = search
-        ? countryCodes.filter(cc => cc.selectedLabel.toLowerCase().includes(search.toLowerCase()) ||
-            cc.label.toLowerCase().includes(search.toLowerCase()) ||
-            cc.value.toLowerCase().includes(search.toLowerCase()))
-        : countryCodes;
-    const handleSearchInput = (ev) => {
-        setSearch(ev.detail);
-    };
-    const handleIdentifierInput = (ev) => {
-        const newIdentifier = ev.detail.value;
-        let isNewPhone = false, isNewEmail = false;
-        if (!disablePhoneLogin) {
-            const countryCodeInputMatch = countryCodes.find(cc => cc.value === newIdentifier);
-            if (countryCodeInputMatch) {
-                setCountryCode(countryCodeInputMatch.value);
-                setMatchedCountryCode(countryCodeInputMatch);
-                setIdentifierType('phone');
-                setIdentifier('');
-                return;
-            }
-            isNewPhone = !isEmail && isPhone ? /\d+$/.test(newIdentifier) : /\d\d\d+$/.test(newIdentifier);
-        }
-        if (!disableEmailLogin) {
-            isNewEmail = /\D.*$/.test(newIdentifier);
-        }
-        setIdentifierType(isNewEmail ? 'email' : isNewPhone ? 'phone' : undefined);
-        setIdentifier(newIdentifier);
-    };
-    const handleCountryCodeInput = (ev) => {
-        const matchedCountryCode = countryCodes.find(code => code.selectedLabel === ev.detail);
-        setCountryCode(matchedCountryCode.value);
-        setMatchedCountryCode(matchedCountryCode);
-    };
-    const login = () => __awaiter(void 0, void 0, void 0, function* () {
-        setError('');
-        if (isUnknown) {
-            setError('Please enter a valid email or phone number!');
-            return;
-        }
-        let auth;
-        if (isEmail) {
-            if (!EMAIL_REGEX.test(identifier)) {
-                setError('Please enter a valid email!');
-                return;
-            }
-            // Logout to ensure cleared Capsule state but preserve pregen wallets
-            // TODO: migrate to hook once we force the use of the CapsuleProvider
-            yield para.logout();
-            auth = { email: identifier };
-            setAuthInfo(auth);
-            const userExists = yield para.checkIfUserExists({ email: identifier });
-            if (userExists) {
-                const supportedAuthMethods = yield para.initiateUserLoginV2(auth);
-                const biometricLocationHints = supportedAuthMethods.has(AuthMethod.PASSKEY)
-                    ? yield para.getUserBiometricLocationHints()
-                    : [];
-                setFlow('login');
-                setStep(ModalStep.BIOMETRIC_LOGIN);
-                setSupportedAuthMethods(supportedAuthMethods);
-                setBiometricLocationHints(biometricLocationHints);
-                return;
-            }
-            // TODO: migrate to hook once we force the use of the CapsuleProvider
-            yield para.createUser(auth);
-            setFlow('signUp');
-            setStep(ModalStep.VERIFICATIONS);
-            return;
-        }
-        if (isPhone) {
-            // Logout to ensure cleared Capsule state but preserve pregen wallets
-            // TODO: migrate to hook once we force the use of the CapsuleProvider
-            yield para.logout();
-            let userExists = false;
-            try {
-                userExists = yield para.checkIfUserExistsByPhone({ phone: identifier, countryCode });
-            }
-            catch (error) {
-                setError('Please enter a valid phone number!');
-                return;
-            }
-            auth = { phone: identifier, countryCode };
-            setAuthInfo(auth);
-            if (userExists) {
-                // TODO: migrate to hook once we force the use of the CapsuleProvider
-                const supportedAuthMethods = yield para.initiateUserLoginV2(auth);
-                const biometricLocationHints = supportedAuthMethods.has(AuthMethod.PASSKEY)
-                    ? yield para.getUserBiometricLocationHints()
-                    : [];
-                setFlow('login');
-                setStep(ModalStep.BIOMETRIC_LOGIN);
-                setSupportedAuthMethods(supportedAuthMethods);
-                setBiometricLocationHints(biometricLocationHints);
-                return;
-            }
-            // TODO: migrate to hook once we force the use of the CapsuleProvider
-            yield para.createUserByPhone(auth);
-            setFlow('signUp');
-            setStep(ModalStep.VERIFICATIONS);
-            return;
-        }
-    });
-    const handleSubmit = () => __awaiter(void 0, void 0, void 0, function* () {
-        setIsLoggingIn(true);
-        yield login();
-        setIsLoggingIn(false);
-    });
-    if (disableEmailLogin && disablePhoneLogin) {
-        return null;
-    }
-    return (_jsx("form", { onSubmit: (e) => __awaiter(void 0, void 0, void 0, function* () {
-            e.preventDefault();
-            yield handleSubmit();
-        }), children: _jsxs(StyledInput, { ref: inputRef, id: "authInput", placeholder: isEmail || disablePhoneLogin
-                ? 'Enter email'
-                : isPhone || disableEmailLogin
-                    ? 'Enter phone'
-                    : 'Enter email or phone', onCpslInput: handleIdentifierInput, value: identifier, errorText: error, autofocus: true, inputMode: "email", onKeyDown: (e) => __awaiter(void 0, void 0, void 0, function* () { return e.key === 'Enter' && handleSubmit(); }), contrastText: true, isPhone: isPhone, mask: identifierType === 'phone' ? ((_a = phoneMasks[matchedCountryCode.selectedLabel]) !== null && _a !== void 0 ? _a : defaultPhoneMask) : undefined, enterkeyhint: "go", noAutoDisable: true, disabled: isLoggingIn, "data-testid": "auth-input", children: [_jsxs(IconContainer, { slot: "start", children: [!disableEmailLogin && (isUnknown || isEmail) && _jsx(CpslIcon, { "aria-label": "email", icon: "mail" }), !disablePhoneLogin && isUnknown && _jsx(CpslIcon, { "aria-label": "phone", icon: "phone" }), isPhone && (_jsxs(CountryCodeSelect, { selectedValue: matchedCountryCode.selectedLabel, onCpslSelectValueChange: handleCountryCodeInput, showFormattedSelectedItem: true, autoWidth: true, dropdownMaxHeight: dropdownMaxHeight, anchorElId: "authInput", "$width": dropdownWidth, showSearch: true, searchPlaceholder: "Search Countries", onCpslSearchChange: handleSearchInput, "data-testid": "country-code-select", children: [matchedCountryCode && (_jsxs(SelectedItem, { slot: "selected-item", children: [_jsx(CpslText, { children: matchedCountryCode.selectedLabel }), _jsx(CpslText, { children: matchedCountryCode.value })] })), filteredCountryCodes.map(cc => (_jsxs(StyledSelectItem, { slot: "items", value: cc.selectedLabel, children: [_jsx(CpslText, { children: cc.label }), _jsx(CpslText, { children: cc.value })] }, cc.selectedLabel)))] }))] }), identifier && (_jsx(CpslButton, { slot: "end", size: "small", fullWidth: true, disabled: isLoggingIn, onClick: handleSubmit, children: isLoggingIn ? _jsx(CpslSpinner, { size: 16 }) : _jsx(CpslIcon, { icon: "arrowNarrow" }) }))] }, 'email') }));
-};
-const IconContainer = styled.div `
-  height: 100%;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding-right: 12px;
-  border-right: 1px solid var(--cpsl-color-background-16);
-
-  & cpsl-icon {
-    --icon-color: var(--cpsl-color-contrast);
-  }
-`;
-const CountryCodeSelect = styled(CpslSelect) `
-  --container-height: 100%;
-  --container-padding-start: 0px;
-  --container-padding-end: 0px;
-  --container-border-width: 0px;
-  --container-gap: 4px;
-  --container-background-color: transparent;
-  --container-box-shadow: none;
-
-  &::part(dropdown) {
-    width: ${({ $width }) => `${$width - 2}px`};
-  }
-
-  &::part(popover) {
-    @media (max-width: ${MOBILE_SIZE}px) {
-      top: unset !important;
-      bottom: 16px;
-    }
-
-    cpsl-auth-modal.force-mobile-media & {
-      top: unset !important;
-      bottom: 16px;
-    }
-  }
-`;
-const StyledSelectItem = styled(CpslSelectItem) `
-  &::part(inner-container) {
-    justify-content: space-between;
-  }
-`;
-const SelectedItem = styled.div `
-  display: flex;
-  gap: 4px;
-  align-items: center;
-`;
-const StyledInput = styled(CpslInput) `
-  --container-background-color: var(--cpsl-color-background-8);
-  --input-background-color: var(--cpsl-color-background-8);
-  --container-padding-end: 8px;
-`;

package/dist/modal/components/AuthInput/countryCodes.js

@@ -1,40 +0,0 @@
-import { getCountries, getCountryCallingCode } from 'libphonenumber-js';
-const excludedCountries = [
-    'AC',
-    'CG',
-    'CI',
-    'CV',
-    'GF',
-    'GP',
-    'MF',
-    'NC',
-    'PM',
-    'RE',
-    'SD',
-    'SH',
-    'SJ',
-    'TA',
-    'VA',
-    'WF',
-    'XK',
-    'YT',
-];
-const generateCountryCodes = () => {
-    const countries = getCountries();
-    const countryList = countries
-        .filter(country => !excludedCountries.includes(country))
-        .map(country => {
-        const countryCode = getCountryCallingCode(country);
-        const countryName = new Intl.DisplayNames(['en'], { type: 'region' }).of(country);
-        return {
-            label: countryName,
-            value: `+${countryCode}`,
-            selectedLabel: country,
-            icon: country,
-        };
-    })
-        .sort((a, b) => a.label.localeCompare(b.label));
-    return countryList;
-};
-const countryCodes = generateCountryCodes();
-export default countryCodes;

package/dist/modal/components/AuthInput/hooks/useDropdownPosition.js

@@ -1,23 +0,0 @@
-import { useEffect, useState } from 'react';
-export const useDropdownPosition = (inputRef) => {
-    const [dropdownMaxHeight, setDropdownMaxHeight] = useState();
-    const [dropdownWidth, setDropdownWidth] = useState();
-    const [mobileAnchor, setMobileAnchor] = useState();
-    const resize = () => {
-        var _a, _b, _c;
-        const newMaxHeight = Math.max(window.innerHeight - ((_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().bottom) - 20, window.innerHeight * 0.25);
-        setDropdownMaxHeight(newMaxHeight);
-        setDropdownWidth((_b = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width);
-        setMobileAnchor((_c = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().height);
-    };
-    if (inputRef.current && !dropdownMaxHeight) {
-        resize();
-    }
-    useEffect(() => {
-        window.addEventListener('resize', resize);
-        return () => {
-            window.removeEventListener('resize', resize);
-        };
-    }, []);
-    return { dropdownMaxHeight, dropdownWidth, mobileAnchor, resize };
-};