@getpara/react-sdk 1.2.0 → 1.3.0

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 };
-};

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

@@ -1,247 +0,0 @@
-export const defaultPhoneMask = '#################';
-export const phoneMasks = {
-    AF: '### ### ####',
-    AX: '## ### ####',
-    AL: '(###) ### ###',
-    DZ: '(###) ### ###',
-    AS: '(###) ###-####',
-    AD: '### ###',
-    AO: '(###) ### ###',
-    AI: '(###) ###-####',
-    AG: '(###) ###-####',
-    AR: '(###) ###-####',
-    AM: '## ### ###',
-    AW: '### ####',
-    AU: '# #### ####',
-    AT: '(###) ### ####',
-    AZ: '(###) ### ## ##',
-    BS: '(###) ###-####',
-    BH: '#### ####',
-    BD: '# ### ###',
-    BB: '(###) ###-####',
-    BY: '(##) ###-##-##',
-    BE: '(###) ### ###',
-    BZ: '###-####',
-    BJ: '##-##-####',
-    BM: '(###) ###-####',
-    BT: '# ### ###',
-    BO: '# ### ####',
-    BA: '## ###-###',
-    BW: '## ### ###',
-    BR: '(##) ####-####',
-    IO: '### ####',
-    BN: '### ####',
-    BG: '(###) ### ###',
-    BF: '## ## ####',
-    BI: '## ## ####',
-    KH: '## ### ###',
-    CM: '#### ####',
-    CA: '(###) ###-####',
-    CV: '(###) ## ##',
-    KY: '(###) ###-####',
-    CF: '## ## ####',
-    TD: '## ## ## ##',
-    CL: '# #### ####',
-    CN: '(###) #### ####',
-    CX: '# ## ## ##',
-    CC: '# ## ## ##',
-    CO: '(###) ### ####',
-    KM: '## ## ## ##',
-    CG: '## ### ####',
-    CK: '## ###',
-    CR: '#### ####',
-    HR: '## #### ###',
-    CU: '# ### ####',
-    CY: '## ### ###',
-    CZ: '### ### ###',
-    CD: '### ### ###',
-    DK: '## ## ## ##',
-    DJ: '## ## ## ##',
-    DM: '(###) ###-####',
-    DO: '(###) ###-####',
-    EC: '## ### ####',
-    EG: '# #### ####',
-    SV: '#### ####',
-    GQ: '## ### ####',
-    ER: '# ### ###',
-    EE: '#### ####',
-    SZ: '#### ####',
-    ET: '## ### ####',
-    FK: '#####',
-    FO: '######',
-    FJ: '### ####',
-    FI: '## ### ####',
-    FR: '## ## ## ## ##',
-    GF: '### ## ## ##',
-    PF: '## ## ##',
-    GA: '# ## ## ##',
-    GM: '### ####',
-    GE: '(###) ## ## ##',
-    DE: '(###) ### ####',
-    GH: '## ### ####',
-    GI: '### #####',
-    GR: '(###) ### ####',
-    GL: '## ## ##',
-    GD: '(###) ###-####',
-    GP: '### ## ## ##',
-    GU: '(###) ###-####',
-    GT: '# ### ####',
-    GG: '(####) ### ###',
-    GN: '## ### ###',
-    GW: '# #######',
-    GY: '### ####',
-    HT: '## ## ####',
-    VA: '### ####',
-    HN: '####-####',
-    HK: '#### ####',
-    HU: '(##) ### ####',
-    IS: '### ####',
-    IN: '####### ###',
-    ID: '(###) ###-####',
-    IR: '(###) ### ####',
-    IQ: '(###) ### ####',
-    IE: '(###) ### ###',
-    IM: '(####) ### ###',
-    IL: '#-###-####',
-    IT: '(###) #### ###',
-    CI: '## ## ## ##',
-    JM: '(###) ###-####',
-    JP: '(###) ###-####',
-    JE: '(####) ### ###',
-    JO: '# #### ####',
-    KZ: '(###) ###-##-##',
-    KE: '### ######',
-    KI: '## ###',
-    KP: '###-###-####',
-    KR: '(###) ####-####',
-    XK: '## ### ###',
-    KW: '#### ####',
-    KG: '(###) ###-###',
-    LA: '## ## ####',
-    LV: '## ### ###',
-    LB: '## ### ###',
-    LS: '# ### ####',
-    LR: '## ### ###',
-    LY: '##-#######',
-    LI: '(###) ###-####',
-    LT: '(###) ## ###',
-    LU: '### ### ###',
-    MO: '#### ####',
-    MG: '## ## ### ##',
-    MW: '# #### ####',
-    MY: '(###) ###-###',
-    MV: '###-####',
-    ML: '## ## ####',
-    MT: '#### ####',
-    MH: '###-####',
-    MQ: '### ## ## ##',
-    MR: '## ## ####',
-    MU: '### ####',
-    YT: '### ## ## ##',
-    MX: '(###) ###-####',
-    FM: '### ####',
-    MD: '#### ####',
-    MC: '(###) ###-###',
-    MN: '## ## ####',
-    ME: '## ### ###',
-    MS: '(###) ###-####',
-    MA: '#-####-####',
-    MZ: '## ### ####',
-    MM: '# ### ####',
-    NA: '## ### ####',
-    NR: '### ####',
-    NP: '#-######',
-    NL: '## ### ####',
-    NC: '##.##.##',
-    NZ: '## ### ###',
-    NI: '#### ####',
-    NE: '## ## ## ##',
-    NG: '## ### ####',
-    NU: '####',
-    NF: '### ###',
-    MK: '## ### ###',
-    MP: '(###) ###-####',
-    NO: '### ## ###',
-    OM: '#### ####',
-    PK: '(###) #######',
-    PW: '### ####',
-    PS: '## ### ####',
-    PA: '####-####',
-    PG: '(###) ## ###',
-    PY: '## ### ####',
-    PE: '(###) ### ###',
-    PH: '(###) ###-####',
-    PN: '### ####',
-    PL: '### ### ###',
-    PT: '## ### ####',
-    PR: '(###) ###-####',
-    QA: '#### ####',
-    RE: '##### ####',
-    RO: '## ### ####',
-    RU: '(###) ###-##-##',
-    RW: '(###) ### ###',
-    BL: '### ## ## ##',
-    SH: '####',
-    KN: '(###) ###-####',
-    LC: '(###) ###-####',
-    MF: '### ## ## ##',
-    PM: '## ## ##',
-    VC: '(###) ###-####',
-    WS: '####',
-    SM: '(####) ######',
-    ST: '## ####',
-    SA: '# ### ####',
-    SN: '## ### ####',
-    RS: '## ### ####',
-    SC: '# ### ###',
-    SL: '## ######',
-    SG: '#### ####',
-    SX: '(###) ###-####',
-    SK: '(###) ### ###',
-    SI: '## ### ###',
-    SB: '### ####',
-    SO: '# ### ###',
-    ZA: '## ### ####',
-    GS: '####',
-    SS: '# ### ####',
-    ES: '### ### ###',
-    LK: '## ### ####',
-    SD: '## ### ####',
-    SR: '###-####',
-    SJ: '### ## ###',
-    SE: '## ### ####',
-    CH: '## ### ####',
-    SY: '## #### ###',
-    TW: '#### ####',
-    TJ: '## ### ####',
-    TZ: '## ### ####',
-    TH: '# #### ####',
-    TL: '#### ####',
-    TG: '## ## ## ##',
-    TK: '####',
-    TO: '####',
-    TT: '(###) ###-####',
-    TN: '## ### ###',
-    TR: '(###) ### ####',
-    TM: '# ### ###',
-    TC: '(###) ###-####',
-    TV: '####',
-    UG: '## ### ####',
-    UA: '## ### ####',
-    AE: '# ### ####',
-    GB: '#### ### ###',
-    US: '(###) ###-####',
-    UM: '(###) ###-####',
-    UY: '# ### ## ##',
-    UZ: '## ### ####',
-    VU: '## ####',
-    VE: '###-###-####',
-    VN: '## #### ###',
-    VG: '(###) ###-####',
-    VI: '(###) ###-####',
-    WF: '## ####',
-    EH: '###-###-###',
-    YE: '# ### ###',
-    ZM: '## ### ####',
-    ZW: '# #######',
-};

package/dist/modal/components/AuthMainStep/AuthMainStep.js

@@ -1,21 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from 'styled-components';
-import { useThemeStore } from '../../stores/theme/useThemeStore.js';
-import { AuthMainStepContent } from './AuthMainStepContent.js';
-import { CenteredText } from '../common.js';
-export const AuthMainStep = ({ oAuthMethods, disableEmailLogin, disablePhoneLogin }) => {
-    const logo = useThemeStore(state => state.getLogo());
-    const appName = useThemeStore(state => state.appName);
-    const authLayout = useThemeStore(state => state.authLayout);
-    const embeddedModal = useThemeStore(state => state.embeddedModal);
-    const firstLayoutType = authLayout[0].split(':')[0];
-    const heading = firstLayoutType === 'AUTH' ? 'Sign Up or Login' : 'Connect Wallet';
-    return (_jsxs(_Fragment, { children: [logo && _jsx(Logo, { src: logo, alt: `${appName ? `${appName} -` : ''}logo` }), !embeddedModal && (_jsx(CenteredText, { variant: logo ? 'bodyM' : 'headingS', weight: "semiBold", children: heading })), _jsx(AuthMainStepContent, { disableEmailLogin: disableEmailLogin, disablePhoneLogin: disablePhoneLogin, oAuthMethods: oAuthMethods })] }));
-};
-const Logo = styled.img `
-  height: 100px;
-  max-width: 260px;
-  object-fit: contain;
-  box-sizing: content-box;
-  align-self: center;
-`;

package/dist/modal/components/AuthMainStep/AuthMainStepContent.js

@@ -1,89 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Fragment, useMemo } from 'react';
-import { CpslButton, CpslDivider, CpslIconGroup } from '@getpara/react-components';
-import styled from 'styled-components';
-import { useExternalWallets } from '../../providers/ExternalWalletContext.js';
-import { ExternalWallets } from '../ExternalWallets/ExternalWallets.js';
-import { useModalStore, useThemeStore } from '../../stores/index.js';
-import { ModalStep } from '../../utils/steps.js';
-import { AuthLayout } from '../../types/modalProps.js';
-import { brandedOAuthLogos, oAuthLogos } from '../../constants/oAuthLogos.js';
-import { AuthOptions } from '../AuthOptions/AuthOptions.js';
-export const AuthMainStepContent = ({ oAuthMethods, disableEmailLogin, disablePhoneLogin }) => {
-    const { wallets } = useExternalWallets();
-    const authLayout = useThemeStore(state => state.authLayout);
-    const setStep = useModalStore(state => state.setStep);
-    const oAuthLogoVariant = useThemeStore(state => state.oAuthLogoVariant);
-    const isDark = useThemeStore(state => state.isDark);
-    const useBrandedLogos = oAuthLogoVariant === 'default';
-    const useDarkLogos = useBrandedLogos ? isDark : oAuthLogoVariant !== 'dark';
-    const handleCondensedAuthClick = () => {
-        setStep(ModalStep.AUTH_MORE);
-    };
-    const handleCondensedExternalClick = () => {
-        setStep(ModalStep.EX_WALLET_MORE);
-    };
-    const Content = useMemo(() => {
-        const methods = [];
-        authLayout.forEach(layout => {
-            switch (layout) {
-                case AuthLayout.AUTH_FULL: {
-                    methods.push([
-                        _jsx(AuthOptions, { oAuthMethods: oAuthMethods, disableEmailLogin: disableEmailLogin, disablePhoneLogin: disablePhoneLogin }, "authFull"),
-                        layout,
-                    ]);
-                    break;
-                }
-                case AuthLayout.AUTH_CONDENSED: {
-                    const icons = [];
-                    oAuthMethods === null || oAuthMethods === void 0 ? void 0 : oAuthMethods.forEach(method => icons.push(useBrandedLogos ? brandedOAuthLogos[method] : oAuthLogos[method]));
-                    methods.push([
-                        _jsxs(CondensedButton, { onClick: handleCondensedAuthClick, variant: "tertiary", fullWidth: true, children: [_jsx(IconGroupSpacer, { slot: "start", icons: [], "$isDark": useDarkLogos }), "Sign Up or Login", _jsx(StyledIconGroup, { slot: "end", icons: icons.splice(0, 3), "$isDark": useDarkLogos })] }, "authCondensed"),
-                        layout,
-                    ]);
-                    break;
-                }
-                case AuthLayout.EXTERNAL_FULL: {
-                    if (!!wallets.length) {
-                        methods.push([_jsx(ExternalWallets, {}, "externalWallets"), layout]);
-                    }
-                    break;
-                }
-                case AuthLayout.EXTERNAL_CONDENSED: {
-                    const icons = [];
-                    wallets === null || wallets === void 0 ? void 0 : wallets.forEach(wallet => icons.push(wallet.iconUrl));
-                    methods.push([
-                        _jsxs(CondensedButton, { onClick: handleCondensedExternalClick, variant: "tertiary", fullWidth: true, children: [_jsx(IconGroupSpacer, { slot: "start", icons: [], "$isDark": useDarkLogos }), "Connect Wallet", _jsx(StyledIconGroup, { slot: "end", icons: icons.splice(0, 3), "$isDark": useDarkLogos })] }, "authCondensed"),
-                        layout,
-                    ]);
-                    break;
-                }
-                default: {
-                    break;
-                }
-            }
-        });
-        return (_jsx(_Fragment, { children: methods.map(([reactNode, key], index) => (_jsxs(Fragment, { children: [reactNode, methods.length > 1 && index < methods.length - 1 && _jsx(CpslDivider, { children: "or" }, "or")] }, key))) }));
-    }, [oAuthMethods, disableEmailLogin, disablePhoneLogin, wallets, authLayout]);
-    return _jsx(Container, { "data-testid": "main-auth-step-content", children: Content });
-};
-const Container = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-`;
-const StyledIconGroup = styled(CpslIconGroup) `
-  --icon-item-color: ${({ $isDark }) => ($isDark ? 'white' : 'black')};
-  flex: 1;
-  justify-content: flex-end;
-`;
-const IconGroupSpacer = styled(StyledIconGroup) `
-  visibility: hidden;
-`;
-const CondensedButton = styled(CpslButton) `
-  --button-justify-content: space-between;
-
-  &::part(button-native) {
-    max-height: 50px;
-  }
-`;

package/dist/modal/components/AuthOptions/AuthOptions.js

@@ -1,28 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import styled from 'styled-components';
-import { OAuth } from '../OAuth/OAuth.js';
-import { AuthInput } from '../AuthInput/AuthInput.js';
-import { useExternalWallets } from '../../providers/ExternalWalletContext.js';
-import { useModalStore } from '../../stores/index.js';
-import { ModalStep } from '../../utils/steps.js';
-export const AuthOptions = ({ oAuthMethods, disableEmailLogin, disablePhoneLogin }) => {
-    const { wallets } = useExternalWallets();
-    const showAllOAuth = useModalStore(state => state.step === ModalStep.AUTH_MORE);
-    const Content = useMemo(() => {
-        const Methods = [];
-        if (!!(oAuthMethods === null || oAuthMethods === void 0 ? void 0 : oAuthMethods.length)) {
-            Methods.push(_jsx(OAuth, { methods: oAuthMethods }, "oAuth"));
-        }
-        if (!disableEmailLogin || !disablePhoneLogin) {
-            Methods.push(_jsx(AuthInput, { disableEmailLogin: disableEmailLogin, disablePhoneLogin: disablePhoneLogin }, "input"));
-        }
-        return _jsx(_Fragment, { children: Methods });
-    }, [showAllOAuth, oAuthMethods, disableEmailLogin, disablePhoneLogin, wallets]);
-    return _jsx(Container, { children: Content });
-};
-const Container = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-`;

package/dist/modal/components/AwaitingBiometricsStep/AwaitingBiometricsStep.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useModalStore } from '../../stores/index.js';
-import { Waiting } from '../Waiting/Waiting.js';
-export const AwaitingBiometricsStep = () => {
-    const isLogin = useModalStore(state => state.isLogin());
-    return (_jsx(Waiting, { heading: isLogin ? 'Waiting for Passkey' : 'Creating Passkey', subheading: "Follow the prompts presented by your browser." }));
-};