@dynamic-labs/sdk-react-core 0.18.0-RC.2 → 0.18.0-RC.21

package/src/lib/components/Portal/Portal.js

@@ -19,6 +19,7 @@ import 'ethers';
 import '../../shared/consts/index.js';
 import '@dynamic-labs/multi-wallet';
 import '@dynamic-labs/rpc-providers';
+import '../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../context/DynamicContext/DynamicContext.js';
 import '../../context/ErrorContext/ErrorContext.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
@@ -32,7 +33,8 @@ import '../Popper/Popper/Popper.js';
 import '../Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
-import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+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';
@@ -60,11 +62,11 @@ const ModalComponent = ({ children, handleClose, withBackdrop = true, zIndex, wh
         inputKey: 'Escape',
         onKeyPressed: handleClose,
     });
-    return (jsxs(ReactFocusLock, Object.assign({ className: 'modal__container', whiteList: whiteList }, { children: [withBackdrop && (jsx("div", { "data-testid": 'portal-backdrop', role: 'button', onClick: (e) => {
+    return (jsxs(ReactFocusLock, Object.assign({ className: 'portal__container', whiteList: whiteList }, { children: [withBackdrop && (jsx("div", { "data-testid": 'portal-backdrop', role: 'button', onClick: (e) => {
                     onBackdropClick(e);
                 }, onKeyDown: handleKeyClose, tabIndex: 0, "aria-label": 'Close modal', 
                 // z-index - 2 to ensure that the backdrop is always behind the content
-                style: { zIndex: zIndex ? zIndex - 2 : undefined }, className: 'modal__backdrop' })), jsx("div", Object.assign({ className: 'modal', style: { zIndex } }, { children: children }))] })));
+                style: { zIndex: zIndex ? zIndex - 2 : undefined }, className: 'portal__backdrop' })), jsx("div", Object.assign({ style: { zIndex } }, { children: children }))] })));
 };
 const Portal = ({ children, isShown, handleClose, withBackdrop, zIndex, transitionEvents, elementId = 'dynamic-modal', }) => {
     const modalRootElementRef = useElementById(elementId);

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/SelectWalletChainLayout/SelectWalletChainLayout.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var Typography = require('../Typography/Typography.cjs');
+var IconWithSpinner = require('../IconWithSpinner/IconWithSpinner.cjs');
+var PoweredByDynamic = require('../PoweredByDynamic/PoweredByDynamic.cjs');
+
+const SelectWalletChainLayout = ({ children, HeaderIcon }) => (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { className: 'select-wallet-chain-layout__icon', Icon: HeaderIcon, iconSize: 100, isSpinning: true }), jsxRuntime.jsxs("div", Object.assign({ className: 'select-wallet-chain-layout__body' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'select-wallet-chain-layout__title', as: 'h6', color: 'primary', variant: 'title' }, { children: "Select Chain" })), jsxRuntime.jsx(Typography.Typography, Object.assign({ className: 'select-wallet-chain-layout__text', as: 'p', color: 'secondary', variant: 'body_normal' }, { children: "This wallet supports multiple chains. Select which chain you'd like to connect to" })), jsxRuntime.jsx("div", Object.assign({ className: 'select-wallet-chain-layout__list' }, { children: children }))] })), jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'select-wallet-chain-layout__powered-by' })] }));
+
+exports.SelectWalletChainLayout = SelectWalletChainLayout;

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

@@ -1,8 +1,6 @@
 import { FC, PropsWithChildren, ReactElement } from 'react';
 type SelectWalletChainLayoutProps = {
     HeaderIcon?: ReactElement;
-    onClose?: () => void;
-    onBack?: () => void;
 };
 export declare const SelectWalletChainLayout: FC<PropsWithChildren<SelectWalletChainLayoutProps>>;
 export {};

package/src/lib/components/SelectWalletChainLayout/SelectWalletChainLayout.js

@@ -0,0 +1,8 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Typography } from '../Typography/Typography.js';
+import { IconWithSpinner } from '../IconWithSpinner/IconWithSpinner.js';
+import { PoweredByDynamic } from '../PoweredByDynamic/PoweredByDynamic.js';
+
+const SelectWalletChainLayout = ({ children, HeaderIcon }) => (jsxs("div", { children: [jsx(IconWithSpinner, { className: 'select-wallet-chain-layout__icon', Icon: HeaderIcon, iconSize: 100, isSpinning: true }), jsxs("div", Object.assign({ className: 'select-wallet-chain-layout__body' }, { children: [jsx(Typography, Object.assign({ className: 'select-wallet-chain-layout__title', as: 'h6', color: 'primary', variant: 'title' }, { children: "Select Chain" })), jsx(Typography, Object.assign({ className: 'select-wallet-chain-layout__text', as: 'p', color: 'secondary', variant: 'body_normal' }, { children: "This wallet supports multiple chains. Select which chain you'd like to connect to" })), jsx("div", Object.assign({ className: 'select-wallet-chain-layout__list' }, { children: children }))] })), jsx(PoweredByDynamic, { classNameRoot: 'select-wallet-chain-layout__powered-by' })] }));
+
+export { SelectWalletChainLayout };

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,12 +3,44 @@
 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');
+require('@dynamic-labs/sdk-api');
+require('../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('../../context/ViewContext/ViewContext.cjs');
+var check = require('../../shared/assets/check.cjs');
+require('@dynamic-labs/wallet-book');
+require('@dynamic-labs/utils');
+require('../../utils/constants/colors.cjs');
+require('../../shared/utils/classes/storage/localStorage.cjs');
+require('ethers');
+require('../../shared/consts/index.cjs');
 
-const Step = ({ children, icon, active = false, }) => (jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('step', {
-        step__active: active,
-    }) }, { children: [icon ? (jsxRuntime.jsx(Icon.Icon, Object.assign({ size: 'small', className: 'step__icon' }, { children: icon }))) : (jsxRuntime.jsx("div", Object.assign({ className: 'step__index' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', color: active ? undefined : 'secondary' }, { children: jsxRuntime.jsx("span", { className: 'step__index-label' }) })) }))), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', color: active ? 'primary' : 'secondary' }, { 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,7 +1,7 @@
 import { FC, PropsWithChildren, ReactElement } from 'react';
-type StepProps = {
+export type StepProps = {
     icon?: ReactElement;
-    active?: boolean;
+    state?: 'current' | 'done' | 'upcoming' | 'default';
+    className?: string;
 };
 export declare const Step: FC<PropsWithChildren<StepProps>>;
-export {};

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

@@ -1,10 +1,42 @@
-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';
+import '@dynamic-labs/sdk-api';
+import '../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import '../../context/ViewContext/ViewContext.js';
+import { ReactComponent as SvgCheck } from '../../shared/assets/check.js';
+import '@dynamic-labs/wallet-book';
+import '@dynamic-labs/utils';
+import '../../utils/constants/colors.js';
+import '../../shared/utils/classes/storage/localStorage.js';
+import 'ethers';
+import '../../shared/consts/index.js';
 
-const Step = ({ children, icon, active = false, }) => (jsxs("div", Object.assign({ className: classNames('step', {
-        step__active: active,
-    }) }, { children: [icon ? (jsx(Icon, Object.assign({ size: 'small', className: 'step__icon' }, { children: icon }))) : (jsx("div", Object.assign({ className: 'step__index' }, { children: jsx(Typography, Object.assign({ variant: 'body_small', color: active ? undefined : 'secondary' }, { children: jsx("span", { className: 'step__index-label' }) })) }))), jsx(Typography, Object.assign({ variant: 'body_small', color: active ? 'primary' : 'secondary' }, { 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

@@ -22,6 +22,7 @@ var classNames = require('../../utils/functions/classNames/classNames.cjs');
 require('../../config/ApiEndpoint.cjs');
 require('@dynamic-labs/multi-wallet');
 require('@dynamic-labs/rpc-providers');
+require('../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../context/DynamicContext/DynamicContext.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
@@ -40,7 +41,8 @@ require('../Popper/Popper/Popper.cjs');
 require('../Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
-require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+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');
@@ -59,7 +61,7 @@ const Tooltip = ({ children, content, className, as: Tag = 'span', }) => {
             const childrenBounding = childrenRef.current.getBoundingClientRect();
             setVector([
                 childrenBounding.left + childrenBounding.width / 2,
-                childrenBounding.top,
+                childrenBounding.top - 4, //add 4px margin over the children
             ]);
         }
     }, []);

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

@@ -18,6 +18,7 @@ import { classNames } from '../../utils/functions/classNames/classNames.js';
 import '../../config/ApiEndpoint.js';
 import '@dynamic-labs/multi-wallet';
 import '@dynamic-labs/rpc-providers';
+import '../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../context/DynamicContext/DynamicContext.js';
 import '../../context/ErrorContext/ErrorContext.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
@@ -36,7 +37,8 @@ import '../Popper/Popper/Popper.js';
 import '../Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
-import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+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';
@@ -55,7 +57,7 @@ const Tooltip = ({ children, content, className, as: Tag = 'span', }) => {
             const childrenBounding = childrenRef.current.getBoundingClientRect();
             setVector([
                 childrenBounding.left + childrenBounding.width / 2,
-                childrenBounding.top,
+                childrenBounding.top - 4, //add 4px margin over the children
             ]);
         }
     }, []);

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

@@ -3,13 +3,29 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs');
+require('@dynamic-labs/utils');
+var isConnectOnly = require('../../utils/hooks/authenticationHooks/helpers/isConnectOnly.cjs');
 var Typography = require('../Typography/Typography.cjs');
 
-const TosAndPp = ({ privacyPolicyUrl, termsOfServiceUrl, mode, }) => {
-    if (!privacyPolicyUrl || !termsOfServiceUrl) {
-        return null;
-    }
-    return (jsxRuntime.jsxs(Typography.Typography, Object.assign({ variant: 'body_mini', weight: 'regular', className: 'tos-and-pp__text' }, { children: ["By ", mode, ", you agree to our\u00A0", jsxRuntime.jsx("a", Object.assign({ className: 'tos-and-pp__link', href: termsOfServiceUrl, target: '_blank', rel: 'noreferrer' }, { children: "Terms of Services" })), "\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,8 +1,2 @@
 /// <reference types="react" />
-type Props = {
-    mode: 'connecting' | 'signing' | 'logging in';
-    privacyPolicyUrl?: string;
-    termsOfServiceUrl?: string;
-};
-export declare const TosAndPp: ({ privacyPolicyUrl, termsOfServiceUrl, mode, }: Props) => JSX.Element | null;
-export {};
+export declare const TosAndPp: () => JSX.Element | null;

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

@@ -1,11 +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, mode, }) => {
-    if (!privacyPolicyUrl || !termsOfServiceUrl) {
-        return null;
-    }
-    return (jsxs(Typography, Object.assign({ variant: 'body_mini', weight: 'regular', className: 'tos-and-pp__text' }, { children: ["By ", mode, ", you agree to our\u00A0", jsx("a", Object.assign({ className: 'tos-and-pp__link', href: termsOfServiceUrl, target: '_blank', rel: 'noreferrer' }, { children: "Terms of Services" })), "\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 };