@dynamic-labs/sdk-react-core 0.18.0-RC.9 → 0.18.0-beta.28

package/src/lib/components/PoweredByDynamic/PoweredByDynamic.cjs

@@ -7,12 +7,20 @@ var classNames = require('../../utils/functions/classNames/classNames.cjs');
 var Typography = require('../Typography/Typography.cjs');
 require('react');
 var dynamicLogo = require('../../assets/dynamic-logo.cjs');
+var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
 
 const URL = 'https://dynamic.xyz';
 const alignClassNames = {
     center: 'powered-by-dynamic--center',
     right: 'powered-by-dynamic--right',
 };
-const PoweredByDynamic = ({ align = 'center', classNameLogo, classNameRoot, classNameText, }) => (jsxRuntime.jsxs("a", Object.assign({ target: '_blank', href: URL, className: classNames.classNames('powered-by-dynamic', alignClassNames[align], classNameRoot), rel: 'noreferrer' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'span', color: 'secondary', weight: 'regular', variant: 'body_mini', className: classNames.classNames('powered-by-dynamic__text', classNameText) }, { children: "Powered by" })), jsxRuntime.jsx(dynamicLogo.ReactComponent, { className: classNames.classNames('powered-by-dynamic__logo', classNameLogo) })] })));
+const PoweredByDynamic = ({ align = 'center', classNameLogo, classNameRoot, classNameText, }) => {
+    var _a;
+    const { projectSettings } = useInternalDynamicContext.useInternalDynamicContext();
+    if (((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _a === void 0 ? void 0 : _a.displayDynamicMessaging) === false) {
+        return null;
+    }
+    return (jsxRuntime.jsxs("a", Object.assign({ target: '_blank', href: URL, className: classNames.classNames('powered-by-dynamic', alignClassNames[align], classNameRoot), rel: 'noreferrer' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'span', color: 'secondary', weight: 'regular', variant: 'body_mini', className: classNames.classNames('powered-by-dynamic__text', classNameText) }, { children: "Powered by" })), jsxRuntime.jsx(dynamicLogo.ReactComponent, { className: classNames.classNames('powered-by-dynamic__logo', classNameLogo) })] })));
+};
 
 exports.PoweredByDynamic = PoweredByDynamic;

package/src/lib/components/PoweredByDynamic/PoweredByDynamic.js

@@ -3,12 +3,20 @@ import { classNames } from '../../utils/functions/classNames/classNames.js';
 import { Typography } from '../Typography/Typography.js';
 import 'react';
 import { ReactComponent as SvgDynamicLogo } from '../../assets/dynamic-logo.js';
+import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
 
 const URL = 'https://dynamic.xyz';
 const alignClassNames = {
     center: 'powered-by-dynamic--center',
     right: 'powered-by-dynamic--right',
 };
-const PoweredByDynamic = ({ align = 'center', classNameLogo, classNameRoot, classNameText, }) => (jsxs("a", Object.assign({ target: '_blank', href: URL, className: classNames('powered-by-dynamic', alignClassNames[align], classNameRoot), rel: 'noreferrer' }, { children: [jsx(Typography, Object.assign({ as: 'span', color: 'secondary', weight: 'regular', variant: 'body_mini', className: classNames('powered-by-dynamic__text', classNameText) }, { children: "Powered by" })), jsx(SvgDynamicLogo, { className: classNames('powered-by-dynamic__logo', classNameLogo) })] })));
+const PoweredByDynamic = ({ align = 'center', classNameLogo, classNameRoot, classNameText, }) => {
+    var _a;
+    const { projectSettings } = useInternalDynamicContext();
+    if (((_a = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.sdk) === null || _a === void 0 ? void 0 : _a.displayDynamicMessaging) === false) {
+        return null;
+    }
+    return (jsxs("a", Object.assign({ target: '_blank', href: URL, className: classNames('powered-by-dynamic', alignClassNames[align], classNameRoot), rel: 'noreferrer' }, { children: [jsx(Typography, Object.assign({ as: 'span', color: 'secondary', weight: 'regular', variant: 'body_mini', className: classNames('powered-by-dynamic__text', classNameText) }, { children: "Powered by" })), jsx(SvgDynamicLogo, { className: classNames('powered-by-dynamic__logo', classNameLogo) })] })));
+};
 
 export { PoweredByDynamic };

package/src/lib/components/SendBalancePageLayout/SendBalancePageLayout.cjs

@@ -45,7 +45,7 @@ const SendBalancePageLayout = ({ error, walletAddress, onClickClose, onClickBack
             return;
         return parseFloat(balance);
     }, [balance]);
-    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ leading: backButton, trailing: closeButton }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'send-balance-page-layout__header-content' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: "Send from" })), walletName && (jsxRuntime.jsx(Icon.Icon, Object.assign({ size: 'small' }, { children: jsxRuntime.jsx(walletBook.WalletIcon, { walletName: walletName }) }))), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: shortenWalletAddress.shortenWalletAddress(walletAddress, 3, 3) }))] })) })), jsxRuntime.jsxs("div", Object.assign({ className: 'send-balance-page-layout__body' }, { children: [jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}) }, { children: error && (jsxRuntime.jsx("div", Object.assign({ className: 'send-balance-page-layout__error' }, { children: jsxRuntime.jsx(Alert.Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), networkName && networkIcon && (jsxRuntime.jsx("div", Object.assign({ className: 'send-balance-page-layout__network-container' }, { children: jsxRuntime.jsx(Chip.Chip, Object.assign({ icon: networkIcon }, { children: networkName })) }))), jsxRuntime.jsxs("div", Object.assign({ className: 'send-balance-page-layout__balance-container' }, { children: [jsxRuntime.jsx(FormFieldLabel.FormFieldLabel, Object.assign({ divider: true }, { children: "Token" })), jsxRuntime.jsx(TokenBalanceCard.TokenBalanceCard, { chain: chain, currencySymbol: currencySymbol, balance: balance })] })), jsxRuntime.jsx(SendBalanceForm.SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues, balance: balanceNumber }), displayPoweredByDynamicFooter && (jsxRuntime.jsx("div", Object.assign({ className: 'send-balance-page-layout__footer' }, { children: jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {}) })))] }))] }));
+    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ leading: backButton, trailing: closeButton }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'send-balance-page-layout__header-content' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: "Send from" })), walletName && (jsxRuntime.jsx(Icon.Icon, Object.assign({ size: 'small' }, { children: jsxRuntime.jsx(walletBook.WalletIcon, { walletName: walletName }) }))), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: shortenWalletAddress.shortenWalletAddress(walletAddress, 3, 3) }))] })) })), jsxRuntime.jsxs("div", Object.assign({ className: 'send-balance-page-layout__body' }, { children: [jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}) }, { children: error && (jsxRuntime.jsx("div", Object.assign({ className: 'send-balance-page-layout__error' }, { children: jsxRuntime.jsx(Alert.Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), networkName && networkIcon && (jsxRuntime.jsx("div", Object.assign({ className: 'send-balance-page-layout__network-container' }, { children: jsxRuntime.jsx(Chip.Chip, Object.assign({ icon: networkIcon }, { children: networkName })) }))), jsxRuntime.jsxs("div", Object.assign({ className: 'send-balance-page-layout__balance-container' }, { children: [jsxRuntime.jsx(FormFieldLabel.FormFieldLabel, Object.assign({ divider: true }, { children: "Token" })), jsxRuntime.jsx(TokenBalanceCard.TokenBalanceCard, { chain: chain, currencySymbol: currencySymbol, balance: balance })] })), jsxRuntime.jsx(SendBalanceForm.SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues, balance: balanceNumber }), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'send-balance-page-layout__footer' }))] }))] }));
 };
 
 exports.SendBalancePageLayout = SendBalancePageLayout;

package/src/lib/components/SendBalancePageLayout/SendBalancePageLayout.js

@@ -41,7 +41,7 @@ const SendBalancePageLayout = ({ error, walletAddress, onClickClose, onClickBack
             return;
         return parseFloat(balance);
     }, [balance]);
-    return (jsxs("div", { children: [jsx(ModalHeader, Object.assign({ leading: backButton, trailing: closeButton }, { children: jsxs("div", Object.assign({ className: 'send-balance-page-layout__header-content' }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: "Send from" })), walletName && (jsx(Icon, Object.assign({ size: 'small' }, { children: jsx(WalletIcon, { walletName: walletName }) }))), jsx(Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: shortenWalletAddress(walletAddress, 3, 3) }))] })) })), jsxs("div", Object.assign({ className: 'send-balance-page-layout__body' }, { children: [jsx(AnimatePresence, Object.assign({ animationComponent: jsx(VerticalDrawerTransition, {}) }, { children: error && (jsx("div", Object.assign({ className: 'send-balance-page-layout__error' }, { children: jsx(Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), networkName && networkIcon && (jsx("div", Object.assign({ className: 'send-balance-page-layout__network-container' }, { children: jsx(Chip, Object.assign({ icon: networkIcon }, { children: networkName })) }))), jsxs("div", Object.assign({ className: 'send-balance-page-layout__balance-container' }, { children: [jsx(FormFieldLabel, Object.assign({ divider: true }, { children: "Token" })), jsx(TokenBalanceCard, { chain: chain, currencySymbol: currencySymbol, balance: balance })] })), jsx(SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues, balance: balanceNumber }), displayPoweredByDynamicFooter && (jsx("div", Object.assign({ className: 'send-balance-page-layout__footer' }, { children: jsx(PoweredByDynamic, {}) })))] }))] }));
+    return (jsxs("div", { children: [jsx(ModalHeader, Object.assign({ leading: backButton, trailing: closeButton }, { children: jsxs("div", Object.assign({ className: 'send-balance-page-layout__header-content' }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: "Send from" })), walletName && (jsx(Icon, Object.assign({ size: 'small' }, { children: jsx(WalletIcon, { walletName: walletName }) }))), jsx(Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: shortenWalletAddress(walletAddress, 3, 3) }))] })) })), jsxs("div", Object.assign({ className: 'send-balance-page-layout__body' }, { children: [jsx(AnimatePresence, Object.assign({ animationComponent: jsx(VerticalDrawerTransition, {}) }, { children: error && (jsx("div", Object.assign({ className: 'send-balance-page-layout__error' }, { children: jsx(Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), networkName && networkIcon && (jsx("div", Object.assign({ className: 'send-balance-page-layout__network-container' }, { children: jsx(Chip, Object.assign({ icon: networkIcon }, { children: networkName })) }))), jsxs("div", Object.assign({ className: 'send-balance-page-layout__balance-container' }, { children: [jsx(FormFieldLabel, Object.assign({ divider: true }, { children: "Token" })), jsx(TokenBalanceCard, { chain: chain, currencySymbol: currencySymbol, balance: balance })] })), jsx(SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues, balance: balanceNumber }), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'send-balance-page-layout__footer' }))] }))] }));
 };
 
 export { SendBalancePageLayout };

package/src/lib/components/ShadowDOM/ShadowDOM.cjs

@@ -5,9 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactDom = require('react-dom');
+var utils$1 = require('@dynamic-labs/utils');
 var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
 var index_shadow = require('../../styles/index.shadow.cjs');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
+var LegacySafariCssOverrides = require('../LegacySafariCssOverrides/LegacySafariCssOverrides.cjs');
 var utils = require('./utils.cjs');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -47,10 +49,10 @@ const ShadowDOM = ({ mode = 'open', id, className, children, dataTestId, zIndex,
     }, [shadowDOMEnabled, nodeRef, mode]);
     const shouldRenderStyles = Boolean(Object.keys(index_shadow).length);
     if (!shadowDOMEnabled) {
-        return (jsxRuntime.jsxs("div", Object.assign({ "data-testid": dataTestId, ref: nodeRef, id: id, className: classNames.classNames('dynamic-shadow-dom', className), style: { zIndex } }, { children: [children, shouldRenderStyles && jsxRuntime.jsx(ShadowDOMStyle, {}), CssOverridesElement && jsxRuntime.jsx(CssOverridesElement, {})] })));
+        return (jsxRuntime.jsxs("div", Object.assign({ "data-testid": dataTestId, ref: nodeRef, id: id, className: classNames.classNames('dynamic-shadow-dom', className), style: { zIndex } }, { children: [children, shouldRenderStyles && jsxRuntime.jsx(ShadowDOMStyle, {}), utils$1.isLegacySafari() && jsxRuntime.jsx(LegacySafariCssOverrides.LegacySafariCssOverrides, {}), CssOverridesElement && jsxRuntime.jsx(CssOverridesElement, {})] })));
     }
     return (jsxRuntime.jsx(ShadowDOMContext.Provider, Object.assign({ value: { shadowRoot } }, { children: jsxRuntime.jsx("div", Object.assign({ "data-testid": dataTestId, ref: nodeRef, id: id, className: classNames.classNames('dynamic-shadow-dom', className), style: { zIndex } }, { children: shadowRoot &&
-                reactDom.createPortal(jsxRuntime.jsxs("div", Object.assign({ className: 'dynamic-shadow-dom-content' }, { children: [children, shouldRenderStyles && jsxRuntime.jsx(ShadowDOMStyle, {}), CssOverridesElement && jsxRuntime.jsx(CssOverridesElement, {})] })), shadowRoot) })) })));
+                reactDom.createPortal(jsxRuntime.jsxs("div", Object.assign({ className: 'dynamic-shadow-dom-content' }, { children: [children, shouldRenderStyles && jsxRuntime.jsx(ShadowDOMStyle, {}), utils$1.isLegacySafari() && jsxRuntime.jsx(LegacySafariCssOverrides.LegacySafariCssOverrides, {}), CssOverridesElement && jsxRuntime.jsx(CssOverridesElement, {})] })), shadowRoot) })) })));
 };
 
 exports.ShadowDOM = ShadowDOM;

package/src/lib/components/ShadowDOM/ShadowDOM.js

@@ -1,9 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useRef, useState, useMemo, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
+import { isLegacySafari } from '@dynamic-labs/utils';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
 import css_248z from '../../styles/index.shadow.js';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
+import { LegacySafariCssOverrides } from '../LegacySafariCssOverrides/LegacySafariCssOverrides.js';
 import { isShadowDOMFlagEnabled } from './utils.js';
 
 const ShadowDOMContext = React__default.createContext({});
@@ -39,10 +41,10 @@ const ShadowDOM = ({ mode = 'open', id, className, children, dataTestId, zIndex,
     }, [shadowDOMEnabled, nodeRef, mode]);
     const shouldRenderStyles = Boolean(Object.keys(css_248z).length);
     if (!shadowDOMEnabled) {
-        return (jsxs("div", Object.assign({ "data-testid": dataTestId, ref: nodeRef, id: id, className: classNames('dynamic-shadow-dom', className), style: { zIndex } }, { children: [children, shouldRenderStyles && jsx(ShadowDOMStyle, {}), CssOverridesElement && jsx(CssOverridesElement, {})] })));
+        return (jsxs("div", Object.assign({ "data-testid": dataTestId, ref: nodeRef, id: id, className: classNames('dynamic-shadow-dom', className), style: { zIndex } }, { children: [children, shouldRenderStyles && jsx(ShadowDOMStyle, {}), isLegacySafari() && jsx(LegacySafariCssOverrides, {}), CssOverridesElement && jsx(CssOverridesElement, {})] })));
     }
     return (jsx(ShadowDOMContext.Provider, Object.assign({ value: { shadowRoot } }, { children: jsx("div", Object.assign({ "data-testid": dataTestId, ref: nodeRef, id: id, className: classNames('dynamic-shadow-dom', className), style: { zIndex } }, { children: shadowRoot &&
-                createPortal(jsxs("div", Object.assign({ className: 'dynamic-shadow-dom-content' }, { children: [children, shouldRenderStyles && jsx(ShadowDOMStyle, {}), CssOverridesElement && jsx(CssOverridesElement, {})] })), shadowRoot) })) })));
+                createPortal(jsxs("div", Object.assign({ className: 'dynamic-shadow-dom-content' }, { children: [children, shouldRenderStyles && jsx(ShadowDOMStyle, {}), isLegacySafari() && jsx(LegacySafariCssOverrides, {}), CssOverridesElement && jsx(CssOverridesElement, {})] })), shadowRoot) })) })));
 };
 
 export { ShadowDOM, ShadowDOMContext, ShadowDOMStyle };

package/src/lib/components/Step/Step.cjs

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var Typography = require('../Typography/Typography.cjs');
 var Icon = require('../Icon/Icon.cjs');
 var classNames = require('../../utils/functions/classNames/classNames.cjs');
@@ -11,7 +12,6 @@ require('../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../context/ViewContext/ViewContext.cjs');
-require('react');
 var check = require('../../shared/assets/check.cjs');
 require('@dynamic-labs/wallet-book');
 require('@dynamic-labs/utils');
@@ -20,6 +20,27 @@ require('../../shared/utils/classes/storage/localStorage.cjs');
 require('ethers');
 require('../../shared/consts/index.cjs');
 
-const Step = ({ children, className, icon, checked = false, }) => (jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('step', className) }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'step__leading' }, { children: [icon ? (jsxRuntime.jsx(Icon.Icon, Object.assign({ className: 'step__icon' }, { children: icon }))) : (jsxRuntime.jsx("div", Object.assign({ className: 'step__index' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'primary', variant: 'body_small' }, { children: jsxRuntime.jsx("span", { className: 'step__index-label' }) })) }))), checked && (jsxRuntime.jsx(Icon.Icon, Object.assign({ className: 'step__check-mark' }, { children: jsxRuntime.jsx(check.ReactComponent, {}) })))] })), jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'primary', variant: 'body_small' }, { children: children }))] })));
+const typographyOpacityMap = {
+    current: '1',
+    default: '1',
+    done: '0.4',
+    upcoming: '0.15',
+};
+const Step = ({ children, className, icon, state = 'default', }) => {
+    // Reduce opacity of icon if upcoming
+    const style = React.useMemo(() => ({ opacity: state === 'upcoming' ? 0.5 : 1 }), [state]);
+    const ComputedIcon = React.useMemo(() => {
+        // If done use checkmark icon
+        if (state === 'done')
+            return (jsxRuntime.jsx("div", Object.assign({ className: 'step__icon step__icon--done' }, { children: jsxRuntime.jsx(Icon.Icon, Object.assign({ className: 'step__icon__check-mark' }, { children: jsxRuntime.jsx(check.ReactComponent, { style: style }) })) })));
+        // Use provided icon if available
+        else if (icon)
+            return (jsxRuntime.jsx(Icon.Icon, Object.assign({ className: 'step__icon' }, { children: jsxRuntime.jsx("div", Object.assign({ style: style }, { children: icon })) })));
+        // Otherwise use step index as icon
+        else
+            return (jsxRuntime.jsx("div", Object.assign({ className: 'step__index' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'primary', variant: 'body_small', style: style }, { children: jsxRuntime.jsx("span", { className: 'step__index-label' }) })) })));
+    }, [icon, state, style]);
+    return (jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('step', className) }, { children: [ComputedIcon, jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'primary', variant: 'body_small', style: { opacity: typographyOpacityMap[state] } }, { children: children }))] })));
+};
 
 exports.Step = Step;

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

@@ -1,8 +1,7 @@
 import { FC, PropsWithChildren, ReactElement } from 'react';
-type StepProps = {
+export type StepProps = {
     icon?: ReactElement;
-    checked?: boolean;
+    state?: 'current' | 'done' | 'upcoming' | 'default';
     className?: string;
 };
 export declare const Step: FC<PropsWithChildren<StepProps>>;
-export {};

package/src/lib/components/Step/Step.js

@@ -1,4 +1,5 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo } from 'react';
 import { Typography } from '../Typography/Typography.js';
 import { Icon } from '../Icon/Icon.js';
 import { classNames } from '../../utils/functions/classNames/classNames.js';
@@ -7,7 +8,6 @@ import '../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../context/ViewContext/ViewContext.js';
-import 'react';
 import { ReactComponent as SvgCheck } from '../../shared/assets/check.js';
 import '@dynamic-labs/wallet-book';
 import '@dynamic-labs/utils';
@@ -16,6 +16,27 @@ import '../../shared/utils/classes/storage/localStorage.js';
 import 'ethers';
 import '../../shared/consts/index.js';
 
-const Step = ({ children, className, icon, checked = false, }) => (jsxs("div", Object.assign({ className: classNames('step', className) }, { children: [jsxs("div", Object.assign({ className: 'step__leading' }, { children: [icon ? (jsx(Icon, Object.assign({ className: 'step__icon' }, { children: icon }))) : (jsx("div", Object.assign({ className: 'step__index' }, { children: jsx(Typography, Object.assign({ color: 'primary', variant: 'body_small' }, { children: jsx("span", { className: 'step__index-label' }) })) }))), checked && (jsx(Icon, Object.assign({ className: 'step__check-mark' }, { children: jsx(SvgCheck, {}) })))] })), jsx(Typography, Object.assign({ color: 'primary', variant: 'body_small' }, { children: children }))] })));
+const typographyOpacityMap = {
+    current: '1',
+    default: '1',
+    done: '0.4',
+    upcoming: '0.15',
+};
+const Step = ({ children, className, icon, state = 'default', }) => {
+    // Reduce opacity of icon if upcoming
+    const style = useMemo(() => ({ opacity: state === 'upcoming' ? 0.5 : 1 }), [state]);
+    const ComputedIcon = useMemo(() => {
+        // If done use checkmark icon
+        if (state === 'done')
+            return (jsx("div", Object.assign({ className: 'step__icon step__icon--done' }, { children: jsx(Icon, Object.assign({ className: 'step__icon__check-mark' }, { children: jsx(SvgCheck, { style: style }) })) })));
+        // Use provided icon if available
+        else if (icon)
+            return (jsx(Icon, Object.assign({ className: 'step__icon' }, { children: jsx("div", Object.assign({ style: style }, { children: icon })) })));
+        // Otherwise use step index as icon
+        else
+            return (jsx("div", Object.assign({ className: 'step__index' }, { children: jsx(Typography, Object.assign({ color: 'primary', variant: 'body_small', style: style }, { children: jsx("span", { className: 'step__index-label' }) })) })));
+    }, [icon, state, style]);
+    return (jsxs("div", Object.assign({ className: classNames('step', className) }, { children: [ComputedIcon, jsx(Typography, Object.assign({ color: 'primary', variant: 'body_small', style: { opacity: typographyOpacityMap[state] } }, { children: children }))] })));
+};
 
 export { Step };

package/src/lib/components/Toolkit/Toolkit.cjs

@@ -21,15 +21,15 @@ require('@dynamic-labs/multi-wallet');
 var isEmailProviderEnabled = require('../../utils/functions/isEmailProviderEnabled/isEmailProviderEnabled.cjs');
 var ShadowDOM = require('../ShadowDOM/ShadowDOM.cjs');
 var ThemeSwitch = require('./components/ThemeSwitch.cjs');
-var BrandStyleSwitch = require('./components/BrandStyleSwitch.cjs');
 var PrimaryColorInput = require('./components/PrimaryColorInput.cjs');
 var AuthModeSwitch = require('./components/AuthModeSwitch.cjs');
 var LoginWithEmailSwitch = require('./components/LoginWithEmailSwitch.cjs');
 var LoginWithEmailViewDisplayPriorityOrderSwitch = require('./components/LoginWithEmailViewDisplayPriorityOrderSwitch.cjs');
 var TemplateSelect = require('./components/TemplateSelect.cjs');
+var MultiWalletSwitch = require('./components/MultiWalletSwitch.cjs');
 
 const Toolkit = () => {
-    const { projectSettings, user, showAuthFlow, showDynamicUserProfile, toolkitEnabled, authMode, setAuthMode, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { projectSettings, user, showAuthFlow, showDynamicUserProfile, toolkitEnabled, authMode, setAuthMode, multiWallet, setMultiWallet, } = useInternalDynamicContext.useInternalDynamicContext();
     const isToolkitVisible = React.useMemo(() => {
         if (!toolkitEnabled)
             return false;
@@ -37,7 +37,7 @@ const Toolkit = () => {
     }, [showAuthFlow, showDynamicUserProfile, toolkitEnabled]);
     if (!isToolkitVisible)
         return null;
-    return (jsxRuntime.jsx(ShadowDOM.ShadowDOM, Object.assign({ dataTestId: 'toolkit-shadowdom', className: 'toolkit-shadowdom', zIndex: index.toolkitZIndex }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__container' }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Theme" })), jsxRuntime.jsx(ThemeSwitch.ThemeSwitch, {})] })), jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Template" })), jsxRuntime.jsx(TemplateSelect.TemplateSelect, {})] })), jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Brand" })), jsxRuntime.jsx(BrandStyleSwitch.BrandStyleSwitch, {})] })), jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Primary Color" })), jsxRuntime.jsx(PrimaryColorInput.PrimaryColorInput, {})] })), jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Auth mode" })), jsxRuntime.jsx(AuthModeSwitch.AuthModeSwitch, { authMode: authMode, setAuthMode: setAuthMode })] })), isEmailProviderEnabled.isEmailProviderEnabled((projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) || []) && !user && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Log in with Email" })), jsxRuntime.jsx(LoginWithEmailSwitch.LoginWithEmailSwitch, {})] })), jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Email vs Wallet priority" })), jsxRuntime.jsx(LoginWithEmailViewDisplayPriorityOrderSwitch.LoginWithEmailViewDisplayPriorityOrderSwitch, {})] }))] }))] })) })));
+    return (jsxRuntime.jsx(ShadowDOM.ShadowDOM, Object.assign({ dataTestId: 'toolkit-shadowdom', className: 'toolkit-shadowdom', zIndex: index.toolkitZIndex }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__container' }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Theme" })), jsxRuntime.jsx(ThemeSwitch.ThemeSwitch, {})] })), jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Template" })), jsxRuntime.jsx(TemplateSelect.TemplateSelect, {})] })), jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Primary Color" })), jsxRuntime.jsx(PrimaryColorInput.PrimaryColorInput, {})] })), !user && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Auth mode" })), jsxRuntime.jsx(AuthModeSwitch.AuthModeSwitch, { authMode: authMode, setAuthMode: setAuthMode })] })), jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Multi Wallet" })), jsxRuntime.jsx(MultiWalletSwitch.MultiWalletSwitch, { multiWallet: multiWallet && authMode === 'connect-and-sign', disabled: authMode === 'connect-only', setMultiWallet: setMultiWallet })] }))] })), isEmailProviderEnabled.isEmailProviderEnabled((projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) || []) && !user && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Log in with Email" })), jsxRuntime.jsx(LoginWithEmailSwitch.LoginWithEmailSwitch, {})] })), jsxRuntime.jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Email vs Wallet priority" })), jsxRuntime.jsx(LoginWithEmailViewDisplayPriorityOrderSwitch.LoginWithEmailViewDisplayPriorityOrderSwitch, {})] }))] }))] })) })));
 };
 
 exports.Toolkit = Toolkit;

package/src/lib/components/Toolkit/Toolkit.js

@@ -17,15 +17,15 @@ import '@dynamic-labs/multi-wallet';
 import { isEmailProviderEnabled } from '../../utils/functions/isEmailProviderEnabled/isEmailProviderEnabled.js';
 import { ShadowDOM } from '../ShadowDOM/ShadowDOM.js';
 import { ThemeSwitch } from './components/ThemeSwitch.js';
-import { BrandStyleSwitch } from './components/BrandStyleSwitch.js';
 import { PrimaryColorInput } from './components/PrimaryColorInput.js';
 import { AuthModeSwitch } from './components/AuthModeSwitch.js';
 import { LoginWithEmailSwitch } from './components/LoginWithEmailSwitch.js';
 import { LoginWithEmailViewDisplayPriorityOrderSwitch } from './components/LoginWithEmailViewDisplayPriorityOrderSwitch.js';
 import { TemplateSelect } from './components/TemplateSelect.js';
+import { MultiWalletSwitch } from './components/MultiWalletSwitch.js';
 
 const Toolkit = () => {
-    const { projectSettings, user, showAuthFlow, showDynamicUserProfile, toolkitEnabled, authMode, setAuthMode, } = useInternalDynamicContext();
+    const { projectSettings, user, showAuthFlow, showDynamicUserProfile, toolkitEnabled, authMode, setAuthMode, multiWallet, setMultiWallet, } = useInternalDynamicContext();
     const isToolkitVisible = useMemo(() => {
         if (!toolkitEnabled)
             return false;
@@ -33,7 +33,7 @@ const Toolkit = () => {
     }, [showAuthFlow, showDynamicUserProfile, toolkitEnabled]);
     if (!isToolkitVisible)
         return null;
-    return (jsx(ShadowDOM, Object.assign({ dataTestId: 'toolkit-shadowdom', className: 'toolkit-shadowdom', zIndex: toolkitZIndex }, { children: jsxs("div", Object.assign({ className: 'toolkit__container' }, { children: [jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Theme" })), jsx(ThemeSwitch, {})] })), jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Template" })), jsx(TemplateSelect, {})] })), jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Brand" })), jsx(BrandStyleSwitch, {})] })), jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Primary Color" })), jsx(PrimaryColorInput, {})] })), jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Auth mode" })), jsx(AuthModeSwitch, { authMode: authMode, setAuthMode: setAuthMode })] })), isEmailProviderEnabled((projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) || []) && !user && (jsxs(Fragment, { children: [jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Log in with Email" })), jsx(LoginWithEmailSwitch, {})] })), jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Email vs Wallet priority" })), jsx(LoginWithEmailViewDisplayPriorityOrderSwitch, {})] }))] }))] })) })));
+    return (jsx(ShadowDOM, Object.assign({ dataTestId: 'toolkit-shadowdom', className: 'toolkit-shadowdom', zIndex: toolkitZIndex }, { children: jsxs("div", Object.assign({ className: 'toolkit__container' }, { children: [jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Theme" })), jsx(ThemeSwitch, {})] })), jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Template" })), jsx(TemplateSelect, {})] })), jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Primary Color" })), jsx(PrimaryColorInput, {})] })), !user && (jsxs(Fragment, { children: [jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Auth mode" })), jsx(AuthModeSwitch, { authMode: authMode, setAuthMode: setAuthMode })] })), jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Multi Wallet" })), jsx(MultiWalletSwitch, { multiWallet: multiWallet && authMode === 'connect-and-sign', disabled: authMode === 'connect-only', setMultiWallet: setMultiWallet })] }))] })), isEmailProviderEnabled((projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) || []) && !user && (jsxs(Fragment, { children: [jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Log in with Email" })), jsx(LoginWithEmailSwitch, {})] })), jsxs("div", Object.assign({ className: 'toolkit__switcher' }, { children: [jsx(Typography, Object.assign({ className: 'switcher__copy', as: 'h2', variant: 'body_normal' }, { children: "Email vs Wallet priority" })), jsx(LoginWithEmailViewDisplayPriorityOrderSwitch, {})] }))] }))] })) })));
 };
 
 export { Toolkit };

package/src/lib/components/Toolkit/components/MultiWalletSwitch.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var Switch = require('../../Switch/Switch.cjs');
+
+const MultiWalletSwitch = ({ multiWallet, setMultiWallet, disabled, }) => (jsxRuntime.jsx(Switch.Switch, { disabled: disabled, firstButton: {
+        active: multiWallet,
+        handleButtonClick: () => setMultiWallet(true),
+        name: 'True',
+    }, secondButton: {
+        active: !multiWallet,
+        handleButtonClick: () => setMultiWallet(false),
+        name: 'False',
+    } }));
+
+exports.MultiWalletSwitch = MultiWalletSwitch;

package/src/lib/components/Toolkit/components/MultiWalletSwitch.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+type Props = {
+    multiWallet: boolean;
+    setMultiWallet: (multiWallet: boolean) => void;
+    disabled: boolean;
+};
+export declare const MultiWalletSwitch: ({ multiWallet, setMultiWallet, disabled, }: Props) => JSX.Element;
+export {};

package/src/lib/components/Toolkit/components/MultiWalletSwitch.js

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import { Switch } from '../../Switch/Switch.js';
+
+const MultiWalletSwitch = ({ multiWallet, setMultiWallet, disabled, }) => (jsx(Switch, { disabled: disabled, firstButton: {
+        active: multiWallet,
+        handleButtonClick: () => setMultiWallet(true),
+        name: 'True',
+    }, secondButton: {
+        active: !multiWallet,
+        handleButtonClick: () => setMultiWallet(false),
+        name: 'False',
+    } }));
+
+export { MultiWalletSwitch };

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

@@ -1,7 +1,7 @@
 export { ThemeSwitch } from './ThemeSwitch';
-export { BrandStyleSwitch } from './BrandStyleSwitch';
 export { PrimaryColorInput } from './PrimaryColorInput';
 export { AuthModeSwitch } from './AuthModeSwitch';
 export { LoginWithEmailSwitch } from './LoginWithEmailSwitch';
 export { LoginWithEmailViewDisplayPriorityOrderSwitch } from './LoginWithEmailViewDisplayPriorityOrderSwitch';
 export { TemplateSelect } from './TemplateSelect';
+export { MultiWalletSwitch } from './MultiWalletSwitch';

package/src/lib/components/Tooltip/Tooltip.cjs

@@ -26,6 +26,7 @@ require('../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetu
 require('../../context/DynamicContext/DynamicContext.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../context/AccountExistsContext/AccountExistsContext.cjs');
 var useElementById = require('../../utils/hooks/useElementById/useElementById.cjs');
 var usePrevious = require('../../utils/hooks/usePrevious/usePrevious.cjs');
 var ShadowDOM = require('../ShadowDOM/ShadowDOM.cjs');
@@ -41,6 +42,8 @@ require('../Popper/Popper/Popper.cjs');
 require('../Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
+require('../InlineWidget/InlineWidget.cjs');
+require('../MenuList/Dropdown/Dropdown.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');

package/src/lib/components/Tooltip/Tooltip.js

@@ -22,6 +22,7 @@ import '../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup
 import '../../context/DynamicContext/DynamicContext.js';
 import '../../context/ErrorContext/ErrorContext.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../context/AccountExistsContext/AccountExistsContext.js';
 import { useElementById } from '../../utils/hooks/useElementById/useElementById.js';
 import { usePrevious } from '../../utils/hooks/usePrevious/usePrevious.js';
 import { ShadowDOM } from '../ShadowDOM/ShadowDOM.js';
@@ -37,6 +38,8 @@ import '../Popper/Popper/Popper.js';
 import '../Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
+import '../InlineWidget/InlineWidget.js';
+import '../MenuList/Dropdown/Dropdown.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';

package/src/lib/components/TosAndPp/TosAndPp.cjs

@@ -8,9 +8,24 @@ require('@dynamic-labs/utils');
 var isConnectOnly = require('../../utils/hooks/authenticationHooks/helpers/isConnectOnly.cjs');
 var Typography = require('../Typography/Typography.cjs');
 
-const TosAndPp = ({ privacyPolicyUrl, termsOfServiceUrl, }) => {
-    const { user, authMode } = useInternalDynamicContext.useInternalDynamicContext();
-    return (jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'body_small', weight: 'regular', className: 'tos-and-pp__text' }, { children: ["By ", isConnectOnly.isConnectOnly(user, authMode) ? 'connecting' : 'logging in', ", you agree to", jsxRuntime.jsx("br", {}), "our\u00A0", jsxRuntime.jsx("a", Object.assign({ className: 'tos-and-pp__link', href: termsOfServiceUrl, target: '_blank', rel: 'noreferrer' }, { children: "Terms of Service" })), "\u00A0&\u00A0", jsxRuntime.jsx("a", Object.assign({ className: 'tos-and-pp__link', href: privacyPolicyUrl, target: '_blank', rel: 'noreferrer' }, { children: "Privacy Policy" })), "."] })));
+const TosAndPp = () => {
+    const { user, authMode, customPrivacyPolicy, customTermsOfServices, privacyPolicyUrl, termsOfServiceUrl, } = useInternalDynamicContext.useInternalDynamicContext();
+    const connectionType = isConnectOnly.isConnectOnly(user, authMode)
+        ? 'connecting'
+        : 'logging in';
+    const renderTermsOfServices = () => {
+        if (!termsOfServiceUrl) {
+            return;
+        }
+        return (jsxRuntime.jsx("a", Object.assign({ className: 'tos-and-pp__link', href: termsOfServiceUrl, target: '_blank', rel: 'noreferrer' }, { children: "Terms of Service" })));
+    };
+    const renderPrivacyPolicy = () => {
+        if (!privacyPolicyUrl) {
+            return;
+        }
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [termsOfServiceUrl && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "\u00A0&\u00A0" }), jsxRuntime.jsx("a", Object.assign({ className: 'tos-and-pp__link', href: privacyPolicyUrl, target: '_blank', rel: 'noreferrer' }, { children: "Privacy Policy" }))] }));
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(privacyPolicyUrl || termsOfServiceUrl) && (jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'body_small', weight: 'regular', className: 'tos-and-pp__text' }, { children: ["By ", connectionType, ", you agree to", jsxRuntime.jsx("br", {}), "our\u00A0", renderTermsOfServices(), renderPrivacyPolicy(), "."] }))), customTermsOfServices, customPrivacyPolicy] }));
 };
 
 exports.TosAndPp = TosAndPp;

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

@@ -1,7 +1,2 @@
 /// <reference types="react" />
-type Props = {
-    privacyPolicyUrl: string;
-    termsOfServiceUrl: string;
-};
-export declare const TosAndPp: ({ privacyPolicyUrl, termsOfServiceUrl, }: Props) => JSX.Element | null;
-export {};
+export declare const TosAndPp: () => JSX.Element | null;

package/src/lib/components/TosAndPp/TosAndPp.js

@@ -1,12 +1,27 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.js';
 import '@dynamic-labs/utils';
 import { isConnectOnly } from '../../utils/hooks/authenticationHooks/helpers/isConnectOnly.js';
 import { Typography } from '../Typography/Typography.js';
 
-const TosAndPp = ({ privacyPolicyUrl, termsOfServiceUrl, }) => {
-    const { user, authMode } = useInternalDynamicContext();
-    return (jsxs(Typography, Object.assign({ variant: 'body_small', weight: 'regular', className: 'tos-and-pp__text' }, { children: ["By ", isConnectOnly(user, authMode) ? 'connecting' : 'logging in', ", you agree to", jsx("br", {}), "our\u00A0", jsx("a", Object.assign({ className: 'tos-and-pp__link', href: termsOfServiceUrl, target: '_blank', rel: 'noreferrer' }, { children: "Terms of Service" })), "\u00A0&\u00A0", jsx("a", Object.assign({ className: 'tos-and-pp__link', href: privacyPolicyUrl, target: '_blank', rel: 'noreferrer' }, { children: "Privacy Policy" })), "."] })));
+const TosAndPp = () => {
+    const { user, authMode, customPrivacyPolicy, customTermsOfServices, privacyPolicyUrl, termsOfServiceUrl, } = useInternalDynamicContext();
+    const connectionType = isConnectOnly(user, authMode)
+        ? 'connecting'
+        : 'logging in';
+    const renderTermsOfServices = () => {
+        if (!termsOfServiceUrl) {
+            return;
+        }
+        return (jsx("a", Object.assign({ className: 'tos-and-pp__link', href: termsOfServiceUrl, target: '_blank', rel: 'noreferrer' }, { children: "Terms of Service" })));
+    };
+    const renderPrivacyPolicy = () => {
+        if (!privacyPolicyUrl) {
+            return;
+        }
+        return (jsxs(Fragment, { children: [termsOfServiceUrl && jsx(Fragment, { children: "\u00A0&\u00A0" }), jsx("a", Object.assign({ className: 'tos-and-pp__link', href: privacyPolicyUrl, target: '_blank', rel: 'noreferrer' }, { children: "Privacy Policy" }))] }));
+    };
+    return (jsxs(Fragment, { children: [(privacyPolicyUrl || termsOfServiceUrl) && (jsxs(Typography, Object.assign({ variant: 'body_small', weight: 'regular', className: 'tos-and-pp__text' }, { children: ["By ", connectionType, ", you agree to", jsx("br", {}), "our\u00A0", renderTermsOfServices(), renderPrivacyPolicy(), "."] }))), customTermsOfServices, customPrivacyPolicy] }));
 };
 
 export { TosAndPp };

package/src/lib/components/TransactionConfirmationPageLayout/TransactionConfirmationPageLayout.cjs

@@ -36,7 +36,7 @@ var PoweredByDynamic = require('../PoweredByDynamic/PoweredByDynamic.cjs');
 const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBack, title, error, appOrigin, appLogoUrl, appName, onClickSend, disableSendButton, displayPoweredByDynamicFooter = false, warningMessage, children, }) => {
     const closeButton = onClickClose && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickClose, "data-testid": 'close', disabled: isLoading }, { children: jsxRuntime.jsx(close.ReactComponent, {}) })));
     const backButton = onClickBack && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) })));
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ trailing: closeButton, leading: backButton, alignContent: 'bottom' }, { children: jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: (props) => (jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'brand-primary' }, { children: jsxRuntime.jsx(signCircle.ReactComponent, Object.assign({}, props)) }))), iconSize: 64, isSpinning: true }) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-confirmation__body' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'title', color: 'primary', className: 'transaction-confirmation__title' }, { children: title })), jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}) }, { children: error && (jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__error' }, { children: jsxRuntime.jsx(Alert.Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-confirmation__content' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__app-origin-tile' }, { children: jsxRuntime.jsx(AppOriginTile.AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }) })), jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__rows' }, { children: children }))] })), jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}) }, { children: warningMessage && (jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__warning' }, { children: jsxRuntime.jsx(Alert.Alert, Object.assign({ icon: 'error', variant: 'warning', contentDataTestId: 'warning_content' }, { children: warningMessage })) }))) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-confirmation__actions' }, { children: [onClickClose && (jsxRuntime.jsx(Button.Button, Object.assign({ buttonVariant: 'secondary', onClick: onClickClose, expanded: true, buttonPadding: 'large', buttonRounded: 'default', disabled: isLoading }, { children: "Cancel" }))), jsxRuntime.jsx(Button.Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'large', onClick: onClickSend, expanded: true, buttonRounded: 'default', loading: isLoading, disabled: disableSendButton }, { children: "Send" }))] })), displayPoweredByDynamicFooter && (jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__footer' }, { children: jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {}) })))] }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ trailing: closeButton, leading: backButton, alignContent: 'bottom' }, { children: jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: (props) => (jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'brand-primary' }, { children: jsxRuntime.jsx(signCircle.ReactComponent, Object.assign({}, props)) }))), iconSize: 64, isSpinning: true }) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-confirmation__body' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'title', color: 'primary', className: 'transaction-confirmation__title' }, { children: title })), jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}) }, { children: error && (jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__error' }, { children: jsxRuntime.jsx(Alert.Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-confirmation__content' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__app-origin-tile' }, { children: jsxRuntime.jsx(AppOriginTile.AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }) })), jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__rows' }, { children: children }))] })), jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}) }, { children: warningMessage && (jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__warning' }, { children: jsxRuntime.jsx(Alert.Alert, Object.assign({ icon: 'error', variant: 'warning', contentDataTestId: 'warning_content' }, { children: warningMessage })) }))) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-confirmation__actions' }, { children: [onClickClose && (jsxRuntime.jsx(Button.Button, Object.assign({ buttonVariant: 'secondary', onClick: onClickClose, expanded: true, buttonPadding: 'large', buttonRounded: 'default', disabled: isLoading }, { children: "Cancel" }))), jsxRuntime.jsx(Button.Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'large', onClick: onClickSend, expanded: true, buttonRounded: 'default', loading: isLoading, disabled: disableSendButton }, { children: "Send" }))] })), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'transaction-confirmation__footer' }))] }))] }));
 };
 
 exports.TransactionConfirmationPageLayout = TransactionConfirmationPageLayout;

package/src/lib/components/TransactionConfirmationPageLayout/TransactionConfirmationPageLayout.js

@@ -32,7 +32,7 @@ import { PoweredByDynamic } from '../PoweredByDynamic/PoweredByDynamic.js';
 const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBack, title, error, appOrigin, appLogoUrl, appName, onClickSend, disableSendButton, displayPoweredByDynamicFooter = false, warningMessage, children, }) => {
     const closeButton = onClickClose && (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickClose, "data-testid": 'close', disabled: isLoading }, { children: jsx(SvgClose, {}) })));
     const backButton = onClickBack && (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsx(SvgChevronLeft, {}) })));
-    return (jsxs(Fragment, { children: [jsx(ModalHeader, Object.assign({ trailing: closeButton, leading: backButton, alignContent: 'bottom' }, { children: jsx(IconWithSpinner, { Icon: (props) => (jsx(Icon, Object.assign({ color: 'brand-primary' }, { children: jsx(SvgSignCircle, Object.assign({}, props)) }))), iconSize: 64, isSpinning: true }) })), jsxs("div", Object.assign({ className: 'transaction-confirmation__body' }, { children: [jsx(Typography, Object.assign({ variant: 'title', color: 'primary', className: 'transaction-confirmation__title' }, { children: title })), jsx(AnimatePresence, Object.assign({ animationComponent: jsx(VerticalDrawerTransition, {}) }, { children: error && (jsx("div", Object.assign({ className: 'transaction-confirmation__error' }, { children: jsx(Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), jsxs("div", Object.assign({ className: 'transaction-confirmation__content' }, { children: [jsx("div", Object.assign({ className: 'transaction-confirmation__app-origin-tile' }, { children: jsx(AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }) })), jsx("div", Object.assign({ className: 'transaction-confirmation__rows' }, { children: children }))] })), jsx(AnimatePresence, Object.assign({ animationComponent: jsx(VerticalDrawerTransition, {}) }, { children: warningMessage && (jsx("div", Object.assign({ className: 'transaction-confirmation__warning' }, { children: jsx(Alert, Object.assign({ icon: 'error', variant: 'warning', contentDataTestId: 'warning_content' }, { children: warningMessage })) }))) })), jsxs("div", Object.assign({ className: 'transaction-confirmation__actions' }, { children: [onClickClose && (jsx(Button, Object.assign({ buttonVariant: 'secondary', onClick: onClickClose, expanded: true, buttonPadding: 'large', buttonRounded: 'default', disabled: isLoading }, { children: "Cancel" }))), jsx(Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'large', onClick: onClickSend, expanded: true, buttonRounded: 'default', loading: isLoading, disabled: disableSendButton }, { children: "Send" }))] })), displayPoweredByDynamicFooter && (jsx("div", Object.assign({ className: 'transaction-confirmation__footer' }, { children: jsx(PoweredByDynamic, {}) })))] }))] }));
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, Object.assign({ trailing: closeButton, leading: backButton, alignContent: 'bottom' }, { children: jsx(IconWithSpinner, { Icon: (props) => (jsx(Icon, Object.assign({ color: 'brand-primary' }, { children: jsx(SvgSignCircle, Object.assign({}, props)) }))), iconSize: 64, isSpinning: true }) })), jsxs("div", Object.assign({ className: 'transaction-confirmation__body' }, { children: [jsx(Typography, Object.assign({ variant: 'title', color: 'primary', className: 'transaction-confirmation__title' }, { children: title })), jsx(AnimatePresence, Object.assign({ animationComponent: jsx(VerticalDrawerTransition, {}) }, { children: error && (jsx("div", Object.assign({ className: 'transaction-confirmation__error' }, { children: jsx(Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), jsxs("div", Object.assign({ className: 'transaction-confirmation__content' }, { children: [jsx("div", Object.assign({ className: 'transaction-confirmation__app-origin-tile' }, { children: jsx(AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }) })), jsx("div", Object.assign({ className: 'transaction-confirmation__rows' }, { children: children }))] })), jsx(AnimatePresence, Object.assign({ animationComponent: jsx(VerticalDrawerTransition, {}) }, { children: warningMessage && (jsx("div", Object.assign({ className: 'transaction-confirmation__warning' }, { children: jsx(Alert, Object.assign({ icon: 'error', variant: 'warning', contentDataTestId: 'warning_content' }, { children: warningMessage })) }))) })), jsxs("div", Object.assign({ className: 'transaction-confirmation__actions' }, { children: [onClickClose && (jsx(Button, Object.assign({ buttonVariant: 'secondary', onClick: onClickClose, expanded: true, buttonPadding: 'large', buttonRounded: 'default', disabled: isLoading }, { children: "Cancel" }))), jsx(Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'large', onClick: onClickSend, expanded: true, buttonRounded: 'default', loading: isLoading, disabled: disableSendButton }, { children: "Send" }))] })), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'transaction-confirmation__footer' }))] }))] }));
 };
 
 export { TransactionConfirmationPageLayout };

package/src/lib/components/TransactionStatusLayout/TransactionStatusLayout.cjs

@@ -33,6 +33,7 @@ require('../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetu
 require('../../context/DynamicContext/DynamicContext.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('react-dom');
 require('../ShadowDOM/ShadowDOM.cjs');
 require('react-focus-lock');
@@ -44,6 +45,8 @@ require('../Popper/Popper/Popper.cjs');
 require('../Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
+require('../InlineWidget/InlineWidget.cjs');
+require('../MenuList/Dropdown/Dropdown.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
@@ -52,7 +55,7 @@ var TransactionRow = require('../TransactionConfirmationPageLayout/components/Tr
 const TransactionStatusLayout = ({ destinationAddress, amount, networkName, networkCurrency, NetworkIcon, onDone, displayPoweredByDynamicFooter = true, onClickClose, }) => {
     const closeButton = onClickClose && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickClose, "data-testid": 'close' }, { children: jsxRuntime.jsx(close.ReactComponent, {}) })));
     const networkIcon = (jsxRuntime.jsx("div", Object.assign({ className: 'transaction-status-layout__network-icon' }, { children: NetworkIcon })));
-    return (jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-status-layout' }, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ trailing: closeButton, alignContent: 'bottom' }, { children: jsxRuntime.jsx(IconWithStatus.IconWithStatus, { containerClassName: 'transaction-status-layout__status-icon', iconSize: 50, Icon: signCircle.ReactComponent, InnerIcon: check.ReactComponent }) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-status-layout__body' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'transaction-status-layout__title' }, { children: "Transaction successfully sent" })), jsxRuntime.jsx("div", Object.assign({ className: 'transaction-status-layout__content' }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-status-layout__rows' }, { children: [jsxRuntime.jsx(TransactionRow.TransactionRow, Object.assign({ label: 'Recipient' }, { children: shortenWalletAddress.shortenWalletAddress(destinationAddress, 3, 3) })), jsxRuntime.jsxs(TransactionRow.TransactionRow, Object.assign({ label: 'Network' }, { children: [networkIcon, jsxRuntime.jsx("span", Object.assign({ className: 'transaction-status-layout__network-name' }, { children: networkName }))] })), jsxRuntime.jsxs(TransactionRow.TransactionRow, Object.assign({ label: 'Total amount' }, { children: [amount, jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'span', color: 'secondary', className: 'transaction-status-layout__network-currency' }, { children: networkCurrency }))] }))] })) })), jsxRuntime.jsx("div", Object.assign({ className: 'transaction-status-layout__actions' }, { children: jsxRuntime.jsx(Button.Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'large', expanded: true, buttonRounded: 'default', onClick: onDone }, { children: "Continue" })) })), displayPoweredByDynamicFooter && (jsxRuntime.jsx("div", Object.assign({ className: 'transaction-status-layout__footer' }, { children: jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {}) })))] }))] })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-status-layout' }, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ trailing: closeButton, alignContent: 'bottom' }, { children: jsxRuntime.jsx(IconWithStatus.IconWithStatus, { containerClassName: 'transaction-status-layout__status-icon', iconSize: 50, Icon: signCircle.ReactComponent, InnerIcon: check.ReactComponent }) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-status-layout__body' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'transaction-status-layout__title' }, { children: "Transaction successfully sent" })), jsxRuntime.jsx("div", Object.assign({ className: 'transaction-status-layout__content' }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-status-layout__rows' }, { children: [jsxRuntime.jsx(TransactionRow.TransactionRow, Object.assign({ label: 'Recipient' }, { children: shortenWalletAddress.shortenWalletAddress(destinationAddress, 3, 3) })), jsxRuntime.jsxs(TransactionRow.TransactionRow, Object.assign({ label: 'Network' }, { children: [networkIcon, jsxRuntime.jsx("span", Object.assign({ className: 'transaction-status-layout__network-name' }, { children: networkName }))] })), jsxRuntime.jsxs(TransactionRow.TransactionRow, Object.assign({ label: 'Total amount' }, { children: [amount, jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'span', color: 'secondary', className: 'transaction-status-layout__network-currency' }, { children: networkCurrency }))] }))] })) })), jsxRuntime.jsx("div", Object.assign({ className: 'transaction-status-layout__actions' }, { children: jsxRuntime.jsx(Button.Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'large', expanded: true, buttonRounded: 'default', onClick: onDone }, { children: "Continue" })) })), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'transaction-status-layout__footer' }))] }))] })));
 };
 
 exports.TransactionStatusLayout = TransactionStatusLayout;