@dynamic-labs/sdk-react-core 0.16.0

package/src/lib/components/NetworkPicker/components/NetworkControl/NetworkControl.cjs.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var EvmNetworkControl = require('../EvmNetworkControl/EvmNetworkControl.cjs.js');
+var NetworkControlSkeleton = require('../NetworkControlSkeleton/NetworkControlSkeleton.cjs.js');
+var NonNetworkSwitchingSupportedControl = require('../NonNetworkSwitchingSupportedControl/NonNetworkSwitchingSupportedControl.cjs.js');
+var useInternalDynamicContext = require('../../../../context/DynamicContext/useInternalDynamicContext.cjs.js');
+
+const NetworkControl = ({ loading, walletConnector, buttonClassName, network, evmNetworks, activeClassName, isOpen, setIsOpen, showNetworkName, }) => {
+    const { primaryWallet } = useInternalDynamicContext.useInternalDynamicContext();
+    if (!primaryWallet) {
+        return null;
+    }
+    if (loading) {
+        return jsxRuntime.jsx(NetworkControlSkeleton.NetworkControlSkeleton, { className: buttonClassName });
+    }
+    else if ((walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.connectedChain) &&
+        !walletConnector.supportsNetworkSwitching()) {
+        return (jsxRuntime.jsx(NonNetworkSwitchingSupportedControl.NonNetworkSwitchingSupportedControl, { className: buttonClassName, showNetworkName: showNetworkName, walletConnector: walletConnector }));
+    }
+    else {
+        return (jsxRuntime.jsx(EvmNetworkControl.EvmNetworkControl, { showNetworkName: showNetworkName, evmNetworks: evmNetworks, activeClassName: activeClassName, className: buttonClassName, network: network, loading: loading, isOpen: isOpen, walletConnector: walletConnector, setIsOpen: setIsOpen }));
+    }
+};
+
+exports.NetworkControl = NetworkControl;

package/src/lib/components/NetworkPicker/components/NetworkControl/NetworkControl.d.ts

@@ -0,0 +1,16 @@
+import { Dispatch, SetStateAction } from 'react';
+import { EvmNetwork } from '@dynamic-labs/multi-wallet';
+import { WalletConnector } from '@dynamic-labs/wallet-connector-core';
+type Props = {
+    activeClassName?: string;
+    buttonClassName?: string;
+    evmNetworks?: EvmNetwork[];
+    isOpen: boolean;
+    loading: boolean;
+    network: number | undefined;
+    setIsOpen: Dispatch<SetStateAction<boolean>>;
+    showNetworkName?: boolean;
+    walletConnector: WalletConnector | undefined;
+};
+export declare const NetworkControl: ({ loading, walletConnector, buttonClassName, network, evmNetworks, activeClassName, isOpen, setIsOpen, showNetworkName, }: Props) => JSX.Element | null;
+export {};

package/src/lib/components/NetworkPicker/components/NetworkControl/NetworkControl.es.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import { EvmNetworkControl } from '../EvmNetworkControl/EvmNetworkControl.es.js';
+import { NetworkControlSkeleton } from '../NetworkControlSkeleton/NetworkControlSkeleton.es.js';
+import { NonNetworkSwitchingSupportedControl } from '../NonNetworkSwitchingSupportedControl/NonNetworkSwitchingSupportedControl.es.js';
+import { useInternalDynamicContext } from '../../../../context/DynamicContext/useInternalDynamicContext.es.js';
+
+const NetworkControl = ({ loading, walletConnector, buttonClassName, network, evmNetworks, activeClassName, isOpen, setIsOpen, showNetworkName, }) => {
+    const { primaryWallet } = useInternalDynamicContext();
+    if (!primaryWallet) {
+        return null;
+    }
+    if (loading) {
+        return jsx(NetworkControlSkeleton, { className: buttonClassName });
+    }
+    else if ((walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.connectedChain) &&
+        !walletConnector.supportsNetworkSwitching()) {
+        return (jsx(NonNetworkSwitchingSupportedControl, { className: buttonClassName, showNetworkName: showNetworkName, walletConnector: walletConnector }));
+    }
+    else {
+        return (jsx(EvmNetworkControl, { showNetworkName: showNetworkName, evmNetworks: evmNetworks, activeClassName: activeClassName, className: buttonClassName, network: network, loading: loading, isOpen: isOpen, walletConnector: walletConnector, setIsOpen: setIsOpen }));
+    }
+};
+
+export { NetworkControl };

package/src/lib/components/NetworkPicker/components/NetworkControl/index.d.ts

@@ -0,0 +1 @@
+export { NetworkControl } from './NetworkControl';

package/src/lib/components/NetworkPicker/components/NetworkControlSkeleton/NetworkControlSkeleton.cjs.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('../../../../utils/functions/classNames/classNames.cjs.js');
+
+const NetworkControlSkeleton = ({ className, }) => (jsxRuntime.jsx("div", Object.assign({ className: classNames.classNames('network-control-skeleton', className), "data-testid": 'network-control-loading' }, { children: jsxRuntime.jsx("div", { className: 'network-control-skeleton__icon' }) })));
+
+exports.NetworkControlSkeleton = NetworkControlSkeleton;

package/src/lib/components/NetworkPicker/components/NetworkControlSkeleton/NetworkControlSkeleton.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+export type NetworkControlSkeletonProps = {
+    className?: string;
+};
+export declare const NetworkControlSkeleton: FC<NetworkControlSkeletonProps>;

package/src/lib/components/NetworkPicker/components/NetworkControlSkeleton/NetworkControlSkeleton.es.js

@@ -0,0 +1,6 @@
+import { jsx } from 'react/jsx-runtime';
+import { classNames } from '../../../../utils/functions/classNames/classNames.es.js';
+
+const NetworkControlSkeleton = ({ className, }) => (jsx("div", Object.assign({ className: classNames('network-control-skeleton', className), "data-testid": 'network-control-loading' }, { children: jsx("div", { className: 'network-control-skeleton__icon' }) })));
+
+export { NetworkControlSkeleton };

package/src/lib/components/NetworkPicker/components/NetworkControlSkeleton/index.d.ts

@@ -0,0 +1 @@
+export { NetworkControlSkeleton } from './NetworkControlSkeleton';

package/src/lib/components/NetworkPicker/components/NonNetworkSwitchingSupportedControl/NonNetworkSwitchingSupportedControl.cjs.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var Typography = require('../../../Typography/Typography.cjs.js');
+require('@dynamic-labs/sdk-api');
+require('../../../../shared/logger.cjs.js');
+var getChainIcon = require('../../../../shared/utils/functions/chain/getChainIcon.cjs.js');
+require('@dynamic-labs/multi-wallet');
+require('../../../../utils/constants/colors.cjs.js');
+require('@dynamic-labs/iconic');
+require('../../../../context/ViewContext/ViewContext.cjs.js');
+require('../../../../shared/consts/index.cjs.js');
+require('../../../../context/DynamicContext/DynamicContext.cjs.js');
+require('../../../ShadowDOM/ShadowDOM.cjs.js');
+require('../../../../context/ThemeContext/ThemeContext.cjs.js');
+var classNames = require('../../../../utils/functions/classNames/classNames.cjs.js');
+var Icon = require('../../../Icon/Icon.cjs.js');
+require('react-dom');
+require('react-focus-lock');
+require('../../../Transition/ZoomTransition/ZoomTransition.cjs.js');
+require('../../../Transition/SlideInUpTransition/SlideInUpTransition.cjs.js');
+require('../../../Transition/OpacityTransition/OpacityTransition.cjs.js');
+require('../../../../config/ApiEndpoint.cjs.js');
+require('../../../../context/ErrorContext/ErrorContext.cjs.js');
+require('ethers');
+var useFetchChain = require('../../../../widgets/DynamicWidget/hooks/useFetchChain/useFetchChain.cjs.js');
+require('../../../../context/MockContext/MockContext.cjs.js');
+require('../../../../context/CaptchaContext/CaptchaContext.cjs.js');
+require('../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs.js');
+require('../../../IconButton/IconButton.cjs.js');
+var capitalize = require('../../../../shared/utils/functions/capitalize/capitalize.cjs.js');
+
+const NonNetworkSwitchingSupportedControl = ({ walletConnector, className, showNetworkName = false, }) => {
+    const [chain] = useFetchChain.useFetchChain(walletConnector);
+    const chainName = (chain === null || chain === void 0 ? void 0 : chain.name) || '';
+    const ChainIcon = getChainIcon.getChainIcon(chainName);
+    return (jsxRuntime.jsxs("div", Object.assign({ "data-testid": 'NonNetworkSwitchingSupportedControl', className: classNames.classNames('non-network-switching-supported-control', className) }, { children: [jsxRuntime.jsx(Icon.Icon, Object.assign({ size: 'small' }, { children: (chain === null || chain === void 0 ? void 0 : chain.icon) ? (jsxRuntime.jsx("img", { src: chain.icon, alt: `${chain.name} icon` })) : (jsxRuntime.jsx(ChainIcon, {})) })), showNetworkName && (jsxRuntime.jsx(Typography.Typography, Object.assign({ className: classNames.classNames('non-network-switching-supported-control__network-name'), as: 'span' }, { children: capitalize.capitalize(chainName) })))] })));
+};
+
+exports.NonNetworkSwitchingSupportedControl = NonNetworkSwitchingSupportedControl;

package/src/lib/components/NetworkPicker/components/NonNetworkSwitchingSupportedControl/NonNetworkSwitchingSupportedControl.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { WalletConnector } from '@dynamic-labs/wallet-connector-core';
+type Props = {
+    className?: string;
+    showNetworkName?: boolean;
+    walletConnector: WalletConnector;
+};
+export declare const NonNetworkSwitchingSupportedControl: ({ walletConnector, className, showNetworkName, }: Props) => JSX.Element;
+export {};

package/src/lib/components/NetworkPicker/components/NonNetworkSwitchingSupportedControl/NonNetworkSwitchingSupportedControl.es.js

@@ -0,0 +1,39 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import { Typography } from '../../../Typography/Typography.es.js';
+import '@dynamic-labs/sdk-api';
+import '../../../../shared/logger.es.js';
+import { getChainIcon } from '../../../../shared/utils/functions/chain/getChainIcon.es.js';
+import '@dynamic-labs/multi-wallet';
+import '../../../../utils/constants/colors.es.js';
+import '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.es.js';
+import '../../../../shared/consts/index.es.js';
+import '../../../../context/DynamicContext/DynamicContext.es.js';
+import '../../../ShadowDOM/ShadowDOM.es.js';
+import '../../../../context/ThemeContext/ThemeContext.es.js';
+import { classNames } from '../../../../utils/functions/classNames/classNames.es.js';
+import { Icon } from '../../../Icon/Icon.es.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../../../Transition/ZoomTransition/ZoomTransition.es.js';
+import '../../../Transition/SlideInUpTransition/SlideInUpTransition.es.js';
+import '../../../Transition/OpacityTransition/OpacityTransition.es.js';
+import '../../../../config/ApiEndpoint.es.js';
+import '../../../../context/ErrorContext/ErrorContext.es.js';
+import 'ethers';
+import { useFetchChain } from '../../../../widgets/DynamicWidget/hooks/useFetchChain/useFetchChain.es.js';
+import '../../../../context/MockContext/MockContext.es.js';
+import '../../../../context/CaptchaContext/CaptchaContext.es.js';
+import '../../../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.es.js';
+import '../../../IconButton/IconButton.es.js';
+import { capitalize } from '../../../../shared/utils/functions/capitalize/capitalize.es.js';
+
+const NonNetworkSwitchingSupportedControl = ({ walletConnector, className, showNetworkName = false, }) => {
+    const [chain] = useFetchChain(walletConnector);
+    const chainName = (chain === null || chain === void 0 ? void 0 : chain.name) || '';
+    const ChainIcon = getChainIcon(chainName);
+    return (jsxs("div", Object.assign({ "data-testid": 'NonNetworkSwitchingSupportedControl', className: classNames('non-network-switching-supported-control', className) }, { children: [jsx(Icon, Object.assign({ size: 'small' }, { children: (chain === null || chain === void 0 ? void 0 : chain.icon) ? (jsx("img", { src: chain.icon, alt: `${chain.name} icon` })) : (jsx(ChainIcon, {})) })), showNetworkName && (jsx(Typography, Object.assign({ className: classNames('non-network-switching-supported-control__network-name'), as: 'span' }, { children: capitalize(chainName) })))] })));
+};
+
+export { NonNetworkSwitchingSupportedControl };

package/src/lib/components/NetworkPicker/components/NonNetworkSwitchingSupportedControl/index.d.ts

@@ -0,0 +1 @@
+export { NonNetworkSwitchingSupportedControl } from './NonNetworkSwitchingSupportedControl';

package/src/lib/components/NetworkPicker/components/UnsupportedNetwork/UnsupportedNetwork.cjs.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('@dynamic-labs/sdk-api');
+require('../../../../shared/logger.cjs.js');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/multi-wallet');
+require('../../../../context/ViewContext/ViewContext.cjs.js');
+require('react');
+var error = require('../../../../shared/assets/error.cjs.js');
+require('../../../../utils/constants/colors.cjs.js');
+require('../../../../shared/consts/index.cjs.js');
+var Icon = require('../../../Icon/Icon.cjs.js');
+var Typography = require('../../../Typography/Typography.cjs.js');
+
+const UnsupportedNetwork = ({ showMsg }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Icon.Icon, Object.assign({ size: 'small' }, { children: jsxRuntime.jsx(error.ReactComponent, {}) })), showMsg && (jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'evm-network-control__network-name', as: 'span', color: 'error-1', variant: 'body_small' }, { children: "Switch Network" })))] }));
+
+exports.UnsupportedNetwork = UnsupportedNetwork;

package/src/lib/components/NetworkPicker/components/UnsupportedNetwork/UnsupportedNetwork.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+type Props = {
+    showMsg?: boolean;
+};
+export declare const UnsupportedNetwork: ({ showMsg }: Props) => JSX.Element;
+export {};

package/src/lib/components/NetworkPicker/components/UnsupportedNetwork/UnsupportedNetwork.es.js

@@ -0,0 +1,16 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import '@dynamic-labs/sdk-api';
+import '../../../../shared/logger.es.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/multi-wallet';
+import '../../../../context/ViewContext/ViewContext.es.js';
+import 'react';
+import { ReactComponent as SvgError } from '../../../../shared/assets/error.es.js';
+import '../../../../utils/constants/colors.es.js';
+import '../../../../shared/consts/index.es.js';
+import { Icon } from '../../../Icon/Icon.es.js';
+import { Typography } from '../../../Typography/Typography.es.js';
+
+const UnsupportedNetwork = ({ showMsg }) => (jsxs(Fragment, { children: [jsx(Icon, Object.assign({ size: 'small' }, { children: jsx(SvgError, {}) })), showMsg && (jsx(Typography, Object.assign({ className: 'evm-network-control__network-name', as: 'span', color: 'error-1', variant: 'body_small' }, { children: "Switch Network" })))] }));
+
+export { UnsupportedNetwork };

package/src/lib/components/NetworkPicker/components/UnsupportedNetwork/index.d.ts

@@ -0,0 +1 @@
+export { UnsupportedNetwork } from './UnsupportedNetwork';

package/src/lib/components/NetworkPicker/index.d.ts

@@ -0,0 +1 @@
+export { NetworkPicker } from './NetworkPicker';

package/src/lib/components/OTPVerificationView/OTPVerificationView.cjs.js

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var iconic = require('@dynamic-labs/iconic');
+require('react');
+var Typography = require('../Typography/Typography.cjs.js');
+require('@dynamic-labs/sdk-api');
+require('../../shared/logger.cjs.js');
+require('@dynamic-labs/multi-wallet');
+require('../../context/ViewContext/ViewContext.cjs.js');
+var chevronLeft = require('../../shared/assets/chevron-left.cjs.js');
+var check = require('../../shared/assets/check.cjs.js');
+var pencilAltIcon = require('../../shared/assets/pencil-alt-icon.cjs.js');
+require('../../utils/constants/colors.cjs.js');
+require('../../shared/consts/index.cjs.js');
+require('../../context/DynamicContext/DynamicContext.cjs.js');
+require('../ShadowDOM/ShadowDOM.cjs.js');
+require('../../context/ThemeContext/ThemeContext.cjs.js');
+var Icon = require('../Icon/Icon.cjs.js');
+require('react-dom');
+require('react-focus-lock');
+require('../Transition/ZoomTransition/ZoomTransition.cjs.js');
+require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs.js');
+require('../Transition/OpacityTransition/OpacityTransition.cjs.js');
+require('../../config/ApiEndpoint.cjs.js');
+require('../../context/ErrorContext/ErrorContext.cjs.js');
+require('ethers');
+require('../../context/MockContext/MockContext.cjs.js');
+require('../../context/CaptchaContext/CaptchaContext.cjs.js');
+require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs.js');
+var IconButton = require('../IconButton/IconButton.cjs.js');
+var ModalHeader = require('../ModalHeader/ModalHeader.cjs.js');
+var PoweredByDynamic = require('../PoweredByDynamic/PoweredByDynamic.cjs.js');
+var IconWithSpinner = require('../IconWithSpinner/IconWithSpinner.cjs.js');
+var TosAndPp = require('../TosAndPp/TosAndPp.cjs.js');
+var PinField = require('../PinField/PinField.cjs.js');
+var IconWithStatus = require('../IconWithStatus/IconWithStatus.cjs.js');
+var ModalHeaderBanner = require('../ModalHeaderBanner/ModalHeaderBanner.cjs.js');
+
+const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, termsOfServiceUrl, privacyPolicyUrl, onPinChange, displayPoweredByDynamic = false, }) => {
+    const backButton = (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view' }, { children: [jsxRuntime.jsx(ModalHeaderBanner.ModalHeaderBanner, { type: 'error', message: error === null || error === void 0 ? void 0 : error.message }), jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ alignContent: 'bottom', leading: onClickBack && backButton }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__status-header' }, { children: [isValid && (jsxRuntime.jsx(IconWithStatus.IconWithStatus, { Icon: iconic.SignInWithEmailIcon, iconSize: 50, InnerIcon: check.ReactComponent })), !isValid && (jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: iconic.SignInWithEmailIcon, iconSize: 80, isSpinning: isLoading }))] })) })), jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title' }, { children: isValid ? 'Verification code confirmed' : 'Confirm verification code' })), jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__body' }, { children: [isValid && (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "Hang tight while we get things ready for you" }))), !isValid && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__email-container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: email })), onClickEditEmail && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button' }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'text-tertiary' }, { children: jsxRuntime.jsx(pencilAltIcon.ReactComponent, {}) })) })))] }))] }))] })), jsxRuntime.jsx(PinField.PinField, { initialValue: Array(6).join('.').split('.'), isLoading: isLoading, handleComplete: onPinComplete, isValidated: isValid, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: onPinChange }), jsxRuntime.jsxs("div", Object.assign({ className: 'otp-verification-view__footer' }, { children: [termsOfServiceUrl && privacyPolicyUrl && (jsxRuntime.jsx(TosAndPp.TosAndPp, { mode: 'logging in', privacyPolicyUrl: privacyPolicyUrl, termsOfServiceUrl: termsOfServiceUrl })), displayPoweredByDynamic && jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {})] }))] })));
+};
+
+exports.OTPVerificationView = OTPVerificationView;

package/src/lib/components/OTPVerificationView/OTPVerificationView.d.ts

@@ -0,0 +1,16 @@
+import { FC, MouseEventHandler } from 'react';
+type OtpVerificationLayoutProps = {
+    displayPoweredByDynamic?: boolean;
+    email: string;
+    error?: Error;
+    isLoading: boolean;
+    isValid: boolean;
+    onClickBack?: MouseEventHandler<HTMLButtonElement>;
+    onClickEditEmail?: MouseEventHandler<HTMLButtonElement>;
+    onPinChange?: (value: string) => void;
+    onPinComplete: (value: string) => void;
+    privacyPolicyUrl?: string;
+    termsOfServiceUrl?: string;
+};
+export declare const OTPVerificationView: FC<OtpVerificationLayoutProps>;
+export {};

package/src/lib/components/OTPVerificationView/OTPVerificationView.es.js

@@ -0,0 +1,43 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { SignInWithEmailIcon } from '@dynamic-labs/iconic';
+import 'react';
+import { Typography } from '../Typography/Typography.es.js';
+import '@dynamic-labs/sdk-api';
+import '../../shared/logger.es.js';
+import '@dynamic-labs/multi-wallet';
+import '../../context/ViewContext/ViewContext.es.js';
+import { ReactComponent as SvgChevronLeft } from '../../shared/assets/chevron-left.es.js';
+import { ReactComponent as SvgCheck } from '../../shared/assets/check.es.js';
+import { ReactComponent as SvgPencilAltIcon } from '../../shared/assets/pencil-alt-icon.es.js';
+import '../../utils/constants/colors.es.js';
+import '../../shared/consts/index.es.js';
+import '../../context/DynamicContext/DynamicContext.es.js';
+import '../ShadowDOM/ShadowDOM.es.js';
+import '../../context/ThemeContext/ThemeContext.es.js';
+import { Icon } from '../Icon/Icon.es.js';
+import 'react-dom';
+import 'react-focus-lock';
+import '../Transition/ZoomTransition/ZoomTransition.es.js';
+import '../Transition/SlideInUpTransition/SlideInUpTransition.es.js';
+import '../Transition/OpacityTransition/OpacityTransition.es.js';
+import '../../config/ApiEndpoint.es.js';
+import '../../context/ErrorContext/ErrorContext.es.js';
+import 'ethers';
+import '../../context/MockContext/MockContext.es.js';
+import '../../context/CaptchaContext/CaptchaContext.es.js';
+import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.es.js';
+import { IconButton } from '../IconButton/IconButton.es.js';
+import { ModalHeader } from '../ModalHeader/ModalHeader.es.js';
+import { PoweredByDynamic } from '../PoweredByDynamic/PoweredByDynamic.es.js';
+import { IconWithSpinner } from '../IconWithSpinner/IconWithSpinner.es.js';
+import { TosAndPp } from '../TosAndPp/TosAndPp.es.js';
+import { PinField } from '../PinField/PinField.es.js';
+import { IconWithStatus } from '../IconWithStatus/IconWithStatus.es.js';
+import { ModalHeaderBanner } from '../ModalHeaderBanner/ModalHeaderBanner.es.js';
+
+const OTPVerificationView = ({ onClickBack, onClickEditEmail, isLoading, email, onPinComplete, isValid, error, termsOfServiceUrl, privacyPolicyUrl, onPinChange, displayPoweredByDynamic = false, }) => {
+    const backButton = (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsx(SvgChevronLeft, {}) })));
+    return (jsxs("div", Object.assign({ className: 'otp-verification-view' }, { children: [jsx(ModalHeaderBanner, { type: 'error', message: error === null || error === void 0 ? void 0 : error.message }), jsx(ModalHeader, Object.assign({ alignContent: 'bottom', leading: onClickBack && backButton }, { children: jsxs("div", Object.assign({ className: 'otp-verification-view__status-header' }, { children: [isValid && (jsx(IconWithStatus, { Icon: SignInWithEmailIcon, iconSize: 50, InnerIcon: SvgCheck })), !isValid && (jsx(IconWithSpinner, { Icon: SignInWithEmailIcon, iconSize: 80, isSpinning: isLoading }))] })) })), jsx(Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'otp-verification-view__title' }, { children: isValid ? 'Verification code confirmed' : 'Confirm verification code' })), jsxs("div", Object.assign({ className: 'otp-verification-view__body' }, { children: [isValid && (jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "Hang tight while we get things ready for you" }))), !isValid && (jsxs(Fragment, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'regular', color: 'secondary' }, { children: "We\u2019ve sent a verification code to" })), jsxs("div", Object.assign({ className: 'otp-verification-view__email-container' }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', weight: 'bold', color: 'secondary' }, { children: email })), onClickEditEmail && (jsx(IconButton, Object.assign({ onClick: onClickEditEmail, "data-testid": 'otp-verification-view__edit-button' }, { children: jsx(Icon, Object.assign({ color: 'text-tertiary' }, { children: jsx(SvgPencilAltIcon, {}) })) })))] }))] }))] })), jsx(PinField, { initialValue: Array(6).join('.').split('.'), isLoading: isLoading, handleComplete: onPinComplete, isValidated: isValid, inputMode: 'numeric', pattern: '[0-9]*', hasError: Boolean(error), onChange: onPinChange }), jsxs("div", Object.assign({ className: 'otp-verification-view__footer' }, { children: [termsOfServiceUrl && privacyPolicyUrl && (jsx(TosAndPp, { mode: 'logging in', privacyPolicyUrl: privacyPolicyUrl, termsOfServiceUrl: termsOfServiceUrl })), displayPoweredByDynamic && jsx(PoweredByDynamic, {})] }))] })));
+};
+
+export { OTPVerificationView };

package/src/lib/components/OTPVerificationView/index.d.ts

@@ -0,0 +1 @@
+export { OTPVerificationView } from './OTPVerificationView';

package/src/lib/components/OptionsSwitcher/OptionsSwitcher.cjs.js

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var classNames = require('../../utils/functions/classNames/classNames.cjs.js');
+
+const OptionsSwitcher = ({ onChange, value, options, rootClassName, activeButtonClassName, buttonClassName, }) => {
+    const isActive = (_value) => _value !== undefined && _value === value;
+    const rootRef = React.useRef(null);
+    const [railCSSLeft, setRailCSSLeft] = React.useState(0);
+    const getOptionDisplayValue = (option) => option.label || option.key;
+    // Updates .options-switcher__active-rail position
+    React.useLayoutEffect(() => {
+        if (!rootRef.current)
+            return;
+        const activeOption = options === null || options === void 0 ? void 0 : options.find(({ key }) => key === value);
+        if (!activeOption)
+            return;
+        const activeOptionLabel = getOptionDisplayValue(activeOption);
+        const $activeOption = rootRef.current.querySelector(`[data-options-switcher-label=${activeOptionLabel}]`);
+        if (!$activeOption)
+            return;
+        const parentBouding = rootRef.current.getBoundingClientRect();
+        const activeOptionBouding = $activeOption.getBoundingClientRect();
+        setRailCSSLeft(activeOptionBouding.x - parentBouding.x);
+    }, [options, value]);
+    return (jsxRuntime.jsxs("div", Object.assign({ ref: rootRef, "data-testid": 'OptionsSwitcher', className: classNames.classNames('options-switcher', rootClassName) }, { children: [jsxRuntime.jsx("div", { className: 'options-switcher__active-rail', style: { left: railCSSLeft, width: `${100 / ((options === null || options === void 0 ? void 0 : options.length) || 1)}%` } }), options === null || options === void 0 ? void 0 : options.map((option) => (jsxRuntime.jsx("button", Object.assign({ type: 'button', className: classNames.classNames('options-switcher__button', buttonClassName, {
+                    'options-switcher__button--active': isActive(option.key),
+                }, isActive(option.key) && activeButtonClassName), onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(option.key), "data-options-switcher-label": getOptionDisplayValue(option) }, { children: getOptionDisplayValue(option) }), option.key)))] })));
+};
+
+exports.OptionsSwitcher = OptionsSwitcher;

package/src/lib/components/OptionsSwitcher/OptionsSwitcher.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export type OptionsSwitcherOption = {
+    key: string;
+    label?: string;
+};
+export type OptionsSwitcherClassNames = {
+    activeButtonClassName?: string;
+    buttonClassName?: string;
+    rootClassName?: string;
+};
+export type OptionsSwitcherProps = {
+    onChange?: (key: string) => void;
+    options?: OptionsSwitcherOption[];
+    value?: string;
+};
+export type Props = OptionsSwitcherClassNames & OptionsSwitcherProps;
+export declare const OptionsSwitcher: React.FC<Props>;

package/src/lib/components/OptionsSwitcher/OptionsSwitcher.es.js

@@ -0,0 +1,30 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useLayoutEffect } from 'react';
+import { classNames } from '../../utils/functions/classNames/classNames.es.js';
+
+const OptionsSwitcher = ({ onChange, value, options, rootClassName, activeButtonClassName, buttonClassName, }) => {
+    const isActive = (_value) => _value !== undefined && _value === value;
+    const rootRef = useRef(null);
+    const [railCSSLeft, setRailCSSLeft] = useState(0);
+    const getOptionDisplayValue = (option) => option.label || option.key;
+    // Updates .options-switcher__active-rail position
+    useLayoutEffect(() => {
+        if (!rootRef.current)
+            return;
+        const activeOption = options === null || options === void 0 ? void 0 : options.find(({ key }) => key === value);
+        if (!activeOption)
+            return;
+        const activeOptionLabel = getOptionDisplayValue(activeOption);
+        const $activeOption = rootRef.current.querySelector(`[data-options-switcher-label=${activeOptionLabel}]`);
+        if (!$activeOption)
+            return;
+        const parentBouding = rootRef.current.getBoundingClientRect();
+        const activeOptionBouding = $activeOption.getBoundingClientRect();
+        setRailCSSLeft(activeOptionBouding.x - parentBouding.x);
+    }, [options, value]);
+    return (jsxs("div", Object.assign({ ref: rootRef, "data-testid": 'OptionsSwitcher', className: classNames('options-switcher', rootClassName) }, { children: [jsx("div", { className: 'options-switcher__active-rail', style: { left: railCSSLeft, width: `${100 / ((options === null || options === void 0 ? void 0 : options.length) || 1)}%` } }), options === null || options === void 0 ? void 0 : options.map((option) => (jsx("button", Object.assign({ type: 'button', className: classNames('options-switcher__button', buttonClassName, {
+                    'options-switcher__button--active': isActive(option.key),
+                }, isActive(option.key) && activeButtonClassName), onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(option.key), "data-options-switcher-label": getOptionDisplayValue(option) }, { children: getOptionDisplayValue(option) }), option.key)))] })));
+};
+
+export { OptionsSwitcher };

package/src/lib/components/OptionsSwitcher/index.d.ts

@@ -0,0 +1 @@
+export { OptionsSwitcher } from './OptionsSwitcher';

package/src/lib/components/PinField/PinField.cjs.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var PinInput = require('../PinInput/PinInput.cjs.js');
+
+const isComplete = (values) => values.every((value) => value);
+const PinField = ({ handleComplete, initialValue, inputMode, isLoading, isValidated, pattern, type = 'number', hasError, onChange, }) => {
+    const [values, setValues] = React.useState(initialValue);
+    const handleOnChange = (values) => {
+        const value = values.join('');
+        setValues(values);
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+        if (isComplete(values)) {
+            handleComplete(value);
+        }
+    };
+    return (jsxRuntime.jsx("div", Object.assign({ className: 'pin-field__container' }, { children: values.map((value, index) => (jsxRuntime.jsx(PinInput.PinInput, { values: values, inputIndex: index, value: value, onChange: handleOnChange, disabled: isLoading, inputMode: inputMode, isValidated: isValidated, pattern: pattern, type: type, autoFocus: true, hasError: hasError }, `pin_input_${index}`))) })));
+};
+
+exports.PinField = PinField;

package/src/lib/components/PinField/PinField.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { PinInputElementProperties } from '../PinInput/PinInput';
+type Props = {
+    handleComplete: (value: string) => void;
+    hasError: boolean;
+    initialValue: string[];
+    isLoading: boolean;
+    isValidated: boolean;
+    onChange?: (value: string) => void;
+} & Pick<React.InputHTMLAttributes<HTMLInputElement>, PinInputElementProperties>;
+export declare const PinField: ({ handleComplete, initialValue, inputMode, isLoading, isValidated, pattern, type, hasError, onChange, }: Props) => JSX.Element;
+export {};

package/src/lib/components/PinField/PinField.es.js

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { PinInput } from '../PinInput/PinInput.es.js';
+
+const isComplete = (values) => values.every((value) => value);
+const PinField = ({ handleComplete, initialValue, inputMode, isLoading, isValidated, pattern, type = 'number', hasError, onChange, }) => {
+    const [values, setValues] = useState(initialValue);
+    const handleOnChange = (values) => {
+        const value = values.join('');
+        setValues(values);
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+        if (isComplete(values)) {
+            handleComplete(value);
+        }
+    };
+    return (jsx("div", Object.assign({ className: 'pin-field__container' }, { children: values.map((value, index) => (jsx(PinInput, { values: values, inputIndex: index, value: value, onChange: handleOnChange, disabled: isLoading, inputMode: inputMode, isValidated: isValidated, pattern: pattern, type: type, autoFocus: true, hasError: hasError }, `pin_input_${index}`))) })));
+};
+
+export { PinField };

package/src/lib/components/PinField/index.d.ts

@@ -0,0 +1 @@
+export { PinField } from './PinField';

package/src/lib/components/PinInput/PinInput.cjs.js

@@ -0,0 +1,79 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var classNames = require('../../utils/functions/classNames/classNames.cjs.js');
+
+const normalizeNewValue = (currentValue, updatedValue) => {
+    if (!currentValue) {
+        return updatedValue.split('');
+    }
+    if (updatedValue.length > 2) {
+        return updatedValue.split('');
+    }
+    if (updatedValue === '') {
+        return [];
+    }
+    if (currentValue[0] === updatedValue[0]) {
+        return [updatedValue[1]];
+    }
+    return [updatedValue[0]];
+};
+const PinInput = ({ autoFocus, disabled, inputIndex, inputMode, isValidated, name, onChange, pattern, type, value, values, hasError, }) => {
+    const inputRef = React.useRef(null);
+    const handleChange = (e) => {
+        const currentValue = values[inputIndex];
+        const updatedValue = e.target.value.replace(/\s+/g, '');
+        const newValues = [...values];
+        const normalizedValues = normalizeNewValue(currentValue, updatedValue).slice(0, newValues.length - inputIndex);
+        const setValues = (normalizedValue, index) => (newValues[inputIndex + index] = normalizedValue);
+        const regex = type === 'number' ? /(^$)|(\d+)/ : /.*/;
+        const shouldChange = normalizedValues.every((normalizedValue) => regex.test(normalizedValue));
+        let inputElement = inputRef.current;
+        if (!shouldChange) {
+            return;
+        }
+        if (normalizedValues.length) {
+            normalizedValues.forEach(setValues);
+        }
+        else {
+            newValues[inputIndex] = '';
+        }
+        onChange(newValues);
+        // in order to maintain focus after copy/paste action
+        // of 1 or many characters, we need to loop through values
+        // and set current element to be the next sibling
+        for (let i = 0; i < normalizedValues.length; i++) {
+            inputElement = inputElement === null || inputElement === void 0 ? void 0 : inputElement.nextElementSibling;
+        }
+        // if current element is of input type, we can safely focus it
+        if (normalizedValues && inputElement instanceof HTMLInputElement) {
+            inputElement.focus();
+        }
+    };
+    const handleKeyDown = ({ key, }) => {
+        var _a;
+        if (key === 'Backspace' && values[inputIndex] === '' && inputIndex > 0) {
+            const prevInput = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.previousElementSibling;
+            /* istanbul ignore next */
+            if (prevInput instanceof HTMLInputElement) {
+                prevInput.focus();
+            }
+        }
+    };
+    React.useEffect(() => {
+        var _a;
+        if (autoFocus && inputIndex === 0) {
+            (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [autoFocus, inputIndex]);
+    return (jsxRuntime.jsx("input", { ref: inputRef, className: classNames.classNames('pin-input__input', {
+            'pin-input__input--error': Boolean(hasError),
+            'pin-input__input--success': Boolean(isValidated),
+        }), disabled: disabled, name: name, value: value, onChange: handleChange, onKeyDown: handleKeyDown, "data-testid": inputIndex, pattern: pattern, inputMode: inputMode }));
+};
+
+exports.PinInput = PinInput;
+exports.normalizeNewValue = normalizeNewValue;