@dynamic-labs/sdk-react-core 0.19.0-alpha.18 → 0.19.0-alpha.19

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

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

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

@@ -69,7 +69,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, { type: 'button', onClick: onClickClose, "data-testid": 'close', children: jsxRuntime.jsx(close.ReactComponent, {}) }));
     const networkIcon = (jsxRuntime.jsx("span", { className: 'transaction-status-layout__network-icon', children: NetworkIcon }));
-    return (jsxRuntime.jsxs("div", { className: 'transaction-status-layout', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { 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", { className: 'transaction-status-layout__body', children: [jsxRuntime.jsx(Typography.Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'transaction-status-layout__title', children: "Transaction successfully sent" }), jsxRuntime.jsx("div", { className: 'transaction-status-layout__content', children: jsxRuntime.jsxs("div", { className: 'transaction-status-layout__rows', children: [jsxRuntime.jsx(TransactionRow.TransactionRow, { label: 'Recipient', children: shortenWalletAddress.shortenWalletAddress(destinationAddress, 3, 3) }), jsxRuntime.jsxs(TransactionRow.TransactionRow, { label: 'Network', children: [networkIcon, jsxRuntime.jsx("span", { className: 'transaction-status-layout__network-name', children: networkName })] }), jsxRuntime.jsxs(TransactionRow.TransactionRow, { label: 'Total amount', children: [amount, jsxRuntime.jsx(Typography.Typography, { as: 'span', color: 'secondary', className: 'transaction-status-layout__network-currency', children: networkCurrency })] })] }) }), jsxRuntime.jsx("div", { className: 'transaction-status-layout__actions', children: jsxRuntime.jsx(Button.Button, { buttonVariant: 'primary', buttonPadding: 'large', expanded: true, buttonRounded: 'default', onClick: onDone, loading: false, children: "Continue" }) }), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'transaction-status-layout__footer' }))] })] }));
+    return (jsxRuntime.jsxs("div", { className: 'transaction-status-layout', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { 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", { className: 'transaction-status-layout__body', children: [jsxRuntime.jsx(Typography.Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'transaction-status-layout__title', children: "Transaction successfully sent" }), jsxRuntime.jsx("div", { className: 'transaction-status-layout__content', children: jsxRuntime.jsxs("div", { className: 'transaction-status-layout__rows', children: [jsxRuntime.jsx(TransactionRow.TransactionRow, { label: 'Recipient', children: shortenWalletAddress.shortenWalletAddress(destinationAddress, 3, 3) }), jsxRuntime.jsxs(TransactionRow.TransactionRow, { label: 'Network', children: [networkIcon, jsxRuntime.jsx("span", { className: 'transaction-status-layout__network-name', children: networkName })] }), jsxRuntime.jsxs(TransactionRow.TransactionRow, { label: 'Total amount', children: [amount, jsxRuntime.jsx(Typography.Typography, { as: 'span', color: 'secondary', className: 'transaction-status-layout__network-currency', children: networkCurrency })] })] }) }), jsxRuntime.jsx("div", { className: 'transaction-status-layout__actions', children: jsxRuntime.jsx(Button.Button, { buttonVariant: 'primary', buttonPadding: 'large', expanded: true, onClick: onDone, loading: false, children: "Continue" }) }), displayPoweredByDynamicFooter && (jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { classNameRoot: 'transaction-status-layout__footer' }))] })] }));
 };
 
 exports.TransactionStatusLayout = TransactionStatusLayout;

package/src/lib/components/TransactionStatusLayout/TransactionStatusLayout.js

@@ -65,7 +65,7 @@ import { TransactionRow } from '../TransactionConfirmationPageLayout/components/
 const TransactionStatusLayout = ({ destinationAddress, amount, networkName, networkCurrency, NetworkIcon, onDone, displayPoweredByDynamicFooter = true, onClickClose, }) => {
     const closeButton = onClickClose && (jsx(IconButton, { type: 'button', onClick: onClickClose, "data-testid": 'close', children: jsx(SvgClose, {}) }));
     const networkIcon = (jsx("span", { className: 'transaction-status-layout__network-icon', children: NetworkIcon }));
-    return (jsxs("div", { className: 'transaction-status-layout', children: [jsx(ModalHeader, { trailing: closeButton, alignContent: 'bottom', children: jsx(IconWithStatus, { containerClassName: 'transaction-status-layout__status-icon', iconSize: 50, Icon: SvgSignCircle, InnerIcon: SvgCheck }) }), jsxs("div", { className: 'transaction-status-layout__body', children: [jsx(Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'transaction-status-layout__title', children: "Transaction successfully sent" }), jsx("div", { className: 'transaction-status-layout__content', children: jsxs("div", { className: 'transaction-status-layout__rows', children: [jsx(TransactionRow, { label: 'Recipient', children: shortenWalletAddress(destinationAddress, 3, 3) }), jsxs(TransactionRow, { label: 'Network', children: [networkIcon, jsx("span", { className: 'transaction-status-layout__network-name', children: networkName })] }), jsxs(TransactionRow, { label: 'Total amount', children: [amount, jsx(Typography, { as: 'span', color: 'secondary', className: 'transaction-status-layout__network-currency', children: networkCurrency })] })] }) }), jsx("div", { className: 'transaction-status-layout__actions', children: jsx(Button, { buttonVariant: 'primary', buttonPadding: 'large', expanded: true, buttonRounded: 'default', onClick: onDone, loading: false, children: "Continue" }) }), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'transaction-status-layout__footer' }))] })] }));
+    return (jsxs("div", { className: 'transaction-status-layout', children: [jsx(ModalHeader, { trailing: closeButton, alignContent: 'bottom', children: jsx(IconWithStatus, { containerClassName: 'transaction-status-layout__status-icon', iconSize: 50, Icon: SvgSignCircle, InnerIcon: SvgCheck }) }), jsxs("div", { className: 'transaction-status-layout__body', children: [jsx(Typography, { weight: 'medium', variant: 'title', color: 'primary', className: 'transaction-status-layout__title', children: "Transaction successfully sent" }), jsx("div", { className: 'transaction-status-layout__content', children: jsxs("div", { className: 'transaction-status-layout__rows', children: [jsx(TransactionRow, { label: 'Recipient', children: shortenWalletAddress(destinationAddress, 3, 3) }), jsxs(TransactionRow, { label: 'Network', children: [networkIcon, jsx("span", { className: 'transaction-status-layout__network-name', children: networkName })] }), jsxs(TransactionRow, { label: 'Total amount', children: [amount, jsx(Typography, { as: 'span', color: 'secondary', className: 'transaction-status-layout__network-currency', children: networkCurrency })] })] }) }), jsx("div", { className: 'transaction-status-layout__actions', children: jsx(Button, { buttonVariant: 'primary', buttonPadding: 'large', expanded: true, onClick: onDone, loading: false, children: "Continue" }) }), displayPoweredByDynamicFooter && (jsx(PoweredByDynamic, { classNameRoot: 'transaction-status-layout__footer' }))] })] }));
 };
 
 export { TransactionStatusLayout };

package/src/lib/components/Typography/Typography.cjs

@@ -17,7 +17,6 @@ const Typography = (_a) => {
         button_tertiary: 'typography--button-tertiary',
         numbers_big: 'typography--numbers-big',
         numbers_medium: 'typography--numbers-medium',
-        numbers_small: 'typography--numbers-small',
         title: 'typography--title',
     };
     const weightClassNameMap = {

package/src/lib/components/Typography/Typography.js

@@ -13,7 +13,6 @@ const Typography = (_a) => {
         button_tertiary: 'typography--button-tertiary',
         numbers_big: 'typography--numbers-big',
         numbers_medium: 'typography--numbers-medium',
-        numbers_small: 'typography--numbers-small',
         title: 'typography--title',
     };
     const weightClassNameMap = {

package/src/lib/components/Typography/Typography.types.d.ts

@@ -1,6 +1,6 @@
 import { ComponentPropsWithoutRef, ElementType, ReactElement } from 'react';
 export type TypographyTag = ElementType;
-export type TypographyVariant = 'title' | 'body_normal' | 'body_small' | 'body_mini' | 'button_primary' | 'button_secondary' | 'button_tertiary' | 'numbers_big' | 'numbers_medium' | 'numbers_small';
+export type TypographyVariant = 'title' | 'body_normal' | 'body_small' | 'body_mini' | 'button_primary' | 'button_secondary' | 'button_tertiary' | 'numbers_big' | 'numbers_medium';
 export type TypographyColor = 'primary' | 'secondary' | 'brand-primary' | 'tertiary' | 'link' | 'error-1' | 'error-2' | 'tooltip' | 'green-1';
 export type TypographyWeight = 'regular' | 'medium' | 'bold';
 export type TypographyTransform = 'uppercase';

package/src/lib/components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.cjs

@@ -21,7 +21,7 @@ var classNames = require('../../../../../../utils/functions/classNames/className
 var Tooltip = require('../../../../../Tooltip/Tooltip.cjs');
 var Typography = require('../../../../../Typography/Typography.cjs');
 
-const VerifiedEmailTooltip = (jsxRuntime.jsx(Typography.Typography, { variant: 'numbers_small', color: 'tooltip', children: "This email is verified" }));
+const VerifiedEmailTooltip = (jsxRuntime.jsx(Typography.Typography, { variant: 'numbers_medium', color: 'tooltip', children: "This email is verified" }));
 const VerifiedEmailIcon = ({ className, overwriteTooltipProps, }) => {
     const { user } = useInternalDynamicContext.useInternalDynamicContext();
     if (!(user === null || user === void 0 ? void 0 : user.email))

package/src/lib/components/UserProfile/parts/UserProfileField/components/VerifiedEmailIcon/VerifiedEmailIcon.js

@@ -17,7 +17,7 @@ import { classNames } from '../../../../../../utils/functions/classNames/classNa
 import { Tooltip } from '../../../../../Tooltip/Tooltip.js';
 import { Typography } from '../../../../../Typography/Typography.js';
 
-const VerifiedEmailTooltip = (jsx(Typography, { variant: 'numbers_small', color: 'tooltip', children: "This email is verified" }));
+const VerifiedEmailTooltip = (jsx(Typography, { variant: 'numbers_medium', color: 'tooltip', children: "This email is verified" }));
 const VerifiedEmailIcon = ({ className, overwriteTooltipProps, }) => {
     const { user } = useInternalDynamicContext();
     if (!(user === null || user === void 0 ? void 0 : user.email))

package/src/lib/components/UserProfile/parts/UserProfileSocialAccount/UserProfileSocialAccount.cjs

@@ -74,7 +74,7 @@ const UserProfileSocialAccount = ({ provider, }) => {
     const isActiveCredential = !primaryWallet &&
         connectedAccountInfo &&
         (connectedAccountInfo === null || connectedAccountInfo === void 0 ? void 0 : connectedAccountInfo.id) === (user === null || user === void 0 ? void 0 : user.lastVerifiedCredentialId);
-    const renderButton = () => (jsxRuntime.jsx(Button.Button, { buttonClassName: 'user-profile-social-account__button', buttonVariant: 'secondary', buttonRounded: 'small', buttonPadding: 'none', onClick: () => isProviderLinked
+    const renderButton = () => (jsxRuntime.jsx(Button.Button, { buttonClassName: 'user-profile-social-account__button', buttonVariant: 'secondary', buttonPadding: 'none', onClick: () => isProviderLinked
             ? unlinkSocialAccount(provider)
             : linkSocialAccount(provider), loading: isProcessing, dataTestId: `social-account-${isProviderLinked ? 'disconnect' : 'connect'}-button`, typographyProps: {
             color: 'secondary',

package/src/lib/components/UserProfile/parts/UserProfileSocialAccount/UserProfileSocialAccount.js

@@ -70,7 +70,7 @@ const UserProfileSocialAccount = ({ provider, }) => {
     const isActiveCredential = !primaryWallet &&
         connectedAccountInfo &&
         (connectedAccountInfo === null || connectedAccountInfo === void 0 ? void 0 : connectedAccountInfo.id) === (user === null || user === void 0 ? void 0 : user.lastVerifiedCredentialId);
-    const renderButton = () => (jsx(Button, { buttonClassName: 'user-profile-social-account__button', buttonVariant: 'secondary', buttonRounded: 'small', buttonPadding: 'none', onClick: () => isProviderLinked
+    const renderButton = () => (jsx(Button, { buttonClassName: 'user-profile-social-account__button', buttonVariant: 'secondary', buttonPadding: 'none', onClick: () => isProviderLinked
             ? unlinkSocialAccount(provider)
             : linkSocialAccount(provider), loading: isProcessing, dataTestId: `social-account-${isProviderLinked ? 'disconnect' : 'connect'}-button`, typographyProps: {
             color: 'secondary',

package/src/lib/components/UserProfileForm/UserProfileForm.cjs

@@ -48,7 +48,7 @@ const UserProfileForm = ({ filterFields, formClassName, fieldsContainerStyle, on
         shouldEnforcePolicies: options.shouldEnforcePolicies,
         userProfile: user,
     });
-    const makeButtonsContent = (isSubmitting, isValid, dirty) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!options.hideCancelButton && (jsxRuntime.jsx(Button.Button, Object.assign({ disabled: fetch, buttonRounded: 'small', expanded: true, buttonPadding: 'medium', buttonVariant: 'secondary', type: 'button', typographyProps: { variant: 'button_secondary' }, onClick: onEditProfileCancel, dataTestId: 'cancel-button' }, options.cancelButtonProps, { children: options.cancelText }))), jsxRuntime.jsx(Button.Button, Object.assign({ buttonClassName: 'dynamic-widget-footer__button', disabled: fetch || !isValid || !dirty, buttonRounded: 'small', expanded: true, type: 'submit', buttonPadding: 'medium', typographyProps: { variant: 'button_secondary' }, loading: isSubmitting, startSlot: jsxRuntime.jsx(check.ReactComponent, {}), dataTestId: 'submit-button' }, options.submitButtonProps, { children: options.submitText }))] }));
+    const makeButtonsContent = (isSubmitting, isValid, dirty) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!options.hideCancelButton && (jsxRuntime.jsx(Button.Button, Object.assign({ disabled: fetch, expanded: true, buttonPadding: 'medium', buttonVariant: 'secondary', type: 'button', typographyProps: { variant: 'button_secondary' }, onClick: onEditProfileCancel, dataTestId: 'cancel-button' }, options.cancelButtonProps, { children: options.cancelText }))), jsxRuntime.jsx(Button.Button, Object.assign({ buttonClassName: 'dynamic-widget-footer__button', disabled: fetch || !isValid || !dirty, expanded: true, type: 'submit', buttonPadding: 'medium', typographyProps: { variant: 'button_secondary' }, loading: isSubmitting, startSlot: jsxRuntime.jsx(check.ReactComponent, {}), dataTestId: 'submit-button' }, options.submitButtonProps, { children: options.submitText }))] }));
     return (jsxRuntime.jsx(formik.Formik, { onSubmit: onFormSubmit, initialValues: formikInitialValues, validationSchema: formikValidationSchema, validateOnChange: true, children: ({ errors, touched, isSubmitting, isValid, dirty }) => (jsxRuntime.jsxs(formik.Form, { className: classNames.classNames('dynamic-widget-edit-profile-view', formClassName), "data-testid": 'editUserProfileForm', children: [jsxRuntime.jsx("div", { className: 'dynamic-widget-edit-profile-view__fields', style: fieldsContainerStyle, children: jsxRuntime.jsx(index.UserDataFields, { errors: errors, fields: targetFields, touched: touched }) }), options.buttonsAsFooter ? (jsxRuntime.jsx(DynamicWidgetFooter.DynamicWidgetFooter, { children: makeButtonsContent(isSubmitting, isValid, dirty) })) : (makeButtonsContent(isSubmitting, isValid, dirty))] })) }));
 };
 

package/src/lib/components/UserProfileForm/UserProfileForm.js

@@ -44,7 +44,7 @@ const UserProfileForm = ({ filterFields, formClassName, fieldsContainerStyle, on
         shouldEnforcePolicies: options.shouldEnforcePolicies,
         userProfile: user,
     });
-    const makeButtonsContent = (isSubmitting, isValid, dirty) => (jsxs(Fragment, { children: [!options.hideCancelButton && (jsx(Button, Object.assign({ disabled: fetch, buttonRounded: 'small', expanded: true, buttonPadding: 'medium', buttonVariant: 'secondary', type: 'button', typographyProps: { variant: 'button_secondary' }, onClick: onEditProfileCancel, dataTestId: 'cancel-button' }, options.cancelButtonProps, { children: options.cancelText }))), jsx(Button, Object.assign({ buttonClassName: 'dynamic-widget-footer__button', disabled: fetch || !isValid || !dirty, buttonRounded: 'small', expanded: true, type: 'submit', buttonPadding: 'medium', typographyProps: { variant: 'button_secondary' }, loading: isSubmitting, startSlot: jsx(SvgCheck, {}), dataTestId: 'submit-button' }, options.submitButtonProps, { children: options.submitText }))] }));
+    const makeButtonsContent = (isSubmitting, isValid, dirty) => (jsxs(Fragment, { children: [!options.hideCancelButton && (jsx(Button, Object.assign({ disabled: fetch, expanded: true, buttonPadding: 'medium', buttonVariant: 'secondary', type: 'button', typographyProps: { variant: 'button_secondary' }, onClick: onEditProfileCancel, dataTestId: 'cancel-button' }, options.cancelButtonProps, { children: options.cancelText }))), jsx(Button, Object.assign({ buttonClassName: 'dynamic-widget-footer__button', disabled: fetch || !isValid || !dirty, expanded: true, type: 'submit', buttonPadding: 'medium', typographyProps: { variant: 'button_secondary' }, loading: isSubmitting, startSlot: jsx(SvgCheck, {}), dataTestId: 'submit-button' }, options.submitButtonProps, { children: options.submitText }))] }));
     return (jsx(Formik, { onSubmit: onFormSubmit, initialValues: formikInitialValues, validationSchema: formikValidationSchema, validateOnChange: true, children: ({ errors, touched, isSubmitting, isValid, dirty }) => (jsxs(Form, { className: classNames('dynamic-widget-edit-profile-view', formClassName), "data-testid": 'editUserProfileForm', children: [jsx("div", { className: 'dynamic-widget-edit-profile-view__fields', style: fieldsContainerStyle, children: jsx(UserDataFields, { errors: errors, fields: targetFields, touched: touched }) }), options.buttonsAsFooter ? (jsx(DynamicWidgetFooter, { children: makeButtonsContent(isSubmitting, isValid, dirty) })) : (makeButtonsContent(isSubmitting, isValid, dirty))] })) }));
 };
 

package/src/lib/context/DynamicContext/DynamicContext.cjs

@@ -724,13 +724,13 @@ const DynamicContextProvider = ({ children, theme, settings, locale: locale$1, }
             setShowDynamicUserProfile(true);
         }
     }, [multiWallet, multiWalletWidgetState, showDynamicUserProfile, user]);
-    return (jsxRuntime.jsx(reactI18next.I18nextProvider, { i18n: i18nSDKInstance, children: jsxRuntime.jsx(DynamicContext.Provider, { value: value, children: jsxRuntime.jsx(walletBook.WalletBookContextProvider, { walletBook: walletBook$1, children: jsxRuntime.jsx(ThemeContext.ThemeContextProvider, { customerTheme: parseTheme.parseTheme(theme, ((_h = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _h === void 0 ? void 0 : _h.modal) || undefined), designSettings: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design, children: jsxRuntime.jsx(LoadingContext.LoadingContextProvider, { children: jsxRuntime.jsx(ViewContext.ViewContextProvider, { initialView: helpers.getInitialView({
-                                connectedWallets,
-                                isAuthenticated,
-                                isBridgeFlow,
-                                isFullyConnected,
-                                isMultiWalletEnabled: multiWallet,
-                            }), children: jsxRuntime.jsx(AccountExistsContext.AccountExistsContextProvider, { children: jsxRuntime.jsx(WalletContext.WalletContextProvider, { canSync: didConnectedStateLoad, children: jsxRuntime.jsx(QrCodeContext.QrCodeContextProvider, { children: jsxRuntime.jsx(EmailVerificationContext.EmailVerificationContextProvider, { children: jsxRuntime.jsx(ErrorContext.ErrorContextProvider, { children: jsxRuntime.jsx(DynamicWidgetContext.DynamicWidgetContextProvider, { children: jsxRuntime.jsx(DynamicBridgeWidgetContext.DynamicBridgeWidgetContextProvider, { children: jsxRuntime.jsx(CaptchaContext.CaptchaContextProvider, { children: jsxRuntime.jsx(FundingContext.FundingContextProvider, { children: jsxRuntime.jsx(AccessDeniedContext.AccessDeniedContextProvider, { children: jsxRuntime.jsx(SendBalanceContext.SendBalanceContextProvider, { children: jsxRuntime.jsx(WalletGroupContext.WalletGroupContextProvider, { children: jsxRuntime.jsxs(UserFieldEditorContext.UserFieldEditorContextProvider, { children: [jsxRuntime.jsx(app.DynamicAuthFlow, {}), jsxRuntime.jsx(Toolkit.Toolkit, {}), jsxRuntime.jsx(FundingWidget.FundingWidget, {}), jsxRuntime.jsx(SyncPasskeyFlow.SyncPasskeyFlow, {}), confirmationModal, children] }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }));
+    return (jsxRuntime.jsx(reactI18next.I18nextProvider, { i18n: i18nSDKInstance, children: jsxRuntime.jsx(DynamicContext.Provider, { value: value, children: jsxRuntime.jsx(walletBook.WalletBookContextProvider, { walletBook: walletBook$1, children: jsxRuntime.jsx(ThemeContext.ThemeContextProvider, { customerTheme: parseTheme.parseTheme(theme, ((_h = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _h === void 0 ? void 0 : _h.modal) || undefined), designSettings: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design, children: jsxRuntime.jsx(LoadingContext.LoadingContextProvider, { children: jsxRuntime.jsx(ErrorContext.ErrorContextProvider, { children: jsxRuntime.jsx(ViewContext.ViewContextProvider, { initialView: helpers.getInitialView({
+                                    connectedWallets,
+                                    isAuthenticated,
+                                    isBridgeFlow,
+                                    isFullyConnected,
+                                    isMultiWalletEnabled: multiWallet,
+                                }), children: jsxRuntime.jsx(AccountExistsContext.AccountExistsContextProvider, { children: jsxRuntime.jsx(WalletContext.WalletContextProvider, { canSync: didConnectedStateLoad, children: jsxRuntime.jsx(QrCodeContext.QrCodeContextProvider, { children: jsxRuntime.jsx(EmailVerificationContext.EmailVerificationContextProvider, { children: jsxRuntime.jsx(DynamicWidgetContext.DynamicWidgetContextProvider, { children: jsxRuntime.jsx(DynamicBridgeWidgetContext.DynamicBridgeWidgetContextProvider, { children: jsxRuntime.jsx(CaptchaContext.CaptchaContextProvider, { children: jsxRuntime.jsx(FundingContext.FundingContextProvider, { children: jsxRuntime.jsx(AccessDeniedContext.AccessDeniedContextProvider, { children: jsxRuntime.jsx(SendBalanceContext.SendBalanceContextProvider, { children: jsxRuntime.jsx(WalletGroupContext.WalletGroupContextProvider, { children: jsxRuntime.jsxs(UserFieldEditorContext.UserFieldEditorContextProvider, { children: [jsxRuntime.jsx(app.DynamicAuthFlow, {}), jsxRuntime.jsx(Toolkit.Toolkit, {}), jsxRuntime.jsx(FundingWidget.FundingWidget, {}), jsxRuntime.jsx(SyncPasskeyFlow.SyncPasskeyFlow, {}), confirmationModal, children] }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }));
 };
 
 exports.DynamicContext = DynamicContext;

package/src/lib/context/DynamicContext/DynamicContext.js

@@ -720,13 +720,13 @@ const DynamicContextProvider = ({ children, theme, settings, locale, }) => {
             setShowDynamicUserProfile(true);
         }
     }, [multiWallet, multiWalletWidgetState, showDynamicUserProfile, user]);
-    return (jsx(I18nextProvider, { i18n: i18nSDKInstance, children: jsx(DynamicContext.Provider, { value: value, children: jsx(WalletBookContextProvider, { walletBook: walletBook, children: jsx(ThemeContextProvider, { customerTheme: parseTheme(theme, ((_h = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _h === void 0 ? void 0 : _h.modal) || undefined), designSettings: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design, children: jsx(LoadingContextProvider, { children: jsx(ViewContextProvider, { initialView: getInitialView({
-                                connectedWallets,
-                                isAuthenticated,
-                                isBridgeFlow,
-                                isFullyConnected,
-                                isMultiWalletEnabled: multiWallet,
-                            }), children: jsx(AccountExistsContextProvider, { children: jsx(WalletContextProvider, { canSync: didConnectedStateLoad, children: jsx(QrCodeContextProvider, { children: jsx(EmailVerificationContextProvider, { children: jsx(ErrorContextProvider, { children: jsx(DynamicWidgetContextProvider, { children: jsx(DynamicBridgeWidgetContextProvider, { children: jsx(CaptchaContextProvider, { children: jsx(FundingContextProvider, { children: jsx(AccessDeniedContextProvider, { children: jsx(SendBalanceContextProvider, { children: jsx(WalletGroupContextProvider, { children: jsxs(UserFieldEditorContextProvider, { children: [jsx(DynamicAuthFlow, {}), jsx(Toolkit, {}), jsx(FundingWidget, {}), jsx(SyncPasskeyFlow, {}), confirmationModal, children] }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }));
+    return (jsx(I18nextProvider, { i18n: i18nSDKInstance, children: jsx(DynamicContext.Provider, { value: value, children: jsx(WalletBookContextProvider, { walletBook: walletBook, children: jsx(ThemeContextProvider, { customerTheme: parseTheme(theme, ((_h = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design) === null || _h === void 0 ? void 0 : _h.modal) || undefined), designSettings: projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.design, children: jsx(LoadingContextProvider, { children: jsx(ErrorContextProvider, { children: jsx(ViewContextProvider, { initialView: getInitialView({
+                                    connectedWallets,
+                                    isAuthenticated,
+                                    isBridgeFlow,
+                                    isFullyConnected,
+                                    isMultiWalletEnabled: multiWallet,
+                                }), children: jsx(AccountExistsContextProvider, { children: jsx(WalletContextProvider, { canSync: didConnectedStateLoad, children: jsx(QrCodeContextProvider, { children: jsx(EmailVerificationContextProvider, { children: jsx(DynamicWidgetContextProvider, { children: jsx(DynamicBridgeWidgetContextProvider, { children: jsx(CaptchaContextProvider, { children: jsx(FundingContextProvider, { children: jsx(AccessDeniedContextProvider, { children: jsx(SendBalanceContextProvider, { children: jsx(WalletGroupContextProvider, { children: jsxs(UserFieldEditorContextProvider, { children: [jsx(DynamicAuthFlow, {}), jsx(Toolkit, {}), jsx(FundingWidget, {}), jsx(SyncPasskeyFlow, {}), confirmationModal, children] }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) }));
 };
 
 export { DynamicContext, DynamicContextProvider, PUBLIC_PROJECT_LIVE_ENVIRONMENT_ID };

package/src/lib/layout/DynamicAuthLayout/DynamicAuthLayout.cjs

@@ -35,6 +35,7 @@ var OverlayCardTarget = require('../../components/OverlayCard/OverlayCardTarget.
 var index = require('../../context/FooterAnimationContext/index.cjs');
 var useAuthLayoutChecks = require('../../utils/hooks/useAuthLayoutChecks/useAuthLayoutChecks.cjs');
 var useDynamicLayoutData = require('../../utils/hooks/useDynamicLayoutData/useDynamicLayoutData.cjs');
+var DynamicFooter = require('../../components/DynamicFooter/DynamicFooter.cjs');
 var header = require('./Header/header.cjs');
 require('../../context/WalletGroupContext/WalletGroupContext.cjs');
 var HelpContent = require('./HelpContent/HelpContent.cjs');
@@ -75,7 +76,8 @@ const DynamicAuthLayout = ({ children, className, onClose, projectSettings, hide
         view,
     });
     const { showConnectedWalletProgress } = useAuthLayoutChecks.useAuthLayoutChecks(walletConnector);
-    return (jsxRuntime.jsx(OverlayCardTarget.OverlayCardTarget, { children: jsxRuntime.jsxs(VerticalAccordion.VerticalAccordion, { className: className, children: [jsxRuntime.jsxs(AccordionItem.AccordionItem, { isOpen: !isFooterExpanded, dimOnHide: true, children: [showConnectedWalletProgress && !hideBridgeProgressSteppers && (jsxRuntime.jsx(WalletProgressStepper.WalletProgressStepper, {})), showHeader && (jsxRuntime.jsx(header.Header, { onClose: onClose, heading: (headerData === null || headerData === void 0 ? void 0 : headerData.heading) || '', projectSettings: projectSettings, walletConnector: walletConnector })), children, showToSFooter && jsxRuntime.jsx(ToSFooter.ToSFooter, {})] }), helpHeaderData && showHelpContent && (jsxRuntime.jsx(AccordionItem.AccordionItem, { isOpen: isFooterExpanded, children: jsxRuntime.jsx("div", { children: jsxRuntime.jsx(HelpContent.HelpContent, {}) }, isFooterExpanded.toString()) }))] }) }));
+    const { showDynamicFooter } = useAuthLayoutChecks.useAuthLayoutChecks(walletConnector);
+    return (jsxRuntime.jsx(OverlayCardTarget.OverlayCardTarget, { children: jsxRuntime.jsxs(VerticalAccordion.VerticalAccordion, { className: className, children: [jsxRuntime.jsxs(AccordionItem.AccordionItem, { isOpen: !isFooterExpanded, dimOnHide: true, children: [showConnectedWalletProgress && !hideBridgeProgressSteppers && (jsxRuntime.jsx(WalletProgressStepper.WalletProgressStepper, {})), showHeader && (jsxRuntime.jsx(header.Header, { onClose: onClose, heading: (headerData === null || headerData === void 0 ? void 0 : headerData.heading) || '', projectSettings: projectSettings, walletConnector: walletConnector })), children, showDynamicFooter && jsxRuntime.jsx(DynamicFooter.DynamicFooter, {}), showToSFooter && jsxRuntime.jsx(ToSFooter.ToSFooter, {})] }), helpHeaderData && showHelpContent && (jsxRuntime.jsx(AccordionItem.AccordionItem, { isOpen: isFooterExpanded, children: jsxRuntime.jsx("div", { children: jsxRuntime.jsx(HelpContent.HelpContent, {}) }, isFooterExpanded.toString()) }))] }) }));
 };
 
 exports.DynamicAuthLayout = DynamicAuthLayout;

package/src/lib/layout/DynamicAuthLayout/DynamicAuthLayout.js

@@ -31,6 +31,7 @@ import { OverlayCardTarget } from '../../components/OverlayCard/OverlayCardTarge
 import { useFooterAnimationContext } from '../../context/FooterAnimationContext/index.js';
 import { useAuthLayoutChecks } from '../../utils/hooks/useAuthLayoutChecks/useAuthLayoutChecks.js';
 import { useDynamicLayoutData } from '../../utils/hooks/useDynamicLayoutData/useDynamicLayoutData.js';
+import { DynamicFooter } from '../../components/DynamicFooter/DynamicFooter.js';
 import { Header } from './Header/header.js';
 import '../../context/WalletGroupContext/WalletGroupContext.js';
 import { HelpContent } from './HelpContent/HelpContent.js';
@@ -71,7 +72,8 @@ const DynamicAuthLayout = ({ children, className, onClose, projectSettings, hide
         view,
     });
     const { showConnectedWalletProgress } = useAuthLayoutChecks(walletConnector);
-    return (jsx(OverlayCardTarget, { children: jsxs(VerticalAccordion, { className: className, children: [jsxs(AccordionItem, { isOpen: !isFooterExpanded, dimOnHide: true, children: [showConnectedWalletProgress && !hideBridgeProgressSteppers && (jsx(WalletProgressStepper, {})), showHeader && (jsx(Header, { onClose: onClose, heading: (headerData === null || headerData === void 0 ? void 0 : headerData.heading) || '', projectSettings: projectSettings, walletConnector: walletConnector })), children, showToSFooter && jsx(ToSFooter, {})] }), helpHeaderData && showHelpContent && (jsx(AccordionItem, { isOpen: isFooterExpanded, children: jsx("div", { children: jsx(HelpContent, {}) }, isFooterExpanded.toString()) }))] }) }));
+    const { showDynamicFooter } = useAuthLayoutChecks(walletConnector);
+    return (jsx(OverlayCardTarget, { children: jsxs(VerticalAccordion, { className: className, children: [jsxs(AccordionItem, { isOpen: !isFooterExpanded, dimOnHide: true, children: [showConnectedWalletProgress && !hideBridgeProgressSteppers && (jsx(WalletProgressStepper, {})), showHeader && (jsx(Header, { onClose: onClose, heading: (headerData === null || headerData === void 0 ? void 0 : headerData.heading) || '', projectSettings: projectSettings, walletConnector: walletConnector })), children, showDynamicFooter && jsx(DynamicFooter, {}), showToSFooter && jsx(ToSFooter, {})] }), helpHeaderData && showHelpContent && (jsx(AccordionItem, { isOpen: isFooterExpanded, children: jsx("div", { children: jsx(HelpContent, {}) }, isFooterExpanded.toString()) }))] }) }));
 };
 
 export { DynamicAuthLayout };

package/src/lib/layout/DynamicAuthLayout/Header/header.cjs

@@ -10,8 +10,8 @@ require('../../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 var ViewContext = require('../../../context/ViewContext/ViewContext.cjs');
+var arrowLeft = require('../../../shared/assets/arrow-left.cjs');
 var close = require('../../../shared/assets/close.cjs');
-var chevronLeft = require('../../../shared/assets/chevron-left.cjs');
 var footerInfoIcon = require('../../../shared/assets/footer-info-icon.cjs');
 var questionMark = require('../../../shared/assets/question-mark.cjs');
 require('@dynamic-labs/wallet-book');
@@ -70,8 +70,8 @@ const Header = ({ onClose: handleClose, heading, projectSettings, walletConnecto
     const { setError } = ErrorContext.useErrorContext();
     const { setShowQrCodeImage } = QrCodeContext.useQrCodeContext();
     const { isFooterExpanded, setIsFooterExpanded } = index.useFooterAnimationContext();
-    const { view, goToInitialView } = ViewContext.useViewContext();
-    const { showBackButton, showCloseButton, showQrCodePreHeader, showHelpContent, isWalletListTypeView, } = useAuthLayoutChecks.useAuthLayoutChecks(walletConnector);
+    const { goToInitialView } = ViewContext.useViewContext();
+    const { showBackButton, showCloseButton, showQrCodePreHeader, showHelpContent, isWalletListTypeView, displayBorderBelowHeader, } = useAuthLayoutChecks.useAuthLayoutChecks(walletConnector);
     const { setExistentAccountData } = AccountExistsContext.useAccountExistsContext();
     const handleBackClick = React.useCallback(() => {
         goToInitialView();
@@ -93,28 +93,15 @@ const Header = ({ onClose: handleClose, heading, projectSettings, walletConnecto
         if (showBackButton) {
             buttons = [
                 ...buttons,
-                jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: handleBackClick, "data-testid": 'back-button', className: 'header__icon', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }, 'back-button'),
-            ];
-        }
-        if (showHelpContent) {
-            buttons = [
-                ...buttons,
-                jsxRuntime.jsx(Tooltip.Tooltip, { content: 'Need some help?', className: 'header__tooltip', children: jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: () => setIsFooterExpanded(!isFooterExpanded), "data-testid": 'info-button', className: 'header__icon', children: isWalletListTypeView ? jsxRuntime.jsx(questionMark.ReactComponent, {}) : jsxRuntime.jsx(footerInfoIcon.ReactComponent, {}) }) }, 'info-button'),
+                jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: handleBackClick, "data-testid": 'back-button', className: 'header__icon', children: jsxRuntime.jsx(arrowLeft.ReactComponent, {}) }, 'back-button'),
             ];
         }
         return buttons;
-    }, [
-        handleBackClick,
-        isFooterExpanded,
-        isWalletListTypeView,
-        setIsFooterExpanded,
-        showBackButton,
-        showHelpContent,
-    ]);
+    }, [handleBackClick, showBackButton]);
     const closeButton = showCloseButton && handleClose && (jsxRuntime.jsx(IconButton.IconButton, { onClick: handleClose, type: 'button', id: 'close-button', "data-testid": 'close-button', className: 'header__icon', children: jsxRuntime.jsx(close.ReactComponent, {}) }));
+    const infoButton = showHelpContent && (jsxRuntime.jsx(Tooltip.Tooltip, { content: 'Need some help?', className: 'header__tooltip', children: jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: () => setIsFooterExpanded(!isFooterExpanded), "data-testid": 'info-button', className: 'header__icon', children: isWalletListTypeView ? jsxRuntime.jsx(questionMark.ReactComponent, {}) : jsxRuntime.jsx(footerInfoIcon.ReactComponent, {}) }) }, 'info-button'));
     const qrCodePreHeader = (jsxRuntime.jsxs("div", { className: 'qr-code-view__scan-issue-message', children: [jsxRuntime.jsx(Typography.Typography, { color: 'primary', variant: 'body_small', children: "If you're having issues scanning, click\u00A0" }), jsxRuntime.jsx("button", { className: 'qr-code-view__scan-issue-button', onClick: () => setShowQrCodeImage(true), children: "here" })] }));
-    const positionAbsolute = view === 'login-with-email-verification';
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showQrCodePreHeader && qrCodePreHeader, jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: leadingButtons, trailing: closeButton, positionAbsolute: positionAbsolute, children: jsxRuntime.jsx(Typography.Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', children: !projectSettings ? (jsxRuntime.jsx(Skeleton.Skeleton, { className: 'header__skeleton' })) : (heading) }) })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: leadingButtons, trailing: infoButton || closeButton, displayBorder: displayBorderBelowHeader, children: jsxRuntime.jsx(Typography.Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', children: !projectSettings ? (jsxRuntime.jsx(Skeleton.Skeleton, { className: 'header__skeleton' })) : (heading) }) }), showQrCodePreHeader && qrCodePreHeader] }));
 };
 
 exports.Header = Header;

package/src/lib/layout/DynamicAuthLayout/Header/header.js

@@ -6,8 +6,8 @@ import '../../../shared/logger.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import { useViewContext } from '../../../context/ViewContext/ViewContext.js';
+import { ReactComponent as SvgArrowLeft } from '../../../shared/assets/arrow-left.js';
 import { ReactComponent as SvgClose } from '../../../shared/assets/close.js';
-import { ReactComponent as SvgChevronLeft } from '../../../shared/assets/chevron-left.js';
 import { ReactComponent as SvgFooterInfoIcon } from '../../../shared/assets/footer-info-icon.js';
 import { ReactComponent as SvgQuestionMark } from '../../../shared/assets/question-mark.js';
 import '@dynamic-labs/wallet-book';
@@ -66,8 +66,8 @@ const Header = ({ onClose: handleClose, heading, projectSettings, walletConnecto
     const { setError } = useErrorContext();
     const { setShowQrCodeImage } = useQrCodeContext();
     const { isFooterExpanded, setIsFooterExpanded } = useFooterAnimationContext();
-    const { view, goToInitialView } = useViewContext();
-    const { showBackButton, showCloseButton, showQrCodePreHeader, showHelpContent, isWalletListTypeView, } = useAuthLayoutChecks(walletConnector);
+    const { goToInitialView } = useViewContext();
+    const { showBackButton, showCloseButton, showQrCodePreHeader, showHelpContent, isWalletListTypeView, displayBorderBelowHeader, } = useAuthLayoutChecks(walletConnector);
     const { setExistentAccountData } = useAccountExistsContext();
     const handleBackClick = useCallback(() => {
         goToInitialView();
@@ -89,28 +89,15 @@ const Header = ({ onClose: handleClose, heading, projectSettings, walletConnecto
         if (showBackButton) {
             buttons = [
                 ...buttons,
-                jsx(IconButton, { type: 'button', onClick: handleBackClick, "data-testid": 'back-button', className: 'header__icon', children: jsx(SvgChevronLeft, {}) }, 'back-button'),
-            ];
-        }
-        if (showHelpContent) {
-            buttons = [
-                ...buttons,
-                jsx(Tooltip, { content: 'Need some help?', className: 'header__tooltip', children: jsx(IconButton, { type: 'button', onClick: () => setIsFooterExpanded(!isFooterExpanded), "data-testid": 'info-button', className: 'header__icon', children: isWalletListTypeView ? jsx(SvgQuestionMark, {}) : jsx(SvgFooterInfoIcon, {}) }) }, 'info-button'),
+                jsx(IconButton, { type: 'button', onClick: handleBackClick, "data-testid": 'back-button', className: 'header__icon', children: jsx(SvgArrowLeft, {}) }, 'back-button'),
             ];
         }
         return buttons;
-    }, [
-        handleBackClick,
-        isFooterExpanded,
-        isWalletListTypeView,
-        setIsFooterExpanded,
-        showBackButton,
-        showHelpContent,
-    ]);
+    }, [handleBackClick, showBackButton]);
     const closeButton = showCloseButton && handleClose && (jsx(IconButton, { onClick: handleClose, type: 'button', id: 'close-button', "data-testid": 'close-button', className: 'header__icon', children: jsx(SvgClose, {}) }));
+    const infoButton = showHelpContent && (jsx(Tooltip, { content: 'Need some help?', className: 'header__tooltip', children: jsx(IconButton, { type: 'button', onClick: () => setIsFooterExpanded(!isFooterExpanded), "data-testid": 'info-button', className: 'header__icon', children: isWalletListTypeView ? jsx(SvgQuestionMark, {}) : jsx(SvgFooterInfoIcon, {}) }) }, 'info-button'));
     const qrCodePreHeader = (jsxs("div", { className: 'qr-code-view__scan-issue-message', children: [jsx(Typography, { color: 'primary', variant: 'body_small', children: "If you're having issues scanning, click\u00A0" }), jsx("button", { className: 'qr-code-view__scan-issue-button', onClick: () => setShowQrCodeImage(true), children: "here" })] }));
-    const positionAbsolute = view === 'login-with-email-verification';
-    return (jsxs(Fragment, { children: [showQrCodePreHeader && qrCodePreHeader, jsx(ModalHeader, { leading: leadingButtons, trailing: closeButton, positionAbsolute: positionAbsolute, children: jsx(Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', children: !projectSettings ? (jsx(Skeleton, { className: 'header__skeleton' })) : (heading) }) })] }));
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, { leading: leadingButtons, trailing: infoButton || closeButton, displayBorder: displayBorderBelowHeader, children: jsx(Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-modal-heading', className: 'header__typography', children: !projectSettings ? (jsx(Skeleton, { className: 'header__skeleton' })) : (heading) }) }), showQrCodePreHeader && qrCodePreHeader] }));
 };
 
 export { Header };

package/src/lib/layout/DynamicAuthLayout/HelpContent/HelpHeader/HelpHeader.cjs

@@ -34,9 +34,9 @@ require('../../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 require('../../../../context/AccountExistsContext/AccountExistsContext.cjs');
 require('../../../../components/OverlayCard/OverlayCard.context.cjs');
 var index = require('../../../../context/FooterAnimationContext/index.cjs');
-require('../../../../context/MockContext/MockContext.cjs');
-require('../../../../context/QrCodeContext/QrCodeContext.cjs');
+var useAuthLayoutChecks = require('../../../../utils/hooks/useAuthLayoutChecks/useAuthLayoutChecks.cjs');
 var useDynamicLayoutData = require('../../../../utils/hooks/useDynamicLayoutData/useDynamicLayoutData.cjs');
+require('../../../../context/QrCodeContext/QrCodeContext.cjs');
 require('../../../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('react-i18next');
 require('../../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
@@ -52,6 +52,7 @@ require('../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUse
 require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
 require('formik');
 require('yup');
+require('../../../../context/MockContext/MockContext.cjs');
 var ModalHeader = require('../../../../components/ModalHeader/ModalHeader.cjs');
 var IconButton = require('../../../../components/IconButton/IconButton.cjs');
 require('../../../../components/Alert/Alert.cjs');
@@ -61,12 +62,13 @@ require('../../../../components/InlineWidget/InlineWidget.cjs');
 require('../../../../components/MenuList/Dropdown/Dropdown.cjs');
 
 const HelpHeader = () => {
-    const { authMode } = useInternalDynamicContext.useInternalDynamicContext();
+    const { authMode, selectedWalletConnector } = useInternalDynamicContext.useInternalDynamicContext();
     const { setIsFooterExpanded } = index.useFooterAnimationContext();
     const { view } = ViewContext.useViewContext();
     const { helpHeaderData } = useDynamicLayoutData.useDynamicLayoutData({ authMode, view });
+    const { displayBorderBelowHeader } = useAuthLayoutChecks.useAuthLayoutChecks(selectedWalletConnector);
     const backButton = (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: () => setIsFooterExpanded(false), "data-testid": 'back-button', className: 'header__icon', children: jsxRuntime.jsx(chevronLeft.ReactComponent, { className: 'back-button ' }) }));
-    return (jsxRuntime.jsx("div", { className: 'help-header', children: jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: backButton, children: jsxRuntime.jsx(Typography.Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-help-heading', className: 'header__typography', children: helpHeaderData === null || helpHeaderData === void 0 ? void 0 : helpHeaderData.heading }) }) }));
+    return (jsxRuntime.jsx("div", { className: 'help-header', children: jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: backButton, displayLeading: false, displayBorder: displayBorderBelowHeader, children: jsxRuntime.jsx(Typography.Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-help-heading', className: 'header__typography', children: helpHeaderData === null || helpHeaderData === void 0 ? void 0 : helpHeaderData.heading }) }) }));
 };
 
 exports.HelpHeader = HelpHeader;

package/src/lib/layout/DynamicAuthLayout/HelpContent/HelpHeader/HelpHeader.js

@@ -30,9 +30,9 @@ import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../../context/AccountExistsContext/AccountExistsContext.js';
 import '../../../../components/OverlayCard/OverlayCard.context.js';
 import { useFooterAnimationContext } from '../../../../context/FooterAnimationContext/index.js';
-import '../../../../context/MockContext/MockContext.js';
-import '../../../../context/QrCodeContext/QrCodeContext.js';
+import { useAuthLayoutChecks } from '../../../../utils/hooks/useAuthLayoutChecks/useAuthLayoutChecks.js';
 import { useDynamicLayoutData } from '../../../../utils/hooks/useDynamicLayoutData/useDynamicLayoutData.js';
+import '../../../../context/QrCodeContext/QrCodeContext.js';
 import '../../../../context/WalletGroupContext/WalletGroupContext.js';
 import 'react-i18next';
 import '../../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
@@ -48,6 +48,7 @@ import '../../../../utils/hooks/useUserUpdateRequest/useUpdateUser/useUpdateUser
 import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import 'formik';
 import 'yup';
+import '../../../../context/MockContext/MockContext.js';
 import { ModalHeader } from '../../../../components/ModalHeader/ModalHeader.js';
 import { IconButton } from '../../../../components/IconButton/IconButton.js';
 import '../../../../components/Alert/Alert.js';
@@ -57,12 +58,13 @@ import '../../../../components/InlineWidget/InlineWidget.js';
 import '../../../../components/MenuList/Dropdown/Dropdown.js';
 
 const HelpHeader = () => {
-    const { authMode } = useInternalDynamicContext();
+    const { authMode, selectedWalletConnector } = useInternalDynamicContext();
     const { setIsFooterExpanded } = useFooterAnimationContext();
     const { view } = useViewContext();
     const { helpHeaderData } = useDynamicLayoutData({ authMode, view });
+    const { displayBorderBelowHeader } = useAuthLayoutChecks(selectedWalletConnector);
     const backButton = (jsx(IconButton, { type: 'button', onClick: () => setIsFooterExpanded(false), "data-testid": 'back-button', className: 'header__icon', children: jsx(SvgChevronLeft, { className: 'back-button ' }) }));
-    return (jsx("div", { className: 'help-header', children: jsx(ModalHeader, { trailing: backButton, children: jsx(Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-help-heading', className: 'header__typography', children: helpHeaderData === null || helpHeaderData === void 0 ? void 0 : helpHeaderData.heading }) }) }));
+    return (jsx("div", { className: 'help-header', children: jsx(ModalHeader, { trailing: backButton, displayLeading: false, displayBorder: displayBorderBelowHeader, children: jsx(Typography, { as: 'h1', variant: 'title', color: 'primary', "data-testid": 'dynamic-auth-help-heading', className: 'header__typography', children: helpHeaderData === null || helpHeaderData === void 0 ? void 0 : helpHeaderData.heading }) }) }));
 };
 
 export { HelpHeader };

package/src/lib/layout/DynamicAuthLayout/HelpContent/WalletMoreInfoContent/WalletMoreInfoContent.cjs

@@ -55,7 +55,6 @@ require('../../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs')
 require('formik');
 require('yup');
 require('../../../../components/IconButton/IconButton.cjs');
-var PoweredByDynamic = require('../../../../components/PoweredByDynamic/PoweredByDynamic.cjs');
 require('../../../../components/Alert/Alert.cjs');
 var EnterTileAnimation = require('../../../../components/EnterTileAnimation/EnterTileAnimation.cjs');
 require('../../../../components/Popper/Popper/Popper.cjs');
@@ -109,7 +108,7 @@ const WalletMoreInfoContent = ({ variant, walletName, }) => {
         },
         sign: signInfoMessage,
     };
-    return (jsxRuntime.jsxs("div", { className: 'footer-more-info-content__wrapper', children: [copys[variant].info.map((item, index) => (jsxRuntime.jsx("div", { className: 'footer-more-info-content__item', children: jsxRuntime.jsx(EnterTileAnimation.EnterTileAnimation, { delay: `${0.3 + index * 0.2}s`, children: jsxRuntime.jsx(InfoItem.InfoItem, { Icon: item.icon, title: item.title, content: item.content }) }) }, index))), jsxRuntime.jsx(EnterTileAnimation.EnterTileAnimation, { delay: `${0.3 + copys[variant].info.length * 0.2}s`, children: jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, { align: 'center' }) })] }));
+    return (jsxRuntime.jsx("div", { className: 'footer-more-info-content__wrapper', children: copys[variant].info.map((item, index) => (jsxRuntime.jsx("div", { className: 'footer-more-info-content__item', children: jsxRuntime.jsx(EnterTileAnimation.EnterTileAnimation, { delay: `${0.3 + index * 0.2}s`, children: jsxRuntime.jsx(InfoItem.InfoItem, { Icon: item.icon, title: item.title, content: item.content }) }) }, index))) }));
 };
 
 exports.WalletMoreInfoContent = WalletMoreInfoContent;

package/src/lib/layout/DynamicAuthLayout/HelpContent/WalletMoreInfoContent/WalletMoreInfoContent.js

@@ -51,7 +51,6 @@ import '../../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
 import 'formik';
 import 'yup';
 import '../../../../components/IconButton/IconButton.js';
-import { PoweredByDynamic } from '../../../../components/PoweredByDynamic/PoweredByDynamic.js';
 import '../../../../components/Alert/Alert.js';
 import { EnterTileAnimation } from '../../../../components/EnterTileAnimation/EnterTileAnimation.js';
 import '../../../../components/Popper/Popper/Popper.js';
@@ -105,7 +104,7 @@ const WalletMoreInfoContent = ({ variant, walletName, }) => {
         },
         sign: signInfoMessage,
     };
-    return (jsxs("div", { className: 'footer-more-info-content__wrapper', children: [copys[variant].info.map((item, index) => (jsx("div", { className: 'footer-more-info-content__item', children: jsx(EnterTileAnimation, { delay: `${0.3 + index * 0.2}s`, children: jsx(InfoItem, { Icon: item.icon, title: item.title, content: item.content }) }) }, index))), jsx(EnterTileAnimation, { delay: `${0.3 + copys[variant].info.length * 0.2}s`, children: jsx(PoweredByDynamic, { align: 'center' }) })] }));
+    return (jsx("div", { className: 'footer-more-info-content__wrapper', children: copys[variant].info.map((item, index) => (jsx("div", { className: 'footer-more-info-content__item', children: jsx(EnterTileAnimation, { delay: `${0.3 + index * 0.2}s`, children: jsx(InfoItem, { Icon: item.icon, title: item.title, content: item.content }) }) }, index))) }));
 };
 
 export { WalletMoreInfoContent };

package/src/lib/layouts/BridgeNextWalletToConnectLayout/BridgeNextWalletToConnectLayout.cjs

@@ -62,7 +62,7 @@ require('../../components/MenuList/Dropdown/Dropdown.cjs');
 
 const BridgeNextWalletToConnectLayout = ({ chainName, chainIcon, onClickAction, onClickClose }) => {
     const closeButton = onClickClose && (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onClickClose, "data-testid": 'close-button', children: jsxRuntime.jsx(close.ReactComponent, {}) }));
-    return (jsxRuntime.jsxs("div", { className: 'bridge-next-wallet-to-connect-layout', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: closeButton, alignContent: 'bottom', children: chainIcon && (jsxRuntime.jsx("div", { className: 'bridge-next-wallet-to-connect-layout__chain-icon', children: chainIcon })) }), jsxRuntime.jsxs("div", { className: 'bridge-next-wallet-to-connect-layout__body', children: [jsxRuntime.jsxs(Typography.Typography, { color: 'primary', variant: 'title', children: ["Nice! Now let\u2019s connect your ", chainName, " wallet"] }), jsxRuntime.jsx(Button.Button, { expanded: true, buttonRounded: 'default', buttonPadding: 'large', onClick: onClickAction, children: `Connect ${chainName} wallet` })] })] }));
+    return (jsxRuntime.jsxs("div", { className: 'bridge-next-wallet-to-connect-layout', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: closeButton, alignContent: 'bottom', children: chainIcon && (jsxRuntime.jsx("div", { className: 'bridge-next-wallet-to-connect-layout__chain-icon', children: chainIcon })) }), jsxRuntime.jsxs("div", { className: 'bridge-next-wallet-to-connect-layout__body', children: [jsxRuntime.jsxs(Typography.Typography, { color: 'primary', variant: 'title', children: ["Nice! Now let\u2019s connect your ", chainName, " wallet"] }), jsxRuntime.jsx(Button.Button, { expanded: true, buttonPadding: 'large', onClick: onClickAction, children: `Connect ${chainName} wallet` })] })] }));
 };
 
 exports.BridgeNextWalletToConnectLayout = BridgeNextWalletToConnectLayout;

package/src/lib/layouts/BridgeNextWalletToConnectLayout/BridgeNextWalletToConnectLayout.js

@@ -58,7 +58,7 @@ import '../../components/MenuList/Dropdown/Dropdown.js';
 
 const BridgeNextWalletToConnectLayout = ({ chainName, chainIcon, onClickAction, onClickClose }) => {
     const closeButton = onClickClose && (jsx(IconButton, { type: 'button', onClick: onClickClose, "data-testid": 'close-button', children: jsx(SvgClose, {}) }));
-    return (jsxs("div", { className: 'bridge-next-wallet-to-connect-layout', children: [jsx(ModalHeader, { trailing: closeButton, alignContent: 'bottom', children: chainIcon && (jsx("div", { className: 'bridge-next-wallet-to-connect-layout__chain-icon', children: chainIcon })) }), jsxs("div", { className: 'bridge-next-wallet-to-connect-layout__body', children: [jsxs(Typography, { color: 'primary', variant: 'title', children: ["Nice! Now let\u2019s connect your ", chainName, " wallet"] }), jsx(Button, { expanded: true, buttonRounded: 'default', buttonPadding: 'large', onClick: onClickAction, children: `Connect ${chainName} wallet` })] })] }));
+    return (jsxs("div", { className: 'bridge-next-wallet-to-connect-layout', children: [jsx(ModalHeader, { trailing: closeButton, alignContent: 'bottom', children: chainIcon && (jsx("div", { className: 'bridge-next-wallet-to-connect-layout__chain-icon', children: chainIcon })) }), jsxs("div", { className: 'bridge-next-wallet-to-connect-layout__body', children: [jsxs(Typography, { color: 'primary', variant: 'title', children: ["Nice! Now let\u2019s connect your ", chainName, " wallet"] }), jsx(Button, { expanded: true, buttonPadding: 'large', onClick: onClickAction, children: `Connect ${chainName} wallet` })] })] }));
 };
 
 export { BridgeNextWalletToConnectLayout };

package/src/lib/layouts/BridgeWelcomeLayout/BridgeWelcomeLayout.cjs

@@ -64,7 +64,7 @@ require('../../components/MenuList/Dropdown/Dropdown.cjs');
 
 const BridgeWelcomeLayout = ({ body, chains = [], onClickAction, onClickClose, title, actionButtonText, }) => {
     const closeButton = onClickClose && (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onClickClose, "data-testid": 'close-button', children: jsxRuntime.jsx(close.ReactComponent, {}) }));
-    return (jsxRuntime.jsxs("div", { className: 'bridge-welcome-layout', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: closeButton, alignContent: 'bottom', children: jsxRuntime.jsx("div", { className: 'bridge-welcome-layout__chain-icon-group', children: [...chains].reverse().map((chain, index) => (jsxRuntime.jsx("div", { className: 'bridge-welcome-layout__chain-icon', style: { zIndex: index }, children: chain.icon }, chain.id))) }) }), jsxRuntime.jsxs("div", { className: 'bridge-welcome-layout__body', children: [jsxRuntime.jsxs("div", { className: 'bridge-welcome-layout__message-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', children: title }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', children: body })] }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Stepper.Stepper, { children: chains.map((chain) => (jsxRuntime.jsx(Step.Step, { children: chain.name }, chain.id))) }) }), jsxRuntime.jsx(Button.Button, { buttonVariant: 'primary', buttonRounded: 'default', buttonPadding: 'large', onClick: onClickAction, children: actionButtonText })] })] }));
+    return (jsxRuntime.jsxs("div", { className: 'bridge-welcome-layout', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: closeButton, alignContent: 'bottom', children: jsxRuntime.jsx("div", { className: 'bridge-welcome-layout__chain-icon-group', children: [...chains].reverse().map((chain, index) => (jsxRuntime.jsx("div", { className: 'bridge-welcome-layout__chain-icon', style: { zIndex: index }, children: chain.icon }, chain.id))) }) }), jsxRuntime.jsxs("div", { className: 'bridge-welcome-layout__body', children: [jsxRuntime.jsxs("div", { className: 'bridge-welcome-layout__message-container', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', children: title }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', children: body })] }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Stepper.Stepper, { children: chains.map((chain) => (jsxRuntime.jsx(Step.Step, { children: chain.name }, chain.id))) }) }), jsxRuntime.jsx(Button.Button, { buttonVariant: 'primary', buttonPadding: 'large', onClick: onClickAction, children: actionButtonText })] })] }));
 };
 
 exports.BridgeWelcomeLayout = BridgeWelcomeLayout;

package/src/lib/layouts/BridgeWelcomeLayout/BridgeWelcomeLayout.js

@@ -60,7 +60,7 @@ import '../../components/MenuList/Dropdown/Dropdown.js';
 
 const BridgeWelcomeLayout = ({ body, chains = [], onClickAction, onClickClose, title, actionButtonText, }) => {
     const closeButton = onClickClose && (jsx(IconButton, { type: 'button', onClick: onClickClose, "data-testid": 'close-button', children: jsx(SvgClose, {}) }));
-    return (jsxs("div", { className: 'bridge-welcome-layout', children: [jsx(ModalHeader, { trailing: closeButton, alignContent: 'bottom', children: jsx("div", { className: 'bridge-welcome-layout__chain-icon-group', children: [...chains].reverse().map((chain, index) => (jsx("div", { className: 'bridge-welcome-layout__chain-icon', style: { zIndex: index }, children: chain.icon }, chain.id))) }) }), jsxs("div", { className: 'bridge-welcome-layout__body', children: [jsxs("div", { className: 'bridge-welcome-layout__message-container', children: [jsx(Typography, { variant: 'title', color: 'primary', children: title }), jsx(Typography, { variant: 'body_normal', color: 'secondary', children: body })] }), jsx("div", { children: jsx(Stepper, { children: chains.map((chain) => (jsx(Step, { children: chain.name }, chain.id))) }) }), jsx(Button, { buttonVariant: 'primary', buttonRounded: 'default', buttonPadding: 'large', onClick: onClickAction, children: actionButtonText })] })] }));
+    return (jsxs("div", { className: 'bridge-welcome-layout', children: [jsx(ModalHeader, { trailing: closeButton, alignContent: 'bottom', children: jsx("div", { className: 'bridge-welcome-layout__chain-icon-group', children: [...chains].reverse().map((chain, index) => (jsx("div", { className: 'bridge-welcome-layout__chain-icon', style: { zIndex: index }, children: chain.icon }, chain.id))) }) }), jsxs("div", { className: 'bridge-welcome-layout__body', children: [jsxs("div", { className: 'bridge-welcome-layout__message-container', children: [jsx(Typography, { variant: 'title', color: 'primary', children: title }), jsx(Typography, { variant: 'body_normal', color: 'secondary', children: body })] }), jsx("div", { children: jsx(Stepper, { children: chains.map((chain) => (jsx(Step, { children: chain.name }, chain.id))) }) }), jsx(Button, { buttonVariant: 'primary', buttonPadding: 'large', onClick: onClickAction, children: actionButtonText })] })] }));
 };
 
 export { BridgeWelcomeLayout };

package/src/lib/layouts/ConnectedWalletsListLayout/ConnectedWalletsListLayout.cjs

@@ -64,7 +64,7 @@ require('../../components/MenuList/Dropdown/Dropdown.cjs');
 const ConnectedWalletsListLayout = ({ title, body, onClickBack, onClickClose, onClickAction, actionButtonText = 'Continue', children, }) => {
     const closeButton = onClickClose && (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onClickClose, "data-testid": 'close-button', children: jsxRuntime.jsx(close.ReactComponent, {}) }));
     const backButton = onClickBack && (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }));
-    return (jsxRuntime.jsxs("div", { className: 'connected-wallets-list-layout', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, trailing: closeButton, children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', children: title }) }), jsxRuntime.jsxs("div", { className: 'connected-wallets-list-layout__body', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', className: 'connected-wallets-list-layout__body__text', children: body }), children, jsxRuntime.jsx(Button.Button, { buttonPadding: 'large', buttonRounded: 'default', buttonVariant: 'primary', onClick: onClickAction, children: actionButtonText })] })] }));
+    return (jsxRuntime.jsxs("div", { className: 'connected-wallets-list-layout', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { leading: backButton, trailing: closeButton, children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', children: title }) }), jsxRuntime.jsxs("div", { className: 'connected-wallets-list-layout__body', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'secondary', className: 'connected-wallets-list-layout__body__text', children: body }), children, jsxRuntime.jsx(Button.Button, { buttonPadding: 'large', buttonVariant: 'primary', onClick: onClickAction, children: actionButtonText })] })] }));
 };
 
 exports.ConnectedWalletsListLayout = ConnectedWalletsListLayout;

package/src/lib/layouts/ConnectedWalletsListLayout/ConnectedWalletsListLayout.js

@@ -60,7 +60,7 @@ import '../../components/MenuList/Dropdown/Dropdown.js';
 const ConnectedWalletsListLayout = ({ title, body, onClickBack, onClickClose, onClickAction, actionButtonText = 'Continue', children, }) => {
     const closeButton = onClickClose && (jsx(IconButton, { type: 'button', onClick: onClickClose, "data-testid": 'close-button', children: jsx(SvgClose, {}) }));
     const backButton = onClickBack && (jsx(IconButton, { type: 'button', onClick: onClickBack, "data-testid": 'back-button', children: jsx(SvgChevronLeft, {}) }));
-    return (jsxs("div", { className: 'connected-wallets-list-layout', children: [jsx(ModalHeader, { leading: backButton, trailing: closeButton, children: jsx(Typography, { variant: 'title', color: 'primary', children: title }) }), jsxs("div", { className: 'connected-wallets-list-layout__body', children: [jsx(Typography, { variant: 'body_normal', color: 'secondary', className: 'connected-wallets-list-layout__body__text', children: body }), children, jsx(Button, { buttonPadding: 'large', buttonRounded: 'default', buttonVariant: 'primary', onClick: onClickAction, children: actionButtonText })] })] }));
+    return (jsxs("div", { className: 'connected-wallets-list-layout', children: [jsx(ModalHeader, { leading: backButton, trailing: closeButton, children: jsx(Typography, { variant: 'title', color: 'primary', children: title }) }), jsxs("div", { className: 'connected-wallets-list-layout__body', children: [jsx(Typography, { variant: 'body_normal', color: 'secondary', className: 'connected-wallets-list-layout__body__text', children: body }), children, jsx(Button, { buttonPadding: 'large', buttonVariant: 'primary', onClick: onClickAction, children: actionButtonText })] })] }));
 };
 
 export { ConnectedWalletsListLayout };