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

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." }));
-};

package/dist/modal/components/AwaitingOAuthStep/AwaitingOAuthStep.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Waiting } from '../Waiting/Waiting.js';
-export const AwaitingOAuthStep = () => {
-    return _jsx(Waiting, { heading: "Complete Login", subheading: "Follow the prompts presented by your browser." });
-};

package/dist/modal/components/AwaitingPasswordStep/AwaitingPasswordStep.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 AwaitingPasswordStep = () => {
-    const isLogin = useModalStore(state => state.isLogin());
-    return (_jsx(Waiting, { heading: isLogin ? 'Waiting for Password' : 'Creating Password', subheading: "Follow the prompts presented by your browser." }));
-};

package/dist/modal/components/AwaitingWalletCreationStep/AwaitingWalletCreationStep.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CpslIcon, CpslInfoBox, CpslText } from '@getpara/react-components';
-import { InfoBoxContent, InfoBoxHeader, StepContainer } from '../common.js';
-import { useEffect, useRef, useState } from 'react';
-import { Waiting } from '../Waiting/Waiting.js';
-import { useThemeStore } from '../../stores/index.js';
-export const AwaitingWalletCreationStep = () => {
-    const hideWallets = useThemeStore(state => state.hideWallets);
-    const [showInfoBox, setShowInfoBox] = useState(false);
-    const showInfoBoxTimeout = useRef();
-    useEffect(() => {
-        showInfoBoxTimeout.current = window.setTimeout(() => {
-            setShowInfoBox(true);
-        }, 4000);
-        return () => clearTimeout(showInfoBoxTimeout.current);
-    }, []);
-    return (_jsxs(StepContainer, { "$wide": true, children: [_jsx(Waiting, { heading: hideWallets ? 'Creating Your Account' : 'Creating Your Wallet', subheading: "This should only take a couple of seconds." }), showInfoBox && (_jsx(CpslInfoBox, { children: _jsxs(InfoBoxContent, { children: [_jsxs(InfoBoxHeader, { children: [_jsx(CpslIcon, { icon: "clock" }), _jsx(CpslText, { weight: "medium", children: "Hang on" })] }), _jsxs(CpslText, { variant: "bodyS", weight: "medium", color: "secondary", children: ["Creating your ", hideWallets ? 'account' : 'wallet', " is taking a little longer than expected, but we're working on it!"] })] }) }))] }));
-};

package/dist/modal/components/BiometricCreationStep/BiometricCreationStep.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { CpslButton, CpslDivider, CpslIcon, CpslQrCode, CpslSpinner, CpslText } from '@getpara/react-components';
-import { useModalStore, useUserInfoStore } from '../../stores/index.js';
-import { InnerStepContainer, StepContainer, Heading, QRContainer } from '../common.js';
-import { isPasskeySupported } from '../../utils/isPasskeySupported.js';
-import { useCopyToClipboard, UserIdentifier } from '@getpara/react-common';
-export const BiometricCreationStep = ({ handlePasswordClick, handlePasskeyClick, }) => {
-    const webAuthURLForCreate = useModalStore(state => state.webAuthURLForCreate);
-    const iFrameUrl = useModalStore(state => state.iFrameUrl);
-    const authInfo = useUserInfoStore(state => state.getAuthInfo());
-    const [isCopied, copy] = useCopyToClipboard();
-    const handleCopy = () => {
-        copy(webAuthURLForCreate);
-    };
-    const isBoth = !!webAuthURLForCreate && !!iFrameUrl;
-    return (_jsxs(StepContainer, { "$wide": true, children: [_jsxs(InnerStepContainer, { children: [_jsx(Heading, { variant: "headingS", weight: "bold", children: isBoth ? 'Secure Your Account' : 'Create Passkey' }), _jsx(UserIdentifier, Object.assign({}, authInfo)), _jsx(CpslText, { variant: "bodyS", color: "secondary", weight: "medium", children: isBoth ? 'Choose a password or set up a passkey' : 'Your Passkey keeps your account safe.' })] }), _jsxs(InnerStepContainer, { children: [isPasskeySupported() ? (_jsxs(CpslButton, { fullWidth: true, onClick: handlePasskeyClick, children: [_jsx(CpslIcon, { slot: "start", icon: "key" }), isBoth ? 'Create Passkey' : 'Create'] })) : (_jsxs(_Fragment, { children: [_jsx(CpslText, { weight: "semiBold", children: "Scan with your mobile device" }), _jsx(QRContainer, { children: !webAuthURLForCreate ? _jsx(CpslSpinner, { size: 100 }) : _jsx(CpslQrCode, { url: webAuthURLForCreate }) }), _jsxs(CpslButton, { size: "small", variant: "ghost", onClick: handleCopy, children: [_jsx(CpslIcon, { slot: "start", icon: isCopied ? 'check' : 'copy' }), isCopied ? 'Copied' : 'Copy Link'] })] })), isBoth && (_jsxs(_Fragment, { children: [_jsx(CpslDivider, { children: "or" }), _jsxs(CpslButton, { fullWidth: true, onClick: handlePasswordClick, children: [_jsx(CpslIcon, { slot: "start", icon: "passcode" }), "Choose Password"] })] }))] })] }));
-};

package/dist/modal/components/BiometricLoginStep/BiometricLoginStep.js

@@ -1,131 +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 { CpslButton, CpslDivider, CpslIcon } from '@getpara/react-components';
-import { useEffect, useMemo, useState } from 'react';
-import { useModalStore, useUserInfoStore } from '../../stores/index.js';
-import { ModalStep } from '../../utils/steps.js';
-import { Heading, StepContainer, InnerStepContainer } from '../common.js';
-import { openPopup } from '../../utils/openPopup.js';
-import styled from 'styled-components';
-import { AuthMethod, getPublicKeyHex } from '@getpara/web-sdk';
-import { isPasskeySupported } from '../../utils/isPasskeySupported.js';
-import { formatBiometricHints, KnownDevices, UserIdentifier } from '@getpara/react-common';
-import { useInternalClient } from '../../../provider/hooks/utils/useInternalClient.js';
-export const BiometricLoginStep = () => {
-    const popupWindow = useModalStore(state => state.popupWindow);
-    const supportedAuthMethods = useModalStore(state => state.supportedAuthMethods);
-    const passwordUrlForLogin = useModalStore(state => state.passwordUrlForLogin);
-    const webAuthURLForLogin = useModalStore(state => state.webAuthURLForLogin);
-    const setStep = useModalStore(state => state.setStep);
-    const setPopupWindow = useModalStore(state => state.setPopupWindow);
-    const biometricLocationHints = useModalStore(state => state.biometricLocationHints);
-    const para = useInternalClient();
-    const authInfo = useUserInfoStore(state => state.getAuthInfo());
-    const setWebAuthURLForLogin = useModalStore(state => state.setWebAuthURLForLogin);
-    const setPasswordUrlForLogin = useModalStore(state => state.setPasswordUrlForLogin);
-    const passkeysSupported = isPasskeySupported();
-    const formattedHints = useMemo(() => formatBiometricHints(biometricLocationHints), [biometricLocationHints]);
-    const setSupportedAuthMethods = useModalStore(state => state.setSupportedAuthMethods);
-    const [webAuthURLForKnownDeviceLogin, setWebAuthURLForKnownDeviceLogin] = useState();
-    useEffect(() => {
-        function setLinks() {
-            return __awaiter(this, void 0, void 0, function* () {
-                if (!(supportedAuthMethods === null || supportedAuthMethods === void 0 ? void 0 : supportedAuthMethods.size) && para.getUserId()) {
-                    const fetchedSupportedAuthMethods = yield para.supportedAuthMethods({ userId: para.getUserId() });
-                    if (fetchedSupportedAuthMethods === null || fetchedSupportedAuthMethods === void 0 ? void 0 : fetchedSupportedAuthMethods.size) {
-                        setSupportedAuthMethods(fetchedSupportedAuthMethods);
-                    }
-                    return;
-                }
-                if (!para.isEmail && !para.isPhone && !para.isFarcaster && !para.isTelegram) {
-                    return;
-                }
-                if (!para.loginEncryptionKeyPair) {
-                    return;
-                }
-                const authType = para.isEmail ? 'email' : para.isPhone ? 'phone' : para.isFarcaster ? 'farcaster' : 'telegram';
-                const res = yield para.touchSession();
-                const webAuthUrlForLogin = (supportedAuthMethods === null || supportedAuthMethods === void 0 ? void 0 : supportedAuthMethods.has) && supportedAuthMethods.has(AuthMethod.PASSKEY)
-                    ? yield para.getWebAuthURLForLogin({
-                        sessionId: res.data.sessionId,
-                        loginEncryptionPublicKey: getPublicKeyHex(para.loginEncryptionKeyPair),
-                        partnerId: res.data.partnerId,
-                        authType,
-                        displayName: authInfo.displayName,
-                        pfpUrl: authInfo.pfpUrl,
-                    })
-                    : undefined;
-                const _webAuthURLForKnownDeviceLogin = (supportedAuthMethods === null || supportedAuthMethods === void 0 ? void 0 : supportedAuthMethods.has) && supportedAuthMethods.has(AuthMethod.PASSKEY)
-                    ? yield para.getWebAuthURLForLogin({
-                        sessionId: res.data.sessionId,
-                        loginEncryptionPublicKey: getPublicKeyHex(para.loginEncryptionKeyPair),
-                        partnerId: res.data.partnerId,
-                        newDeviceSessionId: res.data.sessionLookupId,
-                        newDeviceEncryptionKey: getPublicKeyHex(para.loginEncryptionKeyPair),
-                        authType,
-                        displayName: authInfo.displayName,
-                        pfpUrl: authInfo.pfpUrl,
-                    })
-                    : undefined;
-                const passwordAuthUrlForLogin = (supportedAuthMethods === null || supportedAuthMethods === void 0 ? void 0 : supportedAuthMethods.has) && supportedAuthMethods.has(AuthMethod.PASSWORD)
-                    ? yield para.getPasswordURLForLogin({
-                        sessionId: res.data.sessionId,
-                        loginEncryptionPublicKey: getPublicKeyHex(para.loginEncryptionKeyPair),
-                        partnerId: res.data.partnerId,
-                        authType,
-                        displayName: authInfo.displayName,
-                        pfpUrl: authInfo.pfpUrl,
-                    })
-                    : undefined;
-                const shortWebAuthLoginLink = webAuthUrlForLogin ? yield para.shortenLoginLink(webAuthUrlForLogin) : undefined;
-                const shortWebAuthForKnownDeviceLoginLink = _webAuthURLForKnownDeviceLogin
-                    ? yield para.shortenLoginLink(_webAuthURLForKnownDeviceLogin)
-                    : undefined;
-                setWebAuthURLForKnownDeviceLogin(shortWebAuthForKnownDeviceLoginLink);
-                setWebAuthURLForLogin(shortWebAuthLoginLink);
-                setPasswordUrlForLogin(passwordAuthUrlForLogin);
-            });
-        }
-        setLinks();
-    }, [supportedAuthMethods, para]);
-    const handlePasskeyClick = () => {
-        if (!!popupWindow) {
-            return;
-        }
-        const loginWindow = openPopup(webAuthURLForLogin, 'ParaPasskey', 'LOGIN_PASSKEY');
-        setPopupWindow(loginWindow);
-        setStep(ModalStep.AWAITING_BIOMETRIC_LOGIN);
-    };
-    const handlePasswordClick = () => {
-        const loginWindow = openPopup(passwordUrlForLogin, 'ParaPassword', 'LOGIN_PASSWORD');
-        setPopupWindow(loginWindow);
-        setStep(ModalStep.AWAITING_PASSWORD_LOGIN);
-    };
-    function shouldShowWelcomeBack() {
-        return (!(biometricLocationHints === null || biometricLocationHints === void 0 ? void 0 : biometricLocationHints.length) ||
-            (passkeysSupported && formattedHints.isOnKnownDevice) ||
-            ((supportedAuthMethods === null || supportedAuthMethods === void 0 ? void 0 : supportedAuthMethods.has) && supportedAuthMethods.has(AuthMethod.PASSWORD)));
-    }
-    return (_jsxs(StepContainer, { "$wide": true, children: [_jsxs(InnerStepContainer, { children: [shouldShowWelcomeBack() && (_jsx(Heading, { variant: "headingS", weight: "bold", children: "Welcome back," })), _jsx(UserIdentifier, Object.assign({}, authInfo))] }), _jsxs(MainContainer, { children: [(supportedAuthMethods === null || supportedAuthMethods === void 0 ? void 0 : supportedAuthMethods.has) && supportedAuthMethods.has(AuthMethod.PASSWORD) && passwordUrlForLogin && (_jsx(PasswordOnly, { handlePasswordClick: handlePasswordClick })), (supportedAuthMethods === null || supportedAuthMethods === void 0 ? void 0 : supportedAuthMethods.has) &&
-                        supportedAuthMethods.has(AuthMethod.PASSKEY) &&
-                        webAuthURLForLogin &&
-                        webAuthURLForKnownDeviceLogin && (_jsx(BiometricOnly, { handlePasskeyClick: handlePasskeyClick, formattedHints: formattedHints, shortLoginLink: webAuthURLForKnownDeviceLogin, passkeysSupported: passkeysSupported, biometricLocationHints: biometricLocationHints }))] })] }));
-};
-const PasswordOnly = ({ handlePasswordClick }) => {
-    return (_jsx(CpslButton, { fullWidth: true, onClick: handlePasswordClick, children: "Login" }));
-};
-const BiometricOnly = ({ handlePasskeyClick, formattedHints, shortLoginLink, passkeysSupported, biometricLocationHints = [], }) => {
-    const [hasHints, isOnKnownDevice] = [biometricLocationHints.length > 0, formattedHints.isOnKnownDevice];
-    return (_jsxs(_Fragment, { children: [((hasHints && !isOnKnownDevice) || !passkeysSupported) && (_jsx(KnownDevices, { hints: formattedHints, link: shortLoginLink })), passkeysSupported && (_jsxs(_Fragment, { children: [hasHints && !isOnKnownDevice && _jsx(CpslDivider, { children: "or" }), _jsx(CpslButton, { fullWidth: true, onClick: handlePasskeyClick, children: !hasHints || isOnKnownDevice ? (_jsxs(_Fragment, { children: [_jsx(CpslIcon, { slot: "start", icon: "key" }), "Login with passkey"] })) : ('Continue anyway') })] }))] }));
-};
-const MainContainer = styled(InnerStepContainer) `
-  gap: 16px;
-`;

package/dist/modal/components/Body/AnimatedHeightWrapper.js

@@ -1,26 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { motion } from 'framer-motion';
-import { useEffect, useRef, useState } from 'react';
-import styled from 'styled-components';
-export const AnimatedHeightWrapper = ({ children, className }) => {
-    const containerRef = useRef(null);
-    const [height, setHeight] = useState('auto');
-    useEffect(() => {
-        if (containerRef.current) {
-            const resizeObserver = new ResizeObserver(entries => {
-                // We only have one entry, so we can use entries[0].
-                const observedHeight = entries[0].contentRect.height;
-                setHeight(observedHeight);
-            });
-            resizeObserver.observe(containerRef.current);
-            return () => {
-                // Cleanup the observer when the component is unmounted
-                resizeObserver.disconnect();
-            };
-        }
-    }, []);
-    return (_jsx(Container, { className: className, style: { height }, animate: { height }, transition: { duration: 0.2 }, children: _jsx("div", { ref: containerRef, children: children }) }));
-};
-const Container = styled(motion.div) `
-  overflow: hidden;
-`;